diff --git a/Cargo.lock b/Cargo.lock
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -687,9 +687,9 @@
  "clap",
  "confique",
  "futures",
- "rustls",
  "jacquard-common",
  "jacquard-identity",
+ "rustls",
  "serde",
  "socket2",
  "thiserror 2.0.18",
diff --git a/web/src/app.d.ts b/web/src/app.d.ts
--- a/web/src/app.d.ts
+++ b/web/src/app.d.ts
@@ -5,6 +5,7 @@
 				bobbinUrl: string;
 				knotMirrorUrl: string;
 				apiUrl: string;
+				sitesDomain: string;
 				camoEnabled: boolean;
 			};
 		}
diff --git a/web/static/oauth-client-metadata.json b/web/static/oauth-client-metadata.json
--- a/web/static/oauth-client-metadata.json
+++ b/web/static/oauth-client-metadata.json
@@ -3,7 +3,7 @@
 	"client_name": "Tangled",
 	"client_uri": "https://tangled.org",
 	"redirect_uris": ["https://tangled.org/oauth/callback"],
-	"scope": "atproto repo:sh.tangled.actor.profile 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.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=*",
+	"scope": "atproto repo:sh.tangled.actor.profile 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.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.site.getDomainClaim?aud=* rpc:org.tangled.temp.site.claimDomain?aud=* rpc:org.tangled.temp.site.releaseDomain?aud=*",
 	"grant_types": ["authorization_code", "refresh_token"],
 	"response_types": ["code"],
 	"token_endpoint_auth_method": "none",
diff --git a/web/src/lib/api/appview.ts b/web/src/lib/api/appview.ts
new file mode 100644
--- /dev/null
+++ b/web/src/lib/api/appview.ts
@@ -0,0 +1,80 @@
+import type { OAuthUserAgent } from "@atcute/oauth-browser-client";
+import { mintServiceAuth, serviceDidForHost } from "$lib/auth/agent";
+import { buildUrl, toResponseError } from "./_request";
+import type { QueryValue, XrpcRequestInit } from "./client";
+
+// Authenticated client for the go appview's org.tangled.temp.* xrpc methods.
+// Unlike bobbin (public reads) and the pds (record writes), these are authed
+// with an atproto service-auth jwt: the browser mints a per-call token via the
+// user's pds (getServiceAuth), scoped to the method (lxm) and the appview's did
+// (aud). The appview verifies the issuer's signature and the aud/lxm claims.
+export interface AppviewContext {
+	readonly serviceUrl: string;
+	readonly aud: string;
+	readonly agent: OAuthUserAgent;
+	readonly fetch: typeof globalThis.fetch;
+}
+
+export interface CreateAppviewOptions {
+	apiUrl: string;
+	agent: OAuthUserAgent;
+	fetch?: typeof globalThis.fetch;
+}
+
+export const createAppviewClient = ({
+	apiUrl,
+	agent,
+	fetch
+}: CreateAppviewOptions): AppviewContext => {
+	const serviceUrl = apiUrl.replace(/\/+$/, "");
+	// aud host must match the appview's TANGLED_APPVIEW_HOST, which is the host
+	// it's reached at; derive both from the same url so they can't drift.
+	const aud = serviceDidForHost(new URL(serviceUrl).host);
+	return { serviceUrl, aud, agent, fetch: fetch ?? globalThis.fetch };
+};
+
+const authHeader = async (ctx: AppviewContext, nsid: string): Promise<string> => {
+	const token = await mintServiceAuth(ctx.agent, { aud: ctx.aud, lxm: nsid });
+	return `Bearer ${token}`;
+};
+
+export const authedGet = async <T>(
+	ctx: AppviewContext,
+	nsid: string,
+	params?: Record<string, QueryValue>,
+	init?: XrpcRequestInit
+): Promise<T> => {
+	const response = await ctx.fetch(buildUrl(ctx.serviceUrl, nsid, params), {
+		headers: {
+			accept: "application/json",
+			authorization: await authHeader(ctx, nsid),
+			...init?.headers
+		},
+		signal: init?.signal
+	});
+	if (!response.ok) throw await toResponseError(response);
+	return (await response.json()) as T;
+};
+
+export const authedPost = async <T>(
+	ctx: AppviewContext,
+	nsid: string,
+	body: unknown,
+	init?: XrpcRequestInit
+): Promise<T | null> => {
+	const response = await ctx.fetch(buildUrl(ctx.serviceUrl, nsid), {
+		method: "POST",
+		headers: {
+			"content-type": "application/json",
+			accept: "application/json",
+			authorization: await authHeader(ctx, nsid),
+			...init?.headers
+		},
+		body: JSON.stringify(body ?? {}),
+		signal: init?.signal
+	});
+	if (!response.ok) throw await toResponseError(response);
+	// most temp procedures return no body (200 with empty payload)
+	const text = await response.text();
+	return text ? (JSON.parse(text) as T) : null;
+};
diff --git a/web/src/lib/api/notifications.ts b/web/src/lib/api/notifications.ts
new file mode 100644
--- /dev/null
+++ b/web/src/lib/api/notifications.ts
@@ -0,0 +1,32 @@
+import { authedGet, authedPost, type AppviewContext } from "./appview";
+import type { XrpcRequestInit } from "./client";
+
+// mirrors org.tangled.temp.notification.getPreferences#preferences
+export interface NotificationPreferences {
+	repoStarred: boolean;
+	issueCreated: boolean;
+	issueCommented: boolean;
+	issueClosed: boolean;
+	pullCreated: boolean;
+	pullCommented: boolean;
+	pullMerged: boolean;
+	followed: boolean;
+	userMentioned: boolean;
+	emailNotifications: boolean;
+}
+
+const GET_PREFERENCES = "org.tangled.temp.notification.getPreferences";
+const UPDATE_PREFERENCES = "org.tangled.temp.notification.updatePreferences";
+
+export const getNotificationPreferences = (
+	ctx: AppviewContext,
+	init?: XrpcRequestInit
+): Promise<NotificationPreferences> =>
+	authedGet<NotificationPreferences>(ctx, GET_PREFERENCES, undefined, init);
+
+// only the provided fields are updated server-side.
+export const updateNotificationPreferences = (
+	ctx: AppviewContext,
+	patch: Partial<NotificationPreferences>,
+	init?: XrpcRequestInit
+): Promise<void> => authedPost(ctx, UPDATE_PREFERENCES, patch, init).then(() => undefined);
diff --git a/web/src/lib/api/sites.ts b/web/src/lib/api/sites.ts
new file mode 100644
--- /dev/null
+++ b/web/src/lib/api/sites.ts
@@ -0,0 +1,33 @@
+import { authedGet, authedPost, type AppviewContext } from "./appview";
+import type { XrpcRequestInit } from "./client";
+
+// org.tangled.temp.site.getDomainClaim — domain is absent when unclaimed.
+interface DomainClaimResponse {
+	domain?: string;
+}
+
+const GET_DOMAIN_CLAIM = "org.tangled.temp.site.getDomainClaim";
+const CLAIM_DOMAIN = "org.tangled.temp.site.claimDomain";
+const RELEASE_DOMAIN = "org.tangled.temp.site.releaseDomain";
+
+// returns the user's active sites domain, or null when none is claimed.
+export const getDomainClaim = async (
+	ctx: AppviewContext,
+	init?: XrpcRequestInit
+): Promise<string | null> => {
+	const res = await authedGet<DomainClaimResponse>(ctx, GET_DOMAIN_CLAIM, undefined, init);
+	return res.domain ?? null;
+};
+
+// claims <subdomain>.<sites domain>; the server appends the configured suffix.
+export const claimDomain = (
+	ctx: AppviewContext,
+	subdomain: string,
+	init?: XrpcRequestInit
+): Promise<void> => authedPost(ctx, CLAIM_DOMAIN, { subdomain }, init).then(() => undefined);
+
+export const releaseDomain = (
+	ctx: AppviewContext,
+	domain: string,
+	init?: XrpcRequestInit
+): Promise<void> => authedPost(ctx, RELEASE_DOMAIN, { domain }, init).then(() => undefined);
diff --git a/web/src/lib/server/config.ts b/web/src/lib/server/config.ts
--- a/web/src/lib/server/config.ts
+++ b/web/src/lib/server/config.ts
@@ -9,6 +9,8 @@
 	bobbinUrl: string;
 	knotMirrorUrl: string;
 	apiUrl: string;
+	/** the domain user sites are served under, e.g. "tngl.io" */
+	sitesDomain: string;
 	camoUrl: string;
 	avatarUrl: string;
 	/** the secrets camo and avatar sign with, so neither leaves the server */
@@ -18,7 +20,7 @@
 
 export type PublicWebConfig = Pick<
 	WebConfig,
-	"bobbinUrl" | "knotMirrorUrl" | "apiUrl"
+	"bobbinUrl" | "knotMirrorUrl" | "apiUrl" | "sitesDomain"
 > & {
 	/** camo has a secret, so markup can route images through it */
 	camoEnabled: boolean;
@@ -30,6 +32,7 @@
 	TANGLED_API_URL?: string;
 	API_URL?: string;
 	KNOT_RESOLVER_URL?: string;
+	SITES_DOMAIN?: string;
 	CAMO_URL?: string;
 	CAMO_SHARED_SECRET?: string;
 	AVATAR_URL?: string;
@@ -40,6 +43,7 @@
 	bobbinUrl: cleanUrl(values.BOBBIN_URL, "http://127.0.0.1:8090"),
 	knotMirrorUrl: cleanUrl(values.KNOTMIRROR_URL, ""),
 	apiUrl: cleanUrl(values.TANGLED_API_URL ?? values.API_URL, "http://127.0.0.1:8080"),
+	sitesDomain: values.SITES_DOMAIN?.trim() || "tngl.io",
 	camoUrl: cleanUrl(values.CAMO_URL, "https://camo.tangled.sh"),
 	avatarUrl: cleanUrl(values.AVATAR_URL, "https://avatar.tangled.sh"),
 	camoSecret: values.CAMO_SHARED_SECRET?.trim() ?? "",
@@ -56,6 +60,7 @@
 		bobbinUrl: config.bobbinUrl,
 		knotMirrorUrl: config.knotMirrorUrl,
 		apiUrl: config.apiUrl,
+		sitesDomain: config.sitesDomain,
 		camoEnabled: config.camoSecret !== ""
 	};
 };
diff --git a/web/src/lib/components/ui/Input.svelte b/web/src/lib/components/ui/Input.svelte
--- a/web/src/lib/components/ui/Input.svelte
+++ b/web/src/lib/components/ui/Input.svelte
@@ -35,6 +35,8 @@
 		loading?: boolean;
 		iconLeft?: Component<SvelteHTMLElements["svg"]>;
 		iconRight?: Component<SvelteHTMLElements["svg"]>;
+		/** static, non-editable trailing text shown inside the field, e.g. a domain suffix */
+		suffix?: string;
 		class?: string;
 	}
 
@@ -45,6 +47,7 @@
 		loading = false,
 		iconLeft,
 		iconRight,
+		suffix,
 		class: className,
 		...rest
 	}: Props = $props();
@@ -65,6 +68,9 @@
 		class="flex-1 bg-transparent text-sm outline-none placeholder:text-foreground-placeholder disabled:cursor-not-allowed"
 		{...rest}
 	/>
+	{#if suffix}
+		<span class="shrink-0 text-sm text-foreground-muted select-none">{suffix}</span>
+	{/if}
 	{#if loading}
 		<Spinner class="size-4 shrink-0" />
 	{:else if iconRight}
diff --git a/web/src/lib/components/settings/tabs/NotificationsTab.svelte b/web/src/lib/components/settings/tabs/NotificationsTab.svelte
--- a/web/src/lib/components/settings/tabs/NotificationsTab.svelte
+++ b/web/src/lib/components/settings/tabs/NotificationsTab.svelte
@@ -1,8 +1,18 @@
 <script lang="ts">
 	import type { Component } from "svelte";
 	import type { SvelteHTMLElements } from "svelte/elements";
+	import { page } from "$app/state";
+	import { getAuth } from "$lib/auth.svelte";
+	import { createAppviewClient } from "$lib/api/appview";
+	import {
+		getNotificationPreferences,
+		updateNotificationPreferences,
+		type NotificationPreferences
+	} from "$lib/api/notifications";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Toggle from "$lib/components/ui/Toggle.svelte";
+	import Spinner from "$lib/components/ui/Spinner.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import SettingsHeader from "../SettingsHeader.svelte";
 	import SettingsList from "../SettingsList.svelte";
 	import Save from "$icon/save";
@@ -16,91 +26,144 @@
 	import AtSign from "$icon/at-sign";
 	import Mail from "$icon/mail";
 
+	type PrefKey = keyof NotificationPreferences;
+
 	interface Pref {
-		id: string;
+		key: PrefKey;
 		icon: Component<SvelteHTMLElements["svg"]>;
 		label: string;
 		description: string;
 		enabled: boolean;
 	}
 
-	// mocked — notification preferences are backed by G2 (see TAN-575)
+	const auth = getAuth();
+	const apiUrl = $derived(page.data.publicConfig?.apiUrl as string | undefined);
+
+	// row definitions map the design-system UI onto the api's preference keys.
 	let prefs = $state<Pref[]>([
 		{
-			id: "starred",
+			key: "repoStarred",
 			icon: Star,
 			label: "Repository starred",
 			description: "When someone stars your repository.",
-			enabled: true
+			enabled: false
 		},
 		{
-			id: "new-issues",
+			key: "issueCreated",
 			icon: CircleDot,
 			label: "New issues",
 			description: "When someone creates an issue on your repository.",
-			enabled: true
+			enabled: false
 		},
 		{
-			id: "issue-comments",
+			key: "issueCommented",
 			icon: MessageSquare,
 			label: "Issue comments",
 			description: "When someone comments on an issue you're involved with.",
-			enabled: true
+			enabled: false
 		},
 		{
-			id: "issue-closed",
+			key: "issueClosed",
 			icon: CircleSlash,
 			label: "Issue closed",
 			description: "When an issue on your repository is closed.",
-			enabled: true
+			enabled: false
 		},
 		{
-			id: "new-pulls",
+			key: "pullCreated",
 			icon: GitPullRequest,
 			label: "New pull requests",
 			description: "When someone creates a pull request on your repository.",
-			enabled: true
+			enabled: false
 		},
 		{
-			id: "pull-comments",
+			key: "pullCommented",
 			icon: MessageSquare,
 			label: "Pull request comments",
 			description: "When someone comments on a pull request you're involved with.",
-			enabled: true
+			enabled: false
 		},
 		{
-			id: "pull-merged",
+			key: "pullMerged",
 			icon: GitMerge,
 			label: "Pull request merged",
 			description: "When your pull request is merged.",
-			enabled: true
+			enabled: false
 		},
 		{
-			id: "followers",
+			key: "followed",
 			icon: UserRound,
 			label: "New followers",
 			description: "When someone follows you.",
-			enabled: true
+			enabled: false
 		},
 		{
-			id: "mentions",
+			key: "userMentioned",
 			icon: AtSign,
 			label: "Mentions",
 			description: "When someone mentions you.",
-			enabled: true
+			enabled: false
 		},
 		{
-			id: "email",
+			key: "emailNotifications",
 			icon: Mail,
 			label: "Email notifications",
 			description: "Receive digest emails for issue and pull request activity.",
-			enabled: true
+			enabled: false
 		}
 	]);
 
-	// Figma shows Save disabled on load — it only lights up once something changed
-	const initial = prefs.map((p) => p.enabled);
-	const dirty = $derived(prefs.some((p, i) => p.enabled !== initial[i]));
+	let loading = $state(true);
+	let saving = $state(false);
+	let loadError = $state<string | null>(null);
+	let saveError = $state<string | null>(null);
+	// last-saved values; Save lights up when the toggles drift from these.
+	let baseline = $state<NotificationPreferences | null>(null);
+
+	const dirty = $derived(baseline !== null && prefs.some((p) => p.enabled !== baseline![p.key]));
+
+	const load = async () => {
+		const agent = auth.agent;
+		if (!agent || !apiUrl) return;
+		loading = true;
+		loadError = null;
+		try {
+			const ctx = createAppviewClient({ apiUrl, agent });
+			const values = await getNotificationPreferences(ctx);
+			for (const pref of prefs) pref.enabled = values[pref.key];
+			baseline = values;
+		} catch (err) {
+			loadError =
+				err instanceof Error ? err.message : "Failed to load notification preferences.";
+		} finally {
+			loading = false;
+		}
+	};
+
+	$effect(() => {
+		if (auth.agent && apiUrl) void load();
+	});
+
+	const save = async () => {
+		const agent = auth.agent;
+		if (!agent || !apiUrl || !baseline || !dirty) return;
+		saving = true;
+		saveError = null;
+		// send only the toggles that changed since the last save.
+		const patch: Partial<NotificationPreferences> = {};
+		for (const pref of prefs) {
+			if (pref.enabled !== baseline[pref.key]) patch[pref.key] = pref.enabled;
+		}
+		try {
+			const ctx = createAppviewClient({ apiUrl, agent });
+			await updateNotificationPreferences(ctx, patch);
+			baseline = { ...baseline, ...patch };
+		} catch (err) {
+			saveError = err instanceof Error ? err.message : "Failed to save preferences.";
+		} finally {
+			saving = false;
+		}
+	};
 </script>
 
 <SettingsHeader
@@ -108,22 +171,35 @@
 	description="Choose which notifications you want to receive when activity happens on your repositories and profile."
 >
 	{#snippet action()}
-		<Button variant="primary" icon={Save} disabled={!dirty}>Save</Button>
+		<Button variant="primary" icon={Save} disabled={!dirty || saving} onclick={save}>Save</Button>
 	{/snippet}
 </SettingsHeader>
 
-<SettingsList>
-	{#each prefs as pref (pref.id)}
-		{@const Glyph = pref.icon}
-		<div class="flex w-full items-center justify-between gap-4">
-			<div class="flex min-w-0 flex-col gap-1">
-				<span class="flex items-center gap-2">
-					<Glyph class="size-3.5 shrink-0 text-foreground-default" aria-hidden="true" />
-					<span class="typography-paragraph-regular text-foreground-default">{pref.label}</span>
-				</span>
-				<span class="typography-paragraph-regular text-foreground-muted">{pref.description}</span>
+{#if loadError}
+	<ErrorAlert label={loadError} />
+{/if}
+{#if saveError}
+	<ErrorAlert label={saveError} />
+{/if}
+
+{#if loading}
+	<div class="flex items-center justify-center gap-2 p-4 text-sm text-foreground-subtle">
+		<Spinner /> Loading…
+	</div>
+{:else}
+	<SettingsList>
+		{#each prefs as pref (pref.key)}
+			{@const Glyph = pref.icon}
+			<div class="flex w-full items-center justify-between gap-4">
+				<div class="flex min-w-0 flex-col gap-1">
+					<span class="flex items-center gap-2">
+						<Glyph class="size-3.5 shrink-0 text-foreground-default" aria-hidden="true" />
+						<span class="typography-paragraph-regular text-foreground-default">{pref.label}</span>
+					</span>
+					<span class="typography-paragraph-regular text-foreground-muted">{pref.description}</span>
+				</div>
+				<Toggle bind:checked={pref.enabled} disabled={saving} aria-label={pref.label} />
 			</div>
-			<Toggle bind:checked={pref.enabled} aria-label={pref.label} />
-		</div>
-	{/each}
-</SettingsList>
+		{/each}
+	</SettingsList>
+{/if}
diff --git a/web/src/lib/components/settings/tabs/SitesTab.svelte b/web/src/lib/components/settings/tabs/SitesTab.svelte
--- a/web/src/lib/components/settings/tabs/SitesTab.svelte
+++ b/web/src/lib/components/settings/tabs/SitesTab.svelte
@@ -1,33 +1,102 @@
 <script lang="ts">
+	import { page } from "$app/state";
+	import { getAuth } from "$lib/auth.svelte";
+	import { createAppviewClient } from "$lib/api/appview";
+	import { ClientResponseError } from "$lib/api/client";
+	import { getDomainClaim, claimDomain, releaseDomain } from "$lib/api/sites";
 	import Button from "$lib/components/ui/Button.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
 	import Tag from "$lib/components/ui/Tag.svelte";
+	import Spinner from "$lib/components/ui/Spinner.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 FormRow from "../FormRow.svelte";
 	import DocsButton from "../DocsButton.svelte";
 	import Globe from "$icon/globe";
 	import Check from "$icon/check";
 	import Unlink from "$icon/unlink";
+	import Plus from "$icon/plus";
 
-	interface MockSite {
-		id: string;
-		domain: string;
-		active: boolean;
-	}
+	const auth = getAuth();
+	const apiUrl = $derived(page.data.publicConfig?.apiUrl as string | undefined);
+	const sitesDomain = $derived((page.data.publicConfig?.sitesDomain as string | undefined) ?? "");
 
-	// mocked — domain claims are backed by G7 (see TAN-575)
-	let sites = $state<MockSite[]>([{ id: "1", domain: "user.tngl.sh", active: true }]);
+	let domain = $state<string | null>(null);
+	let loading = $state(true);
+	let loadError = $state<string | null>(null);
+	let actionError = $state<string | null>(null);
+	let subdomain = $state("");
+	let claiming = $state(false);
+	let releasing = $state(false);
 
-	const release = (id: string) => {
-		sites = sites.filter((s) => s.id !== id);
+	// prefer the xrpc error's message/name over a generic client error string.
+	const errMessage = (err: unknown, fallback: string): string => {
+		if (err instanceof ClientResponseError) return err.description || err.error || fallback;
+		return err instanceof Error ? err.message : fallback;
+	};
+
+	const load = async () => {
+		const agent = auth.agent;
+		if (!agent || !apiUrl) return;
+		loading = true;
+		loadError = null;
+		try {
+			const ctx = createAppviewClient({ apiUrl, agent });
+			domain = await getDomainClaim(ctx);
+		} catch (err) {
+			loadError = errMessage(err, "Failed to load your sites domain.");
+		} finally {
+			loading = false;
+		}
+	};
+
+	$effect(() => {
+		if (auth.agent && apiUrl) void load();
+	});
+
+	const claim = async () => {
+		const agent = auth.agent;
+		const sd = subdomain.trim();
+		if (!agent || !apiUrl || !sd || claiming) return;
+		claiming = true;
+		actionError = null;
+		try {
+			const ctx = createAppviewClient({ apiUrl, agent });
+			await claimDomain(ctx, sd);
+			subdomain = "";
+			await load();
+		} catch (err) {
+			actionError = errMessage(err, "Failed to claim domain.");
+		} finally {
+			claiming = false;
+		}
+	};
+
+	const release = async () => {
+		const agent = auth.agent;
+		if (!agent || !apiUrl || !domain || releasing) return;
+		if (!confirm(`Release ${domain}? This removes all site data served from it.`)) return;
+		releasing = true;
+		actionError = null;
+		try {
+			const ctx = createAppviewClient({ apiUrl, agent });
+			await releaseDomain(ctx, domain);
+			await load();
+		} catch (err) {
+			actionError = errMessage(err, "Failed to release domain.");
+		} finally {
+			releasing = false;
+		}
 	};
 </script>
 
 <SettingsHeader
 	title="Sites"
-	description="Since your handle is on tngl.sh, it doubles as your sites domain—your site will be served from that subdomain automatically."
+	description="Claim a subdomain to serve static sites built from your repositories."
 />
 
 <div class="flex w-full flex-col gap-4">
@@ -37,22 +106,53 @@
 		{/snippet}
 	</SettingsToolbar>
 
-	{#if sites.length === 0}
-		<SettingsEmpty message="No sites claimed yet" />
-	{:else}
+	{#if loadError}
+		<ErrorAlert label={loadError} />
+	{/if}
+	{#if actionError}
+		<ErrorAlert label={actionError} />
+	{/if}
+
+	{#if loading}
+		<div class="flex items-center justify-center gap-2 p-4 text-sm text-foreground-subtle">
+			<Spinner /> Loading…
+		</div>
+	{:else if domain}
 		<SettingsList>
-			{#each sites as site (site.id)}
-				<SettingsEntry icon={Globe} title={site.domain}>
-					{#snippet tags()}
-						{#if site.active}
-							<Tag color="success" size="sm" icon={Check}>Active</Tag>
-						{/if}
-					{/snippet}
-					{#snippet actions()}
-						<Button variant="danger" icon={Unlink} onclick={() => release(site.id)}>Release</Button>
-					{/snippet}
-				</SettingsEntry>
-			{/each}
+			<SettingsEntry icon={Globe} title={domain}>
+				{#snippet tags()}
+					<Tag color="success" size="sm" icon={Check}>Active</Tag>
+				{/snippet}
+				{#snippet actions()}
+					<Button variant="danger" icon={Unlink} disabled={releasing} onclick={release}>
+						Release
+					</Button>
+				{/snippet}
+			</SettingsEntry>
 		</SettingsList>
+	{:else}
+		<form
+			class="flex w-full flex-col gap-4"
+			onsubmit={(e) => {
+				e.preventDefault();
+				void claim();
+			}}
+		>
+			<FormRow label="Subdomain" description="Lowercase letters, digits, and hyphens; 4–63 characters.">
+				<div class="flex items-center gap-2">
+					<Input
+						bind:value={subdomain}
+						placeholder="floo"
+						suffix={sitesDomain ? `.${sitesDomain}` : undefined}
+						disabled={claiming}
+						class="flex-1"
+					/>
+					<Button type="submit" variant="primary" icon={Plus} disabled={claiming || !subdomain.trim()}>
+						Claim
+					</Button>
+				</div>
+			</FormRow>
+			<SettingsEmpty message="No sites domain claimed yet" />
+		</form>
 	{/if}
 </div>