diff --git a/Js/fonctions.js b/Js/fonctions.js
index 103cb2ce..1977e5af 100755
--- a/Js/fonctions.js
+++ b/Js/fonctions.js
@@ -49552,29 +49552,31 @@ function retour_colleges_types()
 }
 
 
-function nouveaucollegetype(){
-	donnees = '';
-	$.ajax({
-		url: $("#racineWeb").val()+"Ajaxnouveaucollegetype/",
-		type : 'post',
-		data: donnees,
-		error: function(errorData){			
-			alert("Erreur : "+errorData);
-		},
-		success: function(data) {
-			//alert("Success : "+data);	
-			$('#div_nouveaucollegetype').html(data);
-			$('#div_nouveaucollegetype').modal("show");
-			$('#div_nouveaucollegetype').on('shown.bs.modal', function(){
-				stylechampsRequis();
-				$('#codeCollegeType').focus();
-			});
-		},
-		complete: function() {
-			
-		}
-	}); 	
-} 
+function nouveaucollegetype() {
+    let racineWeb = $("#racineWeb").val();
+    
+    $.ajax({
+        url: racineWeb + "Ajaxnouveaucollegetype/",
+        type: 'post',
+        data: {},
+        beforeSend: function() {
+            // Optionnel : afficher un loader global ou désactiver le bouton appelant
+        },
+        success: function(data) {
+            let $modal = $('#div_nouveaucollegetype');
+            $modal.html(data);
+            $modal.modal("show");
+            
+            $modal.on('shown.bs.modal', function() {
+                // Focus sur le premier champ pour une saisie immédiate
+                $('#libelle').focus();
+            });
+        },
+        error: function(xhr) {
+            alert_ebene("Erreur lors de l'ouverture du formulaire", "Error opening the form");
+        }
+    }); 
+}
 
 function ajoutercollegetype(){
 	
diff --git a/Vue/Ajaxnouveaucollegetype/index.php b/Vue/Ajaxnouveaucollegetype/index.php
index 9d10fb96..723ff342 100755
--- a/Vue/Ajaxnouveaucollegetype/index.php
+++ b/Vue/Ajaxnouveaucollegetype/index.php
@@ -1,40 +1,68 @@
-<div class="modal-dialog">
-	<div class="modal-content">
-		<div class="modal-header">
-			<button type="button" class="close" data-bs-dismiss="modal">&times;</button>
-			<legend class="modal-title text-center"><?= _("Ajouter un Collège Type") ?></legend>
-		</div>
-		<div class="modal-body">
-			<form id="formModal">
-				<table class="table table-responsive table-condensed">
-					<tbody>	
-						
-						<tr> 
-							<td width="15%"  class="required"><?= _("Libellé")?></td>
-							
-							<td ><INPUT class="form-control majuscule" TYPE="text" id="libelle" NAME="libelle" autofocus required AUTOCOMPLETE="OFF"></td>
-							  
-						</tr>
-						
-						<tr>
-							<td width="15%"  class="required"><?= _("Libellé Anglais")?></td>
-							<td ><INPUT class="form-control majuscule" TYPE="text" id="libelleEng" NAME="libelleEng" required AUTOCOMPLETE="OFF"></td>
-							
-						</tr>
-						
-						<tr>	
-							<td colspan="2">
-								<input type="button" name="btn-enreg" id="btn-enreg" class="btn btn-primary form-control" value="Enregistrer"
-								onclick="JAVASCRIPT:ajoutercollegetype();">
-							</td>
-						</tr>
-					</tbody>
-				</table>	
-			</form>	
-		</div>
-		<div class="modal-footer">
-			<button type="button" id="btn-fermer-modal" class="btn btn-default" data-bs-dismiss="modal">Fermer</button>
-		</div>
-		</div>
-	</div>
-</div>
\ No newline at end of file
+<div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content border-0 shadow-lg animate__animated animate__fadeInDown">
+        
+        <div class="modal-header bg-white border-bottom border-primary border-3">
+            <div class="d-flex align-items-center">
+                <div class="icon-shape bg-primary-ghost text-primary rounded-circle me-3" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
+                    <i class="fas fa-users-cog"></i>
+                </div>
+                <h5 class="modal-title fw-bold text-uppercase mb-0" style="font-size: 11pt;">
+                    <?= _("Ajouter un Collège Type") ?>
+                </h5>
+            </div>
+            <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+
+        <div class="modal-body p-4">
+            <form id="formModal">
+                <div class="row g-4">
+                    
+                    <div class="col-12">
+                        <label class="form-label small fw-bold text-muted text-uppercase mb-1">
+                            <?= _("Libellé (Français)") ?> <span class="text-danger">*</span>
+                        </label>
+                        <div class="input-group">
+                            <span class="input-group-text bg-light border-2 border-end-0"><i class="fas fa-signature text-muted"></i></span>
+                            <input class="form-control border-2 border-start-0 shadow-none majuscule fw-bold" 
+                                   type="text" id="libelle" name="libelle" required autocomplete="off">
+                        </div>
+                    </div>
+
+                    <div class="col-12">
+                        <label class="form-label small fw-bold text-muted text-uppercase mb-1">
+                            <?= _("Libellé (Anglais)") ?> <span class="text-danger">*</span>
+                        </label>
+                        <div class="input-group">
+                            <span class="input-group-text bg-light border-2 border-end-0"><i class="fas fa-language text-muted"></i></span>
+                            <input class="form-control border-2 border-start-0 shadow-none majuscule fw-bold" 
+                                   type="text" id="libelleEng" name="libelleEng" required autocomplete="off">
+                        </div>
+                    </div>
+
+                </div>
+            </form>
+        </div>
+
+        <div class="modal-footer bg-light border-0 py-3">
+            <button type="button" class="btn btn-light rounded-pill px-4 fw-bold text-muted border shadow-xs btn-sm" data-bs-dismiss="modal">
+                <i class="fas fa-times me-1"></i> <?= _("Annuler") ?>
+            </button>
+            <button type="button" id="btn-enreg" class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm btn-sm" onclick="ajoutercollegetype();">
+                <i class="fas fa-save me-1"></i> <?= _("Enregistrer") ?>
+            </button>
+        </div>
+        
+    </div>
+</div>
+
+<style>
+    .bg-primary-ghost { background-color: rgba(33, 46, 83, 0.08); }
+    .majuscule { text-transform: uppercase; }
+    .modal-content { border-radius: 15px; }
+    
+    /* Focus sur les inputs */
+    .form-control:focus {
+        border-color: var(--bs-primary);
+        background-color: #fff;
+    }
+</style>
\ No newline at end of file