diff --git a/web/index.html b/web/index.html
index d9b2c91..469f2dc 100644
--- a/web/index.html
+++ b/web/index.html
@@ -293,22 +293,6 @@
       border-top: 1px solid var(--border);
     }
 
-    .wallet-meta {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-      padding: 13px 0;
-      border-bottom: 1px solid var(--border);
-    }
-
-    .wallet-meta-left {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 12px;
-      color: var(--muted);
-      font-size: 12px;
-    }
 
     /* Transactions */
 
@@ -349,46 +333,13 @@
       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-status {
-      padding: 4px 8px;
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      color: var(--secondary);
-      font-size: 12px;
-      white-space: nowrap;
-    }
-
-    .transaction-status.confirmed {
-      color: #86efac;
-    }
-
-    .transaction-status.pending {
-      color: #fcd34d;
-    }
 
     .transaction-chevron {
       width: 18px;
@@ -447,63 +398,6 @@
       text-decoration: underline;
     }
 
-    /* UTXOs */
-
-    .utxo-section {
-      margin-top: 14px;
-      border-top: 1px solid var(--border);
-    }
-
-    .utxo-list {
-      border-top: 1px solid var(--border);
-    }
-
-    .utxo {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) auto;
-      gap: 16px;
-      padding: 11px 0;
-      border-bottom: 1px solid var(--border);
-    }
-
-    .utxo:last-child {
-      border-bottom: 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-height {
-      color: var(--muted);
-      font-size: 12px;
-    }
-
-    .utxo-value {
-      align-self: center;
-      font-family:
-        ui-monospace,
-        SFMono-Regular,
-        Menlo,
-        Monaco,
-        Consolas,
-        monospace;
-      font-size: 13px;
-      white-space: nowrap;
-    }
-
     /* Settings */
 
     .settings-row {
@@ -557,6 +451,69 @@
       font-weight: 600;
     }
 
+    .settings-select {
+      min-width: 190px;
+      padding: 8px 10px;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      background: var(--background);
+      color: var(--text);
+    }
+
+    .settings-input {
+      width: min(360px, 100%);
+      padding: 8px 10px;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      background: var(--background);
+      color: var(--text);
+    }
+
+    .transaction-grid {
+      display: grid;
+      grid-template-columns: 150px minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 16px;
+      width: 100%;
+    }
+
+    .transaction-type {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-weight: 600;
+    }
+
+    .transaction-type.received {
+      color: #86efac;
+    }
+
+    .transaction-type.sent {
+      color: #fca5a5;
+    }
+
+    .confirmation-check {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      border: 1px solid currentColor;
+      border-radius: 50%;
+      font-size: 11px;
+      line-height: 1;
+    }
+
+    .transaction-amount {
+      font-weight: 600;
+      white-space: nowrap;
+      text-align: right;
+    }
+
+    .transaction-chevron {
+      display: none;
+    }
+
     /* Login */
 
     .login {
@@ -615,21 +572,17 @@
         gap: 12px;
       }
 
-      .wallet-stat:nth-of-type(2) {
-        display: none;
-      }
-
-      .transaction-row {
-        grid-template-columns: minmax(0, 1fr) auto;
+      .transaction-grid {
+        grid-template-columns: 95px minmax(0, 1fr) auto;
         gap: 10px;
       }
 
-      .transaction-status {
-        display: none;
+      .transaction-date {
+        font-size: 12px;
       }
 
-      .transaction-chevron {
-        display: none;
+      .transaction-amount {
+        font-size: 13px;
       }
 
       .transaction-detail-grid {
@@ -812,6 +765,61 @@
           </div>
         </div>
 
+        <div class="settings-row">
+          <div>
+            <div class="settings-title">
+              Date format
+            </div>
+
+            <div class="settings-description">
+              Choose how dates and transaction times are displayed.
+            </div>
+          </div>
+
+          <select id="date-format" class="settings-select">
+            <option value="DD.MM.YY HH:MM">DD.MM.YY HH:MM</option>
+            <option value="DD.MM.YYYY HH:MM">DD.MM.YYYY HH:MM</option>
+            <option value="YYYY-MM-DD HH:MM">YYYY-MM-DD HH:MM</option>
+            <option value="MM/DD/YY HH:MM">MM/DD/YY HH:MM</option>
+          </select>
+        </div>
+
+        <div class="settings-row">
+          <div>
+            <div class="settings-title">
+              Mempool
+            </div>
+
+            <div class="settings-description">
+              Choose the mempool service used for transaction details.
+            </div>
+          </div>
+
+          <select id="mempool-provider" class="settings-select">
+            <option value="public">mempool.space</option>
+            <option value="custom">Self-hosted mempool</option>
+          </select>
+        </div>
+
+        <div id="custom-mempool-row" class="settings-row hidden">
+          <div>
+            <div class="settings-title">
+              Self-hosted mempool URL
+            </div>
+
+            <div class="settings-description">
+              Base URL, for example https://mempool.example.local
+            </div>
+          </div>
+
+          <input
+            id="custom-mempool-url"
+            class="settings-input"
+            type="url"
+            placeholder="https://mempool.example.local"
+          />
+        </div>
+
         <div class="settings-row">
           <div>
             <div class="settings-title">
@@ -854,12 +862,20 @@
   <script>
     const BALANCE_UNIT_KEY =
       'munin-bitcoin-balance-unit';
+    const DATE_FORMAT_KEY =
+      'munin-bitcoin-date-format';
+    const MEMPOOL_PROVIDER_KEY =
+      'munin-bitcoin-mempool-provider';
+    const CUSTOM_MEMPOOL_URL_KEY =
+      'munin-bitcoin-custom-mempool-url';
 
     let balanceUnit = loadBalanceUnit();
+    let dateFormat = loadDateFormat();
+    let mempoolProvider = loadMempoolProvider();
+    let customMempoolUrl = loadCustomMempoolUrl();
     let wallets = [];
 
     const expandedWallets = new Set();
-    const expandedUtxos = new Set();
     const expandedTransactions = new Set();
 
     const transactionCache = new Map();
@@ -900,6 +916,80 @@
         });
     }
 
+    function loadDateFormat() {
+      const value = localStorage.getItem(DATE_FORMAT_KEY);
+
+      return [
+        'DD.MM.YY HH:MM',
+        'DD.MM.YYYY HH:MM',
+        'YYYY-MM-DD HH:MM',
+        'MM/DD/YY HH:MM',
+      ].includes(value)
+        ? value
+        : 'DD.MM.YY HH:MM';
+    }
+
+    function setDateFormat(value) {
+      dateFormat = value;
+      localStorage.setItem(DATE_FORMAT_KEY, value);
+      renderWallets();
+    }
+
+    function loadMempoolProvider() {
+      return localStorage.getItem(MEMPOOL_PROVIDER_KEY) === 'custom'
+        ? 'custom'
+        : 'public';
+    }
+
+    function loadCustomMempoolUrl() {
+      return localStorage.getItem(CUSTOM_MEMPOOL_URL_KEY) || '';
+    }
+
+    function setMempoolProvider(value) {
+      mempoolProvider = value === 'custom' ? 'custom' : 'public';
+      localStorage.setItem(MEMPOOL_PROVIDER_KEY, mempoolProvider);
+      updateMempoolSettings();
+      renderWallets();
+    }
+
+    function setCustomMempoolUrl(value) {
+      customMempoolUrl = value.trim().replace(/\/+$/, '');
+      localStorage.setItem(
+        CUSTOM_MEMPOOL_URL_KEY,
+        customMempoolUrl,
+      );
+      renderWallets();
+    }
+
+    function updateMempoolSettings() {
+      document.getElementById('mempool-provider').value =
+        mempoolProvider;
+
+      const row = document.getElementById('custom-mempool-row');
+      row.classList.toggle(
+        'hidden',
+        mempoolProvider !== 'custom',
+      );
+
+      document.getElementById('custom-mempool-url').value =
+        customMempoolUrl;
+    }
+
+    function updateDateSettings() {
+      document.getElementById('date-format').value =
+        dateFormat;
+    }
+
+    function getMempoolTransactionUrl(txid) {
+      const cleanTxid = encodeURIComponent(txid);
+
+      if (mempoolProvider === 'custom' && customMempoolUrl) {
+        return `${customMempoolUrl}/tx/${cleanTxid}`;
+      }
+
+      return `https://mempool.space/tx/${cleanTxid}`;
+    }
+
     function showLogin() {
       document
         .getElementById('login')
@@ -934,9 +1024,9 @@
     }
 
     function formatSats(value) {
-      return Math.round(
-        Number(value) || 0,
-      ).toLocaleString('en-US');
+      return Math.round(Number(value) || 0)
+        .toString()
+        .replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
     }
 
     function formatBtc(value) {
@@ -958,30 +1048,37 @@
     }
 
     function formatDate(timestamp) {
-      const value =
-        Number(timestamp);
+      const value = Number(timestamp);
 
       if (!Number.isFinite(value)) {
         return 'Unknown';
       }
 
-      const date =
-        new Date(value * 1000);
+      const date = new Date(value * 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',
-        },
-      );
+      const pad = (number) => String(number).padStart(2, '0');
+      const year = date.getFullYear();
+      const shortYear = String(year).slice(-2);
+      const month = pad(date.getMonth() + 1);
+      const day = pad(date.getDate());
+      const hour = pad(date.getHours());
+      const minute = pad(date.getMinutes());
+
+      switch (dateFormat) {
+        case 'DD.MM.YYYY HH:MM':
+          return `${day}.${month}.${year} ${hour}:${minute}`;
+        case 'YYYY-MM-DD HH:MM':
+          return `${year}-${month}-${day} ${hour}:${minute}`;
+        case 'MM/DD/YY HH:MM':
+          return `${month}/${day}/${shortYear} ${hour}:${minute}`;
+        case 'DD.MM.YY HH:MM':
+        default:
+          return `${day}.${month}.${shortYear} ${hour}:${minute}`;
+      }
     }
 
     function formatSyncAge(date) {
@@ -1032,7 +1129,7 @@
 
       return (
         address.slice(0, 10) +
-        '…' +
+        '...' +
         address.slice(-8)
       );
     }
@@ -1183,71 +1280,102 @@
       );
     }
 
-    function getTransactionStatus(
-      wallet,
-      transaction,
-    ) {
-      const history =
-        getTransactionHistoryItem(
-          wallet,
-          transaction.txid,
-        );
+    function getTransactionStatus(wallet, transaction) {
+      const history = getTransactionHistoryItem(wallet, transaction.txid);
 
-      if (
-        history &&
-        Number(history.height) < 0
-      ) {
-        return {
-          label: 'Pending',
-          className: 'pending',
-        };
+      if (history && Number(history.height) < 0) {
+        return false;
       }
 
-      if (
-        transaction.height === null ||
-        transaction.height === undefined
-      ) {
-        return {
-          label: 'Pending',
-          className: 'pending',
-        };
-      }
-
-      return {
-        label: 'Confirmed',
-        className: 'confirmed',
-      };
+      return transaction.height !== null &&
+        transaction.height !== undefined &&
+        Number(transaction.height) >= 0;
     }
 
-    function getTransactionDate(
-      transaction,
-    ) {
-      const detail =
-        getTransactionFromCache(
-          transaction.txid,
-        );
+    function getTransactionDate(transaction) {
+      const detail = getTransactionFromCache(transaction.txid);
 
       if (!detail) {
         return null;
       }
 
-      return (
-        detail.blocktime ||
-        detail.time ||
-        null
-      );
+      return detail.blocktime || detail.time || null;
+    }
+
+    function getTransactionNet(wallet, detail) {
+      if (!detail) {
+        return null;
+      }
+
+      const address = wallet.address;
+      let received = 0;
+      let sent = 0;
+
+      if (Array.isArray(detail.vout)) {
+        for (const output of detail.vout) {
+          if (
+            output &&
+            output.scriptPubKey &&
+            output.scriptPubKey.address === address
+          ) {
+            received += Math.round(Number(output.value || 0) * 100000000);
+          }
+        }
+      }
+
+      // The transaction API does not expose the previous output address/value
+      // directly in vin, so a complete outgoing amount cannot always be derived
+      // from the wallet-scoped transaction alone. Use the wallet history value
+      // when the backend provides it, otherwise show the received amount.
+      const history = getTransactionHistoryItem(wallet, detail.txid);
+
+      if (history) {
+        const historyValue = Number(
+          history.value ?? history.amount ?? history.satoshis
+        );
+
+        if (Number.isFinite(historyValue)) {
+          const sats = Math.round(
+            Math.abs(historyValue) <= 21 ? historyValue * 100000000 : historyValue
+          );
+
+          return {
+            sats,
+            direction: historyValue < 0 ? 'sent' : 'received',
+          };
+        }
+      }
+
+      if (received > 0) {
+        return {
+          sats: received,
+          direction: 'received',
+        };
+      }
+
+      return {
+        sats: 0,
+        direction: 'sent',
+      };
+    }
+
+    function getTransactionDisplay(wallet, transaction) {
+      const detail = getTransactionFromCache(transaction.txid);
+      const net = getTransactionNet(wallet, detail);
+
+      if (!net) {
+        return {
+          sats: 0,
+          direction: 'received',
+        };
+      }
+
+      return net;
     }
 
     function renderWallets() {
-      const container =
-        document.getElementById(
-          'wallet-list',
-        );
-
-      const count =
-        document.getElementById(
-          'wallet-count',
-        );
+      const container = document.getElementById('wallet-list');
+      const count = document.getElementById('wallet-count');
 
       count.textContent =
         wallets.length === 1
@@ -1257,55 +1385,26 @@
       if (!wallets.length) {
         container.innerHTML =
           '<div class="empty">No wallets are being watched.</div>';
-
         return;
       }
 
       container.innerHTML =
-        wallets
-          .map(
-            (wallet) =>
-              renderWallet(wallet),
-          )
-          .join('');
+        wallets.map((wallet) => renderWallet(wallet)).join('');
     }
 
     function renderWallet(wallet) {
-      const address =
-        wallet.address;
+      const address = wallet.address;
+      const expanded = expandedWallets.has(address);
+      const balance = getWalletBalance(wallet);
+      const latest = getLatestHistory(wallet);
+      const transactionCount = getWalletTransactions(wallet).length;
+      const lastActivity = getTransactionDateForLatest(wallet, latest);
 
-      const expanded =
-        expandedWallets.has(address);
-
-      const balance =
-        getWalletBalance(wallet);
-
-      const latest =
-        getLatestHistory(wallet);
-
-      const transactionCount =
-        getWalletTransactions(wallet)
-          .length;
-
-      const lastActivity =
-        getTransactionDateForLatest(
-          wallet,
-          latest,
-        );
-
-      const lastActivityText =
-        lastActivity
-          ? formatDate(lastActivity)
-          : latest
-            ? `Block ${latest.height}`
-            : 'No activity';
-
-      const syncText =
-        lastSuccessfulSync
-          ? formatSyncAge(
-              lastSuccessfulSync,
-            )
-          : 'Not synced';
+      const lastActivityText = lastActivity
+        ? formatDate(lastActivity)
+        : latest
+          ? `Block ${latest.height}`
+          : 'No activity';
 
       return `
         <article class="wallet">
@@ -1316,15 +1415,11 @@
           >
             <div class="wallet-name">
               <div class="wallet-title">
-                ${escapeHtml(
-                  getWalletName(wallet),
-                )}
+                ${escapeHtml(getWalletName(wallet))}
               </div>
 
               <div class="wallet-address">
-                ${escapeHtml(
-                  shortenAddress(address),
-                )}
+                ${escapeHtml(shortenAddress(address))}
               </div>
             </div>
 
@@ -1334,9 +1429,7 @@
               </div>
 
               <div class="wallet-stat-value wallet-balance">
-                ${escapeHtml(
-                  formatAmount(balance),
-                )}
+                ${escapeHtml(formatAmount(balance))}
               </div>
             </div>
 
@@ -1346,24 +1439,18 @@
               </div>
 
               <div class="wallet-stat-value">
-                ${escapeHtml(
-                  lastActivityText,
-                )}
+                ${escapeHtml(lastActivityText)}
               </div>
             </div>
 
             <div class="wallet-chevron">
-              ${expanded ? '⌄' : '›'}
+              ${expanded ? 'v' : '>'}
             </div>
           </button>
 
           ${
             expanded
-              ? renderWalletContent(
-                  wallet,
-                  syncText,
-                  transactionCount,
-                )
+              ? renderWalletContent(wallet, transactionCount)
               : ''
           }
 
@@ -1372,9 +1459,7 @@
               ? `
                 <div style="padding: 0 18px 16px;">
                   <span class="error">
-                    ${escapeHtml(
-                      wallet.error,
-                    )}
+                    ${escapeHtml(wallet.error)}
                   </span>
                 </div>
               `
@@ -1384,10 +1469,7 @@
       `;
     }
 
-    function getTransactionDateForLatest(
-      wallet,
-      latest,
-    ) {
+    function getTransactionDateForLatest(wallet, latest) {
       if (!latest) {
         return null;
       }
@@ -1397,135 +1479,65 @@
       });
     }
 
-    function renderWalletContent(
-      wallet,
-      syncText,
-      transactionCount,
-    ) {
-      const utxos =
-        Array.isArray(wallet.utxos)
-          ? wallet.utxos
-          : [];
-
-      const transactions =
-        getWalletTransactions(wallet);
-
-      const utxosExpanded =
-        expandedUtxos.has(
-          wallet.address,
-        );
+    function renderWalletContent(wallet, transactionCount) {
+      const transactions = getWalletTransactions(wallet);
 
       return `
         <div class="wallet-content">
-          <div class="wallet-meta">
-            <div class="wallet-meta-left">
-              <span>
-                ${escapeHtml(syncText)}
-              </span>
-
-              <span>
-                ${transactionCount}
-                ${
-                  transactionCount === 1
-                    ? 'transaction'
-                    : 'transactions'
-                }
-              </span>
-            </div>
-
-            <button
-              class="button"
-              type="button"
-              onclick="event.stopPropagation(); toggleUtxos('${encodeURIComponent(wallet.address)}')"
-            >
-              ${
-                utxosExpanded
-                  ? 'Hide'
-                  : 'Show'
-              }
-              UTXOs (${utxos.length})
-            </button>
-          </div>
-
           <div class="transactions-header">
             <h3>Transactions</h3>
 
             <span class="muted">
-              ${transactions.length}
+              ${transactionCount}
             </span>
           </div>
 
           ${
             transactions.length
-              ? renderTransactions(
-                  wallet,
-                  transactions,
-                )
+              ? renderTransactions(wallet, transactions)
               : `
                 <div class="empty">
                   No transactions found for this wallet.
                 </div>
               `
           }
-
-          ${
-            utxosExpanded
-              ? renderUtxos(
-                  utxos,
-                )
-              : ''
-          }
         </div>
       `;
     }
 
-    function renderTransactions(
-      wallet,
-      transactions,
-    ) {
+    function renderTransactions(wallet, transactions) {
       return `
         <div class="transactions-list">
-          ${transactions
-            .map(
-              (transaction) =>
-                renderTransaction(
-                  wallet,
-                  transaction,
-                ),
-            )
-            .join('')}
+          ${transactions.map(
+            (transaction) => renderTransaction(wallet, transaction),
+          ).join('')}
         </div>
       `;
     }
 
-    function renderTransaction(
-      wallet,
-      transaction,
-    ) {
-      const key =
-        `${wallet.address}:${transaction.txid}`;
+    function renderTransaction(wallet, transaction) {
+      const key = `${wallet.address}:${transaction.txid}`;
+      const expanded = expandedTransactions.has(key);
+      const confirmed = getTransactionStatus(wallet, transaction);
+      const timestamp = getTransactionDate(transaction);
+      const display = getTransactionDisplay(wallet, transaction);
 
-      const expanded =
-        expandedTransactions.has(key);
+      const dateText = timestamp
+        ? formatDate(timestamp)
+        : transaction.height === null ||
+            transaction.height === undefined
+          ? 'Pending'
+          : `Block ${transaction.height}`;
 
-      const status =
-        getTransactionStatus(
-          wallet,
-          transaction,
-        );
+      const directionLabel =
+        display.direction === 'sent' ? 'Sent' : 'Received';
 
-      const timestamp =
-        getTransactionDate(
-          transaction,
-        );
+      const directionClass =
+        display.direction === 'sent' ? 'sent' : 'received';
 
-      const dateText =
-        timestamp
-          ? formatDate(timestamp)
-          : transaction.height === null ||
-              transaction.height === undefined
-            ? 'Pending'
-            : `Block ${transaction.height}`;
+      const amountText = display.direction === 'sent'
+        ? `-${formatAmount(display.sats)}`
+        : `+${formatAmount(display.sats)}`;
 
       return `
         <div class="transaction">
@@ -1534,49 +1546,37 @@
             type="button"
             onclick="toggleTransaction('${encodeURIComponent(wallet.address)}', '${encodeURIComponent(transaction.txid)}')"
           >
-            <div class="transaction-main">
+            <div class="transaction-grid">
               <div class="transaction-date">
                 ${escapeHtml(dateText)}
               </div>
 
-              <div class="transaction-id">
-                ${escapeHtml(
-                  transaction.txid,
-                )}
+              <div class="transaction-type ${directionClass}">
+                ${
+                  confirmed
+                    ? '<span class="confirmation-check" aria-label="Confirmed">+</span>'
+                    : ''
+                }
+                <span>${directionLabel}</span>
+              </div>
+
+              <div class="transaction-amount">
+                ${escapeHtml(amountText)}
               </div>
             </div>
-
-            <span
-              class="transaction-status ${status.className}"
-            >
-              ${escapeHtml(
-                status.label,
-              )}
-            </span>
-
-            <span class="transaction-chevron">
-              ${expanded ? '⌃' : '›'}
-            </span>
           </button>
 
           ${
             expanded
-              ? renderTransactionDetails(
-                  transaction,
-                )
+              ? renderTransactionDetails(transaction)
               : ''
           }
         </div>
       `;
     }
 
-    function renderTransactionDetails(
-      transaction,
-    ) {
-      const detail =
-        getTransactionFromCache(
-          transaction.txid,
-        );
+    function renderTransactionDetails(transaction) {
+      const detail = getTransactionFromCache(transaction.txid);
 
       if (!detail) {
         return `
@@ -1588,20 +1588,12 @@
         `;
       }
 
-      const confirmations =
-        Number(
-          detail.confirmations || 0,
-        );
-
-      const block =
-        detail.blockhash
-          ? detail.blockhash
-          : 'Pending';
-
-      const time =
-        detail.blocktime ||
-        detail.time ||
-        null;
+      const confirmations = Number(detail.confirmations || 0);
+      const block = detail.blockhash ? detail.blockhash : 'Pending';
+      const time = detail.blocktime || detail.time || null;
+      const mempoolUrl = getMempoolTransactionUrl(
+        detail.txid || transaction.txid
+      );
 
       return `
         <div class="transaction-details">
@@ -1612,10 +1604,7 @@
               </div>
 
               <div class="detail-value mono">
-                ${escapeHtml(
-                  detail.txid ||
-                    transaction.txid,
-                )}
+                ${escapeHtml(detail.txid || transaction.txid)}
               </div>
             </div>
 
@@ -1625,11 +1614,7 @@
               </div>
 
               <div class="detail-value">
-                ${escapeHtml(
-                  confirmations.toLocaleString(
-                    'en-US',
-                  ),
-                )}
+                ${escapeHtml(confirmations.toLocaleString('en-US'))}
               </div>
             </div>
 
@@ -1649,9 +1634,7 @@
               </div>
 
               <div class="detail-value">
-                ${escapeHtml(
-                  formatDate(time),
-                )}
+                ${escapeHtml(formatDate(time))}
               </div>
             </div>
 
@@ -1662,11 +1645,7 @@
 
               <div class="detail-value">
                 ${escapeHtml(
-                  String(
-                    detail.vsize ??
-                      detail.size ??
-                      'Unknown',
-                  ),
+                  String(detail.vsize ?? detail.size ?? 'Unknown')
                 )} vB
               </div>
             </div>
@@ -1678,11 +1657,7 @@
 
               <div class="detail-value">
                 ${escapeHtml(
-                  String(
-                    Array.isArray(detail.vout)
-                      ? detail.vout.length
-                      : 0,
-                  ),
+                  String(Array.isArray(detail.vout) ? detail.vout.length : 0)
                 )}
               </div>
             </div>
@@ -1690,93 +1665,16 @@
 
           <a
             class="mempool-link"
-            href="https://mempool.space/tx/${encodeURIComponent(detail.txid || transaction.txid)}"
+            href="${escapeHtml(mempoolUrl)}"
             target="_blank"
             rel="noopener noreferrer"
           >
-            View transaction on mempool.space ↗
+            View transaction in mempool
           </a>
         </div>
       `;
     }
 
-    function renderUtxos(
-      utxos,
-    ) {
-      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 sats =
-                          Math.round(
-                            Number(
-                              utxo.value || 0,
-                            ) *
-                              100000000,
-                          );
-
-                        const outpoint =
-                          `${utxo.tx_hash}:${utxo.tx_pos}`;
-
-                        const height =
-                          utxo.height;
-
-                        return `
-                          <div class="utxo">
-                            <div>
-                              <div class="utxo-outpoint">
-                                ${escapeHtml(
-                                  outpoint,
-                                )}
-                              </div>
-
-                              <div class="utxo-height">
-                                ${
-                                  height !==
-                                    undefined &&
-                                  height !== null &&
-                                  Number(height) > 0
-                                    ? `Block ${escapeHtml(height)}`
-                                    : 'Unconfirmed'
-                                }
-                              </div>
-                            </div>
-
-                            <div class="utxo-value">
-                              ${escapeHtml(
-                                formatAmount(
-                                  sats,
-                                ),
-                              )}
-                            </div>
-                          </div>
-                        `;
-                      },
-                    )
-                    .join('')
-                : `
-                  <div class="empty">
-                    No UTXOs.
-                  </div>
-                `
-            }
-          </div>
-        </div>
-      `;
-    }
-
     async function toggleWallet(
       encodedAddress,
     ) {
@@ -1815,25 +1713,6 @@
       );
     }
 
-    function toggleUtxos(
-      encodedAddress,
-    ) {
-      const address =
-        decodeURIComponent(
-          encodedAddress,
-        );
-
-      if (
-        expandedUtxos.has(address)
-      ) {
-        expandedUtxos.delete(address);
-      } else {
-        expandedUtxos.add(address);
-      }
-
-      renderWallets();
-    }
-
     async function toggleTransaction(
       encodedAddress,
       encodedTxid,
@@ -2234,6 +2113,24 @@
         },
       );
 
+    document
+      .getElementById('date-format')
+      .addEventListener('change', (event) => {
+        setDateFormat(event.target.value);
+      });
+
+    document
+      .getElementById('mempool-provider')
+      .addEventListener('change', (event) => {
+        setMempoolProvider(event.target.value);
+      });
+
+    document
+      .getElementById('custom-mempool-url')
+      .addEventListener('change', (event) => {
+        setCustomMempoolUrl(event.target.value);
+      });
+
     document
       .querySelectorAll(
         '.unit-button',
@@ -2250,6 +2147,8 @@
       });
 
     updateUnitButtons();
+    updateDateSettings();
+    updateMempoolSettings();
 
     loadStatus();
     loadWallets();
@@ -2265,4 +2164,4 @@
     );
   </script>
 </body>
-</html>
\ No newline at end of file
+</html>snes@lotta-thinkpad:~/start9/munin-bitcoin$ 
\ No newline at end of file