diff --git a/pages/test.tsx b/pages/test.tsx
index 9f6a08ec0..a0d99978c 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -182,6 +182,132 @@ const dataTest = [
     price: 'Rp 27.500',
     imageSrc: image5.src,
   },
+  {
+    name: 'Carrot',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image7.src,
+  },
+  {
+    name: 'Salad',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image8.src,
+  },
+  {
+    name: 'Tomato',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image5.src,
+  },
+  {
+    name: 'Carrot',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image7.src,
+  },
+  {
+    name: 'Salad',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image8.src,
+  },
+  {
+    name: 'Tomato',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image5.src,
+  },
+  {
+    name: 'Carrot',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image7.src,
+  },
+  {
+    name: 'Salad',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image8.src,
+  },
+  {
+    name: 'Tomato',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image5.src,
+  },
+  {
+    name: 'Carrot',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image7.src,
+  },
+  {
+    name: 'Salad',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image8.src,
+  },
+  {
+    name: 'Tomato',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image5.src,
+  },
+  {
+    name: 'Carrot',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image7.src,
+  },
+  {
+    name: 'Salad',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image8.src,
+  },
+  {
+    name: 'Tomato',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image5.src,
+  },
+  {
+    name: 'Carrot',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image7.src,
+  },
+  {
+    name: 'Salad',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image8.src,
+  },
+  {
+    name: 'Tomato',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image5.src,
+  },
   {
     name: 'Cucumber',
     weight: '250g',
@@ -217,6 +343,48 @@ const dataTest = [
     price: 'Rp 27.500',
     imageSrc: image8.src,
   },
+  {
+    name: 'Carrot',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image7.src,
+  },
+  {
+    name: 'Salad',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image8.src,
+  },
+  {
+    name: 'Carrot',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image7.src,
+  },
+  {
+    name: 'Salad',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image8.src,
+  },
+  {
+    name: 'Carrot',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image7.src,
+  },
+  {
+    name: 'Salad',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image8.src,
+  },
   {
     name: 'Tomato',
     weight: '250g',
diff --git a/src/components/common/ProductCard/ProductCard.module.scss b/src/components/common/ProductCard/ProductCard.module.scss
index 97dce1794..65e81c811 100644
--- a/src/components/common/ProductCard/ProductCard.module.scss
+++ b/src/components/common/ProductCard/ProductCard.module.scss
@@ -57,7 +57,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
index 040275c7a..c49696ea5 100644
--- a/src/components/common/ProductList/ProductList.module.scss
+++ b/src/components/common/ProductList/ProductList.module.scss
@@ -1,11 +1,11 @@
 .wrapper{
     .list{        
-        max-width: 109.4rem;
-        @apply flex flex-wrap;
+        // max-width: 109.4rem;
+        @apply flex flex-wrap justify-around;
     }
     .pagination{
         padding-top: 4.8rem;
-        max-width: 109.4rem;
+        // 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
index 22b80b358..7428e3a63 100644
--- a/src/components/common/ProductList/ProductList.tsx
+++ b/src/components/common/ProductList/ProductList.tsx
@@ -15,8 +15,8 @@ const ProductList = ({data}: ProductListProps) => {
         <div className={s.wrapper}>
             <div className={s.list}>
                 {
-                    data.slice(currentPage*20,(currentPage+1)*20).map((product)=>{
-                        return <ProductCard {...product}/>
+                    data.slice(currentPage*20,(currentPage+1)*20).map((product,index)=>{
+                        return <ProductCard {...product} key={index}/>
                     })
                 }
             </div>