diff --git a/pages/test.tsx b/pages/test.tsx
index 6b668c658..25aaadce4 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -6,6 +6,7 @@ import {
 import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation';
 
 import MenuNavigationProductList from 'src/components/common/MenuNavigationProductList/MenuNavigationProductList'
+import { RecipesListPage } from 'src/components/modules/recipes';
 import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
 const CATEGORY = [
   {
@@ -63,6 +64,7 @@ export default function Test() {
 
   return (
     <>
+      {/* <RecipesListPage/> */}
       <MenuNavigation heading="CATEGORIES" categories={CATEGORY}/>
       <MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={BRAND}/>
     </>
diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
index 95c8526e1..8f6c05bf7 100644
--- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
@@ -2,10 +2,7 @@
 
 .breadcrumbCommon {
     color: var(--text-base);
-<<<<<<< HEAD
-=======
     .currentItem {
         cursor: default;
     }
->>>>>>> a9f9f06eb9dee2a1ddefe907ff804237a78c5210
 }
diff --git a/src/components/common/PaginationCommon/PaginationCommon.module.scss b/src/components/common/PaginationCommon/PaginationCommon.module.scss
deleted file mode 100644
index 6470cd72f..000000000
--- a/src/components/common/PaginationCommon/PaginationCommon.module.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.warpper{
-    .item{
-        @apply inline-flex items-center justify-center cursor-pointer;
-        background-color: var(--gray);
-        margin: 0 0.4rem;
-        width: 3.2rem;
-        height: 3.2rem;
-        &.active{
-            @apply border border-solid;
-            border-color: var(--text-active);
-            background-color: var(--white);
-        }
-        &.disable{
-            svg{
-                path{
-                    fill: var(--disabled)
-                }
-            }
-            @apply text-disabled cursor-not-allowed;
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/components/common/PaginationCommon/PaginationCommon.tsx b/src/components/common/PaginationCommon/PaginationCommon.tsx
deleted file mode 100644
index d0df5efe7..000000000
--- a/src/components/common/PaginationCommon/PaginationCommon.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import classNames from 'classnames'
-import React, { useEffect, useState } from 'react'
-import { ArrowLeftSmall, ArrowRightSmall } from 'src/components/icons'
-import PaginationItem from './components/PaginationItem'
-import s from './PaginationCommon.module.scss'
-interface PaginationCommonProps {
-  defaultCurrent?: number
-  pageSize: number
-  total: number
-  onChange?: (page: number, pageSize: number) => void
-}
-
-const PaginationCommon = ({
-  total,
-  pageSize,
-  defaultCurrent,
-  onChange,
-}: PaginationCommonProps) => {
-  const [pageNum, setPageNum] = useState<number>(0)
-  const [currentPage, setCurrentPage] = useState<number>(0)
-  useEffect(() => {
-    setPageNum(Math.ceil(total / pageSize))
-  }, [total, pageSize])
-
-  useEffect(() => {
-    if (defaultCurrent) {
-      setCurrentPage(defaultCurrent)
-    }
-  }, [defaultCurrent])
-
-  const onPageClick = (page: number) => {
-    setCurrentPage(page)
-    onChange && onChange(page, pageSize)
-  }
-
-  const onPrevClick = () => {
-    setCurrentPage(currentPage - 1 < 0 ? 0 : currentPage - 1)
-  }
-
-  const onNextClick = () => {
-    setCurrentPage((currentPage + 1) > (pageNum - 1) ? (pageNum - 1) : currentPage + 1)
-  }
-
-  return (
-    <div className={s.warpper}>
-      <div
-        className={classNames(s.item, { [`${s.disable}`]: currentPage <= 0 })}
-        onClick={onPrevClick}
-      >
-        <ArrowLeftSmall disable={currentPage <= 0} />
-      </div>
-      {[...Array(pageNum).keys()].map((index) => {
-        return (
-          <PaginationItem
-            page={index}
-            onClick={onPageClick}
-            key={`${index}-item`}
-            active={index === currentPage}
-          />
-        )
-      })}
-      <div
-        className={classNames(s.item, {
-          [`${s.disable}`]: currentPage >= pageNum - 1,
-        })}
-        onClick={onNextClick}
-      >
-        <ArrowRightSmall disable={currentPage >= pageNum} />
-      </div>
-    </div>
-  )
-}
-
-export default PaginationCommon
diff --git a/src/components/common/PaginationCommon/components/PaginationItem.tsx b/src/components/common/PaginationCommon/components/PaginationItem.tsx
deleted file mode 100644
index e5f526bc4..000000000
--- a/src/components/common/PaginationCommon/components/PaginationItem.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import classNames from 'classnames'
-import React from 'react'
-import s from "../PaginationCommon.module.scss"
-interface PaginationItemProps {
-    onClick:(page:number)=>void
-    page:number
-    active:boolean
-}
-
-const PaginationItem = ({onClick, page, active}: PaginationItemProps) => {
-    const onPageClick = () => {
-        onClick && onClick(page)
-    }
-    return (
-        <div onClick={onPageClick} className={classNames(s.item,{[`${s.active}`]:active})}>
-            {page+1}
-        </div>
-    )
-}
-
-export default PaginationItem
diff --git a/src/components/modules/blogs/BlogContent/BlogContent.module.scss b/src/components/modules/blogs/BlogContent/BlogContent.module.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/modules/blogs/BlogContent/BlogContent.tsx b/src/components/modules/blogs/BlogContent/BlogContent.tsx
new file mode 100644
index 000000000..663bc9750
--- /dev/null
+++ b/src/components/modules/blogs/BlogContent/BlogContent.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { DateTime } from "src/components/common";
+
+interface Props{
+    image:StaticImageData,
+}
+
+const BlogContent = ({}:Props) => {
+    return (
+        <>
+            <DateTime date="APRIL 30, 2021"/>
+        </>
+    )
+}
+
+export default BlogContent
diff --git a/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx b/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx
new file mode 100644
index 000000000..095528105
--- /dev/null
+++ b/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx
@@ -0,0 +1,18 @@
+import Image from "next/image";
+import React from 'react';
+
+interface Props{
+    image:StaticImageData,
+}
+
+
+
+const BlogDetailImg = ({image}:Props) => {
+    return (
+        <>
+             <Image src={image} />
+        </>
+    )
+}
+
+export default BlogDetailImg
diff --git a/src/components/modules/blogs/BlogDetailImg/img/blogdetail.png b/src/components/modules/blogs/BlogDetailImg/img/blogdetail.png
new file mode 100644
index 000000000..ad200ac46
Binary files /dev/null and b/src/components/modules/blogs/BlogDetailImg/img/blogdetail.png differ
diff --git a/src/components/modules/blogs/index.ts b/src/components/modules/blogs/index.ts
new file mode 100644
index 000000000..2e15c3700
--- /dev/null
+++ b/src/components/modules/blogs/index.ts
@@ -0,0 +1 @@
+export { default as BlogDetailImg } from './BlogDetailImg/BlogDetailImg'
diff --git a/src/components/modules/recipes/RecipesList/RecipesList.tsx b/src/components/modules/recipes/RecipesList/RecipesList.tsx
index 6a4fbaa7d..d7835d4b8 100644
--- a/src/components/modules/recipes/RecipesList/RecipesList.tsx
+++ b/src/components/modules/recipes/RecipesList/RecipesList.tsx
@@ -3,8 +3,7 @@ import React from 'react';
 
 import s from './RecipesList.module.scss';
 import RecipesItem from './RecipesItem/RecipesItem';
-
-import { PaginationCommon } from 'src/components/common';
+import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon';
 
 interface Props{
     recipes:{
diff --git a/src/components/modules/recipes/RecipesListPage/RecipesListPage.tsx b/src/components/modules/recipes/RecipesListPage/RecipesListPage.tsx
index bf08ff4ea..fc52d9c85 100644
--- a/src/components/modules/recipes/RecipesListPage/RecipesListPage.tsx
+++ b/src/components/modules/recipes/RecipesListPage/RecipesListPage.tsx
@@ -1,14 +1,11 @@
 import classNames from 'classnames';
 import React from 'react';
-import s from './RecipesListPage.module.scss';
-import RecipesList from '../RecipesList/RecipesList';
-import { Banner, MenuFilter } from 'src/components/common';
-import {MenuNavigation} from 'src/components/common';
-import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
+import { Banner, SelectCommon } from 'src/components/common';
 import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon';
+import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation';
+import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
 import HeadingCommon from "../../../common/HeadingCommon/HeadingCommon";
-import { SelectCommon } from 'src/components/common';
-import {RECIPE_DATA_TEST} from '../../../../utils/demo-data';
+import RecipesList from '../RecipesList/RecipesList';
 
 import blog1 from './img/blog1.png';
 import blog2 from './img/blog2.png';
@@ -16,7 +13,7 @@ import blog3 from './img/blog3.png';
 import blog4 from './img/blog4.png';
 import blog5 from './img/blog5.png';
 import blog6 from './img/blog6.png';
-
+import s from './RecipesListPage.module.scss';
 const BREADCRUMB = [
     {
         name: 'Home',
@@ -125,12 +122,19 @@ const OPTIONSLECT=[
         name:"SORT BY 3"
     },
 ]
+const BANNER =[
+    {
+        imgLink:'assets/bannerrecipes.png',
+        title:'SPECIAL RECIPE OF THE WEEK',
+        subtitle:'Last call! Shop deep deals on 100+ bulk picks while you can.',
+    }
+]
 
 const RecipesListPage = () => {
     return (
        <div className={classNames(s.recipesListPageWrapper)}>
            
-            <Banner title={'SPECIAL RECIPE OF THE WEEK'} subtitle={'Last call! Shop deep deals on 100+ bulk picks while you can.'} imgLink={'assets/bannerrecipes.png'} size="large"/>
+            <Banner data={BANNER}/>
             
             <div className={classNames(s.recipesListPageBreadcrumbDesktop)}>
                 <BreadcrumbCommon crumbs={BREADCRUMB} />
@@ -152,16 +156,16 @@ const RecipesListPage = () => {
                 <div className={classNames(s.recipesList)}>
                     <div className={classNames(s.sortByDesktop)}>
                         <HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
-                        <SelectCommon option={OPTIONSLECT} placeHolder="SORT BY"/>
+                        <SelectCommon option={OPTIONSLECT} />
                     </div>
                     <div className={classNames(s.selectMobile)}>
                         <div>
                             <label htmlFor="">Categories</label>
-                            <SelectCommon option={CATEGORY} placeHolder="Categories"/>
+                            <SelectCommon option={CATEGORY}/>
                         </div>
                         <div>
                             <label htmlFor="">Sort By</label>
-                            <SelectCommon option={OPTIONSLECT} placeHolder="Sort by"/>
+                            <SelectCommon option={OPTIONSLECT} />
                         </div>
                     </div>
                     <RecipesList recipes={RECIPES}/>