diff --git a/Vue/Trancheage/index.php b/Vue/Trancheage/index.php
index 5d7c1d81..097f6f21 100755
--- a/Vue/Trancheage/index.php
+++ b/Vue/Trancheage/index.php
@@ -1,31 +1,82 @@
-<?php $this->titre = "INTER SANTE - Tranches Âge"; ?>
+<div class="page-content animate__animated animate__fadeIn">
+    <div class="header-section mb-4">
+        <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-calendar-alt fs-4"></i>
+                </div>
+                <div>
+                    <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Gestion Tranches d'Âge") ?></h4>
+                    <p class="text-muted small mb-0"><?= _("Configuration des segments d'âge par garant") ?></p>
+                </div>
+            </div>
+            <button class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm btn-sm" onclick="nouveau_type_tranche();">
+                <i class="fas fa-plus me-1"></i> <?= _("Nouveau Type") ?>
+            </button>
+        </div>
+    </div>
 
+    <div class="card border-0 shadow-sm mb-4">
+        <div class="card-body p-3 bg-primary-ghost-light">
+            <div class="row g-3 align-items-center">
+                <div class="col-md-5">
+                    <label class="form-label small fw-bold text-muted text-uppercase mb-1"><?= _("Garant") ?> <span class="text-danger">*</span></label>
+                    <div class="input-group input-group-sm">
+                        <span class="input-group-text bg-white border-2 border-end-0 text-primary"><i class="fas fa-shield-alt"></i></span>
+                        <select class="form-control selectpicker border-2 border-start-0" data-live-search="true" id="codeGcAssureur" name="codeGcAssureur" onchange="filtreentetetrancheange();" autofocus>
+                            <?php liste_options($garant,""); ?>
+                        </select>
+                    </div>
+                </div>
 
+                <div class="col-md-5">
+                    <label class="form-label small fw-bold text-muted text-uppercase mb-1"><?= _("Type de Tranches d'Âge") ?> <span class="text-danger">*</span></label>
+                    <div id="div_entetetrancheage">
+                        <div class="input-group input-group-sm">
+                            <span class="input-group-text bg-white border-2 border-end-0 text-primary"><i class="fas fa-layer-group"></i></span>
+                            <select class="form-control selectpicker border-2 border-start-0" data-live-search="true" id="codeEnteteTrancheAge" name="codeEnteteTrancheAge" onchange="afficher_trancheage();">
+                                <?php liste_options($entetestrancheage,"",false); ?>
+                            </select>
+                        </div>
+                    </div>
+                </div>
 
-<legend> <?= _("Tranches âges") ?> </legend>
+                <div class="col-md-2 text-center pt-3">
+                    <div id="loader_filtre" class="d-none">
+                        <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
-<table class="table  table-condensed table-responsive" style="font-size:10pt;" >
-	<tbody>	
-		<tr> 
-			<td width="8%" class="required text-center"> <?= _("Garant") ?> </td>
-			<td width="42%">
-				<SELECT style="font-size:10pt; height:30px;" class="form-control selectpicker" data-live-search="true" id="codeGcAssureur" NAME="codeGcAssureur" required AUTOCOMPLETE="OFF" autofocus 
-				onChange="javascript:filtreentetetrancheange();" >
-					<?php liste_options($garant,""); ?>						
-				</SELECT>	
-			</td>
-			
-			<td width="15%" class="required text-center"> <?= _("Type Tranches âge") ?> </td>
-			<td>
-				<div id="div_entetetrancheage">
-					<SELECT style="font-size:10pt; height:30px;" class="form-control selectpicker" data-live-search="true" id="codeEnteteTrancheAge" NAME="codeEnteteTrancheAge" required AUTOCOMPLETE="OFF" autofocus onChange="javascript:afficher_trancheage();">
-						<?php liste_options($entetestrancheage,"",false); ?>						
-					</SELECT>
-				</div>
-			</td>
-		</tr>
-	</tbody>
-</table>	
+    <div id="div_trancheage" class="animate__animated animate__fadeInUp">
+        <div class="text-center p-5 bg-white rounded shadow-sm border border-dashed">
+            <i class="fas fa-mouse-pointer fa-3x text-light mb-3"></i>
+            <p class="text-muted fw-bold"><?= _("Sélectionnez un garant et un type pour afficher les tranches correspondantes.") ?></p>
+        </div>
+    </div>
+</div>
 
-<div id="div_trancheage">
-</div>	
+<style>
+    .bg-primary-ghost { background-color: rgba(33, 46, 83, 0.08) !important; }
+    .bg-primary-ghost-light { background-color: rgba(33, 46, 83, 0.02) !important; }
+    .border-dashed { border-style: dashed !important; border-width: 2px !important; border-color: #dee2e6 !important; }
+    
+    /* Harmonisation Selectpicker */
+    .bootstrap-select > .btn-light {
+        background-color: #fff !important;
+        border: 2px solid #dee2e6 !important;
+        font-size: 10pt !important;
+    }
+</style>
+
+<script>
+/**
+ * Exemple de mise à jour du loader lors des appels
+ */
+function toggleFilterLoader(show) {
+    if(show) $('#loader_filtre').removeClass('d-none');
+    else $('#loader_filtre').addClass('d-none');
+}
+</script>
\ No newline at end of file