diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 0cd5f00..b99d316 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -642,8 +642,8 @@ function Dashboard() {
         </div>
       </div>
 
-      <div className="grid gap-4 md:grid-cols-3 xl:grid-cols-4">
-        <Card className="md:col-span-2">
+      <div className="grid gap-4 xl:grid-cols-[minmax(0,2fr)_minmax(16rem,1fr)] xl:items-stretch">
+        <Card className="h-full">
           <CardHeader>
             <CardTitle>Unified capacity</CardTitle>
           </CardHeader>
@@ -676,32 +676,34 @@ function Dashboard() {
           </CardContent>
         </Card>
 
-        {[
-          {
-            title: 'Connected sessions',
-            value: summary.totals.totalAccounts,
-            tone: 'text-sky-300',
-          },
-          {
-            title: 'Healthy sessions',
-            value: summary.totals.activeAccounts,
-            tone: 'text-emerald-300',
-          },
-          {
-            title: 'Errored sessions',
-            value: summary.totals.erroredAccounts,
-            tone: 'text-rose-300',
-          },
-        ].map((item) => (
-          <Card key={item.title}>
-            <CardHeader>
-              <CardDescription>{item.title}</CardDescription>
-              <CardTitle className={item.tone}>
-                {item.value.toLocaleString()}
-              </CardTitle>
-            </CardHeader>
-          </Card>
-        ))}
+        <div className="grid gap-4 xl:grid-rows-3">
+          {[
+            {
+              title: 'Connected sessions',
+              value: summary.totals.totalAccounts,
+              tone: 'text-sky-300',
+            },
+            {
+              title: 'Healthy sessions',
+              value: summary.totals.activeAccounts,
+              tone: 'text-emerald-300',
+            },
+            {
+              title: 'Errored sessions',
+              value: summary.totals.erroredAccounts,
+              tone: 'text-rose-300',
+            },
+          ].map((item) => (
+            <Card key={item.title} className="h-full">
+              <CardHeader>
+                <CardDescription>{item.title}</CardDescription>
+                <CardTitle className={item.tone}>
+                  {item.value.toLocaleString()}
+                </CardTitle>
+              </CardHeader>
+            </Card>
+          ))}
+        </div>
       </div>
 
       <div className="mt-6 grid gap-6 xl:grid-cols-[1.15fr_0.85fr]">
diff --git a/apps/web/test/dashboard-summary-layout.test.js b/apps/web/test/dashboard-summary-layout.test.js
new file mode 100644
index 0000000..e37d37a
--- /dev/null
+++ b/apps/web/test/dashboard-summary-layout.test.js
@@ -0,0 +1,17 @@
+import { describe, expect, test } from 'bun:test';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const appSource = readFileSync(join(import.meta.dir, '../src/App.tsx'), 'utf8');
+
+describe('dashboard summary layout', () => {
+  test('stacks the session summary cards vertically beside unified capacity on desktop', () => {
+    expect(appSource).toContain(
+      'className="grid gap-4 xl:grid-cols-[minmax(0,2fr)_minmax(16rem,1fr)] xl:items-stretch"',
+    );
+    expect(appSource).toContain('className="h-full"');
+    expect(appSource).toContain('className="grid gap-4 xl:grid-rows-3"');
+    expect(appSource).not.toContain('className="grid gap-4 md:grid-cols-3 xl:grid-cols-4"');
+    expect(appSource).not.toContain('className="md:col-span-2"');
+  });
+});