diff --git a/apps/landing/components/common/EarnCard.tsx b/apps/landing/components/common/EarnCard.tsx
index 77c4d7d7e..7e802f249 100644
--- a/apps/landing/components/common/EarnCard.tsx
+++ b/apps/landing/components/common/EarnCard.tsx
@@ -15,8 +15,8 @@ export function EarnCard(props: {title: string; info: string; logoSrc: string; h
 					? '#0657F9'
 					: 'linear-gradient(180deg, rgba(12, 12, 12, 0.8) 0%, rgba(26, 26, 26, 0.8) 100%)'
 			}}
-			className={'group relative flex h-full overflow-hidden p-6'}>
-			<div className={'mt-auto flex items-end'}>
+			className={'group relative z-30 flex h-full overflow-hidden rounded-lg border border-[#292929] p-6'}>
+			<div className={'flex md:mt-auto md:items-end'}>
 				<div>
 					<p className={'text-[24px] group-hover:text-grey-900'}>{props.title}</p>
 					<p className={'text-grey-400 group-hover:text-grey-900'}>{props.info}</p>
@@ -26,19 +26,33 @@ export function EarnCard(props: {title: string; info: string; logoSrc: string; h
 				</div>
 			</div>
 			<Image
-				className={'absolute -top-12 right-10'}
+				className={'absolute -bottom-20 left-0 -z-10 md:-top-12 md:left-auto md:right-10'}
 				src={props.hoverLogoSrc}
 				width={200}
 				height={200}
 				alt={'app-logo'}
 			/>
 			<Image
-				className={'absolute -top-12 right-10 group-hover:opacity-0'}
+				className={'absolute -bottom-20 left-0 -z-10 group-hover:opacity-0 md:-top-12 md:left-auto md:right-10'}
 				src={props.logoSrc}
 				width={200}
 				height={200}
 				alt={'app-logo'}
 			/>
+			{/* <Image
+					className={'absolute '}
+					src={props.hoverLogoSrc}
+					width={200}
+					height={200}
+					alt={'app-logo'}
+				/>
+				<Image
+					className={'absolute '}
+					src={props.logoSrc}
+					width={200}
+					height={200}
+					alt={'app-logo'}
+				/> */}
 		</div>
 	);
 }
diff --git a/apps/landing/components/common/Header.tsx b/apps/landing/components/common/Header.tsx
index e958555bd..7dc7be2a3 100644
--- a/apps/landing/components/common/Header.tsx
+++ b/apps/landing/components/common/Header.tsx
@@ -67,7 +67,7 @@ export function LandingAppHeader(): ReactElement {
 			id={'head'}
 			className={'inset-x-0 top-0 z-50 mt-7 w-full'}>
 			<div className={'w-full'}>
-				<header className={'yearn--header mx-auto max-w-6xl !px-0'}>
+				<header className={'yearn--header mx-auto max-w-6xl md:!px-10'}>
 					<div className={'flex md:hidden'}>
 						<button onClick={(): void => set_isMenuOpen(!isMenuOpen)}>
 							<span className={'sr-only'}>{'Open menu'}</span>
diff --git a/apps/landing/components/sections/Hero.tsx b/apps/landing/components/sections/Hero.tsx
index a4cd88fa2..5caf6bbf3 100644
--- a/apps/landing/components/sections/Hero.tsx
+++ b/apps/landing/components/sections/Hero.tsx
@@ -1,135 +1,174 @@
+import Image from 'next/image';
 import {motion} from 'framer-motion';
 
 import {Button} from '../common/Button';
 
 import type {ReactElement} from 'react';
 
-//todo: ask design to remove border
-export function Hero(): ReactElement {
+function AnimatedLogos(): ReactElement {
 	return (
-		<div className={'flex w-full justify-center overflow-hidden'}>
-			<div
+		<>
+			{' '}
+			<motion.div
+				className={'absolute'}
 				style={{
-					backgroundImage: "url('/landing/hero-background.png')",
+					backgroundImage: "url('/landing/yfi-bottom-right.png')",
 					backgroundRepeat: 'no-repeat',
-					backgroundSize: '100% 100%',
-					backgroundPosition: 'center',
-					overflow: 'hidden'
+					width: '480px',
+					height: '160px'
 				}}
-				className={
-					'relative mx-6 mt-6 flex h-[568px] w-[2365px] max-w-[2352px] flex-col items-center self-center rounded-lg border border-[#292929]'
-				}>
-				<motion.div
-					className={'absolute'}
-					style={{
-						backgroundImage: "url('/landing/yfi-bottom-right.png')",
-						backgroundRepeat: 'no-repeat',
-						width: '480px',
-						height: '160px'
-					}}
-					animate={{
-						y: ['0px', '30px', '0px']
-					}}
-					transition={{
-						duration: 4,
-						ease: 'easeInOut',
-						repeat: Infinity,
-						repeatType: 'loop'
-					}}
-					initial={{left: '70%', bottom: '0px'}}
-				/>
-				<motion.div
-					className={'absolute'}
-					style={{
-						backgroundImage: "url('/landing/yfi-top-right.png')",
-						backgroundRepeat: 'no-repeat',
-						width: '240px',
-						height: '240px'
-					}}
-					animate={{
-						y: ['0px', '-40px', '0px']
-					}}
-					transition={{
-						duration: 4,
-						ease: 'easeInOut',
-						repeat: Infinity,
-						repeatType: 'loop'
-					}}
-					initial={{left: '76%', top: '104px'}}
-				/>
-				<motion.div
-					className={'absolute'}
-					style={{
-						backgroundImage: "url('/landing/yfi-top-left.png')",
-						backgroundRepeat: 'no-repeat',
-						width: '240px',
-						height: '240px'
-					}}
-					animate={{
-						y: ['0px', '-40px', '0px']
-					}}
-					transition={{
-						duration: 4,
-						ease: 'easeInOut',
-						repeat: Infinity,
-						repeatType: 'loop'
-					}}
-					initial={{right: '70%', top: '32px'}}
-				/>
-				<motion.div
-					className={'absolute'}
-					style={{
-						backgroundImage: "url('/landing/yfi-left-center.png')",
-						backgroundRepeat: 'no-repeat',
-						width: '200px',
-						height: '290px'
-					}}
-					animate={{
-						y: ['0px', '-50px', '0px']
-					}}
-					transition={{
-						duration: 4,
-						ease: 'easeInOut',
-						repeat: Infinity,
-						repeatType: 'loop'
-					}}
-					initial={{right: '78%', top: '200px'}}
-				/>
-				<motion.div
-					className={'absolute'}
+				animate={{
+					y: ['0px', '30px', '0px']
+				}}
+				transition={{
+					duration: 4,
+					ease: 'easeInOut',
+					repeat: Infinity,
+					repeatType: 'loop'
+				}}
+				initial={{left: '70%', bottom: '0px'}}
+			/>
+			<motion.div
+				className={'absolute'}
+				style={{
+					backgroundImage: "url('/landing/yfi-top-right.png')",
+					backgroundRepeat: 'no-repeat',
+					width: '240px',
+					height: '240px'
+				}}
+				animate={{
+					y: ['0px', '-40px', '0px']
+				}}
+				transition={{
+					duration: 4,
+					ease: 'easeInOut',
+					repeat: Infinity,
+					repeatType: 'loop'
+				}}
+				initial={{left: '76%', top: '104px'}}
+			/>
+			<motion.div
+				className={'absolute'}
+				style={{
+					backgroundImage: "url('/landing/yfi-top-left.png')",
+					backgroundRepeat: 'no-repeat',
+					width: '240px',
+					height: '240px'
+				}}
+				animate={{
+					y: ['0px', '-40px', '0px']
+				}}
+				transition={{
+					duration: 4,
+					ease: 'easeInOut',
+					repeat: Infinity,
+					repeatType: 'loop'
+				}}
+				initial={{right: '70%', top: '32px'}}
+			/>
+			<motion.div
+				className={'absolute'}
+				style={{
+					backgroundImage: "url('/landing/yfi-left-center.png')",
+					backgroundRepeat: 'no-repeat',
+					width: '200px',
+					height: '290px'
+				}}
+				animate={{
+					y: ['0px', '-50px', '0px']
+				}}
+				transition={{
+					duration: 4,
+					ease: 'easeInOut',
+					repeat: Infinity,
+					repeatType: 'loop'
+				}}
+				initial={{right: '78%', top: '200px'}}
+			/>
+			<motion.div
+				className={'absolute'}
+				style={{
+					backgroundImage: "url('/landing/yfi-bottom-left.png')",
+					backgroundRepeat: 'no-repeat',
+					width: '440px',
+					height: '160px'
+				}}
+				animate={{
+					y: ['0px', '20px', '0px']
+				}}
+				transition={{
+					duration: 4,
+					ease: 'easeInOut',
+					repeat: Infinity,
+					repeatType: 'loop'
+				}}
+				initial={{right: '60%', bottom: '0px'}}
+			/>
+		</>
+	);
+}
+
+export function Hero(): ReactElement {
+	return (
+		<>
+			<div className={'hidden w-full justify-center overflow-hidden md:flex'}>
+				<div
 					style={{
-						backgroundImage: "url('/landing/yfi-bottom-left.png')",
+						backgroundImage: "url('/landing/hero-background.png')",
 						backgroundRepeat: 'no-repeat',
-						width: '440px',
-						height: '160px'
-					}}
-					animate={{
-						y: ['0px', '20px', '0px']
-					}}
-					transition={{
-						duration: 4,
-						ease: 'easeInOut',
-						repeat: Infinity,
-						repeatType: 'loop'
+						backgroundSize: '100% 100%',
+						backgroundPosition: 'center',
+						overflow: 'hidden'
 					}}
-					initial={{right: '60%', bottom: '0px'}}
+					className={
+						'relative mx-6 mt-6 flex h-[568px] w-[2365px] max-w-[2352px] flex-col items-center self-center rounded-lg border border-[#292929]'
+					}>
+					<AnimatedLogos />
+					<div className={'z-20 mt-[88px] text-center'}>
+						<p className={'text-[80px] font-bold leading-[80px] text-white'}>{'THE DEFI WAY'}</p>
+						<p className={'text-[80px] font-bold leading-[80px] text-white'}>{'TO EARN ON CRYPTO'}</p>
+						<p className={'mt-4 text-grey-400'}>
+							{'Yearn is DeFi’s longest running, most battle tested, and most trusted yield protocol.'}
+						</p>
+					</div>
+					<div className={'mt-[72px] flex gap-2'}>
+						<Button className={'w-[192px] px-[15px]'}>{'DISCOVER PRODUCTS'}</Button>
+						<Button
+							variant={'secondary'}
+							className={'w-[192px]'}>
+							{'SUBMIT YOUR APP'}
+						</Button>
+					</div>
+				</div>
+			</div>
+			<div
+				className={'flex w-full flex-col items-center px-8 md:hidden'}
+				style={{
+					backgroundImage: "url('/landing/hero-background-mobile.png')",
+					backgroundRepeat: 'no-repeat',
+					backgroundSize: '100% 100%',
+					backgroundPosition: 'center'
+				}}>
+				<Image
+					className={'mt-[88px]'}
+					src={'/landing/yfi-top-right.png'}
+					alt={'hero'}
+					width={277}
+					height={277}
 				/>
-				<div className={'z-20 mt-[88px] text-center'}>
-					<p className={'text-[80px] font-bold leading-[80px] text-white'}>{'THE DEFI WAY'}</p>
-					<p className={'text-[80px] font-bold leading-[80px] text-white'}>{'TO EARN CRYPTO'}</p>
-					<p className={'text-grey-400 mt-4'}>
+				<div className={'z-20 mt-4 text-center'}>
+					<p className={'text-center text-[40px] font-bold leading-[48px] text-white'}>
+						{'THE DEFI WAY TO EARN ON CRYPTO'}
+					</p>
+					<p className={'mt-4 text-grey-400'}>
 						{'Yearn is DeFi’s longest running, most battle tested, and most trusted yield protocol.'}
 					</p>
 				</div>
-				<div className={'mt-[72px] flex gap-2'}>
-					<Button className={'w-[192px] px-[15px]'}>{'DISCOVER PRODUCTS'}</Button>
-					<Button
-						variant={'secondary'}
-						className={'w-[192px]'}>
-						{'SUBMIT YOUR APP'}
-					</Button>
+				<div className={'mt-10 flex w-full flex-col gap-2'}>
+					<Button className={'px-[15px]'}>{'DISCOVER PRODUCTS'}</Button>
+					<Button variant={'secondary'}>{'SUBMIT YOUR APP'}</Button>
 				</div>
 			</div>
-		</div>
+		</>
 	);
 }
diff --git a/apps/landing/components/sections/WaysToEarn.tsx b/apps/landing/components/sections/WaysToEarn.tsx
index 188d9803c..86d62de53 100644
--- a/apps/landing/components/sections/WaysToEarn.tsx
+++ b/apps/landing/components/sections/WaysToEarn.tsx
@@ -10,10 +10,10 @@ export function WaysToEarn(): ReactElement {
 
 	return (
 		<div className={'max-w-6xl pt-[160px]'}>
-			<p className={'text-center text-5xl font-light text-white'}>
+			<p className={'text-left text-3xl font-light text-white md:text-center md:text-5xl'}>
 				{'THERE ARE LOADS OF WAYS TO EARN, WITH YEARN!'}
 			</p>
-			<div className={'mt-10 grid h-[480px] grid-flow-col grid-cols-12 grid-rows-4 gap-6'}>
+			<div className={'mt-10 grid grid-flow-row grid-cols-12 grid-rows-10 gap-6 md:h-[480px] md:grid-flow-col'}>
 				<div
 					onMouseEnter={() => set_isHovering(true)}
 					onMouseLeave={() => set_isHovering(false)}
@@ -23,39 +23,52 @@ export function WaysToEarn(): ReactElement {
 							: 'linear-gradient(180deg, rgba(12, 12, 12, 0.8) 0%, rgba(26, 26, 26, 0.8) 100%)'
 					}}
 					className={
-						'group relative col-span-7 row-span-4 overflow-hidden rounded-lg p-10 transition-colors'
+						'group relative col-span-12 row-span-4 overflow-hidden rounded-lg border border-[#292929] p-6 transition-colors md:col-span-7 md:row-span-12 md:p-10'
 					}>
-					<p className={'mb-4 text-[32px] group-hover:text-grey-900'}>
-						{'VAULTS PUT YOUR CRYPTO TO WORK, SO YOU DONT HAVE TO.'}
-					</p>
-					<p className={'text-grey-400 group-hover:text-grey-900'}>
-						{
-							'The DeFi economy offers loads of way to earn yield on your capital. Yearn Vaults automatically take advantage of these opportunities to give you the best risk adjusted yields without you having to lift a finger.'
-						}
-					</p>
-					<Image
-						className={'absolute -bottom-36'}
-						src={'/landing/safe-hover.png'}
-						width={400}
-						height={400}
-						alt={'safe-hover'}
-					/>
-					<Image
-						className={'absolute -bottom-36 transition-opacity group-hover:opacity-0'}
-						src={'/landing/safe.png'}
-						width={400}
-						height={400}
-						alt={'safe'}
-					/>
-					<Button
-						className={'absolute bottom-10 right-10 w-[160px] hover:!bg-grey-800 group-hover:bg-grey-900'}>
-						<div className={'flex items-center justify-between'}>
-							<p>{'DISCOVER'}</p>
-							<IconArrow className={'size-4'} />
+					<div className={'flex h-full flex-col justify-between'}>
+						<div>
+							<p className={'text-md mb-4 group-hover:text-grey-900 md:text-[32px]'}>
+								{'VAULTS PUT YOUR CRYPTO TO WORK, SO YOU DONT HAVE TO.'}
+							</p>
+							<p className={'z-20 text-grey-400 group-hover:text-grey-900'}>
+								{
+									'The DeFi economy offers loads of way to earn yield on your capital. Yearn Vaults automatically take advantage of these opportunities to give you the best risk adjusted yields without you having to lift a finger.'
+								}
+							</p>
+						</div>
+						<div className={'relative h-[120px] md:h-[400px]'}>
+							<Image
+								className={
+									'absolute -bottom-24 left-[-18px] z-10 w-[200px] md:bottom-auto md:left-[-34px] md:w-[400px]'
+								}
+								src={'/landing/safe-hover.png'}
+								width={400}
+								height={400}
+								alt={'safe-hover'}
+							/>
+							<Image
+								className={
+									'absolute left-[-34px] z-10 hidden opacity-0 transition-opacity group-hover:opacity-0 md:block md:opacity-100'
+								}
+								src={'/landing/safe.png'}
+								width={400}
+								height={400}
+								alt={'safe'}
+							/>
 						</div>
-					</Button>
+						<Button
+							className={
+								'absolute bottom-10 right-10 z-20 hidden w-[160px] hover:!bg-grey-800 group-hover:bg-grey-900 md:block'
+							}>
+							<div className={'flex items-center justify-between'}>
+								<p>{'DISCOVER'}</p>
+								<IconArrow className={'size-4'} />
+							</div>
+						</Button>
+						<IconArrow className={'absolute bottom-6 right-6 size-6 group-hover:text-grey-900 md:hidden'} />
+					</div>
 				</div>
-				<div className={'col-span-5 row-span-2'}>
+				<div className={'col-span-12 row-span-3 md:col-span-5 md:row-span-6'}>
 					<EarnCard
 						title={'COMMUNITY APPS.'}
 						info={'Apps built on Yearn vaults by contributors and the wider community!'}
@@ -63,7 +76,7 @@ export function WaysToEarn(): ReactElement {
 						hoverLogoSrc={'/landing/community-hover.png'}
 					/>
 				</div>
-				<div className={'col-span-5 row-span-2'}>
+				<div className={'col-span-12 row-span-3 md:col-span-5 md:row-span-6'}>
 					<EarnCard
 						title={'INTEGRATIONS'}
 						info={
diff --git a/public/landing/about-bg.png b/public/landing/about-bg.png
deleted file mode 100644
index 0531d59a5..000000000
Binary files a/public/landing/about-bg.png and /dev/null differ
diff --git a/public/landing/hero-background-mobile.png b/public/landing/hero-background-mobile.png
new file mode 100644
index 000000000..1df9205c1
Binary files /dev/null and b/public/landing/hero-background-mobile.png differ