diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx
index ae501a7b7..283144872 100644
--- a/packages/app/src/pages/layout.tsx
+++ b/packages/app/src/pages/layout.tsx
@@ -57,6 +57,7 @@ import { Binary } from "@opencode-ai/util/binary"
 import { retry } from "@opencode-ai/util/retry"
 import { playSound, soundSrc } from "@/utils/sound"
 import { Worktree as WorktreeState } from "@/utils/worktree"
+import { agentColor } from "@/utils/agent"
 
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme"
@@ -1639,7 +1640,7 @@ export default function Layout(props: ParentProps) {
       if (!user?.agent) return undefined
 
       const agent = sessionStore.agent.find((a) => a.name === user.agent)
-      return agent?.color
+      return agentColor(user.agent, agent?.color)
     })
 
     const hoverMessages = createMemo(() =>
diff --git a/packages/app/src/utils/agent.ts b/packages/app/src/utils/agent.ts
new file mode 100644
index 000000000..7c2c81e74
--- /dev/null
+++ b/packages/app/src/utils/agent.ts
@@ -0,0 +1,11 @@
+const defaults: Record<string, string> = {
+  ask: "var(--icon-agent-ask-base)",
+  build: "var(--icon-agent-build-base)",
+  docs: "var(--icon-agent-docs-base)",
+  plan: "var(--icon-agent-plan-base)",
+}
+
+export function agentColor(name: string, custom?: string) {
+  if (custom) return custom
+  return defaults[name] ?? defaults[name.toLowerCase()]
+}