diff --git a/pom.xml b/pom.xml
index 874bd84..71aafee 100644
--- a/pom.xml
+++ b/pom.xml
@@ -27,7 +27,7 @@
         <dependency>
             <groupId>io.quarkiverse.primefaces</groupId>
             <artifactId>quarkus-primefaces</artifactId>
-            <version>3.13.3</version>
+            <version>3.15.1</version>
         </dependency>
 
         <dependency>
@@ -58,6 +58,26 @@
             <classifier>jakarta</classifier>
         </dependency>
 
+        <!-- PrimeFaces Themes - Freya -->
+        <dependency>
+            <groupId>org.primefaces.themes</groupId>
+            <artifactId>freya-theme-jakarta</artifactId>
+            <version>5.0.0</version>
+        </dependency>
+
+        <!-- Quarkus OmniFaces Extension (optional but recommended) -->
+        <dependency>
+            <groupId>io.quarkiverse.omnifaces</groupId>
+            <artifactId>quarkus-omnifaces</artifactId>
+            <version>4.4.1</version>
+        </dependency>
+
+        <!-- Quarkus Undertow -->
+        <dependency>
+            <groupId>io.quarkus</groupId>
+            <artifactId>quarkus-undertow</artifactId>
+        </dependency>
+
         <!-- Lombok -->
         <dependency>
             <groupId>org.projectlombok</groupId>
diff --git a/src/main/java/dev/lions/user/manager/client/service/AuditServiceClient.java b/src/main/java/dev/lions/user/manager/client/service/AuditServiceClient.java
new file mode 100644
index 0000000..947b933
--- /dev/null
+++ b/src/main/java/dev/lions/user/manager/client/service/AuditServiceClient.java
@@ -0,0 +1,105 @@
+package dev.lions.user.manager.client.service;
+
+import dev.lions.user.manager.dto.audit.AuditLogDTO;
+import dev.lions.user.manager.enums.audit.TypeActionAudit;
+import jakarta.ws.rs.*;
+import jakarta.ws.rs.core.MediaType;
+import org.eclipse.microprofile.rest.client.inject.RegisterRestClient;
+
+import java.time.LocalDateTime;
+import java.util.List;
+import java.util.Map;
+
+/**
+ * REST Client pour le service d'audit
+ */
+@Path("/api/audit")
+@RegisterRestClient(configKey = "lions-user-manager-api")
+@Produces(MediaType.APPLICATION_JSON)
+@Consumes(MediaType.APPLICATION_JSON)
+public interface AuditServiceClient {
+
+    @POST
+    @Path("/search")
+    List<AuditLogDTO> searchLogs(
+        @QueryParam("acteur") String acteurUsername,
+        @QueryParam("dateDebut") String dateDebut,
+        @QueryParam("dateFin") String dateFin,
+        @QueryParam("typeAction") TypeActionAudit typeAction,
+        @QueryParam("ressourceType") String ressourceType,
+        @QueryParam("succes") Boolean succes,
+        @QueryParam("page") @DefaultValue("0") int page,
+        @QueryParam("pageSize") @DefaultValue("50") int pageSize
+    );
+
+    @GET
+    @Path("/acteur/{acteurUsername}")
+    List<AuditLogDTO> getLogsByActeur(
+        @PathParam("acteurUsername") String acteurUsername,
+        @QueryParam("limit") @DefaultValue("100") int limit
+    );
+
+    @GET
+    @Path("/realm/{realmName}")
+    List<AuditLogDTO> getLogsByRealm(
+        @PathParam("realmName") String realmName,
+        @QueryParam("dateDebut") String dateDebut,
+        @QueryParam("dateFin") String dateFin,
+        @QueryParam("page") @DefaultValue("0") int page,
+        @QueryParam("pageSize") @DefaultValue("50") int pageSize
+    );
+
+    @GET
+    @Path("/ressource/{ressourceType}/{ressourceId}")
+    List<AuditLogDTO> getLogsByRessource(
+        @PathParam("ressourceType") String ressourceType,
+        @PathParam("ressourceId") String ressourceId,
+        @QueryParam("limit") @DefaultValue("100") int limit
+    );
+
+    @GET
+    @Path("/action/{typeAction}")
+    List<AuditLogDTO> getLogsByAction(
+        @PathParam("typeAction") TypeActionAudit typeAction,
+        @QueryParam("dateDebut") String dateDebut,
+        @QueryParam("dateFin") String dateFin,
+        @QueryParam("limit") @DefaultValue("100") int limit
+    );
+
+    @GET
+    @Path("/statistics/actions")
+    Map<TypeActionAudit, Long> getActionStatistics(
+        @QueryParam("dateDebut") String dateDebut,
+        @QueryParam("dateFin") String dateFin
+    );
+
+    @GET
+    @Path("/statistics/users")
+    Map<String, Long> getUserActivityStatistics(
+        @QueryParam("dateDebut") String dateDebut,
+        @QueryParam("dateFin") String dateFin
+    );
+
+    @GET
+    @Path("/statistics/failures")
+    Long getFailureCount(
+        @QueryParam("dateDebut") String dateDebut,
+        @QueryParam("dateFin") String dateFin
+    );
+
+    @GET
+    @Path("/statistics/successes")
+    Long getSuccessCount(
+        @QueryParam("dateDebut") String dateDebut,
+        @QueryParam("dateFin") String dateFin
+    );
+
+    @GET
+    @Path("/export/csv")
+    @Produces("text/csv")
+    String exportLogsToCSV(
+        @QueryParam("dateDebut") String dateDebut,
+        @QueryParam("dateFin") String dateFin
+    );
+}
+
diff --git a/src/main/java/dev/lions/user/manager/client/service/RoleServiceClient.java b/src/main/java/dev/lions/user/manager/client/service/RoleServiceClient.java
new file mode 100644
index 0000000..28ed731
--- /dev/null
+++ b/src/main/java/dev/lions/user/manager/client/service/RoleServiceClient.java
@@ -0,0 +1,135 @@
+package dev.lions.user.manager.client.service;
+
+import dev.lions.user.manager.dto.role.RoleAssignmentDTO;
+import dev.lions.user.manager.dto.role.RoleDTO;
+import dev.lions.user.manager.enums.role.TypeRole;
+import jakarta.ws.rs.*;
+import jakarta.ws.rs.core.MediaType;
+import org.eclipse.microprofile.rest.client.inject.RegisterRestClient;
+
+import java.util.List;
+
+/**
+ * REST Client pour le service de gestion des rôles
+ */
+@Path("/api/roles")
+@RegisterRestClient(configKey = "lions-user-manager-api")
+@Produces(MediaType.APPLICATION_JSON)
+@Consumes(MediaType.APPLICATION_JSON)
+public interface RoleServiceClient {
+
+    // ==================== Realm Roles ====================
+
+    @POST
+    @Path("/realm")
+    RoleDTO createRealmRole(
+        RoleDTO role,
+        @QueryParam("realm") String realmName
+    );
+
+    @GET
+    @Path("/realm/{roleName}")
+    RoleDTO getRealmRoleByName(
+        @PathParam("roleName") String roleName,
+        @QueryParam("realm") String realmName
+    );
+
+    @GET
+    @Path("/realm")
+    List<RoleDTO> getAllRealmRoles(
+        @QueryParam("realm") String realmName
+    );
+
+    @PUT
+    @Path("/realm/{roleName}")
+    RoleDTO updateRealmRole(
+        @PathParam("roleName") String roleName,
+        RoleDTO role,
+        @QueryParam("realm") String realmName
+    );
+
+    @DELETE
+    @Path("/realm/{roleName}")
+    void deleteRealmRole(
+        @PathParam("roleName") String roleName,
+        @QueryParam("realm") String realmName
+    );
+
+    // ==================== Client Roles ====================
+
+    @POST
+    @Path("/client")
+    RoleDTO createClientRole(
+        RoleDTO role,
+        @QueryParam("realm") String realmName,
+        @QueryParam("clientName") String clientName
+    );
+
+    @GET
+    @Path("/client")
+    List<RoleDTO> getAllClientRoles(
+        @QueryParam("realm") String realmName,
+        @QueryParam("clientName") String clientName
+    );
+
+    @GET
+    @Path("/client/{roleName}")
+    RoleDTO getClientRoleByName(
+        @PathParam("roleName") String roleName,
+        @QueryParam("realm") String realmName,
+        @QueryParam("clientName") String clientName
+    );
+
+    @DELETE
+    @Path("/client/{roleName}")
+    void deleteClientRole(
+        @PathParam("roleName") String roleName,
+        @QueryParam("realm") String realmName,
+        @QueryParam("clientName") String clientName
+    );
+
+    // ==================== Role Assignment ====================
+
+    @POST
+    @Path("/assign")
+    void assignRoleToUser(RoleAssignmentDTO assignment);
+
+    @POST
+    @Path("/revoke")
+    void revokeRoleFromUser(RoleAssignmentDTO assignment);
+
+    @GET
+    @Path("/user/{userId}")
+    List<RoleDTO> getUserRoles(
+        @PathParam("userId") String userId,
+        @QueryParam("realm") String realmName
+    );
+
+    // ==================== Composite Roles ====================
+
+    @GET
+    @Path("/composite/{roleName}")
+    List<RoleDTO> getCompositeRoles(
+        @PathParam("roleName") String roleName,
+        @QueryParam("realm") String realmName,
+        @QueryParam("typeRole") TypeRole typeRole,
+        @QueryParam("clientName") String clientName
+    );
+
+    @POST
+    @Path("/composite/{roleName}/add")
+    void addCompositeRole(
+        @PathParam("roleName") String roleName,
+        @QueryParam("realm") String realmName,
+        @QueryParam("compositeRoleName") String compositeRoleName
+    );
+
+    @DELETE
+    @Path("/composite/{roleName}/remove")
+    void removeCompositeRole(
+        @PathParam("roleName") String roleName,
+        @QueryParam("realm") String realmName,
+        @QueryParam("compositeRoleName") String compositeRoleName
+    );
+}
+
diff --git a/src/main/java/dev/lions/user/manager/client/service/SyncServiceClient.java b/src/main/java/dev/lions/user/manager/client/service/SyncServiceClient.java
new file mode 100644
index 0000000..c7919f5
--- /dev/null
+++ b/src/main/java/dev/lions/user/manager/client/service/SyncServiceClient.java
@@ -0,0 +1,53 @@
+package dev.lions.user.manager.client.service;
+
+import dev.lions.user.manager.dto.sync.HealthStatusDTO;
+import dev.lions.user.manager.dto.sync.SyncResultDTO;
+import jakarta.ws.rs.*;
+import jakarta.ws.rs.core.MediaType;
+import org.eclipse.microprofile.rest.client.inject.RegisterRestClient;
+
+/**
+ * REST Client pour le service de synchronisation
+ */
+@Path("/api/sync")
+@RegisterRestClient(configKey = "lions-user-manager-api")
+@Produces(MediaType.APPLICATION_JSON)
+@Consumes(MediaType.APPLICATION_JSON)
+public interface SyncServiceClient {
+
+    @GET
+    @Path("/health")
+    HealthStatusDTO checkHealth(@QueryParam("realm") String realmName);
+
+    @GET
+    @Path("/health/keycloak")
+    HealthStatusDTO checkKeycloakHealth();
+
+    @POST
+    @Path("/users")
+    SyncResultDTO syncUsers(@QueryParam("realm") String realmName);
+
+    @POST
+    @Path("/roles")
+    SyncResultDTO syncRoles(
+        @QueryParam("realm") String realmName,
+        @QueryParam("clientName") String clientName
+    );
+
+    @GET
+    @Path("/exists/user/{username}")
+    Boolean userExists(
+        @PathParam("username") String username,
+        @QueryParam("realm") String realmName
+    );
+
+    @GET
+    @Path("/exists/role/{roleName}")
+    Boolean roleExists(
+        @PathParam("roleName") String roleName,
+        @QueryParam("realm") String realmName,
+        @QueryParam("typeRole") String typeRole,
+        @QueryParam("clientName") String clientName
+    );
+}
+
diff --git a/src/main/java/dev/lions/user/manager/client/service/UserServiceClient.java b/src/main/java/dev/lions/user/manager/client/service/UserServiceClient.java
new file mode 100644
index 0000000..ffa4dae
--- /dev/null
+++ b/src/main/java/dev/lions/user/manager/client/service/UserServiceClient.java
@@ -0,0 +1,140 @@
+package dev.lions.user.manager.client.service;
+
+import dev.lions.user.manager.dto.user.UserDTO;
+import dev.lions.user.manager.dto.user.UserSearchCriteriaDTO;
+import dev.lions.user.manager.dto.user.UserSearchResultDTO;
+import jakarta.ws.rs.*;
+import jakarta.ws.rs.core.MediaType;
+import org.eclipse.microprofile.rest.client.inject.RegisterRestClient;
+
+import java.util.List;
+
+/**
+ * REST Client pour le service de gestion des utilisateurs
+ * Interface pour communiquer avec l'API backend
+ */
+@Path("/api/users")
+@RegisterRestClient(configKey = "lions-user-manager-api")
+@Produces(MediaType.APPLICATION_JSON)
+@Consumes(MediaType.APPLICATION_JSON)
+public interface UserServiceClient {
+
+    /**
+     * Rechercher des utilisateurs selon des critères
+     */
+    @POST
+    @Path("/search")
+    UserSearchResultDTO searchUsers(UserSearchCriteriaDTO criteria);
+
+    /**
+     * Récupérer un utilisateur par ID
+     */
+    @GET
+    @Path("/{userId}")
+    UserDTO getUserById(
+        @PathParam("userId") String userId,
+        @QueryParam("realm") String realmName
+    );
+
+    /**
+     * Lister tous les utilisateurs (paginé)
+     */
+    @GET
+    UserSearchResultDTO getAllUsers(
+        @QueryParam("realm") String realmName,
+        @QueryParam("page") @DefaultValue("0") int page,
+        @QueryParam("pageSize") @DefaultValue("20") int pageSize
+    );
+
+    /**
+     * Créer un nouvel utilisateur
+     */
+    @POST
+    UserDTO createUser(
+        UserDTO user,
+        @QueryParam("realm") String realmName
+    );
+
+    /**
+     * Mettre à jour un utilisateur
+     */
+    @PUT
+    @Path("/{userId}")
+    UserDTO updateUser(
+        @PathParam("userId") String userId,
+        UserDTO user,
+        @QueryParam("realm") String realmName
+    );
+
+    /**
+     * Supprimer un utilisateur
+     */
+    @DELETE
+    @Path("/{userId}")
+    void deleteUser(
+        @PathParam("userId") String userId,
+        @QueryParam("realm") String realmName
+    );
+
+    /**
+     * Activer un utilisateur
+     */
+    @POST
+    @Path("/{userId}/activate")
+    void activateUser(
+        @PathParam("userId") String userId,
+        @QueryParam("realm") String realmName
+    );
+
+    /**
+     * Désactiver un utilisateur
+     */
+    @POST
+    @Path("/{userId}/deactivate")
+    void deactivateUser(
+        @PathParam("userId") String userId,
+        @QueryParam("realm") String realmName
+    );
+
+    /**
+     * Réinitialiser le mot de passe
+     */
+    @POST
+    @Path("/{userId}/reset-password")
+    void resetPassword(
+        @PathParam("userId") String userId,
+        @QueryParam("realm") String realmName,
+        @QueryParam("newPassword") String newPassword
+    );
+
+    /**
+     * Envoyer un email de vérification
+     */
+    @POST
+    @Path("/{userId}/send-verification-email")
+    void sendVerificationEmail(
+        @PathParam("userId") String userId,
+        @QueryParam("realm") String realmName
+    );
+
+    /**
+     * Déconnecter toutes les sessions d'un utilisateur
+     */
+    @POST
+    @Path("/{userId}/logout-sessions")
+    void logoutAllSessions(
+        @PathParam("userId") String userId,
+        @QueryParam("realm") String realmName
+    );
+
+    /**
+     * Récupérer les sessions actives d'un utilisateur
+     */
+    @GET
+    @Path("/{userId}/sessions")
+    List<String> getActiveSessions(
+        @PathParam("userId") String userId,
+        @QueryParam("realm") String realmName
+    );
+}
+
diff --git a/src/main/java/dev/lions/user/manager/client/view/AuditConsultationBean.java b/src/main/java/dev/lions/user/manager/client/view/AuditConsultationBean.java
new file mode 100644
index 0000000..e28b927
--- /dev/null
+++ b/src/main/java/dev/lions/user/manager/client/view/AuditConsultationBean.java
@@ -0,0 +1,206 @@
+package dev.lions.user.manager.client.view;
+
+import dev.lions.user.manager.client.service.AuditServiceClient;
+import dev.lions.user.manager.dto.audit.AuditLogDTO;
+import dev.lions.user.manager.enums.audit.TypeActionAudit;
+import jakarta.annotation.PostConstruct;
+import jakarta.faces.application.FacesMessage;
+import jakarta.faces.context.FacesContext;
+import jakarta.faces.view.ViewScoped;
+import jakarta.inject.Inject;
+import jakarta.inject.Named;
+import lombok.Data;
+import org.eclipse.microprofile.rest.client.inject.RestClient;
+
+import java.io.Serializable;
+import java.time.LocalDateTime;
+import java.time.format.DateTimeFormatter;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Map;
+import java.util.logging.Logger;
+
+/**
+ * Bean JSF pour la consultation des logs d'audit
+ * 
+ * @author Lions User Manager
+ * @version 1.0.0
+ */
+@Named("auditConsultationBean")
+@ViewScoped
+@Data
+public class AuditConsultationBean implements Serializable {
+
+    private static final long serialVersionUID = 1L;
+    private static final Logger LOGGER = Logger.getLogger(AuditConsultationBean.class.getName());
+
+    @Inject
+    @RestClient
+    private AuditServiceClient auditServiceClient;
+
+    // Liste des logs
+    private List<AuditLogDTO> auditLogs = new ArrayList<>();
+    private AuditLogDTO selectedLog;
+
+    // Filtres de recherche
+    private String acteurUsername;
+    private LocalDateTime dateDebut;
+    private LocalDateTime dateFin;
+    private TypeActionAudit selectedTypeAction;
+    private String ressourceType;
+    private Boolean succes;
+
+    // Pagination
+    private int currentPage = 0;
+    private int pageSize = 50;
+    private long totalRecords = 0;
+
+    // Statistiques
+    private Map<TypeActionAudit, Long> actionStatistics;
+    private Map<String, Long> userActivityStatistics;
+    private Long failureCount = 0L;
+    private Long successCount = 0L;
+
+    // Options
+    private List<TypeActionAudit> typeActionOptions = List.of(TypeActionAudit.values());
+    private List<String> availableRealms = new ArrayList<>();
+
+    private static final DateTimeFormatter DATE_FORMATTER = DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss");
+
+    @PostConstruct
+    public void init() {
+        loadRealms();
+        loadStatistics();
+    }
+
+    /**
+     * Rechercher des logs d'audit
+     */
+    public void searchLogs() {
+        try {
+            String dateDebutStr = dateDebut != null ? dateDebut.format(DATE_FORMATTER) : null;
+            String dateFinStr = dateFin != null ? dateFin.format(DATE_FORMATTER) : null;
+
+            auditLogs = auditServiceClient.searchLogs(
+                acteurUsername,
+                dateDebutStr,
+                dateFinStr,
+                selectedTypeAction,
+                ressourceType,
+                succes,
+                currentPage,
+                pageSize
+            );
+
+            totalRecords = auditLogs.size();
+            addSuccessMessage("Recherche effectuée: " + totalRecords + " résultat(s) trouvé(s)");
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de la recherche: " + e.getMessage());
+            addErrorMessage("Erreur lors de la recherche: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Charger les logs par acteur
+     */
+    public void loadLogsByActeur(String username) {
+        try {
+            auditLogs = auditServiceClient.getLogsByActeur(username, 100);
+            totalRecords = auditLogs.size();
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors du chargement: " + e.getMessage());
+            addErrorMessage("Erreur lors du chargement: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Charger les logs par realm
+     */
+    public void loadLogsByRealm(String realmName) {
+        try {
+            String dateDebutStr = dateDebut != null ? dateDebut.format(DATE_FORMATTER) : null;
+            String dateFinStr = dateFin != null ? dateFin.format(DATE_FORMATTER) : null;
+
+            auditLogs = auditServiceClient.getLogsByRealm(
+                realmName,
+                dateDebutStr,
+                dateFinStr,
+                currentPage,
+                pageSize
+            );
+
+            totalRecords = auditLogs.size();
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors du chargement: " + e.getMessage());
+            addErrorMessage("Erreur lors du chargement: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Charger les statistiques
+     */
+    public void loadStatistics() {
+        try {
+            String dateDebutStr = dateDebut != null ? dateDebut.format(DATE_FORMATTER) : null;
+            String dateFinStr = dateFin != null ? dateFin.format(DATE_FORMATTER) : null;
+
+            actionStatistics = auditServiceClient.getActionStatistics(dateDebutStr, dateFinStr);
+            userActivityStatistics = auditServiceClient.getUserActivityStatistics(dateDebutStr, dateFinStr);
+            failureCount = auditServiceClient.getFailureCount(dateDebutStr, dateFinStr);
+            successCount = auditServiceClient.getSuccessCount(dateDebutStr, dateFinStr);
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors du chargement des statistiques: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Exporter les logs en CSV
+     */
+    public void exportToCSV() {
+        try {
+            String dateDebutStr = dateDebut != null ? dateDebut.format(DATE_FORMATTER) : null;
+            String dateFinStr = dateFin != null ? dateFin.format(DATE_FORMATTER) : null;
+
+            String csv = auditServiceClient.exportLogsToCSV(dateDebutStr, dateFinStr);
+            // TODO: Implémenter le téléchargement du fichier CSV
+            addSuccessMessage("Export CSV généré avec succès");
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de l'export: " + e.getMessage());
+            addErrorMessage("Erreur lors de l'export: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Réinitialiser les filtres
+     */
+    public void resetFilters() {
+        acteurUsername = null;
+        dateDebut = null;
+        dateFin = null;
+        selectedTypeAction = null;
+        ressourceType = null;
+        succes = null;
+        currentPage = 0;
+        auditLogs.clear();
+    }
+
+    /**
+     * Charger les realms disponibles
+     */
+    private void loadRealms() {
+        // TODO: Implémenter la récupération des realms depuis Keycloak
+        availableRealms = List.of("master", "btpxpress", "unionflow");
+    }
+
+    // Méthodes utilitaires
+    private void addSuccessMessage(String message) {
+        FacesContext.getCurrentInstance().addMessage(null,
+            new FacesMessage(FacesMessage.SEVERITY_INFO, "Succès", message));
+    }
+
+    private void addErrorMessage(String message) {
+        FacesContext.getCurrentInstance().addMessage(null,
+            new FacesMessage(FacesMessage.SEVERITY_ERROR, "Erreur", message));
+    }
+}
+
diff --git a/src/main/java/dev/lions/user/manager/client/view/RoleGestionBean.java b/src/main/java/dev/lions/user/manager/client/view/RoleGestionBean.java
new file mode 100644
index 0000000..b96a8bb
--- /dev/null
+++ b/src/main/java/dev/lions/user/manager/client/view/RoleGestionBean.java
@@ -0,0 +1,242 @@
+package dev.lions.user.manager.client.view;
+
+import dev.lions.user.manager.client.service.RoleServiceClient;
+import dev.lions.user.manager.dto.role.RoleAssignmentDTO;
+import dev.lions.user.manager.dto.role.RoleDTO;
+import dev.lions.user.manager.enums.role.TypeRole;
+import jakarta.annotation.PostConstruct;
+import jakarta.faces.application.FacesMessage;
+import jakarta.faces.context.FacesContext;
+import jakarta.faces.view.ViewScoped;
+import jakarta.inject.Inject;
+import jakarta.inject.Named;
+import lombok.Data;
+import org.eclipse.microprofile.rest.client.inject.RestClient;
+
+import java.io.Serializable;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.logging.Logger;
+
+/**
+ * Bean JSF pour la gestion des rôles
+ * 
+ * @author Lions User Manager
+ * @version 1.0.0
+ */
+@Named("roleGestionBean")
+@ViewScoped
+@Data
+public class RoleGestionBean implements Serializable {
+
+    private static final long serialVersionUID = 1L;
+    private static final Logger LOGGER = Logger.getLogger(RoleGestionBean.class.getName());
+
+    @Inject
+    @RestClient
+    private RoleServiceClient roleServiceClient;
+
+    // Liste des rôles
+    private List<RoleDTO> realmRoles = new ArrayList<>();
+    private List<RoleDTO> clientRoles = new ArrayList<>();
+    private List<RoleDTO> allRoles = new ArrayList<>();
+    private RoleDTO selectedRole;
+
+    // Pour la création/édition
+    private RoleDTO newRole = RoleDTO.builder().build();
+    private boolean editMode = false;
+
+    // Filtres
+    private String realmName = "master";
+    private String clientName;
+    private TypeRole selectedTypeRole;
+    private String roleSearchText;
+
+    // Options
+    private List<TypeRole> typeRoleOptions = List.of(TypeRole.values());
+    private List<String> availableRealms = new ArrayList<>();
+    private List<String> availableClients = new ArrayList<>();
+
+    @PostConstruct
+    public void init() {
+        loadRealms();
+        loadRealmRoles();
+    }
+
+    /**
+     * Charger les rôles Realm
+     */
+    public void loadRealmRoles() {
+        try {
+            realmRoles = roleServiceClient.getAllRealmRoles(realmName);
+            updateAllRoles();
+            LOGGER.info("Chargement de " + realmRoles.size() + " rôles Realm");
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors du chargement des rôles Realm: " + e.getMessage());
+            addErrorMessage("Erreur lors du chargement des rôles Realm");
+        }
+    }
+
+    /**
+     * Charger les rôles Client
+     */
+    public void loadClientRoles() {
+        if (clientName == null || clientName.isEmpty()) {
+            return;
+        }
+
+        try {
+            clientRoles = roleServiceClient.getAllClientRoles(realmName, clientName);
+            updateAllRoles();
+            LOGGER.info("Chargement de " + clientRoles.size() + " rôles Client");
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors du chargement des rôles Client: " + e.getMessage());
+            addErrorMessage("Erreur lors du chargement des rôles Client");
+        }
+    }
+
+    /**
+     * Mettre à jour la liste complète des rôles
+     */
+    private void updateAllRoles() {
+        allRoles = new ArrayList<>();
+        allRoles.addAll(realmRoles);
+        allRoles.addAll(clientRoles);
+    }
+
+    /**
+     * Créer un nouveau rôle Realm
+     */
+    public void createRealmRole() {
+        try {
+            RoleDTO created = roleServiceClient.createRealmRole(newRole, realmName);
+            addSuccessMessage("Rôle Realm créé avec succès: " + created.getName());
+            resetForm();
+            loadRealmRoles();
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de la création: " + e.getMessage());
+            addErrorMessage("Erreur lors de la création: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Créer un nouveau rôle Client
+     */
+    public void createClientRole() {
+        if (clientName == null || clientName.isEmpty()) {
+            addErrorMessage("Le nom du client est obligatoire");
+            return;
+        }
+
+        try {
+            RoleDTO created = roleServiceClient.createClientRole(newRole, realmName, clientName);
+            addSuccessMessage("Rôle Client créé avec succès: " + created.getName());
+            resetForm();
+            loadClientRoles();
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de la création: " + e.getMessage());
+            addErrorMessage("Erreur lors de la création: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Supprimer un rôle Realm
+     */
+    public void deleteRealmRole(String roleName) {
+        try {
+            roleServiceClient.deleteRealmRole(roleName, realmName);
+            addSuccessMessage("Rôle Realm supprimé avec succès");
+            loadRealmRoles();
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de la suppression: " + e.getMessage());
+            addErrorMessage("Erreur lors de la suppression: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Supprimer un rôle Client
+     */
+    public void deleteClientRole(String roleName) {
+        if (clientName == null || clientName.isEmpty()) {
+            addErrorMessage("Le nom du client est obligatoire");
+            return;
+        }
+
+        try {
+            roleServiceClient.deleteClientRole(roleName, realmName, clientName);
+            addSuccessMessage("Rôle Client supprimé avec succès");
+            loadClientRoles();
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de la suppression: " + e.getMessage());
+            addErrorMessage("Erreur lors de la suppression: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Attribuer un rôle à un utilisateur
+     */
+    public void assignRoleToUser(String userId, String roleName) {
+        try {
+            RoleAssignmentDTO assignment = RoleAssignmentDTO.builder()
+                .userId(userId)
+                .roleNames(List.of(roleName))
+                .typeRole(TypeRole.REALM_ROLE)
+                .realmName(realmName)
+                .build();
+
+            roleServiceClient.assignRoleToUser(assignment);
+            addSuccessMessage("Rôle attribué avec succès");
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de l'attribution: " + e.getMessage());
+            addErrorMessage("Erreur lors de l'attribution: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Révoquer un rôle d'un utilisateur
+     */
+    public void revokeRoleFromUser(String userId, String roleName) {
+        try {
+            RoleAssignmentDTO assignment = RoleAssignmentDTO.builder()
+                .userId(userId)
+                .roleNames(List.of(roleName))
+                .typeRole(TypeRole.REALM_ROLE)
+                .realmName(realmName)
+                .build();
+
+            roleServiceClient.revokeRoleFromUser(assignment);
+            addSuccessMessage("Rôle révoqué avec succès");
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de la révocation: " + e.getMessage());
+            addErrorMessage("Erreur lors de la révocation: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Réinitialiser le formulaire
+     */
+    public void resetForm() {
+        newRole = RoleDTO.builder().build();
+        editMode = false;
+    }
+
+    /**
+     * Charger les realms disponibles
+     */
+    private void loadRealms() {
+        // TODO: Implémenter la récupération des realms depuis Keycloak
+        availableRealms = List.of("master", "btpxpress", "unionflow");
+    }
+
+    // Méthodes utilitaires
+    private void addSuccessMessage(String message) {
+        FacesContext.getCurrentInstance().addMessage(null,
+            new FacesMessage(FacesMessage.SEVERITY_INFO, "Succès", message));
+    }
+
+    private void addErrorMessage(String message) {
+        FacesContext.getCurrentInstance().addMessage(null,
+            new FacesMessage(FacesMessage.SEVERITY_ERROR, "Erreur", message));
+    }
+}
+
diff --git a/src/main/java/dev/lions/user/manager/client/view/UserCreationBean.java b/src/main/java/dev/lions/user/manager/client/view/UserCreationBean.java
new file mode 100644
index 0000000..f87a235
--- /dev/null
+++ b/src/main/java/dev/lions/user/manager/client/view/UserCreationBean.java
@@ -0,0 +1,132 @@
+package dev.lions.user.manager.client.view;
+
+import dev.lions.user.manager.client.service.UserServiceClient;
+import dev.lions.user.manager.dto.user.UserDTO;
+import dev.lions.user.manager.enums.user.StatutUser;
+import jakarta.annotation.PostConstruct;
+import jakarta.faces.application.FacesMessage;
+import jakarta.faces.context.FacesContext;
+import jakarta.faces.view.ViewScoped;
+import jakarta.inject.Inject;
+import jakarta.inject.Named;
+import lombok.Data;
+import org.eclipse.microprofile.rest.client.inject.RestClient;
+
+import java.io.Serializable;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.logging.Logger;
+
+/**
+ * Bean JSF pour la création d'un nouvel utilisateur
+ * 
+ * @author Lions User Manager
+ * @version 1.0.0
+ */
+@Named("userCreationBean")
+@ViewScoped
+@Data
+public class UserCreationBean implements Serializable {
+
+    private static final long serialVersionUID = 1L;
+    private static final Logger LOGGER = Logger.getLogger(UserCreationBean.class.getName());
+
+    @Inject
+    @RestClient
+    private UserServiceClient userServiceClient;
+
+    private UserDTO newUser = UserDTO.builder().build();
+    private String realmName = "master";
+    private String password;
+    private String passwordConfirm;
+
+    // Options pour les selects
+    private List<StatutUser> statutOptions = List.of(StatutUser.values());
+    private List<String> availableRealms = new ArrayList<>();
+
+    @PostConstruct
+    public void init() {
+        loadRealms();
+        // Initialiser les valeurs par défaut
+        newUser.setEnabled(true);
+        newUser.setEmailVerified(false);
+        newUser.setStatut(StatutUser.ACTIF);
+    }
+
+    /**
+     * Créer un nouvel utilisateur
+     */
+    public String createUser() {
+        // Validation
+        if (password == null || password.isEmpty()) {
+            addErrorMessage("Le mot de passe est obligatoire");
+            return null;
+        }
+
+        if (!password.equals(passwordConfirm)) {
+            addErrorMessage("Les mots de passe ne correspondent pas");
+            return null;
+        }
+
+        if (password.length() < 8) {
+            addErrorMessage("Le mot de passe doit contenir au moins 8 caractères");
+            return null;
+        }
+
+        try {
+            // Créer l'utilisateur
+            UserDTO createdUser = userServiceClient.createUser(newUser, realmName);
+
+            // Définir le mot de passe
+            userServiceClient.resetPassword(createdUser.getId(), realmName, password);
+
+            addSuccessMessage("Utilisateur créé avec succès: " + createdUser.getUsername());
+            resetForm();
+            return "userListPage"; // Rediriger vers la liste
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de la création: " + e.getMessage());
+            addErrorMessage("Erreur lors de la création: " + e.getMessage());
+            return null;
+        }
+    }
+
+    /**
+     * Réinitialiser le formulaire
+     */
+    public void resetForm() {
+        newUser = UserDTO.builder().build();
+        password = null;
+        passwordConfirm = null;
+        newUser.setEnabled(true);
+        newUser.setEmailVerified(false);
+        newUser.setStatut(StatutUser.ACTIF);
+    }
+
+    /**
+     * Annuler la création
+     */
+    public String cancel() {
+        resetForm();
+        return "userListPage";
+    }
+
+    /**
+     * Charger les realms disponibles
+     */
+    private void loadRealms() {
+        // TODO: Implémenter la récupération des realms depuis Keycloak
+        availableRealms = List.of("master", "btpxpress", "unionflow");
+    }
+
+    // Méthodes utilitaires
+    private void addSuccessMessage(String message) {
+        FacesContext.getCurrentInstance().addMessage(null,
+            new FacesMessage(FacesMessage.SEVERITY_INFO, "Succès", message));
+    }
+
+    private void addErrorMessage(String message) {
+        FacesContext.getCurrentInstance().addMessage(null,
+            new FacesMessage(FacesMessage.SEVERITY_ERROR, "Erreur", message));
+    }
+}
+
diff --git a/src/main/java/dev/lions/user/manager/client/view/UserListBean.java b/src/main/java/dev/lions/user/manager/client/view/UserListBean.java
new file mode 100644
index 0000000..4b4c77b
--- /dev/null
+++ b/src/main/java/dev/lions/user/manager/client/view/UserListBean.java
@@ -0,0 +1,228 @@
+package dev.lions.user.manager.client.view;
+
+import dev.lions.user.manager.client.service.UserServiceClient;
+import dev.lions.user.manager.dto.user.UserDTO;
+import dev.lions.user.manager.dto.user.UserSearchCriteriaDTO;
+import dev.lions.user.manager.dto.user.UserSearchResultDTO;
+import dev.lions.user.manager.enums.user.StatutUser;
+import jakarta.annotation.PostConstruct;
+import jakarta.faces.application.FacesMessage;
+import jakarta.faces.context.FacesContext;
+import jakarta.faces.view.ViewScoped;
+import jakarta.inject.Inject;
+import jakarta.inject.Named;
+import lombok.Data;
+import org.eclipse.microprofile.rest.client.inject.RestClient;
+
+import java.io.Serializable;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.logging.Logger;
+
+/**
+ * Bean JSF pour la liste et la recherche d'utilisateurs
+ * 
+ * @author Lions User Manager
+ * @version 1.0.0
+ */
+@Named("userListBean")
+@ViewScoped
+@Data
+public class UserListBean implements Serializable {
+
+    private static final long serialVersionUID = 1L;
+    private static final Logger LOGGER = Logger.getLogger(UserListBean.class.getName());
+
+    // Constantes de navigation outcomes (WOU/DRY - réutilisables)
+    private static final String OUTCOME_USER_PROFILE = "userProfilePage";
+    private static final String OUTCOME_USER_EDIT = "userEditPage";
+    private static final String OUTCOME_USER_CREATE = "userCreatePage";
+
+    @Inject
+    @RestClient
+    private UserServiceClient userServiceClient;
+
+    // Propriétés pour la liste
+    private List<UserDTO> users = new ArrayList<>();
+    private UserDTO selectedUser;
+    private List<UserDTO> selectedUsers = new ArrayList<>();
+
+    // Propriétés pour la recherche
+    private UserSearchCriteriaDTO searchCriteria = UserSearchCriteriaDTO.builder().build();
+    private String searchText;
+    private String realmName = "master";
+    private StatutUser selectedStatut;
+
+    // Propriétés pour la pagination
+    private int currentPage = 0;
+    private int pageSize = 20;
+    private long totalRecords = 0;
+    private int totalPages = 0;
+
+    // Options pour les selects
+    private List<StatutUser> statutOptions = List.of(StatutUser.values());
+    private List<String> availableRealms = new ArrayList<>();
+
+    @PostConstruct
+    public void init() {
+        LOGGER.info("Initialisation de UserListBean");
+        loadUsers();
+        loadRealms();
+    }
+
+    /**
+     * Charger la liste des utilisateurs
+     */
+    public void loadUsers() {
+        try {
+            UserSearchCriteriaDTO criteria = UserSearchCriteriaDTO.builder()
+                .realmName(realmName)
+                .page(currentPage)
+                .pageSize(pageSize)
+                .build();
+
+            UserSearchResultDTO result = userServiceClient.searchUsers(criteria);
+            this.users = result.getUsers() != null ? result.getUsers() : new ArrayList<>();
+            this.totalRecords = result.getTotalCount() != null ? result.getTotalCount() : 0;
+            this.totalPages = (int) Math.ceil((double) totalRecords / pageSize);
+
+            LOGGER.info("Chargement de " + users.size() + " utilisateurs");
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors du chargement des utilisateurs: " + e.getMessage());
+            addErrorMessage("Erreur lors du chargement des utilisateurs: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Rechercher des utilisateurs
+     */
+    public void search() {
+        try {
+            currentPage = 0; // Réinitialiser à la première page
+
+            UserSearchCriteriaDTO criteria = UserSearchCriteriaDTO.builder()
+                .realmName(realmName)
+                .searchTerm(searchText)
+                .statut(selectedStatut)
+                .page(currentPage)
+                .pageSize(pageSize)
+                .build();
+
+            UserSearchResultDTO result = userServiceClient.searchUsers(criteria);
+            this.users = result.getUsers() != null ? result.getUsers() : new ArrayList<>();
+            this.totalRecords = result.getTotalCount() != null ? result.getTotalCount() : 0;
+            this.totalPages = (int) Math.ceil((double) totalRecords / pageSize);
+
+            addSuccessMessage("Recherche effectuée: " + totalRecords + " résultat(s) trouvé(s)");
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de la recherche: " + e.getMessage());
+            addErrorMessage("Erreur lors de la recherche: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Réinitialiser la recherche
+     */
+    public void resetSearch() {
+        searchText = null;
+        selectedStatut = null;
+        currentPage = 0;
+        loadUsers();
+    }
+
+    /**
+     * Activer un utilisateur
+     */
+    public void activateUser(String userId) {
+        try {
+            userServiceClient.activateUser(userId, realmName);
+            addSuccessMessage("Utilisateur activé avec succès");
+            loadUsers();
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de l'activation: " + e.getMessage());
+            addErrorMessage("Erreur lors de l'activation: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Désactiver un utilisateur
+     */
+    public void deactivateUser(String userId) {
+        try {
+            userServiceClient.deactivateUser(userId, realmName);
+            addSuccessMessage("Utilisateur désactivé avec succès");
+            loadUsers();
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de la désactivation: " + e.getMessage());
+            addErrorMessage("Erreur lors de la désactivation: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Supprimer un utilisateur
+     */
+    public void deleteUser(String userId) {
+        try {
+            userServiceClient.deleteUser(userId, realmName);
+            addSuccessMessage("Utilisateur supprimé avec succès");
+            loadUsers();
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de la suppression: " + e.getMessage());
+            addErrorMessage("Erreur lors de la suppression: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Déconnecter toutes les sessions d'un utilisateur
+     */
+    public void logoutAllSessions(String userId) {
+        try {
+            userServiceClient.logoutAllSessions(userId, realmName);
+            addSuccessMessage("Toutes les sessions ont été déconnectées");
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de la déconnexion: " + e.getMessage());
+            addErrorMessage("Erreur lors de la déconnexion: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Charger les realms disponibles
+     */
+    private void loadRealms() {
+        // TODO: Implémenter la récupération des realms depuis Keycloak
+        availableRealms = List.of("master", "btpxpress", "unionflow");
+    }
+
+    /**
+     * Navigation vers le profil utilisateur
+     */
+    public String goToUserProfile() {
+        return OUTCOME_USER_PROFILE;
+    }
+
+    /**
+     * Navigation vers l'édition utilisateur
+     */
+    public String goToUserEdit() {
+        return OUTCOME_USER_EDIT;
+    }
+
+    /**
+     * Navigation vers la création utilisateur
+     */
+    public String goToUserCreate() {
+        return OUTCOME_USER_CREATE;
+    }
+
+    // Méthodes utilitaires pour les messages
+    private void addSuccessMessage(String message) {
+        FacesContext.getCurrentInstance().addMessage(null,
+            new FacesMessage(FacesMessage.SEVERITY_INFO, "Succès", message));
+    }
+
+    private void addErrorMessage(String message) {
+        FacesContext.getCurrentInstance().addMessage(null,
+            new FacesMessage(FacesMessage.SEVERITY_ERROR, "Erreur", message));
+    }
+}
+
diff --git a/src/main/java/dev/lions/user/manager/client/view/UserProfilBean.java b/src/main/java/dev/lions/user/manager/client/view/UserProfilBean.java
new file mode 100644
index 0000000..91033c0
--- /dev/null
+++ b/src/main/java/dev/lions/user/manager/client/view/UserProfilBean.java
@@ -0,0 +1,189 @@
+package dev.lions.user.manager.client.view;
+
+import dev.lions.user.manager.client.service.UserServiceClient;
+import dev.lions.user.manager.dto.user.UserDTO;
+import jakarta.annotation.PostConstruct;
+import jakarta.faces.application.FacesMessage;
+import jakarta.faces.context.FacesContext;
+import jakarta.faces.view.ViewScoped;
+import jakarta.inject.Inject;
+import jakarta.inject.Named;
+import lombok.Data;
+import org.eclipse.microprofile.rest.client.inject.RestClient;
+
+import java.io.Serializable;
+import java.util.logging.Logger;
+
+/**
+ * Bean JSF pour le profil et l'édition d'un utilisateur
+ * 
+ * @author Lions User Manager
+ * @version 1.0.0
+ */
+@Named("userProfilBean")
+@ViewScoped
+@Data
+public class UserProfilBean implements Serializable {
+
+    private static final long serialVersionUID = 1L;
+    private static final Logger LOGGER = Logger.getLogger(UserProfilBean.class.getName());
+
+    @Inject
+    @RestClient
+    private UserServiceClient userServiceClient;
+
+    private UserDTO user;
+    private String userId;
+    private String realmName = "master";
+    private boolean editMode = false;
+
+    // Pour la réinitialisation de mot de passe
+    private String newPassword;
+    private String newPasswordConfirm;
+
+    @PostConstruct
+    public void init() {
+        // Récupérer l'ID depuis les paramètres de requête
+        userId = FacesContext.getCurrentInstance().getExternalContext()
+            .getRequestParameterMap().get("userId");
+
+        if (userId != null && !userId.isEmpty()) {
+            loadUser();
+        } else {
+            LOGGER.warning("Aucun userId fourni dans les paramètres");
+        }
+    }
+
+    /**
+     * Charger l'utilisateur
+     */
+    public void loadUser() {
+        try {
+            user = userServiceClient.getUserById(userId, realmName);
+            LOGGER.info("Utilisateur chargé: " + user.getUsername());
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors du chargement de l'utilisateur: " + e.getMessage());
+            addErrorMessage("Erreur lors du chargement de l'utilisateur: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Activer le mode édition
+     */
+    public void enableEditMode() {
+        editMode = true;
+    }
+
+    /**
+     * Désactiver le mode édition
+     */
+    public void cancelEdit() {
+        editMode = false;
+        loadUser(); // Recharger les données originales
+    }
+
+    /**
+     * Mettre à jour l'utilisateur
+     */
+    public void updateUser() {
+        try {
+            user = userServiceClient.updateUser(userId, user, realmName);
+            editMode = false;
+            addSuccessMessage("Utilisateur mis à jour avec succès");
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de la mise à jour: " + e.getMessage());
+            addErrorMessage("Erreur lors de la mise à jour: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Réinitialiser le mot de passe
+     */
+    public void resetPassword() {
+        if (newPassword == null || newPassword.isEmpty()) {
+            addErrorMessage("Le mot de passe ne peut pas être vide");
+            return;
+        }
+
+        if (!newPassword.equals(newPasswordConfirm)) {
+            addErrorMessage("Les mots de passe ne correspondent pas");
+            return;
+        }
+
+        try {
+            userServiceClient.resetPassword(userId, realmName, newPassword);
+            newPassword = null;
+            newPasswordConfirm = null;
+            addSuccessMessage("Mot de passe réinitialisé avec succès");
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de la réinitialisation: " + e.getMessage());
+            addErrorMessage("Erreur lors de la réinitialisation: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Activer l'utilisateur
+     */
+    public void activateUser() {
+        try {
+            userServiceClient.activateUser(userId, realmName);
+            loadUser(); // Recharger pour mettre à jour le statut
+            addSuccessMessage("Utilisateur activé avec succès");
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de l'activation: " + e.getMessage());
+            addErrorMessage("Erreur lors de l'activation: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Désactiver l'utilisateur
+     */
+    public void deactivateUser() {
+        try {
+            userServiceClient.deactivateUser(userId, realmName);
+            loadUser(); // Recharger pour mettre à jour le statut
+            addSuccessMessage("Utilisateur désactivé avec succès");
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de la désactivation: " + e.getMessage());
+            addErrorMessage("Erreur lors de la désactivation: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Envoyer un email de vérification
+     */
+    public void sendVerificationEmail() {
+        try {
+            userServiceClient.sendVerificationEmail(userId, realmName);
+            addSuccessMessage("Email de vérification envoyé");
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de l'envoi: " + e.getMessage());
+            addErrorMessage("Erreur lors de l'envoi: " + e.getMessage());
+        }
+    }
+
+    /**
+     * Déconnecter toutes les sessions
+     */
+    public void logoutAllSessions() {
+        try {
+            userServiceClient.logoutAllSessions(userId, realmName);
+            addSuccessMessage("Toutes les sessions ont été déconnectées");
+        } catch (Exception e) {
+            LOGGER.severe("Erreur lors de la déconnexion: " + e.getMessage());
+            addErrorMessage("Erreur lors de la déconnexion: " + e.getMessage());
+        }
+    }
+
+    // Méthodes utilitaires
+    private void addSuccessMessage(String message) {
+        FacesContext.getCurrentInstance().addMessage(null,
+            new FacesMessage(FacesMessage.SEVERITY_INFO, "Succès", message));
+    }
+
+    private void addErrorMessage(String message) {
+        FacesContext.getCurrentInstance().addMessage(null,
+            new FacesMessage(FacesMessage.SEVERITY_ERROR, "Erreur", message));
+    }
+}
+
diff --git a/src/main/resources/META-INF/faces-config.xml b/src/main/resources/META-INF/faces-config.xml
new file mode 100644
index 0000000..2516c8e
--- /dev/null
+++ b/src/main/resources/META-INF/faces-config.xml
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<faces-config xmlns="https://jakarta.ee/xml/ns/jakartaee"
+              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+              xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee 
+                                  https://jakarta.ee/xml/ns/jakartaee/web-facesconfig_4_0.xsd"
+              version="4.0">
+
+    <name>Lions User Manager</name>
+
+    <application>
+        <locale-config>
+            <default-locale>fr</default-locale>
+            <supported-locale>fr</supported-locale>
+            <supported-locale>en</supported-locale>
+        </locale-config>
+    </application>
+
+    <navigation-rule>
+        <from-view-id>*</from-view-id>
+
+        <!-- Dashboard -->
+        <navigation-case>
+            <description>Page d'accueil / Dashboard</description>
+            <from-outcome>userManagerDashboardPage</from-outcome>
+            <to-view-id>/pages/user-manager/dashboard.xhtml</to-view-id>
+            <redirect />
+        </navigation-case>
+
+        <!-- Users -->
+        <navigation-case>
+            <description>Page de liste des utilisateurs</description>
+            <from-outcome>userListPage</from-outcome>
+            <to-view-id>/pages/user-manager/users/list.xhtml</to-view-id>
+            <redirect />
+        </navigation-case>
+
+        <navigation-case>
+            <description>Page de création d'utilisateur</description>
+            <from-outcome>userCreatePage</from-outcome>
+            <to-view-id>/pages/user-manager/users/create.xhtml</to-view-id>
+            <redirect />
+        </navigation-case>
+
+        <navigation-case>
+            <description>Page de profil utilisateur</description>
+            <from-outcome>userProfilePage</from-outcome>
+            <to-view-id>/pages/user-manager/users/profile.xhtml</to-view-id>
+            <redirect />
+        </navigation-case>
+
+        <navigation-case>
+            <description>Page d'édition utilisateur</description>
+            <from-outcome>userEditPage</from-outcome>
+            <to-view-id>/pages/user-manager/users/edit.xhtml</to-view-id>
+            <redirect />
+        </navigation-case>
+
+        <!-- Roles -->
+        <navigation-case>
+            <description>Page de liste des rôles</description>
+            <from-outcome>roleListPage</from-outcome>
+            <to-view-id>/pages/user-manager/roles/list.xhtml</to-view-id>
+            <redirect />
+        </navigation-case>
+
+        <navigation-case>
+            <description>Page d'attribution de rôles</description>
+            <from-outcome>roleAssignPage</from-outcome>
+            <to-view-id>/pages/user-manager/roles/assign.xhtml</to-view-id>
+            <redirect />
+        </navigation-case>
+
+        <!-- Audit -->
+        <navigation-case>
+            <description>Page de journal d'audit</description>
+            <from-outcome>auditLogsPage</from-outcome>
+            <to-view-id>/pages/user-manager/audit/logs.xhtml</to-view-id>
+            <redirect />
+        </navigation-case>
+
+        <!-- Sync -->
+        <navigation-case>
+            <description>Page de dashboard synchronisation</description>
+            <from-outcome>syncDashboardPage</from-outcome>
+            <to-view-id>/pages/user-manager/sync/dashboard.xhtml</to-view-id>
+            <redirect />
+        </navigation-case>
+
+    </navigation-rule>
+</faces-config>
+
diff --git a/src/main/resources/META-INF/quarkus-config.properties b/src/main/resources/META-INF/quarkus-config.properties
new file mode 100644
index 0000000..9953ae1
--- /dev/null
+++ b/src/main/resources/META-INF/quarkus-config.properties
@@ -0,0 +1,3 @@
+# Configuration Quarkus pour PrimeFaces
+# Exclusion de classes obsolètes de PrimeFaces 14.0.5
+
diff --git a/src/main/resources/META-INF/resources/index.xhtml b/src/main/resources/META-INF/resources/index.xhtml
new file mode 100644
index 0000000..03bdbf0
--- /dev/null
+++ b/src/main/resources/META-INF/resources/index.xhtml
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:h="http://xmlns.jcp.org/jsf/html"
+      xmlns:f="http://xmlns.jcp.org/jsf/core"
+      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+      xmlns:p="http://primefaces.org/ui"
+      lang="fr">
+
+<h:head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lions User Manager - Gestion des Utilisateurs Keycloak</title>
+    
+    <!-- PrimeFaces Freya Theme -->
+    <h:outputStylesheet name="primefaces-freya/theme.css" />
+    <h:outputStylesheet name="css/primeicons.css" library="freya-layout" />
+    <h:outputStylesheet name="css/primeflex.min.css" library="freya-layout" />
+</h:head>
+
+<h:body>
+    <div class="flex align-items-center justify-content-center" style="min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <div class="card" style="width: 90%; max-width: 600px; text-align: center;">
+            <div class="flex flex-column align-items-center gap-3 p-5">
+                <i class="pi pi-users text-6xl text-primary"></i>
+                <h1 class="text-4xl font-bold m-0">Lions User Manager</h1>
+                <p class="text-xl text-600 m-0">Gestion centralisée des utilisateurs Keycloak</p>
+                
+                <div class="flex flex-column gap-2 mt-4" style="width: 100%;">
+                    <h:link outcome="/pages/user-manager/users/list" styleClass="no-underline">
+                        <p:commandButton value="Accéder à la Gestion des Utilisateurs" 
+                                       icon="pi pi-users" 
+                                       styleClass="w-full p-button-lg" />
+                    </h:link>
+                    
+                    <h:link outcome="/pages/user-manager/roles/list" styleClass="no-underline">
+                        <p:commandButton value="Gestion des Rôles" 
+                                       icon="pi pi-shield" 
+                                       styleClass="w-full p-button-lg p-button-outlined" />
+                    </h:link>
+                    
+                    <h:link outcome="/pages/user-manager/audit/logs" styleClass="no-underline">
+                        <p:commandButton value="Journal d'Audit" 
+                                       icon="pi pi-history" 
+                                       styleClass="w-full p-button-lg p-button-outlined" />
+                    </h:link>
+                </div>
+                
+                <div class="mt-4 text-600">
+                    <p class="m-0">Version 1.0.0</p>
+                    <p class="m-0 text-sm">Module réutilisable pour l'écosystème LionsDev</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</h:body>
+
+</html>
+
diff --git a/src/main/resources/META-INF/resources/pages/user-manager/audit/logs.xhtml b/src/main/resources/META-INF/resources/pages/user-manager/audit/logs.xhtml
new file mode 100644
index 0000000..3ab6763
--- /dev/null
+++ b/src/main/resources/META-INF/resources/pages/user-manager/audit/logs.xhtml
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
+                template="/templates/main-template.xhtml">
+
+    <ui:param name="page" value="#{auditConsultationBean}"/>
+    <ui:define name="title">Journal d'Audit - Lions User Manager</ui:define>
+
+    <ui:define name="content">
+        <!-- En-tête -->
+        <ui:include src="/templates/components/layout/page-header.xhtml">
+            <ui:param name="icon" value="pi pi-history text-orange-500" />
+            <ui:param name="title" value="Journal d'Audit" />
+            <ui:param name="description" value="Consultation des logs d'audit et statistiques" />
+            <ui:define name="actions">
+                <h:form id="formActionsAudit">
+                    <div class="flex gap-2">
+                        <ui:include src="/templates/components/shared/buttons/button-user-action.xhtml">
+                            <ui:param name="value" value="Exporter CSV" />
+                            <ui:param name="icon" value="pi pi-download" />
+                            <ui:param name="action" value="#{auditConsultationBean.exportToCSV}" />
+                            <ui:param name="severity" value="success" />
+                        </ui:include>
+                    </div>
+                </h:form>
+            </ui:define>
+        </ui:include>
+
+        <!-- Statistiques -->
+        <div class="grid mb-4">
+            <div class="col-12 md:col-3">
+                <ui:include src="/templates/components/audit/audit-stats-card.xhtml">
+                    <ui:param name="title" value="Total Actions" />
+                    <ui:param name="value" value="#{auditConsultationBean.totalRecords}" />
+                    <ui:param name="icon" value="pi-history" />
+                    <ui:param name="iconColor" value="blue-600" />
+                </ui:include>
+            </div>
+            <div class="col-12 md:col-3">
+                <ui:include src="/templates/components/audit/audit-stats-card.xhtml">
+                    <ui:param name="title" value="Actions Réussies" />
+                    <ui:param name="value" value="#{auditConsultationBean.successCount}" />
+                    <ui:param name="icon" value="pi-check-circle" />
+                    <ui:param name="iconColor" value="green-600" />
+                </ui:include>
+            </div>
+            <div class="col-12 md:col-3">
+                <ui:include src="/templates/components/audit/audit-stats-card.xhtml">
+                    <ui:param name="title" value="Actions Échouées" />
+                    <ui:param name="value" value="#{auditConsultationBean.failureCount}" />
+                    <ui:param name="icon" value="pi-times-circle" />
+                    <ui:param name="iconColor" value="red-600" />
+                </ui:include>
+            </div>
+            <div class="col-12 md:col-3">
+                <ui:include src="/templates/components/audit/audit-stats-card.xhtml">
+                    <ui:param name="title" value="Taux de Réussite" />
+                    <ui:param name="value" value="#{auditConsultationBean.totalRecords > 0 ? (auditConsultationBean.successCount * 100 / auditConsultationBean.totalRecords) : 0}%" />
+                    <ui:param name="icon" value="pi pi-percentage" />
+                    <ui:param name="iconColor" value="purple-600" />
+                </ui:include>
+            </div>
+        </div>
+
+        <!-- Filtres de recherche -->
+        <div class="card mb-3">
+            <h:form id="formFilters">
+                <p:panelGrid columns="3" styleClass="w-full" columnClasses="col-12 md:col-4">
+                    <p:outputLabel for="acteurFilter" value="Acteur" />
+                    <p:inputText id="acteurFilter" 
+                               value="#{auditConsultationBean.acteurUsername}" 
+                               placeholder="Nom d'utilisateur..."
+                               styleClass="w-full" />
+
+                    <p:outputLabel for="typeActionFilter" value="Type d'action" />
+                    <p:selectOneMenu id="typeActionFilter" 
+                                   value="#{auditConsultationBean.selectedTypeAction}" 
+                                   styleClass="w-full">
+                        <f:selectItem itemLabel="Tous les types" itemValue="" />
+                        <f:selectItems value="#{auditConsultationBean.typeActionOptions}" />
+                    </p:selectOneMenu>
+
+                    <p:outputLabel for="succesFilter" value="Résultat" />
+                    <p:selectOneMenu id="succesFilter" 
+                                   value="#{auditConsultationBean.succes}" 
+                                   styleClass="w-full">
+                        <f:selectItem itemLabel="Tous" itemValue="" />
+                        <f:selectItem itemLabel="Succès" itemValue="true" />
+                        <f:selectItem itemLabel="Échec" itemValue="false" />
+                    </p:selectOneMenu>
+
+                    <p:outputLabel for="dateDebutFilter" value="Date début" />
+                    <p:calendar id="dateDebutFilter" 
+                              value="#{auditConsultationBean.dateDebut}" 
+                              pattern="dd/MM/yyyy"
+                              styleClass="w-full" />
+
+                    <p:outputLabel for="dateFinFilter" value="Date fin" />
+                    <p:calendar id="dateFinFilter" 
+                              value="#{auditConsultationBean.dateFin}" 
+                              pattern="dd/MM/yyyy"
+                              styleClass="w-full" />
+
+                    <p:outputLabel for="ressourceFilter" value="Type ressource" />
+                    <p:inputText id="ressourceFilter" 
+                               value="#{auditConsultationBean.ressourceType}" 
+                               placeholder="USER, ROLE..."
+                               styleClass="w-full" />
+                </p:panelGrid>
+
+                <div class="flex gap-2 justify-content-end mt-3">
+                    <ui:include src="/templates/components/shared/buttons/button-user-action.xhtml">
+                        <ui:param name="value" value="Rechercher" />
+                        <ui:param name="icon" value="pi pi-search" />
+                        <ui:param name="action" value="#{auditConsultationBean.searchLogs}" />
+                        <ui:param name="update" value="auditLogsList" />
+                        <ui:param name="severity" value="primary" />
+                    </ui:include>
+                    <ui:include src="/templates/components/shared/buttons/button-user-action.xhtml">
+                        <ui:param name="value" value="Réinitialiser" />
+                        <ui:param name="icon" value="pi pi-refresh" />
+                        <ui:param name="action" value="#{auditConsultationBean.resetFilters}" />
+                        <ui:param name="update" value="auditLogsList formFilters" />
+                        <ui:param name="severity" value="secondary" />
+                    </ui:include>
+                </div>
+            </h:form>
+        </div>
+
+        <!-- Liste des logs -->
+        <div class="card">
+            <h:form id="formAuditLogs">
+                <h5>Logs d'Audit</h5>
+                <div id="auditLogsList" class="flex flex-column gap-2">
+                    <c:forEach var="log" items="#{auditConsultationBean.auditLogs}">
+                        <ui:include src="/templates/components/audit/audit-log-row.xhtml">
+                            <ui:param name="auditLog" value="#{log}" />
+                            <ui:param name="showDetails" value="true" />
+                            <ui:param name="showActions" value="false" />
+                        </ui:include>
+                    </c:forEach>
+                    <c:if test="#{empty auditConsultationBean.auditLogs}">
+                        <p class="text-center text-color-secondary">Aucun log d'audit trouvé</p>
+                    </c:if>
+                </div>
+
+                <!-- Pagination -->
+                <div class="flex justify-content-between align-items-center mt-3">
+                    <span class="text-600">
+                        Affichage de #{auditConsultationBean.currentPage * auditConsultationBean.pageSize + 1} 
+                        à #{auditConsultationBean.currentPage * auditConsultationBean.pageSize + auditConsultationBean.auditLogs.size()} 
+                        sur #{auditConsultationBean.totalRecords}
+                    </span>
+                    <div class="flex gap-2">
+                        <p:commandButton 
+                            value="Précédent"
+                            icon="pi pi-arrow-left"
+                            disabled="#{auditConsultationBean.currentPage == 0}"
+                            action="#{auditConsultationBean.currentPage = auditConsultationBean.currentPage - 1; auditConsultationBean.searchLogs()}"
+                            update="auditLogsList" />
+                        <p:commandButton 
+                            value="Suivant"
+                            icon="pi pi-arrow-right"
+                            iconPos="right"
+                            disabled="#{(auditConsultationBean.currentPage + 1) * auditConsultationBean.pageSize >= auditConsultationBean.totalRecords}"
+                            action="#{auditConsultationBean.currentPage = auditConsultationBean.currentPage + 1; auditConsultationBean.searchLogs()}"
+                            update="auditLogsList" />
+                    </div>
+                </div>
+            </h:form>
+        </div>
+    </ui:define>
+
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/pages/user-manager/roles/assign.xhtml b/src/main/resources/META-INF/resources/pages/user-manager/roles/assign.xhtml
new file mode 100644
index 0000000..5c1b1c8
--- /dev/null
+++ b/src/main/resources/META-INF/resources/pages/user-manager/roles/assign.xhtml
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                template="/templates/main-template.xhtml">
+
+    <ui:param name="page" value="#{userProfilBean}"/>
+    <ui:define name="title">Attribution de Rôles - Lions User Manager</ui:define>
+
+    <ui:define name="content">
+        <!-- En-tête -->
+        <ui:include src="/templates/components/layout/page-header.xhtml">
+            <ui:param name="icon" value="pi pi-key text-purple-500" />
+            <ui:param name="title" value="Attribution de Rôles" />
+            <ui:param name="description" value="Gérer les rôles de l'utilisateur" />
+        </ui:include>
+
+        <!-- Attribution de rôles -->
+        <div class="card">
+            <ui:include src="/templates/components/role-management/role-assignment.xhtml">
+                <ui:param name="user" value="#{userProfilBean.user}" />
+                <ui:param name="availableRoles" value="#{roleGestionBean.allRoles}" />
+                <ui:param name="userRoles" value="#{userProfilBean.user.realmRoles != null ? roleGestionBean.allRoles.stream().filter(r -> userProfilBean.user.realmRoles.contains(r.name)).collect(java.util.stream.Collectors.toList()) : new java.util.ArrayList()}" />
+                <ui:param name="assignAction" value="#{roleGestionBean.assignRoleToUser(userProfilBean.user.id, role.id)}" />
+                <ui:param name="revokeAction" value="#{roleGestionBean.revokeRoleFromUser(userProfilBean.user.id, role.id)}" />
+                <ui:param name="update" value="roleAssignmentPanel" />
+            </ui:include>
+        </div>
+    </ui:define>
+
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/pages/user-manager/roles/list.xhtml b/src/main/resources/META-INF/resources/pages/user-manager/roles/list.xhtml
new file mode 100644
index 0000000..62abaa5
--- /dev/null
+++ b/src/main/resources/META-INF/resources/pages/user-manager/roles/list.xhtml
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
+                template="/templates/main-template.xhtml">
+
+    <ui:param name="page" value="#{roleGestionBean}"/>
+    <ui:define name="title">Gestion des Rôles - Lions User Manager</ui:define>
+
+    <ui:define name="content">
+        <!-- En-tête -->
+        <ui:include src="/templates/components/layout/page-header.xhtml">
+            <ui:param name="icon" value="pi pi-shield text-purple-500" />
+            <ui:param name="title" value="Gestion des Rôles" />
+            <ui:param name="description" value="Gestion des rôles Realm et Client Keycloak" />
+            <ui:define name="actions">
+                <h:form id="formActionsRoles">
+                    <div class="flex gap-2">
+                        <ui:include src="/templates/components/shared/buttons/button-user-action.xhtml">
+                            <ui:param name="value" value="Nouveau Rôle Realm" />
+                            <ui:param name="icon" value="pi pi-plus" />
+                            <ui:param name="onclick" value="PF('createRealmRoleDialog').show()" />
+                            <ui:param name="severity" value="success" />
+                        </ui:include>
+                        <ui:include src="/templates/components/shared/buttons/button-user-action.xhtml">
+                            <ui:param name="value" value="Nouveau Rôle Client" />
+                            <ui:param name="icon" value="pi pi-plus-circle" />
+                            <ui:param name="onclick" value="PF('createClientRoleDialog').show()" />
+                            <ui:param name="severity" value="info" />
+                        </ui:include>
+                    </div>
+                </h:form>
+            </ui:define>
+        </ui:include>
+
+        <!-- Filtres -->
+        <div class="card mb-3">
+            <h:form id="formFilters">
+                <p:panelGrid columns="3" styleClass="w-full" columnClasses="col-12 md:col-4">
+                    <p:outputLabel for="realmFilter" value="Realm" />
+                    <p:selectOneMenu id="realmFilter" 
+                                   value="#{roleGestionBean.realmName}" 
+                                   styleClass="w-full">
+                        <f:selectItem itemLabel="Sélectionner..." itemValue="" />
+                        <f:selectItems value="#{roleGestionBean.availableRealms}" />
+                        <p:ajax event="change" 
+                              listener="#{roleGestionBean.loadRealmRoles}" 
+                              update="realmRolesPanel clientRolesPanel" />
+                    </p:selectOneMenu>
+
+                    <p:outputLabel for="clientFilter" value="Client" />
+                    <p:selectOneMenu id="clientFilter" 
+                                   value="#{roleGestionBean.clientName}" 
+                                   styleClass="w-full">
+                        <f:selectItem itemLabel="Sélectionner..." itemValue="" />
+                        <f:selectItems value="#{roleGestionBean.availableClients}" />
+                        <p:ajax event="change" 
+                              listener="#{roleGestionBean.loadClientRoles}" 
+                              update="clientRolesPanel" />
+                    </p:selectOneMenu>
+
+                    <p:outputLabel for="typeFilter" value="Type" />
+                    <p:selectOneMenu id="typeFilter" 
+                                   value="#{roleGestionBean.selectedTypeRole}" 
+                                   styleClass="w-full">
+                        <f:selectItem itemLabel="Tous les types" itemValue="" />
+                        <f:selectItems value="#{roleGestionBean.typeRoleOptions}" />
+                    </p:selectOneMenu>
+                </p:panelGrid>
+            </h:form>
+        </div>
+
+        <!-- Rôles Realm -->
+        <div class="card mb-3">
+            <h:form id="formRealmRoles">
+                <p:panel id="realmRolesPanel" header="Rôles Realm" toggleable="true" collapsed="false">
+                    <div class="grid">
+                        <c:forEach var="role" items="#{roleGestionBean.realmRoles}">
+                            <div class="col-12 md:col-6 lg:col-4">
+                                <ui:include src="/templates/components/role-management/role-card.xhtml">
+                                    <ui:param name="role" value="#{role}" />
+                                    <ui:param name="showActions" value="true" />
+                                </ui:include>
+                            </div>
+                        </c:forEach>
+                        <c:if test="#{empty roleGestionBean.realmRoles}">
+                            <div class="col-12">
+                                <p class="text-center text-color-secondary">Aucun rôle Realm trouvé</p>
+                            </div>
+                        </c:if>
+                    </div>
+                </p:panel>
+            </h:form>
+        </div>
+
+        <!-- Rôles Client -->
+        <div class="card">
+            <h:form id="formClientRoles">
+                <p:panel id="clientRolesPanel" header="Rôles Client" toggleable="true" collapsed="false">
+                    <div class="grid">
+                        <c:forEach var="role" items="#{roleGestionBean.clientRoles}">
+                            <div class="col-12 md:col-6 lg:col-4">
+                                <ui:include src="/templates/components/role-management/role-card.xhtml">
+                                    <ui:param name="role" value="#{role}" />
+                                    <ui:param name="showActions" value="true" />
+                                </ui:include>
+                            </div>
+                        </c:forEach>
+                        <c:if test="#{empty roleGestionBean.clientRoles}">
+                            <div class="col-12">
+                                <p class="text-center text-color-secondary">Aucun rôle Client trouvé</p>
+                            </div>
+                        </c:if>
+                    </div>
+                </p:panel>
+            </h:form>
+        </div>
+
+        <!-- Dialog Création Rôle Realm -->
+        <p:dialog id="createRealmRoleDialog" 
+                header="Nouveau Rôle Realm" 
+                widgetVar="createRealmRoleDialog"
+                modal="true"
+                styleClass="w-full md:w-6">
+            <h:form id="formCreateRealmRole">
+                <ui:include src="/templates/components/role-management/role-form.xhtml">
+                    <ui:param name="role" value="#{roleGestionBean.newRole}" />
+                    <ui:param name="mode" value="create" />
+                    <ui:param name="showClientSelector" value="false" />
+                    <ui:param name="submitAction" value="#{roleGestionBean.createRealmRole}" />
+                    <ui:param name="update" value="realmRolesPanel" />
+                </ui:include>
+            </h:form>
+        </p:dialog>
+
+        <!-- Dialog Création Rôle Client -->
+        <p:dialog id="createClientRoleDialog" 
+                header="Nouveau Rôle Client" 
+                widgetVar="createClientRoleDialog"
+                modal="true"
+                styleClass="w-full md:w-6">
+            <h:form id="formCreateClientRole">
+                <ui:include src="/templates/components/role-management/role-form.xhtml">
+                    <ui:param name="role" value="#{roleGestionBean.newRole}" />
+                    <ui:param name="mode" value="create" />
+                    <ui:param name="showClientSelector" value="true" />
+                    <ui:param name="submitAction" value="#{roleGestionBean.createClientRole}" />
+                    <ui:param name="update" value="clientRolesPanel" />
+                </ui:include>
+            </h:form>
+        </p:dialog>
+    </ui:define>
+
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/pages/user-manager/sync/dashboard.xhtml b/src/main/resources/META-INF/resources/pages/user-manager/sync/dashboard.xhtml
new file mode 100644
index 0000000..8f2b662
--- /dev/null
+++ b/src/main/resources/META-INF/resources/pages/user-manager/sync/dashboard.xhtml
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                template="/templates/main-template.xhtml">
+
+    <ui:define name="title">Synchronisation Keycloak - Lions User Manager</ui:define>
+
+    <ui:define name="content">
+        <!-- En-tête -->
+        <ui:include src="/templates/components/layout/page-header.xhtml">
+            <ui:param name="icon" value="pi pi-sync text-blue-500" />
+            <ui:param name="title" value="Synchronisation Keycloak" />
+            <ui:param name="description" value="Synchronisation et vérification de l'état de Keycloak" />
+        </ui:include>
+
+        <!-- Health Checks -->
+        <div class="grid mb-4">
+            <div class="col-12 md:col-6">
+                <div class="card">
+                    <h5>État de Keycloak</h5>
+                    <p:outputLabel value="Vérification de la connexion..." />
+                    <!-- TODO: Intégrer SyncServiceClient pour afficher le statut -->
+                </div>
+            </div>
+            <div class="col-12 md:col-6">
+                <div class="card">
+                    <h5>Actions de Synchronisation</h5>
+                    <div class="flex flex-column gap-2">
+                        <ui:include src="/templates/components/shared/buttons/button-user-action.xhtml">
+                            <ui:param name="value" value="Synchroniser Utilisateurs" />
+                            <ui:param name="icon" value="pi pi-users" />
+                            <ui:param name="severity" value="primary" />
+                        </ui:include>
+                        <ui:include src="/templates/components/shared/buttons/button-user-action.xhtml">
+                            <ui:param name="value" value="Synchroniser Rôles" />
+                            <ui:param name="icon" value="pi pi-shield" />
+                            <ui:param name="severity" value="info" />
+                        </ui:include>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </ui:define>
+
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/pages/user-manager/users/create.xhtml b/src/main/resources/META-INF/resources/pages/user-manager/users/create.xhtml
new file mode 100644
index 0000000..47f4c76
--- /dev/null
+++ b/src/main/resources/META-INF/resources/pages/user-manager/users/create.xhtml
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                template="/templates/main-template.xhtml">
+
+    <ui:param name="page" value="#{userCreationBean}"/>
+    <ui:define name="title">Nouvel Utilisateur - Lions User Manager</ui:define>
+
+    <ui:define name="content">
+        <!-- En-tête -->
+        <ui:include src="/templates/components/layout/page-header.xhtml">
+            <ui:param name="icon" value="pi pi-user-plus text-green-500" />
+            <ui:param name="title" value="Nouvel Utilisateur" />
+            <ui:param name="description" value="Créer un nouvel utilisateur dans Keycloak" />
+        </ui:include>
+
+        <!-- Formulaire de création -->
+        <div class="card">
+            <ui:include src="/templates/components/user-management/user-form.xhtml">
+                <ui:param name="user" value="#{userCreationBean.newUser}" />
+                <ui:param name="mode" value="create" />
+                <ui:param name="showRealmSelector" value="true" />
+                <ui:param name="showPasswordFields" value="true" />
+                <ui:param name="submitAction" value="#{userCreationBean.createUser}" />
+                <ui:param name="cancelOutcome" value="/pages/user-manager/users/list" />
+            </ui:include>
+        </div>
+    </ui:define>
+
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/pages/user-manager/users/edit.xhtml b/src/main/resources/META-INF/resources/pages/user-manager/users/edit.xhtml
new file mode 100644
index 0000000..2f75390
--- /dev/null
+++ b/src/main/resources/META-INF/resources/pages/user-manager/users/edit.xhtml
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                template="/templates/main-template.xhtml">
+
+    <ui:param name="page" value="#{userProfilBean}"/>
+    <ui:define name="title">Modifier Utilisateur - Lions User Manager</ui:define>
+
+    <ui:define name="content">
+        <!-- En-tête -->
+        <ui:include src="/templates/components/layout/page-header.xhtml">
+            <ui:param name="icon" value="pi pi-pencil text-warning-500" />
+            <ui:param name="title" value="Modifier Utilisateur" />
+            <ui:param name="description" value="Modifier les informations de l'utilisateur" />
+        </ui:include>
+
+        <!-- Formulaire d'édition -->
+        <div class="card">
+            <ui:include src="/templates/components/user-management/user-form.xhtml">
+                <ui:param name="user" value="#{userProfilBean.user}" />
+                <ui:param name="mode" value="edit" />
+                <ui:param name="showPasswordFields" value="false" />
+                <ui:param name="submitAction" value="#{userProfilBean.updateUser}" />
+                <ui:param name="cancelOutcome" value="/pages/user-manager/users/list" />
+            </ui:include>
+        </div>
+    </ui:define>
+
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/pages/user-manager/users/list.xhtml b/src/main/resources/META-INF/resources/pages/user-manager/users/list.xhtml
new file mode 100644
index 0000000..2153859
--- /dev/null
+++ b/src/main/resources/META-INF/resources/pages/user-manager/users/list.xhtml
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                template="/templates/main-template.xhtml">
+
+    <ui:param name="page" value="#{userListBean}"/>
+    <ui:define name="title">Liste des Utilisateurs - Lions User Manager</ui:define>
+
+    <ui:define name="content">
+        <!-- En-tête -->
+        <ui:include src="/templates/components/layout/page-header.xhtml">
+            <ui:param name="icon" value="pi pi-users text-blue-500" />
+            <ui:param name="title" value="Gestion des Utilisateurs" />
+            <ui:param name="description" value="Gestion centralisée des utilisateurs Keycloak" />
+            <ui:define name="actions">
+                <h:form id="formActionsUsers">
+                    <div class="flex gap-2">
+                        <ui:include src="/templates/components/shared/buttons/button-user-action.xhtml">
+                            <ui:param name="value" value="Nouvel Utilisateur" />
+                            <ui:param name="icon" value="pi pi-user-plus" />
+                            <ui:param name="outcome" value="/pages/user-manager/users/create" />
+                            <ui:param name="severity" value="success" />
+                        </ui:include>
+                    </div>
+                </h:form>
+            </ui:define>
+        </ui:include>
+
+        <!-- Statistiques -->
+        <div class="grid mb-4">
+            <div class="col-12 md:col-3">
+                <ui:include src="/templates/components/shared/cards/user-stat-card.xhtml">
+                    <ui:param name="title" value="Total Utilisateurs" />
+                    <ui:param name="value" value="#{userListBean.totalRecords}" />
+                    <ui:param name="icon" value="pi-users" />
+                    <ui:param name="iconColor" value="blue-600" />
+                </ui:include>
+            </div>
+            <div class="col-12 md:col-3">
+                <ui:include src="/templates/components/shared/cards/user-stat-card.xhtml">
+                    <ui:param name="title" value="Utilisateurs Actifs" />
+                    <ui:param name="value" value="#{userListBean.users.stream().filter(u -> u.enabled).count()}" />
+                    <ui:param name="icon" value="pi-user-check" />
+                    <ui:param name="iconColor" value="green-600" />
+                </ui:include>
+            </div>
+            <div class="col-12 md:col-3">
+                <ui:include src="/templates/components/shared/cards/user-stat-card.xhtml">
+                    <ui:param name="title" value="Utilisateurs Désactivés" />
+                    <ui:param name="value" value="#{userListBean.users.stream().filter(u -> !u.enabled).count()}" />
+                    <ui:param name="icon" value="pi-user-times" />
+                    <ui:param name="iconColor" value="red-600" />
+                </ui:include>
+            </div>
+            <div class="col-12 md:col-3">
+                <ui:include src="/templates/components/shared/cards/user-stat-card.xhtml">
+                    <ui:param name="title" value="Realm" />
+                    <ui:param name="value" value="#{userListBean.realmName}" />
+                    <ui:param name="icon" value="pi pi-globe" />
+                    <ui:param name="iconColor" value="purple-600" />
+                </ui:include>
+            </div>
+        </div>
+
+        <!-- Barre de recherche -->
+        <div class="card mb-3">
+            <ui:include src="/templates/components/user-management/user-search-bar.xhtml">
+                <ui:param name="searchCriteria" value="#{userListBean.searchCriteria}" />
+                <ui:param name="searchAction" value="#{userListBean.search}" />
+                <ui:param name="update" value="userTable" />
+                <ui:param name="showAdvanced" value="true" />
+            </ui:include>
+        </div>
+
+        <!-- Tableau des utilisateurs -->
+        <div class="card">
+            <h:form id="formUsers">
+                <ui:include src="/templates/components/shared/tables/user-data-table.xhtml">
+                    <ui:param name="users" value="#{userListBean.users}" />
+                    <ui:param name="var" value="user" />
+                    <ui:param name="tableId" value="userTable" />
+                    <ui:param name="paginator" value="true" />
+                    <ui:param name="rows" value="20" />
+                    <ui:param name="showActions" value="true" />
+                    <ui:param name="showRoles" value="true" />
+                    <ui:param name="showEmail" value="true" />
+                    <ui:param name="showStatus" value="true" />
+                    <ui:param name="update" value="userTable" />
+                </ui:include>
+            </h:form>
+        </div>
+    </ui:define>
+
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/pages/user-manager/users/profile.xhtml b/src/main/resources/META-INF/resources/pages/user-manager/users/profile.xhtml
new file mode 100644
index 0000000..ae6c082
--- /dev/null
+++ b/src/main/resources/META-INF/resources/pages/user-manager/users/profile.xhtml
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
+                template="/templates/main-template.xhtml">
+
+    <ui:param name="page" value="#{userProfilBean}"/>
+    <ui:define name="title">Profil Utilisateur - Lions User Manager</ui:define>
+
+    <ui:define name="content">
+        <!-- En-tête -->
+        <ui:include src="/templates/components/layout/page-header.xhtml">
+            <ui:param name="icon" value="pi pi-user text-blue-500" />
+            <ui:param name="title" value="Profil Utilisateur" />
+            <ui:param name="description" value="Détails et gestion de l'utilisateur" />
+            <ui:define name="actions">
+                <h:form id="formActionsProfile">
+                    <div class="flex gap-2">
+                        <ui:include src="/templates/components/shared/buttons/button-user-action.xhtml">
+                            <ui:param name="value" value="Modifier" />
+                            <ui:param name="icon" value="pi pi-pencil" />
+                            <ui:param name="action" value="#{userProfilBean.enableEditMode}" />
+                            <ui:param name="update" value="userProfileForm" />
+                            <ui:param name="severity" value="warning" />
+                            <ui:param name="rendered" value="#{not userProfilBean.editMode}" />
+                        </ui:include>
+                        <ui:include src="/templates/components/shared/buttons/button-user-action.xhtml">
+                            <ui:param name="value" value="Retour" />
+                            <ui:param name="icon" value="pi pi-arrow-left" />
+                            <ui:param name="outcome" value="/pages/user-manager/users/list" />
+                            <ui:param name="severity" value="secondary" />
+                        </ui:include>
+                    </div>
+                </h:form>
+            </ui:define>
+        </ui:include>
+
+        <div class="grid">
+            <!-- Carte utilisateur -->
+            <div class="col-12 md:col-4">
+                <ui:include src="/templates/components/user-management/user-card.xhtml">
+                    <ui:param name="user" value="#{userProfilBean.user}" />
+                    <ui:param name="showActions" value="false" />
+                    <ui:param name="showRoles" value="true" />
+                </ui:include>
+            </div>
+
+            <!-- Formulaire d'édition -->
+            <div class="col-12 md:col-8">
+                <div class="card">
+                    <h:form id="userProfileForm">
+                        <c:choose>
+                            <c:when test="#{userProfilBean.editMode}">
+                                <ui:include src="/templates/components/user-management/user-form.xhtml">
+                                    <ui:param name="user" value="#{userProfilBean.user}" />
+                                    <ui:param name="mode" value="edit" />
+                                    <ui:param name="showPasswordFields" value="false" />
+                                    <ui:param name="submitAction" value="#{userProfilBean.updateUser}" />
+                                    <ui:param name="cancelOutcome" value="" />
+                                </ui:include>
+                            </c:when>
+                            <c:otherwise>
+                                <!-- Mode lecture seule -->
+                                <ui:include src="/templates/components/user-management/user-form.xhtml">
+                                    <ui:param name="user" value="#{userProfilBean.user}" />
+                                    <ui:param name="readonly" value="true" />
+                                </ui:include>
+                            </c:otherwise>
+                        </c:choose>
+                    </h:form>
+                </div>
+
+                <!-- Actions rapides -->
+                <div class="card mt-3">
+                    <h5>Actions Rapides</h5>
+                    <div class="flex flex-wrap gap-2">
+                        <ui:include src="/templates/components/shared/buttons/button-user-action.xhtml">
+                            <ui:param name="value" value="Réinitialiser mot de passe" />
+                            <ui:param name="icon" value="pi pi-key" />
+                            <ui:param name="onclick" value="PF('resetPasswordDialog').show()" />
+                            <ui:param name="severity" value="info" />
+                        </ui:include>
+                        <ui:include src="/templates/components/shared/buttons/button-user-action.xhtml">
+                            <ui:param name="value" value="#{userProfilBean.user.enabled ? 'Désactiver' : 'Activer'}" />
+                            <ui:param name="icon" value="pi #{userProfilBean.user.enabled ? 'pi-times' : 'pi-check'}" />
+                            <ui:param name="action" value="#{userProfilBean.user.enabled ? userProfilBean.deactivateUser() : userProfilBean.activateUser()}" />
+                            <ui:param name="update" value="userProfileForm" />
+                            <ui:param name="severity" value="#{userProfilBean.user.enabled ? 'warning' : 'success'}" />
+                        </ui:include>
+                        <ui:include src="/templates/components/shared/buttons/button-user-action.xhtml">
+                            <ui:param name="value" value="Déconnecter toutes les sessions" />
+                            <ui:param name="icon" value="pi pi-sign-out" />
+                            <ui:param name="action" value="#{userProfilBean.logoutAllSessions}" />
+                            <ui:param name="update" value="userProfileForm" />
+                            <ui:param name="severity" value="info" />
+                        </ui:include>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </ui:define>
+
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/templates/components/README.md b/src/main/resources/META-INF/resources/templates/components/README.md
new file mode 100644
index 0000000..fdc5170
--- /dev/null
+++ b/src/main/resources/META-INF/resources/templates/components/README.md
@@ -0,0 +1,399 @@
+# 📦 Composants Réutilisables - Lions User Manager
+
+**Version**: 1.0.0  
+**Date**: 2025-01-29  
+**Pattern**: WOU/DRY (Write Once Use / Don't Repeat Yourself)
+
+---
+
+## 🎯 Vue d'Ensemble
+
+Ce répertoire contient tous les composants UI réutilisables pour le module **lions-user-manager**. Ces composants suivent les patterns établis dans **unionflow** et peuvent être utilisés dans n'importe quel projet de l'écosystème **lionsdev**.
+
+---
+
+## 📂 Structure des Composants
+
+```
+templates/components/
+├── user-management/          # Composants spécifiques utilisateurs
+│   ├── user-card.xhtml
+│   ├── user-form.xhtml
+│   ├── user-search-bar.xhtml
+│   ├── user-actions.xhtml
+│   └── user-role-badge.xhtml
+├── role-management/          # Composants spécifiques rôles
+│   ├── role-card.xhtml
+│   ├── role-form.xhtml
+│   └── role-assignment.xhtml
+├── audit/                    # Composants audit
+│   ├── audit-log-row.xhtml
+│   └── audit-stats-card.xhtml
+└── shared/                   # Composants génériques réutilisables
+    ├── buttons/
+    │   └── button-user-action.xhtml
+    ├── cards/
+    │   └── user-stat-card.xhtml
+    ├── forms/
+    │   └── user-form-field.xhtml
+    └── tables/
+        └── user-data-table.xhtml
+```
+
+---
+
+## 📋 Liste Complète des Composants
+
+### 👤 User Management (5 composants)
+
+#### 1. `user-card.xhtml`
+**Description**: Carte utilisateur avec informations principales et actions
+
+**Paramètres principaux**:
+- `user`: UserDTO (requis)
+- `showActions`: Boolean (défaut: true)
+- `showRoles`: Boolean (défaut: true)
+- `clickable`: Boolean (défaut: true)
+- `outcome`: String (optionnel)
+
+**Exemple**:
+```xhtml
+<ui:include src="/templates/components/user-management/user-card.xhtml">
+    <ui:param name="user" value="#{userBean.selectedUser}" />
+    <ui:param name="showActions" value="true" />
+</ui:include>
+```
+
+#### 2. `user-form.xhtml`
+**Description**: Formulaire complet pour créer/modifier un utilisateur
+
+**Paramètres principaux**:
+- `user`: UserDTO (requis)
+- `mode`: String (défaut: "create") - "create" ou "edit"
+- `showRealmSelector`: Boolean (défaut: false)
+- `showPasswordFields`: Boolean (défaut: true)
+- `readonly`: Boolean (défaut: false)
+
+**Exemple**:
+```xhtml
+<ui:include src="/templates/components/user-management/user-form.xhtml">
+    <ui:param name="user" value="#{userBean.newUser}" />
+    <ui:param name="mode" value="create" />
+    <ui:param name="submitAction" value="#{userBean.createUser}" />
+</ui:include>
+```
+
+#### 3. `user-search-bar.xhtml`
+**Description**: Barre de recherche avancée pour utilisateurs
+
+**Paramètres principaux**:
+- `searchCriteria`: UserSearchCriteriaDTO (requis)
+- `searchAction`: String (requis)
+- `showAdvanced`: Boolean (défaut: false)
+- `showRealmFilter`: Boolean (défaut: true)
+- `showStatusFilter`: Boolean (défaut: true)
+
+**Exemple**:
+```xhtml
+<ui:include src="/templates/components/user-management/user-search-bar.xhtml">
+    <ui:param name="searchCriteria" value="#{userBean.searchCriteria}" />
+    <ui:param name="searchAction" value="#{userBean.search}" />
+    <ui:param name="update" value="userTable" />
+</ui:include>
+```
+
+#### 4. `user-actions.xhtml`
+**Description**: Boutons d'action pour un utilisateur
+
+**Paramètres principaux**:
+- `user`: UserDTO (requis)
+- `showView`: Boolean (défaut: true)
+- `showEdit`: Boolean (défaut: true)
+- `showDelete`: Boolean (défaut: true)
+- `showActivate`: Boolean (défaut: true)
+- `layout`: String (défaut: "horizontal") - "horizontal", "vertical" ou "dropdown"
+
+**Exemple**:
+```xhtml
+<ui:include src="/templates/components/user-management/user-actions.xhtml">
+    <ui:param name="user" value="#{user}" />
+    <ui:param name="layout" value="dropdown" />
+    <ui:param name="update" value="userTable" />
+</ui:include>
+```
+
+#### 5. `user-role-badge.xhtml`
+**Description**: Badge pour un rôle utilisateur
+
+**Paramètres principaux**:
+- `roleName`: String (requis)
+- `roleType`: String (optionnel) - "REALM_ROLE", "CLIENT_ROLE", "COMPOSITE_ROLE"
+- `severity`: String (optionnel) - "success", "info", "warning", "danger"
+- `clickable`: Boolean (défaut: false)
+
+**Exemple**:
+```xhtml
+<ui:include src="/templates/components/user-management/user-role-badge.xhtml">
+    <ui:param name="roleName" value="ADMIN" />
+    <ui:param name="roleType" value="REALM_ROLE" />
+</ui:include>
+```
+
+---
+
+### 🛡️ Role Management (3 composants)
+
+#### 6. `role-card.xhtml`
+**Description**: Carte rôle avec informations principales
+
+**Paramètres principaux**:
+- `role`: RoleDTO (requis)
+- `showActions`: Boolean (défaut: true)
+- `showDescription`: Boolean (défaut: true)
+- `showCompositeInfo`: Boolean (défaut: true)
+
+**Exemple**:
+```xhtml
+<ui:include src="/templates/components/role-management/role-card.xhtml">
+    <ui:param name="role" value="#{roleBean.selectedRole}" />
+</ui:include>
+```
+
+#### 7. `role-form.xhtml`
+**Description**: Formulaire pour créer/modifier un rôle
+
+**Paramètres principaux**:
+- `role`: RoleDTO (requis)
+- `mode`: String (défaut: "create")
+- `showRealmSelector`: Boolean (défaut: true)
+- `showClientSelector`: Boolean (défaut: false)
+- `showCompositeOptions`: Boolean (défaut: true)
+
+**Exemple**:
+```xhtml
+<ui:include src="/templates/components/role-management/role-form.xhtml">
+    <ui:param name="role" value="#{roleBean.newRole}" />
+    <ui:param name="mode" value="create" />
+    <ui:param name="submitAction" value="#{roleBean.createRole}" />
+</ui:include>
+```
+
+#### 8. `role-assignment.xhtml`
+**Description**: Interface pour attribuer/révoquer des rôles
+
+**Paramètres principaux**:
+- `user`: UserDTO (requis)
+- `availableRoles`: List<RoleDTO> (requis)
+- `userRoles`: List<RoleDTO> (requis)
+- `assignAction`: String (requis)
+- `revokeAction`: String (requis)
+
+**Exemple**:
+```xhtml
+<ui:include src="/templates/components/role-management/role-assignment.xhtml">
+    <ui:param name="user" value="#{userBean.selectedUser}" />
+    <ui:param name="availableRoles" value="#{roleBean.availableRoles}" />
+    <ui:param name="userRoles" value="#{userBean.userRoles}" />
+    <ui:param name="assignAction" value="#{roleBean.assignRole}" />
+    <ui:param name="revokeAction" value="#{roleBean.revokeRole}" />
+</ui:include>
+```
+
+---
+
+### 📊 Audit (2 composants)
+
+#### 9. `audit-log-row.xhtml`
+**Description**: Ligne de log d'audit avec informations détaillées
+
+**Paramètres principaux**:
+- `auditLog`: AuditLogDTO (requis)
+- `showDetails`: Boolean (défaut: false)
+- `showActions`: Boolean (défaut: false)
+- `compact`: Boolean (défaut: false)
+
+**Exemple**:
+```xhtml
+<ui:include src="/templates/components/audit/audit-log-row.xhtml">
+    <ui:param name="auditLog" value="#{log}" />
+    <ui:param name="showDetails" value="true" />
+</ui:include>
+```
+
+#### 10. `audit-stats-card.xhtml`
+**Description**: Carte statistiques d'audit
+
+**Paramètres principaux**:
+- `title`: String (requis)
+- `value`: Number (requis)
+- `icon`: String (requis)
+- `iconColor`: String (requis)
+- `trend`: Number (optionnel)
+- `trendLabel`: String (optionnel)
+
+**Exemple**:
+```xhtml
+<ui:include src="/templates/components/audit/audit-stats-card.xhtml">
+    <ui:param name="title" value="Total Actions" />
+    <ui:param name="value" value="#{auditBean.totalActions}" />
+    <ui:param name="icon" value="pi-history" />
+    <ui:param name="iconColor" value="blue-600" />
+</ui:include>
+```
+
+---
+
+### 🔧 Shared Components (4 composants)
+
+#### 11. `button-user-action.xhtml`
+**Description**: Bouton générique pour actions utilisateur
+
+**Paramètres principaux**:
+- `value`: String (requis)
+- `icon`: String (optionnel)
+- `action`: String (optionnel)
+- `outcome`: String (optionnel)
+- `severity`: String (défaut: "primary")
+- `size`: String (défaut: "normal")
+
+**Exemple**:
+```xhtml
+<ui:include src="/templates/components/shared/buttons/button-user-action.xhtml">
+    <ui:param name="value" value="Créer Utilisateur" />
+    <ui:param name="icon" value="pi-user-plus" />
+    <ui:param name="action" value="#{userBean.createUser}" />
+</ui:include>
+```
+
+#### 12. `user-stat-card.xhtml`
+**Description**: Carte statistique utilisateur
+
+**Paramètres principaux**:
+- `title`: String (requis)
+- `value`: String/Number (requis)
+- `icon`: String (requis)
+- `iconColor`: String (requis)
+- `trend`: Number (optionnel)
+- `clickable`: Boolean (défaut: false)
+
+**Exemple**:
+```xhtml
+<ui:include src="/templates/components/shared/cards/user-stat-card.xhtml">
+    <ui:param name="title" value="Total Utilisateurs" />
+    <ui:param name="value" value="#{userBean.totalUsers}" />
+    <ui:param name="icon" value="pi-users" />
+    <ui:param name="iconColor" value="blue-600" />
+</ui:include>
+```
+
+#### 13. `user-form-field.xhtml`
+**Description**: Champ de formulaire générique
+
+**Paramètres principaux**:
+- `id`: String (requis)
+- `label`: String (requis)
+- `value`: Object (requis)
+- `type`: String (défaut: "text") - "text", "email", "password", "number", "textarea", "select", "checkbox", "calendar"
+- `required`: Boolean (défaut: false)
+- `readonly`: Boolean (défaut: false)
+
+**Exemple**:
+```xhtml
+<ui:include src="/templates/components/shared/forms/user-form-field.xhtml">
+    <ui:param name="id" value="username" />
+    <ui:param name="label" value="Nom d'utilisateur" />
+    <ui:param name="value" value="#{user.username}" />
+    <ui:param name="required" value="true" />
+</ui:include>
+```
+
+#### 14. `user-data-table.xhtml`
+**Description**: Tableau de données pour utilisateurs
+
+**Paramètres principaux**:
+- `users`: List<UserDTO> (requis)
+- `var`: String (défaut: "user")
+- `paginator`: Boolean (défaut: true)
+- `rows`: Number (défaut: 20)
+- `showActions`: Boolean (défaut: true)
+- `showRoles`: Boolean (défaut: true)
+- `showSelection`: Boolean (défaut: false)
+
+**Exemple**:
+```xhtml
+<ui:include src="/templates/components/shared/tables/user-data-table.xhtml">
+    <ui:param name="users" value="#{userBean.users}" />
+    <ui:param name="update" value="userTable" />
+</ui:include>
+```
+
+---
+
+## 🎨 Patterns et Conventions
+
+### Documentation Inline
+Chaque composant contient une documentation complète en commentaire avec:
+- Description du composant
+- Liste des paramètres avec types et valeurs par défaut
+- Exemples d'utilisation
+
+### Paramètres Optionnels
+Tous les paramètres optionnels ont des valeurs par défaut définies avec `<c:set>`.
+
+### Pattern WOU/DRY
+- **Write Once Use**: Chaque composant est écrit une fois et réutilisé partout
+- **Don't Repeat Yourself**: Pas de duplication de code
+
+### Naming Convention
+- Noms de fichiers en `kebab-case`
+- Paramètres en `camelCase`
+- IDs de composants avec préfixe cohérent
+
+---
+
+## 🚀 Utilisation dans d'Autres Projets
+
+Ces composants peuvent être utilisés dans n'importe quel projet de l'écosystème **lionsdev** en ajoutant la dépendance Maven:
+
+```xml
+<dependency>
+    <groupId>dev.lions.user.manager</groupId>
+    <artifactId>lions-user-manager-client-quarkus-primefaces-freya</artifactId>
+    <version>1.0.0</version>
+</dependency>
+```
+
+Puis inclure les composants dans vos pages XHTML:
+
+```xhtml
+<ui:include src="/templates/components/user-management/user-card.xhtml">
+    <ui:param name="user" value="#{userBean.selectedUser}" />
+</ui:include>
+```
+
+---
+
+## 📝 Notes Importantes
+
+1. **Dépendances**: Tous les composants nécessitent PrimeFaces 14.0.5+ et Quarkus PrimeFaces 3.13.3+
+2. **Thème**: Les composants utilisent le thème Freya (compatible avec unionflow)
+3. **Validation**: Les composants de formulaire incluent la validation JSF
+4. **Accessibilité**: Les composants suivent les bonnes pratiques d'accessibilité
+
+---
+
+## 🔄 Maintenance
+
+Pour ajouter un nouveau composant:
+
+1. Créer le fichier dans le répertoire approprié
+2. Suivre le pattern de documentation inline
+3. Ajouter des exemples d'utilisation
+4. Mettre à jour ce README
+
+---
+
+**Dernière mise à jour**: 2025-01-29  
+**Version**: 1.0.0  
+**Auteur**: Lions User Manager Team
+
diff --git a/src/main/resources/META-INF/resources/templates/components/audit/audit-log-row.xhtml b/src/main/resources/META-INF/resources/templates/components/audit/audit-log-row.xhtml
new file mode 100644
index 0000000..403ae5b
--- /dev/null
+++ b/src/main/resources/META-INF/resources/templates/components/audit/audit-log-row.xhtml
@@ -0,0 +1,110 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
+
+    <!--
+        Composant réutilisable: Ligne de Log d'Audit (WOU/DRY Pattern)
+        
+        Auteur: Lions User Manager
+        Version: 1.0.0
+        Description: Affiche une ligne de log d'audit avec informations détaillées
+        
+        Paramètres:
+        - auditLog: AuditLogDTO (requis) - Le log d'audit à afficher
+        - showDetails: Boolean (défaut: false) - Afficher les détails complets
+        - showActions: Boolean (défaut: false) - Afficher les actions possibles
+        - compact: Boolean (défaut: false) - Mode compact
+        - styleClass: String (optionnel) - Classes CSS supplémentaires
+        
+        Exemples d'utilisation:
+        
+        1. Ligne simple:
+        <ui:include src="/templates/components/audit/audit-log-row.xhtml">
+            <ui:param name="auditLog" value="#{log}" />
+        </ui:include>
+        
+        2. Ligne avec détails:
+        <ui:include src="/templates/components/audit/audit-log-row.xhtml">
+            <ui:param name="auditLog" value="#{log}" />
+            <ui:param name="showDetails" value="true" />
+        </ui:include>
+    -->
+    
+    <c:set var="showDetails" value="#{empty showDetails ? false : showDetails}" />
+    <c:set var="showActions" value="#{empty showActions ? false : showActions}" />
+    <c:set var="compact" value="#{empty compact ? false : compact}" />
+    
+    <!-- Déterminer la severity selon le succès -->
+    <c:set var="severity" value="#{auditLog.succes ? 'success' : 'danger'}" />
+    <c:set var="icon" value="#{auditLog.succes ? 'pi-check-circle' : 'pi-times-circle'}" />
+    
+    <div class="audit-log-row flex align-items-center gap-3 p-3 border-round surface-border border-1 #{styleClass}"
+         style="#{compact ? 'padding: 0.5rem;' : ''}">
+        
+        <!-- Icône de statut -->
+        <div class="flex align-items-center justify-content-center"
+             style="width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--#{severity}-100);">
+            <i class="pi #{icon} text-#{severity}-600"></i>
+        </div>
+        
+        <!-- Informations principales -->
+        <div class="flex-1">
+            <div class="flex align-items-center gap-2 mb-1">
+                <strong class="text-900">#{auditLog.typeAction}</strong>
+                <p:tag 
+                    value="#{auditLog.succes ? 'Succès' : 'Échec'}" 
+                    severity="#{severity}"
+                    styleClass="text-xs" />
+            </div>
+            
+            <div class="text-color-secondary text-sm">
+                <c:if test="#{not empty auditLog.acteurUsername}">
+                    <span><i class="pi pi-user mr-1"></i>#{auditLog.acteurUsername}</span>
+                </c:if>
+                <c:if test="#{not empty auditLog.ressourceType}">
+                    <span class="ml-3"><i class="pi pi-database mr-1"></i>#{auditLog.ressourceType}</span>
+                </c:if>
+                <c:if test="#{not empty auditLog.dateAction}">
+                    <span class="ml-3"><i class="pi pi-calendar mr-1"></i>#{auditLog.dateAction}</span>
+                </c:if>
+            </div>
+            
+            <!-- Détails (si affichés) -->
+            <c:if test="#{showDetails}">
+                <div class="mt-2 text-color-secondary text-xs">
+                    <c:if test="#{not empty auditLog.ressourceId}">
+                        <div><strong>Ressource ID:</strong> #{auditLog.ressourceId}</div>
+                    </c:if>
+                    <c:if test="#{not empty auditLog.details}">
+                        <div><strong>Détails:</strong> #{auditLog.details}</div>
+                    </c:if>
+                    <c:if test="#{not empty auditLog.adresseIp}">
+                        <div><strong>IP:</strong> #{auditLog.adresseIp}</div>
+                    </c:if>
+                    <c:if test="#{not empty auditLog.userAgent}">
+                        <div><strong>User Agent:</strong> #{auditLog.userAgent}</div>
+                    </c:if>
+                    <c:if test="#{not empty auditLog.messageErreur}">
+                        <div class="text-red-600"><strong>Erreur:</strong> #{auditLog.messageErreur}</div>
+                    </c:if>
+                </div>
+            </c:if>
+        </div>
+        
+        <!-- Actions (si affichées) -->
+        <c:if test="#{showActions}">
+            <div class="flex gap-1">
+                <p:commandButton 
+                    icon="pi pi-eye"
+                    styleClass="p-button-text p-button-sm"
+                    title="Voir les détails"
+                    onclick="PF('auditLogDetailsDialog').show()" />
+            </div>
+        </c:if>
+    </div>
+    
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/templates/components/audit/audit-stats-card.xhtml b/src/main/resources/META-INF/resources/templates/components/audit/audit-stats-card.xhtml
new file mode 100644
index 0000000..999fadd
--- /dev/null
+++ b/src/main/resources/META-INF/resources/templates/components/audit/audit-stats-card.xhtml
@@ -0,0 +1,120 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
+
+    <!--
+        Composant réutilisable: Carte Statistiques Audit (WOU/DRY Pattern)
+        
+        Auteur: Lions User Manager
+        Version: 1.0.0
+        Description: Affiche des statistiques d'audit dans une carte
+        
+        Paramètres:
+        - title: String (requis) - Titre de la carte
+        - value: Number (requis) - Valeur à afficher
+        - icon: String (requis) - Classe d'icône PrimeIcons
+        - iconColor: String (requis) - Couleur de l'icône
+        - subtitle: String (optionnel) - Sous-titre
+        - trend: Number (optionnel) - Tendance (pourcentage)
+        - trendLabel: String (optionnel) - Libellé de la tendance
+        - colSize: String (défaut: "col-12 md:col-6 lg:col-3") - Taille de colonne
+        - clickable: Boolean (défaut: false) - Rendre la carte cliquable
+        - clickAction: String (optionnel) - Action au clic
+        
+        Exemples d'utilisation:
+        
+        1. Carte simple:
+        <ui:include src="/templates/components/audit/audit-stats-card.xhtml">
+            <ui:param name="title" value="Total Actions" />
+            <ui:param name="value" value="#{auditBean.totalActions}" />
+            <ui:param name="icon" value="pi-history" />
+            <ui:param name="iconColor" value="blue-600" />
+        </ui:include>
+        
+        2. Carte avec tendance:
+        <ui:include src="/templates/components/audit/audit-stats-card.xhtml">
+            <ui:param name="title" value="Actions Réussies" />
+            <ui:param name="value" value="#{auditBean.successCount}" />
+            <ui:param name="icon" value="pi-check-circle" />
+            <ui:param name="iconColor" value="green-600" />
+            <ui:param name="trend" value="#{auditBean.successTrend}" />
+            <ui:param name="trendLabel" value="vs mois dernier" />
+        </ui:include>
+    -->
+    
+    <c:set var="colSize" value="#{empty colSize ? 'col-12 md:col-6 lg:col-3' : colSize}" />
+    <c:set var="clickable" value="#{empty clickable ? false : clickable}" />
+    
+    <div class="field #{colSize}">
+        <c:choose>
+            <c:when test="#{clickable}">
+                <p:commandLink 
+                    styleClass="card-link"
+                    action="#{not empty clickAction ? clickAction : null}">
+                    <div class="card surface-0 hover:surface-100 border-round-lg transition-all transition-duration-200 p-4">
+                        <div class="flex align-items-center justify-content-between mb-3">
+                            <span class="block text-600 font-medium text-sm">#{title}</span>
+                            <div class="flex align-items-center justify-content-center surface-100 border-round-lg" 
+                                 style="width: 2.5rem; height: 2.5rem;">
+                                <i class="pi #{icon} text-#{iconColor} text-lg"></i>
+                            </div>
+                        </div>
+                        
+                        <div class="text-900 font-bold text-2xl mb-2">#{value}</div>
+                        
+                        <c:if test="#{not empty subtitle}">
+                            <div class="text-500 text-xs mb-2">#{subtitle}</div>
+                        </c:if>
+                        
+                        <c:if test="#{not empty trend}">
+                            <div class="flex align-items-center">
+                                <i class="pi pi-arrow-#{trend >= 0 ? 'up' : 'down'} text-#{trend >= 0 ? 'green' : 'red'}-500 text-sm mr-2"></i>
+                                <span class="text-#{trend >= 0 ? 'green' : 'red'}-600 font-semibold text-sm mr-2">
+                                    #{trend >= 0 ? '+' : ''}#{trend}%
+                                </span>
+                                <c:if test="#{not empty trendLabel}">
+                                    <span class="text-500 text-xs">#{trendLabel}</span>
+                                </c:if>
+                            </div>
+                        </c:if>
+                    </div>
+                </p:commandLink>
+            </c:when>
+            
+            <c:otherwise>
+                <div class="card surface-0 border-round-lg p-4">
+                    <div class="flex align-items-center justify-content-between mb-3">
+                        <span class="block text-600 font-medium text-sm">#{title}</span>
+                        <div class="flex align-items-center justify-content-center surface-100 border-round-lg" 
+                             style="width: 2.5rem; height: 2.5rem;">
+                            <i class="pi #{icon} text-#{iconColor} text-lg"></i>
+                        </div>
+                    </div>
+                    
+                    <div class="text-900 font-bold text-2xl mb-2">#{value}</div>
+                    
+                    <c:if test="#{not empty subtitle}">
+                        <div class="text-500 text-xs mb-2">#{subtitle}</div>
+                    </c:if>
+                    
+                    <c:if test="#{not empty trend}">
+                        <div class="flex align-items-center">
+                            <i class="pi pi-arrow-#{trend >= 0 ? 'up' : 'down'} text-#{trend >= 0 ? 'green' : 'red'}-500 text-sm mr-2"></i>
+                            <span class="text-#{trend >= 0 ? 'green' : 'red'}-600 font-semibold text-sm mr-2">
+                                #{trend >= 0 ? '+' : ''}#{trend}%
+                            </span>
+                            <c:if test="#{not empty trendLabel}">
+                                <span class="text-500 text-xs">#{trendLabel}</span>
+                            </c:if>
+                        </div>
+                    </c:if>
+                </div>
+            </c:otherwise>
+        </c:choose>
+    </div>
+    
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/templates/components/layout/footer.xhtml b/src/main/resources/META-INF/resources/templates/components/layout/footer.xhtml
new file mode 100644
index 0000000..440d19a
--- /dev/null
+++ b/src/main/resources/META-INF/resources/templates/components/layout/footer.xhtml
@@ -0,0 +1,28 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui">
+
+    <!--
+        Composant réutilisable: Footer (WOU/DRY Pattern)
+        
+        Auteur: Lions User Manager
+        Version: 1.0.0
+        Description: Pied de page avec informations
+    -->
+
+    <div class="layout-footer">
+        <div class="grid">
+            <div class="col-12">
+                <div class="footer-bottom text-center">
+                    <h4>Lions User Manager</h4>
+                    <h6>Copyright © Lions Dev Team - Gestion centralisée des utilisateurs Keycloak</h6>
+                    <p class="text-600 text-sm mt-2">Version 1.0.0</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/templates/components/layout/menu.xhtml b/src/main/resources/META-INF/resources/templates/components/layout/menu.xhtml
new file mode 100644
index 0000000..0c43e22
--- /dev/null
+++ b/src/main/resources/META-INF/resources/templates/components/layout/menu.xhtml
@@ -0,0 +1,63 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
+                xmlns:h="http://xmlns.jcp.org/jsf/html" 
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets" 
+                xmlns:p="http://primefaces.org/ui"
+                xmlns:fr="http://primefaces.org/freya">
+
+    <!--
+        Composant réutilisable: Menu Navigation (WOU/DRY Pattern)
+        
+        Auteur: Lions User Manager
+        Version: 1.0.0
+        Description: Menu de navigation latéral pour Lions User Manager
+    -->
+
+<div class="menu-wrapper">
+    <div class="sidebar-logo">
+        <a href="/pages/user-manager/users/list">
+            <span class="font-bold text-xl">Lions User Manager</span>
+        </a>
+        <a href="#" class="sidebar-pin" title="Toggle Menu">
+            <span class="pin"></span>
+        </a>
+    </div>
+    <div class="layout-menu-container">
+        <h:form id="menuform">
+            <fr:menu widgetVar="FreyaMenuWidget">
+                <!-- Dashboard -->
+                <p:menuitem id="m_dashboard" value="Tableau de Bord" icon="pi pi-home" outcome="/pages/user-manager/dashboard" />
+                
+                <!-- Gestion Utilisateurs -->
+                <p:submenu id="m_users" label="Gestion Utilisateurs" icon="pi pi-users">
+                    <p:menuitem id="m_users_list" value="Liste des Utilisateurs" icon="pi pi-list" outcome="/pages/user-manager/users/list" />
+                    <p:menuitem id="m_users_create" value="Nouvel Utilisateur" icon="pi pi-user-plus" outcome="/pages/user-manager/users/create" />
+                    <p:menuitem id="m_users_search" value="Recherche Avancée" icon="pi pi-search" outcome="/pages/user-manager/users/search" />
+                </p:submenu>
+                
+                <!-- Gestion Rôles -->
+                <p:submenu id="m_roles" label="Gestion Rôles" icon="pi pi-shield">
+                    <p:menuitem id="m_roles_list" value="Liste des Rôles" icon="pi pi-list" outcome="/pages/user-manager/roles/list" />
+                    <p:menuitem id="m_roles_create_realm" value="Nouveau Rôle Realm" icon="pi pi-plus" outcome="/pages/user-manager/roles/create-realm" />
+                    <p:menuitem id="m_roles_create_client" value="Nouveau Rôle Client" icon="pi pi-plus-circle" outcome="/pages/user-manager/roles/create-client" />
+                    <p:menuitem id="m_roles_assign" value="Attribution Rôles" icon="pi pi-key" outcome="/pages/user-manager/roles/assign" />
+                </p:submenu>
+                
+                <!-- Audit -->
+                <p:submenu id="m_audit" label="Audit" icon="pi pi-history">
+                    <p:menuitem id="m_audit_logs" value="Journal d'Audit" icon="pi pi-file-o" outcome="/pages/user-manager/audit/logs" />
+                    <p:menuitem id="m_audit_stats" value="Statistiques" icon="pi pi-chart-bar" outcome="/pages/user-manager/audit/stats" />
+                </p:submenu>
+                
+                <!-- Synchronisation -->
+                <p:submenu id="m_sync" label="Synchronisation" icon="pi pi-sync">
+                    <p:menuitem id="m_sync_dashboard" value="Dashboard" icon="pi pi-dashboard" outcome="/pages/user-manager/sync/dashboard" />
+                    <p:menuitem id="m_sync_health" value="Health Check" icon="pi pi-heart" outcome="/pages/user-manager/sync/health" />
+                </p:submenu>
+            </fr:menu>
+        </h:form>
+    </div>
+</div>
+
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/templates/components/layout/page-header.xhtml b/src/main/resources/META-INF/resources/templates/components/layout/page-header.xhtml
new file mode 100644
index 0000000..be6f0c7
--- /dev/null
+++ b/src/main/resources/META-INF/resources/templates/components/layout/page-header.xhtml
@@ -0,0 +1,52 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
+    
+    <!-- 
+        Composant en-tête de page réutilisable (WOU/DRY Pattern)
+        
+        Auteur: Lions User Manager
+        Version: 1.0.0
+        Description: En-tête de page avec icône, titre, description et actions
+        
+        Paramètres:
+        - icon: String (optionnel) - Classe d'icône PrimeIcons (ex: "pi pi-users text-blue-500")
+        - title: String (requis) - Titre de la page
+        - description: String (optionnel) - Description de la page
+        
+        Usage: 
+        <ui:include src="/templates/components/layout/page-header.xhtml">
+            <ui:param name="icon" value="pi pi-users text-blue-500" />
+            <ui:param name="title" value="Gestion des Utilisateurs" />
+            <ui:param name="description" value="Gestion centralisée des utilisateurs Keycloak" />
+            <ui:define name="actions">
+                <!-- Boutons d'action -->
+            </ui:define>
+        </ui:include>
+    -->
+    
+    <div class="grid mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="flex align-items-center justify-content-between">
+                    <div>
+                        <h3 class="mb-2">
+                            <c:if test="#{not empty icon}">
+                                <i class="#{icon} mr-2"></i>
+                            </c:if>
+                            #{title}
+                        </h3>
+                        <p class="text-600 m-0" rendered="#{not empty description}">#{description}</p>
+                    </div>
+                    <div>
+                        <ui:insert name="actions" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/templates/components/layout/topbar.xhtml b/src/main/resources/META-INF/resources/templates/components/layout/topbar.xhtml
new file mode 100644
index 0000000..c25f545
--- /dev/null
+++ b/src/main/resources/META-INF/resources/templates/components/layout/topbar.xhtml
@@ -0,0 +1,68 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui">
+
+    <!--
+        Composant réutilisable: Topbar (WOU/DRY Pattern)
+        
+        Auteur: Lions User Manager
+        Version: 1.0.0
+        Description: Barre supérieure avec logo, menu et profil utilisateur
+    -->
+
+    <div class="layout-topbar">
+        <div class="layout-topbar-wrapper">
+            <div class="layout-topbar-left">
+                <a href="#" class="menu-button">
+                   <i class="pi pi-bars"/>
+                </a>
+                <h:link id="logolink" outcome="/pages/user-manager/users/list" styleClass="layout-topbar-logo">
+                    <span class="font-bold text-xl">Lions User Manager</span>
+                </h:link>
+            </div>
+           
+            <div class="layout-topbar-right">
+                <ul class="layout-topbar-actions">
+                    <li class="topbar-item user-profile">
+                        <a href="#" title="Profil utilisateur">
+                            <div class="flex align-items-center">
+                                <div class="bg-primary text-white border-round flex align-items-center justify-content-center mr-2" 
+                                     style="width: 32px; height: 32px; font-size: 12px; font-weight: bold;">
+                                    <i class="pi pi-user"></i>
+                                </div>
+                                <div class="text-sm">
+                                    <div class="text-900 font-medium">Utilisateur</div>
+                                    <div class="text-600 text-xs">Connecté</div>
+                                </div>
+                            </div>
+                        </a>
+                        <ul>
+                            <li>
+                                <a href="/pages/user-manager/users/profile">
+                                    <i class="pi pi-user mr-2"></i>
+                                    <span>Mon Profil</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#">
+                                    <i class="pi pi-cog mr-2"></i>
+                                    <span>Paramètres</span>
+                                </a>
+                            </li>
+                            <li class="border-top-1 surface-border">
+                                <a href="#" class="text-red-600">
+                                    <i class="pi pi-sign-out mr-2"></i>
+                                    <span>Déconnexion</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/templates/components/role-management/role-assignment.xhtml b/src/main/resources/META-INF/resources/templates/components/role-management/role-assignment.xhtml
new file mode 100644
index 0000000..d3993e4
--- /dev/null
+++ b/src/main/resources/META-INF/resources/templates/components/role-management/role-assignment.xhtml
@@ -0,0 +1,183 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
+
+    <!--
+        Composant réutilisable: Attribution de Rôles (WOU/DRY Pattern)
+        
+        Auteur: Lions User Manager
+        Version: 1.0.0
+        Description: Interface pour attribuer/révoquer des rôles à un utilisateur
+        
+        Paramètres:
+        - user: UserDTO (requis) - L'utilisateur concerné
+        - availableRoles: List&lt;RoleDTO&gt; (requis) - Liste des rôles disponibles
+        - userRoles: List&lt;RoleDTO&gt; (requis) - Liste des rôles de l'utilisateur
+        - assignAction: String (requis) - Action pour attribuer un rôle
+        - revokeAction: String (requis) - Action pour révoquer un rôle
+        - update: String (défaut: "@form") - Composants à mettre à jour
+        - showRealmRoles: Boolean (défaut: true) - Afficher les rôles Realm
+        - showClientRoles: Boolean (défaut: true) - Afficher les rôles Client
+        - formId: String (défaut: "roleAssignmentForm") - ID du formulaire
+        
+        Exemples d'utilisation:
+        
+        1. Attribution simple:
+        <ui:include src="/templates/components/role-management/role-assignment.xhtml">
+            <ui:param name="user" value="#{userBean.selectedUser}" />
+            <ui:param name="availableRoles" value="#{roleBean.availableRoles}" />
+            <ui:param name="userRoles" value="#{userBean.userRoles}" />
+            <ui:param name="assignAction" value="#{roleBean.assignRole}" />
+            <ui:param name="revokeAction" value="#{roleBean.revokeRole}" />
+        </ui:include>
+    -->
+    
+    <c:set var="formId" value="#{empty formId ? 'roleAssignmentForm' : formId}" />
+    <c:set var="update" value="#{empty update ? '@form' : update}" />
+    <c:set var="showRealmRoles" value="#{empty showRealmRoles ? true : showRealmRoles}" />
+    <c:set var="showClientRoles" value="#{empty showClientRoles ? true : showClientRoles}" />
+    
+    <h:form id="#{formId}">
+        <p:panel header="Attribution de rôles - #{user.username}" styleClass="w-full">
+            
+            <!-- Rôles actuels de l'utilisateur -->
+            <h3>Rôles actuels</h3>
+            <div class="flex flex-wrap gap-2 mb-4">
+                <c:forEach var="userRole" items="#{userRoles}">
+                    <p:tag 
+                        value="#{userRole.name}" 
+                        severity="info"
+                        icon="pi pi-shield">
+                        <p:commandButton 
+                            icon="pi pi-times"
+                            styleClass="p-button-text p-button-sm p-button-danger ml-2"
+                            action="#{revokeAction}"
+                            update="#{update}"
+                            title="Révoquer le rôle">
+                            <f:param name="userId" value="#{user.id}" />
+                            <f:param name="roleId" value="#{userRole.id}" />
+                        </p:commandButton>
+                    </p:tag>
+                </c:forEach>
+                <c:if test="#{empty userRoles}">
+                    <span class="text-color-secondary">Aucun rôle attribué</span>
+                </c:if>
+            </div>
+            
+            <p:separator />
+            
+            <!-- Rôles disponibles -->
+            <h3>Rôles disponibles</h3>
+            
+            <!-- Rôles Realm -->
+            <c:if test="#{showRealmRoles}">
+                <p:panel header="Rôles Realm" styleClass="mb-3">
+                    <div class="flex flex-wrap gap-2">
+                        <c:forEach var="role" items="#{availableRoles}">
+                            <c:if test="#{role.typeRole == 'REALM_ROLE'}">
+                                <c:set var="isAssigned" value="false" />
+                                <c:forEach var="userRole" items="#{userRoles}">
+                                    <c:if test="#{userRole.id == role.id}">
+                                        <c:set var="isAssigned" value="true" />
+                                    </c:if>
+                                </c:forEach>
+                                
+                                <c:choose>
+                                    <c:when test="#{isAssigned}">
+                                        <p:tag 
+                                            value="#{role.name}" 
+                                            severity="success"
+                                            icon="pi pi-check" />
+                                    </c:when>
+                                    <c:otherwise>
+                                        <p:tag 
+                                            value="#{role.name}" 
+                                            severity="info"
+                                            icon="pi pi-shield">
+                                            <p:commandButton 
+                                                icon="pi pi-plus"
+                                                styleClass="p-button-text p-button-sm p-button-success ml-2"
+                                                action="#{assignAction}"
+                                                update="#{update}"
+                                                title="Attribuer le rôle">
+                                                <f:param name="userId" value="#{user.id}" />
+                                                <f:param name="roleId" value="#{role.id}" />
+                                            </p:commandButton>
+                                        </p:tag>
+                                    </c:otherwise>
+                                </c:choose>
+                            </c:if>
+                        </c:forEach>
+                    </div>
+                </p:panel>
+            </c:if>
+            
+            <!-- Rôles Client -->
+            <c:if test="#{showClientRoles}">
+                <p:panel header="Rôles Client" styleClass="mb-3">
+                    <div class="flex flex-wrap gap-2">
+                        <c:forEach var="role" items="#{availableRoles}">
+                            <c:if test="#{role.typeRole == 'CLIENT_ROLE'}">
+                                <c:set var="isAssigned" value="false" />
+                                <c:forEach var="userRole" items="#{userRoles}">
+                                    <c:if test="#{userRole.id == role.id}">
+                                        <c:set var="isAssigned" value="true" />
+                                    </c:if>
+                                </c:forEach>
+                                
+                                <c:choose>
+                                    <c:when test="#{isAssigned}">
+                                        <p:tag 
+                                            value="#{role.name}" 
+                                            severity="success"
+                                            icon="pi pi-check" />
+                                    </c:when>
+                                    <c:otherwise>
+                                        <p:tag 
+                                            value="#{role.name}" 
+                                            severity="info"
+                                            icon="pi pi-shield">
+                                            <p:commandButton 
+                                                icon="pi pi-plus"
+                                                styleClass="p-button-text p-button-sm p-button-success ml-2"
+                                                action="#{assignAction}"
+                                                update="#{update}"
+                                                title="Attribuer le rôle">
+                                                <f:param name="userId" value="#{user.id}" />
+                                                <f:param name="roleId" value="#{role.id}" />
+                                            </p:commandButton>
+                                        </p:tag>
+                                    </c:otherwise>
+                                </c:choose>
+                            </c:if>
+                        </c:forEach>
+                    </div>
+                </p:panel>
+            </c:if>
+            
+            <!-- Recherche de rôles -->
+            <p:separator />
+            <h3>Rechercher un rôle</h3>
+            <div class="flex gap-2 mb-3">
+                <p:inputText 
+                    value="#{roleBean.roleSearchText}" 
+                    placeholder="Rechercher un rôle..."
+                    styleClass="flex-1">
+                    <p:ajax event="keyup" 
+                          delay="300"
+                          update="roleSearchResults" />
+                </p:inputText>
+            </div>
+            
+            <div id="roleSearchResults" class="flex flex-wrap gap-2">
+                <!-- Résultats de recherche -->
+            </div>
+            
+        </p:panel>
+    </h:form>
+    
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/templates/components/role-management/role-card.xhtml b/src/main/resources/META-INF/resources/templates/components/role-management/role-card.xhtml
new file mode 100644
index 0000000..cd9884e
--- /dev/null
+++ b/src/main/resources/META-INF/resources/templates/components/role-management/role-card.xhtml
@@ -0,0 +1,151 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
+
+    <!--
+        Composant réutilisable: Carte Rôle (WOU/DRY Pattern)
+        
+        Auteur: Lions User Manager
+        Version: 1.0.0
+        Description: Affiche une carte rôle avec informations principales et actions
+        
+        Paramètres:
+        - role: RoleDTO (requis) - Le rôle à afficher
+        - showActions: Boolean (défaut: true) - Afficher les boutons d'action
+        - showDescription: Boolean (défaut: true) - Afficher la description
+        - showCompositeInfo: Boolean (défaut: true) - Afficher les infos de rôle composite
+        - clickable: Boolean (défaut: true) - Rendre la carte cliquable
+        - outcome: String (optionnel) - Page de destination au clic
+        - styleClass: String (optionnel) - Classes CSS supplémentaires
+        
+        Exemples d'utilisation:
+        
+        1. Carte simple:
+        <ui:include src="/templates/components/role-management/role-card.xhtml">
+            <ui:param name="role" value="#{roleBean.selectedRole}" />
+        </ui:include>
+        
+        2. Carte avec actions:
+        <ui:include src="/templates/components/role-management/role-card.xhtml">
+            <ui:param name="role" value="#{roleBean.selectedRole}" />
+            <ui:param name="showActions" value="true" />
+            <ui:param name="outcome" value="/pages/user-manager/roles/details" />
+        </ui:include>
+    -->
+    
+    <c:set var="showActions" value="#{empty showActions ? true : showActions}" />
+    <c:set var="showDescription" value="#{empty showDescription ? true : showDescription}" />
+    <c:set var="showCompositeInfo" value="#{empty showCompositeInfo ? true : showCompositeInfo}" />
+    <c:set var="clickable" value="#{empty clickable ? true : clickable}" />
+    
+    <p:card styleClass="role-card #{styleClass}" rendered="#{not empty role}">
+        <f:facet name="header">
+            <div class="flex align-items-center justify-content-between">
+                <div class="flex align-items-center gap-2">
+                    <i class="pi pi-shield text-2xl text-primary"></i>
+                    <div class="flex flex-column">
+                        <h3 class="m-0">#{role.name}</h3>
+                        <span class="text-color-secondary text-sm">
+                            <c:choose>
+                                <c:when test="#{role.typeRole == 'REALM_ROLE'}">Rôle Realm</c:when>
+                                <c:when test="#{role.typeRole == 'CLIENT_ROLE'}">Rôle Client</c:when>
+                                <c:when test="#{role.typeRole == 'COMPOSITE_ROLE'}">Rôle Composite</c:when>
+                                <c:otherwise>Rôle</c:otherwise>
+                            </c:choose>
+                        </span>
+                    </div>
+                </div>
+                <p:tag 
+                    value="#{role.typeRole != null ? role.typeRole : 'ROLE'}" 
+                    severity="#{role.typeRole == 'REALM_ROLE' ? 'success' : role.typeRole == 'CLIENT_ROLE' ? 'info' : 'warning'}" />
+            </div>
+        </f:facet>
+        
+        <div class="role-card-content">
+            <!-- Description -->
+            <c:if test="#{showDescription and not empty role.description}">
+                <p class="text-color-secondary mb-3">#{role.description}</p>
+            </c:if>
+            
+            <!-- Informations -->
+            <div class="flex flex-column gap-2 mb-3">
+                <c:if test="#{not empty role.realmName}">
+                    <div class="flex align-items-center gap-2">
+                        <i class="pi pi-globe text-color-secondary"></i>
+                        <span>Realm: <strong>#{role.realmName}</strong></span>
+                    </div>
+                </c:if>
+                
+                <c:if test="#{not empty role.clientId}">
+                    <div class="flex align-items-center gap-2">
+                        <i class="pi pi-desktop text-color-secondary"></i>
+                        <span>Client: <strong>#{role.clientId}</strong></span>
+                    </div>
+                </c:if>
+                
+                <!-- Rôle composite -->
+                <c:if test="#{showCompositeInfo and role.composite}">
+                    <div class="flex align-items-center gap-2">
+                        <i class="pi pi-sitemap text-color-secondary"></i>
+                        <span class="text-warning">Rôle composite</span>
+                    </div>
+                </c:if>
+            </div>
+        </div>
+        
+        <f:facet name="footer">
+            <c:if test="#{showActions}">
+                <div class="flex gap-2 justify-content-end">
+                    <p:commandButton 
+                        icon="pi pi-eye" 
+                        title="Voir les détails"
+                        styleClass="p-button-text p-button-sm"
+                        outcome="#{not empty outcome ? outcome : '/pages/user-manager/roles/details'}"
+                        rendered="#{clickable}">
+                        <f:param name="roleId" value="#{role.id}" />
+                    </p:commandButton>
+                    
+                    <p:commandButton 
+                        icon="pi pi-pencil" 
+                        title="Modifier"
+                        styleClass="p-button-text p-button-sm p-button-warning"
+                        outcome="/pages/user-manager/roles/edit">
+                        <f:param name="roleId" value="#{role.id}" />
+                    </p:commandButton>
+                    
+                    <p:commandButton 
+                        icon="pi pi-trash" 
+                        title="Supprimer"
+                        styleClass="p-button-text p-button-sm p-button-danger"
+                        onclick="PF('confirmDeleteRoleDialog').show()" />
+                </div>
+            </c:if>
+        </f:facet>
+    </p:card>
+    
+    <!-- Dialog de confirmation de suppression -->
+    <p:confirmDialog 
+        id="confirmDeleteRoleDialog"
+        widgetVar="confirmDeleteRoleDialog"
+        message="Êtes-vous sûr de vouloir supprimer le rôle #{role.name} ?"
+        header="Confirmation de suppression"
+        severity="warn">
+        <p:commandButton 
+            value="Oui"
+            icon="pi pi-check"
+            styleClass="p-button-danger"
+            action="#{roleBean.deleteRole(role.id)}"
+            update="@form"
+            oncomplete="PF('confirmDeleteRoleDialog').hide()" />
+        <p:commandButton 
+            value="Non"
+            icon="pi pi-times"
+            styleClass="p-button-secondary"
+            onclick="PF('confirmDeleteRoleDialog').hide()" />
+    </p:confirmDialog>
+    
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/templates/components/role-management/role-form.xhtml b/src/main/resources/META-INF/resources/templates/components/role-management/role-form.xhtml
new file mode 100644
index 0000000..9047391
--- /dev/null
+++ b/src/main/resources/META-INF/resources/templates/components/role-management/role-form.xhtml
@@ -0,0 +1,154 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
+
+    <!--
+        Composant réutilisable: Formulaire Rôle (WOU/DRY Pattern)
+        
+        Auteur: Lions User Manager
+        Version: 1.0.0
+        Description: Formulaire complet pour créer/modifier un rôle
+        
+        Paramètres:
+        - role: RoleDTO (requis) - Le rôle à éditer (peut être null pour création)
+        - formId: String (défaut: "roleForm") - ID du formulaire
+        - mode: String (défaut: "create") - Mode: "create" ou "edit"
+        - showRealmSelector: Boolean (défaut: true) - Afficher le sélecteur de realm
+        - showClientSelector: Boolean (défaut: false) - Afficher le sélecteur de client
+        - showCompositeOptions: Boolean (défaut: true) - Afficher les options composite
+        - readonly: Boolean (défaut: false) - Mode lecture seule
+        - submitAction: String (optionnel) - Action à exécuter à la soumission
+        - submitOutcome: String (optionnel) - Page de redirection après soumission
+        - update: String (optionnel) - Composants à mettre à jour après soumission
+        
+        Exemples d'utilisation:
+        
+        1. Formulaire de création rôle Realm:
+        <ui:include src="/templates/components/role-management/role-form.xhtml">
+            <ui:param name="role" value="#{roleBean.newRole}" />
+            <ui:param name="mode" value="create" />
+            <ui:param name="showClientSelector" value="false" />
+            <ui:param name="submitAction" value="#{roleBean.createRole}" />
+        </ui:include>
+        
+        2. Formulaire de création rôle Client:
+        <ui:include src="/templates/components/role-management/role-form.xhtml">
+            <ui:param name="role" value="#{roleBean.newRole}" />
+            <ui:param name="mode" value="create" />
+            <ui:param name="showClientSelector" value="true" />
+            <ui:param name="submitAction" value="#{roleBean.createClientRole}" />
+        </ui:include>
+    -->
+    
+    <c:set var="formId" value="#{empty formId ? 'roleForm' : formId}" />
+    <c:set var="mode" value="#{empty mode ? 'create' : mode}" />
+    <c:set var="showRealmSelector" value="#{empty showRealmSelector ? true : showRealmSelector}" />
+    <c:set var="showClientSelector" value="#{empty showClientSelector ? false : showClientSelector}" />
+    <c:set var="showCompositeOptions" value="#{empty showCompositeOptions ? true : showCompositeOptions}" />
+    <c:set var="readonly" value="#{empty readonly ? false : readonly}" />
+    
+    <h:form id="#{formId}">
+        <p:panel header="#{mode == 'create' ? 'Nouveau Rôle' : 'Modifier Rôle'}" 
+                 styleClass="w-full">
+            
+            <p:panelGrid columns="2" styleClass="w-full" columnClasses="col-12 md:col-6">
+                
+                <!-- Nom du rôle -->
+                <p:outputLabel for="roleName" value="Nom du rôle *" />
+                <p:inputText id="roleName" 
+                           value="#{role.name}" 
+                           required="true"
+                           readonly="#{readonly}"
+                           placeholder="ADMIN, USER, MODERATOR..."
+                           styleClass="w-full">
+                    <f:validateLength minimum="2" maximum="100" />
+                    <f:validateRegex pattern="^[A-Z_]+$" />
+                </p:inputText>
+                
+                <!-- Description -->
+                <p:outputLabel for="description" value="Description" />
+                <p:inputTextarea id="description" 
+                               value="#{role.description}" 
+                               readonly="#{readonly}"
+                               placeholder="Description du rôle..."
+                               rows="3"
+                               styleClass="w-full" />
+                
+                <!-- Type de rôle -->
+                <p:outputLabel for="typeRole" value="Type de rôle *" />
+                <p:selectOneMenu id="typeRole" 
+                               value="#{role.typeRole}" 
+                               required="true"
+                               readonly="#{readonly or mode == 'edit'}"
+                               styleClass="w-full">
+                    <f:selectItem itemLabel="Sélectionner..." itemValue="" />
+                    <f:selectItem itemLabel="Rôle Realm" itemValue="REALM_ROLE" />
+                    <f:selectItem itemLabel="Rôle Client" itemValue="CLIENT_ROLE" />
+                    <f:selectItem itemLabel="Rôle Composite" itemValue="COMPOSITE_ROLE" />
+                </p:selectOneMenu>
+                
+                <!-- Realm (si affiché) -->
+                <c:if test="#{showRealmSelector}">
+                    <p:outputLabel for="realmName" value="Realm *" />
+                    <p:selectOneMenu id="realmName" 
+                                   value="#{role.realmName}" 
+                                   required="#{showRealmSelector}"
+                                   readonly="#{readonly}"
+                                   styleClass="w-full">
+                        <f:selectItem itemLabel="Sélectionner..." itemValue="" />
+                        <f:selectItems value="#{roleBean.availableRealms}" />
+                    </p:selectOneMenu>
+                </c:if>
+                
+                <!-- Client (si affiché) -->
+                <c:if test="#{showClientSelector}">
+                    <p:outputLabel for="clientId" value="Client *" />
+                    <p:selectOneMenu id="clientId" 
+                                   value="#{role.clientId}" 
+                                   required="#{showClientSelector}"
+                                   readonly="#{readonly}"
+                                   styleClass="w-full">
+                        <f:selectItem itemLabel="Sélectionner..." itemValue="" />
+                        <f:selectItems value="#{roleBean.availableClients}" />
+                    </p:selectOneMenu>
+                </c:if>
+                
+                <!-- Rôle composite -->
+                <c:if test="#{showCompositeOptions}">
+                    <p:outputLabel for="composite" value="Rôle composite" />
+                    <p:selectBooleanCheckbox id="composite" 
+                                           value="#{role.composite}" 
+                                           readonly="#{readonly}" />
+                </c:if>
+                
+            </p:panelGrid>
+            
+            <!-- Boutons d'action -->
+            <f:facet name="footer">
+                <div class="flex gap-2 justify-content-end">
+                    <c:if test="#{not readonly}">
+                        <p:commandButton 
+                            value="#{mode == 'create' ? 'Créer' : 'Modifier'}"
+                            icon="pi pi-check"
+                            styleClass="p-button-success"
+                            action="#{not empty submitAction ? submitAction : null}"
+                            outcome="#{not empty submitOutcome ? submitOutcome : null}"
+                            update="#{not empty update ? update : '@form'}"
+                            process="@form" />
+                    </c:if>
+                    <p:commandButton 
+                        value="Annuler"
+                        icon="pi pi-times"
+                        styleClass="p-button-secondary"
+                        outcome="#{not empty cancelOutcome ? cancelOutcome : '/pages/user-manager/roles/list'}"
+                        immediate="true" />
+                </div>
+            </f:facet>
+        </p:panel>
+    </h:form>
+    
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/templates/components/shared/buttons/button-user-action.xhtml b/src/main/resources/META-INF/resources/templates/components/shared/buttons/button-user-action.xhtml
new file mode 100644
index 0000000..78aa00e
--- /dev/null
+++ b/src/main/resources/META-INF/resources/templates/components/shared/buttons/button-user-action.xhtml
@@ -0,0 +1,95 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
+
+    <!--
+        Composant réutilisable: Bouton Action Utilisateur (WOU/DRY Pattern)
+        
+        Auteur: Lions User Manager
+        Version: 1.0.0
+        Description: Bouton générique pour actions utilisateur
+        
+        Paramètres:
+        - value: String (requis) - Texte du bouton
+        - icon: String (optionnel) - Classe d'icône PrimeIcons
+        - action: String (optionnel) - Action à exécuter
+        - outcome: String (optionnel) - Page de redirection
+        - severity: String (défaut: "primary") - Severity: "primary", "success", "warning", "danger", "info", "secondary"
+        - size: String (défaut: "normal") - Taille: "small", "normal", "large"
+        - disabled: Boolean (défaut: false) - Désactiver le bouton
+        - update: String (optionnel) - Composants à mettre à jour
+        - process: String (défaut: "@this") - Composants à traiter
+        - styleClass: String (optionnel) - Classes CSS supplémentaires
+        
+        Exemples d'utilisation:
+        
+        1. Bouton simple:
+        <ui:include src="/templates/components/shared/buttons/button-user-action.xhtml">
+            <ui:param name="value" value="Créer Utilisateur" />
+            <ui:param name="icon" value="pi-user-plus" />
+            <ui:param name="action" value="#{userBean.createUser}" />
+        </ui:include>
+        
+        2. Bouton avec redirection:
+        <ui:include src="/templates/components/shared/buttons/button-user-action.xhtml">
+            <ui:param name="value" value="Voir Profil" />
+            <ui:param name="icon" value="pi-eye" />
+            <ui:param name="outcome" value="/pages/user-manager/users/profile" />
+        </ui:include>
+    -->
+    
+    <c:set var="severity" value="#{empty severity ? 'primary' : severity}" />
+    <c:set var="size" value="#{empty size ? 'normal' : size}" />
+    <c:set var="disabled" value="#{empty disabled ? false : disabled}" />
+    <c:set var="process" value="#{empty process ? '@this' : process}" />
+    
+    <!-- Déterminer la classe selon la severity -->
+    <c:choose>
+        <c:when test="#{severity == 'primary'}">
+            <c:set var="buttonClass" value="p-button-primary" />
+        </c:when>
+        <c:when test="#{severity == 'success'}">
+            <c:set var="buttonClass" value="p-button-success" />
+        </c:when>
+        <c:when test="#{severity == 'warning'}">
+            <c:set var="buttonClass" value="p-button-warning" />
+        </c:when>
+        <c:when test="#{severity == 'danger'}">
+            <c:set var="buttonClass" value="p-button-danger" />
+        </c:when>
+        <c:when test="#{severity == 'info'}">
+            <c:set var="buttonClass" value="p-button-info" />
+        </c:when>
+        <c:otherwise>
+            <c:set var="buttonClass" value="p-button-secondary" />
+        </c:otherwise>
+    </c:choose>
+    
+    <!-- Ajouter la taille -->
+    <c:if test="#{size == 'small'}">
+        <c:set var="buttonClass" value="#{buttonClass} p-button-sm" />
+    </c:if>
+    <c:if test="#{size == 'large'}">
+        <c:set var="buttonClass" value="#{buttonClass} p-button-lg" />
+    </c:if>
+    
+    <!-- Ajouter les classes personnalisées -->
+    <c:if test="#{not empty styleClass}">
+        <c:set var="buttonClass" value="#{buttonClass} #{styleClass}" />
+    </c:if>
+    
+    <p:commandButton 
+        value="#{value}"
+        icon="#{not empty icon ? icon : ''}"
+        styleClass="#{buttonClass}"
+        disabled="#{disabled}"
+        action="#{not empty action ? action : null}"
+        outcome="#{not empty outcome ? outcome : null}"
+        update="#{not empty update ? update : '@form'}"
+        process="#{process}" />
+    
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/templates/components/shared/cards/user-stat-card.xhtml b/src/main/resources/META-INF/resources/templates/components/shared/cards/user-stat-card.xhtml
new file mode 100644
index 0000000..255aef3
--- /dev/null
+++ b/src/main/resources/META-INF/resources/templates/components/shared/cards/user-stat-card.xhtml
@@ -0,0 +1,120 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
+
+    <!--
+        Composant réutilisable: Carte Statistique Utilisateur (WOU/DRY Pattern)
+        
+        Auteur: Lions User Manager
+        Version: 1.0.0
+        Description: Carte affichant une statistique utilisateur avec icône et valeur
+        
+        Paramètres:
+        - title: String (requis) - Titre de la carte
+        - value: String/Number (requis) - Valeur à afficher
+        - icon: String (requis) - Classe d'icône PrimeIcons
+        - iconColor: String (requis) - Couleur de l'icône
+        - subtitle: String (optionnel) - Sous-titre
+        - trend: Number (optionnel) - Tendance (pourcentage)
+        - trendLabel: String (optionnel) - Libellé de la tendance
+        - colSize: String (défaut: "col-12 md:col-6 lg:col-3") - Taille de colonne
+        - clickable: Boolean (défaut: false) - Rendre la carte cliquable
+        - clickOutcome: String (optionnel) - Page de redirection au clic
+        
+        Exemples d'utilisation:
+        
+        1. Carte simple:
+        <ui:include src="/templates/components/shared/cards/user-stat-card.xhtml">
+            <ui:param name="title" value="Total Utilisateurs" />
+            <ui:param name="value" value="#{userBean.totalUsers}" />
+            <ui:param name="icon" value="pi-users" />
+            <ui:param name="iconColor" value="blue-600" />
+        </ui:include>
+        
+        2. Carte avec tendance:
+        <ui:include src="/templates/components/shared/cards/user-stat-card.xhtml">
+            <ui:param name="title" value="Utilisateurs Actifs" />
+            <ui:param name="value" value="#{userBean.activeUsers}" />
+            <ui:param name="icon" value="pi-user-check" />
+            <ui:param name="iconColor" value="green-600" />
+            <ui:param name="trend" value="#{userBean.activeUsersTrend}" />
+            <ui:param name="trendLabel" value="ce mois" />
+        </ui:include>
+    -->
+    
+    <c:set var="colSize" value="#{empty colSize ? 'col-12 md:col-6 lg:col-3' : colSize}" />
+    <c:set var="clickable" value="#{empty clickable ? false : clickable}" />
+    
+    <div class="field #{colSize}">
+        <c:choose>
+            <c:when test="#{clickable}">
+                <p:commandLink 
+                    styleClass="card-link"
+                    outcome="#{not empty clickOutcome ? clickOutcome : null}">
+                    <div class="card surface-0 hover:surface-100 border-round-lg transition-all transition-duration-200 p-4">
+                        <div class="flex align-items-center justify-content-between mb-3">
+                            <span class="block text-600 font-medium text-sm">#{title}</span>
+                            <div class="flex align-items-center justify-content-center surface-100 border-round-lg" 
+                                 style="width: 2.5rem; height: 2.5rem;">
+                                <i class="pi #{icon} text-#{iconColor} text-lg"></i>
+                            </div>
+                        </div>
+                        
+                        <div class="text-900 font-bold text-2xl mb-2">#{value}</div>
+                        
+                        <c:if test="#{not empty subtitle}">
+                            <div class="text-500 text-xs mb-2">#{subtitle}</div>
+                        </c:if>
+                        
+                        <c:if test="#{not empty trend}">
+                            <div class="flex align-items-center">
+                                <i class="pi pi-arrow-#{trend >= 0 ? 'up' : 'down'} text-#{trend >= 0 ? 'green' : 'red'}-500 text-sm mr-2"></i>
+                                <span class="text-#{trend >= 0 ? 'green' : 'red'}-600 font-semibold text-sm mr-2">
+                                    #{trend >= 0 ? '+' : ''}#{trend}%
+                                </span>
+                                <c:if test="#{not empty trendLabel}">
+                                    <span class="text-500 text-xs">#{trendLabel}</span>
+                                </c:if>
+                            </div>
+                        </c:if>
+                    </div>
+                </p:commandLink>
+            </c:when>
+            
+            <c:otherwise>
+                <div class="card surface-0 border-round-lg p-4">
+                    <div class="flex align-items-center justify-content-between mb-3">
+                        <span class="block text-600 font-medium text-sm">#{title}</span>
+                        <div class="flex align-items-center justify-content-center surface-100 border-round-lg" 
+                             style="width: 2.5rem; height: 2.5rem;">
+                            <i class="pi #{icon} text-#{iconColor} text-lg"></i>
+                        </div>
+                    </div>
+                    
+                    <div class="text-900 font-bold text-2xl mb-2">#{value}</div>
+                    
+                    <c:if test="#{not empty subtitle}">
+                        <div class="text-500 text-xs mb-2">#{subtitle}</div>
+                    </c:if>
+                    
+                    <c:if test="#{not empty trend}">
+                        <div class="flex align-items-center">
+                            <i class="pi pi-arrow-#{trend >= 0 ? 'up' : 'down'} text-#{trend >= 0 ? 'green' : 'red'}-500 text-sm mr-2"></i>
+                            <span class="text-#{trend >= 0 ? 'green' : 'red'}-600 font-semibold text-sm mr-2">
+                                #{trend >= 0 ? '+' : ''}#{trend}%
+                            </span>
+                            <c:if test="#{not empty trendLabel}">
+                                <span class="text-500 text-xs">#{trendLabel}</span>
+                            </c:if>
+                        </div>
+                    </c:if>
+                </div>
+            </c:otherwise>
+        </c:choose>
+    </div>
+    
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/templates/components/shared/forms/user-form-field.xhtml b/src/main/resources/META-INF/resources/templates/components/shared/forms/user-form-field.xhtml
new file mode 100644
index 0000000..3a73ffc
--- /dev/null
+++ b/src/main/resources/META-INF/resources/templates/components/shared/forms/user-form-field.xhtml
@@ -0,0 +1,163 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
+
+    <!--
+        Composant réutilisable: Champ Formulaire Utilisateur (WOU/DRY Pattern)
+        
+        Auteur: Lions User Manager
+        Version: 1.0.0
+        Description: Champ de formulaire générique pour utilisateur
+        
+        Paramètres:
+        - id: String (requis) - ID du champ
+        - label: String (requis) - Label du champ
+        - value: Object (requis) - Valeur du champ
+        - type: String (défaut: "text") - Type: "text", "email", "password", "number", "textarea", "select", "checkbox", "calendar"
+        - required: Boolean (défaut: false) - Champ requis
+        - readonly: Boolean (défaut: false) - Mode lecture seule
+        - placeholder: String (optionnel) - Placeholder
+        - helpText: String (optionnel) - Texte d'aide
+        - styleClass: String (optionnel) - Classes CSS supplémentaires
+        - selectItems: List (optionnel) - Items pour select
+        - rows: Number (optionnel, défaut: 3) - Nombre de lignes pour textarea
+        
+        Exemples d'utilisation:
+        
+        1. Champ texte:
+        <ui:include src="/templates/components/shared/forms/user-form-field.xhtml">
+            <ui:param name="id" value="username" />
+            <ui:param name="label" value="Nom d'utilisateur" />
+            <ui:param name="value" value="#{user.username}" />
+            <ui:param name="required" value="true" />
+        </ui:include>
+        
+        2. Champ email:
+        <ui:include src="/templates/components/shared/forms/user-form-field.xhtml">
+            <ui:param name="id" value="email" />
+            <ui:param name="label" value="Email" />
+            <ui:param name="value" value="#{user.email}" />
+            <ui:param name="type" value="email" />
+            <ui:param name="required" value="true" />
+        </ui:include>
+        
+        3. Champ select:
+        <ui:include src="/templates/components/shared/forms/user-form-field.xhtml">
+            <ui:param name="id" value="statut" />
+            <ui:param name="label" value="Statut" />
+            <ui:param name="value" value="#{user.statut}" />
+            <ui:param name="type" value="select" />
+            <ui:param name="selectItems" value="#{userBean.statutOptions}" />
+        </ui:include>
+    -->
+    
+    <c:set var="type" value="#{empty type ? 'text' : type}" />
+    <c:set var="required" value="#{empty required ? false : required}" />
+    <c:set var="readonly" value="#{empty readonly ? false : readonly}" />
+    <c:set var="rows" value="#{empty rows ? 3 : rows}" />
+    
+    <div class="field">
+        <p:outputLabel for="#{id}" value="#{label}#{required ? ' *' : ''}" />
+        
+        <c:choose>
+            <!-- Champ texte -->
+            <c:when test="#{type == 'text' or type == 'email'}">
+                <p:inputText 
+                    id="#{id}" 
+                    value="#{value}" 
+                    required="#{required}"
+                    readonly="#{readonly}"
+                    placeholder="#{placeholder}"
+                    type="#{type == 'email' ? 'email' : 'text'}"
+                    styleClass="w-full #{styleClass}" />
+            </c:when>
+            
+            <!-- Champ mot de passe -->
+            <c:when test="#{type == 'password'}">
+                <p:password 
+                    id="#{id}" 
+                    value="#{value}" 
+                    required="#{required}"
+                    readonly="#{readonly}"
+                    placeholder="#{placeholder}"
+                    feedback="#{not empty feedback ? feedback : false}"
+                    styleClass="w-full #{styleClass}" />
+            </c:when>
+            
+            <!-- Champ nombre -->
+            <c:when test="#{type == 'number'}">
+                <p:inputNumber 
+                    id="#{id}" 
+                    value="#{value}" 
+                    required="#{required}"
+                    readonly="#{readonly}"
+                    placeholder="#{placeholder}"
+                    styleClass="w-full #{styleClass}" />
+            </c:when>
+            
+            <!-- Champ textarea -->
+            <c:when test="#{type == 'textarea'}">
+                <p:inputTextarea 
+                    id="#{id}" 
+                    value="#{value}" 
+                    required="#{required}"
+                    readonly="#{readonly}"
+                    placeholder="#{placeholder}"
+                    rows="#{rows}"
+                    styleClass="w-full #{styleClass}" />
+            </c:when>
+            
+            <!-- Champ select -->
+            <c:when test="#{type == 'select'}">
+                <p:selectOneMenu 
+                    id="#{id}" 
+                    value="#{value}" 
+                    required="#{required}"
+                    readonly="#{readonly}"
+                    styleClass="w-full #{styleClass}">
+                    <f:selectItem itemLabel="Sélectionner..." itemValue="" />
+                    <f:selectItems value="#{selectItems}" />
+                </p:selectOneMenu>
+            </c:when>
+            
+            <!-- Champ checkbox -->
+            <c:when test="#{type == 'checkbox'}">
+                <p:selectBooleanCheckbox 
+                    id="#{id}" 
+                    value="#{value}" 
+                    readonly="#{readonly}" />
+            </c:when>
+            
+            <!-- Champ calendar -->
+            <c:when test="#{type == 'calendar'}">
+                <p:calendar 
+                    id="#{id}" 
+                    value="#{value}" 
+                    required="#{required}"
+                    readonly="#{readonly}"
+                    pattern="dd/MM/yyyy"
+                    styleClass="w-full #{styleClass}" />
+            </c:when>
+            
+            <!-- Par défaut: champ texte -->
+            <c:otherwise>
+                <p:inputText 
+                    id="#{id}" 
+                    value="#{value}" 
+                    required="#{required}"
+                    readonly="#{readonly}"
+                    placeholder="#{placeholder}"
+                    styleClass="w-full #{styleClass}" />
+            </c:otherwise>
+        </c:choose>
+        
+        <c:if test="#{not empty helpText}">
+            <small class="text-color-secondary text-xs">#{helpText}</small>
+        </c:if>
+    </div>
+    
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/templates/components/shared/tables/user-data-table.xhtml b/src/main/resources/META-INF/resources/templates/components/shared/tables/user-data-table.xhtml
new file mode 100644
index 0000000..f6d7e99
--- /dev/null
+++ b/src/main/resources/META-INF/resources/templates/components/shared/tables/user-data-table.xhtml
@@ -0,0 +1,154 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
+
+    <!--
+        Composant réutilisable: Tableau Utilisateurs (WOU/DRY Pattern)
+        
+        Auteur: Lions User Manager
+        Version: 1.0.0
+        Description: Tableau de données pour afficher une liste d'utilisateurs
+        
+        Paramètres:
+        - users: List&lt;UserDTO&gt; (requis) - Liste des utilisateurs
+        - var: String (défaut: "user") - Nom de la variable pour itération
+        - tableId: String (défaut: "userTable") - ID du tableau
+        - paginator: Boolean (défaut: true) - Activer la pagination
+        - rows: Number (défaut: 20) - Nombre de lignes par page
+        - showActions: Boolean (défaut: true) - Afficher la colonne actions
+        - showRoles: Boolean (défaut: true) - Afficher la colonne rôles
+        - showEmail: Boolean (défaut: true) - Afficher la colonne email
+        - showStatus: Boolean (défaut: true) - Afficher la colonne statut
+        - showSelection: Boolean (défaut: false) - Activer la sélection
+        - selection: UserDTO (optionnel) - Utilisateur sélectionné
+        - selectionMode: String (défaut: "single") - Mode: "single" ou "multiple"
+        - update: String (optionnel) - Composants à mettre à jour
+        - styleClass: String (optionnel) - Classes CSS supplémentaires
+        
+        Exemples d'utilisation:
+        
+        1. Tableau simple:
+        <ui:include src="/templates/components/shared/tables/user-data-table.xhtml">
+            <ui:param name="users" value="#{userBean.users}" />
+        </ui:include>
+        
+        2. Tableau avec sélection:
+        <ui:include src="/templates/components/shared/tables/user-data-table.xhtml">
+            <ui:param name="users" value="#{userBean.users}" />
+            <ui:param name="showSelection" value="true" />
+            <ui:param name="selection" value="#{userBean.selectedUser}" />
+        </ui:include>
+    -->
+    
+    <c:set var="var" value="#{empty var ? 'user' : var}" />
+    <c:set var="tableId" value="#{empty tableId ? 'userTable' : tableId}" />
+    <c:set var="paginator" value="#{empty paginator ? true : paginator}" />
+    <c:set var="rows" value="#{empty rows ? 20 : rows}" />
+    <c:set var="showActions" value="#{empty showActions ? true : showActions}" />
+    <c:set var="showRoles" value="#{empty showRoles ? true : showRoles}" />
+    <c:set var="showEmail" value="#{empty showEmail ? true : showEmail}" />
+    <c:set var="showStatus" value="#{empty showStatus ? true : showStatus}" />
+    <c:set var="showSelection" value="#{empty showSelection ? false : showSelection}" />
+    <c:set var="selectionMode" value="#{empty selectionMode ? 'single' : selectionMode}" />
+    
+    <p:dataTable 
+        id="#{tableId}"
+        value="#{users}" 
+        var="#{var}"
+        paginator="#{paginator}"
+        rows="#{rows}"
+        selection="#{selection}"
+        selectionMode="#{selectionMode}"
+        styleClass="w-full #{styleClass}"
+        paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
+        rowsPerPageTemplate="10,20,50,100"
+        emptyMessage="Aucun utilisateur trouvé">
+        
+        <!-- Colonne de sélection -->
+        <c:if test="#{showSelection}">
+            <p:column selectionMode="#{selectionMode}" style="width: 3rem" />
+        </c:if>
+        
+        <!-- Colonne Username -->
+        <p:column headerText="Nom d'utilisateur" sortBy="#{var.username}" style="width: 15%">
+            <div class="flex align-items-center gap-2">
+                <p:avatar 
+                    label="#{var.firstName != null ? var.firstName.substring(0,1) : 'U'}#{var.lastName != null ? var.lastName.substring(0,1) : ''}" 
+                    styleClass="user-avatar-small" />
+                <span class="font-semibold">#{var.username}</span>
+            </div>
+        </p:column>
+        
+        <!-- Colonne Nom complet -->
+        <p:column headerText="Nom complet" sortBy="#{var.lastName}">
+            <div class="flex flex-column">
+                <span class="font-semibold">#{var.firstName} #{var.lastName}</span>
+                <c:if test="#{not empty var.fonction}">
+                    <span class="text-color-secondary text-xs">#{var.fonction}</span>
+                </c:if>
+            </div>
+        </p:column>
+        
+        <!-- Colonne Email -->
+        <c:if test="#{showEmail}">
+            <p:column headerText="Email" sortBy="#{var.email}">
+                <div class="flex align-items-center gap-2">
+                    <i class="pi pi-envelope text-color-secondary"></i>
+                    <span>#{var.email}</span>
+                    <c:if test="#{var.emailVerified}">
+                        <i class="pi pi-check-circle text-green-500" title="Email vérifié"></i>
+                    </c:if>
+                </div>
+            </p:column>
+        </c:if>
+        
+        <!-- Colonne Statut -->
+        <c:if test="#{showStatus}">
+            <p:column headerText="Statut" sortBy="#{var.statut}">
+                <div class="flex align-items-center gap-2">
+                    <p:tag 
+                        value="#{var.statut != null ? var.statut : 'INCONNU'}" 
+                        severity="#{var.enabled ? 'success' : 'danger'}" />
+                    <c:if test="#{var.enabled}">
+                        <i class="pi pi-check-circle text-green-500" title="Compte activé"></i>
+                    </c:if>
+                    <c:if test="#{not var.enabled}">
+                        <i class="pi pi-times-circle text-red-500" title="Compte désactivé"></i>
+                    </c:if>
+                </div>
+            </p:column>
+        </c:if>
+        
+        <!-- Colonne Rôles -->
+        <c:if test="#{showRoles}">
+            <p:column headerText="Rôles">
+                <div class="flex flex-wrap gap-1">
+                    <c:forEach var="role" items="#{var.realmRoles}" varStatus="status">
+                        <c:if test="#{status.index < 3}">
+                            <p:tag value="#{role}" severity="info" styleClass="text-xs" />
+                        </c:if>
+                    </c:forEach>
+                    <c:if test="#{var.realmRoles != null and var.realmRoles.size() > 3}">
+                        <p:tag value="+#{var.realmRoles.size() - 3}" severity="secondary" styleClass="text-xs" />
+                    </c:if>
+                </div>
+            </p:column>
+        </c:if>
+        
+        <!-- Colonne Actions -->
+        <c:if test="#{showActions}">
+            <p:column headerText="Actions" style="width: 150px">
+                <ui:include src="/templates/components/user-management/user-actions.xhtml">
+                    <ui:param name="user" value="#{var}" />
+                    <ui:param name="layout" value="dropdown" />
+                    <ui:param name="update" value="#{not empty update ? update : tableId}" />
+                </ui:include>
+            </p:column>
+        </c:if>
+    </p:dataTable>
+    
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/templates/components/user-management/user-actions.xhtml b/src/main/resources/META-INF/resources/templates/components/user-management/user-actions.xhtml
new file mode 100644
index 0000000..cb07a46
--- /dev/null
+++ b/src/main/resources/META-INF/resources/templates/components/user-management/user-actions.xhtml
@@ -0,0 +1,279 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
+
+    <!--
+        Composant réutilisable: Actions Utilisateur (WOU/DRY Pattern)
+        
+        Auteur: Lions User Manager
+        Version: 1.0.0
+        Description: Boutons d'action pour un utilisateur (activate, deactivate, delete, etc.)
+        
+        Paramètres:
+        - user: UserDTO (requis) - L'utilisateur concerné
+        - showView: Boolean (défaut: true) - Afficher le bouton "Voir"
+        - showEdit: Boolean (défaut: true) - Afficher le bouton "Modifier"
+        - showDelete: Boolean (défaut: true) - Afficher le bouton "Supprimer"
+        - showActivate: Boolean (défaut: true) - Afficher le bouton "Activer"
+        - showDeactivate: Boolean (défaut: true) - Afficher le bouton "Désactiver"
+        - showResetPassword: Boolean (défaut: true) - Afficher le bouton "Réinitialiser mot de passe"
+        - showLogoutSessions: Boolean (défaut: false) - Afficher le bouton "Déconnecter toutes les sessions"
+        - viewAction: String (optionnel) - Action pour "Voir"
+        - editAction: String (optionnel) - Action pour "Modifier"
+        - deleteAction: String (optionnel) - Action pour "Supprimer"
+        - activateAction: String (optionnel) - Action pour "Activer"
+        - deactivateAction: String (optionnel) - Action pour "Désactiver"
+        - resetPasswordAction: String (optionnel) - Action pour "Réinitialiser mot de passe"
+        - logoutSessionsAction: String (optionnel) - Action pour "Déconnecter sessions"
+        - viewOutcome: String (optionnel) - Page pour "Voir"
+        - editOutcome: String (optionnel) - Page pour "Modifier"
+        - update: String (défaut: "@form") - Composants à mettre à jour
+        - layout: String (défaut: "horizontal") - Layout: "horizontal" ou "vertical" ou "dropdown"
+        
+        Exemples d'utilisation:
+        
+        1. Actions horizontales (défaut):
+        <ui:include src="/templates/components/user-management/user-actions.xhtml">
+            <ui:param name="user" value="#{user}" />
+            <ui:param name="update" value="userTable" />
+        </ui:include>
+        
+        2. Actions en dropdown:
+        <ui:include src="/templates/components/user-management/user-actions.xhtml">
+            <ui:param name="user" value="#{user}" />
+            <ui:param name="layout" value="dropdown" />
+            <ui:param name="update" value="userTable" />
+        </ui:include>
+        
+        3. Actions limitées:
+        <ui:include src="/templates/components/user-management/user-actions.xhtml">
+            <ui:param name="user" value="#{user}" />
+            <ui:param name="showDelete" value="false" />
+            <ui:param name="showResetPassword" value="false" />
+        </ui:include>
+    -->
+    
+    <c:set var="update" value="#{empty update ? '@form' : update}" />
+    <c:set var="layout" value="#{empty layout ? 'horizontal' : layout}" />
+    <c:set var="showView" value="#{empty showView ? true : showView}" />
+    <c:set var="showEdit" value="#{empty showEdit ? true : showEdit}" />
+    <c:set var="showDelete" value="#{empty showDelete ? true : showDelete}" />
+    <c:set var="showActivate" value="#{empty showActivate ? true : showActivate}" />
+    <c:set var="showDeactivate" value="#{empty showDeactivate ? true : showDeactivate}" />
+    <c:set var="showResetPassword" value="#{empty showResetPassword ? true : showResetPassword}" />
+    <c:set var="showLogoutSessions" value="#{empty showLogoutSessions ? false : showLogoutSessions}" />
+    
+    <c:choose>
+        <!-- Layout Dropdown -->
+        <c:when test="#{layout == 'dropdown'}">
+            <p:commandButton 
+                icon="pi pi-ellipsis-v"
+                styleClass="p-button-text p-button-sm"
+                type="button">
+                <p:menu>
+                    <c:if test="#{showView}">
+                        <p:menuitem 
+                            value="Voir le profil"
+                            icon="pi pi-eye"
+                            outcome="#{not empty viewOutcome ? viewOutcome : '/pages/user-manager/users/profile'}">
+                            <f:param name="userId" value="#{user.id}" />
+                        </p:menuitem>
+                    </c:if>
+                    
+                    <c:if test="#{showEdit}">
+                        <p:menuitem 
+                            value="Modifier"
+                            icon="pi pi-pencil"
+                            outcome="#{not empty editOutcome ? editOutcome : '/pages/user-manager/users/edit'}">
+                            <f:param name="userId" value="#{user.id}" />
+                        </p:menuitem>
+                    </c:if>
+                    
+                    <c:if test="#{showResetPassword}">
+                        <p:menuitem 
+                            value="Réinitialiser mot de passe"
+                            icon="pi pi-key"
+                            onclick="PF('resetPasswordDialog').show()" />
+                    </c:if>
+                    
+                    <p:separator />
+                    
+                    <c:if test="#{showActivate and not user.enabled}">
+                        <p:menuitem 
+                            value="Activer"
+                            icon="pi pi-check"
+                            styleClass="text-green-600"
+                            action="#{not empty activateAction ? activateAction : userBean.activateUser(user.id)}"
+                            update="#{update}" />
+                    </c:if>
+                    
+                    <c:if test="#{showDeactivate and user.enabled}">
+                        <p:menuitem 
+                            value="Désactiver"
+                            icon="pi pi-times"
+                            styleClass="text-orange-600"
+                            action="#{not empty deactivateAction ? deactivateAction : userBean.deactivateUser(user.id)}"
+                            update="#{update}" />
+                    </c:if>
+                    
+                    <c:if test="#{showLogoutSessions}">
+                        <p:menuitem 
+                            value="Déconnecter toutes les sessions"
+                            icon="pi pi-sign-out"
+                            styleClass="text-blue-600"
+                            action="#{not empty logoutSessionsAction ? logoutSessionsAction : userBean.logoutAllSessions(user.id)}"
+                            update="#{update}" />
+                    </c:if>
+                    
+                    <c:if test="#{showDelete}">
+                        <p:separator />
+                        <p:menuitem 
+                            value="Supprimer"
+                            icon="pi pi-trash"
+                            styleClass="text-red-600"
+                            onclick="PF('confirmDeleteDialog').show()" />
+                    </c:if>
+                </p:menu>
+            </p:commandButton>
+        </c:when>
+        
+        <!-- Layout Horizontal (défaut) -->
+        <c:otherwise>
+            <div class="flex gap-1">
+                <c:if test="#{showView}">
+                    <p:commandButton 
+                        icon="pi pi-eye"
+                        title="Voir le profil"
+                        styleClass="p-button-text p-button-sm p-button-info"
+                        outcome="#{not empty viewOutcome ? viewOutcome : '/pages/user-manager/users/profile'}">
+                        <f:param name="userId" value="#{user.id}" />
+                    </p:commandButton>
+                </c:if>
+                
+                <c:if test="#{showEdit}">
+                    <p:commandButton 
+                        icon="pi pi-pencil"
+                        title="Modifier"
+                        styleClass="p-button-text p-button-sm p-button-warning"
+                        outcome="#{not empty editOutcome ? editOutcome : '/pages/user-manager/users/edit'}">
+                        <f:param name="userId" value="#{user.id}" />
+                    </p:commandButton>
+                </c:if>
+                
+                <c:if test="#{showResetPassword}">
+                    <p:commandButton 
+                        icon="pi pi-key"
+                        title="Réinitialiser mot de passe"
+                        styleClass="p-button-text p-button-sm p-button-help"
+                        onclick="PF('resetPasswordDialog').show()" />
+                </c:if>
+                
+                <c:if test="#{showActivate and not user.enabled}">
+                    <p:commandButton 
+                        icon="pi pi-check"
+                        title="Activer"
+                        styleClass="p-button-text p-button-sm p-button-success"
+                        action="#{not empty activateAction ? activateAction : userBean.activateUser(user.id)}"
+                        update="#{update}" />
+                </c:if>
+                
+                <c:if test="#{showDeactivate and user.enabled}">
+                    <p:commandButton 
+                        icon="pi pi-times"
+                        title="Désactiver"
+                        styleClass="p-button-text p-button-sm p-button-warning"
+                        action="#{not empty deactivateAction ? deactivateAction : userBean.deactivateUser(user.id)}"
+                        update="#{update}" />
+                </c:if>
+                
+                <c:if test="#{showLogoutSessions}">
+                    <p:commandButton 
+                        icon="pi pi-sign-out"
+                        title="Déconnecter toutes les sessions"
+                        styleClass="p-button-text p-button-sm p-button-info"
+                        action="#{not empty logoutSessionsAction ? logoutSessionsAction : userBean.logoutAllSessions(user.id)}"
+                        update="#{update}" />
+                </c:if>
+                
+                <c:if test="#{showDelete}">
+                    <p:commandButton 
+                        icon="pi pi-trash"
+                        title="Supprimer"
+                        styleClass="p-button-text p-button-sm p-button-danger"
+                        onclick="PF('confirmDeleteDialog').show()" />
+                </c:if>
+            </div>
+        </c:otherwise>
+    </c:choose>
+    
+    <!-- Dialog de confirmation de suppression -->
+    <p:confirmDialog 
+        id="confirmDeleteDialog"
+        widgetVar="confirmDeleteDialog"
+        message="Êtes-vous sûr de vouloir supprimer l'utilisateur #{user.username} ?"
+        header="Confirmation de suppression"
+        severity="warn">
+        <p:commandButton 
+            value="Oui"
+            icon="pi pi-check"
+            styleClass="p-button-danger"
+            action="#{not empty deleteAction ? deleteAction : userBean.deleteUser(user.id)}"
+            update="#{update}"
+            oncomplete="PF('confirmDeleteDialog').hide()" />
+        <p:commandButton 
+            value="Non"
+            icon="pi pi-times"
+            styleClass="p-button-secondary"
+            onclick="PF('confirmDeleteDialog').hide()" />
+    </p:confirmDialog>
+    
+    <!-- Dialog de réinitialisation de mot de passe -->
+    <p:dialog 
+        id="resetPasswordDialog"
+        widgetVar="resetPasswordDialog"
+        header="Réinitialiser le mot de passe"
+        modal="true"
+        styleClass="w-full md:w-4">
+        <h:form>
+            <p:panelGrid columns="2" styleClass="w-full">
+                <p:outputLabel for="newPassword" value="Nouveau mot de passe *" />
+                <p:password id="newPassword" 
+                          value="#{userBean.newPassword}" 
+                          feedback="true"
+                          required="true"
+                          styleClass="w-full">
+                    <f:validateLength minimum="8" maximum="100" />
+                </p:password>
+                
+                <p:outputLabel for="newPasswordConfirm" value="Confirmer *" />
+                <p:password id="newPasswordConfirm" 
+                          value="#{userBean.newPasswordConfirm}" 
+                          required="true"
+                          styleClass="w-full" />
+            </p:panelGrid>
+            
+            <f:facet name="footer">
+                <div class="flex gap-2 justify-content-end">
+                    <p:commandButton 
+                        value="Réinitialiser"
+                        icon="pi pi-check"
+                        styleClass="p-button-primary"
+                        action="#{not empty resetPasswordAction ? resetPasswordAction : userBean.resetPassword(user.id)}"
+                        update="#{update}"
+                        oncomplete="PF('resetPasswordDialog').hide()"
+                        process="@form" />
+                    <p:commandButton 
+                        value="Annuler"
+                        icon="pi pi-times"
+                        styleClass="p-button-secondary"
+                        onclick="PF('resetPasswordDialog').hide()" />
+                </div>
+            </f:facet>
+        </h:form>
+    </p:dialog>
+    
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/templates/components/user-management/user-card.xhtml b/src/main/resources/META-INF/resources/templates/components/user-management/user-card.xhtml
new file mode 100644
index 0000000..4ea7a8a
--- /dev/null
+++ b/src/main/resources/META-INF/resources/templates/components/user-management/user-card.xhtml
@@ -0,0 +1,130 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
+
+    <!--
+        Composant réutilisable: Carte Utilisateur (WOU/DRY Pattern)
+        
+        Auteur: Lions User Manager
+        Version: 1.0.0
+        Description: Affiche une carte utilisateur avec informations principales et actions
+        
+        Paramètres:
+        - user: UserDTO (requis) - L'utilisateur à afficher
+        - showActions: Boolean (défaut: true) - Afficher les boutons d'action
+        - showRoles: Boolean (défaut: true) - Afficher les rôles de l'utilisateur
+        - clickable: Boolean (défaut: true) - Rendre la carte cliquable
+        - outcome: String (optionnel) - Page de destination au clic
+        - styleClass: String (optionnel) - Classes CSS supplémentaires
+        
+        Exemples d'utilisation:
+        
+        1. Carte simple:
+        <ui:include src="/templates/components/user-management/user-card.xhtml">
+            <ui:param name="user" value="#{userBean.selectedUser}" />
+        </ui:include>
+        
+        2. Carte avec actions:
+        <ui:include src="/templates/components/user-management/user-card.xhtml">
+            <ui:param name="user" value="#{userBean.selectedUser}" />
+            <ui:param name="showActions" value="true" />
+            <ui:param name="outcome" value="/pages/user-manager/users/profile" />
+        </ui:include>
+        
+        3. Carte sans rôles:
+        <ui:include src="/templates/components/user-management/user-card.xhtml">
+            <ui:param name="user" value="#{userBean.selectedUser}" />
+            <ui:param name="showRoles" value="false" />
+        </ui:include>
+    -->
+    
+    <c:set var="showActions" value="#{empty showActions ? true : showActions}" />
+    <c:set var="showRoles" value="#{empty showRoles ? true : showRoles}" />
+    <c:set var="clickable" value="#{empty clickable ? true : clickable}" />
+    
+    <p:card styleClass="user-card #{styleClass}" rendered="#{not empty user}">
+        <f:facet name="header">
+            <div class="flex align-items-center gap-2">
+                <p:avatar 
+                    label="#{user.firstName != null ? user.firstName.substring(0,1) : 'U'}#{user.lastName != null ? user.lastName.substring(0,1) : ''}" 
+                    styleClass="user-avatar"
+                    size="large" />
+                <div class="flex flex-column">
+                    <h3 class="m-0">#{user.firstName} #{user.lastName}</h3>
+                    <span class="text-color-secondary text-sm">@#{user.username}</span>
+                </div>
+            </div>
+        </f:facet>
+        
+        <div class="user-card-content">
+            <!-- Informations principales -->
+            <div class="flex flex-column gap-2 mb-3">
+                <div class="flex align-items-center gap-2">
+                    <i class="pi pi-envelope text-color-secondary"></i>
+                    <span>#{user.email}</span>
+                </div>
+                
+                <c:if test="#{not empty user.telephone}">
+                    <div class="flex align-items-center gap-2">
+                        <i class="pi pi-phone text-color-secondary"></i>
+                        <span>#{user.telephone}</span>
+                    </div>
+                </c:if>
+                
+                <!-- Statut -->
+                <div class="flex align-items-center gap-2">
+                    <i class="pi pi-circle-fill text-color-secondary"></i>
+                    <p:tag 
+                        value="#{user.statut != null ? user.statut : 'INCONNU'}" 
+                        severity="#{user.enabled ? 'success' : 'danger'}" />
+                </div>
+            </div>
+            
+            <!-- Rôles -->
+            <c:if test="#{showRoles and not empty user.roles}">
+                <div class="flex flex-column gap-2 mb-3">
+                    <h5 class="m-0">Rôles</h5>
+                    <div class="flex flex-wrap gap-1">
+                        <c:forEach var="role" items="#{user.roles}">
+                            <p:tag value="#{role.name}" severity="info" />
+                        </c:forEach>
+                    </div>
+                </div>
+            </c:if>
+        </div>
+        
+        <f:facet name="footer">
+            <c:if test="#{showActions}">
+                <div class="flex gap-2 justify-content-end">
+                    <p:commandButton 
+                        icon="pi pi-eye" 
+                        title="Voir le profil"
+                        styleClass="p-button-text p-button-sm"
+                        outcome="#{not empty outcome ? outcome : '/pages/user-manager/users/profile'}"
+                        rendered="#{clickable}">
+                        <f:param name="userId" value="#{user.id}" />
+                    </p:commandButton>
+                    
+                    <p:commandButton 
+                        icon="pi pi-pencil" 
+                        title="Modifier"
+                        styleClass="p-button-text p-button-sm p-button-warning"
+                        outcome="/pages/user-manager/users/edit">
+                        <f:param name="userId" value="#{user.id}" />
+                    </p:commandButton>
+                    
+                    <p:commandButton 
+                        icon="pi pi-trash" 
+                        title="Supprimer"
+                        styleClass="p-button-text p-button-sm p-button-danger"
+                        onclick="PF('confirmDeleteDialog').show()" />
+                </div>
+            </c:if>
+        </f:facet>
+    </p:card>
+    
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/templates/components/user-management/user-form.xhtml b/src/main/resources/META-INF/resources/templates/components/user-management/user-form.xhtml
new file mode 100644
index 0000000..42281a7
--- /dev/null
+++ b/src/main/resources/META-INF/resources/templates/components/user-management/user-form.xhtml
@@ -0,0 +1,242 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
+
+    <!--
+        Composant réutilisable: Formulaire Utilisateur (WOU/DRY Pattern)
+        
+        Auteur: Lions User Manager
+        Version: 1.0.0
+        Description: Formulaire complet pour créer/modifier un utilisateur
+        
+        Paramètres:
+        - user: UserDTO (requis) - L'utilisateur à éditer (peut être null pour création)
+        - formId: String (défaut: "userForm") - ID du formulaire
+        - mode: String (défaut: "create") - Mode: "create" ou "edit"
+        - showRealmSelector: Boolean (défaut: false) - Afficher le sélecteur de realm
+        - showPasswordFields: Boolean (défaut: true) - Afficher les champs mot de passe
+        - readonly: Boolean (défaut: false) - Mode lecture seule
+        - submitAction: String (optionnel) - Action à exécuter à la soumission
+        - submitOutcome: String (optionnel) - Page de redirection après soumission
+        - update: String (optionnel) - Composants à mettre à jour après soumission
+        
+        Exemples d'utilisation:
+        
+        1. Formulaire de création:
+        <ui:include src="/templates/components/user-management/user-form.xhtml">
+            <ui:param name="user" value="#{userBean.newUser}" />
+            <ui:param name="mode" value="create" />
+            <ui:param name="submitAction" value="#{userBean.createUser}" />
+        </ui:include>
+        
+        2. Formulaire d'édition:
+        <ui:include src="/templates/components/user-management/user-form.xhtml">
+            <ui:param name="user" value="#{userBean.selectedUser}" />
+            <ui:param name="mode" value="edit" />
+            <ui:param name="showPasswordFields" value="false" />
+            <ui:param name="submitAction" value="#{userBean.updateUser}" />
+        </ui:include>
+        
+        3. Formulaire en lecture seule:
+        <ui:include src="/templates/components/user-management/user-form.xhtml">
+            <ui:param name="user" value="#{userBean.selectedUser}" />
+            <ui:param name="readonly" value="true" />
+        </ui:include>
+    -->
+    
+    <c:set var="formId" value="#{empty formId ? 'userForm' : formId}" />
+    <c:set var="mode" value="#{empty mode ? 'create' : mode}" />
+    <c:set var="showRealmSelector" value="#{empty showRealmSelector ? false : showRealmSelector}" />
+    <c:set var="showPasswordFields" value="#{empty showPasswordFields ? true : showPasswordFields}" />
+    <c:set var="readonly" value="#{empty readonly ? false : readonly}" />
+    
+    <h:form id="#{formId}">
+        <p:panel header="#{mode == 'create' ? 'Nouvel Utilisateur' : 'Modifier Utilisateur'}" 
+                 styleClass="w-full">
+            
+            <!-- Informations de base -->
+            <p:panelGrid columns="2" styleClass="w-full" columnClasses="col-12 md:col-6">
+                
+                <!-- Username -->
+                <p:outputLabel for="username" value="Nom d'utilisateur *" />
+                <p:inputText id="username" 
+                           value="#{user.username}" 
+                           required="true"
+                           readonly="#{readonly or mode == 'edit'}"
+                           placeholder="jdupont"
+                           styleClass="w-full">
+                    <f:validateLength minimum="3" maximum="100" />
+                    <f:validateRegex pattern="^[a-zA-Z0-9._-]+$" />
+                </p:inputText>
+                
+                <!-- Email -->
+                <p:outputLabel for="email" value="Email *" />
+                <p:inputText id="email" 
+                           value="#{user.email}" 
+                           required="true"
+                           readonly="#{readonly}"
+                           placeholder="jean.dupont@lions.dev"
+                           styleClass="w-full">
+                    <f:validateLength minimum="5" maximum="255" />
+                </p:inputText>
+                
+                <!-- Prénom -->
+                <p:outputLabel for="prenom" value="Prénom *" />
+                <p:inputText id="prenom" 
+                           value="#{user.prenom}" 
+                           required="true"
+                           readonly="#{readonly}"
+                           placeholder="Jean"
+                           styleClass="w-full">
+                    <f:validateLength minimum="2" maximum="100" />
+                </p:inputText>
+                
+                <!-- Nom -->
+                <p:outputLabel for="nom" value="Nom *" />
+                <p:inputText id="nom" 
+                           value="#{user.nom}" 
+                           required="true"
+                           readonly="#{readonly}"
+                           placeholder="Dupont"
+                           styleClass="w-full">
+                    <f:validateLength minimum="2" maximum="100" />
+                </p:inputText>
+                
+                <!-- Téléphone -->
+                <p:outputLabel for="telephone" value="Téléphone" />
+                <p:inputText id="telephone" 
+                           value="#{user.telephone}" 
+                           readonly="#{readonly}"
+                           placeholder="+225 07 12 34 56 78"
+                           styleClass="w-full" />
+                
+                <!-- Organisation -->
+                <p:outputLabel for="organisation" value="Organisation" />
+                <p:inputText id="organisation" 
+                           value="#{user.organisation}" 
+                           readonly="#{readonly}"
+                           placeholder="Lions Dev"
+                           styleClass="w-full" />
+                
+                <!-- Département -->
+                <p:outputLabel for="departement" value="Département" />
+                <p:inputText id="departement" 
+                           value="#{user.departement}" 
+                           readonly="#{readonly}"
+                           placeholder="IT"
+                           styleClass="w-full" />
+                
+                <!-- Fonction -->
+                <p:outputLabel for="fonction" value="Fonction" />
+                <p:inputText id="fonction" 
+                           value="#{user.fonction}" 
+                           readonly="#{readonly}"
+                           placeholder="Développeur Senior"
+                           styleClass="w-full" />
+                
+                <!-- Ville -->
+                <p:outputLabel for="ville" value="Ville" />
+                <p:inputText id="ville" 
+                           value="#{user.ville}" 
+                           readonly="#{readonly}"
+                           placeholder="Abidjan"
+                           styleClass="w-full" />
+                
+                <!-- Pays -->
+                <p:outputLabel for="pays" value="Pays" />
+                <p:inputText id="pays" 
+                           value="#{user.pays}" 
+                           readonly="#{readonly}"
+                           placeholder="Côte d'Ivoire"
+                           styleClass="w-full" />
+                
+                <!-- Statut -->
+                <p:outputLabel for="statut" value="Statut" />
+                <p:selectOneMenu id="statut" 
+                               value="#{user.statut}" 
+                               readonly="#{readonly}"
+                               styleClass="w-full">
+                    <f:selectItem itemLabel="Sélectionner..." itemValue="" />
+                    <f:selectItems value="#{userBean.statutOptions}" />
+                </p:selectOneMenu>
+                
+                <!-- Enabled -->
+                <p:outputLabel for="enabled" value="Compte activé" />
+                <p:selectBooleanCheckbox id="enabled" 
+                                        value="#{user.enabled}" 
+                                        readonly="#{readonly}" />
+                
+                <!-- Email vérifié -->
+                <p:outputLabel for="emailVerified" value="Email vérifié" />
+                <p:selectBooleanCheckbox id="emailVerified" 
+                                        value="#{user.emailVerified}" 
+                                        readonly="#{readonly}" />
+                
+                <!-- Realm (si affiché) -->
+                <c:if test="#{showRealmSelector}">
+                    <p:outputLabel for="realmName" value="Realm *" />
+                    <p:selectOneMenu id="realmName" 
+                                   value="#{user.realmName}" 
+                                   required="#{showRealmSelector}"
+                                   readonly="#{readonly}"
+                                   styleClass="w-full">
+                        <f:selectItem itemLabel="Sélectionner..." itemValue="" />
+                        <f:selectItems value="#{userBean.availableRealms}" />
+                    </p:selectOneMenu>
+                </c:if>
+                
+            </p:panelGrid>
+            
+            <!-- Champs mot de passe (si affichés) -->
+            <c:if test="#{showPasswordFields and mode == 'create'}">
+                <p:separator />
+                <h3>Mot de passe</h3>
+                <p:panelGrid columns="2" styleClass="w-full" columnClasses="col-12 md:col-6">
+                    <p:outputLabel for="password" value="Mot de passe *" />
+                    <p:password id="password" 
+                              value="#{userBean.password}" 
+                              required="true"
+                              feedback="true"
+                              placeholder="Minimum 8 caractères"
+                              styleClass="w-full">
+                        <f:validateLength minimum="8" maximum="100" />
+                    </p:password>
+                    
+                    <p:outputLabel for="passwordConfirm" value="Confirmer le mot de passe *" />
+                    <p:password id="passwordConfirm" 
+                              value="#{userBean.passwordConfirm}" 
+                              required="true"
+                              placeholder="Répétez le mot de passe"
+                              styleClass="w-full" />
+                </p:panelGrid>
+            </c:if>
+            
+            <!-- Boutons d'action -->
+            <f:facet name="footer">
+                <div class="flex gap-2 justify-content-end">
+                    <c:if test="#{not readonly}">
+                        <p:commandButton 
+                            value="#{mode == 'create' ? 'Créer' : 'Modifier'}"
+                            icon="pi pi-check"
+                            styleClass="p-button-success"
+                            action="#{not empty submitAction ? submitAction : null}"
+                            outcome="#{not empty submitOutcome ? submitOutcome : null}"
+                            update="#{not empty update ? update : '@form'}"
+                            process="@form" />
+                    </c:if>
+                    <p:commandButton 
+                        value="Annuler"
+                        icon="pi pi-times"
+                        styleClass="p-button-secondary"
+                        outcome="#{not empty cancelOutcome ? cancelOutcome : '/pages/user-manager/users/list'}"
+                        immediate="true" />
+                </div>
+            </f:facet>
+        </p:panel>
+    </h:form>
+    
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/templates/components/user-management/user-role-badge.xhtml b/src/main/resources/META-INF/resources/templates/components/user-management/user-role-badge.xhtml
new file mode 100644
index 0000000..3076b48
--- /dev/null
+++ b/src/main/resources/META-INF/resources/templates/components/user-management/user-role-badge.xhtml
@@ -0,0 +1,105 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
+
+    <!--
+        Composant réutilisable: Badge de Rôle Utilisateur (WOU/DRY Pattern)
+        
+        Auteur: Lions User Manager
+        Version: 1.0.0
+        Description: Affiche un badge pour un rôle utilisateur avec icône et couleur
+        
+        Paramètres:
+        - roleName: String (requis) - Nom du rôle
+        - roleType: String (optionnel) - Type de rôle: "REALM_ROLE", "CLIENT_ROLE", "COMPOSITE_ROLE"
+        - severity: String (optionnel) - Severity PrimeFaces: "success", "info", "warning", "danger" (défaut: "info")
+        - showIcon: Boolean (défaut: true) - Afficher l'icône
+        - icon: String (optionnel) - Classe d'icône PrimeIcons (défaut: "pi-shield")
+        - size: String (optionnel) - Taille: "small", "normal", "large" (défaut: "normal")
+        - clickable: Boolean (défaut: false) - Rendre le badge cliquable
+        - clickAction: String (optionnel) - Action au clic
+        - styleClass: String (optionnel) - Classes CSS supplémentaires
+        
+        Exemples d'utilisation:
+        
+        1. Badge simple:
+        <ui:include src="/templates/components/user-management/user-role-badge.xhtml">
+            <ui:param name="roleName" value="ADMIN" />
+        </ui:include>
+        
+        2. Badge avec type:
+        <ui:include src="/templates/components/user-management/user-role-badge.xhtml">
+            <ui:param name="roleName" value="USER" />
+            <ui:param name="roleType" value="REALM_ROLE" />
+            <ui:param name="severity" value="success" />
+        </ui:include>
+        
+        3. Badge cliquable:
+        <ui:include src="/templates/components/user-management/user-role-badge.xhtml">
+            <ui:param name="roleName" value="MODERATOR" />
+            <ui:param name="clickable" value="true" />
+            <ui:param name="clickAction" value="#{roleBean.viewRole(roleName)}" />
+        </ui:include>
+    -->
+    
+    <c:set var="showIcon" value="#{empty showIcon ? true : showIcon}" />
+    <c:set var="size" value="#{empty size ? 'normal' : size}" />
+    <c:set var="clickable" value="#{empty clickable ? false : clickable}" />
+    <c:set var="severity" value="#{empty severity ? 'info' : severity}" />
+    <c:set var="icon" value="#{empty icon ? 'pi-shield' : icon}" />
+    
+    <!-- Déterminer la severity selon le type de rôle -->
+    <c:choose>
+        <c:when test="#{roleType == 'REALM_ROLE'}">
+            <c:set var="severity" value="success" />
+        </c:when>
+        <c:when test="#{roleType == 'CLIENT_ROLE'}">
+            <c:set var="severity" value="info" />
+        </c:when>
+        <c:when test="#{roleType == 'COMPOSITE_ROLE'}">
+            <c:set var="severity" value="warning" />
+        </c:when>
+    </c:choose>
+    
+    <!-- Déterminer la taille -->
+    <c:choose>
+        <c:when test="#{size == 'small'}">
+            <c:set var="tagStyleClass" value="text-xs" />
+        </c:when>
+        <c:when test="#{size == 'large'}">
+            <c:set var="tagStyleClass" value="text-base" />
+        </c:when>
+        <c:otherwise>
+            <c:set var="tagStyleClass" value="text-sm" />
+        </c:otherwise>
+    </c:choose>
+    
+    <c:choose>
+        <!-- Badge cliquable -->
+        <c:when test="#{clickable}">
+            <p:commandLink 
+                styleClass="role-badge-link"
+                action="#{not empty clickAction ? clickAction : null}">
+                <p:tag 
+                    value="#{roleName}" 
+                    severity="#{severity}"
+                    icon="#{showIcon ? icon : ''}"
+                    styleClass="#{tagStyleClass} #{styleClass}" />
+            </p:commandLink>
+        </c:when>
+        
+        <!-- Badge simple -->
+        <c:otherwise>
+            <p:tag 
+                value="#{roleName}" 
+                severity="#{severity}"
+                icon="#{showIcon ? icon : ''}"
+                styleClass="#{tagStyleClass} #{styleClass}" />
+        </c:otherwise>
+    </c:choose>
+    
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/templates/components/user-management/user-search-bar.xhtml b/src/main/resources/META-INF/resources/templates/components/user-management/user-search-bar.xhtml
new file mode 100644
index 0000000..6a327d5
--- /dev/null
+++ b/src/main/resources/META-INF/resources/templates/components/user-management/user-search-bar.xhtml
@@ -0,0 +1,225 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:h="http://xmlns.jcp.org/jsf/html"
+                xmlns:f="http://xmlns.jcp.org/jsf/core"
+                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+                xmlns:p="http://primefaces.org/ui"
+                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
+
+    <!--
+        Composant réutilisable: Barre de Recherche Utilisateur (WOU/DRY Pattern)
+        
+        Auteur: Lions User Manager
+        Version: 1.0.0
+        Description: Barre de recherche avancée pour utilisateurs
+        
+        Paramètres:
+        - searchCriteria: UserSearchCriteriaDTO (requis) - Critères de recherche
+        - searchAction: String (requis) - Action à exécuter lors de la recherche
+        - update: String (défaut: "@form") - Composants à mettre à jour
+        - showAdvanced: Boolean (défaut: false) - Afficher les options avancées
+        - showRealmFilter: Boolean (défaut: true) - Afficher le filtre realm
+        - showStatusFilter: Boolean (défaut: true) - Afficher le filtre statut
+        - showRoleFilter: Boolean (défaut: true) - Afficher le filtre rôle
+        - formId: String (défaut: "searchForm") - ID du formulaire
+        
+        Exemples d'utilisation:
+        
+        1. Recherche simple:
+        <ui:include src="/templates/components/user-management/user-search-bar.xhtml">
+            <ui:param name="searchCriteria" value="#{userBean.searchCriteria}" />
+            <ui:param name="searchAction" value="#{userBean.search}" />
+            <ui:param name="update" value="userTable" />
+        </ui:include>
+        
+        2. Recherche avec options avancées:
+        <ui:include src="/templates/components/user-management/user-search-bar.xhtml">
+            <ui:param name="searchCriteria" value="#{userBean.searchCriteria}" />
+            <ui:param name="searchAction" value="#{userBean.search}" />
+            <ui:param name="showAdvanced" value="true" />
+            <ui:param name="update" value="userTable" />
+        </ui:include>
+    -->
+    
+    <c:set var="formId" value="#{empty formId ? 'searchForm' : formId}" />
+    <c:set var="update" value="#{empty update ? '@form' : update}" />
+    <c:set var="showAdvanced" value="#{empty showAdvanced ? false : showAdvanced}" />
+    <c:set var="showRealmFilter" value="#{empty showRealmFilter ? true : showRealmFilter}" />
+    <c:set var="showStatusFilter" value="#{empty showStatusFilter ? true : showStatusFilter}" />
+    <c:set var="showRoleFilter" value="#{empty showRoleFilter ? true : showRoleFilter}" />
+    
+    <h:form id="#{formId}">
+        <p:panel styleClass="w-full mb-3">
+            <f:facet name="header">
+                <div class="flex align-items-center justify-content-between">
+                    <span>Recherche d'utilisateurs</span>
+                    <p:commandButton 
+                        icon="pi pi-filter"
+                        styleClass="p-button-text p-button-sm"
+                        onclick="PF('advancedSearchDialog').toggle()"
+                        rendered="#{showAdvanced}"
+                        title="Options avancées" />
+                </div>
+            </f:facet>
+            
+            <!-- Recherche rapide -->
+            <div class="flex gap-2 align-items-end">
+                <div class="flex-1">
+                    <p:outputLabel for="searchText" value="Rechercher" />
+                    <p:inputText id="searchText" 
+                               value="#{searchCriteria.searchText}" 
+                               placeholder="Nom, prénom, email, username..."
+                               styleClass="w-full">
+                        <p:ajax event="keyup" 
+                              delay="500"
+                              listener="#{searchAction}"
+                              update="#{update}" />
+                    </p:inputText>
+                </div>
+                
+                <!-- Filtre Realm -->
+                <c:if test="#{showRealmFilter}">
+                    <div style="width: 200px;">
+                        <p:outputLabel for="realmFilter" value="Realm" />
+                        <p:selectOneMenu id="realmFilter" 
+                                       value="#{searchCriteria.realmName}" 
+                                       styleClass="w-full">
+                            <f:selectItem itemLabel="Tous les realms" itemValue="" />
+                            <f:selectItems value="#{userBean.availableRealms}" />
+                        </p:selectOneMenu>
+                    </div>
+                </c:if>
+                
+                <!-- Filtre Statut -->
+                <c:if test="#{showStatusFilter}">
+                    <div style="width: 180px;">
+                        <p:outputLabel for="statusFilter" value="Statut" />
+                        <p:selectOneMenu id="statusFilter" 
+                                       value="#{searchCriteria.statut}" 
+                                       styleClass="w-full">
+                            <f:selectItem itemLabel="Tous les statuts" itemValue="" />
+                            <f:selectItems value="#{userBean.statutOptions}" />
+                        </p:selectOneMenu>
+                    </div>
+                </c:if>
+                
+                <!-- Bouton Rechercher -->
+                <div>
+                    <p:commandButton 
+                        value="Rechercher"
+                        icon="pi pi-search"
+                        styleClass="p-button-primary"
+                        action="#{searchAction}"
+                        update="#{update}"
+                        process="@form" />
+                </div>
+                
+                <!-- Bouton Réinitialiser -->
+                <div>
+                    <p:commandButton 
+                        value="Réinitialiser"
+                        icon="pi pi-refresh"
+                        styleClass="p-button-secondary"
+                        action="#{userBean.resetSearch}"
+                        update="#{update}"
+                        process="@form" />
+                </div>
+            </div>
+        </p:panel>
+        
+        <!-- Options avancées (Dialog) -->
+        <c:if test="#{showAdvanced}">
+            <p:dialog id="advancedSearchDialog" 
+                    header="Options de recherche avancées" 
+                    widgetVar="advancedSearchDialog"
+                    modal="true"
+                    resizable="false"
+                    styleClass="w-full md:w-6">
+                
+                <p:panelGrid columns="2" styleClass="w-full" columnClasses="col-12 md:col-6">
+                    <!-- Email -->
+                    <p:outputLabel for="emailFilter" value="Email" />
+                    <p:inputText id="emailFilter" 
+                               value="#{searchCriteria.email}" 
+                               placeholder="email@example.com"
+                               styleClass="w-full" />
+                    
+                    <!-- Téléphone -->
+                    <p:outputLabel for="phoneFilter" value="Téléphone" />
+                    <p:inputText id="phoneFilter" 
+                               value="#{searchCriteria.telephone}" 
+                               placeholder="+225 07 12 34 56 78"
+                               styleClass="w-full" />
+                    
+                    <!-- Organisation -->
+                    <p:outputLabel for="orgFilter" value="Organisation" />
+                    <p:inputText id="orgFilter" 
+                               value="#{searchCriteria.organisation}" 
+                               placeholder="Nom de l'organisation"
+                               styleClass="w-full" />
+                    
+                    <!-- Ville -->
+                    <p:outputLabel for="cityFilter" value="Ville" />
+                    <p:inputText id="cityFilter" 
+                               value="#{searchCriteria.ville}" 
+                               placeholder="Nom de la ville"
+                               styleClass="w-full" />
+                    
+                    <!-- Rôle (si affiché) -->
+                    <c:if test="#{showRoleFilter}">
+                        <p:outputLabel for="roleFilter" value="Rôle" />
+                        <p:selectOneMenu id="roleFilter" 
+                                       value="#{searchCriteria.roleName}" 
+                                       styleClass="w-full">
+                            <f:selectItem itemLabel="Tous les rôles" itemValue="" />
+                            <f:selectItems value="#{userBean.availableRoles}" />
+                        </p:selectOneMenu>
+                    </c:if>
+                    
+                    <!-- Date de création (début) -->
+                    <p:outputLabel for="dateDebut" value="Date de création (début)" />
+                    <p:calendar id="dateDebut" 
+                              value="#{searchCriteria.dateCreationDebut}" 
+                              pattern="dd/MM/yyyy"
+                              styleClass="w-full" />
+                    
+                    <!-- Date de création (fin) -->
+                    <p:outputLabel for="dateFin" value="Date de création (fin)" />
+                    <p:calendar id="dateFin" 
+                              value="#{searchCriteria.dateCreationFin}" 
+                              pattern="dd/MM/yyyy"
+                              styleClass="w-full" />
+                    
+                    <!-- Enabled -->
+                    <p:outputLabel for="enabledFilter" value="Compte activé" />
+                    <p:selectOneMenu id="enabledFilter" 
+                                   value="#{searchCriteria.enabled}" 
+                                   styleClass="w-full">
+                        <f:selectItem itemLabel="Tous" itemValue="" />
+                        <f:selectItem itemLabel="Activé" itemValue="true" />
+                        <f:selectItem itemLabel="Désactivé" itemValue="false" />
+                    </p:selectOneMenu>
+                </p:panelGrid>
+                
+                <f:facet name="footer">
+                    <div class="flex gap-2 justify-content-end">
+                        <p:commandButton 
+                            value="Appliquer"
+                            icon="pi pi-check"
+                            styleClass="p-button-primary"
+                            action="#{searchAction}"
+                            update="#{update}"
+                            onclick="PF('advancedSearchDialog').hide()"
+                            process="@form" />
+                        <p:commandButton 
+                            value="Annuler"
+                            icon="pi pi-times"
+                            styleClass="p-button-secondary"
+                            onclick="PF('advancedSearchDialog').hide()" />
+                    </div>
+                </f:facet>
+            </p:dialog>
+        </c:if>
+    </h:form>
+    
+</ui:composition>
+
diff --git a/src/main/resources/META-INF/resources/templates/main-template.xhtml b/src/main/resources/META-INF/resources/templates/main-template.xhtml
new file mode 100644
index 0000000..64b6aef
--- /dev/null
+++ b/src/main/resources/META-INF/resources/templates/main-template.xhtml
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:h="http://xmlns.jcp.org/jsf/html"
+      xmlns:f="http://xmlns.jcp.org/jsf/core"
+      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+      xmlns:p="http://primefaces.org/ui"
+      xmlns:fr="http://primefaces.org/freya">
+
+<h:head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><ui:insert name="title">Lions User Manager</ui:insert></title>
+    
+    <!-- PrimeFaces Freya Theme -->
+    <h:outputStylesheet name="primefaces-freya/theme.css" />
+</h:head>
+
+<h:body styleClass="freya-layout-wrapper">
+    
+    <!-- Layout Principal Freya -->
+    <div class="freya-layout">
+        
+        <!-- Topbar -->
+        <ui:include src="/templates/components/layout/topbar.xhtml" />
+        
+        <!-- Menu Sidebar -->
+        <ui:include src="/templates/components/layout/menu.xhtml" />
+        
+        <!-- Contenu Principal -->
+        <div class="freya-main-content">
+            <div class="freya-content-wrapper">
+                
+                <!-- Messages -->
+                <p:messages id="messages" showDetail="true" closable="true" />
+                
+                <!-- Contenu de la page -->
+                <ui:insert name="content">
+                    <!-- Le contenu de chaque page sera inséré ici -->
+                </ui:insert>
+                
+            </div>
+            
+            <!-- Footer -->
+            <ui:include src="/templates/components/layout/footer.xhtml" />
+        </div>
+        
+    </div>
+    
+</h:body>
+
+</html>
+
diff --git a/src/main/resources/application-dev.properties b/src/main/resources/application-dev.properties
new file mode 100644
index 0000000..e3b2ffd
--- /dev/null
+++ b/src/main/resources/application-dev.properties
@@ -0,0 +1,24 @@
+# Configuration Développement - Lions User Manager Client
+
+# Logging plus détaillé en dev
+quarkus.log.console.level=DEBUG
+quarkus.log.category."dev.lions.user.manager".level=TRACE
+
+# MyFaces en mode développement
+quarkus.myfaces.project-stage=Development
+quarkus.myfaces.check-id-production-mode=false
+
+# Backend local
+lions.user.manager.backend.url=http://localhost:8080
+
+# Keycloak local (si disponible)
+quarkus.oidc.auth-server-url=http://localhost:8180/realms/master
+quarkus.oidc.client-id=lions-user-manager-client
+quarkus.oidc.tls.verification=none
+
+# CORS permissif en dev
+quarkus.http.cors.origins=*
+
+# Désactiver la vérification du token en dev (si nécessaire)
+# quarkus.oidc.verify-access-token=false
+
diff --git a/src/main/resources/application-prod.properties b/src/main/resources/application-prod.properties
new file mode 100644
index 0000000..36131c3
--- /dev/null
+++ b/src/main/resources/application-prod.properties
@@ -0,0 +1,32 @@
+# Configuration Production - Lions User Manager Client
+
+# Logging production
+quarkus.log.console.level=INFO
+quarkus.log.category."dev.lions.user.manager".level=INFO
+
+# MyFaces en mode production
+quarkus.myfaces.project-stage=Production
+quarkus.myfaces.check-id-production-mode=true
+
+# Backend production
+lions.user.manager.backend.url=${LIONS_USER_MANAGER_BACKEND_URL}
+
+# Keycloak production
+quarkus.oidc.auth-server-url=https://security.lions.dev/realms/master
+quarkus.oidc.client-id=${KEYCLOAK_CLIENT_ID}
+quarkus.oidc.credentials.secret=${KEYCLOAK_CLIENT_SECRET}
+quarkus.oidc.tls.verification=required
+
+# CORS restrictif en prod
+quarkus.http.cors.origins=${CORS_ORIGINS:https://unionflow.lions.dev,https://btpxpress.lions.dev}
+
+# Sécurité renforcée
+quarkus.http.session-cookie-secure=true
+quarkus.oidc.authentication.cookie-same-site=strict
+
+# Health checks obligatoires
+quarkus.smallrye-health.root-path=/health
+
+# Métriques Prometheus
+quarkus.micrometer.export.prometheus.enabled=true
+
diff --git a/src/main/resources/application.properties b/src/main/resources/application.properties
new file mode 100644
index 0000000..2a30c95
--- /dev/null
+++ b/src/main/resources/application.properties
@@ -0,0 +1,97 @@
+# Configuration Lions User Manager Client
+quarkus.application.name=lions-user-manager-client
+quarkus.application.version=1.0.0
+
+# Configuration HTTP
+quarkus.http.port=8081
+quarkus.http.host=0.0.0.0
+quarkus.http.root-path=/
+quarkus.http.so-reuse-port=true
+
+# Configuration Session HTTP
+quarkus.http.session-timeout=60m
+quarkus.http.session-cookie-same-site=lax
+quarkus.http.session-cookie-http-only=true
+quarkus.http.session-cookie-secure=false
+
+# Configuration logging
+quarkus.log.console.enable=true
+quarkus.log.console.level=INFO
+quarkus.log.console.format=%d{yyyy-MM-dd HH:mm:ss,SSS} %-5p [%c{2.}] (%t) %s%e%n
+quarkus.log.category."dev.lions.user.manager".level=DEBUG
+
+# MyFaces Configuration
+quarkus.myfaces.project-stage=Development
+quarkus.myfaces.state-saving-method=server
+quarkus.myfaces.number-of-views-in-session=50
+quarkus.myfaces.number-of-sequential-views-in-session=10
+quarkus.myfaces.serialize-state-in-session=false
+quarkus.myfaces.client-view-state-timeout=3600000
+quarkus.myfaces.view-expired-exception-handler-redirect-page=/
+quarkus.myfaces.check-id-production-mode=false
+quarkus.myfaces.strict-xhtml-links=false
+quarkus.myfaces.refresh-transient-build-on-pss=true
+quarkus.myfaces.resource-max-time-expires=604800000
+quarkus.myfaces.resource-buffer-size=2048
+
+# PrimeFaces Configuration
+primefaces.THEME=freya
+primefaces.FONT_AWESOME=true
+primefaces.CLIENT_SIDE_VALIDATION=true
+primefaces.MOVE_SCRIPTS_TO_BOTTOM=true
+primefaces.CSP=false
+primefaces.UPLOADER=commons
+primefaces.AUTO_UPDATE=false
+primefaces.CACHE_PROVIDER=org.primefaces.cache.DefaultCacheProvider
+
+# Configuration Backend Lions User Manager
+lions.user.manager.backend.url=${LIONS_USER_MANAGER_BACKEND_URL:http://localhost:8080}
+
+# Configuration REST Client
+quarkus.rest-client."lions-user-manager-api".url=${lions.user.manager.backend.url}
+quarkus.rest-client."lions-user-manager-api".scope=jakarta.inject.Singleton
+quarkus.rest-client."lions-user-manager-api".connect-timeout=5000
+quarkus.rest-client."lions-user-manager-api".read-timeout=30000
+
+# Configuration Keycloak OIDC
+quarkus.oidc.enabled=true
+quarkus.oidc.auth-server-url=${KEYCLOAK_AUTH_SERVER_URL:https://security.lions.dev/realms/master}
+quarkus.oidc.client-id=${KEYCLOAK_CLIENT_ID:lions-user-manager-client}
+quarkus.oidc.credentials.secret=${KEYCLOAK_CLIENT_SECRET}
+quarkus.oidc.application-type=web-app
+quarkus.oidc.authentication.redirect-path=/auth/callback
+quarkus.oidc.authentication.restore-path-after-redirect=true
+quarkus.oidc.authentication.scopes=openid,profile,email,roles
+quarkus.oidc.token.issuer=${KEYCLOAK_AUTH_SERVER_URL:https://security.lions.dev/realms/master}
+quarkus.oidc.tls.verification=none
+quarkus.oidc.authentication.cookie-same-site=lax
+quarkus.oidc.authentication.java-script-auto-redirect=false
+quarkus.oidc.discovery-enabled=true
+quarkus.oidc.verify-access-token=true
+
+# Activation de la sécurité
+quarkus.security.auth.enabled=true
+
+# Chemins publics (non protégés par OIDC)
+quarkus.http.auth.permission.public.paths=/,/index.xhtml,/pages/public/*,/auth/*,/q/*,/q/oidc/*,/favicon.ico,/resources/*,/META-INF/resources/*,/images/*,/jakarta.faces.resource/*,/javax.faces.resource/*
+quarkus.http.auth.permission.public.policy=permit
+
+# Chemins protégés (requièrent authentification)
+quarkus.http.auth.permission.authenticated.paths=/pages/user-manager/*
+quarkus.http.auth.permission.authenticated.policy=authenticated
+
+# CORS (si nécessaire pour développement)
+quarkus.http.cors=true
+quarkus.http.cors.origins=${CORS_ORIGINS:http://localhost:8081,http://localhost:8086}
+quarkus.http.cors.methods=GET,POST,PUT,DELETE,OPTIONS
+quarkus.http.cors.headers=Accept,Authorization,Content-Type,X-Requested-With
+
+# Health Checks
+quarkus.smallrye-health.root-path=/health
+quarkus.smallrye-health.liveness-path=/health/live
+quarkus.smallrye-health.readiness-path=/health/ready
+
+# Metrics (optionnel)
+quarkus.micrometer.export.prometheus.enabled=true
+quarkus.micrometer.export.prometheus.path=/metrics
+