diff --git a/Js/fonctions.js b/Js/fonctions.js
index cf4935f1..b6ffa38a 100755
--- a/Js/fonctions.js
+++ b/Js/fonctions.js
@@ -34710,27 +34710,28 @@ function requetes_synthese_consommation_police_export()
 	}); 
 }
 
-function modifier_type_bon(idTypebon)
-{
-	donnees = 'idTypebon='+idTypebon;
+function modifier_type_bon(idTypebon) {
+    let donnees = 'idTypebon=' + idTypebon;
 
-	$.ajax({
-		url: $("#racineWeb").val()+"Ajaxparambons/",
-		type : 'post',
-		data: donnees,
-		error: function(errorData) {			
-		},
-		success: function(data) 
-		{
-			donnees_retour = data;
-		},
-		complete: function() 
-		{
-			$('#div_maj_type_bon').html(donnees_retour);
-		}
-	}); 
+    $.ajax({
+        url: $("#racineWeb").val() + "Ajaxparambons/",
+        type: 'post',
+        data: donnees,
+        error: function(errorData) {
+            console.error("Erreur lors du chargement des paramètres du bon.");
+        },
+        success: function(data) {
+            // 1. Injecter le contenu dans le conteneur de la modale
+            $('#div_maj_type_bon').html(data);
+            
+            // 2. Initialiser et afficher la modale Bootstrap
+            var myModal = new bootstrap.Modal(document.getElementById('div_maj_type_bon'));
+            myModal.show();
+        }
+    }); 
 }
 
+
 function enregistrer_modif_type_bon()
 {
 	
diff --git a/Vue/Ajaxparambons/index.php b/Vue/Ajaxparambons/index.php
index c17f82e9..937cae60 100755
--- a/Vue/Ajaxparambons/index.php
+++ b/Vue/Ajaxparambons/index.php
@@ -1,44 +1,63 @@
-<div id="div_maj_type_bon">
+<div class="modal-dialog modal-dialog-centered shadow-lg">
+    <div class="modal-content border-0" style="border-radius: var(--radius-md);">
+        
+        <div class="modal-header bg-white border-bottom-0 pb-0 pt-4 px-4 border-start border-warning border-5" style="border-top-left-radius: var(--radius-md);">
+            <div class="d-flex align-items-center">
+                <div class="icon-shape bg-warning-ghost text-warning rounded-circle me-3" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
+                    <i class="fas fa-edit"></i>
+                </div>
+                <div>
+                    <h5 class="modal-title fw-bold text-uppercase text-dark mb-0" style="letter-spacing: -0.5px; font-size: 1.1rem;">
+                        <?= _("Mise à jour du paramètre") ?>
+                    </h5>
+                    <small class="text-muted"><?= $this->nettoyer($typebon['libelleTypebon']) ?></small>
+                </div>
+            </div>
+            <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
 
-	<legend> <?= _("MISE A JOUR DES PARAMETRES") ?> </legend>
+        <div class="modal-body p-4">
+            <input class="sr-only" type="text" id="idTypebon" name="idTypebon" value="<?= $this->nettoyer($typebon['idTypebon']) ?>">
 
-	<input class="sr-only" type="text" id="idTypebon" name="idTypebon" value="<?= $this->nettoyer($typebon['idTypebon']) ?>">
+            <div class="p-3 mb-4 rounded-3 bg-light border border-light">
+                <label class="form-label small fw-bold text-muted text-uppercase mb-2" style="font-size: 0.65rem;"><?= _("Configuration Actuelle") ?></label>
+                <div class="row g-2 text-center">
+                    <div class="col-6">
+                        <div class="small text-muted mb-1"><?= _("Durée") ?></div>
+                        <div class="fw-bold text-dark"><?= $this->nettoyer($typebon['dureeVie']) ?> Jours</div>
+                    </div>
+                    <div class="col-6 border-start border-white">
+                        <div class="small text-muted mb-1"><?= _("Gestion") ?></div>
+                        <div class="fw-bold text-dark"><?= $this->nettoyer($typebon['libelleTypeGestionBon']) ?></div>
+                    </div>
+                </div>
+            </div>
 
-	<table class="table table-responsive table-condensed" style="font-size:10pt;">
-		<tbody>	
-			<tr> 
-				<td> <INPUT style="font-size:10pt; text-align:center;"  class="form-control" TYPE="text"  value="<?= $this->nettoyer($typebon['libelleTypebon']) ?>" readonly ></td>
+            <div class="row g-3">
+                <div class="col-md-6">
+                    <label class="form-label small fw-bold text-dark required"><?= _("Nouvelle Durée (Jours)") ?></label>
+                    <div class="input-group">
+                        <span class="input-group-text bg-white border-end-0 text-muted"><i class="fas fa-clock small"></i></span>
+                        <input id="dureeVie" name="dureeVie" class="form-control border-start-0 fw-bold border-warning" type="number" 
+                               value="<?= $this->nettoyer($typebon['dureeVie']) ?>" 
+                               onChange="this.value=supprimer_espace_nombre(this.value); controle_numerique(this);">
+                    </div>
+                </div>
 
-				<td width="15%" align="center" > <?= _("Durée de vie") ?> </td>
-				<td> <INPUT style="font-size:10pt; text-align:center" class="form-control" TYPE="text"  value="<?= $this->nettoyer($typebon['dureeVie']) ?>" readonly ></td>
+                <div class="col-md-6">
+                    <label class="form-label small fw-bold text-dark required"><?= _("Nouveau Type Gestion") ?></label>
+                    <select class="form-select fw-bold border-warning" id="codeGestionBon" name="codeGestionBon">
+                        <?php liste_options($typegestion, $typebon['codeGestionBon'], true); ?>
+                    </select>
+                </div>
+            </div>
+        </div>
 
-				<td width="15%" align="center" > <?= _("Gestion") ?> </td>
-				<td> <INPUT style="font-size:10pt; text-align:center" class="form-control" TYPE="text"  value="<?= $this->nettoyer($typebon['libelleTypeGestionBon']) ?>" readonly ></td>
-			</tr>
-			
-			<tr> 
-				<td align="center" > <?= _("Nouvelles valeurs") ?> </td>
-
-				<td align="center" > <?= _("Durée de vie") ?> </td>
-				<td align='center'> 
-					<INPUT style="font-size:10pt; text-align:center;" id="dureeVie" name="dureeVie" class="form-control"  TYPE="number"  value="<?= $this->nettoyer($typebon['dureeVie']) ?>" 
-					onChange="this.value=supprimer_espace_nombre(this.value); controle_numerique(this);">
-				</td>
-
-				<td align="center" > <?= _("Gestion") ?> </td>
-				<td>
-					<SELECT style="font-size:10pt; text-align:center;" class="form-select" id="codeGestionBon" NAME="codeGestionBon" >
-						<?php liste_options($typegestion, $typebon['codeGestionBon'],true); ?>						
-					</SELECT>						
-				</td>
-			</tr>
-
-			<tr> 
-				<td colspan="5">
-					<input style="font-size:10pt;" class = "form-control btn btn-primary" type="button" value="<?= _("Enregistrer") ?>"
-					onClick="javascript:enregistrer_modif_type_bon();"> 
-				</td>
-			</tr>			
-		</tbody>
-	</table>	
-</div>
+        <div class="modal-footer border-0 bg-light p-3" style="border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md);">
+            <button type="button" class="btn btn-outline-secondary btn-sm px-3 fw-bold border-2" data-bs-dismiss="modal"><?= _("Annuler") ?></button>
+            <button type="button" class="btn btn-primary btn-sm px-4 fw-bold shadow-sm" onclick="javascript:enregistrer_modif_type_bon();">
+                <i class="fas fa-check-circle me-1"></i> <?= _("Appliquer les modifications") ?>
+            </button>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Vue/Parambons/index.php b/Vue/Parambons/index.php
index e9103907..35ed516d 100755
--- a/Vue/Parambons/index.php
+++ b/Vue/Parambons/index.php
@@ -29,7 +29,7 @@
                             <th class="ps-4 border-0"><?= _("Type de Bon") ?></th>
                             <th class="border-0 text-center"><?= _("Durée de Vie") ?></th>
                             <th class="border-0 text-center"><?= _("Mode de Gestion") ?></th>
-                            <th class="border-0 text-end pe-4"><?= _("Actions") ?></th>
+                            <th class="border-0 text-end pe-4"><?= _("Action") ?></th>
                         </tr>
                     </thead>
                     <tbody>
@@ -67,7 +67,7 @@
         </div>
     </div>
 
-    <div id="div_maj_type_bon" class="mt-4"></div>
+    <div class="modal fade" id="div_maj_type_bon" tabindex="-1" aria-hidden="true"></div>
 </div>
 
 <script>