diff --git a/ui/src/components/chat/ChatView.tsx b/ui/src/components/chat/ChatView.tsx
index dbda402..c8e2218 100644
--- a/ui/src/components/chat/ChatView.tsx
+++ b/ui/src/components/chat/ChatView.tsx
@@ -1,6 +1,7 @@
 import { useRef, useEffect } from 'react';
 import ChatMessage from './ChatMessage';
 import ChatInput from './ChatInput';
+import ThinkingIndicator from './ThinkingIndicator';
 import ThemeToggle from '@/components/ThemeToggle';
 import type { Message, FileAttachment } from '@/lib/llm';
 
@@ -41,6 +42,9 @@ export default function ChatView({
             <ChatMessage key={message.id} message={message} />
           ))}
           
+          {/* Thinking indicator — visible before first stream token */}
+          {isLoading && !streamingContent && <ThinkingIndicator />}
+
           {/* Streaming Message */}
           {streamingContent && (
             <ChatMessage
diff --git a/ui/src/components/chat/ThinkingIndicator.tsx b/ui/src/components/chat/ThinkingIndicator.tsx
new file mode 100644
index 0000000..9269f41
--- /dev/null
+++ b/ui/src/components/chat/ThinkingIndicator.tsx
@@ -0,0 +1,12 @@
+export default function ThinkingIndicator() {
+  return (
+    <div className="flex justify-start py-2">
+      <div className="flex items-center gap-1.5 text-muted-foreground text-sm">
+        <span className="h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-[dot-pulse_1.4s_ease-in-out_infinite_0ms]" />
+        <span className="h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-[dot-pulse_1.4s_ease-in-out_infinite_200ms]" />
+        <span className="h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-[dot-pulse_1.4s_ease-in-out_infinite_400ms]" />
+        <span className="ml-1 text-xs">Thinking...</span>
+      </div>
+    </div>
+  );
+}
diff --git a/ui/tailwind.config.ts b/ui/tailwind.config.ts
index cc139df..ded75f4 100644
--- a/ui/tailwind.config.ts
+++ b/ui/tailwind.config.ts
@@ -63,28 +63,24 @@ export default {
   			md: 'calc(var(--radius) - 2px)',
   			sm: 'calc(var(--radius) - 4px)'
   		},
-  		keyframes: {
-  			'accordion-down': {
-  				from: {
-  					height: '0'
-  				},
-  				to: {
-  					height: 'var(--radix-accordion-content-height)'
-  				}
-  			},
-  			'accordion-up': {
-  				from: {
-  					height: 'var(--radix-accordion-content-height)'
-  				},
-  				to: {
-  					height: '0'
-  				}
-  			}
-  		},
-  		animation: {
-  			'accordion-down': 'accordion-down 0.2s ease-out',
-  			'accordion-up': 'accordion-up 0.2s ease-out'
-  		},
+		keyframes: {
+			'accordion-down': {
+				from: { height: '0' },
+				to: { height: 'var(--radix-accordion-content-height)' }
+			},
+			'accordion-up': {
+				from: { height: 'var(--radix-accordion-content-height)' },
+				to: { height: '0' }
+			},
+			'dot-pulse': {
+				'0%, 80%, 100%': { opacity: '0.3', transform: 'scale(0.8)' },
+				'40%': { opacity: '1', transform: 'scale(1.2)' }
+			}
+		},
+		animation: {
+			'accordion-down': 'accordion-down 0.2s ease-out',
+			'accordion-up': 'accordion-up 0.2s ease-out'
+		},
   		fontFamily: {
   			sans: [
   				'Poppins',