diff --git a/web/index.html b/web/index.html
index f288860..97fb49a 100644
--- a/web/index.html
+++ b/web/index.html
@@ -19,7 +19,7 @@
     }
 
     main {
-      max-width: 760px;
+      max-width: 960px;
       margin: 0 auto;
       padding: 48px 24px;
     }
@@ -29,6 +29,16 @@
       font-size: 32px;
     }
 
+    h2 {
+      margin: 0 0 20px;
+      font-size: 22px;
+    }
+
+    h3 {
+      margin: 0 0 12px;
+      font-size: 18px;
+    }
+
     .subtitle {
       margin: 0 0 32px;
       color: #9ca3af;
@@ -100,6 +110,10 @@
       color: #fca5a5;
     }
 
+    .success {
+      color: #86efac;
+    }
+
     .login {
       max-width: 420px;
       margin: 80px auto;
@@ -136,6 +150,176 @@
     button:hover {
       background: #4b5563;
     }
+
+    button:disabled {
+      opacity: 0.6;
+      cursor: default;
+    }
+
+    .section-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+
+    .section-header h2 {
+      margin: 0;
+    }
+
+    .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;
+    }
+
+    .balance {
+      font-size: 20px;
+      font-weight: 700;
+    }
+
+    .balance small {
+      font-size: 13px;
+      font-weight: 400;
+      color: #9ca3af;
+    }
+
+    .stats {
+      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;
+    }
+
+    .transaction {
+      background: #111827;
+      border: 1px solid #374151;
+      border-radius: 10px;
+      padding: 16px;
+      margin-bottom: 10px;
+    }
+
+    .transaction:last-child {
+      margin-bottom: 0;
+    }
+
+    .transaction-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 16px;
+      margin-bottom: 10px;
+    }
+
+    .txid {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-size: 12px;
+      word-break: break-all;
+    }
+
+    .transaction button {
+      margin-top: 0;
+      white-space: nowrap;
+    }
+
+    .transaction-meta {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      color: #9ca3af;
+      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;
+      border-radius: 8px;
+      color: #d1d5db;
+      font-size: 12px;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .empty {
+      color: #9ca3af;
+      padding: 8px 0;
+    }
+
+    @media (max-width: 700px) {
+      main {
+        padding: 28px 16px;
+      }
+
+      .row {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 6px;
+      }
+
+      .value {
+        text-align: left;
+      }
+
+      .address-header,
+      .transaction-header {
+        align-items: flex-start;
+        flex-direction: column;
+      }
+
+      .stats {
+        grid-template-columns: 1fr;
+      }
+    }
   </style>
 </head>
 <body>
@@ -162,7 +346,9 @@
 
     <section id="dashboard" hidden>
       <h1>Munin Bitcoin</h1>
-      <p class="subtitle">Bitcoin watch-only wallet monitoring and label management</p>
+      <p class="subtitle">
+        Bitcoin watch-only wallet monitoring and label management
+      </p>
 
       <section class="card">
         <div class="row">
@@ -213,19 +399,95 @@
           <span id="last-scan" class="value muted">Never</span>
         </div>
 
-        <button type="button" onclick="loadStatus()">Refresh status</button>
+        <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>
+
+        <div id="addresses">
+          <p class="muted">Loading addresses...</p>
+        </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>
     </section>
   </main>
 
   <script>
+    let transactionDetails = {};
+
     function setStatus(element, text, state) {
       element.className = `status ${state}`;
       element.querySelector('span:last-child').textContent = text;
     }
 
+    function formatSats(value) {
+      const sats = Number(value || 0);
+
+      if (!Number.isFinite(sats)) {
+        return '0 sats';
+      }
+
+      return `${sats.toLocaleString()} sats`;
+    }
+
+    function formatBtcFromSats(value) {
+      const sats = Number(value || 0);
+
+      if (!Number.isFinite(sats)) {
+        return '0 BTC';
+      }
+
+      return `${(sats / 100000000).toFixed(8)} BTC`;
+    }
+
+    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;
@@ -252,17 +514,315 @@
       }
 
       await showDashboard();
-      await loadStatus();
+      await refreshDashboard();
     }
 
     async function loadStatus() {
-      const errorElement = document.getElementById('error');
-      errorElement.textContent = '';
+      const response = await fetch('/api/status', {
+        credentials: 'same-origin',
+      });
+
+      if (response.status === 401) {
+        await showLogin();
+        throw new Error('Authentication required');
+      }
+
+      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 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',
+        );
+      }
+
+      document.getElementById('fulcrum-url').textContent =
+        fulcrum.url || 'Not configured';
+
+      document.getElementById('blockchain-height').textContent =
+        fulcrum.blockchainHeight ?? 'Unavailable';
+
+      document.getElementById('wallet').textContent =
+        status.wallet || 'Not configured';
+
+      document.getElementById('labels').textContent =
+        status.labels ?? 0;
+
+      document.getElementById('transactions').textContent =
+        status.transactions ?? 0;
+
+      document.getElementById('last-scan').textContent =
+        status.lastScan || 'Never';
+    }
+
+    async function loadAddresses() {
+      const response = await fetch('/api/addresses/data', {
+        credentials: 'same-origin',
+      });
+
+      if (response.status === 401) {
+        await showLogin();
+        throw new Error('Authentication required');
+      }
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+
+      const payload = await response.json();
+      const addresses = Array.isArray(payload.addresses)
+        ? payload.addresses
+        : [];
+
+      renderAddresses(addresses);
+
+      return addresses;
+    }
+
+    function renderAddresses(addresses) {
+      const container = document.getElementById('addresses');
+
+      if (!addresses.length) {
+        container.innerHTML =
+          '<p class="empty">No Bitcoin addresses are being watched.</p>';
+        return;
+      }
+
+      container.innerHTML = addresses.map((entry) => {
+        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 utxoCount = Array.isArray(entry.utxos)
+          ? entry.utxos.length
+          : 0;
+
+        const historyCount = Array.isArray(entry.history)
+          ? entry.history.length
+          : 0;
+
+        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'
+                    : formatBtcFromSats(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'
+                      : formatBtcFromSats(unconfirmed)
+                  }
+                </span>
+              </div>
+
+              <div class="stat">
+                <span class="stat-label">UTXOs</span>
+                <span class="stat-value">${utxoCount}</span>
+              </div>
+
+              <div class="stat">
+                <span class="stat-label">History entries</span>
+                <span class="stat-value">${historyCount}</span>
+              </div>
+            </div>
+
+            ${error}
+          </div>
+        `;
+      }).join('');
+    }
+
+    async function loadTransactions(addresses) {
+      const transactions = new Map();
+
+      for (const address of addresses) {
+        if (!Array.isArray(address.history)) {
+          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;
+          }
+        }
+      }
+
+      const list = Array.from(transactions.values());
+
+      list.sort((a, b) => {
+        const heightA =
+          a.height === null || a.height === undefined
+            ? Number.MAX_SAFE_INTEGER
+            : Number(a.height);
+
+        const heightB =
+          b.height === null || b.height === undefined
+            ? Number.MAX_SAFE_INTEGER
+            : Number(b.height);
+
+        return heightB - heightA;
+      });
+
+      renderTransactions(list);
+
+      return list;
+    }
+
+    function renderTransactions(transactions) {
+      const container = document.getElementById('transaction-list');
+      const count = document.getElementById('transaction-count');
+
+      count.textContent = `${transactions.length} found`;
+
+      if (!transactions.length) {
+        container.innerHTML =
+          '<p class="empty">No transactions found for watched addresses.</p>';
+        return;
+      }
+
+      container.innerHTML = transactions.map((transaction) => {
+        const txid = escapeHtml(transaction.txid);
+        const height =
+          transaction.height === null ||
+          transaction.height === undefined
+            ? 'Unconfirmed'
+            : `Block ${escapeHtml(transaction.height)}`;
+
+        return `
+          <div class="transaction">
+            <div class="transaction-header">
+              <div class="txid">${txid}</div>
+              <button
+                type="button"
+                onclick="toggleTransactionDetails('${encodeURIComponent(
+                  transaction.txid,
+                )}')"
+              >
+                View details
+              </button>
+            </div>
+
+            <div class="transaction-meta">
+              <span>${height}</span>
+              <span>
+                ${transaction.addresses.length}
+                watched address${transaction.addresses.length === 1 ? '' : 'es'}
+              </span>
+            </div>
+
+            <div
+              id="details-${encodeURIComponent(transaction.txid)}"
+              class="details"
+              hidden
+            >
+              <p class="muted">Loading transaction...</p>
+            </div>
+          </div>
+        `;
+      }).join('');
+    }
+
+    async function toggleTransactionDetails(encodedTxid) {
+      const txid = decodeURIComponent(encodedTxid);
+      const container =
+        document.getElementById(`details-${encodedTxid}`);
+
+      if (!container) {
+        return;
+      }
+
+      if (!container.hidden) {
+        container.hidden = true;
+        return;
+      }
+
+      container.hidden = false;
+
+      if (transactionDetails[txid]) {
+        renderTransactionDetails(container, transactionDetails[txid]);
+        return;
+      }
+
+      container.innerHTML =
+        '<p class="muted">Loading transaction...</p>';
 
       try {
-        const response = await fetch('/api/status', {
-          credentials: 'same-origin',
-        });
+        const response = await fetch(
+          `/api/transactions/${encodeURIComponent(txid)}`,
+          {
+            credentials: 'same-origin',
+          },
+        );
 
         if (response.status === 401) {
           await showLogin();
@@ -273,93 +833,105 @@
           throw new Error(`HTTP ${response.status}`);
         }
 
-        await showDashboard();
+        const transaction = await response.json();
 
-        const status = await response.json();
+        transactionDetails[txid] = transaction;
 
-        setStatus(
-          document.getElementById('service-status'),
-          status.service === 'running' ? 'Running' : 'Not running',
-          status.service === 'running' ? 'running' : 'disconnected',
-        );
-
-        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',
-          );
-        }
-
-        document.getElementById('fulcrum-url').textContent =
-          fulcrum.url || 'Not configured';
-
-        document.getElementById('blockchain-height').textContent =
-          fulcrum.blockchainHeight ?? 'Unavailable';
-
-        document.getElementById('wallet').textContent =
-          status.wallet || 'Not configured';
-
-        document.getElementById('labels').textContent =
-          status.labels ?? 0;
-
-        document.getElementById('transactions').textContent =
-          status.transactions ?? 0;
-
-        document.getElementById('last-scan').textContent =
-          status.lastScan || 'Never';
+        renderTransactionDetails(container, transaction);
       } catch (error) {
-        setStatus(
-          document.getElementById('service-status'),
-          'Unavailable',
-          'disconnected',
-        );
-
-        setStatus(
-          document.getElementById('fulcrum-status'),
-          'Unavailable',
-          'disconnected',
-        );
-
-        document.getElementById('fulcrum-url').textContent = 'Unavailable';
-        document.getElementById('blockchain-height').textContent = 'Unavailable';
-        errorElement.textContent = 'Unable to retrieve service status.';
+        container.innerHTML =
+          `<p class="error">Unable to load transaction: ${escapeHtml(
+            error.message,
+          )}</p>`;
       }
     }
 
-    document.getElementById('login-form').addEventListener('submit', async (event) => {
-      event.preventDefault();
+    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,
+      };
 
-      const passwordInput = document.getElementById('password');
-      const loginError = document.getElementById('login-error');
+      container.innerHTML = `
+        <pre>${escapeHtml(
+          JSON.stringify(summary, null, 2),
+        )}</pre>
+      `;
+    }
 
-      loginError.textContent = '';
+    async function refreshDashboard() {
+      const errorElement = document.getElementById('error');
+      errorElement.textContent = '';
 
       try {
-        await login(passwordInput.value);
-        passwordInput.value = '';
-      } catch {
-        loginError.textContent = 'Invalid password.';
-        passwordInput.select();
-      }
-    });
+        await showDashboard();
 
-    loadStatus();
-    setInterval(loadStatus, 10000);
+        await loadStatus();
+
+        const addresses = await loadAddresses();
+
+        await loadTransactions(addresses);
+      } catch (error) {
+        if (error.message === 'Authentication required') {
+          return;
+        }
+
+        errorElement.textContent =
+          'Unable to retrieve dashboard data.';
+      }
+    }
+
+    document
+      .getElementById('login-form')
+      .addEventListener('submit', async (event) => {
+        event.preventDefault();
+
+        const passwordInput =
+          document.getElementById('password');
+
+        const loginError =
+          document.getElementById('login-error');
+
+        loginError.textContent = '';
+
+        try {
+          await login(passwordInput.value);
+          passwordInput.value = '';
+        } catch {
+          loginError.textContent = 'Invalid password.';
+          passwordInput.select();
+        }
+      });
+
+    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);
   </script>
 </body>
 </html>
\ No newline at end of file
