diff --git a/controlplane/admin/README.md b/controlplane/admin/README.md
index 16e628dc..4f7d73a5 100644
--- a/controlplane/admin/README.md
+++ b/controlplane/admin/README.md
@@ -90,6 +90,16 @@ Added for the console:
 | `POST /api/v1/operators` | admin | add/update an operator (`{email, role}`; last-admin demotion → 409) |
 | `DELETE /api/v1/operators/:email` | admin | remove an operator (removing the last admin → 409) |
 
+The Usage page currently presents storage only. It converts retained S3 GiB·h
+to GiB-month using the actual number of hours in the selected UTC calendar
+month. The storage-economics view defaults to the US customer pricing schedule;
+operators can switch it to EU. Customer tiers are progressive and calculated
+separately for each organization. The AWS cost is a capacity-only estimate using
+public S3 Standard us-east-1 rates across aggregate usage in the view, then
+allocated to organizations in proportion to their usage. It excludes requests, transfers,
+taxes, credits, negotiated discounts, and other AWS account usage, so it is not
+an invoice or an exact CUR charge.
+
 ### Cross-CP live-state aggregation (`live_aggregate.go` + `controlplane/live_aggregator.go`)
 
 Live session/query state is **in-memory per CP** — each replica only knows the
diff --git a/controlplane/admin/ui/src/components/InfoTooltip.tsx b/controlplane/admin/ui/src/components/InfoTooltip.tsx
new file mode 100644
index 00000000..02808a5c
--- /dev/null
+++ b/controlplane/admin/ui/src/components/InfoTooltip.tsx
@@ -0,0 +1,19 @@
+import { CircleHelp } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+export function InfoTooltip({ label, text }: { label: string; text: string }) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          aria-label={label}
+          className="inline-flex text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <CircleHelp className="h-3.5 w-3.5" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent className="max-w-sm leading-relaxed">{text}</TooltipContent>
+    </Tooltip>
+  );
+}
diff --git a/controlplane/admin/ui/src/lib/pricing.test.ts b/controlplane/admin/ui/src/lib/pricing.test.ts
index 50849ab1..34845812 100644
--- a/controlplane/admin/ui/src/lib/pricing.test.ts
+++ b/controlplane/admin/ui/src/lib/pricing.test.ts
@@ -1,63 +1,98 @@
 import { describe, expect, it } from "vitest";
-import { fmtMoney, orgTotals, parsePrice, scenarioCost, type PriceScenario } from "./pricing";
-import type { MonthlyUsageRow } from "@/types/api";
-
-const ROWS: MonthlyUsageRow[] = [
-  // acme: two teams in the same month → org totals must sum across teams.
-  { month: "2026-08", org_id: "acme", team_id: 5, schema_name: "team_5", cpu_seconds: 7200, memory_seconds: 3600, gib_seconds: 3600 },
-  { month: "2026-08", org_id: "acme", team_id: 6, schema_name: "team_6", cpu_seconds: 600, memory_seconds: 600, gib_seconds: 7200 },
-  { month: "2026-08", org_id: "globex", team_id: 9, schema_name: "team_9", cpu_seconds: 1200, memory_seconds: 0, gib_seconds: 0 },
-];
-
-describe("orgTotals", () => {
-  it("sums usage units per org across teams", () => {
-    const totals = orgTotals(ROWS);
-    expect(totals).toHaveLength(2);
-    // Sorted by org id for a stable table.
-    expect(totals[0].orgId).toBe("acme");
-    // acme: cpu (7200+600)/60 = 130 min; mem (3600+600)/60 = 70 GiB·min; storage (3600+7200)/3600 = 3 GiB·h.
-    expect(totals[0].cpuMinutes).toBeCloseTo(130);
-    expect(totals[0].memGiBMinutes).toBeCloseTo(70);
-    expect(totals[0].storageGiBHours).toBeCloseTo(3);
-    expect(totals[1].orgId).toBe("globex");
-    expect(totals[1].cpuMinutes).toBeCloseTo(20);
-  });
-
-  it("returns an empty list for no rows", () => {
-    expect(orgTotals([])).toEqual([]);
+import {
+  customerStoragePrice,
+  fmtMoney,
+  hoursInUTCMonth,
+  priceStorageByOrg,
+  storageGiBMonths,
+  type OrgUsageTotals,
+} from "./pricing";
+
+describe("storage pricing", () => {
+  it("converts GiB-hours using the actual UTC calendar month", () => {
+    expect(hoursInUTCMonth("2026-02")).toBe(672);
+    expect(hoursInUTCMonth("2028-02")).toBe(696);
+    expect(hoursInUTCMonth("2026-08")).toBe(744);
+    expect(storageGiBMonths(600 * 744, "2026-08")).toBe(600);
   });
-});
 
-describe("scenarioCost", () => {
-  it("multiplies each usage unit by its price", () => {
-    const s: PriceScenario = { id: "a", name: "A", cpuPerMin: 0.1, memPerGiBMin: 0.01, storagePerGiBH: 2 };
-    // acme: 130×0.1 + 70×0.01 + 3×2 = 13 + 0.7 + 6 = 19.7
-    const t = orgTotals(ROWS)[0];
-    expect(scenarioCost(t, s)).toBeCloseTo(19.7);
+  it("applies the customer US tiers progressively with binary TiB boundaries", () => {
+    expect(customerStoragePrice(100, "US")).toBe(0);
+    expect(customerStoragePrice(600, "US")).toBeCloseTo(19.5);
+    // The supplied definition says 1 TiB = 1024 GiB. Consequently 37,200
+    // GiB prices to $971.34; $969.90 would use contradictory decimal-TB cuts.
+    expect(customerStoragePrice(37_200, "US")).toBeCloseTo(971.34);
   });
 
-  it("zero prices cost zero", () => {
-    const s: PriceScenario = { id: "z", name: "Z", cpuPerMin: 0, memPerGiBMin: 0, storagePerGiBH: 0 };
-    expect(scenarioCost(orgTotals(ROWS)[1], s)).toBe(0);
+  it("applies the EU rates to the same progressive boundaries", () => {
+    expect(customerStoragePrice(600, "EU")).toBeCloseTo(21.45);
   });
-});
 
-describe("parsePrice", () => {
-  it("accepts non-negative numbers", () => {
-    expect(parsePrice("0.05")).toBeCloseTo(0.05);
-    expect(parsePrice("2")).toBe(2);
-    expect(parsePrice("")).toBe(0);
+  it.each([
+    ["US", 100, 0.04],
+    ["US", 500, 0.035],
+    ["US", 1_024, 0.03],
+    ["US", 10_240, 0.0245],
+    ["US", 51_200, 0.0235],
+    ["EU", 100, 0.044],
+    ["EU", 500, 0.0385],
+    ["EU", 1_024, 0.033],
+    ["EU", 10_240, 0.027],
+    ["EU", 51_200, 0.026],
+  ] as const)("uses the %s marginal rate immediately above %d GiB-month", (region, boundary, rate) => {
+    expect(customerStoragePrice(boundary + 1, region) - customerStoragePrice(boundary, region)).toBeCloseTo(rate);
   });
-  it("rejects NaN and negatives as 0", () => {
-    expect(parsePrice("abc")).toBe(0);
-    expect(parsePrice("-1")).toBe(0);
+
+  it("uses aggregate us-east-1 S3 tiers and allocates cost back to orgs", () => {
+    const totals: OrgUsageTotals[] = [
+      { orgId: "org-a", storageGiBHours: 40_000 * 744 },
+      { orgId: "org-b", storageGiBHours: 20_000 * 744 },
+    ];
+    const priced = priceStorageByOrg(totals, "2026-08", "US");
+    // Aggregate cost: first 50 TiB (51,200 GiB) at .023, remaining 8,800 at .022.
+    expect(priced.summary.cost).toBeCloseTo(51_200 * 0.023 + 8_800 * 0.022);
+    expect(priced.rows[0].cost + priced.rows[1].cost).toBeCloseTo(priced.summary.cost);
+    expect(priced.rows[0].cost / priced.rows[1].cost).toBeCloseTo(2);
+  });
+
+  it.each([
+    [51_200, 0.022],
+    [512_000, 0.021],
+  ])("uses the next AWS marginal rate above %d aggregate GiB-month", (boundary, rate) => {
+    const costAt = (gibMonths: number) =>
+      priceStorageByOrg([{ orgId: "org-a", storageGiBHours: gibMonths * 744 }], "2026-08", "US").summary.cost;
+    expect(costAt(boundary + 1) - costAt(boundary)).toBeCloseTo(rate);
+  });
+
+  it("prices each customer separately, then sums price, gross profit, and margin", () => {
+    const totals: OrgUsageTotals[] = [
+      { orgId: "org-a", storageGiBHours: 600 * 744 },
+      { orgId: "org-b", storageGiBHours: 50 * 744 },
+    ];
+    const priced = priceStorageByOrg(totals, "2026-08", "US");
+
+    expect(priced.rows[0]).toMatchObject({ orgId: "org-a", gibMonths: 600 });
+    expect(priced.rows[0].cost).toBeCloseTo(13.8);
+    expect(priced.rows[0].price).toBeCloseTo(19.5);
+    expect(priced.rows[0].grossProfit).toBeCloseTo(5.7);
+    expect(priced.rows[0].grossMarginPercent).toBeCloseTo(29.2307);
+
+    expect(priced.rows[1].cost).toBeCloseTo(1.15);
+    expect(priced.rows[1].price).toBe(0);
+    expect(priced.rows[1].grossProfit).toBeCloseTo(-1.15);
+    expect(priced.rows[1].grossMarginPercent).toBeNull();
+
+    expect(priced.summary.cost).toBeCloseTo(14.95);
+    expect(priced.summary.price).toBeCloseTo(19.5);
+    expect(priced.summary.grossProfit).toBeCloseTo(4.55);
+    expect(priced.summary.grossMarginPercent).toBeCloseTo(23.3333);
   });
 });
 
 describe("fmtMoney", () => {
   it("formats USD with two decimals", () => {
     expect(fmtMoney(19.7)).toBe("$19.70");
-    expect(fmtMoney(0)).toBe("$0.00");
+    expect(fmtMoney(-1.15)).toBe("-$1.15");
     expect(fmtMoney(1234567.891)).toBe("$1,234,567.89");
   });
 });
diff --git a/controlplane/admin/ui/src/lib/pricing.ts b/controlplane/admin/ui/src/lib/pricing.ts
index 603ffc91..af4817f1 100644
--- a/controlplane/admin/ui/src/lib/pricing.ts
+++ b/controlplane/admin/ui/src/lib/pricing.ts
@@ -1,69 +1,180 @@
-// Pricing-sensitivity logic for the Usage page's cost calculator. Pure
-// functions — the feature is entirely client-side over the monthly usage
-// endpoint's rows (per-team usage units per org per month), so the math here
-// is the whole feature and is unit-tested directly.
+// Storage pricing for the Usage page. Duckgres meters GiB-hours; both AWS
+// cost and customer pricing are monthly, progressive schedules.
 
 import type { MonthlyUsageRow } from "@/types/api";
 
-// PriceScenario is one named set of unit prices ("what if CPU cost X?").
-// Prices are USD per usage unit, matching the units the Usage page displays.
-export interface PriceScenario {
-  id: string;
-  name: string;
-  cpuPerMin: number; // $ per CPU-minute
-  memPerGiBMin: number; // $ per GiB·minute of memory
-  storagePerGiBH: number; // $ per GiB·hour of S3
-}
+export type PricingRegion = "US" | "EU";
 
-// OrgUsageTotals is one org's month totals in display units (the sums of its
-// teams' rows).
 export interface OrgUsageTotals {
   orgId: string;
-  cpuMinutes: number;
-  memGiBMinutes: number;
   storageGiBHours: number;
 }
 
-// orgTotals aggregates per-team monthly rows into one totals line per org,
-// sorted by org id for a stable table.
+export interface OrgStoragePricing extends OrgUsageTotals {
+  gibMonths: number;
+  cost: number;
+  price: number;
+  grossProfit: number;
+  grossMarginPercent: number | null;
+}
+
+export interface StoragePricingSummary {
+  storageGiBHours: number;
+  gibMonths: number;
+  cost: number;
+  price: number;
+  grossProfit: number;
+  grossMarginPercent: number | null;
+}
+
+type StorageTier = {
+  upperBoundGiBMonths: number;
+  rate: number;
+};
+
+const TIB_IN_GIB = 1024;
+
+// Each customer tier applies only to the corresponding portion of one org's
+// monthly usage. Bounds follow the supplied binary convention: 1 TB = 1024 GB.
+const CUSTOMER_TIERS: Record<PricingRegion, StorageTier[]> = {
+  US: [
+    { upperBoundGiBMonths: 100, rate: 0 },
+    { upperBoundGiBMonths: 500, rate: 0.04 },
+    { upperBoundGiBMonths: TIB_IN_GIB, rate: 0.035 },
+    { upperBoundGiBMonths: 10 * TIB_IN_GIB, rate: 0.03 },
+    { upperBoundGiBMonths: 50 * TIB_IN_GIB, rate: 0.0245 },
+    { upperBoundGiBMonths: Number.POSITIVE_INFINITY, rate: 0.0235 },
+  ],
+  EU: [
+    { upperBoundGiBMonths: 100, rate: 0 },
+    { upperBoundGiBMonths: 500, rate: 0.044 },
+    { upperBoundGiBMonths: TIB_IN_GIB, rate: 0.0385 },
+    { upperBoundGiBMonths: 10 * TIB_IN_GIB, rate: 0.033 },
+    { upperBoundGiBMonths: 50 * TIB_IN_GIB, rate: 0.027 },
+    { upperBoundGiBMonths: Number.POSITIVE_INFINITY, rate: 0.026 },
+  ],
+};
+
+// Public S3 Standard list rates for us-east-1, verified 2026-09-03. AWS
+// applies these tiers to combined regional usage, not independently per bucket.
+const AWS_US_EAST_1_TIERS: StorageTier[] = [
+  { upperBoundGiBMonths: 50 * TIB_IN_GIB, rate: 0.023 },
+  { upperBoundGiBMonths: 500 * TIB_IN_GIB, rate: 0.022 },
+  { upperBoundGiBMonths: Number.POSITIVE_INFINITY, rate: 0.021 },
+];
+
+export const GIB_HOURS_TOOLTIP =
+  "S3 GiB·h measures storage over time, not current bucket size or a transfer rate. Duckgres samples tracked DuckLake file bytes every 30 minutes. Each sample contributes tracked GiB × 0.5 hours; for example, 10 GiB stored for 24 hours is 240 GiB·h. This view includes only samples still in the retained billing buffer.";
+
+export const AWS_COST_TOOLTIP =
+  "Estimated S3 Standard storage cost at public us-east-1 rates, not an AWS invoice or CUR charge. GiB·h is divided by the number of hours in the selected UTC month to get GiB-month. AWS tiers the combined monthly usage in this view: $0.023/GiB-month for the first 50 TiB, $0.022 for the next 450 TiB, and $0.021 thereafter. Storage capacity only; excludes requests, transfer, taxes, credits, negotiated discounts, and storage outside this view. Per-org cost is allocated in proportion to usage.";
+
+export function customerPriceTooltip(region: PricingRegion): string {
+  const rates =
+    region === "US"
+      ? "$0.040 from 100–500 GiB, $0.035 from 500 GiB–1 TiB, $0.030 from 1–10 TiB, $0.0245 from 10–50 TiB, and $0.0235 above 50 TiB"
+      : "$0.044 from 100–500 GiB, $0.0385 from 500 GiB–1 TiB, $0.033 from 1–10 TiB, $0.027 from 10–50 TiB, and $0.026 above 50 TiB";
+  return `Estimated customer charge under the progressive ${region} monthly tiers. GiB·h is divided by the number of hours in the selected UTC month to get GiB-month. Each organization is priced independently, with its first 100 GiB-month free, then ${rates}. Each rate applies only to usage within that tier.`;
+}
+
+export const GROSS_MARGIN_TOOLTIP =
+  "Gross margin is gross profit divided by customer price, where gross profit is customer price minus allocated AWS storage cost. The table shows both. Free-tier organizations can have negative gross profit because S3 still costs us; margin is unavailable when customer price is $0.";
+
+export const BINARY_UNITS_NOTE =
+  "Storage follows AWS's binary convention: 1 GB = 2^30 bytes (1 GiB), and 1 TB = 2^40 bytes (1024 GB).";
+
 export function orgTotals(rows: MonthlyUsageRow[]): OrgUsageTotals[] {
   const byOrg = new Map<string, OrgUsageTotals>();
-  for (const r of rows) {
-    let t = byOrg.get(r.org_id);
-    if (!t) {
-      t = { orgId: r.org_id, cpuMinutes: 0, memGiBMinutes: 0, storageGiBHours: 0 };
-      byOrg.set(r.org_id, t);
+  for (const row of rows) {
+    let total = byOrg.get(row.org_id);
+    if (!total) {
+      total = { orgId: row.org_id, storageGiBHours: 0 };
+      byOrg.set(row.org_id, total);
     }
-    t.cpuMinutes += r.cpu_seconds / 60;
-    t.memGiBMinutes += r.memory_seconds / 60;
-    t.storageGiBHours += Number(r.gib_seconds) / 3600;
+    total.storageGiBHours += Number(row.gib_seconds) / 3600;
   }
   return [...byOrg.values()].sort((a, b) => a.orgId.localeCompare(b.orgId));
 }
 
-// scenarioCost prices one org's month under one scenario.
-export function scenarioCost(t: OrgUsageTotals, s: PriceScenario): number {
-  return t.cpuMinutes * s.cpuPerMin + t.memGiBMinutes * s.memPerGiBMin + t.storageGiBHours * s.storagePerGiBH;
+export function hoursInUTCMonth(month: string): number {
+  const match = /^(\d{4})-(\d{2})$/.exec(month);
+  if (!match) throw new Error(`invalid UTC month: ${month}`);
+  const year = Number(match[1]);
+  const monthIndex = Number(match[2]) - 1;
+  if (monthIndex < 0 || monthIndex > 11) throw new Error(`invalid UTC month: ${month}`);
+  return (Date.UTC(year, monthIndex + 1, 1) - Date.UTC(year, monthIndex, 1)) / 3_600_000;
+}
+
+export function storageGiBMonths(storageGiBHours: number, month: string): number {
+  return Math.max(0, storageGiBHours) / hoursInUTCMonth(month);
+}
+
+function progressiveCharge(quantity: number, tiers: StorageTier[]): number {
+  let charge = 0;
+  let lowerBound = 0;
+  const usage = Math.max(0, quantity);
+  for (const tier of tiers) {
+    const inTier = Math.min(Math.max(usage - lowerBound, 0), tier.upperBoundGiBMonths - lowerBound);
+    charge += inTier * tier.rate;
+    lowerBound = tier.upperBoundGiBMonths;
+    if (usage <= lowerBound) break;
+  }
+  return charge;
 }
 
-// Grounded defaults for a fresh scenario, so the calculator is useful on
-// first open — roughly EC2 on-demand m6i/r6gd-class economics (≈$0.024/vCPU·h
-// and ≈$0.006/GiB·h RAM, i.e. half the instance price attributed to each)
-// plus S3 standard storage (≈$0.023/GiB·mo ≈ $0.00003/GiB·h). These are
-// editable starting points for sensitivity analysis, not PostHog pricing.
-export const DEFAULT_CPU_PER_MIN = 0.0004;
-export const DEFAULT_MEM_PER_GIB_MIN = 0.0001;
-export const DEFAULT_STORAGE_PER_GIB_H = 0.00003;
-
-// parsePrice reads a price input: non-negative finite numbers pass through,
-// anything else (empty, NaN, negative) is 0 — a half-typed input must never
-// make a cost cell NaN.
-export function parsePrice(raw: string): number {
-  const v = Number.parseFloat(raw);
-  return Number.isFinite(v) && v >= 0 ? v : 0;
+export function customerStoragePrice(gibMonths: number, region: PricingRegion): number {
+  return progressiveCharge(gibMonths, CUSTOMER_TIERS[region]);
+}
+
+function awsStorageCost(gibMonths: number): number {
+  return progressiveCharge(gibMonths, AWS_US_EAST_1_TIERS);
+}
+
+export function priceStorageByOrg(
+  totals: OrgUsageTotals[],
+  month: string,
+  region: PricingRegion,
+): { rows: OrgStoragePricing[]; summary: StoragePricingSummary } {
+  const withMonths = totals.map((total) => ({ ...total, gibMonths: storageGiBMonths(total.storageGiBHours, month) }));
+  const totalGiBMonths = withMonths.reduce((sum, row) => sum + row.gibMonths, 0);
+  const totalCost = awsStorageCost(totalGiBMonths);
+
+  const rows = withMonths.map((row): OrgStoragePricing => {
+    // AWS tiers combined regional usage. Allocate that aggregate list cost by
+    // metered usage so per-org cost and margin rows add exactly to the total.
+    const cost = totalGiBMonths === 0 ? 0 : totalCost * (row.gibMonths / totalGiBMonths);
+    const price = customerStoragePrice(row.gibMonths, region);
+    const grossProfit = price - cost;
+    return {
+      ...row,
+      cost,
+      price,
+      grossProfit,
+      grossMarginPercent: price > 0 ? (grossProfit / price) * 100 : null,
+    };
+  });
+
+  const storageGiBHours = totals.reduce((sum, row) => sum + row.storageGiBHours, 0);
+  const price = rows.reduce((sum, row) => sum + row.price, 0);
+  const grossProfit = price - totalCost;
+  return {
+    rows,
+    summary: {
+      storageGiBHours,
+      gibMonths: totalGiBMonths,
+      cost: totalCost,
+      price,
+      grossProfit,
+      grossMarginPercent: price > 0 ? (grossProfit / price) * 100 : null,
+    },
+  };
 }
 
-// fmtMoney formats a USD amount with grouping and two decimals.
-export function fmtMoney(n: number): string {
-  return n.toLocaleString("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 2 });
+export function fmtMoney(value: number): string {
+  return value.toLocaleString("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
 }
diff --git a/controlplane/admin/ui/src/pages/OrgUsage.test.tsx b/controlplane/admin/ui/src/pages/OrgUsage.test.tsx
index 95cc92c7..0a6d48b8 100644
--- a/controlplane/admin/ui/src/pages/OrgUsage.test.tsx
+++ b/controlplane/admin/ui/src/pages/OrgUsage.test.tsx
@@ -1,6 +1,7 @@
-import { describe, expect, it, vi, beforeEach } from "vitest";
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import type { DailyUsageResponse } from "@/types/api";
 
 // Mock data + identity hooks: render OrgUsageSection with a controlled daily
@@ -35,27 +36,32 @@ const RESPONSE: DailyUsageResponse = {
 function renderSection() {
   return render(
     <MemoryRouter>
-      <OrgUsageSection orgId="acme" />
+      <TooltipProvider delayDuration={0}>
+        <OrgUsageSection orgId="acme" />
+      </TooltipProvider>
     </MemoryRouter>,
   );
 }
 
 describe("OrgUsageSection", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   beforeEach(() => {
     vi.clearAllMocks();
     identity.useIdentity.mockReturnValue({ isAdmin: true, me: { email: "op@posthog.com", role: "admin", source: "sso" } });
     hooks.useOrgDailyUsage.mockReturnValue(ok(RESPONSE));
   });
 
-  it("renders the three usage charts with window totals", () => {
+  it("renders one org-level storage chart without compute or team series", () => {
     renderSection();
-    expect(screen.getByText("CPU-minutes")).toBeInTheDocument();
-    expect(screen.getByText("Memory GiB·minutes")).toBeInTheDocument();
     expect(screen.getByText("S3 GiB·hours")).toBeInTheDocument();
-    // Window totals: CPU (7200+60+600)/60 = 131; mem (3600+60+600)/60 = 71; S3 (3600+7200)/3600 = 3.
-    expect(screen.getByText(/131 total/)).toBeInTheDocument();
-    expect(screen.getByText(/71 total/)).toBeInTheDocument();
     expect(screen.getByText(/3 total/)).toBeInTheDocument();
+    expect(screen.queryByText("CPU-minutes")).not.toBeInTheDocument();
+    expect(screen.queryByText("Memory GiB·minutes")).not.toBeInTheDocument();
+    expect(screen.queryByText("team_5")).not.toBeInTheDocument();
+    expect(screen.queryByText("team_6")).not.toBeInTheDocument();
   });
 
   it("queries with the selected period when a period button is clicked", () => {
@@ -65,6 +71,26 @@ describe("OrgUsageSection", () => {
     expect(hooks.useOrgDailyUsage).toHaveBeenCalledWith("acme", 30);
   });
 
+  it("offers UTC week-to-date and month-to-date presets", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-08-19T12:00:00Z")); // Wednesday, day 19.
+    renderSection();
+
+    fireEvent.click(screen.getByRole("button", { name: "WTD" }));
+    expect(hooks.useOrgDailyUsage).toHaveBeenCalledWith("acme", 3);
+
+    fireEvent.click(screen.getByRole("button", { name: "MTD" }));
+    expect(hooks.useOrgDailyUsage).toHaveBeenCalledWith("acme", 19);
+  });
+
+  it("explains that GiB·h is storage over time", async () => {
+    renderSection();
+    fireEvent.focus(screen.getByRole("button", { name: "Explain S3 GiB·h" }));
+    expect(
+      (await screen.findAllByText(/storage over time, not current bucket size or a transfer rate/i)).length,
+    ).toBeGreaterThan(0);
+  });
+
   it("renders an empty state when the org has no usage in the window", () => {
     hooks.useOrgDailyUsage.mockReturnValue(ok({ ...RESPONSE, rows: [] }));
     renderSection();
@@ -75,6 +101,7 @@ describe("OrgUsageSection", () => {
     hooks.useOrgDailyUsage.mockReturnValue(ok({ ...RESPONSE, watermark_low: "2026-08-12T00:00:00Z" }));
     renderSection();
     expect(screen.getByText(/billed and removed/i)).toBeInTheDocument();
+    expect(screen.queryByText(/garbage-collected/i)).not.toBeInTheDocument();
   });
 
   it("renders nothing for viewers (cost data is admin-only)", () => {
diff --git a/controlplane/admin/ui/src/pages/OrgUsage.tsx b/controlplane/admin/ui/src/pages/OrgUsage.tsx
index 8a908537..d941c27a 100644
--- a/controlplane/admin/ui/src/pages/OrgUsage.tsx
+++ b/controlplane/admin/ui/src/pages/OrgUsage.tsx
@@ -1,58 +1,57 @@
 import { useMemo, useState } from "react";
-import { Bar, BarChart, CartesianGrid, Legend, Tooltip as RTooltip, ResponsiveContainer, XAxis, YAxis } from "recharts";
+import { Bar, BarChart, CartesianGrid, Tooltip as RTooltip, ResponsiveContainer, XAxis, YAxis } from "recharts";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { EmptyState, ErrorState, LoadingState } from "@/components/states";
+import { InfoTooltip } from "@/components/InfoTooltip";
 import { useIdentity } from "@/components/IdentityProvider";
 import { useOrgDailyUsage } from "@/hooks/useApi";
-import { hashColor } from "@/lib/colors";
 import { fmtTime, fmtUnits } from "@/lib/format";
+import { GIB_HOURS_TOOLTIP } from "@/lib/pricing";
 import { cn } from "@/lib/utils";
 import type { DailyUsageRow } from "@/types/api";
 
-const PERIODS = [7, 14, 30];
+type PeriodKey = "7d" | "14d" | "30d" | "wtd" | "mtd";
 
-type Metric = {
-  key: string;
-  title: string;
-  // derive the chart value (display units) from a raw daily row
-  value: (r: DailyUsageRow) => number;
-  unit: string;
-};
+function periodDays(period: PeriodKey, now = new Date()): number {
+  if (period === "wtd") {
+    const weekday = now.getUTCDay();
+    return weekday === 0 ? 7 : weekday;
+  }
+  if (period === "mtd") return now.getUTCDate();
+  return Number.parseInt(period, 10);
+}
 
-const METRICS: Metric[] = [
-  { key: "cpu", title: "CPU-minutes", value: (r) => r.cpu_seconds / 60, unit: "CPU-min" },
-  { key: "mem", title: "Memory GiB·minutes", value: (r) => r.memory_seconds / 60, unit: "GiB·min" },
-  { key: "storage", title: "S3 GiB·hours", value: (r) => Number(r.gib_seconds) / 3600, unit: "GiB·h" },
+const PERIODS: { key: PeriodKey; label: string }[] = [
+  { key: "7d", label: "7d" },
+  { key: "14d", label: "14d" },
+  { key: "30d", label: "30d" },
+  { key: "wtd", label: "WTD" },
+  { key: "mtd", label: "MTD" },
 ];
 
-function teamLabel(r: DailyUsageRow): string {
-  return r.schema_name ?? `team ${r.team_id}`;
-}
-
-// Pivot rows into recharts shape: one object per date, one key per team.
-function pivot(rows: DailyUsageRow[], metric: Metric) {
-  const teams = [...new Set(rows.map(teamLabel))].sort();
-  const byDate = new Map<string, Record<string, number | string>>();
+// The API retains an informational team stamp, but storage belongs to the org.
+// Collapse all stamps into one value per UTC date.
+function dailyStorage(rows: DailyUsageRow[]) {
+  const byDate = new Map<string, number>();
   for (const r of rows) {
-    let d = byDate.get(r.date);
-    if (!d) {
-      d = { date: r.date };
-      byDate.set(r.date, d);
-    }
-    const k = teamLabel(r);
-    d[k] = ((d[k] as number) ?? 0) + metric.value(r);
+    byDate.set(r.date, (byDate.get(r.date) ?? 0) + Number(r.gib_seconds) / 3600);
   }
-  return { data: [...byDate.values()].sort((a, b) => String(a.date).localeCompare(String(b.date))), teams };
+  return [...byDate.entries()]
+    .map(([date, storage]) => ({ date, storage }))
+    .sort((a, b) => a.date.localeCompare(b.date));
 }
 
-function UsageChart({ metric, rows }: { metric: Metric; rows: DailyUsageRow[] }) {
-  const { data, teams } = useMemo(() => pivot(rows, metric), [rows, metric]);
-  const total = useMemo(() => rows.reduce((s, r) => s + metric.value(r), 0), [rows, metric]);
+function UsageChart({ rows }: { rows: DailyUsageRow[] }) {
+  const data = useMemo(() => dailyStorage(rows), [rows]);
+  const total = useMemo(() => data.reduce((sum, row) => sum + row.storage, 0), [data]);
   return (
     <Card>
       <CardHeader>
-        <CardTitle>{metric.title}</CardTitle>
+        <CardTitle className="flex items-center gap-1.5">
+          S3 GiB·hours
+          <InfoTooltip label="Explain S3 GiB·h" text={GIB_HOURS_TOOLTIP} />
+        </CardTitle>
         <p className="text-xs text-muted-foreground">{fmtUnits(total)} total in window</p>
       </CardHeader>
       <CardContent>
@@ -76,12 +75,9 @@ function UsageChart({ metric, rows }: { metric: Metric; rows: DailyUsageRow[] })
                   borderRadius: 8,
                   fontSize: 12,
                 }}
-                formatter={(v: number, name) => [`${fmtUnits(v)} ${metric.unit}`, name]}
+                formatter={(v: number) => [`${fmtUnits(v)} GiB·h`, "S3 storage"]}
               />
-              <Legend wrapperStyle={{ fontSize: 11 }} />
-              {teams.map((t) => (
-                <Bar key={t} dataKey={t} stackId="usage" fill={hashColor(t)} isAnimationActive={false} />
-              ))}
+              <Bar dataKey="storage" fill="hsl(var(--primary))" isAnimationActive={false} />
             </BarChart>
           </ResponsiveContainer>
         )}
@@ -90,13 +86,14 @@ function UsageChart({ metric, rows }: { metric: Metric; rows: DailyUsageRow[] })
   );
 }
 
-// OrgUsageSection renders the org's daily usage charts (CPU / memory / S3,
-// stacked by team) over a selectable window. Cost data is admin-only —
+// OrgUsageSection renders the org's daily S3 usage over a selectable window.
+// Cost data is admin-only —
 // viewers get nothing at all (the API 403s them anyway; this keeps the page
 // clean and avoids the wasted request).
 export function OrgUsageSection({ orgId }: { orgId: string }) {
   const { isAdmin } = useIdentity();
-  const [days, setDays] = useState(14);
+  const [period, setPeriod] = useState<PeriodKey>("14d");
+  const days = periodDays(period);
   const usage = useOrgDailyUsage(orgId, days);
 
   if (!isAdmin) return null;
@@ -108,19 +105,19 @@ export function OrgUsageSection({ orgId }: { orgId: string }) {
         <div>
           <CardTitle>Usage</CardTitle>
           <p className="mt-0.5 text-xs text-muted-foreground">
-            Daily compute and storage per team, summed over the retained billing buffer.
+            Daily S3 storage-time (GiB·h) for this organization, summed over the retained billing buffer.
           </p>
         </div>
         <div className="flex items-center gap-1">
-          {PERIODS.map((n) => (
+          {PERIODS.map(({ key, label }) => (
             <Button
-              key={n}
+              key={key}
               size="sm"
-              variant={days === n ? "secondary" : "ghost"}
-              className={cn("h-7 px-2 text-xs", days === n && "font-semibold")}
-              onClick={() => setDays(n)}
+              variant={period === key ? "secondary" : "ghost"}
+              className={cn("h-7 px-2 text-xs", period === key && "font-semibold")}
+              onClick={() => setPeriod(key)}
             >
-              {n}d
+              {label}
             </Button>
           ))}
         </div>
@@ -128,8 +125,8 @@ export function OrgUsageSection({ orgId }: { orgId: string }) {
       <CardContent>
         {usage.data?.watermark_low && (
           <p className="mb-3 rounded-md border border-warning/40 bg-warning/5 p-2 text-xs text-muted-foreground">
-            Usage at or before {fmtTime(usage.data.watermark_low)} has been billed and removed from the buffer, and
-            buckets older than 30 days are garbage-collected — the left edge of a long window may be partial.
+            Usage at or before {fmtTime(usage.data.watermark_low)} has been billed and removed from the buffer, so the
+            left edge of the selected period may be partial.
           </p>
         )}
         {usage.isError ? (
@@ -139,11 +136,7 @@ export function OrgUsageSection({ orgId }: { orgId: string }) {
         ) : rows.length === 0 ? (
           <EmptyState title="No usage recorded" description={`No usage for this org in the last ${days} days of the retained buffer.`} />
         ) : (
-          <div className="grid gap-4 lg:grid-cols-3">
-            {METRICS.map((m) => (
-              <UsageChart key={m.key} metric={m} rows={rows} />
-            ))}
-          </div>
+          <UsageChart rows={rows} />
         )}
       </CardContent>
     </Card>
diff --git a/controlplane/admin/ui/src/pages/Usage.test.tsx b/controlplane/admin/ui/src/pages/Usage.test.tsx
index ef433dbd..3a141bf5 100644
--- a/controlplane/admin/ui/src/pages/Usage.test.tsx
+++ b/controlplane/admin/ui/src/pages/Usage.test.tsx
@@ -1,6 +1,7 @@
 import { describe, expect, it, vi, beforeEach } from "vitest";
 import { render, screen, within } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import type { MonthlyUsageResponse } from "@/types/api";
 
 // Mock the data hooks so we can render Usage with a controlled monthly
@@ -17,15 +18,18 @@ vi.mock("@/components/IdentityProvider", () => identity);
 import { Usage } from "./Usage";
 
 const ok = <T,>(data: T) => ({ data, isSuccess: true, isLoading: false, isError: false, refetch: vi.fn() });
+const AUGUST_HOURS = 744;
+const gibSeconds = (gibMonths: number) => gibMonths * AUGUST_HOURS * 3600;
 
 const RESPONSE: MonthlyUsageResponse = {
   from: "2026-06-01T00:00:00Z",
   months: 3,
   watermark_low: "2026-07-20T00:00:00Z",
   rows: [
-    // 7200 CPU-seconds = 120 CPU-minutes; 3600 GiB-seconds storage = 1 GiB-hour.
-    { month: "2026-08", org_id: "acme", team_id: 5, schema_name: "team_5", cpu_seconds: 7200, memory_seconds: 3600, gib_seconds: 3600 },
-    { month: "2026-08", org_id: "acme", team_id: 6, schema_name: "team_6", cpu_seconds: 60, memory_seconds: 120, gib_seconds: 0 },
+    // Two historical team stamps for the same org must become one storage row.
+    { month: "2026-08", org_id: "acme", team_id: 5, schema_name: "team_5", cpu_seconds: 1, memory_seconds: 1, gib_seconds: gibSeconds(200) },
+    { month: "2026-08", org_id: "acme", team_id: 6, schema_name: "team_6", cpu_seconds: 1, memory_seconds: 1, gib_seconds: gibSeconds(400) },
+    { month: "2026-08", org_id: "globex", team_id: 9, schema_name: "team_9", cpu_seconds: 1, memory_seconds: 1, gib_seconds: gibSeconds(50) },
     { month: "2026-07", org_id: "acme", team_id: 5, schema_name: "team_5", cpu_seconds: 600, memory_seconds: 600, gib_seconds: 0 },
   ],
 };
@@ -33,7 +37,9 @@ const RESPONSE: MonthlyUsageResponse = {
 function renderPage() {
   render(
     <MemoryRouter>
-      <Usage />
+      <TooltipProvider delayDuration={0}>
+        <Usage />
+      </TooltipProvider>
     </MemoryRouter>,
   );
 }
@@ -50,37 +56,46 @@ describe("Usage page", () => {
     identity.useIdentity.mockReturnValue({ isAdmin: false, me: { email: "v@posthog.com", role: "viewer", source: "sso" } });
     renderPage();
     expect(screen.getByText(/admin only/i)).toBeInTheDocument();
-    expect(screen.queryByText("team_5")).not.toBeInTheDocument();
+    expect(screen.queryByRole("columnheader", { name: "Org" })).not.toBeInTheDocument();
+    expect(screen.queryByText(/per-team/i)).not.toBeInTheDocument();
   });
 
-  it("defaults to the latest month and shows per-team rows with derived units", () => {
+  it("shows storage only and aggregates historical team rows into one org row", () => {
     hooks.useMonthlyUsage.mockReturnValue(ok(RESPONSE));
     renderPage();
 
-    // Latest month (2026-08) is selected by default: both acme teams render.
-    expect(screen.getByText("team_5")).toBeInTheDocument();
-    expect(screen.getByText("team_6")).toBeInTheDocument();
-    // CPU minutes: 7200s -> 120.
-    expect(screen.getByText("120")).toBeInTheDocument();
-    // Storage: 3600 GiB-seconds -> 1 GiB-hour.
-    expect(screen.getAllByText("1").length).toBeGreaterThan(0);
-    // The July row is NOT in the default view.
-    expect(screen.queryByText("10")).not.toBeInTheDocument(); // 600s = 10 min (July only)
+    expect(screen.getByText(/storage-time.*retained billing buffer/i)).toBeInTheDocument();
+    expect(screen.queryByRole("columnheader", { name: "Team" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("columnheader", { name: /CPU/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole("columnheader", { name: /Memory/i })).not.toBeInTheDocument();
+    expect(screen.queryByText("team_5")).not.toBeInTheDocument();
+    expect(screen.queryByText("team_6")).not.toBeInTheDocument();
+
+    expect(screen.getAllByRole("table")).toHaveLength(1);
+    const usageTable = screen.getByRole("table");
+    expect(within(usageTable).getByRole("columnheader", { name: /allocated aws cost/i })).toBeInTheDocument();
+    const acmeRow = within(usageTable).getByText("acme").closest("tr")!;
+    expect(within(acmeRow).getByText("446,400")).toBeInTheDocument();
   });
 
-  it("shows month totals for the selected month", () => {
+  it("shows total cost, customer price, and gross margin without compute cards", () => {
     hooks.useMonthlyUsage.mockReturnValue(ok(RESPONSE));
     renderPage();
 
-    // August total CPU-minutes = 120 + 1 = 121 (scoped to the stat card — the
-    // pricing table shows the same org sum).
-    expect(within(screen.getByTestId("stat-CPU-min")).getByText("121")).toBeInTheDocument();
+    expect(within(screen.getByTestId("stat-Total cost")).getByText("$14.95")).toBeInTheDocument();
+    expect(within(screen.getByTestId("stat-Total price")).getByText("$19.50")).toBeInTheDocument();
+    expect(within(screen.getByTestId("stat-Total gross margin")).getByText("23.3%")).toBeInTheDocument();
+    expect(within(screen.getByTestId("stat-Total gross margin")).getByText("$4.55 gross profit")).toBeInTheDocument();
+    expect(screen.queryByTestId("stat-S3 GiB·h")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("stat-CPU-min")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("stat-Memory GiB·min")).not.toBeInTheDocument();
   });
 
   it("renders the retention caveat when billing has acked a watermark", () => {
     hooks.useMonthlyUsage.mockReturnValue(ok(RESPONSE));
     renderPage();
     expect(screen.getByText(/billed and removed/i)).toBeInTheDocument();
+    expect(screen.queryByText(/garbage-collected/i)).not.toBeInTheDocument();
   });
 
   it("renders an empty state when there is no usage", () => {
diff --git a/controlplane/admin/ui/src/pages/Usage.tsx b/controlplane/admin/ui/src/pages/Usage.tsx
index b7a9b640..817c9104 100644
--- a/controlplane/admin/ui/src/pages/Usage.tsx
+++ b/controlplane/admin/ui/src/pages/Usage.tsx
@@ -1,10 +1,7 @@
 import { useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { type ColumnDef } from "@tanstack/react-table";
-import { Coins, Cpu, Database, MemoryStick, ShieldAlert } from "lucide-react";
+import { Coins, ShieldAlert } from "lucide-react";
 import { PageBody, PageHeader } from "@/components/AppShell";
-import { DataTable } from "@/components/DataTable";
-import { OrgRef } from "@/components/OrgRef";
+import { InfoTooltip } from "@/components/InfoTooltip";
 import { StatCard } from "@/components/StatCard";
 import { UsagePricing } from "@/pages/UsagePricing";
 import { Card } from "@/components/ui/card";
@@ -12,12 +9,16 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { EmptyState, ErrorState, TableSkeleton } from "@/components/states";
 import { useIdentity } from "@/components/IdentityProvider";
 import { useMonthlyUsage, useOrgLabels } from "@/hooks/useApi";
-import { fmtTime, fmtUnits } from "@/lib/format";
-import type { MonthlyUsageRow } from "@/types/api";
-
-const cpuMinutes = (r: MonthlyUsageRow) => r.cpu_seconds / 60;
-const memGiBMinutes = (r: MonthlyUsageRow) => r.memory_seconds / 60;
-const storageGiBHours = (r: MonthlyUsageRow) => Number(r.gib_seconds) / 3600;
+import { fmtTime } from "@/lib/format";
+import {
+  AWS_COST_TOOLTIP,
+  GROSS_MARGIN_TOOLTIP,
+  customerPriceTooltip,
+  fmtMoney,
+  orgTotals,
+  priceStorageByOrg,
+  type PricingRegion,
+} from "@/lib/pricing";
 
 function currentMonth(): string {
   const d = new Date();
@@ -26,8 +27,8 @@ function currentMonth(): string {
 
 export function Usage() {
   const { isAdmin } = useIdentity();
-  const navigate = useNavigate();
   const [months, setMonths] = useState(6);
+  const [pricingRegion, setPricingRegion] = useState<PricingRegion>("US");
   const usage = useMonthlyUsage(months);
   const orgLabels = useOrgLabels();
   const rows = useMemo(() => usage.data?.rows ?? [], [usage.data]);
@@ -47,73 +48,26 @@ export function Usage() {
       : (monthOptions.find((m) => rows.some((r) => r.month === m)) ?? currentMonth());
 
   const monthRows = useMemo(() => rows.filter((r) => r.month === month), [rows, month]);
-  const totals = useMemo(
-    () =>
-      monthRows.reduce(
-        (acc, r) => ({
-          cpu: acc.cpu + cpuMinutes(r),
-          mem: acc.mem + memGiBMinutes(r),
-          storage: acc.storage + storageGiBHours(r),
-        }),
-        { cpu: 0, mem: 0, storage: 0 },
-      ),
-    [monthRows],
-  );
-
-  const columns = useMemo<ColumnDef<MonthlyUsageRow, any>[]>(
-    () => [
-      {
-        accessorKey: "org_id",
-        header: "Org",
-        cell: ({ row }) => <OrgRef id={row.original.org_id} label={orgLabels.get(row.original.org_id)} />,
-      },
-      {
-        id: "team",
-        header: "Team",
-        accessorFn: (r) => r.schema_name ?? `team ${r.team_id}`,
-        cell: ({ row }) => {
-          const r = row.original;
-          return (
-            <div className="flex flex-col gap-0.5">
-              <span className="font-mono text-xs">{r.schema_name ?? `team ${r.team_id}`}</span>
-              <span className="text-[11px] text-muted-foreground">id {r.team_id}</span>
-            </div>
-          );
-        },
-      },
-      {
-        id: "cpu_minutes",
-        header: "CPU-min",
-        accessorFn: cpuMinutes,
-        cell: ({ getValue }) => <span className="font-mono text-xs">{fmtUnits(getValue() as number)}</span>,
-      },
-      {
-        id: "mem_gib_minutes",
-        header: "Memory GiB·min",
-        accessorFn: memGiBMinutes,
-        cell: ({ getValue }) => <span className="font-mono text-xs">{fmtUnits(getValue() as number)}</span>,
-      },
-      {
-        id: "storage_gib_hours",
-        header: "S3 GiB·h",
-        accessorFn: storageGiBHours,
-        cell: ({ getValue }) => <span className="font-mono text-xs">{fmtUnits(getValue() as number)}</span>,
-      },
-    ],
-    [orgLabels],
+  // Storage is org-scoped. The API still carries its historical informational
+  // team stamp, so collapse those rows before display rather than showing
+  // duplicate-looking org lines when that stamp changed within the month.
+  const orgRows = useMemo(() => orgTotals(monthRows), [monthRows]);
+  const pricing = useMemo(
+    () => priceStorageByOrg(orgRows, month, pricingRegion),
+    [orgRows, month, pricingRegion],
   );
 
-  // Per-team cost data is admin-only (the API enforces RequireAdmin; this is
+  // Organization cost data is admin-only (the API enforces RequireAdmin; this is
   // just the friendly notice, matching the Operators page).
   if (!isAdmin) {
     return (
       <>
-        <PageHeader title="Usage" description="Monthly per-team compute and storage usage." />
+        <PageHeader title="Usage" description="Monthly storage usage by organization." />
         <PageBody>
           <EmptyState
             icon={<ShieldAlert className="h-6 w-6 text-warning" />}
             title="Admin only"
-            description="Per-team usage and cost data requires the admin role."
+            description="Organization usage and cost data requires the admin role."
           />
         </PageBody>
       </>
@@ -124,7 +78,7 @@ export function Usage() {
     <>
       <PageHeader
         title="Usage"
-        description="Cumulative monthly compute and storage per team, summed over the retained billing buffer."
+        description="S3 storage-time (GiB·h) by organization, summed over the retained billing buffer."
         actions={
           <>
             <Select value={month} onValueChange={setSelected}>
@@ -157,9 +111,8 @@ export function Usage() {
       <PageBody>
         {usage.data?.watermark_low && (
           <Card className="mb-4 border-warning/40 bg-warning/5 p-3 text-xs text-muted-foreground">
-            Usage at or before {fmtTime(usage.data.watermark_low)} has been billed and removed from the buffer, and
-            buckets older than 30 days are garbage-collected — earlier months may be partial or absent. This page is
-            an operations view, not an invoice.
+            Usage at or before {fmtTime(usage.data.watermark_low)} has been billed and removed from the buffer, so
+            earlier months may be partial or absent. This page is an operations view, not an invoice.
           </Card>
         )}
         {usage.isError ? (
@@ -169,18 +122,28 @@ export function Usage() {
         ) : (
           <>
             <div className="mb-4 grid grid-cols-1 gap-3 sm:grid-cols-3">
-              <StatCard label="CPU-min" value={fmtUnits(totals.cpu)} icon={<Cpu className="h-4 w-4" />} hint={`${month} total`} />
               <StatCard
-                label="Memory GiB·min"
-                value={fmtUnits(totals.mem)}
-                icon={<MemoryStick className="h-4 w-4" />}
-                hint={`${month} total`}
+                label="Total cost"
+                value={fmtMoney(pricing.summary.cost)}
+                icon={<InfoTooltip label="Explain AWS storage cost" text={AWS_COST_TOOLTIP} />}
+                hint="AWS us-east-1 storage estimate"
               />
               <StatCard
-                label="S3 GiB·h"
-                value={fmtUnits(totals.storage)}
-                icon={<Database className="h-4 w-4" />}
-                hint={`${month} total`}
+                label="Total price"
+                value={fmtMoney(pricing.summary.price)}
+                icon={<InfoTooltip label="Explain customer price" text={customerPriceTooltip(pricingRegion)} />}
+                hint={`${pricingRegion} progressive customer tiers`}
+              />
+              <StatCard
+                label="Total gross margin"
+                value={
+                  pricing.summary.grossMarginPercent == null
+                    ? "N/A"
+                    : `${pricing.summary.grossMarginPercent.toFixed(1)}%`
+                }
+                icon={<InfoTooltip label="Explain gross margin" text={GROSS_MARGIN_TOOLTIP} />}
+                hint={`${fmtMoney(pricing.summary.grossProfit)} gross profit`}
+                accent={pricing.summary.grossProfit < 0 ? "destructive" : "success"}
               />
             </div>
             {monthRows.length === 0 ? (
@@ -190,18 +153,14 @@ export function Usage() {
                 description={`No usage has been recorded for ${month} in the retained billing buffer.`}
               />
             ) : (
-              <Card>
-                <DataTable
-                  data={monthRows}
-                  columns={columns}
-                  initialSorting={[{ id: "cpu_minutes", desc: true }]}
-                  // Click through to the org's daily usage charts.
-                  onRowClick={(r) => navigate(`/orgs/${encodeURIComponent(r.org_id)}`)}
-                  rowClassName={() => "cursor-pointer"}
-                />
-              </Card>
+              <UsagePricing
+                rows={monthRows}
+                labels={orgLabels}
+                month={month}
+                region={pricingRegion}
+                onRegionChange={setPricingRegion}
+              />
             )}
-            <UsagePricing rows={monthRows} labels={orgLabels} />
           </>
         )}
       </PageBody>
diff --git a/controlplane/admin/ui/src/pages/UsagePricing.test.tsx b/controlplane/admin/ui/src/pages/UsagePricing.test.tsx
index 8c716eba..c183b75a 100644
--- a/controlplane/admin/ui/src/pages/UsagePricing.test.tsx
+++ b/controlplane/admin/ui/src/pages/UsagePricing.test.tsx
@@ -1,18 +1,17 @@
-import { describe, expect, it, beforeEach } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { fireEvent, render, screen, within } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import { UsagePricing } from "./UsagePricing";
 import type { MonthlyUsageRow } from "@/types/api";
+import type { PricingRegion } from "@/lib/pricing";
 
-// UsagePricing is a pure-props component (rows come from the Usage page's
-// monthly query) — no hook mocks needed. localStorage is cleared per test so
-// scenario persistence doesn't leak between cases.
+const AUGUST_HOURS = 744;
+const gibSeconds = (gibMonths: number) => gibMonths * AUGUST_HOURS * 3600;
 const ROWS: MonthlyUsageRow[] = [
-  // acme: cpu 130 min, mem 70 GiB·min, storage 3 GiB·h (two teams summed).
-  { month: "2026-08", org_id: "acme", team_id: 5, schema_name: "team_5", cpu_seconds: 7200, memory_seconds: 3600, gib_seconds: 3600 },
-  { month: "2026-08", org_id: "acme", team_id: 6, schema_name: "team_6", cpu_seconds: 600, memory_seconds: 600, gib_seconds: 7200 },
-  // globex: cpu 20 min.
-  { month: "2026-08", org_id: "globex", team_id: 9, schema_name: "team_9", cpu_seconds: 1200, memory_seconds: 0, gib_seconds: 0 },
+  { month: "2026-08", org_id: "acme", team_id: 5, schema_name: "team_5", cpu_seconds: 1, memory_seconds: 1, gib_seconds: gibSeconds(200) },
+  { month: "2026-08", org_id: "acme", team_id: 6, schema_name: "team_6", cpu_seconds: 1, memory_seconds: 1, gib_seconds: gibSeconds(400) },
+  { month: "2026-08", org_id: "globex", team_id: 9, schema_name: "team_9", cpu_seconds: 1, memory_seconds: 1, gib_seconds: gibSeconds(50) },
 ];
 
 const LABELS = new Map([
@@ -20,79 +19,64 @@ const LABELS = new Map([
   ["globex", "Globex Corp"],
 ]);
 
-function renderPricing(rows = ROWS) {
+function renderPricing(region: PricingRegion = "US", onRegionChange = () => {}) {
   return render(
     <MemoryRouter>
-      <UsagePricing rows={rows} labels={LABELS} />
+      <TooltipProvider delayDuration={0}>
+        <UsagePricing rows={ROWS} labels={LABELS} month="2026-08" region={region} onRegionChange={onRegionChange} />
+      </TooltipProvider>
     </MemoryRouter>,
   );
 }
 
 describe("UsagePricing", () => {
-  beforeEach(() => {
-    localStorage.clear();
-  });
-
-  it("starts with a baseline scenario prefilled with grounded default prices", () => {
+  it("separates AWS cost, customer price, and gross margin per org", () => {
     renderPricing();
-    expect(screen.getByDisplayValue("Baseline")).toBeInTheDocument();
-    // Defaults ≈ EC2 on-demand m6i-class economics + S3 standard storage:
-    // $0.0004/CPU-min ($0.024/vCPU·h), $0.0001/GiB·min ($0.006/GiB·h RAM),
-    // $0.00003/GiB·h (~$0.022/GiB·mo S3).
-    expect(screen.getByLabelText("Baseline $/CPU-min")).toHaveValue(0.0004);
-    expect(screen.getByLabelText("Baseline $/GiB·min")).toHaveValue(0.0001);
-    expect(screen.getByLabelText("Baseline $/GiB·h")).toHaveValue(0.00003);
-    // The defaults already price the orgs — the calculator is useful on open:
-    // acme: 130×0.0004 + 70×0.0001 + 3×0.00003 = $0.0590 → $0.06;
-    // globex: 20×0.0004 = $0.008 → $0.01; total $0.067 → $0.07.
-    expect(screen.getByText("$0.06")).toBeInTheDocument();
-    expect(screen.getByText("$0.01")).toBeInTheDocument();
-    expect(screen.getByText("$0.07")).toBeInTheDocument();
-  });
+    const acme = screen.getByText("Acme Inc").closest("tr")!;
+    expect(within(acme).getByText("$13.80")).toBeInTheDocument();
+    expect(within(acme).getByText("$19.50")).toBeInTheDocument();
+    expect(within(acme).getByText("29.2% ($5.70 profit)")).toBeInTheDocument();
 
-  it("shows the org's friendly name with its ID, linked to the org page", () => {
-    renderPricing();
-    expect(screen.getByText("Acme Inc")).toBeInTheDocument();
-    expect(screen.getByText("Globex Corp")).toBeInTheDocument();
-    expect(screen.getByRole("link", { name: /acme inc/i })).toHaveAttribute("href", "/orgs/acme");
+    const globex = screen.getByText("Globex Corp").closest("tr")!;
+    expect(within(globex).getByText("$1.15")).toBeInTheDocument();
+    expect(within(globex).getByText("$0.00")).toBeInTheDocument();
+    expect(within(globex).getByText("N/A (-$1.15 profit)")).toBeInTheDocument();
   });
 
-  it("prices each org and the grand total from the entered prices", () => {
+  it("shows the binary-unit note on the pricing page", () => {
     renderPricing();
-    fireEvent.change(screen.getByLabelText("Baseline $/CPU-min"), { target: { value: "0.1" } });
-    fireEvent.change(screen.getByLabelText("Baseline $/GiB·min"), { target: { value: "0.01" } });
-    fireEvent.change(screen.getByLabelText("Baseline $/GiB·h"), { target: { value: "2" } });
-    // acme: 130×0.1 + 70×0.01 + 3×2 = $19.70; globex: 20×0.1 = $2.00; total $21.70.
-    expect(screen.getByText("$19.70")).toBeInTheDocument();
-    expect(screen.getByText("$2.00")).toBeInTheDocument();
-    expect(screen.getByText("$21.70")).toBeInTheDocument();
+    expect(screen.getByText(/1 GB = 2\^30 bytes.*1 TB = 2\^40 bytes.*1024 GB/i)).toBeInTheDocument();
   });
 
-  it("adds a scenario column for side-by-side sensitivity", () => {
-    renderPricing();
-    fireEvent.click(screen.getByRole("button", { name: /add scenario/i }));
-    // Two scenario editors now: Baseline + Scenario B (also prefilled).
-    expect(screen.getByDisplayValue("Baseline")).toBeInTheDocument();
-    expect(screen.getByDisplayValue("Scenario B")).toBeInTheDocument();
-    // Price only B's CPU: acme = 130×0.5 + 70×0.0001 + 3×0.00003 = $65.00709
-    // → $65.01 under B; Baseline keeps its default-priced $0.06.
-    fireEvent.change(screen.getByLabelText("Scenario B $/CPU-min"), { target: { value: "0.5" } });
-    expect(screen.getByText("$65.01")).toBeInTheDocument();
-    const acmeRow = screen.getByText("Acme Inc").closest("tr")!;
-    expect(within(acmeRow).getByText("$0.06")).toBeInTheDocument();
+  it("offers the supplied US and EU customer pricing schedules", () => {
+    const onRegionChange = vi.fn();
+    renderPricing("US", onRegionChange);
+    fireEvent.click(screen.getByRole("button", { name: "EU pricing" }));
+    expect(onRegionChange).toHaveBeenCalledWith("EU");
   });
 
-  it("persists scenarios to localStorage across remounts", () => {
-    const { unmount } = renderPricing();
-    fireEvent.change(screen.getByLabelText("Baseline $/CPU-min"), { target: { value: "0.1" } });
-    unmount();
+  it("adds accessible explanations for usage, cost, price, and margin", async () => {
     renderPricing();
-    // acme 130×0.1 + 70×0.0001 + 3×0.00003 = $13.00709 → $13.01
-    expect(screen.getByText("$13.01")).toBeInTheDocument();
+    const expected = [
+      ["Explain S3 GiB·h", /storage over time, not current bucket size or a transfer rate/i],
+      ["Explain AWS storage cost", /S3 Standard storage cost at public us-east-1 rates.*storage capacity only/i],
+      ["Explain customer price", /progressive US monthly tiers.*first 100 GiB-month/i],
+      ["Explain gross margin", /gross margin is gross profit divided by customer price/i],
+    ] as const;
+
+    for (const [label, text] of expected) {
+      fireEvent.focus(screen.getByRole("button", { name: label }));
+      expect((await screen.findAllByText(text)).length).toBeGreaterThan(0);
+      fireEvent.blur(screen.getByRole("button", { name: label }));
+    }
   });
 
   it("renders a friendly empty state without usage rows", () => {
-    renderPricing([]);
+    render(
+      <MemoryRouter>
+        <UsagePricing rows={[]} labels={LABELS} month="2026-08" region="US" onRegionChange={() => {}} />
+      </MemoryRouter>,
+    );
     expect(screen.getByText(/no usage rows/i)).toBeInTheDocument();
   });
 });
diff --git a/controlplane/admin/ui/src/pages/UsagePricing.tsx b/controlplane/admin/ui/src/pages/UsagePricing.tsx
index ad3e64ae..581791a3 100644
--- a/controlplane/admin/ui/src/pages/UsagePricing.tsx
+++ b/controlplane/admin/ui/src/pages/UsagePricing.tsx
@@ -1,195 +1,142 @@
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, type ReactNode } from "react";
 import { Link } from "react-router-dom";
-import { Plus, X } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import { EmptyState } from "@/components/states";
+import { InfoTooltip } from "@/components/InfoTooltip";
 import { OrgRef } from "@/components/OrgRef";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { fmtUnits } from "@/lib/format";
 import {
-  DEFAULT_CPU_PER_MIN,
-  DEFAULT_MEM_PER_GIB_MIN,
-  DEFAULT_STORAGE_PER_GIB_H,
+  AWS_COST_TOOLTIP,
+  BINARY_UNITS_NOTE,
+  GIB_HOURS_TOOLTIP,
+  GROSS_MARGIN_TOOLTIP,
+  customerPriceTooltip,
   fmtMoney,
   orgTotals,
-  parsePrice,
-  scenarioCost,
-  type PriceScenario,
+  priceStorageByOrg,
+  type PricingRegion,
 } from "@/lib/pricing";
 import type { MonthlyUsageRow } from "@/types/api";
 
-// Pricing sensitivity: enter unit-price scenarios and see each org's monthly
-// fee under each of them, side by side. Entirely client-side over the monthly
-// usage rows (the same admin-only data as the table above) — nothing is sent
-// anywhere; scenarios persist in localStorage so a PM's what-ifs survive a
-// reload but never leave their browser.
-
-const STORAGE_KEY = "duckgres-usage-pricing-scenarios-v1";
-
-// A fresh scenario starts from the grounded defaults (EC2-on-demand-ish
-// compute + S3 standard storage — see lib/pricing.ts) so the calculator
-// prices orgs sensibly on first open; every price is editable.
-function newScenario(n: number): PriceScenario {
-  return {
-    id: `s${Date.now()}-${n}`,
-    name: n === 1 ? "Baseline" : `Scenario ${String.fromCharCode(64 + n)}`,
-    cpuPerMin: DEFAULT_CPU_PER_MIN,
-    memPerGiBMin: DEFAULT_MEM_PER_GIB_MIN,
-    storagePerGiBH: DEFAULT_STORAGE_PER_GIB_H,
-  };
+function HeaderWithTooltip({
+  children,
+  label,
+  text,
+}: {
+  children: ReactNode;
+  label: string;
+  text: string;
+}) {
+  return (
+    <span className="inline-flex items-center gap-1.5">
+      {children}
+      <InfoTooltip label={label} text={text} />
+    </span>
+  );
 }
 
-function loadScenarios(): PriceScenario[] {
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY);
-    if (raw) {
-      const parsed = JSON.parse(raw) as PriceScenario[];
-      if (Array.isArray(parsed) && parsed.length > 0 && parsed.every((s) => typeof s?.name === "string")) {
-        return parsed;
-      }
-    }
-  } catch {
-    // corrupted storage → fall through to the default
-  }
-  return [newScenario(1)];
+function fmtMargin(profit: number, percent: number | null): string {
+  return `${percent == null ? "N/A" : `${percent.toFixed(1)}%`} (${fmtMoney(profit)} profit)`;
 }
 
-export function UsagePricing({ rows, labels }: { rows: MonthlyUsageRow[]; labels?: Map<string, string> }) {
-  const [scenarios, setScenarios] = useState<PriceScenario[]>(loadScenarios);
-  useEffect(() => {
-    try {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(scenarios));
-    } catch {
-      // storage full/unavailable — the calculator still works for the session
-    }
-  }, [scenarios]);
-
+export function UsagePricing({
+  rows,
+  labels,
+  month,
+  region,
+  onRegionChange,
+}: {
+  rows: MonthlyUsageRow[];
+  labels?: Map<string, string>;
+  month: string;
+  region: PricingRegion;
+  onRegionChange: (region: PricingRegion) => void;
+}) {
   const totals = useMemo(() => orgTotals(rows), [rows]);
-  const grand = useMemo(
-    () => ({
-      cpuMinutes: totals.reduce((s, t) => s + t.cpuMinutes, 0),
-      memGiBMinutes: totals.reduce((s, t) => s + t.memGiBMinutes, 0),
-      storageGiBHours: totals.reduce((s, t) => s + t.storageGiBHours, 0),
-      orgId: "",
-    }),
-    [totals],
-  );
-
-  const update = (id: string, patch: Partial<PriceScenario>) =>
-    setScenarios((ss) => ss.map((s) => (s.id === id ? { ...s, ...patch } : s)));
-  const remove = (id: string) => setScenarios((ss) => (ss.length > 1 ? ss.filter((s) => s.id !== id) : ss));
-  const add = () => setScenarios((ss) => [...ss, newScenario(ss.length + 1)]);
+  const pricing = useMemo(() => priceStorageByOrg(totals, month, region), [totals, month, region]);
 
   return (
     <Card className="mt-4">
-      <CardHeader className="flex-row items-center justify-between gap-3">
+      <CardHeader className="flex-row items-start justify-between gap-3">
         <div>
-          <CardTitle>Pricing sensitivity</CardTitle>
+          <CardTitle>Storage economics</CardTitle>
           <p className="mt-0.5 text-xs text-muted-foreground">
-            Enter unit prices to see each org's fee for the selected month under each scenario. Baseline starts
-            from EC2-on-demand-ish unit costs + S3 standard storage — edit freely. Prices stay in your browser.
+            Estimated AWS storage cost, customer price, and gross margin for retained usage in {month}.
           </p>
+          <p className="mt-1 text-xs text-muted-foreground">{BINARY_UNITS_NOTE}</p>
         </div>
-        <Button size="sm" variant="outline" onClick={add}>
-          <Plus className="h-4 w-4" /> Add scenario
-        </Button>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="flex flex-wrap gap-3">
-          {scenarios.map((s) => (
-            <div key={s.id} className="rounded-md border border-border p-3">
-              <div className="mb-2 flex items-center gap-2">
-                <Input
-                  value={s.name}
-                  onChange={(e) => update(s.id, { name: e.target.value })}
-                  className="h-7 w-32 text-xs font-medium"
-                  aria-label="Scenario name"
-                />
-                {scenarios.length > 1 && (
-                  <button
-                    type="button"
-                    className="text-muted-foreground hover:text-foreground"
-                    aria-label={`Remove ${s.name}`}
-                    onClick={() => remove(s.id)}
-                  >
-                    <X className="h-3.5 w-3.5" />
-                  </button>
-                )}
-              </div>
-              <div className="grid grid-cols-3 gap-2">
-                {(
-                  [
-                    ["cpuPerMin", "$/CPU-min"],
-                    ["memPerGiBMin", "$/GiB·min"],
-                    ["storagePerGiBH", "$/GiB·h"],
-                  ] as const
-                ).map(([field, label]) => (
-                  <label key={field} className="flex flex-col gap-1 text-[11px] text-muted-foreground">
-                    {label}
-                    <Input
-                      type="number"
-                      min={0}
-                      step="any"
-                      value={s[field] === 0 ? "" : String(s[field])}
-                      placeholder="0"
-                      aria-label={`${s.name} ${label}`}
-                      className="h-7 w-24 text-xs"
-                      onChange={(e) => update(s.id, { [field]: parsePrice(e.target.value) })}
-                    />
-                  </label>
-                ))}
-              </div>
-            </div>
+        <div className="flex shrink-0 items-center gap-1" aria-label="Customer pricing region">
+          <span className="mr-1 text-xs text-muted-foreground">Customer pricing</span>
+          {(["US", "EU"] as const).map((value) => (
+            <Button
+              key={value}
+              size="sm"
+              variant={region === value ? "secondary" : "ghost"}
+              className="h-7 px-2 text-xs"
+              aria-label={`${value} pricing`}
+              onClick={() => onRegionChange(value)}
+            >
+              {value}
+            </Button>
           ))}
         </div>
-
-        {totals.length === 0 ? (
-          <EmptyState title="No usage rows" description="Pick a month with usage above to price it." />
+      </CardHeader>
+      <CardContent>
+        {pricing.rows.length === 0 ? (
+          <EmptyState title="No usage rows" description="Pick a month with retained storage usage above to price it." />
         ) : (
           <Table>
             <TableHeader>
               <TableRow className="hover:bg-transparent">
                 <TableHead>Org</TableHead>
-                <TableHead>CPU-min</TableHead>
-                <TableHead>GiB·min</TableHead>
-                <TableHead>GiB·h</TableHead>
-                {scenarios.map((s) => (
-                  <TableHead key={s.id} className="text-right">
-                    {s.name}/mo
-                  </TableHead>
-                ))}
+                <TableHead>
+                  <HeaderWithTooltip label="Explain S3 GiB·h" text={GIB_HOURS_TOOLTIP}>
+                    S3 GiB·h
+                  </HeaderWithTooltip>
+                </TableHead>
+                <TableHead className="text-right">
+                  <HeaderWithTooltip label="Explain AWS storage cost" text={AWS_COST_TOOLTIP}>
+                    Allocated AWS cost
+                  </HeaderWithTooltip>
+                </TableHead>
+                <TableHead className="text-right">
+                  <HeaderWithTooltip label="Explain customer price" text={customerPriceTooltip(region)}>
+                    Customer price ({region})
+                  </HeaderWithTooltip>
+                </TableHead>
+                <TableHead className="text-right">
+                  <HeaderWithTooltip label="Explain gross margin" text={GROSS_MARGIN_TOOLTIP}>
+                    Gross margin
+                  </HeaderWithTooltip>
+                </TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              {totals.map((t) => (
-                <TableRow key={t.orgId}>
+              {pricing.rows.map((row) => (
+                <TableRow key={row.orgId}>
                   <TableCell>
-                    <Link to={`/orgs/${encodeURIComponent(t.orgId)}`} className="block hover:underline">
-                      <OrgRef id={t.orgId} label={labels?.get(t.orgId)} copyable={false} />
+                    <Link to={`/orgs/${encodeURIComponent(row.orgId)}`} className="block hover:underline">
+                      <OrgRef id={row.orgId} label={labels?.get(row.orgId)} copyable={false} />
                     </Link>
                   </TableCell>
-                  <TableCell className="font-mono text-xs">{fmtUnits(t.cpuMinutes)}</TableCell>
-                  <TableCell className="font-mono text-xs">{fmtUnits(t.memGiBMinutes)}</TableCell>
-                  <TableCell className="font-mono text-xs">{fmtUnits(t.storageGiBHours)}</TableCell>
-                  {scenarios.map((s) => (
-                    <TableCell key={s.id} className="text-right font-mono text-xs font-medium">
-                      {fmtMoney(scenarioCost(t, s))}
-                    </TableCell>
-                  ))}
+                  <TableCell className="font-mono text-xs">{fmtUnits(row.storageGiBHours)}</TableCell>
+                  <TableCell className="text-right font-mono text-xs">{fmtMoney(row.cost)}</TableCell>
+                  <TableCell className="text-right font-mono text-xs">{fmtMoney(row.price)}</TableCell>
+                  <TableCell className="text-right font-mono text-xs font-medium">
+                    {fmtMargin(row.grossProfit, row.grossMarginPercent)}
+                  </TableCell>
                 </TableRow>
               ))}
               <TableRow className="border-t-2 font-semibold">
                 <TableCell className="text-xs">All orgs</TableCell>
-                <TableCell className="font-mono text-xs">{fmtUnits(grand.cpuMinutes)}</TableCell>
-                <TableCell className="font-mono text-xs">{fmtUnits(grand.memGiBMinutes)}</TableCell>
-                <TableCell className="font-mono text-xs">{fmtUnits(grand.storageGiBHours)}</TableCell>
-                {scenarios.map((s) => (
-                  <TableCell key={s.id} className="text-right font-mono text-xs">
-                    {fmtMoney(scenarioCost(grand, s))}
-                  </TableCell>
-                ))}
+                <TableCell className="font-mono text-xs">{fmtUnits(pricing.summary.storageGiBHours)}</TableCell>
+                <TableCell className="text-right font-mono text-xs">{fmtMoney(pricing.summary.cost)}</TableCell>
+                <TableCell className="text-right font-mono text-xs">{fmtMoney(pricing.summary.price)}</TableCell>
+                <TableCell className="text-right font-mono text-xs">
+                  {fmtMargin(pricing.summary.grossProfit, pricing.summary.grossMarginPercent)}
+                </TableCell>
               </TableRow>
             </TableBody>
           </Table>