diff --git a/apps/mcp/src/widget/design/tokens.css b/apps/mcp/src/widget/design/tokens.css
index d505eb04..eee4bdda 100644
--- a/apps/mcp/src/widget/design/tokens.css
+++ b/apps/mcp/src/widget/design/tokens.css
@@ -309,9 +309,12 @@
 	--bg-muted: #131b28;
 	--bg-elevated: #1b1f24;
 	--bg-overlay: rgba(13, 18, 26, 0.78);
+	--bg-control: #0d121a;
+	--bg-control-hover: #111923;
 
 	--border: rgba(255, 255, 255, 0.12);
 	--border-muted: rgba(255, 255, 255, 0.07);
+	--border-control: rgba(255, 255, 255, 0.14);
 	--border-accent: rgba(34, 97, 202, 0.45);
 
 	--text-primary: #fafafa;
diff --git a/apps/mcp/src/widget/design/ui/Button.tsx b/apps/mcp/src/widget/design/ui/Button.tsx
index 07819d68..d68dbedf 100644
--- a/apps/mcp/src/widget/design/ui/Button.tsx
+++ b/apps/mcp/src/widget/design/ui/Button.tsx
@@ -25,9 +25,9 @@ const buttonVariants = cva(
 					"hover:bg-[var(--accent-hover)] hover:shadow-[0_12px_32px_rgba(75,160,250,0.32)]",
 				].join(" "),
 				secondary: [
-					"bg-[var(--bg-overlay)] text-[var(--text-primary)]",
-					"border border-[var(--border)]",
-					"hover:bg-[var(--bg-muted)] hover:border-[var(--border-accent)]",
+					"bg-[var(--bg-control)] text-[var(--text-primary)]",
+					"border border-[var(--border-control)]",
+					"hover:bg-[var(--bg-control-hover)] hover:border-[var(--border-accent)]",
 				].join(" "),
 				ghost: [
 					"text-[var(--text-primary)]",
diff --git a/apps/mcp/src/widget/design/ui/Card.tsx b/apps/mcp/src/widget/design/ui/Card.tsx
index f1159f9c..2e0dee28 100644
--- a/apps/mcp/src/widget/design/ui/Card.tsx
+++ b/apps/mcp/src/widget/design/ui/Card.tsx
@@ -8,8 +8,8 @@ import { cn } from "../lib/cn"
 
 const cardStyles = cva(
 	[
-		"text-left bg-bg-elevated/90 border border-border rounded-lg p-4",
-		"shadow-md backdrop-blur transition-colors duration-150",
+		"text-left bg-bg-elevated border border-border rounded-lg p-4",
+		"shadow-md transition-colors duration-150",
 	].join(" "),
 	{
 		variants: {
diff --git a/apps/mcp/src/widget/design/ui/FileUpload.tsx b/apps/mcp/src/widget/design/ui/FileUpload.tsx
index 33e87d51..5ad521a5 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)",
-				"bg-[var(--bg-overlay)] cursor-pointer shadow-md backdrop-blur transition-colors",
+				"bg-[var(--bg-control)] cursor-pointer shadow-md transition-colors",
 				dragOver
 					? "border-accent bg-accent-muted"
-					: "border-border hover:bg-bg-muted/80",
+					: "border-[var(--border-control)] 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 17c00fac..53adcea4 100644
--- a/apps/mcp/src/widget/design/ui/Input.tsx
+++ b/apps/mcp/src/widget/design/ui/Input.tsx
@@ -2,17 +2,17 @@ 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-[var(--bg-overlay)] 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(--bg-muted)]",
+		"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)]",
 		"disabled:cursor-not-allowed disabled:opacity-50",
 		"aria-invalid:border-[var(--error)] aria-invalid:ring-[var(--error)]",
diff --git a/apps/mcp/src/widget/design/ui/Popover.tsx b/apps/mcp/src/widget/design/ui/Popover.tsx
index 53d33d83..d0ae3394 100644
--- a/apps/mcp/src/widget/design/ui/Popover.tsx
+++ b/apps/mcp/src/widget/design/ui/Popover.tsx
@@ -16,9 +16,9 @@ const PopoverContent = forwardRef<
 			align={align}
 			className={cn(
 				"z-50 w-72 p-(--space-4)",
-				"bg-bg-elevated/95 border border-border",
+				"bg-bg-elevated border border-border",
 				"rounded-(--radius-lg)",
-				"shadow-lg backdrop-blur",
+				"shadow-lg",
 				"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 b3e356d7..d2205e0a 100644
--- a/apps/mcp/src/widget/design/ui/TextArea.tsx
+++ b/apps/mcp/src/widget/design/ui/TextArea.tsx
@@ -1,19 +1,18 @@
 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-[var(--bg-overlay)] 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(--bg-muted)]",
+	"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)]",
 	"disabled:cursor-not-allowed disabled:opacity-50",
 	"aria-invalid:border-[var(--error)] aria-invalid:ring-[var(--error)]",
diff --git a/apps/mcp/src/widget/views/Save.tsx b/apps/mcp/src/widget/views/Save.tsx
index 0dbd9b16..ce4bdf2c 100644
--- a/apps/mcp/src/widget/views/Save.tsx
+++ b/apps/mcp/src/widget/views/Save.tsx
@@ -73,39 +73,41 @@ 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="rounded-(--radius-lg) border border-border bg-bg-elevated p-(--space-4) shadow-lg">
+					<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>
-					) : 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
+									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/Upload.tsx b/apps/mcp/src/widget/views/Upload.tsx
index dda2e10f..86a86e2c 100644
--- a/apps/mcp/src/widget/views/Upload.tsx
+++ b/apps/mcp/src/widget/views/Upload.tsx
@@ -78,59 +78,61 @@ 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="rounded-(--radius-lg) border border-border bg-bg-elevated p-(--space-4) shadow-lg">
+					<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)">
+								<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}
 							/>
+						)}
+
+						{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
+									disabled={!canUpload}
+									loading={uploading}
+									onClick={handleUpload}
+									variant="primary"
+								>
+									{uploading ? "Uploading" : "Upload file"}
+								</Button>
+							</ActionGroup>
 						</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}
-
-					<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>
+					</Stack>
+				</div>
 			</div>
 		</div>
 	)