diff --git a/apps/x/apps/renderer/src/components/code/code-chat.tsx b/apps/x/apps/renderer/src/components/code/code-chat.tsx
index 6f400deb..90b6772c 100644
--- a/apps/x/apps/renderer/src/components/code/code-chat.tsx
+++ b/apps/x/apps/renderer/src/components/code/code-chat.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { ArrowUp, FileText, Loader2, Plus, Square, Terminal, X } from 'lucide-react'
+import { ArrowUp, FileText, Loader2, LoaderIcon, Plus, Square, Terminal, X } from 'lucide-react'
 import type { CodeSession, CodeSessionStatus } from '@x/shared/src/code-sessions.js'
 import { cn } from '@/lib/utils'
 import { toast } from 'sonner'
@@ -312,12 +312,16 @@ export function CodeChat({
               <Button
                 size="icon"
                 onClick={() => void handleStop()}
-                disabled={stopping}
-                title="Stop the agent"
-                className="h-7 w-7 shrink-0 rounded-full bg-destructive text-destructive-foreground transition-all hover:bg-destructive/90"
+                title={stopping ? 'Stopping…' : 'Stop the agent'}
+                className={cn(
+                  'h-7 w-7 shrink-0 rounded-full transition-all',
+                  stopping
+                    ? 'bg-destructive text-destructive-foreground hover:bg-destructive/90'
+                    : 'bg-primary text-primary-foreground hover:bg-primary/90',
+                )}
               >
                 {stopping ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
+                  <LoaderIcon className="h-4 w-4 animate-spin" />
                 ) : (
                   <Square className="h-3 w-3 fill-current" />
                 )}