diff --git a/backend/src/server.ts b/backend/src/server.ts
index a76848d..4cabd64 100644
--- a/backend/src/server.ts
+++ b/backend/src/server.ts
@@ -26,10 +26,10 @@ io.on("connection", (socket) => {
   console.log(`🟢 User connected: ${socket.id}`);
 
   // ---------------- Join Room ----------------
-  socket.on("join-room", async (roomId: string, userName: string) => {
-    try {
-      socket.join(roomId);
-      console.log(`👥 ${userName} joined room ${roomId}`);
+  socket.on("join-room", async ({ roomId, userName }: { roomId: string; userName: string }) => {
+  try {
+    socket.join(roomId);
+    console.log(`👥 ${userName} joined room ${roomId}`);
 
       // Notify others
       io.to(roomId).emit("user-joined", { userName, roomId });
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 87ea27c..c06542a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -15,6 +15,7 @@ import InRoom from "./pages/InRoom.js";
 import CreateRoomLobby from "./pages/CreateRoomLobby.js";
 import CreateRoom from "./pages/CreateRoom.js";
 import ActiveSessions from "./pages/ActiveSessions.js";
+import InRoomWrapper from "./pages/InRoomWrapper.js";
 const queryClient = new QueryClient();
 
 const App = () => (
@@ -32,7 +33,7 @@ const App = () => (
             <Route path="/oauth-success" element={<OAuthSuccess />} />
             <Route path="/create-room" element={<CreateRoom />} />   {/* ✅ */}
             <Route path="/join-room" element={<JoinRoom />} />       {/* ✅ */}
-            <Route path="/room/:roomName" element={<InRoom />} />
+            <Route path="/room/:roomName" element={<InRoomWrapper />} />
             <Route path="/lobby/:roomId" element={<CreateRoomLobby />} />
             <Route path="/sessions" element={<ActiveSessions />} />
           </Routes>
diff --git a/frontend/src/pages/CreateRoomLobby.tsx b/frontend/src/pages/CreateRoomLobby.tsx
index b61995d..80315a2 100644
--- a/frontend/src/pages/CreateRoomLobby.tsx
+++ b/frontend/src/pages/CreateRoomLobby.tsx
@@ -29,7 +29,7 @@ export default function CreateRoomLobby() {
             }
         };
         fetchRoom();
-    }, [roomId]);
+    }, [roomId,roomName]);
 
     // Copy join link to clipboard
     const handleCopyLink = () => {
@@ -73,7 +73,7 @@ export default function CreateRoomLobby() {
                 </p>
 
                 <Button
-                    onClick={() => navigate(`/room/${roomId}`)}
+                    onClick={() => navigate(`/room/${roomName}`)}
                     className="mt-6 w-full bg-green-600 hover:bg-green-700 text-white font-medium py-3 rounded-lg shadow-md"
                 >
                     Go to Room
diff --git a/frontend/src/pages/InRoom.tsx b/frontend/src/pages/InRoom.tsx
index 83325ad..23aff1a 100644
--- a/frontend/src/pages/InRoom.tsx
+++ b/frontend/src/pages/InRoom.tsx
@@ -1,182 +1,267 @@
 import React, { useState, useEffect, useRef } from "react";
-import {
-    Mic,
-    MicOff,
-    Video,
-    VideoOff,
-    PhoneOff,
-    Users,
-    MessageSquare,
-} from "lucide-react";
+import { io, Socket } from "socket.io-client";
+import { Mic, MicOff, Video, VideoOff, PhoneOff, Users, MessageSquare } from "lucide-react";
 import { motion } from "framer-motion";
+import { HotKeys } from "react-hotkeys";
 
-const InRoom: React.FC<{ roomName: string }> = ({ roomName }) => {
-    const [micOn, setMicOn] = useState(true);
-    const [videoOn, setVideoOn] = useState(true);
-    const [showChat, setShowChat] = useState(false);
-
-    const localVideoRef = useRef<HTMLVideoElement | null>(null);
-    const remoteVideoRef = useRef<HTMLVideoElement | null>(null);
-    const [localStream, setLocalStream] = useState<MediaStream | null>(null);
-
-    // 🔹 STEP 1: Initialize camera and mic on join
-    useEffect(() => {
-        document.title = `${roomName} | PeerCall`;
-
-        const initMedia = async () => {
-            try {
-                const stream = await navigator.mediaDevices.getUserMedia({
-                    video: true,
-                    audio: true,
-                });
-                setLocalStream(stream);
-                if (localVideoRef.current) {
-                    localVideoRef.current.srcObject = stream;
-                }
-            } catch (err) {
-                console.error("Error accessing camera/mic:", err);
-                alert("Please allow camera and microphone permissions.");
-            }
-        };
-
-        initMedia();
-
-        // Cleanup when leaving room
-        return () => {
-            localStream?.getTracks().forEach((track) => track.stop());
-        };
-    }, [roomName]);
-
-    // 🔹 STEP 2: Toggle mic
-    const handleToggleMic = () => {
-        if (!localStream) return;
-        localStream.getAudioTracks().forEach((track) => {
-            track.enabled = !track.enabled;
-        });
-        setMicOn((prev) => !prev);
+const keyMap = {
+  TOGGLE_MIC: "ctrl+m",
+  TOGGLE_VIDEO: "ctrl+v",
+  TOGGLE_CHAT: "ctrl+c",
+};
+
+const SOCKET_URL = "http://localhost:3000";
+
+const InRoom: React.FC<{ roomId: string; userName: string }> = ({ roomId, userName }) => {
+  const [micOn, setMicOn] = useState(true);
+  const [videoOn, setVideoOn] = useState(true);
+  const [showChat, setShowChat] = useState(false);
+  const [messages, setMessages] = useState<{ user: string; text: string; time?: string }[]>([]);
+  const [chatInput, setChatInput] = useState("");
+
+  const socketRef = useRef<Socket | null>(null);
+  const localVideoRef = useRef<HTMLVideoElement | null>(null);
+  const mediaStreamRef = useRef<MediaStream | null>(null);
+  const chatEndRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    document.title = `${roomId} | PeerCall`;
+
+    const socket = io(SOCKET_URL);
+    socketRef.current = socket;
+
+    socket.emit("join-room", { roomId, userName });
+    console.log("🟢 Joined room:", roomId, "as", userName);
+
+    socket.on("chat-history", (history: any[]) => {
+      setMessages(
+        history.map((m) => ({
+          roomId: m.roomId,
+          user: m.user,
+          text: m.text,
+          time: m.timestamp,
+        }))
+      );
+    });
+
+    socket.on("chat-message", (msg: any) => {
+      setMessages((prev) => [
+        ...prev,
+        { roomIduser: msg.user, text: msg.text, time: msg.timestamp || new Date().toISOString() },
+      ]);
+    });
+
+    socket.on("user-joined", ({ userName ,roomId}) => {
+      setMessages((prev) => [
+        ...prev,
+        { user: "System", text: `${userName} joined the room ${roomId}` },
+      ]);
+    });
+
+    socket.on("user-left", ({ userName }) => {
+      setMessages((prev) => [
+        ...prev,
+        { user: "System", text: `${userName} left the room` },
+      ]);
+    });
+
+    return () => {
+      socket.emit("leave-room", { roomId, userName });
+      socket.disconnect();
     };
+  }, [roomId, userName]);
 
-    // 🔹 STEP 3: Toggle video
-    const handleToggleVideo = () => {
-        if (!localStream) return;
-        localStream.getVideoTracks().forEach((track) => {
-            track.enabled = !track.enabled;
-        });
-        setVideoOn((prev) => !prev);
+  useEffect(() => {
+    const initMedia = async () => {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
+        mediaStreamRef.current = stream;
+        if (localVideoRef.current) localVideoRef.current.srcObject = stream;
+
+        setMicOn(stream.getAudioTracks().some((t) => t.enabled));
+        setVideoOn(stream.getVideoTracks().some((t) => t.enabled));
+      } catch (err) {
+        console.error("Failed to get user media:", err);
+        setMicOn(false);
+        setVideoOn(false);
+      }
     };
+    initMedia();
 
-    // 🔹 STEP 4: End call (for now just stop media)
-    const handleEndCall = () => {
-        localStream?.getTracks().forEach((track) => track.stop());
-        window.location.href = "/"; // or navigate to dashboard/home
+    return () => {
+      mediaStreamRef.current?.getTracks().forEach((t) => t.stop());
     };
+  }, []);
 
-    return (
-        <div className="h-screen w-full bg-gray-950 text-white flex flex-col">
-            {/* Header */}
-            <header className="p-4 border-b border-gray-800 flex justify-between items-center">
-                <h1 className="text-xl font-semibold">Room: {roomName}</h1>
-                <div className="flex items-center gap-3 text-gray-400">
-                    <Users className="w-5 h-5" />
-                    <span>2 Participants</span>
-                </div>
-            </header>
-
-            {/* Main Video Area */}
-            <div className="flex-1 flex flex-col md:flex-row">
-                {/* Video Grid */}
-                <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4 p-4">
-                    {/* Local Video */}
-                    <div className="bg-black rounded-2xl relative">
-                        <video
-                            ref={localVideoRef}
-                            autoPlay
-                            muted
-                            playsInline
-                            className="w-full h-full object-cover rounded-2xl"
-                        />
-                        <span className="absolute bottom-2 left-2 bg-gray-800 px-2 py-1 rounded text-sm">
-                            You
-                        </span>
-                    </div>
-
-                    {/* Remote Video */}
-                    <div className="bg-black rounded-2xl relative">
-                        <video
-                            ref={remoteVideoRef}
-                            autoPlay
-                            playsInline
-                            className="w-full h-full object-cover rounded-2xl"
-                        />
-                        <span className="absolute bottom-2 left-2 bg-gray-800 px-2 py-1 rounded text-sm">
-                            Peer
-                        </span>
-                    </div>
-                </div>
-
-                {/* Chat Panel (toggle) */}
-                {showChat && (
-                    <motion.div
-                        initial={{ x: 200, opacity: 0 }}
-                        animate={{ x: 0, opacity: 1 }}
-                        exit={{ x: 200, opacity: 0 }}
-                        className="w-full md:w-80 bg-gray-900 border-l border-gray-800 flex flex-col"
-                    >
-                        <div className="p-3 border-b border-gray-800 font-medium">
-                            In-call Chat
-                        </div>
-                        <div className="flex-1 overflow-y-auto p-3 text-gray-300">
-                            <p className="text-sm">No messages yet...</p>
+  const sendMessage = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!chatInput.trim() || !socketRef.current) return;
+
+    const message = {
+      roomId,
+      user: userName,
+      text: chatInput.trim(),
+      timestamp: new Date().toISOString(),
+    };
+
+    socketRef.current.emit("chat-message", message);
+    setMessages((s) => [...s, message]);
+    setChatInput("");
+  };
+
+  useEffect(() => {
+    chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, showChat]);
+
+  const handlers = {
+    TOGGLE_MIC: (e: KeyboardEvent) => {
+      e.preventDefault();
+      toggleMic();
+    },
+    TOGGLE_VIDEO: (e: KeyboardEvent) => {
+      e.preventDefault();
+      toggleVideo();
+    },
+    TOGGLE_CHAT: (e: KeyboardEvent) => {
+      e.preventDefault();
+      setShowChat((prev) => !prev);
+    },
+  };
+
+  const toggleMic = () => {
+    const stream = mediaStreamRef.current;
+    if (!stream) return;
+    const audioTracks = stream.getAudioTracks();
+    if (audioTracks.length === 0) return;
+    const enabled = !audioTracks[0].enabled;
+    audioTracks.forEach((t) => (t.enabled = enabled));
+    setMicOn(enabled);
+  };
+
+  const toggleVideo = () => {
+    const stream = mediaStreamRef.current;
+    if (!stream) return;
+    const videoTracks = stream.getVideoTracks();
+    if (videoTracks.length === 0) return;
+    const enabled = !videoTracks[0].enabled;
+    videoTracks.forEach((t) => (t.enabled = enabled));
+    setVideoOn(enabled);
+  };
+
+  return (
+    <HotKeys keyMap={keyMap} handlers={handlers}>
+      <div className="h-screen w-full bg-gray-950 text-white flex flex-col">
+        {/* Header */}
+        <header className="p-4 border-b border-gray-800 flex justify-between items-center">
+          <h1 className="text-xl font-semibold">Room: {roomId}</h1>
+          <div className="flex items-center gap-3 text-gray-400">
+            <Users className="w-5 h-5" />
+            <span>{userName}</span>
+          </div>
+        </header>
+
+        {/* Main Section */}
+        <div className="flex-1 flex flex-col md:flex-row">
+          {/* Video Area */}
+          <div className="flex-1 flex justify-center items-center p-4">
+            <div className="bg-black rounded-2xl relative w-full max-w-3xl aspect-video overflow-hidden">
+              <video
+                ref={localVideoRef}
+                autoPlay
+                muted
+                playsInline
+                className="w-full h-full object-cover rounded-2xl"
+              />
+              <span className="absolute bottom-2 left-2 bg-gray-800 px-2 py-1 rounded text-sm">
+                You ({userName})
+              </span>
+            </div>
+          </div>
+
+          {/* Chat Panel */}
+          {showChat && (
+            <motion.div
+              initial={{ x: 200, opacity: 0 }}
+              animate={{ x: 0, opacity: 1 }}
+              exit={{ x: 200, opacity: 0 }}
+              className="w-full md:w-80 bg-gray-900 border-l border-gray-800 flex flex-col"
+            >
+              <div className="p-3 border-b border-gray-800 font-medium">In-call Chat</div>
+              <div className="flex-1 overflow-y-auto p-3 text-gray-300">
+                {messages.length === 0 ? (
+                  <p className="text-sm text-gray-500">No messages yet...</p>
+                ) : (
+                  <div className="space-y-2">
+                    {messages.map((msg, idx) => (
+                      <div key={idx} className="flex flex-col">
+                        <div className="flex items-center gap-2">
+                          <span
+                            className={`text-xs font-semibold ${
+                              msg.user === "System"
+                                ? "text-yellow-400"
+                                : msg.user === userName
+                                ? "text-green-400"
+                                : "text-indigo-400"
+                            }`}
+                          >
+                            {msg.user}
+                          </span>
+                          <span className="text-xs text-gray-400">
+                            {msg.time ? new Date(msg.time).toLocaleTimeString() : ""}
+                          </span>
                         </div>
-                        <div className="p-3 border-t border-gray-800 flex">
-                            <input
-                                type="text"
-                                placeholder="Type a message..."
-                                className="flex-1 bg-gray-800 rounded-l-md px-3 py-2 text-sm focus:outline-none"
-                            />
-                            <button className="bg-indigo-600 px-4 rounded-r-md text-sm">
-                                Send
-                            </button>
+                        <div className="mt-1">
+                          <span className="bg-green-100 text-gray-900 rounded px-2 py-1 text-sm inline-block max-w-[85%]">
+                            {msg.text}
+                          </span>
                         </div>
-                    </motion.div>
+                      </div>
+                    ))}
+                    <div ref={chatEndRef} />
+                  </div>
                 )}
-            </div>
+              </div>
 
-            {/* Controls */}
-            <footer className="p-4 flex justify-center gap-6 border-t border-gray-800 bg-gray-950">
-                <button
-                    onClick={handleToggleMic}
-                    className={`p-3 rounded-full ${micOn ? "bg-gray-800" : "bg-red-600"
-                        }`}
-                >
-                    {micOn ? <Mic /> : <MicOff />}
+              <form onSubmit={sendMessage} className="p-3 border-t border-gray-800 flex">
+                <input
+                  type="text"
+                  value={chatInput}
+                  onChange={(e) => setChatInput(e.target.value)}
+                  placeholder="Type a message..."
+                  className="flex-1 bg-gray-800 rounded-l-md px-3 py-2 text-sm focus:outline-none"
+                />
+                <button type="submit" className="bg-indigo-600 px-4 rounded-r-md text-sm">
+                  Send
                 </button>
+              </form>
+            </motion.div>
+          )}
+        </div>
 
-                <button
-                    onClick={handleToggleVideo}
-                    className={`p-3 rounded-full ${videoOn ? "bg-gray-800" : "bg-red-600"
-                        }`}
-                >
-                    {videoOn ? <Video /> : <VideoOff />}
-                </button>
+        {/* Footer Controls */}
+        <footer className="p-4 flex justify-center gap-6 border-t border-gray-800 bg-gray-950">
+          <button onClick={toggleMic} className={`p-3 rounded-full ${micOn ? "bg-gray-800" : "bg-red-600"}`}>
+            {micOn ? <Mic /> : <MicOff />}
+          </button>
 
-                <button
-                    onClick={handleEndCall}
-                    className="p-3 rounded-full bg-red-600 hover:bg-red-700"
-                >
-                    <PhoneOff />
-                </button>
+          <button onClick={toggleVideo} className={`p-3 rounded-full ${videoOn ? "bg-gray-800" : "bg-red-600"}`}>
+            {videoOn ? <Video /> : <VideoOff />}
+          </button>
 
-                <button
-                    onClick={() => setShowChat(!showChat)}
-                    className={`p-3 rounded-full ${showChat ? "bg-indigo-600" : "bg-gray-800"
-                        }`}
-                >
-                    <MessageSquare />
-                </button>
-            </footer>
-        </div>
-    );
+          <button className="p-3 rounded-full bg-red-600 hover:bg-red-700">
+            <PhoneOff />
+          </button>
+
+          <button
+            onClick={() => setShowChat((prev) => !prev)}
+            className={`p-3 rounded-full ${showChat ? "bg-indigo-600" : "bg-gray-800"}`}
+          >
+            <MessageSquare />
+          </button>
+        </footer>
+      </div>
+    </HotKeys>
+  );
 };
 
 export default InRoom;
diff --git a/frontend/src/pages/InRoomWrapper.tsx b/frontend/src/pages/InRoomWrapper.tsx
new file mode 100644
index 0000000..3332aac
--- /dev/null
+++ b/frontend/src/pages/InRoomWrapper.tsx
@@ -0,0 +1,50 @@
+import { useParams, useLocation } from "react-router-dom";
+import InRoom from "./InRoom.js";
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+
+const InRoomWrapper: React.FC = () => {
+  const { roomName } = useParams();
+  const location = useLocation();
+
+  const [userName, setUserName] = useState<string | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+
+    const fetchUser = async () => {
+      try {
+        const token = localStorage.getItem("token");
+        const res = await axios.get("http://localhost:3000/api/auth/me", {
+          headers: token ? { Authorization: `Bearer ${token}` } : undefined,
+          withCredentials: true,
+        });
+        const name = res.data?.user?.name;
+        if (mounted && name) {
+          setUserName(name);
+          return;
+        }
+      } catch (err) {
+        // ignore and fallback below
+      }
+
+      const navName = (location.state as { userName?: string })?.userName;
+      const stored = localStorage.getItem("userName");
+      if (mounted) setUserName(navName || stored || "Anonymous");
+    };
+
+    fetchUser();
+
+    return () => {
+      mounted = false;
+    };
+  }, [location]);
+
+  if (userName === null) {
+    return <div className="h-screen w-full flex items-center justify-center">Loading...</div>;
+  }
+
+  return <InRoom roomId={roomName || "unknown"} userName={userName} />;
+};
+
+export default InRoomWrapper;
\ No newline at end of file