diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
index cee1e2c..53560fd 100644
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -23,7 +23,7 @@ export default defineConfig([
       },
     },
     rules: {
-      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]', argsIgnorePattern: '^[A-Z_]' }],
     },
   },
 ])
diff --git a/frontend/src/components/AppLayout.jsx b/frontend/src/components/AppLayout.jsx
index 44bf849..3261529 100644
--- a/frontend/src/components/AppLayout.jsx
+++ b/frontend/src/components/AppLayout.jsx
@@ -22,8 +22,10 @@ const AppLayout = ({ children }) => {
       <Sidebar />
 
       {/* Main content on the right, shifts when sidebar expands */}
-      <main className="transition-all duration-300 ease-out ml-16 peer-hover:ml-64 pt-14">
-        <div className="p-4 sm:p-6 md:p-8">
+      <main className={`transition-all duration-300 ease-out ml-16 peer-hover:ml-64 pt-14 ${
+        mode === 'dark' ? 'bg-[#121212]' : 'bg-gray-50'
+      }`}>
+        <div className="p-4 sm:p-6 md:p-8 min-h-[calc(100vh-56px)]">
           {children}
         </div>
       </main>
diff --git a/frontend/src/components/HeaderBar.jsx b/frontend/src/components/HeaderBar.jsx
index cd9ea0f..7133fc6 100644
--- a/frontend/src/components/HeaderBar.jsx
+++ b/frontend/src/components/HeaderBar.jsx
@@ -1,22 +1,36 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import { Settings, User } from 'lucide-react';
+import { Settings, User, Sun, Moon } from 'lucide-react';
 import { useAuth } from '../contexts/AuthContext';
+import { useColorMode } from '../contexts/ThemeContext';
 import logo from '../assets/logo.png';
 
 const HeaderBar = () => {
   const { isAuthenticated, user } = useAuth();
+  const { mode, toggleMode } = useColorMode();
+  const isDark = mode === 'dark';
+
   return (
-    <header className="fixed top-0 left-0 right-0 z-50 h-14 bg-[#1e1e1e] border-b border-white/10">
+    <header
+      className={`fixed top-0 left-0 right-0 z-50 h-14 border-b transition-colors duration-200 ${
+        isDark
+          ? 'bg-[#1e1e1e] border-white/10'
+          : 'bg-white border-gray-200 shadow-sm'
+      }`}
+    >
       <div className="mx-auto h-full px-4 sm:px-6 flex items-center justify-between">
         <div className="flex items-center gap-3 min-w-0">
           <img src={logo} alt="YBIT" className="h-9 w-9 rounded-sm object-contain" />
-          <h1 className="text-sm sm:text-base md:text-lg font-semibold text-white truncate">
+          <h1
+            className={`text-sm sm:text-base md:text-lg font-semibold truncate transition-colors duration-200 ${
+              isDark ? 'text-white' : 'text-gray-900'
+            }`}
+          >
             Yashwantrao Bhonsale Institute Of Technology
           </h1>
         </div>
 
-        {/* Right nav: Dashboard + Settings + Account/Login (large screens) */}
+        {/* Right nav: Dashboard + Settings + Theme toggle + Account/Login (large screens) */}
         <nav className="hidden lg:block">
           <ul className="flex items-center gap-2 text-sm">
             <li>
@@ -24,7 +38,11 @@ const HeaderBar = () => {
                 to="/"
                 className={({ isActive }) =>
                   `px-3 py-1.5 rounded-md transition-colors ${
-                    isActive ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-white/10 hover:text-white'
+                    isActive
+                      ? 'bg-green-600 text-white'
+                      : isDark
+                        ? 'text-gray-300 hover:bg-white/10 hover:text-white'
+                        : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
                   }`
                 }
               >
@@ -36,7 +54,11 @@ const HeaderBar = () => {
                 to="/settings"
                 className={({ isActive }) =>
                   `flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors ${
-                    isActive ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-white/10 hover:text-white'
+                    isActive
+                      ? 'bg-green-600 text-white'
+                      : isDark
+                        ? 'text-gray-300 hover:bg-white/10 hover:text-white'
+                        : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
                   }`
                 }
               >
@@ -44,13 +66,33 @@ const HeaderBar = () => {
                 <span>Settings</span>
               </NavLink>
             </li>
+            <li>
+              <button
+                type="button"
+                onClick={toggleMode}
+                className={`flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors ${
+                  isDark
+                    ? 'text-gray-300 hover:bg-white/10 hover:text-white'
+                    : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+                }`}
+                aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+                title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+              >
+                {isDark ? <Sun size={16} /> : <Moon size={16} />}
+                <span>{isDark ? 'Light Mode' : 'Dark Mode'}</span>
+              </button>
+            </li>
             {isAuthenticated ? (
               <li>
                 <NavLink
                   to="/account"
                   className={({ isActive }) =>
                     `flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors ${
-                      isActive ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-white/10 hover:text-white'
+                      isActive
+                        ? 'bg-green-600 text-white'
+                        : isDark
+                          ? 'text-gray-300 hover:bg-white/10 hover:text-white'
+                          : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
                     }`
                   }
                   title={user?.username || 'Account'}
@@ -65,7 +107,11 @@ const HeaderBar = () => {
                   to="/login"
                   className={({ isActive }) =>
                     `px-3 py-1.5 rounded-md transition-colors ${
-                      isActive ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-white/10 hover:text-white'
+                      isActive
+                        ? 'bg-green-600 text-white'
+                        : isDark
+                          ? 'text-gray-300 hover:bg-white/10 hover:text-white'
+                          : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
                     }`
                   }
                 >
diff --git a/frontend/src/components/Sidebar.jsx b/frontend/src/components/Sidebar.jsx
index b232028..2f69185 100644
--- a/frontend/src/components/Sidebar.jsx
+++ b/frontend/src/components/Sidebar.jsx
@@ -27,7 +27,9 @@ const Sidebar = () => {
 
   return (
     <aside
-      className="peer group fixed left-0 top-14 z-40 h-[calc(100vh-56px)] w-16 hover:w-64 bg-[#1e1e1e] text-gray-200 border-r border-white/10 transition-all duration-300 ease-out"
+      className={`peer group fixed left-0 top-14 z-40 h-[calc(100vh-56px)] w-16 hover:w-64 border-r border-white/10 transition-all duration-300 ease-out ${
+        mode === 'dark' ? 'bg-[#1e1e1e] text-gray-200' : 'bg-white text-gray-800 border-gray-200'
+      }`}
       aria-label="Sidebar"
     >
       <div className="flex h-full flex-col">
@@ -37,7 +39,7 @@ const Sidebar = () => {
         {/* Middle: Navigation */}
         <nav className="mt-2 flex-1 overflow-y-auto">
           <ul className="space-y-1 px-2">
-            {menuItems.map(({ name, icon: Icon, path }) => {
+            {menuItems.map(({ name, icon: IconComponent, path }) => {
               const active = location.pathname === path || (path !== '/' && location.pathname.startsWith(path));
               return (
                 <li key={name}>
@@ -46,10 +48,12 @@ const Sidebar = () => {
                     className={`flex items-center gap-3 rounded-md px-3 py-2 transition-colors duration-200 ${
                       active
                         ? 'bg-green-600 text-white'
-                        : 'text-gray-300 hover:bg-white/10 hover:text-white'
+                        : mode === 'dark'
+                          ? 'text-gray-300 hover:bg-white/10 hover:text-white'
+                          : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
                     }`}
                   >
-                    <Icon size={20} className="shrink-0" />
+                    <IconComponent size={20} className="shrink-0" />
                     <span
                       className="opacity-0 translate-x-[-6px] group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 ease-out"
                     >
@@ -66,7 +70,11 @@ const Sidebar = () => {
         <div className="mt-auto px-2 pb-3">
           <button
             onClick={toggleMode}
-            className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-gray-300 hover:bg-white/10 hover:text-white transition-colors duration-200"
+            className={`flex w-full items-center gap-3 rounded-md px-3 py-2 text-left transition-colors duration-200 ${
+              mode === 'dark'
+                ? 'text-gray-300 hover:bg-white/10 hover:text-white'
+                : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
+            }`}
             title="Toggle theme"
           >
             {mode === 'dark' ? (