diff --git a/public/finance-tips.css b/public/finance-tips.css
index 8aae1567..31b73674 100644
--- a/public/finance-tips.css
+++ b/public/finance-tips.css
@@ -495,3 +495,58 @@ html{
     transform: translate(-50%, -50%) scale(1.3);
     background: linear-gradient(135deg, #00b4d8 0%, #64ffda 100%) !important;
   }
+/* Dark mode without changing existing colors */
+
+body.dark-mode{
+  filter: invert(1) hue-rotate(180deg);
+}
+
+/* Fix images & icons */
+body.dark-mode img,
+body.dark-mode video,
+body.dark-mode iframe{
+  filter: invert(1) hue-rotate(180deg);
+}/* ======================
+   THEME VARIABLES
+====================== */
+
+:root{
+  --bg-color:#ffffff;
+  --card-bg:#f8fafc;
+  --text-color:#1e293b;
+  --accent:#22c55e;
+}
+
+[data-theme="dark"]{
+  --bg-color:#0f172a;
+  --card-bg:#1e293b;
+  --text-color:#f1f5f9;
+  --accent:#4ade80;
+}
+
+/* Apply theme */
+
+body{
+  background:var(--bg-color);
+  color:var(--text-color);
+  transition:0.3s;
+}
+
+.balance-card{
+  background:var(--card-bg);
+}
+
+.hero-section{
+  background:linear-gradient(135deg,var(--accent),#15803d);
+}
+
+/* Toggle button */
+
+.theme-toggle{
+  border:none;
+  background:transparent;
+  font-size:18px;
+  cursor:pointer;
+  color:var(--text-color);
+  margin-left:15px;
+}
\ No newline at end of file
diff --git a/public/finance-tips.html b/public/finance-tips.html
index 408e8628..f03f025f 100644
--- a/public/finance-tips.html
+++ b/public/finance-tips.html
@@ -29,19 +29,25 @@
 <!-- HEADER -->
 <header class="header">
   <nav class="navbar">
-    <div class="nav-container">
-      <div class="nav-logo">
-        <i class="fas fa-wallet"></i>
-        <span><a href="index.html" class="nav-link">ExpenseFlow</a></span>
-      </div>
+   <div class="nav-container">
+  <div class="nav-logo">
+    <i class="fas fa-wallet"></i>
+    <span><a href="index.html" class="nav-link">ExpenseFlow</a></span>
+  </div>
 
-      <div class="nav-menu">
-        <a href="index.html" class="nav-link">Dashboard</a>
-        <a href="analytics.html" class="nav-link">Analytics</a>
-        <a href="finance-tips.html" class="nav-link active">Finance Tips</a>
-        <a href="settings.html" class="nav-link">Settings</a>
-      </div>
-    </div>
+  <div class="nav-menu">
+    <a href="index.html" class="nav-link">Dashboard</a>
+    <a href="analytics.html" class="nav-link">Analytics</a>
+    <a href="finance-tips.html" class="nav-link active">Finance Tips</a>
+    <a href="settings.html" class="nav-link">Settings</a>
+  </div>
+
+  <!-- DARK MODE BUTTON -->
+  <button id="theme-toggle" class="theme-toggle">
+    <i class="fas fa-moon"></i>
+  </button>
+
+</div>
   </nav>
 </header>
 
diff --git a/public/finance-tips.js b/public/finance-tips.js
index cc3dade3..cb33545d 100644
--- a/public/finance-tips.js
+++ b/public/finance-tips.js
@@ -150,3 +150,27 @@
   // Start animation
   animateTrail();
 })();
+const toggleBtn = document.getElementById("theme-toggle");
+
+// Load saved theme
+const savedTheme = localStorage.getItem("theme");
+
+if(savedTheme === "dark"){
+  document.documentElement.setAttribute("data-theme","dark");
+}
+
+// Toggle theme
+toggleBtn.addEventListener("click", () => {
+
+  const currentTheme =
+    document.documentElement.getAttribute("data-theme");
+
+  if(currentTheme === "dark"){
+    document.documentElement.removeAttribute("data-theme");
+    localStorage.setItem("theme","light");
+  }else{
+    document.documentElement.setAttribute("data-theme","dark");
+    localStorage.setItem("theme","dark");
+  }
+
+});
\ No newline at end of file