diff --git a/Vue/Ajaxtbajouterjoursferiers/index.php b/Vue/Ajaxtbajouterjoursferiers/index.php
index cc84603e..4369483c 100755
--- a/Vue/Ajaxtbajouterjoursferiers/index.php
+++ b/Vue/Ajaxtbajouterjoursferiers/index.php
@@ -1,33 +1,69 @@
-<form id="formData">
-<legend id="titre_formData"><?= _("Ajouter des données") ?></legend>
-<table class="table table-responsive table-condensed">
-	<tbody>	
-        <tr>
-			<td width="6%" align="center" class="required"><?= _("Libellé Fr") ?></td>
-            <td width="30%" ><INPUT class="form-control" TYPE="text" id="libelle" NAME="libelle" required AUTOCOMPLETE="OFF"  ></td>
-            
-            <td width="5%" align="center"><?= _("Libellé Eng") ?></td>
-            <td colspan="3" ><INPUT class="form-control" TYPE="text" id="libelleEng" NAME="libelleEng"></td>
-        </tr>
-		
-		<tr> 
-			<td width="5%" align="center" class="required">Date</td>
-            <td width="20%" ><INPUT class="form-control datepicker" TYPE="text" id="dateFerier" NAME="dateFerier" required AUTOCOMPLETE="OFF"  ></td>
-			
-			<td width="5%" align="center" class="required"><?= _("Pays") ?></td>
-			<td width="20%">
-				<SELECT onChange="afficheDonneesTableChoisie('Ajaxtblisterjoursferiers');" class="form-select" id="codePays" NAME="codePays" required AUTOCOMPLETE="OFF">
-					<?php liste_options($pays,$_SESSION['codePaysSociete']); ?>						
-				</SELECT>
-			</td>
-         
-			<td width="10%" align="center"><?= _("Demi-journée ?") ?></td>
-			<td width="5%">
-               <select name="demiJournee" id="demiJournee" class="form-select">
-                    <?= liste_options($ouinonoptionnelle,'1',true) ?>
-                </select>
-            </td>
-        </tr>
-	</tbody>
-</table>	
+<form id="formData" class="container-fluid p-0">
+    <div class="card border-0 shadow-sm border-start border-4 border-primary" style="border-radius: var(--radius-md);">
+        <div class="card-header bg-white py-3 border-bottom">
+            <h6 class="mb-0 fw-bold text-uppercase text-primary small">
+                <i class="fas fa-calendar-plus me-2"></i><?= _("Ajouter un nouveau jour férié") ?>
+            </h6>
+        </div>
+        
+        <div class="card-body bg-light-50 p-4">
+            <div class="row g-3 mb-4">
+                <div class="col-md-6">
+                    <label class="form-label small fw-bold text-muted required"><?= _("Libellé (FR)") ?></label>
+                    <div class="input-group shadow-xs">
+                        <span class="input-group-text bg-white border-2 border-end-0">
+                            <i class="fas fa-tag text-muted"></i>
+                        </span>
+                        <input type="text" class="form-control border-2 border-start-0" id="libelle" name="libelle" required autocomplete="off">
+                    </div>
+                </div>
+
+                <div class="col-md-6">
+                    <label class="form-label small fw-bold text-muted"><?= _("Libellé (EN)") ?></label>
+                    <div class="input-group shadow-xs">
+                        <span class="input-group-text bg-white border-2 border-end-0">
+                            <i class="fas fa-language text-muted"></i>
+                        </span>
+                        <input type="text" class="form-control border-2 border-start-0" id="libelleEng" name="libelleEng" autocomplete="off">
+                    </div>
+                </div>
+            </div>
+
+            <div class="row g-3">
+                <div class="col-md-4">
+                    <label class="form-label small fw-bold text-muted required"><?= _("Date de l'événement") ?></label>
+                    <div class="input-group shadow-xs">
+                        <span class="input-group-text bg-white border-2 border-end-0">
+                            <i class="fas fa-calendar-alt text-muted"></i>
+                        </span>
+                        <input type="text" class="form-control border-2 border-start-0 datepicker" id="dateFerier" name="dateFerier" required autocomplete="off">
+                    </div>
+                </div>
+
+                <div class="col-md-5">
+                    <label class="form-label small fw-bold text-muted required"><?= _("Pays") ?></label>
+                    <div class="input-group shadow-xs">
+                        <span class="input-group-text bg-white border-2 border-end-0">
+                            <i class="fas fa-globe-africa text-muted"></i>
+                        </span>
+                        <select class="form-control selectpicker border-2 border-start-0" id="codePays" name="codePays" required onchange="afficheDonneesTableChoisie('Ajaxtblisterjoursferiers');">
+                            <?php liste_options($pays, $_SESSION['codePaysSociete'], true); ?>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="col-md-3">
+                    <label class="form-label small fw-bold text-muted"><?= _("Demi-journée ?") ?></label>
+                    <div class="input-group shadow-xs">
+                        <span class="input-group-text bg-white border-2 border-end-0">
+                            <i class="fas fa-adjust text-muted"></i>
+                        </span>
+                        <select name="demiJournee" id="demiJournee" class="form-control selectpicker border-2 border-start-0">
+                            <?= liste_options($ouinonoptionnelle, '1', true) ?>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </form>
\ No newline at end of file
diff --git a/Vue/Ajaxtbmodifierjoursferiers/index.php b/Vue/Ajaxtbmodifierjoursferiers/index.php
index e6b3b5a6..935e8e2c 100755
--- a/Vue/Ajaxtbmodifierjoursferiers/index.php
+++ b/Vue/Ajaxtbmodifierjoursferiers/index.php
@@ -1,35 +1,79 @@
-<form id="formData">
-<legend id="titre_formData"><?= _("Modification des données") ?></legend>
-<INPUT class="sr-only" TYPE="text" id = "id" name = "id" value="<?=$joursferiers['id']?>">
-<table class="table table-responsive table-condensed">
-	<tbody>	
-		<tr>
-			<td width="6%" align="center" class="required"><?= _("Libellé Fr") ?></td>
-            <td width="30%" ><INPUT class="form-control" TYPE="text" id="libelle" NAME="libelle" required AUTOCOMPLETE="OFF"  autofocus value="<?= $this->nettoyer($joursferiers['libelle']); ?>"></td>
-            
-            <td width="5%" align="center"><?= _("Libellé Eng") ?></td>
-            <td colspan="3" ><INPUT class="form-control" TYPE="text" id="libelleEng" NAME="libelleEng" value="<?= $this->nettoyer($joursferiers['libelleEng']); ?>"></td>
-        </tr>
-		
-		<tr> 
-			<td width="5%" align="center" class="required">Date</td>
-            <td width="20%" ><INPUT class="form-control datepicker" TYPE="text" id="dateFerier" NAME="dateFerier" required AUTOCOMPLETE="OFF"  value="<?= dateLang($this->nettoyer($joursferiers['dateFerier'])) ?>"></td>
-			
-			<td width="5%" align="center" class="required"><?= _("Pays") ?></td>
-			<td width="20%">
-				<SELECT onChange="afficheDonneesTableChoisie('Ajaxtblisterjoursferiers');" class="form-select" id="codePays" NAME="codePays" required AUTOCOMPLETE="OFF">
-					<?php liste_options($pays,$joursferiers['codePays']); ?>						
-				</SELECT>
-			</td>
-         
-			<td width="10%" align="center"><?= _("Demi-journée ?") ?></td>
-			<td width="5%">
-                <select name="demiJournee" id="demiJournee" class="form-select">
-                    <?= liste_options($ouinonplafondmodifiable,$this->nettoyer($joursferiers['demiJournee']),true) ?>
-                </select>
-            </td>
-				
-        </tr>
-	</tbody>
-</table>	
+<form id="formData" class="container-fluid p-0">
+    <input type="hidden" id="id" name="id" value="<?= $joursferiers['id'] ?>">
+    
+    <div class="card border-0 shadow-sm border-start border-4 border-primary" style="border-radius: var(--radius-md);">
+        <div class="card-header bg-white py-3 border-bottom">
+            <h6 class="mb-0 fw-bold text-uppercase text-primary small">
+                <i class="fas fa-calendar-check me-2"></i><?= _("Modification du jour férié") ?>
+            </h6>
+        </div>
+        
+        <div class="card-body bg-light-50 p-4">
+            <div class="row g-3 mb-4">
+                <div class="col-md-6">
+                    <label class="form-label small fw-bold text-muted required"><?= _("Libellé (FR)") ?></label>
+                    <div class="input-group shadow-xs">
+                        <span class="input-group-text bg-white border-2 border-end-0">
+                            <i class="fas fa-tag text-muted"></i>
+                        </span>
+                        <input type="text" class="form-control border-2 border-start-0" 
+                               id="libelle" name="libelle" required autocomplete="off" 
+                               value="<?= $this->nettoyer($joursferiers['libelle']); ?>">
+                    </div>
+                </div>
+
+                <div class="col-md-6">
+                    <label class="form-label small fw-bold text-muted"><?= _("Libellé (EN)") ?></label>
+                    <div class="input-group shadow-xs">
+                        <span class="input-group-text bg-white border-2 border-end-0">
+                            <i class="fas fa-language text-muted"></i>
+                        </span>
+                        <input type="text" class="form-control border-2 border-start-0" 
+                               id="libelleEng" name="libelleEng" autocomplete="off" 
+                               value="<?= $this->nettoyer($joursferiers['libelleEng']); ?>">
+                    </div>
+                </div>
+            </div>
+
+            <div class="row g-3">
+                <div class="col-md-4">
+                    <label class="form-label small fw-bold text-muted required"><?= _("Date de l'événement") ?></label>
+                    <div class="input-group shadow-xs">
+                        <span class="input-group-text bg-white border-2 border-end-0">
+                            <i class="fas fa-calendar-alt text-muted"></i>
+                        </span>
+                        <input type="text" class="form-control border-2 border-start-0 datepicker" 
+                               id="dateFerier" name="dateFerier" required autocomplete="off" 
+                               value="<?= dateLang($this->nettoyer($joursferiers['dateFerier'])) ?>">
+                    </div>
+                </div>
+
+                <div class="col-md-5">
+                    <label class="form-label small fw-bold text-muted required"><?= _("Pays") ?></label>
+                    <div class="input-group shadow-xs">
+                        <span class="input-group-text bg-white border-2 border-end-0">
+                            <i class="fas fa-globe-africa text-muted"></i>
+                        </span>
+                        <select class="form-control selectpicker border-2 border-start-0" 
+                                id="codePays" name="codePays" required 
+                                onchange="afficheDonneesTableChoisie('Ajaxtblisterjoursferiers');">
+                            <?php liste_options($pays, $joursferiers['codePays'], true); ?>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="col-md-3">
+                    <label class="form-label small fw-bold text-muted"><?= _("Demi-journée ?") ?></label>
+                    <div class="input-group shadow-xs">
+                        <span class="input-group-text bg-white border-2 border-end-0">
+                            <i class="fas fa-adjust text-muted"></i>
+                        </span>
+                        <select name="demiJournee" id="demiJournee" class="form-control selectpicker border-2 border-start-0">
+                            <?= liste_options($ouinonplafondmodifiable, $this->nettoyer($joursferiers['demiJournee']), true) ?>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </form>
\ No newline at end of file