diff --git a/web/src/lib/components/reaction/Reaction.svelte b/web/src/lib/components/reaction/Reaction.svelte
index 5f5bff78..fabc6ca2 100644
--- a/web/src/lib/components/reaction/Reaction.svelte
+++ b/web/src/lib/components/reaction/Reaction.svelte
@@ -3,11 +3,12 @@
 
 	interface Props {
 		reaction: ReactionGroup;
+		ontoggle?: () => void; // null for loggedout users
+		pending?: boolean;
 	}
 
-	let { reaction }: Props = $props();
+	let { reaction, ontoggle, pending = false }: Props = $props();
 
-	// keep the tooltip bounded; overflow becomes "and N more", like the go appview
 	const MAX_NAMES = 10;
 	const title = $derived.by(() => {
 		const shown = reaction.users.slice(0, MAX_NAMES);
@@ -15,16 +16,31 @@
 		const names = shown.join(", ");
 		return more > 0 ? `${names}, and ${more} more` : names;
 	});
+
+	const chipClass = $derived(
+		`flex min-h-6 items-center justify-center gap-1.5 rounded border px-2 text-xs leading-4 text-foreground-default ${
+			reaction.isReacted
+				? "border-border-strong bg-background-info-subtle"
+				: "border-border-default"
+		}`
+	);
 </script>
 
-<span
-	{title}
-	class={`flex min-h-6 items-center justify-center gap-1.5 rounded border px-2 text-sm leading-4 ${
-		reaction.isReacted
-			? "border-border-strong bg-background-muted text-foreground-default"
-			: "border-border-default text-foreground-subtle"
-	}`}
->
-	<span>{reaction.kind}</span>
-	<span>{reaction.count}</span>
-</span>
+{#if ontoggle}
+	<button
+		type="button"
+		{title}
+		disabled={pending}
+		aria-pressed={reaction.isReacted}
+		onclick={ontoggle}
+		class={`${chipClass} cursor-pointer transition hover:border-border-strong disabled:opacity-50`}
+	>
+		<span>{reaction.kind}</span>
+		<span>{reaction.count}</span>
+	</button>
+{:else}
+	<span {title} class={chipClass}>
+		<span>{reaction.kind}</span>
+		<span>{reaction.count}</span>
+	</span>
+{/if}
diff --git a/web/src/lib/components/reaction/ReactionPicker.stories.svelte b/web/src/lib/components/reaction/ReactionPicker.stories.svelte
new file mode 100644
index 00000000..408e6ce0
--- /dev/null
+++ b/web/src/lib/components/reaction/ReactionPicker.stories.svelte
@@ -0,0 +1,26 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import ReactionPicker from "./ReactionPicker.svelte";
+
+	const { Story } = defineMeta({
+		title: "Reaction/ReactionPicker",
+		component: ReactionPicker,
+		tags: ["autodocs"]
+	});
+
+	const subjectUri = "at://did:plc:example/sh.tangled.repo.issue/3kabc";
+</script>
+
+<Story name="Default" asChild>
+	<ReactionPicker {subjectUri} onreacted={(kind, rkey) => console.log("reacted", kind, rkey)} />
+</Story>
+
+<Story name="With existing reactions" asChild>
+	<ReactionPicker
+		{subjectUri}
+		reacted={new Map([
+			["👍", "3karkey1"],
+			["🎉", "3karkey2"]
+		])}
+	/>
+</Story>
diff --git a/web/src/lib/components/reaction/ReactionPicker.svelte b/web/src/lib/components/reaction/ReactionPicker.svelte
new file mode 100644
index 00000000..f4c5fd07
--- /dev/null
+++ b/web/src/lib/components/reaction/ReactionPicker.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { now as tidNow } from "@atcute/tid";
+	import SmilePlus from "$icon/smile-plus";
+	import { putReaction, deleteReaction } from "$lib/api/reaction";
+	import { getAuth } from "$lib/auth.svelte";
+	import type { ReactionRecord } from "$lib/api/records";
+	import Button from "$lib/components/ui/Button.svelte";
+	import { ORDERED_REACTION_KINDS, type ReactionKind } from "./reactions";
+
+	interface Props {
+		subjectUri: string;
+		// kinds the viewer reacted with, mapped to their record's rkey so a repeat pick deletes it
+		reacted?: Map<ReactionKind, string>;
+		onreacted?: (kind: ReactionKind, rkey: string) => void;
+		onunreacted?: (kind: ReactionKind) => void;
+	}
+
+	let { subjectUri, reacted, onreacted, onunreacted }: Props = $props();
+
+	const auth = getAuth();
+
+	const rawId = $props.id();
+	const popoverId = `reaction-picker-${rawId.replace(/[^a-zA-Z0-9]/g, "")}`;
+	const anchorName = `--${popoverId}`;
+
+	let panel = $state<HTMLElement>();
+	let pending = $state<ReactionKind | null>(null);
+
+	const pick = async (kind: ReactionKind) => {
+		const agent = auth?.agent;
+		if (!agent || pending) return;
+
+		pending = kind;
+		try {
+			const existingRkey = reacted?.get(kind);
+			if (existingRkey) {
+				await deleteReaction(agent, existingRkey);
+				onunreacted?.(kind);
+			} else {
+				const rkey = tidNow();
+				const record: ReactionRecord = {
+					$type: "sh.tangled.feed.reaction",
+					subject: subjectUri as ReactionRecord["subject"],
+					reaction: kind,
+					createdAt: new Date().toISOString()
+				};
+				await putReaction(agent, rkey, record);
+				onreacted?.(kind, rkey);
+			}
+			panel?.hidePopover();
+		} catch {
+			// leave the panel open on failure so the user can retry
+		} finally {
+			pending = null;
+		}
+	};
+</script>
+
+<button
+	type="button"
+	popovertarget={popoverId}
+	style={`anchor-name: ${anchorName}`}
+	aria-label="Add reaction"
+	class="py-2 flex cursor-pointer items-center justify-center rounded text-foreground-subtle transition hover:text-foreground-default"
+>
+	<SmilePlus class="size-3" />
+</button>
+
+<div
+	bind:this={panel}
+	id={popoverId}
+	popover="auto"
+	style={`position-anchor: ${anchorName}`}
+	class="inset-auto mt-1 h-fit w-max rounded border border-border-default bg-background-default text-foreground-default shadow-menu [position-area:bottom_center]"
+>
+	<div class="grid grid-cols-4 p-1">
+		{#each ORDERED_REACTION_KINDS as kind (kind)}
+			<Button
+				variant="ghost"
+				size="sm"
+				aria-label={`React with ${kind}`}
+				aria-pressed={reacted?.has(kind) ?? false}
+				disabled={pending !== null}
+				onclick={() => pick(kind)}
+			>
+				{kind}
+			</Button>
+		{/each}
+	</div>
+</div>
diff --git a/web/src/lib/components/reaction/Reactions.svelte b/web/src/lib/components/reaction/Reactions.svelte
index 3067e865..4880b82d 100644
--- a/web/src/lib/components/reaction/Reactions.svelte
+++ b/web/src/lib/components/reaction/Reactions.svelte
@@ -1,19 +1,133 @@
 <script lang="ts">
+	import { SvelteSet } from "svelte/reactivity";
+	import { now as tidNow } from "@atcute/tid";
+	import { putReaction, deleteReaction } from "$lib/api/reaction";
+	import { getAuth } from "$lib/auth.svelte";
+	import type { ReactionRecord } from "$lib/api/records";
 	import Reaction from "./Reaction.svelte";
-	import type { ReactionGroup } from "./reactions";
+	import ReactionPicker from "./ReactionPicker.svelte";
+	import {
+		withViewerReaction,
+		withoutViewerReaction,
+		upsertViewerReaction,
+		type ReactionGroup,
+		type ReactionKind
+	} from "./reactions";
 
 	interface Props {
 		reactions: ReactionGroup[];
+		subjectUri: string;
 		class?: string;
+		// controlled mode: report changes up instead of keeping them only in local state
+		onchange?: (next: ReactionGroup[]) => void;
+		showPicker?: boolean;
+		// keep the bar mounted even with no reactions yet
+		alwaysShow?: boolean;
 	}
 
-	let { reactions, class: className = "" }: Props = $props();
+	let {
+		reactions,
+		subjectUri,
+		class: className = "",
+		onchange,
+		showPicker = true,
+		alwaysShow = false
+	}: Props = $props();
+
+	const auth = getAuth();
+
+	// seeded from the prop, reassigned optimistically, reset by svelte on fresh reactions
+	let groups = $derived(reactions);
+	// kinds with an in-flight PDS write, disabled until it settles
+	const pending = new SvelteSet<ReactionKind>();
+
+	const commit = (next: ReactionGroup[]) => {
+		groups = next;
+		onchange?.(next);
+	};
+
+	const setPending = (kind: ReactionKind, on: boolean) => {
+		if (on) pending.add(kind);
+		else pending.delete(kind);
+	};
+
+	const toggle = async (group: ReactionGroup) => {
+		const agent = auth.agent;
+		const viewer = auth.currentUser;
+		if (!agent || !viewer || pending.has(group.kind)) return;
+
+		setPending(group.kind, true);
+		try {
+			if (group.isReacted) {
+				if (group.viewerRkey) await deleteReaction(agent, group.viewerRkey);
+				commit(
+					groups
+						.map((g) => (g.kind === group.kind ? withoutViewerReaction(g, viewer.handle) : g))
+						.filter((g) => g.count > 0)
+				);
+			} else {
+				const rkey = tidNow();
+				const record: ReactionRecord = {
+					$type: "sh.tangled.feed.reaction",
+					subject: subjectUri as ReactionRecord["subject"],
+					reaction: group.kind,
+					createdAt: new Date().toISOString()
+				};
+				await putReaction(agent, rkey, record);
+				commit(
+					groups.map((g) =>
+						g.kind === group.kind ? withViewerReaction(g, viewer.handle, rkey) : g
+					)
+				);
+			}
+		} catch {
+			// leave the rendered state untouched on failure; a reload reconciles it
+		} finally {
+			setPending(group.kind, false);
+		}
+	};
+
+	const canReact = $derived(auth.currentUser !== null);
+
+	// kinds the viewer reacted with, mapped to their record's rkey so the picker can toggle
+	const reacted = $derived(
+		new Map(
+			groups
+				.filter((g) => g.isReacted && g.viewerRkey)
+				.map((g) => [g.kind, g.viewerRkey!] as [ReactionKind, string])
+		)
+	);
+
+	const onreacted = (kind: ReactionKind, rkey: string) => {
+		const viewer = auth.currentUser;
+		if (!viewer) return;
+		commit(upsertViewerReaction(groups, kind, viewer.handle, rkey));
+	};
+
+	const onunreacted = (kind: ReactionKind) => {
+		const viewer = auth.currentUser;
+		if (!viewer) return;
+		commit(
+			groups
+				.map((g) => (g.kind === kind ? withoutViewerReaction(g, viewer.handle) : g))
+				.filter((g) => g.count > 0)
+		);
+	};
+
+	const pickerAlways = $derived(alwaysShow && canReact && showPicker);
 </script>
 
-{#if reactions.length}
+{#if groups.length || pickerAlways}
 	<div class={`flex flex-wrap items-center gap-2 ${className}`}>
-		{#each reactions as reaction (reaction.kind)}
-			<Reaction {reaction} />
+		{#each groups as reaction (reaction.kind)}
+			<Reaction
+				{reaction}
+				ontoggle={canReact ? () => toggle(reaction) : undefined}
+				pending={pending.has(reaction.kind)}
+			/>
 		{/each}
+		{#if canReact && showPicker}
+			<ReactionPicker {subjectUri} {reacted} {onreacted} {onunreacted} />
+		{/if}
 	</div>
 {/if}
diff --git a/web/src/lib/components/reaction/reactions.ts b/web/src/lib/components/reaction/reactions.ts
new file mode 100644
index 00000000..1187afe7
--- /dev/null
+++ b/web/src/lib/components/reaction/reactions.ts
@@ -0,0 +1,90 @@
+import { didFromUri, rkeyFromUri } from "$lib/api/uri";
+import type { ReactionRecord, RecordView } from "$lib/api/records";
+
+export const ORDERED_REACTION_KINDS = ["👍", "👎", "😆", "🎉", "🫤", "❤️", "🚀", "👀"] as const;
+export type ReactionKind = (typeof ORDERED_REACTION_KINDS)[number];
+
+const KIND_SET = new Set<string>(ORDERED_REACTION_KINDS);
+
+export interface ReactionGroup {
+	kind: ReactionKind;
+	count: number;
+	users: string[];
+	isReacted: boolean;
+	viewerRkey?: string;
+}
+
+// groups flat reaction records by emoji, keeping OrderedReactionKinds order and
+// dropping kinds nobody used. handleOf resolves a reactor did to a display handle.
+export function buildReactions(
+	items: RecordView<ReactionRecord>[],
+	viewerDid?: string,
+	handleOf?: (did: string) => string
+): ReactionGroup[] {
+	const groups = new Map<ReactionKind, ReactionGroup>();
+
+	for (const item of items) {
+		const kind = item.value.reaction;
+		if (!KIND_SET.has(kind)) continue;
+		const did = didFromUri(item.uri);
+		let group = groups.get(kind as ReactionKind);
+		if (!group) {
+			group = { kind: kind as ReactionKind, count: 0, users: [], isReacted: false };
+			groups.set(kind as ReactionKind, group);
+		}
+		group.count++;
+		group.users.push(handleOf ? handleOf(did) : did);
+		if (viewerDid && did === viewerDid) {
+			group.isReacted = true;
+			group.viewerRkey = rkeyFromUri(item.uri);
+		}
+	}
+
+	return ORDERED_REACTION_KINDS.filter((k) => groups.has(k)).map((k) => groups.get(k)!);
+}
+
+// optimistic addition for a reaction group
+export function withViewerReaction(
+	group: ReactionGroup,
+	viewerHandle: string,
+	rkey: string
+): ReactionGroup {
+	return {
+		...group,
+		count: group.count + 1,
+		users: [...group.users, viewerHandle],
+		isReacted: true,
+		viewerRkey: rkey
+	};
+}
+
+// optimistic removal for a reaction group
+export function withoutViewerReaction(group: ReactionGroup, viewerHandle: string): ReactionGroup {
+	// drop one occurrence of the viewer; count never dips below zero
+	const idx = group.users.indexOf(viewerHandle);
+	const users = idx === -1 ? group.users : group.users.filter((_, i) => i !== idx);
+	return {
+		...group,
+		count: Math.max(0, group.count - 1),
+		users,
+		isReacted: false,
+		viewerRkey: undefined
+	};
+}
+
+// optimistic add of a fresh reaction (e.g. from the picker): bumps the group if the
+// kind is already present, otherwise inserts a new one, keeping canonical emoji order.
+export function upsertViewerReaction(
+	groups: ReactionGroup[],
+	kind: ReactionKind,
+	viewerHandle: string,
+	rkey: string
+): ReactionGroup[] {
+	const exists = groups.some((g) => g.kind === kind);
+	const next = exists
+		? groups.map((g) => (g.kind === kind ? withViewerReaction(g, viewerHandle, rkey) : g))
+		: [...groups, { kind, count: 1, users: [viewerHandle], isReacted: true, viewerRkey: rkey }];
+	return ORDERED_REACTION_KINDS.filter((k) => next.some((g) => g.kind === k)).map((k) =>
+		next.find((g) => g.kind === k)!
+	);
+}