diff --git a/assets/css/style.css b/assets/css/style.css
index 0490881..f192dec 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -199,6 +199,7 @@ body {
     overflow: hidden;
     flex-shrink: 0;
     font-size: var(--text-lg-semibold-size);
+    border-bottom: 1px solid #F2F4F7;
 }
 
 .full-width-header-navigation .header {
@@ -1095,6 +1096,7 @@ a:hover{
     font-size: var(--display-sm-bold-size);
     color: var(--color-yellowgreen-100);
     font-family: var(--text-md-regular);
+    margin: 75px 0;
 }
 .image-login-page {
     position: relative;
diff --git a/components/LoginSteps/LoginComponent.tsx b/components/LoginSteps/LoginComponent.tsx
index 94f68ba..02d49b4 100644
--- a/components/LoginSteps/LoginComponent.tsx
+++ b/components/LoginSteps/LoginComponent.tsx
@@ -48,7 +48,7 @@ const LoginComponent = ({onChange,setPhone}: StepType) => {
         <div className="sign-up">
             <div className="image-login-page">
                 <div className="image-login-page-child"></div>
-                <img src="/images/6387ec276a4eb-62aa10dfb2adca268416cf2fd03d82f5transformed-3@2x.png" alt="product" />
+                <img src="/images/login_image.png" alt="product" />
             </div>
             <div className="content26">
                 <div className="title">
diff --git a/components/header/index.tsx b/components/header/index.tsx
index a113f2b..30faccc 100644
--- a/components/header/index.tsx
+++ b/components/header/index.tsx
@@ -1,11 +1,6 @@
 import Link from "next/link";
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
-/*
-type HeaderType = {
-  isErrorPage?: Boolean;
-}
-*/
 
 type HeaderType = {
     isErrorPage?: Boolean;
@@ -14,7 +9,8 @@ type HeaderType = {
 const Header = ({ isErrorPage }: HeaderType) => {
     const router = useRouter();
     const arrayPaths = ['/']; 
-    const [onTop, setOnTop] = useState(( !arrayPaths.includes("/")|| isErrorPage ) ? false : true);
+    const [onTop, setOnTop] = useState(( !arrayPaths.includes("/router.pathname")|| isErrorPage ) ? false : true);
+    const [pageLogin] = useState(( router.pathname == "/login" ) ? true : false);
     
     const headerClass = () => {
         if(window.pageYOffset === 0) {
@@ -23,9 +19,7 @@ const Header = ({ isErrorPage }: HeaderType) => {
           setOnTop(false);
         }
     }
-    if(!arrayPaths.includes("login") ) {
-        console.log("hihe")
-    }
+
     useEffect(() => {
         if(!arrayPaths.includes(router.pathname) || isErrorPage) {
             return;
@@ -77,36 +71,39 @@ const Header = ({ isErrorPage }: HeaderType) => {
                     </div>
 
                     <div className="navigation-actions-wrapper d-flex gap-3">
-                        <div className="navigation-actions d-flex align-items-center">
-                            <Link href="/login">
-                                <a className="login-button">
-                                    <span className="font-weight-600">Đăng nhập</span>
-                                </a>
-                            </Link>
-                        </div>
-                            <div className="nav-item-button d-flex">
-                                <Link href="#footer-section">
-                                    <a className="text fw-bolder">
-                                        <img className="small-icon"
-                                             alt="small-icon"
-                                             src="/images/shoppingbag03.svg"
-                                        />
+                       
+                        {!pageLogin &&
+                            <div className="navigation-actions d-flex align-items-center">
+                                <Link href="/login">
+                                    <a className="login-button">
+                                        <span className="font-weight-600">Đăng nhập</span>
                                     </a>
                                 </Link>
-                                
                             </div>
-                            <div className="language-button d-flex align-items-center gap-1">
-                                <div className="language-text">VIE</div>
-                                <Link href="#footer-section">
-                                    <a className="text fw-bolder">
-                                        <img className="small-icon"
-                                             alt=""
-                                             src="/images/vn.svg"
-                                        />
-                                    </a>
-                                </Link>
-                                
+                        }   
+                        {!pageLogin &&
+                            <div className="nav-item-button d-flex">
+                            <Link href="#footer-section">
+                                <a className="text fw-bolder">
+                                    <img className="small-icon"
+                                        alt="small-icon"
+                                        src="/images/shoppingbag03.svg"
+                                    />
+                                </a>
+                            </Link>
                             </div>
+                        }
+                        <div className="language-button d-flex align-items-center gap-1">
+                            <div className="language-text">VIE</div>
+                            <Link href="#footer-section">
+                                <a className="text fw-bolder">
+                                    <img className="small-icon"
+                                        alt=""
+                                        src="/images/vn.svg"
+                                    />
+                                </a>
+                            </Link>
+                        </div>
                     </div>
                 </div>
             </header>
diff --git a/components/item/index.tsx b/components/item/index.tsx
index 7fa6086..28c4440 100644
--- a/components/item/index.tsx
+++ b/components/item/index.tsx
@@ -3,13 +3,13 @@ import { ProductTypeList,IngredientType } from 'types';
 import Ingredient from './ingredient';
 
 
-const MenuItem = ({   name,  price,
+const MenuItem = ({ name,  price,
                 images, merchart, currentPrice,
                 cook_method,  time ,
                 ingredient,
                 distance, ratings, kcal}: ProductTypeList) => {
     return(
-        <div className="food-card d-flex flex-column ">
+        <div className="food-card d-flex flex-column " key={name}>
             <div className="frame-parent d-flex flex-column">
                 <div className="discount-wrapper">
                 {
diff --git a/pages/api/products.ts b/pages/api/products.ts
new file mode 100644
index 0000000..8af273c
--- /dev/null
+++ b/pages/api/products.ts
@@ -0,0 +1,13 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+// fake data
+import products from '../../utils/data/products';
+
+export default (req: NextApiRequest, res: NextApiResponse) => {
+  console.log(req);
+
+  // fake loading time
+  setTimeout(() => {
+    res.status(200).json(products);
+  }, 800);
+}
diff --git a/public/images/login_image.png b/public/images/login_image.png
new file mode 100644
index 0000000..e537758
Binary files /dev/null and b/public/images/login_image.png differ