diff --git a/frontend/register.html b/frontend/register.html
index 64c69e1..e499cb6 100644
--- a/frontend/register.html
+++ b/frontend/register.html
@@ -65,6 +65,58 @@
             border-right: none !important;
             color: rgba(255, 255, 255, 0.5) !important;
         }
+        .password-toggle-wrapper {
+            position: relative;
+        }
+        .password-toggle-wrapper .custom-input {
+            padding-right: 3.25rem;
+        }
+        .password-toggle-btn {
+            position: absolute;
+            top: 50%;
+            right: 0.85rem;
+            transform: translateY(-50%);
+            border: none;
+            background: transparent;
+            color: rgba(255, 255, 255, 0.55);
+            padding: 0.25rem;
+            line-height: 1;
+        }
+        .password-toggle-btn:hover {
+            color: #ffffff;
+        }
+        .password-strength {
+            margin-top: 12px;
+        }
+        .password-strength-bar {
+            width: 100%;
+            height: 8px;
+            border-radius: 999px;
+            background: rgba(255, 255, 255, 0.12);
+            overflow: hidden;
+        }
+        .password-strength-bar > span {
+            display: block;
+            height: 100%;
+            width: 0%;
+            border-radius: inherit;
+            transition: width 0.18s ease, background-color 0.18s ease;
+        }
+        .password-strength-label {
+            margin-top: 8px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            color: rgba(255, 255, 255, 0.72);
+        }
+        .password-strength-label.is-weak {
+            color: #f87171;
+        }
+        .password-strength-label.is-medium {
+            color: #fbbf24;
+        }
+        .password-strength-label.is-strong {
+            color: #4ade80;
+        }
     </style>
 </head>
 
@@ -148,6 +200,12 @@ <h2 class="brand-gradient mb-1" style="font-family: 'Sora', sans-serif; font-wei
             <i class="bi bi-eye" aria-hidden="true"></i>
         </button>
     </div>
+    <div class="password-strength" aria-live="polite">
+        <div class="password-strength-bar" aria-hidden="true">
+            <span id="passwordStrengthBar"></span>
+        </div>
+        <div id="passwordStrengthLabel" class="password-strength-label">Strength: enter a password</div>
+    </div>
 </div>
 
                             <div class="d-grid mb-3">
@@ -172,7 +230,60 @@ <h2 class="brand-gradient mb-1" style="font-family: 'Sora', sans-serif; font-wei
 
         document.addEventListener('DOMContentLoaded', () => {
             const form = document.querySelector('form');
+            const passwordInput = document.getElementById('password');
+            const strengthBar = document.getElementById('passwordStrengthBar');
+            const strengthLabel = document.getElementById('passwordStrengthLabel');
+
+            const evaluatePasswordStrength = (password) => {
+                const value = password || '';
+                let score = 0;
+
+                if (value.length >= 8) score += 1;
+                if (/[A-Z]/.test(value)) score += 1;
+                if (/[a-z]/.test(value)) score += 1;
+                if (/[0-9]/.test(value)) score += 1;
+                if (/[^A-Za-z0-9]/.test(value)) score += 1;
+
+                if (!value) {
+                    return { label: 'enter a password', level: '', width: '0%' };
+                }
+
+                if (score <= 2) {
+                    return { label: 'weak', level: 'is-weak', width: '33%' };
+                }
+
+                if (score <= 4) {
+                    return { label: 'medium', level: 'is-medium', width: '66%' };
+                }
+
+                return { label: 'strong', level: 'is-strong', width: '100%' };
+            };
+
+            const updatePasswordStrength = () => {
+                if (!strengthBar || !strengthLabel || !passwordInput) return;
+                const { label, level, width } = evaluatePasswordStrength(passwordInput.value);
+                strengthBar.style.width = width;
+                strengthBar.classList.remove('bg-danger', 'bg-warning', 'bg-success');
+                strengthBar.style.backgroundColor = level === 'is-strong'
+                    ? '#4ade80'
+                    : level === 'is-medium'
+                        ? '#fbbf24'
+                        : level === 'is-weak'
+                            ? '#f87171'
+                            : 'transparent';
+                strengthLabel.classList.remove('is-weak', 'is-medium', 'is-strong');
+                if (level) {
+                    strengthLabel.classList.add(level);
+                    strengthLabel.textContent = `Strength: ${label}`;
+                } else {
+                    strengthLabel.textContent = 'Strength: enter a password';
+                }
+            };
+
             if (form) {
+                updatePasswordStrength();
+                passwordInput?.addEventListener('input', updatePasswordStrength);
+
                 form.addEventListener('submit', async (e) => {
                     e.preventDefault();
 
diff --git a/frontend/theme.css b/frontend/theme.css
index bd52e55..ae764e7 100644
--- a/frontend/theme.css
+++ b/frontend/theme.css
@@ -20,6 +20,13 @@
     --header-bg: rgba(255, 255, 255, 0.9);
     --input-bg: #ffffff;
     --input-group-bg: #ffffff;
+    --auth-input-bg: rgba(15, 23, 42, 0.5);
+    --auth-input-bg-focus: rgba(15, 23, 42, 0.8);
+    --auth-input-border: rgba(255, 255, 255, 0.1);
+    --auth-input-border-focus: #00b4db;
+    --auth-toggle-color: rgba(255, 255, 255, 0.5);
+    --auth-toggle-hover: #ffffff;
+    --auth-toggle-focus-ring: rgba(0, 180, 219, 0.25);
     --sidebar-bg-start: #0f172a;
     --sidebar-bg-end: #13263f;
     --sidebar-text: #f8fafc;
@@ -83,6 +90,13 @@
     --header-bg: rgba(30, 41, 59, 0.92);
     --input-bg: #1e293b;
     --input-group-bg: #1e293b;
+    --auth-input-bg: rgba(15, 23, 42, 0.55);
+    --auth-input-bg-focus: rgba(15, 23, 42, 0.75);
+    --auth-input-border: rgba(148, 163, 184, 0.25);
+    --auth-input-border-focus: rgba(0, 180, 219, 0.65);
+    --auth-toggle-color: rgba(226, 232, 240, 0.75);
+    --auth-toggle-hover: #ffffff;
+    --auth-toggle-focus-ring: rgba(0, 180, 219, 0.6);
     --sidebar-bg-start: #070d18;
     --sidebar-bg-end: #0f172a;
     --sidebar-text: #f1f5f9;
@@ -583,13 +597,6 @@ body.auth-page {
 .auth-page a.text-primary {
     color: var(--link-color) !important;
 }
-
-
-.password-toggle-btn:focus-visible {
-    outline: 2px solid rgba(13, 110, 253, 0.35);
-    outline-offset: 2px;
-}
-
 /* ── Campaigns page ── */
 .overview-grid {
     display: grid;
@@ -1251,9 +1258,9 @@ body.auth-page {
 
 .password-toggle-wrapper .form-control {
   padding-right: 3rem;
-  background-color: rgba(15, 23, 42, 0.55);
+  background-color: var(--auth-input-bg);
   color: #ffffff;
-  border: 1px solid rgba(148, 163, 184, 0.25);
+  border: 1px solid var(--auth-input-border);
 }
 
 .password-toggle-wrapper .form-control::placeholder {
@@ -1261,9 +1268,9 @@ body.auth-page {
 }
 
 .password-toggle-wrapper .form-control:focus {
-  background-color: rgba(15, 23, 42, 0.75);
+  background-color: var(--auth-input-bg-focus);
   color: #ffffff;
-  border-color: rgba(0, 180, 219, 0.65);
+  border-color: var(--auth-input-border-focus);
   box-shadow: 0 0 0 0.2rem rgba(0, 180, 219, 0.15);
 }
 
@@ -1283,7 +1290,7 @@ body.auth-page {
 
   border: none;
   background: transparent;
-  color: rgba(226, 232, 240, 0.75);
+  color: var(--auth-toggle-color);
 
   padding: 0;
   margin: 0;
@@ -1292,11 +1299,11 @@ body.auth-page {
 }
 
 .password-toggle-btn:hover {
-  color: #ffffff;
+  color: var(--auth-toggle-hover);
 }
 
 .password-toggle-btn:focus-visible {
-  outline: 2px solid rgba(0, 180, 219, 0.6);
+  outline: 2px solid var(--auth-toggle-focus-ring);
   outline-offset: 2px;
   border-radius: 999px;
 }