diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 8f98c16..15a19b0 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -509,8 +509,10 @@
     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 becomes a compact card list: no thead, purpose and
+     category columns drop out (category rides under the title). Each row
+     is a two-line grid card — title on top spanning full width, status
+     badge bottom-left and the open chevron bottom-right. */
   .secrets-table {
     display: block;
   }
@@ -519,30 +521,48 @@
     display: none;
   }
 
-  .secrets-table .table-body,
-  .secrets-table .table-row,
-  .secrets-table .table-row > td {
+  .secrets-table .table-body {
     display: block;
+  }
+
+  .secrets-table .table-row {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    column-gap: 10px;
+    padding: 10px 0;
+  }
+
+  /* Kit td rules (padding + border-bottom) would stripe every stacked
+     td into its own "sheet" — drop them and keep only the row separator. */
+  .secrets-table .table-row > td {
+    border-bottom: 0;
+    padding: 0;
     width: auto;
   }
 
+  .secrets-table .table-row > td:nth-child(1) {
+    grid-column: 1 / -1;
+    padding-bottom: 8px;
+  }
+
+  .secrets-table .table-row > td:nth-child(4) {
+    justify-self: start;
+  }
+
+  .secrets-table .table-row > td:nth-child(5) {
+    justify-self: end;
+  }
+
   .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;