diff --git a/components/users/users-table.tsx b/components/users/users-table.tsx
index 633485e3..c4625012 100644
--- a/components/users/users-table.tsx
+++ b/components/users/users-table.tsx
@@ -190,7 +190,14 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
     if (!user) return;
 
     setSelectedUser(user);
-    setFormData(prev => ({ ...prev, roles: user.roles || [] }));
+    setFormData(prev => ({ 
+      ...prev,
+      roles: user.roles || [],
+      username: user.username,
+      firstName: user.firstName || "",
+      lastName: user.lastName || "",
+      email: user.email || "",
+    }));
     setManageRolesDialog(true);
   };
 
@@ -214,6 +221,15 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
 
       await fetchUsers();
       
+      setFormData({
+        username: "",
+        lastName: "",
+        firstName: "",
+        email: "",
+        password: "",
+        roles: [],
+        enabled: true,
+      });
       setManageRolesDialog(false);
       setSelectedUser(null);
       
@@ -663,9 +679,9 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
           <div className="space-y-4">
             <div className="space-y-2">
               <Label>Rôles</Label>
-              <div className="flex flex-wrap gap-2">
+              <div className="grid grid-cols-2 gap-2">
                 {roles.map((role) => (
-                  <div key={role.id} className="flex items-center space-x-2">
+                  <div key={role.id} className="flex items-center space-x-2 p-2 rounded-md hover:bg-gray-100">
                     <input
                       type="checkbox"
                       id={`manage-role-${role.id}`}
@@ -678,14 +694,23 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
                             : prev.roles.filter(r => r !== role.name)
                         }));
                       }}
+                      className="h-4 w-4 text-primary focus:ring-primary"
                     />
-                    <label htmlFor={`manage-role-${role.id}`}>{role.name}</label>
+                    <label 
+                      htmlFor={`manage-role-${role.id}`}
+                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      {role.name}
+                    </label>
                   </div>
                 ))}
               </div>
-              <div className="flex flex-wrap gap-2 mt-2">
+              <div className="flex flex-wrap gap-2 mt-4">
                 {formData.roles.map(role => (
-                  <span key={role} className="px-2 py-1 bg-gray-100 rounded-md text-sm">
+                  <span 
+                    key={role} 
+                    className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary text-primary-foreground"
+                  >
                     {role}
                     <button
                       type="button"
@@ -693,7 +718,7 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
                         ...prev,
                         roles: prev.roles.filter(r => r !== role)
                       }))}
-                      className="ml-2 text-gray-500 hover:text-gray-700"
+                      className="ml-1.5 inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full text-primary-foreground hover:bg-primary-foreground/20 focus:outline-none focus:ring-2 focus:ring-primary-foreground focus:ring-offset-2"
                     >
                       ×
                     </button>
@@ -701,9 +726,29 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
                 ))}
               </div>
             </div>
-            <Button onClick={handleUpdateRoles} className="w-full">
-              Mettre à jour les rôles
-            </Button>
+            <div className="flex justify-end space-x-2">
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setManageRolesDialog(false);
+                  setSelectedUser(null);
+                  setFormData({
+                    username: "",
+                    lastName: "",
+                    firstName: "",
+                    email: "",
+                    password: "",
+                    roles: [],
+                    enabled: true,
+                  });
+                }}
+              >
+                Annuler
+              </Button>
+              <Button onClick={handleUpdateRoles}>
+                Mettre à jour les rôles
+              </Button>
+            </div>
           </div>
         </DialogContent>
       </Dialog>