diff --git a/superpage/src/components/Course/Plans.astro b/superpage/src/components/Course/Plans.astro
index 73962ad..4f8621c 100644
--- a/superpage/src/components/Course/Plans.astro
+++ b/superpage/src/components/Course/Plans.astro
@@ -2,140 +2,105 @@
 import { Icon } from "astro-icon/components";
 import Container from "~/components/Container.astro";
 import Contact from "./Contact.jsx";
+import Modal from "~/components/Modal.astro";
 ---
 
-<div
-    x-data="{ open: false, plan: null }"
-    x-on:keydown.esc.prevent.stop="open = false"
-    x-effect="document.body.classList.toggle('overflow-hidden', open);
+{/* Modal */}
+<Modal id="planform">
+    <h1 class="text-3xl lg:text-4xl font-medium">
+        Preencha os dados da sua empresa
+    </h1>
+    <Contact url={Astro.request.url} client:load />
+</Modal>
 
-    if (plan) {
-      $refs.plan.dataset.plan = plan;
-      window.dispatchEvent(new CustomEvent('planUpdate', { detail: plan }));
-    }"
->
-    {/* Modal */}
-    <div style="display: none;" x-show="open">
-        <div class="fixed inset-0 z-40 overflow-y-auto">
-            {/* Backdrop */}
+<Container {...Astro.props}>
+    <section class="space-y-5 lg:space-y-10 xl:w-4/6 mx-auto">
+        <h1 class="text-pretty text-4xl lg:text-6xl">
+            Modelos de contratação para sua empresa
+        </h1>
+        <div class="grid lg:grid-cols-3 gap-5">
             <div
-                x-on:click="open = false"
-                aria-hidden="true"
-                class="fixed inset-0 bg-gray-900/20 backdrop-blur backdrop-filter"
+                class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
             >
-            </div>
-
-            <div class="flex justify-center items-center lg:h-full p-2.5">
-                <div
-                    class="lg:w-1/4 bg-black p-5 lg:p-12 rounded-2xl border border-white/15 space-y-5 drop-shadow relative"
+                <h1
+                    class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
                 >
-                    {/* Close button */}
-                    <button
-                        x-on:click="open = false"
-                        class="cursor-pointer absolute top-2.5 right-2.5 lg:top-5 lg:right-5 border border-white rounded-full p-px"
-                    >
-                        <Icon name="x-mark" class="size-4" />
-                    </button>
-
-                    <h1 class="text-3xl lg:text-4xl font-medium">
-                        Preencha os dados da sua empresa
-                    </h1>
-                    <div x-ref="plan" id="plan-ref" data-plan=""></div>
-                    <Contact url={Astro.request.url} client:load />
-                </div>
+                    EDUSEG<sup>&reg;</sup> Flexível
+                </h1>
+                <h2 class="text-xl/6 font-semibold">
+                    Catálogo completo sempre à sua disposição
+                </h2>
+                <ul class="list-disc max-lg:pl-3 space-y-1.5 text-sm/5">
+                    <li>Acesse todos os cursos imediatamente</li>
+                    <li>Pague apenas pelo que usar, mês a mês</li>
+                    <li>Gestão e autonomia direto pela plataforma</li>
+                </ul>
+                <p class="mt-auto">
+                    Ideal para empresas que treinam continuamente e precisam de
+                    agilidade.
+                </p>
+                <button
+                    data-toggle="modal"
+                    data-target="#planform"
+                    class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
+                >
+                    Saiba mais
+                </button>
+            </div>
+            <div
+                class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
+            >
+                <h1
+                    class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
+                >
+                    EDUSEG<sup>&reg;</sup> In-Company
+                </h1>
+                <h2 class="text-xl/6 font-semibold">
+                    Treinamento presencial na sua empresa
+                </h2>
+                <ul class="list-disc max-lg:pl-3 space-y-1.5 text-sm/5">
+                    <li>Atendemos nas principais cidades do Brasil</li>
+                    <li>Instrutores especialistas com vivência prática</li>
+                    <li>Ideal para grandes turmas ou treinamentos práticos</li>
+                </ul>
+                <p class="mt-auto">
+                    Solução sob medida, direto no seu ambiente de trabalho.
+                </p>
+                <button
+                    data-toggle="modal"
+                    data-target="#planform"
+                    class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
+                >
+                    Saiba mais
+                </button>
+            </div>
+            <div
+                class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
+            >
+                <h1
+                    class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
+                >
+                    EDUSEG<sup>&reg;</sup> Conteúdo
+                </h1>
+                <h2 class="text-xl/6 font-semibold">
+                    Leve nosso conteúdo para sua plataforma
+                </h2>
+                <ul class="list-disc max-lg:pl-3 space-y-1.5 text-sm/5">
+                    <li>Customização completa com sua identidade visual</li>
+                    <li>Entregamos em formato SCORM para qualquer LMS</li>
+                    <li>Ideal para empresas com ambiente EAD próprio</li>
+                </ul>
+                <p class="mt-auto">
+                    Seu time com o nosso conteúdo, na sua plataforma.
+                </p>
+                <button
+                    data-toggle="modal"
+                    data-target="#planform"
+                    class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
+                >
+                    Saiba mais
+                </button>
             </div>
         </div>
-    </div>
-    {/* Modal End */}
-
-    <Container {...Astro.props}>
-        <section class="space-y-5 lg:space-y-10 xl:w-4/6 mx-auto">
-            <h1 class="text-pretty text-4xl lg:text-6xl">
-                Modelos de contratação para sua empresa
-            </h1>
-            <div class="grid lg:grid-cols-3 gap-5">
-                <div
-                    class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
-                >
-                    <h1
-                        class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
-                    >
-                        EDUSEG<sup>&reg;</sup> Flexível
-                    </h1>
-                    <h2 class="text-xl/6 font-semibold">
-                        Catálogo completo sempre à sua disposição
-                    </h2>
-                    <ul class="list-disc max-lg:pl-3 space-y-1.5 text-sm/5">
-                        <li>Acesse todos os cursos imediatamente</li>
-                        <li>Pague apenas pelo que usar, mês a mês</li>
-                        <li>Gestão e autonomia direto pela plataforma</li>
-                    </ul>
-                    <p class="mt-auto">
-                        Ideal para empresas que treinam continuamente e precisam
-                        de agilidade.
-                    </p>
-                    <button
-                        x-on:click="open = true; plan = 'flexivel'"
-                        class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
-                    >
-                        Saiba mais
-                    </button>
-                </div>
-                <div
-                    class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
-                >
-                    <h1
-                        class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
-                    >
-                        EDUSEG<sup>&reg;</sup> In-Company
-                    </h1>
-                    <h2 class="text-xl/6 font-semibold">
-                        Treinamento presencial na sua empresa
-                    </h2>
-                    <ul class="list-disc max-lg:pl-3 space-y-1.5 text-sm/5">
-                        <li>Atendemos nas principais cidades do Brasil</li>
-                        <li>Instrutores especialistas com vivência prática</li>
-                        <li>
-                            Ideal para grandes turmas ou treinamentos práticos
-                        </li>
-                    </ul>
-                    <p class="mt-auto">
-                        Solução sob medida, direto no seu ambiente de trabalho.
-                    </p>
-                    <button
-                        x-on:click="open = true; plan = 'incompany'"
-                        class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
-                    >
-                        Saiba mais
-                    </button>
-                </div>
-                <div
-                    class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
-                >
-                    <h1
-                        class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
-                    >
-                        EDUSEG<sup>&reg;</sup> Conteúdo
-                    </h1>
-                    <h2 class="text-xl/6 font-semibold">
-                        Leve nosso conteúdo para sua plataforma
-                    </h2>
-                    <ul class="list-disc max-lg:pl-3 space-y-1.5 text-sm/5">
-                        <li>Customização completa com sua identidade visual</li>
-                        <li>Entregamos em formato SCORM para qualquer LMS</li>
-                        <li>Ideal para empresas com ambiente EAD próprio</li>
-                    </ul>
-                    <p class="mt-auto">
-                        Seu time com o nosso conteúdo, na sua plataforma.
-                    </p>
-                    <button
-                        x-on:click="open = true; plan = 'conteudo'"
-                        class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
-                    >
-                        Saiba mais
-                    </button>
-                </div>
-            </div>
-        </section>
-    </Container>
-</div>
+    </section>
+</Container>
diff --git a/superpage/src/components/Modal.astro b/superpage/src/components/Modal.astro
new file mode 100644
index 0000000..61a453f
--- /dev/null
+++ b/superpage/src/components/Modal.astro
@@ -0,0 +1,56 @@
+---
+import { Icon } from "astro-icon/components";
+---
+
+<dialog
+    closedby="any"
+    class="text-white bg-black fixed inset-1/2 w-full lg:w-112 -translate-1/2 p-5 lg:p-12 rounded-2xl border border-white/15 backdrop:bg-black/50 backdrop:backdrop-blur backdrop:backdrop-filter"
+    {...Astro.props}
+>
+    <button
+        class="cursor-pointer fixed top-2.5 right-2.5 lg:top-5 lg:right-5 border border-white rounded-full p-px"
+        data-dismiss
+    >
+        <Icon name="x-mark" class="size-4" />
+    </button>
+
+    <div class="space-y-5">
+        <slot />
+    </div>
+</dialog>
+
+<script>
+    const modals = document.querySelectorAll("[data-toggle='modal']");
+
+    function openModal(modal: HTMLDialogElement) {
+        const close = modal.querySelector("[data-dismiss]");
+
+        modal.showModal();
+        document.body.classList.toggle("overflow-y-hidden");
+
+        modal.addEventListener(
+            "close",
+            () => {
+                document.body.classList.toggle("overflow-y-hidden");
+            },
+            { once: true },
+        );
+
+        if (close) {
+            close.addEventListener(
+                "click",
+                () => {
+                    modal.close();
+                },
+                { once: true },
+            );
+        }
+    }
+
+    modals.forEach((el) => {
+        const target = el.dataset.target;
+        const modal = document.querySelector(target);
+
+        el.addEventListener("click", () => openModal(modal));
+    });
+</script>