diff --git a/Vue/Modifiercollegetype/index.php b/Vue/Modifiercollegetype/index.php
index ebdc3686..fce103aa 100755
--- a/Vue/Modifiercollegetype/index.php
+++ b/Vue/Modifiercollegetype/index.php
@@ -1,58 +1,90 @@
 <?php 
-	$this->titre = "INTER SANTE - MModifier un collège type"; 
+    $this->titre = "INTER SANTE - Modifier un collège type"; 
+    $idTable = $this->nettoyer($table['idTable']);
+    $code = $this->nettoyer($table['codeCollegeType']);
+    $valeurActuelle = est_anglophone() ? $this->nettoyer($table['libelleEng']) : $this->nettoyer($table['libelle']);
 ?>
 
-<input class="sr-only" type="text" id="idTable" name="idTable" value="<?= $this->nettoyer($table['idTable']) ?>" >
+<div class="page-content animate__animated animate__fadeIn">
+    
+    <div class="header-section mb-1">
+        <div class="d-flex align-items-center justify-content-between bg-white p-3 shadow border-start border-warning border-4" style="border-radius: var(--radius-md);">
+            <div class="d-flex align-items-center">
+                <div class="icon-shape bg-warning-light text-warning rounded-circle me-3" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;">
+                    <i class="fas fa-edit fs-4"></i>
+                </div>
+                <div>
+                    <h4 id="titre-page" class="mb-0 fw-bold text-uppercase fs-5 text-warning"><?= _("Modifier le Collège Type") ?></h4>
+                    <p class="text-muted small mb-0 d-none d-md-block"><?= _("Code :") ?> <span class="badge bg-light text-dark border"><?= $code ?></span> — <?= $valeurActuelle ?></p>
+                </div>
+            </div>
 
-<legend> <?= _("Modifier un collège type") ?> </legend>
+            <div class="d-flex gap-2">
+                <button type="button" class="btn btn-light rounded-pill px-4 fw-bold text-muted border shadow-sm btn-sm" onclick="retour_colleges_types();">
+                    <i class="fas fa-times me-1"></i> <?= _("Annuler") ?>
+                </button>
+                <button type="button" id="btn_enreg" class="btn btn-warning rounded-pill px-4 fw-bold shadow-sm btn-sm text-light" onclick="enregistrer_modif_college_type();">
+                    <i class="fas fa-save me-1"></i> <?= _("Enregistrer les modifications") ?>
+                </button>
+            </div>
+        </div>
+    </div>
 
-<table class="table table-responsive table-condensed" style="font-size:10pt;">
-	<tbody>	
-		<tr>
-			<td align="center" colspan="4" style="font-size:12pt; background-color: green; color: white; font-weight: bold;">
-				<?= _("ANCIENNES VALEURS") ?>
-			</td>
-		</tr>
-		<tr> 
-			<td width="10%" > Code </td>
-			<td width="10%"  ><INPUT style="font-size:10pt;" class="form-control" TYPE="text" value="<?=$this->nettoyer($table['codeCollegeType'])?>" readonly  ></td>
+    <form id="form_edit_college">
+        <input type="hidden" id="idTable" name="idTable" value="<?= $idTable ?>">
 
-			<td width="10%" align="center" > <?= _("Libellé") ?> </td>
-			<?php if (est_anglophone()) : ?>
-				<td><INPUT style="font-size:10pt;" class="form-control" TYPE="text" value="<?=$this->nettoyer($table['libelleEng'])?>" readonly ></td>
-			<?php else: ?>
-				<td><INPUT style="font-size:10pt;" class="form-control" TYPE="text" value="<?=$this->nettoyer($table['libelle'])?>" readonly ></td>
-			<?php endif; ?>
-		</tr>
-	</tbody>
-</table>	
+        <div class="row g-2">
+            <div class="col-lg-5">
+                <div class="card border-0 shadow-sm h-100 bg-light">
+                    <div class="card-header bg-transparent py-3 border-bottom border-2">
+                        <h6 class="mb-0 fw-bold text-muted text-uppercase small"><i class="fas fa-history me-2"></i><?= _("Valeurs Actuelles") ?></h6>
+                    </div>
+                    <div class="card-body p-4">
+                        <div class="mb-3">
+                            <label class="form-label small fw-bold text-muted"><?= _("Code") ?></label>
+                            <input class="form-control border-0 bg-white" type="text" value="<?= $code ?>" readonly>
+                        </div>
+                        <div class="mb-0">
+                            <label class="form-label small fw-bold text-muted"><?= _("Libellé") ?></label>
+                            <input class="form-control border-0 bg-white" type="text" value="<?= $valeurActuelle ?>" readonly>
+                        </div>
+                    </div>
+                </div>
+            </div>
 
+            <div class="col-lg-7">
+                <div class="card border-0 shadow-sm h-100 border-start border-warning border-4">
+                    <div class="card-header bg-white py-3 border-bottom border-2 border-primary-light">
+                        <h6 class="mb-0 fw-bold text-primary text-uppercase small"><i class="fas fa-pen-fancy me-2"></i><?= _("Nouvelles Valeurs") ?></h6>
+                    </div>
+                    <div class="card-body p-4">
+                        <div class="row g-3">
+                            <div class="col-md-4">
+                                <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Code") ?></label>
+                                <input class="form-control bg-light border-2 fw-bold" type="text" id="codeCollegeType" name="codeCollegeType" value="<?= $code ?>" readonly>
+                            </div>
+                            <div class="col-md-8">
+                                <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Nouveau Libellé") ?> <span class="text-danger">*</span></label>
+                                <div class="input-group">
+                                    <span class="input-group-text bg-white border-2 border-end-0 text-warning"><i class="fas fa-tag"></i></span>
+                                    <input class="form-control border-2 border-start-0 shadow-none majuscule fw-bold" 
+                                           type="text" id="libelle" name="libelle" 
+                                           value="<?= $valeurActuelle ?>" required autofocus>
+                                </div>
+                                <small class="text-muted mt-1 d-block"><i class="fas fa-info-circle me-1"></i><?= _("Le libellé sera automatiquement converti en majuscules.") ?></small>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
 
-
-<table class="table table-responsive table-condensed" style="font-size:10pt;">
-	<tbody>	
-		<tr>
-			<td align="center" colspan="4" style="font-size:12pt; background-color: green; color: white; font-weight: bold;">
-				<?= _("NOUVELLES VALEURS") ?>
-			</td>
-		</tr>
-		<tr> 
-			<td width="10%" > Code </td>
-			<td  width="10%"><INPUT style="font-size:10pt;" class="form-control" TYPE="text" id="codeCollegeType" NAME="codeCollegeType" value="<?=$this->nettoyer($table['codeCollegeType'])?>" readonly  ></td>
-
-			<td width="10%" align="center" class="required" > <?= _("Libellé") ?> </td>
-			<?php if (est_anglophone()) : ?>
-				<td><INPUT style="font-size:10pt;" class="form-control majuscule" TYPE="text" id="libelle" NAME="libelle" value="<?=$this->nettoyer($table['libelleEng'])?>" required autofocus></td>
-			<?php else: ?>
-				<td><INPUT style="font-size:10pt;" class="form-control majuscule" TYPE="text" id="libelle" NAME="libelle" value="<?=$this->nettoyer($table['libelle'])?>" required autofocus></td>
-			<?php endif; ?>
-		</tr>
-
-		<tr> 
-			<td colspan="2"> <input id="btn_enreg" name="btn_enreg"  class = "form-control btn btn-primary" type="button" value="<?= _("Enregistrer") ?>" onClick="javascript:enregistrer_modif_college_type();" style='font-size:10pt;' > </td>
-
-			<td> </td>
-			<td > <input class = "form-control btn btn-warning" type="button" value="<?= _("Annuler") ?>" onClick="javascript:retour_colleges_types();" style='font-size:10pt;' > </td>
-		</tr>
-	</tbody>
-</table>	
+<style>
+    .header-section.sticky-top { background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); }
+    .bg-warning-light { background-color: rgba(255, 193, 7, 0.15) !important; }
+    .border-primary-light { border-color: rgba(33, 46, 83, 0.1) !important; }
+    .majuscule { text-transform: uppercase; }
+    .form-control:focus { border-color: #ffc107; box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.1); }
+</style>
\ No newline at end of file