diff --git a/web/src/routes/console/billing/+page.svelte b/web/src/routes/console/billing/+page.svelte
index 5130976a..5e8d40d5 100644
--- a/web/src/routes/console/billing/+page.svelte
+++ b/web/src/routes/console/billing/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { goto } from '$app/navigation';
-	import { onMount } from 'svelte';
+	import { page } from '$app/state';
+	import { onMount, onDestroy } from 'svelte';
 
 	interface PlanLimits {
 		workspaces: number;
@@ -15,24 +16,122 @@
 	let isPro = $derived(plan === 'pro');
 	let limits = $state<{ free: PlanLimits; pro: PlanLimits } | null>(null);
 
+	// Upgrade-confirmation state. After Stripe Checkout redirects back with
+	// ?checkout=success, pad-cloud's webhook handler needs a moment to land
+	// at pad's /admin/plan endpoint before the user's plan flips to "pro".
+	// Poll authStore.load() on a short interval until the plan updates or we
+	// hit the timeout — a proxy for "something is wrong, please refresh".
+	let upgradeStatus = $state<'idle' | 'checking' | 'confirmed' | 'timeout'>('idle');
+	let pollTimer: ReturnType<typeof setInterval> | null = null;
+	let pollStartedAt = 0;
+	// Guards every post-await state write: an authStore.load() or plan-limits
+	// fetch in flight when the user navigates away would otherwise continue
+	// on, mutate state, or even install a fresh interval after this component
+	// has been destroyed. Checked after every await.
+	let destroyed = false;
+	const POLL_INTERVAL_MS = 2000;
+	const POLL_TIMEOUT_MS = 30000;
+
 	function formatLimit(value: number | undefined): string {
 		if (value === undefined) return '...';
 		if (value === -1) return 'Unlimited';
 		return value.toLocaleString();
 	}
 
-	onMount(async () => {
+	function stopPolling() {
+		if (pollTimer !== null) {
+			clearInterval(pollTimer);
+			pollTimer = null;
+		}
+	}
+
+	// Remove ?checkout=success so a page reload after the banner is dismissed
+	// does not re-enter the polling branch. replaceState keeps the back button
+	// pointing at the pre-checkout page rather than an artifact URL.
+	function clearCheckoutQuery() {
+		if (typeof window === 'undefined') return;
+		const url = new URL(window.location.href);
+		if (url.searchParams.has('checkout')) {
+			url.searchParams.delete('checkout');
+			history.replaceState(history.state, '', url.toString());
+		}
+	}
+
+	async function pollForUpgrade() {
+		try {
+			await authStore.load();
+		} catch {
+			// Session fetch failed this tick; another poll will retry. No state change.
+		}
+		if (destroyed) {
+			stopPolling();
+			return;
+		}
+		if (authStore.user?.plan === 'pro') {
+			upgradeStatus = 'confirmed';
+			stopPolling();
+			clearCheckoutQuery();
+			return;
+		}
+		if (Date.now() - pollStartedAt >= POLL_TIMEOUT_MS) {
+			upgradeStatus = 'timeout';
+			stopPolling();
+		}
+	}
+
+	// Bridge the async window between Stripe redirect and pad-cloud webhook.
+	// Kicked off from onMount in parallel with plan-limits fetch so a slow
+	// /plan-limits request does not delay the user's confirmation banner.
+	async function startUpgradeConfirmation() {
+		try {
+			await authStore.load();
+		} catch {
+			/* polling branch below retries */
+		}
+		if (destroyed) return;
+		if (authStore.user?.plan === 'pro') {
+			upgradeStatus = 'confirmed';
+			clearCheckoutQuery();
+			return;
+		}
+		upgradeStatus = 'checking';
+		pollStartedAt = Date.now();
+		pollTimer = setInterval(pollForUpgrade, POLL_INTERVAL_MS);
+	}
+
+	async function loadPlanLimits() {
+		try {
+			const resp = await fetch('/api/v1/plan-limits', { credentials: 'same-origin' });
+			if (destroyed) return;
+			if (resp.ok) {
+				const body = await resp.json();
+				if (destroyed) return;
+				limits = body;
+			}
+		} catch {
+			/* use fallback rendering */
+		}
+	}
+
+	onMount(() => {
 		if (!authStore.cloudMode) {
 			goto('/console', { replaceState: true });
 			return;
 		}
 
-		try {
-			const resp = await fetch('/api/v1/plan-limits', { credentials: 'same-origin' });
-			if (resp.ok) limits = await resp.json();
-		} catch {
-			/* use fallback rendering */
+		// Kick off the two independent async tasks in parallel. Neither is
+		// awaited here — onMount returns immediately so Svelte can run the
+		// onDestroy cleanup path synchronously if the user navigates away
+		// before either task resolves (the `destroyed` guard handles that).
+		if (page.url.searchParams.get('checkout') === 'success') {
+			startUpgradeConfirmation();
 		}
+		loadPlanLimits();
+	});
+
+	onDestroy(() => {
+		destroyed = true;
+		stopPolling();
 	});
 </script>
 
@@ -43,6 +142,22 @@
 <div class="billing-page">
 	<h1 class="page-title">Billing</h1>
 
+	{#if upgradeStatus === 'checking'}
+		<div class="upgrade-banner checking" role="status" aria-live="polite">
+			<span class="spinner" aria-hidden="true"></span>
+			<span>Confirming your upgrade…</span>
+		</div>
+	{:else if upgradeStatus === 'confirmed' && isPro}
+		<div class="upgrade-banner success" role="status" aria-live="polite">
+			<span class="check-icon" aria-hidden="true">✓</span>
+			<span>Upgrade confirmed — welcome to Pro!</span>
+		</div>
+	{:else if upgradeStatus === 'timeout'}
+		<div class="upgrade-banner warning" role="status" aria-live="polite">
+			<span>Your payment went through but we haven't confirmed your upgrade yet. Try refreshing in a moment; if your plan still shows Free, contact <a href="mailto:support@getpad.dev">support@getpad.dev</a>.</span>
+		</div>
+	{/if}
+
 	<section class="card">
 		<h2 class="card-title">Current Plan</h2>
 		<div class="card-body">
@@ -232,4 +347,73 @@
 		font-size: 0.85rem;
 		font-weight: 500;
 	}
+
+	.upgrade-banner {
+		display: flex;
+		align-items: center;
+		gap: var(--space-3);
+		padding: var(--space-3) var(--space-4);
+		border-radius: var(--radius);
+		font-size: 0.9rem;
+		line-height: 1.4;
+		border: 1px solid transparent;
+	}
+
+	.upgrade-banner.checking {
+		background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
+		border-color: color-mix(in srgb, var(--accent-blue) 30%, transparent);
+		color: var(--text-primary);
+	}
+
+	.upgrade-banner.success {
+		background: color-mix(in srgb, var(--accent-green) 12%, transparent);
+		border-color: color-mix(in srgb, var(--accent-green) 35%, transparent);
+		color: var(--text-primary);
+	}
+
+	.upgrade-banner.warning {
+		background: color-mix(in srgb, var(--accent-yellow, #eab308) 12%, transparent);
+		border-color: color-mix(in srgb, var(--accent-yellow, #eab308) 35%, transparent);
+		color: var(--text-primary);
+	}
+
+	.upgrade-banner a {
+		color: var(--accent-blue);
+		text-decoration: underline;
+	}
+
+	.spinner {
+		width: 14px;
+		height: 14px;
+		border: 2px solid color-mix(in srgb, var(--accent-blue) 30%, transparent);
+		border-top-color: var(--accent-blue);
+		border-radius: 50%;
+		animation: spin 0.8s linear infinite;
+		flex-shrink: 0;
+	}
+
+	.check-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 18px;
+		height: 18px;
+		border-radius: 50%;
+		background: var(--accent-green);
+		color: #fff;
+		font-size: 0.7rem;
+		font-weight: 700;
+		flex-shrink: 0;
+	}
+
+	@keyframes spin {
+		to { transform: rotate(360deg); }
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.spinner {
+			animation: none;
+			border-top-color: transparent;
+		}
+	}
 </style>