diff --git a/src/components/Home.jsx b/src/components/Home.jsx
index 64e5a01..f8de9ce 100644
--- a/src/components/Home.jsx
+++ b/src/components/Home.jsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useRef } from 'react';
-import FeaturedRoadmaps from './FeaturedRoadmaps';
-import MailingListDialog from './MailingListDialog';
-import roadmaps from '../roadmaps.json';
-import './Home.css'; // Import the custom CSS file
+import React, { useState, useEffect, useRef } from "react";
+import FeaturedRoadmaps from "./FeaturedRoadmaps";
+import MailingListDialog from "./MailingListDialog";
+import roadmaps from "../roadmaps.json";
+import "./Home.css"; // Import the custom CSS file
 
 const Home = () => {
   const [dialogOpen, setDialogOpen] = useState(false);
@@ -14,11 +14,11 @@ const Home = () => {
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            entry.target.classList.add('animate-fade-in');
+            entry.target.classList.add("animate-fade-in");
           }
         });
       },
-      { threshold: 0.1 }
+      { threshold: 0.1 },
     );
 
     sectionsRef.current.forEach((section) => {
@@ -49,7 +49,7 @@ const Home = () => {
   };
 
   return (
-    <div className={`page-content ${menuOpen ? 'dropdown-active' : ''}`}>
+    <div className={`page-content ${menuOpen ? "dropdown-active" : ""}`}>
       <div className="flex flex-col items-center justify-center w-full">
         <div
           className="w-full p-8 flex flex-col md:flex-row items-center justify-center min-h-screen bg-gray-100 opacity-0"
@@ -62,7 +62,8 @@ const Home = () => {
               <span className="font-semibold">with a head start</span>
             </h2>
             <p className="mt-4 text-lg max-w-2xl">
-              Empowering minorities to overcome barriers and succeed in the tech industry with confidence.
+              Empowering minorities to overcome barriers and succeed in the tech
+              industry with confidence.
             </p>
             <button
               className="mt-8 px-6 py-3 bg-green-600 text-white text-lg font-semibold rounded hover:bg-green-700 transition duration-300"
@@ -72,7 +73,11 @@ const Home = () => {
             </button>
           </div>
           <div className="mt-8 md:mt-0 md:w-1/2 flex justify-center">
-            <img src="/hero-logo.png" alt="Tech illustration" className="w-full max-w-md rounded-lg shadow-lg" />
+            <img
+              src="/hero-logo.png"
+              alt="Tech illustration"
+              className="w-full max-w-md rounded-lg shadow-lg"
+            />
           </div>
         </div>
 
@@ -97,9 +102,13 @@ const Home = () => {
         >
           <h2 className="text-4xl font-bold mb-8">Join Our Community</h2>
           <p className="text-lg max-w-2xl mx-auto">
-            Connect with like-minded individuals, share your journey, and get support from our community.
+            Connect with like-minded individuals, share your journey, and get
+            support from our community.
           </p>
-          <button className="mt-8 px-6 py-3 bg-green-600 text-white text-lg font-semibold rounded hover:bg-green-700 transition duration-300">
+          <button
+            onClick={handleDialogOpen}
+            className="mt-8 px-6 py-3 bg-green-600 text-white text-lg font-semibold rounded hover:bg-green-700 transition duration-300"
+          >
             Join Now
           </button>
         </div>
@@ -110,4 +119,5 @@ const Home = () => {
   );
 };
 
-export default Home;
\ No newline at end of file
+export default Home;
+