diff --git a/public/images/CustomToastpen-icon.svg b/public/images/CustomToastpen-icon.svg
index 447dae8..a49016c 100644
--- a/public/images/CustomToastpen-icon.svg
+++ b/public/images/CustomToastpen-icon.svg
@@ -7,4 +7,4 @@
       <path id="Vector-4" data-name="Vector" d="M0,0H24V24H0Z" fill="none" opacity="0"/>
     </g>
   </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/DropDown/more2.svg b/public/images/DropDownmore2.svg
similarity index 100%
rename from src/components/DropDown/more2.svg
rename to public/images/DropDownmore2.svg
diff --git a/src/components/FileManager/images/arrow-left.svg b/public/images/FileManagerarrow-left.svg
similarity index 100%
rename from src/components/FileManager/images/arrow-left.svg
rename to public/images/FileManagerarrow-left.svg
diff --git a/src/components/FileManager/images/gray-search-icon.svg b/public/images/FileManagergray-search-icon.svg
similarity index 100%
rename from src/components/FileManager/images/gray-search-icon.svg
rename to public/images/FileManagergray-search-icon.svg
diff --git a/src/components/FileManager/images/plus.svg b/public/images/FileManagerplus.svg
similarity index 100%
rename from src/components/FileManager/images/plus.svg
rename to public/images/FileManagerplus.svg
diff --git a/src/components/Folderlist/images/folder-open.svg b/public/images/Folderlistfolder-open.svg
similarity index 100%
rename from src/components/Folderlist/images/folder-open.svg
rename to public/images/Folderlistfolder-open.svg
diff --git a/src/components/Folderlist/images/more.svg b/public/images/Folderlistmore.svg
similarity index 100%
rename from src/components/Folderlist/images/more.svg
rename to public/images/Folderlistmore.svg
diff --git a/src/components/Folderlist/images/profile-pic1.svg b/public/images/Folderlistprofile-pic1.svg
similarity index 100%
rename from src/components/Folderlist/images/profile-pic1.svg
rename to public/images/Folderlistprofile-pic1.svg
diff --git a/src/components/Folderlist/images/profile-pic2.svg b/public/images/Folderlistprofile-pic2.svg
similarity index 100%
rename from src/components/Folderlist/images/profile-pic2.svg
rename to public/images/Folderlistprofile-pic2.svg
diff --git a/src/components/Folderlist/images/profile-pic3.svg b/public/images/Folderlistprofile-pic3.svg
similarity index 100%
rename from src/components/Folderlist/images/profile-pic3.svg
rename to public/images/Folderlistprofile-pic3.svg
diff --git a/src/components/ProfilePicNextToEachOther/images/profilePic1.svg b/public/images/ProfilePicNextToEachOtherprofilePic1.svg
similarity index 100%
rename from src/components/ProfilePicNextToEachOther/images/profilePic1.svg
rename to public/images/ProfilePicNextToEachOtherprofilePic1.svg
diff --git a/src/components/ProfilePicNextToEachOther/images/profilePic2.svg b/public/images/ProfilePicNextToEachOtherprofilePic2.svg
similarity index 100%
rename from src/components/ProfilePicNextToEachOther/images/profilePic2.svg
rename to public/images/ProfilePicNextToEachOtherprofilePic2.svg
diff --git a/src/components/ProfilePicNextToEachOther/images/profilePic3.svg b/public/images/ProfilePicNextToEachOtherprofilePic3.svg
similarity index 100%
rename from src/components/ProfilePicNextToEachOther/images/profilePic3.svg
rename to public/images/ProfilePicNextToEachOtherprofilePic3.svg
diff --git a/src/components/ProfilePicNextToEachOther/images/profilePic4.svg b/public/images/ProfilePicNextToEachOtherprofilePic4.svg
similarity index 100%
rename from src/components/ProfilePicNextToEachOther/images/profilePic4.svg
rename to public/images/ProfilePicNextToEachOtherprofilePic4.svg
diff --git a/src/components/ProfilePicNextToEachOther/images/profilePic5.svg b/public/images/ProfilePicNextToEachOtherprofilePic5.svg
similarity index 100%
rename from src/components/ProfilePicNextToEachOther/images/profilePic5.svg
rename to public/images/ProfilePicNextToEachOtherprofilePic5.svg
diff --git a/src/components/SearchBox/search-normal.svg b/public/images/SearchBoxsearch-normal.svg
similarity index 100%
rename from src/components/SearchBox/search-normal.svg
rename to public/images/SearchBoxsearch-normal.svg
diff --git a/src/components/SearchBox/zarbedar-icon.svg b/public/images/SearchBoxzarbedar-icon.svg
similarity index 100%
rename from src/components/SearchBox/zarbedar-icon.svg
rename to public/images/SearchBoxzarbedar-icon.svg
diff --git a/src/components/CardDesgin/CardDesign3/index.js b/src/components/CardDesgin/CardDesign3/index.js
index dc4fe2d..72f4a17 100644
--- a/src/components/CardDesgin/CardDesign3/index.js
+++ b/src/components/CardDesgin/CardDesign3/index.js
@@ -2,11 +2,11 @@
 
 import React from "react";
 
-import CustomToast2 from "../../CustomToast2";
+import CustomToast2 from "../CustomToast2";
 
 import TitleSubtitle from "../../MiniComponents/TitleSubtitle";
 
-import SearchBox from "../../SearchBox";
+import SearchBox from "../../SearchDesign/SearchBox";
 
 const CardDesign3 = () => {
   return (
diff --git a/src/components/CardDesgin/CustomToast/index.js b/src/components/CardDesgin/CustomToast/index.js
index b8b1bd8..f08a05a 100644
--- a/src/components/CardDesgin/CustomToast/index.js
+++ b/src/components/CardDesgin/CustomToast/index.js
@@ -1,7 +1,5 @@
 import React from "react";
 
-import penIcon from "./pen-icon.svg";
-
 const CustomToast = ({ className, icon }) => {
   return (
     <div className={`flex flex-row items-center text-sm rounded ${className} `}>
@@ -16,5 +14,5 @@ export default CustomToast;
 CustomToast.defaultProps = {
   className:
     "p-4 bg-[#489BEC33] border-[#489BEC] text-[#0555A4] mt-4 border-2 font-sansbold",
-  icon: penIcon,
+  icon: "images/CustomToastpen-icon.svg",
 };
diff --git a/src/components/CardDesgin/CustomToast2/index.js b/src/components/CardDesgin/CustomToast2/index.js
index 4bc77f6..15fd0fd 100644
--- a/src/components/CardDesgin/CustomToast2/index.js
+++ b/src/components/CardDesgin/CustomToast2/index.js
@@ -1,12 +1,5 @@
 import React from "react";
 
-import profilePic1 from "./images/profilePic1.svg";
-import profilePic2 from "./images/profilePic2.svg";
-import profilePic3 from "./images/profilePic3.svg";
-import profilePic4 from "./images/profilePic4.svg";
-import profilePic5 from "./images/profilePic5.svg";
-import pen from "./pen.svg";
-
 const CustomToast2 = ({ items, num }) => {
   return (
     <>
@@ -39,7 +32,11 @@ const CustomToast2 = ({ items, num }) => {
             <span className="px-2 py-0.5 mr-2 rounded-sm bg-[#C9E2B388] text-[#468722] font-sansbold">
               {item.number}
             </span>
-            <img src={pen} alt="pen" className="mr-4 cursor-pointer" />
+            <img
+              src="images/CustomToastpen-icon.svg"
+              alt="pen"
+              className="mr-4 cursor-pointer"
+            />
           </div>
         </div>
       ))}
@@ -54,70 +51,77 @@ CustomToast2.defaultProps = {
 
   items: [
     {
-      profilePic: profilePic1,
+      profilePic: "images/CustomToast2profilePic1.svg",
       name: "کامبیز هوشنمند",
       enteryData: "1401/02/01",
       idCard: 2980817631,
       number: "B06",
     },
     {
-      profilePic: profilePic2,
+      profilePic: "images/CustomToast2profilePic2.svg",
       name: "پارسا ایرانی",
       enteryData: "1400/07/19",
       idCard: 7000817631,
       number: "B04",
     },
     {
-      profilePic: profilePic3,
+      profilePic: "images/CustomToast2profilePic3.svg",
       name: "کامران مرادی",
       enteryData: "1400/07/19",
       idCard: 2423817631,
       number: "B02",
     },
     {
-      profilePic: profilePic4,
+      profilePic: "images/CustomToast2profilePic4.svg",
       name: "محمد علوی",
       enteryData: "1400/07/19",
       idCard: 3340817631,
       number: "B01",
     },
     {
-      profilePic: profilePic5,
+      profilePic: "images/CustomToast2profilePic5.svg",
       name: "محمد محمدی",
       enteryData: "1400/07/19",
       idCard: 3110817631,
       number: "B07",
     },
     {
-      profilePic: profilePic1,
+      profilePic: "images/CustomToast2profilePic1.svg",
       name: "کامبیز هوشنمند",
       enteryData: "1401/02/01",
       idCard: 2980817631,
       number: "B06",
     },
     {
-      profilePic: profilePic2,
+      profilePic: "images/CustomToast2profilePic2.svg",
       name: "پارسا ایرانی",
       enteryData: "1400/07/19",
       idCard: 7000817631,
       number: "B04",
     },
     {
-      profilePic: profilePic3,
+      profilePic: "images/CustomToast2profilePic3.svg",
       name: "کامران مرادی",
       enteryData: "1400/07/19",
       idCard: 2423817631,
       number: "B02",
     },
     {
-      profilePic: profilePic4,
+      profilePic: "images/CustomToast2profilePic4.svg",
       name: "محمد علوی",
       enteryData: "1400/07/19",
       idCard: 3340817631,
       number: "B01",
     },
     {
-      profilePic: profilePic5,
+      profilePic: "images/CustomToast2profilePic5.svg",
+      name: "محمد محمدی",
+      enteryData: "1400/07/19",
+      idCard: 3110817631,
+      number: "B07",
+    },
+    {
+      profilePic: "images/CustomToast2profilePic5.svg",
       name: "محمد محمدی",
       enteryData: "1400/07/19",
       idCard: 3110817631,
@@ -125,19 +129,3 @@ CustomToast2.defaultProps = {
     },
   ],
 };
-
-// #BCBCBC
-
-// #B9D1F3
-
-// #2483E1
-
-// #C9E2B3
-
-// #0F0543
-
-// #2A527A
-
-// #468722
-
-// #DAF6E5
diff --git a/src/components/CardDesgin/index.js b/src/components/CardDesgin/index.js
index 887751a..9739c06 100644
--- a/src/components/CardDesgin/index.js
+++ b/src/components/CardDesgin/index.js
@@ -5,6 +5,8 @@ import ProcessCard from "./ProcessCard";
 import CardDesign1 from "./CardDesign1";
 import CardDesign2 from "./CardDesign2";
 import CardDesign3 from "./CardDesign3";
+import CustomToast from "./CustomToast";
+import CustomToast2 from "./CustomToast2";
 
 function CardDesgin() {
   const list = {
@@ -13,6 +15,8 @@ function CardDesgin() {
     3: <CardDesign1 />,
     4: <CardDesign2 />,
     5: <CardDesign3 />,
+    5: <CustomToast />,
+    5: <CustomToast2 />,
   };
   const [type, setType] = useState(1);
   return (
diff --git a/src/components/DateTime/index.js b/src/components/CurrentDateTime/DateTime/index.js
similarity index 93%
rename from src/components/DateTime/index.js
rename to src/components/CurrentDateTime/DateTime/index.js
index d6712e5..16d40b7 100644
--- a/src/components/DateTime/index.js
+++ b/src/components/CurrentDateTime/DateTime/index.js
@@ -1,7 +1,7 @@
 import React from "react";
 import CurrentDateShamsi from "../CurrentDateShamsi";
 import CurrentTime from "../CurrentTime";
-import ProfileInfo from "../ProfileInfo";
+import ProfileInfo from "../../ProfileInfo";
 
 const DateTime = () => {
   return (
diff --git a/src/components/CurrentDateTime/index.js b/src/components/CurrentDateTime/index.js
index cf86b7d..4a26595 100644
--- a/src/components/CurrentDateTime/index.js
+++ b/src/components/CurrentDateTime/index.js
@@ -2,11 +2,13 @@ import React, { useState } from "react";
 
 import CurrentDateShamsi from "./CurrentDateShamsi";
 import CurrentTime from "./CurrentTime";
+import DateTime from "./DateTime";
 
 function CurrentDateTime() {
   const list = {
     1: <CurrentDateShamsi />,
     2: <CurrentTime />,
+    3: <DateTime />,
   };
   const [type, setType] = useState(1);
 
diff --git a/src/components/FileManager/index.js b/src/components/FileManager/index.js
index 3bb7099..187680e 100644
--- a/src/components/FileManager/index.js
+++ b/src/components/FileManager/index.js
@@ -1,22 +1,16 @@
 import React from "react";
 
-import "./index.scss";
-
-import BreadCrumb from "../BreadCrumb";
-import SearchBox from "../SearchBox";
-import TitleSubtitle from "../TitleSubtitle";
-import CardHolder from "../CardHolder";
-import ButtonNewDesign from "../ButtonNewDesign";
+import BreadCrumb from "../MiniComponents/BreadCrumb";
+import SearchBox from "../SearchDesign/SearchBox";
+import TitleSubtitle from "../MiniComponents/TitleSubtitle";
+import CardHolder from "../CardDesgin/CardHolder";
+import Button from "../ButtonDesign/Button";
 import Playlist from "../Playlist";
 import Folderlists from "../Folderlist";
 import UploadFile from "../UploadFile";
 
-import graySearchIcon from "./images/gray-search-icon.svg";
-import arrowLeft from "./images/arrow-left.svg";
-
 import BasicTable from "../ReactTable4/index";
 import SemiDonut from "../SemiDonut";
-import Button from "../Button";
 
 const FileManager = ({ buttons }) => {
   return (
@@ -38,7 +32,7 @@ const FileManager = ({ buttons }) => {
                 className={
                   "border-[#EEEEEE] focus:border-gray-200 focus:ring-gray-200 placeholder-gray-300"
                 }
-                searchIcon={graySearchIcon}
+                searchIcon="images/FileManagergray-search-icon.svg"
               />
             </div>
           </div>
@@ -60,7 +54,7 @@ const FileManager = ({ buttons }) => {
                     className={`${btn.className} text-xs rounded p-2`}
                     iconClassName={`bg-transparent mr-1`}
                     text={btn.name}
-                    icon={arrowLeft}
+                    icon="images/FileManagerarrow-left.svg"
                   />
                 ))}
               </div>
diff --git a/src/components/FileManager/index.scss b/src/components/FileManager/index.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/Folderlist/index.js b/src/components/Folderlist/index.js
index 24e751c..eadd882 100644
--- a/src/components/Folderlist/index.js
+++ b/src/components/Folderlist/index.js
@@ -2,13 +2,8 @@
 
 import React from "react";
 
-import "./index.scss";
-
-// ? images
-import folder from "./images/folder-open.svg";
-import more from "./images/more.svg";
 import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
-import DropDown from "../DropDown";
+import DropDown from "../MiniComponents/DropDown";
 
 const Folderlists = ({ items }) => {
   return (
@@ -90,67 +85,67 @@ export default Folderlists;
 Folderlists.defaultProps = {
   items: [
     {
-      icon: folder,
+      icon: "images/Folderlistfolder-open.svg",
       title: "پوشه فایل‌های متفرقه آزمون 1400",
       memory: 44,
       fileNum: 344,
-      dropDownIcon: more,
+      dropDownIcon: "images/Folderlistmore.svg",
       num: 4,
     },
     {
-      icon: folder,
+      icon: "images/Folderlistfolder-open.svg",
       title: "پوشه فایل‌های متفرقه آزمون 1400",
       memory: 44,
       fileNum: 344,
-      dropDownIcon: more,
+      dropDownIcon: "images/Folderlistmore.svg",
       num: 2,
     },
     {
-      icon: folder,
+      icon: "images/Folderlistfolder-open.svg",
       title: "پوشه فایل‌های متفرقه آزمون 1400",
       memory: 44,
       fileNum: 344,
-      dropDownIcon: more,
+      dropDownIcon: "images/Folderlistmore.svg",
       num: 3,
     },
     {
-      icon: folder,
+      icon: "images/Folderlistfolder-open.svg",
       title: "پوشه فایل‌های متفرقه آزمون 1400",
       memory: 44,
       fileNum: 344,
-      dropDownIcon: more,
+      dropDownIcon: "images/Folderlistmore.svg",
       num: 1,
     },
     {
-      icon: folder,
+      icon: "images/Folderlistfolder-open.svg",
       title: "پوشه فایل‌های متفرقه آزمون 1400",
       memory: 44,
       fileNum: 344,
-      dropDownIcon: more,
+      dropDownIcon: "images/Folderlistmore.svg",
       num: 5,
     },
     {
-      icon: folder,
+      icon: "images/Folderlistfolder-open.svg",
       title: "پوشه فایل‌های متفرقه آزمون 1400",
       memory: 44,
       fileNum: 344,
-      dropDownIcon: more,
+      dropDownIcon: "images/Folderlistmore.svg",
       num: 2,
     },
     {
-      icon: folder,
+      icon: "images/Folderlistfolder-open.svg",
       title: "پوشه فایل‌های متفرقه آزمون 1400",
       memory: 44,
       fileNum: 344,
-      dropDownIcon: more,
+      dropDownIcon: "images/Folderlistmore.svg",
       num: 1,
     },
     {
-      icon: folder,
+      icon: "images/Folderlistfolder-open.svg",
       title: "پوشه فایل‌های متفرقه آزمون 1400",
       memory: 44,
       fileNum: 344,
-      dropDownIcon: more,
+      dropDownIcon: "images/Folderlistmore.svg",
       num: 3,
     },
   ],
diff --git a/src/components/Folderlist/index.scss b/src/components/Folderlist/index.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/DropDown/index.js b/src/components/MiniComponents/DropDown/index.js
similarity index 90%
rename from src/components/DropDown/index.js
rename to src/components/MiniComponents/DropDown/index.js
index d738067..0f9df79 100644
--- a/src/components/DropDown/index.js
+++ b/src/components/MiniComponents/DropDown/index.js
@@ -1,7 +1,5 @@
 import React from "react";
 
-import more from "./more2.svg";
-
 export const DropDown = ({}) => {
   return (
     <div className="mr-3">
@@ -11,7 +9,11 @@ export const DropDown = ({}) => {
         data-dropdown-toggle="dropdown"
         type="button"
       >
-        <img src={more} alt="" className={`cursor-pointer w-5`} />
+        <img
+          src="images/DropDownmore2.svg"
+          alt=""
+          className={`cursor-pointer w-5`}
+        />
       </button>
       <div
         style={{ backgroundColor: "#65A9FF" }}
diff --git a/src/components/MiniComponents/index.js b/src/components/MiniComponents/index.js
index 61de5a7..222a581 100644
--- a/src/components/MiniComponents/index.js
+++ b/src/components/MiniComponents/index.js
@@ -8,6 +8,7 @@ import BookDesign from "./BookDesign";
 import BreadCrumb from "./BreadCrumb";
 import CancleIcon from "./CancleIcon";
 import CircleInCircle from "./CircleInCircle";
+import DropDown from "./DropDown";
 
 function MiniComponents() {
   const list = {
@@ -19,6 +20,7 @@ function MiniComponents() {
     6: <BreadCrumb />,
     7: <CancleIcon />,
     7: <CircleInCircle />,
+    8: <DropDown />,
   };
   const [type, setType] = useState(1);
 
diff --git a/src/components/SearchBox/index.js b/src/components/SearchDesign/SearchBox/index.js
similarity index 90%
rename from src/components/SearchBox/index.js
rename to src/components/SearchDesign/SearchBox/index.js
index 8534142..3ff2a1b 100644
--- a/src/components/SearchBox/index.js
+++ b/src/components/SearchDesign/SearchBox/index.js
@@ -1,8 +1,5 @@
 import React, { useState } from "react";
 
-import search from "./search-normal.svg";
-import zarbedar from "./zarbedar-icon.svg";
-
 const SearchBox = ({
   cancleIcon,
   searchIcon,
@@ -45,8 +42,8 @@ const SearchBox = ({
 export default SearchBox;
 
 SearchBox.defaultProps = {
-  cancleIcon: zarbedar,
-  searchIcon: search,
+  cancleIcon: "images/SearchBoxzarbedar-icon.svg",
+  searchIcon: "images/SearchBoxsearch-normal.svg",
 
   placeholder: "دنبال چه چیزی هستید",
 
diff --git a/src/components/Sidebar/SidebarDesign2/index.js b/src/components/Sidebar/SidebarDesign2/index.js
index d2ef6a8..f8ba488 100644
--- a/src/components/Sidebar/SidebarDesign2/index.js
+++ b/src/components/Sidebar/SidebarDesign2/index.js
@@ -1,7 +1,7 @@
 // it has style inside index.scss ---> // Start Sidebar/SidebarDesign2 && end Sidebar/SidebarDesign2
 
 import React, { useState } from "react";
-import SearchBox from "../../SearchBox";
+import SearchBox from "../../SearchDesign/SearchBox";
 
 const SidebarMenu = ({ items, buttons, username, userJob, className }) => {
   const [activeDropdown, setActiveDropdown] = useState(null);
diff --git a/src/redux/data.js b/src/redux/data.js
index 17e14f2..ad7dbf8 100644
--- a/src/redux/data.js
+++ b/src/redux/data.js
@@ -40,6 +40,9 @@ import AnimatedInput from "../components/AnimatedInput/Input";
 import BoxNextToEachOther from "../components/BoxNextToEachOther";
 import ContactUs from "../components/ContactUs";
 import CurrentDateTime from "../components/CurrentDateTime";
+import Digikala from "../components/Digikala";
+import DistributedData from "../components/DistributedData";
+import FileManager from "../components/FileManager";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -753,6 +756,36 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Digikala",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Digikala",
+      component: <Digikala />,
+      code: null,
+    },
+  },
+  {
+    name: "DistributedData",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "DistributedData",
+      component: <DistributedData />,
+      code: null,
+    },
+  },
+  {
+    name: "File Manager",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "File Manager",
+      component: <FileManager />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",