diff --git a/Js/fonctions.js b/Js/fonctions.js
index b94d19b4..8c6151d3 100755
--- a/Js/fonctions.js
+++ b/Js/fonctions.js
@@ -34416,7 +34416,7 @@ function afficher_garantie_produit_cons() {
             // INITIALISATION DATATABLE
             setTimeout(function() {
                 const nomGarant = $("#codeGcAssureur option:selected").text();
-                initSmartTable('#tableSeuils', 'Seuils d\'alerte - ' + nomGarant);
+                initSmartTable('#tableSeuils', 'Seuils d\'alerte - ' + nomGarant, false);
             }, 150);
         },
         error: function() {
diff --git a/Vue/Modifparamseuilalerte/index.php b/Vue/Modifparamseuilalerte/index.php
index 8520a25d..0fb5dd50 100755
--- a/Vue/Modifparamseuilalerte/index.php
+++ b/Vue/Modifparamseuilalerte/index.php
@@ -1,45 +1,64 @@
-<?php $this->titre = "INTER SANTE - Seuil alerte consommation"; 
-
-	$codeGcAssureur = isset($_SESSION['codeGcAssureur_S']) ? $_SESSION['codeGcAssureur_S'] : "";
-	$codeProduit 	= isset($_SESSION['codeProduit_S']) ? $_SESSION['codeProduit_S'] : "";
+<?php
+    $codeGcAssureur = isset($_SESSION['codeGcAssureur_S']) ? $_SESSION['codeGcAssureur_S'] : "";
+    $codeProduit    = isset($_SESSION['codeProduit_S']) ? $_SESSION['codeProduit_S'] : "";
 ?>
 
-<script type="text/javascript">
+<div class="page-content">
+    <div class="header-section mb-4">
+        <div class="bg-white p-3 shadow-sm border-start border-warning border-4" style="border-radius: var(--radius-md);">
+    
+            <div class="d-flex align-items-center mb-3">
+                <div class="icon-shape bg-warning-ghost text-warning rounded-circle me-3" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;">
+                    <i class="fas fa-edit fs-5"></i>
+                </div>
+                <div>
+                    <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Modification des Seuils de consommation") ?></h4>
+                    <p class="text-muted small mb-0"><?= _("Ajustez les taux et forfaits d'alerte par produit de santé") ?></p>
+                </div>
+            </div>
 
-</script>
+            <div class="row g-2 align-items-end p-2 rounded-3 border" style="background-color: #fafafa;">
+                <div class="col-md-5">
+                    <label class="form-label small fw-bold text-muted ps-2 mb-1"><?= _("Garant") ?></label>
+                    <select class="form-select selectpicker w-100" data-live-search="true" id="codeGcAssureur" name="codeGcAssureur" required onchange="javascript:filtreproduitgarant();">
+                        <?php liste_options($garant, $codeGcAssureur); ?>
+                    </select>
+                </div>
 
-<legend> <?= _("Modification Seuil alerte consommation") ?> </legend>
+                <div class="col-md-5">
+                    <label class="form-label small fw-bold text-muted ps-2 mb-1"><?= _("Produit Santé") ?></label>
+                    <div id="div_produit">
+                        <select class="form-select selectpicker w-100" data-live-search="true" id="codeProduit" name="codeProduit" required>
+                            <?php liste_options($produits, $codeProduit); ?>
+                        </select>
+                    </div>
+                </div>
 
-<INPUT class="sr-only" TYPE="text" id="nomForm" NAME="nomForm" value="modifierseuilalerte" >
+                <div class="col-md-2">
+                    <button class="btn btn-warning w-100 fw-bold text-white shadow-sm" onclick="javascript:afficher_garantie_produit();">
+                        <i class="fas fa-search 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, $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" id="codeProduit" NAME="codeProduit" required>
-						<?php liste_options($produits, $codeProduit); ?>						
-					</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();"> </td>
-			</td>
-			
-		</tr>
-	</tbody>
-</table>
+    <div id="div_garantieproduit" class="mt-4">
+        <?php if($codeGcAssureur != "" && $codeProduit != ""): ?>
+            <script>window.addEventListener('load', function() { afficher_garantie_produit(); });</script>
+        <?php else: ?>
+            <div class="text-center p-5 bg-white shadow-sm rounded-3">
+                <div class="icon-shape bg-light text-muted rounded-circle mx-auto mb-3" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
+                    <i class="fas fa-mouse-pointer fa-2x"></i>
+                </div>
+                <h6 class="text-muted"><?= _("Sélectionnez un couple Garant/Produit pour modifier les seuils") ?></h6>
+            </div>
+        <?php endif; ?>
+    </div>
+</div>
 
-
-<div id="div_garantieproduit">
-</div>	
\ No newline at end of file
+<style>
+    .bg-warning-ghost { background-color: rgba(243, 156, 18, 0.1) !important; color: #e67e22 !important; }
+    .breadcrumb-item + .breadcrumb-item::before { content: "›"; }
+    .form-select.selectpicker + .btn { border: 2px solid #eee !important; border-radius: 8px; }
+</style>
\ No newline at end of file