diff --git a/src/components/CustomToast2/pen.svg b/public/images/CustomToast2CustomToast2pen.svg
similarity index 100%
rename from src/components/CustomToast2/pen.svg
rename to public/images/CustomToast2CustomToast2pen.svg
diff --git a/src/components/CustomToast2/images/profilePic1.svg b/public/images/CustomToast2profilePic1.svg
similarity index 100%
rename from src/components/CustomToast2/images/profilePic1.svg
rename to public/images/CustomToast2profilePic1.svg
diff --git a/src/components/CustomToast2/images/profilePic2.svg b/public/images/CustomToast2profilePic2.svg
similarity index 100%
rename from src/components/CustomToast2/images/profilePic2.svg
rename to public/images/CustomToast2profilePic2.svg
diff --git a/src/components/CustomToast2/images/profilePic3.svg b/public/images/CustomToast2profilePic3.svg
similarity index 100%
rename from src/components/CustomToast2/images/profilePic3.svg
rename to public/images/CustomToast2profilePic3.svg
diff --git a/src/components/CustomToast2/images/profilePic4.svg b/public/images/CustomToast2profilePic4.svg
similarity index 100%
rename from src/components/CustomToast2/images/profilePic4.svg
rename to public/images/CustomToast2profilePic4.svg
diff --git a/src/components/CustomToast2/images/profilePic5.svg b/public/images/CustomToast2profilePic5.svg
similarity index 100%
rename from src/components/CustomToast2/images/profilePic5.svg
rename to public/images/CustomToast2profilePic5.svg
diff --git a/src/components/CustomToast/pen-icon.svg b/public/images/CustomToastpen-icon.svg
similarity index 99%
rename from src/components/CustomToast/pen-icon.svg
rename to public/images/CustomToastpen-icon.svg
index a49016c..447dae8 100644
--- a/src/components/CustomToast/pen-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>
+</svg>
\ No newline at end of file
diff --git a/src/components/CardDesgin/CardDesign1/index.js b/src/components/CardDesgin/CardDesign1/index.js
index fc2da84..391d8b2 100644
--- a/src/components/CardDesgin/CardDesign1/index.js
+++ b/src/components/CardDesgin/CardDesign1/index.js
@@ -1,5 +1,5 @@
 import React from "react";
-import CustomToast from "../../CustomToast";
+import CustomToast from "../CustomToast";
 import IconText from "../../IconText";
 import TitleSubtitle from "../../MiniComponents/TitleSubtitle";
 
diff --git a/src/components/CustomToast/index.js b/src/components/CardDesgin/CustomToast/index.js
similarity index 100%
rename from src/components/CustomToast/index.js
rename to src/components/CardDesgin/CustomToast/index.js
diff --git a/src/components/CustomToast2/index.js b/src/components/CardDesgin/CustomToast2/index.js
similarity index 100%
rename from src/components/CustomToast2/index.js
rename to src/components/CardDesgin/CustomToast2/index.js
diff --git a/src/components/ContactUs/ContactInfoSectioin/index.js b/src/components/ContactUs/ContactInfoSectioin/index.js
index b405b2c..074c760 100644
--- a/src/components/ContactUs/ContactInfoSectioin/index.js
+++ b/src/components/ContactUs/ContactInfoSectioin/index.js
@@ -2,41 +2,32 @@
 
 import React from "react";
 
-import customerSupport from "images/customer-support.png";
-import lightGreenLine from "images/light-green-line.svg";
-
 const ContactInfoSectioin = ({
-  contactInfoSectionBgColor,
+  className,
   dayNumTextColor,
   contentTextColor,
 }) => {
   return (
     <section
-      className={`relative flex flex-col sm:flex-row items-center justify-center p-4 ${contactInfoSectionBgColor}`}
+      className={`relative flex flex-row items-center justify-center p-4 rounded ${className}`}
     >
       {/* line */}
-      <img
-        src="images/light-blue-line.svg"
-        alt=""
-        className="hidden sm:block absolute right-72"
-      />
+      <img src="images/light-blue-line.svg" alt="" className="" />
       {/* middle content */}
       <img
-        src={customerSupport}
+        src="images/customer-support.png"
         alt=""
         className="w-14 cursor-pointer customer-support animate-bounce"
       />
-      <p
-        className={`mr-0 sm:mr-10 mt-5 sm:mt-0 text-sm leading-6 ${contentTextColor}`}
-      >
-        <span className={`${dayNumTextColor}`}>7 </span>
+      <p className={`mr10 mt-0 text-sm leading-6 mr-10 ${contentTextColor}`}>
+        <span className="text-[#196EC0]">7 </span>
         روز هفته
-        <span className={`${dayNumTextColor}`}> 24 </span>
+        <span className="text-[#196EC0]"> 24 </span>
         ساعته
         <br />
         منتظر شنیدن صدای گرمتان هستیم
       </p>
-      <div className="flex flex-col mr-0 sm:mr-10 mt-5 sm:mt-0">
+      <div className="flex flex-col mr-10 mt-0">
         <a href="tel:021654412" className={`text-sm ${contentTextColor}`}>
           021654412
         </a>
@@ -48,11 +39,7 @@ const ContactInfoSectioin = ({
         </a>
       </div>
       {/* line */}
-      <img
-        src={lightGreenLine}
-        alt=""
-        className="hidden sm:block absolute left-72"
-      />
+      <img src="images/light-green-line.svg" alt="" className="" />
     </section>
   );
 };
@@ -60,7 +47,7 @@ const ContactInfoSectioin = ({
 export default ContactInfoSectioin;
 
 ContactInfoSectioin.defaultProps = {
-  contactInfoSectionBgColor: "bg-midGrayBgColor",
-  dayNumTextColor: "text-lightBlueTextColor2",
-  contentTextColor: "text-darkCrimsonTextColor",
+  className: "bg-[#DBDBDB]",
+  dayNumTextColor: "text-[#196EC0]",
+  contentTextColor: "text-[#05335F]",
 };
diff --git a/src/components/CurrentDateShamsi/index.js b/src/components/CurrentDateTime/CurrentDateShamsi/index.js
similarity index 100%
rename from src/components/CurrentDateShamsi/index.js
rename to src/components/CurrentDateTime/CurrentDateShamsi/index.js
diff --git a/src/components/CurrentTime/index.js b/src/components/CurrentDateTime/CurrentTime/index.js
similarity index 100%
rename from src/components/CurrentTime/index.js
rename to src/components/CurrentDateTime/CurrentTime/index.js
diff --git a/src/components/CurrentDateTime/index.js b/src/components/CurrentDateTime/index.js
new file mode 100644
index 0000000..cf86b7d
--- /dev/null
+++ b/src/components/CurrentDateTime/index.js
@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+
+import CurrentDateShamsi from "./CurrentDateShamsi";
+import CurrentTime from "./CurrentTime";
+
+function CurrentDateTime() {
+  const list = {
+    1: <CurrentDateShamsi />,
+    2: <CurrentTime />,
+  };
+  const [type, setType] = useState(1);
+
+  return (
+    <div className="w-full flex flex-col items-center">
+      <select
+        className="w-20 bg-gray-200 mb-10"
+        onChange={(e) => setType(e.target.value)}
+      >
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
+  );
+}
+
+export default CurrentDateTime;
diff --git a/src/components/MiniComponents/BookDesign/index.js b/src/components/MiniComponents/BookDesign/index.js
index f38377d..0648a2d 100644
--- a/src/components/MiniComponents/BookDesign/index.js
+++ b/src/components/MiniComponents/BookDesign/index.js
@@ -1,8 +1,4 @@
 import React from "react";
-// import "./BookDesign.scss";
-
-import book from "../../../assets/images/book.svg";
-import bookCover from "../../../assets/images/book-white-cover.svg";
 
 export const BookDesign = ({ bookBackCoverBg }) => {
   return (
@@ -26,11 +22,15 @@ export const BookDesign = ({ bookBackCoverBg }) => {
       <section className="my-24 mx-24 flex flex-wrap justify-center">
         <div className="flex relative">
           <img
-            src={book}
+            src="images/book.svg"
             alt=""
             className="rounded-md z-40 transform -translate-x-4 w-full sm:w-72 h-full"
           />
-          <img src={bookCover} alt="" className="z-30 h-full" />
+          <img
+            src="images/book-white-cover.svg"
+            alt=""
+            className="z-30 h-full"
+          />
           <div
             className={`bg-greenBookBg w-7 rounded-l-md transform translate-x-4 z-10 ${bookBackCoverBg} `}
           ></div>
diff --git a/src/components/CustomSelectBox/index.js b/src/components/SelectBox/CustomSelectBox/index.js
similarity index 100%
rename from src/components/CustomSelectBox/index.js
rename to src/components/SelectBox/CustomSelectBox/index.js
diff --git a/src/components/SelectBox/index.js b/src/components/SelectBox/index.js
index a396904..6f8db23 100644
--- a/src/components/SelectBox/index.js
+++ b/src/components/SelectBox/index.js
@@ -2,11 +2,13 @@ import React, { useState } from "react";
 
 import SelectCheckbox from "./SelectCheckbox";
 import SelectRadio from "./SelectRadio";
+import CustomSelectBox from "./CustomSelectBox";
 
 function Advertisements() {
   const list = {
     1: <SelectCheckbox />,
     2: <SelectRadio />,
+    3: <CustomSelectBox />,
   };
   const [type, setType] = useState(1);
   return (
diff --git a/src/components/CustomSwitch/index.js b/src/components/SwitchDesign/CustomSwitch/index.js
similarity index 100%
rename from src/components/CustomSwitch/index.js
rename to src/components/SwitchDesign/CustomSwitch/index.js
diff --git a/src/components/SwitchDesign/index.js b/src/components/SwitchDesign/index.js
index dd593ca..468c141 100644
--- a/src/components/SwitchDesign/index.js
+++ b/src/components/SwitchDesign/index.js
@@ -2,11 +2,13 @@ import React, { useState } from "react";
 
 import Switch from "./Switch";
 import Switch2 from "./Switch2";
+import CustomSwitch from "./CustomSwitch";
 
 function SwitchDesign() {
   const list = {
     1: <Switch />,
     2: <Switch2 />,
+    3: <CustomSwitch />,
   };
   const [type, setType] = useState(1);
   return (
diff --git a/src/redux/data.js b/src/redux/data.js
index 437e669..17e14f2 100644
--- a/src/redux/data.js
+++ b/src/redux/data.js
@@ -39,6 +39,7 @@ import UploadFile from "../components/UploadFile";
 import AnimatedInput from "../components/AnimatedInput/Input";
 import BoxNextToEachOther from "../components/BoxNextToEachOther";
 import ContactUs from "../components/ContactUs";
+import CurrentDateTime from "../components/CurrentDateTime";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -742,6 +743,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Current Date Time",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Current Date Time",
+      component: <CurrentDateTime />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",