diff --git a/public/css/GestionUtilisateurs/GestionUtilisateurs.css b/public/css/GestionUtilisateurs/GestionUtilisateurs.css
new file mode 100644
index 0000000..7dc86ff
--- /dev/null
+++ b/public/css/GestionUtilisateurs/GestionUtilisateurs.css
@@ -0,0 +1,23 @@
+#container_gestion_utilisateurs {
+    background-color: white;
+    margin-left: 20%; /* Centrage vertical */
+    margin-top: 5%;
+    padding: 20px;
+    border: 1px solid black;
+    width: 75%; /* Largeur du contenu de la modal */
+    height: 100%; /* Hauteur du contenu de la modal */
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+    display: none;
+}
+
+#container_gestion_utilisateurs1 {
+    background-color: white;
+    margin-left: 20%; /* Centrage vertical */
+    margin-top: 5%;
+    padding: 20px;
+    border: 1px solid black;
+    width: 75%; /* Largeur du contenu de la modal */
+    height: 100%; /* Hauteur du contenu de la modal */
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+    display: none;
+}
\ No newline at end of file
diff --git a/public/js/GestionUtilisateurs/GestionUtilisateurs.js b/public/js/GestionUtilisateurs/GestionUtilisateurs.js
new file mode 100644
index 0000000..7785a22
--- /dev/null
+++ b/public/js/GestionUtilisateurs/GestionUtilisateurs.js
@@ -0,0 +1,59 @@
+document.querySelector('.btn-gestion-utilisateurs').addEventListener('click', function(event) {
+    event.preventDefault();
+
+    const contentContainer = document.getElementById('container_gestion_utilisateurs');
+
+    // Vérifie si le contenu est déjà affiché
+    if (container_gestion_utilisateurs.style.display === 'block') {
+        // Masquer la section "Compte" si elle est déjà affichée
+        container_gestion_utilisateurs.style.display = 'none';
+        container_gestion_utilisateurs.innerHTML = ''; // On efface le contenu pour éviter la réutilisation
+    } else {
+        // Afficher le conteneur et charger le contenu via AJAX
+        fetch('/user/list')
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Erreur de chargement de la section Compte');
+                }
+                return response.text();
+            })
+            .then(html => {
+                // Insérer le HTML dans le conteneur et l'afficher
+                container_gestion_utilisateurs.innerHTML = html;
+                container_gestion_utilisateurs.style.display = 'block';
+            })
+            .catch(error => {
+                console.error('Erreur:', error);
+            });
+    }
+});
+
+document.querySelector('.btn-gestion-utilisateurs').addEventListener('click', function(event) {
+    event.preventDefault();
+
+    const contentContainer = document.getElementById('container_gestion_utilisateurs1');
+
+    // Vérifie si le contenu est déjà affiché
+    if (container_gestion_utilisateurs1.style.display === 'block') {
+        // Masquer la section "Compte" si elle est déjà affichée
+        container_gestion_utilisateurs1.style.display = 'none';
+        container_gestion_utilisateurs1.innerHTML = ''; // On efface le contenu pour éviter la réutilisation
+    } else {
+        // Afficher le conteneur et charger le contenu via AJAX
+        fetch('/user/add')
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Erreur de chargement de la section Compte');
+                }
+                return response.text();
+            })
+            .then(html => {
+                // Insérer le HTML dans le conteneur et l'afficher
+                container_gestion_utilisateurs1.innerHTML = html;
+                container_gestion_utilisateurs1.style.display = 'block';
+            })
+            .catch(error => {
+                console.error('Erreur:', error);
+            });
+    }
+});
\ No newline at end of file
diff --git a/templates/index/admin.html.twig b/templates/index/admin.html.twig
index 8318f64..0a276fa 100644
--- a/templates/index/admin.html.twig
+++ b/templates/index/admin.html.twig
@@ -12,7 +12,7 @@
 {% block stylesheets %}
     <link rel="stylesheet" href="{{ asset('css/Index/index.css') }}"> <!-- Ajout du fichier CSS -->
     <link rel="stylesheet" href="{{ asset('css/Compte/index.css') }}"> <!-- Ajout du fichier CSS -->
-    <link rel="stylesheet" href="{{ asset('css/Compte/GestionUser.css') }}"> <!-- Ajout du fichier CSS -->
+    <link rel="stylesheet" href="{{ asset('css/GestionUtilisateurs/GestionUtilisateurs.css') }}"> <!-- Ajout du fichier CSS -->
 {% endblock %}
 
 {% block body %}
@@ -35,10 +35,10 @@
             <div class="nav-bar">
                 <ul>
                     <li>
-                        <div class="btn-custom icon-container">
-                            <i class="icon-medium"> {{ ux_icon('grommet-icons:group') }}</i>
-                            <span>Gérer Utilisateur</span>
-                        </div>
+                        <div class="btn-custom btn-gestion-utilisateurs icon-container" >
+                                <i class="icon-medium"> {{ ux_icon('grommet-icons:group') }}</i>
+                                <span>Gérer Utilisateur</span>
+                            </div>
                     </li>
                     <li>
                         <div class="btn-custom icon-container">
@@ -122,6 +122,14 @@
         <!-- Contenu par défaut, ou vous pouvez laisser vide -->
     </div>
 
+    <div id="container_gestion_utilisateurs">
+        <!-- Contenu par défaut, ou vous pouvez laisser vide -->
+    </div>
+
+    <div id="container_gestion_utilisateurs1">
+        <!-- Contenu par défaut, ou vous pouvez laisser vide -->
+    </div>
+
     <script>
 
     </script>
@@ -132,4 +140,5 @@
 
 {% block javascripts %}
     <script src="{{ asset('js/Compte/CompteModal.js') }}" defer></script>
+    <script src="{{ asset('js/GestionUtilisateurs/GestionUtilisateurs.js') }}" defer></script>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/user/list.html.twig b/templates/user/list.html.twig
index e1f9e9b..7efdb4c 100644
--- a/templates/user/list.html.twig
+++ b/templates/user/list.html.twig
@@ -68,7 +68,7 @@
                 <td>{{ utilisateur.nom }}</td>
                 <td>{{ utilisateur.prenom }}</td>
                 <td>{{ utilisateur.UserIdentifier }}</td>
-                <td>{{ utilisateur.roles|join }}</td>
+                <td>{{ utilisateur.RolesAsString }}</td>
             </tr>
         {% else %}
             <tr>
@@ -78,7 +78,7 @@
         </tbody>
     </table>
     <div class="btn-container">
-        <a href="{{ path('add_user') }}" class="btn btn-primary">Ajouter un Utilisateur</a>
+        <a href="{{ path('add_user') }}" class="btn btn-add-user btn-primary">Ajouter un Utilisateur</a>
     </div>
 </div>
 {% endblock %}