diff --git a/Website/index.html b/Website/index.html
index 1d42b0438..70d5d2200 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -26,6 +26,11 @@
                         <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" width="25" height="25"> <!-- GitHub Icon -->
                     </a>
                 </li>
+                <li>
+                    <button id="toggle-dark-mode">
+                        <i class="fas fa-moon"></i> 
+                    </button>
+                </li>
             </ul>
         </nav>
     </header>
diff --git a/Website/js/script.js b/Website/js/script.js
index b0b3ca03a..98380ae75 100644
--- a/Website/js/script.js
+++ b/Website/js/script.js
@@ -241,3 +241,13 @@ document.addEventListener("DOMContentLoaded", function() {
     }
 });
 
+const toggleDarkModeButton = document.getElementById('toggle-dark-mode');
+const body = document.body;
+
+toggleDarkModeButton.addEventListener('click', () => {
+    body.classList.toggle('dark-mode');
+    // Change icon based on dark mode status
+    const icon = toggleDarkModeButton.querySelector('i');
+    icon.classList.toggle('fa-moon');
+    icon.classList.toggle('fa-sun');
+});
diff --git a/Website/styles.css b/Website/styles.css
index ea9e93a46..1a02b0fab 100644
--- a/Website/styles.css
+++ b/Website/styles.css
@@ -602,3 +602,72 @@ button#toggle-languages:hover {
     opacity: 0.9;
 }
 
+/* Dark Mode Styles */
+body.dark-mode {
+    background-color: #121245; 
+    color: #f1f1f1; 
+}
+
+.dark-mode .navbar {
+    background-color: #000; 
+}
+
+.dark-mode .nav-links a {
+    color: #fff;
+}
+
+.dark-mode .welcome-title {
+    color: #fff; 
+}
+
+.dark-mode .highlight {
+    color: #fff; 
+}
+
+.dark-mode .stat-card {
+    background-color: #212148;
+}
+
+.dark-mode .stat-card h3 {
+    color: #fff;
+}
+
+.dark-mode .stat-card p {
+    color: rgb(255, 213, 98);
+}
+
+.dark-mode .stat-icon {
+    color: #fff;
+}
+
+.dark-mode .stat-card:hover {
+    background-color: #151537;
+}
+
+.dark-mode .stat-card:hover .stat-icon{
+    color: #fff;
+}
+
+
+#toggle-dark-mode {
+    background: none;
+    border: none;
+    color: #f1f1f1;
+    cursor: pointer;
+    font-size: 1.2em;
+    transition: color 0.3s ease;
+}
+
+.dark-mode .welcome-section a{
+    color: #cfd9e5;
+}
+
+#toggle-dark-mode i {
+    font-size: 1.5em;
+}
+
+#toggle-dark-mode:hover {
+    color: #fff;
+}
+
+