diff --git a/Vue/Ajaxtbajouterlocalite/index.php b/Vue/Ajaxtbajouterlocalite/index.php
index 0b56daa2..32744b57 100755
--- a/Vue/Ajaxtbajouterlocalite/index.php
+++ b/Vue/Ajaxtbajouterlocalite/index.php
@@ -1,29 +1,57 @@
-<form id="formData">
-<legend id="titre_formData"><?= _("Ajouter des données") ?></legend>
-    <table class="table table-responsive table-condensed">
-        <tbody>	
-            <tr> 
-        
-                
-                <td width="5%" align="center" class="required"><?= _("Nom") ?></td>
-                <td width="30%" ><INPUT class="form-control majuscule" TYPE="text" id="libelle" NAME="libelle" required AUTOCOMPLETE="OFF"  ></td>
-                
-                <td width="5%" align="center" class="required"><?= _("Pays") ?></td>
-                <td width="20%">
-                    <select name="codePays" id="codePays" class="form-select" required AUTOCOMPLETE="OFF" onchange="JAVASCRIPT:filtreVilleParPays();">
-                        <?= liste_options($pays,'',false) ?>
-                    </select>
-                </td>
+<div class="card border-0 shadow-sm border-start border-success border-4 mb-4">
+    <div class="card-header bg-white py-3 border-0">
+        <h6 class="mb-0 fw-bold text-uppercase text-success small" id="titre_formData">
+            <i class="fas fa-plus-circle me-2"></i><?= _("Ajouter une Localité") ?>
+        </h6>
+    </div>
 
-                <td width="5%" align="center" class="required"><?= _("Ville") ?></td>
-                <td width="20%">
-                    <div id="div_ville" width="100%">
-                        <select name="codeVille" id="codeVille" class="form-select" required AUTOCOMPLETE="OFF">
+    <div class="card-body">
+        <form id="formData">
+            <div class="row g-3">
+                <div class="col-md-4">
+                    <label class="form-label small fw-bold text-muted required"><?= _("Nom de la Localité") ?></label>
+                    <div class="input-group">
+                        <span class="input-group-text bg-light border-2 border-end-0"><i class="fas fa-map-marker-alt text-muted"></i></span>
+                        <input class="form-control border-2 border-start-0 ps-0 majuscule" 
+                               type="text" id="libelle" name="libelle" 
+                               required autocomplete="off" autofocus>
+                    </div>
+                </div>
+
+                <div class="col-md-4">
+                    <label class="form-label small fw-bold text-muted required"><?= _("Pays") ?></label>
+                    <div class="input-group">
+                        <span class="input-group-text bg-light border-2 border-end-0"><i class="fas fa-flag text-muted"></i></span>
+                        <select name="codePays" id="codePays" 
+                                class="form-select border-2 border-start-0 ps-0 selectpicker show-tick" 
+                                data-live-search="true"
+                                required onchange="filtreVilleParPays();">
+                            <option value=""><?= _("Choisir un pays") ?></option>
+                            <?= liste_options($pays,'',false) ?>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="col-md-4">
+                    <label class="form-label small fw-bold text-muted required"><?= _("District ou Région") ?></label>
+                    <div class="input-group" id="div_ville">
+                        <span class="input-group-text bg-light border-2 border-end-0"><i class="fas fa-city text-muted"></i></span>
+                        <select name="codeVille" id="codeVille" 
+                                class="form-select border-2 border-start-0 ps-0 selectpicker show-tick" 
+                                data-live-search="true"
+                                required>
+                            <option value=""><?= _("Choisir une ville") ?></option>
                             <?= liste_options($ville,'',false) ?>
                         </select>
                     </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>	
-</form>
\ No newline at end of file
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
+
+<style>
+    /* Uniformisation des selects avec icônes */
+    .input-group > .bootstrap-select.form-control { flex: 1 1 auto; }
+    .bootstrap-select .btn { border-left: 0 !important; border-width: 2px !important; }
+</style>
\ No newline at end of file