diff --git a/web/src/lib/components/settings/tabs/KnotsTab.svelte b/web/src/lib/components/settings/tabs/KnotsTab.svelte
index acf0123f2..ae9511e02 100644
--- a/web/src/lib/components/settings/tabs/KnotsTab.svelte
+++ b/web/src/lib/components/settings/tabs/KnotsTab.svelte
@@ -1,44 +1,45 @@
 <script lang="ts">
+	import { getAuth } from "$lib/auth.svelte";
+	import { createBobbinClient } from "$lib/api/client";
+	import { editSavedServices, getPreferences } from "$lib/api/preferences";
+	import { createAction, createLoad } from "$lib/action.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
-	import Tag from "$lib/components/ui/Tag.svelte";
+	import Bones from "$lib/components/ui/Bones.svelte";
+	import settingsSettingspanelContentSkeletonFixture from "$lib/bones/settings-settingspanel--content-skeleton-fixture.bones.json";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import SettingsEmpty from "$lib/components/settings/SettingsEmpty.svelte";
 	import SettingsHeader from "$lib/components/settings/SettingsHeader.svelte";
 	import SettingsToolbar from "$lib/components/settings/SettingsToolbar.svelte";
 	import SettingsList from "$lib/components/settings/SettingsList.svelte";
 	import SettingsRow from "$lib/components/settings/SettingsRow.svelte";
+	import DocsButton from "$lib/components/settings/DocsButton.svelte";
 	import Plus from "$icon/plus";
 	import Trash from "$icon/trash-2";
-	import DocsButton from "$lib/components/settings/DocsButton.svelte";
 	import Server from "$icon/server";
-	import Check from "$icon/check";
-	import X from "$icon/x";
-	import RotateCcw from "$icon/rotate-ccw";
 
-	interface MockKnot {
-		id: string;
-		hostname: string;
-		verified: boolean;
-		added: string;
-	}
+	const auth = getAuth();
 
-	// mocked — knot registration is not wired up yet
-	let knots = $state<MockKnot[]>([
-		{ id: "1", hostname: "knot2.user.tld", verified: true, added: "Added 5 hours ago" },
-		{ id: "2", hostname: "knot.user.tld", verified: false, added: "Added 6 months ago" }
-	]);
+	const loaded = createLoad(async (): Promise<string[]> => {
+		const agent = auth.agent;
+		if (!agent) return [];
+		const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl, agent });
+		return (await getPreferences(ctx)).knots;
+	});
 
-	const remove = (id: string) => {
-		knots = knots.filter((k) => k.id !== id);
-	};
-
-	const retry = (id: string) => {
-		knots = knots.map((k) => (k.id === id ? { ...k, verified: true } : k));
-	};
+	const remove = createAction(async (host: string) => {
+		const agent = auth.agent;
+		if (!agent) return;
+		const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl, agent });
+		const kept = await editSavedServices(ctx, "knots", (hosts) =>
+			hosts.filter((candidate) => candidate !== host)
+		);
+		loaded.update(() => kept);
+	});
 </script>
 
 <SettingsHeader
 	title="Knots"
-	description="Knots are lightweight headless servers that enable users to host Git repositories with ease. When creating a repository, you can choose a knot to store it on."
+	description="Knots are lightweight headless servers that enable users to host Git repositories with ease. The knots you save here are the ones offered to you when creating a repository."
 />
 
 <div class="flex w-full flex-col gap-4">
@@ -47,34 +48,29 @@
 			<DocsButton href="https://docs.tangled.org/knots" />
 		{/snippet}
 		{#snippet end()}
-			<Button href="/settings/knots/new" icon={Plus}>Register a knot</Button>
+			<Button href="/settings/knots/new" icon={Plus}>Add a knot</Button>
 		{/snippet}
 	</SettingsToolbar>
 
-	{#if knots.length === 0}
-		<SettingsEmpty message="No knots registered yet" />
-	{:else}
+	<ErrorAlert label={loaded.error} />
+	<ErrorAlert label={remove.error} />
+
+	{#if loaded.loading}
+		<Bones capture={settingsSettingspanelContentSkeletonFixture} />
+	{:else if loaded.data?.length === 0}
+		<SettingsEmpty message="No knots saved yet" />
+	{:else if loaded.data}
 		<SettingsList>
-			{#each knots as knot (knot.id)}
-				<SettingsRow icon={Server} title={knot.hostname} stack>
-					{#snippet tags()}
-						{#if knot.verified}
-							<Tag color="success" size="small" icon={Check}>Verified</Tag>
-						{:else}
-							<Tag color="warning" size="small" icon={X}>Unverified</Tag>
-						{/if}
-					{/snippet}
-					{#snippet meta()}
-						<span class="typography-paragraph-regular text-foreground-muted"
-							>{knot.added}</span
-						>
-					{/snippet}
-					{#if !knot.verified}
-						<Button icon={RotateCcw} onclick={() => retry(knot.id)}>Retry</Button>
-					{/if}
-					<Button variant="danger" icon={Trash} onclick={() => remove(knot.id)}
-						>Delete</Button
+			{#each loaded.data as knot (knot)}
+				<SettingsRow icon={Server} title={knot} stack>
+					<Button
+						variant="danger"
+						icon={Trash}
+						loading={remove.loading && remove.args?.[0] === knot}
+						onclick={() => remove.run(knot)}
 					>
+						Remove
+					</Button>
 				</SettingsRow>
 			{/each}
 		</SettingsList>
diff --git a/web/src/lib/components/settings/tabs/SpindlesTab.svelte b/web/src/lib/components/settings/tabs/SpindlesTab.svelte
index 4ad1e3fd1..79bbcd723 100644
--- a/web/src/lib/components/settings/tabs/SpindlesTab.svelte
+++ b/web/src/lib/components/settings/tabs/SpindlesTab.svelte
@@ -1,42 +1,46 @@
 <script lang="ts">
+	import { getAuth } from "$lib/auth.svelte";
+	import { createBobbinClient } from "$lib/api/client";
+	import { editSavedServices, getPreferences } from "$lib/api/preferences";
+	import { createAction, createLoad } from "$lib/action.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
-	import Tag from "$lib/components/ui/Tag.svelte";
+	import Bones from "$lib/components/ui/Bones.svelte";
+	import settingsSettingspanelContentSkeletonFixture from "$lib/bones/settings-settingspanel--content-skeleton-fixture.bones.json";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import SettingsEmpty from "$lib/components/settings/SettingsEmpty.svelte";
 	import SettingsHeader from "$lib/components/settings/SettingsHeader.svelte";
 	import SettingsToolbar from "$lib/components/settings/SettingsToolbar.svelte";
 	import SettingsList from "$lib/components/settings/SettingsList.svelte";
 	import SettingsRow from "$lib/components/settings/SettingsRow.svelte";
+	import DocsButton from "$lib/components/settings/DocsButton.svelte";
 	import Plus from "$icon/plus";
 	import Trash from "$icon/trash-2";
-	import DocsButton from "$lib/components/settings/DocsButton.svelte";
 	import Spool from "$icon/spool";
-	import Check from "$icon/check";
-	import X from "$icon/x";
-	import RotateCcw from "$icon/rotate-ccw";
 
-	interface MockSpindle {
-		id: string;
-		hostname: string;
-		verified: boolean;
-		added: string;
-	}
+	const auth = getAuth();
 
-	// mocked — spindle registration is not wired up yet
-	let spindles = $state<MockSpindle[]>([
-		{ id: "1", hostname: "spindle.user.tld", verified: true, added: "Added 5 hours ago" },
-		{ id: "2", hostname: "spindle2.user.tld", verified: false, added: "Added 6 months ago" }
-	]);
+	const loaded = createLoad(async (): Promise<string[]> => {
+		const agent = auth.agent;
+		if (!agent) return [];
+		const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl, agent });
+		return (await getPreferences(ctx)).spindles;
+	});
 
-	const remove = (id: string) => {
-		spindles = spindles.filter((s) => s.id !== id);
-	};
-
-	const retry = (id: string) => {
-		spindles = spindles.map((s) => (s.id === id ? { ...s, verified: true } : s));
-	};
+	const remove = createAction(async (host: string) => {
+		const agent = auth.agent;
+		if (!agent) return;
+		const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl, agent });
+		const kept = await editSavedServices(ctx, "spindles", (hosts) =>
+			hosts.filter((candidate) => candidate !== host)
+		);
+		loaded.update(() => kept);
+	});
 </script>
 
-<SettingsHeader title="Spindles" description="Spindles are small CI runners." />
+<SettingsHeader
+	title="Spindles"
+	description="Spindles are small CI runners. The spindles you save here are the ones offered to you when creating a repository or configuring its pipelines."
+/>
 
 <div class="flex w-full flex-col gap-4">
 	<SettingsToolbar>
@@ -44,34 +48,29 @@
 			<DocsButton href="https://docs.tangled.org/spindles" />
 		{/snippet}
 		{#snippet end()}
-			<Button href="/settings/spindles/new" icon={Plus}>Register a spindle</Button>
+			<Button href="/settings/spindles/new" icon={Plus}>Add a spindle</Button>
 		{/snippet}
 	</SettingsToolbar>
 
-	{#if spindles.length === 0}
-		<SettingsEmpty message="No spindles registered yet" />
-	{:else}
+	<ErrorAlert label={loaded.error} />
+	<ErrorAlert label={remove.error} />
+
+	{#if loaded.loading}
+		<Bones capture={settingsSettingspanelContentSkeletonFixture} />
+	{:else if loaded.data?.length === 0}
+		<SettingsEmpty message="No spindles saved yet" />
+	{:else if loaded.data}
 		<SettingsList>
-			{#each spindles as spindle (spindle.id)}
-				<SettingsRow icon={Spool} title={spindle.hostname} stack>
-					{#snippet tags()}
-						{#if spindle.verified}
-							<Tag color="success" size="small" icon={Check}>Verified</Tag>
-						{:else}
-							<Tag color="warning" size="small" icon={X}>Unverified</Tag>
-						{/if}
-					{/snippet}
-					{#snippet meta()}
-						<span class="typography-paragraph-regular text-foreground-muted"
-							>{spindle.added}</span
-						>
-					{/snippet}
-					{#if !spindle.verified}
-						<Button icon={RotateCcw} onclick={() => retry(spindle.id)}>Retry</Button>
-					{/if}
-					<Button variant="danger" icon={Trash} onclick={() => remove(spindle.id)}
-						>Delete</Button
+			{#each loaded.data as spindle (spindle)}
+				<SettingsRow icon={Spool} title={spindle} stack>
+					<Button
+						variant="danger"
+						icon={Trash}
+						loading={remove.loading && remove.args?.[0] === spindle}
+						onclick={() => remove.run(spindle)}
 					>
+						Remove
+					</Button>
 				</SettingsRow>
 			{/each}
 		</SettingsList>
diff --git a/web/src/routes/settings/knots/new/+page.svelte b/web/src/routes/settings/knots/new/+page.svelte
index 35e1b3faa..cdb2a3fd1 100644
--- a/web/src/routes/settings/knots/new/+page.svelte
+++ b/web/src/routes/settings/knots/new/+page.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
 	import { goto } from "$app/navigation";
 	import { resolve } from "$app/paths";
+	import { getAuth } from "$lib/auth.svelte";
+	import { createBobbinClient } from "$lib/api/client";
+	import { editSavedServices, hostOf } from "$lib/api/preferences";
+	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";
@@ -10,19 +15,32 @@
 	import Plus from "$icon/plus";
 	import X from "$icon/x";
 
+	const auth = getAuth();
+
 	let address = $state("");
-	const valid = $derived(address.trim().length > 0);
+	const host = $derived(hostOf(address));
+	const valid = $derived(host.length > 0);
 
-	// mocked — knot registration is not wired up yet
-	const submit = () => goto(resolve("/settings/knots"));
+	const save = createAction(async () => {
+		const agent = auth.agent;
+		if (!agent || !valid) return;
+		const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl, agent });
+		await editSavedServices(ctx, "knots", (hosts) =>
+			hosts.includes(host) ? hosts : [...hosts, host]
+		);
+		await goto(resolve("/settings/knots"));
+	});
+	const submit = save.run;
 </script>
 
 <DrillDown
 	backLabel="Knots"
 	backHref="/settings/knots"
-	title="Register a knot"
-	description="Enter the hostname of your knot to get started."
+	title="Add a knot"
+	description="Enter the hostname of a knot to keep it on hand when creating repositories."
 >
+	<ErrorAlert label={save.error} />
+
 	<SettingsList padding="small">
 		<FormRow label="Knot address" for="knot-address">
 			<Input id="knot-address" bind:value={address} placeholder="knot.example.com" />
@@ -31,6 +49,14 @@
 
 	<FormActions>
 		<Button href="/settings/knots" icon={X}>Cancel</Button>
-		<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
+		<Button
+			variant="primary"
+			icon={Plus}
+			disabled={!valid}
+			loading={save.loading}
+			onclick={submit}
+		>
+			Add
+		</Button>
 	</FormActions>
 </DrillDown>
diff --git a/web/src/routes/settings/spindles/new/+page.svelte b/web/src/routes/settings/spindles/new/+page.svelte
index beffa3b60..48e8ba398 100644
--- a/web/src/routes/settings/spindles/new/+page.svelte
+++ b/web/src/routes/settings/spindles/new/+page.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
 	import { goto } from "$app/navigation";
 	import { resolve } from "$app/paths";
+	import { getAuth } from "$lib/auth.svelte";
+	import { createBobbinClient } from "$lib/api/client";
+	import { editSavedServices, hostOf } from "$lib/api/preferences";
+	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";
@@ -10,19 +15,32 @@
 	import Plus from "$icon/plus";
 	import X from "$icon/x";
 
+	const auth = getAuth();
+
 	let address = $state("");
-	const valid = $derived(address.trim().length > 0);
+	const host = $derived(hostOf(address));
+	const valid = $derived(host.length > 0);
 
-	// mocked — spindle registration is not wired up yet
-	const submit = () => goto(resolve("/settings/spindles"));
+	const save = createAction(async () => {
+		const agent = auth.agent;
+		if (!agent || !valid) return;
+		const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl, agent });
+		await editSavedServices(ctx, "spindles", (hosts) =>
+			hosts.includes(host) ? hosts : [...hosts, host]
+		);
+		await goto(resolve("/settings/spindles"));
+	});
+	const submit = save.run;
 </script>
 
 <DrillDown
 	backLabel="Spindles"
 	backHref="/settings/spindles"
-	title="Register a spindle"
-	description="Enter the hostname of your spindle to get started."
+	title="Add a spindle"
+	description="Enter the hostname of a spindle to keep it on hand when configuring pipelines."
 >
+	<ErrorAlert label={save.error} />
+
 	<SettingsList padding="small">
 		<FormRow label="Spindle address" for="spindle-address">
 			<Input id="spindle-address" bind:value={address} placeholder="spindle.example.com" />
@@ -31,6 +49,14 @@
 
 	<FormActions>
 		<Button href="/settings/spindles" icon={X}>Cancel</Button>
-		<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
+		<Button
+			variant="primary"
+			icon={Plus}
+			disabled={!valid}
+			loading={save.loading}
+			onclick={submit}
+		>
+			Add
+		</Button>
 	</FormActions>
 </DrillDown>