diff --git a/Js/fonctions.js b/Js/fonctions.js
index b8c9db09..103cb2ce 100755
--- a/Js/fonctions.js
+++ b/Js/fonctions.js
@@ -79116,30 +79116,31 @@ function filtreentetetrancheange(){
 	}
 }
 
-function afficher_trancheage()
-{
-	if(verifier_entete_trancheage())
-	{
-		donnees = 'codeGcAssureur='+codeGcAssureur+'&codeEnteteTrancheAge='+codeEnteteTrancheAge;
+function afficher_trancheage() {
+    if (verifier_entete_trancheage()) {
+        let racineWeb = $("#racineWeb").val();
+        let donnees = 'codeGcAssureur=' + codeGcAssureur + '&codeEnteteTrancheAge=' + codeEnteteTrancheAge;
+        let div_attente = $('#div_trancheage');
 
-		var div_attente = $('#div_trancheage');
-		
-		div_attente.html('<div style="padding-top:80px; text-align:center; font-size:14px; color: #0088cf; "><span><i class="fa fa-spinner fa-spin fa-5x" >' + '</span></div>');
+        // Loader moderne
+        div_attente.html(
+            '<div class="d-flex justify-content-center align-items-center p-5 animate__animated animate__fadeIn">' +
+            '<div class="spinner-grow text-primary" role="status"></div>' +
+            '<span class="ms-3 fw-bold text-primary">Chargement des tranches...</span></div>'
+        );
 
-		$.ajax({
-			url: $("#racineWeb").val()+"Ajaxtrancheage/affichertrancheage/",
-			type : 'post',
-			data: donnees,
-			error: function(errorData) {			
-			},
-			success: function(data) {
-				div_attente.html(data);
-			},
-			complete: function() {
-				$("#ageMax").focus();
-			}
-		}); 
-	}
+        $.ajax({
+            url: racineWeb + "Ajaxtrancheage/affichertrancheage/",
+            type: 'post',
+            data: donnees,
+            success: function(data) {
+                div_attente.hide().html(data).fadeIn();
+            },
+            complete: function() {
+                $("#ageMax").focus();
+            }
+        });
+    }
 }
 
 function supprimer_derniere_tranche_age(idTrancheage)
diff --git a/Vue/Ajaxtrancheage/affichertrancheage.php b/Vue/Ajaxtrancheage/affichertrancheage.php
index 99473e27..b9a9e01c 100755
--- a/Vue/Ajaxtrancheage/affichertrancheage.php
+++ b/Vue/Ajaxtrancheage/affichertrancheage.php
@@ -1,71 +1,93 @@
+<div class="card border-0 shadow-sm animate__animated animate__fadeIn">
+    <div class="table-responsive">
+        <table class="table table-hover align-middle mb-0" style="font-size: 9.5pt;">
+            <thead class="bg-light">
+                <tr class="bg-primary-ghost-light">
+                    <th class="py-3 ps-3 text-center" width="7%"><i class="fas fa-hashtag text-muted"></i></th>
+                    <th class="text-center" width="12%"><?= _("Code") ?></th>
+                    <th class="text-center" width="30%"><?= _("Âge Minimum") ?></th>
+                    <th class="text-center" width="30%">
+                        <div class="d-flex align-items-center justify-content-center">
+                            <span class="me-2"><?= _("Âge Maximum") ?></span>
+                            <input type="text" id="ageMax" name="ageMax" value="0" 
+                                   class="form-control form-control-sm text-center border-2 fw-bold" 
+                                   style="width: 80px;" onkeyup="controle_numerique(this);">
+                        </div>
+                    </th>
+                    <th class="text-center pe-3">
+                        <div class="btn-group shadow-xs">
+                            <button type="button" class="btn btn-primary btn-sm px-3" title="<?= _("Ajouter la tranche") ?>" onClick="ajouter_une_trancheage();">
+                                <i class="fa fa-plus"></i>
+                            </button>
+                            <button type="button" class="btn btn-danger-light btn-sm" title="<?= _("Vider") ?>" onClick="vider_entete_trancheage();">
+                                <i class="fa fa-times"></i>
+                            </button>
+                        </div>
+                    </th>
+                </tr>
 
-<table class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:10pt;">
-	<thead>
-		<tr>
-			<th rowspan="2" style='text-align:center' width="7%"> <?= _("No") ?> </th>
-			<th rowspan="2" style='text-align:center' width="10%"> <?= _("Code") ?> </th>
-			<th rowspan="2" style='text-align:center' width="39%"> <?= _("Age Minimum") ?> </th>
-			<th style='text-align:center' width="39%"> <?= _("Age Maximum") ?> </th>
-			<th style='text-align:center' width="5%"> 
-				<button type="button" class="form-control btn btn-danger" onClick="javascript:vider_entete_trancheage();">
-				  <i class="fa fa-times" aria-hidden="true"></i>
-				</button>
-			</th>
-		</tr>
-		<tr>
-	
-			<th style='text-align:center' > 
-				<INPUT title="" style='text-align:center; font-size:10pt; width:20%; margin:auto;'  class="form-control" type="text" id="ageMax" NAME="ageMax"  value="0" onkeyup="controle_numerique(this);" > 
-			</th>
-			<th style='text-align:center'> 
-				<button type="button" class="form-control btn btn-primary" onClick="javascript:ajouter_une_trancheage();">
-				  <i class="fa fa-plus" aria-hidden="true"></i>
-				</button>
-			</th>
-		</tr>
+                <?php if (isset($_SESSION['messageTrancheAge']) && trim($_SESSION['messageTrancheAge']) != ''): ?>
+                <tr>
+                    <th colspan="5" class="p-0">
+                        <div class="alert alert-info border-0 rounded-0 m-0 py-2 small text-center animate__animated animate__headShake">
+                            <i class="fas fa-info-circle me-2"></i><?= $_SESSION['messageTrancheAge'] ?>
+                        </div>
+                    </th>
+                </tr>
+                <?php endif; ?>
 
-		<?php if (isset($_SESSION['messageTrancheAge']) && $_SESSION['messageTrancheAge']>' '): ?>
-		<tr>
-			<th style='text-align:center' colspan="4"> 
-				<div class="alert alert-info" style="height:30px; padding:5px;" >
-				  <H4><?= $_SESSION['messageTrancheAge'] ?></H4>
-				</div>	
-			</th>
-		</tr>
-		<?php endif; ?>
+                <tr class="small text-muted text-uppercase">
+                    <th class="py-2 text-center border-bottom"><?= _("N°") ?></th>
+                    <th class="py-2 text-center border-bottom"><?= _("Code") ?></th>
+                    <th class="py-2 text-center border-bottom"><?= _("Âge Min") ?></th>
+                    <th class="py-2 text-center border-bottom"><?= _("Âge Max") ?></th>
+                    <th class="py-2 text-center border-bottom pe-3"><?= _("Action") ?></th>
+                </tr>
+            </thead>
 
+            <tbody>
+                <?php 
+                $i = 0;
+                foreach ($tranhesage as $tranheage):
+                    $idTrancheage = $tranheage['idTrancheage'];
+                    $maxAgeMax    = $tranheage['maxAgeMax'];
+                    $ageMax       = $tranheage['ageMax'];
+                    $i++;
+                ?>
+                <tr>
+                    <td class="text-center fw-bold text-muted"><?= $i; ?></td>
+                    <td class="text-center fw-bold text-primary"><?= $this->nettoyer($tranheage['codeTrancheAge']) ?></td>
+                    <td class="text-center"><?= $this->nettoyer($tranheage['ageMin']) ?> <?= _("ans") ?></td>
+                    <td class="text-center"><?= $this->nettoyer($tranheage['ageMax']) ?> <?= _("ans") ?></td>
+                    <td class="text-center pe-3">
+                        <?php if($ageMax == $maxAgeMax): ?>
+                            <button type="button" class="btn btn-danger-light btn-sm rounded-circle action-icon" 
+                                    title="<?= _("Supprimer la dernière tranche") ?>" 
+                                    onClick="supprimer_derniere_tranche_age('<?=$idTrancheage?>');">
+                                <i class="fa fa-minus"></i>
+                            </button>
+                        <?php endif; ?>
+                    </td>
+                </tr>
+                <?php endforeach; ?>
+            </tbody>
+        </table>
+    </div>
+</div>
 
-		
-	</thead>
+<?php $_SESSION['messageTrancheAge'] = ''; ?>
 
-	<tbody>
-		<?php 
-		$i = 0;
-		foreach ($tranhesage as $tranheage):
-			$idTrancheage	= $tranheage['idTrancheage'];
-			$maxAgeMax		= $tranheage['maxAgeMax'];
-			$ageMax			= $tranheage['ageMax'];
-			
-			$i++;
-		?>
-		<tr valign="top">
-			<td align='center'><?=  $i; ?></td>
-			<td align='center'><?=  $this->nettoyer($tranheage['codeTrancheAge']) ?></td>
-			<td align='center'><?=  $this->nettoyer($tranheage['ageMin']) ?></td>
-			<td align='center'><?=  $this->nettoyer($tranheage['ageMax']) ?></td>
-			<td> 
-				<?php if($ageMax==$maxAgeMax): ?>
-					<button type="button" class="form-control btn btn-danger" onClick="javascript:supprimer_derniere_tranche_age('<?=$idTrancheage?>');">
-					  <i class="fa fa-minus" aria-hidden="true"></i>
-					</button>
-				<?php endif; ?>
-			</td>
-			
-		</tr>
-		<?php endforeach; ?>
-	</tbody>
-</table>
-
-<?php
-	$_SESSION['messageTrancheAge'] 	= '';
- ?>
\ No newline at end of file
+<style>
+    .bg-primary-ghost-light { background-color: rgba(33, 46, 83, 0.04) !important; }
+    .btn-danger-light { 
+        color: #dc3545; 
+        background-color: rgba(220, 53, 69, 0.1); 
+        border: none; 
+        transition: all 0.2s;
+    }
+    .btn-danger-light:hover { 
+        background-color: rgba(220, 53, 69, 0.2); 
+        transform: scale(1.1);
+    }
+    .action-icon { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
+</style>
\ No newline at end of file