diff --git a/packages/ui/components/toast/showToast.tsx b/packages/ui/components/toast/showToast.tsx
index 16b43a9f5b..3a1d17a737 100644
--- a/packages/ui/components/toast/showToast.tsx
+++ b/packages/ui/components/toast/showToast.tsx
@@ -6,14 +6,16 @@ import { Check, Info } from "../icon";
 type IToast = {
   message: string;
   toastVisible: boolean;
+  onClose: () => void;
 };
 
-export const SuccessToast = ({ message, toastVisible }: IToast) => (
+export const SuccessToast = ({ message, toastVisible, onClose }: IToast) => (
   <div
     className={classNames(
       "data-testid-toast-success bg-brand-default text-inverted mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
-      toastVisible && "animate-fade-in-up"
-    )}>
+      toastVisible && "animate-fade-in-up cursor-pointer"
+    )}
+    onClick={onClose}>
     <span>
       <Check className="h-4 w-4" />
     </span>
@@ -21,12 +23,13 @@ export const SuccessToast = ({ message, toastVisible }: IToast) => (
   </div>
 );
 
-export const ErrorToast = ({ message, toastVisible }: IToast) => (
+export const ErrorToast = ({ message, toastVisible, onClose }: IToast) => (
   <div
     className={classNames(
       "animate-fade-in-up bg-error text-error mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
-      toastVisible && "animate-fade-in-up"
-    )}>
+      toastVisible && "animate-fade-in-up cursor-pointer"
+    )}
+    onClick={onClose}>
     <span>
       <Info className="h-4 w-4" />
     </span>
@@ -34,12 +37,13 @@ export const ErrorToast = ({ message, toastVisible }: IToast) => (
   </div>
 );
 
-export const WarningToast = ({ message, toastVisible }: IToast) => (
+export const WarningToast = ({ message, toastVisible, onClose }: IToast) => (
   <div
     className={classNames(
       "animate-fade-in-up bg-brand-default text-brand mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
-      toastVisible && "animate-fade-in-up"
-    )}>
+      toastVisible && "animate-fade-in-up cursor-pointer"
+    )}
+    onClick={onClose}>
     <span>
       <Info className="h-4 w-4" />
     </span>
@@ -47,12 +51,13 @@ export const WarningToast = ({ message, toastVisible }: IToast) => (
   </div>
 );
 
-export const DefaultToast = ({ message, toastVisible }: IToast) => (
+export const DefaultToast = ({ message, toastVisible, onClose }: IToast) => (
   <div
     className={classNames(
       "animate-fade-in-up bg-brand-default text-inverted mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
-      toastVisible && "animate-fade-in-up"
-    )}>
+      toastVisible && "animate-fade-in-up cursor-pointer"
+    )}
+    onClick={onClose}>
     <span>
       <Check className="h-4 w-4" />
     </span>
@@ -67,14 +72,29 @@ export function showToast(
   variant: "success" | "warning" | "error",
   duration = TOAST_VISIBLE_DURATION
 ) {
+  const onClose = () => {
+    toast.dismiss();
+  };
   switch (variant) {
     case "success":
-      return toast.custom((t) => <SuccessToast message={message} toastVisible={t.visible} />, { duration });
+      return toast.custom(
+        (t) => <SuccessToast message={message} toastVisible={t.visible} onClose={onClose} />,
+        { duration }
+      );
     case "error":
-      return toast.custom((t) => <ErrorToast message={message} toastVisible={t.visible} />, { duration });
+      return toast.custom(
+        (t) => <ErrorToast message={message} toastVisible={t.visible} onClose={onClose} />,
+        { duration }
+      );
     case "warning":
-      return toast.custom((t) => <WarningToast message={message} toastVisible={t.visible} />, { duration });
+      return toast.custom(
+        (t) => <WarningToast message={message} toastVisible={t.visible} onClose={onClose} />,
+        { duration }
+      );
     default:
-      return toast.custom((t) => <DefaultToast message={message} toastVisible={t.visible} />, { duration });
+      return toast.custom(
+        (t) => <DefaultToast message={message} toastVisible={t.visible} onClose={onClose} />,
+        { duration }
+      );
   }
 }