diff --git a/web/src/client/components/session-card.ts b/web/src/client/components/session-card.ts
index 473c9639..a0b122fd 100644
--- a/web/src/client/components/session-card.ts
+++ b/web/src/client/components/session-card.ts
@@ -235,8 +235,9 @@ export class SessionCard extends LitElement {
   render() {
     return html`
       <div
-        class="card cursor-pointer overflow-hidden ${this.killing ? 'opacity-60' : ''} ${this
-          .isActive && this.session.status === 'running'
+        class="card cursor-pointer overflow-hidden flex flex-col h-full ${this.killing
+          ? 'opacity-60'
+          : ''} ${this.isActive && this.session.status === 'running'
           ? 'shadow-[0_0_0_2px_#00ff88] shadow-glow-green-sm'
           : ''}"
         style="view-transition-name: session-${this.session.id}"
@@ -292,10 +293,10 @@ export class SessionCard extends LitElement {
 
         <!-- Terminal display (main content) -->
         <div
-          class="session-preview bg-dark-bg overflow-hidden ${this.session.status === 'exited'
+          class="session-preview bg-dark-bg overflow-hidden flex-1 ${this.session.status ===
+          'exited'
             ? 'session-exited'
             : ''}"
-          style="aspect-ratio: 640/480;"
         >
           ${this.killing
             ? html`
diff --git a/web/src/client/styles.css b/web/src/client/styles.css
index 1938f6e5..44f305af 100644
--- a/web/src/client/styles.css
+++ b/web/src/client/styles.css
@@ -105,29 +105,25 @@
     @apply text-dark-text-muted text-sm font-medium mb-2 flex items-center gap-2;
   }
 
-  /* Responsive session flex layout */
+  /* Responsive session grid layout */
   .session-flex-responsive {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    grid-auto-rows: 380px;
     gap: 1rem;
     padding: 0 0.5rem;
-    justify-content: flex-start;
   }
 
   .session-flex-responsive > * {
-    flex: 1 1 auto;
-    min-width: 300px;
-    max-width: 500px;
+    height: 100%;
+    overflow: hidden;
   }
 
   @media (max-width: 420px) {
     .session-flex-responsive {
       padding: 0 0.25rem;
-    }
-
-    .session-flex-responsive > * {
-      min-width: 100%;
-      max-width: 100%;
+      grid-template-columns: 1fr;
+      grid-auto-rows: 300px;
     }
   }
 }