diff --git a/sfm/sfm_webapp.html b/sfm/sfm_webapp.html
index 941868b..d59ea41 100644
--- a/sfm/sfm_webapp.html
+++ b/sfm/sfm_webapp.html
@@ -110,8 +110,7 @@
     .btn-ghost:hover { border-color: var(--blue-lt); color: var(--blue-lt); }
     .btn:disabled { background: var(--surface2) !important; color: var(--text-mute) !important; cursor: not-allowed; border-color: var(--border2) !important; }
 
-    #connect-btn { background: var(--green); color: #fff; margin-left: auto; }
-    #connect-btn:hover { background: var(--green-lt); }
+    /* #connect-btn styles moved to #live-connect-bar block */
 
     /* ── Device info bar ── */
     #device-bar {
@@ -585,6 +584,59 @@
     }
     .unit-card .uc-label { font-size: 11px; color: var(--text-mute); }
     .unit-card .uc-val   { font-size: 12px; color: var(--text); font-family: monospace; }
+
+    /* ── Section switcher ── */
+    .section-switcher {
+      display: flex;
+      gap: 3px;
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 7px;
+      padding: 3px;
+    }
+    .section-btn {
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 600;
+      padding: 4px 14px;
+      transition: background 0.12s, color 0.12s;
+      background: none;
+      color: var(--text-dim);
+      white-space: nowrap;
+    }
+    .section-btn:hover  { color: var(--text); }
+    .section-btn.active { background: var(--blue); color: #fff; }
+
+    /* ── Section containers ── */
+    #section-live, #section-db {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      overflow: hidden;
+      min-height: 0;
+    }
+    #section-db { display: none; }
+
+    /* ── Live connect bar (host/port/connect, live section only) ── */
+    #live-connect-bar {
+      background: var(--surface);
+      border-bottom: 1px solid var(--border2);
+      padding: 8px 18px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-shrink: 0;
+      flex-wrap: wrap;
+    }
+    #live-connect-bar label.hdr { color: var(--text-dim); font-size: 11px; }
+    #live-connect-bar input[type="text"],
+    #live-connect-bar input[type="number"] { font-size: 12px; padding: 5px 8px; }
+    #live-connect-bar #dev-host { width: 150px; }
+    #live-connect-bar #dev-port { width: 70px; }
+    #connect-btn { margin-left: auto; background: var(--green); color: #fff; }
+    #connect-btn:hover { background: var(--green-lt); }
   </style>
 </head>
 <body>
@@ -597,15 +649,27 @@
     <label class="hdr">API</label>
     <input type="text" id="api-base" />
   </div>
-  <div class="hdr-group">
-    <label class="hdr">Device host</label>
-    <input type="text" id="dev-host" placeholder="e.g. 63.43.212.232" />
-    <label class="hdr">Port</label>
-    <input type="number" id="dev-port" value="9034" />
+  <div class="hdr-sep"></div>
+  <div class="section-switcher">
+    <button class="section-btn active" onclick="switchSection('live')">Live Device</button>
+    <button class="section-btn"        onclick="switchSection('db')">Database</button>
   </div>
-  <button class="btn" id="connect-btn" onclick="connectUnit()">Connect</button>
 </header>
 
+<!-- ════════════════════════════════════════════════════════════════
+     SECTION: Live Device
+═══════════════════════════════════════════════════════════════════ -->
+<div id="section-live">
+
+<!-- ── Live connect bar ────────────────────────────────────────────── -->
+<div id="live-connect-bar">
+  <label class="hdr">Host</label>
+  <input type="text" id="dev-host" placeholder="e.g. 63.43.212.232" />
+  <label class="hdr">Port</label>
+  <input type="number" id="dev-port" value="9034" />
+  <button class="btn" id="connect-btn" onclick="connectUnit()">Connect</button>
+</div>
+
 <!-- ── Device info bar ─────────────────────────────────────────────── -->
 <div id="device-bar">
   <div class="di-field">
@@ -670,15 +734,11 @@
 <!-- ── Status bar ─────────────────────────────────────────────────── -->
 <div id="status-bar">Ready — enter device host and click Connect.</div>
 
-<!-- ── Tab bar ────────────────────────────────────────────────────── -->
-<div class="tab-bar">
-  <button class="tab-btn active" onclick="switchTab('device')">Device</button>
-  <button class="tab-btn"        onclick="switchTab('events')">Events</button>
-  <button class="tab-btn"        onclick="switchTab('config')">Config</button>
-  <button class="tab-btn"        onclick="switchTab('history')">History</button>
-  <button class="tab-btn"        onclick="switchTab('units')">Units</button>
-  <button class="tab-btn"        onclick="switchTab('monlog')">Monitor Log</button>
-  <button class="tab-btn"        onclick="switchTab('sessions')">Sessions</button>
+<!-- ── Live tab bar ───────────────────────────────────────────────── -->
+<div class="tab-bar" id="live-tab-bar">
+  <button class="tab-btn active" data-tab="device"  onclick="switchTab('device')">Device</button>
+  <button class="tab-btn"        data-tab="events"  onclick="switchTab('events')">Events</button>
+  <button class="tab-btn"        data-tab="config"  onclick="switchTab('config')">Config</button>
 </div>
 
 <!-- ════════════════════════════════════════════════════════════════
@@ -817,6 +877,21 @@
     <span id="cfg-status"></span>
   </div>
 
+  </div><!-- end #tab-config -->
+
+</div><!-- end #section-live -->
+
+<!-- ════════════════════════════════════════════════════════════════
+     SECTION: Database
+═══════════════════════════════════════════════════════════════════ -->
+<div id="section-db">
+
+<!-- ── Database tab bar ──────────────────────────────────────────── -->
+<div class="tab-bar" id="db-tab-bar">
+  <button class="tab-btn active" data-tab="history"  onclick="switchTab('history')">History</button>
+  <button class="tab-btn"        data-tab="units"    onclick="switchTab('units')">Units</button>
+  <button class="tab-btn"        data-tab="monlog"   onclick="switchTab('monlog')">Monitor Log</button>
+  <button class="tab-btn"        data-tab="sessions" onclick="switchTab('sessions')">Sessions</button>
 </div>
 
 <!-- ════════════════════════════════════════════════════════════════
@@ -852,7 +927,7 @@
             <th>Vert (in/s)</th>
             <th>Long (in/s)</th>
             <th>PVS (in/s)</th>
-            <th>Mic</th>
+            <th>Mic (dBL)</th>
             <th>Project</th>
             <th>Client</th>
             <th>Type</th>
@@ -949,7 +1024,9 @@
       </table>
     </div>
   </div>
-</div>
+</div><!-- end #tab-sessions -->
+
+</div><!-- end #section-db -->
 
 <!-- ── Script ─────────────────────────────────────────────────────── -->
 <script>
@@ -993,30 +1070,53 @@ function deviceParams() {
   return `host=${encodeURIComponent(devHost())}&tcp_port=${devPort()}`;
 }
 
-// ── Tab switching ──────────────────────────────────────────────────────────────
-const TAB_NAMES = ['device','events','config','history','units','monlog','sessions'];
+// ── Section switching ─────────────────────────────────────────────────────────
+let currentSection = 'live';
 
-function switchTab(name) {
-  document.querySelectorAll('.tab-btn').forEach((b, i) => {
-    b.classList.toggle('active', TAB_NAMES[i] === name);
+function switchSection(name) {
+  currentSection = name;
+  document.querySelectorAll('.section-btn').forEach(b => {
+    b.classList.toggle('active', b.textContent.toLowerCase().startsWith(name === 'live' ? 'live' : 'data'));
   });
+  document.getElementById('section-live').style.display = name === 'live' ? 'flex' : 'none';
+  document.getElementById('section-db').style.display   = name === 'db'   ? 'flex' : 'none';
+
+  // Auto-load DB section on first visit
+  if (name === 'db') {
+    if (!histLoaded)   loadHistory();
+    if (!unitsLoaded)  loadUnits();
+  }
+}
+
+// ── Tab switching ──────────────────────────────────────────────────────────────
+function switchTab(name) {
+  // Activate the matching tab button within its own tab bar
+  const btn = document.querySelector(`.tab-btn[data-tab="${name}"]`);
+  if (btn) {
+    btn.closest('.tab-bar').querySelectorAll('.tab-btn')
+      .forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+  }
+
+  // Hide all panes in both sections, then show the target
   document.querySelectorAll('.tab-pane').forEach(p => {
     p.classList.remove('active');
     if (p.style.display === 'flex') p.style.display = 'none';
   });
   const pane = document.getElementById(`tab-${name}`);
-  if (pane.id === 'tab-events') {
-    pane.style.display = 'flex';
-  } else if (pane.classList.contains('db-tab-pane')) {
+  if (!pane) return;
+  const needsFlex = pane.id === 'tab-events' || pane.classList.contains('db-tab-pane');
+  if (needsFlex) {
     pane.style.display = 'flex';
   } else {
     pane.classList.add('active');
   }
+
   // Auto-load DB tabs on first switch
-  if (name === 'history')  { if (!histLoaded)  loadHistory(); }
-  if (name === 'units')    { if (!unitsLoaded) loadUnits(); }
+  if (name === 'history')  { if (!histLoaded)   loadHistory(); }
+  if (name === 'units')    { if (!unitsLoaded)  loadUnits(); }
   if (name === 'monlog')   { if (!monlogLoaded) loadMonitorLog(); }
-  if (name === 'sessions') { if (!sessLoaded)  loadSessions(); }
+  if (name === 'sessions') { if (!sessLoaded)   loadSessions(); }
 }
 
 // ── Connect ────────────────────────────────────────────────────────────────────
@@ -1651,7 +1751,7 @@ async function loadHistory() {
       <td class="${_ppvClass(ev.vert_ppv)}">${_ppvFmt(ev.vert_ppv)}</td>
       <td class="${_ppvClass(ev.long_ppv)}">${_ppvFmt(ev.long_ppv)}</td>
       <td class="${_ppvClass(pvs)}">${_ppvFmt(pvs)}</td>
-      <td class="td-dim">${ev.mic_ppv != null ? ev.mic_ppv.toExponential(3) : '—'}</td>
+      <td class="td-dim">${ev.mic_ppv != null && ev.mic_ppv > 0 ? (20 * Math.log10(ev.mic_ppv / DBL_REF)).toFixed(1) + ' dBL' : '—'}</td>
       <td class="td-text">${ev.project ?? '—'}</td>
       <td class="td-text">${ev.client  ?? '—'}</td>
       <td class="td-dim">${ev.record_type ?? '—'}</td>
@@ -1830,7 +1930,8 @@ document.addEventListener('keydown', e => {
 // hit localhost:8200, 10.0.0.44:8200, or anything else.
 document.getElementById('api-base').value = window.location.origin;
 
-['api-base','dev-host','dev-port'].forEach(id => {
+// Press Enter in any live connect field to connect
+['dev-host','dev-port'].forEach(id => {
   document.getElementById(id)?.addEventListener('keydown', e => { if (e.key === 'Enter') connectUnit(); });
 });
 </script>
