diff --git a/Vue/Tranchesaccessoires/index.php b/Vue/Tranchesaccessoires/index.php
index cbd20360..e81914aa 100755
--- a/Vue/Tranchesaccessoires/index.php
+++ b/Vue/Tranchesaccessoires/index.php
@@ -1,79 +1,89 @@
-<?php $this->titre = "INTER SANTE - Tableau des tranches d'accessoires"; ?>
+<div class="page-content animate__animated animate__fadeIn">
+    <div class="header-section mb-1">
+        <div class="d-flex align-items-center justify-content-between bg-white p-3 shadow-sm border-start border-primary border-4" style="border-radius: var(--radius-md);">
+            <div class="d-flex align-items-center">
+                <div class="icon-shape bg-primary-ghost text-primary rounded-circle me-3" style="width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;">
+                    <i class="fas fa-coins fs-4"></i>
+                </div>
+                <div>
+                    <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Grille des accessoires") ?></h4>
+                    <p class="text-muted small mb-0">
+                        <?= _("Gestion des barèmes de frais accessoires par tranche de prime") ?> 
+                        <span class="badge bg-light text-primary border ms-2">
+                            <?= count($bareme) ?> <?= _("Lignes au total") ?>
+                        </span>
+                    </p>
+                </div>
+            </div>
+            <div class="d-flex gap-2">
+                <input class="sr-only" type="text" id="nomForm" name="nomForm" value="frmtrancheaccessoire">
+            </div>
+        </div>
+    </div>
 
-<INPUT class="sr-only" TYPE="text" id="nomForm" name="nomForm" value="frmtrancheaccessoire">
+    <div id="div_entete_table" class="mb-2"></div>
+    <div id="div_maj_table" class="mb-3"></div>
 
-
-
-<legend> <?= _("Grille des accessoires") ?> </legend>
-
-<div id="div_entete_table">
-	
+    <div id="div_lister_table" class="card border-0 shadow-sm animate__animated animate__fadeInUp">
+        <div class="card-body p-0">
+            <div class="table-responsive">
+                <table class="table table-hover align-middle mb-0 datatable-inter compact">
+                    <thead class="table-light">
+                        <tr class="text-uppercase small">
+                            <th class="text-center py-3"><?= _("Centre gestion") ?></th>
+                            <th class="text-center"><?= _("Type Contrat") ?></th>
+                            <th class="text-center"><?= _("Prime Mini") ?></th>
+                            <th class="text-center"><?= _("Prime Maxi") ?></th>
+                            <th class="text-center"><?= _("Forfait") ?></th>
+                            <th class="text-center"><?= _("Taux") ?></th>
+                            <th class="text-center"><?= _("Application") ?></th>
+                            <th class="text-center no-export" width="100px"><?= _("Action") ?></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <?php foreach ($bareme as $v):
+                            $idData = $this->nettoyer($v['id']);
+                            $typecontrat = est_anglophone() ? $this->nettoyer($v['typecontratEng']) : $this->nettoyer($v['typecontrat']);
+                            $appli = est_anglophone() ? $this->nettoyer($v['appliEng']) : $this->nettoyer($v['appli']);
+                        ?>
+                        <tr>
+                            <td class="text-center fw-bold text-dark"><?= $this->nettoyer($v['codeSociete']) ?></td>
+                            <td class="text-center small"><?= $typecontrat ?></td>
+                            <td class="text-center text-primary fw-bold"><?= format_N($this->nettoyer($v['primeMin'])) ?></td>
+                            <td class="text-center text-primary fw-bold"><?= format_N($this->nettoyer($v['primeMax'])) ?></td>
+                            <td class="text-center text-success fw-bold"><?= format_N($this->nettoyer($v['accessoireForfait'])) ?></td>
+                            <td class="text-center">
+                                <span class="badge bg-light text-dark border">
+                                    <?= number_format($this->nettoyer($v['tauxAccessoire']), 2) ?> %
+                                </span>
+                            </td>
+                            <td class="text-center small text-muted"><?= $appli ?></td>
+                            <td class="text-center">
+                                <button type="button" 
+                                        class="btn btn-outline-primary btn-sm rounded-pill px-3 shadow-sm fw-bold" 
+                                        onclick="formModifTableRef(<?= $idData ?>);">
+                                    <i class="fas fa-edit me-1"></i> <?= _("Modifier") ?>
+                                </button>
+                            </td>
+                        </tr>
+                        <?php endforeach; ?>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
 </div>
 
-<div id="div_maj_table">
-		
-</div>
+<style>
+    .bg-primary-ghost { background-color: rgba(13, 110, 253, 0.1); }
+    /* Optimisation du tableau pour DataTables */
+    .datatable-inter.compact tbody td { padding: 12px 8px !important; }
+    .datatable-inter.compact thead th { font-size: 0.75rem; letter-spacing: 0.5px; }
+</style>
 
-<div id="div_lister_table">
-<?php 
-	$nbreTotal = count($bareme);
-	
-	if($nbreTotal < 10){
-		$nbreTotal = '0'.$nbreTotal;	
-	}else{
-		$nbreTotal =  format_N($nbreTotal);
-	}
-?>
-	<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; ?>">
-	
-	<table class="table table-striped table-bordered table-hover table-condensed table-responsive tabliste compact">
-		<thead>
-		  <tr>
-			<th class="text-center"><?= _("Centre gestion");?></th>
-			<th class="text-center"><?= _("Type Contrat");?></th>
-			<th class="text-center"><?= _("Prime Mini");?></th>
-			<th class="text-center"><?= _("Prime Maxi");?></th>
-			<th class="text-center"><?= _("Forfait");?></th>
-			<th class="text-center"><?= _("Taux");?></th>
-			<th class="text-center"><?= _("Application");?></th>
-			
-			<th class="text-center"><?= _("Modifier");?></th>
-			
-		  </tr>
-		</thead>
-		<tbody>
-			<?php foreach ($bareme as $v):
-				$idData = $this->nettoyer($v['id']);
-				$typecontrat = $this->nettoyer($v['typecontrat']);
-				$appli 		 = $this->nettoyer($v['appli']);
-				if (est_anglophone()){
-					$typecontrat = $this->nettoyer($v['typecontratEng']);
-					$appli 		 = $this->nettoyer($v['appliEng']);
-				}
-			?>
-			  <tr valign="top">
-				 <td class="text-center" width="12%"><?= $this->nettoyer($v['codeSociete']);; ?>   
-				<td class="text-center" width="15%"><?= $typecontrat; ?></td>
-				<td class="text-center" width="10%"><?= format_N($this->nettoyer($v['primeMin'])); ?></td>
-				
-				<td class="text-center" width="10%"><?= format_N($this->nettoyer($v['primeMax'])); ?></td>
-				<td class="text-center" width="10%"><?= format_N($this->nettoyer($v['accessoireForfait'])); ?></td>
-				<td class="text-center" width="5%"><?= number_format($this->nettoyer($v['tauxAccessoire']),2); ?></td>
-				
-				<td class="text-center" width="20%"><?= $appli; ?></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>
-				
-				</tr>
-			<?php endforeach; ?>
-		</tbody>
-	</table>
-</div>
\ No newline at end of file
+<script>
+    $(document).ready(function() {
+        // Initialisation de la SmartTable avec export PDF Landscape 100%
+        initSmartTable('.datatable-inter', '<?= _("Grille_des_accessoires") ?>', [0, 'asc']);
+    });
+</script>
\ No newline at end of file