diff --git a/frontend/src/lib/components/document/BulkDocumentEditLayout.svelte b/frontend/src/lib/components/document/BulkDocumentEditLayout.svelte
index 8a280226..2c9b8511 100644
--- a/frontend/src/lib/components/document/BulkDocumentEditLayout.svelte
+++ b/frontend/src/lib/components/document/BulkDocumentEditLayout.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 import { SvelteMap } from 'svelte/reactivity';
 import { goto } from '$app/navigation';
-import { untrack } from 'svelte';
+import { onMount, onDestroy, untrack } from 'svelte';
+import { m } from '$lib/paraglide/messages.js';
 import BulkDropZone from './BulkDropZone.svelte';
 import FileSwitcherStrip from './FileSwitcherStrip.svelte';
 import type { FileEntry } from './FileSwitcherStrip.svelte';
@@ -9,6 +10,7 @@ import ScopeCard from './ScopeCard.svelte';
 import UploadSaveBar from './UploadSaveBar.svelte';
 import WhoWhenSection from './WhoWhenSection.svelte';
 import DescriptionSection from './DescriptionSection.svelte';
+import PdfViewer from '$lib/components/PdfViewer.svelte';
 import { bulkTitleFromFilename } from '$lib/utils/filename';
 import type { Tag } from '$lib/components/TagInput.svelte';
 import type { components } from '$lib/generated/api';
@@ -25,6 +27,12 @@ let {
 	initialReceivers?: Person[];
 } = $props();
 
+// --- Layout ---
+let navHeight = $state(0);
+onMount(() => {
+	navHeight = document.querySelector('header')?.getBoundingClientRect().height ?? 0;
+});
+
 // --- File state ---
 let files = new SvelteMap<string, FileEntry>();
 let activeId = $state<string | null>(null);
@@ -40,17 +48,20 @@ let tags = $state<Tag[]>([]);
 const isMulti = $derived(files.size >= 2);
 const activeFile = $derived(activeId ? files.get(activeId) : null);
 
-// --- Handlers ---
+// --- File management ---
 function addFiles(newFiles: File[]) {
 	for (const file of newFiles) {
 		const id = crypto.randomUUID();
 		const title = bulkTitleFromFilename(file.name);
-		files.set(id, { id, file, title, status: 'idle' });
+		const previewUrl = URL.createObjectURL(file);
+		files.set(id, { id, file, title, status: 'idle', previewUrl });
 		if (!activeId) activeId = id;
 	}
 }
 
 function removeFile(id: string) {
+	const entry = files.get(id);
+	if (entry?.previewUrl) URL.revokeObjectURL(entry.previewUrl);
 	files.delete(id);
 	if (activeId === id) {
 		activeId = files.keys().next().value ?? null;
@@ -62,6 +73,22 @@ function setTitle(id: string, title: string) {
 	if (entry) files.set(id, { ...entry, title });
 }
 
+function discardAll() {
+	for (const entry of files.values()) {
+		if (entry.previewUrl) URL.revokeObjectURL(entry.previewUrl);
+	}
+	files.clear();
+	activeId = null;
+	chunkProgress = undefined;
+}
+
+onDestroy(() => {
+	for (const entry of files.values()) {
+		if (entry.previewUrl) URL.revokeObjectURL(entry.previewUrl);
+	}
+});
+
+// --- Save ---
 async function save() {
 	const entries = Array.from(files.values());
 	const chunkSize = 10;
@@ -82,63 +109,118 @@ async function save() {
 			documentDate: dateIso || null
 		};
 		formData.append('metadata', new Blob([JSON.stringify(metadata)], { type: 'application/json' }));
-		await fetch('/api/documents/quick-upload', { method: 'POST', body: formData });
+		const res = await fetch('/api/documents/quick-upload', { method: 'POST', body: formData });
+		if (!res.ok) {
+			const body = await res.json().catch(() => ({ errors: [] }));
+			const errorCount = (body.errors ?? []).length;
+			for (let j = 0; j < errorCount && j < chunk.length; j++) {
+				const e = files.get(chunk[j].id);
+				if (e) files.set(chunk[j].id, { ...e, status: 'error' });
+			}
+		}
 		chunkProgress = { done: i + 1, total: chunks.length };
 	}
 	goto('/documents');
 }
 </script>
 
-{#if files.size === 0}
-	<!-- N=0: full-panel drop zone -->
-	<div class="flex min-h-[400px] flex-col">
-		<BulkDropZone onFilesAdded={addFiles} />
-	</div>
-{:else}
-	<div class="mx-auto flex max-w-7xl flex-col gap-0 px-4 py-6">
+<div class="fixed inset-x-0 bottom-0 flex flex-col" style="top: {navHeight}px">
+	<!-- Topbar -->
+	<div class="flex shrink-0 items-center gap-3 border-b border-line bg-surface px-6 py-3">
+		<a
+			href="/documents"
+			class="flex items-center gap-1.5 text-xs font-bold tracking-widest text-ink-3 uppercase hover:text-ink"
+		>
+			<svg
+				class="h-3.5 w-3.5"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				aria-hidden="true"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M10 19l-7-7m0 0l7-7m-7 7h18"
+				/>
+			</svg>
+			{m.btn_back_to_overview()}
+		</a>
+		<span class="text-ink-3" aria-hidden="true">·</span>
+		<span class="font-serif text-sm font-bold text-ink">
+			{isMulti ? 'Neue Dokumente' : 'Neues Dokument'}
+		</span>
 		{#if isMulti}
-			<FileSwitcherStrip
-				files={Array.from(files.values())}
-				activeId={activeId ?? ''}
-				onSelect={(id) => (activeId = id)}
-				onRemove={removeFile}
-			/>
+			<span class="ml-auto flex items-center gap-3">
+				<span class="rounded-[2px] bg-accent px-2 py-0.5 text-xs font-bold text-primary">
+					{m.bulk_count_pill({ count: files.size })}
+				</span>
+				<button
+					type="button"
+					onclick={discardAll}
+					class="text-xs font-medium text-red-600/70 hover:text-red-700"
+				>
+					{m.bulk_discard_all()}
+				</button>
+			</span>
 		{/if}
+	</div>
 
-		<div class="flex gap-6">
-			<!-- Left: PDF preview -->
-			<div class="hidden w-1/2 lg:block">
-				{#if activeFile}
-					<div
-						class="flex h-[600px] flex-col items-center justify-center rounded-sm bg-gray-900 text-white/40"
-					>
-						<span class="text-sm">{activeFile.file.name}</span>
-						<span class="mt-1 text-xs">Vorschau nach Upload verfügbar</span>
-					</div>
-				{/if}
-			</div>
-
-			<!-- Right: metadata -->
-			<div class="flex flex-1 flex-col gap-4">
+	<!-- Split panel -->
+	<div class="flex flex-1 overflow-hidden">
+		<!-- Left: PDF preview / drop zone (55%) -->
+		<div class="relative flex flex-[55] flex-col overflow-hidden border-r border-line bg-pdf-bg">
+			{#if files.size === 0}
+				<!-- N=0: centred drop-zone box fills the panel -->
+				<BulkDropZone onFilesAdded={addFiles} />
+			{:else}
+				<!-- N≥1: real PDF preview via local blob URL -->
+				<div class="relative flex-1 overflow-hidden">
+					{#if activeFile}
+						<PdfViewer url={activeFile.previewUrl} />
+					{/if}
+				</div>
 				{#if isMulti}
-					<!-- Per-file scope card: title -->
-					<ScopeCard variant="per-file" data-variant="per-file">
+					<!-- File switcher strip pinned to bottom of left panel -->
+					<FileSwitcherStrip
+						files={Array.from(files.values())}
+						activeId={activeId ?? ''}
+						onSelect={(id) => (activeId = id)}
+						onRemove={removeFile}
+					/>
+				{/if}
+			{/if}
+		</div>
+
+		<!-- Right: metadata form (45%) -->
+		<div class="flex flex-[45] flex-col overflow-hidden">
+			<!-- Scrollable form area — greyed out and non-interactive when no files selected -->
+			<div
+				class="flex-1 overflow-y-auto p-4 transition-opacity"
+				class:opacity-60={files.size === 0}
+				class:pointer-events-none={files.size === 0}
+			>
+				{#if isMulti}
+					<!-- N≥2: per-file card (title) + shared card (metadata) -->
+					<ScopeCard variant="per-file">
 						{#if activeFile}
 							<label class="block">
-								<span class="mb-1 block text-xs font-medium text-brand-navy/70">Titel</span>
+								<span class="mb-1 block text-xs font-medium tracking-widest text-ink-2 uppercase">
+									{m.form_label_title()} <span class="text-danger">*</span>
+								</span>
 								<input
 									type="text"
 									value={activeFile.title}
 									oninput={(e) =>
 										setTitle(activeId!, (e.currentTarget as HTMLInputElement).value)}
-									class="border-brand-sand block w-full rounded-sm border p-2 text-sm focus:border-brand-mint focus:outline-none"
+									class="block w-full rounded-sm border border-line bg-surface p-2 text-sm focus:border-accent focus:outline-none"
 								/>
 							</label>
 						{/if}
 					</ScopeCard>
 
-					<!-- Shared scope card: metadata -->
-					<ScopeCard variant="shared" count={files.size} data-variant="shared">
+					<ScopeCard variant="shared" count={files.size}>
 						<WhoWhenSection
 							bind:senderId={senderId}
 							bind:selectedReceivers={selectedReceivers}
@@ -148,22 +230,32 @@ async function save() {
 						<DescriptionSection bind:tags={tags} hideTitle />
 					</ScopeCard>
 				{:else}
-					<!-- N=1: no scope cards, just the fields directly -->
-					{#if activeFile}
-						<div class="border-brand-sand rounded-sm border bg-white p-4 shadow-sm">
-							<label class="block">
-								<span class="mb-1 block text-xs font-medium text-brand-navy/70">Titel</span>
+					<!-- N=0 (disabled placeholder) or N=1 (active): title + shared form -->
+					<div class="mb-4">
+						<label class="block">
+							<span class="mb-1 block text-xs font-medium tracking-widest text-ink-2 uppercase">
+								{m.form_label_title()} <span class="text-danger">*</span>
+							</span>
+							{#if activeFile}
 								<input
 									type="text"
 									value={activeFile.title}
 									oninput={(e) =>
 										setTitle(activeId!, (e.currentTarget as HTMLInputElement).value)}
-									class="border-brand-sand block w-full rounded-sm border p-2 text-sm focus:border-brand-mint focus:outline-none"
+									class="block w-full rounded-sm border border-line bg-surface p-2 text-sm focus:border-accent focus:outline-none"
 								/>
-							</label>
-						</div>
-					{/if}
-					<div class="border-brand-sand rounded-sm border bg-white p-4 shadow-sm">
+							{:else}
+								<input
+									type="text"
+									disabled
+									placeholder="—"
+									class="block w-full rounded-sm border border-line bg-surface p-2 text-sm text-ink-3"
+								/>
+							{/if}
+						</label>
+					</div>
+
+					<div class="rounded-sm border border-line bg-surface p-4 shadow-sm">
 						<WhoWhenSection
 							bind:senderId={senderId}
 							bind:selectedReceivers={selectedReceivers}
@@ -174,17 +266,14 @@ async function save() {
 					</div>
 				{/if}
 			</div>
-		</div>
 
-		<UploadSaveBar
-			fileCount={files.size}
-			chunkProgress={chunkProgress}
-			onSave={save}
-			onDiscard={() => {
-				files.clear();
-				activeId = null;
-				chunkProgress = undefined;
-			}}
-		/>
+			<!-- Action bar: always visible at bottom of right panel -->
+			<UploadSaveBar
+				fileCount={files.size}
+				chunkProgress={chunkProgress}
+				onSave={save}
+				onDiscard={discardAll}
+			/>
+		</div>
 	</div>
-{/if}
+</div>
diff --git a/frontend/src/lib/components/document/BulkDropZone.svelte b/frontend/src/lib/components/document/BulkDropZone.svelte
index 065159e3..a279ffc5 100644
--- a/frontend/src/lib/components/document/BulkDropZone.svelte
+++ b/frontend/src/lib/components/document/BulkDropZone.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
 let {
 	onFilesAdded
 }: {
@@ -8,30 +10,35 @@ let {
 let isDragging = $state(false);
 </script>
 
-<div class="flex min-h-[300px] flex-1 flex-col items-center justify-center bg-pdf-bg">
+<div
+	role="region"
+	aria-label="Dateien ablegen"
+	data-testid="bulk-drop-zone"
+	class="flex flex-1 flex-col items-center justify-center p-6"
+	ondragover={(e) => {
+		e.preventDefault();
+		isDragging = true;
+	}}
+	ondragleave={() => (isDragging = false)}
+	ondrop={(e) => {
+		e.preventDefault();
+		isDragging = false;
+		if (e.dataTransfer && e.dataTransfer.files.length > 0) {
+			onFilesAdded(Array.from(e.dataTransfer.files));
+		}
+	}}
+>
 	<div
-		role="region"
-		aria-label="Dateien ablegen"
-		data-testid="bulk-drop-zone"
-		class="flex flex-col items-center gap-4 rounded-sm border border-dashed p-12 text-center transition-colors
-			{isDragging ? 'border-brand-mint ring-2 ring-brand-mint' : 'border-white/20'}"
-		ondragover={(e) => {
-			e.preventDefault();
-			isDragging = true;
-		}}
-		ondragleave={() => (isDragging = false)}
-		ondrop={(e) => {
-			e.preventDefault();
-			isDragging = false;
-			if (e.dataTransfer && e.dataTransfer.files.length > 0) {
-				onFilesAdded(Array.from(e.dataTransfer.files));
-			}
-		}}
+		class={[
+			'flex w-full max-w-sm flex-col items-center gap-3 rounded-md border-2 border-dashed px-6 py-9 text-center transition-colors',
+			isDragging ? 'border-accent bg-accent/10' : 'border-accent/50 bg-white/[0.04]'
+		].join(' ')}
 	>
-		<div class="flex h-8 w-8 items-center justify-center rounded-full bg-white/10 text-white/40">
+		<!-- Circular mint icon -->
+		<div class="flex h-14 w-14 items-center justify-center rounded-full bg-accent text-primary">
 			<svg
-				width="16"
-				height="16"
+				width="22"
+				height="22"
 				viewBox="0 0 32 32"
 				xmlns="http://www.w3.org/2000/svg"
 				aria-hidden="true"
@@ -42,11 +49,20 @@ let isDragging = $state(false);
 				/>
 			</svg>
 		</div>
-		<p class="text-sm font-medium text-white/60">PDF-Dateien hier ablegen</p>
-		<p class="text-xs text-white/30">oder</p>
+
+		<!-- Serif title -->
+		<p class="font-serif text-sm font-bold text-ink">{m.bulk_drop_hint()}</p>
+
+		<!-- Sub description -->
+		<p class="text-xs leading-relaxed text-ink-2">
+			Für jede Datei wird ein eigenes Dokument erstellt.<br />
+			<strong class="text-ink">Der Titel</strong> wird aus dem Dateinamen vorausgefüllt —
+			<strong class="text-ink">alle anderen Felder</strong> gelten für alle gemeinsam.
+		</p>
+
+		<!-- CTA button -->
 		<label
-			class="flex min-h-[44px] cursor-pointer items-center rounded-sm bg-brand-navy px-4 py-1.5 text-xs font-bold tracking-widest text-white/90 uppercase"
-			aria-label="Dateien auswählen"
+			class="flex min-h-[44px] cursor-pointer items-center rounded-sm bg-primary px-4 py-2 text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-90"
 		>
 			Dateien auswählen
 			<input
@@ -60,5 +76,8 @@ let isDragging = $state(false);
 				}}
 			/>
 		</label>
+
+		<!-- Format hint -->
+		<p class="text-[11px] text-ink-3">{m.bulk_drop_sub()}</p>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/document/FileSwitcherStrip.svelte b/frontend/src/lib/components/document/FileSwitcherStrip.svelte
index e7badb4d..eef08b87 100644
--- a/frontend/src/lib/components/document/FileSwitcherStrip.svelte
+++ b/frontend/src/lib/components/document/FileSwitcherStrip.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
 export interface FileEntry {
 	id: string;
 	file: File;
 	title: string;
 	status: 'idle' | 'error';
+	previewUrl: string;
 }
 
 let {
@@ -18,14 +21,22 @@ let {
 	onRemove: (id: string) => void;
 } = $props();
 
-let ulEl = $state<HTMLUListElement | null>(null);
+let trackEl = $state<HTMLDivElement | null>(null);
+let listEl = $state<HTMLUListElement | null>(null);
+
+function scrollPrev() {
+	trackEl?.scrollBy({ left: -120, behavior: 'smooth' });
+}
+function scrollNext() {
+	trackEl?.scrollBy({ left: 120, behavior: 'smooth' });
+}
 
 $effect(() => {
-	if (!ulEl) return;
-	const node = ulEl;
+	if (!listEl) return;
+	const node = listEl;
 
 	function handleKeyDown(event: KeyboardEvent) {
-		const buttons = Array.from(node.querySelectorAll<HTMLElement>('[role="button"]'));
+		const buttons = Array.from(node.querySelectorAll<HTMLElement>('[data-chip-id]'));
 		if (buttons.length === 0) return;
 
 		const focusedIndex = buttons.indexOf(document.activeElement as HTMLElement);
@@ -43,49 +54,71 @@ $effect(() => {
 	}
 
 	node.addEventListener('keydown', handleKeyDown);
-	return () => {
-		node.removeEventListener('keydown', handleKeyDown);
-	};
+	return () => node.removeEventListener('keydown', handleKeyDown);
 });
 </script>
 
-<ul
-	bind:this={ulEl}
+<div
 	data-testid="file-switcher-strip"
-	aria-live="polite"
-	role="list"
-	class="flex flex-row gap-2 overflow-x-auto px-1 py-2"
+	class="flex h-11 shrink-0 items-center gap-1 border-t border-line bg-pdf-ctrl px-2"
 >
-	{#each files as entry (entry.id)}
-		<li role="listitem" class="inline-flex items-center gap-0.5">
-			<button
-				type="button"
-				role="button"
-				tabindex="0"
-				aria-current={entry.id === activeId ? 'true' : undefined}
-				data-status={entry.status}
-				data-chip-id={entry.id}
-				onclick={() => onSelect(entry.id)}
-				class={[
-					'inline-flex cursor-pointer items-center gap-1 rounded-sm border px-3 py-1.5 text-xs font-medium transition-colors',
-					entry.id === activeId
-						? 'border-brand-mint bg-brand-mint/10 font-bold text-brand-navy'
-						: 'border-brand-sand bg-white text-brand-navy',
-					entry.status === 'error'
-						? 'border-dashed border-red-300 bg-red-50 text-red-700'
-						: ''
-				].join(' ')}
-				>{entry.title}</button
-			>
-			<button
-				type="button"
-				aria-label="Entfernen"
-				data-remove-id={entry.id}
-				onclick={() => onRemove(entry.id)}
-				class="ml-1 text-xs text-gray-400 hover:text-brand-navy"
-			>
-				×
-			</button>
-		</li>
-	{/each}
-</ul>
+	<button
+		type="button"
+		aria-label={m.bulk_switcher_prev()}
+		onclick={scrollPrev}
+		class="flex h-6 w-5 shrink-0 items-center justify-center rounded-sm text-sm text-ink-3 hover:bg-black/10 hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+		>‹</button
+	>
+
+	<div bind:this={trackEl} class="flex flex-1 gap-1 overflow-x-auto" style="scrollbar-width:none">
+		<ul bind:this={listEl} aria-live="polite" role="list" class="flex flex-row gap-1 py-1">
+			{#each files as entry, i (entry.id)}
+				<li role="listitem" class="inline-flex shrink-0 items-center">
+					<button
+						type="button"
+						tabindex="0"
+						aria-current={entry.id === activeId ? 'true' : undefined}
+						data-status={entry.status}
+						data-chip-id={entry.id}
+						onclick={() => onSelect(entry.id)}
+						class={[
+							'inline-flex cursor-pointer items-center gap-1 rounded-[2px] px-1.5 py-0.5 text-[11px] font-bold transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent',
+							entry.id === activeId
+								? 'bg-accent text-primary'
+								: 'bg-black/[0.06] text-ink-2 hover:bg-black/10',
+							entry.status === 'error'
+								? '!border !border-dashed !border-red-400 !bg-red-50/80 !text-red-700'
+								: ''
+						].join(' ')}
+					>
+						<span
+							class={[
+								'rounded-[2px] px-0.5 text-[9px] font-extrabold opacity-85',
+								entry.id === activeId ? 'bg-black/20' : 'bg-black/10'
+							].join(' ')}
+							>{i + 1}</span
+						>
+						{entry.title}
+					</button>
+					<button
+						type="button"
+						aria-label="Entfernen"
+						data-remove-id={entry.id}
+						onclick={() => onRemove(entry.id)}
+						class="ml-0.5 flex h-[44px] w-[44px] items-center justify-center text-base text-ink-3 hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+					>
+						×
+					</button>
+				</li>
+			{/each}
+		</ul>
+	</div>
+
+	<button
+		type="button"
+		aria-label={m.bulk_switcher_next()}
+		onclick={scrollNext}
+		class="flex h-6 w-5 shrink-0 items-center justify-center rounded-sm text-sm text-ink-3 hover:bg-black/10 hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+		>›</button
+	>
+</div>
diff --git a/frontend/src/lib/components/document/FileSwitcherStrip.svelte.spec.ts b/frontend/src/lib/components/document/FileSwitcherStrip.svelte.spec.ts
index 86968e24..56fe281a 100644
--- a/frontend/src/lib/components/document/FileSwitcherStrip.svelte.spec.ts
+++ b/frontend/src/lib/components/document/FileSwitcherStrip.svelte.spec.ts
@@ -10,6 +10,7 @@ export interface FileEntry {
 	file: File;
 	title: string;
 	status: 'idle' | 'error';
+	previewUrl: string;
 }
 
 function makeFiles(n: number): FileEntry[] {
@@ -17,7 +18,8 @@ function makeFiles(n: number): FileEntry[] {
 		id: `id-${i}`,
 		file: new File([''], `file${i}.pdf`),
 		title: `File ${i}`,
-		status: 'idle' as const
+		status: 'idle' as const,
+		previewUrl: ''
 	}));
 }
 
@@ -65,7 +67,13 @@ describe('FileSwitcherStrip', () => {
 
 	it('error chip has aria-label containing warning indicator', async () => {
 		const files: FileEntry[] = [
-			{ id: 'e1', file: new File([''], 'bad.pdf'), title: 'Bad file', status: 'error' }
+			{
+				id: 'e1',
+				file: new File([''], 'bad.pdf'),
+				title: 'Bad file',
+				status: 'error',
+				previewUrl: ''
+			}
 		];
 		const { container } = render(FileSwitcherStrip, {
 			files,
@@ -85,7 +93,7 @@ describe('FileSwitcherStrip', () => {
 			onSelect: vi.fn(),
 			onRemove: vi.fn()
 		});
-		const firstBtn = container.querySelectorAll('[role="button"]')[0] as HTMLElement;
+		const firstBtn = container.querySelectorAll('[data-chip-id]')[0] as HTMLElement;
 		firstBtn.focus();
 		await userEvent.keyboard('{ArrowRight}');
 		const focused = document.activeElement;
diff --git a/frontend/src/lib/components/document/ScopeCard.svelte b/frontend/src/lib/components/document/ScopeCard.svelte
index ebdbe82a..7eb6002d 100644
--- a/frontend/src/lib/components/document/ScopeCard.svelte
+++ b/frontend/src/lib/components/document/ScopeCard.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
 let {
 	variant,
 	count = 0,
@@ -13,24 +15,26 @@ let {
 <div
 	data-testid="scope-card"
 	data-variant={variant}
-	class="rounded-sm border p-4
+	class="mb-3 rounded-sm border p-4
 		{variant === 'per-file'
-		? 'border-brand-mint bg-brand-mint/10'
-		: 'border-brand-sand bg-white'}"
+		? 'border-accent bg-accent-bg'
+		: 'border-line bg-surface'}"
 >
 	{#if variant === 'shared'}
 		<div class="mb-3 flex items-center justify-between">
-			<span class="text-xs font-bold tracking-widest text-gray-400 uppercase">
-				Gilt für alle Dateien
+			<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">
+				{m.bulk_scope_shared_label({ count })}
 			</span>
 			<span
-				class="bg-brand-sand inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-bold text-brand-navy"
+				class="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-xs font-bold text-primary"
 			>
 				{count}
 			</span>
 		</div>
 	{:else}
-		<p class="mb-3 text-xs font-bold tracking-widest text-brand-mint uppercase">Diese Datei</p>
+		<p class="mb-3 text-xs font-bold tracking-widest text-accent uppercase">
+			{m.bulk_scope_per_file_label()}
+		</p>
 	{/if}
 	{@render children?.()}
 </div>
diff --git a/frontend/src/lib/components/document/UploadSaveBar.svelte b/frontend/src/lib/components/document/UploadSaveBar.svelte
index f8cad1bf..06b85d99 100644
--- a/frontend/src/lib/components/document/UploadSaveBar.svelte
+++ b/frontend/src/lib/components/document/UploadSaveBar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-import * as m from '$lib/paraglide/messages';
+import { m } from '$lib/paraglide/messages.js';
 
 let {
 	fileCount,
@@ -14,27 +14,26 @@ let {
 } = $props();
 </script>
 
-<div
-	class="border-brand-sand sticky bottom-0 z-10 -mx-4 border-t bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
->
+<div class="shrink-0 border-t border-line bg-surface px-4 py-3">
 	{#if chunkProgress}
 		<progress
 			value={chunkProgress.done}
 			max={chunkProgress.total}
-			class="[&::-webkit-progress-bar]:bg-brand-sand mb-3 h-1 w-full rounded-full [&::-webkit-progress-bar]:rounded-full [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:bg-brand-mint"
+			class="[&::-webkit-progress-bar]:bg-brand-sand mb-3 h-1 w-full rounded-full [&::-webkit-progress-bar]:rounded-full [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:bg-accent"
 		></progress>
 	{/if}
-	<div class="flex items-center justify-between">
+	<div class="flex items-center justify-between gap-3">
 		<button type="button" onclick={onDiscard} class="text-sm text-red-600/70 hover:text-red-700">
 			{m.bulk_discard_all()}
 		</button>
 		<button
 			type="button"
 			data-testid="bulk-save-btn"
+			disabled={fileCount === 0}
 			onclick={onSave}
-			class="min-h-[44px] rounded-sm bg-brand-navy px-6 text-sm font-bold tracking-widest text-white uppercase hover:bg-brand-navy/90"
+			class="min-h-[44px] rounded-sm bg-primary px-6 text-sm font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-90 disabled:opacity-40"
 		>
-			{fileCount === 1 ? 'Speichern →' : `${fileCount} speichern →`}
+			{fileCount === 1 ? m.bulk_save_cta_one() : m.bulk_save_cta({ count: fileCount })}
 		</button>
 	</div>
 </div>
diff --git a/frontend/src/routes/documents/new/+page.svelte b/frontend/src/routes/documents/new/+page.svelte
index 753233b1..c4cb69f8 100644
--- a/frontend/src/routes/documents/new/+page.svelte
+++ b/frontend/src/routes/documents/new/+page.svelte
@@ -1,37 +1,11 @@
 <script lang="ts">
-import { m } from '$lib/paraglide/messages.js';
 import BulkDocumentEditLayout from '$lib/components/document/BulkDocumentEditLayout.svelte';
 
 let { data } = $props();
 </script>
 
-<div class="mx-auto max-w-7xl px-4 py-8">
-	<div class="mb-6">
-		<a
-			href="/"
-			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
-		>
-			<svg
-				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M10 19l-7-7m0 0l7-7m-7 7h18"
-				/>
-			</svg>
-			{m.btn_back_to_overview()}
-		</a>
-		<h1 class="font-serif text-3xl text-ink">{m.doc_new_heading()}</h1>
-	</div>
-
-	<BulkDocumentEditLayout
-		initialSenderId={data.initialSenderId}
-		initialSenderName={data.initialSenderName}
-		initialReceivers={data.initialReceivers}
-	/>
-</div>
+<BulkDocumentEditLayout
+	initialSenderId={data.initialSenderId}
+	initialSenderName={data.initialSenderName}
+	initialReceivers={data.initialReceivers}
+/>
diff --git a/frontend/src/routes/documents/new/page.svelte.spec.ts b/frontend/src/routes/documents/new/page.svelte.spec.ts
index dcdfbdef..b22028bf 100644
--- a/frontend/src/routes/documents/new/page.svelte.spec.ts
+++ b/frontend/src/routes/documents/new/page.svelte.spec.ts
@@ -21,15 +21,14 @@ const baseData = {
 
 describe('New document page – sender prefill', () => {
 	it('shows an empty sender input when no senderId is in the URL', async () => {
-		render(Page, { data: baseData, form: null });
+		render(Page, { data: baseData });
 		const input = document.querySelector<HTMLInputElement>('#senderId-search');
 		expect(input?.value).toBe('');
 	});
 
 	it('shows the sender name in the typeahead input when initialSenderName is set', async () => {
 		render(Page, {
-			data: { ...baseData, initialSenderId: 'p1', initialSenderName: 'Hans Müller' },
-			form: null
+			data: { ...baseData, initialSenderId: 'p1', initialSenderName: 'Hans Müller' }
 		});
 		const input = document.querySelector<HTMLInputElement>('#senderId-search');
 		expect(input?.value).toBe('Hans Müller');
@@ -37,8 +36,7 @@ describe('New document page – sender prefill', () => {
 
 	it('sets the hidden senderId input to the prefilled ID', async () => {
 		render(Page, {
-			data: { ...baseData, initialSenderId: 'p1', initialSenderName: 'Hans Müller' },
-			form: null
+			data: { ...baseData, initialSenderId: 'p1', initialSenderName: 'Hans Müller' }
 		});
 		const hidden = document.querySelector<HTMLInputElement>(
 			'input[type="hidden"][name="senderId"]'
@@ -51,7 +49,7 @@ describe('New document page – sender prefill', () => {
 
 describe('New document page – receiver prefill', () => {
 	it('shows no receiver chips when initialReceivers is empty', async () => {
-		render(Page, { data: baseData, form: null });
+		render(Page, { data: baseData });
 		await expect.element(page.getByText('Anna Schmidt')).not.toBeInTheDocument();
 	});
 
@@ -62,7 +60,7 @@ describe('New document page – receiver prefill', () => {
 				{ id: 'p2', firstName: 'Anna', lastName: 'Schmidt', displayName: 'Anna Schmidt' }
 			]
 		};
-		render(Page, { data, form: null });
+		render(Page, { data });
 		await expect.element(page.getByText('Anna Schmidt')).toBeInTheDocument();
 	});
 
@@ -73,7 +71,7 @@ describe('New document page – receiver prefill', () => {
 				{ id: 'p2', firstName: 'Anna', lastName: 'Schmidt', displayName: 'Anna Schmidt' }
 			]
 		};
-		render(Page, { data, form: null });
+		render(Page, { data });
 		const hidden = document.querySelector<HTMLInputElement>('input[name="receiverIds"]');
 		expect(hidden?.value).toBe('p2');
 	});