diff --git a/Vue/Baremeaccessoiregarant/index.php b/Vue/Baremeaccessoiregarant/index.php
index 40150209..110acd1d 100755
--- a/Vue/Baremeaccessoiregarant/index.php
+++ b/Vue/Baremeaccessoiregarant/index.php
@@ -1,30 +1,80 @@
-<?php $this->titre = "INTER SANTE - Tableau des tranches d'accessoires Garant"; ?>
+<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-user-shield fs-4"></i>
+                </div>
+                <div>
+                    <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Tranches d'accessoires Garant") ?></h4>
+                    <p class="text-muted small mb-0"><?= _("Configuration des barèmes de frais accessoires spécifiques par garant") ?></p>
+                </div>
+            </div>
+            <div class="d-flex gap-2">
+                <input class="sr-only" type="text" id="nomForm" name="nomForm" value="frmbaremegarant">
+            </div>
+        </div>
+    </div>
 
-<INPUT class="sr-only" TYPE="text" id="nomForm" name="nomForm" value="frmbaremegarant">
+    <div class="card border-0 shadow-sm mb-3">
+        <div class="card-body p-4">
+            <div class="row align-items-center justify-content-center">
+                <div class="col-md-2 text-md-end">
+                    <label for="codeGcAssureur" class="fw-bold text-uppercase small text-muted required">
+                        <?= _("Garant") ?> :
+                    </label>
+                </div>
+                <div class="col-md-6">
+                    <div class="input-group">
+                        <span class="input-group-text bg-white border-primary-subtle text-primary">
+                            <i class="fas fa-handshake"></i>
+                        </span>
+                        <select class="form-select selectpicker" 
+                                data-live-search="true" 
+                                id="codeGcAssureur" 
+                                name="codeGcAssureur" 
+                                required 
+                                autocomplete="off" 
+                                autofocus 
+                                onchange="javascript:afficher_bareme_accessoire_garant();">
+                            <?php liste_options($garant, "", false); ?>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
+    <div id="div_entete_table" class="mb-2 animate__animated animate__fadeIn"></div>
+    
+    <div id="div_maj_table" class="mb-3 animate__animated animate__fadeIn"></div>
 
-
-<legend> <?= _("Tableau des tranches d'accessoires Garant") ?> </legend>
-
-<table class="table table-responsive table-condensed">
-	<tbody>	
-		<td width="5%" class="required"> <?= _("Garant") ?> </td>
-		<td>
-			<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:afficher_bareme_accessoire_garant();" >
-				<?php liste_options($garant,"",false); ?>						
-			</SELECT>	
-		</td>
-	</tbody>
-</table>
-
-<div id="div_entete_table">
-	
+    <div id="div_lister_table" class="animate__animated animate__fadeIn">
+        <div class="text-center p-5 opacity-50">
+            <i class="fas fa-search fa-3x mb-3 text-primary"></i>
+            <p class="fw-bold"><?= _("Veuillez sélectionner un garant pour afficher son barème.") ?></p>
+        </div>
+    </div>
 </div>
 
-<div id="div_maj_table">
-		
-</div>
-
-<div id="div_lister_table">
-	
-</div>
+<style>
+    /* Style spécifique pour l'icône de l'entête */
+    .bg-primary-ghost { 
+        background-color: rgba(13, 110, 253, 0.1); 
+    }
+    
+    /* Harmonisation du selectpicker */
+    .bootstrap-select .dropdown-toggle {
+        border-color: #dee2e6 !important;
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+    }
+    
+    /* Animation de chargement si besoin */
+    .loading-overlay {
+        min-height: 200px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>
\ No newline at end of file