diff --git a/Controleur/ControleurTableauajustementprimesgarant.php b/Controleur/ControleurTableauajustementprimesgarant.php
index 9a5a525b..88f2c4fd 100755
--- a/Controleur/ControleurTableauajustementprimesgarant.php
+++ b/Controleur/ControleurTableauajustementprimesgarant.php
@@ -2,24 +2,25 @@
 require_once 'Framework/Controleur.php';
 require_once 'Modele/Menuvueutilisateur.php';
 require_once 'Modele/Baremeaccessoiregarant.php';
+require_once 'Modele/Gestionconfiee.php';
 
 class ControleurTableauajustementprimesgarant extends Controleur {
 	private $menuvue;
 	private $bareme;
+	private $garant;
 	
     public function __construct() {
-		$this->menuvue = new Menuvueutilisateur();
+		$this->menuvue 	= new Menuvueutilisateur();
 		$this->menuvue->getMenuVue('Tableauajustementprimesgarant');	
 		
-		$this->bareme = new Baremeaccessoiregarant();
+		$this->bareme 	= new Baremeaccessoiregarant();
+		$this->garant 	= (new Gestionconfiee())->getListe();
     }
 
     public function index() {
-		$garant   = $this->bareme->getgarant();
-		$chemin 	= $this->menuvue->getChemin('Baremeaccessoiregarant');
-	
 		
-		$this->genererVue(array('garant' => $garant, 'chemin' => $chemin, 'chemin' => $chemin));  
+		$this->genererVue(array('garant' => $this->garant));  
+
     }
  } 
   
diff --git a/Vue/Tableauajustementprimesgarant/index.php b/Vue/Tableauajustementprimesgarant/index.php
index f17ac81f..27ff2f9b 100755
--- a/Vue/Tableauajustementprimesgarant/index.php
+++ b/Vue/Tableauajustementprimesgarant/index.php
@@ -1,30 +1,66 @@
-<?php $this->titre = "INTER SANTE - Grille des taux d'ajustement garnt "; ?>
+<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-chart-bar fs-4"></i>
+                </div>
+                <div>
+                    <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Taux d'ajustement Garant") ?></h4>
+                    <p class="text-muted small mb-0"><?= _("Gestion des taux d'ajustement S/P spécifiques par Garant") ?></p>
+                </div>
+            </div>
+            <div class="d-flex gap-2">
+                <input class="sr-only" type="text" id="nomForm" name="nomForm" value="frmtauxAjustementgarant">
+            </div>
+        </div>
+    </div>
 
-<INPUT class="sr-only" TYPE="text" id="nomForm" name="nomForm" value="frmtauxAjustementgarant">
+    <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-user-tie"></i>
+                        </span>
+                        <select class="form-select selectpicker" 
+                                data-live-search="true" 
+                                id="codeGcAssureur" 
+                                name="codeGcAssureur" 
+                                required 
+                                autocomplete="off" 
+                                autofocus 
+                                onchange="javascript:afficher_tauxajustement_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> <?= _("Grille des taux d'ajustement 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_tauxajustement_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 bg-white rounded shadow-sm border">
+            <i class="fas fa-search-dollar fa-3x mb-3 text-primary"></i>
+            <p class="fw-bold mb-0 text-muted"><?= _("Sélectionnez un garant pour consulter sa grille d'ajustement.") ?></p>
+        </div>
+    </div>
 </div>
 
-<div id="div_maj_table">
-		
-</div>
-
-<div id="div_lister_table">
-	
-</div>
\ No newline at end of file
+<style>
+    /* Harmonisation Selectpicker */
+    .bootstrap-select .dropdown-toggle {
+        border-color: #dee2e6 !important;
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+    }
+</style>
\ No newline at end of file