diff --git a/client/src/App.tsx b/client/src/App.tsx
index 35b0847..07648a1 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -29,7 +29,8 @@ const LobbyView: React.FC<LobbyProps> = (props: LobbyProps) => {
   const [lobby, setLobby] = useState<Lobby | null>(null);
   const [editName, setEditName] = useState<string>("");
   const [socketUrl, setSocketUrl] = useState<string | null>(null);
-
+  const [creatingLobby, setCreatingLobby] = useState<boolean>(false);
+  
   const socket = useWebSocket(socketUrl, {
     onOpen: () => console.log("app - WebSocket connection opened."),
     onClose: () => console.log("app - WebSocket connection closed."),
@@ -73,7 +74,7 @@ const LobbyView: React.FC<LobbyProps> = (props: LobbyProps) => {
   }, [readyState]);
 
   useEffect(() => {
-    if (!session || !lobbyName) {
+    if (!session || !lobbyName || creatingLobby || (lobby && lobby.name === lobbyName)) {
       return;
     }
     const getLobby = async (lobbyName: string, session: Session) => {
@@ -115,7 +116,10 @@ const LobbyView: React.FC<LobbyProps> = (props: LobbyProps) => {
       setLobby(lobby);
     };
 
-    getLobby(lobbyName, session);
+    setCreatingLobby(true);
+    getLobby(lobbyName, session).then(() => {
+      setCreatingLobby(false);
+    });
   }, [session, lobbyName, setLobby, setError]);
 
   const setName = (name: string) => {
diff --git a/client/src/MediaControl.css b/client/src/MediaControl.css
index 8ee364a..835f95c 100644
--- a/client/src/MediaControl.css
+++ b/client/src/MediaControl.css
@@ -1,3 +1,12 @@
+.Video {
+  opacity: 0;
+  transition: opacity 0.8s ease-in-out;
+}
+
+.Video.fade-in {
+  opacity: 1;
+}
+
 .MediaControlSpacer {
   display: flex;
   width: 5rem;
diff --git a/client/src/MediaControl.tsx b/client/src/MediaControl.tsx
index 062adf7..104812c 100644
--- a/client/src/MediaControl.tsx
+++ b/client/src/MediaControl.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import Moveable from "react-moveable";
+import { flushSync } from "react-dom";
 import "./MediaControl.css";
 import VolumeOff from "@mui/icons-material/VolumeOff";
 import VolumeUp from "@mui/icons-material/VolumeUp";
@@ -13,7 +14,28 @@ import { Session } from "./GlobalContext";
 
 const debug = true;
 
-const createAnimatedVideoTrack = ({ width = 320, height = 240 } = {}): MediaStreamTrack => {
+/* ---------- Synthetic Tracks Helpers ---------- */
+
+// Helper to hash a string to a color
+function nameToColor(name: string): string {
+  // Simple hash function (djb2)
+  let hash = 5381;
+  for (let i = 0; i < name.length; i++) {
+    hash = (hash << 5) + hash + name.charCodeAt(i);
+  }
+  // Generate HSL color from hash
+  const hue = Math.abs(hash) % 360;
+  const sat = 60 + (Math.abs(hash) % 30); // 60-89%
+  const light = 45 + (Math.abs(hash) % 30); // 45-74%
+  return `hsl(${hue},${sat}%,${light}%)`;
+}
+
+// Accepts an optional name for color selection
+const createAnimatedVideoTrack = ({
+  width = 320,
+  height = 240,
+  name,
+}: { width?: number; height?: number; name?: string } = {}): MediaStreamTrack => {
   const canvas = document.createElement("canvas");
   canvas.width = width;
   canvas.height = height;
@@ -21,117 +43,92 @@ const createAnimatedVideoTrack = ({ width = 320, height = 240 } = {}): MediaStre
   const ctx = canvas.getContext("2d");
   if (!ctx) throw new Error("Could not get canvas context");
 
-  // Ball properties
+  // Pick color based on name, fallback to default
+  const ballColor = name ? nameToColor(name) : "#00ff88";
+
   const ball = {
     x: width / 2,
     y: height / 2,
     radius: Math.min(width, height) * 0.06,
     dx: 3,
     dy: 2,
-    color: "#00ff88",
+    color: ballColor,
   };
 
-  // Create stream BEFORE starting animation
   const stream = canvas.captureStream(15);
   const track = stream.getVideoTracks()[0];
 
+  let animationId: number;
+
   function drawFrame() {
     if (!ctx) return;
-    // Clear canvas
     ctx.fillStyle = "#000000";
     ctx.fillRect(0, 0, width, height);
 
-    // Update ball position
     ball.x += ball.dx;
     ball.y += ball.dy;
-
-    // Bounce off walls
-    if (ball.x + ball.radius >= width || ball.x - ball.radius <= 0) {
-      ball.dx = -ball.dx;
-    }
-    if (ball.y + ball.radius >= height || ball.y - ball.radius <= 0) {
-      ball.dy = -ball.dy;
-    }
-
-    // Keep ball in bounds
+    if (ball.x + ball.radius >= width || ball.x - ball.radius <= 0) ball.dx = -ball.dx;
+    if (ball.y + ball.radius >= height || ball.y - ball.radius <= 0) ball.dy = -ball.dy;
     ball.x = Math.max(ball.radius, Math.min(width - ball.radius, ball.x));
     ball.y = Math.max(ball.radius, Math.min(height - ball.radius, ball.y));
 
-    // Draw ball
     ctx.beginPath();
     ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
     ctx.fillStyle = ball.color;
     ctx.fill();
 
-    // Add frame number or timestamp for debugging
     ctx.fillStyle = "#ffffff";
     ctx.font = "12px Arial";
     ctx.fillText(`Frame: ${Date.now() % 10000}`, 10, 20);
   }
 
-  // Draw initial frame
-  drawFrame();
-
-  // Start animation - CRITICAL: Request animation frame for better performance
   function animate() {
     drawFrame();
-    //requestAnimationFrame(animate);
-    setTimeout(animate, 1000 / 10); // 10 FPS
+    animationId = requestAnimationFrame(animate);
   }
   animate();
 
+  // Store cleanup function on track
+  (track as any).stopAnimation = () => {
+    if (animationId) cancelAnimationFrame(animationId);
+  };
+
   track.enabled = true;
   return track;
 };
 
-const createBlackVideoTrack = ({ width = 320, height = 240 } = {}): MediaStreamTrack => {
-  const canvas = document.createElement("canvas");
-  canvas.width = width;
-  canvas.height = height;
-
-  const ctx = canvas.getContext("2d");
-  if (ctx) {
-    ctx.fillStyle = "black";
-    ctx.fillRect(0, 0, width, height);
-  }
-
-  // Use 1 FPS instead of 30 for synthetic tracks
-  const stream = canvas.captureStream(1);
-  return stream.getVideoTracks()[0];
-};
-
-// Helper function to create a silent audio track
 const createSilentAudioTrack = (): MediaStreamTrack => {
   const audioContext = new AudioContext();
   const oscillator = audioContext.createOscillator();
   const gainNode = audioContext.createGain();
   const destination = audioContext.createMediaStreamDestination();
-
-  // Set gain to 0 for silence
   gainNode.gain.value = 0;
-
-  // Connect: oscillator -> gain -> destination
   oscillator.connect(gainNode);
   gainNode.connect(destination);
-
   oscillator.start();
-
   const track = destination.stream.getAudioTracks()[0];
+
+  // Store cleanup function
+  (track as any).stopOscillator = () => {
+    oscillator.stop();
+    audioContext.close();
+  };
+
   track.enabled = true;
   return track;
 };
 
-// Types for peer and track context
+/* ---------- Peer Types ---------- */
+
 interface Peer {
   session_id: string;
-  peerName: string;
+  peer_name: string;
   attributes: Record<string, any>;
   muted: boolean;
-  video_on: boolean /* Set by client */;
+  video_on: boolean;
   local: boolean;
   dead: boolean;
   connection?: RTCPeerConnection;
-  queuedCandidates?: RTCIceCandidateInit[];
 }
 export type { Peer };
 
@@ -143,20 +140,25 @@ interface AddPeerConfig {
 
 interface SessionDescriptionData {
   peer_id: string;
+  peer_name: string;
   session_description: RTCSessionDescriptionInit;
 }
 
 interface IceCandidateData {
   peer_id: string;
+  peer_name: string;
   candidate: RTCIceCandidateInit;
 }
 
 interface RemovePeerData {
+  peer_name: string;
   peer_id: string;
 }
 
+/* ---------- Video Element with Fade-in ---------- */
+
 interface VideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {
-  srcObject: MediaProvider;
+  srcObject: MediaStream;
   local?: boolean;
 }
 
@@ -164,59 +166,93 @@ const Video: React.FC<VideoProps> = ({ srcObject, local, ...props }) => {
   const refVideo = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
-    if (!refVideo.current || !srcObject) {
-      return;
-    }
+    if (!refVideo.current || !srcObject) return;
 
     const ref = refVideo.current;
-    console.log("Setting video srcObject:", srcObject);
+    console.log("media-agent - <Video/> - Setting video srcObject:", srcObject);
 
     ref.srcObject = srcObject;
-    if (local) {
-      ref.muted = true;
-    }
 
-    // Force play the video
+    // Always mute initially to satisfy autoplay policy
+    ref.muted = true;
+
     const playVideo = async () => {
       try {
         await ref.play();
-        console.log("Video started playing");
+        ref.classList.add("fade-in");
+        console.log(`media-agent - <Video/> - Video started playing for ${local ? "local" : "remote"} video`);
+
+        // For remote videos, unmute after successful play (unless explicitly muted by user)
+        if (!local) {
+          // Small delay to ensure playback has started
+          setTimeout(() => {
+            if (ref && !props.muted) {
+              ref.muted = false;
+            }
+          }, 100);
+        }
       } catch (error) {
-        console.error("Error playing video:", error);
+        console.error(`media-agent - <Video/> - Error playing video for ${local ? "local" : "remote"} video`, error);
+
+        // If autoplay fails, add a click handler to start playback
+        const handleClick = async () => {
+          try {
+            await ref.play();
+            ref.muted = false; // Can unmute after user interaction
+            ref.removeEventListener("click", handleClick);
+            console.log(`media-agent - <Video/> - Video started after user click`);
+          } catch (err) {
+            console.error(`media-agent - <Video/> - Failed to play after click:`, err);
+          }
+        };
+
+        ref.addEventListener("click", handleClick);
+        ref.style.cursor = "pointer"; // Show it's clickable
       }
     };
 
-    // Play after a short delay to ensure srcObject is set
-    setTimeout(playVideo, 100);
+    const timeoutId = setTimeout(playVideo, 100);
 
     return () => {
-      console.log("Cleaning up video srcObject");
+      clearTimeout(timeoutId);
       if (ref) {
         ref.srcObject = null;
+        ref.classList.remove("fade-in");
+        ref.style.cursor = "default";
       }
     };
-  }, [srcObject, local]);
+  }, [srcObject, local, props.muted]);
 
-  return <video ref={refVideo} autoPlay playsInline muted={local} {...props} />;
+  return <video ref={refVideo} autoPlay playsInline muted {...props} />;
 };
 
+/* ---------- MediaAgent (signaling + peer setup) ---------- */
+
 type MediaAgentProps = {
   socketUrl: string;
   session: Session;
   peers: Record<string, Peer>;
-  setPeers: (peers: Record<string, Peer>) => void;
+  setPeers: React.Dispatch<React.SetStateAction<Record<string, Peer>>>;
 };
 
-type JoinStatus = {
-  status: "Not joined" | "Joining" | "Joined" | "Error";
-  message?: string;
-};
+type JoinStatus = { status: "Not joined" | "Joining" | "Joined" | "Error"; message?: string };
 
 const MediaAgent = (props: MediaAgentProps) => {
   const { peers, setPeers, socketUrl, session } = props;
   const [joinStatus, setJoinStatus] = useState<JoinStatus>({ status: "Not joined" });
-  // track: null = no local media, MediaStream = local media
   const [media, setMedia] = useState<MediaStream | null>(null);
+  const [pendingPeers, setPendingPeers] = useState<AddPeerConfig[]>([]);
+
+  // Refs for singleton resources
+  const mediaStreamRef = useRef<MediaStream | null>(null);
+  const connectionsRef = useRef<Map<string, RTCPeerConnection>>(new Map());
+  const mountedRef = useRef<boolean>(true);
+  // Keep track of last processed message to avoid duplicates
+  const lastProcessedMessageRef = useRef<string | null>(null);
+  const isNegotiatingRef = useRef<Map<string, boolean>>(new Map());
+  const makingOfferRef = useRef<Map<string, boolean>>(new Map());
+  const initiatedOfferRef = useRef<Set<string>>(new Set());
+  const pendingIceCandidatesRef = useRef<Map<string, RTCIceCandidateInit[]>>(new Map());
 
   const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket(socketUrl, {
     share: true,
@@ -224,72 +260,103 @@ const MediaAgent = (props: MediaAgentProps) => {
       console.error(err);
     },
     onClose: (_event: CloseEvent) => {
-      if (!session) {
-        return;
-      }
+      if (!session) return;
+
       console.log(`media-agent - ${session.name} Disconnected from signaling server`);
-      /* Tear down all of our peer connections and remove all the
-       * media divs when we disconnect */
-      for (let peer_id in peers) {
-        if (peers[peer_id].local) {
-          continue;
-        }
-        if (peers[peer_id].connection) {
-          peers[peer_id].connection?.close();
-          peers[peer_id].connection = undefined;
-        }
-      }
 
-      for (let id in peers) {
-        peers[id].dead = true;
-        peers[id].connection = undefined;
-      }
+      // Clean up all peer connections
+      connectionsRef.current.forEach((connection, peerId) => {
+        connection.close();
+      });
+      connectionsRef.current.clear();
 
-      if (debug) console.log(`media-agent - close`, peers);
-      setPeers({ ...peers });
+      // Mark all peers as dead
+      const updatedPeers = { ...peers };
+      Object.keys(updatedPeers).forEach((id) => {
+        if (!updatedPeers[id].local) {
+          updatedPeers[id].dead = true;
+          updatedPeers[id].connection = undefined;
+        }
+      });
+
+      if (debug) console.log(`media-agent - close`, updatedPeers);
+      setPeers(updatedPeers);
     },
   });
 
+  useEffect(() => {
+    for (let peer in peers) {
+      console.log(`media-agent - useEffect(peers): Peer ${peers[peer].peer_name}:`, peers[peer]);
+    }
+  }, [peers]);
+
   const addPeer = useCallback(
-    (config: AddPeerConfig) => {
-      console.log("media-agent - addPeer - ", { config, peers });
-      if (!media) {
-        console.log("media-agent - addPeer - No local media yet, deferring");
-        return;
-      }
-      const peer_id = config.peer_id;
-      if (peer_id in peers) {
-        if (!peers[config.peer_id].dead) {
-          console.log(`media-agent - addPeer - ${config.peer_id} already in peers`);
+    async (config: AddPeerConfig) => {
+      console.log(`media-agent - addPeer:${config.peer_name} - Callback triggered`, config);
+      // Check if connection already exists
+      const existingConnection = connectionsRef.current.get(config.peer_id);
+      if (existingConnection) {
+        const state = existingConnection.connectionState;
+        if (state === "new" || state === "connected" || state === "connecting") {
+          console.log(
+            `media-agent - addPeer:${config.peer_name} Connection already exists for ${config.peer_name} in state: ${state}`
+          );
           return;
+        } else {
+          // Clean up failed/closed connection
+          console.log(
+            `media-agent - addPeer:${config.peer_name} Cleaning up stale connection for ${config.peer_name} in state: ${state}`
+          );
+          existingConnection.close();
+          connectionsRef.current.delete(config.peer_id);
         }
       }
+
+      // Queue peer if media not ready
+      if (!media) {
+        console.log(`media-agent - addPeer:${config.peer_name}  - No local media yet, queuing peer`);
+        setPendingPeers((prev) => {
+          // Avoid duplicate queuing
+          if (!prev.some((p) => p.peer_id === config.peer_id)) {
+            return [...prev, config];
+          }
+          return prev;
+        });
+        return;
+      }
+
+      const peer_id = config.peer_id;
+
+      // Check if peer already exists and is alive
+      if (peer_id in peers && !peers[peer_id].dead) {
+        console.log(`media-agent - addPeer:${config.peer_name} - ${config.peer_name} already in peers and alive`);
+        return;
+      }
+
+      // Create or revive peer
+      const updatedPeers = { ...peers };
       const peer: Peer = {
         session_id: peer_id,
-        peerName: config.peer_name,
+        peer_name: config.peer_name,
         attributes: {},
-        muted: false,
-        video_on: true,
+        muted: updatedPeers[peer_id]?.muted || false,
+        video_on: updatedPeers[peer_id]?.video_on !== false,
         local: false,
         dead: false,
       };
 
-      if (peer_id in peers) {
-        peer.muted = peers[config.peer_id].muted;
-        peer.video_on = peers[config.peer_id].video_on;
-        console.log(`media-agent - addPeer - reviving dead peer ${peer.peerName}`);
-      } else {
-        peer.muted = false;
-        peer.video_on = true;
-        peers[peer_id] = peer;
-        console.log(`media-agent - addPeer - starting new peer ${peer.peerName}`);
-      }
-
-      console.log(`media-agent - addPeer - remote`, peers);
-      setPeers({ ...peers });
+      updatedPeers[peer_id] = peer;
+      console.log(
+        `media-agent - addPeer:${peer.peer_name} - ${peer_id in peers ? "reviving" : "starting new"} peer ${
+          peer.peer_name
+        }`
+      );
 
+      // Create RTCPeerConnection
       const connection = new RTCPeerConnection({
         iceServers: [
+          // { urls: "stun:stun.l.google.com:19302" },
+          // { urls: "stun:stun1.l.google.com:19302" },
           {
             urls: "turns:ketrenos.com:5349",
             username: "ketra",
@@ -299,54 +366,131 @@ const MediaAgent = (props: MediaAgentProps) => {
       });
 
       peer.connection = connection;
+      connectionsRef.current.set(peer_id, connection);
 
-      connection.addEventListener("connectionstatechange", (event) => {
-        console.log(`media-agent - connectionstatechange - `, connection.connectionState, event);
-        if (connection.connectionState === "failed") {
-          console.log("Connection failed, attempting recovery...");
-          // Implement retry logic or notify user
-          peer.dead = true;
-          setPeers({ ...peers });
+      if (config.should_create_offer) {
+        initiatedOfferRef.current.add(peer_id);
+        // Pre-set the makingOffer flag to prevent negotiationneeded from firing
+        makingOfferRef.current.set(peer_id, true);
+      }
+
+      // Set up event handlers
+      connection.addEventListener("negotiationneeded", async (event) => {
+        console.log(`media-agent - addPeer:${peer.peer_name} negotiationneeded - ${connection.signalingState}`, event);
+
+        // Check if we're already making an offer (set by should_create_offer)
+        const makingOffer = makingOfferRef.current.get(peer_id) || false;
+        if (makingOffer) {
+          console.log(`media-agent - addPeer:${peer.peer_name} Already making offer, skipping negotiationneeded...`);
+          return;
+        }
+
+        // Check if we're already negotiating
+        const isNegotiating = isNegotiatingRef.current.get(peer_id) || false;
+        if (isNegotiating) {
+          console.log(`media-agent - addPeer:${peer.peer_name} Already negotiating, skipping...`);
+          return;
+        }
+
+        // Only proceed if we're in a stable state
+        if (connection.signalingState !== "stable") {
+          console.log(
+            `media-agent - addPeer:${peer.peer_name} Skipping negotiation, signalingState: ${connection.signalingState}`
+          );
+          return;
+        }
+
+        console.log(`media-agent - addPeer:${peer.peer_name} Handling negotiationneeded for ${peer.peer_name}`);
+
+        try {
+          makingOfferRef.current.set(peer_id, true);
+          isNegotiatingRef.current.set(peer_id, true);
+
+          // Set transceiver direction to avoid m-line ordering issues
+          const transceivers = connection.getTransceivers();
+          transceivers.forEach((transceiver) => {
+            if (transceiver.sender.track) {
+              transceiver.direction = "sendrecv";
+            }
+          });
+
+          const local_description = await connection.createOffer();
+
+          // Check if connection is still in the right state
+          if (connection.signalingState !== "stable") {
+            console.log(`media-agent - addPeer:${peer.peer_name} State changed during offer creation, aborting`);
+            return;
+          }
+
+          await connection.setLocalDescription(local_description);
+
+          sendJsonMessage({
+            type: "relaySessionDescription",
+            data: { peer_id: peer_id, session_description: local_description },
+          });
+          console.log(`media-agent - addPeer:${peer.peer_name} Offer sent`, local_description);
+        } catch (error) {
+          console.error(`media-agent - addPeer:${peer.peer_name} negotiationneeded handling failed:`, error);
+        } finally {
+          makingOfferRef.current.set(peer_id, false);
+          // Keep isNegotiating true until we get an answer
         }
       });
 
-      connection.addEventListener("negotiationneeded", (event) => {
-        console.log(`media-agent - negotiationneeded - `, connection.connectionState, event);
+      connection.addEventListener("connectionstatechange", (event) => {
+        console.log(
+          `media-agent - addPeer:${peer.peer_name} connectionstatechange - `,
+          connection.connectionState,
+          event
+        );
+        if (connection.connectionState === "failed") {
+          setTimeout(() => {
+            if (connection.connectionState === "failed") {
+              console.log(`media-agent - addPeer:${peer.peer_name} Cleaning up failed connection for`, peer.peer_name);
+              connectionsRef.current.delete(peer_id);
+              // You might want to trigger a reconnection attempt here
+            }
+          }, 5000);
+        }
       });
 
       connection.addEventListener("icecandidateerror", (event: Event) => {
         const evt = event as RTCPeerConnectionIceErrorEvent;
         if (evt.errorCode === 701) {
-          if (connection.iceGatheringState === "gathering") {
-            console.error(`media-agent - Unable to reach host negotiating for ${peer.peerName}:`, evt);
-          } else {
-            console.error(`media-agent - icecandidateerror negotiating for ${peer.peerName}:`, evt);
-          }
-        } else {
-          console.error(`media-agent - icecandidateerror for ${peer.peerName}:`, evt);
+          console.error(`media-agent - addPeer:${peer.peer_name} ICE candidate error for ${peer.peer_name}:`, evt);
         }
-        console.log("media-agent - icecandidateerror attempting addPeer again in 3 seconds");
-        peer.dead = true;
+      });
+
+      connection.addEventListener("track", (event) => {
+        console.log(
+          `media-agent - addPeer:${peer.peer_name} Track event:`,
+          event.track.kind,
+          "muted:",
+          event.track.muted,
+          "enabled:",
+          event.track.enabled
+        );
+
+        // Force unmute check after a delay
+        setTimeout(() => {
+          console.log(
+            `media-agent - addPeer:${peer.peer_name} Track after delay:`,
+            event.track.kind,
+            "muted:",
+            event.track.muted,
+            "enabled:",
+            event.track.enabled
+          );
+        }, 1000);
       });
 
       connection.onicecandidate = (event: RTCPeerConnectionIceEvent) => {
         if (!event.candidate) {
-          console.log(`media-agent - icecanditate - gathering is complete: ${connection.connectionState}`);
+          console.log(`media-agent - addPeer:${peer.peer_name} ICE gathering complete: ${connection.connectionState}`);
           return;
         }
-        /* If a srflx candidate was found, notify that the STUN server works! */
-        if (event.candidate.type === "srflx") {
-          console.log("media-agent - The STUN server is reachable!");
-          console.log(`media-agent -    Your Public IP Address is: ${event.candidate.address}`);
-        }
-
-        /* If a relay candidate was found, notify that the TURN server works! */
-        if (event.candidate.type === "relay") {
-          console.log("media-agent - The TURN server is reachable !");
-        }
-
-        console.log(`media-agent - onicecandidate - `, event.candidate);
 
+        console.log(`media-agent - addPeer:${peer.peer_name} onicecandidate - `, event.candidate);
         sendJsonMessage({
           type: "relayICECandidate",
           data: {
@@ -357,9 +501,8 @@ const MediaAgent = (props: MediaAgentProps) => {
       };
 
       connection.ontrack = (event: RTCTrackEvent) => {
-        console.log("media-agent - ontrack event received", event);
+        console.log(`media-agent - addPeer:${config.peer_name} ontrack event received`, event);
 
-        // Always normalize to a MediaStream
         let stream: MediaStream;
         if (event.streams && event.streams[0]) {
           stream = event.streams[0];
@@ -368,334 +511,352 @@ const MediaAgent = (props: MediaAgentProps) => {
           stream.addTrack(event.track);
         }
 
-        console.log("media-agent - ontrack - Stream:", stream);
-        console.log("media-agent - ontrack - Track:", event.track);
+        console.log(`media-agent - addPeer:${config.peer_name} ontrack - Stream:`, stream);
+        console.log(`media-agent - addPeer:${config.peer_name} ontrack - Track:`, event.track);
 
-        for (let peerId in peers) {
-          if (peers[peerId].connection === connection) {
-            console.log(`media-agent - ontrack - remote ${peerId} track assigned.`);
-            peers[peerId].attributes = {
-              ...peers[peerId].attributes,
-              srcObject: stream, // ✅ always a MediaStream
+        // Update peer with stream - use peer_id from closure, not peer object
+        setPeers((prevPeers) => {
+          const updated = { ...prevPeers };
+          if (updated[peer_id]) {
+            // Don't check connection reference - just update if peer exists
+            updated[peer_id].attributes = {
+              ...updated[peer_id].attributes,
+              srcObject: stream,
             };
-            setPeers({ ...peers });
+            console.log(
+              `media-agent - addPeer:${config.peer_name} ontrack - remote ${peer_id} track assigned, srcObject:`,
+              stream
+            );
+          } else {
+            console.error(`media-agent - addPeer:${config.peer_name} ontrack - peer ${peer_id} not found in state`);
           }
-        }
+          return updated;
+        });
       };
 
       connection.oniceconnectionstatechange = (event) => {
-        console.log(`media-agent - iceconnectionstatechange - `, connection.iceConnectionState, event);
+        console.log(
+          `media-agent - addPeer:${peer.peer_name} iceconnectionstatechange - `,
+          connection.iceConnectionState,
+          event
+        );
         if (connection.iceConnectionState === "failed") {
-          console.log("ICE connection failed, attempting recovery...");
-          // Implement retry logic or notify user
-          peer.dead = true;
-          setPeers({ ...peers });
+          console.log("media-agent - ICE connection failed for", peer.peer_name);
         }
       };
 
-      console.log("Adding local tracks to new peer connection");
+      // Add local tracks
+      console.log(`media-agent - addPeer:${peer.peer_name} Adding local tracks to new peer connection`);
       media.getTracks().forEach((t) => {
-        console.log("Adding track:", t.kind, t.enabled);
-        connection.addTrack(t, media!);
+        console.log(`media-agent - addPeer:${peer.peer_name} Adding track:`, t.kind, t.enabled);
+        connection.addTrack(t, media);
       });
 
+      // Update peers state
+      setPeers(updatedPeers);
+
+      // Create offer if needed - with proper locking
       if (config.should_create_offer) {
-        console.log(`media-agent - Creating RTC offer to ${peer.peerName}`);
-        connection
-          .createOffer()
-          .then((local_description) => {
-            console.log(`media-agent - Local offer description is: `, local_description);
-            return connection.setLocalDescription(local_description).then(() => {
-              sendJsonMessage({
-                type: "relaySessionDescription",
-                data: {
-                  peer_id,
-                  session_description: local_description,
-                },
-              });
-            });
-          })
-          .catch((error) => {
-            console.error(`media-agent - Offer setLocalDescription failed!`, error);
+        console.log(`media-agent - addPeer:${peer.peer_name} Creating RTC offer to ${peer.peer_name}`);
+
+        try {
+          isNegotiatingRef.current.set(peer_id, true);
+
+          const local_description = await connection.createOffer();
+          console.log(`media-agent - addPeer:${peer.peer_name} Local offer description created`, local_description);
+
+          await connection.setLocalDescription(local_description);
+
+          sendJsonMessage({
+            type: "relaySessionDescription",
+            data: {
+              peer_id,
+              session_description: local_description,
+            },
           });
+          console.log(`media-agent - addPeer:${peer.peer_name} Offer sent to ${peer.peer_name}`);
+        } catch (err) {
+          console.error(`media-agent - addPeer:${peer.peer_name} Failed to create/send offer:`, err);
+          isNegotiatingRef.current.set(peer_id, false);
+        } finally {
+          // Clear the makingOffer flag after we're done
+          makingOfferRef.current.set(peer_id, false);
+        }
       }
     },
     [peers, setPeers, media, sendJsonMessage]
   );
 
+  // Process queued peers when media becomes available
+  useEffect(() => {
+    if (media && pendingPeers.length > 0) {
+      console.log(`media-agent - Processing ${pendingPeers.length} queued peers`);
+      const peersToAdd = [...pendingPeers];
+      setPendingPeers([]);
+      peersToAdd.forEach((config) => addPeer(config));
+    }
+  }, [media, pendingPeers, addPeer]);
+
   const sessionDescription = useCallback(
     async (props: SessionDescriptionData) => {
-      const { peer_id, session_description } = props;
+      const { peer_id, peer_name, session_description } = props;
       const peer = peers[peer_id];
+
+      console.log(`media-agent - sessionDescription:${peer_name} - Callback triggered.`, props);
+
       if (!peer || !peer.connection) {
-        console.error(`media-agent - sessionDescription - No peer for ${peer.peerName}`);
+        console.error(`media-agent - sessionDescription:${peer_name} - No peer for ${peer_id}`);
         return;
       }
-      console.log(`media-agent - sessionDescription - `, { peer_id, session_description, peer });
+
       const pc = peer.connection;
       const desc = new RTCSessionDescription(session_description);
-      // --- Decide if we're allowed to apply it, before setRemoteDescription ---
-      if (desc.type === "answer") {
-        // Only valid when we're the offerer waiting for an answer
-        if (pc.signalingState !== "have-local-offer") {
-          console.warn(`media-agent - sessionDescription - Ignoring remote answer; signalingState=${pc.signalingState}`);
-          return;
-        }
-      } else if (desc.type === "offer") {
-        // Offers are only valid when we're ready to accept them.
-        // If we also have a local offer, it's glare; rollback first.
-        if (pc.signalingState === "have-local-offer") {
-          console.log(
-            "media-agent - sessionDescription - Glare detected: performing rollback before applying remote offer"
-          );
-          await pc.setLocalDescription({ type: "rollback" } as any);
-        } else if (pc.signalingState !== "stable") {
-          console.warn(`media-agent - sessionDescription - Ignoring offer; signalingState=${pc.signalingState}`);
-          return;
-        }
-      }
-      // --- Now it is safe to apply the remote description ---
-      try {
-        await pc.setRemoteDescription(desc);
-        console.log("media-agent - sessionDescription - setRemoteDescription succeeded");
-      } catch (err) {
-        console.error("media-agent - sessionDescription - Failed to set remote description:", err);
+
+      // Check for glare condition (both peers creating offers simultaneously)
+      const makingOffer = makingOfferRef.current.get(peer_id) || false;
+      const offerCollision = desc.type === "offer" && (makingOffer || pc.signalingState !== "stable");
+
+      // Use polite peer pattern - we're impolite if we initiated the connection
+      const weInitiated = initiatedOfferRef.current.has(peer_id);
+      const ignoreOffer = weInitiated && offerCollision;
+
+      if (ignoreOffer) {
+        console.log(`media-agent - sessionDescription:${peer_name} - Ignoring offer due to collision`);
         return;
       }
 
-      // Process queued candidates after a successful remote description
-      if (peer.queuedCandidates?.length) {
-        console.log(`media-agent - sessionDescription - Processing ${peer.queuedCandidates.length} queued candidates`);
-        try {
-          await Promise.all(peer.queuedCandidates.map((c) => pc.addIceCandidate(new RTCIceCandidate(c))));
-          peer.queuedCandidates = [];
-          console.log("media-agent - sessionDescription - All queued candidates processed");
-        } catch (err) {
-          console.error("media-agent - sessionDescription - Error processing queued candidates:", err);
+      console.log(`media-agent - sessionDescription:${peer_name} - `, {
+        peer_id,
+        type: desc.type,
+        signalingState: pc.signalingState,
+      });
+
+      try {
+        await pc.setRemoteDescription(desc);
+        isNegotiatingRef.current.set(peer_id, false); // Negotiation complete
+        console.log(`media-agent - sessionDescription:${peer_name} - Remote description set`);
+
+        // Process any queued ICE candidates
+        const pendingCandidates = pendingIceCandidatesRef.current.get(peer_id);
+        if (pendingCandidates && pendingCandidates.length > 0) {
+          console.log(
+            `media-agent - sessionDescription:${peer_name} - Processing ${pendingCandidates.length} queued ICE candidates`
+          );
+
+          for (const candidate of pendingCandidates) {
+            try {
+              await pc.addIceCandidate(new RTCIceCandidate(candidate));
+              console.log(`media-agent - sessionDescription:${peer_name} - Queued ICE candidate added`);
+            } catch (err) {
+              console.error(`media-agent - sessionDescription:${peer_name} - Failed to add queued ICE candidate:`, err);
+            }
+          }
+
+          // Clear the queue
+          pendingIceCandidatesRef.current.delete(peer_id);
         }
+      } catch (err) {
+        console.error(`media-agent - sessionDescription:${peer_name} - Failed to set remote description:`, err);
+        return;
       }
 
-      // Answer only if we just accepted an offer and we're in have-remote-offer
-      if (desc.type === "offer" && pc.signalingState === "have-remote-offer") {
-        console.log("media-agent - sessionDescription - Creating answer for received offer");
+      // Create answer for offers
+      if (session_description.type === "offer") {
+        console.log(
+          `media-agent - sessionDescription:${peer_name} - Creating answer for received offer in state:`,
+          pc.signalingState
+        );
         try {
-          const answer = await pc.createAnswer();
-          await pc.setLocalDescription(answer);
+          const local_description = await pc.createAnswer();
+          await pc.setLocalDescription(local_description);
           sendJsonMessage({
             type: "relaySessionDescription",
-            data: { peer_id, session_description: answer },
+            data: { peer_id, session_description: local_description },
           });
-          console.log("media-agent - sessionDescription - Answer setLocalDescription succeeded; sent answer");
+          console.log(`media-agent - sessionDescription:${peer_name} - Answer sent`);
         } catch (err) {
-          console.error("media-agent - sessionDescription - Failed to create/send answer:", err);
+          console.error(`media-agent - sessionDescription:${peer_name} - Failed to create/send answer:`, err);
         }
       }
-
-      if (desc.type === "answer") {
-        console.log("media-agent - sessionDescription - Remote answered our offer");
-      }
     },
     [peers, sendJsonMessage]
   );
 
   const removePeer = useCallback(
     (props: RemovePeerData) => {
-      const { peer_id } = props;
+      const { peer_id, peer_name } = props;
       const peer = peers[peer_id];
       if (!peer) {
-        console.error(`media-agent - removePeer - No peer for ${peer_id}`, peers);
+        console.error(`media-agent - removePeer:${peer_name} - No peer for ${peer_id}`);
         return;
       }
-      console.log(`media-agent - removePeer - Signaling server said to remove peer ${peer.peerName}`);
-      if (peer_id in peers) {
-        /* To maintain mute/videoOn states, we don't remove the peer but
-         * instead mark it as dead */
-        peers[peer_id].dead = true;
-        if (peers[peer_id].connection) {
-          peers[peer_id].connection?.close();
-          peers[peer_id].connection = undefined;
-        }
+
+      console.log(`media-agent - removePeer:${peer_name} - Removing peer.`);
+
+      // Close and remove connection
+      const connection = connectionsRef.current.get(peer_id);
+      if (connection) {
+        console.log(`media-agent - removePeer:${peer_name} - Closing connection.`);
+        connection.close();
+        connectionsRef.current.delete(peer_id);
       }
 
-      console.log(`media-agent - removePeer`, peers);
-      setPeers({ ...peers });
+      // Clean up negotiation state
+      isNegotiatingRef.current.delete(peer_id);
+      makingOfferRef.current.delete(peer_id);
+      initiatedOfferRef.current.delete(peer_id);
+      pendingIceCandidatesRef.current.delete(peer_id);
+
+      // Update peers state
+      const updatedPeers = { ...peers };
+      if (updatedPeers[peer_id]) {
+        updatedPeers[peer_id].dead = true;
+        updatedPeers[peer_id].connection = undefined;
+      }
+
+      setPeers(updatedPeers);
     },
     [peers, setPeers]
   );
 
   const iceCandidate = useCallback(
-    (props: IceCandidateData) => {
-      const { peer_id, candidate } = props;
+    async (props: IceCandidateData) => {
+      const { peer_id, peer_name, candidate } = props;
       const peer = peers[peer_id];
-      console.log(`media-agent - iceCandidate - `, { peer_id, candidate, peer });
+      console.log(`media-agent - iceCandidate:${peer_name} - `, { peer_id, candidate, peer });
+
       if (!peer?.connection) {
-        console.error(`media-agent - iceCandidate - No peer for ${peer_id}`, peers);
+        console.error(`media-agent - iceCandidate:${peer_name} - No peer connection for ${peer_id}`);
         return;
       }
 
-      // Critical fix: Queue candidates if remote description not set
-      if (peer.connection.remoteDescription) {
-        peer.connection
-          .addIceCandidate(new RTCIceCandidate(candidate))
-          .then(() => console.log(`media-agent - iceCandidate - Successfully added Ice Candidate for ${peer.peerName}`))
-          .catch((err) => console.error("media-agent - iceCandidate - Failed to add ICE candidate:", err));
-      } else {
-        // Queue the candidate for later processing
-        if (!peer.queuedCandidates) peer.queuedCandidates = [];
-        peer.queuedCandidates.push(candidate);
-        console.log(
-          `media-agent - iceCandidate - Queued ICE candidate for ${peer.peerName} (no remote description yet)`
-        );
+      // Check if remote description is set
+      if (!peer.connection.remoteDescription) {
+        console.log(`media-agent - iceCandidate:${peer_name} - Remote description not set yet, queuing ICE candidate`);
+
+        // Queue the candidate
+        const pending = pendingIceCandidatesRef.current.get(peer_id) || [];
+        pending.push(candidate);
+        pendingIceCandidatesRef.current.set(peer_id, pending);
+        return;
       }
+
+      // Add the ICE candidate
+      peer.connection
+        .addIceCandidate(new RTCIceCandidate(candidate))
+        .then(() => console.log(`media-agent - iceCandidate::${peer_name} - ICE candidate added for ${peer.peer_name}`))
+        .catch((err) => console.error(`media-agent - iceCandidate::${peer_name} - Failed to add ICE candidate:`, err));
     },
     [peers]
   );
 
+  const handleWebSocketMessage = useCallback(
+    (data: any) => {
+      console.log(`media-agent - WebSocket message received:`, data.type, data.data);
+
+      switch (data.type) {
+        case "join_status":
+          setJoinStatus({ status: data.status, message: data.message });
+          break;
+        case "addPeer":
+          addPeer(data.data);
+          break;
+        case "removePeer":
+          removePeer(data.data);
+          break;
+        case "iceCandidate":
+          iceCandidate(data.data);
+          break;
+        case "sessionDescription":
+          sessionDescription(data.data);
+          break;
+        default:
+          break;
+      }
+    },
+    [addPeer, removePeer, iceCandidate, sessionDescription]
+  );
+
+  // Effect runs when new message arrives
   useEffect(() => {
-    if (!lastJsonMessage || !session) {
+    if (!lastJsonMessage || !session) return;
+
+    const msgKey = JSON.stringify(lastJsonMessage);
+    if (lastProcessedMessageRef.current === msgKey) {
+      // already handled this one
       return;
     }
-    const data: any = lastJsonMessage;
+    lastProcessedMessageRef.current = msgKey;
 
-    switch (data.type) {
-      case "join_status":
-        setJoinStatus({ status: data.status, message: data.message });
-        break;
-      case "addPeer":
-        addPeer(data.data);
-        break;
-      case "removePeer":
-        removePeer(data.data);
-        break;
-      case "iceCandidate":
-        iceCandidate(data.data);
-        break;
-      case "sessionDescription":
-        sessionDescription(data.data);
-        break;
-      default:
-        break;
-    }
-  }, [lastJsonMessage, addPeer, removePeer, iceCandidate, sessionDescription, peers, session]);
+    handleWebSocketMessage(lastJsonMessage);
+  }, [lastJsonMessage, handleWebSocketMessage, session]);
 
+  // Join lobby when media is ready
   useEffect(() => {
-    console.log(`media-control - Context changed`, media, joinStatus);
-
-    const join = () => {
-      if (joinStatus.status === "Joined" || joinStatus.status === "Joining" || joinStatus.status === "Error") {
-        console.log(
-          `media-control - Join status: ${joinStatus.status} - ${joinStatus.message || "No message"}, skipping`
-        );
-        return;
-      }
+    if (media && joinStatus.status === "Not joined" && readyState === ReadyState.OPEN) {
+      console.log(`media-agent - Initiating media join for ${session.name}`);
       setJoinStatus({ status: "Joining" });
-      sendJsonMessage({
-        type: "join",
-      });
-    };
+      sendJsonMessage({ type: "join" });
+    }
+  }, [media, joinStatus.status, sendJsonMessage, readyState, session.name]);
 
-    if (media && joinStatus.status === "Not joined") {
-      console.log(`media-control - issuing join request: `, media);
-      for (let peer in peers) {
-        if (peers[peer].local && peers[peer].dead) {
-          // Mark as alive
-          peers[peer] = { ...peers[peer], dead: false };
-          setPeers({ ...peers });
+  // Update local peer in peers list
+  useEffect(() => {
+    if (!session || !media) return;
+
+    setPeers((prevPeers) => {
+      const updated = { ...prevPeers };
+
+      // Remove old local peer if session ID changed
+      Object.keys(updated).forEach((key) => {
+        if (updated[key].local && key !== session.id) {
+          delete updated[key];
         }
-      }
-      join();
-    }
-  }, [media, peers, setPeers, sendJsonMessage, joinStatus]);
+      });
 
-  useEffect(() => {
-    if (!media) return;
-
-    console.log("media-agent - Track changed, updating all peer connections");
-
-    // Add tracks to all existing peer connections
-    for (let peer_id in peers) {
-      const peer = peers[peer_id];
-      if (peer.connection && !peer.local && !peer.dead) {
-        console.log(`media-agent - Adding tracks to existing peer ${peer.peerName}`);
-        media?.getTracks().forEach((t) => {
-          // Check if track is already added
-          const senders = peer.connection!.getSenders();
-          const trackAlreadyAdded = senders.some((sender) => sender.track === t);
-
-          if (!trackAlreadyAdded) {
-            console.log(`media-agent - Adding ${t.kind} track to ${peer.peerName}`);
-            peer.connection!.addTrack(t, media!);
-          }
-        });
-      }
-    }
-  }, [media, peers]);
-
-  useEffect(() => {
-    if (!session) {
-      return;
-    }
-    let update = false;
-    if (media && !(session.id in peers)) {
-      update = true;
-      peers[session.id] = {
-        peerName: session.name || "Unknown",
-        session_id: session.id,
-        local: true,
-        muted: true,
-        video_on: false,
-        attributes: {
+      // Add or update current local peer
+      if (!updated[session.id]) {
+        updated[session.id] = {
+          peer_name: session.name || "Unknown",
+          session_id: session.id,
           local: true,
-          srcObject: media,
-        },
-        dead: false,
-      };
-    }
-
-    /* Renaming the local connection requires the peer to be deleted
-     * and re-established with the signaling server */
-    for (let key in peers) {
-      if (peers[key].local && key !== session.id) {
-        delete peers[key];
-        update = true;
+          muted: true,
+          video_on: false,
+          attributes: {
+            local: true,
+            srcObject: media,
+          },
+          dead: false,
+        };
+        console.log(`media-agent - Added local peer to peers list`);
       }
-    }
 
-    if (update) {
-      if (debug) console.log(`media-agent - Setting global peers`, peers);
-      setPeers(Object.assign({}, peers));
-    }
-  }, [peers, session, setPeers, media]);
+      return updated;
+    });
+  }, [session, media, setPeers]);
 
-  const setup_local_media = async (): Promise<MediaStream> => {
-    console.log(`media-agent - Requesting access to local audio / video inputs`);
+  // Setup local media
+  const setup_local_media = useCallback(async (): Promise<MediaStream> => {
+    console.log(`media-agent - Requesting access to local audio/video`);
     const attempt = { get_audio: true, get_video: true };
     let media = null;
 
-    // Try to get user media with fallback logic
+    // Try to get user media with fallback
     while (attempt.get_audio || attempt.get_video) {
       try {
         const constraints: any = {};
-        if (attempt.get_audio) {
-          constraints.audio = true;
-        }
-        if (attempt.get_video) {
-          constraints.video = true;
-        }
+        if (attempt.get_audio) constraints.audio = true;
+        if (attempt.get_video) constraints.video = true;
 
-        console.log(
-          `media-agent - Attempting to get user media: audio=${attempt.get_audio}, video=${attempt.get_video}`
-        );
-        /* Success -- on failure, an exception is thrown */
+        console.log(`media-agent - Attempting getUserMedia: audio=${attempt.get_audio}, video=${attempt.get_video}`);
         media = await navigator.mediaDevices.getUserMedia(constraints);
         break;
       } catch (error) {
         if (attempt.get_video && attempt.get_audio) {
-          console.log(`media-agent - Disabling video and trying just audio`);
+          console.log(`media-agent - Disabling video, trying audio only`);
           attempt.get_video = false;
-          attempt.get_audio = true;
         } else if (attempt.get_audio && !attempt.get_video) {
-          console.log(`media-agent - Disabling audio and trying just video`);
+          console.log(`media-agent - Disabling audio, trying video only`);
           attempt.get_video = true;
           attempt.get_audio = false;
         } else {
@@ -706,7 +867,7 @@ const MediaAgent = (props: MediaAgentProps) => {
       }
     }
 
-    // Process the results and create appropriate media stream
+    // Build tracks array
     const tracks: MediaStreamTrack[] = [];
     let hasRealAudio = false;
     let hasRealVideo = false;
@@ -722,7 +883,6 @@ const MediaAgent = (props: MediaAgentProps) => {
       }
 
       if (videoTracks.length > 0) {
-        // Apply video constraints
         videoTracks[0].applyConstraints({
           width: { min: 160, max: 320 },
           height: { min: 120, max: 240 },
@@ -733,241 +893,265 @@ const MediaAgent = (props: MediaAgentProps) => {
       }
     }
 
-    // Add synthetic tracks as needed
+    // Add synthetic tracks if needed
     if (!hasRealAudio) {
       tracks.push(createSilentAudioTrack());
-      console.log("media-agent - Using synthetic silent audio");
+      console.log("media-agent - Using synthetic audio");
     }
 
     if (!hasRealVideo) {
-      tracks.push(createAnimatedVideoTrack());
-      console.log("media-agent - Using synthetic black video");
+      tracks.push(createAnimatedVideoTrack({ name: session.name || "" }));
+      console.log("media-agent - Using synthetic video");
     }
 
-    // Create final media stream
-    media = new MediaStream(tracks);
-
-    const mediaType =
-      hasRealAudio && hasRealVideo
-        ? "audio/video"
-        : hasRealAudio
-        ? "audio only"
-        : hasRealVideo
-        ? "video only"
-        : "synthetic audio/video";
-
-    console.log(`media-agent - Final media setup: ${mediaType}`);
-
-    return media;
-  };
+    const finalMedia = new MediaStream(tracks);
+    console.log(`media-agent - Media setup complete`);
+    return finalMedia;
+  }, [session.name]);
 
+  // Initialize media once
   useEffect(() => {
-    if (media !== null || readyState !== ReadyState.OPEN) {
-      return;
-    }
+    mountedRef.current = true;
 
-    console.log(`media-agent - Setting up local media (socket readyState=${readyState})`);
+    if (mediaStreamRef.current || readyState !== ReadyState.OPEN) return;
 
-    setup_local_media()
-      .then((media) => {
-        setMedia(media);
-      })
-      .catch((error) => {
-        console.error("media-agent - Failed to get local media:", error);
-        setMedia(null);
-      });
-  }, [readyState, setMedia, media]);
+    console.log(`media-agent - Setting up local media`);
+    setup_local_media().then((mediaStream) => {
+      if (!mountedRef.current) {
+        // Component unmounted, clean up
+        mediaStream.getTracks().forEach((track) => {
+          track.stop();
+          if ((track as any).stopAnimation) (track as any).stopAnimation();
+          if ((track as any).stopOscillator) (track as any).stopOscillator();
+        });
+        return;
+      }
 
-  return <></>;
+      mediaStreamRef.current = mediaStream;
+      setMedia(mediaStream);
+    });
+
+    return () => {
+      mountedRef.current = false;
+
+      // Clean up media stream
+      if (mediaStreamRef.current) {
+        mediaStreamRef.current.getTracks().forEach((track) => {
+          track.stop();
+          if ((track as any).stopAnimation) (track as any).stopAnimation();
+          if ((track as any).stopOscillator) (track as any).stopOscillator();
+        });
+        mediaStreamRef.current = null;
+      }
+
+      // Clean up connections
+      connectionsRef.current.forEach((connection) => connection.close());
+      connectionsRef.current.clear();
+    };
+  }, [readyState, setup_local_media]);
+
+  return null;
 };
 
+/* ---------- MediaControl (UI per peer) ---------- */
+
 interface MediaControlProps {
   isSelf: boolean;
   peer: Peer;
   className?: string;
 }
+
 const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className }) => {
-  const [media, setMedia] = useState<Peer | undefined>(undefined);
-  const [muted, setMuted] = useState<boolean>(false);
-  const [videoOn, setVideoOn] = useState<boolean>(true);
-  const [target, setTarget] = useState<Element | undefined>();
+  const [muted, setMuted] = useState<boolean>(peer?.muted || false);
+  const [videoOn, setVideoOn] = useState<boolean>(peer?.video_on !== false);
   const [isValid, setIsValid] = useState<boolean>(false);
-  const [frame, setFrame] = useState<{ translate: [number, number] }>({
-    translate: [0, 0],
-  });
 
   useEffect(() => {
-    console.log(`media-control - peer changed`, peer);
-    if (peer && peer.peerName) {
-      const el = document.querySelector(`.MediaControl[data-peer="${peer.session_id}"]`);
-      if (el) {
-        console.log(`media-control - setting target for ${peer.peerName}`);
-        setTarget(el);
-      } else {
-        console.warn(`media-control - no target for ${peer.peerName}`);
-        setTarget(undefined);
-      }
-    }
-  }, [setTarget, peer]);
-
-  /* local state is used to trigger re-renders, and the global
-   * state is kept up to date in the peers object so re-assignment
-   * of sessions doesn't kill the peer or change the mute/video states */
-  useEffect(() => {
-    if (!peer) {
-      setMedia(undefined);
-      return;
-    }
+    if (!peer) return;
     setMuted(peer.muted);
     setVideoOn(peer.video_on);
-    setMedia(peer);
-  }, [peer, setMedia, setMuted, setVideoOn]);
+  }, [peer]);
 
-  const toggleMute = (event: React.MouseEvent | React.TouchEvent) => {
-    if (debug) console.log(`media-control - toggleMute - ${peer.peerName}`, !muted);
+  useEffect(() => {
+    if (!peer || peer.dead || !peer.attributes?.srcObject) {
+      console.log(
+        `media-agent - isValid effect:${peer?.peer_name} - No valid media`,
+        peer?.dead,
+        peer.attributes?.srcObject
+      );
+      setIsValid(false);
+      return;
+    }
+
+    const stream = peer.attributes.srcObject as MediaStream;
+
+    // For remote peers, check if we have a connected peer connection
+    // For local peers, just check if we have live tracks
+    if (!peer.local && peer.connection) {
+      const isConnected =
+        peer.connection.connectionState === "connected" || peer.connection.connectionState === "connecting";
+      console.log(
+        `media-agent - isValid effect:${peer.peer_name} - Remote peer connection state: ${peer.connection.connectionState}`
+      );
+      setIsValid(isConnected);
+    } else {
+      const hasLiveTracks = stream.getTracks().some((track) => track.readyState === "live");
+      console.log(`media-agent - isValid effect:${peer.peer_name} - Local peer has live tracks: ${hasLiveTracks}`);
+      setIsValid(hasLiveTracks);
+    }
+
+    // Listen for connection state changes for remote peers
+    if (!peer.local && peer.connection) {
+      const handleConnectionChange = () => {
+        const isConnected =
+          peer.connection?.connectionState === "connected" || peer.connection?.connectionState === "connecting";
+        console.log(
+          `media-agent - isValid effect:${peer.peer_name} - Connection state changed: ${peer.connection?.connectionState}`
+        );
+        setIsValid(isConnected);
+      };
+
+      console.log(`media-agent - isValid effect:${peer.peer_name} - Adding connection state listener`);
+      peer.connection.addEventListener("connectionstatechange", handleConnectionChange);
+
+      return () => {
+        peer.connection?.removeEventListener("connectionstatechange", handleConnectionChange);
+      };
+    }
+
+    // Listen for track state changes
+    const handleTrackStateChange = () => {
+      if (!peer.local && peer.connection) {
+        const isConnected =
+          peer.connection.connectionState === "connected" || peer.connection.connectionState === "connecting";
+        console.log(
+          `media-agent - isValid effect:${peer.peer_name} - Track state changed, connection state: ${peer.connection.connectionState}`
+        );
+        setIsValid(isConnected);
+      } else {
+        const currentlyLive = stream.getTracks().some((track) => track.readyState === "live");
+        console.log(
+          `media-agent - isValid effect:${peer.peer_name} - Track state changed, live tracks: ${currentlyLive}`
+        );
+        setIsValid(currentlyLive);
+      }
+    };
+
+    stream.getTracks().forEach((track) => {
+      track.addEventListener("unmute", handleTrackStateChange);
+      track.addEventListener("ended", handleTrackStateChange);
+    });
+
+    return () => {
+      stream.getTracks().forEach((track) => {
+        track.removeEventListener("unmute", handleTrackStateChange);
+        track.removeEventListener("ended", handleTrackStateChange);
+      });
+    };
+  }, [peer, peer.attributes?.srcObject, peer.connection]);
+
+  useEffect(() => {
+    if (!peer || peer.dead || !peer.attributes?.srcObject) return;
+
+    const stream = peer.attributes.srcObject as MediaStream;
+    stream.getAudioTracks().forEach((t) => {
+      t.enabled = !muted;
+    });
+  }, [muted, peer]);
+
+  useEffect(() => {
+    if (!peer || peer.dead || !peer.attributes?.srcObject) return;
+
+    const stream = peer.attributes.srcObject as MediaStream;
+    stream.getVideoTracks().forEach((t) => {
+      t.enabled = videoOn;
+    });
+  }, [videoOn, peer]);
+
+  const toggleMute = (e: React.MouseEvent | React.TouchEvent) => {
+    e.stopPropagation();
     if (peer) {
       peer.muted = !muted;
       setMuted(peer.muted);
     }
-    event.stopPropagation();
   };
 
-  const toggleVideo = (event: React.MouseEvent | React.TouchEvent) => {
-    if (debug) console.log(`media-control - toggleVideo - ${peer.peerName}`, !videoOn);
+  const toggleVideo = (e: React.MouseEvent | React.TouchEvent) => {
+    e.stopPropagation();
     if (peer) {
       peer.video_on = !videoOn;
-      if (peer.video_on && media) {
-        const video = document.querySelector(`video[data-id="${media.peerName}"]`) as HTMLVideoElement | null;
-        if (video && typeof video.play === "function") {
-          video.play();
-        }
-      }
       setVideoOn(peer.video_on);
     }
-    event.stopPropagation();
   };
 
-  useEffect(() => {
-    if (!media || media.dead || !peer) {
-      return;
-    }
-    console.log(`media-control - media changed`, media);
-    if (media.attributes.srcObject) {
-      (media.attributes.srcObject.getAudioTracks() as MediaStreamTrack[]).forEach((track: MediaStreamTrack) => {
-        track.enabled = !muted;
-      });
-    }
-  }, [muted, media, peer]);
+  if (!peer) return null;
 
-  useEffect(() => {
-    if (!media || media.dead || !peer) {
-      return;
-    }
-    if (media.attributes.srcObject) {
-      console.log(`media-control - video enable - ${peer.peerName}:${videoOn}`);
-      (media.attributes.srcObject.getVideoTracks() as MediaStreamTrack[]).forEach((track: MediaStreamTrack) => {
-        track.enabled = videoOn;
-      });
-    }
-  }, [videoOn, media, peer]);
-
-  useEffect(() => {
-    if (!media || !peer || media.dead || !media.attributes || !media.attributes.srcObject) {
-      setIsValid(false);
-      console.log(`media-control - no media or peer`);
-      return;
-    }
-    console.log(`media-control - has valid peer`);
-    setIsValid(true);
-  }, [media, peer, setIsValid]);
-
-  const colorAudio = isValid ? "primary" : "disabled",
-    colorVideo = isValid ? "primary" : "disabled";
-
-  if (!peer) {
-    console.log(`media-control - no peer`);
-    return <></>;
-  }
+  const colorAudio = isValid ? "primary" : "disabled";
+  const colorVideo = isValid ? "primary" : "disabled";
 
   return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        minWidth: "200px",
-        minHeight: "100px",
-      }}
-    >
+    <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", minWidth: "200px", minHeight: "100px" }}>
       <div className={`MediaControlSpacer ${className}`} />
       <div className={`MediaControl ${className}`} data-peer={peer.session_id}>
         <div className="Controls">
           {isSelf ? (
             <div onTouchStart={toggleMute} onClick={toggleMute}>
-              {muted && <MicOff color={colorAudio} />}
-              {!muted && <Mic color={colorAudio} />}
+              {muted ? <MicOff color={colorAudio} /> : <Mic color={colorAudio} />}
             </div>
           ) : (
             <div onTouchStart={toggleMute} onClick={toggleMute}>
-              {muted && <VolumeOff color={colorAudio} />}
-              {!muted && <VolumeUp color={colorAudio} />}
+              {muted ? <VolumeOff color={colorAudio} /> : <VolumeUp color={colorAudio} />}
             </div>
           )}
           <div onTouchStart={toggleVideo} onClick={toggleVideo}>
-            {!videoOn && <VideocamOff color={colorVideo} />}
-            {videoOn && <Videocam color={colorVideo} />}
+            {videoOn ? <Videocam color={colorVideo} /> : <VideocamOff color={colorVideo} />}
           </div>
         </div>
-        {isValid && (
-          <>
-            <Moveable
-              pinchable={true}
-              draggable={true}
-              // Moveable expects HTMLElement or SVGElement, not just Element
-              target={target as HTMLElement | SVGElement | undefined}
-              resizable={true}
-              keepRatio={true}
-              throttleResize={0}
-              hideDefaultLines={false}
-              edge={true}
-              zoom={1}
-              origin={false}
-              onDragStart={(e) => {
-                e.set(frame.translate as [number, number]);
-              }}
-              onDrag={(e) => {
-                // Defensive: ensure beforeTranslate is [number, number]
-                if (Array.isArray(e.beforeTranslate) && e.beforeTranslate.length === 2) {
-                  frame.translate = [e.beforeTranslate[0], e.beforeTranslate[1]];
-                }
-              }}
-              onResizeStart={(e) => {
-                e.setOrigin(["%", "%"]);
-                e.dragStart && e.dragStart.set(frame.translate as [number, number]);
-              }}
-              onResize={(e) => {
-                const { translate } = frame;
-                e.target.style.width = `${e.width}px`;
-                e.target.style.height = `${e.height}px`;
-                e.target.style.transform = `translate(${translate[0]}px, ${translate[1]}px)`;
-              }}
-              onRender={(e) => {
-                const { translate } = frame;
-                e.target.style.transform = `translate(${translate[0]}px, ${translate[1]}px)`;
-              }}
+        {isValid ? (
+          peer.attributes?.srcObject && (
+            <Video
+              key={`video-${peer.session_id}-${peer.attributes.srcObject.id}`}
+              className="Video"
+              data-id={peer.peer_name}
+              autoPlay
+              srcObject={peer.attributes.srcObject}
+              local={peer.local}
+              muted={peer.local || muted} // Pass muted state
             />
-            {media && (
-              <Video
-                className="Video"
-                data-id={media.peerName}
-                autoPlay={true}
-                srcObject={media.attributes.srcObject}
-                {...media.attributes}
-              />
-            )}
-          </>
+          )
+        ) : (
+          <div className="placeholder">Waiting for media…</div>
         )}
-        {!isValid && <video className="Video"></video>}
+        {/* <Moveable
+        flushSync={flushSync}
+        pinchable
+        draggable
+        target={document.querySelector(`.MediaControl[data-peer="${peer.session_id}"]`) as HTMLElement}
+        resizable
+        keepRatio
+        hideDefaultLines={false}
+        edge
+        onDragStart={(e) => e.set(frame.translate)}
+        onDrag={(e) => {
+          if (Array.isArray(e.beforeTranslate) && e.beforeTranslate.length === 2) {
+            frame.translate = [e.beforeTranslate[0], e.beforeTranslate[1]];
+          }
+        }}
+        onResizeStart={(e) => {
+          e.setOrigin(["%", "%"]);
+          e.dragStart && e.dragStart.set(frame.translate);
+        }}
+        onResize={(e) => {
+          const { translate } = frame;
+          e.target.style.width = `${e.width}px`;
+          e.target.style.height = `${e.height}px`;
+          e.target.style.transform = `translate(${translate[0]}px, ${translate[1]}px)`;
+        }}
+        onRender={(e) => {
+          const { translate } = frame;
+          e.target.style.transform = `translate(${translate[0]}px, ${translate[1]}px)`;
+        }}
+      /> */}
       </div>
     </Box>
   );
diff --git a/client/src/UserList.tsx b/client/src/UserList.tsx
index 2dad4b4..1453794 100644
--- a/client/src/UserList.tsx
+++ b/client/src/UserList.tsx
@@ -97,7 +97,7 @@ const UserList: React.FC<UserListProps> = (props: UserListProps) => {
       <List className="UserSelector">
         {users?.map((user) => (
           <Box
-            key={user.name}
+            key={user.session_id}
             sx={{ display: "flex", flexDirection: "column", alignItems: "center", border: "3px solid magenta" }}
             className={`UserEntry ${user.local ? "UserSelf" : ""}`}
           >
@@ -106,7 +106,12 @@ const UserList: React.FC<UserListProps> = (props: UserListProps) => {
               {user.name && !user.live && <div className="NoNetwork"></div>}
             </div>
             {user.name && user.live && peers[user.session_id] ? (
-              <MediaControl className={videoClass} peer={peers[user.session_id]} isSelf={user.local} />
+              <MediaControl
+                className={videoClass}
+                key={user.session_id}
+                peer={peers[user.session_id]}
+                isSelf={user.local}
+              />
             ) : (
               <video className="Video"></video>
             )}
diff --git a/client/src/index.tsx b/client/src/index.tsx
index 54dcf69..2f6ac91 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -7,7 +7,7 @@ import './index.css';
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  // <React.StrictMode>
+  <App />
+  // </React.StrictMode>
 );
diff --git a/server/main.py b/server/main.py
index ed6fa73..a1f1350 100644
--- a/server/main.py
+++ b/server/main.py
@@ -136,7 +136,7 @@ class Session:
             await self.ws.send_json(
                 {
                     "type": "join_status",
-                    "status": "Error",
+                    "status": "Joined",
                     "message": f"Already joined to lobby {lobby.getName()}",
                 }
             )
@@ -167,7 +167,7 @@ class Session:
             peer_session.lobby_peers[lobby.id].append(self.id)
 
             logger.info(
-                f"{self.getName()} -> addPeer({peer_session.getName(), lobby.getName()}, should_create_offer=False)"
+                f"{self.getName()} -> {peer_session.getName()}:addPeer({self.getName(), lobby.getName()}, should_create_offer=False)"
             )
             await peer_session.ws.send_json(
                 {
@@ -182,7 +182,7 @@ class Session:
 
             # Add each other peer to the caller
             logger.info(
-                f"{self.getName()} -> addPeer({peer_session.getName(), lobby.getName()}, should_create_offer=True)"
+                f"{self.getName()} -> {self.getName()}:addPeer({peer_session.getName(), lobby.getName()}, should_create_offer=True)"
             )
             await self.ws.send_json(
                 {
@@ -233,7 +233,10 @@ class Session:
                 continue
             logger.info(f"{peer_session.getName()} <- remove_peer({self.getName()})")
             await peer_session.ws.send_json(
-                {"type": "remove_peer", "data": {"peer_id": self.id}}
+                {
+                    "type": "removePeer",
+                    "data": {"peer_name": self.name, "peer_id": self.id},
+                }
             )
 
             if not self.ws:
@@ -245,7 +248,13 @@ class Session:
             logger.info(f"{self.getName()} <- remove_peer({peer_session.getName()})")
 
             await self.ws.send_json(
-                {"type": "remove_peer", "data": {"peer_id": peer_session.id}}
+                {
+                    "type": "removePeer",
+                    "data": {
+                        "peer_name": peer_session.name,
+                        "peer_id": peer_session.id,
+                    },
+                }
             )
 
         await lobby.removeSession(self)
@@ -421,10 +430,12 @@ async def lobby_create(
         return {"error": "Invalid request type"}
 
     data = create_request.data
-    logger.info(f"lobby_create: {data.name} (private={data.private})")
     session = getSession(session_id)
     if not session:
         return {"error": f"Session not found ({session_id})"}
+    logger.info(
+        f"{session.getName()} lobby_create: {data.name} (private={data.private})"
+    )
 
     lobby = getLobbyByName(data.name)
     if not lobby:
@@ -608,7 +619,11 @@ async def lobby_join(
 
                     message: dict[str, Any] = {
                         "type": "iceCandidate",
-                        "data": {"peer_id": session.id, "candidate": candidate},
+                        "data": {
+                            "peer_id": session.id,
+                            "peer_name": session.name,
+                            "candidate": candidate,
+                        },
                     }
 
                     peer_session = lobby.getSession(peer_id)
@@ -686,6 +701,7 @@ async def lobby_join(
                         "type": "sessionDescription",
                         "data": {
                             "peer_id": session.id,
+                            "peer_name": session.name,
                             "session_description": session_description,
                         },
                     }