diff --git a/localinfra/Caddyfile b/localinfra/Caddyfile
index 95a54eed8..0dd5aa781 100644
--- a/localinfra/Caddyfile
+++ b/localinfra/Caddyfile
@@ -63,12 +63,12 @@ knot2.tngl.boltless.dev {
 
 # spindle
 http://spindle.tngl.boltless.dev {
-    reverse_proxy spindle:6555
+    import cors spindle:6555
 }
 
 spindle.tngl.boltless.dev {
     tls internal
-    reverse_proxy spindle:6555
+    import cors spindle:6555
 }
 
 # knotmirror
diff --git a/web/src/lib/api/webhooks.test.ts b/web/src/lib/api/webhooks.test.ts
new file mode 100644
index 000000000..04c9028b0
--- /dev/null
+++ b/web/src/lib/api/webhooks.test.ts
@@ -0,0 +1,153 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { Did } from "@atcute/lexicons/syntax";
+import type { OAuthUserAgent } from "@atcute/oauth-browser-client";
+import oauthMetadata from "$lib/oauth-client-metadata";
+import { missingPermissions } from "$lib/auth/scopes";
+
+vi.mock("$lib/auth/agent", () => ({
+	createClient: () => ({}),
+	mintServiceAuth: async () => "token",
+	serviceDidForHost: (host: string) => `did:web:${host}`,
+	hostForServiceDid: () => null
+}));
+
+const {
+	createWebhook,
+	deleteWebhook,
+	isWebhookUrl,
+	listWebhookDeliveries,
+	listWebhooks,
+	retryWebhookDelivery,
+	selectedWebhookEvents,
+	toggleWebhook,
+	updateWebhook,
+	webhookActivation,
+	webhookEventSelection,
+	webhookIsActive,
+	webhookPermissions
+} = await import("$lib/api/webhooks");
+
+const agent = { sub: "did:plc:owner" } as unknown as OAuthUserAgent;
+const spindle = new URL("https://spindle.test");
+const repoDid: Did = "did:plc:repo";
+
+const respond = (...bodies: unknown[]) => {
+	let request = 0;
+	const fetch = vi.fn<typeof globalThis.fetch>(async () => {
+		const body = bodies[request++] ?? {};
+		return new Response(JSON.stringify(body), {
+			status: 200,
+			headers: { "content-type": "application/json" }
+		});
+	});
+	vi.stubGlobal("fetch", fetch);
+	return fetch;
+};
+
+const requestUrl = (fetch: ReturnType<typeof respond>, index = 0) =>
+	new URL(String(fetch.mock.calls[index][0]));
+const requestBody = (fetch: ReturnType<typeof respond>, index = 0) =>
+	JSON.parse(String(fetch.mock.calls[index][1]?.body));
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe("webhook settings", () => {
+	it("lists hooks and deliveries from the repository spindle", async () => {
+		const hook = {
+			id: 7,
+			url: "https://hooks.test/tangled",
+			events: ["push"],
+			active: true,
+			createdAt: "2026-09-20T00:00:00Z"
+		};
+		const delivery = {
+			id: 11,
+			webhookId: 7,
+			deliveryId: "attempt",
+			event: "push",
+			url: hook.url,
+			success: true,
+			createdAt: hook.createdAt
+		};
+		const fetch = respond({ webhooks: [hook] }, { deliveries: [delivery] });
+
+		await expect(listWebhooks(agent, spindle, repoDid)).resolves.toEqual([hook]);
+		await expect(listWebhookDeliveries(agent, spindle, repoDid, [7, 8], 25)).resolves.toEqual([
+			delivery
+		]);
+
+		const listed = requestUrl(fetch);
+		expect(listed.pathname).toBe("/xrpc/org.tangled.temp.webhook.listWebhooks");
+		expect(listed.searchParams.get("repoDid")).toBe(repoDid);
+		const deliveries = requestUrl(fetch, 1);
+		expect(deliveries.pathname).toBe("/xrpc/org.tangled.temp.webhook.getDeliveriesForWebhooks");
+		expect(deliveries.searchParams.getAll("ids")).toEqual(["7", "8"]);
+		expect(deliveries.searchParams.get("limit")).toBe("25");
+	});
+
+	it("creates, updates, toggles, retries, and deletes through spindle xrpc", async () => {
+		const fetch = respond({ id: 7 }, {}, { active: false }, {}, {});
+
+		await expect(
+			createWebhook(agent, spindle, repoDid, {
+				url: "https://hooks.test/tangled",
+				events: ["push"],
+				secret: "shared",
+				active: true
+			})
+		).resolves.toBe(7);
+		await updateWebhook(agent, spindle, repoDid, 7, {
+			url: "https://hooks.test/renamed",
+			events: ["repository:renamed"],
+			secret: ""
+		});
+		await expect(toggleWebhook(agent, spindle, repoDid, 7)).resolves.toBe(false);
+		await retryWebhookDelivery(agent, spindle, repoDid, 7, "attempt");
+		await deleteWebhook(agent, spindle, repoDid, 7);
+
+		expect(fetch.mock.calls.map(([input]) => new URL(String(input)).pathname)).toEqual([
+			"/xrpc/org.tangled.temp.webhook.createWebhook",
+			"/xrpc/org.tangled.temp.webhook.updateWebhook",
+			"/xrpc/org.tangled.temp.webhook.toggleWebhook",
+			"/xrpc/org.tangled.temp.webhook.retryDelivery",
+			"/xrpc/org.tangled.temp.webhook.deleteWebhook"
+		]);
+		expect(requestBody(fetch)).toEqual({
+			repoDid,
+			url: "https://hooks.test/tangled",
+			events: ["push"],
+			secret: "shared",
+			active: true
+		});
+		expect(requestBody(fetch, 1)).toEqual({
+			repoDid,
+			id: 7,
+			url: "https://hooks.test/renamed",
+			events: ["repository:renamed"],
+			secret: ""
+		});
+		expect(requestBody(fetch, 3)).toEqual({ repoDid, webhookId: 7, deliveryId: "attempt" });
+	});
+
+	it("maps event selections, permissions, and accepts only HTTP webhook URLs", () => {
+		const selection = webhookEventSelection(["push", "pull_request:merged", "unknown"]);
+		expect(selectedWebhookEvents(selection)).toEqual(["push", "pull_request:merged"]);
+		expect(webhookActivation(true)).toBe("active");
+		expect(webhookActivation(false)).toBe("inactive");
+		expect(webhookIsActive("active")).toBe(true);
+		expect(webhookIsActive("inactive")).toBe(false);
+		expect(isWebhookUrl(" https://hooks.test/tangled ")).toBe(true);
+		expect(isWebhookUrl("http://hooks.test/tangled")).toBe(true);
+		expect(isWebhookUrl("ftp://hooks.test/tangled")).toBe(false);
+		expect(isWebhookUrl("not a url")).toBe(false);
+		const permissions = webhookPermissions(spindle);
+		expect(permissions).toHaveLength(7);
+		expect(missingPermissions("atproto", permissions)).toEqual(permissions);
+		expect(missingPermissions(oauthMetadata.scope, permissions)).toEqual([]);
+		expect(permissions).toContainEqual({
+			resource: "rpc",
+			lxm: "org.tangled.temp.webhook.listWebhooks",
+			aud: "did:web:spindle.test"
+		});
+	});
+});
diff --git a/web/src/lib/api/webhooks.ts b/web/src/lib/api/webhooks.ts
new file mode 100644
index 000000000..d62fc39a6
--- /dev/null
+++ b/web/src/lib/api/webhooks.ts
@@ -0,0 +1,198 @@
+import { ok } from "@atcute/client";
+import type { Did, Nsid } from "@atcute/lexicons/syntax";
+import type { OAuthUserAgent } from "@atcute/oauth-browser-client";
+import { serviceClient } from "$lib/api/_request";
+import { serviceDidForHost } from "$lib/auth/agent";
+import type { Permission } from "$lib/auth/scopes";
+import { mainSchema as createWebhookSchema } from "$lib/api/lexicons/types/org/tangled/temp/webhook/createWebhook";
+import { mainSchema as deleteWebhookSchema } from "$lib/api/lexicons/types/org/tangled/temp/webhook/deleteWebhook";
+import {
+	mainSchema as getDeliveriesSchema,
+	type Delivery
+} from "$lib/api/lexicons/types/org/tangled/temp/webhook/getDeliveriesForWebhooks";
+import {
+	mainSchema as listWebhooksSchema,
+	type Webhook
+} from "$lib/api/lexicons/types/org/tangled/temp/webhook/listWebhooks";
+import { mainSchema as retryDeliverySchema } from "$lib/api/lexicons/types/org/tangled/temp/webhook/retryDelivery";
+import { mainSchema as toggleWebhookSchema } from "$lib/api/lexicons/types/org/tangled/temp/webhook/toggleWebhook";
+import { mainSchema as updateWebhookSchema } from "$lib/api/lexicons/types/org/tangled/temp/webhook/updateWebhook";
+import { didOf } from "$lib/api/syntax";
+
+export type { Delivery, Webhook };
+
+export const WEBHOOK_EVENTS = [
+	{ id: "push", label: "Push events" },
+	{ id: "repository:renamed", label: "Repository renamed" },
+	{ id: "pull_request:created", label: "Pull request opened" },
+	{ id: "pull_request:resubmitted", label: "Pull request resubmitted" },
+	{ id: "pull_request:merged", label: "Pull request merged" },
+	{ id: "pull_request:closed", label: "Pull request closed" },
+	{ id: "pull_request:reopened", label: "Pull request reopened" }
+] as const;
+
+export type WebhookEvent = (typeof WEBHOOK_EVENTS)[number]["id"];
+export type WebhookEventSelection = Record<WebhookEvent, boolean>;
+export type WebhookActivation = "active" | "inactive";
+
+export const webhookActivation = (active: boolean): WebhookActivation =>
+	active ? "active" : "inactive";
+export const webhookIsActive = (activation: WebhookActivation): boolean => activation === "active";
+
+const WEBHOOK_METHODS = [
+	createWebhookSchema.nsid,
+	deleteWebhookSchema.nsid,
+	getDeliveriesSchema.nsid,
+	listWebhooksSchema.nsid,
+	retryDeliverySchema.nsid,
+	toggleWebhookSchema.nsid,
+	updateWebhookSchema.nsid
+] as const;
+
+export const webhookPermissions = (spindle: URL): readonly Permission[] => {
+	const aud = didOf(serviceDidForHost(spindle.host));
+	return WEBHOOK_METHODS.map((lxm) => ({ resource: "rpc", lxm: lxm as Nsid, aud }));
+};
+
+export const webhookEventSelection = (
+	events: readonly string[] = ["push"]
+): WebhookEventSelection =>
+	Object.fromEntries(
+		WEBHOOK_EVENTS.map(({ id }) => [id, events.includes(id)])
+	) as WebhookEventSelection;
+
+export const selectedWebhookEvents = (selection: WebhookEventSelection): WebhookEvent[] =>
+	WEBHOOK_EVENTS.flatMap(({ id }) => (selection[id] ? [id] : []));
+
+export const isWebhookUrl = (value: string): boolean => {
+	try {
+		return ["http:", "https:"].includes(new URL(value.trim()).protocol);
+	} catch {
+		return false;
+	}
+};
+
+type GenericUri = `${string}:${string}`;
+
+const client = (agent: OAuthUserAgent, spindle: URL) =>
+	serviceClient(agent, spindle.toString()).xrpc;
+const url = (value: string): GenericUri => {
+	const normalized = value.trim();
+	if (!isWebhookUrl(normalized)) throw new Error("Webhook URL must use HTTP or HTTPS.");
+	return normalized as GenericUri;
+};
+
+export const listWebhooks = async (
+	agent: OAuthUserAgent,
+	spindle: URL,
+	repoDid: Did
+): Promise<Webhook[]> => {
+	const { webhooks } = await ok(
+		client(agent, spindle).call(listWebhooksSchema, { params: { repoDid } })
+	);
+	return webhooks ?? [];
+};
+
+export interface CreateWebhook {
+	url: string;
+	events: WebhookEvent[];
+	secret?: string;
+	active?: boolean;
+}
+
+export const createWebhook = async (
+	agent: OAuthUserAgent,
+	spindle: URL,
+	repoDid: Did,
+	webhook: CreateWebhook
+): Promise<number> => {
+	const { id } = await ok(
+		client(agent, spindle).call(createWebhookSchema, {
+			input: { ...webhook, repoDid, url: url(webhook.url) }
+		})
+	);
+	return id;
+};
+
+export interface UpdateWebhook {
+	url?: string;
+	events?: WebhookEvent[];
+	secret?: string;
+	active?: boolean;
+}
+
+export const updateWebhook = async (
+	agent: OAuthUserAgent,
+	spindle: URL,
+	repoDid: Did,
+	id: number,
+	webhook: UpdateWebhook
+): Promise<void> => {
+	const { url: webhookUrl, ...changes } = webhook;
+	await ok(
+		client(agent, spindle).call(updateWebhookSchema, {
+			input: {
+				...changes,
+				repoDid,
+				id,
+				...(webhookUrl === undefined ? {} : { url: url(webhookUrl) })
+			}
+		})
+	);
+};
+
+export const deleteWebhook = async (
+	agent: OAuthUserAgent,
+	spindle: URL,
+	repoDid: Did,
+	id: number
+): Promise<void> => {
+	await ok(
+		client(agent, spindle).call(deleteWebhookSchema, {
+			input: { repoDid, id }
+		})
+	);
+};
+
+export const toggleWebhook = async (
+	agent: OAuthUserAgent,
+	spindle: URL,
+	repoDid: Did,
+	id: number
+): Promise<boolean> => {
+	const { active } = await ok(
+		client(agent, spindle).call(toggleWebhookSchema, {
+			input: { repoDid, id }
+		})
+	);
+	return active;
+};
+
+export const listWebhookDeliveries = async (
+	agent: OAuthUserAgent,
+	spindle: URL,
+	repoDid: Did,
+	ids: number[],
+	limit = 100
+): Promise<Delivery[]> => {
+	const { deliveries } = await ok(
+		client(agent, spindle).call(getDeliveriesSchema, {
+			params: { repoDid, ids, limit }
+		})
+	);
+	return deliveries ?? [];
+};
+
+export const retryWebhookDelivery = async (
+	agent: OAuthUserAgent,
+	spindle: URL,
+	repoDid: Did,
+	webhookId: number,
+	deliveryId: string
+): Promise<void> => {
+	await ok(
+		client(agent, spindle).call(retryDeliverySchema, {
+			input: { repoDid, webhookId, deliveryId }
+		})
+	);
+};
diff --git a/web/src/lib/oauth-client-metadata.ts b/web/src/lib/oauth-client-metadata.ts
index 0ec206a84..bd1520cce 100644
--- a/web/src/lib/oauth-client-metadata.ts
+++ b/web/src/lib/oauth-client-metadata.ts
@@ -46,6 +46,13 @@ const scopes = [
 	"rpc:org.tangled.temp.notification.updatePreferences?aud=*",
 	"rpc:org.tangled.temp.notification.updateSeen?aud=*",
 	"rpc:org.tangled.temp.search.searchCode?aud=*",
+	"rpc:org.tangled.temp.webhook.createWebhook?aud=*",
+	"rpc:org.tangled.temp.webhook.deleteWebhook?aud=*",
+	"rpc:org.tangled.temp.webhook.getDeliveriesForWebhooks?aud=*",
+	"rpc:org.tangled.temp.webhook.listWebhooks?aud=*",
+	"rpc:org.tangled.temp.webhook.retryDelivery?aud=*",
+	"rpc:org.tangled.temp.webhook.toggleWebhook?aud=*",
+	"rpc:org.tangled.temp.webhook.updateWebhook?aud=*",
 	"rpc:org.tangled.temp.site.claimDomain?aud=*",
 	"rpc:org.tangled.temp.site.getDomainClaim?aud=*",
 	"rpc:org.tangled.temp.site.releaseDomain?aud=*",
diff --git a/web/src/routes/[handle]/[repo]/settings/hooks/+layout.svelte b/web/src/routes/[handle]/[repo]/settings/hooks/+layout.svelte
new file mode 100644
index 000000000..66eedebf1
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/settings/hooks/+layout.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { LayoutProps } from "./$types";
+	import { createAction } from "$lib/action.svelte";
+	import { serviceUrlFor } from "$lib/api/_request";
+	import { webhookPermissions } from "$lib/api/webhooks";
+	import { getAuth } from "$lib/auth.svelte";
+	import { missingPermissions } from "$lib/auth/scopes";
+	import SettingsBlock from "$lib/components/settings/SettingsBlock.svelte";
+	import SettingsHeader from "$lib/components/settings/SettingsHeader.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
+
+	let { children, data }: LayoutProps = $props();
+
+	const auth = getAuth();
+	const agent = $derived(auth.agent);
+	const repo = $derived(data.repo);
+	const spindle = $derived(repo.spindle ? new URL(serviceUrlFor(repo.spindle)) : null);
+	const ungranted = $derived(
+		agent && spindle
+			? missingPermissions(agent.session.token.scope, webhookPermissions(spindle))
+			: []
+	);
+
+	const reauthorize = createAction(async () => {
+		const did = auth.currentDid;
+		if (!did) return;
+		await auth.signIn(did, location.pathname + location.search + location.hash);
+	});
+</script>
+
+{#if ungranted.length > 0}
+	<SettingsHeader title="Hooks" />
+	<ErrorAlert label={reauthorize.error} />
+	<SettingsBlock
+		title="Authorize webhooks"
+		description="Webhook access was added after you signed in. Sign in again to grant this repository's spindle access to webhook settings."
+	>
+		<Button variant="primary" loading={reauthorize.loading} onclick={reauthorize.run}>
+			Sign in again
+		</Button>
+	</SettingsBlock>
+{:else}
+	{@render children()}
+{/if}
diff --git a/web/src/routes/[handle]/[repo]/settings/hooks/+page.ts b/web/src/routes/[handle]/[repo]/settings/hooks/+layout.ts
similarity index 52%
rename from web/src/routes/[handle]/[repo]/settings/hooks/+page.ts
rename to web/src/routes/[handle]/[repo]/settings/hooks/+layout.ts
index a308e5542..19946bac0 100644
--- a/web/src/routes/[handle]/[repo]/settings/hooks/+page.ts
+++ b/web/src/routes/[handle]/[repo]/settings/hooks/+layout.ts
@@ -1,6 +1,6 @@
 import { requireRepoAdmin } from "$lib/api/access";
-import type { PageLoad } from "./$types";
+import type { LayoutLoad } from "./$types";
 
-export const load: PageLoad = async (event) => {
+export const load: LayoutLoad = async (event) => {
 	requireRepoAdmin((await event.parent()).access);
 };
diff --git a/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte b/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
index 2afd3b004..78d5a5c90 100644
--- a/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
@@ -1,8 +1,17 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
-	import Avatar from "$lib/components/ui/Avatar.svelte";
+	import { createAction, createLoad } from "$lib/action.svelte";
+	import { serviceUrlFor } from "$lib/api/_request";
+	import { didOf } from "$lib/api/syntax";
+	import { deleteWebhook, listWebhooks, toggleWebhook, type Webhook } from "$lib/api/webhooks";
+	import { getAuth } from "$lib/auth.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Toggle from "$lib/components/ui/Toggle.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
+	import Bones from "$lib/components/ui/Bones.svelte";
+	import settingsSettingspanelContentSkeletonFixture from "$lib/bones/settings-settingspanel--content-skeleton-fixture.bones.json";
 	import SettingsEmpty from "$lib/components/settings/SettingsEmpty.svelte";
 	import SettingsBlock from "$lib/components/settings/SettingsBlock.svelte";
 	import SettingsHeader from "$lib/components/settings/SettingsHeader.svelte";
@@ -16,91 +25,120 @@
 
 	let { data } = $props();
 
+	const auth = getAuth();
 	const repo = $derived(data.repo);
 	const base = $derived(`/${repo.ownerHandle}/${repo.name}/settings`);
-	const path = (p: string) => resolve(p as "/");
+	const spindle = $derived(repo.spindle ? new URL(serviceUrlFor(repo.spindle)) : null);
+	const repoDid = $derived(repo.repoDid ? didOf(repo.repoDid) : null);
+	const path = (value: string) => resolve(value as "/");
 
-	// mocked — webhooks are not wired up yet
-	let hooks = $state([
-		{
-			id: "1",
-			url: "https://hooks.user.tld/tg/repository-cs-hk",
-			events: "push, pull_request:created, pull_request:closed",
-			added: "Added 2 mins ago by",
-			by: "",
-			enabled: true
-		},
-		{
-			id: "2",
-			url: "https://hooks.user.tld/tg/repository",
-			events: "push, pull_request:created, pull_request:closed",
-			added: "Added 5 hours ago by",
-			by: "",
-			enabled: false
-		}
-	]);
+	const hooks = createLoad(async (): Promise<Webhook[] | null> => {
+		const agent = auth.agent;
+		if (!agent || !spindle) return null;
+		if (!repoDid) throw new Error("This repository has no DID on its spindle yet.");
+		return listWebhooks(agent, spindle, repoDid);
+	});
+
+	const toggle = createAction(async (id: number) => {
+		const agent = auth.agent;
+		if (!agent || !spindle || !repoDid) return;
+		const active = await toggleWebhook(agent, spindle, repoDid, id);
+		hooks.update(
+			(rows) => rows?.map((hook) => (hook.id === id ? { ...hook, active } : hook)) ?? null
+		);
+	});
 
-	$effect(() => {
-		for (const h of hooks) {
-			h.by = repo.ownerHandle;
-		}
+	const remove = createAction(async (id: number) => {
+		const agent = auth.agent;
+		if (!agent || !spindle || !repoDid) return;
+		await deleteWebhook(agent, spindle, repoDid, id);
+		hooks.update((rows) => rows?.filter((hook) => hook.id !== id) ?? null);
 	});
 
-	const remove = (id: string) => {
-		hooks = hooks.filter((h) => h.id !== id);
+	const confirmDelete = (hook: Webhook) => {
+		if (confirm(`Delete the webhook for ${hook.url}?`)) void remove.run(hook.id);
 	};
 </script>
 
-<SettingsHeader title="Hooks" />
-
-<SettingsBlock
-	description={[
-		"Webhooks allow external services to be notified when certain events happen.",
-		"When the specified events happen, we'll send a POST request to each of the URLs you provide."
-	]}
->
-	{#snippet action()}
-		<Button icon={Plus} href={path(`${base}/hooks/new`)}>New webhook</Button>
+<Pending>
+	{#snippet skeleton()}
+		<Bones capture={settingsSettingspanelContentSkeletonFixture} />
 	{/snippet}
 
-	{#if hooks.length === 0}
-		<SettingsEmpty message="No webhooks yet" />
-	{:else}
-		<SettingsList>
-			{#each hooks as hook (hook.id)}
-				<div
-					class="flex w-full flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
-				>
-					<div class="flex min-w-0 flex-col gap-1">
-						<CodeChip class="w-fit break-all">{hook.url}</CodeChip>
-						<span
-							class="flex items-center gap-1.5 typography-paragraph-regular text-foreground-muted"
-						>
-							<Eye class="size-3.5 shrink-0" aria-hidden="true" />
-							{hook.events}
-						</span>
-						<span
-							class="flex items-center gap-1.5 typography-paragraph-regular text-foreground-muted"
-						>
-							{hook.added}
-							<Avatar handle={hook.by} size="small" />
-							{hook.by}
-						</span>
-					</div>
-					<div class="flex flex-col items-end gap-4 sm:shrink-0">
-						<Toggle bind:checked={hook.enabled} aria-label="Enable {hook.url}" />
-						<div
-							class="flex w-full items-center justify-between gap-2 sm:w-auto sm:justify-end"
-						>
-							<Button icon={Inbox}>Deliveries</Button>
-							<Button icon={Pencil}>Edit</Button>
-							<Button variant="danger" icon={Trash} onclick={() => remove(hook.id)}
-								>Delete</Button
+	<SettingsHeader title="Hooks" />
+
+	<ErrorAlert label={hooks.error ?? toggle.error ?? remove.error} />
+
+	<SettingsBlock
+		description={[
+			"Webhooks allow external services to be notified when certain events happen.",
+			"When the specified events happen, we'll send a POST request to each of the URLs you provide."
+		]}
+	>
+		{#snippet action()}
+			<Button icon={Plus} disabled={!spindle || !repoDid} href={path(`${base}/hooks/new`)}
+				>New webhook</Button
+			>
+		{/snippet}
+
+		{#if !spindle}
+			<SettingsEmpty message="Choose a spindle to configure webhooks" />
+		{:else if hooks.loading}
+			<Bones capture={settingsSettingspanelContentSkeletonFixture} />
+		{:else if hooks.error}
+			<SettingsEmpty message="Couldn't reach {repo.spindle}" />
+		{:else if (hooks.data ?? []).length === 0}
+			<SettingsEmpty message="No webhooks yet" />
+		{:else}
+			<SettingsList>
+				{#each hooks.data ?? [] as hook (hook.id)}
+					<div
+						class="flex w-full flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
+					>
+						<div class="flex min-w-0 flex-col gap-1">
+							<CodeChip class="w-fit break-all">{hook.url}</CodeChip>
+							<span
+								class="flex items-center gap-1.5 typography-paragraph-regular text-foreground-muted"
+							>
+								<Eye class="size-3.5 shrink-0" aria-hidden="true" />
+								{hook.events.join(", ")}
+							</span>
+							<span class="typography-paragraph-regular text-foreground-muted">
+								Created <TimeAgo value={hook.createdAt} variant="full" />
+							</span>
+						</div>
+						<div class="flex flex-col items-end gap-4 sm:shrink-0">
+							<Toggle
+								checked={hook.active}
+								disabled={toggle.loading && toggle.args?.[0] === hook.id}
+								aria-label="Enable {hook.url}"
+								onclick={(event) => {
+									event.preventDefault();
+									void toggle.run(hook.id);
+								}}
+							/>
+							<div
+								class="flex w-full items-center justify-between gap-2 sm:w-auto sm:justify-end"
 							>
+								<Button
+									icon={Inbox}
+									href={path(`${base}/hooks/${hook.id}/deliveries`)}
+									>Deliveries</Button
+								>
+								<Button icon={Pencil} href={path(`${base}/hooks/${hook.id}`)}
+									>Edit</Button
+								>
+								<Button
+									variant="danger"
+									icon={Trash}
+									loading={remove.loading && remove.args?.[0] === hook.id}
+									onclick={() => confirmDelete(hook)}>Delete</Button
+								>
+							</div>
 						</div>
 					</div>
-				</div>
-			{/each}
-		</SettingsList>
-	{/if}
-</SettingsBlock>
+				{/each}
+			</SettingsList>
+		{/if}
+	</SettingsBlock>
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/settings/hooks/[id]/+layout.ts b/web/src/routes/[handle]/[repo]/settings/hooks/[id]/+layout.ts
new file mode 100644
index 000000000..c89ec33ec
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/settings/hooks/[id]/+layout.ts
@@ -0,0 +1,8 @@
+import { error } from "@sveltejs/kit";
+import type { LayoutLoad } from "./$types";
+
+export const load: LayoutLoad = ({ params }) => {
+	const id = Number(params.id);
+	if (!Number.isSafeInteger(id) || id < 1) error(404, "Webhook not found");
+	return { id };
+};
diff --git a/web/src/routes/[handle]/[repo]/settings/hooks/[id]/+page.svelte b/web/src/routes/[handle]/[repo]/settings/hooks/[id]/+page.svelte
new file mode 100644
index 000000000..fe2856e2b
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/settings/hooks/[id]/+page.svelte
@@ -0,0 +1,191 @@
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import { resolve } from "$app/paths";
+	import { createAction, createLoad } from "$lib/action.svelte";
+	import { serviceUrlFor } from "$lib/api/_request";
+	import { didOf } from "$lib/api/syntax";
+	import {
+		isWebhookUrl,
+		listWebhooks,
+		selectedWebhookEvents,
+		updateWebhook,
+		WEBHOOK_EVENTS,
+		webhookActivation,
+		webhookEventSelection,
+		webhookIsActive,
+		type Webhook,
+		type WebhookActivation,
+		type WebhookEventSelection
+	} from "$lib/api/webhooks";
+	import { getAuth } from "$lib/auth.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
+	import Checkbox from "$lib/components/ui/Checkbox.svelte";
+	import Toggle from "$lib/components/ui/Toggle.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import Bones from "$lib/components/ui/Bones.svelte";
+	import settingsSettingspanelContentSkeletonFixture from "$lib/bones/settings-settingspanel--content-skeleton-fixture.bones.json";
+	import DrillDown from "$lib/components/settings/DrillDown.svelte";
+	import SettingsEmpty from "$lib/components/settings/SettingsEmpty.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 Save from "$icon/save";
+	import X from "$icon/x";
+
+	let { data } = $props();
+
+	const auth = getAuth();
+	const repo = $derived(data.repo);
+	const back = $derived(`/${repo.ownerHandle}/${repo.name}/settings/hooks`);
+	const spindle = $derived(repo.spindle ? new URL(serviceUrlFor(repo.spindle)) : null);
+	const repoDid = $derived(repo.repoDid ? didOf(repo.repoDid) : null);
+
+	const webhook = createLoad(async (): Promise<Webhook> => {
+		const agent = auth.agent;
+		if (!agent) throw new Error("Sign in to edit this webhook.");
+		if (!spindle) throw new Error("This repository has no spindle configured.");
+		if (!repoDid) throw new Error("This repository has no DID on its spindle yet.");
+		const hooks = await listWebhooks(agent, spindle, repoDid);
+		const found = hooks.find((hook) => hook.id === data.id);
+		if (!found) throw new Error("Webhook not found.");
+		return found;
+	});
+
+	type SecretChange = { kind: "keep" } | { kind: "replace"; value: string } | { kind: "remove" };
+	type Editor =
+		| { kind: "loading" }
+		| {
+				kind: "editing";
+				id: number;
+				url: string;
+				secret: SecretChange;
+				activation: WebhookActivation;
+				events: WebhookEventSelection;
+		  };
+
+	let editor = $state<Editor>({ kind: "loading" });
+
+	$effect(() => {
+		const current = webhook.data;
+		if (!current || (editor.kind === "editing" && current.id === editor.id)) return;
+		editor = {
+			kind: "editing",
+			id: current.id,
+			url: current.url,
+			secret: { kind: "keep" },
+			activation: webhookActivation(current.active),
+			events: webhookEventSelection(current.events)
+		};
+	});
+
+	const selected = $derived(
+		editor.kind === "editing" ? selectedWebhookEvents(editor.events) : []
+	);
+	const valid = $derived(
+		editor.kind === "editing" && isWebhookUrl(editor.url) && selected.length > 0
+	);
+	const secretValue = () =>
+		editor.kind === "editing" && editor.secret.kind === "replace" ? editor.secret.value : "";
+	const setSecretValue = (value: string) => {
+		if (editor.kind !== "editing") return;
+		editor.secret = value === "" ? { kind: "keep" } : { kind: "replace", value };
+	};
+	const removesSecret = () => editor.kind === "editing" && editor.secret.kind === "remove";
+	const setRemovesSecret = (remove: boolean) => {
+		if (editor.kind !== "editing") return;
+		editor.secret = remove ? { kind: "remove" } : { kind: "keep" };
+	};
+	const isActive = () => editor.kind === "editing" && webhookIsActive(editor.activation);
+	const setActive = (active: boolean) => {
+		if (editor.kind !== "editing") return;
+		editor.activation = webhookActivation(active);
+	};
+
+	const save = createAction(async () => {
+		const agent = auth.agent;
+		if (!agent || !valid || editor.kind !== "editing") return;
+		if (!spindle) throw new Error("This repository has no spindle configured.");
+		if (!repoDid) throw new Error("This repository has no DID on its spindle yet.");
+		const secret =
+			editor.secret.kind === "remove"
+				? { secret: "" }
+				: editor.secret.kind === "replace" && editor.secret.value.trim()
+					? { secret: editor.secret.value.trim() }
+					: {};
+		await updateWebhook(agent, spindle, repoDid, editor.id, {
+			url: editor.url.trim(),
+			events: selected,
+			active: webhookIsActive(editor.activation),
+			...secret
+		});
+		await goto(resolve(back as "/"), { invalidateAll: true });
+	});
+</script>
+
+<DrillDown backLabel="Hooks" backHref={back} title="Edit webhook">
+	<ErrorAlert label={webhook.error ?? save.error} />
+
+	{#if webhook.loading}
+		<Bones capture={settingsSettingspanelContentSkeletonFixture} />
+	{:else if webhook.error}
+		<SettingsEmpty message="Couldn't load this webhook" />
+	{:else if editor.kind === "editing"}
+		<SettingsList padding="small">
+			<FormRow
+				label="Payload URL"
+				description="The URL that will receive the webhook POST requests."
+				for="hook-url"
+			>
+				<Input id="hook-url" type="url" bind:value={editor.url} />
+			</FormRow>
+
+			<FormRow
+				label="New secret"
+				optional
+				description="Leave blank to keep the existing secret."
+				for="hook-secret"
+			>
+				<div class="flex flex-col gap-2">
+					<Input
+						id="hook-secret"
+						type="password"
+						bind:value={secretValue, setSecretValue}
+						disabled={editor.secret.kind === "remove"}
+						placeholder="A replacement secret"
+					/>
+					<Checkbox bind:checked={removesSecret, setRemovesSecret}
+						>Remove the existing secret</Checkbox
+					>
+				</div>
+			</FormRow>
+
+			<FormRow
+				label="Events"
+				description="Additional event types (issues) will be available in future updates."
+				align="start"
+			>
+				<div class="flex flex-col gap-1">
+					{#each WEBHOOK_EVENTS as event (event.id)}
+						<Checkbox bind:checked={editor.events[event.id]}>{event.label}</Checkbox>
+					{/each}
+				</div>
+			</FormRow>
+
+			<FormRow label="Active" description="Deliver selected events to this URL.">
+				<Toggle bind:checked={isActive, setActive} aria-label="Active" />
+			</FormRow>
+		</SettingsList>
+
+		<FormActions>
+			<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
+			<Button
+				variant="primary"
+				icon={Save}
+				disabled={!valid}
+				loading={save.loading}
+				onclick={save.run}>Save</Button
+			>
+		</FormActions>
+	{/if}
+</DrillDown>
diff --git a/web/src/routes/[handle]/[repo]/settings/hooks/[id]/deliveries/+page.svelte b/web/src/routes/[handle]/[repo]/settings/hooks/[id]/deliveries/+page.svelte
new file mode 100644
index 000000000..85745268f
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/settings/hooks/[id]/deliveries/+page.svelte
@@ -0,0 +1,147 @@
+<script lang="ts">
+	import { createAction, createLoad } from "$lib/action.svelte";
+	import { serviceUrlFor } from "$lib/api/_request";
+	import { didOf } from "$lib/api/syntax";
+	import { listWebhookDeliveries, retryWebhookDelivery, type Delivery } from "$lib/api/webhooks";
+	import { getAuth } from "$lib/auth.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import Tag from "$lib/components/ui/Tag.svelte";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
+	import Bones from "$lib/components/ui/Bones.svelte";
+	import settingsSettingspanelContentSkeletonFixture from "$lib/bones/settings-settingspanel--content-skeleton-fixture.bones.json";
+	import DrillDown from "$lib/components/settings/DrillDown.svelte";
+	import SettingsEmpty from "$lib/components/settings/SettingsEmpty.svelte";
+	import SettingsList from "$lib/components/settings/SettingsList.svelte";
+
+	let { data } = $props();
+
+	const auth = getAuth();
+	const repo = $derived(data.repo);
+	const back = $derived(`/${repo.ownerHandle}/${repo.name}/settings/hooks`);
+	const spindle = $derived(repo.spindle ? new URL(serviceUrlFor(repo.spindle)) : null);
+	const repoDid = $derived(repo.repoDid ? didOf(repo.repoDid) : null);
+
+	const deliveries = createLoad(async (): Promise<Delivery[]> => {
+		const agent = auth.agent;
+		if (!agent) throw new Error("Sign in to inspect webhook deliveries.");
+		if (!spindle) throw new Error("This repository has no spindle configured.");
+		if (!repoDid) throw new Error("This repository has no DID on its spindle yet.");
+		return listWebhookDeliveries(agent, spindle, repoDid, [data.id]);
+	});
+
+	type RetryState = "retrying" | "queued";
+	let retries = $state<Record<string, RetryState>>({});
+	const retry = createAction(async (deliveryId: string) => {
+		const agent = auth.agent;
+		if (!agent) throw new Error("Sign in to retry this delivery.");
+		if (!spindle) throw new Error("This repository has no spindle configured.");
+		if (!repoDid) throw new Error("This repository has no DID on its spindle yet.");
+		if (retries[deliveryId]) return;
+		retries[deliveryId] = "retrying";
+		try {
+			await retryWebhookDelivery(agent, spindle, repoDid, data.id, deliveryId);
+			retries[deliveryId] = "queued";
+		} catch (cause) {
+			delete retries[deliveryId];
+			throw cause;
+		}
+	});
+
+	const body = (value?: string) => {
+		if (!value) return "";
+		try {
+			return JSON.stringify(JSON.parse(value), null, 2);
+		} catch {
+			return value;
+		}
+	};
+</script>
+
+<DrillDown
+	backLabel="Hooks"
+	backHref={back}
+	title="Webhook deliveries"
+	description="Delivery attempts are retained by the repository's spindle."
+>
+	<ErrorAlert label={deliveries.error ?? retry.error} />
+
+	{#if deliveries.loading}
+		<Bones capture={settingsSettingspanelContentSkeletonFixture} />
+	{:else if deliveries.error}
+		<SettingsEmpty message="Couldn't load webhook deliveries" />
+	{:else if (deliveries.data ?? []).length === 0}
+		<SettingsEmpty message="No deliveries yet" />
+	{:else}
+		<div class="flex justify-end">
+			<Button loading={deliveries.loading} onclick={deliveries.run}>Refresh deliveries</Button
+			>
+		</div>
+		<SettingsList padding="small">
+			{#each deliveries.data ?? [] as delivery (delivery.id)}
+				<details class="group w-full">
+					<summary
+						class="flex cursor-pointer list-none flex-wrap items-center gap-2 text-foreground-default"
+					>
+						<Tag color={delivery.success ? "success" : "danger"}>
+							{delivery.responseCode ?? (delivery.success ? "Success" : "Failed")}
+						</Tag>
+						<span class="typography-monospace-regular">{delivery.event}</span>
+						<span
+							class="min-w-0 flex-1 truncate typography-monospace-regular text-foreground-muted"
+						>
+							{delivery.deliveryId}
+						</span>
+						<TimeAgo value={delivery.createdAt} variant="full" />
+					</summary>
+
+					<div class="mt-4 flex flex-col gap-4">
+						<div class="flex flex-col gap-1">
+							<span class="typography-paragraph-small text-foreground-muted"
+								>Payload URL</span
+							>
+							<code
+								class="typography-monospace-regular break-all text-foreground-default"
+							>
+								{delivery.url}
+							</code>
+						</div>
+						{#if delivery.requestBody}
+							<div class="flex flex-col gap-1">
+								<span class="typography-paragraph-small text-foreground-muted"
+									>Request body</span
+								>
+								<pre
+									class="max-h-80 overflow-auto rounded-sm bg-background-inset p-3 typography-monospace-regular whitespace-pre-wrap text-foreground-default">{body(
+										delivery.requestBody
+									)}</pre>
+							</div>
+						{/if}
+						{#if delivery.responseBody}
+							<div class="flex flex-col gap-1">
+								<span class="typography-paragraph-small text-foreground-muted"
+									>Response body</span
+								>
+								<pre
+									class="max-h-80 overflow-auto rounded-sm bg-background-inset p-3 typography-monospace-regular whitespace-pre-wrap text-foreground-default">{body(
+										delivery.responseBody
+									)}</pre>
+							</div>
+						{/if}
+						<div>
+							<Button
+								disabled={retries[delivery.deliveryId] !== undefined}
+								loading={retries[delivery.deliveryId] === "retrying"}
+								onclick={() => retry.run(delivery.deliveryId)}
+							>
+								{retries[delivery.deliveryId] === "queued"
+									? "Retry queued"
+									: "Retry"}
+							</Button>
+						</div>
+					</div>
+				</details>
+			{/each}
+		</SettingsList>
+	{/if}
+</DrillDown>
diff --git a/web/src/routes/[handle]/[repo]/settings/hooks/new/+page.svelte b/web/src/routes/[handle]/[repo]/settings/hooks/new/+page.svelte
index c9f9d7706..5475a6bd5 100644
--- a/web/src/routes/[handle]/[repo]/settings/hooks/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/hooks/new/+page.svelte
@@ -1,9 +1,26 @@
 <script lang="ts">
 	import { goto } from "$app/navigation";
 	import { resolve } from "$app/paths";
+	import { createAction } from "$lib/action.svelte";
+	import { serviceUrlFor } from "$lib/api/_request";
+	import { didOf } from "$lib/api/syntax";
+	import {
+		createWebhook,
+		isWebhookUrl,
+		selectedWebhookEvents,
+		WEBHOOK_EVENTS,
+		webhookActivation,
+		webhookEventSelection,
+		webhookIsActive,
+		type WebhookActivation,
+		type WebhookEventSelection
+	} from "$lib/api/webhooks";
+	import { getAuth } from "$lib/auth.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
 	import Checkbox from "$lib/components/ui/Checkbox.svelte";
+	import Toggle from "$lib/components/ui/Toggle.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";
@@ -13,46 +30,65 @@
 
 	let { data } = $props();
 
+	const auth = getAuth();
 	const repo = $derived(data.repo);
 	const back = $derived(`/${repo.ownerHandle}/${repo.name}/settings/hooks`);
+	const spindle = $derived(repo.spindle ? new URL(serviceUrlFor(repo.spindle)) : null);
+	const repoDid = $derived(repo.repoDid ? didOf(repo.repoDid) : null);
 
-	let url = $state("");
-	let secret = $state("");
-	// mocked — webhooks are not wired up yet. Push is preselected.
-	let events = $state<Record<string, boolean>>({
-		push: true,
-		renamed: false,
-		opened: false,
-		resubmitted: false,
-		merged: false,
-		closed: false,
-		reopened: false
-	});
+	type Secret = { kind: "none" } | { kind: "value"; value: string };
+	type Draft = {
+		url: string;
+		secret: Secret;
+		activation: WebhookActivation;
+		events: WebhookEventSelection;
+	};
 
-	const EVENTS: { id: string; label: string }[] = [
-		{ id: "push", label: "Push events" },
-		{ id: "renamed", label: "Repository renamed" },
-		{ id: "opened", label: "Pull request opened" },
-		{ id: "resubmitted", label: "Pull request resubmitted" },
-		{ id: "merged", label: "Pull request merged" },
-		{ id: "closed", label: "Pull request closed" },
-		{ id: "reopened", label: "Pull request reopened" }
-	];
+	let draft = $state<Draft>({
+		url: "",
+		secret: { kind: "none" },
+		activation: webhookActivation(true),
+		events: webhookEventSelection()
+	});
 
-	const valid = $derived(url.trim().length > 0 && Object.values(events).some(Boolean));
-	const submit = () => {
-		void goto(resolve(back as "/"));
+	const secretValue = () => (draft.secret.kind === "value" ? draft.secret.value : "");
+	const setSecretValue = (value: string) => {
+		draft.secret = value === "" ? { kind: "none" } : { kind: "value", value };
 	};
+	const selected = $derived(selectedWebhookEvents(draft.events));
+	const valid = $derived(isWebhookUrl(draft.url) && selected.length > 0);
+
+	const add = createAction(async () => {
+		const agent = auth.agent;
+		if (!agent || !valid) return;
+		if (!spindle) throw new Error("Choose a spindle before adding a webhook.");
+		if (!repoDid) throw new Error("This repository has no DID on its spindle yet.");
+		const secret = draft.secret.kind === "value" ? draft.secret.value.trim() : "";
+		await createWebhook(agent, spindle, repoDid, {
+			url: draft.url.trim(),
+			events: selected,
+			active: webhookIsActive(draft.activation),
+			...(secret ? { secret } : {})
+		});
+		await goto(resolve(back as "/"), { invalidateAll: true });
+	});
 </script>
 
 <DrillDown backLabel="Hooks" backHref={back} title="New webhook">
+	<ErrorAlert label={add.error} />
+
 	<SettingsList padding="small">
 		<FormRow
 			label="Payload URL"
 			description="The URL that will receive the webhook POST requests."
 			for="hook-url"
 		>
-			<Input id="hook-url" bind:value={url} placeholder="https://example.com/webhook" />
+			<Input
+				id="hook-url"
+				type="url"
+				bind:value={draft.url}
+				placeholder="https://example.com/webhook"
+			/>
 		</FormRow>
 
 		<FormRow
@@ -63,7 +99,8 @@
 		>
 			<Input
 				id="hook-secret"
-				bind:value={secret}
+				type="password"
+				bind:value={secretValue, setSecretValue}
 				placeholder="A secret for signed webhooks"
 			/>
 		</FormRow>
@@ -74,15 +111,31 @@
 			align="start"
 		>
 			<div class="flex flex-col gap-1">
-				{#each EVENTS as event (event.id)}
-					<Checkbox bind:checked={events[event.id]}>{event.label}</Checkbox>
+				{#each WEBHOOK_EVENTS as event (event.id)}
+					<Checkbox bind:checked={draft.events[event.id]}>{event.label}</Checkbox>
 				{/each}
 			</div>
 		</FormRow>
+
+		<FormRow label="Active" description="Start delivering selected events immediately.">
+			<Toggle
+				bind:checked={
+					() => webhookIsActive(draft.activation),
+					(checked) => (draft.activation = webhookActivation(checked))
+				}
+				aria-label="Active"
+			/>
+		</FormRow>
 	</SettingsList>
 
 	<FormActions>
 		<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
-		<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
+		<Button
+			variant="primary"
+			icon={Plus}
+			disabled={!valid}
+			loading={add.loading}
+			onclick={add.run}>Add</Button
+		>
 	</FormActions>
 </DrillDown>