diff --git a/src/components/ecosystem.js b/src/components/ecosystem.js
index 9752817f7..9c3537eb7 100644
--- a/src/components/ecosystem.js
+++ b/src/components/ecosystem.js
@@ -1,6 +1,7 @@
 import React from "react";
 import Image from "./imageComponent";
 
+<<<<<<< HEAD
 export default class Ecosystem extends React.Component {
 	render() {
 		return (
@@ -17,3 +18,30 @@ export default class Ecosystem extends React.Component {
 		);
 	}
 }
+=======
+const Ecosystem = ({ ecosystem }) => {
+	console.log(ecosystem);
+	return (
+		<a href={ecosystem.url} target={"_blank"} rel={"noreferrer"} aria-label={ecosystem.title}>
+			<div className={"ecosystem d-flex flex-column"}>
+				<div className={"logo-container"}>
+					<Image alt={ecosystem.title} filename={ecosystem.image} />
+				</div>
+				{ecosystem.title && <div className={"title"}>{ecosystem.title}</div>}
+				<div className='category-container'>
+					{ecosystem.categories.map((category) => (
+						<div className={"category"}>{category}</div>
+					))}
+				</div>
+				{ecosystem.description && (
+					<div className='description'>
+						{ecosystem.description.length > 250 ? `${ecosystem.description.substring(0, 250)}...` : ecosystem.description}
+					</div>
+				)}
+			</div>
+		</a>
+	);
+};
+
+export default Ecosystem;
+>>>>>>> origin/main
diff --git a/src/components/footer-box-2.js b/src/components/footer-box-2.js
index cab07353a..7cb929f2b 100644
--- a/src/components/footer-box-2.js
+++ b/src/components/footer-box-2.js
@@ -15,8 +15,15 @@ function FooterBox2({ footerBoxes2 }) {
 								<div className={"footer-box-inner"}>
 									{/* <div className={"bg"} /> */}
 									<div className={"inner"}>
+<<<<<<< HEAD
 										<div className={"title"}>{box.title}</div>
 										<div className={"text"}>{box.text}</div>
+=======
+										<div>
+											<div className={"title"}>{box.title}</div>
+											<div className={"text"}>{box.text}</div>
+										</div>
+>>>>>>> origin/main
 										<div className={"footer-box-inner-bottom"}>
 											<div className='link-wrapper'>
 												{box.link.type === "internal" ? (
diff --git a/src/components/header.js b/src/components/header.js
index 57038ae00..4a2946c86 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -87,12 +87,17 @@ const Header = () => {
 
 	useEffect(() => {
 		const toggleHeaderClass = () => {
+<<<<<<< HEAD
 			if (window.scrollY > 130) {
+=======
+			if (window.scrollY > 80) {
+>>>>>>> origin/main
 				setIsBlur(true);
 			} else if (window.scrollY < 80) {
 				setIsBlur(false);
 			}
 		};
+<<<<<<< HEAD
 
 		window.addEventListener("scroll", toggleHeaderClass);
 		toggleHeaderClass();
@@ -200,4 +205,112 @@ const Header = () => {
 	);
 };
 
+=======
+		window.addEventListener("scroll", toggleHeaderClass);
+		toggleHeaderClass();
+
+		return () => {
+			window.removeEventListener("scroll", toggleHeaderClass);
+		};
+	}, []);
+
+	const toggleMenu = () => {
+		setIsMenuOpen(!isMenuOpen);
+	};
+
+	return (
+		<>
+			<header id={"header"} className={`${isBlur ? "blur" : ""} ${isMenuOpen ? "menu-opened" : ""}`}>
+				<div className={"blurry"} />
+				<div className={"container"}>
+					<button
+						id={"hamburger"}
+						className={`hamburger hamburger--slider ${isMenuOpen ? "is-active" : ""}`}
+						type='button'
+						onClick={toggleMenu}
+						aria-label='Menu Toggle'
+					>
+						<span className='hamburger-box'>
+							<span className='hamburger-inner' />
+						</span>
+					</button>
+					<div className={"logo"}>
+						<Link to='/'>
+							<img src={logo} alt='Celestia' />
+						</Link>
+					</div>
+					<nav>
+						<ul>
+							{navigation.map((link, index) => (
+								<li key={index}>
+									{link.submenus ? (
+										<div className={"hasSubmenu"}>
+											{link.text} <i className={"icon-dropdown"} />
+										</div>
+									) : link.type === "external" ? (
+										<a href={link.url} target={"_blank"} rel={"noreferrer"}>
+											{link.text}
+										</a>
+									) : (
+										<Link to={`${link.url}`} activeClassName='active' aria-label={link.text}>
+											{link.text} {link.submenus && <i className={"icon-dropdown"} />}
+										</Link>
+									)}
+									{link.submenus && (
+										<div className={"submenu"}>
+											<ul>
+												{link.submenus.map((submenu, index) => (
+													<li key={index}>
+														{submenu.type === "external" ? (
+															<a
+																href={submenu.url}
+																target={"_blank"}
+																rel='noreferrer'
+																className={submenu.class}
+																aria-label={submenu.text}
+															>
+																<div className={"row d-table w-100"}>
+																	<div className={"col-2 align-middle d-table-cell"}>
+																		<div className={"icon"}>
+																			<Image alt={submenu.text} filename={submenu.icon} />
+																		</div>
+																	</div>
+																	<div className={"col-10 align-middle d-table-cell"}>
+																		<div className={"subtitle"}>{submenu.subtext}</div>
+																		<div className={"title"}>{submenu.text}</div>
+																	</div>
+																</div>
+															</a>
+														) : (
+															<Link to={submenu.url} className={submenu.class}>
+																<div className={"row d-table w-100"}>
+																	<div className={"col-2 align-middle d-table-cell"}>
+																		<div className={"icon"}>
+																			<Image alt={submenu.text} filename={submenu.icon} />
+																		</div>
+																	</div>
+																	<div className={"col-10 align-middle d-table-cell"}>
+																		<div className={"subtitle"}>{submenu.subtext}</div>
+																		<div className={"title"}>{submenu.text}</div>
+																	</div>
+																</div>
+															</Link>
+														)}
+													</li>
+												))}
+											</ul>
+										</div>
+									)}
+								</li>
+							))}
+						</ul>
+					</nav>
+					<div className={"clear"} />
+				</div>
+			</header>
+		</>
+	);
+};
+
+>>>>>>> origin/main
 export default Header;
diff --git a/src/components/sections/two-column-h2.js b/src/components/sections/two-column-h2.js
index 674717bf2..534766b91 100644
--- a/src/components/sections/two-column-h2.js
+++ b/src/components/sections/two-column-h2.js
@@ -42,8 +42,13 @@ const TwoColumnH2 = ({
 			<div className={"row align-items-center"}>
 
 				<div className={`col col-12 col-lg-6 anim-col ${animVersion === 2 && 'px-2'} ${direction === "rtl" ? "order-lg-2" : "order-lg-1"}`}>
+<<<<<<< HEAD
 					{anim && <Lottie lottieRef={lottieRef} animationData={anim} loop={false} autoplay={false}
 									 renderer={"canvas"} style={{width: animVersion === 2 ? 680 : 700, height: animVersion ? 450 : 450}}
+=======
+					{anim && <Lottie className={`lottie-anim-${animVersion}`} lottieRef={lottieRef} animationData={anim} loop={false} autoplay={false}
+									 renderer={"canvas"}
+>>>>>>> origin/main
 					/>}
 					{!anim && <Image alt={title} filename={image} />}
 				</div>
@@ -51,7 +56,11 @@ const TwoColumnH2 = ({
 					<div className={"text"}>
 						<h2 className={"with-decor mt-4 mt-lg-0"}>{title}</h2>
 						<div className='paragraph' dangerouslySetInnerHTML={{ __html: text }} />
+<<<<<<< HEAD
 						<div className={'position-absolute'} style={{marginTop:'25vh'}} ref={myRef}/>
+=======
+						<div className={'lottie-anchor'} ref={myRef}/>
+>>>>>>> origin/main
 						<div className={"flex mt-4"}>
 							<Link to={buttonPrimaryUrl} className={`button button-simple me-4 ${buttonPrimaryClass}`}>
 								{buttonPrimaryTitle}
diff --git a/src/datas/build/get-started.js b/src/datas/build/get-started.js
index b2368a499..b26ef10e5 100644
--- a/src/datas/build/get-started.js
+++ b/src/datas/build/get-started.js
@@ -15,7 +15,11 @@ export const getStarted = {
 		{
 			id: 2,
 			title: "Integrate",
+<<<<<<< HEAD
 			text: "Plug Celestia into your existing chain..",
+=======
+			text: "Plug Celestia into your existing chain.",
+>>>>>>> origin/main
 			// image: "build/concepts.png",
 			type: "anchor",
 			link: {
diff --git a/src/datas/build/seoContent.js b/src/datas/build/seoContent.js
index 8dbb4b465..f7312c98e 100644
--- a/src/datas/build/seoContent.js
+++ b/src/datas/build/seoContent.js
@@ -2,5 +2,9 @@ export const seoContent = {
 	title: "Developer Portal | celestia.org",
 	ogTitle: "Developer Portal | celestia.org",
 	description: "The homepage for Celestia developers. Tutorials. Resources. Community.",
+<<<<<<< HEAD
 	image: "/build-og-image.jpg",
+=======
+	image: "/developer-portal-og-image.jpg",
+>>>>>>> origin/main
 };
diff --git a/src/datas/ecosystem/content.js b/src/datas/ecosystem/content.js
index a50d64026..ff129990d 100644
--- a/src/datas/ecosystem/content.js
+++ b/src/datas/ecosystem/content.js
@@ -1,4 +1,5 @@
 export const FooterBoxes = [
+<<<<<<< HEAD
     {
         title: 'Join our growing ecosystem',
         text: 'View job openings and career opportunities in our ecosystem.',
@@ -18,4 +19,27 @@ export const FooterBoxes = [
             type: 'simple'
         }
     }
-]
\ No newline at end of file
+]
+=======
+	{
+		title: "Join our growing ecosystem",
+		text: "View job openings and career opportunities in our ecosystem.",
+		button: {
+			text: "Current openings",
+			href: "https://celestia.pallet.com/jobs/",
+			id: "operator",
+			type: "simple",
+		},
+	},
+	{
+		title: "Build on testnet",
+		text: "Join a growing modular ecosystem of developers building on testnet.",
+		button: {
+			text: "Get started",
+			href: "https://docs.celestia.org/",
+			id: "operator",
+			type: "simple",
+		},
+	},
+];
+>>>>>>> origin/main
diff --git a/src/datas/ecosystem/ecosystems.js b/src/datas/ecosystem/ecosystems.js
index ffb4f8f2d..5e362f0e3 100644
--- a/src/datas/ecosystem/ecosystems.js
+++ b/src/datas/ecosystem/ecosystems.js
@@ -1,150 +1,275 @@
+<<<<<<< HEAD
 export const ecosystemCategories = [
 	{
 		title: "Astria",
 		category: ["Rollups", "Rollups-as-a-service", "Shared sequencer"],
+=======
+// 1. Define ecosystem items
+export const ecosystemItems = [
+	{
+		title: "Astria",
+		description: "",
+>>>>>>> origin/main
 		image: "ecosystem/astria.png",
 		url: "https://astria.org/",
 	},
 	{
 		title: "Alpha Dune",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/alphadune.png",
+=======
+		image: "ecosystem/alphadune.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://alphadune.com/",
 	},
 	{
 		title: "LightLink",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/lightlink.png",
+=======
+		image: "ecosystem/lightlink.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://lightlink.io/",
 	},
 	{
 		title: "Manta Network",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/manta.png",
+=======
+		image: "ecosystem/manta.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://manta.network/",
 	},
 	{
 		title: "AsMatch",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/asmatch.png",
+=======
+		image: "ecosystem/asmatch.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.asmatch.app/",
 	},
 	{
 		title: "Movement Labs",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/movement.png",
+=======
+		image: "ecosystem/movement.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://movementlabs.xyz/",
 	},
 	{
 		title: "Ojo",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/ojo.png",
+=======
+		image: "ecosystem/ojo.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://ojo.network/",
 	},
 	{
 		title: "Deri",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/deri.png",
+=======
+		image: "ecosystem/deri.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://deri.io/#/index",
 	},
 	{
 		title: "Paima Engine",
+<<<<<<< HEAD
 		category: ["Infrastructure"],
 		image: "ecosystem/paima.png",
+=======
+		image: "ecosystem/paima.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://paimastudios.com/",
 	},
 	{
 		title: "Curio",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/curio.png",
+=======
+		image: "ecosystem/curio.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.curio.gg/",
 	},
 	{
 		title: "POKT Network",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/poktnetwork.png",
+=======
+		image: "ecosystem/poktnetwork.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.pokt.network/",
 	},
 	{
 		title: "Shogun",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/shogun.png",
+=======
+		image: "ecosystem/shogun.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://twitter.com/shogunfi/",
 	},
 	{
 		title: "Eclipse",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/eclipse.png",
+=======
+		image: "ecosystem/eclipse.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.eclipse.builders/",
 	},
 	{
 		title: "Syndr",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/syndr.png",
+=======
+		category: ["Rollup"],
+		image: "ecosystem/syndr.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.syndr.com/",
 	},
 	{
 		title: "Hokum",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/hokum.png",
+=======
+		image: "ecosystem/hokum.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://hokum.gg/",
 	},
 	{
 		title: "UniDex",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/unidex.png",
+=======
+		image: "ecosystem/unidex.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.unidex.exchange/",
 	},
 	{
 		title: "Kinto",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/kinto.png",
+=======
+		image: "ecosystem/kinto.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://kinto.xyz/",
 	},
 	{
 		title: "Zeko",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/zeko.png",
+=======
+		image: "ecosystem/zeko.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://zeko.io/",
 	},
 	{
 		title: "ZKFair",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/zkfair.png",
+=======
+		image: "ecosystem/zkfair.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://zkfair.io/",
 	},
 	{
 		title: "Last L2",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/lastl2.png",
+=======
+		image: "ecosystem/lastl2.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://golast.xyz/",
 	},
 	{
 		title: "Dark Frontier",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/darkfrontier.png",
+=======
+		image: "ecosystem/darkfrontier.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://darkfrontier.gg/",
 	},
 	{
 		title: "Forma",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/forma.png",
+=======
+		image: "ecosystem/forma.png",
+		description: "",
+>>>>>>> origin/main
 		url: "",
 	},
 	{
 		title: "Caldera",
+<<<<<<< HEAD
 		category: ["Rollups-as-a-service"],
 		image: "ecosystem/caldera.png",
+=======
+		image: "ecosystem/caldera.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.caldera.xyz/",
 	},
 	{
 		title: "Vistara",
+<<<<<<< HEAD
 		category: ["Rollups-as-a-service"],
 		image: "ecosystem/vistara.png",
+=======
+		image: "ecosystem/vistara.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://docs.vistara.dev/",
 	},
 	{
 		title: "Snapchain",
+<<<<<<< HEAD
 		category: ["Rollups-as-a-service"],
 		image: "ecosystem/snapchain.png",
 		url: "https://www.snapchain.dev/",
@@ -153,360 +278,745 @@ export const ecosystemCategories = [
 		title: "Altlayer",
 		category: ["Rollups-as-a-service"],
 		image: "ecosystem/altlayer.png",
+=======
+		image: "ecosystem/snapchain.png",
+		description: "",
+		url: "https://www.snapchain.dev/",
+	},
+	{
+		title: "AltLayer",
+		image: "ecosystem/altlayer.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.altlayer.io/",
 	},
 	{
 		title: "Conduit",
+<<<<<<< HEAD
 		category: ["Rollups-as-a-service"],
 		image: "ecosystem/conduit.png",
+=======
+		image: "ecosystem/conduit.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://conduit.xyz/",
 	},
 	{
 		title: "Gateway",
+<<<<<<< HEAD
 		category: ["Rollups-as-a-service"],
 		image: "ecosystem/gateway.png",
+=======
+		image: "ecosystem/gateway.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://gateway.fm/",
 	},
 	{
 		title: "Gelato",
+<<<<<<< HEAD
 		category: ["Rollups-as-a-service"],
 		image: "ecosystem/gelato.png",
+=======
+		image: "ecosystem/gelato.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.gelato.network/",
 	},
 	{
 		title: "Lumoz",
+<<<<<<< HEAD
 		category: ["Rollups-as-a-service"],
 		image: "ecosystem/lumoz.png",
+=======
+		image: "ecosystem/lumoz.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://lumoz.org/",
 	},
 	{
 		title: "Zeeve",
+<<<<<<< HEAD
 		category: ["Rollups-as-a-service"],
 		image: "ecosystem/zeeve.png",
+=======
+		image: "ecosystem/zeeve.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.zeeve.io/",
 	},
 	{
 		title: "Karnot",
+<<<<<<< HEAD
 		category: ["Rollups-as-a-service"],
 		image: "ecosystem/karnot.png",
+=======
+		image: "ecosystem/karnot.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.karnot.xyz/",
 	},
 	{
 		title: "Rollkit",
+<<<<<<< HEAD
 		category: ["Rollup framework"],
 		image: "ecosystem/rollkit.png",
+=======
+		image: "ecosystem/rollkit.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.rollkit.dev/",
 	},
 	{
 		title: "Sovereign SDK",
+<<<<<<< HEAD
 		category: ["Rollup framework"],
 		image: "ecosystem/sovereign.png",
+=======
+		image: "ecosystem/sovereign.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://sovereign.xyz/",
 	},
 	{
 		title: "OP Stack",
+<<<<<<< HEAD
 		category: ["Rollup framework"],
 		image: "ecosystem/optimism.png",
+=======
+		image: "ecosystem/optimism.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://docs.optimism.io/stack/getting-started",
 	},
 	{
 		title: "Stackr",
+<<<<<<< HEAD
 		category: ["Rollup framework"],
 		image: "ecosystem/stackr.png",
+=======
+		image: "ecosystem/stackr.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.stackrlabs.xyz/",
 	},
 	{
 		title: "Arbitrum Orbit",
+<<<<<<< HEAD
 		category: ["Rollup framework"],
 		image: "ecosystem/arbitrum.png",
+=======
+		image: "ecosystem/arbitrum.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://arbitrum.io/orbit",
 	},
 	{
 		title: "Dymint",
+<<<<<<< HEAD
 		category: ["Rollup framework"],
 		image: "ecosystem/dymension.png",
+=======
+		image: "ecosystem/dymension.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://dymension.xyz/",
 	},
 	{
 		title: "Polygon CDK",
+<<<<<<< HEAD
 		category: ["Rollup framework"],
 		image: "ecosystem/polygoncdk.png",
+=======
+		image: "ecosystem/polygoncdk.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://polygon.technology/polygon-cdk",
 	},
 	{
 		title: "Cartesi",
+<<<<<<< HEAD
 		category: ["Rollup framework", "Virtual machine"],
 		image: "ecosystem/cartesi.png",
+=======
+		image: "ecosystem/cartesi.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://cartesi.io/",
 	},
 	{
 		title: "Keystone",
+<<<<<<< HEAD
 		category: ["Rollup framework"],
 		image: "ecosystem/curio.png",
+=======
+		image: "ecosystem/curio.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.keystonesdk.com/",
 	},
 	{
 		title: "Radius",
+<<<<<<< HEAD
 		category: ["Shared sequencer"],
 		image: "ecosystem/radius.png",
+=======
+		image: "ecosystem/radius.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.theradius.xyz/",
 	},
 	{
 		title: "Fairblock",
+<<<<<<< HEAD
 		category: ["Shared sequencer"],
 		image: "ecosystem/fairblock.png",
+=======
+		image: "ecosystem/fairblock.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://twitter.com/Fair_Block",
 	},
 	{
 		title: "Madara",
+<<<<<<< HEAD
 		category: ["Shared sequencer"],
 		image: "ecosystem/madara.png",
+=======
+		image: "ecosystem/madara.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.madara.zone/",
 	},
 	{
 		title: "NodeKit",
+<<<<<<< HEAD
 		category: ["Shared sequencer"],
 		image: "ecosystem/nodekit.png",
+=======
+		image: "ecosystem/nodekit.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.nodekit.xyz/",
 	},
 	{
 		title: "Neutron",
+<<<<<<< HEAD
 		category: ["Settlement layer & bridging hubs"],
 		image: "ecosystem/neutron.png",
+=======
+		image: "ecosystem/neutron.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://neutron.org/",
 	},
 	{
 		title: "Berachain",
+<<<<<<< HEAD
 		category: ["Settlement layer & bridging hubs"],
 		image: "ecosystem/berachain.png",
+=======
+		image: "ecosystem/berachain.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://berachain.com/",
 	},
 	{
 		title: "Saga",
+<<<<<<< HEAD
 		category: ["Settlement layer & bridging hubs"],
 		image: "ecosystem/saga.png",
+=======
+		image: "ecosystem/saga.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.saga.xyz/",
 	},
 	{
 		title: "Dymension",
+<<<<<<< HEAD
 		category: ["Settlement layer & bridging hubs"],
 		image: "ecosystem/dymension.png",
+=======
+		image: "ecosystem/dymension.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://dymension.xyz/",
 	},
 	{
 		title: "Osmosis",
+<<<<<<< HEAD
 		category: ["Settlement layer & bridging hubs"],
 		image: "ecosystem/osmosis.png",
+=======
+		image: "ecosystem/osmosis.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://osmosis.zone/",
 	},
 	{
 		title: "Initia",
+<<<<<<< HEAD
 		category: ["Settlement layer & bridging hubs"],
 		image: "ecosystem/initia.png",
+=======
+		image: "ecosystem/initia.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://twitter.com/initiaFDN",
 	},
 	{
 		title: "Argus",
+<<<<<<< HEAD
 		category: ["Settlement layer & bridging hubs"],
 		image: "ecosystem/argus.png",
+=======
+		image: "ecosystem/argus.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://argus.gg/",
 	},
 	{
 		title: "Axelar",
+<<<<<<< HEAD
 		category: ["Cross chain"],
 		image: "ecosystem/axelar.png",
+=======
+		image: "ecosystem/axelar.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://axelar.network/",
 	},
 	{
 		title: "Hyperlane",
+<<<<<<< HEAD
 		category: ["Cross chain"],
 		image: "ecosystem/hyperlane.png",
+=======
+		image: "ecosystem/hyperlane.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.hyperlane.xyz/",
 	},
 	{
 		title: "Catalyst",
+<<<<<<< HEAD
 		category: ["Cross chain"],
 		image: "ecosystem/catalyst.png",
+=======
+		image: "ecosystem/catalyst.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://catalyst.exchange/",
 	},
 	{
 		title: "Squid",
+<<<<<<< HEAD
 		category: ["Cross chain"],
 		image: "ecosystem/squid.png",
+=======
+		image: "ecosystem/squid.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.squidrouter.com/",
 	},
 	{
 		title: "Skip",
+<<<<<<< HEAD
 		category: ["Cross chain"],
 		image: "ecosystem/skip.png",
+=======
+		image: "ecosystem/skip.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://skip.money/",
 	},
 	{
 		title: "Mitosis",
+<<<<<<< HEAD
 		category: ["Cross chain"],
 		image: "ecosystem/mitosis.png",
+=======
+		image: "ecosystem/mitosis.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://twitter.com/MitosisOrg",
 	},
 	{
 		title: "Polyhedra",
+<<<<<<< HEAD
 		category: ["Cross chain"],
 		image: "ecosystem/polyhedra.png",
+=======
+		image: "ecosystem/polyhedra.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://polyhedra.network/",
 	},
 	{
 		title: "Wormhole",
+<<<<<<< HEAD
 		category: ["Cross chain"],
 		image: "ecosystem/wormhole.png",
+=======
+		image: "ecosystem/wormhole.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://wormhole.com/",
 	},
 	{
 		title: "Union",
+<<<<<<< HEAD
 		category: ["Cross chain"],
 		image: "ecosystem/union.png",
+=======
+		image: "ecosystem/union.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://union.build/",
 	},
 	{
 		title: "Orb Labs",
+<<<<<<< HEAD
 		category: ["Cross chain"],
 		image: "ecosystem/orb.png",
+=======
+		image: "ecosystem/orb.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.orblabs.xyz/",
 	},
 	{
 		title: "Celenium",
+<<<<<<< HEAD
 		category: ["Explorer"],
 		image: "ecosystem/celenium.png",
+=======
+		image: "ecosystem/celenium.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://celenium.io/",
 	},
 	{
 		title: "Dora",
+<<<<<<< HEAD
 		category: ["Explorer"],
 		image: "ecosystem/dora.png",
+=======
+		image: "ecosystem/dora.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.ondora.xyz/",
 	},
 	{
 		title: "Mintscan",
+<<<<<<< HEAD
 		category: ["Explorer"],
 		image: "ecosystem/mintscan.png",
+=======
+		image: "ecosystem/mintscan.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.mintscan.io/celestia",
 	},
 	{
 		title: "Modular Cloud",
+<<<<<<< HEAD
 		category: ["Explorer"],
 		image: "ecosystem/modularcloud.png",
+=======
+		image: "ecosystem/modularcloud.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://explorer.modular.cloud/celestia-mainnet",
 	},
 	{
 		title: "Numia",
+<<<<<<< HEAD
 		category: ["Analytics"],
 		image: "ecosystem/numia.png",
+=======
+		image: "ecosystem/numia.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.numia.xyz/",
 	},
 	{
 		title: "Range",
+<<<<<<< HEAD
 		category: ["Analytics"],
 		image: "ecosystem/range.png",
+=======
+		image: "ecosystem/range.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.range.org/",
 	},
 	{
 		title: "Cosmostation",
+<<<<<<< HEAD
 		category: ["Wallet"],
 		image: "ecosystem/cosmostation.png",
+=======
+		image: "ecosystem/cosmostation.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.cosmostation.io/",
 	},
 	{
 		title: "Keplr",
+<<<<<<< HEAD
 		category: ["Wallet"],
 		image: "ecosystem/keplr.png",
+=======
+		image: "ecosystem/keplr.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.keplr.app/",
 	},
 	{
 		title: "Leap wallet",
+<<<<<<< HEAD
 		category: ["Wallet"],
 		image: "ecosystem/leap-wallet.png",
+=======
+		image: "ecosystem/leap-wallet.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.leapwallet.io/",
 	},
 	{
 		title: "Cosmology",
+<<<<<<< HEAD
 		category: ["Wallet"],
 		image: "ecosystem/cosmology.png",
+=======
+		image: "ecosystem/cosmology.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://cosmology.tech/",
 	},
 	{
 		title: "Aori",
+<<<<<<< HEAD
 		category: ["Infrastructure"],
 		image: "ecosystem/aori.png",
+=======
+		image: "ecosystem/aori.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.aori.io/",
 	},
 	{
 		title: "Noble",
+<<<<<<< HEAD
 		category: ["Infrastructure"],
 		image: "ecosystem/noble.png",
+=======
+		image: "ecosystem/noble.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://nobleassets.xyz/",
 	},
 	{
 		title: "Risc Zero",
+<<<<<<< HEAD
 		category: ["Infrastructure"],
 		image: "ecosystem/risczero.png",
+=======
+		image: "ecosystem/risczero.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.risczero.com/",
 	},
 	{
 		title: "Marlin",
+<<<<<<< HEAD
 		category: ["Infrastructure"],
 		image: "ecosystem/marlin.png",
+=======
+		image: "ecosystem/marlin.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.marlin.org/",
 	},
 	{
 		title: "Nebra",
 		category: ["Infrastructure"],
 		image: "ecosystem/nebra.png",
+<<<<<<< HEAD
+=======
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.nebra.one/",
 	},
 	{
 		title: "Redstone",
+<<<<<<< HEAD
 		category: ["Infrastructure"],
 		image: "ecosystem/redstone.png",
+=======
+		image: "ecosystem/redstone.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://redstone.finance/",
 	},
 	{
 		title: "Privy",
+<<<<<<< HEAD
 		category: ["Wallet"],
 		image: "ecosystem/privy.png",
+=======
+		image: "ecosystem/privy.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.privy.io/",
 	},
 	{
 		title: "ZeroDev",
+<<<<<<< HEAD
 		category: ["Infrastructure"],
 		image: "ecosystem/zerodev.png",
+=======
+		image: "ecosystem/zerodev.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://zerodev.app/",
 	},
 	{
 		title: "Arc",
+<<<<<<< HEAD
 		category: ["Infrastructure"],
 		image: "ecosystem/arc.png",
+=======
+		image: "ecosystem/arc.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://www.onarc.io/",
 	},
 	{
 		title: "Polaris",
+<<<<<<< HEAD
 		category: ["Virtual machine"],
 		image: "ecosystem/berachain.png",
+=======
+		image: "ecosystem/berachain.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://berachain.com/",
 	},
 	{
 		title: "CosmWasm",
+<<<<<<< HEAD
 		category: ["Virtual machine"],
 		image: "ecosystem/cosmwasm.png",
+=======
+		image: "ecosystem/cosmwasm.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://cosmwasm.com/",
 	},
 	{
 		title: "Nebula Garden",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/nebulagarden.png",
+=======
+		image: "ecosystem/nebulagarden.png",
+		description: "",
+>>>>>>> origin/main
 		url: "https://twitter.com/NebulaGarden_",
 	},
 	{
 		title: "Plume Network",
+<<<<<<< HEAD
 		category: ["Rollups"],
 		image: "ecosystem/plumenetwork.png",
 		url: "https://www.plumenetwork.xyz/",
 	},
 ];
+=======
+		image: "ecosystem/plumenetwork.png",
+		description: "",
+		url: "https://www.plumenetwork.xyz/",
+	},
+];
+
+// 2. Define ecosystem categories and assign ecosystem items to them.
+//    An ecosystem item can be assigned to multiple categories. See Rollkit as an example.
+export const ecosystemCategories = {
+	order: "none", // specify the vertical order of categories on the categories panel:  asc | desc | none  (default: none - will render items in order as you define them in the categories array)
+	categories: [
+		{
+			name: "Rollups",
+			items: [
+				"Alpha Dune",
+				"AsMatch",
+				"Astria",
+				"Curio",
+				"Dark Frontier",
+				"Deri",
+				"Eclipse",
+				"Forma",
+				"Hokum",
+				"Kinto",
+				"Last L2",
+				"LightLink",
+				"Manta Network",
+				"Movement Labs",
+				"Ojo",
+				"Paima Studios",
+				"Pocket Network",
+				"Shogun",
+				"Syndr",
+				"UniDex",
+				"Waev",
+				"Zeko",
+				"ZKFair",
+				"Nebula Garden",
+				"Plume Network",
+			],
+		},
+		{
+			name: "Rollups-as-a-service",
+			items: ["AltLayer", "Astria", "Caldera", "Conduit", "Gateway", "Gelato", "Karnot", "Lumoz", "Snapchain", "Vistara", "Zeeve"],
+		},
+		{
+			name: "Shared sequencer",
+			items: ["Astria", "Fairblock", "Madara", "NodeKit", "Radius"],
+		},
+		{
+			name: "Rollup framework",
+			items: ["Arbitrum Orbit", "Cartesi", "Dymint", "Keystone", "OP Stack", "Polygon CDK", "Rollkit", "Sovereign SDK", "Stackr"],
+		},
+		{
+			name: "Virtual machine",
+			items: ["Polaris", "CosmWasm", "Cartesi"],
+		},
+		{
+			name: "Settlement layer & bridging hub",
+			items: ["Neutron", "Berachain", "Saga", "Argus", "Dymension", "Initia", "Osmosis"],
+		},
+		{
+			name: "Cross chain",
+			items: ["Axelar", "Catalyst", "Hyperlane", "Mitosis", "Orb Labs", "Polyhedra", "Skip", "Squid", "Union", "Wormhole"],
+		},
+		{
+			name: "Explorer",
+			items: ["Celenium", "Dora", "Mintscan", "Modular Cloud"],
+		},
+		{
+			name: "Analytics",
+			items: ["Numia", "Range"],
+		},
+		{
+			name: "Wallet",
+			items: ["Cosmostation", "Keplr", "Leap wallet", "Cosmology"],
+		},
+		{
+			name: "Infrastructure",
+			items: ["Aori", "Arc", "Marlin", "Nebra", "Noble", "Privy", "Redstone", "Risc Zero", "ZeroDev"],
+		},
+	],
+};
+>>>>>>> origin/main
diff --git a/src/datas/ecosystem/seoContent.js b/src/datas/ecosystem/seoContent.js
index 2b8ea09a4..78e21b797 100644
--- a/src/datas/ecosystem/seoContent.js
+++ b/src/datas/ecosystem/seoContent.js
@@ -2,5 +2,10 @@ export const seoContent = {
 	title: "Ecosystem | celestia.org",
 	ogTitle: "Ecosystem | celestia.org",
 	description: "Celestia Ecosystem provides a wide range of apps and services built in the Celestia ecosystem.",
+<<<<<<< HEAD
     image: "/ecosystem-og-image.jpg",
-};
\ No newline at end of file
+};
+=======
+	image: "/ecosystem-og-image.jpg",
+};
+>>>>>>> origin/main
diff --git a/src/datas/run-a-node/join-the-network.js b/src/datas/run-a-node/join-the-network.js
index 5890512f2..1a3574759 100644
--- a/src/datas/run-a-node/join-the-network.js
+++ b/src/datas/run-a-node/join-the-network.js
@@ -9,7 +9,11 @@ export const joinTheNetwork = {
 			image: "run-a-node/beginner-image.png",
 			link: {
 				text: "Deploy on Vimana",
+<<<<<<< HEAD
 				url: "https://docs.vistara.dev/the-vistara-workflow/getting-started",
+=======
+				url: "https://docs.vistara.dev/guides/getting-started",
+>>>>>>> origin/main
 			},
 		},
 		{
diff --git a/src/datas/team/team-members.js b/src/datas/team/team-members.js
index 3e1ed3f9e..94f01c2d9 100644
--- a/src/datas/team/team-members.js
+++ b/src/datas/team/team-members.js
@@ -266,6 +266,7 @@ export const teamMembers = [
 		},
 	},
 	{
+<<<<<<< HEAD
 		id: 25,
 		name: "Gabriel Blaut",
 		title: "Software Engineer",
@@ -280,6 +281,8 @@ export const teamMembers = [
 		},
 	},
 	{
+=======
+>>>>>>> origin/main
 		id: 26,
 		name: "Mojtaba Eskandari",
 		title: "Software Engineer",
@@ -490,6 +493,7 @@ export const teamMembers = [
 		},
 	},
 	{
+<<<<<<< HEAD
 		id: 42,
 		name: "Samuel Enderwitz",
 		title: "DevOps Engineer",
@@ -504,6 +508,8 @@ export const teamMembers = [
 		},
 	},
 	{
+=======
+>>>>>>> origin/main
 		id: 43,
 		name: "Elissa Greenfield",
 		title: "Head of People Ops",
diff --git a/src/datas/what-is-celestia/content.js b/src/datas/what-is-celestia/content.js
index 27e915820..8a63a37ec 100644
--- a/src/datas/what-is-celestia/content.js
+++ b/src/datas/what-is-celestia/content.js
@@ -1,9 +1,16 @@
 export const FooterBoxes2 = [
 	{
+<<<<<<< HEAD
 		title: "Build your app",
 		text: "Deploy your own chain or smart contract on Celestia’s public testnets",
 		link: {
 			text: "Find your best option",
+=======
+		title: "Build whatever",
+		text: "With Celestia underneath, a customizable blockchain becomes as easy to deploy as a smart contract.",
+		link: {
+			text: "Build modular",
+>>>>>>> origin/main
 			href: "/build/",
 			type: "internal",
 			id: "build",
@@ -11,10 +18,17 @@ export const FooterBoxes2 = [
 		},
 	},
 	{
+<<<<<<< HEAD
 		title: "Explore what you can do",
 		text: "Go through Celestia’s world of apps, run your own node, learn about TIA, or even do all three!",
 		link: {
 			text: "Show me",
+=======
+		title: "Explore Celestia",
+		text: "Explore Celestia’s ecosystem of apps and services, run a light node, or learn about Tia.",
+		link: {
+			text: "Explore",
+>>>>>>> origin/main
 			href: "/#explore-celestia",
 			type: "anchor",
 			id: "explore",
diff --git a/src/datas/what-is-celestia/toc.js b/src/datas/what-is-celestia/toc.js
index bd32c2d57..06b867ed4 100644
--- a/src/datas/what-is-celestia/toc.js
+++ b/src/datas/what-is-celestia/toc.js
@@ -1,8 +1,18 @@
 export const tableOfContent = [
 	{
 		depth: 1,
+<<<<<<< HEAD
 		id: "tell-me-about-celestia",
 		value: "Tell me about Celestia",
+=======
+		id: "what-is-celestia",
+		value: "What is Celestia?",
+	},
+	{
+		depth: 1,
+		id: "why-celestia",
+		value: "Why Celestia?",
+>>>>>>> origin/main
 	},
 	{
 		depth: 1,
@@ -16,16 +26,20 @@ export const tableOfContent = [
 	},
 	{
 		depth: 1,
+<<<<<<< HEAD
 		id: "what-are-rollups",
 		value: "What are rollups?",
 	},
 	{
 		depth: 1,
+=======
+>>>>>>> origin/main
 		id: "what-i-a-modular-blockchain",
 		value: "What is a modular blockchain?",
 	},
 	{
 		depth: 1,
+<<<<<<< HEAD
 		id: "why-celestia",
 		value: "Why Celestia?",
 	},
@@ -43,5 +57,9 @@ export const tableOfContent = [
 		depth: 1,
 		id: "start-using-celestia",
 		value: "Start using Celestia",
+=======
+		id: "start-using-celestia",
+		value: "Start using Celestia!",
+>>>>>>> origin/main
 	},
 ];
diff --git a/src/datas/what-is-tia/role.js b/src/datas/what-is-tia/role.js
index 4830a43f2..2268e50bd 100644
--- a/src/datas/what-is-tia/role.js
+++ b/src/datas/what-is-tia/role.js
@@ -14,7 +14,11 @@ export const role = {
 				},
 				{
 					text: "Learn more",
+<<<<<<< HEAD
 					url: "https://docs.celestia.org/learn/submit-data/",
+=======
+					url: "https://docs.celestia.org/learn/paying-for-blobspace/",
+>>>>>>> origin/main
 					type: "external",
 				},
 			],
diff --git a/src/pages/ecosystem.js b/src/pages/ecosystem.js
index da628eb19..b3e4d049e 100644
--- a/src/pages/ecosystem.js
+++ b/src/pages/ecosystem.js
@@ -1,5 +1,9 @@
 import * as React from "react";
+<<<<<<< HEAD
 import { ecosystemCategories } from "../datas/ecosystem/ecosystems";
+=======
+import { ecosystemItems, ecosystemCategories } from "../datas/ecosystem/ecosystems";
+>>>>>>> origin/main
 import { FooterBoxes } from "../datas/ecosystem/content";
 import Layout from "../components/layout";
 import { useState } from "react";
@@ -10,12 +14,19 @@ import Seo from "../components/seo";
 
 const EcosystemPage = () => {
 	const [selectedCategory, setSelectedCategory] = useState("all");
+<<<<<<< HEAD
 	const [search, setSearch] = useState(false);
 	const [open, setOpen] = useState(false);
 	var ecosystems = [];
 	const searchInputRef = React.useRef(null);
 
 	const allUniqueCategories = [...new Set(ecosystemCategories.flatMap((item) => item.category))];
+=======
+	const [search, setSearch] = useState("");
+	const [open, setOpen] = useState(false);
+	const searchInputRef = React.useRef(null);
+	const scrollToRef = React.useRef(null);
+>>>>>>> origin/main
 
 	function searchApp(e) {
 		e.preventDefault();
@@ -30,6 +41,7 @@ const EcosystemPage = () => {
 		if (!open && searchInputRef.current) {
 			searchInputRef.current.value = "";
 		}
+<<<<<<< HEAD
 	}
 
 	ecosystemCategories.forEach(function (ecosystem) {
@@ -46,6 +58,38 @@ const EcosystemPage = () => {
 
 	sortByKey(ecosystems, "title");
 
+=======
+
+		// Perform the scroll after the state has been updated
+		setTimeout(() => {
+			if (scrollToRef.current) {
+				const top = scrollToRef.current.offsetTop - 40;
+				window.scrollTo({ top, behavior: "smooth" });
+			}
+		}, 0); // Timeout ensures this runs after the state updates
+	}
+
+	// Map each ecosystem item to its categories
+	const itemsWithCategories = ecosystemItems.map((item) => {
+		const categories = ecosystemCategories.categories.filter((category) => category.items.includes(item.title)).map((category) => category.name);
+		return { ...item, categories };
+	});
+
+	// Sort categories based on the order property
+	let sortedCategories = [...ecosystemCategories.categories];
+	if (ecosystemCategories.order === "asc") {
+		sortedCategories.sort((a, b) => a.name.localeCompare(b.name));
+	} else if (ecosystemCategories.order === "desc") {
+		sortedCategories.sort((a, b) => b.name.localeCompare(a.name));
+	}
+
+	// React.useEffect(() => {
+	// 	if (scrollToRef.current) {
+	// 		const top = scrollToRef.current.offsetTop - 40;
+	// 		window.scrollTo({ top, behavior: "smooth" });
+	// 	}
+	// }, [selectedCategory]);
+>>>>>>> origin/main
 	return (
 		<Layout footerBoxes={FooterBoxes}>
 			<Seo title={seoContent.title} description={seoContent.description} ogTitle={seoContent.ogTitle} image={seoContent.image} />
@@ -59,6 +103,7 @@ const EcosystemPage = () => {
 							</div>
 						</div>
 
+<<<<<<< HEAD
 						<div className={"row my-2 pt-2 pt-lg-5 my-lg-5 pb-3"}>
 							<div className={"col-12 col-lg-4"}>
 								<div className={"category-selector"}>
@@ -108,12 +153,32 @@ const EcosystemPage = () => {
 															onClick={() => openCategorySelector(category)}
 															onKeyDown={(e) => {
 																if (e.key === "Enter") openCategorySelector(category);
+=======
+						<div ref={scrollToRef} className={"row my-2 pt-2 pt-lg-5 my-lg-5 pb-3"}>
+							<div className={"col-12"}>
+								<div className={"row"}>
+									<div className='col-12 col-md-8'>
+										<div className={"category-selector"}>
+											<div className={`category-selector-box ${open ? "opened" : ""}`}>
+												<ul className='category-list'>
+													<li className={`position-relative ${selectedCategory === "all" ? "selected" : ""}`}>
+														<div
+															className={"click-target"}
+															onClick={() => openCategorySelector("all")}
+															onKeyDown={(e) => {
+																if (e.key === "Enter") openCategorySelector("all");
+>>>>>>> origin/main
 															}}
 															tabIndex={0}
 															role='button'
 														>
+<<<<<<< HEAD
 															{category}
 															{selectedCategory === category && (
+=======
+															<span>All</span>
+															{selectedCategory === "all" && (
+>>>>>>> origin/main
 																<svg
 																	id={"mobile-category"}
 																	viewBox='0 0 22 22'
@@ -140,6 +205,7 @@ const EcosystemPage = () => {
 															)}
 														</div>
 													</li>
+<<<<<<< HEAD
 												);
 											})}
 										</ul>
@@ -166,6 +232,94 @@ const EcosystemPage = () => {
 										.map((item, index) => (
 											<div className={"col-12 col-sm-6 col-lg-6 col-xl-4 p-1"} key={index}>
 												<Ecosystem category={item.category} ecosystem={item} />
+=======
+													{sortedCategories.map(function (category) {
+														return (
+															<li
+																className={`position-relative ${
+																	selectedCategory === category.name ? "selected" : ""
+																}`}
+															>
+																<div
+																	className='click-target'
+																	onClick={() => openCategorySelector(category.name)}
+																	onKeyDown={(e) => {
+																		if (e.key === "Enter") openCategorySelector(category.name);
+																	}}
+																	tabIndex={0}
+																	role='button'
+																>
+																	<span>{category.name}</span>
+																	{selectedCategory === category.name && (
+																		<svg
+																			id={"mobile-category"}
+																			viewBox='0 0 22 22'
+																			version='1.1'
+																			xmlns='http://www.w3.org/2000/svg'
+																		>
+																			<g stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
+																				<g transform='translate(-485.000000, -1044.000000)'>
+																					<g transform='translate(227.000000, 410.000000)'>
+																						<g transform='translate(269.000000, 645.000000) rotate(-90.000000) translate(-269.000000, -645.000000) translate(258.000000, 634.000000)'>
+																							<rect
+																								fill='#EDEDED'
+																								x='0'
+																								y='0'
+																								width='22'
+																								height='22'
+																								rx='4'
+																							/>
+																							<polyline
+																								stroke='#000000'
+																								strokeWidth='1.5'
+																								strokeLinecap='round'
+																								transform='translate(10.694444, 11.152778) rotate(-270.000000) translate(-10.694444, -11.152778) '
+																								points='7.94444444 9.77777778 10.6944444 12.5277778 13.4444444 9.77777778'
+																							/>
+																						</g>
+																					</g>
+																				</g>
+																			</g>
+																		</svg>
+																	)}
+																</div>
+															</li>
+														);
+													})}
+												</ul>
+											</div>
+										</div>
+									</div>
+									<div className={"col-12 col-md-4"}>
+										<div className={"search-input"}>
+											<input
+												ref={searchInputRef}
+												type='text'
+												id={"search"}
+												placeholder={"Search app"}
+												onKeyUp={searchApp}
+												onClick={() => {
+													if (scrollToRef.current) {
+														const top = scrollToRef.current.offsetTop - 40;
+														window.scrollTo({ top, behavior: "smooth" });
+													}
+												}}
+											/>
+										</div>
+									</div>
+								</div>
+								<div className={"row px-2 mt-5"}>
+									{itemsWithCategories
+										.filter(
+											(ecosystem) =>
+												(selectedCategory === "all" || ecosystem.categories.includes(selectedCategory)) &&
+												(!search || ecosystem.title.toLowerCase().includes(search))
+										)
+										.sort((a, b) => a.title.localeCompare(b.title))
+										.map((ecosystem, index) => (
+											<div className={"col-12 col-sm-6 col-lg-6 col-xl-4 p-1"} key={index}>
+												<Ecosystem ecosystem={ecosystem} />
+>>>>>>> origin/main
 											</div>
 										))}
 								</div>
diff --git a/src/pages/index.js b/src/pages/index.js
index 0b83f221a..cb274847c 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -53,7 +53,11 @@ const IndexPage = () => {
 							direction={"ltr"}
 							title={"Access abundance"}
 							text={`
+<<<<<<< HEAD
 								<p>Tap into the abundant throughput enabled by <a href='https://celestia.org/what-is-celestia/#what-is-data-availability-sampling' target='_blank' rel='noopener noreferrer'>Data Availability Sampling (DAS)</a>, the first architecture that securely scales with the number of users.</p>
+=======
+								<p>Tap into the abundant throughput enabled by <a href='https://celestia.org/what-is-celestia/#what-is-data-availability-sampling' target='_blank' rel='noopener noreferrer'>data availability sampling (DAS)</a>, the first architecture that securely scales with the number of users.</p>
+>>>>>>> origin/main
 								<p>Anyone can directly verify and contribute to Celestia by <a href='https://celestia.org/run-a-light-node/' target='_blank' rel='noopener noreferrer'>running a light node</a>.</p>
 							`}
 							image={"graph-scale.png"}
@@ -72,6 +76,10 @@ const IndexPage = () => {
 							image={"graph-ecosystem.png"}
 							buttonPrimaryTitle={"Build modular"}
 							buttonPrimaryUrl={"/build/"}
+<<<<<<< HEAD
+=======
+							buttonPrimaryClass={"plausible-event-name=Build_Modular_Button-Homepage--Build_whatever_section"}
+>>>>>>> origin/main
 							buttonSecondaryTitle={"Deploy"}
 							buttonSecondaryUrl={"/build#deploy"}
 							anim={lottiAnim2}
diff --git a/src/pages/what-is-celestia.js b/src/pages/what-is-celestia.js
index 33e656f63..291b336b3 100644
--- a/src/pages/what-is-celestia.js
+++ b/src/pages/what-is-celestia.js
@@ -9,12 +9,18 @@ import { seoContent } from "../datas/what-is-celestia/seoContent";
 import Seo from "../components/seo";
 
 import celestia_tell_me_about_celestia from "../images/what-is-celestia/celestia-tell-me-about-celestia.png";
+<<<<<<< HEAD
 import celestia_what_are_rollups from "../images/what-is-celestia/celestia-what-are-rollups.png";
 import data_availability_sampling from "../images/what-is-celestia/celestia-data-availability-sampling.png";
 import celestia_data_availability from "../images/what-is-celestia/celestia-data-availability.png";
 import celestia_what_is_modular from "../images/what-is-celestia/celestia-what-is-modular.png";
 import celestia_modularizm from "../images/what-is-celestia/celestia-modularizm.png";
 import celestia_connections from "../images/what-is-celestia/celestia-connections.png";
+=======
+import data_availability_sampling from "../images/what-is-celestia/celestia-data-availability-sampling.png";
+import celestia_data_availability from "../images/what-is-celestia/celestia-data-availability.png";
+import celestia_what_is_modular from "../images/what-is-celestia/celestia-what-is-modular.png";
+>>>>>>> origin/main
 
 const WhatIsCelestia = () => {
 	const [showTocCategories, setShowTocCategories] = useState(false);
@@ -34,7 +40,11 @@ const WhatIsCelestia = () => {
 					}
 				});
 			},
+<<<<<<< HEAD
 			{ rootMargin: "-30% 0px -30% 0px", threshold: 0 }
+=======
+			{ rootMargin: "-30% 0px -40% 0px", threshold: 0 }
+>>>>>>> origin/main
 		);
 
 		const currentRefs = sectionRefs.current;
@@ -57,6 +67,7 @@ const WhatIsCelestia = () => {
 			<div className={"what-is-celestia"}>
 				<main>
 					<div className={"container"}>
+<<<<<<< HEAD
 						<h1 className={"mb-5"}>What is Celestia?</h1>
 
 						<section className={"card-section"}>
@@ -72,6 +83,15 @@ const WhatIsCelestia = () => {
 							</div>
 						</section>
 
+=======
+						<section
+							className={"hero-section"}
+							ref={(el) => (sectionRefs.current[0] = el)}
+							id={`${tableOfContent[0].id.replace(/\s+/g, "-").toLowerCase()}`}
+						>
+							<h1>What is Celestia?</h1>
+						</section>
+>>>>>>> origin/main
 						<div className={"row sticky-row"}>
 							<div className={"sticky-container col-lg-3"}>
 								<div className={"toc-2"}>
@@ -125,6 +145,7 @@ const WhatIsCelestia = () => {
 									</div>
 								</div>
 							</div>
+<<<<<<< HEAD
 							<div className='col-lg-9 ps-lg-4 p-xl-5'>
 								<section
 									ref={(el) => (sectionRefs.current[0] = el)}
@@ -134,6 +155,12 @@ const WhatIsCelestia = () => {
 									<div className={"row justify-content-between align-items-center"}>
 										<div className={"col-12 col-lg-6 mb-2 mb-lg-0"}>
 											<h2 className='title'>Tell me about Celestia</h2>
+=======
+							<div className='col-lg-9 ps-lg-4 p-xl-5 pt-xl-0'>
+								<section className={"tell-me-about-celestia"}>
+									<div className={"row justify-content-between align-items-center"}>
+										<div className={"col-12 col-lg-6 mb-2 mb-lg-0"}>
+>>>>>>> origin/main
 											<p>
 												Celestia is a modular data availability (DA) network that securely scales with the number of users,
 												making it easy for anyone to launch their own blockchain.
@@ -158,9 +185,89 @@ const WhatIsCelestia = () => {
 
 								<section
 									ref={(el) => (sectionRefs.current[1] = el)}
+<<<<<<< HEAD
 									className={"what-is-data-availability"}
 									id={`${tableOfContent[1].id.replace(/\s+/g, "-").toLowerCase()}`}
 								>
+=======
+									className={"whats-it-like-to-build-on-Celestia"}
+									id={`${tableOfContent[1].id.replace(/\s+/g, "-").toLowerCase()}`}
+								>
+									<div className={"row mb-3 mb-md-5 justify-content-center"}>
+										<h2 className='title'>Why Celestia?</h2>
+									</div>
+									<div className='row'>
+										<div className='col-z-index order-2 order-md-1 col-sm-12 col-md-5 col-lg-6 col-xl-5'>
+											<div className={"row align-items-center gy-3"}>
+												<div className={"col-12"}>
+													<div className={"why-use-card"}>
+														<h3 className={"why-use-title"}>Deploy fast</h3>
+														<p className={"why-use-text"}>
+															Deploy your own customizable blockchain as easily as a smart contract.
+														</p>
+													</div>
+												</div>
+												<div className={"col-12"}>
+													<div className={"why-use-card"}>
+														<h3 className={"why-use-title"}>Use any VM</h3>
+														<p className={"why-use-text"}>
+															Transform nearly any virtual machine into your own sovereign chain.
+														</p>
+													</div>
+												</div>
+												<div className={"col-12"}>
+													<div className={"why-use-card"}>
+														<h3 className={"why-use-title"}>Access abundant throughput</h3>
+														<p className={"why-use-text"}>
+															Unlock dynamic throughput that scales with the number of users.
+														</p>
+													</div>
+												</div>
+											</div>
+										</div>
+										<div className={"image-box--why order-1 order-md-2 col-sm-12 col-md-7 col-lg-6 col-xl-7"}>
+											<StaticImage
+												className={"d-md-none d-block"}
+												quality={100}
+												placeholder={"none"}
+												src='../images/what-is-celestia/celestia-infographics-paths-mobile.png'
+											/>
+											<StaticImage
+												className={"d-none d-md-block"}
+												quality={100}
+												placeholder={"none"}
+												src='../images/what-is-celestia/celestia-infographics-paths.png'
+											/>
+										</div>
+									</div>
+									<div className='link-wrapper'>
+										<a className='link' href='https://celestia.org/build/' target='_blank' rel='noreferrer'>
+											Build whatever
+											<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'>
+												<path
+													stroke='#7B2BF9'
+													stroke-linecap='square'
+													stroke-width='1.5'
+													d='M3.61218 12.0721L11.0761 4.60823'
+												/>
+												<path
+													stroke='#7B2BF9'
+													stroke-linecap='square'
+													stroke-linejoin='bevel'
+													stroke-width='1.5'
+													d='M11.5254 11.0752V4.00413H4.45432'
+												/>
+											</svg>
+										</a>
+									</div>
+								</section>
+
+								<section
+									ref={(el) => (sectionRefs.current[2] = el)}
+									className={"what-is-data-availability"}
+									id={`${tableOfContent[2].id.replace(/\s+/g, "-").toLowerCase()}`}
+								>
+>>>>>>> origin/main
 									<div className={"row justify-content-between align-items-center"}>
 										<div className={"image-box--analogy order-2 order-lg-1 col-12 col-lg-6"}>
 											<div className='image-wrapper'>
@@ -185,9 +292,15 @@ const WhatIsCelestia = () => {
 								</section>
 
 								<section
+<<<<<<< HEAD
 									ref={(el) => (sectionRefs.current[2] = el)}
 									className={"data-availability-sampling"}
 									id={`${tableOfContent[2].id.replace(/\s+/g, "-").toLowerCase()}`}
+=======
+									ref={(el) => (sectionRefs.current[3] = el)}
+									className={"data-availability-sampling"}
+									id={`${tableOfContent[3].id.replace(/\s+/g, "-").toLowerCase()}`}
+>>>>>>> origin/main
 								>
 									<h2 className='title'>Now what's data availability sampling?</h2>
 									<div className={"image-box--different"}>
@@ -207,6 +320,7 @@ const WhatIsCelestia = () => {
 								</section>
 
 								<section
+<<<<<<< HEAD
 									ref={(el) => (sectionRefs.current[3] = el)}
 									className={"what-are-rollups"}
 									id={`${tableOfContent[3].id.replace(/\s+/g, "-").toLowerCase()}`}
@@ -235,6 +349,8 @@ const WhatIsCelestia = () => {
 								</section>
 
 								<section
+=======
+>>>>>>> origin/main
 									ref={(el) => (sectionRefs.current[4] = el)}
 									className={"what-is-a-modular-blockchain"}
 									id={`${tableOfContent[4].id.replace(/\s+/g, "-").toLowerCase()}`}
@@ -252,6 +368,7 @@ const WhatIsCelestia = () => {
 										applications for mass adoption.
 									</p>
 								</section>
+<<<<<<< HEAD
 
 								<section
 									ref={(el) => (sectionRefs.current[5] = el)}
@@ -382,6 +499,12 @@ const WhatIsCelestia = () => {
 									ref={(el) => (sectionRefs.current[8] = el)}
 									className={"start-using-celestia"}
 									id={`${tableOfContent[8].id.replace(/\s+/g, "-").toLowerCase()}`}
+=======
+								<section
+									ref={(el) => (sectionRefs.current[5] = el)}
+									className={"start-using-celestia"}
+									id={`${tableOfContent[5].id.replace(/\s+/g, "-").toLowerCase()}`}
+>>>>>>> origin/main
 								/>
 							</div>
 						</div>
diff --git a/src/scss/main.scss b/src/scss/main.scss
index fec24f1dd..f144ccf16 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -562,6 +562,7 @@ hr:not([size]) {
 		}
 	}
 }
+<<<<<<< HEAD
 
 
 .steps{
@@ -575,4 +576,6 @@ hr:not([size]) {
 		opacity:0;
 		transform:translateY(20px)
 	}
-}
\ No newline at end of file
+}
+=======
+>>>>>>> origin/main
diff --git a/src/scss/modules/footer.scss b/src/scss/modules/footer.scss
index 388311763..d98c8cb63 100644
--- a/src/scss/modules/footer.scss
+++ b/src/scss/modules/footer.scss
@@ -254,6 +254,11 @@ footer {
 						background-position: right top;
 						position: relative;
 						padding: 35px 36px 40px 36px;
+<<<<<<< HEAD
+=======
+						display: flex;
+						flex-direction: column;
+>>>>>>> origin/main
 
 						@include media-breakpoint-down(md) {
 							padding: 40px;
diff --git a/src/scss/pages/page-ecosystem.scss b/src/scss/pages/page-ecosystem.scss
index 7a42ad3f8..6e9b2040b 100644
--- a/src/scss/pages/page-ecosystem.scss
+++ b/src/scss/pages/page-ecosystem.scss
@@ -1,5 +1,9 @@
 .ecosystem-page {
+<<<<<<< HEAD
 	min-height: 60vw;
+=======
+	min-height: 50vh;
+>>>>>>> origin/main
 	position: relative;
 	z-index: 1;
 
@@ -19,6 +23,10 @@
 			height: 70%;
 		}
 		@include media-breakpoint-down(lg) {
+<<<<<<< HEAD
+=======
+			min-height: 65vh;
+>>>>>>> origin/main
 			width: 80%;
 			height: 80%;
 			top: -130px;
@@ -51,14 +59,22 @@
 	.search-input {
 		background: #ffffff;
 		border: 1px solid #d8d8d8;
+<<<<<<< HEAD
 		border-radius: 12px;
+=======
+		border-radius: 8px;
+>>>>>>> origin/main
 		font-family: $inter;
 		font-size: 16px;
 		color: #000000;
 		letter-spacing: -0.3px;
 		line-height: 24px;
+<<<<<<< HEAD
 		margin-bottom: 30px;
 		height: 60px;
+=======
+		height: 50px;
+>>>>>>> origin/main
 		max-width: 500px;
 		background-image: url(../images/search-icon.svg);
 		background-repeat: no-repeat;
@@ -106,16 +122,22 @@
 		}
 
 		.category-selector-box {
+<<<<<<< HEAD
 			background: rgba(246, 246, 246, 0.7);
 			padding: 10px;
 			border-radius: 6px;
 			padding: 32px;
 			margin-right: 24px;
+=======
+			background: transparent;
+			border-radius: 6px;
+>>>>>>> origin/main
 			ul {
 				list-style: none;
 				margin: 0;
 				padding: 0;
 				li {
+<<<<<<< HEAD
 					font-family: $ruberoid;
 					font-weight: 600;
 					font-size: 14px;
@@ -129,6 +151,32 @@
 					&.selected {
 						color: #fff;
 						margin-left: 9px;
+=======
+					overflow: hidden;
+					font-family: $ruberoid;
+					color: #787676;
+					font-size: 14px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: normal;
+					letter-spacing: -0.087px;
+					padding: 14px;
+					position: relative;
+					display: table;
+					cursor: pointer;
+					text-wrap: balance;
+					border-radius: 8px;
+					border: 1px solid #e8e8e8;
+					background: transparent;
+					box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
+					user-select: none;
+
+					&.selected {
+						color: #000000;
+						border: 1px solid #d8d8d8;
+						background: #fff;
+						box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
+>>>>>>> origin/main
 						&:before {
 							content: "";
 							left: 0;
@@ -136,6 +184,7 @@
 							width: 100%;
 							height: 100%;
 							position: absolute;
+<<<<<<< HEAD
 							background: $purple;
 							z-index: 0;
 							border-radius: 6px;
@@ -143,6 +192,11 @@
 						div[role="button"] {
 							position: relative;
 							z-index: 1;
+=======
+							background: white;
+							z-index: 0;
+							border-radius: 8px;
+>>>>>>> origin/main
 						}
 					}
 
@@ -165,7 +219,11 @@
 								display: none;
 							}
 							div[role="button"] {
+<<<<<<< HEAD
 								color: $purple;
+=======
+								color: #000000;
+>>>>>>> origin/main
 							}
 
 							svg {
@@ -184,8 +242,13 @@
 				color: #000000;
 				letter-spacing: 0;
 				cursor: pointer;
+<<<<<<< HEAD
 				background: rgba(246, 246, 246, 0.7);
 				padding: 10px;
+=======
+				background: transparent;
+				padding: 0;
+>>>>>>> origin/main
 				border-radius: 6px;
 				margin-bottom: 10px;
 				max-height: 100px;
@@ -206,13 +269,45 @@
 					}
 				}
 			}
+<<<<<<< HEAD
+=======
+
+			.category-list {
+				display: flex;
+				flex-direction: column;
+				flex-wrap: wrap;
+				gap: 8px;
+				@include media-breakpoint-up(lg) {
+					flex-direction: row;
+				}
+
+				.click-target {
+					span {
+						position: relative;
+						z-index: 1;
+					}
+					&::after {
+						content: "";
+						position: absolute;
+						inset: 0;
+						z-index: 0;
+					}
+				}
+			}
+>>>>>>> origin/main
 		}
 	}
 
 	.ecosystem {
+<<<<<<< HEAD
 		background: #f4f4f5;
 		border-radius: 12px;
 		padding: 30px;
+=======
+		background: #f7f7f7;
+		border-radius: 8px;
+		padding: 24px 20px;
+>>>>>>> origin/main
 		height: 100%;
 		width: 100%;
 
@@ -233,6 +328,7 @@
 			}
 		}
 
+<<<<<<< HEAD
 		.category {
 			font-family: $inter;
 			font-weight: 500;
@@ -241,15 +337,58 @@
 			letter-spacing: 0;
 			line-height: 24px;
 			text-transform: uppercase;
+=======
+		.category-container {
+			display: flex;
+			flex-wrap: wrap;
+			row-gap: 6px;
+			column-gap: 4px;
+			.category {
+				font-family: $inter;
+				font-weight: 500;
+				color: #414141;
+				font-size: 12px;
+				letter-spacing: 0;
+				text-transform: uppercase;
+				text-wrap: balance;
+				border-radius: 48px;
+				background: #e9e9e9;
+				padding: 2px 8px;
+				display: inline;
+				width: fit-content;
+				text-wrap: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+>>>>>>> origin/main
 		}
 
 		.title {
 			font-family: $ruberoid;
 			font-weight: bold;
+<<<<<<< HEAD
 			font-size: 28px;
 			color: #000000;
 			letter-spacing: 0;
 			margin-bottom: 10px;
+=======
+			font-size: 24px;
+			color: #000000;
+			letter-spacing: 0;
+			margin-bottom: 10px;
+			line-height: normal;
+		}
+		.description {
+			color: #000;
+			font-family: $inter;
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px;
+			margin-top: 24px;
+			text-wrap: pretty;
+>>>>>>> origin/main
 		}
 	}
 }
diff --git a/src/scss/pages/page-what-is-celestia.scss b/src/scss/pages/page-what-is-celestia.scss
index 145c651fb..bfd07838c 100644
--- a/src/scss/pages/page-what-is-celestia.scss
+++ b/src/scss/pages/page-what-is-celestia.scss
@@ -1,5 +1,6 @@
 .what-is-celestia {
 	padding-top: 0px;
+<<<<<<< HEAD
 	@include media-breakpoint-down(sm) {
 		padding-top: 20px;
 	}
@@ -14,6 +15,13 @@
 			font-size: 32px;
 		}
 	}
+=======
+	position: relative;
+	z-index: 50;
+	@include media-breakpoint-down(sm) {
+		padding-top: 20px;
+	}
+>>>>>>> origin/main
 
 	h2,
 	h3 {
@@ -31,6 +39,13 @@
 		}
 	}
 
+<<<<<<< HEAD
+=======
+	main {
+		padding: 0;
+	}
+
+>>>>>>> origin/main
 	.lead-text {
 		font-family: $inter;
 		font-size: 18px;
@@ -132,8 +147,20 @@
 		}
 	}
 
+<<<<<<< HEAD
 	.tell-me-about-celestia {
 		margin-bottom: 80px;
+=======
+	.hero-section {
+		padding: 80px 0 80px 0;
+		h1 {
+			margin-bottom: 0px;
+			max-width: 100%;
+		}
+	}
+
+	.tell-me-about-celestia {
+>>>>>>> origin/main
 		padding: 0;
 		@include media-breakpoint-down(lg) {
 			margin-bottom: 70px;
@@ -151,8 +178,12 @@
 	}
 
 	.what-is-a-modular-blockchain {
+<<<<<<< HEAD
 		margin-bottom: 80px;
 		padding: 0;
+=======
+		padding: 100px 0 0 0;
+>>>>>>> origin/main
 		@include media-breakpoint-down(lg) {
 			margin-bottom: 70px;
 			padding-top: 40px;
@@ -163,8 +194,12 @@
 	}
 
 	.data-availability-sampling {
+<<<<<<< HEAD
 		margin-bottom: 80px;
 		padding: 0;
+=======
+		padding: 100px 0 0 0;
+>>>>>>> origin/main
 		.image-box--different {
 			padding: 0 30px;
 		}
@@ -181,8 +216,12 @@
 	}
 
 	.what-is-data-availability {
+<<<<<<< HEAD
 		margin-bottom: 80px;
 		padding: 0;
+=======
+		padding: 100px 0 0 0;
+>>>>>>> origin/main
 		@include media-breakpoint-down(lg) {
 			margin-bottom: 70px;
 		}
@@ -251,7 +290,11 @@
 	}
 
 	.whats-it-like-to-build-on-Celestia {
+<<<<<<< HEAD
 		padding: 0 0 100px 0;
+=======
+		padding: 80px 0 0 0;
+>>>>>>> origin/main
 		@include media-breakpoint-down(sm) {
 			padding: 0 0 80px 0;
 		}
diff --git a/src/scss/sections/two-column-h2-section.scss b/src/scss/sections/two-column-h2-section.scss
index 7d89599a7..7edcf49bf 100644
--- a/src/scss/sections/two-column-h2-section.scss
+++ b/src/scss/sections/two-column-h2-section.scss
@@ -65,3 +65,45 @@
 		}
 	}
 }
+<<<<<<< HEAD
+=======
+
+.anim-col{
+	.lottie-anim-1{
+		width:700px;
+		height:450px;
+
+		@media (max-width: 1380px) {
+			width:100%;
+			height:unset;
+
+			canvas{
+				max-width:100%;
+			}
+		}
+	}
+	.lottie-anim-2{
+		width:680px;
+		height:450px;
+
+		@media (max-width: 1380px) {
+			width:100%;
+			height:unset;
+
+			canvas{
+				max-width:100%;
+			}
+		}
+	}
+}
+
+
+.lottie-anchor{
+	position:absolute;
+	margin-top:25vh;
+
+	@media (max-width: 1380px) {
+		margin-top:0;
+	}
+}
+>>>>>>> origin/main