diff --git a/.agents/skills/databuddy-internal/SKILL.md b/.agents/skills/databuddy-internal/SKILL.md
index 0d63c6b03..f9ee0f53e 100644
--- a/.agents/skills/databuddy-internal/SKILL.md
+++ b/.agents/skills/databuddy-internal/SKILL.md
@@ -132,6 +132,7 @@ Read [codebase-map.md](./references/codebase-map.md) when you need deeper routin
 ### Dashboard work
 
 - Start in `apps/dashboard`
+- Organization settings should match `organizations/components/general-settings.tsx`: the same `max-w-2xl` column, shared `Card` headers/content, compact fields, and `TopBar.Actions` for Save. Compare actual neighboring pages visually before claiming design consistency; shared inputs alone are not enough.
 - The Feature Flags list is a dense data table; keep flag identity metadata clean and place activity telemetry in a dedicated labeled column with its accuracy caveat in the Activity header tooltip.
 - Keep large page-owned settings sheets and dialogs in adjacent feature files; route components should own page data and layout rather than embedding unrelated form lifecycles.
 - For dashboard navigation audits, check all route surfaces: `components/layout/navigation/navigation-config.tsx`, `components/ui/command-search.tsx`, and local `PageNavigation` layouts under `app/**/layout.tsx` before calling a page orphaned.
diff --git a/apps/dashboard/app/(main)/organizations/components/business-context-editor.tsx b/apps/dashboard/app/(main)/organizations/components/business-context-editor.tsx
index 18e9670b2..756341605 100644
--- a/apps/dashboard/app/(main)/organizations/components/business-context-editor.tsx
+++ b/apps/dashboard/app/(main)/organizations/components/business-context-editor.tsx
@@ -6,10 +6,17 @@ import {
 	type BusinessContextSettings,
 	businessContextIsGenerating,
 } from "@databuddy/shared/organization-business-context";
-import { Button, Field, Textarea, dayjs } from "@databuddy/ui";
+import { Button, Card, Field, Textarea, dayjs } from "@databuddy/ui";
 import { Dialog, DropdownMenu } from "@databuddy/ui/client";
-import { CaretDownIcon, WandSparkleIcon } from "@databuddy/ui/icons";
+import {
+	ArrowSquareOutIcon,
+	CaretDownIcon,
+	FileTextIcon,
+	FloppyDiskIcon,
+	WandSparkleIcon,
+} from "@databuddy/ui/icons";
 import { useEffect, useRef, useState } from "react";
+import { TopBar } from "@/components/layout/top-bar";
 
 interface EditableBrief {
 	content: string;
@@ -35,21 +42,40 @@ function Sources({ sources }: { sources: BusinessBrief["sources"] }) {
 		return null;
 	}
 	return (
-		<div className="flex flex-wrap gap-x-3 gap-y-1 text-xs">
-			<span className="text-muted-foreground">Sources</span>
-			{links.map(({ url, title }) => (
-				<a
-					className="max-w-full truncate text-muted-foreground underline decoration-border underline-offset-4 hover:text-foreground"
-					href={url}
-					key={url}
-					rel="noopener noreferrer"
-					target="_blank"
-					title={url}
-				>
-					{title || new URL(url).hostname}
-				</a>
-			))}
-		</div>
+		<Card>
+			<Card.Header>
+				<Card.Title>Sources</Card.Title>
+				<Card.Description>Pages used to generate this brief</Card.Description>
+			</Card.Header>
+			<Card.Content className="divide-y p-0">
+				{links.map(({ url, title }) => {
+					const page = new URL(url);
+					return (
+						<a
+							aria-label={title || page.hostname}
+							className="group grid grid-cols-[auto_1fr_auto] items-center gap-3 px-5 py-3 hover:bg-interactive-hover"
+							href={url}
+							key={url}
+							rel="noopener noreferrer"
+							target="_blank"
+							title={url}
+						>
+							<FileTextIcon className="size-4 text-muted-foreground" />
+							<div className="min-w-0">
+								<p className="truncate font-medium text-foreground text-xs">
+									{title || page.hostname}
+								</p>
+								<p className="truncate text-muted-foreground text-xs">
+									{page.hostname}
+									{page.pathname === "/" ? "" : page.pathname}
+								</p>
+							</div>
+							<ArrowSquareOutIcon className="size-3.5 text-muted-foreground/40 group-hover:text-foreground" />
+						</a>
+					);
+				})}
+			</Card.Content>
+		</Card>
 	);
 }
 
@@ -68,6 +94,7 @@ export function BusinessContextEditor({
 	const [notice, setNotice] = useState("");
 	const [review, setReview] = useState<"generation" | "conflict" | null>(null);
 	const editorRef = useRef<HTMLTextAreaElement>(null);
+	const savingRef = useRef(false);
 	const revision = profile?.revision ?? 0;
 	const content = draft?.content ?? profile?.content ?? "";
 	const generationWebsite = websites.find(
@@ -144,9 +171,10 @@ export function BusinessContextEditor({
 	}
 
 	async function save() {
-		if (saveDisabled || !draft) {
+		if (saveDisabled || !draft || savingRef.current) {
 			return;
 		}
+		savingRef.current = true;
 		setIsSaving(true);
 		setError(undefined);
 		setNotice("");
@@ -166,6 +194,7 @@ export function BusinessContextEditor({
 					: "Couldn't save the brief. Your edits are still here."
 			);
 		} finally {
+			savingRef.current = false;
 			setIsSaving(false);
 		}
 	}
@@ -191,211 +220,222 @@ export function BusinessContextEditor({
 	}
 
 	return (
-		<div className="mx-auto max-w-3xl space-y-5 p-5">
-			<div className="space-y-1.5">
-				<h2 className="font-semibold text-foreground text-sm">
-					Your business, in your words
-				</h2>
-				<p className="text-muted-foreground text-sm leading-relaxed">
-					Give your agent the context behind your numbers: what you sell, who
-					you serve, and what success looks like.
-				</p>
-			</div>
-			{canEdit && (
-				<div className="flex flex-wrap items-center justify-between gap-3">
-					{websites.length > 1 ? (
-						<DropdownMenu>
-							<DropdownMenu.Trigger
-								render={
-									<Button
-										disabled={generating || isSaving}
-										size="sm"
-										variant="secondary"
-									/>
-								}
-								aria-label={`Source website: ${selectedWebsite?.name || selectedWebsite?.domain}`}
-							>
-								<span className="max-w-48 truncate">
-									{selectedWebsite?.name || selectedWebsite?.domain}
-								</span>
-								<CaretDownIcon className="size-3 shrink-0" />
-							</DropdownMenu.Trigger>
-							<DropdownMenu.Content align="start">
-								<DropdownMenu.Group>
-									<DropdownMenu.GroupLabel>
-										Generate from website
-									</DropdownMenu.GroupLabel>
-									<DropdownMenu.RadioGroup
-										onValueChange={setWebsiteId}
-										value={selectedWebsite?.id}
-									>
-										{websites.map((site) => (
-											<DropdownMenu.RadioItem key={site.id} value={site.id}>
-												{site.name || site.domain}
-											</DropdownMenu.RadioItem>
-										))}
-									</DropdownMenu.RadioGroup>
-								</DropdownMenu.Group>
-							</DropdownMenu.Content>
-						</DropdownMenu>
-					) : (
-						<p className="text-muted-foreground text-xs">
-							{selectedWebsite
-								? `From ${selectedWebsite.domain}`
-								: "Add a website to generate a brief, or write your own below."}
-						</p>
-					)}
-					{selectedWebsite && (
-						<Button
-							disabled={generating || isSaving}
-							onClick={generate}
-							size="sm"
-							variant={dirty ? "secondary" : "primary"}
-						>
-							<WandSparkleIcon className="size-4 shrink-0" />
-							{generating
-								? "Generating draft…"
-								: content.trim() || profile
-									? "Regenerate with AI"
-									: "Generate with AI"}
-						</Button>
-					)}
-				</div>
-			)}
-			<div
-				aria-live="polite"
-				className="space-y-2 text-muted-foreground text-xs"
-			>
-				{generating && (
-					<p>
-						{canEdit
-							? "Reading your website and preparing a draft. You can keep writing."
-							: "An updated brief is being prepared."}
-					</p>
-				)}
-				{pendingDraft && canEdit && (
-					<div className="flex flex-wrap items-center justify-between gap-2">
-						<p>An AI draft is ready. Your current text has been kept.</p>
-						<Button
-							disabled={isSaving}
-							onClick={() => setReview("generation")}
-							size="sm"
-							variant="secondary"
-						>
-							Review AI draft
-						</Button>
-					</div>
-				)}
-				{generation?.status === "failed" && canEdit && (
-					<p role="alert">
-						{generation.error ||
-							"AI couldn't finish this draft. Try generating again, or keep editing."}
-					</p>
-				)}
-				{notice && <p>{notice}</p>}
-			</div>
-			<Field error={tooLong}>
-				<Field.Label>Business brief</Field.Label>
-				<Field.Description>
-					{canEdit
-						? "Edit anything. Your saved brief stays in use until you save changes."
-						: "This is the context your agent uses. Organization admins can update it."}
-				</Field.Description>
-				<Textarea
-					className="mt-2 px-4 py-4 text-sm leading-7"
-					minRows={14}
-					maxRows={32}
-					onChange={(event) => {
-						setDraft({
-							...(draft ?? { revision }),
-							content: event.target.value,
-						});
-						setNotice("");
-					}}
-					placeholder={
-						canEdit
-							? "What does your business do? Who are your customers? How do you make money?\n\nDescribe the customer journey, your priorities, and anything the agent should know when interpreting your analytics."
-							: "No business brief has been saved yet."
-					}
-					readOnly={!canEdit || isSaving}
-					ref={editorRef}
-					value={content}
-				/>
-				{tooLong && (
-					<Field.Error>
-						Keep the brief under {BUSINESS_CONTEXT_LIMIT.toLocaleString()}{" "}
-						characters ({content.trim().length.toLocaleString()} used).
-					</Field.Error>
-				)}
-			</Field>
-			{conflict && canEdit && (
-				<div
-					className="flex flex-wrap items-center justify-between gap-2"
-					role="alert"
-				>
-					<p className="text-muted-foreground text-xs">
-						A newer brief was saved. Review it before saving your edits.
-					</p>
+		<div className="space-y-5">
+			{canEdit && (dirty || draft) && (
+				<TopBar.Actions>
 					<Button
-						onClick={() => setReview("conflict")}
+						aria-label="Discard changes"
+						disabled={isSaving}
+						onClick={discard}
 						size="sm"
-						variant="secondary"
+						variant="ghost"
 					>
-						Review update
+						<span>
+							Discard<span className="hidden sm:inline"> changes</span>
+						</span>
 					</Button>
-				</div>
-			)}
-			{error && (
-				<p className="text-destructive text-xs" role="alert">
-					{error}
-				</p>
-			)}
-			<div className="flex flex-wrap items-center justify-between gap-3 border-t pt-4">
-				<p className="text-muted-foreground text-xs">
-					{draftGeneration ? (
-						"AI draft · Not saved"
-					) : dirty ? (
-						"Unsaved changes"
-					) : profile ? (
-						<time
-							dateTime={profile.updatedAt}
-							title={dayjs(profile.updatedAt).format("MMM D, YYYY [at] h:mm A")}
-						>
-							Updated {dayjs(profile.updatedAt).fromNow()}
-						</time>
-					) : (
-						"No saved brief yet"
-					)}
-				</p>
-				{canEdit && (dirty || draft) && (
-					<div className="flex flex-wrap items-center gap-2">
+					{dirty && (
 						<Button
-							disabled={isSaving}
-							onClick={discard}
+							aria-label="Save changes"
+							disabled={saveDisabled}
+							loading={isSaving}
+							keyboard={{
+								display: "⌘S",
+								trigger: (event) =>
+									(event.metaKey || event.ctrlKey) &&
+									event.key.toLowerCase() === "s",
+								callback: save,
+							}}
+							onClick={save}
 							size="sm"
-							variant="ghost"
 						>
-							Discard changes
+							<FloppyDiskIcon className="hidden size-4 shrink-0 sm:block" />
+							<span>
+								Save<span className="hidden sm:inline"> changes</span>
+							</span>
 						</Button>
-						{dirty && (
+					)}
+				</TopBar.Actions>
+			)}
+			<Card>
+				<Card.Header>
+					<Card.Title>Business context</Card.Title>
+					<Card.Description>
+						What you do, who you serve, and what matters to your business
+					</Card.Description>
+				</Card.Header>
+				<Card.Content className="space-y-5">
+					{canEdit && (
+						<div className="flex flex-wrap items-center justify-between gap-3">
+							{websites.length > 1 ? (
+								<DropdownMenu>
+									<DropdownMenu.Trigger
+										render={
+											<Button
+												disabled={generating || isSaving}
+												size="sm"
+												variant="secondary"
+											/>
+										}
+										aria-label={`Source website: ${selectedWebsite?.name || selectedWebsite?.domain}`}
+									>
+										<span className="max-w-48 truncate">
+											{selectedWebsite?.name || selectedWebsite?.domain}
+										</span>
+										<CaretDownIcon className="size-3 shrink-0" />
+									</DropdownMenu.Trigger>
+									<DropdownMenu.Content align="start">
+										<DropdownMenu.Group>
+											<DropdownMenu.GroupLabel>
+												Generate from website
+											</DropdownMenu.GroupLabel>
+											<DropdownMenu.RadioGroup
+												onValueChange={setWebsiteId}
+												value={selectedWebsite?.id}
+											>
+												{websites.map((site) => (
+													<DropdownMenu.RadioItem key={site.id} value={site.id}>
+														{site.name || site.domain}
+													</DropdownMenu.RadioItem>
+												))}
+											</DropdownMenu.RadioGroup>
+										</DropdownMenu.Group>
+									</DropdownMenu.Content>
+								</DropdownMenu>
+							) : (
+								<p className="text-muted-foreground text-xs">
+									{selectedWebsite
+										? `From ${selectedWebsite.domain}`
+										: "Add a website to generate a brief, or write your own below."}
+								</p>
+							)}
+							{selectedWebsite && (
+								<Button
+									disabled={generating || isSaving}
+									onClick={generate}
+									size="sm"
+									variant="secondary"
+								>
+									<WandSparkleIcon className="size-4 shrink-0" />
+									{generating
+										? "Generating draft…"
+										: content.trim() || profile
+											? "Regenerate with AI"
+											: "Generate with AI"}
+								</Button>
+							)}
+						</div>
+					)}
+					<div
+						aria-live="polite"
+						className="space-y-2 text-muted-foreground text-xs"
+					>
+						{generating && (
+							<p>
+								{canEdit
+									? "Reading your website and preparing a draft. You can keep writing."
+									: "An updated brief is being prepared."}
+							</p>
+						)}
+						{pendingDraft && canEdit && (
+							<div className="flex flex-wrap items-center justify-between gap-2">
+								<p>An AI draft is ready. Your current text has been kept.</p>
+								<Button
+									disabled={isSaving}
+									onClick={() => setReview("generation")}
+									size="sm"
+									variant="secondary"
+								>
+									Review AI draft
+								</Button>
+							</div>
+						)}
+						{generation?.status === "failed" && canEdit && (
+							<p role="alert">
+								{generation.error ||
+									"AI couldn't finish this draft. Try generating again, or keep editing."}
+							</p>
+						)}
+						{notice && <p>{notice}</p>}
+					</div>
+					<Field error={tooLong}>
+						<Field.Label>Business brief</Field.Label>
+						<Field.Description>
+							{canEdit
+								? "Used by Databunny to interpret your analytics. Changes apply when saved."
+								: "Used by Databunny to interpret your analytics. Organization admins can update it."}
+						</Field.Description>
+						<Textarea
+							className="leading-6"
+							minRows={12}
+							maxRows={12}
+							onChange={(event) => {
+								setDraft({
+									...(draft ?? { revision }),
+									content: event.target.value,
+								});
+								setNotice("");
+							}}
+							placeholder={
+								canEdit
+									? "Describe your product, customers, business model, and priorities. Include what your key events mean and anything the agent should account for."
+									: "No business brief has been saved yet."
+							}
+							readOnly={!canEdit || isSaving}
+							ref={editorRef}
+							value={content}
+						/>
+						{tooLong && (
+							<Field.Error>
+								Keep the brief under {BUSINESS_CONTEXT_LIMIT.toLocaleString()}{" "}
+								characters ({content.trim().length.toLocaleString()} used).
+							</Field.Error>
+						)}
+					</Field>
+					{conflict && canEdit && (
+						<div
+							className="flex flex-wrap items-center justify-between gap-2"
+							role="alert"
+						>
+							<p className="text-muted-foreground text-xs">
+								A newer brief was saved. Review it before saving your edits.
+							</p>
 							<Button
-								disabled={saveDisabled}
-								keyboard={{
-									display: "⌘S",
-									trigger: (event) =>
-										(event.metaKey || event.ctrlKey) &&
-										event.key.toLowerCase() === "s",
-									callback: save,
-								}}
-								onClick={save}
+								onClick={() => setReview("conflict")}
 								size="sm"
+								variant="secondary"
 							>
-								{isSaving ? "Saving…" : "Save changes"}
+								Review update
 							</Button>
+						</div>
+					)}
+					{error && (
+						<p className="text-destructive text-xs" role="alert">
+							{error}
+						</p>
+					)}
+				</Card.Content>
+				<Card.Footer className="justify-start">
+					<p className="text-muted-foreground text-xs">
+						{draftGeneration ? (
+							"AI draft · Not saved"
+						) : dirty ? (
+							"Unsaved changes"
+						) : profile ? (
+							<time
+								dateTime={profile.updatedAt}
+								title={dayjs(profile.updatedAt).format(
+									"MMM D, YYYY [at] h:mm A"
+								)}
+							>
+								Updated {dayjs(profile.updatedAt).fromNow()}
+							</time>
+						) : (
+							"No saved brief yet"
 						)}
-					</div>
-				)}
-			</div>
+					</p>
+				</Card.Footer>
+			</Card>
 			<Sources
 				sources={draftGeneration?.draft?.sources ?? profile?.sources ?? []}
 			/>
diff --git a/apps/dashboard/app/(main)/organizations/components/business-context-settings.tsx b/apps/dashboard/app/(main)/organizations/components/business-context-settings.tsx
index 5ccfbd2a1..80c93bae3 100644
--- a/apps/dashboard/app/(main)/organizations/components/business-context-settings.tsx
+++ b/apps/dashboard/app/(main)/organizations/components/business-context-settings.tsx
@@ -1,22 +1,34 @@
 "use client";
 
 import { businessContextIsGenerating } from "@databuddy/shared/organization-business-context";
-import { Button, Skeleton } from "@databuddy/ui";
+import { Button, Card, Skeleton } from "@databuddy/ui";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { TopBar } from "@/components/layout/top-bar";
 import { orpc } from "@/lib/orpc";
 import { BusinessContextEditor } from "./business-context-editor";
 
+function BriefSkeleton() {
+	return (
+		<Card aria-label="Loading business context" role="status">
+			<Card.Header>
+				<Skeleton className="h-3.5 w-32" />
+				<Skeleton className="h-3 w-3/4" />
+			</Card.Header>
+			<Card.Content className="space-y-5">
+				<div className="flex items-center justify-between gap-3">
+					<Skeleton className="h-3 w-28" />
+					<Skeleton className="h-8 w-32" />
+				</div>
+				<Skeleton className="h-72 w-full" />
+			</Card.Content>
+		</Card>
+	);
+}
+
 export function BusinessContextSkeleton() {
 	return (
-		<div
-			aria-label="Loading business context"
-			className="mx-auto max-w-3xl space-y-5 p-5"
-			role="status"
-		>
-			<Skeleton className="h-5 w-36" />
-			<Skeleton className="h-4 w-3/4" />
-			<Skeleton className="h-96 w-full" />
+		<div className="mx-auto w-full max-w-2xl p-5">
+			<BriefSkeleton />
 		</div>
 	);
 }
@@ -41,66 +53,70 @@ export function BusinessContextSettings({
 	const generate = useMutation(orpc.businessContext.generate.mutationOptions());
 
 	return (
-		<>
+		<div className="flex h-full min-h-0 flex-col">
 			<TopBar.Breadcrumbs
 				items={[
 					{ label: "Settings", href: "/organizations/settings" },
 					{ label: "Business Context" },
 				]}
 			/>
-			{query.isPending && <BusinessContextSkeleton />}
-			{query.isError && (
-				<div
-					className="mx-auto flex max-w-3xl flex-wrap items-center justify-between gap-3 px-5 py-4"
-					role="alert"
-				>
-					<p className="text-muted-foreground text-sm">
-						{query.data
-							? "Couldn't refresh the brief. Your edits are still here."
-							: "Couldn't load the business brief."}
-					</p>
-					<Button
-						disabled={query.isFetching}
-						onClick={() => query.refetch()}
-						size="sm"
-						variant="secondary"
-					>
-						Try again
-					</Button>
+			<div className="flex-1 overflow-y-auto">
+				<div className="mx-auto max-w-2xl space-y-5 p-5">
+					{query.isPending && <BriefSkeleton />}
+					{query.isError && (
+						<div
+							className="flex flex-wrap items-center justify-between gap-3"
+							role="alert"
+						>
+							<p className="text-muted-foreground text-sm">
+								{query.data
+									? "Couldn't refresh the brief. Your edits are still here."
+									: "Couldn't load the business brief."}
+							</p>
+							<Button
+								disabled={query.isFetching}
+								onClick={() => query.refetch()}
+								size="sm"
+								variant="secondary"
+							>
+								Try again
+							</Button>
+						</div>
+					)}
+					{query.data && (
+						<BusinessContextEditor
+							settings={query.data}
+							onGenerate={async (websiteId) => {
+								const result = await generate.mutateAsync({
+									organizationId,
+									websiteId,
+								});
+								await queryClient.cancelQueries({
+									queryKey: queryOptions.queryKey,
+								});
+								queryClient.setQueryData(queryOptions.queryKey, result);
+							}}
+							onSave={async (draft) => {
+								try {
+									const result = await save.mutateAsync({
+										organizationId,
+										...draft,
+									});
+									await queryClient.cancelQueries({
+										queryKey: queryOptions.queryKey,
+									});
+									queryClient.setQueryData(queryOptions.queryKey, result);
+								} catch (error) {
+									await queryClient.invalidateQueries({
+										queryKey: queryOptions.queryKey,
+									});
+									throw error;
+								}
+							}}
+						/>
+					)}
 				</div>
-			)}
-			{query.data && (
-				<BusinessContextEditor
-					settings={query.data}
-					onGenerate={async (websiteId) => {
-						const result = await generate.mutateAsync({
-							organizationId,
-							websiteId,
-						});
-						await queryClient.cancelQueries({
-							queryKey: queryOptions.queryKey,
-						});
-						queryClient.setQueryData(queryOptions.queryKey, result);
-					}}
-					onSave={async (draft) => {
-						try {
-							const result = await save.mutateAsync({
-								organizationId,
-								...draft,
-							});
-							await queryClient.cancelQueries({
-								queryKey: queryOptions.queryKey,
-							});
-							queryClient.setQueryData(queryOptions.queryKey, result);
-						} catch (error) {
-							await queryClient.invalidateQueries({
-								queryKey: queryOptions.queryKey,
-							});
-							throw error;
-						}
-					}}
-				/>
-			)}
-		</>
+			</div>
+		</div>
 	);
 }
diff --git a/apps/dashboard/test/e2e/specs/regressions/business-context.spec.ts b/apps/dashboard/test/e2e/specs/regressions/business-context.spec.ts
index f6aa79960..32768df40 100644
--- a/apps/dashboard/test/e2e/specs/regressions/business-context.spec.ts
+++ b/apps/dashboard/test/e2e/specs/regressions/business-context.spec.ts
@@ -14,13 +14,20 @@ test("persists a manually edited business brief through the real API", {
 	await page.goto(path);
 	const editor = page.getByRole("textbox", { name: "Business brief" });
 	await expect(editor).toBeEditable();
+	const saveRequests: string[] = [];
+	page.on("request", (request) => {
+		if (request.url().includes("/rpc/businessContext/save")) {
+			saveRequests.push(request.url());
+		}
+	});
 	await editor.fill(brief);
 	const saved = page.waitForResponse((response) =>
 		response.url().includes("/rpc/businessContext/save")
 	);
-	await page.getByRole("button", { name: /^Save changes/ }).click();
+	await editor.press("ControlOrMeta+s");
 	expect((await saved).ok()).toBe(true);
 	await expect(page.getByText("Changes saved", { exact: true })).toBeVisible();
+	expect(saveRequests).toHaveLength(1);
 	await page.reload();
 	await expect(editor).toHaveValue(brief);
 	await expect(page.getByRole("button", { name: /^Save changes/ })).toHaveCount(