diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index c942afd..7b1e977 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -12,7 +12,6 @@
   GnIconButton,
   GnInput,
   GnMetricCard,
-  GnModal,
   GnPageHeader,
   GnSearchField,
   GnTable,
@@ -22,6 +21,7 @@
 } from "gnexus-ui-kit/vue";
 
 import { api } from "./api";
+import GnModal from "./components/GnModal.vue";
 
 const baseTabs = [
   { id: "secrets", label: "Secrets" },
@@ -100,7 +100,6 @@
   mcp: true
 });
 
-const visibleFields = computed(() => selected.value?.fields || []);
 const tabs = computed(() =>
   me.value?.role === "admin" ? [...baseTabs, { id: "admin", label: "Admin" }] : baseTabs
 );
@@ -130,13 +129,6 @@
     }
   ];
 });
-const visibleFieldItems = computed(() =>
-  visibleFields.value.map((field) => ({
-    title: field.name,
-    subtitle: field.encrypted ? "encrypted" : "plain",
-    raw: field
-  }))
-);
 const revealedFieldItems = computed(() =>
   (revealed.value?.fields || []).map((field) => ({
     title: field.name,
@@ -647,13 +639,6 @@
 
           <GnDescriptionList :items="selectedDetails" />
 
-          <GnActionList :items="visibleFieldItems">
-            <template #controls="{ item }">
-              <code>••••••</code>
-              <GnButton size="sm" icon="ph ph-copy" @click="copyField(selected, item.raw)">Copy</GnButton>
-            </template>
-          </GnActionList>
-
           <GnToolbar>
             <template #actions>
               <GnButton variant="primary" icon="ph ph-eye" @click="reveal(selected)">Reveal</GnButton>
@@ -693,6 +678,11 @@
             <GnActionList :items="revealedFieldItems">
               <template #controls="{ item }">
                 <code>{{ item.raw.value }}</code>
+                <GnIconButton
+                  icon="ph ph-copy"
+                  label="Copy field value"
+                  @click="copyField(selected, item.raw)"
+                />
               </template>
             </GnActionList>
           </section>
diff --git a/frontend/src/components/GnModal.vue b/frontend/src/components/GnModal.vue
new file mode 100644
index 0000000..9f5774f
--- /dev/null
+++ b/frontend/src/components/GnModal.vue
@@ -0,0 +1,139 @@
+<script setup>
+import { nextTick, onBeforeUnmount, ref, watch } from "vue";
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  title: { type: String, default: "" },
+  closeOnBackdrop: { type: Boolean, default: true }
+});
+
+const emit = defineEmits(["update:open", "close"]);
+
+const titleId = `gn-modal-title-${Math.random().toString(36).slice(2)}`;
+const dialogRef = ref(null);
+const rendered = ref(false);
+const stateClass = ref("");
+let closeTimer = null;
+let previousFocus = null;
+
+function trapFocus(event) {
+  if (event.key !== "Tab" || !dialogRef.value) return;
+
+  const focusable = Array.from(
+    dialogRef.value.querySelectorAll(
+      'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    )
+  );
+
+  if (!focusable.length) return;
+
+  const first = focusable[0];
+  const last = focusable[focusable.length - 1];
+
+  if (event.shiftKey && document.activeElement === first) {
+    event.preventDefault();
+    last.focus();
+  } else if (!event.shiftKey && document.activeElement === last) {
+    event.preventDefault();
+    first.focus();
+  }
+}
+
+function onKeydown(event) {
+  if (event.key === "Escape") {
+    event.preventDefault();
+    requestClose();
+    return;
+  }
+
+  trapFocus(event);
+}
+
+function requestClose() {
+  emit("update:open", false);
+  emit("close");
+}
+
+function openModal() {
+  clearTimeout(closeTimer);
+  previousFocus = document.activeElement;
+  rendered.value = true;
+  stateClass.value = "";
+  document.addEventListener("keydown", onKeydown);
+
+  nextTick(() => {
+    requestAnimationFrame(() => {
+      stateClass.value = "a-show";
+      dialogRef.value?.focus();
+    });
+  });
+}
+
+function closeModal() {
+  document.removeEventListener("keydown", onKeydown);
+  previousFocus?.focus?.();
+  previousFocus = null;
+
+  if (!rendered.value) return;
+
+  clearTimeout(closeTimer);
+  stateClass.value = "a-hide";
+  closeTimer = setTimeout(() => {
+    rendered.value = false;
+    stateClass.value = "";
+  }, 300);
+}
+
+watch(
+  () => props.open,
+  (open) => {
+    if (open) {
+      openModal();
+    } else {
+      closeModal();
+    }
+  },
+  { immediate: true }
+);
+
+onBeforeUnmount(() => {
+  clearTimeout(closeTimer);
+  document.removeEventListener("keydown", onKeydown);
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="rendered" class="modal" :class="stateClass" :aria-hidden="props.open ? 'false' : 'true'">
+      <div class="modal-backdrop" @click="props.closeOnBackdrop && requestClose()" />
+      <div
+        ref="dialogRef"
+        class="modal-dialog"
+        role="dialog"
+        aria-modal="true"
+        :aria-labelledby="titleId"
+        tabindex="-1"
+      >
+        <header class="modal-header">
+          <h4 :id="titleId" class="modal-title">
+            <slot name="title">{{ props.title }}</slot>
+          </h4>
+          <button class="btn-icon modal-close" type="button" aria-label="Close" @click="requestClose">
+            <i class="ph ph-x" aria-hidden="true" />
+          </button>
+        </header>
+        <div class="modal-panel">
+          <div class="modal-body">
+            <slot />
+          </div>
+          <footer v-if="$slots.footer || $slots.actions" class="modal-footer">
+            <slot name="footer" />
+            <div v-if="$slots.actions" class="actions">
+              <slot name="actions" :close="requestClose" />
+            </div>
+          </footer>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 6fe177e..b0c5101 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -76,6 +76,18 @@
     box-shadow: none;
     transform: none;
   }
+
+  .btn-icon:not(.without-hover):hover .ph,
+  .btn-icon:not(.without-hover):hover .ph-bold {
+    transform: none;
+  }
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .btn-icon:not(.without-hover):active .ph,
+  .btn-icon:not(.without-hover):active .ph-bold {
+    transform: none;
+  }
 }
 
 .modal.a-show .modal-backdrop {