diff --git a/apps/api/src/__tests__/notes.test.ts b/apps/api/src/__tests__/notes.test.ts
index 52c1503..e67d9ef 100644
--- a/apps/api/src/__tests__/notes.test.ts
+++ b/apps/api/src/__tests__/notes.test.ts
@@ -1593,6 +1593,31 @@ describe("Chunked upload flow", () => {
 		expect(res.status).toBe(500);
 		expect((await res.json()).error).toBe("Corrupted upload session");
 	});
+
+	it("returns 500 when metadata is valid JSON but has the wrong shape", async () => {
+		const { json: initJson } = await initUpload({ chunkCount: 1 });
+		const chunk = chunkData("test-chunk");
+		await app.request(`/api/v1/notes/upload/${initJson.uploadId}/chunks/0`, {
+			method: "PUT",
+			headers: { "Content-Type": "application/octet-stream", "X-Chunk-Hash": sha256hex(chunk) },
+			body: chunk as BodyInit,
+		});
+
+		const { uploads: uploadsTable } = await import("../db/schema.js");
+		const { eq } = await import("drizzle-orm");
+		// Valid JSON but missing every required metadata field.
+		db.update(uploadsTable)
+			.set({ metadata: JSON.stringify({ unexpected: "shape" }) })
+			.where(eq(uploadsTable.id, initJson.uploadId))
+			.run();
+
+		const res = await app.request(`/api/v1/notes/upload/${initJson.uploadId}/complete`, {
+			method: "POST",
+			headers: authHeaders(),
+		});
+		expect(res.status).toBe(500);
+		expect((await res.json()).error).toBe("Corrupted upload session");
+	});
 });
 
 describe("GET /api/v1/notes/:id/stream", () => {
@@ -1850,6 +1875,30 @@ describe("GET /api/v1/notes/:id/stream", () => {
 		expect(res.headers.get("X-Salt")).toBe(testSalt);
 		expect(res.headers.get("X-Has-Password")).toBe("true");
 	});
+
+	it("streams chunks in order with read-ahead prefetching (more chunks than window)", async () => {
+		const chunkCount = 6;
+		const { id } = await createChunkedNote({ chunkCount });
+
+		const res = await app.request(`/api/v1/notes/${id}/stream`);
+		expect(res.status).toBe(200);
+		expect(res.headers.get("X-Chunk-Count")).toBe(String(chunkCount));
+
+		// Decode the length-prefixed framing and verify every chunk arrives
+		// in order with its original (client-encrypted) content.
+		const body = new Uint8Array(await res.arrayBuffer());
+		const view = new DataView(body.buffer, body.byteOffset, body.byteLength);
+		const frames: string[] = [];
+		let offset = 0;
+		while (offset < body.byteLength) {
+			const len = view.getUint32(offset);
+			offset += 4;
+			frames.push(Buffer.from(body.subarray(offset, offset + len)).toString());
+			offset += len;
+		}
+
+		expect(frames).toEqual(Array.from({ length: chunkCount }, (_, i) => `chunk-data-${String(i)}`));
+	});
 });
 
 describe("GET /api/v1/notes/:id/stream edge cases", () => {
@@ -1885,6 +1934,7 @@ describe("GET /api/v1/notes/:id/stream edge cases", () => {
 
 	async function createChunkedNoteViaApp(
 		targetApp: ReturnType<typeof createAppWithCustomStorage>,
+		chunkCount = 1,
 	): Promise<{ id: string; deleteToken: string }> {
 		const initRes = await targetApp.request("/api/v1/notes/upload/init", {
 			method: "POST",
@@ -1896,20 +1946,22 @@ describe("GET /api/v1/notes/:id/stream edge cases", () => {
 				expiresIn: 3600,
 				maxReads: 0,
 				fileCount: 1,
-				chunkCount: 1,
+				chunkCount,
 			}),
 		});
 		const { uploadId } = (await initRes.json()) as { uploadId: string };
 
-		const chunk = chunkData("chunk-data-0");
-		await targetApp.request(`/api/v1/notes/upload/${uploadId}/chunks/0`, {
-			method: "PUT",
-			headers: {
-				"Content-Type": "application/octet-stream",
-				"X-Chunk-Hash": sha256hex(chunk),
-			},
-			body: chunk as BodyInit,
-		});
+		for (let i = 0; i < chunkCount; i++) {
+			const chunk = chunkData(`chunk-data-${String(i)}`);
+			await targetApp.request(`/api/v1/notes/upload/${uploadId}/chunks/${String(i)}`, {
+				method: "PUT",
+				headers: {
+					"Content-Type": "application/octet-stream",
+					"X-Chunk-Hash": sha256hex(chunk),
+				},
+				body: chunk as BodyInit,
+			});
+		}
 
 		const completeRes = await targetApp.request(`/api/v1/notes/upload/${uploadId}/complete`, {
 			method: "POST",
@@ -1918,6 +1970,39 @@ describe("GET /api/v1/notes/:id/stream edge cases", () => {
 		return completeRes.json() as Promise<{ id: string; deleteToken: string }>;
 	}
 
+	it("errors the stream when a later chunk read fails mid-stream", async () => {
+		const realStorage = new LocalStorage(TEST_FILES_PATH);
+		// Create a 2-chunk note using real storage first
+		const { id } = await createChunkedNoteViaApp(createAppWithCustomStorage(db, realStorage), 2);
+
+		// Stream through a storage whose chunk-1 read fails (chunk 0 still works,
+		// so the pre-flight check passes and headers are already sent).
+		const failingStorage: StorageBackend = {
+			save: (noteId, data) => realStorage.save(noteId, data),
+			read: (key) => realStorage.read(key),
+			delete: (key) => realStorage.delete(key),
+			saveChunk: (noteId, idx, data) => realStorage.saveChunk(noteId, idx, data),
+			readChunk: (noteId, idx) =>
+				idx === 0
+					? realStorage.readChunk(noteId, idx)
+					: Promise.reject(new Error("mid-stream read failure")),
+			deleteChunks: (noteId, cnt) => realStorage.deleteChunks(noteId, cnt),
+		};
+		const failApp = createAppWithCustomStorage(db, failingStorage);
+
+		const res = await failApp.request(`/api/v1/notes/${id}/stream`);
+		expect(res.status).toBe(200); // Headers committed before the failure
+
+		// Consuming the body must surface the stream error
+		let streamFailed = false;
+		try {
+			await res.arrayBuffer();
+		} catch {
+			streamFailed = true;
+		}
+		expect(streamFailed).toBe(true);
+	});
+
 	it("handles corrupted chunk data (too small for auth tag)", async () => {
 		const realStorage = new LocalStorage(TEST_FILES_PATH);
 		// Create note using real storage first
diff --git a/apps/api/src/middleware/rateLimit.ts b/apps/api/src/middleware/rateLimit.ts
index f9ad4d2..c39f1f2 100644
--- a/apps/api/src/middleware/rateLimit.ts
+++ b/apps/api/src/middleware/rateLimit.ts
@@ -96,15 +96,15 @@ export function createRateLimit(options: RateLimitOptions): RateLimitResult {
 
 		if (existing === undefined || existing.resetAt <= now) {
 			if (store.size >= MAX_STORE_SIZE && existing === undefined) {
-				let evicted = false;
+				// Bulk-evict every expired entry in one sweep: freeing all reusable
+				// slots at once (instead of one per request) keeps a full store from
+				// rejecting new clients under sustained traffic.
 				for (const [key, entry] of store) {
 					if (entry.resetAt <= now) {
 						store.delete(key);
-						evicted = true;
-						break;
 					}
 				}
-				if (!evicted) {
+				if (store.size >= MAX_STORE_SIZE) {
 					return c.json({ error: "Too many requests" }, 429);
 				}
 			}
diff --git a/apps/api/src/routes/notes/chunked.ts b/apps/api/src/routes/notes/chunked.ts
index 3fdde8f..ccd38b0 100644
--- a/apps/api/src/routes/notes/chunked.ts
+++ b/apps/api/src/routes/notes/chunked.ts
@@ -3,9 +3,11 @@ import type { OpenAPIHono } from "@hono/zod-openapi";
 import { SECRETSTREAM_ABYTES, serverDecrypt, serverEncrypt } from "@secret/crypto";
 import {
 	chunkedUploadInitSchema,
+	isValidNoteId,
 	NOTE_ID_LENGTH,
 	UPLOAD_ID_LENGTH,
 	UPLOAD_SESSION_TTL,
+	uploadSessionMetadataSchema,
 } from "@secret/shared";
 import { eq } from "drizzle-orm";
 import { nanoid } from "nanoid";
@@ -149,20 +151,20 @@ export function registerChunkedRoutes(app: OpenAPIHono<NotesEnv>): void {
 			return c.json({ error: "Upload incomplete" }, 400);
 		}
 
-		let meta: {
-			streamHeader: string;
-			clientNonce: string;
-			hasPassword: boolean;
-			expiresIn: number;
-			maxReads: number;
-			fileCount: number;
-			salt?: string;
-		};
+		// Re-validate the persisted metadata instead of trusting it blindly:
+		// a corrupted row (bad JSON or missing fields) must not produce a
+		// malformed note.
+		let parsedMetadata: unknown;
 		try {
-			meta = JSON.parse(session.metadata) as typeof meta;
+			parsedMetadata = JSON.parse(session.metadata);
 		} catch {
 			return c.json({ error: "Corrupted upload session" }, 500);
 		}
+		const metaResult = uploadSessionMetadataSchema.safeParse(parsedMetadata);
+		if (!metaResult.success) {
+			return c.json({ error: "Corrupted upload session" }, 500);
+		}
+		const meta = metaResult.data;
 
 		const now = new Date();
 		const expiresAt = new Date(now.getTime() + meta.expiresIn * 1000);
@@ -219,7 +221,7 @@ export function registerChunkedRoutes(app: OpenAPIHono<NotesEnv>): void {
 
 	app.get("/:id/stream", async (c) => {
 		const id = c.req.param("id");
-		if (!id || !/^[A-Za-z0-9_-]+$/.test(id) || id.length !== NOTE_ID_LENGTH) {
+		if (!id || !isValidNoteId(id)) {
 			return c.json({ error: "Invalid note ID" }, 400);
 		}
 
@@ -268,11 +270,39 @@ export function registerChunkedRoutes(app: OpenAPIHono<NotesEnv>): void {
 			throw err;
 		}
 
+		// Read-ahead window: keep a few chunk reads in flight so per-chunk
+		// storage latency (one round-trip per chunk on S3) overlaps with
+		// decryption and streaming instead of accumulating sequentially.
+		// Rejections are captured as values so an un-awaited prefetch can
+		// never surface as an unhandled promise rejection.
+		const PREFETCH_CHUNKS = 4;
+		type ChunkRead = { ok: true; data: Buffer } | { ok: false; reason: unknown };
+		const readChunkSafe = (index: number): Promise<ChunkRead> =>
+			(index === 0 ? Promise.resolve(firstChunk) : storage.readChunk(id, index)).then(
+				(data) => ({ ok: true as const, data }),
+				(reason: unknown) => ({ ok: false as const, reason }),
+			);
+
 		const stream = new ReadableStream({
 			async start(controller) {
 				try {
+					const readAhead: Promise<ChunkRead>[] = [];
+					let nextToFetch = 0;
+
 					for (let i = 0; i < chunkCount; i++) {
-						const storedData = i === 0 ? firstChunk : await storage.readChunk(id, i);
+						// Top up the read-ahead window.
+						while (nextToFetch < chunkCount && readAhead.length < PREFETCH_CHUNKS) {
+							readAhead.push(readChunkSafe(nextToFetch));
+							nextToFetch += 1;
+						}
+
+						const chunkRead = await (readAhead.shift() as Promise<ChunkRead>);
+						if (!chunkRead.ok) {
+							controller.error(chunkRead.reason);
+							return;
+						}
+
+						const storedData = chunkRead.data;
 						const iv = storedData.subarray(0, IV_LENGTH);
 						const encrypted = storedData.subarray(IV_LENGTH);
 
diff --git a/apps/api/src/routes/notes/openapi-routes.ts b/apps/api/src/routes/notes/openapi-routes.ts
index 9dcd833..f94c029 100644
--- a/apps/api/src/routes/notes/openapi-routes.ts
+++ b/apps/api/src/routes/notes/openapi-routes.ts
@@ -3,17 +3,17 @@ import {
 	createNoteResponseSchema,
 	createNoteSchema,
 	deleteNoteResponseSchema,
-	NOTE_ID_LENGTH,
 	noteExistsResponseSchema,
+	noteIdSchema,
 	noteNotFoundResponseSchema,
 	readNoteResponseSchema,
 } from "@secret/shared";
 
-const noteIdParam = z
-	.string()
-	.regex(/^[A-Za-z0-9_-]+$/, "Invalid note ID format")
-	.length(NOTE_ID_LENGTH, `Note ID must be ${String(NOTE_ID_LENGTH)} characters`)
-	.openapi({ param: { name: "id", in: "path" }, example: "aBcDeFgHiJkL" });
+// Reuse the shared note ID schema so the format is defined in one place.
+const noteIdParam = noteIdSchema.openapi({
+	param: { name: "id", in: "path" },
+	example: "aBcDeFgHiJkL",
+});
 
 export const createNoteRoute = createRoute({
 	method: "post",
diff --git a/apps/api/src/routes/notes/standard.ts b/apps/api/src/routes/notes/standard.ts
index 16a6799..d51c694 100644
--- a/apps/api/src/routes/notes/standard.ts
+++ b/apps/api/src/routes/notes/standard.ts
@@ -1,6 +1,6 @@
 import { timingSafeEqual } from "node:crypto";
 import type { OpenAPIHono } from "@hono/zod-openapi";
-import { createNoteMultipartSchema, NOTE_ID_LENGTH } from "@secret/shared";
+import { createNoteMultipartSchema, isValidNoteId } from "@secret/shared";
 import { eq } from "drizzle-orm";
 import { notes } from "../../db/schema.js";
 import { deleteOrSchedule } from "../../pendingDeletions.js";
@@ -128,7 +128,7 @@ export function registerStandardRoutes(app: OpenAPIHono<NotesEnv>): void {
 
 	app.get("/:id/raw", async (c) => {
 		const id = c.req.param("id");
-		if (!id || !/^[A-Za-z0-9_-]+$/.test(id) || id.length !== NOTE_ID_LENGTH) {
+		if (!id || !isValidNoteId(id)) {
 			return c.json({ error: "Invalid note ID" }, 400);
 		}
 
diff --git a/apps/api/src/storage/local.ts b/apps/api/src/storage/local.ts
index 83de7a8..a330d5b 100644
--- a/apps/api/src/storage/local.ts
+++ b/apps/api/src/storage/local.ts
@@ -82,15 +82,9 @@ export class LocalStorage implements StorageBackend {
 
 	async deleteChunks(noteId: string, chunkCount: number): Promise<void> {
 		assertChunkCount(chunkCount);
+		// All chunks of a note live under its own directory, so a single
+		// recursive removal replaces per-chunk unlink round-trips.
 		const dirPath = this.assertSafePath(join(this.filesPath, noteId));
-		for (let i = 0; i < chunkCount; i++) {
-			try {
-				const filePath = this.assertSafePath(join(dirPath, `chunk_${String(i)}`));
-				await unlink(filePath);
-			} catch {
-				/* chunk already deleted or missing */
-			}
-		}
 		try {
 			await rm(dirPath, { recursive: true });
 		} catch {
diff --git a/apps/web/src/lib/components/FileCard.svelte b/apps/web/src/lib/components/FileCard.svelte
new file mode 100644
index 0000000..83e85e1
--- /dev/null
+++ b/apps/web/src/lib/components/FileCard.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+import { fly } from "svelte/transition";
+import Icon from "$lib/components/Icon.svelte";
+import { t } from "$lib/i18n/index.svelte";
+import { getFileCategory } from "$lib/utils/fileType";
+import { formatSize } from "$lib/utils/format";
+
+interface Props {
+	name: string;
+	type: string;
+	size: number;
+	data: Uint8Array;
+	previewUrl: string;
+	index: number;
+}
+
+const { name, type, size, data, previewUrl, index }: Props = $props();
+
+const category = $derived(getFileCategory(type));
+
+function downloadFile() {
+	const blob = new Blob([data] as BlobPart[], { type });
+	const url = URL.createObjectURL(blob);
+	const a = document.createElement("a");
+	a.href = url;
+	a.download = name;
+	a.click();
+	URL.revokeObjectURL(url);
+}
+</script>
+
+<li
+	class="overflow-hidden rounded-2xl border"
+	style:background="var(--bg-2)"
+	style:border-color="var(--line)"
+	in:fly={{ y: 20, duration: 300, delay: Math.min(150 * index, 600) }}
+>
+	{#if previewUrl}
+		{#if category === "image"}
+			<img
+				src={previewUrl}
+				alt={name}
+				class="max-h-96 w-full object-contain"
+				style:background="var(--bg-3)"
+			/>
+		{:else if category === "video"}
+			<video controls class="max-h-96 w-full" style:background="var(--bg-3)" aria-label={name}>
+				<source src={previewUrl} {type} />
+				<track kind="captions" />
+			</video>
+		{:else if category === "audio"}
+			<audio controls class="w-full" style:padding="16px" aria-label={name}>
+				<source src={previewUrl} {type} />
+			</audio>
+		{:else if category === "pdf"}
+			<iframe src={previewUrl} class="h-96 w-full" title={name} sandbox=""></iframe>
+		{/if}
+	{/if}
+	<div class="flex items-center gap-3" style:padding="14px 16px">
+		<Icon name="file" size={16} class="shrink-0" />
+		<div class="min-w-0 flex-1">
+			<p
+				class="mb-0.5 truncate"
+				style:font-family="var(--font-mono)"
+				style:font-size="13px"
+				style:color="var(--text)"
+			>
+				{name}
+			</p>
+			<p class="mono" style:font-size="11px" style:color="var(--muted-2)">
+				{type} · {formatSize(size)}
+			</p>
+		</div>
+		<button
+			type="button"
+			onclick={downloadFile}
+			class="inline-flex items-center gap-1.5 rounded-lg border transition-colors"
+			style:background="var(--bg-3)"
+			style:border-color="var(--line)"
+			style:color="var(--text)"
+			style:padding="8px 12px"
+			style:font-size="12px"
+		>
+			<Icon name="download" size={13} />
+			<span>{t("rv_download")}</span>
+		</button>
+	</div>
+</li>
diff --git a/apps/web/src/lib/components/FileDropZone.svelte b/apps/web/src/lib/components/FileDropZone.svelte
new file mode 100644
index 0000000..6ab406e
--- /dev/null
+++ b/apps/web/src/lib/components/FileDropZone.svelte
@@ -0,0 +1,165 @@
+<script lang="ts">
+import Icon from "$lib/components/Icon.svelte";
+import { t } from "$lib/i18n/index.svelte";
+import { formatSize } from "$lib/utils/format";
+
+interface Props {
+	files: File[];
+	maxFileSize: number;
+	maxFilesPerNote: number;
+}
+
+let { files = $bindable(), maxFileSize, maxFilesPerNote }: Props = $props();
+
+let isDragging = $state(false);
+let fileError = $state("");
+let fileInputEl: HTMLInputElement | undefined = $state();
+
+function handleDrop(event: DragEvent) {
+	event.preventDefault();
+	isDragging = false;
+	const droppedFiles = event.dataTransfer?.files;
+	if (droppedFiles) {
+		addFiles(Array.from(droppedFiles));
+	}
+}
+
+function handleFileInput(event: Event) {
+	const input = event.target as HTMLInputElement;
+	if (input.files) {
+		addFiles(Array.from(input.files));
+	}
+}
+
+function addFiles(newFiles: File[]) {
+	fileError = "";
+	const oversized = newFiles.filter((f) => f.size > maxFileSize);
+	if (oversized.length > 0) {
+		fileError = t("error_file_too_large", { size: formatSize(maxFileSize) });
+		return;
+	}
+
+	const remaining = maxFilesPerNote - files.length;
+	const candidates = [...files, ...newFiles.slice(0, remaining)];
+	const totalSize = candidates.reduce((sum, f) => sum + f.size, 0);
+	if (totalSize > maxFileSize) {
+		fileError = t("error_total_too_large", { size: formatSize(maxFileSize) });
+		return;
+	}
+
+	files = candidates;
+}
+
+function removeFile(index: number) {
+	files = files.filter((_, i) => i !== index);
+}
+</script>
+
+<div class="mb-8">
+	<span
+		class="mono mb-2 flex items-center gap-1.5 uppercase"
+		style:font-size="11px"
+		style:letter-spacing="0.08em"
+		style:color="var(--muted)"
+	>
+		<Icon name="paperclip" size={12} />
+		<span>{t("files_label")}</span>
+	</span>
+	<div
+		role="button"
+		tabindex="0"
+		onclick={() => fileInputEl?.click()}
+		onkeydown={(e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				fileInputEl?.click();
+			}
+		}}
+		ondragover={(e) => {
+			e.preventDefault();
+			isDragging = true;
+		}}
+		ondragleave={() => {
+			isDragging = false;
+		}}
+		ondrop={handleDrop}
+		class="w-full cursor-pointer rounded-xl text-left transition-all"
+		style:background={isDragging ? "var(--accent-soft)" : "var(--bg-2)"}
+		style:border={`1px dashed ${isDragging ? "var(--accent)" : "var(--line-2)"}`}
+		style:padding="20px"
+		aria-label={t("files_drop")}
+	>
+		<input
+			id="file-upload"
+			bind:this={fileInputEl}
+			type="file"
+			multiple
+			onchange={handleFileInput}
+			class="hidden"
+		/>
+		{#if files.length === 0}
+			<div class="flex items-center justify-between gap-4">
+				<div>
+					<div style:color="var(--text)" style:font-size="14px">
+						{t("files_drop_1")}
+						<span
+							style:color="var(--accent)"
+							style:font-weight="500"
+							style:text-decoration="underline"
+							style:text-underline-offset="3px">{t("files_drop_2")}</span
+						>
+					</div>
+					<div class="mono" style:color="var(--muted-2)" style:font-size="11px" style:margin-top="4px">
+						{t("files_limit", {
+							count: maxFilesPerNote,
+							size: formatSize(maxFileSize),
+						})}
+					</div>
+				</div>
+				<Icon name="paperclip" size={20} class="opacity-60" />
+			</div>
+		{:else}
+			<div class="flex flex-col gap-2">
+				{#each files as f, i (f.name + i)}
+					<div
+						class="flex items-center gap-2.5 rounded-lg"
+						style:background="var(--bg-3)"
+						style:padding="8px 10px"
+					>
+						<Icon name="file" size={14} class="shrink-0" />
+						<span class="flex-1 truncate" style:font-size="13px" style:color="var(--text)">
+							{f.name}
+						</span>
+						<span class="mono" style:font-size="11px" style:color="var(--muted-2)">
+							{formatSize(f.size)}
+						</span>
+						<button
+							type="button"
+							onclick={(e) => {
+								e.stopPropagation();
+								removeFile(i);
+							}}
+							class="border-0 bg-transparent p-1"
+							style:color="var(--muted)"
+							aria-label={t("remove_file", { name: f.name })}
+						>
+							<Icon name="x" size={14} />
+						</button>
+					</div>
+				{/each}
+				<div
+					class="mono"
+					style:font-size="11px"
+					style:color="var(--muted-2)"
+					style:padding-left="4px"
+					style:margin-top="4px"
+				>
+					{t("files_add_more")} ({files.length}/{maxFilesPerNote})
+				</div>
+			</div>
+		{/if}
+	</div>
+	{#if fileError}
+		<p class="mt-2" style:font-size="12px" style:color="var(--accent)">{fileError}</p>
+	{/if}
+</div>
diff --git a/apps/web/src/lib/components/MarkdownEditor.svelte b/apps/web/src/lib/components/MarkdownEditor.svelte
index 6fcc7f7..6da2b74 100644
--- a/apps/web/src/lib/components/MarkdownEditor.svelte
+++ b/apps/web/src/lib/components/MarkdownEditor.svelte
@@ -170,22 +170,51 @@ const toolbarBtnStyle =
 		</div>
 		{#if activeTab === "write"}
 			<div class="flex pr-2">
-				<button type="button" onclick={insertHeading} style={toolbarBtnStyle} title="Heading"
+				<button
+					type="button"
+					onclick={insertHeading}
+					style={toolbarBtnStyle}
+					title={t("md_btn_heading")}
+					aria-label={t("md_btn_heading")}
 					><span class="mono" style:font-size="12px" style:font-weight="600">H</span></button
 				>
-				<button type="button" onclick={insertBold} style={toolbarBtnStyle} title="Bold"
+				<button
+					type="button"
+					onclick={insertBold}
+					style={toolbarBtnStyle}
+					title={t("md_btn_bold")}
+					aria-label={t("md_btn_bold")}
 					><span style:font-weight="700" style:font-size="13px">B</span></button
 				>
-				<button type="button" onclick={insertItalic} style={toolbarBtnStyle} title="Italic"
+				<button
+					type="button"
+					onclick={insertItalic}
+					style={toolbarBtnStyle}
+					title={t("md_btn_italic")}
+					aria-label={t("md_btn_italic")}
 					><span style:font-style="italic" style:font-size="13px" class="serif">I</span></button
 				>
-				<button type="button" onclick={insertLink} style={toolbarBtnStyle} title="Link"
-					><Icon name="external" size={13} /></button
+				<button
+					type="button"
+					onclick={insertLink}
+					style={toolbarBtnStyle}
+					title={t("md_btn_link")}
+					aria-label={t("md_btn_link")}><Icon name="external" size={13} /></button
 				>
-				<button type="button" onclick={insertCode} style={toolbarBtnStyle} title="Code"
+				<button
+					type="button"
+					onclick={insertCode}
+					style={toolbarBtnStyle}
+					title={t("md_btn_code")}
+					aria-label={t("md_btn_code")}
 					><span class="mono" style:font-size="11px">{"</>"}</span></button
 				>
-				<button type="button" onclick={insertList} style={toolbarBtnStyle} title="List"
+				<button
+					type="button"
+					onclick={insertList}
+					style={toolbarBtnStyle}
+					title={t("md_btn_list")}
+					aria-label={t("md_btn_list")}
 					><span class="mono" style:font-size="13px">•</span></button
 				>
 			</div>
diff --git a/apps/web/src/lib/components/SecuritySettings.svelte b/apps/web/src/lib/components/SecuritySettings.svelte
new file mode 100644
index 0000000..53b022c
--- /dev/null
+++ b/apps/web/src/lib/components/SecuritySettings.svelte
@@ -0,0 +1,187 @@
+<script lang="ts">
+import { EXPIRATION_OPTIONS } from "@secret/shared";
+import Icon from "$lib/components/Icon.svelte";
+import { t } from "$lib/i18n/index.svelte";
+import { generatePassword, getPasswordStrength } from "$lib/utils/password";
+
+interface Props {
+	password: string;
+	expiresIn: number;
+	maxReads: string;
+}
+
+let { password = $bindable(), expiresIn = $bindable(), maxReads = $bindable() }: Props = $props();
+
+let showPassword = $state(false);
+
+const READS = [
+	{ value: "1", key: "reads_1" as const },
+	{ value: "3", key: "reads_3" as const },
+	{ value: "10", key: "reads_10" as const },
+	{ value: "100", key: "reads_100" as const },
+];
+
+const pwStrength = $derived(getPasswordStrength(password));
+
+function generatePwField() {
+	password = generatePassword();
+	showPassword = true;
+}
+</script>
+
+<div
+	class="mb-6 rounded-2xl border"
+	style:background="var(--bg-2)"
+	style:border-color="var(--line)"
+	style:padding="24px"
+>
+	<div
+		class="mono mb-4 inline-flex items-center gap-1.5 uppercase"
+		style:font-size="11px"
+		style:letter-spacing="0.12em"
+		style:color="var(--muted)"
+	>
+		<Icon name="shield" size={11} />
+		<span>{t("security_settings")}</span>
+	</div>
+
+	<div class="flex flex-col gap-5">
+		<div class="flex flex-col gap-2">
+			<label
+				for="password"
+				class="mono flex items-center gap-1.5 uppercase"
+				style:font-size="11px"
+				style:letter-spacing="0.08em"
+				style:color="var(--muted)"
+			>
+				<Icon name="lock" size={12} />
+				<span>{t("password_add_label")}</span>
+			</label>
+			<div class="relative">
+				<input
+					id="password"
+					type={showPassword ? "text" : "password"}
+					bind:value={password}
+					placeholder={t("password_add_placeholder")}
+					autocomplete="off"
+					class="w-full rounded-xl border outline-none transition-colors"
+					style:background="var(--bg-2)"
+					style:border-color="var(--line)"
+					style:color="var(--text)"
+					style:padding="12px 88px 12px 14px"
+					style:font-size="14px"
+				/>
+				<div
+					class="absolute flex gap-0.5"
+					style:right="8px"
+					style:top="50%"
+					style:transform="translateY(-50%)"
+				>
+					<button
+						type="button"
+						onclick={generatePwField}
+						class="inline-flex items-center justify-center rounded-md border-0 bg-transparent"
+						style:color="var(--muted)"
+						style:padding="6px 8px"
+						title={t("generate")}
+						aria-label={t("generate")}
+					>
+						<Icon name="dice" size={14} />
+					</button>
+					<button
+						type="button"
+						onclick={() => (showPassword = !showPassword)}
+						class="inline-flex items-center justify-center rounded-md border-0 bg-transparent"
+						style:color="var(--muted)"
+						style:padding="6px 8px"
+						title={showPassword ? t("hide_password") : t("show_password")}
+						aria-label={showPassword ? t("hide_password") : t("show_password")}
+					>
+						<Icon name={showPassword ? "eye-off" : "eye"} size={14} />
+					</button>
+				</div>
+			</div>
+			{#if password}
+				<div class="flex items-center gap-2.5" style:margin-top="4px">
+					<div
+						class="flex-1 overflow-hidden rounded-full"
+						style:height="4px"
+						style:background="var(--bg-3)"
+					>
+						<div
+							class="h-full transition-all"
+							style:width="{(pwStrength.score / 5) * 100}%"
+							style:background={pwStrength.color}
+						></div>
+					</div>
+					<span
+						class="mono"
+						style:font-size="10px"
+						style:color={pwStrength.color}
+						style:min-width="70px"
+						style:text-align="right">{pwStrength.labelKey ? t(pwStrength.labelKey) : ""}</span
+					>
+				</div>
+			{/if}
+			<span class="mono" style:font-size="11px" style:color="var(--muted-2)">
+				{t("password_add_hint")}
+			</span>
+		</div>
+
+		<div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
+			<div class="flex flex-col gap-2">
+				<label
+					for="expires"
+					class="mono flex items-center gap-1.5 uppercase"
+					style:font-size="11px"
+					style:letter-spacing="0.08em"
+					style:color="var(--muted)"
+				>
+					<Icon name="clock" size={12} />
+					<span>{t("expires_label")}</span>
+				</label>
+				<select
+					id="expires"
+					bind:value={expiresIn}
+					class="w-full rounded-xl border outline-none transition-colors"
+					style:background="var(--bg-2)"
+					style:border-color="var(--line)"
+					style:color="var(--text)"
+					style:padding="12px 14px"
+					style:font-size="14px"
+				>
+					{#each EXPIRATION_OPTIONS as option (option.value)}
+						<option value={option.value}>{t(option.labelKey)}</option>
+					{/each}
+				</select>
+			</div>
+
+			<div class="flex flex-col gap-2">
+				<label
+					for="max-reads"
+					class="mono flex items-center gap-1.5 uppercase"
+					style:font-size="11px"
+					style:letter-spacing="0.08em"
+					style:color="var(--muted)"
+				>
+					<Icon name="eye" size={12} />
+					<span>{t("max_reads_label")}</span>
+				</label>
+				<select
+					id="max-reads"
+					bind:value={maxReads}
+					class="w-full rounded-xl border outline-none transition-colors"
+					style:background="var(--bg-2)"
+					style:border-color="var(--line)"
+					style:color="var(--text)"
+					style:padding="12px 14px"
+					style:font-size="14px"
+				>
+					{#each READS as r (r.value)}
+						<option value={r.value}>{t(r.key)}</option>
+					{/each}
+				</select>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/apps/web/src/lib/components/SkeletonLoader.svelte b/apps/web/src/lib/components/SkeletonLoader.svelte
deleted file mode 100644
index 36d8611..0000000
--- a/apps/web/src/lib/components/SkeletonLoader.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-interface Props {
-	label?: string;
-}
-
-let { label = "Loading" }: Props = $props();
-</script>
-
-<div class="space-y-4 animate-pulse" role="status" aria-label={label}>
-	<div class="h-6 w-48 rounded bg-slate-800"></div>
-	<div class="h-4 w-72 rounded bg-slate-800"></div>
-	<div class="h-12 w-full rounded-lg bg-slate-800"></div>
-	<div class="h-12 w-full rounded-lg bg-slate-800"></div>
-</div>
diff --git a/apps/web/src/lib/components/SuccessView.svelte b/apps/web/src/lib/components/SuccessView.svelte
new file mode 100644
index 0000000..6a2a26c
--- /dev/null
+++ b/apps/web/src/lib/components/SuccessView.svelte
@@ -0,0 +1,409 @@
+<script lang="ts">
+import { EXPIRATION_OPTIONS } from "@secret/shared";
+import Icon from "$lib/components/Icon.svelte";
+import { getConfig } from "$lib/config.svelte";
+import { t } from "$lib/i18n/index.svelte";
+import { copyWithFeedback } from "$lib/utils/clipboard";
+
+interface Props {
+	shareUrl: string;
+	qrCodeUrl: string;
+	manageUrl: string;
+	password: string;
+	fileCount: number;
+	expiresIn: number;
+	maxReads: string;
+	onreset: () => void;
+}
+
+const { shareUrl, qrCodeUrl, manageUrl, password, fileCount, expiresIn, maxReads, onreset }: Props =
+	$props();
+
+const config = $derived(getConfig());
+
+let copied = $state(false);
+let copiedPw = $state(false);
+let manageCopied = $state(false);
+let showQR = $state(false);
+let clipboardError = $state("");
+
+const isBurning = $derived(parseInt(maxReads, 10) === 1);
+
+const expiryLabelKey = $derived.by(() => {
+	const match = EXPIRATION_OPTIONS.find((o) => o.value === expiresIn);
+	return match?.labelKey ?? "expiry_24h";
+});
+
+const shareUrlParts = $derived.by(() => {
+	const hashIdx = shareUrl.indexOf("#");
+	if (hashIdx < 0) return { protocol: "", host: shareUrl, fragment: "" };
+	const beforeHash = shareUrl.slice(0, hashIdx);
+	const fragment = shareUrl.slice(hashIdx);
+	const protoIdx = beforeHash.indexOf("://");
+	const protocol = protoIdx >= 0 ? beforeHash.slice(0, protoIdx + 3) : "";
+	const host = protoIdx >= 0 ? beforeHash.slice(protoIdx + 3) : beforeHash;
+	return { protocol, host, fragment };
+});
+
+const readsText = $derived(
+	parseInt(maxReads, 10) === 1 ? t("reads_count_one") : t("reads_count_other", { count: maxReads }),
+);
+
+async function copy(text: string, setFlag: (v: boolean) => void) {
+	clipboardError = "";
+	const ok = await copyWithFeedback(text, setFlag);
+	if (!ok) clipboardError = t("error_clipboard");
+}
+</script>
+
+<section>
+	<!-- Hero -->
+	<div class="mb-9 flex flex-col items-start">
+		<span
+			class="mono mb-2 inline-flex items-center gap-1.5 uppercase"
+			style:font-size="11px"
+			style:letter-spacing="0.12em"
+			style:color="var(--muted)"
+		>
+			<Icon name="check" size={11} />
+			<span>{t("ok_eyebrow")}</span>
+		</span>
+		<h1
+			class="serif"
+			style:font-size="clamp(32px, 5vw, 40px)"
+			style:margin="8px 0 24px"
+			style:line-height="1.35"
+			style:letter-spacing="-0.02em"
+			style:font-weight="400"
+			style:padding-bottom="8px"
+		>
+			{t("ok_hero_1")}
+			<em style:color="var(--accent)">{t("ok_hero_unique")}</em>.<br />
+			{t("ok_hero_2")}
+			<span style:color="var(--muted)">{t("ok_hero_3")}</span>
+		</h1>
+		<p style:color="var(--muted)" style:font-size="15px" style:margin="0">
+			{password ? t("ok_hero_sub_pw") : t("ok_hero_sub_nopw")}
+		</p>
+	</div>
+
+	{#if clipboardError}
+		<div
+			class="mb-4 rounded-xl border px-4 py-3 text-sm"
+			style:background="var(--accent-soft)"
+			style:border-color="var(--accent-ring)"
+			style:color="var(--text)"
+			role="alert"
+		>
+			{clipboardError}
+		</div>
+	{/if}
+
+	<!-- Link card -->
+	<div
+		class="relative mb-4 overflow-hidden rounded-2xl border"
+		style:background="var(--bg-2)"
+		style:border-color="var(--line)"
+		style:padding="4px"
+	>
+		<div
+			class="mono flex flex-wrap items-center gap-3 uppercase"
+			style:padding="12px 16px 6px"
+			style:font-size="10px"
+			style:color="var(--muted-2)"
+			style:letter-spacing="0.1em"
+		>
+			<span class="inline-flex items-center gap-1.5">
+				<span
+					class="inline-block"
+					style:width="6px"
+					style:height="6px"
+					style:border-radius="2px"
+					style:background="var(--muted)"
+				></span>
+				<span>{t("ok_legend_server")}</span>
+			</span>
+			<span class="inline-flex items-center gap-1.5">
+				<span
+					class="inline-block"
+					style:width="6px"
+					style:height="6px"
+					style:border-radius="2px"
+					style:background="var(--accent)"
+				></span>
+				<span>{t("ok_legend_key")}</span>
+			</span>
+		</div>
+		<div class="flex flex-wrap items-center gap-3" style:padding="4px 18px 18px">
+			<div
+				class="min-w-0 flex-1 overflow-hidden"
+				style:font-family="var(--font-mono)"
+				style:font-size="14px"
+				style:line-height="1.4"
+				style:white-space="nowrap"
+				style:text-overflow="ellipsis"
+				title={shareUrl}
+				data-testid="share-url"
+			>
+				<span style:color="var(--muted-2)">{shareUrlParts.protocol}</span><span
+					style:color="var(--text)">{shareUrlParts.host}</span
+				><span style:color="var(--accent)">{shareUrlParts.fragment}</span>
+			</div>
+			<button
+				type="button"
+				onclick={() => copy(shareUrl, (v) => (copied = v))}
+				class="inline-flex items-center gap-1.5 rounded-lg border-0 transition-all"
+				style:background="var(--accent)"
+				style:color="var(--accent-ink)"
+				style:padding="12px 18px"
+				style:font-size="13px"
+				style:font-weight="500"
+				aria-label={t("ok_copy")}
+			>
+				<Icon name={copied ? "check" : "copy"} size={15} />
+				<span>{copied ? t("copied") : t("ok_copy")}</span>
+			</button>
+		</div>
+		<div class="flex" style:border-top="1px solid var(--line)" style:background="var(--bg-3)">
+			<button
+				type="button"
+				onclick={() => (showQR = !showQR)}
+				class="inline-flex flex-1 items-center justify-center gap-1.5 border-0 bg-transparent transition-colors"
+				style:padding="12px"
+				style:color={showQR ? "var(--text)" : "var(--muted)"}
+				style:font-size="13px"
+			>
+				<Icon name="qr" size={14} />
+				<span>{t("ok_qr")}</span>
+			</button>
+			<span style:width="1px" style:background="var(--line)"></span>
+			<a
+				href={`mailto:?subject=${encodeURIComponent(config.appName)}&body=${encodeURIComponent(shareUrl)}`}
+				class="inline-flex flex-1 items-center justify-center gap-1.5 transition-colors"
+				style:padding="12px"
+				style:color="var(--muted)"
+				style:font-size="13px"
+			>
+				<Icon name="mail" size={14} />
+				<span>{t("ok_email")}</span>
+			</a>
+			<span style:width="1px" style:background="var(--line)"></span>
+			<a
+				href={shareUrl}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="inline-flex flex-1 items-center justify-center gap-1.5 transition-colors"
+				style:padding="12px"
+				style:color="var(--muted)"
+				style:font-size="13px"
+			>
+				<Icon name="eye" size={14} />
+				<span>{t("ok_preview")}</span>
+			</a>
+		</div>
+	</div>
+
+	{#if showQR && qrCodeUrl}
+		<div
+			class="mb-4 flex flex-col items-center gap-4 rounded-2xl border"
+			style:background="var(--bg-2)"
+			style:border-color="var(--line)"
+			style:padding="24px"
+		>
+			<img
+				src={qrCodeUrl}
+				alt={t("qr_alt")}
+				class="rounded-lg"
+				style:background="var(--bg)"
+				width="200"
+				height="200"
+			/>
+			<p
+				class="mono"
+				style:font-size="11px"
+				style:color="var(--muted)"
+				style:margin="0"
+				style:text-align="center"
+			>
+				{t("ok_qr_hint")}
+			</p>
+		</div>
+	{/if}
+
+	{#if password}
+		<div
+			class="mb-4 flex items-center gap-3 rounded-2xl border"
+			style:background="var(--bg-2)"
+			style:border-color="var(--line)"
+			style:padding="16px"
+		>
+			<span
+				class="grid place-items-center rounded-lg"
+				style:width="36px"
+				style:height="36px"
+				style:background="var(--accent-soft)"
+				style:color="var(--accent)"
+			>
+				<Icon name="key" size={16} />
+			</span>
+			<div class="min-w-0 flex-1">
+				<div style:font-size="13px" style:font-weight="500">{t("ok_pw_title")}</div>
+				<div class="mono" style:font-size="11px" style:color="var(--muted)">
+					{t("ok_pw_hint")}
+				</div>
+			</div>
+			<button
+				type="button"
+				onclick={() => copy(password, (v) => (copiedPw = v))}
+				class="inline-flex items-center gap-1.5 rounded-lg border transition-colors"
+				style:background="var(--bg-3)"
+				style:border-color="var(--line)"
+				style:color="var(--text)"
+				style:padding="8px 14px"
+				style:font-size="12px"
+			>
+				<Icon name={copiedPw ? "check" : "copy"} size={13} />
+				<span>{copiedPw ? t("copied") : t("copy_button")}</span>
+			</button>
+		</div>
+	{/if}
+
+	<!-- Facts -->
+	<div
+		class="mb-8 rounded-2xl border"
+		style:background="color-mix(in srgb, var(--accent) 5%, var(--bg-2))"
+		style:border-color="var(--line)"
+		style:padding="20px 24px"
+	>
+		<div
+			class="mono mb-3 inline-flex items-center gap-1.5 uppercase"
+			style:font-size="11px"
+			style:letter-spacing="0.12em"
+			style:color="var(--muted)"
+		>
+			<Icon name="warn" size={11} />
+			<span>{t("ok_facts_title")}</span>
+		</div>
+		<ul class="m-0 flex list-none flex-col gap-2.5 p-0">
+			<li class="flex items-center gap-3">
+				<span
+					class="grid shrink-0 place-items-center rounded-md"
+					style:width="26px"
+					style:height="26px"
+					style:background="var(--bg-3)"
+					style:color="var(--muted)"
+				>
+					<Icon name="clock" size={13} />
+				</span>
+				<span style:color="var(--muted)" style:font-size="13px" style:min-width="140px"
+					>{t("ok_facts_expiry")}</span
+				>
+				<span class="mono" style:color="var(--text)" style:font-size="12px" style:font-weight="500"
+					>{t(expiryLabelKey)}</span
+				>
+			</li>
+			<li class="flex items-center gap-3">
+				<span
+					class="grid shrink-0 place-items-center rounded-md"
+					style:width="26px"
+					style:height="26px"
+					style:background="var(--bg-3)"
+					style:color={isBurning ? "var(--accent)" : "var(--muted)"}
+				>
+					<Icon name={isBurning ? "flame" : "eye"} size={13} />
+				</span>
+				<span style:color="var(--muted)" style:font-size="13px" style:min-width="140px"
+					>{t("ok_facts_reads")}</span
+				>
+				<span
+					class="mono"
+					style:color={isBurning ? "var(--accent)" : "var(--text)"}
+					style:font-size="12px"
+					style:font-weight="500">{readsText}</span
+				>
+			</li>
+			{#if fileCount > 0}
+				<li class="flex items-center gap-3">
+					<span
+						class="grid shrink-0 place-items-center rounded-md"
+						style:width="26px"
+						style:height="26px"
+						style:background="var(--bg-3)"
+						style:color="var(--muted)"
+					>
+						<Icon name="paperclip" size={13} />
+					</span>
+					<span style:color="var(--muted)" style:font-size="13px" style:min-width="140px"
+						>{t("ok_facts_files")}</span
+					>
+					<span
+						class="mono"
+						style:color="var(--text)"
+						style:font-size="12px"
+						style:font-weight="500">{t("files_count", { count: fileCount })}</span
+					>
+				</li>
+			{/if}
+		</ul>
+	</div>
+
+	{#if manageUrl}
+		<details class="mb-6">
+			<summary
+				class="mono cursor-pointer uppercase"
+				style:font-size="11px"
+				style:letter-spacing="0.1em"
+				style:color="var(--muted-2)"
+			>
+				{t("delete_label")}
+			</summary>
+			<div class="mt-3 flex flex-col gap-2">
+				<div class="flex gap-2">
+					<input
+						id="manage-url"
+						type="text"
+						readonly
+						value={manageUrl}
+						class="min-w-0 flex-1 rounded-lg border outline-none"
+						style:background="var(--bg-2)"
+						style:border-color="var(--line)"
+						style:color="var(--muted)"
+						style:padding="10px 12px"
+						style:font-family="var(--font-mono)"
+						style:font-size="11px"
+					/>
+					<button
+						type="button"
+						onclick={() => copy(manageUrl, (v) => (manageCopied = v))}
+						class="inline-flex items-center gap-1.5 rounded-lg border transition-colors"
+						style:background="var(--bg-2)"
+						style:border-color="var(--line)"
+						style:color="var(--muted)"
+						style:padding="10px 14px"
+						style:font-size="12px"
+					>
+						<Icon name={manageCopied ? "check" : "copy"} size={13} />
+						<span>{manageCopied ? t("delete_copied") : t("copy_button")}</span>
+					</button>
+				</div>
+				<p style:font-size="11px" style:color="var(--muted-2)">
+					{t("delete_warning")}
+				</p>
+			</div>
+		</details>
+	{/if}
+
+	<button
+		type="button"
+		onclick={onreset}
+		class="inline-flex w-full items-center justify-center gap-2 rounded-xl border transition-colors"
+		style:background="var(--bg-2)"
+		style:border-color="var(--line)"
+		style:color="var(--text)"
+		style:padding="14px"
+		style:font-size="14px"
+	>
+		<Icon name="lock" size={14} />
+		<span>{t("ok_new")}</span>
+	</button>
+</section>
diff --git a/apps/web/src/lib/utils/__tests__/clipboard.test.ts b/apps/web/src/lib/utils/__tests__/clipboard.test.ts
new file mode 100644
index 0000000..248402b
--- /dev/null
+++ b/apps/web/src/lib/utils/__tests__/clipboard.test.ts
@@ -0,0 +1,56 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { copyWithFeedback } from "../clipboard.js";
+
+describe("copyWithFeedback", () => {
+	const writeText = vi.fn();
+
+	beforeEach(() => {
+		vi.useFakeTimers();
+		vi.stubGlobal("navigator", { clipboard: { writeText } });
+		writeText.mockReset();
+	});
+
+	afterEach(() => {
+		vi.unstubAllGlobals();
+		vi.useRealTimers();
+	});
+
+	it("copies text and toggles the copied flag", async () => {
+		writeText.mockResolvedValue(undefined);
+		const setCopied = vi.fn();
+
+		const ok = await copyWithFeedback("secret-url", setCopied);
+
+		expect(ok).toBe(true);
+		expect(writeText).toHaveBeenCalledWith("secret-url");
+		expect(setCopied).toHaveBeenCalledWith(true);
+
+		vi.advanceTimersByTime(2000);
+		expect(setCopied).toHaveBeenCalledWith(false);
+	});
+
+	it("respects a custom reset delay", async () => {
+		writeText.mockResolvedValue(undefined);
+		const setCopied = vi.fn();
+
+		await copyWithFeedback("text", setCopied, 5000);
+		expect(setCopied).toHaveBeenCalledTimes(1);
+
+		vi.advanceTimersByTime(2000);
+		expect(setCopied).toHaveBeenCalledTimes(1);
+
+		vi.advanceTimersByTime(3000);
+		expect(setCopied).toHaveBeenCalledTimes(2);
+		expect(setCopied).toHaveBeenLastCalledWith(false);
+	});
+
+	it("returns false when the clipboard API rejects", async () => {
+		writeText.mockRejectedValue(new Error("denied"));
+		const setCopied = vi.fn();
+
+		const ok = await copyWithFeedback("text", setCopied);
+
+		expect(ok).toBe(false);
+		expect(setCopied).not.toHaveBeenCalled();
+	});
+});
diff --git a/apps/web/src/lib/utils/__tests__/fileType.test.ts b/apps/web/src/lib/utils/__tests__/fileType.test.ts
new file mode 100644
index 0000000..d395341
--- /dev/null
+++ b/apps/web/src/lib/utils/__tests__/fileType.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it } from "vitest";
+import { getFileCategory, isPreviewable } from "../fileType.js";
+
+describe("getFileCategory", () => {
+	it("categorizes image MIME types", () => {
+		expect(getFileCategory("image/png")).toBe("image");
+		expect(getFileCategory("image/jpeg")).toBe("image");
+		expect(getFileCategory("image/svg+xml")).toBe("image");
+	});
+
+	it("categorizes video MIME types", () => {
+		expect(getFileCategory("video/mp4")).toBe("video");
+		expect(getFileCategory("video/webm")).toBe("video");
+	});
+
+	it("categorizes audio MIME types", () => {
+		expect(getFileCategory("audio/mpeg")).toBe("audio");
+		expect(getFileCategory("audio/ogg")).toBe("audio");
+	});
+
+	it("categorizes PDF", () => {
+		expect(getFileCategory("application/pdf")).toBe("pdf");
+	});
+
+	it("categorizes everything else as other", () => {
+		expect(getFileCategory("application/zip")).toBe("other");
+		expect(getFileCategory("text/plain")).toBe("other");
+		expect(getFileCategory("application/octet-stream")).toBe("other");
+		expect(getFileCategory("")).toBe("other");
+	});
+});
+
+describe("isPreviewable", () => {
+	it("returns true for previewable types", () => {
+		expect(isPreviewable("image/png")).toBe(true);
+		expect(isPreviewable("video/mp4")).toBe(true);
+		expect(isPreviewable("audio/mpeg")).toBe(true);
+		expect(isPreviewable("application/pdf")).toBe(true);
+	});
+
+	it("returns false for non-previewable types", () => {
+		expect(isPreviewable("application/zip")).toBe(false);
+		expect(isPreviewable("text/plain")).toBe(false);
+		expect(isPreviewable("")).toBe(false);
+	});
+});
diff --git a/apps/web/src/lib/utils/__tests__/password.test.ts b/apps/web/src/lib/utils/__tests__/password.test.ts
new file mode 100644
index 0000000..af45d95
--- /dev/null
+++ b/apps/web/src/lib/utils/__tests__/password.test.ts
@@ -0,0 +1,78 @@
+import { describe, expect, it } from "vitest";
+import { generatePassword, getPasswordStrength } from "../password.js";
+
+describe("getPasswordStrength", () => {
+	it("returns a neutral result for an empty password", () => {
+		const result = getPasswordStrength("");
+		expect(result.score).toBe(0);
+		expect(result.labelKey).toBeNull();
+		expect(result.color).toBe("var(--muted-2)");
+	});
+
+	it("scores a very weak password", () => {
+		// Short, lowercase only: 0 criteria met
+		const result = getPasswordStrength("abc");
+		expect(result.score).toBe(0);
+		expect(result.labelKey).toBeNull();
+	});
+
+	it("scores a weak password", () => {
+		// >= 8 chars only
+		const result = getPasswordStrength("abcdefgh");
+		expect(result.score).toBe(1);
+		expect(result.labelKey).toBe("str_vweak");
+	});
+
+	it("scores a medium password", () => {
+		// >= 8 chars, mixed case, digits
+		const result = getPasswordStrength("Abcdef12");
+		expect(result.score).toBe(3);
+		expect(result.labelKey).toBe("str_ok");
+	});
+
+	it("scores a strong password", () => {
+		// >= 14 chars, mixed case, digits
+		const result = getPasswordStrength("Abcdefghijkl12");
+		expect(result.score).toBe(4);
+		expect(result.labelKey).toBe("str_strong");
+	});
+
+	it("scores an excellent password with all criteria", () => {
+		// >= 14 chars, mixed case, digits, symbols
+		const result = getPasswordStrength("Abcdefghijk12!@");
+		expect(result.score).toBe(5);
+		expect(result.labelKey).toBe("str_exc");
+	});
+
+	it("assigns a color for every non-empty password", () => {
+		expect(getPasswordStrength("abc").color).toBe("#ef4444");
+		expect(getPasswordStrength("Abcdefghijk12!@").color).toBe("#10b981");
+	});
+});
+
+describe("generatePassword", () => {
+	it("generates a password of the default length", () => {
+		expect(generatePassword()).toHaveLength(20);
+	});
+
+	it("generates a password of a custom length", () => {
+		expect(generatePassword(32)).toHaveLength(32);
+		expect(generatePassword(8)).toHaveLength(8);
+	});
+
+	it("only uses display-safe characters", () => {
+		const password = generatePassword(100);
+		expect(password).toMatch(/^[A-HJ-NP-Za-hj-km-z2-9!@#$%]+$/);
+		// Ambiguous characters are excluded
+		expect(password).not.toMatch(/[0OIl1]/);
+	});
+
+	it("generates different passwords on each call", () => {
+		expect(generatePassword()).not.toBe(generatePassword());
+	});
+
+	it("rates its own output as excellent", () => {
+		const result = getPasswordStrength(generatePassword());
+		expect(result.score).toBeGreaterThanOrEqual(4);
+	});
+});
diff --git a/apps/web/src/lib/utils/clipboard.ts b/apps/web/src/lib/utils/clipboard.ts
new file mode 100644
index 0000000..5ab7eae
--- /dev/null
+++ b/apps/web/src/lib/utils/clipboard.ts
@@ -0,0 +1,23 @@
+/**
+ * Copy text to the clipboard and report a transient "copied" state.
+ *
+ * Calls `setCopied(true)` on success, then `setCopied(false)` after `resetMs`.
+ * Returns false when the Clipboard API is unavailable or rejects, so callers
+ * can surface an error message.
+ */
+export async function copyWithFeedback(
+	text: string,
+	setCopied: (copied: boolean) => void,
+	resetMs = 2000,
+): Promise<boolean> {
+	try {
+		await navigator.clipboard.writeText(text);
+	} catch {
+		return false;
+	}
+	setCopied(true);
+	setTimeout(() => {
+		setCopied(false);
+	}, resetMs);
+	return true;
+}
diff --git a/apps/web/src/lib/utils/fileType.ts b/apps/web/src/lib/utils/fileType.ts
new file mode 100644
index 0000000..bdcafeb
--- /dev/null
+++ b/apps/web/src/lib/utils/fileType.ts
@@ -0,0 +1,15 @@
+export type FileCategory = "image" | "video" | "audio" | "pdf" | "other";
+
+/** Categorize a MIME type for preview rendering. */
+export function getFileCategory(mimeType: string): FileCategory {
+	if (mimeType.startsWith("image/")) return "image";
+	if (mimeType.startsWith("video/")) return "video";
+	if (mimeType.startsWith("audio/")) return "audio";
+	if (mimeType === "application/pdf") return "pdf";
+	return "other";
+}
+
+/** Whether the browser can render an inline preview for this MIME type. */
+export function isPreviewable(mimeType: string): boolean {
+	return getFileCategory(mimeType) !== "other";
+}
diff --git a/apps/web/src/lib/utils/password.ts b/apps/web/src/lib/utils/password.ts
new file mode 100644
index 0000000..a2d006b
--- /dev/null
+++ b/apps/web/src/lib/utils/password.ts
@@ -0,0 +1,50 @@
+export type StrengthLabelKey = "str_vweak" | "str_weak" | "str_ok" | "str_strong" | "str_exc";
+
+export interface PasswordStrength {
+	readonly score: number;
+	readonly labelKey: StrengthLabelKey | null;
+	readonly color: string;
+}
+
+const STRENGTH_KEYS: readonly StrengthLabelKey[] = [
+	"str_vweak",
+	"str_weak",
+	"str_ok",
+	"str_strong",
+	"str_exc",
+];
+const STRENGTH_COLORS: readonly string[] = ["#ef4444", "#f97316", "#eab308", "#84cc16", "#10b981"];
+
+/** Score a password from 0 to 5 based on length and character variety. */
+export function getPasswordStrength(password: string): PasswordStrength {
+	if (!password) return { score: 0, labelKey: null, color: "var(--muted-2)" };
+
+	let score = 0;
+	if (password.length >= 8) score++;
+	if (password.length >= 14) score++;
+	if (/[A-Z]/.test(password) && /[a-z]/.test(password)) score++;
+	if (/\d/.test(password)) score++;
+	if (/[^\w\s]/.test(password)) score++;
+
+	const idx = Math.min(score - 1, 4);
+	return {
+		score,
+		labelKey: idx >= 0 ? (STRENGTH_KEYS[idx] ?? null) : null,
+		color: idx >= 0 ? (STRENGTH_COLORS[idx] ?? "#ef4444") : "#ef4444",
+	};
+}
+
+// Ambiguous characters (0/O, 1/l/I) are excluded so generated passwords
+// can be read aloud or retyped without confusion.
+const PASSWORD_CHARS = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789!@#$%";
+
+/** Generate a random password from display-safe characters. */
+export function generatePassword(length = 20): string {
+	const values = new Uint32Array(length);
+	crypto.getRandomValues(values);
+	let password = "";
+	for (let i = 0; i < length; i++) {
+		password += PASSWORD_CHARS[(values[i] ?? 0) % PASSWORD_CHARS.length];
+	}
+	return password;
+}
diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte
index 4847dbd..3700fd0 100644
--- a/apps/web/src/routes/+page.svelte
+++ b/apps/web/src/routes/+page.svelte
@@ -1,18 +1,20 @@
 <script lang="ts">
 import type { ContentMode } from "@secret/shared";
-import { EXPIRATION_OPTIONS, MAX_TEXT_SIZE } from "@secret/shared";
+import { MAX_TEXT_SIZE } from "@secret/shared";
 import type { ProgressInfo, UploadPhase } from "@secret/sdk-js";
 import EncryptionBadge from "$lib/components/EncryptionBadge.svelte";
+import FileDropZone from "$lib/components/FileDropZone.svelte";
 import Icon from "$lib/components/Icon.svelte";
 import MarkdownEditor from "$lib/components/MarkdownEditor.svelte";
 import PasswordGenerator from "$lib/components/PasswordGenerator.svelte";
+import SecuritySettings from "$lib/components/SecuritySettings.svelte";
 import StepProgress from "$lib/components/StepProgress.svelte";
+import SuccessView from "$lib/components/SuccessView.svelte";
 import { getClient } from "$lib/client";
 import { getConfig } from "$lib/config.svelte";
 import { t } from "$lib/i18n/index.svelte";
 import { setStep } from "$lib/steps.svelte";
 import { solveCap } from "$lib/utils/cap";
-import { formatSize } from "$lib/utils/format";
 
 let mounted = $state(false);
 $effect(() => {
@@ -23,52 +25,32 @@ $effect(() => {
 	setStep(shareUrl ? 2 : 1);
 });
 
+// Form state
 let contentMode = $state<ContentMode>("text");
 let text = $state("");
 let files = $state<File[]>([]);
 let password = $state("");
-let showPassword = $state(false);
 let expiresIn = $state(86400);
 let maxReads = $state("1");
+
+// Submission state
 let isSubmitting = $state(false);
 let error = $state("");
-let shareUrl = $state("");
-let qrCodeUrl = $state("");
-let manageUrl = $state("");
-let copied = $state(false);
-let copiedPw = $state(false);
-let manageCopied = $state(false);
-let showQR = $state(false);
-let isDragging = $state(false);
 let uploadProgress = $state<number | null>(null);
 let uploadPhase = $state<UploadPhase>("encrypting");
 let uploadChunkLabel = $state("");
-let fileInputEl: HTMLInputElement | undefined = $state();
+
+// Result state
+let shareUrl = $state("");
+let qrCodeUrl = $state("");
+let manageUrl = $state("");
+let createdFileCount = $state(0);
 
 const config = $derived(getConfig());
 const maxFileSize = $derived(config.maxChunkedFileSize || config.maxFileSize);
-const maxTotalSize = $derived(config.maxChunkedFileSize || config.maxFileSize);
 const maxFilesPerNote = $derived(config.maxFilesPerNote);
-let fileError = $state("");
 
-const pwStrength = $derived.by(() => {
-	if (!password) return { score: 0, label: "", color: "var(--muted-2)" };
-	let s = 0;
-	if (password.length >= 8) s++;
-	if (password.length >= 14) s++;
-	if (/[A-Z]/.test(password) && /[a-z]/.test(password)) s++;
-	if (/\d/.test(password)) s++;
-	if (/[^\w\s]/.test(password)) s++;
-	const keys = ["str_vweak", "str_weak", "str_ok", "str_strong", "str_exc"] as const;
-	const colors = ["#ef4444", "#f97316", "#eab308", "#84cc16", "#10b981"];
-	const idx = Math.min(s - 1, 4);
-	const key = idx >= 0 ? keys[idx] : undefined;
-	return {
-		score: s,
-		label: key ? t(key) : "",
-		color: idx >= 0 ? (colors[idx] ?? "#ef4444") : "#ef4444",
-	};
-});
+const canSubmit = $derived(!!(text.trim() || files.length > 0));
 
 async function handleSubmit() {
 	if (!text && files.length === 0) {
@@ -87,7 +69,7 @@ async function handleSubmit() {
 	try {
 		const capToken = await solveCap();
 		const client = await getClient();
-		const parsed = parseInt(String(maxReads), 10);
+		const parsed = parseInt(maxReads, 10);
 		const parsedMaxReads = Number.isNaN(parsed) ? 1 : parsed;
 
 		const noteFiles = await Promise.all(
@@ -122,6 +104,7 @@ async function handleSubmit() {
 		});
 
 		const url = `${window.location.origin}/note/${result.id}#${result.keyFragment}`;
+		createdFileCount = files.length;
 		shareUrl = url;
 		manageUrl = `${window.location.origin}/note/${result.id}/manage#${result.deleteToken}`;
 		const { toDataURL } = await import("qrcode");
@@ -134,91 +117,6 @@ async function handleSubmit() {
 	}
 }
 
-function handleDrop(event: DragEvent) {
-	event.preventDefault();
-	isDragging = false;
-	const droppedFiles = event.dataTransfer?.files;
-	if (droppedFiles) {
-		addFiles(Array.from(droppedFiles));
-	}
-}
-
-function handleFileInput(event: Event) {
-	const input = event.target as HTMLInputElement;
-	if (input.files) {
-		addFiles(Array.from(input.files));
-	}
-}
-
-function addFiles(newFiles: File[]) {
-	fileError = "";
-	const oversized = newFiles.filter((f) => f.size > maxFileSize);
-	if (oversized.length > 0) {
-		fileError = t("error_file_too_large", { size: formatSize(maxFileSize) });
-		return;
-	}
-
-	const remaining = maxFilesPerNote - files.length;
-	const candidates = [...files, ...newFiles.slice(0, remaining)];
-	const totalSize = candidates.reduce((sum, f) => sum + f.size, 0);
-	if (totalSize > maxTotalSize) {
-		fileError = t("error_total_too_large", { size: formatSize(maxTotalSize) });
-		return;
-	}
-
-	files = candidates;
-}
-
-function removeFile(index: number) {
-	files = files.filter((_, i) => i !== index);
-}
-
-async function copyToClipboard() {
-	try {
-		await navigator.clipboard.writeText(shareUrl);
-		copied = true;
-		setTimeout(() => {
-			copied = false;
-		}, 2000);
-	} catch {
-		error = t("error_clipboard");
-	}
-}
-
-async function copyManageUrl() {
-	try {
-		await navigator.clipboard.writeText(manageUrl);
-		manageCopied = true;
-		setTimeout(() => {
-			manageCopied = false;
-		}, 2000);
-	} catch {
-		error = t("error_clipboard");
-	}
-}
-
-async function copyPasswordShare() {
-	try {
-		await navigator.clipboard.writeText(password);
-		copiedPw = true;
-		setTimeout(() => {
-			copiedPw = false;
-		}, 2000);
-	} catch {
-		error = t("error_clipboard");
-	}
-}
-
-function generatePwField() {
-	const chars = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789!@#$%";
-	const arr = new Uint32Array(20);
-	crypto.getRandomValues(arr);
-	let pw = "";
-	for (let i = 0; i < 20; i++) pw += chars[(arr[i] ?? 0) % chars.length];
-	password = pw;
-	showPassword = true;
-}
-
 function reset() {
 	contentMode = "text";
 	text = "";
@@ -229,6 +127,7 @@ function reset() {
 	shareUrl = "";
 	manageUrl = "";
 	qrCodeUrl = "";
+	createdFileCount = 0;
 	error = "";
 	uploadPhase = "encrypting";
 	uploadChunkLabel = "";
@@ -244,40 +143,6 @@ const TABS: {
 	{ id: "markdown", labelKey: "content_mode_markdown", subKey: "tab_markdown_sub", icon: "md" },
 	{ id: "secret", labelKey: "content_mode_secret", subKey: "tab_secret_sub", icon: "key" },
 ];
-
-const READS = [
-	{ value: "1", key: "reads_1" as const },
-	{ value: "3", key: "reads_3" as const },
-	{ value: "10", key: "reads_10" as const },
-	{ value: "100", key: "reads_100" as const },
-];
-
-const canSubmit = $derived(!!(text.trim() || files.length > 0));
-
-const isBurning = $derived(parseInt(String(maxReads), 10) === 1);
-
-const expiryLabelKey = $derived.by(() => {
-	const match = EXPIRATION_OPTIONS.find((o) => o.value === expiresIn);
-	return match?.labelKey ?? "expiry_24h";
-});
-
-const shareUrlParts = $derived.by(() => {
-	if (!shareUrl) return null;
-	const hashIdx = shareUrl.indexOf("#");
-	if (hashIdx < 0) return { protocol: "", host: shareUrl, fragment: "" };
-	const beforeHash = shareUrl.slice(0, hashIdx);
-	const fragment = shareUrl.slice(hashIdx);
-	const protoIdx = beforeHash.indexOf("://");
-	const protocol = protoIdx >= 0 ? beforeHash.slice(0, protoIdx + 3) : "";
-	const host = protoIdx >= 0 ? beforeHash.slice(protoIdx + 3) : beforeHash;
-	return { protocol, host, fragment };
-});
-
-const readsText = $derived(
-	parseInt(String(maxReads), 10) === 1
-		? t("reads_count_one")
-		: t("reads_count_other", { count: String(maxReads) }),
-);
 </script>
 
 <svelte:head>
@@ -312,364 +177,16 @@ const readsText = $derived(
 </svelte:head>
 
 {#if shareUrl}
-	<section>
-		<!-- Hero -->
-		<div class="mb-9 flex flex-col items-start">
-			<span
-				class="mono mb-2 inline-flex items-center gap-1.5 uppercase"
-				style:font-size="11px"
-				style:letter-spacing="0.12em"
-				style:color="var(--muted)"
-			>
-				<Icon name="check" size={11} />
-				<span>{t("ok_eyebrow")}</span>
-			</span>
-			<h1
-				class="serif"
-				style:font-size="clamp(32px, 5vw, 40px)"
-				style:margin="8px 0 24px"
-				style:line-height="1.35"
-				style:letter-spacing="-0.02em"
-				style:font-weight="400"
-				style:padding-bottom="8px"
-			>
-				{t("ok_hero_1")}
-				<em style:color="var(--accent)">{t("ok_hero_unique")}</em>.<br />
-				{t("ok_hero_2")}
-				<span style:color="var(--muted)">{t("ok_hero_3")}</span>
-			</h1>
-			<p style:color="var(--muted)" style:font-size="15px" style:margin="0">
-				{password ? t("ok_hero_sub_pw") : t("ok_hero_sub_nopw")}
-			</p>
-		</div>
-
-		<!-- Link card -->
-		<div
-			class="relative mb-4 overflow-hidden rounded-2xl border"
-			style:background="var(--bg-2)"
-			style:border-color="var(--line)"
-			style:padding="4px"
-		>
-			<div
-				class="mono flex flex-wrap items-center gap-3 uppercase"
-				style:padding="12px 16px 6px"
-				style:font-size="10px"
-				style:color="var(--muted-2)"
-				style:letter-spacing="0.1em"
-			>
-				<span class="inline-flex items-center gap-1.5">
-					<span
-						class="inline-block"
-						style:width="6px"
-						style:height="6px"
-						style:border-radius="2px"
-						style:background="var(--muted)"
-					></span>
-					<span>{t("ok_legend_server")}</span>
-				</span>
-				<span class="inline-flex items-center gap-1.5">
-					<span
-						class="inline-block"
-						style:width="6px"
-						style:height="6px"
-						style:border-radius="2px"
-						style:background="var(--accent)"
-					></span>
-					<span>{t("ok_legend_key")}</span>
-				</span>
-			</div>
-			<div
-				class="flex flex-wrap items-center gap-3"
-				style:padding="4px 18px 18px"
-			>
-				<div
-					class="min-w-0 flex-1 overflow-hidden"
-					style:font-family="var(--font-mono)"
-					style:font-size="14px"
-					style:line-height="1.4"
-					style:white-space="nowrap"
-					style:text-overflow="ellipsis"
-					title={shareUrl}
-					data-testid="share-url"
-				>
-					{#if shareUrlParts}
-						<span style:color="var(--muted-2)">{shareUrlParts.protocol}</span><span
-							style:color="var(--text)">{shareUrlParts.host}</span
-						><span style:color="var(--accent)">{shareUrlParts.fragment}</span>
-					{/if}
-				</div>
-				<button
-					type="button"
-					onclick={copyToClipboard}
-					class="inline-flex items-center gap-1.5 rounded-lg border-0 transition-all"
-					style:background="var(--accent)"
-					style:color="var(--accent-ink)"
-					style:padding="12px 18px"
-					style:font-size="13px"
-					style:font-weight="500"
-					aria-label={t("ok_copy")}
-				>
-					<Icon name={copied ? "check" : "copy"} size={15} />
-					<span>{copied ? t("copied") : t("ok_copy")}</span>
-				</button>
-			</div>
-			<div
-				class="flex"
-				style:border-top="1px solid var(--line)"
-				style:background="var(--bg-3)"
-			>
-				<button
-					type="button"
-					onclick={() => (showQR = !showQR)}
-					class="inline-flex flex-1 items-center justify-center gap-1.5 border-0 bg-transparent transition-colors"
-					style:padding="12px"
-					style:color={showQR ? "var(--text)" : "var(--muted)"}
-					style:font-size="13px"
-				>
-					<Icon name="qr" size={14} />
-					<span>{t("ok_qr")}</span>
-				</button>
-				<span style:width="1px" style:background="var(--line)"></span>
-				<a
-					href={`mailto:?subject=${encodeURIComponent(config.appName)}&body=${encodeURIComponent(shareUrl)}`}
-					class="inline-flex flex-1 items-center justify-center gap-1.5 transition-colors"
-					style:padding="12px"
-					style:color="var(--muted)"
-					style:font-size="13px"
-				>
-					<Icon name="mail" size={14} />
-					<span>{t("ok_email")}</span>
-				</a>
-				<span style:width="1px" style:background="var(--line)"></span>
-				<a
-					href={shareUrl}
-					target="_blank"
-					rel="noopener noreferrer"
-					class="inline-flex flex-1 items-center justify-center gap-1.5 transition-colors"
-					style:padding="12px"
-					style:color="var(--muted)"
-					style:font-size="13px"
-				>
-					<Icon name="eye" size={14} />
-					<span>{t("ok_preview")}</span>
-				</a>
-			</div>
-		</div>
-
-		{#if showQR && qrCodeUrl}
-			<div
-				class="mb-4 flex flex-col items-center gap-4 rounded-2xl border"
-				style:background="var(--bg-2)"
-				style:border-color="var(--line)"
-				style:padding="24px"
-			>
-				<img
-					src={qrCodeUrl}
-					alt={t("qr_alt")}
-					class="rounded-lg"
-					style:background="var(--bg)"
-					width="200"
-					height="200"
-				/>
-				<p
-					class="mono"
-					style:font-size="11px"
-					style:color="var(--muted)"
-					style:margin="0"
-					style:text-align="center"
-				>
-					{t("ok_qr_hint")}
-				</p>
-			</div>
-		{/if}
-
-		{#if password}
-			<div
-				class="mb-4 flex items-center gap-3 rounded-2xl border"
-				style:background="var(--bg-2)"
-				style:border-color="var(--line)"
-				style:padding="16px"
-			>
-				<span
-					class="grid place-items-center rounded-lg"
-					style:width="36px"
-					style:height="36px"
-					style:background="var(--accent-soft)"
-					style:color="var(--accent)"
-				>
-					<Icon name="key" size={16} />
-				</span>
-				<div class="min-w-0 flex-1">
-					<div style:font-size="13px" style:font-weight="500">{t("ok_pw_title")}</div>
-					<div class="mono" style:font-size="11px" style:color="var(--muted)">
-						{t("ok_pw_hint")}
-					</div>
-				</div>
-				<button
-					type="button"
-					onclick={copyPasswordShare}
-					class="inline-flex items-center gap-1.5 rounded-lg border transition-colors"
-					style:background="var(--bg-3)"
-					style:border-color="var(--line)"
-					style:color="var(--text)"
-					style:padding="8px 14px"
-					style:font-size="12px"
-				>
-					<Icon name={copiedPw ? "check" : "copy"} size={13} />
-					<span>{copiedPw ? t("copied") : t("copy_button")}</span>
-				</button>
-			</div>
-		{/if}
-
-		<!-- Facts -->
-		<div
-			class="mb-8 rounded-2xl border"
-			style:background="color-mix(in srgb, var(--accent) 5%, var(--bg-2))"
-			style:border-color="var(--line)"
-			style:padding="20px 24px"
-		>
-			<div
-				class="mono mb-3 inline-flex items-center gap-1.5 uppercase"
-				style:font-size="11px"
-				style:letter-spacing="0.12em"
-				style:color="var(--muted)"
-			>
-				<Icon name="warn" size={11} />
-				<span>{t("ok_facts_title")}</span>
-			</div>
-			<ul class="m-0 flex list-none flex-col gap-2.5 p-0">
-				<li class="flex items-center gap-3">
-					<span
-						class="grid shrink-0 place-items-center rounded-md"
-						style:width="26px"
-						style:height="26px"
-						style:background="var(--bg-3)"
-						style:color="var(--muted)"
-					>
-						<Icon name="clock" size={13} />
-					</span>
-					<span
-						style:color="var(--muted)"
-						style:font-size="13px"
-						style:min-width="140px">{t("ok_facts_expiry")}</span
-					>
-					<span
-						class="mono"
-						style:color="var(--text)"
-						style:font-size="12px"
-						style:font-weight="500">{t(expiryLabelKey)}</span
-					>
-				</li>
-				<li class="flex items-center gap-3">
-					<span
-						class="grid shrink-0 place-items-center rounded-md"
-						style:width="26px"
-						style:height="26px"
-						style:background="var(--bg-3)"
-						style:color={isBurning ? "var(--accent)" : "var(--muted)"}
-					>
-						<Icon name={isBurning ? "flame" : "eye"} size={13} />
-					</span>
-					<span
-						style:color="var(--muted)"
-						style:font-size="13px"
-						style:min-width="140px">{t("ok_facts_reads")}</span
-					>
-					<span
-						class="mono"
-						style:color={isBurning ? "var(--accent)" : "var(--text)"}
-						style:font-size="12px"
-						style:font-weight="500">{readsText}</span
-					>
-				</li>
-				{#if files.length > 0}
-					<li class="flex items-center gap-3">
-						<span
-							class="grid shrink-0 place-items-center rounded-md"
-							style:width="26px"
-							style:height="26px"
-							style:background="var(--bg-3)"
-							style:color="var(--muted)"
-						>
-							<Icon name="paperclip" size={13} />
-						</span>
-						<span
-							style:color="var(--muted)"
-							style:font-size="13px"
-							style:min-width="140px">{t("ok_facts_files")}</span
-						>
-						<span
-							class="mono"
-							style:color="var(--text)"
-							style:font-size="12px"
-							style:font-weight="500"
-							>{t("files_count", { count: files.length })}</span
-						>
-					</li>
-				{/if}
-			</ul>
-		</div>
-
-		{#if manageUrl}
-			<details class="mb-6">
-				<summary
-					class="mono cursor-pointer uppercase"
-					style:font-size="11px"
-					style:letter-spacing="0.1em"
-					style:color="var(--muted-2)"
-				>
-					{t("delete_label")}
-				</summary>
-				<div class="mt-3 flex flex-col gap-2">
-					<div class="flex gap-2">
-						<input
-							id="manage-url"
-							type="text"
-							readonly
-							value={manageUrl}
-							class="min-w-0 flex-1 rounded-lg border outline-none"
-							style:background="var(--bg-2)"
-							style:border-color="var(--line)"
-							style:color="var(--muted)"
-							style:padding="10px 12px"
-							style:font-family="var(--font-mono)"
-							style:font-size="11px"
-						/>
-						<button
-							type="button"
-							onclick={copyManageUrl}
-							class="inline-flex items-center gap-1.5 rounded-lg border transition-colors"
-							style:background="var(--bg-2)"
-							style:border-color="var(--line)"
-							style:color="var(--muted)"
-							style:padding="10px 14px"
-							style:font-size="12px"
-						>
-							<Icon name={manageCopied ? "check" : "copy"} size={13} />
-							<span>{manageCopied ? t("delete_copied") : t("copy_button")}</span>
-						</button>
-					</div>
-					<p style:font-size="11px" style:color="var(--muted-2)">
-						{t("delete_warning")}
-					</p>
-				</div>
-			</details>
-		{/if}
-
-		<button
-			type="button"
-			onclick={reset}
-			class="inline-flex w-full items-center justify-center gap-2 rounded-xl border transition-colors"
-			style:background="var(--bg-2)"
-			style:border-color="var(--line)"
-			style:color="var(--text)"
-			style:padding="14px"
-			style:font-size="14px"
-		>
-			<Icon name="lock" size={14} />
-			<span>{t("ok_new")}</span>
-		</button>
-	</section>
+	<SuccessView
+		{shareUrl}
+		{qrCodeUrl}
+		{manageUrl}
+		{password}
+		fileCount={createdFileCount}
+		{expiresIn}
+		{maxReads}
+		onreset={reset}
+	/>
 {:else}
 	<form
 		onsubmit={(e) => {
@@ -796,274 +313,11 @@ const readsText = $derived(
 
 		<!-- Files dropzone -->
 		{#if contentMode !== "secret"}
-			<div class="mb-8">
-				<label
-					class="mono mb-2 flex items-center gap-1.5 uppercase"
-					style:font-size="11px"
-					style:letter-spacing="0.08em"
-					style:color="var(--muted)"
-				>
-					<Icon name="paperclip" size={12} />
-					<span>{t("files_label")}</span>
-				</label>
-				<button
-					type="button"
-					onclick={() => fileInputEl?.click()}
-					ondragover={(e) => {
-						e.preventDefault();
-						isDragging = true;
-					}}
-					ondragleave={() => {
-						isDragging = false;
-					}}
-					ondrop={handleDrop}
-					class="w-full rounded-xl text-left transition-all"
-					style:background={isDragging ? "var(--accent-soft)" : "var(--bg-2)"}
-					style:border={`1px dashed ${isDragging ? "var(--accent)" : "var(--line-2)"}`}
-					style:padding="20px"
-					aria-label={t("files_drop")}
-				>
-					<input
-						id="file-upload"
-						bind:this={fileInputEl}
-						type="file"
-						multiple
-						onchange={handleFileInput}
-						class="hidden"
-					/>
-					{#if files.length === 0}
-						<div class="flex items-center justify-between gap-4">
-							<div>
-								<div style:color="var(--text)" style:font-size="14px">
-									{t("files_drop_1")}
-									<span
-										style:color="var(--accent)"
-										style:font-weight="500"
-										style:text-decoration="underline"
-										style:text-underline-offset="3px"
-										>{t("files_drop_2")}</span
-									>
-								</div>
-								<div
-									class="mono"
-									style:color="var(--muted-2)"
-									style:font-size="11px"
-									style:margin-top="4px"
-								>
-									{t("files_limit", {
-										count: maxFilesPerNote,
-										size: formatSize(maxTotalSize),
-									})}
-								</div>
-							</div>
-							<Icon name="paperclip" size={20} class="opacity-60" />
-						</div>
-					{:else}
-						<div class="flex flex-col gap-2">
-							{#each files as f, i (f.name + i)}
-								<div
-									class="flex items-center gap-2.5 rounded-lg"
-									style:background="var(--bg-3)"
-									style:padding="8px 10px"
-								>
-									<Icon name="file" size={14} class="shrink-0" />
-									<span
-										class="flex-1 truncate"
-										style:font-size="13px"
-										style:color="var(--text)"
-									>
-										{f.name}
-									</span>
-									<span class="mono" style:font-size="11px" style:color="var(--muted-2)">
-										{formatSize(f.size)}
-									</span>
-									<button
-										type="button"
-										onclick={(e) => {
-											e.stopPropagation();
-											removeFile(i);
-										}}
-										class="border-0 bg-transparent p-1"
-										style:color="var(--muted)"
-										aria-label={t("remove_file", { name: f.name })}
-									>
-										<Icon name="x" size={14} />
-									</button>
-								</div>
-							{/each}
-							<div
-								class="mono"
-								style:font-size="11px"
-								style:color="var(--muted-2)"
-								style:padding-left="4px"
-								style:margin-top="4px"
-							>
-								{t("files_add_more")} ({files.length}/{maxFilesPerNote})
-							</div>
-						</div>
-					{/if}
-				</button>
-				{#if fileError}
-					<p class="mt-2" style:font-size="12px" style:color="var(--accent)">{fileError}</p>
-				{/if}
-			</div>
+			<FileDropZone bind:files {maxFileSize} {maxFilesPerNote} />
 		{/if}
 
 		<!-- Security settings -->
-		<div
-			class="mb-6 rounded-2xl border"
-			style:background="var(--bg-2)"
-			style:border-color="var(--line)"
-			style:padding="24px"
-		>
-			<div
-				class="mono mb-4 inline-flex items-center gap-1.5 uppercase"
-				style:font-size="11px"
-				style:letter-spacing="0.12em"
-				style:color="var(--muted)"
-			>
-				<Icon name="shield" size={11} />
-				<span>{t("security_settings")}</span>
-			</div>
-
-			<div class="flex flex-col gap-5">
-				<div class="flex flex-col gap-2">
-					<label
-						for="password"
-						class="mono flex items-center gap-1.5 uppercase"
-						style:font-size="11px"
-						style:letter-spacing="0.08em"
-						style:color="var(--muted)"
-					>
-						<Icon name="lock" size={12} />
-						<span>{t("password_add_label")}</span>
-					</label>
-					<div class="relative">
-						<input
-							id="password"
-							type={showPassword ? "text" : "password"}
-							bind:value={password}
-							placeholder={t("password_add_placeholder")}
-							autocomplete="off"
-							class="w-full rounded-xl border outline-none transition-colors"
-							style:background="var(--bg-2)"
-							style:border-color="var(--line)"
-							style:color="var(--text)"
-							style:padding="12px 88px 12px 14px"
-							style:font-size="14px"
-						/>
-						<div
-							class="absolute flex gap-0.5"
-							style:right="8px"
-							style:top="50%"
-							style:transform="translateY(-50%)"
-						>
-							<button
-								type="button"
-								onclick={generatePwField}
-								class="inline-flex items-center justify-center rounded-md border-0 bg-transparent"
-								style:color="var(--muted)"
-								style:padding="6px 8px"
-								title="Generate"
-							>
-								<Icon name="dice" size={14} />
-							</button>
-							<button
-								type="button"
-								onclick={() => (showPassword = !showPassword)}
-								class="inline-flex items-center justify-center rounded-md border-0 bg-transparent"
-								style:color="var(--muted)"
-								style:padding="6px 8px"
-								title={showPassword ? t("theme_light") : t("theme_dark")}
-							>
-								<Icon name={showPassword ? "eye-off" : "eye"} size={14} />
-							</button>
-						</div>
-					</div>
-					{#if password}
-						<div class="flex items-center gap-2.5" style:margin-top="4px">
-							<div
-								class="flex-1 overflow-hidden rounded-full"
-								style:height="4px"
-								style:background="var(--bg-3)"
-							>
-								<div
-									class="h-full transition-all"
-									style:width="{(pwStrength.score / 5) * 100}%"
-									style:background={pwStrength.color}
-								></div>
-							</div>
-							<span
-								class="mono"
-								style:font-size="10px"
-								style:color={pwStrength.color}
-								style:min-width="70px"
-								style:text-align="right">{pwStrength.label}</span
-							>
-						</div>
-					{/if}
-					<span class="mono" style:font-size="11px" style:color="var(--muted-2)">
-						{t("password_add_hint")}
-					</span>
-				</div>
-
-				<div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
-					<div class="flex flex-col gap-2">
-						<label
-							for="expires"
-							class="mono flex items-center gap-1.5 uppercase"
-							style:font-size="11px"
-							style:letter-spacing="0.08em"
-							style:color="var(--muted)"
-						>
-							<Icon name="clock" size={12} />
-							<span>{t("expires_label")}</span>
-						</label>
-						<select
-							id="expires"
-							bind:value={expiresIn}
-							class="w-full rounded-xl border outline-none transition-colors"
-							style:background="var(--bg-2)"
-							style:border-color="var(--line)"
-							style:color="var(--text)"
-							style:padding="12px 14px"
-							style:font-size="14px"
-						>
-							{#each EXPIRATION_OPTIONS as option (option.value)}
-								<option value={option.value}>{t(option.labelKey)}</option>
-							{/each}
-						</select>
-					</div>
-
-					<div class="flex flex-col gap-2">
-						<label
-							for="max-reads"
-							class="mono flex items-center gap-1.5 uppercase"
-							style:font-size="11px"
-							style:letter-spacing="0.08em"
-							style:color="var(--muted)"
-						>
-							<Icon name="eye" size={12} />
-							<span>{t("max_reads_label")}</span>
-						</label>
-						<select
-							id="max-reads"
-							bind:value={maxReads}
-							class="w-full rounded-xl border outline-none transition-colors"
-							style:background="var(--bg-2)"
-							style:border-color="var(--line)"
-							style:color="var(--text)"
-							style:padding="12px 14px"
-							style:font-size="14px"
-						>
-							{#each READS as r (r.value)}
-								<option value={r.value}>{t(r.key)}</option>
-							{/each}
-						</select>
-					</div>
-				</div>
-			</div>
-		</div>
+		<SecuritySettings bind:password bind:expiresIn bind:maxReads />
 
 		{#if isSubmitting}
 			<div class="mb-4">
diff --git a/apps/web/src/routes/note/[id]/+page.svelte b/apps/web/src/routes/note/[id]/+page.svelte
index bddaa30..31bc9b1 100644
--- a/apps/web/src/routes/note/[id]/+page.svelte
+++ b/apps/web/src/routes/note/[id]/+page.svelte
@@ -4,13 +4,15 @@ import type { NotePayload } from "@secret/shared";
 import { onMount } from "svelte";
 import { fade, fly } from "svelte/transition";
 import { page } from "$app/state";
+import FileCard from "$lib/components/FileCard.svelte";
 import Icon from "$lib/components/Icon.svelte";
 import StepProgress from "$lib/components/StepProgress.svelte";
 import { getClient } from "$lib/client";
 import { getConfig } from "$lib/config.svelte";
 import { formatDateTime, t } from "$lib/i18n/index.svelte";
 import { setStep } from "$lib/steps.svelte";
-import { formatSize } from "$lib/utils/format";
+import { copyWithFeedback } from "$lib/utils/clipboard";
+import { isPreviewable } from "$lib/utils/fileType";
 
 interface NoteInfo {
 	hasPassword: boolean;
@@ -85,15 +87,9 @@ const showPwInput = $derived(
 const showPrimaryCta = $derived(status.state === "ready" && (!isBurn || burnAccepted));
 
 async function copyText(text: string) {
-	try {
-		await navigator.clipboard.writeText(text);
-		copied = true;
-		setTimeout(() => {
-			copied = false;
-		}, 2000);
-	} catch {
-		/* clipboard API unavailable */
-	}
+	await copyWithFeedback(text, (v) => {
+		copied = v;
+	});
 }
 
 onMount(() => {
@@ -177,37 +173,6 @@ async function handleDecrypt() {
 		}
 	}
 }
-
-function downloadFile(name: string, type: string, d: Uint8Array) {
-	const blob = new Blob([d] as BlobPart[], { type });
-	const url = URL.createObjectURL(blob);
-	const a = document.createElement("a");
-	a.href = url;
-	a.download = name;
-	a.click();
-	URL.revokeObjectURL(url);
-}
-
-function isPreviewable(type: string): boolean {
-	return (
-		type.startsWith("image/") ||
-		type.startsWith("video/") ||
-		type.startsWith("audio/") ||
-		type === "application/pdf"
-	);
-}
-function isImage(type: string): boolean {
-	return type.startsWith("image/");
-}
-function isVideo(type: string): boolean {
-	return type.startsWith("video/");
-}
-function isAudio(type: string): boolean {
-	return type.startsWith("audio/");
-}
-function isPdf(type: string): boolean {
-	return type === "application/pdf";
-}
 </script>
 
 <svelte:head>
@@ -467,8 +432,7 @@ function isPdf(type: string): boolean {
 					</span>
 					<button
 						type="button"
-						onclick={() =>
-							copyText(status.state === "decrypted" ? (status.payload.text ?? "") : "")}
+						onclick={() => copyText(status.state === "decrypted" ? (status.payload.text ?? "") : "")}
 						class="inline-flex items-center gap-1.5 rounded-md border-0 bg-transparent transition-colors"
 						style:color={copied ? "var(--accent)" : "var(--muted)"}
 						style:padding="4px 8px"
@@ -521,72 +485,14 @@ function isPdf(type: string): boolean {
 				</div>
 				<ul class="m-0 flex list-none flex-col gap-3 p-0">
 					{#each status.payload.files as file, i (file.name + i)}
-						<li
-							class="overflow-hidden rounded-2xl border"
-							style:background="var(--bg-2)"
-							style:border-color="var(--line)"
-							in:fly={{ y: 20, duration: 300, delay: Math.min(150 * i, 600) }}
-						>
-							{#if isImage(file.type) && status.previewUrls[i]}
-								<img
-									src={status.previewUrls[i]}
-									alt={file.name}
-									class="max-h-96 w-full object-contain"
-									style:background="var(--bg-3)"
-								/>
-							{:else if isVideo(file.type) && status.previewUrls[i]}
-								<video
-									controls
-									class="max-h-96 w-full"
-									style:background="var(--bg-3)"
-									aria-label={file.name}
-								>
-									<source src={status.previewUrls[i]} type={file.type} />
-									<track kind="captions" />
-								</video>
-							{:else if isAudio(file.type) && status.previewUrls[i]}
-								<audio controls class="w-full" style:padding="16px" aria-label={file.name}>
-									<source src={status.previewUrls[i]} type={file.type} />
-								</audio>
-							{:else if isPdf(file.type) && status.previewUrls[i]}
-								<iframe src={status.previewUrls[i]} class="h-96 w-full" title={file.name} sandbox=""
-								></iframe>
-							{/if}
-							<div class="flex items-center gap-3" style:padding="14px 16px">
-								<Icon name="file" size={16} class="shrink-0" />
-								<div class="min-w-0 flex-1">
-									<p
-										class="mb-0.5 truncate"
-										style:font-family="var(--font-mono)"
-										style:font-size="13px"
-										style:color="var(--text)"
-									>
-										{file.name}
-									</p>
-									<p class="mono" style:font-size="11px" style:color="var(--muted-2)">
-										{file.type} · {formatSize(file.size)}
-									</p>
-								</div>
-								<button
-									type="button"
-									onclick={() =>
-										downloadFile(
-											file.name,
-											file.type,
-											new Uint8Array(file.data as ArrayLike<number>),
-										)}
-									class="inline-flex items-center gap-1.5 rounded-lg border transition-colors"
-									style:background="var(--bg-3)"
-									style:border-color="var(--line)"
-									style:color="var(--text)"
-									style:padding="8px 12px"
-									style:font-size="12px"
-								>
-									<Icon name="download" size={13} />
-									<span>{t("rv_download")}</span>
-								</button>
-							</div>
-						</li>
+						<FileCard
+							name={file.name}
+							type={file.type}
+							size={file.size}
+							data={new Uint8Array(file.data as ArrayLike<number>)}
+							previewUrl={status.previewUrls[i] ?? ""}
+							index={i}
+						/>
 					{/each}
 				</ul>
 			</div>
diff --git a/apps/web/src/routes/note/[id]/manage/+page.svelte b/apps/web/src/routes/note/[id]/manage/+page.svelte
index 3e6d221..972677a 100644
--- a/apps/web/src/routes/note/[id]/manage/+page.svelte
+++ b/apps/web/src/routes/note/[id]/manage/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { page } from "$app/state";
+import Icon from "$lib/components/Icon.svelte";
 import { getClient } from "$lib/client";
 import { getConfig } from "$lib/config.svelte";
 import { t } from "$lib/i18n/index.svelte";
@@ -18,6 +19,10 @@ $effect(() => {
 	mounted = true;
 });
 
+const deleteLabel = $derived(
+	!mounted ? t("loading") : isDeleting ? t("deleting") : t("delete_button"),
+);
+
 async function handleDelete() {
 	if (!confirm(t("delete_confirm"))) return;
 
@@ -46,40 +51,99 @@ async function handleDelete() {
 
 <div class="space-y-6">
 	{#if !data.noteExists && !isDeleted}
-		<div class="rounded-xl border border-slate-700 bg-slate-900 p-8 text-center">
-			<h1 class="text-xl font-semibold text-slate-300">{t("not_found_title")}</h1>
-			<p class="mt-2 text-slate-500">{t("not_found_description")}</p>
-			<a href="/" class="mt-4 inline-block rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-dark transition-colors">
-				{t("new_note")}
+		<div
+			class="rounded-2xl border p-8 text-center"
+			style:background="var(--bg-2)"
+			style:border-color="var(--line)"
+		>
+			<h1 class="serif" style:font-size="24px" style:color="var(--text)">
+				{t("not_found_title")}
+			</h1>
+			<p class="mt-2" style:color="var(--muted)">{t("not_found_description")}</p>
+			<a
+				href="/"
+				class="mt-4 inline-flex items-center gap-2 rounded-lg transition-colors"
+				style:background="var(--accent)"
+				style:color="var(--accent-ink)"
+				style:padding="12px 18px"
+				style:font-size="14px"
+			>
+				<Icon name="lock" size={14} />
+				<span>{t("new_note")}</span>
 			</a>
 		</div>
-
 	{:else if isDeleted}
-		<div class="rounded-xl border border-green-800/50 bg-green-900/20 p-8 text-center">
-			<p class="text-lg font-semibold text-green-300">
-				<i class="fa-solid fa-check"></i> {t("note_deleted")}
+		<div
+			class="rounded-2xl border p-8 text-center"
+			style:background="var(--bg-2)"
+			style:border-color="var(--line)"
+		>
+			<p
+				class="inline-flex items-center justify-center gap-2"
+				style:color="var(--text)"
+				style:font-size="17px"
+				style:font-weight="500"
+			>
+				<Icon name="check" size={16} />
+				<span>{t("note_deleted")}</span>
 			</p>
-			<a href="/" class="mt-4 inline-block rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-dark transition-colors">
-				{t("new_note")}
-			</a>
+			<div>
+				<a
+					href="/"
+					class="mt-4 inline-flex items-center gap-2 rounded-lg transition-colors"
+					style:background="var(--accent)"
+					style:color="var(--accent-ink)"
+					style:padding="12px 18px"
+					style:font-size="14px"
+				>
+					<Icon name="lock" size={14} />
+					<span>{t("new_note")}</span>
+				</a>
+			</div>
 		</div>
-
 	{:else if mounted && !deleteToken}
-		<div class="rounded-xl border border-red-800/50 bg-red-900/20 p-8 text-center">
-			<h1 class="text-lg font-semibold text-red-300">{t("error_title")}</h1>
-			<p class="mt-2 text-sm text-red-400">{t("manage_invalid_token")}</p>
-			<a href="/" class="mt-4 inline-block rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-dark transition-colors">
-				{t("new_note")}
+		<div
+			class="rounded-2xl border p-8 text-center"
+			style:background="var(--accent-soft)"
+			style:border-color="var(--accent-ring)"
+		>
+			<h1 style:color="var(--text)" style:font-size="17px" style:font-weight="600">
+				{t("error_title")}
+			</h1>
+			<p class="mt-2" style:color="var(--muted)" style:font-size="14px">
+				{t("manage_invalid_token")}
+			</p>
+			<a
+				href="/"
+				class="mt-4 inline-flex items-center gap-2 rounded-lg transition-colors"
+				style:background="var(--accent)"
+				style:color="var(--accent-ink)"
+				style:padding="12px 18px"
+				style:font-size="14px"
+			>
+				<Icon name="lock" size={14} />
+				<span>{t("new_note")}</span>
 			</a>
 		</div>
-
 	{:else}
-		<div class="rounded-xl border border-slate-700 bg-slate-900 p-6 space-y-4">
-			<h1 class="text-xl font-semibold">{t("manage_title")}</h1>
-			<p class="text-sm text-slate-400">{t("manage_description")}</p>
+		<div
+			class="space-y-4 rounded-2xl border p-6"
+			style:background="var(--bg-2)"
+			style:border-color="var(--line)"
+		>
+			<h1 class="serif" style:font-size="24px" style:color="var(--text)">
+				{t("manage_title")}
+			</h1>
+			<p style:color="var(--muted)" style:font-size="14px">{t("manage_description")}</p>
 
 			{#if error}
-				<div class="rounded-lg border border-red-800/50 bg-red-900/20 px-4 py-3 text-sm text-red-300" role="alert">
+				<div
+					class="rounded-xl border px-4 py-3 text-sm"
+					style:background="var(--accent-soft)"
+					style:border-color="var(--accent-ring)"
+					style:color="var(--text)"
+					role="alert"
+				>
 					{error}
 				</div>
 			{/if}
@@ -87,9 +151,13 @@ async function handleDelete() {
 			<button
 				onclick={handleDelete}
 				disabled={!mounted || isDeleting}
-				class="w-full rounded-lg border border-red-800/50 bg-red-900/20 px-4 py-3 text-sm font-medium text-red-300 hover:bg-red-900/40 disabled:opacity-50 transition-colors"
+				class="inline-flex w-full items-center justify-center gap-2 rounded-xl border px-4 py-3 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+				style:background="var(--accent-soft)"
+				style:border-color="var(--accent-ring)"
+				style:color="var(--accent)"
 			>
-				<i class="fa-solid fa-trash"></i> {!mounted ? t("loading") : isDeleting ? t("deleting") : t("delete_button")}
+				<Icon name="trash" size={14} />
+				<span>{deleteLabel}</span>
 			</button>
 		</div>
 	{/if}
diff --git a/messages/de.json b/messages/de.json
index 90da944..7bfce6e 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -179,5 +179,14 @@
 	"rv_download": "Herunterladen",
 	"rv_gone_title": "Dieses Geheimnis existiert nicht mehr.",
 	"rv_gone_sub": "Es wurde von unseren Servern gelöscht. Sie können nicht mehr dorthin zurückkehren.",
-	"rv_gone_cta": "Mein eigenes Geheimnis erstellen"
+	"rv_gone_cta": "Mein eigenes Geheimnis erstellen",
+	"show_password": "Passwort anzeigen",
+	"hide_password": "Passwort verbergen",
+	"generate": "Generieren",
+	"md_btn_heading": "Überschrift",
+	"md_btn_bold": "Fett",
+	"md_btn_italic": "Kursiv",
+	"md_btn_link": "Link",
+	"md_btn_code": "Code",
+	"md_btn_list": "Liste"
 }
diff --git a/messages/en.json b/messages/en.json
index 398e98f..55d319b 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -179,5 +179,14 @@
 	"rv_gone_title": "This secret no longer exists.",
 	"rv_gone_sub": "It has been deleted from our servers. You can no longer return to it.",
 	"rv_gone_cta": "Create my own secret",
-	"ok_new": "Create another secret"
+	"ok_new": "Create another secret",
+	"show_password": "Show password",
+	"hide_password": "Hide password",
+	"generate": "Generate",
+	"md_btn_heading": "Heading",
+	"md_btn_bold": "Bold",
+	"md_btn_italic": "Italic",
+	"md_btn_link": "Link",
+	"md_btn_code": "Code",
+	"md_btn_list": "List"
 }
diff --git a/messages/es.json b/messages/es.json
index c668f8e..0431834 100644
--- a/messages/es.json
+++ b/messages/es.json
@@ -179,5 +179,14 @@
 	"rv_download": "Descargar",
 	"rv_gone_title": "Este secreto ya no existe.",
 	"rv_gone_sub": "Se ha eliminado de nuestros servidores. Ya no podrás volver a él.",
-	"rv_gone_cta": "Crear mi propio secreto"
+	"rv_gone_cta": "Crear mi propio secreto",
+	"show_password": "Mostrar contraseña",
+	"hide_password": "Ocultar contraseña",
+	"generate": "Generar",
+	"md_btn_heading": "Encabezado",
+	"md_btn_bold": "Negrita",
+	"md_btn_italic": "Cursiva",
+	"md_btn_link": "Enlace",
+	"md_btn_code": "Código",
+	"md_btn_list": "Lista"
 }
diff --git a/messages/fr.json b/messages/fr.json
index fd127fd..ef74a39 100644
--- a/messages/fr.json
+++ b/messages/fr.json
@@ -179,5 +179,14 @@
 	"rv_gone_title": "Ce secret n'existe plus.",
 	"rv_gone_sub": "Il a été supprimé de nos serveurs. Vous ne pouvez plus y revenir.",
 	"rv_gone_cta": "Créer mon propre secret",
-	"ok_new": "Créer un autre secret"
+	"ok_new": "Créer un autre secret",
+	"show_password": "Afficher le mot de passe",
+	"hide_password": "Masquer le mot de passe",
+	"generate": "Générer",
+	"md_btn_heading": "Titre",
+	"md_btn_bold": "Gras",
+	"md_btn_italic": "Italique",
+	"md_btn_link": "Lien",
+	"md_btn_code": "Code",
+	"md_btn_list": "Liste"
 }
diff --git a/messages/it.json b/messages/it.json
index a07e02b..444d2af 100644
--- a/messages/it.json
+++ b/messages/it.json
@@ -179,5 +179,14 @@
 	"rv_download": "Scarica",
 	"rv_gone_title": "Questo segreto non esiste più.",
 	"rv_gone_sub": "È stato eliminato dai nostri server. Non puoi più tornarci.",
-	"rv_gone_cta": "Crea il mio segreto"
+	"rv_gone_cta": "Crea il mio segreto",
+	"show_password": "Mostra password",
+	"hide_password": "Nascondi password",
+	"generate": "Genera",
+	"md_btn_heading": "Intestazione",
+	"md_btn_bold": "Grassetto",
+	"md_btn_italic": "Corsivo",
+	"md_btn_link": "Link",
+	"md_btn_code": "Codice",
+	"md_btn_list": "Elenco"
 }
diff --git a/messages/ja.json b/messages/ja.json
index e8bf4c3..dfd97c9 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -179,5 +179,14 @@
 	"rv_download": "ダウンロード",
 	"rv_gone_title": "この秘密はもう存在しません。",
 	"rv_gone_sub": "サーバーから削除されました。もう戻れません。",
-	"rv_gone_cta": "自分の秘密を作成"
+	"rv_gone_cta": "自分の秘密を作成",
+	"show_password": "パスワードを表示",
+	"hide_password": "パスワードを隠す",
+	"generate": "生成",
+	"md_btn_heading": "見出し",
+	"md_btn_bold": "太字",
+	"md_btn_italic": "斜体",
+	"md_btn_link": "リンク",
+	"md_btn_code": "コード",
+	"md_btn_list": "リスト"
 }
diff --git a/messages/ko.json b/messages/ko.json
index c7fcdf1..ff7c05d 100644
--- a/messages/ko.json
+++ b/messages/ko.json
@@ -179,5 +179,14 @@
 	"rv_download": "다운로드",
 	"rv_gone_title": "이 비밀은 더 이상 존재하지 않습니다.",
 	"rv_gone_sub": "서버에서 삭제되었습니다. 다시 돌아갈 수 없습니다.",
-	"rv_gone_cta": "내 비밀 만들기"
+	"rv_gone_cta": "내 비밀 만들기",
+	"show_password": "비밀번호 표시",
+	"hide_password": "비밀번호 숨기기",
+	"generate": "생성",
+	"md_btn_heading": "제목",
+	"md_btn_bold": "굵게",
+	"md_btn_italic": "기울임꼴",
+	"md_btn_link": "링크",
+	"md_btn_code": "코드",
+	"md_btn_list": "목록"
 }
diff --git a/messages/pt.json b/messages/pt.json
index bc1e976..6812ce3 100644
--- a/messages/pt.json
+++ b/messages/pt.json
@@ -179,5 +179,14 @@
 	"rv_download": "Transferir",
 	"rv_gone_title": "Este segredo já não existe.",
 	"rv_gone_sub": "Foi eliminado dos nossos servidores. Já não pode voltar a aceder-lhe.",
-	"rv_gone_cta": "Criar o meu próprio segredo"
+	"rv_gone_cta": "Criar o meu próprio segredo",
+	"show_password": "Mostrar senha",
+	"hide_password": "Ocultar senha",
+	"generate": "Gerar",
+	"md_btn_heading": "Título",
+	"md_btn_bold": "Negrito",
+	"md_btn_italic": "Itálico",
+	"md_btn_link": "Link",
+	"md_btn_code": "Código",
+	"md_btn_list": "Lista"
 }
diff --git a/messages/ru.json b/messages/ru.json
index 53e87bc..d97b7e2 100644
--- a/messages/ru.json
+++ b/messages/ru.json
@@ -179,5 +179,14 @@
 	"rv_download": "Скачать",
 	"rv_gone_title": "Этот секрет больше не существует.",
 	"rv_gone_sub": "Он удалён с наших серверов. Вы больше не можете к нему вернуться.",
-	"rv_gone_cta": "Создать собственный секрет"
+	"rv_gone_cta": "Создать собственный секрет",
+	"show_password": "Показать пароль",
+	"hide_password": "Скрыть пароль",
+	"generate": "Сгенерировать",
+	"md_btn_heading": "Заголовок",
+	"md_btn_bold": "Жирный",
+	"md_btn_italic": "Курсив",
+	"md_btn_link": "Ссылка",
+	"md_btn_code": "Код",
+	"md_btn_list": "Список"
 }
diff --git a/messages/zh.json b/messages/zh.json
index d7c8d93..4fa66af 100644
--- a/messages/zh.json
+++ b/messages/zh.json
@@ -179,5 +179,14 @@
 	"rv_download": "下载",
 	"rv_gone_title": "此秘密不再存在。",
 	"rv_gone_sub": "已从我们的服务器中删除。您无法再返回。",
-	"rv_gone_cta": "创建我自己的秘密"
+	"rv_gone_cta": "创建我自己的秘密",
+	"show_password": "显示密码",
+	"hide_password": "隐藏密码",
+	"generate": "生成",
+	"md_btn_heading": "标题",
+	"md_btn_bold": "粗体",
+	"md_btn_italic": "斜体",
+	"md_btn_link": "链接",
+	"md_btn_code": "代码",
+	"md_btn_list": "列表"
 }
diff --git a/packages/shared/src/__tests__/validation.test.ts b/packages/shared/src/__tests__/validation.test.ts
index 7f792f0..f6b00f3 100644
--- a/packages/shared/src/__tests__/validation.test.ts
+++ b/packages/shared/src/__tests__/validation.test.ts
@@ -4,7 +4,9 @@ import {
 	chunkedUploadInitSchema,
 	createNoteMultipartSchema,
 	createNoteSchema,
+	isValidNoteId,
 	noteIdSchema,
+	uploadSessionMetadataSchema,
 } from "../validation.js";
 
 describe("createNoteSchema", () => {
@@ -275,6 +277,93 @@ describe("chunkedUploadInitSchema", () => {
 	});
 });
 
+describe("uploadSessionMetadataSchema", () => {
+	const validMeta = {
+		streamHeader: "someHeader",
+		clientNonce: "base64nonce==",
+		hasPassword: false,
+		expiresIn: 3600,
+		maxReads: 1,
+		fileCount: 1,
+	};
+
+	it("accepts valid metadata", () => {
+		const result = uploadSessionMetadataSchema.safeParse(validMeta);
+		expect(result.success).toBe(true);
+	});
+
+	it("accepts metadata with salt", () => {
+		const result = uploadSessionMetadataSchema.safeParse({ ...validMeta, salt: "someSalt" });
+		expect(result.success).toBe(true);
+	});
+
+	it("rejects missing streamHeader", () => {
+		const { streamHeader: _, ...withoutHeader } = validMeta;
+		const result = uploadSessionMetadataSchema.safeParse(withoutHeader);
+		expect(result.success).toBe(false);
+	});
+
+	it("rejects missing maxReads (no default in persisted metadata)", () => {
+		const { maxReads: _, ...withoutMaxReads } = validMeta;
+		const result = uploadSessionMetadataSchema.safeParse(withoutMaxReads);
+		expect(result.success).toBe(false);
+	});
+
+	it("rejects non-object values", () => {
+		expect(uploadSessionMetadataSchema.safeParse(null).success).toBe(false);
+		expect(uploadSessionMetadataSchema.safeParse("string").success).toBe(false);
+		expect(uploadSessionMetadataSchema.safeParse(42).success).toBe(false);
+	});
+
+	it("rejects expiresIn outside allowed range", () => {
+		expect(
+			uploadSessionMetadataSchema.safeParse({ ...validMeta, expiresIn: MIN_EXPIRY_SECONDS - 1 })
+				.success,
+		).toBe(false);
+		expect(
+			uploadSessionMetadataSchema.safeParse({ ...validMeta, expiresIn: MAX_EXPIRY_SECONDS + 1 })
+				.success,
+		).toBe(false);
+	});
+});
+
+describe("isValidNoteId", () => {
+	it("accepts a valid note ID", () => {
+		expect(isValidNoteId("abc123def456")).toBe(true);
+	});
+
+	it("accepts URL-safe characters (hyphen, underscore)", () => {
+		expect(isValidNoteId("abc_def-gh12")).toBe(true);
+	});
+
+	it("rejects an empty string", () => {
+		expect(isValidNoteId("")).toBe(false);
+	});
+
+	it("rejects an ID with the wrong length", () => {
+		expect(isValidNoteId("abc")).toBe(false);
+		expect(isValidNoteId("a".repeat(NOTE_ID_LENGTH + 1))).toBe(false);
+	});
+
+	it("rejects special characters", () => {
+		expect(isValidNoteId("abc!@#$%^&*(")).toBe(false);
+	});
+
+	it("agrees with noteIdSchema for representative inputs", () => {
+		const candidates = [
+			"abc123def456",
+			"abc_def-gh12",
+			"",
+			"abc",
+			"abc!@#$%^&*(",
+			"a".repeat(NOTE_ID_LENGTH + 1),
+		];
+		for (const candidate of candidates) {
+			expect(isValidNoteId(candidate)).toBe(noteIdSchema.safeParse(candidate).success);
+		}
+	});
+});
+
 describe("noteIdSchema", () => {
 	it("accepts a valid note ID", () => {
 		const result = noteIdSchema.safeParse("abc123def456");
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 087b169..ed95946 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -43,6 +43,7 @@ export type {
 	ServerConfig,
 } from "./types.js";
 export { EXPIRATION_OPTIONS } from "./types.js";
+export type { UploadSessionMetadata } from "./validation.js";
 export {
 	chunkedUploadCompleteResponseSchema,
 	chunkedUploadInitResponseSchema,
@@ -53,8 +54,10 @@ export {
 	createNoteSchema,
 	deleteNoteResponseSchema,
 	errorResponseSchema,
+	isValidNoteId,
 	noteExistsResponseSchema,
 	noteIdSchema,
 	noteNotFoundResponseSchema,
 	readNoteResponseSchema,
+	uploadSessionMetadataSchema,
 } from "./validation.js";
diff --git a/packages/shared/src/test-vectors/vectors.json b/packages/shared/src/test-vectors/vectors.json
index 87d5ae7..e621f1a 100644
--- a/packages/shared/src/test-vectors/vectors.json
+++ b/packages/shared/src/test-vectors/vectors.json
@@ -1,6 +1,6 @@
 {
 	"version": 1,
-	"generatedWith": "libsodium-wrappers-sumo 1.0.21",
+	"generatedWith": "libsodium-wrappers-sumo 1.0.22",
 	"vectors": {
 		"xchacha20poly1305": [
 			{
diff --git a/packages/shared/src/validation.ts b/packages/shared/src/validation.ts
index 02fbe4e..eebb2b9 100644
--- a/packages/shared/src/validation.ts
+++ b/packages/shared/src/validation.ts
@@ -46,11 +46,21 @@ export const createNoteMultipartSchema = z
 		path: ["salt"],
 	});
 
+const NOTE_ID_RE = /^[A-Za-z0-9_-]+$/;
+
 export const noteIdSchema = z
 	.string()
-	.regex(/^[A-Za-z0-9_-]+$/, "Invalid note ID format")
+	.regex(NOTE_ID_RE, "Invalid note ID format")
 	.length(NOTE_ID_LENGTH, `Note ID must be ${String(NOTE_ID_LENGTH)} characters`);
 
+/**
+ * Runtime guard for note IDs in non-OpenAPI routes (raw/stream endpoints).
+ * Single source of truth for the ID format — keep in sync with noteIdSchema.
+ */
+export function isValidNoteId(id: string): boolean {
+	return id.length === NOTE_ID_LENGTH && NOTE_ID_RE.test(id);
+}
+
 // --- Response schemas ---
 
 export const createNoteResponseSchema = z.object({
@@ -93,16 +103,27 @@ export const errorResponseSchema = z.object({
 
 // --- Chunked upload schemas ---
 
-export const chunkedUploadInitSchema = z
-	.object({
-		streamHeader: z.string().min(1).max(MAX_NONCE_LENGTH),
-		clientNonce: z.string().min(1).max(MAX_NONCE_LENGTH),
-		hasPassword: z.boolean(),
-		expiresIn: z.number().int().min(MIN_EXPIRY_SECONDS).max(MAX_EXPIRY_SECONDS),
+/**
+ * Shape of the JSON metadata persisted in an upload session row
+ * (uploads.metadata column). Validated again on /complete so corrupted
+ * rows surface as 500s instead of inserting malformed notes.
+ */
+export const uploadSessionMetadataSchema = z.object({
+	streamHeader: z.string().min(1).max(MAX_NONCE_LENGTH),
+	clientNonce: z.string().min(1).max(MAX_NONCE_LENGTH),
+	hasPassword: z.boolean(),
+	expiresIn: z.number().int().min(MIN_EXPIRY_SECONDS).max(MAX_EXPIRY_SECONDS),
+	maxReads: z.number().int().min(0).max(1000),
+	fileCount: z.number().int().min(0).max(MAX_FILES_PER_NOTE),
+	salt: z.string().min(1).max(100).optional(),
+});
+
+export type UploadSessionMetadata = z.infer<typeof uploadSessionMetadataSchema>;
+
+export const chunkedUploadInitSchema = uploadSessionMetadataSchema
+	.extend({
 		maxReads: z.number().int().min(0).max(1000).default(1),
-		fileCount: z.number().int().min(0).max(MAX_FILES_PER_NOTE),
 		chunkCount: z.number().int().min(1).max(10000),
-		salt: z.string().min(1).max(100).optional(),
 	})
 	.refine((data) => !data.hasPassword || data.salt !== undefined, {
 		message: "Salt is required when password is set",