diff --git a/Vue/Ajaxtbajoutertableauajustement/index.php b/Vue/Ajaxtbajoutertableauajustement/index.php
index d9e2fb20..4f4d7f24 100755
--- a/Vue/Ajaxtbajoutertableauajustement/index.php
+++ b/Vue/Ajaxtbajoutertableauajustement/index.php
@@ -1,17 +1,53 @@
-<form id="formData">
-<legend id="titre_formData"><?= _("Ajouter des données")?></legend>
-<table class="table table-responsive table-condensed">
-	<tbody>	
-		<tr> 
-			<td width="10%" align="center"><?= _("S/P Minimum")?></td>
-			<td width="10%" ><INPUT class="form-control" TYPE="number" step="0.01" id="spMin" NAME="spMin" readonly value="<?= $spMin ?>"></td>
-            
-			<td width="10%" align="center" class="required"><?= _("S/P Maximum")?></td>
-            <td width="10%" ><INPUT class="form-control" TYPE="number" step="0.01" id="spMax" NAME="spMax" required AUTOCOMPLETE="OFF" onblur="javascript:controle_spmax();"></td>
-            
-            <td width="10%" align="center" class="required"><?= _("Taux")." (%)"?></td>
-            <td width="10%" ><INPUT class="form-control" TYPE="number" step="0.01" id="tauxAjustement" required AUTOCOMPLETE="OFF" NAME="tauxAjustement" value="0.00"></td>
-        </tr>
-	</tbody>
-</table>	
-</form>
\ No newline at end of file
+<div class="card border-0 shadow-sm mb-4 border-start border-primary border-4 animate__animated animate__fadeIn">
+    <div class="card-header bg-white py-3">
+        <h6 class="card-title mb-0 fw-bold text-primary text-uppercase small">
+            <i class="fas fa-plus-circle me-2"></i><?= _("Ajouter des données") ?>
+        </h6>
+    </div>
+    <div class="card-body p-4">
+        <form id="formData">
+            <div class="row g-4 align-items-end">
+                <div class="col-md-4">
+                    <label class="form-label small fw-bold text-muted text-uppercase"><?= _("S/P Minimum") ?></label>
+                    <div class="input-group">
+                        <span class="input-group-text bg-light opacity-75">
+                            <i class="fas fa-lock text-muted"></i>
+                        </span>
+                        <input class="form-control text-center bg-light fw-bold" 
+                               type="number" step="0.01" 
+                               id="spMin" name="spMin" 
+                               readonly value="<?= $spMin ?>">
+                    </div>
+                </div>
+
+                <div class="col-md-4">
+                    <label class="form-label small fw-bold text-muted text-uppercase required"><?= _("S/P Maximum") ?></label>
+                    <div class="input-group">
+                        <span class="input-group-text bg-light text-primary">
+                            <i class="fas fa-chart-line"></i>
+                        </span>
+                        <input class="form-control text-center fw-bold border-primary-subtle" 
+                               type="number" step="0.01" 
+                               id="spMax" name="spMax" 
+                               required autocomplete="off" 
+                               onblur="javascript:controle_spmax();">
+                    </div>
+                </div>
+
+                <div class="col-md-4">
+                    <label class="form-label small fw-bold text-muted text-uppercase required"><?= _("Taux Ajustement (%)") ?></label>
+                    <div class="input-group">
+                        <span class="input-group-text bg-light text-info">
+                            <i class="fas fa-percentage"></i>
+                        </span>
+                        <input class="form-control text-center fw-bold" 
+                               type="number" step="0.01" 
+                               id="tauxAjustement" name="tauxAjustement" 
+                               required autocomplete="off" 
+                               value="0.00">
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>