diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index 36bdc6a8c..baf6f84dc 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -1,25 +1,9 @@
-import { FC, memo } from 'react'
-import { IconUser } from 'src/components/icons'
-import MenuDropdown from '../MenuDropdown/MenuDropdown'
+import React, { memo } from 'react'
 import HeaderHighLight from './components/HeaderHighLight/HeaderHighLight'
 import HeaderMenu from './components/HeaderMenu/HeaderMenu'
 import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu'
 import s from './Header.module.scss'
 
-const OPTION_MENU = [
-    {
-        link: '/',
-        name: 'Account',
-    },
-    {
-        link: '/',
-        name: 'Logout',
-    },
-
-]
-
-// {/* <MenuDropdown options={OPTION_MENU} isHasArrow={false}><IconUser /></MenuDropdown> */}
-
 interface Props {
     className?: string
     children?: any
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
index f76908148..23088a132 100644
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
@@ -1,5 +1,19 @@
 @import "../../../../../styles/utilities";
 
-.headerHighLight {
-  
+.headerMenu {
+    @apply flex justify-between items-center bg-white;
+    .left {
+        @apply flex items-center;
+    }
+    .menu {
+        @apply flex items-center list-none;
+        li {
+            &:not(:last-child) {
+                margin-right: 4.8rem;
+            }
+            a {
+                @appy no-underline;
+            }
+        }
+    }
 }
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
index 1f8956f14..7ea2a4c49 100644
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
@@ -1,6 +1,23 @@
+import Link from 'next/link'
 import { memo } from 'react'
+import InputSearch from 'src/components/common/InputSearch/InputSearch'
+import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
+import { IconBuy, IconHistory, IconUser } from 'src/components/icons'
+import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import s from './HeaderMenu.module.scss'
 
+const OPTION_MENU = [
+    {
+        link: '/',
+        name: 'Account',
+    },
+    {
+        link: '/',
+        name: 'Logout',
+    },
+
+]
+
 interface Props {
     className?: string
     children?: any
@@ -8,9 +25,36 @@ interface Props {
 
 const HeaderMenu = memo(({ }: Props) => {
     return (
-       <section className={s.headerMenu}>
-
-       </section>
+        <section className={s.headerMenu}>
+            <div className={s.left}>
+                <div>Online Grocery</div>
+                <InputSearch />
+            </div>
+            <ul className={s.menu}>
+                <li>
+                    <Link href={`${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.ORDER}`}>
+                        <a >
+                            <IconHistory />
+                        </a>
+                    </Link>
+                </li>
+                <li>
+                    <Link href={`${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.FAVOURITE}`}>
+                        <a >
+                            <IconHistory />
+                        </a>
+                    </Link>
+                </li>
+                <li>
+                    <MenuDropdown options={OPTION_MENU} isHasArrow={false}><IconUser /></MenuDropdown>
+                </li>
+                <li>
+                    <button>
+                        <IconBuy />
+                    </button>
+                </li>
+            </ul>
+        </section>
     )
 })
 
diff --git a/src/components/common/MenuDropdown/MenuDropdown.module.scss b/src/components/common/MenuDropdown/MenuDropdown.module.scss
index 93faf3dbb..9ff3beb58 100644
--- a/src/components/common/MenuDropdown/MenuDropdown.module.scss
+++ b/src/components/common/MenuDropdown/MenuDropdown.module.scss
@@ -1,9 +1,6 @@
 @import "../../../styles/utilities";
 
 .menuDropdown {
-    // todo: remove
-    margin-left: 20rem;
-
     @apply relative cursor-pointer;
     width: fit-content;
     min-width: 4.8rem;
diff --git a/src/components/icons/IconHistory.tsx b/src/components/icons/IconHistory.tsx
new file mode 100644
index 000000000..c36afe78d
--- /dev/null
+++ b/src/components/icons/IconHistory.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconHistory = () => {
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 0C7.43639 0.00731219 4.97349 0.998914 3.12 2.77V1C3.12 0.734784 3.01464 0.48043 2.82711 0.292893C2.63957 0.105357 2.38522 0 2.12 0C1.85478 0 1.60043 0.105357 1.41289 0.292893C1.22536 0.48043 1.12 0.734784 1.12 1V5.5C1.12 5.76522 1.22536 6.01957 1.41289 6.20711C1.60043 6.39464 1.85478 6.5 2.12 6.5H6.62C6.88522 6.5 7.13957 6.39464 7.32711 6.20711C7.51464 6.01957 7.62 5.76522 7.62 5.5C7.62 5.23478 7.51464 4.98043 7.32711 4.79289C7.13957 4.60536 6.88522 4.5 6.62 4.5H4.22C5.50578 3.15636 7.21951 2.30265 9.06653 2.08567C10.9136 1.86868 12.7785 2.30198 14.3407 3.31104C15.9028 4.32011 17.0646 5.84191 17.6263 7.61479C18.188 9.38767 18.1145 11.3009 17.4184 13.0254C16.7223 14.7499 15.4472 16.1781 13.8122 17.0643C12.1772 17.9505 10.2845 18.2394 8.45956 17.8813C6.63463 17.5232 4.99147 16.5405 3.81259 15.1022C2.63372 13.6638 1.99279 11.8597 2 10C2 9.73478 1.89464 9.48043 1.70711 9.29289C1.51957 9.10536 1.26522 9 1 9C0.734784 9 0.48043 9.10536 0.292893 9.29289C0.105357 9.48043 0 9.73478 0 10C0 11.9778 0.58649 13.9112 1.6853 15.5557C2.78412 17.2002 4.3459 18.4819 6.17317 19.2388C8.00043 19.9957 10.0111 20.1937 11.9509 19.8079C13.8907 19.422 15.6725 18.4696 17.0711 17.0711C18.4696 15.6725 19.422 13.8907 19.8079 11.9509C20.1937 10.0111 19.9957 8.00043 19.2388 6.17317C18.4819 4.3459 17.2002 2.78412 15.5557 1.6853C13.9112 0.58649 11.9778 0 10 0ZM10 6C9.73478 6 9.48043 6.10536 9.29289 6.29289C9.10536 6.48043 9 6.73478 9 7V10C9 10.2652 9.10536 10.5196 9.29289 10.7071C9.48043 10.8946 9.73478 11 10 11H12C12.2652 11 12.5196 10.8946 12.7071 10.7071C12.8946 10.5196 13 10.2652 13 10C13 9.73478 12.8946 9.48043 12.7071 9.29289C12.5196 9.10536 12.2652 9 12 9H11V7C11 6.73478 10.8946 6.48043 10.7071 6.29289C10.5196 6.10536 10.2652 6 10 6Z" fill="#5B9A74" />
+        </svg>
+    )
+}
+
+export default IconHistory
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index 9557e7b18..80d6f1dd4 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -2,4 +2,4 @@ export { default as IconBuy } from './IconBuy'
 export { default as IconSearch } from './IconSearch'
 export { default as IconArrowRight } from './IconArrowRight'
 export { default as IconUser } from './IconUser'
-
+export { default as IconHistory } from './IconHistory'
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index fb666be57..e168879b7 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -9,8 +9,9 @@ export const ROUTE = {
     HOME: '/',
     PRODUCTS: '/products',
     ABOUT: '/about',
+    ACCOUNT: '/account',
+    
     BUSSINESS: '/bussiness',
-
     CONTACT: '/contact',
     FAQ: '/faq',
     CUSTOMER_SERVICE: '/customer-service',
@@ -19,6 +20,16 @@ export const ROUTE = {
     BLOGS: '/blogs',
 }
 
+export const ACCOUNT_TAB = {
+    CUSTOMER_INFO: '',
+    ORDER: 'orders',
+    FAVOURITE: 'wishlist',
+}
+
+export const QUERY_KEY = {
+    TAB: 'tab'
+}
+
 export const KEY = {
     ENTER: 'Enter',
 }