diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 16c704d..1bd2b96 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -25,7 +25,7 @@ export default function App() {
           </div>
         </header>
 
-        <main className="flex-1 overflow-auto p-8 lg:p-10 max-w-[1600px] mx-auto w-full">
+        <main className="flex-1 overflow-auto p-8 lg:p-10 max-w-screen-2xl mx-auto w-full">
           <Dashboard />
         </main>
       </div>
diff --git a/frontend/src/components/agents/AgentCard.tsx b/frontend/src/components/agents/AgentCard.tsx
index 1a94861..7fdb297 100644
--- a/frontend/src/components/agents/AgentCard.tsx
+++ b/frontend/src/components/agents/AgentCard.tsx
@@ -1,57 +1,50 @@
-import { Cpu, Activity } from 'lucide-react'
+import { motion } from 'framer-motion'
 
 export function AgentCard({ agent }: { agent: any }) {
-  const statusColor = {
-    online: 'bg-emerald-500',
-    busy: 'bg-amber-500',
-    offline: 'bg-zinc-500',
-  }[agent.status] || 'bg-emerald-500'
-
   const tokenPercent = Math.round((agent.tokens_used / agent.tokens_limit) * 100)
   const budgetPercent = Math.round((agent.budget_used / agent.budget_limit) * 100)
 
   return (
-    <div className="bg-card border border-border hover:border-primary/50 p-8 transition-colors group">
+    <motion.div
+      whileHover={{ scale: 1.01 }}
+      className="bg-card border border-border p-8 hover:border-primary/50 transition-colors h-full flex flex-col"
+    >
       {/* Header */}
       <div className="flex justify-between items-start mb-8">
         <div>
           <div className="flex items-center gap-3">
-            <div className={`w-4 h-4 ${statusColor} flex-shrink-0`} />
+            <div className={`w-4 h-4 ${agent.healthy !== false ? 'bg-emerald-500' : 'bg-zinc-500'}`} />
             <div className="text-2xl font-mono font-bold tracking-tighter">{agent.name}</div>
           </div>
-          <div className="text-muted-foreground mt-1 text-sm">{agent.runtime} · {agent.model}</div>
-          {agent.provider && (
-            <div className="mt-2 flex items-center gap-2 text-xs">
-              <span className="bg-secondary px-3 py-1">{agent.provider}</span>
-              <span className="font-mono text-muted-foreground">{agent.account}</span>
-            </div>
-          )}
+          <div className="mt-1 text-muted-foreground text-sm">{agent.runtime} · {agent.model}</div>
         </div>
-        <div className="text-emerald-500 text-xs uppercase tracking-[2px] font-medium">{agent.status}</div>
+        <div className="text-emerald-500 text-xs uppercase tracking-widest font-medium">
+          {agent.healthy !== false ? 'ONLINE' : 'OFFLINE'}
+        </div>
+      </div>
+
+      {/* Account */}
+      <div className="mb-8 flex items-center gap-2 text-xs">
+        <span className="bg-secondary px-3 py-1">{agent.provider}</span>
+        <span className="font-mono text-muted-foreground">{agent.account}</span>
       </div>
 
       {/* Metrics */}
-      <div className="grid grid-cols-2 gap-10 mb-10">
+      <div className="grid grid-cols-2 gap-12 mb-10">
         <div>
-          <div className="flex items-center gap-2 mb-1">
-            <Cpu className="w-4 h-4 text-muted-foreground" />
-            <span className="text-xs text-muted-foreground uppercase tracking-widest">CPU %</span>
-          </div>
-          <div className="text-5xl font-mono font-bold tabular-nums">{agent.cpu}</div>
+          <div className="text-6xl font-mono font-bold tabular-nums">{agent.cpu}</div>
+          <div className="text-xs uppercase tracking-widest text-muted-foreground">CPU %</div>
         </div>
         <div>
-          <div className="flex items-center gap-2 mb-1">
-            <Activity className="w-4 h-4 text-muted-foreground" />
-            <span className="text-xs text-muted-foreground uppercase tracking-widest">RUNS</span>
-          </div>
-          <div className="text-5xl font-mono font-bold tabular-nums">{agent.active_runs || agent.activeRuns}</div>
+          <div className="text-6xl font-mono font-bold tabular-nums">{agent.activeRuns}</div>
+          <div className="text-xs uppercase tracking-widest text-muted-foreground">RUNS</div>
         </div>
       </div>
 
-      {/* Limits */}
-      <div className="space-y-6">
+      {/* Usage */}
+      <div className="mt-auto space-y-8">
         <div>
-          <div className="flex justify-between text-xs mb-2 text-muted-foreground">
+          <div className="flex justify-between text-xs text-muted-foreground mb-2">
             <span className="uppercase tracking-wider">Tokens</span>
             <span className="font-mono">{agent.tokens_used?.toLocaleString()} / {agent.tokens_limit?.toLocaleString()}</span>
           </div>
@@ -61,7 +54,7 @@ export function AgentCard({ agent }: { agent: any }) {
         </div>
 
         <div>
-          <div className="flex justify-between text-xs mb-2 text-muted-foreground">
+          <div className="flex justify-between text-xs text-muted-foreground mb-2">
             <span className="uppercase tracking-wider">Budget</span>
             <span className="font-mono">${agent.budget_used} / ${agent.budget_limit}</span>
           </div>
@@ -73,10 +66,10 @@ export function AgentCard({ agent }: { agent: any }) {
 
       <button
         onClick={() => alert('Handoff started for ' + agent.name)}
-        className="mt-10 w-full border border-border hover:bg-secondary py-4 text-sm font-medium tracking-widest uppercase transition-colors"
+        className="mt-10 w-full border border-border hover:bg-secondary py-4 text-sm tracking-widest uppercase font-medium transition-colors"
       >
         Quick Handoff
       </button>
-    </div>
+    </motion.div>
   )
 }