diff --git a/Vue/Produitreseau/index.php b/Vue/Produitreseau/index.php
index b4efdc71..b27ee92d 100755
--- a/Vue/Produitreseau/index.php
+++ b/Vue/Produitreseau/index.php
@@ -1,29 +1,91 @@
-<?php $this->titre = "INTER SANTE - Réseaux de soins par produit"; ?>
+<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-layer-group fs-4"></i>
+                </div>
+                <div>
+                    <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Réseaux de soins par produit") ?></h4>
+                    <p class="text-muted small mb-0"><?= _("Configuration des accès réseaux pour les garanties") ?></p>
+                </div>
+            </div>
+        </div>
+    </div>
 
-<legend> <?= _("Réseaux de soins par produit") ?> </legend>
+    <div class="card border-0 shadow-sm mb-1">
+        <div class="card-body bg-light-subtle p-4">
+            <div class="row g-4 align-items-end">
+                <div class="col-md-6">
+                    <label class="form-label small fw-bold text-muted text-uppercase mb-2">
+                        <i class="fas fa-shield-alt me-1 text-primary"></i> <?= _("Garant") ?>
+                    </label>
+                    <select class="selectpicker form-control border-2" 
+                            id="codeGcAssureur" 
+                            name="codeGcAssureur" 
+                            data-live-search="true" 
+                            required 
+                            autocomplete="off" 
+                            autofocus 
+                            onchange="filtreproduitreseau();">
+                        <?php liste_options($garant,""); ?>                     
+                    </select>   
+                </div>
+                
+                <div class="col-md-6">
+                    <label class="form-label small fw-bold text-muted text-uppercase mb-2">
+                        <i class="fas fa-briefcase-medical me-1 text-primary"></i> <?= _("Produit") ?>
+                    </label>
+                    <div id="div_produit">
+                        <select class="selectpicker form-control border-2" 
+                                id="idProduit" 
+                                name="idProduit" 
+                                data-live-search="true" 
+                                required 
+                                onchange="afficher_reseaux_produit();">
+                            <?php liste_options($produit,"",false); ?>                      
+                        </select>
+                    </div>
+                </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="42%">
-				<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:filtreproduitreseau();" >
-					<?php liste_options($garant,""); ?>						
-				</SELECT>	
-			</td>
-			
-			<td width="8%" class="required text-center"> <?= _("Produit") ?> </td>
-			<td width="42%">
-				<div id="div_produit">
-					<SELECT style="font-size:10pt; height:30px;" class="form-control selectpicker" data-live-search="true" required>
-						<?php liste_options($produit,"",false); ?>						
-					</SELECT>
-				</div>
-			</td>
-		</tr>
-	</tbody>
-</table>	
+    <div id="div_produitreseau" class="animate__animated animate__fadeInUp">
+        <div class="text-center p-5 bg-white rounded shadow-sm border border-2 border-dashed">
+            <div class="opacity-25 mb-3">
+                <i class="fas fa-search-plus fa-4x text-muted"></i>
+            </div>
+            <h5 class="text-muted fw-bold"><?= _("Sélectionnez un garant et un produit") ?></h5>
+            <p class="text-muted small"><?= _("Les réseaux associés s'afficheront ici après filtrage.") ?></p>
+        </div>
+    </div>
+</div>
 
-<div id="div_produitreseau">
-</div>	
+<style>
+    /* Harmonisation SelectPicker Neutral Pro */
+    .bootstrap-select .btn.dropdown-toggle {
+        padding-top: 0.6rem !important;
+        padding-bottom: 0.6rem !important;
+        height: 45px !important;
+        font-size: 10pt !important;
+        font-weight: 600 !important;
+        border-width: 2px !important;
+        background-color: #fff !important;
+    }
+    
+    .bootstrap-select .filter-option {
+        display: flex;
+        align-items: center;
+    }
+
+    .border-dashed { border-style: dashed !important; }
+    .bg-primary-ghost { background-color: rgba(33, 46, 83, 0.08) !important; }
+</style>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+		// Initialisation de tes SelectPickers via ta fonction robuste
+		actualiserSelectPicker('.selectpicker');
+	});
+</script>
\ No newline at end of file