diff --git a/Vue/Liercolleges/index.php b/Vue/Liercolleges/index.php
index 069c0ab..2afdd47 100644
--- a/Vue/Liercolleges/index.php
+++ b/Vue/Liercolleges/index.php
@@ -1,20 +1,51 @@
-<?php $this->titre = "INTER-SANTE - Lier collèges"; ?>
+<div id="div_liste_adherent" class="container-fluid py-4 animate__animated animate__fadeIn">
+    
+	<h1 class="text-primary"><i class="fas fa-link me-2 me-2"></i></i> <?= _("Association des assurés aux collèges") ?></h1>
 
-<legend> <?= _("Lier les assurés importés à un collège") ?> </legend>
+    <div class="card shadow-sm border-0 mb-4">
+        <div class="card-body bg-light-subtle">
+            <div class="row align-items-center">
+                <div class="col-md-3">
+                    <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Choisir le collège cible") ?></label>
+                </div>
+                <div class="col-md-6">
+                    <div class="input-group">
+                        <span class="input-group-text bg-white border-primary-subtle text-primary">
+                            <i class="fas fa-university"></i>
+                        </span>
+                        <select class="form-select border-primary-subtle fw-bold" 
+                                id="idCollege" 
+                                name="idCollege" 
+                                required 
+                                autofocus 
+                                onchange="afficher_adherent_importee();">
+                            <?php liste_options($college, ""); ?>
+                        </select>
+                    </div>
+                </div>
+                <div class="col-md-3">
+                    <div id="statut_selection" class="small text-muted italic">
+                        <i class="fas fa-info-circle me-1"></i> <?= _("Sélectionnez un collège pour voir les assurés correspondants.") ?>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
-<table class="table  table-condensed table-responsive" style="font-size:10pt;" >
-	<tbody>	
-		<tr> 
-			
-			<td width="15%" > <?= _("Collège") ?> </td>
-			<td>
-				<SELECT style="font-size:10pt;" class="form-control" id="idCollege" NAME="idCollege" required autofocus onChange="afficher_adherent_importee();" >
-					<?php liste_options($college,""); ?>						
-				</SELECT>	
-			</td>
-		</tr>
-	</tbody>
-</table>	
+    <div id="div_adherents_importes" class="min-vh-25">
+        <div class="text-center py-5 text-muted">
+            <i class="fas fa-arrow-up fa-2x mb-3 animate__animated animate__bounce animate__infinite"></i>
+            <p><?= _("En attente de sélection du collège...") ?></p>
+        </div>
+    </div>
+</div>
 
-<div id="div_adherents_importes">
-</div>	
+<style>
+    .min-vh-25 { min-height: 250px; }
+    .italic { font-style: italic; }
+    /* Effet focus sur le select */
+    .form-select:focus {
+        border-color: #0d6efd;
+        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
+    }
+</style>
\ No newline at end of file