diff --git a/static/script.js b/static/script.js
index bb0f30e9..08379d9f 100644
--- a/static/script.js
+++ b/static/script.js
@@ -965,3 +965,38 @@ if (scrollTopBtn) {
     window.addEventListener('scroll', handleScroll);
     scrollTopBtn.addEventListener('click', scrollToTop);
 }
+}
+
+
+// ============================================================
+// Dark Mode Toggle
+// ============================================================
+
+(function initDarkMode() {
+  const toggle = document.getElementById("theme-toggle");
+
+  if (!toggle) return;
+
+  // Load saved theme
+  const savedTheme = localStorage.getItem("theme");
+
+  if (savedTheme === "dark") {
+    document.documentElement.setAttribute("data-theme", "dark");
+    toggle.textContent = "☀️";
+  }
+
+  toggle.addEventListener("click", function () {
+    const isDark =
+      document.documentElement.getAttribute("data-theme") === "dark";
+
+    if (isDark) {
+      document.documentElement.removeAttribute("data-theme");
+      localStorage.setItem("theme", "light");
+      toggle.textContent = "🌙";
+    } else {
+      document.documentElement.setAttribute("data-theme", "dark");
+      localStorage.setItem("theme", "dark");
+      toggle.textContent = "☀️";
+    }
+  });
+})();
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index b399ee5f..26457f7b 100644
--- a/static/style.css
+++ b/static/style.css
@@ -77,6 +77,27 @@
   --entry-delay-step: 110ms;
 }
 
+[data-theme="dark"] {
+  --white: #0b1120;
+  --gray-50: #111827;
+  --gray-100: #1f2937;
+  --gray-200: #374151;
+  --gray-300: #4b5563;
+  --gray-400: #9ca3af;
+  --gray-500: #d1d5db;
+  --gray-600: #e5e7eb;
+  --gray-700: #f3f4f6;
+  --gray-900: #ffffff;
+
+  --text-heading: #ffffff;
+  --text-body: #d1d5db;
+  --border: #374151;
+
+  background: #0b1120;
+  color: #f9fafb;
+}.feature-card--pink
+
+
 /* ---- Reset ------------------------------------------------- */
 *,
 *::before,
@@ -137,6 +158,13 @@ ol {
   margin-bottom: 16px;
 }
 
+/* Dark mode section eyebrow */
+[data-theme="dark"] .section-eyebrow {
+  background: #1f2937;
+  color: #f9fafb;
+  border: 1px solid #374151;
+}
+
 .section-title {
   font-family: var(--font-display);
   font-size: clamp(1.75rem, 3.5vw, 2.5rem);
@@ -437,6 +465,26 @@ html[data-entry-anim="true"] .form-card form > .btn-submit { animation-delay: 39
   text-decoration: none;
 }
 
+/* Dark mode toggle button */
+.theme-toggle {
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  border: 1px solid rgba(255,255,255,0.15);
+  background: rgba(255,255,255,0.08);
+  color: white;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: all 0.25s ease;
+}
+
+.theme-toggle:hover {
+  background: rgba(255,255,255,0.18);
+  transform: translateY(-2px);
+}
+
+
+
 /* Mobile hamburger */
 .nav-mobile-toggle {
   display: none;
@@ -650,6 +698,16 @@ html[data-entry-anim="true"] .form-card form > .btn-submit { animation-delay: 39
   text-decoration: none;
 }
 
+[data-theme="dark"] .btn-hero-primary {
+  background: #fbbf24;
+  color: #111827;
+  box-shadow: none;
+}
+
+[data-theme="dark"] .btn-hero-primary:hover {
+  background: #f59e0b;
+}
+
 .btn-hero-ghost {
   display: inline-flex;
   align-items: center;
@@ -690,6 +748,12 @@ html[data-entry-anim="true"] .form-card form > .btn-submit { animation-delay: 39
   box-shadow: var(--shadow-lg);
 }
 
+/* Dark mode hero visual cards */
+[data-theme="dark"] .hero-visual-card {
+  background: #111827;
+  border: 1px solid #374151;
+}
+
 .hvc-icon {
   width: 40px;
   height: 40px;
@@ -710,6 +774,11 @@ html[data-entry-anim="true"] .form-card form > .btn-submit { animation-delay: 39
   color: var(--green-500);
 }
 
+[data-theme="dark"] .hvc-icon {
+  background: #1f2937;
+  border: 1px solid #374151;
+}
+
 .hvc-text {
   display: flex;
   flex-direction: column;
@@ -723,11 +792,19 @@ html[data-entry-anim="true"] .form-card form > .btn-submit { animation-delay: 39
   color: var(--gray-900);
 }
 
+[data-theme="dark"] .hvc-title {
+  color: #f9fafb;
+}
+
 .hvc-sub {
   font-size: 0.77rem;
   color: var(--gray-500);
 }
 
+[data-theme="dark"] .hvc-sub {
+  color: #d1d5db;
+}
+
 /* Code preview card */
 .hero-visual-main {
   background: #0d1117;
@@ -973,6 +1050,17 @@ html[data-entry-anim="true"] .form-card form > .btn-submit { animation-delay: 39
   padding: 18px 32px;
 }
 
+[data-theme="dark"] .skill-strip {
+  background:
+    radial-gradient(circle at top left,
+      rgba(79, 70, 229, 0.08),
+      transparent 35%),
+    radial-gradient(circle at bottom right,
+      rgba(99, 102, 241, 0.06),
+      transparent 30%),
+    #020617;
+}
+
 .skill-strip-inner {
   max-width: 1140px;
   margin: 0 auto;
@@ -988,6 +1076,13 @@ html[data-entry-anim="true"] .form-card form > .btn-submit { animation-delay: 39
   -webkit-backdrop-filter: blur(10px);
 }
 
+/* Dark mode skill strip */
+[data-theme="dark"] .skill-strip-inner {
+  background: #111827;
+  border: 1px solid #374151;
+  box-shadow: none;
+}
+
 .skill-strip-label {
   font-size: 0.8rem;
   font-weight: 600;
@@ -1015,6 +1110,20 @@ html[data-entry-anim="true"] .form-card form > .btn-submit { animation-delay: 39
   border-radius: 24px;
 }
 
+/* Dark mode tech stack pills */
+[data-theme="dark"] .ss-item {
+  background: rgba(31, 41, 55, 0.9);
+  color: #f9fafb;
+  border: 1px solid rgba(75, 85, 99, 0.4);
+}
+
+
+.ss-item:hover {
+  transform: translateY(-1px);
+  color: var(--indigo-700);
+  background: var(--white);
+  border-color: rgba(79, 110, 247, 0.28);
+  box-shadow: 0 8px 20px rgba(15, 21, 96, 0.08);
 .ss-item-green {
   font-size: 0.88rem;
   font-weight: 600;
@@ -1035,6 +1144,13 @@ html[data-entry-anim="true"] .form-card form > .btn-submit { animation-delay: 39
   border-radius: 24px;
 }
 
+[data-theme="dark"] .ss-sep {
+  color: #818cf8;
+}
+
+@keyframes skill-strip-marquee {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
 .ss-item-pink {
   font-size: 0.88rem;
   font-weight: 600;
@@ -1055,12 +1171,23 @@ html[data-entry-anim="true"] .form-card form > .btn-submit { animation-delay: 39
     animation-duration: 36s;
   }
 
+  .skill-strip-marquee {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  overflow: hidden;
   .ss-item-pink {
     font-size: 0.8rem;
     padding: 5px 12px;
   }
 }
 
+.skill-strip-marquee > * {
+  flex-shrink: 0;
+}
+
 @media (max-width: 768px) {
   .skill-strip {
     padding: 14px 16px;
@@ -1189,6 +1316,14 @@ html[data-entry-anim="true"] .form-card form > .btn-submit { animation-delay: 39
   background: var(--purple-100);
 }
 
+/* Dark mode feature cards */
+[data-theme="dark"] .feature-card.feature-card--pink,
+[data-theme="dark"] .feature-card.feature-card--yellow,
+[data-theme="dark"] .feature-card.feature-card--purple {
+  background: #111827;
+  border: 1px solid #374151;
+}
+
 .feature-card-icon {
   width: 52px;
   height: 52px;
@@ -1199,6 +1334,17 @@ html[data-entry-anim="true"] .form-card form > .btn-submit { animation-delay: 39
   justify-content: center;
   margin-bottom: 22px;
   box-shadow: var(--shadow-xs);
+  
+}
+
+/* Dark mode feature icons */
+[data-theme="dark"] .feature-card-icon {
+  background: #1f2937;
+  border: 1px solid #374151;
+}
+
+[data-theme="dark"] .feature-card-icon svg {
+  stroke: #f9fafb;
 }
 
 .feature-card--pink .feature-card-icon {
@@ -1240,6 +1386,19 @@ html[data-entry-anim="true"] .form-card form > .btn-submit { animation-delay: 39
   padding: 7px 16px;
   border-radius: var(--r-full);
   transition: background var(--t), border-color var(--t);
+  
+}
+
+/* Dark mode feature buttons */
+[data-theme="dark"] .feature-card-link {
+  background: #1f2937;
+  color: #f9fafb;
+  border: 1px solid #374151;
+}
+
+[data-theme="dark"] .feature-card-link:hover {
+  background: #374151;
+  color: white;
 }
 
 .feature-card-link:hover {
@@ -1445,6 +1604,14 @@ label {
   transition: background var(--t), border-color var(--t), color var(--t);
 }
 
+[data-theme="dark"] .skill-pill,
+[data-theme="dark"] .skill-chip,
+[data-theme="dark"] .tech-pill {
+  background: #1f2937;
+  color: #f9fafb;
+  border: 1px solid #374151;
+}
+
 .skill-chip:hover,
 .skill-chip.active {
   background: var(--indigo-700);
@@ -1548,6 +1715,17 @@ select:focus {
   box-shadow: none;
 }
 
+/* Dark mode clear button */
+[data-theme="dark"] .btn-clear {
+  background: #1f2937;
+  color: #f9fafb;
+  border: 1px solid #374151;
+}
+
+[data-theme="dark"] .btn-clear:hover {
+  background: #374151;
+}
+
 /* ---- Results Section -------------------------------------- */
 .results-section {
   padding: 80px 0 108px;
@@ -2726,6 +2904,17 @@ select:focus {
     border-color: rgba(79, 110, 247, 0.2);
 }
 
+/* Dark mode GitHub import button */
+[data-theme="dark"] #btn-show-github {
+  background: #1f2937 !important;
+  color: #f9fafb !important;
+  border: 1px solid #374151 !important;
+}
+
+[data-theme="dark"] #btn-show-github:hover {
+  background: #374151 !important;
+}
+
 #github-modal-overlay.active {
     display: flex !important; /* Overrides the 'none' display */
     backdrop-filter: blur(4px);
@@ -2983,4 +3172,18 @@ select:focus {
   flex: 1;
   white-space: pre;
   color: #e6edf3;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index e90b7946..f6e959ed 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -28,7 +28,10 @@
         <a href="#features" class="nav-link">Features</a>
         <a href="#find-project" class="nav-link">Find Project</a>
         <a href="https://github.com/komalharshita/DevPath" target="_blank" rel="noopener noreferrer" class="nav-btn-outline">GitHub</a>
-      </div>
+      <button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode" aria-pressed="false">
+        🌙
+      </button>
+    </div>
       <!-- Mobile hamburger toggle -->
       <button class="nav-mobile-toggle" id="nav-mobile-toggle" aria-label="Toggle navigation">
         <span></span><span></span><span></span>
@@ -198,6 +201,10 @@ <h1 class="hero-heading">
 <div class="skill-strip">
   <div class="skill-strip-inner">
     <span class="skill-strip-label">Supports skills including:</span>
+    <div class="skill-strip-marquee" aria-label="Supported skills">
+        <div class="skill-strip-items">
+          <span class="ss-item">Python</span>
+          <span class="ss-sep"></span>
     <div class="skill-strip-items">
       <span class="ss-item-indigo">Python</span>