diff --git a/src/components/Hero/HeroSection.js b/src/components/Hero/HeroSection.js
index 257e744..9696a23 100644
--- a/src/components/Hero/HeroSection.js
+++ b/src/components/Hero/HeroSection.js
@@ -1,4 +1,5 @@
-import React, {useState} from "react";
+"use client"
+import { useState, useEffect } from "react";
 import heroText from "../../../public/images/HeroText.svg";
 import linkArrow from "../../../public/images/LinkArrow.svg";
 import regButton from "../../../public/images/RegisterButton.svg";
@@ -7,14 +8,13 @@ import HeroSectionImg from "../../../public/images/HeroSection.svg"
 
 function HeroSection() {
   const [isHovered, setIsHovered] = useState(false);
-
   return (
     <div
       className="relative w-full h-[2450px] no-repeat bg-cover bg-center"
       style={{ backgroundImage: `url(${HeroSectionImg.src})`, }}
     >
       <div className="flex flex-col justify-center items-center relative top-[6rem]">
-        <div className="flex relative py-8">
+        <div className="hero-logo flex relative py-8">
           <img
             src={heroText.src}
             alt="#"
@@ -22,26 +22,35 @@ function HeroSection() {
             className="w-[22rem] sm:w-[40rem] lg:w-[60rem]"
           />
         </div>
-        <div className="font-Minecraft text-2xl sm:text-4xl lg:text-6xl font-normal flex relative py-8 flex-col justify-center items-center">
+        <div className="hero-text font-Minecraft text-2xl sm:text-4xl lg:text-6xl font-normal flex relative py-8 flex-col justify-center items-center">
           <div className="flex relative">THINK OUTSIDE THE BOX</div>
           <div className="flex relative">HACK INSIDE IT</div>
         </div>
         <div className="flex relative flex-col justify-center items-center">
-          <div className="flex relative text-2xl font-bold font-Space-Grotesk">
+          <div className="flex relative text-2xl font-bold font-Space-Grotesk py-3">
             Dig deeper
           </div>
-          <div className="flex relative pb-6">
+          <div className="flex relative pb-6 animate-bounce">
             <img src={linkArrow.src} alt="#" />
           </div>
-          <div className="flex relative" 
-            onMouseEnter={() => setIsHovered(true)}
-            onMouseLeave={() => setIsHovered(false)}
+          <div className="flex justify-center items-center gap-2"
           >
+            <div
+
+              className="apply-button"
+              data-hackathon-slug="hackmol-5"
+              data-button-theme="light"
+              style={{ height: '44px', width: '100px' }}
+            ></div>
+          <div onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}>
+
             {isHovered ? (
-              <img src={regButtonHover.src} alt="#" />
+              < img src={regButtonHover.src} alt="#" />
             ) : (
-              <img src={regButton.src} alt="#" />
+            <img src={regButton.src} alt="#" />
             )}
+  </div>
           </div>
         </div>
       </div>
diff --git a/src/pages/_document.js b/src/pages/_document.js
index f311286..39f4f9f 100644
--- a/src/pages/_document.js
+++ b/src/pages/_document.js
@@ -50,7 +50,7 @@ export default function Document() {
 
                 <Main />
                 <NextScript />
-       {/* <Script src="https://apply.devfolio.co/v2/sdk.js" strategy="beforeInteractive"  defer async   ></Script> */}
+       <Script src="https://apply.devfolio.co/v2/sdk.js" strategy="beforeInteractive"  defer async   ></Script>
 
             </Html>
         )
diff --git a/src/pages/index.js b/src/pages/index.js
index 7bf6d41..e76b544 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -14,6 +14,7 @@ import Track from "../components/track";
 import Footer from "../components/Footer";
 import HeroSection from "../components/Hero/HeroSection";
 import JudgesSection from "../components/Judges/JudgesSection";
+import Script from "next/script";
 
 
 
@@ -21,7 +22,7 @@ import JudgesSection from "../components/Judges/JudgesSection";
 export default function Home() {
   return (
     <div>
-
+<Script src="https://apply.devfolio.co/v2/sdk.js" defer async    ></Script>
       <Banner2 />
       <div className="six">
         <Log />