diff --git a/Vue/Ajaxtbajoutersecteuractivite/index.php b/Vue/Ajaxtbajoutersecteuractivite/index.php
index 71daa2ae..bd12642d 100755
--- a/Vue/Ajaxtbajoutersecteuractivite/index.php
+++ b/Vue/Ajaxtbajoutersecteuractivite/index.php
@@ -1,14 +1,42 @@
-<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"><?= _("Libellé") ?></td>
-            <td width="40%" ><INPUT class="form-control majuscule" TYPE="text" id="libelle" NAME="libelle" required AUTOCOMPLETE="OFF"  ></td>
-            
-            <td width="5%" align="center"><?= _("Libellé Eng") ?></td>
-            <td width="35%" ><INPUT class="form-control majuscule" TYPE="text" id="libelleEng" NAME="libelleEng"></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-success small">
+                <i class="fas fa-plus-circle me-2"></i><?= _("Ajouter un nouveau secteur d'activité") ?>
+            </h6>
+        </div>
+        
+        <div class="card-body bg-light-50 p-4">
+            <div class="row g-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-briefcase text-muted"></i>
+                        </span>
+                        <input type="text" 
+                               class="form-control border-2 border-start-0 majuscule" 
+                               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 majuscule" 
+                               id="libelleEng" 
+                               name="libelleEng" 
+                               autocomplete="off">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </form>
\ No newline at end of file
diff --git a/Vue/Ajaxtbajouterservice/index.php b/Vue/Ajaxtbajouterservice/index.php
index 85bae3c6..fc627410 100755
--- a/Vue/Ajaxtbajouterservice/index.php
+++ b/Vue/Ajaxtbajouterservice/index.php
@@ -1,16 +1,42 @@
-<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"><?= _("Libellé") ?></td>
-            <td width="40%" ><INPUT class="form-control majuscule" TYPE="text" id="libelle" NAME="libelle" required AUTOCOMPLETE="OFF"></td>
-            
-            <td width="5%" align="center"><?= _("Libellé Eng") ?></td>
-            <td width="35%" ><INPUT class="form-control majuscule" TYPE="text" id="libelleEng" NAME="libelleEng"></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-success small">
+                <i class="fas fa-plus-circle me-2"></i><?= _("Ajouter un nouveau service") ?>
+            </h6>
+        </div>
+        
+        <div class="card-body bg-light-50 p-4">
+            <div class="row g-4">
+                <div class="col-md-6">
+                    <label class="form-label small fw-bold text-muted required"><?= _("Libellé du Service (FR)") ?></label>
+                    <div class="input-group shadow-xs">
+                        <span class="input-group-text bg-white border-2 border-end-0">
+                            <i class="fas fa-concierge-bell text-muted"></i>
+                        </span>
+                        <input type="text" 
+                               class="form-control border-2 border-start-0 majuscule" 
+                               id="libelle" 
+                               name="libelle" 
+                               required 
+                               autocomplete="off">
+                    </div>
+                </div>
+
+                <div class="col-md-6">
+                    <label class="form-label small fw-bold text-muted"><?= _("Libellé du Service (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 majuscule" 
+                               id="libelleEng" 
+                               name="libelleEng" 
+                               autocomplete="off">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </form>
\ No newline at end of file
diff --git a/Vue/Ajaxtblistersecteuractivite/index.php b/Vue/Ajaxtblistersecteuractivite/index.php
index 411b26df..28c0750f 100755
--- a/Vue/Ajaxtblistersecteuractivite/index.php
+++ b/Vue/Ajaxtblistersecteuractivite/index.php
@@ -1,88 +1,58 @@
-<?php
-	$nbreTotal = count($secteuractivite);
-	
-	if($nbreTotal < 10){
-		$nbreTotal = '0'.$nbreTotal;	
-	}else{
-		$nbreTotal =  format_N($nbreTotal);
-	}
-	
-	if (est_anglophone()){
-		if($existeselection){
-			$libbouton = "Uncheck all";
-		}else{
-			$libbouton = "Check all";
-		}
-	}else{
-		if($existeselection){
-			$libbouton = "Décocher tous";
-		}else{
-			$libbouton = "Cocher tous";
-		}
-	}
-?>
+<div class="card border-0 shadow-sm overflow-hidden" style="border-radius: var(--radius-md);">
+    <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+            <h6 class="mb-0 fw-bold text-uppercase text-primary small">
+                <i class="fas fa-briefcase me-2"></i><?= _("Référentiel des Secteurs d'Activité") ?>
+            </h6>
+            <span class="badge bg-primary-ghost text-primary ms-3 px-3 py-2 rounded-pill fw-bold" id="badge-total">
+                0 <?= _("Lignes") ?>
+            </span>
+        </div>
+        <div id="table-buttons" class="d-flex gap-2"></div>
+    </div>
 
-<?php $superUser = $_SESSION['superUser']; ?>
+    <div class="card-body p-0">
+        <div class="table-responsive">
+            <table id="tableLister" class="table table-hover align-middle mb-0" style="width:100%">
+                <thead class="bg-light text-muted small text-uppercase">
+                    <tr>
+                        <th class="ps-4 border-0"><?= _("Centre") ?></th>
+                        <th class="border-0 text-center"><?= _("Code") ?></th>
+                        <th class="border-0"><?= _("Libellé Secteur") ?></th>
+                        <th class="border-0 text-center pe-4"><?= _("Actions") ?></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <?php foreach ($secteuractivite as $v): 
+                        $idData = $this->nettoyer($v['id']); 
+                        $libelle = est_anglophone() ? $this->nettoyer($v['LibelleEng']) : $this->nettoyer($v['libelle']);
+                    ?>
+                    <tr>
+                        <td class="ps-4 fw-medium text-muted small"><?= $this->nettoyer($v['codeSociete']) ?></td>
+                        <td class="text-center">
+                            <span class="badge bg-light text-dark border fw-bold"><?= $this->nettoyer($v['codeSecteur']) ?></span>
+                        </td>
+                        <td class="fw-bold text-dark"><?= $libelle ?></td>
+                        <td class="text-center pe-4">
+                            <button type="button" 
+                                    class="btn btn-outline-primary btn-sm px-3 rounded-pill fw-bold shadow-xs" 
+                                    onclick="formModifTableRef(<?= $idData ?>);">
+                                <i class="fas fa-edit me-1"></i> <?= _("Modifier") ?>
+                            </button>
+                        </td>
+                    </tr>
+                    <?php endforeach; ?>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
 
-<table style="margin: auto" class="table-responsive">
-	<tbody>
-		<td><input class="form-control" style="text-align: center; font-size:10pt;" type="text" id="nbreTotal" name="nbreTotal" value="<?= _("Lignes Total").": ". $nbreTotal; ?>" readonly> </td>
-	</tbody>
-</table>
-<input type="hidden" id="total" value="<?= $nbreTotal; ?>">
-<table id="tableLister" class="table table-striped table-bordered table-hover table-condensed table-responsive compact">
-	<thead>
-	  <tr>
-		<th class="text-center"><?= _("Centre gestion") ?></th>
-		<th class="text-center">Code</th>
-		<th class="text-center"><?= _("Libellé") ?></th>
-		<!--
-		<th class="text-center">
-			<button type="button" style="font-size:10pt; font-weight: bold; width:100%; background-color:#4caf50; color: white;" class="form-control btn" onclick="javascript:cocherDecocherTout($('#fichier_lister').val());" > <?= $libbouton; ?> </button> 
-		</th>
-		-->
-		<th class="text-center"><?= _("Modifier") ?></th>
-		<!--
-		<th class="text-center">Supprimer</th>
-		-->
-	  </tr>
-	</thead>
-	<tbody>
-		<?php foreach ($secteuractivite as $v):
-			$idData = $this->nettoyer($v['id']);	
-			$libelle = $this->nettoyer($v['libelle']);
-			if (est_anglophone()){
-				$libelle = $this->nettoyer($v['LibelleEng']);
-			}
-		?>
-		  <tr valign="top">
-			<td class="text-center" width="15%"><?= $this->nettoyer($v['codeSociete']);; ?>  
-		  	<td class="text-center" width="10%"><?= $this->nettoyer($v['codeSecteur']); ?></td>
-			<td class="text-left" width="60%"><?= $libelle; ?></td>
-			<!--
-			<td class="text-center" width="10%">
-				<?php 
-                    if($this->nettoyer($v['choix'] == '0')){
-                        $check ='';
-                    }
-                    else{
-                        $check = 'checked';
-                    }       
-                ?>
-                <INPUT TYPE="checkbox" class="custom-control-input" style="width: 2rem;height: 2rem;" id="choix" NAME="choix" value="<?=(($this->nettoyer($v['choix'])==0)? 0 : 1);?>" onclick="if (this.checked) this.value=1; else this.value=0;cocherDecocherUn($('#fichier_lister').val(),<?= $idData; ?>);" <?= $check;?>>
-			</td>
-			-->
-			<td class="text-center" width="10%">
-				<button style="width:100%" class ="form-control btn btn-primary" type="button" id="btn-editer" name="Modifier"
-				onclick="JAVASCRIPT:formModifTableRef(<?= $idData; ?>);" ><?= _("Modifier") ?></button>
-			</td>
-			<!--
-			<td class="text-center" width="10%">
-				<button  style="width:100%" class = "form-control btn btn-danger" type="button" id="btn-supprimer" name="Supprimer"
-				onclick="JAVASCRIPT:supprimeLigneListe(<?= $idData; ?>,'<?= $superUser; ?>')">Supprimer</button>
-			</td>
-			-->
-		  </tr>
-		<?php endforeach; ?>
-	</tbody>
-</table>
\ No newline at end of file
+<style>
+    /* On garde tes styles spécifiques pour assurer la même hauteur et le même rendu */
+    .bg-primary-ghost { background-color: rgba(33, 46, 83, 0.08) !important; }
+    #tableLister thead th { padding-top: 15px; padding-bottom: 15px; font-size: 0.75rem; letter-spacing: 0.5px; }
+    #tableLister tbody td { border-color: #f1f4f6; height: 60px; }
+    .shadow-xs { box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
+    .text-primary { color: #212e53 !important; }
+</style>
\ No newline at end of file
diff --git a/Vue/Ajaxtblisterservice/index.php b/Vue/Ajaxtblisterservice/index.php
index 1f283159..684e6297 100755
--- a/Vue/Ajaxtblisterservice/index.php
+++ b/Vue/Ajaxtblisterservice/index.php
@@ -1,88 +1,58 @@
-<?php
-	$nbreTotal = count($service);
-	
-	if($nbreTotal < 10){
-		$nbreTotal = '0'.$nbreTotal;	
-	}else{
-		$nbreTotal =  format_N($nbreTotal);
-	}
-	
-	if (est_anglophone()){
-		if($existeselection){
-			$libbouton = "Uncheck all";
-		}else{
-			$libbouton = "Check all";
-		}
-	}else{
-		if($existeselection){
-			$libbouton = "Décocher tous";
-		}else{
-			$libbouton = "Cocher tous";
-		}
-	}
-?>
+<div class="card border-0 shadow-sm overflow-hidden" style="border-radius: var(--radius-md);">
+    <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+            <h6 class="mb-0 fw-bold text-uppercase text-primary small">
+                <i class="fas fa-concierge-bell me-2"></i><?= _("Référentiel des Services") ?>
+            </h6>
+            <span class="badge bg-primary-ghost text-primary ms-3 px-3 py-2 rounded-pill fw-bold" id="badge-total">
+                0 <?= _("Lignes") ?>
+            </span>
+        </div>
+        <div id="table-buttons" class="d-flex gap-2"></div>
+    </div>
 
-<?php $superUser = $_SESSION['superUser']; ?>
+    <div class="card-body p-0">
+        <div class="table-responsive">
+            <table id="tableLister" class="table table-hover align-middle mb-0" style="width:100%">
+                <thead class="bg-light text-muted small text-uppercase">
+                    <tr>
+                        <th class="ps-4 border-0"><?= _("Centre") ?></th>
+                        <th class="border-0 text-center"><?= _("Code") ?></th>
+                        <th class="border-0"><?= _("Libellé du Service") ?></th>
+                        <th class="border-0 text-center pe-4"><?= _("Actions") ?></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <?php foreach ($service as $v): 
+                        $idData = $this->nettoyer($v['id']); 
+                        $libelle = est_anglophone() ? $this->nettoyer($v['libelleEng']) : $this->nettoyer($v['libelle']);
+                    ?>
+                    <tr>
+                        <td class="ps-4 fw-medium text-muted small"><?= $this->nettoyer($v['codeSociete']) ?></td>
+                        <td class="text-center">
+                            <span class="badge bg-light text-dark border fw-bold"><?= $this->nettoyer($v['codeService']) ?></span>
+                        </td>
+                        <td class="fw-bold text-dark"><?= $libelle ?></td>
+                        <td class="text-center pe-4">
+                            <button type="button" 
+                                    class="btn btn-outline-primary btn-sm px-3 rounded-pill fw-bold shadow-xs" 
+                                    onclick="formModifTableRef(<?= $idData ?>);">
+                                <i class="fas fa-edit me-1"></i> <?= _("Modifier") ?>
+                            </button>
+                        </td>
+                    </tr>
+                    <?php endforeach; ?>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
 
-<table style="margin: auto" class="table-responsive">
-	<tbody>
-		<td><input class="form-control" style="text-align: center; font-size:10pt;" type="text" id="nbreTotal" name="nbreTotal" value="<?= _("Lignes Total").": ". $nbreTotal; ?>" readonly> </td>
-	</tbody>
-</table>
-<input type="hidden" id="total" value="<?= count($service); ?>">
-<table id="tableLister" class="table table-striped table-bordered table-hover table-condensed table-responsive compact">
-	<thead>
-	  <tr>
-		<th class="text-center"><?= _("Centre gestion") ?></th>  
-		<th class="text-center">Code</th>
-		<th class="text-center"><?= _("Libellé FR") ?></th>
-		<!--
-		<th class="text-center">
-			<button type="button" style="font-size:10pt; font-weight: bold; width:100%; background-color:#4caf50; color: white;" class="form-control btn" onclick="javascript:cocherDecocherTout($('#fichier_lister').val());" > <?= $libbouton; ?> </button> 
-		</th>
-		-->
-		<th class="text-center"><?= _("Modifier") ?></th>
-		<!--
-		<th class="text-center">Supprimer</th>
-		-->
-	  </tr>
-	</thead>
-	<tbody>
-		<?php foreach ($service as $v):
-			$idData = $this->nettoyer($v['id']);	
-			$libelle = $this->nettoyer($v['libelle']);
-			if (est_anglophone()){
-				$libelle = $this->nettoyer($v['libelleEng']);
-			}
-		?>
-		  <tr valign="top">
-		  	<td class="text-center" width="10%"><?= $this->nettoyer($v['codeSociete']) ?></td>
-			<td class="text-center" width="10%"><?= $this->nettoyer($v['codeService']) ?></td>  
-			<td class="text-left" width="35%"><?= $libelle; ?></td>
-			<!--
-			<td class="text-center" width="10%">
-				<?php 
-                    if($this->nettoyer($v['choix'] == '0')){
-                        $check ='';
-                    }
-                    else{
-                        $check = 'checked';
-                    }       
-                ?>
-                <INPUT TYPE="checkbox" class="custom-control-input" style="width: 2rem;height: 2rem;" id="choix" NAME="choix" value="<?=(($this->nettoyer($v['choix'])==0)? 0 : 1);?>" onclick="if (this.checked) this.value=1; else this.value=0;cocherDecocherUn($('#fichier_lister').val(),<?= $idData; ?>);" <?= $check;?>>
-			</td>
-			-->
-			<td class="text-center" width="10%">
-				<button style="width:100%" class ="form-control btn btn-primary" type="button" id="btn-editer" name="Modifier"
-				onclick="JAVASCRIPT:formModifTableRef(<?= $idData; ?>);" ><?= _("Modifier") ?></button>
-			</td>
-			<!--
-			<td class="text-center" width="10%">
-				<button  style="width:100%" class = "form-control btn btn-danger" type="button" id="btn-supprimer" name="Supprimer"
-				onclick="JAVASCRIPT:supprimeLigneListe(<?= $idData; ?>,'<?= $superUser; ?>')">Supprimer</button>
-			</td>
-			-->
-		  </tr>
-		<?php endforeach; ?>
-	</tbody>
-</table>
\ No newline at end of file
+<style>
+    /* Intégration des styles pour assurer la cohérence si non présents dans le CSS global */
+    .bg-primary-ghost { background-color: rgba(33, 46, 83, 0.08) !important; }
+    #tableLister thead th { padding-top: 15px; padding-bottom: 15px; font-size: 0.75rem; letter-spacing: 0.5px; }
+    #tableLister tbody td { border-color: #f1f4f6; height: 60px; }
+    .shadow-xs { box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
+    .text-primary { color: #212e53 !important; }
+</style>
\ No newline at end of file
diff --git a/Vue/Ajaxtbmodifiersecteuractivite/index.php b/Vue/Ajaxtbmodifiersecteuractivite/index.php
index 56698c15..e9689776 100755
--- a/Vue/Ajaxtbmodifiersecteuractivite/index.php
+++ b/Vue/Ajaxtbmodifiersecteuractivite/index.php
@@ -1,18 +1,61 @@
-<form id="formData">
-<legend id="titre_formData"><?= _("Modification des données") ?></legend>
-<INPUT class="sr-only" TYPE="text" id = "id" name = "id" value="<?=$secteuractivite['id']?>">
-<table class="table table-responsive table-condensed">
-	<tbody>	
-		<tr> 
-			<td width="5%" align="center">Code</td>
-			<td width="10%" ><INPUT class="form-control majuscule" TYPE="text" id="codeSecteur" NAME="codeSecteur" required AUTOCOMPLETE="OFF"  value="<?= $this->nettoyer($secteuractivite['codeSecteur']); ?>" disabled></td>
-            
-			<td width="5%" align="center" class="required"><?= _("Libellé") ?></td>
-            <td width="40%" ><INPUT class="form-control majuscule" TYPE="text" id="libelle" NAME="libelle" required AUTOCOMPLETE="OFF"  value="<?= $this->nettoyer($secteuractivite['libelle']); ?>"></td>
-            
-            <td width="5%" align="center"><?= _("Libellé Eng") ?></td>
-            <td width="35%" ><INPUT class="form-control majuscule" TYPE="text" id="libelleEng" NAME="libelleEng" value="<?= $this->nettoyer($secteuractivite['LibelleEng']); ?>"></td>
-        </tr>
-	</tbody>
-</table>	
+<form id="formData" class="container-fluid p-0">
+    <input type="hidden" id="id" name="id" value="<?= $secteuractivite['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-warning small">
+                <i class="fas fa-edit me-2"></i><?= _("Modification des données du secteur d'activité") ?>
+            </h6>
+        </div>
+        
+        <div class="card-body bg-light-50 p-4">
+            <div class="row g-4">
+                <div class="col-md-2">
+                    <label class="form-label small fw-bold text-muted"><?= _("Code") ?></label>
+                    <div class="input-group shadow-xs">
+                        <span class="input-group-text bg-light border-2 border-end-0">
+                            <i class="fas fa-barcode text-muted"></i>
+                        </span>
+                        <input type="text" 
+                               class="form-control border-2 border-start-0 majuscule fw-bold text-center" 
+                               id="codeSecteur" 
+                               name="codeSecteur" 
+                               value="<?= $this->nettoyer($secteuractivite['codeSecteur']); ?>" 
+                               disabled>
+                    </div>
+                </div>
+
+                <div class="col-md-5">
+                    <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-briefcase text-muted"></i>
+                        </span>
+                        <input type="text" 
+                               class="form-control border-2 border-start-0 majuscule" 
+                               id="libelle" 
+                               name="libelle" 
+                               required 
+                               autocomplete="off" 
+                               value="<?= $this->nettoyer($secteuractivite['libelle']); ?>">
+                    </div>
+                </div>
+
+                <div class="col-md-5">
+                    <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 majuscule" 
+                               id="libelleEng" 
+                               name="libelleEng" 
+                               autocomplete="off" 
+                               value="<?= $this->nettoyer($secteuractivite['LibelleEng']); ?>">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </form>
\ No newline at end of file
diff --git a/Vue/Ajaxtbmodifierservice/index.php b/Vue/Ajaxtbmodifierservice/index.php
index 09380af1..b44cef36 100755
--- a/Vue/Ajaxtbmodifierservice/index.php
+++ b/Vue/Ajaxtbmodifierservice/index.php
@@ -1,17 +1,61 @@
-<form id="formData">
-<legend id="titre_formData"><?= _("Modification des données") ?></legend>
-<INPUT class="sr-only" TYPE="text" id = "id" name = "id" value="<?=$service['id']?>">
-<table class="table table-responsive table-condensed">
-	<tbody>	
-		<tr> 
-			<td width="5%" align="center" >Code</td>
-			<td width="10%" ><INPUT class="form-control majuscule" TYPE="text" id="codeService" NAME="codeService" value="<?= $this->nettoyer($service['codeService']); ?>" disabled></td>
-            
-			<td width="5%" align="center" class="required"><?= _("Libellé") ?></td>
-            <td width="40%" ><INPUT class="form-control majuscule" TYPE="text" id="libelle" NAME="libelle" required AUTOCOMPLETE="OFF"  value="<?= $this->nettoyer($service['libelle']); ?>"></td>
-            
-            <td width="5%" align="center"><?= _("Libellé Eng") ?></td>
-            <td width="35%" ><INPUT class="form-control majuscule" TYPE="text" id="libelleEng" NAME="libelleEng" value="<?= $this->nettoyer($service['libelleEng']); ?>"></td>
-        </tr>
-</table>	
+<form id="formData" class="container-fluid p-0">
+    <input type="hidden" id="id" name="id" value="<?= $service['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-warning small">
+                <i class="fas fa-edit me-2"></i><?= _("Modification des données du service") ?>
+            </h6>
+        </div>
+        
+        <div class="card-body bg-light-50 p-4">
+            <div class="row g-4">
+                <div class="col-md-2">
+                    <label class="form-label small fw-bold text-muted"><?= _("Code") ?></label>
+                    <div class="input-group shadow-xs">
+                        <span class="input-group-text bg-light border-2 border-end-0">
+                            <i class="fas fa-barcode text-muted"></i>
+                        </span>
+                        <input type="text" 
+                               class="form-control border-2 border-start-0 majuscule fw-bold text-center" 
+                               id="codeService" 
+                               name="codeService" 
+                               value="<?= $this->nettoyer($service['codeService']); ?>" 
+                               disabled>
+                    </div>
+                </div>
+
+                <div class="col-md-5">
+                    <label class="form-label small fw-bold text-muted required"><?= _("Libellé du Service (FR)") ?></label>
+                    <div class="input-group shadow-xs">
+                        <span class="input-group-text bg-white border-2 border-end-0">
+                            <i class="fas fa-concierge-bell text-muted"></i>
+                        </span>
+                        <input type="text" 
+                               class="form-control border-2 border-start-0 majuscule" 
+                               id="libelle" 
+                               name="libelle" 
+                               required 
+                               autocomplete="off" 
+                               value="<?= $this->nettoyer($service['libelle']); ?>">
+                    </div>
+                </div>
+
+                <div class="col-md-5">
+                    <label class="form-label small fw-bold text-muted"><?= _("Libellé du Service (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 majuscule" 
+                               id="libelleEng" 
+                               name="libelleEng" 
+                               autocomplete="off" 
+                               value="<?= $this->nettoyer($service['libelleEng']); ?>">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </form>
\ No newline at end of file