diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 993963b..b73bf33 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -7,6 +7,7 @@
   GnButton,
   GnCheckbox,
   GnDescriptionList,
+  GnDropdown,
   GnEmptyState,
   GnFileUpload,
   GnIconButton,
@@ -138,6 +139,21 @@
     raw: field
   }))
 );
+const secretActionItems = computed(() => {
+  if (!selected.value) return [];
+  return [
+    { label: "Reveal", icon: "ph ph-eye", onSelect: () => reveal(selected.value) },
+    { label: "Versions", icon: "ph ph-clock-counter-clockwise", onSelect: () => loadVersions(selected.value) },
+    { label: "Edit fields", icon: "ph ph-list-plus", onSelect: () => toggleEditFields() },
+    {
+      label: `Mark ${selected.value.status === "actual" ? "outdated" : "actual"}`,
+      icon: "ph ph-arrows-clockwise",
+      onSelect: () => setStatus(selected.value.status === "actual" ? "outdated" : "actual")
+    },
+    { label: "Archive", icon: "ph ph-archive", onSelect: () => archiveSelected() },
+    { label: "Delete", icon: "ph ph-trash", danger: true, onSelect: () => confirmDeleteSecret(selected.value) }
+  ];
+});
 const versionItems = computed(() =>
   versions.value.map((version) => ({
     title: `Version ${version.version_number}`,
@@ -296,6 +312,10 @@
   editing.value = false;
 }
 
+function toggleEditFields() {
+  editFields.value = !editFields.value;
+}
+
 async function loadSecrets() {
   loading.value = true;
   error.value = "";
@@ -626,28 +646,20 @@
               <GnBadge :variant="selected.status === 'actual' ? 'success' : 'warning'">
                 {{ selected.status }}
               </GnBadge>
-              <GnButton size="sm" icon="ph ph-pencil-simple" @click="openEditMetadata">Edit</GnButton>
+              <GnIconButton icon="ph ph-pencil-simple" label="Edit metadata" @click="openEditMetadata" />
             </div>
           </template>
         </GnToolbar>
         <template v-if="selected">
           <GnDescriptionList :items="selectedDetails" />
 
-          <GnToolbar>
+          <GnToolbar title="Actions">
             <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>
+              <GnDropdown :items="secretActionItems">
+                <template #trigger="{ toggle }">
+                  <GnIconButton icon="ph ph-dots-three-outline" label="Secret actions" @click="toggle" />
+                </template>
+              </GnDropdown>
             </template>
           </GnToolbar>