diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 326738f..993963b 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -283,6 +283,19 @@
   fillEditForm(secret);
 }
 
+function openEditMetadata() {
+  if (!selected.value) return;
+  fillEditForm(selected.value);
+  editing.value = true;
+}
+
+function cancelEditMetadata() {
+  if (selected.value) {
+    fillEditForm(selected.value);
+  }
+  editing.value = false;
+}
+
 async function loadSecrets() {
   loading.value = true;
   error.value = "";
@@ -613,49 +626,11 @@
               <GnBadge :variant="selected.status === 'actual' ? 'success' : 'warning'">
                 {{ selected.status }}
               </GnBadge>
-              <GnButton size="sm" icon="ph ph-pencil-simple" @click="editing = !editing">Edit</GnButton>
+              <GnButton size="sm" icon="ph ph-pencil-simple" @click="openEditMetadata">Edit</GnButton>
             </div>
           </template>
         </GnToolbar>
         <template v-if="selected">
-          <section v-if="editing" class="workspace-surface inset-surface">
-            <GnToolbar title="Edit metadata" />
-            <div class="form-grid two">
-              <GnInput v-model="editForm.title" label="Title" icon="ph ph-text-t" />
-              <GnInput v-model="editForm.purpose" label="Purpose" icon="ph ph-target" />
-              <GnInput v-model="editForm.category" label="Category" icon="ph ph-folder" />
-              <GnInput v-model="editForm.tags" label="Tags" icon="ph ph-tag" />
-              <GnInput v-model="editForm.source" label="Source" icon="ph ph-signpost" />
-              <GnInput v-model="editForm.notes" label="Notes" icon="ph ph-note-pencil" maxlength="140" />
-            </div>
-            <div class="controls-line">
-              <GnButton
-                :variant="editForm.status === 'actual' ? 'primary' : 'secondary'"
-                @click="editForm.status = 'actual'"
-              >
-                Actual
-              </GnButton>
-              <GnButton
-                :variant="editForm.status === 'outdated' ? 'primary' : 'secondary'"
-                @click="editForm.status = 'outdated'"
-              >
-                Outdated
-              </GnButton>
-              <GnCheckbox v-model="editForm.archived" label="Archived" />
-            </div>
-            <div class="controls-line">
-              <GnCheckbox v-model="editForm.allow_ui" label="UI" />
-              <GnCheckbox v-model="editForm.allow_rest_api" label="REST API" />
-              <GnCheckbox v-model="editForm.allow_mcp" label="MCP" />
-            </div>
-            <div class="actions">
-              <GnButton variant="primary" icon="ph ph-floppy-disk" @click="saveSecretMetadata">
-                Save metadata
-              </GnButton>
-              <GnButton variant="secondary" @click="editing = false">Cancel</GnButton>
-            </div>
-          </section>
-
           <GnDescriptionList :items="selectedDetails" />
 
           <GnToolbar>
@@ -1002,6 +977,62 @@
       </template>
     </GnModal>
 
+    <GnModal v-model:open="editing" title="Edit metadata" @close="cancelEditMetadata">
+      <div v-if="selected" class="create-modal-body">
+        <section class="modal-section">
+          <div class="form-grid two">
+            <GnInput v-model="editForm.title" label="Title" icon="ph ph-text-t" />
+            <GnInput v-model="editForm.purpose" label="Purpose" icon="ph ph-target" />
+            <GnInput v-model="editForm.category" label="Category" icon="ph ph-folder" />
+            <GnInput v-model="editForm.tags" label="Tags" icon="ph ph-tag" />
+            <GnInput v-model="editForm.source" label="Source" icon="ph ph-signpost" />
+            <GnInput v-model="editForm.notes" label="Notes" icon="ph ph-note-pencil" maxlength="140" />
+          </div>
+        </section>
+        <section class="modal-section">
+          <GnToolbar title="Status" meta="Metadata shown in lists and filters" />
+          <div class="controls-line">
+            <GnButton
+              :variant="editForm.status === 'actual' ? 'primary' : 'secondary'"
+              @click="editForm.status = 'actual'"
+            >
+              Actual
+            </GnButton>
+            <GnButton
+              :variant="editForm.status === 'outdated' ? 'primary' : 'secondary'"
+              @click="editForm.status = 'outdated'"
+            >
+              Outdated
+            </GnButton>
+            <GnCheckbox v-model="editForm.archived" label="Archived" />
+          </div>
+        </section>
+        <section class="modal-section">
+          <GnToolbar title="Access" meta="Global availability channels for this secret" />
+          <div class="access-grid">
+            <div class="access-option">
+              <GnCheckbox v-model="editForm.allow_ui" label="UI" />
+              <div class="input-info">Visible in the user interface.</div>
+            </div>
+            <div class="access-option">
+              <GnCheckbox v-model="editForm.allow_rest_api" label="REST API" />
+              <div class="input-info">Available to external clients using API tokens.</div>
+            </div>
+            <div class="access-option">
+              <GnCheckbox v-model="editForm.allow_mcp" label="MCP" />
+              <div class="input-info">Available to MCP clients when token scopes allow it.</div>
+            </div>
+          </div>
+        </section>
+      </div>
+      <template #actions>
+        <GnButton variant="secondary" @click="cancelEditMetadata">Cancel</GnButton>
+        <GnButton variant="primary" icon="ph ph-floppy-disk" @click="saveSecretMetadata">
+          Save metadata
+        </GnButton>
+      </template>
+    </GnModal>
+
     <GnModal v-model:open="showDeleteConfirm" title="Delete all data">
       <p>This permanently removes all secrets and versions. Audit records remain.</p>
       <template #actions>