diff --git a/packages/nextjs/.gitignore b/packages/nextjs/.gitignore
index 6985d55..16dad0e 100644
--- a/packages/nextjs/.gitignore
+++ b/packages/nextjs/.gitignore
@@ -26,6 +26,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local
diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
index c6e3ab6..1c8d59a 100644
--- a/packages/nextjs/components/Footer.tsx
+++ b/packages/nextjs/components/Footer.tsx
@@ -5,7 +5,7 @@ import Image from "next/image";
  */
 export const Footer = () => {
   return (
-    <div className="bg-[#182232] lg:p-12 p-8 flex items-center justify-center">
+    <div className="bg-[#182232] lg:p-12 p-8 flex items-center justify-center text-[16px]">
       <div className="grid grid-cols-12 lg:gap-8 gap-3 max-w-7xl">
         <div className="col-span-12 lg:col-span-6 flex flex-col">
           <div className="flex flex-col">
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index f6e720a..df75733 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -8,7 +8,7 @@ import TrackedLink from "~~/components/TrackedLink";
  */
 export const Header = () => {
   return (
-    <div className="navbar min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2 py-4">
+    <div className="navbar min-h-0 flex-shrink-0 justify-between px-0 py-4 pb-8 md:pb-4 sm:px-2 bg-[#EFFBCA]">
       <div className="navbar-start w-auto lg:w-1/2">
         <Link href="/" passHref className="flex items-center gap-2 ml-4 mr-6">
           <div className="flex relative w-[130px] md:w-[150px] h-[36px]">
@@ -16,7 +16,7 @@ export const Header = () => {
           </div>
         </Link>
       </div>
-      <div className="navbar-end flex-grow mr-4 space-x-6">
+      <div className="navbar-end flex-grow mr-4 space-x-6 z-10">
         <TrackedLink
           id="buidlguidl:app"
           href="https://app.buidlguidl.com"
diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index e4b8997..fe76984 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import Link from "next/link";
 import type { GetStaticProps, NextPage } from "next";
 import { BuildCard } from "~~/components/BuildCard";
 import { Card } from "~~/components/ChallengeCard";
@@ -23,18 +24,32 @@ const Home: NextPage<{ stats: Stats }> = ({ stats }) => {
     <>
       <MetaHeader />
       {/* Hero section with header */}
-      <div className="bg-[url(/assets/hero.png)] min-h-screen bg-cover bg-center">
+      <div className="relative h-[70vh] md:min-h-screen flex flex-col">
+        <div className="absolute h-1/4 w-full top-0 left-0 hero-top-gradient"></div>
         <Header />
-        <div className="flex justify-center">
-          <h1 className="text-center text-3xl lg:text-5xl mt-6 lg:mt-8 max-w-md lg:max-w-2xl px-3">
-            Learn, build, and thrive on Ethereum
-          </h1>
+        <div className="bg-[url(/assets/hero.png)] bg-[#EFFBCA] bg-cover md:bg-center bg-[position:40%_0] flex-grow">
+          <div className="flex justify-center">
+            <h1 className="text-center z-10 text-2xl max-w-xs lg:text-5xl lg:mt-8 lg:max-w-2xl px-3">
+              Learn, build, and thrive on Ethereum
+            </h1>
+          </div>
+        </div>
+        <div className="absolute h-1/4 w-full bottom-0 left-0 hero-bottom-gradient flex items-end justify-center">
+          <Link href="#start-building-on-ethereum" className="hidden lg:block">
+            <Image
+              src="/assets/down-arrow.svg"
+              alt="diamon icon"
+              width={25}
+              height={25}
+              className="mb-3 cursor-pointer animate-bounce-interval"
+            />
+          </Link>
         </div>
       </div>
 
       {/* Star Building on Ethereum */}
-      <div className="bg-white">
-        <div className="container max-w-[90%] lg:max-w-6xl m-auto py-16 lg:py-20 lg:px-12 flex flex-col-reverse lg:flex-row items-center gap-5 lg:gap-0">
+      <div className="bg-white" id="start-building-on-ethereum">
+        <div className="container max-w-[90%] lg:max-w-6xl m-auto py-12 lg:py-20 lg:px-12 flex flex-col lg:flex-row items-center gap-5 lg:gap-0">
           <div className="space-y-6">
             <h2 className="text-3xl lg:text-5xl lg:w-3/4 text-center lg:text-left">Start Building on Ethereum</h2>
             <ul className="list-disc list-inside flex flex-col space-y-3 m-auto lg:mx-0 max-w-[300px] lg:max-w-none">
diff --git a/packages/nextjs/public/assets/down-arrow.svg b/packages/nextjs/public/assets/down-arrow.svg
new file mode 100644
index 0000000..e24ce79
--- /dev/null
+++ b/packages/nextjs/public/assets/down-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M12.5431 11.6649V0.0629883H9.47701V11.6649H0.238525V14.5796H3.32474V17.4754H6.39079V20.3901H9.47701V23.2858H12.5431V20.3901H15.6091V17.4754H18.6953V14.5796H21.7614V11.6649H12.5431Z" fill="#FFFCFC"/>
+</svg>
diff --git a/packages/nextjs/public/assets/hero.png b/packages/nextjs/public/assets/hero.png
index 2b2b347..3f5cdad 100644
Binary files a/packages/nextjs/public/assets/hero.png and b/packages/nextjs/public/assets/hero.png differ
diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css
index fcf5212..7547f52 100644
--- a/packages/nextjs/styles/globals.css
+++ b/packages/nextjs/styles/globals.css
@@ -17,6 +17,7 @@
 
 html {
   font-size: 18px;
+  scroll-behavior: smooth !important;
 }
 
 :root,
@@ -54,3 +55,12 @@ p {
 .btn.btn-ghost {
   @apply shadow-none;
 }
+
+.hero-top-gradient {
+  background: linear-gradient(180deg, #c3dbff 0%, rgba(217, 235, 229, 0.51) 66.15%, rgba(239, 251, 202, 0) 100%);
+}
+
+.hero-bottom-gradient {
+  background: linear-gradient(0deg, rgba(24, 34, 50, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+  background-blend-mode: multiply;
+}
diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
index 60219f4..4e27638 100644
--- a/packages/nextjs/tailwind.config.js
+++ b/packages/nextjs/tailwind.config.js
@@ -71,6 +71,24 @@ module.exports = {
         "space-grotesk": ["Space Grotesk", "sans-serif"],
         "neue-machina": ["PPNeueMachina", "sans-serif"],
       },
+      keyframes: {
+        "bounce-interval": {
+          "0%, 12.5%, 25%, 37.5%, 50%": {
+            transform: "translateY(-25%)",
+            "animation-timing-function": "cubic-bezier(0.8, 0, 1, 1)",
+          },
+          "6.25%, 18.75%, 31.25%, 43.5%": {
+            transform: "translateY(0)",
+            "animation-timing-function": "cubic-bezier(0, 0, 0.2, 1)",
+          },
+          "100%": {
+            transform: "translateY(-25%)",
+          },
+        },
+      },
+      animation: {
+        "bounce-interval": "bounce-interval 10s infinite",
+      },
     },
   },
 };