From 46e7c22b380dbc4a7314eeba9c1f2013d703953a Mon Sep 17 00:00:00 2001
From: Norman Niati <norman.niati@icloud.com>
Date: Thu, 4 Jun 2026 15:40:35 +0200
Subject: [PATCH] feat(ui-2026): redistribute the 2026 Identity views into
 plugin-id

The 2026 redesign of the Identity surface (Users, Groups, Companies,
Delegates, Container Scopes) was first integrated as part of the host
app-ui in #106. Following review feedback, the views and panels are now
moved to plugin-id, under the existing file names (UserListView,
GroupListView, CompanyListView, DelegateListView, ContainerScopeView,
UserEditDialog, DelegateEditDialog) and the four edit panels.

Generic 2026 building blocks (VibrantDataTable, VibrantConfirmDialog,
AuditDialog, LigojIcon) stay in the host and are imported via @/...
The 11 new 2026 i18n keys are added to plugin-id's own bundle (the 60
others were already present, identical); the host bundle keeps them for
now (host cleanup deferred to a later lot so #106 stays green).

Companion to ligoj#106.
---
 ui/src/components/CompanyEditPanel.vue   |  58 +++-
 ui/src/components/GroupEditPanel.vue     |  62 +++-
 ui/src/components/GroupMembersDialog.vue |  32 +-
 ui/src/components/GroupMembersPanel.vue  | 168 ++++-----
 ui/src/i18n/en.js                        |  13 +
 ui/src/i18n/fr.js                        |  13 +
 ui/src/views/CompanyListView.vue         | 365 +++++++++----------
 ui/src/views/ContainerScopeView.vue      | 273 +++++++++------
 ui/src/views/DelegateEditDialog.vue      |  78 ++++-
 ui/src/views/DelegateListView.vue        | 305 +++++++---------
 ui/src/views/GroupListView.vue           | 399 +++++++++------------
 ui/src/views/UserEditDialog.vue          | 111 ++++--
 ui/src/views/UserListView.vue            | 423 ++++++++++++-----------
 13 files changed, 1198 insertions(+), 1102 deletions(-)

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>