diff --git a/pages/index.tsx b/pages/index.tsx
index c193554a9..594c95110 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -4,10 +4,39 @@ import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeR
 import {SelectCommon} from 'src/components/common'
 import card from "../public/assets/images/card.png"
 
-const 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.",
+const CONTENT_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.",
+    ]
+  },
+  {
+    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.",
+    ]
+  },
+  {
+    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.",
+    ]
+  },
+  {
+    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.",
+    ]
+  },
 ]
 export default function Home() {
   return (
@@ -24,12 +53,7 @@ export default function Home() {
       {/* <HomeRecipe /> */}
       {/* <SelectCommon option={OPTION_SORT}>Sort By</SelectCommon>
       <SelectCommon option={OPTION_SORT} size="large" type="custom">Sort By</SelectCommon> */}
-      <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 title="This is a subtitle" content={CONTENT} />
+      <CollapseCommon data={CONTENT_DATA} />
       <RelevantBlogPosts />
       {/* todo: uncomment */}
       {/* <ModalCreateUserInfo/> */}
diff --git a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
new file mode 100644
index 000000000..001d23c5e
--- /dev/null
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
@@ -0,0 +1,55 @@
+@import "../../../../styles/utilities";
+
+.collapseWrapper{
+    @apply border-t border-b;
+    border-color: var(--border-line);
+    max-width: 80.4rem;
+    min-height: 4rem;
+    &.isActive{
+        .title{
+            @apply pb-0;
+        }
+        .contentContainer{
+            @apply block;
+        }
+        .toggle{
+            &:before {
+                transform: rotate(180deg);
+            }
+            &:after {
+                transform: rotate(180deg);
+            }
+        }
+    }
+    &:hover{
+        cursor: pointer;
+    }
+}
+.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{
+        height: 2.2rem;
+        width: 2.2rem;
+        position: relative;
+        &:before,
+        &:after{
+            @apply absolute h-2;
+            content: "";
+            border-radius: 0.8rem;
+            background: var(--text-active);
+            top: 40%;
+            width: 2.2rem;
+            transition: transform 500ms ease;
+        }
+        &:before{
+            transform-origin: center;
+            transform: rotate(90deg);
+        }
+    }
+}
+.contentContainer{
+    @apply hidden pb-16;
+}
diff --git a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx
new file mode 100644
index 000000000..67c6765ac
--- /dev/null
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx
@@ -0,0 +1,37 @@
+import s from './CollapseChild.module.scss'
+import { useState } from 'react'
+import classNames from 'classnames'
+import CollapseContent from './CollapseContent/CollapseContent'
+
+interface CollapseProps{
+    title?: string,
+    content: Array<string>,
+    isToggle?: boolean,
+}
+const CollapseChild = ({title, content, isToggle=false}: 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 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 100%
rename from src/components/common/CollapseCommon/CollapseContent/CollapseContent.module.scss
rename to src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss
diff --git a/src/components/common/CollapseCommon/CollapseContent/CollapseContent.tsx b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx
similarity index 100%
rename from src/components/common/CollapseCommon/CollapseContent/CollapseContent.tsx
rename to src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx
diff --git a/src/components/common/CollapseCommon/CollapseCommon.module.scss b/src/components/common/CollapseCommon/CollapseCommon.module.scss
index 4686a886a..e69de29bb 100644
--- a/src/components/common/CollapseCommon/CollapseCommon.module.scss
+++ b/src/components/common/CollapseCommon/CollapseCommon.module.scss
@@ -1,55 +0,0 @@
-@import "../../../styles/utilities";
-
-.collapseWrapper{
-    @apply border-t border-b;
-    border-color: var(--border-line);
-    max-width: 80.4rem;
-    min-height: 4rem;
-    &.isActive{
-        .title{
-            @apply pb-0;
-        }
-        .contentContainer{
-            @apply block;
-        }
-        .toggle{
-            &:before {
-                transform: rotate(180deg);
-            }
-            &:after {
-                transform: rotate(180deg);
-            }
-        }
-    }
-    svg:hover{
-        cursor: pointer;
-    }
-}
-.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{
-        height: 2.2rem;
-        width: 2.2rem;
-        position: relative;
-        &:before,
-        &:after{
-            @apply absolute h-2;
-            content: "";
-            border-radius: 0.8rem;
-            background: var(--text-active);
-            top: 40%;
-            width: 2.2rem;
-            transition: transform 500ms ease;
-        }
-        &:before{
-            transform-origin: center;
-            transform: rotate(90deg);
-        }
-    }
-}
-.contentContainer{
-    @apply hidden pb-16;
-}
diff --git a/src/components/common/CollapseCommon/CollapseCommon.tsx b/src/components/common/CollapseCommon/CollapseCommon.tsx
index 1fdce09da..848e83879 100644
--- a/src/components/common/CollapseCommon/CollapseCommon.tsx
+++ b/src/components/common/CollapseCommon/CollapseCommon.tsx
@@ -1,37 +1,20 @@
 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>}[],
 }
-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} />
+                )
+            }
+        </section>
     )
 }
 
-export default CollapseCommon
\ No newline at end of file
+export default CollapseCommon