diff --git a/assets/controllers/user_controller.js b/assets/controllers/user_controller.js
index 6ae7662..52fe83b 100644
--- a/assets/controllers/user_controller.js
+++ b/assets/controllers/user_controller.js
@@ -874,4 +874,72 @@ export default class extends Controller {
             columns
         });
     };
+
+    async deactivateUser(event) {
+        event.preventDefault();
+        const userId = this.idValue;
+
+        if (!userId) {
+            console.error(`User ID not found!`);
+            return;
+        }
+
+        if (confirm(`Voulez-vous vraiment désactiver cet utilisateur ?`)) {
+            try {
+                const formData = new FormData();
+                formData.append('status', 'deactivate');
+
+                const response = await fetch(`/user/activeStatus/${userId}`, {
+                    method: 'POST',
+                    body: formData,
+                    headers: {'X-Requested-With': 'XMLHttpRequest'}
+                });
+
+                if (response.ok) {
+                    alert('Utilisateur désactivé avec succès');
+                    // If you need to refresh the UI, do it here
+                    // e.g., window.location.reload();
+                } else {
+                    const text = await response.text();
+                    alert('Erreur: ' + text);
+                }
+            } catch (err) {
+                alert('Erreur lors de la communication avec le serveur');
+            }
+        }
+    }
+
+    async activateUser(event) {
+        event.preventDefault();
+        const userId = this.idValue;
+
+        if (!userId) {
+            console.error(`User ID not found!`);
+            return;
+        }
+
+        if (confirm(`Voulez-vous vraiment activer cet utilisateur ?`)) {
+            try {
+                const formData = new FormData();
+                formData.append('status', 'activate');
+
+                const response = await fetch(`/user/activeStatus/${userId}`, {
+                    method: 'POST',
+                    body: formData,
+                    headers: {'X-Requested-With': 'XMLHttpRequest'}
+                });
+
+                if (response.ok) {
+                    alert('Utilisateur activé avec succès');
+                    // If you need to refresh the UI, do it here
+                    // e.g., window.location.reload();
+                } else {
+                    const text = await response.text();
+                    alert('Erreur: ' + text);
+                }
+            } catch (err) {
+                alert('Erreur lors de la communication avec le serveur');
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/templates/user/show.html.twig b/templates/user/show.html.twig
index 1da52ac..935c6f7 100644
--- a/templates/user/show.html.twig
+++ b/templates/user/show.html.twig
@@ -3,7 +3,7 @@
 {% block body %}
 
     <div class="w-100 h-100 p-5 m-auto">
-        <div class="card p-3 m-3 border-0 no-header-bg">
+        <div class="card p-3 m-3 border-0 no-header-bg" data-controller="user" data-user-id-value="{{ user.id }}">
             {% for type, messages in app.flashes %}
                 {% for message in messages %}
                     <div class="alert alert-{{ type }}">
@@ -18,11 +18,13 @@
                     <div class="d-flex gap-2">
                         {% if is_granted("ROLE_ADMIN") %}
                             {% if user.active %}
-                                <a href="{{ path('user_active_status', {'id': user.id, 'status':'deactivate'}) }}"
-                                   class="btn btn-secondary">Désactiver</a>
+                                <button class="btn btn-secondary" data-action="click->user#deactivateUser">Désactiver</button>
+{#                                <a href="{{ path('user_active_status', {'id': user.id, 'status':'deactivate'}) }}"#}
+{#                                   class="btn btn-secondary">Désactiver</a>#}
                             {% else %}
-                                <a href="{{ path('user_active_status', {'id': user.id, 'status':'activate'}) }}"
-                                   class="btn btn-success">Réactiver</a>
+                                <button class="btn btn-success" data-action="click->user#activateUser">Réactiver</button>
+{#                                <a href="{{ path('user_active_status', {'id': user.id, 'status':'activate'}) }}"#}
+{#                                   class="btn btn-success">Réactiver</a>#}
                             {% endif %}
                             <a href="{{ path('user_delete', {'id': user.id}) }}"
                                class="btn btn-warning">Supprimer</a>