diff --git a/.aspire/settings.json b/.aspire/settings.json
index 68a4733ba2..52800c54eb 100644
--- a/.aspire/settings.json
+++ b/.aspire/settings.json
@@ -1,3 +1,3 @@
 {
   "appHostPath": "../src/Exceptionless.AppHost/Exceptionless.AppHost.csproj"
-}
\ No newline at end of file
+}
diff --git a/.github/hooks/follow-up.json b/.github/hooks/follow-up.json
new file mode 100644
index 0000000000..e421098bef
--- /dev/null
+++ b/.github/hooks/follow-up.json
@@ -0,0 +1,11 @@
+{
+  "hooks": {
+    "Stop": [
+      {
+        "type": "command",
+        "command": "python3 -c \"\nimport json, sys\ndata = json.load(sys.stdin)\nif data.get('stop_hook_active', False):\n    json.dump({'hookSpecificOutput': {'hookEventName': 'Stop'}}, sys.stdout)\nelse:\n    json.dump({\n        'hookSpecificOutput': {\n            'hookEventName': 'Stop',\n            'decision': 'block',\n            'reason': 'Before stopping: 1) Summarize what was completed and what was not. 2) Ask the user if they have any follow-up questions, concerns, or additional changes. 3) If there are pending items from the original request that were not addressed, list them explicitly. Do NOT stop silently.'\n        }\n    }, sys.stdout)\n\"",
+        "timeout": 5
+      }
+    ]
+  }
+}
diff --git a/.vscode/launch.json b/.vscode/launch.json
index 90a926b9f8..501508a7c1 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -5,7 +5,7 @@
             "type": "aspire",
             "request": "launch",
             "name": "Aspire",
-            "program": "${workspaceFolder}/src/Exceptionless.AppHost/Exceptionless.AppHost.csproj"
+            "program": ""
         },
         {
             "name": "Web",
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 2353435158..dcd5362e1d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -111,7 +111,7 @@
     "tailwindCSS.includeLanguages": {
         "svelte": "html"
     },
-    "js/ts.tsdk.path": "src/Exceptionless.Web/ClientApp/node_modules/typescript/lib",
+    "typescript.tsdk": "src/Exceptionless.Web/ClientApp/node_modules/typescript/lib",
     "workbench.editor.customLabels.patterns": {
         "**/lib/**/*.ts": "${dirname}/${filename}.${extname}",
         "**/routes/**/+page.svelte": "${dirname(1)}/${dirname}",
diff --git a/docs/billing-stripe-integration.md b/docs/billing-stripe-integration.md
new file mode 100644
index 0000000000..d784d66a65
--- /dev/null
+++ b/docs/billing-stripe-integration.md
@@ -0,0 +1,201 @@
+# Billing & Stripe Integration
+
+## Overview
+
+Exceptionless uses [Stripe](https://stripe.com) for subscription billing. The integration spans:
+
+- **Backend**: ASP.NET Core controller (`OrganizationController`) + Stripe.net SDK v51
+- **Frontend**: Svelte 5 dialog (`ChangePlanDialog`) + Stripe.js v9 PaymentElement
+- **Legacy**: Angular app supports `tok_` tokens via `createToken()` (backwards compatible)
+
+## Architecture
+
+```text
+┌─────────────────┐     ┌──────────────────┐     ┌─────────┐
+│  Svelte Dialog   │────>│  /change-plan    │────>│ Stripe  │
+│  (PaymentElement)│     │  Controller      │     │   API   │
+│  pm_ tokens      │     │  (Stripe.net 51) │     │         │
+├─────────────────┤     │                  │     │         │
+│  Angular Dialog  │────>│  Detects pm_ vs  │────>│         │
+│  (createToken)   │     │  tok_ prefix     │     │         │
+│  tok_ tokens     │     └──────────────────┘     └─────────┘
+└─────────────────┘
+```
+
+## Configuration
+
+### Environment Variables
+
+| Variable | Where | Purpose |
+| --- | --- | --- |
+| `StripeApiKey` | Server (`AppOptions.StripeOptions`) | Secret API key for server-side Stripe calls |
+| `PUBLIC_STRIPE_PUBLISHABLE_KEY` | Svelte (`ClientApp/.env.local`) | Publishable key for Stripe.js |
+| `STRIPE_PUBLISHABLE_KEY` | Angular (`app.config.js`) | Publishable key for legacy UI |
+
+The server-side key is injected via environment variables or `appsettings.Local.yml` (gitignored).
+
+### Enabling Billing
+
+Billing is enabled when `StripeApiKey` is configured. The frontend checks `isStripeEnabled()` (reads `PUBLIC_STRIPE_PUBLISHABLE_KEY`). If not set, the dialog shows "Billing is currently disabled."
+
+## API Endpoints
+
+### `GET /api/v2/organizations/{id}/plans`
+
+Returns available billing plans for the organization. The current org's plan entry is replaced with runtime billing values (custom pricing, limits).
+
+**Auth**: `UserPolicy`  
+**Response**: `BillingPlan[]`
+
+### `POST /api/v2/organizations/{id}/change-plan`
+
+Changes the organization's billing plan.
+
+**Auth**: `UserPolicy` + `CanAccessOrganization(id)`  
+**Parameters** (query string):
+
+| Param | Type | Description |
+| --- | --- | --- |
+| `planId` | string | Target plan ID (e.g., `EX_MEDIUM`, `EX_LARGE_YEARLY`) |
+| `stripeToken` | string? | `pm_` PaymentMethod ID (Svelte) or `tok_` token (Angular) |
+| `last4` | string? | Last 4 digits of card (display only) |
+| `couponId` | string? | Stripe coupon code |
+
+**Response**: `ChangePlanResult { success, message }`
+
+**Behavior**:
+
+1. If no `StripeCustomerId` → creates Stripe customer + subscription
+2. If existing customer → updates customer + subscription
+3. `pm_` tokens use `PaymentMethod` API; `tok_` tokens use legacy `Source` API
+4. Coupons applied via `SubscriptionDiscountOptions` (Stripe.net 50.x+)
+
+### `GET /api/v2/organizations/invoice/{id}`
+
+Returns a single invoice with line items.
+
+**Auth**: `UserPolicy` + `CanAccessOrganization`  
+**Response**: `Invoice { id, organization_id, organization_name, date, paid, total, items[] }`
+
+### `GET /api/v2/organizations/{id}/invoices`
+
+Returns paginated invoice grid for the organization.
+
+**Auth**: `UserPolicy`  
+**Response**: `InvoiceGridModel[]`
+
+## Plan Structure
+
+Plans follow a tiered naming convention:
+
+| Tier | Monthly ID | Yearly ID |
+| --- | --- | --- |
+| Free | `EX_FREE` | — |
+| Small | `EX_SMALL` | `EX_SMALL_YEARLY` |
+| Medium | `EX_MEDIUM` | `EX_MEDIUM_YEARLY` |
+| Large | `EX_LARGE` | `EX_LARGE_YEARLY` |
+| Extra Large | `EX_XL` | `EX_XL_YEARLY` |
+| Enterprise | `EX_ENT` | `EX_ENT_YEARLY` |
+
+The frontend groups monthly/yearly variants into "tiers" for the UI. The `_YEARLY` suffix determines the billing interval.
+
+## Frontend Components
+
+### `ChangePlanDialog`
+
+Main billing dialog at `src/lib/features/billing/components/change-plan-dialog.svelte`.
+
+**Props**:
+
+- `open: boolean` — bindable dialog visibility
+- `organization: ViewOrganization` — current org data
+- `initialCouponCode?: string` — pre-fill coupon
+- `initialCouponOpen?: boolean` — open coupon input on mount
+- `initialFormError?: string` — show error message on mount
+
+**Features**:
+
+- Tile-based plan selection with Monthly/Yearly tabs
+- "Save X%" badge computed from tier pricing differences
+- "MOST POPULAR" badge on XL tier (only for upgrades)
+- Stripe PaymentElement for new payment methods
+- "Keep current card" / "Use a different payment method" toggle
+- Coupon input with apply/remove
+- Footer summary showing plan change, payment, and coupon details
+- Destructive (red) CTA for downgrades, default (green) for upgrades
+- Disabled CTA when no changes
+- Form validation via TanStack Form + Zod (`ChangePlanSchema`)
+- Error reporting via Exceptionless client
+
+### `StripeProvider`
+
+Imperative Stripe.js loader at `src/lib/features/billing/components/stripe-provider.svelte`.
+
+Uses direct DOM manipulation instead of svelte-stripe's `<Elements>` / `<PaymentElement>` due to a Svelte 5 reactivity issue where `$state` set from async callbacks doesn't reliably trigger template re-renders.
+
+### `UpgradeRequiredDialog`
+
+Handles 426 responses with "Upgrade Plan" / "Cancel" buttons. Mounted in the app layout.
+
+### `handleUpgradeRequired(error, organizationId)`
+
+Utility used across 6 route pages to intercept `ProblemDetails` with `status: 426` and open the upgrade dialog.
+
+## Stripe SDK Migration Notes (v47 → v51)
+
+### Breaking Changes Handled
+
+1. **`Invoice.Paid` removed** → Use `String.Equals(invoice.Status, "paid", StringComparison.Ordinal)`
+2. **`Invoice.Discount` removed** → Use `Invoice.Discounts?.FirstOrDefault(d => d.Deleted is not true)?.Source?.Coupon`
+3. **`line.Plan` removed** → Use `line.Pricing?.PriceDetails?.PriceId` + `PriceService.GetAsync()`
+4. **`CustomerCreateOptions.Plan` deprecated** → Create subscription separately
+5. **`CustomerCreateOptions.Coupon` removed** → Use `SubscriptionDiscountOptions`
+6. **`SubscriptionItemOptions.Plan` removed** → Use `SubscriptionItemOptions.Price`
+7. **`CustomerCreateOptions.Source` deprecated for pm_ tokens** → Use `CustomerCreateOptions.PaymentMethod`
+
+### Backwards Compatibility
+
+The `tok_` token path (Angular legacy UI) is preserved. The controller detects `pm_` vs `tok_` prefix and routes to the appropriate Stripe API:
+
+```csharp
+bool isPaymentMethod = stripeToken?.StartsWith("pm_", StringComparison.Ordinal) == true;
+```
+
+## Known Limitations
+
+1. **Coupon not applied for existing customers changing plans** — Pre-existing limitation (not a regression). The coupon is only applied when creating a new Stripe customer.
+2. **Potential orphaned Stripe customers** — If subscription creation fails after customer creation, a retry would create a duplicate Stripe customer. Mitigated by the low likelihood of this failure path.
+3. **N+1 price fetches in invoice view** — Each unique price ID in an invoice makes a separate Stripe API call. Mitigated by a per-request cache (`priceCache`). Most invoices have 1-3 distinct prices.
+4. **svelte-stripe package unused** — Listed in `package.json` but bypassed due to Svelte 5 incompatibility. Only `@stripe/stripe-js` is used directly.
+
+## Storybook
+
+15 stories cover all dialog states:
+
+| Story | Description |
+| --- | --- |
+| Error loading plans | Plans query failed |
+| Default | Free plan org, Small pre-selected |
+| Change plan | Small → Medium upgrade |
+| Interval switch | Monthly → Yearly toggle |
+| Update card only | Change payment method without plan change |
+| Apply coupon only | Apply coupon without plan change |
+| Plan + card + coupon | All three changes |
+| First-time paid | Free → first paid plan |
+| Downgrade to Free | Cancel paid plan |
+| Coupon input open | Coupon text field visible |
+| Coupon applied | Coupon alert shown |
+| Error: invalid coupon | Bad coupon with form error |
+| Error: payment failed | Payment declined error |
+| Error: downgrade blocked | Downgrade blocked by limits |
+| Error: plan change failed | Generic plan change error |
+
+Run stories: `cd src/Exceptionless.Web/ClientApp && npm run storybook`
+
+## Security Considerations
+
+- **Server-side Stripe API key** is never exposed to the client. Only the publishable key is used in the frontend.
+- **All billing endpoints require `UserPolicy` auth** and `CanAccessOrganization` access checks.
+- **Token/PaymentMethod IDs are validated by Stripe** server-side — no additional format validation needed.
+- **Coupon codes are validated by Stripe** — no injection risk.
+- **No PII in logs** — only invoice IDs, price IDs, and plan IDs are logged.
diff --git a/src/Exceptionless.Core/Exceptionless.Core.csproj b/src/Exceptionless.Core/Exceptionless.Core.csproj
index d24e70e376..844453e467 100644
--- a/src/Exceptionless.Core/Exceptionless.Core.csproj
+++ b/src/Exceptionless.Core/Exceptionless.Core.csproj
@@ -31,7 +31,7 @@
     <PackageReference Include="Microsoft.Extensions.Configuration.Binder" Version="10.0.6" />
     <PackageReference Include="Microsoft.Extensions.Diagnostics.HealthChecks" Version="10.0.6" />
     <PackageReference Include="Microsoft.Extensions.Logging" Version="10.0.6" />
-    <PackageReference Include="Stripe.net" Version="47.4.0" />
+    <PackageReference Include="Stripe.net" Version="51.0.0" />
     <PackageReference Include="System.DirectoryServices" Version="10.0.6" />
     <PackageReference Include="UAParser" Version="3.1.47" />
     <PackageReference Include="Foundatio.Repositories.Elasticsearch" Version="7.18.0-beta6.1"
@@ -40,4 +40,4 @@
       Include="..\..\..\..\Foundatio\Foundatio.Repositories\src\Foundatio.Repositories.Elasticsearch\Foundatio.Repositories.Elasticsearch.csproj"
       Condition="'$(ReferenceFoundatioRepositoriesSource)' == 'true'" />
   </ItemGroup>
-</Project>
\ No newline at end of file
+</Project>
diff --git a/src/Exceptionless.Job/Exceptionless.Job.csproj b/src/Exceptionless.Job/Exceptionless.Job.csproj
index 138c2310da..59db7eafc8 100644
--- a/src/Exceptionless.Job/Exceptionless.Job.csproj
+++ b/src/Exceptionless.Job/Exceptionless.Job.csproj
@@ -32,4 +32,4 @@
   <ItemGroup>
     <Compile Include="..\Exceptionless.Web\ApmExtensions.cs" Link="ApmExtensions.cs" />
   </ItemGroup>
-</Project>
+</Project>
\ No newline at end of file
diff --git a/src/Exceptionless.Web/ClientApp.angular/components/organization/organization-service.js b/src/Exceptionless.Web/ClientApp.angular/components/organization/organization-service.js
index cb5f7561c0..ab0ba22699 100644
--- a/src/Exceptionless.Web/ClientApp.angular/components/organization/organization-service.js
+++ b/src/Exceptionless.Web/ClientApp.angular/components/organization/organization-service.js
@@ -30,7 +30,13 @@
             }
 
             function changePlan(id, options) {
-                return Restangular.one("organizations", id).customPOST(null, "change-plan", options);
+                const body = {
+                    plan_id: options.planId,
+                    stripe_token: options.stripeToken,
+                    last4: options.last4,
+                    coupon_id: options.couponId
+                };
+                return Restangular.one("organizations", id).customPOST(body, "change-plan");
             }
 
             function getOldestCreationDate(organizations) {
diff --git a/src/Exceptionless.Web/ClientApp/.storybook/mocks/env.js b/src/Exceptionless.Web/ClientApp/.storybook/mocks/env.js
index e3843c5d9a..f5a391f3ea 100644
--- a/src/Exceptionless.Web/ClientApp/.storybook/mocks/env.js
+++ b/src/Exceptionless.Web/ClientApp/.storybook/mocks/env.js
@@ -1,5 +1,8 @@
 // Mock for $env/dynamic/public in Storybook
 export const env = {
     // Filter to only include PUBLIC_ prefixed environment variables
-    ...Object.fromEntries(Object.entries(import.meta.env).filter(([key]) => key.startsWith('PUBLIC_')))
+    ...Object.fromEntries(Object.entries(import.meta.env).filter(([key]) => key.startsWith('PUBLIC_'))),
+    // Provide a Stripe publishable key so isStripeEnabled() returns true in
+    // billing stories. The StripeProvider will fail to init (expected).
+    PUBLIC_STRIPE_PUBLISHABLE_KEY: import.meta.env.PUBLIC_STRIPE_PUBLISHABLE_KEY || 'pk_test_storybook_placeholder'
 };
diff --git a/src/Exceptionless.Web/ClientApp/package-lock.json b/src/Exceptionless.Web/ClientApp/package-lock.json
index 009ca86816..4c158ee38b 100644
--- a/src/Exceptionless.Web/ClientApp/package-lock.json
+++ b/src/Exceptionless.Web/ClientApp/package-lock.json
@@ -12,6 +12,7 @@
                 "@exceptionless/fetchclient": "^0.44.0",
                 "@internationalized/date": "^3.12.1",
                 "@lucide/svelte": "^1.8.0",
+                "@stripe/stripe-js": "^9.2.0",
                 "@tanstack/svelte-form": "^1.29.0",
                 "@tanstack/svelte-query": "^6.1.16",
                 "@tanstack/svelte-query-devtools": "^6.1.16",
@@ -1994,6 +1995,15 @@
                 "node": ">=14.17"
             }
         },
+        "node_modules/@stripe/stripe-js": {
+            "version": "9.2.0",
+            "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-9.2.0.tgz",
+            "integrity": "sha512-YSzLC0t6VS9MDdPTynSMqU8IxrItFUjkDORALFT6sSMR/XZ5Vgm3RDp/Gk7z727MC4A9s4MFVel0gF0c7+kdrg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12.16"
+            }
+        },
         "node_modules/@sveltejs/acorn-typescript": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.8.tgz",
diff --git a/src/Exceptionless.Web/ClientApp/package.json b/src/Exceptionless.Web/ClientApp/package.json
index 74ea8a3618..8cdfa3b1d4 100644
--- a/src/Exceptionless.Web/ClientApp/package.json
+++ b/src/Exceptionless.Web/ClientApp/package.json
@@ -72,6 +72,7 @@
         "@exceptionless/fetchclient": "^0.44.0",
         "@internationalized/date": "^3.12.1",
         "@lucide/svelte": "^1.8.0",
+        "@stripe/stripe-js": "^9.2.0",
         "@tanstack/svelte-form": "^1.29.0",
         "@tanstack/svelte-query": "^6.1.16",
         "@tanstack/svelte-query-devtools": "^6.1.16",
diff --git a/src/Exceptionless.Web/ClientApp/src/app.css b/src/Exceptionless.Web/ClientApp/src/app.css
index 8cd26aeb5c..ed44232e36 100644
--- a/src/Exceptionless.Web/ClientApp/src/app.css
+++ b/src/Exceptionless.Web/ClientApp/src/app.css
@@ -20,7 +20,7 @@
     --input: hsl(220 13% 91%);
 
     --primary: hsl(96 64% 46%);
-    --primary-foreground: hsl(0 0% 100%);
+    --primary-foreground: hsl(0 0% 10%);
 
     --secondary: hsl(210 20% 98%);
     --secondary-foreground: hsl(240 5.9% 10%);
@@ -69,7 +69,7 @@
     --input: hsl(215 12.24% 19.22%);
 
     --primary: hsl(96 64.1% 45.88%);
-    --primary-foreground: hsl(60 100% 96.27%);
+    --primary-foreground: hsl(0 0% 10%);
 
     --secondary: hsl(215 15.38% 15.29%);
     --secondary-foreground: hsl(0 0% 97.25%);
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/billing/components/change-plan-dialog-harness.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/components/change-plan-dialog-harness.svelte
new file mode 100644
index 0000000000..d3d42d9fa0
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/components/change-plan-dialog-harness.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+    import type { ViewOrganization } from '$features/organizations/models';
+    import type { BillingPlan } from '$lib/generated/api';
+
+    import { Button } from '$comp/ui/button';
+    import { accessToken } from '$features/auth/index.svelte';
+    import { queryKeys } from '$features/organizations/api.svelte';
+    import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
+    import { untrack } from 'svelte';
+
+    import ChangePlanDialog from './change-plan-dialog.svelte';
+
+    interface Props {
+        initialCouponCode?: string;
+        initialCouponOpen?: boolean;
+        initialFormError?: string;
+        organization: ViewOrganization;
+        plans: BillingPlan[];
+    }
+
+    let { initialCouponCode, initialCouponOpen, initialFormError, organization, plans }: Props = $props();
+
+    accessToken.current = 'storybook-mock-token';
+
+    const hasPlans = untrack(() => plans.length > 0);
+
+    const queryClient = new QueryClient({
+        defaultOptions: {
+            queries: {
+                enabled: hasPlans,
+                refetchOnMount: false,
+                refetchOnWindowFocus: false,
+                retry: false,
+                staleTime: Infinity
+            }
+        }
+    });
+
+    untrack(() => {
+        if (plans.length > 0) {
+            queryClient.setQueryData(queryKeys.plans(organization.id), plans);
+        }
+    });
+
+    let open = $state(true);
+
+    function handleClose() {
+        open = false;
+    }
+</script>
+
+<QueryClientProvider client={queryClient}>
+    <Button variant="outline" onclick={() => (open = true)}>Open dialog</Button>
+
+    {#if open}
+        <ChangePlanDialog onclose={handleClose} {organization} {initialCouponCode} {initialCouponOpen} {initialFormError} />
+    {/if}
+</QueryClientProvider>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/billing/components/change-plan-dialog.stories.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/components/change-plan-dialog.stories.ts
new file mode 100644
index 0000000000..50df70e260
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/components/change-plan-dialog.stories.ts
@@ -0,0 +1,466 @@
+import type { ViewOrganization } from '$features/organizations/models';
+import type { BillingPlan } from '$lib/generated/api';
+import type { Meta, StoryObj } from '@storybook/sveltekit';
+
+import Harness from './change-plan-dialog-harness.svelte';
+
+const MOCK_PLANS: BillingPlan[] = [
+    {
+        description: 'Free',
+        has_premium_features: false,
+        id: 'EX_FREE',
+        is_hidden: false,
+        max_events_per_month: 3000,
+        max_projects: 1,
+        max_users: 1,
+        name: 'Free',
+        price: 0,
+        retention_days: 3
+    },
+    {
+        description: 'Small ($15/month)',
+        has_premium_features: true,
+        id: 'EX_SMALL',
+        is_hidden: false,
+        max_events_per_month: 15000,
+        max_projects: 5,
+        max_users: 10,
+        name: 'Small',
+        price: 15,
+        retention_days: 30
+    },
+    {
+        description: 'Small Yearly ($165/year - Save $15)',
+        has_premium_features: true,
+        id: 'EX_SMALL_YEARLY',
+        is_hidden: false,
+        max_events_per_month: 15000,
+        max_projects: 5,
+        max_users: 10,
+        name: 'Small (Yearly)',
+        price: 165,
+        retention_days: 30
+    },
+    {
+        description: 'Medium ($49/month)',
+        has_premium_features: true,
+        id: 'EX_MEDIUM',
+        is_hidden: false,
+        max_events_per_month: 75000,
+        max_projects: 15,
+        max_users: 25,
+        name: 'Medium',
+        price: 49,
+        retention_days: 90
+    },
+    {
+        description: 'Medium Yearly ($539/year - Save $49)',
+        has_premium_features: true,
+        id: 'EX_MEDIUM_YEARLY',
+        is_hidden: false,
+        max_events_per_month: 75000,
+        max_projects: 15,
+        max_users: 25,
+        name: 'Medium (Yearly)',
+        price: 539,
+        retention_days: 90
+    },
+    {
+        description: 'Large ($99/month)',
+        has_premium_features: true,
+        id: 'EX_LARGE',
+        is_hidden: false,
+        max_events_per_month: 250000,
+        max_projects: -1,
+        max_users: -1,
+        name: 'Large',
+        price: 99,
+        retention_days: 180
+    },
+    {
+        description: 'Large Yearly ($1,089/year - Save $99)',
+        has_premium_features: true,
+        id: 'EX_LARGE_YEARLY',
+        is_hidden: false,
+        max_events_per_month: 250000,
+        max_projects: -1,
+        max_users: -1,
+        name: 'Large (Yearly)',
+        price: 1089,
+        retention_days: 180
+    },
+    {
+        description: 'Extra Large ($199/month)',
+        has_premium_features: true,
+        id: 'EX_XL',
+        is_hidden: false,
+        max_events_per_month: 1000000,
+        max_projects: -1,
+        max_users: -1,
+        name: 'Extra Large',
+        price: 199,
+        retention_days: 180
+    },
+    {
+        description: 'Extra Large Yearly ($2,189/year - Save $199)',
+        has_premium_features: true,
+        id: 'EX_XL_YEARLY',
+        is_hidden: false,
+        max_events_per_month: 1000000,
+        max_projects: -1,
+        max_users: -1,
+        name: 'Extra Large (Yearly)',
+        price: 2189,
+        retention_days: 180
+    },
+    {
+        description: 'Enterprise ($499/month)',
+        has_premium_features: true,
+        id: 'EX_ENT',
+        is_hidden: false,
+        max_events_per_month: 3000000,
+        max_projects: -1,
+        max_users: -1,
+        name: 'Enterprise',
+        price: 499,
+        retention_days: 180
+    },
+    {
+        description: 'Enterprise Yearly ($5,489/year - Save $499)',
+        has_premium_features: true,
+        id: 'EX_ENT_YEARLY',
+        is_hidden: false,
+        max_events_per_month: 3000000,
+        max_projects: -1,
+        max_users: -1,
+        name: 'Enterprise (Yearly)',
+        price: 5489,
+        retention_days: 180
+    }
+];
+
+/** Helper to build a ViewOrganization with sensible defaults. */
+function makeOrg(overrides: Partial<ViewOrganization> = {}): ViewOrganization {
+    return {
+        billing_change_date: null,
+        billing_changed_by_user_id: null,
+        billing_price: 0,
+        billing_status: 0 as never,
+        bonus_events_per_month: 0,
+        bonus_expiration: null,
+        card_last4: null,
+        created_utc: '2024-01-15T00:00:00Z',
+        data: null,
+        event_count: 427,
+        has_premium_features: false,
+        id: '507f1f77bcf86cd799439011',
+        invites: [],
+        is_over_monthly_limit: false,
+        is_over_request_limit: false,
+        is_suspended: false,
+        is_throttled: false,
+        max_events_per_month: 3000,
+        max_projects: 1,
+        max_users: 1,
+        name: 'Acme Corp',
+        plan_description: 'Free plan',
+        plan_id: 'EX_FREE',
+        plan_name: 'Free',
+        project_count: 1,
+        retention_days: 3,
+        stack_count: 12,
+        subscribe_date: null,
+        suspension_code: null,
+        suspension_date: null,
+        suspension_notes: null,
+        updated_utc: '2025-04-10T00:00:00Z',
+        usage: [],
+        usage_hours: [],
+        ...overrides
+    };
+}
+
+const meta = {
+    component: Harness,
+    parameters: {
+        layout: 'centered'
+    },
+    tags: ['autodocs'],
+    title: 'Features/Billing/ChangePlanDialog'
+} satisfies Meta<typeof Harness>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Plans failed to load — shows error message. */
+export const ErrorLoadingPlans: Story = {
+    args: {
+        organization: makeOrg(),
+        plans: [] as BillingPlan[]
+    },
+    name: 'Error loading plans'
+};
+
+/** Free-plan org, dialog open — upsells to the first paid tier (Small). */
+export const Default: Story = {
+    args: {
+        organization: makeOrg(),
+        plans: MOCK_PLANS
+    }
+};
+
+/** Paid Small monthly org selects a different paid plan (Large monthly). */
+export const ChangePlan: Story = {
+    args: {
+        organization: makeOrg({
+            billing_price: 15,
+            card_last4: '4242',
+            has_premium_features: true,
+            max_events_per_month: 15000,
+            max_projects: 5,
+            max_users: 10,
+            plan_id: 'EX_SMALL',
+            plan_name: 'Small',
+            retention_days: 30,
+            subscribe_date: '2024-06-01T00:00:00Z'
+        }),
+        plans: MOCK_PLANS
+    },
+    name: 'Change plan'
+};
+
+/** Small monthly org switches to yearly billing (same tier). */
+export const IntervalSwitch: Story = {
+    args: {
+        organization: makeOrg({
+            billing_price: 15,
+            card_last4: '4242',
+            has_premium_features: true,
+            max_events_per_month: 15000,
+            max_projects: 5,
+            max_users: 10,
+            plan_id: 'EX_SMALL',
+            plan_name: 'Small',
+            retention_days: 30,
+            subscribe_date: '2024-06-01T00:00:00Z'
+        }),
+        plans: MOCK_PLANS
+    },
+    name: 'Interval switch (Small yearly)'
+};
+
+/** Paid org keeps current plan but wants to update their payment method. */
+export const UpdateCardOnly: Story = {
+    args: {
+        organization: makeOrg({
+            billing_price: 49,
+            card_last4: '1234',
+            has_premium_features: true,
+            max_events_per_month: 75000,
+            max_projects: 15,
+            max_users: 25,
+            plan_id: 'EX_MEDIUM',
+            plan_name: 'Medium',
+            retention_days: 90,
+            subscribe_date: '2024-03-01T00:00:00Z'
+        }),
+        plans: MOCK_PLANS
+    },
+    name: 'Update card only'
+};
+
+/** Paid org keeps current plan and wants to apply a coupon. */
+export const ApplyCouponOnly: Story = {
+    args: {
+        organization: makeOrg({
+            billing_price: 99,
+            card_last4: '5678',
+            has_premium_features: true,
+            max_events_per_month: 250000,
+            max_projects: -1,
+            max_users: -1,
+            plan_id: 'EX_LARGE',
+            plan_name: 'Large',
+            retention_days: 180,
+            subscribe_date: '2024-01-15T00:00:00Z'
+        }),
+        plans: MOCK_PLANS
+    },
+    name: 'Apply coupon only'
+};
+
+/** Paid org changes plan, updates card, and applies a coupon — all at once. */
+export const PlanCardCoupon: Story = {
+    args: {
+        organization: makeOrg({
+            billing_price: 15,
+            card_last4: '9999',
+            has_premium_features: true,
+            max_events_per_month: 15000,
+            max_projects: 5,
+            max_users: 10,
+            plan_id: 'EX_SMALL',
+            plan_name: 'Small',
+            retention_days: 30,
+            subscribe_date: '2024-09-01T00:00:00Z'
+        }),
+        plans: MOCK_PLANS
+    },
+    name: 'Plan + card + coupon'
+};
+
+/** Free-plan org upgrading to a paid plan for the first time (no card on file). */
+export const FirstTimePaid: Story = {
+    args: {
+        organization: makeOrg({
+            billing_price: 0,
+            card_last4: null,
+            plan_id: 'EX_FREE',
+            plan_name: 'Free'
+        }),
+        plans: MOCK_PLANS
+    },
+    name: 'First-time paid'
+};
+
+/** Paid org selecting the Free plan to downgrade. */
+export const DowngradeToFree: Story = {
+    args: {
+        organization: makeOrg({
+            billing_price: 199,
+            card_last4: '4242',
+            has_premium_features: true,
+            max_events_per_month: 1000000,
+            max_projects: -1,
+            max_users: -1,
+            plan_id: 'EX_XL',
+            plan_name: 'Extra Large',
+            retention_days: 180,
+            subscribe_date: '2023-11-01T00:00:00Z'
+        }),
+        plans: MOCK_PLANS
+    },
+    name: 'Downgrade to Free'
+};
+
+/** Coupon input expanded — user clicked "Have a coupon code?". */
+export const CouponInputOpen: Story = {
+    args: {
+        initialCouponOpen: true,
+        organization: makeOrg({
+            billing_price: 49,
+            card_last4: '4242',
+            has_premium_features: true,
+            max_events_per_month: 75000,
+            max_projects: 15,
+            max_users: 25,
+            plan_id: 'EX_MEDIUM',
+            plan_name: 'Medium',
+            retention_days: 90,
+            subscribe_date: '2024-03-01T00:00:00Z'
+        }),
+        plans: MOCK_PLANS
+    },
+    name: 'Coupon input open'
+};
+
+/** Coupon code applied — shows success alert with code and "Remove" action. */
+export const CouponApplied: Story = {
+    args: {
+        initialCouponCode: 'SAVE20',
+        organization: makeOrg({
+            billing_price: 49,
+            card_last4: '4242',
+            has_premium_features: true,
+            max_events_per_month: 75000,
+            max_projects: 15,
+            max_users: 25,
+            plan_id: 'EX_MEDIUM',
+            plan_name: 'Medium',
+            retention_days: 90,
+            subscribe_date: '2024-03-01T00:00:00Z'
+        }),
+        plans: MOCK_PLANS
+    },
+    name: 'Coupon applied'
+};
+
+/** Invalid coupon — backend returned an error for the submitted coupon code. */
+export const ErrorInvalidCoupon: Story = {
+    args: {
+        initialCouponCode: 'EXPIRED99',
+        initialFormError: "No such coupon: 'EXPIRED99'. Please check the code and try again.",
+        organization: makeOrg({
+            billing_price: 15,
+            card_last4: '4242',
+            has_premium_features: true,
+            max_events_per_month: 15000,
+            max_projects: 5,
+            max_users: 10,
+            plan_id: 'EX_SMALL',
+            plan_name: 'Small',
+            retention_days: 30,
+            subscribe_date: '2024-06-01T00:00:00Z'
+        }),
+        plans: MOCK_PLANS
+    },
+    name: 'Error: invalid coupon'
+};
+
+/** Payment failed — Stripe rejected the card during plan change. */
+export const ErrorPaymentFailed: Story = {
+    args: {
+        initialFormError: 'Your card was declined. Please try a different payment method.',
+        organization: makeOrg({
+            billing_price: 0,
+            card_last4: null,
+            plan_id: 'EX_FREE',
+            plan_name: 'Free'
+        }),
+        plans: MOCK_PLANS
+    },
+    name: 'Error: payment failed'
+};
+
+/** Downgrade blocked — too many users or projects for the target plan. */
+export const ErrorDowngradeBlocked: Story = {
+    args: {
+        initialFormError: 'Please remove 3 users and try again.',
+        organization: makeOrg({
+            billing_price: 199,
+            card_last4: '4242',
+            has_premium_features: true,
+            max_events_per_month: 1000000,
+            max_projects: -1,
+            max_users: -1,
+            plan_id: 'EX_XL',
+            plan_name: 'Extra Large',
+            retention_days: 180,
+            subscribe_date: '2023-11-01T00:00:00Z'
+        }),
+        plans: MOCK_PLANS
+    },
+    name: 'Error: downgrade blocked'
+};
+
+/** Generic plan change failure — API returned a non-success result (network error, server error, etc.). */
+export const ErrorPlanChangeFailed: Story = {
+    args: {
+        initialFormError: 'An unexpected error occurred while changing your plan. Please try again or contact support.',
+        organization: makeOrg({
+            billing_price: 15,
+            card_last4: '4242',
+            has_premium_features: true,
+            max_events_per_month: 15000,
+            max_projects: 5,
+            max_users: 10,
+            plan_id: 'EX_SMALL',
+            plan_name: 'Small',
+            retention_days: 30,
+            subscribe_date: '2024-06-01T00:00:00Z'
+        }),
+        plans: MOCK_PLANS
+    },
+    name: 'Error: plan change failed'
+};
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/billing/components/change-plan-dialog.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/components/change-plan-dialog.svelte
new file mode 100644
index 0000000000..e0d33be202
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/components/change-plan-dialog.svelte
@@ -0,0 +1,849 @@
+<script lang="ts">
+    import type { ViewOrganization } from '$features/organizations/models';
+    import type { BillingPlan } from '$lib/generated/api';
+    import type { Stripe, StripeElements } from '@stripe/stripe-js';
+
+    import ErrorMessage from '$comp/error-message.svelte';
+    import { Muted } from '$comp/typography';
+    import * as Alert from '$comp/ui/alert';
+    import { Badge } from '$comp/ui/badge';
+    import { Button } from '$comp/ui/button';
+    import * as Dialog from '$comp/ui/dialog';
+    import { Input } from '$comp/ui/input';
+    import { Skeleton } from '$comp/ui/skeleton';
+    import { Spinner } from '$comp/ui/spinner';
+    import * as Tabs from '$comp/ui/tabs';
+    import { FREE_PLAN_ID, isStripeEnabled, StripeProvider } from '$features/billing';
+    import { type ChangePlanFormData, ChangePlanSchema } from '$features/billing/schemas';
+    import { changePlanMutation, getPlansQuery } from '$features/organizations/api.svelte';
+    import { getFormErrorMessages, problemDetailsToFormErrors } from '$features/shared/validation';
+    import { Exceptionless } from '@exceptionless/browser';
+    import { ProblemDetails } from '@exceptionless/fetchclient';
+    import Check from '@lucide/svelte/icons/check';
+    import CreditCard from '@lucide/svelte/icons/credit-card';
+    import Plus from '@lucide/svelte/icons/plus';
+    import { createForm } from '@tanstack/svelte-form';
+    import { untrack } from 'svelte';
+    import { toast } from 'svelte-sonner';
+    import { SvelteMap } from 'svelte/reactivity';
+
+    interface Props {
+        initialCouponCode?: string;
+        initialCouponOpen?: boolean;
+        initialFormError?: string;
+        onclose: () => void;
+        organization: ViewOrganization;
+    }
+
+    let { initialCouponCode, initialCouponOpen, initialFormError, onclose, organization }: Props = $props();
+
+    const plansQuery = getPlansQuery({
+        route: {
+            get organizationId() {
+                return organization.id;
+            }
+        }
+    });
+
+    const changePlan = changePlanMutation({
+        route: {
+            get organizationId() {
+                return organization.id;
+            }
+        }
+    });
+
+    const YEARLY_SUFFIX = '_YEARLY';
+    const POPULAR_TIER = 'EX_XL';
+
+    function tierOf(planId: string): string {
+        return planId.endsWith(YEARLY_SUFFIX) ? planId.slice(0, -YEARLY_SUFFIX.length) : planId;
+    }
+
+    function intervalOf(planId: string): 'month' | 'year' {
+        return planId.endsWith(YEARLY_SUFFIX) ? 'year' : 'month';
+    }
+
+    interface PlanTier {
+        id: string;
+        monthly: BillingPlan | null;
+        name: string;
+        popular: boolean;
+        yearly: BillingPlan | null;
+    }
+
+    function shouldIncludeInTiers(plan: BillingPlan): boolean {
+        if (plan.is_hidden) {
+            return false;
+        }
+        if (plan.id === FREE_PLAN_ID) {
+            return false;
+        }
+
+        return true;
+    }
+
+    const tiers = $derived.by<PlanTier[]>(() => {
+        if (!plansQuery.data) {
+            return [];
+        }
+
+        const byTier = new SvelteMap<string, PlanTier>();
+
+        for (const plan of plansQuery.data) {
+            if (!shouldIncludeInTiers(plan)) {
+                continue;
+            }
+
+            const key = tierOf(plan.id);
+            const current = byTier.get(key) ?? {
+                id: key,
+                monthly: null,
+                name: plan.name.replace(/\s*\(Yearly\)\s*$/i, '').trim(),
+                popular: key === POPULAR_TIER,
+                yearly: null
+            };
+
+            if (intervalOf(plan.id) === 'year') {
+                current.yearly = plan;
+            } else {
+                current.monthly = plan;
+            }
+
+            byTier.set(key, current);
+        }
+
+        const ordered: PlanTier[] = [];
+        for (const plan of plansQuery.data) {
+            if (!shouldIncludeInTiers(plan)) {
+                continue;
+            }
+
+            const key = tierOf(plan.id);
+            const tier = byTier.get(key);
+            if (tier && !ordered.includes(tier)) {
+                ordered.push(tier);
+            }
+        }
+
+        return ordered;
+    });
+
+    const freePlan = $derived(plansQuery.data?.find((plan: BillingPlan) => plan.id === FREE_PLAN_ID) ?? null);
+    const isFreeCurrent = $derived(organization.plan_id === FREE_PLAN_ID);
+    const currentInterval = $derived<'month' | 'year'>(intervalOf(organization.plan_id));
+    const currentTierId = $derived(tierOf(organization.plan_id));
+    const currentTierIndex = $derived(tiers.findIndex((t) => t.id === currentTierId));
+
+    let selectedTierId = $state<string>('');
+    let interval = $state<'month' | 'year'>('month');
+    let paymentExpanded = $state(false);
+    let couponOpen = $state(false);
+    let couponApplied = $state<null | string>(null);
+    let couponInput = $state('');
+    let couponError = $state<null | string>(null);
+    let couponInputEl = $state<HTMLInputElement | null>(null);
+    let couponSectionEl = $state<HTMLElement | null>(null);
+    let paymentSectionEl = $state<HTMLElement | null>(null);
+
+    const hasExistingCard = $derived(!!organization.card_last4);
+
+    function resolvePlanId(tierId: string, billingInterval: 'month' | 'year'): string {
+        if (!tierId) {
+            return FREE_PLAN_ID;
+        }
+
+        const tier = tiers.find((t) => t.id === tierId);
+        if (!tier) {
+            return FREE_PLAN_ID;
+        }
+
+        if (billingInterval === 'year' && tier.yearly) {
+            return tier.yearly.id;
+        }
+
+        return tier.monthly?.id ?? tier.yearly?.id ?? FREE_PLAN_ID;
+    }
+
+    const selectedPlanId = $derived(resolvePlanId(selectedTierId, interval));
+    const selectedPlan = $derived(plansQuery.data?.find((plan: BillingPlan) => plan.id === selectedPlanId) ?? null);
+    const isFreeSelected = $derived(selectedPlanId === FREE_PLAN_ID);
+    const isPaidPlan = $derived(!!selectedPlan && selectedPlan.price > 0);
+    const isCurrentPlan = $derived(selectedPlanId === organization.plan_id);
+
+    const planDirty = $derived(!isCurrentPlan);
+    const paymentDirty = $derived(paymentExpanded && hasExistingCard);
+    const needsPayment = $derived(isPaidPlan && (!hasExistingCard || paymentExpanded));
+    const couponDirty = $derived(!!couponApplied);
+    const anyDirty = $derived(planDirty || paymentDirty || couponDirty);
+
+    const isDowngrade = $derived.by(() => {
+        if (!planDirty) {
+            return false;
+        }
+
+        if (isFreeSelected) {
+            return true;
+        }
+
+        const selectedIdx = tiers.findIndex((t) => t.id === selectedTierId);
+        return selectedIdx >= 0 && currentTierIndex >= 0 && selectedIdx < currentTierIndex;
+    });
+
+    let stripe = $state<null | Stripe>(null);
+    let stripeElements = $state<StripeElements | undefined>(undefined);
+
+    const form = createForm(() => ({
+        defaultValues: {
+            cardMode: hasExistingCard ? 'existing' : 'new',
+            couponId: '',
+            selectedPlanId: ''
+        } as ChangePlanFormData,
+        validators: {
+            onSubmit: ChangePlanSchema,
+            onSubmitAsync: async ({ value }) => {
+                try {
+                    let stripeToken: string | undefined;
+                    let last4: string | undefined;
+
+                    if (needsPayment && isPaidPlan) {
+                        if (!stripe || !stripeElements) {
+                            return { form: 'Payment system not loaded. Please try again.' };
+                        }
+
+                        const { error: submitError } = await stripeElements.submit();
+                        if (submitError) {
+                            return { form: submitError.message ?? 'Payment validation failed' };
+                        }
+
+                        const { error: pmError, paymentMethod } = await stripe.createPaymentMethod({
+                            elements: stripeElements
+                        });
+
+                        if (pmError) {
+                            return { form: pmError.message ?? 'Failed to process payment method' };
+                        }
+
+                        stripeToken = paymentMethod.id;
+                        last4 = paymentMethod.card?.last4;
+                    }
+
+                    const result = await changePlan.mutateAsync({
+                        coupon_id: value.couponId || undefined,
+                        last4,
+                        plan_id: value.selectedPlanId,
+                        stripe_token: stripeToken
+                    });
+
+                    if (!result.success) {
+                        const message = result.message ?? 'Failed to change plan';
+                        const isCouponError = /coupon/i.test(message);
+
+                        if (isCouponError && value.couponId) {
+                            // Clear applied coupon, reopen input with the bad code, focus it
+                            couponApplied = null;
+                            couponInput = value.couponId;
+                            couponOpen = true;
+                            couponError = message;
+                            // Scroll coupon into view and focus the input after DOM updates
+                            requestAnimationFrame(() => {
+                                couponSectionEl?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                                couponInputEl?.focus();
+                            });
+                        }
+
+                        toast.error(message);
+                        return { form: message };
+                    }
+
+                    toast.success(result.message ?? 'Your billing plan has been successfully changed.');
+                    onclose();
+
+                    return null;
+                } catch (error: unknown) {
+                    if (error instanceof ProblemDetails) {
+                        const formErrors = problemDetailsToFormErrors(error);
+                        const errorMessage = formErrors?.form ?? error.title ?? 'An unexpected error occurred';
+                        toast.error(errorMessage);
+                        return formErrors;
+                    }
+
+                    await Exceptionless.createException(error instanceof Error ? error : new Error(String(error)))
+                        .setProperty('organizationId', organization.id)
+                        .setProperty('selectedPlanId', value.selectedPlanId)
+                        .addTags('billing', 'change-plan')
+                        .submit();
+
+                    const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred';
+                    toast.error(errorMessage);
+                    return { form: errorMessage };
+                }
+            }
+        }
+    }));
+
+    $effect(() => {
+        const planId = selectedPlanId;
+        const mode = needsPayment ? 'new' : 'existing';
+        const coupon = couponApplied ?? '';
+        untrack(() => {
+            form.setFieldValue('selectedPlanId', planId);
+            form.setFieldValue('cardMode', mode);
+            form.setFieldValue('couponId', coupon);
+        });
+    });
+
+    $effect(() => {
+        if (plansQuery.data) {
+            untrack(() => {
+                const nextTierIndex = currentTierIndex + 1;
+                const upsellTier = nextTierIndex < tiers.length ? tiers[nextTierIndex] : null;
+
+                if (isFreeCurrent && tiers.length > 0) {
+                    selectedTierId = tiers[0]!.id;
+                } else if (upsellTier) {
+                    selectedTierId = upsellTier.id;
+                } else {
+                    selectedTierId = currentTierId === FREE_PLAN_ID ? '' : currentTierId;
+                }
+                // Always default to yearly to promote savings (especially for free→paid upgrades)
+                interval = isFreeCurrent ? 'year' : currentInterval;
+                paymentExpanded = false;
+                couponOpen = initialCouponOpen ?? false;
+                couponApplied = initialCouponCode ?? null;
+                couponInput = '';
+                couponError = null;
+                form.reset();
+            });
+        }
+    });
+
+    function selectTier(tierId: string) {
+        selectedTierId = tierId;
+    }
+
+    function setInterval(next: 'month' | 'year') {
+        interval = next;
+    }
+
+    function onUseDifferentCard() {
+        paymentExpanded = true;
+        requestAnimationFrame(() => paymentSectionEl?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }));
+    }
+
+    function onKeepCurrentCard() {
+        paymentExpanded = false;
+    }
+
+    function onCouponOpen() {
+        couponOpen = true;
+        couponError = null;
+        requestAnimationFrame(() => {
+            couponSectionEl?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            couponInputEl?.focus();
+        });
+    }
+
+    function onCouponCancel() {
+        couponOpen = false;
+        couponInput = '';
+        couponError = null;
+    }
+
+    function onCouponApply() {
+        const code = couponInput.trim();
+        if (!code) {
+            return;
+        }
+
+        couponApplied = code.toUpperCase();
+        couponOpen = false;
+        couponInput = '';
+        couponError = null;
+    }
+
+    function onCouponRemove() {
+        couponApplied = null;
+        couponError = null;
+    }
+
+    function handleCancel() {
+        onclose();
+    }
+
+    function formatEvents(n: number): string {
+        if (n < 0) {
+            return 'Unlimited events';
+        }
+
+        if (n >= 1_000_000) {
+            return `${(n / 1_000_000).toFixed(n % 1_000_000 === 0 ? 0 : 1)}M events/mo`;
+        }
+
+        if (n >= 1_000) {
+            return `${Math.round(n / 1_000)}K events/mo`;
+        }
+
+        return `${n} events/mo`;
+    }
+
+    function formatUsers(n: number): string {
+        if (n < 0) {
+            return 'Unlimited users';
+        }
+
+        return `${n} user${n === 1 ? '' : 's'}`;
+    }
+
+    function formatRetention(days: number): string {
+        return `${days} day${days === 1 ? '' : 's'}`;
+    }
+
+    function formatPrice(n: number): string {
+        return n.toLocaleString('en-US');
+    }
+
+    function tierPrice(tier: PlanTier, billingInterval: 'month' | 'year') {
+        if (billingInterval === 'year' && tier.yearly) {
+            const perMonth = tier.yearly.price / 12;
+
+            return {
+                amount: `$${formatPrice(tier.yearly.price)}`,
+                period: '/yr',
+                sub: `~$${perMonth.toFixed(0)}/mo`
+            };
+        }
+
+        const plan = tier.monthly ?? tier.yearly;
+        if (!plan) {
+            return { amount: '—', period: '', sub: '' };
+        }
+
+        return { amount: `$${formatPrice(plan.price)}`, period: '/mo', sub: '' };
+    }
+
+    const yearlySavingsLabel = $derived.by(() => {
+        const percentages = tiers
+            .filter((t) => t.monthly && t.yearly && t.monthly.price > 0)
+            .map((t) => {
+                const fullYear = t.monthly!.price * 12;
+                const saved = fullYear - t.yearly!.price;
+
+                return Math.round((saved / fullYear) * 100);
+            });
+
+        if (percentages.length === 0) {
+            return null;
+        }
+
+        const allSame = percentages.every((pct) => pct === percentages[0]);
+        const display = allSame ? percentages[0] : Math.min(...percentages);
+
+        if (!display || display <= 0) {
+            return null;
+        }
+
+        return allSame ? `Save ${display}%` : `Save ~${display}%`;
+    });
+
+    function intervalWord(billingInterval: 'month' | 'year'): string {
+        return billingInterval === 'year' ? 'yearly' : 'monthly';
+    }
+
+    function planLabel(planId: string, opts: { includeInterval?: boolean } = {}): string {
+        if (planId === FREE_PLAN_ID) {
+            return 'Free';
+        }
+
+        const tier = tiers.find((t) => t.id === tierOf(planId));
+        if (!tier) {
+            return planId;
+        }
+
+        return opts.includeInterval ? `${tier.name} ${intervalWord(intervalOf(planId))}` : tier.name;
+    }
+
+    const currentSubtitle = $derived.by(() => {
+        if (organization.plan_id === FREE_PLAN_ID) {
+            return 'Free plan';
+        }
+
+        const plan = plansQuery.data?.find((p: BillingPlan) => p.id === organization.plan_id);
+        const price = organization.billing_price > 0 ? organization.billing_price : (plan?.price ?? 0);
+        const name = tiers.find((t) => t.id === currentTierId)?.name ?? organization.plan_name;
+        const period = currentInterval === 'year' ? '/yr' : '/mo';
+        return `${name} · $${formatPrice(price)}${period}, billed ${intervalWord(currentInterval)}`;
+    });
+
+    const ctaLabel = $derived.by(() => {
+        if (!anyDirty) {
+            return 'Save changes';
+        }
+
+        if (planDirty && isFreeSelected) {
+            return 'Downgrade to Free';
+        }
+
+        if (planDirty && organization.plan_id === FREE_PLAN_ID) {
+            return `Start ${planLabel(selectedPlanId, { includeInterval: true })}`;
+        }
+
+        if (planDirty) {
+            const intervalChanged = intervalOf(organization.plan_id) !== intervalOf(selectedPlanId);
+
+            return isDowngrade
+                ? `Downgrade to ${planLabel(selectedPlanId, { includeInterval: intervalChanged })}`
+                : `Switch to ${planLabel(selectedPlanId, { includeInterval: intervalChanged })}`;
+        }
+
+        if (paymentDirty && !couponDirty) {
+            return 'Update payment method';
+        }
+
+        if (couponDirty && !paymentDirty) {
+            return 'Apply coupon';
+        }
+
+        return 'Save changes';
+    });
+</script>
+
+<Dialog.Root
+    open={true}
+    onOpenChange={(v) => {
+        if (!v) onclose();
+    }}
+>
+    <Dialog.Content class="max-w-xl sm:max-w-xl">
+        <Dialog.Header class="space-y-1">
+            <Dialog.Title class="flex items-center gap-2 text-base">
+                <CreditCard class="size-4" />
+                Manage subscription
+            </Dialog.Title>
+            <Muted class="text-xs">
+                <strong class="text-foreground font-medium">{organization.name}</strong>
+                <span> · </span>
+                {currentSubtitle}
+            </Muted>
+        </Dialog.Header>
+
+        {#if !isStripeEnabled()}
+            <div class="py-4">
+                <ErrorMessage message="Billing is currently disabled." />
+            </div>
+        {:else if plansQuery.isLoading}
+            <div class="space-y-3 py-4">
+                <Skeleton class="h-9 w-full" />
+                <Skeleton class="h-40 w-full" />
+            </div>
+        {:else if plansQuery.error}
+            <div class="py-4">
+                <ErrorMessage message="Failed to load available plans. Please try again." />
+            </div>
+        {:else if plansQuery.data}
+            <form
+                onsubmit={(e) => {
+                    e.preventDefault();
+                    form.handleSubmit();
+                }}
+            >
+                <div class="max-h-[70vh] space-y-6 overflow-y-auto px-1 py-1">
+                    <section class="space-y-2.5">
+                        <div class="flex items-center justify-between px-0.5">
+                            <div class="text-muted-foreground text-[11px] font-semibold tracking-wider uppercase">Plan</div>
+                            <Muted class="text-xs font-normal normal-case">All changes prorated</Muted>
+                        </div>
+
+                        <Tabs.Root value={interval} onValueChange={(value) => setInterval(value as 'month' | 'year')} class="w-full">
+                            <Tabs.List class="grid w-full grid-cols-2">
+                                <Tabs.Trigger value="month">Monthly</Tabs.Trigger>
+                                <Tabs.Trigger value="year" class="gap-2">
+                                    Yearly
+                                    {#if yearlySavingsLabel}
+                                        <Badge variant="default" class="text-foreground px-1.5 py-0 text-[10px]">{yearlySavingsLabel}</Badge>
+                                    {/if}
+                                </Tabs.Trigger>
+                            </Tabs.List>
+                        </Tabs.Root>
+
+                        <div class="divide-border bg-card divide-y overflow-hidden rounded-lg border">
+                            {#each tiers as tier, tierIdx (tier.id)}
+                                {@const planForInterval = interval === 'year' && tier.yearly ? tier.yearly : tier.monthly}
+                                {@const price = tierPrice(tier, interval)}
+                                {@const isCurrent = tier.id === currentTierId && (interval === currentInterval || !tier.yearly)}
+                                {@const isSelected = tier.id === selectedTierId}
+                                <Button
+                                    type="button"
+                                    variant="ghost"
+                                    onclick={() => selectTier(tier.id)}
+                                    class="group relative flex h-auto w-full items-center gap-3 rounded-none px-4 py-3 text-left {isSelected
+                                        ? 'bg-primary/5 hover:bg-primary/5'
+                                        : 'hover:bg-muted/50'}"
+                                >
+                                    {#if isSelected}
+                                        <span class="bg-primary absolute top-0 bottom-0 left-0 w-0.5"></span>
+                                    {/if}
+                                    <div class="min-w-0 flex-1">
+                                        <div class="flex items-center gap-2">
+                                            <span class="text-sm font-semibold tracking-tight">{tier.name}</span>
+                                            {#if isCurrent}
+                                                <Badge variant="secondary" class="px-1.5 py-0 text-[10px] uppercase">Current</Badge>
+                                            {:else if tier.popular && tierIdx > currentTierIndex}
+                                                <Badge variant="default" class="text-foreground px-1.5 py-0 text-[10px] uppercase">Most popular</Badge>
+                                            {/if}
+                                        </div>
+                                        {#if planForInterval}
+                                            <Muted class="mt-0.5 text-xs">
+                                                {formatEvents(planForInterval.max_events_per_month)}
+                                                <span class="text-muted-foreground/60 mx-1">·</span>
+                                                {formatRetention(planForInterval.retention_days)}
+                                                <span class="text-muted-foreground/60 mx-1">·</span>
+                                                {formatUsers(planForInterval.max_users)}
+                                            </Muted>
+                                        {/if}
+                                    </div>
+                                    <div class="text-right whitespace-nowrap">
+                                        <div>
+                                            <span class="text-sm font-semibold">{price.amount}</span><Muted class="inline text-xs font-medium"
+                                                >{price.period}</Muted
+                                            >
+                                        </div>
+                                        {#if price.sub}
+                                            <Muted class="text-[11px]">{price.sub}</Muted>
+                                        {/if}
+                                    </div>
+                                </Button>
+                            {/each}
+
+                            <Button
+                                type="button"
+                                variant="ghost"
+                                onclick={() => selectTier('')}
+                                class="group relative flex h-auto w-full items-center gap-3 rounded-none px-4 py-3 text-left {isFreeSelected
+                                    ? 'bg-primary/5 hover:bg-primary/5'
+                                    : 'hover:bg-muted/50'}"
+                            >
+                                {#if isFreeSelected}
+                                    <span class="bg-primary absolute top-0 bottom-0 left-0 w-0.5"></span>
+                                {/if}
+                                <div class="min-w-0 flex-1">
+                                    <div class="flex items-center gap-2">
+                                        <span class="text-muted-foreground text-sm font-medium">Free</span>
+                                        {#if isFreeCurrent}
+                                            <Badge variant="secondary" class="px-1.5 py-0 text-[10px] uppercase">Current</Badge>
+                                        {:else}
+                                            <Muted class="text-xs">— cancel paid plan</Muted>
+                                        {/if}
+                                    </div>
+                                    {#if freePlan}
+                                        <Muted class="mt-0.5 text-xs">
+                                            {formatEvents(freePlan.max_events_per_month)}
+                                            <span class="text-muted-foreground/60 mx-1">·</span>
+                                            {formatRetention(freePlan.retention_days)}
+                                            <span class="text-muted-foreground/60 mx-1">·</span>
+                                            {formatUsers(freePlan.max_users)}
+                                        </Muted>
+                                    {/if}
+                                </div>
+                                <div class="text-right whitespace-nowrap">
+                                    <Muted class="text-sm font-medium">Free</Muted>
+                                </div>
+                            </Button>
+                        </div>
+                    </section>
+
+                    {#if isPaidPlan}
+                        <section class="space-y-2.5" bind:this={paymentSectionEl}>
+                            <div class="flex items-center justify-between px-0.5">
+                                <div class="text-muted-foreground text-[11px] font-semibold tracking-wider uppercase">Payment method</div>
+                                {#if hasExistingCard && paymentExpanded}
+                                    <Button
+                                        type="button"
+                                        variant="link"
+                                        class="text-muted-foreground h-auto p-0 text-xs font-medium normal-case"
+                                        onclick={onKeepCurrentCard}
+                                    >
+                                        Keep current card
+                                    </Button>
+                                {/if}
+                            </div>
+
+                            {#if hasExistingCard && !paymentExpanded}
+                                <div class="flex items-center justify-between gap-3 px-0.5 py-1">
+                                    <div class="text-foreground flex items-center gap-2.5 text-sm">
+                                        <CreditCard class="text-muted-foreground size-4" />
+                                        <span>
+                                            Paying with
+                                            <Muted class="inline font-mono text-xs">···· {organization.card_last4}</Muted>
+                                        </span>
+                                    </div>
+                                    <Button type="button" variant="link" class="text-primary h-auto p-0 text-sm font-medium" onclick={onUseDifferentCard}>
+                                        Use a different payment method
+                                    </Button>
+                                </div>
+                            {:else}
+                                <div class="border-border bg-muted/30 rounded-lg border p-3">
+                                    <StripeProvider
+                                        appearance={{
+                                            theme: 'stripe',
+                                            variables: {
+                                                borderRadius: '6px'
+                                            }
+                                        }}
+                                        onElementsChange={(elements) => {
+                                            stripeElements = elements;
+                                        }}
+                                        onload={(loadedStripe) => {
+                                            stripe = loadedStripe;
+                                        }}
+                                    />
+                                </div>
+                            {/if}
+                        </section>
+                    {/if}
+
+                    {#if !isFreeSelected}
+                        <section class="space-y-2.5" bind:this={couponSectionEl}>
+                            <div class="flex items-center justify-between px-0.5">
+                                <div class="text-muted-foreground text-[11px] font-semibold tracking-wider uppercase">Coupon</div>
+                                {#if couponOpen && !couponApplied}
+                                    <Button
+                                        type="button"
+                                        variant="link"
+                                        class="text-muted-foreground h-auto p-0 text-xs font-medium normal-case"
+                                        onclick={onCouponCancel}
+                                    >
+                                        Cancel
+                                    </Button>
+                                {/if}
+                            </div>
+
+                            {#if couponApplied}
+                                <Alert.Root variant="success" class="flex items-center gap-2.5 py-2.5">
+                                    <Check class="size-4" />
+                                    <Alert.Description class="flex flex-1 items-center gap-2">
+                                        <span class="font-mono text-xs font-semibold">{couponApplied}</span>
+                                        <span class="text-muted-foreground truncate">— will be applied</span>
+                                        <span class="flex-1"></span>
+                                        <Button type="button" variant="link" class="text-muted-foreground h-auto p-0 text-xs" onclick={onCouponRemove}>
+                                            Remove
+                                        </Button>
+                                    </Alert.Description>
+                                </Alert.Root>
+                            {:else if couponOpen}
+                                <div class="flex items-center gap-2">
+                                    <Input
+                                        type="text"
+                                        placeholder="Enter code"
+                                        autocomplete="off"
+                                        bind:value={couponInput}
+                                        bind:ref={couponInputEl}
+                                        class={couponError ? 'border-destructive' : ''}
+                                        oninput={() => {
+                                            couponError = null;
+                                        }}
+                                        onkeydown={(e) => {
+                                            if (e.key === 'Enter') {
+                                                e.preventDefault();
+                                                onCouponApply();
+                                            }
+                                        }}
+                                    />
+                                    <Button type="button" variant="outline" onclick={onCouponApply} disabled={!couponInput.trim()}>Apply</Button>
+                                </div>
+                                {#if couponError}
+                                    <ErrorMessage message={couponError} />
+                                {/if}
+                            {:else}
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    class="border-border/80 text-muted-foreground hover:text-foreground w-full justify-start gap-2 border-dashed"
+                                    onclick={onCouponOpen}
+                                >
+                                    <Plus class="size-3.5" />
+                                    Have a coupon code?
+                                </Button>
+                            {/if}
+                        </section>
+                    {/if}
+                </div>
+
+                <Dialog.Footer class="border-border mt-4 flex-col items-stretch gap-3 border-t pt-4 sm:flex-col sm:items-stretch sm:space-x-0">
+                    <form.Subscribe selector={(state) => state.errors}>
+                        {#snippet children(errors)}
+                            <ErrorMessage message={getFormErrorMessages(errors)} />
+                        {/snippet}
+                    </form.Subscribe>
+
+                    {#if initialFormError}
+                        <ErrorMessage message={initialFormError} />
+                    {/if}
+
+                    <div class="min-h-4.5 space-y-1">
+                        {#if !anyDirty}
+                            <Muted class="text-xs italic">No changes yet</Muted>
+                        {/if}
+                        {#if planDirty}
+                            {@const intervalChanged = intervalOf(organization.plan_id) !== intervalOf(selectedPlanId)}
+                            {@const includeInt = intervalChanged || organization.plan_id === FREE_PLAN_ID || isFreeSelected}
+                            <div class="flex items-baseline gap-2 text-xs leading-snug">
+                                <Muted class="min-w-16 text-[10px] font-semibold tracking-wider uppercase">Plan</Muted>
+                                <Muted class="text-xs">
+                                    {#if isFreeSelected}
+                                        <strong class="text-foreground font-medium">{planLabel(organization.plan_id, { includeInterval: true })}</strong>
+                                        <span class="text-muted-foreground/60 mx-1">→</span>
+                                        <strong class="text-foreground font-medium">Free</strong>
+                                        · immediate, prorated credit
+                                    {:else if organization.plan_id === FREE_PLAN_ID}
+                                        Start <strong class="text-foreground font-medium">{planLabel(selectedPlanId, { includeInterval: true })}</strong>
+                                        {#if selectedPlan}· ${formatPrice(selectedPlan.price)}{interval === 'year' ? '/yr' : '/mo'}{/if}
+                                    {:else}
+                                        <strong class="text-foreground font-medium">{planLabel(organization.plan_id, { includeInterval: includeInt })}</strong>
+                                        <span class="text-muted-foreground/60 mx-1">→</span>
+                                        <strong class="text-foreground font-medium">{planLabel(selectedPlanId, { includeInterval: includeInt })}</strong>
+                                        {#if selectedPlan}· ${formatPrice(selectedPlan.price)}{interval === 'year' ? '/yr' : '/mo'} · prorated today{/if}
+                                    {/if}
+                                </Muted>
+                            </div>
+                        {/if}
+                        {#if paymentDirty}
+                            <div class="flex items-baseline gap-2 text-xs leading-snug">
+                                <Muted class="min-w-16 text-[10px] font-semibold tracking-wider uppercase">Payment</Muted>
+                                <Muted class="text-xs">
+                                    ···· {organization.card_last4}
+                                    <span class="text-muted-foreground/60 mx-1">→</span>
+                                    <strong class="text-foreground font-medium">new payment method</strong>
+                                </Muted>
+                            </div>
+                        {/if}
+                        {#if couponDirty}
+                            <div class="flex items-baseline gap-2 text-xs leading-snug">
+                                <Muted class="min-w-16 text-[10px] font-semibold tracking-wider uppercase">Coupon</Muted>
+                                <Muted class="text-xs">
+                                    <strong class="text-foreground font-mono font-medium">{couponApplied}</strong> applied
+                                </Muted>
+                            </div>
+                        {/if}
+                    </div>
+
+                    <form.Subscribe selector={(state) => state.isSubmitting}>
+                        {#snippet children(isSubmitting)}
+                            <div class="flex items-center justify-end gap-2">
+                                <Button type="button" variant="outline" onclick={handleCancel} disabled={isSubmitting}>Cancel</Button>
+                                <Button type="submit" variant={isDowngrade ? 'destructive' : 'default'} disabled={isSubmitting || !anyDirty}>
+                                    {#if isSubmitting}
+                                        <Spinner class="mr-2" />
+                                        Saving…
+                                    {:else}
+                                        {ctaLabel}
+                                    {/if}
+                                </Button>
+                            </div>
+                        {/snippet}
+                    </form.Subscribe>
+                </Dialog.Footer>
+            </form>
+        {/if}
+    </Dialog.Content>
+</Dialog.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/billing/components/stripe-provider.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/components/stripe-provider.svelte
new file mode 100644
index 0000000000..68adf277d4
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/components/stripe-provider.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+    import type { Stripe, StripeElements, StripeElementsOptions, StripePaymentElement } from '@stripe/stripe-js';
+
+    import ErrorMessage from '$comp/error-message.svelte';
+    import { loadStripeOnce, setStripeContext } from '$features/billing/stripe.svelte';
+    import { onMount, setContext } from 'svelte';
+
+    type Props = {
+        appearance?: StripeElementsOptions['appearance'];
+        currency?: string;
+        onElementsChange?: (elements: StripeElements | undefined) => void;
+        onload?: (stripe: Stripe) => void;
+    } & ({ clientSecret: string; mode?: never } | { clientSecret?: never; mode?: 'setup' });
+
+    let { appearance, clientSecret, currency = 'usd', mode = 'setup', onElementsChange, onload }: Props = $props();
+
+    /**
+     * Fully imperative approach: bypasses both svelte-stripe's <Elements> and
+     * <PaymentElement> components, and avoids Svelte 5 reactive template
+     * guards entirely.
+     *
+     * Why: Svelte 5 has a reactivity issue where $state/$derived/stores set
+     * from async callbacks (onMount, .then) don't reliably trigger template
+     * {#if} re-renders. We sidestep this by using direct DOM manipulation
+     * for show/hide and mounting the Stripe PaymentElement imperatively.
+     */
+
+    let stripeInstance: null | Stripe = null;
+    let elementsInstance: null | StripeElements = null;
+    let paymentElement: null | StripePaymentElement = null;
+    let errorMessage: null | string = $state(null);
+
+    let skeletonDiv: HTMLDivElement;
+    let paymentDiv: HTMLDivElement;
+    let errorDiv: HTMLDivElement;
+
+    onMount(() => {
+        loadStripeOnce()
+            .then((stripe) => {
+                if (!stripe) {
+                    showError('Stripe is not configured. Please contact support.');
+                    return;
+                }
+
+                stripeInstance = stripe;
+                elementsInstance = clientSecret
+                    ? stripe.elements({ appearance, clientSecret })
+                    : stripe.elements({
+                          // `paymentMethodCreation: 'manual'` is required when we plan
+                          // to call `stripe.createPaymentMethod({ elements })` later
+                          // (deferred-intent flow). Without it Stripe throws
+                          // "your elements instance must be created with
+                          // paymentMethodCreation: 'manual'".
+                          appearance,
+                          currency: currency ?? 'usd',
+                          mode: mode ?? 'setup',
+                          paymentMethodCreation: 'manual'
+                      });
+
+                paymentElement = elementsInstance.create('payment');
+                paymentElement.mount(paymentDiv);
+
+                // Swap skeleton for payment element
+                skeletonDiv.style.display = 'none';
+                paymentDiv.style.display = 'block';
+
+                onload?.(stripe);
+                onElementsChange?.(elementsInstance);
+            })
+            .catch((ex) => {
+                showError(ex instanceof Error ? ex.message : 'Failed to load payment system');
+            });
+
+        return () => {
+            paymentElement?.destroy();
+        };
+    });
+
+    function showError(msg: string) {
+        errorMessage = msg;
+        skeletonDiv.style.display = 'none';
+        paymentDiv.style.display = 'none';
+        errorDiv.style.display = 'block';
+    }
+
+    // Provide context for svelte-stripe's PaymentElement (in case it's used)
+    // and for useStripe() in form submission handlers.
+    setContext('stripe', {
+        get elements() {
+            return elementsInstance;
+        },
+        get stripe() {
+            return stripeInstance;
+        }
+    });
+
+    setStripeContext({
+        get elements() {
+            return elementsInstance;
+        },
+        get error() {
+            return errorMessage;
+        },
+        get isLoading() {
+            return !elementsInstance && !errorMessage;
+        },
+        get stripe() {
+            return stripeInstance;
+        }
+    });
+</script>
+
+<div bind:this={skeletonDiv} class="bg-accent h-32 w-full animate-pulse rounded-md"></div>
+<div bind:this={paymentDiv} class="min-h-[200px]" style="display:none;"></div>
+<div bind:this={errorDiv} style="display:none;">
+    <ErrorMessage message={errorMessage ?? 'An error occurred'} />
+</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/billing/components/upgrade-required-dialog.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/components/upgrade-required-dialog.svelte
new file mode 100644
index 0000000000..094f954c7f
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/components/upgrade-required-dialog.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { resolve } from '$app/paths';
+    import * as AlertDialog from '$comp/ui/alert-dialog';
+
+    import { upgradeRequiredDialog } from '../upgrade-required.svelte';
+
+    function onUpgrade() {
+        const orgId = upgradeRequiredDialog.organizationId;
+        upgradeRequiredDialog.open = false;
+
+        if (orgId) {
+            void goto(resolve('/(app)/organization/[organizationId]/billing', { organizationId: orgId }) + '?changePlan=true');
+        }
+    }
+</script>
+
+<AlertDialog.Root bind:open={upgradeRequiredDialog.open}>
+    <AlertDialog.Content>
+        <AlertDialog.Header>
+            <AlertDialog.Title>Upgrade Plan</AlertDialog.Title>
+            <AlertDialog.Description>{upgradeRequiredDialog.message}</AlertDialog.Description>
+        </AlertDialog.Header>
+        <AlertDialog.Footer>
+            <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+            <AlertDialog.Action onclick={onUpgrade}>Upgrade Plan</AlertDialog.Action>
+        </AlertDialog.Footer>
+    </AlertDialog.Content>
+</AlertDialog.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/billing/constants.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/constants.ts
new file mode 100644
index 0000000000..34cdb37935
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/constants.ts
@@ -0,0 +1 @@
+export const FREE_PLAN_ID = 'EX_FREE';
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/billing/index.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/index.ts
new file mode 100644
index 0000000000..2f62715317
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Billing feature module - Stripe integration for plan management.
+ */
+
+// Components
+export { default as ChangePlanDialog } from './components/change-plan-dialog.svelte';
+
+export { default as StripeProvider } from './components/stripe-provider.svelte';
+
+// Upgrade required handling
+export { default as UpgradeRequiredDialog } from './components/upgrade-required-dialog.svelte';
+
+// Constants
+export { FREE_PLAN_ID } from './constants';
+// Models
+export type { BillingPlan, CardMode, ChangePlanFormState, ChangePlanRequest, ChangePlanResult } from './models';
+
+// Context and hooks
+export { getStripePublishableKey, isStripeEnabled, loadStripeOnce, setStripeContext, type StripeContext, tryUseStripe, useStripe } from './stripe.svelte';
+export { handleUpgradeRequired, isUpgradeRequired } from './upgrade-required.svelte';
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/billing/models.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/models.ts
new file mode 100644
index 0000000000..de988551bf
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/models.ts
@@ -0,0 +1,19 @@
+/**
+ * Billing models - re-exports from generated types plus billing-specific types.
+ */
+
+export type { BillingPlan, ChangePlanRequest, ChangePlanResult } from '$lib/generated/api';
+
+/**
+ * Card mode for the payment form.
+ */
+export type CardMode = 'existing' | 'new';
+
+/**
+ * State for the change plan form.
+ */
+export interface ChangePlanFormState {
+    cardMode: CardMode;
+    couponId: string;
+    selectedPlanId: null | string;
+}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/billing/schemas.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/schemas.ts
new file mode 100644
index 0000000000..8782768fb2
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/schemas.ts
@@ -0,0 +1,9 @@
+import { type infer as Infer, object, string, enum as zodEnum } from 'zod';
+
+export const ChangePlanSchema = object({
+    cardMode: zodEnum(['existing', 'new']),
+    couponId: string(),
+    selectedPlanId: string().min(1, 'Please select a plan.')
+});
+
+export type ChangePlanFormData = Infer<typeof ChangePlanSchema>;
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/billing/stripe.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/stripe.svelte.ts
new file mode 100644
index 0000000000..542b3756c5
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/stripe.svelte.ts
@@ -0,0 +1,94 @@
+/**
+ * Stripe context and hooks for billing integration.
+ *
+ * Provides lazy-loaded Stripe instance with context-based access following
+ * the svelte-intercom provider pattern.
+ */
+
+import type { Stripe, StripeElements } from '@stripe/stripe-js';
+
+import { env } from '$env/dynamic/public';
+import { loadStripe } from '@stripe/stripe-js';
+import { getContext, setContext } from 'svelte';
+
+const STRIPE_CONTEXT_KEY = Symbol('stripe-context');
+
+export interface StripeContext {
+    readonly elements: null | StripeElements;
+    readonly error: null | string;
+    readonly isLoading: boolean;
+    readonly stripe: null | Stripe;
+}
+
+/**
+ * Get the Stripe publishable key from environment.
+ */
+export function getStripePublishableKey(): string | undefined {
+    return env.PUBLIC_STRIPE_PUBLISHABLE_KEY;
+}
+
+/**
+ * Check if Stripe is enabled via environment configuration.
+ */
+export function isStripeEnabled(): boolean {
+    return !!env.PUBLIC_STRIPE_PUBLISHABLE_KEY;
+}
+
+// Singleton to prevent multiple Stripe loads
+let _stripePromise: null | Promise<null | Stripe> = null;
+let _stripeInstance: null | Stripe = null;
+
+/**
+ * Load Stripe instance lazily. Returns cached instance if already loaded.
+ * Resets on failure so subsequent calls can retry (e.g. after a transient network error).
+ */
+export async function loadStripeOnce(): Promise<null | Stripe> {
+    if (_stripeInstance) {
+        return _stripeInstance;
+    }
+
+    if (!isStripeEnabled()) {
+        return null;
+    }
+
+    if (!_stripePromise) {
+        _stripePromise = loadStripe(env.PUBLIC_STRIPE_PUBLISHABLE_KEY!);
+    }
+
+    try {
+        _stripeInstance = await _stripePromise;
+        return _stripeInstance;
+    } catch (error: unknown) {
+        // Reset so the next call can retry instead of re-awaiting the rejected promise
+        _stripePromise = null;
+        _stripeInstance = null;
+        throw error;
+    }
+}
+
+/**
+ * Set the Stripe context. Called by StripeProvider.
+ */
+export function setStripeContext(ctx: StripeContext): void {
+    setContext(STRIPE_CONTEXT_KEY, ctx);
+}
+
+/**
+ * Try to get the Stripe context without throwing.
+ * Returns null if not within a StripeProvider.
+ */
+export function tryUseStripe(): null | StripeContext {
+    return getContext<StripeContext | undefined>(STRIPE_CONTEXT_KEY) ?? null;
+}
+
+/**
+ * Get the Stripe context. Must be called within a StripeProvider.
+ * @throws Error if called outside of StripeProvider
+ */
+export function useStripe(): StripeContext {
+    const ctx = getContext<StripeContext | undefined>(STRIPE_CONTEXT_KEY);
+    if (!ctx) {
+        throw new Error('useStripe() must be called within a StripeProvider component');
+    }
+    return ctx;
+}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/billing/upgrade-required.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/upgrade-required.svelte.ts
new file mode 100644
index 0000000000..99d8bd56c6
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/billing/upgrade-required.svelte.ts
@@ -0,0 +1,54 @@
+import { ProblemDetails } from '@exceptionless/fetchclient';
+
+interface UpgradeRequiredState {
+    message: string;
+    open: boolean;
+    organizationId: string | undefined;
+}
+
+const state: UpgradeRequiredState = $state({
+    message: '',
+    open: false,
+    organizationId: undefined
+});
+
+export const upgradeRequiredDialog = {
+    get message() {
+        return state.message;
+    },
+    get open() {
+        return state.open;
+    },
+    set open(value: boolean) {
+        state.open = value;
+    },
+    get organizationId() {
+        return state.organizationId;
+    }
+};
+
+/**
+ * Handles a 426 Upgrade Required response by opening a confirmation dialog
+ * matching the legacy UI behavior: shows the backend message with
+ * "Upgrade Plan" and "Cancel" buttons.
+ *
+ * Returns true if the error was a 426 and was handled, false otherwise.
+ */
+export function handleUpgradeRequired(error: unknown, organizationId: string | undefined): boolean {
+    if (!isUpgradeRequired(error)) {
+        return false;
+    }
+
+    state.message = error.title || 'Please upgrade your plan to continue.';
+    state.organizationId = organizationId;
+    state.open = true;
+
+    return true;
+}
+
+/**
+ * Checks if a ProblemDetails error represents a 426 Upgrade Required response.
+ */
+export function isUpgradeRequired(error: unknown): error is ProblemDetails {
+    return error instanceof ProblemDetails && error.status === 426;
+}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/api.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/api.svelte.ts
index b3be2e34c2..70044f9bdf 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/api.svelte.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/api.svelte.ts
@@ -1,4 +1,5 @@
 import type { WebSocketMessageValue } from '$features/websockets/models';
+import type { BillingPlan, ChangePlanRequest, ChangePlanResult } from '$lib/generated/api';
 import type { QueryClient } from '@tanstack/svelte-query';
 
 import { accessToken } from '$features/auth/index.svelte';
@@ -22,12 +23,14 @@ export async function invalidateOrganizationQueries(queryClient: QueryClient, me
 
 export const queryKeys = {
     adminSearch: (params: GetAdminSearchOrganizationsParams) => [...queryKeys.list(params.mode), 'admin', { ...params }] as const,
+    changePlan: (id: string | undefined) => [...queryKeys.type, id, 'change-plan'] as const,
     deleteOrganization: (ids: string[] | undefined) => [...queryKeys.ids(ids), 'delete'] as const,
     id: (id: string | undefined, mode: 'stats' | undefined) => (mode ? ([...queryKeys.type, id, { mode }] as const) : ([...queryKeys.type, id] as const)),
     ids: (ids: string[] | undefined) => [...queryKeys.type, ...(ids ?? [])] as const,
     invoice: (id: string | undefined) => [...queryKeys.type, 'invoice', id] as const,
     invoices: (id: string | undefined) => [...queryKeys.type, id, 'invoices'] as const,
     list: (mode: 'stats' | undefined) => (mode ? ([...queryKeys.type, 'list', { mode }] as const) : ([...queryKeys.type, 'list'] as const)),
+    plans: (id: string | undefined) => [...queryKeys.type, id, 'plans'] as const,
     postOrganization: () => [...queryKeys.type, 'post-organization'] as const,
     setBonusOrganization: (id: string | undefined) => [...queryKeys.type, id, 'set-bonus'] as const,
     suspendOrganization: (id: string | undefined) => [...queryKeys.type, id, 'suspend'] as const,
@@ -41,6 +44,12 @@ export interface AddOrganizationUserRequest {
     };
 }
 
+export interface ChangePlanMutationRequest {
+    route: {
+        organizationId: string;
+    };
+}
+
 export interface DeleteOrganizationRequest {
     route: {
         ids: string[];
@@ -110,6 +119,12 @@ export interface GetOrganizationsRequest {
     params?: GetOrganizationsParams;
 }
 
+export interface GetPlansRequest {
+    route: {
+        organizationId: string;
+    };
+}
+
 export interface PatchOrganizationRequest {
     route: {
         id: string;
@@ -151,6 +166,31 @@ export function addOrganizationUser(request: AddOrganizationUserRequest) {
     }));
 }
 
+/**
+ * Mutation to change an organization's billing plan.
+ */
+export function changePlanMutation(request: ChangePlanMutationRequest) {
+    const queryClient = useQueryClient();
+
+    return createMutation<ChangePlanResult, ProblemDetails, ChangePlanRequest>(() => ({
+        enabled: () => !!accessToken.current && !!request.route.organizationId,
+        mutationFn: async (params: ChangePlanRequest) => {
+            const client = useFetchClient();
+            const response = await client.postJSON<ChangePlanResult>(`organizations/${request.route.organizationId}/change-plan`, params);
+
+            return response.data!;
+        },
+        mutationKey: queryKeys.changePlan(request.route.organizationId),
+        onSuccess: () => {
+            // Invalidate organization data to reflect new plan
+            // WebSocket OrganizationChanged also fires, but we invalidate here for immediate feedback
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.organizationId, undefined) });
+            queryClient.invalidateQueries({ queryKey: queryKeys.id(request.route.organizationId, 'stats') });
+            queryClient.invalidateQueries({ queryKey: queryKeys.list(undefined) });
+        }
+    }));
+}
+
 export function deleteOrganization(request: DeleteOrganizationRequest) {
     const queryClient = useQueryClient();
 
@@ -325,6 +365,24 @@ export function getOrganizationsQuery(request: GetOrganizationsRequest) {
     }));
 }
 
+/**
+ * Query to fetch available billing plans for an organization.
+ */
+export function getPlansQuery(request: GetPlansRequest) {
+    return createQuery<BillingPlan[], ProblemDetails>(() => ({
+        enabled: () => !!accessToken.current && !!request.route.organizationId,
+        queryFn: async ({ signal }: { signal: AbortSignal }) => {
+            const client = useFetchClient();
+            const response = await client.getJSON<BillingPlan[]>(`organizations/${request.route.organizationId}/plans`, {
+                signal
+            });
+
+            return response.data!;
+        },
+        queryKey: queryKeys.plans(request.route.organizationId)
+    }));
+}
+
 export function patchOrganization(request: PatchOrganizationRequest) {
     const queryClient = useQueryClient();
 
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/dialogs/change-plan-dialog.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/dialogs/change-plan-dialog.svelte
deleted file mode 100644
index 4a172c69db..0000000000
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/dialogs/change-plan-dialog.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-    import { P } from '$comp/typography';
-    import * as AlertDialog from '$comp/ui/alert-dialog';
-
-    interface Props {
-        open: boolean;
-    }
-
-    let { open = $bindable() }: Props = $props();
-
-    function onOk() {
-        open = false;
-    }
-</script>
-
-<AlertDialog.Root bind:open>
-    <AlertDialog.Content>
-        <AlertDialog.Header>
-            <AlertDialog.Title>Change Plan</AlertDialog.Title>
-            <AlertDialog.Description>
-                <P>We're still working on this feature in the new app. In the meantime, you can update your plan in our previous app.</P>
-            </AlertDialog.Description>
-        </AlertDialog.Header>
-        <AlertDialog.Footer>
-            <AlertDialog.Cancel>Close</AlertDialog.Cancel>
-            <AlertDialog.Action onclick={onOk}>OK</AlertDialog.Action>
-        </AlertDialog.Footer>
-    </AlertDialog.Content>
-</AlertDialog.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-options-dropdown-menu.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-options-dropdown-menu.svelte
index f1e9d3b55c..8e41e69c3d 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-options-dropdown-menu.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-options-dropdown-menu.svelte
@@ -3,6 +3,7 @@
     import { resolve } from '$app/paths';
     import Button from '$comp/ui/button/button.svelte';
     import * as DropdownMenu from '$comp/ui/dropdown-menu';
+    import { handleUpgradeRequired } from '$features/billing';
     import Reference from '@lucide/svelte/icons/link-2';
     import Settings from '@lucide/svelte/icons/settings';
     import Delete from '@lucide/svelte/icons/trash';
@@ -73,11 +74,10 @@
         }
 
         if (response.status === 426) {
-            toast.error(
-                'Promote to External is a premium feature used to promote an error stack to an external system. Please upgrade your plan to enable this feature.'
+            handleUpgradeRequired(
+                { status: 426, title: 'Promote to External is a premium feature. Please upgrade your plan to enable this feature.' } as never,
+                stack.organization_id
             );
-            //await confirmUpgradePlan(message, tack.organization_id);
-            //await promoteToExternal();
             return;
         }
 
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/generated/api.ts b/src/Exceptionless.Web/ClientApp/src/lib/generated/api.ts
index 856890de12..965391b22a 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/generated/api.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/generated/api.ts
@@ -38,6 +38,13 @@ export interface ChangePasswordModel {
   password: string;
 }
 
+export interface ChangePlanRequest {
+  plan_id: string;
+  stripe_token?: null | string;
+  last4?: null | string;
+  coupon_id?: null | string;
+}
+
 export interface ChangePlanResult {
   success: boolean;
   message?: null | string;
@@ -125,9 +132,9 @@ export interface NewProject {
 
 export interface NewToken {
   /** @pattern ^[a-fA-F0-9]{24}$ */
-  organization_id?: null | string;
+  organization_id: string;
   /** @pattern ^[a-fA-F0-9]{24}$ */
-  project_id?: null | string;
+  project_id: string;
   /** @pattern ^[a-fA-F0-9]{24}$ */
   default_project_id?: null | string;
   scopes: string[];
@@ -196,7 +203,7 @@ export interface PersistentEvent {
    */
   created_utc: string;
   /** Used to store primitive data type custom data values for searching the event. */
-  idx: Record<string, unknown>;
+  idx?: null | Record<string, unknown>;
   /** The event type (ie. error, log message, feature usage). Check KnownTypes for standard event types. */
   type?: null | string;
   /** The event source (ie. machine name, log name, feature name). */
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/generated/schemas.ts b/src/Exceptionless.Web/ClientApp/src/lib/generated/schemas.ts
index 66e65ceef1..3f66a51307 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/generated/schemas.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/generated/schemas.ts
@@ -61,6 +61,17 @@ export type ChangePasswordModelFormData = Infer<
   typeof ChangePasswordModelSchema
 >;
 
+export const ChangePlanRequestSchema = object({
+  plan_id: string().min(1, "Plan id is required"),
+  stripe_token: string()
+    .min(1, "Stripe token is required")
+    .nullable()
+    .optional(),
+  last4: string().min(1, '"last4" is required').nullable().optional(),
+  coupon_id: string().min(1, "Coupon id is required").nullable().optional(),
+});
+export type ChangePlanRequestFormData = Infer<typeof ChangePlanRequestSchema>;
+
 export const ChangePlanResultSchema = object({
   success: boolean(),
   message: string().min(1, "Message is required").nullable().optional(),
@@ -80,8 +91,8 @@ export const CountResultSchema = object({
   aggregations: record(
     string(),
     lazy(() => IAggregateSchema),
-  ).optional(),
-  data: record(string(), unknown()).nullable().optional(),
+  ),
+  data: record(string(), unknown()).nullable(),
 });
 export type CountResultFormData = Infer<typeof CountResultSchema>;
 
@@ -164,14 +175,10 @@ export type NewProjectFormData = Infer<typeof NewProjectSchema>;
 export const NewTokenSchema = object({
   organization_id: string()
     .length(24, "Organization id must be exactly 24 characters")
-    .regex(/^[a-fA-F0-9]{24}$/, "Organization id has invalid format")
-    .nullable()
-    .optional(),
+    .regex(/^[a-fA-F0-9]{24}$/, "Organization id has invalid format"),
   project_id: string()
     .length(24, "Project id must be exactly 24 characters")
-    .regex(/^[a-fA-F0-9]{24}$/, "Project id has invalid format")
-    .nullable()
-    .optional(),
+    .regex(/^[a-fA-F0-9]{24}$/, "Project id has invalid format"),
   default_project_id: string()
     .length(24, "Default project id must be exactly 24 characters")
     .regex(/^[a-fA-F0-9]{24}$/, "Default project id has invalid format")
@@ -243,7 +250,7 @@ export const PersistentEventSchema = object({
     .regex(/^[a-fA-F0-9]{24}$/, "Stack id has invalid format"),
   is_first_occurrence: boolean(),
   created_utc: iso.datetime(),
-  idx: record(string(), unknown()),
+  idx: record(string(), unknown()).nullable().optional(),
   type: string()
     .min(1, "Type is required")
     .max(100, "Type must be at most 100 characters")
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+layout.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+layout.svelte
index 66c40f2fdb..27a921ad54 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+layout.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+layout.svelte
@@ -8,6 +8,7 @@
     import { env } from '$env/dynamic/public';
     import { getIntercomTokenQuery } from '$features/auth/api.svelte';
     import { accessToken, gotoLogin } from '$features/auth/index.svelte';
+    import { UpgradeRequiredDialog } from '$features/billing';
     import { invalidatePersistentEventQueries } from '$features/events/api.svelte';
     import { buildIntercomBootOptions, IntercomShell } from '$features/intercom';
     import { shouldLoadIntercomOrganization } from '$features/intercom/config';
@@ -302,4 +303,6 @@
             {@render appShell(openChat)}
         {/snippet}
     </IntercomShell>
+
+    <UpgradeRequiredDialog />
 {/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/event/[eventId]/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/event/[eventId]/+page.svelte
index ece476ce75..96995a009c 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/event/[eventId]/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/event/[eventId]/+page.svelte
@@ -6,6 +6,7 @@
     import { page } from '$app/state';
     import * as FacetedFilter from '$comp/faceted-filter';
     import { H3 } from '$comp/typography';
+    import { handleUpgradeRequired } from '$features/billing';
     import EventsOverview from '$features/events/components/events-overview.svelte';
     import { organization } from '$features/organizations/context.svelte';
     import { watch } from 'runed';
@@ -27,8 +28,9 @@
     }
 
     async function handleError(problem: ProblemDetails) {
-        if (problem.status === 426) {
-            // TODO: Show a message to the user that they need to upgrade their subscription.
+        if (handleUpgradeRequired(problem, organization.current)) {
+            await goto(resolve('/(app)'));
+            return;
         }
 
         toast.error(`The event "${page.params.eventId}" could not be found.`);
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/billing/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/billing/+page.svelte
index d08fb3a2f1..102aedc7db 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/billing/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/billing/+page.svelte
@@ -9,8 +9,8 @@
     import { Skeleton } from '$comp/ui/skeleton';
     import * as Table from '$comp/ui/table';
     import { env } from '$env/dynamic/public';
+    import { ChangePlanDialog } from '$features/billing';
     import { getInvoicesQuery, getOrganizationQuery } from '$features/organizations/api.svelte';
-    import ChangePlanDialog from '$features/organizations/components/dialogs/change-plan-dialog.svelte';
     import { organization } from '$features/organizations/context.svelte';
     import GlobalUser from '$features/users/components/global-user.svelte';
     import CreditCard from '@lucide/svelte/icons/credit-card';
@@ -42,10 +42,18 @@
         schema: { changePlan: 'boolean' }
     });
 
+    let changePlanDialogOpen = $state(!!params.changePlan);
+
     function handleChangePlan() {
+        changePlanDialogOpen = true;
         params.changePlan = true;
     }
 
+    function handleChangePlanClose() {
+        changePlanDialogOpen = false;
+        params.changePlan = false;
+    }
+
     function handleOpenInvoice(invoiceId: string) {
         window.open(resolve('/(app)/payment/[id]', { id: invoiceId }), '_blank');
     }
@@ -157,6 +165,6 @@
     {/if}
 </div>
 
-{#if params.changePlan}
-    <ChangePlanDialog bind:open={params.changePlan} />
+{#if changePlanDialogOpen && organizationQuery.data}
+    <ChangePlanDialog onclose={handleChangePlanClose} organization={organizationQuery.data} />
 {/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/usage/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/usage/+page.svelte
index 1c3e69d641..cf7ebec96f 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/usage/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/usage/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { goto } from '$app/navigation';
     import { page } from '$app/state';
     import ErrorMessage from '$comp/error-message.svelte';
     import Number from '$comp/formatters/number.svelte';
@@ -28,10 +29,8 @@
     const remainingEventLimit = $derived(getRemainingEventLimit(organizationQuery.data));
     const nextBillingDate = $derived(getNextBillingDateUtc(organizationQuery.data));
 
-    function handleChangePlan() {
-        // Navigate to plan change page or open modal
-        // This is a placeholder for future implementation
-        console.log('Change plan clicked');
+    async function handleChangePlan() {
+        await goto(`/next/organization/${page.params.organizationId}/billing?changePlan=true`);
     }
 
     const chartConfig = {
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/users/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/users/+page.svelte
index 6298fd8dd5..fd563d0afc 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/users/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/users/+page.svelte
@@ -4,6 +4,7 @@
     import { H3, Muted } from '$comp/typography';
     import { Button } from '$comp/ui/button';
     import { Separator } from '$comp/ui/separator';
+    import { handleUpgradeRequired } from '$features/billing';
     import { addOrganizationUser } from '$features/organizations/api.svelte';
     import { organization } from '$features/organizations/context.svelte';
     import { DEFAULT_LIMIT } from '$features/shared/api/api.svelte';
@@ -79,6 +80,10 @@
             await addUserMutation.mutateAsync(email);
             toastId = toast.success('User invited successfully');
         } catch (error: unknown) {
+            if (handleUpgradeRequired(error, organizationId)) {
+                return;
+            }
+
             const message = error instanceof ProblemDetails ? error.title : 'Please try again.';
             toastId = toast.error(`An error occurred while trying to invite the user: ${message}`);
             throw error;
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/add/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/add/+page.svelte
index 55b4c54c1a..05b6d0200a 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/add/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/add/+page.svelte
@@ -7,6 +7,7 @@
     import * as Field from '$comp/ui/field';
     import { Input } from '$comp/ui/input';
     import { Spinner } from '$comp/ui/spinner';
+    import { handleUpgradeRequired } from '$features/billing';
     import { postOrganization } from '$features/organizations/api.svelte';
     import { organization } from '$features/organizations/context.svelte';
     import { useHideOrganizationNotifications } from '$features/organizations/hooks/use-hide-organization-notifications.svelte';
@@ -37,11 +38,16 @@
                     await goto(resolve('/(app)/organization/[organizationId]/manage', { organizationId: id }));
                     return null;
                 } catch (error: unknown) {
-                    toastId = toast.error('Error creating organization. Please try again.');
+                    if (handleUpgradeRequired(error, organization.current)) {
+                        return null;
+                    }
+
                     if (error instanceof ProblemDetails) {
+                        toastId = toast.error(error.title || 'Error creating organization. Please try again.');
                         return problemDetailsToFormErrors(error);
                     }
 
+                    toastId = toast.error('Error creating organization. Please try again.');
                     return { form: 'An unexpected error occurred, please try again.' };
                 }
             }
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/integrations/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/integrations/+page.svelte
index 816b9892e8..fbe035274b 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/integrations/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/integrations/+page.svelte
@@ -9,6 +9,7 @@
     import { Separator } from '$comp/ui/separator';
     import { env } from '$env/dynamic/public';
     import { slackOAuthLogin } from '$features/auth/index.svelte';
+    import { handleUpgradeRequired } from '$features/billing';
     import { organization } from '$features/organizations/context.svelte';
     import {
         deleteSlack,
@@ -88,6 +89,10 @@
             await newWebhook.mutateAsync(webhook);
             toastId = toast.success('Webhook added successfully');
         } catch (error) {
+            if (handleUpgradeRequired(error, organization.current)) {
+                return;
+            }
+
             toastId = toast.error('Error adding webhook. Please try again.');
             throw error;
         }
@@ -100,7 +105,10 @@
             const code = await slackOAuthLogin();
             await addSlackMutation.mutateAsync(code);
             toastId = toast.success('Successfully connected Slack integration.');
-        } catch {
+        } catch (error) {
+            if (handleUpgradeRequired(error, organization.current)) {
+                return;
+            }
             toastId = toast.error('Error connecting Slack integration. Please try again.');
         }
     }
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/usage/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/usage/+page.svelte
index 49f21d3ea3..7b5412d532 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/usage/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/usage/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { goto } from '$app/navigation';
     import { page } from '$app/state';
     import ErrorMessage from '$comp/error-message.svelte';
     import Number from '$comp/formatters/number.svelte';
@@ -41,10 +42,10 @@
         }
     });
 
-    function handleChangePlan() {
-        // Navigate to plan change page or open modal
-        // This is a placeholder for future implementation
-        console.log('Change plan clicked');
+    async function handleChangePlan() {
+        if (organization.current) {
+            await goto(`/next/organization/${organization.current}/billing?changePlan=true`);
+        }
     }
 
     const chartConfig = {
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/add/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/add/+page.svelte
index ea6d941063..959b32a23c 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/add/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/add/+page.svelte
@@ -9,6 +9,7 @@
     import * as Field from '$comp/ui/field';
     import { Input } from '$comp/ui/input';
     import { Spinner } from '$comp/ui/spinner';
+    import { handleUpgradeRequired } from '$features/billing';
     import { organization } from '$features/organizations/context.svelte';
     import { postProject } from '$features/projects/api.svelte';
     import { type NewProjectFormData, NewProjectSchema } from '$features/projects/schemas';
@@ -36,11 +37,16 @@
                     await goto(resolve('/(app)/project/[projectId]/configure', { projectId: id }) + '?redirect=true');
                     return null;
                 } catch (error: unknown) {
-                    toastId = toast.error('Error creating project. Please try again.');
+                    if (handleUpgradeRequired(error, organization.current)) {
+                        return null;
+                    }
+
                     if (error instanceof ProblemDetails) {
+                        toastId = toast.error(error.title || 'Error creating project. Please try again.');
                         return problemDetailsToFormErrors(error);
                     }
 
+                    toastId = toast.error('Error creating project. Please try again.');
                     return { form: 'An unexpected error occurred, please try again.' };
                 }
             }
diff --git a/src/Exceptionless.Web/Controllers/OrganizationController.cs b/src/Exceptionless.Web/Controllers/OrganizationController.cs
index 607cdb2381..da20aa9ee7 100644
--- a/src/Exceptionless.Web/Controllers/OrganizationController.cs
+++ b/src/Exceptionless.Web/Controllers/OrganizationController.cs
@@ -20,6 +20,7 @@
 using Foundatio.Repositories.Models;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.ModelBinding;
 using Stripe;
 using DataDictionary = Exceptionless.Core.Models.DataDictionary;
 using Invoice = Exceptionless.Web.Models.Invoice;
@@ -221,9 +222,10 @@ public async Task<ActionResult<Invoice>> GetInvoiceAsync(string id)
             id = "in_" + id;
 
         Stripe.Invoice? stripeInvoice = null;
+        var client = new StripeClient(_options.StripeOptions.StripeApiKey);
+
         try
         {
-            var client = new StripeClient(_options.StripeOptions.StripeApiKey);
             var invoiceService = new InvoiceService(client);
             stripeInvoice = await invoiceService.GetAsync(id);
         }
@@ -245,17 +247,46 @@ public async Task<ActionResult<Invoice>> GetInvoiceAsync(string id)
             OrganizationId = organization.Id,
             OrganizationName = organization.Name,
             Date = stripeInvoice.Created,
-            Paid = stripeInvoice.Paid,
+            Paid = String.Equals(stripeInvoice.Status, "paid", StringComparison.OrdinalIgnoreCase),
             Total = stripeInvoice.Total / 100.0m
         };
 
+        var priceService = new PriceService(client);
+        var priceCache = new Dictionary<string, Stripe.Price>(StringComparer.Ordinal);
         foreach (var line in stripeInvoice.Lines.Data)
         {
             var item = new InvoiceLineItem { Amount = line.Amount / 100.0m, Description = line.Description };
-            if (line.Plan is not null)
+
+            // In Stripe.net 51.x, PriceDetails.Price changed from string to ExpandableField<Price>;
+            // use .PriceId for the string ID. Fetch full Price object from Stripe to get nickname, interval, and amount.
+            var priceId = line.Pricing?.PriceDetails?.PriceId;
+            if (!String.IsNullOrEmpty(priceId))
             {
-                string planName = line.Plan.Nickname ?? _billingManager.GetBillingPlan(line.Plan.Id)?.Name ?? line.Plan.Id;
-                item.Description = $"Exceptionless - {planName} Plan ({(line.Plan.Amount / 100.0):c}/{line.Plan.Interval})";
+                try
+                {
+                    if (!priceCache.TryGetValue(priceId, out var price))
+                    {
+                        price = await priceService.GetAsync(priceId);
+                        priceCache[priceId] = price;
+                    }
+
+                    var billingPlan = _billingManager.GetBillingPlan(price.Id);
+                    if (billingPlan is null && !String.IsNullOrEmpty(price.LookupKey))
+                        billingPlan = _billingManager.GetBillingPlan(price.LookupKey);
+
+                    // Find the matching billing plan by checking multiple identifiers:
+                    // 1. Price ID (e.g., "EX_SMALL" if using custom IDs)
+                    // 2. Lookup key (alternative identifier set in Stripe)
+                    // 3. Nickname for display fallback
+                    string planName = billingPlan?.Name ?? price.Nickname ?? price.Id;
+                    string interval = price.Recurring?.Interval ?? "one-time";
+                    decimal unitAmountCents = line.Pricing?.UnitAmountDecimal ?? price.UnitAmount ?? 0;
+                    item.Description = $"Exceptionless - {planName} Plan ({unitAmountCents / 100.0m:c}/{interval})";
+                }
+                catch (StripeException ex)
+                {
+                    _logger.LogWarning(ex, "Failed to fetch price details for price: {PriceId}. Error: {ErrorMessage}", priceId, ex.Message);
+                }
             }
 
             var periodStart = line.Period.Start >= DateTime.MinValue ? line.Period.Start : stripeInvoice.PeriodStart;
@@ -264,7 +295,9 @@ public async Task<ActionResult<Invoice>> GetInvoiceAsync(string id)
             invoice.Items.Add(item);
         }
 
-        var coupon = stripeInvoice.Discount?.Coupon;
+        // In Stripe.net 50.x, Discount was replaced with Discounts collection
+        // and Discount.Coupon was replaced with Discount.Source.Coupon
+        var coupon = stripeInvoice.Discounts?.FirstOrDefault(d => d.Deleted is not true)?.Source?.Coupon;
         if (coupon is not null)
         {
             if (coupon.AmountOff.HasValue)
@@ -335,9 +368,9 @@ public async Task<ActionResult<IReadOnlyCollection<BillingPlan>>> GetPlansAsync(
         if (organization is null)
             return NotFound();
 
-        var plans = _plans.Plans;
-        if (!Request.IsGlobalAdmin())
-            plans = plans.Where(p => !p.IsHidden || p.Id == organization.PlanId).ToList();
+        var plans = Request.IsGlobalAdmin()
+            ? _plans.Plans.ToList()
+            : _plans.Plans.Where(p => !p.IsHidden || p.Id == organization.PlanId).ToList();
 
         var currentPlan = new BillingPlan
         {
@@ -353,10 +386,11 @@ public async Task<ActionResult<IReadOnlyCollection<BillingPlan>>> GetPlansAsync(
             HasPremiumFeatures = organization.HasPremiumFeatures
         };
 
-        if (plans.All(p => p.Id != organization.PlanId))
-            plans.Add(currentPlan);
+        int idx = plans.FindIndex(p => p.Id == organization.PlanId);
+        if (idx >= 0)
+            plans[idx] = currentPlan;
         else
-            plans[plans.FindIndex(p => p.Id == organization.PlanId)] = currentPlan;
+            plans.Add(currentPlan);
 
         return Ok(plans);
     }
@@ -366,18 +400,36 @@ public async Task<ActionResult<IReadOnlyCollection<BillingPlan>>> GetPlansAsync(
     /// </summary>
     /// <remarks>
     /// Upgrades or downgrades the organizations plan.
+    /// Accepts parameters via JSON body (preferred) or query string (legacy).
     /// </remarks>
     /// <param name="id">The identifier of the organization.</param>
-    /// <param name="planId">The identifier of the plan.</param>
-    /// <param name="stripeToken">The token returned from the stripe service.</param>
-    /// <param name="last4">The last four numbers of the card.</param>
-    /// <param name="couponId">The coupon id.</param>
+    /// <param name="model">The plan change request (JSON body).</param>
+    /// <param name="planId">Legacy query parameter: the plan identifier.</param>
+    /// <param name="stripeToken">Legacy query parameter: the Stripe token.</param>
+    /// <param name="last4">Legacy query parameter: last four digits of the card.</param>
+    /// <param name="couponId">Legacy query parameter: the coupon identifier.</param>
     /// <response code="404">The organization was not found.</response>
     [HttpPost]
-    [Consumes("application/json")]
     [Route("{id:objectid}/change-plan")]
-    public async Task<ActionResult<ChangePlanResult>> ChangePlanAsync(string id, string planId, string? stripeToken = null, string? last4 = null, string? couponId = null)
+    public async Task<ActionResult<ChangePlanResult>> ChangePlanAsync(
+        string id,
+        [FromBody(EmptyBodyBehavior = EmptyBodyBehavior.Allow)] ChangePlanRequest? model = null,
+        [FromQuery] string? planId = null,
+        [FromQuery] string? stripeToken = null,
+        [FromQuery] string? last4 = null,
+        [FromQuery] string? couponId = null)
     {
+        // Support legacy clients that send query parameters instead of a JSON body
+        model ??= new ChangePlanRequest { PlanId = planId ?? String.Empty };
+        if (String.IsNullOrEmpty(model.PlanId) && !String.IsNullOrEmpty(planId))
+            model.PlanId = planId;
+        if (String.IsNullOrEmpty(model.StripeToken) && !String.IsNullOrEmpty(stripeToken))
+            model.StripeToken = stripeToken;
+        if (String.IsNullOrEmpty(model.Last4) && !String.IsNullOrEmpty(last4))
+            model.Last4 = last4;
+        if (String.IsNullOrEmpty(model.CouponId) && !String.IsNullOrEmpty(couponId))
+            model.CouponId = couponId;
+
         if (String.IsNullOrEmpty(id) || !CanAccessOrganization(id))
             return NotFound();
 
@@ -385,15 +437,18 @@ public async Task<ActionResult<ChangePlanResult>> ChangePlanAsync(string id, str
             .Identity(CurrentUser.EmailAddress).Property("User", CurrentUser).SetHttpContext(HttpContext));
 
         if (!_options.StripeOptions.EnableBilling)
-            return Ok(ChangePlanResult.FailWithMessage("Plans cannot be changed while billing is disabled."));
+            return NotFound();
 
         var organization = await GetModelAsync(id, false);
         if (organization is null)
-            return Ok(ChangePlanResult.FailWithMessage("Invalid OrganizationId."));
+            return NotFound();
 
-        var plan = _billingManager.GetBillingPlan(planId);
+        var plan = _billingManager.GetBillingPlan(model.PlanId);
         if (plan is null)
-            return Ok(ChangePlanResult.FailWithMessage("Invalid PlanId."));
+        {
+            ModelState.AddModelError(nameof(model.PlanId), "Invalid PlanId.");
+            return ValidationProblem(ModelState);
+        }
 
         if (String.Equals(organization.PlanId, plan.Id) && String.Equals(_plans.FreePlan.Id, plan.Id))
             return Ok(ChangePlanResult.SuccessWithMessage("Your plan was not changed as you were already on the free plan."));
@@ -409,6 +464,10 @@ public async Task<ActionResult<ChangePlanResult>> ChangePlanAsync(string id, str
         var client = new StripeClient(_options.StripeOptions.StripeApiKey);
         var customerService = new CustomerService(client);
         var subscriptionService = new SubscriptionService(client);
+        var paymentMethodService = new PaymentMethodService(client);
+
+        // Detect if stripeToken is a legacy token (tok_) or modern PaymentMethod (pm_)
+        bool isPaymentMethod = model.StripeToken?.StartsWith("pm_", StringComparison.Ordinal) == true;
 
         try
         {
@@ -427,28 +486,51 @@ public async Task<ActionResult<ChangePlanResult>> ChangePlanAsync(string id, str
             }
             else if (String.IsNullOrEmpty(organization.StripeCustomerId))
             {
-                if (String.IsNullOrEmpty(stripeToken))
+                if (String.IsNullOrEmpty(model.StripeToken))
                     return Ok(ChangePlanResult.FailWithMessage("Billing information was not set."));
 
                 organization.SubscribeDate = _timeProvider.GetUtcNow().UtcDateTime;
 
                 var createCustomer = new CustomerCreateOptions
                 {
-                    Source = stripeToken,
-                    Plan = planId,
                     Description = organization.Name,
                     Email = CurrentUser.EmailAddress
                 };
 
-                if (!String.IsNullOrWhiteSpace(couponId))
-                    createCustomer.Coupon = couponId;
+                if (isPaymentMethod)
+                {
+                    createCustomer.PaymentMethod = model.StripeToken;
+                    createCustomer.InvoiceSettings = new CustomerInvoiceSettingsOptions
+                    {
+                        DefaultPaymentMethod = model.StripeToken
+                    };
+                }
+                else
+                {
+                    createCustomer.Source = model.StripeToken;
+                }
 
                 var customer = await customerService.CreateAsync(createCustomer);
 
+                // Create subscription separately (Plan on CustomerCreateOptions is deprecated)
+                var subscriptionOptions = new SubscriptionCreateOptions
+                {
+                    Customer = customer.Id,
+                    Items = [new SubscriptionItemOptions { Price = model.PlanId }]
+                };
+
+                if (isPaymentMethod)
+                    subscriptionOptions.DefaultPaymentMethod = model.StripeToken;
+
+                if (!String.IsNullOrWhiteSpace(model.CouponId))
+                    subscriptionOptions.Discounts = [new SubscriptionDiscountOptions { Coupon = model.CouponId }];
+
+                await subscriptionService.CreateAsync(subscriptionOptions);
+
                 organization.BillingStatus = BillingStatus.Active;
                 organization.RemoveSuspension();
                 organization.StripeCustomerId = customer.Id;
-                organization.CardLast4 = last4;
+                organization.CardLast4 = model.Last4;
             }
             else
             {
@@ -460,29 +542,59 @@ public async Task<ActionResult<ChangePlanResult>> ChangePlanAsync(string id, str
                 if (!Request.IsGlobalAdmin())
                     customerUpdateOptions.Email = CurrentUser.EmailAddress;
 
-                if (!String.IsNullOrEmpty(stripeToken))
+                // Start subscription list fetch immediately — it's independent of customer/payment ops
+                var listSubscriptionsTask = subscriptionService.ListAsync(new SubscriptionListOptions { Customer = organization.StripeCustomerId });
+
+                if (!String.IsNullOrEmpty(model.StripeToken))
                 {
-                    customerUpdateOptions.Source = stripeToken;
+                    if (isPaymentMethod)
+                    {
+                        // Attach runs in parallel with listSubscriptionsTask
+                        await paymentMethodService.AttachAsync(model.StripeToken, new PaymentMethodAttachOptions
+                        {
+                            Customer = organization.StripeCustomerId
+                        });
+                        customerUpdateOptions.InvoiceSettings = new CustomerInvoiceSettingsOptions
+                        {
+                            DefaultPaymentMethod = model.StripeToken
+                        };
+                    }
+                    else
+                    {
+                        customerUpdateOptions.Source = model.StripeToken;
+                    }
                     cardUpdated = true;
                 }
 
-                await customerService.UpdateAsync(organization.StripeCustomerId, customerUpdateOptions);
+                // Customer update and subscription list are independent — run in parallel
+                await Task.WhenAll(
+                    customerService.UpdateAsync(organization.StripeCustomerId, customerUpdateOptions),
+                    listSubscriptionsTask
+                );
 
-                var subscriptionList = await subscriptionService.ListAsync(new SubscriptionListOptions { Customer = organization.StripeCustomerId });
+                var subscriptionList = await listSubscriptionsTask;
                 var subscription = subscriptionList.FirstOrDefault(s => !s.CanceledAt.HasValue);
-                if (subscription is not null)
+                if (subscription is not null && subscription.Items.Data.Count > 0)
                 {
-                    update.Items.Add(new SubscriptionItemOptions { Id = subscription.Items.Data[0].Id, Plan = planId });
+                    update.Items.Add(new SubscriptionItemOptions { Id = subscription.Items.Data[0].Id, Price = model.PlanId });
+                    if (!String.IsNullOrWhiteSpace(model.CouponId))
+                        update.Discounts = [new SubscriptionDiscountOptions { Coupon = model.CouponId }];
                     await subscriptionService.UpdateAsync(subscription.Id, update);
                 }
+                else if (subscription is not null)
+                {
+                    _logger.LogWarning("Subscription {SubscriptionId} has no items for organization {OrganizationId}", subscription.Id, id);
+                }
                 else
                 {
-                    create.Items.Add(new SubscriptionItemOptions { Plan = planId });
+                    create.Items.Add(new SubscriptionItemOptions { Price = model.PlanId });
+                    if (!String.IsNullOrWhiteSpace(model.CouponId))
+                        create.Discounts = [new SubscriptionDiscountOptions { Coupon = model.CouponId }];
                     await subscriptionService.CreateAsync(create);
                 }
 
                 if (cardUpdated)
-                    organization.CardLast4 = last4;
+                    organization.CardLast4 = model.Last4;
 
                 organization.BillingStatus = BillingStatus.Active;
                 organization.RemoveSuspension();
@@ -492,11 +604,16 @@ public async Task<ActionResult<ChangePlanResult>> ChangePlanAsync(string id, str
             await _repository.SaveAsync(organization, o => o.Cache().Originals());
             await _messagePublisher.PublishAsync(new PlanChanged { OrganizationId = organization.Id });
         }
-        catch (Exception ex)
+        catch (StripeException ex)
         {
             _logger.LogCritical(ex, "An error occurred while trying to update your billing plan: {Message}", ex.Message);
             return Ok(ChangePlanResult.FailWithMessage(ex.Message));
         }
+        catch (Exception ex)
+        {
+            _logger.LogCritical(ex, "An unexpected error occurred while trying to update your billing plan: {Message}", ex.Message);
+            return Ok(ChangePlanResult.FailWithMessage("An error occurred while changing plans. Please try again."));
+        }
 
         return Ok(new ChangePlanResult { Success = true });
     }
diff --git a/src/Exceptionless.Web/Exceptionless.Web.csproj b/src/Exceptionless.Web/Exceptionless.Web.csproj
index 13be2d395d..d6e8b89661 100644
--- a/src/Exceptionless.Web/Exceptionless.Web.csproj
+++ b/src/Exceptionless.Web/Exceptionless.Web.csproj
@@ -86,4 +86,4 @@
     </ItemGroup>
   </Target>
 
-</Project>
+</Project>
\ No newline at end of file
diff --git a/src/Exceptionless.Web/Mapping/InvoiceMapper.cs b/src/Exceptionless.Web/Mapping/InvoiceMapper.cs
index 82d278779f..c3c653d64d 100644
--- a/src/Exceptionless.Web/Mapping/InvoiceMapper.cs
+++ b/src/Exceptionless.Web/Mapping/InvoiceMapper.cs
@@ -13,7 +13,7 @@ public InvoiceGridModel MapToInvoiceGridModel(Stripe.Invoice source)
         {
             Id = source.Id[3..], // Strip "in_" prefix
             Date = source.Created,
-            Paid = source.Paid
+            Paid = String.Equals(source.Status, "paid", StringComparison.OrdinalIgnoreCase)
         };
 
     public List<InvoiceGridModel> MapToInvoiceGridModels(IEnumerable<Stripe.Invoice> source)
diff --git a/src/Exceptionless.Web/Models/ChangePlanRequest.cs b/src/Exceptionless.Web/Models/ChangePlanRequest.cs
new file mode 100644
index 0000000000..6c5f92e086
--- /dev/null
+++ b/src/Exceptionless.Web/Models/ChangePlanRequest.cs
@@ -0,0 +1,15 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Exceptionless.Web.Models;
+
+public class ChangePlanRequest
+{
+    [Required]
+    public required string PlanId { get; set; }
+
+    public string? StripeToken { get; set; }
+
+    public string? Last4 { get; set; }
+
+    public string? CouponId { get; set; }
+}
diff --git a/src/Exceptionless.Web/Program.cs b/src/Exceptionless.Web/Program.cs
index 88bb1f0dad..db9dd79749 100644
--- a/src/Exceptionless.Web/Program.cs
+++ b/src/Exceptionless.Web/Program.cs
@@ -44,6 +44,7 @@ public static IHostBuilder CreateHostBuilder(string[] args)
             .SetBasePath(Directory.GetCurrentDirectory())
             .AddYamlFile("appsettings.yml", optional: true, reloadOnChange: true)
             .AddYamlFile($"appsettings.{environment}.yml", optional: true, reloadOnChange: true)
+            .AddYamlFile($"appsettings.Local.yml", optional: true, reloadOnChange: true)
             .AddCustomEnvironmentVariables()
             .AddCommandLine(args)
             .Build();
diff --git a/tests/Exceptionless.Tests/Controllers/Data/openapi.json b/tests/Exceptionless.Tests/Controllers/Data/openapi.json
index 086c0a5990..258f1635d1 100644
--- a/tests/Exceptionless.Tests/Controllers/Data/openapi.json
+++ b/tests/Exceptionless.Tests/Controllers/Data/openapi.json
@@ -16,7 +16,7 @@
   },
   "servers": [
     {
-      "url": "http://localhost/"
+      "url": "http://localhost:5200/"
     }
   ],
   "paths": {
@@ -4317,7 +4317,7 @@
           "Organization"
         ],
         "summary": "Change plan",
-        "description": "Upgrades or downgrades the organizations plan.",
+        "description": "Upgrades or downgrades the organizations plan.\nAccepts parameters via JSON body (preferred) or query string (legacy).",
         "parameters": [
           {
             "name": "id",
@@ -4332,7 +4332,7 @@
           {
             "name": "planId",
             "in": "query",
-            "description": "The identifier of the plan.",
+            "description": "Legacy query parameter: the plan identifier.",
             "schema": {
               "type": "string"
             }
@@ -4340,7 +4340,7 @@
           {
             "name": "stripeToken",
             "in": "query",
-            "description": "The token returned from the stripe service.",
+            "description": "Legacy query parameter: the Stripe token.",
             "schema": {
               "type": "string"
             }
@@ -4348,7 +4348,7 @@
           {
             "name": "last4",
             "in": "query",
-            "description": "The last four numbers of the card.",
+            "description": "Legacy query parameter: last four digits of the card.",
             "schema": {
               "type": "string"
             }
@@ -4356,12 +4356,77 @@
           {
             "name": "couponId",
             "in": "query",
-            "description": "The coupon id.",
+            "description": "Legacy query parameter: the coupon identifier.",
             "schema": {
               "type": "string"
             }
           }
         ],
+        "requestBody": {
+          "description": "The plan change request (JSON body).",
+          "content": {
+            "text/plain": {
+              "schema": {
+                "oneOf": [
+                  {
+                    "type": "null"
+                  },
+                  {
+                    "$ref": "#/components/schemas/ChangePlanRequest"
+                  }
+                ]
+              }
+            },
+            "application/octet-stream": {
+              "schema": {
+                "oneOf": [
+                  {
+                    "type": "null"
+                  },
+                  {
+                    "$ref": "#/components/schemas/ChangePlanRequest"
+                  }
+                ]
+              }
+            },
+            "application/json": {
+              "schema": {
+                "oneOf": [
+                  {
+                    "type": "null"
+                  },
+                  {
+                    "$ref": "#/components/schemas/ChangePlanRequest"
+                  }
+                ]
+              }
+            },
+            "text/json": {
+              "schema": {
+                "oneOf": [
+                  {
+                    "type": "null"
+                  },
+                  {
+                    "$ref": "#/components/schemas/ChangePlanRequest"
+                  }
+                ]
+              }
+            },
+            "application/*+json": {
+              "schema": {
+                "oneOf": [
+                  {
+                    "type": "null"
+                  },
+                  {
+                    "$ref": "#/components/schemas/ChangePlanRequest"
+                  }
+                ]
+              }
+            }
+          }
+        },
         "responses": {
           "200": {
             "description": "OK",
@@ -7060,6 +7125,35 @@
           }
         }
       },
+      "ChangePlanRequest": {
+        "required": [
+          "plan_id"
+        ],
+        "type": "object",
+        "properties": {
+          "plan_id": {
+            "type": "string"
+          },
+          "stripe_token": {
+            "type": [
+              "null",
+              "string"
+            ]
+          },
+          "last4": {
+            "type": [
+              "null",
+              "string"
+            ]
+          },
+          "coupon_id": {
+            "type": [
+              "null",
+              "string"
+            ]
+          }
+        }
+      },
       "ChangePlanResult": {
         "required": [
           "success"
diff --git a/tests/Exceptionless.Tests/Controllers/TokenControllerTests.cs b/tests/Exceptionless.Tests/Controllers/TokenControllerTests.cs
index 0cac5bf1fe..bf63b43d84 100644
--- a/tests/Exceptionless.Tests/Controllers/TokenControllerTests.cs
+++ b/tests/Exceptionless.Tests/Controllers/TokenControllerTests.cs
@@ -367,8 +367,7 @@ public async Task PostAsync_WithProjectFromUnauthorizedOrganization_ReturnsValid
     [Fact]
     public async Task PostAsync_WithMismatchedOrgAndProjectId_UsesProjectOrganization()
     {
-        // Arrange - Global admin creates token with wrong org but valid project
-        // The system should overwrite OrganizationId to match the project's actual org
+        // Arrange
         var newToken = new NewToken
         {
             OrganizationId = SampleDataService.FREE_ORG_ID,
@@ -385,7 +384,7 @@ public async Task PostAsync_WithMismatchedOrgAndProjectId_UsesProjectOrganizatio
             .StatusCodeShouldBeCreated()
         );
 
-        // Assert - OrganizationId should be overwritten to match the project's org
+        // Assert
         Assert.NotNull(viewToken);
         Assert.Equal(SampleDataService.TEST_ORG_ID, viewToken.OrganizationId);
         Assert.Equal(SampleDataService.TEST_PROJECT_ID, viewToken.ProjectId);
diff --git a/tests/Exceptionless.Tests/Mapping/InvoiceMapperTests.cs b/tests/Exceptionless.Tests/Mapping/InvoiceMapperTests.cs
index b5822934b6..fb1b1dd46d 100644
--- a/tests/Exceptionless.Tests/Mapping/InvoiceMapperTests.cs
+++ b/tests/Exceptionless.Tests/Mapping/InvoiceMapperTests.cs
@@ -20,7 +20,7 @@ public void MapToInvoiceGridModel_WithValidInvoice_StripsIdPrefix()
         {
             Id = "in_abc123",
             Created = new DateTime(2025, 1, 15, 12, 0, 0, DateTimeKind.Utc),
-            Paid = true
+            Status = "paid"
         };
 
         // Act
@@ -39,7 +39,7 @@ public void MapToInvoiceGridModel_WithValidInvoice_MapsDateAndPaid()
         {
             Id = "in_5f8a3b2c1d4e",
             Created = expectedDate,
-            Paid = true
+            Status = "paid"
         };
 
         // Act
@@ -58,7 +58,7 @@ public void MapToInvoiceGridModel_WithUnpaidInvoice_PaidIsFalse()
         {
             Id = "in_unpaid",
             Created = DateTime.UtcNow,
-            Paid = false
+            Status = "open"
         };
 
         // Act
@@ -74,9 +74,9 @@ public void MapToInvoiceGridModels_WithMultipleInvoices_MapsAll()
         // Arrange
         var invoices = new List<Stripe.Invoice>
         {
-            new() { Id = "in_invoice1", Created = DateTime.UtcNow, Paid = true },
-            new() { Id = "in_invoice2", Created = DateTime.UtcNow, Paid = false },
-            new() { Id = "in_invoice3", Created = DateTime.UtcNow, Paid = true }
+            new() { Id = "in_invoice1", Created = DateTime.UtcNow, Status = "paid" },
+            new() { Id = "in_invoice2", Created = DateTime.UtcNow, Status = "open" },
+            new() { Id = "in_invoice3", Created = DateTime.UtcNow, Status = "paid" }
         };
 
         // Act
diff --git a/tests/http/organizations.http b/tests/http/organizations.http
index ff060f944f..46697f3c5f 100644
--- a/tests/http/organizations.http
+++ b/tests/http/organizations.http
@@ -44,11 +44,17 @@ Content-Type: application/json
 ###
 @organizationId = {{newOrganization.response.body.$.id}}
 
-### Change Plan
-POST {{apiUrl}}/organizations/{{organizationId}}/change-plan?planId=EX_FREE
+### Change Plan (JSON body - preferred)
+POST {{apiUrl}}/organizations/{{organizationId}}/change-plan
 Authorization: Bearer {{token}}
 Content-Type: application/json
 
+{ "plan_id": "EX_FREE" }
+
+### Change Plan (query params - legacy)
+POST {{apiUrl}}/organizations/{{organizationId}}/change-plan?planId=EX_FREE
+Authorization: Bearer {{token}}
+
 ### Add User
 POST {{apiUrl}}/organizations/{{organizationId}}/users/test2@localhost
 Authorization: Bearer {{token}}
@@ -87,4 +93,4 @@ Content-Type: application/json
 ### Unsuspend
 DELETE {{apiUrl}}/organizations/{{organizationId}}/suspend
 Authorization: Bearer {{token}}
-Content-Type: application/json
\ No newline at end of file
+Content-Type: application/json