diff --git a/app/frontend/pages/landing/index.tsx b/app/frontend/pages/landing/index.tsx
index b4dea3434..7451440c1 100644
--- a/app/frontend/pages/landing/index.tsx
+++ b/app/frontend/pages/landing/index.tsx
@@ -20,6 +20,7 @@ export default function LandingIndex() {
   const card3Ref = useRef<HTMLDivElement>(null)
   const hoveredCardRef = useRef<number | null>(null)
   const howSectionRef = useRef<HTMLElement>(null)
+  const navRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     gsap.registerPlugin(ScrollTrigger)
@@ -33,6 +34,7 @@ export default function LandingIndex() {
         scrollTrigger: { trigger: hero, start: 'top top', end: 'bottom top', scrub: true },
       })
 
+
       const el = falloutRef.current
       const container = containerRef.current
       gsap
@@ -79,12 +81,24 @@ export default function LandingIndex() {
       })
     })
 
+    const hero = document.getElementById('hero')!
+    gsap.set(navRef.current, { y: -80 })
+    const navTrigger = ScrollTrigger.create({
+      trigger: hero,
+      start: 'bottom top',
+      onEnter: () => gsap.to(navRef.current, { y: 0, duration: 0.5, ease: 'power2.out' }),
+      onLeaveBack: () => gsap.to(navRef.current, { y: -80, duration: 0.4, ease: 'power2.in' }),
+    })
+
     return () => {
       ctx.revert()
+      navTrigger.kill()
       stickerCleanups.forEach((fn) => fn())
     }
   }, [])
 
+  const [videoOpen, setVideoOpen] = useState(true)
+  const iframeRef = useRef<HTMLIFrameElement>(null)
   const [email, setEmail] = useState('')
   const [submitting, setSubmitting] = useState(false)
   const [currentSection, setCurrentSection] = useState('overview')
@@ -159,7 +173,9 @@ export default function LandingIndex() {
   ]
 
   return (
+    <>
     <div ref={containerRef} className="w-screen h-full flex flex-col justify-center overflow-hidden">
+      
       <title>Fallout: Hardware Hackathon</title>
       <meta
         name="description"
@@ -225,12 +241,49 @@ export default function LandingIndex() {
           </Frame>
           <FlashMessages />
           <p className="text-white text-base -mt-4">For teenagers 13-18</p>
-          <a href={shared.sign_in_path} className="text-white text-sm underline -mt-2">
-            Sign in with HCA
-          </a>
+          <a href={shared.sign_in_path} className="text-white text-sm underline -mt-2">Sign in with HCA</a>
         </div>
       </section>
 
+      {/* <section className="bg-blue w-full h-auto text-5xl text-center text-white flex items-center justify-center py-30">
+        <h2 className="max-w-[50%]">
+         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet  tempus ex, vitae pretium lectus. Aliquam mau
+        </h2>
+
+      </section> */}
+
+      <section id="how" className="bg-blue py-20 pt-40 px-4 md:px-10 lg:px-20 xl:px-40 2xl:px-60 flex flex-col sm:flex-row gap-10 px-8 text-white text-2xl 2xl:text-3xl leading-tight relative ">
+        {/* <img src="/arrow.png" className="absolute left-[33%] translate-x-1/2 -top-20 z-20" />
+        <img src="/arrow2.png" className="absolute left-[56%] translate-x-1/2 -bottom-20 z-20" /> */}
+
+        <div ref={card1Ref} onMouseEnter={() => animateHowCards(0, true)} onMouseLeave={() => animateHowCards(0, false)} className="relative w-full sm:w-[33%] bg-dark-brown min-h-60 aspect-5/6 rounded-lg p-4 bg-cover hover:border-8 border-green bg-center outline-2 outline-beige hover:shadow-sm group" style={{ backgroundImage: "url('/1.png')" }}>
+          <div className="-ml-4 pl-4 pb-2">
+            <span className="py-2 text-shadow-lg text-shadow-dark-brown">Design your project!</span>
+          </div>
+          <div className="absolute top-0 right-0 w-16 h-16 bg-beige rounded-tr-lg group-hover:rounded-tr-none rounded-bl-2xl flex justify-center items-center">
+            <span className="text-4xl font-bold text-dark-brown">1</span>
+          </div>
+        </div>
+
+        <div ref={card2Ref} onMouseEnter={() => animateHowCards(1, true)} onMouseLeave={() => animateHowCards(1, false)} className="relative w-full sm:w-[33%] bg-dark-brown min-h-60 rounded-lg p-4 hover:border-8 border-green flex flex-col aspect-5/6 bg-cover bg-center outline-2 outline-beige hover:shadow-sm group" style={{ backgroundImage: "url('/2.png')" }}>
+          <span className="text-shadow-lg text-shadow-dark-brown pr-16">Buy the parts with your grant & Build your project!</span>
+
+          <div className="absolute top-0 right-0 w-16 h-16 bg-beige rounded-tr-lg group-hover:rounded-tr-none rounded-bl-2xl flex justify-center items-center">
+            <span className="text-4xl font-bold text-dark-brown">2</span>
+          </div>
+        </div>
+
+        <div ref={card3Ref} onMouseEnter={() => animateHowCards(2, true)} onMouseLeave={() => animateHowCards(2, false)} className="hover:shadow-sm group relative w-full sm:w-[33%] min-h-60 rounded-lg flex flex-col hover:border-8 border-green aspect-5/6 bg-cover bg-center text-dark-brown outline-2 outline-beige" style={{ backgroundImage: "url('/3.png')" }}>
+          {/* <h1 className="text-5xl font-bold text-coral bg-dark-brown w-fit py-2 px-4 rounded-lg m-4">Share</h1> */}
+          <div className="absolute top-0 right-0 w-16 h-16 bg-beige rounded-tr-lg rounded-bl-2xl group-hover:rounded-tr-none flex justify-center items-center">
+            <span className="text-4xl font-bold text-dark-brown">3</span>
+          </div>
+          <span className="mt-auto bg-[#fdf6e8] p-4 w-full rounded-lg">Post your project online and earn your <span className="text-coral font-bold">ticket to Fallout</span>!</span>
+
+        </div>
+      </section>
+
+      
       <div className="bg-[#41D2FF] px-2 md:px-8 lg:px-18 xl:px-36 2xl:px-54 py-16 w-full h-auto">
         <Frame className="w-full h-[80vh] h-full">
           <div className="w-full h-full flex flex-col sm:flex-row justify-between text-brown px-4 lg:px-8 py-4 lg:py-8">
@@ -424,6 +477,50 @@ export default function LandingIndex() {
         </a>
       </footer>
     </div>
+    <div className="fixed bottom-10 right-10 w-100 h-auto rounded-lg overflow-hidden bg-[#37B576] z-50 flex flex-col border-2 border-beige">
+      <div className="w-full flex justify-between items-center px-4 py-2 cursor-pointer" onClick={() => {
+        setVideoOpen((v) => {
+          const next = !v
+          const msg = next ? 'playVideo' : 'pauseVideo'
+          iframeRef.current?.contentWindow?.postMessage(`{"event":"command","func":"${msg}","args":""}`, '*')
+          return next
+        })
+      }}>
+        <span className="font-medium text-beige text-2xl">{videoOpen ? 'Close Video' : 'Open Video'}</span>
+        <img src="/arrow.svg" className={`h-5 w-auto transition-transform duration-300 ${videoOpen ? 'rotate-180' : 'rotate-0'}`} />
+      </div>
+      <div className={`aspect-16/9 w-full h-auto p-3  pt-0${videoOpen ? '' : ' hidden'}`}>
+          <iframe
+            width="100%"
+            height="100%"
+            className="rounded-lg border-beige border-2"
+            ref={iframeRef}
+            src="https://www.youtube.com/embed/SrP2ZeNHm6s?si=orljJtYrC7EGSNzi&controls=0&modestbranding=1&rel=0&autoplay=1&&enablejsapi=1"
+            title="YouTube video player"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin"
+            allowFullScreen>
+          </iframe>
+        </div>
+    </div>
+    {/* <div ref={navRef} className="fixed top-0 left-0 right-0 z-50 flex items-center justify-center gap-4 px-6 py-3 pointer-events-none">
+      <div className="grid grid-cols-3 items-center w-full  px-4 py-2 pointer-events-auto">
+        <div />
+        <img src="/fallout.svg" alt="fallout" className="h-8 w-auto place-self-center mix-blend-multiply" />
+        <div className="flex justify-end">
+          <form onSubmit={handleSubmit}>
+            <button
+              className="cursor-pointer disabled:opacity-50 border-2 border-dark-brown bg-brown text-light-brown text-xl font-bold whitespace-nowrap px-3 py-2 rounded-lg"
+              aria-label="Submit"
+              disabled={submitting}
+            >
+              {submitting ? '...' : 'START'}
+            </button>
+          </form>
+        </div>
+      </div>
+
+    </div> */}
+    </>
   )
 }
 
diff --git a/app/frontend/styles/application.css b/app/frontend/styles/application.css
index 61accca48..2569c3217 100644
--- a/app/frontend/styles/application.css
+++ b/app/frontend/styles/application.css
@@ -13,7 +13,7 @@
   --breakpoint-2xs: 320px;
   --breakpoint-xs: 480px;
 
-  --color-blue: #38c9ff;
+  --color-blue: #41D2FF;
   --color-light-blue:#C3EFFF;
   --color-dark-brown: #61453a;
   --color-brown: #9f715d;
@@ -21,7 +21,7 @@
   --color-beige: #FFFCF5;
 
   --color-light-green: #c8e6d8;
-  --color-green: #A8C866;
+  --color-green: #37B576;
   /* --color-light-blue: #c3efff; */
   --color-yellow: #ffebad;
   --color-pink: #fc90d2;
diff --git a/public/arrow.png b/public/arrow.png
deleted file mode 100644
index 111a702cc..000000000
Binary files a/public/arrow.png and /dev/null differ
diff --git a/public/arrow.svg b/public/arrow.svg
new file mode 100644
index 000000000..9e59f2d41
--- /dev/null
+++ b/public/arrow.svg
@@ -0,0 +1,3 @@
+<svg width="43" height="28" viewBox="0 0 43 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.1458 0.605397L0.903016 13.0035C0.328369 13.3944 0 13.9296 0 14.4898V25.086C0 25.9305 0.738831 26.6934 1.87601 27.0175C3.01319 27.3415 4.32054 27.1617 5.19006 26.5639L21.2832 15.4995L37.3764 26.5638C38.2459 27.1616 39.5534 27.3414 40.6905 27.0174C41.8276 26.6933 42.5665 25.9304 42.5665 25.0859V14.4897C42.5665 13.9295 42.2411 13.3943 41.6635 13.0034L23.4207 0.605298C22.2379 -0.201526 20.3315 -0.201525 19.1458 0.605397Z" fill="white"/>
+</svg>
diff --git a/public/arrow2.png b/public/arrow2.png
deleted file mode 100644
index 853409b79..000000000
Binary files a/public/arrow2.png and /dev/null differ