diff --git a/superpage/src/components/Course/Contact.jsx b/superpage/src/components/Course/Contact.jsx
index 949ab75..3ac9d09 100644
--- a/superpage/src/components/Course/Contact.jsx
+++ b/superpage/src/components/Course/Contact.jsx
@@ -4,8 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import clsx from "clsx";
 import { z } from "zod";
 
-// const N8N_URL = "https://n8n.eduseg.com.br/webhook/eduseg";
-const N8N_URL = "https://n8n.eduseg.com.br/webhook-test/eduseg";
+const N8N_URL = "https://n8n.eduseg.com.br/webhook/eduseg";
 
 const schema = z.object({
   name: z.string().nonempty({ message: "Deve preencher o nome" }),
diff --git a/superpage/src/components/Course/FlyoutMenu.astro b/superpage/src/components/Course/FlyoutMenu.astro
new file mode 100644
index 0000000..798c84e
--- /dev/null
+++ b/superpage/src/components/Course/FlyoutMenu.astro
@@ -0,0 +1,147 @@
+---
+import { Icon } from "astro-icon/components";
+import Container from "../Container.astro";
+import BuyDropdown from "./BuyDropdown.astro";
+import Trends from "~/components/Trends.astro";
+import Search from "~/components/Search.astro";
+
+import { getEntries } from "astro:content";
+const { title, ...data } = Astro.props;
+const relatedCourses = data?.relatedCourses
+    ? await getEntries(data.relatedCourses)
+    : null;
+---
+
+<flyout-menu>
+    <nav class="sticky bg-lime-400 top-0 z-10 drop-shadow shadow-sm">
+        <Container class="flex items-center relative py-3">
+            <button
+                data-toggle="menu"
+                class="text-black font-medium cursor-pointer lg:bg-white/15 hover:outline lg:border border-black lg:py-0.5 lg:px-2.5 rounded-lg transition flex items-center gap-1"
+            >
+                <div class="truncate max-w-36 sm:max-w-72">
+                    {title}
+                </div>
+                <Icon
+                    name="chevron-down"
+                    aria-hidden="true"
+                    class="size-4 mt-1"
+                />
+            </button>
+
+            <BuyDropdown class="ml-auto" {...Astro.props} />
+
+            <dialog
+                class="absolute top-full translate-y-1 w-full bg-transparent max-lg:px-2.5"
+                closedby="any"
+            >
+                <div class="text-black bg-lime-400 rounded-xl lg:rounded-2xl">
+                    <button
+                        class="border border-black absolute rounded-full top-2.5 max-lg:right-5 right-2.5 cursor-pointer outline-none"
+                        data-dismiss
+                    >
+                        <Icon name="x-mark" class="size-4 p-0.5" />
+                    </button>
+                    <div class="lg:w-1/2 mx-auto p-5 lg:py-24">
+                        <search class="space-y-5">
+                            <label for="search" class="block">
+                                <h1
+                                    class="text-pretty font-semibold text-3xl lg:text-4xl"
+                                >
+                                    Digite o curso para ver todos detalhes
+                                </h1>
+                            </label>
+
+                            <Search />
+                        </search>
+
+                        <div class="space-y-1.5">
+                            <h2 class="font-bold text-xl flex gap-1">
+                                {
+                                    relatedCourses ? (
+                                        <>
+                                            <Icon
+                                                name="puzzle-piece"
+                                                class="size-6"
+                                            />
+                                            <span>Cursos relacionados</span>
+                                        </>
+                                    ) : (
+                                        <>
+                                            <Icon
+                                                name="arrow-trending-up"
+                                                class="size-6"
+                                            />
+                                            <span>Cursos mais procurados</span>
+                                        </>
+                                    )
+                                }
+                            </h2>
+
+                            <Trends relatedCourses={relatedCourses} />
+                        </div>
+                    </div>
+                </div>
+            </dialog>
+        </Container>
+    </nav>
+</flyout-menu>
+
+<script>
+    class FlyoutMenu extends HTMLElement {
+        constructor() {
+            super();
+            this._open = false;
+        }
+
+        connectedCallback() {
+            const menu = this.querySelector("dialog") as HTMLDialogElement;
+            const button = this.querySelector(
+                "button[data-toggle=menu]",
+            ) as HTMLButtonElement;
+            const close = this.querySelector(
+                "button[data-dismiss]",
+            ) as HTMLButtonElement;
+
+            close.addEventListener("click", () => {
+                menu.close();
+            });
+
+            button.addEventListener("click", () => {
+                if (this._open) {
+                    menu.close();
+                } else {
+                    menu.show();
+                }
+
+                this._open = !this._open;
+            });
+
+            menu.addEventListener("blur", () => {
+                if (!menu.contains(document.activeElement)) {
+                    menu.close();
+                }
+            });
+
+            menu.addEventListener("close", () => {
+                this._open = false;
+            });
+
+            document.addEventListener("touchstart", (e) => {
+                const target = e.target as HTMLElement;
+
+                if (menu.contains(target)) {
+                    return;
+                }
+
+                if (target.closest("button[data-toggle=menu]")) {
+                    return;
+                }
+
+                menu.close();
+            });
+        }
+    }
+
+    customElements.define("flyout-menu", FlyoutMenu);
+</script>
diff --git a/superpage/src/components/Course/HeroNav.astro b/superpage/src/components/Course/HeroNav.astro
deleted file mode 100644
index d495aab..0000000
--- a/superpage/src/components/Course/HeroNav.astro
+++ /dev/null
@@ -1,111 +0,0 @@
----
-import { Icon } from "astro-icon/components";
-import Container from "../Container.astro";
-import BuyDropdown from "./BuyDropdown.astro";
-import Trends from "~/components/Trends.astro";
-import Search from "~/components/Search.astro";
-
-import { getEntries } from "astro:content";
-const { title, ...data } = Astro.props;
-const relatedCourses = data?.relatedCourses
-    ? await getEntries(data.relatedCourses)
-    : null;
----
-
-<nav class="sticky bg-lime-400 top-0 z-10 drop-shadow shadow-sm">
-    <Container class="flex items-center relative py-3">
-        <button
-            data-toggle="menu"
-            data-target="#heromenu"
-            class="text-black font-medium cursor-pointer lg:bg-white/15 hover:outline lg:border border-black lg:py-0.5 lg:px-2.5 rounded-lg transition flex items-center gap-1"
-        >
-            <div class="truncate max-w-36 sm:max-w-72">
-                {title}
-            </div>
-            <Icon name="chevron-down" aria-hidden="true" class="size-4 mt-1" />
-        </button>
-
-        <BuyDropdown class="ml-auto" {...Astro.props} />
-        <dialog
-            id="heromenu"
-            class="absolute top-full translate-y-1 w-full bg-transparent max-lg:px-2.5"
-            closedby="any"
-        >
-            <div class="text-black bg-lime-400 rounded-xl lg:rounded-2xl">
-                <div class="lg:w-1/2 mx-auto p-5 lg:py-24">
-                    <search class="space-y-5">
-                        <label for="search" class="block">
-                            <h1
-                                class="text-pretty font-semibold text-3xl lg:text-4xl"
-                            >
-                                Digite o curso para ver todos detalhes
-                            </h1>
-                        </label>
-
-                        <Search />
-                    </search>
-
-                    <div class="space-y-1.5">
-                        <h2 class="font-bold text-xl flex gap-1">
-                            {
-                                relatedCourses ? (
-                                    <>
-                                        <Icon
-                                            name="puzzle-piece"
-                                            class="size-6"
-                                        />
-                                        <span>Cursos relacionados</span>
-                                    </>
-                                ) : (
-                                    <>
-                                        <Icon
-                                            name="arrow-trending-up"
-                                            class="size-6"
-                                        />
-                                        <span>Cursos mais procurados</span>
-                                    </>
-                                )
-                            }
-                        </h2>
-
-                        <Trends relatedCourses={relatedCourses} />
-                    </div>
-                </div>
-            </div>
-        </dialog>
-    </Container>
-</nav>
-
-<script>
-    const button = document.querySelector(
-        "[data-toggle=menu]",
-    ) as HTMLButtonElement;
-
-    button?.addEventListener("click", (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        const target = button.dataset.target as string;
-        const menu = document.querySelector(target) as HTMLDialogElement;
-        const close = menu.querySelector("[data-dismiss]") as HTMLButtonElement;
-
-        document.documentElement.classList.toggle("overflow-hidden");
-        menu.show();
-
-        menu.addEventListener(
-            "close",
-            () => {
-                document.documentElement.classList.toggle("overflow-hidden");
-            },
-            { once: true },
-        );
-
-        close?.addEventListener(
-            "click",
-            () => {
-                menu.close();
-            },
-            { once: true },
-        );
-    });
-</script>
diff --git a/superpage/src/pages/[slug].astro b/superpage/src/pages/[slug].astro
index c8b900f..01a1f89 100644
--- a/superpage/src/pages/[slug].astro
+++ b/superpage/src/pages/[slug].astro
@@ -4,7 +4,7 @@ import { Picture } from "astro:assets";
 import { Icon } from "astro-icon/components";
 import Layout from "~/layouts/Layout.astro";
 import Container from "~/components/Container.astro";
-import HeroNav from "~/components/Course/HeroNav.astro";
+import FlyoutMenu from "~/components/Course/FlyoutMenu.astro";
 import BuyButton from "./_components/BuyButton.astro";
 
 import placeholder from "~/assets/placeholder.png";
@@ -34,7 +34,7 @@ const { Content } = await render(course);
     </Fragment>
 
     <Fragment slot="nav">
-        <HeroNav {...data} />
+        <FlyoutMenu {...data} />
     </Fragment>
 
     <section class="space-y-6 lg:space-y-24">
diff --git a/superpage/src/styles/global.css b/superpage/src/styles/global.css
index 2deeef2..b357608 100644
--- a/superpage/src/styles/global.css
+++ b/superpage/src/styles/global.css
@@ -11,10 +11,14 @@ body {
     @apply text-white bg-black antialiased;
 }
 
-html:not(.overflow-hidden) {
+html:not(:has(dialog[open])) {
     @apply scroll-pt-22 lg:scroll-pt-32;
 }
 
+html:has(dialog[open]) {
+    @apply overflow-hidden;
+}
+
 /* Pagefind */
 .pagefind-ui__form {
     @apply flex;