diff --git a/components/users/users-table.tsx b/components/users/users-table.tsx
index d88c26ea..b8f56c45 100644
--- a/components/users/users-table.tsx
+++ b/components/users/users-table.tsx
@@ -407,78 +407,85 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
   if (loading) return <div className="text-center p-4">Loading...</div>;
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-4 p-6 bg-gray-100 rounded-lg">
       <div className="flex justify-between items-center">
         <Input
           type="text"
           placeholder="Rechercher un utilisateur..."
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
-          className="max-w-sm"
+          className="max-w-sm bg-white text-gray-900 border-gray-300"
         />
         <Dialog open={newUserDialog} onOpenChange={setNewUserDialog}>
           <DialogTrigger asChild>
-            <Button>Ajouter un utilisateur</Button>
+            <Button className="bg-blue-600 hover:bg-blue-700 text-white">
+              Ajouter un utilisateur
+            </Button>
           </DialogTrigger>
-          <DialogContent className="max-h-[85vh] overflow-y-auto">
+          <DialogContent className="max-h-[85vh] overflow-y-auto bg-white text-black border border-gray-300">
             <DialogHeader>
-              <DialogTitle>New User</DialogTitle>
+              <DialogTitle className="text-gray-900">Nouvel Utilisateur</DialogTitle>
             </DialogHeader>
             <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>
+                  <Label htmlFor="username" className="text-gray-900">Nom d'utilisateur</Label>
                   <Input
                     id="username"
                     value={formData.username}
                     onChange={(e) => setFormData(prev => ({ ...prev, username: e.target.value.trim() }))}
                     required
+                    className="bg-white text-gray-900 border-gray-300"
                   />
                 </div>
                 <div className="space-y-2">
-                  <Label htmlFor="email">Email</Label>
+                  <Label htmlFor="email" className="text-gray-900">Email</Label>
                   <Input
                     id="email"
                     type="email"
                     value={formData.email}
                     onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value.trim() }))}
                     required
+                    className="bg-white text-gray-900 border-gray-300"
                   />
                 </div>
               </div>
               <div className="grid grid-cols-2 gap-3">
                 <div className="space-y-2">
-                  <Label htmlFor="firstName">First Name</Label>
+                  <Label htmlFor="firstName" className="text-gray-900">Prénom</Label>
                   <Input
                     id="firstName"
                     value={formData.firstName}
                     onChange={(e) => setFormData(prev => ({ ...prev, firstName: e.target.value.trim() }))}
                     required
+                    className="bg-white text-gray-900 border-gray-300"
                   />
                 </div>
                 <div className="space-y-2">
-                  <Label htmlFor="lastName">Last Name</Label>
+                  <Label htmlFor="lastName" className="text-gray-900">Nom</Label>
                   <Input
                     id="lastName"
                     value={formData.lastName}
                     onChange={(e) => setFormData(prev => ({ ...prev, lastName: e.target.value.trim() }))}
                     required
+                    className="bg-white text-gray-900 border-gray-300"
                   />
                 </div>
               </div>
               <div className="space-y-2">
-                <Label htmlFor="password">Password</Label>
+                <Label htmlFor="password" className="text-gray-900">Mot de passe</Label>
                 <Input
                   id="password"
                   type="password"
                   value={formData.password}
                   onChange={(e) => setFormData(prev => ({ ...prev, password: e.target.value }))}
                   required
+                  className="bg-white text-gray-900 border-gray-300"
                 />
               </div>
               <div className="space-y-2">
-                <Label>Roles</Label>
-                <div className="grid grid-cols-2 gap-2 max-h-[120px] overflow-y-auto border rounded-md p-2">
+                <Label className="text-gray-900">Rôles</Label>
+                <div className="grid grid-cols-2 gap-2 max-h-[120px] overflow-y-auto border border-gray-300 rounded-md p-2 bg-white">
                   {roles.map((role) => (
                     <div key={role.id} className="flex items-center space-x-2">
                       <Checkbox
@@ -492,41 +499,42 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
                               : prev.roles.filter(r => r !== role.name)
                           }));
                         }}
+                        className="border-gray-500"
                       />
-                      <Label htmlFor={`role-${role.id}`} className="text-sm">{role.name}</Label>
+                      <Label htmlFor={`role-${role.id}`} className="text-sm text-gray-900">{role.name}</Label>
                     </div>
                   ))}
                 </div>
               </div>
-              <Button type="submit" className="w-full">Create User</Button>
+              <Button type="submit" className="w-full bg-blue-600 hover:bg-blue-700 text-white">Créer Utilisateur</Button>
             </form>
           </DialogContent>
         </Dialog>
       </div>
 
-      <Table>
-        <TableHeader>
+      <Table className="bg-white border border-gray-300 rounded-md">
+        <TableHeader className="bg-gray-50">
           <TableRow>
-            <TableHead>Username</TableHead>
-            <TableHead>First Name</TableHead>
-            <TableHead>Last Name</TableHead>
-            <TableHead>Email</TableHead>
-            <TableHead>Created At</TableHead>
-            <TableHead>Roles</TableHead>
-            <TableHead className="text-right">Actions</TableHead>
+            <TableHead className="text-gray-900">Username</TableHead>
+            <TableHead className="text-gray-900">First Name</TableHead>
+            <TableHead className="text-gray-900">Last Name</TableHead>
+            <TableHead className="text-gray-900">Email</TableHead>
+            <TableHead className="text-gray-900">Created At</TableHead>
+            <TableHead className="text-gray-900">Roles</TableHead>
+            <TableHead className="text-gray-900 text-right">Actions</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
           {paginatedUsers.map((user) => (
-            <TableRow key={user.id}>
-              <TableCell>{user.username}</TableCell>
-              <TableCell>{user.firstName || "-"}</TableCell>
-              <TableCell>{user.lastName || "-"}</TableCell>
-              <TableCell>{user.email || "-"}</TableCell>
-              <TableCell>
+            <TableRow key={user.id} className="hover:bg-gray-50 border-t border-gray-200">
+              <TableCell className="text-gray-900">{user.username}</TableCell>
+              <TableCell className="text-gray-900">{user.firstName || "-"}</TableCell>
+              <TableCell className="text-gray-900">{user.lastName || "-"}</TableCell>
+              <TableCell className="text-gray-900">{user.email || "-"}</TableCell>
+              <TableCell className="text-gray-900">
                 {new Date(user.createdTimestamp).toLocaleDateString()}
               </TableCell>
-              <TableCell>
+              <TableCell className="text-gray-900">
                 <div className="flex flex-wrap gap-1">
                   {(user.roles || []).map((role) => (
                     <span key={role} className="inline-flex items-center rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
@@ -535,7 +543,7 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
                   ))}
                 </div>
               </TableCell>
-              <TableCell className="text-right">
+              <TableCell className="text-gray-900 text-right">
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button 
@@ -550,14 +558,15 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
                       <MoreHorizontal className="h-4 w-4" />
                     </Button>
                   </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                  <DropdownMenuContent align="end" className="bg-white border border-gray-300">
+                    <DropdownMenuLabel className="text-gray-900">Actions</DropdownMenuLabel>
                     <DropdownMenuItem 
                       onClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
                         handleEdit(user.id);
                       }}
+                      className="text-gray-900 hover:bg-gray-100"
                     >
                       <Edit className="mr-2 h-4 w-4" />
                       Modifier
@@ -568,6 +577,7 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
                         e.stopPropagation();
                         handleManageRoles(user.id);
                       }}
+                      className="text-gray-900 hover:bg-gray-100"
                     >
                       <UserPlus className="mr-2 h-4 w-4" />
                       Gérer les rôles
@@ -578,6 +588,7 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
                         e.stopPropagation();
                         handleChangePassword(user.id);
                       }}
+                      className="text-gray-900 hover:bg-gray-100"
                     >
                       <Key className="mr-2 h-4 w-4" />
                       Changer le mot de passe
@@ -588,6 +599,7 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
                         e.stopPropagation();
                         handleToggleUserStatus(user.id, user.enabled);
                       }}
+                      className="text-gray-900 hover:bg-gray-100"
                     >
                       {user.enabled ? (
                         <>
@@ -603,7 +615,7 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
                     </DropdownMenuItem>
                     <DropdownMenuSeparator />
                     <DropdownMenuItem
-                      className="text-red-600"
+                      className="text-red-600 hover:bg-red-50 hover:text-red-700"
                       onClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
@@ -636,34 +648,37 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
         }
         setEditUserDialog(open);
       }}>
-        <DialogContent>
+        <DialogContent className="bg-white text-black border border-gray-300">
           <DialogHeader>
-            <DialogTitle>Modifier l'utilisateur</DialogTitle>
+            <DialogTitle className="text-gray-900">Modifier l'utilisateur</DialogTitle>
           </DialogHeader>
           <form onSubmit={handleUpdateUser} className="space-y-4">
             <div className="space-y-2">
-              <Label htmlFor="edit-firstName">Prénom</Label>
+              <Label htmlFor="edit-firstName" className="text-gray-900">Prénom</Label>
               <Input
                 id="edit-firstName"
                 value={formData.firstName}
                 onChange={(e) => setFormData(prev => ({ ...prev, firstName: e.target.value }))}
+                className="bg-white text-gray-900 border-gray-300"
               />
             </div>
             <div className="space-y-2">
-              <Label htmlFor="edit-lastName">Nom</Label>
+              <Label htmlFor="edit-lastName" className="text-gray-900">Nom</Label>
               <Input
                 id="edit-lastName"
                 value={formData.lastName}
                 onChange={(e) => setFormData(prev => ({ ...prev, lastName: e.target.value }))}
+                className="bg-white text-gray-900 border-gray-300"
               />
             </div>
             <div className="space-y-2">
-              <Label htmlFor="edit-email">Email</Label>
+              <Label htmlFor="edit-email" className="text-gray-900">Email</Label>
               <Input
                 id="edit-email"
                 type="email"
                 value={formData.email}
                 onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
+                className="bg-white text-gray-900 border-gray-300"
               />
             </div>
             <div className="flex justify-end space-x-2">
@@ -683,10 +698,11 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
                     enabled: true,
                   });
                 }}
+                className="border-gray-300 text-gray-800 hover:bg-gray-100"
               >
                 Annuler
               </Button>
-              <Button type="submit">
+              <Button type="submit" className="bg-blue-600 hover:bg-blue-700 text-white">
                 Modifier
               </Button>
             </div>
@@ -701,14 +717,14 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
         }
         setManageRolesDialog(open);
       }}>
-        <DialogContent>
+        <DialogContent className="bg-white text-black border border-gray-300">
           <DialogHeader>
-            <DialogTitle>Manage roles for {selectedUser?.username}</DialogTitle>
+            <DialogTitle className="text-gray-900">Gérer les rôles pour {selectedUser?.username}</DialogTitle>
           </DialogHeader>
           <div className="space-y-4">
             <div className="space-y-2">
-              <Label>Available Roles</Label>
-              <div className="grid grid-cols-2 gap-2 max-h-[200px] overflow-y-auto border rounded-md p-2">
+              <Label className="text-gray-900">Rôles disponibles</Label>
+              <div className="grid grid-cols-2 gap-2 max-h-[200px] overflow-y-auto border border-gray-300 rounded-md p-2 bg-white">
                 {roles.map((role) => (
                   <div key={role.id} className="flex items-center space-x-2 p-2 rounded-md hover:bg-gray-100">
                     <Checkbox
@@ -722,10 +738,11 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
                             : prev.roles.filter(r => r !== role.name)
                         }));
                       }}
+                      className="border-gray-500"
                     />
                     <Label 
                       htmlFor={`manage-role-${role.id}`}
-                      className="text-sm"
+                      className="text-sm text-gray-900"
                     >
                       {role.name}
                     </Label>
@@ -741,11 +758,12 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
                   setSelectedUser(null);
                   setFormData(prev => ({ ...prev, roles: [] }));
                 }}
+                className="border-gray-300 text-gray-800 hover:bg-gray-100"
               >
-                Cancel
+                Annuler
               </Button>
-              <Button onClick={handleUpdateRoles}>
-                Update Roles
+              <Button onClick={handleUpdateRoles} className="bg-blue-600 hover:bg-blue-700 text-white">
+                Mettre à jour les rôles
               </Button>
             </div>
           </div>