diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 5dc9eba..8fac6a7 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,17 +1,22 @@
 <script setup>
 import { computed, onMounted, reactive, ref, watch } from "vue";
 import {
+  GnActionList,
+  GnActivityLog,
   GnBadge,
   GnButton,
   GnCard,
   GnCheckbox,
+  GnDescriptionList,
   GnEmptyState,
+  GnFileUpload,
   GnIconButton,
   GnInput,
   GnMetricCard,
   GnModal,
   GnPageHeader,
   GnSearchField,
+  GnTable,
   GnTabs,
   GnTextarea,
   GnToolbar
@@ -47,6 +52,7 @@
 const editing = ref(false);
 const editFields = ref(false);
 const pendingDeleteSecret = ref(null);
+const importFiles = ref([]);
 const importFile = ref(null);
 const importPreview = ref(null);
 const importError = ref("");
@@ -102,6 +108,82 @@
 const activeSecrets = computed(() => secrets.value.filter((secret) => !secret.archived).length);
 const mcpSecrets = computed(() => secrets.value.filter((secret) => secret.allow_mcp).length);
 const canCreateSecret = computed(() => Boolean(form.title.trim() && parseCreateFields().length));
+const secretItems = computed(() =>
+  secrets.value.map((secret) => ({
+    id: secret.id,
+    title: secret.title,
+    subtitle: secret.purpose || secret.category || "No purpose",
+    raw: secret
+  }))
+);
+const selectedDetails = computed(() => {
+  if (!selected.value) return [];
+  return [
+    { label: "Purpose", value: selected.value.purpose || "Not set" },
+    { label: "Category", value: selected.value.category || "Not set" },
+    { label: "Tags", value: selected.value.tags?.join(", ") || "No tags" },
+    {
+      label: "Access",
+      value:
+        `UI ${selected.value.allow_ui ? "on" : "off"} · REST ` +
+        `${selected.value.allow_rest_api ? "on" : "off"} · MCP ` +
+        `${selected.value.allow_mcp ? "on" : "off"}`
+    }
+  ];
+});
+const visibleFieldItems = computed(() =>
+  visibleFields.value.map((field) => ({
+    title: field.name,
+    subtitle: field.encrypted ? "encrypted" : "plain",
+    raw: field
+  }))
+);
+const revealedFieldItems = computed(() =>
+  (revealed.value?.fields || []).map((field) => ({
+    title: field.name,
+    subtitle: field.value,
+    raw: field
+  }))
+);
+const versionItems = computed(() =>
+  versions.value.map((version) => ({
+    title: `Version ${version.version_number}`,
+    subtitle: `${version.created_at} · ${version.fields.length} fields`,
+    raw: version
+  }))
+);
+const revealedVersionItems = computed(() =>
+  (revealedVersion.value?.fields || []).map((field) => ({
+    title: field.name,
+    subtitle: field.encrypted ? "encrypted" : "plain",
+    raw: field
+  }))
+);
+const auditLogItems = computed(() =>
+  auditEvents.value.map((event) => ({
+    key: String(event.id),
+    time: event.created_at,
+    title: `${event.action} · ${event.channel}`,
+    raw: event
+  }))
+);
+const tokenItems = computed(() =>
+  tokens.value.map((token) => ({
+    title: token.name,
+    subtitle: token.scopes.join(", "),
+    raw: token
+  }))
+);
+const diagnosticsItems = computed(() => [
+  { label: "/health", key: "health", value: diagnostics.health },
+  { label: "/ready", key: "ready", value: diagnostics.ready }
+]);
+const adminColumns = [
+  { key: "user", label: "User" },
+  { key: "status", label: "Status" },
+  { key: "role", label: "Role" },
+  { key: "last_seen_at", label: "Last seen" }
+];
 
 function parseFieldsText(value) {
   return value
@@ -373,10 +455,10 @@
   URL.revokeObjectURL(url);
 }
 
-async function handleImportFile(event) {
+async function handleImportFiles(files) {
   importError.value = "";
   importPreview.value = null;
-  const file = event.target.files?.[0];
+  const file = files?.[0];
   importFile.value = file || null;
   if (!file) return;
   try {
@@ -394,6 +476,7 @@
 async function importData() {
   if (!importPreview.value) return;
   await api.importData(importPreview.value);
+  importFiles.value = [];
   importFile.value = null;
   importPreview.value = null;
   await loadSecrets();
@@ -475,7 +558,7 @@
     </section>
 
     <section v-if="activeTab === 'secrets'" class="workspace-grid">
-      <aside class="panel list-panel">
+      <GnCard class="list-panel">
         <p v-if="error" class="error">{{ error }}</p>
         <GnToolbar title="Secrets" :meta="loading ? 'Loading' : `${total} records`">
           <template #actions>
@@ -484,54 +567,54 @@
             </GnButton>
           </template>
         </GnToolbar>
-        <button
-          v-for="secret in secrets"
-          :key="secret.id"
-          class="secret-row"
-          :class="{ selected: selected?.id === secret.id }"
-          type="button"
-          @click="selectSecret(secret)"
-        >
-          <span>
-            <strong>{{ secret.title }}</strong>
-            <small>{{ secret.purpose || secret.category || "No purpose" }}</small>
-          </span>
-          <span class="row-meta">
-            <GnBadge :variant="secret.status === 'actual' ? 'success' : 'warning'">
-              {{ secret.status }}
+        <GnActionList v-if="secrets.length" :items="secretItems" class="secret-list">
+          <template #title="{ item }">
+            <GnButton
+              size="sm"
+              :variant="selected?.id === item.raw.id ? 'primary' : 'secondary'"
+              @click="selectSecret(item.raw)"
+            >
+              {{ item.title }}
+            </GnButton>
+          </template>
+          <template #controls="{ item }">
+            <GnBadge :variant="item.raw.status === 'actual' ? 'success' : 'warning'">
+              {{ item.raw.status }}
             </GnBadge>
-            <small>{{ secret.category || "uncategorized" }}</small>
-          </span>
-        </button>
+            <small>{{ item.raw.category || "uncategorized" }}</small>
+          </template>
+        </GnActionList>
         <GnEmptyState
           v-if="!secrets.length"
           title="No secrets yet"
           text="Create the first record using the Create button."
           icon="ph ph-vault"
         />
-      </aside>
+      </GnCard>
 
-      <section class="panel detail-panel">
-        <div class="panel-title">
-          <h2>{{ selected?.title || "No secret selected" }}</h2>
-          <div v-if="selected" class="panel-actions">
-            <GnBadge :variant="selected.status === 'actual' ? 'success' : 'warning'">
-              {{ selected.status }}
-            </GnBadge>
-            <GnButton size="sm" @click="editing = !editing">Edit</GnButton>
-          </div>
-        </div>
-        <template v-if="selected">
-          <div v-if="editing" class="edit-box">
-            <div class="form-grid two">
-              <GnInput v-model="editForm.title" label="Title" />
-              <GnInput v-model="editForm.purpose" label="Purpose" />
-              <GnInput v-model="editForm.category" label="Category" />
-              <GnInput v-model="editForm.tags" label="Tags" />
-              <GnInput v-model="editForm.source" label="Source" />
-              <GnInput v-model="editForm.notes" label="Notes" maxlength="140" />
+      <GnCard class="detail-panel">
+        <template #title>
+          <div class="card-title-row">
+            <span>{{ selected?.title || "No secret selected" }}</span>
+            <div v-if="selected" class="card-title-actions">
+              <GnBadge :variant="selected.status === 'actual' ? 'success' : 'warning'">
+                {{ selected.status }}
+              </GnBadge>
+              <GnButton size="sm" icon="ph ph-pencil-simple" @click="editing = !editing">Edit</GnButton>
             </div>
-            <div class="status-row">
+          </div>
+        </template>
+        <template v-if="selected">
+          <GnCard v-if="editing" class="form-card" title="Edit metadata">
+            <div class="form-grid two">
+              <GnInput v-model="editForm.title" label="Title" icon="ph ph-text-t" />
+              <GnInput v-model="editForm.purpose" label="Purpose" icon="ph ph-target" />
+              <GnInput v-model="editForm.category" label="Category" icon="ph ph-folder" />
+              <GnInput v-model="editForm.tags" label="Tags" icon="ph ph-tag" />
+              <GnInput v-model="editForm.source" label="Source" icon="ph ph-signpost" />
+              <GnInput v-model="editForm.notes" label="Notes" icon="ph ph-note-pencil" maxlength="140" />
+            </div>
+            <div class="controls-line">
               <GnButton
                 :variant="editForm.status === 'actual' ? 'primary' : 'secondary'"
                 @click="editForm.status = 'actual'"
@@ -546,66 +629,72 @@
               </GnButton>
               <GnCheckbox v-model="editForm.archived" label="Archived" />
             </div>
-            <div class="checks">
+            <div class="controls-line">
               <GnCheckbox v-model="editForm.allow_ui" label="UI" />
               <GnCheckbox v-model="editForm.allow_rest_api" label="REST API" />
               <GnCheckbox v-model="editForm.allow_mcp" label="MCP" />
             </div>
-            <div class="toolbar">
-              <GnButton variant="primary" @click="saveSecretMetadata">Save metadata</GnButton>
-              <GnButton @click="editing = false">Cancel</GnButton>
-            </div>
-          </div>
+            <template #footer>
+              <div class="actions">
+                <GnButton variant="primary" icon="ph ph-floppy-disk" @click="saveSecretMetadata">
+                  Save metadata
+                </GnButton>
+                <GnButton variant="secondary" @click="editing = false">Cancel</GnButton>
+              </div>
+            </template>
+          </GnCard>
 
-          <div class="description-grid">
-            <span>Purpose</span>
-            <strong>{{ selected.purpose || "Not set" }}</strong>
-            <span>Category</span>
-            <strong>{{ selected.category || "Not set" }}</strong>
-            <span>Tags</span>
-            <strong>{{ selected.tags?.join(", ") || "No tags" }}</strong>
-            <span>Access</span>
-            <strong>
-              UI {{ selected.allow_ui ? "on" : "off" }} · REST
-              {{ selected.allow_rest_api ? "on" : "off" }} · MCP
-              {{ selected.allow_mcp ? "on" : "off" }}
-            </strong>
-          </div>
-          <div class="field-list">
-            <div v-for="field in visibleFields" :key="field.name" class="field-row">
-              <span>
-                <strong>{{ field.name }}</strong>
-                <small>{{ field.encrypted ? "encrypted" : "plain" }}</small>
-              </span>
-              <code>{{ field.value ?? "••••••" }}</code>
-              <GnButton size="sm" @click="copyField(selected, field)">Copy</GnButton>
-            </div>
-          </div>
-          <div class="toolbar">
-            <GnButton variant="primary" @click="reveal(selected)">Reveal</GnButton>
-            <GnButton @click="loadVersions(selected)">Versions</GnButton>
-            <GnButton @click="editFields = !editFields">Edit fields</GnButton>
-            <GnButton
-              @click="setStatus(selected.status === 'actual' ? 'outdated' : 'actual')"
-            >
-              Mark {{ selected.status === "actual" ? "outdated" : "actual" }}
-            </GnButton>
-            <GnButton @click="archiveSelected">Archive</GnButton>
-            <GnButton variant="danger" @click="confirmDeleteSecret(selected)">Delete</GnButton>
-          </div>
-          <div v-if="editFields" class="edit-box">
-            <GnTextarea v-model="editForm.fieldsText" label="Fields" rows="8" />
-            <div class="toolbar">
-              <GnButton variant="primary" @click="saveSecretFields">Save new version</GnButton>
-              <GnButton @click="editFields = false">Cancel</GnButton>
-            </div>
-          </div>
-          <div v-if="revealed" class="field-list revealed">
-            <div v-for="field in revealed.fields" :key="field.name" class="field-row">
-              <span>{{ field.name }}</span>
-              <code>{{ field.value }}</code>
-            </div>
-          </div>
+          <GnDescriptionList :items="selectedDetails" />
+
+          <GnActionList :items="visibleFieldItems">
+            <template #controls="{ item }">
+              <code>{{ item.raw.value ?? "••••••" }}</code>
+              <GnButton size="sm" icon="ph ph-copy" @click="copyField(selected, item.raw)">Copy</GnButton>
+            </template>
+          </GnActionList>
+
+          <GnToolbar>
+            <template #actions>
+              <GnButton variant="primary" icon="ph ph-eye" @click="reveal(selected)">Reveal</GnButton>
+              <GnButton icon="ph ph-clock-counter-clockwise" @click="loadVersions(selected)">Versions</GnButton>
+              <GnButton icon="ph ph-list-plus" @click="editFields = !editFields">Edit fields</GnButton>
+              <GnButton
+                icon="ph ph-arrows-clockwise"
+                @click="setStatus(selected.status === 'actual' ? 'outdated' : 'actual')"
+              >
+                Mark {{ selected.status === "actual" ? "outdated" : "actual" }}
+              </GnButton>
+              <GnButton icon="ph ph-archive" @click="archiveSelected">Archive</GnButton>
+              <GnButton variant="danger" icon="ph ph-trash" @click="confirmDeleteSecret(selected)">
+                Delete
+              </GnButton>
+            </template>
+          </GnToolbar>
+
+          <GnCard v-if="editFields" class="form-card" title="Edit fields">
+            <GnTextarea
+              v-model="editForm.fieldsText"
+              label="Fields"
+              icon="ph ph-brackets-curly"
+              rows="8"
+            />
+            <template #footer>
+              <div class="actions">
+                <GnButton variant="primary" icon="ph ph-floppy-disk" @click="saveSecretFields">
+                  Save new version
+                </GnButton>
+                <GnButton variant="secondary" @click="editFields = false">Cancel</GnButton>
+              </div>
+            </template>
+          </GnCard>
+
+          <GnCard v-if="revealed" class="revealed-card" title="Revealed fields">
+            <GnActionList :items="revealedFieldItems">
+              <template #controls="{ item }">
+                <code>{{ item.raw.value }}</code>
+              </template>
+            </GnActionList>
+          </GnCard>
         </template>
         <GnEmptyState
           v-else
@@ -614,174 +703,176 @@
           text="Metadata is shown by default. Values are available through reveal."
           icon="ph ph-lock-key"
         />
-      </section>
+      </GnCard>
     </section>
 
     <section v-if="activeTab === 'history'" class="panel-stack">
-      <div class="panel">
-        <div class="panel-title">
-          <h2>Version history</h2>
-          <GnButton v-if="selected" @click="loadVersions(selected)">Refresh</GnButton>
-        </div>
-        <p class="muted">{{ selected?.title || "Select a secret first from the Secrets tab" }}</p>
-        <div v-for="version in versions" :key="version.id" class="secret-row">
-          <span>
-            <strong>Version {{ version.version_number }}</strong>
-            <small>{{ version.created_at }}</small>
-          </span>
-          <span class="row-meta">
-            <small>{{ version.fields.length }} fields</small>
-            <GnButton size="sm" @click="revealVersion(version)">Reveal</GnButton>
-          </span>
-        </div>
-        <div v-if="revealedVersion" class="field-list revealed">
-          <div class="panel-title inline-title">
-            <h2>Version {{ revealedVersion.version_number }}</h2>
-          </div>
-          <div v-for="field in revealedVersion.fields" :key="field.name" class="field-row">
-            <span>
-              <strong>{{ field.name }}</strong>
-              <small>{{ field.encrypted ? "encrypted" : "plain" }}</small>
-            </span>
-            <code>{{ field.value }}</code>
-            <GnButton size="sm" @click="copyText(field.value)">Copy</GnButton>
-          </div>
-        </div>
-      </div>
+      <GnCard>
+        <GnToolbar title="Version history" :meta="selected?.title || 'Select a secret first from the Secrets tab'">
+          <template #actions>
+            <GnButton
+              v-if="selected"
+              icon="ph ph-arrows-clockwise"
+              @click="loadVersions(selected)"
+            >
+              Refresh
+            </GnButton>
+          </template>
+        </GnToolbar>
+        <GnActionList :items="versionItems">
+          <template #controls="{ item }">
+            <GnButton size="sm" icon="ph ph-eye" @click="revealVersion(item.raw)">Reveal</GnButton>
+          </template>
+        </GnActionList>
+        <GnCard v-if="revealedVersion" class="revealed-card" :title="`Version ${revealedVersion.version_number}`">
+          <GnActionList :items="revealedVersionItems">
+            <template #controls="{ item }">
+              <code>{{ item.raw.value }}</code>
+              <GnButton size="sm" icon="ph ph-copy" @click="copyText(item.raw.value)">Copy</GnButton>
+            </template>
+          </GnActionList>
+        </GnCard>
+      </GnCard>
     </section>
 
     <section v-if="activeTab === 'audit'" class="panel-stack">
-      <div class="panel">
-        <div class="toolbar">
-          <h2>Audit</h2>
-          <GnButton
-            :variant="auditMode === 'all' ? 'primary' : 'secondary'"
-            @click="auditMode = 'all'; loadAudit()"
-          >
-            All
-          </GnButton>
-          <GnButton
-            :variant="auditMode === 'secret' ? 'primary' : 'secondary'"
-            :disabled="!selected"
-            @click="auditMode = 'secret'; loadAudit()"
-          >
-            Selected secret
-          </GnButton>
-          <GnButton @click="loadAudit">Refresh</GnButton>
-        </div>
-        <div v-for="event in auditEvents" :key="event.id" class="audit-row">
-          <span>
-            <strong>{{ event.action }}</strong>
-            <small>{{ event.channel }} · {{ event.created_at }}</small>
-          </span>
-          <code>{{ JSON.stringify(event.metadata) }}</code>
-        </div>
-      </div>
+      <GnCard>
+        <GnToolbar title="Audit">
+          <template #actions>
+            <GnButton
+              :variant="auditMode === 'all' ? 'primary' : 'secondary'"
+              @click="auditMode = 'all'; loadAudit()"
+            >
+              All
+            </GnButton>
+            <GnButton
+              :variant="auditMode === 'secret' ? 'primary' : 'secondary'"
+              :disabled="!selected"
+              @click="auditMode = 'secret'; loadAudit()"
+            >
+              Selected secret
+            </GnButton>
+            <GnButton icon="ph ph-arrows-clockwise" @click="loadAudit">Refresh</GnButton>
+          </template>
+        </GnToolbar>
+        <GnActivityLog :items="auditLogItems">
+          <template #actions="{ item }">
+            <code>{{ JSON.stringify(item.raw.metadata) }}</code>
+          </template>
+        </GnActivityLog>
+      </GnCard>
     </section>
 
     <section v-if="activeTab === 'tokens'" class="panel-stack">
-      <div class="panel token-panel">
-        <div class="toolbar">
-          <h2>API tokens</h2>
-          <GnButton @click="loadTokens">Refresh</GnButton>
-        </div>
-        <div class="edit-box">
-          <GnInput v-model="tokenForm.name" label="Token name" />
-          <div class="checks">
+      <GnCard class="token-panel">
+        <GnToolbar title="API tokens">
+          <template #actions>
+            <GnButton icon="ph ph-arrows-clockwise" @click="loadTokens">Refresh</GnButton>
+          </template>
+        </GnToolbar>
+        <GnCard class="form-card" title="Create token">
+          <GnInput v-model="tokenForm.name" label="Token name" icon="ph ph-key" />
+          <div class="controls-line">
             <GnCheckbox v-model="tokenForm.read" label="Read" />
             <GnCheckbox v-model="tokenForm.reveal" label="Reveal" />
             <GnCheckbox v-model="tokenForm.write" label="Write" />
             <GnCheckbox v-model="tokenForm.admin" label="Admin" />
             <GnCheckbox v-model="tokenForm.mcp" label="MCP" />
           </div>
-          <GnButton variant="primary" @click="createApiToken">Create token</GnButton>
-        </div>
-        <div v-if="newToken" class="new-token-box">
-          <GnTextarea :model-value="newToken.token" label="New token" readonly />
-          <GnButton @click="copyText(newToken.token)">Copy token</GnButton>
-        </div>
-        <div v-for="token in tokens" :key="token.id" class="secret-row">
-          <span>{{ token.name }}</span>
-          <span class="row-meta">
-            <small>{{ token.scopes.join(", ") }}</small>
-            <GnButton size="sm" variant="danger" @click="revokeToken(token)">Revoke</GnButton>
-          </span>
-        </div>
-      </div>
+          <template #footer>
+            <GnButton variant="primary" icon="ph ph-plus-circle" @click="createApiToken">
+              Create token
+            </GnButton>
+          </template>
+        </GnCard>
+        <GnCard v-if="newToken" class="revealed-card" title="New token">
+          <GnTextarea :model-value="newToken.token" label="Token" icon="ph ph-key" readonly />
+          <template #footer>
+            <GnButton icon="ph ph-copy" @click="copyText(newToken.token)">Copy token</GnButton>
+          </template>
+        </GnCard>
+        <GnActionList :items="tokenItems">
+          <template #controls="{ item }">
+            <GnButton size="sm" variant="danger" icon="ph ph-trash" @click="revokeToken(item.raw)">
+              Revoke
+            </GnButton>
+          </template>
+        </GnActionList>
+      </GnCard>
     </section>
 
     <section v-if="activeTab === 'settings'" class="panel-stack">
-      <div class="panel">
-        <h2>Settings</h2>
-        <div class="edit-box">
-          <h3>Import JSON</h3>
-          <input type="file" accept="application/json,.json" @change="handleImportFile" />
-          <p v-if="importError" class="error">{{ importError }}</p>
-          <p v-if="importPreview" class="muted">
-            {{ importPreview.secrets?.length || 0 }} secrets ready to import from
-            {{ importFile?.name }}
-          </p>
-          <GnButton
-            variant="primary"
-            :disabled="!importPreview"
-            @click="importData"
-          >
-            Import selected file
-          </GnButton>
-        </div>
-        <div class="toolbar">
-          <GnButton @click="exportData">Export decrypted JSON</GnButton>
-          <GnButton variant="danger" @click="showDeleteConfirm = true">Delete all data</GnButton>
-        </div>
-      </div>
+      <GnCard title="Settings">
+        <GnFileUpload
+          v-model="importFiles"
+          title="Import JSON"
+          description="Only gnexus-creds export JSON files are supported."
+          primary="Choose export file"
+          secondary="The file is parsed locally before import."
+          badge="JSON"
+          :multiple="false"
+          accept="application/json,.json"
+          @change="handleImportFiles"
+        />
+        <p v-if="importError" class="error">{{ importError }}</p>
+        <p v-if="importPreview" class="muted">
+          {{ importPreview.secrets?.length || 0 }} secrets ready to import from
+          {{ importFile?.name }}
+        </p>
+        <GnToolbar>
+          <template #actions>
+            <GnButton
+              variant="primary"
+              icon="ph ph-upload-simple"
+              :disabled="!importPreview"
+              @click="importData"
+            >
+              Import selected file
+            </GnButton>
+            <GnButton icon="ph ph-export" @click="exportData">Export decrypted JSON</GnButton>
+            <GnButton variant="danger" icon="ph ph-trash" @click="showDeleteConfirm = true">
+              Delete all data
+            </GnButton>
+          </template>
+        </GnToolbar>
+      </GnCard>
     </section>
 
     <section v-if="activeTab === 'admin' && me?.role === 'admin'" class="panel-stack admin-stack">
-      <div class="panel">
-        <div class="toolbar">
-          <h2>Users</h2>
-          <span class="muted">{{ adminUsersTotal }} records</span>
-          <GnButton @click="loadAdminUsers">Refresh</GnButton>
-        </div>
-        <div class="diagnostics-row">
-          <span>
-            <small>/health</small>
+      <GnCard>
+        <GnToolbar title="Users" :meta="`${adminUsersTotal} records`">
+          <template #actions>
+            <GnButton icon="ph ph-arrows-clockwise" @click="loadAdminUsers">Refresh</GnButton>
+          </template>
+        </GnToolbar>
+        <GnDescriptionList :items="diagnosticsItems" compact>
+          <template #health>
             <GnBadge :variant="diagnostics.health === 'ok' ? 'success' : 'danger'">
               {{ diagnostics.health }}
             </GnBadge>
-          </span>
-          <span>
-            <small>/ready</small>
+          </template>
+          <template #ready>
             <GnBadge :variant="diagnostics.ready === 'ok' ? 'success' : 'danger'">
               {{ diagnostics.ready }}
             </GnBadge>
-          </span>
-          <GnButton size="sm" @click="loadDiagnostics">Check</GnButton>
-        </div>
-        <div class="admin-grid admin-grid-head">
-          <span>User</span>
-          <span>Status</span>
-          <span>Role</span>
-          <span>Last seen</span>
-        </div>
-        <div v-for="user in adminUsers" :key="user.id" class="admin-grid">
-          <span>
-            <strong>{{ user.email }}</strong>
-            <small>{{ user.display_name || user.id }}</small>
-          </span>
-          <GnBadge :variant="user.status === 'enabled' ? 'success' : 'danger'">
-            {{ user.status }}
-          </GnBadge>
-          <GnBadge :variant="user.role === 'admin' ? 'warning' : 'info'">
-            {{ user.role }}
-          </GnBadge>
-          <small>{{ user.last_seen_at || "never" }}</small>
-        </div>
-        <div v-if="!adminUsers.length" class="empty-state">
-          <strong>No users loaded</strong>
-          <span>Use refresh to load gnexus-creds users.</span>
-        </div>
-      </div>
+          </template>
+        </GnDescriptionList>
+        <GnButton size="sm" icon="ph ph-heartbeat" @click="loadDiagnostics">Check diagnostics</GnButton>
+        <GnTable :columns="adminColumns" :rows="adminUsers" empty-text="No users loaded">
+          <template #cell-user="{ row }">
+            <span class="identity-cell">
+              <strong>{{ row.email }}</strong>
+              <small>{{ row.display_name || row.id }}</small>
+            </span>
+          </template>
+          <template #cell-status="{ value }">
+            <GnBadge :variant="value === 'enabled' ? 'success' : 'danger'">{{ value }}</GnBadge>
+          </template>
+          <template #cell-role="{ value }">
+            <GnBadge :variant="value === 'admin' ? 'warning' : 'info'">{{ value }}</GnBadge>
+          </template>
+        </GnTable>
+      </GnCard>
     </section>
 
     <GnModal v-model:open="showCreateModal" title="Create secret">
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 41d6df7..5b206de 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -10,14 +10,6 @@
   min-width: 320px;
 }
 
-input[type="file"] {
-  width: 100%;
-  padding: 10px;
-  border: 1px solid #536184;
-  background: #11121c;
-  color: #d6ddff;
-}
-
 .creds-app {
   min-height: 100vh;
   width: min(1480px, calc(100vw - 48px));
@@ -29,18 +21,11 @@
   margin-bottom: 14px;
 }
 
-.panel h2 {
-  margin: 0;
-  line-height: 1.15;
-  letter-spacing: 0;
-}
-
 .session-box {
   display: flex;
   align-items: center;
   gap: 10px;
   min-width: 0;
-  color: #aeb8df;
 }
 
 .session-box span {
@@ -60,22 +45,14 @@
   margin-bottom: 15px;
 }
 
-.panel {
-  border: 1px solid #3e4665;
-  background: #1a1b28;
-}
-
-.muted,
-small {
-  color: #9ba7cb;
-}
-
-.search-card {
+.search-card,
+.list-panel,
+.detail-panel,
+.token-panel {
   min-width: 0;
 }
 
-.search-line,
-.toolbar {
+.search-line {
   display: flex;
   gap: 10px;
   align-items: end;
@@ -90,159 +67,34 @@
 .workspace-grid {
   display: grid;
   grid-template-columns: 340px minmax(420px, 1fr);
-  gap: 14px;
+  gap: 15px;
   align-items: start;
 }
 
 .panel-stack {
   display: grid;
-  gap: 14px;
+  gap: 15px;
   max-width: 960px;
 }
 
-.panel {
-  display: grid;
-  gap: 14px;
-  min-width: 0;
-  padding: 16px;
-}
-
-.panel-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  min-width: 0;
-}
-
-.panel-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-}
-
-.panel-title h2 {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 18px;
-}
-
-.panel-title span {
-  color: #9ba7cb;
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.inline-title {
-  padding: 10px;
-}
-
 .list-panel {
   max-height: calc(100vh - 220px);
   overflow: auto;
 }
 
-.secret-row,
-.field-row,
-.audit-row {
-  width: 100%;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 12px;
+.card-title-row,
+.card-title-actions,
+.controls-line,
+.actions {
+  display: flex;
+  gap: 10px;
   align-items: center;
-  padding: 11px 10px;
-  border: 1px solid transparent;
-  border-bottom-color: #30384f;
-  background: transparent;
-  color: inherit;
-  text-align: left;
+  flex-wrap: wrap;
 }
 
-button.secret-row {
-  cursor: pointer;
-}
-
-button.secret-row:hover,
-button.secret-row.selected {
-  border-color: #6f7eb3;
-  background: #222438;
-}
-
-.secret-row span,
-.field-row span,
-.audit-row span,
-.row-meta {
-  min-width: 0;
-  display: grid;
-  gap: 4px;
-}
-
-.secret-row strong,
-.field-row strong {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.row-meta {
-  justify-items: end;
-}
-
-.description-grid {
-  display: grid;
-  grid-template-columns: 110px minmax(0, 1fr);
-  gap: 9px 14px;
-  padding: 12px;
-  border: 1px solid #30384f;
-  background: #151622;
-}
-
-.description-grid span {
-  color: #9ba7cb;
-}
-
-.description-grid strong {
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.field-list {
-  display: grid;
-  border-top: 1px solid #30384f;
-}
-
-.field-row {
-  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) auto;
-}
-
-.field-row code {
-  min-width: 0;
-  overflow: hidden;
-  padding: 6px 8px;
-  background: #11121c;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.audit-row {
-  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1fr);
-}
-
-.audit-row code {
-  min-width: 0;
-  overflow: auto;
-  padding: 6px 8px;
-  background: #11121c;
-  white-space: nowrap;
-}
-
-.revealed {
-  margin-top: 4px;
-  border: 1px solid #536184;
+.card-title-row {
+  justify-content: space-between;
+  width: 100%;
 }
 
 .form-grid {
@@ -254,6 +106,11 @@
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.form-card,
+.revealed-card {
+  max-width: none;
+}
+
 .create-modal-body {
   display: grid;
   gap: 16px;
@@ -280,9 +137,6 @@
   grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1.2fr) minmax(150px, auto);
   gap: 12px;
   align-items: start;
-  padding: 12px;
-  border: 1px solid #30384f;
-  background: #151622;
 }
 
 .field-row-actions {
@@ -302,97 +156,30 @@
   display: grid;
   gap: 6px;
   align-content: start;
-  padding: 12px;
-  border: 1px solid #30384f;
-  background: #151622;
 }
 
-.edit-box,
-.new-token-box {
-  display: grid;
-  gap: 12px;
-  padding: 12px;
-  border: 1px solid #30384f;
-  background: #151622;
-}
-
-.status-row {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.token-panel {
-  max-width: 840px;
-}
-
-.admin-stack {
-  max-width: 1120px;
-}
-
-.admin-grid {
-  display: grid;
-  grid-template-columns: minmax(260px, 1fr) 120px 120px minmax(160px, 220px);
-  gap: 12px;
-  align-items: center;
-  padding: 11px 10px;
-  border-bottom: 1px solid #30384f;
-}
-
-.admin-grid > span {
-  min-width: 0;
+.identity-cell {
   display: grid;
   gap: 4px;
+  min-width: 0;
 }
 
-.admin-grid strong,
-.admin-grid small {
+.identity-cell strong,
+.identity-cell small {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.admin-grid-head {
-  color: #9ba7cb;
-  font-size: 12px;
-  text-transform: uppercase;
+code {
+  max-width: 100%;
+  overflow: auto;
 }
 
-.diagnostics-row {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  flex-wrap: wrap;
-  padding: 10px;
-  border: 1px solid #30384f;
-  background: #151622;
-}
-
-.diagnostics-row span {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.checks {
-  display: flex;
-  gap: 14px;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.empty-state {
-  display: grid;
-  gap: 6px;
-  padding: 18px;
-  border: 1px dashed #465173;
-  color: #9ba7cb;
-}
-
-.empty-state strong {
-  color: #d6ddff;
+.error {
+  margin: 0;
+  color: #f7768e;
 }
 
 .empty-state.large {
@@ -402,11 +189,6 @@
   text-align: center;
 }
 
-.error {
-  margin: 0;
-  color: #ff7b8d;
-}
-
 @media (max-width: 1260px) {
   .workspace-grid,
   .metrics-row {
@@ -424,37 +206,18 @@
     padding-top: 12px;
   }
 
-  .app-header,
   .session-box {
     align-items: flex-start;
     flex-direction: column;
   }
 
-  .field-row,
-  .secret-row,
-  .audit-row,
-  .admin-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .row-meta {
-    justify-items: start;
-  }
-
-  .description-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .form-grid.two {
+  .form-grid.two,
+  .create-field-row,
+  .create-access-grid {
     grid-template-columns: 1fr;
   }
 
   .create-modal-body {
     width: calc(100vw - 28px);
   }
-
-  .create-field-row,
-  .create-access-grid {
-    grid-template-columns: 1fr;
-  }
 }