diff --git a/public/images/accordion+.svg b/public/images/accordion+.svg
new file mode 100644
index 0000000..7c365c7
--- /dev/null
+++ b/public/images/accordion+.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="42" viewBox="0 0 16 42">
+  <text id="_" data-name="+" transform="translate(0 28)" fill="#21bb81" font-size="28" font-family="IRANSansXFaNum-Regular, IRANSansXFaNum"><tspan x="0" y="0">+</tspan></text>
+</svg>
diff --git a/public/images/accordion-.svg b/public/images/accordion-.svg
new file mode 100644
index 0000000..f8a9171
--- /dev/null
+++ b/public/images/accordion-.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="54" viewBox="0 0 10 54">
+  <text id="_-" data-name="-" transform="translate(0 36)" fill="#21bb81" font-size="36" font-family="IRANSansXFaNum-Regular, IRANSansXFaNum"><tspan x="0" y="0">-</tspan></text>
+</svg>
diff --git a/public/images/accordionGroup2723.svg b/public/images/accordionGroup2723.svg
new file mode 100644
index 0000000..e565c15
--- /dev/null
+++ b/public/images/accordionGroup2723.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47" height="47" viewBox="0 0 47 47">
+  <g id="Group_2723" data-name="Group 2723" transform="translate(-575 -1223)">
+    <rect id="Rectangle_1137" data-name="Rectangle 1137" width="47" height="47" rx="3" transform="translate(575 1223)" fill="#e6f5ef"/>
+    <g id="vuesax_linear_edit" data-name="vuesax/linear/edit" transform="translate(586 1234)">
+      <g id="edit" transform="translate(0 0)">
+        <path id="Vector" d="M9.721,0H7.561C2.16,0,0,2.16,0,7.561v6.481c0,5.4,2.16,7.561,7.561,7.561h6.481c5.4,0,7.561-2.16,7.561-7.561v-2.16" transform="translate(2.16 2.16)" fill="none" stroke="#0a4800" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-2" data-name="Vector" d="M9.712,1.373,1.2,9.885A2.93,2.93,0,0,0,.487,11.31L.023,14.562A1.539,1.539,0,0,0,1.859,16.4l3.251-.464a3.025,3.025,0,0,0,1.426-.713l8.511-8.511c1.469-1.469,2.16-3.176,0-5.336S11.181-.1,9.712,1.373Z" transform="translate(7.614 1.889)" fill="none" stroke="#0a4800" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-3" data-name="Vector" d="M0,0A7.717,7.717,0,0,0,5.336,5.336" transform="translate(16.105 4.483)" fill="none" stroke="#0a4800" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-4" data-name="Vector" d="M0,0H25.923V25.923H0Z" fill="none" opacity="0"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/public/images/accordionGroup2724.svg b/public/images/accordionGroup2724.svg
new file mode 100644
index 0000000..73bed26
--- /dev/null
+++ b/public/images/accordionGroup2724.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47" height="47" viewBox="0 0 47 47">
+  <g id="Group_2724" data-name="Group 2724" transform="translate(-641 -1223)">
+    <rect id="Rectangle_1140" data-name="Rectangle 1140" width="47" height="47" rx="3" transform="translate(641 1223)" fill="#f6eaea"/>
+    <g id="vuesax_linear_trash" data-name="vuesax/linear/trash" transform="translate(652 1234)">
+      <g id="trash">
+        <path id="Vector" d="M19.442.54C15.846.184,12.227,0,8.619,0A63.8,63.8,0,0,0,2.2.324L0,.54" transform="translate(3.24 5.919)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-2" data-name="Vector" d="M0,3.208.238,1.793C.41.767.54,0,2.366,0H5.2C7.021,0,7.161.81,7.323,1.8l.238,1.4" transform="translate(9.181 2.16)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-3" data-name="Vector" d="M14.8,0l-.7,10.877c-.119,1.7-.216,3.014-3.23,3.014H3.932C.918,13.891.821,12.573.7,10.877L0,0" transform="translate(5.563 9.872)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-4" data-name="Vector" d="M0,0H3.6" transform="translate(11.158 17.822)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-5" data-name="Vector" d="M0,0H5.4" transform="translate(10.261 13.502)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-6" data-name="Vector" d="M0,0H25.923V25.923H0Z" fill="none" opacity="0"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/public/images/accordionGroup2725.svg b/public/images/accordionGroup2725.svg
new file mode 100644
index 0000000..1c3bf85
--- /dev/null
+++ b/public/images/accordionGroup2725.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.719" height="13.111" viewBox="0 0 20.719 13.111">
+  <g id="Group_2725" data-name="Group 2725" transform="translate(-1823.644 -1244)">
+    <line id="Line_401" data-name="Line 401" x1="17.719" transform="translate(1825.144 1245.5)" fill="none" stroke="#21bb81" stroke-linecap="round" stroke-width="3"/>
+    <line id="Line_402" data-name="Line 402" x1="17.719" transform="translate(1825.144 1255.611)" fill="none" stroke="#21bb81" stroke-linecap="round" stroke-width="3"/>
+  </g>
+</svg>
diff --git a/src/components/Accordion/AccordionDesign1/index.js b/src/components/Accordion/AccordionDesign1/index.js
index 858c464..af97974 100644
--- a/src/components/Accordion/AccordionDesign1/index.js
+++ b/src/components/Accordion/AccordionDesign1/index.js
@@ -3,21 +3,54 @@ import CircleInCircle from "../../MiniComponents/CircleInCircle";
 
 const AccordionDesign1 = ({ items }) => {
   return (
-    <section className="w-full flex flex-col p-4 bg-gray-300">
+    <section className="w-full flex flex-col ">
       {/* header */}
       {items.map((item, index) => (
-        <div className="flex flex-row items-center justify-between bg-red-50 border-b-4 border-secondaryLight">
-          <CircleInCircle
-            parentClassName={"bg-green-500  w-3 h-3 "}
-            childClassName={false}
-          />
-          <h2 className="bg-blue-300 flex-1">{item.title}</h2>{" "}
+        <div className="flex flex-col" key={index}>
+          <div className="flex flex-row items-center justify-between px-3 py-5  border-b-2 border-secondary cursor-pointer">
+            <CircleInCircle
+              parentClassName={"bg-secondaryDark  w-3 h-3 "}
+              childClassName={false}
+            />
+            <h2 className="flex-1 mr-7 text-sm">{item.title}</h2>
+            <img src="images/accordion+.svg" alt="" class="w-3 ml-2" />
+          </div>
+          {item.subItems.map((subItem, i) => (
+            <div className="flex flex-row items-center justify-between p-3 border-b-2 border-surfaceBorder cursor-pointer ">
+              <div className="flex flex-row items-center">
+                <img
+                  src="images/accordionGroup2725.svg"
+                  className="w-4"
+                  alt="line"
+                />
+                <span className="mr-3 text-sm">1</span>
+              </div>
+              <div className="w-0.5 h-6 mx-3 bg-surfaceBorder"></div>
+              <p className="text-sm flex-1">{subItem.name}</p>
+              <div className="flex flex-row items-center justify-end gap-x-3 flex-1">
+                <img
+                  src="images/accordionGroup2724.svg"
+                  className="w-8 rounded"
+                  alt="delete-button"
+                />
+                <img
+                  src="images/accordionGroup2723.svg"
+                  className="w-8 rounded"
+                  alt="edit-button"
+                />
+              </div>
+            </div>
+          ))}
         </div>
       ))}
     </section>
   );
 };
-
+// accordionGroup2723.svg
+// accordionGroup2724.svg
+// accordionGroup2725.svg
+// accordion-.svg
+// accordion+.svg
 export default AccordionDesign1;
 
 AccordionDesign1.defaultProps = {