diff --git a/docs/react-ui-kit/build-in-call-ui/default-meeting-ui.mdx b/docs/react-ui-kit/build-in-call-ui/default-meeting-ui.mdx
index 33ee8c37c..0114657d5 100644
--- a/docs/react-ui-kit/build-in-call-ui/default-meeting-ui.mdx
+++ b/docs/react-ui-kit/build-in-call-ui/default-meeting-ui.mdx
@@ -27,33 +27,32 @@ export default function MyMeeting() {
   const { meeting } = useDyteMeeting();
   const roomState = useDyteSelector((m) => m.self.roomState);
 
-return (
-
-<div className="flex h-full w-full">
-  {roomState === 'init' && <DyteSetupScreen meeting={meeting} />}
-  {roomState === 'joined' && (
-      <div className="flex flex-col w-full h-full">
-        <header>
-          <DyteHeader meeting={meeting}/>
-        </header>
-
-        <main className='flex w-full flex-1 justify-center items-center' style={{
-          backgroundColor: '#272727',
-          color: '#ffffff',
-        }}>
-          <span>Custom in-call UI</span>
-          <DyteDialogManager meeting={meeting}/>
-        </main>
-
-        <footer className='flex w-full overflow-visible'>
-          <DyteControlbar meeting={meeting}/>
-        </footer>
-      </div>
-
-)}
-{roomState === 'ended' && (<DyteEndedScreen meeting={meeting}/>)}
-
-</div>
-); }` } />
+  return (
+    <div className="flex h-full w-full">
+      {roomState === 'init' && <DyteSetupScreen meeting={meeting} />}
+      {roomState === 'joined' && (
+        <div className="flex flex-col w-full h-full">
+          <header>
+            <DyteHeader meeting={meeting} />
+          </header>
+
+          <main className="flex w-full flex-1 justify-center items-center" style={{
+            backgroundColor: '#272727',
+            color: '#ffffff',
+          }}>
+            <span>Custom in-call UI</span>
+            <DyteDialogManager meeting={meeting} />
+          </main>
+
+          <footer className="flex w-full overflow-visible">
+            <DyteControlbar meeting={meeting} />
+          </footer>
+        </div>
+      )}
+      {roomState === 'ended' && <DyteEndedScreen meeting={meeting} />}
+    </div>
+  );
+}
+`} />
 
 Since `DyteMeeting` is a complex component and provides a lot more than just the UI, let's go to the next page and start splitting it to uncover what it does.
diff --git a/docs/react-ui-kit/build-pre-call-ui/build-your-own/add-audio-video-preview.mdx b/docs/react-ui-kit/build-pre-call-ui/build-your-own/add-audio-video-preview.mdx
index 6b2f0a762..3789833b8 100644
--- a/docs/react-ui-kit/build-pre-call-ui/build-your-own/add-audio-video-preview.mdx
+++ b/docs/react-ui-kit/build-pre-call-ui/build-your-own/add-audio-video-preview.mdx
@@ -37,7 +37,7 @@ highlight={[{start: 18, end: 22}, {start: 31, end: 32}, {start: 34, end: 34}]}
 hide={[{start:1, end: 6}]}
 file={`
 import {
-  DyteParticipantTile, DyteAvatar,DyteNameTag,
+  DyteParticipantTile, DyteAvatar, DyteNameTag,
   DyteAudioVisualizer, DyteMicToggle, DyteCameraToggle, DyteButton,
 } from '@dytesdk/react-ui-kit';
 import { useDyteMeeting } from '@dytesdk/react-web-core';
diff --git a/docs/react-ui-kit/build-pre-call-ui/build-your-own/initial-code-skeleton.mdx b/docs/react-ui-kit/build-pre-call-ui/build-your-own/initial-code-skeleton.mdx
index 83adb6918..a8a15dec4 100644
--- a/docs/react-ui-kit/build-pre-call-ui/build-your-own/initial-code-skeleton.mdx
+++ b/docs/react-ui-kit/build-pre-call-ui/build-your-own/initial-code-skeleton.mdx
@@ -66,15 +66,13 @@ function MyMeeting() {
 highlight={[{start: 12, end: 12}, {start: 18, end: 18}]}
 hide={[{start: 1, end: 3}]}
 file={`
-import { useDyteMeeting } from "@dytesdk/react-web-core";
-import { DyteButton } from "@dytesdk/react-ui-kit";
+import { useDyteMeeting } from '@dytesdk/react-web-core';
+import { DyteButton } from '@dytesdk/react-ui-kit';
 
 export default function CustomMeetingPreview() {
   const { meeting } = useDyteMeeting();
   return (
-    <div
-      className="flex flex-col items-center justify-center"
-    >
+    <div className="flex flex-col items-center justify-center">
       <div className="flex flex-col items-center">
         <p style={{ color: 'white' }}>Joining as {meeting.self.name}</p>
       </div>
diff --git a/docs/react-ui-kit/build-pre-call-ui/default-setup-screen.mdx b/docs/react-ui-kit/build-pre-call-ui/default-setup-screen.mdx
index 724e4f3f9..5a1ae70d7 100644
--- a/docs/react-ui-kit/build-pre-call-ui/default-setup-screen.mdx
+++ b/docs/react-ui-kit/build-pre-call-ui/default-setup-screen.mdx
@@ -26,14 +26,14 @@ export default function MyMeeting() {
   const { meeting } = useDyteMeeting();
   const roomState = useDyteSelector((m) => m.self.roomState);
 
-return (
-<div className="flex w-full h-full">
-{roomState === 'init' && <DyteSetupScreen meeting={meeting} />}
-{roomState === 'joined' && <center>Custom in-meeting UI</center>}
-{roomState === 'ended' && <center>Custom post-meeting UI</center>}
-</div>
-);
-}`
-} />
+  return (
+    <div className="flex w-full h-full">
+      {roomState === 'init' && <DyteSetupScreen meeting={meeting} />}
+      {roomState === 'joined' && <center>Custom in-meeting UI</center>}
+      {roomState === 'ended' && <center>Custom post-meeting UI</center>}
+    </div>
+  );
+}
+`}/>
 
 If you want to build a custom pre-call UI, let's go to the next page to start building one.
diff --git a/docs/react-ui-kit/components/dyte-participant-tile.mdx b/docs/react-ui-kit/components/dyte-participant-tile.mdx
index 6ef1614d6..afe2660ab 100644
--- a/docs/react-ui-kit/components/dyte-participant-tile.mdx
+++ b/docs/react-ui-kit/components/dyte-participant-tile.mdx
@@ -73,17 +73,17 @@ import { useDyteMeeting } from "@dytesdk/react-web-core";
 export default function MyMeetingUI() {
   const { meeting } = useDyteMeeting();
 
-return (
-<DyteParticipantTile
+  return (
+    <DyteParticipantTile
       participant={meeting.self}
       nameTagPosition="bottom-center" 
       variant="gradient"
     >
-<DyteNameTag participant={meeting.self}>
-<DyteAudioVisualizer slot="start" />
-</DyteNameTag>
-</DyteParticipantTile>
-);
+      <DyteNameTag participant={meeting.self}>
+        <DyteAudioVisualizer slot="start" />
+      </DyteNameTag>
+    </DyteParticipantTile>
+  );
 }
 `} />
 
diff --git a/docs/react-ui-kit/quickstart.mdx b/docs/react-ui-kit/quickstart.mdx
index f10799f2d..f5583459b 100644
--- a/docs/react-ui-kit/quickstart.mdx
+++ b/docs/react-ui-kit/quickstart.mdx
@@ -110,6 +110,7 @@ For more information on the other props of `DyteMeeting`, see
 
 import CodeRunner from '@site/src/components/CodeRunner/CodeRunner';
 
+
 <CodeRunner 
 highlight={[{start: 9, end: 9}]}
 hide={[{start:1, end: 21}, { start: 23, end: 25 }]}
@@ -143,6 +144,7 @@ export default function MyMeetingUI() {
     return (
       <DyteMeeting mode="fill" meeting={meeting} showSetupScreen={false} />
     );
+
 } `} />
 
 <head>
diff --git a/docs/ui-kit/quickstart.mdx b/docs/ui-kit/quickstart.mdx
index d9debff93..26c428560 100644
--- a/docs/ui-kit/quickstart.mdx
+++ b/docs/ui-kit/quickstart.mdx
@@ -102,10 +102,11 @@ import CodeRunner from '@site/src/components/CodeRunner/CodeRunner';
 highlight={[{start: 10, end: 10}]}
 hide={[{start:1, end: 8}]}
 framework='static'
-file={`<head>
+file={`
+<head>
   <script type="module">
-      import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@dytesdk/ui-kit@latest/loader/index.es2017.js';
-      defineCustomElements();
+    import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@dytesdk/ui-kit@latest/loader/index.es2017.js';
+    defineCustomElements();
   </script>
   <!-- Import Web Core via CDN too -->
   <!-- <script src="https://cdn.dyte.in/core/dyte.js"></script> -->
@@ -127,8 +128,7 @@ file={`<head>
       document.getElementById('my-meeting').meeting = meeting;
     };
 
-init();
-
+    init();
   </script>
 </body>
 `}