diff --git a/apps/mcp/src/widget/App.tsx b/apps/mcp/src/widget/App.tsx
index 52d16d691..0d9f552a1 100644
--- a/apps/mcp/src/widget/App.tsx
+++ b/apps/mcp/src/widget/App.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react"
+import { type ReactNode, useEffect } from "react"
 import type { ViewMessage } from "../shared/types"
 import { useApplyHostTheme } from "./hooks/useApplyHostTheme"
 import { useLog } from "./hooks/useLog"
@@ -25,15 +25,71 @@ export function App() {
 		}
 	}, [state, log])
 
-	if (state.kind === "loading") return <Loading />
-	if (state.kind === "error") return <ErrorView message={state.message} />
+	if (state.kind === "loading") {
+		return (
+			<WidgetShell>
+				<Loading />
+			</WidgetShell>
+		)
+	}
+	if (state.kind === "error") {
+		return (
+			<WidgetShell>
+				<ErrorView message={state.message} />
+			</WidgetShell>
+		)
+	}
 	if (state.kind === "raw") {
 		return (
-			<ErrorView message="Received unrecognized response from server. Try again." />
+			<WidgetShell>
+				<ErrorView message="Received unrecognized response from server. Try again." />
+			</WidgetShell>
 		)
 	}
 
-	return renderView(state.message, setView, setError)
+	const isGraphView = state.message.view === "graph"
+	return (
+		<WidgetShell immersive={isGraphView}>
+			{renderView(state.message, setView, setError)}
+		</WidgetShell>
+	)
+}
+
+export function WidgetShell({
+	children,
+	immersive = false,
+}: {
+	children: ReactNode
+	immersive?: boolean
+}) {
+	const shellClassName = immersive
+		? "mcp-widget-shell mcp-widget-shell-graph"
+		: "mcp-widget-shell"
+
+	return (
+		<div className={shellClassName}>
+			<div aria-hidden className="mcp-widget-glow" />
+			<header className="mcp-widget-brand">
+				<span aria-hidden className="mcp-widget-brand-mark">
+					<svg aria-hidden="true" viewBox="0 0 314 256">
+						<path
+							d="M313.728 100.982H197.297V0H159.68V109.567C159.68 121.205 164.284 132.381 172.466 140.615L267.535 236.283L294.134 209.517L223.917 138.858H313.75V101.004L313.728 100.982Z"
+							fill="currentColor"
+						/>
+						<path
+							d="M19.616 46.5043L89.8323 117.163H0V155.017H116.431V255.999H154.048V146.432C154.048 134.795 149.444 123.618 141.262 115.384L46.2144 19.7383L19.616 46.5043Z"
+							fill="currentColor"
+						/>
+					</svg>
+				</span>
+				<span className="mcp-widget-brand-copy">
+					<span className="mcp-widget-brand-name">supermemory</span>
+					<span className="mcp-widget-brand-mode">MCP</span>
+				</span>
+			</header>
+			<main className="mcp-widget-content">{children}</main>
+		</div>
+	)
 }
 
 function renderView(
diff --git a/apps/mcp/src/widget/components/PermissionBadge.tsx b/apps/mcp/src/widget/components/PermissionBadge.tsx
index ba8fc1abc..3ce84b9a4 100644
--- a/apps/mcp/src/widget/components/PermissionBadge.tsx
+++ b/apps/mcp/src/widget/components/PermissionBadge.tsx
@@ -1,5 +1,3 @@
-import { Badge } from "../design/ui"
-
 interface Props {
 	permission: string
 }
@@ -7,11 +5,11 @@ interface Props {
 export function PermissionBadge({ permission }: Props) {
 	const isWrite = permission === "write"
 	return (
-		<Badge
-			className="mt-2 self-start uppercase"
-			variant={isWrite ? "accent" : "neutral"}
+		<span
+			className="text-text-muted"
+			style={{ fontFamily: "var(--font-brand)" }}
 		>
-			{isWrite ? "read/write" : "read only"}
-		</Badge>
+			{isWrite ? "Read/write" : "Read only"}
+		</span>
 	)
 }
diff --git a/apps/mcp/src/widget/components/WorkspaceCard.tsx b/apps/mcp/src/widget/components/WorkspaceCard.tsx
index cd4122ef4..8af1697a6 100644
--- a/apps/mcp/src/widget/components/WorkspaceCard.tsx
+++ b/apps/mcp/src/widget/components/WorkspaceCard.tsx
@@ -1,6 +1,7 @@
 import type { ContainerTag, ContainerTagAccess } from "../../shared/types"
-import { Card, Stack } from "../design/ui"
-import { Check, Package } from "../lib/icons"
+import { Card } from "../design/ui"
+import { Check } from "../lib/icons"
+import { formatTagLabel } from "../lib/formatTag"
 import { PermissionBadge } from "./PermissionBadge"
 
 interface Props {
@@ -16,51 +17,52 @@ export function WorkspaceCard({
 	access,
 	onClick,
 }: Props) {
-	const name = containerTag.name || containerTag.containerTag
+	const name = containerTag.name || formatTagLabel(containerTag.containerTag)
 	return (
 		<Card
 			as="button"
-			className="w-full"
+			className="workspace-card w-full p-3"
 			onClick={() => onClick(containerTag.containerTag)}
 			variant={active ? "active" : "interactive"}
 		>
-			<Stack gap="sm">
-				<Stack align="center" direction="row" gap="sm" justify="between">
-					<span className="flex min-w-0 items-center gap-(--space-2)">
-						{containerTag.emoji ? (
-							<span aria-hidden className="text-base leading-none">
-								{containerTag.emoji}
-							</span>
-						) : (
-							<Package className="size-4 shrink-0 text-text-secondary" />
-						)}
+			<div className="workspace-card-inner">
+				<div className="workspace-card-main">
+					<div className="workspace-card-heading">
 						<span
-							className="truncate text-(length:--text-sm) font-semibold text-text-primary"
+							className="workspace-card-title truncate text-sm font-medium text-text-primary"
 							style={{ fontFamily: "var(--font-brand)" }}
 						>
 							{name}
 						</span>
-					</span>
-					{active ? <Check className="size-4 shrink-0 text-accent" /> : null}
-				</Stack>
-				<div className="truncate font-mono text-(length:--text-xs) text-text-muted">
-					{containerTag.containerTag}
+						{active ? (
+							<Check
+								aria-hidden
+								className="workspace-card-check size-3 shrink-0 text-accent"
+							/>
+						) : null}
+					</div>
+					{(containerTag.documentCount > 0 || containerTag.memoryCount > 0) && (
+						<div className="workspace-card-meta flex items-center gap-(--space-2) text-[11px] leading-normal text-text-muted">
+							<span>
+								{containerTag.documentCount} doc
+								{containerTag.documentCount === 1 ? "" : "s"}
+							</span>
+							<span aria-hidden className="opacity-40">
+								·
+							</span>
+							<span>
+								{containerTag.memoryCount}{" "}
+								{containerTag.memoryCount === 1 ? "memory" : "memories"}
+							</span>
+						</div>
+					)}
 				</div>
-				{(containerTag.documentCount > 0 || containerTag.memoryCount > 0) && (
-					<div className="flex items-center gap-(--space-3) text-(length:--text-xs) text-text-muted">
-						<span>
-							{containerTag.documentCount} doc
-							{containerTag.documentCount === 1 ? "" : "s"}
-						</span>
-						<span aria-hidden>·</span>
-						<span>
-							{containerTag.memoryCount} mem
-							{containerTag.memoryCount === 1 ? "" : "s"}
-						</span>
+				{access ? (
+					<div className="workspace-card-trailing">
+						<PermissionBadge permission={access.permission} />
 					</div>
-				)}
-				{access ? <PermissionBadge permission={access.permission} /> : null}
-			</Stack>
+				) : null}
+			</div>
 		</Card>
 	)
 }
diff --git a/apps/mcp/src/widget/design/globals.css b/apps/mcp/src/widget/design/globals.css
index f159f5e5b..fff43ab51 100644
--- a/apps/mcp/src/widget/design/globals.css
+++ b/apps/mcp/src/widget/design/globals.css
@@ -14,6 +14,9 @@
 	--color-bg-muted: var(--bg-muted);
 	--color-bg-elevated: var(--bg-elevated);
 	--color-bg-overlay: var(--bg-overlay);
+	--color-bg-panel: var(--bg-panel);
+	--color-bg-control: var(--bg-control);
+	--color-bg-control-hover: var(--bg-control-hover);
 
 	--color-border: var(--border);
 	--color-border-muted: var(--border-muted);
@@ -85,9 +88,10 @@
 	}
 
 	body {
-		background: var(--bg-primary);
+		background: var(--app-bg);
 		color: var(--text-primary);
 		font-family: var(--font-sans);
+		letter-spacing: -0.01em;
 		line-height: var(--leading-normal);
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
@@ -107,14 +111,518 @@
 	position: relative;
 }
 
+.mcp-widget-shell {
+	position: relative;
+	isolation: isolate;
+	min-height: 280px;
+	overflow: hidden;
+	background: var(--widget-shell-bg);
+	color: var(--text-primary);
+}
+
+.mcp-widget-shell-graph {
+	min-height: 420px;
+	background: var(--widget-shell-graph-bg);
+}
+
+.mcp-widget-shell-graph::before,
+.mcp-widget-shell-graph::after {
+	position: absolute;
+	inset: 0;
+	z-index: 0;
+	pointer-events: none;
+	content: "";
+}
+
+.mcp-widget-shell-graph::before {
+	background-image: radial-gradient(
+		circle at center,
+		rgba(105, 167, 240, 0.25) 1px,
+		transparent 1px
+	);
+	background-size: 32px 32px;
+	mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
+}
+
+.mcp-widget-shell-graph::after {
+	background:
+		radial-gradient(
+			ellipse at 50% 112%,
+			rgba(75, 160, 250, 0.42) 0%,
+			rgba(20, 16, 255, 0.3) 34%,
+			transparent 66%
+		),
+		linear-gradient(180deg, rgba(5, 8, 13, 0) 0%, rgba(5, 8, 13, 0.2) 100%);
+}
+
+.mcp-widget-glow {
+	position: absolute;
+	right: -16%;
+	bottom: -44%;
+	left: -16%;
+	z-index: -1;
+	height: 68%;
+	pointer-events: none;
+	background: radial-gradient(
+		ellipse at 50% 42%,
+		var(--widget-glow-inner) 0%,
+		var(--widget-glow-mid) 22%,
+		var(--widget-glow-outer) 46%,
+		transparent 74%
+	);
+	filter: blur(18px);
+	opacity: 0.82;
+}
+
+/* Studio-only visual variants. Production widgets do not set this attribute. */
+[data-widget-version="v1"] .mcp-widget-shell {
+	--brand-accent: var(--accent);
+	--brand-opacity: 0.86;
+	--widget-glow-inner: rgba(255, 255, 255, 0.22);
+	--widget-glow-mid: rgba(71, 168, 253, 0.3);
+	--widget-glow-outer: rgba(20, 16, 255, 0.18);
+	background:
+		linear-gradient(rgba(75, 160, 250, 0.045) 1px, transparent 1px),
+		linear-gradient(90deg, rgba(75, 160, 250, 0.045) 1px, transparent 1px),
+		radial-gradient(
+			circle at 50% 108%,
+			rgba(75, 160, 250, 0.16),
+			transparent 42%
+		),
+		var(--widget-shell-bg);
+	background-size:
+		36px 36px,
+		36px 36px,
+		100% 100%,
+		100% 100%;
+}
+
+[data-widget-version="v1"] .super-loader,
+[data-widget-version="v1"] .spinner {
+	color: var(--accent);
+}
+
+[data-widget-version="v1"] .spinner {
+	border-top-color: var(--accent);
+	box-shadow: 0 0 20px rgba(75, 160, 250, 0.42);
+}
+[data-widget-version="v2"] .mcp-widget-shell {
+	--brand-accent: var(--accent);
+	--brand-opacity: 1;
+	--widget-shell-bg: color-mix(
+		in srgb,
+		var(--widget-shell-bg) 86%,
+		var(--bg-muted)
+	);
+	--card-bg: color-mix(in srgb, var(--card-bg) 88%, var(--bg-muted));
+	--panel-bg: color-mix(in srgb, var(--panel-bg) 88%, var(--bg-muted));
+	--widget-glow-mid: color-mix(
+		in srgb,
+		var(--widget-glow-mid) 70%,
+		transparent
+	);
+	--widget-glow-outer: color-mix(
+		in srgb,
+		var(--widget-glow-outer) 70%,
+		transparent
+	);
+}
+
+[data-widget-version="v2"] .mcp-widget-shell-graph::before {
+	background-image:
+		linear-gradient(rgba(105, 167, 240, 0.12) 1px, transparent 1px),
+		linear-gradient(90deg, rgba(105, 167, 240, 0.12) 1px, transparent 1px);
+	background-size: 32px 32px;
+	mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
+}
+
+[data-theme="light"] [data-widget-version="v2"] .mcp-widget-shell-graph::before,
+:root:not([data-theme="dark"])
+	[data-widget-version="v2"]
+	.mcp-widget-shell-graph::before {
+	background-image:
+		linear-gradient(rgba(75, 160, 250, 0.045) 1px, transparent 1px),
+		linear-gradient(90deg, rgba(75, 160, 250, 0.045) 1px, transparent 1px);
+}
+
+[data-theme="light"] [data-widget-version="v2"] .mcp-widget-shell-graph::after,
+:root:not([data-theme="dark"])
+	[data-widget-version="v2"]
+	.mcp-widget-shell-graph::after {
+	content: none;
+}
+
+[data-theme="light"] [data-widget-version="v2"] .mcp-soft-button,
+:root:not([data-theme="dark"]) [data-widget-version="v2"] .mcp-soft-button {
+	background: var(--button-secondary-bg);
+	color: var(--button-secondary-text);
+	border: 1px solid var(--button-secondary-border);
+	box-shadow: var(--shadow-sm);
+}
+
+[data-theme="light"] [data-widget-version="v2"] .mcp-soft-button:hover,
+:root:not([data-theme="dark"])
+	[data-widget-version="v2"]
+	.mcp-soft-button:hover {
+	background: var(--button-secondary-hover);
+}
+
+/* Card/panel glow — hidden by default, activated by v3/v4. */
+.card-glow,
+.panel-glow {
+	display: none;
+}
+
+.mcp-panel {
+	position: relative;
+	overflow: hidden;
+}
+
+.mcp-panel > :not(.panel-glow) {
+	position: relative;
+	z-index: 1;
+}
+
+/* Workspace picker cards — grid layout (default). */
+.workspace-card {
+	min-height: 104px;
+}
+
+.workspace-card-inner {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	min-height: 56px;
+}
+
+.workspace-card-main {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-1);
+	min-width: 0;
+	padding-right: 72px;
+}
+
+.workspace-card-heading {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	min-width: 0;
+}
+
+.workspace-card-title {
+	flex: 1;
+	min-width: 0;
+}
+
+.workspace-card-trailing {
+	position: absolute;
+	top: 0;
+	right: 0;
+	font-size: 11px;
+	font-weight: 500;
+	line-height: 1;
+}
+
+/* v3 — Bold inner glow on cards/panels (web-app BgGrad-inspired), plain shell background. */
+[data-widget-version="v3"] .mcp-widget-shell {
+	--brand-accent: var(--accent);
+	--brand-opacity: 1;
+	background: var(--widget-shell-bg);
+}
+
+[data-widget-version="v3"] .mcp-widget-glow {
+	display: none;
+}
+
+[data-widget-version="v3"] .card-glow,
+[data-widget-version="v3"] .panel-glow {
+	display: block;
+	position: absolute;
+	inset: 0;
+	z-index: 0;
+	pointer-events: none;
+	background:
+		radial-gradient(
+			ellipse 80% 50% at 50% 100%,
+			rgba(20, 16, 255, 0.12) 0%,
+			rgba(0, 144, 255, 0.08) 30%,
+			transparent 70%
+		),
+		radial-gradient(
+			ellipse 60% 40% at 30% 90%,
+			rgba(71, 168, 253, 0.1) 0%,
+			transparent 60%
+		),
+		radial-gradient(
+			ellipse 60% 40% at 70% 90%,
+			rgba(75, 160, 250, 0.1) 0%,
+			transparent 60%
+		);
+}
+
+/* v4 — Fully refined for white/light + proper dark mode support. */
+[data-widget-version="v4"] .mcp-widget-shell {
+	--brand-accent: var(--accent);
+	--brand-opacity: 1;
+	display: flex;
+	flex-direction: column;
+	background: var(--widget-shell-bg);
+}
+
+[data-widget-version="v4"] .mcp-widget-glow {
+	display: none;
+}
+
+[data-theme="light"] [data-widget-version="v4"] .mcp-widget-shell,
+:root:not([data-theme="dark"]) [data-widget-version="v4"] .mcp-widget-shell {
+	--widget-shell-bg: #faf9f7;
+	--card-bg: #ffffff;
+	--card-border: rgba(0, 0, 0, 0.06);
+	--card-border-hover: rgba(0, 0, 0, 0.1);
+	--card-active-border: rgba(63, 126, 232, 0.32);
+	--card-active-bg: #fafcff;
+	--panel-bg: #ffffff;
+	--panel-border: rgba(0, 0, 0, 0.06);
+	--panel-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.03);
+	--bg-control: #fafafa;
+	--bg-control-hover: #f5f5f5;
+	--border-control: rgba(0, 0, 0, 0.08);
+	--text-secondary: #6b7280;
+	--text-muted: #9ca3af;
+}
+
+[data-theme="dark"] [data-widget-version="v4"] .mcp-widget-shell {
+	--widget-shell-bg: #111518;
+	--card-bg: #181d22;
+	--card-border: rgba(255, 255, 255, 0.06);
+	--card-border-hover: rgba(255, 255, 255, 0.1);
+	--card-active-border: rgba(106, 166, 248, 0.36);
+	--card-active-bg: #161c24;
+	--panel-bg: #181d22;
+	--panel-border: rgba(255, 255, 255, 0.06);
+	--panel-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 6px 16px rgba(0, 0, 0, 0.14);
+	--bg-control: #14191f;
+	--bg-control-hover: #1b222a;
+	--border-control: rgba(255, 255, 255, 0.08);
+	--text-secondary: #a0a8b4;
+	--text-muted: #6b7580;
+}
+
+[data-widget-version="v4"] .card-glow,
+[data-widget-version="v4"] .panel-glow {
+	display: block;
+	position: absolute;
+	inset: 0;
+	z-index: 0;
+	pointer-events: none;
+	background: radial-gradient(
+		ellipse 80% 50% at 50% 100%,
+		rgba(20, 16, 255, 0.07) 0%,
+		rgba(0, 144, 255, 0.04) 30%,
+		transparent 70%
+	);
+}
+
+/* v4 — Compact inline wordmark: logo + supermemory, no MCP subtitle. */
+[data-widget-version="v4"] .mcp-widget-brand {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	margin: var(--space-3) var(--page-header-px) 0;
+	padding-bottom: var(--space-3);
+	border-bottom: 1px solid var(--border-muted);
+	opacity: 1;
+}
+
+[data-widget-version="v4"] .mcp-widget-brand-mark {
+	width: 18px;
+	height: 18px;
+}
+
+[data-widget-version="v4"] .mcp-widget-brand-mark svg {
+	width: 15px;
+	height: 12px;
+}
+
+[data-widget-version="v4"] .mcp-widget-brand-copy {
+	flex-direction: row;
+	align-items: center;
+}
+
+[data-widget-version="v4"] .mcp-widget-brand-name {
+	font-family: var(--font-brand);
+	font-size: 13px;
+	font-weight: 600;
+	letter-spacing: -0.02em;
+	line-height: 1;
+}
+
+[data-widget-version="v4"] .mcp-widget-brand-mode {
+	display: none;
+}
+
+/* v4 — Vertically center loading in the shell below the header. */
+[data-widget-version="v4"] .mcp-widget-content:has(.mcp-widget-loading) {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+}
+
+[data-widget-version="v4"] .mcp-widget-loading {
+	flex: 1;
+	min-height: 180px;
+	padding: 0;
+}
+
+/* v4 — Workspace picker as compact list rows. */
+[data-widget-version="v4"] .workspace-picker-grid {
+	display: flex;
+	flex-direction: column;
+	gap: 0;
+	overflow: hidden;
+	border: 1px solid var(--card-border);
+	border-radius: var(--radius-lg);
+	background: var(--card-bg);
+}
+
+[data-widget-version="v4"] .workspace-card {
+	min-height: 0;
+	padding: var(--space-2) var(--space-3);
+	border: 0;
+	border-radius: 0;
+	background: transparent;
+	box-shadow: none;
+}
+
+[data-widget-version="v4"] .workspace-card:not(:last-child) {
+	border-bottom: 1px solid var(--card-border);
+}
+
+[data-widget-version="v4"] .workspace-card:hover {
+	background: var(--card-bg-hover);
+}
+
+[data-widget-version="v4"] .workspace-card .card-glow {
+	display: none;
+}
+
+[data-widget-version="v4"] .workspace-card-inner {
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--space-3);
+	height: auto;
+	min-height: 0;
+}
+
+[data-widget-version="v4"] .workspace-card-main {
+	flex: 1;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	align-items: center;
+	gap: var(--space-3);
+	min-width: 0;
+	padding-right: 0;
+	overflow: hidden;
+}
+
+[data-widget-version="v4"] .workspace-card-heading {
+	flex: 1;
+	min-width: 0;
+}
+
+[data-widget-version="v4"] .workspace-card-title {
+	min-width: 0;
+}
+
+[data-widget-version="v4"] .workspace-card-meta {
+	flex-shrink: 0;
+	white-space: nowrap;
+}
+
+[data-widget-version="v4"] .workspace-card-trailing {
+	position: static;
+	flex-shrink: 0;
+}
+.mcp-widget-shell-graph .mcp-widget-glow {
+	display: none;
+}
+
+.mcp-widget-brand {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-2);
+	position: relative;
+	z-index: 1;
+	margin: var(--space-4) var(--page-header-px) 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	box-shadow: none;
+	opacity: var(--brand-opacity);
+}
+
+.mcp-widget-brand-mark {
+	display: grid;
+	width: 20px;
+	height: 20px;
+	place-items: center;
+	color: var(--brand-accent);
+}
+
+.mcp-widget-brand-mark svg {
+	width: 16px;
+	height: 13px;
+}
+
+.mcp-widget-brand-copy {
+	display: flex;
+	min-width: 0;
+	flex-direction: column;
+	gap: 1px;
+}
+
+.mcp-widget-brand-name {
+	color: var(--text-primary);
+	font-size: 12px;
+	font-weight: 650;
+	line-height: 1;
+}
+
+.mcp-widget-brand-mode {
+	color: var(--text-muted);
+	font-size: 10px;
+	font-weight: 500;
+	line-height: 1.15;
+}
+
+.shadow-inside-out {
+	box-shadow:
+		inset 0 2px 4px rgba(0, 0, 0, 0.3),
+		inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.mcp-widget-content {
+	position: relative;
+	z-index: 1;
+}
+
+.mcp-widget-shell-graph .mcp-widget-content {
+	min-height: inherit;
+}
+
 /* Spinner — kept as global because primitives can't easily express a CSS animation */
 .spinner {
 	width: 24px;
 	height: 24px;
-	border: 2px solid var(--border);
-	border-top-color: var(--accent);
+	border: 2px solid rgba(255, 255, 255, 0.12);
+	border-top-color: var(--brand-accent);
 	border-radius: 50%;
 	animation: spin 0.8s linear infinite;
+	box-shadow: 0 0 20px rgba(75, 160, 250, 0.42);
 }
 
 @keyframes spin {
@@ -123,6 +631,64 @@
 	}
 }
 
+.super-loader {
+	display: inline-flex;
+	min-width: calc(var(--super-loader-size, 42px) + 10px);
+	align-items: center;
+	gap: var(--space-2);
+	color: var(--brand-accent);
+}
+
+.super-loader-mark {
+	width: calc(var(--super-loader-size, 42px) * 0.5);
+	height: calc(var(--super-loader-size, 42px) * 0.5);
+	flex-shrink: 0;
+	overflow: visible;
+}
+
+.super-loader-path {
+	fill: none;
+	stroke: currentColor;
+	stroke-width: 1.4;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	stroke-dasharray: 1;
+	stroke-dashoffset: 1;
+	opacity: 0.2;
+	animation: super-loader-draw 0.9s ease-in-out infinite alternate;
+}
+
+.super-loader-path-left {
+	animation-delay: 0.18s;
+}
+
+.super-loader-label {
+	color: var(--text-muted);
+	font-size: calc(var(--super-loader-size, 42px) * 0.25);
+	font-weight: 500;
+	white-space: nowrap;
+}
+
+@keyframes super-loader-draw {
+	from {
+		stroke-dashoffset: 1;
+		opacity: 0.2;
+	}
+
+	to {
+		stroke-dashoffset: 0;
+		opacity: 1;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.super-loader-path {
+		stroke-dashoffset: 0;
+		opacity: 0.7;
+		animation: none;
+	}
+}
+
 /* The graph canvas needs a definite height in both modes.
  *
  * Inline: derive height from the (stable) width via aspect-ratio — width is
@@ -135,13 +701,13 @@
  * minimize). Keeping it in flow with an explicit height avoids that entirely. */
 .graph-view {
 	width: 100%;
-	aspect-ratio: 4 / 3;
+	aspect-ratio: 16 / 9;
 	/* Never collapse to 0 during a resize/transition — a 0-size frame makes the
 	 * package drop its "already fitted" flag and re-fit (a camera animation that
 	 * reads as a re-layout). The floor keeps the size continuous. */
-	min-height: 280px;
+	min-height: 420px;
 	position: relative;
-	background: var(--bg-primary);
+	background: transparent;
 }
 
 .graph-view.fullscreen {
diff --git a/apps/mcp/src/widget/design/tokens.css b/apps/mcp/src/widget/design/tokens.css
index 54436c362..1124010cf 100644
--- a/apps/mcp/src/widget/design/tokens.css
+++ b/apps/mcp/src/widget/design/tokens.css
@@ -8,7 +8,8 @@
  * via `@custom-variant dark (&:is([data-theme="dark"] *))`.
  */
 
-:root {
+:root,
+[data-theme="light"] {
 	color-scheme: light;
 
 	/* Accent gradient (Supermemory brand) */
@@ -32,7 +33,7 @@
 	--bg-primary: #faf9f4;
 	--bg-secondary: #f3f1ec;
 	--bg-muted: #e8e5e0;
-	--bg-elevated: #ffffff;
+	--bg-elevated: #f8f7f3;
 	--bg-overlay: rgba(250, 249, 244, 0.7);
 
 	/* Borders */
@@ -93,8 +94,8 @@
 	--font-bold: 700;
 
 	--leading-tight: 1.25;
-	--leading-normal: 1.5;
-	--leading-relaxed: 1.75;
+	--leading-normal: 1.35;
+	--leading-relaxed: 1.35;
 
 	/* Unified component heights */
 	--height-xs: 28px;
@@ -182,7 +183,7 @@
 
 	--text-primary: #fafafa;
 	--text-secondary: #a3a3a3;
-	--text-muted: #525252;
+	--text-muted: #8a8a8a;
 	--text-inverse: #0a0a0a;
 
 	--success-muted: rgba(74, 222, 128, 0.2);
@@ -220,3 +221,303 @@
 	--graph-control-bg: #0c1829;
 	--graph-control-border: #1a2333;
 }
+
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme="light"]) {
+		color-scheme: dark;
+
+		--bg-primary: #0a0a0a;
+		--bg-secondary: #171717;
+		--bg-muted: #262626;
+		--bg-elevated: #1c1c1c;
+		--bg-overlay: rgba(10, 10, 10, 0.7);
+
+		--border: #2e2e2e;
+		--border-muted: #1f1f1f;
+
+		--text-primary: #fafafa;
+		--text-secondary: #a3a3a3;
+		--text-muted: #8a8a8a;
+		--text-inverse: #0a0a0a;
+
+		--success-muted: rgba(74, 222, 128, 0.2);
+		--error-muted: rgba(248, 113, 113, 0.2);
+		--warning-muted: rgba(251, 191, 36, 0.2);
+		--info-muted: rgba(96, 165, 250, 0.2);
+
+		--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+		--shadow-md:
+			0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+		--shadow-lg:
+			0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
+
+		--graph-bg: #0f1419;
+		--graph-doc-fill: #1b1f24;
+		--graph-doc-stroke: #2a2f36;
+		--graph-doc-inner: #13161a;
+		--graph-mem-fill: #0d2034;
+		--graph-mem-fill-hover: #112840;
+		--graph-mem-stroke: #3b73b8;
+		--graph-edge-derives: #fbbf24;
+		--graph-edge-updates: #a78bfa;
+		--graph-edge-extends: #38bdf8;
+		--graph-mem-border-forgotten: #ef4444;
+		--graph-mem-border-expiring: #f59e0b;
+		--graph-mem-border-recent: #10b981;
+		--graph-glow: #3b73b8;
+		--graph-icon: #3b73b8;
+		--graph-popover-bg: #0c1829;
+		--graph-popover-border: #1a2333;
+		--graph-popover-text-primary: #ffffff;
+		--graph-popover-text-secondary: #e2e8f0;
+		--graph-popover-text-muted: #94a3b8;
+		--graph-control-bg: #0c1829;
+		--graph-control-border: #1a2333;
+	}
+}
+
+/* Cursor MCP widget theme
+ *
+ * The web app palette is a useful reference, but these widgets live inside
+ * Cursor's chat surface. Keep the brand typography, then soften both themes so
+ * the widget feels embedded instead of like a separate high-contrast app frame.
+ */
+:root,
+[data-theme="light"] {
+	color-scheme: light;
+
+	--accent-start: #4f8df7;
+	--accent-mid: #4f8df7;
+	--accent-end: #8ec8ff;
+	--accent-gradient: linear-gradient(
+		94deg,
+		var(--accent-start),
+		var(--accent-end)
+	);
+	--accent: #3f7ee8;
+	--accent-foreground: #ffffff;
+	--accent-hover: #2f6fd8;
+	--accent-muted: rgba(63, 126, 232, 0.1);
+
+	--app-bg: #f3f1ec;
+	--widget-shell-bg: #f6f4ef;
+	--widget-shell-graph-bg: #f4f2ec;
+	--brand-accent: #78746c;
+	--brand-opacity: 0.66;
+	--widget-glow-inner: rgba(255, 255, 255, 0.62);
+	--widget-glow-mid: rgba(110, 154, 220, 0.2);
+	--widget-glow-outer: rgba(63, 126, 232, 0.08);
+
+	--bg-primary: #f6f4ef;
+	--bg-secondary: #efede7;
+	--bg-muted: #e7e3da;
+	--bg-elevated: #f8f7f3;
+	--bg-overlay: rgba(246, 244, 239, 0.74);
+	--bg-panel: #f1efe8;
+	--bg-control: #fbfaf7;
+	--bg-control-hover: #f4f2ec;
+
+	--border: #ddd8ce;
+	--border-muted: #e9e5dc;
+	--border-control: #dcd6ca;
+	--border-accent: rgba(63, 126, 232, 0.42);
+
+	--card-bg: #f8f7f3;
+	--card-bg-hover: #f3f1eb;
+	--card-border: #ddd8ce;
+	--card-border-hover: #cfc7b8;
+	--card-active-bg: #f8f7f3;
+	--card-active-border: rgba(63, 126, 232, 0.42);
+
+	--panel-bg: #f1efe8;
+	--panel-border: #ddd8ce;
+	--panel-shadow: 0 10px 24px rgba(74, 68, 58, 0.08);
+
+	--button-primary-bg: #111827;
+	--button-primary-hover: #1f2937;
+	--button-primary-active: #0b1120;
+	--button-primary-text: #ffffff;
+	--button-secondary-bg: #f8f7f3;
+	--button-secondary-hover: #f1eee7;
+	--button-secondary-text: #111827;
+	--button-secondary-border: #dcd6ca;
+	--button-shadow:
+		inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(15, 23, 42, 0.1);
+
+	--text-primary: #111827;
+	--text-secondary: #4b5563;
+	--text-muted: #8a94a3;
+	--text-inverse: #ffffff;
+
+	--success: #16a34a;
+	--success-muted: rgba(22, 163, 74, 0.1);
+	--error: #dc2626;
+	--error-muted: rgba(220, 38, 38, 0.1);
+	--warning: #d97706;
+	--warning-muted: rgba(217, 119, 6, 0.12);
+	--info: #2563eb;
+	--info-muted: rgba(37, 99, 235, 0.1);
+	--danger: #dc2626;
+
+	--font-sans:
+		"DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+	--font-display:
+		"DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+	--font-brand:
+		"DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+
+	--radius-sm: 4px;
+	--radius-md: 6px;
+	--radius-lg: 8px;
+
+	--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
+	--shadow-md: 0 12px 28px rgba(15, 23, 42, 0.09);
+	--shadow-lg: 0 20px 44px rgba(15, 23, 42, 0.12);
+
+	--graph-bg: #f3f1ec;
+	--graph-doc-fill: #f8f7f3;
+	--graph-doc-stroke: #ddd8ce;
+	--graph-doc-inner: #efede7;
+	--graph-mem-fill: #edf2f7;
+	--graph-mem-fill-hover: #e3ebf3;
+	--graph-mem-stroke: #6aa6f8;
+	--graph-accent: #3f7ee8;
+	--graph-text-primary: #111827;
+	--graph-text-secondary: #4b5563;
+	--graph-text-muted: #8a94a3;
+	--graph-edge-derives: #c08403;
+	--graph-edge-updates: #3f7ee8;
+	--graph-edge-extends: #0891b2;
+	--graph-mem-border-forgotten: #dc2626;
+	--graph-mem-border-expiring: #d97706;
+	--graph-mem-border-recent: #16a34a;
+	--graph-glow: #6aa6f8;
+	--graph-icon: #6b7280;
+	--graph-popover-bg: #f8f7f3;
+	--graph-popover-border: #ddd8ce;
+	--graph-popover-text-primary: #111827;
+	--graph-popover-text-secondary: #4b5563;
+	--graph-popover-text-muted: #8a94a3;
+	--graph-control-bg: #f8f7f3;
+	--graph-control-border: #ddd8ce;
+}
+
+[data-theme="dark"] {
+	color-scheme: dark;
+
+	--accent-start: #6aa6f8;
+	--accent-mid: #6aa6f8;
+	--accent-end: #8bd4ff;
+	--accent-gradient: linear-gradient(
+		94deg,
+		var(--accent-start),
+		var(--accent-end)
+	);
+	--accent: #6aa6f8;
+	--accent-foreground: #0f141a;
+	--accent-hover: #82b7ff;
+	--accent-muted: rgba(106, 166, 248, 0.12);
+
+	--app-bg: #12161b;
+	--widget-shell-bg: #151a20;
+	--widget-shell-graph-bg: #11161c;
+	--brand-accent: #7f8996;
+	--brand-opacity: 0.56;
+	--widget-glow-inner: rgba(255, 255, 255, 0.12);
+	--widget-glow-mid: rgba(106, 166, 248, 0.16);
+	--widget-glow-outer: rgba(106, 166, 248, 0.08);
+
+	--bg-primary: #151a20;
+	--bg-secondary: #181e25;
+	--bg-muted: #20262e;
+	--bg-elevated: #1a2027;
+	--bg-overlay: rgba(21, 26, 32, 0.72);
+	--bg-panel: #1d232b;
+	--bg-control: #14191f;
+	--bg-control-hover: #1b222a;
+
+	--border: #2b333d;
+	--border-muted: #232a33;
+	--border-control: #303946;
+	--border-accent: rgba(106, 166, 248, 0.38);
+
+	--card-bg: #1a2026;
+	--card-bg-hover: #202731;
+	--card-border: #2b333d;
+	--card-border-hover: #3a4654;
+	--card-active-bg: #1b222b;
+	--card-active-border: rgba(106, 166, 248, 0.44);
+
+	--panel-bg: #1c222a;
+	--panel-border: #2b333d;
+	--panel-shadow:
+		0 14px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.035);
+
+	--button-primary-bg: #eef4ff;
+	--button-primary-hover: #ffffff;
+	--button-primary-active: #dceaff;
+	--button-primary-text: #101820;
+	--button-secondary-bg: #202731;
+	--button-secondary-hover: #27303b;
+	--button-secondary-text: #eef2f7;
+	--button-secondary-border: #34404d;
+	--button-shadow:
+		inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.22);
+
+	--text-primary: #f4f6f8;
+	--text-secondary: #c1c9d2;
+	--text-muted: #87909c;
+	--text-inverse: #111827;
+
+	--success: #4ade80;
+	--success-muted: rgba(74, 222, 128, 0.12);
+	--error: #fb7185;
+	--error-muted: rgba(251, 113, 133, 0.12);
+	--warning: #fbbf24;
+	--warning-muted: rgba(251, 191, 36, 0.12);
+	--info: #8bbcff;
+	--info-muted: rgba(139, 188, 255, 0.12);
+	--danger: #fb7185;
+
+	--font-sans:
+		"DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+	--font-display:
+		"DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+	--font-brand:
+		"DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+
+	--radius-sm: 4px;
+	--radius-md: 6px;
+	--radius-lg: 8px;
+
+	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
+	--shadow-md: 0 12px 30px rgba(0, 0, 0, 0.22);
+	--shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.28);
+
+	--graph-bg: #151a20;
+	--graph-doc-fill: #202731;
+	--graph-doc-stroke: #35404c;
+	--graph-doc-inner: #171d24;
+	--graph-mem-fill: #172536;
+	--graph-mem-fill-hover: #1b2d42;
+	--graph-mem-stroke: #6aa6f8;
+	--graph-accent: #6aa6f8;
+	--graph-text-primary: #f4f6f8;
+	--graph-text-secondary: #c1c9d2;
+	--graph-text-muted: #87909c;
+	--graph-edge-derives: #fbbf24;
+	--graph-edge-updates: #6aa6f8;
+	--graph-edge-extends: #67e8f9;
+	--graph-mem-border-forgotten: #fb7185;
+	--graph-mem-border-expiring: #f59e0b;
+	--graph-mem-border-recent: #4ade80;
+	--graph-glow: #6aa6f8;
+	--graph-icon: #7ab2ff;
+	--graph-popover-bg: #1c222a;
+	--graph-popover-border: #34404d;
+	--graph-popover-text-primary: #f4f6f8;
+	--graph-popover-text-secondary: #c1c9d2;
+	--graph-popover-text-muted: #87909c;
+	--graph-control-bg: #1c222a;
+	--graph-control-border: #34404d;
+}
diff --git a/apps/mcp/src/widget/design/ui/Button.tsx b/apps/mcp/src/widget/design/ui/Button.tsx
index c641215c8..e65d3a33e 100644
--- a/apps/mcp/src/widget/design/ui/Button.tsx
+++ b/apps/mcp/src/widget/design/ui/Button.tsx
@@ -3,43 +3,40 @@ import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from "react"
 import { Loader2 } from "../../lib/icons"
 import { cn } from "../lib/cn"
 
-// Mirrors console-v2's button: uppercase + tracked, brand-font by default,
-// CVA primary/secondary/ghost/danger × sm/icon. We skip `asChild` because the
-// widget has no router links and dropping it saves a @radix-ui/react-slot dep.
+// Mirrors apps/web's pill-shaped inside-out controls while keeping the widget
+// variants small and dependency-free for MCP iframes.
 const buttonVariants = cva(
 	[
 		"inline-flex items-center justify-center gap-2",
-		"uppercase tracking-[0.075em]",
-		"rounded-[var(--radius-md)]",
-		"transition-colors cursor-pointer",
+		"font-semibold",
+		"rounded-full",
+		"transition-all cursor-pointer",
 		"disabled:pointer-events-none disabled:opacity-50",
-		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)]/20 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-primary)]",
+		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)]/35 focus-visible:ring-offset-0",
 		"[&_svg:not([class*='size-'])]:size-4 shrink-0",
 	].join(" "),
 	{
 		variants: {
 			variant: {
 				primary: [
-					"bg-[var(--accent)] text-[var(--accent-foreground)]",
-					"hover:bg-[var(--accent)]/90",
+					"bg-[#0D121A] text-[#FAFAFA] shadow-inside-out",
+					"hover:bg-[#121820] active:bg-[#080B0F]",
 				].join(" "),
 				secondary: [
-					"bg-transparent text-[var(--text-primary)]",
-					"border border-[var(--border)]",
-					"hover:bg-[var(--bg-muted)]",
-				].join(" "),
-				ghost: [
-					"text-[var(--text-primary)]",
-					"hover:bg-[var(--bg-muted)]",
+					"bg-[#0D121A] text-[#FAFAFA] shadow-inside-out",
+					"hover:bg-[#121820]",
 				].join(" "),
+				ghost: ["text-[#737373]", "hover:bg-white/5 hover:text-[#FAFAFA]"].join(
+					" ",
+				),
 				danger: [
-					"bg-[var(--danger)] text-[var(--text-inverse)]",
-					"hover:bg-[var(--danger)]/90",
+					"bg-[#EF4444]/15 text-[#EF4444]",
+					"hover:bg-[#EF4444]/25",
 				].join(" "),
 			},
 			size: {
-				sm: "h-[var(--height-sm)] px-[var(--space-4)] text-[length:var(--text-xs)]",
-				icon: "size-[var(--height-sm)] p-0",
+				sm: "h-9 px-4 text-[13px]",
+				icon: "size-8 p-0",
 			},
 		},
 		defaultVariants: {
@@ -93,7 +90,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 				{shortcut && !loading ? (
 					<span
 						className={cn(
-							"text-[0.8em] tracking-[0.1em]",
+							"text-[0.8em]",
 							variant === "primary" || variant === "danger"
 								? "opacity-60"
 								: variant === "ghost"
diff --git a/apps/mcp/src/widget/design/ui/Card.tsx b/apps/mcp/src/widget/design/ui/Card.tsx
index 06a15a663..07028c5e5 100644
--- a/apps/mcp/src/widget/design/ui/Card.tsx
+++ b/apps/mcp/src/widget/design/ui/Card.tsx
@@ -7,14 +7,19 @@ import {
 import { cn } from "../lib/cn"
 
 const cardStyles = cva(
-	"text-left bg-bg-elevated border border-border rounded-lg p-4 transition-colors duration-150",
+	[
+		"group relative overflow-hidden text-left",
+		"rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] p-4",
+		"transition-all duration-200",
+	].join(" "),
 	{
 		variants: {
 			variant: {
 				default: "",
 				interactive:
-					"cursor-pointer hover:bg-bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/20 focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
-				active: "cursor-pointer border-accent bg-accent-muted",
+					"cursor-pointer hover:border-[var(--card-border-hover)] hover:bg-[var(--card-bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/20 focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
+				active:
+					"cursor-pointer border-[var(--card-active-border)] bg-[var(--card-active-bg)] hover:border-[var(--card-border-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/20 focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
 			},
 		},
 		defaultVariants: { variant: "default" },
@@ -32,8 +37,14 @@ type ButtonElementProps = ButtonHTMLAttributes<HTMLButtonElement> &
 export type CardProps = DivProps | ButtonElementProps
 
 export const Card = forwardRef<HTMLElement, CardProps>(
-	({ className, variant, as = "div", ...props }, ref) => {
+	({ className, variant, as = "div", children, ...props }, ref) => {
 		const cls = cn(cardStyles({ variant }), className)
+		const inner = (
+			<>
+				<div aria-hidden className="card-glow" />
+				{children}
+			</>
+		)
 		if (as === "button") {
 			return (
 				<button
@@ -41,7 +52,9 @@ export const Card = forwardRef<HTMLElement, CardProps>(
 					ref={ref as React.Ref<HTMLButtonElement>}
 					type="button"
 					{...(props as ButtonHTMLAttributes<HTMLButtonElement>)}
-				/>
+				>
+					{inner}
+				</button>
 			)
 		}
 		return (
@@ -49,7 +62,9 @@ export const Card = forwardRef<HTMLElement, CardProps>(
 				className={cls}
 				ref={ref as React.Ref<HTMLDivElement>}
 				{...(props as HTMLAttributes<HTMLDivElement>)}
-			/>
+			>
+				{inner}
+			</div>
 		)
 	},
 )
diff --git a/apps/mcp/src/widget/design/ui/Chip.tsx b/apps/mcp/src/widget/design/ui/Chip.tsx
index d9ccc7a70..89e5d811e 100644
--- a/apps/mcp/src/widget/design/ui/Chip.tsx
+++ b/apps/mcp/src/widget/design/ui/Chip.tsx
@@ -9,7 +9,7 @@ const chipStyles = cva(
 			selected: {
 				true: "bg-accent-muted border-accent text-accent",
 				false:
-					"bg-bg-elevated border-border text-text-secondary hover:border-border-accent hover:bg-bg-muted",
+					"bg-bg-elevated border-[var(--card-border)] text-text-secondary hover:border-[var(--card-border-hover)] hover:bg-bg-control-hover",
 			},
 		},
 		defaultVariants: { selected: false },
diff --git a/apps/mcp/src/widget/design/ui/Field.tsx b/apps/mcp/src/widget/design/ui/Field.tsx
index 7402d5304..89adc266d 100644
--- a/apps/mcp/src/widget/design/ui/Field.tsx
+++ b/apps/mcp/src/widget/design/ui/Field.tsx
@@ -14,7 +14,7 @@ export function Field({ label, hint, error, className, children }: Props) {
 		<div className={cn("flex flex-col gap-1.5", className)}>
 			{label ? (
 				// biome-ignore lint/a11y/noLabelWithoutControl: generic field wrapper where children provide the input
-				<label className="text-xs font-medium text-text-secondary uppercase tracking-wide">
+				<label className="text-xs font-medium uppercase text-text-secondary">
 					{label}
 				</label>
 			) : null}
diff --git a/apps/mcp/src/widget/design/ui/FileUpload.tsx b/apps/mcp/src/widget/design/ui/FileUpload.tsx
index 753eda681..fb97e2d5e 100644
--- a/apps/mcp/src/widget/design/ui/FileUpload.tsx
+++ b/apps/mcp/src/widget/design/ui/FileUpload.tsx
@@ -58,10 +58,10 @@ export function FileUpload({
 				"flex min-h-[180px] flex-col items-center justify-center gap-(--space-3)",
 				"py-(--space-12) px-(--space-6)",
 				"border-2 border-dashed rounded-(--radius-lg)",
-				"cursor-pointer transition-colors",
+				"bg-[var(--bg-control)] cursor-pointer shadow-sm transition-all",
 				dragOver
-					? "border-accent bg-accent-muted/30"
-					: "border-border hover:bg-bg-muted/40",
+					? "border-accent bg-accent-muted"
+					: "border-[var(--border-control)] hover:border-[var(--card-border-hover)] hover:bg-[var(--bg-control-hover)]",
 				disabled && "pointer-events-none opacity-50",
 				className,
 			)}
diff --git a/apps/mcp/src/widget/design/ui/Input.tsx b/apps/mcp/src/widget/design/ui/Input.tsx
index 3687419a4..61025f4a9 100644
--- a/apps/mcp/src/widget/design/ui/Input.tsx
+++ b/apps/mcp/src/widget/design/ui/Input.tsx
@@ -2,18 +2,18 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { forwardRef, type InputHTMLAttributes } from "react"
 import { cn } from "../lib/cn"
 
-// Mirrors console-v2's Input: transparent surface, soft hover tint,
-// focus shadow, aria-invalid styling. Sizes sm/md/lg match component heights.
+// Mirrors console-v2's Input with a solid widget surface so the Nova grid stays
+// behind the form instead of bleeding through controls.
 const inputVariants = cva(
 	[
 		"flex w-full",
-		"bg-transparent text-[var(--text-primary)]",
-		"border border-[var(--border)]",
+		"bg-[var(--bg-control)] text-[var(--text-primary)]",
+		"border border-[var(--border-control)]",
 		"rounded-[var(--radius-lg)]",
 		"placeholder:text-[var(--text-muted)]",
-		"transition-colors",
-		"hover:bg-[var(--text-muted)]/10",
-		"focus-visible:outline-none focus-visible:shadow-[0_0_0_1px_var(--border)]",
+		"transition-all",
+		"hover:bg-[var(--bg-control-hover)]",
+		"focus-visible:outline-none focus-visible:border-[var(--border-accent)] focus-visible:shadow-[0_0_0_1px_var(--border-accent),0_0_24px_rgba(75,160,250,0.12)]",
 		"disabled:cursor-not-allowed disabled:opacity-50",
 		"aria-invalid:border-[var(--error)] aria-invalid:ring-[var(--error)]",
 		"file:border-0 file:bg-transparent file:text-[length:var(--text-sm)] file:font-medium",
diff --git a/apps/mcp/src/widget/design/ui/Popover.tsx b/apps/mcp/src/widget/design/ui/Popover.tsx
index 5ec0ec600..11fa4d6ca 100644
--- a/apps/mcp/src/widget/design/ui/Popover.tsx
+++ b/apps/mcp/src/widget/design/ui/Popover.tsx
@@ -17,8 +17,8 @@ const PopoverContent = forwardRef<
 			className={cn(
 				"z-50 w-72 p-(--space-4)",
 				"bg-bg-elevated border border-border",
-				"rounded-(--radius-md)",
-				"shadow-md",
+				"rounded-(--radius-lg)",
+				"shadow-lg backdrop-blur-xl",
 				"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
 				"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
 				className,
diff --git a/apps/mcp/src/widget/design/ui/TextArea.tsx b/apps/mcp/src/widget/design/ui/TextArea.tsx
index 5cdddc2e3..19b473ce6 100644
--- a/apps/mcp/src/widget/design/ui/TextArea.tsx
+++ b/apps/mcp/src/widget/design/ui/TextArea.tsx
@@ -1,20 +1,19 @@
 import { forwardRef, type TextareaHTMLAttributes } from "react"
 import { cn } from "../lib/cn"
 
-// Multi-line counterpart to Input. Same surface treatment (transparent,
-// soft hover, focus shadow, aria-invalid). No height variants — caller
-// controls min-height via className.
+// Multi-line counterpart to Input. Solid surface keeps host/product background
+// treatments from showing through text entry areas.
 const textAreaClass = [
 	"flex w-full",
-	"bg-transparent text-[var(--text-primary)]",
-	"border border-[var(--border)]",
+	"bg-[var(--bg-control)] text-[var(--text-primary)]",
+	"border border-[var(--border-control)]",
 	"rounded-[var(--radius-lg)]",
 	"px-[var(--space-3)] py-[var(--space-2)]",
 	"text-[length:var(--text-sm)] leading-normal font-sans",
 	"placeholder:text-[var(--text-muted)]",
-	"transition-colors resize-y",
-	"hover:bg-[var(--text-muted)]/10",
-	"focus-visible:outline-none focus-visible:shadow-[0_0_0_1px_var(--border)]",
+	"transition-all resize-y",
+	"hover:bg-[var(--bg-control-hover)]",
+	"focus-visible:outline-none focus-visible:border-[var(--border-accent)] focus-visible:shadow-[0_0_0_1px_var(--border-accent),0_0_24px_rgba(75,160,250,0.12)]",
 	"disabled:cursor-not-allowed disabled:opacity-50",
 	"aria-invalid:border-[var(--error)] aria-invalid:ring-[var(--error)]",
 ].join(" ")
diff --git a/apps/mcp/src/widget/design/ui/WorkspaceSelect.tsx b/apps/mcp/src/widget/design/ui/WorkspaceSelect.tsx
index 06c9261c1..168b7e7cc 100644
--- a/apps/mcp/src/widget/design/ui/WorkspaceSelect.tsx
+++ b/apps/mcp/src/widget/design/ui/WorkspaceSelect.tsx
@@ -1,5 +1,5 @@
 import { type ReactNode, useEffect, useMemo, useState } from "react"
-import { Check, ChevronDown, Package, Search } from "../../lib/icons"
+import { Check, ChevronDown, Search } from "../../lib/icons"
 import { cn } from "../lib/cn"
 import { Button } from "./Button"
 import { Popover, PopoverContent, PopoverTrigger } from "./Popover"
@@ -63,13 +63,12 @@ export function WorkspaceSelect({
 						<Button
 							brandFont={false}
 							className={cn(
-								"w-full justify-between normal-case tracking-normal",
+								"workspace-select-trigger mcp-soft-button w-full justify-between normal-case tracking-normal",
 								"focus-visible:ring-0 focus-visible:ring-offset-0",
 								"data-[state=open]:bg-bg-muted",
 								className,
 							)}
 							disabled={disabled}
-							iconLeft={<Package className="size-4 text-text-secondary" />}
 							iconRight={<ChevronDown className="size-3 text-text-muted" />}
 							size="sm"
 							type="button"
@@ -127,9 +126,7 @@ export function WorkspaceSelect({
 									>
 										<span className="flex min-w-0 flex-col gap-0.5">
 											<span className="flex items-center gap-(--space-2)">
-												{option.icon ?? (
-													<Package className="size-3.5 text-text-muted shrink-0" />
-												)}
+												{option.icon ?? null}
 												<span className="text-(length:--text-sm) text-text-primary truncate">
 													{option.label}
 												</span>
diff --git a/apps/mcp/src/widget/index.html b/apps/mcp/src/widget/index.html
index 6266b3b99..760bda1cc 100644
--- a/apps/mcp/src/widget/index.html
+++ b/apps/mcp/src/widget/index.html
@@ -6,7 +6,7 @@
 	<title>Supermemory MCP</title>
 	<link rel="preconnect" href="https://fonts.googleapis.com" />
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet" />
+	<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap" rel="stylesheet" />
 </head>
 <body>
 	<div id="app"></div>
diff --git a/apps/mcp/src/widget/lib/formatTag.ts b/apps/mcp/src/widget/lib/formatTag.ts
new file mode 100644
index 000000000..5d7f97f0a
--- /dev/null
+++ b/apps/mcp/src/widget/lib/formatTag.ts
@@ -0,0 +1,15 @@
+/**
+ * Turns a raw container-tag identifier into a human-friendly label.
+ *
+ * "sm_project_marketing"   → "Marketing"
+ * "sm_project_eng_rfcs"    → "Eng Rfcs"
+ * "my_custom_workspace"    → "My Custom Workspace"
+ */
+export function formatTagLabel(raw: string): string {
+	const slug = raw.replace(/^sm_project_/i, "").replace(/^sm_/i, "")
+
+	return slug
+		.split("_")
+		.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+		.join(" ")
+}
diff --git a/apps/mcp/src/widget/studio.html b/apps/mcp/src/widget/studio.html
index 159c8ff78..4120f24b4 100644
--- a/apps/mcp/src/widget/studio.html
+++ b/apps/mcp/src/widget/studio.html
@@ -6,7 +6,7 @@
 	<title>Supermemory MCP · Studio</title>
 	<link rel="preconnect" href="https://fonts.googleapis.com" />
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet" />
+	<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap" rel="stylesheet" />
 </head>
 <body>
 	<div id="studio"></div>
diff --git a/apps/mcp/src/widget/studio/Studio.tsx b/apps/mcp/src/widget/studio/Studio.tsx
index d4e50e157..2500a38fe 100644
--- a/apps/mcp/src/widget/studio/Studio.tsx
+++ b/apps/mcp/src/widget/studio/Studio.tsx
@@ -1,4 +1,5 @@
 import { type ReactNode, useState } from "react"
+import { WidgetShell } from "../App"
 import { WorkspaceCard } from "../components/WorkspaceCard"
 import {
 	ActionGroup,
@@ -30,10 +31,12 @@ import {
 } from "./mocks"
 
 type Theme = "light" | "dark"
-type Width = "narrow" | "wide"
+type Width = "narrow" | "wide" | "cursor"
+type Version = "v1" | "v2" | "v3" | "v4"
 
 const NARROW = 420
 const WIDE = 720
+const CURSOR = 1120
 
 // A no-op handler set for views. In the Studio there is no MCP host, so
 // widget-initiated tool calls would reject; that's fine — we only review
@@ -119,8 +122,10 @@ function Swatch({ name, varName }: { name: string; varName: string }) {
 
 export function Studio() {
 	const [theme, setTheme] = useState<Theme>("light")
-	const [width, setWidth] = useState<Width>("narrow")
-	const frameWidth = width === "narrow" ? NARROW : WIDE
+	const [width, setWidth] = useState<Width>("cursor")
+	const [version, setVersion] = useState<Version>("v1")
+	const frameWidth =
+		width === "narrow" ? NARROW : width === "wide" ? WIDE : CURSOR
 
 	const applyTheme = (t: Theme) => {
 		setTheme(t)
@@ -162,6 +167,23 @@ export function Studio() {
 							Dark
 						</Chip>
 					</div>
+					<div className="flex items-center gap-(--space-2)">
+						<span className="text-(length:--text-xs) text-text-muted">
+							Version
+						</span>
+						<Chip onClick={() => setVersion("v1")} selected={version === "v1"}>
+							v1
+						</Chip>
+						<Chip onClick={() => setVersion("v2")} selected={version === "v2"}>
+							v2
+						</Chip>
+						<Chip onClick={() => setVersion("v3")} selected={version === "v3"}>
+							v3
+						</Chip>
+						<Chip onClick={() => setVersion("v4")} selected={version === "v4"}>
+							v4
+						</Chip>
+					</div>
 					<div className="flex items-center gap-(--space-2)">
 						<span className="text-(length:--text-xs) text-text-muted">
 							Width
@@ -175,11 +197,17 @@ export function Studio() {
 						<Chip onClick={() => setWidth("wide")} selected={width === "wide"}>
 							Wide {WIDE}
 						</Chip>
+						<Chip
+							onClick={() => setWidth("cursor")}
+							selected={width === "cursor"}
+						>
+							Cursor {CURSOR}
+						</Chip>
 					</div>
 				</div>
 			</div>
 
-			<div className="mx-auto flex max-w-5xl flex-col gap-(--space-12) px-(--space-6) py-(--space-8)">
+			<div className="mx-auto flex max-w-5xl flex-col-reverse gap-(--space-12) px-(--space-6) py-(--space-8)">
 				{/* ── Primitives ───────────────────────────────────────── */}
 				<Section
 					description="Atoms from design/ui — fully interactive, no host needed."
@@ -226,7 +254,7 @@ export function Studio() {
 								<div className="flex flex-wrap items-center gap-(--space-2)">
 									<Chip selected>Selected</Chip>
 									<Chip>Unselected</Chip>
-									<Chip>sm_project_marketing</Chip>
+									<Chip>Marketing</Chip>
 								</div>
 							</div>
 
@@ -334,73 +362,94 @@ export function Studio() {
 
 				{/* ── Views ────────────────────────────────────────────── */}
 				<Section
-					description="Full views with mock data, rendered at the selected width. Click events show below each frame (no host, so tool calls won't fire)."
-					title="Views"
+					description="The same widget shell Cursor renders, with mock MCP tool data."
+					title="Cursor widgets"
 				>
-					<div className="flex flex-wrap gap-(--space-8)">
+					<div
+						data-widget-version={version}
+						className="flex flex-wrap gap-(--space-8)"
+					>
 						<Frame label="Picker" width={frameWidth}>
-							<Picker
-								activeTag="sm_project_marketing"
-								assignedTags={mockAssignedTags}
-								containerTags={mockContainerTags}
-								onAdvance={pickerStub.onAdvance}
-								onError={pickerStub.onError}
-							/>
+							<WidgetShell>
+								<Picker
+									activeTag="sm_project_marketing"
+									assignedTags={mockAssignedTags}
+									containerTags={mockContainerTags}
+									onAdvance={pickerStub.onAdvance}
+									onError={pickerStub.onError}
+								/>
+							</WidgetShell>
 						</Frame>
 
 						<Frame label="Save" width={frameWidth}>
-							<Save
-								activeTag="sm_project_marketing"
-								onAdvance={saveStub.onAdvance}
-								onError={saveStub.onError}
-								prefill="The Q3 launch will target fintech enterprise buyers."
-								writableTags={mockWritableTags}
-							/>
+							<WidgetShell>
+								<Save
+									activeTag="sm_project_marketing"
+									onAdvance={saveStub.onAdvance}
+									onError={saveStub.onError}
+									prefill="The Q3 launch will target fintech enterprise buyers."
+									writableTags={mockWritableTags}
+								/>
+							</WidgetShell>
 						</Frame>
 
 						<Frame label="Upload" width={frameWidth}>
-							<Upload
-								activeTag="sm_project_marketing"
-								onAdvance={uploadStub.onAdvance}
-								onError={uploadStub.onError}
-								writableTags={mockWritableTags}
-							/>
+							<WidgetShell>
+								<Upload
+									activeTag="sm_project_marketing"
+									onAdvance={uploadStub.onAdvance}
+									onError={uploadStub.onError}
+									writableTags={mockWritableTags}
+								/>
+							</WidgetShell>
 						</Frame>
 
 						<Frame label="Confirmation" width={frameWidth}>
-							<Confirmation containerTag="sm_project_marketing" />
+							<WidgetShell>
+								<Confirmation containerTag="sm_project_marketing" />
+							</WidgetShell>
 						</Frame>
 
 						<Frame label="Success (save)" width={frameWidth}>
-							<Success
-								containerTag="sm_project_marketing"
-								id="mem_8fa92c"
-								kind="save"
-							/>
+							<WidgetShell>
+								<Success
+									containerTag="sm_project_marketing"
+									id="mem_8fa92c"
+									kind="save"
+								/>
+							</WidgetShell>
 						</Frame>
 
 						<Frame label="Success (upload)" width={frameWidth}>
-							<Success
-								containerTag="sm_project_marketing"
-								fileName="q3-brief.pdf"
-								id="doc_4b71a0"
-								kind="upload"
-							/>
+							<WidgetShell>
+								<Success
+									containerTag="sm_project_marketing"
+									fileName="q3-brief.pdf"
+									id="doc_4b71a0"
+									kind="upload"
+								/>
+							</WidgetShell>
 						</Frame>
 
 						<Frame label="Error" width={frameWidth}>
-							<ErrorView message="No write access to container tag 'sm_project_eng_rfcs'." />
+							<WidgetShell>
+								<ErrorView message="No write access to container tag 'sm_project_eng_rfcs'." />
+							</WidgetShell>
 						</Frame>
 
 						<Frame label="Loading" width={frameWidth}>
-							<Loading />
+							<WidgetShell>
+								<Loading />
+							</WidgetShell>
 						</Frame>
 
 						<Frame label="Graph (@supermemory/memory-graph)" width={frameWidth}>
-							<Graph
-								documents={mockDocuments}
-								totalCount={mockDocuments.length}
-							/>
+							<WidgetShell immersive>
+								<Graph
+									documents={mockDocuments}
+									totalCount={mockDocuments.length}
+								/>
+							</WidgetShell>
 						</Frame>
 					</div>
 
diff --git a/apps/mcp/src/widget/views/Confirmation.tsx b/apps/mcp/src/widget/views/Confirmation.tsx
index 354fceba1..32660f066 100644
--- a/apps/mcp/src/widget/views/Confirmation.tsx
+++ b/apps/mcp/src/widget/views/Confirmation.tsx
@@ -1,5 +1,6 @@
 import { Badge, Stack } from "../design/ui"
 import { CheckCircle } from "../lib/icons"
+import { formatTagLabel } from "../lib/formatTag"
 
 interface Props {
 	containerTag: string
@@ -9,15 +10,16 @@ export function Confirmation({ containerTag }: Props) {
 	return (
 		<Stack
 			align="center"
-			className="px-(--page-header-px) py-(--space-10) text-center"
+			className="mcp-panel mx-(--page-header-px) my-(--space-6) rounded-[20px] border border-[var(--panel-border)] bg-[var(--panel-bg)] px-(--page-header-px) py-(--space-10) text-center shadow-[var(--panel-shadow)]"
 			gap="md"
 		>
+			<div aria-hidden className="panel-glow" />
 			<CheckCircle className="size-12 text-success" />
 			<Stack align="center" gap="xs">
 				<div className="text-(length:--text-sm) font-medium text-text-primary">
 					Active workspace set
 				</div>
-				<Badge variant="accent">{containerTag}</Badge>
+				<Badge variant="accent">{formatTagLabel(containerTag)}</Badge>
 			</Stack>
 			<p className="max-w-xs text-(length:--text-xs) text-text-muted">
 				All subsequent saves and recalls will use this workspace until you
diff --git a/apps/mcp/src/widget/views/Error.tsx b/apps/mcp/src/widget/views/Error.tsx
index 9f2cc82ef..5dfb5f409 100644
--- a/apps/mcp/src/widget/views/Error.tsx
+++ b/apps/mcp/src/widget/views/Error.tsx
@@ -9,7 +9,7 @@ export function ErrorView({ message }: Props) {
 	return (
 		<Stack
 			align="center"
-			className="px-(--page-header-px) py-(--space-10) text-center"
+			className="mx-(--page-header-px) my-(--space-6) rounded-[20px] border border-[var(--panel-border)] bg-[var(--panel-bg)] px-(--page-header-px) py-(--space-10) text-center shadow-[var(--panel-shadow)]"
 			gap="md"
 		>
 			<WarningCircle className="size-12 text-error" />
diff --git a/apps/mcp/src/widget/views/Graph.tsx b/apps/mcp/src/widget/views/Graph.tsx
index 21ab8537a..5c621b2c1 100644
--- a/apps/mcp/src/widget/views/Graph.tsx
+++ b/apps/mcp/src/widget/views/Graph.tsx
@@ -151,6 +151,14 @@ export function Graph({ documents, totalCount }: Props) {
 	// mid-session theme switch re-themes the canvas.
 	const theme = (ctx?.theme as string | undefined) ?? "light"
 	const colors = useGraphColors(theme)
+	const graphColors = useMemo<Partial<GraphThemeColors>>(
+		() => ({
+			...colors,
+			bg: "transparent",
+			edgeDerives: "#9ca3af",
+		}),
+		[colors],
+	)
 
 	const fullscreenSupported = useMemo(() => {
 		const modes = (
@@ -186,16 +194,21 @@ export function Graph({ documents, totalCount }: Props) {
 
 	return (
 		<div className="relative">
-			<div className={cn("graph-view", mode === "fullscreen" && "fullscreen")}>
+			<div
+				className={cn(
+					"graph-view overflow-hidden",
+					mode === "fullscreen" && "fullscreen",
+				)}
+			>
 				{/* No remount on toggle. The CSS just resizes the container; the
 				    package's ResizeObserver re-lays-out and its node cache keeps
 				    positions stable, so expand/minimize is instant with no reload.
 				    Theme is fed reactively via the colors prop. */}
 				<MemoryGraph
-					colors={colors}
+					colors={graphColors}
 					documents={graphDocuments}
 					totalCount={totalCount}
-					variant="console"
+					variant="consumer"
 				/>
 			</div>
 			{fullscreenSupported ? (
@@ -203,7 +216,7 @@ export function Graph({ documents, totalCount }: Props) {
 					aria-label={
 						mode === "fullscreen" ? "Exit fullscreen" : "Enter fullscreen"
 					}
-					className="absolute top-4 right-4 z-40 inline-flex items-center justify-center w-9 h-9 rounded-md bg-bg-elevated/80 backdrop-blur border border-border text-text-secondary hover:text-text-primary hover:bg-bg-muted transition-colors"
+					className="absolute top-3 right-3 z-40 inline-flex items-center justify-center w-9 h-9 rounded-full bg-bg-elevated/90 backdrop-blur border border-border text-text-secondary hover:text-text-primary hover:bg-bg-muted transition-colors"
 					onClick={toggleFullscreen}
 					title={mode === "fullscreen" ? "Exit fullscreen" : "Fullscreen"}
 					type="button"
diff --git a/apps/mcp/src/widget/views/Loading.tsx b/apps/mcp/src/widget/views/Loading.tsx
index e5a03cd0b..513498abb 100644
--- a/apps/mcp/src/widget/views/Loading.tsx
+++ b/apps/mcp/src/widget/views/Loading.tsx
@@ -1,7 +1,29 @@
 export function Loading() {
 	return (
-		<div className="flex items-center justify-center py-(--space-12)">
-			<div className="spinner" />
+		<div className="mcp-widget-loading flex items-center justify-center py-(--space-12)">
+			<output
+				aria-label="Loading..."
+				className="super-loader"
+				style={{ ["--super-loader-size" as string]: "42px" }}
+			>
+				<svg
+					aria-hidden="true"
+					className="super-loader-mark"
+					viewBox="0 0 21 21"
+				>
+					<path
+						className="super-loader-path super-loader-path-right"
+						d="M3.03472 6.05861L6.8539 9.91021H1.96777V11.9737H8.3006V17.4781H10.3467V11.5057C10.3467 10.8713 10.0963 10.2621 9.65119 9.81327L4.48145 4.59961L3.03472 6.05861Z"
+						pathLength={1}
+					/>
+					<path
+						className="super-loader-path super-loader-path-left"
+						d="M12.6994 9.02793V3.52344H10.6533V9.49591C10.6533 10.1302 10.9037 10.7395 11.3488 11.1883L16.5197 16.4032L17.9665 14.9441L14.1473 11.0926H19.0334V9.02914L12.6994 9.02793Z"
+						pathLength={1}
+					/>
+				</svg>
+				<span className="super-loader-label">Loading...</span>
+			</output>
 		</div>
 	)
 }
diff --git a/apps/mcp/src/widget/views/Picker.tsx b/apps/mcp/src/widget/views/Picker.tsx
index 45c696058..40ccfa251 100644
--- a/apps/mcp/src/widget/views/Picker.tsx
+++ b/apps/mcp/src/widget/views/Picker.tsx
@@ -8,6 +8,7 @@ import { WorkspaceCard } from "../components/WorkspaceCard"
 import { Input, PageHeader } from "../design/ui"
 import { useApp } from "../hooks/useApp"
 import { useLog } from "../hooks/useLog"
+import { formatTagLabel } from "../lib/formatTag"
 import { Search } from "../lib/icons"
 
 interface Props {
@@ -62,11 +63,11 @@ export function Picker({
 	const description =
 		count === 0
 			? "No workspaces available."
-			: `${count} workspace${count === 1 ? "" : "s"} available — select one to set your active context.`
+			: `${count} workspace${count === 1 ? "" : "s"} available`
 
 	return (
 		<div className="flex flex-col">
-			<PageHeader description={description} title="Select Workspace" />
+			<PageHeader description={description} title="Workspaces" />
 			<div className="flex flex-col gap-(--space-4) px-(--page-header-px) pb-(--space-6)">
 				{count >= SEARCH_THRESHOLD ? (
 					<div className="relative max-w-sm">
@@ -80,15 +81,14 @@ export function Picker({
 					</div>
 				) : null}
 
-				{/* Bounded, scrollable list — keeps a stable height so filtering or a
-				    long workspace list doesn't resize (jump) the whole widget. */}
-				<div className="min-h-[220px] max-h-[60vh] overflow-y-auto pr-1">
+				{/* Bounded, scrollable list — keeps a stable height without showing scrollbar chrome. */}
+				<div className="min-h-[220px] max-h-[60vh] overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
 					{filtered.length === 0 ? (
 						<p className="py-(--space-6) text-center text-(length:--text-sm) text-text-muted">
 							No workspaces match “{query}”.
 						</p>
 					) : (
-						<div className="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-(--space-3)">
+						<div className="workspace-picker-grid grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-(--space-2)">
 							{filtered.map((tag) => {
 								const access = assignedTags?.find(
 									(t) => t.containerTag === tag.containerTag,
@@ -109,7 +109,7 @@ export function Picker({
 
 				{pending ? (
 					<p className="text-(length:--text-xs) text-text-muted">
-						Setting workspace to {pending}…
+						Setting workspace to {formatTagLabel(pending)}…
 					</p>
 				) : null}
 			</div>
diff --git a/apps/mcp/src/widget/views/Save.tsx b/apps/mcp/src/widget/views/Save.tsx
index 0dbd9b162..10e2683b1 100644
--- a/apps/mcp/src/widget/views/Save.tsx
+++ b/apps/mcp/src/widget/views/Save.tsx
@@ -11,6 +11,7 @@ import {
 } from "../design/ui"
 import { useApp } from "../hooks/useApp"
 import { useLog } from "../hooks/useLog"
+import { formatTagLabel } from "../lib/formatTag"
 
 interface Props {
 	activeTag?: string | null
@@ -42,7 +43,12 @@ export function Save({
 	}, [selectedTag, writableTags])
 
 	const options = useMemo(
-		() => writableTags.map((tag) => ({ value: tag, label: tag })),
+		() =>
+			writableTags.map((tag) => ({
+				value: tag,
+				label: formatTagLabel(tag),
+				description: tag,
+			})),
 		[writableTags],
 	)
 
@@ -73,39 +79,43 @@ export function Save({
 				title="Add Memory"
 			/>
 			<div className="px-(--page-header-px) pb-(--space-6)">
-				<Stack gap="lg">
-					<Field label="Memory">
-						<TextArea
-							className="min-h-40"
-							onChange={(e) => setContent(e.target.value)}
-							placeholder="Enter content to save as a memory…"
-							value={content}
-						/>
-					</Field>
-
-					{writableTags.length > 0 ? (
-						<Field label="Workspace">
-							<WorkspaceSelect
-								onValueChange={setSelectedTag}
-								options={options}
-								value={selectedTag}
+				<div className="mcp-panel rounded-[20px] border border-[var(--panel-border)] bg-[var(--panel-bg)] p-(--space-4) shadow-[var(--panel-shadow)]">
+					<div aria-hidden className="panel-glow" />
+					<Stack gap="lg">
+						<Field label="Memory">
+							<TextArea
+								className="min-h-40 shadow-sm"
+								onChange={(e) => setContent(e.target.value)}
+								placeholder="Enter content to save as a memory…"
+								value={content}
 							/>
 						</Field>
-					) : null}
 
-					<div className="flex justify-end border-t border-border-muted pt-(--space-4)">
-						<ActionGroup>
-							<Button
-								disabled={!canSave}
-								loading={saving}
-								onClick={handleSave}
-								variant="primary"
-							>
-								{saving ? "Saving" : "Save memory"}
-							</Button>
-						</ActionGroup>
-					</div>
-				</Stack>
+						{writableTags.length > 0 ? (
+							<Field label="Workspace">
+								<WorkspaceSelect
+									onValueChange={setSelectedTag}
+									options={options}
+									value={selectedTag}
+								/>
+							</Field>
+						) : null}
+
+						<div className="flex justify-end pt-(--space-2)">
+							<ActionGroup>
+								<Button
+									className="mcp-soft-button"
+									disabled={!canSave}
+									loading={saving}
+									onClick={handleSave}
+									variant="primary"
+								>
+									{saving ? "Saving" : "Save memory"}
+								</Button>
+							</ActionGroup>
+						</div>
+					</Stack>
+				</div>
 			</div>
 		</div>
 	)
diff --git a/apps/mcp/src/widget/views/Success.tsx b/apps/mcp/src/widget/views/Success.tsx
index 9ab17683c..772e80dce 100644
--- a/apps/mcp/src/widget/views/Success.tsx
+++ b/apps/mcp/src/widget/views/Success.tsx
@@ -1,5 +1,6 @@
 import { Badge, Stack } from "../design/ui"
 import { CheckCircle } from "../lib/icons"
+import { formatTagLabel } from "../lib/formatTag"
 
 interface SaveProps {
 	kind: "save"
@@ -21,15 +22,16 @@ export function Success(props: Props) {
 	return (
 		<Stack
 			align="center"
-			className="px-(--page-header-px) py-(--space-10) text-center"
+			className="mcp-panel mx-(--page-header-px) my-(--space-6) rounded-[20px] border border-[var(--panel-border)] bg-[var(--panel-bg)] px-(--page-header-px) py-(--space-10) text-center shadow-[var(--panel-shadow)]"
 			gap="md"
 		>
+			<div aria-hidden className="panel-glow" />
 			<CheckCircle className="size-12 text-success" />
 			<Stack align="center" gap="xs">
 				<div className="text-(length:--text-sm) font-medium text-text-primary">
 					{isUpload ? `Uploaded ${props.fileName}` : "Memory saved"}
 				</div>
-				<Badge variant="accent">{props.containerTag}</Badge>
+				<Badge variant="accent">{formatTagLabel(props.containerTag)}</Badge>
 			</Stack>
 			<p className="break-all font-mono text-(length:--text-xs) text-text-muted">
 				{props.id}
diff --git a/apps/mcp/src/widget/views/Upload.tsx b/apps/mcp/src/widget/views/Upload.tsx
index dda2e10f1..dbb7c271d 100644
--- a/apps/mcp/src/widget/views/Upload.tsx
+++ b/apps/mcp/src/widget/views/Upload.tsx
@@ -11,6 +11,7 @@ import {
 } from "../design/ui"
 import { useApp } from "../hooks/useApp"
 import { useLog } from "../hooks/useLog"
+import { formatTagLabel } from "../lib/formatTag"
 import { FileText, X } from "../lib/icons"
 import { readFileAsBase64 } from "../lib/readFileAsBase64"
 
@@ -39,7 +40,12 @@ export function Upload({ activeTag, writableTags, onAdvance, onError }: Props) {
 	const [uploading, setUploading] = useState(false)
 
 	const options = useMemo(
-		() => writableTags.map((tag) => ({ value: tag, label: tag })),
+		() =>
+			writableTags.map((tag) => ({
+				value: tag,
+				label: formatTagLabel(tag),
+				description: tag,
+			})),
 		[writableTags],
 	)
 
@@ -78,59 +84,63 @@ export function Upload({ activeTag, writableTags, onAdvance, onError }: Props) {
 				title="Upload File"
 			/>
 			<div className="px-(--page-header-px) pb-(--space-6)">
-				<Stack gap="lg">
-					{file ? (
-						<div className="flex items-center justify-between gap-(--space-3) rounded-(--radius-lg) border border-border bg-bg-elevated p-(--space-3)">
-							<div className="flex min-w-0 items-center gap-(--space-3)">
-								<FileText className="size-5 shrink-0 text-text-secondary" />
-								<div className="flex min-w-0 flex-col">
-									<span className="truncate text-(length:--text-sm) font-medium text-text-primary">
-										{file.name}
-									</span>
-									<span className="text-(length:--text-xs) font-mono text-text-muted">
-										{formatFileSize(file.size)}
-									</span>
+				<div className="mcp-panel rounded-[20px] border border-[var(--panel-border)] bg-[var(--panel-bg)] p-(--space-4) shadow-[var(--panel-shadow)]">
+					<div aria-hidden className="panel-glow" />
+					<Stack gap="lg">
+						{file ? (
+							<div className="flex items-center justify-between gap-(--space-3) rounded-(--radius-lg) border border-[var(--border-control)] bg-[var(--bg-control)] p-(--space-3) shadow-sm">
+								<div className="flex min-w-0 items-center gap-(--space-3)">
+									<FileText className="size-5 shrink-0 text-text-secondary" />
+									<div className="flex min-w-0 flex-col">
+										<span className="truncate text-(length:--text-sm) font-medium text-text-primary">
+											{file.name}
+										</span>
+										<span className="text-(length:--text-xs) font-mono text-text-muted">
+											{formatFileSize(file.size)}
+										</span>
+									</div>
 								</div>
+								<Button
+									aria-label="Remove file"
+									iconLeft={<X className="size-4" />}
+									onClick={() => setFile(null)}
+									size="icon"
+									variant="ghost"
+								/>
 							</div>
-							<Button
-								aria-label="Remove file"
-								iconLeft={<X className="size-4" />}
-								onClick={() => setFile(null)}
-								size="icon"
-								variant="ghost"
+						) : (
+							<FileUpload
+								accept={ACCEPT}
+								description="Supports TXT, PDF, PNG, JPG, MP4"
+								onFile={setFile}
 							/>
-						</div>
-					) : (
-						<FileUpload
-							accept={ACCEPT}
-							description="Supports TXT, PDF, PNG, JPG, MP4"
-							onFile={setFile}
-						/>
-					)}
+						)}
 
-					{writableTags.length > 0 ? (
-						<Field label="Workspace">
-							<WorkspaceSelect
-								onValueChange={setSelectedTag}
-								options={options}
-								value={selectedTag}
-							/>
-						</Field>
-					) : null}
+						{writableTags.length > 0 ? (
+							<Field label="Workspace">
+								<WorkspaceSelect
+									onValueChange={setSelectedTag}
+									options={options}
+									value={selectedTag}
+								/>
+							</Field>
+						) : null}
 
-					<div className="flex justify-end border-t border-border-muted pt-(--space-4)">
-						<ActionGroup>
-							<Button
-								disabled={!canUpload}
-								loading={uploading}
-								onClick={handleUpload}
-								variant="primary"
-							>
-								{uploading ? "Uploading" : "Upload file"}
-							</Button>
-						</ActionGroup>
-					</div>
-				</Stack>
+						<div className="flex justify-end pt-(--space-2)">
+							<ActionGroup>
+								<Button
+									className="mcp-soft-button"
+									disabled={!canUpload}
+									loading={uploading}
+									onClick={handleUpload}
+									variant="primary"
+								>
+									{uploading ? "Uploading" : "Upload file"}
+								</Button>
+							</ActionGroup>
+						</div>
+					</Stack>
+				</div>
 			</div>
 		</div>
 	)