diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index d1da1e4..5afef37 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -42,6 +42,7 @@
 const total = ref(0);
 const query = ref("");
 const selected = ref(null);
+const secretsView = ref("list");
 const revealed = ref(null);
 const revealedVisibleFields = ref(new Set());
 const versions = ref([]);
@@ -303,6 +304,7 @@
 
 function selectSecret(secret) {
   selected.value = secret;
+  secretsView.value = "detail";
   revealed.value = null;
   revealedVersion.value = null;
   editing.value = false;
@@ -310,6 +312,10 @@
   fillEditForm(secret);
 }
 
+function showSecretsList() {
+  secretsView.value = "list";
+}
+
 function openEditMetadata() {
   if (!selected.value) return;
   fillEditForm(selected.value);
@@ -419,6 +425,7 @@
   await api.deleteSecret(pendingDeleteSecret.value.id);
   pendingDeleteSecret.value = null;
   selected.value = null;
+  secretsView.value = "list";
   revealed.value = null;
   await loadSecrets();
 }
@@ -626,8 +633,8 @@
       </section>
     </section>
 
-    <section v-if="activeTab === 'secrets'" class="workspace-grid">
-      <section class="workspace-surface list-panel">
+    <section v-if="activeTab === 'secrets'" class="secrets-page">
+      <section v-if="secretsView === 'list'" class="workspace-surface list-panel">
         <p v-if="error" class="error">{{ error }}</p>
         <GnToolbar title="Secrets" :meta="loading ? 'Loading' : `${total} records`">
           <template #actions>
@@ -663,29 +670,25 @@
         />
       </section>
 
-      <section class="workspace-surface detail-panel">
+      <section v-else class="workspace-surface detail-panel">
         <GnToolbar :title="selected?.title || 'No secret selected'">
           <template #actions>
             <div v-if="selected" class="card-title-actions">
+              <GnButton size="sm" icon="ph ph-arrow-left" @click="showSecretsList">Back</GnButton>
               <GnBadge :variant="selected.status === 'actual' ? 'success' : 'warning'">
                 {{ selected.status }}
               </GnBadge>
               <GnIconButton icon="ph ph-pencil-simple" label="Edit metadata" @click="openEditMetadata" />
-            </div>
-          </template>
-        </GnToolbar>
-        <template v-if="selected">
-          <GnDescriptionList :items="selectedDetails" />
-
-          <GnToolbar title="Actions">
-            <template #actions>
               <GnDropdown :items="secretActionItems">
                 <template #trigger="{ toggle }">
                   <GnIconButton icon="ph ph-dots-three-outline" label="Secret actions" @click="toggle" />
                 </template>
               </GnDropdown>
-            </template>
-          </GnToolbar>
+            </div>
+          </template>
+        </GnToolbar>
+        <template v-if="selected">
+          <GnDescriptionList :items="selectedDetails" />
 
           <section v-if="editFields" class="workspace-surface inset-surface">
             <GnToolbar title="Edit fields" />
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index a01f89e..5deb227 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -118,11 +118,11 @@
   min-width: 220px;
 }
 
-.workspace-grid {
+.secrets-page {
   display: grid;
-  grid-template-columns: minmax(340px, 420px) minmax(680px, 1fr);
   gap: 15px;
   align-items: start;
+  max-width: 1180px;
 }
 
 .panel-stack {
@@ -132,7 +132,6 @@
 }
 
 .list-panel {
-  max-height: calc(100vh - 220px);
   overflow: auto;
 }
 
@@ -308,7 +307,6 @@
 }
 
 @media (max-width: 1260px) {
-  .workspace-grid,
   .metrics-row {
     grid-template-columns: 1fr;
   }