diff --git a/Vue/Tarifsactes/index.php b/Vue/Tarifsactes/index.php
index 39b5d75e..08d24355 100755
--- a/Vue/Tarifsactes/index.php
+++ b/Vue/Tarifsactes/index.php
@@ -1,52 +1,77 @@
-<?php 
-	// $this->titre = "INTER SANTE - Tarif Actes Médicaux"; 
-?>
+<div class="page-content animate__animated animate__fadeIn">
+    <div class="header-section mb-1">
+        <div class="d-flex align-items-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 d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
+                    <i class="fas fa-file-invoice-dollar fs-4"></i>
+                </div>
+                <div>
+                    <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Tarifs des Actes Médicaux") ?></h4>
+                    <p class="text-muted small mb-0"><?= _("Consultation et extraction des référentiels tarifaires par acte") ?></p>
+                </div>
+            </div>
+            <button class="sr-only" id="btn_exporter_tarif" data-bs-toggle="modal" data-bs-target="#pop_exporter_tarif"></button>
+        </div>
+    </div>
 
+    <div class="card border-0 shadow-sm mb-3" id="div_ente_tarif" onkeypress="javascript:ctrlkeypress_tarifacte(event);">
+        <div class="card-body p-4">
+            <div class="row g-3 align-items-end">
+                <div class="col-md-4">
+                    <label class="form-label small fw-bold text-muted text-uppercase required"><?= _("Référentiel Tarif") ?></label>
+                    <div class="input-group">
+                        <span class="input-group-text bg-light text-primary"><i class="fas fa-book-medical"></i></span>
+                        <select class="form-select selectpicker" data-live-search="true" id="codeTarifActe" name="codeTarifActe" required autofocus>
+                            <?php liste_options($tarif, "", false); ?>
+                        </select>
+                    </div>
+                </div>
 
-<button class="sr-only"  id="btn_exporter_tarif" 	name="btn_exporter_tarif" 		type="button" data-bs-toggle="modal" data-bs-target="#pop_exporter_tarif" style='font-size:10pt;'  > </button>
+                <div class="col-md-5">
+                    <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Nom de l'acte médical") ?></label>
+                    <div class="input-group">
+                        <span class="input-group-text bg-light text-primary"><i class="fas fa-search"></i></span>
+                        <input type="text" class="form-control fw-bold" id="libelleActe" name="libelleActe" placeholder="<?= _("Ex: Consultation, Radiologie...") ?>">
+                    </div>
+                </div>
 
-<legend> <?= _("Rechercher les actes médicaux par tarif") ?> </legend>
+                <div class="col-md-3">
+                    <button type="button" class="btn btn-primary w-100 fw-bold shadow-sm py-2" onClick="javascript:afficher_tarifacte();">
+                        <i class="fas fa-sync-alt me-2"></i><?= _("Afficher les tarifs") ?>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
 
-<div id="div_ente_tarif" onkeypress="javascript:ctrlkeypress_tarifacte(event);">	
-	<table class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:10pt; paddind:0px;">
-		<tbody>
-			<tr>
-				<td width="5%" class="required"> <?= _("Tarif") ?> </td>
-				<td width="40%" > 
-					<select class="form-control selectpicker" data-live-search="true" id="codeTarifActe" NAME="codeTarifActe" autofocus style="font-size:10pt;" required>
-						<?php liste_options($tarif, "" ,false); ?>						
-					</SELECT>						
-				</td>		
-				<td width="8%"  align='center' > <?= _("Nom Acte") ?> </td>
-				<td width="32%" ><INPUT style='font-size:10pt;' class="form-control" TYPE="text" id="libelleActe" name="libelleActe"></td>
-
-				<td width="10%"  align='center'> <input class="form-control btn btn-primary" type="button" value="<?= _("Rechercher...") ?>" 
-				onClick="javascript:afficher_tarifacte();" style="font-size:10pt;"></td> 
-			</tr>
-		</tbody>
-	</table>
-</div>				
-
-
-<div id="div_detail">
+    <div id="div_detail" class="animate__animated animate__fadeIn">
+        </div>
 </div>
 
-<div class="modal fade" id="pop_exporter_tarif" role="dialog">
-	<div class="modal-dialog modal-lg">
-		<div class="modal-content">		
-			<div class="modal-header">
-				<button id="btn_close_pop" name="btn_close_pop" type="button" class="close" data-bs-dismiss="modal"> <?= _("Fermer") ?> </button>
-				<h4 class="modal-title"> <?= _("Exporter le tarif...") ?> </h4>
-			</div>
-		
-			<div class="modal-body">
-				<div id="div_export_tarif">	
-				
-				</div>				
-			</div>			
-		  <div class="modal-footer">
-			<button type="button" class="btn btn-default" data-bs-dismiss="modal"> <?= _("Fermer") ?> </button>
-		  </div>		
-		</div>
-	</div>
+<div class="modal fade" id="pop_exporter_tarif" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+        <div class="modal-content border-0 shadow-lg">
+            <div class="modal-header bg-primary text-white py-3">
+                <h5 class="modal-title fw-bold text-uppercase small">
+                    <i class="fas fa-file-export me-2"></i><?= _("Exporter le tarif") ?>
+                </h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body p-4">
+                <div id="div_export_tarif" class="min-vh-25">
+                    </div>
+            </div>
+            <div class="modal-footer bg-light border-0">
+                <button type="button" class="btn btn-secondary px-4 fw-bold" data-bs-dismiss="modal"><?= _("Fermer") ?></button>
+            </div>
+        </div>
+    </div>
 </div>
+
+<style>
+    /* Harmonisation Selectpicker pour Bootstrap 5 */
+    .bootstrap-select .dropdown-toggle {
+        border-color: #dee2e6 !important;
+        height: 100%;
+    }
+</style>
\ No newline at end of file