diff --git a/src/components/CardDesign3/index.js b/src/components/CardDesign3/index.js
index ed287c0..8c20322 100644
--- a/src/components/CardDesign3/index.js
+++ b/src/components/CardDesign3/index.js
@@ -1,108 +1,21 @@
 import React from "react";
+import CustomToast2 from "../CustomToast2";
+import TitleSubtitle from "../TitleSubtitle";
 
-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 CardDesign3 = ({ items, num }) => {
+const CardDesign3 = () => {
   return (
-    <>
-      {items.slice(0, num).map((item, index) => (
-        <div
-          key={index}
-          className="flex flex-row items-center p-4 bg-[#F8F8F8] border border-[#BCBCBC] rounded mt-7"
-        >
-          {/* right */}
-          <div className="flex flex-row items-center flex-1 ">
-            <img
-              src={item.profilePic}
-              className="rounded-full w-16"
-              alt={item.profilePic}
-            />
-            <div className="flex flex-col mr-2">
-              <p className="text-sm text-[#0F0543]">{item.name}</p>
-              <p className="text-xs mt-1.5 mb-1 text-[#2A527A]">
-                <span className="ml-1">تاریخ ورود:</span>
-                {item.enteryData}
-              </p>
-              <p className="text-xs text-[#2A527A]">
-                <span>کد ملی</span>
-                {item.idCard}
-              </p>
-            </div>
-          </div>
-          {/* left */}
-          <div className="flex flex-row items-center">
-            <span className="px-2 py-0.5 rounded-sm bg-[#C9E2B388] text-[#468722] font-bold">
-              {item.number}
-            </span>
-            <img src={pen} alt="pen" className="mr-4 cursor-pointer" />
-          </div>
-        </div>
-      ))}
-    </>
+    <div className="flex flex-col bg-white shadow-sm rounded max-w-[440px] mr-20 my-20 p-4">
+      <TitleSubtitle
+        subTitle={false}
+        title={"طبقه سوم"}
+        titleColor={"text-[#0F0543]"}
+        titleFontWeight={"font-bold"}
+        titleDividerBgColor={"bg-[#1FF87D]"}
+        titleDividerWidth={"w-1.5"}
+      />
+      <CustomToast2 num={4} />
+    </div>
   );
 };
 
 export default CardDesign3;
-
-CardDesign3.defaultProps = {
-  num: 5,
-
-  items: [
-    {
-      profilePic: profilePic1,
-      name: "کامبیز هوشنمند",
-      enteryData: "1401/02/01",
-      idCard: 2980817631,
-      number: "B06",
-    },
-    {
-      profilePic: profilePic2,
-      name: "پارسا ایرانی",
-      enteryData: "1400/07/19",
-      idCard: 7000817631,
-      number: "B04",
-    },
-    {
-      profilePic: profilePic3,
-      name: "کامران مرادی",
-      enteryData: "1400/07/19",
-      idCard: 2423817631,
-      number: "B02",
-    },
-    {
-      profilePic: profilePic4,
-      name: "محمد علوی",
-      enteryData: "1400/07/19",
-      idCard: 3340817631,
-      number: "B01",
-    },
-    {
-      profilePic: profilePic5,
-      name: "محمد محمدی",
-      enteryData: "1400/07/19",
-      idCard: 3110817631,
-      number: "B07",
-    },
-  ],
-};
-
-// #BCBCBC
-
-// #B9D1F3
-
-// #2483E1
-
-// #C9E2B3
-
-// #0F0543
-
-// #2A527A
-
-// #468722
-
-// #DAF6E5
diff --git a/src/components/CardDesign3/images/profilePic1.svg b/src/components/CustomToast2/images/profilePic1.svg
similarity index 100%
rename from src/components/CardDesign3/images/profilePic1.svg
rename to src/components/CustomToast2/images/profilePic1.svg
diff --git a/src/components/CardDesign3/images/profilePic2.svg b/src/components/CustomToast2/images/profilePic2.svg
similarity index 100%
rename from src/components/CardDesign3/images/profilePic2.svg
rename to src/components/CustomToast2/images/profilePic2.svg
diff --git a/src/components/CardDesign3/images/profilePic3.svg b/src/components/CustomToast2/images/profilePic3.svg
similarity index 100%
rename from src/components/CardDesign3/images/profilePic3.svg
rename to src/components/CustomToast2/images/profilePic3.svg
diff --git a/src/components/CardDesign3/images/profilePic4.svg b/src/components/CustomToast2/images/profilePic4.svg
similarity index 100%
rename from src/components/CardDesign3/images/profilePic4.svg
rename to src/components/CustomToast2/images/profilePic4.svg
diff --git a/src/components/CardDesign3/images/profilePic5.svg b/src/components/CustomToast2/images/profilePic5.svg
similarity index 100%
rename from src/components/CardDesign3/images/profilePic5.svg
rename to src/components/CustomToast2/images/profilePic5.svg
diff --git a/src/components/CustomToast2/index.js b/src/components/CustomToast2/index.js
new file mode 100644
index 0000000..128de44
--- /dev/null
+++ b/src/components/CustomToast2/index.js
@@ -0,0 +1,108 @@
+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 (
+    <>
+      {items.slice(0, num).map((item, index) => (
+        <div
+          key={index}
+          className="flex flex-row items-center p-4 bg-[#F8F8F8] border border-[#BCBCBC] rounded mt-7"
+        >
+          {/* right */}
+          <div className="flex flex-row items-center flex-1 ">
+            <img
+              src={item.profilePic}
+              className="rounded-full w-16"
+              alt={item.profilePic}
+            />
+            <div className="flex flex-col mr-2">
+              <p className="text-sm text-[#0F0543]">{item.name}</p>
+              <p className="text-xs mt-1.5 mb-1 text-[#2A527A]">
+                <span className="ml-1">تاریخ ورود:</span>
+                {item.enteryData}
+              </p>
+              <p className="text-xs text-[#2A527A]">
+                <span>کد ملی</span>
+                {item.idCard}
+              </p>
+            </div>
+          </div>
+          {/* left */}
+          <div className="flex flex-row items-center">
+            <span className="px-2 py-0.5 rounded-sm bg-[#C9E2B388] text-[#468722] font-bold">
+              {item.number}
+            </span>
+            <img src={pen} alt="pen" className="mr-4 cursor-pointer" />
+          </div>
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default CustomToast2;
+
+CustomToast2.defaultProps = {
+  num: 5,
+
+  items: [
+    {
+      profilePic: profilePic1,
+      name: "کامبیز هوشنمند",
+      enteryData: "1401/02/01",
+      idCard: 2980817631,
+      number: "B06",
+    },
+    {
+      profilePic: profilePic2,
+      name: "پارسا ایرانی",
+      enteryData: "1400/07/19",
+      idCard: 7000817631,
+      number: "B04",
+    },
+    {
+      profilePic: profilePic3,
+      name: "کامران مرادی",
+      enteryData: "1400/07/19",
+      idCard: 2423817631,
+      number: "B02",
+    },
+    {
+      profilePic: profilePic4,
+      name: "محمد علوی",
+      enteryData: "1400/07/19",
+      idCard: 3340817631,
+      number: "B01",
+    },
+    {
+      profilePic: profilePic5,
+      name: "محمد محمدی",
+      enteryData: "1400/07/19",
+      idCard: 3110817631,
+      number: "B07",
+    },
+  ],
+};
+
+// #BCBCBC
+
+// #B9D1F3
+
+// #2483E1
+
+// #C9E2B3
+
+// #0F0543
+
+// #2A527A
+
+// #468722
+
+// #DAF6E5
diff --git a/src/components/CardDesign3/pen.svg b/src/components/CustomToast2/pen.svg
similarity index 100%
rename from src/components/CardDesign3/pen.svg
rename to src/components/CustomToast2/pen.svg