diff --git a/Vue/Ajaxplafondadherent/index.php b/Vue/Ajaxplafondadherent/index.php
index f87519a..ef3babd 100644
--- a/Vue/Ajaxplafondadherent/index.php
+++ b/Vue/Ajaxplafondadherent/index.php
@@ -1,33 +1,59 @@
-<div id="div_gar_exo">	
-	<table class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:10pt;">
-		<thead>
-		  <tr>
-			<th style="text-align:center"> <?= _("Exercice") ?> </th>
-			<th style="text-align:center"> <?= _("Garantie") ?> </th>
-			<th style="text-align:center"> <?= _("Limites Contrat") ?> </th>
-			<th style="text-align:center"> <?= _("Taux Incorporation (%)") ?> </th>
-			<th style="text-align:center"> <?= _("Limites en vigeur") ?> </th>
-			<th style="text-align:center"> <?= _("Consommations") ?> </th>
-			<th style="text-align:center"> <?= _("Solde") ?> </th>
-		</tr>
-		</thead>
-		<tbody>
+<div id="div_gar_exo">
+	<div class="card shadow-sm border-0">
+		<div class="table-responsive">
+			<table class="table table-hover align-middle mb-0">
+				<thead class="table-dark">
+					<tr>
+						<th class="ps-3 fw-normal small text-uppercase"><?= _("Garantie") ?></th>
+						<th class="text-center fw-normal small text-uppercase"><?= _("Contrat (Annuel)") ?></th>
+						<th class="text-center fw-normal small text-uppercase"><?= _("Taux Inc.") ?></th>
+						<th class="text-center fw-normal small text-uppercase"><?= _("Limite en vigueur") ?></th>
+						<th class="text-center fw-normal small text-uppercase"><?= _("Consommé") ?></th>
+						<th class="text-end pe-4 fw-normal small text-uppercase"><?= _("Solde Disponible") ?></th>
+					</tr>
+				</thead>
+				<tbody>
+					<?php foreach ($garantieadherents as $garantieadherent): 
+						$solde = $this->nettoyer($garantieadherent['solde']);
+						$statusClass = ($solde <= 0) ? 'text-danger fw-bold' : 'text-success fw-bold';
+						$rowClass = ($solde <= 0) ? 'table-danger' : '';
+					?>
+						<tr class="<?= $rowClass ?>">
+							<td class="ps-3 fw-bold text-secondary">
+								<?= $this->nettoyer($garantieadherent['garantie']) ?>
+								<div class="text-muted extra-small" style="font-size: 0.75rem;">
+									Réf: <?= $this->nettoyer($garantieadherent['exercieReference']) ?>
+								</div>
+							</td>
+							<td class="text-center text-monospace">
+								<?= format_N($this->nettoyer($garantieadherent['plafondAnnuel'])) ?>
+							</td>
+							<td class="text-center">
+								<span class="badge rounded-pill bg-info text-dark">
+									<?= $this->nettoyer($garantieadherent['tauxAvenant']) ?> %
+								</span>
+							</td>
+							<td class="text-center fw-bold">
+								<?= format_N($this->nettoyer($garantieadherent['plafond'])) ?>
+							</td>
+							<td class="text-center text-primary">
+								<?= format_N($this->nettoyer($garantieadherent['consommation'])) ?>
+							</td>
+							<td class="text-end pe-4 <?= $statusClass ?>">
+								<?php if($solde <= 0): ?>
+									<i class="fa-solid fa-circle-exclamation me-1"></i>
+								<?php endif; ?>
+								<?= format_N($solde) ?>
+							</td>
+						</tr>
+					<?php endforeach; ?>
+				</tbody>
+			</table>
+		</div>
 		
-			<?php foreach ($garantieadherents as $garantieadherent):?>
-				<tr valign="top">
-					<td align='center'> <?= $this->nettoyer($garantieadherent['exercieReference'])?> </td>
-					<td align='center'> <?= $this->nettoyer($garantieadherent['garantie'])?> </td>
-					<td align='center'><?= format_N($this->nettoyer($garantieadherent['plafondAnnuel'])) ?></td>
-					<td align='center'><?= $this->nettoyer($garantieadherent['tauxAvenant']) ?></td>
-					<td align='center'><?= format_N($this->nettoyer($garantieadherent['plafond'])) ?></td>
-					<td align='center'><?= format_N($this->nettoyer($garantieadherent['consommation'])) ?></td>
-					<td align='center'><?= format_N($this->nettoyer($garantieadherent['solde'])) ?></td>
-				</tr>
-			<?php endforeach; ?>
-		</tbody>
-	</table>
-	
-	<div id="div_export_a">	
-	</div>				
-	
-</div>				
+		<div class="card-footer bg-light py-3">
+			<div id="div_export_a" class="d-flex justify-content-end gap-2">
+				</div>
+		</div>
+	</div>
+</div>