diff --git a/web/src/lib/components/organization/MemberPicker.stories.svelte b/web/src/lib/components/organization/MemberPicker.stories.svelte
new file mode 100644
index 000000000..59c6ab47b
--- /dev/null
+++ b/web/src/lib/components/organization/MemberPicker.stories.svelte
@@ -0,0 +1,109 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { expect, fn, within } from "storybook/test";
+	import MemberPicker from "$lib/components/organization/MemberPicker.svelte";
+	import { memberCandidates } from "$lib/components/profile/organization/mock";
+
+	const { Story } = defineMeta({
+		title: "Organization/MemberPicker",
+		component: MemberPicker,
+		args: { candidates: memberCandidates.slice(0, 4), onInvite: fn() }
+	});
+</script>
+
+<Story
+	name="Row modifiers"
+	play={async ({ canvas, userEvent }) => {
+		const list = within(canvas.getByRole("list"));
+		const boxes = list.getAllByRole("checkbox");
+		await userEvent.click(list.getByText("oppi.tld"));
+		await expect(boxes[0]).toBeChecked();
+		await userEvent.keyboard("{Shift>}");
+		await userEvent.click(list.getByText("akshay.tld"));
+		await userEvent.keyboard("{/Shift}");
+		for (const box of boxes.slice(0, 3)) await expect(box).toBeChecked();
+		await expect(boxes[3]).not.toBeChecked();
+		await userEvent.keyboard("{Control>}");
+		await userEvent.click(list.getByText("icyphox.sh"));
+		await userEvent.keyboard("{/Control}");
+		await expect(boxes[0]).toBeChecked();
+		await expect(boxes[1]).not.toBeChecked();
+		await expect(boxes[2]).toBeChecked();
+		await userEvent.keyboard("{Meta>}");
+		await userEvent.click(list.getByText("natalie.tld"));
+		await userEvent.keyboard("{/Meta}");
+		await expect(boxes[0]).toBeChecked();
+		await expect(boxes[2]).toBeChecked();
+		await expect(boxes[3]).toBeChecked();
+		await userEvent.click(list.getByText("akshay.tld"));
+		await expect(boxes[0]).not.toBeChecked();
+		await expect(boxes[1]).not.toBeChecked();
+		await expect(boxes[2]).toBeChecked();
+		await expect(boxes[3]).not.toBeChecked();
+	}}
+/>
+
+<Story
+	name="Checkbox and keyboard"
+	play={async ({ canvas, userEvent }) => {
+		const boxes = canvas.getAllByRole("checkbox");
+		await userEvent.click(boxes[0]);
+		await userEvent.click(boxes[0]);
+		await expect(boxes[0]).toBeChecked();
+		await userEvent.keyboard("{Shift>}");
+		await userEvent.click(boxes[2]);
+		await userEvent.keyboard("{/Shift}");
+		for (const box of boxes.slice(0, 3)) await expect(box).toBeChecked();
+		await userEvent.keyboard("{Control>}");
+		await userEvent.click(boxes[1]);
+		await expect(boxes[1]).not.toBeChecked();
+		await userEvent.click(boxes[1]);
+		await expect(boxes[1]).toBeChecked();
+		await userEvent.keyboard("{/Control}");
+		await userEvent.tab();
+		await expect(boxes[2]).toHaveFocus();
+		await userEvent.keyboard(" ");
+		await expect(boxes[0]).not.toBeChecked();
+		await expect(boxes[1]).not.toBeChecked();
+		await expect(boxes[2]).toBeChecked();
+		await userEvent.keyboard("{Control>} {/Control}");
+		await expect(boxes[2]).not.toBeChecked();
+		await userEvent.keyboard(" ");
+		await expect(boxes[2]).toBeChecked();
+	}}
+/>
+
+<Story
+	name="Filtered identity anchor"
+	play={async ({ canvas, userEvent, args }) => {
+		const list = within(canvas.getByRole("list"));
+		const search = canvas.getByRole("searchbox");
+		await userEvent.click(list.getByText("akshay.tld"));
+		await userEvent.type(search, ".tld");
+		await expect(list.getByRole("checkbox", { name: "akshay.tld" })).toBeChecked();
+		await userEvent.keyboard("{Shift>}");
+		await userEvent.click(list.getByText("oppi.tld"));
+		await userEvent.keyboard("{/Shift}");
+		await expect(list.getByRole("checkbox", { name: "oppi.tld" })).toBeChecked();
+		await expect(list.getByRole("checkbox", { name: "akshay.tld" })).toBeChecked();
+		await expect(list.getByRole("checkbox", { name: "natalie.tld" })).not.toBeChecked();
+		await userEvent.clear(search);
+		await expect(list.getByRole("checkbox", { name: "icyphox.sh" })).not.toBeChecked();
+		await userEvent.type(search, "icyphox");
+		await userEvent.keyboard("{Shift>}");
+		await userEvent.click(list.getByText("icyphox.sh"));
+		await userEvent.keyboard("{/Shift}");
+		await expect(list.getByRole("checkbox", { name: "icyphox.sh" })).toBeChecked();
+		await expect(canvas.getByRole("button", { name: "Invite (3) members" })).toBeVisible();
+		await userEvent.clear(search);
+		await userEvent.keyboard("{Shift>}");
+		await userEvent.click(list.getByText("akshay.tld"));
+		await userEvent.keyboard("{/Shift}");
+		await expect(list.getByRole("checkbox", { name: "oppi.tld" })).not.toBeChecked();
+		await expect(list.getByRole("checkbox", { name: "icyphox.sh" })).toBeChecked();
+		await expect(list.getByRole("checkbox", { name: "akshay.tld" })).toBeChecked();
+		await expect(list.getByRole("checkbox", { name: "natalie.tld" })).not.toBeChecked();
+		await userEvent.click(canvas.getByRole("button", { name: "Invite (2) members" }));
+		await expect(args.onInvite).toHaveBeenCalledExactlyOnceWith(memberCandidates.slice(1, 3));
+	}}
+/>
diff --git a/web/src/lib/components/organization/MemberPicker.svelte b/web/src/lib/components/organization/MemberPicker.svelte
index 62a528fff..b64a11e38 100644
--- a/web/src/lib/components/organization/MemberPicker.svelte
+++ b/web/src/lib/components/organization/MemberPicker.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { on } from "svelte/events";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Checkbox from "$lib/components/ui/Checkbox.svelte";
 	import EmptyState from "$lib/components/ui/EmptyState.svelte";
@@ -11,6 +12,8 @@
 	} from "$lib/components/profile/organization/mock";
 	import ArrowRight from "$icon/arrow-right";
 	import Search from "$icon/search";
+	import Shield from "$icon/shield";
+	import MousePointerClick from "$icon/mouse-pointer-click";
 
 	interface Props {
 		candidates?: MemberCandidate[];
@@ -22,7 +25,7 @@
 
 	let query = $state("");
 	let selected = $state<string[]>([]);
-	let anchor = $state<number | null>(null);
+	let anchor = $state<string | null>(null);
 
 	const pool = $derived(candidates.filter((person) => !excludeDids.includes(person.did)));
 	const results = $derived.by(() => {
@@ -35,25 +38,48 @@
 
 	const reasonLabel = { vouched: "Vouched", interacted: "Interacted" };
 
-	const apply = (dids: string[], add: boolean) => {
-		selected = add
-			? [...new Set([...selected, ...dids])]
-			: selected.filter((entry) => !dids.includes(entry));
+	const pick = (event: MouseEvent, index: number) => {
+		const did = results[index].did;
+		const anchorIndex = results.findIndex((person) => person.did === anchor);
+		if (event.shiftKey) {
+			const start = anchorIndex === -1 ? index : anchorIndex;
+			const range = results
+				.slice(Math.min(start, index), Math.max(start, index) + 1)
+				.map((person) => person.did);
+			selected = [
+				...new Set([
+					...selected.filter((entry) => !results.some((person) => person.did === entry)),
+					...range
+				])
+			];
+			if (anchorIndex === -1) anchor = did;
+		} else if (event.metaKey || event.ctrlKey) {
+			selected = selected.includes(did)
+				? selected.filter((entry) => entry !== did)
+				: [...selected, did];
+			anchor = did;
+		} else {
+			selected = [did];
+			anchor = did;
+		}
 	};
 
-	const pick = (event: MouseEvent & { currentTarget: HTMLInputElement }, index: number) => {
-		const add = event.currentTarget.checked;
-		if (event.shiftKey && anchor !== null) {
-			const start = Math.min(anchor, index);
-			const end = Math.max(anchor, index);
-			apply(
-				results.slice(start, end + 1).map((person) => person.did),
-				add
-			);
-			return;
-		}
-		apply([results[index].did], add);
-		if (!(event.metaKey || event.ctrlKey)) anchor = index;
+	const captureRowClick = (index: number) => (row: HTMLLIElement) => {
+		const input = row.querySelector("input");
+		if (!input) return;
+		return on(
+			row,
+			"click",
+			(event) => {
+				if (event.target !== input) {
+					event.preventDefault();
+					input.focus();
+				}
+				pick(event, index);
+				input.checked = selected.includes(results[index].did);
+			},
+			{ capture: true }
+		);
 	};
 
 	const invite = () => {
@@ -72,30 +98,47 @@
 		placeholder="Search people by handle"
 	/>
 
-	<p class="typography-paragraph-mini text-foreground-muted">
-		{query.trim()
-			? "People matching your search."
-			: "People you vouched for or interacted with."} Hold shift to pick a range, or cmd to pick
-		one at a time.
-	</p>
-
 	<div
 		class="flex max-h-80 min-h-0 flex-col overflow-y-auto rounded-sm border border-border-default"
 	>
 		{#if results.length === 0}
 			<EmptyState size="inline" message="No one matches that search." class="px-3 py-4" />
 		{:else}
-			<ul class="flex flex-col divide-y divide-border-default">
+			<ul class="flex flex-col">
 				{#each results as person, index (person.did)}
-					<li>
+					{@const isSelected = selected.includes(person.did)}
+					{@const startsRange = isSelected && !selected.includes(results[index - 1]?.did)}
+					{@const endsRange = isSelected && !selected.includes(results[index + 1]?.did)}
+					<li class="relative" {@attach captureRowClick(index)}>
+						{#if isSelected}
+							<div
+								class="pointer-events-none absolute inset-0 z-10 border-x border-border-default dark:border-border-strong"
+								class:rounded-t={startsRange}
+								class:border-t={startsRange}
+								class:rounded-b={endsRange}
+								class:border-b={endsRange}
+							></div>
+						{/if}
 						<Checkbox
-							class="w-full gap-3 px-3 py-2 select-none hover:bg-background-inset [&>span:last-child]:min-w-0 [&>span:last-child]:flex-1"
-							checked={selected.includes(person.did)}
-							onclick={(event) => pick(event, index)}
+							class="w-full gap-3 px-3 py-2 select-none {isSelected
+								? 'bg-background-subtle hover:bg-background-inset'
+								: 'rounded-sm hover:bg-background-subtle'} {startsRange
+								? 'rounded-t'
+								: ''} {endsRange
+								? 'rounded-b'
+								: ''} [&>span:last-child]:min-w-0 [&>span:last-child]:flex-1"
+							checked={isSelected}
+							aria-label={person.handle}
 						>
 							<span class="flex min-w-0 items-center justify-between gap-3">
 								<User handle={person.handle} did={person.did} size="regular" />
-								<Tag color="gray" size="small">{reasonLabel[person.reason]}</Tag>
+								<Tag
+									color="gray"
+									size="small"
+									class="py-0.5"
+									icon={person.reason === "vouched" ? Shield : MousePointerClick}
+									>{reasonLabel[person.reason]}</Tag
+								>
 							</span>
 						</Checkbox>
 					</li>
@@ -105,9 +148,9 @@
 
 		{#if pending.length > 0}
 			<div
-				class="sticky bottom-0 mt-auto flex items-center gap-3 border-t border-border-default bg-background-default px-3 py-2"
+				class="sticky bottom-0 z-20 mt-auto flex items-center gap-3 border-t border-border-default bg-background-default px-3 py-2"
 			>
-				<ul class="flex min-w-0 flex-1 items-center gap-2 overflow-x-auto">
+				<ul class="flex min-w-0 flex-1 items-center gap-4 overflow-x-auto">
 					{#each pending as person (person.did)}
 						<li class="shrink-0">
 							<User handle={person.handle} did={person.did} size="regular" />