diff --git a/e2e/import-document.spec.ts b/e2e/import-document.spec.ts
index 0c40811..8e9c93b 100644
--- a/e2e/import-document.spec.ts
+++ b/e2e/import-document.spec.ts
@@ -57,16 +57,21 @@ test('story import: preview and import a Word manuscript', async ({ page }) => {
 		title
 	);
 
+	// The settings page's Import button is the modal's second entry point;
+	// import-story.spec covers the library-menu one. Picking a file previews
+	// it at once.
 	await gotoReady(page, `/universes/docland-${stamp}`);
 	await page.getByRole('link', { name: 'Import and export' }).click();
-	await page.locator('input[name="archive"]').setInputFiles({
+	await page.getByRole('button', { name: 'Import a story...' }).click();
+	const dialog = page.getByRole('dialog', { name: 'Import a story' });
+	await expect(dialog).toBeVisible();
+	await dialog.locator('input[name="archive"]').setInputFiles({
 		name: 'manuscript.docx',
 		mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
 		buffer: docx
 	});
-	await page.getByRole('button', { name: 'Preview' }).click();
 
-	const report = page.locator('.import-report');
+	const report = dialog.locator('.import-report');
 	await expect(report).toContainText(`"${title}": 2 chapters, 3 scenes`);
 
 	await page.getByRole('button', { name: 'Import story' }).click();
diff --git a/e2e/import-story.spec.ts b/e2e/import-story.spec.ts
index c5ad9a1..12c788f 100644
--- a/e2e/import-story.spec.ts
+++ b/e2e/import-story.spec.ts
@@ -3,7 +3,7 @@ import { gotoReady } from './navigate';
 import { pickFromLibraryMenu, startStoryInUniverse } from './library';
 
 // The story import round trip: write a story, download its export zip, and
-// import the zip back through the universe settings preview flow.
+// import the zip back through the library's import modal preview flow.
 test('story import: preview and import a story export zip', async ({ page }) => {
 	await gotoReady(page, '/');
 
@@ -63,16 +63,23 @@ test('story import: preview and import a story export zip', async ({ page }) =>
 	expect(archive.status()).toBe(200);
 	const zipBytes = await archive.body();
 
-	await gotoReady(page, `/universes/importland-${stamp}`);
-	await page.getByRole('link', { name: 'Import and export' }).click();
-	await page.locator('input[name="archive"]').setInputFiles({
+	// Feed it back through the import modal, opened from the universe's New
+	// story menu on the library. Picking a file previews it at once.
+	await gotoReady(page, '/');
+	await page
+		.locator('.universe-section', { hasText: universeName })
+		.getByRole('button', { name: 'New story', exact: true })
+		.click();
+	await page.getByRole('menuitem', { name: 'Import a story into this universe...' }).click();
+	const dialog = page.getByRole('dialog', { name: 'Import a story' });
+	await expect(dialog).toBeVisible();
+	await dialog.locator('input[name="archive"]').setInputFiles({
 		name: 'roundtrip.zip',
 		mimeType: 'application/zip',
 		buffer: zipBytes
 	});
-	await page.getByRole('button', { name: 'Preview' }).click();
 
-	const report = page.locator('.import-report');
+	const report = dialog.locator('.import-report');
 	await expect(report).toContainText('"Roundtrip": 1 chapter, 1 scene');
 	await expect(report).toContainText('A story named "Roundtrip" already exists');
 	await expect(report).toContainText('Bram');
diff --git a/src/lib/components/ImportStoryModal.svelte b/src/lib/components/ImportStoryModal.svelte
new file mode 100644
index 0000000..dea7c77
--- /dev/null
+++ b/src/lib/components/ImportStoryModal.svelte
@@ -0,0 +1,354 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { invalidateAll } from '$app/navigation';
+	import { resolve } from '$app/paths';
+	import { formatNumber } from '$lib/format';
+
+	// The two-step story import (upload, preview the collisions, confirm) in a
+	// modal, opened from the library's New menus and from the universe settings
+	// page. The form posts to the target universe's settings actions from
+	// wherever the modal is mounted, and the chosen file rides both submits, so
+	// picking a file is the only upload step the writer sees.
+
+	type ImportNote = { kind: string; name: string; outcome: 'match' | 'create' | 'ambiguous' };
+	type ImportPreview = {
+		storyTitle: string;
+		chapterCount: number;
+		sceneCount: number;
+		words: number;
+		assetCount: number;
+		assetsConfigured: boolean;
+		titleTaken: boolean;
+		notes: ImportNote[];
+		problems: string[];
+	};
+	type ImportResult = {
+		slug: string;
+		sceneCount: number;
+		notesAttached: number;
+		entitiesCreated: number;
+		problems: string[];
+	};
+
+	let {
+		universe,
+		onClose
+	}: {
+		// The universe the story lands in; null keeps the modal closed.
+		universe: { slug: string; name: string; standalone?: boolean } | null;
+		onClose: () => void;
+	} = $props();
+
+	const settingsPath = $derived(
+		universe ? resolve('/universes/[id]/[[section]]', { id: universe.slug, section: 'export' }) : ''
+	);
+
+	const NOTE_OUTCOMES = {
+		match: 'matches an existing entry; the note attaches to it.',
+		create: 'has no match; a new entry will be created.',
+		ambiguous: 'matches more than one entry; the note will be skipped.'
+	} as const;
+
+	let formEl = $state<HTMLFormElement>();
+	let fileInput = $state<HTMLInputElement>();
+	let fileName = $state<string | null>(null);
+	let busy = $state(false);
+	let busyLabel = $state('');
+	let dragOver = $state(false);
+	let preview = $state<ImportPreview | null>(null);
+	let imported = $state<ImportResult | null>(null);
+	let message = $state<string | null>(null);
+
+	// A fresh open starts the flow over. Keyed on the object itself: the
+	// callers hold the target in state, so a new reference is a new open.
+	let lastUniverse: typeof universe = null;
+	$effect(() => {
+		if (universe && universe !== lastUniverse) {
+			fileName = null;
+			preview = null;
+			imported = null;
+			message = null;
+			dragOver = false;
+		}
+		lastUniverse = universe;
+	});
+
+	// Picking or dropping a file previews it at once; the confirm button then
+	// posts the same file to the run action.
+	function takeFile(file: File | null | undefined) {
+		if (!file || !fileInput || busy) return;
+		if (!/\.(zip|docx|epub)$/i.test(file.name)) {
+			message = 'Choose a Codex export zip, a Word document (.docx), or an EPUB (.epub).';
+			return;
+		}
+		if (fileInput.files?.[0] !== file) {
+			const carrier = new DataTransfer();
+			carrier.items.add(file);
+			fileInput.files = carrier.files;
+		}
+		fileName = file.name;
+		preview = null;
+		imported = null;
+		message = null;
+		formEl?.requestSubmit();
+	}
+
+	const submit = () => {
+		busy = true;
+		busyLabel = preview ? 'Importing...' : 'Reading the file...';
+		return async ({ result }: { result: import('@sveltejs/kit').ActionResult }) => {
+			busy = false;
+			if (result.type === 'success') {
+				const data = result.data as
+					{ preview?: ImportPreview; imported?: ImportResult } | undefined;
+				if (data?.imported) {
+					imported = data.imported;
+					preview = null;
+					// The story list behind the modal picks up the new story.
+					await invalidateAll();
+				} else if (data?.preview) {
+					preview = data.preview;
+				}
+			} else if (result.type === 'failure') {
+				const failure = result.data as { message?: string } | undefined;
+				message = failure?.message ?? 'That file could not be read.';
+				preview = null;
+			} else if (result.type === 'error') {
+				message = 'Something went wrong. Try again.';
+			}
+		};
+	};
+
+	function onDrop(event: DragEvent) {
+		event.preventDefault();
+		dragOver = false;
+		takeFile(event.dataTransfer?.files?.[0]);
+	}
+
+	function onKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			onClose();
+		}
+	}
+</script>
+
+{#if universe}
+	<div
+		class="modal-backdrop"
+		role="presentation"
+		onclick={(event) => {
+			if (event.target === event.currentTarget) onClose();
+		}}
+		onkeydown={onKeydown}
+	>
+		<div class="modal-panel modal-lg" role="dialog" aria-modal="true" aria-label="Import a story">
+			<div class="modal-head">
+				<div class="modal-head-main">
+					<h2 class="modal-title">Import a story</h2>
+					<p class="modal-sub">
+						{universe.standalone
+							? 'The story comes in as a new standalone story.'
+							: `The story comes in as a new story in ${universe.name}.`}
+					</p>
+				</div>
+			</div>
+
+			<div class="modal-body">
+				<form
+					id="story-import-form"
+					bind:this={formEl}
+					method="POST"
+					action="{settingsPath}?/previewImport"
+					enctype="multipart/form-data"
+					use:enhance={submit}
+				>
+					<input
+						bind:this={fileInput}
+						type="file"
+						name="archive"
+						accept=".zip,application/zip,.docx,.epub"
+						hidden
+						onchange={() => takeFile(fileInput?.files?.[0])}
+					/>
+					{#if !imported}
+						<!-- Dragging is a pointer-only extra; the button inside is the
+						     keyboard and screen-reader path. -->
+						<div
+							class="drop-zone"
+							role="presentation"
+							class:over={dragOver}
+							ondragover={(event) => {
+								event.preventDefault();
+								dragOver = true;
+							}}
+							ondragleave={() => (dragOver = false)}
+							ondrop={onDrop}
+						>
+							{#if fileName}
+								<p class="drop-file">{fileName}</p>
+							{/if}
+							<button
+								type="button"
+								class="btn btn-secondary btn-sm"
+								disabled={busy}
+								onclick={() => fileInput?.click()}
+							>
+								{fileName ? 'Choose a different file' : 'Choose a file'}
+							</button>
+							<p class="drop-hint">
+								or drop one here: a Codex export zip, a Word document (.docx), or an EPUB (.epub).
+								Chapters and scenes are read from the document's own headings and breaks.
+							</p>
+						</div>
+					{/if}
+				</form>
+
+				{#if message}
+					<p class="import-error" role="alert">{message}</p>
+				{/if}
+				{#if busy}
+					<p class="import-busy" role="status">{busyLabel}</p>
+				{/if}
+
+				{#if imported}
+					<div class="import-report" role="status">
+						<p>
+							Imported {imported.sceneCount}
+							{imported.sceneCount === 1 ? 'scene' : 'scenes'}{imported.notesAttached > 0
+								? ` and ${imported.notesAttached} ${imported.notesAttached === 1 ? 'story note' : 'story notes'}`
+								: ''}{imported.entitiesCreated > 0
+								? `, creating ${imported.entitiesCreated} ${imported.entitiesCreated === 1 ? 'new entry' : 'new entries'}`
+								: ''}.
+						</p>
+						{#each imported.problems as problem (problem)}
+							<p class="import-flag">{problem}</p>
+						{/each}
+					</div>
+				{:else if preview}
+					<div class="import-report">
+						<p>
+							"{preview.storyTitle}": {preview.chapterCount}
+							{preview.chapterCount === 1 ? 'chapter' : 'chapters'},
+							{preview.sceneCount}
+							{preview.sceneCount === 1 ? 'scene' : 'scenes'},
+							{formatNumber(preview.words)} words{preview.assetCount > 0
+								? `, ${preview.assetCount} ${preview.assetCount === 1 ? 'image' : 'images'}`
+								: ''}.
+						</p>
+						{#if preview.titleTaken}
+							<p class="import-flag">
+								A story named "{preview.storyTitle}" already exists here; this import creates a
+								second one.
+							</p>
+						{/if}
+						{#if preview.assetCount > 0 && !preview.assetsConfigured}
+							<p class="import-flag">
+								Image storage is not configured, so the bundled images will not be imported.
+							</p>
+						{/if}
+						{#if preview.notes.length > 0}
+							<ul class="import-notes">
+								{#each preview.notes as note (note.kind + note.name)}
+									<li>
+										<strong>{note.name}</strong>
+										({note.kind === 'lore' ? 'lore entry' : note.kind})
+										{NOTE_OUTCOMES[note.outcome]}
+									</li>
+								{/each}
+							</ul>
+						{/if}
+						{#each preview.problems as problem (problem)}
+							<p class="import-flag">{problem}</p>
+						{/each}
+					</div>
+				{/if}
+			</div>
+
+			<div class="modal-foot">
+				<div class="modal-foot-note"></div>
+				{#if imported}
+					<button class="btn btn-sm btn-secondary" type="button" onclick={onClose}>Done</button>
+					<!-- eslint-disable-next-line svelte/no-navigation-without-resolve (slug known at runtime) -->
+					<a class="btn btn-sm btn-primary" href="/stories/{imported.slug}">Open the story</a>
+				{:else}
+					<button class="btn btn-sm btn-secondary" type="button" onclick={onClose}>Cancel</button>
+					<button
+						class="btn btn-sm btn-primary"
+						type="submit"
+						form="story-import-form"
+						formaction="{settingsPath}?/runImport"
+						disabled={!preview || busy}
+					>
+						Import story
+					</button>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.drop-zone {
+		display: grid;
+		justify-items: center;
+		gap: 8px;
+		padding: 22px 16px;
+		border: 1.5px dashed var(--border-strong);
+		border-radius: var(--radius-md);
+		background: var(--bg-inset);
+		text-align: center;
+	}
+	.drop-zone.over {
+		border-color: var(--accent);
+		background: color-mix(in oklab, var(--accent) 8%, var(--bg-inset));
+	}
+	.drop-file {
+		margin: 0;
+		font-size: var(--text-base);
+		font-weight: 600;
+		color: var(--text);
+		overflow-wrap: anywhere;
+	}
+	.drop-hint {
+		margin: 0;
+		font-size: var(--text-meta);
+		color: var(--text-faint);
+		max-width: 36ch;
+	}
+	.import-error {
+		color: var(--danger);
+		font-size: var(--text-sm);
+		margin: 10px 0 0;
+	}
+	.import-busy {
+		color: var(--text-muted);
+		font-size: var(--text-sm);
+		margin: 10px 0 0;
+	}
+	.import-report {
+		margin-top: 12px;
+		padding: 12px 14px;
+		border: 1px solid var(--border);
+		border-radius: var(--radius-md);
+		background: var(--bg-inset);
+		display: grid;
+		gap: 8px;
+		justify-items: start;
+	}
+	.import-report p {
+		margin: 0;
+		font-size: 13px;
+	}
+	.import-flag {
+		color: var(--text-muted);
+	}
+	.import-notes {
+		margin: 0;
+		padding-left: 18px;
+		font-size: 13px;
+		color: var(--text-muted);
+		display: grid;
+		gap: 2px;
+	}
+</style>
diff --git a/src/lib/docs/getting-started.md b/src/lib/docs/getting-started.md
index 49e6c9f..23b88a8 100644
--- a/src/lib/docs/getting-started.md
+++ b/src/lib/docs/getting-started.md
@@ -26,9 +26,9 @@ Right-click a scene in a story's sidebar to delete it; it sits in the story's "D
 
 Everything you write can leave as markdown: each story's settings offer a zip of its scenes, a universe's settings bundle the whole world, and your account page has a download of everything you own.
 
-A story export zip can also come back in. Open the universe's settings, go to "Import and export", and upload the zip under "Import a story". You get a preview first: how many chapters, scenes, and words are coming, and how each story note will be handled. A note whose character, place, or lore entry already exists in the universe (matched by name) attaches to it; a name with no match creates a new entry; a name shared by more than one entry is skipped, and the preview says so. Nothing is written until you press "Import story", and the import always creates a new story, even if one with the same title exists.
+A story export zip can also come back in. Choose "Import a story" from a New menu on the library, or from the universe's settings under "Import and export". A dialog opens: pick the zip or drag it in, and a preview appears at once - how many chapters, scenes, and words are coming, and how each story note will be handled. A note whose character, place, or lore entry already exists in the universe (matched by name) attaches to it; a name with no match creates a new entry; a name shared by more than one entry is skipped, and the preview says so. Nothing is written until you press "Import story", and the import always creates a new story, even if one with the same title exists.
 
-You can bring in a manuscript written elsewhere the same way. Upload a Word document (.docx) or an EPUB (.epub) in that same "Import a story" box, or choose "Import a story from a file..." from a New menu on the library, which opens that same box. Codex reads the chapters and scenes from the way the document marks them: chapter headings, "Chapter 1" lines, and scene breaks such as a centered row of asterisks. When a document has no such markers, the whole text comes in as a single scene that you can split up afterward. Pictures embedded in the document come along when image storage is set up; the preview tells you if any will be left out. As with a zip, you check the preview before anything is written.
+You can bring in a manuscript written elsewhere the same way. Pick a Word document (.docx) or an EPUB (.epub) in that same "Import a story" dialog. Codex reads the chapters and scenes from the way the document marks them: chapter headings, "Chapter 1" lines, and scene breaks such as a centered row of asterisks. When a document has no such markers, the whole text comes in as a single scene that you can split up afterward. Pictures embedded in the document come along when image storage is set up; the preview tells you if any will be left out. As with a zip, you check the preview before anything is written.
 
 ## Jumping around
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8d46c6b..cadab9c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
 	import Icon from '$lib/components/Icon.svelte';
+	import ImportStoryModal from '$lib/components/ImportStoryModal.svelte';
 	import Landing from '$lib/components/Landing.svelte';
 	import NewMenu from '$lib/components/NewMenu.svelte';
 	import AppBar from '$lib/components/AppBar.svelte';
@@ -52,12 +53,13 @@
 		[...data.universes].sort((a, b) => Number(a.standalone) - Number(b.standalone))
 	);
 
-	// Importing lands a story in a universe, so the link carries one: the
+	// Importing lands a story in a universe, so the modal carries one: the
 	// standalone home when there is one, otherwise the first universe. With no
 	// universes at all there is nowhere to import into yet, and the row is left
-	// out rather than pointing at a page that cannot exist.
-	function importHref(slug: string): string {
-		return `${resolve('/universes/[id]/[[section]]', { id: slug, section: 'export' })}#import-story`;
+	// out rather than opening a dialog that cannot finish.
+	let importFor = $state<{ slug: string; name: string; standalone?: boolean } | null>(null);
+	function startImport(universe: { slug: string; name: string; standalone?: boolean }) {
+		importFor = { slug: universe.slug, name: universe.name, standalone: universe.standalone };
 	}
 	const libraryImportTarget = $derived(standaloneUniverse ?? data.universes[0]);
 
@@ -157,7 +159,7 @@
 								importItem={libraryImportTarget
 									? {
 											label: 'Import a story from a file...',
-											href: importHref(libraryImportTarget.slug)
+											onSelect: () => startImport(libraryImportTarget)
 										}
 									: undefined}
 								note={IMPORT_NOTE}
@@ -239,7 +241,7 @@
 										label: universe.standalone
 											? 'Import a story from a file...'
 											: 'Import a story into this universe...',
-										href: importHref(universe.slug)
+										onSelect: () => startImport(universe)
 									}}
 									note={universe.standalone ? STANDALONE_NOTE : UNIVERSE_STORY_NOTE}
 								/>
@@ -307,7 +309,7 @@
 											label: universe.standalone
 												? 'Import a story from a file...'
 												: 'Import a story into this universe...',
-											href: importHref(universe.slug)
+											onSelect: () => startImport(universe)
 										}}
 										note={universe.standalone ? STANDALONE_NOTE : UNIVERSE_STORY_NOTE}
 									/>
@@ -437,6 +439,8 @@
 			</div>
 		</div>
 	</div>
+
+	<ImportStoryModal universe={importFor} onClose={() => (importFor = null)} />
 {/snippet}
 
 <style>
diff --git a/src/routes/universes/[id]/[[section]]/+page.svelte b/src/routes/universes/[id]/[[section]]/+page.svelte
index ab8f80f..d4fec15 100644
--- a/src/routes/universes/[id]/[[section]]/+page.svelte
+++ b/src/routes/universes/[id]/[[section]]/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
 	import { invalidateAll } from '$app/navigation';
 	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import { CATEGORY_COLORS, entityColor } from '$lib/entity-color';
 	import Icon from '$lib/components/Icon.svelte';
+	import ImportStoryModal from '$lib/components/ImportStoryModal.svelte';
 	import ExportPanel from '$lib/components/ExportPanel.svelte';
 	import AppBar from '$lib/components/AppBar.svelte';
 	import { universePath } from '$lib/chrome';
@@ -33,16 +33,8 @@
 		});
 	}
 
-	// The import form is enhanced so the chosen file survives the preview
-	// step; the Import button then posts the same file to the run action.
-	let importBusy = $state(false);
-	const importPreview = $derived(form?.action === 'import' ? (form.preview ?? null) : null);
-	const importResult = $derived(form?.action === 'import' ? (form.imported ?? null) : null);
-	const NOTE_OUTCOMES = {
-		match: 'matches an existing entry; the note attaches to it.',
-		create: 'has no match; a new entry will be created.',
-		ambiguous: 'matches more than one entry; the note will be skipped.'
-	} as const;
+	// The import runs in the shared modal; opening it hands over this universe.
+	let importFor = $state<{ slug: string; name: string; standalone?: boolean } | null>(null);
 
 	const universeColor = $derived(entityColor(data.universe.name));
 
@@ -505,94 +497,22 @@
 				<h2 class="admin-block-title">Import a story</h2>
 				<p class="admin-block-sub">
 					Bring a manuscript in as a new story in this universe: a Codex export zip, a Word document
-					(.docx), or an EPUB (.epub). Chapters and scenes are detected from the document where it
-					marks them; otherwise the whole text comes in as a single scene. Upload the file, check
-					the preview, then import.
+					(.docx), or an EPUB (.epub). You check a preview of what is coming before anything is
+					written.
 				</p>
 			</div>
-			<form
-				method="POST"
-				action="?/previewImport"
-				enctype="multipart/form-data"
-				use:enhance={() => {
-					importBusy = true;
-					return async ({ update }) => {
-						importBusy = false;
-						await update({ reset: false });
-					};
-				}}
+			<button
+				class="btn btn-secondary"
+				type="button"
+				onclick={() =>
+					(importFor = {
+						slug: data.universe.slug,
+						name: data.universe.name,
+						standalone: data.universe.standalone
+					})}
 			>
-				<div class="import-pick">
-					<input type="file" name="archive" accept=".zip,application/zip,.docx,.epub" required />
-					<button class="btn btn-secondary" type="submit" disabled={importBusy}> Preview </button>
-				</div>
-				{#if form?.action === 'import' && form.message}
-					<p class="field-hint import-error" role="status">{form.message}</p>
-				{/if}
-				{#if importResult}
-					<div class="import-report" role="status">
-						<p>
-							Imported {importResult.sceneCount}
-							{importResult.sceneCount === 1 ? 'scene' : 'scenes'}{importResult.notesAttached > 0
-								? ` and ${importResult.notesAttached} ${importResult.notesAttached === 1 ? 'story note' : 'story notes'}`
-								: ''}{importResult.entitiesCreated > 0
-								? `, creating ${importResult.entitiesCreated} ${importResult.entitiesCreated === 1 ? 'new entry' : 'new entries'}`
-								: ''}.
-						</p>
-						{#each importResult.problems as problem (problem)}
-							<p class="import-flag">{problem}</p>
-						{/each}
-						<!-- eslint-disable svelte/no-navigation-without-resolve (slug known at runtime) -->
-						<a class="btn btn-secondary" href="/stories/{importResult.slug}">Open the story</a>
-						<!-- eslint-enable svelte/no-navigation-without-resolve -->
-					</div>
-				{:else if importPreview}
-					<div class="import-report">
-						<p>
-							"{importPreview.storyTitle}": {importPreview.chapterCount}
-							{importPreview.chapterCount === 1 ? 'chapter' : 'chapters'},
-							{importPreview.sceneCount}
-							{importPreview.sceneCount === 1 ? 'scene' : 'scenes'},
-							{formatNumber(importPreview.words)} words{importPreview.assetCount > 0
-								? `, ${importPreview.assetCount} ${importPreview.assetCount === 1 ? 'image' : 'images'}`
-								: ''}.
-						</p>
-						{#if importPreview.titleTaken}
-							<p class="import-flag">
-								A story named "{importPreview.storyTitle}" already exists here; this import creates
-								a second one.
-							</p>
-						{/if}
-						{#if importPreview.assetCount > 0 && !importPreview.assetsConfigured}
-							<p class="import-flag">
-								Image storage is not configured, so the bundled images will not be imported.
-							</p>
-						{/if}
-						{#if importPreview.notes.length > 0}
-							<ul class="import-notes">
-								{#each importPreview.notes as note (note.kind + note.name)}
-									<li>
-										<strong>{note.name}</strong>
-										({note.kind === 'lore' ? 'lore entry' : note.kind})
-										{NOTE_OUTCOMES[note.outcome]}
-									</li>
-								{/each}
-							</ul>
-						{/if}
-						{#each importPreview.problems as problem (problem)}
-							<p class="import-flag">{problem}</p>
-						{/each}
-						<button
-							class="btn btn-primary"
-							type="submit"
-							formaction="?/runImport"
-							disabled={importBusy}
-						>
-							Import story
-						</button>
-					</div>
-				{/if}
-			</form>
+				Import a story...
+			</button>
 		</div>
 
 		<div class="admin-block danger">
@@ -639,46 +559,9 @@
 	</section>
 </SettingsShell>
 
+<ImportStoryModal universe={importFor} onClose={() => (importFor = null)} />
+
 <style>
-	.import-pick {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		flex-wrap: wrap;
-	}
-	.import-pick input[type='file'] {
-		font-size: 13px;
-		color: var(--text-muted);
-	}
-	.import-error {
-		color: var(--danger);
-		margin: 8px 0 0;
-	}
-	.import-report {
-		margin-top: 12px;
-		padding: 12px 14px;
-		border: 1px solid var(--border);
-		border-radius: var(--radius-md);
-		background: var(--bg-inset);
-		display: grid;
-		gap: 8px;
-		justify-items: start;
-	}
-	.import-report p {
-		margin: 0;
-		font-size: 13px;
-	}
-	.import-flag {
-		color: var(--text-muted);
-	}
-	.import-notes {
-		margin: 0;
-		padding-left: 18px;
-		font-size: 13px;
-		color: var(--text-muted);
-		display: grid;
-		gap: 2px;
-	}
 	.category-tools {
 		display: inline-flex;
 		gap: 1px;