diff --git a/client/src/MediaControl.tsx b/client/src/MediaControl.tsx
index 20facaa..967e9d0 100644
--- a/client/src/MediaControl.tsx
+++ b/client/src/MediaControl.tsx
@@ -1413,8 +1413,21 @@ const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className })
     const stream = peer.attributes.srcObject as MediaStream;
     stream.getAudioTracks().forEach((t) => {
       t.enabled = !muted;
+      console.log(`media-agent - Audio track ${t.id} enabled: ${t.enabled}`);
     });
-  }, [muted, peer]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [muted, peer?.attributes?.srcObject, peer?.dead]);
+
+  useEffect(() => {
+    if (!peer || peer.dead || !peer.attributes?.srcObject) return;
+
+    const stream = peer.attributes.srcObject as MediaStream;
+    stream.getVideoTracks().forEach((t) => {
+      t.enabled = videoOn;
+      console.log(`media-agent - Video track ${t.id} enabled: ${t.enabled}`);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [videoOn, peer?.attributes?.srcObject, peer?.dead]);
 
   // Debug target element
   useEffect(() => {
@@ -1432,26 +1445,35 @@ const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className })
     }
   }, [peer?.session_id]);
 
-  const toggleMute = (e: React.MouseEvent | React.TouchEvent) => {
+  const toggleMute = useCallback((e: React.MouseEvent | React.TouchEvent) => {
     e.stopPropagation();
     if (peer) {
-      peer.muted = !muted;
-      setMuted(peer.muted);
+      const newMutedState = !muted;
+      // Update local state first
+      setMuted(newMutedState);
+      // Update peer object (this should trigger re-renders in parent components)
+      peer.muted = newMutedState;
+      console.log(`media-agent - toggleMute: ${peer.peer_name} muted=${newMutedState}`);
     }
-  };
+  }, [peer, muted]);
 
-  const toggleVideo = (e: React.MouseEvent | React.TouchEvent) => {
+  const toggleVideo = useCallback((e: React.MouseEvent | React.TouchEvent) => {
     e.stopPropagation();
     if (peer) {
-      peer.video_on = !videoOn;
-      setVideoOn(peer.video_on);
+      const newVideoState = !videoOn;
+      // Update local state first
+      setVideoOn(newVideoState);
+      // Update peer object (this should trigger re-renders in parent components)
+      peer.video_on = newVideoState;
+      console.log(`media-agent - toggleVideo: ${peer.peer_name} video_on=${newVideoState}`);
     }
-  };
+  }, [peer, videoOn]);
 
   // Snap-back functionality
   const checkSnapBack = (x: number, y: number) => {
     if (!spacerRef.current) return false;
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const spacerRect = spacerRef.current.getBoundingClientRect();
     const threshold = 50; // pixels from original position to trigger snap