diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 2679791..5dc9eba 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -3,11 +3,18 @@
 import {
   GnBadge,
   GnButton,
+  GnCard,
   GnCheckbox,
+  GnEmptyState,
+  GnIconButton,
   GnInput,
+  GnMetricCard,
   GnModal,
+  GnPageHeader,
+  GnSearchField,
   GnTabs,
-  GnTextarea
+  GnTextarea,
+  GnToolbar
 } from "gnexus-ui-kit/vue";
 
 import { api } from "./api";
@@ -434,14 +441,21 @@
 <template>
   <main class="creds-app">
     <header class="app-header">
-      <div>
-        <p class="eyebrow">Personal secret storage</p>
-        <h1>gnexus-creds</h1>
-      </div>
-      <div class="session-box">
-        <span>{{ me?.email || "Session loading" }}</span>
-        <GnBadge :tone="me?.role === 'admin' ? 'warning' : 'info'">{{ me?.role || "user" }}</GnBadge>
-      </div>
+      <GnPageHeader
+        title="gnexus-creds"
+        kicker="Personal secret storage"
+        subtitle="Secrets, REST API tokens, and MCP access"
+        compact
+      >
+        <template #actions>
+          <div class="session-box">
+            <span>{{ me?.email || "Session loading" }}</span>
+            <GnBadge :variant="me?.role === 'admin' ? 'warning' : 'info'">
+              {{ me?.role || "user" }}
+            </GnBadge>
+          </div>
+        </template>
+      </GnPageHeader>
     </header>
 
     <nav class="app-tabs" aria-label="Main sections">
@@ -449,42 +463,27 @@
     </nav>
 
     <section class="metrics-row" aria-label="Overview">
-      <div class="metric">
-        <span>Total</span>
-        <strong>{{ total }}</strong>
-      </div>
-      <div class="metric">
-        <span>Active</span>
-        <strong>{{ activeSecrets }}</strong>
-      </div>
-      <div class="metric">
-        <span>MCP</span>
-        <strong>{{ mcpSecrets }}</strong>
-      </div>
-      <div class="metric wide">
-        <span>Search</span>
+      <GnMetricCard label="Total" :value="total" icon="ph ph-vault" />
+      <GnMetricCard label="Active" :value="activeSecrets" icon="ph ph-check-circle" />
+      <GnMetricCard label="MCP" :value="mcpSecrets" icon="ph ph-plugs-connected" />
+      <GnCard title="Search" class="search-card">
         <div class="search-line">
-          <GnInput v-model="query" label="" placeholder="service, login, tag, source" />
-          <GnButton variant="primary" @click="loadSecrets">Search</GnButton>
+          <GnSearchField v-model="query" placeholder="service, login, tag, source" />
+          <GnButton variant="primary" icon="ph ph-magnifying-glass" @click="loadSecrets">Search</GnButton>
         </div>
-      </div>
+      </GnCard>
     </section>
 
     <section v-if="activeTab === 'secrets'" class="workspace-grid">
       <aside class="panel list-panel">
         <p v-if="error" class="error">{{ error }}</p>
-        <div class="panel-title">
-          <h2>Secrets</h2>
-          <div class="panel-actions">
-            <span>{{ loading ? "Loading" : `${total} records` }}</span>
-            <GnButton size="sm" variant="success" @click="openCreateModal">
-              <span class="button-content">
-                <i class="ph ph-plus-circle" aria-hidden="true"></i>
-                Create
-              </span>
+        <GnToolbar title="Secrets" :meta="loading ? 'Loading' : `${total} records`">
+          <template #actions>
+            <GnButton size="sm" variant="success" icon="ph ph-plus-circle" @click="openCreateModal">
+              Create
             </GnButton>
-          </div>
-        </div>
+          </template>
+        </GnToolbar>
         <button
           v-for="secret in secrets"
           :key="secret.id"
@@ -498,23 +497,25 @@
             <small>{{ secret.purpose || secret.category || "No purpose" }}</small>
           </span>
           <span class="row-meta">
-            <GnBadge :tone="secret.status === 'actual' ? 'success' : 'warning'">
+            <GnBadge :variant="secret.status === 'actual' ? 'success' : 'warning'">
               {{ secret.status }}
             </GnBadge>
             <small>{{ secret.category || "uncategorized" }}</small>
           </span>
         </button>
-        <div v-if="!secrets.length" class="empty-state">
-          <strong>No secrets yet</strong>
-          <span>Create the first record using the Create button.</span>
-        </div>
+        <GnEmptyState
+          v-if="!secrets.length"
+          title="No secrets yet"
+          text="Create the first record using the Create button."
+          icon="ph ph-vault"
+        />
       </aside>
 
       <section class="panel detail-panel">
         <div class="panel-title">
           <h2>{{ selected?.title || "No secret selected" }}</h2>
           <div v-if="selected" class="panel-actions">
-            <GnBadge :tone="selected.status === 'actual' ? 'success' : 'warning'">
+            <GnBadge :variant="selected.status === 'actual' ? 'success' : 'warning'">
               {{ selected.status }}
             </GnBadge>
             <GnButton size="sm" @click="editing = !editing">Edit</GnButton>
@@ -606,10 +607,13 @@
             </div>
           </div>
         </template>
-        <div v-else class="empty-state large">
-          <strong>Select a secret</strong>
-          <span>Metadata is shown by default. Values are available through reveal.</span>
-        </div>
+        <GnEmptyState
+          v-else
+          class="large"
+          title="Select a secret"
+          text="Metadata is shown by default. Values are available through reveal."
+          icon="ph ph-lock-key"
+        />
       </section>
     </section>
 
@@ -742,13 +746,13 @@
         <div class="diagnostics-row">
           <span>
             <small>/health</small>
-            <GnBadge :tone="diagnostics.health === 'ok' ? 'success' : 'danger'">
+            <GnBadge :variant="diagnostics.health === 'ok' ? 'success' : 'danger'">
               {{ diagnostics.health }}
             </GnBadge>
           </span>
           <span>
             <small>/ready</small>
-            <GnBadge :tone="diagnostics.ready === 'ok' ? 'success' : 'danger'">
+            <GnBadge :variant="diagnostics.ready === 'ok' ? 'success' : 'danger'">
               {{ diagnostics.ready }}
             </GnBadge>
           </span>
@@ -765,10 +769,10 @@
             <strong>{{ user.email }}</strong>
             <small>{{ user.display_name || user.id }}</small>
           </span>
-          <GnBadge :tone="user.status === 'enabled' ? 'success' : 'danger'">
+          <GnBadge :variant="user.status === 'enabled' ? 'success' : 'danger'">
             {{ user.status }}
           </GnBadge>
-          <GnBadge :tone="user.role === 'admin' ? 'warning' : 'info'">
+          <GnBadge :variant="user.role === 'admin' ? 'warning' : 'info'">
             {{ user.role }}
           </GnBadge>
           <small>{{ user.last_seen_at || "never" }}</small>
@@ -780,123 +784,133 @@
       </div>
     </section>
 
-    <GnModal v-model="showCreateModal" title="Create secret">
+    <GnModal v-model:open="showCreateModal" title="Create secret">
       <div class="create-modal-body">
         <section class="modal-section">
           <div class="form-grid two">
-            <div class="form-field">
-              <GnInput v-model="form.title" label="Title" />
-              <small class="field-help">Human-readable name shown in lists and search results.</small>
-            </div>
-            <div class="form-field">
-              <GnInput v-model="form.purpose" label="Purpose" />
-              <small class="field-help">Target service, server, account, or other secret destination.</small>
-            </div>
-            <div class="form-field">
-              <GnInput v-model="form.category" label="Category" />
-              <small class="field-help">Single grouping value for browsing, for example work or banking.</small>
-            </div>
-            <div class="form-field">
-              <GnInput v-model="form.tags" label="Tags" placeholder="comma,separated" />
-              <small class="field-help">Keywords used by search. Separate multiple tags with commas.</small>
-            </div>
-            <div class="form-field">
-              <GnInput v-model="form.source" label="Source" />
-              <small class="field-help">Where this secret came from: person, import, ticket, or note.</small>
-            </div>
-            <div class="form-field">
-              <GnTextarea v-model="form.notes" label="Notes" rows="3" maxlength="140" />
-              <small class="field-help">Short context for the secret. Limited to 140 characters.</small>
-            </div>
+            <GnInput
+              v-model="form.title"
+              label="Title"
+              icon="ph ph-text-t"
+              help="Human-readable name shown in lists and search results."
+            />
+            <GnInput
+              v-model="form.purpose"
+              label="Purpose"
+              icon="ph ph-target"
+              help="Target service, server, account, or other secret destination."
+            />
+            <GnInput
+              v-model="form.category"
+              label="Category"
+              icon="ph ph-folder"
+              help="Single grouping value for browsing, for example work or banking."
+            />
+            <GnInput
+              v-model="form.tags"
+              label="Tags"
+              icon="ph ph-tag"
+              placeholder="comma,separated"
+              help="Keywords used by search. Separate multiple tags with commas."
+            />
+            <GnInput
+              v-model="form.source"
+              label="Source"
+              icon="ph ph-signpost"
+              help="Where this secret came from: person, import, ticket, or note."
+            />
+            <GnTextarea
+              v-model="form.notes"
+              label="Notes"
+              icon="ph ph-note-pencil"
+              rows="3"
+              maxlength="140"
+              help="Short context for the secret. Limited to 140 characters."
+            />
           </div>
         </section>
 
         <section class="modal-section">
-          <div class="panel-title inline-title">
-            <h2>Fields</h2>
-            <GnButton size="sm" @click="addCreateField">
-              <span class="button-content">
-                <i class="ph ph-plus" aria-hidden="true"></i>
+          <GnToolbar title="Fields" meta="One row per secret value">
+            <template #actions>
+              <GnButton size="sm" variant="secondary" icon="ph ph-plus" @click="addCreateField">
                 Add field
-              </span>
-            </GnButton>
-          </div>
-          <p class="section-help">
+              </GnButton>
+            </template>
+          </GnToolbar>
+          <p class="input-info modal-help">
             Add one row per secret value. Enable encryption for passwords, tokens, PINs, and keys.
           </p>
           <div class="create-fields">
             <div v-for="(field, index) in formFields" :key="field.id" class="create-field-row">
-              <div class="form-field">
-                <GnInput v-model="field.name" label="Field name" />
-                <small class="field-help">Name copied into API and MCP responses, for example username.</small>
-              </div>
-              <div class="form-field">
-                <GnInput v-model="field.value" label="Value" />
-                <small class="field-help">Actual value stored for this field.</small>
-              </div>
+              <GnInput
+                v-model="field.name"
+                label="Field name"
+                icon="ph ph-brackets-curly"
+                help="Name copied into API and MCP responses, for example username."
+              />
+              <GnInput
+                v-model="field.value"
+                label="Value"
+                icon="ph ph-key"
+                help="Actual value stored for this field."
+              />
               <div class="field-row-actions">
                 <GnCheckbox v-model="field.encrypted" label="Encrypt" />
-                <small class="field-help">Encrypted fields cannot be searched by value.</small>
-                <GnButton
-                  size="sm"
-                  variant="danger"
+                <div class="input-info">Encrypted fields cannot be searched by value.</div>
+                <GnIconButton
+                  icon="ph ph-trash"
+                  label="Remove field"
                   :disabled="formFields.length === 1"
                   @click="removeCreateField(index)"
-                >
-                  <span class="button-content">
-                    <i class="ph ph-trash" aria-hidden="true"></i>
-                    Remove
-                  </span>
-                </GnButton>
+                />
               </div>
             </div>
           </div>
         </section>
 
         <section class="modal-section">
+          <GnToolbar title="Access" meta="Global channels for this secret" />
           <div class="create-access-grid">
             <div class="access-option">
               <GnCheckbox v-model="form.allow_ui" label="UI" />
-              <small class="field-help">Available from the web interface after login.</small>
+              <div class="input-info">Available from the web interface after login.</div>
             </div>
             <div class="access-option">
               <GnCheckbox v-model="form.allow_rest_api" label="REST API" />
-              <small class="field-help">Available to external clients using API tokens.</small>
+              <div class="input-info">Available to external clients using API tokens.</div>
             </div>
             <div class="access-option">
               <GnCheckbox v-model="form.allow_mcp" label="MCP" />
-              <small class="field-help">Available to MCP clients when token scopes allow it.</small>
+              <div class="input-info">Available to MCP clients when token scopes allow it.</div>
             </div>
           </div>
         </section>
       </div>
-      <template #footer>
-        <GnButton @click="showCreateModal = false">Cancel</GnButton>
-        <GnButton variant="success" :disabled="!canCreateSecret" @click="createSecret">
-          <span class="button-content">
-            <i class="ph ph-check-circle" aria-hidden="true"></i>
-            Create
-          </span>
+      <template #actions>
+        <GnButton variant="secondary" @click="showCreateModal = false">Cancel</GnButton>
+        <GnButton variant="success" icon="ph ph-check-circle" :disabled="!canCreateSecret" @click="createSecret">
+          Create
         </GnButton>
       </template>
     </GnModal>
 
-    <GnModal v-model="showDeleteConfirm" title="Delete all data">
+    <GnModal v-model:open="showDeleteConfirm" title="Delete all data">
       <p>This permanently removes all secrets and versions. Audit records remain.</p>
-      <template #footer>
-        <GnButton @click="showDeleteConfirm = false">Cancel</GnButton>
+      <template #actions>
+        <GnButton variant="secondary" @click="showDeleteConfirm = false">Cancel</GnButton>
         <GnButton variant="danger" @click="deleteAllData">Delete</GnButton>
       </template>
     </GnModal>
 
-    <GnModal :model-value="Boolean(pendingDeleteSecret)" title="Delete secret">
+    <GnModal :open="Boolean(pendingDeleteSecret)" title="Delete secret" @close="pendingDeleteSecret = null">
       <p>
         This permanently deletes
         <strong>{{ pendingDeleteSecret?.title }}</strong>
         and all its versions. Audit records remain.
       </p>
-      <template #footer>
-        <GnButton @click="pendingDeleteSecret = null">Cancel</GnButton>
+      <template #actions>
+        <GnButton variant="secondary" @click="pendingDeleteSecret = null">Cancel</GnButton>
         <GnButton variant="danger" @click="deleteSelectedSecret">Delete</GnButton>
       </template>
     </GnModal>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index f061074..41d6df7 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -7,24 +7,7 @@
 }
 
 body {
-  margin: 0;
   min-width: 320px;
-  background: #101018;
-  color: #d6ddff;
-  font-family:
-    "IBM Plex Mono",
-    ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    Consolas,
-    monospace;
-}
-
-button,
-input,
-textarea,
-select {
-  font: inherit;
 }
 
 input[type="file"] {
@@ -43,33 +26,15 @@
 }
 
 .app-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 24px;
-  padding: 18px 20px;
-  border: 1px solid #3e4665;
-  background: #171824;
+  margin-bottom: 14px;
 }
 
-.app-header h1,
 .panel h2 {
   margin: 0;
   line-height: 1.15;
   letter-spacing: 0;
 }
 
-.app-header h1 {
-  font-size: 24px;
-}
-
-.eyebrow {
-  margin: 0 0 6px;
-  color: #8ea2e8;
-  font-size: 12px;
-  text-transform: uppercase;
-}
-
 .session-box {
   display: flex;
   align-items: center;
@@ -91,35 +56,21 @@
 .metrics-row {
   display: grid;
   grid-template-columns: repeat(3, minmax(120px, 160px)) minmax(420px, 1fr);
-  gap: 12px;
-  margin-bottom: 14px;
+  gap: 15px;
+  margin-bottom: 15px;
 }
 
-.metric,
 .panel {
   border: 1px solid #3e4665;
   background: #1a1b28;
 }
 
-.metric {
-  display: grid;
-  gap: 6px;
-  min-height: 76px;
-  padding: 14px 16px;
-}
-
-.metric span,
 .muted,
 small {
   color: #9ba7cb;
 }
 
-.metric strong {
-  font-size: 24px;
-  line-height: 1;
-}
-
-.metric.wide {
+.search-card {
   min-width: 0;
 }
 
@@ -303,32 +254,6 @@
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.form-field {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-}
-
-.field-help,
-.section-help {
-  margin: 0;
-  color: #9ba7cb;
-  line-height: 1.45;
-}
-
-.button-content {
-  display: inline-flex;
-  gap: 7px;
-  align-items: center;
-  justify-content: center;
-  min-width: 0;
-}
-
-.button-content .ph {
-  font-size: 1.05em;
-  line-height: 1;
-}
-
 .create-modal-body {
   display: grid;
   gap: 16px;
@@ -336,6 +261,10 @@
   max-width: 100%;
 }
 
+.modal-help {
+  margin: 0;
+}
+
 .modal-section {
   display: grid;
   gap: 12px;