diff --git a/dashboard/components/Modal.js b/dashboard/components/Modal.js
index 5547168..4a1bccd 100644
--- a/dashboard/components/Modal.js
+++ b/dashboard/components/Modal.js
@@ -1,4 +1,4 @@
-import { html, useState, useEffect, useRef } from '../lib/preact.js';
+import { html, useState, useEffect, useRef, useCallback } from '../lib/preact.js';
 import { getStatusMeta, getUserMessageBg } from '../utils/status.js';
 import { formatDuration, formatTime } from '../utils/formatting.js';
 import { MessageBubble, filterDisplayMessages } from './MessageBubble.js';
@@ -7,28 +7,28 @@ export function Modal({ session, conversations, conversationLoading, onClose, on
   const [inputValue, setInputValue] = useState('');
   const [sending, setSending] = useState(false);
   const [inputFocused, setInputFocused] = useState(false);
+  const [closing, setClosing] = useState(false);
   const inputRef = useRef(null);
-
-  if (!session) return null;
-
-  const conversation = conversations[session.session_id] || [];
-  const hasPendingQuestions = session.pending_questions && session.pending_questions.length > 0;
-  const optionCount = hasPendingQuestions ? session.pending_questions[0]?.options?.length || 0 : 0;
-  const status = getStatusMeta(session.status);
-  const agent = session.agent === 'codex' ? 'codex' : 'claude';
-  const agentHeaderClass = agent === 'codex' ? 'agent-header-codex' : 'agent-header-claude';
-
-  // Track if user has scrolled away from bottom
   const wasAtBottomRef = useRef(true);
   const prevConversationLenRef = useRef(0);
   const chatContainerRef = useRef(null);
 
-  // Initialize scroll position to bottom on mount (no animation)
+  const conversation = session ? (conversations[session.session_id] || []) : [];
+
+  // Reset state when session changes
   useEffect(() => {
-    if (chatContainerRef.current) {
-      chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
-    }
-  }, []);
+    setClosing(false);
+    prevConversationLenRef.current = 0;
+  }, [session?.session_id]);
+
+  // Animated close handler
+  const handleClose = useCallback(() => {
+    setClosing(true);
+    setTimeout(() => {
+      setClosing(false);
+      onClose();
+    }, 200);
+  }, [onClose]);
 
   // Track scroll position
   useEffect(() => {
@@ -62,39 +62,42 @@ export function Modal({ session, conversations, conversationLoading, onClose, on
     if (inputRef.current) {
       inputRef.current.focus();
     }
-  }, [session]);
+  }, [session?.session_id]);
 
   // Lock body scroll when modal is open
   useEffect(() => {
+    if (!session) return;
     document.body.style.overflow = 'hidden';
     return () => {
       document.body.style.overflow = '';
     };
-  }, []);
+  }, [!!session]);
 
   // Handle keyboard events
   useEffect(() => {
+    if (!session) return;
     const handleKeyDown = (e) => {
-      // Escape closes modal
-      if (e.key === 'Escape') {
-        onClose();
-      }
+      if (e.key === 'Escape') handleClose();
     };
-
     document.addEventListener('keydown', handleKeyDown);
     return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [onClose]);
+  }, [!!session, handleClose]);
+
+  if (!session) return null;
+
+  const hasPendingQuestions = session.pending_questions && session.pending_questions.length > 0;
+  const optionCount = hasPendingQuestions ? session.pending_questions[0]?.options?.length || 0 : 0;
+  const status = getStatusMeta(session.status);
+  const agent = session.agent === 'codex' ? 'codex' : 'claude';
+  const agentHeaderClass = agent === 'codex' ? 'agent-header-codex' : 'agent-header-claude';
 
-  // Handle input key events
   const handleInputKeyDown = (e) => {
-    // Enter sends message (unless Shift+Enter for newline)
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       handleSend();
     }
   };
 
-  // Send message
   const handleSend = async () => {
     const text = inputValue.trim();
     if (!text || sending) return;
@@ -105,7 +108,6 @@ export function Modal({ session, conversations, conversationLoading, onClose, on
         await onSendMessage(session.session_id, text, true, optionCount);
       }
       setInputValue('');
-      // Refresh conversation after sending
       if (onRefreshConversation) {
         await onRefreshConversation(session.session_id, session.project_dir, agent);
       }
@@ -116,13 +118,15 @@ export function Modal({ session, conversations, conversationLoading, onClose, on
     }
   };
 
+  const displayMessages = filterDisplayMessages(conversation);
+
   return html`
     <div
-      class="fixed inset-0 z-50 flex items-center justify-center bg-[#02050d]/84 p-4 backdrop-blur-sm"
-      onClick=${(e) => e.target === e.currentTarget && onClose()}
+      class="fixed inset-0 z-50 flex items-center justify-center bg-[#02050d]/84 p-4 backdrop-blur-sm ${closing ? 'modal-backdrop-out' : 'modal-backdrop-in'}"
+      onClick=${(e) => e.target === e.currentTarget && handleClose()}
     >
       <div
-        class="glass-panel flex max-h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-selection/80"
+        class="glass-panel flex max-h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-selection/80 ${closing ? 'modal-panel-out' : 'modal-panel-in'}"
         style=${{ borderLeftWidth: '3px', borderLeftColor: status.borderColor }}
         onClick=${(e) => e.stopPropagation()}
       >
@@ -147,8 +151,8 @@ export function Modal({ session, conversations, conversationLoading, onClose, on
             </div>
           </div>
           <button
-            class="ml-4 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl border border-selection/70 text-dim transition-colors hover:border-done/35 hover:bg-done/10 hover:text-bright"
-            onClick=${onClose}
+            class="ml-4 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl border border-selection/70 text-dim transition-colors duration-150 hover:border-done/35 hover:bg-done/10 hover:text-bright"
+            onClick=${handleClose}
           >
             <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
@@ -159,14 +163,14 @@ export function Modal({ session, conversations, conversationLoading, onClose, on
         <!-- Modal Content -->
         <div ref=${chatContainerRef} class="flex-1 overflow-y-auto overflow-x-hidden bg-surface p-5">
           ${conversationLoading ? html`
-            <div class="flex items-center justify-center py-12">
+            <div class="flex items-center justify-center py-12 animate-fade-in-up">
               <div class="font-mono text-dim">Loading conversation...</div>
             </div>
-          ` : conversation.length > 0 ? html`
+          ` : displayMessages.length > 0 ? html`
             <div class="space-y-4">
-              ${filterDisplayMessages(conversation).map((msg, i) => html`
+              ${displayMessages.map((msg, i) => html`
                 <${MessageBubble}
-                  key=${i}
+                  key=${`${msg.role}-${msg.timestamp || i}`}
                   msg=${msg}
                   userBg=${getUserMessageBg(session.status)}
                   compact=${false}
@@ -178,15 +182,6 @@ export function Modal({ session, conversations, conversationLoading, onClose, on
             <p class="text-dim text-center py-12">No conversation messages</p>
           `}
         </div>
-        ${status.spinning && html`
-          <div class="shrink-0 flex items-center gap-2 border-t border-selection/40 bg-surface px-5 py-2">
-            <span class="h-2 w-2 rounded-full spinner-dot" style=${{ backgroundColor: status.borderColor, color: status.borderColor }}></span>
-            <span class="font-mono text-xs" style=${{ color: status.borderColor }}>Agent is working</span>
-            <span class="working-dots font-mono text-xs" style=${{ color: status.borderColor }}>
-              <span>.</span><span>.</span><span>.</span>
-            </span>
-          </div>
-        `}
 
         <!-- Modal Footer -->
         <div class="border-t border-selection/70 bg-bg/55 p-4">
@@ -209,12 +204,12 @@ export function Modal({ session, conversations, conversationLoading, onClose, on
               onBlur=${() => setInputFocused(false)}
               placeholder=${hasPendingQuestions ? "Type your response..." : "Send a message..."}
               rows="1"
-              class="flex-1 resize-none overflow-hidden rounded-xl border border-selection/75 bg-bg/70 px-4 py-2 text-sm text-fg placeholder:text-dim focus:outline-none"
+              class="flex-1 resize-none overflow-hidden rounded-xl border border-selection/75 bg-bg/70 px-4 py-2 text-sm text-fg transition-colors duration-150 placeholder:text-dim focus:outline-none"
               style=${{ minHeight: '42px', maxHeight: '150px', borderColor: inputFocused ? status.borderColor : undefined }}
               disabled=${sending}
             />
             <button
-              class="rounded-xl px-4 py-2 font-medium transition-all hover:-translate-y-0.5 hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
+              class="rounded-xl px-4 py-2 font-medium transition-[transform,filter] duration-150 hover:-translate-y-0.5 hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
               style=${{ backgroundColor: status.borderColor, color: '#0a0f18' }}
               onClick=${handleSend}
               disabled=${sending || !inputValue.trim()}
diff --git a/dashboard/styles.css b/dashboard/styles.css
index a2cc365..d5d5f08 100644
--- a/dashboard/styles.css
+++ b/dashboard/styles.css
@@ -59,7 +59,7 @@ body {
   }
   50% {
     opacity: 0.62;
-    transform: scale(1.12) translateY(-1px);
+    transform: scale(1.04) translateY(-1px);
   }
 }
 
@@ -99,9 +99,40 @@ body {
   will-change: transform;
 }
 
-.working-dots span:nth-child(1) { animation: bounce-dot 1.2s ease-in-out infinite; }
-.working-dots span:nth-child(2) { animation: bounce-dot 1.2s ease-in-out 0.15s infinite; }
-.working-dots span:nth-child(3) { animation: bounce-dot 1.2s ease-in-out 0.3s infinite; }
+.working-dots span:nth-child(1) { animation: bounce-dot 1.2s ease-out infinite; }
+.working-dots span:nth-child(2) { animation: bounce-dot 1.2s ease-out 0.15s infinite; }
+.working-dots span:nth-child(3) { animation: bounce-dot 1.2s ease-out 0.3s infinite; }
+
+/* Modal entrance/exit animations */
+@keyframes modalBackdropIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes modalBackdropOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@keyframes modalPanelIn {
+  from { opacity: 0; transform: scale(0.96) translateY(8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+@keyframes modalPanelOut {
+  from { opacity: 1; transform: scale(1) translateY(0); }
+  to { opacity: 0; transform: scale(0.96) translateY(8px); }
+}
+
+.modal-backdrop-in {
+  animation: modalBackdropIn 200ms ease-out;
+}
+.modal-backdrop-out {
+  animation: modalBackdropOut 200ms ease-in forwards;
+}
+.modal-panel-in {
+  animation: modalPanelIn 200ms ease-out;
+}
+.modal-panel-out {
+  animation: modalPanelOut 200ms ease-in forwards;
+}
 
 /* Accessibility: disable continuous animations for motion-sensitive users */
 @media (prefers-reduced-motion: reduce) {
@@ -114,6 +145,16 @@ body {
   .pulse-attention {
     animation: none;
   }
+  .modal-backdrop-in,
+  .modal-backdrop-out,
+  .modal-panel-in,
+  .modal-panel-out {
+    animation: none;
+  }
+  .animate-float,
+  .animate-fade-in-up {
+    animation: none !important;
+  }
 }
 
 /* Glass panel effect */