diff --git a/app/api/roles/route.ts b/app/api/roles/route.ts
index 8a0996c2..725d8cdc 100644
--- a/app/api/roles/route.ts
+++ b/app/api/roles/route.ts
@@ -63,13 +63,13 @@ export async function GET() {
 
     const roles = await response.json();
 
-    // Filter out system roles
+    // Filter out only Keycloak system roles
     const filteredRoles = roles.filter((role: any) => 
       !role.name.startsWith('default-roles-') && 
-      role.name !== 'offline_access' && 
-      role.name !== 'uma_authorization'
+      !['offline_access', 'uma_authorization'].includes(role.name)
     );
 
+    console.log("Available roles:", filteredRoles);
     return NextResponse.json(filteredRoles);
   } catch (error) {
     console.error("Error fetching roles:", error);
diff --git a/components/users/users-table.tsx b/components/users/users-table.tsx
index c4f132ad..7f994de6 100644
--- a/components/users/users-table.tsx
+++ b/components/users/users-table.tsx
@@ -420,47 +420,51 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
           <DialogTrigger asChild>
             <Button>Ajouter un utilisateur</Button>
           </DialogTrigger>
-          <DialogContent>
+          <DialogContent className="max-h-[85vh] overflow-y-auto">
             <DialogHeader>
-              <DialogTitle>Nouvel utilisateur</DialogTitle>
+              <DialogTitle>New User</DialogTitle>
             </DialogHeader>
-            <form onSubmit={handleAddUser} className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="username">Username</Label>
-                <Input
-                  id="username"
-                  value={formData.username}
-                  onChange={(e) => setFormData(prev => ({ ...prev, username: e.target.value.trim() }))}
-                  required
-                />
+            <form onSubmit={handleAddUser} className="space-y-3">
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-2">
+                  <Label htmlFor="username">Username</Label>
+                  <Input
+                    id="username"
+                    value={formData.username}
+                    onChange={(e) => setFormData(prev => ({ ...prev, username: e.target.value.trim() }))}
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="email">Email</Label>
+                  <Input
+                    id="email"
+                    type="email"
+                    value={formData.email}
+                    onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value.trim() }))}
+                    required
+                  />
+                </div>
               </div>
-              <div className="space-y-2">
-                <Label htmlFor="firstName">First Name</Label>
-                <Input
-                  id="firstName"
-                  value={formData.firstName}
-                  onChange={(e) => setFormData(prev => ({ ...prev, firstName: e.target.value.trim() }))}
-                  required
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="lastName">Last Name</Label>
-                <Input
-                  id="lastName"
-                  value={formData.lastName}
-                  onChange={(e) => setFormData(prev => ({ ...prev, lastName: e.target.value.trim() }))}
-                  required
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="email">Email</Label>
-                <Input
-                  id="email"
-                  type="email"
-                  value={formData.email}
-                  onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value.trim() }))}
-                  required
-                />
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-2">
+                  <Label htmlFor="firstName">First Name</Label>
+                  <Input
+                    id="firstName"
+                    value={formData.firstName}
+                    onChange={(e) => setFormData(prev => ({ ...prev, firstName: e.target.value.trim() }))}
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="lastName">Last Name</Label>
+                  <Input
+                    id="lastName"
+                    value={formData.lastName}
+                    onChange={(e) => setFormData(prev => ({ ...prev, lastName: e.target.value.trim() }))}
+                    required
+                  />
+                </div>
               </div>
               <div className="space-y-2">
                 <Label htmlFor="password">Password</Label>
@@ -474,7 +478,7 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
               </div>
               <div className="space-y-2">
                 <Label>Roles</Label>
-                <div className="space-y-2">
+                <div className="grid grid-cols-2 gap-2 max-h-[120px] overflow-y-auto border rounded-md p-2">
                   {roles.map((role) => (
                     <div key={role.id} className="flex items-center space-x-2">
                       <Checkbox
@@ -489,14 +493,12 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
                           }));
                         }}
                       />
-                      <Label htmlFor={`role-${role.id}`}>{role.name}</Label>
+                      <Label htmlFor={`role-${role.id}`} className="text-sm">{role.name}</Label>
                     </div>
                   ))}
                 </div>
               </div>
-              <Button type="submit" className="w-full">
-                Créer l'utilisateur
-              </Button>
+              <Button type="submit" className="w-full">Create User</Button>
             </form>
           </DialogContent>
         </Dialog>