diff --git a/langflow/frontend/src/alerts/error/index.tsx b/langflow/frontend/src/alerts/error/index.tsx
index 65a582be5..94e71a98e 100644
--- a/langflow/frontend/src/alerts/error/index.tsx
+++ b/langflow/frontend/src/alerts/error/index.tsx
@@ -1,64 +1,66 @@
 import { Transition } from "@headlessui/react";
 import { XCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useEffect, useState } from "react";
-import { ErrorAlertType} from "../../types/alerts";
+import { ErrorAlertType } from "../../types/alerts";
 
-export default function ErrorAlert({ title, list = [], id, removeAlert }:ErrorAlertType) {
-  const [show, setShow] = useState(true);
-  useEffect(() => {
-    if(show){
-      setTimeout(() => {
-        setShow(false); setTimeout(() => {removeAlert(id);}, 500);
-      }, 5000);
-    }
-  }, [id, removeAlert, show]);
-  return (
-    <Transition
-      className="relative"
-      show={show}
-      appear={true}
-      enter="transition-transform duration-500 ease-out"
-      enterFrom={"transform translate-x-[-100%]"}
-      enterTo={"transform translate-x-0"}
-      leave="transition-transform duration-500 ease-in"
-      leaveFrom={"transform translate-x-0"}
-      leaveTo={"transform translate-x-[-100%]"}
-    >
-      <div className="rounded-md w-96 mt-6 shadow-xl bg-red-50 p-4">
-        <div className="flex">
-          <div className="flex-shrink-0">
-            <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
-          </div>
-          <div className="ml-3">
-            <h3 className="text-sm font-medium text-red-800">{title}</h3>
-            {list.length !== 0 
-            ?
-            <div className="mt-2 text-sm text-red-700">
-            <ul className="list-disc space-y-1 pl-5">
-              {list.map((item, index) => (
-                <li key={index} >{item}</li>
-              ))}
-            </ul>
-          </div>
-          :
-          <></>
-          }
-            
-          </div>
-          <div className="ml-auto pl-3">
-            <div className="-mx-1.5 -my-1.5">
-              <button
-                type="button"
-                onClick={()=>{setShow(false); setTimeout(() => {removeAlert(id);}, 500);}}
-                className="inline-flex rounded-md bg-red-50 p-1.5 text-red-500"
-              >
-                <span className="sr-only">Dismiss</span>
-                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  );
+export default function ErrorAlert({
+	title,
+	list = [],
+	id,
+	removeAlert,
+}: ErrorAlertType) {
+	const [show, setShow] = useState(true);
+	useEffect(() => {
+		if (show) {
+			setTimeout(() => {
+				setShow(false);
+				setTimeout(() => {
+					removeAlert(id);
+				}, 500);
+			}, 5000);
+		}
+	}, [id, removeAlert, show]);
+	return (
+		<Transition
+			className="relative"
+			show={show}
+			appear={true}
+			enter="transition-transform duration-500 ease-out"
+			enterFrom={"transform translate-x-[-100%]"}
+			enterTo={"transform translate-x-0"}
+			leave="transition-transform duration-500 ease-in"
+			leaveFrom={"transform translate-x-0"}
+			leaveTo={"transform translate-x-[-100%]"}
+		>
+			<div
+				onClick={() => {
+					setShow(false);
+					setTimeout(() => {
+						removeAlert(id);
+					}, 500);
+				}}
+				className="rounded-md w-96 mt-6 shadow-xl bg-red-50 p-4 cursor-pointer"
+			>
+				<div className="flex">
+					<div className="flex-shrink-0">
+						<XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
+					</div>
+					<div className="ml-3">
+						<h3 className="text-sm font-medium text-red-800">{title}</h3>
+						{list.length !== 0 ? (
+							<div className="mt-2 text-sm text-red-700">
+								<ul className="list-disc space-y-1 pl-5">
+									{list.map((item, index) => (
+										<li key={index}>{item}</li>
+									))}
+								</ul>
+							</div>
+						) : (
+							<></>
+						)}
+					</div>
+				</div>
+			</div>
+		</Transition>
+	);
 }
diff --git a/langflow/frontend/src/alerts/notice/index.tsx b/langflow/frontend/src/alerts/notice/index.tsx
index 86e55c8e4..3c5095339 100644
--- a/langflow/frontend/src/alerts/notice/index.tsx
+++ b/langflow/frontend/src/alerts/notice/index.tsx
@@ -4,63 +4,64 @@ import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { NoticeAlertType } from "../../types/alerts";
 
-export default function NoticeAlert({ title, link = "", id, removeAlert }:NoticeAlertType) {
-  const [show, setShow] = useState(true);
-  useEffect(() => {
-    if(show){
-      setTimeout(() => {
-        setShow(false); setTimeout(() => {removeAlert(id);}, 500);
-      }, 5000);
-    }
-  }, [id, removeAlert, show]);
-  return (
-    <Transition
-      show={show}
-      enter="transition-transform duration-500 ease-out"
-      enterFrom={"transform translate-x-[-100%]"}
-      enterTo={"transform translate-x-0"}
-      leave="transition-transform duration-500 ease-in"
-      leaveFrom={"transform translate-x-0"}
-      leaveTo={"transform translate-x-[-100%]"}
-    >
-      <div className="rounded-md w-96 mt-6 shadow-xl bg-blue-50 p-4">
-        <div className="flex">
-          <div className="flex-shrink-0">
-            <InformationCircleIcon
-              className="h-5 w-5 text-blue-400"
-              aria-hidden="true"
-            />
-          </div>
-          <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-blue-700">{title}</p>
-            <p className="mt-3 text-sm md:mt-0 md:ml-6">
-              {link !== "" 
-              ?
-              <Link
-                to={link}
-                className="whitespace-nowrap font-medium text-blue-700 hover:text-blue-600"
-              >
-                Details
-              </Link>
-            :
-            <></>
-            }
-            </p>
-          </div>
-          <div className="ml-auto pl-3">
-            <div className="-mx-1.5 -my-1.5">
-              <button
-                type="button"
-                onClick={()=>{setShow(false); removeAlert(id);}}
-                className="inline-flex rounded-md bg-blue-50 p-1.5 text-blue-500"
-              >
-                <span className="sr-only">Dismiss</span>
-                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  );
+export default function NoticeAlert({
+	title,
+	link = "",
+	id,
+	removeAlert,
+}: NoticeAlertType) {
+	const [show, setShow] = useState(true);
+	useEffect(() => {
+		if (show) {
+			setTimeout(() => {
+				setShow(false);
+				setTimeout(() => {
+					removeAlert(id);
+				}, 500);
+			}, 5000);
+		}
+	}, [id, removeAlert, show]);
+	return (
+		<Transition
+			show={show}
+			enter="transition-transform duration-500 ease-out"
+			enterFrom={"transform translate-x-[-100%]"}
+			enterTo={"transform translate-x-0"}
+			leave="transition-transform duration-500 ease-in"
+			leaveFrom={"transform translate-x-0"}
+			leaveTo={"transform translate-x-[-100%]"}
+		>
+			<div
+				onClick={() => {
+					setShow(false);
+					removeAlert(id);
+				}}
+				className="rounded-md w-96 mt-6 shadow-xl bg-blue-50 p-4"
+			>
+				<div className="flex">
+					<div className="flex-shrink-0">
+						<InformationCircleIcon
+							className="h-5 w-5 text-blue-400"
+							aria-hidden="true"
+						/>
+					</div>
+					<div className="ml-3 flex-1 md:flex md:justify-between">
+						<p className="text-sm text-blue-700">{title}</p>
+						<p className="mt-3 text-sm md:mt-0 md:ml-6">
+							{link !== "" ? (
+								<Link
+									to={link}
+									className="whitespace-nowrap font-medium text-blue-700 hover:text-blue-600"
+								>
+									Details
+								</Link>
+							) : (
+								<></>
+							)}
+						</p>
+					</div>
+				</div>
+			</div>
+		</Transition>
+	);
 }
diff --git a/langflow/frontend/src/alerts/success/index.tsx b/langflow/frontend/src/alerts/success/index.tsx
index 07659c19e..80b98b05d 100644
--- a/langflow/frontend/src/alerts/success/index.tsx
+++ b/langflow/frontend/src/alerts/success/index.tsx
@@ -3,50 +3,51 @@ import { CheckCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useEffect, useState } from "react";
 import { SuccessAlertType } from "../../types/alerts";
 
-export default function SuccessAlert({ title, id, removeAlert }:SuccessAlertType) {
-  const [show, setShow] = useState(true);
-  useEffect(() => {
-    if(show){
-      setTimeout(() => {
-        setShow(false); setTimeout(() => {removeAlert(id);}, 500);
-      }, 5000);
-    }
-  }, [id, removeAlert, show]);
-  return (
-    <Transition
-      show={show}
-      enter="transition-transform duration-500 ease-out"
-      enterFrom={"transform translate-x-[-100%]"}
-      enterTo={"transform translate-x-0"}
-      leave="transition-transform duration-500 ease-in"
-      leaveFrom={"transform translate-x-0"}
-      leaveTo={"transform translate-x-[-100%]"}
-    >
-      <div className="rounded-md w-96 mt-6 shadow-xl bg-green-50 p-4">
-        <div className="flex">
-          <div className="flex-shrink-0">
-            <CheckCircleIcon
-              className="h-5 w-5 text-green-400"
-              aria-hidden="true"
-            />
-          </div>
-          <div className="ml-3">
-            <p className="text-sm font-medium text-green-800">{title}</p>
-          </div>
-          <div className="ml-auto pl-3">
-            <div className="-mx-1.5 -my-1.5">
-              <button
-                type="button"
-                onClick={()=>{setShow(false); removeAlert(id);}}
-                className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500"
-              >
-                <span className="sr-only">Dismiss</span>
-                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  );
+export default function SuccessAlert({
+	title,
+	id,
+	removeAlert,
+}: SuccessAlertType) {
+	const [show, setShow] = useState(true);
+	useEffect(() => {
+		if (show) {
+			setTimeout(() => {
+				setShow(false);
+				setTimeout(() => {
+					removeAlert(id);
+				}, 500);
+			}, 5000);
+		}
+	}, [id, removeAlert, show]);
+	return (
+		<Transition
+			show={show}
+			enter="transition-transform duration-500 ease-out"
+			enterFrom={"transform translate-x-[-100%]"}
+			enterTo={"transform translate-x-0"}
+			leave="transition-transform duration-500 ease-in"
+			leaveFrom={"transform translate-x-0"}
+			leaveTo={"transform translate-x-[-100%]"}
+		>
+			<div
+				onClick={() => {
+					setShow(false);
+					removeAlert(id);
+				}}
+				className="rounded-md w-96 mt-6 shadow-xl bg-green-50 p-4"
+			>
+				<div className="flex">
+					<div className="flex-shrink-0">
+						<CheckCircleIcon
+							className="h-5 w-5 text-green-400"
+							aria-hidden="true"
+						/>
+					</div>
+					<div className="ml-3">
+						<p className="text-sm font-medium text-green-800">{title}</p>
+					</div>
+				</div>
+			</div>
+		</Transition>
+	);
 }