diff --git a/Vue/Creeravenant/index.php b/Vue/Creeravenant/index.php
index 23efdb9..e1a43c4 100644
--- a/Vue/Creeravenant/index.php
+++ b/Vue/Creeravenant/index.php
@@ -15,124 +15,113 @@
 	}
 ?>
 
-<div id="div_fichepolice">	
-	<fieldset style='font-size:10pt;'>
-		<legend> <?= _("Informations Police") ?> </legend>
-		<table class="table table-responsive table-condensed" style='font-size:10pt;'>
-			<tbody>	
+<div class="container-fluid py-4 animate__animated animate__fadeIn">
+    
+    <div class="card shadow-sm border-0 mb-4">
+        <div class="card-header bg-light d-flex align-items-center py-3">
+            <i class="fas fa-file-contract text-primary me-2"></i>
+            <h5 class="card-title mb-0 fw-bold"><?= _("Informations de la Police Actuelle") ?></h5>
+        </div>
+        <div class="card-body">
+            <div class="row g-3">
+                <div class="col-md-5">
+                    <label class="form-label small fw-bold text-muted"><?= _("Client") ?></label>
+                    <div class="input-group">
+                        <span class="input-group-text bg-white"><i class="fas fa-building text-muted"></i></span>
+                        <input type="text" class="form-control bg-light" value="<?= $_SESSION['nomClient_C'] ?>" readonly>
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <label class="form-label small fw-bold text-muted"><?= _("N° Police") ?></label>
+                    <input type="text" class="form-control bg-light fw-bold" value="<?= $this->nettoyer($police['numeroPolice']) ?>" readonly>
+                </div>
+                <div class="col-md-3">
+                    <label class="form-label small fw-bold text-muted"><?= _("Type de Contrat") ?></label>
+                    <input type="text" class="form-control bg-light" value="<?= $typeContrat ?>" readonly>
+                </div>
 
-				<tr> 
-					<td width="10%"> <?= _("Client") ?> </td>
-					<td width="24%" ><INPUT style='font-size:10pt;' class="form-control" TYPE="text" id="nomClient" name="nomClient" value="<?= $_SESSION['nomClient_C'] ?>" readonly></td>
+                <div class="col-md-3">
+                    <label class="form-label small fw-bold text-muted"><?= _("État") ?></label>
+                    <span class="form-control bg-light fw-bold text-primary"><?= $etatPolice ?></span>
+                </div>
+                <div class="col-md-3">
+                    <label class="form-label small fw-bold text-muted"><?= _("Date d'Effet") ?></label>
+                    <input type="text" class="form-control bg-light" value="<?= dateLang($this->nettoyer($police['dateEffet']), $_SESSION['lang']) ?>" readonly>
+                </div>
+                <div class="col-md-3">
+                    <label class="form-label small fw-bold text-muted"><?= _("Échéance Actuelle") ?></label>
+                    <input type="text" class="form-control bg-light" value="<?= dateLang($this->nettoyer($police['dateEcheance']), $_SESSION['lang']) ?>" readonly>
+                </div>
+                <div class="col-md-3">
+                    <label class="form-label small fw-bold text-muted"><?= _("Taxes") ?> (%)</label>
+                    <input type="text" class="form-control bg-light" value="<?= $this->nettoyer($police['tauxTaxe']) ?> %" readonly>
+                </div>
+            </div>
+        </div>
+    </div>
 
-					<td width="10%" align="center"> <?= _("No Police") ?> </td>
-					<td width="24%"><INPUT style='font-size:10pt;' class="form-control" TYPE="text" id="numeroPolice" NAME="numeroPolice" value="<?= $this->nettoyer($police['numeroPolice']) ?>" readonly></td>
+    <form method="post" action="Creeravenant/enregistrer/" id="formAvenant" onSubmit='$("#dateEcheanceRen").enable();'>
+        
+        <input type="hidden" name="btn_enreg" id="btn_enreg_val" value="1">
+        <input type="hidden" id="controler_avenant" name="controler_avenant" value="0">
+        <input type="hidden" id="DateRenouvellement" name="DateRenouvellement" value="<?= $this->nettoyer($police['DateRenouvellement']) ?>">
+        <input type="hidden" id="dateEffetSql" name="dateEffetSql" value="<?= $this->nettoyer($police['dateEffet']) ?>">
+        
+        <div class="card shadow border-0 border-top border-primary border-4">
+            <div class="card-header bg-white py-3">
+                <h5 class="card-title mb-0 fw-bold text-primary">
+                    <i class="fas fa-plus-circle me-2"></i><?= _("Configuration du Nouvel Avenant") ?>
+                </h5>
+            </div>
+            <div class="card-body p-4">
+                <div class="row g-4">
+                    <div class="col-md-8">
+                        <label for="codeTypeAvenant" class="form-label fw-bold"><?= _("Type de Mouvement") ?></label>
+                        <select class="form-select form-select-lg shadow-sm border-primary-subtle" id="codeTypeAvenant" name="codeTypeAvenant" autofocus required onChange="controle_date_avenant();">
+                            <option value="" disabled selected><?= _("Sélectionnez le type d'avenant...") ?></option>
+                            <?php liste_options($typeavenant, ""); ?>
+                        </select>
+                        <div class="form-text text-info"><i class="fas fa-info-circle me-1"></i> <?= _("Le choix du mouvement détermine les calculs de prorata.") ?></div>
+                    </div>
 
-					<td width="10%" align="center">Type</td>
-					<td><INPUT style='font-size:10pt;' class="form-control" TYPE="text" id="typeContrat" NAME="typeContrat" value="<?= $typeContrat ?>" readonly></td>
-				</tr>
-				
-				<tr> 
-					<td> <?= _("Courtier") ?> </td>
-					<td><INPUT style='font-size:10pt;' class="form-control" TYPE="text" id="apporteurOld" NAME="apporteurOld" value="<?= $this->nettoyer($police['apporteur']) ?>" readonly></td>
+                    <div class="col-md-4">
+                        <label for="dateAvenant" class="form-label fw-bold"><?= _("Date d'Effet") ?></label>
+                        <div class="input-group input-group-lg shadow-sm">
+                            <span class="input-group-text bg-primary text-white"><i class="fas fa-calendar-alt"></i></span>
+                            <input type="text" class="form-control datepicker fw-bold" id="dateAvenant" name="dateAvenant" Value="<?= dateCouranteLang($_SESSION['lang']) ?>" required onChange="verifier_Echeance_ren();">
+                        </div>
+                    </div>
 
-					<td align="center"> <?= _("Tx Comm(%)") ?> </td>
-					<td><INPUT style='font-size:10pt;' class="form-control" TYPE="text" id="tauxCommissionOld" NAME="tauxCommissionOld" value="<?= $this->nettoyer($police['tauxCommission']) ?>" readonly></td>
-					
-					<td align="center"> <?= _("Rachat TM") ?> </td>
-					<td>
-						<?php if ($police['rachatTm']=="1"): ?>
-							<INPUT style='font-size:10pt;' class="form-control" TYPE="text" id="rachattmOld" NAME="rachattmOld" value="<?= _("Oui") ?>" readonly>
-						<?php else: ?>
-							<INPUT style='font-size:10pt;' class="form-control" TYPE="text" id="rachattmOld" NAME="rachattmOld" value="<?= _("Non") ?>" readonly>
-						<?php endif; ?>
-					</td>
-				</tr>
+                    <div class="col-12">
+                        <label for="motifavenant" class="form-label fw-bold"><?= _("Motif / Commentaires") ?></label>
+                        <textarea class="form-control shadow-sm" id="motifavenant" name="motifavenant" rows="2" placeholder="<?= _("Précisez l'objet de cet avenant...") ?>"></textarea>
+                    </div>
 
-				<tr> 
-					<td> <?= _("Etat") ?> </td>
-					<td><INPUT style='font-size:10pt;' class="form-control" TYPE="text" id="etatPolice" NAME="etatPolice" value="<?= $etatPolice ?>" readonly></td>
+                    <div class="col-12">
+                        <div id="div_periodidite" class="rounded bg-light p-3 border-dashed">
+                            </div>
+                    </div>
 
-					<td align="center"> <?= _("Effet") ?> </td>
-					<td><INPUT style='font-size:10pt;' class="form-control" id="dateEffet" NAME="dateEffet" TYPE="text" value="<?= dateLang($this->nettoyer($police['dateEffet']), $_SESSION['lang']) ?>" readonly></td>
-					
-					<td align="center"> <?= _("Echéance") ?> </td>
-					<td><INPUT style='font-size:10pt;' class="form-control" TYPE="text" id="dateEcheance" NAME="dateEcheance" value="<?= dateLang($this->nettoyer($police['dateEcheance']), $_SESSION['lang']) ?>" readonly></td>
-				</tr>
-
-				<tr> 
-					<td> <?= _("Dernier Avenant") ?> </td>
-					<td><INPUT style='font-size:10pt;' class="form-control" TYPE="text" id="typeAvenant" NAME="typeAvenant" value="<?= $typeAvenant ?>" readonly></td>
-
-					<td align="center"> <?= _("No Avenant") ?> </td>
-					<td><INPUT style='font-size:10pt;' class="form-control" TYPE="text" id="numeroAvenant" NAME="numeroAvenant" value="<?= $this->nettoyer($police['numeroAvenant']) ?>" readonly></td>
-
-					<td align="center"> <?= (isset($_SESSION['composanteprime']['Taxes'])) ? _($_SESSION['composanteprime']['Taxes']) : _("Taxes") ?> (%)  </td>
-					
-					<td><INPUT style='font-size:10pt;' class="form-control" TYPE="text" id="tauxTaxe" NAME="tauxTaxe" value="<?= $this->nettoyer($police['tauxTaxe']) ?>" readonly></td>
-				</tr>	
-
-			</tbody>
-		</table>	
-	</fieldset>
+                    <div class="col-12 mt-4">
+                        <button type="button" class="btn btn-primary btn-lg w-100 shadow fw-bold py-3" onclick="javascript:enregistrer_avenant();">
+                            <i class="fas fa-save me-2"></i> <?= _("Générer et Enregistrer l'Avenant") ?>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div id="div_controler_avenant" class="d-none">
+            <input type="text" id="controler_avenant_info" name="controler_avenant_info" value="<?= $controler_avenant_info ?>">
+        </div>
+    </form>
 </div>
 
-<form method="post" action="Creeravenant/enregistrer/" onSubmit='$("#dateEcheanceRen").enable();'>
-	<input class="sr-only" id="btn_enreg" name="btn_enreg"  type="submit" value="<?= _("Enregistrer") ?>" />
-	<input class="sr-only" type="text" id="controler_avenant" name="controler_avenant" value="0">
-	<INPUT class="sr-only" TYPE="text" id="DateRenouvellement_fr" NAME="DateRenouvellement_fr" value="<?= dateLang($this->nettoyer($police['DateRenouvellement']), $_SESSION['lang']) ?>">
-	<INPUT class="sr-only" TYPE="text" id="DateRenouvellement" NAME="DateRenouvellement" value="<?= $this->nettoyer($police['DateRenouvellement']) ?>">
+<div id="div_attente" class="text-center mt-3"></div>
 
-	<INPUT class="sr-only" TYPE="text" id="dateEffetSql" NAME="dateEffetSql" value="<?= $this->nettoyer($police['dateEffet']) ?>">
-	<INPUT class="sr-only" TYPE="text" id="dateFinSql" NAME="dateFinSql" value="<?= $this->nettoyer($police['dateFin']) ?>">
-
-	<input class="sr-only" type="text" id="oldCodeTypeAvenant" name="oldCodeTypeAvenant" value="<?= $this->nettoyer($police['codeTypeAvenant']) ?>" >
-
-	<fieldset style='font-size:10pt;' >
-		<legend> <?= _("Nouvel avenant") ?> </legend>
-		<table class="table table-responsive table-condensed" style='font-size:10pt;' >
-			<tbody>	
-				<tr> 
-					<td width="10%"> <?= _("Mouvement") ?> </td>
-					<td width="58%">
-						<SELECT style='font-size:10pt;' class="form-control" id="codeTypeAvenant" NAME="codeTypeAvenant" autofocus required
-						onChange="controle_date_avenant();">
-							<?php liste_options($typeavenant, ""); ?>						
-						</SELECT>	
-					</td>
-
-					<td width="10%" align="center"> <?= _("Effet") ?> </td>
-					<td><INPUT onChange="verifier_Echeance_ren();" style='font-size:10pt;' class="form-control datepicker" TYPE="text" id="dateAvenant" NAME="dateAvenant" Value="<?= dateCouranteLang($_SESSION['lang']) ?>" required ></td>
-					
-				</tr>
-				
-				<tr> 
-					<td> <?= _("Commentaires") ?> </td>
-					<td colspan="3"><INPUT style='font-size:10pt;' class="form-control" TYPE="text" id="motifavenant" NAME="motifavenant"></td>
-				</tr>
-
-				<tr> 
-					<td colspan="4"> 
-						<div id="div_periodidite" style='font-size:10pt;' >	
-							
-						</div>	
-					</td>
-				</tr>
-				
-				<tr> 
-					<td></td>
-					<td colspan="3"> <button style='font-size:10pt;' type="button" class="form-control btn btn-primary" onclick="javascript:enregistrer_avenant();"> <?= _("Enregistrer") ?> </button> </td>
-				</tr>
-				
-			</tbody>
-		</table>	
-	</fieldset>
-	
-	<div id="div_controler_avenant" style="display: none">
-		<input type="text" id="controler_avenant_info" name="controler_avenant_info"  value="<?= $controler_avenant_info ?>">
-	</div>				
-	
-</form> 
-
-<div id="div_attente">	
-</div>				
+<style>
+    .border-dashed { border: 2px dashed #dee2e6; }
+    .form-select-lg { font-size: 1.1rem; }
+    .card { transition: transform 0.2s; }
+    .input-group-text { border-color: #dee2e6; }
+</style>