diff --git a/apps/docs/app/providers.tsx b/apps/docs/app/providers.tsx
index fd981ace44..f31a0fd054 100644
--- a/apps/docs/app/providers.tsx
+++ b/apps/docs/app/providers.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import {HeroUIProvider, ToastProvider} from "@heroui/react";
+import {HeroUIProvider} from "@heroui/react";
 import {ThemeProvider as NextThemesProvider} from "next-themes";
 import {ThemeProviderProps} from "next-themes";
 import {useRouter} from "next/navigation";
@@ -44,7 +44,6 @@ export function Providers({children, themeProps}: ProvidersProps) {
   return (
     <ProviderWrapper>
       <HeroUIProvider navigate={router.push}>
-        <ToastProvider />
         <NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
       </HeroUIProvider>
     </ProviderWrapper>
diff --git a/apps/docs/content/components/toast/placement.raw.jsx b/apps/docs/content/components/toast/placement.raw.jsx
index af5b3b706d..6b861869ad 100644
--- a/apps/docs/content/components/toast/placement.raw.jsx
+++ b/apps/docs/content/components/toast/placement.raw.jsx
@@ -1,15 +1,26 @@
-import {addToast, Button} from "@heroui/react";
+import {addToast, ToastProvider, Button} from "@heroui/react";
 import React from "react";
 
 export default function App() {
+  const [placement, setPlacement] = React.useState("bottom-right");
+
   return (
-    <div className="flex flex-wrap gap-2">
-      {["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"].map(
-        (position) => (
+    <>
+      <ToastProvider placement={placement} toastOffset={placement.includes("top") ? 60 : 0} />
+      <div className="flex flex-wrap gap-2">
+        {[
+          "top-left",
+          "top-center",
+          "top-right",
+          "bottom-left",
+          "bottom-center",
+          "bottom-right",
+        ].map((position) => (
           <Button
             key={position}
             variant={"flat"}
             onPress={() => {
+              setPlacement(position);
               addToast({
                 title: "Toast title",
                 description: "Toast displayed successfully",
@@ -18,8 +29,8 @@ export default function App() {
           >
             {position}
           </Button>
-        ),
-      )}
-    </div>
+        ))}
+      </div>
+    </>
   );
 }
diff --git a/apps/docs/content/docs/components/toast.mdx b/apps/docs/content/docs/components/toast.mdx
index 116e6d29c3..cbad3d825e 100644
--- a/apps/docs/content/docs/components/toast.mdx
+++ b/apps/docs/content/docs/components/toast.mdx
@@ -303,7 +303,7 @@ Toast has the following slots:
     },
     {
       attribute: "placement", 
-      type: "bottom-right" | "bottom-left" | "bottom-center" | "top-right" | "top-left" | "top-center",
+      type: "bottom-right | bottom-left | bottom-center | top-right | top-left | top-center",
       description: "The placement of the toast.",
       default: "bottom-right"
     },