diff --git a/frontend/modules/core/pages/admin/roles.vue b/frontend/modules/core/pages/admin/roles.vue
index e0e6e05..ec81460 100644
--- a/frontend/modules/core/pages/admin/roles.vue
+++ b/frontend/modules/core/pages/admin/roles.vue
@@ -14,70 +14,49 @@
         </div>
 
         <!-- Table des roles -->
-        <div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
-            <table v-if="roles.length > 0" class="w-full text-left text-sm">
-                <thead class="bg-neutral-50 text-xs uppercase text-neutral-500">
-                    <tr>
-                        <th class="px-4 py-3">{{ t('admin.roles.table.label') }}</th>
-                        <th class="px-4 py-3">{{ t('admin.roles.table.code') }}</th>
-                        <th class="px-4 py-3 text-center">{{ t('admin.roles.table.permissions') }}</th>
-                        <th class="px-4 py-3 text-center">{{ t('admin.roles.table.system') }}</th>
-                        <th class="px-4 py-3 text-right">{{ t('admin.roles.table.actions') }}</th>
-                    </tr>
-                </thead>
-                <tbody class="divide-y divide-neutral-100">
-                    <tr
-                        v-for="role in roles"
-                        :key="role.id"
-                        class="cursor-pointer hover:bg-neutral-50 transition-colors"
-                        @click="openEditDrawer(role)"
-                    >
-                        <td class="px-4 py-3 font-medium text-neutral-900">
-                            {{ role.label }}
-                        </td>
-                        <td class="px-4 py-3 font-mono text-xs text-neutral-500">
-                            {{ role.code }}
-                        </td>
-                        <td class="px-4 py-3 text-center text-neutral-600">
-                            {{ role.permissions.length }}
-                        </td>
-                        <td class="px-4 py-3 text-center">
-                            <span
-                                v-if="role.isSystem"
-                                class="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800"
-                            >
-                                {{ t('admin.roles.table.system') }}
-                            </span>
-                        </td>
-                        <td class="px-4 py-3 text-right" @click.stop>
-                            <div class="flex items-center justify-end gap-2">
-                                <MalioButtonIcon
-                                    v-if="can('core.roles.manage')"
-                                    icon="mdi:pencil-outline"
-                                    :aria-label="t('common.edit')"
-                                    variant="ghost"
-                                    @click="openEditDrawer(role)"
-                                />
-                                <MalioButtonIcon
-                                    v-if="can('core.roles.manage')"
-                                    icon="mdi:delete-outline"
-                                    :aria-label="t('common.delete')"
-                                    variant="ghost"
-                                    :disabled="role.isSystem"
-                                    @click="confirmDelete(role)"
-                                />
-                            </div>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-
-            <!-- Etat vide -->
-            <div v-else class="flex flex-col items-center justify-center py-12 text-neutral-400">
-                <Icon name="mdi:shield-off-outline" class="mb-3 size-12" />
-                <p class="text-sm">{{ t('admin.roles.noRoles') }}</p>
-            </div>
-        </div>
+        <MalioDataTable
+            class="mt-6"
+            :columns="columns"
+            :items="roleItems"
+            :total-items="roles.length"
+            :row-clickable="true"
+            :empty-message="t('admin.roles.noRoles')"
+            @row-click="onRowClick"
+        >
+            <template #cell-code="{ item }">
+                <span class="font-mono text-xs">{{ item.code }}</span>
+            </template>
+            <template #cell-permissions="{ item }">
+                {{ item.permissions }}
+            </template>
+            <template #cell-system="{ item }">
+                <span
+                    v-if="item.isSystem"
+                    class="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800"
+                >
+                    {{ t('admin.roles.table.system') }}
+                </span>
+            </template>
+            <template #cell-actions="{ item }">
+                <div class="flex items-center justify-end gap-2" @click.stop>
+                    <MalioButtonIcon
+                        v-if="can('core.roles.manage')"
+                        icon="mdi:pencil-outline"
+                        :aria-label="t('common.edit')"
+                        variant="ghost"
+                        @click="openEditDrawer(getRoleById(item.id as number)!)"
+                    />
+                    <MalioButtonIcon
+                        v-if="can('core.roles.manage')"
+                        icon="mdi:delete-outline"
+                        :aria-label="t('common.delete')"
+                        variant="ghost"
+                        :disabled="item.isSystem as boolean"
+                        @click="confirmDelete(getRoleById(item.id as number)!)"
+                    />
+                </div>
+            </template>
+        </MalioDataTable>
 
         <!-- Drawer creation/edition -->
         <RoleDrawer
@@ -122,6 +101,36 @@ useHead({ title: t('admin.roles.title') })
 
 const roles = ref<Role[]>([])
 const loading = ref(false)
+
+const columns = [
+    { key: 'label', label: t('admin.roles.table.label') },
+    { key: 'code', label: t('admin.roles.table.code') },
+    { key: 'permissions', label: t('admin.roles.table.permissions') },
+    { key: 'system', label: t('admin.roles.table.system') },
+    { key: 'actions', label: t('admin.roles.table.actions') },
+]
+
+// Transformer les roles en items compatibles MalioDataTable
+const roleItems = computed(() =>
+    roles.value.map(role => ({
+        id: role.id,
+        label: role.label,
+        code: role.code,
+        permissions: role.permissions.length,
+        isSystem: role.isSystem,
+        system: '', // colonne geree par le slot
+        actions: '', // colonne geree par le slot
+    }))
+)
+
+function getRoleById(id: number): Role | undefined {
+    return roles.value.find(r => r.id === id)
+}
+
+function onRowClick(item: Record<string, unknown>) {
+    const role = getRoleById(item.id as number)
+    if (role) openEditDrawer(role)
+}
 const drawerOpen = ref(false)
 const selectedRole = ref<Role | null>(null)
 const deleteModalOpen = ref(false)