diff --git a/src/components/Accordion/AccordionDesign1/index.js b/src/components/Accordion/AccordionDesign1/index.js
index 9fdd181..b10a830 100644
--- a/src/components/Accordion/AccordionDesign1/index.js
+++ b/src/components/Accordion/AccordionDesign1/index.js
@@ -18,135 +18,137 @@ const AccordionDesign1 = ({ courses, vod }) => {
   }
 
   return (
-    <DragDropContext onDragEnd={handleOnDragEnd}>
-      <Droppable droppableId="accordions">
-        {(provided) => (
-          <section
-            className="w-full flex flex-col bg-gray-200"
-            {...provided.droppableProps}
-            ref={provided.innerRef}
-            id="accordions"
-          >
-            {courses.map((course, index) => (
-              <Draggable
-                key={course.id}
-                draggableId={"e" + course.id}
-                index={index}
-              >
-                {(provided) => (
-                  <div
-                    className="flex flex-col"
-                    key={index}
-                    props={{
-                      ref: provided.innerRef,
-                      ...provided.draggableProps,
-                      ...provided.dragHandleProps,
-                    }}
-                    style={provided.draggableProps.style}
-                  >
-                    {/* parent */}
+    <>
+      <DragDropContext onDragEnd={handleOnDragEnd}>
+        <Droppable droppableId="accordions">
+          {(provided) => (
+            <section
+              className="w-full flex flex-col bg-gray-200"
+              {...provided.droppableProps}
+              ref={provided.innerRef}
+              id="accordions"
+            >
+              {courses.map((course, index) => (
+                <Draggable
+                  key={course.id}
+                  draggableId={"e" + course.id}
+                  index={index}
+                >
+                  {(provided) => (
                     <div
-                      className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
-                        activeAccordion === course
-                          ? "border-surfaceBorder "
-                          : "border-secondary"
-                      } cursor-pointer`}
-                      onClick={() =>
-                        setActiveAccordion(
-                          activeAccordion === course ? null : course
-                        )
-                      }
+                      className="flex flex-col"
+                      key={index}
+                      props={{
+                        ref: provided.innerRef,
+                        ...provided.draggableProps,
+                        ...provided.dragHandleProps,
+                      }}
+                      style={provided.draggableProps.style}
                     >
-                      <CircleInCircle
-                        parentClassName={"bg-secondary w-4 h-4 "}
-                        childClassName={false}
-                      />
-                      <h2 className="flex-1 mr-5 text-sm">{course.title}</h2>
-                      {vod && (
-                        <div className="flex flex-row items-center ml-5 ">
-                          <p className="text-xs">
-                            دقیقه:
-                            <span>{course.min}</span>
-                          </p>
-                          <div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
-                          <p className="text-xs">
-                            ویدیو:
-                            <span>{course.video}</span>
-                          </p>
-                        </div>
-                      )}
-                      <img
-                        src={
+                      {/* parent */}
+                      <div
+                        className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
                           activeAccordion === course
-                            ? `images/accordion-.svg`
-                            : `images/accordion+.svg`
+                            ? "border-surfaceBorder "
+                            : "border-secondary"
+                        } cursor-pointer`}
+                        onClick={() =>
+                          setActiveAccordion(
+                            activeAccordion === course ? null : course
+                          )
                         }
-                        alt=""
-                        class="w-3 ml-2"
-                      />
-                    </div>
-                    {/* child */}
-                    {activeAccordion === course &&
-                      course.lessons.map((lesson, 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>
+                      >
+                        <CircleInCircle
+                          parentClassName={"bg-secondary w-4 h-4 "}
+                          childClassName={false}
+                        />
+                        <h2 className="flex-1 mr-5 text-sm">{course.title}</h2>
+                        {vod && (
+                          <div className="flex flex-row items-center ml-5 ">
+                            <p className="text-xs">
+                              دقیقه:
+                              <span>{course.min}</span>
+                            </p>
+                            <div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
+                            <p className="text-xs">
+                              ویدیو:
+                              <span>{course.video}</span>
+                            </p>
                           </div>
-                          <div className="w-0.5 h-5 mx-3 bg-surfaceBorder"></div>
-                          <p className="text-sm flex-1">{lesson.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>{course.min}</span>
-                                  </p>
-                                  <Button
-                                    className="px-2 py-1 text-primary text-sm border border-surfaceBorder rounded mr-4"
-                                    text={"پخش"}
-                                  />
-                                </div>
-                              </>
-                            ) : (
-                              <>
+                        )}
+                        <img
+                          src={
+                            activeAccordion === course
+                              ? `images/accordion-.svg`
+                              : `images/accordion+.svg`
+                          }
+                          alt=""
+                          class="w-3 ml-2"
+                        />
+                      </div>
+                      {/* child */}
+                      {activeAccordion === course &&
+                        course.lessons.map((lesson, 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/accordionGroup2724.svg"
-                                  className="w-8 rounded"
-                                  alt="delete-button"
+                                  src="images/accordionGroup2725.svg"
+                                  className="w-3"
+                                  alt="line"
                                 />
-                                <img
-                                  src="images/accordionGroup2723.svg"
-                                  className="w-8 rounded"
-                                  alt="edit-button"
-                                />
-                              </>
-                            )}
+                              )}
+                              <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">{lesson.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>{course.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>
-                        </div>
-                      ))}
-                    {provided.placeholder}
-                  </div>
-                )}
-              </Draggable>
-            ))}
-          </section>
-        )}
-      </Droppable>
-    </DragDropContext>
+                        ))}
+                      {provided.placeholder}
+                    </div>
+                  )}
+                </Draggable>
+              ))}
+            </section>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </>
   );
 };
 
@@ -209,3 +211,20 @@ AccordionDesign1.defaultProps = {
     },
   ],
 };
+
+{
+  /* monaco */
+}
+
+// import MonacoEditor from "react-monaco-editor";‍
+
+// <MonacoEditor
+//   width="800"
+//   height="600"
+//   language="javascript"
+//   theme="vs-dark"
+//   value={code}
+//   options={options}
+//   onChange={::this.onChange}
+//   editorDidMount={::this.editorDidMount}
+// />
diff --git a/src/components/Code/index.js b/src/components/Code/index.js
index c700b32..5d8394b 100644
--- a/src/components/Code/index.js
+++ b/src/components/Code/index.js
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import copyIcon from "./copy.png";
+import MonacoEditor from "react-monaco-editor";
 
 function Code({ code }) {
   const [copied, setCopied] = useState(false);
@@ -13,6 +14,7 @@ function Code({ code }) {
     /* Copy the text inside the text field */
     navigator.clipboard.writeText(copyText);
   };
+
   return (
     <div className="flex flex-col w-full my-10">
       <div className="w-full flex flex-row items-center justify-between">