diff --git a/packages/chat-ui/src/components/layouts.tsx b/packages/chat-ui/src/components/layouts.tsx
index a341af5..a82e081 100644
--- a/packages/chat-ui/src/components/layouts.tsx
+++ b/packages/chat-ui/src/components/layouts.tsx
@@ -388,7 +388,7 @@ function ChatBoard({
                   onClick={() => onSelectTopic(t.id)}
                   className="flex w-full items-start gap-3 border-b border-border px-4 py-3 text-left transition-colors hover:bg-accent"
                 >
-                  {t.isPinned && <Pin className="mt-0.5 size-3.5 shrink-0 text-[var(--chat-orange)]" />}
+                  {t.isPinned && <Pin className="mt-0.5 size-3.5 shrink-0 text-orange-500" />}
                   <div className="min-w-0 flex-1">
                     <p className="text-[14px] font-semibold text-foreground">{t.title}</p>
                     <div className="mt-0.5 flex items-center gap-2 text-[12px] text-muted-foreground">
@@ -496,16 +496,16 @@ interface SupportTicketsProps {
 // ─── Internal helpers ────────────────────────────────────────────────────────
 
 const ticketStatusConfig: Record<TicketStatus, { icon: typeof Circle; label: string; color: string }> = {
-  open: { icon: Circle, label: "Open", color: "var(--chat-orange)" },
-  "in-progress": { icon: Clock, label: "In Progress", color: "var(--chat-accent)" },
-  resolved: { icon: CheckCircle2, label: "Resolved", color: "var(--chat-green)" },
+  open: { icon: Circle, label: "Open", color: "var(--color-chart-4)" },
+  "in-progress": { icon: Clock, label: "In Progress", color: "var(--color-primary)" },
+  resolved: { icon: CheckCircle2, label: "Resolved", color: "#22c55e" },
 }
 
 const ticketPriorityColors: Record<TicketPriority, string> = {
-  urgent: "var(--chat-red)",
-  high: "var(--chat-orange)",
-  medium: "var(--chat-accent)",
-  low: "var(--chat-text-tertiary)",
+  urgent: "var(--color-destructive)",
+  high: "var(--color-chart-4)",
+  medium: "var(--color-primary)",
+  low: "var(--color-muted-foreground)",
 }
 
 function TicketStatusBadge({ status }: { status: TicketStatus }) {
@@ -562,8 +562,8 @@ function TicketFilterTabs({
           onClick={() => onChange(t.key)}
           className="rounded-md px-2 py-1 text-[10px] font-medium transition-colors"
           style={{
-            background: value === t.key ? "var(--chat-accent-soft)" : "transparent",
-            color: value === t.key ? "var(--chat-accent)" : "var(--chat-text-tertiary)",
+            background: value === t.key ? "var(--color-accent)" : "transparent",
+            color: value === t.key ? "var(--color-primary)" : "var(--color-muted-foreground)",
           }}
         >
           {t.label}