From 429660937699d3d14cd13a75d654a7c68f96944e Mon Sep 17 00:00:00 2001
From: RyuseiTaniguchi <taniguchi.ryusei@gmail.com>
Date: Mon, 7 Sep 2026 08:59:14 +0900
Subject: [PATCH 1/3] feat(transactions): let transfers recede in the list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#159 stopped investment activity counting toward spending, but the list
still rendered those rows at full weight — the arithmetic changed and the
page did not. A day holding a $1,000 brokerage buy read as $1,000 gone
while Reports, Budgets and the dashboard all disagreed.

Transfer rows now take muted text rather than `opacity-60`: opacity is
already spent on `pending`, and stacking the two leaves a pending transfer
barely readable. Muting the amount also drops its `text-positive` green,
which money moved between your own accounts never earned.

Date headers net spending only, and name the two counts apart once a
transfer is present ("2 spending · 2 transfers") — the count and the net
beside it otherwise described different sets of rows with nothing saying so.
---
 src/components/molecules/entity-avatar.tsx    |  4 +-
 .../molecules/transaction-date-header.tsx     | 22 ++++---
 src/components/molecules/transaction-row.tsx  | 21 ++++++-
 src/components/organisms/transaction-list.tsx |  9 +--
 src/lib/transaction-day-summary.test.ts       | 52 +++++++++++++++++
 src/lib/transaction-day-summary.ts            | 57 +++++++++++++++++++
 6 files changed, 147 insertions(+), 18 deletions(-)
 create mode 100644 src/lib/transaction-day-summary.test.ts
 create mode 100644 src/lib/transaction-day-summary.ts

diff --git a/src/components/molecules/entity-avatar.tsx b/src/components/molecules/entity-avatar.tsx
index 8d965bd..43c89fa 100644
--- a/src/components/molecules/entity-avatar.tsx
+++ b/src/components/molecules/entity-avatar.tsx
@@ -9,6 +9,7 @@ interface EntityAvatarProps {
   primaryColor?: string | null;
   pfcPrimary?: string | null;
   size?: "sm" | "md";
+  className?: string;
 }
 
 const fallbackTextClass = {
@@ -23,12 +24,13 @@ export function EntityAvatar({
   primaryColor,
   pfcPrimary,
   size = "md",
+  className,
 }: EntityAvatarProps) {
   const resolved = resolveEntityLogo({ logoUrl, logoBase64, name, primaryColor, pfcPrimary });
   const { initial, backgroundColor } = getInitials(name, primaryColor);
 
   return (
-    <Avatar size={size === "sm" ? "sm" : "default"} aria-hidden="true">
+    <Avatar size={size === "sm" ? "sm" : "default"} className={className} aria-hidden="true">
       {resolved.type === "image" && (
         <AvatarImage src={resolved.src} alt="" className="bg-white" />
       )}
diff --git a/src/components/molecules/transaction-date-header.tsx b/src/components/molecules/transaction-date-header.tsx
index 9df853e..ccce442 100644
--- a/src/components/molecules/transaction-date-header.tsx
+++ b/src/components/molecules/transaction-date-header.tsx
@@ -1,16 +1,15 @@
 import { AmountDisplay } from "@/components/atoms/amount-display";
+import { dayCountLabel, type DaySummary } from "@/lib/transaction-day-summary";
 
 interface TransactionDateHeaderProps {
   date: string;
-  transactionCount: number;
-  netAmount: number;
+  summary: DaySummary;
   currency?: string;
 }
 
 export function TransactionDateHeader({
   date,
-  transactionCount,
-  netAmount,
+  summary,
   currency = "USD",
 }: TransactionDateHeaderProps) {
   const formatted = new Date(date + "T00:00:00").toLocaleDateString("en-US", {
@@ -22,11 +21,16 @@ export function TransactionDateHeader({
   return (
     <div className="sticky top-0 z-10 flex items-center gap-2 h-8 px-2 bg-background border-b group-data-[bulk-active]/list:top-14">
       <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">{formatted}</span>
-      <span className="text-xs text-muted-foreground">
-        ·  {transactionCount} transaction{transactionCount !== 1 ? "s" : ""}
-      </span>
-      <span className="text-xs text-muted-foreground">·</span>
-      <AmountDisplay amount={netAmount} currency={currency} className="text-xs" />
+      <span className="text-xs text-muted-foreground">·  {dayCountLabel(summary)}</span>
+      {/* A day of nothing but transfers has no spending to net, and "+$0.00"
+          beside "2 transfers" reads as a day that earned nothing rather than a
+          day that was never counted. */}
+      {summary.spendingCount > 0 && (
+        <>
+          <span className="text-xs text-muted-foreground">·</span>
+          <AmountDisplay amount={summary.net} currency={currency} className="text-xs" />
+        </>
+      )}
     </div>
   );
 }
diff --git a/src/components/molecules/transaction-row.tsx b/src/components/molecules/transaction-row.tsx
index d2b79be..2426671 100644
--- a/src/components/molecules/transaction-row.tsx
+++ b/src/components/molecules/transaction-row.tsx
@@ -97,10 +97,18 @@ export const TransactionRow = memo(function TransactionRow({
           name={txn.merchantName ?? txn.name}
           pfcPrimary={txn.pfcPrimary}
           size="sm"
+          className={cn(txn.isTransfer && "opacity-60")}
         />
         <div className="flex items-center gap-1.5 min-w-0 overflow-hidden">
           {txn.pending && <Clock className="size-3 text-muted-foreground shrink-0" />}
-          <span className="font-medium truncate">{txn.name}</span>
+          <span
+            className={cn(
+              "truncate",
+              txn.isTransfer ? "font-normal text-muted-foreground" : "font-medium",
+            )}
+          >
+            {txn.name}
+          </span>
           {txn.originalName !== txn.name && (
             <span className="text-xs text-muted-foreground hidden group-hover/row:inline truncate">
               ({txn.originalName})
@@ -133,8 +141,17 @@ export const TransactionRow = memo(function TransactionRow({
         />
       </div>
 
+      {/* Transfers recede by colour, not by `opacity-60` — that is already spent
+          on `pending`, and stacking the two leaves a pending transfer barely
+          readable. Muting the amount also drops its `text-positive` green,
+          which a transfer into an account never earned. */}
       <div className="text-right">
-        <AmountDisplay amount={txn.normalizedAmount} currency={txn.currency} pending={txn.pending} />
+        <AmountDisplay
+          amount={txn.normalizedAmount}
+          currency={txn.currency}
+          pending={txn.pending}
+          className={cn(txn.isTransfer && "font-normal text-muted-foreground")}
+        />
       </div>
     </div>
   );
diff --git a/src/components/organisms/transaction-list.tsx b/src/components/organisms/transaction-list.tsx
index 8d3ed4d..2962d90 100644
--- a/src/components/organisms/transaction-list.tsx
+++ b/src/components/organisms/transaction-list.tsx
@@ -12,6 +12,7 @@ import { BulkActionBar } from "@/components/molecules/bulk-action-bar";
 import { TransactionDetailPanel } from "@/components/organisms/transaction-detail-panel";
 import { loadMoreTransactions } from "@/actions/transactions";
 import { groupByDate } from "@/lib/transactions";
+import { summarizeDay } from "@/lib/transaction-day-summary";
 import { useSelectedTransaction } from "@/hooks/use-selected-transaction";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
@@ -143,14 +144,10 @@ export function TransactionList({
         </div>
 
         {groups.map((group) => {
-          const netAmount = group.rows.reduce((sum, r) => sum + r.normalizedAmount, 0);
+          const summary = summarizeDay(group.rows);
           return (
             <div key={group.date}>
-              <TransactionDateHeader
-                date={group.date}
-                transactionCount={group.rows.length}
-                netAmount={netAmount}
-              />
+              <TransactionDateHeader date={group.date} summary={summary} />
               {group.rows.map((txn) => (
                 <TransactionRow
                   key={txn.id}
diff --git a/src/lib/transaction-day-summary.test.ts b/src/lib/transaction-day-summary.test.ts
new file mode 100644
index 0000000..13ff551
--- /dev/null
+++ b/src/lib/transaction-day-summary.test.ts
@@ -0,0 +1,52 @@
+import { describe, it, expect } from "vitest";
+import { summarizeDay, dayCountLabel } from "./transaction-day-summary";
+
+const spend = (normalizedAmount: number) => ({ isTransfer: false, normalizedAmount });
+const transfer = (normalizedAmount: number) => ({ isTransfer: true, normalizedAmount });
+
+describe("summarizeDay", () => {
+  it("excludes transfers from the net", () => {
+    const summary = summarizeDay([spend(-8642), transfer(-100000), spend(-1860)]);
+
+    expect(summary.net).toBe(-10502);
+    expect(summary.spendingCount).toBe(2);
+    expect(summary.transferCount).toBe(1);
+  });
+
+  it("nets a day of spending alone unchanged", () => {
+    expect(summarizeDay([spend(420000), spend(-1199)]).net).toBe(418801);
+  });
+
+  it("reports a zero net for a day that is only transfers", () => {
+    const summary = summarizeDay([transfer(-50000), transfer(1275)]);
+
+    expect(summary).toEqual({ spendingCount: 0, transferCount: 2, net: 0 });
+  });
+
+  // isTransfer is nullable on the row, and a null must not be read as a transfer.
+  it("counts a null isTransfer as spending", () => {
+    const summary = summarizeDay([{ isTransfer: null, normalizedAmount: -500 }]);
+
+    expect(summary).toEqual({ spendingCount: 1, transferCount: 0, net: -500 });
+  });
+});
+
+describe("dayCountLabel", () => {
+  it("says 'transactions' while no transfer is present", () => {
+    expect(dayCountLabel({ spendingCount: 4, transferCount: 0, net: 0 })).toBe("4 transactions");
+    expect(dayCountLabel({ spendingCount: 1, transferCount: 0, net: 0 })).toBe("1 transaction");
+  });
+
+  it("names the two counts apart once a transfer is present", () => {
+    expect(dayCountLabel({ spendingCount: 2, transferCount: 2, net: 0 })).toBe(
+      "2 spending · 2 transfers",
+    );
+    expect(dayCountLabel({ spendingCount: 2, transferCount: 1, net: 0 })).toBe(
+      "2 spending · 1 transfer",
+    );
+  });
+
+  it("drops the spending half when the day is only transfers", () => {
+    expect(dayCountLabel({ spendingCount: 0, transferCount: 2, net: 0 })).toBe("2 transfers");
+  });
+});
diff --git a/src/lib/transaction-day-summary.ts b/src/lib/transaction-day-summary.ts
new file mode 100644
index 0000000..84db333
--- /dev/null
+++ b/src/lib/transaction-day-summary.ts
@@ -0,0 +1,57 @@
+/**
+ * Per-day totals for the transaction list's date headers.
+ *
+ * Transfers are left out of the net for the same reason Reports, Budgets and
+ * the dashboard leave them out: moving money between your own accounts is not
+ * spending. The date header was the last total in the app that still counted
+ * them, so after #159 tagged investment activity as a transfer, a day holding a
+ * $1,000 brokerage buy still read as $1,000 gone while every other figure on
+ * the site disagreed.
+ */
+
+export interface DayRow {
+  isTransfer: boolean | null;
+  normalizedAmount: number;
+}
+
+export interface DaySummary {
+  spendingCount: number;
+  transferCount: number;
+  net: number;
+}
+
+export function summarizeDay(rows: DayRow[]): DaySummary {
+  let spendingCount = 0;
+  let transferCount = 0;
+  let net = 0;
+
+  for (const row of rows) {
+    if (row.isTransfer) {
+      transferCount += 1;
+      continue;
+    }
+    spendingCount += 1;
+    net += row.normalizedAmount;
+  }
+
+  return { spendingCount, transferCount, net };
+}
+
+/**
+ * "4 transactions" while a day is all spending; the two counts are named apart
+ * once a transfer is present. Without the split the count and the net beside it
+ * describe different sets of rows with nothing on screen saying so.
+ */
+export function dayCountLabel({ spendingCount, transferCount }: DaySummary): string {
+  if (transferCount === 0) {
+    return `${spendingCount} ${plural(spendingCount, "transaction")}`;
+  }
+  if (spendingCount === 0) {
+    return `${transferCount} ${plural(transferCount, "transfer")}`;
+  }
+  return `${spendingCount} spending · ${transferCount} ${plural(transferCount, "transfer")}`;
+}
+
+function plural(n: number, word: string): string {
+  return n === 1 ? word : `${word}s`;
+}

From ca1107e36b7bea7501bcd8d32436123502aa84c2 Mon Sep 17 00:00:00 2001
From: RyuseiTaniguchi <taniguchi.ryusei@gmail.com>
Date: Mon, 7 Sep 2026 08:59:40 +0900
Subject: [PATCH 2/3] feat(dashboard): show the assets and debts behind net
 worth
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

$77,506.89 could be a paid-off house or a leveraged brokerage account.
The hero stated one number and nothing about the position producing it.

getDashboardSummary already summed both sides to produce netWorth and then
threw them away; it now returns them. The pair sits on the figure row
rather than under it, so the hero keeps its height on a page that already
has a lot below it, and it uses BalanceDisplay — the component the Accounts
page totals its groups with — so a debt reads as a debt here without a
second colour convention.
---
 src/app/(dashboard)/page.tsx                |  2 ++
 src/components/organisms/net-worth-hero.tsx | 33 +++++++++++++++++++++
 src/queries/dashboard.ts                    |  7 +++++
 3 files changed, 42 insertions(+)

diff --git a/src/app/(dashboard)/page.tsx b/src/app/(dashboard)/page.tsx
index 2412774..8457952 100644
--- a/src/app/(dashboard)/page.tsx
+++ b/src/app/(dashboard)/page.tsx
@@ -129,6 +129,8 @@ export default async function DashboardPage() {
       <TransferReviewNudge suggestedCount={suggestedTransferCount} />
       <NetWorthHero
         netWorth={summary.netWorth}
+        assets={summary.assets}
+        liabilities={summary.liabilities}
         initialHistory={netWorthHistory}
         initialRange={heroRange}
         fullCoverageSince={fullCoverageSince}
diff --git a/src/components/organisms/net-worth-hero.tsx b/src/components/organisms/net-worth-hero.tsx
index 8b24d4e..3f34c15 100644
--- a/src/components/organisms/net-worth-hero.tsx
+++ b/src/components/organisms/net-worth-hero.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useTransition, useMemo } from "react";
 import { NetWorthAreaChart } from "@/components/atoms/net-worth-area-chart";
+import { BalanceDisplay } from "@/components/atoms/balance-display";
 import { DateRangeSelector } from "@/components/molecules/date-range-selector";
 import { centsToDisplay } from "@/lib/money";
 import { formatDateShort } from "@/lib/date-utils";
@@ -20,6 +21,9 @@ const RANGE_LABELS: Record<string, string> = {
 
 interface NetWorthHeroProps {
   netWorth: number;
+  /** Signed totals behind `netWorth`; liabilities arrive negative. */
+  assets: number;
+  liabilities: number;
   initialHistory: NetWorthPoint[];
   initialRange?: string;
   /**
@@ -31,6 +35,8 @@ interface NetWorthHeroProps {
 
 export function NetWorthHero({
   netWorth,
+  assets,
+  liabilities,
   initialHistory,
   initialRange,
   fullCoverageSince = null,
@@ -71,6 +77,7 @@ export function NetWorthHero({
   const coverage = coverageBoundary(trimmed);
   const trimmedTo = trimmed !== history ? fullBoundary : null;
   const [dollars, cents] = centsToDisplay(netWorth).split(".");
+  const hasPosition = assets !== 0 || liabilities !== 0;
 
   function handleRangeChange(next: string) {
     setRange(next);
@@ -126,6 +133,32 @@ export function NetWorthHero({
                   : "history incomplete"}
               </span>
             )}
+            {/* The two sides of the number beside them, on the same row: net
+                worth alone cannot tell a paid-off house from a leveraged
+                brokerage account. No border or fill — these are its operands,
+                not separate figures, and the hero keeps its height because the
+                row already had the width. Hidden only when there is nothing to
+                divide, so an empty household is not shown two zeroes. */}
+            {hasPosition && (
+              <dl className="flex items-baseline gap-6 sm:ml-3">
+                {[
+                  { label: "Assets", amount: assets },
+                  { label: "Debts", amount: liabilities },
+                ].map(({ label, amount }) => (
+                  <div key={label}>
+                    <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                      {label}
+                    </dt>
+                    <dd>
+                      {/* BalanceDisplay, as the Accounts page totals its groups
+                          with -- it already tints a negative, so debts read as
+                          debts here without a second colour convention. */}
+                      <BalanceDisplay amount={amount} size="md" className="font-semibold" />
+                    </dd>
+                  </div>
+                ))}
+              </dl>
+            )}
           </div>
         </div>
         <DateRangeSelector value={range} onChange={handleRangeChange} support={support} />
diff --git a/src/queries/dashboard.ts b/src/queries/dashboard.ts
index c555509..088af75 100644
--- a/src/queries/dashboard.ts
+++ b/src/queries/dashboard.ts
@@ -19,6 +19,11 @@ import { baseTransactionQuery, type TransactionRow } from "./transactions";
 
 export interface DashboardSummary {
   netWorth: number;
+  /** The two sides netWorth is the difference of. Both were already summed to
+   *  produce it; the hero shows them so a net worth reads as a position rather
+   *  than a bare number. Liabilities are negative, per schema/accounts.ts. */
+  assets: number;
+  liabilities: number;
   monthlyIncome: number;
   monthlyExpenses: number;
   monthlyNet: number;
@@ -111,6 +116,8 @@ export async function getDashboardSummary(
     // Plain sum — liability balances are already stored negative, so
     // subtracting them would add the debt. See schema/accounts.ts.
     netWorth: totalAssets + totalLiabilities,
+    assets: totalAssets,
+    liabilities: totalLiabilities,
     monthlyIncome,
     monthlyExpenses,
     monthlyNet: monthlyIncome - monthlyExpenses,

From 68998d467e5c41e2e4ecba2cf76250774af0e265 Mon Sep 17 00:00:00 2001
From: RyuseiTaniguchi <taniguchi.ryusei@gmail.com>
Date: Mon, 7 Sep 2026 08:59:51 +0900
Subject: [PATCH 3/3] feat(dashboard): group account balances by type, with
 subtotals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The widget flattened every account into one undifferentiated table, so an
$18,240 savings balance and a -$8,400 loan read as the same kind of number
with nothing marking which side of the sheet each was on.

Reuses groupAccountsByType — the helper already behind the Accounts page —
rather than adding a second grouping, so the widget and the page it links
to name, order and total their sections identically.

The raw <table> stays deliberately: shadcn's <Table> wraps itself in an
`overflow-x-auto` container, which is the horizontal scrollbar #159 removed
from this widget. Group headers are ordinary rows of the same table so the
pinned balance column still can't be pushed past the card's edge.
---
 src/app/(dashboard)/page.tsx                  | 26 +++---
 src/components/organisms/dashboard-grid.tsx   |  1 +
 .../organisms/widgets/account-balances.tsx    | 79 +++++++++++++------
 3 files changed, 69 insertions(+), 37 deletions(-)

diff --git a/src/app/(dashboard)/page.tsx b/src/app/(dashboard)/page.tsx
index 8457952..7bf880c 100644
--- a/src/app/(dashboard)/page.tsx
+++ b/src/app/(dashboard)/page.tsx
@@ -71,18 +71,20 @@ export default async function DashboardPage() {
   // same bank marks the accounts page does, rather than falling back to generic
   // type glyphs for accounts it has a logo for.
   const accounts = accountGroups.flatMap((group) =>
-    group.accounts
-      .filter((a) => !a.isHidden)
-      .map((a) => ({
-        id: a.id,
-        name: a.name,
-        type: a.type,
-        currentBalance: a.currentBalance,
-        currency: a.currency,
-        institutionName: group.institutionName,
-        logoBase64: group.logoBase64,
-        primaryColor: group.primaryColor,
-      })),
+    group.accounts.map((a) => ({
+      id: a.id,
+      name: a.name,
+      type: a.type,
+      currentBalance: a.currentBalance,
+      currency: a.currency,
+      // Carried rather than filtered here: the balances widget regroups these
+      // with groupAccountsByType, which drops hidden accounts itself so its
+      // subtotals match the ones on the Accounts page.
+      isHidden: a.isHidden,
+      institutionName: group.institutionName,
+      logoBase64: group.logoBase64,
+      primaryColor: group.primaryColor,
+    })),
   );
 
   // The Spending tile reports `spendingMonth`, which is the latest month with
diff --git a/src/components/organisms/dashboard-grid.tsx b/src/components/organisms/dashboard-grid.tsx
index fec4432..9a747ef 100644
--- a/src/components/organisms/dashboard-grid.tsx
+++ b/src/components/organisms/dashboard-grid.tsx
@@ -34,6 +34,7 @@ export interface DashboardData {
     type: AccountType;
     currentBalance: number | null;
     currency: string | null;
+    isHidden: boolean | null;
     institutionName: string;
     logoBase64: string | null;
     primaryColor: string | null;
diff --git a/src/components/organisms/widgets/account-balances.tsx b/src/components/organisms/widgets/account-balances.tsx
index 466d25d..91bbe49 100644
--- a/src/components/organisms/widgets/account-balances.tsx
+++ b/src/components/organisms/widgets/account-balances.tsx
@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { accountDisplayName } from "@/lib/account-name";
+import { groupAccountsByType } from "@/lib/group-accounts-by-type";
 import { EntityAvatar } from "@/components/molecules/entity-avatar";
 import { BalanceDisplay } from "@/components/atoms/balance-display";
 import type { AccountType } from "@/db/schema/accounts";
@@ -12,6 +13,7 @@ interface AccountBalanceRow {
   type: AccountType;
   currentBalance: number | null;
   currency: string | null;
+  isHidden: boolean | null;
   institutionName: string;
   logoBase64: string | null;
   primaryColor: string | null;
@@ -22,7 +24,14 @@ interface AccountBalancesWidgetProps {
 }
 
 export function AccountBalancesWidget({ data }: AccountBalancesWidgetProps) {
-  if (data.length === 0) {
+  // The same grouping and the same subtotal component the Accounts page uses
+  // (organisms/account-list.tsx), so the widget and the page it links to name,
+  // order and total their sections identically. Flat, every balance read as the
+  // same kind of number: an $18,240 savings balance and a -$8,400 loan sat in
+  // one undifferentiated run with nothing marking which side each was on.
+  const groups = groupAccountsByType(data);
+
+  if (groups.length === 0) {
     return (
       <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
         <Link href="/accounts" className="text-primary hover:underline">Connect an account</Link>
@@ -36,12 +45,14 @@ export function AccountBalancesWidget({ data }: AccountBalancesWidgetProps) {
           visible headers, so they are screen-reader only -- without them the
           balances read as an undifferentiated run of numbers. */}
       <div className="flex-1 overflow-y-auto overflow-x-hidden">
-        {/* table-fixed pins the balance column to a fixed width so it can
-            never be pushed past the card's edge -- without it the balance
-            column grows to fit its content and drags a horizontal scrollbar
-            (and the card's own overflow-hidden) along with it. */}
+        {/* Deliberately not ui/table: shadcn's <Table> wraps itself in an
+            `overflow-x-auto` container, which is the horizontal scrollbar #159
+            removed from this widget. table-fixed plus a pinned balance column
+            is what keeps a long balance from pushing past the card's edge, and
+            the clipping parent above is what absorbs it when one still does.
+            Group headers are ordinary rows of this same table for that reason. */}
         <table className="w-full table-fixed">
-          <caption className="sr-only">Account balances</caption>
+          <caption className="sr-only">Account balances by type</caption>
           <colgroup>
             <col />
             <col className="w-24" />
@@ -52,30 +63,48 @@ export function AccountBalancesWidget({ data }: AccountBalancesWidgetProps) {
               <th scope="col">Balance</th>
             </tr>
           </thead>
-          <tbody>
-            {data.map((account) => (
-              <tr key={account.id}>
-                <td className="px-1 py-1.5">
-                  <div className="flex min-w-0 items-center gap-2">
-                    <EntityAvatar
-                      logoBase64={account.logoBase64}
-                      name={account.institutionName}
-                      primaryColor={account.primaryColor}
-                      size="sm"
-                    />
-                    <span className="truncate text-sm">{accountDisplayName(account.name)}</span>
-                  </div>
-                </td>
-                <td className="px-1 py-1.5 text-right whitespace-nowrap">
+          {groups.map((group) => (
+            <tbody key={group.key}>
+              <tr className="bg-muted/50">
+                <th
+                  scope="rowgroup"
+                  className="px-1.5 py-1 text-left text-xs font-semibold"
+                >
+                  {group.label}
+                </th>
+                <td className="px-1.5 py-1 text-right whitespace-nowrap">
                   <BalanceDisplay
-                    amount={account.currentBalance}
-                    currency={account.currency ?? "USD"}
+                    amount={group.subtotal}
+                    currency={group.accounts[0]?.currency ?? "USD"}
                     size="sm"
+                    className="text-xs font-semibold"
                   />
                 </td>
               </tr>
-            ))}
-          </tbody>
+              {group.accounts.map((account) => (
+                <tr key={account.id}>
+                  <td className="px-1 py-1.5">
+                    <div className="flex min-w-0 items-center gap-2">
+                      <EntityAvatar
+                        logoBase64={account.logoBase64}
+                        name={account.institutionName}
+                        primaryColor={account.primaryColor}
+                        size="sm"
+                      />
+                      <span className="truncate text-sm">{accountDisplayName(account.name)}</span>
+                    </div>
+                  </td>
+                  <td className="px-1 py-1.5 text-right whitespace-nowrap">
+                    <BalanceDisplay
+                      amount={account.currentBalance}
+                      currency={account.currency ?? "USD"}
+                      size="sm"
+                    />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          ))}
         </table>
       </div>
       <Link