diff --git a/index.html b/index.html
index 4e0c5a6d..bc89778d 100644
--- a/index.html
+++ b/index.html
@@ -378,9 +378,55 @@
                     <li class="nav-item">
                     <a class="nav-link" href="#" style="font-family: var(--ff-philosopher); color: black;">More</a>
                     </li>
-
+                    <li class="nav-item">
+                        <a class="nav-link" id="themeToggle" style="font-family: var(--ff-philosopher); color: black;">Toggle Theme</a>
+                    </li>
                 </ul>
-
+                <style>
+                    body {
+                        transition: background-color 0.3s, color 0.3s; /* Smooth transition */
+                        background-color: white;
+                    }
+            
+                    .dark-mode {
+                        background-color: #121212; /* Dark background */
+                        color: white; /* Light text color */
+                    }
+            
+                    .navbar {
+                        transition: background-color 0.3s; /* Smooth transition */
+                        background-color: #f8f9fa;
+                    }
+            
+                    .navbar.dark-mode {
+                        background-color: #333; /* Dark navbar background */
+                    }
+            
+                    .navbar .nav-link {
+                        color: black; /* Light navbar text color */
+                    }
+            
+                    .navbar.dark-mode .nav-link {
+                        color: white; /* Dark navbar text color */
+                    }
+            
+                    #themeToggle {
+                        cursor: pointer;
+                    }
+                </style>
+                <script>
+                    // JavaScript to toggle between light and dark themes
+                    const themeToggle = document.getElementById('themeToggle');
+                    const body = document.body;
+                    const navbar = document.querySelector('.navbar');
+            
+                    themeToggle.addEventListener('click', () => {
+                        body.classList.toggle('dark-mode');
+                        navbar.classList.toggle('dark-mode');
+                        const isDark = body.classList.contains('dark-mode');
+                        themeToggle.textContent = isDark ? 'Light Mode' : 'Dark Mode';
+                    });
+                </script>
                 <div class="navbar-right">
                     <ul class="navbar-nav">
                         <li class="nav-item">
diff --git a/style.css b/style.css
index eb7d5eb1..6cd5b710 100644
--- a/style.css
+++ b/style.css
@@ -12,6 +12,9 @@
 
 body {
   background-color: black;
+  transition: background-color 0.3s, color 0.3s; /* Smooth transition */
+  background-color: white; /* Default light background */
+  color: black; /* Default light text color */
 }
 /*
 .navbar {