diff --git a/desktop/app.js b/desktop/app.js
index a0d5a5a..0cb3112 100644
--- a/desktop/app.js
+++ b/desktop/app.js
@@ -28,6 +28,7 @@ const state = {
     viewMode: 'chat', // 'chat' or 'video'
     iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
     peerGainNodes: new Map(), // userId -> GainNode
+    visibleVolumeSliders: new Set(), // userIds whose sliders are visible
   },
   voicePresencePollId: null,
   onlineUsers: new Set(),
@@ -416,8 +417,9 @@ function renderChannels() {
           let sliderHtml = '';
           if (p.user_id !== state.me.id) {
             const vol = state.userVolumes.get(p.user_id) ?? 1.0;
+            const isVisible = state.voice.visibleVolumeSliders.has(p.user_id);
             sliderHtml = `
-              <div class="user-volume-control" data-user-id="${p.user_id}">
+              <div class="user-volume-control ${isVisible ? 'show-volume' : ''}" data-user-id="${p.user_id}">
                 <i data-lucide="volume-2" style="width: 12px; height: 12px; opacity: 0.6;"></i>
                 <input type="range" min="0" max="2" step="0.1" value="${vol}" class="volume-slider">
                 <span class="vol-pct">${Math.round(vol * 100)}%</span>
@@ -454,10 +456,12 @@ function renderChannels() {
           pRow.addEventListener('contextmenu', (e) => {
             if (p.user_id === state.me.id) return;
             e.preventDefault();
-            const control = pRow.querySelector('.user-volume-control');
-            if (control) {
-              control.classList.toggle('show-volume');
+            if (state.voice.visibleVolumeSliders.has(p.user_id)) {
+              state.voice.visibleVolumeSliders.delete(p.user_id);
+            } else {
+              state.voice.visibleVolumeSliders.add(p.user_id);
             }
+            renderChannels();
           });
 
           pList.appendChild(pRow);
diff --git a/static/app.js b/static/app.js
index c07063f..c76a314 100644
--- a/static/app.js
+++ b/static/app.js
@@ -28,6 +28,7 @@ const state = {
     viewMode: 'chat', // 'chat' or 'video'
     iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
     peerGainNodes: new Map(), // userId -> GainNode
+    visibleVolumeSliders: new Set(), // userIds whose sliders are currently visible
   },
   voicePresencePollId: null,
   chatWs: null,
@@ -371,8 +372,9 @@ function renderChannels() {
           let sliderHtml = '';
           if (p.user_id !== state.me.id) {
             const vol = state.userVolumes.get(p.user_id) ?? 1.0;
+            const isVisible = state.voice.visibleVolumeSliders.has(p.user_id);
             sliderHtml = `
-              <div class="user-volume-control" data-user-id="${p.user_id}">
+              <div class="user-volume-control ${isVisible ? 'show-volume' : ''}" data-user-id="${p.user_id}">
                 <i data-lucide="volume-2" style="width: 12px; height: 12px; opacity: 0.6;"></i>
                 <input type="range" min="0" max="2" step="0.1" value="${vol}" class="volume-slider">
                 <span class="vol-pct">${Math.round(vol * 100)}%</span>
@@ -409,10 +411,12 @@ function renderChannels() {
           pRow.addEventListener('contextmenu', (e) => {
             if (p.user_id === state.me.id) return;
             e.preventDefault();
-            const control = pRow.querySelector('.user-volume-control');
-            if (control) {
-              control.classList.toggle('show-volume');
+            if (state.voice.visibleVolumeSliders.has(p.user_id)) {
+              state.voice.visibleVolumeSliders.delete(p.user_id);
+            } else {
+              state.voice.visibleVolumeSliders.add(p.user_id);
             }
+            renderChannels();
           });
 
           pList.appendChild(pRow);