diff --git a/apps/docs/components/scripts/script-providers.tsx b/apps/docs/components/scripts/script-providers.tsx
index 5b8f34a868..1b7c8b1554 100644
--- a/apps/docs/components/scripts/script-providers.tsx
+++ b/apps/docs/components/scripts/script-providers.tsx
@@ -1,15 +1,32 @@
+"use client";
+
 import * as React from "react";
 import Script from "next/script";
+import { usePathname } from "next/navigation";
+
+export function ScriptProviders({ isKapaEnabled = true }: { isKapaEnabled?: boolean }) {
+  const pathname = usePathname();
+  const [isMounted, setIsMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  React.useEffect(() => {
+    const kapaElements = document.querySelectorAll('[id^="kapa-"]');
+    const display = pathname.includes("toast") ? "none" : "block";
 
+    kapaElements.forEach(element => (element as HTMLElement).style.display = display);
+  }, [pathname]);
 
-export function ScriptProviders({isKapaEnabled = true}: {isKapaEnabled?: boolean}) {
-  if (!isKapaEnabled) return null;
+  if (!isKapaEnabled || !isMounted) {
+    return null;
+  }
 
   return (
     <>
       <Script
         defer
-        data-button-position-left="20px"
         data-modal-disclaimer="This is a custom LLM for HeroUI with access to all developer docs (heroui.com/docs) and GitHub Issues and PRs (github.com/heroui-inc/heroui)."
         data-modal-example-questions="How do I install for Next.js?,How do I customize primary color?"
         data-project-color="#000000"