diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 248e057..120a489 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,7 +1,6 @@
 <script setup>
-import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
+import { computed, h, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
 import {
-  GnActionList,
   GnAlert,
   GnBadge,
   GnButton,
@@ -19,7 +18,6 @@
   GnMetricCard,
   GnModal,
   GnNavigationShell,
-  GnPagination,
   GnSearchField,
   GnSkeleton,
   GnStatusCard,
@@ -45,6 +43,68 @@
   refreshGateState
 } from "./biometric";
 
+// Ellipsised pagination: with 20+ pages GnPagination printed every page
+// number in an unwrappable row. Same props/emits/looks as the kit's
+// GnPagination, but long runs collapse to "1 2 3 … 22".
+const AppPagination = {
+  props: {
+    page: { type: Number, required: true },
+    totalPages: { type: Number, required: true },
+    ariaLabel: { type: String, default: "Pagination" }
+  },
+  emits: ["update:page"],
+  setup(props, { emit }) {
+    const setPage = (page) => {
+      if (page >= 1 && page <= props.totalPages && page !== props.page) {
+        emit("update:page", page);
+      }
+    };
+    return () => {
+      const pages = paginationRange(props.page, props.totalPages);
+      return h("nav", { class: "pagination", "aria-label": props.ariaLabel }, [
+        h("button", {
+          class: "pagination-item",
+          type: "button",
+          disabled: props.page <= 1,
+          onClick: () => setPage(props.page - 1)
+        }, [h("i", { class: "ph ph-arrow-left" })]),
+        pages.map((page) =>
+          page === "…"
+            ? h("span", { class: "pagination-ellipsis" }, "…")
+            : h("button", {
+                class: ["pagination-item", { "pagination-item-active": page === props.page }],
+                type: "button",
+                "aria-current": page === props.page ? "page" : undefined,
+                onClick: () => setPage(page)
+              }, String(page))
+        ),
+        h("button", {
+          class: "pagination-item",
+          type: "button",
+          disabled: props.page >= props.totalPages,
+          onClick: () => setPage(props.page + 1)
+        }, [h("i", { class: "ph ph-arrow-right" })])
+      ]);
+    };
+  }
+};
+
+function paginationRange(page, totalPages) {
+  if (totalPages <= 7) {
+    return Array.from({ length: totalPages }, (_, index) => index + 1);
+  }
+  const shown = new Set([1, totalPages, page - 1, page, page + 1]);
+  const sorted = [...shown].filter((p) => p >= 1 && p <= totalPages).sort((a, b) => a - b);
+  const range = [];
+  let previous = 0;
+  for (const p of sorted) {
+    if (p - previous > 1) range.push("…");
+    range.push(p);
+    previous = p;
+  }
+  return range;
+}
+
 const baseTabs = [
   { id: "secrets", label: "Secrets" },
   { id: "history", label: "History" },
@@ -300,11 +360,17 @@
   tokens.value
     .filter((token) => !token.revoked_at)
     .map((token) => ({
-      title: token.name,
-      subtitle: token.scopes.join(", "),
+      key: token.public_id,
+      name: token.name,
+      scopes: token.scopes,
       raw: token
     }))
 );
+const tokenColumns = [
+  { key: "name", label: "Name" },
+  { key: "scopes", label: "Scopes" },
+  { key: "actions", label: "" }
+];
 const diagnosticsItems = computed(() => [
   { label: "/health", key: "health", value: diagnostics.health },
   { label: "/ready", key: "ready", value: diagnostics.ready }
@@ -1187,6 +1253,7 @@
                 >
                   {{ row.title }}
                 </strong>
+                <span class="secret-title-sub">{{ row.category }}</span>
               </template>
               <template #cell-status="{ row }">
                 <GnBadge :variant="row.status === 'actual' ? 'success' : 'warning'">
@@ -1197,7 +1264,7 @@
                 <GnIconButton icon="ph ph-caret-right" label="Open secret" @click="selectSecret(row.raw)" />
               </template>
             </GnTable>
-            <GnPagination
+            <AppPagination
               v-if="total > secretsLimit"
               :page="secretsPage"
               :total-pages="Math.ceil(total / secretsLimit)"
@@ -1339,7 +1406,7 @@
               text="Activity will appear here once actions are performed."
               icon="ph ph-list-checks"
             />
-            <GnPagination
+            <AppPagination
               v-if="!auditLoading && auditTotal > auditLimit"
               :page="auditPage"
               :total-pages="Math.ceil(auditTotal / auditLimit)"
@@ -1358,13 +1425,24 @@
               </template>
             </GnToolbar>
             <GnSkeleton v-if="tokensLoading" />
-            <GnActionList v-else-if="tokenItems.length" :items="tokenItems">
-              <template #controls="{ item }">
-                <GnButton size="sm" variant="danger" icon="ph ph-trash" @click="confirmRevokeToken(item.raw)">
+            <GnTable
+              v-else-if="tokenItems.length"
+              :columns="tokenColumns"
+              :rows="tokenItems"
+              class="tokens-table"
+            >
+              <template #cell-name="{ row }">
+                <strong>{{ row.name }}</strong>
+              </template>
+              <template #cell-scopes="{ row }">
+                {{ row.scopes.join(", ") }}
+              </template>
+              <template #cell-actions="{ row }">
+                <GnButton size="sm" variant="danger" icon="ph ph-trash" @click="confirmRevokeToken(row.raw)">
                   Revoke
                 </GnButton>
               </template>
-            </GnActionList>
+            </GnTable>
             <GnEmptyState
               v-else
               title="No tokens"
@@ -1549,7 +1627,7 @@
               text="Users will appear here once they sign in."
               icon="ph ph-users"
             />
-            <GnPagination
+            <AppPagination
               v-if="adminUsersTotal > adminUsersLimit"
               :page="adminUsersPage"
               :total-pages="Math.ceil(adminUsersTotal / adminUsersLimit)"
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 948f4fc..8f98c16 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -66,9 +66,29 @@
 }
 
 .settings-metrics {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
   gap: 15px;
-  flex-wrap: wrap;
+}
+
+/* The kit caps metric cards with width:max-content — in a grid column let
+   them stretch to the full track instead (mobile keeps true full width). */
+.settings-metrics .metric-card {
+  width: 100%;
+  max-width: none;
+}
+
+/* Pagination overflow: long page runs collapse to 1, 2, 3 … 22 */
+.pagination .pagination-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 34px;
+  height: 34px;
+  color: #787c99;
+  font-weight: 600;
+  line-height: 1;
+  user-select: none;
 }
 
 .list-panel {
@@ -147,6 +167,7 @@
 
 .danger-zone {
   border: 2px solid rgba(247, 118, 142, 0.28);
+  border-radius: 6px;
   background: rgba(247, 118, 142, 0.04);
   padding: 15px;
 }
@@ -440,6 +461,12 @@
   cursor: pointer;
 }
 
+/* Category text under the title in the secrets table; mobile-only —
+   see the 720px block (desktop keeps its own Category column). */
+.secret-title-sub {
+  display: none;
+}
+
 .secret-title-link:hover {
   color: var(--gn-color-secondary);
 }
@@ -467,6 +494,63 @@
     grid-template-columns: 1fr;
   }
 
+  /* Revealed fields stack to one column; values wrap instead of stretching
+     the page into a horizontal scroll. */
+  .revealed-fields-list.list-actions .list-item {
+    grid-template-columns: 1fr;
+    gap: 6px;
+  }
+
+  .secret-value {
+    white-space: normal;
+    min-width: 0;
+    width: 100%;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+  }
+
+  /* Secrets table becomes a card list: no thead, purpose and category
+     columns drop out (category rides under the title), rows stack. */
+  .secrets-table {
+    display: block;
+  }
+
+  .secrets-table .table-head {
+    display: none;
+  }
+
+  .secrets-table .table-body,
+  .secrets-table .table-row,
+  .secrets-table .table-row > td {
+    display: block;
+    width: auto;
+  }
+
+  .secrets-table .table-row:not(:last-child) {
+    border-bottom: 2px solid rgba(192, 202, 245, 0.08);
+  }
+
+  .secrets-table .table-row > td {
+    padding: 4px 0;
+  }
+
+  .secrets-table .table-row > td:nth-child(2),
+  .secrets-table .table-row > td:nth-child(3) {
+    display: none;
+  }
+
+  .secrets-table td:last-child {
+    text-align: left;
+  }
+
+  .secret-title-sub {
+    display: block;
+    margin-top: 3px;
+    font-weight: 400;
+    font-size: 12px;
+    color: #787c99;
+  }
+
   .form-grid.two,
   .create-field-row,
   .create-access-grid {