diff --git a/src/routes/invoices.$invoiceId.tsx b/src/routes/invoices.$invoiceId.tsx
index 535eaae..2048dcc 100644
--- a/src/routes/invoices.$invoiceId.tsx
+++ b/src/routes/invoices.$invoiceId.tsx
@@ -114,6 +114,19 @@ function InvoiceDetail() {
     return Array.from(map.values());
   }, [items]);
 
+  // Billable fees vs billable expenses subtotals (non-billable items have amount 0 and are excluded).
+  const { feesSubtotal, expensesSubtotal } = useMemo(() => {
+    let fees = 0;
+    let exp = 0;
+    for (const it of items) {
+      const amt = Number(it.amount) || 0;
+      if (amt === 0) continue;
+      if (it.kind === "expense") exp += amt;
+      else fees += amt;
+    }
+    return { feesSubtotal: fees, expensesSubtotal: exp };
+  }, [items]);
+
   if (loading) return <PageContainer><p className="text-muted-foreground">Loading…</p></PageContainer>;
   if (!invoice) {
     return (
@@ -497,6 +510,8 @@ function InvoiceDetail() {
         <div className="space-y-4">
           <Card className="border-border/60">
             <CardContent className="p-5 space-y-2 text-sm">
+              <Row label="Fees subtotal" value={formatCurrency(feesSubtotal)} />
+              <Row label="Expenses subtotal" value={formatCurrency(expensesSubtotal)} />
               <Row label="Subtotal" value={formatCurrency(invoice.subtotal)} />
               <div className="flex justify-between items-center">
                 <span className="text-muted-foreground">Tax</span>