diff --git a/web/src/lib/api/moderation.ts b/web/src/lib/api/moderation.ts
new file mode 100644
index 000000000..a616d8762
--- /dev/null
+++ b/web/src/lib/api/moderation.ts
@@ -0,0 +1,67 @@
+import { ClientResponseError, ok } from "@atcute/client";
+import { mainSchema as createReportSchema } from "@atcute/atproto/types/moderation/createReport";
+import type * as ComAtprotoModerationCreateReport from "@atcute/atproto/types/moderation/createReport";
+import type * as ComAtprotoModerationDefs from "@atcute/atproto/types/moderation/defs";
+import type { AtprotoAudience, Cid, Did, ResourceUri } from "@atcute/lexicons/syntax";
+import type { OAuthUserAgent } from "@atcute/oauth-browser-client";
+import { createClient } from "$lib/auth/agent";
+
+export type ReasonType = ComAtprotoModerationDefs.ReasonType;
+export type ReportOutput = ComAtprotoModerationCreateReport.$output;
+
+type KnownOf<T> = T extends string ? (string extends T ? never : T) : never;
+export type KnownReasonType = KnownOf<ReasonType>;
+
+export type ReportSubject =
+	{ kind: "account"; did: string } | { kind: "record"; uri: string; cid: string };
+
+export interface ReportInput {
+	subject: ReportSubject;
+	reasonType: ReasonType;
+	reason?: string;
+}
+
+type SubjectRef = ComAtprotoModerationCreateReport.$input["subject"];
+
+const subjectRef = (subject: ReportSubject): SubjectRef =>
+	subject.kind === "account"
+		? { $type: "com.atproto.admin.defs#repoRef", did: subject.did as Did }
+		: {
+				$type: "com.atproto.repo.strongRef",
+				uri: subject.uri as ResourceUri,
+				cid: subject.cid as Cid
+			};
+
+export const createReport = async (
+	agent: OAuthUserAgent,
+	labelerDid: string,
+	{ subject, reasonType, reason }: ReportInput
+): Promise<ReportOutput> => {
+	const rpc = createClient(agent, `${labelerDid}#atproto_labeler` as AtprotoAudience);
+	return ok(
+		rpc.call(createReportSchema, {
+			input: {
+				reasonType,
+				reason: reason?.trim() || undefined,
+				subject: subjectRef(subject),
+				modTool: { name: "tangled-web" }
+			}
+		})
+	);
+};
+
+const isMissingScope = (cause: ClientResponseError): boolean => {
+	if (cause.status !== 401 && cause.status !== 403) return false;
+	const text = `${cause.error} ${cause.description ?? ""}`.toLowerCase();
+	return text.includes("scope") || text.includes("invalidtoken") || text.includes("permission");
+};
+
+export const reportErrorMessage = (cause: unknown): string => {
+	if (cause instanceof ClientResponseError) {
+		if (isMissingScope(cause)) {
+			return "Reporting was added after you signed in. Sign out and back in to enable it.";
+		}
+		return cause.description || cause.error || "Failed to send the report.";
+	}
+	return cause instanceof Error ? cause.message : "Failed to send the report.";
+};
diff --git a/web/src/lib/components/comment/CommentCard.svelte b/web/src/lib/components/comment/CommentCard.svelte
index e3c360084..37e464081 100644
--- a/web/src/lib/components/comment/CommentCard.svelte
+++ b/web/src/lib/components/comment/CommentCard.svelte
@@ -7,6 +7,7 @@
 	import { getAuth } from "$lib/auth.svelte";
 	import { type MarkupContext } from "$lib/markup";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import ReportMenu from "$lib/components/moderation/ReportMenu.svelte";
 	import ReactionPicker from "$lib/components/reaction/ReactionPicker.svelte";
 	import {
 		upsertViewerReaction,
@@ -122,6 +123,14 @@
 				>
 					<Trash2 class="size-3" />
 				</button>
+			{:else}
+				<ReportMenu
+					group="comment-actions"
+					subjectUri={comment.uri}
+					subjectCid={comment.cid}
+					authorDid={comment.authorDid}
+					authorHandle={comment.authorHandle}
+				/>
 			{/if}
 		</div>
 	{/if}
diff --git a/web/src/lib/components/moderation/ReportDialog.stories.svelte b/web/src/lib/components/moderation/ReportDialog.stories.svelte
new file mode 100644
index 000000000..6d1b48aab
--- /dev/null
+++ b/web/src/lib/components/moderation/ReportDialog.stories.svelte
@@ -0,0 +1,46 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { expect, userEvent, waitFor, within } from "storybook/test";
+	import ReportDialog from "./ReportDialog.svelte";
+
+	const { Story } = defineMeta({
+		title: "Moderation/ReportDialog",
+		component: ReportDialog,
+		tags: ["autodocs"],
+		parameters: { auth: true },
+		args: {
+			open: true,
+			labelerDid: "did:plc:labeler",
+			subjectLabel: "this comment",
+			subject: {
+				kind: "record" as const,
+				uri: "at://did:plc:bob/sh.tangled.feed.comment/aaa",
+				cid: "bafyreidfayvfuwqa7qlnopdjiqrxzs6blmoeu4rujcjtnci5beludirz2a"
+			}
+		}
+	});
+</script>
+
+<Story name="Record" />
+
+<Story
+	name="Account"
+	args={{
+		subject: { kind: "account", did: "did:plc:bob" },
+		subjectLabel: "@bob.pds.tngl.boltless.dev"
+	}}
+/>
+
+<Story
+	name="Failed submission"
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.selectOptions(canvas.getByLabelText(/reason/i), [
+			"tools.ozone.report.defs#reasonMisleadingSpam"
+		]);
+		await userEvent.click(canvas.getByRole("button", { name: /^report$/i }));
+		await waitFor(() =>
+			expect(canvas.getByRole("alert")).toHaveTextContent(/network request failed/i)
+		);
+	}}
+/>
diff --git a/web/src/lib/components/moderation/ReportDialog.svelte b/web/src/lib/components/moderation/ReportDialog.svelte
new file mode 100644
index 000000000..db0121b61
--- /dev/null
+++ b/web/src/lib/components/moderation/ReportDialog.svelte
@@ -0,0 +1,124 @@
+<script lang="ts">
+	import Check from "$icon/check";
+	import Flag from "$icon/flag";
+	import X from "$icon/x";
+	import { createAction } from "$lib/action.svelte";
+	import { createReport, reportErrorMessage, type ReportSubject } from "$lib/api/moderation";
+	import { getAuth } from "$lib/auth.svelte";
+	import type { Did } from "@atcute/lexicons/syntax";
+	import Button from "$lib/components/ui/Button.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import Field from "$lib/components/ui/Field.svelte";
+	import Modal from "$lib/components/ui/Modal.svelte";
+	import Select from "$lib/components/ui/Select.svelte";
+	import Textarea from "$lib/components/ui/Textarea.svelte";
+	import { REPORT_REASONS } from "./reportReasons";
+
+	interface Props {
+		open?: boolean;
+		subject: ReportSubject;
+		subjectLabel: string;
+		labelerDid: string;
+		reporterDid?: string;
+	}
+
+	let {
+		open = $bindable(false),
+		subject,
+		subjectLabel,
+		labelerDid,
+		reporterDid
+	}: Props = $props();
+
+	const auth = getAuth();
+
+	let reasonType = $state("");
+	let details = $state("");
+	let sent = $state(false);
+
+	$effect(() => {
+		if (!open) return;
+		reasonType = "";
+		details = "";
+		sent = false;
+	});
+
+	const submit = createAction(async () => {
+		const did = reporterDid ?? auth.currentDid;
+		if (!did || !reasonType) return;
+		const agent = await auth.agentFor(did as Did);
+		await createReport(agent, labelerDid, { subject, reasonType, reason: details });
+		sent = true;
+	}, reportErrorMessage);
+</script>
+
+<Modal
+	bind:open
+	title={sent ? "Report sent" : `Report ${subjectLabel}`}
+	description={sent
+		? "The moderation team will take it from here. Thanks for flagging it."
+		: "Reports go to Tangled's moderation service. They are not shared with the person you are reporting."}
+>
+	{#if !sent}
+		<Field label="Reason" required>
+			{#snippet children({ id })}
+				<Select
+					{id}
+					options={REPORT_REASONS}
+					bind:value={reasonType}
+					placeholder="Pick a reason"
+					disabled={submit.loading}
+				/>
+			{/snippet}
+		</Field>
+
+		<Field label="Details" subtitle="Optional, but it helps.">
+			{#snippet children({ id })}
+				<Textarea
+					{id}
+					bind:value={details}
+					size="small"
+					resizeable
+					maxlength={2000}
+					placeholder="Anything the moderators should know?"
+					disabled={submit.loading}
+				/>
+			{/snippet}
+		</Field>
+
+		<ErrorAlert label={submit.error} />
+	{/if}
+
+	{#snippet footer()}
+		{#if sent}
+			<Button
+				variant="default"
+				class="flex-1 gap-2"
+				icon={Check}
+				onclick={() => (open = false)}
+			>
+				Done
+			</Button>
+		{:else}
+			<Button
+				variant="default"
+				class="flex-1 gap-2"
+				icon={X}
+				disabled={submit.loading}
+				onclick={() => (open = false)}
+			>
+				Cancel
+			</Button>
+			<Button
+				variant="danger"
+				class="flex-1 gap-2"
+				icon={Flag}
+				loading={submit.loading}
+				disabled={!reasonType}
+				onclick={() => submit.run()}
+			>
+				Report
+			</Button>
+		{/if}
+	{/snippet}
+</Modal>
diff --git a/web/src/lib/components/moderation/ReportMenu.stories.svelte b/web/src/lib/components/moderation/ReportMenu.stories.svelte
new file mode 100644
index 000000000..87a2c0fe3
--- /dev/null
+++ b/web/src/lib/components/moderation/ReportMenu.stories.svelte
@@ -0,0 +1,26 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import ReportMenu from "./ReportMenu.svelte";
+
+	const { Story } = defineMeta({
+		title: "Moderation/ReportMenu",
+		component: ReportMenu,
+		tags: ["autodocs"],
+		parameters: { auth: true },
+		args: {
+			labelerDid: "did:plc:labeler",
+			subjectUri: "at://did:plc:bob/sh.tangled.feed.comment/aaa",
+			subjectCid: "bafyreidfayvfuwqa7qlnopdjiqrxzs6blmoeu4rujcjtnci5beludirz2a",
+			authorDid: "did:plc:bob",
+			authorHandle: "bob.pds.tngl.boltless.dev"
+		}
+	});
+</script>
+
+<Story name="Default" />
+
+<Story name="No record ref" args={{ subjectCid: undefined }} />
+
+<Story name="Own comment" args={{ authorDid: "did:plc:alice" }} />
+
+<Story name="No labeler" args={{ labelerDid: "" }} />
diff --git a/web/src/lib/components/moderation/ReportMenu.svelte b/web/src/lib/components/moderation/ReportMenu.svelte
new file mode 100644
index 000000000..bf485b232
--- /dev/null
+++ b/web/src/lib/components/moderation/ReportMenu.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { page } from "$app/state";
+	import Ellipsis from "$icon/ellipsis";
+	import Flag from "$icon/flag";
+	import UserX from "$icon/user-x";
+	import type { ReportSubject } from "$lib/api/moderation";
+	import { getAuth } from "$lib/auth.svelte";
+	import Dropdown from "$lib/components/ui/Dropdown.svelte";
+	import DropdownItem from "$lib/components/ui/DropdownItem.svelte";
+	import { tick } from "svelte";
+	import ReportDialog from "./ReportDialog.svelte";
+
+	interface Props {
+		subjectUri: string;
+		subjectCid?: string;
+		subjectNoun?: string;
+		authorDid: string;
+		authorHandle: string;
+		labelerDid?: string;
+		group?: string;
+	}
+
+	let {
+		subjectUri,
+		subjectCid,
+		subjectNoun = "comment",
+		authorDid,
+		authorHandle,
+		labelerDid,
+		group
+	}: Props = $props();
+
+	const auth = getAuth();
+	const labeler = $derived(
+		labelerDid ?? (page.data.publicConfig?.moderationServiceDid as string | undefined) ?? ""
+	);
+	const visible = $derived(
+		Boolean(labeler) && Boolean(auth?.currentDid) && !auth.hasAccount(authorDid)
+	);
+
+	let open = $state(false);
+	let subject = $state<ReportSubject | null>(null);
+	let subjectLabel = $state("");
+
+	const openWith = async (next: ReportSubject, label: string) => {
+		subject = next;
+		subjectLabel = label;
+		await tick();
+		open = true;
+	};
+</script>
+
+{#if visible}
+	<Dropdown
+		{group}
+		align="right"
+		label="More actions"
+		menuClass="w-48"
+		class="text-foreground-subtle hover:text-foreground-default"
+	>
+		{#snippet trigger()}
+			<Ellipsis class="size-3" />
+		{/snippet}
+		{#if subjectCid}
+			<DropdownItem
+				icon={Flag}
+				size="small"
+				onclick={() =>
+					openWith(
+						{ kind: "record", uri: subjectUri, cid: subjectCid },
+						`this ${subjectNoun}`
+					)}
+			>
+				Report {subjectNoun}
+			</DropdownItem>
+		{/if}
+		<DropdownItem
+			icon={UserX}
+			size="small"
+			onclick={() => openWith({ kind: "account", did: authorDid }, `@${authorHandle}`)}
+		>
+			Report user
+		</DropdownItem>
+	</Dropdown>
+
+	{#if subject}
+		<ReportDialog bind:open {subject} {subjectLabel} labelerDid={labeler} />
+	{/if}
+{/if}
diff --git a/web/src/lib/components/moderation/reportReasons.ts b/web/src/lib/components/moderation/reportReasons.ts
new file mode 100644
index 000000000..8148fe14a
--- /dev/null
+++ b/web/src/lib/components/moderation/reportReasons.ts
@@ -0,0 +1,60 @@
+import type { KnownReasonType } from "$lib/api/moderation";
+import type { SelectOption } from "$lib/components/ui/selectField";
+
+interface ReportReason extends SelectOption {
+	value: KnownReasonType;
+}
+
+export const REPORT_REASONS: ReportReason[] = [
+	{
+		value: "tools.ozone.report.defs#reasonMisleadingSpam",
+		label: "Spam",
+		group: "Unwanted content"
+	},
+	{
+		value: "tools.ozone.report.defs#reasonMisleadingScam",
+		label: "Scam or phishing",
+		group: "Unwanted content"
+	},
+	{
+		value: "tools.ozone.report.defs#reasonMisleadingImpersonation",
+		label: "Impersonation",
+		group: "Unwanted content"
+	},
+	{
+		value: "tools.ozone.report.defs#reasonRuleSiteSecurity",
+		label: "Malicious code or security abuse",
+		group: "Unwanted content"
+	},
+	{
+		value: "tools.ozone.report.defs#reasonHarassmentTargeted",
+		label: "Targeted harassment",
+		group: "Abuse"
+	},
+	{
+		value: "tools.ozone.report.defs#reasonHarassmentHateSpeech",
+		label: "Hate speech",
+		group: "Abuse"
+	},
+	{
+		value: "tools.ozone.report.defs#reasonViolenceThreats",
+		label: "Violent threats",
+		group: "Abuse"
+	},
+	{
+		value: "tools.ozone.report.defs#reasonSexualUnlabeled",
+		label: "Unlabeled sexual content",
+		group: "Abuse"
+	},
+	{
+		value: "tools.ozone.report.defs#reasonSelfHarmContent",
+		label: "Self-harm",
+		group: "Abuse"
+	},
+	{
+		value: "tools.ozone.report.defs#reasonRuleOther",
+		label: "Other rule violation",
+		group: "Other"
+	},
+	{ value: "tools.ozone.report.defs#reasonOther", label: "Something else", group: "Other" }
+];
diff --git a/web/src/lib/components/ui/Modal.stories.svelte b/web/src/lib/components/ui/Modal.stories.svelte
new file mode 100644
index 000000000..aba95cff4
--- /dev/null
+++ b/web/src/lib/components/ui/Modal.stories.svelte
@@ -0,0 +1,40 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Button from "./Button.svelte";
+	import Modal from "./Modal.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Modal",
+		component: Modal,
+		tags: ["autodocs"]
+	});
+</script>
+
+{#snippet body()}
+	<p class="typography-paragraph-small text-foreground-subtle">
+		Anything can go in here — a form, a confirmation, a summary.
+	</p>
+{/snippet}
+
+{#snippet actions()}
+	<Button variant="default" class="flex-1">Cancel</Button>
+	<Button variant="primary" class="flex-1">Confirm</Button>
+{/snippet}
+
+<Story name="Default" asChild>
+	<Modal open title="Delete this branch?" description="This cannot be undone." footer={actions}>
+		{@render body()}
+	</Modal>
+</Story>
+
+<Story name="Wide" asChild>
+	<Modal open size="wide" title="Wide panel" footer={actions}>
+		{@render body()}
+	</Modal>
+</Story>
+
+<Story name="Body only" asChild>
+	<Modal open>
+		{@render body()}
+	</Modal>
+</Story>
diff --git a/web/src/lib/components/ui/Modal.svelte b/web/src/lib/components/ui/Modal.svelte
new file mode 100644
index 000000000..c1c35c7e9
--- /dev/null
+++ b/web/src/lib/components/ui/Modal.svelte
@@ -0,0 +1,82 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const modal = tv({
+		slots: {
+			panel: "m-auto w-[95%] popover-transition space-y-4 rounded-lg border border-border-default bg-background-default p-4 text-foreground-default shadow-lg backdrop:bg-black/40",
+			title: "typography-paragraph-large font-semibold",
+			description: "typography-paragraph-small text-foreground-subtle",
+			footer: "flex gap-2"
+		},
+		variants: {
+			size: {
+				regular: { panel: "md:w-96" },
+				wide: { panel: "md:w-lg" }
+			}
+		},
+		defaultVariants: {
+			size: "regular"
+		}
+	});
+
+	export type ModalVariants = VariantProps<typeof modal>;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		open?: boolean;
+		title?: string;
+		description?: string;
+		size?: ModalVariants["size"];
+		class?: string;
+		children: Snippet;
+		footer?: Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		size = "regular",
+		class: className,
+		children,
+		footer
+	}: Props = $props();
+
+	const classes = $derived(modal({ size }));
+
+	let panel = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!panel) return;
+		const shown = panel.matches(":popover-open");
+		if (open && !shown) panel.showPopover();
+		else if (!open && shown) panel.hidePopover();
+	});
+
+	const onToggle = (event: ToggleEvent) => {
+		open = event.newState === "open";
+	};
+</script>
+
+<div
+	bind:this={panel}
+	popover="auto"
+	ontoggle={onToggle}
+	class={classes.panel({ class: className })}
+>
+	{#if title || description}
+		<div>
+			{#if title}<p class={classes.title()}>{title}</p>{/if}
+			{#if description}<p class={classes.description()}>{description}</p>{/if}
+		</div>
+	{/if}
+
+	{@render children()}
+
+	{#if footer}
+		<div class={classes.footer()}>{@render footer()}</div>
+	{/if}
+</div>