diff --git a/src/lib/components/dashboard/AccountBox.svelte b/src/lib/components/dashboard/AccountBox.svelte
deleted file mode 100644
index 3b89b04..0000000
--- a/src/lib/components/dashboard/AccountBox.svelte
+++ /dev/null
@@ -1,188 +0,0 @@
-<script lang="ts">
-  import ChevronDown from "@lucide/svelte/icons/chevron-down";
-  import { createQuery, keepPreviousData } from "@tanstack/svelte-query";
-  import { DropdownMenu } from "bits-ui";
-  import { api } from "#lib/api/client.js";
-  import type {
-    Account,
-    Item,
-    Page,
-    TransactionGroup,
-  } from "#lib/api/types.js";
-  import Amount from "#lib/components/Amount.svelte";
-  import {
-    canReconcile,
-    createUrl,
-    editUrl,
-    go,
-    openOld,
-    reconcileUrl,
-    showUrl,
-  } from "#lib/components/accounts/links.js";
-  import Box from "#lib/components/Box.svelte";
-  import Sparkline from "#lib/components/charts/Sparkline.svelte";
-  import { span } from "#lib/components/dashboard/data.js";
-  import DropdownMenuContent from "#lib/components/ui/dropdown-menu/dropdown-menu-content.svelte";
-  import DropdownMenuItem from "#lib/components/ui/dropdown-menu/dropdown-menu-item.svelte";
-  import { contains } from "#lib/dates.js";
-  import { formatDate, formatMoney, toNumber } from "#lib/format.js";
-  import { period } from "#lib/period.svelte.js";
-  import {
-    groupTitle,
-    signedAmount,
-    signedForeign,
-  } from "#lib/transactions/split.js";
-
-  const LIMIT = 10;
-  const TRIGGER =
-    "cladd-surface cladd-gradient cladd-outline cladd-hoverable inline-flex h-cladd-sm items-center gap-1 rounded-cladd-sm px-2.5 font-semibold text-[12px]";
-
-  let {
-    account,
-    trend = [],
-    marker = -1,
-  }: { account: Item<Account>; trend?: number[]; marker?: number } = $props();
-
-  const a = $derived(account.attributes);
-  const cur = $derived({
-    code: a.currency_code,
-    decimals: a.currency_decimal_places,
-    symbol: a.currency_symbol,
-  });
-
-  const list = createQuery(() => ({
-    placeholderData: keepPreviousData,
-    queryFn: () =>
-      api<Page<TransactionGroup>>(`/v1/accounts/${account.id}/transactions`, {
-        query: { ...span(period.start, period.end), limit: LIMIT },
-      }),
-    queryKey: ["account-tx", account.id, period.start, period.end, LIMIT],
-  }));
-
-  const rows = $derived(
-    (list.data?.data ?? [])
-      .flatMap((group) =>
-        group.attributes.transactions
-          .filter(
-            (s) =>
-              (s.source_id === account.id || s.destination_id === account.id) &&
-              contains(period.range, s.date)
-          )
-          .map((split, i) => ({
-            foreign: signedForeign(split, account.id),
-            group,
-            key: `${group.id}-${i}`,
-            money: signedAmount(split, account.id),
-            split,
-            title:
-              group.attributes.transactions.length > 1
-                ? `${groupTitle(group)}: ${split.description}`
-                : split.description,
-          }))
-      )
-      .slice(0, LIMIT)
-  );
-  const change = $derived(toNumber(a.balance_difference));
-  const trendColor = $derived(
-    change < 0 ? "var(--ff-expense)" : "var(--ff-income)"
-  );
-</script>
-
-<Box body="py-1" href={showUrl(account.id)} title={a.name}>
-  {#snippet tools()}
-    {#if trend.length > 1}
-      <Sparkline color={trendColor} {marker} values={trend} width={72} />
-    {/if}
-    {#if change !== 0}
-      <Amount amount={change} signed {...cur} class="text-[12px]" />
-    {/if}
-  {/snippet}
-  <div class="transition-opacity {list.isPlaceholderData ? "opacity-60" : ""}">
-    {#if list.isPending}
-      <div class="h-14"></div>
-    {:else if list.isError}
-      <p class="px-3 py-2 text-expense">{list.error.message}</p>
-    {:else if rows.length === 0}
-      <p class="px-3 py-3 text-cladd-fg-soft">
-        No transactions in this period.
-      </p>
-    {:else}
-      <ul class="flex flex-col">
-        {#each rows as row (row.key)}
-          <li>
-            <a
-              class="flex h-10 items-center gap-2 px-3 text-[12.5px] hover:bg-row-hover sm:h-7"
-              href="/transactions/show/{row.group.id}"
-            >
-              <span class="num w-12 shrink-0 text-cladd-fg-soft"
-                >{formatDate(row.split.date.slice(0, 10), "short")}</span
-              >
-              <span
-                class="min-w-0 flex-1 truncate text-cladd-fg"
-                title={row.title}
-                >{row.title}</span
-              >
-              {#if row.foreign}
-                <span class="num shrink-0 text-[11px] text-cladd-fg-soft"
-                  >({formatMoney(row.foreign)})</span
-                >
-              {/if}
-              <Amount
-                amount={row.money.amount}
-                code={row.money.code}
-                decimals={row.money.decimals}
-                symbol={row.money.symbol}
-                tone={row.money.tone}
-              />
-            </a>
-          </li>
-        {/each}
-      </ul>
-    {/if}
-  </div>
-  {#snippet footer()}
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger
-        class="{TRIGGER} cladd-color-green text-cladd-primary"
-      >
-        Create <ChevronDown class="size-3.5" />
-      </DropdownMenu.Trigger>
-      <DropdownMenuContent align="start" class="w-48">
-        <DropdownMenuItem
-          onSelect={() => go(createUrl("withdrawal", account.id))}
-          >New withdrawal</DropdownMenuItem
-        >
-        <DropdownMenuItem onSelect={() => go(createUrl("deposit", account.id))}
-          >New deposit</DropdownMenuItem
-        >
-        <DropdownMenuItem onSelect={() => go(createUrl("transfer", account.id))}
-          >New transfer</DropdownMenuItem
-        >
-      </DropdownMenuContent>
-    </DropdownMenu.Root>
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger class="{TRIGGER} ml-auto text-cladd-fg">
-        <span class="num"
-          >{formatMoney({ amount: a.current_balance, ...cur })}</span
-        >
-        <ChevronDown class="size-3.5" />
-      </DropdownMenu.Trigger>
-      <DropdownMenuContent align="end" class="w-48">
-        <DropdownMenuItem onSelect={() => go(showUrl(account.id))}
-          >Show</DropdownMenuItem
-        >
-        {#if canReconcile(account)}
-          <DropdownMenuItem onSelect={() => go(reconcileUrl(account.id))}
-            >Reconcile</DropdownMenuItem
-          >
-        {/if}
-        <DropdownMenuItem onSelect={() => go(editUrl(account.id))}
-          >Edit</DropdownMenuItem
-        >
-        <DropdownMenuItem onSelect={() => openOld(showUrl(account.id))}
-          >Open in old UI</DropdownMenuItem
-        >
-      </DropdownMenuContent>
-    </DropdownMenu.Root>
-  {/snippet}
-</Box>
diff --git a/src/lib/components/dashboard/AccountsBlock.svelte b/src/lib/components/dashboard/AccountsBlock.svelte
new file mode 100644
index 0000000..fd5150f
--- /dev/null
+++ b/src/lib/components/dashboard/AccountsBlock.svelte
@@ -0,0 +1,381 @@
+<script lang="ts">
+  import ChevronRight from "@lucide/svelte/icons/chevron-right";
+  import {
+    createQueries,
+    createQuery,
+    keepPreviousData,
+  } from "@tanstack/svelte-query";
+  import { api } from "#lib/api/client.js";
+  import type {
+    Account,
+    Item,
+    Page,
+    TransactionGroup,
+  } from "#lib/api/types.js";
+  import Amount from "#lib/components/Amount.svelte";
+  import { editUrl, showUrl } from "#lib/components/accounts/links.js";
+  import Box from "#lib/components/Box.svelte";
+  import Sparkline from "#lib/components/charts/Sparkline.svelte";
+  import { type Row, useColumn } from "#lib/dashboard/column.svelte.js";
+  import {
+    formatPrimary,
+    inPrimaryTotal,
+    ratesQuery,
+  } from "#lib/dashboard/primary.svelte.js";
+  import { addDays, today } from "#lib/dates.js";
+  import { formatDate, formatMoney, toNumber } from "#lib/format.js";
+  import { period } from "#lib/period.svelte.js";
+  import { session } from "#lib/session.svelte.js";
+  import {
+    groupTitle,
+    signedAmount,
+    editUrl as txEditUrl,
+    showUrl as txShowUrl,
+  } from "#lib/transactions/split.js";
+  import { goto } from "$app/navigation";
+  import {
+    accountsChartQuery,
+    accountsQuery,
+    byCurrency,
+    type Cur,
+    seriesPoints,
+  } from "./data.js";
+
+  const RECENT = 5;
+  const TREND_DAYS = 30;
+  const HISTORY_DAYS = 365;
+
+  const now = today();
+  let expanded = $state<string[]>([]);
+
+  const assets = createQuery(() => ({
+    ...accountsQuery("asset", period.start, period.end),
+    placeholderData: keepPreviousData,
+  }));
+  const chart = createQuery(() =>
+    accountsChartQuery(addDays(now, -TREND_DAYS), now)
+  );
+  const rates = createQuery(() => ratesQuery());
+  const recent = createQueries(() => ({
+    queries: expanded.map((id) => ({
+      queryFn: () =>
+        api<Page<TransactionGroup>>(`/v1/accounts/${id}/transactions`, {
+          query: {
+            end: now,
+            limit: RECENT,
+            start: addDays(now, -HISTORY_DAYS),
+          },
+        }),
+      queryKey: ["account-recent", id, now],
+    })),
+  }));
+
+  const shown = $derived.by(() => {
+    const list = (assets.data ?? [])
+      .filter((a) => a.attributes.active !== false)
+      .sort((a, b) => (a.attributes.order ?? 0) - (b.attributes.order ?? 0));
+    if (!("frontpageAccounts" in session.prefs)) {
+      return list;
+    }
+    const ids = new Set(session.frontpageAccounts);
+    return list.filter((a) => ids.has(a.id));
+  });
+
+  const trends = $derived(
+    new Map(
+      (chart.data ?? []).map((set) => [
+        set.label,
+        seriesPoints(set, false).map((p) => p.y),
+      ])
+    )
+  );
+
+  function sumSeries(series: number[][]): number[] {
+    const length = Math.max(0, ...series.map((s) => s.length));
+    return Array.from({ length }, (_, i) =>
+      series.reduce((sum, s) => sum + (s[i] ?? 0), 0)
+    );
+  }
+
+  const groups = $derived(
+    byCurrency(shown, (a) => a.attributes.currency_code ?? "").map(
+      ([code, accounts]) => {
+        const first = accounts[0].attributes;
+        return {
+          accounts,
+          balance: accounts.reduce(
+            (s, a) => s + toNumber(a.attributes.current_balance),
+            0
+          ),
+          change: accounts.reduce(
+            (s, a) => s + toNumber(a.attributes.balance_difference),
+            0
+          ),
+          code,
+          cur: {
+            code,
+            decimals: first.currency_decimal_places ?? 2,
+            symbol: first.currency_symbol ?? code,
+          },
+          trend: sumSeries(
+            accounts.map((a) => trends.get(a.attributes.name) ?? [])
+          ),
+        };
+      }
+    )
+  );
+
+  const converted = $derived({
+    balance: inPrimaryTotal(
+      groups.map((g) => ({ amount: g.balance, code: g.code })),
+      rates.data
+    ),
+    change: inPrimaryTotal(
+      groups.map((g) => ({ amount: g.change, code: g.code })),
+      rates.data
+    ),
+  });
+
+  const recentRows = $derived(
+    new Map(
+      expanded.map((id, i) => [
+        id,
+        (recent[i]?.data?.data ?? [])
+          .flatMap((group) =>
+            group.attributes.transactions
+              .filter((s) => s.source_id === id || s.destination_id === id)
+              .map((split, n) => ({
+                date: split.date.slice(0, 10),
+                group,
+                key: `acc-${id}-tx-${group.id}-${n}`,
+                money: signedAmount(split, id),
+                title:
+                  group.attributes.transactions.length > 1
+                    ? `${groupTitle(group)}: ${split.description}`
+                    : split.description,
+              }))
+          )
+          .slice(0, RECENT),
+      ])
+    )
+  );
+
+  const accountKey = (id: string) => `acc-${id}`;
+
+  function expand(id: string) {
+    if (expanded.includes(id)) {
+      const first = recentRows.get(id)?.[0];
+      if (first) {
+        column.point(first.key);
+      }
+      return;
+    }
+    expanded = [...expanded, id];
+  }
+
+  function fold(id: string) {
+    expanded = expanded.filter((e) => e !== id);
+    column.point(accountKey(id));
+  }
+
+  function toggle(id: string) {
+    if (expanded.includes(id)) {
+      fold(id);
+    } else {
+      expand(id);
+    }
+  }
+
+  const column = useColumn(1, () =>
+    groups.flatMap((g) =>
+      g.accounts.flatMap((account): Row[] => [
+        {
+          edit: () => goto(editUrl(account.id)),
+          expand: () => expand(account.id),
+          fold: () => fold(account.id),
+          key: accountKey(account.id),
+          open: () => goto(showUrl(account.id)),
+        },
+        ...(recentRows.get(account.id) ?? []).map((tx) => ({
+          edit: () => goto(txEditUrl(tx.group.id)),
+          fold: () => fold(account.id),
+          key: tx.key,
+          open: () => goto(txShowUrl(tx.group.id)),
+        })),
+      ])
+    )
+  );
+
+  const trendColor = (values: number[]) =>
+    (values.at(-1) ?? 0) < (values[0] ?? 0)
+      ? "var(--ff-expense)"
+      : "var(--ff-income)";
+</script>
+
+{#snippet spark(
+  values: number[]
+)}
+  {#if values.length > 1}
+    <Sparkline color={trendColor(values)} height={18} {values} width={56} />
+  {/if}
+{/snippet}
+
+{#snippet balance(
+  amount: number,
+  cur: Cur
+)}
+  <span class="num font-medium {amount < 0 ? "text-expense" : "text-cladd-fg"}"
+    >{formatMoney({ amount, ...cur })}</span
+  >
+{/snippet}
+
+<Box body="p-0" href="/accounts/asset" title="Accounts">
+  {#snippet tools()}
+    {#if converted.balance !== null}
+      <span class="num font-semibold text-[13px] text-cladd-fg"
+        >{formatPrimary(converted.balance)}</span
+      >
+      {#if converted.change}
+        <span
+          class="num text-[12px] {converted.change < 0
+            ? "text-expense"
+            : "text-income"}"
+          >{formatPrimary(converted.change, true)}</span
+        >
+      {/if}
+    {/if}
+  {/snippet}
+  {#if shown.length === 0}
+    <p class="px-3 py-3 text-cladd-fg-soft">
+      {assets.isPending ? "" : "No accounts on the home screen."}
+    </p>
+  {:else}
+    <table
+      class="w-full border-collapse text-[13px] transition-opacity {assets.isPlaceholderData
+        ? "opacity-60"
+        : ""}"
+    >
+      <thead>
+        <tr class="h-7 text-[11px] text-cladd-fg-soft">
+          <th class="w-full pl-3 text-left font-normal" scope="col">Account</th>
+          <th class="px-2 text-right font-normal" scope="col">Balance</th>
+          <th class="px-2 text-right font-normal" scope="col">This period</th>
+          <th
+            class="hidden pr-3 text-right font-normal sm:table-cell"
+            scope="col"
+          >
+            {TREND_DAYS}
+            days
+          </th>
+        </tr>
+      </thead>
+      {#each groups as group (group.code)}
+        <tbody class="border-cladd-outline border-t">
+          <tr class="h-7 bg-cladd-surface-next/60 font-semibold">
+            <th
+              class="pl-3 text-left text-[12px] text-cladd-fg"
+              scope="rowgroup"
+            >
+              {group.code}
+            </th>
+            <td class="whitespace-nowrap px-2 text-right">
+              {@render balance(group.balance, group.cur)}
+            </td>
+            <td class="whitespace-nowrap px-2 text-right">
+              {#if group.change !== 0}
+                <Amount amount={group.change} signed {...group.cur} />
+              {/if}
+            </td>
+            <td class="hidden pr-3 sm:table-cell">
+              <div class="flex justify-end">{@render spark(group.trend)}</div>
+            </td>
+          </tr>
+          {#each group.accounts as account (account.id)}
+            {@const a = account.attributes}
+            {@const key = accountKey(account.id)}
+            {@const open = expanded.includes(account.id)}
+            <tr
+              class="h-7 border-cladd-outline/60 border-t {column.rowClass(
+                key
+              )}"
+              id={column.id(key)}
+              onclick={() => column.point(key)}
+            >
+              <td class="max-w-0 pl-1">
+                <div class="flex min-w-0 items-center">
+                  <button
+                    aria-expanded={open}
+                    aria-label="Last transactions of {a.name}"
+                    class="grid size-6 shrink-0 place-items-center rounded-cladd-sm text-cladd-fg-soft hover:text-cladd-fg"
+                    onclick={() => toggle(account.id)}
+                    type="button"
+                  >
+                    <ChevronRight
+                      class="size-3.5 transition-transform {open
+                        ? "rotate-90"
+                        : ""}"
+                    />
+                  </button>
+                  <a
+                    class="truncate text-cladd-fg hover:underline"
+                    href={showUrl(account.id)}
+                    title={a.name}
+                    >{a.name}</a
+                  >
+                </div>
+              </td>
+              <td class="whitespace-nowrap px-2 text-right">
+                {@render balance(toNumber(a.current_balance), group.cur)}
+              </td>
+              <td class="whitespace-nowrap px-2 text-right">
+                {#if toNumber(a.balance_difference) !== 0}
+                  <Amount amount={a.balance_difference} signed {...group.cur} />
+                {/if}
+              </td>
+              <td class="hidden pr-3 sm:table-cell">
+                <div class="flex justify-end">
+                  {@render spark(trends.get(a.name) ?? [])}
+                </div>
+              </td>
+            </tr>
+            {#if open}
+              {#each recentRows.get(account.id) ?? [] as tx (tx.key)}
+                <tr
+                  class="h-7 text-[12px] {column.rowClass(tx.key)}"
+                  id={column.id(tx.key)}
+                  onclick={() => column.point(tx.key)}
+                >
+                  <td class="max-w-0 pl-7" colspan="2">
+                    <a
+                      class="flex min-w-0 items-baseline gap-2 hover:underline"
+                      href={txShowUrl(tx.group.id)}
+                    >
+                      <span class="num w-12 shrink-0 text-cladd-fg-soft"
+                        >{formatDate(tx.date, "short")}</span
+                      >
+                      <span class="truncate text-cladd-fg-soft" title={tx.title}
+                        >{tx.title}</span
+                      >
+                    </a>
+                  </td>
+                  <td class="whitespace-nowrap px-2 text-right">
+                    <Amount {...tx.money} signed />
+                  </td>
+                  <td class="hidden sm:table-cell"></td>
+                </tr>
+              {:else}
+                <tr class="h-7 text-[12px]">
+                  <td class="pl-7 text-cladd-fg-soft" colspan="4">
+                    {recent[expanded.indexOf(account.id)]?.isPending
+                      ? ""
+                      : "Nothing in the last year."}
+                  </td>
+                </tr>
+              {/each}
+            {/if}
+          {/each}
+        </tbody>
+      {/each}
+    </table>
+  {/if}
+</Box>
diff --git a/src/lib/components/dashboard/DebtsBox.svelte b/src/lib/components/dashboard/DebtsBox.svelte
index e9cce1f..120e674 100644
--- a/src/lib/components/dashboard/DebtsBox.svelte
+++ b/src/lib/components/dashboard/DebtsBox.svelte
@@ -1,18 +1,25 @@
 <script lang="ts">
   import { createQuery, keepPreviousData } from "@tanstack/svelte-query";
-  import { showUrl } from "#lib/components/accounts/links.js";
+  import { editUrl, showUrl } from "#lib/components/accounts/links.js";
   import Box from "#lib/components/Box.svelte";
-  import BarChart from "#lib/components/charts/BarChart.svelte";
-  import { tones } from "#lib/components/charts/chart.js";
-  import { toNumber } from "#lib/format.js";
+  import { useColumn } from "#lib/dashboard/column.svelte.js";
+  import {
+    formatPrimary,
+    inPrimaryTotal,
+    ratesQuery,
+  } from "#lib/dashboard/primary.svelte.js";
+  import { formatMoney, toNumber } from "#lib/format.js";
   import { period } from "#lib/period.svelte.js";
-  import { accountsQuery, byCurrency, money } from "./data.js";
+  import { goto } from "$app/navigation";
+  import { accountsQuery, byCurrency } from "./data.js";
 
   const liabilities = createQuery(() => ({
     ...accountsQuery("liabilities", period.start, period.end),
     placeholderData: keepPreviousData,
   }));
 
+  const rates = createQuery(() => ratesQuery());
+
   const groups = $derived(
     byCurrency(
       (liabilities.data ?? []).filter(
@@ -23,83 +30,135 @@
       (a) => a.attributes.currency_code ?? ""
     ).map(([code, list]) => {
       const first = list[0].attributes;
-      const format = money({
+      const cur = {
         code,
         decimals: first.currency_decimal_places ?? 2,
         symbol: first.currency_symbol ?? code,
-      });
-      const bars = list
+      };
+      const rows = list
         .map((a) => {
           const due = Math.abs(toNumber(a.attributes.debt_amount));
-          const value =
-            a.attributes.liability_direction === "credit" ? due : -due;
           return {
-            color: value > 0 ? tones.income : tones.expense,
-            href: showUrl(a.id),
-            key: a.id,
-            label: a.attributes.name,
-            value,
+            id: a.id,
+            key: `debt-${a.id}`,
+            name: a.attributes.name,
+            value: a.attributes.liability_direction === "credit" ? due : -due,
           };
         })
         .sort((x, y) => y.value - x.value);
-      const owed = bars
-        .filter((b) => b.value > 0)
-        .reduce((s, b) => s + b.value, 0);
-      const owe = bars
-        .filter((b) => b.value < 0)
-        .reduce((s, b) => s - b.value, 0);
-      return { bars, code, format, owe, owed };
+      return {
+        code,
+        cur,
+        largest: Math.max(...rows.map((r) => Math.abs(r.value))),
+        net: rows.reduce((s, r) => s + r.value, 0),
+        rows,
+      };
     })
   );
+
+  const nets = $derived.by(() => {
+    const total = inPrimaryTotal(
+      groups.map((g) => ({ amount: g.net, code: g.code })),
+      rates.data
+    );
+    if (total === null) {
+      return groups.map((g) => ({
+        code: g.code,
+        net: g.net,
+        text: formatMoney({ amount: Math.abs(g.net), ...g.cur }),
+      }));
+    }
+    return [{ code: "all", net: total, text: formatPrimary(Math.abs(total)) }];
+  });
+
+  const column = useColumn(4, () =>
+    groups.flatMap((g) =>
+      g.rows.map((r) => ({
+        edit: () => goto(editUrl(r.id)),
+        key: r.key,
+        open: () => goto(showUrl(r.id)),
+      }))
+    )
+  );
 </script>
 
+{#snippet more()}
+  <a
+    class="text-brand hover:underline dark:text-(--ff-series-1)"
+    href="/accounts/liabilities"
+    >See your liabilities</a
+  >
+{/snippet}
+
 {#if groups.length > 0}
-  <Box href="/accounts/liabilities" title="Debts with friends">
+  <Box
+    body="p-0"
+    footer={more}
+    href="/accounts/liabilities"
+    title="Debts with friends"
+  >
     <div
-      class="flex flex-col gap-4 transition-opacity {liabilities.isPlaceholderData
+      class="flex flex-wrap gap-x-4 gap-y-1 px-3 py-2 transition-opacity {liabilities.isPlaceholderData
         ? "opacity-60"
         : ""}"
     >
-      {#each groups as group (group.code)}
-        <div class="flex flex-col gap-1.5">
-          <div class="flex items-baseline gap-3 text-[12px]">
-            <span
-              class="font-semibold text-[11px] text-cladd-fg-soft tracking-wide"
-              >{group.code}</span
+      {#each nets as g (g.code)}
+        {#if g.net !== 0}
+          <span class="text-[12px] text-cladd-fg-soft"
+            ><span
+              class="num font-semibold text-[15px] {g.net > 0
+                ? "text-income"
+                : "text-expense"}"
+              >{g.text}</span
             >
-            {#if group.owed > 0}
-              <span class="text-cladd-fg-soft"
-                >Owed to me
-                <span class="num text-income"
-                  >{group.format(group.owed)}</span
-                ></span
-              >
-            {/if}
-            {#if group.owe > 0}
-              <span class="text-cladd-fg-soft"
-                >I owe
-                <span class="num text-expense"
-                  >{group.format(group.owe)}</span
-                ></span
-              >
-            {/if}
-          </div>
-          <BarChart
-            bars={group.bars}
-            format={group.format}
-            label="Debts with friends in {group.code}"
-            labelWidth="minmax(5rem, 9rem)"
-            orientation="horizontal"
-          />
-        </div>
+            {g.net > 0 ? "owed to me" : "I owe"}</span
+          >
+        {/if}
       {/each}
     </div>
-    {#snippet footer()}
-      <a
-        class="text-brand dark:text-(--ff-series-1) hover:underline"
-        href="/accounts/liabilities"
-        >See your liabilities</a
-      >
-    {/snippet}
+    <table class="w-full border-collapse text-[13px]">
+      {#each groups as g (g.code)}
+        <tbody class="border-cladd-outline border-t">
+          {#each g.rows as r, i (r.key)}
+            <tr
+              class="h-7 {i > 0
+                ? "border-cladd-outline/60 border-t"
+                : ""} {column.rowClass(r.key)}"
+              id={column.id(r.key)}
+              onclick={() => column.point(r.key)}
+            >
+              <td class="w-full max-w-0 pl-3">
+                <a
+                  class="block truncate text-cladd-fg hover:underline"
+                  href={showUrl(r.id)}
+                  title={r.name}
+                  >{r.name}</a
+                >
+              </td>
+              <td class="px-2">
+                <div
+                  class="flex h-1.5 w-16 overflow-hidden rounded-full bg-cladd-surface-next"
+                >
+                  <span
+                    class="h-full rounded-full {r.value > 0
+                      ? "bg-income"
+                      : "bg-expense"}"
+                    style:width="{(Math.abs(r.value) / g.largest) * 100}%"
+                  ></span>
+                </div>
+              </td>
+              <td
+                class="num whitespace-nowrap pr-3 pl-2 text-right font-medium {r.value >
+                0
+                  ? "text-income"
+                  : "text-expense"}"
+              >
+                {formatMoney({ amount: r.value, ...g.cur }, true)}
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      {/each}
+    </table>
   </Box>
 {/if}
diff --git a/src/lib/components/dashboard/DueBox.svelte b/src/lib/components/dashboard/DueBox.svelte
new file mode 100644
index 0000000..a24c347
--- /dev/null
+++ b/src/lib/components/dashboard/DueBox.svelte
@@ -0,0 +1,187 @@
+<script lang="ts">
+  import { createQuery } from "@tanstack/svelte-query";
+  import { all, lists } from "#lib/api/lists.js";
+  import type { Bill } from "#lib/api/types.js";
+  import Box from "#lib/components/Box.svelte";
+  import { useColumn } from "#lib/dashboard/column.svelte.js";
+  import {
+    formatPrimary,
+    inPrimaryTotal,
+    ratesQuery,
+  } from "#lib/dashboard/primary.svelte.js";
+  import { addDays, today } from "#lib/dates.js";
+  import { formatDate, formatMoney, toNumber } from "#lib/format.js";
+  import { goto } from "$app/navigation";
+  import { byCurrency, type Cur } from "./data.js";
+
+  const DAYS = 7;
+  const HREF = `/subscriptions?horizon=${DAYS}`;
+
+  interface Due {
+    amount: number;
+    approx: boolean;
+    cur: Cur;
+    date: string;
+    edit: string;
+    href: string;
+    key: string;
+    name: string;
+    piggy: boolean;
+  }
+
+  const now = today();
+  const end = addDays(now, DAYS);
+  const inWindow = (value: string | null | undefined) => {
+    const day = (value ?? "").slice(0, 10);
+    return day >= now && day <= end;
+  };
+
+  const bills = createQuery(() => ({
+    queryFn: () => all<Bill>("/v1/bills", { end, start: now }),
+    queryKey: ["bills-due", now, end],
+  }));
+  const piggies = createQuery(() => lists.piggyBanks());
+  const rates = createQuery(() => ratesQuery());
+
+  const items = $derived.by<Due[]>(() => {
+    const due = (bills.data ?? [])
+      .filter((b) => b.attributes.active !== false)
+      .flatMap((b) => {
+        const a = b.attributes;
+        const expected = (a.pay_dates ?? []).filter(inWindow).sort();
+        const paid = (a.paid_dates ?? []).filter((p) => inWindow(p.date));
+        const min = toNumber(a.amount_min);
+        const max = toNumber(a.amount_max);
+        return expected.slice(paid.length).map((date) => ({
+          amount: (min + max) / 2,
+          approx: min !== max,
+          cur: {
+            code: a.currency_code ?? "",
+            decimals: a.currency_decimal_places ?? 2,
+            symbol: a.currency_symbol ?? "",
+          },
+          date: date.slice(0, 10),
+          edit: `/subscriptions/edit/${b.id}`,
+          href: `/subscriptions/show/${b.id}`,
+          key: `due-bill-${b.id}-${date.slice(0, 10)}`,
+          name: a.name ?? "",
+          piggy: false,
+        }));
+      });
+    const saving = (piggies.data ?? [])
+      .filter(
+        (p) =>
+          p.attributes.active !== false &&
+          toNumber(p.attributes.left_to_save) > 0 &&
+          inWindow(p.attributes.target_date)
+      )
+      .map((p) => {
+        const a = p.attributes;
+        return {
+          amount: toNumber(a.left_to_save),
+          approx: false,
+          cur: {
+            code: a.currency_code ?? "",
+            decimals: a.currency_decimal_places ?? 2,
+            symbol: a.currency_symbol ?? "",
+          },
+          date: (a.target_date ?? "").slice(0, 10),
+          edit: `/piggy-banks/edit/${p.id}`,
+          href: `/piggy-banks/show/${p.id}`,
+          key: `due-piggy-${p.id}`,
+          name: a.name ?? "",
+          piggy: true,
+        };
+      });
+    return [...due, ...saving].sort(
+      (x, y) => x.date.localeCompare(y.date) || x.name.localeCompare(y.name)
+    );
+  });
+
+  const totals = $derived(
+    byCurrency(items, (i) => i.cur.code).map(([code, list]) => ({
+      amount: list.reduce((s, i) => s + i.amount, 0),
+      approx: list.some((i) => i.approx),
+      code,
+      cur: list[0].cur,
+    }))
+  );
+
+  const converted = $derived(inPrimaryTotal(totals, rates.data));
+
+  const money = (amount: number, cur: Cur, approx: boolean) =>
+    `${approx ? "~" : ""}${formatMoney({ amount, ...cur })}`;
+
+  function dayLabel(date: string) {
+    if (date === now) {
+      return "Today";
+    }
+    return date === addDays(now, 1) ? "Tomorrow" : formatDate(date, "day");
+  }
+
+  const column = useColumn(3, () =>
+    items.map((item) => ({
+      edit: () => goto(item.edit),
+      key: item.key,
+      open: () => goto(item.href),
+    }))
+  );
+</script>
+
+{#snippet more()}
+  <a class="text-brand hover:underline dark:text-(--ff-series-1)" href={HREF}
+    >Go to your subscriptions</a
+  >
+{/snippet}
+
+<Box body="p-0" footer={more} href={HREF} title="Next {DAYS} days">
+  {#if items.length === 0}
+    <p class="px-3 py-2.5 text-[12.5px] text-cladd-fg-soft">
+      {bills.isPending ? "" : `Nothing due in the next ${DAYS} days.`}
+    </p>
+  {:else}
+    <div
+      class="num flex flex-wrap gap-x-4 gap-y-1 px-3 py-2 font-semibold text-[15px] text-cladd-fg"
+    >
+      {#if converted === null}
+        {#each totals as t (t.code)}
+          <span>{money(t.amount, t.cur, t.approx)}</span>
+        {/each}
+      {:else}
+        <span>{formatPrimary(converted)}</span>
+      {/if}
+    </div>
+    <table class="w-full border-collapse text-[13px]">
+      <tbody>
+        {#each items as item (item.key)}
+          <tr
+            class="h-7 border-cladd-outline/60 border-t {column.rowClass(
+              item.key
+            )}"
+            id={column.id(item.key)}
+            onclick={() => column.point(item.key)}
+          >
+            <td class="whitespace-nowrap pr-2 pl-3 text-cladd-fg-soft">
+              {dayLabel(item.date)}
+            </td>
+            <td class="w-full max-w-0">
+              <a
+                class="block truncate text-cladd-fg hover:underline"
+                href={item.href}
+                title={item.name}
+                >{item.name}<span class="text-cladd-fg-soft"
+                  >{item.piggy ? " · piggy bank" : ""}</span
+                ></a
+              >
+            </td>
+            <td
+              class="num whitespace-nowrap pr-3 pl-2 text-right text-cladd-fg"
+            >
+              {money(item.amount, item.cur, item.approx)}
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+</Box>
diff --git a/src/lib/components/dashboard/InboxBox.svelte b/src/lib/components/dashboard/InboxBox.svelte
new file mode 100644
index 0000000..67b5fe1
--- /dev/null
+++ b/src/lib/components/dashboard/InboxBox.svelte
@@ -0,0 +1,183 @@
+<script lang="ts">
+  import { createQuery } from "@tanstack/svelte-query";
+  import { api } from "#lib/api/client.js";
+  import type { Page, TransactionGroup } from "#lib/api/types.js";
+  import Amount from "#lib/components/Amount.svelte";
+  import Box from "#lib/components/Box.svelte";
+  import { useColumn } from "#lib/dashboard/column.svelte.js";
+  import { reviewed } from "#lib/dashboard/reviewed.svelte.js";
+  import { addDays, iso } from "#lib/dates.js";
+  import { formatDate, formatDateTime } from "#lib/format.js";
+  import { useKeys } from "#lib/keys.svelte.js";
+  import {
+    editUrl,
+    groupTitle,
+    showUrl,
+    sumByCurrency,
+  } from "#lib/transactions/split.js";
+  import { goto } from "$app/navigation";
+
+  const FETCH = 200;
+  const SHOW = 10;
+
+  const since = reviewed.until;
+  const sinceDay = addDays(iso(new Date(since)), -1);
+  const searchHref = `/search?search=${encodeURIComponent(`created_at_after:${sinceDay}`)}`;
+
+  const at = (group: { attributes: TransactionGroup }) =>
+    group.attributes.created_at ?? "";
+
+  async function load() {
+    const page = await api<Page<TransactionGroup>>("/v1/search/transactions", {
+      query: { limit: FETCH, query: `created_at_after:${sinceDay}` },
+    });
+    if (page.data.length < FETCH) {
+      reviewed.compact(page.data.map((g) => ({ at: at(g), id: g.id })));
+    }
+    return page;
+  }
+
+  const inbox = createQuery(() => ({
+    queryFn: load,
+    queryKey: ["dashboard-inbox", sinceDay],
+    refetchOnWindowFocus: true,
+  }));
+
+  const fetched = $derived(inbox.data?.data ?? []);
+  const entries = $derived(
+    fetched
+      .filter((g) => Date.parse(at(g)) > Date.parse(since))
+      .sort((a, b) => Date.parse(at(b)) - Date.parse(at(a)))
+      .map((group) => {
+        const [first] = group.attributes.transactions;
+        return {
+          at: at(group),
+          date: first?.date.slice(0, 10) ?? "",
+          group,
+          id: group.id,
+          money: sumByCurrency(group.attributes.transactions)[0],
+          note: (first?.notes ?? "").trim().split("\n")[0],
+          title: groupTitle(group),
+        };
+      })
+  );
+  const shown = $derived(entries.slice(0, SHOW));
+  const fresh = $derived(entries.filter((e) => reviewed.isNew(e)).length);
+
+  const markAll = () => reviewed.all(entries);
+
+  useKeys(() => [
+    {
+      group: "Dashboard",
+      keys: "*",
+      label: "Mark all entries reviewed",
+      run: markAll,
+    },
+  ]);
+
+  const column = useColumn(2, () =>
+    shown.map((e) => ({
+      edit: () => goto(editUrl(e.id)),
+      key: `inbox-${e.id}`,
+      open: () => goto(showUrl(e.id)),
+      review: () => reviewed.toggle(e),
+    }))
+  );
+</script>
+
+{#snippet actions()}
+  {#if fresh > 0}
+    <button
+      class="text-brand hover:underline dark:text-(--ff-series-1)"
+      onclick={markAll}
+      type="button"
+    >
+      Mark all reviewed <span class="kbd">*</span>
+    </button>
+  {/if}
+  {#if entries.length > SHOW}
+    <a class="ml-auto text-cladd-fg-soft hover:underline" href={searchHref}
+      >and {entries.length - SHOW} more</a
+    >
+  {/if}
+{/snippet}
+
+<Box
+  body="p-0"
+  footer={fresh > 0 || entries.length > SHOW ? actions : undefined}
+  href={searchHref}
+  title="Entered since you last looked"
+>
+  {#snippet tools()}
+    {#if fresh > 0}
+      <span class="num text-[12px] text-cladd-fg-soft">{fresh} new</span>
+    {/if}
+  {/snippet}
+  {#if entries.length === 0}
+    <p class="px-3 py-2.5 text-[12.5px] text-cladd-fg-soft">
+      {inbox.isPending ? "" : `Nothing new since ${formatDateTime(since)}.`}
+    </p>
+  {:else}
+    <table class="w-full border-collapse text-[13px]">
+      <tbody>
+        {#each shown as e, i (e.id)}
+          {@const key = `inbox-${e.id}`}
+          {@const isNew = reviewed.isNew(e)}
+          <tr
+            class="{i > 0
+              ? "border-cladd-outline/60 border-t"
+              : ""} {column.rowClass(key)}"
+            id={column.id(key)}
+            onclick={() => column.point(key)}
+          >
+            <td class="w-7 py-1 pl-2 align-top">
+              <button
+                aria-label={isNew ? "Mark reviewed" : "Mark as new"}
+                aria-pressed={!isNew}
+                class="grid size-5 place-items-center rounded-full"
+                onclick={() => reviewed.toggle(e)}
+                type="button"
+              >
+                <span
+                  class="size-2 rounded-full {isNew
+                    ? "bg-brand dark:bg-(--ff-series-1)"
+                    : "border border-cladd-fg-softer"}"
+                ></span>
+              </button>
+            </td>
+            <td
+              class="num w-12 whitespace-nowrap py-1 align-top text-cladd-fg-soft leading-5"
+            >
+              {formatDate(e.date, "short")}
+            </td>
+            <td class="w-full max-w-0 py-1 pl-2 align-top leading-5">
+              <a
+                class="block truncate hover:underline {isNew
+                  ? "font-semibold text-cladd-fg"
+                  : "text-cladd-fg-soft"}"
+                href={showUrl(e.id)}
+                title={e.title}
+                >{e.title}</a
+              >
+              {#if e.note}
+                <p
+                  class="truncate text-[12px] text-cladd-fg-soft"
+                  title={e.note}
+                >
+                  {e.note}
+                </p>
+              {/if}
+            </td>
+            <td
+              class="whitespace-nowrap py-1 pr-3 pl-2 text-right align-top leading-5"
+            >
+              {#if e.money}
+                <Amount {...e.money} />
+              {/if}
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+</Box>
diff --git a/src/lib/components/dashboard/PaceBox.svelte b/src/lib/components/dashboard/PaceBox.svelte
new file mode 100644
index 0000000..04ac955
--- /dev/null
+++ b/src/lib/components/dashboard/PaceBox.svelte
@@ -0,0 +1,203 @@
+<script lang="ts">
+  import { createQuery, keepPreviousData } from "@tanstack/svelte-query";
+  import { api } from "#lib/api/client.js";
+  import Box from "#lib/components/Box.svelte";
+  import {
+    formatPrimary,
+    inPrimaryTotal,
+    median,
+    ratesQuery,
+  } from "#lib/dashboard/primary.svelte.js";
+  import {
+    addDays,
+    daysBetween,
+    parse,
+    type Range,
+    shiftPeriod,
+    today,
+  } from "#lib/dates.js";
+  import { formatDate, formatMoney, toNumber } from "#lib/format.js";
+  import { period } from "#lib/period.svelte.js";
+  import { byCurrency, currency, type InsightEntry, span } from "./data.js";
+
+  let { class: className = "" }: { class?: string } = $props();
+
+  const MONTHS = 6;
+  const MIN_MONTHS = 3;
+  const SUFFIX: Record<string, string> = {
+    few: "rd",
+    one: "st",
+    other: "th",
+    two: "nd",
+  };
+  const ordinals = new Intl.PluralRules("en-US", { type: "ordinal" });
+
+  const now = today();
+  const cutoff = $derived(period.end < now ? period.end : now);
+  const visible = $derived(cutoff >= period.start);
+  const ranges = $derived.by(() => {
+    const days = daysBetween(period.start, cutoff);
+    const list: Range[] = [{ end: cutoff, start: period.start }];
+    let { range } = period;
+    for (let i = 0; i < MONTHS; i += 1) {
+      range = shiftPeriod(range, period.view, -1);
+      const end = addDays(range.start, days);
+      list.push({ end: end < range.end ? end : range.end, start: range.start });
+    }
+    return list;
+  });
+
+  const rates = createQuery(() => ratesQuery());
+  const pace = createQuery(() => ({
+    enabled: visible,
+    placeholderData: keepPreviousData,
+    queryFn: () =>
+      Promise.all(
+        ranges.map((r) =>
+          api<InsightEntry[]>("/v1/insight/expense/total", {
+            query: span(r.start, r.end),
+          })
+        )
+      ),
+    queryKey: ["dashboard-pace", ranges.map((r) => r.start).join(), cutoff],
+  }));
+
+  const total = (list: InsightEntry[], code: string) =>
+    Math.abs(
+      list
+        .filter((e) => e.currency_code === code)
+        .reduce((s, e) => s + toNumber(e.difference), 0)
+    );
+
+  const rows = $derived.by(() => {
+    const [current = [], ...past] = pace.data ?? [];
+    const codes = [
+      ...new Set([current, ...past].flat().map((e) => e.currency_code)),
+    ];
+    return byCurrency(codes, (code) => code)
+      .map(([code]) => {
+        const history = past
+          .map((list) => total(list, code))
+          .filter((v) => v > 0);
+        const typical = history.length >= MIN_MONTHS ? median(history) : null;
+        const spent = total(current, code);
+        const cur = currency(code);
+        return {
+          code,
+          format: (amount: number) => formatMoney({ amount, ...cur }),
+          spent,
+          typical,
+        };
+      })
+      .filter((r) => r.spent > 0 || r.typical !== null);
+  });
+
+  const title = $derived.by(() => {
+    if (period.view !== "1M") {
+      return `Spent by ${formatDate(cutoff, "short")}`;
+    }
+    const day = parse(cutoff).getDate();
+    return `Spent by the ${day}${SUFFIX[ordinals.select(day)] ?? "th"}`;
+  });
+
+  const lines = $derived.by(() => {
+    const parts = (pick: (r: (typeof rows)[number]) => number | null) =>
+      rows.map((r) => ({ amount: pick(r) ?? 0, code: r.code }));
+    const spent = inPrimaryTotal(
+      parts((r) => r.spent),
+      rates.data
+    );
+    if (spent === null || rows.length < 2) {
+      return rows;
+    }
+    const known = rows.every((r) => r.typical !== null);
+    const typical = known
+      ? inPrimaryTotal(
+          parts((r) => r.typical),
+          rates.data
+        )
+      : null;
+    return [...rows, { code: "All", format: formatPrimary, spent, typical }];
+  });
+</script>
+
+{#if visible && rows.length > 0}
+  <Box body="p-0" class={className} {title}>
+    {#snippet tools()}
+      <span class="text-[12px] text-cladd-fg-soft"
+        >Typical: median of {MONTHS} months</span
+      >
+    {/snippet}
+    <table
+      class="w-full border-collapse text-[13px] transition-opacity {pace.isPlaceholderData
+        ? "opacity-60"
+        : ""}"
+    >
+      <thead>
+        <tr class="h-7 text-[11px] text-cladd-fg-soft">
+          <th class="pl-3 text-left font-normal" scope="col">Currency</th>
+          <th class="px-2 text-right font-normal" scope="col">Spent</th>
+          <th class="px-2 text-right font-normal" scope="col">Typical</th>
+          <th class="px-2 text-right font-normal" scope="col">Difference</th>
+          <th class="hidden w-full pr-3 font-normal sm:table-cell" scope="col">
+            <span class="sr-only">Spent against typical</span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each lines as r (r.code)}
+          {@const diff = r.typical === null ? null : r.spent - r.typical}
+          {@const scale = Math.max(r.spent, r.typical ?? 0) || 1}
+          <tr class="h-7 border-cladd-outline/60 border-t">
+            <th
+              class="pl-3 text-left font-semibold text-[12px] text-cladd-fg"
+              scope="row"
+            >
+              {r.code}
+            </th>
+            <td
+              class="num whitespace-nowrap px-2 text-right font-semibold text-cladd-fg"
+            >
+              {r.format(r.spent)}
+            </td>
+            <td
+              class="num whitespace-nowrap px-2 text-right text-cladd-fg-soft"
+            >
+              {r.typical === null ? "n/a" : r.format(r.typical)}
+            </td>
+            <td
+              class="num whitespace-nowrap px-2 text-right {diff !== null &&
+              diff > 0
+                ? "text-expense"
+                : "text-income"}"
+            >
+              {#if diff !== null}
+                {r.format(Math.abs(diff))}
+                {diff > 0 ? "over" : "under"}
+              {/if}
+            </td>
+            <td class="hidden pr-3 pl-2 sm:table-cell">
+              {#if r.typical !== null}
+                <div
+                  class="relative h-2 min-w-24 max-w-80 rounded-full bg-cladd-surface-next"
+                >
+                  <span
+                    class="absolute inset-y-0 left-0 rounded-full {diff !==
+                      null && diff > 0
+                      ? "bg-expense"
+                      : "bg-brand"}"
+                    style:width="{(r.spent / scale) * 100}%"
+                  ></span>
+                  <span
+                    class="absolute -top-1 -bottom-1 w-0.5 -translate-x-1/2 rounded-full bg-cladd-fg"
+                    style:left="{(r.typical / scale) * 100}%"
+                  ></span>
+                </div>
+              {/if}
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </Box>
+{/if}
diff --git a/src/lib/components/dashboard/SubscriptionsBox.svelte b/src/lib/components/dashboard/SubscriptionsBox.svelte
index c32fb57..18354c9 100644
--- a/src/lib/components/dashboard/SubscriptionsBox.svelte
+++ b/src/lib/components/dashboard/SubscriptionsBox.svelte
@@ -4,6 +4,7 @@
   import type { Bill } from "#lib/api/types.js";
   import Box from "#lib/components/Box.svelte";
   import Meter from "#lib/components/charts/Meter.svelte";
+  import { today } from "#lib/dates.js";
   import { formatDate, formatMoney, toNumber } from "#lib/format.js";
   import { period } from "#lib/period.svelte.js";
   import { parseSummary, span, summaryQuery } from "./data.js";
@@ -50,7 +51,7 @@
           (b.attributes.paid_dates ?? []).map((p) => p.date)
         ).length;
         const next = expected[paid];
-        if (!next) {
+        if (!next || next >= today()) {
           return [];
         }
         const amount =
@@ -111,7 +112,7 @@
       {#if due.length > 0}
         <div class="flex flex-col">
           <span class="pb-1 font-semibold text-[12px] text-cladd-fg-soft"
-            >Still to pay this period</span
+            >Not paid yet</span
           >
           <ul class="flex flex-col">
             {#each due.slice(0, DUE_LIMIT) as d (d.bill.id)}
diff --git a/src/lib/dashboard/column.svelte.ts b/src/lib/dashboard/column.svelte.ts
new file mode 100644
index 0000000..9a63b21
--- /dev/null
+++ b/src/lib/dashboard/column.svelte.ts
@@ -0,0 +1,108 @@
+import { getContext, onMount, setContext } from "svelte";
+import { ListNav } from "#lib/list-nav.svelte.js";
+
+export interface Row {
+  edit?: () => void;
+  expand?: () => void;
+  fold?: () => void;
+  key: string;
+  open: () => void;
+  review?: () => void;
+}
+
+interface Section {
+  order: number;
+  rows: () => Row[];
+}
+
+const CONTEXT = Symbol("dashboard-column");
+const GROUP = "Dashboard";
+
+class Column {
+  sections = $state.raw<Section[]>([]);
+  rows = $derived(this.sections.flatMap((section) => section.rows()));
+  index = $derived(new Map(this.rows.map((row, i) => [row.key, i])));
+
+  nav = new ListNav<Row>({
+    edit: (row) => row.edit?.(),
+    extra: () => [
+      {
+        group: GROUP,
+        keys: "Enter",
+        label: "Expand account or open row",
+        run: () => this.run((row) => (row.expand ?? row.open)()),
+      },
+      {
+        group: GROUP,
+        keys: "l",
+        label: "Show last transactions of the account",
+        run: () => this.run((row) => (row.expand ?? row.open)()),
+      },
+      {
+        group: GROUP,
+        keys: "h",
+        label: "Fold account",
+        run: () => this.run((row) => row.fold?.()),
+      },
+      {
+        group: GROUP,
+        keys: "o",
+        label: "Open row",
+        run: () => this.run((row) => row.open()),
+      },
+      {
+        group: GROUP,
+        keys: "x",
+        label: "Mark entry reviewed",
+        run: () => this.run((row) => row.review?.()),
+      },
+    ],
+    id: "dashboard",
+    items: () => this.rows,
+    key: (row) => row.key,
+  });
+
+  private run(action: (row: Row) => void) {
+    if (this.nav.current) {
+      action(this.nav.current);
+    }
+  }
+
+  add(section: Section) {
+    this.sections = [...this.sections, section].sort(
+      (a, b) => a.order - b.order
+    );
+    return () => {
+      this.sections = this.sections.filter((s) => s !== section);
+    };
+  }
+
+  id(key: string) {
+    return this.nav.rowId(this.index.get(key) ?? -1);
+  }
+
+  point(key: string) {
+    this.nav.cursor = this.index.get(key) ?? -1;
+  }
+
+  rowClass(key: string) {
+    return this.nav.current?.key === key
+      ? "bg-row-cursor shadow-[inset_2px_0_0_var(--ff-brand)]"
+      : "hover:bg-row-hover";
+  }
+}
+
+export type { Column };
+
+export function provideColumn() {
+  const column = new Column();
+  setContext(CONTEXT, column);
+  column.nav.use();
+  return column;
+}
+
+export function useColumn(order: number, rows: () => Row[]) {
+  const column = getContext<Column>(CONTEXT);
+  onMount(() => column.add({ order, rows }));
+  return column;
+}
diff --git a/src/lib/dashboard/primary.svelte.ts b/src/lib/dashboard/primary.svelte.ts
new file mode 100644
index 0000000..16d970d
--- /dev/null
+++ b/src/lib/dashboard/primary.svelte.ts
@@ -0,0 +1,137 @@
+import { api } from "#lib/api/client.js";
+import { all } from "#lib/api/lists.js";
+import type { ExchangeRate, Page, TransactionGroup } from "#lib/api/types.js";
+import { formatMoney, toNumber } from "#lib/format.js";
+import { session } from "#lib/session.svelte.js";
+
+const KEY = "ffui.dashboard.in-primary";
+const OWN_SAMPLE = 100;
+const HOUR_MS = 3_600_000;
+
+export interface Rate {
+  own: boolean;
+  rate: number;
+}
+
+export interface Part {
+  amount: number;
+  code: string;
+}
+
+export function median(values: number[]): number {
+  const sorted = [...values].sort((a, b) => a - b);
+  const mid = Math.floor(sorted.length / 2);
+  return sorted.length % 2 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
+}
+
+class InPrimary {
+  on = $state(
+    typeof localStorage !== "undefined" && localStorage.getItem(KEY) === "1"
+  );
+
+  toggle() {
+    this.on = !this.on;
+    localStorage.setItem(KEY, this.on ? "1" : "0");
+  }
+}
+
+export const inPrimary = new InPrimary();
+
+function ownRates(
+  groups: { attributes: TransactionGroup }[],
+  primary: string
+): Record<string, Rate> {
+  const implied = new Map<string, number[]>();
+  const add = (code: string, rate: number) =>
+    implied.set(code, [...(implied.get(code) ?? []), rate]);
+  for (const s of groups.flatMap((g) => g.attributes.transactions)) {
+    const amount = toNumber(s.amount);
+    const foreign = toNumber(s.foreign_amount);
+    if (!(amount && foreign && s.foreign_currency_code && s.currency_code)) {
+      continue;
+    }
+    if (s.currency_code === primary) {
+      add(s.foreign_currency_code, amount / foreign);
+    } else if (s.foreign_currency_code === primary) {
+      add(s.currency_code, foreign / amount);
+    }
+  }
+  return Object.fromEntries(
+    [...implied].map(([code, values]) => [
+      code,
+      { own: true, rate: median(values) },
+    ])
+  );
+}
+
+function listedRates(
+  listed: { attributes: ExchangeRate }[],
+  primary: string
+): Record<string, Rate> {
+  const rates: Record<string, Rate> = {};
+  const dated = new Map<string, string>();
+  for (const { attributes: r } of listed) {
+    const direct = r.to_currency_code === primary;
+    const code = direct ? r.from_currency_code : r.to_currency_code;
+    const rate = toNumber(r.rate);
+    const date = r.date ?? "";
+    const usable = direct || r.from_currency_code === primary;
+    if (code && rate && usable && date >= (dated.get(code) ?? "")) {
+      dated.set(code, date);
+      rates[code] = { own: false, rate: direct ? rate : 1 / rate };
+    }
+  }
+  return rates;
+}
+
+async function loadRates(primary: string): Promise<Record<string, Rate>> {
+  const [listed, own] = await Promise.all([
+    all<ExchangeRate>("/v1/exchange-rates"),
+    api<Page<TransactionGroup>>("/v1/search/transactions", {
+      query: { limit: OWN_SAMPLE, query: "has_foreign_amount:true" },
+    }),
+  ]);
+  return {
+    ...ownRates(own.data, primary),
+    ...listedRates(listed, primary),
+    [primary]: { own: false, rate: 1 },
+  };
+}
+
+export const ratesQuery = () => ({
+  enabled: inPrimary.on,
+  queryFn: () => loadRates(session.primary?.code ?? ""),
+  queryKey: ["dashboard-rates", session.primary?.code ?? ""],
+  staleTime: HOUR_MS,
+});
+
+export function inPrimaryTotal(
+  parts: Part[],
+  rates: Record<string, Rate> | undefined
+): number | null {
+  if (!(inPrimary.on && rates)) {
+    return null;
+  }
+  let total = 0;
+  for (const part of parts) {
+    const rate = rates[part.code];
+    if (!rate) {
+      return null;
+    }
+    total += part.amount * rate.rate;
+  }
+  return total;
+}
+
+export function formatPrimary(amount: number, signed = false): string {
+  const { primary } = session;
+  return `≈${formatMoney(
+    {
+      amount,
+      code: primary?.code,
+      decimals: primary?.decimal_places,
+      symbol: primary?.symbol,
+    },
+    signed
+  )}`;
+}
diff --git a/src/lib/dashboard/reviewed.svelte.ts b/src/lib/dashboard/reviewed.svelte.ts
new file mode 100644
index 0000000..45972f8
--- /dev/null
+++ b/src/lib/dashboard/reviewed.svelte.ts
@@ -0,0 +1,70 @@
+const UNTIL_KEY = "ffui.reviewed-until";
+const IDS_KEY = "ffui.reviewed-ids";
+const FIRST_LOOK_MS = 2 * 86_400_000;
+
+export interface Entry {
+  at: string;
+  id: string;
+}
+
+const time = (value: string) => Date.parse(value);
+
+function read(key: string): string | null {
+  return typeof localStorage === "undefined" ? null : localStorage.getItem(key);
+}
+
+class Reviewed {
+  until = $state(read(UNTIL_KEY) ?? "");
+  ids = $state.raw(new Set<string>(JSON.parse(read(IDS_KEY) ?? "[]")));
+
+  constructor() {
+    if (!this.until && typeof localStorage !== "undefined") {
+      const first = new Date(Date.now() - FIRST_LOOK_MS).toISOString();
+      this.save(first, this.ids);
+    }
+  }
+
+  isNew(entry: Entry) {
+    return time(entry.at) > time(this.until) && !this.ids.has(entry.id);
+  }
+
+  toggle(entry: Entry) {
+    const ids = new Set(this.ids);
+    if (this.isNew(entry)) {
+      ids.add(entry.id);
+    } else {
+      ids.delete(entry.id);
+    }
+    this.save(this.until, ids);
+  }
+
+  all(entries: Entry[]) {
+    const newest = Math.max(
+      time(this.until),
+      ...entries.map((e) => time(e.at))
+    );
+    this.save(new Date(newest).toISOString(), new Set());
+  }
+
+  compact(entries: Entry[]) {
+    const after = entries
+      .filter((e) => time(e.at) > time(this.until))
+      .sort((a, b) => time(a.at) - time(b.at));
+    const open = after.find((e) => !this.ids.has(e.id));
+    const limit = open ? time(open.at) : Number.POSITIVE_INFINITY;
+    const done = after.filter((e) => time(e.at) < limit);
+    const ids = after
+      .filter((e) => time(e.at) >= limit && this.ids.has(e.id))
+      .map((e) => e.id);
+    this.save(done.at(-1)?.at ?? this.until, new Set(ids));
+  }
+
+  private save(until: string, ids: Set<string>) {
+    this.until = until;
+    this.ids = ids;
+    localStorage.setItem(UNTIL_KEY, until);
+    localStorage.setItem(IDS_KEY, JSON.stringify([...ids]));
+  }
+}
+
+export const reviewed = new Reviewed();
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index fba74e1..2279339 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,93 +1,92 @@
 <script lang="ts">
-  import { createQuery, keepPreviousData } from "@tanstack/svelte-query";
-  import AccountBox from "#lib/components/dashboard/AccountBox.svelte";
+  import { createQuery } from "@tanstack/svelte-query";
+  import AccountsBlock from "#lib/components/dashboard/AccountsBlock.svelte";
   import AccountsChart from "#lib/components/dashboard/AccountsChart.svelte";
   import BudgetsChart from "#lib/components/dashboard/BudgetsChart.svelte";
   import CategoriesChart from "#lib/components/dashboard/CategoriesChart.svelte";
   import DebtsBox from "#lib/components/dashboard/DebtsBox.svelte";
-  import {
-    accountsChartQuery,
-    accountsQuery,
-    seriesPoints,
-  } from "#lib/components/dashboard/data.js";
+  import DueBox from "#lib/components/dashboard/DueBox.svelte";
+  import { accountsQuery } from "#lib/components/dashboard/data.js";
+  import InboxBox from "#lib/components/dashboard/InboxBox.svelte";
   import InfoBoxes from "#lib/components/dashboard/InfoBoxes.svelte";
   import InsightBox from "#lib/components/dashboard/InsightBox.svelte";
+  import PaceBox from "#lib/components/dashboard/PaceBox.svelte";
   import PiggyBanksBox from "#lib/components/dashboard/PiggyBanksBox.svelte";
   import SubscriptionsBox from "#lib/components/dashboard/SubscriptionsBox.svelte";
   import PageHeader from "#lib/components/shell/PageHeader.svelte";
-  import { today } from "#lib/dates.js";
+  import Checkbox from "#lib/components/ui/checkbox/checkbox.svelte";
+  import { provideColumn } from "#lib/dashboard/column.svelte.js";
+  import { inPrimary, ratesQuery } from "#lib/dashboard/primary.svelte.js";
+  import { useKeys } from "#lib/keys.svelte.js";
   import { period } from "#lib/period.svelte.js";
   import { session } from "#lib/session.svelte.js";
 
-  const assets = createQuery(() => ({
-    ...accountsQuery("asset", period.start, period.end),
-    placeholderData: keepPreviousData,
-  }));
-  const chart = createQuery(() => ({
-    ...accountsChartQuery(period.start, period.end),
-    placeholderData: keepPreviousData,
-  }));
+  provideColumn();
 
-  const frontpage = $derived.by(() => {
-    const list = (assets.data ?? [])
-      .filter((a) => a.attributes.active !== false)
-      .sort((a, b) => (a.attributes.order ?? 0) - (b.attributes.order ?? 0));
-    if (!("frontpageAccounts" in session.prefs)) {
-      return list;
-    }
-    const ids = new Set(session.frontpageAccounts);
-    return list.filter((a) => ids.has(a.id));
-  });
+  const rates = createQuery(() => ratesQuery());
+  const primary = $derived(session.primary?.code ?? "");
+  const ownRates = $derived(
+    inPrimary.on && Object.values(rates.data ?? {}).some((r) => r.own)
+  );
 
-  const trends = $derived(
-    new Map(
-      (chart.data ?? []).map((set) => {
-        const points = seriesPoints(set, false);
-        return [
-          set.label,
-          {
-            marker: points.findIndex((p) => p.x === today()),
-            values: points.map((p) => p.y),
-          },
-        ];
-      })
-    )
+  useKeys(() => [
+    {
+      group: "Dashboard",
+      keys: "$",
+      label: `Show totals in ${primary}`,
+      run: () => inPrimary.toggle(),
+    },
+  ]);
+
+  const assets = createQuery(() =>
+    accountsQuery("asset", period.start, period.end)
   );
 
   $effect(() => {
-    if (
-      assets.isSuccess &&
-      !assets.isPlaceholderData &&
-      assets.data.length === 0
-    ) {
+    if (assets.isSuccess && assets.data.length === 0) {
       location.assign("/new-user");
     }
   });
 </script>
 
-<PageHeader subtitle="What's playing?" title="Dashboard" />
+<PageHeader subtitle="What's playing?" title="Dashboard">
+  {#snippet actions()}
+    <div class="flex items-center gap-1.5 text-[12px] text-cladd-fg-soft">
+      <Checkbox
+        checked={inPrimary.on}
+        id="in-primary"
+        onCheckedChange={() => inPrimary.toggle()}
+      />
+      <label for="in-primary">Show in {primary}</label>
+      <span class="hidden sm:inline"><span class="kbd">$</span></span>
+      {#if ownRates}
+        <span>≈ from your own exchanges</span>
+      {/if}
+    </div>
+  {/snippet}
+</PageHeader>
 
 <InfoBoxes />
 
-<div class="mt-3 grid gap-3 lg:grid-cols-12">
-  <div class="flex min-w-0 flex-col gap-3 lg:col-span-8">
+<div
+  class="mt-3 grid gap-3 xl:grid-cols-[minmax(0,1fr)_minmax(25rem,36%)] xl:grid-rows-[auto_1fr]"
+>
+  <PaceBox class="xl:col-start-1" />
+  <div
+    class="flex min-w-0 flex-col gap-3 xl:col-start-2 xl:row-span-2 xl:row-start-1"
+  >
+    <AccountsBlock />
+    <InboxBox />
+    <DueBox />
+    <DebtsBox />
+    <SubscriptionsBox />
+    <PiggyBanksBox />
+  </div>
+  <div class="flex min-w-0 flex-col gap-3 self-start xl:col-start-1">
     <AccountsChart />
     <BudgetsChart />
     <CategoriesChart />
   </div>
-  <div class="flex min-w-0 flex-col gap-3 lg:col-span-4">
-    {#each frontpage as account (account.id)}
-      {@const trend = trends.get(account.attributes.name)}
-      <AccountBox
-        {account}
-        marker={trend?.marker ?? -1}
-        trend={trend?.values ?? []}
-      />
-    {/each}
-    <SubscriptionsBox />
-    <PiggyBanksBox />
-    <DebtsBox />
-  </div>
 </div>
 
 <div class="mt-3 flex flex-col gap-3">