diff --git a/scripts/tsc-with-whitelist.sh b/scripts/tsc-with-whitelist.sh
index 5abbe618948..a7da250e2db 100755
--- a/scripts/tsc-with-whitelist.sh
+++ b/scripts/tsc-with-whitelist.sh
@@ -9,6 +9,7 @@ web-admin/src/routes/[organization]/-/settings/+layout.ts: error TS2307
 web-admin/src/routes/[organization]/-/settings/+page.ts: error TS2307
 web-admin/src/routes/[organization]/-/settings/billing/+page.ts: error TS2307
 web-admin/src/routes/[organization]/-/settings/billing/payment/+page.ts: error TS2307
+web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.ts: error TS2307
 web-admin/src/routes/[organization]/-/settings/billing/upgrade/+page.ts: error TS2307
 web-admin/src/routes/[organization]/-/settings/usage/+page.ts: error TS2307
 web-admin/src/routes/[organization]/-/upgrade-callback/+page.ts: error TS2307
diff --git a/web-admin/src/features/billing/Payment.svelte b/web-admin/src/features/billing/Payment.svelte
index bb936dab020..b63514af87d 100644
--- a/web-admin/src/features/billing/Payment.svelte
+++ b/web-admin/src/features/billing/Payment.svelte
@@ -1,67 +1,112 @@
 <script lang="ts">
-  import {
-    createAdminServiceGetBillingSubscription,
-    createAdminServiceGetOrganization,
-  } from "@rilldata/web-admin/client";
+  import { createAdminServiceGetOrganization } from "@rilldata/web-admin/client";
   import {
     getPaymentIssueErrorText,
     needsPaymentSetup,
   } from "@rilldata/web-admin/features/billing/issues/getMessageForPaymentIssues";
   import { fetchPaymentsPortalURL } from "@rilldata/web-admin/features/billing/plans/selectors";
   import { useCategorisedOrganizationBillingIssues } from "@rilldata/web-admin/features/billing/selectors";
-  import SettingsContainer from "@rilldata/web-admin/features/organizations/settings/SettingsContainer.svelte";
-  import { Button } from "@rilldata/web-common/components/button";
   import CancelCircle from "@rilldata/web-common/components/icons/CancelCircle.svelte";
-  import { isEnterprisePlan, isManagedPlan } from "./plans/utils";
 
   let { organization }: { organization: string } = $props();
 
   let org = $derived(createAdminServiceGetOrganization(organization));
-  let subscriptionQuery = $derived(
-    createAdminServiceGetBillingSubscription(organization),
-  );
-  let plan = $derived($subscriptionQuery?.data?.subscription?.plan);
   let categorisedIssues = $derived(
     useCategorisedOrganizationBillingIssues(organization),
   );
-  let paymentIssues = $derived($categorisedIssues.data?.payment);
-  let neverSubscribed = $derived(!!$categorisedIssues.data?.neverSubscribed);
-  let onTrial = $derived(!!$categorisedIssues.data?.trial);
-  let onManagedPlan = $derived(plan && isManagedPlan(plan.name));
-  let onEnterprisePlan = $derived(plan && isEnterprisePlan(plan.name));
-  // For enterprise and managed orgs, hide when payment details haven't been
-  // entered yet (setup done via CLI). Once set up, show the Manage button.
-  // neverSubscribed orgs are always hidden since the billing page is not shown.
-  let pendingSetup = $derived(
-    neverSubscribed ||
-      ((onManagedPlan || onEnterprisePlan) &&
-        needsPaymentSetup(paymentIssues ?? [])),
+  let hasPaymentCustomer = $derived(
+    !!$org.data?.organization?.paymentCustomerId,
   );
-
-  async function handleManagePayment() {
+  let paymentIssues = $derived($categorisedIssues.data?.payment);
+  async function handleManageCards() {
     const setup = paymentIssues?.length
       ? needsPaymentSetup(paymentIssues)
       : false;
     window.open(
       await fetchPaymentsPortalURL(organization, window.location.href, setup),
-      "_self",
+      "_blank",
     );
   }
 </script>
 
-<!-- Presence of paymentCustomerId signifies that the org's payment is managed through stripe -->
-{#if !$categorisedIssues.isLoading && $org.data?.organization?.paymentCustomerId && !onTrial && !pendingSetup}
-  <SettingsContainer title="Payment Method">
-    <div class="flex flex-row items-center gap-x-1">
+<section>
+  <h2 class="section-header">Payment methods</h2>
+  <div class="section-card">
+    <div class="card-content">
       {#if paymentIssues?.length}
-        <CancelCircle className="text-red-600" size="14px" />
-        {getPaymentIssueErrorText(paymentIssues)} Please click Manage below to correct.
+        <div class="flex items-center gap-x-2">
+          <CancelCircle className="text-red-600" size="14px" />
+          <span class="text-sm text-red-600">
+            {getPaymentIssueErrorText(paymentIssues)}
+          </span>
+        </div>
+      {:else if hasPaymentCustomer}
+        <!-- TODO: Show card details (brand, last4, expiry) from Stripe API -->
+        <div class="flex items-center gap-x-3">
+          <div class="card-icon">
+            <svg
+              class="w-5 h-5 text-fg-secondary"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                d="M2.5 4A1.5 1.5 0 001 5.5v1h18v-1A1.5 1.5 0 0017.5 4h-15zM19 8.5H1v6A1.5 1.5 0 002.5 16h15a1.5 1.5 0 001.5-1.5v-6zM3 12a1 1 0 011-1h3a1 1 0 110 2H4a1 1 0 01-1-1z"
+              />
+            </svg>
+          </div>
+          <div>
+            <p class="text-sm font-medium text-fg-primary">
+              Payment method on file
+            </p>
+            <p class="text-xs text-fg-tertiary">Manage your cards via Stripe</p>
+          </div>
+        </div>
       {:else}
-        Your payment method is valid and good to go.
+        <span class="text-sm text-fg-tertiary">No payment method on file.</span>
       {/if}
     </div>
-    {#snippet action()}
-      <Button type="secondary" onClick={handleManagePayment}>Manage</Button>
-    {/snippet}
-  </SettingsContainer>
-{/if}
+    {#if hasPaymentCustomer}
+      <button class="manage-btn" onclick={handleManageCards}>
+        Manage in Stripe
+        <svg
+          class="w-3.5 h-3.5"
+          viewBox="0 0 12 12"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+        >
+          <path d="M2.5 9.5l7-7M4 2.5h6v6" />
+        </svg>
+      </button>
+    {/if}
+  </div>
+</section>
+
+<style lang="postcss">
+  .section-header {
+    @apply text-lg font-medium text-fg-primary mb-3;
+  }
+
+  .section-card {
+    @apply flex items-center justify-between border rounded-lg p-4 bg-surface-background;
+    box-shadow:
+      0px 1px 2px 0px rgba(0, 0, 0, 0.06),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+  }
+
+  .card-content {
+    @apply flex items-center;
+  }
+
+  .card-icon {
+    @apply flex items-center justify-center w-8 h-8 bg-surface-subtle rounded;
+  }
+
+  .manage-btn {
+    @apply flex items-center gap-1.5 text-sm font-medium text-primary-600 border border-primary-500 rounded-sm px-4 py-2 bg-transparent cursor-pointer;
+  }
+
+  .manage-btn:hover {
+    @apply bg-primary-50;
+  }
+</style>
diff --git a/web-admin/src/features/billing/contact/BillingContactSetting.svelte b/web-admin/src/features/billing/contact/BillingContactSetting.svelte
index 83f4149eba0..6b5fb987850 100644
--- a/web-admin/src/features/billing/contact/BillingContactSetting.svelte
+++ b/web-admin/src/features/billing/contact/BillingContactSetting.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
   import ChangeBillingContactDialog from "@rilldata/web-admin/features/billing/contact/ChangeBillingContactDialog.svelte";
   import { getOrganizationBillingContactUser } from "@rilldata/web-admin/features/billing/contact/selectors";
-  import SettingsContainer from "@rilldata/web-admin/features/organizations/settings/SettingsContainer.svelte";
   import AvatarListItem from "@rilldata/web-common/components/avatar/AvatarListItem.svelte";
-  import { Button } from "@rilldata/web-common/components/button";
 
   let { organization }: { organization: string } = $props();
 
@@ -14,30 +12,58 @@
   let isUpdateBillingContactDialogOpen = $state(false);
 </script>
 
-<SettingsContainer title="Billing Contact">
-  <div class="flex flex-row items-center gap-x-1">
-    {#if $billingContactUser}
-      <AvatarListItem
-        name={$billingContactUser.displayName}
-        email={$billingContactUser.email}
-        photoUrl={$billingContactUser.photoUrl}
-      />
-    {:else}
-      This org has no billing contact.
-    {/if}
-  </div>
-  {#snippet action()}
-    <Button
-      type="secondary"
-      onClick={() => (isUpdateBillingContactDialogOpen = true)}
+<section>
+  <h2 class="section-header">Billing Contact</h2>
+  <div class="section-card">
+    <div class="card-content">
+      {#if $billingContactUser}
+        <AvatarListItem
+          name={$billingContactUser.displayName}
+          email={$billingContactUser.email}
+          photoUrl={$billingContactUser.photoUrl}
+        />
+      {:else}
+        <span class="text-sm text-fg-tertiary"
+          >This org has no billing contact.</span
+        >
+      {/if}
+    </div>
+    <button
+      class="manage-btn"
+      onclick={() => (isUpdateBillingContactDialogOpen = true)}
     >
       Change billing contact
-    </Button>
-  {/snippet}
-</SettingsContainer>
+    </button>
+  </div>
+</section>
 
 <ChangeBillingContactDialog
   bind:open={isUpdateBillingContactDialogOpen}
   {organization}
   currentBillingContact={$billingContactUser?.email}
 />
+
+<style lang="postcss">
+  .section-header {
+    @apply text-lg font-medium text-fg-primary mb-3;
+  }
+
+  .section-card {
+    @apply flex items-center justify-between border rounded-lg p-4 bg-surface-background;
+    box-shadow:
+      0px 1px 2px 0px rgba(0, 0, 0, 0.06),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+  }
+
+  .card-content {
+    @apply flex items-center;
+  }
+
+  .manage-btn {
+    @apply flex items-center gap-1.5 text-sm font-medium text-primary-600 border border-primary-500 rounded-sm px-4 py-2 bg-transparent cursor-pointer;
+  }
+
+  .manage-btn:hover {
+    @apply bg-primary-50;
+  }
+</style>
diff --git a/web-admin/src/features/billing/plans/CancelledTeamPlan.svelte b/web-admin/src/features/billing/plans/CancelledTeamPlan.svelte
index b332d700001..8df2ccd06d4 100644
--- a/web-admin/src/features/billing/plans/CancelledTeamPlan.svelte
+++ b/web-admin/src/features/billing/plans/CancelledTeamPlan.svelte
@@ -13,10 +13,12 @@
     organization,
     plan,
     showUpgradeDialog,
+    billingPortalUrl,
   }: {
     organization: string;
     plan: V1BillingPlan;
     showUpgradeDialog: boolean;
+    billingPortalUrl: string | undefined;
   } = $props();
 
   let categorisedIssues = $derived(
@@ -52,6 +54,16 @@
         and your subscription has ended.
       {/if}
     </div>
+    {#if billingPortalUrl}
+      <div>
+        <a
+          href={billingPortalUrl}
+          target="_blank"
+          rel="noreferrer noopener"
+          class="invoice-link">View Invoice</a
+        >
+      </div>
+    {/if}
     {#if plan}
       <!-- if there is no plan then quotas will be set to 0. It doesnt make sense to show this then -->
       <PlanQuotas {organization} />
@@ -77,3 +89,12 @@
     endDate={cancelledSubIssue?.metadata.subscriptionCancelled?.endDate}
   />
 {/if}
+
+<style lang="postcss">
+  .invoice-link {
+    @apply text-sm text-primary-500 no-underline mt-2 inline-block;
+  }
+  .invoice-link:hover {
+    @apply text-primary-600 underline;
+  }
+</style>
diff --git a/web-admin/src/features/billing/plans/POCPlan.svelte b/web-admin/src/features/billing/plans/POCPlan.svelte
index 59a7438a9cb..c2e2d93c6b4 100644
--- a/web-admin/src/features/billing/plans/POCPlan.svelte
+++ b/web-admin/src/features/billing/plans/POCPlan.svelte
@@ -10,10 +10,12 @@
     organization,
     hasPayment,
     plan,
+    billingPortalUrl,
   }: {
     organization: string;
     hasPayment: boolean;
     plan: V1BillingPlan;
+    billingPortalUrl: string | undefined;
   } = $props();
 
   let open = $state(false);
@@ -22,6 +24,16 @@
 <SettingsContainer title={plan?.displayName}>
   <div>
     <div>You're currently on a custom contract.</div>
+    {#if billingPortalUrl}
+      <div>
+        <a
+          href={billingPortalUrl}
+          target="_blank"
+          rel="noreferrer noopener"
+          class="invoice-link">View Invoice</a
+        >
+      </div>
+    {/if}
     <PlanQuotas {organization} />
   </div>
   {#snippet contact()}
@@ -38,3 +50,12 @@
 </SettingsContainer>
 
 <StartTeamPlanDialog bind:open {organization} type="base" />
+
+<style lang="postcss">
+  .invoice-link {
+    @apply text-sm text-primary-500 no-underline mt-2 inline-block;
+  }
+  .invoice-link:hover {
+    @apply text-primary-600 underline;
+  }
+</style>
diff --git a/web-admin/src/features/billing/plans/Plan.svelte b/web-admin/src/features/billing/plans/Plan.svelte
index 5a5cc6ef62a..09e4a38e813 100644
--- a/web-admin/src/features/billing/plans/Plan.svelte
+++ b/web-admin/src/features/billing/plans/Plan.svelte
@@ -1,63 +1,510 @@
 <script lang="ts">
-  import { createAdminServiceGetBillingSubscription } from "@rilldata/web-admin/client";
-  import CancelledTeamPlan from "@rilldata/web-admin/features/billing/plans/CancelledTeamPlan.svelte";
-  import EnterprisePlan from "@rilldata/web-admin/features/billing/plans/EnterprisePlan.svelte";
-  import FreePlan from "@rilldata/web-admin/features/billing/plans/FreePlan.svelte";
-  import ProPlan from "@rilldata/web-admin/features/billing/plans/ProPlan.svelte";
-  import POCPlan from "@rilldata/web-admin/features/billing/plans/POCPlan.svelte";
-  import TeamPlan from "@rilldata/web-admin/features/billing/plans/TeamPlan.svelte";
-  import TrialPlan from "@rilldata/web-admin/features/billing/plans/TrialPlan.svelte";
   import {
-    isFreePlan,
-    isProPlan,
+    createAdminServiceGetBillingSubscription,
+    createAdminServiceListProjectsForOrganization,
+    V1BillingPlanType,
+  } from "@rilldata/web-admin/client";
+  import { getOrganizationUsageMetrics } from "@rilldata/web-admin/features/billing/plans/selectors";
+  import type { TeamPlanDialogTypes } from "@rilldata/web-admin/features/billing/plans/types";
+  import {
+    isEnterprisePlan,
     isManagedPlan,
+    isProPlan,
     isTeamPlan,
   } from "@rilldata/web-admin/features/billing/plans/utils";
   import { useCategorisedOrganizationBillingIssues } from "@rilldata/web-admin/features/billing/selectors";
+  import { formatMemorySize } from "@rilldata/web-common/lib/number-formatting/memory-size";
+  import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
+  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
+  import InfoCircle from "@rilldata/web-common/components/icons/InfoCircle.svelte";
+  import PlanCards from "@rilldata/web-admin/features/billing/plans/PlanCards.svelte";
+  import StartTeamPlanDialog from "@rilldata/web-admin/features/billing/plans/StartTeamPlanDialog.svelte";
+  import { fetchPaymentsPortalURL } from "@rilldata/web-admin/features/billing/plans/selectors";
+
+  let {
+    organization,
+    showUpgradeDialog,
+  }: {
+    organization: string;
+    showUpgradeDialog: boolean;
+  } = $props();
+
+  let subscriptionQuery = $derived(
+    createAdminServiceGetBillingSubscription(organization),
+  );
+  let subscription = $derived($subscriptionQuery?.data?.subscription);
+  let plan = $derived(subscription?.plan);
+
+  let categorisedIssues = $derived(
+    useCategorisedOrganizationBillingIssues(organization),
+  );
+
+  let subHasEnded = $derived(!!$categorisedIssues.data?.cancelled);
+  let planType = $derived(plan?.planType);
+  let planName = $derived(plan?.name ?? "");
+
+  type PlanTier = "trial" | "pro" | "team" | "enterprise";
+  let currentPlan: PlanTier = $derived.by(() => {
+    // Prefer planType enum when available; fall back to plan.name string matching
+    if (
+      planType === V1BillingPlanType.BILLING_PLAN_TYPE_TEAM ||
+      isTeamPlan(planName)
+    )
+      return "team";
+    if (
+      planType === V1BillingPlanType.BILLING_PLAN_TYPE_ENTERPRISE ||
+      planType === V1BillingPlanType.BILLING_PLAN_TYPE_MANAGED ||
+      isManagedPlan(planName) ||
+      isEnterprisePlan(planName)
+    )
+      return "enterprise";
+    if (
+      planType === V1BillingPlanType.BILLING_PLAN_TYPE_PRO ||
+      isProPlan(planName)
+    )
+      return "pro";
+    // free_trial, free, no plan, cancelled — all trial
+    return "trial";
+  });
+
+  let isTrialExpired = $derived(
+    $categorisedIssues.data?.trial?.type === "BILLING_ISSUE_TYPE_TRIAL_ENDED",
+  );
+
+  let dialogType: TeamPlanDialogTypes = $derived.by(() => {
+    if (subHasEnded) return "renew";
+    if (isTrialExpired) return "trial-expired";
+    return "base";
+  });
+
+  let renewEndDate = $derived(
+    $categorisedIssues.data?.cancelled?.metadata?.subscriptionCancelled
+      ?.endDate ?? "",
+  );
+
+  // Trial timer
+  const TRIAL_DAYS = 30;
+  let trialEndDate = $derived(subscription?.trialEndDate);
+  let trialDaysUsed = $derived.by(() => {
+    if (!trialEndDate) return 0;
+    const end = new Date(trialEndDate).getTime();
+    const start = end - TRIAL_DAYS * 24 * 60 * 60 * 1000;
+    const now = Date.now();
+    const elapsed = Math.floor((now - start) / (24 * 60 * 60 * 1000));
+    return Math.max(0, Math.min(TRIAL_DAYS, elapsed));
+  });
+  let trialDaysRemaining = $derived(TRIAL_DAYS - trialDaysUsed);
+  let trialPercent = $derived(Math.round((trialDaysUsed / TRIAL_DAYS) * 100));
+
+  // Slots + storage data
+  let projectsQuery = $derived(
+    createAdminServiceListProjectsForOrganization(organization),
+  );
+  let projects = $derived($projectsQuery.data?.projects ?? []);
+
+  let prodSlots = $derived(
+    projects.reduce((sum, p) => sum + Number(p.prodSlots ?? 0), 0),
+  );
+  let devSlots = $derived(
+    projects.reduce((sum, p) => sum + Number(p.devSlots ?? 0), 0),
+  );
+  let totalSlots = $derived(prodSlots + devSlots);
+
+  let usageMetrics = $derived(getOrganizationUsageMetrics(organization));
+  let totalStorage = $derived(
+    $usageMetrics?.data?.reduce((s, m) => s + m.size, 0) ?? 0,
+  );
+
+  // Est. monthly cost: $0.15/slot/hr × 730 hrs/mo
+  const fmtCost = (slots: number) =>
+    (slots * 0.15 * 730).toLocaleString(undefined, {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 2,
+    });
+  let prodCost = $derived(fmtCost(prodSlots));
+  let devCost = $derived(fmtCost(devSlots));
 
-  export let organization: string;
-  export let showUpgradeDialog: boolean;
-
-  $: subscriptionQuery = createAdminServiceGetBillingSubscription(organization);
-  $: subscription = $subscriptionQuery?.data?.subscription;
-  $: hasPayment = !!$subscriptionQuery?.data?.organization?.paymentCustomerId;
-  $: plan = subscription?.plan;
-
-  $: categorisedIssues = useCategorisedOrganizationBillingIssues(organization);
-
-  // fresh orgs will have a never subscribed issue associated with it
-  $: neverSubbed = !!$categorisedIssues.data?.neverSubscribed;
-  // trial plan will have a trial issue associated with it
-  $: isTrial = !!$categorisedIssues.data?.trial;
-  // ended subscription will have a cancelled issue associated with it
-  $: subHasEnded = !!$categorisedIssues.data?.cancelled;
-  $: subIsFreePlan = plan && isFreePlan(plan.name);
-  $: subIsProPlan = plan && isProPlan(plan.name);
-  $: subIsTeamPlan = plan && isTeamPlan(plan.name);
-  $: subIsManagedPlan = plan && isManagedPlan(plan.name);
-  $: subIsEnterprisePlan =
-    plan &&
-    !isTrial &&
-    !subIsFreePlan &&
-    !subIsProPlan &&
-    !subIsTeamPlan &&
-    !subIsManagedPlan;
+  // Storage cost: $1/GB/mo
+  let storageCost = $derived(
+    (totalStorage / 1e9).toLocaleString(undefined, {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 2,
+    }),
+  );
+
+  // Total period estimate
+  let totalEstimate = $derived(
+    (totalSlots * 0.15 * 730 + totalStorage / 1e9).toLocaleString(undefined, {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 2,
+    }),
+  );
+
+  // Billing cycle
+  let cycleStart = $derived(subscription?.currentBillingCycleStartDate);
+  let cycleEnd = $derived(subscription?.currentBillingCycleEndDate);
+  function formatCycleDate(dateStr: string | undefined): string {
+    if (!dateStr) return "";
+    return new Date(dateStr).toLocaleDateString(undefined, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  }
+
+  // Compare plans
+  let comparePlansOpen = $state(false);
+  let showComparePlans = $derived(currentPlan !== "enterprise");
+
+  // Upgrade dialog
+  let upgradeDialogOpen = $state(false);
+  $effect(() => {
+    if (showUpgradeDialog) upgradeDialogOpen = true;
+  });
+
+  async function handleSubscribe() {
+    window.open(
+      await fetchPaymentsPortalURL(organization, window.location.href),
+      "_self",
+    );
+  }
+
+  function handleContactSales() {
+    window.Pylon("show");
+  }
 </script>
 
-{#if neverSubbed}
-  <!-- TODO: once mocks are in. Right now we just disable the routes. -->
-{:else if isTrial}
-  <TrialPlan {organization} {subscription} {showUpgradeDialog} {plan} />
-{:else if subHasEnded}
-  <CancelledTeamPlan {organization} {showUpgradeDialog} {plan} />
-{:else if subIsFreePlan}
-  <FreePlan {organization} {plan} />
-{:else if subIsProPlan}
-  <ProPlan {organization} {subscription} {plan} />
-{:else if subIsTeamPlan}
-  <TeamPlan {organization} {subscription} {plan} />
-{:else if subIsManagedPlan}
-  <POCPlan {organization} {hasPayment} {plan} />
-{:else if subIsEnterprisePlan}
-  <EnterprisePlan {organization} {plan} />
-{/if}
+<section>
+  <h2 class="section-header">Plan</h2>
+
+  <div class="plan-card">
+    <!-- Top row: badge + description + action -->
+    <div class="plan-top">
+      <div class="flex items-center gap-3">
+        {#if currentPlan === "enterprise"}
+          <span class="plan-badge enterprise">Enterprise</span>
+          <span class="plan-description">Custom contract · Fully managed</span>
+        {:else if currentPlan === "trial"}
+          <span class="plan-badge trial">Free Trial</span>
+          {#if isTrialExpired}
+            <span class="plan-description"
+              >Trial expired · Projects hibernated</span
+            >
+          {:else}
+            <span class="plan-description">30 day free trial</span>
+          {/if}
+        {:else if currentPlan === "pro"}
+          <span class="plan-badge pro">Pro</span>
+          <span class="plan-description"
+            >Usage based pricing. $0.15/unit/hr · $1/GB storage/mo</span
+          >
+        {:else if currentPlan === "team"}
+          <span class="plan-badge team">Team (Legacy)</span>
+          <span class="plan-description">$250/mo flat + storage</span>
+        {/if}
+      </div>
+
+      <div class="flex items-center gap-2">
+        {#if currentPlan === "trial"}
+          <button class="subscribe-btn" onclick={handleSubscribe}>
+            Subscribe to Pro
+          </button>
+        {:else if currentPlan === "team"}
+          <button class="subscribe-btn" onclick={handleSubscribe}>
+            Switch to Pro
+          </button>
+          <button class="contact-btn" onclick={handleContactSales}>
+            Upgrade to Enterprise
+          </button>
+        {/if}
+        <Tooltip location="left" alignment="middle" distance={8}>
+          <span class="text-fg-muted flex">
+            <InfoCircle size="16px" />
+          </span>
+          <TooltipContent maxWidth="240px" slot="tooltip-content">
+            $0.15/unit/hr · $1/GB storage/mo. Cancel anytime.
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    </div>
+
+    {#if currentPlan === "enterprise"}
+      <p class="text-sm text-fg-secondary mt-4">
+        Fully managed slots, dedicated CSM, white-label capabilities, and custom
+        SLAs. Contact your CSM for contract details or changes.
+      </p>
+    {/if}
+
+    {#if currentPlan === "trial" && trialEndDate}
+      <div class="trial-section">
+        <div class="flex justify-between mb-1">
+          <div>
+            <span class="trial-label">Days used</span>
+            <p class="trial-number-used">
+              {trialDaysUsed}
+            </p>
+          </div>
+          <div class="text-right">
+            <span class="trial-label">Days remaining</span>
+            <p
+              class="trial-number"
+              class:text-green-600={trialDaysRemaining > 7}
+              class:text-red-600={trialDaysRemaining <= 7}
+            >
+              {trialDaysRemaining}
+            </p>
+          </div>
+        </div>
+        <div class="trial-bar-bg">
+          <div class="trial-bar-fill" style:width="{trialPercent}%"></div>
+        </div>
+        <div class="flex justify-between mt-1">
+          <span class="text-xs text-fg-tertiary">
+            {trialPercent}% of trial used, projects will hibernate when trial
+            ends
+          </span>
+          <span class="text-xs text-fg-tertiary">30 days</span>
+        </div>
+      </div>
+    {/if}
+
+    {#if currentPlan !== "enterprise" && currentPlan !== "trial"}
+      <div class="period-estimate">
+        <span class="period-label">Current period estimate</span>
+        <span class="period-value">{totalEstimate}</span>
+        {#if cycleStart || cycleEnd}
+          <span class="period-cycle"
+            >{formatCycleDate(cycleStart)} – {formatCycleDate(cycleEnd)}</span
+          >
+        {/if}
+      </div>
+    {/if}
+
+    {#if currentPlan !== "enterprise"}
+      <!-- Cost + usage row -->
+      <div class="stats-row">
+        <div class="flex items-center gap-4">
+          <div class="stat-column">
+            <span class="stat-value">{prodCost}</span>
+            <span class="stat-label">{prodSlots} Prod Compute Units</span>
+          </div>
+          <div class="stat-column">
+            <span class="stat-value">{devCost}</span>
+            <span class="stat-label">{devSlots} Dev Compute Units</span>
+          </div>
+          <div class="stat-column">
+            <span class="stat-value">{storageCost}</span>
+            <span class="stat-label"
+              >{totalStorage > 0 ? formatMemorySize(totalStorage) : "0 B"} Storage</span
+            >
+          </div>
+        </div>
+        <a
+          href="/{organization}/-/settings/billing/usage"
+          class="view-usage-link"
+        >
+          View Usage
+          <svg
+            class="w-3 h-3"
+            viewBox="0 0 12 12"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
+            <path d="M1 6h9M7.5 3l3 3-3 3" />
+          </svg>
+        </a>
+      </div>
+    {/if}
+
+    <!-- Compare plans toggle -->
+    {#if showComparePlans}
+      <button
+        class="compare-toggle"
+        class:open={comparePlansOpen}
+        onclick={() => (comparePlansOpen = !comparePlansOpen)}
+      >
+        Compare plans
+        <svg
+          class="w-4 h-4 transition-transform"
+          class:rotate-180={!comparePlansOpen}
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+        >
+          <path d="M4 10l4-4 4 4" />
+        </svg>
+      </button>
+
+      {#if comparePlansOpen}
+        <PlanCards
+          {organization}
+          {currentPlan}
+          {showUpgradeDialog}
+          {dialogType}
+          {renewEndDate}
+        />
+      {/if}
+    {/if}
+  </div>
+</section>
+
+<StartTeamPlanDialog
+  bind:open={upgradeDialogOpen}
+  {organization}
+  type={dialogType}
+  endDate={renewEndDate}
+/>
+
+<style lang="postcss">
+  .section-header {
+    @apply text-lg font-medium text-fg-primary mb-3;
+  }
+
+  .plan-card {
+    @apply border rounded-xl bg-surface-background p-6;
+    box-shadow:
+      0px 1px 2px 0px rgba(0, 0, 0, 0.06),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+  }
+
+  .plan-top {
+    @apply flex items-center justify-between;
+  }
+
+  .plan-badge {
+    @apply inline-flex items-center justify-center text-xs font-semibold rounded-full border-none;
+    width: 76px;
+    height: 21px;
+    gap: 8px;
+  }
+
+  .plan-badge.trial {
+    @apply text-primary-600 bg-primary-50;
+  }
+
+  .plan-badge.pro {
+    @apply text-primary-600 bg-primary-50;
+  }
+
+  .plan-badge.team {
+    @apply text-fg-secondary bg-surface-subtle;
+  }
+
+  .plan-badge.enterprise {
+    @apply text-primary-600 bg-primary-50;
+  }
+
+  .plan-description {
+    @apply font-sans font-semibold text-lg leading-7 align-middle text-fg-tertiary;
+  }
+
+  .period-estimate {
+    @apply flex flex-col items-center mt-4 pt-6 pb-4;
+    gap: 8px;
+  }
+
+  .period-label {
+    @apply font-sans font-semibold text-xs text-fg-tertiary;
+    line-height: 100%;
+  }
+
+  .period-value {
+    @apply font-sans font-semibold text-4xl leading-10 text-fg-primary;
+  }
+
+  .period-cycle {
+    @apply font-sans font-medium text-xs text-fg-tertiary;
+    line-height: 100%;
+  }
+
+  .trial-label {
+    @apply font-sans font-semibold text-xs text-fg-tertiary;
+    line-height: 100%;
+  }
+
+  .trial-number-used {
+    @apply font-sans font-semibold text-2xl leading-8;
+  }
+
+  .trial-number {
+    @apply font-sans font-semibold text-4xl leading-10;
+  }
+
+  .subscribe-btn {
+    @apply text-sm font-medium text-white bg-primary-500 px-5 py-2 cursor-pointer border-none rounded-none;
+  }
+
+  .subscribe-btn:hover {
+    @apply bg-primary-600;
+  }
+
+  .contact-btn {
+    @apply text-sm font-medium text-fg-primary border border-gray-300 px-5 py-2 cursor-pointer bg-transparent rounded-none;
+  }
+
+  .contact-btn:hover {
+    @apply bg-surface-subtle;
+  }
+
+  .trial-section {
+    @apply mt-4 pt-4 border-t;
+  }
+
+  .trial-bar-bg {
+    @apply w-full h-2 bg-gray-200 rounded-full overflow-hidden;
+  }
+
+  .trial-bar-fill {
+    @apply h-full bg-primary-500 rounded-full transition-all;
+  }
+
+  .stats-row {
+    @apply flex items-center justify-between bg-surface-subtle border-t;
+    margin: 16px -24px 0;
+    padding: 12px 24px;
+  }
+
+  .view-usage-link {
+    @apply flex items-center gap-1 text-sm font-medium text-primary-600 no-underline;
+  }
+
+  .view-usage-link:hover {
+    @apply underline;
+  }
+
+  .stat-column {
+    @apply flex flex-col gap-1;
+  }
+
+  .stat-value {
+    @apply font-sans font-medium text-sm;
+    line-height: 100%;
+  }
+
+  .stat-label {
+    @apply font-sans font-medium text-xs text-fg-tertiary;
+    line-height: 100%;
+  }
+
+  .compare-toggle {
+    @apply flex items-center justify-center gap-1.5 text-sm font-medium text-fg-secondary cursor-pointer bg-transparent border-t border-l-0 border-r-0 border-b-0;
+    margin: 0 -24px -24px;
+    width: calc(100% + 48px);
+    padding: 12px 0;
+    border-radius: 0 0 12px 12px;
+  }
+
+  .compare-toggle.open {
+    margin-bottom: 0;
+    border-radius: 0;
+  }
+
+  .compare-toggle:hover {
+    @apply text-fg-primary;
+  }
+</style>
diff --git a/web-admin/src/features/billing/plans/PlanCards.svelte b/web-admin/src/features/billing/plans/PlanCards.svelte
new file mode 100644
index 00000000000..113939e43a1
--- /dev/null
+++ b/web-admin/src/features/billing/plans/PlanCards.svelte
@@ -0,0 +1,268 @@
+<script lang="ts">
+  import StartTeamPlanDialog from "@rilldata/web-admin/features/billing/plans/StartTeamPlanDialog.svelte";
+  import { goto } from "$app/navigation";
+  import type { TeamPlanDialogTypes } from "@rilldata/web-admin/features/billing/plans/types";
+
+  type PlanTier = "trial" | "pro" | "team" | "enterprise";
+
+  let {
+    organization,
+    currentPlan,
+    showUpgradeDialog = false,
+    dialogType = "base",
+    renewEndDate = "",
+  }: {
+    organization: string;
+    currentPlan: PlanTier;
+    showUpgradeDialog?: boolean;
+    dialogType?: TeamPlanDialogTypes;
+    renewEndDate?: string;
+  } = $props();
+
+  // Hide plans smaller than current. Team (legacy) shows Pro + Enterprise.
+  let showTrial = $derived(currentPlan === "trial");
+  let showPro = $derived(
+    currentPlan === "trial" || currentPlan === "pro" || currentPlan === "team",
+  );
+  let showEnterprise = $derived(currentPlan !== "enterprise");
+
+  let upgradeDialogOpen = $state(false);
+  $effect(() => {
+    if (showUpgradeDialog) upgradeDialogOpen = true;
+  });
+
+  function handleEstimateCost() {
+    goto(`/${organization}/-/settings/billing/estimate`);
+  }
+
+  function handleContactSales() {
+    window.Pylon("show");
+  }
+
+  const trialFeatures = [
+    "30-day free trial period",
+    "Self-serve slots (2 prod slot minimum)",
+    "1 GB storage included · $1/GB above",
+    '"Made with Rill" badge',
+  ];
+
+  const proFeatures = [
+    "Cancel anytime, data preserved 30 days",
+    "Billed on prod slots + GB data overages",
+    "1 GB storage included · $1/GB above",
+    '"Made with Rill" badge',
+  ];
+
+  const teamFeatures = [
+    "$250/mo flat charge",
+    "1 GB storage included · $25/GB above",
+    "Email / Chat support",
+    "10 slot limit",
+  ];
+
+  const enterpriseFeatures = [
+    "Custom contract pricing",
+    "Fully managed slots by Rill",
+    "Custom storage limits",
+    "Custom colors, logo, no badge",
+  ];
+
+  let showTeam = $derived(currentPlan === "team");
+</script>
+
+<div class="compare-container">
+  {#if showTrial}
+    <div class="plan-col">
+      <h3 class="plan-name">Free Trial</h3>
+      <p class="plan-pricing-main">30 day free trial</p>
+      <p class="plan-pricing-sub">No credit card required</p>
+
+      <ul class="feature-list">
+        {#each trialFeatures as feature}
+          <li class="feature-item">
+            <svg class="check-icon" viewBox="0 0 16 16" fill="none">
+              <path
+                d="M13.3 4.7a.5.5 0 0 1 0 .7l-6.5 6.5a.5.5 0 0 1-.7 0L3.2 9a.5.5 0 1 1 .7-.7l2.6 2.6 6.1-6.1a.5.5 0 0 1 .7 0Z"
+                fill="currentColor"
+              />
+            </svg>
+            <span>{feature}</span>
+          </li>
+        {/each}
+      </ul>
+
+      <button class="col-btn current-btn" disabled>Current plan</button>
+    </div>
+  {/if}
+
+  {#if showTrial && (showTeam || showPro)}
+    <span class="col-divider"></span>
+  {/if}
+
+  {#if showTeam}
+    <div class="plan-col">
+      <h3 class="plan-name">Team plan (legacy)</h3>
+      <p class="plan-pricing-main">$250/mo</p>
+      <p class="plan-pricing-sub">Flat rate + storage</p>
+
+      <ul class="feature-list">
+        {#each teamFeatures as feature}
+          <li class="feature-item">
+            <svg class="check-icon" viewBox="0 0 16 16" fill="none">
+              <path
+                d="M13.3 4.7a.5.5 0 0 1 0 .7l-6.5 6.5a.5.5 0 0 1-.7 0L3.2 9a.5.5 0 1 1 .7-.7l2.6 2.6 6.1-6.1a.5.5 0 0 1 .7 0Z"
+                fill="currentColor"
+              />
+            </svg>
+            <span>{feature}</span>
+          </li>
+        {/each}
+      </ul>
+
+      <button class="col-btn current-btn" disabled>Current plan</button>
+    </div>
+    <span class="col-divider"></span>
+  {/if}
+
+  {#if showPro}
+    <div class="plan-col">
+      <h3 class="plan-name">Pro</h3>
+      <p class="plan-pricing-main">Usage based pricing</p>
+      <button class="estimate-cost-link" onclick={handleEstimateCost}>
+        Estimate your cost →
+      </button>
+
+      <ul class="feature-list">
+        {#each proFeatures as feature}
+          <li class="feature-item">
+            <svg class="check-icon" viewBox="0 0 16 16" fill="none">
+              <path
+                d="M13.3 4.7a.5.5 0 0 1 0 .7l-6.5 6.5a.5.5 0 0 1-.7 0L3.2 9a.5.5 0 1 1 .7-.7l2.6 2.6 6.1-6.1a.5.5 0 0 1 .7 0Z"
+                fill="currentColor"
+              />
+            </svg>
+            <span>{feature}</span>
+          </li>
+        {/each}
+      </ul>
+
+      {#if currentPlan === "pro"}
+        <button class="col-btn current-btn" disabled>Current plan</button>
+      {:else}
+        <button class="col-btn primary-btn" onclick={handleEstimateCost}>
+          Subscribe to Pro
+        </button>
+      {/if}
+    </div>
+  {/if}
+
+  {#if showPro && showEnterprise}
+    <span class="col-divider"></span>
+  {/if}
+
+  {#if showEnterprise}
+    <div class="plan-col">
+      <h3 class="plan-name">Enterprise</h3>
+      <p class="plan-pricing-main">Custom pricing</p>
+      <p class="plan-pricing-sub">Annual contract</p>
+
+      <ul class="feature-list">
+        {#each enterpriseFeatures as feature}
+          <li class="feature-item">
+            <svg class="check-icon" viewBox="0 0 16 16" fill="none">
+              <path
+                d="M13.3 4.7a.5.5 0 0 1 0 .7l-6.5 6.5a.5.5 0 0 1-.7 0L3.2 9a.5.5 0 1 1 .7-.7l2.6 2.6 6.1-6.1a.5.5 0 0 1 .7 0Z"
+                fill="currentColor"
+              />
+            </svg>
+            <span>{feature}</span>
+          </li>
+        {/each}
+      </ul>
+
+      <button class="col-btn action-btn" onclick={handleContactSales}>
+        Contact sales
+      </button>
+    </div>
+  {/if}
+</div>
+
+<StartTeamPlanDialog
+  bind:open={upgradeDialogOpen}
+  {organization}
+  type={dialogType}
+  endDate={renewEndDate}
+/>
+
+<style lang="postcss">
+  .compare-container {
+    @apply flex bg-surface-background;
+    gap: 24px;
+    margin: 0 -24px -24px;
+    padding: 24px 36px 36px;
+    border-radius: 0 0 12px 12px;
+  }
+
+  .plan-col {
+    @apply flex flex-col flex-1;
+  }
+
+  .col-divider {
+    @apply w-px bg-gray-200 my-6 shrink-0;
+  }
+
+  .plan-name {
+    @apply text-sm font-medium text-fg-secondary mb-1;
+  }
+
+  .plan-pricing-main {
+    @apply text-lg font-bold text-fg-primary;
+  }
+
+  .plan-pricing-sub {
+    @apply text-sm text-fg-tertiary mt-0.5 mb-4;
+  }
+
+  .estimate-cost-link {
+    @apply font-sans font-medium text-xs leading-4 align-middle text-primary-500 cursor-pointer mt-0.5 mb-4 block bg-transparent border-none p-0 text-left;
+  }
+  .estimate-cost-link:hover {
+    @apply text-primary-600 underline;
+  }
+
+  .feature-list {
+    @apply flex flex-col gap-2.5 pt-4 border-t list-none p-0 m-0 flex-1;
+  }
+
+  .feature-item {
+    @apply flex items-start gap-2 text-sm text-fg-secondary;
+  }
+
+  .check-icon {
+    @apply w-4 h-4 shrink-0 text-primary-500 mt-0.5;
+  }
+
+  .col-btn {
+    @apply w-full py-2.5 px-4 text-sm font-medium rounded-none cursor-pointer mt-6;
+  }
+
+  .current-btn {
+    @apply text-fg-tertiary bg-surface-subtle border border-gray-200 cursor-default;
+  }
+
+  .action-btn {
+    @apply text-fg-primary bg-transparent border border-gray-300;
+  }
+
+  .action-btn:hover {
+    @apply bg-surface-subtle;
+  }
+
+  .primary-btn {
+    @apply text-white bg-primary-500 border-none;
+  }
+
+  .primary-btn:hover {
+    @apply bg-primary-600;
+  }
+</style>
diff --git a/web-admin/src/features/billing/plans/TeamPlan.svelte b/web-admin/src/features/billing/plans/TeamPlan.svelte
index ca992719673..7357deb9fca 100644
--- a/web-admin/src/features/billing/plans/TeamPlan.svelte
+++ b/web-admin/src/features/billing/plans/TeamPlan.svelte
@@ -28,10 +28,12 @@
     organization,
     subscription,
     plan,
+    billingPortalUrl,
   }: {
     organization: string;
     subscription: V1Subscription;
     plan: V1BillingPlan;
+    billingPortalUrl: string | undefined;
   } = $props();
 
   let planCanceller = $derived(createAdminServiceCancelBillingSubscription());
@@ -63,11 +65,16 @@
   <div>
     Next billing cycle will start on
     <b>{getNextBillingCycleDate(subscription.currentBillingCycleEndDate)}</b>.
-    <a
-      href="https://www.rilldata.com/pricing"
-      target="_blank"
-      rel="noreferrer noopener">See pricing details -></a
-    >
+    {#if billingPortalUrl}
+      <div>
+        <a
+          href={billingPortalUrl}
+          target="_blank"
+          rel="noreferrer noopener"
+          class="invoice-link">View Invoice</a
+        >
+      </div>
+    {/if}
     <PlanQuotas {organization} />
   </div>
   {#snippet contact()}
@@ -115,3 +122,12 @@
     </AlertDialog>
   {/snippet}
 </SettingsContainer>
+
+<style lang="postcss">
+  .invoice-link {
+    @apply text-sm text-primary-500 no-underline mt-2 inline-block;
+  }
+  .invoice-link:hover {
+    @apply text-primary-600 underline;
+  }
+</style>
diff --git a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte
index c6f3c752d5b..f96e0ad59ef 100644
--- a/web-admin/src/features/projects/status/overview/DeploymentSection.svelte
+++ b/web-admin/src/features/projects/status/overview/DeploymentSection.svelte
@@ -245,7 +245,7 @@
           <span class="info-value">
             <a
               href="/{organization}/{project}/-/status/tables"
-              class="repo-link"
+              class="data-size-link"
             >
               {formatMemorySize(dataSizeBytes)}
             </a>
@@ -281,4 +281,9 @@
   .repo-link:hover {
     @apply underline;
   }
+  .data-size-link {
+    @apply no-underline;
+    color: inherit;
+    font: inherit;
+  }
 </style>
diff --git a/web-admin/src/routes/[organization]/-/settings/+layout.svelte b/web-admin/src/routes/[organization]/-/settings/+layout.svelte
index d2507e0479b..8268c41dfdd 100644
--- a/web-admin/src/routes/[organization]/-/settings/+layout.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/+layout.svelte
@@ -1,36 +1,50 @@
 <!-- ORG SETTINGS -->
 
 <script lang="ts">
+  import type { Snippet } from "svelte";
   import { page } from "$app/stores";
+  import { V1BillingPlanType } from "@rilldata/web-admin/client";
   import LeftNav from "@rilldata/web-admin/components/nav/LeftNav.svelte";
-  import { isEnterprisePlan } from "@rilldata/web-admin/features/billing/plans/utils";
+  import {
+    isEnterprisePlan,
+    isManagedPlan,
+  } from "@rilldata/web-admin/features/billing/plans/utils";
   import type { PageData } from "./$types";
   import ContentContainer from "@rilldata/web-common/components/layout/ContentContainer.svelte";
 
-  export let data: PageData;
+  let {
+    data,
+    children,
+  }: {
+    data: PageData;
+    children: Snippet;
+  } = $props();
 
-  $: ({ subscription, neverSubscribed, billingPortalUrl } = data);
+  let organization = $derived($page.params.organization);
+  let basePage = $derived(`/${organization}/-/settings`);
 
-  $: organization = $page.params.organization;
-  $: basePage = `/${organization}/-/settings`;
-  $: onEnterprisePlan =
-    subscription?.plan?.name && isEnterprisePlan(subscription.plan.name);
-  $: hideBillingSettings = neverSubscribed;
-  $: hideUsageSettings = onEnterprisePlan || !billingPortalUrl;
+  let planType = $derived(data.subscription?.plan?.planType);
+  let planName = $derived(data.subscription?.plan?.name ?? "");
+  let isEnterprise = $derived(
+    planType === V1BillingPlanType.BILLING_PLAN_TYPE_ENTERPRISE ||
+      planType === V1BillingPlanType.BILLING_PLAN_TYPE_MANAGED ||
+      isManagedPlan(planName) ||
+      isEnterprisePlan(planName),
+  );
 
-  $: navItems = [
+  let navItems = $derived([
     { label: "General", route: "", hasPermission: true },
     {
       label: "Billing",
       route: "/billing",
-      hasPermission: !hideBillingSettings,
+      hasPermission: true,
     },
     {
       label: "Usage",
-      route: "/usage",
-      hasPermission: !hideBillingSettings && !hideUsageSettings,
+      route: "/billing/usage",
+      hasPermission: !isEnterprise,
     },
-  ];
+  ]);
 </script>
 
 <ContentContainer title="Organization settings" maxWidth={1100}>
@@ -42,7 +56,7 @@
       minWidth="180px"
     />
     <div class="flex flex-col gap-y-6 w-full">
-      <slot />
+      {@render children()}
     </div>
   </div>
 </ContentContainer>
diff --git a/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte b/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
index 595b023f850..fb148a77af2 100644
--- a/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/billing/+page.svelte
@@ -2,23 +2,46 @@
   import {
     createAdminServiceGetBillingSubscription,
     createAdminServiceListOrganizationBillingIssues,
+    V1BillingPlanType,
   } from "@rilldata/web-admin/client";
   import { mergedQueryStatus } from "@rilldata/web-admin/client/utils";
   import BillingContactSetting from "@rilldata/web-admin/features/billing/contact/BillingContactSetting.svelte";
   import Payment from "@rilldata/web-admin/features/billing/Payment.svelte";
   import Plan from "@rilldata/web-admin/features/billing/plans/Plan.svelte";
+  import {
+    isEnterprisePlan,
+    isManagedPlan,
+  } from "@rilldata/web-admin/features/billing/plans/utils";
   import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
   import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
   import type { PageData } from "./$types";
 
-  export let data: PageData;
-
-  $: ({ organization, showUpgradeDialog } = data);
+  let { data }: { data: PageData } = $props();
 
-  $: allStatus = mergedQueryStatus([
+  let organization = $derived(data.organization);
+  let showUpgradeDialog = $derived(data.showUpgradeDialog);
+  let subscriptionQuery = $derived(
     createAdminServiceGetBillingSubscription(organization),
-    createAdminServiceListOrganizationBillingIssues(organization),
-  ]);
+  );
+  let planType = $derived(
+    $subscriptionQuery?.data?.subscription?.plan?.planType,
+  );
+  let planName = $derived(
+    $subscriptionQuery?.data?.subscription?.plan?.name ?? "",
+  );
+  let isEnterprise = $derived(
+    planType === V1BillingPlanType.BILLING_PLAN_TYPE_ENTERPRISE ||
+      planType === V1BillingPlanType.BILLING_PLAN_TYPE_MANAGED ||
+      isManagedPlan(planName) ||
+      isEnterprisePlan(planName),
+  );
+
+  let allStatus = $derived(
+    mergedQueryStatus([
+      subscriptionQuery,
+      createAdminServiceListOrganizationBillingIssues(organization),
+    ]),
+  );
 </script>
 
 <!-- Both the queries are used in both Plan and Payment.
@@ -26,7 +49,11 @@
 {#if $allStatus.isLoading}
   <Spinner status={EntityStatus.Running} size="16px" />
 {:else}
-  <Plan {organization} {showUpgradeDialog} />
-  <Payment {organization} />
-  <BillingContactSetting {organization} />
+  <div class="flex flex-col gap-8">
+    <Plan {organization} {showUpgradeDialog} />
+    {#if !isEnterprise}
+      <Payment {organization} />
+    {/if}
+    <BillingContactSetting {organization} />
+  </div>
 {/if}
diff --git a/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte b/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte
new file mode 100644
index 00000000000..fad648d38ad
--- /dev/null
+++ b/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.svelte
@@ -0,0 +1,636 @@
+<script lang="ts">
+  import {
+    createAdminServiceListProjectsForOrganization,
+    createAdminServiceGetBillingSubscription,
+  } from "@rilldata/web-admin/client";
+  import {
+    fetchPaymentsPortalURL,
+    getBillingUpgradeUrl,
+    getOrganizationUsageMetrics,
+  } from "@rilldata/web-admin/features/billing/plans/selectors";
+  import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
+  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
+  import InfoCircle from "@rilldata/web-common/components/icons/InfoCircle.svelte";
+  import { page } from "$app/stores";
+  import type { PageData } from "./$types";
+
+  let { data }: { data: PageData } = $props();
+  let organization = $derived(data.organization);
+
+  // Current deployment data for pre-filling
+  let projectsQuery = $derived(
+    createAdminServiceListProjectsForOrganization(organization),
+  );
+  let projects = $derived($projectsQuery.data?.projects ?? []);
+
+  let currentProdSlots = $derived(
+    projects.reduce((sum, p) => sum + Number(p.prodSlots ?? 0), 0),
+  );
+  let currentDevSlots = $derived(
+    projects.reduce((sum, p) => sum + Number(p.devSlots ?? 0), 0),
+  );
+
+  let usageMetrics = $derived(getOrganizationUsageMetrics(organization));
+  let currentStorageBytes = $derived(
+    $usageMetrics?.data?.reduce((s, m) => s + m.size, 0) ?? 0,
+  );
+  let currentStorageGB = $derived(Math.ceil(currentStorageBytes / 1e9) || 1);
+
+  // Editable inputs
+  let prodUnits = $state(2);
+  let prodHoursPerDay = $state(24);
+  let devUnits = $state(0);
+  let devHoursPerDay = $state(24);
+  let storageGB = $state(1);
+
+  // Pre-fill from current deployment once data loads
+  let prefilled = $state(false);
+  $effect(() => {
+    if (!prefilled && !$projectsQuery.isLoading && projects.length > 0) {
+      prodUnits = Math.max(currentProdSlots, 2);
+      devUnits = currentDevSlots;
+      storageGB = Math.max(currentStorageGB, 1);
+      prefilled = true;
+    }
+  });
+
+  function resetToUsage() {
+    prodUnits = Math.max(currentProdSlots, 2);
+    prodHoursPerDay = 24;
+    devUnits = currentDevSlots;
+    devHoursPerDay = 24;
+    storageGB = Math.max(currentStorageGB, 1);
+  }
+
+  // Pricing constants
+  const RATE_PER_UNIT_HR = 0.15;
+  const STORAGE_RATE_PER_GB = 1;
+  const FREE_STORAGE_GB = 1;
+  const DAYS_PER_MONTH = 30;
+
+  // Cost calculations
+  let prodCost = $derived(
+    prodUnits * prodHoursPerDay * DAYS_PER_MONTH * RATE_PER_UNIT_HR,
+  );
+  let devCost = $derived(
+    devUnits * devHoursPerDay * DAYS_PER_MONTH * RATE_PER_UNIT_HR,
+  );
+  let billableStorageGB = $derived(Math.max(storageGB - FREE_STORAGE_GB, 0));
+  let storageCost = $derived(billableStorageGB * STORAGE_RATE_PER_GB);
+  let monthlyCost = $derived(prodCost + devCost + storageCost);
+  let dailyCost = $derived(monthlyCost / DAYS_PER_MONTH);
+
+  // TODO: Wire to billing API when available
+  let availableCredit = $derived(100);
+  let firstBill = $derived(Math.max(monthlyCost - availableCredit, 0));
+
+  // Billing plan
+  let subscriptionQuery = $derived(
+    createAdminServiceGetBillingSubscription(organization),
+  );
+  let planName = $derived(
+    $subscriptionQuery?.data?.subscription?.plan?.name ?? "",
+  );
+  let isPro = $derived(planName === "pro_plan");
+
+  function fmtUSD(n: number): string {
+    return n.toLocaleString(undefined, {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 2,
+    });
+  }
+
+  let isCurrentConfig = $derived(
+    prodUnits === Math.max(currentProdSlots, 2) &&
+      prodHoursPerDay === 24 &&
+      devUnits === currentDevSlots &&
+      devHoursPerDay === 24 &&
+      storageGB === Math.max(currentStorageGB, 1),
+  );
+
+  async function handleSubscribe() {
+    window.open(
+      await fetchPaymentsPortalURL(
+        organization,
+        getBillingUpgradeUrl($page, organization),
+        true,
+      ),
+      "_self",
+    );
+  }
+
+  function handleContactSales() {
+    window.Pylon("show");
+  }
+
+  function clampInput(
+    e: Event,
+    min: number,
+    max: number,
+    setter: (v: number) => void,
+  ) {
+    const el = e.target as HTMLInputElement;
+    const n = parseInt(el.value, 10);
+    if (isNaN(n) || n < min) setter(min);
+    else if (n > max) setter(max);
+    else setter(n);
+  }
+</script>
+
+<div class="estimate-page">
+  <!-- Back link + title -->
+  <a href="/{organization}/-/settings/billing" class="back-link">
+    <svg
+      class="w-3.5 h-3.5"
+      viewBox="0 0 14 14"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+    >
+      <path d="M9 2.5L4.5 7 9 11.5" />
+    </svg>
+    Billing
+  </a>
+  <h1 class="page-title">Estimate your cost</h1>
+
+  <div class="page-header">
+    <span class="prefill-note">Pre-filled from your current deployment</span>
+    <button class="reset-btn" onclick={resetToUsage} disabled={isCurrentConfig}>
+      <svg
+        class="w-3.5 h-3.5"
+        viewBox="0 0 14 14"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+      >
+        <path d="M1.5 2.5v3.5h3.5" />
+        <path d="M2.1 8.5a5 5 0 1 0 .9-4.5L1.5 6" />
+      </svg>
+      Reset to current configuration
+    </button>
+  </div>
+
+  <div class="estimate-grid">
+    <!-- LEFT: Input cards -->
+    <div class="input-column">
+      <!-- Compute card -->
+      <div class="input-panel">
+      <!-- Compute subsection -->
+      <div class="subsection-header">
+        <div class="subsection-title-group">
+          <span class="subsection-title">Compute</span>
+          <span class="subsection-sub">1 unit = 4 GiB RAM, 1 vCPU</span>
+        </div>
+        <span class="subsection-rate">$0.15/unit/hr</span>
+      </div>
+
+      <!-- Production units -->
+      <div class="input-row">
+        <div class="input-info">
+          <span class="input-label">Production</span>
+          <span class="input-desc">Minimum 2 units</span>
+        </div>
+        <div class="stepper">
+          <button
+            class="stepper-btn"
+            onclick={() => prodUnits--}
+            disabled={prodUnits <= 2}>−</button
+          >
+          <input
+            class="stepper-input"
+            type="number"
+            bind:value={prodUnits}
+            min="2"
+            onblur={(e) => clampInput(e, 2, 9999, (v) => (prodUnits = v))}
+          />
+          <button class="stepper-btn" onclick={() => prodUnits++}>+</button>
+        </div>
+      </div>
+
+      <!-- Production active hours -->
+      <div class="input-row input-row-sub">
+        <div class="input-info">
+          <span class="input-label-sub inline-flex items-center gap-1">
+            Active hours per day
+            <Tooltip location="right" alignment="middle" distance={8}>
+              <span class="text-fg-muted flex">
+                <InfoCircle size="13px" />
+              </span>
+              <TooltipContent maxWidth="240px" slot="tooltip-content">
+                Deployments hibernate when inactive, so you're only billed for
+                active hours.
+              </TooltipContent>
+            </Tooltip>
+          </span>
+        </div>
+        <div class="stepper">
+          <button
+            class="stepper-btn"
+            onclick={() => prodHoursPerDay--}
+            disabled={prodHoursPerDay <= 1}>−</button
+          >
+          <input
+            class="stepper-input"
+            type="number"
+            bind:value={prodHoursPerDay}
+            min="1"
+            max="24"
+            onblur={(e) => clampInput(e, 1, 24, (v) => (prodHoursPerDay = v))}
+          />
+          <button
+            class="stepper-btn"
+            onclick={() => prodHoursPerDay++}
+            disabled={prodHoursPerDay >= 24}>+</button
+          >
+        </div>
+      </div>
+
+      <div class="input-divider"></div>
+
+      <!-- Development units -->
+      <div class="input-row">
+        <div class="input-info">
+          <span class="input-label">Development</span>
+        </div>
+        <div class="stepper">
+          <button
+            class="stepper-btn"
+            onclick={() => devUnits--}
+            disabled={devUnits <= 0}>−</button
+          >
+          <input
+            class="stepper-input"
+            type="number"
+            bind:value={devUnits}
+            min="0"
+            onblur={(e) => clampInput(e, 0, 9999, (v) => (devUnits = v))}
+          />
+          <button class="stepper-btn" onclick={() => devUnits++}>+</button>
+        </div>
+      </div>
+
+      <!-- Development active hours -->
+      <div class="input-row input-row-sub">
+        <div class="input-info">
+          <span class="input-label-sub inline-flex items-center gap-1">
+            Active hours per day
+            <Tooltip location="right" alignment="middle" distance={8}>
+              <span class="text-fg-muted flex">
+                <InfoCircle size="13px" />
+              </span>
+              <TooltipContent maxWidth="240px" slot="tooltip-content">
+                Deployments hibernate when inactive, so you're only billed for
+                active hours.
+              </TooltipContent>
+            </Tooltip>
+          </span>
+        </div>
+        <div class="stepper">
+          <button
+            class="stepper-btn"
+            onclick={() => devHoursPerDay--}
+            disabled={devHoursPerDay <= 1}>−</button
+          >
+          <input
+            class="stepper-input"
+            type="number"
+            bind:value={devHoursPerDay}
+            min="1"
+            max="24"
+            onblur={(e) => clampInput(e, 1, 24, (v) => (devHoursPerDay = v))}
+          />
+          <button
+            class="stepper-btn"
+            onclick={() => devHoursPerDay++}
+            disabled={devHoursPerDay >= 24}>+</button
+          >
+        </div>
+      </div>
+
+      </div>
+
+      <!-- Storage card -->
+      <div class="input-panel">
+        <div class="subsection-header">
+          <span class="subsection-title">Storage</span>
+          <span class="subsection-rate">$1/GB/mo above 1 GB free</span>
+        </div>
+
+        <div class="input-row">
+          <div class="input-info">
+            <span class="input-label">Storage (GB)</span>
+          </div>
+          <div class="stepper">
+            <button
+              class="stepper-btn"
+              onclick={() => storageGB--}
+              disabled={storageGB <= 1}>−</button
+            >
+            <input
+              class="stepper-input"
+              type="number"
+              bind:value={storageGB}
+              min="1"
+              onblur={(e) => clampInput(e, 1, 9999, (v) => (storageGB = v))}
+            />
+            <button class="stepper-btn" onclick={() => storageGB++}>+</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- RIGHT: Cost summary -->
+    <div class="cost-panel">
+      <h2 class="cost-title">Estimated monthly cost</h2>
+      <span class="cost-total">{fmtUSD(monthlyCost)}</span>
+      <span class="cost-daily">~{fmtUSD(dailyCost)}/day</span>
+
+      <div class="cost-divider"></div>
+
+      <!-- Production breakdown -->
+      <div class="cost-row">
+        <div class="cost-row-info">
+          <span class="cost-row-label">Production</span>
+          <span class="cost-row-desc">
+            {prodUnits} units × {prodHoursPerDay} hrs/day × {DAYS_PER_MONTH} days
+            × ${RATE_PER_UNIT_HR.toFixed(2)}/unit/hr
+          </span>
+        </div>
+        <span class="cost-row-amount">{fmtUSD(prodCost)}</span>
+      </div>
+
+      <!-- Development breakdown -->
+      <div class="cost-row">
+        <div class="cost-row-info">
+          <span class="cost-row-label">Development</span>
+          <span class="cost-row-desc">
+            {devUnits} units × {devHoursPerDay} hrs/day × {DAYS_PER_MONTH} days ×
+            ${RATE_PER_UNIT_HR.toFixed(2)}/unit/hr
+          </span>
+        </div>
+        <span class="cost-row-amount">{fmtUSD(devCost)}</span>
+      </div>
+
+      <!-- Storage breakdown (hidden when no billable storage) -->
+      {#if billableStorageGB > 0}
+        <div class="cost-row">
+          <div class="cost-row-info">
+            <span class="cost-row-label">Storage (GB)</span>
+            <span class="cost-row-desc">
+              {billableStorageGB} billable GB × ${STORAGE_RATE_PER_GB}/GB/mo
+            </span>
+          </div>
+          <span class="cost-row-amount">{fmtUSD(storageCost)}</span>
+        </div>
+      {/if}
+
+      <div class="cost-divider"></div>
+
+      <!-- Monthly total -->
+      <div class="cost-row">
+        <span class="cost-row-label font-semibold">Monthly cost</span>
+        <span class="cost-row-amount font-semibold">{fmtUSD(monthlyCost)}</span>
+      </div>
+
+      <!-- Available credit (trial/team plans only) -->
+      {#if !isPro && availableCredit > 0}
+        <div class="cost-row">
+          <div class="cost-row-info">
+            <span class="credit-label">Available credit</span>
+            <span class="cost-row-desc">Applied to your first bill</span>
+          </div>
+          <span class="credit-amount">-{fmtUSD(availableCredit)}</span>
+        </div>
+
+        <div class="first-bill">
+          <span class="first-bill-label">Estimated first bill</span>
+          <span class="first-bill-amount">{fmtUSD(firstBill)}</span>
+        </div>
+
+        <span class="recurring-note">
+          Then {fmtUSD(monthlyCost)}/mo at this configuration
+        </span>
+      {/if}
+
+      <!-- Actions -->
+      {#if !isPro}
+        <button class="subscribe-btn" onclick={handleSubscribe}>
+          Subscribe to Pro
+        </button>
+      {/if}
+
+      <button class="contact-link" onclick={handleContactSales}>
+        Contact sales for volume discounts
+      </button>
+    </div>
+  </div>
+</div>
+
+<style lang="postcss">
+  .estimate-page {
+    @apply flex flex-col w-full max-w-5xl;
+  }
+
+  .back-link {
+    @apply flex items-center gap-1 text-sm text-fg-secondary no-underline mb-1;
+  }
+  .back-link:hover {
+    @apply text-fg-primary;
+  }
+
+  .page-title {
+    @apply text-2xl font-semibold text-fg-primary mb-2;
+  }
+
+  .page-header {
+    @apply flex items-center justify-between mb-6;
+  }
+
+  .prefill-note {
+    @apply text-sm text-fg-tertiary;
+  }
+
+  .reset-btn {
+    @apply flex items-center gap-1.5 text-sm font-medium text-primary-500 bg-transparent border-none cursor-pointer p-0;
+  }
+  .reset-btn:hover:not(:disabled) {
+    @apply text-primary-600;
+  }
+  .reset-btn:disabled {
+    @apply text-fg-disabled cursor-default;
+  }
+
+  .estimate-grid {
+    @apply grid gap-6;
+    grid-template-columns: 1fr 1fr;
+    align-items: start;
+  }
+
+  /* Left column */
+  .input-column {
+    @apply flex flex-col gap-4;
+  }
+
+  .input-panel {
+    @apply border border-border rounded-xl bg-white p-6 flex flex-col;
+  }
+
+  .subsection-header {
+    @apply flex items-center justify-between mb-1;
+  }
+
+  .subsection-title-group {
+    @apply flex items-baseline gap-2;
+  }
+
+  .subsection-title {
+    @apply text-sm font-semibold text-fg-primary;
+  }
+
+  .subsection-sub {
+    @apply text-xs text-fg-tertiary;
+  }
+
+  .subsection-rate {
+    @apply text-xs text-fg-tertiary;
+  }
+
+  .input-row {
+    @apply flex items-center justify-between py-4;
+  }
+
+  .input-info {
+    @apply flex flex-col gap-0.5;
+  }
+
+  .input-label {
+    @apply text-sm font-semibold text-fg-primary;
+  }
+
+  .input-desc {
+    @apply text-xs text-fg-tertiary;
+  }
+
+  .input-divider {
+    @apply border-t border-border;
+  }
+
+  .input-row-sub {
+    @apply py-2;
+  }
+
+  .input-label-sub {
+    @apply text-xs text-fg-secondary;
+  }
+
+  /* Stepper */
+  .stepper {
+    @apply flex items-center border border-border rounded-md overflow-hidden shrink-0;
+  }
+
+  .stepper-btn {
+    @apply w-8 h-8 flex items-center justify-center text-fg-secondary bg-transparent border-none cursor-pointer text-base;
+  }
+  .stepper-btn:hover:not(:disabled) {
+    @apply bg-surface-subtle;
+  }
+  .stepper-btn:disabled {
+    @apply text-fg-disabled cursor-default;
+  }
+
+  .stepper-input {
+    @apply w-10 h-8 text-sm font-medium text-fg-primary border-x border-border tabular-nums text-center bg-transparent outline-none;
+    -moz-appearance: textfield;
+  }
+  .stepper-input::-webkit-outer-spin-button,
+  .stepper-input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Right panel */
+  .cost-panel {
+    @apply border border-border rounded-xl bg-white p-6 flex flex-col;
+  }
+
+  .cost-title {
+    @apply text-sm font-semibold text-fg-primary mb-1;
+  }
+
+  .cost-total {
+    @apply text-4xl font-bold text-fg-primary tabular-nums tracking-tight;
+  }
+
+  .cost-daily {
+    @apply text-sm text-fg-tertiary mt-1 mb-4;
+  }
+
+  .cost-divider {
+    @apply border-t border-border my-3;
+  }
+
+  .cost-row {
+    @apply flex items-start justify-between py-2;
+  }
+
+  .cost-row-info {
+    @apply flex flex-col gap-0.5;
+  }
+
+  .cost-row-label {
+    @apply text-sm text-fg-primary;
+  }
+
+  .cost-row-desc {
+    @apply text-xs text-fg-tertiary;
+  }
+
+  .cost-row-amount {
+    @apply text-sm text-fg-primary tabular-nums text-right;
+  }
+
+  .credit-label {
+    @apply text-sm font-medium;
+    color: #16a34a;
+  }
+
+  .credit-amount {
+    @apply text-sm font-medium tabular-nums text-right;
+    color: #16a34a;
+  }
+
+  .first-bill {
+    @apply flex items-center justify-between rounded-lg px-4 py-3 mt-2;
+    background: var(--rill-colors-theme-primary-50, #ecf0ff);
+  }
+
+  .first-bill-label {
+    @apply text-sm font-medium;
+    color: #6366f1;
+  }
+
+  .first-bill-amount {
+    @apply text-xl font-bold tabular-nums;
+    color: #6366f1;
+  }
+
+  .recurring-note {
+    @apply text-xs text-fg-tertiary mt-2;
+  }
+
+  .subscribe-btn {
+    @apply w-full py-2.5 px-4 text-sm font-medium text-white rounded-none cursor-pointer mt-6 border-none;
+    background: #6366f1;
+  }
+  .subscribe-btn:hover {
+    background: #4f46e5;
+  }
+
+  .contact-link {
+    @apply text-sm text-primary-500 bg-transparent border-none cursor-pointer mt-3 p-0;
+  }
+  .contact-link:hover {
+    @apply text-primary-600 underline;
+  }
+</style>
diff --git a/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.ts b/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.ts
new file mode 100644
index 00000000000..505956c4186
--- /dev/null
+++ b/web-admin/src/routes/[organization]/-/settings/billing/estimate/+page.ts
@@ -0,0 +1,5 @@
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({ params: { organization } }) => {
+  return { organization };
+};
diff --git a/web-admin/src/routes/[organization]/-/settings/billing/usage/+page.svelte b/web-admin/src/routes/[organization]/-/settings/billing/usage/+page.svelte
new file mode 100644
index 00000000000..c51e5dd5347
--- /dev/null
+++ b/web-admin/src/routes/[organization]/-/settings/billing/usage/+page.svelte
@@ -0,0 +1,23 @@
+<section class="usage-page">
+  <h1 class="text-xl font-semibold text-fg-primary mb-2">Usage</h1>
+  <p class="text-sm text-fg-secondary mb-6">
+    View slot usage, storage consumption, and billing details for your
+    organization.
+  </p>
+
+  <div class="coming-soon-card">
+    <p class="text-fg-tertiary text-sm">
+      Detailed usage metrics are coming soon.
+    </p>
+  </div>
+</section>
+
+<style lang="postcss">
+  .usage-page {
+    @apply max-w-4xl;
+  }
+
+  .coming-soon-card {
+    @apply flex items-center justify-center border border-dashed rounded-xl p-12 bg-surface-background;
+  }
+</style>
diff --git a/web-admin/src/routes/[organization]/-/settings/usage/+page.svelte b/web-admin/src/routes/[organization]/-/settings/usage/+page.svelte
deleted file mode 100644
index 2881c459d6f..00000000000
--- a/web-admin/src/routes/[organization]/-/settings/usage/+page.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-  import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
-  import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
-  import type { PageData } from "./$types";
-
-  export let data: PageData;
-
-  let iframeLoading = true;
-
-  // credentialless is not standard and throws lint error, but it works on chrome and safari for now.
-  const iframeProps = {
-    credentialless: true,
-  };
-</script>
-
-{#if iframeLoading}
-  <Spinner status={EntityStatus.Running} size="16px" />
-{/if}
-
-<iframe
-  {...iframeProps}
-  src={data.billingPortalUrl}
-  title="Orb Billing Portal"
-  class="w-full h-[1000px]"
-  onload={() => (iframeLoading = false)}
-></iframe>
-
-<style lang="postcss">
-</style>
diff --git a/web-admin/src/routes/[organization]/-/settings/usage/+page.ts b/web-admin/src/routes/[organization]/-/settings/usage/+page.ts
deleted file mode 100644
index 92aedd23461..00000000000
--- a/web-admin/src/routes/[organization]/-/settings/usage/+page.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { isEnterprisePlan } from "@rilldata/web-admin/features/billing/plans/utils";
-import { error, redirect } from "@sveltejs/kit";
-import type { PageLoad } from "./$types";
-
-export const load: PageLoad = async ({ params: { organization }, parent }) => {
-  const { subscription, billingPortalUrl } = await parent();
-
-  if (!billingPortalUrl) {
-    throw redirect(307, `/${organization}/-/settings`);
-  }
-
-  // Orgs on an Enterprise Plan should not see this page
-  if (subscription?.plan && isEnterprisePlan(subscription.plan.name)) {
-    throw error(404, "Page not found");
-  }
-};