diff --git a/next.config.js b/next.config.js
index d3ad64f4a..ce9389fb7 100644
--- a/next.config.js
+++ b/next.config.js
@@ -42,6 +42,9 @@ module.exports = withCommerceConfig({
         },
     ].filter(Boolean)
   },
+  eslint: {
+    ignoreDuringBuilds: true,
+  }
 })
 
 // Don't delete this console log, useful to see the commerce config in Vercel deployments
diff --git a/pages/blogs.tsx b/pages/blogs.tsx
new file mode 100644
index 000000000..84e56b55d
--- /dev/null
+++ b/pages/blogs.tsx
@@ -0,0 +1,14 @@
+import { Layout } from 'src/components/common';
+import { BlogsList, FeaturedCardBlog, BlogHeading, BlogBreadCrumb } from 'src/components/modules/blogs';
+
+export default function BlogsPage() {
+    return(
+        <>
+            <BlogBreadCrumb />
+            <BlogHeading />
+            <FeaturedCardBlog />
+            <BlogsList />
+        </>
+    )
+}
+BlogsPage.Layout = Layout
\ No newline at end of file
diff --git a/public/assets/images/author.png b/public/assets/images/author.png
new file mode 100644
index 000000000..70c922bc6
Binary files /dev/null and b/public/assets/images/author.png differ
diff --git a/public/assets/images/image20.png b/public/assets/images/image20.png
new file mode 100644
index 000000000..548870b87
Binary files /dev/null and b/public/assets/images/image20.png differ
diff --git a/public/assets/images/image21.png b/public/assets/images/image21.png
new file mode 100644
index 000000000..6cb7b2b43
Binary files /dev/null and b/public/assets/images/image21.png differ
diff --git a/public/assets/images/image22.png b/public/assets/images/image22.png
new file mode 100644
index 000000000..c45a22c1c
Binary files /dev/null and b/public/assets/images/image22.png differ
diff --git a/public/assets/images/image23.png b/public/assets/images/image23.png
new file mode 100644
index 000000000..928642628
Binary files /dev/null and b/public/assets/images/image23.png differ
diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
index 6ad2e6817..cc5733342 100644
--- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
@@ -34,4 +34,4 @@ const BreadcrumbCommon = ({ crumbs, showHomePage = true }: BreadcrumbCommonProps
     )
 }
 
-export default BreadcrumbCommon
+export default BreadcrumbCommon
\ No newline at end of file
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/CardBlog/CardBlog.module.scss b/src/components/common/CardBlog/CardBlog.module.scss
index f0dc00b3a..6e62ed5ff 100644
--- a/src/components/common/CardBlog/CardBlog.module.scss
+++ b/src/components/common/CardBlog/CardBlog.module.scss
@@ -3,7 +3,6 @@
 .cardBlogWarpper {
     @apply inline-flex flex-col justify-start;
     max-width: 39.2rem;
-    min-height: 34.4rem;
     .image {
         width: 100%;
         max-height: 22rem;
@@ -11,6 +10,9 @@
         &:hover {
             cursor: pointer;
         }
+        img{
+            border-radius: 2.4rem;
+        }
     }
     .title {
         padding: 1.6rem 0.8rem 0.4rem 0.8rem;
diff --git a/src/components/common/Footer/Footer.tsx b/src/components/common/Footer/Footer.tsx
index a830c60ea..faf496200 100644
--- a/src/components/common/Footer/Footer.tsx
+++ b/src/components/common/Footer/Footer.tsx
@@ -52,7 +52,7 @@ const FOOTER_COLUMNS = [
             },
             {
                 name: 'Blog',
-                link: ROUTE.TERM_CONDITION,
+                link: ROUTE.BLOGS,
             },
         ]
     }
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/common/index.ts b/src/components/common/index.ts
index 52c372a83..5b821317f 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -35,6 +35,7 @@ export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreate
 export { default as CardBlog} from './CardBlog/CardBlog'
 export { default as RelevantBlogPosts} from './RelevantBlogPosts/RelevantBlogPosts'
 export { default as CollapseCommon} from './CollapseCommon/CollapseCommon'
+export { default as BreadcrumbCommon } from './BreadcrumbCommon/BreadcrumbCommon'
 export { default as ImgWithLink} from './ImgWithLink/ImgWithLink'
 export { default as RecipeDetail} from './RecipeDetail/RecipeDetail'
 export { default as DrawerCommon} from './DrawerCommon/DrawerCommon'
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..d347ad872
--- /dev/null
+++ b/src/components/modules/blogs/BlogBreadcrumb/BlogBreadCrumb.module.scss
@@ -0,0 +1,7 @@
+@import "../../../../styles/utilities";
+.breadCrumbWrapper {
+    @apply py-12 spacing-horizontal;
+    @screen lg {
+        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/BlogHeading/BlogHeading.module.scss b/src/components/modules/blogs/BlogHeading/BlogHeading.module.scss
new file mode 100644
index 000000000..d562ce2ae
--- /dev/null
+++ b/src/components/modules/blogs/BlogHeading/BlogHeading.module.scss
@@ -0,0 +1,9 @@
+@import "../../../../styles/utilities";
+
+.headingWrapper {
+    @apply flex spacing-horizontal-left pb-16 justify-center;
+    .heading{
+        max-width: 121.6rem;
+        flex-grow: 1;
+    }
+}
\ No newline at end of file
diff --git a/src/components/modules/blogs/BlogHeading/BlogHeading.tsx b/src/components/modules/blogs/BlogHeading/BlogHeading.tsx
new file mode 100644
index 000000000..e3f60c980
--- /dev/null
+++ b/src/components/modules/blogs/BlogHeading/BlogHeading.tsx
@@ -0,0 +1,18 @@
+import { HeadingCommon } from "src/components/common"
+import s from './BlogHeading.module.scss'
+
+interface BlogHeadingProps {
+    children?: React.ReactNode,
+    heading?: string,
+}
+
+const BlogHeading = ({heading = "BLOG"}: BlogHeadingProps) => {
+    return (
+        <section className={s.headingWrapper}>
+            <div className={s.heading}>
+                <HeadingCommon>{heading}</HeadingCommon>
+            </div>
+        </section>
+    )
+}
+export default BlogHeading
\ No newline at end of file
diff --git a/src/components/modules/blogs/BlogsList/BlogsList.module.scss b/src/components/modules/blogs/BlogsList/BlogsList.module.scss
new file mode 100644
index 000000000..295cabc5a
--- /dev/null
+++ b/src/components/modules/blogs/BlogsList/BlogsList.module.scss
@@ -0,0 +1,23 @@
+@import "../../../../styles/utilities";
+
+.wrapper {
+    @apply flex flex-col spacing-horizontal items-center;
+    padding-bottom: 16.8rem;
+    .list {
+        @apply grid grid-cols-1 gap-8;
+        max-width: 121.6rem;
+        @screen md {
+            @apply grid-cols-2;
+        }
+        @screen lg {
+            @apply grid-cols-3;
+        }
+    }
+    .card {
+        @apply pb-16;
+    }
+    .pagination {
+        @apply flex justify-center items-center ;
+        padding-top: 0.8rem;
+    }
+}
\ No newline at end of file
diff --git a/src/components/modules/blogs/BlogsList/BlogsList.tsx b/src/components/modules/blogs/BlogsList/BlogsList.tsx
new file mode 100644
index 000000000..536aa4afd
--- /dev/null
+++ b/src/components/modules/blogs/BlogsList/BlogsList.tsx
@@ -0,0 +1,157 @@
+import React, { useState } from 'react'
+import CardBlog, { BlogCardProps } from 'src/components/common/CardBlog/CardBlog'
+import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon'
+import s from "./BlogsList.module.scss"
+import { DEFAULT_BLOG_PAGE_SIZE } from 'src/utils/constanst.utils'
+import image15 from '../../../../../public/assets/images/image15.png'
+import image16 from '../../../../../public/assets/images/image16.png'
+import image17 from '../../../../../public/assets/images/image17.png'
+import image21 from '../../../../../public/assets/images/image21.png'
+import image22 from '../../../../../public/assets/images/image22.png'
+import image23 from '../../../../../public/assets/images/image23.png'
+
+interface BlogsListProps {
+    data?: BlogCardProps[],
+}
+
+const BLOGSLIST_DATA = [
+    {
+      imageSrc: image15.src,
+      title: "1",
+      description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
+      slug: "happy-diet"
+    },
+    {
+      imageSrc: image16.src,
+      title: "2",
+      description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
+      slug: "happy-diet"
+    },
+    {
+      imageSrc: image17.src,
+      title: "3",
+      description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
+      slug: "happy-diet"
+    },
+    {
+      imageSrc: image21.src,
+      title: "4",
+      description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
+      slug: "happy-diet"
+    },
+    {
+      imageSrc: image22.src,
+      title: "5",
+      description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
+      slug: "happy-diet"
+    },
+    {
+      imageSrc: image23.src,
+      title: "6",
+      description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
+      slug: "happy-diet"
+    },
+    {
+      imageSrc: image15.src,
+      title: "7",
+      description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
+      slug: "happy-diet"
+    },
+    {
+      imageSrc: image16.src,
+      title: "8",
+      description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
+      slug: "happy-diet"
+    },
+    {
+      imageSrc: image17.src,
+      title: "9",
+      description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
+      slug: "happy-diet"
+    },
+    {
+      imageSrc: image23.src,
+      title: "10",
+      description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
+      slug: "happy-diet"
+    },
+    {
+      imageSrc: image21.src,
+      title: "11",
+      description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
+      slug: "happy-diet"
+    },
+    {
+      imageSrc: image22.src,
+      title: "12",
+      description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
+      slug: "happy-diet"
+    },
+    {
+      imageSrc: image15.src,
+      title: "13",
+      description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
+      slug: "happy-diet"
+    },
+    {
+      imageSrc: image16.src,
+      title: "14",
+      description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
+      slug: "happy-diet"
+    },
+    {
+      imageSrc: image17.src,
+      title: "15",
+      description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
+      slug: "happy-diet"
+    },
+    {
+      imageSrc: image21.src,
+      title: "16",
+      description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
+      slug: "happy-diet"
+    },
+    {
+      imageSrc: image23.src,
+      title: "17",
+      description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
+      slug: "happy-diet"
+    },
+    {
+      imageSrc: image22.src,
+      title: "18",
+      description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
+      slug: "happy-diet"
+    },
+  
+  ]
+
+const BlogsList = ({ data = BLOGSLIST_DATA }:BlogsListProps) => {
+    const [currentPage, setCurrentPage] = useState(0)
+    const onPageChange = (page:number) => {
+        setCurrentPage(page)
+    }
+    
+    return (
+        <section>
+            <div className={s.wrapper}>
+                <div className={s.list}>
+                    {
+                        data.slice(currentPage*DEFAULT_BLOG_PAGE_SIZE,(currentPage+1)*DEFAULT_BLOG_PAGE_SIZE).map((product,index)=> {
+                            return(
+                                <div className={s.card} key={`${product.title}-${index}`}>
+                                    <CardBlog {...product} />
+                                </div>
+                            )
+                        })
+                    }
+                </div>
+                <div className={s.pagination}>
+                    <PaginationCommon total={data.length} pageSize={DEFAULT_BLOG_PAGE_SIZE} onChange={onPageChange}/>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default BlogsList
\ No newline at end of file
diff --git a/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.module.scss b/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.module.scss
new file mode 100644
index 000000000..6fb16450c
--- /dev/null
+++ b/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.module.scss
@@ -0,0 +1,34 @@
+@import "../../../../styles/utilities";
+
+.featuredCard {
+    @apply flex flex-row justify-center spacing-horizontal pb-16;
+    .featuredCardWrapper {
+        @apply flex flex-col;
+        @screen lg {
+            @apply flex-row justify-between;
+        }
+        max-width: 121.6rem;
+    }
+}
+.left {
+    max-width: 59.8rem;
+    img {
+        border-radius: 2.4rem;
+    }
+}
+.right {
+    flex-shrink: 3;
+    @screen lg {
+        margin-left: 6.4rem;
+    }
+}
+.titleWrapper {
+    @apply flex flex-col items-start font-heading heading-3;
+    margin-bottom: 1.6rem;
+    .title {
+        margin-top: 0.4rem;
+    }
+}
+.content {
+    margin-top: 1.6rem
+}
\ No newline at end of file
diff --git a/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx b/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx
new file mode 100644
index 000000000..2bd158d79
--- /dev/null
+++ b/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx
@@ -0,0 +1,52 @@
+import s from './FeaturedCardBlog.module.scss'
+import { Author, DateTime } from 'src/components/common'
+import Image from "next/image";
+import image20 from '../../../../../public/assets/images/image20.png'
+import author from '../../../../../public/assets/images/author.png'
+
+interface FeaturedCardBlogProps{
+    title?: string,
+    content?: string,
+    imgSrc?: any,
+    imgAuthor?: any,
+    date?: string,
+    authorName?: string,
+}
+
+const FEATURED_DATA = {
+    title: "Flammekueche with green asparagus",
+    content: "Traditionally, the Flammekueche is made with rapeseed oil, which, contrary to popular belief, is indeed an oil that can be cooked hot and is not limited to seasoning. It is important to vary the oils in the kitchen to take advantage of the benefits of each. Rapeseed oil is an oil rich in omega 3 which participate in the proper functioning of the cardiovascular system as well as in vitamins E which contributes to the protection of cells against oxidative stress. In short, oils are your friends 😉",
+    imgSrc: image20,
+    imgAuthor: author.src,
+    date: "APRIL 30, 2021",
+    author: "Alessandro Del Piero"
+}
+
+const FeaturedCardBlog = ({ 
+    title = FEATURED_DATA.title, 
+    content = FEATURED_DATA.content, 
+    imgSrc = FEATURED_DATA.imgSrc, 
+    imgAuthor = FEATURED_DATA.imgAuthor, 
+    date = FEATURED_DATA.date, 
+    authorName = FEATURED_DATA.author 
+}: FeaturedCardBlogProps) => {
+    return (
+        <section className={s.featuredCard}>
+            <div className={s.featuredCardWrapper}>
+                <div className={s.left}>
+                    <Image src={imgSrc} alt="image feature card"/>
+                </div>
+                <div className={s.right}>
+                    <div className={s.titleWrapper}>
+                        <DateTime date={date}/>
+                        <a className={s.title}>{title}</a>
+                    </div>
+                    <Author name={authorName} image={imgAuthor}/>
+                    <div className={s.content}>{content}</div>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default FeaturedCardBlog
\ No newline at end of file
diff --git a/src/components/modules/blogs/index.tsx b/src/components/modules/blogs/index.tsx
new file mode 100644
index 000000000..0f8e1b281
--- /dev/null
+++ b/src/components/modules/blogs/index.tsx
@@ -0,0 +1,4 @@
+export { default as FeaturedCardBlog } from './FeaturedCardBlog/FeaturedCardBlog'
+export { default as BlogsList } from './BlogsList/BlogsList'
+export { default as BlogHeading } from './BlogHeading/BlogHeading'
+export { default as BlogBreadCrumb } from './BlogBreadcrumb/BlogBreadcrumb'
\ No newline at end of file
diff --git a/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.module.scss b/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.module.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx b/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx
new file mode 100644
index 000000000..317dab328
--- /dev/null
+++ b/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx
@@ -0,0 +1,26 @@
+import { DateTime } from 'src/components/common'
+import s from './DeliveryAndPolicyContent.module.scss'
+
+interface DeliveryAndPolicyContentProps{
+    title?: string,
+    date: string,
+    content: string[],
+}
+
+const DeliveryAndPolicyContent = ( { title, date, content } : DeliveryAndPolicyContentProps) => {
+    return (
+        <section>
+            <div className={s.titleWrapper}>
+                <div>LASTEST UPDATED: 
+                    <DateTime date={date} />
+                </div>
+                <div className={s.title}>
+                    {title}
+                </div>
+            </div>
+
+        </section>
+    )
+}
+
+export default DeliveryAndPolicyContent
\ No newline at end of file
diff --git a/src/components/modules/delivery-policy/index.tsx b/src/components/modules/delivery-policy/index.tsx
new file mode 100644
index 000000000..7062c369f
--- /dev/null
+++ b/src/components/modules/delivery-policy/index.tsx
@@ -0,0 +1 @@
+export { default as DeliveryAndPolicyContent} from './DeliveryAndPolicyContent/DeliveryAndPolicyContent'
\ No newline at end of file
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index 78a75b3ba..e91fb17f6 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -53,3 +53,4 @@ export const KEY = {
 
 export const OPTION_ALL = 'all';
 export const DEFAULT_PAGE_SIZE=20;
+export const DEFAULT_BLOG_PAGE_SIZE=6;
diff --git a/tsconfig.json b/tsconfig.json
index 6a08e59f8..316d817b7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,7 +12,6 @@
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
     "noUnusedLocals": true,
@@ -26,7 +25,8 @@
       "@commerce/*": ["framework/commerce/*"],
       "@framework": ["framework/vendure"],
       "@framework/*": ["framework/vendure/*"]
-    }
+    },
+    "isolatedModules": true
   },
   "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
   "exclude": [