diff --git a/web/src/lib/components/profile/VouchButton.stories.svelte b/web/src/lib/components/profile/VouchButton.stories.svelte
new file mode 100644
index 00000000..fc5316f3
--- /dev/null
+++ b/web/src/lib/components/profile/VouchButton.stories.svelte
@@ -0,0 +1,162 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte";
+	import VouchButton from "./VouchButton.svelte";
+
+	// distinct dids per story keep the derived popover ids unique on the autodocs
+	// page (several triggers render there at once). none match the mock user's did
+	// (did:plc:alice), so the button always shows — except the "Self" story.
+	const { Story } = defineMeta({
+		title: "Profile/VouchButton",
+		component: VouchButton,
+		tags: ["autodocs"],
+		argTypes: {
+			profileLabel: { control: "text" },
+			bordered: { control: "boolean" },
+			insetShadow: { control: "boolean" }
+		},
+		args: {
+			profileDid: "did:plc:3p7ejjxnufohsygt5vbyxb2i",
+			profileLabel: "joshka.net",
+			bordered: true,
+			insetShadow: true
+		}
+	});
+</script>
+
+<!-- signed in, no existing vouch: neutral trigger, popover opens on "None" -->
+<Story name="Undecided">
+	{#snippet template(args)}
+		<MockAuthProvider>
+			<div class="w-64">
+				<VouchButton {...args} initialVouch={null} />
+			</div>
+		</MockAuthProvider>
+	{/snippet}
+</Story>
+
+<!-- viewer has vouched: success trigger, popover preselects "Vouch" + reason -->
+<Story name="Vouched">
+	{#snippet template(args)}
+		<MockAuthProvider>
+			<div class="w-64">
+				<VouchButton
+					{...args}
+					profileDid="did:plc:vouched000000000000000"
+					initialVouch={{ kind: "vouch", reason: "Reviewed a tricky PR with care and patience." }}
+				/>
+			</div>
+		</MockAuthProvider>
+	{/snippet}
+</Story>
+
+<!-- viewer has denounced: danger trigger, popover preselects "Denounce" -->
+<Story name="Denounced">
+	{#snippet template(args)}
+		<MockAuthProvider>
+			<div class="w-64">
+				<VouchButton
+					{...args}
+					profileDid="did:plc:denounced0000000000000"
+					initialVouch={{ kind: "denounce" }}
+				/>
+			</div>
+		</MockAuthProvider>
+	{/snippet}
+</Story>
+
+<!-- the appearance matrix: bordered vs borderless (both raised), across all three
+	 vouch states. tweak the `bordered`/`insetShadow` controls to compare. -->
+<Story name="Appearance variants">
+	{#snippet template(args)}
+		<MockAuthProvider>
+			<div class="grid grid-cols-2 gap-4">
+				{#each [{ label: "Bordered", bordered: true, insetShadow: true }, { label: "Borderless", bordered: false, insetShadow: true }] as look (look.label)}
+					<div class="space-y-3">
+						<p class="typography-paragraph-small text-foreground-subtle">{look.label}</p>
+						<VouchButton
+							{...args}
+							profileDid={`did:plc:variant-none-${look.label}`}
+							bordered={look.bordered}
+							insetShadow={look.insetShadow}
+							initialVouch={null}
+						/>
+						<VouchButton
+							{...args}
+							profileDid={`did:plc:variant-vouch-${look.label}`}
+							bordered={look.bordered}
+							insetShadow={look.insetShadow}
+							initialVouch={{ kind: "vouch" }}
+						/>
+						<VouchButton
+							{...args}
+							profileDid={`did:plc:variant-denounce-${look.label}`}
+							bordered={look.bordered}
+							insetShadow={look.insetShadow}
+							initialVouch={{ kind: "denounce" }}
+						/>
+					</div>
+				{/each}
+			</div>
+		</MockAuthProvider>
+	{/snippet}
+</Story>
+
+<!-- borderless ghost trigger: no outline, state carried by icon + label color -->
+<Story name="Borderless" args={{ bordered: false }}>
+	{#snippet template(args)}
+		<MockAuthProvider>
+			<div class="w-64">
+				<VouchButton {...args} profileDid="did:plc:borderless00000000000" initialVouch={null} />
+			</div>
+		</MockAuthProvider>
+	{/snippet}
+</Story>
+
+<!-- flat trigger, opting out of the default inset shadow -->
+<Story name="Without shadow" args={{ insetShadow: false }}>
+	{#snippet template(args)}
+		<MockAuthProvider>
+			<div class="w-64">
+				<VouchButton {...args} profileDid="did:plc:shadow0000000000000000" initialVouch={null} />
+			</div>
+		</MockAuthProvider>
+	{/snippet}
+</Story>
+
+<!-- submitting hits the mock agent's rejecting fetch, so the popover shows the
+	 error state after pressing Save -->
+<Story name="Submission fails">
+	{#snippet template(args)}
+		<MockAuthProvider>
+			<div class="w-64">
+				<VouchButton {...args} profileDid="did:plc:failure00000000000000" initialVouch={null} />
+			</div>
+		</MockAuthProvider>
+	{/snippet}
+</Story>
+
+<!-- signed out: falls back to a login call-to-action -->
+<Story name="Signed out">
+	{#snippet template(args)}
+		<MockAuthProvider signedIn={false}>
+			<div class="w-64">
+				<VouchButton {...args} initialVouch={null} />
+			</div>
+		</MockAuthProvider>
+	{/snippet}
+</Story>
+
+<!-- viewing your own profile: the button is hidden entirely (renders nothing) -->
+<Story name="Self (hidden)">
+	{#snippet template(args)}
+		<MockAuthProvider>
+			<div class="w-64">
+				<VouchButton {...args} profileDid="did:plc:alice" initialVouch={null} />
+				<p class="typography-paragraph-small text-foreground-subtle">
+					Nothing renders above — you can't vouch for yourself.
+				</p>
+			</div>
+		</MockAuthProvider>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/profile/VouchButton.svelte b/web/src/lib/components/profile/VouchButton.svelte
new file mode 100644
index 00000000..7c044a95
--- /dev/null
+++ b/web/src/lib/components/profile/VouchButton.svelte
@@ -0,0 +1,227 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import Button from "$lib/components/ui/Button.svelte";
+	import ShieldCheck from "$icon/shield-check";
+	import ShieldBan from "$icon/shield-ban";
+	import ShieldOff from "$icon/shield-off";
+	import ShieldQuestionMark from "$icon/shield-question-mark";
+	import ArrowRight from "$icon/arrow-right";
+	import X from "$icon/x";
+	import Check from "$icon/check";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import NetworkVouches from "./NetworkVouches.svelte";
+	import { getAuth } from "$lib/auth.svelte";
+	import { createAction } from "$lib/action.svelte";
+	import { putVouch, deleteVouch, type VouchKind } from "$lib/api/graph";
+	import type { DirectVouch, NetworkVouch } from "./types";
+
+	interface Props {
+		profileDid: string;
+		profileLabel?: string;
+		initialVouch?: DirectVouch | null;
+		// indirect vouches from the viewer's network, shown inside the popover
+		networkVouches?: NetworkVouch[];
+		bordered?: boolean;
+		insetShadow?: boolean;
+	}
+
+	let {
+		profileDid,
+		profileLabel,
+		initialVouch = null,
+		networkVouches = [],
+		bordered = true,
+		insetShadow = true
+	}: Props = $props();
+
+	const auth = getAuth();
+	const signedIn = $derived(Boolean(auth.currentDid));
+	const isSelf = $derived(auth.currentDid === profileDid);
+
+	let committed = $state<{ did: string; vouch: DirectVouch | null } | null>(null);
+	const current = $derived(committed?.did === profileDid ? committed.vouch : initialVouch);
+
+	// popover form state
+	type Choice = VouchKind | "none";
+	let choice = $state<Choice>("none");
+	let reason = $state("");
+
+	let popoverEl = $state<HTMLDivElement>();
+	const popoverId = $derived(`vouch-popover-${profileDid.replace(/[^a-zA-Z0-9]/g, "-")}`);
+
+	const label = $derived(profileLabel ?? "this user");
+
+	// vouch/denounce carries a color
+	const trigger = $derived.by(() => {
+		const look = {
+			vouch: {
+				icon: ShieldCheck,
+				text: "Vouched",
+				variant: "success",
+				color: "text-foreground-success"
+			},
+			denounce: {
+				icon: ShieldOff,
+				text: "Denounced",
+				variant: "danger",
+				color: "text-foreground-danger"
+			}
+		} as const;
+		const base =
+			current?.kind === "vouch"
+				? look.vouch
+				: current?.kind === "denounce"
+					? look.denounce
+					: ({ icon: ShieldQuestionMark, text: "Vouch", variant: "default", color: "" } as const);
+		return bordered
+			? { icon: base.icon, text: base.text, variant: base.variant, colorClass: "" }
+			: { icon: base.icon, text: base.text, variant: "ghost" as const, colorClass: base.color };
+	});
+
+	const onToggle = (event: ToggleEvent) => {
+		if (event.newState !== "open") return;
+		choice = current?.kind ?? "none";
+		reason = current?.reason ?? "";
+	};
+
+	const choices: { value: Choice; icon: typeof ShieldCheck; text: string }[] = [
+		{ value: "vouch", icon: ShieldCheck, text: "Vouch" },
+		{ value: "denounce", icon: ShieldBan, text: "Denounce" },
+		{ value: "none", icon: ShieldOff, text: "None" }
+	];
+
+	const save = createAction(async () => {
+		const agent = auth.agent;
+		if (!agent) return;
+		if (choice === "none") {
+			if (current) await deleteVouch(agent, profileDid);
+			committed = { did: profileDid, vouch: null };
+		} else {
+			const trimmed = reason.trim();
+			await putVouch(agent, profileDid, { kind: choice, reason: trimmed || undefined });
+			committed = { did: profileDid, vouch: { kind: choice, reason: trimmed || undefined } };
+		}
+		popoverEl?.hidePopover();
+	});
+</script>
+
+{#if !isSelf}
+	{#if !signedIn}
+		<Button
+			href={resolve("/login")}
+			variant={bordered ? "default" : "ghost"}
+			class="w-full gap-2"
+			{insetShadow}
+		>
+			<ShieldQuestionMark class="size-4" aria-hidden="true" /><span>Vouch</span>
+		</Button>
+	{:else}
+		<Button
+			variant={trigger.variant}
+			class="w-full gap-2 {trigger.colorClass}"
+			icon={trigger.icon}
+			{insetShadow}
+			popovertarget={popoverId}
+			popovertargetaction="toggle"
+		>
+			{trigger.text}
+		</Button>
+
+		<div
+			bind:this={popoverEl}
+			id={popoverId}
+			popover="auto"
+			ontoggle={onToggle}
+			class="m-auto w-[95%] space-y-4 rounded-lg border border-border-default bg-background-default p-4 text-foreground-default shadow-lg backdrop:bg-black/40 md:w-96"
+		>
+			<div>
+				<p class="typography-paragraph-large font-semibold">Vouch for {label}</p>
+				<p class="typography-paragraph-small text-foreground-subtle">
+					{#if current}
+						You {current.kind === "vouch" ? "vouched for" : "denounced"}
+						{label}. You can change your decision below.
+					{:else}
+						Vouching builds a web-of-trust across Tangled. Vouch for users you have had positive
+						interactions with.
+						<a
+							href="https://blog.tangled.org/vouching"
+							target="_blank"
+							rel="external noopener noreferrer"
+							class="inline-flex items-center gap-1 hover:underline"
+						>
+							Read more <ArrowRight class="size-3" aria-hidden="true" />
+						</a>
+					{/if}
+				</p>
+			</div>
+
+			{#if networkVouches.length > 0}
+				<div class="space-y-1">
+					<p class="typography-paragraph-small font-semibold">From your network</p>
+					<NetworkVouches subjectHandle={label} vouches={networkVouches} />
+				</div>
+			{/if}
+
+			<div class="grid grid-cols-3 gap-2">
+				{#each choices as option (option.value)}
+					{@const Icon = option.icon}
+					{@const active = choice === option.value}
+					<button
+						type="button"
+						onclick={() => (choice = option.value)}
+						disabled={save.loading}
+						aria-pressed={active}
+						class={[
+							"flex flex-col items-center gap-1 rounded-sm border p-2 transition-colors disabled:cursor-not-allowed disabled:opacity-60",
+							active
+								? option.value === "vouch"
+									? "border-border-success bg-background-success-subtle text-foreground-success"
+									: option.value === "denounce"
+										? "border-border-danger bg-background-danger-subtle text-foreground-danger"
+										: "border-border-strong bg-background-subtle text-foreground-default"
+								: "border-border-default hover:bg-background-subtle"
+						]}
+					>
+						<Icon class="size-5" aria-hidden="true" />
+						<span class="typography-paragraph-small font-medium">{option.text}</span>
+					</button>
+				{/each}
+			</div>
+
+			{#if choice !== "none"}
+				<textarea
+					bind:value={reason}
+					rows={2}
+					maxlength={256}
+					placeholder="Write a reason..."
+					disabled={save.loading}
+					class="w-full resize-y rounded-sm border border-border-default bg-background-default p-2 typography-paragraph-small outline-none placeholder:text-foreground-placeholder focus-within:border-border-strong focus-within:ring-1 focus-within:ring-border-strong disabled:cursor-not-allowed disabled:opacity-60"
+				></textarea>
+			{/if}
+
+			<ErrorAlert label={save.error} />
+
+			<div class="flex gap-2">
+				<Button
+					variant="default"
+					class="flex-1 gap-2"
+					icon={X}
+					disabled={save.loading}
+					popovertarget={popoverId}
+					popovertargetaction="hide"
+				>
+					Cancel
+				</Button>
+				<Button
+					variant="primary"
+					class="flex-1 gap-2"
+					icon={Check}
+					loading={save.loading}
+					onclick={() => save.run()}
+				>
+					{current ? "Update" : "Save"}
+				</Button>
+			</div>
+		</div>
+	{/if}
+{/if}
diff --git a/web/src/lib/components/profile/pages.ts b/web/src/lib/components/profile/pages.ts
index 526f5e4d..d8f09f3b 100644
--- a/web/src/lib/components/profile/pages.ts
+++ b/web/src/lib/components/profile/pages.ts
@@ -170,14 +170,14 @@ const resolveStars = async (
 	const enriched =
 		repoDids.length > 0
 			? await enrich<{ items: ListItem[] }>(ctx, {
-					xrpc: "sh.tangled.repo.getReposByRepoDids",
-					params: { dids: repoDids },
-					enrich: [
-						...targetAll(starDescriptors(viewerDid), ["items[].value.repoDid"]),
-						target(REPO_OWNER_DOCS, ["items[].uri"])
-					],
-					...(viewerDid ? { viewer: viewerDid } : {})
-				})
+				xrpc: "sh.tangled.repo.getReposByRepoDids",
+				params: { dids: repoDids },
+				enrich: [
+					...targetAll(starDescriptors(viewerDid), ["items[].value.repoDid"]),
+					target(REPO_OWNER_DOCS, ["items[].uri"])
+				],
+				...(viewerDid ? { viewer: viewerDid } : {})
+			})
 			: { output: { items: [] }, data: {} as Sidecar };
 	const reposByDid = new Map(
 		enriched.output.items.map((item) => [(item.value as RepoRecord).repoDid, item])
@@ -376,19 +376,19 @@ export const fetchPinned = async (
 	const [byDid, byUri] = await Promise.all([
 		dids.length > 0
 			? enrich<{ items: ListItem[] }>(ctx, {
-					xrpc: "sh.tangled.repo.getReposByRepoDids",
-					params: { dids },
-					enrich: targetAll(descriptors, ["items[].value.repoDid"]),
-					...(viewerDid ? { viewer: viewerDid } : {})
-				})
+				xrpc: "sh.tangled.repo.getReposByRepoDids",
+				params: { dids },
+				enrich: targetAll(descriptors, ["items[].value.repoDid"]),
+				...(viewerDid ? { viewer: viewerDid } : {})
+			})
 			: empty,
 		uris.length > 0
 			? enrich<{ items: ListItem[] }>(ctx, {
-					xrpc: "sh.tangled.repo.getRepos",
-					params: { repos: uris },
-					enrich: targetAll(descriptors, ["items[].value.repoDid"]),
-					...(viewerDid ? { viewer: viewerDid } : {})
-				})
+				xrpc: "sh.tangled.repo.getRepos",
+				params: { repos: uris },
+				enrich: targetAll(descriptors, ["items[].value.repoDid"]),
+				...(viewerDid ? { viewer: viewerDid } : {})
+			})
 			: empty
 	]);
 	const cards = new Map<string, RepoCardData>();