diff --git a/web/app/dashboard/ai-workflows/_components/workflow-node-card.tsx b/web/app/dashboard/ai-workflows/_components/workflow-node-card.tsx
index 014f806..4152b22 100644
--- a/web/app/dashboard/ai-workflows/_components/workflow-node-card.tsx
+++ b/web/app/dashboard/ai-workflows/_components/workflow-node-card.tsx
@@ -2,7 +2,6 @@ import type { ReactNode } from "react"
 
 import { cn } from "@/lib/utils"
 import type { AIWorkflowNodeSpec } from "@/lib/api/admin"
-import { getWorkflowNodeMeta } from "./workflow-node-meta"
 import { WorkflowNodeIcon } from "./workflow-node-icon"
 
 export function WorkflowNodeCard({
@@ -20,8 +19,6 @@ export function WorkflowNodeCard({
   width?: "normal" | "wide"
   children?: ReactNode
 }) {
-  const meta = getWorkflowNodeMeta(nodeType)
-
   return (
     <div
       className={cn(
@@ -34,7 +31,7 @@ export function WorkflowNodeCard({
     >
       <div className="overflow-hidden rounded-lg border border-transparent bg-background">
         <div className="flex items-center gap-2 px-3 pb-2 pt-3">
-          <WorkflowNodeIcon type={nodeType} tone={meta.tone} />
+          <WorkflowNodeIcon type={nodeType} />
           <div className="min-w-0 flex-1">
             <div className="truncate text-sm font-semibold leading-5 text-foreground">
               {title}
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-node-icon.tsx b/web/app/dashboard/ai-workflows/_components/workflow-node-icon.tsx
index 16aeb6b..2960962 100644
--- a/web/app/dashboard/ai-workflows/_components/workflow-node-icon.tsx
+++ b/web/app/dashboard/ai-workflows/_components/workflow-node-icon.tsx
@@ -1,31 +1,23 @@
 import { cn } from "@/lib/utils"
-import {
-  getWorkflowNodeIconClass,
-  getWorkflowNodeMeta,
-  type WorkflowNodeTone,
-} from "./workflow-node-meta"
+import { getWorkflowNodeMeta } from "./workflow-node-meta"
 
 export function WorkflowNodeIcon({
   type,
-  tone,
   size = "md",
   className,
 }: {
   type: string
-  tone?: WorkflowNodeTone
   size?: "sm" | "md"
   className?: string
 }) {
   const meta = getWorkflowNodeMeta(type)
   const Icon = meta.icon
-  const resolvedTone = tone ?? meta.tone
 
   return (
     <span
       className={cn(
-        "flex shrink-0 items-center justify-center rounded-lg shadow-sm",
+        "flex shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground shadow-sm",
         size === "md" ? "size-7" : "size-6",
-        getWorkflowNodeIconClass(resolvedTone),
         className
       )}
     >
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-node-meta.ts b/web/app/dashboard/ai-workflows/_components/workflow-node-meta.ts
index 86b003e..facda4f 100644
--- a/web/app/dashboard/ai-workflows/_components/workflow-node-meta.ts
+++ b/web/app/dashboard/ai-workflows/_components/workflow-node-meta.ts
@@ -17,52 +17,27 @@ import {
   type LucideIcon,
 } from "lucide-react"
 
-export type WorkflowNodeTone =
-  | "blue"
-  | "cyan"
-  | "emerald"
-  | "indigo"
-  | "amber"
-  | "violet"
-  | "rose"
-  | "slate"
-
 export type WorkflowNodeMeta = {
   icon: LucideIcon
-  tone: WorkflowNodeTone
 }
 
 const workflowNodeMetaByType: Record<string, WorkflowNodeMeta> = {
-  start: { icon: PlayCircleIcon, tone: "blue" },
-  conversation_understanding: { icon: MessageCircleIcon, tone: "indigo" },
-  reply_policy: { icon: ShieldCheckIcon, tone: "violet" },
-  knowledge_retrieve: { icon: BookOpenIcon, tone: "emerald" },
-  answerability_gate: { icon: HelpCircleIcon, tone: "cyan" },
-  llm_reply: { icon: BotIcon, tone: "indigo" },
-  condition: { icon: GitBranchIcon, tone: "cyan" },
-  analyze_conversation: { icon: SearchIcon, tone: "blue" },
-  prepare_ticket_draft: { icon: ClipboardListIcon, tone: "amber" },
-  human_confirm: { icon: UserCheckIcon, tone: "amber" },
-  create_ticket: { icon: TicketIcon, tone: "rose" },
-  handoff_to_human: { icon: HeadphonesIcon, tone: "amber" },
-  send_reply: { icon: SendIcon, tone: "emerald" },
-  end: { icon: FlagIcon, tone: "slate" },
+  start: { icon: PlayCircleIcon },
+  conversation_understanding: { icon: MessageCircleIcon },
+  reply_policy: { icon: ShieldCheckIcon },
+  knowledge_retrieve: { icon: BookOpenIcon },
+  answerability_gate: { icon: HelpCircleIcon },
+  llm_reply: { icon: BotIcon },
+  condition: { icon: GitBranchIcon },
+  analyze_conversation: { icon: SearchIcon },
+  prepare_ticket_draft: { icon: ClipboardListIcon },
+  human_confirm: { icon: UserCheckIcon },
+  create_ticket: { icon: TicketIcon },
+  handoff_to_human: { icon: HeadphonesIcon },
+  send_reply: { icon: SendIcon },
+  end: { icon: FlagIcon },
 }
 
 export function getWorkflowNodeMeta(type: string): WorkflowNodeMeta {
-  return workflowNodeMetaByType[type] ?? { icon: FileTextIcon, tone: "slate" }
-}
-
-export function getWorkflowNodeIconClass(tone: WorkflowNodeTone) {
-  const classes: Record<WorkflowNodeTone, string> = {
-    blue: "bg-blue-500 text-white shadow-blue-500/20",
-    cyan: "bg-cyan-500 text-white shadow-cyan-500/20",
-    emerald: "bg-emerald-500 text-white shadow-emerald-500/20",
-    indigo: "bg-indigo-500 text-white shadow-indigo-500/20",
-    amber: "bg-amber-500 text-white shadow-amber-500/20",
-    violet: "bg-violet-500 text-white shadow-violet-500/20",
-    rose: "bg-rose-500 text-white shadow-rose-500/20",
-    slate: "bg-slate-600 text-white shadow-slate-600/20",
-  }
-  return classes[tone]
+  return workflowNodeMetaByType[type] ?? { icon: FileTextIcon }
 }