diff --git a/pages/test.tsx b/pages/test.tsx
index 25aaadce4..a3068830d 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -1,13 +1,11 @@
-import { useState } from 'react'
 import {
-  ButtonCommon,
-  Layout, ModalInfo
-} from 'src/components/common'
+  Layout
+} from 'src/components/common';
 import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation';
-
-import MenuNavigationProductList from 'src/components/common/MenuNavigationProductList/MenuNavigationProductList'
+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 = [
   {
       name: 'All',
@@ -64,7 +62,7 @@ export default function Test() {
 
   return (
     <>
-      {/* <RecipesListPage/> */}
+      <RecipesListPage/>
       <MenuNavigation heading="CATEGORIES" categories={CATEGORY}/>
       <MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={BRAND}/>
     </>
diff --git a/src/components/common/Author/Author.module.scss b/src/components/common/Author/Author.module.scss
index 0459a9fbb..8d903546f 100644
--- a/src/components/common/Author/Author.module.scss
+++ b/src/components/common/Author/Author.module.scss
@@ -1,3 +1,4 @@
+@import '../../../styles/utilities';
 .authorWarper{
     @apply flex flex-row items-center;
     
diff --git a/src/components/common/PaginationCommon/PaginationCommon.module.scss b/src/components/common/PaginationCommon/PaginationCommon.module.scss
new file mode 100644
index 000000000..6470cd72f
--- /dev/null
+++ b/src/components/common/PaginationCommon/PaginationCommon.module.scss
@@ -0,0 +1,22 @@
+.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
new file mode 100644
index 000000000..d0df5efe7
--- /dev/null
+++ b/src/components/common/PaginationCommon/PaginationCommon.tsx
@@ -0,0 +1,74 @@
+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
new file mode 100644
index 000000000..e5f526bc4
--- /dev/null
+++ b/src/components/common/PaginationCommon/components/PaginationItem.tsx
@@ -0,0 +1,21 @@
+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/common/ProductCard/ProductCard.module.scss b/src/components/common/ProductCard/ProductCard.module.scss
index 73be21ab1..cffbe063b 100644
--- a/src/components/common/ProductCard/ProductCard.module.scss
+++ b/src/components/common/ProductCard/ProductCard.module.scss
@@ -59,7 +59,8 @@
     .cardBot{
         min-height: 4rem;
         @apply flex justify-between items-center; 
-        .cardButton{
+        .cardIcon{
+            margin-right: 0.8rem;
         }
     }
 }
\ No newline at end of file
diff --git a/src/components/common/ProductList/ProductList.module.scss b/src/components/common/ProductList/ProductList.module.scss
new file mode 100644
index 000000000..c49696ea5
--- /dev/null
+++ b/src/components/common/ProductList/ProductList.module.scss
@@ -0,0 +1,11 @@
+.wrapper{
+    .list{        
+        // max-width: 109.4rem;
+        @apply flex flex-wrap justify-around;
+    }
+    .pagination{
+        padding-top: 4.8rem;
+        // max-width: 109.4rem;
+        @apply flex justify-center items-center ;
+    }
+}
\ No newline at end of file
diff --git a/src/components/common/ProductList/ProductList.tsx b/src/components/common/ProductList/ProductList.tsx
new file mode 100644
index 000000000..7428e3a63
--- /dev/null
+++ b/src/components/common/ProductList/ProductList.tsx
@@ -0,0 +1,30 @@
+import React, { useState } from 'react'
+import PaginationCommon from '../PaginationCommon/PaginationCommon'
+import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard'
+import s from "./ProductList.module.scss"
+interface ProductListProps {
+    data: ProductCardProps[]
+}
+
+const ProductList = ({data}: ProductListProps) => {
+    const [currentPage, setCurrentPage] = useState(0)
+    const onPageChange = (page:number) => {
+        setCurrentPage(page)
+    }
+    return (
+        <div className={s.wrapper}>
+            <div className={s.list}>
+                {
+                    data.slice(currentPage*20,(currentPage+1)*20).map((product,index)=>{
+                        return <ProductCard {...product} key={index}/>
+                    })
+                }
+            </div>
+            <div className={s.pagination}>
+                <PaginationCommon total={data.length} pageSize={20} onChange={onPageChange}/>
+            </div>
+        </div>
+    )
+}
+
+export default ProductList
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 77b875765..8965452dc 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -30,6 +30,7 @@ export { default as SelectCommon} from './SelectCommon/SelectCommon'
 export { default as ModalCommon} from './ModalCommon/ModalCommon'
 export { default as ModalConfirm} from "./ModalConfirm/ModalConfirm"
 export { default as ModalInfo} from "./ModalInfo/ModalInfo"
+export { default as ProductList} from "./ProductList/ProductList"
 export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreateUserInfo'
 export { default as ImgWithLink} from './ImgWithLink/ImgWithLink'
 export { default as RecipeDetail} from './RecipeDetail/RecipeDetail'
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index 1cdb56079..523b9c488 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -15,6 +15,8 @@ export { default as IconGoogleColor } from './IconGoogleColor'
 export { default as IconApple } from './IconApple'
 export { default as ArrowLeft } from './ArrowLeft'
 export { default as ArrowRight } from './ArrowRight'
+export { default as ArrowLeftSmall } from './ArrowLeftSmall'
+export { default as ArrowRightSmall } from './ArrowRightSmall'
 export { default as Close } from './Close'
 export { default as IconPassword } from './IconPassword'
 export { default as IconPasswordCross } from './IconPasswordCross'
diff --git a/tailwind.config.js b/tailwind.config.js
index 894a7ab6e..fbb779889 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -112,11 +112,9 @@ module.exports = {
         'sm-only': {'min': '0', 'max': '767px'},
         'sm': '640px',
         // => @media (min-width: 640px) { ... }
-
         'md-only': {'min': '768px', 'max': '1023px'},
         'md': '768px',
         // => @media (min-width: 768px) { ... }
-
         'lg-only': {'min': '1024px', 'max': '1279px'},
         'lg': '1024px',
         // => @media (min-width: 1024px) { ... }