diff --git a/apps/mana/apps/web/src/lib/components/RecoveryCodeUnlockModal.svelte b/apps/mana/apps/web/src/lib/components/RecoveryCodeUnlockModal.svelte
new file mode 100644
index 000000000..a492e2343
--- /dev/null
+++ b/apps/mana/apps/web/src/lib/components/RecoveryCodeUnlockModal.svelte
@@ -0,0 +1,236 @@
+<!--
+	Recovery Code Unlock Modal — Phase 9.
+
+	Mounts when the vault client is in `awaiting-recovery-code` state
+	(server returned a recovery blob from GET /key after the user
+	enabled zero-knowledge mode). Collects the user's recovery code,
+	calls vaultClient.unlockWithRecoveryCode(), dismisses on success.
+
+	Failure modes:
+	- RecoveryCodeFormatError → format hint inline
+	- Generic unwrap failure → "wrong code, try again" (we don't
+	  distinguish wrong-code vs corrupted-blob; the recovery module
+	  intentionally fails uniformly so an attacker gets no signal)
+
+	The modal is non-dismissable — there's no "cancel" path because
+	without the recovery code the app can't read encrypted data and
+	would just sit in a broken state. The user can sign out from the
+	header instead.
+-->
+<script lang="ts">
+	import { getVaultClient, RecoveryCodeFormatError } from '$lib/data/crypto';
+
+	interface Props {
+		/** Called once the unlock has succeeded so the parent can hide
+		 *  the modal. */
+		onUnlocked: () => void;
+	}
+
+	let { onUnlocked }: Props = $props();
+
+	const vaultClient = getVaultClient();
+
+	let codeInput = $state('');
+	let error = $state<string | null>(null);
+	let busy = $state(false);
+
+	async function handleSubmit(e?: Event) {
+		e?.preventDefault();
+		if (!codeInput.trim() || busy) return;
+		error = null;
+		busy = true;
+		try {
+			const result = await vaultClient.unlockWithRecoveryCode(codeInput);
+			if (result.status === 'unlocked') {
+				codeInput = '';
+				onUnlocked();
+				return;
+			}
+			// Should not happen — unlockWithRecoveryCode either throws or
+			// returns 'unlocked'. Defensive fallback.
+			error = 'Unbekannter Fehler beim Entsperren.';
+		} catch (e) {
+			if (e instanceof RecoveryCodeFormatError) {
+				error =
+					'Der Code hat das falsche Format. Erwartet: 16 Gruppen à 4 Hex-Zeichen, ' +
+					'getrennt durch Bindestriche (z.B. 1A2B-3C4D-...).';
+			} else {
+				// Either wrong code or corrupted blob — surface uniformly so
+				// an attacker can't distinguish the two cases.
+				error = 'Recovery-Code falsch. Bitte prüfe deine Eingabe und versuche es erneut.';
+			}
+		} finally {
+			busy = false;
+		}
+	}
+</script>
+
+<div class="modal-backdrop">
+	<div class="modal" role="dialog" aria-modal="true" aria-labelledby="recovery-modal-title">
+		<header>
+			<h2 id="recovery-modal-title">🔑 Recovery-Code erforderlich</h2>
+		</header>
+
+		<p>
+			Du hast den Zero-Knowledge-Modus aktiviert. Damit dein verschlüsselter Inhalt freigegeben
+			werden kann, brauchst du deinen Recovery-Code — den Code, den du beim Setup gespeichert hast.
+		</p>
+
+		<form onsubmit={handleSubmit}>
+			<!-- svelte-ignore a11y_autofocus -->
+			<input
+				class="recovery-input"
+				type="text"
+				bind:value={codeInput}
+				placeholder="1A2B-3C4D-5E6F-..."
+				autocomplete="off"
+				spellcheck="false"
+				autofocus
+				disabled={busy}
+			/>
+
+			{#if error}
+				<div class="error">⚠️ {error}</div>
+			{/if}
+
+			<div class="actions">
+				<button class="btn btn-primary" type="submit" disabled={busy || !codeInput.trim()}>
+					{busy ? 'Entsperre …' : 'Vault entsperren'}
+				</button>
+			</div>
+		</form>
+
+		<p class="help">
+			Du hast keinen Code mehr? Dann sind deine verschlüsselten Daten unwiderruflich verloren —
+			melde dich ab und lege ein neues Konto an, oder kontaktiere den Support für Hilfe beim
+			Account-Reset (deine Daten bleiben dabei verloren).
+		</p>
+	</div>
+</div>
+
+<style>
+	.modal-backdrop {
+		position: fixed;
+		inset: 0;
+		z-index: 9999;
+		background: rgba(0, 0, 0, 0.6);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 1rem;
+		backdrop-filter: blur(4px);
+	}
+
+	.modal {
+		max-width: 32rem;
+		width: 100%;
+		background: var(--surface, #fff);
+		border: 1px solid var(--border, #e5e7eb);
+		border-radius: 0.75rem;
+		padding: 1.5rem;
+		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
+	}
+
+	header {
+		margin-bottom: 1rem;
+	}
+
+	h2 {
+		margin: 0;
+		font-size: 1.25rem;
+		font-weight: 600;
+	}
+
+	p {
+		margin: 0.75rem 0;
+		font-size: 0.9rem;
+		line-height: 1.5;
+	}
+
+	.recovery-input {
+		display: block;
+		width: 100%;
+		margin: 1rem 0 0.5rem;
+		padding: 0.75rem 1rem;
+		border: 1px solid var(--border, #e5e7eb);
+		border-radius: 0.5rem;
+		font-family: ui-monospace, SFMono-Regular, monospace;
+		font-size: 1rem;
+		background: var(--surface-muted, #f9fafb);
+		text-align: center;
+		letter-spacing: 0.05em;
+	}
+
+	.recovery-input:focus {
+		outline: 2px solid var(--primary, #6366f1);
+		outline-offset: 1px;
+	}
+
+	.recovery-input:disabled {
+		opacity: 0.6;
+	}
+
+	.error {
+		margin: 0.75rem 0;
+		padding: 0.75rem 1rem;
+		background: rgba(239, 68, 68, 0.08);
+		border: 1px solid rgba(239, 68, 68, 0.3);
+		border-radius: 0.5rem;
+		font-size: 0.85rem;
+		color: rgb(185, 28, 28);
+	}
+
+	.actions {
+		display: flex;
+		justify-content: flex-end;
+		margin-top: 1rem;
+	}
+
+	.btn {
+		padding: 0.5rem 1.25rem;
+		border-radius: 0.5rem;
+		border: 1px solid var(--border, #e5e7eb);
+		background: var(--surface, #fff);
+		font-size: 0.9rem;
+		cursor: pointer;
+		font-weight: 500;
+	}
+
+	.btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.btn-primary {
+		background: var(--primary, #6366f1);
+		color: white;
+		border-color: transparent;
+	}
+
+	.btn-primary:hover:not(:disabled) {
+		background: var(--primary-dark, #4f46e5);
+	}
+
+	.help {
+		margin-top: 1.25rem;
+		padding-top: 1rem;
+		border-top: 1px solid var(--border, #e5e7eb);
+		font-size: 0.8rem;
+		color: var(--text-secondary, #6b7280);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.modal {
+			background: var(--surface, #1f2937);
+			border-color: var(--border, #374151);
+		}
+		.recovery-input {
+			background: var(--surface-muted, #111827);
+			border-color: var(--border, #374151);
+			color: #f3f4f6;
+		}
+		.help {
+			border-color: var(--border, #374151);
+		}
+	}
+</style>
diff --git a/apps/mana/apps/web/src/routes/+layout.svelte b/apps/mana/apps/web/src/routes/+layout.svelte
index b6e385e06..92d4a6a3c 100644
--- a/apps/mana/apps/web/src/routes/+layout.svelte
+++ b/apps/mana/apps/web/src/routes/+layout.svelte
@@ -11,6 +11,7 @@
 	import { getVaultClient, hasAnyEncryption } from '$lib/data/crypto';
 	import SuggestionToast from '$lib/components/SuggestionToast.svelte';
 	import EncryptionIntroBanner from '$lib/components/EncryptionIntroBanner.svelte';
+	import RecoveryCodeUnlockModal from '$lib/components/RecoveryCodeUnlockModal.svelte';
 	import OfflineIndicator from '$lib/components/OfflineIndicator.svelte';
 	import PwaUpdatePrompt from '$lib/components/PwaUpdatePrompt.svelte';
 
@@ -25,6 +26,12 @@
 	// (root layout, settings/security page, future settings sub-pages).
 	const vaultClient = getVaultClient();
 
+	/** True iff the vault unlock landed in the Phase 9 zero-knowledge
+	 *  branch and is waiting for the user to type their recovery code
+	 *  into the modal. The unlock effect below sets it after the
+	 *  vaultClient.unlock() call returns 'awaiting-recovery-code'. */
+	let needsRecoveryCode = $state(false);
+
 	// Push the active user id into the data layer whenever auth state changes.
 	// The Dexie creating-hook reads this to auto-stamp `userId` on every record,
 	// so module stores never need to know who the current user is.
@@ -52,12 +59,21 @@
 		// hasAnyEncryption() flips to true once Phase 3 enables a pilot.
 		if (userId && hasAnyEncryption()) {
 			vaultClient.unlock().then((state) => {
-				if (state.status !== 'unlocked') {
-					console.warn('[mana] encryption vault unlock failed:', state);
+				if (state.status === 'unlocked') {
+					needsRecoveryCode = false;
+					return;
 				}
+				if (state.status === 'awaiting-recovery-code') {
+					// Phase 9: server is in zero-knowledge mode. Show the
+					// modal that collects the user's recovery code.
+					needsRecoveryCode = true;
+					return;
+				}
+				console.warn('[mana] encryption vault unlock failed:', state);
 			});
 		} else if (!userId) {
 			vaultClient.lock();
+			needsRecoveryCode = false;
 		}
 	});
 
@@ -93,3 +109,7 @@
 <OfflineIndicator />
 <PwaUpdatePrompt />
 <EncryptionIntroBanner />
+
+{#if needsRecoveryCode}
+	<RecoveryCodeUnlockModal onUnlocked={() => (needsRecoveryCode = false)} />
+{/if}