diff --git a/pages/index.tsx b/pages/index.tsx
index e48fc3111..1c53c8bb7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,18 +1,8 @@
 
-import { ButtonCommon, ButtonIconBuy, Inputcommon, InputSearch, Layout, MenuDropdown } from 'src/components/common';
-import { IconBuy, IconUser } from 'src/components/icons';
+import { ButtonCommon, ButtonIconBuy, Inputcommon, InputSearch, Layout } from 'src/components/common';
+import { IconBuy } from 'src/components/icons';
 
-const optionMenu = [
-  {
-    link: '/',
-    name: 'Account',
-  },
-  {
-    link: '/',
-    name: 'Logout',
-  },
 
-]
 export default function Home() {
   return (
     <>
@@ -29,8 +19,6 @@ export default function Home() {
       </div>
       <ButtonCommon type='ghost' icon={<IconBuy />}>Button</ButtonCommon>
       <ButtonIconBuy />
-
-      <MenuDropdown options={optionMenu}><IconUser /></MenuDropdown>
     </>
   )
 }
diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index 0c4bfa92e..36bdc6a8c 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -1,19 +1,38 @@
-import { FC } from 'react'
+import { FC, memo } from 'react'
+import { IconUser } from 'src/components/icons'
+import MenuDropdown from '../MenuDropdown/MenuDropdown'
+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
 }
 
-const Header: FC<Props> = ({ }: Props) => {
+const Header = memo(({ }: Props) => {
     return (
-        <div className={s.header}>
-            This is Header
-            <h1 className={s.heading}>This is heading</h1>
-            <div className={s.logo}>This is logo text</div>
-        </div>
+        <header className={s.header}>
+            <HeaderHighLight />
+            <HeaderMenu />
+            <HeaderSubMenu />
+        </header>
     )
-}
+})
 
 export default Header
diff --git a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
new file mode 100644
index 000000000..e6cbbbc96
--- /dev/null
+++ b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
@@ -0,0 +1,8 @@
+@import "../../../../../styles/utilities";
+
+.headerHighLight {
+    @apply flex justify-between items-center spacing-horizontal bg-primary;
+    padding-top: 0.8rem;
+    padding-bottom: 0.8rem;
+    
+}
diff --git a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx
new file mode 100644
index 000000000..9dd2184f1
--- /dev/null
+++ b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx
@@ -0,0 +1,48 @@
+import Link from 'next/link'
+import { memo } from 'react'
+import { ROUTE } from 'src/utils/constanst.utils'
+import s from './HeaderHighLight.module.scss'
+
+const MENU = [
+    {
+        name: 'Delivery & Policy',
+        link: ROUTE.PRIVACY_POLICY,
+    },
+    {
+        name: 'Blog',
+        link: ROUTE.BLOGS,
+    },
+    {
+        name: 'About Us',
+        link: ROUTE.ABOUT,
+    },
+]
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const HeaderHighLight = memo(({ }: Props) => {
+    return (
+        <section className={s.headerHighLight}>
+            <div>
+                Free Shipping on order $49+ / Express $99+
+            </div>
+            <div className="menu">
+                {
+                    MENU.map(item => <li key={item.name}>
+                        <Link href={item.link}>
+                            <a >
+                                {item.name}
+                            </a>
+                        </Link>
+
+                    </li>)
+                }
+            </div>
+        </section>
+    )
+})
+
+export default HeaderHighLight
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
new file mode 100644
index 000000000..f76908148
--- /dev/null
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
@@ -0,0 +1,5 @@
+@import "../../../../../styles/utilities";
+
+.headerHighLight {
+  
+}
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
new file mode 100644
index 000000000..1f8956f14
--- /dev/null
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
@@ -0,0 +1,17 @@
+import { memo } from 'react'
+import s from './HeaderMenu.module.scss'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const HeaderMenu = memo(({ }: Props) => {
+    return (
+       <section className={s.headerMenu}>
+
+       </section>
+    )
+})
+
+export default HeaderMenu
diff --git a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss
new file mode 100644
index 000000000..f76908148
--- /dev/null
+++ b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss
@@ -0,0 +1,5 @@
+@import "../../../../../styles/utilities";
+
+.headerHighLight {
+  
+}
diff --git a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx
new file mode 100644
index 000000000..5df3096df
--- /dev/null
+++ b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx
@@ -0,0 +1,17 @@
+import { memo } from 'react'
+import s from './HeaderSubMenu.module.scss'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const HeaderSubMenu = memo(({ }: Props) => {
+    return (
+       <section className={s.headerSubMenu}>
+
+       </section>
+    )
+})
+
+export default HeaderSubMenu