diff --git a/apps/docs/components/marketing/hero/hero.tsx b/apps/docs/components/marketing/hero/hero.tsx
index 0a011384e3..19f728b3f7 100644
--- a/apps/docs/components/marketing/hero/hero.tsx
+++ b/apps/docs/components/marketing/hero/hero.tsx
@@ -39,13 +39,11 @@ export const Hero = () => {
               content: "font-semibold text-foreground text-xs ",
             }}
             color="primary"
-            href="/blog/introducing-heroui"
+            href="/blog/v2.7.0"
             variant="flat"
-            onClick={() =>
-              handlePressAnnouncement("Introducing HeroUI", "/blog/introducing-heroui")
-            }
+            onClick={() => handlePressAnnouncement("HeroUI v2.7.0", "/blog/v2.7.0")}
           >
-            Introducing HeroUI 
+            HeroUI v2.7.0 
             <span aria-label="emoji" role="img">
               🔥
             </span>
diff --git a/apps/docs/components/navbar.tsx b/apps/docs/components/navbar.tsx
index 1c2cedec0c..c74a4f79a1 100644
--- a/apps/docs/components/navbar.tsx
+++ b/apps/docs/components/navbar.tsx
@@ -220,11 +220,11 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
               content: "font-semibold text-foreground text-xs ",
             }}
             color="primary"
-            href="/blog/introducing-heroui"
+            href="/blog/v2.7.0"
             variant="flat"
-            onClick={() => handlePressNavbarItem("Introducing HeroUI", "/blog/introducing-heroui")}
+            onClick={() => handlePressNavbarItem("HeroUI v2.7.0", "/blog/v2.7.0")}
           >
-            Introducing HeroUI&nbsp;
+            HeroUI v2.7.0&nbsp;
             <span aria-label="emoji" role="img">
               🔥
             </span>
diff --git a/apps/docs/components/sandpack/use-sandpack.ts b/apps/docs/components/sandpack/use-sandpack.ts
index 3aef20633c..d117b92d30 100644
--- a/apps/docs/components/sandpack/use-sandpack.ts
+++ b/apps/docs/components/sandpack/use-sandpack.ts
@@ -177,9 +177,9 @@ export const useSandpack = ({
     dependencies,
     entry: entryFile,
     devDependencies: {
-      autoprefixer: "^10.4.14",
-      postcss: "^8.4.21",
-      tailwindcss: "^3.2.7",
+      autoprefixer: "10.4.20",
+      postcss: "8.4.49",
+      tailwindcss: "3.4.17",
     },
   };
 
diff --git a/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx b/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx
index 27b9de3908..fa298223b1 100644
--- a/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx
+++ b/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx
@@ -8,7 +8,7 @@ export default function App() {
         <h3>Min date</h3>
         <DatePicker
           defaultValue={today(getLocalTimeZone()).subtract({days: 1})}
-          label="Date and time"
+          label="Date"
           minValue={today(getLocalTimeZone())}
         />
       </div>
@@ -16,7 +16,7 @@ export default function App() {
         <h3>Max date</h3>
         <DatePicker
           defaultValue={today(getLocalTimeZone()).add({days: 1})}
-          label="Date and time"
+          label="Date"
           maxValue={today(getLocalTimeZone())}
         />
       </div>
diff --git a/apps/docs/content/components/modal/placement.raw.jsx b/apps/docs/content/components/modal/placement.raw.jsx
index 6d1869b01d..75aa9f1332 100644
--- a/apps/docs/content/components/modal/placement.raw.jsx
+++ b/apps/docs/content/components/modal/placement.raw.jsx
@@ -1,10 +1,10 @@
+import {useState} from "react";
 import {
   Modal,
   ModalContent,
   ModalHeader,
   ModalBody,
   ModalFooter,
-  ModalProps,
   Button,
   useDisclosure,
   RadioGroup,
@@ -13,22 +13,27 @@ import {
 
 export default function App() {
   const {isOpen, onOpen, onOpenChange} = useDisclosure();
-  const [scrollBehavior, setScrollBehavior] =
-    React.useState < ModalProps["scrollBehavior"] > "inside";
+  const [modalPlacement, setModalPlacement] = useState("auto");
 
   return (
-    <div className="flex flex-col gap-2">
-      <Button onPress={onOpen}>Open Modal</Button>
+    <div className="flex px-10 min-h-[80vh] justify-center items-center flex-col gap-4">
+      <Button className="max-w-fit" onPress={onOpen}>
+        Open Modal
+      </Button>
       <RadioGroup
-        label="Select scroll behavior"
+        label="Select modal placement"
         orientation="horizontal"
-        value={scrollBehavior}
-        onValueChange={setScrollBehavior}
+        value={modalPlacement}
+        onValueChange={setModalPlacement}
       >
-        <Radio value="inside">inside</Radio>
-        <Radio value="outside">outside</Radio>
+        <Radio value="auto">auto</Radio>
+        <Radio value="top">top</Radio>
+        <Radio value="bottom">bottom</Radio>
+        <Radio value="center">center</Radio>
+        <Radio value="top-center">top-center</Radio>
+        <Radio value="bottom-center">bottom-center</Radio>
       </RadioGroup>
-      <Modal isOpen={isOpen} scrollBehavior={scrollBehavior} onOpenChange={onOpenChange}>
+      <Modal isOpen={isOpen} placement={modalPlacement} onOpenChange={onOpenChange}>
         <ModalContent>
           {(onClose) => (
             <>
@@ -44,58 +49,6 @@ export default function App() {
                   risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
                   quam.
                 </p>
-                <p>
-                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
-                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
-                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
-                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
-                  deserunt nostrud ad veniam.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
-                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
-                  quam. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
-                  dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis
-                  sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit
-                  incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod
-                  et. Culpa deserunt nostrud ad veniam.
-                </p>
-                <p>
-                  Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia
-                  eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi
-                  consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
-                  deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing
-                  elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
-                  hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute
-                  tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
-                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris
-                  do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod
-                  pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
-                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
-                  quam.
-                </p>
-                <p>
-                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
-                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
-                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
-                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
-                  deserunt nostrud ad veniam.
-                </p>
-                <p>
-                  Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia
-                  eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi
-                  consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
-                  deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing
-                  elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
-                  hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute
-                  tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
-                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris
-                  do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod
-                  pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-                </p>
               </ModalBody>
               <ModalFooter>
                 <Button color="danger" variant="light" onPress={onClose}>
diff --git a/apps/docs/content/docs/components/drawer.mdx b/apps/docs/content/docs/components/drawer.mdx
index 14dc9d8d61..9c47a62cae 100644
--- a/apps/docs/content/docs/components/drawer.mdx
+++ b/apps/docs/content/docs/components/drawer.mdx
@@ -84,8 +84,8 @@ You can disable this behavior by setting the following properties:
 ### Drawer placement
 
 The drawer can be placed on any edge of the screen using the `placement` prop:
-- `left` (default)
-- `right`
+- `left`
+- `right` (default)
 - `top`
 - `bottom`
 
diff --git a/apps/docs/content/docs/customization/dark-mode.mdx b/apps/docs/content/docs/customization/dark-mode.mdx
index a2c3132249..be49a4a8ab 100644
--- a/apps/docs/content/docs/customization/dark-mode.mdx
+++ b/apps/docs/content/docs/customization/dark-mode.mdx
@@ -204,24 +204,6 @@ Install `@heroui/use-theme` in your project.
   }}
 /> 
 
-### Add the current theme to the main element
-
-```jsx
-// App.tsx or App.jsx
-import React from "react";
-import {useTheme} from "@heroui/use-theme";
-
-export default function App() {
-  const {theme} = useTheme();
-
-  return (
-    <main className={`${theme} text-foreground bg-background`}>
-      <App />
-    </main>
-  )
-}
-```
-
 ### Add the theme switcher
 
 Add the theme switcher to your app.
diff --git a/apps/docs/hooks/use-stackblitz.ts b/apps/docs/hooks/use-stackblitz.ts
index ac29ace473..28dc868626 100644
--- a/apps/docs/hooks/use-stackblitz.ts
+++ b/apps/docs/hooks/use-stackblitz.ts
@@ -52,7 +52,18 @@ export function useStackblitz(props: UseSandpackProps) {
   "dependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    ${Object.entries(omit(dependencies as any, ["react", "react-dom"]))
+    ${Object.entries(
+      omit(dependencies as any, [
+        "react",
+        "react-dom",
+        "react-dom/client",
+        "@vitejs/plugin-react",
+        "vite",
+        "autoprefixer",
+        "postcss",
+        "tailwindcss",
+      ]),
+    )
       .map(([key, value]) => `"${key}": "${value}"`)
       .join(",\n    ")}
   },