diff --git a/ui/src/App.jsx b/ui/src/App.jsx
index b488479..15c4b63 100644
--- a/ui/src/App.jsx
+++ b/ui/src/App.jsx
@@ -45,8 +45,16 @@ function App() {
         ws.onmessage = null;
         ws.onerror = null;
         ws.onclose = null;
-        if (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING) {
+        if (ws.readyState === WebSocket.OPEN) {
           ws.close();
+        } else if (ws.readyState === WebSocket.CONNECTING) {
+          ws.onopen = () => {
+            try {
+              ws.close();
+            } catch {
+              // ignore
+            }
+          };
         }
       }
     };
diff --git a/ui/src/components/VideoChat.jsx b/ui/src/components/VideoChat.jsx
index 60203dc..b41fb7b 100644
--- a/ui/src/components/VideoChat.jsx
+++ b/ui/src/components/VideoChat.jsx
@@ -3,100 +3,172 @@ import { useVideoChat } from '../hooks/useVideoChat.js';
 import {
   Mic, MicOff, Video, VideoOff, Monitor, MonitorOff,
   SkipForward, LogOut, Flag, MessageCircle, X, Send, Search,
-  Crown, UserX, Users
+  Crown, UserX, Users, ArrowLeftRight, Move, Sparkles
 } from 'lucide-react';
 import { useVisualViewport } from '../hooks/useVisualViewport.js';
 
 /**
- * Remote Participant Video Tile
+ * Reusable Video Stream Player
+ * Safely attaches MediaStream to a video element with fallback avatar and status badges.
  */
-const RemoteParticipantTile = ({ peer, index, isCurrentUserHost, hostId, onKick, onMute }) => {
+const VideoStreamPlayer = ({
+  stream,
+  muted = false,
+  mirrored = false,
+  className = '',
+  videoEnabled = true,
+  fallbackLabel = 'User',
+  fallbackSubtext = 'Camera Off',
+  isSpeaking = false,
+  badgeText = null,
+  isHost = false,
+  isAudioEnabled = true,
+  isScreenSharing = false,
+  children
+}) => {
   const videoRef = useRef(null);
-  const isPeerHost = peer.socketId === hostId;
 
   useEffect(() => {
-    if (videoRef.current && peer.stream) {
-      videoRef.current.srcObject = peer.stream;
-      videoRef.current.play().catch(e => console.warn("Remote stream play error:", e));
+    const videoEl = videoRef.current;
+    if (!videoEl) return;
+
+    if (stream) {
+      if (videoEl.srcObject !== stream) {
+        videoEl.srcObject = stream;
+      }
+      const playPromise = videoEl.play();
+      if (playPromise !== undefined) {
+        playPromise.catch(e => {
+          if (e.name !== 'AbortError') {
+            console.warn("Stream playback warning:", e);
+          }
+        });
+      }
+    } else {
+      videoEl.srcObject = null;
     }
-  }, [peer.stream]);
+  }, [stream]);
 
   return (
-    <div
-      className={`relative w-full h-full rounded-2xl overflow-hidden bg-slate-900 flex items-center justify-center border-2 transition-all duration-200 shadow-lg ${
-        peer.isSpeaking ? 'border-[#4ade80] shadow-[0_0_16px_rgba(74,222,128,0.4)]' : 'border-white/10'
-      }`}
-    >
-      {/* Video Stream */}
+    <div className={`relative w-full h-full overflow-hidden flex items-center justify-center bg-slate-950 select-none ${className}`}>
+      {/* Video Element */}
       <video
         ref={videoRef}
         playsInline
         autoPlay
-        className={`w-full h-full object-cover ${peer.isVideoEnabled ? 'block' : 'hidden'}`}
+        muted={muted}
+        className={`w-full h-full object-cover transition-transform duration-300 ${
+          mirrored ? 'scale-x-[-1]' : ''
+        } ${videoEnabled && stream ? 'block' : 'hidden'}`}
       />
 
-      {/* Camera Off Avatar Fallback */}
-      {!peer.isVideoEnabled && (
-        <div className="flex flex-col items-center justify-center gap-2">
-          <div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-[#003cff] text-[#d8ff00] font-black text-2xl md:text-3xl flex items-center justify-center shadow-md">
-            S{index + 1}
+      {/* Fallback Avatar when camera is off or stream missing */}
+      {(!videoEnabled || !stream) && (
+        <div className="flex flex-col items-center justify-center gap-3 p-4 text-center select-none animate-fade-in z-10">
+          <div
+            className={`w-20 h-20 sm:w-24 sm:h-24 md:w-28 md:h-28 rounded-full bg-gradient-to-tr from-[#003cff] to-[#6366f1] text-[#d8ff00] font-black text-3xl sm:text-4xl flex items-center justify-center shadow-2xl border-2 border-white/20 transition-all duration-300 ${
+              isSpeaking ? 'ring-4 ring-emerald-400 ring-offset-4 ring-offset-slate-950 scale-105' : ''
+            }`}
+          >
+            {fallbackLabel.charAt(0).toUpperCase()}
           </div>
-          <span className="text-xs md:text-sm font-semibold text-slate-300">Camera Off</span>
-        </div>
-      )}
-
-      {/* Top Overlay: Name Badge & Host Badge */}
-      <div className="absolute top-3 left-3 flex items-center gap-1.5 z-10">
-        <div className="px-2.5 py-1 rounded-full bg-black/60 backdrop-blur-md text-white text-xs font-bold flex items-center gap-1.5 shadow-sm">
-          <span>Stranger {index + 1}</span>
-          {isPeerHost && (
-            <span className="flex items-center gap-1 bg-[#d8ff00] text-[#003cff] px-1.5 py-0.5 rounded-full text-[10px] font-black">
-              <Crown size={10} /> Host
+          <div className="flex flex-col items-center">
+            <span className="text-sm sm:text-base font-bold text-white tracking-wide flex items-center gap-1.5">
+              {fallbackLabel}
+              {isHost && (
+                <span className="flex items-center gap-1 bg-[#d8ff00] text-[#003cff] px-1.5 py-0.5 rounded-full text-[10px] font-black">
+                  <Crown size={10} /> Host
+                </span>
+              )}
             </span>
-          )}
+            <span className="text-xs text-slate-400 font-medium">{fallbackSubtext}</span>
+          </div>
         </div>
-      </div>
+      )}
 
-      {/* Top Right: Host Controls (if current user is room host) */}
-      {isCurrentUserHost && (
-        <div className="absolute top-3 right-3 flex items-center gap-1.5 z-10">
-          <button
-            title="Mute participant"
-            onClick={() => onMute(peer.socketId)}
-            className="p-1.5 rounded-full bg-black/60 hover:bg-yellow-500 text-white hover:text-black transition-colors backdrop-blur-md"
-          >
-            <MicOff size={14} />
-          </button>
-          <button
-            title="Kick participant"
-            onClick={() => onKick(peer.socketId)}
-            className="p-1.5 rounded-full bg-black/60 hover:bg-red-500 text-white transition-colors backdrop-blur-md"
-          >
-            <UserX size={14} />
-          </button>
+      {/* Top Name Badge */}
+      {badgeText && (
+        <div className="absolute top-3 left-3 z-10 pointer-events-none">
+          <div className="px-2.5 py-1 rounded-full bg-black/60 backdrop-blur-md text-white text-xs font-bold flex items-center gap-1.5 shadow-sm border border-white/10">
+            <span>{badgeText}</span>
+            {isHost && (
+              <span className="flex items-center gap-1 bg-[#d8ff00] text-[#003cff] px-1.5 py-0.5 rounded-full text-[10px] font-black">
+                <Crown size={10} /> Host
+              </span>
+            )}
+          </div>
         </div>
       )}
 
-      {/* Bottom Overlay: Status Icons (Mic / Screen Share) */}
-      <div className="absolute bottom-3 right-3 flex items-center gap-1.5 z-10">
-        {peer.isScreenSharing && (
-          <div className="p-1 rounded-full bg-[#003cff] text-white text-xs shadow-md">
+      {/* Bottom Media Badges (Mic off / Screen share) */}
+      <div className="absolute bottom-3 right-3 flex items-center gap-1.5 z-10 pointer-events-none">
+        {isScreenSharing && (
+          <div className="p-1.5 rounded-full bg-[#003cff] text-white text-xs shadow-md border border-white/10">
             <Monitor size={14} />
           </div>
         )}
-        {!peer.isAudioEnabled && (
-          <div className="p-1 rounded-full bg-red-500/80 text-white text-xs shadow-md backdrop-blur-sm">
+        {!isAudioEnabled && (
+          <div className="p-1.5 rounded-full bg-red-500/90 text-white text-xs shadow-md backdrop-blur-sm border border-red-400/30">
             <MicOff size={14} />
           </div>
         )}
       </div>
+
+      {children}
+    </div>
+  );
+};
+
+/**
+ * Group Participant Tile
+ */
+const GroupParticipantTile = ({ peer, index, isCurrentUserHost, hostId, onKick, onMute }) => {
+  const isPeerHost = peer.socketId === hostId;
+
+  return (
+    <div
+      className={`relative w-full h-full rounded-2xl overflow-hidden bg-slate-900 flex items-center justify-center border-2 transition-all duration-200 shadow-lg ${
+        peer.isSpeaking ? 'border-[#4ade80] shadow-[0_0_16px_rgba(74,222,128,0.4)]' : 'border-white/10'
+      }`}
+    >
+      <VideoStreamPlayer
+        stream={peer.stream}
+        videoEnabled={peer.isVideoEnabled}
+        isAudioEnabled={peer.isAudioEnabled}
+        isSpeaking={peer.isSpeaking}
+        isScreenSharing={peer.isScreenSharing}
+        fallbackLabel={`Stranger ${index + 1}`}
+        fallbackSubtext="Camera Off"
+        badgeText={`Stranger ${index + 1}`}
+        isHost={isPeerHost}
+      >
+        {/* Host Controls */}
+        {isCurrentUserHost && (
+          <div className="absolute top-3 right-3 flex items-center gap-1.5 z-10">
+            <button
+              title="Mute participant"
+              onClick={() => onMute(peer.socketId)}
+              className="p-1.5 rounded-full bg-black/60 hover:bg-yellow-500 text-white hover:text-black transition-colors backdrop-blur-md"
+            >
+              <MicOff size={14} />
+            </button>
+            <button
+              title="Kick participant"
+              onClick={() => onKick(peer.socketId)}
+              className="p-1.5 rounded-full bg-black/60 hover:bg-red-500 text-white transition-colors backdrop-blur-md"
+            >
+              <UserX size={14} />
+            </button>
+          </div>
+        )}
+      </VideoStreamPlayer>
     </div>
   );
 };
 
 const VideoChat = ({ onQuit, interests = [], mode = 'video' }) => {
   const {
-    localVideoRef,
+    localStream,
     messagesEndRef,
     status,
     errorMessage,
@@ -111,7 +183,6 @@ const VideoChat = ({ onQuit, interests = [], mode = 'video' }) => {
     chatInput,
     typingUsers,
     commonInterests,
-    userCount,
     showReportModal,
     setShowReportModal,
     toastMessage,
@@ -132,6 +203,11 @@ const VideoChat = ({ onQuit, interests = [], mode = 'video' }) => {
   const [reportText, setReportText] = useState('');
   const [unreadCount, setUnreadCount] = useState(0);
   const [waitSeconds, setWaitSeconds] = useState(0);
+  const [callDuration, setCallDuration] = useState(0);
+
+  // WhatsApp PiP state: view swapping and corner positioning
+  const [isSwapped, setIsSwapped] = useState(false);
+  const [pipPosition, setPipPosition] = useState('top-right'); // 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
 
   const prevMessagesLength = useRef(messages.length);
 
@@ -160,7 +236,9 @@ const VideoChat = ({ onQuit, interests = [], mode = 'video' }) => {
   const isDisconnected = status === 'disconnected';
   const isError = status === 'error';
   const isTextMode = mode === 'text';
+  const is1on1Video = mode === 'video' || (mode !== 'group' && !isTextMode);
 
+  // Search Timer
   useEffect(() => {
     let interval;
     if (isWaiting || isConnecting) {
@@ -173,12 +251,61 @@ const VideoChat = ({ onQuit, interests = [], mode = 'video' }) => {
     return () => clearInterval(interval);
   }, [isWaiting, isConnecting]);
 
+  // Connected Call Duration Timer
+  useEffect(() => {
+    let timer;
+    if (isConnected) {
+      timer = setInterval(() => {
+        setCallDuration(prev => prev + 1);
+      }, 1000);
+    } else {
+      setCallDuration(0);
+      setIsSwapped(false);
+    }
+    return () => clearInterval(timer);
+  }, [isConnected]);
+
+  const formatDuration = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+  };
+
   const totalParticipants = 1 + peers.length;
+  const primaryRemotePeer = peers[0] || null;
+
+  // Toggle swap between Main Stage and PiP
+  const toggleSwap = () => {
+    if (peers.length > 0) {
+      setIsSwapped(prev => !prev);
+    }
+  };
 
-  // Compute dynamic grid layout class based on number of participants
-  const getGridLayoutClass = () => {
-    if (totalParticipants === 1) return 'grid-cols-1 grid-rows-1';
-    if (totalParticipants === 2) return 'grid-cols-1 md:grid-cols-2 grid-rows-2 md:grid-rows-1';
+  // Cycle PiP position through 4 corners
+  const cyclePipPosition = (e) => {
+    e.stopPropagation();
+    const positions = ['top-right', 'bottom-right', 'bottom-left', 'top-left'];
+    const nextIdx = (positions.indexOf(pipPosition) + 1) % positions.length;
+    setPipPosition(positions[nextIdx]);
+  };
+
+  const getPipPositionClass = () => {
+    switch (pipPosition) {
+      case 'top-left':
+        return 'top-16 sm:top-20 left-4 sm:left-6';
+      case 'bottom-left':
+        return 'bottom-24 sm:bottom-28 left-4 sm:left-6';
+      case 'bottom-right':
+        return 'bottom-24 sm:bottom-28 right-4 sm:right-6';
+      case 'top-right':
+      default:
+        return 'top-16 sm:top-20 right-4 sm:right-6';
+    }
+  };
+
+  // Dynamic grid class for group calls
+  const getGroupGridLayoutClass = () => {
+    if (totalParticipants <= 2) return 'grid-cols-1 md:grid-cols-2 grid-rows-2 md:grid-rows-1';
     if (totalParticipants === 3) return 'grid-cols-1 md:grid-cols-3 grid-rows-3 md:grid-rows-1';
     if (totalParticipants === 4) return 'grid-cols-2 grid-rows-2';
     return 'grid-cols-2 md:grid-cols-3 grid-rows-3 md:grid-rows-2';
@@ -187,44 +314,63 @@ const VideoChat = ({ onQuit, interests = [], mode = 'video' }) => {
   return (
     <main className="fixed inset-0 bg-[#070b14] text-white flex flex-col font-['Inter',system-ui,sans-serif] overflow-hidden select-none">
       
-      {/* ── TOP HEADER ── */}
-      <header className="h-[56px] shrink-0 border-b border-white/10 bg-slate-950/80 backdrop-blur-md flex items-center justify-between px-4 sm:px-6 z-40">
-        {/* Left: Mode & Participant Count */}
-        <div className="flex items-center gap-3">
-          <div className="flex items-center gap-2 bg-white/10 px-3 py-1.5 rounded-full border border-white/10 text-xs font-bold">
+      {/* ── TOP FLOATING WHATSAPP-STYLE HEADER ── */}
+      <header className="absolute top-0 left-0 right-0 h-[64px] bg-gradient-to-b from-black/80 via-black/40 to-transparent flex items-center justify-between px-4 sm:px-6 z-40 backdrop-blur-[2px]">
+        {/* Left: Mode, Status & Call Duration */}
+        <div className="flex items-center gap-2.5 sm:gap-3">
+          <div className="flex items-center gap-2 bg-black/40 backdrop-blur-md px-3 py-1.5 rounded-full border border-white/15 text-xs font-bold shadow-md">
             <Users size={14} className="text-[#d8ff00]" />
             <span>
-              {mode === 'group' ? `Group Call (${totalParticipants}/5)` : isTextMode ? '1-on-1 Text' : '1-on-1 Video'}
+              {mode === 'group'
+                ? `Group Call (${totalParticipants}/5)`
+                : isTextMode
+                ? '1-on-1 Text'
+                : '1-on-1 Video'}
             </span>
           </div>
 
           {isConnected && (
-            <div className="hidden sm:flex items-center gap-1.5 text-xs text-green-400 font-semibold bg-green-500/10 px-2.5 py-1 rounded-full border border-green-500/20">
+            <div className="flex items-center gap-1.5 text-xs text-green-400 font-semibold bg-green-500/15 backdrop-blur-md px-3 py-1.5 rounded-full border border-green-500/30 shadow-md">
               <span className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
-              Connected
+              <span>{formatDuration(callDuration)}</span>
             </div>
           )}
 
           {isHost && mode === 'group' && (
-            <div className="flex items-center gap-1 bg-[#d8ff00] text-[#003cff] px-2.5 py-1 rounded-full text-xs font-black shadow-sm">
-              <Crown size={12} /> You are Room Host
+            <div className="hidden sm:flex items-center gap-1 bg-[#d8ff00] text-[#003cff] px-2.5 py-1 rounded-full text-xs font-black shadow-sm">
+              <Crown size={12} /> Host
             </div>
           )}
         </div>
 
-        {/* Right: Actions */}
+        {/* Center: Shared Interests */}
+        {isConnected && commonInterests.length > 0 && (
+          <div className="hidden md:flex items-center gap-1.5 bg-black/40 backdrop-blur-md border border-white/15 px-3 py-1 rounded-full text-xs">
+            <Sparkles size={12} className="text-[#d8ff00]" />
+            <span className="text-white/70">Shared:</span>
+            {commonInterests.map((interest, i) => (
+              <span key={i} className="bg-[#003cff]/80 text-[#d8ff00] font-bold px-2 py-0.5 rounded-full text-[11px]">
+                {interest}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {/* Right: Quick Action Buttons */}
         <div className="flex items-center gap-2">
-          {/* Chat Toggle Button */}
+          {/* Chat Toggle */}
           <button
             aria-label="Toggle Chat"
             onClick={() => setIsChatOpen(!isChatOpen)}
-            className={`relative p-2 rounded-full border transition-colors ${
-              isChatOpen ? 'bg-[#003cff] border-[#003cff] text-white' : 'bg-white/10 border-white/10 text-white hover:bg-white/20'
+            className={`relative p-2 rounded-full border backdrop-blur-md transition-transform hover:scale-105 active:scale-95 shadow-md ${
+              isChatOpen
+                ? 'bg-[#003cff] border-[#003cff] text-white'
+                : 'bg-black/40 border-white/15 text-white hover:bg-white/20'
             }`}
           >
             <MessageCircle size={18} />
             {unreadCount > 0 && !isChatOpen && (
-              <span className="absolute -top-1 -right-1 bg-[#d8ff00] text-[#003cff] text-[10px] font-black w-4 h-4 rounded-full flex items-center justify-center shadow-md">
+              <span className="absolute -top-1 -right-1 bg-[#d8ff00] text-[#003cff] text-[10px] font-black w-4 h-4 rounded-full flex items-center justify-center shadow-lg animate-bounce">
                 {unreadCount}
               </span>
             )}
@@ -233,105 +379,238 @@ const VideoChat = ({ onQuit, interests = [], mode = 'video' }) => {
           {/* Report Button */}
           <button
             aria-label="Report User"
+            title="Report Stranger"
             onClick={() => setShowReportModal(true)}
-            className="p-2 text-white/70 hover:text-red-400 rounded-full bg-white/10 hover:bg-white/20 border border-white/10 transition-colors"
+            className="p-2 text-white/80 hover:text-red-400 rounded-full bg-black/40 hover:bg-red-500/20 border border-white/15 transition-all backdrop-blur-md shadow-md"
           >
             <Flag size={18} />
           </button>
 
-          {/* Skip / Next Stranger */}
+          {/* Skip / Next */}
           <button
             aria-label="Skip to next stranger"
             onClick={findStranger}
-            className="px-3.5 py-1.5 bg-[#d8ff00] text-[#003cff] font-extrabold rounded-full text-xs sm:text-sm flex items-center gap-1.5 hover:bg-[#ccee00] transition-transform active:scale-95 shadow-sm"
+            className="px-3.5 py-1.5 bg-[#d8ff00] hover:bg-[#ccee00] text-[#003cff] font-black rounded-full text-xs sm:text-sm flex items-center gap-1.5 transition-transform hover:scale-105 active:scale-95 shadow-md"
           >
-            <SkipForward size={16} /> Skip
+            <SkipForward size={16} /> <span className="hidden sm:inline">Skip</span>
           </button>
 
           {/* Quit Button */}
           <button
             aria-label="Quit Chat"
+            title="Exit Call"
             onClick={onQuit}
-            className="p-2 text-white/70 hover:text-red-400 rounded-full bg-white/10 hover:bg-white/20 border border-white/10 transition-colors"
+            className="p-2 text-white/80 hover:text-red-400 rounded-full bg-black/40 hover:bg-white/20 border border-white/15 transition-all backdrop-blur-md shadow-md"
           >
             <LogOut size={18} />
           </button>
         </div>
       </header>
 
-      {/* ── TOAST MESSAGE ── */}
+      {/* ── TOAST NOTIFICATION ── */}
       {toastMessage && (
-        <div className="absolute top-[68px] left-1/2 -translate-x-1/2 bg-[#d8ff00] text-[#003cff] px-5 py-2 rounded-full shadow-[0_4px_20px_rgba(216,255,0,0.4)] z-[100] flex items-center gap-2 text-xs sm:text-sm font-extrabold animate-[slide-down_0.2s_ease-out] whitespace-nowrap">
+        <div className="absolute top-[72px] left-1/2 -translate-x-1/2 bg-[#d8ff00] text-[#003cff] px-5 py-2 rounded-full shadow-[0_4px_24px_rgba(216,255,0,0.5)] z-[100] flex items-center gap-2 text-xs sm:text-sm font-black animate-[slide-down_0.2s_ease-out] whitespace-nowrap">
           {toastMessage}
-          {commonInterests.length > 0 && commonInterests.map((interest, i) => (
-            <span key={i} className="bg-[#003cff] text-white px-2 py-0.5 rounded-full text-xs font-semibold">
-              {interest}
-            </span>
-          ))}
         </div>
       )}
 
-      {/* ── MAIN CONTENT AREA ── */}
-      <div className="flex-1 relative flex overflow-hidden">
+      {/* ── MAIN CONTENT VIEWPORT ── */}
+      <div className="flex-1 relative flex overflow-hidden w-full h-full">
         
-        {/* VIDEO GRID (when not text-only mode) */}
-        {!isTextMode && (
-          <div className="flex-1 p-3 md:p-4 flex items-center justify-center overflow-hidden">
-            <div className={`w-full h-full max-w-[1400px] grid ${getGridLayoutClass()} gap-3 md:gap-4`}>
-              
-              {/* Local User Tile */}
+        {/* ══════════════════════════════════════════════════════════════
+            WHATSAPP 1-ON-1 VIDEO LAYOUT (Full-bleed Remote + Floating PiP)
+           ══════════════════════════════════════════════════════════════ */}
+        {is1on1Video && !isTextMode && (
+          <div className="relative flex-1 w-full h-full overflow-hidden bg-black">
+            
+            {/* 1. FULL-BLEED MAIN STAGE */}
+            <div className="absolute inset-0 w-full h-full">
+              {!isSwapped ? (
+                // Default: Remote video on main stage (or local video during search/pre-call)
+                isConnected && primaryRemotePeer ? (
+                  <VideoStreamPlayer
+                    stream={primaryRemotePeer.stream}
+                    videoEnabled={primaryRemotePeer.isVideoEnabled}
+                    isAudioEnabled={primaryRemotePeer.isAudioEnabled}
+                    isSpeaking={primaryRemotePeer.isSpeaking}
+                    isScreenSharing={primaryRemotePeer.isScreenSharing}
+                    fallbackLabel="Stranger"
+                    fallbackSubtext="Camera Off"
+                    badgeText="Stranger"
+                    mirrored={false}
+                    muted={false}
+                  />
+                ) : (
+                  // Pre-call / Searching: Local camera preview on main stage
+                  <VideoStreamPlayer
+                    stream={localStream}
+                    videoEnabled={isVideoEnabled}
+                    isAudioEnabled={isAudioEnabled}
+                    isSpeaking={isLocalSpeaking}
+                    isScreenSharing={isScreenSharing}
+                    fallbackLabel="You"
+                    fallbackSubtext="Your Camera is Off"
+                    badgeText="You (Preview)"
+                    mirrored={true}
+                    muted={true}
+                  />
+                )
+              ) : (
+                // Swapped: Local camera enlarged on main stage
+                <VideoStreamPlayer
+                  stream={localStream}
+                  videoEnabled={isVideoEnabled}
+                  isAudioEnabled={isAudioEnabled}
+                  isSpeaking={isLocalSpeaking}
+                  isScreenSharing={isScreenSharing}
+                  fallbackLabel="You"
+                  fallbackSubtext="Your Camera is Off"
+                  badgeText="You (Large View)"
+                  mirrored={true}
+                  muted={true}
+                />
+              )}
+            </div>
+
+            {/* 2. FLOATING PICTURE-IN-PICTURE (PiP) WINDOW */}
+            {isConnected && (
               <div
-                className={`relative w-full h-full rounded-2xl overflow-hidden bg-slate-900 flex items-center justify-center border-2 transition-all duration-200 shadow-lg ${
-                  isLocalSpeaking ? 'border-[#4ade80] shadow-[0_0_16px_rgba(74,222,128,0.4)]' : 'border-white/10'
+                onClick={toggleSwap}
+                title="Click to swap view"
+                className={`absolute ${getPipPositionClass()} w-28 sm:w-36 md:w-48 aspect-[3/4] rounded-2xl sm:rounded-3xl overflow-hidden border-2 transition-all duration-300 shadow-[0_12px_36px_rgba(0,0,0,0.7)] cursor-pointer z-30 group hover:scale-105 ${
+                  (!isSwapped ? isLocalSpeaking : primaryRemotePeer?.isSpeaking)
+                    ? 'border-emerald-400 shadow-[0_0_24px_rgba(74,222,128,0.5)]'
+                    : 'border-white/20 hover:border-[#d8ff00]'
                 }`}
               >
-                <video
-                  ref={localVideoRef}
-                  playsInline
-                  autoPlay
-                  muted
-                  className={`w-full h-full object-cover scale-x-[-1] ${isVideoEnabled ? 'block' : 'hidden'}`}
-                />
-
-                {!isVideoEnabled && (
-                  <div className="flex flex-col items-center justify-center gap-2">
-                    <div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-[#d8ff00] text-[#003cff] font-black text-2xl md:text-3xl flex items-center justify-center shadow-md">
-                      You
-                    </div>
-                    <span className="text-xs md:text-sm font-semibold text-slate-300">Camera Off</span>
-                  </div>
+                {!isSwapped ? (
+                  // Default PiP: Local Camera
+                  <VideoStreamPlayer
+                    stream={localStream}
+                    videoEnabled={isVideoEnabled}
+                    isAudioEnabled={isAudioEnabled}
+                    isSpeaking={isLocalSpeaking}
+                    isScreenSharing={isScreenSharing}
+                    fallbackLabel="You"
+                    fallbackSubtext="Off"
+                    badgeText="You"
+                    mirrored={true}
+                    muted={true}
+                  />
+                ) : (
+                  // Swapped PiP: Remote Stranger
+                  <VideoStreamPlayer
+                    stream={primaryRemotePeer?.stream}
+                    videoEnabled={primaryRemotePeer?.isVideoEnabled ?? true}
+                    isAudioEnabled={primaryRemotePeer?.isAudioEnabled ?? true}
+                    isSpeaking={primaryRemotePeer?.isSpeaking ?? false}
+                    isScreenSharing={primaryRemotePeer?.isScreenSharing ?? false}
+                    fallbackLabel="Stranger"
+                    fallbackSubtext="Off"
+                    badgeText="Stranger"
+                    mirrored={false}
+                    muted={false}
+                  />
                 )}
 
-                {/* Local Badge */}
-                <div className="absolute top-3 left-3 flex items-center gap-1.5 z-10">
-                  <div className="px-2.5 py-1 rounded-full bg-black/60 backdrop-blur-md text-white text-xs font-bold flex items-center gap-1.5 shadow-sm">
-                    <span>You</span>
-                    {isHost && mode === 'group' && (
-                      <span className="flex items-center gap-1 bg-[#d8ff00] text-[#003cff] px-1.5 py-0.5 rounded-full text-[10px] font-black">
-                        <Crown size={10} /> Host
-                      </span>
-                    )}
+                {/* PiP Hover / Action Overlays */}
+                <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col items-center justify-between p-2 pointer-events-none">
+                  {/* Reposition button */}
+                  <button
+                    onClick={cyclePipPosition}
+                    title="Move PiP corner"
+                    className="self-end p-1.5 rounded-full bg-black/70 text-white hover:text-[#d8ff00] pointer-events-auto transition-colors"
+                  >
+                    <Move size={12} />
+                  </button>
+
+                  {/* Swap Affordance */}
+                  <div className="bg-black/70 backdrop-blur-md text-[#d8ff00] text-[10px] font-black px-2 py-1 rounded-full flex items-center gap-1 border border-white/10 shadow-lg">
+                    <ArrowLeftRight size={10} /> Tap to Swap
                   </div>
+                  <div className="h-2"></div>
                 </div>
+              </div>
+            )}
 
-                {/* Local Media Indicators */}
-                <div className="absolute bottom-3 right-3 flex items-center gap-1.5 z-10">
-                  {isScreenSharing && (
-                    <div className="p-1 rounded-full bg-[#003cff] text-white text-xs shadow-md">
-                      <Monitor size={14} />
-                    </div>
-                  )}
-                  {!isAudioEnabled && (
-                    <div className="p-1 rounded-full bg-red-500/80 text-white text-xs shadow-md backdrop-blur-sm">
-                      <MicOff size={14} />
-                    </div>
-                  )}
+            {/* 3. SEARCHING / MATCHMAKING RADAR OVERLAY */}
+            {(isWaiting || isConnecting) && (
+              <div className="absolute inset-0 z-20 bg-slate-950/60 backdrop-blur-md flex flex-col items-center justify-center p-6 text-center animate-fade-in">
+                <div className="relative flex items-center justify-center mb-6">
+                  {/* Concentric radar pulses */}
+                  <div className="absolute w-36 h-36 rounded-full bg-[#003cff]/20 animate-ping duration-1000"></div>
+                  <div className="absolute w-28 h-28 rounded-full bg-[#d8ff00]/20 animate-pulse"></div>
+                  <div className="w-20 h-20 bg-gradient-to-tr from-[#003cff] to-[#6366f1] rounded-full flex items-center justify-center shadow-[0_0_30px_rgba(0,60,255,0.6)] border-2 border-[#d8ff00] z-10">
+                    <Search size={32} className="text-[#d8ff00] animate-bounce" strokeWidth={2.5} />
+                  </div>
                 </div>
+
+                <h2 className="text-white text-2xl sm:text-3xl font-extrabold tracking-tight mb-2">
+                  {isConnecting ? 'Connecting video stream…' : 'Looking for a stranger…'}
+                </h2>
+                <p className="text-slate-300 text-sm sm:text-base font-medium max-w-sm mb-4">
+                  {isConnecting
+                    ? 'Establishing direct peer-to-peer connection'
+                    : `Searching for ${waitSeconds}s`}
+                </p>
+
+                {interests.length > 0 && (
+                  <div className="flex flex-wrap gap-1.5 justify-center max-w-xs mb-8">
+                    <span className="text-xs text-slate-400 font-semibold w-full mb-1">
+                      Filtering by your interests:
+                    </span>
+                    {interests.map((tag, idx) => (
+                      <span
+                        key={idx}
+                        className="bg-white/10 text-[#d8ff00] border border-white/20 px-3 py-1 rounded-full text-xs font-bold shadow-sm"
+                      >
+                        #{tag}
+                      </span>
+                    ))}
+                  </div>
+                )}
+
+                <button
+                  onClick={onQuit}
+                  className="px-6 py-2.5 rounded-full bg-white/10 hover:bg-white/20 text-white border border-white/20 text-xs sm:text-sm font-bold transition-all active:scale-95 shadow-md"
+                >
+                  Cancel Search
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* ══════════════════════════════════════════════════════════════
+            GROUP CALL LAYOUT (Responsive dynamic multi-party grid)
+           ══════════════════════════════════════════════════════════════ */}
+        {mode === 'group' && !isTextMode && (
+          <div className="flex-1 p-3 md:p-4 flex items-center justify-center overflow-hidden">
+            <div className={`w-full h-full max-w-[1400px] grid ${getGroupGridLayoutClass()} gap-3 md:gap-4`}>
+              {/* Local Tile */}
+              <div
+                className={`relative w-full h-full rounded-2xl overflow-hidden bg-slate-900 flex items-center justify-center border-2 transition-all duration-200 shadow-lg ${
+                  isLocalSpeaking ? 'border-[#4ade80] shadow-[0_0_16px_rgba(74,222,128,0.4)]' : 'border-white/10'
+                }`}
+              >
+                <VideoStreamPlayer
+                  stream={localStream}
+                  videoEnabled={isVideoEnabled}
+                  isAudioEnabled={isAudioEnabled}
+                  isSpeaking={isLocalSpeaking}
+                  isScreenSharing={isScreenSharing}
+                  fallbackLabel="You"
+                  fallbackSubtext="Camera Off"
+                  badgeText="You"
+                  isHost={isHost}
+                  mirrored={true}
+                  muted={true}
+                />
               </div>
 
-              {/* Remote Participant Tiles */}
+              {/* Remote Participants */}
               {peers.map((peer, idx) => (
-                <RemoteParticipantTile
+                <GroupParticipantTile
                   key={peer.socketId}
                   peer={peer}
                   index={idx}
@@ -345,18 +624,29 @@ const VideoChat = ({ onQuit, interests = [], mode = 'video' }) => {
           </div>
         )}
 
-        {/* ── CHAT DRAWER / SIDEBAR (or full view in text mode) ── */}
+        {/* ══════════════════════════════════════════════════════════════
+            CHAT SIDEBAR / DRAWER (Slide-out panel)
+           ══════════════════════════════════════════════════════════════ */}
         {(isChatOpen || isTextMode) && (
-          <aside className={`${isTextMode ? 'flex-1' : 'w-full sm:w-[360px] md:w-[400px] border-l border-white/10'} bg-slate-950/95 backdrop-blur-xl flex flex-col z-30 transition-all duration-200`}>
-            
-            {/* Chat Header */}
-            <div className="h-12 border-b border-white/10 px-4 flex items-center justify-between">
-              <span className="text-xs font-black uppercase tracking-wider text-slate-400">
+          <aside
+            className={`${
+              isTextMode
+                ? 'flex-1'
+                : 'absolute right-0 top-0 bottom-0 w-full sm:w-[380px] md:w-[420px] shadow-2xl border-l border-white/10'
+            } bg-slate-950/95 backdrop-blur-2xl flex flex-col z-50 transition-all duration-300`}
+          >
+            {/* Chat Drawer Header */}
+            <div className="h-14 border-b border-white/10 px-4 flex items-center justify-between bg-slate-900/50">
+              <span className="text-xs font-black uppercase tracking-wider text-slate-300 flex items-center gap-2">
+                <MessageCircle size={16} className="text-[#d8ff00]" />
                 {mode === 'group' ? 'Group Chat' : 'Conversation'}
               </span>
               {!isTextMode && (
-                <button onClick={() => setIsChatOpen(false)} className="p-1 text-slate-400 hover:text-white rounded-full">
-                  <X size={16} />
+                <button
+                  onClick={() => setIsChatOpen(false)}
+                  className="p-1.5 text-slate-400 hover:text-white hover:bg-white/10 rounded-full transition-colors"
+                >
+                  <X size={18} />
                 </button>
               )}
             </div>
@@ -376,8 +666,8 @@ const VideoChat = ({ onQuit, interests = [], mode = 'video' }) => {
                     key={idx}
                     className={`px-3.5 py-2.5 max-w-[85%] text-sm font-medium leading-relaxed ${
                       isMe
-                        ? 'self-end bg-[#d8ff00] text-[#003cff] rounded-[18px_4px_18px_18px] shadow-sm'
-                        : 'self-start bg-white/10 text-white rounded-[4px_18px_18px_18px] border border-white/10'
+                        ? 'self-end bg-[#d8ff00] text-[#003cff] rounded-[18px_4px_18px_18px] shadow-md font-semibold'
+                        : 'self-start bg-white/10 text-white rounded-[4px_18px_18px_18px] border border-white/10 shadow-sm'
                     }`}
                   >
                     {!isMe && (
@@ -388,24 +678,34 @@ const VideoChat = ({ onQuit, interests = [], mode = 'video' }) => {
                       </div>
                     )}
                     <div>{msg.text}</div>
-                    <span className={`block text-[10px] text-right mt-1 font-semibold ${isMe ? 'text-[#003cff]/60' : 'text-slate-400'}`}>
+                    <span
+                      className={`block text-[10px] text-right mt-1 font-semibold ${
+                        isMe ? 'text-[#003cff]/70' : 'text-slate-400'
+                      }`}
+                    >
                       {msg.timestamp || 'now'}
                     </span>
                   </div>
                 );
               })}
               <div ref={messagesEndRef} />
-              
+
               {typingUsers.size > 0 && (
-                <div className="text-xs font-semibold italic text-[#d8ff00] px-1">
+                <div className="text-xs font-semibold italic text-[#d8ff00] px-1 animate-pulse">
                   {typingUsers.size === 1 ? 'Someone is typing…' : `${typingUsers.size} people are typing…`}
                 </div>
               )}
             </div>
 
-            {/* Chat Input */}
-            <div className="p-3 border-t border-white/10 pb-[max(12px,env(safe-area-inset-bottom))]">
-              <form onSubmit={(e) => { e.preventDefault(); sendMessage(); }} className="flex gap-2 items-center">
+            {/* Chat Input Bar */}
+            <div className="p-3 border-t border-white/10 bg-slate-900/50 pb-[max(12px,env(safe-area-inset-bottom))]">
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  sendMessage();
+                }}
+                className="flex gap-2 items-center"
+              >
                 <input
                   type="text"
                   value={chatInput}
@@ -417,7 +717,7 @@ const VideoChat = ({ onQuit, interests = [], mode = 'video' }) => {
                 <button
                   type="submit"
                   disabled={!isConnected || !chatInput.trim()}
-                  className="w-10 h-10 rounded-full bg-[#003cff] hover:bg-[#0030cc] disabled:opacity-40 disabled:hover:bg-[#003cff] text-white flex items-center justify-center transition-transform active:scale-95 cursor-pointer shrink-0"
+                  className="w-10 h-10 rounded-full bg-[#003cff] hover:bg-[#0030cc] disabled:opacity-40 disabled:hover:bg-[#003cff] text-white flex items-center justify-center transition-transform active:scale-95 cursor-pointer shrink-0 shadow-md"
                 >
                   <Send size={16} />
                 </button>
@@ -427,138 +727,144 @@ const VideoChat = ({ onQuit, interests = [], mode = 'video' }) => {
         )}
       </div>
 
-      {/* ── BOTTOM CONTROL BAR (for Video/Group Modes) ── */}
+      {/* ── FLOATING BOTTOM CONTROLS DOCK (WhatsApp Style) ── */}
       {!isTextMode && (
-        <footer className="h-[76px] shrink-0 border-t border-white/10 bg-slate-950/90 backdrop-blur-md flex items-center justify-center gap-3 sm:gap-4 px-4 z-40">
-          
-          {/* Toggle Microphone */}
-          <button
-            aria-label="Toggle Microphone"
-            onClick={toggleAudio}
-            className={`w-12 h-12 rounded-full border flex items-center justify-center transition-transform hover:scale-105 active:scale-95 ${
-              !isAudioEnabled
-                ? 'bg-red-500/20 border-red-500 text-red-400 hover:bg-red-500/30'
-                : 'bg-white/10 border-white/20 text-white hover:bg-white/20'
-            }`}
-          >
-            {!isAudioEnabled ? <MicOff size={20} /> : <Mic size={20} />}
-          </button>
-
-          {/* Toggle Camera */}
-          <button
-            aria-label="Toggle Camera"
-            onClick={toggleVideo}
-            className={`w-12 h-12 rounded-full border flex items-center justify-center transition-transform hover:scale-105 active:scale-95 ${
-              !isVideoEnabled
-                ? 'bg-red-500/20 border-red-500 text-red-400 hover:bg-red-500/30'
-                : 'bg-white/10 border-white/20 text-white hover:bg-white/20'
-            }`}
-          >
-            {!isVideoEnabled ? <VideoOff size={20} /> : <Video size={20} />}
-          </button>
+        <footer className="absolute bottom-5 sm:bottom-6 left-1/2 -translate-x-1/2 z-40">
+          <div className="bg-slate-950/80 backdrop-blur-xl border border-white/15 px-4 sm:px-5 py-2.5 sm:py-3 rounded-full flex items-center gap-3 sm:gap-4 shadow-[0_12px_40px_rgba(0,0,0,0.8)]">
+            
+            {/* Toggle Microphone */}
+            <button
+              aria-label="Toggle Microphone"
+              title={isAudioEnabled ? "Mute Microphone" : "Unmute Microphone"}
+              onClick={toggleAudio}
+              className={`w-11 h-11 sm:w-12 sm:h-12 rounded-full border flex items-center justify-center transition-transform hover:scale-105 active:scale-95 shadow-md ${
+                !isAudioEnabled
+                  ? 'bg-red-500/25 border-red-500 text-red-400 hover:bg-red-500/35'
+                  : 'bg-white/10 border-white/20 text-white hover:bg-white/20'
+              }`}
+            >
+              {!isAudioEnabled ? <MicOff size={19} /> : <Mic size={19} />}
+            </button>
 
-          {/* Toggle Screen Share */}
-          <button
-            aria-label="Toggle Screen Share"
-            onClick={isScreenSharing ? stopScreenShare : startScreenShare}
-            className={`w-12 h-12 rounded-full border flex items-center justify-center transition-transform hover:scale-105 active:scale-95 ${
-              isScreenSharing
-                ? 'bg-[#003cff] border-[#003cff] text-[#d8ff00] shadow-[0_0_16px_rgba(0,60,255,0.6)]'
-                : 'bg-white/10 border-white/20 text-white hover:bg-white/20'
-            }`}
-          >
-            {isScreenSharing ? <MonitorOff size={20} /> : <Monitor size={20} />}
-          </button>
+            {/* Toggle Camera */}
+            <button
+              aria-label="Toggle Camera"
+              title={isVideoEnabled ? "Turn Off Camera" : "Turn On Camera"}
+              onClick={toggleVideo}
+              className={`w-11 h-11 sm:w-12 sm:h-12 rounded-full border flex items-center justify-center transition-transform hover:scale-105 active:scale-95 shadow-md ${
+                !isVideoEnabled
+                  ? 'bg-red-500/25 border-red-500 text-red-400 hover:bg-red-500/35'
+                  : 'bg-white/10 border-white/20 text-white hover:bg-white/20'
+              }`}
+            >
+              {!isVideoEnabled ? <VideoOff size={19} /> : <Video size={19} />}
+            </button>
 
-          {/* Toggle Chat in Bottom Bar */}
-          <button
-            aria-label="Toggle Chat"
-            onClick={() => setIsChatOpen(!isChatOpen)}
-            className={`w-12 h-12 rounded-full border relative flex items-center justify-center transition-transform hover:scale-105 active:scale-95 ${
-              isChatOpen
-                ? 'bg-[#003cff] border-[#003cff] text-white'
-                : 'bg-white/10 border-white/20 text-white hover:bg-white/20'
-            }`}
-          >
-            <MessageCircle size={20} />
-            {unreadCount > 0 && !isChatOpen && (
-              <span className="absolute -top-1 -right-1 bg-[#d8ff00] text-[#003cff] text-[10px] font-black w-4 h-4 rounded-full flex items-center justify-center shadow-md">
-                {unreadCount}
-              </span>
+            {/* Flip / Swap Views (1-on-1 mode only) */}
+            {is1on1Video && isConnected && (
+              <button
+                aria-label="Swap View"
+                title="Swap Main & PiP Camera"
+                onClick={toggleSwap}
+                className={`w-11 h-11 sm:w-12 sm:h-12 rounded-full border flex items-center justify-center transition-transform hover:scale-105 active:scale-95 shadow-md ${
+                  isSwapped
+                    ? 'bg-[#003cff] border-[#003cff] text-[#d8ff00]'
+                    : 'bg-white/10 border-white/20 text-white hover:bg-white/20'
+                }`}
+              >
+                <ArrowLeftRight size={19} />
+              </button>
             )}
-          </button>
 
-          {/* Skip / Next Stranger */}
-          <button
-            aria-label="Skip Room"
-            onClick={findStranger}
-            className="w-14 h-12 rounded-full bg-[#d8ff00] text-[#003cff] font-extrabold flex items-center justify-center transition-transform hover:scale-105 active:scale-95 shadow-[0_4px_16px_rgba(216,255,0,0.3)]"
-          >
-            <SkipForward size={22} />
-          </button>
-
-          {/* Leave / Quit */}
-          <button
-            aria-label="Quit Chat"
-            onClick={onQuit}
-            className="w-12 h-12 rounded-full bg-red-500/20 border border-red-500/40 text-red-400 hover:bg-red-500 hover:text-white flex items-center justify-center transition-transform hover:scale-105 active:scale-95"
-          >
-            <LogOut size={20} />
-          </button>
-        </footer>
-      )}
+            {/* Screen Share */}
+            <button
+              aria-label="Toggle Screen Share"
+              title="Share Screen"
+              onClick={isScreenSharing ? stopScreenShare : startScreenShare}
+              className={`w-11 h-11 sm:w-12 sm:h-12 rounded-full border flex items-center justify-center transition-transform hover:scale-105 active:scale-95 shadow-md ${
+                isScreenSharing
+                  ? 'bg-[#003cff] border-[#003cff] text-[#d8ff00] shadow-[0_0_16px_rgba(0,60,255,0.6)]'
+                  : 'bg-white/10 border-white/20 text-white hover:bg-white/20'
+              }`}
+            >
+              {isScreenSharing ? <MonitorOff size={19} /> : <Monitor size={19} />}
+            </button>
 
-      {/* ── SEARCHING / MATCHMAKING OVERLAY ── */}
-      {(isWaiting || isConnecting) && (
-        <div className="absolute inset-0 bg-[#003cff] flex flex-col items-center justify-center z-[60]">
-          <div className="w-20 h-20 bg-[#d8ff00] rounded-full animate-[pulse-g_1.5s_infinite_ease-in-out] flex items-center justify-center shadow-[0_0_0_0_rgba(216,255,0,0.5)]">
-            <Search size={32} color="#003cff" strokeWidth={2.5} />
-          </div>
-          <div className="text-white font-['Inter',system-ui,sans-serif] text-2xl font-bold mt-8 text-center px-4">
-            {isConnecting
-              ? 'Connecting mesh video streams...'
-              : mode === 'group'
-              ? 'Finding a group room...'
-              : 'Looking for a stranger...'}
-          </div>
-          <div className="text-white/80 text-[15px] font-medium mt-2">
-            {isConnecting ? 'Synchronizing participants…' : `Searching for ${waitSeconds}s...`}
-          </div>
-          <button
-            onClick={onQuit}
-            className="bg-transparent border border-white/30 text-white hover:bg-white/10 rounded-full px-8 py-2.5 text-sm font-bold mt-10 cursor-pointer transition-all duration-200"
-          >
-            Cancel Search
-          </button>
-        </div>
-      )}
+            {/* Chat Drawer Toggle */}
+            <button
+              aria-label="Toggle Chat Drawer"
+              title="Open Chat"
+              onClick={() => setIsChatOpen(!isChatOpen)}
+              className={`w-11 h-11 sm:w-12 sm:h-12 rounded-full border relative flex items-center justify-center transition-transform hover:scale-105 active:scale-95 shadow-md ${
+                isChatOpen
+                  ? 'bg-[#003cff] border-[#003cff] text-white'
+                  : 'bg-white/10 border-white/20 text-white hover:bg-white/20'
+              }`}
+            >
+              <MessageCircle size={19} />
+              {unreadCount > 0 && !isChatOpen && (
+                <span className="absolute -top-1 -right-1 bg-[#d8ff00] text-[#003cff] text-[10px] font-black w-4 h-4 rounded-full flex items-center justify-center shadow-lg">
+                  {unreadCount}
+                </span>
+              )}
+            </button>
 
-      {/* ── DISCONNECTED OVERLAY (1-on-1 Mode) ── */}
-      {isDisconnected && mode !== 'group' && (
-        <div className="absolute inset-0 bg-black/60 backdrop-blur-md z-50 flex flex-col items-center justify-center p-4">
-          <div className="bg-slate-900 border border-white/20 rounded-3xl p-8 flex flex-col items-center gap-5 max-w-sm w-full text-center shadow-2xl">
-            <div className="text-white text-xl font-black">Stranger disconnected</div>
-            <p className="text-slate-400 text-xs">Ready to meet someone new?</p>
+            {/* Skip Stranger */}
             <button
+              aria-label="Skip to Next Stranger"
+              title="Next Stranger"
               onClick={findStranger}
-              className="w-full h-12 rounded-full bg-[#d8ff00] text-[#003cff] font-extrabold text-sm shadow-md transition-transform hover:scale-105"
+              className="w-13 sm:w-14 h-11 sm:h-12 rounded-full bg-[#d8ff00] hover:bg-[#ccee00] text-[#003cff] font-extrabold flex items-center justify-center transition-transform hover:scale-105 active:scale-95 shadow-[0_4px_16px_rgba(216,255,0,0.4)]"
             >
-              Find new stranger
+              <SkipForward size={22} />
             </button>
+
+            {/* End Call / Leave */}
             <button
+              aria-label="Leave Call"
+              title="End Call"
               onClick={onQuit}
-              className="w-full h-12 rounded-full bg-white/10 hover:bg-white/20 text-white font-semibold text-sm border border-white/10 transition-colors"
+              className="w-11 h-11 sm:w-12 sm:h-12 rounded-full bg-red-600 hover:bg-red-500 text-white flex items-center justify-center transition-transform hover:scale-105 active:scale-95 shadow-[0_4px_16px_rgba(239,68,68,0.4)]"
             >
-              Go home
+              <LogOut size={20} />
             </button>
           </div>
+        </footer>
+      )}
+
+      {/* ── DISCONNECTED OVERLAY (1-on-1 Mode) ── */}
+      {isDisconnected && mode !== 'group' && (
+        <div className="absolute inset-0 bg-black/70 backdrop-blur-md z-50 flex flex-col items-center justify-center p-4 animate-fade-in">
+          <div className="bg-slate-900/90 border border-white/20 rounded-3xl p-8 flex flex-col items-center gap-5 max-w-sm w-full text-center shadow-2xl">
+            <div className="w-16 h-16 rounded-full bg-red-500/15 border border-red-500/25 flex items-center justify-center text-red-400">
+              <LogOut size={28} />
+            </div>
+            <div>
+              <h3 className="text-white text-xl font-black mb-1">Stranger Disconnected</h3>
+              <p className="text-slate-400 text-xs sm:text-sm">The call has ended. Ready to meet someone new?</p>
+            </div>
+            <div className="w-full flex flex-col gap-2.5 mt-2">
+              <button
+                onClick={findStranger}
+                className="w-full h-12 rounded-full bg-[#d8ff00] hover:bg-[#ccee00] text-[#003cff] font-black text-sm shadow-[0_4px_16px_rgba(216,255,0,0.3)] transition-transform hover:scale-105 active:scale-95 flex items-center justify-center gap-2"
+              >
+                <SkipForward size={18} /> Find New Stranger
+              </button>
+              <button
+                onClick={onQuit}
+                className="w-full h-12 rounded-full bg-white/10 hover:bg-white/20 text-white font-semibold text-sm border border-white/15 transition-colors"
+              >
+                Return to Home
+              </button>
+            </div>
+          </div>
         </div>
       )}
 
-      {/* ── ERROR OVERLAY ── */}
+      {/* ── DEVICE PERMISSION ERROR OVERLAY ── */}
       {isError && (
-        <div className="absolute inset-0 bg-slate-950/95 backdrop-blur-md flex flex-col items-center justify-center p-6 z-[70] text-center">
-          <div className="w-16 h-16 rounded-full bg-red-500/20 text-red-400 flex items-center justify-center mb-4 text-2xl font-bold">
+        <div className="absolute inset-0 bg-slate-950/95 backdrop-blur-md flex flex-col items-center justify-center p-6 z-[70] text-center animate-fade-in">
+          <div className="w-16 h-16 rounded-full bg-red-500/20 text-red-400 flex items-center justify-center mb-4 text-2xl font-bold border border-red-500/30">
             !
           </div>
           <h2 className="text-white text-xl font-bold mb-2">Device Permission Error</h2>
@@ -584,15 +890,17 @@ const VideoChat = ({ onQuit, interests = [], mode = 'video' }) => {
 
       {/* ── REPORT MODAL ── */}
       {showReportModal && (
-        <div className="fixed inset-0 z-[100] bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
-          <div className="bg-slate-900 border border-white/20 p-6 rounded-2xl w-full max-w-[400px] shadow-2xl">
-            <h3 className="text-lg font-bold text-white mb-2">Report User</h3>
+        <div className="fixed inset-0 z-[100] bg-black/70 backdrop-blur-md flex items-center justify-center p-4 animate-fade-in">
+          <div className="bg-slate-900 border border-white/20 p-6 rounded-3xl w-full max-w-[400px] shadow-2xl">
+            <h3 className="text-lg font-bold text-white mb-2 flex items-center gap-2">
+              <Flag size={18} className="text-red-400" /> Report User
+            </h3>
             <p className="text-xs text-slate-400 mb-4">Please describe why you are reporting this user.</p>
             <textarea
               value={reportText}
               onChange={(e) => setReportText(e.target.value)}
-              className="w-full h-24 p-3 border border-white/10 rounded-xl mb-4 text-sm text-white bg-slate-800 outline-none focus:border-[#d8ff00] resize-none"
-              placeholder="Inappropriate behavior or violation of community guidelines..."
+              className="w-full h-24 p-3 border border-white/15 rounded-xl mb-4 text-sm text-white bg-slate-800/80 outline-none focus:border-[#d8ff00] resize-none"
+              placeholder="Inappropriate behavior, harassment, or violation of community guidelines…"
             />
             <div className="flex justify-end gap-2">
               <button
@@ -602,8 +910,11 @@ const VideoChat = ({ onQuit, interests = [], mode = 'video' }) => {
                 Cancel
               </button>
               <button
-                onClick={() => { submitReport(reportText); setReportText(''); }}
-                className="px-4 py-2 rounded-lg text-sm font-bold text-white bg-red-600 hover:bg-red-500 transition-colors"
+                onClick={() => {
+                  submitReport(reportText);
+                  setReportText('');
+                }}
+                className="px-4 py-2 rounded-lg text-sm font-bold text-white bg-red-600 hover:bg-red-500 transition-colors shadow-md"
               >
                 Submit Report
               </button>
diff --git a/ui/src/hooks/useVideoChat.js b/ui/src/hooks/useVideoChat.js
index 5d4fd79..4749fa2 100644
--- a/ui/src/hooks/useVideoChat.js
+++ b/ui/src/hooks/useVideoChat.js
@@ -46,6 +46,7 @@ export const useVideoChat = (interests = [], mode = 'video') => {
 
   const [status, setStatus] = useState('idle'); // 'idle' | 'waiting' | 'connecting' | 'connected' | 'disconnected' | 'error'
   const [errorMessage, setErrorMessage] = useState('');
+  const [localStream, setLocalStream] = useState(null);
   const [isVideoEnabled, setIsVideoEnabled] = useState(true);
   const [isAudioEnabled, setIsAudioEnabled] = useState(true);
   const [isScreenSharing, setIsScreenSharing] = useState(false);
@@ -221,7 +222,9 @@ export const useVideoChat = (interests = [], mode = 'video') => {
         pc.onicecandidate = null;
         pc.onconnectionstatechange = null;
         pc.close();
-      } catch (e) {}
+      } catch {
+        // ignore
+      }
       peerConnectionsRef.current.delete(peerId);
     }
     pendingCandidatesRef.current.delete(peerId);
@@ -251,7 +254,9 @@ export const useVideoChat = (interests = [], mode = 'video') => {
       activeVideoStream.getVideoTracks().forEach(track => {
         try {
           pc.addTrack(track, activeVideoStream);
-        } catch (e) {}
+        } catch {
+          // ignore
+        }
       });
     }
 
@@ -259,7 +264,9 @@ export const useVideoChat = (interests = [], mode = 'video') => {
       localStreamRef.current.getAudioTracks().forEach(track => {
         try {
           pc.addTrack(track, localStreamRef.current);
-        } catch (e) {}
+        } catch {
+          // ignore
+        }
       });
     }
 
@@ -361,7 +368,9 @@ export const useVideoChat = (interests = [], mode = 'video') => {
       for (const candidate of queuedCandidates) {
         try {
           await pc.addIceCandidate(new RTCIceCandidate(candidate));
-        } catch (e) {}
+        } catch {
+          // ignore
+        }
       }
       pendingCandidatesRef.current.delete(senderId);
 
@@ -398,7 +407,9 @@ export const useVideoChat = (interests = [], mode = 'video') => {
       for (const candidate of queuedCandidates) {
         try {
           await pc.addIceCandidate(new RTCIceCandidate(candidate));
-        } catch (e) {}
+        } catch {
+          // ignore
+        }
       }
       pendingCandidatesRef.current.delete(senderId);
     } catch (e) {
@@ -568,8 +579,11 @@ export const useVideoChat = (interests = [], mode = 'video') => {
           return;
         }
         localStreamRef.current = stream;
+        setLocalStream(stream);
         if (localVideoRef.current) {
-          localVideoRef.current.srcObject = stream;
+          if (localVideoRef.current.srcObject !== stream) {
+            localVideoRef.current.srcObject = stream;
+          }
           localVideoRef.current.play().catch(() => {});
         }
 
@@ -614,7 +628,7 @@ export const useVideoChat = (interests = [], mode = 'video') => {
       findStranger();
     };
 
-    socket.onclose = (event) => {
+    socket.onclose = () => {
       if (pingIntervalRef.current) clearInterval(pingIntervalRef.current);
       if (!isMounted()) return;
       if (status !== 'idle' && status !== 'disconnected') {
@@ -632,7 +646,7 @@ export const useVideoChat = (interests = [], mode = 'video') => {
       let message;
       try {
         message = JSON.parse(event.data);
-      } catch (e) {
+      } catch {
         return;
       }
 
@@ -947,17 +961,33 @@ export const useVideoChat = (interests = [], mode = 'video') => {
       if (localStreamRef.current) {
         localStreamRef.current.getTracks().forEach(t => t.stop());
       }
+      setLocalStream(null);
 
       cleanupAllPeerConnections();
 
       if (socketRef.current) {
-        socketRef.current.close();
+        const sock = socketRef.current;
+        sock.onmessage = null;
+        sock.onerror = null;
+        sock.onclose = null;
+        if (sock.readyState === WebSocket.OPEN) {
+          sock.close();
+        } else if (sock.readyState === WebSocket.CONNECTING) {
+          sock.onopen = () => {
+            try {
+              sock.close();
+            } catch {
+              // ignore
+            }
+          };
+        }
       }
     };
   }, [mode]);
 
   return {
     localVideoRef,
+    localStream,
     messagesEndRef,
     status,
     errorMessage,