diff --git a/dashboard/static/index.html b/dashboard/static/index.html
index 61cda17..ea953ea 100644
--- a/dashboard/static/index.html
+++ b/dashboard/static/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <title>FTDT Quant Lab</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
@@ -32,12 +32,13 @@
     font-family: var(--font);
     min-height: 100vh;
     line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
   }
 
   .container {
     max-width: 1200px;
     margin: 0 auto;
-    padding: 24px 20px;
+    padding: 16px 12px;
   }
 
   /* ── Header ─────────────────────── */
@@ -45,41 +46,47 @@
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    margin-bottom: 28px;
-    padding-bottom: 20px;
+    margin-bottom: 20px;
+    padding-bottom: 14px;
     border-bottom: 1px solid var(--border);
+    gap: 12px;
   }
 
   .brand h1 {
-    font-size: 20px;
+    font-size: 18px;
     font-weight: 600;
     color: var(--text-bright);
     letter-spacing: -0.3px;
   }
 
-  .brand span {
-    font-size: 12px;
+  .brand .sub {
+    font-size: 11px;
     color: var(--text);
-    display: block;
-    margin-top: 2px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: 3px;
+    flex-wrap: wrap;
   }
 
   .summary {
     text-align: right;
+    flex-shrink: 0;
   }
 
   .summary .pnl {
     font-family: var(--mono);
-    font-size: 28px;
+    font-size: 26px;
     font-weight: 600;
     letter-spacing: -0.5px;
+    line-height: 1.1;
   }
 
   .summary .pnl.positive { color: var(--green); }
   .summary .pnl.negative { color: var(--red); }
 
   .summary .label {
-    font-size: 11px;
+    font-size: 10px;
     color: var(--text);
     text-transform: uppercase;
     letter-spacing: 0.5px;
@@ -87,14 +94,13 @@
 
   .status-dot {
     display: inline-block;
-    width: 6px;
-    height: 6px;
+    width: 6px; height: 6px;
     border-radius: 50%;
-    margin-right: 6px;
+    margin-right: 4px;
+    flex-shrink: 0;
   }
   .status-dot.live { background: var(--green); animation: pulse 2s infinite; }
   .status-dot.idle { background: var(--amber); }
-  .status-dot.error { background: var(--red); }
 
   @keyframes pulse {
     0%, 100% { opacity: 1; }
@@ -106,78 +112,77 @@
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    padding: 16px;
-    margin-bottom: 20px;
+    padding: 12px;
+    margin-bottom: 14px;
   }
 
   .chart-card h2 {
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 500;
     color: var(--text-bright);
-    margin-bottom: 12px;
+    margin-bottom: 8px;
   }
 
-  #equity-chart {
+  .chart-wrap {
+    position: relative;
     width: 100%;
-    height: 200px;
+    height: 180px;
   }
 
   /* ── Strategy Grid ──────────────── */
   .strategy-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    gap: 12px;
-    margin-bottom: 20px;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 10px;
+    margin-bottom: 14px;
   }
 
   .strategy-card {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    padding: 14px 16px;
+    padding: 12px 14px;
     transition: border-color 0.2s;
+    min-width: 0;
   }
 
-  .strategy-card:hover {
-    border-color: #2a2a32;
-  }
+  .strategy-card:hover { border-color: #2a2a32; }
 
   .strategy-card .name {
-    font-size: 12px;
+    font-size: 11px;
     font-weight: 500;
     color: var(--text-bright);
-    margin-bottom: 8px;
+    margin-bottom: 6px;
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 5px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .strategy-card .pnl {
     font-family: var(--mono);
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 600;
-    margin-bottom: 4px;
+    margin-bottom: 3px;
   }
 
   .strategy-card .pnl.pos { color: var(--green); }
   .strategy-card .pnl.neg { color: var(--red); }
 
   .strategy-card .meta {
-    font-size: 11px;
+    font-size: 10px;
     color: var(--text);
     display: flex;
     flex-wrap: wrap;
-    gap: 10px;
-  }
-
-  .strategy-card .meta span {
-    white-space: nowrap;
+    gap: 8px;
   }
 
   .strategy-card .meta .val {
     color: var(--text-bright);
     font-family: var(--mono);
-    font-size: 11px;
+    font-size: 10px;
   }
 
   /* ── Trade Log ──────────────────── */
@@ -189,34 +194,42 @@
   }
 
   .trade-log h2 {
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 500;
     color: var(--text-bright);
-    padding: 14px 16px;
+    padding: 12px 14px;
     border-bottom: 1px solid var(--border);
   }
 
+  .trade-scroll {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
   .trade-table {
     width: 100%;
     border-collapse: collapse;
+    min-width: 400px;
   }
 
   .trade-table th {
-    font-size: 10px;
+    font-size: 9px;
     font-weight: 500;
     color: var(--text);
     text-transform: uppercase;
-    letter-spacing: 0.5px;
+    letter-spacing: 0.4px;
     text-align: left;
-    padding: 8px 16px;
+    padding: 7px 12px;
     border-bottom: 1px solid var(--border);
+    white-space: nowrap;
   }
 
   .trade-table td {
     font-family: var(--mono);
-    font-size: 12px;
-    padding: 6px 16px;
-    border-bottom: 1px solid rgba(255,255,255,0.03);
+    font-size: 11px;
+    padding: 5px 12px;
+    border-bottom: 1px solid rgba(255,255,255,0.02);
+    white-space: nowrap;
   }
 
   .trade-table td.pos { color: var(--green); }
@@ -227,25 +240,84 @@
   /* ── Footer ─────────────────────── */
   footer {
     text-align: center;
-    padding: 20px;
-    font-size: 11px;
+    padding: 16px;
+    font-size: 10px;
     color: #3f3f46;
   }
 
-  footer a {
-    color: #52525b;
-    text-decoration: none;
+  footer a { color: #52525b; text-decoration: none; }
+  footer a:hover { color: var(--text); }
+
+  /* ── Mobile: < 480px ────────────── */
+  @media (max-width: 480px) {
+    .container { padding: 10px 8px; }
+
+    header {
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .summary {
+      text-align: left;
+      width: 100%;
+    }
+
+    .summary .pnl { font-size: 22px; }
+
+    .brand h1 { font-size: 16px; }
+
+    .strategy-grid {
+      grid-template-columns: 1fr 1fr;
+      gap: 6px;
+    }
+
+    .strategy-card {
+      padding: 10px;
+    }
+
+    .strategy-card .pnl { font-size: 14px; }
+    .strategy-card .meta { gap: 4px; }
+    .strategy-card .meta .val { font-size: 9px; }
+
+    .chart-wrap { height: 140px; }
+
+    .trade-table th,
+    .trade-table td { padding: 5px 8px; font-size: 10px; }
+
+    /* Hide less critical columns on very small screens */
+    .trade-table th:nth-child(3),
+    .trade-table td:nth-child(3) { display: none; }
+
+    footer { font-size: 9px; padding: 10px; }
   }
 
-  footer a:hover {
-    color: var(--text);
+  /* ── Small phone: < 360px ───────── */
+  @media (max-width: 360px) {
+    .strategy-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .chart-wrap { height: 120px; }
+
+    .trade-table th:nth-child(4),
+    .trade-table td:nth-child(4) { display: none; }
   }
 
-  /* ── Responsive ─────────────────── */
-  @media (max-width: 640px) {
-    .container { padding: 16px 12px; }
-    header { flex-direction: column; gap: 12px; }
-    .summary { text-align: left; }
+  /* ── Tablet: 481-768px ──────────── */
+  @media (min-width: 481px) and (max-width: 768px) {
+    .container { padding: 18px 14px; }
+    .strategy-grid {
+      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    }
+  }
+
+  /* ── Desktop: 769px+ ────────────── */
+  @media (min-width: 769px) {
+    .container { padding: 24px 20px; }
+    .strategy-grid {
+      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    }
+    .chart-wrap { height: 200px; }
   }
 </style>
 </head>
@@ -256,23 +328,25 @@
   <header>
     <div class="brand">
       <h1>FTDT Quant Lab</h1>
-      <span>
+      <div class="sub">
         <span class="status-dot live"></span>
         Hyperliquid Testnet &middot;
         <span id="connection-status">connecting...</span>
-      </span>
+      </div>
     </div>
     <div class="summary">
       <div class="label">Total PnL</div>
       <div class="pnl" id="total-pnl">$0.00</div>
-      <div class="label" id="total-pnl-pct" style="font-size:12px;margin-top:2px;">0.00%</div>
+      <div class="label" id="total-pnl-pct" style="margin-top:2px;">0.00%</div>
     </div>
   </header>
 
   <!-- Equity Curve -->
   <div class="chart-card">
     <h2>Equity Curve</h2>
-    <canvas id="equity-chart"></canvas>
+    <div class="chart-wrap">
+      <canvas id="equity-chart"></canvas>
+    </div>
   </div>
 
   <!-- Strategy Cards -->
@@ -281,18 +355,20 @@
   <!-- Trade Log -->
   <div class="trade-log">
     <h2>Recent Trades</h2>
-    <table class="trade-table">
-      <thead>
-        <tr>
-          <th>Time</th>
-          <th>Strategy</th>
-          <th>Side</th>
-          <th>Size</th>
-          <th>PnL</th>
-        </tr>
-      </thead>
-      <tbody id="trade-body"></tbody>
-    </table>
+    <div class="trade-scroll">
+      <table class="trade-table">
+        <thead>
+          <tr>
+            <th>Time</th>
+            <th>Strategy</th>
+            <th>Side</th>
+            <th>Size</th>
+            <th>PnL</th>
+          </tr>
+        </thead>
+        <tbody id="trade-body"></tbody>
+      </table>
+    </div>
   </div>
 
   <footer>
@@ -332,7 +408,7 @@ const equityChart = new Chart(ctx, {
       x: {
         display: true,
         grid: { color: 'rgba(255,255,255,0.03)' },
-        ticks: { color: '#52525b', font: { size: 10 } }
+        ticks: { color: '#52525b', font: { size: 10 }, maxTicksLimit: 6 }
       },
       y: {
         display: true,
@@ -340,7 +416,8 @@ const equityChart = new Chart(ctx, {
         ticks: {
           color: '#52525b',
           font: { size: 10 },
-          callback: v => '$' + v.toLocaleString()
+          maxTicksLimit: 5,
+          callback: function(v) { return '$' + v.toLocaleString(); }
         }
       }
     }
@@ -354,26 +431,38 @@ const equityChart = new Chart(ctx, {
 const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
 const wsUrl = protocol + '//' + location.host + '/ws';
 let ws;
+let reconnectTimer;
 
 function connect() {
+  if (ws) { ws.close(); }
   ws = new WebSocket(wsUrl);
 
-  ws.onopen = () => {
-    document.getElementById('connection-status').innerHTML =
-      '<span style="color:#22c55e">live</span>';
-    document.getElementById('connection-status').parentElement
-      .querySelector('.status-dot').className = 'status-dot live';
+  ws.onopen = function() {
+    var statusEl = document.getElementById('connection-status');
+    statusEl.innerHTML = '<span style="color:#22c55e">live</span>';
+    var dot = statusEl.parentElement.querySelector('.status-dot');
+    if (dot) dot.className = 'status-dot live';
+    console.log('WS connected');
   };
 
-  ws.onclose = () => {
-    document.getElementById('connection-status').innerHTML =
-      '<span style="color:#f59e0b">reconnecting...</span>';
-    setTimeout(connect, 2000);
+  ws.onclose = function() {
+    var statusEl = document.getElementById('connection-status');
+    statusEl.innerHTML = '<span style="color:#f59e0b">reconnecting...</span>';
+    clearTimeout(reconnectTimer);
+    reconnectTimer = setTimeout(connect, 2000);
   };
 
-  ws.onmessage = (event) => {
-    const data = JSON.parse(event.data);
-    updateDashboard(data);
+  ws.onerror = function() {
+    console.log('WS error');
+  };
+
+  ws.onmessage = function(event) {
+    try {
+      var data = JSON.parse(event.data);
+      updateDashboard(data);
+    } catch(e) {
+      console.log('Parse error:', e);
+    }
   };
 }
 
@@ -383,51 +472,54 @@ function connect() {
 
 function updateDashboard(data) {
   // Total PnL
-  const pnl = data.total_pnl;
-  const pnlEl = document.getElementById('total-pnl');
-  pnlEl.textContent = (pnl >= 0 ? '+' : '') + '$' + Math.abs(pnl).toFixed(2);
+  var pnl = data.total_pnl || 0;
+  var pnlEl = document.getElementById('total-pnl');
+  var prefix = pnl >= 0 ? '+' : '';
+  pnlEl.textContent = prefix + '$' + Math.abs(pnl).toFixed(2);
   pnlEl.className = 'pnl ' + (pnl >= 0 ? 'positive' : 'negative');
 
-  const pnlPct = (pnl / data.total_equity * 100);
-  document.getElementById('total-pnl-pct').textContent =
-    (pnlPct >= 0 ? '+' : '') + pnlPct.toFixed(2) + '%';
+  var equity = data.total_equity || 10000;
+  var pnlPct = (pnl / equity * 100);
+  var pctEl = document.getElementById('total-pnl-pct');
+  pctEl.textContent = (pnlPct >= 0 ? '+' : '') + pnlPct.toFixed(2) + '%';
+  pctEl.style.color = pnl >= 0 ? '#22c55e' : '#ef4444';
 
   // Strategy cards
-  const grid = document.getElementById('strategy-grid');
-  grid.innerHTML = '';
+  var grid = document.getElementById('strategy-grid');
+  var strategies = data.strategies || {};
+  var cardsHtml = '';
 
-  for (const [name, s] of Object.entries(data.strategies)) {
-    const card = document.createElement('div');
-    card.className = 'strategy-card';
+  var keys = Object.keys(strategies);
+  for (var i = 0; i < keys.length; i++) {
+    var name = keys[i];
+    var s = strategies[name];
+    var spnl = s.pnl || 0;
+    var pClass = spnl >= 0 ? 'pos' : 'neg';
+    var pStr = (spnl >= 0 ? '+' : '') + '$' + Math.abs(spnl).toFixed(2);
+    var dotClass = s.status === 'running' ? 'live' : 'idle';
 
-    const pnlClass = s.pnl >= 0 ? 'pos' : 'neg';
-    const pnlStr = (s.pnl >= 0 ? '+' : '') + '$' + Math.abs(s.pnl).toFixed(2);
-
-    const statusDot = s.status === 'running' ? 'live' :
-                      s.status === 'error' ? 'error' : 'idle';
-
-    card.innerHTML = `
-      <div class="name">
-        <span class="status-dot ${statusDot}"></span>
-        ${name}
-      </div>
-      <div class="pnl ${pnlClass}">${pnlStr}</div>
-      <div class="meta">
-        <span>Trades: <span class="val">${s.trades_today}</span></span>
-        <span>Win: <span class="val">${(s.win_rate * 100).toFixed(0)}%</span></span>
-        <span>Sharpe: <span class="val">${s.sharpe.toFixed(2)}</span></span>
-        <span>DD: <span class="val">${(s.max_drawdown * 100).toFixed(1)}%</span></span>
-      </div>
-    `;
-    grid.appendChild(card);
+    cardsHtml += '<div class="strategy-card">' +
+      '<div class="name"><span class="status-dot ' + dotClass + '"></span>' + name + '</div>' +
+      '<div class="pnl ' + pClass + '">' + pStr + '</div>' +
+      '<div class="meta">' +
+        '<span>Trades: <span class="val">' + (s.trades_today || 0) + '</span></span>' +
+        '<span>Win: <span class="val">' + Math.round((s.win_rate || 0) * 100) + '%</span></span>' +
+        '<span>DD: <span class="val">' + ((s.max_drawdown || 0) * 100).toFixed(1) + '%</span></span>' +
+      '</div>' +
+    '</div>';
   }
+  grid.innerHTML = cardsHtml;
 
   // Equity chart
-  if (data.equity_history && data.equity_history.length > 0) {
-    const labels = data.equity_history.map(p =>
-      new Date(p.t * 1000).toLocaleTimeString('en-US', { hour12: false })
-    );
-    const values = data.equity_history.map(p => p.v);
+  var history = data.equity_history || [];
+  if (history.length > 0) {
+    var labels = [];
+    var values = [];
+    for (var j = 0; j < history.length; j++) {
+      var ts = history[j].t * 1000;
+      labels.push(new Date(ts).toLocaleTimeString('en-US', { hour12: false }));
+      values.push(history[j].v);
+    }
 
     equityChart.data.labels = labels;
     equityChart.data.datasets[0].data = values;
@@ -435,20 +527,23 @@ function updateDashboard(data) {
   }
 
   // Trade log
-  const tbody = document.getElementById('trade-body');
-  const trades = (data.trades || []).slice(-15).reverse();
-  tbody.innerHTML = trades.map(t => {
-    const pnlClass = t.pnl >= 0 ? 'pos' : 'neg';
-    const pnlStr = (t.pnl >= 0 ? '+' : '') + '$' + Math.abs(t.pnl).toFixed(4);
-    const sideClass = t.side === 'BUY' ? 'buy' : 'sell';
-    return `<tr>
-      <td>${t.time}</td>
-      <td>${t.strategy}</td>
-      <td class="${sideClass}">${t.side}</td>
-      <td>${t.size}</td>
-      <td class="${pnlClass}">${pnlStr}</td>
-    </tr>`;
-  }).join('');
+  var trades = (data.trades || []).slice(-15).reverse();
+  var tbody = document.getElementById('trade-body');
+  var rowsHtml = '';
+  for (var k = 0; k < trades.length; k++) {
+    var t = trades[k];
+    var tpnlClass = (t.pnl || 0) >= 0 ? 'pos' : 'neg';
+    var tpnlStr = ((t.pnl || 0) >= 0 ? '+' : '') + '$' + Math.abs(t.pnl || 0).toFixed(4);
+    var sideClass = t.side === 'BUY' ? 'buy' : 'sell';
+    rowsHtml += '<tr>' +
+      '<td>' + (t.time || '') + '</td>' +
+      '<td>' + (t.strategy || '') + '</td>' +
+      '<td class="' + sideClass + '">' + (t.side || '') + '</td>' +
+      '<td>' + (t.size || '') + '</td>' +
+      '<td class="' + tpnlClass + '">' + tpnlStr + '</td>' +
+    '</tr>';
+  }
+  tbody.innerHTML = rowsHtml;
 }
 
 // Start
