diff --git a/index.html b/index.html
index fc49ab1..dcec23e 100644
--- a/index.html
+++ b/index.html
@@ -44,6 +44,10 @@
             <li><a href="./pages/about.html">About</a></li>
             <li><a href="./pages/contact.html">Contact</a></li>
             <li><a href="./pages/badges.html">Badges</a></li>
+            <button id="theme-toggle" class="theme-toggle">
+  Toggle Dark Mode
+</button>
+
           </ul>
         </nav>
       </div>
diff --git a/js/typing.js b/js/typing.js
index 3d98d66..40bc871 100644
--- a/js/typing.js
+++ b/js/typing.js
@@ -1,3 +1,21 @@
+const toggleButton = document.getElementById('theme-toggle');
+const currentTheme = localStorage.getItem('theme');
+
+// Apply saved theme on page load
+if (currentTheme) {
+  document.body.classList.add(currentTheme);
+}
+
+// Toggle theme on button click
+toggleButton.addEventListener('click', () => {
+  document.body.classList.toggle('dark-mode');
+  
+  // Save the user's theme preference in localStorage
+  const theme = document.body.classList.contains('dark-mode') ? 'dark-mode' : 'light-mode';
+  localStorage.setItem('theme', theme);
+});
+
+
 const badgeTitle = document.getElementById('typingeffect');
 const badgeTitleText = badgeTitle.innerText; 
 badgeTitle.innerText = '';  
diff --git a/style.js b/style.js
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/style.js
@@ -0,0 +1 @@
+
diff --git a/styles.css b/styles.css
index 5179299..ea2a1cd 100644
--- a/styles.css
+++ b/styles.css
@@ -7,6 +7,35 @@
   color: #fff;
 }
 
+/* Light mode (default) */
+:root {
+  --bg-color: #ffffff;
+  --text-color: #000000;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  transition: background-color 0.3s, color 0.3s;
+}
+
+/* Dark mode */
+body.dark-mode {
+  --bg-color: #121212;
+  --text-color: #f0f0f0;
+}
+
+/* Optional: Customize other elements */
+.header {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}
+
+.footer {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}
+
 /* Base Styles */
 body {
   font-family: "Poppins", sans-serif;
@@ -584,4 +613,4 @@ footer a {
   }
   
 
-}
\ No newline at end of file
+}