diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index b6e15ff..c6e43f5 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -2,9 +2,13 @@
 import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
 import {
   GnActionList,
+  GnAlert,
   GnBadge,
   GnButton,
-  GnCheckbox,
+  GnChip,
+  GnChipGroup,
+  GnConfirmDialog,
+  GnCopyButton,
   GnDescriptionList,
   GnDropdown,
   GnEmptyState,
@@ -17,11 +21,16 @@
   GnPagination,
   GnSearchField,
   GnSkeleton,
+  GnStatusCard,
+  GnSwitch,
   GnTable,
+  GnTagInput,
   GnTextarea,
   GnTimeline,
   GnToastProvider,
-  GnToolbar
+  GnToolbar,
+  GnTooltip,
+  GnUserCard
 } from "gnexus-ui-kit/vue";
 
 import { api } from "./api";
@@ -51,7 +60,6 @@
 const loading = ref(false);
 const error = ref("");
 const toastProvider = ref(null);
-const copiedFieldKey = ref("");
 const secrets = ref([]);
 const total = ref(0);
 const query = ref("");
@@ -108,7 +116,7 @@
   category: "",
   source: "",
   notes: "",
-  tags: "",
+  tags: [],
   allow_ui: true,
   allow_rest_api: true,
   allow_mcp: false
@@ -122,7 +130,7 @@
   category: "",
   source: "",
   notes: "",
-  tags: "",
+  tags: [],
   status: "actual",
   archived: false,
   allow_ui: true,
@@ -383,7 +391,7 @@
   form.category = "";
   form.source = "";
   form.notes = "";
-  form.tags = "";
+  form.tags = [];
   form.allow_ui = true;
   form.allow_rest_api = true;
   form.allow_mcp = false;
@@ -495,7 +503,7 @@
   editForm.category = secret.category || "";
   editForm.source = secret.source || "";
   editForm.notes = secret.notes || "";
-  editForm.tags = secret.tags?.join(", ") || "";
+  editForm.tags = secret.tags || [];
   editForm.status = secret.status || "actual";
   editForm.archived = Boolean(secret.archived);
   editForm.allow_ui = Boolean(secret.allow_ui);
@@ -586,7 +594,7 @@
     category: form.category || null,
     source: form.source || null,
     notes: form.notes || null,
-    tags: form.tags.split(",").map((tag) => tag.trim()).filter(Boolean),
+    tags: form.tags,
     allow_ui: form.allow_ui,
     allow_rest_api: form.allow_rest_api,
     allow_mcp: form.allow_mcp,
@@ -605,7 +613,7 @@
     category: editForm.category || null,
     source: editForm.source || null,
     notes: editForm.notes || null,
-    tags: editForm.tags.split(",").map((tag) => tag.trim()).filter(Boolean),
+    tags: editForm.tags,
     status: editForm.status,
     archived: editForm.archived,
     allow_ui: editForm.allow_ui,
@@ -659,18 +667,6 @@
   revealedVisibleFields.value = new Set();
 }
 
-async function copyValue(value, key) {
-  if (!value) return;
-  await navigator.clipboard.writeText(value);
-  toastProvider.value?.success({ title: "Copied", text: "Value copied to clipboard.", lifetime: 1800 });
-  if (key) {
-    copiedFieldKey.value = key;
-    setTimeout(() => {
-      if (copiedFieldKey.value === key) copiedFieldKey.value = "";
-    }, 2000);
-  }
-}
-
 function maskValue(value) {
   return "*".repeat(Math.max(8, String(value || "").length));
 }
@@ -1009,7 +1005,7 @@
 
         <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>
+            <GnAlert v-if="error" variant="danger" role="alert">{{ error }}</GnAlert>
             <GnToolbar title="Secrets" :meta="loading ? 'Loading' : `${total} records`">
               <template #actions>
                 <GnSearchField
@@ -1074,14 +1070,12 @@
                 show-back
                 :secret="selected"
                 :fields="revealed?.fields"
-                :copied-field-key="copiedFieldKey"
                 :visible-field-keys="revealedVisibleFields"
                 @back="showSecretsList"
                 @reveal="reveal(selected)"
                 @hide="revealed.value = null"
                 @edit-metadata="openEditMetadata"
                 @toggle-field-visibility="toggleRevealedField"
-                @copy-field="({ value, key }) => copyValue(value, key)"
                 @status-change="setStatus"
                 @archive="archiveSelected"
                 @delete="confirmDeleteSecret(selected)"
@@ -1148,10 +1142,8 @@
                   :show-actions="false"
                   :secret="revealedVersion"
                   :fields="revealedVersion.fields"
-                  :copied-field-key="copiedFieldKey"
                   :visible-field-keys="revealedVisibleFields"
                   @toggle-field-visibility="toggleRevealedField"
-                  @copy-field="({ value, key }) => copyValue(value, key)"
                 />
               </template>
             </GnTimeline>
@@ -1249,7 +1241,7 @@
               accept="application/json,.json"
               @change="handleImportFiles"
             />
-            <p v-if="importError" class="error">{{ importError }}</p>
+            <GnAlert v-if="importError" variant="danger" role="alert">{{ importError }}</GnAlert>
             <div v-if="importPreview" class="import-preview">
               <GnBadge variant="success">{{ importPreview.secrets?.length || 0 }} secrets ready</GnBadge>
               <span class="muted">{{ importFile?.name }}</span>
@@ -1309,20 +1301,28 @@
               </template>
             </GnDescriptionList>
             <GnButton size="sm" icon="ph ph-heartbeat" @click="loadDiagnostics">Check diagnostics</GnButton>
-            <GnTable :columns="adminColumns" :rows="adminUsers" empty-text="No users loaded">
-              <template #cell-user="{ row }">
-                <span class="identity-cell">
-                  <strong>{{ row.email }}</strong>
-                  <small>{{ row.display_name || row.id }}</small>
-                </span>
-              </template>
-              <template #cell-status="{ value }">
-                <GnBadge :variant="value === 'enabled' ? 'success' : 'danger'">{{ value }}</GnBadge>
-              </template>
-              <template #cell-role="{ value }">
-                <GnBadge :variant="value === 'admin' ? 'warning' : 'info'">{{ value }}</GnBadge>
-              </template>
-            </GnTable>
+            <div v-if="adminUsers.length" class="admin-user-cards">
+              <GnUserCard
+                v-for="user in adminUsers"
+                :key="user.id"
+                :name="user.display_name || user.email"
+                :email="user.email"
+                :role="user.role"
+                :avatar="{ initials: (user.display_name || user.email).split(/[\s._-]+/).filter(Boolean).slice(0, 2).map(w => w[0].toUpperCase()).join(''), size: 'sm' }"
+                :compact="true"
+              >
+                <template #actions>
+                  <GnBadge :variant="user.status === 'enabled' ? 'success' : 'danger'">{{ user.status }}</GnBadge>
+                  <GnBadge :variant="user.role === 'admin' ? 'warning' : 'info'">{{ user.role }}</GnBadge>
+                </template>
+              </GnUserCard>
+            </div>
+            <GnEmptyState
+              v-else
+              title="No users"
+              text="Users will appear here once they sign in."
+              icon="ph ph-users"
+            />
             <GnPagination
               v-if="adminUsersTotal > adminUsersLimit"
               :page="adminUsersPage"
@@ -1385,12 +1385,13 @@
                   icon="ph ph-folder"
                   help="Single grouping value for browsing, for example work or banking."
                 />
-                <GnInput
+                <GnTagInput
                   v-model="form.tags"
                   label="Tags"
                   icon="ph ph-tag"
-                  placeholder="comma,separated"
-                  help="Keywords used by search. Separate multiple tags with commas."
+                  separator=","
+                  unique
+                  help="Keywords used by search."
                 />
                 <GnInput
                   v-model="form.source"
@@ -1451,15 +1452,15 @@
               <GnToolbar title="Access" meta="Global channels for this secret" />
               <div class="create-access-grid">
                 <div class="access-option">
-                  <GnCheckbox v-model="form.allow_ui" label="UI" />
+                  <GnSwitch v-model="form.allow_ui" label="UI" />
                   <div class="input-info">Available from the web interface after login.</div>
                 </div>
                 <div class="access-option">
-                  <GnCheckbox v-model="form.allow_rest_api" label="REST API" />
+                  <GnSwitch v-model="form.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="form.allow_mcp" label="MCP" />
+                  <GnSwitch v-model="form.allow_mcp" label="MCP" />
                   <div class="input-info">Available to MCP clients when token scopes allow it.</div>
                 </div>
               </div>
@@ -1480,7 +1481,13 @@
                 <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" />
+                <GnTagInput
+                  v-model="editForm.tags"
+                  label="Tags"
+                  icon="ph ph-tag"
+                  separator=","
+                  unique
+                />
                 <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>
@@ -1500,22 +1507,22 @@
                 >
                   Outdated
                 </GnButton>
-                <GnCheckbox v-model="editForm.archived" label="Archived" />
+                <GnSwitch 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" />
+                  <GnSwitch 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" />
+                  <GnSwitch 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" />
+                  <GnSwitch v-model="editForm.allow_mcp" label="MCP" />
                   <div class="input-info">Available to MCP clients when token scopes allow it.</div>
                 </div>
               </div>
@@ -1529,25 +1536,24 @@
           </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>
-            <GnButton variant="secondary" @click="showDeleteConfirm = false">Cancel</GnButton>
-            <GnButton variant="danger" @click="deleteAllData">Delete</GnButton>
-          </template>
-        </GnModal>
+        <GnConfirmDialog
+          v-model:open="showDeleteConfirm"
+          title="Delete all data"
+          message="This permanently removes all secrets and versions. Audit records remain."
+          confirm-text="Delete"
+          confirm-variant="danger"
+          @confirm="deleteAllData"
+        />
 
-        <GnModal :open="Boolean(pendingDeleteSecret)" title="Delete secret" @close="pendingDeleteSecret = null">
-          <p>
-            This permanently deletes
-            <strong>{{ pendingDeleteSecret?.title }}</strong>
-            and all its versions. Audit records remain.
-          </p>
-          <template #actions>
-            <GnButton variant="secondary" @click="pendingDeleteSecret = null">Cancel</GnButton>
-            <GnButton variant="danger" @click="deleteSelectedSecret">Delete</GnButton>
-          </template>
-        </GnModal>
+        <GnConfirmDialog
+          :open="Boolean(pendingDeleteSecret)"
+          title="Delete secret"
+          :message="`This permanently deletes ${pendingDeleteSecret?.title || 'this secret'} and all its versions. Audit records remain.`"
+          confirm-text="Delete"
+          confirm-variant="danger"
+          @confirm="deleteSelectedSecret"
+          @update:open="pendingDeleteSecret = null"
+        />
 
         <GnModal v-model:open="showCreateTokenModal" title="Create token" @close="closeCreateTokenModal">
           <div v-if="!newToken" class="create-modal-body">
@@ -1596,17 +1602,14 @@
           </template>
         </GnModal>
 
-        <GnModal v-model:open="showRestoreConfirm" title="Restore database">
-          <p>
-            This will overwrite the current database with
-            <strong>{{ pendingRestoreFile }}</strong>.
-            All existing data will be replaced.
-          </p>
-          <template #actions>
-            <GnButton variant="secondary" @click="showRestoreConfirm = false">Cancel</GnButton>
-            <GnButton variant="danger" icon="ph ph-arrow-u-up-left" @click="restoreBackup">Restore</GnButton>
-          </template>
-        </GnModal>
+        <GnConfirmDialog
+          v-model:open="showRestoreConfirm"
+          title="Restore database"
+          :message="`This will overwrite the current database with ${pendingRestoreFile}. All existing data will be replaced.`"
+          confirm-text="Restore"
+          confirm-variant="danger"
+          @confirm="restoreBackup"
+        />
         </main>
       </template>
     </GnNavigationShell>
diff --git a/frontend/src/components/SecretDetailPanel.vue b/frontend/src/components/SecretDetailPanel.vue
index ff9ab45..5087edc 100644
--- a/frontend/src/components/SecretDetailPanel.vue
+++ b/frontend/src/components/SecretDetailPanel.vue
@@ -3,10 +3,12 @@
 import {
   GnActionList,
   GnBadge,
+  GnCopyButton,
   GnDescriptionList,
   GnDropdown,
   GnIconButton,
-  GnToolbar
+  GnToolbar,
+  GnTooltip
 } from "gnexus-ui-kit/vue";
 
 const props = defineProps({
@@ -15,7 +17,6 @@
   showHeader: { type: Boolean, default: true },
   showBack: { type: Boolean, default: false },
   showActions: { type: Boolean, default: true },
-  copiedFieldKey: { type: String, default: "" },
   visibleFieldKeys: { type: Set, default: () => new Set() }
 });
 
@@ -25,7 +26,6 @@
   "hide",
   "edit-metadata",
   "toggle-field-visibility",
-  "copy-field",
   "status-change",
   "archive",
   "delete",
@@ -107,23 +107,20 @@
       <GnBadge :variant="secret.status === 'actual' ? 'success' : 'warning'">
         {{ secret.status }}
       </GnBadge>
-      <GnIconButton
-        v-if="!fields"
-        icon="ph ph-eye"
-        label="Reveal secret"
-        @click="emit('reveal')"
-      />
-      <GnIconButton
-        v-else
-        icon="ph ph-eye-slash"
-        label="Hide secret"
-        @click="emit('hide')"
-      />
-      <GnIconButton
-        icon="ph ph-pencil-simple"
-        label="Edit metadata"
-        @click="emit('edit-metadata')"
-      />
+      <GnTooltip :text="fields ? 'Mask values' : 'Show decrypted values'">
+        <GnIconButton
+          :icon="fields ? 'ph ph-eye-slash' : 'ph ph-eye'"
+          :label="fields ? 'Hide secret' : 'Reveal secret'"
+          @click="fields ? emit('hide') : emit('reveal')"
+        />
+      </GnTooltip>
+      <GnTooltip text="Edit metadata">
+        <GnIconButton
+          icon="ph ph-pencil-simple"
+          label="Edit metadata"
+          @click="emit('edit-metadata')"
+        />
+      </GnTooltip>
       <GnDropdown :items="actionItems" class="secret-dropdown">
         <template #trigger="{ toggle }">
           <GnIconButton
@@ -145,16 +142,14 @@
         <code class="secret-value">
           {{ isVisible(item.key) ? item.raw.value : maskValue(item.raw.value) }}
         </code>
-        <GnIconButton
-          :icon="isVisible(item.key) ? 'ph ph-eye-slash' : 'ph ph-eye'"
-          :label="isVisible(item.key) ? 'Hide field value' : 'Show field value'"
-          @click="emit('toggle-field-visibility', item.key)"
-        />
-        <GnIconButton
-          :icon="copiedFieldKey === item.key ? 'ph ph-check' : 'ph ph-copy'"
-          :label="copiedFieldKey === item.key ? 'Copied' : 'Copy field value'"
-          @click="emit('copy-field', { value: item.raw.value, key: item.key })"
-        />
+        <GnTooltip :text="isVisible(item.key) ? 'Hide value' : 'Show value'">
+          <GnIconButton
+            :icon="isVisible(item.key) ? 'ph ph-eye-slash' : 'ph ph-eye'"
+            :label="isVisible(item.key) ? 'Hide field value' : 'Show field value'"
+            @click="emit('toggle-field-visibility', item.key)"
+          />
+        </GnTooltip>
+        <GnCopyButton :text="item.raw.value" size="sm" />
       </template>
     </GnActionList>
   </section>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 614778c..6359e01 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -308,6 +308,11 @@
   overflow: auto;
 }
 
+.admin-user-cards {
+  display: grid;
+  gap: 10px;
+}
+
 .revealed-fields-list.list-actions {
   max-width: none;
   gap: 0;