diff --git a/superpage/src/components/Course/HeaderNav.astro b/superpage/src/components/Course/HeaderNav.astro
index edeb346..0a5ee1f 100644
--- a/superpage/src/components/Course/HeaderNav.astro
+++ b/superpage/src/components/Course/HeaderNav.astro
@@ -43,7 +43,7 @@ const { title } = Astro.props;
         </button>
     </Container>
 
-    <!-- Dropdown Menu -->
+    {/* Dropdown Menu */}
     <div
         x-cloak
         x-show="open"
@@ -73,7 +73,7 @@ const { title } = Astro.props;
                 </h6>
 
                 <div class="flex max-lg:flex-col gap-0.5 lg:gap-4">
-                    <!-- Search -->
+                    {/* Search */}
                     <label class="flex gap-1 items-center">
                         <span class="text-nowrap max-lg:w-2/5 text-right"
                             >Buscar por</span
@@ -85,7 +85,7 @@ const { title } = Astro.props;
                             <Icon name="magnifying-glass" class="size-5" />
                         </div>
                     </label>
-                    <!-- Search End -->
+                    {/* Search End */}
 
                     <!-- Filter -->
                     <label class="flex gap-1 items-center">
@@ -151,5 +151,5 @@ const { title } = Astro.props;
             </div>
         </Container>
     </div>
-    <!-- Dropdown Menu End -->
+    {/* Dropdown Menu End */}
 </nav>
diff --git a/superpage/src/components/Course/Plans.astro b/superpage/src/components/Course/Plans.astro
index 7f9d513..f6df8c6 100644
--- a/superpage/src/components/Course/Plans.astro
+++ b/superpage/src/components/Course/Plans.astro
@@ -1,4 +1,5 @@
 ---
+import { Icon } from "astro-icon/components";
 import Container from "~/components/Container.astro";
 import Form from "./Contact.jsx";
 ---
@@ -8,18 +9,29 @@ import Form from "./Contact.jsx";
     x-on:keydown.esc.prevent.stop="open = false"
     x-effect="document.body.classList.toggle('overflow-hidden', open)"
 >
+    {/* Modal */}
     <div style="display: none;" x-show="open">
         <div class="fixed inset-0 z-40 overflow-y-auto">
+            {/* Backdrop */}
             <div
                 x-on:click="open = false"
                 aria-hidden="true"
                 class="fixed inset-0 bg-gray-900/20 backdrop-blur backdrop-filter"
             >
             </div>
-            <div class="flex justify-center items-center p-2.5">
+
+            <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"
+                    class="lg:w-1/4 bg-black p-5 lg:p-12 rounded-2xl border border-white/15 space-y-5 drop-shadow relative"
                 >
+                    {/* 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"
+                    >
+                        <Icon name="x-mark" class="size-4" />
+                    </button>
+
                     <h1 class="text-3xl lg:text-4xl font-medium">
                         Preencha os dados da sua empresa
                     </h1>
@@ -28,6 +40,7 @@ import Form from "./Contact.jsx";
             </div>
         </div>
     </div>
+    {/* Modal End */}
 
     <Container {...Astro.props}>
         <section class="space-y-5 lg:space-y-10 xl:w-4/6 mx-auto">
@@ -57,7 +70,7 @@ import Form from "./Contact.jsx";
                     </p>
                     <button
                         x-on:click="open = true"
-                        class="font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
+                        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>
@@ -85,7 +98,7 @@ import Form from "./Contact.jsx";
                     </p>
                     <button
                         x-on:click="open = true"
-                        class="font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
+                        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>
@@ -111,7 +124,7 @@ import Form from "./Contact.jsx";
                     </p>
                     <button
                         x-on:click="open = true"
-                        class="font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
+                        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>