diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e31d6c3..8c6d4ff 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,10 @@
       "name": "station-saarthi",
       "version": "0.0.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.6.0",
+        "@fortawesome/free-regular-svg-icons": "^6.6.0",
+        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "@material-tailwind/react": "^2.1.10",
         "@react-oauth/google": "^0.12.1",
         "axios": "^1.7.7",
@@ -933,6 +937,64 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
       "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+      "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+      "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-Yv9hDzL4aI73BEwSEh20clrY8q/uLxawaQ98lekBx6t9dQKDHcDzzV1p2YtBGTtolYtNqcWdniOnhzB+JPnQEQ==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.0",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.0.tgz",
@@ -5505,6 +5567,7 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
       "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "license": "MIT",
       "peerDependencies": {
         "react": "*"
       }
diff --git a/frontend/package.json b/frontend/package.json
index 104935a..40c0cc2 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,6 +11,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@material-tailwind/react": "^2.1.10",
     "@react-oauth/google": "^0.12.1",
     "axios": "^1.7.7",
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index fd17d9c..5c7babd 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -24,8 +24,9 @@ import HelpAndSupport from "./Pages/HelpandSupport";
 import Emergency from "./Pages/Emergency";
 import AboutUs from "./Pages/AboutUs";
 import Error from "./Pages/Error";
-import PrivacyPolicy from "./Pages/PrivacyPolicy"; // Added back from one version
-import User from "./Pages/User"; // Added from the other version
+import PrivacyPolicy from "./Pages/PrivacyPolicy";
+import User from "./Pages/User";
+import Footer from "./components/Footer";
 
 function App() {
   return (
@@ -52,8 +53,8 @@ function App() {
           <Route path="/aboutus" element={<AboutUs />} />
           <Route path="/emergency" element={<Emergency />} />
           <Route path="/help-and-support" element={<HelpAndSupport />} />
-          <Route path="/privacy-policy" element={<PrivacyPolicy />} /> {/* Restored PrivacyPolicy */}
-          <Route path="/user" element={<User />} /> {/* Added User */}
+          <Route path="/privacy-policy" element={<PrivacyPolicy />} />
+          <Route path="/user" element={<User />} />
           <Route path="*" element={<Error />} />
         </Routes>
       </Router>
@@ -73,12 +74,12 @@ export function ProtectedRoute() {
 
   const verifyToken = async () => {
     try {
-      const res = await fetch("http://localhost:3000/auth/verify", {
-        method: "GET",
+      const res = await fetch('http://localhost:3000/auth/verify', {
+        method: 'GET',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json',
         },
-        credentials: "include",
+        credentials: 'include',
       });
 
       const data = await res.json();
@@ -88,8 +89,8 @@ export function ProtectedRoute() {
         navigate("/Login");
       }
     } catch (error) {
-      console.error("Error verifying token:", error);
-      navigate("/Login");
+      console.error('Error verifying token:', error);
+      navigate('/Login');
     }
   };
 
diff --git a/frontend/src/Pages/HamburgerMenu.jsx b/frontend/src/Pages/HamburgerMenu.jsx
new file mode 100644
index 0000000..5eae4b3
--- /dev/null
+++ b/frontend/src/Pages/HamburgerMenu.jsx
@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+import {
+  FaCreditCard,
+  FaLifeRing,
+  FaExclamationTriangle,
+  FaInfoCircle,
+  FaComment,
+  FaCog,
+} from "react-icons/fa";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+
+const HamburgerMenu = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <>
+      <div
+        className={`${
+          isOpen ? "hidden" : "fixed left-5 top-5 z-50"
+        } cursor-pointer flex flex-col justify-between w-8 h-5`}
+        onClick={toggleMenu}
+      >
+        <div className="h-0.5 w-full bg-white"></div>
+        <div className="h-0.5 w-full bg-white"></div>
+        <div className="h-0.5 w-full bg-white"></div>
+      </div>
+
+      {isOpen && (
+        <div className="w-1/4 h-screen bg-white fixed top-0 left-0 z-50 flex flex-col">
+          <div className="bg-blue-600 text-white p-5 flex flex-col items-center justify-center h-36 relative">
+            <img
+              className="rounded-full mb-2 mt-2 w-12 h-12"
+              src="https://media.istockphoto.com/id/1300845620/vector/user-icon-flat-isolated-on-white-background-user-symbol-vector-illustration.jpg?s=612x612&w=0&k=20&c=yBeyba0hUkh14_jgv1OKqIH0CCSWU_4ckRkAoy2p73o="
+              alt="profile"
+            />
+            <h3 className="mt-1 text-lg">Yatree</h3>
+            <p className="text-sm">5.0 ★</p>
+            <span
+              className="absolute right-5 top-5 cursor-pointer"
+              onClick={toggleMenu}
+            >
+              <FontAwesomeIcon icon={faTimes} />
+            </span>
+          </div>
+
+          <ul className="list-none p-0 m-0">
+            <li className="py-3 px-5 text-lg flex items-center">
+              <FaCreditCard className="mr-5 text-blue-600" />
+              <a href="/payment" className="flex items-center text-black">
+                Make a Payment
+              </a>
+            </li>
+            <li className="py-3 px-5 text-lg flex items-center">
+              <FaLifeRing className="mr-5 text-blue-600" />
+              <a href="/help-and-support" className="flex items-center text-black">
+                Help and Support
+              </a>
+            </li>
+            <li className="py-3 px-5 text-lg flex items-center">
+              <FaExclamationTriangle className="mr-5 text-blue-600" />
+              <a href="/emergency" className="flex items-center text-black">
+                Emergency
+              </a>
+            </li>
+            <li className="py-3 px-5 text-lg flex items-center">
+              <FaInfoCircle className="mr-5 text-blue-600" />
+              <a href="/about" className="flex items-center text-black">
+                About Us
+              </a>
+            </li>
+            <li className="py-3 px-5 text-lg flex items-center">
+              <FaComment className="mr-5 text-blue-600" />
+              <a href="/feedback" className="flex items-center text-black">
+                Feedback
+              </a>
+            </li>
+            <li className="py-3 px-5 text-lg flex items-center">
+              <FaCog className="mr-5 text-blue-600" />
+              <a href="/settings" className="flex items-center text-black">
+                Settings
+              </a>
+            </li>
+          </ul>
+
+          <div className="mt-auto p-5 text-center">
+            <a href="/privacy-policy" className="text-blue-600">
+              Privacy and Policy
+            </a>
+            <p className="text-xs text-gray-500 mt-2">App version 1.0.0.0</p>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default HamburgerMenu;
diff --git a/frontend/src/Pages/Herosection.jsx b/frontend/src/Pages/Herosection.jsx
index 4108dd5..1f6cbe8 100644
--- a/frontend/src/Pages/Herosection.jsx
+++ b/frontend/src/Pages/Herosection.jsx
@@ -7,16 +7,16 @@ import stationsvg from '../assets/svg/station.svg';
 import noticationsvg from '../assets/svg/notification.svg';
 import mapsvg from '../assets/svg/3dmap.svg';
 import schedulesvg from '../assets/svg/schedule.svg';
-import searchsvg from '../assets/svg/search.svg';
-import { useNavigate } from 'react-router-dom';
-import HamburgerMenu from './hamburger';
 import contributorsvg from '../assets/svg/contributor.svg';
+import { useNavigate } from 'react-router-dom';
 import chatbotsvg from '../assets/svg/chatbot.svg';
 import Chatbot from '../components/chatbot';
 import Navbar from '../components/navbar';
-import Language from '../components/language';
-import { FaUserAlt } from "react-icons/fa";
-import Popup from '../components/popup';
+import HamburgerMenu from './HamburgerMenu';
+import Language from '../components/language'; // From main branch
+import { FaUserAlt } from "react-icons/fa"; // From main branch
+import Popup from '../components/popup'; // From main branch
+import Hamburger from './hamburger';
 
 const Herosection = () => {
     const navigate = useNavigate();
@@ -28,107 +28,110 @@ const Herosection = () => {
         navigate('/Register'); // Navigates to the login page
     };
     const StationCLick = () => {
-        navigate('/Stations'); // Navigates to the login page
+        navigate('/Stations'); // Navigates to the Stations page
     };
     const UserCLick = () => {
-        navigate('/user'); // Navigates to the login page
-    }
+        navigate('/user'); // Navigates to the user page
+    };
     const NavigationCLick = () => {
-        navigate('/Navigation'); // Navigates to the login page
+        navigate('/Navigation'); // Navigates to the Navigation page
     };
     const BookingCLick = () => {
-        navigate('/Booking'); // Navigates to the login page
+        navigate('/Booking'); // Navigates to the Booking page
     };
     const MapCLick = () => {
-        navigate('/3DMap'); // Navigates to the login page
-    }
+        navigate('/3DMap'); // Navigates to the 3D Map page
+    };
     const ScheduleCLick = () => {
-        navigate('/Schedule'); // Navigates to the login page
-    }
+        navigate('/Schedule'); // Navigates to the Schedule page
+    };
     const NotificationCLick = () => {
-        navigate('/Notification'); // Navigates to the login page
-    }
+        navigate('/Notification'); // Navigates to the Notification page
+    };
     const ContributorCLick = () => {
-        navigate('/contributor'); // Navigates to the login page
-    }
-  
+        navigate('/contributor'); // Navigates to the Contributor page
+    };
 
     return (
         <>
-
-            <div className='relative z-50 flex items-center justify-between gap-[88vw]'>
-                <div><Navbar /></div>
-                  <div className='flex items-center justify-center'>
-            <button type="submit" onClick={UserCLick} className=""><FaUserAlt className='bg-blue-200 border-2 text-blue-600 border-blue-200 rounded-full w-[55px] h-[55px] p-2 shadow-lg' /></button>
-            </div>
-                <div><HamburgerMenu/></div>
-               
+            <div className='relative z-50 flex items-center justify-between'>
+                <div><HamburgerMenu /></div> {/* From HamburgerMenu branch */}
+                <div className='flex items-center justify-center'>
+                    <button type="submit" onClick={UserCLick} className="ml-[1300px]">
+                        <FaUserAlt className='bg-blue-200 border-2 text-blue-600 border-blue-200 rounded-full w-[55px] h-[55px] p-2 shadow-lg' />
+                    </button>
+                </div>
+                <div><Hamburger></Hamburger></div>
             </div>
-            <Language/>
-            <h1 className='pl-4 text-4xl font-black text-center text-white '>Namaste !! Yatree </h1>
-            <div className="relative flex items-center justify-center bg-center bg-cover herosection">
 
+            <Language /> {/* From main branch */}
+            
+            <h1 className='pl-4 text-4xl font-black text-center text-white'>Namaste !! Yatree</h1>
+            <div className="relative flex items-center justify-center bg-center bg-cover herosection">
                 <div className='relative z-10 grid justify-items-center'>
-                    <img src={logo} alt="" srcset="" style={{ height: "40vh" }} />
+                    <img src={logo} alt="" style={{ height: "40vh" }} />
                     <h1 className='text-2xl font-extrabold text-white text-center'>Station Saarthi : Your Platform Guide</h1>
                 </div>
-                {/* <img src={bg} alt="whitishbg" style={{ position: "absolute", bottom: 0 }} />
-            <img src={bgmobile} alt="" style={{ position: "absolute", bottom: 0, zIndex: "10" }} className="md:hidden" /> */}
             </div>
-            <br></br>
-           
+            <br />
 
-            <div className='grid grid-cols-3 gap-2 pb-10 mt-32 md:flex md:flex-row md:justify-evenly justify-items-center '>
-            <div 
-  type="submit" 
-  onClick={ContributorCLick} 
-  className="fixed flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer  left-3 -bottom-8 md:-bottom-5"
->
-  <img 
-    src={contributorsvg} 
-    alt="" 
-    className="
-      bg-blue-200 border-2 border-blue-100 rounded-full 
-      w-[64px] h-[64px] p-2
-    " 
-  />
-  <h1 className="text-xs font-bold text-black">Contributors</h1>
-</div>
+            <div className='grid grid-cols-3 gap-2 pb-10 mt-32 md:flex md:flex-row md:justify-evenly justify-items-center'>
+                <div 
+                    type="submit" 
+                    onClick={ContributorCLick} 
+                    className="fixed flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer left-3 -bottom-8 md:-bottom-5"
+                >
+                    <img src={contributorsvg} alt="" className='bg-blue-200 border-2 border-blue-100 rounded-full w-[64px] h-[64px] p-2' />
+                    <h1 className="text-xs font-bold text-black">Contributors</h1>
+                </div>
 
                 <div type="submit" onClick={NavigationCLick} className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer transition-all hover:translate-y-2 duration-300'>
-                    <img src={navigationsvg} alt="" srcset="" className='bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg' />
-                    <button className="w-24 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" >
+                    <img src={navigationsvg} alt="" className='bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg' />
+                    <button className="w-24 py-1 mt-2 font-semibold text-white bg-blue-500 rounded-lg shadow-md hover:bg-blue-600">
                         <h1 className='font-bold text-white'>Navigation</h1>
                     </button>
                 </div>
                 <div type="submit" onClick={BookingCLick} className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer transition-all hover:translate-y-2 duration-300'>
-                    <img src={bookingsvg} alt="" srcset="" className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg " />
-                    <button type="submit" onClick={BookingCLick} className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" >
+                    <img src={bookingsvg} alt="" className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg" />
+                    <button className="w-20 py-1 mt-2 font-semibold text-white bg-blue-500 rounded-lg shadow-md hover:bg-blue-600">
                         <h1 className='font-bold text-white'>Booking</h1>
                     </button>
                 </div>
                 <div type="submit" onClick={StationCLick} className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer transition-all hover:translate-y-2 duration-300'>
-                    <img src={stationsvg} alt="" srcset="" className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg" />
-                    <button className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" >
+                    <img src={stationsvg} alt="" className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg" />
+                    <button className="w-20 py-1 mt-2 font-semibold text-white bg-blue-500 rounded-lg shadow-md hover:bg-blue-600">
                         <h1 className='font-bold text-white'>Station</h1>
                     </button>
                 </div>
-                <div type="submit" onClick={MapCLick} className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer transition-all hover:translate-y-2 duration-300 '><img src={mapsvg} alt="" srcset="" className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg" /> <button type="submit" onClick={MapCLick} className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" > <h1 className='font-bold text-white'>3D Map</h1></button></div>
-                
-                <div type="submit" onClick={ScheduleCLick} className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer transition-all hover:translate-y-2 duration-300'><img src={schedulesvg} alt="" srcset="" className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg" /><button type='submit' onClick={ScheduleCLick} className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" > <h1 className='font-bold text-white'>Schedule</h1></button></div>
-                
-                <div type="submit" onClick={NotificationCLick} className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer transition-all hover:translate-y-2 duration-300'><img src={noticationsvg} alt="" srcset="" className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg " /> <button type='submit' onClick={NotificationCLick} className="w-24 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" > <h1 className='font-bold text-white'>Notification</h1></button></div>
-
+                <div type="submit" onClick={MapCLick} className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer transition-all hover:translate-y-2 duration-300'>
+                    <img src={mapsvg} alt="" className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg" />
+                    <button className="w-20 py-1 mt-2 font-semibold text-white bg-blue-500 rounded-lg shadow-md hover:bg-blue-600">
+                        <h1 className='font-bold text-white'>3D Map</h1>
+                    </button>
+                </div>
+                <div type="submit" onClick={ScheduleCLick} className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer transition-all hover:translate-y-2 duration-300'>
+                    <img src={schedulesvg} alt="" className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg" />
+                    <button className="w-20 py-1 mt-2 font-semibold text-white bg-blue-500 rounded-lg shadow-md hover:bg-blue-600">
+                        <h1 className='font-bold text-white'>Schedule</h1>
+                    </button>
+                </div>
+                <div type="submit" onClick={NotificationCLick} className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer transition-all hover:translate-y-2 duration-300'>
+                    <img src={noticationsvg} alt="" className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg" />
+                    <button className="w-24 py-1 mt-2 font-semibold text-white bg-blue-500 rounded-lg shadow-md hover:bg-blue-600">
+                        <h1 className='font-bold text-white'>Notification</h1>
+                    </button>
+                </div>
             </div>
+
             <div  
-  className="fixed flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer  right-5 -bottom-8 md:-bottom-7"
->
-    <Popup />
-<Chatbot/>
-  <h1 className="text-xs font-bold text-black">Saarthi</h1>
-</div>
+                className="fixed flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer right-5 -bottom-8 md:-bottom-7"
+            >
+                <Popup />
+                <Chatbot />
+                <h1 className="text-xs font-bold text-black">Saarthi</h1>
+            </div>
         </>
     );
 };
 
-export default Herosection;
\ No newline at end of file
+export default Herosection;