diff --git a/web/src/lib/components/import/ConnectAccount.svelte b/web/src/lib/components/import/ConnectAccount.svelte
index 76e10d02d..76bf7193b 100644
--- a/web/src/lib/components/import/ConnectAccount.svelte
+++ b/web/src/lib/components/import/ConnectAccount.svelte
@@ -15,8 +15,8 @@
 	let { connected, connectHref, onDisconnect, pending = false }: Props = $props();
 </script>
 
-<div class="flex flex-wrap items-center justify-between gap-3">
-	<div class="flex items-center gap-3">
+<div class="flex flex-wrap items-center gap-md">
+	<div class="flex items-center gap-md">
 		<Button
 			href={connected ? undefined : (connectHref as `/${string}`)}
 			icon={Github}
@@ -27,21 +27,19 @@
 		{#if pending}
 			<span
 				role="status"
-				class="flex items-center gap-2 typography-paragraph-small text-foreground-muted"
+				class="flex items-center gap-xs typography-paragraph-small text-foreground-muted"
 			>
 				<Spinner class="size-4" />Loading…
 			</span>
 		{:else if connected}
 			<span
-				class="flex items-center gap-1.5 typography-paragraph-small text-foreground-success"
+				class="flex items-center gap-2xs typography-paragraph-small text-foreground-success"
 			>
 				<Check class="size-4" aria-hidden="true" />Connected
 			</span>
 		{/if}
 	</div>
 	{#if connected}
-		<Button variant="ghost" icon={LogOut} onclick={onDisconnect}>
-			Disconnect account
-		</Button>
+		<Button variant="ghost" icon={LogOut} onclick={onDisconnect}>Disconnect account</Button>
 	{/if}
 </div>
diff --git a/web/src/lib/components/import/GitHubAuthorizeStep.svelte b/web/src/lib/components/import/GitHubAuthorizeStep.svelte
index 303af9494..6ebb387ad 100644
--- a/web/src/lib/components/import/GitHubAuthorizeStep.svelte
+++ b/web/src/lib/components/import/GitHubAuthorizeStep.svelte
@@ -2,7 +2,7 @@
 	import Check from "$icon/check";
 	import UserKey from "$icon/user-key";
 	import Button from "$lib/components/ui/Button.svelte";
-	import Step from "./Step.svelte";
+	import FormStep from "$lib/components/ui/FormStep.svelte";
 
 	interface Props {
 		number: number;
@@ -14,21 +14,23 @@
 	let { number, authorized, disabled = false, onAuthorize }: Props = $props();
 </script>
 
-<Step {number} title="Authorize the migrator" disabled={disabled && !authorized}>
-	<p class="typography-paragraph-small text-foreground-muted">
-		The migrator needs your permission to create the imported repositories in your account.
-	</p>
-	<div class="mt-4 flex items-center justify-end gap-4">
+<FormStep
+	step={number}
+	title="Authorize the migrator"
+	description="The migrator needs your permission to create the imported repositories in your account."
+	class={disabled && !authorized ? "pointer-events-none opacity-50" : undefined}
+>
+	<div class="flex flex-wrap items-center gap-md" aria-disabled={disabled && !authorized}>
+		<Button disabled={disabled || authorized} onclick={onAuthorize} icon={UserKey}>
+			Authorize the migrator
+		</Button>
 		{#if authorized}
 			<span
 				role="status"
-				class="flex items-center gap-1.5 typography-paragraph-small text-foreground-success"
+				class="flex items-center gap-2xs typography-paragraph-small text-foreground-success"
 			>
 				<Check class="size-4" aria-hidden="true" />Migrator authorized
 			</span>
 		{/if}
-		<Button variant="primary" disabled={disabled || authorized} onclick={onAuthorize} icon={UserKey}>
-			Authorize the migrator
-		</Button>
 	</div>
-</Step>
+</FormStep>
diff --git a/web/src/lib/components/import/GitHubConnectStep.svelte b/web/src/lib/components/import/GitHubConnectStep.svelte
index 3ded6d063..4d1bffd90 100644
--- a/web/src/lib/components/import/GitHubConnectStep.svelte
+++ b/web/src/lib/components/import/GitHubConnectStep.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { GitHubAccount } from "$lib/github";
+	import FormStep from "$lib/components/ui/FormStep.svelte";
 	import ConnectAccount from "./ConnectAccount.svelte";
-	import Step from "./Step.svelte";
 
 	interface Props {
 		number: number;
@@ -14,11 +14,15 @@
 	let { number, account, accountLoading, connectUrl, onDisconnect }: Props = $props();
 </script>
 
-<Step {number} title="Connect your account">
+<FormStep
+	step={number}
+	title="Connect your account"
+	description="Sign in to GitHub so the migrator can list your repositories."
+>
 	<ConnectAccount
 		connected={!!account}
 		connectHref={connectUrl as `/${string}`}
 		{onDisconnect}
 		pending={accountLoading}
 	/>
-</Step>
+</FormStep>
diff --git a/web/src/lib/components/import/GitHubImporter.svelte b/web/src/lib/components/import/GitHubImporter.svelte
index d37de243b..c0c71de46 100644
--- a/web/src/lib/components/import/GitHubImporter.svelte
+++ b/web/src/lib/components/import/GitHubImporter.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
-	import Step from "./Step.svelte";
-	import StepFlow from "./StepFlow.svelte";
 	import GitHubConnectStep from "./GitHubConnectStep.svelte";
 	import GitHubAuthorizeStep from "./GitHubAuthorizeStep.svelte";
 	import GitHubRepoSelectStep from "./GitHubRepoSelectStep.svelte";
@@ -50,52 +48,48 @@
 
 <div>
 	{#if !onError}
-		<ErrorAlert label={ownError} class="mb-5" />
+		<ErrorAlert label={ownError} class="mb-md" />
 	{/if}
-	<StepFlow>
-		{#if leadingStep}
-			{@render leadingStep()}
-		{/if}
-		<GitHubConnectStep
-			number={firstStep}
-			account={importer.account}
-			accountLoading={importer.accountLoading}
-			connectUrl={importer.connectUrl}
-			onDisconnect={importer.disconnect}
-		/>
-		<GitHubAuthorizeStep
-			number={firstStep + 1}
-			authorized={importer.authorized}
-			disabled={isAuthorizeGated({ account: importer.account, disabled: importer.disabled })}
-			onAuthorize={importer.authorize}
-		/>
-		<GitHubRepoSelectStep
-			number={firstStep + 2}
-			account={importer.account}
-			authorized={importer.authorized}
-			repos={importer.repos}
-			drafts={importer.drafts}
-			expanded={importer.expanded}
-			allSelected={importer.allSelected}
-			migratableCount={importer.migratable.length}
-			knotOptions={importer.knotOptions}
-			disabled={importer.disabled}
-			onSelectAll={importer.setAll}
-			onSelectRepo={importer.select}
-			onToggleExpand={importer.toggleExpand}
-			onUpdateDraft={importer.updateDraft}
-			onMigrate={importer.migrate}
-		/>
-		<MigrationStep
-			id="migrations"
-			number={firstStep + 3}
-			title="Migrations"
-			disabled={!importer.account && importer.migrationItems.length === 0}
-			items={importer.migrationItems}
-			running={importer.anyRunning}
-			failed={importer.anyFailed}
-			userHandle={importer.userHandle}
-			bannerNote={migrationsNote}
-		/>
-	</StepFlow>
+	{#if leadingStep}
+		{@render leadingStep()}
+	{/if}
+	<GitHubConnectStep
+		number={firstStep}
+		account={importer.account}
+		accountLoading={importer.accountLoading}
+		connectUrl={importer.connectUrl}
+		onDisconnect={importer.disconnect}
+	/>
+	<GitHubAuthorizeStep
+		number={firstStep + 1}
+		authorized={importer.authorized}
+		disabled={isAuthorizeGated({ account: importer.account, disabled: importer.disabled })}
+		onAuthorize={importer.authorize}
+	/>
+	<GitHubRepoSelectStep
+		number={firstStep + 2}
+		account={importer.account}
+		authorized={importer.authorized}
+		repos={importer.repos}
+		drafts={importer.drafts}
+		expanded={importer.expanded}
+		allSelected={importer.allSelected}
+		migratableCount={importer.migratable.length}
+		knotOptions={importer.knotOptions}
+		disabled={importer.disabled}
+		onSelectAll={importer.setAll}
+		onSelectRepo={importer.select}
+		onToggleExpand={importer.toggleExpand}
+		onUpdateDraft={importer.updateDraft}
+		onMigrate={importer.migrate}
+	/>
+	<MigrationStep
+		number={firstStep + 3}
+		title="Migrations"
+		disabled={!importer.account && importer.migrationItems.length === 0}
+		items={importer.migrationItems}
+		running={importer.anyRunning}
+		userHandle={importer.userHandle}
+		bannerNote={migrationsNote}
+	/>
 </div>
diff --git a/web/src/lib/components/import/GitHubRepoSelectStep.svelte b/web/src/lib/components/import/GitHubRepoSelectStep.svelte
index 31451d343..f21120cc0 100644
--- a/web/src/lib/components/import/GitHubRepoSelectStep.svelte
+++ b/web/src/lib/components/import/GitHubRepoSelectStep.svelte
@@ -5,9 +5,9 @@
 	import type { GitHubAccount, GitHubRepo } from "$lib/github";
 	import type { Draft } from "./gitHubImportState.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
+	import FormStep from "$lib/components/ui/FormStep.svelte";
 	import RepoConfig from "./RepoConfig.svelte";
 	import RepoRow from "./RepoRow.svelte";
-	import Step from "./Step.svelte";
 	import { isMigratable } from "./gitHubImportState.svelte";
 	import { isMigrateDisabled, isRepoSelectGated } from "./stepGating";
 
@@ -59,24 +59,23 @@
 	);
 </script>
 
-<Step
-	{number}
-	title="Choose & configure repositories"
-	disabled={stepDisabled}
+<FormStep
+	step={number}
+	title="Choose repositories"
+	description="Pick the repositories to migrate. Expand one to change its name, description, or knot."
+	class={stepDisabled ? "pointer-events-none opacity-50" : undefined}
 >
-	{#snippet action()}
-		{#if repos.length}
-			<button
-				type="button"
-				class="flex cursor-pointer items-center gap-1.5 typography-paragraph-small text-foreground-default disabled:pointer-events-none disabled:opacity-50"
-				disabled={stepDisabled}
-				onclick={() => onSelectAll(!allSelected)}
-			>
-				<CheckCheck class="size-4" aria-hidden="true" />
-				Select all repositories
-			</button>
-		{/if}
-	{/snippet}
+	{#if account && repos.length}
+		<button
+			type="button"
+			class="mb-xs flex cursor-pointer items-center gap-2xs typography-paragraph-small text-foreground-default disabled:pointer-events-none disabled:opacity-50"
+			disabled={stepDisabled}
+			onclick={() => onSelectAll(!allSelected)}
+		>
+			<CheckCheck class="size-4" aria-hidden="true" />
+			Select all repositories
+		</button>
+	{/if}
 	{#if account}
 		<div class="rounded-md border border-border-default">
 			{#each repos as repo (repo.id)}
@@ -112,7 +111,7 @@
 					{/snippet}
 				</RepoRow>
 			{:else}
-				<p class="p-3 typography-paragraph-small text-foreground-muted">
+				<p class="p-sm typography-paragraph-small text-foreground-muted">
 					No public repositories found.
 				</p>
 			{/each}
@@ -123,17 +122,17 @@
 		</p>
 	{/if}
 	{#if knotOptions.length === 0}
-		<p class="mt-3 typography-paragraph-small text-foreground-muted">
+		<p class="mt-sm typography-paragraph-small text-foreground-muted">
 			No knots are available yet. <a class="underline" href={resolve("/settings/knots")}
 				>Manage your knots</a
 			>.
 		</p>
 	{/if}
-	<div class="mt-4 flex justify-end">
+	<div class="mt-md flex justify-end">
 		<Button variant="primary" icon={Download} disabled={migrateDisabled} onclick={onMigrate}>
 			{migratableCount === 0
 				? "Migrate repositories"
 				: `Migrate ${migratableCount} ${migratableCount === 1 ? "repository" : "repositories"}`}
 		</Button>
 	</div>
-</Step>
+</FormStep>
diff --git a/web/src/lib/components/import/MethodPicker.svelte b/web/src/lib/components/import/MethodPicker.svelte
index 953162c7d..4243ef1e1 100644
--- a/web/src/lib/components/import/MethodPicker.svelte
+++ b/web/src/lib/components/import/MethodPicker.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <div
-	class="grid gap-2 rounded-md border border-border-default bg-background-subtle p-2 sm:grid-cols-2"
+	class="grid gap-xs rounded-md border border-border-default bg-background-subtle p-xs sm:grid-cols-2"
 >
 	{#each methods as method (method.value)}
 		{@const Icon = method.icon}
@@ -35,15 +35,15 @@
 			type="button"
 			aria-pressed={selected}
 			onclick={() => onSelect(method.value)}
-			class="cursor-pointer rounded-md border border-border-default p-4 text-left transition-colors {selected
+			class="cursor-pointer rounded-md border border-border-default p-md text-left transition-colors {selected
 				? 'bg-background-default shadow-xs'
 				: 'bg-background-subtle hover:bg-background-inset'}"
 		>
-			<span class="flex items-center gap-2 typography-paragraph-regular font-medium">
+			<span class="flex items-center gap-xs typography-paragraph-regular font-medium">
 				<Icon class="size-4" aria-hidden="true" />
 				{method.title}
 			</span>
-			<span class="mt-2 block typography-paragraph-small text-foreground-muted">
+			<span class="mt-xs block typography-paragraph-small text-foreground-muted">
 				{method.description}
 			</span>
 		</button>
diff --git a/web/src/lib/components/import/MigrationStep.svelte b/web/src/lib/components/import/MigrationStep.svelte
index 948f40727..7d110ac55 100644
--- a/web/src/lib/components/import/MigrationStep.svelte
+++ b/web/src/lib/components/import/MigrationStep.svelte
@@ -20,9 +20,9 @@
 	import CircleUserRound from "$icon/circle-user-round";
 	import { migrationRunning } from "$lib/api/migrator";
 	import Button from "$lib/components/ui/Button.svelte";
+	import FormStep from "$lib/components/ui/FormStep.svelte";
 	import MigrationRow, { stageLabel } from "./MigrationRow.svelte";
 	import StartedBanner from "./StartedBanner.svelte";
-	import Step from "./Step.svelte";
 
 	interface Props {
 		number: number;
@@ -30,10 +30,8 @@
 		disabled?: boolean;
 		items: MigrationItem[];
 		running?: boolean;
-		failed?: boolean;
 		userHandle?: string;
 		bannerNote?: string;
-		id?: string;
 	}
 
 	let {
@@ -42,10 +40,8 @@
 		disabled = false,
 		items,
 		running,
-		failed,
 		userHandle,
-		bannerNote,
-		id
+		bannerNote
 	}: Props = $props();
 
 	let bannerVisible = $state(true);
@@ -62,28 +58,25 @@
 				);
 			})
 	);
-
-	const isFailed = $derived(
-		failed ??
-			items.some((item) => {
-				const m = item.migration;
-				return (
-					m.status === "error" || (m.status === "success" && m.jobStatus !== "completed")
-				);
-			})
-	);
 </script>
 
-<Step {number} {title} disabled={disabled && items.length === 0} {id}>
+<FormStep
+	step={number}
+	{title}
+	description="Follow the progress of your migrations. They keep running if you leave this page."
+	last
+	spacing="none"
+	class={disabled && items.length === 0 ? "pointer-events-none opacity-50" : undefined}
+>
 	{#if !items.length}
 		<p class="typography-paragraph-small text-foreground-muted">No migrations started yet.</p>
 	{:else}
 		{#if bannerVisible}
-			<div class="mb-3">
+			<div class="mb-sm">
 				<StartedBanner onDismiss={() => (bannerVisible = false)} note={bannerNote} />
 			</div>
 		{/if}
-		<div class="flex flex-col gap-2" aria-live="polite">
+		<div class="flex flex-col gap-xs" aria-live="polite">
 			{#each items as item (item.id)}
 				{@const m = item.migration}
 				{@const itemFailed =
@@ -112,13 +105,13 @@
 					/>
 					{#if itemFailed && m.status === "error"}
 						<p
-							class="mt-1 px-1 typography-paragraph-small break-all text-foreground-danger"
+							class="mt-3xs px-3xs typography-paragraph-small break-all text-foreground-danger"
 						>
 							{m.error}
 						</p>
 					{:else if itemFailed && m.status === "success"}
 						<p
-							class="mt-1 px-1 typography-paragraph-small break-all text-foreground-danger"
+							class="mt-3xs px-3xs typography-paragraph-small break-all text-foreground-danger"
 						>
 							{m.jobStatus === "authorization_required"
 								? "The source rejected its saved credential. Reconnect GitHub and start the import again."
@@ -129,12 +122,11 @@
 			{/each}
 		</div>
 		{#if !isRunning}
-			<div class="mt-4 flex justify-end">
+			<div class="mt-md flex">
 				<Button
 					href={userHandle
 						? (resolve(`/${userHandle}?tab=repos` as "/") as `/${string}`)
 						: undefined}
-					variant={isFailed ? "default" : "primary"}
 					icon={CircleUserRound}
 				>
 					All my repositories<ArrowRight class="size-4" aria-hidden="true" />
@@ -142,4 +134,4 @@
 			</div>
 		{/if}
 	{/if}
-</Step>
+</FormStep>
diff --git a/web/src/lib/components/import/RepoConfig.svelte b/web/src/lib/components/import/RepoConfig.svelte
index b3f5760e3..a1a310675 100644
--- a/web/src/lib/components/import/RepoConfig.svelte
+++ b/web/src/lib/components/import/RepoConfig.svelte
@@ -38,7 +38,7 @@
 </script>
 
 <div
-	class="flex flex-col gap-4"
+	class="flex flex-col gap-md"
 	class:pointer-events-none={disabled}
 	class:opacity-50={disabled}
 	aria-disabled={disabled}
@@ -66,7 +66,7 @@
 		{/snippet}
 	</Field>
 	<Field label="Select a knot to migrate into">
-		<div class="flex flex-col gap-2 typography-paragraph-small">
+		<div class="flex flex-col gap-xs typography-paragraph-small">
 			{#each knots as option (option)}
 				<Radio bind:group={selectedKnot} value={option} name={groupId} {disabled}
 					>{option}</Radio
diff --git a/web/src/lib/components/import/StartedBanner.svelte b/web/src/lib/components/import/StartedBanner.svelte
index 0ccb41d5e..e461f7498 100644
--- a/web/src/lib/components/import/StartedBanner.svelte
+++ b/web/src/lib/components/import/StartedBanner.svelte
@@ -13,9 +13,9 @@
 </script>
 
 <div
-	class="flex items-start justify-between gap-3 rounded-md bg-background-inset p-3 typography-paragraph-small"
+	class="flex items-start justify-between gap-sm rounded-md bg-background-inset p-sm typography-paragraph-small"
 >
-	<div class="flex flex-col gap-0.5">
+	<div class="flex flex-col gap-3xs">
 		<p>Repository migration has successfully started. You can now close this page.</p>
 		<p class="text-foreground-muted">{note}</p>
 	</div>
diff --git a/web/src/lib/components/import/Step.svelte b/web/src/lib/components/import/Step.svelte
deleted file mode 100644
index c1f0ba367..000000000
--- a/web/src/lib/components/import/Step.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-
-	interface Props {
-		number: number;
-		title: string;
-		disabled?: boolean;
-		children: Snippet;
-		action?: Snippet;
-		id?: string;
-	}
-
-	let { number, title, disabled = false, children, action, id }: Props = $props();
-</script>
-
-<div
-	{id}
-	class="relative flex gap-4"
-	class:pointer-events-none={disabled}
-	class:opacity-50={disabled}
-	aria-disabled={disabled}
->
-	<span
-		class="relative z-10 flex size-6 shrink-0 items-center justify-center rounded-full bg-background-inset typography-paragraph-small font-medium text-foreground-default"
-	>
-		{number}
-	</span>
-	<div class="min-w-0 flex-1">
-		<div class="flex items-center justify-between gap-3">
-			<h3 class="typography-paragraph-small font-semibold text-foreground-default uppercase">
-				{title}
-			</h3>
-			{#if action}
-				{@render action()}
-			{/if}
-		</div>
-		<div class="mt-3">
-			{@render children()}
-		</div>
-	</div>
-</div>
diff --git a/web/src/lib/components/import/StepFlow.svelte b/web/src/lib/components/import/StepFlow.svelte
deleted file mode 100644
index 469f01e2f..000000000
--- a/web/src/lib/components/import/StepFlow.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-
-	interface Props {
-		children: Snippet;
-	}
-
-	let { children }: Props = $props();
-</script>
-
-<div class="relative flex flex-col gap-8">
-	<span aria-hidden="true" class="absolute inset-y-3 left-[11px] w-px bg-border-default"></span>
-	{@render children()}
-</div>
diff --git a/web/src/lib/components/import/UrlRepoImporter.svelte b/web/src/lib/components/import/UrlRepoImporter.svelte
index 572285269..4fbfaeb06 100644
--- a/web/src/lib/components/import/UrlRepoImporter.svelte
+++ b/web/src/lib/components/import/UrlRepoImporter.svelte
@@ -276,8 +276,8 @@
 	};
 </script>
 
-<div class="flex items-end gap-3">
-	<Field label="Git repository URL" class="min-w-0 flex-1">
+<div class="flex flex-col items-start gap-xs sm:flex-row sm:items-end">
+	<Field label="Git repository URL" class="w-full min-w-0 flex-1">
 		{#snippet children({ id })}
 			<Input
 				{id}
@@ -288,7 +288,6 @@
 		{/snippet}
 	</Field>
 	<Button
-		variant="primary"
 		icon={RefreshCw}
 		disabled={running || !url || migration.status === "success"}
 		onclick={fetchDetails}
@@ -296,7 +295,7 @@
 		Fetch repository details
 	</Button>
 </div>
-<p class="mt-1.5 typography-paragraph-small text-foreground-muted">
+<p class="mt-xs typography-paragraph-small text-foreground-muted">
 	Use a publicly reachable HTTPS clone URL without credentials.
 	{#if fetched && defaultBranch}
 		Default branch on the remote: <span class="text-foreground font-medium"
@@ -304,16 +303,16 @@
 		>
 	{/if}
 </p>
-<ErrorAlert label={urlError} class="mt-2" />
+<ErrorAlert label={urlError} class="mt-xs" />
 {#if needsSignIn}
-	<div class="mt-2 flex flex-wrap items-center gap-2">
+	<div class="mt-xs flex flex-wrap items-center gap-xs">
 		<Button size="small" onclick={() => void signInAgain()}>Sign in again</Button>
 		<span class="typography-paragraph-small text-foreground-muted">
 			Fetching details needs the migrator's grant, which this session does not carry yet.
 		</span>
 	</div>
 {/if}
-<div class="mt-3 rounded-md border border-border-default p-3">
+<div class="mt-md rounded-md border border-border-default p-md">
 	<RepoConfig
 		name={urlName}
 		description={urlDescription}
@@ -324,7 +323,7 @@
 		onKnot={(v) => (urlKnot = v)}
 		disabled={!fetched || running || migration.status === "success"}
 	/>
-	<div class="mt-4 flex justify-end">
+	<div class="mt-md flex justify-end">
 		<Button
 			variant="primary"
 			disabled={running ||
diff --git a/web/src/routes/repo/migrate/+page.svelte b/web/src/routes/repo/migrate/+page.svelte
index a38bcee90..5cc788d3d 100644
--- a/web/src/routes/repo/migrate/+page.svelte
+++ b/web/src/routes/repo/migrate/+page.svelte
@@ -1,15 +1,13 @@
 <script lang="ts">
-	import Download from "$icon/download";
 	import Meta from "$lib/components/seo/Meta.svelte";
 	import GitHubImporter from "$lib/components/import/GitHubImporter.svelte";
 	import MethodPicker from "$lib/components/import/MethodPicker.svelte";
 	import MigrationStep, { type MigrationItem } from "$lib/components/import/MigrationStep.svelte";
-	import Step from "$lib/components/import/Step.svelte";
-	import StepFlow from "$lib/components/import/StepFlow.svelte";
 	import UrlRepoImporter, {
 		type UrlMigration
 	} from "$lib/components/import/UrlRepoImporter.svelte";
 	import Card from "$lib/components/ui/Card.svelte";
+	import FormStep from "$lib/components/ui/FormStep.svelte";
 	import { getAuth } from "$lib/auth.svelte";
 	import { createBobbinClient } from "$lib/api/client";
 	import { migrationRunning } from "$lib/api/migrator";
@@ -41,10 +39,6 @@
 		urlMigration.status === "submitting" ||
 			(urlMigration.status === "success" && migrationRunning(urlMigration.jobStatus))
 	);
-	const urlAnyFailed = $derived(
-		urlMigration.status === "error" ||
-			(urlMigration.status === "success" && urlMigration.jobStatus !== "completed")
-	);
 	const urlMigrationItems = $derived<MigrationItem[]>(
 		urlMigration.status === "idle"
 			? []
@@ -62,18 +56,29 @@
 </script>
 
 {#snippet methodStep()}
-	<Step number={1} title="Method">
+	<FormStep step={1} title="Method" description="Where the repository is coming from.">
 		<MethodPicker value={source} onSelect={(v) => (source = v)} />
-	</Step>
+	</FormStep>
 {/snippet}
 
 <Meta noindex title="Migrate repositories" />
-<div class="max-w-6xl mx-auto w-full px-4 py-12">
-	<div class="flex items-center gap-2 px-6 py-2">
-		<Download class="size-5" aria-hidden="true" />
+
+<div class="mx-auto flex w-full max-w-medium flex-col gap-xl px-md py-4xl">
+	<div class="flex flex-col gap-sm px-xl py-xs">
 		<h1 class="typography-heading-4 font-bold text-foreground-default">Migrate repositories</h1>
+		<span>
+			<p class="mb-2xs typography-paragraph-small text-foreground-subtle">
+				Bring existing repositories and their history over to Tangled. Migrations run in the
+				background, so you can leave this page once they start.
+			</p>
+			<p class="typography-paragraph-small text-foreground-subtle">
+				You can also
+				<a class="underline" href="/repo/new">create a new repository</a> instead.
+			</p>
+		</span>
 	</div>
-	<Card padding="none" class="p-6">
+
+	<Card padding="none" class="p-xl">
 		{#if source === "github"}
 			<GitHubImporter
 				{knots}
@@ -81,24 +86,25 @@
 				method={methodStep}
 			/>
 		{:else}
-			<StepFlow>
-				{@render methodStep()}
-				<Step number={2} title="Details">
-					<UrlRepoImporter
-						{knots}
-						migratorUrl={data.publicConfig.migratorUrl}
-						bind:migration={urlMigration}
-					/>
-				</Step>
-				<MigrationStep
-					number={3}
-					title="Migration"
-					items={urlMigrationItems}
-					running={urlRunning}
-					failed={urlAnyFailed}
-					userHandle={user?.handle}
+			{@render methodStep()}
+			<FormStep
+				step={2}
+				title="Details"
+				description="Point at the repository and choose where it should live."
+			>
+				<UrlRepoImporter
+					{knots}
+					migratorUrl={data.publicConfig.migratorUrl}
+					bind:migration={urlMigration}
 				/>
-			</StepFlow>
+			</FormStep>
+			<MigrationStep
+				number={3}
+				title="Migration"
+				items={urlMigrationItems}
+				running={urlRunning}
+				userHandle={user?.handle}
+			/>
 		{/if}
 	</Card>
 </div>