diff --git a/apps/ui/html/api-keys.html b/apps/ui/html/api-keys.html
index 74c5d63..3c79d8e 100644
--- a/apps/ui/html/api-keys.html
+++ b/apps/ui/html/api-keys.html
@@ -45,17 +45,29 @@
     color: #fff;
   }
   .key-kind-header-control {
-    display: flex;
+    display: grid;
+    grid-template-columns: auto auto;
     align-items: center;
     gap: 10px;
-    flex-wrap: wrap;
-    justify-content: flex-end;
+    justify-content: space-between;
+    width: 100%;
   }
   .key-kind-header-hint {
-    flex-basis: 100%;
+    grid-column: 1 / -1;
     max-width: 520px;
     margin: 0;
-    text-align: right;
+    text-align: left;
+  }
+  .api-keys-page-header {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 14px;
+  }
+  .api-keys-page-header .page-header-text {
+    max-width: 680px;
+  }
+  .api-keys-page-header .page-header-actions {
+    width: 100%;
   }
   .approval-warning-callout {
     display: flex;
@@ -76,7 +88,7 @@
   @media (max-width: 720px) {
     #keys-table-wrap { display: none; }
     .keys-card-list { display: grid; }
-    .key-kind-header-control { justify-content: stretch; width: 100%; }
+    .key-kind-header-control { grid-template-columns: 1fr; justify-content: stretch; width: 100%; }
     .key-kind-tabs { width: 100%; }
     .key-kind-tab { flex: 1; }
     .key-kind-header-hint { text-align: left; }
@@ -148,7 +160,7 @@
   <!-- ═══════════════════ PAGE ═══════════════════ -->
   <div class="page">
 
-    <div class="page-header">
+    <div class="page-header api-keys-page-header">
       <div class="page-header-text">
         <h1 class="page-title" data-i18n="apikeys.title">Agent Keys</h1>
         <p class="page-subtitle" data-i18n="apikeys.subtitle">These keys connect an MCP client to the MCP server and are issued for a specific agent.</p>