diff --git a/static/script.js b/static/script.js
index 9d96ab9..9468de0 100644
--- a/static/script.js
+++ b/static/script.js
@@ -955,3 +955,52 @@ if (scrollTopBtn) {
     window.addEventListener('scroll', handleScroll);
     scrollTopBtn.addEventListener('click', scrollToTop);
 }
+
+// ============================================================
+// Theme Toggle
+// ============================================================
+
+(function initThemeToggle() {
+
+  var themeToggle = document.getElementById("theme-toggle");
+  var mobileThemeToggle = document.getElementById("mobile-theme-toggle");
+
+  var themeIcon = document.getElementById("theme-icon");
+  var mobileThemeIcon = document.getElementById("mobile-theme-icon");
+
+  var savedTheme = localStorage.getItem("theme");
+
+  // Load saved theme
+  if (savedTheme === "dark") {
+    document.body.classList.add("dark-theme");
+
+    if (themeIcon) themeIcon.textContent = "☀️";
+    if (mobileThemeIcon) mobileThemeIcon.textContent = "☀️";
+  }
+
+  function toggleTheme() {
+
+    document.body.classList.toggle("dark-theme");
+
+    var isDark = document.body.classList.contains("dark-theme");
+
+    localStorage.setItem("theme", isDark ? "dark" : "light");
+
+    if (themeIcon) {
+      themeIcon.textContent = isDark ? "☀️" : "🌙";
+    }
+
+    if (mobileThemeIcon) {
+      mobileThemeIcon.textContent = isDark ? "☀️" : "🌙";
+    }
+  }
+
+  if (themeToggle) {
+    themeToggle.addEventListener("click", toggleTheme);
+  }
+
+  if (mobileThemeToggle) {
+    mobileThemeToggle.addEventListener("click", toggleTheme);
+  }
+
+})();
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 13cd1c9..a5b40c1 100644
--- a/static/style.css
+++ b/static/style.css
@@ -2816,6 +2816,384 @@ select:focus {
 }
 
 #scroll-top-btn.visible {
+    display: flex;
+}
+
+/* ==========================================================
+   DARK MODE
+
+body.dark-theme {
+  background: #0b1120;
+  color: #f8fafc;
+}
+
+/* ==========================================================
+   NAVBAR
+
+body.dark-theme .navbar {
+  background: rgba(10, 15, 35, 0.96);
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+}
+
+body.dark-theme .nav-link,
+body.dark-theme .nav-mobile-link {
+  color: rgba(255,255,255,0.82);
+}
+
+body.dark-theme .nav-link:hover,
+body.dark-theme .nav-mobile-link:hover {
+  color: white;
+}
+
+body.dark-theme .nav-logo {
+  color: white;
+}
+
+body.dark-theme .nav-logo-accent {
+  color: #facc15;
+}
+
+/* hamburger */
+
+body.dark-theme .nav-mobile-toggle span {
+  background: white;
+}
+
+body.dark-theme .nav-mobile-menu {
+  background: #131c31;
+}
+
+/* ==========================================================
+   HERO
+
+body.dark-theme .hero {
+  background:
+    radial-gradient(circle at top left,
+      rgba(99,102,241,0.22),
+      transparent 32%),
+    linear-gradient(
+      135deg,
+      #0f172a 0%,
+      #1e1b4b 55%,
+      #4c1d95 100%
+    );
+}
+
+body.dark-theme .hero-heading {
+  color: white;
+}
+
+body.dark-theme .hero-subtext {
+  color: rgba(255,255,255,0.78);
+}
+
+/* hero buttons */
+
+body.dark-theme .btn-hero-ghost {
+  color: white;
+  border-color: rgba(255,255,255,0.16);
+  background: rgba(255,255,255,0.06);
+}
+
+body.dark-theme .btn-hero-ghost:hover {
+  background: rgba(255,255,255,0.12);
+}
+
+/* hero floating cards */
+
+body.dark-theme .hero-visual-card {
+  background: rgba(255,255,255,0.96);
+}
+
+body.dark-theme .hvc-title {
+  color: #111827;
+}
+
+body.dark-theme .hvc-sub {
+  color: #4b5563;
+}
+
+/* ==========================================================
+   GENERAL SECTIONS
+
+body.dark-theme .features-section,
+body.dark-theme .how-section,
+body.dark-theme .form-section,
+body.dark-theme .about-section,
+body.dark-theme .stats-section {
+  background: #0f172a;
+}
+
+body.dark-theme .skill-strip {
+  background: #111827;
+  border-color: rgba(255,255,255,0.05);
+}
+
+/* ==========================================================
+   TITLES + TEXT
+
+body.dark-theme .section-title,
+body.dark-theme .section-sub,
+body.dark-theme .step-card h3,
+body.dark-theme .step-card p,
+body.dark-theme .stat-value,
+body.dark-theme .stat-label,
+body.dark-theme .footer-tagline,
+body.dark-theme .footer-col-title,
+body.dark-theme .footer-links-list a,
+body.dark-theme .footer-bottom p,
+body.dark-theme .footer-bottom-links a {
+  color: white;
+}
+
+body.dark-theme .section-eyebrow {
+  background: rgba(255,255,255,0.08);
+  color: #a5b4fc;
+}
+
+/* ==========================================================
+   CARDS
+
+body.dark-theme .stat-card,
+body.dark-theme .step-card,
+body.dark-theme .form-card {
+  background: #172033;
+  border: 1px solid rgba(255,255,255,0.06);
+}
+
+/* ==========================================================
+   FEATURE CARDS
+
+body.dark-theme .feature-card--pink {
+  background: #3c2230;
+}
+
+body.dark-theme .feature-card--yellow {
+  background: #3c3422;
+}
+
+body.dark-theme .feature-card--purple {
+  background: #2d2440;
+}
+
+body.dark-theme .feature-card h3 {
+  color: white;
+}
+
+body.dark-theme .feature-card p {
+  color: rgba(255,255,255,0.8);
+}
+
+body.dark-theme .feature-card-link {
+  background: rgba(255,255,255,0.08);
+  color: white;
+  border-color: rgba(255,255,255,0.14);
+}
+
+/* ==========================================================
+   ABOUT SECTION
+
+body.dark-theme .about-card {
+  background: #172033;
+  border: 1px solid rgba(255,255,255,0.08);
+}
+
+body.dark-theme .about-card h3,
+body.dark-theme .about-card p {
+  color: white;
+}
+
+/* ==========================================================
+   FORMS
+
+body.dark-theme label {
+  color: rgba(255,255,255,0.9);
+}
+
+body.dark-theme input,
+body.dark-theme select,
+body.dark-theme textarea,
+body.dark-theme .skill-input-wrap {
+  background: #111827;
+  color: white;
+  border-color: rgba(255,255,255,0.08);
+}
+
+body.dark-theme input::placeholder,
+body.dark-theme textarea::placeholder {
+  color: rgba(255,255,255,0.45);
+}
+
+/* dropdown */
+
+body.dark-theme .skills-suggestions {
+  background: #172033;
+  border-color: rgba(255,255,255,0.08);
+}
+
+body.dark-theme .suggestion-item {
+  color: white;
+  border-bottom-color: rgba(255,255,255,0.04);
+}
+
+body.dark-theme .suggestion-item:hover,
+body.dark-theme .suggestion-item--active {
+  background: #243047;
+}
+
+/* github button */
+
+body.dark-theme #btn-show-github {
+  background: rgba(255,255,255,0.08);
+  color: white;
+}
+
+body.dark-theme #btn-show-github:hover {
+  background: rgba(255,255,255,0.14);
+}
+
+/* ==========================================================
+   FOOTER
+
+body.dark-theme .footer {
+  background: #0b1120;
+}
+
+body.dark-theme .footer-inner {
+  border-color: rgba(255,255,255,0.06);
+}
+
+body.dark-theme .footer-links-list a:hover,
+body.dark-theme .footer-bottom-links a:hover {
+  color: white;
+}
+
+/* skill strip text */
+
+body.dark-theme .skill-strip-label,
+body.dark-theme .ss-item {
+  color: rgba(255,255,255,0.82);
+}
+
+body.dark-theme .ss-sep {
+  background: rgba(255,255,255,0.22);
+}
+
+/* =========================================
+   THEME TOGGLE BUTTON
+
+.theme-toggle {
+  width: 48px;
+  height: 48px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: 50%;
+  cursor: pointer;
+
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+
+  transition: all 0.25s ease;
+
+  padding: 0;
+  outline: none;
+}
+
+.theme-toggle:hover {
+  background: rgba(255, 255, 255, 0.16);
+  transform: translateY(-2px);
+}
+
+/* icon styling */
+
+.theme-toggle svg,
+.theme-toggle i,
+.theme-toggle img {
+  width: 22px !important;
+  height: 22px !important;
+
+  color: #facc15 !important;
+  fill: #facc15 !important;
+
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+
+  display: block;
+  object-fit: contain;
+}
+
+/* =========================================
+   DARK MODE TOGGLE
+
+body.dark-theme .theme-toggle {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+body.dark-theme .theme-toggle:hover {
+  background: rgba(255, 255, 255, 0.14);
+}
+
+/* =========================================
+   MOBILE / HAMBURGER MENU TOGGLE
+
+.mobile-theme-toggle {
+  width: 100%;
+  height: 52px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+
+  border-radius: 14px;
+
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+
+  color: white;
+  font-size: 1rem;
+  font-weight: 600;
+
+  cursor: pointer;
+
+  margin-bottom: 14px;
+
+  transition: all 0.25s ease;
+
+  padding: 0 16px;
+}
+
+.mobile-theme-toggle:hover {
+  background: rgba(255, 255, 255, 0.14);
+}
+
+/* icon inside mobile button */
+
+.mobile-theme-toggle svg,
+.mobile-theme-toggle i,
+.mobile-theme-toggle img {
+  width: 20px !important;
+  height: 20px !important;
+
+  color: #facc15 !important;
+  fill: #facc15 !important;
+
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* =========================================
+   REMOVE EXTRA WHITE BACKGROUNDS
+
+.theme-toggle *,
+.mobile-theme-toggle * {
+  background: transparent !important;
   display: flex;
 }
 
diff --git a/templates/index.html b/templates/index.html
index da7072b..e5b3cd4 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -24,6 +24,11 @@
         <a href="#how-it-works" class="nav-link">How It Works</a>
         <a href="#features" class="nav-link">Features</a>
         <a href="#find-project" class="nav-link">Find Project</a>
+
+        <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
+          <span id="theme-icon">🌙</span>
+        </button>
+
         <a href="https://github.com/komalharshita/DevPath" target="_blank" rel="noopener noreferrer" class="nav-btn-outline">GitHub</a>
       </div>
       <!-- Mobile hamburger toggle -->
@@ -33,6 +38,10 @@
     </div>
     <!-- Mobile menu -->
     <div class="nav-mobile-menu" id="nav-mobile-menu">
+      <button class="theme-toggle mobile-theme-toggle" id="mobile-theme-toggle">
+        <span id="mobile-theme-icon">🌙</span>
+        Toggle Theme
+      </button>
       <a href="#home" class="nav-mobile-link">Home</a>
       <a href="#how-it-works" class="nav-mobile-link">How It Works</a>
       <a href="#features" class="nav-mobile-link">Features</a>