diff --git a/app/hooks/use-toast.tsx b/app/hooks/use-toast.tsx
index e70cbc0..c496408 100644
--- a/app/hooks/use-toast.tsx
+++ b/app/hooks/use-toast.tsx
@@ -1,8 +1,9 @@
 "use client";
+import { createCallable } from "@/utils/callable";
 import { useMemoizedFn } from "ahooks";
-import clsx from "clsx";
-import type { ReactNode } from "react";
-import { createRoot } from "react-dom/client";
+import { type ReactNode, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { renderToString } from "react-dom/server";
 
 const createToast = ({
 	type,
@@ -14,22 +15,13 @@ const createToast = ({
 	delay?: number;
 }) => {
 	const toastWrapper = getToastWrapper();
-	const root = createRoot(toastWrapper);
-	root.render(
-		<div
-			className={clsx("alert !text-white", {
-				"alert-success": type === "success",
-				"alert-error": type === "error",
-				"alert-info": type === "info",
-				"alert-warning": type === "warning",
-			})}
-		>
-			{message}
-		</div>,
-	);
+	const toastEl = document.createElement("div");
+	toastEl.className = `alert alert-${type} !text-white`;
+
+	toastEl.innerHTML = renderToString(message);
+	toastWrapper?.appendChild(toastEl);
 	let unmount = () => {
-		root.render(null);
-		root.unmount();
+		toastWrapper?.removeChild(toastEl);
 		unmount = () => {};
 	};
 	const timeout = setTimeout(() => unmount(), delay);
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0eb8e2a..4505652 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -45,6 +45,17 @@ const config: Config = {
 		themeRoot: ":root", // The element that receives theme color CSS variables
 	},
 	// https://medium.com/@achronus/solving-a-niche-frontend-problem-dynamic-tailwind-css-classes-in-react-da5f513ecf6a
-	safelist: ["toast", "toast-top", "toast-center", "z-50"],
+	safelist: [
+		"toast",
+		"toast-top",
+		"toast-center",
+		"alert",
+		"alert-error",
+		"alert-success",
+		"alert-warning",
+		"alert-info",
+		"z-50",
+		"text-white",
+	],
 };
 export default config;