diff --git a/web/src/lib/components/org/CreationForm.svelte b/web/src/lib/components/org/CreationForm.svelte
new file mode 100644
index 000000000..ec562ddd9
--- /dev/null
+++ b/web/src/lib/components/org/CreationForm.svelte
@@ -0,0 +1,176 @@
+<script module lang="ts">
+	import type { Did } from "@atcute/lexicons/syntax";
+	import type { OAuthUserAgent } from "@atcute/oauth-browser-client";
+	import type { CurrentUser } from "$lib/auth.svelte";
+	import type { CreatedOrg } from "$lib/api/orgCreate";
+
+	export interface OrgCreationValues {
+		handle: string;
+		description: string;
+		website: string;
+		avatarFile?: File;
+		members: { did: Did; handle: string }[];
+	}
+
+	export interface OrgCreationContext {
+		user: CurrentUser;
+		agent: OAuthUserAgent;
+		existingOrg?: CreatedOrg;
+	}
+
+	export type OrgCreationSubmit = (
+		values: OrgCreationValues,
+		context: OrgCreationContext
+	) => Promise<CreatedOrg>;
+</script>
+
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import { resolve } from "$app/paths";
+	import type { Component } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
+	import ArrowRight from "$icon/arrow-right";
+	import TriangleAlert from "$icon/triangle-alert";
+	import { createAction } from "$lib/action.svelte";
+	import { getAuth } from "$lib/auth.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import Spinner from "$lib/components/ui/Spinner.svelte";
+	import AvatarPicker from "$lib/components/ui/AvatarPicker.svelte";
+	import MemberListInput from "$lib/components/ui/MemberListInput.svelte";
+	import type { InputTag } from "$lib/components/ui/inputField";
+	import DetailsFields from "$lib/components/org/DetailsFields.svelte";
+
+	interface Props {
+		bobbinUrl: string;
+		submitLabel: string;
+		pendingLabel: string;
+		icon: Component<SvelteHTMLElements["svg"]>;
+		submit: OrgCreationSubmit;
+		class?: string;
+	}
+
+	let { bobbinUrl, submitLabel, pendingLabel, icon, submit, class: className }: Props = $props();
+
+	const auth = getAuth();
+	const user = $derived(auth.currentUser);
+
+	let handle = $state("");
+	let description = $state("");
+	let website = $state("");
+	let avatarFile = $state<File>();
+	let members = $state<InputTag[]>([]);
+	let incompleteOrg = $state<CreatedOrg>();
+
+	const proceed = async () => {
+		if (incompleteOrg) await goto(resolve(`/${incompleteOrg.handle}` as "/"));
+	};
+
+	const action = createAction(async () => {
+		if (!user) throw new Error("Sign in to continue.");
+		const agent = await auth.agentFor(user.did);
+		const org = await submit(
+			{
+				handle,
+				description,
+				website,
+				avatarFile,
+				members: members
+					.filter((tag) => tag.field)
+					.map((tag) => ({ did: tag.field as Did, handle: tag.value }))
+			},
+			{ user, agent, existingOrg: incompleteOrg }
+		);
+		if (org.warnings.length > 0) {
+			incompleteOrg = org;
+			return;
+		}
+		await goto(resolve(`/${org.handle}` as "/"));
+	});
+</script>
+
+<form
+	class={className}
+	onsubmit={(event) => {
+		event.preventDefault();
+		if (!action.loading) void action.run();
+	}}
+>
+	<div class="relative flex gap-4 border-l border-border-default pb-10 pl-6">
+		<div
+			class="absolute top-0 -left-3 flex size-6 items-center justify-center rounded-full bg-background-inset typography-paragraph-small font-medium text-foreground-muted"
+		>
+			1
+		</div>
+		<div class="flex-1">
+			<h2 class="typography-paragraph-large font-medium text-foreground-default">Details</h2>
+			<p class="mb-4 typography-paragraph-small text-foreground-subtle">
+				Basic organization information.
+			</p>
+			<div class="grid gap-4 sm:grid-cols-3">
+				<AvatarPicker bind:file={avatarFile} class="sm:col-span-1" />
+				<DetailsFields class="sm:col-span-2" bind:handle bind:description bind:website />
+			</div>
+		</div>
+	</div>
+
+	<div class="relative flex gap-4 pl-6">
+		<div
+			class="absolute top-0 -left-3 flex size-6 items-center justify-center rounded-full bg-background-inset typography-paragraph-small font-medium text-foreground-muted"
+		>
+			2
+		</div>
+		<div class="flex-1">
+			<h2 class="typography-paragraph-large font-medium text-foreground-default">Members</h2>
+			<p class="mb-4 typography-paragraph-small text-foreground-subtle">
+				Add members who can manage this organization's repositories. You're added automatically as
+				the owner.
+			</p>
+			<MemberListInput {bobbinUrl} bind:tags={members} class="w-full" />
+		</div>
+	</div>
+
+	{#if incompleteOrg}
+		<div
+			class="mt-6 rounded-sm border border-border-default bg-background-warning-subtle px-3 py-2 typography-paragraph-small text-foreground-warning-strong"
+			role="status"
+		>
+			<div class="flex items-start gap-2">
+				<TriangleAlert class="mt-0.5 size-4 shrink-0 text-foreground-warning" aria-hidden="true" />
+				<div class="min-w-0">
+					<p>
+						Organization {incompleteOrg.handle} was created, but some setup steps could not be completed:
+					</p>
+					<ul class="mt-1 list-disc pl-5">
+						{#each incompleteOrg.warnings as warning, index (index)}
+							<li>{warning}</li>
+						{/each}
+					</ul>
+				</div>
+			</div>
+		</div>
+	{/if}
+	<ErrorAlert label={action.error} class="mt-6" />
+	<div class="mt-8 flex justify-end gap-3">
+		{#if incompleteOrg}
+			<Button variant="default" type="button" onclick={proceed} disabled={action.loading}
+				>Continue to organization</Button
+			>
+		{/if}
+		<Button
+			variant="primary"
+			type="submit"
+			icon={incompleteOrg ? ArrowRight : action.loading ? undefined : icon}
+			iconSide={incompleteOrg ? "right" : "left"}
+			aria-busy={action.loading}
+			disabled={action.loading || (!incompleteOrg && (!user || !handle))}
+		>
+			{#if action.loading}
+				<Spinner class="size-4" />
+				{pendingLabel}
+			{:else}
+				{incompleteOrg ? "Retry setup" : submitLabel}
+			{/if}
+		</Button>
+	</div>
+</form>
diff --git a/web/src/lib/components/org/DetailsFields.stories.svelte b/web/src/lib/components/org/DetailsFields.stories.svelte
new file mode 100644
index 000000000..c474a8fe9
--- /dev/null
+++ b/web/src/lib/components/org/DetailsFields.stories.svelte
@@ -0,0 +1,31 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import DetailsFields from "$lib/components/org/DetailsFields.svelte";
+
+	const { Story } = defineMeta({
+		title: "Org/DetailsFields",
+		component: DetailsFields,
+		tags: ["autodocs"],
+		args: {
+			handle: "",
+			description: "",
+			website: ""
+		}
+	});
+</script>
+
+<Story name="Empty" asChild>
+	<div class="max-w-md">
+		<DetailsFields />
+	</div>
+</Story>
+
+<Story name="Filled" asChild>
+	<div class="max-w-md">
+		<DetailsFields
+			handle="acme-widgets"
+			description="We make widgets, tangled-style."
+			website="https://acme.example"
+		/>
+	</div>
+</Story>
diff --git a/web/src/lib/components/org/DetailsFields.svelte b/web/src/lib/components/org/DetailsFields.svelte
new file mode 100644
index 000000000..9f84a601a
--- /dev/null
+++ b/web/src/lib/components/org/DetailsFields.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { ORG_HANDLE_SUFFIX } from "$lib/api/orgCreate";
+	import Input from "$lib/components/ui/Input.svelte";
+	import { SUBDOMAIN_MAX_LENGTH, SUBDOMAIN_MIN_LENGTH, SUBDOMAIN_PATTERN } from "$lib/subdomain";
+
+	interface Props {
+		handle?: string;
+		description?: string;
+		website?: string;
+		class?: string;
+	}
+
+	let {
+		handle = $bindable(""),
+		description = $bindable(""),
+		website = $bindable(""),
+		class: className
+	}: Props = $props();
+</script>
+
+<div class={["space-y-4", className]}>
+	<div>
+		<label
+			for="org_handle"
+			class="mb-1 block typography-paragraph-small font-bold text-foreground-default"
+		>
+			Organization handle
+		</label>
+		<Input
+			id="org_handle"
+			name="org_handle"
+			placeholder="organization-name"
+			minlength={SUBDOMAIN_MIN_LENGTH}
+			maxlength={SUBDOMAIN_MAX_LENGTH}
+			pattern={SUBDOMAIN_PATTERN.source}
+			title="Lowercase letters, digits, and hyphens; 4-63 characters; cannot start or end with a hyphen"
+			bind:value={handle}
+			required
+			suffix={ORG_HANDLE_SUFFIX}
+			class="w-full"
+		/>
+		<p class="mt-1 typography-paragraph-small text-foreground-subtle">
+			Lowercase letters, digits, and hyphens; 4-63 characters.
+		</p>
+	</div>
+
+	<div>
+		<label
+			for="org_description"
+			class="mb-1 block typography-paragraph-small font-bold text-foreground-default"
+		>
+			Description
+		</label>
+		<Input
+			id="org_description"
+			name="description"
+			placeholder="A brief description of your organization..."
+			bind:value={description}
+			class="w-full"
+		/>
+	</div>
+
+	<div>
+		<label
+			for="org_website"
+			class="mb-1 block typography-paragraph-small font-bold text-foreground-default"
+		>
+			Website
+		</label>
+		<Input
+			id="org_website"
+			name="website"
+			placeholder="https://example.com"
+			bind:value={website}
+			class="w-full"
+		/>
+	</div>
+</div>
diff --git a/web/src/lib/components/profile/ProfileCard.svelte b/web/src/lib/components/profile/ProfileCard.svelte
index 51a75b341..519067f82 100644
--- a/web/src/lib/components/profile/ProfileCard.svelte
+++ b/web/src/lib/components/profile/ProfileCard.svelte
@@ -8,6 +8,7 @@
 	import Link from "$icon/link";
 	import Pencil from "$icon/pencil";
 	import Rss from "$icon/rss";
+	import Building2 from "$icon/building-2";
 	import { resolve } from "$app/paths";
 	import ReportItems from "$lib/components/moderation/ReportItems.svelte";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
@@ -69,6 +70,12 @@
 
 	<div class="col-span-2">
 		<div class="flex flex-row flex-nowrap items-center gap-2">
+			{#if shown?.isOrganization}
+				<span class="shrink-0" title="Organization">
+					<Building2 class="size-5" aria-hidden="true" />
+					<span class="sr-only">Organization</span>
+				</span>
+			{/if}
 			<h1 title={identity.handle} class="min-w-0 truncate typography-heading-4 font-bold">
 				{identity.handle}
 			</h1>
diff --git a/web/src/lib/components/shell/Topbar.svelte b/web/src/lib/components/shell/Topbar.svelte
index bf730d330..081a05438 100644
--- a/web/src/lib/components/shell/Topbar.svelte
+++ b/web/src/lib/components/shell/Topbar.svelte
@@ -42,6 +42,7 @@
 	import ArrowRight from "$icon/arrow-right";
 	import BookMarked from "$icon/book-marked";
 	import BookPlus from "$icon/book-plus";
+	import Building2 from "$icon/building-2";
 	import Cog from "$icon/cog";
 	import LineSquiggle from "$icon/line-squiggle";
 	import LogOut from "$icon/log-out";
@@ -132,6 +133,9 @@
 							<DropdownItem href={resolve("/strings/new")} icon={LineSquiggle}
 								>New string</DropdownItem
 							>
+							<DropdownItem href={resolve("/org/new")} icon={Building2}
+								>New organization</DropdownItem
+							>
 						</Dropdown>
 					</div>
 
diff --git a/web/src/lib/components/ui/AvatarPicker.stories.svelte b/web/src/lib/components/ui/AvatarPicker.stories.svelte
new file mode 100644
index 000000000..cca78bf2f
--- /dev/null
+++ b/web/src/lib/components/ui/AvatarPicker.stories.svelte
@@ -0,0 +1,35 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import AvatarPicker from "$lib/components/ui/AvatarPicker.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/AvatarPicker",
+		component: AvatarPicker,
+		tags: ["autodocs"]
+	});
+
+	// a tiny 1x1 transparent PNG, just enough for the preview <img> to render
+	// something rather than a broken-image icon.
+	const PNG_BASE64 =
+		"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=";
+	const samplePng = () =>
+		new File([Uint8Array.from(atob(PNG_BASE64), (c) => c.charCodeAt(0))], "avatar.png", {
+			type: "image/png"
+		});
+</script>
+
+<!-- fills its container's width (staying circular via aspect-square), so stories need
+     to constrain that width themselves rather than letting it stretch full-bleed. -->
+<Story name="Empty" asChild>
+	<div class="w-48">
+		<AvatarPicker />
+	</div>
+</Story>
+
+<!-- seeding `file` drives the same $effect a real pick() would, so the preview renders
+     for real rather than needing a mocked internal state. -->
+<Story name="With preview" asChild>
+	<div class="w-48">
+		<AvatarPicker file={samplePng()} />
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/AvatarPicker.svelte b/web/src/lib/components/ui/AvatarPicker.svelte
new file mode 100644
index 000000000..9a52663d7
--- /dev/null
+++ b/web/src/lib/components/ui/AvatarPicker.svelte
@@ -0,0 +1,82 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const avatarPicker = tv({
+		slots: {
+			label: "flex aspect-square w-full cursor-pointer flex-col items-center justify-center gap-1 overflow-hidden rounded-full border border-border-default text-foreground-subtle transition-colors focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-border-focus hover:bg-background-subtle",
+			image: "size-full rounded-full object-cover",
+			placeholder: "flex flex-col items-center justify-center gap-1"
+		}
+	});
+	export type AvatarPickerVariants = VariantProps<typeof avatarPicker>;
+</script>
+
+<script lang="ts">
+	import Camera from "$icon/camera";
+
+	interface Props {
+		file?: File;
+		class?: string;
+	}
+
+	let { file = $bindable(), class: className }: Props = $props();
+
+	const ACCEPTED_TYPES: Record<string, true> = { "image/png": true, "image/jpeg": true };
+	const MAX_BYTES = 1_000_000;
+
+	const slot = avatarPicker();
+	let error = $state<string>();
+	let preview = $state<string>();
+
+	// tracks `file` (not just set directly by pick()) so a preview also
+	// appears when `file` is seeded from outside the component. the cleanup
+	// revokes each url exactly once — the previous one when `file` changes
+	// again, or the last one on destroy — rather than leaking every
+	// intermediate blob url a $derived recompute would produce.
+	$effect(() => {
+		if (!file) {
+			preview = undefined;
+			return;
+		}
+		const url = URL.createObjectURL(file);
+		preview = url;
+		return () => URL.revokeObjectURL(url);
+	});
+
+	const pick = (event: Event) => {
+		const picked = (event.currentTarget as HTMLInputElement).files?.[0];
+		if (!picked) return;
+		if (!ACCEPTED_TYPES[picked.type]) {
+			error = "Choose a PNG or JPEG image.";
+			return;
+		}
+		if (picked.size > MAX_BYTES) {
+			error = "Profile pictures must be 1 MB or smaller.";
+			return;
+		}
+		file = picked;
+		error = undefined;
+	};
+</script>
+
+<div class={["w-full", className]}>
+	<label class={slot.label()}>
+		{#if preview}
+			<img src={preview} alt="Avatar" class={slot.image()} />
+		{:else}
+			<span class={slot.placeholder()}>
+				<Camera class="size-8" aria-hidden="true" />
+			</span>
+		{/if}
+		<input
+			type="file"
+			accept="image/png,image/jpeg"
+			class="sr-only"
+			aria-invalid={error ? "true" : undefined}
+			onchange={pick}
+		/>
+	</label>
+</div>
+{#if error}
+	<p class="typography-paragraph-small text-foreground-danger">{error}</p>
+{/if}
diff --git a/web/src/lib/components/ui/MemberListInput.stories.svelte b/web/src/lib/components/ui/MemberListInput.stories.svelte
new file mode 100644
index 000000000..7d4843daf
--- /dev/null
+++ b/web/src/lib/components/ui/MemberListInput.stories.svelte
@@ -0,0 +1,37 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import MemberListInput from "$lib/components/ui/MemberListInput.svelte";
+	import type { InputTag } from "$lib/components/ui/inputField";
+
+	// live typeahead calls searchActorsTypeahead against a real bobbin — with
+	// no server behind this url, only the tags below render; typing won't
+	// surface suggestions in Storybook the way it would against a live app.
+	const { Story } = defineMeta({
+		title: "UI/MemberListInput",
+		component: MemberListInput,
+		tags: ["autodocs"],
+		args: {
+			bobbinUrl: "https://bobbin.tngl.boltless.dev"
+		}
+	});
+</script>
+
+<script lang="ts">
+	let empty = $state<InputTag[]>([]);
+	let withMembers = $state<InputTag[]>([
+		{ value: "eti.tf", field: "did:plc:eti" },
+		{ value: "oppi.li", field: "did:plc:oppi" }
+	]);
+</script>
+
+<Story name="Empty" asChild>
+	<div class="max-w-md">
+		<MemberListInput bobbinUrl="https://bobbin.tngl.boltless.dev" bind:tags={empty} />
+	</div>
+</Story>
+
+<Story name="With members" asChild>
+	<div class="max-w-md">
+		<MemberListInput bobbinUrl="https://bobbin.tngl.boltless.dev" bind:tags={withMembers} />
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/MemberListInput.svelte b/web/src/lib/components/ui/MemberListInput.svelte
new file mode 100644
index 000000000..f50205050
--- /dev/null
+++ b/web/src/lib/components/ui/MemberListInput.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { onDestroy } from "svelte";
+	import { createBobbinClient } from "$lib/api/client";
+	import { searchActorsTypeahead, type ActorSuggestion } from "$lib/api/search";
+	import Input from "$lib/components/ui/Input.svelte";
+	import type { InputTag } from "$lib/components/ui/inputField";
+	import User from "$lib/components/ui/User.svelte";
+
+	interface Props {
+		bobbinUrl: string;
+		tags: InputTag[];
+		label?: string;
+		placeholder?: string;
+		hint?: string;
+		class?: string;
+	}
+
+	let {
+		bobbinUrl,
+		tags = $bindable([]),
+		label = "Members",
+		placeholder = "Add a member",
+		hint = "Pick from the list, or type a handle",
+		class: className
+	}: Props = $props();
+
+	const bobbin = $derived(createBobbinClient({ serviceUrl: bobbinUrl }));
+
+	let suggestions = $state<InputTag[]>([]);
+	let timer: ReturnType<typeof setTimeout> | undefined;
+	let request: AbortController | undefined;
+
+	const loadActors = 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;
+			suggestions = result.actors.map(
+				(actor: ActorSuggestion): InputTag => ({ value: actor.handle, field: actor.did })
+			);
+		} catch {
+			if (!controller.signal.aborted) suggestions = [];
+		}
+	};
+
+	const onSearch = (query: string) => {
+		if (timer !== undefined) clearTimeout(timer);
+		request?.abort();
+		if (query === "") {
+			suggestions = [];
+			return;
+		}
+		timer = setTimeout(() => void loadActors(query), 150);
+	};
+
+	onDestroy(() => {
+		if (timer !== undefined) clearTimeout(timer);
+		request?.abort();
+	});
+</script>
+
+<Input
+	rich
+	bind:tags
+	{suggestions}
+	{onSearch}
+	{label}
+	{placeholder}
+	{hint}
+	emptyLabel="No matches"
+	class={className}
+>
+	{#snippet tag(t)}
+		<User handle={t.value} size="regular" link={false} />
+	{/snippet}
+	{#snippet suggestion(t)}
+		<User handle={t.value} size="regular" link={false} />
+	{/snippet}
+</Input>
diff --git a/web/src/lib/components/ui/User.svelte b/web/src/lib/components/ui/User.svelte
index 3d23c6d03..bff8b0c19 100644
--- a/web/src/lib/components/ui/User.svelte
+++ b/web/src/lib/components/ui/User.svelte
@@ -4,8 +4,8 @@
 
 	export const user = tv({
 		slots: {
-			root: "inline-flex items-center",
-			handle: "truncate"
+			root: "inline-flex min-w-0 items-center",
+			handle: "min-w-0 truncate"
 		},
 		variants: {
 			size: {