From 8b8887f8f3b2fa3b64aed3c5654151a0fec3bbbe Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 9 Sep 2026 17:17:10 +0200
Subject: [PATCH] web/org: add org profile page

Signed-off-by: eti <eti@eti.tf>
---
 .../profile/ProfileChrome.stories.svelte      |  36 +++-
 .../components/profile/ProfileChrome.svelte   |  51 ++++--
 .../lib/components/profile/ProfileTabs.svelte |  99 ++++++++---
 .../organization/OrganizationChrome.svelte    | 155 ++++++++++++++++++
 .../OrganizationMembersTab.svelte             |  13 ++
 .../OrganizationOverviewTab.svelte            |  91 ++++++++++
 .../OrganizationSettingsTab.svelte            |  10 ++
 .../components/profile/organization/mock.ts   |  27 +++
 web/src/lib/components/ui/Tag.svelte          |   2 +-
 web/src/routes/[handle]/+layout.svelte        |   4 +-
 web/src/routes/[handle]/+layout.ts            |  16 +-
 web/src/routes/[handle]/+page.svelte          |  26 ++-
 web/src/routes/[handle]/+page.ts              |   8 +-
 13 files changed, 480 insertions(+), 58 deletions(-)
 create mode 100644 web/src/lib/components/profile/organization/OrganizationChrome.svelte
 create mode 100644 web/src/lib/components/profile/organization/OrganizationMembersTab.svelte
 create mode 100644 web/src/lib/components/profile/organization/OrganizationOverviewTab.svelte
 create mode 100644 web/src/lib/components/profile/organization/OrganizationSettingsTab.svelte
 create mode 100644 web/src/lib/components/profile/organization/mock.ts

diff --git a/web/src/lib/components/profile/ProfileChrome.stories.svelte b/web/src/lib/components/profile/ProfileChrome.stories.svelte
index 4cbf9cc60..eaec066f8 100644
--- a/web/src/lib/components/profile/ProfileChrome.stories.svelte
+++ b/web/src/lib/components/profile/ProfileChrome.stories.svelte
@@ -1,6 +1,8 @@
 <script module lang="ts">
-	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
+	import { expect } from "storybook/test";
 	import RepoListTab from "$lib/components/profile/tabs/RepoListTab.svelte";
+	import OrganizationOverviewTab from "$lib/components/profile/organization/OrganizationOverviewTab.svelte";
 	import ProfileChrome from "$lib/components/profile/ProfileChrome.svelte";
 	import type { ProfileRecord } from "$lib/api/records";
 	import type { ProfileCounts, RepoCardData } from "$lib/components/profile/types";
@@ -32,6 +34,20 @@
 		stars: 10 + index,
 		forks: index % 5
 	}));
+	const organizationProfile = {
+		...profile,
+		isOrganization: true,
+		pronouns: undefined,
+		location: undefined
+	} as ProfileRecord;
+	type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas">;
+	const organizationOverview = async ({ canvas }: PlayContext) => {
+		await expect(canvas.getByRole("heading", { name: identity.handle })).toBeVisible();
+		await expect(canvas.getByRole("link", { name: /Repositories/ })).toBeVisible();
+		await expect(canvas.getByRole("link", { name: /Members/ })).toBeVisible();
+		await expect(canvas.getByRole("link", { name: "Settings" })).toBeVisible();
+		await expect(canvas.getByRole("heading", { name: "Pinned repositories" })).toBeVisible();
+	};
 	const { Story } = defineMeta({ title: "Profile/ProfileChrome" });
 </script>
 
@@ -39,6 +55,10 @@
 	<RepoListTab initial={repos} total={repos.length} did={identity.did} handle={identity.handle} />
 {/snippet}
 
+{#snippet organizationContent()}
+	<OrganizationOverviewTab pinned={repos.slice(0, 4)} handle={identity.handle} />
+{/snippet}
+
 <Story name="Skeleton fixture" asChild parameters={{ auth: true }}>
 	<ProfileChrome
 		{identity}
@@ -51,3 +71,17 @@
 		{content}
 	/>
 </Story>
+
+<Story name="Organization overview" asChild play={organizationOverview} parameters={{ auth: true }}>
+	<ProfileChrome
+		{identity}
+		profile={organizationProfile}
+		loadedCounts={counts}
+		viewerFollowRkey={null}
+		viewerVouch={null}
+		notJoined={false}
+		bobbinUrl="https://bobbin.example.test"
+		activeTab="overview"
+		content={organizationContent}
+	/>
+</Story>
diff --git a/web/src/lib/components/profile/ProfileChrome.svelte b/web/src/lib/components/profile/ProfileChrome.svelte
index 0e6ffa375..b7b68cadb 100644
--- a/web/src/lib/components/profile/ProfileChrome.svelte
+++ b/web/src/lib/components/profile/ProfileChrome.svelte
@@ -11,6 +11,7 @@
 	import { fetchVouchesPage } from "$lib/components/profile/pages";
 	import ProfileCard from "$lib/components/profile/ProfileCard.svelte";
 	import ProfileTabs from "$lib/components/profile/ProfileTabs.svelte";
+	import OrganizationChrome from "$lib/components/profile/organization/OrganizationChrome.svelte";
 	import type { DirectVouch, NetworkVouch, ProfileCounts } from "$lib/components/profile/types";
 
 	interface Props {
@@ -50,6 +51,7 @@
 	let networkVouches = $state<NetworkVouch[]>([]);
 
 	$effect(() => {
+		if (profile?.isOrganization) return;
 		const agent = auth.agent;
 		const did = identity.did;
 		const viewerDid = auth.currentDid;
@@ -78,21 +80,36 @@
 {#if notJoined}
 	<EmptyState message={`${identity.handle} hasn't joined Tangled yet.`} />
 {:else}
-	<ProfileTabs handle={identity.handle} active={activeTab} {counts} />
-	<TabPanel as="div" padded={false} class="grid md:grid-cols-11 md:gap-4 md:p-6">
-		<aside class="p-6 md:col-span-3 md:p-0 {activeTab !== 'overview' ? 'hidden md:block' : ''}">
-			<ProfileCard
-				{identity}
-				{profile}
-				followers={counts.followers}
-				following={counts.following}
-				{viewerFollowRkey}
-				{viewerVouch}
-				{networkVouches}
-			/>
-		</aside>
-		<div class="min-w-0 border-t border-border-default p-6 md:col-span-8 md:border-t-0 md:p-0">
-			{@render content()}
-		</div>
-	</TabPanel>
+	{#if profile?.isOrganization}
+		<OrganizationChrome
+			{identity}
+			{profile}
+			{counts}
+			{viewerFollowRkey}
+			{activeTab}
+			{content}
+		/>
+	{:else}
+		<ProfileTabs handle={identity.handle} active={activeTab} {counts} />
+		<TabPanel as="div" padded={false} class="grid md:grid-cols-11 md:gap-4 md:p-6">
+			<aside
+				class="p-6 md:col-span-3 md:p-0 {activeTab !== 'overview' ? 'hidden md:block' : ''}"
+			>
+				<ProfileCard
+					{identity}
+					{profile}
+					followers={counts.followers}
+					following={counts.following}
+					{viewerFollowRkey}
+					{viewerVouch}
+					{networkVouches}
+				/>
+			</aside>
+			<div
+				class="min-w-0 border-t border-border-default p-6 md:col-span-8 md:border-t-0 md:p-0"
+			>
+				{@render content()}
+			</div>
+		</TabPanel>
+	{/if}
 {/if}
diff --git a/web/src/lib/components/profile/ProfileTabs.svelte b/web/src/lib/components/profile/ProfileTabs.svelte
index 226bce26e..7fd67dbcb 100644
--- a/web/src/lib/components/profile/ProfileTabs.svelte
+++ b/web/src/lib/components/profile/ProfileTabs.svelte
@@ -1,47 +1,92 @@
 <script lang="ts">
+	import { dev } from "$app/environment";
+	import { page } from "$app/state";
 	import SquareChartGantt from "$icon/square-chart-gantt";
 	import BookMarked from "$icon/book-marked";
 	import Star from "$icon/star";
 	import LineSquiggle from "$icon/line-squiggle";
 	import Shield from "$icon/shield";
+	import UsersRound from "$icon/users-round";
+	import Settings from "$icon/settings";
 	import Tabs, { type TabDef } from "$lib/components/ui/Tabs.svelte";
+	import { organizationMemberCount } from "$lib/components/profile/organization/mock";
 	import type { ProfileCounts } from "$lib/components/profile/types";
 
 	interface Props {
 		handle: string;
 		active: string;
 		counts: ProfileCounts;
+		organization?: boolean;
 	}
 
-	let { handle, active, counts }: Props = $props();
+	let { handle, active, counts, organization = false }: Props = $props();
 
-	const hrefFor = (id: string) => (id === "overview" ? `/${handle}` : `/${handle}?tab=${id}`);
+	const hrefFor = (id: string) => {
+		const query = new URLSearchParams([
+			...(id === "overview" ? [] : [["tab", id]]),
+			...(dev && page.url.searchParams.get("preview") === "organization"
+				? [["preview", "organization"]]
+				: [])
+		]).toString();
+		return `/${handle}${query ? `?${query}` : ""}`;
+	};
 
-	const tabs = $derived<TabDef[]>([
-		{ id: "overview", label: "Overview", icon: SquareChartGantt, href: hrefFor("overview") },
-		{
-			id: "repos",
-			label: "Repositories",
-			icon: BookMarked,
-			count: counts.repos,
-			href: hrefFor("repos")
-		},
-		{
-			id: "starred",
-			label: "Starred",
-			icon: Star,
-			count: counts.stars,
-			href: hrefFor("starred")
-		},
-		{
-			id: "strings",
-			label: "Strings",
-			icon: LineSquiggle,
-			count: counts.strings,
-			href: hrefFor("strings")
-		},
-		{ id: "vouches", label: "Vouches", icon: Shield, href: hrefFor("vouches") }
-	]);
+	const tabs = $derived<TabDef[]>(
+		organization
+			? [
+					{
+						id: "overview",
+						label: "Overview",
+						icon: SquareChartGantt,
+						href: hrefFor("overview")
+					},
+					{
+						id: "repos",
+						label: "Repositories",
+						icon: BookMarked,
+						count: counts.repos,
+						href: hrefFor("repos")
+					},
+					{
+						id: "members",
+						label: "Members",
+						icon: UsersRound,
+						count: organizationMemberCount,
+						href: hrefFor("members")
+					},
+					{ id: "settings", label: "Settings", icon: Settings, href: hrefFor("settings") }
+				]
+			: [
+					{
+						id: "overview",
+						label: "Overview",
+						icon: SquareChartGantt,
+						href: hrefFor("overview")
+					},
+					{
+						id: "repos",
+						label: "Repositories",
+						icon: BookMarked,
+						count: counts.repos,
+						href: hrefFor("repos")
+					},
+					{
+						id: "starred",
+						label: "Starred",
+						icon: Star,
+						count: counts.stars,
+						href: hrefFor("starred")
+					},
+					{
+						id: "strings",
+						label: "Strings",
+						icon: LineSquiggle,
+						count: counts.strings,
+						href: hrefFor("strings")
+					},
+					{ id: "vouches", label: "Vouches", icon: Shield, href: hrefFor("vouches") }
+				]
+	);
 </script>
 
 <Tabs {tabs} {active} overlapBottom={true} label="profile sections" />
diff --git a/web/src/lib/components/profile/organization/OrganizationChrome.svelte b/web/src/lib/components/profile/organization/OrganizationChrome.svelte
new file mode 100644
index 000000000..1d51c342e
--- /dev/null
+++ b/web/src/lib/components/profile/organization/OrganizationChrome.svelte
@@ -0,0 +1,155 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import { dev } from "$app/environment";
+	import { page } from "$app/state";
+	import type { Snippet } from "svelte";
+	import LinkIcon from "$icon/link";
+	import Rss from "$icon/rss";
+	import UserRoundCog from "$icon/user-round-cog";
+	import UsersRound from "$icon/users-round";
+	import Warehouse from "$icon/warehouse";
+	import type { ProfileRecord } from "$lib/api/records";
+	import Bluesky from "$lib/components/icons/Bluesky.svelte";
+	import ReportItems from "$lib/components/moderation/ReportItems.svelte";
+	import FollowButton from "$lib/components/profile/FollowButton.svelte";
+	import { organizationManager } from "$lib/components/profile/organization/mock";
+	import ProfileTabs from "$lib/components/profile/ProfileTabs.svelte";
+	import type { ProfileCounts } from "$lib/components/profile/types";
+	import Avatar from "$lib/components/ui/Avatar.svelte";
+	import DropdownItem from "$lib/components/ui/DropdownItem.svelte";
+	import MoreMenu from "$lib/components/ui/MoreMenu.svelte";
+	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import { formatCount } from "$lib/format";
+	import User from "$lib/components/ui/User.svelte";
+	import Link from "$lib/components/ui/Link.svelte";
+
+	interface Props {
+		identity: { did: string; handle: string };
+		profile: ProfileRecord;
+		counts: ProfileCounts;
+		viewerFollowRkey?: string | null;
+		activeTab: string;
+		content: Snippet;
+	}
+
+	let { identity, profile, counts, viewerFollowRkey, activeTab, content }: Props = $props();
+
+	const links = $derived((profile.links ?? []).filter((link) => link.trim().length > 0));
+	const followersHref = $derived(
+		`/${identity.handle}?${new URLSearchParams({
+			tab: "followers",
+			...(dev && page.url.searchParams.get("preview") === "organization"
+				? { preview: "organization" }
+				: {})
+		})}`
+	);
+	const linkLabel = (link: string) => {
+		try {
+			return new URL(link).hostname;
+		} catch {
+			return link;
+		}
+	};
+</script>
+
+<ProfileTabs handle={identity.handle} active={activeTab} {counts} organization />
+<TabPanel as="div" padded={false} class="overflow-hidden">
+	{#if activeTab === "overview"}
+		<section class="text-foreground-default">
+			<div
+				class="relative h-38 border-b border-border-default bg-linear-to-b from-background-default to-background-muted dark:bg-background-default dark:bg-none"
+			>
+				<div
+					class="absolute inset-3 grid grid-cols-[repeat(32,1.3125rem)] gap-x-2.5 gap-y-1.5 overflow-hidden mask-[radial-gradient(ellipse_at_90%_100%,black_20%,transparent_82%)] opacity-35"
+					aria-hidden="true"
+				>
+					{#each Array(160) as _, index (index)}
+						<Avatar did={identity.did} size="regular" />
+					{/each}
+				</div>
+
+				<div class="absolute top-2 right-2 flex items-center gap-2 sm:top-25 sm:right-4">
+					<div class="min-w-23">
+						<FollowButton profileDid={identity.did} initialRkey={viewerFollowRkey} />
+					</div>
+					<MoreMenu label={`More actions for @${identity.handle}`}>
+						<DropdownItem
+							icon={Rss}
+							href={resolve(`/${identity.handle}/feed.atom` as "/")}
+						>
+							Atom feed
+						</DropdownItem>
+						<ReportItems authorDid={identity.did} authorHandle={identity.handle} />
+					</MoreMenu>
+				</div>
+
+				<Avatar
+					did={identity.did}
+					handle={identity.handle}
+					size="full"
+					class="absolute top-19 left-1/2 size-26 -translate-x-1/2 bg-background-default sm:top-15 sm:size-34"
+				/>
+			</div>
+
+			<div class="flex flex-col items-center gap-4 px-4 pt-11 pb-8 text-center">
+				<h1 class="flex items-center gap-2 typography-heading-4">
+					<Warehouse class="size-5 text-foreground-subtle" aria-hidden="true" />
+					{identity.handle}
+				</h1>
+
+				{#if profile.description}
+					<p class="max-w-137 typography-paragraph-regular">{profile.description}</p>
+				{/if}
+
+				<div
+					class="flex max-w-full flex-wrap items-center justify-center gap-3 typography-paragraph-small"
+				>
+					<span
+						class="flex items-center gap-1 rounded-sm bg-background-inset px-2.5 py-1"
+					>
+						<UserRoundCog class="size-4" aria-hidden="true" />
+						<span>Managed by</span>
+						<User
+							did={organizationManager.did}
+							handle={organizationManager.handle}
+							size="small"
+							class="gap-1"
+						/>
+					</span>
+					<Link
+						href={resolve(followersHref as "/")}
+						class="px-2.5"
+					>
+						<UsersRound class="size-4" aria-hidden="true" />
+						{formatCount(counts.followers)} followers
+					</Link>
+					{#if profile.bluesky}
+						<Link
+							href={`https://bsky.app/profile/${identity.did}`}
+							class="px-2.5"
+							target="_blank"
+							rel="external noopener noreferrer"
+						>
+							<Bluesky class="size-4" aria-hidden="true" />
+							{identity.handle}
+						</Link>
+					{/if}
+					{#each links as link (link)}
+						<Link
+							href={link}
+							class="px-2.5"
+							target="_blank"
+							rel="external nofollow me noopener noreferrer"
+						>
+							<LinkIcon class="size-4 shrink-0" aria-hidden="true" />
+							<span class="max-w-48 truncate">{linkLabel(link)}</span>
+						</Link>
+					{/each}
+				</div>
+			</div>
+		</section>
+		{@render content()}
+	{:else}
+		<div class="p-6">{@render content()}</div>
+	{/if}
+</TabPanel>
diff --git a/web/src/lib/components/profile/organization/OrganizationMembersTab.svelte b/web/src/lib/components/profile/organization/OrganizationMembersTab.svelte
new file mode 100644
index 000000000..aad36fd4b
--- /dev/null
+++ b/web/src/lib/components/profile/organization/OrganizationMembersTab.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import FollowCard from "$lib/components/profile/FollowCard.svelte";
+	import { organizationMembers } from "$lib/components/profile/organization/mock";
+</script>
+
+<section class="space-y-4">
+	<h2 class="px-2 typography-heading-4 font-medium">Members</h2>
+	<div class="grid gap-4 md:grid-cols-2">
+		{#each organizationMembers as person (person.did)}
+			<FollowCard {person} border background followButton={false} />
+		{/each}
+	</div>
+</section>
diff --git a/web/src/lib/components/profile/organization/OrganizationOverviewTab.svelte b/web/src/lib/components/profile/organization/OrganizationOverviewTab.svelte
new file mode 100644
index 000000000..0adfdf5e2
--- /dev/null
+++ b/web/src/lib/components/profile/organization/OrganizationOverviewTab.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import { dev } from "$app/environment";
+	import { page } from "$app/state";
+	import ArrowRight from "$icon/arrow-right";
+	import RepoCard from "$lib/components/repo/RepoCard.svelte";
+	import { LANGUAGE_COLORS, LANGUAGE_COLOR_FALLBACK } from "$lib/components/repo/languageColors";
+	import ColorBall from "$lib/components/ui/ColorBall.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+	import EmptyState from "$lib/components/ui/EmptyState.svelte";
+	import Tag from "$lib/components/ui/Tag.svelte";
+	import type { RepoCardData } from "$lib/components/profile/types";
+	import {
+		organizationLanguages,
+		organizationRepoStats,
+		organizationTopics
+	} from "$lib/components/profile/organization/mock";
+
+	interface Props {
+		pinned: RepoCardData[];
+		handle: string;
+	}
+
+	let { pinned, handle }: Props = $props();
+
+	const repositories = $derived(
+		pinned.slice(0, 4).map((repo) => ({
+			...repo,
+			language: undefined,
+			forks: undefined,
+			...organizationRepoStats
+		}))
+	);
+	const repositoriesHref = $derived(
+		`/${handle}?${new URLSearchParams({
+			tab: "repos",
+			...(dev && page.url.searchParams.get("preview") === "organization"
+				? { preview: "organization" }
+				: {})
+		})}`
+	);
+</script>
+
+<div class="grid gap-x-4 gap-y-6 p-4 md:grid-cols-2">
+	<section class="space-y-2">
+		<h2 class="px-2 typography-paragraph-regular font-medium">Languages</h2>
+		<div class="flex flex-wrap gap-2">
+			{#each organizationLanguages as language (language)}
+				<Tag size="large">
+					<ColorBall
+						color={LANGUAGE_COLORS[language] ?? LANGUAGE_COLOR_FALLBACK}
+						class="size-2"
+					/>
+					{language}
+				</Tag>
+			{/each}
+		</div>
+	</section>
+
+	<section class="space-y-2">
+		<h2 class="px-2 typography-paragraph-regular font-medium">Topics</h2>
+		<div class="flex flex-wrap gap-2">
+			{#each organizationTopics as topic (topic)}
+				<Tag size="large">{topic}</Tag>
+			{/each}
+		</div>
+	</section>
+
+	<section class="space-y-2 md:col-span-2">
+		<h2 class="px-2 typography-paragraph-regular font-medium">Pinned repositories</h2>
+		{#if repositories.length > 0}
+			<div class="grid gap-2 md:grid-cols-2">
+				{#each repositories as repo (repo.repoDid || repo.rkey || repo.name)}
+					<RepoCard {repo} starButton={false} showOwner={false} />
+				{/each}
+			</div>
+			<div class="flex justify-end pt-2">
+				<Button
+					variant="ghost"
+					href={resolve(repositoriesHref as "/")}
+					icon={ArrowRight}
+					iconSide="right"
+				>
+					View all repositories
+				</Button>
+			</div>
+		{:else}
+			<EmptyState message="No pinned repositories." />
+		{/if}
+	</section>
+</div>
diff --git a/web/src/lib/components/profile/organization/OrganizationSettingsTab.svelte b/web/src/lib/components/profile/organization/OrganizationSettingsTab.svelte
new file mode 100644
index 000000000..6df8f51a7
--- /dev/null
+++ b/web/src/lib/components/profile/organization/OrganizationSettingsTab.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import Settings from "$icon/settings";
+	import EmptyState from "$lib/components/ui/EmptyState.svelte";
+</script>
+
+<EmptyState
+	icon={Settings}
+	message="Organization settings aren't available yet."
+	background={false}
+/>
diff --git a/web/src/lib/components/profile/organization/mock.ts b/web/src/lib/components/profile/organization/mock.ts
new file mode 100644
index 000000000..59b0dc398
--- /dev/null
+++ b/web/src/lib/components/profile/organization/mock.ts
@@ -0,0 +1,27 @@
+import type { PersonData } from "$lib/components/profile/types";
+
+export const organizationLanguages = ["Go", "Rust", "JavaScript"];
+
+export const organizationTopics = ["climate-change", "biology", "astronomy", "design"];
+
+export const organizationManager = {
+	did: "did:plc:organization-manager",
+	handle: "user.tld"
+};
+
+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 const organizationMemberCount = 86;
+
+export const organizationRepoStats = {
+	issues: 94,
+	pulls: 76
+};
diff --git a/web/src/lib/components/ui/Tag.svelte b/web/src/lib/components/ui/Tag.svelte
index 26ac74d68..bcb228ed0 100644
--- a/web/src/lib/components/ui/Tag.svelte
+++ b/web/src/lib/components/ui/Tag.svelte
@@ -20,7 +20,7 @@
 			size: {
 				small: "px-1 typography-paragraph-mini",
 				regular: "px-1.5 py-0.5 typography-paragraph-small",
-				large: "gap-2 px-2 py-1 typography-paragraph-regular font-normal"
+				large: "gap-2 px-2 py-1.5 typography-paragraph-regular font-normal"
 			}
 		},
 		defaultVariants: {
diff --git a/web/src/routes/[handle]/+layout.svelte b/web/src/routes/[handle]/+layout.svelte
index dfbeab382..fcc488be7 100644
--- a/web/src/routes/[handle]/+layout.svelte
+++ b/web/src/routes/[handle]/+layout.svelte
@@ -14,7 +14,9 @@
 
 	const tabParam = $derived(page.url.searchParams.get("tab") ?? "overview");
 	const activeTab = $derived(
-		["repos", "starred", "strings", "vouches"].includes(tabParam) ? tabParam : "overview"
+		["repos", "starred", "strings", "vouches", "members", "settings"].includes(tabParam)
+			? tabParam
+			: "overview"
 	);
 
 	// bare data accesses can see mid-commit state across child reads, derived stays coherent
diff --git a/web/src/routes/[handle]/+layout.ts b/web/src/routes/[handle]/+layout.ts
index 0b0ef5691..c794b144c 100644
--- a/web/src/routes/[handle]/+layout.ts
+++ b/web/src/routes/[handle]/+layout.ts
@@ -1,4 +1,4 @@
-import { browser } from "$app/environment";
+import { browser, dev } from "$app/environment";
 import { error, redirect } from "@sveltejs/kit";
 import { createBobbinClient } from "$lib/api/client";
 import type { MiniDoc } from "$lib/api/identity";
@@ -44,6 +44,7 @@ export const load: LayoutLoad = async (event) => {
 		fetch: event.fetch
 	});
 	const viewerDid = parent.auth?.did;
+	const previewOrganization = dev && event.url.searchParams.get("preview") === "organization";
 
 	// server awaits for 404s and redirects, client navigation streams for instant commit
 	const resolved = (async () => {
@@ -90,15 +91,20 @@ export const load: LayoutLoad = async (event) => {
 	const followPromise = stream(resolved.then(({ viewerFollowRkey }) => viewerFollowRkey));
 
 	const profilePromise = stream(
-		resolved.then(({ identity }): Promise<ProfileRecord | null> =>
-			getProfile(ctx, identity.did)
+		resolved.then(async ({ identity }): Promise<ProfileRecord | null> => {
+			const profile = await getProfile(ctx, identity.did)
 				.then((view) => view.value)
 				.catch((cause) => {
 					if (cause instanceof ClientResponseError && httpStatusFor(cause) === 404)
 						return null;
 					return toHttpError(cause, "Could not load profile");
-				})
-		)
+				});
+			if (!previewOrganization) return profile;
+			return {
+				...(profile ?? { $type: "sh.tangled.actor.profile", bluesky: false }),
+				isOrganization: true
+			};
+		})
 	);
 
 	// direct vouch is public so it loads here, network vouches require viewer auth client-side
diff --git a/web/src/routes/[handle]/+page.svelte b/web/src/routes/[handle]/+page.svelte
index 3ccc1ecd9..2fa4790f2 100644
--- a/web/src/routes/[handle]/+page.svelte
+++ b/web/src/routes/[handle]/+page.svelte
@@ -5,6 +5,9 @@
 	import StarredTab from "$lib/components/profile/tabs/StarredTab.svelte";
 	import StringListTab from "$lib/components/profile/tabs/StringListTab.svelte";
 	import VouchTab from "$lib/components/profile/tabs/VouchTab.svelte";
+	import OrganizationMembersTab from "$lib/components/profile/organization/OrganizationMembersTab.svelte";
+	import OrganizationOverviewTab from "$lib/components/profile/organization/OrganizationOverviewTab.svelte";
+	import OrganizationSettingsTab from "$lib/components/profile/organization/OrganizationSettingsTab.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
 	import Bones from "$lib/components/ui/Bones.svelte";
 	import Section from "$lib/components/ui/Section.svelte";
@@ -30,11 +33,16 @@
 			<Bones capture={profileOverviewtabSkeletonFixture} />
 		{/snippet}
 		{@const identity = await data.identity}
-		<OverviewTab
-			pinned={await data.overview.pinned}
-			activity={await data.overview.activity}
-			handle={identity.handle}
-		/>
+		{@const profile = await data.profile}
+		{#if profile?.isOrganization}
+			<OrganizationOverviewTab pinned={await data.overview.pinned} handle={identity.handle} />
+		{:else}
+			<OverviewTab
+				pinned={await data.overview.pinned}
+				activity={await data.overview.activity}
+				handle={identity.handle}
+			/>
+		{/if}
 	</Pending>
 {:else if data.tab === "repos"}
 	<Pending>
@@ -113,4 +121,12 @@
 		{@const identity = await data.identity}
 		<VouchTab did={identity.did} isSelf={await data.isSelf} profileHandle={identity.handle} />
 	</Pending>
+{:else if data.tab === "members"}
+	{#if (await data.profile)?.isOrganization}
+		<OrganizationMembersTab />
+	{/if}
+{:else if data.tab === "settings"}
+	{#if (await data.profile)?.isOrganization}
+		<OrganizationSettingsTab />
+	{/if}
 {/if}
diff --git a/web/src/routes/[handle]/+page.ts b/web/src/routes/[handle]/+page.ts
index d6583a8b5..f9bbbf786 100644
--- a/web/src/routes/[handle]/+page.ts
+++ b/web/src/routes/[handle]/+page.ts
@@ -19,7 +19,9 @@ const TABS = [
 	"strings",
 	"followers",
 	"following",
-	"vouches"
+	"vouches",
+	"members",
+	"settings"
 ] as const;
 type Tab = (typeof TABS)[number];
 
@@ -80,6 +82,10 @@ export const load: PageLoad = async (event) => {
 				isSelf: stream(identity.then(({ did }) => viewerDid === did))
 			});
 		}
+		case "members":
+			return { tab: "members" as const };
+		case "settings":
+			return { tab: "settings" as const };
 		case "starred": {
 			const stars = identity.then(({ did }) =>
 				cached(`profile:${viewerDid}:${did}:starred`, 30_000, () =>
-- 
2.51.2