diff --git a/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte b/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
index 06c4df22c..d13bb6618 100644
--- a/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
@@ -1,76 +1,87 @@
 <script lang="ts">
 	import { goto } from "$app/navigation";
 	import { resolve } from "$app/paths";
+	import { createAction } from "$lib/action.svelte";
+	import { validateRepoName } from "$lib/api/repoCreate";
+	import { saveRepoRecord } from "$lib/api/repoSettings";
+	import { rkeyFromUri } from "$lib/api/uri";
+	import { getAuth } from "$lib/auth.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
 	import CopyButton from "$lib/components/ui/CopyButton.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import Input from "$lib/components/ui/Input.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 DrillDown from "$lib/components/settings/DrillDown.svelte";
 	import SettingsList from "$lib/components/settings/SettingsList.svelte";
 	import FormRow from "$lib/components/settings/FormRow.svelte";
 	import FormActions from "$lib/components/settings/FormActions.svelte";
-	import Plus from "$icon/plus";
+	import Pencil from "$icon/pencil";
 	import X from "$icon/x";
 
 	let { data } = $props();
 
+	const auth = getAuth();
+	const repo = $derived(data.repo);
+	const back = $derived(`/${repo.ownerHandle}/${repo.name}/settings`);
+	const did = $derived(repo.repoDid ?? repo.ownerDid);
+	const stableUrls = $derived([`https://tangled.org/${did}`, `git@tangled.org:${did}`]);
+
 	let name = $state("");
+	const valid = $derived(name.trim().length > 0 && name.trim() !== repo.name);
 
-	// mocked — renaming is not wired up yet
-	const submit = () => {
-		void Promise.resolve(data.repo).then((repo) => {
-			void goto(resolve(`/${repo.ownerHandle}/${repo.name}/settings` as "/"));
+	const rename = createAction(async () => {
+		const agent = auth.agent;
+		if (!agent) return;
+		const next = validateRepoName(name.trim());
+		await saveRepoRecord(agent, data.publicConfig.bobbinUrl, data.record, {
+			name: next === rkeyFromUri(data.record.uri) ? undefined : next
+		});
+		await goto(resolve(`/${repo.ownerHandle}/${next}/settings` as "/"), {
+			invalidateAll: true
 		});
-	};
+	});
 </script>
 
-<Pending>
-	{#snippet skeleton()}
-		<Bones capture={settingsSettingspanelContentSkeletonFixture} />
-	{/snippet}
-	<!-- an await here suspends the whole navigation, so the awaits live below the boundary -->
-	{@const repo = await data.repo}
-	{@const back = `/${repo.ownerHandle}/${repo.name}/settings`}
-	{@const did = repo.ownerDid}
-	<!-- these survive a rename, handle-based ones don't -->
-	{@const stableUrls = [`https://tangled.org/${did}`, `git@tangled.org:${did}`]}
-	{@const valid = name.trim().length > 0 && name.trim() !== repo.name}
-	<DrillDown
-		backLabel="General"
-		backHref={back}
-		title="Rename repository"
-		description={[
-			"Existing git remotes that use the old name will break.",
-			"Use the stable, DID-based URLs below to avoid breakage on future renames."
-		]}
-	>
-		<div class="flex w-full flex-col gap-1">
-			{#each stableUrls as url (url)}
-				<div class="flex items-center gap-2">
-					<code class="typography-monospace-regular break-all text-foreground-default">
-						{url}
-					</code>
-					<CopyButton
-						value={url}
-						size="mini"
-						label="Copy {url}"
-						class="text-foreground-muted hover:text-foreground-default"
-					/>
-				</div>
-			{/each}
-		</div>
+<DrillDown
+	backLabel="General"
+	backHref={back}
+	title="Rename repository"
+	description={[
+		"Existing git remotes that use the old name will break.",
+		"Use the stable, DID-based URLs below to avoid breakage on future renames."
+	]}
+>
+	<ErrorAlert label={rename.error} />
+
+	<div class="flex w-full flex-col gap-1">
+		{#each stableUrls as url (url)}
+			<div class="flex items-center gap-2">
+				<code class="typography-monospace-regular break-all text-foreground-default">
+					{url}
+				</code>
+				<CopyButton
+					value={url}
+					size="mini"
+					label="Copy {url}"
+					class="text-foreground-muted hover:text-foreground-default"
+				/>
+			</div>
+		{/each}
+	</div>
 
-		<SettingsList padding="small">
-			<FormRow label="Name" for="repo-name">
-				<Input id="repo-name" bind:value={name} placeholder="great-project" />
-			</FormRow>
-		</SettingsList>
+	<SettingsList padding="small">
+		<FormRow label="Name" for="repo-name">
+			<Input id="repo-name" bind:value={name} placeholder={repo.name} />
+		</FormRow>
+	</SettingsList>
 
-		<FormActions>
-			<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
-			<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
-		</FormActions>
-	</DrillDown>
-</Pending>
+	<FormActions>
+		<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
+		<Button
+			variant="primary"
+			icon={Pencil}
+			disabled={!valid}
+			loading={rename.loading}
+			onclick={rename.run}>Rename</Button
+		>
+	</FormActions>
+</DrillDown>
diff --git a/web/src/routes/[handle]/[repo]/settings/rename/+page.ts b/web/src/routes/[handle]/[repo]/settings/rename/+page.ts
new file mode 100644
index 000000000..a308e5542
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/settings/rename/+page.ts
@@ -0,0 +1,6 @@
+import { requireRepoAdmin } from "$lib/api/access";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async (event) => {
+	requireRepoAdmin((await event.parent()).access);
+};