diff --git a/public/index.html b/public/index.html
index d8eb50e..5813f86 100644
--- a/public/index.html
+++ b/public/index.html
@@ -188,7 +188,8 @@
   </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 style="display:flex;align-items:center;gap:10px"><div class="live-badge"><span class="ldot"></span>Live</div><div id="expiry-tabs" style="display:flex;gap:4px;flex-wrap:wrap"></div><span id="pos-hpnl" style="font-family:'Geist Mono',monospace;font-size:.75rem;font-weight:600;display:none"></span></div><span class="collapse-arrow">&#9660;</span></div>
+  <div class="card-head" onclick="toggleCard('sec-pos')"><span class="card-title">Option Positions</span><div style="display:flex;align-items:center;gap:10px"><div class="live-badge"><span class="ldot"></span>Live</div><span id="pos-hpnl" style="font-family:'Geist Mono',monospace;font-size:.75rem;font-weight:600;display:none"></span></div><span class="collapse-arrow">&#9660;</span></div>
+  <div id="expiry-tabs-row" style="padding:8px 16px 0;display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--border)"></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>
@@ -367,12 +368,20 @@ async function loadPositions(){
 
   // Build expiry tabs
   const expiries=['ALL',...new Set(open.map(p=>expiryLabel(p.tradingsymbol)))].filter(Boolean);
-  const tabsEl=document.getElementById('expiry-tabs');
-  if(tabsEl&&expiries.length>2){
-    tabsEl.innerHTML=expiries.map(e=>
-      '<button class="exp-tab'+(e===_activeExpiry?' active':'')+'" onclick="setExpiry(\''+e+'\')">'+(e==='ALL'?'All Expiries':e)+'</button>'
-    ).join('');
-  } else if(tabsEl){ tabsEl.innerHTML=''; }
+  // Use the row OUTSIDE card-head so clicks don't bubble to toggleCard
+  var tabsEl=document.getElementById('expiry-tabs-row');
+  if(tabsEl){
+    if(expiries.length>2){
+      tabsEl.style.display='flex';
+      tabsEl.innerHTML=expiries.map(function(e){
+        return '<button class="exp-tab'+(e===_activeExpiry?' active':'"')+'" onclick="event.stopPropagation();setExpiry(this,\''+e+'\')">'+
+          (e==='ALL'?'All Expiries':e)+'</button>';
+      }).join('');
+    } else {
+      tabsEl.style.display='none';
+      tabsEl.innerHTML='';
+    }
+  }
 
   // Filter by active expiry
   const filtered=_activeExpiry==='ALL'?open:open.filter(p=>expiryLabel(p.tradingsymbol)===_activeExpiry);
@@ -744,9 +753,12 @@ async function loadClosedPositions() {
 }
 
 
-function setExpiry(exp){
+function setExpiry(btn,exp){
   _activeExpiry=exp;
-  // Re-render positions with new filter (re-use cached data via refresh)
+  // Update active tab styling
+  var row=document.getElementById('expiry-tabs-row');
+  if(row) row.querySelectorAll('.exp-tab').forEach(function(b){b.classList.remove('active');});
+  if(btn) btn.classList.add('active');
   loadPositions();
 }
 loadConfig();refresh();