diff --git a/app/templates/assiduites/widgets/tableau.j2 b/app/templates/assiduites/widgets/tableau.j2
index 77f6d838..b0370409 100644
--- a/app/templates/assiduites/widgets/tableau.j2
+++ b/app/templates/assiduites/widgets/tableau.j2
@@ -58,7 +58,7 @@
         <!-- Mettre les flèches -->
         {% if total_pages > 1 %}
             <ul class="pagination">
-                <li class="">
+                <li class="{{'disabled' if options.page == 1 else ''}}">
                     <a onclick="navigateToPage({{options.page - 1}})">&lt;</a>
                 </li>
                 <!-- Toujours afficher la première page -->
@@ -91,7 +91,7 @@
                 <li class="{% if options.page == total_pages %}active{% endif %}">
                     <a onclick="navigateToPage({{total_pages}})">{{ total_pages }}</a>
                 </li>
-                <li class="">
+                <li class="{{'disabled' if options.page == total_pages else ''}}">
                     <a onclick="navigateToPage({{options.page + 1}})">&gt;</a>
                 </li>
             </ul>
@@ -235,7 +235,30 @@
         max-width: fit-content;
     }
 
-    .pagination li{
+    .pagination li>*{
         cursor: pointer;
+
+        /*Style pour les boutons de pagination*/
+        border: 1px solid #ccc;
+        background-color: #f1f1f1;
+        padding: 8px 16px;
+        font-size: 16px;
+        border-radius: 4px;        
+        margin: 8px 1px;
+
+    }
+    .pagination li:hover >a, .pagination li.active>*{
+        /*Style pour les boutons actifs*/
+        background-color: var(--sco-color-ues);
+        color: white !important;
+
+    }
+
+    .pagination li.disabled>*{
+        /*Style pour les boutons désactivés*/
+        opacity: 0.5;
+        cursor: default;
+        pointer-events: none;
+        user-select: none;
     }
 </style>