diff --git a/public/css/main.css b/public/css/main.css
index fa29670..70805f2 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1,90 +1,126 @@
-:root{
-    --background-color : #EDC7B7;
-    --bs-primary-rgb: #AC3B61;
+:root {
+ /* Light Theme Defaults */
+  --bg-color: #ffffff;
+  --text-color: #111111;
+  --card-bg: #f8f9fa;
+  --header-bg: #ffffff;
+  --nav-link-color: #000000;
+
+
+}
+
+/* 🌙 Dark Mode overrides via class on body */
+body.dark-mode {
+  
+  --bg-color: #121212;
+  --text-color: #e0e0e0;
+  --card-bg: #1f1f1f;
+  --header-bg: #1a1a1a;
+  --nav-link-color: #cccccc;
+
+}
+
+/* 🔁 Apply variables */
+body {
+  background-color: var(--bg-color) !important;
+  color: var(--text-color) !important;
+  transition: background-color 0.4s ease, color 0.4s ease;
+}
+
+/* Cards, navbar, containers, forms adapt */
+.card,
+.container,
+.navbar,
+.form-control,
+textarea {
+  background-color: var(--card-bg) !important;
+  color: var(--text-color) !important;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-body{
-    font-family: 'Poppins', 'sans-serif';
-    background-color: var(--background-color);
-    color: var(--bs-primary-rgb);
-    font-weight: 300;
-    font-size: 1.2rem;
+/* Optional for links */
+.nav-link {
+  color: var(--nav-link-color) !important;
 }
 
-h1,h2,h3,h4,h5,h6{
-    font-family: 'Unbounded', cursive;
-    font-weight: 800;
+/* Headings font */
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Unbounded', cursive;
+  font-weight: 800;
 }
 
-.container-fluid-custom{
-    max-width: 1600px;
+/* Container customization */
+.container-fluid-custom {
+  max-width: 1600px;
 }
 
-.btn{
-    padding-left: 1.6rem;
-    padding-right: 1.6rem;
-    border-radius: 2rem;
+/* Buttons */
+.btn {
+  padding-left: 1.6rem;
+  padding-right: 1.6rem;
+  border-radius: 2rem;
 }
 
+/* Primary Button Styling */
 .btn-primary {
-    --bs-btn-color: #fff;
-    --bs-btn-bg: #123C69;
-    --bs-btn-border-color: #123C69;
-    --bs-btn-hover-color: #fff;
-    --bs-btn-hover-bg: #325993;
-    --bs-btn-hover-border-color: #325993;
-    --bs-btn-focus-shadow-rgb: 49, 132, 253;
-    --bs-btn-active-color: #fff;
-    --bs-btn-active-bg: #123C69;
-    --bs-btn-active-border-color: #123C69;
-    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --bs-btn-disabled-color: #fff;
-    --bs-btn-disabled-bg: #123C69;
-    --bs-btn-disabled-border-color: #123C69;
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #123C69;
+  --bs-btn-border-color: #123C69;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #325993;
+  --bs-btn-hover-border-color: #325993;
+  --bs-btn-focus-shadow-rgb: 49, 132, 253;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #123C69;
+  --bs-btn-active-border-color: #123C69;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #123C69;
+  --bs-btn-disabled-border-color: #123C69;
 }
 
+/* Outline Button Styling */
 .btn-outline-primary {
-    --bs-btn-color: #123C69;
-    --bs-btn-border-color: #123C69;
-    --bs-btn-hover-color: #fff;
-    --bs-btn-hover-bg: #325993;
-    --bs-btn-hover-border-color: #325993;
-    --bs-btn-focus-shadow-rgb: 13, 110, 253;
-    --bs-btn-active-color: #fff;
-    --bs-btn-active-bg: #123C69;
-    --bs-btn-active-border-color: #123C69;
-    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --bs-btn-disabled-color: #123C69;
-    --bs-btn-disabled-bg: transparent;
-    --bs-btn-disabled-border-color: #123C69;
-    --bs-gradient: none;
+  --bs-btn-color: #123C69;
+  --bs-btn-border-color: #123C69;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #325993;
+  --bs-btn-hover-border-color: #325993;
+  --bs-btn-focus-shadow-rgb: 13, 110, 253;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #123C69;
+  --bs-btn-active-border-color: #123C69;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #123C69;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #123C69;
+  --bs-gradient: none;
 }
 
-.pagination{
-    --bs-pagination-color: var(--bs-primary-rgb);
-    --bs-pagination-active-bg: var(--bs-primary-rgb);
-    --bs-pagination-active-border-color: var(--bs-primary-rgb);
+/* Pagination */
+.pagination {
+  --bs-pagination-color: var(--bs-primary-rgb);
+  --bs-pagination-active-bg: var(--bs-primary-rgb);
+  --bs-pagination-active-border-color: var(--bs-primary-rgb);
 }
 
-/*Home*/
-@media(min-width:1200px){
-    .home{
-        background:
-        var(--background-color);
-        ;
-    }
+/* Home section */
+@media (min-width: 1200px) {
+  .home {
+    background: var(--bg-color); /* Was hardcoded before */
+  }
 }
 
-.home-title::before{
-    content: url('../img/stars.svg');
-    position: absolute;
-    left: -50px;
-    top: -30px;
+.home-title::before {
+  content: url('../img/stars.svg');
+  position: absolute;
+  left: -50px;
+  top: -30px;
 }
 
-.home-title::after{
-    content: url('../img/stars.svg');
-    position: absolute;
-    right: -50px;
-    bottom: -30px;
-}
\ No newline at end of file
+.home-title::after {
+  content: url('../img/stars.svg');
+  position: absolute;
+  right: -50px;
+  bottom: -30px;
+}  
\ No newline at end of file
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index e60b798..33882cf 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -1,19 +1,59 @@
 <div class="container-fluid">
-    <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 ">
-      <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-primary text-decoration-none fw-bold fs-2">
-        NotesApp
-      </a>
-
-      <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
-        <li><a href="/" class="nav-link px-2 link-secondary">Home</a></li>
-        <li><a href="#" class="nav-link px-2 link-dark">Features</a></li>
-        <li><a href="#" class="nav-link px-2 link-dark">FAQs</a></li>
-        <li><a href="/about" class="nav-link px-2 link-dark">About</a></li>
-      </ul>
-
-      <div class="col-md-3 text-end">
-        <a href="/auth/google" type="button" class="btn btn-outline-primary me-2">Login</a>
-        <a href="/auth/google" type="button" class="btn btn-primary">Sign-up</a>
-      </div>
-    </header>
-  </div>
\ No newline at end of file
+  <header class="d-flex flex-wrap align-items-center justify-content-between py-3 mb-4">
+    <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-primary text-decoration-none fw-bold fs-2">
+      NotesApp
+    </a>
+
+    <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
+      <li><a href="/" class="nav-link px-2 link-secondary">Home</a></li>
+      <li><a href="#" class="nav-link px-2 link-dark">Features</a></li>
+      <li><a href="#" class="nav-link px-2 link-dark">FAQs</a></li>
+      <li><a href="/about" class="nav-link px-2 link-dark">About</a></li>
+    </ul>
+
+    <div class="col-md-3 d-flex justify-content-end align-items-center gap-2">
+
+      <a href="/auth/google" class="btn btn-outline-primary">Login</a>
+      <a href="/auth/google" class="btn btn-primary">Sign-up</a>
+     
+      <!-- 🌙 Dark Mode Toggle Button with Tooltip -->
+      <button id="darkModeToggle" class="btn btn-outline-secondary" title="Enable Dark Mode" style="font-size: 1.1rem;">
+        🌙
+      </button>
+     </div>
+  </header>
+</div>
+
+<script>
+  const toggleBtn = document.getElementById('darkModeToggle');
+  const savedTheme = localStorage.getItem('theme');
+
+  const enableDark = () => {
+    document.body.classList.add('dark-mode');
+    toggleBtn.textContent = '🌙';
+    toggleBtn.title = 'Disable Dark Mode';
+    localStorage.setItem('theme', 'dark');
+  };
+
+  const disableDark = () => {
+    document.body.classList.remove('dark-mode');
+   
+     toggleBtn.textContent = '🌞';
+    toggleBtn.title = 'Enable Dark Mode';
+    localStorage.setItem('theme', 'light');
+  };
+
+  if (savedTheme === 'dark') {
+    enableDark();
+  } else {
+    disableDark();
+  }
+
+  toggleBtn.addEventListener('click', () => {
+    if (document.body.classList.contains('dark-mode')) {
+      disableDark();
+    } else {
+      enableDark();
+    }
+  });
+</script>