diff --git a/web/src/lib/api/orgMembers.test.ts b/web/src/lib/api/orgMembers.test.ts
new file mode 100644
index 000000000..c2269b93c
--- /dev/null
+++ b/web/src/lib/api/orgMembers.test.ts
@@ -0,0 +1,119 @@
+import type { Did } from "@atcute/lexicons/syntax";
+import type { OAuthUserAgent } from "@atcute/oauth-browser-client";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { getOrCreateDelegatedSession } from "$lib/api/actAs";
+import {
+	inviteOrganizationMembers,
+	listOrganizationMembers,
+	removeOrganizationMember
+} from "$lib/api/orgMembers";
+import {
+	addController,
+	getScopePresets,
+	listControllers,
+	removeController
+} from "$lib/api/tranquil";
+
+vi.mock("$lib/api/actAs", () => ({ getOrCreateDelegatedSession: vi.fn() }));
+vi.mock("$lib/api/tranquil", () => ({
+	addController: vi.fn(),
+	getScopePresets: vi.fn(),
+	listControllers: vi.fn(),
+	removeController: vi.fn()
+}));
+
+const OWNER_SCOPES =
+	"atproto repo:* blob:*/* rpc:* identity:* account:*?action=manage transition:generic";
+const EDITOR_SCOPES = "atproto repo:*?action=create repo:*?action=update blob:*/* rpc:*";
+
+const controller = { sub: "did:plc:controller" as Did } as OAuthUserAgent;
+const orgAgent = { sub: "did:plc:org" as Did } as OAuthUserAgent;
+const orgDid = "did:plc:org" as Did;
+const aliceDid = "did:plc:alice" as Did;
+const bobDid = "did:plc:bob" as Did;
+
+beforeEach(() => {
+	vi.resetAllMocks();
+	vi.mocked(getOrCreateDelegatedSession).mockResolvedValue(orgAgent);
+	vi.mocked(getScopePresets).mockResolvedValue([
+		{ name: "owner", label: "Owner", description: "", scopes: OWNER_SCOPES },
+		{ name: "editor", label: "Editor", description: "", scopes: EDITOR_SCOPES }
+	]);
+});
+
+describe("listOrganizationMembers", () => {
+	it("lists the active controllers of the organization with their roles", async () => {
+		vi.mocked(listControllers).mockResolvedValue([
+			{
+				did: aliceDid,
+				handle: "alice.test",
+				grantedScopes: OWNER_SCOPES,
+				grantedAt: "2025-01-14T09:00:00.000Z",
+				isActive: true,
+				isLocal: true
+			},
+			{
+				did: bobDid,
+				grantedScopes: EDITOR_SCOPES,
+				grantedAt: "2025-03-02T09:00:00.000Z",
+				isActive: true,
+				isLocal: false
+			},
+			{
+				did: "did:plc:gone" as Did,
+				grantedScopes: EDITOR_SCOPES,
+				grantedAt: "2025-03-03T09:00:00.000Z",
+				isActive: false,
+				isLocal: false
+			}
+		]);
+
+		const members = await listOrganizationMembers(controller, orgDid);
+
+		expect(getOrCreateDelegatedSession).toHaveBeenCalledWith(controller, orgDid);
+		expect(listControllers).toHaveBeenCalledWith(orgAgent);
+		expect(members).toEqual([
+			{
+				did: aliceDid,
+				handle: "alice.test",
+				role: "owner",
+				grantedAt: "2025-01-14T09:00:00.000Z"
+			},
+			{
+				did: bobDid,
+				handle: undefined,
+				role: "member",
+				grantedAt: "2025-03-02T09:00:00.000Z"
+			}
+		]);
+	});
+});
+
+describe("inviteOrganizationMembers", () => {
+	it("adds every invitee as a controller with the editor preset", async () => {
+		await inviteOrganizationMembers(controller, orgDid, [aliceDid, bobDid]);
+
+		expect(getScopePresets).toHaveBeenCalledWith(orgAgent);
+		expect(vi.mocked(addController).mock.calls).toEqual([
+			[orgAgent, { controllerDid: aliceDid, grantedScopes: EDITOR_SCOPES }],
+			[orgAgent, { controllerDid: bobDid, grantedScopes: EDITOR_SCOPES }]
+		]);
+	});
+
+	it("refuses when the PDS has no editor preset", async () => {
+		vi.mocked(getScopePresets).mockResolvedValue([]);
+
+		await expect(inviteOrganizationMembers(controller, orgDid, [aliceDid])).rejects.toThrow(
+			/editor role/
+		);
+		expect(addController).not.toHaveBeenCalled();
+	});
+});
+
+describe("removeOrganizationMember", () => {
+	it("removes the member's grant as the organization", async () => {
+		await removeOrganizationMember(controller, orgDid, bobDid);
+
+		expect(removeController).toHaveBeenCalledWith(orgAgent, bobDid);
+	});
+});
diff --git a/web/src/lib/api/orgMembers.ts b/web/src/lib/api/orgMembers.ts
new file mode 100644
index 000000000..61b92411f
--- /dev/null
+++ b/web/src/lib/api/orgMembers.ts
@@ -0,0 +1,55 @@
+import type { Did } from "@atcute/lexicons/syntax";
+import type { OAuthUserAgent } from "@atcute/oauth-browser-client";
+import { getOrCreateDelegatedSession } from "$lib/api/actAs";
+import { organizationRole, type OrganizationRole } from "$lib/api/organizations";
+import {
+	addController,
+	getScopePresets,
+	listControllers,
+	removeController
+} from "$lib/api/tranquil";
+
+export interface OrganizationMember {
+	did: Did;
+	handle?: string;
+	role: OrganizationRole;
+	grantedAt: string;
+}
+
+export const listOrganizationMembers = async (
+	controllerAgent: OAuthUserAgent,
+	orgDid: Did
+): Promise<OrganizationMember[]> => {
+	const orgAgent = await getOrCreateDelegatedSession(controllerAgent, orgDid);
+	const controllers = await listControllers(orgAgent);
+	return controllers
+		.filter((controller) => controller.isActive)
+		.map((controller) => ({
+			did: controller.did,
+			handle: controller.handle,
+			role: organizationRole(controller.grantedScopes),
+			grantedAt: controller.grantedAt
+		}));
+};
+
+export const inviteOrganizationMembers = async (
+	controllerAgent: OAuthUserAgent,
+	orgDid: Did,
+	dids: readonly Did[]
+): Promise<void> => {
+	const orgAgent = await getOrCreateDelegatedSession(controllerAgent, orgDid);
+	const editor = (await getScopePresets(orgAgent)).find((preset) => preset.name === "editor");
+	if (!editor) throw new Error("The organization's PDS does not offer an editor role.");
+	for (const did of dids) {
+		await addController(orgAgent, { controllerDid: did, grantedScopes: editor.scopes });
+	}
+};
+
+export const removeOrganizationMember = async (
+	controllerAgent: OAuthUserAgent,
+	orgDid: Did,
+	memberDid: Did
+): Promise<void> => {
+	const orgAgent = await getOrCreateDelegatedSession(controllerAgent, orgDid);
+	await removeController(orgAgent, memberDid);
+};
diff --git a/web/src/lib/api/organizations.ts b/web/src/lib/api/organizations.ts
index 13d0c69da..525c6680e 100644
--- a/web/src/lib/api/organizations.ts
+++ b/web/src/lib/api/organizations.ts
@@ -21,6 +21,9 @@ export interface UserOrganization {
 
 const MANAGE_ACCOUNT_SCOPE = "account:*?action=manage";
 
+export const organizationRole = (grantedScopes: string): OrganizationRole =>
+	grantedScopes.split(" ").includes(MANAGE_ACCOUNT_SCOPE) ? "owner" : "member";
+
 const controlledKey = (agent: OAuthUserAgent, serviceDid: string) =>
 	`controlled:${agent.sub}:${serviceDid}`;
 
@@ -59,9 +62,7 @@ export const listUserOrganizations = async (
 		.map((account) => ({
 			did: account.did,
 			handle: account.handle ?? account.did,
-			role: account.grantedScopes.split(" ").includes(MANAGE_ACCOUNT_SCOPE)
-				? "owner"
-				: "member",
+			role: organizationRole(account.grantedScopes),
 			joinedAt: account.grantedAt
 		}));
 };
diff --git a/web/src/lib/components/organization/MemberPicker.stories.svelte b/web/src/lib/components/organization/MemberPicker.stories.svelte
deleted file mode 100644
index 59c6ab47b..000000000
--- a/web/src/lib/components/organization/MemberPicker.stories.svelte
+++ /dev/null
@@ -1,109 +0,0 @@
-<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
deleted file mode 100644
index b64a11e38..000000000
--- a/web/src/lib/components/organization/MemberPicker.svelte
+++ /dev/null
@@ -1,174 +0,0 @@
-<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";
-	import Input from "$lib/components/ui/Input.svelte";
-	import Tag from "$lib/components/ui/Tag.svelte";
-	import User from "$lib/components/ui/User.svelte";
-	import {
-		memberCandidates,
-		type MemberCandidate
-	} 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[];
-		excludeDids?: string[];
-		onInvite: (members: MemberCandidate[]) => void;
-	}
-
-	let { candidates = memberCandidates, excludeDids = [], onInvite }: Props = $props();
-
-	let query = $state("");
-	let selected = $state<string[]>([]);
-	let anchor = $state<string | null>(null);
-
-	const pool = $derived(candidates.filter((person) => !excludeDids.includes(person.did)));
-	const results = $derived.by(() => {
-		const needle = query.trim().toLowerCase();
-		if (!needle) return pool;
-		return pool.filter((person) => person.handle.toLowerCase().includes(needle));
-	});
-
-	const pending = $derived(pool.filter((person) => selected.includes(person.did)));
-
-	const reasonLabel = { vouched: "Vouched", interacted: "Interacted" };
-
-	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 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 = () => {
-		onInvite(pending);
-		selected = [];
-		anchor = null;
-	};
-</script>
-
-<div class="flex min-h-0 w-full flex-col gap-3">
-	<Input
-		bind:value={query}
-		iconLeft={Search}
-		type="search"
-		label="Search people by handle"
-		placeholder="Search people by handle"
-	/>
-
-	<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">
-				{#each results as person, index (person.did)}
-					{@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 {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"
-									class="py-0.5"
-									icon={person.reason === "vouched" ? Shield : MousePointerClick}
-									>{reasonLabel[person.reason]}</Tag
-								>
-							</span>
-						</Checkbox>
-					</li>
-				{/each}
-			</ul>
-		{/if}
-
-		{#if pending.length > 0}
-			<div
-				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-4 overflow-x-auto">
-					{#each pending as person (person.did)}
-						<li class="shrink-0">
-							<User handle={person.handle} did={person.did} size="regular" />
-						</li>
-					{/each}
-				</ul>
-				<Button
-					variant="primary"
-					size="small"
-					class="shrink-0"
-					icon={ArrowRight}
-					iconSide="right"
-					onclick={invite}
-				>
-					Invite ({pending.length})
-					{pending.length === 1 ? "member" : "members"}
-				</Button>
-			</div>
-		{/if}
-	</div>
-</div>
diff --git a/web/src/lib/components/profile/organization/mock.ts b/web/src/lib/components/profile/organization/mock.ts
deleted file mode 100644
index 55fb745e2..000000000
--- a/web/src/lib/components/profile/organization/mock.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import type { PersonData, RepoCardData } from "$lib/components/profile/types";
-
-export const organizationMembers: PersonData[] = Array.from({ length: 9 }, (_, index) => ({
-	did: `did:plc:organization-member-${index + 1}`,
-	handle: index === 0 ? "user.tld" : `member-${index + 1}.tld`,
-	description: "Organization member",
-	followers: 0,
-	following: 0,
-	viewerFollowRkey: null,
-	isSelf: false
-}));
-
-export interface MemberCandidate {
-	did: string;
-	handle: string;
-	reason: "vouched" | "interacted";
-}
-
-export const memberCandidates: MemberCandidate[] = [
-	{ did: "did:plc:candidate-1", handle: "oppi.tld", reason: "vouched" },
-	{ did: "did:plc:candidate-2", handle: "icyphox.sh", reason: "vouched" },
-	{ did: "did:plc:candidate-3", handle: "akshay.tld", reason: "interacted" },
-	{ did: "did:plc:candidate-4", handle: "natalie.tld", reason: "interacted" },
-	{ did: "did:plc:candidate-5", handle: "jules.tld", reason: "interacted" },
-	{ did: "did:plc:candidate-6", handle: "rafael.tld", reason: "interacted" },
-	{ did: "did:plc:candidate-7", handle: "sasha.tld", reason: "interacted" },
-	{ did: "did:plc:candidate-8", handle: "wren.tld", reason: "interacted" }
-];
-
-export const organizationRepoSuggestions: RepoCardData[] = [
-	{
-		name: "core",
-		repoDid: "did:plc:organization-repo-core",
-		ownerHandle: "user.tld",
-		description: "The main monorepo.",
-		createdAt: "2024-11-04T09:12:00.000Z",
-		language: "Go",
-		stars: 128,
-		forks: 14,
-		issues: 23,
-		pulls: 7
-	},
-	{
-		name: "docs",
-		repoDid: "did:plc:organization-repo-docs",
-		ownerHandle: "user.tld",
-		description: "User and operator documentation.",
-		createdAt: "2025-02-18T15:40:00.000Z",
-		language: "JavaScript",
-		stars: 19,
-		forks: 3,
-		issues: 5,
-		pulls: 2
-	},
-	{
-		name: "design",
-		repoDid: "did:plc:organization-repo-design",
-		ownerHandle: "user.tld",
-		description: "Design system and brand assets.",
-		createdAt: "2025-06-02T11:05:00.000Z",
-		stars: 8,
-		forks: 1,
-		issues: 4,
-		pulls: 1
-	}
-];
diff --git a/web/src/lib/components/settings/tabs/OrganizationsTab.stories.svelte b/web/src/lib/components/settings/tabs/OrganizationsTab.stories.svelte
index 06bf0336b..fa36db6e4 100644
--- a/web/src/lib/components/settings/tabs/OrganizationsTab.stories.svelte
+++ b/web/src/lib/components/settings/tabs/OrganizationsTab.stories.svelte
@@ -1,6 +1,6 @@
 <script module lang="ts">
 	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { expect, waitFor } from "storybook/test";
+	import { expect, waitFor, within } from "storybook/test";
 	import { clear as clearCache } from "$lib/api/cache";
 	import OrganizationsTab from "$lib/components/settings/tabs/OrganizationsTab.svelte";
 
@@ -79,7 +79,7 @@
 />
 
 <Story
-	name="Roles and settings"
+	name="Roles and actions"
 	play={async ({ canvas, userEvent }) => {
 		const search = canvas.getByRole("searchbox", { name: "Search organizations" });
 		await waitFor(async () => expect(canvas.getByText("tangled.org")).toBeVisible());
@@ -88,13 +88,28 @@
 		const settings = canvas.getByRole("link", { name: "Settings" });
 		await expect(settings).toHaveAttribute("href", "/tangled.org?tab=settings");
 		await expect(settings).toHaveClass("bg-transparent", "border-transparent");
+		await expect(canvas.queryByRole("button", { name: "Leave" })).not.toBeInTheDocument();
 		await userEvent.clear(search);
 		await userEvent.type(search, "microcosm.blue");
 		await expect(canvas.getByText("Member", { exact: true })).toBeVisible();
-		await expect(canvas.queryByRole("link", { name: "Settings" })).not.toBeInTheDocument();
+		await expect(canvas.getByRole("link", { name: "Settings" })).toHaveAttribute(
+			"href",
+			"/microcosm.blue?tab=settings"
+		);
+		const leave = canvas.getByRole("button", { name: "Leave" });
+		await expect(leave).toHaveClass("bg-transparent", "text-foreground-danger");
+		await userEvent.click(leave);
+		const dialog = within(document.body).getByRole("dialog");
+		await waitFor(() => expect(dialog).toBeVisible());
+		await expect(within(dialog).getByText("Leave organization?")).toBeInTheDocument();
 		await expect(
-			canvas.queryByRole("button", { name: /More actions/ })
-		).not.toBeInTheDocument();
+			within(dialog).getByText(/You will lose access to the repositories/)
+		).toBeInTheDocument();
+		await userEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
+		await waitFor(() =>
+			expect(within(document.body).queryByRole("dialog")).not.toBeInTheDocument()
+		);
+		await expect(canvas.getByText("microcosm.blue")).toBeVisible();
 	}}
 />
 
diff --git a/web/src/lib/components/settings/tabs/OrganizationsTab.svelte b/web/src/lib/components/settings/tabs/OrganizationsTab.svelte
index 7c08d71a8..c2a79f268 100644
--- a/web/src/lib/components/settings/tabs/OrganizationsTab.svelte
+++ b/web/src/lib/components/settings/tabs/OrganizationsTab.svelte
@@ -1,12 +1,18 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
+	import type { Did } from "@atcute/lexicons/syntax";
 	import Building from "$icon/building-2";
+	import LogOut from "$icon/log-out";
 	import Plus from "$icon/plus";
 	import Search from "$icon/search";
 	import SettingsIcon from "$icon/settings";
-	import { createLoad } from "$lib/action.svelte";
+	import { createAction, createLoad } from "$lib/action.svelte";
 	import { createBobbinClient } from "$lib/api/client";
-	import { listUserOrganizations, type UserOrganization } from "$lib/api/organizations";
+	import {
+		leaveOrganization,
+		listUserOrganizations,
+		type UserOrganization
+	} from "$lib/api/organizations";
 	import { getAuth } from "$lib/auth.svelte";
 	import settingsSettingspanelContentSkeletonFixture from "$lib/bones/settings-settingspanel--content-skeleton-fixture.bones.json";
 	import SettingsEmpty from "$lib/components/settings/SettingsEmpty.svelte";
@@ -16,6 +22,7 @@
 	import SettingsToolbar from "$lib/components/settings/SettingsToolbar.svelte";
 	import Bones from "$lib/components/ui/Bones.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
+	import ConfirmModal from "$lib/components/ui/ConfirmModal.svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
 
@@ -34,6 +41,31 @@
 		return listUserOrganizations(agent, ctx, delegationDid);
 	});
 
+	const leave = createAction(async (organization: UserOrganization) => {
+		const agent = auth.agent;
+		if (!agent) return;
+		await leaveOrganization(agent, organization.did as Did, delegationDid);
+		loaded.update((organizations) =>
+			organizations.filter((candidate) => candidate.did !== organization.did)
+		);
+	});
+
+	let leaveConfirmOpen = $state(false);
+	let organizationPendingLeave = $state<UserOrganization | null>(null);
+
+	const confirmLeave = (organization: UserOrganization) => {
+		if (leave.loading) return;
+		organizationPendingLeave = organization;
+		leaveConfirmOpen = true;
+	};
+
+	const leaveSelected = async () => {
+		const pending = organizationPendingLeave;
+		if (!pending) return;
+		await leave.run(pending);
+		if (!leave.error) leaveConfirmOpen = false;
+	};
+
 	let query = $state("");
 
 	const filtered = $derived.by(() => {
@@ -69,6 +101,7 @@
 	</SettingsToolbar>
 
 	<ErrorAlert label={loaded.error} />
+	<ErrorAlert label={leave.error} />
 
 	{#if loaded.loading}
 		<Bones capture={settingsSettingspanelContentSkeletonFixture} />
@@ -85,17 +118,36 @@
 					href={`/${organization.handle}`}
 					description={organization.role === "owner" ? "Owner" : "Member"}
 				>
-					{#if organization.role === "owner"}
+					{#if organization.role === "member"}
 						<Button
 							variant="ghost"
-							href={resolve(`/${organization.handle}?tab=settings` as "/")}
-							icon={SettingsIcon}
+							class="text-foreground-danger"
+							icon={LogOut}
+							onclick={() => confirmLeave(organization)}
 						>
-							Settings
+							Leave
 						</Button>
 					{/if}
+					<Button
+						variant="ghost"
+						href={resolve(`/${organization.handle}?tab=settings` as "/")}
+						icon={SettingsIcon}
+					>
+						Settings
+					</Button>
 				</SettingsRow>
 			{/each}
 		</SettingsList>
 	{/if}
 </div>
+
+<ConfirmModal
+	bind:open={leaveConfirmOpen}
+	title="Leave organization?"
+	description={organizationPendingLeave
+		? `You will lose access to the repositories and members of ${organizationPendingLeave.handle}. An owner has to invite you back.`
+		: undefined}
+	confirmLabel="Leave"
+	loading={leave.loading}
+	onconfirm={leaveSelected}
+/>
diff --git a/web/src/lib/components/ui/TagInput.svelte b/web/src/lib/components/ui/TagInput.svelte
index 6817969b2..b403aa2d4 100644
--- a/web/src/lib/components/ui/TagInput.svelte
+++ b/web/src/lib/components/ui/TagInput.svelte
@@ -71,7 +71,7 @@
 
 <script lang="ts">
 	import X from "$icon/x";
-	import { tick, type Component, type Snippet } from "svelte";
+	import { tick, untrack, type Component, type Snippet } from "svelte";
 	import { flip } from "svelte/animate";
 	import { cubicIn, cubicOut } from "svelte/easing";
 	import type { HTMLInputAttributes, SvelteHTMLElements } from "svelte/elements";
@@ -388,6 +388,13 @@
 	let open = $state(false);
 	const wantsPanel = $derived(draftFocused && !dismissed && !disabled && suggestions.length > 0);
 
+	$effect(() => {
+		const count = visible.length;
+		untrack(() => {
+			activeIndex = count === 0 ? -1 : Math.min(Math.max(activeIndex, 0), count - 1);
+		});
+	});
+
 	$effect(() => {
 		const el = panelEl;
 		if (!el) return;
diff --git a/web/src/routes/[handle]/settings/OrganizationSettingsTab.svelte b/web/src/routes/[handle]/settings/OrganizationSettingsTab.svelte
index a87a6b2f8..947ef64f7 100644
--- a/web/src/routes/[handle]/settings/OrganizationSettingsTab.svelte
+++ b/web/src/routes/[handle]/settings/OrganizationSettingsTab.svelte
@@ -74,9 +74,9 @@
 		{:else if section === "sites"}
 			<SitesTab />
 		{:else if section === "members"}
-			<MembersTab handle={identity.handle} />
+			<MembersTab handle={identity.handle} did={identity.did} {delegationDid} />
 		{:else if section === "invite"}
-			<InviteMembers handle={identity.handle} />
+			<InviteMembers handle={identity.handle} did={identity.did} />
 		{:else}
 			<OrganizationProfileTab {identity} {profile} />
 		{/if}
diff --git a/web/src/routes/[handle]/settings/members/InviteMembers.stories.svelte b/web/src/routes/[handle]/settings/members/InviteMembers.stories.svelte
new file mode 100644
index 000000000..004459fb6
--- /dev/null
+++ b/web/src/routes/[handle]/settings/members/InviteMembers.stories.svelte
@@ -0,0 +1,87 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { expect, waitFor } from "storybook/test";
+	import InviteMembers from "$routes/[handle]/settings/members/InviteMembers.svelte";
+
+	const actors = [
+		{ did: "did:plc:oppi", handle: "oppi.tld" },
+		{ did: "did:plc:icyphox", handle: "icyphox.sh" },
+		{ did: "did:plc:natalie", handle: "natalie.tld" }
+	];
+
+	const installFetchMock = () => {
+		const original = window.fetch;
+		window.fetch = async (input, init) => {
+			const url = new URL(String(input instanceof Request ? input.url : input));
+			if (url.pathname === "/xrpc/sh.tangled.actor.searchActorsTypeahead") {
+				const q = (url.searchParams.get("q") ?? "").toLowerCase();
+				return Response.json({
+					actors: actors
+						.filter((actor) => actor.handle.includes(q))
+						.map((actor) => ({
+							...actor,
+							uri: `at://${actor.did}/sh.tangled.actor.profile/self`
+						}))
+				});
+			}
+			return original(input, init);
+		};
+		return () => {
+			window.fetch = original;
+		};
+	};
+
+	const { Story } = defineMeta({
+		title: "Settings/InviteMembers",
+		component: InviteMembers,
+		args: { handle: "tangled.org", did: "did:plc:organization-tangled" },
+		parameters: { auth: true },
+		beforeEach: installFetchMock
+	});
+</script>
+
+<Story
+	name="Handle typeahead"
+	play={async ({ canvas, userEvent }) => {
+		const input = canvas.getByRole("textbox", { name: "Handles" });
+		const invite = canvas.getByRole("button", { name: "Invite 0 members" });
+		await expect(invite).toBeDisabled();
+		await expect(canvas.queryByRole("option")).not.toBeInTheDocument();
+		await expect(canvas.getByRole("link", { name: "Members" })).toHaveAttribute(
+			"href",
+			"/tangled.org?tab=settings&section=members"
+		);
+
+		await userEvent.type(input, "opp");
+		const option = await canvas.findByRole("option", { name: /oppi\.tld/ });
+		await expect(
+			canvas.queryByRole("option", { name: /natalie\.tld/ })
+		).not.toBeInTheDocument();
+		await userEvent.click(option);
+		await waitFor(() =>
+			expect(canvas.getByRole("button", { name: "Remove oppi.tld" })).toBeVisible()
+		);
+		await expect(canvas.getByRole("button", { name: "Invite 1 member" })).toBeEnabled();
+
+		await userEvent.type(input, "icyphox.sh{Enter}");
+		await waitFor(() =>
+			expect(canvas.getByRole("button", { name: "Remove icyphox.sh" })).toBeVisible()
+		);
+		await expect(canvas.getByRole("button", { name: "Invite 2 members" })).toBeEnabled();
+
+		await userEvent.type(input, "not a handle{Enter}");
+		await waitFor(() => expect(canvas.getByText("Not a valid handle")).toBeVisible());
+		await expect(canvas.getByRole("button", { name: "Invite 2 members" })).toBeEnabled();
+
+		await userEvent.clear(input);
+		await userEvent.type(input, "alice.pds.tngl.boltless.dev{Enter}");
+		await waitFor(() => expect(canvas.getByText("You are already a member")).toBeVisible());
+		await expect(canvas.getByRole("button", { name: "Invite 2 members" })).toBeEnabled();
+		await userEvent.clear(input);
+
+		await userEvent.click(canvas.getByRole("button", { name: "Remove oppi.tld" }));
+		await waitFor(() =>
+			expect(canvas.getByRole("button", { name: "Invite 1 member" })).toBeEnabled()
+		);
+	}}
+/>
diff --git a/web/src/routes/[handle]/settings/members/InviteMembers.svelte b/web/src/routes/[handle]/settings/members/InviteMembers.svelte
index 809cfa6a8..185c7ebca 100644
--- a/web/src/routes/[handle]/settings/members/InviteMembers.svelte
+++ b/web/src/routes/[handle]/settings/members/InviteMembers.svelte
@@ -1,18 +1,103 @@
 <script lang="ts">
+	import { isHandle, type Did } from "@atcute/lexicons/syntax";
+	import { onDestroy } from "svelte";
 	import { goto } from "$app/navigation";
 	import { resolve } from "$app/paths";
+	import { createAction } from "$lib/action.svelte";
+	import { createBobbinClient } from "$lib/api/client";
+	import { resolveMiniDoc } from "$lib/api/identity";
+	import { inviteOrganizationMembers } from "$lib/api/orgMembers";
+	import { searchActorsTypeahead } from "$lib/api/search";
+	import { getAuth } from "$lib/auth.svelte";
 	import DrillDown from "$lib/components/settings/DrillDown.svelte";
-	import MemberPicker from "$lib/components/organization/MemberPicker.svelte";
-	import { organizationMembers } from "$lib/components/profile/organization/mock";
+	import FormActions from "$lib/components/settings/FormActions.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
+	import type { InputTag } from "$lib/components/ui/inputField";
+	import User from "$lib/components/ui/User.svelte";
+	import Plus from "$icon/plus";
+	import X from "$icon/x";
 
 	interface Props {
 		handle: string;
+		did: string;
 	}
 
-	let { handle }: Props = $props();
+	let { handle, did }: Props = $props();
 
+	const auth = getAuth();
+	const bobbin = $derived(createBobbinClient({ serviceUrl: auth.bobbinUrl }));
 	const backHref = $derived(`/${handle}?tab=settings&section=members`);
-	const excludeDids = organizationMembers.map((member) => member.did);
+
+	let tags = $state<InputTag[]>([]);
+	let suggestions = $state<InputTag[]>([]);
+	let searching = $state(false);
+	let dids = $state<Record<string, Did>>({});
+	let timer: ReturnType<typeof setTimeout> | undefined;
+	let request: AbortController | undefined;
+
+	const cleanHandle = (value: string) => value.replace(/^@/, "").toLowerCase();
+	const self = $derived(auth.currentUser?.handle.toLowerCase());
+
+	const search = async (query: string) => {
+		const controller = new AbortController();
+		request = controller;
+		try {
+			const result = await searchActorsTypeahead(
+				bobbin,
+				{ q: query, limit: 8 },
+				{ signal: controller.signal }
+			);
+			if (controller.signal.aborted) return;
+			const others = result.actors.filter((actor) => actor.did !== auth.currentDid);
+			for (const actor of others) dids[actor.handle] = actor.did;
+			suggestions = others.map((actor) => ({ value: actor.handle }));
+		} catch {
+			if (!controller.signal.aborted) suggestions = [];
+		} finally {
+			if (!controller.signal.aborted) searching = false;
+		}
+	};
+
+	const onSearch = (query: string) => {
+		if (timer !== undefined) clearTimeout(timer);
+		request?.abort();
+		const q = cleanHandle(query);
+		if (q === "") {
+			suggestions = [];
+			searching = false;
+			return;
+		}
+		searching = true;
+		timer = setTimeout(() => void search(q), 150);
+	};
+
+	const validate = (value: string) => {
+		const invitee = cleanHandle(value);
+		if (!isHandle(invitee)) return "Not a valid handle";
+		if (invitee === self) return "You are already a member";
+		return true;
+	};
+
+	const invite = createAction(async () => {
+		const agent = auth.agent;
+		if (!agent || tags.length === 0) return;
+		const invitees = await Promise.all(
+			tags.map(async (tag) => {
+				const invitee = cleanHandle(tag.value);
+				return dids[invitee] ?? ((await resolveMiniDoc(bobbin, invitee)).did as Did);
+			})
+		);
+		if (invitees.includes(agent.sub as Did)) throw new Error("You are already a member.");
+		await inviteOrganizationMembers(agent, did as Did, invitees);
+		await goto(resolve(backHref as "/"));
+	});
+
+	onDestroy(() => {
+		if (timer !== undefined) clearTimeout(timer);
+		request?.abort();
+	});
 </script>
 
 <DrillDown
@@ -21,5 +106,44 @@
 	title="Add members"
 	description="Invite people to act on behalf of this organization."
 >
-	<MemberPicker {excludeDids} onInvite={() => void goto(resolve(backHref as "/"))} />
+	<Input
+		rich
+		bind:tags
+		{suggestions}
+		{onSearch}
+		{validate}
+		loading={searching}
+		label="Handles"
+		placeholder="user.tngl.sh"
+		hint="Type a handle and press Enter, or pick a suggestion"
+		emptyLabel="No one found"
+	>
+		{#snippet tag(t)}
+			<User
+				handle={cleanHandle(t.value)}
+				did={dids[cleanHandle(t.value)]}
+				size="small"
+				avatarClass="size-4"
+			/>
+		{/snippet}
+		{#snippet suggestion(t)}
+			<User handle={t.value} did={dids[t.value]} size="regular" />
+		{/snippet}
+	</Input>
+
+	<ErrorAlert label={invite.error} />
+
+	<FormActions>
+		<Button href={resolve(backHref as "/")} icon={X}>Cancel</Button>
+		<Button
+			variant="primary"
+			icon={Plus}
+			disabled={tags.length === 0}
+			loading={invite.loading}
+			onclick={invite.run}
+		>
+			Invite {tags.length}
+			{tags.length === 1 ? "member" : "members"}
+		</Button>
+	</FormActions>
 </DrillDown>
diff --git a/web/src/routes/[handle]/settings/members/MembersTab.stories.svelte b/web/src/routes/[handle]/settings/members/MembersTab.stories.svelte
index 49e7f5b98..5c000d0c6 100644
--- a/web/src/routes/[handle]/settings/members/MembersTab.stories.svelte
+++ b/web/src/routes/[handle]/settings/members/MembersTab.stories.svelte
@@ -2,39 +2,23 @@
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import { expect } from "storybook/test";
 	import MembersTab from "$routes/[handle]/settings/members/MembersTab.svelte";
-	import { organizationMembers } from "$lib/components/profile/organization/mock";
 
 	const { Story } = defineMeta({
 		title: "Settings/MembersTab",
 		component: MembersTab,
-		args: { handle: "tangled.org" }
+		args: { handle: "tangled.org", did: "did:plc:organization-tangled" },
+		parameters: { auth: false }
 	});
 </script>
 
 <Story
-	name="Search members"
-	play={async ({ canvas, userEvent }) => {
-		const search = canvas.getByRole("searchbox", { name: "Search members" });
-		await expect(canvas.getAllByRole("button", { name: /^More actions for / })).toHaveLength(
-			organizationMembers.length
-		);
+	name="Signed out"
+	play={async ({ canvas }) => {
+		await expect(canvas.getByRole("heading", { name: "Members" })).toBeVisible();
 		await expect(canvas.getByRole("link", { name: "Add member" })).toHaveAttribute(
 			"href",
 			"/tangled.org?tab=settings&section=invite"
 		);
-		await userEvent.type(search, "  UsEr.TLD  ");
-		await expect(canvas.getByRole("link", { name: "user.tld" })).toBeVisible();
-		await expect(canvas.getAllByRole("button", { name: /^More actions for / })).toHaveLength(1);
-		await userEvent.clear(search);
-		await userEvent.type(search, "no-such-member");
-		await expect(canvas.getByText("No member matches your search")).toBeVisible();
-		await expect(
-			canvas.queryByRole("button", { name: /^More actions for / })
-		).not.toBeInTheDocument();
-		await userEvent.clear(search);
-		await expect(canvas.queryByText("No member matches your search")).not.toBeInTheDocument();
-		for (const member of organizationMembers) {
-			await expect(canvas.getByRole("link", { name: member.handle })).toBeVisible();
-		}
+		await expect(await canvas.findByText("No members yet")).toBeVisible();
 	}}
 />
diff --git a/web/src/routes/[handle]/settings/members/MembersTab.svelte b/web/src/routes/[handle]/settings/members/MembersTab.svelte
index 99bb05a3b..515c04463 100644
--- a/web/src/routes/[handle]/settings/members/MembersTab.svelte
+++ b/web/src/routes/[handle]/settings/members/MembersTab.svelte
@@ -1,8 +1,21 @@
 <script lang="ts">
+	import type { Did } from "@atcute/lexicons/syntax";
+	import { goto } from "$app/navigation";
 	import { resolve } from "$app/paths";
+	import { createAction, createLoad } from "$lib/action.svelte";
+	import { leaveOrganization } from "$lib/api/organizations";
+	import {
+		listOrganizationMembers,
+		removeOrganizationMember,
+		type OrganizationMember
+	} from "$lib/api/orgMembers";
+	import { getAuth } from "$lib/auth.svelte";
+	import settingsSettingspanelContentSkeletonFixture from "$lib/bones/settings-settingspanel--content-skeleton-fixture.bones.json";
+	import Bones from "$lib/components/ui/Bones.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ConfirmModal from "$lib/components/ui/ConfirmModal.svelte";
 	import DropdownItem from "$lib/components/ui/DropdownItem.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
 	import MoreMenu from "$lib/components/ui/MoreMenu.svelte";
 	import User from "$lib/components/ui/User.svelte";
@@ -11,39 +24,72 @@
 	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 { organizationMembers } from "$lib/components/profile/organization/mock";
-	import type { PersonData } from "$lib/components/profile/types";
+	import LogOut from "$icon/log-out";
 	import Plus from "$icon/plus";
 	import Search from "$icon/search";
 	import Trash from "$icon/trash-2";
 
 	interface Props {
 		handle: string;
+		did: string;
+		delegationDid?: string;
 	}
 
-	let { handle }: Props = $props();
+	let { handle, did, delegationDid = "" }: Props = $props();
 	const addHref = $derived(resolve(`/${handle}?tab=settings&section=invite` as "/"));
 
-	let members = $state<PersonData[]>([...organizationMembers]);
+	const auth = getAuth();
+
+	const members = createLoad(async (): Promise<OrganizationMember[]> => {
+		const agent = auth.agent;
+		if (!agent) return [];
+		return listOrganizationMembers(agent, did as Did);
+	});
+
+	const remove = createAction(async (member: OrganizationMember) => {
+		const agent = auth.agent;
+		if (!agent) return;
+		await removeOrganizationMember(agent, did as Did, member.did);
+		members.update((list) => list.filter((candidate) => candidate.did !== member.did));
+	});
+
+	const leave = createAction(async () => {
+		const agent = auth.agent;
+		if (!agent) return;
+		await leaveOrganization(agent, did as Did, delegationDid);
+		await goto(resolve("/settings/organizations"));
+	});
+
+	let leaveConfirmOpen = $state(false);
+
+	const viewerIsOwner = $derived(
+		(members.data ?? []).some(
+			(member) => member.did === auth.currentDid && member.role === "owner"
+		)
+	);
+
 	let query = $state("");
+	const nameOf = (member: OrganizationMember) => member.handle ?? member.did;
 	const filtered = $derived(
-		members.filter((member) => member.handle.toLowerCase().includes(query.trim().toLowerCase()))
+		(members.data ?? []).filter((member) =>
+			nameOf(member).toLowerCase().includes(query.trim().toLowerCase())
+		)
 	);
 
 	let removeConfirmOpen = $state(false);
-	let memberPendingRemoval = $state<PersonData | null>(null);
+	let memberPendingRemoval = $state<OrganizationMember | null>(null);
 
-	const confirmRemove = (member: PersonData) => {
+	const confirmRemove = (member: OrganizationMember) => {
+		if (remove.loading) return;
 		memberPendingRemoval = member;
 		removeConfirmOpen = true;
 	};
 
-	const removeSelected = () => {
+	const removeSelected = async () => {
 		const pending = memberPendingRemoval;
 		if (!pending) return;
-		members = members.filter((member) => member.did !== pending.did);
-		memberPendingRemoval = null;
-		removeConfirmOpen = false;
+		await remove.run(pending);
+		if (!remove.error) removeConfirmOpen = false;
 	};
 </script>
 
@@ -66,7 +112,13 @@
 		{/snippet}
 	</SettingsToolbar>
 
-	{#if members.length === 0}
+	<ErrorAlert label={members.error} />
+	<ErrorAlert label={remove.error} />
+	<ErrorAlert label={leave.error} />
+
+	{#if members.loading}
+		<Bones capture={settingsSettingspanelContentSkeletonFixture} />
+	{:else if members.data?.length === 0}
 		<SettingsEmpty message="No members yet" />
 	{:else if filtered.length === 0}
 		<SettingsEmpty message="No member matches your search" />
@@ -75,13 +127,31 @@
 			{#each filtered as member (member.did)}
 				<SettingsRow>
 					{#snippet label()}
-						<User handle={member.handle} did={member.did} size="regular" link />
+						<span class="flex min-w-0 flex-col gap-1">
+							<User handle={nameOf(member)} did={member.did} size="regular" link />
+							<span class="typography-paragraph-regular text-foreground-muted">
+								{member.role === "owner" ? "Owner" : "Member"}
+							</span>
+						</span>
 					{/snippet}
-					<MoreMenu label={`More actions for ${member.handle}`}>
-						<DropdownItem danger icon={Trash} onclick={() => confirmRemove(member)}>
-							Remove
-						</DropdownItem>
-					</MoreMenu>
+					{#if member.did === auth.currentDid}
+						{#if member.role === "member"}
+							<Button
+								variant="ghost"
+								class="text-foreground-danger"
+								icon={LogOut}
+								onclick={() => (leaveConfirmOpen = true)}
+							>
+								Leave
+							</Button>
+						{/if}
+					{:else if viewerIsOwner}
+						<MoreMenu label={`More actions for ${nameOf(member)}`}>
+							<DropdownItem danger icon={Trash} onclick={() => confirmRemove(member)}>
+								Remove
+							</DropdownItem>
+						</MoreMenu>
+					{/if}
 				</SettingsRow>
 			{/each}
 		</SettingsList>
@@ -92,8 +162,18 @@
 	bind:open={removeConfirmOpen}
 	title="Remove member?"
 	description={memberPendingRemoval
-		? `${memberPendingRemoval.handle} will lose access to the repositories of this organization. An owner has to invite them back.`
+		? `${nameOf(memberPendingRemoval)} will lose access to the repositories of this organization. An owner has to invite them back.`
 		: undefined}
 	confirmLabel="Remove"
+	loading={remove.loading}
 	onconfirm={removeSelected}
 />
+
+<ConfirmModal
+	bind:open={leaveConfirmOpen}
+	title="Leave organization?"
+	description={`You will lose access to the repositories and members of ${handle}. An owner has to invite you back.`}
+	confirmLabel="Leave"
+	loading={leave.loading}
+	onconfirm={leave.run}
+/>