diff --git a/gain_viz/templates/index.html b/gain_viz/templates/index.html
index e03e8fd..48326fe 100644
--- a/gain_viz/templates/index.html
+++ b/gain_viz/templates/index.html
@@ -390,7 +390,7 @@
     .plot-area {
       flex: 1;
       min-height: 0;
-      padding: 16px; /* Reduced padding */
+      padding: 16px;
       background: #f8fafc;
       display: flex;
       flex-direction: column;
@@ -400,7 +400,7 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 12px; /* Reduced margin */
+      margin-bottom: 12px;
       flex-shrink: 0;
     }
     
@@ -430,7 +430,7 @@
       background: #fff;
       border: 1px solid var(--border);
       border-radius: var(--radius);
-      padding: 4px; /* Minimal padding */
+      padding: 4px;
       display: flex;
       flex-direction: column;
       overflow: hidden;
@@ -448,12 +448,13 @@
       border-radius: 8px;
       display: block;
       background: #f8fafc;
+      image-rendering: -webkit-optimize-contrast;
     }
 
     /* TMUX Terminal - COMPACT */
     .tmux-container {
-      height: 150px; /* Further reduced */
-      margin-top: 8px; /* Minimal margin */
+      height: 150px;
+      margin-top: 8px;
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
@@ -463,19 +464,19 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 4px 10px; /* Minimal padding */
+      padding: 4px 10px;
       background: var(--terminal-bg);
       color: var(--terminal-text);
       border-top-left-radius: var(--radius);
       border-top-right-radius: var(--radius);
-      font-size: 0.8rem; /* Smaller font */
+      font-size: 0.8rem;
       font-weight: 500;
       flex-shrink: 0;
     }
     
     .tmux-controls {
       display: flex;
-      gap: 4px; /* Minimal gap */
+      gap: 4px;
     }
     
     .tmux-btn {
@@ -483,9 +484,9 @@
       border: none;
       color: var(--terminal-text);
       cursor: pointer;
-      padding: 2px 4px; /* Minimal padding */
+      padding: 2px 4px;
       border-radius: 3px;
-      font-size: 0.7rem; /* Smaller font */
+      font-size: 0.7rem;
     }
     
     .tmux-btn:hover {
@@ -497,18 +498,18 @@
       background: var(--terminal-bg);
       color: var(--terminal-text);
       font-family: 'Courier New', monospace;
-      font-size: 0.75rem; /* Smaller font */
-      padding: 6px; /* Minimal padding */
+      font-size: 0.75rem;
+      padding: 6px;
       overflow-y: auto;
       border-bottom-left-radius: var(--radius);
       border-bottom-right-radius: var(--radius);
       white-space: pre-wrap;
       word-wrap: break-word;
-      line-height: 1.2; /* Tighter line height */
+      line-height: 1.2;
     }
     
     .tmux-terminal::-webkit-scrollbar {
-      width: 4px; /* Thinner scrollbar */
+      width: 4px;
     }
     
     .tmux-terminal::-webkit-scrollbar-track {
@@ -615,6 +616,7 @@
       background: #94a3b8;
     }
   </style>
+  <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
 </head>
 <body>
   <div class="container">
@@ -788,311 +790,310 @@
     </footer>
   </div>
 
-  <script>
-    (function(){
-      const plotImg = document.getElementById('plotImage');
-      const tmuxTerminal = document.getElementById('tmuxTerminal');
-      let isPlotPaused = false;
-      let isStreaming = false;
-      let refreshInterval;
-      let tmuxInterval;
-      let autoScroll = true;
-      let lastTmuxLength = 0;
+<script>
+  (function(){
+    const plotImg = document.getElementById('plotImage');
+    const tmuxTerminal = document.getElementById('tmuxTerminal');
+    let isPlotPaused = false;
+    let isStreaming = false;
+    let autoScroll = true;
+    let lastTmuxLength = 0;
 
-      // Helper to show status for a specific element
-      function showStatus(id, message, type = 'success') {
-        const el = document.getElementById(id);
-        if (!el) return;
-        el.textContent = message;
-        el.className = 'status ' + (type === 'success' ? 'success' : 'error');
-        el.style.display = 'block';
-        if (type === 'success') setTimeout(()=>{ el.style.display = 'none'; }, 3000);
+    // Socket.IO connection for real-time updates
+    const socket = io();
+
+    // Helper to show status for a specific element
+    function showStatus(id, message, type = 'success') {
+      const el = document.getElementById(id);
+      if (!el) return;
+      el.textContent = message;
+      el.className = 'status ' + (type === 'success' ? 'success' : 'error');
+      el.style.display = 'block';
+      if (type === 'success') setTimeout(()=>{ el.style.display = 'none'; }, 3000);
+    }
+
+    // Update stream status display
+    function updateStreamStatus(state) {
+      const statusEl = document.getElementById('streamStatus');
+      const startBtn = document.getElementById('startBtn');
+      const pauseBtn = document.getElementById('pauseBtn');
+      const stopBtn = document.getElementById('stopBtn');
+      
+      statusEl.className = 'stream-status';
+      
+      switch(state) {
+        case 'running':
+          statusEl.classList.add('status-running');
+          statusEl.innerHTML = '<span>●</span> Streaming';
+          startBtn.disabled = true;
+          pauseBtn.disabled = false;
+          stopBtn.disabled = false;
+          pauseBtn.innerHTML = '<span>⏸️</span> Pause';
+          isStreaming = true;
+          isPlotPaused = false;
+          break;
+        case 'paused':
+          statusEl.classList.add('status-paused');
+          statusEl.innerHTML = '<span>●</span> Paused';
+          startBtn.disabled = true;
+          pauseBtn.disabled = false;
+          stopBtn.disabled = false;
+          pauseBtn.innerHTML = '<span>▶️</span> Resume';
+          isStreaming = true;
+          isPlotPaused = true;
+          break;
+        case 'stopped':
+          statusEl.classList.add('status-stopped');
+          statusEl.innerHTML = '<span>●</span> Stopped';
+          startBtn.disabled = false;
+          pauseBtn.disabled = true;
+          stopBtn.disabled = true;
+          isStreaming = false;
+          isPlotPaused = false;
+          tmuxTerminal.textContent = '';
+          break;
       }
+    }
 
-      // Update stream status display
-      function updateStreamStatus(state) {
-        const statusEl = document.getElementById('streamStatus');
-        const startBtn = document.getElementById('startBtn');
-        const pauseBtn = document.getElementById('pauseBtn');
-        const stopBtn = document.getElementById('stopBtn');
+    // Socket.IO event handlers (FIXED)
+    socket.on('connect', function() {
+      console.log('WebSocket connected');
+    });
+
+    socket.on('disconnect', function() {
+      console.log('WebSocket disconnected');
+      setTimeout(function() {
+        window.location.reload();
+      }, 5000);
+    });
+
+    socket.on('plot_update', function(data) {
+      // Update plot with base64 image data
+      plotImg.src = 'data:image/png;base64,' + data.image;
+    });
+
+    socket.on('connect_error', function(error) {
+      console.error('WebSocket error:', error);
+    });
+
+    // Stream control functions
+    async function startStream() {
+      try {
+        const response = await fetch('/start_stream', { method: 'POST' });
+        const data = await response.json();
         
-        statusEl.className = 'stream-status';
+        if (data.status === 'success') {
+          updateStreamStatus('running');
+          showStatus('gainStatusMessage', 'Streaming started', 'success');
+        } else {
+          showStatus('gainStatusMessage', data.message, 'error');
+        }
+      } catch (err) {
+        console.error('Start stream error:', err);
+        showStatus('gainStatusMessage', 'Error starting stream', 'error');
+      }
+    }
+
+    async function stopStream() {
+      try {
+        const response = await fetch('/stop_stream', { method: 'POST' });
+        const data = await response.json();
         
-        switch(state) {
-          case 'running':
-            statusEl.classList.add('status-running');
-            statusEl.innerHTML = '<span>●</span> Streaming';
-            startBtn.disabled = true;
-            pauseBtn.disabled = false;
-            stopBtn.disabled = false;
-            pauseBtn.innerHTML = '<span>⏸️</span> Pause';
-            isStreaming = true;
-            isPlotPaused = false;
-            break;
-          case 'paused':
-            statusEl.classList.add('status-paused');
-            statusEl.innerHTML = '<span>●</span> Paused';
-            startBtn.disabled = true;
-            pauseBtn.disabled = false;
-            stopBtn.disabled = false;
-            pauseBtn.innerHTML = '<span>▶️</span> Resume';
-            isStreaming = true;
-            isPlotPaused = true;
-            break;
-          case 'stopped':
-            statusEl.classList.add('status-stopped');
-            statusEl.innerHTML = '<span>●</span> Stopped';
-            startBtn.disabled = false;
-            pauseBtn.disabled = true;
-            stopBtn.disabled = true;
-            isStreaming = false;
-            isPlotPaused = false;
-            tmuxTerminal.textContent = ''; // Clear terminal when stopped
-            break;
+        if (data.status === 'success') {
+          updateStreamStatus('stopped');
+          showStatus('gainStatusMessage', 'Streaming stopped', 'success');
+        } else {
+          showStatus('gainStatusMessage', data.message, 'error');
         }
+      } catch (err) {
+        console.error('Stop stream error:', err);
+        showStatus('gainStatusMessage', 'Error stopping stream', 'error');
       }
+    }
 
-      // Stream control functions
-      async function startStream() {
-        try {
-          const response = await fetch('/start_stream', { method: 'POST' });
-          const data = await response.json();
-          
-          if (data.status === 'success') {
-            updateStreamStatus('running');
-            showStatus('gainStatusMessage', 'Streaming started', 'success');
-          } else {
-            showStatus('gainStatusMessage', data.message, 'error');
-          }
-        } catch (err) {
-          console.error('Start stream error:', err);
-          showStatus('gainStatusMessage', 'Error starting stream', 'error');
-        }
-      }
-
-      async function stopStream() {
-        try {
-          const response = await fetch('/stop_stream', { method: 'POST' });
-          const data = await response.json();
-          
-          if (data.status === 'success') {
-            updateStreamStatus('stopped');
-            showStatus('gainStatusMessage', 'Streaming stopped', 'success');
-          } else {
-            showStatus('gainStatusMessage', data.message, 'error');
-          }
-        } catch (err) {
-          console.error('Stop stream error:', err);
-          showStatus('gainStatusMessage', 'Error stopping stream', 'error');
-        }
-      }
-
-      async function pauseStream() {
-        try {
-          const response = await fetch('/pause_stream', { method: 'POST' });
-          const data = await response.json();
-          
-          if (data.status === 'success') {
-            updateStreamStatus(data.state);
-            showStatus('gainStatusMessage', `Streaming ${data.state}`, 'success');
-          } else {
-            showStatus('gainStatusMessage', data.message, 'error');
-          }
-        } catch (err) {
-          console.error('Pause stream error:', err);
-          showStatus('gainStatusMessage', 'Error pausing stream', 'error');
-        }
-      }
-
-      // Check stream state periodically
-      async function checkStreamState() {
-        try {
-          const response = await fetch('/get_stream_state');
-          const data = await response.json();
+    async function pauseStream() {
+      try {
+        const response = await fetch('/pause_stream', { method: 'POST' });
+        const data = await response.json();
+        
+        if (data.status === 'success') {
           updateStreamStatus(data.state);
-        } catch (err) {
-          console.error('Error checking stream state:', err);
+          showStatus('gainStatusMessage', `Streaming ${data.state}`, 'success');
+        } else {
+          showStatus('gainStatusMessage', data.message, 'error');
         }
+      } catch (err) {
+        console.error('Pause stream error:', err);
+        showStatus('gainStatusMessage', 'Error pausing stream', 'error');
       }
+    }
 
-      // Fetch TMUX output
-      async function fetchTmuxOutput() {
-        try {
-          const response = await fetch('/tmux_output');
-          const data = await response.json();
-          
-          if (data.output && data.output.length > 0) {
-            // Only update if new content is available
-            const currentOutput = data.output.join('\n');
-            if (currentOutput.length !== tmuxTerminal.textContent.length) {
-              tmuxTerminal.textContent = currentOutput;
-              
-              // Auto-scroll to bottom if enabled
-              if (autoScroll) {
-                tmuxTerminal.scrollTop = tmuxTerminal.scrollHeight;
-              }
+    // Check stream state periodically
+    async function checkStreamState() {
+      try {
+        const response = await fetch('/get_stream_state');
+        const data = await response.json();
+        updateStreamStatus(data.state);
+      } catch (err) {
+        console.error('Error checking stream state:', err);
+      }
+    }
+
+    // Fetch TMUX output
+    async function fetchTmuxOutput() {
+      try {
+        const response = await fetch('/tmux_output');
+        const data = await response.json();
+        
+        if (data.output && data.output.length > 0) {
+          const currentOutput = data.output.join('\n');
+          if (currentOutput.length !== tmuxTerminal.textContent.length) {
+            tmuxTerminal.textContent = currentOutput;
+            
+            if (autoScroll) {
+              tmuxTerminal.scrollTop = tmuxTerminal.scrollHeight;
             }
           }
-        } catch (err) {
-          console.error('Error fetching TMUX output:', err);
         }
+      } catch (err) {
+        console.error('Error fetching TMUX output:', err);
       }
+    }
 
-      // ---------------- Gain Form ----------------
-      const gainForm = document.getElementById('gainForm');
-      const toggles = document.querySelectorAll('.gain-toggle');
-      const gainUpdateBtn = document.getElementById('gainUpdateBtn');
-      const gainRefreshBtn = document.getElementById('gainRefreshBtn');
+    // Gain Form
+    const gainForm = document.getElementById('gainForm');
+    const toggles = document.querySelectorAll('.gain-toggle');
+    const gainUpdateBtn = document.getElementById('gainUpdateBtn');
+    const gainRefreshBtn = document.getElementById('gainRefreshBtn');
 
-      // enable/disable inputs depending on toggle
-      toggles.forEach(t => {
-        const inputId = t.dataset.input;
-        const inputEl = document.getElementById(inputId);
-        t.addEventListener('change', () => {
-          if (inputEl) {
-            inputEl.disabled = !t.checked;
-            if (t.checked) inputEl.focus();
-          }
-        });
+    toggles.forEach(t => {
+      const inputId = t.dataset.input;
+      const inputEl = document.getElementById(inputId);
+      t.addEventListener('change', () => {
+        if (inputEl) {
+          inputEl.disabled = !t.checked;
+          if (t.checked) inputEl.focus();
+        }
       });
+    });
 
-      // load existing gain values from server and populate inputs
-      function loadGains(){
-        fetch('/get_gains')
-        .then(r => r.json())
-        .then(data => {
-          if (!data) return;
-          if (data.usrp_tx_gain !== undefined) document.getElementById('usrp_tx_gain').value = data.usrp_tx_gain;
-          if (data.usrp_rx_gain !== undefined) document.getElementById('usrp_rx_gain').value = data.usrp_rx_gain;
-          if (data.scm_tx_gain !== undefined) document.getElementById('scm_tx_gain').value = data.scm_tx_gain;
-          if (data.scm_rx_gain !== undefined) document.getElementById('scm_rx_gain').value = data.scm_rx_gain;
-          // ensure toggles are off and inputs disabled initially
+    function loadGains(){
+      fetch('/get_gains')
+      .then(r => r.json())
+      .then(data => {
+        if (!data) return;
+        if (data.usrp_tx_gain !== undefined) document.getElementById('usrp_tx_gain').value = data.usrp_tx_gain;
+        if (data.usrp_rx_gain !== undefined) document.getElementById('usrp_rx_gain').value = data.usrp_rx_gain;
+        if (data.scm_tx_gain !== undefined) document.getElementById('scm_tx_gain').value = data.scm_tx_gain;
+        if (data.scm_rx_gain !== undefined) document.getElementById('scm_rx_gain').value = data.scm_rx_gain;
+        toggles.forEach(t => {
+          t.checked = false;
+          const input = document.getElementById(t.dataset.input);
+          if (input) input.disabled = true;
+        });
+      })
+      .catch(err => console.error('loadGains error', err));
+    }
+
+    gainForm.addEventListener('submit', function(e){
+      e.preventDefault();
+      const formData = new FormData();
+      let has = false;
+      toggles.forEach(t => {
+        if (t.checked) {
+          const inputId = t.dataset.input;
+          const val = document.getElementById(inputId).value;
+          formData.append(inputId, val);
+          has = true;
+        }
+      });
+      if (!has) {
+        showStatus('gainStatusMessage', 'Please enable at least one gain to update', 'error');
+        return;
+      }
+      gainUpdateBtn.disabled = true;
+      fetch('/update_gains', { method:'POST', body: formData })
+      .then(r => r.json())
+      .then(data => {
+        gainUpdateBtn.disabled = false;
+        if (data && data.status === 'success') {
+          showStatus('gainStatusMessage', data.message || 'Gains updated', 'success');
           toggles.forEach(t => {
             t.checked = false;
             const input = document.getElementById(t.dataset.input);
             if (input) input.disabled = true;
           });
-        })
-        .catch(err => console.error('loadGains error', err));
-      }
-
-      gainForm.addEventListener('submit', function(e){
-        e.preventDefault();
-        const formData = new FormData();
-        let has = false;
-        toggles.forEach(t => {
-          if (t.checked) {
-            const inputId = t.dataset.input;
-            const val = document.getElementById(inputId).value;
-            formData.append(inputId, val);
-            has = true;
-          }
-        });
-        if (!has) {
-          showStatus('gainStatusMessage', 'Please enable at least one gain to update', 'error');
-          return;
+          loadGains();
+        } else {
+          showStatus('gainStatusMessage', data.message || 'Error updating gains', 'error');
         }
-        gainUpdateBtn.disabled = true;
-        fetch('/update_gains', { method:'POST', body: formData })
-        .then(r => r.json())
-        .then(data => {
-          gainUpdateBtn.disabled = false;
-          if (data && data.status === 'success') {
-            showStatus('gainStatusMessage', data.message || 'Gains updated', 'success');
-            // reset toggles
-            toggles.forEach(t => {
-              t.checked = false;
-              const input = document.getElementById(t.dataset.input);
-              if (input) input.disabled = true;
-            });
-            // reload gains from server to reflect current state
-            loadGains();
-          } else {
-            showStatus('gainStatusMessage', data.message || 'Error updating gains', 'error');
-          }
-        })
-        .catch(err => {
-          gainUpdateBtn.disabled = false;
-          console.error(err);
-          showStatus('gainStatusMessage', 'Server error', 'error');
-        });
+      })
+      .catch(err => {
+        gainUpdateBtn.disabled = false;
+        console.error(err);
+        showStatus('gainStatusMessage', 'Server error', 'error');
       });
+    });
 
-      gainRefreshBtn.addEventListener('click', function(){
-        loadGains();
-        showStatus('gainStatusMessage','Gains reloaded','success');
-      });
-
-      // ---------------- Params Form ----------------
-      const paramForm = document.getElementById('paramForm');
-      paramForm.addEventListener('submit', function(e){
-        e.preventDefault();
-        const btn = document.getElementById('paramUpdateBtn');
-        const formData = new FormData(paramForm);
-        btn.disabled = true;
-        fetch('/update_params', { method:'POST', body: formData })
-        .then(r => r.json())
-        .then(data => {
-          btn.disabled = false;
-          if (data && data.status === 'success') {
-            showStatus('paramStatusMessage', data.message || 'Parameters updated', 'success');
-          } else {
-            showStatus('paramStatusMessage', data.message || 'Error updating parameters', 'error');
-          }
-        })
-        .catch(err => {
-          btn.disabled = false;
-          console.error(err);
-          showStatus('paramStatusMessage','Server error','error');
-        });
-      });
-
-      // ---------------- Plot refresh ----------------
-      function refreshPlot(){
-        if (!isStreaming || isPlotPaused) return;
-        // use cache-buster to avoid cached/partial file
-        plotImg.src = '/plot?_ts=' + Date.now();
-      }
-      
-      // Start auto refresh only when streaming
-      function startAutoRefresh() {
-        refreshInterval = setInterval(refreshPlot, 500);
-      }
-      
-      // Start TMUX output refresh
-      function startTmuxRefresh() {
-        tmuxInterval = setInterval(fetchTmuxOutput, 1000); // Update every second
-      }
-      
-      // Manual refresh button
-      document.getElementById('refreshPlotBtn').addEventListener('click', function() {
-        refreshPlot();
-      });
-      
-      // TMUX controls
-      document.getElementById('clearTmuxBtn').addEventListener('click', function() {
-        tmuxTerminal.textContent = '';
-      });
-      
-      document.getElementById('autoScrollTmuxBtn').addEventListener('click', function() {
-        autoScroll = !autoScroll;
-        this.textContent = `Auto Scroll: ${autoScroll ? 'ON' : 'OFF'}`;
-      });
-
-      // Stream control buttons
-      document.getElementById('startBtn').addEventListener('click', startStream);
-      document.getElementById('stopBtn').addEventListener('click', stopStream);
-      document.getElementById('pauseBtn').addEventListener('click', pauseStream);
-
-      // Check stream state every 2 seconds
-      setInterval(checkStreamState, 2000);
-
-      // initial load
+    gainRefreshBtn.addEventListener('click', function(){
       loadGains();
-      checkStreamState();
-      startAutoRefresh();
-      startTmuxRefresh();
-    })();
-  </script>
+      showStatus('gainStatusMessage','Gains reloaded','success');
+    });
+
+    // Params Form
+    const paramForm = document.getElementById('paramForm');
+    paramForm.addEventListener('submit', function(e){
+      e.preventDefault();
+      const btn = document.getElementById('paramUpdateBtn');
+      const formData = new FormData(paramForm);
+      btn.disabled = true;
+      fetch('/update_params', { method:'POST', body: formData })
+      .then(r => r.json())
+      .then(data => {
+        btn.disabled = false;
+        if (data && data.status === 'success') {
+          showStatus('paramStatusMessage', data.message || 'Parameters updated', 'success');
+        } else {
+          showStatus('paramStatusMessage', data.message || 'Error updating parameters', 'error');
+        }
+      })
+      .catch(err => {
+        btn.disabled = false;
+        console.error(err);
+        showStatus('paramStatusMessage','Server error','error');
+      });
+    });
+
+    // Plot refresh
+    document.getElementById('refreshPlotBtn').addEventListener('click', function() {
+      plotImg.src = '/plot?_ts=' + Date.now();
+    });
+    
+    // TMUX controls
+    document.getElementById('clearTmuxBtn').addEventListener('click', function() {
+      tmuxTerminal.textContent = '';
+    });
+    
+    document.getElementById('autoScrollTmuxBtn').addEventListener('click', function() {
+      autoScroll = !autoScroll;
+      this.textContent = `Auto Scroll: ${autoScroll ? 'ON' : 'OFF'}`;
+    });
+
+    // Stream control buttons
+    document.getElementById('startBtn').addEventListener('click', startStream);
+    document.getElementById('stopBtn').addEventListener('click', stopStream);
+    document.getElementById('pauseBtn').addEventListener('click', pauseStream);
+
+    // Check stream state every 2 seconds
+    setInterval(checkStreamState, 2000);
+
+    // Start TMUX output refresh
+    setInterval(fetchTmuxOutput, 1000);
+
+    // Initial load
+    loadGains();
+    checkStreamState();
+  })();
+</script>
 </body>
 </html>
\ No newline at end of file
