diff --git a/Vue/Paramseuilalerte/index.php b/Vue/Paramseuilalerte/index.php
index d0505ceb..c22bed83 100755
--- a/Vue/Paramseuilalerte/index.php
+++ b/Vue/Paramseuilalerte/index.php
@@ -1,38 +1,52 @@
-<?php $this->titre = "INTER SANTE - Seuil alerte consommation"; ?>
+<div class="page-content">
+    <div class="header-section mb-4">
+        <div class="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 mb-3">
+                <div class="icon-shape bg-primary-ghost text-primary rounded-circle me-3" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;">
+                    <i class="fas fa-bell-slash fs-5"></i>
+                </div>
+                <div>
+                    <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Gestion des seuils de consommation") ?></h4>
+                    <nav aria-label="breadcrumb">
+                        <ol class="breadcrumb mb-0 small">
+                            <li class="breadcrumb-item text-muted"><?= _("Configuration") ?></li>
+                            <li class="breadcrumb-item active text-secondary fw-medium"><?= _("Seuils de consommation par produit") ?></li>
+                        </ol>
+                    </nav>
+                </div>
+            </div>
 
-<script type="text/javascript">
+            <div class="row g-3 align-items-end p-3 rounded-3" style="background-color: #f8f9fa;">
+                <div class="col-md-5">
+                    <label class="form-label small fw-bold text-dark"><i class="fas fa-building me-1 text-primary"></i> <?= _("Garant") ?></label>
+                    <select class="form-select selectpicker w-100" data-live-search="true" id="codeGcAssureur" name="codeGcAssureur" onchange="javascript:filtreproduitgarant();" required>
+                        <?php liste_options($garant, ""); ?>
+                    </select>
+                </div>
 
-</script>
+                <div class="col-md-5">
+                    <label class="form-label small fw-bold text-dark"><i class="fas fa-box-open me-1 text-primary"></i> <?= _("Produit Santé") ?></label>
+                    <div id="div_produit">
+                        <select class="form-select selectpicker w-100" data-live-search="true" required disabled>
+                            <?php liste_options($produits,""); ?>
+                        </select>
+                    </div>
+                </div>
 
-<legend> <?= _("Seuil alerte consommation") ?> </legend>
+                <div class="col-md-2">
+                    <button class="btn btn-primary w-100 fw-bold shadow-sm" onclick="javascript:afficher_garantie_produit_cons();">
+                        <i class="fas fa-sync-alt me-2"></i><?= _("Actualiser") ?>
+                    </button>
+                </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="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:filtreproduitgarant();" >
-					<?php liste_options($garant, ""); ?>						
-				</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,""); ?>						
-					</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_garantie_produit_cons();"> </td>
-			</td>
-			
-		</tr>
-	</tbody>
-</table>
-
-<div id="div_garantieproduit">
-</div>	
\ No newline at end of file
+    <div id="div_garantieproduit" class="mt-4">
+        <div class="text-center p-5 text-muted opacity-50">
+            <i class="fas fa-search fa-3x mb-3"></i>
+            <p><?= _("Veuillez sélectionner un garant et un produit pour afficher les seuils.") ?></p>
+        </div>
+    </div>
+</div>
\ No newline at end of file