diff --git a/pages/index.tsx b/pages/index.tsx
index 158b1dc60..a71748373 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -4,7 +4,7 @@ import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeR
 export default function Home() {
   return (
     <>
-      <HomeBanner />
+      <HomeBanner/>
       <HomeFeature />
       <HomeCategories />
       <HomeCollection />
@@ -12,11 +12,8 @@ export default function Home() {
       <HomeCTA />
       <HomeRecipe />
       <HomeSubscribe />
-
-      {/* // todo: uncomment */}
-      {/* <ModalCreateUserInfo/> */}
     </>
   )
 }
 
-// Home.Layout = Layout
+Home.Layout = Layout
diff --git a/pages/test.tsx b/pages/test.tsx
index 970588581..5afc61235 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -1,22 +1,146 @@
 import { useState } from 'react'
 import {
   ButtonCommon,
-  Layout, ModalInfo
+  Layout,
+  ModalCommon,
+  ProductCarousel,
+  RelevantBlogPosts,
+  CollapseCommon,
 } from 'src/components/common'
+import { CollectionCarcousel } from 'src/components/modules/home'
+import image5 from '../public/assets/images/image5.png'
+import image6 from '../public/assets/images/image6.png'
+import image7 from '../public/assets/images/image7.png'
+import image8 from '../public/assets/images/image8.png'
+const dataTest = [
+  {
+    name: 'Tomato',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image5.src,
+  },
+  {
+    name: 'Cucumber',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image6.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',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image6.src,
+  },
+  {
+    name: 'Tomato',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image5.src,
+  },
+  {
+    name: 'Cucumber',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image6.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',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image6.src,
+  },
+]
+const COLLAPSE_DATA = [
+  {
+    title: "This is a subtitle",
+    content: [
+      "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
+      "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
+      "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
+    ],
+    link: "/title"
+  },
+  {
+    title: "This is a subtitle",
+    content: [
+      "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
+      "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
+      "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
+    ],
+    link: "/title"
+  },
+  {
+    title: "This is a subtitle",
+    content: [
+      "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
+      "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
+      "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
+    ],
+    link: "/title"
+  },
+  {
+    title: "This is a subtitle",
+    content: [
+      "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
+      "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
+      "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
+    ],
+    link: "/title"
+  },
+]
 export default function Test() {
-  const [visible, setVisible] = useState(false)
-  const onClose = () => {
-    setVisible(false)
-  }
-  const onOpen = () => {
-    setVisible(true)
-  }
   return (
     <>
-      <ButtonCommon onClick={onOpen}>open</ButtonCommon>
-      <ModalInfo visible={visible} onClose={onClose}>
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi qui, esse eos nobis soluta suscipit aliquid nostrum corporis. Nihil eligendi similique recusandae minus mollitia aliquam, molestias fugit tenetur voluptatibus maiores et. Quaerat labore corporis inventore nostrum, amet autem exercitationem eligendi?
-      </ModalInfo>
+      <CollapseCommon data={COLLAPSE_DATA} />
+      <RelevantBlogPosts />
     </>
   )
 }
diff --git a/src/components/common/CardBlog/CardBlog.module.scss b/src/components/common/CardBlog/CardBlog.module.scss
index 8f18e5753..f0dc00b3a 100644
--- a/src/components/common/CardBlog/CardBlog.module.scss
+++ b/src/components/common/CardBlog/CardBlog.module.scss
@@ -1,29 +1,29 @@
 @import "../../../styles/utilities";
 
-.cardBlogWarpper{
+.cardBlogWarpper {
+    @apply inline-flex flex-col justify-start;
     max-width: 39.2rem;
     min-height: 34.4rem;
-    @apply inline-flex flex-col justify-start;
-    .image{
+    .image {
         width: 100%;
         max-height: 22rem;
         border-radius: 2.4rem;
-        &:hover{
+        &:hover {
             cursor: pointer;
         }
     }
-    .title{
+    .title {
         padding: 1.6rem 0.8rem 0.4rem 0.8rem;
         @apply font-bold;
         font-size: 2rem;
         line-height: 2.8rem;
         letter-spacing: -0.01em;
         color: var(--text-active);
-        &:hover{
+        &:hover {
             cursor: pointer;
         }
     }
-    .description{
+    .description {
         padding: 0 0.8rem;
         @apply overflow-hidden overflow-ellipsis ;
         color: var(--text-label);
diff --git a/src/components/common/CollapseCommon/CollapseCommon.module.scss b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
similarity index 68%
rename from src/components/common/CollapseCommon/CollapseCommon.module.scss
rename to src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
index 4686a886a..e6a71e44e 100644
--- a/src/components/common/CollapseCommon/CollapseCommon.module.scss
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
@@ -1,18 +1,19 @@
-@import "../../../styles/utilities";
+@import "../../../../styles/utilities";
 
-.collapseWrapper{
+.collapseWrapper {
     @apply border-t border-b;
     border-color: var(--border-line);
     max-width: 80.4rem;
     min-height: 4rem;
-    &.isActive{
-        .title{
+    &.isActive {
+        .title {
             @apply pb-0;
         }
-        .contentContainer{
+        .contentContainer {
             @apply block;
+            animation: ContentAnimationIn 0.5s ease-out;
         }
-        .toggle{
+        .toggle {
             &:before {
                 transform: rotate(180deg);
             }
@@ -21,21 +22,21 @@
             }
         }
     }
-    svg:hover{
+    &:hover {
         cursor: pointer;
     }
 }
-.title{
+.title {
     @apply outline-none flex justify-between font-heading items-center pt-16 pb-16;
     font-size: 3.2rem;
     line-height: 4rem;
     letter-spacing: -0.01em;
-    .toggle{
+    .toggle {
         height: 2.2rem;
         width: 2.2rem;
         position: relative;
         &:before,
-        &:after{
+        &:after {
             @apply absolute h-2;
             content: "";
             border-radius: 0.8rem;
@@ -44,12 +45,22 @@
             width: 2.2rem;
             transition: transform 500ms ease;
         }
-        &:before{
+        &:before {
             transform-origin: center;
             transform: rotate(90deg);
         }
     }
 }
-.contentContainer{
+.contentContainer {
     @apply hidden pb-16;
 }
+@keyframes ContentAnimationIn {
+    0% {
+        opacity: 0;
+        transform: translateY(-1.6rem);
+    }
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}
\ No newline at end of file
diff --git a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx
new file mode 100644
index 000000000..22cbcda10
--- /dev/null
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx
@@ -0,0 +1,41 @@
+import s from './CollapseChild.module.scss'
+import { useState } from 'react'
+import classNames from 'classnames'
+import CollapseContent from './CollapseContent/CollapseContent'
+import Link from 'next/link'
+
+interface CollapseProps{
+    title?: string,
+    content: Array<string>,
+    isToggle?: boolean,
+    link?: string,
+}
+const CollapseChild = ({title, content, isToggle=false, link="/"}: CollapseProps) => {
+    const [isActive, changeActive] = useState(isToggle)
+
+    const handleToggle = () => {
+        changeActive(!isActive)
+    }
+    return(
+        <div className={classNames({
+            [s.collapseWrapper] : true,
+            [s.isActive] : isActive 
+        })}
+            onClick = { handleToggle }
+        >    
+            <div className={s.title}>
+                <Link href={link}>
+                    <a>{title}</a>
+                </Link>
+                <div className={s.toggle}></div>
+            </div>
+            <div className={s.contentContainer}>
+                {
+                    content.map(item => <CollapseContent key={item} content={item} />)
+                }
+            </div>
+        </div>
+    )
+}
+
+export default CollapseChild
\ No newline at end of file
diff --git a/src/components/common/CollapseCommon/CollapseContent/CollapseContent.module.scss b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss
similarity index 66%
rename from src/components/common/CollapseCommon/CollapseContent/CollapseContent.module.scss
rename to src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss
index 2d29c4b51..9e5cfba30 100644
--- a/src/components/common/CollapseCommon/CollapseContent/CollapseContent.module.scss
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss
@@ -1,3 +1,3 @@
-.content{
+.content {
     margin-top: 1.6rem;
 }
\ No newline at end of file
diff --git a/src/components/common/CollapseCommon/CollapseContent/CollapseContent.tsx b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx
similarity index 79%
rename from src/components/common/CollapseCommon/CollapseContent/CollapseContent.tsx
rename to src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx
index 44a5624f3..e18e19c0a 100644
--- a/src/components/common/CollapseCommon/CollapseContent/CollapseContent.tsx
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames'
 import s from './CollapseContent.module.scss'
 
 interface CollapseContentProps{
diff --git a/src/components/common/CollapseCommon/CollapseCommon.tsx b/src/components/common/CollapseCommon/CollapseCommon.tsx
index 1fdce09da..98030ffce 100644
--- a/src/components/common/CollapseCommon/CollapseCommon.tsx
+++ b/src/components/common/CollapseCommon/CollapseCommon.tsx
@@ -1,37 +1,19 @@
-import s from './CollapseCommon.module.scss'
-import { useState } from 'react'
-import classNames from 'classnames'
-import CollapseContent from './CollapseContent/CollapseContent'
+import CollapseChild from './CollapseChild/CollapseChild'
 
-interface CollapseProps{
-    title?: string,
-    content: Array<string>,
-    isToggle?: boolean,
+interface CollapseCommonProps{
+    data: {title: string, content: Array<string>, link: string}[],
 }
-const CollapseCommon = ({title, content, isToggle}: CollapseProps) => {
-    const [isActive, changeActive] = useState(isToggle)
 
-    const handleToggle = () => {
-        changeActive(!isActive)
-    }
-    return(
-        <div className={classNames({
-            [s.collapseWrapper] : true,
-            [s.isActive] : isActive 
-        })}
-            onClick = { handleToggle }
-        >    
-            <div className={s.title}>
-                <a>{title}</a>
-                <div className={s.toggle}></div>
-            </div>
-            <div className={s.contentContainer}>
-                {
-                    content.map(item => <CollapseContent content={item} />)
-                }
-            </div>
-        </div>
+const CollapseCommon = ({data}: CollapseCommonProps) => {
+    return (
+        <section>
+            {
+                data.map(item =>
+                    <CollapseChild key={item.title} title={item.title} content={item.content} link={item.link} />
+                )
+            }
+        </section>
     )
 }
 
-export default CollapseCommon
\ No newline at end of file
+export default CollapseCommon
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index c73b5cb1d..da24e7eee 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -36,6 +36,9 @@ export { default as RelevantBlogPosts} from './RelevantBlogPosts/RelevantBlogPos
 export { default as CollapseCommon} from './CollapseCommon/CollapseCommon'
 export { default as ImgWithLink} from './ImgWithLink/ImgWithLink'
 export { default as RecipeDetail} from './RecipeDetail/RecipeDetail'
+<<<<<<< HEAD
 export { default as DrawerCommon} from './DrawerCommon/DrawerCommon'
 export { default as CartDrawer} from './CartDrawer/CartDrawer'
-export { default as BreadcrumbCommon} from './BreadcrumbCommon/BreadcrumbCommon'
\ No newline at end of file
+export { default as BreadcrumbCommon} from './BreadcrumbCommon/BreadcrumbCommon'
+=======
+>>>>>>> 0f6cdc9f66ceaf2b0aec38d0d6444de902b69bfe
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index d773a0b03..f0e3d74ce 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -23,7 +23,10 @@ export { default as IconCheck } from './IconCheck'
 export { default as IconTime } from './IconTime'
 export { default as IconPeople } from './IconPeople'
 export { default as IconLocation } from './IconLocation'
+<<<<<<< HEAD
 export { default as IconClose } from './IconClose'
 export { default as IconDelete } from './IconDelete'
 export { default as IconPlus } from './IconPlus'
 export { default as IconMinus } from './IconMinus'
+=======
+>>>>>>> 0f6cdc9f66ceaf2b0aec38d0d6444de902b69bfe
diff --git a/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx b/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx
index 0709257fc..d9368ae87 100644
--- a/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx
+++ b/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx
@@ -31,11 +31,7 @@ const DeliveryAndPolicyContent = ( { title, date, content } : DeliveryAndPolicyC
                         content.map(item => <CollapseContent content={item} />)
                     }
                 </div>
-                <CollapseCommon title="This is a subtitle" content={CONTENT} />
-                <CollapseCommon title="This is a subtitle" content={CONTENT} />
-                <CollapseCommon title="This is a subtitle" content={CONTENT} />
-                <CollapseCommon title="This is a subtitle" content={CONTENT} />
-                <CollapseCommon title="This is a subtitle" content={CONTENT} />
+                <CollapseCommon data={CONTENT} />\
             </div>
 
         </section>
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index e5966ad7e..a2ccb73f4 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -10,10 +10,9 @@ export const ROUTE = {
     PRODUCTS: '/products',
     PRODUCT_DETAIL: '/product',
     ABOUT: '/about',
-    BLOG_DETAIL: '/blogdetail',
+    BLOG_DETAIL: '/blog',
     ACCOUNT: '/account',
     RECIPES: '/recipes',
-
     BUSSINESS: '/bussiness',
     CONTACT: '/contact',
     FAQ: '/faq',