diff --git a/canvas/src/components/SidePanel.tsx b/canvas/src/components/SidePanel.tsx
index 7d513107..437aff90 100644
--- a/canvas/src/components/SidePanel.tsx
+++ b/canvas/src/components/SidePanel.tsx
@@ -202,7 +202,7 @@ export function SidePanel() {
       {/* Tabs — relative wrapper lets the fade gradient position against the scroll container */}
       <div className="relative border-b border-line/40">
         {/* Right-edge fade: signals more tabs are hidden off-screen when the bar overflows */}
-        <div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-zinc-950 to-transparent z-10" aria-hidden="true" />
+        <div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-surface to-transparent z-10" aria-hidden="true" />
       <div
         role="tablist"
         aria-label="Workspace panel tabs"
@@ -232,8 +232,8 @@ export function SidePanel() {
             onClick={() => setPanelTab(tab.id)}
             className={`shrink-0 px-3 py-2.5 text-[10px] font-medium tracking-wide transition-all rounded-t-lg mx-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 ${
               panelTab === tab.id
-                ? "text-ink bg-surface-card/40 border-b-2 border-accent"
-                : "text-ink-soft hover:text-ink hover:bg-surface-card/40"
+                ? "text-ink bg-surface-card border-b-2 border-accent"
+                : "text-ink-mid hover:text-ink hover:bg-surface-card/60"
             }`}
           >
             <span className="mr-1 opacity-50" aria-hidden="true">{tab.icon}</span>
diff --git a/canvas/src/components/tabs/ChatTab.tsx b/canvas/src/components/tabs/ChatTab.tsx
index b44047a3..6c2c57cb 100644
--- a/canvas/src/components/tabs/ChatTab.tsx
+++ b/canvas/src/components/tabs/ChatTab.tsx
@@ -773,14 +773,14 @@ function MyChatPanel({ workspaceId, data }: Props) {
             <div
               className={`max-w-[85%] rounded-lg px-3 py-2 text-xs ${
                 msg.role === "user"
-                  ? "bg-accent-strong/30 text-blue-100 border border-accent/20"
+                  ? "bg-accent text-white border border-accent-strong"
                   : msg.role === "system"
-                    ? "bg-red-900/30 text-red-200 border border-red-800/30"
-                    : "bg-surface-card/80 text-ink border border-line/30"
+                    ? "bg-bad/10 text-bad border border-bad/40"
+                    : "bg-surface-card text-ink border border-line"
               }`}
             >
               {msg.content && (
-                <div className="prose prose-sm prose-invert max-w-none [&>p]:mb-1 [&>p:last-child]:mb-0">
+                <div className={`prose prose-sm max-w-none [&>p]:mb-1 [&>p:last-child]:mb-0 ${msg.role === "user" ? "prose-invert" : ""}`}>
                   <ReactMarkdown remarkPlugins={[remarkGfm]}>{msg.content}</ReactMarkdown>
                 </div>
               )}
@@ -796,7 +796,7 @@ function MyChatPanel({ workspaceId, data }: Props) {
                   ))}
                 </div>
               )}
-              <div className="text-[9px] text-ink-soft mt-1">
+              <div className={`text-[9px] mt-1 ${msg.role === "user" ? "text-white/70" : "text-ink-mid"}`}>
                 {new Date(msg.timestamp).toLocaleTimeString()}
               </div>
             </div>