diff --git a/web/src/lib/api/emails.test.ts b/web/src/lib/api/emails.test.ts
new file mode 100644
index 00000000..584e469d
--- /dev/null
+++ b/web/src/lib/api/emails.test.ts
@@ -0,0 +1,130 @@
+import { describe, expect, it, vi, type Mock } from "vitest";
+import type { OAuthUserAgent } from "@atcute/oauth-browser-client";
+import {
+	addEmail,
+	deleteEmail,
+	listEmails,
+	markPrimary,
+	removeEmailRow,
+	setPrimaryEmail,
+	verifyEmailByToken,
+	type ListEmailItem
+} from "./emails";
+import { createDeliberiClient } from "./deliberi";
+
+vi.mock("$lib/auth/agent", () => ({
+	mintServiceAuth: vi.fn(async () => "test-token"),
+	serviceDidForHost: (host: string) => `did:web:${host}`
+}));
+
+const row = (overrides: Partial<ListEmailItem> = {}): ListEmailItem => ({
+	address: "alice@example.com",
+	verified: true,
+	primary: false,
+	createdAt: "2026-01-01T00:00:00.000Z",
+	...overrides
+});
+
+const makeCtx = (fetchMock: typeof globalThis.fetch) =>
+	createDeliberiClient({
+		deliberiUrl: "https://deliberi.test",
+		agent: {} as unknown as OAuthUserAgent,
+		fetch: fetchMock
+	});
+
+const calledInit = (mock: Mock<typeof globalThis.fetch>) => mock.mock.calls[0][1] as RequestInit;
+
+const jsonResponse = (body: unknown): Response =>
+	new Response(JSON.stringify(body), {
+		status: 200,
+		headers: { "content-type": "application/json" }
+	});
+
+describe("listEmails", () => {
+	it("gets the listEmails nsid and parses the email shape", async () => {
+		const item = row({ address: "bob@example.com", verified: false, primary: true });
+		const fetchMock = vi
+			.fn<typeof globalThis.fetch>()
+			.mockResolvedValue(jsonResponse({ emails: [item] }));
+		const out = await listEmails(makeCtx(fetchMock));
+		expect(new URL(String(fetchMock.mock.calls[0][0])).pathname).toBe(
+			"/xrpc/org.tangled.temp.account.listEmails"
+		);
+		expect(out.emails).toEqual([item]);
+	});
+});
+
+describe.each([
+	["addEmail", "addEmail", { email: "a@b.co" }],
+	["deleteEmail", "deleteEmail", { email: "a@b.co" }],
+	["setPrimaryEmail", "setPrimaryEmail", { email: "a@b.co" }]
+] as const)("%s", (_name, nsid, body) => {
+	it(`posts ${JSON.stringify(body)} to org.tangled.temp.account.${nsid}`, async () => {
+		const fetchMock = vi
+			.fn<typeof globalThis.fetch>()
+			.mockResolvedValue(new Response("", { status: 200 }));
+		const ctx = makeCtx(fetchMock);
+
+		if (nsid === "addEmail") await addEmail(ctx, body.email);
+		else if (nsid === "deleteEmail") await deleteEmail(ctx, body.email);
+		else await setPrimaryEmail(ctx, body.email);
+
+		expect(fetchMock).toHaveBeenCalledTimes(1);
+		const url = new URL(String(fetchMock.mock.calls[0][0]));
+		expect(url.pathname).toBe(`/xrpc/org.tangled.temp.account.${nsid}`);
+		expect(url.origin).toBe("https://deliberi.test");
+		expect(calledInit(fetchMock).method).toBe("POST");
+		expect(JSON.parse(String(calledInit(fetchMock).body))).toEqual(body);
+	});
+});
+
+describe("verifyEmailByToken", () => {
+	it("posts the token to the open verifyEmail endpoint without auth", async () => {
+		const fetchMock = vi
+			.fn<typeof globalThis.fetch>()
+			.mockResolvedValue(jsonResponse({ email: "alice@example.com" }));
+		const out = await verifyEmailByToken("https://deliberi.test", "abc123", fetchMock);
+		expect(out.email).toBe("alice@example.com");
+		expect(fetchMock).toHaveBeenCalledTimes(1);
+		const url = new URL(String(fetchMock.mock.calls[0][0]));
+		expect(url.pathname).toBe("/xrpc/org.tangled.temp.account.verifyEmail");
+		expect(calledInit(fetchMock).method).toBe("POST");
+		expect(JSON.parse(String(calledInit(fetchMock).body))).toEqual({ token: "abc123" });
+		expect(calledInit(fetchMock).headers).not.toHaveProperty("authorization");
+	});
+
+	it("classifies a 400 as an invalid link", async () => {
+		const fetchMock = vi
+			.fn<typeof globalThis.fetch>()
+			.mockResolvedValue(new Response("nope", { status: 400 }));
+		await expect(
+			verifyEmailByToken("https://deliberi.test", "bad", fetchMock)
+		).rejects.toMatchObject({ kind: "invalid" });
+	});
+
+	it("classifies a 5xx as an unavailable service", async () => {
+		const fetchMock = vi
+			.fn<typeof globalThis.fetch>()
+			.mockResolvedValue(new Response("boom", { status: 500 }));
+		await expect(
+			verifyEmailByToken("https://deliberi.test", "bad", fetchMock)
+		).rejects.toMatchObject({ kind: "unavailable" });
+	});
+});
+
+describe("markPrimary", () => {
+	it("moves the flag onto the target and clears the rest", () => {
+		const rows = [row({ address: "a@x.co", primary: true }), row({ address: "b@x.co" })];
+		expect(markPrimary(rows, "b@x.co")).toEqual([
+			expect.objectContaining({ address: "a@x.co", primary: false }),
+			expect.objectContaining({ address: "b@x.co", primary: true })
+		]);
+	});
+});
+
+describe("removeEmailRow", () => {
+	it("drops the deleted address and keeps every other row", () => {
+		const rows = [row({ address: "a@x.co" }), row({ address: "b@x.co" })];
+		expect(removeEmailRow(rows, "a@x.co").map((r) => r.address)).toEqual(["b@x.co"]);
+	});
+});
diff --git a/web/src/lib/api/emails.ts b/web/src/lib/api/emails.ts
new file mode 100644
index 00000000..8991a91d
--- /dev/null
+++ b/web/src/lib/api/emails.ts
@@ -0,0 +1,68 @@
+import { authedGet, authedPost, type DeliberiContext } from "./deliberi";
+import { buildUrl } from "./_request";
+
+export interface ListEmailItem {
+	address: string;
+	verified: boolean;
+	primary: boolean;
+	createdAt: string;
+}
+
+const LIST_EMAILS = "org.tangled.temp.account.listEmails";
+const ADD_EMAIL = "org.tangled.temp.account.addEmail";
+const VERIFY_EMAIL = "org.tangled.temp.account.verifyEmail";
+const DELETE_EMAIL = "org.tangled.temp.account.deleteEmail";
+const SET_PRIMARY_EMAIL = "org.tangled.temp.account.setPrimaryEmail";
+
+export const listEmails = (ctx: DeliberiContext): Promise<{ emails: ListEmailItem[] }> =>
+	authedGet(ctx, LIST_EMAILS);
+
+export const addEmail = (ctx: DeliberiContext, email: string): Promise<void> =>
+	authedPost(ctx, ADD_EMAIL, { email }).then(() => undefined);
+
+export class VerificationError extends Error {
+	constructor(
+		message: string,
+		readonly kind: "invalid" | "unavailable"
+	) {
+		super(message);
+	}
+}
+
+export const verifyEmailByToken = async (
+	serviceUrl: string,
+	token: string,
+	fetchFn: typeof globalThis.fetch = fetch
+): Promise<{ email: string }> => {
+	const response = await fetchFn(buildUrl(serviceUrl, VERIFY_EMAIL), {
+		method: "POST",
+		headers: { "content-type": "application/json", accept: "application/json" },
+		body: JSON.stringify({ token })
+	});
+	if (response.status === 400) {
+		throw new VerificationError(
+			"The verification link is invalid or has already been used.",
+			"invalid"
+		);
+	}
+	if (!response.ok) {
+		throw new VerificationError(
+			`Could not reach the verification service (${response.status}).`,
+			"unavailable"
+		);
+	}
+	const text = await response.text();
+	return text ? JSON.parse(text) : { email: "" };
+};
+
+export const deleteEmail = (ctx: DeliberiContext, email: string): Promise<void> =>
+	authedPost(ctx, DELETE_EMAIL, { email }).then(() => undefined);
+
+export const setPrimaryEmail = (ctx: DeliberiContext, email: string): Promise<void> =>
+	authedPost(ctx, SET_PRIMARY_EMAIL, { email }).then(() => undefined);
+
+export const markPrimary = (rows: ListEmailItem[], address: string): ListEmailItem[] =>
+	rows.map((row) => ({ ...row, primary: row.address === address }));
+
+export const removeEmailRow = (rows: ListEmailItem[], address: string): ListEmailItem[] =>
+	rows.filter((row) => row.address !== address);
diff --git a/web/src/lib/components/settings/tabs/EmailsTab.svelte b/web/src/lib/components/settings/tabs/EmailsTab.svelte
index 57e927c2..bc91ac88 100644
--- a/web/src/lib/components/settings/tabs/EmailsTab.svelte
+++ b/web/src/lib/components/settings/tabs/EmailsTab.svelte
@@ -1,50 +1,83 @@
 <script lang="ts">
+	import { page } from "$app/state";
+	import { getAuth } from "$lib/auth.svelte";
+	import { createDeliberiClient } from "$lib/api/deliberi";
+	import {
+		listEmails,
+		addEmail,
+		deleteEmail,
+		setPrimaryEmail,
+		markPrimary,
+		removeEmailRow,
+		type ListEmailItem
+	} from "$lib/api/emails";
+	import { createAction, createLoad } from "$lib/action.svelte";
+	import Bones from "$lib/components/ui/Bones.svelte";
+	import uiLoadingprimitivesShortText from "$lib/bones/ui-loadingprimitives--short-text.bones.json";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Tag from "$lib/components/ui/Tag.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import SettingsEmpty from "../SettingsEmpty.svelte";
 	import SettingsHeader from "../SettingsHeader.svelte";
 	import SettingsToolbar from "../SettingsToolbar.svelte";
 	import SettingsList from "../SettingsList.svelte";
 	import SettingsEntry from "../SettingsEntry.svelte";
+	import { relativeTime } from "$lib/format";
 	import Plus from "$icon/plus";
 	import Trash from "$icon/trash-2";
 	import Mail from "$icon/mail";
 	import Star from "$icon/star";
 	import Check from "$icon/check";
+	import RefreshCw from "$icon/refresh-cw";
+	import Hourglass from "$icon/hourglass";
 
-	interface MockEmail {
-		id: string;
-		address: string;
-		verified: boolean;
-		primary: boolean;
-		added: string;
-	}
+	const auth = getAuth();
+	const deliberiUrl = $derived(page.data.publicConfig?.deliberiUrl as string | undefined);
 
-	// mocked — email management is backed by G4 (see TAN-575)
-	let emails = $state<MockEmail[]>([
-		{
-			id: "1",
-			address: "eti+dev3@tangled.org",
-			verified: true,
-			primary: false,
-			added: "Added 5 hours ago"
-		},
-		{
-			id: "2",
-			address: "eti+dev@tangled.org",
-			verified: true,
-			primary: true,
-			added: "Added 2 months ago"
-		}
-	]);
+	let resendNotice = $state("");
 
-	const setPrimary = (id: string) => {
-		emails = emails.map((e) => ({ ...e, primary: e.id === id }));
-	};
+	const load = createLoad(async (): Promise<ListEmailItem[] | null> => {
+		const agent = auth.agent;
+		const url = deliberiUrl;
+		if (!agent || !url) return null;
+		const ctx = createDeliberiClient({ deliberiUrl: url, agent });
+		return (await listEmails(ctx)).emails;
+	});
+	const emails = $derived(load.data ?? []);
 
-	const remove = (id: string) => {
-		emails = emails.filter((e) => e.id !== id);
+	const clearNotice = () => {
+		resendNotice = "";
 	};
+
+	const resendOne = createAction(async (address: string) => {
+		clearNotice();
+		const agent = auth.agent;
+		const url = deliberiUrl;
+		if (!agent || !url) return;
+		const ctx = createDeliberiClient({ deliberiUrl: url, agent });
+		await addEmail(ctx, address);
+		resendNotice = `A new verification link was sent to ${address}.`;
+	});
+
+	const setPrimaryOne = createAction(async (address: string) => {
+		clearNotice();
+		const agent = auth.agent;
+		const url = deliberiUrl;
+		if (!agent || !url) return;
+		const ctx = createDeliberiClient({ deliberiUrl: url, agent });
+		await setPrimaryEmail(ctx, address);
+		load.update((rows) => (rows ? markPrimary(rows, address) : rows));
+	});
+
+	const deleteOne = createAction(async (address: string) => {
+		clearNotice();
+		const agent = auth.agent;
+		const url = deliberiUrl;
+		if (!agent || !url) return;
+		const ctx = createDeliberiClient({ deliberiUrl: url, agent });
+		await deleteEmail(ctx, address);
+		load.update((rows) => (rows ? removeEmailRow(rows, address) : rows));
+	});
 </script>
 
 <SettingsHeader
@@ -59,15 +92,34 @@
 		{/snippet}
 	</SettingsToolbar>
 
-	{#if emails.length === 0}
+	<ErrorAlert label={load.error} />
+
+	{#if load.loading}
+		<SettingsList>
+			{#each [0, 1, 2] as _, i (i)}
+				<div class="flex w-full items-center justify-between gap-4">
+					<div class="flex min-w-0 flex-col gap-1.5">
+						<Bones capture={uiLoadingprimitivesShortText} class="w-48" />
+						<Bones capture={uiLoadingprimitivesShortText} class="w-24" />
+					</div>
+					<div class="flex shrink-0 items-center gap-2">
+						<Bones capture={uiLoadingprimitivesShortText} class="w-20" />
+						<Bones capture={uiLoadingprimitivesShortText} class="w-8" />
+					</div>
+				</div>
+			{/each}
+		</SettingsList>
+	{:else if !load.error && emails.length === 0}
 		<SettingsEmpty message="No emails added yet" />
-	{:else}
+	{:else if !load.error}
 		<SettingsList>
-			{#each emails as email (email.id)}
+			{#each emails as email (email.address)}
 				<SettingsEntry icon={Mail} title={email.address}>
 					{#snippet tags()}
 						{#if email.verified}
 							<Tag color="success" size="small" icon={Check}>Verified</Tag>
+						{:else}
+							<Tag color="warning" size="small" icon={Hourglass}>Unverified</Tag>
 						{/if}
 						{#if email.primary}
 							<Tag color="info" size="small" icon={Star}>Primary</Tag>
@@ -75,21 +127,46 @@
 					{/snippet}
 					{#snippet meta()}
 						<span class="typography-paragraph-regular text-foreground-muted"
-							>{email.added}</span
+							>added {relativeTime(email.createdAt)}</span
 						>
 					{/snippet}
 					{#snippet actions()}
+						{#if email.verified && !email.primary}
+							<Button
+								icon={Star}
+								disabled={setPrimaryOne.loading}
+								onclick={() => setPrimaryOne.run(email.address)}
+							>
+								Set as primary
+							</Button>
+						{/if}
+						{#if !email.verified}
+							<Button
+								icon={RefreshCw}
+								disabled={resendOne.loading}
+								onclick={() => resendOne.run(email.address)}
+							>
+								Resend link
+							</Button>
+						{/if}
 						{#if !email.primary}
-							<Button icon={Star} onclick={() => setPrimary(email.id)}
-								>Set as primary</Button
+							<Button
+								variant="danger"
+								icon={Trash}
+								disabled={deleteOne.loading}
+								onclick={() => deleteOne.run(email.address)}
 							>
+								Delete
+							</Button>
 						{/if}
-						<Button variant="danger" icon={Trash} onclick={() => remove(email.id)}
-							>Delete</Button
-						>
 					{/snippet}
 				</SettingsEntry>
 			{/each}
 		</SettingsList>
 	{/if}
+
+	<ErrorAlert label={resendOne.error ?? setPrimaryOne.error ?? deleteOne.error} />
+	{#if resendNotice}
+		<p class="typography-paragraph-regular text-foreground-muted">{resendNotice}</p>
+	{/if}
 </div>
diff --git a/web/src/lib/oauth-client-metadata.json b/web/src/lib/oauth-client-metadata.json
index 3f489fac..e6f6ec3b 100644
--- a/web/src/lib/oauth-client-metadata.json
+++ b/web/src/lib/oauth-client-metadata.json
@@ -5,7 +5,7 @@
 	"redirect_uris": [
 		"https://tangled.org/oauth/callback"
 	],
-	"scope": "atproto repo:sh.tangled.actor.profile repo:org.tangled.feed.subscription repo:sh.tangled.feed.comment repo:sh.tangled.feed.reaction repo:sh.tangled.feed.star repo:sh.tangled.graph.follow repo:sh.tangled.graph.vouch repo:sh.tangled.knot repo:sh.tangled.knot.member repo:sh.tangled.label.definition repo:sh.tangled.label.op repo:sh.tangled.publicKey repo:sh.tangled.repo repo:sh.tangled.repo.artifact repo:sh.tangled.repo.collaborator repo:sh.tangled.repo.issue repo:sh.tangled.repo.issue.comment repo:sh.tangled.repo.issue.state repo:sh.tangled.repo.pull repo:sh.tangled.repo.pull.comment repo:sh.tangled.repo.pull.status repo:sh.tangled.spindle repo:sh.tangled.spindle.member repo:sh.tangled.string blob:*/* rpc:sh.tangled.graph.listNetworkVouches?aud=* rpc:sh.tangled.knot.addMember?aud=* rpc:sh.tangled.knot.removeMember?aud=* rpc:sh.tangled.ci.triggerPipeline?aud=* rpc:sh.tangled.ci.cancelPipeline?aud=* rpc:sh.tangled.repo.addCollaborator?aud=* rpc:sh.tangled.repo.addSecret?aud=* rpc:sh.tangled.repo.create?aud=* rpc:sh.tangled.repo.delete?aud=* rpc:sh.tangled.repo.deleteBranch?aud=* rpc:sh.tangled.repo.forkStatus?aud=* rpc:sh.tangled.repo.forkSync?aud=* rpc:sh.tangled.repo.hiddenRef?aud=* rpc:sh.tangled.repo.listSecrets?aud=* rpc:sh.tangled.repo.merge?aud=* rpc:sh.tangled.repo.mergeCheck?aud=* rpc:sh.tangled.repo.removeCollaborator?aud=* rpc:sh.tangled.repo.removeSecret?aud=* rpc:sh.tangled.repo.setDefaultBranch?aud=* rpc:org.tangled.temp.notification.getPreferences?aud=* rpc:org.tangled.temp.notification.updatePreferences?aud=* rpc:org.tangled.temp.notification.getUnreadCount?aud=* rpc:org.tangled.temp.notification.listNotifications?aud=* rpc:org.tangled.temp.notification.markAllRead?aud=* rpc:org.tangled.temp.notification.markEntityRead?aud=* rpc:org.tangled.temp.notification.updateSeen?aud=* rpc:org.tangled.temp.site.getDomainClaim?aud=* rpc:org.tangled.temp.site.claimDomain?aud=* rpc:org.tangled.temp.site.releaseDomain?aud=* rpc:org.tangled.temp.search.searchCode?aud=* rpc:sh.tangled.git.keepCommit?aud=* rpc:sh.tangled.git.mergeCommit?aud=* rpc:com.atproto.moderation.createReport?aud=*",
+	"scope": "atproto repo:sh.tangled.actor.profile repo:org.tangled.feed.subscription repo:sh.tangled.feed.comment repo:sh.tangled.feed.reaction repo:sh.tangled.feed.star repo:sh.tangled.graph.follow repo:sh.tangled.graph.vouch repo:sh.tangled.knot repo:sh.tangled.knot.member repo:sh.tangled.label.definition repo:sh.tangled.label.op repo:sh.tangled.publicKey repo:sh.tangled.repo repo:sh.tangled.repo.artifact repo:sh.tangled.repo.collaborator repo:sh.tangled.repo.issue repo:sh.tangled.repo.issue.comment repo:sh.tangled.repo.issue.state repo:sh.tangled.repo.pull repo:sh.tangled.repo.pull.comment repo:sh.tangled.repo.pull.status repo:sh.tangled.spindle repo:sh.tangled.spindle.member repo:sh.tangled.string blob:*/* rpc:sh.tangled.graph.listNetworkVouches?aud=* rpc:sh.tangled.knot.addMember?aud=* rpc:sh.tangled.knot.removeMember?aud=* rpc:sh.tangled.ci.triggerPipeline?aud=* rpc:sh.tangled.ci.cancelPipeline?aud=* rpc:sh.tangled.repo.addCollaborator?aud=* rpc:sh.tangled.repo.addSecret?aud=* rpc:sh.tangled.repo.create?aud=* rpc:sh.tangled.repo.delete?aud=* rpc:sh.tangled.repo.deleteBranch?aud=* rpc:sh.tangled.repo.forkStatus?aud=* rpc:sh.tangled.repo.forkSync?aud=* rpc:sh.tangled.repo.hiddenRef?aud=* rpc:sh.tangled.repo.listSecrets?aud=* rpc:sh.tangled.repo.merge?aud=* rpc:sh.tangled.repo.mergeCheck?aud=* rpc:sh.tangled.repo.removeCollaborator?aud=* rpc:sh.tangled.repo.removeSecret?aud=* rpc:sh.tangled.repo.setDefaultBranch?aud=* rpc:org.tangled.temp.notification.getPreferences?aud=* rpc:org.tangled.temp.notification.updatePreferences?aud=* rpc:org.tangled.temp.notification.getUnreadCount?aud=* rpc:org.tangled.temp.notification.listNotifications?aud=* rpc:org.tangled.temp.notification.markAllRead?aud=* rpc:org.tangled.temp.notification.markEntityRead?aud=* rpc:org.tangled.temp.notification.updateSeen?aud=* rpc:org.tangled.temp.account.listEmails?aud=* rpc:org.tangled.temp.account.deleteEmail?aud=* rpc:org.tangled.temp.account.setPrimaryEmail?aud=* rpc:org.tangled.temp.account.addEmail?aud=* rpc:org.tangled.temp.account.verifyEmail?aud=* rpc:org.tangled.temp.site.getDomainClaim?aud=* rpc:org.tangled.temp.site.claimDomain?aud=* rpc:org.tangled.temp.site.releaseDomain?aud=* rpc:org.tangled.temp.search.searchCode?aud=* rpc:sh.tangled.git.keepCommit?aud=* rpc:sh.tangled.git.mergeCommit?aud=* rpc:com.atproto.moderation.createReport?aud=*",
 	"grant_types": [
 		"authorization_code",
 		"refresh_token"
diff --git a/web/src/routes/settings/emails/new/+page.svelte b/web/src/routes/settings/emails/new/+page.svelte
index a23b0485..7a708036 100644
--- a/web/src/routes/settings/emails/new/+page.svelte
+++ b/web/src/routes/settings/emails/new/+page.svelte
@@ -1,20 +1,35 @@
 <script lang="ts">
-	import { goto } from "$app/navigation";
-	import { resolve } from "$app/paths";
+	import { page } from "$app/state";
+	import { getAuth } from "$lib/auth.svelte";
+	import { createDeliberiClient } from "$lib/api/deliberi";
+	import { addEmail } from "$lib/api/emails";
+	import { createAction } from "$lib/action.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import DrillDown from "$lib/components/settings/DrillDown.svelte";
 	import SettingsList from "$lib/components/settings/SettingsList.svelte";
 	import FormRow from "$lib/components/settings/FormRow.svelte";
 	import FormActions from "$lib/components/settings/FormActions.svelte";
-	import Plus from "$icon/plus";
+	import Send from "$icon/send";
 	import X from "$icon/x";
+	import Check from "$icon/check";
+
+	const auth = getAuth();
+	const deliberiUrl = $derived(page.data.publicConfig?.deliberiUrl as string | undefined);
 
 	let email = $state("");
 	const valid = $derived(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim()));
+	let sentTo = $state<string | null>(null);
 
-	// mocked — sends nothing until the G4 email service is wired up
-	const submit = () => goto(resolve("/settings/emails"));
+	const send = createAction(async () => {
+		const agent = auth.agent;
+		const url = deliberiUrl;
+		if (!agent || !url) throw new Error("You need to be signed in to add an email address.");
+		const ctx = createDeliberiClient({ deliberiUrl: url, agent });
+		await addEmail(ctx, email.trim());
+		sentTo = email.trim();
+	});
 </script>
 
 <DrillDown
@@ -23,19 +38,45 @@
 	title="Add email"
 	description="Commits using this email will be associated with your profile."
 >
-	<SettingsList padding="small">
-		<FormRow label="Email" for="email-address">
-			<Input
-				id="email-address"
-				type="email"
-				bind:value={email}
-				placeholder="your@email.com"
-			/>
-		</FormRow>
-	</SettingsList>
+	{#if sentTo}
+		<SettingsList padding="small">
+			<div class="flex flex-col gap-2">
+				<p class="typography-paragraph-regular text-foreground-default">
+					A verification email was sent to <span class="font-medium">{sentTo}</span>.
+				</p>
+				<p class="typography-paragraph-regular text-foreground-muted">
+					Open the email and click the verification link.
+				</p>
+			</div>
+		</SettingsList>
+		<FormActions>
+			<Button href="/settings/emails" icon={Check}>Back to emails</Button>
+		</FormActions>
+	{:else}
+		<SettingsList padding="small">
+			<FormRow label="Email" for="email-address">
+				<Input
+					id="email-address"
+					type="email"
+					bind:value={email}
+					placeholder="your@email.com"
+					error={!!send.error}
+				/>
+			</FormRow>
+		</SettingsList>
+
+		<ErrorAlert label={send.error} />
 
-	<FormActions>
-		<Button href="/settings/emails" icon={X}>Cancel</Button>
-		<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
-	</FormActions>
+		<FormActions>
+			<Button href="/settings/emails" icon={X}>Cancel</Button>
+			<Button
+				variant="primary"
+				icon={Send}
+				disabled={!valid || send.loading}
+				onclick={send.run}
+			>
+				Send verification
+			</Button>
+		</FormActions>
+	{/if}
 </DrillDown>