diff --git a/header.css b/header.css
new file mode 100644
index 00000000..d11f0be2
--- /dev/null
+++ b/header.css
@@ -0,0 +1,417 @@
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+  background-color: var(--bg-primary);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  padding: 1.5rem 0;
+}
+
+.navbar.scrolled {
+  background-color: rgba(255, 255, 255, 0.98);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  padding: 0;
+}
+
+[data-theme='dark'] .navbar.scrolled {
+  background-color: rgba(10, 10, 10, 0.98);
+}
+
+.navbar-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 2rem;
+  max-width: 1440px;
+  margin: 0 auto;
+}
+
+/* Logo */
+.navbar-logo {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  text-transform: uppercase;
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--primary-400) !important;
+  text-decoration: none;
+}
+
+.navbar-logo:hover {
+  color: var(--primary-400) !important;
+}
+
+.navbar-logo img {
+  height: 2.5rem;
+  width: auto;
+  transition: transform 0.3s ease;
+}
+
+/* Desktop Navigation */
+.navbar-nav {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}
+
+.nav-links {
+  display: flex;
+  gap: 2.5rem;
+  list-style: none;
+}
+
+.nav-link {
+  position: relative;
+  padding: 0.65rem 0;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: color 0.3s ease;
+  font-size: 1rem;
+}
+
+.nav-link::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 2px;
+  background-color: var(--primary-400);
+  border-radius: 3px;
+  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.nav-link:hover,
+.nav-link.active {
+  color: var(--primary-400);
+}
+
+.nav-link:hover::before,
+.nav-link.active::before {
+  width: 65%;
+}
+
+/* Auth Buttons */
+.auth-buttons {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+/* Theme Toggle */
+.navbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.theme-toggle {
+  position: relative;
+  width: 3.5rem;
+  height: 2rem;
+  border-radius: 1.75rem;
+  background-color: var(--gray-200);
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.theme-toggle:hover {
+  transform: scale(1.05);
+}
+
+[data-theme='dark'] .theme-toggle {
+  background-color: var(--gray-700);
+}
+
+.theme-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+  border-radius: 50%;
+  background-color: var(--white);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.theme-icon.sun {
+  left: 0.25rem;
+  opacity: 1;
+}
+
+.theme-icon.moon {
+  right: 0.25rem;
+  opacity: 0;
+}
+
+[data-theme='dark'] .theme-icon {
+  background-color: var(--gray-900);
+}
+
+[data-theme='dark'] .theme-icon.sun {
+  opacity: 0;
+  left: 1.75rem;
+}
+
+[data-theme='dark'] .theme-icon.moon {
+  opacity: 1;
+  right: 1.75rem;
+}
+
+.theme-toggle svg {
+  width: 0.9rem;
+  height: 0.9rem;
+  stroke: var(--gray-600);
+}
+
+[data-theme='dark'] .theme-toggle svg {
+  stroke: var(--gray-300);
+}
+
+/* Hamburger Menu*/
+.menu-toggle {
+  display: none;
+  position: relative;
+  width: 2.5rem;
+  height: 2.5rem;
+  cursor: pointer;
+  z-index: 1001;
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+.menu-toggle span {
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 3px;
+  background-color: var(--text-primary);
+  border-radius: 3px;
+  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+  transform-origin: center;
+}
+
+.menu-toggle span:nth-child(1) {
+  top: 0.5rem;
+}
+
+.menu-toggle span:nth-child(2) {
+  top: 1.1rem;
+}
+
+.menu-toggle span:nth-child(3) {
+  top: 1.7rem;
+}
+
+.menu-toggle.active span:nth-child(1) {
+  transform: translateY(0.6rem) rotate(45deg);
+  width: 100%;
+}
+
+.menu-toggle.active span:nth-child(2) {
+  opacity: 0;
+  transform: scaleX(0);
+}
+
+.menu-toggle.active span:nth-child(3) {
+  transform: translateY(-0.6rem) rotate(-45deg);
+  width: 100%;
+}
+
+.menu-toggle:hover span:nth-child(1) {
+  transform: translateY(-0.1rem);
+}
+
+.menu-toggle:hover span:nth-child(3) {
+  transform: translateY(0.1rem);
+}
+
+.menu-toggle.active:hover span {
+  transform: none;
+}
+
+/* Mobile Menu */
+.mobile-nav {
+  position: fixed;
+  top: 0;
+  right: -100%;
+  width: 85%;
+  max-width: 380px;
+  height: 100vh;
+  background-color: var(--bg-primary);
+  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  transition: right 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+  padding: 6rem 2rem 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  overflow-y: auto;
+}
+
+.mobile-nav.active {
+  right: 0;
+}
+
+.mobile-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.mobile-theme-toggle {
+  width: 3.5rem !important;
+  height: 2rem !important;
+  flex-shrink: 0;
+  padding: 0.25rem !important;
+  background-color: var(--gray-200) !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.mobile-theme-toggle .theme-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+/* Mobile Nav Links */
+.mobile-nav-links {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+}
+
+.mobile-nav-link {
+  font-size: 1.4rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  text-decoration: none;
+  transition: all 0.3s ease;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.mobile-nav-link::before {
+  content: '';
+  width: 0.5rem;
+  height: 0.5rem;
+  background-color: var(--primary-500);
+  border-radius: 50%;
+  transition: all 0.3s ease;
+  opacity: 0;
+}
+
+.mobile-nav-link:hover,
+.mobile-nav-link.active {
+  background-color: var(--bg-secondary);
+  color: var(--primary-500);
+  padding-left: 1.5rem;
+}
+
+.mobile-nav-link:hover::before,
+.mobile-nav-link.active::before {
+  opacity: 1;
+  margin-right: 0.5rem;
+}
+
+/* Mobile Auth Buttons */
+.mobile-auth-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 2rem; /* Visible near top, not bottom */
+}
+
+/* Overlay */
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.5) 30%,
+    rgba(0, 0, 0, 0.7) 100%
+  );
+  z-index: 999;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.4s ease;
+  backdrop-filter: blur(2px);
+}
+
+.overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Responsive Design */
+@media (max-width: 992px) {
+  .navbar-nav,
+  .auth-buttons {
+    display: none;
+  }
+
+  .menu-toggle {
+    display: flex;
+  }
+
+  .navbar-container {
+    padding: 0 1.5rem;
+  }
+}
+
+@media (min-width: 993px) {
+  .mobile-nav,
+  .overlay {
+    display: none !important;
+  }
+}
+
+/* Mobile adjustments */
+@media (max-width: 480px) {
+  .mobile-nav {
+    width: 90%;
+    padding: 5rem 1.5rem 2rem;
+  }
+
+  .mobile-nav-link {
+    font-size: 1.1rem;
+  }
+
+  .navbar-logo {
+    font-size: 1.3rem;
+  }
+
+  .navbar-logo img {
+    height: 2rem;
+  }
+
+  /* Hide desktop actions */
+  .navbar-actions {
+    display: none;
+  }
+}
diff --git a/header.html b/header.html
new file mode 100644
index 00000000..d42587dc
--- /dev/null
+++ b/header.html
@@ -0,0 +1,211 @@
+<!-- Header (HTML) -->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="NotesVault - Organize your academic notes and PYQs semester-wise"
+    />
+    <title>NotesVault - Header</title>
+
+    <!-- Favicon -->
+    <link rel="icon" href="assets/index/images/favicon.png" />
+    
+    <!-- Font Awesome -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
+    />
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="../styling/variables.css" />
+    <link rel="stylesheet" href="../styling/base.css" />
+    <link rel="stylesheet" href="../styling/header.css" />
+
+  </head>
+
+  <body>
+    <header class="navbar">
+      <div class="navbar-container">
+        <a href="/index.html" class="navbar-logo">
+          <img src="#" alt="" />
+          <span>NotesVault</span>
+        </a>
+
+        <nav class="navbar-nav">
+          <ul class="nav-links">
+            <li><a href="index.html" class="nav-link">Home</a></li>
+            <li>
+              <a href="overview.html" class="nav-link">Overview</a>
+            </li>
+            <li>
+              <a href="dashboard.html" class="nav-link">Dashboard</a>
+            </li>
+            <li>
+              <a href="features.html" class="nav-link">Features</a>
+            </li>
+            <li><a href="about.html" class="nav-link">About</a></li>
+          </ul>
+        </nav>
+
+        <div class="navbar-actions">
+          <!-- Theme Toggle Button -->
+          <button class="theme-toggle" aria-label="Toggle dark mode">
+            <span class="theme-icon sun">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <circle cx="12" cy="12" r="5"></circle>
+                <line x1="12" y1="1" x2="12" y2="3"></line>
+                <line x1="12" y1="21" x2="12" y2="23"></line>
+                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                <line x1="1" y1="12" x2="3" y2="12"></line>
+                <line x1="21" y1="12" x2="23" y2="12"></line>
+                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+              </svg>
+            </span>
+            <span class="theme-icon moon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path
+                  d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
+                ></path>
+              </svg>
+            </span>
+          </button>
+
+          <div class="auth-buttons">
+            <button
+              onclick="location.href='login.html'"
+              class="btn btn-secondary"
+            >
+              Login
+            </button>
+            <button
+              onclick="location.href='signup.html'"
+              class="btn btn-primary"
+            >
+              Sign Up
+            </button>
+          </div>
+        </div>
+
+        <button class="menu-toggle" aria-label="Menu">
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
+      </div>
+
+      <!-- Mobile Menu -->
+      <nav class="mobile-nav">
+        <div class="mobile-actions">
+          <!-- Mobile Theme Toggle -->
+          <button
+            class="theme-toggle mobile-theme-toggle"
+            aria-label="Toggle dark mode"
+          >
+            <span class="theme-icon sun">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <circle cx="12" cy="12" r="5"></circle>
+                <line x1="12" y1="1" x2="12" y2="3"></line>
+                <line x1="12" y1="21" x2="12" y2="23"></line>
+                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                <line x1="1" y1="12" x2="3" y2="12"></line>
+                <line x1="21" y1="12" x2="23" y2="12"></line>
+                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+              </svg>
+            </span>
+            <span class="theme-icon moon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path
+                  d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
+                ></path>
+              </svg>
+            </span>
+          </button>
+          </div>
+        <ul class="mobile-nav-links">
+          <li>
+            <a href="index.html" class="mobile-nav-link">Home</a>
+          </li>
+          <li>
+            <a href="overview.html" class="mobile-nav-link"
+              >Overview</a
+            >
+          </li>
+          <li>
+            <a href="dashboard.html" class="mobile-nav-link"
+              >Dashboard</a
+            >
+          </li>
+          <li>
+            <a href="features.html" class="mobile-nav-link"
+              >Features</a
+            >
+          </li>
+          <li>
+            <a href="about.html" class="mobile-nav-link">About</a>
+          </li>
+        </ul>
+
+        
+
+          <div class="mobile-auth-buttons">
+  <a href="login.html" class="btn btn-secondary">Login</a>
+  <a href="signup.html" class="btn btn-primary">Sign Up</a>
+</div>
+
+      </nav>
+
+      <div class="overlay"></div>
+    </header>
+
+    <!-- JavaScript -->
+    <script src="../scripts/script.js" defer></script>
+  </body>
+</html>