diff --git a/frontend/src/App.css b/frontend/src/App.css
index 198e47bb..6af73281 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -26,7 +26,16 @@ input[type='radio'] {
 }
 
 .star {
-  cursor: pointer;
-  font-size: 2rem;
-  margin-bottom: 0;
+    cursor: pointer;
+    font-size: 2rem;
+    margin-bottom: 0;
 }
+
+.card {
+    transition: all 0.3s ease; /* Ensure smooth transitions */
+  }
+  
+  /* Shadow effect on hover */
+  .card:hover {
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add a shadow on hover */
+  }
diff --git a/frontend/src/components/Pages/About.jsx b/frontend/src/components/Pages/About.jsx
index 5a67a734..f4ab679b 100644
--- a/frontend/src/components/Pages/About.jsx
+++ b/frontend/src/components/Pages/About.jsx
@@ -1,6 +1,12 @@
-import bgpic from '../../assets/img/abt1.jpg';
+
+import bgpic from "../../assets/img/abt1.jpg";
+import React, { useEffect } from 'react';
+
 
 export default function About() {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
   return (
     <div id="about" className="relative w-full h-screen md:mt-28">
       <div
diff --git a/frontend/src/components/Pages/Boardgame.jsx b/frontend/src/components/Pages/Boardgame.jsx
index baeb3a34..96ca0fcf 100644
--- a/frontend/src/components/Pages/Boardgame.jsx
+++ b/frontend/src/components/Pages/Boardgame.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState ,useEffect} from 'react';
 import board1 from '../../assets/Boardgames/board1.png';
 import board2 from '../../assets/Boardgames/board2.png';
 import board3 from '../../assets/Boardgames/board3.jpg';
@@ -202,6 +202,10 @@ export default function Boardgame() {
     },
   ];
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
   return (
     <>
       <div className="w-full mt-10 md:mt-0">
@@ -318,4 +322,4 @@ export default function Boardgame() {
       </div>
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/Pages/Event.jsx b/frontend/src/components/Pages/Event.jsx
index 7f2bf488..1663f37a 100644
--- a/frontend/src/components/Pages/Event.jsx
+++ b/frontend/src/components/Pages/Event.jsx
@@ -111,6 +111,10 @@ export default function Event() {
     };
   }, []);
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
   return (
     <>
       <div id="event" className="w-full h-fit bg-amber-100 md:overflow-hidden ">
diff --git a/frontend/src/components/Pages/Home.jsx b/frontend/src/components/Pages/Home.jsx
index 9b6aa343..2f5001f1 100644
--- a/frontend/src/components/Pages/Home.jsx
+++ b/frontend/src/components/Pages/Home.jsx
@@ -1,15 +1,20 @@
-import Landing from '../ui/Landing';
-import ReviewCarousel from '../ui/ReviewCarousel';
-import FeedbackForm from '../ui/FeedbackForm';
-import About from './About';
+
+import Landing from "../ui/Landing";
+import ReviewCarousel from "../ui/ReviewCarousel";
+import FeedbackForm from "../ui/FeedbackForm";
+import About from "./About";
+import React, { useEffect } from 'react';
 
 export default function Home() {
-  return (
-    <div id="home" className="bg-[#FDF3C7]">
-      <Landing />
-      <About />
-      <ReviewCarousel />
-      <FeedbackForm />
-    </div>
-  );
-}
+    useEffect(() => {
+        window.scrollTo(0, 0);
+      }, []);
+    return (
+        <div id="home" className="bg-[#FDF3C7]">
+            <Landing />
+            <About/>
+            <ReviewCarousel/>
+            <FeedbackForm />
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/components/Pages/Login.jsx b/frontend/src/components/Pages/Login.jsx
index dd6588ce..ecd9139d 100644
--- a/frontend/src/components/Pages/Login.jsx
+++ b/frontend/src/components/Pages/Login.jsx
@@ -1,8 +1,10 @@
-import { Link, useNavigate } from 'react-router-dom';
-import photo from '../../assets/login.png';
-import React, { useState } from 'react';
-import { message } from 'antd';
+
+import React, { useState , useEffect } from "react";
+import photo from "../../assets/login.png";
+import { Link, useNavigate } from "react-router-dom";
+import { message } from "antd";
 import Cookies from 'js-cookie'
+
 const Login = () => {
   const API_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3000';
   const [data, setData] = useState({
@@ -47,6 +49,10 @@ const Login = () => {
     }
   };
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
   return (
     <div className="w-screen h-screen flex items-center justify-center pt-10">
       <img src={photo} alt="login" className=" w-3/4 absolute" />
diff --git a/frontend/src/components/Pages/Menu.jsx b/frontend/src/components/Pages/Menu.jsx
index 5dcbff43..70fdddae 100644
--- a/frontend/src/components/Pages/Menu.jsx
+++ b/frontend/src/components/Pages/Menu.jsx
@@ -1,4 +1,6 @@
-import { useState } from 'react';
+
+import  { useState , useEffect } from 'react';
+
 import { motion } from 'framer-motion';
 import Mybook from './MyBook';
 import TodaysSpecial from './TodaysSpecial';
@@ -28,6 +30,10 @@ function ParallaxImage() {
     y: mousePosition.y / 30,
   };
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
   return (
     <>
       <div
@@ -61,10 +67,16 @@ function ParallaxImage() {
           <h1 className="text-5xl md:text-9xl font-roboto">Flip Menu</h1>
           <GiArrowDunk size={60} className="mt-2 text-orange-400" />
         </div>
-        <div className="w-full md:flex md:items-center md:justify-center">
+        {/* <div className="w-full md:flex md:items-center md:justify-center">
+          <Mybook />
+        </div>
+        <TodaysSpecial /> */}
+        <div className="w-full md:flex md:items-center md:justify-center mb-20"> {/* Adjust this container */}
           <Mybook />
         </div>
-        <TodaysSpecial />
+        <div className="w-full md:flex md:items-center md:justify-center" style={{ paddingBottom: '80px' }}> {/* Add bottom padding here */}
+          <TodaysSpecial />
+</div>
       </div>
     </>
   );
diff --git a/frontend/src/components/Pages/MyBook.jsx b/frontend/src/components/Pages/MyBook.jsx
index e0061a62..ca9866ed 100644
--- a/frontend/src/components/Pages/MyBook.jsx
+++ b/frontend/src/components/Pages/MyBook.jsx
@@ -42,6 +42,10 @@ function MyBook() {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
   return (
     <div
       style={BgTextureStyle}
diff --git a/frontend/src/components/Pages/Notfound.jsx b/frontend/src/components/Pages/Notfound.jsx
index 824da1f4..10c6b1c7 100644
--- a/frontend/src/components/Pages/Notfound.jsx
+++ b/frontend/src/components/Pages/Notfound.jsx
@@ -1,21 +1,25 @@
-import Notfound from '../../assets/Menu_assets/Notfound.gif';
 
-const NotFound = () => {
-  return (
-    <div>
-      <div className="flex flex-col items-center justify-center h-screen">
-        <h1 className="text-5xl font-bold mb-8 text-center">404 Not Found</h1>
-        <img
-          src={Notfound} // Replace with your actual GIF path
-          alt="Not Found GIF"
-          className="w-full max-w-md"
-        />
-        <p className="mt-8 text-lg text-gray-700 text-center">
-          Sorry, the page you are looking for could not be found.
-        </p>
-      </div>
-    </div>
-  );
-};
+import Notfound from "../../assets/Menu_assets/Notfound.gif"
+import React, { useState , useEffect } from 'react';
 
+const NotFound = () => {
+    useEffect(() => {
+        window.scrollTo(0, 0);
+      }, []);
+    return (
+       <div>
+         <div className="flex flex-col items-center justify-center h-screen">
+            <h1 className="text-5xl font-bold mb-8 text-center">404 Not Found</h1>
+            <img
+                src={Notfound} // Replace with your actual GIF path
+                alt="Not Found GIF"
+                className="w-full max-w-md"
+            />
+            <p className="mt-8 text-lg text-gray-700 text-center">
+                Sorry, the page you are looking for could not be found.
+            </p>
+        </div>
+       </div>
+    );
+}
 export default NotFound;
diff --git a/frontend/src/components/Pages/Pages.jsx b/frontend/src/components/Pages/Pages.jsx
index 57aeddc7..473dd4e8 100644
--- a/frontend/src/components/Pages/Pages.jsx
+++ b/frontend/src/components/Pages/Pages.jsx
@@ -1,7 +1,12 @@
-import { forwardRef } from 'react';
-import PropTypes from 'prop-types';
+
+import PropTypes from "prop-types";
+import React, { useState , useEffect , forwardRef } from 'react';
+
 
 const Page = forwardRef((props, ref) => {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
   return (
     <div className="demoPage bg-white" ref={ref}>
       <div className="h-full">{props.children}</div>
diff --git a/frontend/src/components/Pages/Register.jsx b/frontend/src/components/Pages/Register.jsx
index 91b88e90..b01b506d 100644
--- a/frontend/src/components/Pages/Register.jsx
+++ b/frontend/src/components/Pages/Register.jsx
@@ -1,9 +1,11 @@
-import { useState } from 'react';
-import pic from '../../assets/img/abt1.jpg';
-import pic2 from '../../assets/img/abt1.png';
-import pic3 from '../../assets/img/abt2.png';
-import pic4 from '../../assets/img/abt3.png';
-import pic5 from '../../assets/img/abt4.png';
+
+import { useState , useEffect } from "react";
+import pic from "../../assets/img/abt1.jpg";
+import pic2 from "../../assets/img/abt1.png";
+import pic3 from "../../assets/img/abt2.png";
+import pic4 from "../../assets/img/abt3.png";
+import pic5 from "../../assets/img/abt4.png";
+
 
 export default function Register() {
   const [date, setDate] = useState('');
@@ -32,6 +34,10 @@ export default function Register() {
       .catch((error) => console.log(error));
   };
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
   return (
     <>
       <div className="w-full mx-auto mt-10 lg:mt-0 md:mt-0">
diff --git a/frontend/src/components/Pages/Signup.jsx b/frontend/src/components/Pages/Signup.jsx
index 1fdd97e7..0d8e47b6 100644
--- a/frontend/src/components/Pages/Signup.jsx
+++ b/frontend/src/components/Pages/Signup.jsx
@@ -1,6 +1,7 @@
-import { useState } from 'react';
-import photo from '../../assets/login.png';
-import { useNavigate } from 'react-router-dom';
+
+import { useState , useEffect } from "react";
+import photo from "../../assets/login.png";
+import { useNavigate } from "react-router-dom";
 
 const Signup = () => {
   const API_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3000';
@@ -70,6 +71,10 @@ const Signup = () => {
     }
   };
 
+    useEffect(() => {
+      window.scrollTo(0, 0);
+    }, []);
+
   return (
     <div className="w-screen h-screen flex items-center justify-center pt-10">
       <img src={photo} alt="login" className=" w-3/4 absolute" />
diff --git a/frontend/src/components/Pages/TodaysSpecial.jsx b/frontend/src/components/Pages/TodaysSpecial.jsx
index 0d15c297..5b911ffc 100644
--- a/frontend/src/components/Pages/TodaysSpecial.jsx
+++ b/frontend/src/components/Pages/TodaysSpecial.jsx
@@ -11,64 +11,27 @@ import caesar_salad from '../../assets/TSimg/caesar_salad.webp';
 
 const menuItems = {
   coffee: [
-    {
-      name: 'Espresso',
-      description: 'Rich and bold coffee shot.',
-      image: espresso,
-    },
-    {
-      name: 'Cappuccino',
-      description: 'Creamy coffee with frothy milk.',
-      image: cappuccino,
-    },
-    {
-      name: 'Latte',
-      description: 'Smooth coffee with steamed milk.',
-      image: latte,
-    },
+    { name: "Espresso", description: "Rich and bold coffee shot.", image: espresso, originalPrice: "$3.00", offerPrice: "$2.50" },
+    { name: "Cappuccino", description: "Creamy coffee with frothy milk.", image: cappuccino, originalPrice: "$3.50", offerPrice: "$3.00" },
+    { name: "Latte", description: "Smooth coffee with steamed milk.", image: latte, originalPrice: "$4.00", offerPrice: "$3.50" },
   ],
   drinks: [
-    {
-      name: 'Mango Smoothie',
-      description: 'Refreshing mango blend.',
-      image: mango_smoothie,
-    },
-    {
-      name: 'Lemonade',
-      description: 'Zesty and chilled lemonade.',
-      image: lemonade,
-    },
-    {
-      name: 'Iced Tea',
-      description: 'Cool iced tea with lemon.',
-      image: iced_tea,
-    },
+    { name: "Mango Smoothie", description: "Refreshing mango blend.", image: mango_smoothie, originalPrice: "$4.50", offerPrice: "$4.00" },
+    { name: "Lemonade", description: "Zesty and chilled lemonade.", image: lemonade, originalPrice: "$2.50", offerPrice: "$2.00" },
+    { name: "Iced Tea", description: "Cool iced tea with lemon.", image: iced_tea, originalPrice: "$2.00", offerPrice: "$1.50" },
   ],
   food: [
-    {
-      name: 'Cheese Sandwich',
-      description: 'Toasted sandwich with cheese.',
-      image: cheese_sandwich,
-    },
-    {
-      name: 'Pasta Primavera',
-      description: 'Veggies and pasta in a light sauce.',
-      image: pasta_primavera,
-    },
-    {
-      name: 'Caesar Salad',
-      description: 'Crispy salad with Caesar dressing.',
-      image: caesar_salad,
-    },
+    { name: "Cheese Sandwich", description: "Toasted sandwich with cheese.", image: cheese_sandwich, originalPrice: "$3.50", offerPrice: "$3.00" },
+    { name: "Pasta Primavera", description: "Veggies and pasta in a light sauce.", image: pasta_primavera, originalPrice: "$5.50", offerPrice: "$5.00" },
+    { name: "Caesar Salad", description: "Crispy salad with Caesar dressing.", image: caesar_salad, originalPrice: "$5.00", offerPrice: "$4.50" },
+
   ],
 };
 
 const TodaysSpecial = () => {
-  const [todaysSpecial, setTodaysSpecial] = useState({
-    coffee: {},
-    drink: {},
-    food: {},
-  });
+
+  const [todaysSpecial, setTodaysSpecial] = useState({ coffee: {}, drink: {}, food: {} });
+  const [hoveredItem, setHoveredItem] = useState(null); // State to track the hovered item
 
   // Function to update today's special (cycling through 3 items)
   const updateTodaysSpecial = () => {
@@ -91,32 +54,64 @@ const TodaysSpecial = () => {
     <div className="mt-10">
       <h2 className="text-5xl font-bold text-center mb-9">Today's Special</h2>
       <div className="flex flex-col md:flex-row justify-around items-center mb-8 space-y-8 md:space-y-0 md:space-x-4">
-        <div className="card bg-pink-100 p-4 rounded-lg shadow-lg max-w-xs text-center">
-          <img
-            className="w-64 h-48 object-cover object-center rounded-md mb-4"
-            src={todaysSpecial.coffee.image}
-            alt={todaysSpecial.coffee.name}
-          />
+        {/* Coffee Card */}
+        <div
+          className="bg-pink-100 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
+          style={{ minHeight: '300px' }} // Ensure a minimum height for the card
+          onMouseEnter={() => setHoveredItem('coffee')}
+          onMouseLeave={() => setHoveredItem(null)}
+        >
+          <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.coffee.image} alt={todaysSpecial.coffee.name} />
+
           <h3 className="text-xl font-semibold">{todaysSpecial.coffee.name}</h3>
           <p className="text-gray-600">{todaysSpecial.coffee.description}</p>
+          {/* Show prices below the image and description */}
+          {hoveredItem === 'coffee' && (
+            <div className="mt-4">
+              <p className="text-lg font-bold text-red-700 line-through">{todaysSpecial.coffee.originalPrice}</p>
+              <p className="text-xl font-bold text-red-500">{todaysSpecial.coffee.offerPrice}</p>
+            </div>
+          )}
         </div>
-        <div className="card bg-teal-100 p-4 rounded-lg shadow-lg max-w-xs text-center">
-          <img
-            className="w-64 h-48 object-cover object-center rounded-md mb-4"
-            src={todaysSpecial.food.image}
-            alt={todaysSpecial.food.name}
-          />
+
+        {/* Food Card */}
+        <div
+          className="bg-teal-100 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
+          style={{ minHeight: '300px' }} // Ensure a minimum height for the card
+          onMouseEnter={() => setHoveredItem('food')}
+          onMouseLeave={() => setHoveredItem(null)}
+        >
+          <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.food.image} alt={todaysSpecial.food.name} />
+
           <h3 className="text-xl font-semibold">{todaysSpecial.food.name}</h3>
           <p className="text-gray-600">{todaysSpecial.food.description}</p>
+          {/* Show prices below the image and description */}
+          {hoveredItem === 'food' && (
+            <div className="mt-4">
+              <p className="text-lg font-bold text-red-700 line-through">{todaysSpecial.food.originalPrice}</p>
+              <p className="text-xl font-bold text-red-500">{todaysSpecial.food.offerPrice}</p>
+            </div>
+          )}
         </div>
-        <div className="card bg-pink-100 p-4 rounded-lg shadow-lg max-w-xs text-center">
-          <img
-            className="w-64 h-48 object-cover object-center rounded-md mb-4"
-            src={todaysSpecial.drink.image}
-            alt={todaysSpecial.drink.name}
-          />
+
+        {/* Drink Card */}
+        <div
+          className="bg-pink-100 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
+          style={{ minHeight: '300px' }} // Ensure a minimum height for the card
+          onMouseEnter={() => setHoveredItem('drink')}
+          onMouseLeave={() => setHoveredItem(null)}
+        >
+          <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.drink.image} alt={todaysSpecial.drink.name} />
+
           <h3 className="text-xl font-semibold">{todaysSpecial.drink.name}</h3>
           <p className="text-gray-600">{todaysSpecial.drink.description}</p>
+          {/* Show prices below the image and description */}
+          {hoveredItem === 'drink' && (
+            <div className="mt-4">
+              <p className="text-lg font-bold text-red-700 line-through">{todaysSpecial.drink.originalPrice}</p>
+              <p className="text-xl font-bold text-red-500">{todaysSpecial.drink.offerPrice}</p>
+            </div>
+          )}
         </div>
       </div>
     </div>