diff --git a/src/components/Advertisements/Design3/index.js b/src/components/Advertisements/Design3/index.js
index 72cd28f..cba5f57 100644
--- a/src/components/Advertisements/Design3/index.js
+++ b/src/components/Advertisements/Design3/index.js
@@ -4,17 +4,17 @@ import Button from "../../Button";
 const AdvertisementDesign3 = ({ features }) => {
   return (
     <div className="relative bg-[#E3F2FF] rounded-3xl">
-      <div className="flex flex-col justify-center p-10 w-8/12">
-        <h2 className="text-lg text-productPrice  z-50">تبلیغات دانوینی</h2>
-        <p className="text-sm text-justify leading-6 mt-2 text-productPrice  z-50">
+      <div className="flex flex-col justify-center p-10">
+        <h2 className="text-lg text-[#132F52] z-50">تبلیغات دانوینی</h2>
+        <p className="text-sm text-justify leading-6 mt-2 text-[#132F52] z-50">
           لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده
           از طراحان گرافیک است.
         </p>
         <div className="mt-3">
           {features.map((feature, i) => (
             <div className="flex flex-row items-center mt-2">
-              <img src={feature.icon} alt="" className="w-6 h-6  z-50" />
-              <p className="text-sm mr-2 text-justify leading-6 text-productPrice font-light  z-50">
+              <img src={feature.icon} alt="icon" className="w-6 z-50" />
+              <p className="mr-2 text-sm text-justify text-[#132F52] leading-6 z-50">
                 {feature.title}
               </p>
             </div>
@@ -23,13 +23,10 @@ const AdvertisementDesign3 = ({ features }) => {
       </div>
       <div
         style={{
-          backgroundColor: "#00FFFF22",
           width: "calc(100vw / 15)",
           height: "calc(100vw / 15)",
-          left: "8%",
-          top: "20%",
         }}
-        className="bg-[#00FFFF22] absolute left-[17%] top-[10%] rounded-full bg-opacity-30 backdrop-filter backdrop-blur-md z-20"
+        className="bg-[#00FFFF22] absolute left-[8%] top-[20%] rounded-full bg-opacity-30 backdrop-filter backdrop-blur-md z-20"
       ></div>
       <div
         style={{
@@ -52,7 +49,7 @@ const AdvertisementDesign3 = ({ features }) => {
         />
         <Button
           text="به سلامت"
-          className="bg-blue-500 text-sm text-white border-2 border-blue-500  rounded p-2 "
+          className="bg-blue-500 text-sm text-white border-2 border-blue-500 rounded p-2 "
         />
       </div>
     </div>
diff --git a/src/components/Toast/index.js b/src/components/Toast/index.js
index 2029408..f5e5031 100644
--- a/src/components/Toast/index.js
+++ b/src/components/Toast/index.js
@@ -2,12 +2,11 @@
 
 import React from "react";
 
-import "./index.scss";
-
-import { toastAlert } from "../../redux/actions/modalActions";
+import { alert } from "../../redux/actions";
 import { connect } from "react-redux";
 
 function Toast(props) {
+  props.confirmAlert();
   return (
     <div className="mt-5">
       {" "}
@@ -162,4 +161,8 @@ const mapStateToProps = (state) => {
   return {};
 };
 
-export default connect(mapStateToProps, { customAlert: toastAlert })(Toast);
+const mapDispatchToProps = {
+  confirmAlert: alert.confirm,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Toast);
diff --git a/src/redux/data.js b/src/redux/data.js
index 1ee1471..74e906e 100644
--- a/src/redux/data.js
+++ b/src/redux/data.js
@@ -3,6 +3,8 @@ import Button from "../components/Button";
 import Design2D from "../components/Design2D";
 import AddToCartCard from "../components/AddToCart";
 import Advertisements from "../components/Advertisements";
+import Alert from "../components/Alert";
+import Toast from "../components/Toast";
 
 // import ButtonDesign from "./components/buttonDesign/ButtonDesign";
 // import ProductDesign from "./components/productDesign/ProductDesign";
@@ -22,8 +24,6 @@ import Advertisements from "../components/Advertisements";
 // import Testttt from "./components/testtttt/Testttt";
 // import Features from "./components/Features/index";
 // import Feedback from "./components/Feedback/index";
-// import Alert from "./components/Alert";
-// import Toast from "./components/Toast";
 // import ProductSuggestion from "./components/ProductSuggestion";
 // import ProductImage from "./components/ProductImage";
 // import VodProduct from "./components/VodProduct";
@@ -146,6 +146,26 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Alert",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Alert",
+      component: <Alert />,
+      code: null,
+    },
+  },
+  {
+    name: "Toast",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Toast",
+      component: <Toast />,
+      code: null,
+    },
+  },
 ];
 
 export default components;