From 65bbb45064d63f776401a4db2bfb828d493f9503 Mon Sep 17 00:00:00 2001
From: Prajwal Aradhya <manuaradhya07@gmail.com>
Date: Fri, 14 Aug 2026 21:05:12 +0100
Subject: [PATCH] refactor(ui): unify action buttons, modal close triggers, and
 delete components

---
 AGENT.md                                      |  13 +
 apps/portal/src/components/ai/AiHome.tsx      |   7 +-
 .../src/components/ai/ArtifactsSidebar.tsx    |   8 +-
 .../src/components/ai/ConversationItem.tsx    |  11 +-
 .../src/components/ai/ConversationPage.tsx    |  18 +-
 .../components/ai/HarnessStatusAccordion.tsx  |   2 +-
 .../src/components/ai/MarkdownViewer.tsx      |   4 +-
 apps/portal/src/components/ai/ModelSelect.tsx |   6 +-
 .../src/components/ai/PlanReviewModal.tsx     |  51 ++--
 .../portal/src/components/ai/PromptEditor.tsx |  24 +-
 .../components/ai/RenameConversationModal.tsx |   5 +-
 .../portal/src/components/ai/ResourceChip.tsx |  13 +-
 .../components/ai/ScrollToBottomButton.tsx    |   3 +-
 .../src/components/ai/SyntaxHelpModal.tsx     |  15 +-
 apps/portal/src/components/ai/UserMessage.tsx |   4 +-
 .../src/components/ai/artifacts/ApplyBar.tsx  |   4 +-
 .../components/ai/artifacts/CanvasPreview.tsx |  10 +-
 .../components/ai/artifacts/RouteArtifact.tsx |   4 +-
 .../components/appConfig/AppConfigTable.tsx   |  10 +-
 .../appConfig/CreateConfigModal.tsx           |   4 +-
 .../components/appConfig/EditConfigModal.tsx  |   4 +-
 .../src/components/canvas/PlaygroundModal.tsx |   5 +-
 .../panel/blocks/ForeachLoopSettings.tsx      |  11 +-
 .../panel/blocks/HttpRequestSettings.tsx      |  11 +-
 .../src/components/common/ConfirmDialog.tsx   |   5 +-
 .../src/components/common/RoleSelector.tsx    |  10 +-
 .../components/common/UserRoleSelector.tsx    |   4 +-
 .../src/components/home/ProjectCard.tsx       |  43 ++-
 apps/portal/src/components/home/UsersList.tsx |  20 +-
 .../instance-settings/auth/AuthModeCard.tsx   |  30 +-
 .../home/instance-settings/auth/SsoCard.tsx   |  61 ++--
 .../integrations/AppConfigSelector.tsx        |  89 ++----
 .../integrations/AppConfigSelectorModal.tsx   | 284 ++++++++++++++++++
 .../integrations/IntegrationForm.tsx          |  23 +-
 .../IntegrationOnboardingForm.tsx             |  58 ++--
 .../IntegrationOnboardingModal.tsx            |   9 +-
 .../integrations/connectors/AiForm.tsx        |  23 +-
 .../connectors/CredentialsUrlForm.tsx         |  10 +-
 .../connectors/ObservabilityForm.tsx          |  14 +-
 .../components/routes/RouteSettingsModal.tsx  |   6 +-
 .../src/components/routes/RouteSwitcher.tsx   |   8 +-
 .../components/settings/AddMemberModal.tsx    |  12 +-
 .../components/settings/ChangeRoleDialog.tsx  |   5 +-
 .../settings/DangerZoneSettings.tsx           |  13 +-
 .../settings/ExperimentalSettings.tsx         |   6 +-
 .../components/settings/MembersSettings.tsx   |   8 +-
 apps/portal/src/query/appConfigQuery.ts       |  17 +-
 apps/portal/src/routes/_authed/$projectId.tsx |  42 +--
 .../routes/_authed/$projectId/app-config.tsx  |  11 +-
 .../_authed/$projectId/custom-blocks.tsx      |  25 +-
 .../_authed/$projectId/integrations.tsx       | 194 ++++++------
 .../src/routes/_authed/$projectId/routes.tsx  |  13 +-
 .../routes/_authed/$projectId/routes_.new.tsx |  40 +--
 .../routes/_authed/$projectId/settings.tsx    |  20 +-
 .../server/src/api/v1/integrations/helpers.ts |   2 +
 packages/components/index.ts                  |   7 +
 .../src/ApiPlayground/KeyValueTable.tsx       |   5 +-
 .../src/CloseButton/CloseButton.test.ts       |   8 +
 .../src/CloseButton/CloseButton.tsx           |  47 +++
 packages/components/src/CloseButton/index.ts  |   1 +
 .../src/DeleteButton/DeleteButton.test.ts     |  10 +
 .../src/DeleteButton/DeleteButton.tsx         |  32 ++
 .../src/DeleteButton/DeleteIconButton.tsx     |  36 +++
 packages/components/src/DeleteButton/index.ts |   2 +
 .../IntegrationSelector.tsx                   |  20 +-
 .../src/JsonEditor/JsonArrayEditor.tsx        |  14 +-
 .../src/JsonEditor/JsonEditorDialog.tsx       |  14 +-
 .../src/JsonEditor/JsonObjectEditor.tsx       |  11 +-
 .../src/SchemaEditor/PropertyRow.tsx          |  11 +-
 .../src/SchemaEditor/rules/EnumRules.tsx      |  11 +-
 70 files changed, 1014 insertions(+), 567 deletions(-)
 create mode 100644 apps/portal/src/components/integrations/AppConfigSelectorModal.tsx
 create mode 100644 packages/components/src/CloseButton/CloseButton.test.ts
 create mode 100644 packages/components/src/CloseButton/CloseButton.tsx
 create mode 100644 packages/components/src/CloseButton/index.ts
 create mode 100644 packages/components/src/DeleteButton/DeleteButton.test.ts
 create mode 100644 packages/components/src/DeleteButton/DeleteButton.tsx
 create mode 100644 packages/components/src/DeleteButton/DeleteIconButton.tsx
 create mode 100644 packages/components/src/DeleteButton/index.ts

diff --git a/AGENT.md b/AGENT.md
index deef7513..193a4e1b 100644
--- a/AGENT.md
+++ b/AGENT.md
@@ -119,6 +119,19 @@ When creating branches or Pull Requests via the `gh` CLI:
 2. **Table Selection:** Pass `slot="selection"` on any `<Checkbox>` rendered inside `<Table.Header>` or `<Table.Cell>` (e.g. `<Checkbox slot="selection" ... />`).
 3. Replace nested `<button>` elements inside `<Table.Column>` with clickable `<div>` or `<span>` elements (e.g. `<div role="button" tabIndex={0} onClick={...}>`).
 
+### Unified Delete & Delete Icon Buttons (`DeleteIconButton` & `DeleteButton`)
+**Rule:** ALWAYS use the unified `@fluxify/components` delete button components for delete and remove actions across the portal UI instead of ad-hoc `<Button variant="ghost">` or solid `<Button variant="danger">`:
+1. **Icon-only delete actions (table rows, card actions, form removals):** Use `<DeleteIconButton aria-label="Delete ..." onPress={...} />` (or pass custom `icon`, `size`, `isDisabled`, `iconSize`). It uses `variant="danger-soft"` (translucent danger styling) by default.
+2. **Text delete actions (bulk delete buttons, danger zone action buttons):** Use `<DeleteButton onPress={...}>Delete ...</DeleteButton>` (uses `variant="danger-soft"` with leading `TbTrash` icon by default).
+3. **Confirmation dialogs:** Use `<ConfirmDialog danger ...>` which defaults destructive action buttons to `variant="danger-soft"` (translucent danger) unless explicitly given `variant="danger"`.
+4. **Dropdown menu delete items:** Style with `variant="danger" className="text-danger hover:bg-danger/10 focus:bg-danger/10 focus:text-danger"` and `<TbTrash size={16} className="text-danger" />`.
+
+### Unified Modal Close Button (`CloseButton` / `ModalCloseButton`)
+**Rule:** ALWAYS use the unified `@fluxify/components` close button component for modals, dialogs, and clearable surfaces across the portal and components UI instead of default HeroUI `<Modal.CloseTrigger>` (which renders an unthemed solid background and custom SVG) or ad-hoc custom icon buttons:
+1. **Modal headers:** Use `<CloseButton />` (or `<ModalCloseButton />`) in `<Modal.Header>` (with flex layout, e.g. `<Modal.Header className="flex flex-row items-center justify-between">`). It uses `TbX` from `react-icons/tb` (default 18px), applies theme tokens (`text-muted hover:text-foreground hover:bg-surface-secondary active:bg-surface-secondary/80 rounded-md transition-colors`), and sets `slot="close"` for automatic modal dismissal with React Aria.
+2. **Explicit close triggers:** When a manual dismissal callback is needed (e.g. outside dialog context or controlled state resets), pass `onPress={onClose}` (e.g. `<CloseButton onPress={handleClose} />`).
+3. **Clearable input controls:** Use `<CloseButton aria-label="Clear ..." onPress={handleClear} />` for consistent clear actions in search/selector bars.
+
 ### Harness Structured Output — "Unrecognized token '\'" / "Unexpected EOF" / silent parse failures
 **File:** `apps/ai-gateway/src/harness/models/base.ts` (`fallbackStructuredOutput`, `cleanJsonOutput`, `sliceBalancedJson`, `parseJsonLoose`).
 
diff --git a/apps/portal/src/components/ai/AiHome.tsx b/apps/portal/src/components/ai/AiHome.tsx
index cca46ce9..da866dcb 100644
--- a/apps/portal/src/components/ai/AiHome.tsx
+++ b/apps/portal/src/components/ai/AiHome.tsx
@@ -55,7 +55,7 @@ export function AiHome() {
 	if (isBlocked) {
 		return (
 			<div className="mx-auto flex h-full w-full max-w-md flex-col items-center justify-center gap-6 px-4 text-center">
-				<div className="flex size-16 items-center justify-center rounded-full bg-red-500/10 text-red-500">
+				<div className="flex size-16 items-center justify-center rounded-full bg-danger/10 text-danger">
 					<TbAlertTriangle size={32} />
 				</div>
 				<div className="flex flex-col gap-2">
@@ -66,7 +66,7 @@ export function AiHome() {
 				</div>
 				<a
 					href={`/_/admin/ui/${projectId}/integrations?group=ai`}
-					className="inline-flex items-center gap-2 rounded-xl bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+					className="inline-flex items-center gap-2 rounded-xl bg-accent px-4 py-2 text-sm font-medium text-accent-foreground hover:bg-accent/90 transition-colors"
 				>
 					<TbPlugConnected size={18} />
 					Configure Integrations
@@ -108,7 +108,8 @@ export function AiHome() {
 					<Button
 						key={s.label}
 						size="sm"
-						className="rounded-full border border-white/10 bg-white/5 backdrop-blur-md px-4 py-2 text-white/70 hover:bg-white/10 hover:text-white"
+						variant="outline"
+						className="rounded-full border-border bg-surface px-4 py-2 text-muted hover:bg-surface-secondary hover:text-foreground"
 						onPress={() => setQuery(s.prompt)}
 					>
 						{s.label}
diff --git a/apps/portal/src/components/ai/ArtifactsSidebar.tsx b/apps/portal/src/components/ai/ArtifactsSidebar.tsx
index c63ef687..f6277eff 100644
--- a/apps/portal/src/components/ai/ArtifactsSidebar.tsx
+++ b/apps/portal/src/components/ai/ArtifactsSidebar.tsx
@@ -9,16 +9,16 @@ export function ArtifactsSidebar() {
 
 	return (
 		<div 
-			className={`h-full border-l border-white/10 bg-surface transition-all duration-300 ease-in-out shrink-0 overflow-hidden ${
+			className={`h-full border-l border-border bg-surface transition-all duration-300 ease-in-out shrink-0 overflow-hidden ${
 				selectedArtifact ? 'w-[500px] opacity-100' : 'w-0 opacity-0 border-none'
 			}`}
 		>
 			<div className="w-[500px] h-full flex flex-col relative">
-				<div className="h-14 flex items-center justify-between px-4 border-b border-white/10 shrink-0">
+				<div className="h-14 flex items-center justify-between px-4 border-b border-border shrink-0">
 					<h3 className="font-semibold text-foreground">Artifacts</h3>
 					<button 
 						onClick={() => setSelectedArtifact(null)} 
-						className="p-1 hover:bg-white/10 rounded-md text-muted hover:text-foreground transition-colors"
+						className="p-1 hover:bg-surface-secondary rounded-md text-muted hover:text-foreground transition-colors"
 					>
 						<TbChevronsRight size={20} />
 					</button>
@@ -49,7 +49,7 @@ export function ArtifactsSidebar() {
 							
 							<div>
 								<span className="text-[10px] text-muted uppercase font-bold tracking-wider">Props</span>
-								<pre className="text-xs text-muted bg-black/20 p-3 rounded-lg overflow-x-auto mt-1 border border-white/5 custom-scrollbar">
+								<pre className="text-xs text-muted bg-surface-secondary p-3 rounded-lg overflow-x-auto mt-1 border border-border custom-scrollbar">
 									{JSON.stringify(selectedArtifact.props, null, 2)}
 								</pre>
 							</div>
diff --git a/apps/portal/src/components/ai/ConversationItem.tsx b/apps/portal/src/components/ai/ConversationItem.tsx
index b67f93f5..a747198b 100644
--- a/apps/portal/src/components/ai/ConversationItem.tsx
+++ b/apps/portal/src/components/ai/ConversationItem.tsx
@@ -132,9 +132,14 @@ export function ConversationItem({
 								<TbEdit size={16} />
 								<Label>Rename</Label>
 							</Dropdown.Item>
-							<Dropdown.Item id="delete" variant="danger" textValue="Delete">
-								<TbTrash size={16} />
-								<Label>Delete</Label>
+							<Dropdown.Item
+								id="delete"
+								variant="danger"
+								textValue="Delete"
+								className="text-danger hover:bg-danger/10 focus:bg-danger/10 focus:text-danger"
+							>
+								<TbTrash size={16} className="text-danger" />
+								<Label className="text-danger">Delete</Label>
 							</Dropdown.Item>
 						</Dropdown.Menu>
 					</Dropdown.Popover>
diff --git a/apps/portal/src/components/ai/ConversationPage.tsx b/apps/portal/src/components/ai/ConversationPage.tsx
index 1a9fdd03..b425674e 100644
--- a/apps/portal/src/components/ai/ConversationPage.tsx
+++ b/apps/portal/src/components/ai/ConversationPage.tsx
@@ -192,14 +192,14 @@ export function ConversationPage() {
 					{isLoading ? (
 						<div className="flex w-full flex-col gap-8 animate-pulse pt-8 opacity-60">
 							<div className="flex w-full justify-end">
-								<div className="h-12 w-64 rounded-2xl bg-white/5"></div>
+								<div className="h-12 w-64 rounded-2xl bg-surface-secondary"></div>
 							</div>
 							<div className="flex w-full flex-col gap-2">
-								<div className="h-3 w-24 rounded-full bg-white/5 mb-1"></div>
-								<div className="h-20 w-full rounded-xl bg-white/5"></div>
+								<div className="h-3 w-24 rounded-full bg-surface-secondary mb-1"></div>
+								<div className="h-20 w-full rounded-xl bg-surface-secondary"></div>
 							</div>
 							<div className="flex w-full justify-end">
-								<div className="h-12 w-48 rounded-2xl bg-white/5"></div>
+								<div className="h-12 w-48 rounded-2xl bg-surface-secondary"></div>
 							</div>
 						</div>
 					) : messages.length === 0 && !optimisticQuery ? (
@@ -277,9 +277,9 @@ export function ConversationPage() {
 									) : isHistoricalPlan ? (
 										<div className="flex w-full flex-col gap-2">
 											{isRunActive && <HarnessStatusAccordion conversationId={conversationId} />}
-											<div className="w-full rounded-2xl border border-white/10 bg-white/5 p-4 flex flex-col gap-3 opacity-70">
+											<div className="w-full rounded-2xl border border-border bg-surface-secondary p-4 flex flex-col gap-3 opacity-70">
 												<div className="flex items-center gap-4">
-													<div className="bg-white/10 p-2.5 rounded-xl text-foreground shrink-0">
+													<div className="bg-surface p-2.5 rounded-xl text-foreground shrink-0 border border-border">
 														<TbListSearch size={20} />
 													</div>
 													<div className="flex-1">
@@ -305,11 +305,11 @@ export function ConversationPage() {
 					{isFetchingNextPage && (
 						<div className="flex w-full flex-col gap-8 animate-pulse py-8 opacity-60">
 							<div className="flex w-full justify-end">
-								<div className="h-12 w-64 rounded-2xl bg-white/5"></div>
+								<div className="h-12 w-64 rounded-2xl bg-surface-secondary"></div>
 							</div>
 							<div className="flex w-full flex-col gap-2">
-								<div className="h-3 w-24 rounded-full bg-white/5 mb-1"></div>
-								<div className="h-20 w-full rounded-xl bg-white/5"></div>
+								<div className="h-3 w-24 rounded-full bg-surface-secondary mb-1"></div>
+								<div className="h-20 w-full rounded-xl bg-surface-secondary"></div>
 							</div>
 						</div>
 					)}
diff --git a/apps/portal/src/components/ai/HarnessStatusAccordion.tsx b/apps/portal/src/components/ai/HarnessStatusAccordion.tsx
index 070163f0..463bd323 100644
--- a/apps/portal/src/components/ai/HarnessStatusAccordion.tsx
+++ b/apps/portal/src/components/ai/HarnessStatusAccordion.tsx
@@ -35,7 +35,7 @@ export function HarnessStatusAccordion({ conversationId }: { conversationId: str
 				</div>
 			</button>
 			<div className={`overflow-hidden transition-all duration-300 ease-in-out ${isExpanded ? "max-h-[500px] opacity-100 mt-1" : "max-h-0 opacity-0"}`}>
-				<div className="flex flex-col gap-3 p-4 bg-white/5 rounded-xl border border-white/10 mx-2">
+				<div className="flex flex-col gap-3 p-4 bg-surface-secondary rounded-xl border border-border mx-2">
 					{harnessSteps.map(step => {
 						const isCompleted = step.nodeStatus === "ended";
 						const isRunning = step.nodeStatus === "started" || step.nodeStatus === "running";
diff --git a/apps/portal/src/components/ai/MarkdownViewer.tsx b/apps/portal/src/components/ai/MarkdownViewer.tsx
index 84d9a9bb..a44de9f3 100644
--- a/apps/portal/src/components/ai/MarkdownViewer.tsx
+++ b/apps/portal/src/components/ai/MarkdownViewer.tsx
@@ -32,12 +32,12 @@ export function MarkdownViewer({ content }: MarkdownViewerProps) {
 					ol: ({ children }: any) => <ol className="list-decimal ml-6 mb-3 text-sm text-foreground/80">{children}</ol>,
 					li: ({ children }: any) => <li className="mb-1 text-sm">{children}</li>,
 					blockquote: ({ children }: any) => (
-						<blockquote className="border-l-4 border-white/20 pl-4 italic mb-3">
+						<blockquote className="border-l-4 border-border pl-4 italic mb-3 text-muted">
 							{children}
 						</blockquote>
 					),
 					pre: ({ children }: any) => (
-						<pre className="bg-black/20 p-4 rounded-xl mb-3 overflow-x-auto text-sm">
+						<pre className="bg-surface-secondary border border-border p-4 rounded-xl mb-3 overflow-x-auto text-sm">
 							{children}
 						</pre>
 					),
diff --git a/apps/portal/src/components/ai/ModelSelect.tsx b/apps/portal/src/components/ai/ModelSelect.tsx
index cd64d410..697fcfc5 100644
--- a/apps/portal/src/components/ai/ModelSelect.tsx
+++ b/apps/portal/src/components/ai/ModelSelect.tsx
@@ -40,11 +40,11 @@ export function ModelSelect({ projectId, value, models, onChange }: Props) {
 			onChange={(v) => v && onChange(String(v as Key))}
 			className="w-[240px]"
 		>
-			<Select.Trigger className="flex w-full h-9 items-center justify-between gap-2 rounded-2xl border border-white/10 bg-transparent px-3 font-medium text-muted-foreground shadow-none hover:bg-white/5 data-[open=true]:bg-white/5 data-[focus-visible=true]:ring-0 transition-colors relative">
+			<Select.Trigger className="flex w-full h-9 items-center justify-between gap-2 rounded-2xl border border-border bg-transparent px-3 font-medium text-muted shadow-none hover:bg-surface-secondary data-[open=true]:bg-surface-secondary data-[focus-visible=true]:ring-0 transition-colors relative">
 				{!value && (
 					<span className="absolute -top-1 -right-1 flex h-2.5 w-2.5">
-						<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-75"></span>
-						<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-red-500"></span>
+						<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-danger opacity-75"></span>
+						<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-danger"></span>
 					</span>
 				)}
 				<Select.Value>
diff --git a/apps/portal/src/components/ai/PlanReviewModal.tsx b/apps/portal/src/components/ai/PlanReviewModal.tsx
index 6f99a163..f7c343be 100644
--- a/apps/portal/src/components/ai/PlanReviewModal.tsx
+++ b/apps/portal/src/components/ai/PlanReviewModal.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import { Modal, Button, Popover, PopoverTrigger, PopoverContent } from "@fluxify/components";
+import { Modal, Button, CloseButton, DeleteIconButton, Popover, PopoverTrigger, PopoverContent } from "@fluxify/components";
 import { TbMessageCirclePlus, TbCheck, TbX, TbEdit, TbPlus } from "react-icons/tb";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -59,9 +59,9 @@ const HoverableBlock = ({
 			onMouseLeave={() => setHovered(false)}
 			className={`relative px-3 py-1 pr-12 my-1 rounded-lg transition-all duration-200 border-l-2 ${
 				isSelected || hasReview
-					? "bg-primary/20 border-primary"
+					? "bg-accent/15 border-accent"
 					: hovered
-						? "bg-white/5 border-transparent"
+						? "bg-surface-secondary border-transparent"
 						: "border-transparent"
 			}`}
 		>
@@ -76,19 +76,19 @@ const HoverableBlock = ({
 								isIconOnly
 								size="sm"
 								variant={hasReview ? "primary" : "secondary"}
-								className={`rounded-full h-7 w-7 shadow-md ${!hasReview && "bg-[#2a2a2b] hover:bg-[#3a3a3b] text-white"}`}
+								className="rounded-full h-7 w-7 shadow-md"
 							>
 								{hasReview ? <TbEdit size={14} /> : <TbMessageCirclePlus size={14} />}
 							</Button>
 						</PopoverTrigger>
-						<PopoverContent className="w-[320px] rounded-xl border border-white/10 bg-[#1e1e20] p-4 shadow-xl">
+						<PopoverContent className="w-[320px] rounded-xl border border-border bg-overlay p-4 shadow-xl">
 							<div className="flex w-full flex-col gap-3">
 								<textarea
 									ref={textareaRef}
 									placeholder="Add a review..."
 									value={reviewText}
 									onChange={(e) => setReviewText(e.target.value)}
-									className="w-full min-h-[100px] rounded-lg bg-black/20 p-3 text-sm text-foreground outline-none placeholder:text-muted resize-none border border-white/10 focus:border-primary/50"
+									className="w-full min-h-[100px] rounded-lg bg-surface p-3 text-sm text-foreground outline-none placeholder:text-muted resize-none border border-border focus:border-accent"
 								/>
 								<div className="flex justify-between items-center pt-1">
 									<button
@@ -236,12 +236,13 @@ export function PlanReviewModal({ isOpen, onOpenChange, plan, projectId, convers
 			<Modal.Backdrop>
 				<Modal.Container placement="center" size="lg">
 					<Modal.Dialog className="max-w-6xl w-full">
-						<Modal.Header className="border-b border-white/10 px-6 py-3">
+						<Modal.Header className="border-b border-border px-6 py-3 flex flex-row items-center justify-between">
 							<h3 className="text-lg font-semibold">Review Proposed Plan</h3>
+							<CloseButton />
 						</Modal.Header>
 						<Modal.Body className="p-0 flex flex-row overflow-hidden" style={{ height: "calc(90vh - 140px)" }}>
 							{/* Left Panel: Markdown Content (60%) */}
-							<div className="flex-1 overflow-y-auto p-6 border-r border-white/10 bg-background/50">
+							<div className="flex-1 overflow-y-auto p-6 border-r border-border bg-background">
 								<div className="mx-auto max-w-3xl">
 									{blockData.map((block) => {
 										return (
@@ -262,7 +263,7 @@ export function PlanReviewModal({ isOpen, onOpenChange, plan, projectId, convers
 
 							{/* Right Panel: Reviews (40%) */}
 							<div className="w-2/5 flex flex-col bg-surface overflow-hidden">
-								<div className="p-6 pb-4 border-b border-white/10 shrink-0 flex items-center justify-between">
+								<div className="p-6 pb-4 border-b border-border shrink-0 flex items-center justify-between">
 									<h4 className="text-lg font-semibold">Your Reviews</h4>
 									{/* @ts-expect-error placement is valid */}
 									<Popover placement="bottom-end" isOpen={customPopoverOpened} onOpenChange={(open) => {
@@ -272,7 +273,7 @@ export function PlanReviewModal({ isOpen, onOpenChange, plan, projectId, convers
 											<Button
 												size="sm"
 												variant="ghost"
-												className="h-7 text-xs border border-primary text-primary hover:bg-primary/20 px-3 rounded-md transition-colors"
+												className="h-7 text-xs border border-accent text-accent hover:bg-accent/10 px-3 rounded-md transition-colors"
 												onPress={() => {
 													setCustomReviewId(null);
 													setCustomReviewText("");
@@ -282,14 +283,14 @@ export function PlanReviewModal({ isOpen, onOpenChange, plan, projectId, convers
 												<TbPlus size={14} /> Add review
 											</Button>
 										</PopoverTrigger>
-										<PopoverContent className="w-[320px] rounded-xl border border-white/10 bg-[#1e1e20] p-4 shadow-xl">
+										<PopoverContent className="w-[320px] rounded-xl border border-border bg-overlay p-4 shadow-xl">
 											<div className="flex w-full flex-col gap-3">
 												<textarea
 													ref={customTextareaRef}
 													placeholder="Add a custom review..."
 													value={customReviewText}
 													onChange={(e) => setCustomReviewText(e.target.value)}
-													className="w-full min-h-[100px] rounded-lg bg-black/20 p-3 text-sm text-foreground outline-none placeholder:text-muted resize-none border border-white/10 focus:border-primary/50"
+													className="w-full min-h-[100px] rounded-lg bg-surface p-3 text-sm text-foreground outline-none placeholder:text-muted resize-none border border-border focus:border-accent"
 												/>
 												<div className="flex justify-between items-center pt-1">
 													<button
@@ -324,25 +325,23 @@ export function PlanReviewModal({ isOpen, onOpenChange, plan, projectId, convers
 													onClick={() => handleReviewClick(id)}
 													className={`group relative flex flex-col gap-2 rounded-xl border px-4 pt-5 pb-4 cursor-pointer transition-all duration-200 ${
 														selectedBlockId === id
-															? "border-primary bg-primary/10"
-															: "border-white/10 bg-white/5 hover:border-white/20"
+															? "border-accent bg-accent/10"
+															: "border-border bg-surface-secondary hover:border-accent/50"
 													}`}
 												>
 													<div className="flex justify-between items-start gap-2">
 														<p className="text-sm flex-1 whitespace-pre-wrap break-words m-0 mt-1">
 															{text}
 														</p>
-														<Button
-															isIconOnly
+														<DeleteIconButton
 															size="sm"
-															variant="danger"
+															icon={<TbX size={14} />}
 															className="opacity-0 group-hover:opacity-100 h-6 w-6 rounded-full shrink-0"
-															onPress={(e) => {
+															aria-label="Remove review"
+															onPress={() => {
 																handleSaveReview(id, "");
 															}}
-														>
-															<TbX size={14} />
-														</Button>
+														/>
 													</div>
 												</div>
 											))}
@@ -355,15 +354,15 @@ export function PlanReviewModal({ isOpen, onOpenChange, plan, projectId, convers
 								</div>
 
 								{/* Footer Actions */}
-								<div className="p-4 border-t border-white/10 bg-black/20 shrink-0 flex justify-end gap-3 items-center">
+								<div className="p-4 border-t border-border bg-surface-secondary shrink-0 flex justify-end gap-3 items-center">
 									{/* @ts-expect-error placement is valid */}
 									<Popover placement="top-end" isOpen={rejectPopoverOpened} onOpenChange={setRejectPopoverOpened}>
 										<PopoverTrigger>
-											<Button variant="danger" size="sm" isPending={actionMutation.isPending}>
+											<Button variant="danger-soft" size="sm" isPending={actionMutation.isPending}>
 												<TbX size={16} /> Reject
 											</Button>
 										</PopoverTrigger>
-										<PopoverContent className="w-72 rounded-xl border border-white/10 bg-[#1e1e20] p-4 shadow-xl">
+										<PopoverContent className="w-72 rounded-xl border border-border bg-overlay p-4 shadow-xl">
 											<div className="flex flex-col gap-3 w-full">
 												<span className="text-sm font-medium">Rejection Reason (Optional)</span>
 												<textarea
@@ -371,13 +370,13 @@ export function PlanReviewModal({ isOpen, onOpenChange, plan, projectId, convers
 													placeholder="Why are you rejecting this plan?"
 													value={rejectReason}
 													onChange={(e) => setRejectReason(e.target.value)}
-													className="w-full min-h-[60px] rounded-lg bg-black/20 p-2 text-sm text-foreground outline-none border border-white/10 focus:border-danger/50"
+													className="w-full min-h-[60px] rounded-lg bg-surface p-2 text-sm text-foreground outline-none border border-border focus:border-danger"
 												/>
 												<div className="flex justify-end gap-2 pt-1">
 													<Button size="sm" variant="ghost" className="h-7 text-xs px-3" onPress={() => setRejectPopoverOpened(false)}>
 														Cancel
 													</Button>
-													<Button size="sm" variant="danger" className="h-7 text-xs px-3" onPress={() => {
+													<Button size="sm" variant="danger-soft" className="h-7 text-xs px-3" onPress={() => {
 														setRejectPopoverOpened(false);
 														handleAction("reject");
 													}}>
diff --git a/apps/portal/src/components/ai/PromptEditor.tsx b/apps/portal/src/components/ai/PromptEditor.tsx
index 7c854066..bff9228e 100644
--- a/apps/portal/src/components/ai/PromptEditor.tsx
+++ b/apps/portal/src/components/ai/PromptEditor.tsx
@@ -246,9 +246,9 @@ export function PromptEditor({
     };
 
 	return (
-		<div className={`relative rounded-2xl border border-white/10 bg-[#161618] p-4 shadow-2xl transition-colors focus-within:border-[#ccff00]/50 ${isDisabled ? 'opacity-50 pointer-events-none' : ''}`}>
+		<div className={`relative rounded-2xl border border-border bg-surface-secondary p-4 shadow-2xl transition-colors focus-within:border-accent ${isDisabled ? 'opacity-50 pointer-events-none' : ''}`}>
 			{popoverOpen && (
-				<div ref={popoverRef} className="absolute bottom-[calc(100%+8px)] left-0 w-full rounded-xl border border-white/10 bg-[#1e1e20] p-2 shadow-xl z-50">
+				<div ref={popoverRef} className="absolute bottom-[calc(100%+8px)] left-0 w-full rounded-xl border border-border bg-overlay p-2 shadow-xl z-50">
 					<div className="w-full">
 						<div className="flex items-center gap-3">
 							<Input 
@@ -283,7 +283,7 @@ export function PromptEditor({
                                 }}
 								placeholder="Search resources..." 
 								autoFocus
-								className="w-64 bg-black/20 hover:bg-black/30 focus-within:ring-1 focus-within:ring-[var(--accent)] border-none rounded-lg h-9 min-h-9 px-3 text-sm text-foreground placeholder:text-muted"
+								className="w-64 bg-surface hover:bg-surface-secondary focus-within:ring-1 focus-within:ring-focus border-border rounded-lg h-9 min-h-9 px-3 text-sm text-foreground placeholder:text-muted"
 							/>
 							{isSearchLoading && (
 								<Spinner size="sm" color="current" />
@@ -304,9 +304,9 @@ export function PromptEditor({
                                                 closePopover();
                                                 setSearchQuery("");
                                             }}
-											className={`flex items-center gap-3 rounded-lg p-2 text-left hover:bg-white/5 ${i === selectedIndex ? "bg-white/10" : ""}`}
+											className={`flex items-center gap-3 rounded-lg p-2 text-left hover:bg-surface-secondary ${i === selectedIndex ? "bg-surface-secondary" : ""}`}
 										>
-											<div className="flex-shrink-0 text-muted-foreground">
+											<div className="flex-shrink-0 text-muted">
 												{res.type === "route" ? <TbStack2 size={16} /> :
 												 res.type === "app_config" ? <TbSquareKey size={16} /> :
 												 res.type === "integration" ? (
@@ -321,7 +321,7 @@ export function PromptEditor({
 											<div className="flex flex-col">
 												<span className="text-sm font-medium text-foreground">{res.name}</span>
 												{res.description && (
-													<span className="text-xs text-muted-foreground line-clamp-1">{res.description}</span>
+													<span className="text-xs text-muted line-clamp-1">{res.description}</span>
 												)}
 											</div>
 										</button>
@@ -361,13 +361,13 @@ export function PromptEditor({
             </LexicalComposer>
 
 			<div className="mt-2 flex items-end justify-between gap-3">
-				<div className="flex items-center gap-1 text-muted-foreground">
+				<div className="flex items-center gap-1 text-muted">
 					<Button
 						ref={triggerRef}
 						isIconOnly
 						size="sm"
 						variant="ghost"
-						className="rounded-full hover:bg-white/5 hover:text-foreground data-[pressed]:bg-white/10 data-[pressed]:text-foreground"
+						className="rounded-full hover:bg-surface-secondary hover:text-foreground"
 						aria-label="Insert resource"
 						onPress={() => {
 							if (popoverOpen) {
@@ -383,7 +383,7 @@ export function PromptEditor({
 						isIconOnly
 						size="sm"
 						variant="ghost"
-						className="rounded-full hover:bg-white/5 hover:text-foreground"
+						className="rounded-full hover:bg-surface-secondary hover:text-foreground"
 						aria-label="Prompt syntax help"
 						onPress={() => setHelpOpen(true)}
 					>
@@ -403,7 +403,8 @@ export function PromptEditor({
 					{isRunning ? (
 						<Button
 							isIconOnly
-							className="rounded-xl bg-red-500 text-white hover:bg-red-600 h-8 w-8"
+							variant="danger"
+							className="rounded-xl h-8 w-8"
 							aria-label="Stop"
 							onPress={onStop}
 						>
@@ -412,7 +413,8 @@ export function PromptEditor({
 					) : (
 						<Button
 							isIconOnly
-							className="rounded-xl bg-[#ccff00] text-black hover:bg-[#b3e600] disabled:opacity-50 disabled:bg-[#ccff00]/50 h-8 w-8"
+							variant="primary"
+							className="rounded-xl h-8 w-8"
 							aria-label="Send"
 							isDisabled={!canSend}
 							isPending={isPending || connStatus === "testing"}
diff --git a/apps/portal/src/components/ai/RenameConversationModal.tsx b/apps/portal/src/components/ai/RenameConversationModal.tsx
index 9c49ddd3..861107da 100644
--- a/apps/portal/src/components/ai/RenameConversationModal.tsx
+++ b/apps/portal/src/components/ai/RenameConversationModal.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Button, Modal, Input, TextField, Label } from "@fluxify/components";
+import { Button, Modal, CloseButton, Input, TextField, Label } from "@fluxify/components";
 import { harnessConversationsQuery } from "@/query/harnessConversationsQuery";
 import { showErrorNotification } from "@/lib/errorNotifier";
 
@@ -49,8 +49,9 @@ export function RenameConversationModal({
 			<Modal.Backdrop>
 				<Modal.Container placement="center" size="sm">
 					<Modal.Dialog>
-						<Modal.Header>
+						<Modal.Header className="flex flex-row items-center justify-between">
 							<Modal.Heading>Rename conversation</Modal.Heading>
+							<CloseButton />
 						</Modal.Header>
 						<Modal.Body>
 							<div className="py-2">
diff --git a/apps/portal/src/components/ai/ResourceChip.tsx b/apps/portal/src/components/ai/ResourceChip.tsx
index 45eef9c8..137c67b7 100644
--- a/apps/portal/src/components/ai/ResourceChip.tsx
+++ b/apps/portal/src/components/ai/ResourceChip.tsx
@@ -83,10 +83,10 @@ export function ResourceChip({ type, identifier, name, data }: ResourceChipProps
                     <span>{name || type.replace("_", " ")}</span>
                 </span>
             </PopoverTrigger>
-            <PopoverContent className="w-64 rounded-xl border border-white/10 bg-[#1e1e20] p-3 shadow-xl">
+            <PopoverContent className="w-64 rounded-xl border border-border bg-overlay p-3 shadow-xl">
                 <div className="flex flex-col gap-2">
                     <div className="flex items-center gap-2">
-                        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--accent)]/10 text-[var(--accent)]">
+                        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-accent/10 text-accent">
                             {CustomIconNode ? (
                                 <span className="[&>svg]:w-4 [&>svg]:h-4 inline-flex items-center">
                                     {CustomIconNode}
@@ -97,16 +97,16 @@ export function ResourceChip({ type, identifier, name, data }: ResourceChipProps
                         </div>
                         <div className="flex flex-col">
                             <span className="text-sm font-medium text-foreground">{name || type.replace("_", " ")}</span>
-                            <span className="text-[10px] uppercase tracking-wider text-muted-foreground">{type.replace("_", " ")}</span>
+                            <span className="text-[10px] uppercase tracking-wider text-muted">{type.replace("_", " ")}</span>
                         </div>
                     </div>
                     {parsedData?.description && (
-                        <p className="text-xs text-muted-foreground line-clamp-2 mt-1">
+                        <p className="text-xs text-muted line-clamp-2 mt-1">
                             {parsedData.description}
                         </p>
                     )}
                     {targetUrl && (
-                        <div className="mt-2 flex justify-end gap-2 border-t border-white/5 pt-2">
+                        <div className="mt-2 flex justify-end gap-2 border-t border-border pt-2">
                             <Button 
                                 size="sm" 
                                 variant="ghost" 
@@ -118,7 +118,8 @@ export function ResourceChip({ type, identifier, name, data }: ResourceChipProps
                             <Link to={targetUrl} target="_blank">
                                 <Button 
                                     size="sm" 
-                                    className="h-7 bg-[var(--accent)] text-black hover:bg-[var(--accent)]/90 text-xs px-3 font-medium flex items-center gap-1"
+                                    variant="primary"
+                                    className="h-7 text-xs px-3 font-medium flex items-center gap-1"
                                     onPress={() => setIsOpen(false)}
                                 >
                                     <span>Open Resource</span>
diff --git a/apps/portal/src/components/ai/ScrollToBottomButton.tsx b/apps/portal/src/components/ai/ScrollToBottomButton.tsx
index 59f8f971..a5093c58 100644
--- a/apps/portal/src/components/ai/ScrollToBottomButton.tsx
+++ b/apps/portal/src/components/ai/ScrollToBottomButton.tsx
@@ -13,7 +13,8 @@ export function ScrollToBottomButton({ isVisible, onClick }: Props) {
 		<div className="absolute left-1/2 -top-12 -translate-x-1/2 z-50">
 			<Button
 				isIconOnly
-				className="h-8 w-8 rounded-full shadow-md text-foreground bg-white border border-neutral-200 dark:bg-[var(--surface-secondary)] dark:border-[var(--border)] hover:bg-neutral-100 dark:hover:bg-[var(--border)]"
+				variant="outline"
+				className="h-8 w-8 rounded-full shadow-md text-foreground bg-surface border-border hover:bg-surface-secondary"
 				onPress={onClick}
 				aria-label="Scroll to bottom"
 			>
diff --git a/apps/portal/src/components/ai/SyntaxHelpModal.tsx b/apps/portal/src/components/ai/SyntaxHelpModal.tsx
index 68e5ee84..13dd392b 100644
--- a/apps/portal/src/components/ai/SyntaxHelpModal.tsx
+++ b/apps/portal/src/components/ai/SyntaxHelpModal.tsx
@@ -1,4 +1,4 @@
-import { Modal } from "@fluxify/components";
+import { Modal, CloseButton } from "@fluxify/components";
 
 type Props = {
 	isOpen: boolean;
@@ -13,11 +13,14 @@ export function SyntaxHelpModal({ isOpen, onOpenChange }: Props) {
 			<Modal.Backdrop>
 				<Modal.Container placement="center" size="md">
 					<Modal.Dialog>
-						<Modal.Header>
-							<Modal.Heading>Prompt syntax</Modal.Heading>
-							<p className="mt-1 text-sm text-muted">
-								Special syntax you can use in your message.
-							</p>
+						<Modal.Header className="flex flex-row items-start justify-between">
+							<div>
+								<Modal.Heading>Prompt syntax</Modal.Heading>
+								<p className="mt-1 text-sm text-muted">
+									Special syntax you can use in your message.
+								</p>
+							</div>
+							<CloseButton />
 						</Modal.Header>
 						<Modal.Body>
 							<div className="py-8 text-center text-sm text-muted">
diff --git a/apps/portal/src/components/ai/UserMessage.tsx b/apps/portal/src/components/ai/UserMessage.tsx
index 2a70c843..8d783a39 100644
--- a/apps/portal/src/components/ai/UserMessage.tsx
+++ b/apps/portal/src/components/ai/UserMessage.tsx
@@ -63,10 +63,10 @@ export function UserMessage({ query }: { query: string }) {
 						</div>
 					)}
 					{isExpanded && (
-						<div className="flex justify-center py-2 border-t border-white/5 bg-default-100">
+						<div className="flex justify-center py-2 border-t border-border bg-default-100">
 							<button 
 								onClick={() => setIsExpanded(false)}
-								className="text-xs text-muted-foreground font-medium hover:text-foreground"
+								className="text-xs text-muted font-medium hover:text-foreground"
 							>
 								Show less
 							</button>
diff --git a/apps/portal/src/components/ai/artifacts/ApplyBar.tsx b/apps/portal/src/components/ai/artifacts/ApplyBar.tsx
index 156b07ad..f460ecd1 100644
--- a/apps/portal/src/components/ai/artifacts/ApplyBar.tsx
+++ b/apps/portal/src/components/ai/artifacts/ApplyBar.tsx
@@ -181,7 +181,7 @@ export function RouteApplyBar({
 						variant="primary"
 						isDisabled={isPending}
 						aria-label="Other apply options"
-						className="cursor-pointer rounded-l-none border-l border-black/20 px-2"
+						className="cursor-pointer rounded-l-none border-l border-border px-2"
 					>
 						<TbChevronDown size={16} />
 					</Button>
@@ -189,7 +189,7 @@ export function RouteApplyBar({
 				<PopoverContent className="p-1">
 					<button
 						type="button"
-						className="w-full text-left text-sm px-3 py-2 rounded-md hover:bg-white/10 cursor-pointer"
+						className="w-full text-left text-sm px-3 py-2 rounded-md hover:bg-surface-secondary cursor-pointer"
 						onClick={() => {
 							setOpen(false);
 							void run([subArtifactId]);
diff --git a/apps/portal/src/components/ai/artifacts/CanvasPreview.tsx b/apps/portal/src/components/ai/artifacts/CanvasPreview.tsx
index 4e39fa0a..880b3425 100644
--- a/apps/portal/src/components/ai/artifacts/CanvasPreview.tsx
+++ b/apps/portal/src/components/ai/artifacts/CanvasPreview.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Button, Modal } from "@fluxify/components";
+import { Button, Modal, CloseButton } from "@fluxify/components";
 import { TbEye } from "react-icons/tb";
 import { BlockCanvas } from "@/components/canvas/BlockCanvas";
 import { createBlockNodeTypes } from "@/components/canvas/blocks";
@@ -42,14 +42,15 @@ export function CanvasPreview({ graph, title }: { graph: CanvasGraph; title: str
 
 	return (
 		<>
-			<div className="group relative h-52 rounded-lg border border-white/10 overflow-hidden">
+			<div className="group relative h-52 rounded-lg border border-border overflow-hidden">
 				{/* the thumbnail is decoration; every interaction goes through the modal */}
 				<div className="h-full pointer-events-none">
 					<ReadonlyCanvas graph={graph} />
 				</div>
-				<div className="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity">
+				<div className="absolute inset-0 flex items-center justify-center bg-overlay/60 backdrop-blur-xs opacity-0 group-hover:opacity-100 transition-opacity">
 					<Button
 						size="sm"
+						variant="primary"
 						className="flex items-center gap-2 cursor-pointer"
 						onPress={() => setOpen(true)}
 					>
@@ -69,8 +70,9 @@ export function CanvasPreview({ graph, title }: { graph: CanvasGraph; title: str
 							className="fx-canvas-modal"
 						>
 						<Modal.Dialog className="min-h-0">
-							<Modal.Header className="border-b border-white/10 px-6 py-3">
+							<Modal.Header className="border-b border-border px-6 py-3 flex flex-row items-center justify-between">
 								<h3 className="text-lg font-semibold">{title}</h3>
+								<CloseButton />
 							</Modal.Header>
 							<Modal.Body className="p-0 overflow-hidden flex-1 min-h-0">
 								{sized && <ReadonlyCanvas graph={graph} />}
diff --git a/apps/portal/src/components/ai/artifacts/RouteArtifact.tsx b/apps/portal/src/components/ai/artifacts/RouteArtifact.tsx
index 95f2db6f..e2c47256 100644
--- a/apps/portal/src/components/ai/artifacts/RouteArtifact.tsx
+++ b/apps/portal/src/components/ai/artifacts/RouteArtifact.tsx
@@ -52,7 +52,7 @@ function Field({
 				className={`text-xs whitespace-pre-wrap break-all mt-1 p-2 rounded-md border ${
 					changed
 						? "bg-success/10 border-success/30 text-foreground"
-						: "bg-black/20 border-white/5 text-muted"
+						: "bg-surface-secondary border-border text-muted"
 				}`}
 			>
 				{(changed ? after : before) || "—"}
@@ -92,7 +92,7 @@ export function RouteArtifact({ subArtifactId }: { subArtifactId: string }) {
 	return (
 		<div className="flex flex-col gap-5">
 			<div className="flex items-center gap-2">
-				<span className="text-xs px-2 py-0.5 rounded-md border border-white/10 bg-black/20 uppercase tracking-wider text-foreground">
+				<span className="text-xs px-2 py-0.5 rounded-md border border-border bg-surface-secondary uppercase tracking-wider text-foreground">
 					{action}
 				</span>
 				{subArtifact.appliedAt && (
diff --git a/apps/portal/src/components/appConfig/AppConfigTable.tsx b/apps/portal/src/components/appConfig/AppConfigTable.tsx
index 3fe8173b..04cf8011 100644
--- a/apps/portal/src/components/appConfig/AppConfigTable.tsx
+++ b/apps/portal/src/components/appConfig/AppConfigTable.tsx
@@ -2,6 +2,7 @@ import {
 	Button,
 	Checkbox,
 	Chip,
+	DeleteIconButton,
 	Table,
 } from "@fluxify/components";
 import {
@@ -10,7 +11,6 @@ import {
 	TbEdit,
 	TbLock,
 	TbLockOpen,
-	TbTrash,
 } from "react-icons/tb";
 import type { ConfigRow, SortBy } from "./types";
 
@@ -165,14 +165,10 @@ export function AppConfigTable({
 									>
 										<TbEdit size={16} />
 									</Button>
-									<Button
-										isIconOnly
-										variant="ghost"
+									<DeleteIconButton
 										aria-label="Delete config"
 										onPress={() => onDelete(row)}
-									>
-										<TbTrash size={16} />
-									</Button>
+									/>
 								</div>
 							</Table.Cell>
 						</Table.Row>
diff --git a/apps/portal/src/components/appConfig/CreateConfigModal.tsx b/apps/portal/src/components/appConfig/CreateConfigModal.tsx
index cd7dcdd3..4a5f9c5b 100644
--- a/apps/portal/src/components/appConfig/CreateConfigModal.tsx
+++ b/apps/portal/src/components/appConfig/CreateConfigModal.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import {
 	Button,
 	Checkbox,
+	CloseButton,
 	Input,
 	Label,
 	Modal,
@@ -76,8 +77,9 @@ export function CreateConfigButton({ projectId }: { projectId: string }) {
 			<Modal.Backdrop>
 				<Modal.Container placement="center" scroll="inside" size="lg">
 					<Modal.Dialog>
-						<Modal.Header>
+						<Modal.Header className="flex flex-row items-center justify-between">
 							<Modal.Heading>Add a config key</Modal.Heading>
+							<CloseButton />
 						</Modal.Header>
 						<form onSubmit={submit}>
 							<Modal.Body>
diff --git a/apps/portal/src/components/appConfig/EditConfigModal.tsx b/apps/portal/src/components/appConfig/EditConfigModal.tsx
index bab7246c..045acb18 100644
--- a/apps/portal/src/components/appConfig/EditConfigModal.tsx
+++ b/apps/portal/src/components/appConfig/EditConfigModal.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import {
 	Button,
 	Checkbox,
+	CloseButton,
 	Input,
 	Label,
 	Modal,
@@ -81,8 +82,9 @@ export function EditConfigModal({
 			<Modal.Backdrop>
 				<Modal.Container placement="center" scroll="inside" size="lg">
 					<Modal.Dialog>
-						<Modal.Header>
+						<Modal.Header className="flex flex-row items-center justify-between">
 							<Modal.Heading>Edit config key</Modal.Heading>
+							<CloseButton onPress={onClose} />
 						</Modal.Header>
 						{isLoading ? (
 							<div className="flex justify-center py-8">
diff --git a/apps/portal/src/components/canvas/PlaygroundModal.tsx b/apps/portal/src/components/canvas/PlaygroundModal.tsx
index e27ba899..de43157d 100644
--- a/apps/portal/src/components/canvas/PlaygroundModal.tsx
+++ b/apps/portal/src/components/canvas/PlaygroundModal.tsx
@@ -1,5 +1,4 @@
-import { Modal } from "@fluxify/components";
-import { TbX } from "react-icons/tb";
+import { Modal, CloseButton } from "@fluxify/components";
 import type { ReactNode } from "react";
 import { useCanvasPlayground } from "./PlaygroundContext";
 
@@ -13,7 +12,7 @@ export function PlaygroundModal({ children }: { children: ReactNode }) {
 					<Modal.Dialog className="flex h-[min(820px,86vh)] w-[min(1600px,96vw)] !max-w-none flex-col overflow-hidden border border-border bg-background p-0 shadow-2xl shadow-black/50">
 						<Modal.Header className="flex h-11 shrink-0 flex-row items-center border-b border-border px-4 py-0">
 							<Modal.Heading className="text-sm font-semibold">API Playground</Modal.Heading>
-							<Modal.CloseTrigger aria-label="Close API Playground" className="ml-auto"><TbX size={17} /></Modal.CloseTrigger>
+							<CloseButton aria-label="Close API Playground" className="ml-auto" />
 						</Modal.Header>
 						<Modal.Body className="min-h-0 flex-1 p-0">{children}</Modal.Body>
 					</Modal.Dialog>
diff --git a/apps/portal/src/components/canvas/panel/blocks/ForeachLoopSettings.tsx b/apps/portal/src/components/canvas/panel/blocks/ForeachLoopSettings.tsx
index b45e3ba7..71861b06 100644
--- a/apps/portal/src/components/canvas/panel/blocks/ForeachLoopSettings.tsx
+++ b/apps/portal/src/components/canvas/panel/blocks/ForeachLoopSettings.tsx
@@ -1,4 +1,4 @@
-import { Button, Description, JsTextField, Label } from "@fluxify/components";
+import { Button, DeleteIconButton, Description, JsTextField, Label } from "@fluxify/components";
 import { useReactFlow } from "@xyflow/react";
 import { TbMinus, TbPlus } from "react-icons/tb";
 import { useCanvasChanges } from "../../changes/ChangesContext";
@@ -70,16 +70,13 @@ export function ForeachLoopDataSettings({ block }: { block: BlockNode }) {
 								onChange={(next) => handleValueChange(index, next)}
 							/>
 						</div>
-						<Button
-							isIconOnly
-							variant="ghost"
+						<DeleteIconButton
+							icon={<TbMinus className="size-4" />}
 							size="sm"
 							isDisabled={!editable}
 							onPress={() => handleRemove(index)}
 							aria-label="Remove item"
-						>
-							<TbMinus className="size-4 text-danger" />
-						</Button>
+						/>
 					</div>
 				))}
 				{values.length === 0 && (
diff --git a/apps/portal/src/components/canvas/panel/blocks/HttpRequestSettings.tsx b/apps/portal/src/components/canvas/panel/blocks/HttpRequestSettings.tsx
index 289db28b..1c57c53c 100644
--- a/apps/portal/src/components/canvas/panel/blocks/HttpRequestSettings.tsx
+++ b/apps/portal/src/components/canvas/panel/blocks/HttpRequestSettings.tsx
@@ -1,4 +1,4 @@
-import { Button, Description, JsTextField, Label } from "@fluxify/components";
+import { Button, DeleteIconButton, Description, JsTextField, Label } from "@fluxify/components";
 import { useReactFlow } from "@xyflow/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { TbMinus, TbPlus } from "react-icons/tb";
@@ -107,16 +107,13 @@ function HeadersEditor({
 							onChange={(nextVal) => handleValueChange(index, nextVal)}
 						/>
 					</div>
-					<Button
+					<DeleteIconButton
 						aria-label="Remove header"
-						isIconOnly
+						icon={<TbMinus className="size-4" />}
 						isDisabled={!editable}
 						size="sm"
-						variant="ghost"
 						onPress={() => handleRemove(index)}
-					>
-						<TbMinus className="text-danger size-4" />
-					</Button>
+					/>
 				</div>
 			))}
 
diff --git a/apps/portal/src/components/common/ConfirmDialog.tsx b/apps/portal/src/components/common/ConfirmDialog.tsx
index 70eca08f..4df74872 100644
--- a/apps/portal/src/components/common/ConfirmDialog.tsx
+++ b/apps/portal/src/components/common/ConfirmDialog.tsx
@@ -9,6 +9,7 @@ type ConfirmDialogProps = {
 	confirmText?: string;
 	cancelText?: string;
 	danger?: boolean;
+	variant?: "primary" | "secondary" | "danger" | "danger-soft" | "ghost" | "outline";
 	pending?: boolean;
 	onConfirm: () => void;
 };
@@ -21,9 +22,11 @@ export function ConfirmDialog({
 	confirmText = "Confirm",
 	cancelText = "Cancel",
 	danger,
+	variant,
 	pending,
 	onConfirm,
 }: ConfirmDialogProps) {
+	const confirmVariant = variant ?? (danger ? "danger-soft" : "primary");
 	return (
 		<Modal isOpen={open} onOpenChange={onOpenChange}>
 			<Modal.Backdrop>
@@ -40,7 +43,7 @@ export function ConfirmDialog({
 								{cancelText}
 							</Button>
 							<Button
-								variant={danger ? "danger" : "primary"}
+								variant={confirmVariant}
 								isPending={pending}
 								onPress={onConfirm}
 							>
diff --git a/apps/portal/src/components/common/RoleSelector.tsx b/apps/portal/src/components/common/RoleSelector.tsx
index 879a231f..7bf1bc87 100644
--- a/apps/portal/src/components/common/RoleSelector.tsx
+++ b/apps/portal/src/components/common/RoleSelector.tsx
@@ -24,21 +24,21 @@ export function RoleSelector({
 					onClick={() => onRoleSelect(role.id)}
 					className={`relative flex flex-col items-start gap-1 rounded-xl border p-3 text-left transition-colors ${
 						selectedRole === role.id
-							? "border-[#ccff00] bg-white/[0.02]"
-							: "border-[#1e2029] bg-transparent hover:bg-white/[0.02]"
+							? "border-accent bg-accent/5"
+							: "border-border bg-transparent hover:bg-surface-secondary"
 					}`}
 				>
 					<div className="flex w-full items-center justify-between">
 						<span
 							className={`text-sm font-medium ${
-								selectedRole === role.id ? "text-foreground" : "text-muted-foreground"
+								selectedRole === role.id ? "text-foreground font-semibold" : "text-muted"
 							}`}
 						>
 							{role.title}
 						</span>
-						{selectedRole === role.id && <TbCheck className="text-[#ccff00]" size={16} />}
+						{selectedRole === role.id && <TbCheck className="text-accent" size={16} />}
 					</div>
-					<span className="text-xs text-muted-foreground">{role.description}</span>
+					<span className="text-xs text-muted">{role.description}</span>
 				</button>
 			))}
 		</div>
diff --git a/apps/portal/src/components/common/UserRoleSelector.tsx b/apps/portal/src/components/common/UserRoleSelector.tsx
index e0a91270..41855cd1 100644
--- a/apps/portal/src/components/common/UserRoleSelector.tsx
+++ b/apps/portal/src/components/common/UserRoleSelector.tsx
@@ -20,8 +20,8 @@ export function UserRoleSelector({
 
 	return (
 		<div className="flex flex-col gap-6">
-			<div className="flex items-center gap-3 rounded-xl border border-[#1e2029] bg-black/40 p-3">
-				<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#1A1C23] text-xs font-semibold text-zinc-300 ring-1 ring-white/10">
+			<div className="flex items-center gap-3 rounded-xl border border-border bg-surface-secondary p-3">
+				<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-surface text-xs font-semibold text-foreground ring-1 ring-border">
 					{getInitials(user.name, user.email)}
 				</div>
 				<div className="flex flex-col">
diff --git a/apps/portal/src/components/home/ProjectCard.tsx b/apps/portal/src/components/home/ProjectCard.tsx
index 691495a1..df0a44ce 100644
--- a/apps/portal/src/components/home/ProjectCard.tsx
+++ b/apps/portal/src/components/home/ProjectCard.tsx
@@ -1,7 +1,7 @@
-import { Card } from "@fluxify/components";
+import { Button, Tooltip } from "@fluxify/components";
 import { useNavigate } from "@tanstack/react-router";
 import { APP_ROUTES } from "@/constants/routes";
-import { TbUsers, TbHierarchy } from "react-icons/tb";
+import { TbUsers, TbHierarchy, TbSettings } from "react-icons/tb";
 
 type ProjectCardProps = {
 	id: string;
@@ -47,22 +47,41 @@ export function ProjectCard({ id, name, description, totalUsers, totalRoutes, up
 			className="group relative flex cursor-pointer flex-col justify-between overflow-hidden rounded-xl border border-border bg-background-secondary transition-all duration-300 hover:scale-[1.01] hover:border-accent"
 		>
 			<div className="flex flex-col p-5">
-				<div className="flex items-start justify-between">
-					<div className="flex items-center gap-3">
+				<div className="flex items-start justify-between gap-2">
+					<div className="flex items-center gap-3 min-w-0">
 						<div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg border border-border bg-background text-sm font-bold text-foreground shadow-sm">
 							{initials}
 						</div>
-						<div className="flex flex-col">
-							<span className="text-base font-semibold text-foreground">{name}</span>
+						<div className="flex flex-col min-w-0">
+							<span className="truncate text-base font-semibold text-foreground">{name}</span>
 						</div>
 					</div>
 					
-					<button className="rounded bg-[#ccff00] px-3 py-1.5 text-xs font-semibold text-black opacity-0 transition-all duration-300 group-hover:opacity-100">
-						Open
-					</button>
+					<Tooltip>
+						<Button
+							type="button"
+							isIconOnly
+							size="sm"
+							variant="ghost"
+							aria-label="Settings"
+							className="shrink-0 text-muted hover:text-foreground opacity-0 transition-opacity duration-200 group-hover:opacity-100 focus-visible:opacity-100"
+							onClick={(e) => {
+								e.stopPropagation();
+							}}
+							onKeyDown={(e) => {
+								e.stopPropagation();
+							}}
+							onPress={() => {
+								navigate({ to: APP_ROUTES.PROJECT_SETTINGS(id) as "/" });
+							}}
+						>
+							<TbSettings size={18} />
+						</Button>
+						<Tooltip.Content>Settings</Tooltip.Content>
+					</Tooltip>
 				</div>
 				
-				<div className="mt-4 text-sm text-muted-foreground">
+				<div className="mt-4 text-sm text-muted">
 					{description ? (
 						<p className="truncate">{description}</p>
 					) : (
@@ -72,11 +91,11 @@ export function ProjectCard({ id, name, description, totalUsers, totalRoutes, up
 			</div>
 
 			<div className="flex items-center gap-5 border-t border-border/50 px-5 py-3">
-				<div className="flex items-center gap-1.5 text-muted-foreground">
+				<div className="flex items-center gap-1.5 text-muted">
 					<TbUsers className="h-4 w-4" />
 					<span className="text-xs font-medium">{formatQuantity(usersCount)}</span>
 				</div>
-				<div className="flex items-center gap-1.5 text-muted-foreground">
+				<div className="flex items-center gap-1.5 text-muted">
 					<TbHierarchy className="h-4 w-4" />
 					<span className="text-xs font-medium">{formatQuantity(routesCount)}</span>
 				</div>
diff --git a/apps/portal/src/components/home/UsersList.tsx b/apps/portal/src/components/home/UsersList.tsx
index dcd48cd6..69cb1bf2 100644
--- a/apps/portal/src/components/home/UsersList.tsx
+++ b/apps/portal/src/components/home/UsersList.tsx
@@ -3,6 +3,7 @@ import {
 	Button,
 	Chip,
 	Checkbox,
+	CloseButton,
 	Dropdown,
 	Input,
 	Label,
@@ -153,9 +154,14 @@ export function UsersList() {
 																	<Label>Change password</Label>
 																</Dropdown.Item>
 															)}
-															<Dropdown.Item onAction={() => setPending({ action: "delete", user })} variant="danger" textValue="Delete user">
-																<TbTrash size={16} />
-																<Label>Delete user</Label>
+															<Dropdown.Item
+																onAction={() => setPending({ action: "delete", user })}
+																variant="danger"
+																textValue="Delete user"
+																className="text-danger hover:bg-danger/10 focus:bg-danger/10 focus:text-danger"
+															>
+																<TbTrash size={16} className="text-danger" />
+																<Label className="text-danger">Delete user</Label>
 															</Dropdown.Item>
 														</Dropdown.Menu>
 													</Dropdown.Popover>
@@ -278,8 +284,9 @@ function ChangePasswordModal({
 			<Modal.Backdrop>
 				<Modal.Container placement="center" size="sm">
 					<Modal.Dialog>
-						<Modal.Header>
+						<Modal.Header className="flex flex-row items-center justify-between">
 							<Modal.Heading>Change password</Modal.Heading>
+							<CloseButton onPress={close} />
 						</Modal.Header>
 						<form
 							onSubmit={(event) => {
@@ -364,8 +371,9 @@ function AddUserButton() {
 			<Modal.Backdrop>
 				<Modal.Container placement="center" size="sm">
 					<Modal.Dialog>
-						<Modal.Header>
+						<Modal.Header className="flex flex-row items-center justify-between">
 							<Modal.Heading>Add a user</Modal.Heading>
+							<CloseButton />
 						</Modal.Header>
 						<form onSubmit={submit}>
 							<Modal.Body>
@@ -379,7 +387,7 @@ function AddUserButton() {
 										<Input placeholder="ada@company.com" />
 									</TextField>
 									{authConfig?.mode === "sso_only" ? (
-										<div className="rounded-md bg-violet-50 p-3 text-sm text-violet-900 border border-violet-200">
+										<div className="rounded-md bg-surface-secondary p-3 text-sm text-muted border border-border">
 											SSO is configured and traditional login is disabled. This user will sign in through your identity provider — no password needed.
 										</div>
 									) : (
diff --git a/apps/portal/src/components/home/instance-settings/auth/AuthModeCard.tsx b/apps/portal/src/components/home/instance-settings/auth/AuthModeCard.tsx
index 72a306ed..e014c57c 100644
--- a/apps/portal/src/components/home/instance-settings/auth/AuthModeCard.tsx
+++ b/apps/portal/src/components/home/instance-settings/auth/AuthModeCard.tsx
@@ -13,7 +13,7 @@ const CheckIcon = ({ className }: { className?: string }) => (
 		<circle cx="12" cy="12" r="12" fill="currentColor" />
 		<path
 			d="M7 12.5L10 15.5L17 8.5"
-			stroke="black"
+			stroke="var(--accent-foreground, #000)"
 			strokeWidth="2.5"
 			strokeLinecap="round"
 			strokeLinejoin="round"
@@ -35,8 +35,8 @@ export function AuthModeCard({ type, onChange }: AuthModeCardProps) {
 				className={cn(
 					"relative flex flex-col text-left p-4 rounded-[12px] border transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
 					type === "traditional"
-						? "border-[#d4ff00] bg-[#d4ff00]/[0.03]"
-						: "border-border bg-background hover:bg-accent/30",
+						? "border-accent bg-accent/5"
+						: "border-border bg-background hover:bg-surface-secondary",
 				)}
 			>
 				<div className="flex w-full items-start justify-between mb-4">
@@ -44,18 +44,18 @@ export function AuthModeCard({ type, onChange }: AuthModeCardProps) {
 						className={cn(
 							"flex h-8 w-8 items-center justify-center rounded-lg transition-colors",
 							type === "traditional"
-								? "bg-[#d4ff00] text-black"
-								: "bg-transparent border border-border text-muted-foreground",
+								? "bg-accent text-accent-foreground"
+								: "bg-transparent border border-border text-muted",
 						)}
 					>
 						<FiMail className="h-4 w-4" />
 					</div>
 					<div className="flex items-center gap-1.5">
-						<span className="rounded bg-transparent border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+						<span className="rounded bg-transparent border border-border px-2 py-0.5 text-[10px] font-medium text-muted">
 							Default
 						</span>
 						{type === "traditional" && (
-							<CheckIcon className="h-5 w-5 text-[#d4ff00]" />
+							<CheckIcon className="h-5 w-5 text-accent" />
 						)}
 					</div>
 				</div>
@@ -63,7 +63,7 @@ export function AuthModeCard({ type, onChange }: AuthModeCardProps) {
 					<h4 className="text-sm font-bold text-foreground mb-1">
 						Traditional (Email + Password)
 					</h4>
-					<p className="text-xs text-muted-foreground leading-relaxed">
+					<p className="text-xs text-muted leading-relaxed">
 						Email + Password with optional 2FA. Best for small teams.
 					</p>
 				</div>
@@ -75,8 +75,8 @@ export function AuthModeCard({ type, onChange }: AuthModeCardProps) {
 				className={cn(
 					"relative flex flex-col text-left p-4 rounded-[12px] border transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
 					type === "sso"
-						? "border-[#d4ff00] bg-[#d4ff00]/[0.03]"
-						: "border-border bg-background hover:bg-accent/30",
+						? "border-accent bg-accent/5"
+						: "border-border bg-background hover:bg-surface-secondary",
 				)}
 			>
 				<div className="flex w-full items-start justify-between mb-4">
@@ -84,22 +84,22 @@ export function AuthModeCard({ type, onChange }: AuthModeCardProps) {
 						className={cn(
 							"flex h-8 w-8 items-center justify-center rounded-lg transition-colors",
 							type === "sso"
-								? "bg-[#d4ff00] text-black"
-								: "bg-transparent border border-border text-muted-foreground",
+								? "bg-accent text-accent-foreground"
+								: "bg-transparent border border-border text-muted",
 						)}
 					>
 						<FiShield className="h-4 w-4" />
 					</div>
 					<div className="flex items-center gap-1.5">
-						<span className="rounded bg-transparent border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+						<span className="rounded bg-transparent border border-border px-2 py-0.5 text-[10px] font-medium text-muted">
 							Enterprise
 						</span>
-						{type === "sso" && <CheckIcon className="h-5 w-5 text-[#d4ff00]" />}
+						{type === "sso" && <CheckIcon className="h-5 w-5 text-accent" />}
 					</div>
 				</div>
 				<div>
 					<h4 className="text-sm font-bold text-foreground mb-1">SSO Only</h4>
-					<p className="text-xs text-muted-foreground leading-relaxed">
+					<p className="text-xs text-muted leading-relaxed">
 						Enforce enterprise identity. Password login hidden for all users.
 					</p>
 				</div>
diff --git a/apps/portal/src/components/home/instance-settings/auth/SsoCard.tsx b/apps/portal/src/components/home/instance-settings/auth/SsoCard.tsx
index 1b4a34bb..2fd33f4d 100644
--- a/apps/portal/src/components/home/instance-settings/auth/SsoCard.tsx
+++ b/apps/portal/src/components/home/instance-settings/auth/SsoCard.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Button, Input, Modal, Tabs, toast, cn } from "@fluxify/components";
+import { Button, CloseButton, Input, Modal, Tabs, toast, cn } from "@fluxify/components";
 import { instanceSettingsQuery } from "@/query/instanceSettingsQuery";
 import { showErrorNotification } from "@/lib/errorNotifier";
 import {
@@ -173,8 +173,8 @@ export function SsoCard({ initialType, initial }: { initialType: AuthType; initi
 									className={cn(
 										"flex items-center gap-2 rounded-sm px-3 py-1 text-sm font-medium transition-colors",
 										provider === "oidc"
-											? "bg-accent text-black shadow-sm border border-border/50"
-											: "text-muted-foreground hover:text-foreground"
+											? "bg-accent text-accent-foreground shadow-sm border border-border/50"
+											: "text-muted hover:text-foreground"
 									)}
 								>
 									<FiKey className="h-4 w-4" />
@@ -186,8 +186,8 @@ export function SsoCard({ initialType, initial }: { initialType: AuthType; initi
 									className={cn(
 										"flex items-center gap-2 rounded-sm px-3 py-1 text-sm font-medium transition-colors",
 										provider === "saml"
-											? "bg-accent text-black shadow-sm border border-border/50"
-											: "text-muted-foreground hover:text-foreground"
+											? "bg-accent text-accent-foreground shadow-sm border border-border/50"
+											: "text-muted hover:text-foreground"
 									)}
 								>
 									<FiShield className="h-4 w-4" />
@@ -199,11 +199,11 @@ export function SsoCard({ initialType, initial }: { initialType: AuthType; initi
 						{/* Shared Fields */}
 						<div className="grid grid-cols-2 gap-5">
 							<div className="flex flex-col gap-1.5">
-								<label className="text-[10px] font-bold tracking-widest text-muted-foreground uppercase">
+								<label className="text-[10px] font-bold tracking-widest text-muted uppercase">
 									Issuer URL
 								</label>
 								<div className="relative flex items-center">
-									<FiGlobe className="absolute left-2.5 text-muted-foreground h-3.5 w-3.5" />
+									<FiGlobe className="absolute left-2.5 text-muted h-3.5 w-3.5" />
 									<Input
 										value={issuer}
 										onChange={(e: React.ChangeEvent<HTMLInputElement>) => setIssuer(e.target.value)}
@@ -213,11 +213,11 @@ export function SsoCard({ initialType, initial }: { initialType: AuthType; initi
 								</div>
 							</div>
 							<div className="flex flex-col gap-1.5">
-								<label className="text-[10px] font-bold tracking-widest text-muted-foreground uppercase">
+								<label className="text-[10px] font-bold tracking-widest text-muted uppercase">
 									Email Domain
 								</label>
 								<div className="relative flex items-center">
-									<FiAtSign className="absolute left-2.5 text-muted-foreground h-3.5 w-3.5" />
+									<FiAtSign className="absolute left-2.5 text-muted h-3.5 w-3.5" />
 									<Input
 										value={domain}
 										onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDomain(e.target.value)}
@@ -232,7 +232,7 @@ export function SsoCard({ initialType, initial }: { initialType: AuthType; initi
 						{provider === "oidc" && (
 							<div className="grid grid-cols-2 gap-5">
 								<div className="flex flex-col gap-1.5">
-									<label className="text-[10px] font-bold tracking-widest text-muted-foreground uppercase">
+									<label className="text-[10px] font-bold tracking-widest text-muted uppercase">
 										Client ID
 									</label>
 									<Input
@@ -244,24 +244,24 @@ export function SsoCard({ initialType, initial }: { initialType: AuthType; initi
 								</div>
 								<div className="flex flex-col gap-1.5">
 									<div className="flex items-center gap-2">
-										<label className="text-[10px] font-bold tracking-widest text-muted-foreground uppercase">
+										<label className="text-[10px] font-bold tracking-widest text-muted uppercase">
 											Client Secret
 										</label>
-										<span className="rounded-full border border-[#d4ff00]/30 bg-[#d4ff00]/10 px-1.5 py-0 text-[9px] font-medium text-[#d4ff00]">
+										<span className="rounded-full border border-accent/30 bg-accent/10 px-1.5 py-0 text-[9px] font-medium text-accent">
 											Set • Write-only
 										</span>
 									</div>
 									<div className="relative flex items-center">
-										<FiLock className="absolute left-2.5 text-muted-foreground h-3.5 w-3.5" />
+										<FiLock className="absolute left-2.5 text-muted h-3.5 w-3.5" />
 										<Input
 											type="password"
 											value={clientSecret}
 											onChange={(e: React.ChangeEvent<HTMLInputElement>) => setClientSecret(e.target.value)}
 											placeholder="Re-enter to rotate ••••••"
-											className="pl-8 font-mono text-xs w-full placeholder:text-muted-foreground/50"
+											className="pl-8 font-mono text-xs w-full placeholder:text-muted/50"
 										/>
 									</div>
-									<p className="text-[10px] text-muted-foreground mt-0.5">
+									<p className="text-[10px] text-muted mt-0.5">
 										Leave blank to keep existing secret.
 									</p>
 								</div>
@@ -272,7 +272,7 @@ export function SsoCard({ initialType, initial }: { initialType: AuthType; initi
 						{provider === "saml" && (
 							<div className="flex flex-col gap-5">
 								<div className="flex flex-col gap-1.5">
-									<label className="text-[10px] font-bold tracking-widest text-muted-foreground uppercase">
+									<label className="text-[10px] font-bold tracking-widest text-muted uppercase">
 										Entry Point URL
 									</label>
 									<Input
@@ -284,10 +284,10 @@ export function SsoCard({ initialType, initial }: { initialType: AuthType; initi
 								</div>
 								<div className="flex flex-col gap-1.5">
 									<div className="flex items-center gap-2">
-										<label className="text-[10px] font-bold tracking-widest text-muted-foreground uppercase">
+										<label className="text-[10px] font-bold tracking-widest text-muted uppercase">
 											SAML Certificate
 										</label>
-										<span className="rounded-full border border-[#d4ff00]/30 bg-[#d4ff00]/10 px-1.5 py-0 text-[9px] font-medium text-[#d4ff00]">
+										<span className="rounded-full border border-accent/30 bg-accent/10 px-1.5 py-0 text-[9px] font-medium text-accent">
 											Set • Write-only
 										</span>
 									</div>
@@ -295,7 +295,7 @@ export function SsoCard({ initialType, initial }: { initialType: AuthType; initi
 										value={samlCert}
 										onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setSamlCert(e.target.value)}
 										placeholder="Re-enter to rotate — BEGIN CERTIFICATE"
-										className="flex min-h-[100px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-xs shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 font-mono placeholder:text-muted-foreground/50"
+										className="flex min-h-[100px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-xs shadow-sm placeholder:text-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 font-mono placeholder:text-muted/50"
 									/>
 								</div>
 							</div>
@@ -306,13 +306,14 @@ export function SsoCard({ initialType, initial }: { initialType: AuthType; initi
 						<Modal.Backdrop>
 							<Modal.Container placement="center" scroll="inside" size="lg">
 								<Modal.Dialog className="w-full !max-w-5xl max-h-[85vh]">
-									<Modal.Header>
+									<Modal.Header className="flex flex-row items-start justify-between">
 										<div>
 											<Modal.Heading>Configuration Guide</Modal.Heading>
-											<p className="mt-1 text-sm text-muted-foreground">
+											<p className="mt-1 text-sm text-muted">
 												Use these values when creating an application in your identity provider.
 											</p>
 										</div>
+										<CloseButton />
 									</Modal.Header>
 									<Modal.Body>
 										<Tabs
@@ -334,33 +335,33 @@ export function SsoCard({ initialType, initial }: { initialType: AuthType; initi
 
 											<Tabs.Panel id="oidc" className="pt-5">
 												<div className="flex flex-col gap-5">
-													<div className="rounded-lg border border-border border-l-2 border-l-primary bg-background p-4">
+													<div className="rounded-lg border border-border border-l-2 border-l-accent bg-background p-4">
 														<h4 className="font-semibold text-foreground">1. Create an OIDC application</h4>
-														<p className="mt-1 text-sm text-muted-foreground">Choose a web application in your IdP and enable the <code className="rounded bg-background px-1 py-0.5 text-xs text-foreground">openid</code>, <code className="rounded bg-background px-1 py-0.5 text-xs text-foreground">profile</code>, and <code className="rounded bg-background px-1 py-0.5 text-xs text-foreground">email</code> scopes.</p>
+														<p className="mt-1 text-sm text-muted">Choose a web application in your IdP and enable the <code className="rounded bg-background px-1 py-0.5 text-xs text-foreground">openid</code>, <code className="rounded bg-background px-1 py-0.5 text-xs text-foreground">profile</code>, and <code className="rounded bg-background px-1 py-0.5 text-xs text-foreground">email</code> scopes.</p>
 													</div>
 													<div className="grid gap-3 md:grid-cols-2">
 														<CopyCodeBlock label="Redirect URI" description="Paste into your IdP callback or redirect URI field." value={oidcCallbackUrl} copied={copiedGuideValue === "OIDC redirect URI"} onCopy={() => copyGuideValue("OIDC redirect URI", oidcCallbackUrl)} />
 														<CopyCodeBlock label="Required scopes" description="Enable these so Fluxify receives the user email." value="openid profile email" copied={copiedGuideValue === "OIDC scopes"} onCopy={() => copyGuideValue("OIDC scopes", "openid profile email")} />
 													</div>
 													<div className="grid gap-3 md:grid-cols-2">
-														<div className="rounded-lg border border-border p-4"><h4 className="font-semibold text-foreground">2. Copy IdP credentials</h4><p className="mt-1 text-sm text-muted-foreground">Put the IdP issuer in <span className="font-medium text-foreground">Issuer URL</span>, then enter its client ID and client secret in Fluxify.</p></div>
-														<div className="rounded-lg border border-border p-4"><h4 className="font-semibold text-foreground">3. Limit access</h4><p className="mt-1 text-sm text-muted-foreground">Enter your organisation email domain, save, then test with a pre-provisioned Fluxify user.</p></div>
+														<div className="rounded-lg border border-border p-4"><h4 className="font-semibold text-foreground">2. Copy IdP credentials</h4><p className="mt-1 text-sm text-muted">Put the IdP issuer in <span className="font-medium text-foreground">Issuer URL</span>, then enter its client ID and client secret in Fluxify.</p></div>
+														<div className="rounded-lg border border-border p-4"><h4 className="font-semibold text-foreground">3. Limit access</h4><p className="mt-1 text-sm text-muted">Enter your organisation email domain, save, then test with a pre-provisioned Fluxify user.</p></div>
 													</div>
 												</div>
 											</Tabs.Panel>
 
 											<Tabs.Panel id="saml" className="pt-5">
 												<div className="flex flex-col gap-5">
-													<div className="rounded-lg border border-border border-l-2 border-l-primary bg-background p-4">
+													<div className="rounded-lg border border-border border-l-2 border-l-accent bg-background p-4">
 														<h4 className="font-semibold text-foreground">1. Create a SAML application</h4>
-														<p className="mt-1 text-sm text-muted-foreground">Create the application manually in your IdP, then use the ACS or Reply URL below.</p>
+														<p className="mt-1 text-sm text-muted">Create the application manually in your IdP, then use the ACS or Reply URL below.</p>
 													</div>
 													<div className="max-w-xl">
 														<CopyCodeBlock label="ACS / Reply URL" description="Use this in the ACS or reply URL field for manual setup." value={samlAcsUrl} copied={copiedGuideValue === "SAML ACS URL"} onCopy={() => copyGuideValue("SAML ACS URL", samlAcsUrl)} />
 													</div>
 													<div className="grid gap-3 md:grid-cols-2">
-														<div className="rounded-lg border border-border p-4"><h4 className="font-semibold text-foreground">2. Copy IdP details</h4><p className="mt-1 text-sm text-muted-foreground">Put the IdP entity ID in <span className="font-medium text-foreground">Issuer URL</span>, its SSO login URL in <span className="font-medium text-foreground">Entry Point URL</span>, and its signing certificate in <span className="font-medium text-foreground">SAML Certificate</span>.</p></div>
-														<div className="rounded-lg border border-border p-4"><h4 className="font-semibold text-foreground">3. Send email and test</h4><p className="mt-1 text-sm text-muted-foreground">Map the user email in the SAML assertion, enter your organisation email domain, and test with a pre-provisioned user.</p></div>
+														<div className="rounded-lg border border-border p-4"><h4 className="font-semibold text-foreground">2. Copy IdP details</h4><p className="mt-1 text-sm text-muted">Put the IdP entity ID in <span className="font-medium text-foreground">Issuer URL</span>, its SSO login URL in <span className="font-medium text-foreground">Entry Point URL</span>, and its signing certificate in <span className="font-medium text-foreground">SAML Certificate</span>.</p></div>
+														<div className="rounded-lg border border-border p-4"><h4 className="font-semibold text-foreground">3. Send email and test</h4><p className="mt-1 text-sm text-muted">Map the user email in the SAML assertion, enter your organisation email domain, and test with a pre-provisioned user.</p></div>
 													</div>
 												</div>
 											</Tabs.Panel>
@@ -383,7 +384,7 @@ export function SsoCard({ initialType, initial }: { initialType: AuthType; initi
 					type="submit"
 					variant="primary"
 					isPending={patchAuth.isPending}
-					className="bg-[#d4ff00] text-black text-xs h-8 px-4 font-semibold hover:bg-[#d4ff00]/90"
+					className="text-xs h-8 px-4 font-semibold"
 				>
 					Save changes
 				</Button>
diff --git a/apps/portal/src/components/integrations/AppConfigSelector.tsx b/apps/portal/src/components/integrations/AppConfigSelector.tsx
index 200deb05..b8b9f0dd 100644
--- a/apps/portal/src/components/integrations/AppConfigSelector.tsx
+++ b/apps/portal/src/components/integrations/AppConfigSelector.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useRef, useState } from "react";
-import { Input, Label, cn } from "@fluxify/components";
-import { TbSquareKey, TbX, TbReload } from "react-icons/tb";
-import { appConfigQuery } from "@/query/appConfigQuery";
+import { useEffect, useState } from "react";
+import { Label, cn } from "@fluxify/components";
+import { TbSquareKey, TbX } from "react-icons/tb";
+import { AppConfigSelectorModal } from "./AppConfigSelectorModal";
 
 type Props = {
 	projectId: string;
@@ -12,8 +12,8 @@ type Props = {
 	onChange?: (value: string) => void;
 };
 
-// Faithful port of web AppConfigSelector: a field that holds either a literal
-// value or an app-config reference (`cfg:<key>`) picked from the project's keys.
+// Field that holds either a literal value or an app-config reference (`cfg:<key>`)
+// selected via a dedicated modal dialog.
 export function AppConfigSelector({
 	projectId,
 	value,
@@ -23,37 +23,18 @@ export function AppConfigSelector({
 	onChange,
 }: Props) {
 	const [local, setLocal] = useState(value);
-	const [open, setOpen] = useState(false);
-	const [search, setSearch] = useState("");
-	const boxRef = useRef<HTMLDivElement>(null);
-	const { data: keys, isLoading, refetch } = appConfigQuery.getKeysList.useQuery(
-		projectId,
-		"",
-	);
+	const [modalOpen, setModalOpen] = useState(false);
 
 	useEffect(() => setLocal(value), [value]);
 
-	// close the picker on outside click
-	useEffect(() => {
-		if (!open) return;
-		function onDoc(e: MouseEvent) {
-			if (boxRef.current && !boxRef.current.contains(e.target as Node)) setOpen(false);
-		}
-		document.addEventListener("mousedown", onDoc);
-		return () => document.removeEventListener("mousedown", onDoc);
-	}, [open]);
-
 	const isConfig = local.startsWith("cfg:");
 	function set(v: string) {
 		setLocal(v);
 		onChange?.(v);
 	}
-	const filtered = (keys ?? []).filter((k) =>
-		k.toLowerCase().includes(search.toLowerCase()),
-	);
 
 	return (
-		<div ref={boxRef} className="relative flex w-full flex-col gap-1">
+		<div className="relative flex w-full flex-col gap-1">
 			{label && <Label>{label}</Label>}
 			{description && <span className="text-xs text-muted">{description}</span>}
 			<div
@@ -64,7 +45,7 @@ export function AppConfigSelector({
 			>
 				{isConfig ? (
 					<span className="flex flex-1 items-center gap-2 rounded-l-md bg-accent-soft px-2 py-1.5 text-sm text-accent">
-						<span className="flex-1 truncate">{local.slice(4)}</span>
+						<span className="flex-1 truncate font-mono text-xs">{local.slice(4)}</span>
 						<button
 							type="button"
 							aria-label="Clear"
@@ -85,7 +66,7 @@ export function AppConfigSelector({
 				<button
 					type="button"
 					aria-label="Use app config value"
-					onClick={() => setOpen((o) => !o)}
+					onClick={() => setModalOpen(true)}
 					className={cn(
 						"inline-flex size-7 items-center justify-center rounded-md transition-colors",
 						isConfig ? "text-accent" : "text-muted hover:text-foreground",
@@ -95,47 +76,15 @@ export function AppConfigSelector({
 				</button>
 			</div>
 
-			{open && (
-				<div className="absolute right-0 top-full z-30 mt-1 flex w-64 flex-col rounded-md border border-border bg-overlay shadow-xl">
-					<div className="flex items-center gap-2 border-b border-border p-2">
-						<Input
-							className="flex-1"
-							placeholder="Search keys…"
-							value={search}
-							onChange={(e) => setSearch(e.currentTarget.value)}
-						/>
-						<button
-							type="button"
-							aria-label="Refresh"
-							onClick={() => refetch()}
-							className="text-muted hover:text-foreground"
-						>
-							<TbReload size={16} />
-						</button>
-					</div>
-					<div className="max-h-56 overflow-y-auto p-1">
-						{isLoading ? (
-							<p className="p-2 text-center text-sm text-muted">Loading…</p>
-						) : filtered.length === 0 ? (
-							<p className="p-2 text-center text-sm text-muted">No keys found</p>
-						) : (
-							filtered.map((k) => (
-								<button
-									key={k}
-									type="button"
-									onClick={() => {
-										set(`cfg:${k}`);
-										setOpen(false);
-									}}
-									className="w-full truncate rounded px-2 py-1.5 text-left font-mono text-sm text-foreground hover:bg-white/5"
-								>
-									{k}
-								</button>
-							))
-						)}
-					</div>
-				</div>
-			)}
+			<AppConfigSelectorModal
+				projectId={projectId}
+				isOpen={modalOpen}
+				onOpenChange={setModalOpen}
+				selectedValue={local}
+				onSelect={(keyName) => set(`cfg:${keyName}`)}
+				onClear={() => set("")}
+			/>
 		</div>
 	);
 }
+
diff --git a/apps/portal/src/components/integrations/AppConfigSelectorModal.tsx b/apps/portal/src/components/integrations/AppConfigSelectorModal.tsx
new file mode 100644
index 00000000..6a0fe28d
--- /dev/null
+++ b/apps/portal/src/components/integrations/AppConfigSelectorModal.tsx
@@ -0,0 +1,284 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Button, Chip, CloseButton, Input, Modal, Spinner, cn } from "@fluxify/components";
+import {
+	TbCheck,
+	TbKey,
+	TbLock,
+	TbRefresh,
+	TbSearch,
+	TbX,
+} from "react-icons/tb";
+import { appConfigQuery } from "@/query/appConfigQuery";
+
+export type AppConfigSelectorModalProps = {
+	projectId: string;
+	isOpen: boolean;
+	onOpenChange: (isOpen: boolean) => void;
+	selectedValue?: string;
+	onSelect: (keyName: string) => void;
+	onClear?: () => void;
+};
+
+export function AppConfigSelectorModal({
+	projectId,
+	isOpen,
+	onOpenChange,
+	selectedValue = "",
+	onSelect,
+	onClear,
+}: AppConfigSelectorModalProps) {
+	const [searchInput, setSearchInput] = useState("");
+	const [debouncedSearch, setDebouncedSearch] = useState("");
+	const bottomRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setDebouncedSearch(searchInput);
+		}, 250);
+		return () => clearTimeout(timer);
+	}, [searchInput]);
+
+	// Reset search when modal opens
+	useEffect(() => {
+		if (isOpen) {
+			setSearchInput("");
+			setDebouncedSearch("");
+		}
+	}, [isOpen]);
+
+	const {
+		data,
+		isLoading,
+		isFetchingNextPage,
+		hasNextPage,
+		fetchNextPage,
+		refetch,
+	} = appConfigQuery.getAll.useInfiniteQuery(projectId, {
+		perPage: 50,
+		search: debouncedSearch,
+		sortBy: "keyName",
+		sort: "asc",
+	});
+
+	// Infinite scroll observer
+	useEffect(() => {
+		if (!bottomRef.current || !hasNextPage || isFetchingNextPage) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries[0].isIntersecting) {
+				fetchNextPage();
+			}
+		});
+		observer.observe(bottomRef.current);
+		return () => observer.disconnect();
+	}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+	const items = useMemo(() => {
+		if (!data?.pages) return [];
+		return data.pages.flatMap((page) => page.data);
+	}, [data?.pages]);
+
+	const activeKey = selectedValue.startsWith("cfg:")
+		? selectedValue.slice(4)
+		: selectedValue;
+
+	function handleSelect(keyName: string) {
+		onSelect(keyName);
+		onOpenChange(false);
+	}
+
+	function handleClear() {
+		onClear?.();
+		onOpenChange(false);
+	}
+
+	return (
+		<Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+			<Modal.Backdrop>
+				<Modal.Container placement="center" scroll="inside" size="lg">
+					<Modal.Dialog className="w-full !max-w-2xl">
+						<Modal.Header className="flex flex-col gap-3 px-6 pb-2 pt-5">
+							<div className="flex items-start justify-between gap-3">
+								<div className="flex min-w-0 flex-1 items-center gap-3">
+									<span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-accent/10 text-accent">
+										<TbKey size={20} />
+									</span>
+									<div className="min-w-0 flex-1">
+										<Modal.Heading className="text-base font-semibold text-foreground">
+											Select App Config Key
+										</Modal.Heading>
+										<p className="mt-0.5 text-xs text-muted">
+											Choose an application configuration key or secret to reference in this field.
+										</p>
+									</div>
+								</div>
+								<CloseButton />
+							</div>
+
+							<div className="flex items-center gap-2 pt-1">
+								<div className="relative flex-1">
+									<TbSearch
+										className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted pointer-events-none"
+										size={15}
+									/>
+									<Input
+										placeholder="Search configuration keys…"
+										value={searchInput}
+										onChange={(e) => setSearchInput(e.currentTarget.value)}
+										className="h-8 w-full pl-8 pr-7 text-xs"
+									/>
+									{searchInput && (
+										<button
+											type="button"
+											aria-label="Clear search"
+											onClick={() => setSearchInput("")}
+											className="absolute right-2 top-1/2 -translate-y-1/2 text-muted transition-colors hover:text-foreground"
+										>
+											<TbX size={13} />
+										</button>
+									)}
+								</div>
+								<Button
+									isIconOnly
+									variant="outline"
+									size="sm"
+									onPress={() => refetch()}
+									aria-label="Refresh keys"
+									className="size-8"
+								>
+									<TbRefresh size={14} />
+								</Button>
+							</div>
+						</Modal.Header>
+
+						<Modal.Body className="px-6 pb-4 pt-2">
+							{isLoading ? (
+								<div className="flex flex-col items-center justify-center py-16">
+									<Spinner />
+									<span className="mt-2 text-xs text-muted">Loading configuration keys…</span>
+								</div>
+							) : items.length === 0 ? (
+								debouncedSearch ? (
+									<div className="flex flex-col items-center justify-center py-12 text-center">
+										<TbSearch size={26} className="text-muted/60 mb-2" />
+										<p className="text-sm font-medium text-foreground">
+											No keys matching &ldquo;{debouncedSearch}&rdquo;
+										</p>
+										<p className="mt-1 text-xs text-muted">
+											Try adjusting your search terms.
+										</p>
+										<Button
+											variant="outline"
+											size="sm"
+											className="mt-3 text-xs"
+											onPress={() => setSearchInput("")}
+										>
+											Clear search
+										</Button>
+									</div>
+								) : (
+									<div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-border px-4 py-12 text-center">
+										<TbKey size={30} className="text-muted/60 mb-2" />
+										<p className="text-sm font-medium text-foreground">
+											No configuration keys found
+										</p>
+										<p className="mt-1 max-w-xs text-xs text-muted">
+											You can create configuration keys and secrets in Project Settings &rarr; App Config.
+										</p>
+									</div>
+								)
+							) : (
+								<div className="flex max-h-[440px] min-h-[260px] flex-col gap-2 overflow-y-auto pr-1">
+									{items.map((item) => {
+										const isSelected = activeKey === item.keyName;
+										return (
+											<button
+												key={item.id}
+												type="button"
+												onClick={() => handleSelect(item.keyName)}
+												className={cn(
+													"group flex w-full items-center justify-between gap-3 rounded-xl border px-3.5 py-2.5 text-left transition-all duration-150",
+													isSelected
+														? "border-accent bg-accent/10 shadow-sm ring-1 ring-accent"
+														: "border-border bg-surface hover:border-accent hover:bg-surface-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus",
+												)}
+											>
+												<div className="flex min-w-0 flex-1 items-center gap-2.5">
+													<span
+														className={cn(
+															"flex size-8 shrink-0 items-center justify-center rounded-lg transition-colors",
+															isSelected
+																? "bg-accent text-accent-foreground"
+																: "bg-surface-secondary text-foreground group-hover:bg-accent group-hover:text-accent-foreground",
+														)}
+													>
+														{item.isEncrypted ? <TbLock size={15} /> : <TbKey size={15} />}
+													</span>
+													<span className="truncate font-mono text-xs font-semibold text-foreground">
+															{item.keyName}
+													</span>
+													<Chip size="sm" color="accent" className="text-[11px] font-medium shrink-0">
+														{item.dataType || "string"}
+													</Chip>
+													{item.isEncrypted && (
+														<span className="flex shrink-0 items-center gap-0.5 rounded bg-warning/15 px-1.5 py-0.5 text-[10px] font-medium text-warning">
+															<TbLock size={10} /> Encrypted
+														</span>
+													)}
+													{item.encodingType && item.encodingType !== "plaintext" && (
+														<span className="shrink-0 rounded bg-surface-secondary px-1.5 py-0.5 font-mono text-[10px] font-medium uppercase text-muted">
+															{item.encodingType}
+														</span>
+													)}
+												</div>
+												<div className="shrink-0">
+													{isSelected ? (
+														<span className="flex size-6 items-center justify-center rounded-full bg-accent text-accent-foreground">
+															<TbCheck size={13} strokeWidth={3} />
+														</span>
+													) : (
+														<span className="text-xs font-medium text-muted transition-colors group-hover:text-foreground">
+															Select
+														</span>
+													)}
+												</div>
+											</button>
+										);
+									})}
+									<div ref={bottomRef} className="h-1 w-full" />
+									{isFetchingNextPage && (
+										<div className="flex items-center justify-center py-2">
+											<Spinner size="sm" />
+										</div>
+									)}
+								</div>
+							)}
+						</Modal.Body>
+
+						<Modal.Footer className="flex items-center justify-between border-t border-border px-6 pb-5 pt-3">
+							<div>
+								{activeKey ? (
+									<Button
+										variant="outline"
+										size="sm"
+										onPress={handleClear}
+										className="text-xs"
+									>
+										<TbX size={13} /> Clear selection
+									</Button>
+								) : null}
+							</div>
+							<Button
+								variant="outline"
+								size="sm"
+								onPress={() => onOpenChange(false)}
+								className="text-xs"
+							>
+								Close
+							</Button>
+						</Modal.Footer>
+					</Modal.Dialog>
+				</Modal.Container>
+			</Modal.Backdrop>
+		</Modal>
+	);
+}
diff --git a/apps/portal/src/components/integrations/IntegrationForm.tsx b/apps/portal/src/components/integrations/IntegrationForm.tsx
index e4d24a8f..59f9619c 100644
--- a/apps/portal/src/components/integrations/IntegrationForm.tsx
+++ b/apps/portal/src/components/integrations/IntegrationForm.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
-import { Button, Spinner, toast } from "@fluxify/components";
-import { TbBolt, TbTrash } from "react-icons/tb";
+import { Button, DeleteIconButton, Spinner, toast } from "@fluxify/components";
+import { TbBolt } from "react-icons/tb";
 import {
 	getIntegrationsGroups,
 	getIntegrationsVariants,
@@ -197,25 +197,24 @@ export function IntegrationForm({
 
 			{/* Actions */}
 			{!hideActions && group && variant && (
-				<div className="flex items-center justify-end pt-2 border-t border-[#1C202B]">
-					<div className="flex items-center gap-2">
+				<div className="flex items-center justify-between pt-2 border-t border-border">
+					<div>
 						{showDelete && id && (
-							<button
-								type="button"
-								onClick={() => setConfirmDelete(true)}
-								className="flex items-center justify-center rounded-xl border border-red-900/30 bg-[#1C181B] p-2 text-red-400 transition-colors hover:bg-red-950/40"
+							<DeleteIconButton
+								onPress={() => setConfirmDelete(true)}
 								aria-label="Delete integration"
-							>
-								<TbTrash size={15} />
-							</button>
+								iconSize={15}
+							/>
 						)}
+					</div>
+					<div className="flex items-center gap-2">
 						<Button
 							variant="outline"
 							isPending={test.isPending}
 							onPress={onTest}
 							className="whitespace-nowrap"
 						>
-							<TbBolt size={14} className="text-[#D0F237]" />
+							<TbBolt size={14} className="text-accent" />
 							<span>Test connection</span>
 						</Button>
 						<Button variant="primary" isPending={create.isPending || update.isPending} onPress={onSave}>
diff --git a/apps/portal/src/components/integrations/IntegrationOnboardingForm.tsx b/apps/portal/src/components/integrations/IntegrationOnboardingForm.tsx
index 5c6716b4..87053974 100644
--- a/apps/portal/src/components/integrations/IntegrationOnboardingForm.tsx
+++ b/apps/portal/src/components/integrations/IntegrationOnboardingForm.tsx
@@ -145,7 +145,7 @@ export function IntegrationOnboardingForm({ projectId, onSaved }: { projectId: s
 
 	return (
 		<div className="flex flex-col">
-			<nav aria-label="Integration setup steps" className="border-b border-[#1E232F] pb-3">
+			<nav aria-label="Integration setup steps" className="border-b border-border pb-3">
 				<ol className="grid grid-cols-3 gap-2">
 					{([
 						[1, "Category"],
@@ -165,17 +165,17 @@ export function IntegrationOnboardingForm({ projectId, onSaved }: { projectId: s
 										"flex w-full items-center gap-2 rounded-lg px-2 py-1 text-left text-xs font-medium transition-colors",
 										available
 											? current
-												? "text-white"
-												: "text-zinc-400 hover:bg-white/[0.04] hover:text-zinc-200"
-											: "cursor-not-allowed text-zinc-600",
+												? "text-foreground"
+												: "text-muted hover:bg-surface-secondary hover:text-foreground"
+											: "cursor-not-allowed text-muted/50",
 									)}
 								>
 									<span
 										className={cn(
 											"flex size-5 shrink-0 items-center justify-center rounded-full border text-[10px] font-semibold transition-all",
 											complete || current
-												? "border-[#D0F237] bg-[#D0F237] text-black"
-												: "border-[#2B313E] bg-[#141720] text-zinc-500",
+												? "border-accent bg-accent text-accent-foreground"
+												: "border-border bg-surface-secondary text-muted",
 										)}
 									>
 										{complete ? <TbCheck size={12} strokeWidth={3} /> : number}
@@ -192,11 +192,11 @@ export function IntegrationOnboardingForm({ projectId, onSaved }: { projectId: s
 				{step === 1 && (
 					<section aria-labelledby="integration-category-heading">
 						<div>
-							<p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-[#D0F237]">Step 1 of 3</p>
-							<h2 id="integration-category-heading" className="mt-1 text-lg font-semibold tracking-tight text-white">
+							<p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-accent">Step 1 of 3</p>
+							<h2 id="integration-category-heading" className="mt-1 text-lg font-semibold tracking-tight text-foreground">
 								What would you like to connect?
 							</h2>
-							<p className="mt-0.5 text-xs text-zinc-400">
+							<p className="mt-0.5 text-xs text-muted">
 								Choose a category to see the services available to your project.
 							</p>
 						</div>
@@ -213,25 +213,25 @@ export function IntegrationOnboardingForm({ projectId, onSaved }: { projectId: s
 										className={cn(
 											"group flex items-center gap-3.5 rounded-xl border p-3 text-left transition-all duration-150",
 											isAvailable
-												? "border-[#232836] bg-[#12151D] hover:border-[#D0F237]/60 hover:bg-[#161B26] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#D0F237]"
-												: "cursor-not-allowed border-[#1A1D26] bg-[#0E1015]/60 opacity-45",
+												? "border-border bg-surface hover:border-accent hover:bg-surface-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus"
+												: "cursor-not-allowed border-border/50 bg-surface/50 opacity-45",
 										)}
 									>
 										<span
 											className={cn(
 												"flex size-10 shrink-0 items-center justify-center rounded-lg transition-colors",
 												isAvailable
-													? "bg-[#D0F237]/10 text-[#D0F237] group-hover:bg-[#D0F237] group-hover:text-black"
-													: "bg-white/[0.04] text-zinc-600",
+													? "bg-accent/10 text-accent group-hover:bg-accent group-hover:text-accent-foreground"
+													: "bg-surface-secondary text-muted/50",
 											)}
 										>
 											{detail.icon}
 										</span>
 										<span className="min-w-0 flex-1">
-											<span className="block truncate text-sm font-semibold text-white">
+											<span className="block truncate text-sm font-semibold text-foreground">
 												{humanReadableConnectorNames[item as keyof typeof humanReadableConnectorNames]}
 											</span>
-											<span className="mt-0.5 block truncate text-xs text-zinc-400">
+											<span className="mt-0.5 block truncate text-xs text-muted">
 												{isAvailable ? detail.description : "Coming soon"}
 											</span>
 										</span>
@@ -245,11 +245,11 @@ export function IntegrationOnboardingForm({ projectId, onSaved }: { projectId: s
 				{step === 2 && (
 					<section aria-labelledby="integration-provider-heading">
 						<div>
-							<p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-[#D0F237]">Step 2 of 3</p>
-							<h2 id="integration-provider-heading" className="mt-1 text-lg font-semibold tracking-tight text-white">
+							<p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-accent">Step 2 of 3</p>
+							<h2 id="integration-provider-heading" className="mt-1 text-lg font-semibold tracking-tight text-foreground">
 								Choose a {groupName.toLowerCase()} provider
 							</h2>
-							<p className="mt-0.5 text-xs text-zinc-400">Select the service you want to configure.</p>
+							<p className="mt-0.5 text-xs text-muted">Select the service you want to configure.</p>
 						</div>
 						<div className="mt-3.5 grid gap-2.5 sm:grid-cols-2">
 							{variants.map((item) => (
@@ -257,12 +257,12 @@ export function IntegrationOnboardingForm({ projectId, onSaved }: { projectId: s
 									key={item}
 									type="button"
 									onClick={() => chooseVariant(item)}
-									className="group flex items-center gap-3.5 rounded-xl border border-[#232836] bg-[#12151D] p-3 text-left transition-all duration-150 hover:border-[#D0F237]/60 hover:bg-[#161B26] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#D0F237]"
+									className="group flex items-center gap-3.5 rounded-xl border border-border bg-surface p-3 text-left transition-all duration-150 hover:border-accent hover:bg-surface-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus"
 								>
-									<span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-white/[0.06] text-zinc-200 transition-colors group-hover:bg-[#D0F237] group-hover:text-black">
+									<span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-surface-secondary text-foreground transition-colors group-hover:bg-accent group-hover:text-accent-foreground">
 										{integrationIcons[item] ?? GROUP_DETAILS[group]?.icon}
 									</span>
-									<span className="truncate text-sm font-semibold text-white">{item}</span>
+									<span className="truncate text-sm font-semibold text-foreground">{item}</span>
 								</button>
 							))}
 						</div>
@@ -273,19 +273,19 @@ export function IntegrationOnboardingForm({ projectId, onSaved }: { projectId: s
 					<section aria-labelledby="integration-configure-heading" className="flex flex-1 flex-col">
 						<div className="flex items-center justify-between">
 							<div>
-								<p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-[#D0F237]">Step 3 of 3</p>
-								<h2 id="integration-configure-heading" className="mt-1 text-lg font-semibold tracking-tight text-white">
+								<p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-accent">Step 3 of 3</p>
+								<h2 id="integration-configure-heading" className="mt-1 text-lg font-semibold tracking-tight text-foreground">
 									Configure {variant}
 								</h2>
 							</div>
-							<div className="flex items-center gap-2 rounded-lg border border-[#232836] bg-[#141720] px-3 py-1.5 text-xs text-zinc-300">
-								<span className="flex size-4 items-center justify-center text-[#D0F237]">
+							<div className="flex items-center gap-2 rounded-lg border border-border bg-surface-secondary px-3 py-1.5 text-xs text-foreground">
+								<span className="flex size-4 items-center justify-center text-accent">
 									{integrationIcons[variant] ?? GROUP_DETAILS[group]?.icon}
 								</span>
-								<span className="font-medium text-white">{variant}</span>
+								<span className="font-medium text-foreground">{variant}</span>
 							</div>
 						</div>
-						<p className="mt-0.5 text-xs text-zinc-400">Add the connection details and credentials for this service.</p>
+						<p className="mt-0.5 text-xs text-muted">Add the connection details and credentials for this service.</p>
 
 						<div className="mt-4 flex-1">
 							{group === "database" && CRED_PLACEHOLDERS[variant] && (
@@ -325,7 +325,7 @@ export function IntegrationOnboardingForm({ projectId, onSaved }: { projectId: s
 				)}
 			</div>
 
-			<div className="flex items-center justify-between border-t border-[#1E232F] pt-3.5">
+			<div className="flex items-center justify-between border-t border-border pt-3.5">
 				{step > 1 ? (
 					<Button variant="ghost" size="sm" onPress={() => goToStep((step - 1) as Step)}>
 						<TbArrowLeft size={16} /> Back
@@ -342,7 +342,7 @@ export function IntegrationOnboardingForm({ projectId, onSaved }: { projectId: s
 							onPress={testIntegration}
 							className="whitespace-nowrap"
 						>
-							<TbBolt size={14} className="text-[#D0F237]" />
+							<TbBolt size={14} className="text-accent" />
 							<span>Test connection</span>
 						</Button>
 						<Button
diff --git a/apps/portal/src/components/integrations/IntegrationOnboardingModal.tsx b/apps/portal/src/components/integrations/IntegrationOnboardingModal.tsx
index 15f7ea47..ac2972ee 100644
--- a/apps/portal/src/components/integrations/IntegrationOnboardingModal.tsx
+++ b/apps/portal/src/components/integrations/IntegrationOnboardingModal.tsx
@@ -1,4 +1,4 @@
-import { Modal } from "@fluxify/components";
+import { Modal, CloseButton } from "@fluxify/components";
 import { IntegrationOnboardingForm } from "./IntegrationOnboardingForm";
 
 type IntegrationOnboardingModalProps = {
@@ -13,9 +13,10 @@ export function IntegrationOnboardingModal({ projectId, isOpen, onOpenChange }:
 		<Modal isOpen={isOpen} onOpenChange={onOpenChange}>
 			<Modal.Backdrop>
 				<Modal.Container placement="center" scroll="inside" size="lg">
-					<Modal.Dialog className="w-full !max-w-2xl border border-[#1C202B] bg-[#0E1015]">
-						<Modal.Header className="px-6 pb-2 pt-5">
-							<Modal.Heading className="text-white">Connect an integration</Modal.Heading>
+					<Modal.Dialog className="w-full !max-w-2xl">
+						<Modal.Header className="px-6 pb-2 pt-5 flex flex-row items-center justify-between">
+							<Modal.Heading>Connect an integration</Modal.Heading>
+							<CloseButton />
 						</Modal.Header>
 						<Modal.Body className="px-6 pb-6 pt-1">
 							{isOpen && <IntegrationOnboardingForm projectId={projectId} onSaved={() => onOpenChange(false)} />}
diff --git a/apps/portal/src/components/integrations/connectors/AiForm.tsx b/apps/portal/src/components/integrations/connectors/AiForm.tsx
index dc5af9fc..5a98a097 100644
--- a/apps/portal/src/components/integrations/connectors/AiForm.tsx
+++ b/apps/portal/src/components/integrations/connectors/AiForm.tsx
@@ -1,4 +1,4 @@
-import { Input } from "@fluxify/components";
+import { Checkbox, Input } from "@fluxify/components";
 import { AppConfigSelector } from "../AppConfigSelector";
 import type { ConnectorFormProps } from "./types";
 
@@ -14,8 +14,8 @@ export function AiForm({
 	return (
 		<div className="flex flex-col gap-3.5">
 			<div className="flex flex-col gap-1">
-				<label className="text-xs font-medium text-zinc-300">
-					Integration Name <span className="text-[#D0F237]">*</span>
+				<label className="text-xs font-medium text-foreground">
+					Integration Name <span className="text-danger">*</span>
 				</label>
 				<Input value={name} onChange={(e) => onName(e.currentTarget.value)} placeholder="e.g. Production OpenAI" />
 			</div>
@@ -37,8 +37,8 @@ export function AiForm({
 				placeholder="sk-..."
 			/>
 			<div className="flex flex-col gap-1">
-				<label className="text-xs font-medium text-zinc-300">
-					Model <span className="text-[#D0F237]">*</span>
+				<label className="text-xs font-medium text-foreground">
+					Model <span className="text-danger">*</span>
 				</label>
 				<Input
 					value={(config.model as string) ?? ""}
@@ -46,6 +46,19 @@ export function AiForm({
 					placeholder="e.g. gpt-4o, claude-3-5-sonnet, gemini-1.5-pro"
 				/>
 			</div>
+
+			<div className="flex flex-col gap-1 pt-1">
+				<Checkbox
+					isSelected={Boolean(config.useForHarness)}
+					onChange={(v) => setField("useForHarness", v)}
+				>
+					Use for AI Harness
+				</Checkbox>
+				<span className="pl-6 text-xs text-muted">
+					Enable this model provider to be used as an engine for the AI coding agent and builder harness.
+				</span>
+			</div>
 		</div>
 	);
 }
+
diff --git a/apps/portal/src/components/integrations/connectors/CredentialsUrlForm.tsx b/apps/portal/src/components/integrations/connectors/CredentialsUrlForm.tsx
index f08fb484..0573ffc0 100644
--- a/apps/portal/src/components/integrations/connectors/CredentialsUrlForm.tsx
+++ b/apps/portal/src/components/integrations/connectors/CredentialsUrlForm.tsx
@@ -36,8 +36,8 @@ export function CredentialsUrlForm({
 	return (
 		<div className="flex flex-col gap-3.5">
 			<div className="flex flex-col gap-1">
-				<label className="text-xs font-medium text-zinc-300">
-					Integration Name <span className="text-[#D0F237]">*</span>
+				<label className="text-xs font-medium text-foreground">
+					Integration Name <span className="text-danger">*</span>
 				</label>
 				<Input
 					value={name}
@@ -46,7 +46,7 @@ export function CredentialsUrlForm({
 				/>
 			</div>
 
-			<div className="flex rounded-lg border border-[#232836] bg-[#141720] p-1">
+			<div className="flex rounded-lg border border-border bg-background-secondary p-1">
 				{(["credentials", "url"] as const).map((t) => (
 					<button
 						key={t}
@@ -58,8 +58,8 @@ export function CredentialsUrlForm({
 						className={cn(
 							"flex-1 rounded-md py-1 text-xs font-medium transition-all duration-150",
 							tab === t
-								? "bg-[#232938] text-white shadow-sm"
-								: "text-zinc-400 hover:text-zinc-200",
+								? "bg-surface text-foreground shadow-sm"
+								: "text-muted hover:text-foreground",
 						)}
 					>
 						{t === "url" ? "Via URL" : "Credentials"}
diff --git a/apps/portal/src/components/integrations/connectors/ObservabilityForm.tsx b/apps/portal/src/components/integrations/connectors/ObservabilityForm.tsx
index f1388389..972b128d 100644
--- a/apps/portal/src/components/integrations/connectors/ObservabilityForm.tsx
+++ b/apps/portal/src/components/integrations/connectors/ObservabilityForm.tsx
@@ -23,8 +23,8 @@ export function ObservabilityForm({
 	return (
 		<div className="flex flex-col gap-3.5">
 			<div className="flex flex-col gap-1">
-				<label className="text-xs font-medium text-zinc-300">
-					Integration Name <span className="text-[#D0F237]">*</span>
+				<label className="text-xs font-medium text-foreground">
+					Integration Name <span className="text-danger">*</span>
 				</label>
 				<Input value={name} onChange={(e) => onName(e.currentTarget.value)} placeholder={namePlaceholder} />
 			</div>
@@ -38,15 +38,15 @@ export function ObservabilityForm({
 				placeholder={baseUrlPlaceholder}
 			/>
 
-			<div className="flex rounded-lg border border-[#232836] bg-[#141720] p-1">
+			<div className="flex rounded-lg border border-border bg-background-secondary p-1">
 				<button
 					type="button"
 					onClick={() => setField("credentials", "")}
 					className={cn(
 						"flex-1 rounded-md py-1 text-xs font-medium transition-all duration-150",
 						!isCredentials
-							? "bg-[#232938] text-white shadow-sm"
-							: "text-zinc-400 hover:text-zinc-200",
+							? "bg-surface text-foreground shadow-sm"
+							: "text-muted hover:text-foreground",
 					)}
 				>
 					Base64 Encoded
@@ -57,8 +57,8 @@ export function ObservabilityForm({
 					className={cn(
 						"flex-1 rounded-md py-1 text-xs font-medium transition-all duration-150",
 						isCredentials
-							? "bg-[#232938] text-white shadow-sm"
-							: "text-zinc-400 hover:text-zinc-200",
+							? "bg-surface text-foreground shadow-sm"
+							: "text-muted hover:text-foreground",
 					)}
 				>
 					Credentials
diff --git a/apps/portal/src/components/routes/RouteSettingsModal.tsx b/apps/portal/src/components/routes/RouteSettingsModal.tsx
index 8fb444bf..334f1ed4 100644
--- a/apps/portal/src/components/routes/RouteSettingsModal.tsx
+++ b/apps/portal/src/components/routes/RouteSettingsModal.tsx
@@ -3,6 +3,7 @@ import {
 	Alert,
 	Button,
 	Chip,
+	CloseButton,
 	Modal,
 	Input,
 	Label,
@@ -225,10 +226,9 @@ function RouteSettingsForm({
 						{method} {path}
 					</p>
 				</div>
-				{/* the trigger renders its own X; a child would sit inside its chrome */}
-				<Modal.CloseTrigger
+				<CloseButton
 					aria-label="Close route settings"
-					className="ml-auto rounded-md bg-transparent p-1.5 text-muted transition-colors hover:bg-white/[0.06] hover:text-foreground"
+					className="ml-auto"
 				/>
 			</Modal.Header>
 
diff --git a/apps/portal/src/components/routes/RouteSwitcher.tsx b/apps/portal/src/components/routes/RouteSwitcher.tsx
index 23487664..71080f52 100644
--- a/apps/portal/src/components/routes/RouteSwitcher.tsx
+++ b/apps/portal/src/components/routes/RouteSwitcher.tsx
@@ -4,10 +4,10 @@ import { TbChevronLeft, TbChevronRight, TbArrowLeft } from "react-icons/tb";
 import { routesQuery } from "@/query/routesQuery";
 
 const METHOD_COLOR: Record<string, string> = {
-	GET: "text-sky-400",
-	POST: "text-emerald-400",
-	PUT: "text-amber-400",
-	DELETE: "text-rose-400",
+	GET: "text-accent",
+	POST: "text-success",
+	PUT: "text-warning",
+	DELETE: "text-danger",
 };
 
 function MethodTag({ method }: { method: string }) {
diff --git a/apps/portal/src/components/settings/AddMemberModal.tsx b/apps/portal/src/components/settings/AddMemberModal.tsx
index 5f86e406..81759b1f 100644
--- a/apps/portal/src/components/settings/AddMemberModal.tsx
+++ b/apps/portal/src/components/settings/AddMemberModal.tsx
@@ -1,5 +1,5 @@
 import { useState, useMemo } from "react";
-import { Button, Modal, Input, toast, LazyLoader } from "@fluxify/components";
+import { Button, Modal, CloseButton, Input, toast, LazyLoader } from "@fluxify/components";
 import { TbSearch } from "react-icons/tb";
 import { authQuery } from "@/query/authQuery";
 import { projectMembersQuery } from "@/query/projectMembersQuery";
@@ -96,14 +96,15 @@ export function AddMemberModal({
 						<Modal.Header>
 							<div className="flex items-center justify-between pb-3">
 								<Modal.Heading>Add member</Modal.Heading>
+								<CloseButton onPress={handleClose} />
 							</div>
 							{/* Stepper highlight */}
 							<div className="flex gap-2 mb-4">
 								<div
-									className={`h-1 flex-1 rounded-full transition-colors ${step >= 1 ? "bg-[#ccff00]" : "bg-[#252836]"}`}
+									className={`h-1 flex-1 rounded-full transition-colors ${step >= 1 ? "bg-accent" : "bg-border"}`}
 								/>
 								<div
-									className={`h-1 flex-1 rounded-full transition-colors ${step >= 2 ? "bg-[#ccff00]" : "bg-[#252836]"}`}
+									className={`h-1 flex-1 rounded-full transition-colors ${step >= 2 ? "bg-accent" : "bg-border"}`}
 								/>
 							</div>
 						</Modal.Header>
@@ -133,10 +134,10 @@ export function AddMemberModal({
 												<button
 													key={user.id}
 													type="button"
-													className="flex items-center gap-3 rounded-lg p-2 text-left transition-colors hover:bg-white/[0.04]"
+													className="flex items-center gap-3 rounded-lg p-2 text-left transition-colors hover:bg-surface-secondary"
 													onClick={() => handleUserSelect(user)}
 												>
-													<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#1A1C23] text-xs font-semibold text-zinc-300 ring-1 ring-white/10">
+													<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-surface-secondary text-xs font-semibold text-foreground ring-1 ring-border">
 														{getInitials(user.name, user.email)}
 													</div>
 													<div className="flex flex-col">
@@ -168,7 +169,6 @@ export function AddMemberModal({
 									variant="primary"
 									onPress={handleAdd}
 									isPending={addMutation.isPending}
-									className="bg-[#ccff00] text-black hover:bg-[#b3e600]"
 								>
 									Add to project
 								</Button>
diff --git a/apps/portal/src/components/settings/ChangeRoleDialog.tsx b/apps/portal/src/components/settings/ChangeRoleDialog.tsx
index e27fddff..32d61a02 100644
--- a/apps/portal/src/components/settings/ChangeRoleDialog.tsx
+++ b/apps/portal/src/components/settings/ChangeRoleDialog.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Modal, toast, Button } from "@fluxify/components";
+import { Modal, toast, Button, CloseButton } from "@fluxify/components";
 import { projectMembersQuery } from "@/query/projectMembersQuery";
 import { showErrorNotification } from "@/lib/errorNotifier";
 import type { Member } from "./MembersSettings";
@@ -36,8 +36,9 @@ export function ChangeRoleDialog({
 			<Modal.Backdrop>
 				<Modal.Container placement="center" size="sm">
 					<Modal.Dialog>
-						<Modal.Header>
+						<Modal.Header className="flex flex-row items-center justify-between">
 							<Modal.Heading>Change role</Modal.Heading>
+							<CloseButton onPress={onClose} />
 						</Modal.Header>
 						<Modal.Body>
 							<UserRoleSelector
diff --git a/apps/portal/src/components/settings/DangerZoneSettings.tsx b/apps/portal/src/components/settings/DangerZoneSettings.tsx
index 48f4de29..a7dfc13b 100644
--- a/apps/portal/src/components/settings/DangerZoneSettings.tsx
+++ b/apps/portal/src/components/settings/DangerZoneSettings.tsx
@@ -1,5 +1,5 @@
 import { TbAlertTriangle } from "react-icons/tb";
-import { Button, toast } from "@fluxify/components";
+import { DeleteButton, toast } from "@fluxify/components";
 
 export function DangerZoneSettings({ projectId }: { projectId: string }) {
 	function handleDelete() {
@@ -8,21 +8,20 @@ export function DangerZoneSettings({ projectId }: { projectId: string }) {
 	}
 
 	return (
-		<div className="rounded-xl border border-red-900/50 bg-red-950/20 p-6">
-			<div className="flex items-center gap-2 text-red-400">
+		<div className="rounded-xl border border-danger/30 bg-danger/10 p-6">
+			<div className="flex items-center gap-2 text-danger">
 				<TbAlertTriangle size={20} />
 				<h2 className="text-lg font-medium tracking-tight">Danger Zone</h2>
 			</div>
-			<p className="mt-2 text-sm text-zinc-400">
+			<p className="mt-2 text-sm text-muted">
 				Delete project will remove all workflows, logs and members.
 			</p>
 			<div className="mt-6">
-				<Button
+				<DeleteButton
 					onPress={handleDelete}
-					className="border border-[#5c1616] bg-[#3a0e0e] text-red-200 transition-colors hover:bg-[#5c1616] hover:text-red-100"
 				>
 					Delete project
-				</Button>
+				</DeleteButton>
 			</div>
 		</div>
 	);
diff --git a/apps/portal/src/components/settings/ExperimentalSettings.tsx b/apps/portal/src/components/settings/ExperimentalSettings.tsx
index a05a0b8d..d913f91a 100644
--- a/apps/portal/src/components/settings/ExperimentalSettings.tsx
+++ b/apps/portal/src/components/settings/ExperimentalSettings.tsx
@@ -33,10 +33,10 @@ export function ExperimentalSettings({ projectId }: { projectId: string }) {
 				</div>
 			) : (
 				<div className="flex flex-col gap-4">
-					<div className="flex items-center justify-between rounded-lg border border-[#161820] bg-white/[0.02] p-4">
+					<div className="flex items-center justify-between rounded-lg border border-border bg-surface-secondary p-4">
 						<div className="flex flex-col gap-1">
-							<h3 className="font-medium text-white">Worker Timeouts</h3>
-							<p className="text-sm text-zinc-400">Enable experimental execution worker timeouts to prevent long-running tasks from hanging.</p>
+							<h3 className="font-medium text-foreground">Worker Timeouts</h3>
+							<p className="text-sm text-muted">Enable experimental execution worker timeouts to prevent long-running tasks from hanging.</p>
 						</div>
 						<Switch isSelected={timeoutsEnabled} onChange={(e: any) => handleToggle(e.target.checked)} />
 					</div>
diff --git a/apps/portal/src/components/settings/MembersSettings.tsx b/apps/portal/src/components/settings/MembersSettings.tsx
index a0d386ea..6e073df4 100644
--- a/apps/portal/src/components/settings/MembersSettings.tsx
+++ b/apps/portal/src/components/settings/MembersSettings.tsx
@@ -64,7 +64,6 @@ export function MembersSettings({ projectId }: { projectId: string }) {
 				</div>
 				<Button
 					variant="primary"
-					className="bg-[#ccff00] text-black hover:bg-[#b3e600] font-medium flex items-center gap-2"
 					onPress={() => setAddMemberOpen(true)}
 				>
 					<TbUserPlus size={18} />
@@ -95,7 +94,7 @@ export function MembersSettings({ projectId }: { projectId: string }) {
 								<Table.Row id={m.userId}>
 									<Table.Cell>
 										<div className="flex items-center gap-4 py-2">
-											<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#1A1C23] text-sm font-semibold text-zinc-300 ring-1 ring-white/10">
+											<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-surface-secondary text-sm font-semibold text-foreground ring-1 ring-border">
 												{getInitials(m.name, m.email)}
 											</div>
 											<div className="flex flex-col">
@@ -139,9 +138,10 @@ export function MembersSettings({ projectId }: { projectId: string }) {
 															onAction={() => setPendingRemove(m)} 
 															variant="danger" 
 															textValue="Remove member"
+															className="text-danger hover:bg-danger/10 focus:bg-danger/10 focus:text-danger"
 														>
-															<TbTrash size={16} />
-															<Label>Remove member</Label>
+															<TbTrash size={16} className="text-danger" />
+															<Label className="text-danger">Remove member</Label>
 														</Dropdown.Item>
 													</Dropdown.Menu>
 												</Dropdown.Popover>
diff --git a/apps/portal/src/query/appConfigQuery.ts b/apps/portal/src/query/appConfigQuery.ts
index 1edc8560..a838d078 100644
--- a/apps/portal/src/query/appConfigQuery.ts
+++ b/apps/portal/src/query/appConfigQuery.ts
@@ -1,4 +1,4 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
 	type CreateAppConfigBody,
 	type DeleteBulkAppConfigBody,
@@ -18,6 +18,21 @@ export const appConfigQuery = {
 				refetchOnWindowFocus: false,
 			});
 		},
+		useInfiniteQuery(projectId: string, query: Omit<ListAppConfigQuery, "page">) {
+			return useInfiniteQuery({
+				queryKey: [...key(projectId), "infinite", query],
+				queryFn: ({ pageParam = 1 }) =>
+					appConfigService.getAll(projectId, { ...query, page: pageParam }),
+				getNextPageParam: (lastPage) => {
+					if (lastPage.pagination && lastPage.pagination.page < lastPage.pagination.totalPages) {
+						return lastPage.pagination.page + 1;
+					}
+					return undefined;
+				},
+				initialPageParam: 1,
+				refetchOnWindowFocus: false,
+			});
+		},
 	},
 	getById: {
 		useQuery(projectId: string, id: number | string | null | undefined) {
diff --git a/apps/portal/src/routes/_authed/$projectId.tsx b/apps/portal/src/routes/_authed/$projectId.tsx
index 7f4c8af7..48a63e8c 100644
--- a/apps/portal/src/routes/_authed/$projectId.tsx
+++ b/apps/portal/src/routes/_authed/$projectId.tsx
@@ -69,26 +69,26 @@ function ProjectLayout() {
 	}
 
 	return (
-		<div className="flex h-screen w-screen bg-[#07080A] text-foreground font-sans antialiased">
+		<div className="flex h-screen w-screen bg-background text-foreground font-sans antialiased">
 			{/* Sidebar spacer */}
-			<div className="w-[60px] shrink-0 border-r border-[#161820]" />
+			<div className="w-[60px] shrink-0 border-r border-border" />
 
 			{/* Actual Sidebar */}
-			<aside className="group absolute left-0 top-0 z-50 flex h-full w-[60px] flex-col justify-between overflow-hidden border-r border-[#161820] bg-[#07080A] transition-[width] duration-300 hover:w-[220px]">
+			<aside className="group absolute left-0 top-0 z-50 flex h-full w-[60px] flex-col justify-between overflow-hidden border-r border-border bg-background-secondary transition-[width] duration-300 hover:w-[220px]">
 				<div className="flex flex-col">
 					{/* Logo */}
 					<div className="flex h-[56px] shrink-0 items-center px-4">
-						<div className="flex size-7 shrink-0 items-center justify-center rounded-lg text-black shadow-sm">
+						<div className="flex size-7 shrink-0 items-center justify-center rounded-lg shadow-sm">
 							<img src="/_/admin/ui/public/icons/logo.svg" alt="logo" />
 						</div>
-						<span className="ml-3 flex-1 whitespace-nowrap text-sm font-bold tracking-wider text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+						<span className="ml-3 flex-1 whitespace-nowrap text-sm font-bold tracking-wider text-foreground opacity-0 transition-opacity duration-300 group-hover:opacity-100">
 							FLUXIFY
 						</span>
 						<Tooltip>
 							<button
 								type="button"
 								onClick={() => navigate({ to: "/" })}
-								className="flex size-7 shrink-0 items-center justify-center rounded-lg text-zinc-400 opacity-0 transition-all duration-300 hover:bg-white/[0.04] hover:text-zinc-200 group-hover:opacity-100"
+								className="flex size-7 shrink-0 items-center justify-center rounded-lg text-muted opacity-0 transition-all duration-300 hover:bg-surface-secondary hover:text-foreground group-hover:opacity-100"
 							>
 								<TbArrowLeft size={18} />
 							</button>
@@ -97,7 +97,7 @@ function ProjectLayout() {
 					</div>
 
 					{/* Separator */}
-					<div className="mx-3 mb-3 h-px bg-[#161820]" />
+					<div className="mx-3 mb-3 h-px bg-border" />
 
 					{/* Navigation */}
 					<nav className="flex flex-col gap-1 px-2">
@@ -111,22 +111,22 @@ function ProjectLayout() {
 									className={cn(
 										"group/btn relative flex h-10 items-center rounded-lg px-2.5 text-sm font-medium transition-colors",
 										isActive
-											? "bg-[#141720] text-white"
-											: "text-zinc-400 hover:bg-white/[0.04] hover:text-zinc-200",
+											? "bg-surface-secondary text-foreground"
+											: "text-muted hover:bg-surface-secondary hover:text-foreground",
 									)}
 								>
 									<item.icon
 										size={18}
 										className={cn(
 											"shrink-0",
-											isActive ? "text-[#D0F237]" : "text-zinc-400 group-hover/btn:text-zinc-200"
+											isActive ? "text-accent" : "text-muted group-hover/btn:text-foreground"
 										)}
 									/>
 									<span className="ml-3 whitespace-nowrap opacity-0 transition-opacity duration-300 group-hover:opacity-100">
 										{item.label}
 									</span>
 									{isActive && (
-										<span className="absolute -left-2 h-4 w-[3px] rounded-r-full bg-[#D0F237]" />
+										<span className="absolute -left-2 h-4 w-[3px] rounded-r-full bg-accent" />
 									)}
 								</button>
 							);
@@ -135,42 +135,42 @@ function ProjectLayout() {
 				</div>
 
 				{/* Sidebar Footer (User Account Menu) */}
-				<div className="flex flex-col gap-1 border-t border-[#161820] p-2">
+				<div className="flex flex-col gap-1 border-t border-border p-2">
 					<button
 						type="button"
 						onClick={() => navigate({ to: "/$projectId/settings", params: { projectId } })}
 						className={cn(
 							"group/btn relative flex h-10 items-center rounded-lg px-2.5 text-sm font-medium transition-colors",
 							active === "settings"
-								? "bg-[#141720] text-white"
-								: "text-zinc-400 hover:bg-white/[0.04] hover:text-zinc-200",
+								? "bg-surface-secondary text-foreground"
+								: "text-muted hover:bg-surface-secondary hover:text-foreground",
 						)}
 					>
 						<TbSettings
 							size={18}
 							className={cn(
 								"shrink-0",
-								active === "settings" ? "text-[#D0F237]" : "text-zinc-400 group-hover/btn:text-zinc-200"
+								active === "settings" ? "text-accent" : "text-muted group-hover/btn:text-foreground"
 							)}
 						/>
 						<span className="ml-3 whitespace-nowrap opacity-0 transition-opacity duration-300 group-hover:opacity-100">
 							Project Settings
 						</span>
 						{active === "settings" && (
-							<span className="absolute -left-2 h-4 w-[3px] rounded-r-full bg-[#D0F237]" />
+							<span className="absolute -left-2 h-4 w-[3px] rounded-r-full bg-accent" />
 						)}
 					</button>
 					<Dropdown>
 						<Dropdown.Trigger
 							aria-label="Account menu"
-							className="flex w-full items-center overflow-hidden rounded-lg p-1 outline-none transition-colors hover:bg-white/[0.04] focus-visible:ring-2 focus-visible:ring-[var(--focus)]"
+							className="flex w-full items-center overflow-hidden rounded-lg p-1 outline-none transition-colors hover:bg-surface-secondary focus-visible:ring-2 focus-visible:ring-focus"
 						>
-							<div className="flex size-[34px] shrink-0 items-center justify-center rounded-full bg-[#202533] text-xs font-bold text-zinc-200">
+							<div className="flex size-[34px] shrink-0 items-center justify-center rounded-full bg-surface-secondary text-xs font-bold text-foreground ring-1 ring-border">
 								{initials}
 							</div>
 							<div className="ml-3 flex flex-col items-start whitespace-nowrap opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-								<span className="text-sm font-medium text-white">{userData?.name || "User"}</span>
-								<span className="text-[11px] text-zinc-500">{userData?.email || ""}</span>
+								<span className="text-sm font-medium text-foreground">{userData?.name || "User"}</span>
+								<span className="text-[11px] text-muted">{userData?.email || ""}</span>
 							</div>
 						</Dropdown.Trigger>
 						<Dropdown.Popover>
@@ -188,7 +188,7 @@ function ProjectLayout() {
 			</aside>
 
 			{/* Page Content */}
-			<main className="min-w-0 flex-1 overflow-y-auto bg-[#07080A] p-6">
+			<main className="min-w-0 flex-1 overflow-y-auto bg-background p-6">
 				<Outlet />
 			</main>
 		</div>
diff --git a/apps/portal/src/routes/_authed/$projectId/app-config.tsx b/apps/portal/src/routes/_authed/$projectId/app-config.tsx
index 9510c529..edeb918b 100644
--- a/apps/portal/src/routes/_authed/$projectId/app-config.tsx
+++ b/apps/portal/src/routes/_authed/$projectId/app-config.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import { createFileRoute } from "@tanstack/react-router";
-import { Button, Input, ListBox, Select, Spinner, TextField, toast } from "@fluxify/components";
+import { Button, DeleteButton, Input, ListBox, Select, Spinner, TextField, toast } from "@fluxify/components";
 import type { Key } from "@fluxify/components";
-import { TbChevronDown, TbSearch, TbTrash } from "react-icons/tb";
+import { TbChevronDown, TbSearch } from "react-icons/tb";
 import { appConfigQuery } from "@/query/appConfigQuery";
 import { showErrorNotification } from "@/lib/errorNotifier";
 import { ConfirmDialog } from "@/components/common/ConfirmDialog";
@@ -78,12 +78,11 @@ function AppConfigPage() {
 				</div>
 				<div className="flex items-center gap-2">
 					{selectedIds.size > 0 && (
-						<Button
-							variant="danger"
+						<DeleteButton
 							onPress={() => setPendingBulkDelete(true)}
 						>
-							<TbTrash size={16} /> Delete ({selectedIds.size})
-						</Button>
+							Delete ({selectedIds.size})
+						</DeleteButton>
 					)}
 					<CreateConfigButton projectId={projectId} />
 				</div>
diff --git a/apps/portal/src/routes/_authed/$projectId/custom-blocks.tsx b/apps/portal/src/routes/_authed/$projectId/custom-blocks.tsx
index 49dbeeed..1f7e6152 100644
--- a/apps/portal/src/routes/_authed/$projectId/custom-blocks.tsx
+++ b/apps/portal/src/routes/_authed/$projectId/custom-blocks.tsx
@@ -3,6 +3,8 @@ import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import {
 	Button,
 	Card,
+	CloseButton,
+	DeleteIconButton,
 	Input,
 	Label,
 	Modal,
@@ -10,7 +12,7 @@ import {
 	TextField,
 	toast,
 } from "@fluxify/components";
-import { TbPlus, TbTrash } from "react-icons/tb";
+import { TbPlus } from "react-icons/tb";
 import { customBlocksQuery } from "@/query/customBlocksQuery";
 import { showErrorNotification } from "@/lib/errorNotifier";
 import { ConfirmDialog } from "@/components/common/ConfirmDialog";
@@ -76,14 +78,10 @@ function CustomBlocksPage() {
 								>
 									Open canvas
 								</Button>
-								<Button
-									isIconOnly
-									variant="ghost"
+								<DeleteIconButton
 									aria-label="Delete block"
 									onPress={() => setPendingDelete(block as Block)}
-								>
-									<TbTrash size={16} />
-								</Button>
+								/>
 							</Card.Footer>
 						</Card>
 					))}
@@ -150,11 +148,14 @@ function CreateBlockButton({ projectId }: { projectId: string }) {
 			<Modal.Backdrop>
 				<Modal.Container placement="center" size="sm">
 					<Modal.Dialog>
-						<Modal.Header>
-							<Modal.Heading>Create a custom block</Modal.Heading>
-							<p className="mt-1 text-sm text-muted">
-								You can build its logic on the canvas afterwards.
-							</p>
+						<Modal.Header className="flex flex-row items-start justify-between">
+							<div>
+								<Modal.Heading>Create a custom block</Modal.Heading>
+								<p className="mt-1 text-sm text-muted">
+									You can build its logic on the canvas afterwards.
+								</p>
+							</div>
+							<CloseButton />
 						</Modal.Header>
 						<form onSubmit={submit}>
 							<Modal.Body>
diff --git a/apps/portal/src/routes/_authed/$projectId/integrations.tsx b/apps/portal/src/routes/_authed/$projectId/integrations.tsx
index 2f821cf0..e9c5a538 100644
--- a/apps/portal/src/routes/_authed/$projectId/integrations.tsx
+++ b/apps/portal/src/routes/_authed/$projectId/integrations.tsx
@@ -1,11 +1,10 @@
 import { useEffect, useState, type ReactNode } from "react";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { z } from "zod";
-import { Spinner, cn, toast } from "@fluxify/components";
+import { Button, Spinner, cn, toast } from "@fluxify/components";
 import { FaRobot, FaTableList } from "react-icons/fa6";
 import { LuServerCrash } from "react-icons/lu";
 import {
-	TbBolt,
 	TbBook,
 	TbChevronDown,
 	TbCloudCog,
@@ -14,11 +13,9 @@ import {
 	TbHeartRateMonitor,
 	TbLock,
 	TbPlugConnected,
-	TbTrash,
 } from "react-icons/tb";
 import { integrationsQuery } from "@/query/integrationsQuery";
 import { showErrorNotification } from "@/lib/errorNotifier";
-import { ConfirmDialog } from "@/components/common/ConfirmDialog";
 import { integrationIcons } from "@fluxify/components";
 import { IntegrationForm } from "@/components/integrations/IntegrationForm";
 import { IntegrationOnboardingModal } from "@/components/integrations/IntegrationOnboardingModal";
@@ -93,26 +90,25 @@ function IntegrationsPage() {
 	}
 
 	return (
-		<div className="flex flex-col gap-6">
+		<div className="flex h-full flex-col gap-6 overflow-hidden">
 			{/* Header */}
-			<div className="flex items-center justify-between">
+			<div className="flex shrink-0 items-center justify-between">
 				<div>
-					<h1 className="text-2xl font-bold tracking-tight text-white">Integrations</h1>
-					<p className="text-sm text-zinc-400">Connect &amp; Configure 3rd Party Services</p>
+					<h1 className="text-2xl font-bold tracking-tight text-foreground">Integrations</h1>
+					<p className="text-sm text-muted">Connect &amp; Configure 3rd Party Services</p>
 				</div>
-				<button
-					type="button"
-					onClick={() => setConnectOpen(true)}
-					className="flex items-center gap-2 rounded-xl bg-[#D0F237] px-4 py-2 text-sm font-semibold text-black transition-colors hover:bg-[#bce028]"
+				<Button
+					variant="primary"
+					onPress={() => setConnectOpen(true)}
 				>
 					<TbPlugConnected size={16} /> Connect App / Service
-				</button>
+				</Button>
 			</div>
 
-			<div className="flex min-h-0 flex-1 gap-6">
+			<div className="flex min-h-0 flex-1 gap-6 overflow-hidden">
 				{/* Column 1 — CATEGORIES Rail */}
-				<nav className="flex w-56 shrink-0 flex-col gap-1">
-					<div className="mb-2 px-3 text-[10px] font-bold uppercase tracking-widest text-zinc-500">
+				<nav className="flex w-56 shrink-0 flex-col gap-1 overflow-y-auto pr-1">
+					<div className="mb-2 px-3 text-[10px] font-bold uppercase tracking-widest text-muted">
 						CATEGORIES
 					</div>
 					{CONNECTORS.map((c) => {
@@ -124,18 +120,18 @@ function IntegrationsPage() {
 								type="button"
 								onClick={() => selectGroup(c.type)}
 								className={cn(
-									"flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-all",
+									"flex items-center gap-3 rounded-xl border px-3 py-2.5 text-sm font-medium transition-all",
 									active
-										? "border border-[#202533] bg-[#13151D] text-white shadow-sm"
-										: "text-zinc-400 hover:bg-white/[0.03] hover:text-zinc-200",
+										? "border-border bg-surface text-foreground shadow-sm"
+										: "border-transparent text-muted hover:bg-surface-secondary hover:text-foreground",
 								)}
 							>
-								<span className={cn(active ? "text-[#D0F237]" : "text-zinc-400")}>{c.icon}</span>
+								<span className={cn(active ? "text-accent" : "text-muted")}>{c.icon}</span>
 								<span>{c.name}</span>
 								<span
 									className={cn(
 										"ml-auto rounded-full px-2 py-0.5 text-xs font-semibold",
-										active ? "bg-[#202533] text-zinc-200" : "bg-[#161822] text-zinc-500",
+										active ? "bg-surface-secondary text-foreground" : "bg-surface-secondary text-muted",
 									)}
 								>
 									{count}
@@ -146,7 +142,7 @@ function IntegrationsPage() {
 				</nav>
 
 				{/* Column 2 — Center configured list or active creation/editing */}
-				<div className="min-w-0 flex-1 overflow-y-auto">
+				<div className="min-w-0 flex-1 overflow-y-auto pr-2">
 					<IntegrationsList projectId={projectId} group={selectedMenu} />
 				</div>
 
@@ -165,18 +161,16 @@ function IntegrationsList({ projectId, group }: { projectId: string; group: stri
 	const { data, isLoading, isError } = integrationsQuery.getAll.useQuery(projectId, group);
 	const remove = integrationsQuery.remove.mutation(projectId);
 
-	const [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null);
-
 	if (isLoading) return <div className="flex justify-center py-16"><Spinner /></div>;
 	if (isError) return <p className="py-16 text-center text-muted">Couldn't load integrations.</p>;
 
 	if (!data || data.length === 0) {
 		return (
-			<div className="flex flex-col items-center gap-3 rounded-2xl border border-[#1C202B] bg-[#0E1015] p-8 text-center">
-				<TbCloudCog size={36} className="text-zinc-600" />
+			<div className="flex flex-col items-center gap-3 rounded-2xl border border-border bg-surface p-8 text-center">
+				<TbCloudCog size={36} className="text-muted" />
 				<div>
-					<p className="text-base font-semibold text-white">No integrations found</p>
-					<p className="mt-1 text-xs text-zinc-400">
+					<p className="text-base font-semibold text-foreground">No integrations found</p>
+					<p className="mt-1 text-xs text-muted">
 						No configured services in this category yet. Click "Connect App / Service" to add one.
 					</p>
 				</div>
@@ -188,11 +182,6 @@ function IntegrationsList({ projectId, group }: { projectId: string; group: stri
 		navigate({ to: ".", search: { group, open: open === id ? undefined : id } });
 	}
 
-	function handleDelete(e: React.MouseEvent, id: string) {
-		e.stopPropagation();
-		setPendingDeleteId(id);
-	}
-
 	return (
 		<div className="flex flex-col gap-4">
 			{data.map((integration) => {
@@ -200,25 +189,25 @@ function IntegrationsList({ projectId, group }: { projectId: string; group: stri
 				return (
 					<div
 						key={integration.id}
-						className="overflow-hidden rounded-2xl border border-[#1C202B] bg-[#0E1015] transition-all"
+						className="overflow-hidden rounded-2xl border border-border bg-surface transition-all"
 					>
-						{/* Card Header Bar — Contains Title, ID, Delete, & Chevron */}
+						{/* Card Header Bar — Contains Title, ID, & Chevron */}
 						<div
 							role="button"
 							tabIndex={0}
 							onClick={() => toggle(integration.id)}
 							onKeyDown={(e) => e.key === "Enter" && toggle(integration.id)}
-							className="flex flex-wrap items-center justify-between gap-3 border-b border-[#1C202B] px-5 py-4 hover:bg-white/[0.02] cursor-pointer"
+							className="flex flex-wrap items-center justify-between gap-3 border-b border-border px-5 py-4 hover:bg-surface-secondary cursor-pointer"
 						>
 							<div className="flex items-center gap-3">
-								<div className="flex size-9 items-center justify-center rounded-xl bg-[#161822] text-[#D0F237]">
+								<div className="flex size-9 items-center justify-center rounded-xl bg-surface-secondary text-accent">
 									{integrationIcons[integration.variant] ?? <TbDatabase size={18} />}
 								</div>
 								<div>
 									<div className="flex items-center gap-2">
-										<span className="font-semibold text-white">{integration.name}</span>
+										<span className="font-semibold text-foreground">{integration.name}</span>
 									</div>
-									<div className="text-xs text-zinc-400">
+									<div className="text-xs text-muted">
 										{integration.variant} • {group}
 									</div>
 								</div>
@@ -226,25 +215,15 @@ function IntegrationsList({ projectId, group }: { projectId: string; group: stri
 
 							{/* Right Actions Bar — Available even when accordion is closed */}
 							<div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
-								<span className="rounded-full border border-[#252A38] bg-[#191C26] px-2.5 py-1 text-[11px] font-mono text-zinc-400">
+								<span className="rounded-full border border-border bg-surface-secondary px-2.5 py-1 text-[11px] font-mono text-muted">
 									ID: {integration.id.slice(0, 8)}
 								</span>
 
-								{/* Delete Button */}
-								<button
-									type="button"
-									onClick={(e) => handleDelete(e, integration.id)}
-									className="flex size-8 items-center justify-center rounded-xl border border-red-900/30 bg-[#1C181B] text-red-400 transition-colors hover:bg-red-950/40"
-									aria-label="Delete integration"
-								>
-									<TbTrash size={15} />
-								</button>
-
 								{/* Chevron indicator */}
 								<button
 									type="button"
 									onClick={() => toggle(integration.id)}
-									className="p-1 text-zinc-400 hover:text-white"
+									className="p-1 text-muted hover:text-foreground"
 								>
 									<TbChevronDown
 										size={18}
@@ -261,7 +240,17 @@ function IntegrationsList({ projectId, group }: { projectId: string; group: stri
 									projectId={projectId}
 									id={integration.id}
 									lockGroupVariant
-									showDelete={false}
+									showDelete
+									deletePending={remove.isPending}
+									onDelete={() => {
+										remove.mutate(integration.id, {
+											onSuccess: () => {
+												toast.success("Integration deleted");
+												navigate({ to: ".", search: { group } });
+											},
+											onError: (e) => showErrorNotification(e as Error),
+										});
+									}}
 									onSaved={() => navigate({ to: ".", search: { group } })}
 								/>
 							</div>
@@ -269,56 +258,87 @@ function IntegrationsList({ projectId, group }: { projectId: string; group: stri
 					</div>
 				);
 			})}
-
-			<ConfirmDialog
-				open={!!pendingDeleteId}
-				onOpenChange={(o) => !o && setPendingDeleteId(null)}
-				title="Delete integration?"
-				danger
-				confirmText="Delete"
-				pending={remove.isPending}
-				onConfirm={() => {
-					if (!pendingDeleteId) return;
-					const id = pendingDeleteId;
-					setPendingDeleteId(null);
-					navigate({ to: ".", search: { group } });
-					remove.mutate(id, {
-						onSuccess: () => toast.success("Integration deleted"),
-						onError: (e) => showErrorNotification(e as Error),
-					});
-				}}
-			>
-				You are about to delete this integration. This action is irreversible.
-			</ConfirmDialog>
 		</div>
 	);
 }
 
-function RightHelpPanel({ projectId, activeGroup }: { projectId: string; activeGroup: string }) {
-	const { data: dbData } = integrationsQuery.getAll.useQuery(projectId, "database");
+const HELP_DATA: Record<
+	string,
+	{
+		title: string;
+		description: string;
+		docsUrl: string;
+		tip: string;
+		tipIcon?: ReactNode;
+	}
+> = {
+	database: {
+		title: "Database Integrations",
+		description:
+			"Learn how to connect and secure your PostgreSQL, MySQL, and MongoDB databases with SSL and connection pooling.",
+		docsUrl: "https://docs.fluxify.rest/integrations/databases.html",
+		tip: "Use a dedicated read-only role or restricted database user for Fluxify to limit blast radius.",
+		tipIcon: <TbLock size={16} className="shrink-0 text-muted mt-0.5" />,
+	},
+	kv: {
+		title: "KV & Cache Stores",
+		description:
+			"Configure Redis and Memcached key-value stores for lightning-fast caching, rate-limiting, and state management.",
+		docsUrl: "https://docs.fluxify.rest/integrations/kv-stores.html",
+		tip: "Prefix cache keys with project namespaces to prevent collisions across environments.",
+		tipIcon: <FaTableList size={14} className="shrink-0 text-muted mt-0.5" />,
+	},
+	ai: {
+		title: "AI & LLM Services",
+		description:
+			"Connect OpenAI, Anthropic, Gemini, Mistral, and local or custom OpenAI-compatible endpoints to your workflow.",
+		docsUrl: "https://docs.fluxify.rest/integrations/ai-models.html",
+		tip: "Store API keys as encrypted variables in App Config and bind them using cfg: keys.",
+		tipIcon: <FaRobot size={14} className="shrink-0 text-muted mt-0.5" />,
+	},
+	observability: {
+		title: "Observability & Telemetry",
+		description:
+			"Stream structured application logs and real-time telemetry metrics directly to Loki or OpenTelemetry endpoints.",
+		docsUrl: "https://docs.fluxify.rest/integrations/observability.html",
+		tip: "Use OpenTelemetry (OTLP) to unify logs, metrics, and trace export across your stack.",
+		tipIcon: <TbHeartRateMonitor size={16} className="shrink-0 text-muted mt-0.5" />,
+	},
+	baas: {
+		title: "Backend Services",
+		description:
+			"Connect managed backend services and APIs to trigger events and sync data with your Fluxify projects.",
+		docsUrl: "https://docs.fluxify.rest/integrations/databases.html",
+		tip: "Ensure all service endpoints and tokens are secured via App Config secrets.",
+		tipIcon: <LuServerCrash size={15} className="shrink-0 text-muted mt-0.5" />,
+	},
+};
+
+function RightHelpPanel({ activeGroup }: { projectId: string; activeGroup: string }) {
+	const info = HELP_DATA[activeGroup] ?? HELP_DATA.database;
 
 	return (
-		<div className="flex w-64 shrink-0 flex-col gap-4">
-			{/* Card 1: Need Help */}
-			<div className="flex flex-col gap-3 rounded-2xl border border-[#1C202B] bg-[#0E1015] p-4">
-				<div className="flex items-center gap-2 font-semibold text-white text-sm">
-					<TbBook size={16} className="text-zinc-400" />
+		<div className="flex w-64 shrink-0 flex-col gap-4 overflow-y-auto pr-1">
+			{/* Need Help Card */}
+			<div className="flex flex-col gap-3 rounded-2xl border border-border bg-surface p-4">
+				<div className="flex items-center gap-2 font-semibold text-foreground text-sm">
+					<TbBook size={16} className="text-muted" />
 					<span>Need help?</span>
 				</div>
-				<p className="text-xs text-zinc-400 leading-relaxed">
-					Learn how to secure your Postgres integration with IP allowlists and read replicas.
+				<p className="text-xs text-muted leading-relaxed">
+					{info.description}
 				</p>
 				<a
-					href="https://docs.fluxify.rest/integrations/databases.html"
+					href={info.docsUrl}
 					target="_blank"
 					rel="noreferrer"
-					className="flex items-center gap-1 text-xs font-semibold text-[#D0F237] hover:underline"
+					className="flex items-center gap-1 text-xs font-semibold text-accent hover:underline"
 				>
 					View docs <TbExternalLink size={12} />
 				</a>
-				<div className="flex items-start gap-2.5 rounded-xl border border-[#202533] bg-[#12141C] p-3 text-xs text-zinc-400 leading-relaxed">
-					<TbLock size={16} className="shrink-0 text-zinc-400 mt-0.5" />
-					<span>Use a dedicated read-only role for Fluxify to limit blast radius.</span>
+				<div className="flex items-start gap-2.5 rounded-xl border border-border bg-surface-secondary p-3 text-xs text-muted leading-relaxed">
+					{info.tipIcon}
+					<span>{info.tip}</span>
 				</div>
 			</div>
 		</div>
diff --git a/apps/portal/src/routes/_authed/$projectId/routes.tsx b/apps/portal/src/routes/_authed/$projectId/routes.tsx
index b3ebc78c..f5a9367f 100644
--- a/apps/portal/src/routes/_authed/$projectId/routes.tsx
+++ b/apps/portal/src/routes/_authed/$projectId/routes.tsx
@@ -1,13 +1,14 @@
-import { useState } from "react";
+import { useState } from "react";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import {
 	Button,
 	Chip,
+	DeleteIconButton,
 	Spinner,
 	Table,
 	toast,
 } from "@fluxify/components";
-import { TbPlus, TbTrash } from "react-icons/tb";
+import { TbPlus } from "react-icons/tb";
 import { routesQuery } from "@/query/routesQuery";
 import { showErrorNotification } from "@/lib/errorNotifier";
 import { ConfirmDialog } from "@/components/common/ConfirmDialog";
@@ -105,14 +106,10 @@ function RoutesPage() {
 										>
 											{route.active ? "Disable" : "Enable"}
 										</Button>
-										<Button
-											isIconOnly
-											variant="ghost"
+										<DeleteIconButton
 											aria-label="Delete route"
 											onPress={() => setPendingDelete(route)}
-										>
-											<TbTrash size={16} />
-										</Button>
+										/>
 									</div>
 								</Table.Cell>
 							</Table.Row>
diff --git a/apps/portal/src/routes/_authed/$projectId/routes_.new.tsx b/apps/portal/src/routes/_authed/$projectId/routes_.new.tsx
index bd8e4673..aa5a50d3 100644
--- a/apps/portal/src/routes/_authed/$projectId/routes_.new.tsx
+++ b/apps/portal/src/routes/_authed/$projectId/routes_.new.tsx
@@ -155,13 +155,13 @@ function CreateRoutePage() {
 				</Button>
 				<div>
 					<h1 className="text-xl font-semibold tracking-tight">Create a route</h1>
-					<p className="text-xs text-zinc-400">
+					<p className="text-xs text-muted">
 						Define the endpoint and how incoming requests are validated.
 					</p>
 				</div>
 			</div>
 
-			<nav aria-label="Route setup steps" className="border-b border-[#1E232F] pb-3">
+			<nav aria-label="Route setup steps" className="border-b border-border pb-3">
 				<ol className="flex flex-wrap gap-2">
 					{steps.map((item, index) => {
 						const reachable = index === 0 || basicsValid;
@@ -177,17 +177,17 @@ function CreateRoutePage() {
 										"flex w-full items-center gap-2 rounded-lg px-2 py-1 text-left text-xs font-medium transition-colors",
 										reachable
 											? index === current
-												? "text-white"
-												: "text-zinc-400 hover:bg-white/[0.04] hover:text-zinc-200"
-											: "cursor-not-allowed text-zinc-600",
+												? "text-foreground"
+												: "text-muted hover:bg-surface-secondary hover:text-foreground"
+											: "cursor-not-allowed text-muted/50",
 									)}
 								>
 									<span
 										className={cn(
 											"flex size-5 shrink-0 items-center justify-center rounded-full border text-[10px] font-semibold transition-all",
 											complete || index === current
-												? "border-[#D0F237] bg-[#D0F237] text-black"
-												: "border-[#2B313E] bg-[#141720] text-zinc-500",
+												? "border-accent bg-accent text-accent-foreground"
+												: "border-border bg-surface-secondary text-muted",
 										)}
 									>
 										{complete ? <TbCheck size={12} strokeWidth={3} /> : index + 1}
@@ -246,7 +246,7 @@ function CreateRoutePage() {
 							>
 								<Label>Path</Label>
 								<Input placeholder="/users/:id" className="font-mono" />
-								<p className="text-xs text-zinc-500">
+								<p className="text-xs text-muted">
 									Letters, digits, <code className="font-mono">-</code>,{" "}
 									<code className="font-mono">/</code> and{" "}
 									<code className="font-mono">:param</code> segments.
@@ -254,12 +254,12 @@ function CreateRoutePage() {
 							</TextField>
 
 							{pathParams.length > 0 && (
-								<div className="flex flex-wrap items-center gap-2 text-xs text-zinc-400">
+								<div className="flex flex-wrap items-center gap-2 text-xs text-muted">
 									Path parameters:
 									{pathParams.map((param) => (
 										<span
 											key={param}
-											className="rounded-full border border-[#232836] bg-[#12151D] px-2 py-0.5 font-mono text-[11px] text-[#D0F237]"
+											className="rounded-full border border-border bg-surface-secondary px-2 py-0.5 font-mono text-[11px] text-accent"
 										>
 											{param}
 										</span>
@@ -315,7 +315,7 @@ function CreateRoutePage() {
 
 					{currentKey === "review" && (
 						<div className="flex flex-col gap-5">
-							<dl className="grid gap-px overflow-hidden rounded-xl border border-[#232836] bg-[#232836] sm:grid-cols-2">
+							<dl className="grid gap-px overflow-hidden rounded-xl border border-border bg-border sm:grid-cols-2">
 								<SummaryItem label="Name" value={name} />
 								<SummaryItem label="Endpoint" value={`${method} ${path}`} mono />
 								<SummaryItem
@@ -357,7 +357,7 @@ function CreateRoutePage() {
 								>
 									<Label>Timeout (seconds)</Label>
 									<Input type="number" min={30} />
-									<p className="text-xs text-zinc-500">
+									<p className="text-xs text-muted">
 										Minimum 30 seconds. Requests running longer are aborted.
 									</p>
 								</TextField>
@@ -371,7 +371,7 @@ function CreateRoutePage() {
 									description="Each request is recorded as an OpenTelemetry trace and exported to the project's traces destination — nothing is stored here. Exporting costs time per request: leave it off when latency is the priority, turn it on when you want visibility into what a request did."
 								/>
 								{!hasTracesDestination && (
-									<p className="text-xs text-amber-400">
+									<p className="text-xs text-warning">
 										This project has no traces destination yet, so traced
 										requests record no spans. Set one under Settings →
 										Telemetry.
@@ -390,7 +390,7 @@ function CreateRoutePage() {
 				</div>
 			</div>
 
-			<div className="flex items-center justify-between border-t border-[#1E232F] pt-3.5">
+			<div className="flex items-center justify-between border-t border-border pt-3.5">
 				<Button
 					variant="ghost"
 					size="sm"
@@ -437,13 +437,13 @@ function StepHeading({
 }) {
 	return (
 		<div>
-			<p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-[#D0F237]">
+			<p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-accent">
 				Step {current + 1} of {total}
 			</p>
-			<h2 className="mt-1 text-lg font-semibold tracking-tight text-white">
+			<h2 className="mt-1 text-lg font-semibold tracking-tight text-foreground">
 				{title}
 			</h2>
-			<p className="mt-0.5 text-xs text-zinc-400">{description}</p>
+			<p className="mt-0.5 text-xs text-muted">{description}</p>
 		</div>
 	);
 }
@@ -458,11 +458,11 @@ function SummaryItem({
 	mono?: boolean;
 }) {
 	return (
-		<div className="bg-[#12151D] px-3 py-2">
-			<dt className="text-[11px] uppercase tracking-wide text-zinc-500">
+		<div className="bg-surface px-3 py-2">
+			<dt className="text-[11px] uppercase tracking-wide text-muted">
 				{label}
 			</dt>
-			<dd className={cn("mt-0.5 text-sm text-white", mono && "font-mono")}>
+			<dd className={cn("mt-0.5 text-sm text-foreground", mono && "font-mono")}>
 				{value || "—"}
 			</dd>
 		</div>
diff --git a/apps/portal/src/routes/_authed/$projectId/settings.tsx b/apps/portal/src/routes/_authed/$projectId/settings.tsx
index 2157b037..f3a9e23d 100644
--- a/apps/portal/src/routes/_authed/$projectId/settings.tsx
+++ b/apps/portal/src/routes/_authed/$projectId/settings.tsx
@@ -77,14 +77,14 @@ function ProjectSettingsPage() {
 	return (
 		<div className="flex h-full w-full flex-col">
 			<div className="mb-6">
-				<h1 className="text-2xl font-semibold tracking-tight text-white">Project settings</h1>
+				<h1 className="text-2xl font-semibold tracking-tight text-foreground">Project settings</h1>
 				<p className="text-sm text-muted">Manage your project configurations and settings.</p>
 			</div>
 
-			<div className="flex min-h-0 flex-1 rounded-xl border border-[#161820] bg-[#0A0C10]">
+			<div className="flex min-h-0 flex-1 rounded-xl border border-border bg-surface">
 				{/* Left Sidebar */}
-				<div className="w-[240px] shrink-0 border-r border-[#161820] py-6 pl-4 pr-3 flex flex-col gap-1">
-					<div className="mb-2 px-3 text-xs font-semibold tracking-wider text-zinc-500 uppercase">
+				<div className="w-[240px] shrink-0 border-r border-border py-6 pl-4 pr-3 flex flex-col gap-1">
+					<div className="mb-2 px-3 text-xs font-semibold tracking-wider text-muted uppercase">
 						Project
 					</div>
 					{SETTINGS_TABS.map((tab) => (
@@ -95,26 +95,26 @@ function ProjectSettingsPage() {
 							className={cn(
 								"flex items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition-colors",
 								activeTab === tab.id
-									? "bg-[#161820] text-white"
-									: "text-zinc-400 hover:bg-white/[0.04] hover:text-zinc-200"
+									? "bg-surface-secondary text-foreground"
+									: "text-muted hover:bg-surface-secondary hover:text-foreground"
 							)}
 						>
 							<div className="flex items-center gap-3">
-								<tab.icon size={18} className={activeTab === tab.id ? "text-zinc-300" : "text-zinc-500"} />
+								<tab.icon size={18} className={activeTab === tab.id ? "text-foreground" : "text-muted"} />
 								{tab.label}
 							</div>
 							{tab.id === "telemetry" && configuredTelemetry > 0 && (
-								<div className="flex h-5 min-w-5 items-center justify-center rounded bg-[#202533] px-1 text-[11px] font-medium text-zinc-300">
+								<div className="flex h-5 min-w-5 items-center justify-center rounded bg-surface-secondary px-1 text-[11px] font-medium text-foreground">
 									{configuredTelemetry}
 								</div>
 							)}
 							{tab.id === "ai-connections" && (
-								<div className="flex h-5 min-w-5 items-center justify-center rounded bg-[#202533] px-1 text-[11px] font-medium text-zinc-300">
+								<div className="flex h-5 min-w-5 items-center justify-center rounded bg-surface-secondary px-1 text-[11px] font-medium text-foreground">
 									1
 								</div>
 							)}
 							{tab.id === "members" && membersCount !== undefined && (
-								<div className="flex h-5 min-w-5 items-center justify-center rounded bg-[#202533] px-1 text-[11px] font-medium text-zinc-300">
+								<div className="flex h-5 min-w-5 items-center justify-center rounded bg-surface-secondary px-1 text-[11px] font-medium text-foreground">
 									{membersCount}
 								</div>
 							)}
diff --git a/apps/server/src/api/v1/integrations/helpers.ts b/apps/server/src/api/v1/integrations/helpers.ts
index 819d3415..cad97a14 100644
--- a/apps/server/src/api/v1/integrations/helpers.ts
+++ b/apps/server/src/api/v1/integrations/helpers.ts
@@ -110,6 +110,7 @@ export function getDefaultVariantValue(variant: Variants) {
 		return {
 			apiKey: "",
 			model: "",
+			useForHarness: false,
 		} as z.infer<typeof openAIVariantConfigSchema>;
 	}
 	if (variant === "OpenAI Compatible") {
@@ -117,6 +118,7 @@ export function getDefaultVariantValue(variant: Variants) {
 			apiKey: "",
 			model: "",
 			baseUrl: "",
+			useForHarness: false,
 		} as z.infer<typeof openAiCompatibleVariantConfigSchema>;
 	}
 	if (variant === "Redis" || variant === "Memcached") {
diff --git a/packages/components/index.ts b/packages/components/index.ts
index af0e21f5..3c62bce7 100644
--- a/packages/components/index.ts
+++ b/packages/components/index.ts
@@ -40,3 +40,10 @@ export {
 	Switch,
 	type SwitchProps,
 } from "./src/Switch";
+export * from "./src/DeleteButton";
+export {
+	CloseButton,
+	ModalCloseButton,
+	type CloseButtonProps,
+	type ModalCloseButtonProps,
+} from "./src/CloseButton";
diff --git a/packages/components/src/ApiPlayground/KeyValueTable.tsx b/packages/components/src/ApiPlayground/KeyValueTable.tsx
index 350092a8..ea176a44 100644
--- a/packages/components/src/ApiPlayground/KeyValueTable.tsx
+++ b/packages/components/src/ApiPlayground/KeyValueTable.tsx
@@ -1,5 +1,6 @@
-import { TbPlus, TbTrash } from "react-icons/tb";
+import { TbPlus } from "react-icons/tb";
 import { Button, Input } from "@heroui/react";
+import { DeleteIconButton } from "../DeleteButton";
 import type { ApiKeyValue } from "./types";
 
 type KeyValueTableProps = {
@@ -24,7 +25,7 @@ export function KeyValueTable({ rows, onChange, onAdd, addLabel, readOnlyKeys }:
 				<div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_32px] gap-2" key={row.id}>
 					<Input aria-label={`${row.key || "Parameter"} key`} readOnly={readOnlyKeys} value={row.key} onChange={(event) => update(row.id, "key", event.target.value)} className="h-8 min-w-0 font-mono text-xs" />
 					<Input aria-label={`${row.key || "Parameter"} value`} value={row.value} onChange={(event) => update(row.id, "value", event.target.value)} className="h-8 min-w-0 font-mono text-xs" />
-					{!row.required ? <Button aria-label={`Remove ${row.key || "row"}`} isIconOnly size="sm" variant="ghost" onPress={() => onChange(rows.filter((candidate) => candidate.id !== row.id))}><TbTrash size={15} /></Button> : <span />}
+					{!row.required ? <DeleteIconButton aria-label={`Remove ${row.key || "row"}`} size="sm" iconSize={15} onPress={() => onChange(rows.filter((candidate) => candidate.id !== row.id))} /> : <span />}
 				</div>
 			))}
 			{onAdd && <Button size="sm" variant="secondary" onPress={onAdd}><TbPlus size={14} />{addLabel}</Button>}
diff --git a/packages/components/src/CloseButton/CloseButton.test.ts b/packages/components/src/CloseButton/CloseButton.test.ts
new file mode 100644
index 00000000..a24cc960
--- /dev/null
+++ b/packages/components/src/CloseButton/CloseButton.test.ts
@@ -0,0 +1,8 @@
+import { expect, test } from "bun:test";
+import { CloseButton, ModalCloseButton } from "./CloseButton";
+
+test("CloseButton and ModalCloseButton are exported functions", () => {
+	expect(typeof CloseButton).toBe("function");
+	expect(typeof ModalCloseButton).toBe("function");
+	expect(CloseButton).toBe(ModalCloseButton);
+});
diff --git a/packages/components/src/CloseButton/CloseButton.tsx b/packages/components/src/CloseButton/CloseButton.tsx
new file mode 100644
index 00000000..643a1025
--- /dev/null
+++ b/packages/components/src/CloseButton/CloseButton.tsx
@@ -0,0 +1,47 @@
+import type { ComponentProps, ReactNode } from "react";
+import { Button } from "@heroui/react";
+import { TbX } from "react-icons/tb";
+import { clsx } from "clsx";
+
+export type CloseButtonProps = Omit<ComponentProps<typeof Button>, "isIconOnly"> & {
+	icon?: ReactNode;
+	iconSize?: number;
+};
+
+export function CloseButton({
+	icon,
+	iconSize = 18,
+	variant = "ghost",
+	size = "sm",
+	slot = "close",
+	className,
+	children,
+	"aria-label": ariaLabel = "Close",
+	...props
+}: CloseButtonProps) {
+	return (
+		<Button
+			isIconOnly
+			variant={variant}
+			size={size}
+			slot={slot}
+			aria-label={ariaLabel}
+			className={clsx(
+				"text-muted hover:text-foreground hover:bg-surface-secondary active:bg-surface-secondary/80 rounded-md transition-colors",
+				className,
+			)}
+			{...props}
+		>
+			{(renderProps) =>
+				children != null
+					? typeof children === "function"
+						? children(renderProps)
+						: children
+					: (icon ?? <TbX size={iconSize} />)
+			}
+		</Button>
+	);
+}
+
+export const ModalCloseButton = CloseButton;
+export type ModalCloseButtonProps = CloseButtonProps;
diff --git a/packages/components/src/CloseButton/index.ts b/packages/components/src/CloseButton/index.ts
new file mode 100644
index 00000000..5c8430cf
--- /dev/null
+++ b/packages/components/src/CloseButton/index.ts
@@ -0,0 +1 @@
+export * from "./CloseButton";
diff --git a/packages/components/src/DeleteButton/DeleteButton.test.ts b/packages/components/src/DeleteButton/DeleteButton.test.ts
new file mode 100644
index 00000000..ed12665c
--- /dev/null
+++ b/packages/components/src/DeleteButton/DeleteButton.test.ts
@@ -0,0 +1,10 @@
+import { describe, expect, it } from "bun:test";
+import { DeleteButton } from "./DeleteButton";
+import { DeleteIconButton } from "./DeleteIconButton";
+
+describe("DeleteButton and DeleteIconButton components", () => {
+	it("exports DeleteButton and DeleteIconButton functions", () => {
+		expect(typeof DeleteButton).toBe("function");
+		expect(typeof DeleteIconButton).toBe("function");
+	});
+});
diff --git a/packages/components/src/DeleteButton/DeleteButton.tsx b/packages/components/src/DeleteButton/DeleteButton.tsx
new file mode 100644
index 00000000..51954531
--- /dev/null
+++ b/packages/components/src/DeleteButton/DeleteButton.tsx
@@ -0,0 +1,32 @@
+import type { ComponentProps, ReactNode } from "react";
+import { Button } from "@heroui/react";
+import { TbTrash } from "react-icons/tb";
+
+export type DeleteButtonProps = ComponentProps<typeof Button> & {
+	icon?: ReactNode;
+	iconSize?: number;
+	showIcon?: boolean;
+};
+
+export function DeleteButton({
+	icon,
+	iconSize = 16,
+	showIcon = true,
+	variant = "danger-soft",
+	children,
+	...props
+}: DeleteButtonProps) {
+	return (
+		<Button
+			variant={variant}
+			{...props}
+		>
+			{(renderProps) => (
+				<>
+					{showIcon && (icon ?? <TbTrash size={iconSize} />)}
+					{typeof children === "function" ? children(renderProps) : children}
+				</>
+			)}
+		</Button>
+	);
+}
diff --git a/packages/components/src/DeleteButton/DeleteIconButton.tsx b/packages/components/src/DeleteButton/DeleteIconButton.tsx
new file mode 100644
index 00000000..f438e4b3
--- /dev/null
+++ b/packages/components/src/DeleteButton/DeleteIconButton.tsx
@@ -0,0 +1,36 @@
+import type { ComponentProps, ReactNode } from "react";
+import { Button } from "@heroui/react";
+import { TbTrash } from "react-icons/tb";
+
+export type DeleteIconButtonProps = Omit<ComponentProps<typeof Button>, "isIconOnly"> & {
+	icon?: ReactNode;
+	iconSize?: number;
+};
+
+export function DeleteIconButton({
+	icon,
+	iconSize = 16,
+	variant = "danger-soft",
+	size,
+	className,
+	children,
+	...props
+}: DeleteIconButtonProps) {
+	return (
+		<Button
+			isIconOnly
+			variant={variant}
+			size={size}
+			className={className}
+			{...props}
+		>
+			{(renderProps) =>
+				children != null
+					? typeof children === "function"
+						? children(renderProps)
+						: children
+					: (icon ?? <TbTrash size={iconSize} />)
+			}
+		</Button>
+	);
+}
diff --git a/packages/components/src/DeleteButton/index.ts b/packages/components/src/DeleteButton/index.ts
new file mode 100644
index 00000000..e00d755e
--- /dev/null
+++ b/packages/components/src/DeleteButton/index.ts
@@ -0,0 +1,2 @@
+export * from "./DeleteButton";
+export * from "./DeleteIconButton";
diff --git a/packages/components/src/IntegrationSelector/IntegrationSelector.tsx b/packages/components/src/IntegrationSelector/IntegrationSelector.tsx
index da1f1e5d..5dd7ba17 100644
--- a/packages/components/src/IntegrationSelector/IntegrationSelector.tsx
+++ b/packages/components/src/IntegrationSelector/IntegrationSelector.tsx
@@ -25,8 +25,8 @@ import {
 	TbPlus,
 	TbRefresh,
 	TbSearch,
-	TbX,
 } from "react-icons/tb";
+import { CloseButton } from "../CloseButton";
 import { integrationIcons } from "./integrationIcons";
 import type {
 	Integration,
@@ -155,15 +155,7 @@ function PickerModal({
 										Choose Integration
 									</Modal.Heading>
 								</div>
-								<Button
-									isIconOnly
-									variant="ghost"
-									size="sm"
-									onPress={onClose}
-									aria-label="Close"
-								>
-									<TbX size={16} />
-								</Button>
+								<CloseButton onPress={onClose} />
 							</div>
 						</Modal.Header>
 
@@ -486,15 +478,11 @@ export function IntegrationSelector({
 
 								{/* Clear */}
 								{selectedIntegration && (
-									<Button
-										variant="ghost"
-										size="sm"
+									<CloseButton
 										aria-label="Clear Integration"
 										onPress={handleClear}
 										className={iconBtnClass}
-									>
-										<TbX size={18} />
-									</Button>
+									/>
 								)}
 
 								{/* Divider — only when action buttons are showing */}
diff --git a/packages/components/src/JsonEditor/JsonArrayEditor.tsx b/packages/components/src/JsonEditor/JsonArrayEditor.tsx
index 78ac8850..9c37e069 100644
--- a/packages/components/src/JsonEditor/JsonArrayEditor.tsx
+++ b/packages/components/src/JsonEditor/JsonArrayEditor.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@heroui/react";
 import { useState } from "react";
-import { TbArrowDown, TbArrowUp, TbPlus, TbTrash } from "react-icons/tb";
+import { TbArrowDown, TbArrowUp, TbPlus } from "react-icons/tb";
+import { DeleteIconButton } from "../DeleteButton";
 import type { JsonArray, JsonValue, JsonValueType } from "./types";
 import { JsonCollectionShell } from "./JsonCollectionShell";
 import { JsonTypeSelect } from "./JsonTypeSelect";
@@ -64,17 +65,14 @@ export function JsonArrayEditor({
 						>
 							<TbArrowDown aria-hidden="true" className="size-4" />
 						</Button>
-						<Button
-							aria-label={`Delete item ${index + 1}`}
-							isIconOnly
+						<DeleteIconButton
+							aria-label="Remove item"
+							isDisabled={isReadOnly}
 							onPress={() =>
 								onChange(value.filter((_, itemIndex) => itemIndex !== index))
 							}
 							size="sm"
-							variant="ghost"
-						>
-							<TbTrash aria-hidden="true" className="size-4 text-danger" />
-						</Button>
+						/>
 					</div>
 				) : null;
 
diff --git a/packages/components/src/JsonEditor/JsonEditorDialog.tsx b/packages/components/src/JsonEditor/JsonEditorDialog.tsx
index 553fb637..864dc703 100644
--- a/packages/components/src/JsonEditor/JsonEditorDialog.tsx
+++ b/packages/components/src/JsonEditor/JsonEditorDialog.tsx
@@ -1,6 +1,6 @@
-import { Button, Modal } from "@heroui/react";
+import { Modal } from "@heroui/react";
 import type { CSSProperties, ReactNode } from "react";
-import { FiX } from "react-icons/fi";
+import { CloseButton } from "../CloseButton";
 import type { JsonEditorModalSize } from "./types";
 
 interface JsonEditorDialogProps {
@@ -51,16 +51,10 @@ export function JsonEditorDialog({
 						<span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
 							{title}
 						</span>
-						<Button
+						<CloseButton
 							aria-label="Close JSON editor"
-							className="h-7 w-7 min-w-7 p-0"
-							isIconOnly
 							onPress={() => onOpenChange(false)}
-							size="sm"
-							variant="ghost"
-						>
-							<FiX aria-hidden="true" className="size-4" />
-						</Button>
+						/>
 					</div>
 
 					{description && (
diff --git a/packages/components/src/JsonEditor/JsonObjectEditor.tsx b/packages/components/src/JsonEditor/JsonObjectEditor.tsx
index 91114a84..01d3de64 100644
--- a/packages/components/src/JsonEditor/JsonObjectEditor.tsx
+++ b/packages/components/src/JsonEditor/JsonObjectEditor.tsx
@@ -1,6 +1,7 @@
 import { Button, InputGroup, TextField } from "@heroui/react";
 import { useEffect, useState } from "react";
-import { TbPlus, TbTrash } from "react-icons/tb";
+import { TbPlus } from "react-icons/tb";
+import { DeleteIconButton } from "../DeleteButton";
 import type { JsonObject, JsonValue, JsonValueType } from "./types";
 import { JsonCollectionShell } from "./JsonCollectionShell";
 import { JsonTypeSelect } from "./JsonTypeSelect";
@@ -119,20 +120,16 @@ export function JsonObjectEditor({
 				const valueType = getJsonValueType(entryValue);
 				const isCollection = valueType === "object" || valueType === "array";
 				const deleteButton = !isReadOnly ? (
-					<Button
+					<DeleteIconButton
 						aria-label={`Delete ${key}`}
 						className="self-center"
-						isIconOnly
 						onPress={() => {
 							const next = { ...value };
 							delete next[key];
 							onChange(next);
 						}}
 						size="sm"
-						variant="ghost"
-					>
-						<TbTrash aria-hidden="true" className="size-4 text-danger" />
-					</Button>
+					/>
 				) : (
 					<span aria-hidden="true" className="size-8" />
 				);
diff --git a/packages/components/src/SchemaEditor/PropertyRow.tsx b/packages/components/src/SchemaEditor/PropertyRow.tsx
index 440a4ae3..30fc989d 100644
--- a/packages/components/src/SchemaEditor/PropertyRow.tsx
+++ b/packages/components/src/SchemaEditor/PropertyRow.tsx
@@ -6,8 +6,9 @@ import {
 	Tooltip,
 } from "@heroui/react";
 import { IoLogoJavascript } from "react-icons/io5";
-import { TbChevronRight, TbSettings, TbTrash } from "react-icons/tb";
+import { TbChevronRight, TbSettings } from "react-icons/tb";
 import { Checkbox } from "../Checkbox";
+import { DeleteIconButton } from "../DeleteButton";
 import { CONTAINER_TYPES } from "./constants";
 import { useSchemaEditorContext } from "./context";
 import { DataTypeSelect } from "./DataTypeSelect";
@@ -130,15 +131,11 @@ export function PropertyRow({
 				)}
 
 				{!isReadOnly && !lockKeys && (
-					<Button
+					<DeleteIconButton
 						aria-label={`Remove ${property.key || "property"}`}
-						isIconOnly
 						onPress={() => removeProperty(path)}
 						size="sm"
-						variant="ghost"
-					>
-						<TbTrash className="size-4 text-danger" />
-					</Button>
+					/>
 				)}
 			</div>
 		</div>
diff --git a/packages/components/src/SchemaEditor/rules/EnumRules.tsx b/packages/components/src/SchemaEditor/rules/EnumRules.tsx
index d9dc0b4a..fee299b5 100644
--- a/packages/components/src/SchemaEditor/rules/EnumRules.tsx
+++ b/packages/components/src/SchemaEditor/rules/EnumRules.tsx
@@ -1,6 +1,7 @@
 import { Button, InputGroup, ListBox, Select, TextField } from "@heroui/react";
 import { useState } from "react";
-import { TbPlus, TbTrash } from "react-icons/tb";
+import { TbPlus } from "react-icons/tb";
+import { DeleteIconButton } from "../../DeleteButton";
 import type { RuleEditorProps } from "../types";
 import { getRuleValue, updateRule } from "../utils";
 import { RuleSectionTitle } from "./fields";
@@ -108,15 +109,11 @@ export function EnumRules({ node, onUpdate, isReadOnly }: RuleEditorProps) {
 							</InputGroup>
 						</TextField>
 						{!isReadOnly && (
-							<Button
+							<DeleteIconButton
 								aria-label={`Remove value ${index + 1}`}
-								isIconOnly
 								onPress={() => commit(values.filter((_, i) => i !== index))}
 								size="sm"
-								variant="ghost"
-							>
-								<TbTrash className="size-4 text-danger" />
-							</Button>
+							/>
 						)}
 					</div>
 				))}