diff --git a/package.json b/package.json
index 8718817..e33361c 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,6 @@
     "@testing-library/user-event": "^13.5.0",
     "aos": "^2.3.4",
     "axios": "^1.5.1",
-    "dotenv": "^16.4.5",
     "framer-motion": "^11.1.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/src/App.js b/src/App.js
index 83bb81f..f4066a8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,3 @@
-
 import React from 'react';
 import './App.css';
 import { Route, Routes } from 'react-router-dom';
@@ -11,13 +10,11 @@ import SectionPage from './pages/SectionPage';
 import News from './pages/News';
 import NotFound from './pages/NotFound';
 import Loader from './components/Loader/Loader';
-import PrivacyPolicy from './pages/PrivacyPolicy';
-import TermsandConditions from './pages/TermsandConditions';
-import Licensing from './pages/Licensing';
+import { ThemeProvider } from './themeContext';
 
 const Layout = ({ children }) => {
   return (
-    <div className="bg-cover bg-center min-h-screen bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 bg-no-repeat " >
+    <div className="bg-cover bg-center min-h-screen bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 bg-no-repeat dark:bg-none">
       {children}
     </div>
   );
@@ -25,25 +22,23 @@ const Layout = ({ children }) => {
 
 function App() {
   return (
-    <div className=''>
-      <Routes>
-        <Route path='/' element={<Login />} />
-        <Route path='/home' element={<Layout><Home /></Layout>} />
-        <Route path='/login' element={<Login />} />
-        <Route path='/signup' element={<Signup />} />
-        <Route path='/about' element={<Layout><About /></Layout>} />
-        <Route path='/section/:_id' element={<Layout><SectionPage /></Layout>} />
-        <Route path="/menu/:_id" element={<Layout><MenuPage /></Layout>} />
-        <Route path='/news' element={<Layout><News/></Layout>}/>
-        <Route path='/privacypolicy' element={<Layout><PrivacyPolicy/></Layout>}/>
-        <Route path='/termsandconditions' element={<Layout><TermsandConditions/></Layout>}/>
-        <Route path='/licensing' element={<Layout><Licensing/></Layout>}/>
-        <Route path='/loader' element={<Layout><Loader/></Layout>}/>
-        <Route path="*" element={<Layout><NotFound /></Layout>} />
-      </Routes>
-    </div>
+    <ThemeProvider>
+      <div className=''>
+        <Routes>
+          <Route path='/' element={<Login />} />
+          <Route path='/home' element={<Layout><Home /></Layout>} />
+          <Route path='/login' element={<Login />} />
+          <Route path='/signup' element={<Signup />} />
+          <Route path='/about' element={<Layout><About /></Layout>} />
+          <Route path='/section/:_id' element={<Layout><SectionPage /></Layout>} />
+          <Route path="/menu/:_id" element={<Layout><MenuPage /></Layout>} />
+          <Route path='/news' element={<Layout><News /></Layout>} />
+          <Route path='/loader' element={<Layout><Loader /></Layout>} />
+          <Route path="*" element={<Layout><NotFound /></Layout>} />
+        </Routes>
+      </div>
+    </ThemeProvider>
   );
 }
 
 export default App;
-
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 653d4a3..45d5c69 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,36 +1,23 @@
-import React from 'react';
+import { Link } from "react-router-dom"
 
-const Footer = () => {
-  return (
-    <div className='bg-blue-950 text-white p-10'>
-        <div className='md:flex'>
-            <div className='md:w-1/2 flex mb-8 md:mb-0 items-top'>
-                <img src="https://foodies-web-app.vercel.app/static/media/logo2.db6bd5028bb56c6572c7.png" alt="" className='h-16 w-48'/>
-            </div>
-            <div className='md:w-1/2 md:flex'>
-                <div className='md:w-1/2'>
-                    <p className='text-gray-200 underline'>Company</p>
-                    <ul className='text-gray-300 py-4'>
-                        <a href="/about"><li className='py-1 cursor-pointer'>About Us</li></a>
-                        <a href="/news"><li className='py-1 cursor-pointer'>News</li></a>
-                        <li className='py-1 cursor-pointer'>Contact Us</li>
-                    </ul>
-                </div>
-                <div className='md:w-1/2'>
-                <p className='text-gray-200 underline'>Legal Pages</p>
-                    <ul className='text-gray-300 py-4 cursor-pointer'>
-                        <a href="/privacypolicy"><li className='py-1 cursor-pointer'>Privacy Policy</li></a>
-                        <a href="/termsandconditions"><li className='py-1 cursor-pointer'>Terms and Conditions</li></a>
-                        <a href="/licensing"><li className='py-1 cursor-pointer'>Licensing</li></a>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div className='mt-20 text-gray-400 xl:flex justify-center text-xs lg:text-sm xl:text-md'>
-        <span className="text-sm text-white sm:text-center ">© 2024-2025 <a href="#" className="hover:underline">Foodies™</a>. All Rights Reserved.</span>
-        </div>
-    </div>
-  )
-}
-
-export default Footer
\ No newline at end of file
+export default function Footer(){
+    return (
+        <footer className="p-4 bg-blue-950 md:p-8 lg:p-10 dark:bg-teal-700">
+  <div className="mx-auto max-w-screen-xl text-center">
+      <a href="#" className="flex justify-center items-center text-2xl font-semibold text-pink-800 ">
+          <img src="https://foodies-web-app.vercel.app/static/media/logo2.db6bd5028bb56c6572c7.png" alt="title" width={"200px"}/> 
+      </a>
+      <p className="my-6 text-white ">Discover culinary bliss with our diverse array of recipes and foodie resources – your ultimate destination for gastronomic inspiration.</p>
+      <ul className="flex flex-wrap justify-center items-center mb-6 text-gray-400 ">
+          <li className="mr-4 hover:underline md:mr-6 hover:text-orange-600">
+          <Link to="/about">About</Link>
+          </li>
+          <li className="mr-4 hover:underline md:mr-6 hover:text-orange-600">
+              <Link to="/news">News</Link>
+          </li>
+      </ul>
+      <span className="text-sm text-white sm:text-center ">© 2024-2025 <a href="#" className="hover:underline">Foodies™</a>. All Rights Reserved.</span>
+  </div>
+</footer>
+    )
+}
\ No newline at end of file
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 5b20a5b..2dd725f 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,18 +1,20 @@
-import React, { useState } from "react";
+import React, { useState,useContext } from "react";
 import { Link } from "react-router-dom";
 import logo from "../assets/logo2.png";
 import { motion, AnimatePresence,useScroll} from "framer-motion";
 import { IoClose } from "react-icons/io5";
 import { GiHamburgerMenu } from "react-icons/gi";
-
+import { MdDarkMode } from "react-icons/md";
+import { ThemeContext } from '../themeContext';
 const Navbar = () => {
+  const { theme, toggleTheme } = useContext(ThemeContext);
   const [isOpen, setIsOpen] = useState(false);
   const {scrollYProgress} = useScroll();
   const toggleMenu = () => {
     setIsOpen(!isOpen);
   };
   return (
-    <nav className="text-white p-3 font-semibold shadow-lg top-0 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 w-full fixed z-40">
+    <nav className="text-white p-3 font-semibold shadow-lg top-0 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 w-full fixed z-40 dark:bg-cadetblue dark:bg-none">
         <motion.div
              className="left-0 top-0 w-full h-1 bg-blue-500 fixed z-50"
              style={{ scaleX: scrollYProgress }}
@@ -33,16 +35,24 @@ const Navbar = () => {
               </div>
             </div>
           </div>
-          <div className="hidden md:block">
+          <div className="hidden md:flex items-center gap-5">
+          <button onClick={toggleTheme} className="p-2 rounded focus:outline-none focus:ring">
+        {theme === 'dark' ? '🌞 Light Mode' : '🌙 Dark Mode'}
+      </button>
+          <div>
             <Link to="/">
               <button
                 className="bg-green-400 hover:bg-green-600 hover:shadow-green text-white py-1 px-2 rounded w-full h-auto text-l relative z-0 rounded-lg transition-all duration-200 hover:scale-110"
-              >
+                >
                 Log out
               </button>
             </Link>
+                </div>
           </div>
           <div className="-mr-2 flex md:hidden">
+            <button onClick={toggleTheme} className="p-2 rounded focus:outline-none focus:ring">
+        {theme === 'dark' ? '🌞 Light Mode' : '🌙 Dark Mode'}
+      </button>
             <button
               onClick={toggleMenu}
               className="inline-flex items-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white"
@@ -65,7 +75,7 @@ const Navbar = () => {
             exit={{ opacity: 0, y: -50 }}
             className="md:hidden absolute left-0 w-full flex flex-col items-center justify-center"
           >
-            <div className="w-[100%] bg-[#282c34] px-[20%] pt-2 pb-3 space-y-1 mt-3">
+            <div className="w-[100%] bg-[#282c34] px-[20%] pt-2 pb-3 space-y-1 mt-3 dark:bg-teal-900">
               <MobileNavItem to="/home">Home</MobileNavItem>
               <MobileNavItem to="/about">About us</MobileNavItem>
               <MobileNavItem to="/news">News</MobileNavItem>
diff --git a/src/pages/About.jsx b/src/pages/About.jsx
index f0e18d8..f5ed6c8 100644
--- a/src/pages/About.jsx
+++ b/src/pages/About.jsx
@@ -22,12 +22,12 @@ const About = () => {
         <Loader/>
       ):
       (
-        <div className="text-white min-h-screen from-blue-950 via-blue-950 to-gray-900 bg-no-repeat w-full overflow-hidden flex flex-col justify-center mx-auto">
+        <div className=" text-white min-h-screen from-blue-950 via-blue-950 to-gray-900 bg-no-repeat w-full overflow-hidden flex flex-col justify-center mx-auto dark:bg-white">
         <Navbar />
   
         <div className="container mx-auto mt-[7rem] lg:p-2 w-full">
           <div className="mx-auto">
-            <div className="flex flex-col md:flex-row justify-between items-center md:space-x-8 bg-gray-900 py-[10%]">
+            <div className="flex flex-col md:flex-row justify-between items-center md:space-x-8 bg-gray-900 py-[10%] dark:bg-white">
               <div
                 data-aos="fade-right"
                 className="md:w-1/2 order-2 md:order-1 md:px-20 px-10 text-center md:text-start"
@@ -35,7 +35,7 @@ const About = () => {
                 <h2 className="text-2xl sm:text-2xl md:text-3xl font-bold text-green-500 mb-4">
                   Welcome to Foodies
                 </h2>
-                <p className="text-lg leading-relaxed mb-4 p-4 sm:p-0">
+                <p className="text-lg leading-relaxed mb-4 p-4 sm:p-0 dark:text-slate-900">
                   Hey there, lovely Foodies! We're the passionate minds behind the
                   scenes, and we're thrilled to tell you a little bit about who we
                   are and why we created Foodies.
@@ -53,7 +53,7 @@ const About = () => {
               </div>
             </div>
   
-            <div className="flex flex-col md:flex-row justify-between items-center md:space-x-8 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 py-[10%]">
+            <div className="flex flex-col md:flex-row justify-between items-center md:space-x-8 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 py-[10%] dark:bg-white dark:bg-none">
               <div
                 data-aos="fade-right"
                 className="md:w-1/2 order-1 md:order-1 md:px-10 md:pl-16 mt-[5rem] flex justify-center"
@@ -71,7 +71,7 @@ const About = () => {
                 <h2 className="text-2xl md:text-3xl font-bold text-green-500 mb-4">
                   Our Journey
                 </h2>
-                <p className="text-lg leading-relaxed mb-4 p-4 sm:p-0">
+                <p className="text-lg leading-relaxed mb-4 p-4 sm:p-0 dark:text-slate-900">
                   Picture a bustling college campus, students on the move, and the
                   delightful aroma of food wafting from the canteens. That's where
                   our story begins. We're a group of college students just like
@@ -85,7 +85,7 @@ const About = () => {
               </div>
             </div>
   
-            <div className="w-full flex-col justify-center py-[7rem] bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 md:bg-gray-900">
+            <div className="w-full flex-col justify-center py-[7rem] bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 md:bg-gray-900 dark:bg-aliceblue dark:bg-none">
               <h2
                 data-aos="fade-up"
                 className="text-3xl font-bold text-green-500 mb-2 md:mb-4 text-center"
@@ -96,7 +96,7 @@ const About = () => {
                 data-aos="fade-up"
                 className="w-full flex flex-col md:flex-row justify-center py-[5rem] text-center"
               >
-                <div className="w-[95%] lg:w-[25%] bg-gray-950 p-[2rem] hover:translate-y-2 items-center md:mx-[1rem] mx-auto rounded-xl shadow-2xl shadow-slate-800 mb-[5rem] md:mb-0">
+                <div className="w-[95%] lg:w-[25%] bg-gray-950 p-[2rem] hover:translate-y-2 items-center md:mx-[1rem] mx-auto rounded-xl shadow-2xl shadow-slate-800 mb-[5rem] md:mb-0 dark:bg-cadetblue">
                   <img
                     src="https://plus.unsplash.com/premium_photo-1661476060301-265248d32b94?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8ZGluaW5nJTIwY29sbGVnZSUyMGlubm92YXRpb258ZW58MHwwfDB8fHww"
                     alt="Food"
@@ -110,7 +110,7 @@ const About = () => {
                     busy college days with our efficient service.
                   </span>
                 </div>
-                <div className="w-[95%] lg:w-[25%] bg-gray-900 p-[2rem] hover:translate-y-2 items-center md:mx-[1rem] mx-auto rounded-xl shadow-2xl shadow-slate-800 mb-[5rem] md:mb-0">
+                <div className="w-[95%] lg:w-[25%] bg-gray-900 p-[2rem] hover:translate-y-2 items-center md:mx-[1rem] mx-auto rounded-xl shadow-2xl shadow-slate-800 mb-[5rem] md:mb-0 dark:bg-lightcadetblue">
                   <img
                     src="https://images.unsplash.com/photo-1466978913421-dad2ebd01d17?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                     alt="Food"
@@ -124,7 +124,7 @@ const About = () => {
                     your food journey on campus.
                   </span>
                 </div>
-                <div className="w-[95%] mx-auto lg:w-[25%] bg-gray-950 p-[2rem] hover:translate-y-2 items-center md:mx-[1rem] rounded-xl shadow-xl shadow-slate-800">
+                <div className="w-[95%] mx-auto lg:w-[25%] bg-gray-950 p-[2rem] hover:translate-y-2 items-center md:mx-[1rem] rounded-xl shadow-xl shadow-slate-800 dark:bg-cadetblue">
                   <img
                     src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                     alt="Food"
@@ -159,7 +159,7 @@ const About = () => {
                 <h2 className="text-2xl md:text-3xl font-bold text-green-500 mb-4">
                   Why Foodies?
                 </h2>
-                <p className="text-md md:text-xl leading-relaxed mb-4 p-[2rem] sm:p-0">
+                <p className="text-md md:text-xl leading-relaxed mb-4 p-[2rem] sm:p-0 dark:text-black">
                   Foodies is more than just a web app; it's our way of giving back
                   to the student community. We've been in your shoes, so we
                   understand the challenges you face when deciding where to eat.
@@ -169,7 +169,7 @@ const About = () => {
               </div>
             </div>
   
-            <div className="flex flex-col md:flex-row justify-between items-center md:space-x-8 bg-gray-900 py-[12%]">
+            <div className="flex flex-col md:flex-row justify-between items-center md:space-x-8 bg-gray-900 py-[12%] dark:bg-white">
               <div
                 data-aos="fade-right"
                 className="md:w-1/2 order-2 md:order-2 md:px-20 md:text-start text-center"
@@ -177,7 +177,7 @@ const About = () => {
                 <h2 className="text-xl md:text-3xl font-bold text-green-500 mb-4">
                   Our Team
                 </h2>
-                <p className="text-md md:text-xl leading-relaxed mb-4 p-[2rem] sm:p-0">
+                <p className="text-md md:text-xl leading-relaxed mb-4 p-[2rem] sm:p-0 dark:text-slate-900">
                   We're the API Alchemists, a bunch of creative and tech-savvy
                   students who believe in the power of innovation. We've combined
                   our skills and knowledge to bring Foodies to life, and we
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 8d4c7fc..e58f3e6 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -50,7 +50,7 @@ function Home() {
       loading ? (
         <Loader/>
       ):(
-        <div className=" min-h-screen">
+        <div className=" min-h-screen dark:bg-teal-700">
         <Navbar />
         <div className="text-center">
           <CanteenList canteenData = {canteenData}/>
diff --git a/src/pages/News.jsx b/src/pages/News.jsx
index 2ef82cc..7b94bfa 100644
--- a/src/pages/News.jsx
+++ b/src/pages/News.jsx
@@ -39,10 +39,10 @@ function News() {
           (
             <div className="text-gray-900 min-h-screen">
               <Navbar />
-              <h1 className="text-3xl font-bold text-center mt-10 mb-10 text-white p-6">
+              <h1 className="text-3xl font-bold text-center mt-20 text-white p-6 dark:text-slate-900">
                 Trending Food and Health News
               </h1>
-              <main className="p-4 flex justify-center items-center">
+              <main className="mt-24 p-4">
                 <div className="container grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                   {articles.map((article, index) => (
                     <NewsCard key={index} article={article} />
diff --git a/src/themeContext.js b/src/themeContext.js
new file mode 100644
index 0000000..efbde75
--- /dev/null
+++ b/src/themeContext.js
@@ -0,0 +1,28 @@
+import React, { createContext, useState, useEffect } from 'react';
+
+const ThemeContext = createContext();
+
+const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
+
+  useEffect(() => {
+    if (theme === 'light') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export { ThemeProvider, ThemeContext };
diff --git a/tailwind.config.js b/tailwind.config.js
index ee3bc76..2cad7f1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,10 +1,17 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
   content: [
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {
     extend: {
+      colors:{
+        customColor: '#484b6a',
+        aliceblue: '#f0f8ff',
+        cadetblue: '#5f9ea0',
+        lightcadetblue: '#84bbbd'
+      },
       boxShadow: {
         green: '0 0 4px rgba(0, 255, 0, 0.5)',
       },