diff --git a/public/css/Compte/GestionUser.css b/public/css/Compte/GestionUser.css
index a2cb857..5fe2b0a 100644
--- a/public/css/Compte/GestionUser.css
+++ b/public/css/Compte/GestionUser.css
@@ -1,4 +1,4 @@
-#container_gestion_user {
+#container_modal {
     background-color: white;
     margin-left: 20%; /* Centrage vertical */
     margin-top: 5%;
@@ -7,7 +7,6 @@
     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;
 }
 
 body {
diff --git a/public/css/Compte/index.css b/public/css/Compte/index.css
index f1b079e..37dd955 100644
--- a/public/css/Compte/index.css
+++ b/public/css/Compte/index.css
@@ -48,7 +48,7 @@
     }
 }
 
-#container_gestion_user {
+#container_modal {
     background-color: white;
     margin-left: 20%; /* Centrage vertical */
     margin-top: 5%;
@@ -57,7 +57,6 @@
     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;
 }
 
 a{
diff --git a/public/css/GestionUtilisateurs/GestionUtilisateurs.css b/public/css/GestionUtilisateurs/GestionUtilisateurs.css
index 7dc86ff..b5957a1 100644
--- a/public/css/GestionUtilisateurs/GestionUtilisateurs.css
+++ b/public/css/GestionUtilisateurs/GestionUtilisateurs.css
@@ -1,4 +1,4 @@
-#container_gestion_utilisateurs {
+#container_modal {
     background-color: white;
     margin-left: 20%; /* Centrage vertical */
     margin-top: 5%;
@@ -7,17 +7,4 @@
     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/Compte/CompteModal.js b/public/js/Compte/CompteModal.js
index 14636bd..0cf9eac 100644
--- a/public/js/Compte/CompteModal.js
+++ b/public/js/Compte/CompteModal.js
@@ -1,29 +1,40 @@
 document.querySelector('.btn-info-compte').addEventListener('click', function(event) {
     event.preventDefault();
 
-    const contentContainer = document.getElementById('container-gestion-user');
+    document.getElementById('container_modal');
 
-    // Vérifie si le contenu est déjà affiché
-    if (container_gestion_user.style.display === 'block') {
-        // Masquer la section "Compte" si elle est déjà affichée
-        container_gestion_user.style.display = 'none';
-        container_gestion_user.innerHTML = ''; // On efface le contenu pour éviter la réutilisation
-    } else {
-        // Afficher le conteneur et charger le contenu via AJAX
-        fetch('/gestion-user')
-            .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_user.innerHTML = html;
-                container_gestion_user.style.display = 'block';
-            })
-            .catch(error => {
-                console.error('Erreur:', error);
-            });
-    }
-});
\ No newline at end of file
+    fetch('/gestion-user')
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Erreur');
+            }
+            return response.text();
+        })
+        .then(html => {
+            // Insérer le HTML dans le conteneur et l'afficher
+            container_modal.innerHTML = html;
+            container_modal.style.display = 'block';
+        })
+        .catch(error => {
+            console.error('Erreur:', error);
+        });
+});
+
+function updateUser (event) {
+    document.getElementById('container_modal');
+    const userIdString = event.getAttribute('data-id');
+    let userId = parseInt(userIdString);
+
+    fetch(`/user/update/${userId}`)
+        .then(response => {
+            return response.text();
+        })
+        .then(html => {
+            // Insérer le HTML dans le conteneur et l'afficher
+            container_modal.innerHTML = html;
+            container_modal.style.display = 'block';
+        })
+        .catch(error => {
+            console.error('Erreur:', error);
+        });
+}
\ No newline at end of file
diff --git a/public/js/GestionUtilisateurs/GestionUtilisateurs.js b/public/js/GestionUtilisateurs/GestionUtilisateurs.js
index 7785a22..b4351bb 100644
--- a/public/js/GestionUtilisateurs/GestionUtilisateurs.js
+++ b/public/js/GestionUtilisateurs/GestionUtilisateurs.js
@@ -1,59 +1,41 @@
 document.querySelector('.btn-gestion-utilisateurs').addEventListener('click', function(event) {
     event.preventDefault();
 
-    const contentContainer = document.getElementById('container_gestion_utilisateurs');
+    document.getElementById('container_modal');
 
-    // 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);
-            });
-    }
+    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_modal.innerHTML = html;
+            container_modal.style.display = 'block';
+        })
+        .catch(error => {
+            console.error('Erreur:', error);
+        });
 });
 
-document.querySelector('.btn-gestion-utilisateurs').addEventListener('click', function(event) {
-    event.preventDefault();
+function addUser (event) {
+    document.getElementById('container_modal');
 
-    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
+    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_modal.innerHTML = html;
+            container_modal.style.display = 'block';
+        })
+        .catch(error => {
+            console.error('Erreur:', error);
+        });
+}
diff --git a/src/Form/UpdateUserType.php b/src/Form/UpdateUserType.php
index 366ec33..96e2a0f 100644
--- a/src/Form/UpdateUserType.php
+++ b/src/Form/UpdateUserType.php
@@ -39,6 +39,8 @@ class UpdateUserType extends AbstractType
                 'choices' => [
                     'Admin' => 'ROLE_ADMIN',
                     'User' => 'ROLE_USER',
+                    'Cuisinier' => 'ROLE_CUISINIER',
+                    'Serveur' => 'ROLE_SERVEUR',
                 ],
                 'expanded' => true,
                 'multiple' => true,
diff --git a/templates/index/admin.html.twig b/templates/index/admin.html.twig
index 0a276fa..9c6d107 100644
--- a/templates/index/admin.html.twig
+++ b/templates/index/admin.html.twig
@@ -118,15 +118,7 @@
         </div>
     </div>
 
-    <div id="container_gestion_user">
-        <!-- 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">
+    <div id="container_modal">
         <!-- Contenu par défaut, ou vous pouvez laisser vide -->
     </div>
 
diff --git a/templates/user/add.html.twig b/templates/user/add.html.twig
index b13bd8c..d349e1d 100644
--- a/templates/user/add.html.twig
+++ b/templates/user/add.html.twig
@@ -97,9 +97,5 @@
         </div>
 
         {{ form_end(registrationForm) }}
-
-        <div class="btn-container">
-            <a href="{{ path('list_user') }}" class="btn-list btn-primary">Liste des Utilisateur</a>
-        </div>
     </div>
 {% endblock %}
diff --git a/templates/user/gestion.html.twig b/templates/user/gestion.html.twig
index c7b43fb..9227329 100644
--- a/templates/user/gestion.html.twig
+++ b/templates/user/gestion.html.twig
@@ -24,13 +24,13 @@
                 <span class="user-info-label">Roles :</span>
                 <span class="user-info-value">{{ app.user.getRolesAsString() }}</span>
             </div>
-
-            <div class="btn-update">
-                <button class="btn-update">Modifier</button>
-            </div>
         </div>
     </form>
 
+    <div class="btn-update">
+        <button onclick="updateUser(this)" data-id="{{ app.user.id }}" class="btn-update">Modifier</button>
+    </div>
+
 {% endblock %}
 
 {% block javascripts %}
diff --git a/templates/user/list.html.twig b/templates/user/list.html.twig
index 7efdb4c..0a88997 100644
--- a/templates/user/list.html.twig
+++ b/templates/user/list.html.twig
@@ -78,7 +78,11 @@
         </tbody>
     </table>
     <div class="btn-container">
-        <a href="{{ path('add_user') }}" class="btn btn-add-user btn-primary">Ajouter un Utilisateur</a>
+        <button onclick="addUser(this)" id="btn-add-user" class="btn btn-add-user btn-primary">Ajouter un Utilisateur</button>
     </div>
 </div>
 {% endblock %}
+
+{% block javascripts %}
+    <script src="{{ asset('js/GestionUtilisateurs/GestionUtilisateurs.js') }}" defer></script>
+{% endblock %}