diff --git a/public/index.html b/public/index.html
index 7acc07f..24c2f9e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -130,38 +130,38 @@
   <div class="card scard"><div class="slbl">Alerts Today</div><div class="sval amber" id="s-alrt">&#8212;</div></div>
   <div class="card scard"><div class="slbl">System</div><div class="sval" id="s-err" style="font-size:.88rem;font-family:'Geist',sans-serif;margin-top:2px;color:var(--green)">Healthy</div></div>
 </div>
-<div class="card" style="margin-bottom:16px">
-  <div class="card-head">
+<div class="card collapsible" id="sec-chart" style="margin-bottom:16px">
+  <div class="card-head" onclick="toggleCard('sec-chart')">
     <span class="card-title">Intraday P&amp;L Curve</span>
     <div class="range-btns">
       <button class="rbtn" onclick="loadChart(2)" id="b2">2H</button>
       <button class="rbtn on" onclick="loadChart(8)" id="b8">8H</button>
       <button class="rbtn" onclick="loadChart(24)" id="b24">24H</button>
       <button class="rbtn" onclick="loadChart(72)" id="b72">3D</button>
-    </div>
-  </div>
+    </div><div class="collapse-body">
+  </div></div>
   <div class="collapse-body"><div class="chart-wrap"><canvas id="pnl-chart"></canvas><div class="chart-empty" id="chart-empty">No history yet &#8212; populates after first poll cycle</div></div>
 </div>
-<div class="card" style="margin-bottom:16px">
-  <div class="card-head"><span class="card-title">Option Positions</span><div class="live-badge"><span class="ldot"></span>Live</div></div>
+<div class="card collapsible" id="sec-pos" style="margin-bottom:16px">
+  <div class="card-head" onclick="toggleCard('sec-pos')"><span class="card-title">Option Positions</span><div class="live-badge"><span class="ldot"></span>Live</div><span class="collapse-arrow">&#9660;</span></div>
   <div class="collapse-body"><table>
     <thead><tr><th>Symbol</th><th>Qty</th><th>LTP</th><th>Avg Cost</th><th>Unrealised</th><th>Realised</th><th>Total P&amp;L</th></tr></thead>
     <tbody id="pos-body"><tr><td colspan="7" style="text-align:center;padding:36px;color:var(--text3)">Loading&#8230;</td></tr></tbody>
     <tfoot id="pos-foot" style="display:none"><tr><td colspan="4">Portfolio Total</td><td id="f-u" class="mono">&#8212;</td><td id="f-r" class="mono">&#8212;</td><td id="f-t" class="mono">&#8212;</td></tr></tfoot>
   </table>
 </div>
-<div class="card" style="margin-bottom:16px">
-  <div class="card-head"><span class="card-title">Alert History</span></div>
+<div class="card collapsible" id="sec-alrt" style="margin-bottom:16px">
+  <div class="card-head" onclick="toggleCard('sec-alrt')"><span class="card-title">Alert History</span><span class="collapse-arrow">&#9660;</span></div>
   <div class="collapse-body"><table>
     <thead><tr><th>Symbol</th><th>P&amp;L at Alert</th><th>Anchor</th><th>Move</th><th>LTP</th><th>Time (IST)</th></tr></thead>
     <tbody id="alrt-body"><tr><td colspan="6" style="text-align:center;padding:28px;color:var(--text3)">No alerts yet</td></tr></tbody>
   </table>
 </div>
-<div class="card" style="margin-bottom:16px">
-  <div class="card-head">
+<div class="card collapsible" id="sec-cfg" style="margin-bottom:16px">
+  <div class="card-head" onclick="toggleCard('sec-cfg')">
     <span class="card-title">Alert Settings</span>
     <span style="font-size:.68rem;color:var(--text3)">Changes apply immediately</span>
-  </div>
+  <span class="collapse-arrow">&#9660;</span></div>
   <div class="collapse-body"><div style="padding:16px 20px">
     <div class="sg">
       <div class="field"><label>Global Threshold %</label><input id="cfg-pct" type="number" min="1" max="50" step="0.5" value="5"/><span class="hint">Alert when P&amp;L moves this % from anchor</span></div>