diff --git a/web/src/lib/api/webhooks.ts b/web/src/lib/api/webhooks.ts
new file mode 100644
index 000000000..d8dd1f9e0
--- /dev/null
+++ b/web/src/lib/api/webhooks.ts
@@ -0,0 +1,132 @@
+import { authedGet, authedPost, type AppviewContext } from "./appview";
+import type { XrpcRequestInit } from "./client";
+
+// canonical event names the appview dispatches on (models.WebhookEvent*). the
+// values are the wire format; labels are a UI concern.
+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"];
+
+// mirrors org.tangled.temp.repo.listWebhooks#webhook
+export interface Webhook {
+	id: number;
+	url: string;
+	active: boolean;
+	events: string[];
+	createdAt: string;
+	updatedAt?: string;
+}
+
+// mirrors org.tangled.temp.repo.listWebhookDeliveries#delivery
+export interface WebhookDelivery {
+	id: number;
+	deliveryId: string;
+	event: string;
+	url: string;
+	success: boolean;
+	createdAt: string;
+	requestBody?: string;
+	responseBody?: string;
+	responseCode?: number;
+}
+
+export interface CreateWebhookInput {
+	url: string;
+	events: string[];
+	secret?: string;
+	active?: boolean;
+}
+
+export interface UpdateWebhookInput {
+	url?: string;
+	events?: string[];
+	secret?: string;
+	active?: boolean;
+}
+
+const LIST = "org.tangled.temp.repo.listWebhooks";
+const CREATE = "org.tangled.temp.repo.createWebhook";
+const UPDATE = "org.tangled.temp.repo.updateWebhook";
+const DELETE = "org.tangled.temp.repo.deleteWebhook";
+const TOGGLE = "org.tangled.temp.repo.toggleWebhook";
+const LIST_DELIVERIES = "org.tangled.temp.repo.listWebhookDeliveries";
+const RETRY_DELIVERY = "org.tangled.temp.repo.retryWebhookDelivery";
+
+export const listWebhooks = async (
+	ctx: AppviewContext,
+	repoDid: string,
+	init?: XrpcRequestInit
+): Promise<Webhook[]> => {
+	const res = await authedGet<{ webhooks?: Webhook[] }>(ctx, LIST, { repoDid }, init);
+	return res.webhooks ?? [];
+};
+
+export const createWebhook = async (
+	ctx: AppviewContext,
+	repoDid: string,
+	input: CreateWebhookInput,
+	init?: XrpcRequestInit
+): Promise<number | undefined> => {
+	const res = await authedPost<{ id: number }>(ctx, CREATE, { repoDid, ...input }, init);
+	return res?.id;
+};
+
+export const updateWebhook = (
+	ctx: AppviewContext,
+	repoDid: string,
+	id: number,
+	patch: UpdateWebhookInput,
+	init?: XrpcRequestInit
+): Promise<void> =>
+	authedPost(ctx, UPDATE, { repoDid, id, ...patch }, init).then(() => undefined);
+
+export const deleteWebhook = (
+	ctx: AppviewContext,
+	repoDid: string,
+	id: number,
+	init?: XrpcRequestInit
+): Promise<void> => authedPost(ctx, DELETE, { repoDid, id }, init).then(() => undefined);
+
+// flips active state server-side; returns the new value.
+export const toggleWebhook = async (
+	ctx: AppviewContext,
+	repoDid: string,
+	id: number,
+	init?: XrpcRequestInit
+): Promise<boolean | undefined> => {
+	const res = await authedPost<{ active: boolean }>(ctx, TOGGLE, { repoDid, id }, init);
+	return res?.active;
+};
+
+export const listWebhookDeliveries = async (
+	ctx: AppviewContext,
+	repoDid: string,
+	id: number,
+	limit?: number,
+	init?: XrpcRequestInit
+): Promise<WebhookDelivery[]> => {
+	const res = await authedGet<{ deliveries?: WebhookDelivery[] }>(
+		ctx,
+		LIST_DELIVERIES,
+		{ repoDid, id, limit },
+		init
+	);
+	return res.deliveries ?? [];
+};
+
+export const retryWebhookDelivery = (
+	ctx: AppviewContext,
+	repoDid: string,
+	webhookId: number,
+	deliveryId: string,
+	init?: XrpcRequestInit
+): Promise<void> =>
+	authedPost(ctx, RETRY_DELIVERY, { repoDid, webhookId, deliveryId }, init).then(() => undefined);
diff --git a/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte b/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
index 963691b45..e74f234b5 100644
--- a/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
@@ -1,47 +1,69 @@
 <script lang="ts">
-	import { untrack } from "svelte";
 	import { resolve } from "$app/paths";
-	import Avatar from "$lib/components/ui/Avatar.svelte";
+	import { page } from "$app/state";
+	import { getAuth } from "$lib/auth.svelte";
+	import { createAppviewClient } from "$lib/api/appview";
+	import { listWebhooks, toggleWebhook, deleteWebhook, type Webhook } from "$lib/api/webhooks";
+	import { createLoad, createAction } from "$lib/action.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Toggle from "$lib/components/ui/Toggle.svelte";
+	import Skeleton from "$lib/components/ui/Skeleton.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import SettingsEmpty from "$lib/components/settings/SettingsEmpty.svelte";
 	import SettingsBlock from "$lib/components/settings/SettingsBlock.svelte";
 	import SettingsList from "$lib/components/settings/SettingsList.svelte";
 	import CodeChip from "$lib/components/settings/CodeChip.svelte";
 	import Plus from "$icon/plus";
 	import Eye from "$icon/eye";
-	import Pencil from "$icon/pencil";
 	import Trash from "$icon/trash-2";
-	import Inbox from "$icon/inbox";
 
 	let { data } = $props();
 
+	const auth = getAuth();
+	const apiUrl = $derived(page.data.publicConfig?.apiUrl as string | undefined);
+	const repoDid = $derived(data.repo.repoDid);
 	const base = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings`);
 	const path = (p: string) => resolve(p 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: untrack(() => data.repo.ownerHandle),
-			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: untrack(() => data.repo.ownerHandle),
-			enabled: false
-		}
-	]);
+	// resolves the authed appview client + repoDid, or throws if either is missing.
+	const requireClient = () => {
+		const agent = auth.agent;
+		const url = apiUrl;
+		const did = repoDid;
+		if (!agent || !url || !did) throw new Error("You must own this repository to manage webhooks.");
+		return { ctx: createAppviewClient({ apiUrl: url, agent }), did };
+	};
+
+	const loaded = createLoad(async (): Promise<Webhook[]> => {
+		const agent = auth.agent;
+		const url = apiUrl;
+		const did = repoDid;
+		if (!agent || !url || !did) return [];
+		return listWebhooks(createAppviewClient({ apiUrl: url, agent }), did);
+	});
+
+	const toggle = createAction(async (hook: Webhook) => {
+		const { ctx, did } = requireClient();
+		const active = await toggleWebhook(ctx, did, hook.id);
+		loaded.update((list) =>
+			list.map((h) => (h.id === hook.id ? { ...h, active: active ?? !h.active } : h))
+		);
+	});
+
+	const remove = createAction(async (hook: Webhook) => {
+		const { ctx, did } = requireClient();
+		await deleteWebhook(ctx, did, hook.id);
+		loaded.update((list) => list.filter((h) => h.id !== hook.id));
+	});
 
-	const remove = (id: string) => {
-		hooks = hooks.filter((h) => h.id !== id);
+	const confirmRemove = (hook: Webhook) => {
+		if (remove.loading) return;
+		if (!confirm(`Delete the webhook for ${hook.url}?`)) return;
+		void remove.run(hook);
 	};
+
+	const actionError = $derived(toggle.error ?? remove.error);
 </script>
 
 <div class="flex min-h-8 w-full items-center gap-4">
@@ -58,11 +80,28 @@
 		<Button icon={Plus} href={path(`${base}/hooks/new`)}>New webhook</Button>
 	{/snippet}
 
-	{#if hooks.length === 0}
+	{#if loaded.error}
+		<ErrorAlert label={loaded.error} />
+	{/if}
+	{#if actionError}
+		<ErrorAlert label={actionError} />
+	{/if}
+
+	{#if loaded.loading}
+		<SettingsList>
+			{#each Array.from({ length: 2 }) as _, i (i)}
+				<div class="flex w-full flex-col gap-2">
+					<Skeleton class="h-5 w-72 max-w-full rounded" />
+					<Skeleton class="h-4 w-56 max-w-full rounded" />
+					<Skeleton class="h-4 w-40 max-w-full rounded" />
+				</div>
+			{/each}
+		</SettingsList>
+	{:else if (loaded.data?.length ?? 0) === 0}
 		<SettingsEmpty message="No webhooks yet" />
-	{:else}
+	{:else if loaded.data}
 		<SettingsList>
-			{#each hooks as hook (hook.id)}
+			{#each loaded.data as hook (hook.id)}
 				<!-- the toggle rides the top-right corner while the actions sit under it,
 				     so this row is a two-column block rather than a SettingsRow. On a
 				     phone the two columns stack and the actions spread across the width. -->
@@ -73,22 +112,28 @@
 							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}
+							{hook.events.join(", ")}
 						</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 class="typography-paragraph-regular text-foreground-muted">
+							Added <TimeAgo value={hook.createdAt} variant="full" />
 						</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>
+						<Toggle
+							checked={hook.active}
+							disabled={toggle.loading}
+							onchange={() => toggle.run(hook)}
+							aria-label="Enable {hook.url}"
+						/>
+						<div class="flex w-full items-center justify-end gap-2 sm:w-auto">
+							<Button
+								variant="danger"
+								icon={Trash}
+								loading={remove.loading && remove.args?.[0].id === hook.id}
+								onclick={() => confirmRemove(hook)}
+							>
+								Delete
+							</Button>
 						</div>
 					</div>
 				</div>
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 3e95e1476..b10e9d0ef 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,15 @@
 <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 { createAppviewClient } from "$lib/api/appview";
+	import { createWebhook, WEBHOOK_EVENTS } from "$lib/api/webhooks";
+	import { createAction } from "$lib/action.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 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,36 +19,42 @@
 
 	let { data } = $props();
 
+	const auth = getAuth();
+	const apiUrl = $derived(page.data.publicConfig?.apiUrl as string | undefined);
+	const repoDid = $derived(data.repo.repoDid);
 	const back = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings/hooks`);
 
 	let url = $state("");
 	let secret = $state("");
-	// mocked — webhooks are not wired up yet. Push is preselected, as in the design.
-	let events = $state<Record<string, boolean>>({
-		push: true,
-		renamed: false,
-		opened: false,
-		resubmitted: false,
-		merged: false,
-		closed: false,
-		reopened: false
-	});
+	// canonical event ids -> selected; push is preselected, as in the design.
+	let events = $state<Record<string, boolean>>(
+		Object.fromEntries(WEBHOOK_EVENTS.map((e) => [e.id, e.id === "push"]))
+	);
 
-	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" }
-	];
+	const selected = $derived(WEBHOOK_EVENTS.filter((e) => events[e.id]).map((e) => e.id));
+	const valid = $derived(url.trim().length > 0 && selected.length > 0);
 
-	const valid = $derived(url.trim().length > 0 && Object.values(events).some(Boolean));
-	const submit = () => goto(resolve(back as "/"));
+	const create = createAction(async () => {
+		const agent = auth.agent;
+		const url_ = apiUrl;
+		const did = repoDid;
+		if (!agent || !url_ || !did) throw new Error("You must own this repository to add a webhook.");
+		const ctx = createAppviewClient({ apiUrl: url_, agent });
+		const trimmedSecret = secret.trim();
+		await createWebhook(ctx, did, {
+			url: url.trim(),
+			events: selected,
+			secret: trimmedSecret ? trimmedSecret : undefined
+		});
+		await goto(resolve(back as "/"));
+	});
 </script>
 
 <DrillDown backLabel="Hooks" backHref={back} title="New webhook">
+	{#if create.error}
+		<ErrorAlert label={create.error} />
+	{/if}
+
 	<SettingsList padding="tight">
 		<FormRow
 			label="Payload URL"
@@ -67,7 +79,7 @@
 			align="start"
 		>
 			<div class="flex flex-col gap-1">
-				{#each EVENTS as event (event.id)}
+				{#each WEBHOOK_EVENTS as event (event.id)}
 					<Checkbox bind:checked={events[event.id]}>{event.label}</Checkbox>
 				{/each}
 			</div>
@@ -76,6 +88,14 @@
 
 	<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}
+			loading={create.loading}
+			disabled={!valid}
+			onclick={create.run}
+		>
+			Add
+		</Button>
 	</FormActions>
 </DrillDown>