diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 705ae922e..b5468b47b 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -3,6 +3,13 @@ import { Button } from "@/components/tailwind/ui/button";
 import Menu from "@/components/tailwind/ui/menu";
 import Link from "next/link";
 import TailwindAdvancedEditor from "@/components/tailwind/advanced-editor";
+import {
+  Dialog,
+  DialogContent,
+  DialogTrigger,
+} from "@/components/tailwind/ui/dialog";
+import { ScrollArea } from "@/components/tailwind/ui/scroll-area";
+import { BookOpen } from "lucide-react";
 
 export default function Page() {
   return (
@@ -13,11 +20,25 @@ export default function Page() {
             <Github />
           </a>
         </Button>
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button className="ml gap-2">
+              <BookOpen className="h-4 w-4" />
+              Usage in dialog
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="flex max-w-3xl h-[calc(100vh-24px)]">
+            <ScrollArea className="max-h-screen">
+              <TailwindAdvancedEditor />
+            </ScrollArea>
+          </DialogContent>
+        </Dialog>
         <Link href="/docs" className="ml-auto">
           <Button variant="ghost">Documentation</Button>
         </Link>
         <Menu />
       </div>
+
       <TailwindAdvancedEditor />
     </div>
   );