diff --git a/Vue/Ajaximporterlisteassure/afficheradherentimportee.php b/Vue/Ajaximporterlisteassure/afficheradherentimportee.php
index 44d6bb3..dbdd656 100644
--- a/Vue/Ajaximporterlisteassure/afficheradherentimportee.php
+++ b/Vue/Ajaximporterlisteassure/afficheradherentimportee.php
@@ -1,102 +1,133 @@
-<div id="div_adherents_importes">
+<div id="div_adherents_importes" class="animate__animated animate__fadeIn">
+    <div class="row g-4">
+        
+        <div id="div_adherents_importes_1" class="col-lg-6">
+            <div class="card shadow-sm border-warning h-100">
+                <div class="card-header bg-warning text-dark py-3 d-flex justify-content-between align-items-center">
+                    <h6 class="mb-0 fw-bold"><i class="fas fa-exclamation-triangle me-2"></i><?= _("Familles hors du collège") ?></h6>
+                    <span class="badge bg-dark"><?= count($adherents) ?></span>
+                </div>
+                
+                <div class="card-body p-2 bg-light">
+                    <div class="row g-2 mb-3">
+                        <div class="col-6">
+                            <button type="button" class="btn btn-primary btn-sm w-100 fw-bold shadow-sm" onclick="ajouter_tous_adherent_importe_college();">
+                                <?= _("Tout ajouter") ?> <i class="fas fa-angle-double-right ms-1"></i>
+                            </button>
+                        </div>
+                        <div class="col-6">
+                            <button type="button" class="btn btn-outline-warning btn-sm w-100 fw-bold shadow-sm text-dark bg-white" onclick="ajouter_sans_college_adherent_importe_college();">
+                                <?= _("Lier les 'Sans Collège'") ?> <i class="fas fa-link ms-1"></i>
+                            </button>
+                        </div>
+                    </div>
 
-	<div class="row">	
-		<div id="div_adherents_importes_1" class="col-xs-6" >
-			<legend> <?= _("Familles hors du collège") ?> </legend>
-			<table class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:8pt;">
-				<thead>
-				  <tr>
-				  
-					<th colspan="3" style='text-align:center'> <?= _("Catégoerie ou Collège") ?> </th>
-					<th colspan="2" style='text-align:center'> <?= _("No Famille") ?> </th>
-					<th colspan="2" style='text-align:center'> <?= _("Familles") ?> </th>
-					
-					<th  style='text-align:center'> => </th>
-				  </tr>
-				  
-				  <tr>
-					<th colspan="3"> <button type="button" style="font-size:10pt;" class="form-control btn btn-primary" onclick="javascript:ajouter_tous_adherent_importe_college();" > <?= _("Ajouter tous") . " ==>" ?> </button> </th> 
+                    <div class="table-responsive scroll-area">
+                        <table class="table table-sm table-hover align-middle bg-white border mb-0" style="font-size: 0.78rem;">
+                            <thead class="table-dark sticky-top">
+                                <tr>
+                                    <th><?= _("Cat/Prod") ?></th>
+                                    <th class="text-center"><?= _("Fam/Adh") ?></th>
+                                    <th><?= _("Bénéficiaire") ?></th>
+                                    <th class="text-center">Action</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <?php foreach ($adherents as $adherent): 
+                                    $idBenef = $adherent['idBeneficiairemodel'];
+                                ?>
+                                <tr>
+                                    <td>
+                                        <div class="fw-bold"><?= $this->nettoyer($adherent['categorie']) ?></div>
+                                        <div class="small <?= ($adherent['idCollege'] <= 0) ? 'text-danger fw-bold' : 'text-muted' ?>">
+                                            <?= $this->nettoyer($adherent['codeProduit']) ?: 'N/A' ?>
+                                        </div>
+                                    </td>
+                                    <td class="text-center">
+                                        <span class="badge bg-light text-dark border fw-normal"><?= $this->nettoyer($adherent['noFamille']) ?></span>
+                                        <div class="x-small text-muted mt-1"><?= $this->nettoyer($adherent['numeroAdherent']) ?></div>
+                                    </td>
+                                    <td>
+                                        <div class="fw-bold text-uppercase"><?= $this->nettoyer($adherent['nom']) ?></div>
+                                        <div class="text-muted small"><?= $this->nettoyer($adherent['prenoms']) ?></div>
+                                    </td>
+                                    <td class="text-center">
+                                        <button class="btn btn-info btn-sm text-white px-2 py-0" onclick="ajouter_un_adherent_importe_college('<?=$idBenef?>');">
+                                            <i class="fas fa-chevron-right"></i>
+                                        </button>
+                                    </td>
+                                </tr>
+                                <?php endforeach; ?>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
 
-					<th colspan="2">  </th>
+        <div id="div_adherents_importes_2" class="col-lg-6">
+            <div class="card shadow-sm border-success h-100">
+                <div class="card-header bg-success text-white py-3 d-flex justify-content-between align-items-center">
+                    <h6 class="mb-0 fw-bold"><i class="fas fa-check-circle me-2"></i><?= _("Membres affectés au collège") ?></h6>
+                    <span class="badge bg-white text-success"><?= count($adherents_college) ?></span>
+                </div>
 
-					<th colspan="3"> <button type="button" style="font-size:10pt;" class="form-control btn btn-warning" onclick="javascript:ajouter_sans_college_adherent_importe_college();" > <?= _("Ajouter les sans collèges"). " ==>" ?> </button> </th>
-				  </tr>
-				  
-				</thead>
+                <div class="card-body p-2 bg-light">
+                    <div class="mb-3">
+                        <button type="button" class="btn btn-danger btn-sm w-100 fw-bold shadow-sm" onclick="retirer_tous_adherent_importe_college();">
+                            <i class="fas fa-angle-double-left me-1"></i> <?= _("Vider le collège sélectionné") ?>
+                        </button>
+                    </div>
 
-				<tbody>
-					<?php foreach ($adherents as $adherent):
-						$idBeneficiairemodel	= $adherent['idBeneficiairemodel'];
-						$idCollege				= $adherent['idCollege'];
-					?>
+                    <div class="table-responsive scroll-area">
+                        <table class="table table-sm table-hover align-middle bg-white border mb-0" style="font-size: 0.78rem;">
+                            <thead class="table-secondary sticky-top">
+                                <tr>
+                                    <th class="text-center">Retirer</th>
+                                    <th><?= _("Cat/Collège") ?></th>
+                                    <th class="text-center"><?= _("Fam/Adh") ?></th>
+                                    <th><?= _("Bénéficiaire") ?></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <?php foreach ($adherents_college as $adh_c): 
+                                    $idBenefC = $adh_c['idBeneficiairemodel'];
+                                ?>
+                                <tr>
+                                    <td class="text-center">
+                                        <button class="btn btn-outline-danger btn-sm py-0 px-2" onclick="retirer_un_adherent_importe_college('<?=$idBenefC?>');">
+                                            <i class="fas fa-chevron-left"></i>
+                                        </button>
+                                    </td>
+                                    <td>
+                                        <div class="fw-bold"><?= $this->nettoyer($adh_c['categorie']) ?></div>
+                                        <div class="text-success small"><?= $this->nettoyer($adh_c['libelleCollege']) ?></div>
+                                    </td>
+                                    <td class="text-center">
+                                        <span class="badge bg-light text-dark border fw-normal"><?= $this->nettoyer($adh_c['noFamille']) ?></span>
+                                    </td>
+                                    <td>
+                                        <div class="fw-bold text-uppercase small"><?= $this->nettoyer($adh_c['nom']) ?> <?= $this->nettoyer($adh_c['prenoms']) ?></div>
+                                    </td>
+                                </tr>
+                                <?php endforeach; ?>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
 
-					<tr valign="top">
-					
-						<td align='center'><?=  $this->nettoyer($adherent['categorie']) ?></td>
-						
-						<?php if ($idCollege>'0'): ?>
-							<td align='center'><?=  $this->nettoyer($adherent['libelleCollege']) ?></td>
-							<td align='center'><?=  $this->nettoyer($adherent['codeProduit']) ?></td>
-						<?php else : ?>
-							<td align='center' style="background-color: yellow;"><?=  $this->nettoyer($adherent['libelleCollege']) ?></td>
-							<td align='center' style="background-color: yellow;"><?=  $this->nettoyer($adherent['codeProduit']) ?></td>
-						<?php endif; ?>
-						
-						
-						<td align='center'><?=  $this->nettoyer($adherent['numeroAdherent']) ?></td>
-						<td align='center'><?=  $this->nettoyer($adherent['noFamille']) ?></td>
-							
-						<td><?= $this->nettoyer($adherent['nom']) ?></td>
-						<td><?= $this->nettoyer($adherent['prenoms']) ?></td>
-						
-						<td align='center'> <input type="button" value="=>" onClick="javascript:ajouter_un_adherent_importe_college('<?=$idBeneficiairemodel?>');" ></td>
-					</tr>
-					<?php endforeach; ?>
-				</tbody>
-			</table>
-		</div>
+    </div>
+</div>
 
-		<div id="div_adherents_importes_2" class="col-xs-6" >
-			<legend> <?= _("Familles du collège") ?> </legend>
-			<table class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:8pt;">
-				<thead>
-				  <tr>
-				  
-					<th  style='text-align:center'> <= </th>
-
-					<th colspan="3" style='text-align:center'> <?= _("Catégoerie ou Collège") ?> </th>
-					<th colspan="2" style='text-align:center'> <?= _("No Famille") ?> </th>
-					<th colspan="2" style='text-align:center'> <?= _("Familles") ?> </th>
-				  </tr>
-				  
-				  <tr>
-					<td colspan="8"> <button type="button" style="font-size:10pt;" class="form-control btn btn-danger" onclick="javascript:retirer_tous_adherent_importe_college();" > <?= "<== " . _("Retirer tous les membres de ce collège") ?> </button> </td>						
-				  </tr>
-				  
-				</thead>
-
-				<tbody>
-					<?php foreach ($adherents_college as $adherent_college):
-						$idBeneficiairemodel=$adherent_college['idBeneficiairemodel'];
-						$idCollege=$adherent_college['idCollege'];
-					?>
-					<tr valign="top">
-						<td align='center'> <input type="button" value="<=" onClick="javascript:retirer_un_adherent_importe_college('<?=$idBeneficiairemodel?>');" ></td>
-						
-						<td align='center'><?=  $this->nettoyer($adherent_college['categorie']) ?></td>
-						<td align='center'><?=  $this->nettoyer($adherent_college['libelleCollege']) ?></td>
-						<td align='center'><?=  $this->nettoyer($adherent_college['codeProduit']) ?></td>
-						
-						<td align='center'><?=  $this->nettoyer($adherent_college['numeroAdherent']) ?></td>
-						<td align='center'><?=  $this->nettoyer($adherent_college['noFamille']) ?></td>
-							
-						<td><?= $this->nettoyer($adherent_college['nom']) ?></td>
-						<td><?= $this->nettoyer($adherent_college['prenoms']) ?></td>
-					</tr>
-					<?php endforeach; ?>
-				</tbody>
-			</table>
-		</div>
-	</div>	
-	
-</div>	
+<style>
+    .scroll-area {
+        height: 450px;
+        overflow-y: auto;
+        border-radius: 4px;
+    }
+    .sticky-top { z-index: 10; }
+    .x-small { font-size: 0.7rem; }
+    .table-sm td { padding: 8px 4px; }
+</style>
\ No newline at end of file