diff --git a/static/css/styles.css b/static/css/styles.css
index a78ddfb..ed991db 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -188,3 +188,36 @@ body.i18n-loading #app-page {
     font-weight: 600;
     background: rgba(0, 0, 0, 0.02);
 }
+
+/* ---------------------------------------------------------------------------
+   Dark mode overrides (Bootstrap 5.3 data-bs-theme="dark")
+   Bootstrap handles most components automatically; only custom elements need
+   explicit overrides here.
+--------------------------------------------------------------------------- */
+[data-bs-theme="dark"] .card {
+    border-color: rgba(255, 255, 255, 0.08);
+}
+
+[data-bs-theme="dark"] .card-header {
+    background: rgba(255, 255, 255, 0.04);
+}
+
+[data-bs-theme="dark"] .log-entry {
+    border-bottom-color: rgba(255, 255, 255, 0.07);
+}
+
+[data-bs-theme="dark"] .log-time {
+    color: #9ca3af;
+}
+
+[data-bs-theme="dark"] .table th {
+    color: #9ca3af;
+}
+
+[data-bs-theme="dark"] .login-container {
+    background: linear-gradient(135deg, #0d0d1a 0%, #0a1020 50%, #071525 100%);
+}
+
+[data-bs-theme="dark"] .stat-card {
+    background: var(--bs-card-bg);
+}
diff --git a/static/index.html b/static/index.html
index 9af8f71..6d2667d 100644
--- a/static/index.html
+++ b/static/index.html
@@ -6,6 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>NetBird MSP Appliance</title>
     <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
+    <script>
+        // Apply dark mode before page renders to prevent flash
+        (function () {
+            const saved = localStorage.getItem('darkMode');
+            if (saved === 'dark') document.documentElement.setAttribute('data-bs-theme', 'dark');
+        })();
+    </script>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css" rel="stylesheet">
     <link href="/static/css/styles.css" rel="stylesheet">
@@ -109,6 +116,10 @@
                     <span id="nav-brand-name">NetBird MSP</span>
                 </a>
                 <div class="d-flex align-items-center">
+                    <!-- Dark Mode Toggle -->
+                    <button class="btn btn-outline-light btn-sm me-2" id="darkmode-toggle" onclick="toggleDarkMode()" title="Toggle dark mode">
+                        <i id="darkmode-icon" class="bi bi-moon-fill"></i>
+                    </button>
                     <!-- Language Switcher -->
                     <div class="dropdown me-2">
                         <button class="btn btn-outline-light btn-sm dropdown-toggle" id="language-switcher-btn"
diff --git a/static/js/app.js b/static/js/app.js
index dcb43ad..01fa4a6 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -66,10 +66,35 @@ async function api(method, path, body = null) {
     return data;
 }
 
+// ---------------------------------------------------------------------------
+// Dark mode
+// ---------------------------------------------------------------------------
+function toggleDarkMode() {
+    const isDark = document.documentElement.getAttribute('data-bs-theme') === 'dark';
+    if (isDark) {
+        document.documentElement.removeAttribute('data-bs-theme');
+        localStorage.setItem('darkMode', 'light');
+        document.getElementById('darkmode-icon').className = 'bi bi-moon-fill';
+    } else {
+        document.documentElement.setAttribute('data-bs-theme', 'dark');
+        localStorage.setItem('darkMode', 'dark');
+        document.getElementById('darkmode-icon').className = 'bi bi-sun-fill';
+    }
+}
+
+function syncDarkmodeIcon() {
+    const icon = document.getElementById('darkmode-icon');
+    if (!icon) return;
+    icon.className = document.documentElement.getAttribute('data-bs-theme') === 'dark'
+        ? 'bi bi-sun-fill'
+        : 'bi bi-moon-fill';
+}
+
 // ---------------------------------------------------------------------------
 // Auth
 // ---------------------------------------------------------------------------
 async function initApp() {
+    syncDarkmodeIcon();
     await initI18n();
     await loadBranding();
     await loadAzureLoginConfig();