diff --git a/.idea/data_source_mapping.xml b/.idea/data_source_mapping.xml
new file mode 100644
index 0000000..531f7a7
--- /dev/null
+++ b/.idea/data_source_mapping.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DataSourcePerFileMappings">
+    <file url="file://$APPLICATION_CONFIG_DIR$/consoles/db/f407a514-c6b4-4b26-9555-445a85892502/console.sql" value="f407a514-c6b4-4b26-9555-445a85892502" />
+    <file url="file://$APPLICATION_CONFIG_DIR$/consoles/db/f407a514-c6b4-4b26-9555-445a85892502/console_1.sql" value="f407a514-c6b4-4b26-9555-445a85892502" />
+    <file url="file://$APPLICATION_CONFIG_DIR$/consoles/db/f407a514-c6b4-4b26-9555-445a85892502/console_2.sql" value="f407a514-c6b4-4b26-9555-445a85892502" />
+    <file url="file://$APPLICATION_CONFIG_DIR$/consoles/db/f407a514-c6b4-4b26-9555-445a85892502/console_3.sql" value="f407a514-c6b4-4b26-9555-445a85892502" />
+    <file url="file://$APPLICATION_CONFIG_DIR$/consoles/db/f407a514-c6b4-4b26-9555-445a85892502/console_4.sql" value="f407a514-c6b4-4b26-9555-445a85892502" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/frontend/layouts/admin.vue b/frontend/layouts/admin.vue
index ffb8938..a840e82 100644
--- a/frontend/layouts/admin.vue
+++ b/frontend/layouts/admin.vue
@@ -26,10 +26,17 @@
 
                 <div class="overflow-y-auto min-h-0 p-4 space-y-3">
                     <!-- Liste des liens à ajouter ci-dessous -->
-
+                    <!--Button pour afficher le component admin-users -->
+                    <NuxtLink
+                        to="/admin/user-list"
+                        class="block px-4 py-2 rounded hover:bg-primary-600 transition"
+                    >
+                        Utilisateurs
+                    </NuxtLink>
                 </div>
 
                 <div class="p-4">
+                        <p class="font-bold text-white text-left">v{{ version }}</p>
                     <button
                         @click="handleLogout"
                         class="w-full bg-red-600 hover:bg-red-700 py-2 rounded font-bold"
@@ -37,6 +44,7 @@
                         Déconnexion
                     </button>
                 </div>
+
             </aside>
 
             <main class="min-h-0 overflow-auto px-12 py-12 ">
@@ -50,7 +58,9 @@
 
 
 <script setup lang="ts">
+import auth from "~/layouts/auth.vue";
 
+const { version } = useAppVersion()
 const handleLogout = async () => {
     try {
         await auth.logout()
diff --git a/frontend/pages/admin/dashboard.vue b/frontend/pages/admin/dashboard.vue
index eacea61..d61fc7d 100644
--- a/frontend/pages/admin/dashboard.vue
+++ b/frontend/pages/admin/dashboard.vue
@@ -1,13 +1,13 @@
+<template>
+    <admin-users v-if="activeCode === 'users'" />
+</template>
+
 <script setup lang="ts">
 definePageMeta({
     layout: 'admin'
 })
+const route = useRoute()
+
+const activeCode = computed(() => (route.query.code as string))
+
 </script>
-
-<template>
-<h1>test</h1>
-</template>
-
-<style scoped>
-
-</style>
diff --git a/frontend/pages/admin/user-list.vue b/frontend/pages/admin/user-list.vue
new file mode 100644
index 0000000..e0f0d6d
--- /dev/null
+++ b/frontend/pages/admin/user-list.vue
@@ -0,0 +1,64 @@
+<template>
+    <div class="flex items-center justify-between gap-10">
+        <h1 class="text-3xl font-bold uppercase">Utilisateurs</h1>
+        <button
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            @click="null"
+        >
+            Ajouter
+        </button>
+    </div>
+
+    <div>
+        <div class="mt-6 border border-slate-200 mb-16 ">
+            <div class="grid grid-cols-3 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
+                <div>Username</div>
+                <div>Role</div>
+                <div>Action</div>
+            </div>
+            <div
+                v-for="user in userList"
+                :key="user.id"
+                class="grid grid-cols-3 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200 items-center"
+                role="button"
+                tabindex="0"
+            >
+                <div>
+                    {{ user.username}}
+                </div>
+                <div>
+                    {{ user.roles?.join(', ') || ' ---' }}
+                </div>
+                <div>
+                    <div class="p-4">
+                        <button
+                            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+                            @click="null"
+                        >
+                            Modifier
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+
+
+<script setup lang="ts">
+definePageMeta({
+    layout: 'admin'
+})
+
+import type {UserData} from "~/services/dto/user-data";
+import {getUsers} from "~/services/auth";
+
+const userList = ref<UserData[]>([])
+
+
+onMounted(async () => {
+    userList.value = await getUsers()
+})
+</script>
diff --git a/frontend/services/dto/user-data.ts b/frontend/services/dto/user-data.ts
index f3e33b5..4db819e 100644
--- a/frontend/services/dto/user-data.ts
+++ b/frontend/services/dto/user-data.ts
@@ -1,4 +1,5 @@
 export interface UserData {
   id: number
   username: string
+  roles?: string[]
 }
diff --git a/src/Entity/User.php b/src/Entity/User.php
index aad9b14..7acee63 100644
--- a/src/Entity/User.php
+++ b/src/Entity/User.php
@@ -49,6 +49,7 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
     private string $username = '';
 
     #[ORM\Column(type: 'json')]
+    #[Groups(['user:read'])]
     private array $roles = [];
 
     #[ORM\Column]