diff --git a/frontend/src/components/PreJoinPreview.tsx b/frontend/src/components/PreJoinPreview.tsx
new file mode 100644
index 0000000..81c1608
--- /dev/null
+++ b/frontend/src/components/PreJoinPreview.tsx
@@ -0,0 +1,136 @@
+import React, { useEffect, useRef, useState } from "react";
+
+const PreJoinPreview: React.FC<{ onJoin: (stream: MediaStream) => void }> = ({ onJoin }) => {
+    const videoRef = useRef<HTMLVideoElement>(null);
+    const [stream, setStream] = useState<MediaStream | null>(null);
+    const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
+    const [selectedCam, setSelectedCam] = useState<string>("");
+    const [selectedMic, setSelectedMic] = useState<string>("");
+    const [isMuted, setIsMuted] = useState(false);
+    const [isCamOn, setIsCamOn] = useState(true);
+
+    // 🔹 Fetch devices + get default media
+    useEffect(() => {
+        const initMedia = async () => {
+            try {
+                const newStream = await navigator.mediaDevices.getUserMedia({
+                    video: true,
+                    audio: true,
+                });
+                setStream(newStream);
+                if (videoRef.current) videoRef.current.srcObject = newStream;
+
+                const devicesList = await navigator.mediaDevices.enumerateDevices();
+                setDevices(devicesList);
+            } catch (err) {
+                console.error("Media access denied:", err);
+            }
+        };
+
+        initMedia();
+
+        return () => {
+            // 🔹 Cleanup
+            stream?.getTracks().forEach(track => track.stop());
+        };
+    }, []);
+
+    const handleToggleMic = () => {
+        if (stream) {
+            stream.getAudioTracks().forEach(track => (track.enabled = !track.enabled));
+            setIsMuted(prev => !prev);
+        }
+    };
+
+    const handleToggleCam = () => {
+        if (stream) {
+            stream.getVideoTracks().forEach(track => (track.enabled = !track.enabled));
+            setIsCamOn(prev => !prev);
+        }
+    };
+
+    const handleDeviceChange = async (deviceId: string, type: "audioinput" | "videoinput") => {
+        if (!stream) return;
+
+        // Stop old tracks of the same kind
+        stream.getTracks()
+            .filter(track => track.kind === (type === "audioinput" ? "audio" : "video"))
+            .forEach(track => track.stop());
+
+        const constraints: MediaStreamConstraints =
+            type === "audioinput"
+                ? { audio: { deviceId }, video: isCamOn }
+                : { video: { deviceId }, audio: true };
+
+        const newStream = await navigator.mediaDevices.getUserMedia(constraints);
+        setStream(newStream);
+        if (videoRef.current) videoRef.current.srcObject = newStream;
+
+        if (type === "videoinput") setSelectedCam(deviceId);
+        else setSelectedMic(deviceId);
+    };
+
+    return (
+        <div className="flex flex-col items-center gap-4 p-6 bg-gray-900 text-white rounded-2xl shadow-lg">
+            <h2 className="text-xl font-semibold">Preview Your Setup</h2>
+
+            <video
+                ref={videoRef}
+                autoPlay
+                muted
+                playsInline
+                className="rounded-xl w-80 h-56 bg-black object-cover"
+            />
+
+            <div className="flex gap-4 mt-3">
+                <button onClick={handleToggleCam} className="px-3 py-2 bg-blue-600 rounded-lg hover:bg-blue-700">
+                    {isCamOn ? "Turn Off Camera" : "Turn On Camera"}
+                </button>
+                <button onClick={handleToggleMic} className="px-3 py-2 bg-blue-600 rounded-lg hover:bg-blue-700">
+                    {isMuted ? "Unmute Mic" : "Mute Mic"}
+                </button>
+            </div>
+
+            <div className="flex flex-col gap-2 mt-4 w-80">
+                <label>Camera:</label>
+                <select
+                    value={selectedCam}
+                    onChange={e => handleDeviceChange(e.target.value, "videoinput")}
+                    className="text-black p-2 rounded-lg"
+                >
+                    {devices
+                        .filter(d => d.kind === "videoinput")
+                        .map(cam => (
+                            <option key={cam.deviceId} value={cam.deviceId}>
+                                {cam.label || `Camera ${cam.deviceId.slice(0, 5)}`}
+                            </option>
+                        ))}
+                </select>
+
+                <label>Microphone:</label>
+                <select
+                    value={selectedMic}
+                    onChange={e => handleDeviceChange(e.target.value, "audioinput")}
+                    className="text-black p-2 rounded-lg"
+                >
+                    {devices
+                        .filter(d => d.kind === "audioinput")
+                        .map(mic => (
+                            <option key={mic.deviceId} value={mic.deviceId}>
+                                {mic.label || `Mic ${mic.deviceId.slice(0, 5)}`}
+                            </option>
+                        ))}
+                </select>
+            </div>
+
+            <button
+                onClick={() => onJoin(stream!)}
+                className="mt-6 px-6 py-3 bg-green-600 rounded-xl hover:bg-green-700"
+            >
+                Join Call
+            </button>
+        </div>
+    );
+};
+
+export default PreJoinPreview;
diff --git a/frontend/src/pages/InRoom.tsx b/frontend/src/pages/InRoom.tsx
index 251919f..83325ad 100644
--- a/frontend/src/pages/InRoom.tsx
+++ b/frontend/src/pages/InRoom.tsx
@@ -1,237 +1,182 @@
 import React, { useState, useEffect, useRef } from "react";
-import { Mic, MicOff, Video, VideoOff, PhoneOff, Users, MessageSquare } from "lucide-react";
+import {
+    Mic,
+    MicOff,
+    Video,
+    VideoOff,
+    PhoneOff,
+    Users,
+    MessageSquare,
+} from "lucide-react";
 import { motion } from "framer-motion";
-import { HotKeys } from "react-hotkeys";
-
-const keyMap = {
-  TOGGLE_MIC: "ctrl+m",
-  TOGGLE_VIDEO: "ctrl+v",
-  TOGGLE_CHAT: "ctrl+c",
-};
 
 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 mediaStreamRef = useRef<MediaStream | null>(null);
-  const [messages, setMessages] = useState<{ user: string; text: string; time?: string }[]>([]);
-  const [chatInput, setChatInput] = useState("");
-  const chatEndRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    document.title = `${roomName} | PeerCall`;
-    //initalize local media when joining the room
-    const initMedia = async () => {
-      try {
-        const stream = await navigator.mediaDevices.getUserMedia({
-          audio: true,
-          video: true,
+    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;
         });
-        mediaStreamRef.current = stream;
-        if (localVideoRef.current) {
-          localVideoRef.current.srcObject = stream;
-        }
-        const hasAudio = stream.getAudioTracks().some((t) => t.enabled !== false);
-        const hasVideo = stream.getVideoTracks().some((t) => t.enabled !== false);
-        setMicOn(hasAudio);
-        setVideoOn(hasVideo);
-      } catch (err) {
-        console.error("Failed to get user media:", err);//due to denial or other unavailability issues
-        setMicOn(false);
-        setVideoOn(false);
-      }
+        setMicOn((prev) => !prev);
     };
 
-    initMedia();
+    // 🔹 STEP 3: Toggle video
+    const handleToggleVideo = () => {
+        if (!localStream) return;
+        localStream.getVideoTracks().forEach((track) => {
+            track.enabled = !track.enabled;
+        });
+        setVideoOn((prev) => !prev);
+    };
 
-    return () => {
-      if (mediaStreamRef.current) {
-        mediaStreamRef.current.getTracks().forEach((t) => t.stop());
-        mediaStreamRef.current = null;
-      }
+    // 🔹 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
     };
-  }, [roomName]);
-
-  const handlers = {//to handle the keyboard events
-    TOGGLE_MIC: (e: KeyboardEvent) => {
-      e.preventDefault();
-      toggleMic();
-    },
-    TOGGLE_VIDEO: (e: KeyboardEvent) => {
-      e.preventDefault();
-      toggleVideo();
-    },
-    TOGGLE_CHAT: (e: KeyboardEvent) => {
-      e.preventDefault();
-      toggleChat();
-    },
-  };
-  const toggleMic = () => {
-    const stream = mediaStreamRef.current;
-    if (!stream) {
-      console.warn("No local media stream available to toggle mic");
-      setMicOn((s) => !s);
-      return;
-    }
-    const audioTracks = stream.getAudioTracks();
-    if (audioTracks.length === 0) {
-      console.warn("No audio tracks found");
-      setMicOn(false);
-      return;
-    }
-    const enabled = !audioTracks[0].enabled;
-    audioTracks.forEach((t) => (t.enabled = enabled));
-    setMicOn(enabled);
-  };
-
-  const toggleVideo = () => {
-    const stream = mediaStreamRef.current;
-    if (!stream) {
-      console.warn("No local media stream available to toggle video");
-      setVideoOn((s) => !s);
-      return;
-    }
-    const videoTracks = stream.getVideoTracks();
-    if (videoTracks.length === 0) {
-      console.warn("No video tracks found");
-      setVideoOn(false);
-      return;
-    }
-    const enabled = !videoTracks[0].enabled;
-    videoTracks.forEach((t) => (t.enabled = enabled));
-    setVideoOn(enabled);
-  };
-
-  const toggleChat = () => {
-    setShowChat((prev) => !prev);
-  };
-
-  useEffect(() => {
-    if(chatEndRef.current)chatEndRef.current.scrollIntoView({behavior:"smooth"});
-  },[messages,showChat]);
-
-  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: {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">
-            <div className="bg-black rounded-2xl relative">
-              <video
-                ref={localVideoRef}
-                autoPlay
-                muted
-                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>
-            <div className="bg-black rounded-2xl relative">
-              <video
-                ref={remoteVideoRef}
-                autoPlay
-                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 */}
-          {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">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 text-green-300 font-semibold">{msg.user}</span>
-                          <span className="text-xs text-gray-400">{msg.time ? new Date(msg.time).toLocaleTimeString() : ""}</span>
+
+    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>
                         </div>
-                        <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 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>
-                      </div>
-                    ))}
-                    <div ref={chatEndRef} />
-                  </div>
+                    </motion.div>
                 )}
-              </div>
-              <form className="p-3 border-t border-gray-800 flex" onSubmit={(e) => { e.preventDefault();
-                  if (chatInput.trim() === "") return; setMessages((s) => [...s, { user: "You", text: chatInput.trim(), time: new Date().toISOString() }]); setChatInput("");
-                }}>
-                <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>
+            </div>
 
-        {/* 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={toggleVideo}
-            className={`p-3 rounded-full ${
-              videoOn ? "bg-gray-800" : "bg-red-600"
-            }`}
-          >
-            {videoOn ? <Video /> : <VideoOff />}
-          </button>
-
-          <button className="p-3 rounded-full bg-red-600 hover:bg-red-700">
-            <PhoneOff />
-          </button>
-
-          <button
-            onClick={toggleChat}
-            className={`p-3 rounded-full ${
-              showChat ? "bg-indigo-600" : "bg-gray-800"
-            }`}
-          >
-            <MessageSquare />
-          </button>
-        </footer>
-      </div>
-    </HotKeys>
-  );
+            {/* 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 />}
+                </button>
+
+                <button
+                    onClick={handleToggleVideo}
+                    className={`p-3 rounded-full ${videoOn ? "bg-gray-800" : "bg-red-600"
+                        }`}
+                >
+                    {videoOn ? <Video /> : <VideoOff />}
+                </button>
+
+                <button
+                    onClick={handleEndCall}
+                    className="p-3 rounded-full bg-red-600 hover:bg-red-700"
+                >
+                    <PhoneOff />
+                </button>
+
+                <button
+                    onClick={() => setShowChat(!showChat)}
+                    className={`p-3 rounded-full ${showChat ? "bg-indigo-600" : "bg-gray-800"
+                        }`}
+                >
+                    <MessageSquare />
+                </button>
+            </footer>
+        </div>
+    );
 };
 
 export default InRoom;
diff --git a/frontend/src/pages/Index.tsx b/frontend/src/pages/Index.tsx
index c780e5b..b2ffe45 100644
--- a/frontend/src/pages/Index.tsx
+++ b/frontend/src/pages/Index.tsx
@@ -1,9 +1,9 @@
-import Header from "../components/Header";
-import Hero from "../components/Hero";
-import Features from "../components/Features";
-import TechStack from "../components/TechStack";
-import Footer from "../components/Footer";
-import ChatOverlay from "../components/ChatOverlay";
+import Header from "../components/Header.js";
+import Hero from "../components/Hero.js";
+import Features from "../components/Features.js";
+import TechStack from "../components/TechStack.js";
+import Footer from "../components/Footer.js";
+import ChatOverlay from "../components/ChatOverlay.js";
 import "../index.css";
 
 const Index = () => {
diff --git a/frontend/src/pages/JoinRoom.tsx b/frontend/src/pages/JoinRoom.tsx
index a592e8d..e79009e 100644
--- a/frontend/src/pages/JoinRoom.tsx
+++ b/frontend/src/pages/JoinRoom.tsx
@@ -1,20 +1,31 @@
-
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Button } from "../components/ui/button.js";
 import axios from "axios";
+import PreJoinPreview from "../components/PreJoinPreview.js";
 
 export default function JoinRoom() {
   const [roomName, setRoomName] = useState("");
   const [loading, setLoading] = useState(false);
+  const [showPreview, setShowPreview] = useState(false);
+  const [stream, setStream] = useState<MediaStream | null>(null);
+
   const navigate = useNavigate();
-  const API_BASE = "http://localhost:3000/api/rooms";// include /rooms here
+  const API_BASE = "http://localhost:3000/api/rooms";
 
-  const handleJoin = async (e: React.FormEvent) => {
+  // 🔹 Step 1: Handle room join initiation
+  const handleJoinClick = (e: React.FormEvent) => {
     e.preventDefault();
     if (!roomName.trim()) return alert("Please enter a room name!");
+    // Instead of joining immediately, show preview first
+    setShowPreview(true);
+  };
 
+  // 🔹 Step 2: After preview confirmation, actually join the backend room
+  const handleConfirmJoin = async (mediaStream: MediaStream) => {
+    setStream(mediaStream);
     setLoading(true);
+
     try {
       const token = localStorage.getItem("token");
       if (!token) throw new Error("No auth token found");
@@ -27,24 +38,36 @@ export default function JoinRoom() {
         }
       );
 
-      // const roomName = res.data._id
       alert("Joined room successfully!");
+      // Optional: Stop preview stream before entering actual call
+      mediaStream.getTracks().forEach(track => track.stop());
       navigate(`/room/${roomName}`);
     } catch (err: any) {
       console.error("Join room error:", err);
       alert(err.response?.data?.message || err.message || "Failed to join room.");
+      setShowPreview(false);
     } finally {
       setLoading(false);
     }
   };
 
+  // 🔹 Step 3: Conditional render — preview or join form
+  if (showPreview) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-900">
+        <PreJoinPreview onJoin={handleConfirmJoin} />
+      </div>
+    );
+  }
+
+  // 🔹 Step 4: Default room input form
   return (
     <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 via-white to-green-100 px-4 py-8">
       <div className="max-w-md w-full bg-white/80 backdrop-blur-md shadow-xl rounded-2xl border border-green-100 p-8">
         <h2 className="text-3xl font-bold text-green-600 text-center mb-6">
           Join a Room
         </h2>
-        <form onSubmit={handleJoin} className="space-y-4">
+        <form onSubmit={handleJoinClick} className="space-y-4">
           <input
             type="text"
             value={roomName}