diff --git a/apps/web/components/Integration/ContentBlock.tsx b/apps/web/components/Integration/ContentBlock.tsx
index 6f1cfeea3..640f4a62b 100644
--- a/apps/web/components/Integration/ContentBlock.tsx
+++ b/apps/web/components/Integration/ContentBlock.tsx
@@ -5,23 +5,25 @@ import { colors, IntegrationLanguage } from '@config';
 
 type CodeBlockProps = {
   code: string;
+  height?: string;
   language?: IntegrationLanguage;
 };
 
 const Prism = dynamic(() => import('@mantine/prism').then((mod) => mod.Prism));
 
-export const CodeBlock = ({ code, language = 'javascript' }: CodeBlockProps) => (
+export const CodeBlock = ({ height, code, language = 'javascript' }: CodeBlockProps) => (
   <div style={{ position: 'relative', marginTop: 10 }}>
     <Suspense fallback={<LoadingOverlay visible />}>
       <Prism
         language={language}
         copyLabel="Copy code"
         copiedLabel="Copied!"
+        withLineNumbers
         styles={{
           code: {
             backgroundColor: `${colors.black} !important`,
             border: `1px solid ${colors.DisabledDark} !important`,
-            maxHeight: '50vh',
+            height,
             overflow: 'auto',
           },
         }}
diff --git a/apps/web/components/Integration/IntegrationData.tsx b/apps/web/components/Integration/IntegrationData.tsx
index de7fa0897..eb86ae452 100644
--- a/apps/web/components/Integration/IntegrationData.tsx
+++ b/apps/web/components/Integration/IntegrationData.tsx
@@ -14,20 +14,30 @@ interface IContentProps {
   embedScriptUrl: string;
 }
 
+const HEIGHTS = {
+  WITH_TEXT: '47vh',
+  WITHOUT_TEXT: '50vh',
+};
+
 export const integrationData: Record<IntegrationEnum, Record<string, (data: IContentProps) => ReactNode>> = {
   [IntegrationEnum.JAVASCRIPT]: {
     '1) Add Script': ({ embedScriptUrl }) => (
       <>
         <ModifiedText>Add embed script before closing body tag</ModifiedText>
         <CodeBlock
-          code={`<script type='text/javascript' src='${embedScriptUrl}' async></script>`}
           language="javascript"
+          height={HEIGHTS.WITH_TEXT}
+          code={`<script type='text/javascript' src='${embedScriptUrl}' async></script>`}
         />
       </>
     ),
     '2) Add Import Button': () => (
       <>
-        <CodeBlock code={`<button disabled id="impler-btn">Import</button>`} language="markup" />
+        <CodeBlock
+          language="markup"
+          height={HEIGHTS.WITHOUT_TEXT}
+          code={`<button disabled id="impler-btn">Import</button>`}
+        />
       </>
     ),
     '3) Initialize Widget': () => (
@@ -36,6 +46,7 @@ export const integrationData: Record<IntegrationEnum, Record<string, (data: ICon
           Before the widget gets shown you have to call <Code>init</Code> method, which initialize the importer.
         </ModifiedText>
         <CodeBlock
+          height={HEIGHTS.WITH_TEXT}
           code={`
 <script type="text/javascript">
   let uuid = generateUuid();
@@ -68,6 +79,7 @@ export const integrationData: Record<IntegrationEnum, Record<string, (data: ICon
       <>
         <ModifiedText size="sm">After initialization, use the following code to show the widget:</ModifiedText>
         <CodeBlock
+          height={HEIGHTS.WITH_TEXT}
           code={`
 ImplerBtn.addEventListener("click", (e) => {
   window.impler.show({
@@ -86,6 +98,7 @@ ImplerBtn.addEventListener("click", (e) => {
       <>
         <ModifiedText size="sm">You can listen for events from the Impler widget:</ModifiedText>
         <CodeBlock
+          height={HEIGHTS.WITH_TEXT}
           code={`
  window.impler.on('message', (eventData) => {
   switch (eventData.type) {
@@ -118,6 +131,7 @@ ImplerBtn.addEventListener("click", (e) => {
     ),
     'Data Seeding in File': ({ projectId, templateId, accessToken }) => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 window.impler.show({
   uuid,
@@ -135,6 +149,7 @@ window.impler.show({
     ),
     'Customize Importer Texts': () => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 window.impler.show({
   ...
@@ -149,6 +164,7 @@ window.impler.show({
     ),
     'Advanced Validations': () => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 window.impler.show({
   ...
@@ -182,6 +198,7 @@ window.impler.show({
     ),
     'Providing Runtime Schema': () => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 window.impler.show({
   ...
@@ -210,6 +227,7 @@ window.impler.show({
     ),
     'Passing Extra Values': () => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 window.impler.show({
   ...
@@ -223,6 +241,7 @@ window.impler.show({
     ),
     'Changing Import Title': () => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 window.impler.show({
   ...
@@ -233,6 +252,7 @@ window.impler.show({
     ),
     'Programatically Closing Importer': () => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 window.impler.close();
   `}
@@ -240,6 +260,7 @@ window.impler.close();
     ),
     'Changing the Color theme': () => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 window.impler.show({
   ...
@@ -250,6 +271,7 @@ window.impler.show({
     ),
     'Passing Auth Header Value': () => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 window.impler.show({
   authHeaderValue: async () => {
@@ -262,6 +284,7 @@ window.impler.show({
     'Complete Code Example': ({ accessToken, embedScriptUrl, projectId, templateId }) => (
       <>
         <CodeBlock
+          height={HEIGHTS.WITHOUT_TEXT}
           code={`
 <!DOCTYPE html>
 <html lang="en">
@@ -340,6 +363,7 @@ window.impler.show({
       <>
         <ModifiedText>Add embed script before closing body tag</ModifiedText>
         <CodeBlock
+          height={HEIGHTS.WITH_TEXT}
           code={`
 // ReactJS
 <script type='text/javascript' src='${embedScriptUrl}' async></script>
@@ -356,13 +380,14 @@ import Script from 'next/script';
         />
       </>
     ),
-    '2) Install Package': () => <CodeBlock code="npm i @impler/react" language="bash" />,
+    '2) Install Package': () => <CodeBlock height={HEIGHTS.WITHOUT_TEXT} code="npm i @impler/react" language="bash" />,
     '3) Add Import Button': ({ accessToken, projectId, templateId }) => (
       <>
         <ModifiedText>
           Use <Code>useImpler</Code> hook provided by <Code>@impler/react</Code> to show an Importer in application
         </ModifiedText>
         <CodeBlock
+          height={HEIGHTS.WITH_TEXT}
           code={`
 import { useImpler } from "@impler/react";
 
@@ -380,6 +405,7 @@ const { showWidget, isImplerInitiated } = useImpler({
     'Customize Texts': ({ accessToken, projectId, templateId }) => (
       <>
         <CodeBlock
+          height={HEIGHTS.WITHOUT_TEXT}
           code={`
 import { useImpler } from "@impler/react";
 
@@ -402,6 +428,7 @@ const { showWidget, isImplerInitiated } = useImpler({
     'Listening for Events': ({ accessToken, projectId, templateId }) => (
       <>
         <CodeBlock
+          height={HEIGHTS.WITHOUT_TEXT}
           code={`
 const { showWidget, isImplerInitiated } = useImpler({
   projectId: "${projectId}",
@@ -430,6 +457,7 @@ const { showWidget, isImplerInitiated } = useImpler({
     'Providing Runtime Schema': () => (
       <>
         <CodeBlock
+          height={HEIGHTS.WITHOUT_TEXT}
           code={`
 showWidget({
   schema: [
@@ -459,6 +487,7 @@ showWidget({
     'Data Seeding in Sample File': () => (
       <>
         <CodeBlock
+          height={HEIGHTS.WITHOUT_TEXT}
           code={`
 showWidget({
   data: [
@@ -476,6 +505,7 @@ showWidget({
     'Advanced Validations': () => (
       <>
         <CodeBlock
+          height={HEIGHTS.WITHOUT_TEXT}
           code={`
 showWidget({
   schema: [
@@ -509,6 +539,7 @@ showWidget({
     ),
     'Using Typescript': () => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 import { useImpler, ColumnTypes, ValidationTypes } from "@impler/react";
 
@@ -538,6 +569,7 @@ showWidget({
     'Closing Import Widget': ({ accessToken, projectId, templateId }) => (
       <>
         <CodeBlock
+          height={HEIGHTS.WITHOUT_TEXT}
           code={`
 const { showWidget, closeWidget, isImplerInitiated } = useImpler({
   projectId: "${projectId}",
@@ -555,6 +587,7 @@ const { showWidget, closeWidget, isImplerInitiated } = useImpler({
     'Changing Import Title': ({ accessToken, projectId, templateId }) => (
       <>
         <CodeBlock
+          height={HEIGHTS.WITHOUT_TEXT}
           code={`
 const { showWidget, isImplerInitiated } = useImpler({
   projectId: "${projectId}",
@@ -570,6 +603,7 @@ const { showWidget, isImplerInitiated } = useImpler({
     'Changing Theme Color': ({ accessToken, projectId, templateId }) => (
       <>
         <CodeBlock
+          height={HEIGHTS.WITHOUT_TEXT}
           code={`
 const { showWidget, isImplerInitiated } = useImpler({
   projectId: "${templateId}",
@@ -584,6 +618,7 @@ const { showWidget, isImplerInitiated } = useImpler({
     'Providing Authentication Header': ({ accessToken, projectId, templateId }) => (
       <>
         <CodeBlock
+          height={HEIGHTS.WITHOUT_TEXT}
           code={`
 const { showWidget, isImplerInitiated } = useImpler({
   projectId: "${templateId}",
@@ -603,20 +638,22 @@ const { showWidget, isImplerInitiated } = useImpler({
       <>
         <ModifiedText>Add embed script before closing body tag</ModifiedText>
         <CodeBlock
-          code={`<script type="text/javascript" src="${embedScriptUrl}" async></script>`}
           language="javascript"
+          height={HEIGHTS.WITH_TEXT}
+          code={`<script type="text/javascript" src="${embedScriptUrl}" async></script>`}
         />
       </>
     ),
 
     '2) Install Package': () => (
       <>
-        <CodeBlock code="npm i @impler/angular" language="bash" />
+        <CodeBlock height={HEIGHTS.WITHOUT_TEXT} code="npm i @impler/angular" language="bash" />
       </>
     ),
     '3) Use Impler Service': ({ accessToken, projectId, templateId }) => (
       <>
         <CodeBlock
+          height={HEIGHTS.WITHOUT_TEXT}
           code={`
 import { RouterOutlet } from "@angular/router";
 import { isPlatformBrowser } from "@angular/common";
@@ -658,6 +695,7 @@ public show(): void {
 
     'Customize Texts': () => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 public show(): void {
   this.implerService.showWidget({
@@ -675,6 +713,7 @@ public show(): void {
 
     'Applying App Color Scheme': () => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 public show(): void {
   this.implerService.showWidget({
@@ -688,6 +727,7 @@ public show(): void {
 
     'Data Seeding in Sample File': () => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 public show(): void {
   this.implerService.showWidget({
@@ -704,6 +744,7 @@ public show(): void {
 
     'Providing Runtime Schema': () => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 public show(): void {
   this.implerService.showWidget({
@@ -734,6 +775,7 @@ public show(): void {
 
     'Advanced Validations': () => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 public show(): void {
   this.implerService.showWidget({
@@ -768,6 +810,7 @@ public show(): void {
     ),
     'Using Typescript': () => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 import { useImpler, ColumnTypes, ValidationTypes } from "@impler/angular";
 
@@ -796,6 +839,7 @@ public show(): void {
 
     'Passing Extra Parameters': () => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 public show(): void {
   this.implerService.showWidget({
@@ -812,6 +856,7 @@ public show(): void {
 
     'Programmatically Closing Import Widget': () => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 public close(): void {
   this.implerService.closeWidget();
@@ -822,6 +867,7 @@ public close(): void {
 
     'Changing Import Title': () => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 public show(): void {
   this.implerService.showWidget({
@@ -834,6 +880,7 @@ public show(): void {
 
     'Changing Theme Color': () => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 public show(): void {
   this.implerService.showWidget({
@@ -846,6 +893,7 @@ public show(): void {
 
     'Providing Authentication Header Value': () => (
       <CodeBlock
+        height={HEIGHTS.WITHOUT_TEXT}
         code={`
 public show(): void {
   this.implerService.showWidget({
@@ -861,6 +909,7 @@ public show(): void {
     'Usage Example': () => (
       <>
         <CodeBlock
+          height={HEIGHTS.WITHOUT_TEXT}
           code={`
 import { EventCalls, EventTypesEnum, ImplerService } from "@impler/angular";
 
diff --git a/apps/web/components/Integration/IntegrationModal.tsx b/apps/web/components/Integration/IntegrationModal.tsx
index 5b17ec4aa..9759d1bc2 100644
--- a/apps/web/components/Integration/IntegrationModal.tsx
+++ b/apps/web/components/Integration/IntegrationModal.tsx
@@ -1,9 +1,9 @@
 import getConfig from 'next/config';
 import { useEffect, useState } from 'react';
-
 import { Flex, NativeSelect, Title, useMantineColorScheme } from '@mantine/core';
-import { track } from '@libs/amplitude';
+
 import { colors } from '@config';
+import { track } from '@libs/amplitude';
 import { IntegrationEnum } from '@impler/shared';
 import { IntegrationTabs } from './IntegrationTabs';
 import { integrationData } from './IntegrationData';
@@ -57,7 +57,12 @@ export function IntegrationModal({ accessToken, projectId, templateId, integrati
         <Title order={3} color={colorScheme === 'dark' ? colors.StrokeLight : colors.StrokeDark}>
           Integrate
         </Title>
-        <NativeSelect data={Object.values(IntegrationEnum)} onChange={onIntegrationFrameworkChange} variant="default" />
+        <NativeSelect
+          variant="default"
+          value={integration}
+          data={Object.values(IntegrationEnum)}
+          onChange={onIntegrationFrameworkChange}
+        />
       </Flex>
 
       <IntegrationTabs
diff --git a/apps/web/components/imports/forms/CreateImportForm.tsx b/apps/web/components/imports/forms/CreateImportForm.tsx
index 1642485b6..29a7a2199 100644
--- a/apps/web/components/imports/forms/CreateImportForm.tsx
+++ b/apps/web/components/imports/forms/CreateImportForm.tsx
@@ -1,8 +1,8 @@
 import { Controller, useForm } from 'react-hook-form';
 import { useFocusTrap } from '@mantine/hooks';
 import { Stack, TextInput as Input, FocusTrap, Text, Group, useMantineTheme } from '@mantine/core';
-import { Button } from '@ui/button';
 
+import { Button } from '@ui/button';
 import { INTEGRATE_IMPORT } from '@config';
 import { IntegrationEnum } from '@impler/shared';
 
@@ -18,7 +18,11 @@ export function CreateImportForm({ onSubmit }: CreateImportFormProps) {
     handleSubmit,
     control,
     formState: { errors },
-  } = useForm<IUpdateTemplateData>({});
+  } = useForm<IUpdateTemplateData>({
+    defaultValues: {
+      integration: IntegrationEnum.REACT,
+    },
+  });
 
   return (
     <FocusTrap active>
@@ -47,8 +51,9 @@ export function CreateImportForm({ onSubmit }: CreateImportFormProps) {
                     key={key}
                     radius="xl"
                     leftIcon={<Icon />}
-                    variant={field.value === key ? 'filled' : 'outline'}
                     onClick={() => field.onChange(key)}
+                    color={field.value === key ? 'blue' : 'grey'}
+                    variant={field.value === key ? 'filled' : 'outline'}
                   >
                     {name}
                   </Button>
diff --git a/apps/web/config/theme.config.ts b/apps/web/config/theme.config.ts
index d503d9153..1b4078edc 100644
--- a/apps/web/config/theme.config.ts
+++ b/apps/web/config/theme.config.ts
@@ -12,6 +12,7 @@ export const colors = {
   yellow: '#F7B801',
   grey: '#B9BEBD',
   darkGrey: '#454545',
+  lightGrey: '#333333',
 
   BGPrimaryDark: '#111111',
   BGPrimaryLight: '#F3F3F3',
diff --git a/apps/web/design-system/button/Button.styles.ts b/apps/web/design-system/button/Button.styles.ts
index 6ec466c52..61e6e8a44 100644
--- a/apps/web/design-system/button/Button.styles.ts
+++ b/apps/web/design-system/button/Button.styles.ts
@@ -9,6 +9,7 @@ const colorsCodes: Record<ButtonColors, string> = {
   green: colors.green,
   invariant: colors.black,
   yellow: colors.yellow,
+  grey: colors.StrokeLight,
 };
 
 const getRootFilledStyles = (theme: MantineTheme, color: ButtonColors = 'blue', fullWidth?: boolean) => ({
@@ -101,6 +102,14 @@ const getRootOutlineStyles = (
       color: colors.white,
       border: `1px solid ${colors.yellow}`,
     }),
+    ...(color === 'grey' && {
+      backgroundColor: colors.lightGrey,
+      color: colors.white,
+      border: `1px solid ${colors.lightGrey}`,
+      '> svg': {
+        color: theme.colorScheme === 'dark' ? colors.black : colors.white,
+      },
+    }),
     color: theme.colorScheme === 'dark' && color === 'invariant' ? colors.black : colors.white,
   },
 });
diff --git a/apps/web/design-system/button/Button.tsx b/apps/web/design-system/button/Button.tsx
index 3fe4a8f21..e3e3585ac 100644
--- a/apps/web/design-system/button/Button.tsx
+++ b/apps/web/design-system/button/Button.tsx
@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 import useStyles from './Button.styles';
 import { Button as MantineButton, MantineSize, ButtonProps as MantineButtonProps } from '@mantine/core';
 
-export type ButtonColors = 'blue' | 'invariant' | 'red' | 'green' | 'yellow';
+export type ButtonColors = 'blue' | 'invariant' | 'red' | 'green' | 'yellow' | 'grey';
 export type ButtonVariants = 'filled' | 'outline';
 
 interface ButtonProps extends MantineButtonProps {
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
index 20a14fd52..dbdef25a9 100644
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -119,6 +119,7 @@ services:
       - 4200:4200
     networks:
       - impler
+  
   rabbitmq:
     image: rabbitmq:3-alpine
     container_name: 'rabbitmq'