diff --git a/Vue/Ajaxtblisterjoursferiers/index.php b/Vue/Ajaxtblisterjoursferiers/index.php
index da23ff28..0b4874eb 100755
--- a/Vue/Ajaxtblisterjoursferiers/index.php
+++ b/Vue/Ajaxtblisterjoursferiers/index.php
@@ -1,128 +1,90 @@
-<?php
-	$nbreTotal = count($tabjoursferiers);
-	
-	if($nbreTotal < 10){
-		$nbreTotal = '0'.$nbreTotal;	
-	}else{
-		$nbreTotal =  format_N($nbreTotal);
-	}
-	
-	if (est_anglophone()){
-		if($existeselection){
-			$libbouton = "Uncheck all";
-		}else{
-			$libbouton = "Check all";
-		}
-	}else{
-		if($existeselection){
-			$libbouton = "Décocher tous";
-		}else{
-			$libbouton = "Cocher tous";
-		}
-	}
-		
-?>
+<div class="card border-0 shadow-sm overflow-hidden" style="border-radius: var(--radius-md);">
+    <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">
+                <i class="fas fa-calendar-alt me-2"></i><?= _("Calendrier des Jours Fériés") ?>
+            </h6>
+            <span class="badge bg-primary-ghost text-primary ms-3 px-3 py-2 rounded-pill fw-bold" id="badge-total">
+                0 <?= _("Lignes") ?>
+            </span>
+        </div>
+        <div id="table-buttons" class="d-flex gap-2"></div>
+    </div>
 
-<?php $superUser = $_SESSION['superUser']; ?>
+    <div class="bg-light-50 p-3 border-bottom">
+        <div class="row g-3 justify-content-center">
+            <div class="col-md-2">
+                <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"
+                           onchange="afficheDonneesTableChoisie('Ajaxtblisterjoursferiers');">
+                </div>
+            </div>
+            <div class="col-md-4">
+                <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-globe-africa text-muted"></i></span>
+                    <select class="form-control selectpicker border-2 border-start-0" id="codePays" name="codePays" 
+                            onchange="afficheDonneesTableChoisie('Ajaxtblisterjoursferiers');">
+                        <?php liste_options($pays, $_SESSION['codePaysSociete']); ?>
+                    </select>
+                </div>
+            </div>
+        </div>
+    </div>
 
-<table style="margin: auto; width:50%;" class="table-responsive">
-	<tbody>
-		<tr>
-			<td width="3%" align="center"><?= _("Année") ?></td>
-            <td width="7%" ><INPUT class="form-control" TYPE="number" min="2020" step="1" id="annee" NAME="annee" value="<?= date('Y'); ?>" onchange="afficheDonneesTableChoisie('Ajaxtblisterjoursferiers');"></td>
-			
-			<td align="center" width="3%" > <?= _("Pays") ?> </td>
-			<td width="20%">
-				<SELECT onChange="afficheDonneesTableChoisie('Ajaxtblisterjoursferiers');" class="form-select" id="codePays" NAME="codePays">
-					<?php liste_options($pays,$_SESSION['codePaysSociete']); ?>						
-				</SELECT>
-			</td>
-		</tr>
-		<tr style="height:20px;">
-		</tr>
-	</tbody>
-</table>
+    <div class="card-body p-0">
+        <div class="table-responsive">
+            <table id="tableLister" class="table table-hover align-middle mb-0" style="width:100%">
+                <thead class="bg-light text-muted small text-uppercase">
+                    <tr>
+                        <th class="ps-4 border-0"><?= _("Centre") ?></th>
+                        <th class="border-0 text-center">ID</th>
+                        <th class="border-0"><?= _("Date") ?></th>
+                        <th class="border-0"><?= _("Libellé du jour") ?></th>
+                        <th class="border-0 text-center pe-4"><?= _("Actions") ?></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <?php foreach ($tabjoursferiers as $v):
+                        $idData = $this->nettoyer($v['id']);
+                        
+                        // 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;
 
-<div id="div_liste_jour">
-	<table style="margin: auto" class="table-responsive">
-		<tbody>
-			<td><input class="form-control" style="text-align: center; font-size:10pt;" type="text" id="nbreTotal" name="nbreTotal" value="<?= _("Lignes Total").": ". $nbreTotal; ?>" readonly> </td>
-		</tbody>
-	</table>
-	<input type="hidden" id="total" value="<?= $nbreTotal; ?>">
-	<input type="hidden" id="selectionne" value="<?= $existeselection ? 'true' : 'false'; ?>">
-	<table id="tableLister" class="table table-striped table-bordered table-hover table-condensed table-responsive">
-		<thead>
-		  <tr>
-			<th class="text-center"><?= _("Centre gestion") ?></th>
-			<th class="text-center">ID</th>
-			<th class="text-center">Date</th>
-			<th class="text-center"><?= _("Libellé") ?></th>
-			<!--
-			<th class="text-center">
-				<button type="button" style="font-size:10pt; font-weight: bold; width:100%; background-color:#4caf50; color: white;" class="form-control btn" onclick="javascript:cocherDecocherTout($('#fichier_lister').val());" > <?= $libbouton; ?> </button> 
-			</th>
-			-->
-			<th class="text-center"><?= _("Modifier") ?></th>
-			<!--
-			<th class="text-center">Supprimer</th> 
-			-->
-		  </tr>
-		</thead>
-		<tbody>
-			<?php foreach ($tabjoursferiers as $v):
-				$idData = $this->nettoyer($v['id']);
-				 
-				if (est_anglophone()){
-					if($this->nettoyer($v['demiJournee'])=="1"){
-						$libelle = $this->nettoyer($v['libelleEng'])." (half day)";
-					}else{
-						$libelle = $this->nettoyer($v['libelleEng']);
-					}
-					 
-				}else{
-					if($this->nettoyer($v['demiJournee'])=="1"){
-						$libelle = $this->nettoyer($v['libelle'])." (demi-journée)";
-					}else{
-						$libelle = $this->nettoyer($v['libelle']);
-					}
-				}
-				$dateFerier = $this->nettoyer($v['dateFerier']);
-				$day = jour_fr(date('D', strtotime($dateFerier)));
-				$jour = date('d', strtotime($dateFerier));
-				$mois = mois_court_fr(date('F', strtotime($dateFerier)));
-				$ladate = $day." ".$jour."-".$mois."-".date('Y', strtotime($dateFerier));
-			?>
-			  <tr valign="top">
-				<td class="text-center" width="5%"><?= $this->nettoyer($v['codeSociete']);; ?></td>
-				<td class="text-center" width="5%"><?= $this->nettoyer($v['id']);; ?></td>
-				<td class="text-center" width="15%"><?= $ladate; ?></td>
-				<td class="text-left" width="55%"><?= $libelle; ?></td>
-				<!--
-				<td class="text-center" width="10%">
-					<?php 
-						if($this->nettoyer($v['choix'] == '0')){
-							$check ='';
-						}
-						else{
-							$check = 'checked';
-						}       
-					?>
-					<INPUT TYPE="checkbox" class="custom-control-input" style="width: 2rem;height: 2rem;" id="choix" NAME="choix" value="<?=(($this->nettoyer($v['choix'])==0)? 0 : 1);?>" onclick="if (this.checked) this.value=1; else this.value=0;cocherDecocherUn($('#fichier_lister').val(),<?= $idData; ?>);" <?= $check;?>>
-				</td>
-				-->
-				<td class="text-center" width="10%">
-					<button style="width:100%" class ="form-control btn btn-primary" type="button" id="btn-editer" name="Modifier"
-					onclick="JAVASCRIPT:formModifTableRef(<?= $idData; ?>);" ><?= _("Modifier") ?></button>
-				</td>
-				<!--
-				<td class="text-center" width="10%">
-					<button  style="width:100%" class = "form-control btn btn-danger" type="button" id="btn-supprimer" name="Supprimer"
-					onclick="JAVASCRIPT:supprimeLigneListe(<?= $idData; ?>,'<?= $superUser; ?>')">Supprimer</button>
-				</td>
-				-->
-			</tr>
-			<?php endforeach; ?>
-		</tbody>
-	</table>
-</div>
\ No newline at end of file
+                        $dateFerier = $this->nettoyer($v['dateFerier']);
+                        $ladate = date('d-m-Y', strtotime($dateFerier)); // Format simplifié pour le tableau
+                    ?>
+                    <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>
+                        <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" 
+                                    onclick="formModifTableRef(<?= $idData ?>);">
+                                <i class="fas fa-edit me-1"></i> <?= _("Modifier") ?>
+                            </button>
+                        </td>
+                    </tr>
+                    <?php endforeach; ?>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<style>
+    .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; }
+</style>
\ No newline at end of file