diff --git a/src/index.css b/src/index.css
index 890dd54..c1c13ee 100644
--- a/src/index.css
+++ b/src/index.css
@@ -155,10 +155,12 @@ html, body {
     --greenAlpha: #18a97978;
     --greenAlphaGradient: #09a16e85;
     --darkGreen: #18a979;
+    --blackGreen: #123f30;
     --red: #d73e36;
     --redAlpha: #d73e3678;
     --redAlphaGradient: #e124175e;
     --darkRed: #d73e36;
+    --blackRed: #79150f;
     --orange: #ff8124;
     --orangeAlpha: #e97b50b0;
     --blue: #0e4095;
@@ -195,10 +197,12 @@ html, body {
     --greenAlpha: #18a97978;
     --greenAlphaGradient: #31cc6a4d;
     --darkGreen: #18a979;
+    --blackGreen: #123f30;
     --red: #ff5555;
     --redAlpha: #d73e3678;
     --redAlphaGradient: #e8201236;
     --darkRed: #d73e36;
+    --blackRed: #79150f;
     --orange: #ff8124;
     --orangeAlpha: #b16649d9;
     --blue: #6f9ffff5;
diff --git a/src/index.js b/src/index.js
index 304aebd..c11712b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -20,6 +20,8 @@ import i18n from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import Backend from "i18next-http-backend";
 import {initReactI18next} from "react-i18next";
+import toast, {ToastBar, Toaster} from "react-hot-toast";
+import Icon from "./components/Icon/Icon";
 
 
 const sagaMiddleware = createSagaMiddleware();
@@ -72,6 +74,59 @@ i18n
         },
     });
 
+const Toast = () => {
+    return <Toaster position="top-center" toastOptions={
+        {
+            className: `${i18n.language !== "fa" ? "ltr" : "rtl"}`,
+            style: {
+                width: "100%",
+                padding: "0.3vh 0.8vw 0.3vh 0.8vw",
+                color: "white",
+                lineHeight: "3vh",
+                fontSize: "3.3vw",
+                borderRadius: "4px",
+                background: "var(--mainContent)",
+
+            },
+            success: {
+                style: {
+                    background: "var(--darkGreen)",
+                    border: "2px solid var(--darkGreen)"
+                },
+            },
+            error: {
+                style: {
+                    background: "var(--darkRed)",
+                    border: "2px solid var(--darkRed)"
+                },
+            },
+            custom: {
+                style: {
+                    background: "var(--Orange)",
+                },
+            },
+        }} containerStyle={{}}>
+        {(t) => {
+            return <ToastBar toast={t}>
+                {({ icon, message }) => (
+                    <>
+                        {t.type !== 'loading' && (
+                            /*<button >بستن</button>*/
+                            <Icon
+                                iconName="icon-cancel-circle-1 fs-03 flex "
+                                iconClass={`toastIcon cursor-pointer mx-2`}
+                                onClick={() => toast.dismiss(t.id)}
+                            />
+                        )}
+                        {message}
+                    </>
+                )}
+            </ToastBar>
+        }
+        }
+    </Toaster>;
+}
+
 
 //React query client
 const queryClient = new QueryClient()
@@ -84,6 +139,7 @@ root.render(
         <StyleRoot>
             <QueryClientProvider client={queryClient}>
                 <Main baseURL={PUBLIC_URL}/>
+                <Toast/>
                 <ReactQueryDevtools initialIsOpen={false}/>
             </QueryClientProvider>
         </StyleRoot>
diff --git a/src/main/Mobile/Mobile.js b/src/main/Mobile/Mobile.js
index 1183527..a00999a 100644
--- a/src/main/Mobile/Mobile.js
+++ b/src/main/Mobile/Mobile.js
@@ -72,33 +72,6 @@ const Mobile = () => {
         meta.description.content = description ? description : " "
     }, [title, description])
 
-    const Toast = () => <Toaster position="top-center" toastOptions={
-        {
-            className: "rtl",
-            style: {
-                padding: "0.3vh 0.8vw 0.3vh 0",
-                color: "white",
-                lineHeight: "3vh",
-                fontSize: "3.3vw",
-                borderRadius: "4px",
-                background: "var(--mainContent)",
-            },
-            success: {
-                style: {
-                    background: "var(--darkGreen)",
-                },
-            },
-            error: {
-                style: {
-                    background: "var(--darkRed)",
-                },
-            },
-            custom: {
-                style: {
-                    background: "var(--Orange)",
-                },
-            },
-        }} containerStyle={{}}/>
 
     if (isLoading) return <FullWidthLoading/>
 
@@ -123,7 +96,6 @@ const Mobile = () => {
                 </Route>
             </Routes>
             <ReactTooltip data-html={true} data-effect="float"/>
-            <Toast/>
             <SideMenu/>
         </div>
     );