diff --git a/Vue/Ajaxtblisterjoursferiers/index.php b/Vue/Ajaxtblisterjoursferiers/index.php
index d3b741dc..16045bc8 100755
--- a/Vue/Ajaxtblisterjoursferiers/index.php
+++ b/Vue/Ajaxtblisterjoursferiers/index.php
@@ -1,4 +1,4 @@
-<div class="card border-0 shadow-sm overflow-hidden" style="border-radius: var(--radius-md);">
+<div class="card border-0 shadow-sm overflow-hidden" style="border-radius: 12px;">
     <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
         <div class="d-flex align-items-center">
             <h6 class="mb-0 fw-bold text-uppercase text-primary small">
@@ -8,19 +8,21 @@
                 0 <?= _("Lignes") ?>
             </span>
         </div>
-        <div id="table-buttons" class="d-flex gap-2"></div>
-    </div>
-
-    <div class="bg-light-50 p-3 border-bottom">
-        <div class="row g-3 justify-content-center">
-            <div class="col-md-12">
-                <div class="input-group input-group-sm shadow-xs">
-                    <span class="input-group-text bg-white border-2 border-end-0"><i class="fas fa-calendar-check text-muted"></i></span>
-                    <input type="number" class="form-control border-2 border-start-0 fw-bold" 
-                        id="annee" name="annee" value="<?= date('Y'); ?>" min="2020" step="1" max="<?= date('Y'); ?>"
-                        onchange="afficheDonneesTableChoisie('Ajaxtblisterjoursferiers');">
-                </div>
+        
+        <div class="d-flex align-items-center gap-3">
+            <div class="d-flex align-items-center bg-light rounded-pill px-3 py-1 border shadow-xs">
+                <label for="annee" class="small fw-bold text-muted me-2 mb-0 text-uppercase"><?= _("Année") ?> :</label>
+                <input type="number" 
+                       class="form-control form-control-sm border-0 bg-transparent fw-bold text-primary p-0" 
+                       id="annee" 
+                       name="annee" 
+                       value="<?= date('Y'); ?>" 
+                       min="2020" 
+                       max="<?= date('Y') + 1; ?>" 
+                       style="width: 60px; outline: none; shadow: none;"
+                       onchange="afficheDonneesTableChoisie('Ajaxtblisterjoursferiers');">
             </div>
+            <div id="table-buttons" class="d-flex gap-2"></div>
         </div>
     </div>
 
@@ -39,24 +41,32 @@
                 <tbody>
                     <?php foreach ($tabjoursferiers as $v):
                         $idData = $this->nettoyer($v['id']);
+                        $isDemi = ($this->nettoyer($v['demiJournee']) == "1");
                         
-                        // Gestion multilingue et demi-journée
-                        $suffix = ($this->nettoyer($v['demiJournee']) == "1") ? (est_anglophone() ? " (half day)" : " (demi-journée)") : "";
                         $libelleBase = est_anglophone() ? $this->nettoyer($v['libelleEng']) : $this->nettoyer($v['libelle']);
-                        $libelleFinal = $libelleBase . $suffix;
-
                         $dateFerier = $this->nettoyer($v['dateFerier']);
-                        $ladate = date('d-m-Y', strtotime($dateFerier)); // Format simplifié pour le tableau
+                        $ladate = date('d/m/Y', strtotime($dateFerier));
                     ?>
                     <tr>
                         <td class="ps-4 fw-medium text-muted small"><?= $this->nettoyer($v['codeSociete']); ?></td>
-                        <td class="text-center text-muted small"><?= $idData ?></td>
-                        <td class="fw-bold text-primary">
-                            <span class="badge bg-white border text-primary shadow-xs px-2">
-                                <i class="far fa-calendar-check me-1"></i> <?= $ladate ?>
-                            </span>
+                        <td class="text-center text-muted small">#<?= $idData ?></td>
+                        <td>
+                            <div class="d-flex align-items-center">
+                                <div class="bg-primary-ghost text-primary rounded-3 p-2 me-3 text-center" style="min-width: 45px;">
+                                    <span class="d-block lh-1 fw-bold" style="font-size: 1.1rem;"><?= date('d', strtotime($dateFerier)) ?></span>
+                                    <span class="small text-uppercase" style="font-size: 0.65rem;"><?= date('M', strtotime($dateFerier)) ?></span>
+                                </div>
+                                <span class="fw-bold text-dark"><?= $ladate ?></span>
+                            </div>
+                        </td>
+                        <td>
+                            <span class="fw-medium text-dark"><?= $libelleBase ?></span>
+                            <?php if($isDemi): ?>
+                                <span class="badge rounded-pill bg-warning-subtle text-warning border border-warning-subtle ms-2 small">
+                                    <i class="fas fa-adjust me-1"></i><?= est_anglophone() ? "Half day" : "Demi-journée" ?>
+                                </span>
+                            <?php endif; ?>
                         </td>
-                        <td class="fw-medium text-dark"><?= $libelleFinal ?></td>
                         <td class="text-center pe-4">
                             <button type="button" 
                                     class="btn btn-outline-primary btn-sm px-3 rounded-pill fw-bold shadow-xs" 
@@ -73,20 +83,30 @@
 </div>
 
 <script>
-	$(document).ready(function() {
-		// 1. On initialise la DataTable (Badge total + Exports)
-		initDataTableReference('#tableLister', 'Jours_Feriers');
-
-		// 2. On initialise le filtre Pays présent dans le header de la liste
-		// On met 'false' car on ne veut pas que le menu s'ouvre tout seul au chargement
-		actualiserSelectPicker('#codePays', false);
-	});
+    $(document).ready(function() {
+        initDataTableReference('#tableLister', 'Jours_Feriers');
+    });
 </script>
 
 <style>
+    /* Intégration Standard Neutral Pro */
     .bg-primary-ghost { background-color: rgba(33, 46, 83, 0.08) !important; }
-    #tableLister thead th { padding-top: 15px; padding-bottom: 15px; font-size: 0.75rem; }
-    #tableLister tbody td { border-color: #f1f4f6; height: 60px; }
     .shadow-xs { box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
-    .bg-light-50 { background-color: #f8fafc; }
+    
+    #tableLister thead th { 
+        padding-top: 15px; 
+        padding-bottom: 15px; 
+        background-color: #f8fafc;
+        border-bottom: 2px solid #edf2f7 !important;
+    }
+    
+    #tableLister tbody td { 
+        height: 60px; 
+        border-bottom: 1px solid #f1f4f6;
+    }
+
+    /* Suppression des flèches sur l'input number pour le style */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+    input[type=number] { -moz-appearance: textfield; }
 </style>
\ No newline at end of file