diff --git a/apps/landing/components/sections/Hero.tsx b/apps/landing/components/sections/Hero.tsx
index 68add92f..a4cd88fa 100644
--- a/apps/landing/components/sections/Hero.tsx
+++ b/apps/landing/components/sections/Hero.tsx
@@ -1,3 +1,5 @@
+import {motion} from 'framer-motion';
+
 import {Button} from '../common/Button';
 
 import type {ReactElement} from 'react';
@@ -5,21 +7,117 @@ import type {ReactElement} from 'react';
 //todo: ask design to remove border
 export function Hero(): ReactElement {
 	return (
-		<div className={'flex w-full justify-center'}>
+		<div className={'flex w-full justify-center overflow-hidden'}>
 			<div
 				style={{
 					backgroundImage: "url('/landing/hero-background.png')",
 					backgroundRepeat: 'no-repeat',
-					backgroundSize: 'auto 100%',
-					backgroundPosition: 'center'
+					backgroundSize: '100% 100%',
+					backgroundPosition: 'center',
+					overflow: 'hidden'
 				}}
 				className={
-					'relative mx-6 mt-6 flex h-[568px] w-full max-w-[2352px] flex-col items-center self-center rounded-lg border border-[#292929]'
+					'relative mx-6 mt-6 flex h-[568px] w-[2365px] max-w-[2352px] flex-col items-center self-center rounded-lg border border-[#292929]'
 				}>
-				<div className={'mt-[88px] text-center'}>
+				<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'}
+					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'}}
+				/>
+				<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={'mt-4 text-grey-400'}>
+					<p className={'text-grey-400 mt-4'}>
 						{'Yearn is DeFi’s longest running, most battle tested, and most trusted yield protocol.'}
 					</p>
 				</div>
diff --git a/public/landing/hero-background.png b/public/landing/hero-background.png
index 6ff8bc17..36ba5281 100644
Binary files a/public/landing/hero-background.png and b/public/landing/hero-background.png differ
diff --git a/public/landing/yfi-bottom-left.png b/public/landing/yfi-bottom-left.png
new file mode 100644
index 00000000..a83565d8
Binary files /dev/null and b/public/landing/yfi-bottom-left.png differ
diff --git a/public/landing/yfi-bottom-right.png b/public/landing/yfi-bottom-right.png
new file mode 100644
index 00000000..9084bf30
Binary files /dev/null and b/public/landing/yfi-bottom-right.png differ
diff --git a/public/landing/yfi-left-center.png b/public/landing/yfi-left-center.png
new file mode 100644
index 00000000..4dc8cd60
Binary files /dev/null and b/public/landing/yfi-left-center.png differ
diff --git a/public/landing/yfi-top-left.png b/public/landing/yfi-top-left.png
new file mode 100644
index 00000000..7d179755
Binary files /dev/null and b/public/landing/yfi-top-left.png differ
diff --git a/public/landing/yfi-top-right.png b/public/landing/yfi-top-right.png
new file mode 100644
index 00000000..7c445180
Binary files /dev/null and b/public/landing/yfi-top-right.png differ