diff --git a/donutshop_ecommerce/src/app/api/auth/[...nextauth]/route.js b/donutshop_ecommerce/src/app/api/auth/[...nextauth]/route.js
index ec15d8e..4721a21 100644
--- a/donutshop_ecommerce/src/app/api/auth/[...nextauth]/route.js
+++ b/donutshop_ecommerce/src/app/api/auth/[...nextauth]/route.js
@@ -24,7 +24,7 @@ export const authOptions = {
         },
           async authorize(credentials, req) {        
           const email = credentials?.email;
-          const password = credentials?.password
+          const password = credentials?.password; 
 
           mongoose.connect(process.env.MONGO_URL);
 
diff --git a/donutshop_ecommerce/src/app/login/page.js b/donutshop_ecommerce/src/app/login/page.js
index 85eda25..0969c26 100644
--- a/donutshop_ecommerce/src/app/login/page.js
+++ b/donutshop_ecommerce/src/app/login/page.js
@@ -11,12 +11,12 @@ const LoginPage = () => {
     const [loginInProgress, setLoginInProgreass] = useState(false);
 
     async function handleFormSubmit(ev) {
-        ev.preventDefault();
-        setLoginInProgreass(true)
-        
-        await signIn('credentials', {email, password, callbackUrl:'/'})
-
-        setLoginInProgreass(false)
+      ev.preventDefault();
+      setLoginInProgreass(true)
+      
+      await signIn('credentials', {email, password, callbackUrl:'/'})
+      
+      setLoginInProgreass(false)
 
     }
 
diff --git a/donutshop_ecommerce/src/app/menu/page.js b/donutshop_ecommerce/src/app/menu/page.js
new file mode 100644
index 0000000..8dcf1c4
--- /dev/null
+++ b/donutshop_ecommerce/src/app/menu/page.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const MenuPage = () => {
+  return (
+    <div>
+        This is menu page
+    </div>
+  )
+}
+
+export default MenuPage
\ No newline at end of file
diff --git a/donutshop_ecommerce/src/components/layout/Header.js b/donutshop_ecommerce/src/components/layout/Header.js
index 7bd295d..c8474da 100644
--- a/donutshop_ecommerce/src/components/layout/Header.js
+++ b/donutshop_ecommerce/src/components/layout/Header.js
@@ -42,7 +42,7 @@ const Header = () => {
             <div className='mt-5'>
                 <ul className="hidden md:flex flex-row gap-10 text-xs font-semibold uppercase text-[#95743D]">
                 <Link href='/' className="">Home</Link>
-                <Link href='' className="">Menu</Link>
+                <Link href='/menu' className="">Menu</Link>
                 <Link href='' className="">about</Link>
                 <Link href='' className="">contact</Link>
                 </ul>
@@ -69,7 +69,7 @@ const Header = () => {
                     <ul className="w-full h-screen flex justify-center items-center text-center absolute top-0 left-0  bg-gradient-to-b from-[#f8cdc6] to-[#FDE2DE] text-[#95743D] z-10">
                     <li onClick={() => setNav(!nav)} className="flex flex-col gap-4 cursor-pointer capitalize text-3xl">
                         <Link  href='/'>Home</Link>
-                        <Link  href=''>menu</Link>
+                        <Link  href='/menu'>menu</Link>
                         <Link  href=''>about</Link>
                         <Link  href=''>contact</Link>
                         <Link  href=''>login</Link>
diff --git a/donutshop_ecommerce/src/components/layout/HomeMenu.js b/donutshop_ecommerce/src/components/layout/HomeMenu.js
index 82c62a7..689ef31 100644
--- a/donutshop_ecommerce/src/components/layout/HomeMenu.js
+++ b/donutshop_ecommerce/src/components/layout/HomeMenu.js
@@ -1,4 +1,5 @@
-import React from 'react'
+"use client"
+import React, { useEffect, useState } from 'react'
 import { Parallax } from "react-scroll-parallax";
 import MenuItem from '../menu/MenuItem';
 import Slider from "react-slick";
@@ -7,6 +8,17 @@ import "slick-carousel/slick/slick-theme.css";
 
 
 const HomeDrink = () => {
+  const [bestSeller, setBestSeller] = useState([])
+
+  useEffect(() => {
+    fetch('/api/menu-items').then(res => {
+      res.json().then(menuItems => {
+        setBestSeller(menuItems.slice(-5))
+      })
+    })
+  }, [])
+
+
   var menuSlide = {
     dots: false,
     infinite: false,
@@ -65,21 +77,11 @@ const HomeDrink = () => {
       </div>
       <div className='py-2 sm:py-10 px-10'>
         <Slider arrows={false} {...menuSlide}>
-          <div className='px-2'>  
-            <MenuItem/>
-          </div>
-          <div className='px-2'>
-            <MenuItem/>
-          </div>
-          <div className='px-2'>
-            <MenuItem/>
-          </div>
-          <div className='px-2'>
-            <MenuItem/>
-          </div>
-          <div className='px-2'>
-            <MenuItem/>
-          </div>
+          {bestSeller?.length > 0 && bestSeller.map(item => (
+            <div className='px-2'>
+              <MenuItem {...item}/>
+            </div>
+          ))}
         </Slider>
       </div>
     </div>
diff --git a/donutshop_ecommerce/src/components/menu/MenuItem.js b/donutshop_ecommerce/src/components/menu/MenuItem.js
index eeebb1b..77bf6ec 100644
--- a/donutshop_ecommerce/src/components/menu/MenuItem.js
+++ b/donutshop_ecommerce/src/components/menu/MenuItem.js
@@ -1,15 +1,15 @@
 import React from 'react'
 import Image from 'next/image';
 
-const MenuItem = () => {
+const MenuItem = ({menuImg, itemName, description, basePrice, sizes}) => {
   
   
   return (
     <div className='py-1 sm:py-5 flex flex-col gap-2 sm:gap-4 justify-center items-center text-center rounded-xl bg-white h-[350px] sm:h-[450px]'>
-      <Image src='/donut1.png' width={300} height={300} alt='menu-donut' className='w-[200px] sm:w-[300px]'/>
-      <p className='text-sm sm:text-base font-semibold capitalize text-[#95743D] px-2'>Chocolate Beurre noisette Walnut Cream</p>
-      <p className='text-xs sm:text-sm px-2'>Desciption</p>
-      <p className='text-[#95743D] text-sm'>$5.99</p>
+      <Image src={menuImg} width={300} height={300} alt='menu-donut' className='w-[200px] sm:w-[250px]'/>
+      <p className='text-sm sm:text-base font-semibold capitalize text-[#95743D] px-2'>{itemName}</p>
+      <p className='text-xs sm:text-sm px-2 line-clamp-2'>{description}</p>
+      <p className='text-[#95743D] text-sm'>${basePrice}</p>
       <button className='px-2 py-1 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm border border-[#E78895] text-[#95743D] font-semibold hover:bg-[#E78895] hover:text-[#FDE2DE] duration-300'>Add to cart</button>
     </div>
   )