diff --git a/Vue/Beneficiaireprimeadherent/index.php b/Vue/Beneficiaireprimeadherent/index.php
index 0265669..585e28f 100644
--- a/Vue/Beneficiaireprimeadherent/index.php
+++ b/Vue/Beneficiaireprimeadherent/index.php
@@ -1,25 +1,58 @@
-<?php 
-	$this->titre = "INTER-SANTE - Fiche Emission"; 
+<?php $this->titre = "INTER-SANTE - Fiche Emission"; ?>
 
-?>
+<div class="container-fluid py-3">
+    <div class="card border-0 shadow-sm mb-4">
+        <div class="card-header bg-primary text-white py-3">
+            <h5 class="mb-0 fs-6 text-uppercase fw-bold">
+                <i class="fa-solid fa-file-invoice-dollar me-2"></i><?= _("Détail des primes de la famille") ?>
+            </h5>
+        </div>
+        <div class="card-body bg-light">
+            <div class="row align-items-end g-3">
+                <div class="col-md-3">
+                    <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Période du") ?></label>
+                    <div class="input-group shadow-sm">
+                        <span class="input-group-text bg-white border-end-0"><i class="fa-solid fa-calendar-day text-primary"></i></span>
+                        <input style='text-align:center; font-size:10pt;' class="form-control datepicker border-start-0" type="text" id="debutPeriode" name="debutPeriode" value="<?= dateLang($this->nettoyer($adherent['dateEffet'])) ?>">
+                    </div>
+                </div>
 
-<legend> <?= _("Détail des primes de la famille") ?> </legend>
+                <div class="col-md-3">
+                    <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Au") ?></label>
+                    <div class="input-group shadow-sm">
+                        <span class="input-group-text bg-white border-end-0"><i class="fa-solid fa-calendar-check text-primary"></i></span>
+                        <input style='text-align:center; font-size:10pt;' class="form-control datepicker border-start-0" type="text" id="finPeriode" name="finPeriode" value="<?= dateLang($this->nettoyer($adherent['dateFinPolice'])) ?>">
+                    </div>
+                </div>
 
-<table class="table table-responsive table-condensed" style='font-size:8pt;'>
-	<tbody>	
-		<tr> 
-			<td width="10%" > <?= _("Période du") ?> </td>
-			<td  width="15%"> <INPUT style='text-align:center; font-size:10pt;'  class="form-control datepicker" TYPE="text" id="debutPeriode" NAME="debutPeriode" value="<?= dateLang($this->nettoyer($adherent['dateEffet'])) ?>"  > </td>
+                <div class="col-md-3">
+                    <button type="button" class="btn btn-primary w-100 shadow-sm fw-bold py-2" onclick="javascript:afficher_beneficiare_prime_adherent();">
+                        <i class="fa-solid fa-rotate me-2"></i><?= _("Actualiser la fiche") ?>
+                    </button>
+                </div>
+                
+                <div class="col-md-3">
+                    <div class="p-2 border rounded bg-white text-center shadow-sm">
+                        <span class="extra-small text-muted d-block text-uppercase"><?= _("Statut Police") ?></span>
+                        <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-3">Actif</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
-			<td align="center" > <?= _("au") ?> </td>
-			<td  width="15%"> <INPUT style='text-align:center; font-size:10pt;'  class="form-control datepicker" TYPE="text" id="finPeriode" NAME="finPeriode" value="<?= dateLang($this->nettoyer($adherent['dateFinPolice'])) ?>"  > </td>
-			
-			<td>  <button style='font-size:10pt;' type="button" class="form-control btn btn-primary" onclick="javascript:afficher_beneficiare_prime_adherent();"> <?= _("Actualiser...") ?> </button> </td>
-		</tr>			
-	</tbody>
-</table>	
+    <div id="div_detail_requete" class="rounded shadow-sm bg-white p-2"> 
+        <div class="text-center py-5 text-muted">
+            <div class="spinner-border spinner-border-sm me-2 text-primary" role="status"></div>
+            <?= _("Chargement des données de primes...") ?>
+        </div>
+        <?php // require "Vue/Ajaxbeneficiaireprimeadherent/index.php"; ?>
+    </div>
+</div>
 
-<div id="div_detail_requete">	
-	<?php require "Vue/Ajaxbeneficiaireprimeadherent/index.php";?>
- </div>
- 
+<style>
+    .extra-small { font-size: 0.65rem; }
+    .form-label { margin-bottom: 0.3rem; letter-spacing: 0.5px; }
+    .input-group-text { color: #6c757d; font-size: 0.9rem; }
+    #div_detail_requete { min-height: 200px; transition: all 0.3s ease; }
+</style>
\ No newline at end of file