diff --git a/Vue/Creerbaremepriseencharge/index.php b/Vue/Creerbaremepriseencharge/index.php
index 659c44a4..d851e430 100755
--- a/Vue/Creerbaremepriseencharge/index.php
+++ b/Vue/Creerbaremepriseencharge/index.php
@@ -1,78 +1,128 @@
 <?php 
-	$this->titre = "INTER SANTE - Créer un nouveau Barème de prise en charge"; 
-	$libelle = "BAREME DE PRISE EN CHARGE A ";
+    $libelleDefault = "BAREME DE PRISE EN CHARGE A ";
 ?>
 
+<div class="page-content animate__animated animate__fadeIn">
+    <div class="header-section mb-4">
+        <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" style="width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;">
+                    <i class="fas fa-plus-circle fs-4"></i>
+                </div>
+                <div>
+                    <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Nouveau Barème de prise en charge") ?></h4>
+                    <p class="text-muted small mb-0"><?= _("Définition d'un nouveau modèle de remboursement") ?></p>
+                </div>
+            </div>
+            <button class="btn btn-light border rounded-pill px-3 fw-bold btn-sm shadow-xs" onclick="retour_liste_bareme();">
+                <i class="fas fa-arrow-left me-1"></i> <?= _("Retour à la liste") ?>
+            </button>
+        </div>
+    </div>
 
+    <input type="hidden" id="nomForm" name="nomForm" value="frmcreerbareme">
 
-<legend> <?= _("Nouveau Barème de prise en charge") ?> </legend>
+    <div class="card border-0 shadow-sm overflow-hidden">
+        <div class="card-body p-4">
+            <form id="form_creer_bareme">
+                <div class="row g-3 mb-4">
+                    <div class="col-md-7">
+                        <label class="form-label small fw-bold text-muted text-uppercase required"><?= _("Garant / Assureur") ?></label>
+                        <select class="selectpicker form-control border-2" id="codeGcAssureur" name="codeGcAssureur" data-live-search="true" required autofocus 
+                                onchange="filtresouscripteur(); filtreproduitcreerbareme();">
+                            <?php liste_options($garant,"",false); ?>
+                        </select>
+                    </div>
+                    <div class="col-md-5">
+                        <label class="form-label small fw-bold text-muted text-uppercase required"><?= _("Produit") ?></label>
+                        <div id="div_produit">
+                            <select class="selectpicker form-control border-2" id="codeProduit" name="codeProduit" data-live-search="true" required>
+                                <?php liste_options($produits,"",false); ?>
+                            </select>
+                        </div>
+                    </div>
+                </div>
 
-<INPUT TYPE="text" class="sr-only" id = "nomForm" name = "nomForm" value="frmcreerbareme">
+                <div class="row g-3 mb-4 p-3 bg-light rounded-3 border">
+                    <div class="col-md-3">
+                        <label class="form-label small fw-bold text-muted text-uppercase required"><?= _("Taux couverture") ?></label>
+                        <select name="idTauxCouverture" id="idTauxCouverture" class="selectpicker form-control border-2" required 
+                                onchange="libelleTauxBareme(this); majTicketModerateur();">
+                            <?= liste_options($taux,'',false) ?>
+                        </select>
+                    </div>
+                    <div class="col-md-4">
+                        <label class="form-label small fw-bold text-muted text-uppercase required"><?= _("Territoire") ?></label>
+                        <select name="codeTerritoire" id="codeTerritoire" class="selectpicker form-control border-2" data-live-search="true" required 
+                                onchange="libelleTerritoireBareme(this.value);">
+                            <?= liste_options($territoire,'',false) ?>
+                        </select>
+                    </div>
+                    <div class="col-md-5">
+                        <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Souscripteur") ?></label>
+                        <div id="div_souscripteur">
+                            <select name="numeroClient" id="numeroClient" class="selectpicker form-control border-2" data-live-search="true" onchange="libelleClientBareme(this);">
+                                <?= liste_options($clients,'',false) ?>
+                            </select>
+                        </div>
+                    </div>
+                </div>
 
-<table class="table table-responsive table-condensed" style="font-size:10pt;">
-	<tbody>	
-		<tr> 
-			<td width="10%" class="required text-center"> <?= _("Garant") ?> </td>
-			<td colspan="3">
-				<SELECT style="font-size:10pt; height:30px;" class="form-control selectpicker" data-live-search="true" id="codeGcAssureur" NAME="codeGcAssureur" required AUTOCOMPLETE="OFF" autofocus 
-				onChange="filtresouscripteur();filtreproduitcreerbareme();" >
-					<?php liste_options($garant,"",false); ?>						
-				</SELECT>	
-			</td>
-			
-			<td width="13%" class="required text-center"> <?= _("Produit") ?> </td>
-			<td width="30%">
-				<div id="div_produit">
-					<SELECT style="font-size:10pt; height:30px;" class="form-select" id="codeProduit" NAME="codeProduit" required AUTOCOMPLETE="OFF">
-						<?php liste_options($produits,"",false); ?>						
-					</SELECT>	
-				</div>
-			</td>
-			
-		</tr>
-		<tr> 
-			<td width="10%" class="required" align="center"><?= _("Taux couverture") ?></td>
-			<td width="10%" >
-				<select name="idTauxCouverture" id="idTauxCouverture" class="form-select"  required AUTOCOMPLETE="OFF" 
-				onchange="libelleTauxBareme(this);majTicketModerateur();">
-                    <?= liste_options($taux,'',false) ?>
-                </select>
-			</td>
-			
-			<td width="10%" align="center" class="required" > <?= _("Territoire") ?> </td>
-			<td>
-				<select name="codeTerritoire" id="codeTerritoire" class="form-control selectpicker" data-live-search="true" required AUTOCOMPLETE="OFF"
-				onchange="libelleTerritoireBareme(this.value);">
-                    <?= liste_options($territoire,'',false) ?>
-                </select>
-			</td>
+                <div class="row g-3 mb-3">
+                    <div class="col-md-12">
+                        <label class="form-label small fw-bold text-muted text-uppercase required"><?= _("Libellé du Barème") ?></label>
+                        <div class="input-group">
+                            <span class="input-group-text bg-white border-2 border-end-0 text-primary"><i class="fas fa-tag"></i></span>
+                            <input class="form-control border-2 border-start-0 shadow-none fw-bold majuscule" type="text" id="libelle" name="libelle" value="<?= $libelleDefault ?>">
+                        </div>
+                    </div>
+                </div>
 
-			<td width="10%" align="center" > <?= _("Souscripteur") ?> </td>
-			<td>
-				<div id="div_souscripteur">
-					<select  name="numeroClient" id="numeroClient"  class="form-select" onchange="libelleClientBareme(this);">
-						<?= liste_options($clients,'',false) ?>
-					</select>
-				<div>
-			</td>
-		</tr>
-		
-		<tr> 
-			<td width="10%" align="center" class="required"> <?= _("Libellé") ?> </td>
-			<td colspan="5"><INPUT style="font-size:10pt;" class="form-control majuscule" TYPE="text" id="libelle" NAME="libelle" ></td>
-		</tr> 
-		
-		<tr> 
-			<td width="10%" align="center"> <?= _("Observation") ?> </td>
-			<td colspan="5"><INPUT style="font-size:10pt;" class="form-control majuscule" TYPE="text" id="observationBareme" NAME="observationBareme" ></td>
-		</tr> 
-		<tr> 
-			<td> </td>
-			<td colspan="3" > <input id="btn_enreg" name="btn_enreg"  class = "form-control btn btn-primary" type="button" value="<?= _("Enregistrer") ?>" onClick="javascript:creer_bareme();" style='font-size:10pt;' > </td>
+                <div class="row g-3 mb-4">
+                    <div class="col-md-12">
+                        <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Observation / Note interne") ?></label>
+                        <div class="input-group">
+                            <span class="input-group-text bg-white border-2 border-end-0 text-muted"><i class="fas fa-comment-alt"></i></span>
+                            <input class="form-control border-2 border-start-0 shadow-none majuscule" type="text" id="observationBareme" name="observationBareme" placeholder="<?= _("Informations complémentaires...") ?>">
+                        </div>
+                    </div>
+                </div>
 
-			<td> </td>
-			<td > <input class = "form-control btn btn-warning" type="button" value="<?= _("Fermer") ?>" onClick="javascript:retour_liste_bareme();" style='font-size:10pt;' > </td>
-		</tr>
-	</tbody>
-</table>	
+                <hr class="my-4 opacity-10">
+                <div class="row g-3">
+                    <div class="col-md-8">
+                        <button id="btn_enreg" type="button" class="btn btn-primary w-100 py-3 rounded-pill fw-bold shadow-sm" onclick="creer_bareme();">
+                            <i class="fas fa-save me-2"></i> <?= _("Enregistrer le barème") ?>
+                        </button>
+                    </div>
+                    <div class="col-md-4">
+                        <button type="button" class="btn btn-warning-light w-100 py-3 rounded-pill fw-bold text-warning" onclick="retour_liste_bareme();">
+                            <?= _("Fermer") ?>
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
 
+<style>
+    /* Spécifique Neutral Pro Creer Bareme */
+    .btn-warning-light { background-color: rgba(255, 193, 7, 0.1); border: 2px solid rgba(255, 193, 7, 0.2); }
+    .btn-warning-light:hover { background-color: rgba(255, 193, 7, 0.2); }
+    
+    /* Alignement des SelectPickers avec les Inputs */
+    .bootstrap-select .btn.dropdown-toggle {
+        height: 42px !important;
+        border-width: 2px !important;
+        font-size: 9.5pt !important;
+        font-weight: 600 !important;
+        background-color: #fff !important;
+    }
+</style>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        actualiserSelectPicker('.selectpicker');
+    });
+</script>
\ No newline at end of file