diff --git a/as-talange-core/src/main/java/com/astalange/core/repository/AdherentRepository.java b/as-talange-core/src/main/java/com/astalange/core/repository/AdherentRepository.java
index a7b53d7..13101be 100644
--- a/as-talange-core/src/main/java/com/astalange/core/repository/AdherentRepository.java
+++ b/as-talange-core/src/main/java/com/astalange/core/repository/AdherentRepository.java
@@ -10,6 +10,9 @@ import java.util.List;
 public interface AdherentRepository extends JpaRepository<Adherent, Long> {
     List<Adherent> findTop5ByOrderByIdDesc();
 
+    @org.springframework.data.jpa.repository.Query("SELECT DISTINCT a FROM Adherent a LEFT JOIN FETCH a.licences l LEFT JOIN FETCH l.categorie c")
+    List<Adherent> findAllWithLicencesAndCategories();
+
     @org.springframework.data.jpa.repository.Query("SELECT DISTINCT a FROM Adherent a LEFT JOIN a.licences l WHERE LOWER(a.nom) LIKE LOWER(CONCAT('%', :query, '%')) OR LOWER(a.prenom) LIKE LOWER(CONCAT('%', :query, '%')) OR LOWER(l.numeroLicence) LIKE LOWER(CONCAT('%', :query, '%'))")
     List<Adherent> searchByQuery(@org.springframework.data.repository.query.Param("query") String query);
 }
diff --git a/as-talange-web/src/main/java/com/astalange/web/controller/AdherentController.java b/as-talange-web/src/main/java/com/astalange/web/controller/AdherentController.java
index 08deebd..6bdc840 100644
--- a/as-talange-web/src/main/java/com/astalange/web/controller/AdherentController.java
+++ b/as-talange-web/src/main/java/com/astalange/web/controller/AdherentController.java
@@ -1,6 +1,8 @@
 package com.astalange.web.controller;
 
 import com.astalange.core.entity.Adherent;
+import com.astalange.core.entity.Categorie;
+import com.astalange.core.entity.Licence;
 import com.astalange.core.entity.Saison;
 import com.astalange.core.repository.AdherentRepository;
 import com.astalange.core.repository.CategorieRepository;
@@ -31,15 +33,108 @@ public class AdherentController {
     }
 
     @GetMapping
-    public String listAdherents(@org.springframework.web.bind.annotation.RequestParam(required = false) String query, Model model) {
-        List<Adherent> adherents;
+    public String listAdherents(
+            @org.springframework.web.bind.annotation.RequestParam(required = false) String query,
+            @org.springframework.web.bind.annotation.RequestParam(required = false) String nom,
+            @org.springframework.web.bind.annotation.RequestParam(required = false) String prenom,
+            @org.springframework.web.bind.annotation.RequestParam(required = false) String categorie,
+            @org.springframework.web.bind.annotation.RequestParam(required = false) String licence,
+            @org.springframework.web.bind.annotation.RequestParam(required = false) String email,
+            @org.springframework.web.bind.annotation.RequestParam(required = false) String telephone,
+            @org.springframework.web.bind.annotation.RequestParam(required = false) String paiement,
+            @org.springframework.web.bind.annotation.RequestParam(defaultValue = "0") int page,
+            @org.springframework.web.bind.annotation.RequestParam(defaultValue = "20") int size,
+            Model model) {
+
+        List<Adherent> adherents = adherentRepository.findAllWithLicencesAndCategories();
+
+        // 1. Filter by global query
         if (query != null && !query.trim().isEmpty()) {
-            adherents = adherentRepository.searchByQuery(query.trim());
+            String q = query.trim().toLowerCase();
+            adherents = adherents.stream().filter(a -> 
+                (a.getNom() != null && a.getNom().toLowerCase().contains(q)) ||
+                (a.getPrenom() != null && a.getPrenom().toLowerCase().contains(q)) ||
+                (a.getLicenceActuelle() != null && a.getLicenceActuelle().getNumeroLicence() != null && a.getLicenceActuelle().getNumeroLicence().toLowerCase().contains(q))
+            ).collect(java.util.stream.Collectors.toList());
             model.addAttribute("searchQuery", query.trim());
-        } else {
-            adherents = adherentRepository.findAll();
         }
-        model.addAttribute("adherents", adherents);
+
+        // 2. Filter by specific column filters
+        if (nom != null && !nom.trim().isEmpty()) {
+            String n = nom.trim().toLowerCase();
+            adherents = adherents.stream().filter(a -> a.getNom() != null && a.getNom().toLowerCase().contains(n)).collect(java.util.stream.Collectors.toList());
+            model.addAttribute("nomFilter", nom.trim());
+        }
+        if (prenom != null && !prenom.trim().isEmpty()) {
+            String p = prenom.trim().toLowerCase();
+            adherents = adherents.stream().filter(a -> a.getPrenom() != null && a.getPrenom().toLowerCase().contains(p)).collect(java.util.stream.Collectors.toList());
+            model.addAttribute("prenomFilter", prenom.trim());
+        }
+        if (categorie != null && !categorie.trim().isEmpty()) {
+            adherents = adherents.stream().filter(a -> 
+                a.getLicenceActuelle() != null && 
+                a.getLicenceActuelle().getCategorie() != null && 
+                a.getLicenceActuelle().getCategorie().getNom().equalsIgnoreCase(categorie.trim())
+            ).collect(java.util.stream.Collectors.toList());
+            model.addAttribute("categorieFilter", categorie.trim());
+        }
+        if (licence != null && !licence.trim().isEmpty()) {
+            String l = licence.trim().toLowerCase();
+            adherents = adherents.stream().filter(a -> 
+                a.getLicenceActuelle() != null && 
+                a.getLicenceActuelle().getNumeroLicence() != null && 
+                a.getLicenceActuelle().getNumeroLicence().toLowerCase().contains(l)
+            ).collect(java.util.stream.Collectors.toList());
+            model.addAttribute("licenceFilter", licence.trim());
+        }
+        if (email != null && !email.trim().isEmpty()) {
+            String e = email.trim().toLowerCase();
+            adherents = adherents.stream().filter(a -> a.getEmail() != null && a.getEmail().toLowerCase().contains(e)).collect(java.util.stream.Collectors.toList());
+            model.addAttribute("emailFilter", email.trim());
+        }
+        if (telephone != null && !telephone.trim().isEmpty()) {
+            String t = telephone.trim().toLowerCase();
+            adherents = adherents.stream().filter(a -> a.getTelephone() != null && a.getTelephone().toLowerCase().contains(t)).collect(java.util.stream.Collectors.toList());
+            model.addAttribute("telephoneFilter", telephone.trim());
+        }
+        if (paiement != null && !paiement.trim().isEmpty()) {
+            adherents = adherents.stream().filter(a -> {
+                String statut = a.getStatutPaiement();
+                if ("A_JOUR".equalsIgnoreCase(paiement)) {
+                    return "À jour".equalsIgnoreCase(statut);
+                } else if ("RESTE".equalsIgnoreCase(paiement)) {
+                    return statut != null && statut.startsWith("Reste");
+                } else if ("AUCUNE".equalsIgnoreCase(paiement)) {
+                    return "Aucune licence".equalsIgnoreCase(statut);
+                }
+                return true;
+            }).collect(java.util.stream.Collectors.toList());
+            model.addAttribute("paiementFilter", paiement.trim());
+        }
+
+        // 3. Paginate
+        int totalElements = adherents.size();
+        int totalPages = (int) Math.ceil((double) totalElements / size);
+        if (page < 0) page = 0;
+        if (page >= totalPages && totalPages > 0) page = totalPages - 1;
+
+        int start = page * size;
+        int end = Math.min(start + size, totalElements);
+        List<Adherent> pageContent = (start < totalElements) ? adherents.subList(start, end) : List.of();
+
+        model.addAttribute("adherents", pageContent);
+        model.addAttribute("currentPage", page);
+        model.addAttribute("totalPages", totalPages);
+        model.addAttribute("totalElements", totalElements);
+        model.addAttribute("pageSize", size);
+
+        Saison saisonActive = saisonRepository.findByEstActiveTrue().orElse(null);
+        if (saisonActive != null) {
+            model.addAttribute("categories", categorieRepository.findBySaison(saisonActive));
+        } else {
+            model.addAttribute("categories", categorieRepository.findAll());
+        }
+
         return "adherents/list";
     }
 
@@ -56,10 +151,67 @@ public class AdherentController {
             Model model) {
         
         if (result.hasErrors()) {
+            if (adherent.getId() != null) {
+                Saison saisonActive = saisonRepository.findByEstActiveTrue().orElse(null);
+                if (saisonActive != null) {
+                    model.addAttribute("categories", categorieRepository.findBySaison(saisonActive));
+                    model.addAttribute("saisonActive", saisonActive);
+                } else {
+                    model.addAttribute("categories", categorieRepository.findAll());
+                }
+                model.addAttribute("licences", licenceRepository.findByAdherentId(adherent.getId()));
+                model.addAttribute("modesPaiement", modePaiementRepository.findAll());
+            } else {
+                Saison saisonActive = saisonRepository.findByEstActiveTrue().orElse(null);
+                if (saisonActive != null) {
+                    model.addAttribute("categories", categorieRepository.findBySaison(saisonActive));
+                } else {
+                    model.addAttribute("categories", categorieRepository.findAll());
+                }
+            }
             return "adherents/form";
         }
         
-        adherentRepository.save(adherent);
+        if (adherent.getId() != null) {
+            Adherent existing = adherentRepository.findById(adherent.getId()).orElse(null);
+            if (existing != null) {
+                boolean dateChanged = !existing.getDateNaissance().equals(adherent.getDateNaissance());
+                
+                if (dateChanged) {
+                    int newBirthYear = adherent.getDateNaissance().getYear();
+                    List<Licence> licences = licenceRepository.findByAdherentId(adherent.getId());
+                    for (Licence licence : licences) {
+                        Saison saison = licence.getSaison();
+                        Categorie newCat = categorieRepository.findBySaison(saison).stream()
+                                .filter(c -> newBirthYear >= c.getAnneeMin() && newBirthYear <= c.getAnneeMax())
+                                .findFirst()
+                                .orElse(null);
+                        if (newCat != null) {
+                            licence.setCategorie(newCat);
+                            licenceRepository.save(licence);
+                        }
+                    }
+                }
+                
+                existing.setNom(adherent.getNom());
+                existing.setPrenom(adherent.getPrenom());
+                existing.setDateNaissance(adherent.getDateNaissance());
+                existing.setTelephone(adherent.getTelephone());
+                existing.setEmail(adherent.getEmail());
+                existing.setAdresse(adherent.getAdresse());
+                existing.setRepresentantLegal(adherent.getRepresentantLegal());
+                existing.setResidentTalange(adherent.isResidentTalange());
+                existing.setSexe(adherent.getSexe());
+                existing.setTypeMaillot(adherent.getTypeMaillot());
+                
+                adherentRepository.save(existing);
+            } else {
+                adherentRepository.save(adherent);
+            }
+        } else {
+            adherentRepository.save(adherent);
+        }
+        
         return "redirect:/adherents";
     }
 
diff --git a/as-talange-web/src/main/resources/templates/adherents/list.html b/as-talange-web/src/main/resources/templates/adherents/list.html
index 5d0ee99..c2e9c44 100644
--- a/as-talange-web/src/main/resources/templates/adherents/list.html
+++ b/as-talange-web/src/main/resources/templates/adherents/list.html
@@ -34,62 +34,159 @@
                 </a>
             </div>
 
-            <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+            <div id="adherents-table-container" class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                 <div class="p-4 border-b border-gray-200 flex justify-between items-center">
-                    <form th:action="@{/adherents}" method="get" class="flex items-center space-x-2">
+                    <form hx-get="/adherents" hx-target="#adherents-table-container" hx-select="#adherents-table-container" class="flex items-center space-x-2">
                         <input type="text" name="query" th:value="${searchQuery}" placeholder="Nom, Prénom ou N° Licence..." 
                                class="border border-gray-300 rounded-lg px-4 py-2 text-sm w-64 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                         <button type="submit" class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-200 border border-gray-300 transition-colors">Chercher</button>
                         <a th:if="${searchQuery != null and !searchQuery.isEmpty()}" th:href="@{/adherents}" class="text-sm text-gray-500 hover:text-gray-700 underline underline-offset-2 ml-2">Effacer</a>
                     </form>
                 </div>
-                <table class="w-full text-left border-collapse">
-                    <thead>
-                        <tr class="bg-gray-50 text-gray-500 text-sm uppercase tracking-wider border-b border-gray-200">
-                            <th class="py-3 px-6 font-medium text-left">Nom</th>
-                            <th class="py-3 px-6 font-medium text-left">Prénom</th>
-                            <th class="py-3 px-6 font-medium text-center">N° Licence</th>
-                            <th class="py-3 px-6 font-medium text-left">Email</th>
-                            <th class="py-3 px-6 font-medium text-left">Téléphone</th>
-                            <th class="py-3 px-6 font-medium text-center">Paiement</th>
-                            <th class="py-3 px-6 font-medium text-right">Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody class="divide-y divide-gray-200 text-sm">
-                        <tr th:if="${#lists.isEmpty(adherents)}">
-                            <td colspan="7" class="py-8 text-center text-gray-500">Aucun adhérent enregistré.</td>
-                        </tr>
-                        <tr th:each="adherent : ${adherents}" class="hover:bg-gray-50 transition-colors">
-                            <td class="py-4 px-6 font-medium text-gray-900">
-                                <span th:text="${adherent.nom}">Dupont</span>
-                                <div class="text-[10px] text-gray-400 font-normal mt-0.5">
-                                    <span th:text="${adherent.sexe == 'FEMININ' ? 'Féminin' : 'Masculin'}">Masculin</span>
-                                    <span class="mx-1">|</span>
-                                    <span th:text="${adherent.typeMaillot == 'GARDIEN' ? 'Gardien' : 'Joueur'}">Joueur</span>
-                                </div>
-                            </td>
-                            <td class="py-4 px-6 font-medium text-gray-900" th:text="${adherent.prenom}">Jean</td>
-                            <td class="py-4 px-6 text-center text-gray-600 font-mono text-xs" 
-                                th:text="${adherent.getLicenceActuelle() != null and adherent.getLicenceActuelle().numeroLicence != null and !adherent.getLicenceActuelle().numeroLicence.isEmpty() ? adherent.getLicenceActuelle().numeroLicence : '-'}">-</td>
-                            <td class="py-4 px-6 text-gray-600" th:text="${adherent.email}">jean@example.com</td>
-                            <td class="py-4 px-6 text-gray-600" th:text="${adherent.telephone}">0600000000</td>
-                            <td class="py-4 px-6 text-center">
-                                <span class="px-2 py-1 text-xs font-semibold rounded-full" 
-                                      th:classappend="${adherent.getStatutPaiement() == 'À jour' ? 'bg-green-100 text-green-800' : (adherent.getStatutPaiement() == 'Aucune licence' ? 'bg-gray-100 text-gray-800' : 'bg-red-100 text-red-800')}"
-                                      th:text="${adherent.getStatutPaiement()}">À jour</span>
-                            </td>
-                            <td class="py-4 px-6 text-right flex justify-end space-x-3 items-center">
-                                <a th:href="@{/adherents/{id}/edit(id=${adherent.id})}" class="text-indigo-600 hover:text-indigo-900 font-medium bg-indigo-50 px-3 py-1 rounded-lg">Voir / Modifier</a>
-                                <form th:action="@{/adherents/{id}/delete(id=${adherent.id})}" method="post" onsubmit="return confirm('Supprimer cet adhérent ?');">
-                                    <button type="submit" class="text-red-600 hover:text-red-800 font-medium">Supprimer</button>
-                                </form>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
+                
+                <form id="filter-form" hx-get="/adherents" hx-target="#adherents-table-container" hx-select="#adherents-table-container" hx-trigger="change, keyup changed delay:300ms" hx-sync="this:replace" hx-on::config-request="if (event.detail.trigger.tagName !== 'BUTTON') { event.detail.parameters['page'] = 0; }" class="m-0">
+                    <input type="hidden" name="query" th:value="${searchQuery}">
+                    
+                    <table class="w-full text-left border-collapse">
+                        <thead>
+                            <tr class="bg-gray-50 text-gray-500 text-sm uppercase tracking-wider border-b border-gray-200">
+                                <th class="py-3 px-6 font-medium text-left">Nom</th>
+                                <th class="py-3 px-6 font-medium text-left">Prénom</th>
+                                <th class="py-3 px-6 font-medium text-left">Catégorie</th>
+                                <th class="py-3 px-6 font-medium text-center">N° Licence</th>
+                                <th class="py-3 px-6 font-medium text-left">Email</th>
+                                <th class="py-3 px-6 font-medium text-left">Téléphone</th>
+                                <th class="py-3 px-6 font-medium text-center">Paiement</th>
+                                <th class="py-3 px-6 font-medium text-right">Actions</th>
+                            </tr>
+                            <!-- Filter Row -->
+                            <tr class="bg-gray-100 border-b border-gray-200 text-xs">
+                                <td class="py-2 px-3">
+                                    <input type="text" id="filterNom" name="nom" th:value="${nomFilter}" placeholder="Filtrer Nom..." class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
+                                </td>
+                                <td class="py-2 px-3">
+                                    <input type="text" id="filterPrenom" name="prenom" th:value="${prenomFilter}" placeholder="Filtrer Prénom..." class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
+                                </td>
+                                <td class="py-2 px-3">
+                                    <select id="filterCategorie" name="categorie" class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
+                                        <option value="">Toutes</option>
+                                        <option th:each="cat : ${categories}" th:value="${cat.nom}" th:text="${cat.nom}" th:selected="${categorieFilter == cat.nom}"></option>
+                                    </select>
+                                </td>
+                                <td class="py-2 px-3">
+                                    <input type="text" id="filterLicence" name="licence" th:value="${licenceFilter}" placeholder="Filtrer N°..." class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
+                                </td>
+                                <td class="py-2 px-3">
+                                    <input type="text" id="filterEmail" name="email" th:value="${emailFilter}" placeholder="Filtrer Email..." class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
+                                </td>
+                                <td class="py-2 px-3">
+                                    <input type="text" id="filterTelephone" name="telephone" th:value="${telephoneFilter}" placeholder="Filtrer Tél..." class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
+                                </td>
+                                <td class="py-2 px-3">
+                                    <select id="filterPaiement" name="paiement" class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
+                                        <option value="">Tous</option>
+                                        <option value="A_JOUR" th:selected="${paiementFilter == 'A_JOUR'}">À jour</option>
+                                        <option value="RESTE" th:selected="${paiementFilter == 'RESTE'}">Reste à payer</option>
+                                        <option value="AUCUNE" th:selected="${paiementFilter == 'AUCUNE'}">Aucune licence</option>
+                                    </select>
+                                </td>
+                                <td class="py-2 px-3"></td>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-gray-200 text-sm">
+                            <tr th:if="${#lists.isEmpty(adherents)}">
+                                <td colspan="8" class="py-8 text-center text-gray-500">Aucun adhérent enregistré.</td>
+                            </tr>
+                            <tr th:each="adherent : ${adherents}" class="hover:bg-gray-50 transition-colors adherent-row">
+                                <td class="py-4 px-6 font-medium text-gray-900">
+                                    <span th:text="${adherent.nom}">Dupont</span>
+                                    <div class="text-[10px] text-gray-400 font-normal mt-0.5">
+                                        <span th:text="${adherent.sexe == 'FEMININ' ? 'Féminin' : 'Masculin'}">Masculin</span>
+                                        <span class="mx-1">|</span>
+                                        <span th:text="${adherent.typeMaillot == 'GARDIEN' ? 'Gardien' : 'Joueur'}">Joueur</span>
+                                    </div>
+                                </td>
+                                <td class="py-4 px-6 font-medium text-gray-900" th:text="${adherent.prenom}">Jean</td>
+                                <td class="py-4 px-6 text-gray-600 font-medium" th:text="${adherent.getLicenceActuelle() != null ? adherent.getLicenceActuelle().getCategorie().getNom() : '-'}">-</td>
+                                <td class="py-4 px-6 text-center text-gray-600 font-mono text-xs" 
+                                    th:text="${adherent.getLicenceActuelle() != null and adherent.getLicenceActuelle().numeroLicence != null and !adherent.getLicenceActuelle().numeroLicence.isEmpty() ? adherent.getLicenceActuelle().numeroLicence : '-'}">-</td>
+                                <td class="py-4 px-6 text-gray-600" th:text="${adherent.email}">jean@example.com</td>
+                                <td class="py-4 px-6 text-gray-600" th:text="${adherent.telephone}">0600000000</td>
+                                <td class="py-4 px-6 text-center">
+                                    <span class="px-2 py-1 text-xs font-semibold rounded-full" 
+                                          th:classappend="${adherent.getStatutPaiement() == 'À jour' ? 'bg-green-100 text-green-800' : (adherent.getStatutPaiement() == 'Aucune licence' ? 'bg-gray-100 text-gray-800' : 'bg-red-100 text-red-800')}"
+                                          th:text="${adherent.getStatutPaiement()}">À jour</span>
+                                </td>
+                                <td class="py-4 px-6 text-right flex justify-end space-x-3 items-center">
+                                    <a th:href="@{/adherents/{id}/edit(id=${adherent.id})}" class="text-indigo-600 hover:text-indigo-900 font-medium bg-indigo-50 px-3 py-1 rounded-lg">Voir / Modifier</a>
+                                    <form th:action="@{/adherents/{id}/delete(id=${adherent.id})}" method="post" onsubmit="return confirm('Supprimer cet adhérent ?');">
+                                        <button type="submit" class="text-red-600 hover:text-red-800 font-medium">Supprimer</button>
+                                    </form>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </form>
+
+                <!-- Pagination Footer -->
+                <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between bg-gray-50 text-sm text-gray-700">
+                    <div th:if="${totalElements > 0}">
+                        Affichage de <span class="font-semibold" th:text="${currentPage * pageSize + 1}">1</span> à 
+                        <span class="font-semibold" th:text="${T(java.lang.Math).min((currentPage + 1) * pageSize, totalElements)}">20</span> sur 
+                        <span class="font-semibold" th:text="${totalElements}">100</span> adhérents
+                    </div>
+                    <div th:if="${totalElements == 0}">
+                        Aucun adhérent à afficher
+                    </div>
+                    <div class="flex items-center space-x-2" th:if="${totalPages > 1}">
+                        <!-- Page Précédente -->
+                        <button type="button"
+                                th:if="${currentPage > 0}"
+                                hx-get="/adherents"
+                                hx-target="#adherents-table-container"
+                                hx-select="#adherents-table-container"
+                                hx-include="#filter-form"
+                                th:attr="hx-vals=|{'page': ${currentPage - 1}}|"
+                                class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 transition-colors">
+                            Précédent
+                        </button>
+                        <span th:if="${currentPage == 0}" class="px-3 py-1 border border-gray-200 rounded text-gray-400 bg-gray-50 cursor-not-allowed">
+                            Précédent
+                        </span>
+
+                        <!-- Numéros de pages -->
+                        <th:block th:each="pageNum : ${#numbers.sequence(0, totalPages - 1)}" th:if="${totalPages > 0}">
+                            <button type="button"
+                                    hx-get="/adherents"
+                                    hx-target="#adherents-table-container"
+                                    hx-select="#adherents-table-container"
+                                    hx-include="#filter-form"
+                                    th:attr="hx-vals=|{'page': ${pageNum}}|"
+                                    th:text="${pageNum + 1}"
+                                    class="px-3 py-1 rounded transition-colors"
+                                    th:classappend="${currentPage == pageNum ? 'bg-blue-600 text-white' : 'border border-gray-300 hover:bg-gray-100'}">
+                                1
+                            </button>
+                        </th:block>
+
+                        <!-- Page Suivante -->
+                        <button type="button"
+                                th:if="${currentPage < totalPages - 1}"
+                                hx-get="/adherents"
+                                hx-target="#adherents-table-container"
+                                hx-select="#adherents-table-container"
+                                hx-include="#filter-form"
+                                th:attr="hx-vals=|{'page': ${currentPage + 1}}|"
+                                class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 transition-colors">
+                            Suivant
+                        </button>
+                        <span th:if="${currentPage == totalPages - 1}" class="px-3 py-1 border border-gray-200 rounded text-gray-400 bg-gray-50 cursor-not-allowed">
+                            Suivant
+                        </span>
+                    </div>
+                </div>
             </div>
         </div>
     </main>
-
 </body>
 </html>