diff --git a/Vue/Parambons/index.php b/Vue/Parambons/index.php
index cb10cab9..e9103907 100755
--- a/Vue/Parambons/index.php
+++ b/Vue/Parambons/index.php
@@ -1,40 +1,98 @@
-<?php $this->titre = "INTER SANTE - Durée de vie des bons"; ?>
+<?php $this->titre = "INTER SANTE - " . _("Durée de vie des bons"); ?>
 
+<div class="page-content">
+    <div class="header-section mb-4">
+        <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between bg-white p-3 shadow-sm border-start border-primary border-4" style="border-radius: var(--radius-md);">
+            <div class="d-flex align-items-center">
+                <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-hourglass-half fs-4"></i>
+                </div>
+                <div>
+                    <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Gestion des Bons") ?></h4>
+                    <p class="text-muted small mb-0"><?= _("Paramétrage des durées de validité et modes de gestion par type de prestation") ?></p>
+                </div>
+            </div>
 
-<script type="text/javascript">
+            <div class="position-relative mt-3 mt-md-0" style="min-width: 300px;">
+                <i class="fas fa-search position-absolute top-50 start-0 translate-middle-y ms-3 text-muted"></i>
+                <input type="text" id="globalSearch" class="form-control ps-5 border-2 rounded-pill shadow-none" style="font-size: 0.85rem;" placeholder="<?= _('Rechercher un type de bon...') ?>">
+            </div>
+        </div>
+    </div>
 
+    <div class="card border-0 shadow-sm overflow-hidden" style="border-radius: var(--radius-md);">
+        <div class="card-body p-0">
+            <div class="table-responsive">
+                <table class="table table-hover align-middle mb-0">
+                    <thead class="bg-light text-muted small text-uppercase">
+                        <tr>
+                            <th class="ps-4 border-0"><?= _("Type de Bon") ?></th>
+                            <th class="border-0 text-center"><?= _("Durée de Vie") ?></th>
+                            <th class="border-0 text-center"><?= _("Mode de Gestion") ?></th>
+                            <th class="border-0 text-end pe-4"><?= _("Actions") ?></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <?php foreach ($typebons as $typebon):
+                            $idTypebon = $this->nettoyer($typebon['id']);
+                            $typeGestion = $this->nettoyer($typebon['libelleTypeGestionBon']);
+                        ?>
+                        <tr class="searchable-row">
+                            <td class="ps-4">
+                                <div class="fw-bold text-dark"><?= $this->nettoyer($typebon['libelleTypebon']) ?></div>
+                                <code class="small text-muted"><?= $this->nettoyer($typebon['codeTypeBon']) ?></code>
+                            </td>
+                            <td class="text-center">
+                                <span class="badge bg-primary-ghost text-primary px-3 py-2 fs-6" style="border-radius: var(--radius-sm);">
+                                    <?= $this->nettoyer($typebon['dureeVie']) ?> <small><?= _("Jours") ?></small>
+                                </span>
+                            </td>
+                            <td class="text-center">
+                                <span class="badge rounded-pill fw-bold text-uppercase p-2 px-3" 
+                                      style="font-size: 0.7rem; background: rgba(33, 46, 83, 0.05); color: #212e53; border: 1px solid rgba(33, 46, 83, 0.1);">
+                                    <i class="fas fa-cog me-1 opacity-50"></i><?= $typeGestion ?>
+                                </span>
+                            </td>
+                            <td class="text-end pe-4">
+                                <button class="btn btn-sm btn-primary fw-bold px-3 shadow-sm" 
+                                        onclick="javascript:modifier_type_bon(<?= $idTypebon ?>)">
+                                    <i class="fas fa-edit me-1"></i> <?= _("Modifier") ?>
+                                </button>
+                            </td>
+                        </tr>
+                        <?php endforeach; ?>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <div id="div_maj_type_bon" class="mt-4"></div>
+</div>
+
+<script>
+// RECHERCHE RAPIDE VANILLA JS
+document.addEventListener("DOMContentLoaded", function() {
+    const searchInput = document.getElementById('globalSearch');
+    if (searchInput) {
+        searchInput.addEventListener('keyup', function() {
+            const filter = this.value.toLowerCase();
+            document.querySelectorAll('.searchable-row').forEach(row => {
+                row.style.display = row.textContent.toLowerCase().includes(filter) ? "" : "none";
+            });
+        });
+    }
+});
 </script>
 
-<legend> <?= _("PARAMETRES DE GESTION DES BONS DE PRISE EN CHARGE DU CENTRE DE GESTION") ?> </legend>
+<style>
+/* Style spécifique pour l'identité de la page */
 
-<table class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:10pt;">
-	<thead>
-	  <tr>
-		<th style="text-align:center" > <?= _("Type de bon") ?> </th>
-		<th style="text-align:center" > <?= _("Durée Vie (Jour)") ?> </th>
-		<th style="text-align:center" > <?= _("Type de gestion") ?> </th>
-		<th style="text-align:center" > <?= _("Modifier") ?> </th>
-	  </tr>
-	</thead>
-	<tbody>
-		<?php foreach ($typebons as $typebon):
-			$idTypebon = $this->nettoyer($typebon['id']);
-			$codeTypeBon = $this->nettoyer($typebon['codeTypeBon']);
-		?>
-		  <tr valign="top">
-			<td align="center"> <?= $this->nettoyer($typebon['libelleTypebon']) ?></td>
-			<td align="center"><?= $this->nettoyer($typebon['dureeVie']) ?></td>
-			<td align="center"> <?= $this->nettoyer($typebon['libelleTypeGestionBon']) ?></td>	
-			
-			<td align='center'> 
-				<input style="font-size:10pt;" class = "form-control btn btn-primary" type="button" value="<?= _("Modifier") ?>" 
-				onClick="javascript:modifier_type_bon(<?= $idTypebon ?>)"> 
-			</td>				
-		  </tr>
-		<?php endforeach; ?>
-	</tbody>
-</table>
+.table td {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #f1f4f6;
+}
 
-<div id="div_maj_type_bon">
-	
-</div>
+.bg-primary-ghost { background: rgba(33, 46, 83, 0.08) !important; }
+</style>
\ No newline at end of file