diff --git a/Vue/Nouveluserrh/index.php b/Vue/Nouveluserrh/index.php
index e4df120..754a470 100755
--- a/Vue/Nouveluserrh/index.php
+++ b/Vue/Nouveluserrh/index.php
@@ -1,100 +1,126 @@
 <?php 
-	$this->titre 		= "ISA WEB - Nouvel Utilisateur Portail RH"; 
-	
-	$idClient 			= $_SESSION['idClient_C'];
-	$nomClient 			= $_SESSION['nomClient_C'];
-	
-	$codeModeGenerationPass 	= $paramsgenerationpass['codeModeGenerationPass'];
-	$libelleModeGenerationPass 	= $paramsgenerationpass['modegenerationpass'];	
-	$codeModeEnvoiPass 			= $paramsgenerationpass['codeModeEnvoiPass'];
+    $this->titre = "ISA WEB - Nouvel Utilisateur Portail RH"; 
+    $idClient    = $_SESSION['idClient_C'];
+    $nomClient   = $_SESSION['nomClient_C'];
+    
+    $codeModeGenerationPass     = $paramsgenerationpass['codeModeGenerationPass'];
+    $codeModeEnvoiPass          = $paramsgenerationpass['codeModeEnvoiPass'];
 ?>
 
+<div class="container-fluid py-4 animate__animated animate__fadeIn">
+    <div class="card shadow border-0">
+        
+        <div class="card-header bg-success text-white py-3">
+            <div class="d-flex justify-content-between align-items-center">
+                <h5 class="mb-0 fw-bold">
+                    <i class="fas fa-user-plus me-2"></i>
+                    <?= _("Nouvel Utilisateur") ?> : <span class="text-white-50"><?= $nomClient ?></span>
+                </h5>
+            </div>
+        </div>
 
-<legend> <?= _("Nouvel Utilisateur") . ": " . $nomClient ?> </legend>
+        <div class="card-body p-4">
+            <form id="form_new_user">
+                <div class="row mb-4">
+                    <div class="col-12">
+                        <h6 class="text-success text-uppercase small fw-bold border-bottom pb-2 mb-3">
+                            <i class="fas fa-id-badge me-2"></i><?= _("Identité & Connexion") ?>
+                        </h6>
+                    </div>
+                    <div class="col-md-6 mb-3">
+                        <label class="form-label small fw-bold required"><?= _("Nom de famille") ?></label>
+                        <input type="text" id="nom" name="nom" class="form-control shadow-sm" required autocomplete="off" autofocus>
+                    </div>
+                    <div class="col-md-6 mb-3">
+                        <label class="form-label small fw-bold"><?= _("Prénoms") ?></label>
+                        <input type="text" id="prenoms" name="prenoms" class="form-control shadow-sm" autocomplete="off">
+                    </div>
+                    <div class="col-md-6 mb-3">
+                        <label class="form-label small fw-bold required"><?= _("Login (Identifiant)") ?></label>
+                        <div class="input-group shadow-sm">
+                            <span class="input-group-text bg-light text-muted">@</span>
+                            <input type="text" id="codeUtilisateur" name="codeUtilisateur" 
+                                   class="form-control text-lowercase" 
+                                   onChange="this.value=supprimer_espace_string(this.value);" required>
+                        </div>
+                        <div id="div_unicite_login" class="mt-1">
+                            <input class="visually-hidden" type="text" id="uniciteLogin" name="uniciteLogin" value="0">
+                        </div>
+                    </div>
+                    <div class="col-md-6 mb-3">
+                        <label class="form-label small fw-bold required"><?= _("E-mail") ?></label>
+                        <input type="email" id="email" name="email" class="form-control shadow-sm" placeholder="exemple@domaine.com" required>
+                    </div>
+                </div>
 
-<table class="table table-responsive table-condensed" style='font-size:10pt;'>
-	<tbody>	
-		<tr> 
-			<td width="10%" class="required"> <?= _("Nom") ?> </td>
-			<td width="40%" colspan="3" ><INPUT style='font-size:10pt;' class="form-control" TYPE="text" id="nom" NAME="nom" required AUTOCOMPLETE="OFF" autofocus ></td>
+                <div class="row mb-4">
+                    <div class="col-12">
+                        <h6 class="text-success text-uppercase small fw-bold border-bottom pb-2 mb-3">
+                            <i class="fas fa-user-shield me-2"></i><?= _("Profil & Préférences") ?>
+                        </h6>
+                    </div>
+                    <div class="col-md-4 mb-3">
+                        <label class="form-label small fw-bold required"><?= _("Téléphone") ?></label>
+                        <input type="tel" id="telephone" name="telephone" class="form-control shadow-sm" required>
+                    </div>
+                    <div class="col-md-4 mb-3">
+                        <label class="form-label small fw-bold required"><?= _("Langue") ?></label>
+                        <select class="form-select shadow-sm" id="codeLangueUser" name="codeLangueUser" required>
+                            <?php liste_options($langue, ""); ?>
+                        </select>
+                    </div>
+                    <div class="col-md-4 mb-3">
+                        <label class="form-label small fw-bold required"><?= _("Profil / Rôle") ?></label>
+                        <select class="form-select shadow-sm fw-bold border-success-subtle" id="codeProfil" name="codeProfil" required>
+                            <?php liste_options($user_profil, ""); ?>
+                        </select>
+                    </div>
+                </div>
 
-			<td width="10%" align="center" > <?= _("Prénoms") ?> </td>
-			<td colspan="3"><INPUT style='font-size:10pt;' class="form-control" TYPE="text" id="prenoms" NAME="prenoms" AUTOCOMPLETE="OFF" ></td>
-		</tr>
+                <div class="row mb-4 bg-light p-3 rounded-3 border mx-1">
+                    <div class="col-md-6 mb-3">
+                        <label class="form-label small fw-bold"><?= _("Mode d'envoi du mot de passe") ?></label>
+                        <select class="form-select shadow-sm" id="codeModeEnvoiPass" name="codeModeEnvoiPass">
+                            <?php liste_options($modeenvoipass, $codeModeEnvoiPass, true); ?>
+                        </select>
+                    </div>
+                    <div class="col-md-6 mb-3">
+                        <label class="form-label small fw-bold"><?= _("Mode de génération") ?></label>
+                        <select class="form-select shadow-sm" id="codeModeGenerationPass" name="codeModeGenerationPass" onChange="ajax_saisir_pass_new_user();">
+                            <?php liste_options($modegenerationpass, $codeModeGenerationPass, true); ?>
+                        </select>
+                    </div>
 
-		<tr> 
-			<td class="required"> <?= _("Login") ?> </td>
-			<td colspan="3"> 
-				<INPUT style='font-size:10pt;text-transform: lowercase;' class="form-control" type="text" id="codeUtilisateur" name="codeUtilisateur" 
-				onChange="this.value=supprimer_espace_string(this.value);" required> 
-			</td>
+                    <div id="div_passwd" class="row g-3 mt-1 <?= ($codeModeGenerationPass != "0") ? 'd-none' : '' ?>">
+                        <div class="col-md-6">
+                            <label class="form-label small fw-bold"><?= _("Mot de passe") ?></label>
+                            <input type="password" id="nvmdp" name="nvmdp" class="form-control shadow-sm" 
+                                   onBlur="controle_longeur_passe(this);" placeholder="••••••••">
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label small fw-bold"><?= _("Confirmer le mot de passe") ?></label>
+                            <input type="password" id="cfnvmdp" name="cfnvmdp" class="form-control shadow-sm" 
+                                   onBlur="controle_new_pass();" placeholder="••••••••">
+                        </div>
+                    </div>
+                </div>
 
-			<td align="center" class="required"> E-mail </td>
-			<td colspan="3"><INPUT style='font-size:10pt;' class="form-control" TYPE="email" id="email" NAME="email" placeholder="E-mail"  required></td>					
-		</tr>
+                <div class="d-flex justify-content-end gap-2 mt-4">
+                    <button type="button" class="btn btn-light border px-4 fw-bold" onClick="retour_a_users_gc();">
+                        <i class="fas fa-times me-2"></i><?= _("Annuler") ?>
+                    </button>
+                    <button type="button" id="btn_enreg" class="btn btn-success px-5 fw-bold shadow-sm" onClick="creer_user_gc();">
+                        <i class="fas fa-check-circle me-2"></i><?= _("Créer le compte") ?>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
 
-		<tr> 
-			<td class="required"> <?= _("Téléphone") ?> </td>
-			<td><INPUT style='font-size:10pt;' class="form-control" TYPE="tel" id="telephone" NAME="telephone"  required></td>
-			
-			<td align="center" class="required"> <?= _("Langue") ?> </td>
-			<td>
-				<SELECT style="font-size:10pt;" class="form-select" id="codeLangueUser" NAME="codeLangueUser"  required>
-					<?php liste_options($langue, ""); ?>						
-				</SELECT>						
-			</td>
-
-			<td align="center" class="required"> <?= _("Profil/Rôle") ?> </td>
-			<td colspan="3" width="10%">
-				<select class="form-select" id="codeProfil" name="codeProfil">
-					<?php liste_options($user_profil, ""); ?>
-				</select>						
-			</td>
-		</tr>
-		
-		<tr> 
-			<td> <?= _("Mode envoi") ?> </td>
-			<td colspan="3">
-				<SELECT style="font-size:10pt;" class="form-select" id="codeModeEnvoiPass" NAME="codeModeEnvoiPass"  >
-					<?php liste_options($modeenvoipass, $codeModeEnvoiPass, true); ?>			
-				</SELECT>						
-			</td>
-
-			<td align="center">  <?= _("Mode Génération") ?> </td>
-			<td  colspan="3">
-				<SELECT style="font-size:10pt;" class="form-select" id="codeModeGenerationPass" NAME="codeModeGenerationPass" onChange="javascript:ajax_saisir_pass_new_user();"  >
-					<?php liste_options($modegenerationpass, $codeModeGenerationPass, true); ?>	
-					
-				</SELECT>						
-			</td>
-		</tr>
-
-		<tr id="div_passwd"> 
-			<?php if ($codeModeGenerationPass=="0"): ?>
-				<td> <?= _("Mot de passe") ?> </td>
-				<td colspan="3"><INPUT  style='font-size:10pt;' onBlur="controle_longeur_passe(this);" class="form-control" TYPE="password" id="nvmdp" NAME="nvmdp" placeholder="Mot de Passe / Pass Word" required AUTOCOMPLETE="OFF"></td>
-
-				<td align="center"> <?= _("Confirmer MDP") ?> </td>
-				<td colspan="3"><INPUT  style='font-size:10pt;' onBlur="controle_new_pass();" class="form-control" TYPE="password" id="cfnvmdp" NAME="cfnvmdp" placeholder="Confirmation" required AUTOCOMPLETE="OFF"></td>
-			<?php else : ?>
-				<td>
-					<INPUT class="sr-only" TYPE="text" id="nvmdp" NAME="nvmdp">
-					<INPUT class="sr-only" TYPE="text" id="cfnvmdp" NAME="cfnvmdp">
-				</td>
-			<?php endif; ?>
-		</tr>
-
-		<tr> 
-			<td> </td>
-			<td colspan="3"> <input id="btn_enreg" name="btn_enreg"  class = "form-control btn btn-primary" type="button" value="<?= _("Enregistrer") ?>" onClick="javascript:creer_user_gc();" style='font-size:10pt;' > </td>
-
-			<td> </td>
-			<td colspan="3"> <input class = "form-control btn btn-warning" type="button" value="<?= _("Annuler") ?>" onClick="javascript:retour_a_users_gc();" style='font-size:10pt;' > </td>
-		</tr>
-		
-	</tbody>
-</table>	
-
-<div id="div_unicite_login">
-	<INPUT class="sr-only" TYPE="text" id="uniciteLogin" NAME="uniciteLogin" value="0" >
-</div>
\ No newline at end of file
+<style>
+    .required:after { content: " *"; color: #dc3545; }
+    .card { border-radius: 15px; }
+    .form-control:focus, .form-select:focus { border-color: #198754; box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.15); }
+    .input-group-text { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
+</style>
\ No newline at end of file