From 17478a4ac4d409f12c0bec177284a715e64875bf Mon Sep 17 00:00:00 2001
From: nym21 <expat-epochs0i@icloud.com>
Date: Mon, 22 Jun 2026 16:42:14 +0200
Subject: [PATCH] website: redesign part 34

---
 .../src/generators/javascript/client.rs       |   9 +
 modules/brk-client/index.js                   |   9 +
 website_next/dialog/style.css                 |  16 +-
 website_next/home/index.js                    |   1 +
 website_next/home/style.css                   |   1 -
 website_next/index.html                       |   7 +-
 website_next/styles/main.css                  |  88 +++++++---
 website_next/styles/variables.css             |  12 ++
 website_next/wallets/add/style.css            |  10 --
 website_next/wallets/amount/index.js          |   2 +-
 website_next/wallets/amount/style.css         |   2 +-
 website_next/wallets/hold/index.js            | 136 +++++++++++++++
 website_next/wallets/hold/style.css           |  56 ++++++
 website_next/wallets/index.js                 |  26 ++-
 website_next/wallets/layout/index.js          |  19 +-
 website_next/wallets/layout/style.css         |  21 +--
 website_next/wallets/lookup/index.js          |  41 +++++
 website_next/wallets/lookup/local.js          |  44 +++++
 website_next/wallets/scan/branch.js           |   1 +
 website_next/wallets/scan/branches.js         |   1 +
 website_next/wallets/scan/index.js            |   1 +
 website_next/wallets/selector/index.js        |  19 ++
 website_next/wallets/selector/style.css       |  39 +++--
 website_next/wallets/start/index.js           | 110 ++----------
 website_next/wallets/start/persistent.js      |  71 ++++++++
 website_next/wallets/start/reset/index.js     | 131 +-------------
 website_next/wallets/start/reset/style.css    |  54 ------
 website_next/wallets/start/story.js           |  40 +++++
 website_next/wallets/start/style.css          |  31 +---
 website_next/wallets/start/temporary.js       |  19 ++
 website_next/wallets/style.css                |  21 +--
 website_next/wallets/vault/index.js           |  15 ++
 website_next/wallets/vault/storage.js         |  14 ++
 website_next/wallets/wallet/actions/style.css |  19 --
 website_next/wallets/wallet/address/index.js  |   4 +-
 website_next/wallets/wallet/address/style.css |   4 +-
 .../wallets/wallet/addresses/index.js         |  64 +++++++
 .../wallets/wallet/addresses/style.css        |  49 ++++++
 .../history.js => history/address.js}         |   0
 .../wallet/{transactions => history}/cache.js |   4 +-
 .../wallets/wallet/history/details.js         |  38 ++++
 website_next/wallets/wallet/history/index.js  |  82 +++++++++
 website_next/wallets/wallet/history/row.js    |  79 +++++++++
 .../wallets/wallet/history/section.js         |  24 +++
 website_next/wallets/wallet/history/style.css | 124 ++++++++++++++
 .../{transactions => history}/transaction.js  |   0
 website_next/wallets/wallet/holdings/cache.js | 109 ++++++++++++
 website_next/wallets/wallet/holdings/index.js | 129 ++++++++++++++
 .../wallets/wallet/holdings/style.css         |  77 +++++++++
 website_next/wallets/wallet/holdings/utxo.js  |  65 +++++++
 website_next/wallets/wallet/index.js          |  37 ++--
 website_next/wallets/wallet/receive/style.css |   1 -
 website_next/wallets/wallet/summary/style.css |  20 ++-
 website_next/wallets/wallet/tabs/index.js     |  78 +++++++++
 website_next/wallets/wallet/tabs/style.css    |  32 ++++
 .../wallets/wallet/transactions/index.js      | 162 ------------------
 .../wallets/wallet/transactions/style.css     | 161 -----------------
 57 files changed, 1630 insertions(+), 799 deletions(-)
 create mode 100644 website_next/wallets/hold/index.js
 create mode 100644 website_next/wallets/hold/style.css
 create mode 100644 website_next/wallets/lookup/local.js
 create mode 100644 website_next/wallets/start/persistent.js
 create mode 100644 website_next/wallets/start/story.js
 create mode 100644 website_next/wallets/start/temporary.js
 delete mode 100644 website_next/wallets/wallet/actions/style.css
 create mode 100644 website_next/wallets/wallet/addresses/index.js
 create mode 100644 website_next/wallets/wallet/addresses/style.css
 rename website_next/wallets/wallet/{transactions/history.js => history/address.js} (100%)
 rename website_next/wallets/wallet/{transactions => history}/cache.js (93%)
 create mode 100644 website_next/wallets/wallet/history/details.js
 create mode 100644 website_next/wallets/wallet/history/index.js
 create mode 100644 website_next/wallets/wallet/history/row.js
 create mode 100644 website_next/wallets/wallet/history/section.js
 create mode 100644 website_next/wallets/wallet/history/style.css
 rename website_next/wallets/wallet/{transactions => history}/transaction.js (100%)
 create mode 100644 website_next/wallets/wallet/holdings/cache.js
 create mode 100644 website_next/wallets/wallet/holdings/index.js
 create mode 100644 website_next/wallets/wallet/holdings/style.css
 create mode 100644 website_next/wallets/wallet/holdings/utxo.js
 create mode 100644 website_next/wallets/wallet/tabs/index.js
 create mode 100644 website_next/wallets/wallet/tabs/style.css
 delete mode 100644 website_next/wallets/wallet/transactions/index.js
 delete mode 100644 website_next/wallets/wallet/transactions/style.css

diff --git a/crates/brk_bindgen/src/generators/javascript/client.rs b/crates/brk_bindgen/src/generators/javascript/client.rs
index b53de54fa..c0fbf5c72 100644
--- a/crates/brk_bindgen/src/generators/javascript/client.rs
+++ b/crates/brk_bindgen/src/generators/javascript/client.rs
@@ -51,6 +51,12 @@ const _openBrowserCache = (option) => {{
   return caches.open(name).catch(() => null);
 }};
 
+/**
+ * @param {{string}} url
+ * @returns {{URL}}
+ */
+const _parseBaseUrl = (url) => new URL(url, typeof location === 'undefined' ? undefined : location.href);
+
 /**
  * Custom error class for BRK client errors
  */
@@ -403,6 +409,9 @@ class BrkClientBase {{
     const isString = typeof options === 'string';
     const rawUrl = isString ? options : options.baseUrl;
     this.baseUrl = rawUrl.endsWith('/') ? rawUrl.slice(0, -1) : rawUrl;
+    const url = _parseBaseUrl(this.baseUrl);
+    this.url = url.href.endsWith('/') ? url.href.slice(0, -1) : url.href;
+    this.domain = url.hostname;
     this.timeout = isString ? 5000 : (options.timeout ?? 5000);
     /** @type {{Promise<Cache | null>}} */
     this._browserCachePromise = _openBrowserCache(isString ? undefined : options.browserCache);
diff --git a/modules/brk-client/index.js b/modules/brk-client/index.js
index 9d1da8222..a11fc34c8 100644
--- a/modules/brk-client/index.js
+++ b/modules/brk-client/index.js
@@ -1497,6 +1497,12 @@ const _openBrowserCache = (option) => {
   return caches.open(name).catch(() => null);
 };
 
+/**
+ * @param {string} url
+ * @returns {URL}
+ */
+const _parseBaseUrl = (url) => new URL(url, typeof location === 'undefined' ? undefined : location.href);
+
 /**
  * Custom error class for BRK client errors
  */
@@ -1849,6 +1855,9 @@ class BrkClientBase {
     const isString = typeof options === 'string';
     const rawUrl = isString ? options : options.baseUrl;
     this.baseUrl = rawUrl.endsWith('/') ? rawUrl.slice(0, -1) : rawUrl;
+    const url = _parseBaseUrl(this.baseUrl);
+    this.url = url.href.endsWith('/') ? url.href.slice(0, -1) : url.href;
+    this.domain = url.hostname;
     this.timeout = isString ? 5000 : (options.timeout ?? 5000);
     /** @type {Promise<Cache | null>} */
     this._browserCachePromise = _openBrowserCache(isString ? undefined : options.browserCache);
diff --git a/website_next/dialog/style.css b/website_next/dialog/style.css
index 20be5fdd4..8b3ce3a02 100644
--- a/website_next/dialog/style.css
+++ b/website_next/dialog/style.css
@@ -1,6 +1,7 @@
 dialog {
   --dialog-space: 1.5rem;
 
+  color-scheme: light;
   width: min(100% - 2rem, 30rem);
   border: 0;
   border-radius: var(--dialog-space);
@@ -11,19 +12,4 @@ dialog {
   &::backdrop {
     background: color-mix(in oklch, var(--black) 72%, transparent);
   }
-
-  button {
-    color: var(--white);
-    background: var(--gray);
-
-    &:hover {
-      color: var(--white);
-      background: var(--black);
-    }
-
-    &:active {
-      color: var(--white);
-      background: var(--orange);
-    }
-  }
 }
diff --git a/website_next/home/index.js b/website_next/home/index.js
index f097b0696..4b4488ec9 100644
--- a/website_next/home/index.js
+++ b/website_next/home/index.js
@@ -18,6 +18,7 @@ export function createHomePage() {
   for (const { href, label } of links) {
     const link = document.createElement("a");
     link.href = href;
+    link.dataset.button = "";
     link.append(label);
     nav.append(link);
   }
diff --git a/website_next/home/style.css b/website_next/home/style.css
index bbee8a776..cdc103d25 100644
--- a/website_next/home/style.css
+++ b/website_next/home/style.css
@@ -16,6 +16,5 @@ main.home {
     gap: 0.5rem;
     font-size: var(--font-size-xs);
     line-height: 1;
-    text-transform: uppercase;
   }
 }
diff --git a/website_next/index.html b/website_next/index.html
index 9bddf744e..afe1d59ce 100644
--- a/website_next/index.html
+++ b/website_next/index.html
@@ -118,18 +118,21 @@
     <link rel="stylesheet" href="/wallets/style.css" />
     <link rel="stylesheet" href="/dialog/style.css" />
     <link rel="stylesheet" href="/wallets/amount/style.css" />
+    <link rel="stylesheet" href="/wallets/hold/style.css" />
     <link rel="stylesheet" href="/wallets/layout/style.css" />
     <link rel="stylesheet" href="/wallets/form/style.css" />
     <link rel="stylesheet" href="/wallets/add/style.css" />
     <link rel="stylesheet" href="/wallets/empty/style.css" />
     <link rel="stylesheet" href="/wallets/start/style.css" />
     <link rel="stylesheet" href="/wallets/start/reset/style.css" />
-    <link rel="stylesheet" href="/wallets/wallet/actions/style.css" />
     <link rel="stylesheet" href="/wallets/selector/style.css" />
     <link rel="stylesheet" href="/wallets/wallet/summary/style.css" />
     <link rel="stylesheet" href="/wallets/wallet/receive/style.css" />
+    <link rel="stylesheet" href="/wallets/wallet/tabs/style.css" />
     <link rel="stylesheet" href="/wallets/wallet/address/style.css" />
-    <link rel="stylesheet" href="/wallets/wallet/transactions/style.css" />
+    <link rel="stylesheet" href="/wallets/wallet/history/style.css" />
+    <link rel="stylesheet" href="/wallets/wallet/holdings/style.css" />
+    <link rel="stylesheet" href="/wallets/wallet/addresses/style.css" />
     <!-- /IMPORTMAP -->
 
     <script>
diff --git a/website_next/styles/main.css b/website_next/styles/main.css
index 1006e4f96..250b07ec4 100644
--- a/website_next/styles/main.css
+++ b/website_next/styles/main.css
@@ -12,31 +12,18 @@ body > main {
   color: var(--white);
 }
 
-:where(button, main.home nav a) {
-  display: inline-flex;
+button,
+input,
+select,
+textarea,
+:where(a[data-button]) {
   appearance: none;
-  align-items: center;
-  justify-content: center;
   min-width: 0;
-  border: 0;
-  border-radius: 0.3125rem;
-  padding: 0.75rem 1rem;
-  color: var(--black);
-  background: var(--gray);
+  border-radius: var(--control-radius);
+  padding: var(--control-padding);
   font: inherit;
+  font-size: var(--font-size-sm);
   line-height: 1;
-  text-decoration: none;
-  cursor: pointer;
-
-  &:hover {
-    color: var(--black);
-    background: var(--white);
-  }
-
-  &:active {
-    color: var(--black);
-    background: var(--orange);
-  }
 
   &:focus-visible {
     outline: 2px solid var(--orange);
@@ -44,8 +31,25 @@ body > main {
   }
 }
 
-button {
-  font-size: var(--font-size-sm);
+button,
+:where(a[data-button]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  color: var(--button-color);
+  background: var(--button-background);
+  text-decoration: none;
+  text-transform: uppercase;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--button-hover-background);
+  }
+
+  &:active {
+    background: var(--button-active-background);
+  }
 
   &:disabled {
     opacity: 0.5;
@@ -53,15 +57,45 @@ button {
   }
 }
 
-:is(input, textarea)[aria-invalid="true"] {
-  border-color: var(--red);
-  color: var(--red);
+input,
+select,
+textarea {
+  border: 1px solid var(--field-border-color);
+  color: var(--field-color);
+  background: transparent;
+
+  &:hover {
+    border-color: var(--field-color);
+    color: var(--field-color);
+  }
+
+  &:active {
+    border-color: var(--field-active-color);
+    color: var(--field-active-color);
+  }
+
+  &[aria-invalid="true"] {
+    border-color: var(--red);
+    color: var(--red);
+
+    &::placeholder {
+      color: var(--red);
+    }
+  }
 
   &::placeholder {
-    color: var(--red);
+    color: color-mix(in oklch, var(--field-color) 70%, transparent);
   }
 }
 
+input {
+  height: 2.375rem;
+}
+
+textarea {
+  line-height: var(--line-height-sm);
+}
+
 ::selection {
   color: var(--black);
   background-color: var(--orange);
diff --git a/website_next/styles/variables.css b/website_next/styles/variables.css
index 537e41137..007f4b0fc 100644
--- a/website_next/styles/variables.css
+++ b/website_next/styles/variables.css
@@ -32,6 +32,18 @@
   --font-size-lg: 1.25rem;
   --line-height-lg: calc(1.5 / 1.25);
 
+  --control-radius: 0.3125rem;
+  --control-padding: 0.75rem 1rem;
+
+  --button-color: light-dark(var(--white), var(--black));
+  --button-background: var(--gray);
+  --button-hover-background: light-dark(var(--black), var(--white));
+  --button-active-background: var(--orange);
+
+  --field-color: light-dark(var(--black), var(--white));
+  --field-border-color: var(--gray);
+  --field-active-color: var(--orange);
+
   --page-x: 2rem;
   --layer-header: 10;
 }
diff --git a/website_next/wallets/add/style.css b/website_next/wallets/add/style.css
index 41ceee4e2..3e781460f 100644
--- a/website_next/wallets/add/style.css
+++ b/website_next/wallets/add/style.css
@@ -16,16 +16,6 @@ main.wallets {
       line-height: var(--line-height-sm);
     }
 
-    :is(input, textarea) {
-      border: 1px solid var(--gray);
-      color: var(--black);
-      background: transparent;
-
-      &::placeholder {
-        color: var(--gray);
-      }
-    }
-
     > footer {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
diff --git a/website_next/wallets/amount/index.js b/website_next/wallets/amount/index.js
index f789b5aa0..bab0ac03d 100644
--- a/website_next/wallets/amount/index.js
+++ b/website_next/wallets/amount/index.js
@@ -170,7 +170,7 @@ export function createBtcAmount(tag, sats, options = {}) {
     signed: options.signed === true,
   };
 
-  element.classList.add("wallets__amount");
+  element.classList.add("amount");
   amounts.push({ element, amount });
   renderBtcAmount(element, amount);
 
diff --git a/website_next/wallets/amount/style.css b/website_next/wallets/amount/style.css
index 9add21f4f..c0354f118 100644
--- a/website_next/wallets/amount/style.css
+++ b/website_next/wallets/amount/style.css
@@ -1,5 +1,5 @@
 main.wallets {
-  .wallets__amount {
+  .amount {
     .muted {
       color: color-mix(in oklch, currentColor 45%, transparent);
     }
diff --git a/website_next/wallets/hold/index.js b/website_next/wallets/hold/index.js
new file mode 100644
index 000000000..48c928199
--- /dev/null
+++ b/website_next/wallets/hold/index.js
@@ -0,0 +1,136 @@
+import { createElement } from "../dom.js";
+
+const FILL_MS = 2_000;
+const DRAIN_MS = 600;
+
+/**
+ * @param {number} value
+ */
+function clampProgress(value) {
+  return Math.max(0, Math.min(1, value));
+}
+
+/**
+ * @param {HTMLButtonElement} button
+ * @param {() => void} onHold
+ */
+function bindHold(button, onHold) {
+  /** @type {number | undefined} */
+  let frame;
+  let holding = false;
+  let progress = 0;
+  let previous = 0;
+
+  function render() {
+    button.style.setProperty("--hold-progress", String(progress));
+    button.style.setProperty("--hold-progress-width", `${progress * 100}%`);
+    button.classList.toggle("active", progress > 0);
+  }
+
+  function stop() {
+    if (frame === undefined) return;
+
+    cancelAnimationFrame(frame);
+    frame = undefined;
+  }
+
+  /**
+   * @param {number} now
+   */
+  function tick(now) {
+    const elapsed = now - previous;
+    const rate = elapsed / (holding ? FILL_MS : DRAIN_MS);
+
+    previous = now;
+    progress = clampProgress(progress + (holding ? rate : -rate));
+    render();
+
+    if (holding && progress === 1) {
+      stop();
+      holding = false;
+      progress = 0;
+      button.classList.remove("holding");
+      render();
+      onHold();
+      return;
+    }
+
+    if (!holding && progress === 0) {
+      stop();
+      return;
+    }
+
+    frame = requestAnimationFrame(tick);
+  }
+
+  function run() {
+    if (frame !== undefined) return;
+
+    previous = performance.now();
+    frame = requestAnimationFrame(tick);
+  }
+
+  function release() {
+    if (!holding) return;
+
+    holding = false;
+    button.classList.remove("holding");
+    run();
+  }
+
+  function hold() {
+    stop();
+
+    holding = true;
+    button.classList.add("holding");
+    run();
+  }
+
+  render();
+
+  button.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0) return;
+
+    button.setPointerCapture(event.pointerId);
+    hold();
+  });
+  button.addEventListener("pointerup", release);
+  button.addEventListener("pointercancel", release);
+  button.addEventListener("lostpointercapture", release);
+  button.addEventListener("keydown", (event) => {
+    if (event.repeat || (event.key !== " " && event.key !== "Enter")) return;
+
+    event.preventDefault();
+    hold();
+  });
+  button.addEventListener("keyup", (event) => {
+    if (event.key === " " || event.key === "Enter") {
+      release();
+    }
+  });
+  button.addEventListener("blur", release);
+}
+
+/**
+ * @param {Object} options
+ * @param {string} options.label
+ * @param {string} options.title
+ * @param {string} [options.className]
+ * @param {() => void} options.onHold
+ */
+export function createHoldButton(options) {
+  const button = createElement("button", "hold");
+  const label = document.createElement("span");
+
+  if (options.className) {
+    button.classList.add(options.className);
+  }
+  button.type = "button";
+  button.dataset.label = options.label;
+  button.title = options.title;
+  label.append(options.label);
+  button.append(label);
+  bindHold(button, options.onHold);
+
+  return button;
+}
diff --git a/website_next/wallets/hold/style.css b/website_next/wallets/hold/style.css
new file mode 100644
index 000000000..c6bf6909a
--- /dev/null
+++ b/website_next/wallets/hold/style.css
@@ -0,0 +1,56 @@
+main.wallets {
+  .hold {
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    color: color-mix(in oklch, var(--gray) 76%, transparent);
+    background: transparent;
+    --hold-progress: 0;
+    --hold-progress-width: 0%;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+    }
+
+    &::before {
+      z-index: -1;
+      background: var(--red);
+      transform: scaleX(var(--hold-progress));
+      transform-origin: left;
+    }
+
+    &::after {
+      content: attr(data-label);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: inherit;
+      color: var(--black);
+      pointer-events: none;
+      white-space: nowrap;
+      clip-path: inset(0 calc(100% - var(--hold-progress-width)) 0 0);
+    }
+
+    span {
+      color: inherit;
+    }
+
+    &:is(:hover, :focus-visible, :active):not(.holding) {
+      color: var(--red);
+      background: transparent;
+    }
+
+    &.active {
+      color: var(--red);
+    }
+
+    &.active::before,
+    &.active::after {
+      opacity: 1;
+    }
+  }
+}
diff --git a/website_next/wallets/index.js b/website_next/wallets/index.js
index 78cd9265b..cde8374c4 100644
--- a/website_next/wallets/index.js
+++ b/website_next/wallets/index.js
@@ -29,8 +29,7 @@ import { syncBtcAmounts } from "./amount/index.js";
 export function createWalletsPage() {
   const {
     main,
-    header,
-    addButton,
+    utilities,
     privacyButton,
     sessionButton,
     selector: selectorElement,
@@ -44,6 +43,12 @@ export function createWalletsPage() {
       return vault.selectedId;
     },
     onSelect: select,
+    onAdd() {
+      openAdd();
+    },
+    onDelete() {
+      deleteWallet(vault.selectedId);
+    },
   });
 
   redaction.syncButton(privacyButton);
@@ -76,6 +81,17 @@ export function createWalletsPage() {
     render();
   }
 
+  /**
+   * @param {string} walletId
+   */
+  function deleteWallet(walletId) {
+    void vault.deleteWallet(walletId).then(() => {
+      render();
+    }, (error) => {
+      console.error(error);
+    });
+  }
+
   function openAdd() {
     addDialog.replaceChildren(createAddForm({
       onCancel() {
@@ -102,10 +118,6 @@ export function createWalletsPage() {
     lock();
   });
 
-  addButton.addEventListener("click", () => {
-    openAdd();
-  });
-
   /**
    * @param {"create" | "unlock"} mode
    */
@@ -228,7 +240,7 @@ export function createWalletsPage() {
     const current = vault.current();
     const empty = !needsSetup && !locked && !current;
 
-    header.hidden = locked || needsSetup || empty;
+    utilities.hidden = locked || needsSetup || empty;
     selectorElement.hidden = locked || needsSetup || empty;
     sessionButton.hidden = locked || needsSetup || (!vault.hasPassword && !ephemeral);
     sessionButton.textContent = ephemeral ? "Clear" : "Lock";
diff --git a/website_next/wallets/layout/index.js b/website_next/wallets/layout/index.js
index 7dda1516e..679dbb6ba 100644
--- a/website_next/wallets/layout/index.js
+++ b/website_next/wallets/layout/index.js
@@ -3,8 +3,7 @@ import { createElement } from "../dom.js";
 /**
  * @typedef {Object} WalletsLayout
  * @property {HTMLElement} main
- * @property {HTMLElement} header
- * @property {HTMLButtonElement} addButton
+ * @property {HTMLElement} utilities
  * @property {HTMLButtonElement} privacyButton
  * @property {HTMLButtonElement} sessionButton
  * @property {HTMLElement} selector
@@ -18,33 +17,27 @@ import { createElement } from "../dom.js";
  */
 export function createLayout() {
   const main = createElement("main", "wallets");
-  const header = document.createElement("header");
-  const actions = document.createElement("menu");
-  const addButton = document.createElement("button");
+  const utilities = document.createElement("footer");
   const privacyButton = document.createElement("button");
   const sessionButton = document.createElement("button");
-  const selector = createElement("section", "wallets__selector");
+  const selector = createElement("section", "selector");
   const walletList = document.createElement("nav");
   const content = document.createElement("article");
   const addDialog = document.createElement("dialog");
 
-  addButton.type = "button";
-  addButton.append("Add watch-only wallet");
   privacyButton.type = "button";
   sessionButton.type = "button";
   sessionButton.append("Lock");
   content.setAttribute("aria-live", "polite");
   walletList.setAttribute("tabindex", "0");
   walletList.setAttribute("aria-label", "Wallets");
-  actions.append(addButton, privacyButton, sessionButton);
-  header.append(actions);
+  utilities.append(privacyButton, sessionButton);
   selector.append(walletList);
-  main.append(header, selector, content, addDialog);
+  main.append(selector, content, utilities, addDialog);
 
   return {
     main,
-    header,
-    addButton,
+    utilities,
     privacyButton,
     sessionButton,
     selector,
diff --git a/website_next/wallets/layout/style.css b/website_next/wallets/layout/style.css
index d7427d444..321a44d91 100644
--- a/website_next/wallets/layout/style.css
+++ b/website_next/wallets/layout/style.css
@@ -1,26 +1,13 @@
 main.wallets {
-  > header {
+  > footer {
     display: flex;
     gap: 1rem;
     align-items: center;
-    justify-content: end;
+    justify-content: space-between;
+    align-self: end;
 
     @media (max-width: 34rem) {
-      justify-content: start;
-    }
-
-    > menu {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.5rem;
-      justify-content: end;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-
-      @media (max-width: 34rem) {
-        justify-content: start;
-      }
+      justify-content: center;
     }
   }
 
diff --git a/website_next/wallets/lookup/index.js b/website_next/wallets/lookup/index.js
index 5167ff176..73893bdef 100644
--- a/website_next/wallets/lookup/index.js
+++ b/website_next/wallets/lookup/index.js
@@ -5,6 +5,7 @@ import {
   getAddressTxCount,
 } from "./stats.js";
 import { findUsablePrefixBucket } from "./bucket.js";
+import { isLocalClient } from "./local.js";
 
 const LOOKUP_CONCURRENCY = 8;
 
@@ -35,6 +36,7 @@ const LOOKUP_CONCURRENCY = 8;
 
 /**
  * @typedef {Object} AddressClient
+ * @property {string} domain
  * @property {(address: string, options?: { cache?: boolean }) => Promise<unknown>} getAddress
  * @property {(addrType: AddressType, prefix: string, options?: { cache?: boolean }) => Promise<unknown>} getAddressHashPrefixMatches
  */
@@ -93,6 +95,16 @@ function createWalletAddress(
   };
 }
 
+/**
+ * @param {unknown} error
+ */
+function isNotFound(error) {
+  return (
+    error instanceof Error &&
+    /** @type {{ status?: unknown }} */ (error).status === 404
+  );
+}
+
 /**
  * @param {AddressClient} client
  * @param {readonly string[]} addresses
@@ -113,6 +125,29 @@ async function fetchBucketMetadata(client, addresses, cache) {
   await Promise.all(addresses.map((address) => cache.get(address)));
 }
 
+/**
+ * @param {AddressClient} client
+ * @param {GeneratedAddress} generated
+ * @returns {Promise<WalletAddress>}
+ */
+async function fetchDirectWalletAddress(client, generated) {
+  try {
+    const stats = /** @type {AddressStats} */ (
+      await client.getAddress(generated.address, { cache: false })
+    );
+    const historyAddresses =
+      getAddressTxCount(stats) > 0 ? [generated.address] : [];
+
+    return createWalletAddress(generated, stats, historyAddresses, 1);
+  } catch (error) {
+    if (isNotFound(error)) {
+      return createEmptyWalletAddress(generated, 1);
+    }
+
+    throw error;
+  }
+}
+
 /**
  * @param {AddressClient} client
  * @param {GeneratedAddress} generated
@@ -158,6 +193,12 @@ async function fetchWalletAddress(client, generated, metadataCache) {
  * @returns {Promise<WalletAddress[]>}
  */
 export async function fetchWalletAddresses(client, generated) {
+  if (isLocalClient(client)) {
+    return mapConcurrent(generated, LOOKUP_CONCURRENCY, (address) => {
+      return fetchDirectWalletAddress(client, address);
+    });
+  }
+
   const metadataCache =
     /** @type {Map<string, Promise<AddressStats>>} */ (new Map());
 
diff --git a/website_next/wallets/lookup/local.js b/website_next/wallets/lookup/local.js
new file mode 100644
index 000000000..63397aac1
--- /dev/null
+++ b/website_next/wallets/lookup/local.js
@@ -0,0 +1,44 @@
+const localDomains = new Set([
+  "localhost",
+  "127.0.0.1",
+  "0.0.0.0",
+  "::1",
+  "[::1]",
+]);
+
+/**
+ * @param {string} domain
+ */
+function isPrivateIpv4(domain) {
+  const parts = domain.split(".").map(Number);
+
+  if (
+    parts.length !== 4 ||
+    parts.some((part) => !Number.isInteger(part) || part < 0 || part > 255)
+  ) {
+    return false;
+  }
+
+  const [a, b] = parts;
+
+  return (
+    a === 10 ||
+    a === 127 ||
+    (a === 169 && b === 254) ||
+    (a === 172 && b >= 16 && b <= 31) ||
+    (a === 192 && b === 168)
+  );
+}
+
+/**
+ * @param {{ domain: string }} client
+ */
+export function isLocalClient(client) {
+  const domain = client.domain.toLowerCase();
+
+  return (
+    localDomains.has(domain) ||
+    domain.endsWith(".local") ||
+    isPrivateIpv4(domain)
+  );
+}
diff --git a/website_next/wallets/scan/branch.js b/website_next/wallets/scan/branch.js
index 037bc082c..eb1069f84 100644
--- a/website_next/wallets/scan/branch.js
+++ b/website_next/wallets/scan/branch.js
@@ -14,6 +14,7 @@ const MAX_SCANNED_ADDRESSES = 1_000;
 
 /**
  * @typedef {Object} AddressClient
+ * @property {string} domain
  * @property {(address: string, options?: { cache?: boolean }) => Promise<unknown>} getAddress
  * @property {(addrType: AddressType, prefix: string, options?: { cache?: boolean }) => Promise<unknown>} getAddressHashPrefixMatches
  */
diff --git a/website_next/wallets/scan/branches.js b/website_next/wallets/scan/branches.js
index 68b08da04..1d5a08a6f 100644
--- a/website_next/wallets/scan/branches.js
+++ b/website_next/wallets/scan/branches.js
@@ -31,6 +31,7 @@ const descriptorBranches = /** @type {const} */ ([
 
 /**
  * @typedef {Object} AddressClient
+ * @property {string} domain
  * @property {(address: string, options?: { cache?: boolean }) => Promise<unknown>} getAddress
  * @property {(addrType: AddressType, prefix: string, options?: { cache?: boolean }) => Promise<unknown>} getAddressHashPrefixMatches
  */
diff --git a/website_next/wallets/scan/index.js b/website_next/wallets/scan/index.js
index 1a239ff94..e9b3f0c84 100644
--- a/website_next/wallets/scan/index.js
+++ b/website_next/wallets/scan/index.js
@@ -19,6 +19,7 @@ import { addressScripts } from "../derive/script.js";
 
 /**
  * @typedef {Object} WalletScanClient
+ * @property {string} domain
  * @property {(address: string, options?: { cache?: boolean }) => Promise<unknown>} getAddress
  * @property {(addrType: AddressType, prefix: string, options?: { cache?: boolean }) => Promise<unknown>} getAddressHashPrefixMatches
  * @property {(options?: { cache?: boolean }) => Promise<unknown>} getLivePrice
diff --git a/website_next/wallets/selector/index.js b/website_next/wallets/selector/index.js
index 5d847bf43..a774db374 100644
--- a/website_next/wallets/selector/index.js
+++ b/website_next/wallets/selector/index.js
@@ -1,3 +1,5 @@
+import { createHoldButton } from "../hold/index.js";
+
 /**
  * @typedef {Object} StoredWallet
  * @property {string} id
@@ -8,6 +10,8 @@
  * @typedef {Object} WalletSelectorOptions
  * @property {() => string} getSelectedId
  * @property {(walletId: string) => void} onSelect
+ * @property {() => void} onAdd
+ * @property {() => void} onDelete
  *
  * @typedef {Object} WalletSelectorButton
  * @property {HTMLButtonElement} button
@@ -22,6 +26,13 @@
  */
 function renderButtons(walletList, wallets, options) {
   const buttons = /** @type {WalletSelectorButton[]} */ ([]);
+  const add = document.createElement("button");
+  const remove = createHoldButton({
+    label: "DELETE",
+    title: "Hold to delete",
+    className: "delete",
+    onHold: options.onDelete,
+  });
 
   walletList.replaceChildren();
 
@@ -39,6 +50,14 @@ function renderButtons(walletList, wallets, options) {
     walletList.append(button);
   }
 
+  add.type = "button";
+  add.append("ADD");
+  add.addEventListener("click", options.onAdd);
+  walletList.append(add);
+  if (wallets.length > 0) {
+    walletList.append(remove);
+  }
+
   return buttons;
 }
 
diff --git a/website_next/wallets/selector/style.css b/website_next/wallets/selector/style.css
index 28fcf58ab..d2f79d10a 100644
--- a/website_next/wallets/selector/style.css
+++ b/website_next/wallets/selector/style.css
@@ -1,10 +1,10 @@
 main.wallets {
-  .wallets__selector {
+  .selector {
     min-width: 0;
 
     > nav {
       display: flex;
-      gap: 1rem;
+      gap: 0.5rem;
       min-width: 0;
       overflow-x: auto;
       padding-bottom: 0.25rem;
@@ -14,28 +14,41 @@ main.wallets {
 
       > button {
         flex: 0 0 auto;
-        height: auto;
         scroll-snap-align: center;
-        border: 0;
-        padding: 0;
+        background: var(--gray);
         color: var(--white);
-        background: transparent;
-        font-size: 4rem;
+        font-size: var(--font-size-lg);
         font-weight: 400;
         line-height: 1;
-        opacity: 0.48;
-        cursor: pointer;
 
         @media (max-width: 56rem) {
-          font-size: 3rem;
+          font-size: var(--font-size-base);
         }
 
-        @media (max-width: 34rem) {
-          font-size: 2.5rem;
+        &:hover {
+          color: var(--black);
+          background: var(--white);
+        }
+
+        &:active {
+          color: var(--black);
+          background: var(--orange);
         }
 
         &[aria-pressed="true"] {
-          opacity: 1;
+          color: var(--black);
+          background: var(--white);
+        }
+
+        &.delete {
+          color: color-mix(in oklch, var(--gray) 76%, transparent);
+          background: transparent;
+
+          &:hover,
+          &:active {
+            color: var(--red);
+            background: transparent;
+          }
         }
       }
     }
diff --git a/website_next/wallets/start/index.js b/website_next/wallets/start/index.js
index b6be82c91..356f56262 100644
--- a/website_next/wallets/start/index.js
+++ b/website_next/wallets/start/index.js
@@ -1,5 +1,7 @@
 import { createElement } from "../dom.js";
-import { createResetButton } from "./reset/index.js";
+import { createPersistentVault } from "./persistent.js";
+import { createStartStory } from "./story.js";
+import { createTemporaryVault } from "./temporary.js";
 
 /**
  * @typedef {"create" | "unlock"} StartMode
@@ -19,108 +21,24 @@ import { createResetButton } from "./reset/index.js";
  */
 export function createStart(options) {
   const section = createElement("section", "start");
-  const story = document.createElement("article");
-  const title = document.createElement("h1");
-  const titleBreak = document.createElement("br");
-  const titleAccent = document.createElement("span");
-  const lead = document.createElement("p");
-  const details = document.createElement("ul");
-  const warningRule = document.createElement("hr");
-  const warning = document.createElement("p");
   const modes = document.createElement("div");
-  const persistent = document.createElement("section");
-  const persistentTitle = document.createElement("h2");
-  const persistentText = document.createElement("p");
-  const form = document.createElement("form");
-  const password = document.createElement("input");
-  const submit = document.createElement("button");
   const divider = document.createElement("p");
-  const temporary = document.createElement("section");
-  const temporaryTitle = document.createElement("h2");
-  const temporaryText = document.createElement("p");
-  const temporaryButton = document.createElement("button");
-  const status = document.createElement("output");
-  const unlock = options.mode === "unlock";
-
-  titleAccent.append("wallets");
-  title.append("Watch-only", titleBreak, titleAccent);
-  lead.append("View a Bitcoin wallet privately, without spending access.");
-  details.append(
-    createDetail("Open xpubs and watch-only descriptors."),
-    createDetail("Addresses are derived on your device."),
-    createDetail("Anonymity sets increase lookup privacy."),
-    createDetail("Save encrypted wallets, or use a temporary session."),
-  );
-  warning.append(
-    "Use a VPN for extra network privacy.",
-    document.createElement("br"),
-    "On-chain address links will reduce anonymity.",
-  );
-  story.append(title, lead, details, warningRule, warning);
-  persistentTitle.append("Persistent vault");
-  persistentText.append(
-    unlock
-      ? "Unlock the encrypted vault saved in this browser."
-      : "Create an encrypted vault saved in this browser.",
-  );
-  password.name = "password";
-  password.type = "password";
-  password.autocomplete = unlock ? "current-password" : "new-password";
-  password.autofocus = true;
-  password.placeholder = unlock ? "Password" : "Set password";
-  password.required = true;
-  submit.type = "submit";
-  submit.append(unlock ? "Unlock" : "Create");
-  form.append(password, submit);
-  function clearInvalid() {
-    password.removeAttribute("aria-invalid");
-  }
-
-  password.addEventListener("input", clearInvalid);
-  form.addEventListener("submit", (event) => {
-    event.preventDefault();
-    clearInvalid();
-    void (async () => {
-      const valid = await options.onPassword(password.value, submit, status);
-
-      if (valid === false) {
-        password.setAttribute("aria-invalid", "true");
-        password.focus({ preventScroll: true });
-      }
-    })();
+  const persistent = createPersistentVault({
+    mode: options.mode,
+    onPassword: options.onPassword,
+    onReset: options.onReset,
   });
-  persistent.append(persistentTitle, persistentText, form);
-
-  if (options.onReset) {
-    persistent.append(createResetButton(options.onReset));
-  }
 
   divider.append("OR");
-  temporaryTitle.append("Temporary vault");
-  temporaryText.append("Wallets are never saved to this browser.");
-  temporaryButton.type = "button";
-  temporaryButton.append("Start temporary");
-  temporaryButton.addEventListener("click", () => {
-    options.onEphemeral();
-  });
-  temporary.append(temporaryTitle, temporaryText, temporaryButton);
-  persistent.append(status);
-  modes.append(persistent, divider, temporary);
-  section.append(story, modes);
+  modes.append(
+    persistent.element,
+    divider,
+    createTemporaryVault(options.onEphemeral),
+  );
+  section.append(createStartStory(), modes);
   queueMicrotask(() => {
-    password.focus({ preventScroll: true });
+    persistent.password.focus({ preventScroll: true });
   });
 
   return section;
 }
-
-/**
- * @param {string} text
- */
-function createDetail(text) {
-  const item = document.createElement("li");
-
-  item.append(text);
-
-  return item;
-}
diff --git a/website_next/wallets/start/persistent.js b/website_next/wallets/start/persistent.js
new file mode 100644
index 000000000..9dd1e705c
--- /dev/null
+++ b/website_next/wallets/start/persistent.js
@@ -0,0 +1,71 @@
+import { createResetButton } from "./reset/index.js";
+
+/**
+ * @typedef {"create" | "unlock"} StartMode
+ *
+ * @typedef {Object} PersistentOptions
+ * @property {StartMode} mode
+ * @property {(password: string, button: HTMLButtonElement, status: HTMLElement) => boolean | void | Promise<boolean | void>} onPassword
+ * @property {() => void} [onReset]
+ */
+
+/**
+ * @param {PersistentOptions} options
+ */
+export function createPersistentVault(options) {
+  const persistent = document.createElement("section");
+  const title = document.createElement("h2");
+  const text = document.createElement("p");
+  const form = document.createElement("form");
+  const password = document.createElement("input");
+  const submit = document.createElement("button");
+  const status = document.createElement("output");
+  const unlock = options.mode === "unlock";
+
+  title.append("Persistent vault");
+  text.append(
+    unlock
+      ? "Unlock the encrypted vault saved in this browser."
+      : "Create an encrypted vault saved in this browser.",
+  );
+  password.name = "password";
+  password.type = "password";
+  password.autocomplete = unlock ? "current-password" : "new-password";
+  password.autofocus = true;
+  password.placeholder = unlock ? "Password" : "Set password";
+  password.required = true;
+  submit.type = "submit";
+  submit.append(unlock ? "Unlock" : "Create");
+  form.append(password, submit);
+
+  function clearInvalid() {
+    password.removeAttribute("aria-invalid");
+  }
+
+  password.addEventListener("input", clearInvalid);
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+    clearInvalid();
+    void (async () => {
+      const valid = await options.onPassword(password.value, submit, status);
+
+      if (valid === false) {
+        password.setAttribute("aria-invalid", "true");
+        password.focus({ preventScroll: true });
+      }
+    })();
+  });
+
+  persistent.append(title, text, form);
+
+  if (options.onReset) {
+    persistent.append(createResetButton(options.onReset));
+  }
+
+  persistent.append(status);
+
+  return {
+    element: persistent,
+    password,
+  };
+}
diff --git a/website_next/wallets/start/reset/index.js b/website_next/wallets/start/reset/index.js
index 5c545a762..47b92266b 100644
--- a/website_next/wallets/start/reset/index.js
+++ b/website_next/wallets/start/reset/index.js
@@ -1,130 +1,13 @@
-import { createElement } from "../../dom.js";
-
-const FILL_MS = 2_000;
-const DRAIN_MS = 600;
-const LABEL = "Reset vault";
-
-/**
- * @param {number} value
- */
-function clampProgress(value) {
-  return Math.max(0, Math.min(1, value));
-}
-
-/**
- * @param {HTMLButtonElement} button
- * @param {() => void} onReset
- */
-function bindHold(button, onReset) {
-  /** @type {number | undefined} */
-  let frame;
-  let holding = false;
-  let progress = 0;
-  let previous = 0;
-
-  function render() {
-    button.style.setProperty("--reset-progress", String(progress));
-    button.style.setProperty("--reset-progress-width", `${progress * 100}%`);
-    button.classList.toggle("active", progress > 0);
-  }
-
-  function stop() {
-    if (frame === undefined) return;
-
-    cancelAnimationFrame(frame);
-    frame = undefined;
-  }
-
-  /**
-   * @param {number} now
-   */
-  function tick(now) {
-    const elapsed = now - previous;
-    const rate = elapsed / (holding ? FILL_MS : DRAIN_MS);
-
-    previous = now;
-    progress = clampProgress(progress + (holding ? rate : -rate));
-    render();
-
-    if (holding && progress === 1) {
-      stop();
-      holding = false;
-      progress = 0;
-      button.classList.remove("holding");
-      render();
-      onReset();
-      return;
-    }
-
-    if (!holding && progress === 0) {
-      stop();
-      return;
-    }
-
-    frame = requestAnimationFrame(tick);
-  }
-
-  function run() {
-    if (frame !== undefined) return;
-
-    previous = performance.now();
-    frame = requestAnimationFrame(tick);
-  }
-
-  function release() {
-    if (!holding) return;
-
-    holding = false;
-    button.classList.remove("holding");
-    run();
-  }
-
-  function hold() {
-    stop();
-
-    holding = true;
-    button.classList.add("holding");
-    run();
-  }
-
-  render();
-
-  button.addEventListener("pointerdown", (event) => {
-    if (event.button !== 0) return;
-
-    button.setPointerCapture(event.pointerId);
-    hold();
-  });
-  button.addEventListener("pointerup", release);
-  button.addEventListener("pointercancel", release);
-  button.addEventListener("lostpointercapture", release);
-  button.addEventListener("keydown", (event) => {
-    if (event.repeat || (event.key !== " " && event.key !== "Enter")) return;
-
-    event.preventDefault();
-    hold();
-  });
-  button.addEventListener("keyup", (event) => {
-    if (event.key === " " || event.key === "Enter") {
-      release();
-    }
-  });
-  button.addEventListener("blur", release);
-}
+import { createHoldButton } from "../../hold/index.js";
 
 /**
  * @param {() => void} onReset
  */
 export function createResetButton(onReset) {
-  const button = createElement("button", "reset");
-  const label = document.createElement("span");
-
-  button.type = "button";
-  button.dataset.label = LABEL;
-  button.title = "Hold to reset";
-  label.append(LABEL);
-  button.append(label);
-  bindHold(button, onReset);
-
-  return button;
+  return createHoldButton({
+    label: "Reset vault",
+    title: "Hold to reset",
+    className: "reset",
+    onHold: onReset,
+  });
 }
diff --git a/website_next/wallets/start/reset/style.css b/website_next/wallets/start/reset/style.css
index 2f9cd784f..994d204b2 100644
--- a/website_next/wallets/start/reset/style.css
+++ b/website_next/wallets/start/reset/style.css
@@ -1,62 +1,8 @@
 main.wallets {
   .start {
     .reset {
-      position: relative;
-      isolation: isolate;
       justify-self: start;
-      overflow: hidden;
       width: 100%;
-      border-color: transparent;
-      color: color-mix(in oklch, var(--gray) 76%, transparent);
-      background: transparent;
-      font-size: var(--font-size-sm);
-      --reset-progress: 0;
-      --reset-progress-width: 0%;
-
-      &::before,
-      &::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        opacity: 0;
-      }
-
-      &::before {
-        z-index: -1;
-        background: var(--red);
-        transform: scaleX(var(--reset-progress));
-        transform-origin: left;
-      }
-
-      &::after {
-        content: attr(data-label);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: inherit;
-        color: var(--black);
-        pointer-events: none;
-        white-space: nowrap;
-        clip-path: inset(0 calc(100% - var(--reset-progress-width)) 0 0);
-      }
-
-      span {
-        color: inherit;
-      }
-
-      &:is(:hover, :focus-visible, :active):not(.holding) {
-        color: var(--red);
-        background: transparent;
-      }
-
-      &.active {
-        color: var(--red);
-      }
-
-      &.active::before,
-      &.active::after {
-        opacity: 1;
-      }
     }
   }
 }
diff --git a/website_next/wallets/start/story.js b/website_next/wallets/start/story.js
new file mode 100644
index 000000000..5de9b6c61
--- /dev/null
+++ b/website_next/wallets/start/story.js
@@ -0,0 +1,40 @@
+/**
+ * @param {string} text
+ */
+function createDetail(text) {
+  const item = document.createElement("li");
+
+  item.append(text);
+
+  return item;
+}
+
+export function createStartStory() {
+  const story = document.createElement("article");
+  const title = document.createElement("h1");
+  const titleBreak = document.createElement("br");
+  const titleAccent = document.createElement("span");
+  const lead = document.createElement("p");
+  const details = document.createElement("ul");
+  const warningRule = document.createElement("hr");
+  const warning = document.createElement("small");
+
+  titleAccent.append("wallets");
+  title.append("Watch-only", titleBreak, titleAccent);
+  lead.append("View a Bitcoin wallet privately, without spending access.");
+  details.append(
+    createDetail("Open xpubs and watch-only descriptors."),
+    createDetail("Addresses are derived on your device."),
+    createDetail("Public lookups use anonymity sets."),
+    createDetail("Local servers fetch directly and are best."),
+    createDetail("Save encrypted wallets, or use a temporary session."),
+  );
+  warning.append(
+    "Use a VPN for extra network privacy.",
+    document.createElement("br"),
+    "On-chain address links will reduce anonymity.",
+  );
+  story.append(title, lead, details, warningRule, warning);
+
+  return story;
+}
diff --git a/website_next/wallets/start/style.css b/website_next/wallets/start/style.css
index 62134e853..b7340f199 100644
--- a/website_next/wallets/start/style.css
+++ b/website_next/wallets/start/style.css
@@ -40,7 +40,7 @@ main.wallets {
       margin: 0;
     }
 
-    > article > p:first-of-type {
+    > article > p {
       max-width: 35rem;
       color: var(--white);
       font-size: var(--font-size-base);
@@ -82,7 +82,7 @@ main.wallets {
       background: var(--gray);
     }
 
-    > article > p:last-of-type {
+    > article > small {
       max-width: 34rem;
       color: var(--gray);
       font-size: var(--font-size-sm);
@@ -137,33 +137,16 @@ main.wallets {
       }
 
       form {
-        --height: 2.375rem;
-
         display: flex;
         gap: 0;
         width: 100%;
-        font-size: var(--font-size-sm);
-
-        :is(input, button) {
-          height: var(--height);
-          padding: 0 1rem;
-          font: inherit;
-          line-height: 1;
-        }
 
         input {
           flex: 1 1 auto;
           display: block;
           min-block-size: 0;
-          border: 1px solid var(--gray);
           border-top-right-radius: 0;
           border-bottom-right-radius: 0;
-          color: var(--white);
-          background: transparent;
-
-          &::placeholder {
-            color: var(--gray);
-          }
         }
 
         button {
@@ -175,22 +158,18 @@ main.wallets {
           flex-direction: column;
 
           input {
-            border-top-right-radius: 0.375rem;
+            border-top-right-radius: var(--control-radius);
             border-bottom-left-radius: 0;
           }
 
           button {
             border-top-right-radius: 0;
-            border-bottom-left-radius: 0.375rem;
+            border-bottom-left-radius: var(--control-radius);
           }
         }
       }
 
-      > section:last-child {
-        font-size: var(--font-size-sm);
-      }
-
-      > section:last-child > button {
+      > section[data-mode="temporary"] > button {
         width: 100%;
       }
     }
diff --git a/website_next/wallets/start/temporary.js b/website_next/wallets/start/temporary.js
new file mode 100644
index 000000000..ee69a4367
--- /dev/null
+++ b/website_next/wallets/start/temporary.js
@@ -0,0 +1,19 @@
+/**
+ * @param {() => void} onStart
+ */
+export function createTemporaryVault(onStart) {
+  const temporary = document.createElement("section");
+  const title = document.createElement("h2");
+  const text = document.createElement("p");
+  const button = document.createElement("button");
+
+  temporary.dataset.mode = "temporary";
+  title.append("Temporary vault");
+  text.append("Wallets are never saved to this browser.");
+  button.type = "button";
+  button.append("Start temporary");
+  button.addEventListener("click", onStart);
+  temporary.append(title, text, button);
+
+  return temporary;
+}
diff --git a/website_next/wallets/style.css b/website_next/wallets/style.css
index c3d18bf5e..e98877496 100644
--- a/website_next/wallets/style.css
+++ b/website_next/wallets/style.css
@@ -5,6 +5,7 @@ main.wallets {
   display: grid;
   gap: 1.5rem;
   align-content: start;
+  grid-template-rows: auto minmax(0, 1fr) auto;
   width: min(100%, var(--content-width));
   margin-inline: auto;
   padding: var(--offset) var(--page-x);
@@ -19,30 +20,12 @@ main.wallets {
     line-height: var(--line-height-sm);
   }
 
-  :is(input, select, textarea) {
-    appearance: none;
+  .results {
     min-width: 0;
-    border: 0;
-    border-radius: 0.375rem;
-    padding: 0.75rem 0.875rem;
-    color: var(--white);
-    background: color-mix(in oklch, var(--black) 72%, var(--white));
-    font: inherit;
-    line-height: 1;
   }
 
   textarea {
     min-height: 7rem;
     resize: vertical;
-    line-height: var(--line-height-sm);
-  }
-
-  :is(input, select, textarea):focus-visible {
-    outline: 2px solid var(--orange);
-    outline-offset: 2px;
-  }
-
-  :is(input, textarea)::placeholder {
-    color: color-mix(in oklch, var(--gray) 70%, transparent);
   }
 }
diff --git a/website_next/wallets/vault/index.js b/website_next/wallets/vault/index.js
index c519a296d..a98a52ea1 100644
--- a/website_next/wallets/vault/index.js
+++ b/website_next/wallets/vault/index.js
@@ -144,6 +144,20 @@ export function createVault() {
     runtimes.set(added.wallet.id, createRuntime(added.wallet.source));
   }
 
+  /**
+   * @param {string} walletId
+   */
+  async function deleteWallet(walletId) {
+    if (ephemeral) {
+      wallets = wallets.filter((wallet) => wallet.id !== walletId);
+    } else {
+      wallets = await vaultStorage.deleteWallet(wallets, walletId, password);
+    }
+
+    runtimes.delete(walletId);
+    syncSelected();
+  }
+
   return {
     get wallets() {
       return wallets;
@@ -173,5 +187,6 @@ export function createVault() {
     setup,
     unlock,
     addWallet,
+    deleteWallet,
   };
 }
diff --git a/website_next/wallets/vault/storage.js b/website_next/wallets/vault/storage.js
index a09635429..e58a4c447 100644
--- a/website_next/wallets/vault/storage.js
+++ b/website_next/wallets/vault/storage.js
@@ -133,6 +133,19 @@ async function addWallet(wallets, input, pagePassword) {
   };
 }
 
+/**
+ * @param {StoredWallet[]} wallets
+ * @param {string} walletId
+ * @param {string} pagePassword
+ */
+async function deleteWallet(wallets, walletId, pagePassword) {
+  const nextWallets = wallets.filter((wallet) => wallet.id !== walletId);
+
+  await writeWallets(nextWallets, pagePassword);
+
+  return nextWallets;
+}
+
 export const vaultStorage = /** @type {const} */ ({
   has,
   reset,
@@ -140,4 +153,5 @@ export const vaultStorage = /** @type {const} */ ({
   setup,
   load,
   addWallet,
+  deleteWallet,
 });
diff --git a/website_next/wallets/wallet/actions/style.css b/website_next/wallets/wallet/actions/style.css
deleted file mode 100644
index 132b126a5..000000000
--- a/website_next/wallets/wallet/actions/style.css
+++ /dev/null
@@ -1,19 +0,0 @@
-main.wallets {
-  .wallets__wallet-actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.75rem;
-    align-items: end;
-    justify-content: end;
-
-    @media (max-width: 34rem) {
-      justify-content: start;
-    }
-    > button:disabled {
-      border-color: color-mix(in oklch, var(--gray) 35%, transparent);
-      color: var(--gray);
-      background: transparent;
-      cursor: default;
-    }
-  }
-}
diff --git a/website_next/wallets/wallet/address/index.js b/website_next/wallets/wallet/address/index.js
index c447065d1..ccc4ec506 100644
--- a/website_next/wallets/wallet/address/index.js
+++ b/website_next/wallets/wallet/address/index.js
@@ -10,7 +10,7 @@ import { redaction } from "../../redaction/index.js";
  * @param {string} text
  */
 export function createGroupedAddress(text) {
-  const element = createElement("code", "wallets__address");
+  const element = createElement("code", "address");
   const groups = text.match(/.{1,4}/g) ?? [];
 
   for (let groupIndex = 0; groupIndex < groups.length; groupIndex += 1) {
@@ -65,7 +65,7 @@ function createAddressBadge(row) {
  * @param {WalletAddress} row
  */
 export function createAddressCellContent(row) {
-  const element = createElement("div", "wallets__address-cell");
+  const element = createElement("div", "address-cell");
   const anonSet = document.createElement("small");
 
   anonSet.append(`anon set: ${formatNumber(row.historyBucketSize)}`);
diff --git a/website_next/wallets/wallet/address/style.css b/website_next/wallets/wallet/address/style.css
index 4197d0530..0b04f24b4 100644
--- a/website_next/wallets/wallet/address/style.css
+++ b/website_next/wallets/wallet/address/style.css
@@ -1,5 +1,5 @@
 main.wallets {
-  .wallets__address-cell {
+  .address-cell {
     display: grid;
     gap: 0.25rem;
 
@@ -23,7 +23,7 @@ main.wallets {
     }
   }
 
-  .wallets__address {
+  .address {
     display: flex;
     flex-wrap: wrap;
     gap: 0 0.375rem;
diff --git a/website_next/wallets/wallet/addresses/index.js b/website_next/wallets/wallet/addresses/index.js
new file mode 100644
index 000000000..000f9a600
--- /dev/null
+++ b/website_next/wallets/wallet/addresses/index.js
@@ -0,0 +1,64 @@
+import { createBtcAmount } from "../../amount/index.js";
+import { createElement } from "../../dom.js";
+import { formatNumber } from "../../format.js";
+import { createAddressCellContent } from "../address/index.js";
+
+/**
+ * @typedef {import("../../scan/index.js").WalletAddress} WalletAddress
+ * @typedef {import("../../scan/index.js").WalletScan} WalletScan
+ */
+
+/**
+ * @param {WalletAddress} address
+ */
+function createAddressRow(address) {
+  const row = document.createElement("li");
+  const meta = document.createElement("p");
+
+  meta.append(
+    createBtcAmount("span", address.balance),
+    " · ",
+    formatNumber(address.txCount),
+    address.txCount === 1 ? " tx" : " txs",
+  );
+  row.append(createAddressCellContent(address), meta);
+
+  return row;
+}
+
+/**
+ * @param {HTMLElement} panel
+ * @param {readonly WalletAddress[]} addresses
+ */
+function renderAddresses(panel, addresses) {
+  const section = createElement("section", "addresses");
+  const title = document.createElement("h2");
+  const list = document.createElement("ol");
+
+  title.append("Addresses");
+  for (const address of addresses) {
+    list.append(createAddressRow(address));
+  }
+  section.append(title, list);
+  panel.replaceChildren(section);
+}
+
+/**
+ * @param {WalletScan} scan
+ */
+export function createAddressesTab(scan) {
+  const panel = document.createElement("section");
+  let mounted = false;
+
+  return {
+    id: "addresses",
+    label: "Addresses",
+    panel,
+    mount() {
+      if (mounted) return;
+
+      mounted = true;
+      renderAddresses(panel, scan.addresses);
+    },
+  };
+}
diff --git a/website_next/wallets/wallet/addresses/style.css b/website_next/wallets/wallet/addresses/style.css
new file mode 100644
index 000000000..65805ac2b
--- /dev/null
+++ b/website_next/wallets/wallet/addresses/style.css
@@ -0,0 +1,49 @@
+main.wallets {
+  .addresses {
+    display: grid;
+    gap: 1rem;
+
+    :is(h2, p) {
+      margin: 0;
+    }
+
+    h2 {
+      color: var(--white);
+      font-size: var(--font-size-lg);
+      font-weight: 400;
+      line-height: var(--line-height-lg);
+    }
+
+    > ol {
+      display: grid;
+      gap: 0.25rem;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      > li {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto;
+        gap: 1rem;
+        align-items: center;
+        padding: 0.875rem 0;
+        border-bottom: 1px solid color-mix(
+          in oklch,
+          var(--gray) 18%,
+          transparent
+        );
+
+        @media (max-width: 34rem) {
+          grid-template-columns: 1fr;
+        }
+
+        > p {
+          color: var(--gray);
+          font-size: var(--font-size-sm);
+          line-height: var(--line-height-sm);
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}
diff --git a/website_next/wallets/wallet/transactions/history.js b/website_next/wallets/wallet/history/address.js
similarity index 100%
rename from website_next/wallets/wallet/transactions/history.js
rename to website_next/wallets/wallet/history/address.js
diff --git a/website_next/wallets/wallet/transactions/cache.js b/website_next/wallets/wallet/history/cache.js
similarity index 93%
rename from website_next/wallets/wallet/transactions/cache.js
rename to website_next/wallets/wallet/history/cache.js
index 3204b06b3..69366d31a 100644
--- a/website_next/wallets/wallet/transactions/cache.js
+++ b/website_next/wallets/wallet/history/cache.js
@@ -1,4 +1,4 @@
-import { addressHistory } from "./history.js";
+import { addressHistory } from "./address.js";
 import { readWalletTransaction } from "./transaction.js";
 
 /**
@@ -59,6 +59,6 @@ async function load(client, addresses) {
   return [...transactionsById.values()].sort(compareTransactions);
 }
 
-export const transactionCache = /** @type {const} */ ({
+export const historyCache = /** @type {const} */ ({
   load,
 });
diff --git a/website_next/wallets/wallet/history/details.js b/website_next/wallets/wallet/history/details.js
new file mode 100644
index 000000000..eea9fc81a
--- /dev/null
+++ b/website_next/wallets/wallet/history/details.js
@@ -0,0 +1,38 @@
+import { createBtcAmount } from "../../amount/index.js";
+import { redaction } from "../../redaction/index.js";
+import { createAddressCellContent } from "../address/index.js";
+
+/**
+ * @typedef {import("./transaction.js").WalletTransaction} WalletTransaction
+ */
+
+/**
+ * @param {WalletTransaction} transaction
+ */
+export function createTransactionDetails(transaction) {
+  const content = document.createElement("section");
+  const txid = document.createElement("code");
+  const meta = document.createElement("p");
+  const list = document.createElement("ul");
+
+  redaction.setTitle(txid, transaction.txid);
+  redaction.setValue(txid, transaction.txid);
+  meta.append(
+    transaction.status,
+    " · ",
+    createBtcAmount("span", transaction.amount, { signed: true }),
+    " · fee ",
+    createBtcAmount("span", transaction.fee),
+  );
+
+  for (const address of transaction.addresses) {
+    const item = document.createElement("li");
+
+    item.append(createAddressCellContent(address.walletAddress));
+    list.append(item);
+  }
+
+  content.append(txid, meta, list);
+
+  return content;
+}
diff --git a/website_next/wallets/wallet/history/index.js b/website_next/wallets/wallet/history/index.js
new file mode 100644
index 000000000..a4adf8330
--- /dev/null
+++ b/website_next/wallets/wallet/history/index.js
@@ -0,0 +1,82 @@
+import { createElement } from "../../dom.js";
+import { historyCache } from "./cache.js";
+import { createTransactionSection } from "./section.js";
+
+/**
+ * @typedef {import("./transaction.js").WalletTransaction} WalletTransaction
+ * @typedef {import("../../scan/index.js").WalletScan} WalletScan
+ * @typedef {Parameters<typeof historyCache.load>[0]} HistoryClient
+ */
+
+/**
+ * @param {readonly WalletTransaction[]} transactions
+ */
+function groupTransactionsByDate(transactions) {
+  const groups = /** @type {Map<string, WalletTransaction[]>} */ (new Map());
+
+  for (const transaction of transactions) {
+    const group = groups.get(transaction.date) ?? [];
+
+    group.push(transaction);
+    groups.set(transaction.date, group);
+  }
+
+  return groups;
+}
+
+/**
+ * @param {HTMLElement} element
+ * @param {readonly WalletTransaction[]} transactions
+ */
+function renderHistory(element, transactions) {
+  const activity = createElement("section", "activity");
+  const title = document.createElement("h2");
+  const groups = groupTransactionsByDate(transactions);
+
+  title.append("History");
+  activity.append(title);
+
+  if (transactions.length === 0) {
+    const empty = document.createElement("p");
+
+    empty.append("No activity yet");
+    activity.append(empty);
+    element.replaceChildren(activity);
+    return;
+  }
+
+  for (const [date, group] of groups) {
+    activity.append(createTransactionSection(date, group));
+  }
+
+  element.replaceChildren(activity);
+}
+
+/**
+ * @param {WalletScan} scan
+ * @param {HistoryClient} client
+ */
+export function createHistoryTab(scan, client) {
+  const panel = document.createElement("section");
+  let loaded = false;
+
+  return {
+    id: "history",
+    label: "History",
+    panel,
+    mount() {
+      if (loaded) return;
+
+      loaded = true;
+      panel.replaceChildren("Loading history");
+      void historyCache.load(client, scan.addresses).then(
+        (transactions) => {
+          renderHistory(panel, transactions);
+        },
+        () => {
+          panel.replaceChildren("History unavailable");
+        },
+      );
+    },
+  };
+}
diff --git a/website_next/wallets/wallet/history/row.js b/website_next/wallets/wallet/history/row.js
new file mode 100644
index 000000000..23d25271c
--- /dev/null
+++ b/website_next/wallets/wallet/history/row.js
@@ -0,0 +1,79 @@
+import { createBtcAmount } from "../../amount/index.js";
+import { redaction } from "../../redaction/index.js";
+import { createTransactionDetails } from "./details.js";
+
+/**
+ * @typedef {import("./transaction.js").WalletTransaction} WalletTransaction
+ */
+
+const typeLabels = /** @type {const} */ ({
+  receive: "Received",
+  send: "Sent",
+  consolidation: "Consolidated",
+});
+
+/**
+ * @param {string} txid
+ */
+function formatTxid(txid) {
+  return txid.length > 16 ? `${txid.slice(0, 8)}...${txid.slice(-8)}` : txid;
+}
+
+/**
+ * @param {HTMLElement} element
+ * @param {WalletTransaction} transaction
+ */
+function appendTransactionDetail(element, transaction) {
+  if (transaction.type === "consolidation") {
+    element.append(
+      `${transaction.addresses.length} wallet addresses · fee only`,
+    );
+    return;
+  }
+
+  if (transaction.type === "send") {
+    element.append(
+      "to external wallet · fee ",
+      createBtcAmount("span", transaction.fee),
+    );
+    return;
+  }
+
+  element.append(transaction.status);
+}
+
+/**
+ * @param {WalletTransaction} transaction
+ */
+export function createTransactionRow(transaction) {
+  const row = document.createElement("li");
+  const details = document.createElement("details");
+  const summary = document.createElement("summary");
+  const main = document.createElement("header");
+  const label = document.createElement("strong");
+  const amount = createBtcAmount(
+    "span",
+    transaction.amount,
+    { signed: true },
+  );
+  const detail = document.createElement("p");
+  const txid = document.createElement("code");
+
+  label.append(typeLabels[transaction.type]);
+  if (transaction.amount > 0) {
+    amount.classList.add("positive");
+  }
+  if (transaction.amount < 0) {
+    amount.classList.add("negative");
+  }
+  redaction.setTitle(txid, transaction.txid);
+  redaction.setValue(txid, formatTxid(transaction.txid));
+  appendTransactionDetail(detail, transaction);
+  detail.append(" · ", txid);
+  main.append(label, amount);
+  summary.append(main, detail);
+  details.append(summary, createTransactionDetails(transaction));
+  row.append(details);
+
+  return row;
+}
diff --git a/website_next/wallets/wallet/history/section.js b/website_next/wallets/wallet/history/section.js
new file mode 100644
index 000000000..03df0f440
--- /dev/null
+++ b/website_next/wallets/wallet/history/section.js
@@ -0,0 +1,24 @@
+import { redaction } from "../../redaction/index.js";
+import { createTransactionRow } from "./row.js";
+
+/**
+ * @typedef {import("./transaction.js").WalletTransaction} WalletTransaction
+ */
+
+/**
+ * @param {string} date
+ * @param {readonly WalletTransaction[]} transactions
+ */
+export function createTransactionSection(date, transactions) {
+  const section = document.createElement("section");
+  const heading = document.createElement("h3");
+  const list = document.createElement("ol");
+
+  heading.append(redaction.createValue("span", date, "fixed"));
+  for (const transaction of transactions) {
+    list.append(createTransactionRow(transaction));
+  }
+  section.append(heading, list);
+
+  return section;
+}
diff --git a/website_next/wallets/wallet/history/style.css b/website_next/wallets/wallet/history/style.css
new file mode 100644
index 000000000..3e594c415
--- /dev/null
+++ b/website_next/wallets/wallet/history/style.css
@@ -0,0 +1,124 @@
+main.wallets {
+  .activity {
+    display: grid;
+    gap: 1.25rem;
+
+    :is(h2, h3, p) {
+      margin: 0;
+    }
+
+    h2 {
+      color: var(--white);
+      font-size: var(--font-size-lg);
+      font-weight: 400;
+      line-height: var(--line-height-lg);
+    }
+
+    h3 {
+      color: var(--gray);
+      font-size: var(--font-size-xs);
+      font-weight: 400;
+      line-height: var(--line-height-xs);
+      text-transform: uppercase;
+    }
+
+    > section {
+      display: grid;
+      gap: 0.5rem;
+
+      > ol {
+        display: grid;
+        gap: 0.25rem;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        > li {
+          border-bottom: 1px solid color-mix(
+            in oklch,
+            var(--gray) 18%,
+            transparent
+          );
+
+          > details {
+            &[open] {
+              display: grid;
+              gap: 0.75rem;
+            }
+
+            > summary {
+              display: grid;
+              gap: 0.25rem;
+              padding: 0.875rem 0;
+              list-style: none;
+              cursor: pointer;
+
+              &::marker,
+              &::-webkit-details-marker {
+                display: none;
+                content: "";
+              }
+
+              > header {
+                display: flex;
+                gap: 1rem;
+                align-items: baseline;
+                justify-content: space-between;
+                min-width: 0;
+
+                strong {
+                  color: var(--white);
+                  font-weight: 500;
+                }
+
+                > span {
+                  color: var(--white);
+                  white-space: nowrap;
+
+                  &.positive {
+                    color: var(--green);
+                  }
+
+                  &.negative {
+                    color: var(--red);
+                  }
+                }
+              }
+
+              > p {
+                min-width: 0;
+                color: var(--gray);
+                font-size: var(--font-size-sm);
+                line-height: var(--line-height-sm);
+
+                code {
+                  color: inherit;
+                  font-family: inherit;
+                }
+              }
+            }
+
+            > section {
+              display: grid;
+              gap: 1rem;
+
+              code {
+                overflow-wrap: anywhere;
+                color: var(--white);
+                font-family: inherit;
+              }
+
+              > ul {
+                display: grid;
+                gap: 0.75rem;
+                margin: 0;
+                padding: 0;
+                list-style: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/website_next/wallets/wallet/transactions/transaction.js b/website_next/wallets/wallet/history/transaction.js
similarity index 100%
rename from website_next/wallets/wallet/transactions/transaction.js
rename to website_next/wallets/wallet/history/transaction.js
diff --git a/website_next/wallets/wallet/holdings/cache.js b/website_next/wallets/wallet/holdings/cache.js
new file mode 100644
index 000000000..0d8c3ecb9
--- /dev/null
+++ b/website_next/wallets/wallet/holdings/cache.js
@@ -0,0 +1,109 @@
+import { mapConcurrent } from "../../concurrent.js";
+
+const UTXO_CONCURRENCY = 4;
+
+const utxosByBucketKey =
+  /** @type {Map<string, Promise<Map<string, unknown[]>>>} */ (new Map());
+
+/**
+ * @typedef {import("../../scan/index.js").WalletAddress} WalletAddress
+ */
+
+/**
+ * @typedef {Object} UtxoClient
+ * @property {(address: string, options?: { cache?: boolean }) => Promise<unknown>} getAddressUtxos
+ */
+
+/**
+ * @typedef {Object} AddressUtxos
+ * @property {unknown[]} utxos
+ */
+
+/**
+ * @param {unknown} error
+ */
+function isNotFound(error) {
+  return (
+    error instanceof Error &&
+    /** @type {{ status?: unknown }} */ (error).status === 404
+  );
+}
+
+/**
+ * @param {readonly string[]} addresses
+ */
+function createBucketKey(addresses) {
+  return [...addresses].sort().join("\n");
+}
+
+/**
+ * @param {UtxoClient} client
+ * @param {string} address
+ */
+async function fetchAddressUtxos(client, address) {
+  try {
+    return /** @type {unknown[]} */ (
+      await client.getAddressUtxos(address, { cache: false })
+    );
+  } catch (error) {
+    if (isNotFound(error)) return [];
+
+    throw error;
+  }
+}
+
+/**
+ * @param {UtxoClient} client
+ * @param {readonly string[]} addresses
+ * @returns {Promise<Map<string, unknown[]>>}
+ */
+async function fetchBucketUtxos(client, addresses) {
+  const entries = await mapConcurrent(
+    addresses,
+    UTXO_CONCURRENCY,
+    async (address) => {
+      return /** @type {const} */ ([
+        address,
+        await fetchAddressUtxos(client, address),
+      ]);
+    },
+  );
+
+  return new Map(entries);
+}
+
+/**
+ * @param {UtxoClient} client
+ * @param {WalletAddress} address
+ * @returns {Promise<AddressUtxos>}
+ */
+async function load(client, address) {
+  if (address.balance <= 0 || address.historyAddresses.length === 0) {
+    return {
+      utxos: [],
+    };
+  }
+
+  const key = createBucketKey(address.historyAddresses);
+  let utxos = utxosByBucketKey.get(key);
+
+  if (!utxos) {
+    utxos = fetchBucketUtxos(client, address.historyAddresses).catch(
+      (error) => {
+        utxosByBucketKey.delete(key);
+        throw error;
+      },
+    );
+    utxosByBucketKey.set(key, utxos);
+  }
+
+  const bucketUtxos = await utxos;
+
+  return {
+    utxos: bucketUtxos.get(address.address) ?? [],
+  };
+}
+
+export const utxoCache = /** @type {const} */ ({
+  load,
+});
diff --git a/website_next/wallets/wallet/holdings/index.js b/website_next/wallets/wallet/holdings/index.js
new file mode 100644
index 000000000..dcc451295
--- /dev/null
+++ b/website_next/wallets/wallet/holdings/index.js
@@ -0,0 +1,129 @@
+import { createBtcAmount } from "../../amount/index.js";
+import { createElement } from "../../dom.js";
+import { redaction } from "../../redaction/index.js";
+import { createAddressCellContent } from "../address/index.js";
+import { utxoCache } from "./cache.js";
+import { readWalletUtxo } from "./utxo.js";
+
+/**
+ * @typedef {import("../../scan/index.js").WalletAddress} WalletAddress
+ * @typedef {import("../../scan/index.js").WalletScan} WalletScan
+ * @typedef {import("./utxo.js").WalletUtxo} WalletUtxo
+ * @typedef {Parameters<typeof utxoCache.load>[0]} UtxoClient
+ */
+
+/**
+ * @param {string} txid
+ */
+function formatTxid(txid) {
+  return txid.length > 16 ? `${txid.slice(0, 8)}...${txid.slice(-8)}` : txid;
+}
+
+/**
+ * @param {WalletUtxo} utxo
+ */
+function createUtxoRow(utxo) {
+  const row = document.createElement("li");
+  const main = document.createElement("header");
+  const label = document.createElement("strong");
+  const amount = createBtcAmount("span", utxo.value);
+  const detail = document.createElement("p");
+  const outpoint = document.createElement("code");
+
+  redaction.setTitle(outpoint, `${utxo.txid}:${utxo.vout}`);
+  redaction.setValue(outpoint, `${formatTxid(utxo.txid)}:${utxo.vout}`);
+  label.append(utxo.confirmed ? "Confirmed" : "Mempool");
+  detail.append(outpoint);
+  row.append(main, detail, createAddressCellContent(utxo.address));
+  main.append(label, amount);
+
+  return row;
+}
+
+/**
+ * @param {WalletUtxo} a
+ * @param {WalletUtxo} b
+ */
+function compareUtxos(a, b) {
+  return b.value - a.value || a.txid.localeCompare(b.txid) || a.vout - b.vout;
+}
+
+/**
+ * @param {UtxoClient} client
+ * @param {readonly WalletAddress[]} addresses
+ */
+async function loadWalletUtxos(client, addresses) {
+  const utxos = /** @type {WalletUtxo[]} */ ([]);
+
+  for (const address of addresses) {
+    const loaded = await utxoCache.load(client, address);
+
+    for (const utxo of loaded.utxos) {
+      const walletUtxo = readWalletUtxo(address, utxo);
+
+      if (walletUtxo) {
+        utxos.push(walletUtxo);
+      }
+    }
+  }
+
+  return utxos.sort(compareUtxos);
+}
+
+/**
+ * @param {HTMLElement} panel
+ * @param {readonly WalletUtxo[]} utxos
+ */
+function renderHoldings(panel, utxos) {
+  const section = createElement("section", "holdings");
+  const title = document.createElement("h2");
+  const list = document.createElement("ol");
+
+  title.append("Holdings");
+  section.append(title);
+
+  if (utxos.length === 0) {
+    const empty = document.createElement("p");
+
+    empty.append("No UTXOs");
+    section.append(empty);
+    panel.replaceChildren(section);
+    return;
+  }
+
+  for (const utxo of utxos) {
+    list.append(createUtxoRow(utxo));
+  }
+
+  section.append(list);
+  panel.replaceChildren(section);
+}
+
+/**
+ * @param {WalletScan} scan
+ * @param {UtxoClient} client
+ */
+export function createHoldingsTab(scan, client) {
+  const panel = document.createElement("section");
+  let loaded = false;
+
+  return {
+    id: "holdings",
+    label: "Holdings",
+    panel,
+    mount() {
+      if (loaded) return;
+
+      loaded = true;
+      panel.replaceChildren("Loading holdings");
+      void loadWalletUtxos(client, scan.addresses).then(
+        (utxos) => {
+          renderHoldings(panel, utxos);
+        },
+        () => {
+          panel.replaceChildren("Holdings unavailable");
+        },
+      );
+    },
+  };
+}
diff --git a/website_next/wallets/wallet/holdings/style.css b/website_next/wallets/wallet/holdings/style.css
new file mode 100644
index 000000000..1d3176e5f
--- /dev/null
+++ b/website_next/wallets/wallet/holdings/style.css
@@ -0,0 +1,77 @@
+main.wallets {
+  .holdings {
+    display: grid;
+    gap: 1rem;
+
+    :is(h2, p) {
+      margin: 0;
+    }
+
+    h2 {
+      color: var(--white);
+      font-size: var(--font-size-lg);
+      font-weight: 400;
+      line-height: var(--line-height-lg);
+    }
+
+    > p {
+      color: var(--gray);
+      font-size: var(--font-size-sm);
+      line-height: var(--line-height-sm);
+    }
+
+    > ol {
+      display: grid;
+      gap: 0.25rem;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      > li {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto;
+        gap: 0.25rem 1rem;
+        align-items: center;
+        padding: 0.875rem 0;
+        border-bottom: 1px solid color-mix(
+          in oklch,
+          var(--gray) 18%,
+          transparent
+        );
+
+        @media (max-width: 34rem) {
+          grid-template-columns: 1fr;
+        }
+
+        > header {
+          display: flex;
+          gap: 1rem;
+          align-items: baseline;
+          justify-content: space-between;
+          min-width: 0;
+
+          strong {
+            color: var(--white);
+            font-weight: 500;
+          }
+        }
+
+        > p {
+          min-width: 0;
+          color: var(--gray);
+          font-size: var(--font-size-sm);
+          line-height: var(--line-height-sm);
+
+          code {
+            color: inherit;
+            font-family: inherit;
+          }
+        }
+
+        > .address-cell {
+          grid-column: 1 / -1;
+        }
+      }
+    }
+  }
+}
diff --git a/website_next/wallets/wallet/holdings/utxo.js b/website_next/wallets/wallet/holdings/utxo.js
new file mode 100644
index 000000000..a71fe1dea
--- /dev/null
+++ b/website_next/wallets/wallet/holdings/utxo.js
@@ -0,0 +1,65 @@
+/**
+ * @typedef {import("../../scan/index.js").WalletAddress} WalletAddress
+ *
+ * @typedef {Object} WalletUtxo
+ * @property {WalletAddress} address
+ * @property {string} txid
+ * @property {number} vout
+ * @property {number} value
+ * @property {boolean} confirmed
+ */
+
+/**
+ * @param {unknown} value
+ */
+function readObject(value) {
+  return value && typeof value === "object"
+    ? /** @type {Record<string, unknown>} */ (value)
+    : undefined;
+}
+
+/**
+ * @param {unknown} value
+ */
+function readNumber(value) {
+  return typeof value === "number" && Number.isFinite(value)
+    ? value
+    : undefined;
+}
+
+/**
+ * @param {unknown} value
+ */
+function readString(value) {
+  return typeof value === "string" ? value : undefined;
+}
+
+/**
+ * @param {unknown} utxo
+ */
+function isConfirmed(utxo) {
+  return readObject(readObject(utxo)?.status)?.confirmed === true;
+}
+
+/**
+ * @param {WalletAddress} address
+ * @param {unknown} utxo
+ * @returns {WalletUtxo | undefined}
+ */
+export function readWalletUtxo(address, utxo) {
+  const txid = readString(readObject(utxo)?.txid);
+  const vout = readNumber(readObject(utxo)?.vout);
+  const value = readNumber(readObject(utxo)?.value);
+
+  if (txid === undefined || vout === undefined || value === undefined) {
+    return undefined;
+  }
+
+  return {
+    address,
+    txid,
+    vout,
+    value,
+    confirmed: isConfirmed(utxo),
+  };
+}
diff --git a/website_next/wallets/wallet/index.js b/website_next/wallets/wallet/index.js
index d1648da3b..65fab8132 100644
--- a/website_next/wallets/wallet/index.js
+++ b/website_next/wallets/wallet/index.js
@@ -1,15 +1,16 @@
 import { createElement } from "../dom.js";
+import { createAddressesTab } from "./addresses/index.js";
+import { createHistoryTab } from "./history/index.js";
+import { createHoldingsTab } from "./holdings/index.js";
 import { renderReceiveButton } from "./receive/index.js";
 import { renderWalletSummary } from "./summary/index.js";
-import { transactionCache } from "./transactions/cache.js";
-import { renderTransactions } from "./transactions/index.js";
+import { createWalletTabs } from "./tabs/index.js";
 
 /**
  * @typedef {import("../scan/index.js").WalletScan} WalletScan
- * @typedef {Parameters<typeof transactionCache.load>[0]} TransactionClient
+ * @typedef {Parameters<typeof createHistoryTab>[1] & Parameters<typeof createHoldingsTab>[1]} WalletClient
  *
  * @typedef {Object} WalletPanel
- * @property {HTMLElement} actions
  * @property {HTMLElement} summary
  * @property {HTMLElement} status
  * @property {HTMLElement} results
@@ -20,40 +21,32 @@ import { renderTransactions } from "./transactions/index.js";
  * @returns {WalletPanel}
  */
 export function createWalletPanel() {
-  const actions = createElement("section", "wallets__wallet-actions");
-  const summary = createElement("section", "wallets__summary");
+  const summary = createElement("section", "summary");
   const status = document.createElement("output");
-  const results = createElement("section", "wallets__results");
+  const results = createElement("section", "results");
 
-  actions.setAttribute("aria-label", "Wallet actions");
   summary.setAttribute("aria-label", "Wallets summary");
   results.setAttribute("aria-label", "Wallets results");
 
   return {
-    actions,
     summary,
     status,
     results,
-    nodes: [actions, summary, status, results],
+    nodes: [summary, status, results],
   };
 }
 
 /**
  * @param {WalletScan} scan
  * @param {WalletPanel} panel
- * @param {TransactionClient} client
+ * @param {WalletClient} client
  */
 export function renderWalletPanel(scan, panel, client) {
   renderWalletSummary(panel.summary, scan.addresses, scan.btcUsdPrice);
-  renderReceiveButton(panel.actions, scan.receiveAddress);
-  panel.results.replaceChildren("Loading activity");
-  void transactionCache.load(client, scan.addresses).then((transactions) => {
-    if (panel.results.isConnected) {
-      renderTransactions(panel.results, transactions);
-    }
-  }, () => {
-    if (panel.results.isConnected) {
-      panel.results.replaceChildren("Activity unavailable");
-    }
-  });
+  renderReceiveButton(panel.summary, scan.receiveAddress);
+  panel.results.replaceChildren(createWalletTabs([
+    createHistoryTab(scan, client),
+    createHoldingsTab(scan, client),
+    createAddressesTab(scan),
+  ]));
 }
diff --git a/website_next/wallets/wallet/receive/style.css b/website_next/wallets/wallet/receive/style.css
index a12b40e74..9ae6bbaf9 100644
--- a/website_next/wallets/wallet/receive/style.css
+++ b/website_next/wallets/wallet/receive/style.css
@@ -24,7 +24,6 @@ main.wallets {
 
       > p {
         margin: 0;
-        color: var(--black);
         font-size: var(--font-size-sm);
         line-height: var(--line-height-sm);
       }
diff --git a/website_next/wallets/wallet/summary/style.css b/website_next/wallets/wallet/summary/style.css
index 978135dd5..db2fce315 100644
--- a/website_next/wallets/wallet/summary/style.css
+++ b/website_next/wallets/wallet/summary/style.css
@@ -1,7 +1,20 @@
 main.wallets {
-  .wallets__summary {
+  .summary {
+    display: flex;
+    gap: 1rem;
+    align-items: end;
+    justify-content: space-between;
     min-height: 5rem;
 
+    @media (max-width: 34rem) {
+      display: grid;
+      justify-items: start;
+    }
+
+    :is(h1, h2, h3, h4, h5, h6) {
+      font-family: var(--font-mono);
+    }
+
     > p {
       display: grid;
       gap: 0.5rem;
@@ -11,7 +24,6 @@ main.wallets {
         min-width: 0;
         overflow-wrap: anywhere;
         color: var(--white);
-        font-family: var(--font-serif);
         font-size: 4rem;
         font-weight: 400;
         line-height: 1;
@@ -23,5 +35,9 @@ main.wallets {
         line-height: var(--line-height-lg);
       }
     }
+
+    > button {
+      flex: 0 0 auto;
+    }
   }
 }
diff --git a/website_next/wallets/wallet/tabs/index.js b/website_next/wallets/wallet/tabs/index.js
new file mode 100644
index 000000000..5a34a90cf
--- /dev/null
+++ b/website_next/wallets/wallet/tabs/index.js
@@ -0,0 +1,78 @@
+import { createElement } from "../../dom.js";
+
+/**
+ * @typedef {Object} WalletTab
+ * @property {string} id
+ * @property {string} label
+ * @property {HTMLElement} panel
+ * @property {() => void} mount
+ */
+
+/**
+ * @param {WalletTab} tab
+ */
+function createTabButton(tab) {
+  const button = document.createElement("button");
+
+  button.type = "button";
+  button.role = "tab";
+  button.id = `wallet-tab-${tab.id}`;
+  button.setAttribute("aria-controls", `wallet-panel-${tab.id}`);
+  button.append(tab.label);
+
+  return button;
+}
+
+/**
+ * @param {WalletTab} tab
+ */
+function setupTabPanel(tab) {
+  tab.panel.id = `wallet-panel-${tab.id}`;
+  tab.panel.role = "tabpanel";
+  tab.panel.setAttribute("aria-labelledby", `wallet-tab-${tab.id}`);
+}
+
+/**
+ * @param {readonly WalletTab[]} tabs
+ */
+export function createWalletTabs(tabs) {
+  const element = createElement("section", "tabs");
+  const nav = document.createElement("nav");
+  const panels = document.createElement("div");
+  const buttons = tabs.map(createTabButton);
+
+  nav.setAttribute("aria-label", "Wallet sections");
+  nav.role = "tablist";
+  panels.append(...tabs.map((tab) => {
+    setupTabPanel(tab);
+
+    return tab.panel;
+  }));
+  nav.append(...buttons);
+  element.append(nav, panels);
+
+  /**
+   * @param {number} selectedIndex
+   */
+  function select(selectedIndex) {
+    for (let index = 0; index < tabs.length; index += 1) {
+      const selected = index === selectedIndex;
+
+      buttons[index].setAttribute("aria-selected", String(selected));
+      buttons[index].tabIndex = selected ? 0 : -1;
+      tabs[index].panel.hidden = !selected;
+    }
+
+    tabs[selectedIndex].mount();
+  }
+
+  for (let index = 0; index < buttons.length; index += 1) {
+    buttons[index].addEventListener("click", () => {
+      select(index);
+    });
+  }
+
+  select(0);
+
+  return element;
+}
diff --git a/website_next/wallets/wallet/tabs/style.css b/website_next/wallets/wallet/tabs/style.css
new file mode 100644
index 000000000..44c1182c5
--- /dev/null
+++ b/website_next/wallets/wallet/tabs/style.css
@@ -0,0 +1,32 @@
+main.wallets {
+  .tabs {
+    display: grid;
+    gap: 1rem;
+    min-width: 0;
+
+    :is(h1, h2, h3, h4, h5, h6) {
+      font-family: var(--font-mono);
+    }
+
+    > nav {
+      display: flex;
+      gap: 0.5rem;
+      overflow-x: auto;
+      scroll-snap-type: x mandatory;
+
+      > button {
+        flex: 0 0 auto;
+        scroll-snap-align: start;
+
+        &[aria-selected="true"] {
+          color: var(--black);
+          background: var(--white);
+        }
+      }
+    }
+
+    > div {
+      min-width: 0;
+    }
+  }
+}
diff --git a/website_next/wallets/wallet/transactions/index.js b/website_next/wallets/wallet/transactions/index.js
deleted file mode 100644
index 3fad84b60..000000000
--- a/website_next/wallets/wallet/transactions/index.js
+++ /dev/null
@@ -1,162 +0,0 @@
-import { createElement } from "../../dom.js";
-import { createBtcAmount } from "../../amount/index.js";
-import { redaction } from "../../redaction/index.js";
-import { createAddressCellContent } from "../address/index.js";
-
-/**
- * @typedef {import("./transaction.js").WalletTransaction} WalletTransaction
- */
-
-const typeLabels = /** @type {const} */ ({
-  receive: "Received",
-  send: "Sent",
-  consolidation: "Consolidated",
-});
-
-/**
- * @param {string} txid
- */
-function formatTxid(txid) {
-  return txid.length > 16 ? `${txid.slice(0, 8)}...${txid.slice(-8)}` : txid;
-}
-
-/**
- * @param {HTMLElement} element
- * @param {WalletTransaction} transaction
- */
-function appendTransactionDetail(element, transaction) {
-  if (transaction.type === "consolidation") {
-    element.append(
-      `${transaction.addresses.length} wallet addresses · fee only`,
-    );
-    return;
-  }
-
-  if (transaction.type === "send") {
-    element.append(
-      "to external wallet · fee ",
-      createBtcAmount("span", transaction.fee),
-    );
-    return;
-  }
-
-  element.append(transaction.status);
-}
-
-/**
- * @param {WalletTransaction} transaction
- */
-function createTransactionDetails(transaction) {
-  const content = document.createElement("section");
-  const txid = document.createElement("code");
-  const meta = document.createElement("p");
-  const list = document.createElement("ul");
-
-  redaction.setTitle(txid, transaction.txid);
-  redaction.setValue(txid, transaction.txid);
-  meta.append(
-    transaction.status,
-    " · ",
-    createBtcAmount("span", transaction.amount, { signed: true }),
-    " · fee ",
-    createBtcAmount("span", transaction.fee),
-  );
-  for (const address of transaction.addresses) {
-    const item = document.createElement("li");
-
-    item.append(createAddressCellContent(address.walletAddress));
-    list.append(item);
-  }
-  content.append(txid, meta, list);
-
-  return content;
-}
-
-/**
- * @param {WalletTransaction} transaction
- */
-function createTransactionRow(transaction) {
-  const row = document.createElement("li");
-  const main = document.createElement("header");
-  const label = document.createElement("strong");
-  const amount = createBtcAmount(
-    "span",
-    transaction.amount,
-    { signed: true },
-  );
-  const detail = document.createElement("p");
-  const txid = document.createElement("code");
-  const details = document.createElement("details");
-  const summary = document.createElement("summary");
-
-  label.append(typeLabels[transaction.type]);
-  if (transaction.amount > 0) {
-    amount.classList.add("positive");
-  }
-  if (transaction.amount < 0) {
-    amount.classList.add("negative");
-  }
-  redaction.setTitle(txid, transaction.txid);
-  redaction.setValue(txid, formatTxid(transaction.txid));
-  summary.append("Details");
-  appendTransactionDetail(detail, transaction);
-  detail.append(" · ", txid);
-  details.append(summary, createTransactionDetails(transaction));
-  main.append(label, amount);
-  row.append(main, detail, details);
-
-  return row;
-}
-
-/**
- * @param {readonly WalletTransaction[]} transactions
- */
-function groupTransactionsByDate(transactions) {
-  const groups = /** @type {Map<string, WalletTransaction[]>} */ (new Map());
-
-  for (const transaction of transactions) {
-    const group = groups.get(transaction.date) ?? [];
-
-    group.push(transaction);
-    groups.set(transaction.date, group);
-  }
-
-  return groups;
-}
-
-/**
- * @param {HTMLElement} element
- * @param {readonly WalletTransaction[]} transactions
- */
-export function renderTransactions(element, transactions) {
-  const activity = createElement("section", "wallets__activity");
-  const title = document.createElement("h2");
-  const groups = groupTransactionsByDate(transactions);
-
-  title.append("Activity");
-  activity.append(title);
-
-  if (transactions.length === 0) {
-    const empty = document.createElement("p");
-
-    empty.append("No activity yet");
-    activity.append(empty);
-    element.replaceChildren(activity);
-    return;
-  }
-
-  for (const [date, group] of groups) {
-    const section = document.createElement("section");
-    const heading = document.createElement("h3");
-    const list = document.createElement("ol");
-
-    heading.append(redaction.createValue("span", date, "fixed"));
-    for (const transaction of group) {
-      list.append(createTransactionRow(transaction));
-    }
-    section.append(heading, list);
-    activity.append(section);
-  }
-
-  element.replaceChildren(activity);
-}
diff --git a/website_next/wallets/wallet/transactions/style.css b/website_next/wallets/wallet/transactions/style.css
deleted file mode 100644
index ac2970e83..000000000
--- a/website_next/wallets/wallet/transactions/style.css
+++ /dev/null
@@ -1,161 +0,0 @@
-main.wallets {
-  .wallets__results {
-    display: grid;
-    gap: 1rem;
-    min-width: 0;
-  }
-
-  .wallets__activity {
-    display: grid;
-    gap: 1.25rem;
-
-    :is(h2, h3, p) {
-      margin: 0;
-    }
-
-    h2 {
-      color: var(--white);
-      font-size: var(--font-size-lg);
-      font-weight: 400;
-      line-height: var(--line-height-lg);
-    }
-
-    h3 {
-      color: var(--gray);
-      font-size: var(--font-size-xs);
-      font-weight: 400;
-      line-height: var(--line-height-xs);
-      text-transform: uppercase;
-    }
-
-    > section {
-      display: grid;
-      gap: 0.5rem;
-
-      > ol {
-        display: grid;
-        gap: 0.25rem;
-        margin: 0;
-        padding: 0;
-        list-style: none;
-
-        > li {
-          display: grid;
-          grid-template-columns: minmax(0, 1fr) auto;
-          gap: 0.25rem 1rem;
-          align-items: center;
-          padding: 0.875rem 0;
-          border-bottom: 1px solid color-mix(
-            in oklch,
-            var(--gray) 18%,
-            transparent
-          );
-
-          @media (max-width: 34rem) {
-            grid-template-columns: 1fr;
-          }
-
-          > header {
-            display: flex;
-            gap: 1rem;
-            align-items: baseline;
-            justify-content: space-between;
-            min-width: 0;
-
-            strong {
-              color: var(--white);
-              font-weight: 500;
-            }
-
-            > span {
-              color: var(--white);
-              white-space: nowrap;
-
-              &.positive {
-                color: var(--green);
-              }
-
-              &.negative {
-                color: var(--red);
-              }
-            }
-          }
-
-          > p {
-            grid-column: 1;
-            min-width: 0;
-            color: var(--gray);
-            font-size: var(--font-size-sm);
-            line-height: var(--line-height-sm);
-
-            code {
-              color: inherit;
-              font-family: inherit;
-            }
-          }
-
-          > details {
-            grid-column: 2;
-            grid-row: 1 / span 2;
-
-            @media (max-width: 34rem) {
-              grid-column: 1;
-              grid-row: auto;
-              justify-self: start;
-            }
-
-            &[open] {
-              display: grid;
-              grid-column: 1 / -1;
-              grid-row: auto;
-              gap: 0.75rem;
-            }
-
-            > summary {
-              display: grid;
-              place-items: center;
-              height: 2rem;
-              border: 1px solid color-mix(
-                in oklch,
-                var(--gray) 45%,
-                transparent
-              );
-              border-radius: 0.375rem;
-              padding-inline: 0.625rem;
-              color: var(--white);
-              background: transparent;
-              line-height: 1;
-              list-style: none;
-              cursor: pointer;
-
-              &::marker,
-              &::-webkit-details-marker {
-                display: none;
-                content: "";
-              }
-            }
-
-            > section {
-              display: grid;
-              gap: 1rem;
-
-              code {
-                overflow-wrap: anywhere;
-                color: var(--white);
-                font-family: inherit;
-              }
-
-              > ul {
-                display: grid;
-                gap: 0.75rem;
-                margin: 0;
-                padding: 0;
-                list-style: none;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}