diff --git a/web/src/lib/components/notifications/NotificationBell.stories.svelte b/web/src/lib/components/notifications/NotificationBell.stories.svelte
new file mode 100644
index 000000000..149a32150
--- /dev/null
+++ b/web/src/lib/components/notifications/NotificationBell.stories.svelte
@@ -0,0 +1,38 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { expect, userEvent, waitFor, within } from "storybook/test";
+	import NotificationBell from "./NotificationBell.svelte";
+	import { notifications } from "./mock";
+
+	const read = notifications.map((n) => ({ ...n, read: true }));
+
+	const many = Array.from({ length: 120 }, (_, index) => ({
+		...notifications[index % notifications.length],
+		id: index + 1,
+		read: false
+	}));
+
+	const { Story } = defineMeta({
+		title: "Notifications/NotificationBell",
+		component: NotificationBell,
+		tags: ["autodocs"],
+		args: { notifications }
+	});
+</script>
+
+<Story name="Default" />
+
+<Story name="All read" args={{ notifications: read }} />
+
+<Story name="Nothing to show" args={{ notifications: [] }} />
+
+<Story name="Count over ninety-nine" args={{ notifications: many }} />
+
+<Story
+	name="Open preview"
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(canvas.getByRole("button", { name: /notifications/i }));
+		await waitFor(() => expect(canvas.getByRole("link", { name: /view all/i })).toBeVisible());
+	}}
+/>
diff --git a/web/src/lib/components/notifications/NotificationBell.svelte b/web/src/lib/components/notifications/NotificationBell.svelte
new file mode 100644
index 000000000..d63c3df53
--- /dev/null
+++ b/web/src/lib/components/notifications/NotificationBell.svelte
@@ -0,0 +1,148 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import ArrowRight from "$icon/arrow-right";
+	import Bell from "$icon/bell";
+	import Button from "$lib/components/ui/Button.svelte";
+	import Dropdown from "$lib/components/ui/Dropdown.svelte";
+	import { notifications as fixtures } from "./mock";
+	import { notificationCategory } from "./notification";
+	import NotificationList from "./NotificationList.svelte";
+	import NotificationToolbar from "./NotificationToolbar.svelte";
+	import type { CategoryFilter, NotificationSummary, ReadFilter } from "./types";
+
+	interface Props {
+		// same fixtures the /notifications page loads: the xrpc method returns
+		// at-uris where these rows need a repo name, a number and a title.
+		notifications?: NotificationSummary[];
+	}
+
+	let { notifications = fixtures }: Props = $props();
+
+	// the appview preview serves five rows and sends the rest to the full page
+	const PREVIEW_LIMIT = 5;
+
+	let readFilter = $state<ReadFilter>("unread");
+	let categoryFilter = $state<CategoryFilter>("all");
+
+	// read state lives here while the dropdown runs on fixtures; a wired bell would
+	// post org.tangled.temp.notification.updateSeen and refetch instead.
+	let overrides = $state<Record<number, boolean>>({});
+
+	const all = $derived(
+		notifications.map((n) => (n.id in overrides ? { ...n, read: overrides[n.id] } : n))
+	);
+
+	// the badge counts everything unread, not the rows this filter shows
+	const unreadCount = $derived(all.filter((n) => !n.read).length);
+	const badge = $derived(unreadCount > 99 ? "99+" : String(unreadCount));
+
+	// the unread tab filters on the data as it loaded, never on the local read
+	// state, so toggling a row restyles it in place instead of dropping it out of
+	// the list under the cursor.
+	const unreadOnLoad = $derived(new Set(notifications.filter((n) => !n.read).map((n) => n.id)));
+
+	const filtered = $derived(
+		all
+			.filter((n) => readFilter !== "unread" || unreadOnLoad.has(n.id))
+			.filter(
+				(n) => categoryFilter === "all" || notificationCategory(n.type) === categoryFilter
+			)
+	);
+
+	const preview = $derived(filtered.slice(0, PREVIEW_LIMIT));
+
+	const allRead = $derived(filtered.every((n) => n.read));
+
+	const toggleRead = (id: number, read: boolean) => {
+		overrides[id] = read;
+	};
+
+	const markAll = (read: boolean) => {
+		for (const n of filtered) overrides[n.id] = read;
+	};
+
+	// the popover survives a client-side navigation unless something closes it
+	const dismiss = (event: MouseEvent & { currentTarget: HTMLAnchorElement }) => {
+		const popover = event.currentTarget.closest("[popover]");
+		if (popover instanceof HTMLElement) popover.hidePopover();
+	};
+
+	const viewAll = $derived(
+		resolve(
+			(categoryFilter === "all"
+				? `/notifications?read=${readFilter}`
+				: `/notifications?read=${readFilter}&category=${categoryFilter}`) as "/"
+		)
+	);
+</script>
+
+{#snippet count()}
+	{#if unreadCount > 0}
+		<span
+			class="pointer-events-none absolute top-0.5 right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-background-info-emphasis px-1 typography-paragraph-mini text-foreground-on-emphasis"
+			aria-hidden="true"
+		>
+			{badge}
+		</span>
+	{/if}
+{/snippet}
+
+<!-- the popover needs the room a phone does not have, so mobile goes to the page -->
+<div class="relative flex md:hidden">
+	<Button
+		variant="ghost"
+		size="small"
+		href={resolve("/notifications")}
+		icon={Bell}
+		aria-label="Notifications, {unreadCount} unread"
+	/>
+	{@render count()}
+</div>
+
+<div class="relative hidden md:flex">
+	<Dropdown
+		id="notifications-menu"
+		group="topbar"
+		variant="button"
+		buttonVariant="ghost"
+		size="small"
+		align="right"
+		label="Notifications, {unreadCount} unread"
+		menuClass="w-[36rem]"
+	>
+		{#snippet trigger()}
+			<Bell class="size-4" aria-hidden="true" />
+		{/snippet}
+
+		<div class="p-2">
+			<NotificationToolbar
+				{readFilter}
+				{categoryFilter}
+				{allRead}
+				preferences={false}
+				onReadFilter={(filter) => (readFilter = filter)}
+				onCategoryFilter={(filter) => (categoryFilter = filter)}
+				onMarkAll={markAll}
+			/>
+		</div>
+
+		<NotificationList
+			notifications={preview}
+			{readFilter}
+			border={false}
+			grouped={false}
+			onToggleRead={toggleRead}
+		/>
+
+		<a
+			href={viewAll}
+			onclick={dismiss}
+			class="flex items-center justify-end gap-1 p-2 typography-paragraph-small text-foreground-muted no-underline transition-colors hover:bg-background-subtle hover:text-foreground-default hover:no-underline md:px-4"
+		>
+			View all
+			<ArrowRight class="size-4" aria-hidden="true" />
+		</a>
+	</Dropdown>
+
+	{@render count()}
+</div>
diff --git a/web/src/lib/components/notifications/NotificationItem.svelte b/web/src/lib/components/notifications/NotificationItem.svelte
index 6954b05f4..6bb0005a4 100644
--- a/web/src/lib/components/notifications/NotificationItem.svelte
+++ b/web/src/lib/components/notifications/NotificationItem.svelte
@@ -13,7 +13,7 @@
 			target: "text-foreground-default",
 			meta: "relative row-start-1 flex items-center justify-end",
 			time: "typography-paragraph-small whitespace-nowrap text-foreground-subtle",
-			toggle: "absolute inset-0 hidden items-center justify-end text-foreground-placeholder hover:text-foreground-muted md:group-hover/notification:flex hover:cursor-pointer",
+			toggle: "absolute inset-0 hidden items-center justify-end text-foreground-placeholder hover:cursor-pointer hover:text-foreground-muted md:group-hover/notification:flex",
 			number: "col-start-1 row-start-2 text-left typography-paragraph-small text-foreground-muted",
 			title: "col-start-2 row-start-2 truncate typography-paragraph-small text-foreground-muted"
 		},
@@ -65,9 +65,17 @@
 		event.stopPropagation();
 		onToggleRead?.(notification.id, !notification.read);
 	};
+
+	// client-side navigation leaves a popover open, so a row inside the topbar
+	// dropdown has to dismiss it on the way out
+	const open = (event: MouseEvent & { currentTarget: HTMLAnchorElement }) => {
+		onToggleRead?.(notification.id, true);
+		const popover = event.currentTarget.closest("[popover]");
+		if (popover instanceof HTMLElement) popover.hidePopover();
+	};
 </script>
 
-<a {href} class={style.root()} onclick={() => onToggleRead?.(notification.id, true)}>
+<a {href} class={style.root()} onclick={open}>
 	<Icon class={style.icon({ class: notificationTone(notification.type) })} aria-hidden="true" />
 
 	<div class={style.header()}>
diff --git a/web/src/lib/components/notifications/NotificationList.svelte b/web/src/lib/components/notifications/NotificationList.svelte
index a5625ed56..b63a92d59 100644
--- a/web/src/lib/components/notifications/NotificationList.svelte
+++ b/web/src/lib/components/notifications/NotificationList.svelte
@@ -3,7 +3,7 @@
 	import Inbox from "$icon/inbox";
 	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import NotificationItem from "./NotificationItem.svelte";
-	import { groupNotificationsByDate, isEmpty } from "./notification";
+	import { groupNotificationsByDate } from "./notification";
 	import { formatCount } from "$lib/format";
 	import type { NotificationSummary, ReadFilter } from "./types";
 
@@ -12,6 +12,10 @@
 		title?: string;
 		unreadCount?: number;
 		readFilter?: ReadFilter;
+		// the dropdown draws its own frame around the list, and a five-row preview
+		// is too short for the date headings to earn their space
+		border?: boolean;
+		grouped?: boolean;
 		onToggleRead?: (id: number, read: boolean) => void;
 	}
 
@@ -20,17 +24,23 @@
 		title,
 		unreadCount = 0,
 		readFilter = "inbox",
+		border = true,
+		grouped = true,
 		onToggleRead
 	}: Props = $props();
 
 	const groups = $derived(groupNotificationsByDate(notifications));
-	const empty = $derived(isEmpty(groups));
+	const empty = $derived(notifications.length === 0);
 
-	const sections = $derived([
-		{ label: "Today", items: groups.today },
-		{ label: "This week", items: groups.thisWeek },
-		{ label: "Older", items: groups.older }
-	]);
+	const sections = $derived(
+		grouped
+			? [
+					{ label: "Today", items: groups.today },
+					{ label: "This week", items: groups.thisWeek },
+					{ label: "Older", items: groups.older }
+				]
+			: [{ label: "", items: notifications }]
+	);
 </script>
 
 <!--
@@ -39,7 +49,9 @@
 	one number in its own row.
 -->
 <div
-	class="grid h-fit grid-cols-[auto_1fr_auto] content-start gap-x-4 divide-y divide-border-default overflow-hidden rounded-sm border border-border-default"
+	class="grid h-fit grid-cols-[auto_1fr_auto] content-start gap-x-4 divide-y divide-border-default overflow-hidden {border
+		? 'rounded-sm border border-border-default'
+		: ''}"
 >
 	{#if title || unreadCount > 0}
 		<div
@@ -70,11 +82,13 @@
 	{:else}
 		{#each sections as section (section.label)}
 			{#if section.items.length > 0}
-				<div
-					class="col-span-full bg-background-subtle p-2 typography-paragraph-small text-foreground-muted md:px-4"
-				>
-					{section.label}
-				</div>
+				{#if section.label}
+					<div
+						class="col-span-full bg-background-subtle p-2 typography-paragraph-small text-foreground-muted md:px-4"
+					>
+						{section.label}
+					</div>
+				{/if}
 				{#each section.items as notification (notification.id)}
 					<NotificationItem {notification} {onToggleRead} />
 				{/each}
diff --git a/web/src/lib/components/notifications/NotificationToolbar.svelte b/web/src/lib/components/notifications/NotificationToolbar.svelte
index e7ba8d905..041d492e8 100644
--- a/web/src/lib/components/notifications/NotificationToolbar.svelte
+++ b/web/src/lib/components/notifications/NotificationToolbar.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
+	import type { Component } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
 	import CheckCheck from "$icon/check-check";
 	import Cog from "$icon/cog";
 	import Glasses from "$icon/glasses";
@@ -7,37 +9,60 @@
 	import Mail from "$icon/mail";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
-	import type { ReadFilter } from "./types";
+	import type { CategoryFilter, ReadFilter } from "./types";
 
 	interface Props {
 		readFilter?: ReadFilter;
+		categoryFilter?: CategoryFilter;
 		// nothing left to read, so the button offers the opposite action
 		allRead?: boolean;
+		preferences?: boolean;
+		// the page navigates between filters, the dropdown swaps them in place
+		onReadFilter?: (filter: ReadFilter) => void;
+		onCategoryFilter?: (filter: CategoryFilter) => void;
 		onMarkAll?: (read: boolean) => void;
 	}
 
-	let { readFilter = "inbox", allRead = false, onMarkAll }: Props = $props();
+	let {
+		readFilter = "inbox",
+		categoryFilter = "all",
+		allRead = false,
+		preferences = true,
+		onReadFilter,
+		onCategoryFilter,
+		onMarkAll
+	}: Props = $props();
+
+	const pageQuery = (read: ReadFilter, category: CategoryFilter) =>
+		category === "all" ? `read=${read}` : `read=${read}&category=${category}`;
+
+	const pageHref = (read: ReadFilter, category: CategoryFilter) =>
+		resolve(`/notifications?${pageQuery(read, category)}` as "/");
+
+	const categories: CategoryFilter[] = ["all", "work", "social"];
 </script>
 
-<div class="flex items-center justify-between gap-4">
-	<div class="flex items-center gap-2">
+{#snippet readSegment(
+	filter: ReadFilter,
+	label: string,
+	icon: Component<SvelteHTMLElements["svg"]>
+)}
+	<Button
+		{...segmentProps(readFilter === filter)}
+		size="small"
+		{icon}
+		href={onReadFilter ? undefined : pageHref(filter, categoryFilter)}
+		onclick={onReadFilter ? () => onReadFilter(filter) : undefined}
+	>
+		{label}
+	</Button>
+{/snippet}
+
+<div class="flex flex-wrap items-center justify-between gap-2">
+	<div class="flex flex-wrap items-center gap-2">
 		<ButtonGroup>
-			<Button
-				href={resolve("/notifications?read=inbox" as "/")}
-				{...segmentProps(readFilter === "inbox")}
-				size="small"
-				icon={Inbox}
-			>
-				Inbox
-			</Button>
-			<Button
-				href={resolve("/notifications?read=unread" as "/")}
-				{...segmentProps(readFilter === "unread")}
-				size="small"
-				icon={Glasses}
-			>
-				Unread
-			</Button>
+			{@render readSegment("inbox", "Inbox", Inbox)}
+			{@render readSegment("unread", "Unread", Glasses)}
 		</ButtonGroup>
 
 		<Button
@@ -52,12 +77,30 @@
 		</Button>
 	</div>
 
-	<Button
-		variant="ghost"
-		size="small"
-		icon={Cog}
-		href={resolve("/settings/notifications" as "/")}
-	>
-		<span class="hidden md:inline">Preferences</span>
-	</Button>
+	{#if onCategoryFilter}
+		<ButtonGroup>
+			{#each categories as category (category)}
+				{@const segment = segmentProps(categoryFilter === category)}
+				<Button
+					{...segment}
+					size="small"
+					class={[segment.class, "capitalize"].filter(Boolean).join(" ")}
+					onclick={() => onCategoryFilter(category)}
+				>
+					{category}
+				</Button>
+			{/each}
+		</ButtonGroup>
+	{/if}
+
+	{#if preferences}
+		<Button
+			variant="ghost"
+			size="small"
+			icon={Cog}
+			href={resolve("/settings/notifications" as "/")}
+		>
+			<span class="hidden md:inline">Preferences</span>
+		</Button>
+	{/if}
 </div>
diff --git a/web/src/lib/components/notifications/types.ts b/web/src/lib/components/notifications/types.ts
index 74ed42853..942f82e3b 100644
--- a/web/src/lib/components/notifications/types.ts
+++ b/web/src/lib/components/notifications/types.ts
@@ -22,6 +22,8 @@ export type NotificationType =
 
 export type NotificationCategory = "work" | "social";
 
+export type CategoryFilter = NotificationCategory | "all";
+
 export type ReadFilter = "inbox" | "unread";
 
 export interface NotificationActor {
diff --git a/web/src/lib/components/shell/Topbar.svelte b/web/src/lib/components/shell/Topbar.svelte
index ca0dd0173..a0959dd6c 100644
--- a/web/src/lib/components/shell/Topbar.svelte
+++ b/web/src/lib/components/shell/Topbar.svelte
@@ -16,8 +16,7 @@
 			identity: "flex items-center gap-1",
 			ball: "flex size-8 items-center justify-center rounded-full border border-border-default bg-background-inset text-foreground-placeholder md:size-5",
 			bar: "hidden h-4 w-24 rounded-sm bg-background-inset md:block",
-			switchHeader:
-				"border-b-0 px-2 py-1.5 typography-paragraph-small text-foreground-muted",
+			switchHeader: "border-b-0 px-2 py-1.5 typography-paragraph-small text-foreground-muted",
 			addBall:
 				"flex size-5.25 shrink-0 items-center justify-center rounded-full bg-background-muted text-foreground-default"
 		},
@@ -41,7 +40,6 @@
 	import Dropdown from "../ui/Dropdown.svelte";
 	import DropdownItem from "../ui/DropdownItem.svelte";
 	import ArrowRight from "$icon/arrow-right";
-	import Bell from "$icon/bell";
 	import BookMarked from "$icon/book-marked";
 	import BookPlus from "$icon/book-plus";
 	import Cog from "$icon/cog";
@@ -54,6 +52,7 @@
 	import Logo from "../ui/Logo.svelte";
 	import User from "../ui/User.svelte";
 	import TopbarSearch from "./TopbarSearch.svelte";
+	import NotificationBell from "../notifications/NotificationBell.svelte";
 	import type { AuthAccount, CurrentUser } from "$lib/auth.svelte";
 	import Separator from "../ui/Separator.svelte";
 
@@ -140,14 +139,7 @@
 					</div>
 
 					<div class={style.action({ class: "order-2 md:order-4" })}>
-						<Button
-							variant="ghost"
-							href={appPath("/notifications")}
-							icon={Bell}
-							size="small"
-							aria-hidden="true"
-							aria-label="Notifications"
-						/>
+						<NotificationBell />
 					</div>
 
 					<div class="order-3 md:hidden">
@@ -188,10 +180,7 @@
 								<div class={style.switchHeader()}>Switch account</div>
 								{#each others as account (account.did)}
 									<DropdownItem onclick={() => onSwitchAccount?.(account.did)}>
-										<User
-											did={account.did}
-											handle={account.handle}
-										/>
+										<User did={account.did} handle={account.handle} />
 									</DropdownItem>
 								{/each}
 							{/if}