diff --git a/ui/src/components/CompanyEditPanel.vue b/ui/src/components/CompanyEditPanel.vue
index 0b2e21a..19d3a59 100644
--- a/ui/src/components/CompanyEditPanel.vue
+++ b/ui/src/components/CompanyEditPanel.vue
@@ -11,7 +11,7 @@
        UI; the dialog is informational. The lock status + member
        count are surfaced as a read-only chip / line item so the
        view actually shows MORE than the form does, not less. -->
-  <v-card flat>
+  <v-card flat class="cep">
     <v-alert v-if="demoMode" type="info" variant="tonal" density="compact" class="ma-4">
       {{ t('company.demoEdit') }}
     </v-alert>
@@ -79,22 +79,16 @@
       </v-form>
     </v-card-text>
 
-    <v-card-actions v-if="!loading">
-      <v-btn v-if="isEdit" color="error" variant="tonal" :disabled="saving" @click="confirmDelete = true">
-        <v-icon start>mdi-delete</v-icon> {{ t('common.delete') }}
-      </v-btn>
-      <v-spacer />
-      <!-- View mode: a single "Close" button is the only sane action
-           when nothing is editable. Create mode keeps the usual
-           Cancel + Save pair so the form validation has a submit
-           target. -->
-      <v-btn variant="text" :disabled="saving" @click="emit('cancel')">
-        {{ isEdit ? t('common.close') : t('common.cancel') }}
-      </v-btn>
-      <v-btn v-if="!isEdit" color="primary" variant="elevated" :loading="saving" @click="save">
-        <v-icon start>mdi-content-save</v-icon> {{ t('common.save') }}
-      </v-btn>
-    </v-card-actions>
+    <div v-if="!loading" class="cep-foot">
+      <button v-if="isEdit" class="mbtn ghost-danger" :disabled="saving" @click="confirmDelete = true">
+        <v-icon size="18">mdi-delete</v-icon>{{ t('common.delete') }}
+      </button>
+      <span class="foot-sp" />
+      <button class="mbtn ghost" :disabled="saving" @click="emit('cancel')">{{ isEdit ? t('common.close') : t('common.cancel') }}</button>
+      <button v-if="!isEdit" class="mbtn primary" :disabled="saving" @click="save">
+        <span v-if="saving" class="mspin" aria-hidden="true" /><v-icon v-else size="18">mdi-content-save</v-icon>{{ t('common.save') }}
+      </button>
+    </div>
 
     <LigojConfirmDialog
       v-model="confirmDelete"
@@ -112,8 +106,9 @@
 
 <script setup>
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
-import { useApi, useErrorStore, useI18nStore, LigojConfirmDialog } from '@ligoj/host'
+import { useApi, useErrorStore, useI18nStore } from '@ligoj/host'
 import { TYPE_ICONS } from '../composables/delegateTypes.js'
+import LigojConfirmDialog from '@/components/VibrantConfirmDialog.vue'
 
 const props = defineProps({
   /**
@@ -309,3 +304,30 @@ async function remove() {
   opacity: 0.7;
 }
 </style>
+
+<style scoped>
+.cep {
+  --ink-2: rgba(var(--v-theme-on-surface), .72);
+  --border: rgba(var(--v-theme-on-surface), .14);
+  --border-2: rgba(var(--v-theme-on-surface), .26);
+  --hover: rgba(var(--v-theme-on-surface), .06);
+  --font: var(--v26-font, "Bricolage Grotesque", system-ui, sans-serif);
+  background: transparent !important;
+}
+.cep :deep(.v-card-text) { padding: 4px 24px 4px !important; }
+.cep :deep(.v-field) { border-radius: 12px; font-family: var(--font); }
+.cep :deep(.v-field__prepend-inner .v-icon) { opacity: .55; }
+.cep :deep(.v-label) { font-weight: 600; }
+.cep-foot { display: flex; align-items: center; gap: 10px; padding: 12px 24px 22px; }
+.foot-sp { flex: 1; }
+.mbtn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-weight: 700; font-size: 14px; padding: 10px 17px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; transition: filter .15s, background .15s, border-color .15s; }
+.mbtn.primary { color: #fff; background: linear-gradient(135deg, #ff9436, #ff5a52); box-shadow: 0 8px 18px -10px rgba(255, 90, 82, .55); }
+.mbtn.primary:hover:not(:disabled) { filter: brightness(1.04); }
+.mbtn.ghost { color: var(--ink-2); background: transparent; border-color: var(--border); }
+.mbtn.ghost:hover:not(:disabled) { background: var(--hover); border-color: var(--border-2); }
+.mbtn.ghost-danger { color: rgb(var(--v-theme-error)); background: transparent; border-color: rgba(var(--v-theme-error), .35); }
+.mbtn.ghost-danger:hover:not(:disabled) { background: rgba(var(--v-theme-error), .08); }
+.mbtn:disabled { opacity: .6; cursor: default; }
+.mspin { width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: cepspin .7s linear infinite; }
+@keyframes cepspin { to { transform: rotate(360deg); } }
+</style>
diff --git a/ui/src/components/GroupEditPanel.vue b/ui/src/components/GroupEditPanel.vue
index 1e827c8..9d970fd 100644
--- a/ui/src/components/GroupEditPanel.vue
+++ b/ui/src/components/GroupEditPanel.vue
@@ -8,7 +8,7 @@
        emits events so the parent can react (close the dialog, refresh
        the table, …). No router awareness — receives the editing
        target through the `groupId` prop (null = new). -->
-  <v-card flat>
+  <v-card flat class="gp">
     <v-alert v-if="demoMode" type="info" variant="tonal" density="compact" class="ma-4">
       {{ t('group.demoEdit') }}
     </v-alert>
@@ -55,22 +55,16 @@
       </v-form>
     </v-card-text>
 
-    <v-card-actions v-if="!loading">
-      <v-btn v-if="isEdit" color="error" variant="tonal" :disabled="saving" @click="confirmDelete = true">
-        <v-icon start>mdi-delete</v-icon> {{ t('common.delete') }}
-      </v-btn>
-      <v-spacer />
-      <!-- View mode: a single "Close" button reads as the only sane
-           action when nothing is editable. Create mode keeps the
-           usual Cancel + Save pair so the form validation has a
-           submit target. -->
-      <v-btn variant="text" :disabled="saving" @click="emit('cancel')">
-        {{ isEdit ? t('common.close') : t('common.cancel') }}
-      </v-btn>
-      <v-btn v-if="!isEdit" color="primary" variant="elevated" :loading="saving" @click="save">
-        <v-icon start>mdi-content-save</v-icon> {{ t('common.save') }}
-      </v-btn>
-    </v-card-actions>
+    <div v-if="!loading" class="gp-foot">
+      <button v-if="isEdit" class="mbtn ghost-danger" :disabled="saving" @click="confirmDelete = true">
+        <v-icon size="18">mdi-delete</v-icon>{{ t('common.delete') }}
+      </button>
+      <span class="foot-sp" />
+      <button class="mbtn ghost" :disabled="saving" @click="emit('cancel')">{{ isEdit ? t('common.close') : t('common.cancel') }}</button>
+      <button v-if="!isEdit" class="mbtn primary" :disabled="saving" @click="save">
+        <span v-if="saving" class="mspin" aria-hidden="true" /><v-icon v-else size="18">mdi-content-save</v-icon>{{ t('common.save') }}
+      </button>
+    </div>
 
     <LigojConfirmDialog
       v-model="confirmDelete"
@@ -88,8 +82,9 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import { useApi, useErrorStore, useI18nStore, LigojConfirmDialog } from '@ligoj/host'
+import { useApi, useErrorStore, useI18nStore } from '@ligoj/host'
 import { TYPE_ICONS } from '../composables/delegateTypes.js'
+import LigojConfirmDialog from '@/components/VibrantConfirmDialog.vue'
 
 const props = defineProps({
   /**
@@ -288,3 +283,34 @@ async function remove() {
   }
 }
 </script>
+
+<style scoped>
+.gp {
+  --ink: rgb(var(--v-theme-on-surface));
+  --ink-2: rgba(var(--v-theme-on-surface), .72);
+  --border: rgba(var(--v-theme-on-surface), .14);
+  --border-2: rgba(var(--v-theme-on-surface), .26);
+  --hover: rgba(var(--v-theme-on-surface), .06);
+  --font: var(--v26-font, "Bricolage Grotesque", system-ui, sans-serif);
+  background: transparent !important;
+}
+.gp :deep(.v-card-text) { padding: 4px 24px 4px !important; }
+/* Clean rounded fields (match the user dialog). */
+.gp :deep(.v-field) { border-radius: 12px; font-family: var(--font); }
+.gp :deep(.v-field__prepend-inner .v-icon) { opacity: .55; }
+.gp :deep(.v-label) { font-weight: 600; }
+
+/* Vibrant footer buttons (shared language with UserEditDialog). */
+.gp-foot { display: flex; align-items: center; gap: 10px; padding: 12px 24px 22px; }
+.foot-sp { flex: 1; }
+.mbtn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-weight: 700; font-size: 14px; padding: 10px 17px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; transition: filter .15s, background .15s, border-color .15s; }
+.mbtn.primary { color: #fff; background: linear-gradient(135deg, #ff9436, #ff5a52); box-shadow: 0 8px 18px -10px rgba(255, 90, 82, .55); }
+.mbtn.primary:hover:not(:disabled) { filter: brightness(1.04); }
+.mbtn.ghost { color: var(--ink-2); background: transparent; border-color: var(--border); }
+.mbtn.ghost:hover:not(:disabled) { background: var(--hover); border-color: var(--border-2); }
+.mbtn.ghost-danger { color: rgb(var(--v-theme-error)); background: transparent; border-color: rgba(var(--v-theme-error), .35); }
+.mbtn.ghost-danger:hover:not(:disabled) { background: rgba(var(--v-theme-error), .08); }
+.mbtn:disabled { opacity: .6; cursor: default; }
+.mspin { width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: gpspin .7s linear infinite; }
+@keyframes gpspin { to { transform: rotate(360deg); } }
+</style>
diff --git a/ui/src/components/GroupMembersDialog.vue b/ui/src/components/GroupMembersDialog.vue
index f1e8d27..077221b 100644
--- a/ui/src/components/GroupMembersDialog.vue
+++ b/ui/src/components/GroupMembersDialog.vue
@@ -9,20 +9,13 @@
        — GroupListView's row action and the host's subscription-row
        buttons (returned by `service.renderFeatures`) both call it. -->
   <v-dialog v-model="open" max-width="1100" scrollable @after-leave="onAfterLeave">
-    <v-card>
-      <v-card-title class="d-flex align-center ga-2">
-        <v-icon color="primary">mdi-account-group</v-icon>
-        <!-- "Group members — <name>" reads as the action being done.
-             The group name is the variable bit so we keep it in a
-             distinct span the user's eye lands on first. -->
-        <span>{{ t('id.group.manageTitle') }}</span>
-        <span class="text-primary">{{ groupName }}</span>
-        <v-spacer />
-        <v-btn icon size="small" variant="text" @click="onCloseClick">
-          <v-icon>mdi-close</v-icon>
-        </v-btn>
-      </v-card-title>
-      <v-card-text class="pa-4">
+    <v-card class="vmodal">
+      <div class="vmodal-head">
+        <span class="mi"><v-icon color="#fff">mdi-account-multiple</v-icon></span>
+        <h3>{{ t('id.group.manageTitle') }} <span class="who">{{ groupName }}</span></h3>
+        <button class="x" :aria-label="t('common.cancel')" @click="onCloseClick"><v-icon size="20">mdi-close</v-icon></button>
+      </div>
+      <v-card-text class="vmodal-body">
         <!-- :key forces the Panel to remount when the group changes,
              so its internal data-table state (pagination, search,
              selection) starts fresh for each opened group. The
@@ -94,3 +87,14 @@ function onAfterLeave() {
   pendingOnChanged = null
 }
 </script>
+
+<style scoped>
+.vmodal { border-radius: 20px !important; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55) !important; }
+.vmodal-head { display: flex; align-items: center; gap: 13px; padding: 22px 24px 8px; }
+.vmodal-head .mi { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, #ff9436, #ff5a52); box-shadow: 0 8px 18px -8px rgba(255, 90, 82, .6); }
+.vmodal-head h3 { font-family: var(--v26-font, "Bricolage Grotesque", system-ui, sans-serif); font-weight: 800; font-size: 20px; margin: 0; flex: 1; color: rgb(var(--v-theme-on-surface)); letter-spacing: -.02em; }
+.vmodal-head h3 .who { color: #ff5a52; }
+.vmodal-head .x { width: 36px; height: 36px; border: 0; background: transparent; border-radius: 9px; cursor: pointer; display: grid; place-items: center; color: rgba(var(--v-theme-on-surface), .5); }
+.vmodal-head .x:hover { background: rgba(var(--v-theme-on-surface), .06); color: rgb(var(--v-theme-on-surface)); }
+.vmodal-body { padding: 14px 24px 20px !important; }
+</style>
diff --git a/ui/src/components/GroupMembersPanel.vue b/ui/src/components/GroupMembersPanel.vue
index e0ebd2d..bd60b81 100644
--- a/ui/src/components/GroupMembersPanel.vue
+++ b/ui/src/components/GroupMembersPanel.vue
@@ -9,74 +9,57 @@
        Lifting the body out of the routed view is the deduplication
        that made the dialog cheap: backend API contract is "group name
        → members list", no project / subscription context required. -->
-  <div>
-    <!-- Add-member toolbar. Server-side autocomplete; submit (PUT)
-         reloads the table. -->
-    <v-card variant="tonal" class="mb-4">
-      <v-card-text class="d-flex flex-wrap align-center ga-2">
-        <v-autocomplete v-model="newMember" v-model:search="searchTerm" :label="t('id.group.addPlaceholder')" :items="searchResults" item-title="label" item-value="id" :loading="searching" no-filter
-          clearable variant="outlined" density="compact" hide-details autocomplete="off" style="min-width: 320px; flex: 1 1 320px" @update:search="onSearch" @update:menu="onSearchMenu" />
-        <v-btn color="primary" prepend-icon="mdi-account-plus" :disabled="!newMember || !groupName" :loading="adding" @click="addMember">
-          {{ t('id.group.add') }}
-        </v-btn>
-      </v-card-text>
-    </v-card>
-
-    <v-text-field v-model="dt.search.value" prepend-inner-icon="mdi-magnify" :label="t('common.search')" variant="outlined" density="compact" hide-details class="search-field mb-4"
-      @update:model-value="onMemberSearch" />
-
-    <v-alert v-if="dt.error.value" type="warning" variant="tonal" class="mb-4">
+  <div class="gmpanel">
+    <!-- Add-member bar: server-side autocomplete + Vibrant CTA. -->
+    <div class="addbar">
+      <v-autocomplete v-model="newMember" v-model:search="searchTerm" :label="t('id.group.addPlaceholder')" :items="searchResults" item-title="label" item-value="id" :loading="searching" no-filter
+        clearable variant="outlined" density="comfortable" rounded="lg" hide-details autocomplete="off" class="addsel" prepend-inner-icon="mdi-account-search"
+        @update:search="onSearch" @update:menu="onSearchMenu" />
+      <button class="btn" :disabled="!newMember || !groupName || adding" @click="addMember">
+        <span v-if="adding" class="bspin" aria-hidden="true" /><v-icon v-else size="18">mdi-account-plus</v-icon>{{ t('id.group.add') }}
+      </button>
+    </div>
+
+    <label class="search">
+      <v-icon size="18">mdi-magnify</v-icon>
+      <input v-model="dt.search.value" :placeholder="t('common.search')" @input="onMemberSearch" />
+    </label>
+
+    <v-alert v-if="dt.error.value" type="warning" variant="tonal" class="mb-4" rounded="lg">
       {{ dt.error.value === 'internal' ? t('user.noProviderMsg') : dt.error.value }}
     </v-alert>
 
-    <v-skeleton-loader v-if="dt.loading.value && dt.items.value.length === 0" type="table-heading, table-row@5" class="mb-4" />
-
-    <LigojDataTableServer v-if="!dt.error.value" v-show="dt.items.value.length > 0 || !dt.loading.value" filename="members.csv" :fetch-all="dt.loadAll" v-model:items-per-page="itemsPerPage"
-      :headers="headers" :items="dt.items.value" :items-length="dt.totalItems.value" :loading="dt.loading.value" item-value="id" hover @update:options="loadData">
-      <!-- Email chips, same chrome as UserListView (chantier D4 style):
-           up to two as tonal chips, the rest collapse into a "+N" hint
-           so the column stays bounded even when an LDAP user carries
-           five aliases. -->
-      <template #item.id="{ item }">
-        <div class="d-flex align-center ga-2">
-          <v-icon size="small" color="medium-emphasis">mdi-account-circle</v-icon>
-          <code>{{ item.id }}</code>
-        </div>
+    <VibrantDataTable v-if="!dt.error.value" :headers="headers" :items="dt.items.value" :items-length="dt.totalItems.value" :loading="dt.loading.value"
+      item-value="id" default-sort="id" @update:options="loadData">
+      <template #cell.id="{ item }">
+        <span class="login"><v-icon size="16" class="login-ic">mdi-account-circle</v-icon><span class="mono">{{ item.id }}</span></span>
       </template>
-      <template #header.id="{ column }"><span class="d-inline-flex align-center"><v-icon size="small" class="mr-1">mdi-account</v-icon>{{ column.title }}<v-tooltip activator="parent" location="top" :text="column.title" /></span></template>
-      <template #header.company="{ column }"><span class="d-inline-flex align-center"><v-icon size="small" class="mr-1">mdi-domain</v-icon>{{ column.title }}<v-tooltip activator="parent" location="top" :text="column.title" /></span></template>
-      <template #header.mails="{ column }"><span class="d-inline-flex align-center"><v-icon size="small" class="mr-1">mdi-email-outline</v-icon>{{ column.title }}<v-tooltip activator="parent" location="top" :text="column.title" /></span></template>
-      <template #header.groups="{ column }"><span class="d-inline-flex align-center"><v-icon size="small" class="mr-1">mdi-account-group</v-icon>{{ column.title }}<v-tooltip activator="parent" location="top" :text="column.title" /></span></template>
-      <template #item.mails="{ item }">
-        <div class="mails-cell">
-          <v-chip v-for="m in (item.mails || []).slice(0, 2)" :key="m" size="small" variant="tonal" class="mr-1">{{ m }}</v-chip>
-          <span v-if="(item.mails || []).length > 2" class="text-caption text-medium-emphasis">
-            +{{ item.mails.length - 2 }}
-          </span>
-        </div>
+      <template #cell.mails="{ item }">
+        <span class="mails">
+          <span v-for="m in (item.mails || []).slice(0, 2)" :key="m" class="mailchip"><v-icon size="12">mdi-email-outline</v-icon>{{ m }}</span>
+          <span v-if="(item.mails || []).length > 2" class="more">+{{ item.mails.length - 2 }}</span>
+          <span v-if="!(item.mails || []).length" class="dash">—</span>
+        </span>
       </template>
-      <template #item.groups="{ item }">
-        <div class="groups-cell">
-          <v-chip v-for="g in (item.groups || []).slice(0, 3)" :key="g.name || g" size="small" class="mr-1">
-            {{ g.name || g }}
-          </v-chip>
-          <span v-if="(item.groups || []).length > 3" class="text-caption text-medium-emphasis">
-            +{{ item.groups.length - 3 }}
-          </span>
-        </div>
+      <template #cell.groups="{ item }">
+        <span class="groups">
+          <span v-for="g in (item.groups || []).slice(0, 3)" :key="g.name || g" class="chip">{{ g.name || g }}</span>
+          <span v-if="(item.groups || []).length > 3" class="more">+{{ item.groups.length - 3 }}</span>
+          <span v-if="!(item.groups || []).length" class="dash">—</span>
+        </span>
       </template>
-      <template #item.actions="{ item }">
-        <v-btn v-if="canRemove(item)" icon size="small" variant="text" color="error" :title="t('id.group.removeTitle')" @click.stop="startRemove(item)">
-          <v-icon size="small">mdi-account-minus</v-icon>
+      <template #actions="{ item }">
+        <button v-if="canRemove(item)" class="iconbtn danger" :aria-label="t('id.group.removeTitle')" @click.stop="startRemove(item)">
+          <v-icon size="18">mdi-account-minus</v-icon>
           <v-tooltip activator="parent" :text="t('id.group.removeTitle')" location="top" />
-        </v-btn>
+        </button>
         <v-tooltip v-else-if="isTransitive(item)" :text="t('id.group.transitive')" location="top">
           <template #activator="{ props: tt }">
-            <v-icon v-bind="tt" size="small" color="info">mdi-information-outline</v-icon>
+            <v-icon v-bind="tt" size="18" color="info">mdi-information-outline</v-icon>
           </template>
         </v-tooltip>
       </template>
-    </LigojDataTableServer>
+    </VibrantDataTable>
 
     <!-- Confirm dialog. Vuetify teleports it to <body>, so being
          nested inside this panel — which itself can be inside a
@@ -94,10 +77,10 @@ import {
   useDataTable,
   useErrorStore,
   useI18nStore,
-  LigojDataTableServer,
-  LigojConfirmDialog,
 } from '@ligoj/host'
 import { TYPE_ICONS } from '../composables/delegateTypes.js'
+import LigojConfirmDialog from '@/components/VibrantConfirmDialog.vue'
+import VibrantDataTable from '@/components/VibrantDataTable.vue'
 
 const props = defineProps({
   /**
@@ -144,13 +127,12 @@ const dt = useDataTable('service/id/user', {
 })
 
 const headers = computed(() => [
-  { title: t('user.login'), key: 'id', sortable: true, width: '160px' },
-  { title: t('user.firstName'), key: 'firstName', sortable: true },
-  { title: t('user.lastName'), key: 'lastName', sortable: true },
-  { title: t('user.company'), key: 'company', sortable: true },
-  { title: t('user.emails'), key: 'mails', sortable: false },
-  { title: t('user.groups'), key: 'groups', sortable: false },
-  { title: '', key: 'actions', sortable: false, width: '60px', align: 'end' },
+  { label: t('user.login'), key: 'id', sortable: true, width: '170px' },
+  { label: t('user.firstName'), key: 'firstName', sortable: true },
+  { label: t('user.lastName'), key: 'lastName', sortable: true },
+  { label: t('user.company'), key: 'company', sortable: true },
+  { label: t('user.emails'), key: 'mails' },
+  { label: t('user.groups'), key: 'groups' },
 ])
 
 function loadData(options) {
@@ -282,23 +264,45 @@ watch(() => groupName.value, (g) => {
 </script>
 
 <style scoped>
-.search-field {
-  max-width: 320px;
+.gmpanel {
+  --ink: rgb(var(--v-theme-on-surface));
+  --ink-3: rgba(var(--v-theme-on-surface), .55);
+  --border: rgba(var(--v-theme-on-surface), .12);
+  --border-2: rgba(var(--v-theme-on-surface), .26);
+  --surface: rgb(var(--v-theme-surface));
+  --pill: rgba(var(--v-theme-on-surface), .06);
+  --accent: rgb(var(--v-theme-secondary));
+  --font: var(--v26-font, "Bricolage Grotesque", system-ui, sans-serif);
+  --mono: var(--v26-mono, "JetBrains Mono", ui-monospace, monospace);
 }
 
-/* Same look as UserListView's mails column — soft-wrap on long lists
- * because email addresses can be long; the 2-chip cap + "+N" hint
- * keeps the visual footprint bounded. */
-.mails-cell {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.groups-cell {
-  max-width: 320px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+/* Add-member bar + CTA. */
+.addbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
+.addsel { min-width: 320px; flex: 1 1 320px; }
+.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-weight: 700; font-size: 14px; padding: 11px 17px; border-radius: 12px; cursor: pointer; border: 0; color: #fff; background: linear-gradient(135deg, #ff9436, #ff5a52); box-shadow: 0 8px 18px -10px rgba(255, 90, 82, .55); transition: filter .15s; }
+.btn:hover:not(:disabled) { filter: brightness(1.04); }
+.btn:disabled { opacity: .55; cursor: default; }
+.bspin { width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: bspin .7s linear infinite; }
+@keyframes bspin { to { transform: rotate(360deg); } }
+
+/* Member search. */
+.search { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 360px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-3); margin-bottom: 14px; transition: border-color .15s, box-shadow .15s; }
+.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--v-theme-secondary), .15); }
+.search input { flex: 1; border: 0; outline: 0; background: transparent; font-family: var(--font); font-size: 14px; color: var(--ink); }
+.search input::placeholder { color: var(--ink-3); }
+
+/* Cells (shared language with UsersView). */
+.login { display: inline-flex; align-items: center; gap: 8px; }
+.login-ic { color: var(--ink-3); }
+.mono { font-family: var(--mono); font-size: 13px; font-weight: 600; }
+.mails { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
+.mailchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: rgba(var(--v-theme-on-surface), .72); background: var(--pill); border: 1px solid var(--border); border-radius: 8px; padding: 3px 9px; }
+.mailchip :deep(.v-icon) { opacity: .6; }
+.groups { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 5px; overflow: hidden; }
+.chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: rgba(var(--v-theme-on-surface), .72); background: var(--pill); border: 1px solid var(--border); border-radius: 20px; padding: 3px 11px; white-space: nowrap; }
+.more { font-size: 12px; font-weight: 700; color: var(--ink-3); }
+.dash { color: var(--ink-3); }
+
+.iconbtn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid transparent; background: transparent; cursor: pointer; display: inline-grid; place-items: center; color: var(--ink-3); transition: background .12s, color .12s; }
+.iconbtn.danger:hover { background: rgba(var(--v-theme-error), .1); color: rgb(var(--v-theme-error)); }
 </style>
diff --git a/ui/src/i18n/en.js b/ui/src/i18n/en.js
index a19438d..711a0ed 100644
--- a/ui/src/i18n/en.js
+++ b/ui/src/i18n/en.js
@@ -100,4 +100,17 @@ export default {
   // `containerScope.*` keys live in the host; this one is contributed by
   // the plugin and merged into the i18n store at install time.
   'containerScope.dn': 'LDAP path',
+
+  // --- 2026 redesign additions (chantier ui-2026) ---
+  'user.subtitle2026': 'Manage accounts, their entities, groups and access.',
+  'user.searchPlaceholder': 'Search a user…',
+  'group.subtitle2026': 'Organise groups and their members.',
+  'group.searchPlaceholder': 'Search a group…',
+  'company.subtitle2026': 'Manage entities and their directory.',
+  'company.searchPlaceholder': 'Search an entity…',
+  'delegate.subtitle2026': 'Delegate administration and write rights.',
+  'delegate.searchPlaceholder': 'Search a delegation…',
+  'containerScope.subtitle2026': 'Define the LDAP bases for groups and entities.',
+  'containerScope.deleteConfirmBefore': 'Are you sure you want to delete ',
+  'containerScope.deleteConfirmAfter': '?',
 }
diff --git a/ui/src/i18n/fr.js b/ui/src/i18n/fr.js
index c145687..d12ae97 100644
--- a/ui/src/i18n/fr.js
+++ b/ui/src/i18n/fr.js
@@ -92,4 +92,17 @@ export default {
   // Les autres clés `containerScope.*` vivent dans le host ; celle-ci est
   // contribuée par le plugin et mergée au store i18n à l'install.
   'containerScope.dn': 'Chemin LDAP',
+
+  // --- 2026 redesign additions (chantier ui-2026) ---
+  'user.subtitle2026': 'Gérez les comptes, leurs entités, groupes et accès.',
+  'user.searchPlaceholder': 'Rechercher un utilisateur…',
+  'group.subtitle2026': 'Organisez les groupes et leurs membres.',
+  'group.searchPlaceholder': 'Rechercher un groupe…',
+  'company.subtitle2026': 'Gérez les entités et leur annuaire.',
+  'company.searchPlaceholder': 'Rechercher une entité…',
+  'delegate.subtitle2026': 'Déléguez des droits d\'administration et d\'écriture.',
+  'delegate.searchPlaceholder': 'Rechercher une délégation…',
+  'containerScope.subtitle2026': 'Définissez les bases LDAP des groupes et entités.',
+  'containerScope.deleteConfirmBefore': 'Êtes-vous certain de supprimer ',
+  'containerScope.deleteConfirmAfter': ' ?',
 }
diff --git a/ui/src/views/CompanyListView.vue b/ui/src/views/CompanyListView.vue
index ff20e00..84ad1d5 100644
--- a/ui/src/views/CompanyListView.vue
+++ b/ui/src/views/CompanyListView.vue
@@ -1,140 +1,101 @@
+<!--
+  CompaniesView — 2026 "Vibrant" Companies/Entities list (plugin-id). Same
+  recipe as GroupsView (VibrantDataTable + reused CompanyEditPanel in a
+  Vibrant dialog + VibrantConfirmDialog), on service/id/company. No members.
+-->
 <template>
-  <div>
-    <div class="d-flex flex-wrap align-center mb-4 ga-2">
-      <v-spacer />
-      <v-text-field v-model="dt.search.value" prepend-inner-icon="mdi-magnify" :label="t('common.search')" variant="outlined" density="compact" hide-details class="search-field"
-        @update:model-value="onSearch" />
-      <v-btn color="primary" prepend-icon="mdi-plus" @click="openCreate">
-        {{ t('company.new') }}
-      </v-btn>
+  <div class="companies">
+    <header class="ph">
+      <div class="ph-txt">
+        <h1>{{ t('company.title') }}</h1>
+        <p class="sub">{{ t('company.subtitle2026') }}</p>
+      </div>
+      <div class="ph-actions">
+        <button class="btn" @click="openCreate"><v-icon size="18">mdi-plus</v-icon>{{ t('company.new') }}</button>
+      </div>
+    </header>
+
+    <div class="toolbar">
+      <label class="search">
+        <v-icon size="18">mdi-magnify</v-icon>
+        <input v-model="dt.search.value" :placeholder="t('company.searchPlaceholder') || t('common.search')" @input="onSearch" />
+      </label>
+      <span class="tb-sp" />
+      <v-slide-x-transition>
+        <div v-if="selected.length" class="bulkbar">
+          <span class="bulk-count">{{ selected.length }} {{ t('common.selected') }}</span>
+          <button class="btn-danger" @click="startBulkDelete"><v-icon size="16">mdi-delete</v-icon>{{ t('common.delete') }}</button>
+        </div>
+      </v-slide-x-transition>
     </div>
 
-    <v-alert v-if="dt.error.value" type="warning" variant="tonal" class="mb-4">
+    <v-alert v-if="dt.error.value" type="warning" variant="tonal" class="mb-4" rounded="lg">
       <v-alert-title>{{ t('user.noProvider') }}</v-alert-title>
       {{ dt.error.value === 'internal' ? t('company.noProvider') : dt.error.value }}
     </v-alert>
-
-    <v-alert v-if="dt.demoMode.value" type="info" variant="tonal" density="compact" class="mb-4">
+    <v-alert v-if="dt.demoMode.value" type="info" variant="tonal" density="compact" class="mb-4" rounded="lg">
       {{ t('user.demoMode') }}
     </v-alert>
 
-    <v-slide-y-transition>
-      <v-toolbar v-if="selected.length" density="compact" color="primary" rounded class="mb-4">
-        <v-toolbar-title>{{ selected.length }} {{ t('common.selected') }}</v-toolbar-title>
-        <v-spacer />
-        <v-btn variant="elevated" color="error" prepend-icon="mdi-delete" @click="startBulkDelete">
-          {{ t('common.delete') }}
-        </v-btn>
-      </v-toolbar>
-    </v-slide-y-transition>
-
-    <v-skeleton-loader v-if="dt.loading.value && dt.items.value.length === 0" type="table-heading, table-row@5" class="mb-4" />
-
-    <LigojDataTableServer filename="companies.csv" :fetch-all="dt.loadAll" v-if="!dt.error.value" v-show="dt.items.value.length > 0 || !dt.loading.value" v-model="selected"
-      v-model:items-per-page="itemsPerPage" :headers="headers" :items="dt.items.value" :items-length="dt.totalItems.value" :loading="dt.loading.value" item-value="name" show-select hover
-      @update:options="loadData" @click:row="(_, { item }) => openDetails(item.name)">
-      <template #header.scope="{ column }"><span class="d-inline-flex align-center"><v-icon size="small" class="mr-1">mdi-shape-outline</v-icon>{{ column.title }}<v-tooltip activator="parent" location="top" :text="column.title" /></span></template>
-      <template #header.count="{ column }"><span class="d-inline-flex align-center"><v-icon size="small" class="mr-1">mdi-account-multiple-outline</v-icon>{{ column.title }}<v-tooltip activator="parent" location="top" :text="column.title" /></span></template>
-      <template #header.locked="{ column }"><span class="d-inline-flex align-center"><v-icon size="small" class="mr-1">mdi-shield-lock-outline</v-icon>{{ column.title }}<v-tooltip activator="parent" location="top" :text="column.title" /></span></template>
-      <template #item.locked="{ item }">
-        <div class="text-center">
-          <v-tooltip v-if="item.locked" :text="t('user.statusLocked')" location="top">
-            <template #activator="{ props: tt }">
-              <v-icon v-bind="tt" color="error" size="small">mdi-lock</v-icon>
-            </template>
-          </v-tooltip>
-        </div>
+    <VibrantDataTable v-if="!dt.error.value" :headers="headers" :items="dt.items.value" :items-length="dt.totalItems.value" :loading="dt.loading.value"
+      selectable v-model="selected" item-value="name" default-sort="name" @update:options="loadData" @row-click="(item) => openDetails(item.name)">
+      <template #cell.name="{ item }">
+        <span class="cname"><v-icon size="16" class="cname-ic">mdi-office-building-outline</v-icon><span>{{ item.name }}</span></span>
       </template>
-      <template #item.actions="{ item }">
-        <!-- View details: company properties (name / scope / lock /
-             member count) are LDAP-managed and effectively immutable
-             from this UI, so this is "open the details panel" — not
-             "edit". The eye icon + "View" tooltip communicate that. -->
-        <v-btn icon size="small" variant="text" @click.stop="openDetails(item.name)">
-          <v-icon size="small">mdi-eye-outline</v-icon>
-          <v-tooltip activator="parent" :text="t('common.view')" location="top" />
-        </v-btn>
-        <v-btn icon size="small" variant="text" color="error" @click.stop="startDelete(item)">
-          <v-icon size="small">mdi-delete</v-icon>
-          <v-tooltip activator="parent" :text="t('common.delete')" location="top" />
-        </v-btn>
+      <template #cell.scope="{ item }">
+        <span v-if="item.scope" class="tagdot"><span class="d" :style="{ background: scopeColor(item.scope) }" />{{ item.scope }}</span>
+        <span v-else class="dash">—</span>
       </template>
-    </LigojDataTableServer>
-
-    <!-- Company view / create dialog. View mode renders the form with
-         every field disabled (LDAP companies are immutable from this
-         UI) PLUS extra read-only rows for lock status + member count
-         that the form alone can't show. Create mode renders the same
-         form editable, with the usual Save/Cancel pair. NOT
-         `persistent` — ESC and backdrop click both close it. Panel
-         is `v-if`-mounted on `editDialog` so each open is a fresh
-         component (clean form state, fresh GET); `:key` covers the
-         rare in-place target swap. -->
-    <v-dialog v-model="editDialog" max-width="700" scrollable>
-      <v-card>
-        <v-card-title class="d-flex align-center ga-2">
-          <v-icon color="primary">{{ editingId ? 'mdi-eye-outline' : 'mdi-domain' }}</v-icon>
-          <span v-if="editingId">{{ t('company.detailsTitle') }}</span>
-          <span v-else>{{ t('company.new') }}</span>
-          <span v-if="editingId" class="text-primary">{{ editingId }}</span>
-          <v-spacer />
-          <v-btn icon size="small" variant="text" @click="editDialog = false">
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
-        </v-card-title>
-        <CompanyEditPanel
-          v-if="editDialog"
-          :key="editingId ?? 'new'"
-          :company-id="editingId"
-          @saved="onEditSaved"
-          @deleted="onEditDeleted"
-          @cancel="editDialog = false"
-        />
-      </v-card>
-    </v-dialog>
-
-    <v-dialog v-model="deleteDialog" max-width="400">
-      <v-card>
-        <v-card-title class="d-flex align-center ga-2">
-          <v-icon color="primary">{{ TYPE_ICONS.COMPANY }}</v-icon>
-          <span>{{ t('company.deleteTitle') }}</span>
-        </v-card-title>
-        <v-card-text>
-          {{ t('company.deleteConfirmBefore') }}<strong class="text-error">{{ deleteTarget?.name }}</strong>{{ t('company.deleteConfirmAfter') }}
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn variant="text" @click="deleteDialog = false">{{ t('common.cancel') }}</v-btn>
-          <v-btn color="error" variant="elevated" :loading="deleting" @click="confirmDelete">{{ t('common.delete') }}</v-btn>
-        </v-card-actions>
+      <template #cell.count="{ item }"><span class="mono">{{ item.count ?? '—' }}</span></template>
+      <template #cell.locked="{ item }">
+        <v-tooltip v-if="item.locked" :text="t('user.statusLocked')" location="top">
+          <template #activator="{ props: tt }"><v-icon v-bind="tt" color="error" size="19">mdi-lock</v-icon></template>
+        </v-tooltip>
+        <span v-else class="dash">—</span>
+      </template>
+      <template #actions="{ item }">
+        <v-menu location="bottom end">
+          <template #activator="{ props }">
+            <button class="iconbtn" v-bind="props" :aria-label="t('common.view')" @click.stop><v-icon size="18">mdi-cog</v-icon></button>
+          </template>
+          <div class="popmenu">
+            <button @click="openDetails(item.name)"><v-icon size="18">mdi-eye-outline</v-icon>{{ t('common.view') }}</button>
+            <div class="sep" />
+            <button class="danger" @click="startDelete(item)"><v-icon size="18">mdi-delete</v-icon>{{ t('common.delete') }}</button>
+          </div>
+        </v-menu>
+      </template>
+    </VibrantDataTable>
+
+    <v-dialog v-model="editDialog" max-width="600" scrollable>
+      <v-card class="vmodal">
+        <div class="vmodal-head">
+          <span class="mi"><v-icon color="#fff">{{ editingId ? 'mdi-eye-outline' : 'mdi-office-building' }}</v-icon></span>
+          <h3>{{ editingId ? t('company.detailsTitle') : t('company.new') }} <span v-if="editingId" class="who">{{ editingId }}</span></h3>
+          <button class="x" :aria-label="t('common.cancel')" @click="editDialog = false"><v-icon size="20">mdi-close</v-icon></button>
+        </div>
+        <CompanyEditPanel v-if="editDialog" :key="editingId ?? 'new'" :company-id="editingId" @saved="onEditSaved" @deleted="onEditDeleted" @cancel="editDialog = false" />
       </v-card>
     </v-dialog>
 
-    <v-dialog v-model="bulkDeleteDialog" max-width="400">
-      <v-card>
-        <v-card-title class="d-flex align-center ga-2">
-          <v-icon color="primary">{{ TYPE_ICONS.COMPANY }}</v-icon>
-          <span>{{ t('common.bulkDeleteTitle') }}</span>
-        </v-card-title>
-        <v-card-text>{{ t('common.bulkDeleteConfirm', { count: selected.length }) }}</v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn variant="text" @click="bulkDeleteDialog = false">{{ t('common.cancel') }}</v-btn>
-          <v-btn color="error" variant="elevated" :loading="deleting" @click="confirmBulkDelete">{{ t('common.delete') }}</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+    <LigojConfirmDialog v-model="deleteDialog" :title="t('company.deleteTitle')" :icon="TYPE_ICONS.COMPANY" :confirm-label="t('common.delete')" confirm-color="error" :loading="deleting" @confirm="confirmDelete">
+      {{ t('company.deleteConfirmBefore') }}<strong class="text-error">{{ deleteTarget?.name }}</strong>{{ t('company.deleteConfirmAfter') }}
+    </LigojConfirmDialog>
+    <LigojConfirmDialog v-model="bulkDeleteDialog" :title="t('common.bulkDeleteTitle')" :icon="TYPE_ICONS.COMPANY" :confirm-label="t('common.delete')" confirm-color="error" :loading="deleting" @confirm="confirmBulkDelete">
+      {{ t('common.bulkDeleteConfirmBefore') }}<strong class="text-error">{{ selected.length }}</strong>{{ t('common.bulkDeleteConfirmAfter') }}
+    </LigojConfirmDialog>
   </div>
 </template>
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useDataTable, useApi, useAppStore, useErrorStore, useI18nStore, LigojDataTableServer } from '@ligoj/host'
+import { useRoute } from 'vue-router'
+import { useDataTable, useApi, useAppStore, useErrorStore, useI18nStore } from '@ligoj/host'
 import { TYPE_ICONS } from '../composables/delegateTypes.js'
+import VibrantDataTable from '@/components/VibrantDataTable.vue'
 import CompanyEditPanel from '../components/CompanyEditPanel.vue'
+import LigojConfirmDialog from '@/components/VibrantConfirmDialog.vue'
 
-const router = useRouter()
 const route = useRoute()
 const appStore = useAppStore()
 const api = useApi()
@@ -143,139 +104,125 @@ const i18n = useI18nStore()
 const t = i18n.t
 
 const DEMO_COMPANIES = [
-  { name: 'Ligoj', scope: 'Company', count: 4, locked: false },
-  { name: 'AcmeCorp', scope: 'Company', count: 2, locked: false },
-  { name: 'TechSolutions', scope: 'Company', count: 2, locked: false },
+  { name: 'Ligoj', scope: 'Internal', count: 12, locked: false },
+  { name: 'AcmeCorp', scope: 'External', count: 5, locked: false },
+  { name: 'TechSolutions', scope: 'External', count: 3, locked: false },
 ]
 const dt = useDataTable('service/id/company', { defaultSort: 'name', demoData: DEMO_COMPANIES })
-const itemsPerPage = ref(25)
 let searchTimeout = null
+let lastOptions = { page: 1, itemsPerPage: 25, sortBy: [] }
 
 const selected = ref([])
 const deleteDialog = ref(false)
 const deleteTarget = ref(null)
 const deleting = ref(false)
 const bulkDeleteDialog = ref(false)
-let lastOptions = {}
-
-/* ---- Create / view dialog ---------------------------------------
- * Replaces the legacy `router.push('/id/company/<id>')` and
- * `router.push('/id/company/new')` navigations. The routed URLs
- * still resolve here (see plugin index.js) and auto-open the dialog
- * in the appropriate mode so email / bookmark deep links keep
- * working. The Panel itself decides between view (disabled fields,
- * Close+Delete) and create (editable, Save+Cancel) based on its
- * `companyId` prop.
- * ----------------------------------------------------------------- */
-
 const editDialog = ref(false)
 const editingId = ref(null)
 
-function openCreate() {
-  editingId.value = null
-  editDialog.value = true
-}
-
-function openDetails(name) {
-  editingId.value = name
-  editDialog.value = true
-}
-
-function onEditSaved() {
-  editDialog.value = false
-  editingId.value = null
-  dt.load(lastOptions)
-}
-
-function onEditDeleted() {
-  editDialog.value = false
-  editingId.value = null
-  dt.load(lastOptions)
-}
-
 const headers = computed(() => [
-  { title: t('common.name'), key: 'name', sortable: true },
-  { title: t('group.scope'), key: 'scope', sortable: false },
-  { title: t('group.members'), key: 'count', sortable: false, width: '100px', align: 'center' },
-  { title: t('group.locked'), key: 'locked', sortable: false, width: '80px', align: 'center' },
-  { title: '', key: 'actions', sortable: false, width: '120px', align: 'center' },
+  { title: t('common.name'), label: t('common.name'), key: 'name', sortable: true },
+  { label: t('group.scope'), key: 'scope' },
+  { label: t('group.members'), key: 'count', align: 'center', width: '110px' },
+  { label: t('group.locked'), key: 'locked', align: 'center', width: '90px' },
 ])
 
-function loadData(options) {
-  lastOptions = options
-  dt.load(options)
-}
+function scopeColor(scope) { return /intern/i.test(scope) ? '#2563eb' : '#e6a019' }
 
+function loadData(options) { lastOptions = options; dt.load(options) }
 function onSearch() {
   clearTimeout(searchTimeout)
-  searchTimeout = setTimeout(() => dt.load({ page: 1, itemsPerPage: itemsPerPage.value }), 300)
+  searchTimeout = setTimeout(() => dt.load({ page: 1, itemsPerPage: lastOptions.itemsPerPage || 25 }), 300)
 }
 
-function startDelete(item) {
-  deleteTarget.value = item
-  deleteDialog.value = true
-}
+function openCreate() { editingId.value = null; editDialog.value = true }
+function openDetails(name) { editingId.value = name; editDialog.value = true }
+function onEditSaved() { editDialog.value = false; editingId.value = null; dt.load(lastOptions) }
+function onEditDeleted() { editDialog.value = false; editingId.value = null; dt.load(lastOptions) }
 
+function startDelete(item) { deleteTarget.value = item; deleteDialog.value = true }
 async function confirmDelete() {
-  if (dt.demoMode.value) {
-    errorStore.push({ message: t('company.demoDelete'), status: 0 })
-    deleteDialog.value = false
-    return
-  }
+  if (dt.demoMode.value) { errorStore.push({ message: t('company.demoDelete'), status: 0 }); deleteDialog.value = false; return }
   deleting.value = true
   await api.del(`rest/service/id/company/${deleteTarget.value.name}`)
-  deleting.value = false
-  deleteDialog.value = false
-  deleteTarget.value = null
+  deleting.value = false; deleteDialog.value = false; deleteTarget.value = null
   dt.load(lastOptions)
 }
-
-function startBulkDelete() {
-  bulkDeleteDialog.value = true
-}
-
+function startBulkDelete() { bulkDeleteDialog.value = true }
 async function confirmBulkDelete() {
-  if (dt.demoMode.value) {
-    errorStore.push({ message: t('company.demoDelete'), status: 0 })
-    bulkDeleteDialog.value = false
-    return
-  }
+  if (dt.demoMode.value) { errorStore.push({ message: t('company.demoDelete'), status: 0 }); bulkDeleteDialog.value = false; return }
   deleting.value = true
-  for (const name of selected.value) {
-    await api.del(`rest/service/id/company/${name}`)
-  }
-  deleting.value = false
-  bulkDeleteDialog.value = false
-  selected.value = []
+  for (const name of selected.value) await api.del(`rest/service/id/company/${name}`)
+  deleting.value = false; bulkDeleteDialog.value = false; selected.value = []
   dt.load(lastOptions)
 }
 
 onMounted(() => {
   appStore.setBreadcrumbs(
-    [
-      { title: t('nav.home'), to: '/' },
-      { title: t('nav.identity') },
-      { title: t('company.title') },
-    ],
+    [{ title: t('nav.home'), to: '/' }, { title: t('nav.identity') }, { title: t('company.title') }],
     { refresh: () => dt.load(lastOptions) },
   )
-  // Deep-link support. `/id/company/new` and `/id/company/<name>`
-  // both resolve here (see plugin index.js) and auto-open the dialog
-  // in the right mode so emails / bookmarks pointing at the legacy
-  // per-entity URLs still land in the list context.
   const id = route.params?.id
-  if (id === 'new' || route.path?.endsWith('/company/new')) {
-    openCreate()
-  } else if (id) {
-    openDetails(String(id))
-  }
+  if (id === 'new' || route.path?.endsWith('/company/new')) openCreate()
+  else if (id) openDetails(String(id))
 })
 </script>
 
 <style scoped>
-.search-field {
-  min-width: 200px;
-  max-width: 300px;
-  flex: 1 1 200px;
+.companies {
+  --surface: rgb(var(--v-theme-surface));
+  --ink: rgb(var(--v-theme-on-surface));
+  --ink-2: rgba(var(--v-theme-on-surface), .72);
+  --ink-3: rgba(var(--v-theme-on-surface), .55);
+  --border: rgba(var(--v-theme-on-surface), .12);
+  --border-2: rgba(var(--v-theme-on-surface), .26);
+  --hover: rgba(var(--v-theme-on-surface), .05);
+  --pill: rgba(var(--v-theme-on-surface), .06);
+  --primary: rgb(var(--v-theme-primary));
+  --accent: rgb(var(--v-theme-secondary));
+  --font: var(--v26-font, "Bricolage Grotesque", system-ui, sans-serif);
+  --mono: var(--v26-mono, "JetBrains Mono", ui-monospace, monospace);
+  color: var(--ink);
 }
+.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
+.ph-txt h1 { font-family: var(--font); font-weight: 800; letter-spacing: -.03em; font-size: 28px; margin: 0; color: var(--ink); }
+.ph-txt .sub { margin: 4px 0 0; font-size: 14px; color: var(--ink-3); font-weight: 500; }
+.ph-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
+.btn, .btn-danger { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-weight: 700; font-size: 14px; padding: 11px 17px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; transition: filter .15s; }
+.btn { color: #fff; background: linear-gradient(135deg, #ff9436, #ff5a52); box-shadow: 0 8px 18px -10px rgba(255, 90, 82, .55); }
+.btn:hover { filter: brightness(1.04); }
+.btn-danger { color: #fff; background: rgb(var(--v-theme-error)); }
+.btn-danger:hover { filter: brightness(1.06); }
+
+.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
+.tb-sp { flex: 1; }
+.search { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 520px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-3); transition: border-color .15s, box-shadow .15s; }
+.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--v-theme-secondary), .15); }
+.search input { flex: 1; border: 0; outline: 0; background: transparent; font-family: var(--font); font-size: 14px; color: var(--ink); }
+.search input::placeholder { color: var(--ink-3); }
+.bulkbar { display: flex; align-items: center; gap: 12px; }
+.bulk-count { font-weight: 700; font-size: 13px; color: var(--ink-2); }
+
+.cname { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
+.cname-ic { color: var(--ink-3); }
+.mono { font-family: var(--mono); font-size: 13px; font-weight: 600; }
+.tagdot { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; }
+.tagdot .d { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+.dash { color: var(--ink-3); }
+
+.iconbtn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid transparent; background: transparent; cursor: pointer; display: inline-grid; place-items: center; color: var(--ink-2); transition: background .12s; }
+.iconbtn:hover { background: var(--hover); }
+.popmenu { min-width: 200px; background: rgb(var(--v-theme-surface)); border: 1px solid rgba(var(--v-theme-on-surface), .12); border-radius: 12px; box-shadow: 0 16px 44px -14px rgba(0, 0, 0, .45); padding: 6px; }
+.popmenu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; cursor: pointer; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: rgb(var(--v-theme-on-surface)); padding: 10px 12px; border-radius: 8px; text-align: left; }
+.popmenu button:hover { background: rgba(var(--v-theme-on-surface), .06); }
+.popmenu button.danger { color: rgb(var(--v-theme-error)); }
+.popmenu .sep { height: 1px; background: rgba(var(--v-theme-on-surface), .12); margin: 5px 4px; }
+
+.vmodal { border-radius: 20px !important; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55) !important; }
+.vmodal-head { display: flex; align-items: center; gap: 13px; padding: 22px 24px 8px; }
+.vmodal-head .mi { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, #ff9436, #ff5a52); box-shadow: 0 8px 18px -8px rgba(255, 90, 82, .6); }
+.vmodal-head h3 { font-family: var(--font); font-weight: 800; font-size: 20px; margin: 0; flex: 1; color: var(--ink); letter-spacing: -.02em; }
+.vmodal-head h3 .who { color: #ff5a52; }
+.vmodal-head .x { width: 36px; height: 36px; border: 0; background: transparent; border-radius: 9px; cursor: pointer; display: grid; place-items: center; color: var(--ink-3); }
+.vmodal-head .x:hover { background: var(--hover); color: var(--ink); }
 </style>
diff --git a/ui/src/views/ContainerScopeView.vue b/ui/src/views/ContainerScopeView.vue
index 3ade728..6997b8d 100644
--- a/ui/src/views/ContainerScopeView.vue
+++ b/ui/src/views/ContainerScopeView.vue
@@ -1,86 +1,97 @@
+<!--
+  ScopesView — 2026 "Vibrant" Container scopes (plugin-id ContainerScopeView).
+  Tabs (group / company), small client-side dataset fed to VibrantDataTable,
+  inline Vibrant create/edit dialog + VibrantConfirmDialog. Endpoint:
+  rest/service/id/container-scope/{group|company}.
+-->
 <template>
-  <div>
-    <v-tabs v-model="activeTab" class="mb-4">
-      <v-tab value="group" prepend-icon="mdi-account-group">{{ t('nav.groups') }}</v-tab>
-      <v-tab value="company" prepend-icon="mdi-domain">{{ t('nav.companies') }}</v-tab>
-      <v-spacer />
-      <v-btn color="primary" prepend-icon="mdi-plus" @click="openNew" class="mr-2 align-self-center">{{ t('containerScope.new') }}</v-btn>
-    </v-tabs>
-
-    <v-alert v-if="error" type="warning" variant="tonal" class="mb-4">
-      {{ t('containerScope.noProvider') }}
-    </v-alert>
-
-    <v-alert v-if="demoMode" type="info" variant="tonal" density="compact" class="mb-4">
-      {{ t('containerScope.demoMode') }}
-    </v-alert>
-
-    <v-skeleton-loader v-if="loading && items.length === 0" type="table-heading, table-row@5" class="mb-4" />
-
-    <LigojDataTable filename="container-scopes.csv" v-if="!error" v-show="items.length > 0 || !loading" :headers="headers" :items="items" :loading="loading" item-value="id" hover
-      @click:row="(_, { item }) => openEdit(item)">
-      <template #header.dn="{ column }"><span class="d-inline-flex align-center"><v-icon size="small" class="mr-1">mdi-file-tree-outline</v-icon>{{ column.title }}<v-tooltip activator="parent" location="top" :text="column.title" /></span></template>
-      <template #header.locked="{ column }"><span class="d-inline-flex align-center"><v-icon size="small" class="mr-1">mdi-shield-lock-outline</v-icon>{{ column.title }}<v-tooltip activator="parent" location="top" :text="column.title" /></span></template>
-      <template #item.locked="{ item }">
+  <div class="scopes">
+    <header class="ph">
+      <div class="ph-txt">
+        <h1>{{ t('containerScope.title') }}</h1>
+        <p class="sub">{{ t('containerScope.subtitle2026') }}</p>
+      </div>
+      <div class="ph-actions">
+        <button class="btn" @click="openNew"><v-icon size="18">mdi-plus</v-icon>{{ t('containerScope.new') }}</button>
+      </div>
+    </header>
+
+    <div class="toolbar">
+      <div class="seg">
+        <button :class="{ on: activeTab === 'group' }" @click="activeTab = 'group'"><v-icon size="16">mdi-account-group</v-icon>{{ t('nav.groups') }}</button>
+        <button :class="{ on: activeTab === 'company' }" @click="activeTab = 'company'"><v-icon size="16">mdi-domain</v-icon>{{ t('nav.companies') }}</button>
+      </div>
+      <label class="search">
+        <v-icon size="18">mdi-magnify</v-icon>
+        <input v-model="search" :placeholder="t('common.search')" />
+      </label>
+    </div>
+
+    <v-alert v-if="error" type="warning" variant="tonal" class="mb-4" rounded="lg">{{ t('containerScope.noProvider') }}</v-alert>
+    <v-alert v-if="demoMode" type="info" variant="tonal" density="compact" class="mb-4" rounded="lg">{{ t('containerScope.demoMode') }}</v-alert>
+
+    <VibrantDataTable v-if="!error" :headers="headers" :items="filteredItems" :items-length="filteredItems.length" :loading="loading"
+      item-value="id" @row-click="openEdit">
+      <template #cell.name="{ item }">
+        <span class="sname"><v-icon size="16" class="sname-ic">mdi-file-tree-outline</v-icon><span>{{ item.name }}</span></span>
+      </template>
+      <template #cell.dn="{ item }"><code class="dn">{{ item.dn || '—' }}</code></template>
+      <template #cell.locked="{ item }">
         <v-tooltip v-if="item.locked" :text="t('user.statusLocked')" location="top">
-          <template #activator="{ props: tt }">
-            <v-icon v-bind="tt" color="warning" size="small">mdi-lock</v-icon>
-          </template>
+          <template #activator="{ props: tt }"><v-icon v-bind="tt" color="warning" size="19">mdi-lock</v-icon></template>
         </v-tooltip>
+        <span v-else class="dash">—</span>
       </template>
-      <template #item.actions="{ item }">
-        <v-btn icon size="small" variant="text" @click.stop="openEdit(item)">
-          <v-icon size="small">mdi-pencil</v-icon>
-          <v-tooltip activator="parent" location="top" :text="t('common.edit')" />
-        </v-btn>
-        <v-btn icon size="small" variant="text" color="error" @click.stop="startDelete(item)" :disabled="item.locked">
-          <v-icon size="small">mdi-delete</v-icon>
-          <v-tooltip activator="parent" location="top" :text="t('common.delete')" />
-        </v-btn>
+      <template #actions="{ item }">
+        <v-menu location="bottom end">
+          <template #activator="{ props }">
+            <button class="iconbtn" v-bind="props" :aria-label="t('common.edit')" @click.stop><v-icon size="18">mdi-cog</v-icon></button>
+          </template>
+          <div class="popmenu">
+            <button @click="openEdit(item)"><v-icon size="18">mdi-pencil</v-icon>{{ t('common.edit') }}</button>
+            <div class="sep" />
+            <button class="danger" :disabled="item.locked" @click="!item.locked && startDelete(item)"><v-icon size="18">mdi-delete</v-icon>{{ t('common.delete') }}</button>
+          </div>
+        </v-menu>
       </template>
-    </LigojDataTable>
-
-    <v-dialog v-model="editDialog" max-width="500">
-      <v-card>
-        <v-card-title class="d-flex align-center ga-2">
-          <v-icon color="primary">{{ TYPE_ICONS.SCOPE }}</v-icon>
-          <span>{{ editTarget?.id ? t('containerScope.edit') : t('containerScope.new') }}</span>
-        </v-card-title>
-        <v-card-text>
+    </VibrantDataTable>
+
+    <!-- Create / edit dialog (Vibrant chrome). -->
+    <v-dialog v-model="editDialog" max-width="520">
+      <v-card class="vmodal">
+        <div class="vmodal-head">
+          <span class="mi"><v-icon color="#fff">{{ TYPE_ICONS.SCOPE }}</v-icon></span>
+          <h3>{{ editTarget?.id ? t('containerScope.edit') : t('containerScope.new') }}</h3>
+          <button class="x" :aria-label="t('common.cancel')" @click="editDialog = false"><v-icon size="20">mdi-close</v-icon></button>
+        </div>
+        <v-card-text class="vmodal-body">
           <v-form ref="formRef" @submit.prevent="save">
-            <v-text-field v-model="editForm.name" :label="t('common.name')" :rules="[rules.required]" variant="outlined" class="mb-2" />
-            <v-text-field v-if="editTarget?.id" v-model="editForm.dn" :label="t('containerScope.dn')" variant="outlined" class="mb-2" disabled />
+            <v-text-field v-model="editForm.name" prepend-inner-icon="mdi-form-textbox" :label="t('common.name')" :rules="[rules.required]" variant="outlined" class="mb-2" autofocus />
+            <v-text-field v-if="editTarget?.id" v-model="editForm.dn" prepend-inner-icon="mdi-file-tree-outline" :label="t('containerScope.dn')" variant="outlined" disabled />
           </v-form>
         </v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn variant="text" @click="editDialog = false">{{ t('common.cancel') }}</v-btn>
-          <v-btn color="primary" variant="elevated" :loading="saving" @click="save">{{ t('common.save') }}</v-btn>
-        </v-card-actions>
+        <div class="vmodal-foot">
+          <span class="foot-sp" />
+          <button class="mbtn ghost" @click="editDialog = false">{{ t('common.cancel') }}</button>
+          <button class="mbtn primary" :disabled="saving" @click="save">
+            <span v-if="saving" class="mspin" aria-hidden="true" /><v-icon v-else size="18">mdi-content-save</v-icon>{{ t('common.save') }}
+          </button>
+        </div>
       </v-card>
     </v-dialog>
 
-    <v-dialog v-model="deleteDialog" max-width="400">
-      <v-card>
-        <v-card-title class="d-flex align-center ga-2">
-          <v-icon color="primary">{{ TYPE_ICONS.SCOPE }}</v-icon>
-          <span>{{ t('containerScope.deleteTitle') }}</span>
-        </v-card-title>
-        <v-card-text>{{ t('containerScope.deleteConfirm', { name: deleteTarget?.name }) }}</v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn variant="text" @click="deleteDialog = false">{{ t('common.cancel') }}</v-btn>
-          <v-btn color="error" variant="elevated" :loading="deleting" @click="confirmDelete">{{ t('common.delete') }}</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+    <LigojConfirmDialog v-model="deleteDialog" :title="t('containerScope.deleteTitle')" :icon="TYPE_ICONS.SCOPE" :confirm-label="t('common.delete')" confirm-color="error" :loading="deleting" @confirm="confirmDelete">
+      {{ t('containerScope.deleteConfirmBefore') }}<strong class="text-error">{{ deleteTarget?.name }}</strong>{{ t('containerScope.deleteConfirmAfter') }}
+    </LigojConfirmDialog>
   </div>
 </template>
 
 <script setup>
 import { ref, computed, watch, onMounted } from 'vue'
-import { useApi, useAppStore, useErrorStore, useI18nStore, LigojDataTable } from '@ligoj/host'
+import { useApi, useAppStore, useErrorStore, useI18nStore } from '@ligoj/host'
 import { TYPE_ICONS } from '../composables/delegateTypes.js'
+import VibrantDataTable from '@/components/VibrantDataTable.vue'
+import LigojConfirmDialog from '@/components/VibrantConfirmDialog.vue'
 
 const api = useApi()
 const appStore = useAppStore()
@@ -101,28 +112,33 @@ const DEMO_COMPANY_SCOPES = [
 ]
 
 const items = ref([])
-const totalItems = ref(0)
 const loading = ref(false)
 const error = ref(null)
 const demoMode = ref(false)
+const search = ref('')
+
+const filteredItems = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  if (!q) return items.value
+  return items.value.filter((s) => (s.name || '').toLowerCase().includes(q) || (s.dn || '').toLowerCase().includes(q))
+})
 
 const headers = computed(() => [
-  { title: t('common.name'), key: 'name', sortable: true },
-  { title: t('containerScope.dn'), key: 'dn', sortable: true },
-  { title: t('common.status'), key: 'locked', sortable: false, width: '80px' },
-  { title: '', key: 'actions', sortable: false, width: '120px', align: 'end' },
+  { label: t('common.name'), key: 'name' },
+  { label: t('containerScope.dn'), key: 'dn' },
+  { label: t('common.status'), key: 'locked', align: 'center', width: '90px' },
 ])
 
 const formRef = ref(null)
 const editDialog = ref(false)
 const editTarget = ref(null)
-const editForm = ref({ name: '' })
+const editForm = ref({ name: '', dn: '' })
 const saving = ref(false)
 const deleteDialog = ref(false)
 const deleteTarget = ref(null)
 const deleting = ref(false)
 
-const rules = { required: v => !!v || t('common.required') }
+const rules = { required: (v) => !!v || t('common.required') }
 
 async function loadData() {
   loading.value = true
@@ -131,52 +147,30 @@ async function loadData() {
     const data = await api.get(`rest/service/id/container-scope/${activeTab.value}`)
     if (data && !data.code) {
       items.value = Array.isArray(data) ? data : (data.data || [])
-      totalItems.value = items.value.length
       demoMode.value = false
     } else {
       demoMode.value = true
       errorStore.clear()
       items.value = activeTab.value === 'group' ? DEMO_GROUP_SCOPES : DEMO_COMPANY_SCOPES
-      totalItems.value = items.value.length
     }
   } catch {
     demoMode.value = true
     errorStore.clear()
     items.value = activeTab.value === 'group' ? DEMO_GROUP_SCOPES : DEMO_COMPANY_SCOPES
-    totalItems.value = items.value.length
   }
   loading.value = false
 }
 
-watch(activeTab, () => {
-  loadData()
-})
-
-function openNew() {
-  editTarget.value = null
-  editForm.value = { name: '', dn: '' }
-  editDialog.value = true
-}
-
-function openEdit(item) {
-  editTarget.value = item
-  editForm.value = { name: item.name, dn: item.dn || '' }
-  editDialog.value = true
-}
+watch(activeTab, () => { search.value = ''; loadData() })
 
-function startDelete(item) {
-  deleteTarget.value = item
-  deleteDialog.value = true
-}
+function openNew() { editTarget.value = null; editForm.value = { name: '', dn: '' }; editDialog.value = true }
+function openEdit(item) { editTarget.value = item; editForm.value = { name: item.name, dn: item.dn || '' }; editDialog.value = true }
+function startDelete(item) { deleteTarget.value = item; deleteDialog.value = true }
 
 async function save() {
   const { valid } = await formRef.value.validate()
   if (!valid) return
-  if (demoMode.value) {
-    errorStore.push({ message: t('containerScope.demoSave'), status: 0 })
-    editDialog.value = false
-    return
-  }
+  if (demoMode.value) { errorStore.push({ message: t('containerScope.demoSave'), status: 0 }); editDialog.value = false; return }
   saving.value = true
   const payload = { name: editForm.value.name }
   if (editTarget.value?.id) {
@@ -190,11 +184,7 @@ async function save() {
 }
 
 async function confirmDelete() {
-  if (demoMode.value) {
-    errorStore.push({ message: t('containerScope.demoDelete'), status: 0 })
-    deleteDialog.value = false
-    return
-  }
+  if (demoMode.value) { errorStore.push({ message: t('containerScope.demoDelete'), status: 0 }); deleteDialog.value = false; return }
   deleting.value = true
   await api.del(`rest/service/id/container-scope/${activeTab.value}/${deleteTarget.value.id}`)
   deleting.value = false
@@ -204,13 +194,76 @@ async function confirmDelete() {
 
 onMounted(() => {
   appStore.setBreadcrumbs(
-    [
-      { title: t('nav.home'), to: '/' },
-      { title: t('nav.identity') },
-      { title: t('containerScope.title') },
-    ],
+    [{ title: t('nav.home'), to: '/' }, { title: t('nav.identity') }, { title: t('containerScope.title') }],
     { refresh: loadData },
   )
   loadData()
 })
 </script>
+
+<style scoped>
+.scopes {
+  --surface: rgb(var(--v-theme-surface));
+  --ink: rgb(var(--v-theme-on-surface));
+  --ink-2: rgba(var(--v-theme-on-surface), .72);
+  --ink-3: rgba(var(--v-theme-on-surface), .55);
+  --border: rgba(var(--v-theme-on-surface), .12);
+  --border-2: rgba(var(--v-theme-on-surface), .26);
+  --hover: rgba(var(--v-theme-on-surface), .06);
+  --pill: rgba(var(--v-theme-on-surface), .06);
+  --accent: rgb(var(--v-theme-secondary));
+  --font: var(--v26-font, "Bricolage Grotesque", system-ui, sans-serif);
+  --mono: var(--v26-mono, "JetBrains Mono", ui-monospace, monospace);
+  color: var(--ink);
+}
+.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
+.ph-txt h1 { font-family: var(--font); font-weight: 800; letter-spacing: -.03em; font-size: 28px; margin: 0; color: var(--ink); }
+.ph-txt .sub { margin: 4px 0 0; font-size: 14px; color: var(--ink-3); font-weight: 500; }
+.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-weight: 700; font-size: 14px; padding: 11px 17px; border-radius: 12px; cursor: pointer; border: 0; color: #fff; background: linear-gradient(135deg, #ff9436, #ff5a52); box-shadow: 0 8px 18px -10px rgba(255, 90, 82, .55); transition: filter .15s; }
+.btn:hover { filter: brightness(1.04); }
+
+.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
+/* Segmented control (tabs). */
+.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
+.seg button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; padding: 8px 15px; border-radius: 9px; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: 13px; color: var(--ink-3); transition: background .15s, color .15s; }
+.seg button:hover { color: var(--ink); }
+.seg button.on { color: #fff; background: linear-gradient(135deg, #ff9436, #ff5a52); }
+.search { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 420px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-3); transition: border-color .15s, box-shadow .15s; }
+.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--v-theme-secondary), .15); }
+.search input { flex: 1; border: 0; outline: 0; background: transparent; font-family: var(--font); font-size: 14px; color: var(--ink); }
+.search input::placeholder { color: var(--ink-3); }
+
+.sname { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
+.sname-ic { color: var(--ink-3); }
+.dn { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
+.dash { color: var(--ink-3); }
+
+.iconbtn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid transparent; background: transparent; cursor: pointer; display: inline-grid; place-items: center; color: var(--ink-2); transition: background .12s; }
+.iconbtn:hover { background: var(--hover); }
+.popmenu { min-width: 190px; background: rgb(var(--v-theme-surface)); border: 1px solid rgba(var(--v-theme-on-surface), .12); border-radius: 12px; box-shadow: 0 16px 44px -14px rgba(0, 0, 0, .45); padding: 6px; }
+.popmenu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; cursor: pointer; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: rgb(var(--v-theme-on-surface)); padding: 10px 12px; border-radius: 8px; text-align: left; }
+.popmenu button:hover { background: rgba(var(--v-theme-on-surface), .06); }
+.popmenu button:disabled { opacity: .4; cursor: not-allowed; }
+.popmenu button.danger { color: rgb(var(--v-theme-error)); }
+.popmenu .sep { height: 1px; background: rgba(var(--v-theme-on-surface), .12); margin: 5px 4px; }
+
+.vmodal { border-radius: 20px !important; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55) !important; }
+.vmodal-head { display: flex; align-items: center; gap: 13px; padding: 22px 24px 8px; }
+.vmodal-head .mi { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, #ff9436, #ff5a52); box-shadow: 0 8px 18px -8px rgba(255, 90, 82, .6); }
+.vmodal-head h3 { font-family: var(--font); font-weight: 800; font-size: 20px; margin: 0; flex: 1; color: var(--ink); letter-spacing: -.02em; }
+.vmodal-head .x { width: 36px; height: 36px; border: 0; background: transparent; border-radius: 9px; cursor: pointer; display: grid; place-items: center; color: var(--ink-3); }
+.vmodal-head .x:hover { background: var(--hover); color: var(--ink); }
+.vmodal-body { padding: 14px 24px 4px !important; }
+.vmodal :deep(.v-field) { border-radius: 12px; font-family: var(--font); }
+.vmodal :deep(.v-field__prepend-inner .v-icon) { opacity: .55; }
+.vmodal-foot { display: flex; align-items: center; gap: 10px; padding: 12px 24px 22px; }
+.foot-sp { flex: 1; }
+.mbtn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-weight: 700; font-size: 14px; padding: 10px 17px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; transition: filter .15s, background .15s, border-color .15s; }
+.mbtn.primary { color: #fff; background: linear-gradient(135deg, #ff9436, #ff5a52); box-shadow: 0 8px 18px -10px rgba(255, 90, 82, .55); }
+.mbtn.primary:hover:not(:disabled) { filter: brightness(1.04); }
+.mbtn.ghost { color: var(--ink-2); background: transparent; border-color: var(--border); }
+.mbtn.ghost:hover { background: var(--hover); border-color: var(--border-2); }
+.mbtn:disabled { opacity: .6; cursor: default; }
+.mspin { width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: sspin .7s linear infinite; }
+@keyframes sspin { to { transform: rotate(360deg); } }
+</style>
diff --git a/ui/src/views/DelegateEditDialog.vue b/ui/src/views/DelegateEditDialog.vue
index c4b29a1..1a3940d 100644
--- a/ui/src/views/DelegateEditDialog.vue
+++ b/ui/src/views/DelegateEditDialog.vue
@@ -6,14 +6,15 @@
          one-way so a close request (Cancel / Esc / scrim) can be vetoed
          by the unsaved-changes guard before it actually closes — same
          pattern as UserEditDialog. -->
-    <v-dialog :model-value="modelValue" @update:model-value="onDialogModel" max-width="700" scrollable>
-      <v-card>
-        <v-card-title class="d-flex align-center ga-2">
-          <v-icon color="primary">{{ TYPE_ICONS.DELEGATE }}</v-icon>
-          <span>{{ isEdit ? t('delegate.edit') : t('delegate.new') }}</span>
-        </v-card-title>
-
-        <v-card-text>
+    <v-dialog :model-value="modelValue" @update:model-value="onDialogModel" max-width="640" scrollable>
+      <v-card class="vmodal">
+        <div class="vmodal-head">
+          <span class="mi"><v-icon color="#fff">{{ TYPE_ICONS.DELEGATE }}</v-icon></span>
+          <h3>{{ isEdit ? t('delegate.edit') : t('delegate.new') }}</h3>
+          <button class="x" :aria-label="t('common.cancel')" @click="requestClose"><v-icon size="20">mdi-close</v-icon></button>
+        </div>
+
+        <v-card-text class="vmodal-body">
           <v-skeleton-loader v-if="loading" type="article" />
 
           <v-form v-else ref="formRef" @submit.prevent="save">
@@ -93,16 +94,16 @@
           </v-form>
         </v-card-text>
 
-        <v-card-actions>
-          <v-btn v-if="isEdit" color="error" variant="tonal" :disabled="loading" @click="confirmDelete = true">
-            <v-icon start>mdi-delete</v-icon> {{ t('common.delete') }}
-          </v-btn>
-          <v-spacer />
-          <v-btn variant="text" @click="requestClose">{{ t('common.cancel') }}</v-btn>
-          <v-btn color="primary" variant="elevated" :loading="saving" :disabled="loading" @click="save">
-            <v-icon start>mdi-content-save</v-icon> {{ t('common.save') }}
-          </v-btn>
-        </v-card-actions>
+        <div class="vmodal-foot">
+          <button v-if="isEdit" class="mbtn ghost-danger" :disabled="loading" @click="confirmDelete = true">
+            <v-icon size="18">mdi-delete</v-icon>{{ t('common.delete') }}
+          </button>
+          <span class="foot-sp" />
+          <button class="mbtn ghost" @click="requestClose">{{ t('common.cancel') }}</button>
+          <button class="mbtn primary" :disabled="loading || saving" @click="save">
+            <span v-if="saving" class="mspin" aria-hidden="true" /><v-icon v-else size="18">mdi-content-save</v-icon>{{ t('common.save') }}
+          </button>
+        </div>
       </v-card>
     </v-dialog>
 
@@ -129,8 +130,9 @@
 
 <script setup>
 import { ref, computed, watch, nextTick } from 'vue'
-import { useApi, useFormGuard, useI18nStore, LigojConfirmDialog } from '@ligoj/host'
+import { useApi, useFormGuard, useI18nStore } from '@ligoj/host'
 import { TYPE_ICONS, RECEIVER_TYPES, RESOURCE_TYPES } from '../composables/delegateTypes.js'
+import LigojConfirmDialog from '@/components/VibrantConfirmDialog.vue'
 
 const props = defineProps({
   // Dialog visibility (v-model).
@@ -454,3 +456,41 @@ async function remove() {
   emit('update:modelValue', false)
 }
 </script>
+
+<style scoped>
+/* Vibrant dialog chrome (shared language with UserEditDialog). Vars on the
+   .vmodal card so they reach the teleported dialog content. */
+.vmodal {
+  --ink: rgb(var(--v-theme-on-surface));
+  --ink-2: rgba(var(--v-theme-on-surface), .72);
+  --ink-3: rgba(var(--v-theme-on-surface), .5);
+  --border: rgba(var(--v-theme-on-surface), .14);
+  --border-2: rgba(var(--v-theme-on-surface), .26);
+  --hover: rgba(var(--v-theme-on-surface), .06);
+  --font: var(--v26-font, "Bricolage Grotesque", system-ui, sans-serif);
+  border-radius: 20px !important;
+  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55) !important;
+}
+.vmodal-head { display: flex; align-items: center; gap: 13px; padding: 22px 24px 8px; }
+.vmodal-head .mi { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, #ff9436, #ff5a52); box-shadow: 0 8px 18px -8px rgba(255, 90, 82, .6); }
+.vmodal-head h3 { font-family: var(--font); font-weight: 800; font-size: 20px; margin: 0; flex: 1; color: var(--ink); letter-spacing: -.02em; }
+.vmodal-head .x { width: 36px; height: 36px; border: 0; background: transparent; border-radius: 9px; cursor: pointer; display: grid; place-items: center; color: var(--ink-3); }
+.vmodal-head .x:hover { background: var(--hover); color: var(--ink); }
+.vmodal-body { padding: 12px 24px 6px !important; }
+.vmodal :deep(.v-field) { border-radius: 12px; font-family: var(--font); }
+.vmodal :deep(.v-field__prepend-inner .v-icon) { opacity: .55; }
+.vmodal :deep(.v-label) { font-weight: 600; }
+
+.vmodal-foot { display: flex; align-items: center; gap: 10px; padding: 14px 24px 22px; }
+.foot-sp { flex: 1; }
+.mbtn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-weight: 700; font-size: 14px; padding: 10px 17px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; transition: filter .15s, background .15s, border-color .15s; }
+.mbtn.primary { color: #fff; background: linear-gradient(135deg, #ff9436, #ff5a52); box-shadow: 0 8px 18px -10px rgba(255, 90, 82, .55); }
+.mbtn.primary:hover:not(:disabled) { filter: brightness(1.04); }
+.mbtn.ghost { color: var(--ink-2); background: transparent; border-color: var(--border); }
+.mbtn.ghost:hover:not(:disabled) { background: var(--hover); border-color: var(--border-2); }
+.mbtn.ghost-danger { color: rgb(var(--v-theme-error)); background: transparent; border-color: rgba(var(--v-theme-error), .35); }
+.mbtn.ghost-danger:hover:not(:disabled) { background: rgba(var(--v-theme-error), .08); }
+.mbtn:disabled { opacity: .6; cursor: default; }
+.mspin { width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: dspin .7s linear infinite; }
+@keyframes dspin { to { transform: rotate(360deg); } }
+</style>
diff --git a/ui/src/views/DelegateListView.vue b/ui/src/views/DelegateListView.vue
index c00c271..ef27fca 100644
--- a/ui/src/views/DelegateListView.vue
+++ b/ui/src/views/DelegateListView.vue
@@ -1,236 +1,195 @@
+<!--
+  DelegatesView — 2026 "Vibrant" Delegations list (plugin-id). Same recipe:
+  VibrantDataTable + reused DelegateEditDialog (Vibrant) + VibrantConfirmDialog,
+  on the security/delegate endpoint. Columns: receiver, resource, admin, write.
+-->
 <template>
-  <div>
-    <div class="d-flex flex-wrap align-center mb-4 ga-2">
-      <v-spacer />
-      <v-text-field v-model="dt.search.value" prepend-inner-icon="mdi-magnify" :label="t('common.search')" variant="outlined" density="compact" hide-details class="search-field"
-        @update:model-value="onSearch" />
-      <v-btn color="primary" prepend-icon="mdi-plus" @click="openDialog(null)">
-        {{ t('delegate.new') }}
-      </v-btn>
+  <div class="delegates">
+    <header class="ph">
+      <div class="ph-txt">
+        <h1>{{ t('delegate.title') }}</h1>
+        <p class="sub">{{ t('delegate.subtitle2026') }}</p>
+      </div>
+      <div class="ph-actions">
+        <button class="btn" @click="openDialog(null)"><v-icon size="18">mdi-plus</v-icon>{{ t('delegate.new') }}</button>
+      </div>
+    </header>
+
+    <div class="toolbar">
+      <label class="search">
+        <v-icon size="18">mdi-magnify</v-icon>
+        <input v-model="dt.search.value" :placeholder="t('delegate.searchPlaceholder') || t('common.search')" @input="onSearch" />
+      </label>
+      <span class="tb-sp" />
+      <v-slide-x-transition>
+        <div v-if="selected.length" class="bulkbar">
+          <span class="bulk-count">{{ selected.length }} {{ t('common.selected') }}</span>
+          <button class="btn-danger" @click="startBulkDelete"><v-icon size="16">mdi-delete</v-icon>{{ t('common.delete') }}</button>
+        </div>
+      </v-slide-x-transition>
     </div>
 
-    <v-alert v-if="dt.error.value" type="warning" variant="tonal" class="mb-4">
-      {{ dt.error.value }}
-    </v-alert>
-
-    <v-slide-y-transition>
-      <v-toolbar v-if="selected.length" density="compact" color="primary" rounded class="mb-4">
-        <v-toolbar-title>{{ selected.length }} {{ t('common.selected') }}</v-toolbar-title>
-        <v-spacer />
-        <v-btn variant="elevated" color="error" prepend-icon="mdi-delete" @click="startBulkDelete">
-          {{ t('common.delete') }}
-        </v-btn>
-      </v-toolbar>
-    </v-slide-y-transition>
-
-    <v-skeleton-loader v-if="dt.loading.value && dt.items.value.length === 0" type="table-heading, table-row@5" class="mb-4" />
-
-    <LigojDataTableServer filename="delegates.csv" :fetch-all="dt.loadAll" v-if="!dt.error.value" v-show="dt.items.value.length > 0 || !dt.loading.value" v-model="selected"
-      v-model:items-per-page="itemsPerPage" :headers="headers" :items="dt.items.value" :items-length="dt.totalItems.value" :loading="dt.loading.value" item-value="id" show-select hover
-      @update:options="loadData" @click:row="(_, { item }) => openDialog(item.id)">
-      <!-- Receiver column (chantier D5): the receiver's *kind* is rendered
-           as a small leading icon (Account / Group / Domain) followed by
-           its identifier. The dedicated Type chip column has been removed
-           entirely (chantier D6+D8).
-           Note: backend stores receiverType in lowercase ("company", …)
-           for some rows, so normalize before the TYPE_ICONS lookup —
-           same rationale as DelegateEditDialog.loadOnOpen(). -->
-      <template #header.receiver="{ column }"><span class="d-inline-flex align-center"><v-icon size="small" class="mr-1">mdi-account-arrow-right-outline</v-icon>{{ column.title }}<v-tooltip activator="parent" location="top" :text="column.title" /></span></template>
-      <template #item.receiver="{ item }">
-        <v-tooltip :text="t('delegate.type.' + (item.receiverType || '').toLowerCase())" location="top">
-          <template #activator="{ props: tt }">
-            <v-icon v-bind="tt" size="small" class="me-1">{{ TYPE_ICONS[item.receiverType?.toUpperCase()] || 'mdi-account' }}</v-icon>
-          </template>
-        </v-tooltip>
-        {{ item.receiver?.name || item.receiver?.id || item.name || '-' }}
-      </template>
-      <!-- Resource column (chantier D5+D8): fuses the former Type and
-           Resource columns. The kind is the leading icon (Account /
-           Group / Domain / File-tree); the text is the resource name
-           (or DN for TREE delegates). Same lowercase-normalize as above. -->
-      <template #item.name="{ item }">
-        <v-tooltip :text="t('delegate.type.' + (item.type || '').toLowerCase())" location="top">
-          <template #activator="{ props: tt }">
-            <v-icon v-bind="tt" size="small" class="me-1">{{ TYPE_ICONS[item.type?.toUpperCase()] || '' }}</v-icon>
-          </template>
-        </v-tooltip>
-        {{ item.name || '-' }}
-      </template>
-      <template #item.canAdmin="{ item }">
-        <div class="text-center">
-          <v-tooltip v-if="item.canAdmin" :text="t('delegate.adminGranted')" location="top">
-            <template #activator="{ props: tt }">
-              <v-icon v-bind="tt" color="success" size="small">mdi-check-circle</v-icon>
-            </template>
+    <v-alert v-if="dt.error.value" type="warning" variant="tonal" class="mb-4" rounded="lg">{{ dt.error.value }}</v-alert>
+
+    <VibrantDataTable v-if="!dt.error.value" :headers="headers" :items="dt.items.value" :items-length="dt.totalItems.value" :loading="dt.loading.value"
+      selectable v-model="selected" item-value="id" default-sort="receiver" @update:options="loadData" @row-click="(item) => openDialog(item.id)">
+      <template #cell.receiver="{ item }">
+        <span class="rcv">
+          <v-tooltip :text="t('delegate.type.' + (item.receiverType || '').toLowerCase())" location="top">
+            <template #activator="{ props: tt }"><v-icon v-bind="tt" size="16" class="rcv-ic">{{ TYPE_ICONS[item.receiverType?.toUpperCase()] || 'mdi-account' }}</v-icon></template>
           </v-tooltip>
-        </div>
+          <span class="rcv-name">{{ item.receiver?.name || item.receiver?.id || item.name || '—' }}</span>
+        </span>
       </template>
-      <template #item.canWrite="{ item }">
-        <div class="text-center">
-          <v-tooltip v-if="item.canWrite" :text="t('delegate.writeGranted')" location="top">
-            <template #activator="{ props: tt }">
-              <v-icon v-bind="tt" color="success" size="small">mdi-check-circle</v-icon>
-            </template>
+      <template #cell.name="{ item }">
+        <span class="res">
+          <v-tooltip :text="t('delegate.type.' + (item.type || '').toLowerCase())" location="top">
+            <template #activator="{ props: tt }"><v-icon v-bind="tt" size="16" class="res-ic">{{ TYPE_ICONS[item.type?.toUpperCase()] || 'mdi-shield-key-outline' }}</v-icon></template>
           </v-tooltip>
-        </div>
+          <span>{{ item.name || '—' }}</span>
+        </span>
+      </template>
+      <template #cell.canAdmin="{ item }">
+        <span class="bdot" :class="{ on: item.canAdmin }" :title="item.canAdmin ? t('delegate.adminGranted') : ''" />
       </template>
-      <template #item.actions="{ item }">
-        <v-btn icon size="small" variant="text" @click.stop="openDialog(item.id)">
-          <v-icon size="small">mdi-pencil</v-icon>
-          <v-tooltip activator="parent" :text="t('common.edit')" location="top" />
-        </v-btn>
-        <v-btn icon size="small" variant="text" color="error" @click.stop="startDelete(item)">
-          <v-icon size="small">mdi-delete</v-icon>
-          <v-tooltip activator="parent" location="top" :text="t('common.delete')" />
-        </v-btn>
+      <template #cell.canWrite="{ item }">
+        <span class="bdot" :class="{ on: item.canWrite }" :title="item.canWrite ? t('delegate.writeGranted') : ''" />
+      </template>
+      <template #actions="{ item }">
+        <v-menu location="bottom end">
+          <template #activator="{ props }">
+            <button class="iconbtn" v-bind="props" :aria-label="t('common.edit')" @click.stop><v-icon size="18">mdi-cog</v-icon></button>
+          </template>
+          <div class="popmenu">
+            <button @click="openDialog(item.id)"><v-icon size="18">mdi-pencil</v-icon>{{ t('common.edit') }}</button>
+            <div class="sep" />
+            <button class="danger" @click="startDelete(item)"><v-icon size="18">mdi-delete</v-icon>{{ t('common.delete') }}</button>
+          </div>
+        </v-menu>
       </template>
-    </LigojDataTableServer>
-
-    <v-alert v-if="!dt.loading.value && !dt.error.value && dt.totalItems.value === 0" type="info" variant="tonal" class="mt-4">
-      {{ t('delegate.empty') }}
-    </v-alert>
-
-    <!-- Receiver name rendered in bold red via the LigojConfirmDialog
-         default slot (issue #37), matching the pattern of PR #39
-         for User / Company / Group / GroupMembers and the in-popup
-         delete confirmation of DelegateEditDialog. -->
-    <LigojConfirmDialog
-      v-model="deleteDialog"
-      :title="t('delegate.deleteTitle')"
-      :icon="TYPE_ICONS.DELEGATE"
-      :confirm-label="t('common.delete')"
-      confirm-color="error"
-      :loading="deleting"
-      @confirm="confirmDelete"
-    >
+    </VibrantDataTable>
+
+    <LigojConfirmDialog v-model="deleteDialog" :title="t('delegate.deleteTitle')" :icon="TYPE_ICONS.DELEGATE" :confirm-label="t('common.delete')" confirm-color="error" :loading="deleting" @confirm="confirmDelete">
       {{ t('delegate.deleteConfirmBefore') }}<strong class="text-error">{{ deleteTarget?.receiver?.name || deleteTarget?.name || deleteTarget?.id }}</strong>{{ t('delegate.deleteConfirmAfter') }}
     </LigojConfirmDialog>
+    <LigojConfirmDialog v-model="bulkDeleteDialog" :title="t('common.bulkDeleteTitle')" :icon="TYPE_ICONS.DELEGATE" :confirm-label="t('common.delete')" confirm-color="error" :loading="deleting" @confirm="confirmBulkDelete">
+      {{ t('common.bulkDeleteConfirmBefore') }}<strong class="text-error">{{ selected.length }}</strong>{{ t('common.bulkDeleteConfirmAfter') }}
+    </LigojConfirmDialog>
 
-    <v-dialog v-model="bulkDeleteDialog" max-width="400">
-      <v-card>
-        <v-card-title class="d-flex align-center ga-2">
-          <v-icon color="primary">{{ TYPE_ICONS.DELEGATE }}</v-icon>
-          <span>{{ t('common.bulkDeleteTitle') }}</span>
-        </v-card-title>
-        <v-card-text>{{ t('common.bulkDeleteConfirm', { count: selected.length }) }}</v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn variant="text" @click="bulkDeleteDialog = false">{{ t('common.cancel') }}</v-btn>
-          <v-btn color="error" variant="elevated" :loading="deleting" @click="confirmBulkDelete">{{ t('common.delete') }}</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <!-- Delegate create/edit popup (chantier D3). editDelegateId null = create mode. -->
     <DelegateEditDialog v-model="editDialog" :delegate-id="editDelegateId" @saved="onDelegateSaved" />
   </div>
 </template>
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import { useDataTable, useApi, useAppStore, useI18nStore, LigojDataTableServer, LigojConfirmDialog } from '@ligoj/host'
-import DelegateEditDialog from './DelegateEditDialog.vue'
+import { useDataTable, useApi, useAppStore, useErrorStore, useI18nStore } from '@ligoj/host'
 import { TYPE_ICONS } from '../composables/delegateTypes.js'
+import VibrantDataTable from '@/components/VibrantDataTable.vue'
+import DelegateEditDialog from './DelegateEditDialog.vue'
+import LigojConfirmDialog from '@/components/VibrantConfirmDialog.vue'
 
 const appStore = useAppStore()
 const api = useApi()
+const errorStore = useErrorStore()
 const i18n = useI18nStore()
 const t = i18n.t
 
 const dt = useDataTable('security/delegate', { defaultSort: 'receiver' })
-const itemsPerPage = ref(25)
 let searchTimeout = null
+let lastOptions = { page: 1, itemsPerPage: 25, sortBy: [] }
 
 const selected = ref([])
 const deleteDialog = ref(false)
 const deleteTarget = ref(null)
 const deleting = ref(false)
 const bulkDeleteDialog = ref(false)
-let lastOptions = {}
-
-// Delegate create/edit dialog state. editDelegateId null = create mode.
 const editDialog = ref(false)
 const editDelegateId = ref(null)
 
-// Headers revised per Fabrice's 22-may review (chantiers D5+D6+D8):
-//  - Receiver gets a leading kind icon (slot below).
-//  - Type and Resource are fused into a single "Resource" column whose
-//    text is the resource name and whose leading icon is the type. The
-//    Type chip column is gone.
 const headers = computed(() => [
-  { title: t('delegate.receiver'), key: 'receiver', sortable: true },
-  { title: t('delegate.resource'), key: 'name', sortable: false },
-  { title: t('delegate.admin'), key: 'canAdmin', sortable: false, width: '80px', align: 'center', tooltip: t('delegate.adminHelp') },
-  { title: t('delegate.write'), key: 'canWrite', sortable: false, width: '80px', align: 'center', tooltip: t('delegate.writeHelp') },
-  { title: '', key: 'actions', sortable: false, width: '120px', align: 'center' },
+  { label: t('delegate.receiver'), key: 'receiver', sortable: true },
+  { label: t('delegate.resource'), key: 'name' },
+  { label: t('delegate.admin'), key: 'canAdmin', align: 'center', width: '90px' },
+  { label: t('delegate.write'), key: 'canWrite', align: 'center', width: '90px' },
 ])
 
-function loadData(options) {
-  lastOptions = options
-  dt.load(options)
-}
-
+function loadData(options) { lastOptions = options; dt.load(options) }
 function onSearch() {
   clearTimeout(searchTimeout)
-  searchTimeout = setTimeout(() => dt.load({ page: 1, itemsPerPage: itemsPerPage.value }), 300)
+  searchTimeout = setTimeout(() => dt.load({ page: 1, itemsPerPage: lastOptions.itemsPerPage || 25 }), 300)
 }
 
-function openDialog(id = null) {
-  editDelegateId.value = id
-  editDialog.value = true
-}
-
-function onDelegateSaved() {
-  // Reload the current page after a create/edit/delete performed from
-  // the dialog so the list reflects the new state.
-  dt.load(lastOptions)
-}
-
-function startDelete(item) {
-  deleteTarget.value = item
-  deleteDialog.value = true
-}
+function openDialog(id = null) { editDelegateId.value = id; editDialog.value = true }
+function onDelegateSaved() { dt.load(lastOptions) }
 
+function startDelete(item) { deleteTarget.value = item; deleteDialog.value = true }
 async function confirmDelete() {
   deleting.value = true
   await api.del(`rest/security/delegate/${deleteTarget.value.id}`)
-  deleting.value = false
-  deleteDialog.value = false
-  deleteTarget.value = null
+  deleting.value = false; deleteDialog.value = false; deleteTarget.value = null
   dt.load(lastOptions)
 }
-
-function startBulkDelete() {
-  bulkDeleteDialog.value = true
-}
-
+function startBulkDelete() { bulkDeleteDialog.value = true }
 async function confirmBulkDelete() {
   deleting.value = true
-  for (const id of selected.value) {
-    await api.del(`rest/security/delegate/${id}`)
-  }
-  deleting.value = false
-  bulkDeleteDialog.value = false
-  selected.value = []
+  for (const id of selected.value) await api.del(`rest/security/delegate/${id}`)
+  deleting.value = false; bulkDeleteDialog.value = false; selected.value = []
   dt.load(lastOptions)
 }
 
 onMounted(() => {
   appStore.setBreadcrumbs(
-    [
-      { title: t('nav.home'), to: '/' },
-      { title: t('nav.identity') },
-      { title: t('delegate.title') },
-    ],
+    [{ title: t('nav.home'), to: '/' }, { title: t('nav.identity') }, { title: t('delegate.title') }],
     { refresh: () => dt.load(lastOptions) },
   )
 })
 </script>
 
 <style scoped>
-.search-field {
-  min-width: 200px;
-  max-width: 300px;
-  flex: 1 1 200px;
+.delegates {
+  --surface: rgb(var(--v-theme-surface));
+  --ink: rgb(var(--v-theme-on-surface));
+  --ink-2: rgba(var(--v-theme-on-surface), .72);
+  --ink-3: rgba(var(--v-theme-on-surface), .55);
+  --border: rgba(var(--v-theme-on-surface), .12);
+  --border-2: rgba(var(--v-theme-on-surface), .26);
+  --hover: rgba(var(--v-theme-on-surface), .05);
+  --primary: rgb(var(--v-theme-primary));
+  --accent: rgb(var(--v-theme-secondary));
+  --font: var(--v26-font, "Bricolage Grotesque", system-ui, sans-serif);
+  color: var(--ink);
 }
+.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
+.ph-txt h1 { font-family: var(--font); font-weight: 800; letter-spacing: -.03em; font-size: 28px; margin: 0; color: var(--ink); }
+.ph-txt .sub { margin: 4px 0 0; font-size: 14px; color: var(--ink-3); font-weight: 500; }
+.ph-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
+.btn, .btn-danger { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-weight: 700; font-size: 14px; padding: 11px 17px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; transition: filter .15s; }
+.btn { color: #fff; background: linear-gradient(135deg, #ff9436, #ff5a52); box-shadow: 0 8px 18px -10px rgba(255, 90, 82, .55); }
+.btn:hover { filter: brightness(1.04); }
+.btn-danger { color: #fff; background: rgb(var(--v-theme-error)); }
+.btn-danger:hover { filter: brightness(1.06); }
+
+.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
+.tb-sp { flex: 1; }
+.search { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 520px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-3); transition: border-color .15s, box-shadow .15s; }
+.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--v-theme-secondary), .15); }
+.search input { flex: 1; border: 0; outline: 0; background: transparent; font-family: var(--font); font-size: 14px; color: var(--ink); }
+.search input::placeholder { color: var(--ink-3); }
+.bulkbar { display: flex; align-items: center; gap: 12px; }
+.bulk-count { font-weight: 700; font-size: 13px; color: var(--ink-2); }
+
+.rcv, .res { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
+.rcv-ic, .res-ic { color: var(--ink-3); }
+.rcv-name { font-weight: 600; }
+/* Status dot: muted when off, vivid green with a glow when on. */
+.bdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--v-theme-on-surface), .2); transition: background .15s, box-shadow .15s; }
+.bdot.on { background: #1d9d63; box-shadow: 0 0 0 3px rgba(29, 157, 99, .18), 0 0 10px 1px rgba(29, 157, 99, .6); }
+
+.iconbtn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid transparent; background: transparent; cursor: pointer; display: inline-grid; place-items: center; color: var(--ink-2); transition: background .12s; }
+.iconbtn:hover { background: var(--hover); }
+.popmenu { min-width: 190px; background: rgb(var(--v-theme-surface)); border: 1px solid rgba(var(--v-theme-on-surface), .12); border-radius: 12px; box-shadow: 0 16px 44px -14px rgba(0, 0, 0, .45); padding: 6px; }
+.popmenu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; cursor: pointer; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: rgb(var(--v-theme-on-surface)); padding: 10px 12px; border-radius: 8px; text-align: left; }
+.popmenu button:hover { background: rgba(var(--v-theme-on-surface), .06); }
+.popmenu button.danger { color: rgb(var(--v-theme-error)); }
+.popmenu .sep { height: 1px; background: rgba(var(--v-theme-on-surface), .12); margin: 5px 4px; }
 </style>
diff --git a/ui/src/views/GroupListView.vue b/ui/src/views/GroupListView.vue
index 0831539..450c51b 100644
--- a/ui/src/views/GroupListView.vue
+++ b/ui/src/views/GroupListView.vue
@@ -1,208 +1,117 @@
+<!--
+  GroupsView — 2026 "Vibrant" Groups list (plugin-id). Mirrors UsersView:
+  VibrantDataTable + reused logic (useDataTable on service/id/group), Vibrant
+  page header/toolbar, gear popmenu, and the reused GroupEditPanel (in a
+  Vibrant dialog) + the global GroupMembersDialog mounted locally (the
+  standalone app doesn't run the plugin install() that normally mounts it).
+-->
 <template>
-  <div>
-    <div class="d-flex flex-wrap align-center mb-4 ga-2">
-      <v-spacer />
-      <v-text-field v-model="dt.search.value" prepend-inner-icon="mdi-magnify" :label="t('common.search')" variant="outlined" density="compact" hide-details class="search-field"
-        @update:model-value="onSearch" />
-      <v-btn color="primary" prepend-icon="mdi-plus" @click="openCreate">
-        {{ t('group.new') }}
-      </v-btn>
+  <div class="groups">
+    <header class="ph">
+      <div class="ph-txt">
+        <h1>{{ t('group.title') }}</h1>
+        <p class="sub">{{ t('group.subtitle2026') }}</p>
+      </div>
+      <div class="ph-actions">
+        <button class="btn" @click="openCreate"><v-icon size="18">mdi-plus</v-icon>{{ t('group.new') }}</button>
+      </div>
+    </header>
+
+    <div class="toolbar">
+      <label class="search">
+        <v-icon size="18">mdi-magnify</v-icon>
+        <input v-model="dt.search.value" :placeholder="t('group.searchPlaceholder') || t('common.search')" @input="onSearch" />
+      </label>
+      <span class="tb-sp" />
+      <v-slide-x-transition>
+        <div v-if="selected.length" class="bulkbar">
+          <span class="bulk-count">{{ selected.length }} {{ t('common.selected') }}</span>
+          <button class="btn-danger" @click="startBulkDelete"><v-icon size="16">mdi-delete</v-icon>{{ t('common.delete') }}</button>
+        </div>
+      </v-slide-x-transition>
     </div>
 
-    <v-alert v-if="dt.error.value" type="warning" variant="tonal" class="mb-4">
+    <v-alert v-if="dt.error.value" type="warning" variant="tonal" class="mb-4" rounded="lg">
       <v-alert-title>{{ t('user.noProvider') }}</v-alert-title>
       {{ dt.error.value === 'internal' ? t('group.noProvider') : dt.error.value }}
     </v-alert>
-
-    <v-alert v-if="dt.demoMode.value" type="info" variant="tonal" density="compact" class="mb-4">
+    <v-alert v-if="dt.demoMode.value" type="info" variant="tonal" density="compact" class="mb-4" rounded="lg">
       {{ t('user.demoMode') }}
     </v-alert>
 
-    <v-slide-y-transition>
-      <v-toolbar v-if="selected.length" density="compact" color="primary" rounded class="mb-4">
-        <v-toolbar-title>{{ selected.length }} {{ t('common.selected') }}</v-toolbar-title>
-        <v-spacer />
-        <v-btn variant="elevated" color="error" prepend-icon="mdi-delete" @click="startBulkDelete">
-          {{ t('common.delete') }}
-        </v-btn>
-      </v-toolbar>
-    </v-slide-y-transition>
-
-    <v-skeleton-loader v-if="dt.loading.value && dt.items.value.length === 0" type="table-heading, table-row@5" class="mb-4" />
-
-    <LigojDataTableServer filename="groups.csv" :fetch-all="dt.loadAll" v-if="!dt.error.value" v-show="dt.items.value.length > 0 || !dt.loading.value" v-model="selected"
-      v-model:items-per-page="itemsPerPage" :headers="headers" :items="dt.items.value" :items-length="dt.totalItems.value" :loading="dt.loading.value" item-value="name" show-select hover
-      @update:options="loadData" @click:row="(_, { item }) => openEdit(item.name)">
-      <template #header.scope="{ column }"><span class="d-inline-flex align-center"><v-icon size="small" class="mr-1">mdi-shape-outline</v-icon>{{ column.title }}<v-tooltip activator="parent" location="top" :text="column.title" /></span></template>
-      <template #header.count="{ column }"><span class="d-inline-flex align-center"><v-icon size="small" class="mr-1">mdi-account-multiple-outline</v-icon>{{ column.title }}<v-tooltip activator="parent" location="top" :text="column.title" /></span></template>
-      <template #header.locked="{ column }"><span class="d-inline-flex align-center"><v-icon size="small" class="mr-1">mdi-shield-lock-outline</v-icon>{{ column.title }}<v-tooltip activator="parent" location="top" :text="column.title" /></span></template>
-      <template #item.locked="{ item }">
-        <div class="text-center">
-          <v-tooltip v-if="item.locked" :text="t('user.statusLocked')" location="top">
-            <template #activator="{ props: tt }">
-              <v-icon v-bind="tt" color="error" size="small">mdi-lock</v-icon>
-            </template>
-          </v-tooltip>
-        </div>
+    <VibrantDataTable v-if="!dt.error.value" :headers="headers" :items="dt.items.value" :items-length="dt.totalItems.value" :loading="dt.loading.value"
+      selectable v-model="selected" item-value="name" default-sort="name" @update:options="loadData" @row-click="(item) => openEdit(item.name)">
+      <template #cell.name="{ item }">
+        <span class="gname"><v-icon size="16" class="gname-ic">mdi-account-group</v-icon><span>{{ item.name }}</span></span>
       </template>
-      <template #item.actions="{ item }">
-        <!-- Manage members: opens the global GroupMembersDialog
-             scoped to this row's group. Dialog is header-mounted
-             via `install()` so we just push state to it here. The
-             `onChanged` callback fires once on dialog close IF the
-             user added/removed at least one member — refreshing the
-             groups table so the member-count column reflects the
-             new total. -->
-        <v-btn icon size="small" variant="text" @click.stop="onManageMembers(item.name)">
-          <v-icon size="small">mdi-account-multiple</v-icon>
-          <v-tooltip activator="parent" :text="t('id.group.manage')" location="top" />
-        </v-btn>
-        <!-- View details: group properties (name / scope / parent) are
-             effectively read-only once a group exists at the LDAP
-             level, so this is an "open the details panel" gesture,
-             not an "edit" one. The eye icon + "View" tooltip
-             communicate that — and the row click still routes through
-             the same handler so the affordance is consistent. -->
-        <v-btn icon size="small" variant="text" @click.stop="openEdit(item.name)">
-          <v-icon size="small">mdi-eye-outline</v-icon>
-          <v-tooltip activator="parent" :text="t('common.view')" location="top" />
-        </v-btn>
-        <v-btn icon size="small" variant="text" color="error" @click.stop="startDelete(item)">
-          <v-icon size="small">mdi-delete</v-icon>
-          <v-tooltip activator="parent" :text="t('common.delete')" location="top" />
-        </v-btn>
+      <template #cell.scope="{ item }">
+        <span v-if="item.scope" class="tagdot"><span class="d" :style="{ background: scopeColor(item.scope) }" />{{ item.scope }}</span>
+        <span v-else class="dash">—</span>
       </template>
-    </LigojDataTableServer>
-
-    <!-- Group view / create dialog. NOT `persistent`: viewing an
-         existing group is read-only (nothing to lose on accidental
-         dismiss) and the create form is small enough that ESC /
-         backdrop closing is an acceptable trade for the Escape-to-
-         dismiss reflex the user expects. The Panel is
-         `v-if`-mounted on `editDialog` so each open is a fresh
-         component (clean form state, fresh REST fetch for the target
-         group); `:key="editingId ?? 'new'"` belt-and-suspenders for
-         the rare in-place target swap. -->
-    <v-dialog v-model="editDialog" max-width="700" scrollable>
-      <v-card>
-        <v-card-title class="d-flex align-center ga-2">
-          <v-icon color="primary">{{ editingId ? 'mdi-eye-outline' : 'mdi-account-group' }}</v-icon>
-          <span v-if="editingId">{{ t('group.detailsTitle') }}</span>
-          <span v-else>{{ t('group.new') }}</span>
-          <span v-if="editingId" class="text-primary">{{ editingId }}</span>
-          <v-spacer />
-          <v-btn icon size="small" variant="text" @click="editDialog = false">
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
-        </v-card-title>
-        <GroupEditPanel
-          v-if="editDialog"
-          :key="editingId ?? 'new'"
-          :group-id="editingId"
-          @saved="onEditSaved"
-          @deleted="onEditDeleted"
-          @cancel="editDialog = false"
-        />
+      <template #cell.count="{ item }"><span class="mono">{{ item.count ?? '—' }}</span></template>
+      <template #cell.locked="{ item }">
+        <v-tooltip v-if="item.locked" :text="t('user.statusLocked')" location="top">
+          <template #activator="{ props: tt }"><v-icon v-bind="tt" color="error" size="19">mdi-lock</v-icon></template>
+        </v-tooltip>
+        <span v-else class="dash">—</span>
+      </template>
+      <template #actions="{ item }">
+        <v-menu location="bottom end">
+          <template #activator="{ props }">
+            <button class="iconbtn" v-bind="props" :aria-label="t('group.actions') || t('id.group.manage')" @click.stop><v-icon size="18">mdi-cog</v-icon></button>
+          </template>
+          <div class="popmenu">
+            <button @click="onManageMembers(item.name)"><v-icon size="18">mdi-account-multiple</v-icon>{{ t('id.group.manage') }}</button>
+            <button @click="openEdit(item.name)"><v-icon size="18">mdi-eye-outline</v-icon>{{ t('common.view') }}</button>
+            <div class="sep" />
+            <button class="danger" @click="startDelete(item)"><v-icon size="18">mdi-delete</v-icon>{{ t('common.delete') }}</button>
+          </div>
+        </v-menu>
+      </template>
+    </VibrantDataTable>
+
+    <!-- Group view / create dialog (Vibrant chrome around the reused panel). -->
+    <v-dialog v-model="editDialog" max-width="600" scrollable>
+      <v-card class="vmodal">
+        <div class="vmodal-head">
+          <span class="mi"><v-icon color="#fff">{{ editingId ? 'mdi-eye-outline' : 'mdi-account-group' }}</v-icon></span>
+          <h3>{{ editingId ? t('group.detailsTitle') : t('group.new') }} <span v-if="editingId" class="who">{{ editingId }}</span></h3>
+          <button class="x" :aria-label="t('common.cancel')" @click="editDialog = false"><v-icon size="20">mdi-close</v-icon></button>
+        </div>
+        <GroupEditPanel v-if="editDialog" :key="editingId ?? 'new'" :group-id="editingId" @saved="onEditSaved" @deleted="onEditDeleted" @cancel="editDialog = false" />
       </v-card>
     </v-dialog>
 
-    <v-dialog v-model="deleteDialog" max-width="400">
-      <v-card>
-        <v-card-title class="d-flex align-center ga-2">
-          <v-icon color="primary">{{ TYPE_ICONS.GROUP }}</v-icon>
-          <span>{{ t('group.deleteTitle') }}</span>
-        </v-card-title>
-        <v-card-text>
-          {{ t('group.deleteConfirmBefore') }}<strong class="text-error">{{ deleteTarget?.name }}</strong>{{ t('group.deleteConfirmAfter') }}
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn variant="text" @click="deleteDialog = false">{{ t('common.cancel') }}</v-btn>
-          <v-btn color="error" variant="elevated" :loading="deleting" @click="confirmDelete">{{ t('common.delete') }}</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+    <LigojConfirmDialog v-model="deleteDialog" :title="t('group.deleteTitle')" :icon="TYPE_ICONS.GROUP" :confirm-label="t('common.delete')" confirm-color="error" :loading="deleting" @confirm="confirmDelete">
+      {{ t('group.deleteConfirmBefore') }}<strong class="text-error">{{ deleteTarget?.name }}</strong>{{ t('group.deleteConfirmAfter') }}
+    </LigojConfirmDialog>
+    <LigojConfirmDialog v-model="bulkDeleteDialog" :title="t('common.bulkDeleteTitle')" :icon="TYPE_ICONS.GROUP" :confirm-label="t('common.delete')" confirm-color="error" :loading="deleting" @confirm="confirmBulkDelete">
+      {{ t('common.bulkDeleteConfirmBefore') }}<strong class="text-error">{{ selected.length }}</strong>{{ t('common.bulkDeleteConfirmAfter') }}
+    </LigojConfirmDialog>
 
-    <v-dialog v-model="bulkDeleteDialog" max-width="400">
-      <v-card>
-        <v-card-title class="d-flex align-center ga-2">
-          <v-icon color="primary">{{ TYPE_ICONS.GROUP }}</v-icon>
-          <span>{{ t('common.bulkDeleteTitle') }}</span>
-        </v-card-title>
-        <v-card-text>{{ t('common.bulkDeleteConfirm', { count: selected.length }) }}</v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn variant="text" @click="bulkDeleteDialog = false">{{ t('common.cancel') }}</v-btn>
-          <v-btn color="error" variant="elevated" :loading="deleting" @click="confirmBulkDelete">{{ t('common.delete') }}</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+    <!-- Members management dialog (consumes useGroupMembersDialog state). -->
+    <GroupMembersDialog />
   </div>
 </template>
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useDataTable, useApi, useAppStore, useErrorStore, useI18nStore, LigojDataTableServer } from '@ligoj/host'
+import { useRoute } from 'vue-router'
+import { useDataTable, useApi, useAppStore, useErrorStore, useI18nStore } from '@ligoj/host'
 import { TYPE_ICONS } from '../composables/delegateTypes.js'
 import { useGroupMembersDialog } from '../composables/useGroupMembersDialog.js'
+import VibrantDataTable from '@/components/VibrantDataTable.vue'
 import GroupEditPanel from '../components/GroupEditPanel.vue'
+import GroupMembersDialog from '../components/GroupMembersDialog.vue'
+import LigojConfirmDialog from '@/components/VibrantConfirmDialog.vue'
 
-const membersDialog = useGroupMembersDialog()
-
-/**
- * Click handler for the Manage-members action. Opens the global
- * dialog and registers an `onChanged` callback the dialog will
- * invoke ONCE on close if the user added/removed at least one
- * member — refreshing the table so this row's member-count column
- * shows the new total.
- */
-function onManageMembers(name) {
-  membersDialog.openFor(name, {
-    onChanged: () => dt.load(lastOptions),
-  })
-}
-
-/* ---- Create / edit dialog ----------------------------------------
- * Replaces the legacy `router.push('/id/group/<id>')` page navigation
- * with an in-place dialog so the user keeps the list (and any scroll
- * / filter state) when editing. The routed URLs still resolve here
- * (see `index.js` route table) and auto-open the dialog on mount,
- * preserving email / bookmark deep links.
- * ------------------------------------------------------------------ */
-
-const editDialog = ref(false)
-const editingId = ref(null)
-
-function openCreate() {
-  editingId.value = null
-  editDialog.value = true
-}
-
-function openEdit(name) {
-  editingId.value = name
-  editDialog.value = true
-}
-
-function onEditSaved() {
-  editDialog.value = false
-  editingId.value = null
-  dt.load(lastOptions)
-}
-
-function onEditDeleted() {
-  editDialog.value = false
-  editingId.value = null
-  dt.load(lastOptions)
-}
-
-const router = useRouter()
 const route = useRoute()
 const appStore = useAppStore()
 const api = useApi()
 const errorStore = useErrorStore()
 const i18n = useI18nStore()
 const t = i18n.t
+const membersDialog = useGroupMembersDialog()
 
 const DEMO_GROUPS = [
   { name: 'Engineering', scope: 'Group', count: 4, locked: false },
@@ -212,99 +121,127 @@ const DEMO_GROUPS = [
   { name: 'Sales', scope: 'Group', count: 1, locked: false },
 ]
 const dt = useDataTable('service/id/group', { defaultSort: 'name', demoData: DEMO_GROUPS })
-const itemsPerPage = ref(25)
 let searchTimeout = null
+let lastOptions = { page: 1, itemsPerPage: 25, sortBy: [] }
 
 const selected = ref([])
 const deleteDialog = ref(false)
 const deleteTarget = ref(null)
 const deleting = ref(false)
 const bulkDeleteDialog = ref(false)
-let lastOptions = {}
+const editDialog = ref(false)
+const editingId = ref(null)
 
 const headers = computed(() => [
-  { title: t('common.name'), key: 'name', sortable: true },
-  { title: t('group.scope'), key: 'scope', sortable: false },
-  { title: t('group.members'), key: 'count', sortable: false, width: '100px', align: 'center' },
-  { title: t('group.locked'), key: 'locked', sortable: false, width: '80px', align: 'center' },
-  { title: '', key: 'actions', sortable: false, width: '160px', align: 'center' },
+  { title: t('common.name'), label: t('common.name'), key: 'name', sortable: true },
+  { label: t('group.scope'), key: 'scope' },
+  { label: t('group.members'), key: 'count', align: 'center', width: '110px' },
+  { label: t('group.locked'), key: 'locked', align: 'center', width: '90px' },
 ])
 
-function loadData(options) {
-  lastOptions = options
-  dt.load(options)
+function scopeColor(scope) {
+  return /intern/i.test(scope) ? '#2563eb' : '#e6a019'
 }
 
+function loadData(options) { lastOptions = options; dt.load(options) }
 function onSearch() {
   clearTimeout(searchTimeout)
-  searchTimeout = setTimeout(() => dt.load({ page: 1, itemsPerPage: itemsPerPage.value }), 300)
+  searchTimeout = setTimeout(() => dt.load({ page: 1, itemsPerPage: lastOptions.itemsPerPage || 25 }), 300)
 }
 
-function startDelete(item) {
-  deleteTarget.value = item
-  deleteDialog.value = true
+function onManageMembers(name) {
+  membersDialog.openFor(name, { onChanged: () => dt.load(lastOptions) })
 }
 
+function openCreate() { editingId.value = null; editDialog.value = true }
+function openEdit(name) { editingId.value = name; editDialog.value = true }
+function onEditSaved() { editDialog.value = false; editingId.value = null; dt.load(lastOptions) }
+function onEditDeleted() { editDialog.value = false; editingId.value = null; dt.load(lastOptions) }
+
+function startDelete(item) { deleteTarget.value = item; deleteDialog.value = true }
 async function confirmDelete() {
-  if (dt.demoMode.value) {
-    errorStore.push({ message: t('group.demoDelete'), status: 0 })
-    deleteDialog.value = false
-    return
-  }
+  if (dt.demoMode.value) { errorStore.push({ message: t('group.demoDelete'), status: 0 }); deleteDialog.value = false; return }
   deleting.value = true
   await api.del(`rest/service/id/group/${deleteTarget.value.name}`)
-  deleting.value = false
-  deleteDialog.value = false
-  deleteTarget.value = null
+  deleting.value = false; deleteDialog.value = false; deleteTarget.value = null
   dt.load(lastOptions)
 }
-
-function startBulkDelete() {
-  bulkDeleteDialog.value = true
-}
-
+function startBulkDelete() { bulkDeleteDialog.value = true }
 async function confirmBulkDelete() {
-  if (dt.demoMode.value) {
-    errorStore.push({ message: t('group.demoDelete'), status: 0 })
-    bulkDeleteDialog.value = false
-    return
-  }
+  if (dt.demoMode.value) { errorStore.push({ message: t('group.demoDelete'), status: 0 }); bulkDeleteDialog.value = false; return }
   deleting.value = true
-  for (const name of selected.value) {
-    await api.del(`rest/service/id/group/${name}`)
-  }
-  deleting.value = false
-  bulkDeleteDialog.value = false
-  selected.value = []
+  for (const name of selected.value) await api.del(`rest/service/id/group/${name}`)
+  deleting.value = false; bulkDeleteDialog.value = false; selected.value = []
   dt.load(lastOptions)
 }
 
 onMounted(() => {
   appStore.setBreadcrumbs(
-    [
-      { title: t('nav.home'), to: '/' },
-      { title: t('nav.identity') },
-      { title: t('group.title') },
-    ],
+    [{ title: t('nav.home'), to: '/' }, { title: t('nav.identity') }, { title: t('group.title') }],
     { refresh: () => dt.load(lastOptions) },
   )
-  // Deep-link support. `/id/group/new` and `/id/group/<id>` route
-  // here (see plugin index.js) and open the dialog over the list so
-  // emails / bookmarks pointing at the old per-entity URLs still
-  // land the user in the right place — but inside the list context.
   const id = route.params?.id
-  if (id === 'new' || route.path?.endsWith('/group/new')) {
-    openCreate()
-  } else if (id) {
-    openEdit(String(id))
-  }
+  if (id === 'new' || route.path?.endsWith('/group/new')) openCreate()
+  else if (id) openEdit(String(id))
 })
 </script>
 
 <style scoped>
-.search-field {
-  min-width: 200px;
-  max-width: 300px;
-  flex: 1 1 200px;
+.groups {
+  --surface: rgb(var(--v-theme-surface));
+  --ink: rgb(var(--v-theme-on-surface));
+  --ink-2: rgba(var(--v-theme-on-surface), .72);
+  --ink-3: rgba(var(--v-theme-on-surface), .55);
+  --border: rgba(var(--v-theme-on-surface), .12);
+  --border-2: rgba(var(--v-theme-on-surface), .26);
+  --hover: rgba(var(--v-theme-on-surface), .05);
+  --pill: rgba(var(--v-theme-on-surface), .06);
+  --primary: rgb(var(--v-theme-primary));
+  --accent: rgb(var(--v-theme-secondary));
+  --font: var(--v26-font, "Bricolage Grotesque", system-ui, sans-serif);
+  --mono: var(--v26-mono, "JetBrains Mono", ui-monospace, monospace);
+  color: var(--ink);
 }
+.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
+.ph-txt h1 { font-family: var(--font); font-weight: 800; letter-spacing: -.03em; font-size: 28px; margin: 0; color: var(--ink); }
+.ph-txt .sub { margin: 4px 0 0; font-size: 14px; color: var(--ink-3); font-weight: 500; }
+.ph-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
+.btn, .btn-danger { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-weight: 700; font-size: 14px; padding: 11px 17px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; transition: filter .15s; }
+.btn { color: #fff; background: linear-gradient(135deg, #ff9436, #ff5a52); box-shadow: 0 8px 18px -10px rgba(255, 90, 82, .55); }
+.btn:hover { filter: brightness(1.04); }
+.btn-danger { color: #fff; background: rgb(var(--v-theme-error)); }
+.btn-danger:hover { filter: brightness(1.06); }
+
+.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
+.tb-sp { flex: 1; }
+.search { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 520px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-3); transition: border-color .15s, box-shadow .15s; }
+.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--v-theme-secondary), .15); }
+.search input { flex: 1; border: 0; outline: 0; background: transparent; font-family: var(--font); font-size: 14px; color: var(--ink); }
+.search input::placeholder { color: var(--ink-3); }
+.bulkbar { display: flex; align-items: center; gap: 12px; }
+.bulk-count { font-weight: 700; font-size: 13px; color: var(--ink-2); }
+
+.gname { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
+.gname-ic { color: var(--ink-3); }
+.mono { font-family: var(--mono); font-size: 13px; font-weight: 600; }
+.tagdot { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; }
+.tagdot .d { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+.dash { color: var(--ink-3); }
+
+.iconbtn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid transparent; background: transparent; cursor: pointer; display: inline-grid; place-items: center; color: var(--ink-2); transition: background .12s; }
+.iconbtn:hover { background: var(--hover); }
+.popmenu { min-width: 210px; background: rgb(var(--v-theme-surface)); border: 1px solid rgba(var(--v-theme-on-surface), .12); border-radius: 12px; box-shadow: 0 16px 44px -14px rgba(0, 0, 0, .45); padding: 6px; }
+.popmenu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; cursor: pointer; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: rgb(var(--v-theme-on-surface)); padding: 10px 12px; border-radius: 8px; text-align: left; }
+.popmenu button:hover { background: rgba(var(--v-theme-on-surface), .06); }
+.popmenu button.danger { color: rgb(var(--v-theme-error)); }
+.popmenu .sep { height: 1px; background: rgba(var(--v-theme-on-surface), .12); margin: 5px 4px; }
+
+/* Reused Vibrant dialog chrome (shared language with UserEditDialog). */
+.vmodal { border-radius: 20px !important; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55) !important; }
+.vmodal-head { display: flex; align-items: center; gap: 13px; padding: 22px 24px 8px; }
+.vmodal-head .mi { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, #ff9436, #ff5a52); box-shadow: 0 8px 18px -8px rgba(255, 90, 82, .6); }
+.vmodal-head h3 { font-family: var(--font); font-weight: 800; font-size: 20px; margin: 0; flex: 1; color: var(--ink); letter-spacing: -.02em; }
+.vmodal-head h3 .who { color: #ff5a52; }
+.vmodal-head .x { width: 36px; height: 36px; border: 0; background: transparent; border-radius: 9px; cursor: pointer; display: grid; place-items: center; color: var(--ink-3); }
+.vmodal-head .x:hover { background: var(--hover); color: var(--ink); }
 </style>
diff --git a/ui/src/views/UserEditDialog.vue b/ui/src/views/UserEditDialog.vue
index ec5297e..8dd30fd 100644
--- a/ui/src/views/UserEditDialog.vue
+++ b/ui/src/views/UserEditDialog.vue
@@ -5,20 +5,17 @@
          user" button and the row gear menu. model-value is bound one-way
          so a close request (Cancel / Esc / scrim) can be vetoed by the
          unsaved-changes guard before it actually closes. -->
-    <v-dialog :model-value="modelValue" @update:model-value="onDialogModel" max-width="700" scrollable>
-      <v-card>
-        <!-- Edit mode includes the user id (login) as a primary-color
-             span so the user sees who they're editing the moment the
-             dialog opens, matching the convention used by the group
-             details and group-members dialogs. Sourced from the prop
-             — `form.id` would lag until the load completes. -->
-        <v-card-title class="d-flex align-center ga-2">
-          <v-icon color="primary">{{ TYPE_ICONS.USER }}</v-icon>
-          <span>{{ isEdit ? t('user.edit') : t('user.new') }}</span>
-          <span v-if="isEdit" class="text-primary">{{ userId }}</span>
-        </v-card-title>
-
-        <v-card-text>
+    <v-dialog :model-value="modelValue" @update:model-value="onDialogModel" max-width="600" scrollable>
+      <v-card class="vmodal">
+        <!-- Vibrant dialog header: warm gradient icon tile + title (+ the
+             edited login in accent), matching the 2026 mockup .modal-head. -->
+        <div class="vmodal-head">
+          <span class="mi"><v-icon color="#fff">{{ TYPE_ICONS.USER }}</v-icon></span>
+          <h3>{{ isEdit ? t('user.edit') : t('user.new') }} <span v-if="isEdit" class="who">{{ userId }}</span></h3>
+          <button class="x" :aria-label="t('common.cancel')" @click="requestClose"><v-icon size="20">mdi-close</v-icon></button>
+        </div>
+
+        <v-card-text class="vmodal-body">
           <v-alert v-if="demoMode" type="info" variant="tonal" density="compact" class="mb-4">
             {{ t('user.demoEdit') }}
           </v-alert>
@@ -90,7 +87,7 @@
                  dialog, consistent with the row gear menu of the list. -->
             <template v-if="isEdit">
               <v-divider class="my-4" />
-              <div class="text-subtitle-2 text-medium-emphasis mb-2">{{ t('user.actions') }}</div>
+              <div class="text-subtitle-2 text-medium-emphasis mb-2 actions-label">{{ t('user.actions') }}</div>
               <v-list border rounded density="compact" bg-color="transparent">
                 <v-list-item :prepend-icon="locked ? 'mdi-lock-open-variant' : 'mdi-lock'" :title="locked ? t('user.unlock') : t('user.lock')" @click="startAction(locked ? 'unlock' : 'lock')" />
                 <v-list-item :prepend-icon="isolated ? 'mdi-account-check' : 'mdi-account-off'" :title="isolated ? t('user.restore') : t('user.isolate')"
@@ -101,16 +98,17 @@
           </template>
         </v-card-text>
 
-        <v-card-actions>
-          <v-btn v-if="isEdit" color="error" variant="tonal" :disabled="loading" @click="confirmDelete = true">
-            <v-icon start>mdi-delete</v-icon> {{ t('common.delete') }}
-          </v-btn>
-          <v-spacer />
-          <v-btn variant="text" @click="requestClose">{{ t('common.cancel') }}</v-btn>
-          <v-btn color="primary" variant="elevated" :loading="saving" :disabled="loading" @click="save">
-            <v-icon start>mdi-content-save</v-icon> {{ t('common.save') }}
-          </v-btn>
-        </v-card-actions>
+        <div class="vmodal-foot">
+          <button v-if="isEdit" class="mbtn ghost-danger" :disabled="loading" @click="confirmDelete = true">
+            <v-icon size="18">mdi-delete</v-icon>{{ t('common.delete') }}
+          </button>
+          <span class="foot-sp" />
+          <button class="mbtn ghost" @click="requestClose">{{ t('common.cancel') }}</button>
+          <button class="mbtn primary" :disabled="loading || saving" @click="save">
+            <span v-if="saving" class="mspin" aria-hidden="true" />
+            <v-icon v-else size="18">mdi-content-save</v-icon>{{ t('common.save') }}
+          </button>
+        </div>
       </v-card>
     </v-dialog>
 
@@ -139,8 +137,10 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue'
-import { useApi, useFormGuard, useErrorStore, useI18nStore, LigojConfirmDialog } from '@ligoj/host'
+import { useApi, useFormGuard, useErrorStore, useI18nStore } from '@ligoj/host'
 import { TYPE_ICONS } from '../composables/delegateTypes.js'
+// Vibrant replacement for the host's confirm dialog (aliased → tags unchanged).
+import LigojConfirmDialog from '@/components/VibrantConfirmDialog.vue'
 
 const props = defineProps({
   // Dialog visibility (v-model).
@@ -624,3 +624,62 @@ async function confirmAction() {
   opacity: 0.7;
 }
 </style>
+
+<style scoped>
+/* 2026 "Vibrant" re-skin of the dialog chrome + fields. Vars are defined on
+   .vmodal (the teleported card root) so they cascade to all descendants —
+   unlike vars on the page root, which never reach teleported content. */
+.vmodal {
+  --ink: rgb(var(--v-theme-on-surface));
+  --ink-2: rgba(var(--v-theme-on-surface), .72);
+  --ink-3: rgba(var(--v-theme-on-surface), .5);
+  --border: rgba(var(--v-theme-on-surface), .14);
+  --border-2: rgba(var(--v-theme-on-surface), .26);
+  --hover: rgba(var(--v-theme-on-surface), .06);
+  --surface: rgb(var(--v-theme-surface));
+  --font: var(--v26-font, "Bricolage Grotesque", system-ui, sans-serif);
+  border-radius: 20px !important;
+  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55) !important;
+}
+
+/* Header */
+.vmodal-head { display: flex; align-items: center; gap: 13px; padding: 22px 24px 8px; }
+.vmodal-head .mi { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, #ff9436, #ff5a52); box-shadow: 0 8px 18px -8px rgba(255, 90, 82, .6); }
+.vmodal-head h3 { font-family: var(--font); font-weight: 800; font-size: 20px; margin: 0; flex: 1; color: var(--ink); letter-spacing: -.02em; }
+.vmodal-head h3 .who { color: #ff5a52; }
+.vmodal-head .x { width: 36px; height: 36px; border: 0; background: transparent; border-radius: 9px; cursor: pointer; display: grid; place-items: center; color: var(--ink-3); }
+.vmodal-head .x:hover { background: var(--hover); color: var(--ink); }
+
+.vmodal-body { padding: 12px 24px 6px !important; }
+
+/* Fields — clean rounded outlined inputs (less "thin Material"). */
+.vmodal :deep(.v-field) { border-radius: 12px; font-family: var(--font); }
+.vmodal :deep(.v-field__prepend-inner .v-icon) { opacity: .55; }
+.vmodal :deep(.v-text-field .v-field__input),
+.vmodal :deep(.v-autocomplete .v-field__input),
+.vmodal :deep(.v-combobox .v-field__input) { font-size: 14px; }
+.vmodal :deep(.v-label) { font-weight: 600; }
+/* Selected chips inside group/email fields → match the list's pill look. */
+.vmodal :deep(.v-chip) { border-radius: 8px; font-weight: 600; }
+
+/* Account-actions list (edit mode) — use the Vibrant font, not Roboto. */
+.vmodal :deep(.v-list) { border-color: var(--border) !important; border-radius: 12px !important; }
+.vmodal :deep(.v-list-item) { border-radius: 9px; }
+.vmodal :deep(.v-list-item-title) { font-family: var(--font); font-weight: 600; font-size: 14px; }
+.vmodal :deep(.actions-label) { font-family: var(--font); font-weight: 700; }
+
+/* Footer + Vibrant buttons. */
+.vmodal-foot { display: flex; align-items: center; gap: 10px; padding: 14px 24px 22px; }
+.foot-sp { flex: 1; }
+.mbtn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-weight: 700; font-size: 14px; padding: 10px 17px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; transition: filter .15s, background .15s, border-color .15s; }
+.mbtn.primary { color: #fff; background: linear-gradient(135deg, #ff9436, #ff5a52); box-shadow: 0 8px 18px -10px rgba(255, 90, 82, .55); }
+.mbtn.primary:hover:not(:disabled) { filter: brightness(1.04); }
+.mbtn.primary:disabled { opacity: .6; cursor: default; }
+.mbtn.ghost { color: var(--ink-2); background: transparent; border-color: var(--border); }
+.mbtn.ghost:hover { background: var(--hover); border-color: var(--border-2); }
+.mbtn.ghost-danger { color: rgb(var(--v-theme-error)); background: transparent; border-color: rgba(var(--v-theme-error), .35); }
+.mbtn.ghost-danger:hover:not(:disabled) { background: rgba(var(--v-theme-error), .08); }
+.mbtn.ghost-danger:disabled { opacity: .5; cursor: default; }
+.mspin { width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: mspin .7s linear infinite; }
+@keyframes mspin { to { transform: rotate(360deg); } }
+</style>
diff --git a/ui/src/views/UserListView.vue b/ui/src/views/UserListView.vue
index fdc915c..3b9a38a 100644
--- a/ui/src/views/UserListView.vue
+++ b/ui/src/views/UserListView.vue
@@ -1,155 +1,120 @@
+<!--
+  UsersView — 2026 "Vibrant" Users list (plugin-id), mockup-faithful.
+
+  Renders the validated 2026 mockup language (page header + toolbar +
+  VibrantDataTable: tinted header, mailchips, group chips, mono login,
+  gear popmenu, "Lignes : N / a–b sur total" footer) while REUSING the
+  real logic: useDataTable for fetch/sort/pagination/search, and the core
+  CRUD dialogs (UserEditDialog, LigojConfirmDialog) via @ligoj/host.
+-->
 <template>
-  <div>
-    <div class="d-flex flex-wrap align-center mb-4 ga-2">
-      <v-spacer />
-      <v-text-field v-model="dt.search.value" prepend-inner-icon="mdi-magnify" :label="t('common.search')" variant="outlined" density="compact" hide-details class="search-field"
-        @update:model-value="onSearch" />
-      <v-btn color="primary" prepend-icon="mdi-plus" @click="openCreate">
-        {{ t('user.new') }}
-      </v-btn>
-      <ImportExportBar export-endpoint="service/id/user" import-endpoint="service/id/user/import/csv/full" export-filename="users.csv"
-        @imported="dt.load({ page: 1, itemsPerPage: itemsPerPage.value })" />
+  <div class="users">
+    <!-- Page header (mockup .ph): title + count + actions. -->
+    <header class="ph">
+      <div class="ph-txt">
+        <h1>{{ t('user.title') }}</h1>
+        <p class="sub">{{ t('user.subtitle2026') }}</p>
+      </div>
+      <div class="ph-actions">
+        <button class="btn" @click="openCreate"><v-icon size="18">mdi-plus</v-icon>{{ t('user.new') }}</button>
+        <button class="btn-ghost" :disabled="exporting" @click="onExport"><v-icon size="18">mdi-download</v-icon>{{ t('common.export') || 'Exporter' }}</button>
+        <button class="btn-ghost" :disabled="importing" @click="importInput?.click()">
+          <span v-if="importing" class="ispin" aria-hidden="true" /><v-icon v-else size="18">mdi-upload</v-icon>{{ importing ? (t('common.importing') || 'Import…') : (t('common.import') || 'Importer') }}
+        </button>
+        <input ref="importInput" type="file" accept=".csv,.tsv,text/csv" hidden @change="onImport" />
+      </div>
+    </header>
+
+    <!-- Search toolbar (mockup .toolbar). -->
+    <div class="toolbar">
+      <label class="search">
+        <v-icon size="18">mdi-magnify</v-icon>
+        <input v-model="dt.search.value" :placeholder="t('user.searchPlaceholder') || t('common.search')" @input="onSearch" />
+      </label>
+      <span class="tb-sp" />
+      <v-slide-x-transition>
+        <div v-if="selected.length" class="bulkbar">
+          <span class="bulk-count">{{ selected.length }} {{ t('common.selected') }}</span>
+          <button class="btn-danger" @click="startBulkDelete"><v-icon size="16">mdi-delete</v-icon>{{ t('common.delete') }}</button>
+        </div>
+      </v-slide-x-transition>
     </div>
 
-    <v-alert v-if="dt.error.value" type="warning" variant="tonal" class="mb-4">
+    <v-alert v-if="dt.error.value" type="warning" variant="tonal" class="mb-4" rounded="lg">
       <v-alert-title>{{ t('user.noProvider') }}</v-alert-title>
       {{ dt.error.value === 'internal' ? t('user.noProviderMsg') : dt.error.value }}
     </v-alert>
-
-    <v-alert v-if="dt.demoMode.value" type="info" variant="tonal" density="compact" class="mb-4">
+    <v-alert v-if="dt.demoMode.value" type="info" variant="tonal" density="compact" class="mb-4" rounded="lg">
       {{ t('user.demoMode') }}
     </v-alert>
 
-    <v-slide-y-transition>
-      <v-toolbar v-if="selected.length" density="compact" color="primary" rounded class="mb-4">
-        <v-toolbar-title>{{ selected.length }} {{ t('common.selected') }}</v-toolbar-title>
-        <v-spacer />
-        <v-btn variant="elevated" color="error" prepend-icon="mdi-delete" @click="startBulkDelete">
-          {{ t('common.delete') }}
-        </v-btn>
-      </v-toolbar>
-    </v-slide-y-transition>
-
-    <v-skeleton-loader v-if="dt.loading.value && dt.items.value.length === 0" type="table-heading, table-row@5" class="mb-4" />
-
-    <LigojDataTableServer filename="users.csv" :fetch-all="dt.loadAll" v-if="!dt.error.value" v-show="dt.items.value.length > 0 || !dt.loading.value" v-model="selected"
-      v-model:items-per-page="itemsPerPage" :headers="headers" :items="dt.items.value" :items-length="dt.totalItems.value" :loading="dt.loading.value" item-value="id" show-select hover
-      @update:options="loadData" @click:row="(_, { item }) => openEdit(item.id)">
-      <!-- Mails column (chantier D4): render each address as a v-chip, cap
-           at 2 visible and fold the rest into a "+N" indicator so rows stay
-           on a single line even when a user has many addresses. Pattern
-           matches the existing groups-cell rendering below. -->
-      <template #item.id="{ item }">
-        <div class="d-flex align-center ga-2">
-          <v-icon size="small" color="medium-emphasis">mdi-account-circle</v-icon>
-          <code>{{ item.id }}</code>
-        </div>
+    <VibrantDataTable v-if="!dt.error.value" :headers="headers" :items="dt.items.value" :items-length="dt.totalItems.value" :loading="dt.loading.value"
+      selectable v-model="selected" item-value="id" default-sort="id" @update:options="loadData" @row-click="(item) => openEdit(item.id)">
+      <template #cell.id="{ item }">
+        <span class="login"><v-icon size="16" class="login-ic">mdi-account-circle</v-icon><span class="mono">{{ item.id }}</span></span>
       </template>
-      <template #header.id="{ column }"><span class="d-inline-flex align-center"><v-icon size="small" class="mr-1">mdi-account</v-icon>{{ column.title }}<v-tooltip activator="parent" location="top" :text="column.title" /></span></template>
-      <template #header.company="{ column }"><span class="d-inline-flex align-center"><v-icon size="small" class="mr-1">mdi-domain</v-icon>{{ column.title }}<v-tooltip activator="parent" location="top" :text="column.title" /></span></template>
-      <template #header.mails="{ column }"><span class="d-inline-flex align-center"><v-icon size="small" class="mr-1">mdi-email-outline</v-icon>{{ column.title }}<v-tooltip activator="parent" location="top" :text="column.title" /></span></template>
-      <template #header.groups="{ column }"><span class="d-inline-flex align-center"><v-icon size="small" class="mr-1">mdi-account-group</v-icon>{{ column.title }}<v-tooltip activator="parent" location="top" :text="column.title" /></span></template>
-      <template #header.locked="{ column }">
-        <span class="d-inline-flex align-center">
-          <v-icon size="small">mdi-shield-account-outline</v-icon>
-          <v-tooltip activator="parent" location="top" :text="column.title" />
+      <template #cell.mails="{ item }">
+        <span class="mails">
+          <span v-for="m in (item.mails || []).slice(0, 2)" :key="m" class="mailchip"><v-icon size="12">mdi-email-outline</v-icon>{{ m }}</span>
+          <span v-if="(item.mails || []).length > 2" class="more">+{{ item.mails.length - 2 }}</span>
+          <span v-if="!(item.mails || []).length" class="dash">—</span>
         </span>
       </template>
-      <template #item.mails="{ item }">
-        <div class="mails-cell">
-          <v-chip v-for="m in (item.mails || []).slice(0, 2)" :key="m" size="small" variant="tonal" class="mr-1">{{ m }}</v-chip>
-          <span v-if="(item.mails || []).length > 2" class="text-caption text-medium-emphasis">
-            +{{ item.mails.length - 2 }}
-          </span>
-        </div>
-      </template>
-      <template #item.groups="{ item }">
-        <div class="groups-cell">
-          <v-chip v-for="g in (item.groups || []).slice(0, 3)" :key="g.name || g" size="small" class="mr-1">{{ g.name || g }}</v-chip>
-          <span v-if="(item.groups || []).length > 3" class="text-caption text-medium-emphasis">
-            +{{ item.groups.length - 3 }}
-          </span>
-        </div>
+      <template #cell.groups="{ item }">
+        <span class="groups">
+          <span v-for="g in (item.groups || []).slice(0, 3)" :key="g.name || g" class="chip">{{ g.name || g }}</span>
+          <span v-if="(item.groups || []).length > 3" class="more">+{{ item.groups.length - 3 }}</span>
+          <span v-if="!(item.groups || []).length" class="dash">—</span>
+        </span>
       </template>
-      <template #item.locked="{ item }">
-        <div class="text-center">
-          <v-tooltip v-if="item.locked" :text="t('user.statusLocked')" location="top">
-            <template #activator="{ props: tt }">
-              <v-icon v-bind="tt" color="error" size="small">mdi-lock</v-icon>
-            </template>
-          </v-tooltip>
-          <v-tooltip v-else :text="t('user.statusActive')" location="top">
-            <template #activator="{ props: tt }">
-              <v-icon v-bind="tt" color="success" size="small">mdi-lock-open-variant</v-icon>
-            </template>
-          </v-tooltip>
-        </div>
+      <template #cell.locked="{ item }">
+        <v-tooltip :text="item.locked ? t('user.statusLocked') : t('user.statusActive')" location="top">
+          <template #activator="{ props: tt }">
+            <v-icon v-bind="tt" :color="item.locked ? 'error' : 'success'" size="19">{{ item.locked ? 'mdi-lock' : 'mdi-lock-open-variant' }}</v-icon>
+          </template>
+        </v-tooltip>
       </template>
-      <template #item.actions="{ item }">
-        <!-- Single gear button opening a menu of row actions (Fabrice
-             review, chantier I.1). @click.stop on the gear activator
-             keeps the click off the row, whose @click:row opens the edit
-             dialog. The menu items deliberately carry NO .stop:
-             VMenu teleports its content outside the <tr>, so item clicks
-             can never reach @click:row anyway — and a .stop there would
-             swallow the bubbling click that VMenu's close-on-content-click
-             relies on, leaving the menu open behind the dialogs.
-             Lock/Isolate labels and icons are contextual: the API omits
-             `locked`/`isolated` when null, so a truthy value means the
-             user is locked/isolated. -->
-        <v-menu>
+      <template #actions="{ item }">
+        <v-menu location="bottom end">
           <template #activator="{ props }">
-            <v-btn icon size="x-small" variant="text" :aria-label="t('user.actions')" v-bind="props" @click.stop>
-              <v-icon size="small">mdi-cog</v-icon>
-              <v-tooltip activator="parent" :text="t('user.actions')" location="top" />
-            </v-btn>
+            <button class="iconbtn" v-bind="props" :aria-label="t('user.actions')" @click.stop><v-icon size="18">mdi-cog</v-icon></button>
           </template>
-          <v-list density="compact" min-width="220">
-            <v-list-item prepend-icon="mdi-pencil" :title="t('user.edit')" @click="openEdit(item.id)" />
-            <v-list-item prepend-icon="mdi-delete" base-color="error" :title="t('common.delete')" @click="startDelete(item)" />
-            <v-divider class="my-1" />
-            <v-list-item :prepend-icon="item.locked ? 'mdi-lock-open-variant' : 'mdi-lock'" :title="item.locked ? t('user.unlock') : t('user.lock')"
-              @click="startUserAction(item, item.locked ? 'unlock' : 'lock')" />
-            <v-list-item :prepend-icon="item.isolated ? 'mdi-account-check' : 'mdi-account-off'" :title="item.isolated ? t('user.restore') : t('user.isolate')"
-              @click="startUserAction(item, item.isolated ? 'restore' : 'isolate')" />
-            <v-list-item prepend-icon="mdi-lock-reset" :title="t('user.resetPassword')" @click="startUserAction(item, 'resetPassword')" />
-          </v-list>
+          <div class="popmenu">
+            <button @click="openEdit(item.id)"><v-icon size="18">mdi-pencil</v-icon>{{ t('user.edit') }}</button>
+            <button class="danger" @click="startDelete(item)"><v-icon size="18">mdi-delete</v-icon>{{ t('common.delete') }}</button>
+            <div class="sep" />
+            <button @click="startUserAction(item, item.locked ? 'unlock' : 'lock')"><v-icon size="18">{{ item.locked ? 'mdi-lock-open-variant' : 'mdi-lock' }}</v-icon>{{ item.locked ? t('user.unlock') : t('user.lock') }}</button>
+            <button @click="startUserAction(item, item.isolated ? 'restore' : 'isolate')"><v-icon size="18">{{ item.isolated ? 'mdi-account-check' : 'mdi-account-off' }}</v-icon>{{ item.isolated ? t('user.restore') : t('user.isolate') }}</button>
+            <button @click="startUserAction(item, 'resetPassword')"><v-icon size="18">mdi-lock-reset</v-icon>{{ t('user.resetPassword') }}</button>
+          </div>
         </v-menu>
       </template>
-    </LigojDataTableServer>
+    </VibrantDataTable>
 
-    <!-- Single-user delete (chantier D2): name in bold red via the
-         default slot of LigojConfirmDialog. -->
+    <!-- Single-user delete: name in bold red via the default slot. -->
     <LigojConfirmDialog v-model="deleteDialog" :title="t('user.deleteTitle')" :icon="TYPE_ICONS.USER" :confirm-label="t('common.delete')" confirm-color="error" :loading="deleting" @confirm="confirmDeleteUser">
       {{ t('user.deleteConfirmBefore') }}<strong class="text-error">{{ deleteTarget?.id }}</strong>{{ t('user.deleteConfirmAfter') }}
     </LigojConfirmDialog>
-
-    <!-- Bulk delete (chantier D2 rattrapage): the selected count is
-         rendered in bold red via the default slot, same visual weight
-         as a sensitive single-item confirmation. The host's monolithic
-         `common.bulkDeleteConfirm` key stays intact; we just use two
-         new plugin-local fragments around the count. -->
     <LigojConfirmDialog v-model="bulkDeleteDialog" :title="t('common.bulkDeleteTitle')" :icon="TYPE_ICONS.USER" :confirm-label="t('common.delete')" confirm-color="error" :loading="deleting" @confirm="confirmBulkDelete">
       {{ t('common.bulkDeleteConfirmBefore') }}<strong class="text-error">{{ selected.length }}</strong>{{ t('common.bulkDeleteConfirmAfter') }}
     </LigojConfirmDialog>
-
-    <!-- Confirmation for the sensitive lock/isolate/reset actions
-         triggered from the row gear menu (chantier D2): the login is
-         now bolded and coloured via two i18n fragments around it
-         (user.<action>ConfirmBefore / user.<action>ConfirmAfter). -->
     <LigojConfirmDialog v-model="actionDialog" :title="t('user.' + actionType)" :icon="TYPE_ICONS.USER" :confirm-label="t('common.confirm')" :loading="actionLoading" @confirm="confirmUserAction">
       {{ t('user.' + actionType + 'ConfirmBefore') }}<strong class="text-error">{{ actionTarget?.id }}</strong>{{ t('user.' + actionType + 'ConfirmAfter') }}
     </LigojConfirmDialog>
 
-    <!-- User create/edit popup (chantier I.2). userId null = create mode. -->
+    <!-- User create/edit popup. userId null = create mode. -->
     <UserEditDialog v-model="editDialog" :user-id="editUserId" @saved="onUserSaved" />
   </div>
 </template>
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import { useDataTable, useApi, useAppStore, useErrorStore, useI18nStore, ImportExportBar, LigojDataTableServer, LigojConfirmDialog } from '@ligoj/host'
+import { useDataTable, useApi, useAppStore, useErrorStore, useI18nStore } from '@ligoj/host'
 import { TYPE_ICONS } from '../composables/delegateTypes.js'
+import VibrantDataTable from '@/components/VibrantDataTable.vue'
+// Vibrant replacement for the host's (stock-Vuetify) confirm dialog; aliased
+// so the existing <LigojConfirmDialog> tags need no change.
+import LigojConfirmDialog from '@/components/VibrantConfirmDialog.vue'
 import UserEditDialog from './UserEditDialog.vue'
 
 const appStore = useAppStore()
@@ -168,7 +133,6 @@ const DEMO_USERS = [
   { id: 'agarcia', firstName: 'Antoine', lastName: 'Garcia', company: 'Ligoj', mails: ['antoine.garcia@ligoj.org'], groups: [{ name: 'Engineering' }], locked: false },
 ]
 const dt = useDataTable('service/id/user', { defaultSort: 'id', demoData: DEMO_USERS })
-const itemsPerPage = ref(25)
 let searchTimeout = null
 let lastOptions = { page: 1, itemsPerPage: 25, sortBy: [] }
 
@@ -177,26 +141,24 @@ const deleteDialog = ref(false)
 const deleteTarget = ref(null)
 const deleting = ref(false)
 const bulkDeleteDialog = ref(false)
-
-// Row gear-menu action state (lock/unlock, isolate/restore, reset).
 const actionDialog = ref(false)
 const actionType = ref('')
 const actionTarget = ref(null)
 const actionLoading = ref(false)
-
-// User create/edit dialog state. editUserId null = create mode.
 const editDialog = ref(false)
 const editUserId = ref(null)
+const importInput = ref(null)
+const exporting = ref(false)
+const importing = ref(false)
 
 const headers = computed(() => [
-  { title: t('user.login'), key: 'id', sortable: true },
-  { title: t('user.firstName'), key: 'firstName', sortable: true },
-  { title: t('user.lastName'), key: 'lastName', sortable: true },
-  { title: t('user.company'), key: 'company', sortable: true },
-  { title: t('user.emails'), key: 'mails', sortable: false },
-  { title: t('user.groups'), key: 'groups', sortable: false },
-  { title: t('common.status'), key: 'locked', sortable: false, width: '80px', align: 'center' },
-  { title: '', key: 'actions', sortable: false, width: '120px', align: 'end' },
+  { title: t('user.login'), label: t('user.login'), key: 'id', sortable: true },
+  { label: t('user.firstName'), key: 'firstName', sortable: true },
+  { label: t('user.lastName'), key: 'lastName', sortable: true },
+  { label: t('user.company'), key: 'company', sortable: true },
+  { label: t('user.emails'), key: 'mails' },
+  { label: t('user.groups'), key: 'groups' },
+  { label: t('common.status'), key: 'locked', align: 'center', width: '90px' },
 ])
 
 function loadData(options) {
@@ -206,60 +168,37 @@ function loadData(options) {
 
 function onSearch() {
   clearTimeout(searchTimeout)
-  searchTimeout = setTimeout(() => dt.load({ page: 1, itemsPerPage: itemsPerPage.value }), 300)
+  searchTimeout = setTimeout(() => dt.load({ page: 1, itemsPerPage: lastOptions.itemsPerPage || 25 }), 300)
 }
 
-function startDelete(item) {
-  deleteTarget.value = item
-  deleteDialog.value = true
-}
+function startDelete(item) { deleteTarget.value = item; deleteDialog.value = true }
 
 async function confirmDeleteUser() {
-  if (dt.demoMode.value) {
-    errorStore.push({ message: t('user.demoDelete'), status: 0 })
-    deleteDialog.value = false
-    return
-  }
+  if (dt.demoMode.value) { errorStore.push({ message: t('user.demoDelete'), status: 0 }); deleteDialog.value = false; return }
   deleting.value = true
   await api.del(`rest/service/id/user/${deleteTarget.value.id}`)
   deleting.value = false
   deleteDialog.value = false
   deleteTarget.value = null
-  dt.load({ page: 1, itemsPerPage: itemsPerPage.value })
+  dt.load(lastOptions)
 }
 
-function startBulkDelete() {
-  bulkDeleteDialog.value = true
-}
+function startBulkDelete() { bulkDeleteDialog.value = true }
 
 async function confirmBulkDelete() {
-  if (dt.demoMode.value) {
-    errorStore.push({ message: t('user.demoDelete'), status: 0 })
-    bulkDeleteDialog.value = false
-    return
-  }
+  if (dt.demoMode.value) { errorStore.push({ message: t('user.demoDelete'), status: 0 }); bulkDeleteDialog.value = false; return }
   deleting.value = true
-  for (const id of selected.value) {
-    await api.del(`rest/service/id/user/${id}`)
-  }
+  for (const id of selected.value) await api.del(`rest/service/id/user/${id}`)
   deleting.value = false
   bulkDeleteDialog.value = false
   selected.value = []
-  dt.load({ page: 1, itemsPerPage: itemsPerPage.value })
+  dt.load(lastOptions)
 }
 
-function startUserAction(item, type) {
-  actionTarget.value = item
-  actionType.value = type
-  actionDialog.value = true
-}
+function startUserAction(item, type) { actionTarget.value = item; actionType.value = type; actionDialog.value = true }
 
 async function confirmUserAction() {
-  if (dt.demoMode.value) {
-    errorStore.push({ message: t('user.demoAction'), status: 0 })
-    actionDialog.value = false
-    return
-  }
+  if (dt.demoMode.value) { errorStore.push({ message: t('user.demoAction'), status: 0 }); actionDialog.value = false; return }
   actionLoading.value = true
   const id = actionTarget.value.id
   const actions = {
@@ -273,64 +212,144 @@ async function confirmUserAction() {
   actionLoading.value = false
   actionDialog.value = false
   actionTarget.value = null
-  // Reload the current page so the status icon and the contextual
-  // lock/isolate menu labels reflect the new state.
   dt.load(lastOptions)
 }
 
-function openCreate() {
-  editUserId.value = null
-  editDialog.value = true
-}
+function openCreate() { editUserId.value = null; editDialog.value = true }
+function openEdit(id) { editUserId.value = id; editDialog.value = true }
+function onUserSaved() { dt.load(lastOptions) }
 
-function openEdit(id) {
-  editUserId.value = id
-  editDialog.value = true
+/* Export: pull all rows then build a CSV client-side (reuses dt.loadAll). */
+async function onExport() {
+  if (dt.demoMode.value) { errorStore.push({ message: t('user.demoMode'), status: 0 }); return }
+  exporting.value = true
+  try {
+    const rows = await dt.loadAll()
+    const cols = headers.value
+    const head = cols.map((c) => csvCell(c.label)).join(',')
+    const body = (rows || []).map((r) => cols.map((c) => csvCell(formatCell(r, c.key))).join(',')).join('\n')
+    downloadCsv(`${head}\n${body}`, 'users.csv')
+  } finally {
+    exporting.value = false
+  }
+}
+function formatCell(row, key) {
+  const v = row[key]
+  if (key === 'mails') return (v || []).join(' ')
+  if (key === 'groups') return (v || []).map((g) => g.name || g).join(' ')
+  if (key === 'locked') return v ? t('user.statusLocked') : t('user.statusActive')
+  return v ?? ''
+}
+function csvCell(s) { const v = String(s ?? ''); return /[",\n]/.test(v) ? `"${v.replace(/"/g, '""')}"` : v }
+function downloadCsv(content, filename) {
+  const blob = new Blob([content], { type: 'text/csv;charset=utf-8' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url; a.download = filename; a.click()
+  URL.revokeObjectURL(url)
 }
 
-function onUserSaved() {
-  // Reload the current page after a create/edit/delete or an account
-  // action performed from the dialog.
-  dt.load(lastOptions)
+async function onImport(e) {
+  const file = e.target.files?.[0]
+  if (!file) return
+  if (dt.demoMode.value) { errorStore.push({ message: t('user.demoMode'), status: 0 }); e.target.value = ''; return }
+  importing.value = true
+  const fd = new FormData()
+  fd.append('csv-file', file)
+  try {
+    // useApi.upload returns null on a non-2xx (the global ErrorSnackbar already
+    // surfaced the cause via handleResponse); a non-null result = accepted.
+    const res = await api.upload('rest/service/id/user/import/csv/full', fd)
+    if (res !== null) {
+      errorStore.success(t('common.importSuccess', { file: file.name }))
+      dt.load({ page: 1, itemsPerPage: lastOptions.itemsPerPage || 25 })
+    }
+  } finally {
+    importing.value = false
+    e.target.value = ''
+  }
 }
 
 onMounted(() => {
   appStore.setBreadcrumbs(
-    [
-      { title: t('nav.home'), to: '/' },
-      { title: t('nav.identity') },
-      { title: t('user.title') },
-    ],
+    [{ title: t('nav.home'), to: '/' }, { title: t('nav.identity') }, { title: t('user.title') }],
     { refresh: () => dt.load(lastOptions) },
   )
 })
 </script>
 
 <style scoped>
-.search-field {
-  min-width: 200px;
-  max-width: 300px;
-  flex: 1 1 200px;
+.users {
+  --surface: rgb(var(--v-theme-surface));
+  --ink: rgb(var(--v-theme-on-surface));
+  --ink-2: rgba(var(--v-theme-on-surface), .72);
+  --ink-3: rgba(var(--v-theme-on-surface), .55);
+  --border: rgba(var(--v-theme-on-surface), .12);
+  --border-2: rgba(var(--v-theme-on-surface), .26);
+  --hover: rgba(var(--v-theme-on-surface), .05);
+  --pill: rgba(var(--v-theme-on-surface), .06);
+  --primary: rgb(var(--v-theme-primary));
+  --accent: rgb(var(--v-theme-secondary));
+  --font: var(--v26-font, "Bricolage Grotesque", system-ui, sans-serif);
+  --mono: var(--v26-mono, "JetBrains Mono", ui-monospace, monospace);
+  color: var(--ink);
 }
 
-/* Keep the groups column on a single line so rows stay vertically
-   aligned when a user has many groups. Chips overflow horizontally
-   instead of wrapping. */
-.groups-cell {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  overflow: hidden;
-  white-space: nowrap;
-}
+/* Page header (.ph). */
+.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
+.ph-txt h1 { font-family: var(--font); font-weight: 800; letter-spacing: -.03em; font-size: 28px; margin: 0; color: var(--ink); }
+.ph-txt .sub { margin: 4px 0 0; font-size: 14px; color: var(--ink-3); font-weight: 500; }
+.ph-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
 
-/* Mails column (chantier D4). Soft-wrap is acceptable here because
-   email addresses can be long: stacking onto a 2nd line keeps the
-   column readable. The +N indicator at the end of (item.mails || [])
-   keeps the visual footprint bounded. */
-.mails-cell {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
+.btn, .btn-ghost, .btn-danger {
+  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-weight: 700; font-size: 14px;
+  padding: 11px 17px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; transition: filter .15s, background .15s, border-color .15s, box-shadow .15s;
 }
+/* Vibrant brand CTA — warm orange→coral gradient (validated mockup --btn1/--btn2),
+   not a cross-hue orange→indigo which read as cheap. Soft, short shadow. */
+.btn { color: #fff; background: linear-gradient(135deg, #ff9436, #ff5a52); box-shadow: 0 8px 18px -10px rgba(255, 90, 82, .55); }
+.btn:hover { filter: brightness(1.04); box-shadow: 0 10px 22px -10px rgba(255, 90, 82, .65); }
+.btn-ghost { color: var(--ink-2); background: var(--surface); border-color: var(--border); }
+.btn-ghost:hover:not(:disabled) { border-color: var(--border-2); background: var(--hover); }
+.btn-ghost:disabled { opacity: .55; cursor: default; }
+.ispin { width: 15px; height: 15px; border: 2px solid var(--border-2); border-top-color: var(--ink-2); border-radius: 50%; animation: ispin .7s linear infinite; }
+@keyframes ispin { to { transform: rotate(360deg); } }
+.btn-danger { color: #fff; background: rgb(var(--v-theme-error)); }
+.btn-danger:hover { filter: brightness(1.06); }
+
+/* Toolbar (.toolbar) + search. */
+.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
+.tb-sp { flex: 1; }
+.search { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 520px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-3); transition: border-color .15s, box-shadow .15s; }
+.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--v-theme-secondary), .15); }
+.search input { flex: 1; border: 0; outline: 0; background: transparent; font-family: var(--font); font-size: 14px; color: var(--ink); }
+.search input::placeholder { color: var(--ink-3); }
+
+.bulkbar { display: flex; align-items: center; gap: 12px; }
+.bulk-count { font-weight: 700; font-size: 13px; color: var(--ink-2); }
+
+/* Cells. */
+.login { display: inline-flex; align-items: center; gap: 8px; }
+.login-ic { color: var(--ink-3); }
+.mono { font-family: var(--mono); font-size: 13px; font-weight: 600; }
+.mails { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
+.mailchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--pill); border: 1px solid var(--border); border-radius: 8px; padding: 3px 9px; }
+.mailchip :deep(.v-icon) { opacity: .6; }
+.groups { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 5px; overflow: hidden; }
+.chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--pill); border: 1px solid var(--border); border-radius: 20px; padding: 3px 11px; white-space: nowrap; }
+.more { font-size: 12px; font-weight: 700; color: var(--ink-3); }
+.dash { color: var(--ink-3); }
+
+/* Gear button + popmenu (matches mockup .iconbtn / .popmenu). */
+.iconbtn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid transparent; background: transparent; cursor: pointer; display: inline-grid; place-items: center; color: var(--ink-2); transition: background .12s; }
+.iconbtn:hover { background: var(--hover); }
+/* NOTE: v-menu teleports this content to <body>, OUTSIDE the .users scope,
+   so the local --surface/--ink/--border vars don't resolve here. Use the
+   global Vuetify theme tokens directly, or the menu renders transparent
+   ("floating in the background"). */
+.popmenu { min-width: 210px; background: rgb(var(--v-theme-surface)); border: 1px solid rgba(var(--v-theme-on-surface), .12); border-radius: 12px; box-shadow: 0 16px 44px -14px rgba(0, 0, 0, .45); padding: 6px; }
+.popmenu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; cursor: pointer; font-family: var(--v26-font, "Bricolage Grotesque", system-ui, sans-serif); font-size: 13.5px; font-weight: 600; color: rgb(var(--v-theme-on-surface)); padding: 10px 12px; border-radius: 8px; text-align: left; }
+.popmenu button:hover { background: rgba(var(--v-theme-on-surface), .06); }
+.popmenu button.danger { color: rgb(var(--v-theme-error)); }
+.popmenu .sep { height: 1px; background: rgba(var(--v-theme-on-surface), .12); margin: 5px 4px; }
 </style>