diff --git a/src/components/PopupCard/calender.svg b/public/images/PopupCardcalender.svg
similarity index 100%
rename from src/components/PopupCard/calender.svg
rename to public/images/PopupCardcalender.svg
diff --git a/src/components/PopupCard/cancle-icon.svg b/public/images/PopupCardcancle-icon.svg
similarity index 100%
rename from src/components/PopupCard/cancle-icon.svg
rename to public/images/PopupCardcancle-icon.svg
diff --git a/src/components/PopupCard/document-cloud.svg b/public/images/PopupCarddocument-cloud.svg
similarity index 100%
rename from src/components/PopupCard/document-cloud.svg
rename to public/images/PopupCarddocument-cloud.svg
diff --git a/src/components/PopupCard/plus.svg b/public/images/PopupCardplus.svg
similarity index 100%
rename from src/components/PopupCard/plus.svg
rename to public/images/PopupCardplus.svg
diff --git a/src/components/PopupCard/index.js b/src/components/CardDesgin/PopupCard/index.js
similarity index 93%
rename from src/components/PopupCard/index.js
rename to src/components/CardDesgin/PopupCard/index.js
index 87c3dd2..900b898 100644
--- a/src/components/PopupCard/index.js
+++ b/src/components/CardDesgin/PopupCard/index.js
@@ -3,18 +3,11 @@
 import React, { useState } from "react";
 import { useForm } from "react-hook-form";
 
-import Input from "../AnimatedInput/Input";
-import CancleIcon from "../CancleIcon";
-import Button from "../Button";
-import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
-import TitleSubtitle from "../TitleSubtitle";
-
-import calender from "./calender.svg";
-import cancleIcon from "./cancle-icon.svg";
-
-import documentCloud from "./document-cloud.svg";
-
-import plus from "./plus.svg";
+import Input from "../../AnimatedInput/Input";
+import CancleIcon from "../../MiniComponents/CancleIcon";
+import Button from "../../ButtonDesign/Button";
+import ProfilePicNextToEachOther from "../../ProfilePicNextToEachOther";
+import TitleSubtitle from "../../MiniComponents/TitleSubtitle";
 
 const PopupCard = ({ selectedChecklist, buttons }) => {
   // const [activeInput, setActiveInput] = useState(false);
@@ -42,7 +35,10 @@ const PopupCard = ({ selectedChecklist, buttons }) => {
           <div className="max-w-[920px] mx-auto relative bg-white rounded-lg shadow dark:bg-gray-700">
             {/* cancle icon */}
             <div className="flex justify-between items-start p-5 rounded-t">
-              <CancleIcon backgroundColor={"bg-[#F8F8F8]"} icon={cancleIcon} />
+              <CancleIcon
+                backgroundColor={"bg-[#F8F8F8]"}
+                icon="images/PopupCardcancle-icon.svg"
+              />
             </div>
             {/* modalBody */}
             <div className="mx-5">
@@ -65,7 +61,7 @@ const PopupCard = ({ selectedChecklist, buttons }) => {
                     register={register("firstName")}
                     label="تقویم"
                     type="text"
-                    icon={calender}
+                    icon={"images/PopupCardcalender.svg"}
                     borderClassname={`border-2 border-[#06BACE] `}
                     inputClassname={`px-4 py-2 text-[#0F0543] focus:bg-white`}
                     activePlaceholderClass={"text-[#06BACE] bg-white"}
@@ -178,7 +174,7 @@ const PopupCard = ({ selectedChecklist, buttons }) => {
                     subtitleClassName={"text-[#B3B3B3]"}
                   />
                   <div className="mt-3 relative flex flex-row items-center justify-around border-2 border-dashed border-[#65A9FF] w-full p-4 rounded-md">
-                    <img src={documentCloud} alt="" />
+                    <img src="images/PopupCarddocument-cloud.svg" alt="" />
                     <input
                       type="file"
                       className="opacity-0 absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full h-full cursor-pointer"
@@ -232,7 +228,7 @@ PopupCard.defaultProps = {
     {
       name: null,
       className: "bg-[#dddddd]",
-      icon: calender,
+      icon: "images/PopupCardcalender.svg",
     },
   ],
 };
diff --git a/src/components/CardDesgin/index.js b/src/components/CardDesgin/index.js
index 9739c06..30f034a 100644
--- a/src/components/CardDesgin/index.js
+++ b/src/components/CardDesgin/index.js
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 
 import CardTrelloDesign from "./CardTrelloDesign";
+import PopupCard from "./PopupCard";
 import ProcessCard from "./ProcessCard";
 import CardDesign1 from "./CardDesign1";
 import CardDesign2 from "./CardDesign2";
@@ -11,12 +12,13 @@ import CustomToast2 from "./CustomToast2";
 function CardDesgin() {
   const list = {
     1: <CardTrelloDesign />,
-    2: <ProcessCard />,
-    3: <CardDesign1 />,
-    4: <CardDesign2 />,
-    5: <CardDesign3 />,
-    5: <CustomToast />,
-    5: <CustomToast2 />,
+    2: <PopupCard />,
+    3: <ProcessCard />,
+    4: <CardDesign1 />,
+    5: <CardDesign2 />,
+    6: <CardDesign3 />,
+    7: <CustomToast />,
+    8: <CustomToast2 />,
   };
   const [type, setType] = useState(1);
   return (
diff --git a/src/components/PopupCard/index.scss b/src/components/PopupCard/index.scss
deleted file mode 100644
index e69de29..0000000