diff --git a/src/app/page.tsx b/src/app/page.tsx
index d0239e496..828b88743 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -13,10 +13,18 @@ export default function LandingPage() {
             visible: true,
             message: 'Peanut',
         },
-        cta: {
-            label: 'TRY NOW',
-            href: '/pay',
-        },
+        ctas: [
+            {
+                label: 'TRY NOW',
+                href: 'https://peanut.me',
+                primary: true,
+            },
+            {
+                label: 'LEGACY',
+                href: '/pay',
+                primary: false,
+            },
+        ],
     }
     const story = {
         marquee: {
@@ -154,14 +162,7 @@ export default function LandingPage() {
 
     return (
         <Layout className="!m-0 w-full !p-0">
-            <Hero heading={hero.heading} marquee={hero.marquee} cta={hero.cta} buttonVisible={buttonVisible} />
-            <FAQs heading={faqs.heading} questions={faqs.questions} marquee={faqs.marquee} />
-            <BuildOnUs />
-            <Story marquee={story.marquee} />
-            <Features sections={[features.sections[1]]} marquee={features.marquee} />
-            <div className="bg-pink-1">
-                <Mike lines={mike.lines} />
-            </div>
+            <Hero heading={hero.heading} marquee={hero.marquee} ctas={hero.ctas} buttonVisible={buttonVisible} />
         </Layout>
     )
 }
diff --git a/src/assets/icons/gitbook-black.png b/src/assets/icons/gitbook-black.png
new file mode 100644
index 000000000..416a92d1d
Binary files /dev/null and b/src/assets/icons/gitbook-black.png differ
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
index b0fd810dc..f58f2fcda 100644
--- a/src/assets/icons/index.ts
+++ b/src/assets/icons/index.ts
@@ -8,6 +8,7 @@ export { default as DROPDOWN_ICON } from './dropdown.svg'
 export { default as ETHEREUM_ICON } from './ethereum.svg'
 export { default as GAS_ICON } from './gas.svg'
 export { default as GITBOOK_ICON } from './gitbook.png'
+export { default as GITBOOK_BLACK_ICON } from './gitbook-black.png'
 export { default as GITHUB_INVERTED_ICON } from './github-inverted.png'
 export { default as GITHUB_ICON } from './github.png'
 export { default as MAIL_ICON } from './mail-icon.svg'
diff --git a/src/components/Global/Layout/index.tsx b/src/components/Global/Layout/index.tsx
index e2c31df9c..5f687200b 100644
--- a/src/components/Global/Layout/index.tsx
+++ b/src/components/Global/Layout/index.tsx
@@ -1,8 +1,7 @@
 'use client'
 
-import { Banner } from '@/components/Global/Banner'
 import Footer from '@/components/Global/Footer'
-import Header from '@/components/Global/Header'
+import { MigrationBanner } from '@/components/Global/MigrationBanner'
 import { useFooterVisibility } from '@/context/footerVisibility'
 import { Widget } from '@typeform/embed-react'
 import { Roboto_Flex } from 'next/font/google'
@@ -41,10 +40,9 @@ const Layout = ({ children, className }: LayoutProps) => {
                         font-family: ${roboto.style.fontFamily};
                     }
                 `}</style>
-                <div className={twMerge('relative bg-background', isTryNow && 'bg-background-1')}>
+                <div className={twMerge('relative bg-background', isTryNow && 'bg-pink-1')}>
                     <div className="flex min-h-screen flex-col ">
-                        <Header />
-                        <Banner />
+                        <MigrationBanner className="h-[7vh] min-h-[90px]" />
                         <div className="flex grow justify-center">
                             <div
                                 className={`4xl:max-w-full flex grow flex-col justify-center pb-2 pt-6 sm:mx-auto sm:px-16 md:px-5 lg:px-6 2xl:px-8 ${className}`}
@@ -54,7 +52,7 @@ const Layout = ({ children, className }: LayoutProps) => {
                             </div>
                         </div>
                         <FooterVisibilityObserver />
-                        <Footer />
+                        <MigrationBanner className="h-[7vh] min-h-[90px]" />
                         <Modal
                             visible={showModal}
                             onClose={() => {
diff --git a/src/components/Global/MigrationBanner/index.tsx b/src/components/Global/MigrationBanner/index.tsx
new file mode 100644
index 000000000..52c666280
--- /dev/null
+++ b/src/components/Global/MigrationBanner/index.tsx
@@ -0,0 +1,22 @@
+'use client'
+import React from 'react'
+import { MarqueeWrapper } from '../MarqueeWrapper'
+import { PEANUTMAN_CHEERING } from '@/assets'
+import handThumbsUp from '@/assets/illustrations/hand-thumbs-up.svg'
+
+interface MigrationBannerProps {
+    className?: string
+}
+
+export function MigrationBanner({ className = '' }: MigrationBannerProps) {
+    return (
+        <a href="https://peanut.me" className="block cursor-pointer transition-opacity hover:opacity-90">
+            <MarqueeWrapper backgroundColor="bg-yellow-1" direction="left">
+                <div className={`mx-4 flex items-center py-4 ${className}`}>
+                    <img src={handThumbsUp.src} alt="Migration Icon" className="animation-thumbsUp mr-3 h-8 w-8" />
+                    <span className="text-h2 font-bold uppercase tracking-wider">WE'VE MIGRATED TO PEANUT.ME</span>
+                </div>
+            </MarqueeWrapper>
+        </a>
+    )
+}
diff --git a/src/components/Global/TryNow/index.tsx b/src/components/Global/TryNow/index.tsx
index 3a7afe2f5..b5731bb93 100644
--- a/src/components/Global/TryNow/index.tsx
+++ b/src/components/Global/TryNow/index.tsx
@@ -1,15 +1,24 @@
-import { ARROW_UP_CIRCLE, CASHOUT_ICON, Eyes, STAR_OUTLINE_ICON } from '@/assets'
+import {
+    ARROW_UP_CIRCLE,
+    CASHOUT_ICON,
+    Eyes,
+    STAR_OUTLINE_ICON,
+    SMILEY_ICON,
+    TRIANGLE_ICON,
+    GITBOOK_BLACK_ICON,
+} from '@/assets'
 import { Card } from '@chakra-ui/react'
-import Image from 'next/image'
+import Image, { StaticImageData } from 'next/image'
 import Link from 'next/link'
 import { twMerge } from 'tailwind-merge'
 
 interface ITryNowCard {
     title: string
     description: string
-    icon: string
+    icon: StaticImageData | string
     href: string
     isExternal?: boolean
+    needsIconAdjustment?: boolean
 }
 
 const cards: ITryNowCard[] = [
@@ -32,6 +41,33 @@ const cards: ITryNowCard[] = [
         icon: ARROW_UP_CIRCLE,
         href: '/send',
     },
+    {
+        title: 'Raffle (legacy)',
+        description: 'Create crypto raffles and distribute tokens to winners',
+        icon: STAR_OUTLINE_ICON,
+        href: '/raffle/create',
+    },
+    {
+        title: 'Batch Send (legacy)',
+        description: 'Send tokens to multiple recipients at once',
+        icon: SMILEY_ICON,
+        href: '/batch/create',
+    },
+    {
+        title: 'Refund (legacy)',
+        description: 'Refund unclaimed peanut links back to sender',
+        icon: TRIANGLE_ICON,
+        href: '/refund',
+        needsIconAdjustment: true,
+    },
+    {
+        title: 'Docs (legacy)',
+        description: 'Learn about Peanut Protocol and its features',
+        icon: GITBOOK_BLACK_ICON,
+        href: 'https://docs.peanut.to/',
+        isExternal: true,
+        needsIconAdjustment: true,
+    },
 ]
 
 const TryNow = () => {
@@ -59,10 +95,15 @@ const TryNow = () => {
                             <div
                                 className={twMerge(
                                     'hidden size-16 items-center justify-center rounded-full bg-purple-1 md:flex',
-                                    index === 0 ? 'p-4' : 'p-2'
+                                    index === 0 ? 'p-4' : 'p-2',
+                                    index === 6 && 'pt-4'
                                 )}
                             >
-                                <Image src={card.icon} alt={card.title} className="size-12" />
+                                <Image
+                                    src={card.icon}
+                                    alt={card.title}
+                                    className={twMerge('size-12', card.needsIconAdjustment && '-mt-2')}
+                                />
                             </div>
                             <div className="flex items-center justify-normal gap-3">
                                 <div
@@ -71,7 +112,11 @@ const TryNow = () => {
                                         index === 0 ? 'p-4' : 'p-2'
                                     )}
                                 >
-                                    <Image src={card.icon} alt={card.title} className="size-12" />
+                                    <Image
+                                        src={card.icon}
+                                        alt={card.title}
+                                        className={twMerge('size-12', card.needsIconAdjustment && '-mt-1')}
+                                    />
                                 </div>
                                 <div className="space-y-1.5">
                                     <h2 className="text-lg font-extrabold md:text-center">{card.title}</h2>
@@ -84,17 +129,6 @@ const TryNow = () => {
                     </Link>
                 ))}
             </div>
-            <div className="flex items-center gap-2">
-                <Image src={Eyes} alt="eyes" className="size-6" />
-                <Link
-                    href={'https://docs.peanut.to'}
-                    target="_blank"
-                    rel="noreferrer noopener"
-                    className="min-w-fit text-sm hover:underline"
-                >
-                    What is Peanut Protocol?
-                </Link>
-            </div>
         </div>
     )
 }
diff --git a/src/components/LandingPage/hero.tsx b/src/components/LandingPage/hero.tsx
index dd24a1137..47f5b9d79 100644
--- a/src/components/LandingPage/hero.tsx
+++ b/src/components/LandingPage/hero.tsx
@@ -2,7 +2,6 @@ import { AboutPeanut, ButterySmoothGlobalMoney, HandThumbsUp, PeanutGuyGIF, Spar
 import { Stack } from '@chakra-ui/react'
 import { motion } from 'framer-motion'
 import { useEffect, useState } from 'react'
-import { MarqueeComp } from '../Global/MarqueeWrapper'
 import { CloudImages, HeroImages } from './imageAssets'
 
 type HeroProps = {
@@ -11,14 +10,15 @@ type HeroProps = {
         visible: boolean
         message?: string
     }
-    cta?: {
+    ctas?: Array<{
         label: string
         href: string
-    }
+        primary: boolean
+    }>
     buttonVisible?: boolean
 }
 
-export function Hero({ heading, marquee = { visible: false }, cta, buttonVisible }: HeroProps) {
+export function Hero({ heading, marquee = { visible: false }, ctas, buttonVisible }: HeroProps) {
     const [duration, setDuration] = useState(10)
     const [screenWidth, setScreenWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1200) // Added typeof check for SSR
 
@@ -65,45 +65,52 @@ export function Hero({ heading, marquee = { visible: false }, cta, buttonVisible
                 </Stack>
             </div>
 
-            <div className="relative z-1">
-                {marquee && (
-                    <MarqueeComp message={marquee.message} imageSrc={HandThumbsUp.src} backgroundColor="bg-yellow-1" />
-                )}
-            </div>
-
-            {cta?.href && cta?.label && (
-                <motion.div
-                    className="fixed bottom-4 right-[calc(50%-60px)] z-20 sm:bottom-8"
-                    initial={{
-                        opacity: 0,
-                        translateY: 4,
-                        translateX: 4,
-                        rotate: 0.75,
-                    }}
-                    animate={{
-                        opacity: buttonVisible ? 1 : 0,
-                        translateY: buttonVisible ? 0 : 20,
-                        translateX: buttonVisible ? 0 : 20,
-                        rotate: buttonVisible ? 0 : 1,
-                        pointerEvents: buttonVisible ? 'auto' : 'none',
-                    }}
-                    whileHover={{
-                        translateY: 6,
-                        translateX: 3,
-                        rotate: 0.75,
-                    }}
-                    transition={{ type: 'spring', damping: 15 }}
-                >
-                    <img
-                        src={Sparkle.src}
-                        className="absolute -right-4 -top-4 h-auto w-5 sm:-right-5 sm:-top-5 sm:w-6"
-                        alt="Sparkle"
-                    />
+            {ctas && ctas.length > 0 && (
+                <div className="fixed bottom-4 right-[calc(50%-120px)] z-20 flex gap-4 sm:bottom-8">
+                    {ctas.map((cta, index) => (
+                        <motion.div
+                            key={index}
+                            initial={{
+                                opacity: 0,
+                                translateY: 4,
+                                translateX: 4,
+                                rotate: 0.75,
+                            }}
+                            animate={{
+                                opacity: buttonVisible ? 1 : 0,
+                                translateY: buttonVisible ? 0 : 20,
+                                translateX: buttonVisible ? 0 : 20,
+                                rotate: buttonVisible ? 0 : 1,
+                                pointerEvents: buttonVisible ? 'auto' : 'none',
+                            }}
+                            whileHover={{
+                                translateY: 6,
+                                translateX: 3,
+                                rotate: 0.75,
+                            }}
+                            transition={{ type: 'spring', damping: 15 }}
+                        >
+                            {cta.primary && (
+                                <img
+                                    src={Sparkle.src}
+                                    className="absolute -right-4 -top-4 h-auto w-5 sm:-right-5 sm:-top-5 sm:w-6"
+                                    alt="Sparkle"
+                                />
+                            )}
 
-                    <a href={cta.href} className="btn-purple px-5 shadow-md">
-                        {cta.label}
-                    </a>
-                </motion.div>
+                            <a
+                                href={cta.href}
+                                className={`px-5 shadow-md ${
+                                    cta.primary
+                                        ? 'btn-purple'
+                                        : 'btn bg-yellow-1 fill-n-1 text-n-1 hover:bg-yellow-1/90'
+                                }`}
+                            >
+                                {cta.label}
+                            </a>
+                        </motion.div>
+                    ))}
+                </div>
             )}
         </div>
     )
diff --git a/src/components/Welcome/welcomeSDK.tsx b/src/components/Welcome/welcomeSDK.tsx
index c5936b0db..6a6306b66 100644
--- a/src/components/Welcome/welcomeSDK.tsx
+++ b/src/components/Welcome/welcomeSDK.tsx
@@ -24,7 +24,6 @@ import {
     SBF_PERSON,
     SmileStars,
     PEANUTMAN_HAPPY,
-    REDPACKET_LOTTIE,
     TEAL_MOCKUP_1,
     DROPDOWN_ICON,
 } from '@/assets'
@@ -178,7 +177,7 @@ const testimonials = [
 const defaultLottieOptions = {
     loop: true,
     autoplay: true,
-    animationData: REDPACKET_LOTTIE,
+    animationData: '/lottie/redpacket-lottie.json',
     rendererSettings: {
         preserveAspectRatio: 'xMidYMid slice',
     },
@@ -333,7 +332,7 @@ export function WelcomeSDK() {
                             target="_blank"
                         >
                             <div className="mx-2 flex h-full items-center justify-center object-cover">
-                                <Lottie animationData={REDPACKET_LOTTIE} loop={true} autoplay={true} />
+                                <Lottie animationData={'/lottie/redpacket-lottie.json'} loop={true} autoplay={true} />
                             </div>
                         </a>
                     </div>