diff --git a/panel/src/components/settings/ai-routing-card.tsx b/panel/src/components/settings/ai-routing-card.tsx
index 091e54c0..2a7f43df 100644
--- a/panel/src/components/settings/ai-routing-card.tsx
+++ b/panel/src/components/settings/ai-routing-card.tsx
@@ -349,8 +349,8 @@ export function AIRoutingCard() {
       </CardHeader>
       <CardContent className="space-y-6">
         {/* -------- Key cards band: Grok+Ollama (left) / Self-Hosted (right) -------- */}
-        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
-          <div className="space-y-6">
+        <div className="grid grid-cols-1 gap-10 lg:grid-cols-2 lg:gap-14">
+          <div className="space-y-8">
             {/* -------- Grok (xAI) key -------- */}
             <section className="space-y-2">
               <div className="flex items-center justify-between">
@@ -617,15 +617,15 @@ export function AIRoutingCard() {
           </p>
           <div className="divide-y rounded-md border">
             {AGENT_GROUPS.map((group) => (
-              <div key={group.title} className="p-3">
+              <div key={group.title} className="p-4">
                 <h4 className="mb-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                   {group.title}
                 </h4>
-                <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                <div className="grid grid-cols-1 gap-x-8 gap-y-3 sm:grid-cols-2">
                   {group.agents.map((a) => (
                     <div
                       key={a.slug}
-                      className="grid grid-cols-[1fr_170px] items-center gap-2 rounded-md border px-2 py-1.5"
+                      className="grid grid-cols-[1fr_170px] items-center gap-4 rounded-md border px-3 py-2.5"
                     >
                       <div className="min-w-0">
                         <div className="truncate font-mono text-xs">