diff --git a/src/components/Accordion/AccordionDesign1/index.js b/src/components/Accordion/AccordionDesign1/index.js
index e11f42e..2cf4421 100644
--- a/src/components/Accordion/AccordionDesign1/index.js
+++ b/src/components/Accordion/AccordionDesign1/index.js
@@ -1,105 +1,152 @@
 import React, { useState } from "react";
 import CircleInCircle from "../../MiniComponents/CircleInCircle";
 import Button from "../../ButtonDesign/Button";
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 
 const AccordionDesign1 = ({ items, vod }) => {
   const [activeAccordion, setActiveAccordion] = useState(null);
+  const [accordions, updateAccordion] = useState(items);
+
+  function handleOnDragEnd(result) {
+    if (!result.destination) return;
+
+    const items = Array.from(accordions);
+    const [reorderedItem] = items.splice(result.source.index, 1);
+    items.splice(result.destination.index, 0, reorderedItem);
+
+    updateAccordion(items);
+  }
 
   return (
-    <section className="w-full flex flex-col bg-gray-200">
-      {items.map((item, index) => (
-        <div className="flex flex-col" key={index}>
-          {/* parent */}
-          <div
-            className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
-              activeAccordion === item
-                ? "border-surfaceBorder "
-                : "border-secondary"
-            } cursor-pointer`}
-            onClick={() =>
-              setActiveAccordion(activeAccordion === item ? null : item)
-            }
+    <DragDropContext onDragEnd={handleOnDragEnd}>
+      <Droppable droppableId="container">
+        {(provided) => (
+          <section
+            className="w-full flex flex-col bg-gray-200"
+            {...provided.droppableProps}
+            ref={provided.innerRef}
+            id="container"
           >
-            <CircleInCircle
-              parentClassName={"bg-secondary w-3 h-3 "}
-              childClassName={false}
-            />
-            <h2 className="flex-1 mr-5 text-sm">{item.title}</h2>
-            {vod && (
-              <div className="flex flex-row items-center ml-5 ">
-                <p className="text-xs">
-                  دقیقه:
-                  <span>{item.min}</span>
-                </p>
-                <div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
-                <p className="text-xs">
-                  ویدیو:
-                  <span>{item.video}</span>
-                </p>
-              </div>
-            )}
-            <img
-              src={
-                activeAccordion === item
-                  ? `images/accordion-.svg`
-                  : `images/accordion+.svg`
-              }
-              alt=""
-              class="w-3 ml-2"
-            />
-          </div>
-          {/* child */}
-          {activeAccordion === item &&
-            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">
-                  {vod === !true && (
-                    <img
-                      src="images/accordionGroup2725.svg"
-                      className="w-3"
-                      alt="line"
-                    />
-                  )}
-                  <span className={`text-sm ${vod === true ? "mr-0" : "mr-3"}`}>
-                    {i + 1}
-                  </span>
-                </div>
-                <div className="w-0.5 h-5 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">
-                  {vod ? (
-                    <>
-                      <div className="flex flex-row items-center ml-7">
-                        <p className="text-xs">
-                          دقیقه:
-                          <span>{item.min}</span>
-                        </p>
-                        <Button
-                          className="px-2 py-1 text-primary text-sm border border-surfaceBorder rounded mr-4"
-                          text={"پخش"}
-                        />
-                      </div>
-                    </>
-                  ) : (
-                    <>
-                      <img
-                        src="images/accordionGroup2724.svg"
-                        className="w-8 rounded"
-                        alt="delete-button"
+            {items.map((item, index) => (
+              <Draggable
+                key={item.id}
+                draggableId={"e" + item.id}
+                index={index}
+              >
+                {(provided) => (
+                  <div
+                    className="flex flex-col"
+                    key={index}
+                    props={{
+                      ref: provided.innerRef,
+                      ...provided.draggableProps,
+                      ...provided.dragHandleProps,
+                    }}
+                    style={provided.draggableProps.style}
+                  >
+                    {/* parent */}
+                    <div
+                      className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
+                        activeAccordion === item
+                          ? "border-surfaceBorder "
+                          : "border-secondary"
+                      } cursor-pointer`}
+                      onClick={() =>
+                        setActiveAccordion(
+                          activeAccordion === item ? null : item
+                        )
+                      }
+                    >
+                      <CircleInCircle
+                        parentClassName={"bg-secondary w-3 h-3 "}
+                        childClassName={false}
                       />
+                      <h2 className="flex-1 mr-5 text-sm">{item.title}</h2>
+                      {vod && (
+                        <div className="flex flex-row items-center ml-5 ">
+                          <p className="text-xs">
+                            دقیقه:
+                            <span>{item.min}</span>
+                          </p>
+                          <div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
+                          <p className="text-xs">
+                            ویدیو:
+                            <span>{item.video}</span>
+                          </p>
+                        </div>
+                      )}
                       <img
-                        src="images/accordionGroup2723.svg"
-                        className="w-8 rounded"
-                        alt="edit-button"
+                        src={
+                          activeAccordion === item
+                            ? `images/accordion-.svg`
+                            : `images/accordion+.svg`
+                        }
+                        alt=""
+                        class="w-3 ml-2"
                       />
-                    </>
-                  )}
-                </div>
-              </div>
+                    </div>
+                    {/* child */}
+                    {activeAccordion === item &&
+                      item.subItems.map((subItem, i) => (
+                        <div className="flex flex-row items-center justify-between p-3 border-b-2 border-surfaceBorder cursor-pointer transition-all duration-500 ease-in-out">
+                          <div className="flex flex-row items-center">
+                            {vod === !true && (
+                              <img
+                                src="images/accordionGroup2725.svg"
+                                className="w-3"
+                                alt="line"
+                              />
+                            )}
+                            <span
+                              className={`text-sm ${
+                                vod === true ? "mr-0" : "mr-3"
+                              }`}
+                            >
+                              {i + 1}
+                            </span>
+                          </div>
+                          <div className="w-0.5 h-5 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">
+                            {vod ? (
+                              <>
+                                <div className="flex flex-row items-center ml-7">
+                                  <p className="text-xs">
+                                    دقیقه:
+                                    <span>{item.min}</span>
+                                  </p>
+                                  <Button
+                                    className="px-2 py-1 text-primary text-sm border border-surfaceBorder rounded mr-4"
+                                    text={"پخش"}
+                                  />
+                                </div>
+                              </>
+                            ) : (
+                              <>
+                                <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>
+                      ))}
+                    {provided.placeholder}
+                  </div>
+                )}
+              </Draggable>
             ))}
-        </div>
-      ))}
-    </section>
+          </section>
+        )}
+      </Droppable>
+    </DragDropContext>
   );
 };