diff --git a/apps/landing/public/bloom-one.png b/apps/landing/public/bloom-one.png
new file mode 100644
index 000000000..72c14807a
Binary files /dev/null and b/apps/landing/public/bloom-one.png differ
diff --git a/apps/landing/public/bloom-three.png b/apps/landing/public/bloom-three.png
new file mode 100644
index 000000000..28ebcf168
Binary files /dev/null and b/apps/landing/public/bloom-three.png differ
diff --git a/apps/landing/public/bloom-two.png b/apps/landing/public/bloom-two.png
new file mode 100644
index 000000000..19df7fa0b
Binary files /dev/null and b/apps/landing/public/bloom-two.png differ
diff --git a/apps/landing/public/egg-bloom-one.png b/apps/landing/public/egg-bloom-one.png
new file mode 100644
index 000000000..de2f57350
Binary files /dev/null and b/apps/landing/public/egg-bloom-one.png differ
diff --git a/apps/landing/public/egg-bloom-two.png b/apps/landing/public/egg-bloom-two.png
new file mode 100644
index 000000000..7b2bde832
Binary files /dev/null and b/apps/landing/public/egg-bloom-two.png differ
diff --git a/apps/landing/src/components/AppEmbed.tsx b/apps/landing/src/components/AppEmbed.tsx
index 2da317681..2830b4dfd 100644
--- a/apps/landing/src/components/AppEmbed.tsx
+++ b/apps/landing/src/components/AppEmbed.tsx
@@ -58,15 +58,13 @@ const AppEmbed = () => {
 
 	return (
 		<div className="w-screen">
-			{/* {renderBloom && (
-				<div className="relative max-w-full sm:w-full sm:max-w-[1200px] mx-auto">
-					<div className="absolute w-full overflow-visible top-[100px] h-32">
-						<div className="left-0 mt-22 bloom bloom-one" />
-						<div className="left-[34%] -mt-32 bloom bloom-three " />
-						<div className="right-0 invisible sm:visible bloom bloom-two" />
-					</div>
+			{renderBloom && (
+				<div className="relative max-w-full sm:w-full sm:max-w-[1400px] mx-auto">
+					<div className="bloom burst bloom-one" />
+					<div className="bloom burst bloom-three" />
+					<div className="bloom burst bloom-two" />
 				</div>
-			)} */}
+			)}
 			<div className="relative z-30 h-[328px] px-5 sm:h-[428px] md:h-[428px] lg:h-[628px] mt-8 sm:mt-16">
 				<div
 					className={clsx(
diff --git a/apps/landing/src/components/Bubbles.tsx b/apps/landing/src/components/Bubbles.tsx
index 0aa50f2f4..f97220f66 100644
--- a/apps/landing/src/components/Bubbles.tsx
+++ b/apps/landing/src/components/Bubbles.tsx
@@ -18,10 +18,10 @@ export const Bubbles = () => {
 				interactivity: {
 					events: {
 						onClick: {
-							enable: true,
+							enable: false,
 							mode: 'push'
 						},
-						resize: true
+						resize: false
 					}
 				},
 				particles: {
@@ -29,7 +29,7 @@ export const Bubbles = () => {
 						value: '#ffffff'
 					},
 					collisions: {
-						enable: true
+						enable: false
 					},
 					move: {
 						direction: 'top',
diff --git a/apps/landing/src/components/Markdown.tsx b/apps/landing/src/components/Markdown.tsx
index 54d814e40..da3943878 100644
--- a/apps/landing/src/components/Markdown.tsx
+++ b/apps/landing/src/components/Markdown.tsx
@@ -13,7 +13,7 @@ function MarkdownPage(props: MarkdownPageProps) {
 		Prism.highlightAll();
 	}, []);
 	return (
-		<div className="sm:container max-w-4xl p-4 mt-32 mb-20">
+		<div className="max-w-4xl p-4 mt-32 mb-20 sm:container">
 			<article id="content" className="m-auto prose lg:prose-xs dark:prose-invert">
 				{props.children}
 			</article>
diff --git a/apps/landing/src/pages/careers.page.tsx b/apps/landing/src/pages/careers.page.tsx
index 7ffb0e499..28c35d4ec 100644
--- a/apps/landing/src/pages/careers.page.tsx
+++ b/apps/landing/src/pages/careers.page.tsx
@@ -109,12 +109,8 @@ function Page() {
 			</Helmet>
 			<div className="container relative max-w-4xl min-h-screen p-4 m-auto mt-32 mb-20 prose text-white prose-invert">
 				<div
-					className="page-bloom absolute pointer-events-none z-0 -top-60 -right-[400px] w-[1000px] h-[800px]  fade-in will-change-transform"
-					style={{
-						background: 'linear-gradient(180deg, #040CA8 0%, #9704A8 95.73%)',
-						filter: 'blur(300px)',
-						transform: 'rotate(56.81deg)'
-					}}
+					className="bloom subtle egg-bloom-two -top-60 -right-[400px]"
+					style={{ transform: 'scale(2)' }}
 				/>
 				<h1 className="px-2 mb-3 text-4xl font-black leading-tight text-center text-white fade-in-heading md:text-5xl">
 					Build the future of files.
@@ -162,9 +158,7 @@ function Page() {
 						))}
 					</div>
 					<hr className="w-full my-24 border-gray-200 opacity-10 border-1" ref={openPositionsRef} />
-					<h1
-						className="px-2 mb-0 text-4xl font-black leading-tight text-center text-white"
-					>
+					<h1 className="px-2 mb-0 text-4xl font-black leading-tight text-center text-white">
 						Open Positions
 					</h1>
 					<p className="mt-2 mb-4">Any of these suit you? Apply now!</p>
diff --git a/apps/landing/src/pages/team.page.tsx b/apps/landing/src/pages/team.page.tsx
index 0c1dc0aba..08294e26e 100644
--- a/apps/landing/src/pages/team.page.tsx
+++ b/apps/landing/src/pages/team.page.tsx
@@ -193,13 +193,9 @@ function Page() {
 			</Helmet>
 			<div className="relative team-page">
 				<div
-					className="page-bloom absolute -top-60 -right-[400px] opacity-60 w-[1000px] h-[800px] fade-in will-change-transform"
-					style={{
-						background: 'linear-gradient(180deg, #040CA8 0%, #0474A8 95.73%)',
-						filter: 'blur(300px)',
-						transform: 'rotate(56.81deg)'
-					}}
-				></div>
+					className="bloom subtle egg-bloom-one -top-60 -right-[400px]"
+					style={{ transform: 'scale(2)' }}
+				/>
 				<div className="relative z-10">
 					<h1 className="text-5xl leading-snug fade-in-heading ">
 						We believe file management should be <span className="title-gradient">universal</span>.
diff --git a/apps/landing/src/style.scss b/apps/landing/src/style.scss
index 2b1a999e7..9ef9db0e2 100644
--- a/apps/landing/src/style.scss
+++ b/apps/landing/src/style.scss
@@ -97,34 +97,49 @@ html {
 }
 
 .bloom {
-	@apply absolute w-96 h-96;
+	@apply absolute w-[1200px] h-[1200px] -mt-[320px];
 	will-change: opacity;
 	opacity: 0;
 	will-change: filter opacity;
-	border-radius: 50%;
-	transform: scale(1.5);
-	-webkit-filter: blur(120px);
-	filter: blur(120px);
-	animation-name: bloomBurst;
-	animation-duration: 1s;
 	animation-timing-function: ease-in-out;
 	animation-fill-mode: forwards;
 	animation-iteration-count: 1;
 	animation-direction: forwards;
+	&.burst {
+		animation-name: bloomBurst;
+		animation-duration: 1s;
+	}
+	&.subtle {
+		animation-name: bloomSubtle;
+		animation-duration: 3s;
+	}
 	&.bloom-one {
-		background: conic-gradient(from 90deg at 50% 50%, #255bef, #aa1cca);
+		@apply left-0 -ml-[300px];
+		background: url('/bloom-one.png') no-repeat center center;
+		background-size: contain;    
 		animation-delay: 300ms;
 	}
 	&.bloom-two {
-		background: conic-gradient(from 90deg at 50% 50%, #c62dbb, #1d054b);
+		@apply right-0 -mr-[300px];
+		background: url('/bloom-two.png') no-repeat center center;
+		background-size: contain;
 		animation-delay: 0ms;
-		margin-top: -20px;
 	}
 	&.bloom-three {
-		background: conic-gradient(from 90deg at 50% 50%, #6c2ca0, #0b0b98);
-		animation-delay: 600ms;
-		margin-top: 0px;
+		@apply left-auto right-auto invisible md:visible -mt-[250px] ml-24;
+		background: url('/bloom-three.png') no-repeat center center;
+		background-size: contain;
+		animation-delay: 800ms;
 	}
+	&.egg-bloom-one {
+		background: url('/egg-bloom-one.png') no-repeat center center;
+		background-size: contain;
+	}
+	&.egg-bloom-two {
+		background: url('/egg-bloom-two.png') no-repeat center center;
+		background-size: contain;
+	}
+
 }
 
 @keyframes bloomBurst {
@@ -138,21 +153,15 @@ html {
 		opacity: 0.8;
 	}
 }
-
-@-moz-document url-prefix() {
-	@keyframes bloomBurst {
-		from {
-			opacity: 0;
-		}
-		40% {
-			opacity: 0.5;
-		}
-		to {
-			opacity: 0.3;
-		}
+@keyframes bloomSubtle {
+	from {
+		opacity: 0;
 	}
-	.page-bloom {
-		display: none;
+	40% {
+		opacity: 0.8;
+	}
+	to {
+		opacity: 0.6;
 	}
 }