diff --git a/web/src/client/app.ts b/web/src/client/app.ts
index ed3abf9c..1c79e711 100644
--- a/web/src/client/app.ts
+++ b/web/src/client/app.ts
@@ -382,29 +382,56 @@ export class VibeTunnelApp extends LitElement {
   }
 
   private async handleHideExitedChange(e: CustomEvent) {
-    const performChange = () => {
-      this.hideExited = e.detail;
-      this.saveHideExitedState(this.hideExited);
-
-      // Add animation class to session-list for CSS animations
-      requestAnimationFrame(() => {
-        const sessionList = this.renderRoot.querySelector('session-list');
-        if (sessionList) {
-          sessionList.classList.add('sessions-transitioning');
-
-          // Remove the class after animation completes
-          setTimeout(() => {
-            sessionList.classList.remove('sessions-transitioning');
-          }, 600); // Slightly longer than animation duration
-        }
-      });
-    };
+    console.log('handleHideExitedChange', {
+      currentHideExited: this.hideExited,
+      newHideExited: e.detail,
+      hasViewTransitions: 'startViewTransition' in document,
+    });
 
     // Use View Transitions API if available
     if ('startViewTransition' in document && typeof document.startViewTransition === 'function') {
-      await document.startViewTransition(performChange);
+      console.log('Using View Transitions API');
+      await document.startViewTransition(() => {
+        this.hideExited = e.detail;
+        this.saveHideExitedState(this.hideExited);
+      });
     } else {
-      performChange();
+      console.log('Using CSS animations fallback');
+      // For browsers without View Transitions, add a class before the change
+      const wasHidingExited = this.hideExited;
+
+      // Add pre-animation class
+      document.body.classList.add('sessions-animating');
+      console.log('Added sessions-animating class');
+
+      // Update state
+      this.hideExited = e.detail;
+      this.saveHideExitedState(this.hideExited);
+
+      // Wait for render and trigger animations
+      await this.updateComplete;
+      console.log('Update complete, scheduling animation');
+
+      requestAnimationFrame(() => {
+        // Add specific animation direction
+        const animationClass = wasHidingExited ? 'sessions-showing' : 'sessions-hiding';
+        document.body.classList.add(animationClass);
+        console.log('Added animation class:', animationClass);
+
+        // Check what elements will be animated
+        const cards = document.querySelectorAll('.session-flex-responsive > session-card');
+        console.log('Found session cards to animate:', cards.length);
+
+        // Clean up after animation
+        setTimeout(() => {
+          document.body.classList.remove(
+            'sessions-animating',
+            'sessions-showing',
+            'sessions-hiding'
+          );
+          console.log('Cleaned up animation classes');
+        }, 600);
+      });
     }
   }
 
diff --git a/web/src/client/styles.css b/web/src/client/styles.css
index 21c00340..85b84dae 100644
--- a/web/src/client/styles.css
+++ b/web/src/client/styles.css
@@ -323,30 +323,35 @@ body {
 }
 
 /* Session grid flow animations */
-.sessions-transitioning .session-flex-responsive > *,
-.sessions-transitioning .space-y-2 > * {
+body.sessions-showing .session-flex-responsive > session-card {
   animation: sessionFlow 0.4s ease-out backwards;
 }
 
-/* Stagger animation for each card */
-.sessions-transitioning .session-flex-responsive > *:nth-child(1),
-.sessions-transitioning .space-y-2 > *:nth-child(1) { animation-delay: 0s; }
-.sessions-transitioning .session-flex-responsive > *:nth-child(2),
-.sessions-transitioning .space-y-2 > *:nth-child(2) { animation-delay: 0.05s; }
-.sessions-transitioning .session-flex-responsive > *:nth-child(3),
-.sessions-transitioning .space-y-2 > *:nth-child(3) { animation-delay: 0.1s; }
-.sessions-transitioning .session-flex-responsive > *:nth-child(4),
-.sessions-transitioning .space-y-2 > *:nth-child(4) { animation-delay: 0.15s; }
-.sessions-transitioning .session-flex-responsive > *:nth-child(5),
-.sessions-transitioning .space-y-2 > *:nth-child(5) { animation-delay: 0.2s; }
-.sessions-transitioning .session-flex-responsive > *:nth-child(6),
-.sessions-transitioning .space-y-2 > *:nth-child(6) { animation-delay: 0.25s; }
-.sessions-transitioning .session-flex-responsive > *:nth-child(7),
-.sessions-transitioning .space-y-2 > *:nth-child(7) { animation-delay: 0.3s; }
-.sessions-transitioning .session-flex-responsive > *:nth-child(8),
-.sessions-transitioning .space-y-2 > *:nth-child(8) { animation-delay: 0.35s; }
-.sessions-transitioning .session-flex-responsive > *:nth-child(n+9),
-.sessions-transitioning .space-y-2 > *:nth-child(n+9) { animation-delay: 0.4s; }
+/* Stagger animation when showing exited sessions */
+body.sessions-showing .session-flex-responsive > session-card:nth-child(1) { animation-delay: 0s; }
+body.sessions-showing .session-flex-responsive > session-card:nth-child(2) { animation-delay: 0.05s; }
+body.sessions-showing .session-flex-responsive > session-card:nth-child(3) { animation-delay: 0.1s; }
+body.sessions-showing .session-flex-responsive > session-card:nth-child(4) { animation-delay: 0.15s; }
+body.sessions-showing .session-flex-responsive > session-card:nth-child(5) { animation-delay: 0.2s; }
+body.sessions-showing .session-flex-responsive > session-card:nth-child(6) { animation-delay: 0.25s; }
+body.sessions-showing .session-flex-responsive > session-card:nth-child(7) { animation-delay: 0.3s; }
+body.sessions-showing .session-flex-responsive > session-card:nth-child(8) { animation-delay: 0.35s; }
+body.sessions-showing .session-flex-responsive > session-card:nth-child(n+9) { animation-delay: 0.4s; }
+
+/* Compact mode animations */
+body.sessions-showing .space-y-2 > div {
+  animation: sessionFlow 0.4s ease-out backwards;
+}
+
+body.sessions-showing .space-y-2 > div:nth-child(1) { animation-delay: 0s; }
+body.sessions-showing .space-y-2 > div:nth-child(2) { animation-delay: 0.05s; }
+body.sessions-showing .space-y-2 > div:nth-child(3) { animation-delay: 0.1s; }
+body.sessions-showing .space-y-2 > div:nth-child(4) { animation-delay: 0.15s; }
+body.sessions-showing .space-y-2 > div:nth-child(5) { animation-delay: 0.2s; }
+body.sessions-showing .space-y-2 > div:nth-child(6) { animation-delay: 0.25s; }
+body.sessions-showing .space-y-2 > div:nth-child(7) { animation-delay: 0.3s; }
+body.sessions-showing .space-y-2 > div:nth-child(8) { animation-delay: 0.35s; }
+body.sessions-showing .space-y-2 > div:nth-child(n+9) { animation-delay: 0.4s; }
 
 @keyframes sessionFlow {
   from {