diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index c2a22c0..d1da1e4 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -110,14 +110,23 @@
 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(() =>
+const secretRows = computed(() =>
   secrets.value.map((secret) => ({
     id: secret.id,
     title: secret.title,
-    subtitle: secret.purpose || secret.category || "No purpose",
+    purpose: secret.purpose || "Not set",
+    category: secret.category || "uncategorized",
+    status: secret.status,
     raw: secret
   }))
 );
+const secretColumns = [
+  { key: "title", label: "Title" },
+  { key: "purpose", label: "Purpose" },
+  { key: "category", label: "Category" },
+  { key: "status", label: "Status" },
+  { key: "actions", label: "" }
+];
 const selectedDetails = computed(() => {
   if (!selected.value) return [];
   return [
@@ -627,23 +636,25 @@
             </GnButton>
           </template>
         </GnToolbar>
-        <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>
+        <GnTable
+          v-if="secrets.length"
+          :columns="secretColumns"
+          :rows="secretRows"
+          class="secrets-table"
+          empty-text="No secrets yet"
+        >
+          <template #cell-title="{ row }">
+            <strong :class="{ 'selected-secret-title': selected?.id === row.id }">{{ row.title }}</strong>
           </template>
-          <template #controls="{ item }">
-            <GnBadge :variant="item.raw.status === 'actual' ? 'success' : 'warning'">
-              {{ item.raw.status }}
+          <template #cell-status="{ row }">
+            <GnBadge :variant="row.status === 'actual' ? 'success' : 'warning'">
+              {{ row.status }}
             </GnBadge>
-            <small>{{ item.raw.category || "uncategorized" }}</small>
           </template>
-        </GnActionList>
+          <template #cell-actions="{ row }">
+            <GnIconButton icon="ph ph-arrow-square-out" label="Open secret" @click="selectSecret(row.raw)" />
+          </template>
+        </GnTable>
         <GnEmptyState
           v-if="!secrets.length"
           title="No secrets yet"
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index f4944fa..a01f89e 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -98,6 +98,14 @@
   animation: gnexus-creds-modal-dialog 0.22s ease-out both;
 }
 
+.modal.a-hide .modal-backdrop {
+  animation: gnexus-creds-modal-backdrop-out 0.22s ease-in both;
+}
+
+.modal.a-hide .modal-dialog {
+  animation: gnexus-creds-modal-dialog-out 0.28s ease-in both;
+}
+
 .search-line {
   display: flex;
   gap: 10px;
@@ -128,6 +136,20 @@
   overflow: auto;
 }
 
+.secrets-table {
+  min-width: 100%;
+}
+
+.secrets-table th:last-child,
+.secrets-table td:last-child {
+  width: 44px;
+  text-align: right;
+}
+
+.selected-secret-title {
+  color: #7aa2f7;
+}
+
 .card-title-actions,
 .controls-line,
 .actions {
@@ -339,3 +361,25 @@
     transform: translateY(0);
   }
 }
+
+@keyframes gnexus-creds-modal-backdrop-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes gnexus-creds-modal-dialog-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(-18px);
+  }
+}