diff --git a/chromium-setup/emmc-provisioning/dashboard/templates/index.html b/chromium-setup/emmc-provisioning/dashboard/templates/index.html
index 0990e45..6c47d01 100644
--- a/chromium-setup/emmc-provisioning/dashboard/templates/index.html
+++ b/chromium-setup/emmc-provisioning/dashboard/templates/index.html
@@ -6,362 +6,387 @@
   <title>CM4 eMMC Provisioning</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
   <style>
-    /* Portal Styling Guide tokens */
     :root {
       --bg-primary: #0a0e14;
       --bg-secondary: #11151c;
       --bg-tertiary: #1a1f2b;
       --bg-card: #151a24;
-      --accent-primary: #00d4aa;
-      --accent-secondary: #00b894;
-      --accent-glow: rgba(0, 212, 170, 0.15);
-      --text-primary: #e6e8eb;
-      --text-secondary: #8b949e;
+      --accent: #00d4aa;
+      --accent-dim: #00b894;
+      --accent-glow: rgba(0, 212, 170, 0.12);
+      --text: #e6e8eb;
+      --text-dim: #8b949e;
       --text-muted: #5c6370;
-      --border-color: #2d333b;
-      --danger: #ff6b6b;
-      --danger-glow: rgba(255, 107, 107, 0.15);
-      --warning: #ffd93d;
+      --border: #2d333b;
+      --danger: #f87171;
+      --danger-bg: rgba(248, 113, 113, 0.1);
+      --warn: #fbbf24;
+      --warn-bg: rgba(251, 191, 36, 0.1);
       --success: #00d4aa;
-      --gradient-accent: linear-gradient(135deg, #00d4aa 0%, #00b894 50%, #00cec9 100%);
+      --success-bg: rgba(0, 212, 170, 0.1);
+      --radius: 12px;
+      --radius-sm: 8px;
     }
     * { margin: 0; padding: 0; box-sizing: border-box; }
     body {
-      font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
+      font-family: 'Outfit', sans-serif;
       background: var(--bg-primary);
-      color: var(--text-primary);
+      color: var(--text);
       min-height: 100vh;
-      line-height: 1.6;
+      line-height: 1.5;
+      font-size: 15px;
     }
-    body::before {
-      content: '';
-      position: fixed;
-      inset: 0;
-      background:
-        radial-gradient(circle at 20% 20%, rgba(0, 212, 170, 0.03) 0%, transparent 50%),
-        radial-gradient(circle at 80% 80%, rgba(0, 184, 148, 0.03) 0%, transparent 50%),
-        linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
-      pointer-events: none;
-      z-index: -1;
+
+    /* ----- Layout ----- */
+    .wrap {
+      max-width: 900px;
+      margin: 0 auto;
+      padding: 1.5rem;
     }
     .header {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      background: var(--bg-secondary);
-      border-bottom: 1px solid var(--border-color);
-      z-index: 1000;
-      padding: 1rem 2rem;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-    .logo {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-    }
-    .logo-icon {
-      width: 40px;
-      height: 40px;
-      background: var(--gradient-accent);
-      border-radius: 10px;
-      box-shadow: 0 4px 20px var(--accent-glow);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1.25rem;
-    }
-    .logo-title {
-      font-size: 1.5rem;
-      font-weight: 600;
-      background: var(--gradient-accent);
-      -webkit-background-clip: text;
-      background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-    .main {
-      max-width: 720px;
-      margin: 0 auto;
-      padding: 2rem;
-      padding-top: calc(2rem + 72px);
-    }
-    .card {
-      background: var(--bg-card);
-      border: 1px solid var(--border-color);
-      border-radius: 16px;
-      padding: 1.5rem;
-      margin-bottom: 1.5rem;
-    }
-    .card-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 1.5rem;
+      margin-bottom: 1.75rem;
       padding-bottom: 1rem;
-      border-bottom: 1px solid var(--border-color);
+      border-bottom: 1px solid var(--border);
     }
-    .card-title {
-      font-size: 1.1rem;
+    .header h1 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--text);
+      letter-spacing: -0.02em;
+    }
+    .header p {
+      margin-top: 0.25rem;
+      font-size: 0.9rem;
+      color: var(--text-dim);
+    }
+
+    /* ----- Section blocks ----- */
+    .section {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 1.25rem 1.5rem;
+      margin-bottom: 1rem;
+    }
+    .section-title {
+      font-size: 0.75rem;
       font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      color: var(--text-dim);
+      margin-bottom: 0.75rem;
+    }
+
+    /* ----- Status block ----- */
+    .status-row {
       display: flex;
       align-items: center;
-      gap: 0.5rem;
+      gap: 1rem;
+      flex-wrap: wrap;
     }
-    .card-title .label {
-      font-size: 1.1rem;
-      font-weight: 600;
-      color: var(--text-primary);
-    }
-    .subtitle { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1.5rem; }
-    .steps { list-style: none; }
-    .steps li {
-      display: flex;
-      align-items: flex-start;
-      gap: 0.75rem;
-      padding: 0.6rem 0;
-      border-bottom: 1px solid var(--border-color);
-    }
-    .steps li:last-child { border-bottom: none; }
-    .step-num {
+    .status-pill {
       flex-shrink: 0;
-      width: 1.75rem;
-      height: 1.75rem;
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      padding: 0.35rem 0.75rem;
+      border-radius: 999px;
+    }
+    .status-pill.idle { background: var(--accent-glow); color: var(--accent); }
+    .status-pill.rpiboot,
+    .status-pill.waiting_choice,
+    .status-pill.flashing,
+    .status-pill.backup { background: var(--warn-bg); color: var(--warn); }
+    .status-pill.done { background: var(--success-bg); color: var(--success); }
+    .status-pill.error { background: var(--danger-bg); color: var(--danger); }
+    .status-msg {
+      flex: 1;
+      min-width: 0;
+      font-size: 0.95rem;
+      color: var(--text);
+    }
+    .status-err {
+      width: 100%;
+      margin-top: 0.5rem;
+      font-size: 0.875rem;
+      color: var(--danger);
+    }
+    .status-meta {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      margin-top: 0.5rem;
+    }
+    .progress-track {
+      margin-top: 0.75rem;
+      height: 4px;
       background: var(--bg-tertiary);
-      color: var(--text-primary);
+      border-radius: 2px;
+      overflow: hidden;
+    }
+    .progress-fill {
+      height: 100%;
+      background: var(--accent);
+      border-radius: 2px;
+      transition: width 0.3s ease;
+    }
+    .progress-fill.indeterminate {
+      width: 35%;
+      animation: slide 1.2s ease-in-out infinite;
+    }
+    @keyframes slide {
+      0% { transform: translateX(-100%); }
+      100% { transform: translateX(400%); }
+    }
+
+    /* ----- Pending devices ----- */
+    .devices-list { list-style: none; }
+    .device-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 0.875rem 1rem;
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-sm);
+      margin-bottom: 0.5rem;
+    }
+    .device-item:last-child { margin-bottom: 0; }
+    .device-info { min-width: 0; }
+    .device-type {
+      font-size: 0.7rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--text-dim);
+      margin-bottom: 0.2rem;
+    }
+    .device-desc { font-size: 0.9rem; color: var(--text); }
+    .device-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
+    .btn {
+      padding: 0.5rem 1rem;
+      font-size: 0.85rem;
+      font-weight: 500;
+      font-family: inherit;
+      border-radius: var(--radius-sm);
+      cursor: pointer;
+      border: none;
+      transition: background 0.15s, color 0.15s;
+    }
+    .btn-outline {
+      background: transparent;
+      border: 1px solid var(--border);
+      color: var(--text);
+    }
+    .btn-outline:hover {
+      border-color: var(--accent);
+      color: var(--accent);
+    }
+    .btn-primary {
+      background: var(--accent);
+      color: var(--bg-primary);
+    }
+    .btn-primary:hover {
+      background: var(--accent-dim);
+      color: var(--bg-primary);
+    }
+    .empty-msg {
+      text-align: center;
+      padding: 1.5rem;
+      font-size: 0.9rem;
+      color: var(--text-muted);
+    }
+
+    /* ----- Backups table ----- */
+    .backups-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.9rem;
+    }
+    .backups-table th {
+      text-align: left;
+      font-weight: 600;
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--text-dim);
+      padding: 0.5rem 0;
+      border-bottom: 1px solid var(--border);
+    }
+    .backups-table td {
+      padding: 0.6rem 0;
+      border-bottom: 1px solid var(--border);
+      color: var(--text);
+    }
+    .backups-table tr:last-child td { border-bottom: none; }
+    .backups-table a {
+      color: var(--accent);
+      text-decoration: none;
+      font-weight: 500;
+    }
+    .backups-table a:hover { text-decoration: underline; }
+    .backups-mono {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.85em;
+      color: var(--text-muted);
+    }
+
+    /* ----- Help & Log (collapsible) ----- */
+    details {
+      margin-top: 0.5rem;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-sm);
+      overflow: hidden;
+    }
+    details[open] { border-color: var(--text-muted); }
+    summary {
+      padding: 0.75rem 1rem;
+      font-size: 0.9rem;
+      font-weight: 500;
+      color: var(--text-dim);
+      cursor: pointer;
+      list-style: none;
+      user-select: none;
+    }
+    summary::-webkit-details-marker { display: none; }
+    summary::before {
+      content: '▶';
+      display: inline-block;
+      margin-right: 0.5rem;
+      font-size: 0.65rem;
+      transition: transform 0.2s;
+    }
+    details[open] summary::before { transform: rotate(90deg); }
+    details .inner {
+      padding: 1rem;
+      padding-top: 0;
+      font-size: 0.875rem;
+      color: var(--text-dim);
+      border-top: 1px solid var(--border);
+    }
+    .steps-list { list-style: none; }
+    .steps-list li {
+      display: flex;
+      gap: 0.6rem;
+      padding: 0.4rem 0;
+    }
+    .steps-list .num {
+      flex-shrink: 0;
+      width: 1.35rem;
+      height: 1.35rem;
+      background: var(--bg-tertiary);
+      color: var(--text-dim);
       border-radius: 50%;
+      font-size: 0.75rem;
+      font-weight: 600;
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      font-weight: 600;
-      font-size: 0.8rem;
     }
-    .step-num.done { background: var(--gradient-accent); color: var(--bg-primary); }
-    .status-box {
-      padding: 1rem 1.25rem;
-      border-radius: 12px;
-      margin-bottom: 0.75rem;
-      border: 1px solid var(--border-color);
-    }
-    .status-box.idle { background: var(--accent-glow); border-color: var(--accent-primary); }
-    .status-box.rpiboot,
-    .status-box.flashing,
-    .status-box.backup,
-    .status-box.waiting_choice { background: rgba(255, 217, 61, 0.1); border-color: var(--warning); }
-    .status-box.done { background: rgba(0, 212, 170, 0.12); border-color: var(--success); }
-    .status-box.error { background: var(--danger-glow); border-color: var(--danger); }
-    .status-phase {
-      font-weight: 600;
-      font-size: 0.85rem;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      margin-bottom: 0.35rem;
-    }
-    .status-box.idle .status-phase { color: var(--accent-primary); }
-    .status-box.rpiboot .status-phase,
-    .status-box.flashing .status-phase,
-    .status-box.backup .status-phase,
-    .status-box.waiting_choice .status-phase { color: var(--warning); }
-    .status-box.done .status-phase { color: var(--success); }
-    .status-box.error .status-phase { color: var(--danger); }
-    .status-message { color: var(--text-primary); font-size: 0.95rem; }
-    .status-error { color: var(--danger); font-size: 0.9rem; margin-top: 0.5rem; }
-    .status-updated { color: var(--text-muted); font-size: 0.75rem; margin-top: 0.5rem; }
-    .progress-wrap {
-      margin-top: 0.75rem;
-      height: 6px;
-      background: var(--bg-tertiary);
-      border-radius: 3px;
-      overflow: hidden;
-    }
-    .progress-bar {
-      height: 100%;
-      background: var(--gradient-accent);
-      border-radius: 3px;
-      transition: width 0.4s ease;
-    }
-    .progress-bar.indeterminate {
-      width: 40%;
-      animation: indeterminate 1.2s ease-in-out infinite;
-    }
-    @keyframes indeterminate {
-      0% { transform: translateX(-100%); }
-      100% { transform: translateX(350%); }
-    }
-    .log-box {
+    .steps-list strong { color: var(--text); }
+    .help-sub { font-weight: 600; color: var(--text); margin: 0.75rem 0 0.25rem 0; }
+    .log-pre {
       font-family: 'JetBrains Mono', monospace;
       font-size: 0.8rem;
       background: var(--bg-tertiary);
-      border: 1px solid var(--border-color);
-      border-radius: 8px;
+      border-radius: var(--radius-sm);
       padding: 0.75rem 1rem;
-      max-height: 180px;
-      overflow-y: auto;
+      max-height: 200px;
+      overflow: auto;
       white-space: pre-wrap;
       word-break: break-all;
       color: var(--text-muted);
     }
-    .log-box:empty::before { content: 'No flash log yet.'; color: var(--text-muted); }
-    .backups-list { list-style: none; }
-    .backups-list li {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 0.6rem 0;
-      border-bottom: 1px solid var(--border-color);
-      gap: 0.75rem;
-    }
-    .backups-list li:last-child { border-bottom: none; }
-    .backups-list a {
-      color: var(--accent-primary);
-      text-decoration: none;
-      font-weight: 500;
-    }
-    .backups-list a:hover { text-decoration: underline; }
-    .backups-meta { color: var(--text-muted); font-size: 0.85rem; font-family: 'JetBrains Mono', monospace; }
-    .pending-device {
-      padding: 0.75rem 1rem;
-      background: var(--bg-tertiary);
-      border: 1px solid var(--border-color);
-      border-radius: 12px;
-      margin-bottom: 0.5rem;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      flex-wrap: wrap;
-      gap: 0.5rem;
-    }
-    .pending-device .label { font-weight: 500; color: var(--text-primary); }
-    .pending-device .actions { display: flex; gap: 0.5rem; }
-    .btn {
-      padding: 0.75rem 1.5rem;
-      border-radius: 8px;
-      font-size: 0.9rem;
-      font-weight: 500;
-      font-family: 'Outfit', sans-serif;
-      display: inline-flex;
-      align-items: center;
-      gap: 0.5rem;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      border: none;
-    }
-    .btn-primary {
-      background: var(--gradient-accent);
-      color: var(--bg-primary);
-    }
-    .btn-primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 20px var(--accent-glow);
-    }
-    .btn-secondary {
-      background: var(--bg-tertiary);
-      border: 1px solid var(--border-color);
-      color: var(--text-primary);
-    }
-    .btn-secondary:hover {
-      border-color: var(--accent-primary);
-      color: var(--accent-primary);
-    }
-    .pending-device .btn { padding: 0.5rem 1rem; font-size: 0.85rem; }
-    code {
-      font-family: 'JetBrains Mono', monospace;
-      font-size: 0.85em;
-      background: var(--bg-tertiary);
-      padding: 0.15rem 0.4rem;
-      border-radius: 4px;
-      color: var(--accent-primary);
-    }
-    .empty-state {
-      text-align: center;
-      padding: 2rem;
-      color: var(--text-muted);
-      font-size: 0.9rem;
-    }
-    details summary {
-      cursor: pointer;
-      color: var(--text-secondary);
-      font-size: 0.85rem;
-      font-weight: 500;
-    }
-    @media (max-width: 768px) {
-      .header { padding: 1rem; flex-direction: column; gap: 0.5rem; text-align: center; }
-      .main { padding: 1rem; padding-top: calc(1rem + 100px); }
+    .log-pre:empty::before { content: 'No log output yet.'; }
+
+    @media (max-width: 640px) {
+      .wrap { padding: 1rem; }
+      .device-item { flex-direction: column; align-items: flex-start; }
+      .device-actions { width: 100%; justify-content: flex-end; }
     }
   </style>
 </head>
 <body>
-  <header class="header">
-    <div class="logo">
-      <div class="logo-icon">⚡</div>
-      <h1 class="logo-title">CM4 eMMC Provisioning</h1>
-    </div>
-  </header>
-  <main class="main">
-    <p class="subtitle">reTerminal DM4 — deploy or backup via USB boot mode or network boot</p>
+  <div class="wrap">
+    <header class="header">
+      <h1>CM4 eMMC Provisioning</h1>
+      <p>Deploy or backup reTerminal via USB boot mode or network</p>
+    </header>
 
-    <div class="card">
-      <div class="card-header">
-        <h2 class="card-title"><span class="label">Connect the device</span></h2>
+    <!-- 1. Current status -->
+    <section class="section">
+      <h2 class="section-title">Current status</h2>
+      <div id="status" class="status-row">
+        <span id="statusPill" class="status-pill idle">Idle</span>
+        <span id="statusMsg" class="status-msg">Waiting for device</span>
       </div>
-      <p style="color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 0.75rem;">Choose one:</p>
-      <p style="font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem;">USB boot mode</p>
-      <ol class="steps">
-        <li><span class="step-num">1</span> Set the reTerminal to <strong>boot mode</strong>: fit the <strong>eMMC disable</strong> jumper (e.g. J2 / nRPIBOOT).</li>
-        <li><span class="step-num">2</span> Connect the reTerminal’s <strong>USB slave</strong> port to the Proxmox host. Power on. The device will appear in “Device detected” below; choose <strong>Backup</strong> or <strong>Deploy</strong>.</li>
-        <li><span class="step-num">3</span> When done, remove the jumper and power cycle so it boots from eMMC.</li>
-      </ol>
-      <p style="font-size: 0.9rem; font-weight: 600; margin: 1rem 0 0.25rem 0;">Network boot</p>
-      <ol class="steps">
-        <li><span class="step-num">1</span> Enable network boot on the CM4 (e.g. <code>BOOT_ORDER=0x21</code>) and ensure it can reach this server.</li>
-        <li><span class="step-num">2</span> Boot the device over the network with an environment that runs the <strong>provisioning client</strong> (register + poll for action). It will show under “Device detected (Network)”. Choose <strong>Backup</strong> or <strong>Deploy</strong>.</li>
-      </ol>
-    </div>
+      <div id="statusErr" class="status-err" style="display:none;"></div>
+      <div id="statusMeta" class="status-meta" style="display:none;"></div>
+      <div id="progressWrap" class="progress-track" style="display:none;">
+        <div id="progressFill" class="progress-fill"></div>
+      </div>
+    </section>
 
-    <div class="card">
-      <div class="card-header">
-        <h2 class="card-title"><span class="label">Device detected — choose action</span></h2>
-      </div>
-      <p id="pendingHint" style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 0.75rem;">When a device is detected (USB boot mode or network boot), it will appear below. Choose <strong>Backup</strong> to save its eMMC to a file, or <strong>Deploy</strong> to write the golden image to it.</p>
+    <!-- 2. Devices waiting for action -->
+    <section class="section">
+      <h2 class="section-title">Devices waiting for action</h2>
       <div id="pendingDevices"></div>
-      <p id="noPending" class="empty-state" style="display: none;">No device waiting. Connect a reTerminal in USB boot mode, or ensure a network-booted device has registered.</p>
-      <h3 style="font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin: 1rem 0 0.5rem 0;">Saved backups</h3>
-      <ul id="backupsList" class="backups-list"></ul>
-      <p id="backupsEmpty" class="empty-state" style="display: none;">No backups yet.</p>
-    </div>
+      <p id="noPending" class="empty-msg" style="display:none;">No devices. Connect reTerminal in USB boot mode or register over network.</p>
+    </section>
 
-    <div class="card">
-      <div class="card-header">
-        <h2 class="card-title"><span class="label">Deployment status</span></h2>
+    <!-- 3. Saved backups -->
+    <section class="section">
+      <h2 class="section-title">Saved backups</h2>
+      <table class="backups-table" id="backupsTable">
+        <thead>
+          <tr>
+            <th>File</th>
+            <th>Size</th>
+            <th>Date</th>
+          </tr>
+        </thead>
+        <tbody id="backupsBody"></tbody>
+      </table>
+      <p id="backupsEmpty" class="empty-msg" style="display:none;">No backups yet.</p>
+    </section>
+
+    <!-- 4. How to connect (collapsible) -->
+    <details class="section" style="padding:0;">
+      <summary>How to connect</summary>
+      <div class="inner">
+        <p class="help-sub">USB boot mode</p>
+        <ol class="steps-list">
+          <li><span class="num">1</span> Set reTerminal to <strong>boot mode</strong> (eMMC disable jumper, e.g. J2 / nRPIBOOT).</li>
+          <li><span class="num">2</span> Connect <strong>USB slave</strong> to the host and power on. The device appears above; choose <strong>Backup</strong> or <strong>Deploy</strong>.</li>
+          <li><span class="num">3</span> When done, remove the jumper and power cycle to boot from eMMC.</li>
+        </ol>
+        <p class="help-sub">Network boot</p>
+        <ol class="steps-list">
+          <li><span class="num">1</span> Enable network boot (e.g. <code style="background:var(--bg-tertiary);padding:0.15rem 0.35rem;border-radius:4px;">BOOT_ORDER=0x21</code>) and ensure the device can reach this server.</li>
+          <li><span class="num">2</span> Boot with the provisioning client; it will show above. Choose <strong>Backup</strong> or <strong>Deploy</strong>.</li>
+        </ol>
       </div>
-      <div id="status" class="status-box idle">
-        <div class="status-phase">Idle</div>
-        <div class="status-message">Waiting for reTerminal in boot mode.</div>
-        <div id="statusError" class="status-error" style="display:none;"></div>
-        <div id="statusUpdated" class="status-updated"></div>
-        <div id="progressWrap" class="progress-wrap" style="display:none;">
-          <div id="progressBar" class="progress-bar"></div>
-        </div>
+    </details>
+
+    <!-- 5. Recent log (collapsible) -->
+    <details class="section" style="padding:0;">
+      <summary>Recent log</summary>
+      <div class="inner">
+        <pre id="log" class="log-pre"></pre>
       </div>
-      <details style="margin-top: 0.75rem;">
-        <summary>Recent flash log</summary>
-        <div id="log" class="log-box" style="margin-top: 0.5rem;"></div>
-      </details>
-    </div>
-  </main>
+    </details>
+  </div>
 
   <script>
-    const statusEl = document.getElementById('status');
-    const phaseEl = statusEl.querySelector('.status-phase');
-    const messageEl = statusEl.querySelector('.status-message');
-    const errorEl = document.getElementById('statusError');
-    const updatedEl = document.getElementById('statusUpdated');
+    const statusPill = document.getElementById('statusPill');
+    const statusMsg = document.getElementById('statusMsg');
+    const statusErr = document.getElementById('statusErr');
+    const statusMeta = document.getElementById('statusMeta');
     const progressWrap = document.getElementById('progressWrap');
-    const progressBar = document.getElementById('progressBar');
-    const logEl = document.getElementById('log');
+    const progressFill = document.getElementById('progressFill');
 
     const phaseLabels = {
       idle: 'Idle',
@@ -375,64 +400,63 @@
 
     function renderStatus(data) {
       const phase = data.phase || 'idle';
-      statusEl.className = 'status-box ' + phase;
-      phaseEl.textContent = phaseLabels[phase] || phase;
-      messageEl.textContent = data.message || '';
+      statusPill.className = 'status-pill ' + phase;
+      statusPill.textContent = phaseLabels[phase] || phase;
+      statusMsg.textContent = data.message || '';
 
       if (data.error) {
-        errorEl.textContent = data.error;
-        errorEl.style.display = 'block';
+        statusErr.textContent = data.error;
+        statusErr.style.display = 'block';
       } else {
-        errorEl.style.display = 'none';
+        statusErr.style.display = 'none';
       }
 
       if (data.updated) {
-        updatedEl.textContent = 'Updated: ' + data.updated;
-        updatedEl.style.display = 'block';
+        statusMeta.textContent = 'Updated ' + data.updated;
+        statusMeta.style.display = 'block';
       } else {
-        updatedEl.style.display = 'none';
+        statusMeta.style.display = 'none';
       }
 
       const progress = data.progress;
-      const inProgress = phase === 'rpiboot' || phase === 'flashing' || phase === 'backup';
-      const showProgress = progress != null && (inProgress || phase === 'done');
-      if (showProgress) {
+      const inProgress = ['rpiboot', 'flashing', 'backup'].includes(phase);
+      if (inProgress || (phase === 'done' && progress != null)) {
         progressWrap.style.display = 'block';
-        progressBar.classList.remove('indeterminate');
-        progressBar.style.width = (progress === null ? 0 : progress) + '%';
-        if (progress === null && inProgress) {
-          progressBar.classList.add('indeterminate');
-          progressBar.style.width = '40%';
+        progressFill.classList.remove('indeterminate');
+        if (progress != null) {
+          progressFill.style.width = progress + '%';
+        } else {
+          progressFill.classList.add('indeterminate');
+          progressFill.style.width = '35%';
         }
-      } else if (inProgress) {
-        progressWrap.style.display = 'block';
-        progressBar.classList.add('indeterminate');
-        progressBar.style.width = '40%';
       } else {
         progressWrap.style.display = 'none';
       }
     }
 
-    function renderPendingDevices(usb, network) {
+    function renderPending(usb, network) {
       const container = document.getElementById('pendingDevices');
       const noPending = document.getElementById('noPending');
       container.innerHTML = '';
       let hasAny = false;
+
       if (usb) {
         hasAny = true;
-        const div = document.createElement('div');
-        div.className = 'pending-device';
-        div.innerHTML = '<span class="label">Device connected (USB boot mode)</span><span class="actions"><button type="button" class="btn btn-secondary" data-source="usb" data-action="backup">Backup</button><button type="button" class="btn btn-primary" data-source="usb" data-action="deploy">Deploy</button></span>';
-        container.appendChild(div);
+        const el = document.createElement('div');
+        el.className = 'device-item';
+        el.innerHTML = '<div class="device-info"><div class="device-type">USB boot</div><div class="device-desc">Device connected — choose Backup or Deploy</div></div><div class="device-actions"><button type="button" class="btn btn-outline" data-source="usb" data-action="backup">Backup</button><button type="button" class="btn btn-primary" data-source="usb" data-action="deploy">Deploy</button></div>';
+        container.appendChild(el);
       }
       (network || []).forEach(function(d) {
         hasAny = true;
-        const div = document.createElement('div');
-        div.className = 'pending-device';
-        div.innerHTML = '<span class="label">Device (Network): ' + escapeHtml(d.ip || '') + ' — ' + escapeHtml(d.mac || '') + '</span><span class="actions"><button type="button" class="btn btn-secondary" data-source="network" data-mac="' + escapeHtml(d.mac || '') + '" data-action="backup">Backup</button><button type="button" class="btn btn-primary" data-source="network" data-mac="' + escapeHtml(d.mac || '') + '" data-action="deploy">Deploy</button></span>';
-        container.appendChild(div);
+        const el = document.createElement('div');
+        el.className = 'device-item';
+        el.innerHTML = '<div class="device-info"><div class="device-type">Network</div><div class="device-desc">' + escapeHtml(d.ip || '') + ' · ' + escapeHtml(d.mac || '') + '</div></div><div class="device-actions"><button type="button" class="btn btn-outline" data-source="network" data-mac="' + escapeHtml(d.mac || '') + '" data-action="backup">Backup</button><button type="button" class="btn btn-primary" data-source="network" data-mac="' + escapeHtml(d.mac || '') + '" data-action="deploy">Deploy</button></div>';
+        container.appendChild(el);
       });
+
       noPending.style.display = hasAny ? 'none' : 'block';
+
       container.querySelectorAll('button[data-action]').forEach(function(btn) {
         btn.onclick = function() {
           const source = btn.getAttribute('data-source');
@@ -451,24 +475,33 @@
       });
     }
 
-    function fetchPending() {
-      fetch('/api/pending-devices').then(function(r) { return r.json(); }).then(function(data) {
-        renderPendingDevices(data.usb || null, data.network || []);
-      }).catch(function() { renderPendingDevices(null, []); });
+    function renderBackups(backups) {
+      const tbody = document.getElementById('backupsBody');
+      const empty = document.getElementById('backupsEmpty');
+      tbody.innerHTML = '';
+      if (!backups || backups.length === 0) {
+        empty.style.display = 'block';
+        return;
+      }
+      empty.style.display = 'none';
+      backups.forEach(function(b) {
+        const tr = document.createElement('tr');
+        tr.innerHTML = '<td><a href="/api/backups/' + encodeURIComponent(b.name) + '" download>' + escapeHtml(b.name) + '</a></td><td class="backups-mono">' + fmtSize(b.size) + '</td><td class="backups-mono">' + fmtDate(b.mtime) + '</td>';
+        tbody.appendChild(tr);
+      });
     }
 
     function fetchStatus() {
-      fetch('/api/status')
-        .then(r => r.json())
-        .then(renderStatus)
-        .catch(() => renderStatus({ phase: 'error', message: 'Could not load status.' }));
+      fetch('/api/status').then(function(r) { return r.json(); }).then(renderStatus).catch(function() { renderStatus({ phase: 'error', message: 'Could not load status.' }); });
+    }
+    function fetchPending() {
+      fetch('/api/pending-devices').then(function(r) { return r.json(); }).then(function(d) { renderPending(d.usb || null, d.network || []); }).catch(function() { renderPending(null, []); });
     }
-
     function fetchLog() {
-      fetch('/api/log')
-        .then(r => r.json())
-        .then(data => { logEl.textContent = data.log || ''; })
-        .catch(() => { logEl.textContent = ''; });
+      fetch('/api/log').then(function(r) { return r.json(); }).then(function(d) { document.getElementById('log').textContent = d.log || ''; }).catch(function() {});
+    }
+    function fetchBackups() {
+      fetch('/api/backups').then(function(r) { return r.json(); }).then(function(d) { renderBackups(d.backups || []); }).catch(function() {});
     }
 
     function fmtSize(n) {
@@ -477,34 +510,10 @@
       return (n / 1e3).toFixed(0) + ' KB';
     }
     function fmtDate(ts) { return new Date(ts * 1000).toLocaleString(); }
-
-    function fetchBackups() {
-      fetch('/api/backups')
-        .then(r => r.json())
-        .then(data => {
-          const list = document.getElementById('backupsList');
-          const empty = document.getElementById('backupsEmpty');
-          list.innerHTML = '';
-          const backups = data.backups || [];
-          if (backups.length === 0) {
-            empty.style.display = 'block';
-            return;
-          }
-          empty.style.display = 'none';
-          backups.forEach(b => {
-            const li = document.createElement('li');
-            li.innerHTML = '<a href="/api/backups/' + encodeURIComponent(b.name) + '" download>' + escapeHtml(b.name) + '</a>' +
-              '<span class="backups-meta">' + fmtSize(b.size) + ' · ' + fmtDate(b.mtime) + '</span>';
-            list.appendChild(li);
-          });
-        })
-        .catch(() => {});
-    }
-
     function escapeHtml(s) {
-      const div = document.createElement('div');
-      div.textContent = s;
-      return div.innerHTML;
+      const d = document.createElement('div');
+      d.textContent = s;
+      return d.innerHTML;
     }
 
     fetchStatus();