diff --git a/pages/index.tsx b/pages/index.tsx
index 79db66f8f..f2ee25b3c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -4,14 +4,12 @@ import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeR
 import {SelectCommon} from 'src/components/common'
 import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import card from "../public/assets/images/card.png"
-import { BlogsList, FeaturedCardBlog, BlogHeading } from 'src/components/modules/blogs';
+import { BlogsList, FeaturedCardBlog, BlogHeading, BlogBreadCrumb, BlogsPage } from 'src/components/modules/blogs';
 
 export default function Home() {
   return (
     <>
-      <BlogHeading />
-      <FeaturedCardBlog />
-      <BlogsList />
+      <BlogsPage />
     </>
   )
 }
diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
index 6741f386c..b1f45a761 100644
--- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
@@ -1,6 +1,5 @@
 @import '../../../styles/utilities';
 
 .breadcrumbCommon {
-    @apply spacing-horizontal-left;
     color: var(--text-base);
 }
\ No newline at end of file
diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
index 615a26893..2dca6b714 100644
--- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
@@ -9,7 +9,7 @@ interface BreadcrumbCommonProps {
     showHomePage?: boolean;
 }
 
-const BreadcrumbCommon = ({ crumbs, showHomePage=true } : BreadcrumbCommonProps) => {
+const BreadcrumbCommon = ({ crumbs, showHomePage=false } : BreadcrumbCommonProps) => {
     if (showHomePage) {
         crumbs.unshift({link: "/", name: "Home"});
     }
diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx
index 370c342d8..f84bc3a51 100644
--- a/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx
+++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 interface BreadcrumbSeparatorProps {
-    children?: React.ReactNode
+    children?: React.ReactNode;
 }
 
 const BreadcrumbSeparator = ({ children }: BreadcrumbSeparatorProps) => {
diff --git a/src/components/common/TabCommon/TabCommon.module.scss b/src/components/common/TabCommon/TabCommon.module.scss
new file mode 100644
index 000000000..9e5fbc1df
--- /dev/null
+++ b/src/components/common/TabCommon/TabCommon.module.scss
@@ -0,0 +1,15 @@
+@import '../../../styles/utilities';
+
+.tabCommonOutSide {
+    @apply spacing-horizontal;
+    
+    .tabCommon {
+        @apply flex;
+        position: relative;
+        border-bottom: 2px solid #FBFBFB;
+        padding-top: 1.6rem;
+        padding-bottom: 1.6rem;
+        width: 100%;
+    }
+}
+
diff --git a/src/components/common/TabCommon/TabCommon.tsx b/src/components/common/TabCommon/TabCommon.tsx
new file mode 100644
index 000000000..d07cf06e8
--- /dev/null
+++ b/src/components/common/TabCommon/TabCommon.tsx
@@ -0,0 +1,47 @@
+import React, { useState } from "react"
+import s from './TabCommon.module.scss'
+
+import TabItem from './TabItem/TabItem'
+
+interface TabCommonProps {
+
+}
+
+const TabCommon = ({ } : TabCommonProps) => {
+    const active = "active", unActive = "";
+
+    const [item1Active, setItem1Active] = useState(active);
+    const [item2Active, setItem2Active] = useState(unActive);
+    const [item3Active, setItem3Active] = useState(unActive);
+
+    function toggleItem1():void {
+        setItem1Active(active)
+
+        setItem2Active(unActive)
+        setItem3Active(unActive)
+    }
+    function toggleItem2():void {
+        setItem2Active(active)
+
+        setItem1Active(unActive)
+        setItem3Active(unActive)
+    }
+    function toggleItem3():void {
+        setItem3Active(active)
+
+        setItem1Active(unActive)
+        setItem2Active(unActive)
+    }
+
+    return (
+        <section className={s.tabCommonOutSide}>
+            <div className={s.tabCommon}>
+                <span onClick={toggleItem1}><TabItem active={item1Active}>Wait for Comfirmation</TabItem></span>
+                <span onClick={toggleItem2}><TabItem active={item2Active}>Delivering</TabItem></span>
+                <span onClick={toggleItem3}><TabItem active={item3Active}>Delivered</TabItem></span>
+            </div>
+        </section>
+    )
+}
+
+export default TabCommon;
\ No newline at end of file
diff --git a/src/components/common/TabCommon/TabItem/TabItem.module.scss b/src/components/common/TabCommon/TabItem/TabItem.module.scss
new file mode 100644
index 000000000..efb10f1f4
--- /dev/null
+++ b/src/components/common/TabCommon/TabItem/TabItem.module.scss
@@ -0,0 +1,16 @@
+@import '../../../../styles/utilities';
+
+.tabItem {
+    margin-right: 4.8rem;
+    padding-top: 1.6rem;
+    padding-bottom: 1.6rem;
+
+    &.active {
+        @apply font-bold;
+        border-bottom: 2px solid var(--primary);
+    }
+
+    &:hover {
+        @apply cursor-pointer;
+    }
+}
diff --git a/src/components/common/TabCommon/TabItem/TabItem.tsx b/src/components/common/TabCommon/TabItem/TabItem.tsx
new file mode 100644
index 000000000..a889ee68b
--- /dev/null
+++ b/src/components/common/TabCommon/TabItem/TabItem.tsx
@@ -0,0 +1,21 @@
+import classNames from "classnames";
+import React from "react"
+import s from './TabItem.module.scss'
+
+interface TabItemProps {
+    active: string;
+    target?: string;
+    children?: string;
+}
+
+const TabItem = ({ active = "", children } : TabItemProps) => {
+    return (
+        <span className={classNames(s.tabItem, {
+            [s[active]]: active
+        })}>
+            {children}
+        </span>
+    )
+}
+
+export default TabItem;
\ No newline at end of file
diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss b/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss
new file mode 100644
index 000000000..22c885238
--- /dev/null
+++ b/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss
@@ -0,0 +1,5 @@
+@import '../../../../styles/utilities';
+
+.accountNavigation {
+    @apply spacing-horizontal;
+}
\ No newline at end of file
diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx
new file mode 100644
index 000000000..fd289edc9
--- /dev/null
+++ b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx
@@ -0,0 +1,50 @@
+import React, { useState } from "react"
+import s from './AccountNavigation.module.scss'
+
+import AccountNavigationItem from './components/AccountNavigationItem' 
+
+interface AccountNavigationProps {
+    
+}
+
+const AccountNavigation = ({  } : AccountNavigationProps) => {
+    const active = "active", unActive = "";
+
+    const [item1Active, setItem1Active] = useState(active);
+    const [item2Active, setItem2Active] = useState(unActive);
+    const [item3Active, setItem3Active] = useState(unActive);
+
+    function toggleItem1():void {
+        setItem1Active(active)
+
+        setItem2Active(unActive)
+        setItem3Active(unActive)
+    }
+    function toggleItem2():void {
+        setItem2Active(active)
+
+        setItem1Active(unActive)
+        setItem3Active(unActive)
+    }
+    function toggleItem3():void {
+        setItem3Active(active)
+
+        setItem1Active(unActive)
+        setItem2Active(unActive)
+    }
+    return (
+        <section className={s.accountNavigation}>
+            <div onClick={toggleItem1}>
+                <AccountNavigationItem active={item1Active}>Customer Information</AccountNavigationItem>
+                </div>
+            <div onClick={toggleItem2}>
+                <AccountNavigationItem active={item2Active}>Your Orders</AccountNavigationItem>
+            </div>
+            <div onClick={toggleItem3}>
+                <AccountNavigationItem active={item3Active}>Favourites</AccountNavigationItem>
+            </div>
+        </section>
+    )
+}
+
+export default AccountNavigation
\ No newline at end of file
diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss
new file mode 100644
index 000000000..01fc0e1cc
--- /dev/null
+++ b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss
@@ -0,0 +1,19 @@
+@import '../../../../../styles/utilities';
+
+.accountNavigationItem {
+    @apply bg-gray;
+    width: 28rem;
+    padding: 1.2rem 0 1.2rem 1.6rem;
+    margin-bottom: 1.2rem;
+
+
+    &:hover {
+        @apply cursor-pointer;
+    }
+
+    &.active {
+        background-color: #FBFBFB;
+        border-radius: 0 1.6rem 1.6rem 0;
+        border-left: 2px solid var(--primary);
+    }
+}
\ No newline at end of file
diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx
new file mode 100644
index 000000000..47cd537f0
--- /dev/null
+++ b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import classNames from "classnames";
+import s from './AccountNavigationItem.module.scss'
+
+interface AccountNavigationItemProps {
+    children?: string;
+    active?: string;
+    target?: string;
+}
+
+const AccountNavigationItem = ({ children, active="" } : AccountNavigationItemProps) => {
+    return (
+        <div className={classNames(s.accountNavigationItem, {
+            [s[active]]:active
+        })}>
+            {children}
+        </div>
+    )
+}
+
+export default AccountNavigationItem
\ No newline at end of file
diff --git a/src/components/modules/blogs/BlogBreadcrumb/BlogBreadCrumb.module.scss b/src/components/modules/blogs/BlogBreadcrumb/BlogBreadCrumb.module.scss
new file mode 100644
index 000000000..351568743
--- /dev/null
+++ b/src/components/modules/blogs/BlogBreadcrumb/BlogBreadCrumb.module.scss
@@ -0,0 +1,4 @@
+.breadCrumbWrapper{
+    @apply py-12;
+    padding-left: 3.2rem;
+}
\ No newline at end of file
diff --git a/src/components/modules/blogs/BlogBreadcrumb/BlogBreadcrumb.tsx b/src/components/modules/blogs/BlogBreadcrumb/BlogBreadcrumb.tsx
new file mode 100644
index 000000000..bb2ea19ef
--- /dev/null
+++ b/src/components/modules/blogs/BlogBreadcrumb/BlogBreadcrumb.tsx
@@ -0,0 +1,16 @@
+import { BreadcrumbCommon } from "src/components/common"
+import s from './BlogBreadCrumb.module.scss'
+
+const BLOG_DATA = [
+    {link: "/blogs", name: "Blog"},
+];
+
+const BlogBreadCrumb = () => {
+    return (
+        <section className={s.breadCrumbWrapper}>
+            <BreadcrumbCommon crumbs={BLOG_DATA} showHomePage={true}/>
+        </section>
+    )
+}
+
+export default BlogBreadCrumb
\ No newline at end of file
diff --git a/src/components/modules/blogs/BlogsPage/BlogsPage.tsx b/src/components/modules/blogs/BlogsPage/BlogsPage.tsx
new file mode 100644
index 000000000..6685eefca
--- /dev/null
+++ b/src/components/modules/blogs/BlogsPage/BlogsPage.tsx
@@ -0,0 +1,13 @@
+import { BlogsList, FeaturedCardBlog, BlogHeading, BlogBreadCrumb } from 'src/components/modules/blogs';
+
+const BlogsPage = () => {
+    return(
+        <>
+            <BlogBreadCrumb />
+            <BlogHeading />
+            <FeaturedCardBlog />
+            <BlogsList />
+        </>
+    )
+}
+export default BlogsPage
\ No newline at end of file
diff --git a/src/components/modules/blogs/index.tsx b/src/components/modules/blogs/index.tsx
index 36e0e5d15..ea9b5bee0 100644
--- a/src/components/modules/blogs/index.tsx
+++ b/src/components/modules/blogs/index.tsx
@@ -1,3 +1,5 @@
 export { default as FeaturedCardBlog } from './FeaturedCardBlog/FeaturedCardBlog'
 export { default as BlogsList } from './BlogsList/BlogsList'
-export { default as BlogHeading } from './BlogHeading/BlogHeading'
\ No newline at end of file
+export { default as BlogHeading } from './BlogHeading/BlogHeading'
+export { default as BlogBreadCrumb } from './BlogBreadcrumb/BlogBreadcrumb'
+export { default as BlogsPage } from './BlogsPage/BlogsPage'
\ No newline at end of file