diff --git a/Vue/Paramreinitmotpass/majcomplexitepassword.php b/Vue/Paramreinitmotpass/majcomplexitepassword.php
index 122f01ed..69ab09a0 100755
--- a/Vue/Paramreinitmotpass/majcomplexitepassword.php
+++ b/Vue/Paramreinitmotpass/majcomplexitepassword.php
@@ -16,62 +16,41 @@ function getSecurityIcon($libelle) {
 }
 ?>
 
-<div class="row g-3">
-    <div id="div_expression_non_actif" class="col-md-6">
-        <div class="card border-0 shadow-xs h-100" style="border-radius: var(--radius-md); background: #fdfdfd;">
-            <div class="card-header bg-white border-0 py-3 text-center">
-                <h6 class="mb-0 fw-bold text-muted text-uppercase small">
-                    <i class="fas fa-list-check me-2"></i><?= _("Expressions Non Actives") ?>
-                </h6>
-            </div>
-            <div class="card-body p-0">
-                <div class="list-group list-group-flush border-top" style="max-height: 400px; overflow-y: auto;">
-                    <?php foreach ($expressionsinactives as $exp): 
-                        $idExpression = $exp['code'];
-                        $icon = getSecurityIcon($exp['libelle']);
-                    ?>
-                    <div class="list-group-item d-flex justify-content-between align-items-center py-3 border-light">
-                        <div class="d-flex align-items-center ps-2">
-                            <i class="fas <?= $icon ?> text-muted me-3" style="width: 20px; text-align: center;"></i>
-                            <span class="text-dark fw-medium" style="font-size: 9.5pt;"><?= $this->nettoyer($exp['libelle']) ?></span>
-                        </div>
-                        <button type="button" class="btn btn-primary btn-xs rounded-circle shadow-sm" 
-                                onClick="javascript:ajouter_une_expression_complexite_pass('<?=$idExpression?>', '1');">
-                            <i class="fas fa-arrow-right"></i>
-                        </button>
-                    </div>
-                    <?php endforeach; ?>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div id="div_expression_actif" class="col-md-6">
-        <div class="card border-0 shadow-sm h-100 border-start border-warning border-4" style="border-radius: var(--radius-md);">
-            <div class="card-header bg-white border-0 py-3 text-center">
-                <h6 class="mb-0 fw-bold text-warning text-uppercase small">
-                    <i class="fas fa-lock-keyhole me-2"></i><?= _("Expressions Actives") ?>
-                </h6>
-            </div>
-            <div class="card-body p-0">
-                <div class="list-group list-group-flush border-top">
-                    <?php foreach ($expressionsactives as $exp): 
-                        $idExpression = $exp['code'];
-                        $icon = getSecurityIcon($exp['libelle']);
-                    ?>
-                    <div class="list-group-item d-flex justify-content-between align-items-center py-3 border-light bg-warning-ghost">
-                        <button type="button" class="btn btn-outline-danger btn-xs rounded-circle shadow-sm" 
-                                onClick="javascript:ajouter_une_expression_complexite_pass('<?=$idExpression?>', '0');">
-                            <i class="fas fa-arrow-left"></i>
-                        </button>
-                        <div class="d-flex align-items-center pe-2">
-                            <span class="text-dark fw-bold me-3" style="font-size: 9.5pt;"><?= $this->nettoyer($exp['libelle']) ?></span>
-                            <i class="fas <?= $icon ?> text-warning" style="width: 20px; text-align: center;"></i>
-                        </div>
-                    </div>
-                    <?php endforeach; ?>
-                </div>
-            </div>
-        </div>
-    </div>
+<div id="div_complexite_pass" class="row g-3">
+	<div class="col-md-6" id="div_expression_non_actif">
+		<div class="border rounded bg-white p-3 h-100 shadow-xs">
+			<p class="small fw-bold text-muted text-center border-bottom pb-2 mb-3"><?= _("Expressions Non Actives") ?></p>
+			<div class="list-group list-group-flush scroll-custom" style="max-height: 400px; overflow-y: auto;">
+				<?php foreach ($expressionsinactives as $exp): $icon = getSecurityIcon($exp['libelle']); ?>
+				<div class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 py-2">
+					<div class="d-flex align-items-center">
+						<i class="fas <?= $icon ?> text-muted me-2" style="width: 20px; text-align: center; opacity: 0.5;"></i>
+						<span class="small text-dark"><?= $this->nettoyer($exp['libelle']) ?></span>
+					</div>
+					<button class="btn btn-outline-primary btn-xs rounded-circle" onClick="ajouter_une_expression_complexite_pass('<?= $exp['code'] ?>', '1');">
+						<i class="fas fa-chevron-right"></i>
+					</button>
+				</div>
+				<?php endforeach; ?>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-6" id="div_expression_actif">
+		<div class="border rounded bg-white p-3 h-100 border-warning shadow-xs">
+			<p class="small fw-bold text-warning text-center border-bottom pb-2 mb-3"><?= _("Expressions Actives") ?></p>
+			<div class="list-group list-group-flush">
+				<?php foreach ($expressionsactives as $exp): $icon = getSecurityIcon($exp['libelle']); ?>
+				<div class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 py-2">
+					<button class="btn btn-outline-danger btn-xs rounded-circle" onClick="ajouter_une_expression_complexite_pass('<?= $exp['code'] ?>', '0');">
+						<i class="fas fa-chevron-left"></i>
+					</button>
+					<div class="d-flex align-items-center">
+						<span class="small fw-bold text-dark me-2"><?= $this->nettoyer($exp['libelle']) ?></span>
+						<i class="fas <?= $icon ?> text-warning" style="width: 20px; text-align: center;"></i>
+					</div>
+				</div>
+				<?php endforeach; ?>
+			</div>
+		</div>
+	</div>
 </div>
\ No newline at end of file