diff --git a/web/src/lib/components/migration/MigrationLanding.stories.svelte b/web/src/lib/components/migration/MigrationLanding.stories.svelte
index 8a0bcd936..6c12d6462 100644
--- a/web/src/lib/components/migration/MigrationLanding.stories.svelte
+++ b/web/src/lib/components/migration/MigrationLanding.stories.svelte
@@ -14,7 +14,7 @@
 		};
 	};
 
-	const migrate = () => userEvent.click(screen.getByRole("button", { name: /migrate my data/i }));
+	const migrate = () => userEvent.click(screen.getByRole("button", { name: /start migration/i }));
 
 	const { Story } = defineMeta({
 		title: "Migration/MigrationLanding",
diff --git a/web/src/lib/components/migration/MigrationLanding.svelte b/web/src/lib/components/migration/MigrationLanding.svelte
index 1695e3f8c..506cb75d1 100644
--- a/web/src/lib/components/migration/MigrationLanding.svelte
+++ b/web/src/lib/components/migration/MigrationLanding.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
 	import { refreshAll } from "$app/navigation";
 	import { page } from "$app/state";
+	import ArrowRight from "$icon/arrow-right";
+	import LogIn from "$icon/log-in";
+	import LogOut from "$icon/log-out";
+	import RotateCcw from "$icon/rotate-ccw";
+	import X from "$icon/x";
 	import { getAuth } from "#lib/auth.svelte.ts";
 	import { createAction } from "#lib/action.svelte.ts";
 	import { createBobbinClient } from "#lib/api/client.ts";
@@ -35,7 +40,7 @@
 
 	const migrate = createAction(async (skip: boolean = false) => {
 		const agent = auth.agent;
-		if (!agent) throw new Error("Still signing you in, try again in a moment.");
+		if (!agent) throw new Error("Still signing you in. Try again in a moment.");
 		needsGrant = false;
 		confirmSkip = false;
 
@@ -53,7 +58,12 @@
 				imported = true;
 			}
 			if (!unmarked) {
-				progress = { phase: "finalizing", done: 0, total: 0 };
+				progress = {
+					phase: "finalizing",
+					done: 0,
+					total: 0,
+					overall: { done: 1, total: 1 }
+				};
 				await unmarkLiarAccount(agent, config.bobbinUrl, { fetch });
 				unmarked = true;
 			}
@@ -88,72 +98,100 @@
 
 	const status = $derived.by(() => {
 		if (waiting) return "Waiting for Tangled to switch you over…";
-		if (progress?.phase === "reading") return "Reading your records…";
+		if (progress?.phase === "reading") return "Reading records…";
 		if (progress?.phase === "blobs") {
-			return `Copying your files (${progress.done} of ${progress.total})`;
+			return `Copying files (${progress.done} of ${progress.total})`;
 		}
 		if (progress?.phase === "importing") {
-			return `Migrating your records (${progress.done} of ${progress.total})`;
+			return `Migrating records (${progress.done} of ${progress.total})`;
 		}
 		if (progress?.phase === "finalizing") return "Finishing up…";
 		return null;
 	});
+
+	const percent = $derived.by(() => {
+		if (waiting || progress?.phase === "finalizing") return 100;
+		if (!progress?.overall.total) return 0;
+		return Math.round((progress.overall.done / progress.overall.total) * 100);
+	});
+
+	const indeterminate = $derived(waiting || progress?.phase === "reading");
 </script>
 
-<Meta noindex title="Migrating your data" />
+<Meta noindex title="Migrate your data" />
 
-<section class="mx-auto flex w-full max-w-compact flex-col gap-md px-7 py-5xl">
-	<h1 class="typography-heading-2 text-foreground-default">Migrating your data</h1>
+<section class="mx-auto flex w-full max-w-medium flex-col gap-md px-7 py-5xl">
+	<h1 class="typography-heading-2 text-foreground-default">Migrate your data</h1>
 	<p class="typography-paragraph-regular text-foreground-muted">
-		Tangled has a new record format, so your data needs to be migrated before you can keep using
-		Tangled
+		Tangled now stores your data in a new record format. Migrate it to keep using Tangled
 		{#if auth.currentUser}as <span class="font-medium text-foreground-default"
 				>{auth.currentUser.handle}</span
-			>{/if}. It's safe to try again if something goes wrong.
+			>{/if}. If anything fails, you can safely try again.
 	</p>
 
 	<ErrorAlert label={reauthorize.error ?? migrate.error} />
 
-	{#if status}
-		<div class="flex flex-col gap-xs" role="status">
-			<p class="typography-paragraph-small text-foreground-muted">{status}</p>
-			{#if progress?.phase === "blobs" || progress?.phase === "importing"}
-				<progress class="h-2 w-full" value={progress.done} max={progress.total}></progress>
-			{/if}
-		</div>
-	{/if}
-
-	<div class="flex items-center gap-sm">
+	<div class="flex flex-wrap items-center gap-sm">
 		{#if needsGrant}
-			<Button variant="primary" loading={reauthorize.loading} onclick={reauthorize.run}>
-				Sign in again to allow it
+			<Button
+				variant="primary"
+				icon={LogIn}
+				loading={reauthorize.loading}
+				onclick={reauthorize.run}
+			>
+				Sign in again to grant permission
 			</Button>
 		{:else}
 			<Button
 				variant={migrate.error ? "danger" : "primary"}
+				icon={migrate.error ? RotateCcw : ArrowRight}
 				loading={migrate.loading}
 				disabled={!auth.agent}
 				onclick={() => migrate.run()}
 			>
-				{migrate.error ? "Try again" : "Migrate my data"}
+				{migrate.error ? "Try again" : "Start migration"}
 			</Button>
 		{/if}
 		<Button
 			variant="ghost"
+			icon={X}
 			disabled={!auth.agent || migrate.loading}
 			onclick={() => (confirmSkip = true)}
 		>
 			Skip migration
 		</Button>
-		<Button variant="ghost" disabled={migrate.loading} onclick={onSignOut}>Sign out</Button>
+		<Button variant="ghost" icon={LogOut} disabled={migrate.loading} onclick={onSignOut}>
+			Sign out
+		</Button>
 	</div>
+
+	{#if status}
+		<div class="flex flex-col gap-xs" role="status">
+			<p class="typography-paragraph-small text-foreground-muted tabular-nums">{status}</p>
+			<div
+				class={[
+					"h-2 w-full overflow-hidden rounded-full border border-border-default bg-background-inset",
+					indeterminate && "animate-pulse motion-reduce:animate-none"
+				]}
+				role="progressbar"
+				aria-valuenow={indeterminate ? undefined : percent}
+				aria-valuemin={0}
+				aria-valuemax={100}
+			>
+				<div
+					class="h-full rounded-full bg-background-info-emphasis transition-transform duration-250 ease-out-strong motion-reduce:transition-none"
+					style:transform="translateX(-{100 - percent}%)"
+				></div>
+			</div>
+		</div>
+	{/if}
 </section>
 
 <ConfirmModal
 	bind:open={confirmSkip}
 	title="Skip migration?"
-	description="Your existing Tangled data (sh.tangled.* records) won't be copied to the new format. It will stay in your PDS, but Tangled will no longer read it, so none of it will show up on Tangled."
-	confirmLabel="Skip and continue"
+	description="Your existing Tangled data (sh.tangled.* records) won't be copied to the new format. It stays in your PDS, but Tangled no longer reads it, so none of it will appear on Tangled."
+	confirmLabel="Skip migration"
 	loading={migrate.loading}
 	onconfirm={() => migrate.run(true)}
 />
diff --git a/web/src/lib/migration/import.ts b/web/src/lib/migration/import.ts
index ff99dc6fd..4aadd01e3 100644
--- a/web/src/lib/migration/import.ts
+++ b/web/src/lib/migration/import.ts
@@ -28,6 +28,7 @@ export interface ImportProgress {
 	phase: "reading" | "blobs" | "importing" | "finalizing";
 	done: number;
 	total: number;
+	overall: { done: number; total: number };
 }
 
 export class MigrationScopeError extends Error {
@@ -168,7 +169,7 @@ export const importFromLiar = async (
 		);
 	}
 
-	onProgress?.({ phase: "reading", done: 0, total: 0 });
+	onProgress?.({ phase: "reading", done: 0, total: 0, overall: { done: 0, total: 0 } });
 	const records = await readLiarRecords(
 		await fetchLiarRepo(liarPdsUrl, agent.sub, { fetch, signal })
 	);
@@ -184,22 +185,29 @@ export const importFromLiar = async (
 
 	const client = createClient(agent);
 	const blobs = await listLiarBlobs(liarPdsUrl, agent.sub, { fetch, signal });
-	onProgress?.({ phase: "blobs", done: 0, total: blobs.length });
+	const batches = batchWrites(writes);
+	const overall = { done: 0, total: blobs.length + batches.length };
+	const report = (phase: "blobs" | "importing", done: number, total: number) =>
+		onProgress?.({ phase, done, total, overall: { ...overall } });
+
+	report("blobs", 0, blobs.length);
 	for (const [i, cid] of blobs.entries()) {
 		const input = await fetchLiarBlob(liarPdsUrl, agent.sub, cid, { fetch, signal });
 		await ok(client.call(uploadBlobSchema, { input, signal }));
-		onProgress?.({ phase: "blobs", done: i + 1, total: blobs.length });
+		overall.done++;
+		report("blobs", i + 1, blobs.length);
 	}
 
 	let done = 0;
-	onProgress?.({ phase: "importing", done, total: writes.length });
-	for (const batch of batchWrites(writes)) {
+	report("importing", done, writes.length);
+	for (const batch of batches) {
 		signal?.throwIfAborted();
 		await ok(
 			client.call(applyWritesSchema, { input: { repo: agent.sub, writes: batch }, signal })
 		);
 		done += batch.length;
-		onProgress?.({ phase: "importing", done, total: writes.length });
+		overall.done++;
+		report("importing", done, writes.length);
 	}
 
 	clear();