From 37adb59688ffc9bcce3907fef515ff261e67336b Mon Sep 17 00:00:00 2001
From: obrucheoghene <obrucheoghene1@gmail.com>
Date: Mon, 17 Nov 2025 10:14:14 +0100
Subject: [PATCH 1/9] display camera stream base on if user device is mobile or
 not

---
 src/components/room/grid/my-tile.tsx             |  9 +++++----
 src/components/room/grid/peer-tile.tsx           |  7 +++++--
 src/components/room/join/join-camera-preview.tsx | 10 +++++++---
 src/components/room/join/join-form.tsx           |  3 ++-
 src/types/index.ts                               |  1 +
 5 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/room/grid/my-tile.tsx b/src/components/room/grid/my-tile.tsx
index ea6c75c..eebd76a 100644
--- a/src/components/room/grid/my-tile.tsx
+++ b/src/components/room/grid/my-tile.tsx
@@ -26,7 +26,6 @@ const MyTile: React.FC<PeerTileProps> = ({ layout }) => {
     if (!cameraOn || !videoRef.current) return;
     const track = getTrack('camera');
     if (!track) return;
-    console.log({ track });
     videoRef.current.srcObject = new MediaStream([track]);
   }, [cameraOn, cameraDeviceId, getTrack]);
 
@@ -41,7 +40,10 @@ const MyTile: React.FC<PeerTileProps> = ({ layout }) => {
         {cameraOn ? (
           <video
             ref={videoRef}
-            className="w-full h-full object-cover relative z-10"
+            className={cn(
+              'w-full h-full relative z-10 scale-x-[-1]',
+              !peerMe.isMobileDevice && 'object-cover'
+            )}
             autoPlay
             muted
             playsInline
@@ -49,8 +51,7 @@ const MyTile: React.FC<PeerTileProps> = ({ layout }) => {
           />
         ) : (
           <Avatar className=" w-24 h-24">
-            {/* <AvatarImage src="https://github.com/shadcn.png" /> */}
-            <AvatarFallback className="text-white text-xl bg-gradient-to-bl from-white/15 to-white/1  backdrop-blur-x">
+            <AvatarFallback className="text-white text-xl bg-linear-to-bl from-white/15 to-white/1  backdrop-blur-x">
               {getInitials(peerMe.name)}
             </AvatarFallback>
           </Avatar>
diff --git a/src/components/room/grid/peer-tile.tsx b/src/components/room/grid/peer-tile.tsx
index face2a6..d44546f 100644
--- a/src/components/room/grid/peer-tile.tsx
+++ b/src/components/room/grid/peer-tile.tsx
@@ -31,7 +31,7 @@ export const PeerTile: React.FC<PeerTileProps> = ({ peerId, layout }) => {
 
   return (
     <div
-      className=" bg-gradient-to-br from-white/5 to-white/2 border  border-white/10 backdrop-blur-xl rounded-lg overflow-hidden flex flex-col relative transition-all duration-300 ease-in-out"
+      className=" bg-linear-to-br from-white/5 to-white/2 border  border-white/10 backdrop-blur-xl rounded-lg overflow-hidden flex flex-col relative transition-all duration-300 ease-in-out"
       style={{ width: `${layout.width}px`, height: `${layout.height}px` }}
     >
       {/* Video/Avatar Area */}
@@ -39,7 +39,10 @@ export const PeerTile: React.FC<PeerTileProps> = ({ peerId, layout }) => {
         {media?.camera ? (
           <video
             ref={videoRef}
-            className="w-full h-full object-cover relative z-10"
+            className={cn(
+              'w-full h-full relative z-10',
+              !peerData.isMobileDevice && 'object-cover'
+            )}
             autoPlay
             muted
             playsInline
diff --git a/src/components/room/join/join-camera-preview.tsx b/src/components/room/join/join-camera-preview.tsx
index 5f5dc6c..3ffce84 100644
--- a/src/components/room/join/join-camera-preview.tsx
+++ b/src/components/room/join/join-camera-preview.tsx
@@ -1,5 +1,5 @@
 import { useMedia } from '@/hooks/use-media';
-import { cn } from '@/lib/utils';
+import { cn, isMobileDevice } from '@/lib/utils';
 import { useCameraDeviceId, useCameraOn, useMicOn } from '@/store/conf/hooks';
 import { Mic, MicOff, User } from 'lucide-react';
 import { useEffect, useRef } from 'react';
@@ -10,6 +10,7 @@ const CameraPreview = () => {
   const micOn = useMicOn();
   const cameraOn = useCameraOn();
   const cameraDeviceId = useCameraDeviceId();
+  const isAMobileDevice = isMobileDevice();
 
   useEffect(() => {
     if (!cameraOn || !videoRef.current) return;
@@ -27,7 +28,10 @@ const CameraPreview = () => {
         {cameraOn ? (
           <video
             ref={videoRef}
-            className="w-full h-full object-cover relative z-10"
+            className={cn(
+              'w-full h-full relative z-10',
+              !isAMobileDevice && 'object-cover'
+            )}
             autoPlay
             muted
             playsInline
@@ -44,7 +48,7 @@ const CameraPreview = () => {
         )}
 
         {/* Mic Status Indicator with enhanced animation */}
-        <div className="absolute top-4 right-4">
+        <div className="absolute top-4 right-4 z-20">
           <div
             className={cn(
               'w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-all relative',
diff --git a/src/components/room/join/join-form.tsx b/src/components/room/join/join-form.tsx
index b7d262d..39fc16a 100644
--- a/src/components/room/join/join-form.tsx
+++ b/src/components/room/join/join-form.tsx
@@ -14,7 +14,7 @@ import {
   useRoomActions,
   useRoomData,
 } from '@/store/conf/hooks';
-import { getPeerId } from '@/lib/utils';
+import { getPeerId, isMobileDevice } from '@/lib/utils';
 import { Access, type PeerData, type RoomData } from '@/types';
 import { useSignaling } from '@/hooks/use-signaling';
 import { Actions } from '@/types/actions';
@@ -57,6 +57,7 @@ const JoinForm = () => {
       const peerData: PeerData = {
         id: getPeerId(),
         name: data.name,
+        isMobileDevice: isMobileDevice(),
       };
 
       peerActions.addData(peerData, true);
diff --git a/src/types/index.ts b/src/types/index.ts
index 1f9a7cf..7af7071 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -90,6 +90,7 @@ export interface PeerData {
   userId?: string;
   email?: string;
   color?: string;
+  isMobileDevice?: boolean;
 }
 
 export interface PeerMedia {

From ea0aef9f8efe3043f9d3da94085eb40d478735c3 Mon Sep 17 00:00:00 2001
From: obrucheoghene <obrucheoghene1@gmail.com>
Date: Mon, 17 Nov 2025 10:16:14 +0100
Subject: [PATCH 2/9] change join message

---
 src/components/room/join/join-header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/room/join/join-header.tsx b/src/components/room/join/join-header.tsx
index f029359..97c48bf 100644
--- a/src/components/room/join/join-header.tsx
+++ b/src/components/room/join/join-header.tsx
@@ -61,7 +61,7 @@ const Header = () => {
         >
           {peerOthersList.length
             ? `${peerOthersList.length} people have joined`
-            : 'You are the first to join'}
+            : 'You will be the first to join'}
         </Badge>
       </div>
     </div>

From c3f9c6c82cc5e7e06da8b5d54719be279d2b5019 Mon Sep 17 00:00:00 2001
From: obrucheoghene <obrucheoghene1@gmail.com>
Date: Mon, 17 Nov 2025 11:37:57 +0100
Subject: [PATCH 3/9] feat: add umami analytics tracking code

---
 index.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/index.html b/index.html
index 2437a76..c872aa9 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Mitsi</title>
     <script src="/config.js"></script>
+    <script
+      defer
+      src="https://cloud.umami.is/script.js"
+      data-website-id="d7d9f6dd-d496-4e34-ad16-3094126667f9"
+    ></script>
   </head>
   <body>
     <div id="root"></div>

From ff81d45110052ae19f91a794320e37493f0fe04c Mon Sep 17 00:00:00 2001
From: obrucheoghene <obrucheoghene1@gmail.com>
Date: Mon, 17 Nov 2025 11:38:55 +0100
Subject: [PATCH 4/9] feat: add header meta data to improve SEO

---
 index.html | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index c872aa9..1bc1929 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,27 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Mitsi</title>
+    <meta
+      name="description"
+      content="Mitsi - Conferencing Platform to Connect and Collaborate"
+    />
+    <meta
+      name="keywords"
+      content="Mitsi, Connect, Collaborate, Conferencing Video Conferencing, audio conferencing, video and audio conferencing, WebRTC, meeting, online meetings, real-time collaboration, conferencing, virtual events, live streaming"
+    />
+    <meta name="robots" content="index, follow" />
+    <meta property="og:title" content="Mitsi - Connect and Collaborate" />
+    <meta
+      property="og:description"
+      content="Mitsi - Conferencing Platform to Connect and Collaborate"
+    />
+    <meta property="og:image" content="https://mitsi.app/icon.svg" />
+    <meta property="og:url" content="https://mitsi.app" />
+    <meta property="og:type" content="website" />
+
+    <link rel="icon" href="https://mitsi.app/favicon.ico" type="image/x-icon" />
+    <link rel="apple-touch-icon" href="https://mitsi.app/icon.svg" />
+    <title>Mitsi - Conferencing Platform to Connect and Collaborate</title>
     <script src="/config.js"></script>
     <script
       defer

From bd3961487ebc39463467c7a8afe93a46a267625a Mon Sep 17 00:00:00 2001
From: obrucheoghene <obrucheoghene1@gmail.com>
Date: Mon, 17 Nov 2025 12:01:50 +0100
Subject: [PATCH 5/9] chore: install react helmet to manage metadata

---
 package-lock.json | 81 ++++++++++++++++++++++++++++++++++++++++++++++-
 package.json      |  2 ++
 2 files changed, 82 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index d99ad76..347d996 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "next-themes": "^0.4.6",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
+        "react-helmet": "^6.1.0",
         "react-hook-form": "^7.62.0",
         "react-router-dom": "^7.8.2",
         "socket.io-client": "^4.8.1",
@@ -47,6 +48,7 @@
         "@types/node": "^24.3.0",
         "@types/react": "^19.1.10",
         "@types/react-dom": "^19.1.7",
+        "@types/react-helmet": "^6.1.11",
         "@types/uniqid": "^5.3.4",
         "@vitejs/plugin-react": "^5.0.1",
         "@vitest/eslint-plugin": "^1.3.4",
@@ -3039,6 +3041,16 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/react-helmet": {
+      "version": "6.1.11",
+      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.11.tgz",
+      "integrity": "sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/stack-utils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
@@ -5556,7 +5568,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -5955,6 +5966,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/loupe": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.2.1.tgz",
@@ -6193,6 +6216,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -6431,6 +6463,23 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -6489,6 +6538,36 @@
         "react": "^19.2.0"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/react-helmet/node_modules/react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.65.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.65.0.tgz",
diff --git a/package.json b/package.json
index 17f0324..505e687 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "next-themes": "^0.4.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-helmet": "^6.1.0",
     "react-hook-form": "^7.62.0",
     "react-router-dom": "^7.8.2",
     "socket.io-client": "^4.8.1",
@@ -56,6 +57,7 @@
     "@types/node": "^24.3.0",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
+    "@types/react-helmet": "^6.1.11",
     "@types/uniqid": "^5.3.4",
     "@vitejs/plugin-react": "^5.0.1",
     "@vitest/eslint-plugin": "^1.3.4",

From 41cb095dd4a898bcee1e1424e3f83dba9ef9f8a6 Mon Sep 17 00:00:00 2001
From: obrucheoghene <obrucheoghene1@gmail.com>
Date: Mon, 17 Nov 2025 12:02:08 +0100
Subject: [PATCH 6/9] fix: change icon.svg to logo.svg

---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 1bc1929..357dd83 100644
--- a/index.html
+++ b/index.html
@@ -18,12 +18,12 @@
       property="og:description"
       content="Mitsi - Conferencing Platform to Connect and Collaborate"
     />
-    <meta property="og:image" content="https://mitsi.app/icon.svg" />
+    <meta property="og:image" content="https://mitsi.app/logo.svg" />
     <meta property="og:url" content="https://mitsi.app" />
     <meta property="og:type" content="website" />
 
     <link rel="icon" href="https://mitsi.app/favicon.ico" type="image/x-icon" />
-    <link rel="apple-touch-icon" href="https://mitsi.app/icon.svg" />
+    <link rel="apple-touch-icon" href="https://mitsi.app/logo.svg" />
     <title>Mitsi - Conferencing Platform to Connect and Collaborate</title>
     <script src="/config.js"></script>
     <script

From 3f152f0bc712591099ca798c7718f01628eb407e Mon Sep 17 00:00:00 2001
From: obrucheoghene <obrucheoghene1@gmail.com>
Date: Mon, 17 Nov 2025 12:02:37 +0100
Subject: [PATCH 7/9] feat: add metadata to room join page using helment

---
 src/pages/room/index.tsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/pages/room/index.tsx b/src/pages/room/index.tsx
index d2e06d7..163c193 100644
--- a/src/pages/room/index.tsx
+++ b/src/pages/room/index.tsx
@@ -4,15 +4,25 @@ import { ServiceProvider } from '@/context/service-context';
 import { useRoomAccess } from '@/store/conf/hooks';
 import { Access } from '@/types';
 import Conference from './conference';
+import { Helmet } from 'react-helmet';
 
 const Room = () => {
   const roomAccess = useRoomAccess();
+  const description =
+    'You are invited to meeting on Mitsi conferencing platform to connect and collaborate ';
+
   return (
-    <ServiceProvider>
-      <RoomProvider>
-        {roomAccess === Access.Allowed ? <Conference /> : <JoinRoom />}
-      </RoomProvider>
-    </ServiceProvider>
+    <>
+      <Helmet>
+        <meta name="description" content={description} />
+        <meta property="og:description" content={description} />
+      </Helmet>
+      <ServiceProvider>
+        <RoomProvider>
+          {roomAccess === Access.Allowed ? <Conference /> : <JoinRoom />}
+        </RoomProvider>
+      </ServiceProvider>
+    </>
   );
 };
 

From 205ad3c0bd1665805db931dcf4b094f649eeb693 Mon Sep 17 00:00:00 2001
From: obrucheoghene <obrucheoghene1@gmail.com>
Date: Mon, 17 Nov 2025 12:11:05 +0100
Subject: [PATCH 8/9] fix: change relative postion to fixed

---
 src/components/room/control-bar.tsx | 4 ++--
 src/pages/room/conference.tsx       | 4 +---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/room/control-bar.tsx b/src/components/room/control-bar.tsx
index 7f1d77e..0400a8e 100644
--- a/src/components/room/control-bar.tsx
+++ b/src/components/room/control-bar.tsx
@@ -10,8 +10,8 @@ import Screen from './screen';
 
 const ControlBar = () => {
   return (
-    <div className="p-2  backdrop-blur-sm  ">
-      <div className="flex items-center justify-center md:justify-between gap-2 max-w-4xl mx-auto">
+    <div className="p-2  backdrop-blur-sm flex  ">
+      <div className="flex items-center justify-center md:justify-between gap-2 max-w-4xl mx-auto ">
         {/* Left Controls */}
         <div className="flex items-center gap-2">
           {/* Microphone */}
diff --git a/src/pages/room/conference.tsx b/src/pages/room/conference.tsx
index 6b17a78..98a9b0b 100644
--- a/src/pages/room/conference.tsx
+++ b/src/pages/room/conference.tsx
@@ -9,13 +9,11 @@ import DynamicBg from '@/components/dynamic-bg';
 
 export const Conference: React.FC = () => {
   return (
-    <div className=" relative h-screen flex flex-col overflow-hidden justify-between">
+    <div className=" fixed h-screen w-full flex flex-col overflow-hidden justify-between">
       <DynamicBg />
       {/* Header */}
       <Header />
 
-      {/* Main Video Grid */}
-      {/* <ConferenceGrid /> */}
       <Display />
       {/* Bottom Controls */}
       <ControlBar />

From 0520a5def4fb9c79f3e4b863e1ea619566e30ed2 Mon Sep 17 00:00:00 2001
From: obrucheoghene <obrucheoghene1@gmail.com>
Date: Mon, 17 Nov 2025 12:13:18 +0100
Subject: [PATCH 9/9] chore: remove unncessary commets

---
 src/components/room/join/join-header.tsx |  6 ------
 src/pages/room/conference.tsx            |  1 -
 src/pages/room/join.tsx                  | 15 ++++-----------
 3 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/src/components/room/join/join-header.tsx b/src/components/room/join/join-header.tsx
index 97c48bf..f5a1420 100644
--- a/src/components/room/join/join-header.tsx
+++ b/src/components/room/join/join-header.tsx
@@ -17,8 +17,6 @@ const Header = () => {
 
   return (
     <div className="text-center space-y-4">
-      {/* Enhanced Loading Spinner Icon */}
-
       <img src={Assets.logo} className="w-14 h-14 mx-auto" alt="Logo" />
 
       <div className="space-y-2 relative">
@@ -48,12 +46,8 @@ const Header = () => {
             </Tooltip>
           </div>
         )}
-        {/* <div className="text-gray-400 md:text-lg relative">
-          Setup your audio and video before joining
-        </div> */}
       </div>
 
-      {/* Enhanced Status Badge */}
       <div className="relative">
         <Badge
           variant="outline"
diff --git a/src/pages/room/conference.tsx b/src/pages/room/conference.tsx
index 98a9b0b..c3bb2ec 100644
--- a/src/pages/room/conference.tsx
+++ b/src/pages/room/conference.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 
 import ControlBar from '@/components/room/control-bar';
 import Header from '@/components/room/header';
-// import { ConferenceGrid } from '@/components/room/grid/conference-grid';
 import PeerAudioList from '@/components/room/peer-audio-list';
 import Display from '@/components/room/display';
 import DynamicBg from '@/components/dynamic-bg';
diff --git a/src/pages/room/join.tsx b/src/pages/room/join.tsx
index f2d1fac..d128f00 100644
--- a/src/pages/room/join.tsx
+++ b/src/pages/room/join.tsx
@@ -10,6 +10,7 @@ import Controls from '../../components/room/join/join-controls';
 import { useRoom } from '@/hooks/use-room';
 import DynamicBg from '@/components/dynamic-bg';
 import { useParams } from 'react-router-dom';
+import { toast } from 'sonner';
 
 const JoinRoom: React.FC = () => {
   const { signalingService } = useSignaling();
@@ -21,7 +22,6 @@ const JoinRoom: React.FC = () => {
   useEffect(() => {
     const roomId = pathname['roomId'];
     roomActions.setData({
-      // id: crypto.randomUUID(),
       roomId: roomId!,
       name: `room-${roomId}`,
     });
@@ -30,33 +30,26 @@ const JoinRoom: React.FC = () => {
   useEffect(() => {
     if (!signalingService || !roomData) return;
 
-    joinVisitors().catch(err => console.log(err));
+    joinVisitors().catch(err => toast.error(err));
   }, [signalingService, roomData, joinVisitors]);
 
   if (!roomData || !signalingService) return null;
 
   return (
     <div className="min-h-screen bg-black text-white overflow-hidden relative flex items-center justify-center p-4">
-      {/* Background Pattern */}
       <DynamicBg />
 
       <div className="relative z-10 w-full max-w-2xl mx-auto space-y-8">
-        {/* Header */}
         <Header />
 
-        {/* Video Preview */}
         <CameraPreview />
 
-        {/* Media Controls */}
         <Controls />
-        {/* Name Input and Join Button */}
+
         <JoinForm />
-        {/* Additional Info */}
+
         <Terms />
       </div>
-
-      {/* Background Decorative Elements */}
-      {/* <Decoration /> */}
     </div>
   );
 };