diff --git a/frontend/.npmrc b/frontend/.npmrc
new file mode 100644
index 0000000..21a15e6
--- /dev/null
+++ b/frontend/.npmrc
@@ -0,0 +1,2 @@
+# gnexus-ui-kit is a git dependency; npm 12+ blocks git fetching by default
+allow-git=all
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1d7420c..3b6f488 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "gnexus-creds-frontend",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "gnexus-creds-frontend",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "dependencies": {
         "@vitejs/plugin-vue": "^6.0.0",
         "gnexus-ui-kit": "git+https://git.gnexus.space/git/root/gnexus-ui-kit.git",
@@ -1072,8 +1072,8 @@
       }
     },
     "node_modules/gnexus-ui-kit": {
-      "version": "0.4.0",
-      "resolved": "git+https://git.gnexus.space/git/root/gnexus-ui-kit.git#5227ba022e5da5ef7df5a4b4ed463c25abd1f85b",
+      "version": "1.0.0",
+      "resolved": "git+https://git.gnexus.space/git/root/gnexus-ui-kit.git#e28f382b7bbf405f9f33e9f5d5b53ad64c1aabf3",
       "license": "UNLICENSED",
       "peerDependencies": {
         "vue": "^3.4.0"
diff --git a/frontend/package.json b/frontend/package.json
index c5d9de8..2151254 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,6 +13,5 @@
     "gnexus-ui-kit": "git+https://git.gnexus.space/git/root/gnexus-ui-kit.git",
     "vite": "^7.0.0",
     "vue": "^3.4.0"
-  },
-  "devDependencies": {}
+  }
 }
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ffb39e7..76466df 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -17,6 +17,7 @@
   GnIdentity,
   GnInput,
   GnMetricCard,
+  GnModal,
   GnNavigationShell,
   GnPagination,
   GnSearchField,
@@ -34,7 +35,6 @@
 } from "gnexus-ui-kit/vue";
 
 import { api } from "./api";
-import GnModal from "./components/GnModal.vue";
 import SecretDetailPanel from "./components/SecretDetailPanel.vue";
 
 const baseTabs = [
diff --git a/frontend/src/components/GnModal.vue b/frontend/src/components/GnModal.vue
deleted file mode 100644
index 9f5774f..0000000
--- a/frontend/src/components/GnModal.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<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 ff254c6..f31deec 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -164,7 +164,7 @@
 }
 
 .selected-secret-title {
-  color: #7aa2f7;
+  color: var(--gn-color-secondary);
 }
 
 .card-title-actions,
@@ -251,6 +251,22 @@
   height: 92px;
 }
 
+/* GnTagInput roots its hint in .tag-input, not .form-group (kit 1.0 quirk),
+   so the scoped .form-group .input-info styles miss it — restore them here. */
+.tag-input .input-info {
+  margin-top: 8px;
+}
+
+.create-modal-body .tag-input .input-info {
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.create-modal-body .tag-input .input-info .ph {
+  position: relative;
+  top: 1px;
+}
+
 .create-modal-body .form-group .input-info {
   font-size: 13px;
   line-height: 1.45;
@@ -342,14 +358,14 @@
 /* Timeline card hover override */
 @media (hover: hover) and (pointer: fine) {
   .timeline .timeline-item:hover .timeline-card {
-    background: #1f2335;
+    background: var(--gn-color-dark);
     transform: none;
   }
 }
 
 @media (hover: none) and (pointer: coarse) {
   .timeline .timeline-item:active .timeline-card {
-    background: #1f2335;
+    background: var(--gn-color-dark);
     transform: none;
   }
 }
@@ -410,7 +426,7 @@
 
 .error {
   margin: 0;
-  color: #f7768e;
+  color: var(--gn-color-error);
 }
 
 .secret-title-link {
@@ -418,7 +434,7 @@
 }
 
 .secret-title-link:hover {
-  color: #7aa2f7;
+  color: var(--gn-color-secondary);
 }
 
 .empty-state.large {