diff --git a/api/src/routes/channels.js b/api/src/routes/channels.js
index f28fcac..52596f3 100644
--- a/api/src/routes/channels.js
+++ b/api/src/routes/channels.js
@@ -36,4 +36,23 @@ router.post('/join', async (req, res) => {
   }
 });
 
+// Disconnect from voice channel
+router.post('/disconnect', async (req, res) => {
+  try {
+    const response = await fetch(`${req.app.locals.botUrl}/disconnect`, {
+      method: 'POST'
+    });
+    const result = await response.json();
+
+    if (response.ok) {
+      req.app.locals.broadcast('channelChange', { disconnected: true });
+    }
+
+    res.status(response.status).json(result);
+  } catch (error) {
+    req.app.locals.logger.error(`Error disconnecting: ${error.message}`);
+    res.status(500).json({ error: 'Failed to disconnect' });
+  }
+});
+
 export default router;
diff --git a/bot/src/index.js b/bot/src/index.js
index 8460ab0..3602e4b 100644
--- a/bot/src/index.js
+++ b/bot/src/index.js
@@ -503,6 +503,31 @@ app.post('/join', async (req, res) => {
   }
 });
 
+app.post('/disconnect', async (req, res) => {
+  try {
+    if (connection) {
+      connection.destroy();
+      connection = null;
+
+      // Pause playback when disconnecting
+      if (currentState.state === 'playing') {
+        currentState.state = 'paused';
+        if (player) {
+          player.pause();
+        }
+      }
+
+      logger.info('Disconnected from voice channel');
+      res.json({ success: true, message: 'Disconnected from voice channel' });
+    } else {
+      res.json({ success: true, message: 'Already disconnected' });
+    }
+  } catch (error) {
+    logger.error(`Failed to disconnect: ${error.message}`);
+    res.status(500).json({ error: 'Failed to disconnect' });
+  }
+});
+
 app.listen(INTERNAL_PORT, () => {
   logger.info(`Internal API listening on port ${INTERNAL_PORT}`);
 });
diff --git a/web/src/App.jsx b/web/src/App.jsx
index 139fc6d..42838ea 100644
--- a/web/src/App.jsx
+++ b/web/src/App.jsx
@@ -4,6 +4,7 @@ import Controls from './components/Controls';
 import TrackList from './components/TrackList';
 import UploadZone from './components/UploadZone';
 import ChannelSelector from './components/ChannelSelector';
+import ConnectionStatus from './components/ConnectionStatus';
 import useWebSocket from './hooks/useWebSocket';
 
 const API_URL = import.meta.env.VITE_API_URL || '/api';
@@ -131,10 +132,13 @@ function App() {
     <div className="min-h-screen bg-gradient-to-br from-slate-900 via-red-900 to-green-900">
       <div className="container mx-auto px-4 py-8 max-w-7xl">
         <header className="mb-8">
-          <h1 className="text-4xl font-bold text-white mb-2">10node christmas bot</h1>
-          <p className="text-slate-300 flex items-center gap-2">
+          <div className="flex items-center justify-between mb-4">
+            <h1 className="text-4xl font-bold text-white">10node christmas bot</h1>
+            <ConnectionStatus />
+          </div>
+          <p className="text-slate-300 text-sm flex items-center gap-2">
             <span className={`inline-block w-2 h-2 rounded-full ${connected ? 'bg-green-400' : 'bg-red-400'}`}></span>
-            {connected ? 'Connected' : 'Disconnected'}
+            WebSocket: {connected ? 'Connected' : 'Disconnected'}
           </p>
         </header>