diff --git a/public/AboutUs.html b/public/AboutUs.html
index 71ad59e3..68b5c0e1 100644
--- a/public/AboutUs.html
+++ b/public/AboutUs.html
@@ -50,6 +50,7 @@
           <a href="AboutUs.html" class="nav-link active">About Us</a>
           <a href="contact.html" class="nav-link">Contact</a>
           <a href="settings.html" class="nav-link">Settings</a>
+          <button id="themeToggle" class="theme-toggle">🌙</button>
         </div>
       </div>
     </nav>
@@ -232,6 +233,33 @@ <h4>Company</h4>
 <!-- Blue Cursor Trail -->
 <div class="circle-container" id="cursorTrail"></div>
 <script>
+
+const toggle = document.getElementById("themeToggle");
+
+// Toggle theme
+toggle.addEventListener("click", function(){
+
+document.body.classList.toggle("dark-mode");
+
+if(document.body.classList.contains("dark-mode")){
+localStorage.setItem("theme","dark");
+toggle.textContent="☀️";
+}
+else{
+localStorage.setItem("theme","light");
+toggle.textContent="🌙";
+}
+
+});
+
+// Load saved theme
+if(localStorage.getItem("theme") === "dark"){
+document.body.classList.add("dark-mode");
+toggle.textContent="☀️";
+}
+
+</script>
+<script>
 /* ============================= */
 /* 🔝 Scroll To Top Script */
 /* ============================= */
diff --git a/public/aboutus.css b/public/aboutus.css
index 5a575164..c373dd6b 100644
--- a/public/aboutus.css
+++ b/public/aboutus.css
@@ -3,6 +3,10 @@
    HELP CENTER – SAFE UI ENHANCEMENTS
    (NO PARENT LAYOUT CHANGES)
 ========================= */
+body.dark-mode .feedback-form button{
+  background:#2563eb;
+  color:white;
+}
 html{
   scroll-behavior: smooth;
 }
@@ -653,4 +657,181 @@ html{
     width: 45px;
     height: 45px;
   }
+}/* Toggle Button */
+.theme-toggle{
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: inherit;
+  margin-left: 15px;
+}
+
+/* Dark Mode Base */
+body.dark-mode{
+  background:#0f172a;
+  color:#e5e7eb;
+}
+
+/* Cards */
+body.dark-mode .balance-card{
+  background:#1e293b;
+  color:#e5e7eb;
+}
+
+/* Navbar */
+body.dark-mode .navbar{
+  background:#020617;
+}
+
+/* Footer */
+body.dark-mode .footer{
+  background:#020617;
+}
+
+/* Links */
+body.dark-mode a{
+  color:#38bdf8;
+}
+
+/* Inputs */
+body.dark-mode input,
+body.dark-mode textarea{
+  background:#1e293b;
+  color:white;
+  border:1px solid #334155;
+}
+
+/* Button */
+body.dark-mode button{
+  background:#2563eb;
+  color:white;
+}/* ============================= */
+/* GLOBAL LIGHT MODE (DEFAULT) */
+/* ============================= */
+
+body{
+  background:#ffffff;
+  color:#111827;
+  transition: background 0.3s ease, color 0.3s ease;
+}
+
+/* Links */
+a{
+  color:#2563eb;
+}
+
+/* Navbar */
+.navbar{
+  background:#ffffff;
+  color:#111827;
+}
+
+/* Footer */
+.footer{
+  background:#f3f4f6;
+  color:#111827;
+}
+
+/* Cards */
+.balance-card{
+  background:#ffffff;
+  color:#111827;
+  border:1px solid #e5e7eb;
+}
+
+/* Inputs */
+input,
+textarea{
+  background:#ffffff;
+  color:#111827;
+  border:1px solid #d1d5db;
+}
+
+/* Buttons */
+button{
+  background:#6366f1;
+  color:white;
+}
+
+
+/* ============================= */
+/* DARK MODE */
+/* ============================= */
+
+body.dark-mode{
+  background:#0f172a;
+  color:#e5e7eb;
+}
+
+/* Navbar */
+body.dark-mode .navbar{
+  background:#020617;
+  color:#e5e7eb;
+}
+
+/* Footer */
+body.dark-mode .footer{
+  background:#020617;
+  color:#e5e7eb;
+}
+
+/* Cards */
+body.dark-mode .balance-card{
+  background:#1e293b;
+  color:#e5e7eb;
+  border:1px solid #334155;
+}
+
+/* Links */
+body.dark-mode a{
+  color:#38bdf8;
+}
+
+/* Inputs */
+body.dark-mode input,
+body.dark-mode textarea{
+  background:#1e293b;
+  color:#ffffff;
+  border:1px solid #334155;
+}
+
+/* Feedback button only */
+body.dark-mode .feedback-form button{
+  background:#2563eb;
+  color:white;
+}
+
+
+/* ============================= */
+/* THEME TOGGLE BUTTON */
+/* ============================= */
+
+.theme-toggle{
+  background:none;
+  border:none;
+  font-size:20px;
+  cursor:pointer;
+  color:inherit;
+  margin-left:15px;
+  transition:transform 0.2s ease;
+}
+
+.theme-toggle:hover{
+  transform:scale(1.15);
+}
+
+
+/* ============================= */
+/* SMOOTH TRANSITIONS */
+/* ============================= */
+
+body,
+.navbar,
+.footer,
+.balance-card,
+input,
+textarea,
+button{
+  transition: all 0.3s ease;
 }
\ No newline at end of file
diff --git a/public/blog.html b/public/blog.html
index 7d3cf269..5cd93f78 100644
--- a/public/blog.html
+++ b/public/blog.html
@@ -371,6 +371,95 @@
     color:#64748b;
     font-size:0.9rem;
 }
+/* ===============================
+   LIGHT MODE SUPPORT
+================================*/
+
+html[data-theme="light"] body{
+    background:#f8fafc;
+    color:#0f172a;
+}
+
+/* Header */
+html[data-theme="light"] .blog-header{
+    background: radial-gradient(circle at top,#ffffff 0%,#e2e8f0 70%);
+}
+
+html[data-theme="light"] .blog-subtitle{
+    color:#475569;
+}
+
+/* Search */
+html[data-theme="light"] .blog-search-input{
+    background:#ffffff;
+    border:1px solid #cbd5e1;
+    color:#0f172a;
+}
+
+html[data-theme="light"] .blog-search-icon{
+    color:#2563eb;
+}
+
+/* Cards */
+html[data-theme="light"] .blog-card{
+    background:#ffffff;
+    border:1px solid #e2e8f0;
+}
+
+html[data-theme="light"] .blog-card h3{
+    color:#0f172a;
+}
+
+html[data-theme="light"] .blog-card p{
+    color:#475569;
+}
+
+/* Modal */
+html[data-theme="light"] .blog-modal-content{
+    background:#ffffff;
+    border:1px solid #e2e8f0;
+}
+
+/* Footer */
+html[data-theme="light"] .footer{
+    background:#ffffff;
+    border-top:1px solid #e2e8f0;
+}
+
+html[data-theme="light"] .footer-section h4{
+    color:#0f172a;
+}
+
+html[data-theme="light"] .footer-section a{
+    color:#475569;
+}
+
+html[data-theme="light"] .footer-section a:hover{
+    color:#2563eb;
+}
+
+html[data-theme="light"] .social-links a{
+    background:#e2e8f0;
+    color:#2563eb;
+}/* Theme Toggle Button */
+.theme-toggle{
+    background:none;
+    border:none;
+    font-size:18px;
+    cursor:pointer;
+    margin-left:15px;
+    color:#64ffda;
+    transition:0.3s;
+}
+
+.theme-toggle:hover{
+    transform:scale(1.15);
+}
+
+/* Light mode button color */
+html[data-theme="light"] .theme-toggle{
+    color:#2563eb;
+}
 </style>
 <body>
 
@@ -381,11 +470,16 @@
             <i class="fas fa-wallet"></i> ExpenseFlow
         </a>
         <div class="nav-links">
-            <a href="index.html" class="nav-link">Home</a>
-            <a href="faq.html" class="nav-link">FAQ</a>
-            <a href="blog.html" class="nav-link active">Blog</a>
-            <a href="login.html" class="nav-link">Login</a>
-        </div>
+    <a href="index.html" class="nav-link">Home</a>
+    <a href="faq.html" class="nav-link">FAQ</a>
+    <a href="blog.html" class="nav-link active">Blog</a>
+    <a href="login.html" class="nav-link">Login</a>
+
+    <!-- Theme Toggle -->
+    <button class="theme-toggle" id="themeToggle">
+        <i class="fas fa-moon"></i>
+    </button>
+</div>
     </div>
 </nav>
 
@@ -529,6 +623,19 @@ <h3>${blog.title}</h3>
         card.style.display = card.innerText.toLowerCase().includes(value) ? "block":"none";
     });
 });
+const toggle = document.querySelector(".theme-toggle");
+
+toggle.addEventListener("click", () => {
+    const current = document.documentElement.getAttribute("data-theme");
+
+    if(current === "light"){
+        document.documentElement.setAttribute("data-theme","dark");
+        localStorage.setItem("theme","dark");
+    } else {
+        document.documentElement.setAttribute("data-theme","light");
+        localStorage.setItem("theme","light");
+    }
+});
 </script>
 <script src="blog.js"></script>
 
diff --git a/public/faq.css b/public/faq.css
index 5d663a9a..c92ee082 100644
--- a/public/faq.css
+++ b/public/faq.css
@@ -624,3 +624,61 @@ html[data-theme="dark"] {
     --bg-secondary: #1e293b;
     --text-primary: #f1f5f9;
 }
+.theme-toggle{
+  background:none;
+  border:none;
+  font-size:18px;
+  cursor:pointer;
+  margin-left:15px;
+  color:inherit;
+}
+
+.theme-toggle:hover{
+  transform:scale(1.1);
+}/* ============================= */
+/* LIGHT MODE GLOBAL FIX */
+/* ============================= */
+
+html[data-theme="light"] body{
+    background:#ffffff;
+    color:#111111;
+}
+
+/* Navbar */
+html[data-theme="light"] .navbar{
+    background:#ffffff;
+    border-bottom:1px solid rgba(0,0,0,0.1);
+}
+
+/* Footer */
+html[data-theme="light"] .footer{
+    background:#f5f5f5;
+    border-top:1px solid rgba(0,0,0,0.1);
+}
+
+/* Links */
+html[data-theme="light"] .nav-link{
+    color:#374151;
+}
+
+html[data-theme="light"] .nav-link:hover,
+html[data-theme="light"] .nav-link.active{
+    color:#2563eb;
+}
+
+/* Categories */
+html[data-theme="light"] .category-btn{
+    background:#ffffff;
+    border:1px solid rgba(37,99,235,0.2);
+    color:#374151;
+}
+
+html[data-theme="light"] .category-btn:hover{
+    background:rgba(37,99,235,0.08);
+    color:#2563eb;
+}
+
+/* FAQ hover */
+html[data-theme="light"] .faq-item:hover{
+    background:#f9fafb;
+}
\ No newline at end of file
diff --git a/public/faq.html b/public/faq.html
index 02bcae4a..ede67564 100644
--- a/public/faq.html
+++ b/public/faq.html
@@ -24,10 +24,15 @@
                 <i class="fas fa-wallet"></i> ExpenseFlow
             </a>
             <div class="nav-links">
-                <a href="index.html" class="nav-link">Home</a>
-                <a href="faq.html" class="nav-link active">FAQ</a>
-                <a href="login-signup.html" class="nav-link">Login</a>
-            </div>
+    <a href="index.html" class="nav-link">Home</a>
+    <a href="faq.html" class="nav-link active">FAQ</a>
+    <a href="login-signup.html" class="nav-link">Login</a>
+
+    <!-- Theme Toggle -->
+    <button id="themeToggle" class="theme-toggle">
+        <i class="fas fa-moon"></i>
+    </button>
+</div>
         </div>
     </nav>
 
diff --git a/public/faq.js b/public/faq.js
index ae0fe8ee..51f6916d 100644
--- a/public/faq.js
+++ b/public/faq.js
@@ -217,3 +217,24 @@ document.addEventListener('click', (e) => {
         trackFAQInteraction('category_switch', category);
     }
 });
+const toggle = document.getElementById("themeToggle");
+
+toggle.addEventListener("click", () => {
+
+let currentTheme = document.documentElement.getAttribute("data-theme");
+
+if(currentTheme === "light"){
+document.documentElement.setAttribute("data-theme","dark");
+localStorage.setItem("theme","dark");
+}else{
+document.documentElement.setAttribute("data-theme","light");
+localStorage.setItem("theme","light");
+}
+
+});
+
+const savedTheme = localStorage.getItem("theme");
+
+if(savedTheme){
+document.documentElement.setAttribute("data-theme",savedTheme);
+}
\ No newline at end of file