diff --git a/Vue/Gcassureur/index.php b/Vue/Gcassureur/index.php
index 0ebc5e61..15d607b4 100755
--- a/Vue/Gcassureur/index.php
+++ b/Vue/Gcassureur/index.php
@@ -1,35 +1,91 @@
-<?php $this->titre = "INTER SANTE - Garants"; ?>
+<div class="page-content">
+    <div class="header-section mb-4">
+        <div class="d-flex align-items-center bg-white p-3 shadow-sm border-start border-primary border-4" style="border-radius: var(--radius-md);">
+            <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-user-shield fs-4"></i>
+            </div>
+            <div>
+                <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Gestion des Garants") ?></h4>
+                <p class="text-muted small mb-0"><?= _("Recherche et configuration des porteurs de risque") ?></p>
+            </div>
+        </div>
+    </div>
 
+    <div class="card border-0 shadow-sm mb-4">
+        <div class="card-header bg-white py-3 border-bottom">
+            <h6 class="mb-0 fw-bold text-muted small text-uppercase">
+                <i class="fas fa-search me-2"></i><?= _("Critères de recherche") ?>
+            </h6>
+        </div>
+        <div class="card-body p-4">
+            <form id="formRecherche" onsubmit="return false;">
+                <div class="row g-3 align-items-end">
+                    <div class="col-md-3">
+                        <label class="form-label fw-bold text-muted small text-uppercase"><?= _("Type") ?></label>
+                        <select class="selectpicker form-control border-2 shadow-xs" id="typeGarant" name="typeGarant" data-live-search="true" data-container="body">
+                            <?php liste_options_consultation($typegc, ""); ?> 
+                        </select>
+                    </div>
 
+                    <div class="col-md-2">
+                        <label class="form-label fw-bold text-muted small text-uppercase"><?= _("Code") ?></label>
+                        <div class="input-group shadow-xs">
+                            <span class="input-group-text bg-white border-2 border-end-0"><i class="fas fa-barcode text-muted"></i></span>
+                            <input type="text" class="form-control border-2 border-start-0 fw-bold" id="codeGcAssureur" name="codeGcAssureur" onkeypress="ctrlkeypress_liste_garants(event);">
+                        </div>
+                    </div>
 
-<legend><?=_("RECHERCHER DES GARANTS")?></legend>
+                    <div class="col-md-5">
+                        <label class="form-label fw-bold text-muted small text-uppercase"><?= _("Nom du Garant") ?></label>
+                        <div class="input-group shadow-xs">
+                            <span class="input-group-text bg-white border-2 border-end-0"><i class="fas fa-building text-primary"></i></span>
+                            <input type="text" class="form-control border-2 border-start-0 majuscule fw-bold" id="libelle" name="libelle" onkeypress="ctrlkeypress_liste_garants(event);">
+                        </div>
+                    </div>
 
-<table class="table table-responsive table-condensed" style='font-size:10pt;'>
-	<tbody>	
-		<tr> 
-			<td width="5%" align="center"> <?= _("Type") ?>  </td>
-			<td width="25%">
-				<select class="form-select" id="typeGarant" NAME="typeGarant" style='font-size:10pt;'>
-					<?php liste_options_consultation($typegc, ""); ?>						
-				</SELECT>
-			</td>
-			
-			<td width="5%" align="center"> <?= _("Code") ?> </td>
-			<td width="15%" > <INPUT style='font-size:10pt;' class="form-control" type="text" id="codeGcAssureur" name="codeGcAssureur" onkeypress="javascript:ctrlkeypress_liste_garants(event);" > </td>
-			
-			
-			<td width="5%" align="center"> <?= _("Nom") ?> </td>
-			<td width="45%" > <INPUT style='font-size:10pt;' class="form-control" type="text" id="libelle" name="libelle" onkeypress="javascript:ctrlkeypress_liste_garants(event);" > </td>
-			
-			<td>  </td>
-			<td> <button style='font-size:10pt;' type="button" class="form-control btn btn-primary" onclick="javascript:afficher_liste_garants();"> <?= _("Afficher...") ?> </button> </td>
-		</tr>	
-		<tr> 
-			<td colspan="8"> <input class="form-control" style="text-align: center; font-size:10pt;" type="text" id="nbligne" name="nbligne" value="<?= _("Nombre Lignes").": 0" ?>"  readonly> </td>
-		</tr>
-	</tbody>
-</table>	
+                    <div class="col-md-2">
+                        <button type="button" class="btn btn-primary w-100 rounded-pill fw-bold shadow-sm py-2" onclick="afficher_liste_garants();">
+                            <i class="fas fa-sync-alt me-2"></i><?= _("Afficher") ?>
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
 
-<div id="div_gcs" >	
-	
-</div>	
\ No newline at end of file
+    <div class="results-section">
+        <div id="div_gcs">
+            <div class="text-center p-5 bg-white rounded shadow-xs border border-dashed">
+                <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-list-check fa-2x"></i>
+                </div>
+                <h6 class="text-muted fw-bold"><?= _("Lancez une recherche pour afficher la liste des garants") ?></h6>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    $(document).ready(function() {
+        // Initialisation SelectPicker
+        if (typeof actualiserSelectPicker === 'function') {
+            actualiserSelectPicker('#typeGarant', false);
+        } else {
+            $('#typeGarant').selectpicker({ container: 'body', liveSearch: true });
+        }
+
+        // Focus Neutral Pro
+        setTimeout(function() {
+            $('#libelle').focus();
+        }, 200);
+    });
+</script>
+
+<style>
+    /* Intégration Design System */
+    .bg-primary-ghost { background-color: rgba(33, 46, 83, 0.08) !important; }
+    .shadow-xs { box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
+    .form-control.border-2, .input-group-text.border-2 { border-width: 2px !important; }
+    .majuscule { text-transform: uppercase; }
+    .border-dashed { border-style: dashed !important; }
+</style>
\ No newline at end of file