diff --git a/src/lib/components/CanvasView.svelte b/src/lib/components/CanvasView.svelte
index 08e97d4..5b2b27f 100644
--- a/src/lib/components/CanvasView.svelte
+++ b/src/lib/components/CanvasView.svelte
@@ -21,6 +21,7 @@
 	import { StrokeRecorder, hitStroke } from '$lib/ink/stroke';
 	import { pageCssVars } from '$lib/editor/pageStyle';
 	import { downloadCanvas } from './download';
+	import PageSizeDialog from './PageSizeDialog.svelte';
 	import PageView from './PageView.svelte';
 	import Toolbar from './Toolbar.svelte';
 
@@ -241,15 +242,9 @@
 		menu.show(x, y, items);
 	}
 
-	function customSize(id: string) {
-		const page = doc.pages[id];
-		const mm = (pt: number) => Math.round((pt / 72) * 25.4);
-		const answer = prompt('Page size in millimetres (width × height)', `${mm(page.width)} × ${mm(page.height)}`);
-		const m = answer && /^\s*(\d+(?:\.\d+)?)\s*[x×*,\s]\s*(\d+(?:\.\d+)?)\s*$/i.exec(answer);
-		if (!m) return;
-		const pt = (v: string) => Math.min(5000, Math.max(50, (parseFloat(v) / 25.4) * 72));
-		keepAnchor(id, () => doc.resizePage(id, pt(m[1]), pt(m[2])));
-	}
+	/** Page whose custom-size dialog is open. */
+	let sizing = $state<string | null>(null);
+	const customSize = (id: string) => (sizing = id);
 
 	const activeMenuPos = $derived.by(() => {
 		const id = doc.activeId;
@@ -551,7 +546,7 @@
 	}
 
 	function onKeyDown(e: KeyboardEvent) {
-		if (workspace.settingsOpen) return;
+		if (workspace.settingsOpen || sizing) return;
 		const mod = e.ctrlKey || e.metaKey;
 		const k = e.key.toLowerCase();
 
@@ -707,6 +702,19 @@
 		{/if}
 	</div>
 
+	{#if sizing && doc.pages[sizing]}
+		{@const id = sizing}
+		<PageSizeDialog
+			width={doc.pages[id].width}
+			height={doc.pages[id].height}
+			onclose={() => (sizing = null)}
+			onapply={(w, h) => {
+				sizing = null;
+				keepAnchor(id, () => doc.resizePage(id, w, h));
+			}}
+		/>
+	{/if}
+
 	<Toolbar {doc} onfit={() => fitPage(doc.activeId)} onfitall={fitAll} />
 </div>
 
diff --git a/src/lib/components/PageSizeDialog.svelte b/src/lib/components/PageSizeDialog.svelte
new file mode 100644
index 0000000..de320df
--- /dev/null
+++ b/src/lib/components/PageSizeDialog.svelte
@@ -0,0 +1,173 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import ArrowLeftRightIcon from '@lucide/svelte/icons/arrow-left-right';
+	import { PAGE_PRESETS } from '$lib/model/types';
+
+	let {
+		width,
+		height,
+		onapply,
+		onclose
+	}: { width: number; height: number; onapply: (width: number, height: number) => void; onclose: () => void } = $props();
+
+	// Sizes are stored in points; people think in millimetres.
+	const MIN_PT = 50;
+	const MAX_PT = 5000;
+	const toMm = (pt: number) => Math.round((pt / 72) * 25.4);
+	const toPt = (mm: number) => (mm / 25.4) * 72;
+
+	// Start from the page's current size; edits are local until Apply.
+	let w = $state(untrack(() => toMm(width)));
+	let h = $state(untrack(() => toMm(height)));
+	let first: HTMLInputElement;
+
+	const valid = $derived([w, h].every((v) => Number.isFinite(v) && toPt(v) >= MIN_PT && toPt(v) <= MAX_PT));
+
+	$effect(() => {
+		first.focus();
+		first.select();
+	});
+
+	function apply() {
+		if (!valid) return;
+		// Whole millimetres would nudge exact sizes (A4 is 595.28 pt), so keep those as they are.
+		const exact = [{ width, height }, ...PAGE_PRESETS].find((p) => toMm(p.width) === w && toMm(p.height) === h);
+		if (exact) onapply(exact.width, exact.height);
+		else onapply(toPt(w), toPt(h));
+	}
+</script>
+
+<svelte:window onkeydown={(e) => e.key === 'Escape' && onclose()} />
+
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+<div class="backdrop" onclick={(e) => e.target === e.currentTarget && onclose()}>
+	<form
+		class="dialog"
+		aria-label="Page size"
+		onsubmit={(e) => {
+			e.preventDefault();
+			apply();
+		}}
+	>
+		<h2>Page size</h2>
+		<div class="presets">
+			{#each PAGE_PRESETS as p (p.label)}
+				<button
+					type="button"
+					class="chip"
+					class:active={toMm(p.width) === w && toMm(p.height) === h}
+					onclick={() => ((w = toMm(p.width)), (h = toMm(p.height)))}>{p.label}</button
+				>
+			{/each}
+		</div>
+		<div class="fields">
+			<label>
+				<span>Width</span>
+				<input type="number" inputmode="decimal" min={toMm(MIN_PT)} max={toMm(MAX_PT)} step="1" bind:value={w} bind:this={first} />
+			</label>
+			<button type="button" class="icon-btn" title="Swap width and height" onclick={() => ([w, h] = [h, w])}>
+				<ArrowLeftRightIcon size={16} />
+			</button>
+			<label>
+				<span>Height</span>
+				<input type="number" inputmode="decimal" min={toMm(MIN_PT)} max={toMm(MAX_PT)} step="1" bind:value={h} />
+			</label>
+			<span class="unit">mm</span>
+		</div>
+		{#if !valid}
+			<p class="hint">Sizes must be between {toMm(MIN_PT)} and {toMm(MAX_PT)} mm.</p>
+		{/if}
+		<div class="actions">
+			<button type="button" class="btn" onclick={onclose}>Cancel</button>
+			<button type="submit" class="btn primary" disabled={!valid}>Apply</button>
+		</div>
+	</form>
+</div>
+
+<style>
+	.backdrop {
+		position: fixed;
+		inset: 0;
+		z-index: 50;
+		display: grid;
+		place-items: center;
+		background: rgba(0, 0, 0, 0.45);
+		padding: 16px;
+	}
+	.dialog {
+		width: min(400px, 100%);
+		background: var(--bg);
+		border: 1px solid var(--border);
+		border-radius: 10px;
+		box-shadow: var(--shadow);
+		padding: 18px 20px 20px;
+	}
+	h2 {
+		font-size: 16px;
+		margin: 0 0 14px;
+	}
+	.presets {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6px;
+		margin-bottom: 16px;
+	}
+	.chip {
+		border: 1px solid var(--border);
+		background: none;
+		color: var(--muted);
+		border-radius: 14px;
+		padding: 4px 10px;
+		cursor: pointer;
+	}
+	.chip:hover {
+		color: var(--text);
+		background: var(--hover);
+	}
+	.chip.active {
+		color: var(--text);
+		border-color: var(--accent);
+		background: var(--accent-soft);
+	}
+	.fields {
+		display: flex;
+		align-items: flex-end;
+		gap: 8px;
+	}
+	label {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		flex: 1;
+		min-width: 0;
+	}
+	label span {
+		font-size: 12px;
+		color: var(--muted);
+	}
+	input {
+		width: 100%;
+	}
+	.fields .icon-btn {
+		margin-bottom: 2px;
+	}
+	.unit {
+		color: var(--faint);
+		padding-bottom: 7px;
+	}
+	.hint {
+		color: var(--danger);
+		font-size: 12px;
+		margin: 8px 0 0;
+	}
+	.actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: 8px;
+		margin-top: 20px;
+	}
+	.btn:disabled {
+		opacity: 0.5;
+		cursor: default;
+	}
+</style>