From c5767002729dae408c9de6689e90f9d37c4bc25e Mon Sep 17 00:00:00 2001
From: Unheard0840 <conrad-rob@proton.me>
Date: Sat, 29 Aug 2026 12:48:29 +0000
Subject: [PATCH] Update web/index.html

Simplify wallet dashboard and add balance unit settings
---
 web/index.html | 2501 +++++++++++++++++++++++++++++++-----------------
 1 file changed, 1642 insertions(+), 859 deletions(-)

diff --git a/web/index.html b/web/index.html
index c90e58d..918ccc7 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,156 +4,178 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Munin Bitcoin</title>
+
   <style>
     :root {
       color-scheme: dark;
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      background: #111827;
-      color: #f9fafb;
+      font-family:
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        sans-serif;
+
+      --background: #111827;
+      --surface: #1f2937;
+      --surface-hover: #263241;
+      --border: #374151;
+      --text: #f9fafb;
+      --text-secondary: #d1d5db;
+      --muted: #9ca3af;
+      --accent: #93c5fd;
+      --success: #22c55e;
+      --danger: #ef4444;
+      --warning: #f59e0b;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    html {
+      background: var(--background);
     }
 
     body {
       margin: 0;
       min-height: 100vh;
-      background: #111827;
+      background: var(--background);
+      color: var(--text);
+    }
+
+    button,
+    input,
+    select {
+      font: inherit;
+    }
+
+    button {
+      cursor: pointer;
     }
 
     main {
-      max-width: 960px;
+      width: min(960px, calc(100% - 32px));
       margin: 0 auto;
-      padding: 48px 24px;
+      padding: 32px 0 64px;
+    }
+
+    h1,
+    h2,
+    h3,
+    p {
+      margin-top: 0;
     }
 
     h1 {
-      margin: 0 0 8px;
-      font-size: 32px;
+      margin-bottom: 6px;
+      font-size: 30px;
+      line-height: 1.2;
     }
 
     h2 {
-      margin: 0 0 20px;
-      font-size: 22px;
-    }
-
-    h3 {
-      margin: 0 0 12px;
-      font-size: 18px;
+      margin-bottom: 0;
+      font-size: 20px;
     }
 
     .subtitle {
-      margin: 0 0 32px;
-      color: #9ca3af;
+      margin-bottom: 28px;
+      color: var(--muted);
     }
 
     .card {
-      background: #1f2937;
-      border: 1px solid #374151;
-      border-radius: 12px;
-      padding: 24px;
       margin-bottom: 16px;
+      padding: 22px;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 14px;
     }
 
-    .row {
+    .hidden {
+      display: none !important;
+    }
+
+    .topbar {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 16px;
-      padding: 14px 0;
-      border-bottom: 1px solid #374151;
+      margin-bottom: 24px;
     }
 
-    .row:last-child {
-      border-bottom: 0;
-      padding-bottom: 0;
+    .topbar-actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
     }
 
-    .row:first-child {
-      padding-top: 0;
+    .icon-button,
+    .secondary-button {
+      padding: 9px 13px;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      background: transparent;
+      color: var(--text);
     }
 
-    .label {
-      color: #d1d5db;
+    .icon-button:hover,
+    .secondary-button:hover {
+      background: var(--surface-hover);
     }
 
-    .value {
-      text-align: right;
-      word-break: break-word;
+    .primary-button {
+      padding: 10px 15px;
+      border: 0;
+      border-radius: 8px;
+      background: var(--accent);
+      color: #111827;
+      font-weight: 650;
     }
 
-    .status {
-      display: inline-flex;
+    .primary-button:hover {
+      opacity: 0.9;
+    }
+
+    .status-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 12px;
+      margin-bottom: 24px;
+    }
+
+    .status-card {
+      padding: 16px;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+    }
+
+    .status-card-label {
+      margin-bottom: 8px;
+      color: var(--muted);
+      font-size: 13px;
+    }
+
+    .status-card-value {
+      display: flex;
       align-items: center;
       gap: 8px;
       font-weight: 600;
     }
 
-    .dot {
-      width: 10px;
-      height: 10px;
+    .status-dot {
+      width: 9px;
+      height: 9px;
+      flex: 0 0 auto;
       border-radius: 50%;
       background: #6b7280;
     }
 
-    .status.connected .dot,
-    .status.running .dot {
-      background: #22c55e;
+    .status-dot.connected {
+      background: var(--success);
     }
 
-    .status.disconnected .dot {
-      background: #ef4444;
-    }
-
-    .muted {
-      color: #9ca3af;
-    }
-
-    .error {
-      color: #fca5a5;
-    }
-
-    .success {
-      color: #86efac;
-    }
-
-    .login {
-      max-width: 420px;
-      margin: 80px auto;
-    }
-
-    .login input {
-      box-sizing: border-box;
-      width: 100%;
-      padding: 12px 14px;
-      border: 1px solid #4b5563;
-      border-radius: 8px;
-      background: #111827;
-      color: #f9fafb;
-      font: inherit;
-      margin-top: 8px;
-    }
-
-    .login button {
-      width: 100%;
-      margin-top: 16px;
-    }
-
-    button {
-      margin-top: 16px;
-      padding: 10px 16px;
-      border: 0;
-      border-radius: 8px;
-      background: #374151;
-      color: #f9fafb;
-      cursor: pointer;
-      font: inherit;
-    }
-
-    button:hover {
-      background: #4b5563;
-    }
-
-    button:disabled {
-      opacity: 0.6;
-      cursor: default;
+    .status-dot.disconnected {
+      background: var(--danger);
     }
 
     .section-header {
@@ -161,476 +183,755 @@
       align-items: center;
       justify-content: space-between;
       gap: 16px;
-      margin-bottom: 20px;
-    }
-
-    .section-header h2 {
-      margin: 0;
-    }
-
-    .display-toggle {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      padding: 4px;
-      background: #111827;
-      border: 1px solid #374151;
-      border-radius: 8px;
-    }
-
-    .display-toggle button {
-      margin: 0;
-      padding: 7px 12px;
-      background: transparent;
-      color: #9ca3af;
-      border-radius: 6px;
-    }
-
-    .display-toggle button:hover {
-      background: #374151;
-      color: #f9fafb;
-    }
-
-    .display-toggle button.active {
-      background: #4b5563;
-      color: #f9fafb;
-    }
-
-    .address-card {
-      background: #111827;
-      border: 1px solid #374151;
-      border-radius: 10px;
-      padding: 18px;
-      margin-bottom: 12px;
-    }
-
-    .address-card:last-child {
-      margin-bottom: 0;
-    }
-
-    .address {
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-      font-size: 13px;
-      word-break: break-all;
-    }
-
-    .address-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      gap: 16px;
       margin-bottom: 14px;
     }
 
-    .address-label {
-      font-weight: 600;
+    .section-header-right {
+      display: flex;
+      align-items: center;
+      gap: 10px;
     }
 
-    .balance {
-      font-size: 20px;
-      font-weight: 700;
-      white-space: nowrap;
+    .muted {
+      color: var(--muted);
     }
 
-    .balance small {
-      font-size: 13px;
-      font-weight: 400;
-      color: #9ca3af;
+    .error {
+      color: #fca5a5;
     }
 
-    .stats {
+    .empty {
+      padding: 28px 8px;
+      color: var(--muted);
+      text-align: center;
+    }
+
+    .wallet {
+      overflow: hidden;
+      margin-bottom: 12px;
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      background: var(--surface);
+    }
+
+    .wallet:last-child {
+      margin-bottom: 0;
+    }
+
+    .wallet-header {
       display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 12px;
-    }
-
-    .stat {
-      background: #1f2937;
-      border-radius: 8px;
-      padding: 12px;
-    }
-
-    .stat-label {
-      display: block;
-      color: #9ca3af;
-      font-size: 12px;
-      margin-bottom: 4px;
-    }
-
-    .stat-value {
-      font-weight: 600;
-      word-break: break-word;
-    }
-
-    .utxo-toggle {
+      grid-template-columns: minmax(0, 1fr) auto auto auto;
+      align-items: center;
+      gap: 24px;
       width: 100%;
-      margin-top: 14px;
+      padding: 18px;
+      border: 0;
+      background: transparent;
+      color: var(--text);
       text-align: left;
     }
 
-    .utxo-list {
+    .wallet-header:hover {
+      background: var(--surface-hover);
+    }
+
+    .wallet-name {
+      min-width: 0;
+    }
+
+    .wallet-title {
+      overflow: hidden;
+      margin-bottom: 4px;
+      font-weight: 650;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .wallet-address {
+      overflow: hidden;
+      color: var(--muted);
+      font-family:
+        ui-monospace,
+        SFMono-Regular,
+        Menlo,
+        Monaco,
+        Consolas,
+        monospace;
+      font-size: 12px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .wallet-stat {
+      min-width: 110px;
+    }
+
+    .wallet-stat-label {
+      margin-bottom: 3px;
+      color: var(--muted);
+      font-size: 12px;
+    }
+
+    .wallet-stat-value {
+      white-space: nowrap;
+    }
+
+    .wallet-balance {
+      font-weight: 650;
+    }
+
+    .wallet-chevron {
+      width: 22px;
+      color: var(--muted);
+      text-align: center;
+      font-size: 18px;
+    }
+
+    .wallet-content {
+      padding: 0 18px 18px;
+      border-top: 1px solid var(--border);
+    }
+
+    .wallet-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 14px 0;
+    }
+
+    .wallet-toolbar-left {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .small-button {
+      padding: 7px 10px;
+      border: 1px solid var(--border);
+      border-radius: 7px;
+      background: transparent;
+      color: var(--text-secondary);
+      font-size: 13px;
+    }
+
+    .small-button:hover {
+      background: var(--surface-hover);
+    }
+
+    .transactions {
+      border-top: 1px solid var(--border);
+    }
+
+    .transaction {
+      border-bottom: 1px solid var(--border);
+    }
+
+    .transaction:last-child {
+      border-bottom: 0;
+    }
+
+    .transaction-button {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto auto;
+      align-items: center;
+      gap: 16px;
+      width: 100%;
+      padding: 15px 0;
+      border: 0;
+      background: transparent;
+      color: var(--text);
+      text-align: left;
+    }
+
+    .transaction-button:hover {
+      background: rgba(255, 255, 255, 0.02);
+    }
+
+    .transaction-main {
+      min-width: 0;
+    }
+
+    .transaction-date {
+      margin-bottom: 4px;
+      font-size: 14px;
+    }
+
+    .transaction-id {
+      overflow: hidden;
+      color: var(--muted);
+      font-family:
+        ui-monospace,
+        SFMono-Regular,
+        Menlo,
+        Monaco,
+        Consolas,
+        monospace;
+      font-size: 11px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .transaction-type {
+      padding: 4px 8px;
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      font-size: 12px;
+      white-space: nowrap;
+    }
+
+    .transaction-type.received {
+      color: #86efac;
+    }
+
+    .transaction-type.sent {
+      color: #fca5a5;
+    }
+
+    .transaction-amount {
+      min-width: 140px;
+      font-family:
+        ui-monospace,
+        SFMono-Regular,
+        Menlo,
+        Monaco,
+        Consolas,
+        monospace;
+      font-size: 13px;
+      text-align: right;
+      white-space: nowrap;
+    }
+
+    .transaction-chevron {
+      width: 18px;
+      color: var(--muted);
+      text-align: center;
+    }
+
+    .transaction-details {
+      padding: 0 0 16px;
+    }
+
+    .transaction-detail-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 10px;
+      padding: 14px;
+      border: 1px solid var(--border);
+      border-radius: 9px;
+      background: rgba(0, 0, 0, 0.12);
+    }
+
+    .detail-item {
+      min-width: 0;
+    }
+
+    .detail-label {
+      margin-bottom: 3px;
+      color: var(--muted);
+      font-size: 11px;
+    }
+
+    .detail-value {
+      overflow-wrap: anywhere;
+      font-size: 13px;
+    }
+
+    .detail-value.mono {
+      font-family:
+        ui-monospace,
+        SFMono-Regular,
+        Menlo,
+        Monaco,
+        Consolas,
+        monospace;
+    }
+
+    .mempool-link {
+      display: inline-block;
       margin-top: 12px;
-      padding-top: 12px;
-      border-top: 1px solid #374151;
+      color: var(--accent);
+      font-size: 13px;
+      text-decoration: none;
+    }
+
+    .mempool-link:hover {
+      text-decoration: underline;
+    }
+
+    .utxo-section {
+      margin-top: 14px;
+      border-top: 1px solid var(--border);
+    }
+
+    .utxo-list {
+      padding-top: 8px;
     }
 
     .utxo {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 16px;
       padding: 12px 0;
-      border-bottom: 1px solid #374151;
+      border-bottom: 1px solid var(--border);
     }
 
     .utxo:last-child {
       border-bottom: 0;
-      padding-bottom: 0;
     }
 
-    .utxo:first-child {
-      padding-top: 0;
+    .utxo-outpoint {
+      overflow: hidden;
+      margin-bottom: 3px;
+      color: var(--muted);
+      font-family:
+        ui-monospace,
+        SFMono-Regular,
+        Menlo,
+        Monaco,
+        Consolas,
+        monospace;
+      font-size: 11px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
-    .utxo-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      gap: 16px;
-    }
-
-    .utxo-txid {
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    .utxo-height {
+      color: var(--muted);
       font-size: 12px;
-      word-break: break-all;
-    }
-
-    .utxo-index {
-      color: #9ca3af;
-      font-size: 12px;
-      margin-top: 4px;
     }
 
     .utxo-value {
-      font-weight: 600;
+      align-self: center;
+      font-family:
+        ui-monospace,
+        SFMono-Regular,
+        Menlo,
+        Monaco,
+        Consolas,
+        monospace;
+      font-size: 13px;
       white-space: nowrap;
     }
 
-    .transaction {
-      background: #111827;
-      border: 1px solid #374151;
-      border-radius: 10px;
-      padding: 16px;
-      margin-bottom: 10px;
+    .settings-panel {
+      margin-top: 16px;
     }
 
-    .transaction:last-child {
-      margin-bottom: 0;
-    }
-
-    .transaction-header {
+    .settings-row {
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      gap: 16px;
-      margin-bottom: 10px;
+      justify-content: space-between;
+      gap: 24px;
+      padding: 14px 0;
+      border-bottom: 1px solid var(--border);
     }
 
-    .txid {
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-      font-size: 12px;
-      word-break: break-all;
+    .settings-row:first-child {
+      padding-top: 0;
     }
 
-    .transaction button {
-      margin-top: 0;
-      white-space: nowrap;
+    .settings-row:last-child {
+      padding-bottom: 0;
+      border-bottom: 0;
     }
 
-    .transaction-meta {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 16px;
-      color: #9ca3af;
+    .settings-title {
+      margin-bottom: 3px;
+      font-weight: 600;
+    }
+
+    .settings-description {
+      color: var(--muted);
       font-size: 13px;
     }
 
-    .details {
-      margin-top: 14px;
-      padding-top: 14px;
-      border-top: 1px solid #374151;
-    }
-
-    .details pre {
-      margin: 0;
-      padding: 14px;
-      overflow-x: auto;
-      background: #030712;
+    .unit-selector {
+      display: flex;
+      padding: 3px;
+      border: 1px solid var(--border);
       border-radius: 8px;
-      color: #d1d5db;
+      background: var(--background);
+    }
+
+    .unit-button {
+      min-width: 64px;
+      padding: 7px 10px;
+      border: 0;
+      border-radius: 6px;
+      background: transparent;
+      color: var(--muted);
+    }
+
+    .unit-button.active {
+      background: var(--surface);
+      color: var(--text);
+      font-weight: 600;
+    }
+
+    .service-details {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 12px;
+    }
+
+    .service-detail {
+      padding: 12px;
+      border: 1px solid var(--border);
+      border-radius: 9px;
+    }
+
+    .service-detail-label {
+      margin-bottom: 5px;
+      color: var(--muted);
       font-size: 12px;
-      white-space: pre-wrap;
-      word-break: break-word;
     }
 
-    .empty {
-      color: #9ca3af;
-      padding: 8px 0;
+    .service-detail-value {
+      overflow-wrap: anywhere;
+      font-size: 13px;
     }
 
-    @media (max-width: 700px) {
+    .login {
+      width: min(420px, 100%);
+      margin: 80px auto;
+    }
+
+    .login h1 {
+      margin-bottom: 8px;
+    }
+
+    .login label {
+      display: block;
+      margin-bottom: 8px;
+      font-size: 14px;
+    }
+
+    .login input {
+      width: 100%;
+      padding: 12px 14px;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      outline: 0;
+      background: var(--background);
+      color: var(--text);
+    }
+
+    .login input:focus {
+      border-color: var(--accent);
+    }
+
+    .login button {
+      width: 100%;
+      margin-top: 14px;
+    }
+
+    .footer {
+      padding-top: 12px;
+      color: var(--muted);
+      font-size: 12px;
+      text-align: center;
+    }
+
+    @media (max-width: 720px) {
       main {
-        padding: 28px 16px;
+        width: min(100% - 20px, 960px);
+        padding-top: 20px;
       }
 
-      .row {
+      .topbar {
         align-items: flex-start;
-        flex-direction: column;
-        gap: 6px;
       }
 
-      .value {
-        text-align: left;
-      }
-
-      .section-header {
-        align-items: flex-start;
-        flex-direction: column;
-      }
-
-      .address-header,
-      .transaction-header,
-      .utxo-row {
-        align-items: flex-start;
-        flex-direction: column;
-      }
-
-      .stats {
+      .status-grid {
         grid-template-columns: 1fr;
       }
+
+      .wallet-header {
+        grid-template-columns: minmax(0, 1fr) auto;
+        gap: 12px;
+      }
+
+      .wallet-stat {
+        min-width: 0;
+      }
+
+      .wallet-stat:nth-of-type(2),
+      .wallet-stat:nth-of-type(3) {
+        display: none;
+      }
+
+      .transaction-button {
+        grid-template-columns: minmax(0, 1fr) auto;
+        gap: 10px;
+      }
+
+      .transaction-type {
+        display: none;
+      }
+
+      .transaction-amount {
+        min-width: 0;
+      }
+
+      .transaction-chevron {
+        display: none;
+      }
+
+      .transaction-detail-grid {
+        grid-template-columns: 1fr;
+      }
+
+      .service-details {
+        grid-template-columns: 1fr;
+      }
+
+      .settings-row {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 12px;
+      }
     }
   </style>
 </head>
+
 <body>
   <main>
     <section id="login" class="card login">
       <h1>Munin Bitcoin</h1>
-      <p class="subtitle">Sign in to access Munin Bitcoin.</p>
+      <p class="subtitle">Sign in to access your Bitcoin wallets.</p>
 
       <form id="login-form">
         <label for="password">Admin password</label>
+
         <input
           id="password"
           name="password"
           type="password"
           autocomplete="current-password"
           required
-        />
+        >
 
-        <button type="submit">Sign in</button>
+        <button class="primary-button" type="submit">
+          Sign in
+        </button>
       </form>
 
       <p id="login-error" class="error"></p>
     </section>
 
-    <section id="dashboard" hidden>
-      <h1>Munin Bitcoin</h1>
-      <p class="subtitle">
-        Bitcoin watch-only wallet monitoring and label management
-      </p>
-
-      <section class="card">
-        <div class="row">
-          <span class="label">Munin service</span>
-          <span id="service-status" class="status">
-            <span class="dot"></span>
-            <span>Checking...</span>
-          </span>
+    <section id="dashboard" class="hidden">
+      <header class="topbar">
+        <div>
+          <h1>Munin Bitcoin</h1>
+          <p class="subtitle">Bitcoin watch-only monitoring</p>
         </div>
 
-        <div class="row">
-          <span class="label">Fulcrum (Electrum server)</span>
-          <span id="fulcrum-status" class="status">
-            <span class="dot"></span>
-            <span>Checking...</span>
-          </span>
+        <div class="topbar-actions">
+          <button
+            id="settings-button"
+            class="icon-button"
+            type="button"
+          >
+            Settings
+          </button>
+        </div>
+      </header>
+
+      <section class="status-grid">
+        <div class="status-card">
+          <div class="status-card-label">
+            Munin service
+          </div>
+
+          <div class="status-card-value">
+            <span
+              id="service-dot"
+              class="status-dot"
+            ></span>
+
+            <span id="service-status">
+              Checking...
+            </span>
+          </div>
         </div>
 
-        <div class="row">
-          <span class="label">Fulcrum endpoint</span>
-          <span id="fulcrum-url" class="value muted">Checking...</span>
+        <div class="status-card">
+          <div class="status-card-label">
+            Fulcrum
+          </div>
+
+          <div class="status-card-value">
+            <span
+              id="fulcrum-dot"
+              class="status-dot"
+            ></span>
+
+            <span id="fulcrum-status">
+              Checking...
+            </span>
+          </div>
         </div>
-
-        <div class="row">
-          <span class="label">Blockchain height</span>
-          <span id="blockchain-height" class="value">Checking...</span>
-        </div>
-      </section>
-
-      <section class="card">
-        <div class="row">
-          <span class="label">Wallet</span>
-          <span id="wallet" class="value muted">Not configured</span>
-        </div>
-
-        <div class="row">
-          <span class="label">Labels</span>
-          <span id="labels" class="value">0</span>
-        </div>
-
-        <div class="row">
-          <span class="label">Transactions</span>
-          <span id="transactions" class="value">0</span>
-        </div>
-
-        <div class="row">
-          <span class="label">Last scan</span>
-          <span id="last-scan" class="value muted">Never</span>
-        </div>
-
-        <button type="button" onclick="refreshDashboard()">
-          Refresh
-        </button>
-
-        <p id="error" class="error"></p>
       </section>
 
       <section class="card">
         <div class="section-header">
-          <h2>Watched addresses</h2>
+          <div>
+            <h2>Wallets</h2>
+          </div>
 
-          <div class="display-toggle" aria-label="Bitcoin amount display">
+          <div class="section-header-right">
+            <span
+              id="wallet-count"
+              class="muted"
+            ></span>
+          </div>
+        </div>
+
+        <div id="wallet-list">
+          <div class="empty">
+            Loading wallets...
+          </div>
+        </div>
+
+        <p id="wallet-error" class="error"></p>
+      </section>
+
+      <section
+        id="settings-panel"
+        class="card settings-panel hidden"
+      >
+        <div class="section-header">
+          <h2>Settings</h2>
+
+          <button
+            id="close-settings"
+            class="secondary-button"
+            type="button"
+          >
+            Close
+          </button>
+        </div>
+
+        <div class="settings-row">
+          <div>
+            <div class="settings-title">
+              Balance unit
+            </div>
+
+            <div class="settings-description">
+              Choose how Bitcoin balances are displayed.
+            </div>
+          </div>
+
+          <div class="unit-selector">
             <button
-              id="display-btc"
+              id="unit-btc"
+              class="unit-button"
               type="button"
-              onclick="setDisplayUnit('btc')"
+              data-unit="BTC"
             >
               BTC
             </button>
+
             <button
-              id="display-sats"
+              id="unit-sats"
+              class="unit-button"
               type="button"
-              onclick="setDisplayUnit('sats')"
+              data-unit="sats"
             >
               sats
             </button>
           </div>
         </div>
 
-        <div id="addresses">
-          <p class="muted">Loading addresses...</p>
+        <div class="settings-row">
+          <div>
+            <div class="settings-title">
+              Fulcrum endpoint
+            </div>
+
+            <div
+              id="settings-fulcrum-url"
+              class="settings-description"
+            >
+              Checking...
+            </div>
+          </div>
+        </div>
+
+        <div class="settings-row">
+          <div>
+            <div class="settings-title">
+              Blockchain height
+            </div>
+
+            <div
+              id="settings-blockchain-height"
+              class="settings-description"
+            >
+              Checking...
+            </div>
+          </div>
         </div>
       </section>
 
-      <section class="card">
-        <div class="section-header">
-          <h2>Transactions</h2>
-          <span id="transaction-count" class="muted"></span>
-        </div>
-
-        <div id="transaction-list">
-          <p class="muted">Loading transactions...</p>
-        </div>
-      </section>
+      <footer class="footer">
+        <span id="last-refresh">
+          Not synced
+        </span>
+      </footer>
     </section>
   </main>
 
   <script>
+    const STORAGE_KEY = 'munin-bitcoin-balance-unit';
+
+    let balanceUnit = loadBalanceUnit();
+    let addresses = [];
     let transactionDetails = {};
-    let displayUnit = 'btc';
-    let currentAddresses = [];
-    let currentTransactions = [];
+    let expandedWallets = new Set();
+    let expandedUtxos = new Set();
+    let expandedTransactions = new Set();
+    let lastSuccessfulSync = null;
 
-    function setStatus(element, text, state) {
-      element.className = `status ${state}`;
-      element.querySelector('span:last-child').textContent = text;
-    }
+    function loadBalanceUnit() {
+      const value = localStorage.getItem(STORAGE_KEY);
 
-    function setDisplayUnit(unit) {
-      if (unit !== 'btc' && unit !== 'sats') {
-        return;
+      if (value === 'sats') {
+        return 'sats';
       }
 
-      displayUnit = unit;
-
-      document.getElementById('display-btc').classList.toggle(
-        'active',
-        unit === 'btc',
-      );
-
-      document.getElementById('display-sats').classList.toggle(
-        'active',
-        unit === 'sats',
-      );
-
-      renderAddresses(currentAddresses);
-      renderTransactions(currentTransactions);
+      return 'BTC';
     }
 
-    function formatSats(value) {
-      const sats = Number(value || 0);
-
-      if (!Number.isFinite(sats)) {
-        return '0 sats';
-      }
-
-      return `${Math.round(sats).toLocaleString()} sats`;
+    function saveBalanceUnit(unit) {
+      balanceUnit = unit;
+      localStorage.setItem(STORAGE_KEY, unit);
+      updateUnitButtons();
+      renderWallets(addresses);
     }
 
-    function formatBtcFromSats(value) {
-      const sats = Number(value || 0);
-
-      if (!Number.isFinite(sats)) {
-        return '0 BTC';
-      }
-
-      return `${(sats / 100000000).toFixed(8)} BTC`;
+    function updateUnitButtons() {
+      document
+        .querySelectorAll('.unit-button')
+        .forEach((button) => {
+          button.classList.toggle(
+            'active',
+            button.dataset.unit === balanceUnit,
+          );
+        });
     }
 
-    function formatAmount(value) {
-      if (displayUnit === 'sats') {
-        return formatSats(value);
-      }
-
-      return formatBtcFromSats(value);
-    }
-
-    function formatDate(timestamp) {
-      if (!timestamp) {
-        return 'Unknown date';
-      }
-
-      const date = new Date(Number(timestamp) * 1000);
-
-      if (Number.isNaN(date.getTime())) {
-        return 'Unknown date';
-      }
-
-      return date.toLocaleString();
-    }
-
-    function shortenTxid(txid) {
-      if (!txid || txid.length < 20) {
-        return txid || '';
-      }
-
-      return `${txid.slice(0, 12)}…${txid.slice(-12)}`;
-    }
-
-    function escapeHtml(value) {
-      return String(value ?? '')
-        .replaceAll('&', '&amp;')
-        .replaceAll('<', '&lt;')
-        .replaceAll('>', '&gt;')
-        .replaceAll('"', '&quot;')
-        .replaceAll("'", '&#039;');
-    }
-
-    async function showLogin() {
-      document.getElementById('login').hidden = false;
-      document.getElementById('dashboard').hidden = true;
+    function showLogin() {
+      document.getElementById('login').classList.remove('hidden');
+      document.getElementById('dashboard').classList.add('hidden');
       document.getElementById('password').focus();
     }
 
-    async function showDashboard() {
-      document.getElementById('login').hidden = true;
-      document.getElementById('dashboard').hidden = false;
+    function showDashboard() {
+      document.getElementById('login').classList.add('hidden');
+      document.getElementById('dashboard').classList.remove('hidden');
     }
 
     async function login(password) {
@@ -647,415 +948,731 @@
         throw new Error('Invalid password');
       }
 
-      await showDashboard();
-      await refreshDashboard();
+      showDashboard();
+
+      await loadAll();
     }
 
-    async function loadStatus() {
-      const response = await fetch('/api/status', {
-        credentials: 'same-origin',
+    function escapeHtml(value) {
+      return String(value ?? '')
+        .replaceAll('&', '&amp;')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;')
+        .replaceAll("'", '&#039;');
+    }
+
+    function formatSats(value) {
+      return Math.round(Number(value) || 0).toLocaleString(
+        'en-US',
+      );
+    }
+
+    function formatBtc(value) {
+      return (Number(value || 0) / 100000000).toFixed(8);
+    }
+
+    function formatAmount(value) {
+      const sats = Math.round(Number(value) || 0);
+
+      if (balanceUnit === 'sats') {
+        return `${formatSats(sats)} sats`;
+      }
+
+      return `${formatBtc(sats)} BTC`;
+    }
+
+    function formatSignedAmount(value) {
+      const sats = Math.round(Number(value) || 0);
+      const sign = sats > 0 ? '+' : sats < 0 ? '−' : '';
+
+      if (balanceUnit === 'sats') {
+        return `${sign}${formatSats(Math.abs(sats))} sats`;
+      }
+
+      return `${sign}${formatBtc(Math.abs(sats))} BTC`;
+    }
+
+    function formatDate(timestamp) {
+      if (
+        timestamp === null ||
+        timestamp === undefined ||
+        !Number.isFinite(Number(timestamp))
+      ) {
+        return 'Unknown';
+      }
+
+      const date = new Date(Number(timestamp) * 1000);
+
+      if (Number.isNaN(date.getTime())) {
+        return 'Unknown';
+      }
+
+      return date.toLocaleString(undefined, {
+        year: '2-digit',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
       });
+    }
 
-      if (response.status === 401) {
-        await showLogin();
-        throw new Error('Authentication required');
+    function formatSyncAge(date) {
+      if (!date) {
+        return 'Not synced';
       }
 
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}`);
-      }
-
-      const status = await response.json();
-
-      setStatus(
-        document.getElementById('service-status'),
-        status.service === 'running' ? 'Running' : 'Not running',
-        status.service === 'running' ? 'running' : 'disconnected',
+      const seconds = Math.max(
+        0,
+        Math.floor((Date.now() - date.getTime()) / 1000),
       );
 
-      const fulcrum = status.fulcrum || {};
-
-      if (fulcrum.connected) {
-        setStatus(
-          document.getElementById('fulcrum-status'),
-          'Connected',
-          'connected',
-        );
-      } else if (fulcrum.configured) {
-        setStatus(
-          document.getElementById('fulcrum-status'),
-          'Not connected',
-          'disconnected',
-        );
-      } else {
-        setStatus(
-          document.getElementById('fulcrum-status'),
-          'Not configured',
-          'disconnected',
-        );
+      if (seconds < 60) {
+        return 'Synced just now';
       }
 
-      document.getElementById('fulcrum-url').textContent =
-        fulcrum.url || 'Not configured';
+      const minutes = Math.floor(seconds / 60);
 
-      document.getElementById('blockchain-height').textContent =
-        fulcrum.blockchainHeight ?? 'Unavailable';
+      if (minutes < 60) {
+        return `Synced ${minutes} min ago`;
+      }
 
-      document.getElementById('wallet').textContent =
-        status.wallet || 'Not configured';
+      const hours = Math.floor(minutes / 60);
 
-      document.getElementById('labels').textContent =
-        status.labels ?? 0;
+      if (hours < 24) {
+        return `Synced ${hours} h ago`;
+      }
 
-      document.getElementById('transactions').textContent =
-        status.transactions ?? 0;
+      const days = Math.floor(hours / 24);
 
-      document.getElementById('last-scan').textContent =
-        status.lastScan || 'Never';
+      return `Synced ${days} d ago`;
     }
 
-    async function loadAddresses() {
-      const response = await fetch('/api/addresses/data', {
-        credentials: 'same-origin',
-      });
-
-      if (response.status === 401) {
-        await showLogin();
-        throw new Error('Authentication required');
+    function getLastActivity(address) {
+      if (!Array.isArray(address.history) || !address.history.length) {
+        return null;
       }
 
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}`);
+      let latest = null;
+
+      for (const item of address.history) {
+        const height = Number(item.height);
+
+        if (
+          latest === null ||
+          (Number.isFinite(height) &&
+            height > Number(latest.height))
+        ) {
+          latest = item;
+        }
       }
 
-      const payload = await response.json();
+      return latest;
+    }
 
-      const addresses = Array.isArray(payload.addresses)
-        ? payload.addresses
+    function getAddressBalance(address) {
+      const confirmed =
+        Number(address.confirmedBalance || 0);
+
+      const unconfirmed =
+        Number(address.unconfirmedBalance || 0);
+
+      return confirmed + unconfirmed;
+    }
+
+    function getWalletName(address) {
+      if (
+        typeof address.label === 'string' &&
+        address.label.trim()
+      ) {
+        return address.label.trim();
+      }
+
+      return 'Wallet';
+    }
+
+    function shortenAddress(address) {
+      if (!address || address.length < 18) {
+        return address || '';
+      }
+
+      return (
+        address.slice(0, 10) +
+        '…' +
+        address.slice(-8)
+      );
+    }
+
+    function getTransactionForWallet(wallet, txid) {
+      const history = Array.isArray(wallet.history)
+        ? wallet.history
         : [];
 
-      currentAddresses = addresses;
-      renderAddresses(addresses);
-
-      return addresses;
+      return history.find(
+        (item) => item.tx_hash === txid,
+      );
     }
 
-    function renderAddresses(addresses) {
-      const container = document.getElementById('addresses');
-
-      if (!addresses.length) {
-        container.innerHTML =
-          '<p class="empty">No Bitcoin addresses are being watched.</p>';
-        return;
+    function getWalletTransactions(wallet) {
+      if (!Array.isArray(wallet.history)) {
+        return [];
       }
 
-      container.innerHTML = addresses.map((entry, index) => {
-        const label = entry.label
-          ? escapeHtml(entry.label)
-          : 'No label';
-
-        const confirmed = entry.confirmedBalance;
-        const unconfirmed = entry.unconfirmedBalance;
-
-        const error = entry.error
-          ? `<p class="error">${escapeHtml(entry.error)}</p>`
-          : '';
-
-        const utxos = Array.isArray(entry.utxos)
-          ? entry.utxos
-          : [];
-
-        const historyCount = Array.isArray(entry.history)
-          ? entry.history.length
-          : 0;
-
-        const utxoButtonLabel =
-          utxos.length === 1
-            ? 'Show UTXO (1)'
-            : `Show UTXOs (${utxos.length})`;
-
-        return `
-          <div class="address-card">
-            <div class="address-header">
-              <div>
-                <div class="address-label">${label}</div>
-                <div class="address">${escapeHtml(entry.address)}</div>
-              </div>
-
-              <div class="balance">
-                ${
-                  confirmed === null || confirmed === undefined
-                    ? 'Unavailable'
-                    : formatAmount(confirmed)
-                }
-                <small>confirmed</small>
-              </div>
-            </div>
-
-            <div class="stats">
-              <div class="stat">
-                <span class="stat-label">Unconfirmed</span>
-                <span class="stat-value">
-                  ${
-                    unconfirmed === null ||
-                    unconfirmed === undefined
-                      ? 'Unavailable'
-                      : formatAmount(unconfirmed)
-                  }
-                </span>
-              </div>
-
-              <div class="stat">
-                <span class="stat-label">UTXOs</span>
-                <span class="stat-value">${utxos.length}</span>
-              </div>
-
-              <div class="stat">
-                <span class="stat-label">History entries</span>
-                <span class="stat-value">${historyCount}</span>
-              </div>
-            </div>
-
-            ${
-              utxos.length
-                ? `
-                  <button
-                    type="button"
-                    class="utxo-toggle"
-                    onclick="toggleUtxos(${index})"
-                  >
-                    ${utxoButtonLabel}
-                  </button>
-
-                  <div
-                    id="utxos-${index}"
-                    class="utxo-list"
-                    hidden
-                  >
-                    ${renderUtxos(utxos)}
-                  </div>
-                `
-                : ''
-            }
-
-            ${error}
-          </div>
-        `;
-      }).join('');
-    }
-
-    function renderUtxos(utxos) {
-      return utxos.map((utxo) => {
-        const txid = utxo.tx_hash || utxo.txid || '';
-        const index = utxo.tx_pos ?? utxo.vout ?? 0;
-        const value = utxo.value ?? 0;
-        const height = utxo.height;
-
-        return `
-          <div class="utxo">
-            <div class="utxo-row">
-              <div>
-                <div class="utxo-txid">
-                  ${escapeHtml(txid)}
-                </div>
-                <div class="utxo-index">
-                  Output ${escapeHtml(index)}
-                  ${
-                    height
-                      ? ` · Block ${escapeHtml(height)}`
-                      : ' · Unconfirmed'
-                  }
-                </div>
-              </div>
-
-              <div class="utxo-value">
-                ${formatAmount(value)}
-              </div>
-            </div>
-          </div>
-        `;
-      }).join('');
-    }
-
-    function toggleUtxos(index) {
-      const container = document.getElementById(`utxos-${index}`);
-
-      if (!container) {
-        return;
-      }
-
-      const button =
-        container.previousElementSibling;
-
-      const address = currentAddresses[index];
-
-      if (container.hidden) {
-        container.hidden = false;
-
-        const count = Array.isArray(address?.utxos)
-          ? address.utxos.length
-          : 0;
-
-        button.textContent =
-          count === 1
-            ? 'Hide UTXO (1)'
-            : `Hide UTXOs (${count})`;
-      } else {
-        container.hidden = true;
-
-        const count = Array.isArray(address?.utxos)
-          ? address.utxos.length
-          : 0;
-
-        button.textContent =
-          count === 1
-            ? 'Show UTXO (1)'
-            : `Show UTXOs (${count})`;
-      }
-    }
-
-    async function loadTransactions(addresses) {
       const transactions = new Map();
 
-      for (const address of addresses) {
-        if (!Array.isArray(address.history)) {
+      for (const item of wallet.history) {
+        if (!item || !item.tx_hash) {
           continue;
         }
 
-        for (const item of address.history) {
-          if (!item || typeof item.tx_hash !== 'string') {
-            continue;
-          }
-
-          if (!transactions.has(item.tx_hash)) {
-            transactions.set(item.tx_hash, {
-              txid: item.tx_hash,
-              height: item.height ?? null,
-              addresses: [],
-            });
-          }
-
-          const transaction = transactions.get(item.tx_hash);
-
-          if (!transaction.addresses.includes(address.address)) {
-            transaction.addresses.push(address.address);
-          }
-
-          if (
-            transaction.height === null &&
-            item.height !== undefined
-          ) {
-            transaction.height = item.height;
-          }
+        if (!transactions.has(item.tx_hash)) {
+          transactions.set(item.tx_hash, {
+            txid: item.tx_hash,
+            height: item.height ?? null,
+            timestamp: null,
+            amount: 0,
+          });
         }
+
+        const transaction =
+          transactions.get(item.tx_hash);
+
+        transaction.height =
+          transaction.height === null &&
+          item.height !== null &&
+          item.height !== undefined
+            ? item.height
+            : transaction.height;
       }
 
-      const list = Array.from(transactions.values());
+      return Array.from(transactions.values()).sort(
+        (a, b) => {
+          const aHeight =
+            a.height === null ? Number.MAX_SAFE_INTEGER : Number(a.height);
 
-      list.sort((a, b) => {
-        const heightA =
-          a.height === null || a.height === undefined
-            ? Number.MAX_SAFE_INTEGER
-            : Number(a.height);
+          const bHeight =
+            b.height === null ? Number.MAX_SAFE_INTEGER : Number(b.height);
 
-        const heightB =
-          b.height === null || b.height === undefined
-            ? Number.MAX_SAFE_INTEGER
-            : Number(b.height);
-
-        return heightB - heightA;
-      });
-
-      currentTransactions = list;
-      renderTransactions(list);
-
-      return list;
+          return bHeight - aHeight;
+        },
+      );
     }
 
-    function renderTransactions(transactions) {
-      const container = document.getElementById('transaction-list');
-      const count = document.getElementById('transaction-count');
+    function transactionType(wallet, transaction) {
+      const historyItem = getTransactionForWallet(
+        wallet,
+        transaction.txid,
+      );
 
-      count.textContent = `${transactions.length} found`;
+      if (
+        historyItem &&
+        Number(historyItem.height) < 0
+      ) {
+        return 'Pending';
+      }
 
-      if (!transactions.length) {
+      return 'Transaction';
+    }
+
+    function renderWallets(wallets) {
+      const container =
+        document.getElementById('wallet-list');
+
+      const count =
+        document.getElementById('wallet-count');
+
+      count.textContent =
+        wallets.length === 1
+          ? '1 wallet'
+          : `${wallets.length} wallets`;
+
+      if (!wallets.length) {
         container.innerHTML =
-          '<p class="empty">No transactions found for watched addresses.</p>';
+          '<div class="empty">No wallets are being watched.</div>';
+
         return;
       }
 
-      container.innerHTML = transactions.map((transaction) => {
-        const txid = escapeHtml(transaction.txid);
+      container.innerHTML = wallets
+        .map((wallet, index) => {
+          const walletId =
+            `wallet-${index}-${encodeURIComponent(wallet.address)}`;
 
-        const height =
-          transaction.height === null ||
-          transaction.height === undefined
-            ? 'Unconfirmed'
-            : `Block ${escapeHtml(transaction.height)}`;
+          const expanded =
+            expandedWallets.has(wallet.address);
 
-        return `
-          <div class="transaction">
-            <div class="transaction-header">
-              <div class="txid">${txid}</div>
+          const balance =
+            getAddressBalance(wallet);
 
+          const activity =
+            getLastActivity(wallet);
+
+          const activityText = activity
+            ? formatDate(
+                activity.timestamp ||
+                activity.time ||
+                null,
+              )
+            : 'No activity';
+
+          const errorText =
+            wallet.error
+              ? `<div class="error">${escapeHtml(wallet.error)}</div>`
+              : '';
+
+          return `
+            <article class="wallet">
               <button
+                class="wallet-header"
                 type="button"
-                onclick="toggleTransactionDetails('${encodeURIComponent(
-                  transaction.txid,
-                )}')"
+                onclick="toggleWallet('${encodeURIComponent(wallet.address)}')"
               >
-                View details
-              </button>
-            </div>
+                <div class="wallet-name">
+                  <div class="wallet-title">
+                    ${escapeHtml(getWalletName(wallet))}
+                  </div>
 
-            <div class="transaction-meta">
-              <span>${height}</span>
-              <span>
-                ${transaction.addresses.length}
-                watched address${transaction.addresses.length === 1 ? '' : 'es'}
+                  <div class="wallet-address">
+                    ${escapeHtml(shortenAddress(wallet.address))}
+                  </div>
+                </div>
+
+                <div class="wallet-stat">
+                  <div class="wallet-stat-label">
+                    Balance
+                  </div>
+
+                  <div class="wallet-stat-value wallet-balance">
+                    ${escapeHtml(formatAmount(balance))}
+                  </div>
+                </div>
+
+                <div class="wallet-stat">
+                  <div class="wallet-stat-label">
+                    Last activity
+                  </div>
+
+                  <div class="wallet-stat-value">
+                    ${escapeHtml(activityText)}
+                  </div>
+                </div>
+
+                <div class="wallet-chevron">
+                  ${expanded ? '⌄' : '›'}
+                </div>
+              </button>
+
+              ${
+                expanded
+                  ? renderWalletContent(wallet, walletId)
+                  : ''
+              }
+
+              ${errorText}
+            </article>
+          `;
+        })
+        .join('');
+    }
+
+    function renderWalletContent(wallet, walletId) {
+      const transactions =
+        getWalletTransactions(wallet);
+
+      const utxos =
+        Array.isArray(wallet.utxos)
+          ? wallet.utxos
+          : [];
+
+      const utxoKey =
+        wallet.address;
+
+      const utxosExpanded =
+        expandedUtxos.has(utxoKey);
+
+      return `
+        <div class="wallet-content">
+          <div class="wallet-toolbar">
+            <div class="wallet-toolbar-left">
+              <span class="muted">
+                ${escapeHtml(formatSyncAge(lastSuccessfulSync))}
               </span>
             </div>
 
-            <div
-              id="details-${encodeURIComponent(transaction.txid)}"
-              class="details"
-              hidden
+            <button
+              class="small-button"
+              type="button"
+              onclick="event.stopPropagation(); toggleUtxos('${encodeURIComponent(wallet.address)}')"
             >
-              <p class="muted">Loading transaction...</p>
-            </div>
+              ${utxosExpanded ? 'Hide' : 'Show'} UTXOs
+              (${utxos.length})
+            </button>
           </div>
-        `;
-      }).join('');
+
+          <div>
+            <div class="section-header">
+              <h3>Transactions</h3>
+
+              <span class="muted">
+                ${transactions.length}
+              </span>
+            </div>
+
+            ${
+              transactions.length
+                ? renderTransactions(wallet, transactions)
+                : '<div class="empty">No transactions found for this wallet.</div>'
+            }
+          </div>
+
+          ${
+            utxosExpanded
+              ? renderUtxos(utxos, wallet.address)
+              : ''
+          }
+        </div>
+      `;
     }
 
-    async function toggleTransactionDetails(encodedTxid) {
-      const txid = decodeURIComponent(encodedTxid);
+    function renderTransactions(wallet, transactions) {
+      return `
+        <div class="transactions">
+          ${transactions
+            .map((transaction) => {
+              const key =
+                `${wallet.address}:${transaction.txid}`;
 
-      const container =
-        document.getElementById(`details-${encodedTxid}`);
+              const expanded =
+                expandedTransactions.has(key);
 
-      if (!container) {
-        return;
+              const historyItem =
+                getTransactionForWallet(
+                  wallet,
+                  transaction.txid,
+                );
+
+              const isReceived =
+                historyItem &&
+                Number(historyItem.height) >= 0;
+
+              const type =
+                isReceived ? 'Received' : 'Pending';
+
+              return `
+                <div class="transaction">
+                  <button
+                    class="transaction-button"
+                    type="button"
+                    onclick="toggleTransaction(
+                      '${encodeURIComponent(wallet.address)}',
+                      '${encodeURIComponent(transaction.txid)}'
+                    )"
+                  >
+                    <div class="transaction-main">
+                      <div class="transaction-date">
+                        ${
+                          transaction.timestamp
+                            ? escapeHtml(
+                                formatDate(
+                                  transaction.timestamp,
+                                ),
+                              )
+                            : escapeHtml(
+                                transaction.height === null
+                                  ? 'Pending'
+                                  : `Block ${transaction.height}`,
+                              )
+                        }
+                      </div>
+
+                      <div class="transaction-id">
+                        ${escapeHtml(transaction.txid)}
+                      </div>
+                    </div>
+
+                    <span
+                      class="transaction-type ${
+                        isReceived
+                          ? 'received'
+                          : 'sent'
+                      }"
+                    >
+                      ${escapeHtml(type)}
+                    </span>
+
+                    <div class="transaction-amount">
+                      ${expanded ? '⌃' : '›'}
+                    </div>
+                  </button>
+
+                  ${
+                    expanded
+                      ? renderTransactionDetails(
+                          wallet,
+                          transaction,
+                        )
+                      : ''
+                  }
+                </div>
+              `;
+            })
+            .join('')}
+        </div>
+      `;
+    }
+
+    function renderTransactionDetails(
+      wallet,
+      transaction,
+    ) {
+      const key =
+        `${wallet.address}:${transaction.txid}`;
+
+      const detail =
+        transactionDetails[transaction.txid];
+
+      if (!detail) {
+        return `
+          <div class="transaction-details">
+            <p class="muted">
+              Loading transaction...
+            </p>
+          </div>
+        `;
       }
 
-      if (!container.hidden) {
-        container.hidden = true;
-        return;
+      const outputValue =
+        Array.isArray(detail.vout)
+          ? detail.vout.reduce(
+              (sum, output) =>
+                sum +
+                Math.round(
+                  Number(output.value || 0) *
+                    100000000,
+                ),
+              0,
+            )
+          : 0;
+
+      return `
+        <div class="transaction-details">
+          <div class="transaction-detail-grid">
+            <div class="detail-item">
+              <div class="detail-label">
+                Transaction ID
+              </div>
+
+              <div class="detail-value mono">
+                ${escapeHtml(detail.txid)}
+              </div>
+            </div>
+
+            <div class="detail-item">
+              <div class="detail-label">
+                Confirmations
+              </div>
+
+              <div class="detail-value">
+                ${escapeHtml(
+                  Number(
+                    detail.confirmations || 0,
+                  ).toLocaleString('en-US'),
+                )}
+              </div>
+            </div>
+
+            <div class="detail-item">
+              <div class="detail-label">
+                Block
+              </div>
+
+              <div class="detail-value mono">
+                ${
+                  detail.blockhash
+                    ? escapeHtml(detail.blockhash)
+                    : 'Pending'
+                }
+              </div>
+            </div>
+
+            <div class="detail-item">
+              <div class="detail-label">
+                Time
+              </div>
+
+              <div class="detail-value">
+                ${escapeHtml(
+                  formatDate(
+                    detail.blocktime ||
+                    detail.time ||
+                    null,
+                  ),
+                )}
+              </div>
+            </div>
+
+            <div class="detail-item">
+              <div class="detail-label">
+                Size
+              </div>
+
+              <div class="detail-value">
+                ${escapeHtml(
+                  `${detail.vsize ?? detail.size ?? 'Unknown'} vB`,
+                )}
+              </div>
+            </div>
+
+            <div class="detail-item">
+              <div class="detail-label">
+                Outputs
+              </div>
+
+              <div class="detail-value">
+                ${escapeHtml(
+                  formatAmount(outputValue),
+                )}
+              </div>
+            </div>
+          </div>
+
+          <a
+            class="mempool-link"
+            href="https://mempool.space/tx/${encodeURIComponent(detail.txid)}"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            View transaction on mempool.space ↗
+          </a>
+        </div>
+      `;
+    }
+
+    function renderUtxos(utxos, address) {
+      return `
+        <div class="utxo-section">
+          <div class="section-header">
+            <h3>UTXOs</h3>
+
+            <span class="muted">
+              ${utxos.length}
+            </span>
+          </div>
+
+          <div class="utxo-list">
+            ${
+              utxos.length
+                ? utxos
+                    .map((utxo) => {
+                      const value =
+                        Math.round(
+                          Number(
+                            utxo.value || 0,
+                          ) *
+                            100000000,
+                        );
+
+                      const outpoint =
+                        `${utxo.tx_hash}:${utxo.tx_pos}`;
+
+                      return `
+                        <div class="utxo">
+                          <div>
+                            <div class="utxo-outpoint">
+                              ${escapeHtml(outpoint)}
+                            </div>
+
+                            <div class="utxo-height">
+                              ${
+                                utxo.height !== undefined
+                                  ? `Block ${escapeHtml(utxo.height)}`
+                                  : 'Unconfirmed'
+                              }
+                            </div>
+                          </div>
+
+                          <div class="utxo-value">
+                            ${escapeHtml(
+                              formatAmount(value),
+                            )}
+                          </div>
+                        </div>
+                      `;
+                    })
+                    .join('')
+                : '<div class="empty">No UTXOs.</div>'
+            }
+          </div>
+        </div>
+      `;
+    }
+
+    async function toggleWallet(encodedAddress) {
+      const address =
+        decodeURIComponent(encodedAddress);
+
+      if (expandedWallets.has(address)) {
+        expandedWallets.delete(address);
+      } else {
+        expandedWallets.add(address);
       }
 
-      container.hidden = false;
+      renderWallets(addresses);
 
-      if (transactionDetails[txid]) {
-        renderTransactionDetails(
-          container,
-          transactionDetails[txid],
+      const wallet =
+        addresses.find(
+          (item) => item.address === address,
         );
+
+      if (
+        wallet &&
+        expandedWallets.has(address)
+      ) {
+        await loadTransactionDetails(wallet);
+      }
+    }
+
+    async function toggleUtxos(encodedAddress) {
+      const address =
+        decodeURIComponent(encodedAddress);
+
+      if (expandedUtxos.has(address)) {
+        expandedUtxos.delete(address);
+      } else {
+        expandedUtxos.add(address);
+      }
+
+      renderWallets(addresses);
+    }
+
+    async function toggleTransaction(
+      encodedAddress,
+      encodedTxid,
+    ) {
+      const address =
+        decodeURIComponent(encodedAddress);
+
+      const txid =
+        decodeURIComponent(encodedTxid);
+
+      const key =
+        `${address}:${txid}`;
+
+      if (expandedTransactions.has(key)) {
+        expandedTransactions.delete(key);
+        renderWallets(addresses);
         return;
       }
 
-      container.innerHTML =
-        '<p class="muted">Loading transaction...</p>';
+      expandedTransactions.add(key);
+      renderWallets(addresses);
 
+      if (!transactionDetails[txid]) {
+        await loadTransaction(txid);
+      }
+    }
+
+    async function loadTransaction(txid) {
       try {
         const response = await fetch(
           `/api/transactions/${encodeURIComponent(txid)}`,
@@ -1065,120 +1682,286 @@
         );
 
         if (response.status === 401) {
-          await showLogin();
+          showLogin();
           return;
         }
 
         if (!response.ok) {
-          throw new Error(`HTTP ${response.status}`);
+          throw new Error(
+            `HTTP ${response.status}`,
+          );
         }
 
-        const transaction = await response.json();
+        const transaction =
+          await response.json();
 
         transactionDetails[txid] = transaction;
 
-        renderTransactionDetails(
-          container,
-          transaction,
-        );
+        renderWallets(addresses);
       } catch (error) {
-        container.innerHTML =
-          `<p class="error">Unable to load transaction: ${escapeHtml(
-            error.message,
-          )}</p>`;
+        console.error(
+          'Failed to load transaction:',
+          error,
+        );
       }
     }
 
-    function renderTransactionDetails(container, transaction) {
-      const summary = {
-        txid: transaction.txid,
-        blockhash: transaction.blockhash,
-        confirmations: transaction.confirmations,
-        time: formatDate(transaction.time),
-        blocktime: formatDate(transaction.blocktime),
-        version: transaction.version,
-        size: transaction.size,
-        vsize: transaction.vsize,
-        vin: transaction.vin,
-        vout: transaction.vout,
-      };
+    async function loadTransactionDetails(wallet) {
+      const transactions =
+        getWalletTransactions(wallet);
 
-      container.innerHTML = `
-        <pre>${escapeHtml(
-          JSON.stringify(summary, null, 2),
-        )}</pre>
-      `;
+      for (const transaction of transactions) {
+        if (transactionDetails[transaction.txid]) {
+          continue;
+        }
+
+        await loadTransaction(
+          transaction.txid,
+        );
+      }
     }
 
-    async function refreshDashboard() {
-      const errorElement =
-        document.getElementById('error');
-
-      errorElement.textContent = '';
-
+    async function loadStatus() {
       try {
-        await showDashboard();
+        const response = await fetch(
+          '/api/status',
+          {
+            credentials: 'same-origin',
+          },
+        );
 
-        await loadStatus();
-
-        const addresses = await loadAddresses();
-
-        await loadTransactions(addresses);
-      } catch (error) {
-        if (error.message === 'Authentication required') {
+        if (response.status === 401) {
+          showLogin();
           return;
         }
 
-        errorElement.textContent =
-          'Unable to retrieve dashboard data.';
+        if (!response.ok) {
+          throw new Error(
+            `HTTP ${response.status}`,
+          );
+        }
+
+        const status =
+          await response.json();
+
+        const serviceRunning =
+          status.service === 'running';
+
+        const fulcrum =
+          status.fulcrum || {};
+
+        const fulcrumConnected =
+          Boolean(fulcrum.connected);
+
+        document.getElementById(
+          'service-status',
+        ).textContent =
+          serviceRunning
+            ? 'Running'
+            : 'Not running';
+
+        document.getElementById(
+          'service-dot',
+        ).className =
+          `status-dot ${
+            serviceRunning
+              ? 'connected'
+              : 'disconnected'
+          }`;
+
+        document.getElementById(
+          'fulcrum-status',
+        ).textContent =
+          fulcrumConnected
+            ? 'Connected'
+            : fulcrum.configured
+              ? 'Not connected'
+              : 'Not configured';
+
+        document.getElementById(
+          'fulcrum-dot',
+        ).className =
+          `status-dot ${
+            fulcrumConnected
+              ? 'connected'
+              : 'disconnected'
+          }`;
+
+        document.getElementById(
+          'settings-fulcrum-url',
+        ).textContent =
+          fulcrum.url ||
+          'Not configured';
+
+        document.getElementById(
+          'settings-blockchain-height',
+        ).textContent =
+          fulcrum.blockchainHeight ??
+          'Unavailable';
+      } catch (error) {
+        console.error(
+          'Failed to load status:',
+          error,
+        );
+
+        document.getElementById(
+          'service-status',
+        ).textContent = 'Unavailable';
+
+        document.getElementById(
+          'fulcrum-status',
+        ).textContent = 'Unavailable';
+
+        document.getElementById(
+          'service-dot',
+        ).className =
+          'status-dot disconnected';
+
+        document.getElementById(
+          'fulcrum-dot',
+        ).className =
+          'status-dot disconnected';
+      }
+    }
+
+    async function loadAddresses() {
+      const response = await fetch(
+        '/api/addresses/data',
+        {
+          credentials: 'same-origin',
+        },
+      );
+
+      if (response.status === 401) {
+        showLogin();
+        return;
+      }
+
+      if (!response.ok) {
+        throw new Error(
+          `HTTP ${response.status}`,
+        );
+      }
+
+      const data =
+        await response.json();
+
+      addresses =
+        Array.isArray(data.addresses)
+          ? data.addresses
+          : [];
+
+      lastSuccessfulSync =
+        new Date();
+
+      renderWallets(addresses);
+
+      document.getElementById(
+        'last-refresh',
+      ).textContent =
+        formatSyncAge(
+          lastSuccessfulSync,
+        );
+    }
+
+    async function loadAll() {
+      try {
+        await loadStatus();
+        await loadAddresses();
+      } catch (error) {
+        console.error(
+          'Failed to load Munin Bitcoin:',
+          error,
+        );
+
+        document.getElementById(
+          'wallet-list',
+        ).innerHTML =
+          '<div class="empty">Unable to retrieve wallet data.</div>';
       }
     }
 
     document
       .getElementById('login-form')
-      .addEventListener('submit', async (event) => {
-        event.preventDefault();
+      .addEventListener(
+        'submit',
+        async (event) => {
+          event.preventDefault();
 
-        const passwordInput =
-          document.getElementById('password');
+          const passwordInput =
+            document.getElementById(
+              'password',
+            );
 
-        const loginError =
-          document.getElementById('login-error');
+          const loginError =
+            document.getElementById(
+              'login-error',
+            );
 
-        loginError.textContent = '';
+          loginError.textContent = '';
 
-        try {
-          await login(passwordInput.value);
-          passwordInput.value = '';
-        } catch {
-          loginError.textContent = 'Invalid password.';
-          passwordInput.select();
-        }
+          try {
+            await login(
+              passwordInput.value,
+            );
+
+            passwordInput.value = '';
+          } catch {
+            loginError.textContent =
+              'Invalid password.';
+
+            passwordInput.select();
+          }
+        },
+      );
+
+    document
+      .getElementById('settings-button')
+      .addEventListener(
+        'click',
+        () => {
+          document
+            .getElementById(
+              'settings-panel',
+            )
+            .classList.toggle('hidden');
+        },
+      );
+
+    document
+      .getElementById('close-settings')
+      .addEventListener(
+        'click',
+        () => {
+          document
+            .getElementById(
+              'settings-panel',
+            )
+            .classList.add('hidden');
+        },
+      );
+
+    document
+      .querySelectorAll('.unit-button')
+      .forEach((button) => {
+        button.addEventListener(
+          'click',
+          () => {
+            saveBalanceUnit(
+              button.dataset.unit,
+            );
+          },
+        );
       });
 
-    setDisplayUnit('btc');
+    updateUnitButtons();
+    loadStatus();
+    loadAddresses();
 
-    loadStatus()
-      .then(async () => {
-        await showDashboard();
-
-        const addresses = await loadAddresses();
-
-        await loadTransactions(addresses);
-      })
-      .catch((error) => {
-        if (error.message !== 'Authentication required') {
-          showLogin();
-        }
-      });
-
-    setInterval(() => {
-      if (
-        !document.getElementById('dashboard').hidden
-      ) {
-        refreshDashboard();
-      }
-    }, 10000);
+    setInterval(
+      loadAll,
+      60000,
+    );
   </script>
 </body>
 </html>
\ No newline at end of file