From 54af1236471dc1b89d907b176b302cfcb1457ca5 Mon Sep 17 00:00:00 2001
From: Amr3011 <amroosamafakharany@gmail.com>
Date: Thu, 5 Mar 2026 19:29:26 +0200
Subject: [PATCH 1/6] refactor: remove unused CSS files and optimize
 SidebarPanel component

- Deleted ScreenShareLayout.css and Sidebar.css as they were no longer needed.
- Updated SidebarPanel.tsx to use Tailwind CSS for styling, improving responsiveness and maintainability.
- Refactored index.css to unify CSS variable syntax and enhance animation keyframes.
- Adjusted tailwind.config.js for cleaner configuration and added new utility classes for better design consistency.
---
 .../AdminControls/AdminControls.styles.css    | 156 ------
 .../AdminControls/EndMeetingButton.tsx        |  13 +-
 .../meeting/AdminControls/ParticipantItem.tsx |  31 +-
 .../AdminControls/ParticipantsList.tsx        |   7 +-
 .../meeting/AdminControls/index.tsx           |   5 +-
 .../src/components/meeting/ChatSidebar.css    | 190 -------
 .../CustomControlBar/CameraControl.tsx        |  16 +-
 .../CustomControlBar/CustomControlBar.css     | 116 ----
 .../meeting/CustomControlBar/DeviceMenu.tsx   |  19 +-
 .../CustomControlBar/DeviceMenuItem.tsx       |  32 +-
 .../meeting/CustomControlBar/LeaveButton.tsx  |  11 +-
 .../CustomControlBar/MicrophoneControl.tsx    |  16 +-
 .../CustomControlBar/ScreenShareButton.tsx    |   7 +-
 .../meeting/CustomControlBar/index.tsx        |  11 +-
 .../meeting/LiveKitMeetingRoom/ChatPanel.tsx  |  14 +-
 .../LiveKitMeetingRoom/ControlBarSection.tsx  |  26 +-
 .../meeting/LiveKitMeetingRoom/index.tsx      |   3 -
 .../meeting/MeetingHeader/AdminButton.tsx     |  23 +-
 .../meeting/MeetingHeader/AvatarCircles.tsx   |  31 +-
 .../meeting/MeetingHeader/MeetingHeader.css   |  85 ---
 .../meeting/MeetingHeader/index.tsx           |  15 +-
 .../components/meeting/ScreenShareLayout.css  |  87 ---
 frontend/src/components/meeting/Sidebar.css   | 129 -----
 .../src/components/meeting/SidebarPanel.tsx   |  29 +-
 frontend/src/index.css                        | 524 ++++++++++++++++--
 frontend/tailwind.config.js                   | 229 ++++----
 26 files changed, 665 insertions(+), 1160 deletions(-)
 delete mode 100644 frontend/src/components/meeting/AdminControls/AdminControls.styles.css
 delete mode 100644 frontend/src/components/meeting/ChatSidebar.css
 delete mode 100644 frontend/src/components/meeting/CustomControlBar/CustomControlBar.css
 delete mode 100644 frontend/src/components/meeting/MeetingHeader/MeetingHeader.css
 delete mode 100644 frontend/src/components/meeting/ScreenShareLayout.css
 delete mode 100644 frontend/src/components/meeting/Sidebar.css

diff --git a/frontend/src/components/meeting/AdminControls/AdminControls.styles.css b/frontend/src/components/meeting/AdminControls/AdminControls.styles.css
deleted file mode 100644
index 255272e..0000000
--- a/frontend/src/components/meeting/AdminControls/AdminControls.styles.css
+++ /dev/null
@@ -1,156 +0,0 @@
-.admin-controls-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.end-meeting-section {
-  padding: 16px;
-  border-bottom: 1px solid var(--lk-border-color);
-  flex-shrink: 0;
-}
-
-.confirm-container {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.confirm-text {
-  font-size: 13px;
-  color: #fbbf24;
-  margin: 0;
-}
-
-.confirm-buttons {
-  display: flex;
-  gap: 8px;
-}
-
-.end-meeting-btn {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background-color: #dc2626;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.end-meeting-btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.end-meeting-btn-full {
-  width: 100%;
-  padding: 10px 12px;
-}
-
-.cancel-btn {
-  flex: 1;
-  padding: 8px 12px;
-  background-color: var(--lk-bg3);
-  color: var(--lk-fg);
-  border: 1px solid var(--lk-border-color);
-  border-radius: 6px;
-  cursor: pointer;
-}
-
-.participants-section {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-}
-
-.participants-header {
-  font-size: 13px;
-  color: var(--lk-fg2);
-  margin-bottom: 12px;
-  font-weight: 500;
-}
-
-.participants-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.participant-item {
-  background-color: var(--lk-bg3);
-  border-radius: 6px;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.participant-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.participant-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.participant-name-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 2px;
-}
-
-.participant-name {
-  color: var(--lk-fg);
-  font-size: 14px;
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin: 0;
-}
-
-.badge {
-  font-size: 10px;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-weight: 500;
-}
-
-.badge-you {
-  color: #4ade80;
-  background-color: rgba(34, 197, 94, 0.2);
-}
-
-.badge-admin {
-  color: #60a5fa;
-  background-color: rgba(59, 130, 246, 0.2);
-}
-
-.participant-role {
-  font-size: 11px;
-  color: var(--lk-fg2);
-  margin: 0;
-}
-
-.kick-btn {
-  padding: 6px;
-  color: #f87171;
-  background-color: transparent;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
diff --git a/frontend/src/components/meeting/AdminControls/EndMeetingButton.tsx b/frontend/src/components/meeting/AdminControls/EndMeetingButton.tsx
index afb4e68..38d20c8 100644
--- a/frontend/src/components/meeting/AdminControls/EndMeetingButton.tsx
+++ b/frontend/src/components/meeting/AdminControls/EndMeetingButton.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import type { EndMeetingButtonProps } from "./types";
 import { EndMeetingIcon } from "./icons";
-import "./AdminControls.styles.css";
 
 export const EndMeetingButton: React.FC<EndMeetingButtonProps> = ({
   onEndMeeting,
@@ -19,15 +18,15 @@ export const EndMeetingButton: React.FC<EndMeetingButtonProps> = ({
 
   if (showConfirm) {
     return (
-      <div className="confirm-container">
-        <p className="confirm-text">
+      <div className="flex flex-col gap-2">
+        <p className="text-xs text-yellow-400 m-0">
           Are you sure? This will disconnect all participants.
         </p>
-        <div className="confirm-buttons">
+        <div className="flex gap-2">
           <button
             onClick={handleClick}
             disabled={isEndingMeeting}
-            className="end-meeting-btn"
+            className="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-red-600 text-white rounded-md cursor-pointer text-sm font-medium hover:bg-red-700 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
           >
             <EndMeetingIcon />
             <span>{isEndingMeeting ? "Ending..." : "Confirm End"}</span>
@@ -35,7 +34,7 @@ export const EndMeetingButton: React.FC<EndMeetingButtonProps> = ({
           <button
             onClick={() => onShowConfirm(false)}
             disabled={isEndingMeeting}
-            className="cancel-btn"
+            className="flex-1 px-3 py-2 bg-gray-700 text-gray-200 border border-gray-600 rounded-md cursor-pointer hover:bg-gray-600 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
           >
             Cancel
           </button>
@@ -47,7 +46,7 @@ export const EndMeetingButton: React.FC<EndMeetingButtonProps> = ({
   return (
     <button
       onClick={handleClick}
-      className="end-meeting-btn end-meeting-btn-full"
+      className="w-full flex items-center justify-center gap-2 py-2.5 px-3 bg-red-600 text-white rounded-md cursor-pointer text-sm font-medium hover:bg-red-700 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
     >
       <EndMeetingIcon />
       <span>End Meeting for All</span>
diff --git a/frontend/src/components/meeting/AdminControls/ParticipantItem.tsx b/frontend/src/components/meeting/AdminControls/ParticipantItem.tsx
index 9740505..9a8f060 100644
--- a/frontend/src/components/meeting/AdminControls/ParticipantItem.tsx
+++ b/frontend/src/components/meeting/AdminControls/ParticipantItem.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import type { ParticipantItemProps } from "./types";
 import { TrackControls } from "./TrackControls";
 import { KickIcon } from "./icons";
-import "./AdminControls.styles.css";
 
 export const ParticipantItem: React.FC<ParticipantItemProps> = ({
   participant,
@@ -12,20 +11,32 @@ export const ParticipantItem: React.FC<ParticipantItemProps> = ({
   onMuteTrack,
 }) => {
   return (
-    <div className="participant-item">
-      <div className="participant-header">
-        <div className="participant-info">
-          <div className="participant-name-row">
-            <p className="participant-name">
+    <div className="bg-gray-800 rounded-md p-3 flex flex-col gap-2">
+      <div className="flex items-center justify-between">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-1.5 mb-0.5">
+            <p className="text-white text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap m-0">
               {participant.name || participant.identity}
             </p>
-            {isLocal && <span className="badge badge-you">You</span>}
-            {role === "admin" && <span className="badge badge-admin">Admin</span>}
+            {isLocal && (
+              <span className="text-[10px] px-1.5 py-0.5 rounded text-green-400 bg-green-400/20 font-medium">
+                You
+              </span>
+            )}
+            {role === "admin" && (
+              <span className="text-[10px] px-1.5 py-0.5 rounded text-blue-400 bg-blue-400/20 font-medium">
+                Admin
+              </span>
+            )}
           </div>
-          <p className="participant-role">{role}</p>
+          <p className="text-[11px] text-gray-400 m-0">{role}</p>
         </div>
         {!isLocal && (
-          <button onClick={onKick} title="Kick participant" className="kick-btn">
+          <button
+            onClick={onKick}
+            title="Kick participant"
+            className="p-1.5 text-red-400 bg-transparent rounded hover:bg-gray-700 transition-colors cursor-pointer flex items-center justify-center"
+          >
             <KickIcon />
           </button>
         )}
diff --git a/frontend/src/components/meeting/AdminControls/ParticipantsList.tsx b/frontend/src/components/meeting/AdminControls/ParticipantsList.tsx
index 4c74149..4ecd3a1 100644
--- a/frontend/src/components/meeting/AdminControls/ParticipantsList.tsx
+++ b/frontend/src/components/meeting/AdminControls/ParticipantsList.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import type { ParticipantsListProps } from "./types";
 import { ParticipantItem } from "./ParticipantItem";
-import "./AdminControls.styles.css";
 
 export const ParticipantsList: React.FC<ParticipantsListProps> = ({
   participants,
@@ -10,11 +9,11 @@ export const ParticipantsList: React.FC<ParticipantsListProps> = ({
   onMuteTrack,
 }) => {
   return (
-    <div className="participants-section">
-      <h4 className="participants-header">
+    <div className="flex-1 overflow-y-auto p-4">
+      <h4 className="text-xs text-gray-400 mb-3 font-medium">
         Participants ({participants.length})
       </h4>
-      <div className="participants-list">
+      <div className="flex flex-col gap-2">
         {participants.map((participant) => {
           const isLocal = participant.identity === localParticipantIdentity;
           const metadata = participant.metadata
diff --git a/frontend/src/components/meeting/AdminControls/index.tsx b/frontend/src/components/meeting/AdminControls/index.tsx
index a4f2e0e..37b4d51 100644
--- a/frontend/src/components/meeting/AdminControls/index.tsx
+++ b/frontend/src/components/meeting/AdminControls/index.tsx
@@ -11,7 +11,6 @@ import {
 import type { AdminControlsProps } from "./types";
 import { EndMeetingButton } from "./EndMeetingButton";
 import { ParticipantsList } from "./ParticipantsList";
-import "./AdminControls.styles.css";
 
 export const AdminControls: React.FC<AdminControlsProps> = ({
   meetingCode,
@@ -60,8 +59,8 @@ export const AdminControls: React.FC<AdminControlsProps> = ({
   };
 
   return (
-    <div className="admin-controls-container">
-      <div className="end-meeting-section">
+    <div className="flex flex-col h-full overflow-hidden">
+      <div className="p-4 border-b border-gray-700 shrink-0">
         <EndMeetingButton
           onEndMeeting={handleEndMeeting}
           isEndingMeeting={isEndingMeeting}
diff --git a/frontend/src/components/meeting/ChatSidebar.css b/frontend/src/components/meeting/ChatSidebar.css
deleted file mode 100644
index 3e5838e..0000000
--- a/frontend/src/components/meeting/ChatSidebar.css
+++ /dev/null
@@ -1,190 +0,0 @@
-/* Chat styling for LiveKit Chat component */
-.lk-chat {
-  width: 100% !important;
-  height: 100% !important;
-  display: flex !important;
-  flex-direction: column !important;
-  background-color: transparent !important;
-  border: none !important;
-  position: relative !important;
-  overflow: hidden !important;
-}
-
-/* إخفاء الـ header الافتراضي من LiveKit */
-.lk-chat-header {
-  display: none !important;
-}
-
-.lk-chat-messages {
-  flex: 1 1 0 !important;
-  overflow-y: auto !important;
-  overflow-x: hidden !important;
-  padding: 16px 20px !important;
-  min-height: 0 !important;
-  max-height: 100% !important;
-  background-color: var(--lk-bg2) !important;
-}
-
-.lk-chat-messages::-webkit-scrollbar {
-  width: 6px;
-}
-
-.lk-chat-messages::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.lk-chat-messages::-webkit-scrollbar-thumb {
-  background: var(--lk-border-color);
-  border-radius: 3px;
-}
-
-.lk-chat-messages::-webkit-scrollbar-thumb:hover {
-  background: var(--lk-fg2);
-}
-
-.lk-chat-entry {
-  margin-bottom: 14px;
-  padding: 12px 14px;
-  background-color: var(--lk-bg);
-  border-radius: 8px;
-  border: 1px solid var(--lk-border-color);
-  transition: all 0.2s;
-}
-
-.lk-chat-entry:hover {
-  background-color: var(--lk-bg3);
-  border-color: var(--lk-accent);
-}
-
-.lk-chat-entry .lk-chat-entry-author {
-  font-weight: 600;
-  font-size: 13px;
-  color: var(--lk-accent);
-  margin-bottom: 6px;
-  display: block;
-}
-
-.lk-chat-entry .lk-chat-entry-message {
-  font-size: 14px;
-  color: var(--lk-fg);
-  word-wrap: break-word;
-  line-height: 1.5;
-}
-
-.lk-chat-entry .lk-chat-entry-timestamp {
-  font-size: 11px;
-  color: var(--lk-fg2);
-  margin-top: 4px;
-}
-
-.lk-chat-form {
-  flex-shrink: 0 !important;
-  padding: 16px 20px !important;
-  border-top: 1px solid var(--lk-border-color) !important;
-  background-color: var(--lk-bg2) !important;
-  position: relative !important;
-  width: 100% !important;
-}
-
-.lk-chat-form-input,
-.lk-chat-form input[type="text"] {
-  width: 100%;
-  background-color: var(--lk-bg);
-  border: 1px solid var(--lk-border-color);
-  color: var(--lk-fg);
-  padding: 12px 14px;
-  border-radius: 8px;
-  font-size: 14px;
-  transition: all 0.2s;
-  font-family: inherit;
-}
-
-.lk-chat-form-input:focus,
-.lk-chat-form input[type="text"]:focus {
-  outline: none;
-  border-color: var(--lk-accent);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.lk-chat-form-input::placeholder,
-.lk-chat-form input[type="text"]::placeholder {
-  color: var(--lk-fg2);
-}
-
-.lk-chat-form button[type="submit"] {
-  display: none;
-}
-
-/* Empty state styling */
-.lk-chat-messages:empty::before {
-  content: "No messages yet";
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--lk-fg2);
-  font-size: 14px;
-}
-
-/* Responsive Design for Mobile */
-@media (max-width: 768px) {
-  .lk-chat-messages {
-    padding: 12px 16px !important;
-  }
-
-  .lk-chat-entry {
-    margin-bottom: 12px;
-    padding: 10px 12px;
-  }
-
-  .lk-chat-entry .lk-chat-entry-author {
-    font-size: 12px;
-  }
-
-  .lk-chat-entry .lk-chat-entry-message {
-    font-size: 13px;
-  }
-
-  .lk-chat-form {
-    padding: 12px 16px !important;
-  }
-
-  .lk-chat-form-input,
-  .lk-chat-form input[type="text"] {
-    padding: 10px 12px;
-    font-size: 13px;
-  }
-}
-
-@media (max-width: 480px) {
-  .lk-chat-messages {
-    padding: 10px 12px !important;
-  }
-
-  .lk-chat-entry {
-    margin-bottom: 10px;
-    padding: 8px 10px;
-  }
-
-  .lk-chat-entry .lk-chat-entry-author {
-    font-size: 11px;
-  }
-
-  .lk-chat-entry .lk-chat-entry-message {
-    font-size: 12px;
-  }
-
-  .lk-chat-entry .lk-chat-entry-timestamp {
-    font-size: 10px;
-  }
-
-  .lk-chat-form {
-    padding: 10px 12px !important;
-  }
-
-  .lk-chat-form-input,
-  .lk-chat-form input[type="text"] {
-    padding: 8px 10px;
-    font-size: 12px;
-  }
-}
diff --git a/frontend/src/components/meeting/CustomControlBar/CameraControl.tsx b/frontend/src/components/meeting/CustomControlBar/CameraControl.tsx
index 1b4d7a3..394752c 100644
--- a/frontend/src/components/meeting/CustomControlBar/CameraControl.tsx
+++ b/frontend/src/components/meeting/CustomControlBar/CameraControl.tsx
@@ -15,7 +15,7 @@ export const CameraControl: React.FC = () => {
     });
 
   return (
-    <div style={{ position: "relative", display: "flex" }} ref={menuRef}>
+    <div className="relative flex" ref={menuRef}>
       <TrackToggle
         source={Track.Source.Camera}
         showIcon={true}
@@ -31,20 +31,8 @@ export const CameraControl: React.FC = () => {
       />
 
       <button
-        className="lk-button"
+        className="lk-button flex items-center justify-center bg-(--lk-bg2) min-w-5.5 min-h-12 rounded-tl-none rounded-bl-none p-0 -ml-px"
         onClick={() => setShowMenu(!showMenu)}
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor: "var(--lk-bg2)",
-          minWidth: "22px",
-          minHeight: "48px",
-          borderTopLeftRadius: "0",
-          borderBottomLeftRadius: "0",
-          padding: "0",
-          marginLeft: "-1px",
-        }}
         title="Select camera device"
       >
         <ChevronDownIcon />
diff --git a/frontend/src/components/meeting/CustomControlBar/CustomControlBar.css b/frontend/src/components/meeting/CustomControlBar/CustomControlBar.css
deleted file mode 100644
index 818bac8..0000000
--- a/frontend/src/components/meeting/CustomControlBar/CustomControlBar.css
+++ /dev/null
@@ -1,116 +0,0 @@
-/* Dropdown menu animation */
-@keyframes slideUpFade {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Ensure all control bar buttons have the same size, except share screen */
-.lk-button-group .lk-button:not([data-lk-source="screen_share"]),
-.lk-button-group button {
-  min-width: 48px !important;
-  min-height: 48px !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-}
-
-/* Allow share screen button to be wider */
-.lk-button-group .lk-button[data-lk-source="screen_share"] {
-  min-height: 48px !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-}
-
-/* Responsive Design for Mobile */
-@media (max-width: 768px) {
-  /* Smaller buttons on mobile */
-  .lk-button-group .lk-button:not([data-lk-source="screen_share"]),
-  .lk-button-group button {
-    min-width: 40px !important;
-    min-height: 40px !important;
-    padding: 6px !important;
-  }
-
-  .lk-button-group .lk-button[data-lk-source="screen_share"] {
-    min-height: 40px !important;
-    width: 56px !important;
-    padding: 6px 8px !important;
-  }
-
-  /* Reduce gap between buttons on mobile */
-  .lk-button-group {
-    gap: 6px !important;
-  }
-
-  /* Hide button labels on small screens */
-  .lk-button-label {
-    display: none !important;
-  }
-
-  /* Adjust control bar wrapper padding */
-  .lk-control-bar-wrapper {
-    padding: 8px !important;
-    gap: 6px !important;
-  }
-
-  /* Adjust split button arrow */
-  .lk-button-group > div > button[style*="minWidth: 22px"] {
-    min-width: 18px !important;
-    min-height: 40px !important;
-  }
-
-  /* Adjust main toggle buttons in split buttons */
-  .lk-button-group > div > .lk-button {
-    min-width: 36px !important;
-    min-height: 40px !important;
-  }
-}
-
-@media (max-width: 480px) {
-  /* Extra small screens - even smaller buttons */
-  .lk-button-group .lk-button:not([data-lk-source="screen_share"]),
-  .lk-button-group button {
-    min-width: 36px !important;
-    min-height: 36px !important;
-    padding: 4px !important;
-  }
-
-  .lk-button-group .lk-button[data-lk-source="screen_share"] {
-    min-height: 36px !important;
-    width: 48px !important;
-    padding: 4px 6px !important;
-  }
-
-  .lk-button-group {
-    gap: 4px !important;
-  }
-
-  .lk-control-bar-wrapper {
-    padding: 6px !important;
-    gap: 4px !important;
-  }
-
-  /* Adjust split button components for extra small screens */
-  .lk-button-group > div > button[style*="minWidth: 22px"] {
-    min-width: 16px !important;
-    min-height: 36px !important;
-  }
-
-  .lk-button-group > div > .lk-button {
-    min-width: 32px !important;
-    min-height: 36px !important;
-  }
-
-  /* Smaller SVG icons on extra small screens */
-  .lk-button svg {
-    width: 16px !important;
-    height: 16px !important;
-  }
-}
diff --git a/frontend/src/components/meeting/CustomControlBar/DeviceMenu.tsx b/frontend/src/components/meeting/CustomControlBar/DeviceMenu.tsx
index 1030210..901e941 100644
--- a/frontend/src/components/meeting/CustomControlBar/DeviceMenu.tsx
+++ b/frontend/src/components/meeting/CustomControlBar/DeviceMenu.tsx
@@ -17,24 +17,7 @@ export const DeviceMenu: React.FC<DeviceMenuProps> = ({
   if (!isOpen) return null;
 
   return (
-    <div
-      style={{
-        position: "absolute",
-        bottom: "calc(100% + 8px)",
-        left: "0",
-        backgroundColor: "var(--lk-bg2)",
-        border: "1px solid var(--lk-border-color)",
-        borderRadius: "12px",
-        padding: "6px",
-        minWidth: "240px",
-        maxWidth: "320px",
-        boxShadow:
-          "0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2)",
-        zIndex: 1000,
-        animation: "slideUpFade 0.2s ease-out",
-        backdropFilter: "blur(8px)",
-      }}
-    >
+    <div className="absolute bottom-[calc(100%+8px)] left-0 bg-(--lk-bg2) border border-(--lk-border-color) rounded-xl p-1.5 min-w-60 max-w-[320px] shadow-[0_8px_24px_rgba(0,0,0,0.4),0_2px_8px_rgba(0,0,0,0.2)] z-1000 animate-slide-up-fade backdrop-blur-sm">
       {devices.map((device) => (
         <DeviceMenuItem
           key={device.deviceId}
diff --git a/frontend/src/components/meeting/CustomControlBar/DeviceMenuItem.tsx b/frontend/src/components/meeting/CustomControlBar/DeviceMenuItem.tsx
index 16f4062..ba3097f 100644
--- a/frontend/src/components/meeting/CustomControlBar/DeviceMenuItem.tsx
+++ b/frontend/src/components/meeting/CustomControlBar/DeviceMenuItem.tsx
@@ -31,39 +31,11 @@ export const DeviceMenuItem: React.FC<DeviceMenuItemProps> = ({
       onClick={onSelect}
       onMouseEnter={() => !isActive && setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
-      style={{
-        width: "100%",
-        textAlign: "left",
-        padding: "10px 12px",
-        backgroundColor: isActive ? "var(--lk-accent)" : "transparent",
-        color: isActive ? "#fff" : "var(--lk-fg)",
-        border: "none",
-        borderRadius: "8px",
-        cursor: "pointer",
-        fontSize: "14px",
-        fontWeight: isActive ? "500" : "400",
-        transition: "all 0.2s ease",
-        display: "flex",
-        alignItems: "center",
-        gap: "10px",
-        position: "relative",
-        transform: isHovered && !isActive ? "translateX(4px)" : "translateX(0)",
-        ...(isHovered &&
-          !isActive && {
-            backgroundColor: "var(--lk-bg3)",
-          }),
-      }}
+      className={`w-full text-left py-2.5 px-3 border-none rounded-lg cursor-pointer text-sm transition-all duration-200 flex items-center gap-2.5 relative ${isActive ? "bg-(--lk-accent) text-white font-medium" : "bg-transparent text-(--lk-fg) font-normal"} ${isHovered && !isActive ? "bg-(--lk-bg3) translate-x-1" : "translate-x-0"}`}
     >
       <DeviceIconComponent />
 
-      <span
-        style={{
-          flex: 1,
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-        }}
-      >
+      <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">
         {device.label || DEVICE_LABELS[deviceType]}
       </span>
 
diff --git a/frontend/src/components/meeting/CustomControlBar/LeaveButton.tsx b/frontend/src/components/meeting/CustomControlBar/LeaveButton.tsx
index 88fb733..d43596f 100644
--- a/frontend/src/components/meeting/CustomControlBar/LeaveButton.tsx
+++ b/frontend/src/components/meeting/CustomControlBar/LeaveButton.tsx
@@ -7,17 +7,8 @@ export const LeaveButton: React.FC = () => {
 
   return (
     <button
-      className="lk-button lk-disconnect-button"
+      className="lk-button lk-disconnect-button bg-(--lk-danger-color,#dc2626) text-white flex items-center justify-center min-w-12 min-h-12"
       onClick={() => room?.disconnect()}
-      style={{
-        backgroundColor: "var(--lk-danger-color, #dc2626)",
-        color: "#fff",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        minWidth: "48px",
-        minHeight: "48px",
-      }}
       title="Leave Meeting"
     >
       <LeaveIcon />
diff --git a/frontend/src/components/meeting/CustomControlBar/MicrophoneControl.tsx b/frontend/src/components/meeting/CustomControlBar/MicrophoneControl.tsx
index cc21eb2..cf2dfee 100644
--- a/frontend/src/components/meeting/CustomControlBar/MicrophoneControl.tsx
+++ b/frontend/src/components/meeting/CustomControlBar/MicrophoneControl.tsx
@@ -15,7 +15,7 @@ export const MicrophoneControl: React.FC = () => {
     });
 
   return (
-    <div style={{ position: "relative", display: "flex" }} ref={menuRef}>
+    <div className="relative flex" ref={menuRef}>
       <TrackToggle
         source={Track.Source.Microphone}
         showIcon={true}
@@ -31,20 +31,8 @@ export const MicrophoneControl: React.FC = () => {
       />
 
       <button
-        className="lk-button"
+        className="lk-button flex items-center justify-center bg-(--lk-bg2) min-w-5.5 min-h-12 rounded-tl-none rounded-bl-none p-0 -ml-px"
         onClick={() => setShowMenu(!showMenu)}
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor: "var(--lk-bg2)",
-          minWidth: "22px",
-          minHeight: "48px",
-          borderTopLeftRadius: "0",
-          borderBottomLeftRadius: "0",
-          padding: "0",
-          marginLeft: "-1px",
-        }}
         title="Select microphone device"
       >
         <ChevronDownIcon />
diff --git a/frontend/src/components/meeting/CustomControlBar/ScreenShareButton.tsx b/frontend/src/components/meeting/CustomControlBar/ScreenShareButton.tsx
index ba2230a..679c8bc 100644
--- a/frontend/src/components/meeting/CustomControlBar/ScreenShareButton.tsx
+++ b/frontend/src/components/meeting/CustomControlBar/ScreenShareButton.tsx
@@ -6,11 +6,6 @@ export const ScreenShareButton: React.FC = () => (
   <TrackToggle
     source={Track.Source.ScreenShare}
     showIcon={true}
-    style={
-      {
-        minWidth: "48px",
-        minHeight: "48px",
-      } as React.CSSProperties
-    }
+    className="min-w-12 min-h-12"
   />
 );
diff --git a/frontend/src/components/meeting/CustomControlBar/index.tsx b/frontend/src/components/meeting/CustomControlBar/index.tsx
index 46b5b09..09667fe 100644
--- a/frontend/src/components/meeting/CustomControlBar/index.tsx
+++ b/frontend/src/components/meeting/CustomControlBar/index.tsx
@@ -3,7 +3,6 @@ import { MicrophoneControl } from "./MicrophoneControl";
 import { CameraControl } from "./CameraControl";
 import { ScreenShareButton } from "./ScreenShareButton";
 import { LeaveButton } from "./LeaveButton";
-import "./CustomControlBar.css";
 
 /**
  * Custom Control Bar Component
@@ -11,14 +10,8 @@ import "./CustomControlBar.css";
  */
 export const CustomControlBar: React.FC = () => {
   return (
-    <div
-      className="lk-control-bar responsive-control-bar"
-      style={{ justifyContent: "center" }}
-    >
-      <div
-        className="lk-button-group"
-        style={{ gap: "8px", flexWrap: "nowrap" }}
-      >
+    <div className="lk-control-bar responsive-control-bar justify-center">
+      <div className="lk-button-group gap-2 flex-nowrap">
         <MicrophoneControl />
         <CameraControl />
         <ScreenShareButton />
diff --git a/frontend/src/components/meeting/LiveKitMeetingRoom/ChatPanel.tsx b/frontend/src/components/meeting/LiveKitMeetingRoom/ChatPanel.tsx
index 4182205..859e613 100644
--- a/frontend/src/components/meeting/LiveKitMeetingRoom/ChatPanel.tsx
+++ b/frontend/src/components/meeting/LiveKitMeetingRoom/ChatPanel.tsx
@@ -9,17 +9,11 @@ interface ChatPanelProps {
 
 export const ChatPanel: React.FC<ChatPanelProps> = ({ isOpen, onClose }) => {
   return (
-    <div style={{ display: isOpen ? "flex" : "none" }}>
+    <div style={{ display: isOpen ? "contents" : "none" }}>
       <SidebarPanel title="In-call messages" onClose={onClose}>
-        <Chat
-          style={{
-            flex: 1,
-            width: "100%",
-            height: "100%",
-            minHeight: 0,
-            overflow: "hidden",
-          }}
-        />
+        <div style={{ height: "100%", width: "100%", overflow: "hidden" }}>
+          <Chat />
+        </div>
       </SidebarPanel>
     </div>
   );
diff --git a/frontend/src/components/meeting/LiveKitMeetingRoom/ControlBarSection.tsx b/frontend/src/components/meeting/LiveKitMeetingRoom/ControlBarSection.tsx
index 21b26cf..9e6184e 100644
--- a/frontend/src/components/meeting/LiveKitMeetingRoom/ControlBarSection.tsx
+++ b/frontend/src/components/meeting/LiveKitMeetingRoom/ControlBarSection.tsx
@@ -12,19 +12,9 @@ export const ControlBarSection: React.FC<ControlBarSectionProps> = ({
   onToggleChat,
 }) => {
   return (
-    <div
-      className="lk-control-bar-wrapper"
-      style={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: "8px",
-        padding: "8px 12px",
-        flexWrap: "wrap",
-      }}
-    >
+    <div className="lk-control-bar-wrapper flex items-center justify-between gap-2 p-2 sm:px-3 flex-wrap">
       {/* Summarizer Controls */}
-      <div style={{ flexShrink: 0, order: 1 }}>
+      <div className="shrink-0 order-1">
         {meetingId && (
           <SummarizerControls
             meetingId={meetingId}
@@ -35,20 +25,12 @@ export const ControlBarSection: React.FC<ControlBarSectionProps> = ({
       </div>
 
       {/* Media Controls */}
-      <div
-        style={{
-          flex: "1 1 auto",
-          display: "flex",
-          justifyContent: "center",
-          order: 2,
-          minWidth: 0,
-        }}
-      >
+      <div className="flex-1 flex justify-center order-2 min-w-0">
         <CustomControlBar />
       </div>
 
       {/* Chat Button */}
-      <div style={{ flexShrink: 0, order: 3 }}>
+      <div className="shrink-0 order-3">
         <ChatButton
           isChatOpen={isChatOpen}
           unreadCount={unreadCount}
diff --git a/frontend/src/components/meeting/LiveKitMeetingRoom/index.tsx b/frontend/src/components/meeting/LiveKitMeetingRoom/index.tsx
index 9173a7a..a0cf663 100644
--- a/frontend/src/components/meeting/LiveKitMeetingRoom/index.tsx
+++ b/frontend/src/components/meeting/LiveKitMeetingRoom/index.tsx
@@ -1,9 +1,6 @@
 import React, { useState, useEffect, useMemo } from "react";
 import { LiveKitRoom } from "@livekit/components-react";
 import "@livekit/components-styles";
-import "../ChatSidebar.css";
-import "../Sidebar.css";
-import "../ScreenShareLayout.css";
 import { DisconnectReason } from "livekit-client";
 import { ErrorMessage } from "../../common/ErrorMessage";
 import { DisconnectMessage } from "../DisconnectMessage";
diff --git a/frontend/src/components/meeting/MeetingHeader/AdminButton.tsx b/frontend/src/components/meeting/MeetingHeader/AdminButton.tsx
index 3f9dc29..185d95b 100644
--- a/frontend/src/components/meeting/MeetingHeader/AdminButton.tsx
+++ b/frontend/src/components/meeting/MeetingHeader/AdminButton.tsx
@@ -19,33 +19,14 @@ export const AdminButton = ({
   onToggle,
 }: AdminButtonProps) => (
   <button
-    className="lk-button admin-button"
+    className={`lk-button flex items-center gap-2 px-3 py-1.5 min-h-8 rounded-2xl border border-(--lk-border-color) shadow-[0_2px_8px_rgba(0,0,0,0.2)] text-sm font-medium text-(--lk-fg) md:gap-1.5 md:px-2.5 md:py-1 md:min-h-7 md:rounded-[14px] md:text-[13px] max-[480px]:gap-1 max-[480px]:px-2 max-[480px]:py-0.5 max-[480px]:min-h-6 max-[480px]:rounded-xl max-[480px]:text-xs ${isOpen ? "bg-(--lk-accent)" : "bg-(--lk-bg2)"}`}
     onClick={onToggle}
     title={`Admin Controls (${participantCount} participants)`}
     aria-pressed={isOpen}
-    style={{
-      backgroundColor: isOpen ? "var(--lk-accent)" : "var(--lk-bg2)",
-      border: "1px solid var(--lk-border-color)",
-      boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
-      display: "flex",
-      alignItems: "center",
-      gap: "6px",
-      padding: "4px 10px",
-      minHeight: "28px",
-      borderRadius: "14px",
-    }}
   >
     <AvatarCircles avatars={avatars} />
 
     {/* Participant Count */}
-    <span
-      style={{
-        fontSize: "14px",
-        fontWeight: "500",
-        color: "var(--lk-fg)",
-      }}
-    >
-      {participantCount}
-    </span>
+    <span>{participantCount}</span>
   </button>
 );
diff --git a/frontend/src/components/meeting/MeetingHeader/AvatarCircles.tsx b/frontend/src/components/meeting/MeetingHeader/AvatarCircles.tsx
index 5a42528..a772ebb 100644
--- a/frontend/src/components/meeting/MeetingHeader/AvatarCircles.tsx
+++ b/frontend/src/components/meeting/MeetingHeader/AvatarCircles.tsx
@@ -9,44 +9,21 @@ interface AvatarCirclesProps {
  * Google Meet style with max 3 avatars
  */
 export const AvatarCircles = ({ avatars }: AvatarCirclesProps) => (
-  <div
-    className="admin-avatars"
-    style={{
-      display: "flex",
-      alignItems: "center",
-      marginLeft: "-2px",
-    }}
-  >
+  <div className="flex items-center -ml-0.5 max-[480px]:-ml-px">
     {avatars.map((p, index) => (
       <div
         key={index}
-        className="admin-avatar"
+        className="w-6 h-6 rounded-full border-2 border-(--lk-bg2) bg-(--lk-bg3) overflow-hidden flex items-center justify-center text-[10px] font-semibold text-(--lk-fg) md:w-5 md:h-5 md:text-[8px] md:border-[1.5px] max-[480px]:w-4.5 max-[480px]:h-4.5 max-[480px]:text-[7px] max-[480px]:border"
         style={{
-          width: "20px",
-          height: "20px",
-          borderRadius: "50%",
-          border: "2px solid var(--lk-bg2)",
-          backgroundColor: "var(--lk-bg3)",
-          marginLeft: index > 0 ? "-6px" : "0",
+          marginLeft: index > 0 ? "-8px" : "0",
           zIndex: avatars.length - index,
-          overflow: "hidden",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          fontSize: "8px",
-          fontWeight: "600",
-          color: "var(--lk-fg)",
         }}
       >
         {p.avatar ? (
           <img
             src={p.avatar}
             alt={p.name}
-            style={{
-              width: "100%",
-              height: "100%",
-              objectFit: "cover",
-            }}
+            className="w-full h-full object-cover"
           />
         ) : (
           <span>{p.name?.charAt(0)?.toUpperCase() || "?"}</span>
diff --git a/frontend/src/components/meeting/MeetingHeader/MeetingHeader.css b/frontend/src/components/meeting/MeetingHeader/MeetingHeader.css
deleted file mode 100644
index 77585a6..0000000
--- a/frontend/src/components/meeting/MeetingHeader/MeetingHeader.css
+++ /dev/null
@@ -1,85 +0,0 @@
-/* Meeting Header Responsive Styles */
-
-.meeting-header {
-  flex-shrink: 0;
-}
-
-/* Desktop styles (default) */
-.admin-button {
-  gap: 8px !important;
-  padding: 6px 12px !important;
-  min-height: 32px !important;
-  border-radius: 16px !important;
-}
-
-.admin-avatar {
-  width: 24px !important;
-  height: 24px !important;
-  font-size: 10px !important;
-  margin-left: -8px !important;
-}
-
-.admin-avatar:first-child {
-  margin-left: 0 !important;
-}
-
-.admin-button span {
-  font-size: 14px !important;
-}
-
-/* Tablet and below */
-@media (max-width: 768px) {
-  .meeting-header {
-    padding: 3px 8px !important;
-  }
-
-  .admin-button {
-    gap: 6px !important;
-    padding: 4px 10px !important;
-    min-height: 28px !important;
-    border-radius: 14px !important;
-  }
-
-  .admin-avatar {
-    width: 20px !important;
-    height: 20px !important;
-    font-size: 8px !important;
-    margin-left: -6px !important;
-    border-width: 1.5px !important;
-  }
-
-  .admin-button span {
-    font-size: 13px !important;
-  }
-}
-
-/* Mobile */
-@media (max-width: 480px) {
-  .meeting-header {
-    padding: 2px 6px !important;
-    min-height: 28px !important;
-  }
-
-  .admin-button {
-    gap: 4px !important;
-    padding: 3px 8px !important;
-    min-height: 24px !important;
-    border-radius: 12px !important;
-  }
-
-  .admin-avatar {
-    width: 18px !important;
-    height: 18px !important;
-    font-size: 7px !important;
-    margin-left: -5px !important;
-    border-width: 1px !important;
-  }
-
-  .admin-button span {
-    font-size: 12px !important;
-  }
-
-  .admin-avatars {
-    margin-left: -1px !important;
-  }
-}
diff --git a/frontend/src/components/meeting/MeetingHeader/index.tsx b/frontend/src/components/meeting/MeetingHeader/index.tsx
index 9a03f61..73f7383 100644
--- a/frontend/src/components/meeting/MeetingHeader/index.tsx
+++ b/frontend/src/components/meeting/MeetingHeader/index.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { Participant } from "livekit-client";
 import { useParticipantAvatars } from "./useParticipantAvatars";
 import { AdminButton } from "./AdminButton";
-import "./MeetingHeader.css";
 
 interface MeetingHeaderProps {
   isAdmin: boolean;
@@ -25,19 +24,7 @@ export const MeetingHeader: React.FC<MeetingHeaderProps> = ({
   const participantCount = participants.length;
 
   return (
-    <div
-      className="meeting-header"
-      style={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "flex-end",
-        padding: "4px 8px",
-        backgroundColor: "var(--lk-bg2)",
-        borderBottom: "1px solid var(--lk-border-color)",
-        gap: "8px",
-        minHeight: "32px",
-      }}
-    >
+    <div className="flex items-center justify-end px-2 py-1 bg-(--lk-bg2) border-b border-(--lk-border-color) gap-2 min-h-8 shrink-0 md:py-0.5 max-[480px]:px-1.5 max-[480px]:py-0.5 max-[480px]:min-h-7">
       {/* Admin Button - Google Meet Style */}
       {isAdmin && (
         <AdminButton
diff --git a/frontend/src/components/meeting/ScreenShareLayout.css b/frontend/src/components/meeting/ScreenShareLayout.css
deleted file mode 100644
index 38b77f4..0000000
--- a/frontend/src/components/meeting/ScreenShareLayout.css
+++ /dev/null
@@ -1,87 +0,0 @@
-/* Custom styles for screen share layout */
-
-/* Add rounded corners to all participant tiles */
-.lk-participant-tile {
-  border-radius: 12px !important;
-  overflow: hidden !important;
-}
-
-/* Make all carousel items (participants) the same size when screen sharing */
-.lk-focus-layout .lk-carousel > * {
-  width: 150px !important;
-  height: 150px !important;
-  min-width: 150px !important;
-  min-height: 150px !important;
-  max-width: 150px !important;
-  max-height: 150px !important;
-  flex-shrink: 0;
-  aspect-ratio: auto !important;
-}
-
-/* Ensure carousel scrolls vertically and shows all participants equally */
-.lk-focus-layout .lk-carousel {
-  flex-direction: column;
-  overflow-y: auto;
-  overflow-x: hidden;
-  gap: 8px;
-  padding: 8px;
-  max-height: 100%;
-}
-
-/* Keep the focused track (screen share) large */
-.lk-focus-layout .lk-focused-participant {
-  flex: 1;
-  width: 100%;
-  height: 100%;
-}
-
-/* Adjust focus layout container to give more space to screen share */
-.lk-focus-layout {
-  display: grid !important;
-  grid-template-columns: 170px 1fr !important;
-  gap: 8px !important;
-}
-
-/* On mobile/small screens, stack vertically */
-@media (max-width: 768px) {
-  .lk-focus-layout {
-    grid-template-columns: 1fr !important;
-    grid-template-rows: 1fr 150px !important;
-  }
-
-  .lk-focus-layout .lk-carousel {
-    flex-direction: row !important;
-    overflow-x: auto !important;
-    overflow-y: hidden !important;
-  }
-
-  .lk-focus-layout .lk-carousel > * {
-    width: 100px !important;
-    height: 100px !important;
-    min-width: 100px !important;
-    min-height: 100px !important;
-    max-width: 100px !important;
-    max-height: 100px !important;
-  }
-}
-
-/* Extra small screens */
-@media (max-width: 480px) {
-  .lk-focus-layout {
-    grid-template-rows: 1fr 120px !important;
-  }
-
-  .lk-focus-layout .lk-carousel > * {
-    width: 80px !important;
-    height: 80px !important;
-    min-width: 80px !important;
-    min-height: 80px !important;
-    max-width: 80px !important;
-    max-height: 80px !important;
-  }
-
-  .lk-focus-layout .lk-carousel {
-    gap: 6px !important;
-    padding: 6px !important;
-  }
-}
diff --git a/frontend/src/components/meeting/Sidebar.css b/frontend/src/components/meeting/Sidebar.css
deleted file mode 100644
index 9a5e298..0000000
--- a/frontend/src/components/meeting/Sidebar.css
+++ /dev/null
@@ -1,129 +0,0 @@
-/* Modern Sidebar Styles */
-
-/* Base styles */
-.modern-sidebar {
-  position: relative;
-}
-
-/* Sidebar header responsive */
-.sidebar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--lk-border-color);
-  background-color: var(--lk-bg2);
-  flex-shrink: 0;
-}
-
-.sidebar-title {
-  color: var(--lk-fg);
-  font-weight: 600;
-  margin: 0;
-  font-size: 15px;
-}
-
-.sidebar-close-btn {
-  background: transparent;
-  border: none;
-  color: var(--lk-fg2);
-  cursor: pointer;
-  padding: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
-  transition: all 0.2s;
-}
-
-.sidebar-close-btn:hover {
-  background-color: var(--lk-bg);
-  color: var(--lk-fg);
-}
-
-/* Tablet responsive */
-@media (max-width: 768px) {
-  .modern-sidebar {
-    width: 320px !important;
-    max-width: 320px !important;
-  }
-
-  .sidebar-header {
-    padding: 12px 16px;
-  }
-
-  .sidebar-title {
-    font-size: 14px;
-  }
-
-  .sidebar-close-btn {
-    padding: 5px;
-  }
-
-  .sidebar-close-btn svg {
-    width: 18px;
-    height: 18px;
-  }
-}
-
-/* Mobile responsive - Full screen */
-@media (max-width: 480px) {
-  .modern-sidebar {
-    width: 100vw !important;
-    max-width: 100vw !important;
-    position: fixed !important;
-    top: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-    z-index: 1000 !important;
-    border-left: none !important;
-  }
-
-  .sidebar-header {
-    padding: 10px 12px;
-    border-bottom: 2px solid var(--lk-border-color);
-  }
-
-  .sidebar-title {
-    font-size: 13px;
-  }
-
-  .sidebar-close-btn {
-    padding: 4px;
-  }
-
-  .sidebar-close-btn svg {
-    width: 16px;
-    height: 16px;
-  }
-}
-
-/* Responsive width for mobile */
-@media (max-width: 480px) {
-  .modern-sidebar {
-    width: 100vw !important;
-    max-width: 100vw !important;
-  }
-}
-
-/* Smooth slide-in animation */
-.modern-sidebar {
-  animation: slideInRight 0.25s ease-out;
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-/* Reduce motion for accessibility */
-@media (prefers-reduced-motion: reduce) {
-  .modern-sidebar {
-    animation: none !important;
-  }
-}
diff --git a/frontend/src/components/meeting/SidebarPanel.tsx b/frontend/src/components/meeting/SidebarPanel.tsx
index 2feff7c..58a5e1a 100644
--- a/frontend/src/components/meeting/SidebarPanel.tsx
+++ b/frontend/src/components/meeting/SidebarPanel.tsx
@@ -16,23 +16,17 @@ export const SidebarPanel: React.FC<SidebarPanelProps> = ({
   children,
 }) => {
   return (
-    <div
-      className="modern-sidebar"
-      style={{
-        width: "min(360px, 100vw)",
-        maxWidth: "360px",
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        borderLeft: "1px solid var(--lk-border-color)",
-        backgroundColor: "var(--lk-bg2)",
-        boxShadow: "-4px 0 16px rgba(0, 0, 0, 0.3)",
-      }}
-    >
+    <div className="relative w-90 max-w-90 h-full flex flex-col border-l border-(--lk-border-color) bg-(--lk-bg2) shadow-[-4px_0_16px_rgba(0,0,0,0.3)] animate-slide-in-right shrink-0 md:w-80 md:max-w-80 max-md:w-80 max-md:max-w-80 max-sm:w-screen! max-sm:max-w-screen! max-sm:fixed! max-sm:inset-0! max-sm:z-1000! max-sm:border-l-0! motion-reduce:animate-none">
       {/* Sidebar Header */}
-      <div className="sidebar-header">
-        <h3 className="sidebar-title">{title}</h3>
-        <button className="sidebar-close-btn" onClick={onClose} title="Close">
+      <div className="flex items-center justify-between px-5 py-4 border-b border-(--lk-border-color) bg-(--lk-bg2) shrink-0 md:px-4 md:py-3 max-sm:px-3 max-sm:py-2.5 max-sm:border-b-2">
+        <h3 className="text-(--lk-fg) font-semibold m-0 text-[15px] md:text-sm max-sm:text-[13px]">
+          {title}
+        </h3>
+        <button
+          className="bg-transparent border-none text-(--lk-fg2) cursor-pointer p-1.5 flex items-center justify-center rounded-md transition-all duration-200 hover:bg-(--lk-bg) hover:text-(--lk-fg) md:p-1.25 max-sm:p-1"
+          onClick={onClose}
+          title="Close"
+        >
           <svg
             width="20"
             height="20"
@@ -40,6 +34,7 @@ export const SidebarPanel: React.FC<SidebarPanelProps> = ({
             stroke="currentColor"
             viewBox="0 0 24 24"
             strokeWidth="2"
+            className="md:w-4.5 md:h-4.5 max-sm:w-4 max-sm:h-4"
           >
             <path
               strokeLinecap="round"
@@ -51,7 +46,7 @@ export const SidebarPanel: React.FC<SidebarPanelProps> = ({
       </div>
 
       {/* Sidebar Content */}
-      {children}
+      <div className="flex-1 overflow-hidden min-h-0">{children}</div>
     </div>
   );
 };
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b670431..e31f1a2 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");
 
 @import "tailwindcss";
 
@@ -64,8 +64,8 @@
   --color-purple-900: #5b21b6;
 
   /* Font Families */
-  --font-sans: 'Inter', 'SF Pro Display', system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+  --font-sans: "Inter", "SF Pro Display", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", "Fira Code", monospace;
 
   /* Animations */
   --animate-fade-in: fadeIn 0.3s ease-in-out;
@@ -92,60 +92,127 @@
 }
 
 @keyframes fadeIn {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes slideUp {
-  0% { transform: translateY(20px); opacity: 0; }
-  100% { transform: translateY(0); opacity: 1; }
+  0% {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
 
 @keyframes slideDown {
-  0% { transform: translateY(-20px); opacity: 0; }
-  100% { transform: translateY(0); opacity: 1; }
+  0% {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
 
 @keyframes slideInRight {
-  0% { transform: translateX(100%); opacity: 0; }
-  100% { transform: translateX(0); opacity: 1; }
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
 
 @keyframes slideInLeft {
-  0% { transform: translateX(-100%); opacity: 0; }
-  100% { transform: translateX(0); opacity: 1; }
+  0% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
 
 @keyframes scaleUp {
-  0% { transform: scale(0.95); opacity: 0; }
-  100% { transform: scale(1); opacity: 1; }
+  0% {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 
 @keyframes bounceGentle {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-10px); }
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
 }
 
 @keyframes shimmer {
-  0% { background-position: -1000px 0; }
-  100% { background-position: 1000px 0; }
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
 }
 
 @keyframes checkMark {
-  0% { stroke-dashoffset: 100; }
-  100% { stroke-dashoffset: 0; }
+  0% {
+    stroke-dashoffset: 100;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
 }
 
 @keyframes shake {
-  0%, 100% { transform: translateX(0); }
-  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
-  20%, 40%, 60%, 80% { transform: translateX(5px); }
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateX(-5px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateX(5px);
+  }
 }
 
 @keyframes skeleton {
-  0% { background-color: rgba(229, 231, 235, 0.4); }
-  50% { background-color: rgba(229, 231, 235, 0.8); }
-  100% { background-color: rgba(229, 231, 235, 0.4); }
+  0% {
+    background-color: rgba(229, 231, 235, 0.4);
+  }
+  50% {
+    background-color: rgba(229, 231, 235, 0.8);
+  }
+  100% {
+    background-color: rgba(229, 231, 235, 0.4);
+  }
 }
 
 /* CSS Variables for Theming */
@@ -159,24 +226,24 @@
   --text-tertiary: #9ca3af;
   --border-color: #e5e7eb;
   --border-focus: #2563eb;
-  
+
   /* Brand Colors */
   --brand-primary: #2563eb;
   --brand-dark: #1e40af;
   --brand-light: #60a5fa;
-  
+
   /* Semantic Colors */
   --success: #10b981;
   --error: #ef4444;
   --warning: #f59e0b;
   --info: #3b82f6;
-  
+
   /* Shadows */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
-  
+
   /* Transitions */
   --transition-fast: 150ms ease-in-out;
   --transition-base: 250ms ease-in-out;
@@ -200,40 +267,40 @@
   * {
     @apply antialiased;
   }
-  
+
   body {
     @apply bg-gray-50 text-gray-900;
-    font-family: 'Inter', 'SF Pro Display', system-ui, sans-serif;
+    font-family: "Inter", "SF Pro Display", system-ui, sans-serif;
   }
-  
+
   /* Smooth scrolling */
   html {
     scroll-behavior: smooth;
   }
-  
+
   /* Custom scrollbar */
   ::-webkit-scrollbar {
     width: 10px;
     height: 10px;
   }
-  
+
   ::-webkit-scrollbar-track {
     @apply bg-gray-100;
   }
-  
+
   ::-webkit-scrollbar-thumb {
     @apply bg-gray-300 rounded-full;
   }
-  
+
   ::-webkit-scrollbar-thumb:hover {
     @apply bg-gray-400;
   }
-  
+
   /* Focus visible for better accessibility */
   *:focus-visible {
     @apply outline-2 outline-offset-2 outline-blue-600;
   }
-  
+
   /* Screen reader only content */
   .sr-only {
     position: absolute;
@@ -246,7 +313,7 @@
     white-space: nowrap;
     border-width: 0;
   }
-  
+
   /* Reduced motion support */
   @media (prefers-reduced-motion: reduce) {
     *,
@@ -258,5 +325,378 @@
       scroll-behavior: auto !important;
     }
   }
-}
 
+  /* ===================================
+   * LiveKit Control Bar Overrides
+   * ================================= */
+
+  /* Ensure all control bar buttons have the same size, except share screen */
+  .lk-button-group .lk-button:not([data-lk-source="screen_share"]),
+  .lk-button-group button {
+    @apply min-w-12 min-h-12 flex items-center justify-center;
+  }
+
+  /* Allow share screen button to be wider */
+  .lk-button-group .lk-button[data-lk-source="screen_share"] {
+    @apply min-h-12 flex items-center justify-center;
+  }
+
+  /* Responsive Design for Mobile */
+  @media (max-width: 768px) {
+    /* Smaller buttons on mobile */
+    .lk-button-group .lk-button:not([data-lk-source="screen_share"]),
+    .lk-button-group button {
+      @apply min-w-10 min-h-10 p-1.5;
+    }
+
+    .lk-button-group .lk-button[data-lk-source="screen_share"] {
+      @apply min-h-10 w-14 px-2 py-1.5;
+    }
+
+    /* Reduce gap between buttons on mobile */
+    .lk-button-group {
+      @apply gap-1.5;
+    }
+
+    /* Hide button labels on small screens */
+    .lk-button-label {
+      @apply hidden;
+    }
+
+    /* Adjust control bar wrapper padding */
+    .lk-control-bar-wrapper {
+      @apply p-2 gap-1.5;
+    }
+
+    /* Adjust split button arrow */
+    .lk-button-group > div > button[style*="minWidth: 22px"] {
+      @apply min-w-4.5 min-h-10;
+    }
+
+    /* Adjust main toggle buttons in split buttons */
+    .lk-button-group > div > .lk-button {
+      @apply min-w-9 min-h-10;
+    }
+  }
+
+  @media (max-width: 480px) {
+    /* Extra small screens - even smaller buttons */
+    .lk-button-group .lk-button:not([data-lk-source="screen_share"]),
+    .lk-button-group button {
+      @apply min-w-9 min-h-9 p-1;
+    }
+
+    .lk-button-group .lk-button[data-lk-source="screen_share"] {
+      @apply min-h-9 w-12 px-1.5 py-1;
+    }
+
+    .lk-button-group {
+      @apply gap-1;
+    }
+
+    .lk-control-bar-wrapper {
+      @apply p-1.5 gap-1;
+    }
+
+    /* Adjust split button components for extra small screens */
+    .lk-button-group > div > button[style*="minWidth: 22px"] {
+      @apply min-w-4 min-h-9;
+    }
+
+    .lk-button-group > div > .lk-button {
+      @apply min-w-8 min-h-9;
+    }
+
+    /* Smaller SVG icons on extra small screens */
+    .lk-button svg {
+      @apply w-4 h-4;
+    }
+  }
+
+  /* ===================================
+   * LiveKit Chat Sidebar Overrides
+   * ================================= */
+
+  /* Chat container */
+  .lk-chat {
+    width: 100% !important;
+    height: 100% !important;
+    display: flex !important;
+    flex-direction: column !important;
+    background: transparent !important;
+    border: none !important;
+    overflow: hidden !important;
+    box-sizing: border-box !important;
+  }
+
+  /* Hide default LiveKit header */
+  .lk-chat-header {
+    display: none !important;
+  }
+
+  /* Hide unread badge */
+  .lk-chat .lk-unread-indicator,
+  .lk-chat .lk-notification-badge {
+    display: none !important;
+  }
+
+  /* Reset list styles that LiveKit uses for messages */
+  .lk-chat-messages ol,
+  .lk-chat-messages ul {
+    list-style: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+  }
+
+  /* Chat messages area */
+  .lk-chat-messages {
+    flex: 1 1 0 !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    padding: 12px !important;
+    min-height: 0 !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+    background: var(--lk-bg2) !important;
+    scroll-behavior: smooth !important;
+    display: flex !important;
+    flex-direction: column !important;
+  }
+
+  /* Empty state - centered */
+  .lk-chat-messages:empty {
+    align-items: center !important;
+    justify-content: center !important;
+  }
+
+  .lk-chat-messages:empty::before {
+    content: "💬 No messages yet" !important;
+    color: var(--lk-fg2) !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    opacity: 0.7 !important;
+    text-align: center !important;
+  }
+
+  /* Scrollbar */
+  .lk-chat-messages::-webkit-scrollbar {
+    width: 6px !important;
+  }
+
+  .lk-chat-messages::-webkit-scrollbar-track {
+    background: transparent !important;
+  }
+
+  .lk-chat-messages::-webkit-scrollbar-thumb {
+    background: var(--lk-border-color) !important;
+    border-radius: 6px !important;
+  }
+
+  .lk-chat-messages::-webkit-scrollbar-thumb:hover {
+    background: var(--lk-fg2) !important;
+  }
+
+  /* Chat entry */
+  .lk-chat-entry {
+    margin-bottom: 8px !important;
+    padding: 8px 10px !important;
+    background: var(--lk-bg) !important;
+    border-radius: 10px !important;
+    border: 1px solid rgba(255, 255, 255, 0.05) !important;
+    box-sizing: border-box !important;
+    width: 100% !important;
+    transition: background 0.15s ease !important;
+  }
+
+  .lk-chat-entry:hover {
+    background: var(--lk-bg3) !important;
+    border-color: var(--lk-accent) !important;
+  }
+
+  .lk-chat-entry .lk-chat-entry-author {
+    font-weight: 600 !important;
+    font-size: 12px !important;
+    color: var(--lk-accent) !important;
+    margin-bottom: 4px !important;
+    display: block !important;
+  }
+
+  .lk-chat-entry .lk-chat-entry-message {
+    font-size: 13px !important;
+    color: var(--lk-fg) !important;
+    line-height: 1.4 !important;
+    word-break: break-word !important;
+    overflow-wrap: break-word !important;
+    white-space: pre-wrap !important;
+  }
+
+  .lk-chat-entry .lk-chat-entry-timestamp {
+    font-size: 10px !important;
+    color: var(--lk-fg2) !important;
+    margin-top: 4px !important;
+    opacity: 0.6 !important;
+  }
+
+  /* Chat form */
+  .lk-chat-form {
+    flex-shrink: 0 !important;
+    padding: 10px 12px !important;
+    border-top: 1px solid var(--lk-border-color) !important;
+    background: var(--lk-bg2) !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+    display: flex !important;
+    gap: 8px !important;
+    align-items: center !important;
+  }
+
+  .lk-chat-form-input,
+  .lk-chat-form input[type="text"] {
+    flex: 1 !important;
+    min-width: 0 !important;
+    box-sizing: border-box !important;
+    background: var(--lk-bg) !important;
+    border: 1.5px solid var(--lk-border-color) !important;
+    color: var(--lk-fg) !important;
+    padding: 9px 12px !important;
+    border-radius: 10px !important;
+    font-size: 13px !important;
+    font-family: inherit !important;
+    transition: border-color 0.2s ease !important;
+    line-height: 1.4 !important;
+  }
+
+  .lk-chat-form-input:focus,
+  .lk-chat-form input[type="text"]:focus {
+    outline: none !important;
+    border-color: var(--lk-accent) !important;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
+  }
+
+  .lk-chat-form-input::placeholder,
+  .lk-chat-form input[type="text"]::placeholder {
+    color: var(--lk-fg2) !important;
+    opacity: 0.7 !important;
+  }
+
+  /* Send Button */
+  .lk-chat-form button[type="submit"] {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    position: relative !important;
+    width: 36px !important;
+    height: 36px !important;
+    min-width: 36px !important;
+    min-height: 36px !important;
+    background: var(--lk-accent) !important;
+    color: transparent !important;
+    border: none !important;
+    border-radius: 10px !important;
+    cursor: pointer !important;
+    flex-shrink: 0 !important;
+    font-size: 0 !important;
+    transition:
+      background 0.2s ease,
+      transform 0.15s ease,
+      box-shadow 0.2s ease !important;
+    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
+    overflow: hidden !important;
+  }
+
+  .lk-chat-form button[type="submit"]:hover:not(:disabled) {
+    background: #2563eb !important;
+    transform: scale(1.05) !important;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.45) !important;
+  }
+
+  .lk-chat-form button[type="submit"]:active:not(:disabled) {
+    transform: scale(0.96) !important;
+    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.3) !important;
+  }
+
+  .lk-chat-form button[type="submit"]:disabled {
+    opacity: 0.35 !important;
+    cursor: not-allowed !important;
+  }
+
+  .lk-chat-form button[type="submit"]::before {
+    content: "" !important;
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    width: 18px !important;
+    height: 18px !important;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' viewBox='0 0 24 24' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E") !important;
+    background-size: contain !important;
+    background-repeat: no-repeat !important;
+    background-position: center !important;
+    pointer-events: none !important;
+  }
+
+  /* ===================================
+   * Screen Share Layout Overrides
+   * ================================= */
+
+  /* Add rounded corners to all participant tiles */
+  .lk-participant-tile {
+    @apply rounded-xl overflow-hidden;
+  }
+
+  /* Make all carousel items (participants) the same size when screen sharing */
+  .lk-focus-layout .lk-carousel > * {
+    @apply w-37.5 h-37.5 min-w-37.5 min-h-37.5 max-w-37.5 max-h-37.5 shrink-0;
+    aspect-ratio: auto !important;
+  }
+
+  /* Ensure carousel scrolls vertically and shows all participants equally */
+  .lk-focus-layout .lk-carousel {
+    @apply flex-col overflow-y-auto overflow-x-hidden gap-2 p-2 max-h-full;
+  }
+
+  /* Keep the focused track (screen share) large */
+  .lk-focus-layout .lk-focused-participant {
+    @apply flex-1 w-full h-full;
+  }
+
+  /* Adjust focus layout container to give more space to screen share */
+  .lk-focus-layout {
+    display: grid !important;
+    grid-template-columns: 170px 1fr !important;
+    @apply gap-2;
+  }
+
+  /* On mobile/small screens, stack vertically */
+  @media (max-width: 768px) {
+    .lk-focus-layout {
+      grid-template-columns: 1fr !important;
+      grid-template-rows: 1fr 150px !important;
+    }
+
+    .lk-focus-layout .lk-carousel {
+      @apply flex-row overflow-x-auto overflow-y-hidden;
+    }
+
+    .lk-focus-layout .lk-carousel > * {
+      @apply w-25 h-25 min-w-25 min-h-25 max-w-25 max-h-25;
+    }
+  }
+
+  /* Extra small screens */
+  @media (max-width: 480px) {
+    .lk-focus-layout {
+      grid-template-rows: 1fr 120px !important;
+    }
+
+    .lk-focus-layout .lk-carousel > * {
+      @apply w-20 h-20 min-w-20 min-h-20 max-w-20 max-h-20;
+    }
+
+    .lk-focus-layout .lk-carousel {
+      @apply gap-1.5 p-1.5;
+    }
+  }
+}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index b96e929..926fcb7 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,185 +1,182 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
       colors: {
         // Primary Brand Colors (aligned with Task 6 design system)
         brand: {
-          50: '#e3f2fd',
-          100: '#bbdefb',
-          200: '#90caf9',
-          300: '#64b5f6',
-          400: '#42a5f5',
-          500: '#2196f3',
-          600: '#1976d2', // Main brand blue from Task 6
-          700: '#1565c0',
-          800: '#0d47a1',
-          900: '#0a3d91',
+          50: "#e3f2fd",
+          100: "#bbdefb",
+          200: "#90caf9",
+          300: "#64b5f6",
+          400: "#42a5f5",
+          500: "#2196f3",
+          600: "#1976d2", // Main brand blue from Task 6
+          700: "#1565c0",
+          800: "#0d47a1",
+          900: "#0a3d91",
         },
         // Secondary Colors
         secondary: {
-          50: '#fafafa',
-          100: '#f5f5f5',
-          200: '#eeeeee',
-          300: '#e0e0e0',
-          400: '#bdbdbd',
-          500: '#9e9e9e',
-          600: '#757575',
-          700: '#616161',
-          800: '#424242', // Dark Gray from Task 6
-          900: '#212121',
+          50: "#fafafa",
+          100: "#f5f5f5",
+          200: "#eeeeee",
+          300: "#e0e0e0",
+          400: "#bdbdbd",
+          500: "#9e9e9e",
+          600: "#757575",
+          700: "#616161",
+          800: "#424242", // Dark Gray from Task 6
+          900: "#212121",
         },
         purple: {
-          50: '#faf5ff',
-          100: '#f3e8ff',
-          200: '#e9d5ff',
-          300: '#d8b4fe',
-          400: '#c084fc',
-          500: '#a855f7',
-          600: '#8b5cf6', // Premium purple
-          700: '#7c3aed',
-          800: '#6d28d9',
-          900: '#5b21b6',
+          50: "#faf5ff",
+          100: "#f3e8ff",
+          200: "#e9d5ff",
+          300: "#d8b4fe",
+          400: "#c084fc",
+          500: "#a855f7",
+          600: "#8b5cf6", // Premium purple
+          700: "#7c3aed",
+          800: "#6d28d9",
+          900: "#5b21b6",
         },
         success: {
-          50: '#e8f5e9',
-          100: '#c8e6c9',
-          200: '#a5d6a7',
-          300: '#81c784',
-          400: '#66bb6a',
-          500: '#4caf50', // Success green from Task 6
-          600: '#43a047',
-          700: '#388e3c',
-          800: '#2e7d32',
-          900: '#1b5e20',
+          50: "#e8f5e9",
+          100: "#c8e6c9",
+          200: "#a5d6a7",
+          300: "#81c784",
+          400: "#66bb6a",
+          500: "#4caf50", // Success green from Task 6
+          600: "#43a047",
+          700: "#388e3c",
+          800: "#2e7d32",
+          900: "#1b5e20",
         },
         danger: {
-          50: '#ffebee',
-          100: '#ffcdd2',
-          200: '#ef9a9a',
-          300: '#e57373',
-          400: '#ef5350',
-          500: '#f44336', // Error red from Task 6
-          600: '#e53935',
-          700: '#d32f2f',
-          800: '#c62828',
-          900: '#b71c1c',
+          50: "#ffebee",
+          100: "#ffcdd2",
+          200: "#ef9a9a",
+          300: "#e57373",
+          400: "#ef5350",
+          500: "#f44336", // Error red from Task 6
+          600: "#e53935",
+          700: "#d32f2f",
+          800: "#c62828",
+          900: "#b71c1c",
         },
         warning: {
-          50: '#fff3e0',
-          100: '#ffe0b2',
-          200: '#ffcc80',
-          300: '#ffb74d',
-          400: '#ffa726',
-          500: '#ff9800',
-          600: '#fb8c00',
-          700: '#f57c00',
-          800: '#ef6c00',
-          900: '#e65100',
+          50: "#fff3e0",
+          100: "#ffe0b2",
+          200: "#ffcc80",
+          300: "#ffb74d",
+          400: "#ffa726",
+          500: "#ff9800",
+          600: "#fb8c00",
+          700: "#f57c00",
+          800: "#ef6c00",
+          900: "#e65100",
         },
       },
       // Responsive breakpoints (Task 6)
       screens: {
-        'mobile': { 'max': '639px' },      // < 640px
-        'tablet': { 'min': '640px', 'max': '1023px' }, // 640px - 1024px
-        'desktop': { 'min': '1024px' },    // > 1024px
+        mobile: { max: "639px" }, // < 640px
+        tablet: { min: "640px", max: "1023px" }, // 640px - 1024px
+        desktop: { min: "1024px" }, // > 1024px
       },
       fontFamily: {
-        sans: ['Inter', 'SF Pro Display', 'system-ui', 'sans-serif'],
-        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
+        sans: ["Inter", "SF Pro Display", "system-ui", "sans-serif"],
+        mono: ["JetBrains Mono", "Fira Code", "monospace"],
       },
       animation: {
         // Entrance animations
-        'fade-in': 'fadeIn 0.3s ease-in-out',
-        'slide-up': 'slideUp 0.3s ease-out',
-        'slide-down': 'slideDown 0.3s ease-out',
-        'slide-in-right': 'slideInRight 0.3s ease-out',
-        'slide-in-left': 'slideInLeft 0.3s ease-out',
-        'scale-up': 'scaleUp 0.2s ease-out',
+        "fade-in": "fadeIn 0.3s ease-in-out",
+        "slide-up": "slideUp 0.3s ease-out",
+        "slide-down": "slideDown 0.3s ease-out",
+        "slide-in-right": "slideInRight 0.3s ease-out",
+        "slide-in-left": "slideInLeft 0.3s ease-out",
+        "scale-up": "scaleUp 0.2s ease-out",
 
         // Interactive animations
-        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-        'bounce-gentle': 'bounceGentle 1s ease-in-out infinite',
-        'float': 'float 3s ease-in-out infinite',
-        'shimmer': 'shimmer 2s linear infinite',
-        'spin-slow': 'spin 3s linear infinite',
+        "pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+        "bounce-gentle": "bounceGentle 1s ease-in-out infinite",
+        float: "float 3s ease-in-out infinite",
+        shimmer: "shimmer 2s linear infinite",
+        "spin-slow": "spin 3s linear infinite",
 
         // Success/Error animations
-        'check-mark': 'checkMark 0.6s ease-out',
-        'shake': 'shake 0.5s ease-in-out',
+        "check-mark": "checkMark 0.6s ease-out",
+        shake: "shake 0.5s ease-in-out",
 
         // Loading animations
-        'skeleton': 'skeleton 1.5s ease-in-out infinite',
+        skeleton: "skeleton 1.5s ease-in-out infinite",
       },
       keyframes: {
         fadeIn: {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' },
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" },
         },
         slideUp: {
-          '0%': { transform: 'translateY(20px)', opacity: '0' },
-          '100%': { transform: 'translateY(0)', opacity: '1' },
+          "0%": { transform: "translateY(20px)", opacity: "0" },
+          "100%": { transform: "translateY(0)", opacity: "1" },
         },
         slideDown: {
-          '0%': { transform: 'translateY(-20px)', opacity: '0' },
-          '100%': { transform: 'translateY(0)', opacity: '1' },
+          "0%": { transform: "translateY(-20px)", opacity: "0" },
+          "100%": { transform: "translateY(0)", opacity: "1" },
         },
         slideInRight: {
-          '0%': { transform: 'translateX(100%)', opacity: '0' },
-          '100%': { transform: 'translateX(0)', opacity: '1' },
+          "0%": { transform: "translateX(100%)" },
+          "100%": { transform: "translateX(0)" },
         },
         slideInLeft: {
-          '0%': { transform: 'translateX(-100%)', opacity: '0' },
-          '100%': { transform: 'translateX(0)', opacity: '1' },
+          "0%": { transform: "translateX(-100%)", opacity: "0" },
+          "100%": { transform: "translateX(0)", opacity: "1" },
         },
         scaleUp: {
-          '0%': { transform: 'scale(0.95)', opacity: '0' },
-          '100%': { transform: 'scale(1)', opacity: '1' },
+          "0%": { transform: "scale(0.95)", opacity: "0" },
+          "100%": { transform: "scale(1)", opacity: "1" },
         },
         bounceGentle: {
-          '0%, 100%': { transform: 'translateY(0)' },
-          '50%': { transform: 'translateY(-10px)' },
+          "0%, 100%": { transform: "translateY(0)" },
+          "50%": { transform: "translateY(-10px)" },
         },
         float: {
-          '0%, 100%': { transform: 'translateY(0px)' },
-          '50%': { transform: 'translateY(-20px)' },
+          "0%, 100%": { transform: "translateY(0px)" },
+          "50%": { transform: "translateY(-20px)" },
         },
         shimmer: {
-          '0%': { backgroundPosition: '-1000px 0' },
-          '100%': { backgroundPosition: '1000px 0' },
+          "0%": { backgroundPosition: "-1000px 0" },
+          "100%": { backgroundPosition: "1000px 0" },
         },
         checkMark: {
-          '0%': { strokeDashoffset: '100' },
-          '100%': { strokeDashoffset: '0' },
+          "0%": { strokeDashoffset: "100" },
+          "100%": { strokeDashoffset: "0" },
         },
         shake: {
-          '0%, 100%': { transform: 'translateX(0)' },
-          '10%, 30%, 50%, 70%, 90%': { transform: 'translateX(-5px)' },
-          '20%, 40%, 60%, 80%': { transform: 'translateX(5px)' },
+          "0%, 100%": { transform: "translateX(0)" },
+          "10%, 30%, 50%, 70%, 90%": { transform: "translateX(-5px)" },
+          "20%, 40%, 60%, 80%": { transform: "translateX(5px)" },
         },
         skeleton: {
-          '0%': { backgroundColor: 'rgba(229, 231, 235, 0.4)' },
-          '50%': { backgroundColor: 'rgba(229, 231, 235, 0.8)' },
-          '100%': { backgroundColor: 'rgba(229, 231, 235, 0.4)' },
+          "0%": { backgroundColor: "rgba(229, 231, 235, 0.4)" },
+          "50%": { backgroundColor: "rgba(229, 231, 235, 0.8)" },
+          "100%": { backgroundColor: "rgba(229, 231, 235, 0.4)" },
         },
       },
       boxShadow: {
-        'glow': '0 0 20px rgba(37, 99, 235, 0.5)',
-        'glow-lg': '0 0 30px rgba(37, 99, 235, 0.6)',
-        'inner-glow': 'inset 0 0 10px rgba(37, 99, 235, 0.3)',
+        glow: "0 0 20px rgba(37, 99, 235, 0.5)",
+        "glow-lg": "0 0 30px rgba(37, 99, 235, 0.6)",
+        "inner-glow": "inset 0 0 10px rgba(37, 99, 235, 0.3)",
       },
       backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-mesh': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-mesh": "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
       },
       backdropBlur: {
-        xs: '2px',
+        xs: "2px",
       },
     },
   },
   plugins: [],
-}
+};

From 6b69b4bcccbb44f8cbc174164f249f605e2aa683 Mon Sep 17 00:00:00 2001
From: Amr3011 <amroosamafakharany@gmail.com>
Date: Thu, 5 Mar 2026 19:33:21 +0200
Subject: [PATCH 2/6] refactor: add overflow hidden styles to prevent scrollbar
 flash in MeetingContent and VideoSection

---
 .../meeting/LiveKitMeetingRoom/MeetingContent.tsx  |  1 +
 .../meeting/LiveKitMeetingRoom/VideoSection.tsx    |  4 ++--
 frontend/src/index.css                             | 14 ++++++++++++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/meeting/LiveKitMeetingRoom/MeetingContent.tsx b/frontend/src/components/meeting/LiveKitMeetingRoom/MeetingContent.tsx
index a37ef69..4b06fc3 100644
--- a/frontend/src/components/meeting/LiveKitMeetingRoom/MeetingContent.tsx
+++ b/frontend/src/components/meeting/LiveKitMeetingRoom/MeetingContent.tsx
@@ -61,6 +61,7 @@ export const MeetingContent: React.FC<MeetingContentProps> = ({
           flexDirection: "column",
           height: "100%",
           width: "100%",
+          overflow: "hidden",
         }}
       >
         <MeetingHeader
diff --git a/frontend/src/components/meeting/LiveKitMeetingRoom/VideoSection.tsx b/frontend/src/components/meeting/LiveKitMeetingRoom/VideoSection.tsx
index 86b17fd..dab665f 100644
--- a/frontend/src/components/meeting/LiveKitMeetingRoom/VideoSection.tsx
+++ b/frontend/src/components/meeting/LiveKitMeetingRoom/VideoSection.tsx
@@ -35,9 +35,9 @@ export const VideoSection: React.FC<VideoSectionProps> = ({
   onEndMeeting,
 }) => (
   <div
-    style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}
+    style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0, overflow: "hidden" }}
   >
-    <div style={{ display: "flex", flex: 1, minHeight: 0 }}>
+    <div style={{ display: "flex", flex: 1, minHeight: 0, overflow: "hidden" }}>
       <div
         className="lk-video-conference-inner"
         style={{ flex: 1, minWidth: 0 }}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index e31f1a2..2448183 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -273,6 +273,20 @@
     font-family: "Inter", "SF Pro Display", system-ui, sans-serif;
   }
 
+  /* Prevent scrollbar flash when panels/modals open */
+  html,
+  body {
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+  }
+
+  #root {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+  }
+
   /* Smooth scrolling */
   html {
     scroll-behavior: smooth;

From 54436e9c83bb3580dd7221d6289f21d34291d296 Mon Sep 17 00:00:00 2001
From: Amr3011 <amroosamafakharany@gmail.com>
Date: Thu, 5 Mar 2026 19:33:43 +0200
Subject: [PATCH 3/6] refactor: format style object for improved readability in
 VideoSection component

---
 .../meeting/LiveKitMeetingRoom/VideoSection.tsx           | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/meeting/LiveKitMeetingRoom/VideoSection.tsx b/frontend/src/components/meeting/LiveKitMeetingRoom/VideoSection.tsx
index dab665f..bef0755 100644
--- a/frontend/src/components/meeting/LiveKitMeetingRoom/VideoSection.tsx
+++ b/frontend/src/components/meeting/LiveKitMeetingRoom/VideoSection.tsx
@@ -35,7 +35,13 @@ export const VideoSection: React.FC<VideoSectionProps> = ({
   onEndMeeting,
 }) => (
   <div
-    style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0, overflow: "hidden" }}
+    style={{
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      minWidth: 0,
+      overflow: "hidden",
+    }}
   >
     <div style={{ display: "flex", flex: 1, minHeight: 0, overflow: "hidden" }}>
       <div

From 03bc04c477be4c5ac8b496a805901edb57db8f42 Mon Sep 17 00:00:00 2001
From: Amr3011 <amroosamafakharany@gmail.com>
Date: Thu, 5 Mar 2026 19:42:20 +0200
Subject: [PATCH 4/6] refactor: update styles in AdminControls components for
 consistency and improved readability

---
 .../meeting/AdminControls/EndMeetingButton.tsx     |  7 ++++++-
 .../meeting/AdminControls/ParticipantItem.tsx      | 14 +++++++++++---
 .../meeting/AdminControls/ParticipantsList.tsx     | 10 ++++++++--
 .../src/components/meeting/AdminControls/index.tsx | 10 ++++++++--
 4 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/meeting/AdminControls/EndMeetingButton.tsx b/frontend/src/components/meeting/AdminControls/EndMeetingButton.tsx
index 38d20c8..54ae370 100644
--- a/frontend/src/components/meeting/AdminControls/EndMeetingButton.tsx
+++ b/frontend/src/components/meeting/AdminControls/EndMeetingButton.tsx
@@ -34,7 +34,12 @@ export const EndMeetingButton: React.FC<EndMeetingButtonProps> = ({
           <button
             onClick={() => onShowConfirm(false)}
             disabled={isEndingMeeting}
-            className="flex-1 px-3 py-2 bg-gray-700 text-gray-200 border border-gray-600 rounded-md cursor-pointer hover:bg-gray-600 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+            className="flex-1 px-3 py-2 rounded-md cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+            style={{
+              background: "var(--lk-bg3)",
+              color: "var(--lk-fg)",
+              border: "1px solid var(--lk-border-color)",
+            }}
           >
             Cancel
           </button>
diff --git a/frontend/src/components/meeting/AdminControls/ParticipantItem.tsx b/frontend/src/components/meeting/AdminControls/ParticipantItem.tsx
index 9a8f060..5be5f68 100644
--- a/frontend/src/components/meeting/AdminControls/ParticipantItem.tsx
+++ b/frontend/src/components/meeting/AdminControls/ParticipantItem.tsx
@@ -11,7 +11,13 @@ export const ParticipantItem: React.FC<ParticipantItemProps> = ({
   onMuteTrack,
 }) => {
   return (
-    <div className="bg-gray-800 rounded-md p-3 flex flex-col gap-2">
+    <div
+      className="rounded-md p-3 flex flex-col gap-2"
+      style={{
+        background: "var(--lk-bg)",
+        border: "1px solid var(--lk-border-color)",
+      }}
+    >
       <div className="flex items-center justify-between">
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-1.5 mb-0.5">
@@ -29,13 +35,15 @@ export const ParticipantItem: React.FC<ParticipantItemProps> = ({
               </span>
             )}
           </div>
-          <p className="text-[11px] text-gray-400 m-0">{role}</p>
+          <p className="text-[11px] m-0" style={{ color: "var(--lk-fg2)" }}>
+            {role}
+          </p>
         </div>
         {!isLocal && (
           <button
             onClick={onKick}
             title="Kick participant"
-            className="p-1.5 text-red-400 bg-transparent rounded hover:bg-gray-700 transition-colors cursor-pointer flex items-center justify-center"
+            className="p-1.5 text-red-400 bg-transparent rounded transition-colors cursor-pointer flex items-center justify-center hover:bg-(--lk-bg3)"
           >
             <KickIcon />
           </button>
diff --git a/frontend/src/components/meeting/AdminControls/ParticipantsList.tsx b/frontend/src/components/meeting/AdminControls/ParticipantsList.tsx
index 4ecd3a1..fa8f5ef 100644
--- a/frontend/src/components/meeting/AdminControls/ParticipantsList.tsx
+++ b/frontend/src/components/meeting/AdminControls/ParticipantsList.tsx
@@ -9,8 +9,14 @@ export const ParticipantsList: React.FC<ParticipantsListProps> = ({
   onMuteTrack,
 }) => {
   return (
-    <div className="flex-1 overflow-y-auto p-4">
-      <h4 className="text-xs text-gray-400 mb-3 font-medium">
+    <div
+      className="flex-1 overflow-y-auto p-4"
+      style={{ background: "var(--lk-bg2)" }}
+    >
+      <h4
+        className="text-xs mb-3 font-medium"
+        style={{ color: "var(--lk-fg2)" }}
+      >
         Participants ({participants.length})
       </h4>
       <div className="flex flex-col gap-2">
diff --git a/frontend/src/components/meeting/AdminControls/index.tsx b/frontend/src/components/meeting/AdminControls/index.tsx
index 37b4d51..a22abc4 100644
--- a/frontend/src/components/meeting/AdminControls/index.tsx
+++ b/frontend/src/components/meeting/AdminControls/index.tsx
@@ -59,8 +59,14 @@ export const AdminControls: React.FC<AdminControlsProps> = ({
   };
 
   return (
-    <div className="flex flex-col h-full overflow-hidden">
-      <div className="p-4 border-b border-gray-700 shrink-0">
+    <div
+      className="flex flex-col h-full overflow-hidden"
+      style={{ background: "var(--lk-bg2)" }}
+    >
+      <div
+        className="p-4 shrink-0"
+        style={{ borderBottom: "1px solid var(--lk-border-color)" }}
+      >
         <EndMeetingButton
           onEndMeeting={handleEndMeeting}
           isEndingMeeting={isEndingMeeting}

From aa318024c63bb88f0d176a6124409df4bc624e1c Mon Sep 17 00:00:00 2001
From: Amr3011 <amroosamafakharany@gmail.com>
Date: Thu, 5 Mar 2026 21:29:47 +0200
Subject: [PATCH 5/6] feat: add speaker control and listener mode functionality

- Introduced SpeakerControl component for selecting audio output devices.
- Updated DeviceMenuItem to support speaker devices.
- Enhanced device management to include listener mode, allowing users to join without microphone/camera access.
- Modified PermissionPrompt to reflect listener mode context.
- Updated JoinButton and LobbyContent to handle listener mode state.
- Refactored error handling and display for better user experience.
- Added MeetingPreferencesContext for managing meeting preferences across components.
---
 .../common/DeviceErrorMessage/index.tsx       | 160 +++++++++++--
 .../CustomControlBar/DeviceMenuItem.tsx       |  10 +-
 .../meeting/CustomControlBar/Icons.tsx        |  20 ++
 .../CustomControlBar/SpeakerControl.tsx       |  58 +++++
 .../CustomControlBar/deviceConstants.ts       |   1 +
 .../meeting/CustomControlBar/deviceIcons.tsx  |  22 +-
 .../meeting/CustomControlBar/index.tsx        |  55 ++++-
 .../meeting/CustomControlBar/types.ts         |   2 +-
 .../MeetingPreferencesContext.tsx             |  10 +
 .../meeting/LiveKitMeetingRoom/index.tsx      |  39 +--
 .../components/meeting/PermissionPrompt.tsx   | 225 ++++++++++++------
 frontend/src/hooks/useLobbyDevices/index.ts   |   2 +
 frontend/src/hooks/useLobbyDevices/types.ts   |   1 +
 .../useLobbyDevices/useDeviceLifecycle.ts     |   9 +
 .../src/pages/MeetingLobby/DeviceControls.tsx |  63 +++--
 .../src/pages/MeetingLobby/ErrorDisplay.tsx   |  78 +++++-
 .../src/pages/MeetingLobby/JoinButton.tsx     |  16 +-
 .../src/pages/MeetingLobby/LobbyContent.tsx   |  10 +-
 frontend/src/pages/MeetingLobby/index.tsx     |  52 ++--
 frontend/src/pages/MeetingLobby/types.ts      |   3 +
 .../src/pages/MeetingLobby/useJoinHandlers.ts |   7 +-
 21 files changed, 662 insertions(+), 181 deletions(-)
 create mode 100644 frontend/src/components/meeting/CustomControlBar/SpeakerControl.tsx
 create mode 100644 frontend/src/components/meeting/LiveKitMeetingRoom/MeetingPreferencesContext.tsx

diff --git a/frontend/src/components/common/DeviceErrorMessage/index.tsx b/frontend/src/components/common/DeviceErrorMessage/index.tsx
index 356a7c3..63c59aa 100644
--- a/frontend/src/components/common/DeviceErrorMessage/index.tsx
+++ b/frontend/src/components/common/DeviceErrorMessage/index.tsx
@@ -1,8 +1,5 @@
 import React from "react";
-import { Button } from "../Button";
 import { errorConfigs } from "./errorConfigs";
-import { ErrorHeader } from "./ErrorHeader";
-import { InstructionsList } from "./InstructionsList";
 
 interface DeviceErrorMessageProps {
   type: "access-denied" | "not-found" | "generic";
@@ -11,8 +8,7 @@ interface DeviceErrorMessageProps {
 }
 
 /**
- * DeviceErrorMessage component displays user-friendly error messages
- * for device access issues with actionable instructions
+ * DeviceErrorMessage - Modern dark modal for device access errors
  */
 export const DeviceErrorMessage: React.FC<DeviceErrorMessageProps> = ({
   type,
@@ -23,28 +19,146 @@ export const DeviceErrorMessage: React.FC<DeviceErrorMessageProps> = ({
 
   return (
     <div
-      className="bg-white rounded-2xl shadow-xl p-6 max-w-md w-full animate-scale-up"
+      className="w-full max-w-sm animate-scale-up rounded-2xl overflow-hidden shadow-2xl"
+      style={{
+        background: "var(--lk-bg2)",
+        border: "1px solid var(--lk-border-color)",
+      }}
       role="alert"
       aria-live="assertive"
     >
-      <ErrorHeader
-        icon={content.icon}
-        title={content.title}
-        onDismiss={onDismiss}
-      />
-      <p className="text-gray-600 mb-4">{content.message}</p>
-      <InstructionsList instructions={content.instructions} />
-      <div className="flex gap-3 justify-end">
-        {onRetry && (
-          <Button
-            onClick={onRetry}
-            variant="primary"
-            size="md"
-            aria-label="Retry device access"
+      {/* Header gradient bar */}
+      <div className="h-1 w-full bg-linear-to-r from-red-500 via-orange-500 to-amber-500" />
+
+      <div className="p-6">
+        {/* Icon + Title */}
+        <div className="flex items-center gap-3 mb-5">
+          <div
+            className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0"
+            style={{ background: "rgba(239,68,68,0.15)", color: "#f87171" }}
+          >
+            {content.icon}
+          </div>
+          <div className="flex-1">
+            <h3
+              className="text-base font-semibold"
+              style={{ color: "var(--lk-fg)" }}
+            >
+              {content.title}
+            </h3>
+            <p className="text-xs mt-0.5" style={{ color: "var(--lk-fg2)" }}>
+              {content.message}
+            </p>
+          </div>
+          {onDismiss && (
+            <button
+              onClick={onDismiss}
+              className="shrink-0 w-7 h-7 rounded-lg flex items-center justify-center transition-colors"
+              style={{ color: "var(--lk-fg2)", background: "transparent" }}
+              onMouseEnter={(e) =>
+                (e.currentTarget.style.background = "var(--lk-bg3)")
+              }
+              onMouseLeave={(e) =>
+                (e.currentTarget.style.background = "transparent")
+              }
+              aria-label="Dismiss"
+            >
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          )}
+        </div>
+
+        {/* Instructions */}
+        <div
+          className="rounded-xl p-4 mb-5 space-y-3"
+          style={{
+            background: "var(--lk-bg)",
+            border: "1px solid var(--lk-border-color)",
+          }}
+        >
+          <p
+            className="text-xs font-semibold uppercase tracking-wide"
+            style={{ color: "var(--lk-fg2)" }}
           >
-            Try Again
-          </Button>
-        )}
+            How to fix this
+          </p>
+          {content.instructions.map((instruction: string, i: number) => (
+            <div key={i} className="flex items-start gap-3">
+              <span
+                className="w-5 h-5 rounded-full text-xs font-bold flex items-center justify-center shrink-0 mt-0.5"
+                style={{ background: "rgba(239,68,68,0.15)", color: "#f87171" }}
+              >
+                {i + 1}
+              </span>
+              <span
+                className="text-sm leading-relaxed"
+                style={{ color: "var(--lk-fg2)" }}
+              >
+                {instruction}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        {/* Actions */}
+        <div className="flex gap-2">
+          {onRetry && (
+            <button
+              onClick={onRetry}
+              className="flex-1 flex items-center justify-center gap-2 rounded-xl py-2.5 px-4 text-sm font-semibold text-white transition-all duration-150 hover:opacity-90 active:scale-95"
+              style={{
+                background: "linear-gradient(135deg, #ef4444, #f97316)",
+              }}
+              aria-label="Retry device access"
+            >
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2.5}
+                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                />
+              </svg>
+              Try Again
+            </button>
+          )}
+          {onDismiss && (
+            <button
+              onClick={onDismiss}
+              className="flex items-center justify-center gap-2 rounded-xl py-2.5 px-4 text-sm font-medium transition-all duration-150 active:scale-95"
+              style={{
+                background: "var(--lk-bg)",
+                color: "var(--lk-fg2)",
+                border: "1px solid var(--lk-border-color)",
+              }}
+              onMouseEnter={(e) =>
+                (e.currentTarget.style.color = "var(--lk-fg)")
+              }
+              onMouseLeave={(e) =>
+                (e.currentTarget.style.color = "var(--lk-fg2)")
+              }
+            >
+              Dismiss
+            </button>
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/components/meeting/CustomControlBar/DeviceMenuItem.tsx b/frontend/src/components/meeting/CustomControlBar/DeviceMenuItem.tsx
index ba3097f..e5c7ec1 100644
--- a/frontend/src/components/meeting/CustomControlBar/DeviceMenuItem.tsx
+++ b/frontend/src/components/meeting/CustomControlBar/DeviceMenuItem.tsx
@@ -1,17 +1,23 @@
 import React, { useState } from "react";
-import { MicrophoneIcon, CameraIcon, CheckmarkIcon } from "./deviceIcons";
+import {
+  MicrophoneIcon,
+  CameraIcon,
+  SpeakerIcon,
+  CheckmarkIcon,
+} from "./deviceIcons";
 import { DEVICE_LABELS } from "./deviceConstants";
 
 interface DeviceMenuItemProps {
   device: MediaDeviceInfo;
   isActive: boolean;
-  deviceType: "microphone" | "camera";
+  deviceType: "microphone" | "camera" | "speaker";
   onSelect: () => void;
 }
 
 const DEVICE_ICON_COMPONENTS = {
   microphone: MicrophoneIcon,
   camera: CameraIcon,
+  speaker: SpeakerIcon,
 };
 
 /**
diff --git a/frontend/src/components/meeting/CustomControlBar/Icons.tsx b/frontend/src/components/meeting/CustomControlBar/Icons.tsx
index 0634ca2..b954015 100644
--- a/frontend/src/components/meeting/CustomControlBar/Icons.tsx
+++ b/frontend/src/components/meeting/CustomControlBar/Icons.tsx
@@ -1,3 +1,6 @@
+/**
+ * Icons for the control bar buttons.
+ */
 import React from "react";
 
 export const ChevronDownIcon: React.FC = () => (
@@ -13,6 +16,23 @@ export const ChevronDownIcon: React.FC = () => (
   </svg>
 );
 
+export const SpeakerButtonIcon: React.FC = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+    <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
+    <path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
+  </svg>
+);
+
 export const LeaveIcon: React.FC = () => (
   <svg
     width="20"
diff --git a/frontend/src/components/meeting/CustomControlBar/SpeakerControl.tsx b/frontend/src/components/meeting/CustomControlBar/SpeakerControl.tsx
new file mode 100644
index 0000000..e39e052
--- /dev/null
+++ b/frontend/src/components/meeting/CustomControlBar/SpeakerControl.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import { useMediaDeviceSelect } from "@livekit/components-react";
+import { useOutsideClick } from "./useOutsideClick";
+import { DeviceMenu } from "./DeviceMenu";
+import { ChevronDownIcon, SpeakerButtonIcon } from "./Icons";
+
+/**
+ * Speaker (audio output) selector — no microphone toggle, just device pick.
+ * Uses audiooutput enumeration which does NOT require mic/camera permission.
+ */
+export const SpeakerControl: React.FC = () => {
+  const [showMenu, setShowMenu] = useState(false);
+  const menuRef = useOutsideClick(() => setShowMenu(false));
+
+  const { devices, activeDeviceId, setActiveMediaDevice } =
+    useMediaDeviceSelect({ kind: "audiooutput" });
+
+  return (
+    <div className="relative flex" ref={menuRef}>
+      {/* Static "speaker" indicator — not a toggle, just shows current state */}
+      <div
+        className="lk-button flex items-center justify-center"
+        style={{
+          minWidth: "48px",
+          minHeight: "48px",
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
+          borderRight: "none",
+          cursor: "default",
+          pointerEvents: "none",
+        }}
+        title="Speaker output"
+      >
+        <SpeakerButtonIcon />
+      </div>
+
+      <button
+        className="lk-button flex items-center justify-center bg-(--lk-bg2) min-w-5.5 min-h-12 rounded-tl-none rounded-bl-none p-0 -ml-px"
+        onClick={() => setShowMenu(!showMenu)}
+        title="Select speaker device"
+      >
+        <ChevronDownIcon />
+      </button>
+
+      <DeviceMenu
+        isOpen={showMenu}
+        devices={devices}
+        activeDeviceId={activeDeviceId || ""}
+        onSelectDevice={(id) => {
+          setActiveMediaDevice(id);
+          setShowMenu(false);
+        }}
+        onClose={() => setShowMenu(false)}
+        deviceType="speaker"
+      />
+    </div>
+  );
+};
diff --git a/frontend/src/components/meeting/CustomControlBar/deviceConstants.ts b/frontend/src/components/meeting/CustomControlBar/deviceConstants.ts
index 5780167..3cc3274 100644
--- a/frontend/src/components/meeting/CustomControlBar/deviceConstants.ts
+++ b/frontend/src/components/meeting/CustomControlBar/deviceConstants.ts
@@ -4,4 +4,5 @@
 export const DEVICE_LABELS = {
   microphone: "Default Microphone",
   camera: "Default Camera",
+  speaker: "Default Speaker",
 } as const;
diff --git a/frontend/src/components/meeting/CustomControlBar/deviceIcons.tsx b/frontend/src/components/meeting/CustomControlBar/deviceIcons.tsx
index 747781d..fe1a957 100644
--- a/frontend/src/components/meeting/CustomControlBar/deviceIcons.tsx
+++ b/frontend/src/components/meeting/CustomControlBar/deviceIcons.tsx
@@ -1,5 +1,5 @@
 /**
- * Device icon components for microphone and camera
+ * Device icon components for microphone, camera, and speaker
  */
 
 export const MicrophoneIcon = () => (
@@ -28,8 +28,24 @@ export const CameraIcon = () => (
     strokeWidth="2"
     style={{ flexShrink: 0, opacity: 0.7 }}
   >
-    <path d="m22 8-6 4 6 4V8Z" />
-    <rect width="14" height="12" x="2" y="6" rx="2" ry="2" />
+    <path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3Z" />
+    <circle cx="12" cy="13" r="3" />
+  </svg>
+);
+
+export const SpeakerIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    style={{ flexShrink: 0, opacity: 0.7 }}
+  >
+    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+    <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
+    <path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
   </svg>
 );
 
diff --git a/frontend/src/components/meeting/CustomControlBar/index.tsx b/frontend/src/components/meeting/CustomControlBar/index.tsx
index 09667fe..23ea1ad 100644
--- a/frontend/src/components/meeting/CustomControlBar/index.tsx
+++ b/frontend/src/components/meeting/CustomControlBar/index.tsx
@@ -1,19 +1,66 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import { TrackToggle, useLocalParticipant } from "@livekit/components-react";
+import { Track } from "livekit-client";
 import { MicrophoneControl } from "./MicrophoneControl";
 import { CameraControl } from "./CameraControl";
 import { ScreenShareButton } from "./ScreenShareButton";
 import { LeaveButton } from "./LeaveButton";
+import { useMeetingPreferences } from "../LiveKitMeetingRoom/MeetingPreferencesContext";
+
+const TOGGLE_STYLE: React.CSSProperties = {
+  minWidth: "48px",
+  minHeight: "48px",
+};
 
 /**
  * Custom Control Bar Component
- * Media controls + Leave centered
+ * In listener mode: renders plain TrackToggles (no useMediaDeviceSelect) at
+ * first so the browser permission dialog only appears on user click.
+ * Once the user grants mic/camera permission (track turns on), we swap to the
+ * full MicrophoneControl/CameraControl which includes the device-selector
+ * dropdown — this is safe because permission is already granted at that point.
  */
 export const CustomControlBar: React.FC = () => {
+  const prefs = useMeetingPreferences();
+  const isListener = prefs?.listenerMode === true;
+
+  const { localParticipant } = useLocalParticipant();
+  const [micPermGranted, setMicPermGranted] = useState(false);
+  const [camPermGranted, setCamPermGranted] = useState(false);
+
+  useEffect(() => {
+    if (localParticipant.isMicrophoneEnabled) setMicPermGranted(true);
+  }, [localParticipant.isMicrophoneEnabled]);
+
+  useEffect(() => {
+    if (localParticipant.isCameraEnabled) setCamPermGranted(true);
+  }, [localParticipant.isCameraEnabled]);
+
   return (
     <div className="lk-control-bar responsive-control-bar justify-center">
       <div className="lk-button-group gap-2 flex-nowrap">
-        <MicrophoneControl />
-        <CameraControl />
+        {/* Mic: plain toggle (no device dropdown) in listener mode until permission granted */}
+        {isListener && !micPermGranted ? (
+          <TrackToggle
+            source={Track.Source.Microphone}
+            showIcon={true}
+            style={TOGGLE_STYLE}
+          />
+        ) : (
+          <MicrophoneControl />
+        )}
+
+        {/* Camera */}
+        {isListener && !camPermGranted ? (
+          <TrackToggle
+            source={Track.Source.Camera}
+            showIcon={true}
+            style={TOGGLE_STYLE}
+          />
+        ) : (
+          <CameraControl />
+        )}
+
         <ScreenShareButton />
         <LeaveButton />
       </div>
diff --git a/frontend/src/components/meeting/CustomControlBar/types.ts b/frontend/src/components/meeting/CustomControlBar/types.ts
index e7a79ca..46932e5 100644
--- a/frontend/src/components/meeting/CustomControlBar/types.ts
+++ b/frontend/src/components/meeting/CustomControlBar/types.ts
@@ -4,7 +4,7 @@ export interface DeviceMenuProps {
   activeDeviceId: string;
   onSelectDevice: (deviceId: string) => void;
   onClose: () => void;
-  deviceType: "microphone" | "camera";
+  deviceType: "microphone" | "camera" | "speaker";
 }
 
 export interface DeviceControlProps {
diff --git a/frontend/src/components/meeting/LiveKitMeetingRoom/MeetingPreferencesContext.tsx b/frontend/src/components/meeting/LiveKitMeetingRoom/MeetingPreferencesContext.tsx
new file mode 100644
index 0000000..200f5f1
--- /dev/null
+++ b/frontend/src/components/meeting/LiveKitMeetingRoom/MeetingPreferencesContext.tsx
@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+import type { DevicePreferences } from "../../../pages/MeetingLobby";
+
+const MeetingPreferencesContext = createContext<DevicePreferences | null>(null);
+
+export const MeetingPreferencesProvider = MeetingPreferencesContext.Provider;
+
+export function useMeetingPreferences(): DevicePreferences | null {
+  return useContext(MeetingPreferencesContext);
+}
diff --git a/frontend/src/components/meeting/LiveKitMeetingRoom/index.tsx b/frontend/src/components/meeting/LiveKitMeetingRoom/index.tsx
index a0cf663..dde3ce4 100644
--- a/frontend/src/components/meeting/LiveKitMeetingRoom/index.tsx
+++ b/frontend/src/components/meeting/LiveKitMeetingRoom/index.tsx
@@ -8,6 +8,7 @@ import { meetingService } from "../../../services/api/meeting.service";
 import { MeetingView } from "./MeetingView";
 import { LIVEKIT_OPTIONS } from "./config";
 import { parseTokenMetadata, getDisconnectMessage } from "./utils";
+import { MeetingPreferencesProvider } from "./MeetingPreferencesContext";
 import type { LiveKitMeetingRoomProps } from "./types";
 
 const LiveKitMeetingRoom: React.FC<LiveKitMeetingRoomProps> = ({
@@ -59,24 +60,26 @@ const LiveKitMeetingRoom: React.FC<LiveKitMeetingRoomProps> = ({
 
   return (
     <div className="h-screen w-screen bg-[#0f1219]">
-      <LiveKitRoom
-        token={token}
-        serverUrl={livekitUrl}
-        connect={true}
-        audio={devicePreferences.audioEnabled}
-        video={devicePreferences.videoEnabled}
-        onDisconnected={handleDisconnect}
-        data-lk-theme="default"
-        style={{ height: "100%" }}
-        options={LIVEKIT_OPTIONS}
-      >
-        <MeetingView
-          meetingCode={meetingCode}
-          isAdmin={isAdmin}
-          meetingId={meetingId}
-          onDisconnect={onDisconnect}
-        />
-      </LiveKitRoom>
+      <MeetingPreferencesProvider value={devicePreferences}>
+        <LiveKitRoom
+          token={token}
+          serverUrl={livekitUrl}
+          connect={true}
+          audio={devicePreferences.audioEnabled}
+          video={devicePreferences.videoEnabled}
+          onDisconnected={handleDisconnect}
+          data-lk-theme="default"
+          style={{ height: "100%" }}
+          options={LIVEKIT_OPTIONS}
+        >
+          <MeetingView
+            meetingCode={meetingCode}
+            isAdmin={isAdmin}
+            meetingId={meetingId}
+            onDisconnect={onDisconnect}
+          />
+        </LiveKitRoom>
+      </MeetingPreferencesProvider>
     </div>
   );
 };
diff --git a/frontend/src/components/meeting/PermissionPrompt.tsx b/frontend/src/components/meeting/PermissionPrompt.tsx
index 7dd51b7..d87d95b 100644
--- a/frontend/src/components/meeting/PermissionPrompt.tsx
+++ b/frontend/src/components/meeting/PermissionPrompt.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { Button } from "../common/Button";
 
 interface PermissionPromptProps {
   onAllow: () => void;
@@ -7,74 +6,121 @@ interface PermissionPromptProps {
 }
 
 /**
- * PermissionPrompt - Banner explaining why camera/mic access is needed
- * Shows before requesting permissions
+ * PermissionPrompt - Modern dark modal for camera/mic permission
  */
 export const PermissionPrompt: React.FC<PermissionPromptProps> = ({
   onAllow,
   onDismiss,
 }) => {
   return (
-    <div className="mb-6 bg-blue-50 border-2 border-blue-200 rounded-xl p-6 shadow-lg animate-slide-up">
-      <div className="flex items-start gap-4">
-        {/* Icon */}
-        <div className="shrink-0 w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
-          <svg
-            className="w-6 h-6 text-blue-600"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
-            />
-          </svg>
-        </div>
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-md animate-fade-in">
+      <div
+        className="w-full max-w-sm animate-scale-up rounded-2xl overflow-hidden shadow-2xl"
+        style={{
+          background: "var(--lk-bg2)",
+          border: "1px solid var(--lk-border-color)",
+        }}
+      >
+        {/* Header gradient bar */}
+        <div className="h-1 w-full bg-linear-to-r from-blue-500 via-indigo-500 to-purple-500" />
 
-        {/* Content */}
-        <div className="flex-1">
-          <h3 className="text-lg font-bold text-gray-900 mb-2">
-            Camera and Microphone Access Required
-          </h3>
-          <p className="text-gray-700 mb-4 leading-relaxed">
-            To join this meeting, we need access to your camera and microphone.
-            Your browser will ask for permission in the next step.
-          </p>
+        <div className="p-6">
+          {/* Icon + Title */}
+          <div className="flex items-center gap-3 mb-5">
+            <div className="w-10 h-10 rounded-xl bg-blue-500/15 flex items-center justify-center shrink-0">
+              <svg
+                className="w-5 h-5 text-blue-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
+                />
+              </svg>
+            </div>
+            <div>
+              <h3
+                className="text-base font-semibold"
+                style={{ color: "var(--lk-fg)" }}
+              >
+                Camera &amp; Microphone Access
+              </h3>
+              <p className="text-xs mt-0.5" style={{ color: "var(--lk-fg2)" }}>
+                Permission required to join with audio/video
+              </p>
+            </div>
+          </div>
 
-          <div className="bg-white rounded-lg p-4 mb-4 border border-blue-100">
-            <p className="text-sm font-semibold text-gray-800 mb-2">
-              What to do next:
-            </p>
-            <ul className="space-y-2 text-sm text-gray-700">
-              <li className="flex items-start gap-2">
-                <span className="text-blue-600 font-bold shrink-0">1.</span>
-                <span>
-                  Click <strong>"Allow Access"</strong> button below
-                </span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-blue-600 font-bold shrink-0">2.</span>
-                <span>
-                  Your browser will show a permission popup at the top
+          {/* Steps */}
+          <div
+            className="rounded-xl p-4 mb-5 space-y-3"
+            style={{
+              background: "var(--lk-bg)",
+              border: "1px solid var(--lk-border-color)",
+            }}
+          >
+            {[
+              {
+                n: "1",
+                text: (
+                  <>
+                    Click{" "}
+                    <span
+                      className="font-semibold"
+                      style={{ color: "var(--lk-fg)" }}
+                    >
+                      "Allow Access"
+                    </span>{" "}
+                    below
+                  </>
+                ),
+              },
+              {
+                n: "2",
+                text: <>Browser shows a permission popup at the top</>,
+              },
+              {
+                n: "3",
+                text: (
+                  <>
+                    Click{" "}
+                    <span
+                      className="font-semibold"
+                      style={{ color: "var(--lk-fg)" }}
+                    >
+                      "Allow"
+                    </span>{" "}
+                    in that popup
+                  </>
+                ),
+              },
+            ].map(({ n, text }) => (
+              <div key={n} className="flex items-center gap-3">
+                <span
+                  className="w-5 h-5 rounded-full text-xs font-bold flex items-center justify-center shrink-0"
+                  style={{
+                    background: "rgba(99,102,241,0.2)",
+                    color: "#818cf8",
+                  }}
+                >
+                  {n}
                 </span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-blue-600 font-bold shrink-0">3.</span>
-                <span>
-                  Click <strong>"Allow"</strong> or <strong>"الموافقة"</strong>{" "}
-                  in the browser popup
+                <span className="text-sm" style={{ color: "var(--lk-fg2)" }}>
+                  {text}
                 </span>
-              </li>
-            </ul>
+              </div>
+            ))}
           </div>
 
-          {/* Privacy note */}
-          <div className="flex items-start gap-2 text-xs text-gray-600 mb-4">
+          {/* Privacy */}
+          <div className="flex items-start gap-2 mb-5">
             <svg
-              className="w-4 h-4 shrink-0 mt-0.5 text-gray-400"
+              className="w-3.5 h-3.5 mt-0.5 shrink-0"
+              style={{ color: "var(--lk-fg2)" }}
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -86,22 +132,26 @@ export const PermissionPrompt: React.FC<PermissionPromptProps> = ({
                 d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
               />
             </svg>
-            <span>
-              Your privacy is important. We only access your devices during the
-              meeting and never record without your consent.
+            <span
+              className="text-xs leading-relaxed"
+              style={{ color: "var(--lk-fg2)" }}
+            >
+              We only use your devices during the meeting and never record
+              without your consent.
             </span>
           </div>
 
           {/* Actions */}
-          <div className="flex gap-3">
-            <Button
+          <div className="flex gap-2">
+            <button
               onClick={onAllow}
-              variant="primary"
-              size="lg"
-              className="shadow-md hover:shadow-lg transition-shadow"
+              className="flex-1 flex items-center justify-center gap-2 rounded-xl py-2.5 px-4 text-sm font-semibold text-white transition-all duration-150 hover:opacity-90 active:scale-95"
+              style={{
+                background: "linear-gradient(135deg, #3b82f6, #6366f1)",
+              }}
             >
               <svg
-                className="w-5 h-5 mr-2"
+                className="w-4 h-4"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -109,21 +159,50 @@ export const PermissionPrompt: React.FC<PermissionPromptProps> = ({
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  strokeWidth={2}
+                  strokeWidth={2.5}
                   d="M5 13l4 4L19 7"
                 />
               </svg>
               Allow Access
-            </Button>
+            </button>
+
             {onDismiss && (
-              <Button
+              <button
                 onClick={onDismiss}
-                variant="secondary"
-                size="lg"
-                className="text-gray-600"
+                className="flex items-center justify-center gap-2 rounded-xl py-2.5 px-4 text-sm font-medium transition-all duration-150 active:scale-95"
+                style={{
+                  background: "var(--lk-bg)",
+                  color: "var(--lk-fg2)",
+                  border: "1px solid var(--lk-border-color)",
+                }}
+                onMouseEnter={(e) =>
+                  (e.currentTarget.style.color = "var(--lk-fg)")
+                }
+                onMouseLeave={(e) =>
+                  (e.currentTarget.style.color = "var(--lk-fg2)")
+                }
               >
-                Not Now
-              </Button>
+                <svg
+                  className="w-4 h-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <polygon
+                    points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                  />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15.54 8.46a5 5 0 010 7.07"
+                  />
+                </svg>
+                Listen Only
+              </button>
             )}
           </div>
         </div>
diff --git a/frontend/src/hooks/useLobbyDevices/index.ts b/frontend/src/hooks/useLobbyDevices/index.ts
index 3e61384..75d4386 100644
--- a/frontend/src/hooks/useLobbyDevices/index.ts
+++ b/frontend/src/hooks/useLobbyDevices/index.ts
@@ -57,6 +57,7 @@ export function useLobbyDevices(meetingReady: boolean): LobbyDeviceState {
     meetingReady,
     permissionsGranted: mediaStream.permissionsGranted,
     setupDevicesAndEnumerate,
+    enumerateDevices: deviceEnumeration.enumerateDevices,
     stopStream: mediaStream.stopStream,
     cleanupAnalyzer: audioAnalyzer.cleanup,
   });
@@ -77,6 +78,7 @@ export function useLobbyDevices(meetingReady: boolean): LobbyDeviceState {
     permissionsGranted: mediaStream.permissionsGranted,
     showPermissionButton,
     showPermissionPrompt: deviceLifecycle.showPermissionPrompt,
+    listenerMode: deviceLifecycle.listenerMode,
     audioLevel,
     error: mediaStream.error,
     deviceError: mediaStream.deviceError,
diff --git a/frontend/src/hooks/useLobbyDevices/types.ts b/frontend/src/hooks/useLobbyDevices/types.ts
index 1d8f66b..c8ce596 100644
--- a/frontend/src/hooks/useLobbyDevices/types.ts
+++ b/frontend/src/hooks/useLobbyDevices/types.ts
@@ -12,6 +12,7 @@ export interface LobbyDeviceState {
   micEnabled: boolean;
   stream: MediaStream | null;
   permissionsGranted: boolean;
+  listenerMode: boolean;
   showPermissionButton: boolean;
   showPermissionPrompt: boolean;
   audioLevel: number;
diff --git a/frontend/src/hooks/useLobbyDevices/useDeviceLifecycle.ts b/frontend/src/hooks/useLobbyDevices/useDeviceLifecycle.ts
index 2a03703..8523348 100644
--- a/frontend/src/hooks/useLobbyDevices/useDeviceLifecycle.ts
+++ b/frontend/src/hooks/useLobbyDevices/useDeviceLifecycle.ts
@@ -5,12 +5,14 @@ interface UseDeviceLifecycleProps {
   meetingReady: boolean;
   permissionsGranted: boolean;
   setupDevicesAndEnumerate: () => void;
+  enumerateDevices: () => Promise<unknown>;
   stopStream: () => void;
   cleanupAnalyzer: () => void;
 }
 
 export interface DeviceLifecycleReturn {
   showPermissionPrompt: boolean;
+  listenerMode: boolean;
   handleAllowPermissions: () => void;
   handleDismissPrompt: () => void;
 }
@@ -23,12 +25,14 @@ export function useDeviceLifecycle({
   meetingReady,
   permissionsGranted,
   setupDevicesAndEnumerate,
+  enumerateDevices,
   stopStream,
   cleanupAnalyzer,
 }: UseDeviceLifecycleProps): DeviceLifecycleReturn {
   const [showPermissionPrompt, setShowPermissionPrompt] = useState(false);
   const [promptDismissed, setPromptDismissed] = useState(false);
   const [permissionRequested, setPermissionRequested] = useState(false);
+  const [listenerMode, setListenerMode] = useState(false);
 
   useEffect(() => {
     if (
@@ -52,6 +56,10 @@ export function useDeviceLifecycle({
   const handleDismissPrompt = () => {
     setShowPermissionPrompt(false);
     setPromptDismissed(true);
+    setListenerMode(true);
+    // Enumerate devices without a stream so audioOutputDevices is populated
+    // (audiooutput enumeration doesn't require mic/camera permission)
+    enumerateDevices().catch(() => {});
   };
 
   useEffect(() => {
@@ -64,6 +72,7 @@ export function useDeviceLifecycle({
 
   return {
     showPermissionPrompt,
+    listenerMode,
     handleAllowPermissions,
     handleDismissPrompt,
   };
diff --git a/frontend/src/pages/MeetingLobby/DeviceControls.tsx b/frontend/src/pages/MeetingLobby/DeviceControls.tsx
index f4ec1c8..0b5adff 100644
--- a/frontend/src/pages/MeetingLobby/DeviceControls.tsx
+++ b/frontend/src/pages/MeetingLobby/DeviceControls.tsx
@@ -16,38 +16,51 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
   micEnabled,
   cameraEnabled,
   audioLevel,
+  listenerMode = false,
 }) => {
   return (
     <div className="space-y-4">
       {/* Device selection dropdowns */}
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-        <DeviceSelector
-          devices={audioDevices}
-          selectedId={selectedMic}
-          onSelect={setSelectedMic}
-          disabled={!micEnabled}
-          ariaLabel="Select microphone device"
-          fallbackLabel="Microphone"
-        />
-        <DeviceSelector
-          devices={audioOutputDevices}
-          selectedId={selectedSpeaker}
-          onSelect={setSelectedSpeaker}
-          ariaLabel="Select speaker device"
-          fallbackLabel="Speaker"
-        />
-        <DeviceSelector
-          devices={videoDevices}
-          selectedId={selectedCamera}
-          onSelect={setSelectedCamera}
-          disabled={!cameraEnabled}
-          ariaLabel="Select camera device"
-          fallbackLabel="Camera"
-        />
+      <div
+        className={
+          listenerMode
+            ? "flex justify-center"
+            : "grid grid-cols-1 sm:grid-cols-3 gap-3"
+        }
+      >
+        {!listenerMode && (
+          <DeviceSelector
+            devices={audioDevices}
+            selectedId={selectedMic}
+            onSelect={setSelectedMic}
+            disabled={!micEnabled}
+            ariaLabel="Select microphone device"
+            fallbackLabel="Microphone"
+          />
+        )}
+        <div className={listenerMode ? "w-full" : ""}>
+          <DeviceSelector
+            devices={audioOutputDevices}
+            selectedId={selectedSpeaker}
+            onSelect={setSelectedSpeaker}
+            ariaLabel="Select speaker device"
+            fallbackLabel="Speaker"
+          />
+        </div>
+        {!listenerMode && (
+          <DeviceSelector
+            devices={videoDevices}
+            selectedId={selectedCamera}
+            onSelect={setSelectedCamera}
+            disabled={!cameraEnabled}
+            ariaLabel="Select camera device"
+            fallbackLabel="Camera"
+          />
+        )}
       </div>
 
       {/* Microphone level indicator */}
-      {micEnabled && (
+      {!listenerMode && micEnabled && (
         <AudioLevelIndicator level={audioLevel} variant="horizontal" />
       )}
     </div>
diff --git a/frontend/src/pages/MeetingLobby/ErrorDisplay.tsx b/frontend/src/pages/MeetingLobby/ErrorDisplay.tsx
index e85daa4..c3ce1d4 100644
--- a/frontend/src/pages/MeetingLobby/ErrorDisplay.tsx
+++ b/frontend/src/pages/MeetingLobby/ErrorDisplay.tsx
@@ -1,4 +1,3 @@
-import { ErrorMessage } from "../../components/common/ErrorMessage";
 import { DeviceErrorMessage } from "../../components/common/DeviceErrorMessage";
 
 interface ErrorDisplayProps {
@@ -18,11 +17,14 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
 }) => {
   if (deviceError) {
     return (
-      <div className="mb-6">
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-md">
         <DeviceErrorMessage
           type={deviceError}
           onRetry={() => {
-            onClearDeviceError();
+            // Call retry directly without clearing the error first.
+            // setupDevices clears the error internally on success,
+            // or re-sets it on failure. The browser's native permission
+            // dialog appears on top of the modal, so the user keeps context.
             onRetryDeviceAccess();
           }}
           onDismiss={onClearDeviceError}
@@ -33,8 +35,74 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
 
   if (error) {
     return (
-      <div className="mb-6">
-        <ErrorMessage message={error} onRetry={onClearError} />
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-md">
+        <div
+          className="w-full max-w-sm animate-scale-up rounded-2xl overflow-hidden shadow-2xl"
+          style={{
+            background: "var(--lk-bg2)",
+            border: "1px solid var(--lk-border-color)",
+          }}
+        >
+          <div className="h-1 w-full bg-linear-to-r from-red-500 via-orange-500 to-amber-500" />
+          <div className="p-6">
+            <div className="flex items-center gap-3 mb-4">
+              <div
+                className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0"
+                style={{ background: "rgba(239,68,68,0.15)", color: "#f87171" }}
+              >
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                  />
+                </svg>
+              </div>
+              <div className="flex-1">
+                <h3
+                  className="text-base font-semibold"
+                  style={{ color: "var(--lk-fg)" }}
+                >
+                  Something went wrong
+                </h3>
+                <p
+                  className="text-xs mt-0.5"
+                  style={{ color: "var(--lk-fg2)" }}
+                >
+                  {error}
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={onClearError}
+              className="w-full flex items-center justify-center gap-2 rounded-xl py-2.5 px-4 text-sm font-semibold text-white transition-all duration-150 hover:opacity-90 active:scale-95"
+              style={{
+                background: "linear-gradient(135deg, #ef4444, #f97316)",
+              }}
+            >
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2.5}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+              Dismiss
+            </button>
+          </div>
+        </div>
       </div>
     );
   }
diff --git a/frontend/src/pages/MeetingLobby/JoinButton.tsx b/frontend/src/pages/MeetingLobby/JoinButton.tsx
index 0a707ba..5f833ae 100644
--- a/frontend/src/pages/MeetingLobby/JoinButton.tsx
+++ b/frontend/src/pages/MeetingLobby/JoinButton.tsx
@@ -5,28 +5,32 @@ import type { JoinButtonProps } from "./types";
 export const JoinButton: React.FC<JoinButtonProps> = ({
   isJoining,
   permissionsGranted,
+  listenerMode,
   displayName,
   isAuthenticated,
   onClick,
 }) => {
+  const canJoin = permissionsGranted || listenerMode;
   const isDisabled =
-    isJoining ||
-    !permissionsGranted ||
-    (!isAuthenticated && !displayName.trim());
+    isJoining || !canJoin || (!isAuthenticated && !displayName.trim());
 
   return (
     <div className="relative group mt-2">
       <Button
-        variant="primary"
+        variant={listenerMode && !permissionsGranted ? "secondary" : "primary"}
         size="lg"
         fullWidth
         onClick={onClick}
         disabled={isDisabled}
         isLoading={isJoining}
       >
-        {isJoining ? "Joining..." : "Join Now"}
+        {isJoining
+          ? "Joining..."
+          : listenerMode && !permissionsGranted
+            ? "Join as Listener"
+            : "Join Now"}
       </Button>
-      {!isAuthenticated && !displayName.trim() && permissionsGranted && (
+      {!isAuthenticated && !displayName.trim() && canJoin && (
         <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-10">
           Enter your name first
           <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900"></div>
diff --git a/frontend/src/pages/MeetingLobby/LobbyContent.tsx b/frontend/src/pages/MeetingLobby/LobbyContent.tsx
index c20d758..480c261 100644
--- a/frontend/src/pages/MeetingLobby/LobbyContent.tsx
+++ b/frontend/src/pages/MeetingLobby/LobbyContent.tsx
@@ -52,6 +52,7 @@ export const LobbyContent: React.FC<LobbyContentProps> = ({
         micEnabled={devices.micEnabled}
         cameraEnabled={devices.cameraEnabled}
         audioLevel={devices.audioLevel}
+        listenerMode={devices.listenerMode}
       />
 
       {!isAuthenticated && (
@@ -65,17 +66,24 @@ export const LobbyContent: React.FC<LobbyContentProps> = ({
       <JoinButton
         isJoining={isJoining}
         permissionsGranted={devices.permissionsGranted}
+        listenerMode={devices.listenerMode}
         displayName={displayName}
         isAuthenticated={isAuthenticated}
         onClick={onJoinClick}
       />
 
-      {!devices.permissionsGranted && (
+      {!devices.permissionsGranted && !devices.listenerMode && (
         <p className="text-xs text-center text-gray-400">
           Please allow camera and microphone access to join
         </p>
       )}
 
+      {devices.listenerMode && !devices.permissionsGranted && (
+        <p className="text-xs text-center text-gray-400">
+          Listener mode — you can hear others but won't be heard or seen
+        </p>
+      )}
+
       {meetingData && (
         <MeetingInfoBar
           meetingCode={meetingData.meeting_code}
diff --git a/frontend/src/pages/MeetingLobby/index.tsx b/frontend/src/pages/MeetingLobby/index.tsx
index 556ae10..be78c62 100644
--- a/frontend/src/pages/MeetingLobby/index.tsx
+++ b/frontend/src/pages/MeetingLobby/index.tsx
@@ -64,26 +64,42 @@ export const MeetingLobby: React.FC<MeetingLobbyProps> = ({
     <div className="min-h-screen bg-gray-900 text-white flex items-center justify-center p-4 relative">
       {isJoining && <JoiningOverlay />}
 
-      <div className="w-full max-w-2xl">
-        <ErrorDisplay
-          deviceError={devices.deviceError}
-          error={displayError}
-          onClearDeviceError={devices.clearDeviceError}
-          onRetryDeviceAccess={devices.retryDeviceAccess}
-          onClearError={() => {
-            setLobbyError("");
-            setMeetingError("");
-            devices.clearError();
-          }}
-        />
+      {/* Fixed modal overlays - rendered outside content wrapper */}
+      <ErrorDisplay
+        deviceError={devices.deviceError}
+        error={displayError}
+        onClearDeviceError={devices.clearDeviceError}
+        onRetryDeviceAccess={async () => {
+          // Browsers require getUserMedia to be called synchronously within the
+          // user gesture (click). Calling it here directly — before any async
+          // state update — guarantees the native permission dialog appears.
+          try {
+            const stream = await navigator.mediaDevices.getUserMedia({
+              audio: true,
+              video: true,
+            });
+            // Stop tracks immediately — the full setup below will request again
+            stream.getTracks().forEach((t) => t.stop());
+          } catch {
+            // Ignored — retryDeviceAccess below will handle and set the error
+          }
+          devices.retryDeviceAccess();
+        }}
+        onClearError={() => {
+          setLobbyError("");
+          setMeetingError("");
+          devices.clearError();
+        }}
+      />
 
-        {devices.showPermissionPrompt && (
-          <PermissionPrompt
-            onAllow={devices.handleAllowPermissions}
-            onDismiss={devices.handleDismissPrompt}
-          />
-        )}
+      {devices.showPermissionPrompt && (
+        <PermissionPrompt
+          onAllow={devices.handleAllowPermissions}
+          onDismiss={devices.handleDismissPrompt}
+        />
+      )}
 
+      <div className="w-full max-w-2xl">
         <LobbyContent
           devices={devices}
           displayName={displayName}
diff --git a/frontend/src/pages/MeetingLobby/types.ts b/frontend/src/pages/MeetingLobby/types.ts
index 36948ab..94cc898 100644
--- a/frontend/src/pages/MeetingLobby/types.ts
+++ b/frontend/src/pages/MeetingLobby/types.ts
@@ -4,6 +4,7 @@ export interface DevicePreferences {
   audioOutputDeviceId?: string;
   videoEnabled: boolean;
   audioEnabled: boolean;
+  listenerMode?: boolean;
 }
 
 export interface TokenData {
@@ -41,11 +42,13 @@ export interface DeviceControlsProps {
   micEnabled: boolean;
   cameraEnabled: boolean;
   audioLevel: number;
+  listenerMode?: boolean;
 }
 
 export interface JoinButtonProps {
   isJoining: boolean;
   permissionsGranted: boolean;
+  listenerMode: boolean;
   displayName: string;
   isAuthenticated: boolean;
   onClick: () => void;
diff --git a/frontend/src/pages/MeetingLobby/useJoinHandlers.ts b/frontend/src/pages/MeetingLobby/useJoinHandlers.ts
index 78c5a45..4b69b65 100644
--- a/frontend/src/pages/MeetingLobby/useJoinHandlers.ts
+++ b/frontend/src/pages/MeetingLobby/useJoinHandlers.ts
@@ -38,8 +38,11 @@ export function useJoinHandlers(
         videoDeviceId: devices.selectedCamera,
         audioDeviceId: devices.selectedMic,
         audioOutputDeviceId: devices.selectedSpeaker,
-        videoEnabled: devices.cameraEnabled,
-        audioEnabled: devices.micEnabled,
+        videoEnabled: devices.permissionsGranted
+          ? devices.cameraEnabled
+          : false,
+        audioEnabled: devices.permissionsGranted ? devices.micEnabled : false,
+        listenerMode: devices.listenerMode && !devices.permissionsGranted,
       };
 
       const response = await requestToJoin(

From 05c42564637153f5675f510364d311196575425c Mon Sep 17 00:00:00 2001
From: Amr3011 <amroosamafakharany@gmail.com>
Date: Thu, 5 Mar 2026 21:34:40 +0200
Subject: [PATCH 6/6] refactor: reorganize MeetingPreferences context and
 simplify state management in CustomControlBar

---
 .../meeting/CustomControlBar/index.tsx        | 26 +++++++++++--------
 .../MeetingPreferencesContext.tsx             |  9 +------
 .../useMeetingPreferences.ts                  |  9 +++++++
 3 files changed, 25 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/components/meeting/LiveKitMeetingRoom/useMeetingPreferences.ts

diff --git a/frontend/src/components/meeting/CustomControlBar/index.tsx b/frontend/src/components/meeting/CustomControlBar/index.tsx
index 23ea1ad..62cb52f 100644
--- a/frontend/src/components/meeting/CustomControlBar/index.tsx
+++ b/frontend/src/components/meeting/CustomControlBar/index.tsx
@@ -1,11 +1,11 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { TrackToggle, useLocalParticipant } from "@livekit/components-react";
 import { Track } from "livekit-client";
 import { MicrophoneControl } from "./MicrophoneControl";
 import { CameraControl } from "./CameraControl";
 import { ScreenShareButton } from "./ScreenShareButton";
 import { LeaveButton } from "./LeaveButton";
-import { useMeetingPreferences } from "../LiveKitMeetingRoom/MeetingPreferencesContext";
+import { useMeetingPreferences } from "../LiveKitMeetingRoom/useMeetingPreferences";
 
 const TOGGLE_STYLE: React.CSSProperties = {
   minWidth: "48px",
@@ -25,16 +25,20 @@ export const CustomControlBar: React.FC = () => {
   const isListener = prefs?.listenerMode === true;
 
   const { localParticipant } = useLocalParticipant();
-  const [micPermGranted, setMicPermGranted] = useState(false);
-  const [camPermGranted, setCamPermGranted] = useState(false);
-
-  useEffect(() => {
-    if (localParticipant.isMicrophoneEnabled) setMicPermGranted(true);
-  }, [localParticipant.isMicrophoneEnabled]);
+  const [micPermGranted, setMicPermGranted] = useState(
+    () => localParticipant.isMicrophoneEnabled,
+  );
+  const [camPermGranted, setCamPermGranted] = useState(
+    () => localParticipant.isCameraEnabled,
+  );
 
-  useEffect(() => {
-    if (localParticipant.isCameraEnabled) setCamPermGranted(true);
-  }, [localParticipant.isCameraEnabled]);
+  // Latch: once permission is granted it stays granted even if the track is
+  // later disabled. setState during render is the React-approved pattern for
+  // deriving state from incoming values (avoids the setState-in-effect issue).
+  if (localParticipant.isMicrophoneEnabled && !micPermGranted)
+    setMicPermGranted(true);
+  if (localParticipant.isCameraEnabled && !camPermGranted)
+    setCamPermGranted(true);
 
   return (
     <div className="lk-control-bar responsive-control-bar justify-center">
diff --git a/frontend/src/components/meeting/LiveKitMeetingRoom/MeetingPreferencesContext.tsx b/frontend/src/components/meeting/LiveKitMeetingRoom/MeetingPreferencesContext.tsx
index 200f5f1..4887324 100644
--- a/frontend/src/components/meeting/LiveKitMeetingRoom/MeetingPreferencesContext.tsx
+++ b/frontend/src/components/meeting/LiveKitMeetingRoom/MeetingPreferencesContext.tsx
@@ -1,10 +1,3 @@
-import { createContext, useContext } from "react";
-import type { DevicePreferences } from "../../../pages/MeetingLobby";
-
-const MeetingPreferencesContext = createContext<DevicePreferences | null>(null);
+import { MeetingPreferencesContext } from "./useMeetingPreferences";
 
 export const MeetingPreferencesProvider = MeetingPreferencesContext.Provider;
-
-export function useMeetingPreferences(): DevicePreferences | null {
-  return useContext(MeetingPreferencesContext);
-}
diff --git a/frontend/src/components/meeting/LiveKitMeetingRoom/useMeetingPreferences.ts b/frontend/src/components/meeting/LiveKitMeetingRoom/useMeetingPreferences.ts
new file mode 100644
index 0000000..1d2b989
--- /dev/null
+++ b/frontend/src/components/meeting/LiveKitMeetingRoom/useMeetingPreferences.ts
@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+import type { DevicePreferences } from "../../../pages/MeetingLobby";
+
+export const MeetingPreferencesContext =
+  createContext<DevicePreferences | null>(null);
+
+export function useMeetingPreferences(): DevicePreferences | null {
+  return useContext(MeetingPreferencesContext);
+}