diff --git a/apps/docs/content/blog/v2.7.0.mdx b/apps/docs/content/blog/v2.7.0.mdx
index 823fff23a..4d9ebcd9e 100644
--- a/apps/docs/content/blog/v2.7.0.mdx
+++ b/apps/docs/content/blog/v2.7.0.mdx
@@ -114,9 +114,12 @@ function Example() {
 }
 ```
 
+<Spacer y={2} />
+
 <CodeDemo
   title="Simple Usage"
   files={simpleToast}
+  showEditor={false}
 />
 
 
diff --git a/apps/docs/content/components/toast/simple.raw.jsx b/apps/docs/content/components/toast/simple.raw.jsx
index 36297faae..5ede4d9c0 100644
--- a/apps/docs/content/components/toast/simple.raw.jsx
+++ b/apps/docs/content/components/toast/simple.raw.jsx
@@ -1,18 +1,21 @@
-import {addToast, Button} from "@heroui/react";
+import {addToast, Button, ToastProvider} from "@heroui/react";
 
 export default function App() {
   return (
-    <div className="flex flex-wrap gap-2">
-      <Button
-        onPress={() => {
-          addToast({
-            title: "Success",
-            description: "Your changes have been saved successfully.",
-          });
-        }}
-      >
-        Show Toast
-      </Button>
-    </div>
+    <>
+      <ToastProvider />
+      <div className="flex flex-wrap gap-2">
+        <Button
+          onPress={() => {
+            addToast({
+              title: "Success",
+              description: "Your changes have been saved successfully.",
+            });
+          }}
+        >
+          Show Toast
+        </Button>
+      </div>
+    </>
   );
 }