diff --git a/Vue/Baremepriseencharge/index.php b/Vue/Baremepriseencharge/index.php
index 50a6952b..9d4934da 100755
--- a/Vue/Baremepriseencharge/index.php
+++ b/Vue/Baremepriseencharge/index.php
@@ -1,98 +1,65 @@
 <?php 
-
-	$this->titre = "INTER SANTE - Barème de prise en charge initial"; 
-	
-	$codeGcAssureur = isset($_SESSION['codeGcAssureur']) ? $_SESSION['codeGcAssureur']:"";
+    $codeGcAssureur = isset($_SESSION['codeGcAssureur']) ? $_SESSION['codeGcAssureur'] : "";
 ?>
 
+<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-file-invoice-dollar fs-4"></i>
+                </div>
+                <div>
+                    <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Barèmes modèles par produit") ?></h4>
+                    <p class="text-muted small mb-0"><?= _("Gestion des taux de remboursement et barèmes de prise en charge") ?></p>
+                </div>
+            </div>
+            <div>
+                <button class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm btn-sm" onclick="afficher_bareme_produit();">
+                    <i class="fas fa-sync-alt me-1"></i> <?= _("Actualiser") ?>
+                </button>
+            </div>
+        </div>
+    </div>
 
-<legend> <?= _("Barème de prise en charge initial par produit") ?> </legend>
+    <div class="card border-0 shadow-sm mb-1">
+        <div class="card-body bg-light-subtle p-3">
+            <div class="row g-3 align-items-end">
+                <div class="col-md-5">
+                    <label class="form-label small fw-bold text-muted text-uppercase mb-1"><?= _("Garant") ?></label>
+                    <select class="selectpicker form-control border-2" id="codeGcAssureur" name="codeGcAssureur" data-live-search="true" onchange="filtreproduitbareme();">
+                        <?php liste_options($garant, $codeGcAssureur); ?>
+                    </select>
+                </div>
+                <div class="col-md-5">
+                    <label class="form-label small fw-bold text-muted text-uppercase mb-1"><?= _("Produit associé") ?></label>
+                    <div id="div_produit">
+                        <select class="selectpicker form-control border-2" data-live-search="true" disabled>
+                            <option><?= _("-- Sélectionner un garant --") ?></option>
+                        </select>
+                    </div>
+                </div>
+                <div class="col-md-2">
+                    <button class="btn btn-primary w-100 fw-bold py-2 border-2" onclick="afficher_bareme_produit();">
+                        <i class="fas fa-filter me-1"></i> <?= _("Filtrer") ?>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
 
-<INPUT TYPE="text" class="sr-only" id = "nomForm" name = "nomForm" value="listebareme">
-
-
-
-<table class="table  table-condensed table-responsive" style="font-size:10pt;" >
-	<tbody>	
-		<tr> 
-			<td width="8%" class="required text-center"> <?= _("Garant") ?> </td>
-			<td width="40%">
-				<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:filtreproduitbareme();" >
-					<?php liste_options($garant, $codeGcAssureur); ?>						
-				</SELECT>	
-			</td>
-			
-			<td width="8%" class="required text-center"> <?= _("Produit") ?> </td>
-			<td width="32%">
-				<div id="div_produit">
-					<SELECT style="font-size:10pt; height:30px;" class="form-control selectpicker" data-live-search="true" required>
-						<?php liste_options($produits,"",false); ?>						
-					</SELECT>
-				</div>
-			</td>
-			<td width="2%"></td>
-			<td>
-				<td width="10%" align="center"> <input class = "form-control btn btn-primary" 	style="font-size:10pt;" type="button" value="<?= _("Actualiser") ?>" 	onClick="javascript:afficher_bareme_produit();"> </td>
-			</td>
-			
-		</tr>
-	</tbody>
-</table>	
-
-<div id="div_bareme">
+    <div id="div_bareme" class="animate__animated animate__fadeIn">
+        <div class="text-center p-5 bg-white rounded shadow-sm border border-2 border-dashed opacity-50">
+            <i class="fas fa-clipboard-list fa-3x mb-3"></i>
+            <p><?= _("Veuillez sélectionner les critères pour afficher les barèmes.") ?></p>
+        </div>
+    </div>
 </div>
 
-<!--
-<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="Total enregistré : <?= $nbreTotal; ?>" readonly> </td>
-	</tbody>
-</table>
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+		// Initialisation de tes SelectPickers via ta fonction robuste
+		actualiserSelectPicker('.selectpicker');
+	});
 
-<input type="hidden" id="total" value="<?= $nbreTotal; ?>">
-	
-<table class="table table-striped table-bordered table-hover table-condensed table-responsive tabliste compact" style="font-size:10pt;">
-	<thead>
-		<tr>
-			<th style="text-align:center" > <?= _("ID") ?> </th>
-			<th style="text-align:center" > <?= _("Libellé") ?> </th>
-			<th style="text-align:center" > <?= _("Garant") ?> </th>
-			<th style="text-align:center" > <?= _("Taux") ?> </th>
-			<th style="text-align:center" > <?= _("Territoire") ?> </th>
-			<th style="text-align:center"> <?= _("Action") ?> </th>
-			<th style="text-align:center"> <?= _("Voir détail") ?> </th>
-		</tr>
-	</thead>
-	<tbody>
-		<?php 
-			$i = 0;
-			foreach ($baremes as $v):
-			$idBaremes = $this->nettoyer($v['id']);
-			
-			$observation = $this->nettoyer($v['observationBareme']);
-			
-			if(!empty($observation)){
-				$libelle = $observation;
-			}else{
-				$libelle = $this->nettoyer($v['libelle']);
-			}
-			
-			$archiver = $this->nettoyer($v['archiver']);
-			$nbBaremeCollege = $this->nettoyer($v['nbBaremeCollege']);
-			
-			$dansCollege = ($nbBaremeCollege=="0") ? "Non" : "Oui";
-		?>
-			<tr  valign="top">
-				<td align="center"> <?= $idBaremes ?>  </td>
-				<td> <?= $libelle ?>  </td>
-				<td > <?= $this->nettoyer($v['garant']) ?>  </td>
-				<td align="center"> <?= $this->nettoyer($v['tauxRemboursement']) ?>  </td>
-				<td align="center"> <?= $this->nettoyer($v['codeTerritoire']) ?>  </td>
-				<td align="center" width="10%"> <input class = "form-control btn btn-success" style="font-size:10pt;" type="button" value="<?= _("Modifier") ?>" onclick="javascript:modifier_baremepriseencharge(<?= $idBaremes ?>);"> </td>
-				<td align="center" width="10%"> <input class = "form-control btn btn-info" style="font-size:10pt;" type="button" value="<?= _("Détail...") ?>" onclick="javascript:detail_baremepriseencharge(<?= $idBaremes ?>);"> </td>
-			</tr>
-		<?php endforeach; ?>
-	</tbody>
-</table>
--->
\ No newline at end of file
+</script>
\ No newline at end of file