diff --git a/public/images/app/lasybridge/celestia_lazybridging_bg.png b/public/images/app/lasybridge/celestia_lazybridging_bg.png
new file mode 100644
index 000000000..f17d24106
Binary files /dev/null and b/public/images/app/lasybridge/celestia_lazybridging_bg.png differ
diff --git a/public/images/celestia-logo-invert.svg b/public/images/celestia-logo-invert.svg
new file mode 100644
index 000000000..408180400
--- /dev/null
+++ b/public/images/celestia-logo-invert.svg
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.9.3, SVG Export Plug-In . SVG Version: 9.03 Build 53313)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	viewBox="0 0 132 34" style="enable-background:new 0 0 132 34;" xml:space="preserve">
+	<style type="text/css">
+		.st0 {
+			clip-path: url(#SVGID_00000152262350106184519890000007559724956864424338_);
+		}
+
+		.st1 {
+			fill-rule: evenodd;
+			clip-rule: evenodd;
+			fill: white;
+		}
+	</style>
+	<g id="Layer_2">
+	</g>
+	<g id="Layer_1">
+		<g>
+			<defs>
+				<rect id="SVGID_1_" x="0.1" width="131.2" height="34" />
+			</defs>
+			<clipPath id="SVGID_00000178174203794055954230000008347555292352038806_">
+				<use xlink:href="#SVGID_1_" style="overflow:visible;" />
+			</clipPath>
+			<g style="clip-path:url(#SVGID_00000178174203794055954230000008347555292352038806_);">
+				<path class="st1" d="M56.7,13.6h5.8c0.5,0,0.9-0.4,0.9-1c-0.1-0.4-0.4-0.8-0.9-0.8h-7.2c-0.5,0-0.9,0.4-0.9,0.9v8.6
+				c0,0.5,0.4,0.9,0.9,0.9h7.2c0.5,0,0.9-0.4,0.9-1c-0.1-0.4-0.4-0.8-0.9-0.8h-5.7c-0.3,0-0.6-0.3-0.6-0.6v-1.5
+				c0-0.3,0.3-0.6,0.6-0.6H61c0.5,0,0.9-0.4,0.9-1c-0.1-0.4-0.4-0.8-0.9-0.8h-4.3c-0.3,0-0.6-0.3-0.6-0.6v-1.5
+				C56.1,13.8,56.3,13.6,56.7,13.6z M46.7,13.6c1,0,1.8,0.3,2.4,1c0.2,0.2,0.4,0.2,0.6,0.2c0.5,0,0.9-0.4,0.9-0.9
+				c0-0.2-0.1-0.5-0.4-0.7c-1-1-2.2-1.4-3.6-1.4c-1.4,0-2.6,0.5-3.7,1.5c-1,1-1.5,2.2-1.5,3.7c0,1.4,0.5,2.6,1.5,3.7
+				c1,1,2.2,1.5,3.7,1.5c1.4,0,2.6-0.5,3.7-1.5c0.3-0.3,0.3-0.9,0-1.2c-0.3-0.3-0.9-0.3-1.2,0c-0.7,0.7-1.5,1-2.4,1
+				c-0.9,0-1.8-0.3-2.4-1c-0.7-0.7-1-1.5-1-2.4c0-0.9,0.3-1.8,1-2.4C45,13.9,45.8,13.6,46.7,13.6z M74.9,20.5h-5.7
+				c-0.3,0-0.6-0.3-0.6-0.6v-7.2c0-0.4-0.3-0.8-0.8-0.9c-0.5-0.1-1,0.3-1,0.9v8.6c0,0.5,0.4,0.9,0.9,0.9h7.2c0.5,0,0.9-0.4,0.9-1
+				C75.7,20.8,75.3,20.5,74.9,20.5z M111.2,11.8h-8.6c-0.5,0-0.9,0.4-0.9,1c0.1,0.4,0.4,0.8,0.9,0.8h2.9c0.3,0,0.6,0.3,0.6,0.6v7.2
+				c0,0.5,0.4,0.9,1,0.9c0.4-0.1,0.8-0.4,0.8-0.9v-7.2c0-0.3,0.3-0.6,0.6-0.6h2.9c0.5,0,0.9-0.4,0.9-1
+				C112,12.2,111.6,11.8,111.2,11.8z M115.8,11.8c-0.5,0-0.9,0.4-0.9,0.9v8.6c0,0.5,0.4,0.9,0.9,0.9s0.9-0.4,0.9-0.9v-8.6
+				C116.6,12.2,116.2,11.8,115.8,11.8z M98.5,16.9c-0.8-0.5-1.9-0.8-3.2-0.8c-1.8,0-2.7-0.4-2.7-1.3c0-0.9,0.9-1.3,2.7-1.3
+				c1,0,1.9,0.2,2.8,0.5c0.5,0.2,0.9,0,1.1-0.5c0.2-0.4-0.1-0.9-0.5-1.1c-1-0.4-2.1-0.6-3.4-0.6c-1.3,0-2.4,0.3-3.2,0.8
+				c-0.8,0.5-1.2,1.3-1.2,2.2c0,1,0.4,1.8,1.2,2.3c0.8,0.5,1.9,0.8,3.2,0.8c1.8,0,2.7,0.4,2.7,1.3c0,0.9-0.9,1.3-2.7,1.3h-0.4
+				c-0.9,0-1.8-0.2-2.8-0.5c-0.4-0.2-0.9,0-1.1,0.5c-0.2,0.4,0.1,1,0.5,1.1c1,0.4,2.1,0.6,3.4,0.6h0.4c1.3,0,2.4-0.3,3.2-0.8
+				c0.8-0.5,1.2-1.3,1.2-2.2C99.7,18.2,99.3,17.4,98.5,16.9z M80.8,13.6h5.8c0.5,0,0.9-0.4,0.9-1c-0.1-0.4-0.4-0.8-0.9-0.8h-7.2
+				c-0.5,0-0.9,0.4-0.9,0.9v8.6c0,0.5,0.4,0.9,0.9,0.9h7.2c0.5,0,0.9-0.4,0.9-1c-0.1-0.4-0.4-0.8-0.9-0.8h-5.7
+				c-0.3,0-0.6-0.3-0.6-0.6v-1.5c0-0.3,0.3-0.6,0.6-0.6h4.3c0.5,0,0.9-0.4,0.9-1c-0.1-0.4-0.4-0.8-0.9-0.8h-4.3
+				c-0.3,0-0.6-0.3-0.6-0.6v-1.5C80.3,13.8,80.5,13.6,80.8,13.6z M32.1,17.2c0,0.1-0.1,0.1-0.2,0c0,0,0-0.1-0.1-0.1
+				c0-0.1,0-0.2,0-0.2c0,0,0,0,0.1-0.1c0.1-0.1,0.2-0.1,0.2,0C32.1,16.9,32.1,17.1,32.1,17.2z M31.4,15.2c-0.1,0.2-0.4,0.2-0.5,0
+				c0,0,0-0.1-0.1-0.1c-0.5-0.7-1-1.4-1.6-2.1c-0.1-0.2,0-0.4,0.2-0.4h0c1.4,0,2.1,0.3,2.3,0.8C31.9,13.7,31.9,14.3,31.4,15.2z
+				 M31.1,22.4c-0.1,0.2-0.2,0.4-0.2,0.6c0,0,0,0.1,0,0.1c-0.5,1-1.4,1.7-2.5,2.3c-0.3,0.1-0.5-0.1-0.5-0.4c0.4-1.3,0.7-2.8,0.8-4.3
+				c0-0.3,0.2-0.5,0.4-0.7c0.5-0.4,0.9-0.8,1.3-1.2l0,0c0.2-0.2,0.5-0.1,0.6,0.2C31.4,20.1,31.5,21.3,31.1,22.4z M28,27.2
+				c-0.1,0.1-0.2,0.2-0.4,0.4c-0.2,0.2-0.4,0.4-0.6,0.6c-0.1,0.1-0.3,0-0.3-0.2c0,0,0-0.1,0.1-0.1c0.1-0.2,0.2-0.4,0.3-0.6
+				c0,0,0.1-0.1,0.1-0.1c0.2-0.1,0.4-0.1,0.6-0.2C28,26.9,28.1,27.1,28,27.2z M25.7,26c-0.5,0.1-0.9,0.1-1.4,0.1
+				c-1.2,0-2.5-0.1-3.9-0.3c-0.2,0-0.2-0.3,0-0.3c0.3-0.1,0.6-0.3,0.9-0.5c2-1.1,4-2.3,5.6-3.5c0.1-0.1,0.3,0,0.3,0.2
+				c-0.2,1.4-0.6,2.7-1,3.9C26.1,25.8,26,26,25.7,26z M25.3,27.9c-1.1,2.2-2.4,3.4-3.8,3.3c-1.4,0-2.8-1.5-3.9-4.1l0,0
+				c-0.1-0.2,0-0.3,0.2-0.4c0,0,0,0,0,0c0.1,0,0.1,0,0.2,0c2,0.6,3.9,0.8,5.7,0.8c0.2,0,0.4,0,0.6,0c0.2,0,0.5,0,0.7,0
+				C25.2,27.5,25.4,27.7,25.3,27.9z M18.8,32c-0.7,0.1-1.3,0.1-2,0.1c-3,0-5.8-0.8-8.3-2.4c-0.2-0.1-0.1-0.4,0.1-0.4
+				c0,0,0.1,0,0.1,0c0.6,0,1.3-0.1,2-0.3c1.6-0.3,3.3-0.8,5.2-1.5c0.2-0.1,0.3,0,0.4,0.2c0,0,0,0,0,0c0.7,1.7,1.6,3,2.6,3.9
+				C19.1,31.7,19,31.9,18.8,32z M9.9,21.2c1.4-1.1,2.9-2.2,4.7-3.2c0,2.2,0.3,4.4,0.7,6.3c-0.6-0.3-1.3-0.6-1.9-0.9
+				C12.1,22.7,11,22,9.9,21.2z M5.7,27.2c-0.3-0.6,0.1-2,2.2-4.2l0,0c0.2-0.2,0.2-0.6,0-0.8c-0.1-0.1-0.2-0.1-0.3-0.2
+				c-0.2-0.2-0.5-0.2-0.7,0c0,0-0.1,0.1-0.1,0.1c-1.1,1.1-1.8,2.1-2.2,3c-0.1,0.3-0.5,0.3-0.6,0c-1.6-2.5-2.5-5.4-2.5-8.4
+				c0-1.1,0.1-2.2,0.3-3.2c0-0.2,0.3-0.2,0.3,0c0.3,1.1,0.8,2.1,1.6,3.2c1,1.5,2.2,2.9,3.7,4.2c0.5,0.4,1.1,0.9,1.6,1.3
+				c1.1,0.8,2.4,1.6,3.7,2.3c0.6,0.3,1.2,0.6,1.7,0.9c0.3,0.1,0.7,0.2,1,0c0.3-0.1,0.6-0.2,0.8-0.3c0.3-0.1,0.5-0.5,0.4-0.8
+				c0,0,0-0.1,0-0.1c-0.5-1.9-0.7-4.1-0.7-6.4l0,0c0,0,0-0.1,0-0.1c0-0.1,0-0.3,0-0.4c0,0,0-0.1,0-0.1c0,0,0,0,0,0c0,0,0,0,0,0
+				c0-0.1,0-0.3,0-0.4c0-0.4,0-0.8,0-1.2c0,0,0,0,0,0c0.1-2.8,0.6-5.4,1.4-7.6c0.1-0.2,0-0.4-0.2-0.5c-0.2-0.1-0.4-0.1-0.6-0.2
+				c-0.2-0.1-0.4,0-0.5,0.2c-0.8,2.4-1.3,5.2-1.4,8.2c0,0.4-0.2,0.7-0.5,0.9c-1.8,1-3.4,2.2-4.8,3.3c-0.3,0.2-0.7,0.2-1,0
+				c-1.4-1.2-2.6-2.5-3.5-3.9C3,13.3,2.6,10.8,3.6,8.8c0,0,0,0,0,0C3.8,8.6,3.9,8.4,4,8.2c1.1-1.5,3.3-2.4,6.1-2.5
+				c0.2,0,0.4,0,0.5,0c1.7,0,3.6,0.3,5.5,0.8l0,0c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0,0,0,0,0,0c0.4,0.1,0.9,0.3,1.3,0.4c0,0,0,0,0,0
+				c0,0,0,0,0,0c0.1,0,0.2,0.1,0.3,0.1c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0l0,0c0.9,0.4,1.9,0.8,2.8,1.3c1.8,0.9,3.4,2,4.8,3.2
+				c-2.7,0.6-5.8,1.8-9,3.4c-0.1,0.1-0.2,0.2-0.2,0.4c0,0.2,0,0.6,0,0.9c0,0.2,0.2,0.3,0.4,0.2l0,0c3.1-1.6,6.2-2.9,8.9-3.5
+				c0.5-0.1,0.8-0.6,0.8-1.1c0-0.4-0.1-0.7-0.2-1c-0.1-0.4-0.3-0.8-0.7-1.1c-1.2-1-2.6-1.8-4.1-2.6c-1-0.5-2-1-3-1.4
+				c-0.2-0.1-0.3-0.3-0.2-0.5c1-1.9,2.3-2.9,3.5-2.9c0,0,0,0,0,0c1.4,0,2.8,1.5,3.9,4.1c0.5,1.3,0.9,2.8,1.2,4.4c0,0,0,0,0,0
+				c0.1,0.7,0.2,1.4,0.3,2.1c0,0,0,0,0,0c0,0,0,0,0,0c0.1,1.2,0.2,2.5,0.1,3.8c0,0.8-0.1,1.6-0.1,2.4c-1.9,1.5-4.3,3.1-6.8,4.4
+				c-0.8,0.5-1.7,0.9-2.5,1.3c0,0,0,0,0,0c-0.1,0-0.1,0.1-0.2,0.1c0,0,0,0,0,0c-0.7,0.3-1.4,0.6-2.1,0.9c0,0,0,0,0,0
+				c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0.1c-0.1,0-0.2,0.1-0.3,0.1c0,0-0.1,0-0.1,0c-0.1,0.1-0.3,0.1-0.4,0.1c0,0,0,0-0.1,0c0,0,0,0,0,0
+				c-1.5,0.5-2.8,0.9-4.1,1.2C7.5,28.2,6,27.8,5.7,27.2z M7.9,4.2c2.6-1.8,5.7-2.8,8.9-2.8c0.9,0,1.7,0.1,2.5,0.2
+				c0.2,0,0.3,0.3,0.1,0.5c-0.8,0.6-1.5,1.6-2.2,2.8c-0.2,0.3-0.5,0.4-0.8,0.3c-2.2-0.6-4.3-0.9-6.3-0.8C9.4,4.4,8.7,4.4,8,4.5
+				C7.8,4.6,7.7,4.3,7.9,4.2z M29,15.4c0-0.2,0.2-0.3,0.3-0.1c0.1,0.2,0.2,0.4,0.4,0.5c0.2,0.2,0.3,0.5,0.4,0.7
+				c0.1,0.1,0.1,0.3,0,0.5c-0.2,0.2-0.4,0.4-0.6,0.6c-0.1,0.1-0.2,0.2-0.2,0.2c-0.1,0.1-0.3,0-0.3-0.1c0-0.3,0-0.5,0-0.8
+				C29,16.4,29,15.9,29,15.4z M27.4,5.6c0.1,0.1,0.2,0.2,0.3,0.3c1.5,1.5,2.6,3.2,3.4,5.1c0.1,0.2-0.1,0.4-0.3,0.4
+				c-0.4-0.1-0.9-0.1-1.5-0.1c-0.4,0-0.7-0.3-0.8-0.6c-0.3-1.7-0.7-3.2-1.3-4.6c0-0.1-0.1-0.2-0.1-0.2C27,5.6,27.2,5.5,27.4,5.6z
+				 M33.2,13.3c-0.7-3.1-2.2-6-4.5-8.4C25.5,1.7,21.3,0,16.8,0C12.3,0,8.1,1.7,5,4.9c-0.8,0.8-1.5,1.6-2,2.5
+				C2.7,7.6,2.6,7.9,2.4,8.1c-1.5,2.6-2.4,5.5-2.4,8.6c0,4.5,1.7,8.7,4.9,11.8c3.2,3.2,7.4,4.9,11.8,4.9c4.5,0,8.7-1.7,11.8-4.9
+				c1.5-1.5,2.7-3.2,3.5-5.1c0.1-0.2,0.2-0.4,0.3-0.6c0.8-1.9,1.1-4,1.1-6.1C33.5,15.6,33.4,14.4,33.2,13.3
+				C33.2,13.3,33.2,13.3,33.2,13.3z M126.9,18.3h-3.2c-0.3,0-0.5-0.3-0.3-0.6L125,15c0.1-0.3,0.5-0.3,0.7,0l1.6,2.7
+				C127.4,18,127.2,18.3,126.9,18.3z M131.1,20.9l-5-8.7c-0.4-0.6-1.1-0.6-1.5,0l-5,8.7c-0.1,0.1-0.1,0.2-0.1,0.3
+				c0,0.5,0.3,0.9,0.8,0.9c0.3,0,0.6-0.2,0.8-0.5l0.8-1.3c0.1-0.2,0.3-0.3,0.5-0.3h5.8c0.2,0,0.4,0.1,0.5,0.3l0.8,1.3
+				c0.2,0.3,0.5,0.5,0.8,0.5c0.5,0,0.9-0.4,0.9-0.9C131.2,21.2,131.1,21.1,131.1,20.9z" />
+			</g>
+		</g>
+	</g>
+</svg>
\ No newline at end of file
diff --git a/public/images/celestia-logo.svg b/public/images/celestia-logo.svg
index 432c41221..2adced20e 100644
--- a/public/images/celestia-logo.svg
+++ b/public/images/celestia-logo.svg
@@ -1,23 +1,30 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 27.9.3, SVG Export Plug-In . SVG Version: 9.03 Build 53313)  -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 132 34" style="enable-background:new 0 0 132 34;" xml:space="preserve">
-<style type="text/css">
-	.st0{clip-path:url(#SVGID_00000152262350106184519890000007559724956864424338_);}
-	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#17141A;}
-</style>
-<g id="Layer_2">
-</g>
-<g id="Layer_1">
-	<g>
-		<defs>
-			<rect id="SVGID_1_" x="0.1" width="131.2" height="34"/>
-		</defs>
-		<clipPath id="SVGID_00000178174203794055954230000008347555292352038806_">
-			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
-		</clipPath>
-		<g style="clip-path:url(#SVGID_00000178174203794055954230000008347555292352038806_);">
-			<path class="st1" d="M56.7,13.6h5.8c0.5,0,0.9-0.4,0.9-1c-0.1-0.4-0.4-0.8-0.9-0.8h-7.2c-0.5,0-0.9,0.4-0.9,0.9v8.6
+	viewBox="0 0 132 34" style="enable-background:new 0 0 132 34;" xml:space="preserve">
+	<style type="text/css">
+		.st0 {
+			clip-path: url(#SVGID_00000152262350106184519890000007559724956864424338_);
+		}
+
+		.st1 {
+			fill-rule: evenodd;
+			clip-rule: evenodd;
+			fill: #17141A;
+		}
+	</style>
+	<g id="Layer_2">
+	</g>
+	<g id="Layer_1">
+		<g>
+			<defs>
+				<rect id="SVGID_1_" x="0.1" width="131.2" height="34" />
+			</defs>
+			<clipPath id="SVGID_00000178174203794055954230000008347555292352038806_">
+				<use xlink:href="#SVGID_1_" style="overflow:visible;" />
+			</clipPath>
+			<g style="clip-path:url(#SVGID_00000178174203794055954230000008347555292352038806_);">
+				<path class="st1" d="M56.7,13.6h5.8c0.5,0,0.9-0.4,0.9-1c-0.1-0.4-0.4-0.8-0.9-0.8h-7.2c-0.5,0-0.9,0.4-0.9,0.9v8.6
 				c0,0.5,0.4,0.9,0.9,0.9h7.2c0.5,0,0.9-0.4,0.9-1c-0.1-0.4-0.4-0.8-0.9-0.8h-5.7c-0.3,0-0.6-0.3-0.6-0.6v-1.5
 				c0-0.3,0.3-0.6,0.6-0.6H61c0.5,0,0.9-0.4,0.9-1c-0.1-0.4-0.4-0.8-0.9-0.8h-4.3c-0.3,0-0.6-0.3-0.6-0.6v-1.5
 				C56.1,13.8,56.3,13.6,56.7,13.6z M46.7,13.6c1,0,1.8,0.3,2.4,1c0.2,0.2,0.4,0.2,0.6,0.2c0.5,0,0.9-0.4,0.9-0.9
@@ -76,8 +83,8 @@
 				C33.2,13.3,33.2,13.3,33.2,13.3z M126.9,18.3h-3.2c-0.3,0-0.5-0.3-0.3-0.6L125,15c0.1-0.3,0.5-0.3,0.7,0l1.6,2.7
 				C127.4,18,127.2,18.3,126.9,18.3z M131.1,20.9l-5-8.7c-0.4-0.6-1.1-0.6-1.5,0l-5,8.7c-0.1,0.1-0.1,0.2-0.1,0.3
 				c0,0.5,0.3,0.9,0.8,0.9c0.3,0,0.6-0.2,0.8-0.5l0.8-1.3c0.1-0.2,0.3-0.3,0.5-0.3h5.8c0.2,0,0.4,0.1,0.5,0.3l0.8,1.3
-				c0.2,0.3,0.5,0.5,0.8,0.5c0.5,0,0.9-0.4,0.9-0.9C131.2,21.2,131.1,21.1,131.1,20.9z"/>
+				c0.2,0.3,0.5,0.5,0.8,0.5c0.5,0,0.9-0.4,0.9-0.9C131.2,21.2,131.1,21.1,131.1,20.9z" />
+			</g>
 		</g>
 	</g>
-</g>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/src/app/layout.js b/src/app/layout.js
index 98cfb1426..faa5002fb 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -1,14 +1,14 @@
-import Nav from "@/components/Nav/Nav";
 import Footer from "@/components/Footer/Footer";
+import LoadingScreen from "@/components/Loading/LoadingScreen";
+import meta from "@/components/Meta/Meta";
+import Nav from "@/components/Nav/Nav";
+import { BannerProvider } from "@/context/BannerContext";
 import ScrollPositionProvider from "@/utils/scrollLock";
+import PlausibleProvider from "next-plausible";
+import { Suspense } from "react";
 import "./styles/fonts.css";
 import "./styles/globals.scss";
 import "./styles/text-link.scss";
-import { Suspense } from "react";
-import meta from "@/components/Meta/Meta";
-import LoadingScreen from "@/components/Loading/LoadingScreen";
-import { BannerProvider } from "@/context/BannerContext";
-import PlausibleProvider from "next-plausible";
 
 export const metadata = meta();
 
diff --git a/src/app/lazybridge/layout.js b/src/app/lazybridge/layout.js
new file mode 100644
index 000000000..e2e9c0917
--- /dev/null
+++ b/src/app/lazybridge/layout.js
@@ -0,0 +1,22 @@
+import LoadingScreen from "@/components/Loading/LoadingScreen";
+import Nav from "@/components/Nav/Nav";
+import { Suspense } from "react";
+
+export const metadata = {
+	title: "LazyBridge | Celestia",
+	description:
+		"LazyBridge: A unified blockchain solution enabling seamless cross-chain transactions, developer flexibility, and instant access to multi-chain assets and users.",
+};
+
+const LazyBridgeLayout = ({ children }) => {
+	return (
+		<>
+			<Nav dark={true} />
+			<main id={"main-content"}>
+				<Suspense fallback={<LoadingScreen />}>{children}</Suspense>
+			</main>
+		</>
+	);
+};
+
+export default LazyBridgeLayout;
diff --git a/src/app/lazybridge/page.js b/src/app/lazybridge/page.js
new file mode 100644
index 000000000..2546ef62d
--- /dev/null
+++ b/src/app/lazybridge/page.js
@@ -0,0 +1,48 @@
+import Container from "@/components/Container/Container";
+import PrimaryHeroDark from "@/components/Heroes/PrimaryHeroDark";
+import PrimaryButton from "@/macros/Buttons/PrimaryButton";
+import { Body, Display } from "@/macros/Copy";
+export default async function Home() {
+	return (
+		<>
+			<PrimaryHeroDark
+				headline={`Lazybridging testnet`}
+				subheadline={<>Hangout with the Celestia community IRL or online.</>}
+				buttons={[
+					{ text: "try 1-click interaction", url: "/build" },
+					{ text: "Build with lazybridging", url: "#explore-celestia" },
+				]}
+				backgroundImage='/images/app/lasybridge/celestia_lazybridging_bg.png'
+			/>
+
+			<section className='py-24 bg-black'>
+				<Container size={"lg"}>
+					<Display
+						size={"sm"}
+						className={`mb-8 max-w-[731px]`}
+						style={{
+							background: "linear-gradient(58.28deg, #FFFFFF -5.81%, #9747FF 109.36%)",
+							WebkitBackgroundClip: "text",
+							WebkitTextFillColor: "transparent",
+							backgroundClip: "text",
+							textFillColor: "transparent",
+						}}
+					>
+						Build whatever with instant access to users and assets
+					</Display>
+					<Body size={"lg"} className={`mb-8 text-white`}>
+						Today, buildings apps on rollups often means trading off access to users and liquidity on other chains due to fragmentation.
+					</Body>
+					<Body size={"md"} className={`mb-8 text-white`}>
+						Lazybridging aims to eliminate this tradeoff, enabling a unified onchain experience for end-users while giving developers the
+						best of all worlds: the freedom to build whatever and instant access to users and assets on all other major blockchains.
+					</Body>
+					<PrimaryButton href={"#"} className={"inline-block mr-3 mb-3 group"} noBorder={false}>
+						Continue
+					</PrimaryButton>
+				</Container>
+			</section>
+			<div className='block h-10 -mb-10 bg-black w-fill'></div>
+		</>
+	);
+}
diff --git a/src/app/page.js b/src/app/page.js
index 094e7641e..58cb98ade 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -1,12 +1,12 @@
-import PrimaryHero from "@/components/Heroes/PrimaryHero";
-import Blog from "@/components/Resources/Blog/Blog";
 import AlternatingMediaRows from "@/components/AlternatingMediaRows/AlternatingMediaRows";
-import { Link } from "@/micros/TertiaryPageMicors/TertiaryPageMicors";
-import HomepageScrollText from "@/components/ScrollText/views/HomepageScrollText";
-import ExploreCardsContainer from "@/components/Cards/ExploreCards/ExploreCardsContainer";
 import ExploreCard from "@/components/Cards/ExploreCards/ExploreCard";
+import ExploreCardsContainer from "@/components/Cards/ExploreCards/ExploreCardsContainer";
 import EcosytemExplorer from "@/components/Ecosystem/EcosytemExplorer/EcosytemExplorer";
+import PrimaryHero from "@/components/Heroes/PrimaryHero";
+import Blog from "@/components/Resources/Blog/Blog";
+import HomepageScrollText from "@/components/ScrollText/views/HomepageScrollText";
 import { ANALYTICS_EVENTS } from "@/constants/analytics";
+import { Link } from "@/micros/TertiaryPageMicors/TertiaryPageMicors";
 
 export default async function Home() {
 	const posts = await getPosts();
diff --git a/src/app/styles/globals.scss b/src/app/styles/globals.scss
index 1c4ea9777..7b087e020 100644
--- a/src/app/styles/globals.scss
+++ b/src/app/styles/globals.scss
@@ -7,10 +7,20 @@
 	-moz-osx-font-smoothing: grayscale;
 }
 
+:root {
+	--scrollbar-width: calc(100vw - 100%);
+}
+html {
+	margin-right: calc(-1 * var(--scrollbar-width));
+	width: 100%;
+	height: -webkit-fill-available;
+	overflow-x: hidden;
+	overflow-y: scroll;
+}
+
 html,
 body {
 	width: 100vw;
-	overflow-x: hidden;
 	scroll-behavior: smooth;
 }
 
@@ -18,3 +28,38 @@ body {
 	font-family: "UntitledSans", sans-serif;
 	font-weight: 400;
 }
+
+/* Banner-adjusted components */
+.banner-adjusted {
+	transition: min-height var(--transition-duration, 0.3s) ease-out, padding var(--transition-duration, 0.3s) ease-out,
+		margin var(--transition-duration, 0.3s) ease-out;
+	will-change: min-height, padding, margin;
+}
+
+/* Ensure smooth header transitions */
+header {
+	will-change: transform;
+}
+
+/* Smooth banner animations */
+.banner-animation-enter {
+	opacity: 0;
+	transform: translateY(-100%);
+}
+
+.banner-animation-enter-active {
+	opacity: 1;
+	transform: translateY(0);
+	transition: opacity 300ms, transform 300ms;
+}
+
+.banner-animation-exit {
+	opacity: 1;
+	transform: translateY(0);
+}
+
+.banner-animation-exit-active {
+	opacity: 0;
+	transform: translateY(-100%);
+	transition: opacity 300ms, transform 300ms;
+}
diff --git a/src/app/what-is-celestia/page.js b/src/app/what-is-celestia/page.js
index b4acf32e1..11bb78fb5 100644
--- a/src/app/what-is-celestia/page.js
+++ b/src/app/what-is-celestia/page.js
@@ -1,22 +1,22 @@
+import VerticalTitleCard from "@/components/Cards/VerticalTitleCards/VerticalTitleCard";
 import SecondaryHero from "@/components/Heroes/SecondaryHero";
-import WhatIsCelestiaScrollText from "@/components/ScrollText/views/WhatIsCelestiaScrollText";
 import Introduction from "@/components/Introduction/Introduction";
-import { Heading, Display, Body } from "@/macros/Copy";
-import SecondaryButton from "@/macros/Buttons/SecondaryButton";
 import ListSection from "@/components/List/Layout/ListSection";
 import ListItem from "@/components/List/ListItem";
-import Icon from "@/macros/Icons/Icon";
-import ArrowLongSVG from "@/macros/SVGs/ArrowLongSVG";
 import ScrollNavigation from "@/components/ScrollNavigation/ScrollNavigation";
 import ScrollSection from "@/components/ScrollNavigation/ScrollSection";
+import WhatIsCelestiaScrollText from "@/components/ScrollText/views/WhatIsCelestiaScrollText";
+import SecondaryButton from "@/macros/Buttons/SecondaryButton";
+import { Body, Display, Heading } from "@/macros/Copy";
+import { Col, Row } from "@/macros/Grids";
+import Icon from "@/macros/Icons/Icon";
+import ArrowLongSVG from "@/macros/SVGs/ArrowLongSVG";
 import HeadingWithSuperscript from "@/micros/HeadingWithSuperscript/HeadingWithSuperscript";
-import { Row, Col } from "@/macros/Grids";
 import Image from "next/image";
-import VerticalTitleCard from "@/components/Cards/VerticalTitleCards/VerticalTitleCard";
 
+import Container from "@/components/Container/Container";
 import meta from "@/components/Meta/Meta";
 import seo from "@/data/what-is-celestia/seo";
-import Container from "@/components/Container/Container";
 
 export const metadata = meta(seo);
 
diff --git a/src/components/AlternatingMediaRows/MediaRow.js b/src/components/AlternatingMediaRows/MediaRow.js
index 7b29e7a9b..029983df5 100644
--- a/src/components/AlternatingMediaRows/MediaRow.js
+++ b/src/components/AlternatingMediaRows/MediaRow.js
@@ -1,9 +1,10 @@
 "use client";
-import { Body, Heading } from "@/macros/Copy";
+import VideoPlayer from "@/components/VideoPlayer/VideoPlayer";
 import PrimaryButton from "@/macros/Buttons/PrimaryButton";
 import SecondaryButton from "@/macros/Buttons/SecondaryButton";
-import VideoPlayer from "@/components/VideoPlayer/VideoPlayer";
+import { Body, Heading } from "@/macros/Copy";
 import { usePlausible } from "next-plausible";
+import React from "react";
 
 const MediaRow = ({ title, body, buttons, videoSrc, className, index, totalRows }) => {
 	const videoRight = index % 2 === 0 ? true : false;
@@ -51,10 +52,9 @@ const MediaRow = ({ title, body, buttons, videoSrc, className, index, totalRows
 				</div>
 				{buttons.map((button, index) => {
 					return (
-						<>
+						<React.Fragment key={`button-${index}`}>
 							{button.type === "primary" ? (
 								<PrimaryButton
-									key={index}
 									href={button.url}
 									className={"inline-block mr-3 mb-3 group"}
 									lightMode
@@ -65,7 +65,6 @@ const MediaRow = ({ title, body, buttons, videoSrc, className, index, totalRows
 								</PrimaryButton>
 							) : (
 								<SecondaryButton
-									key={index}
 									href={button.url}
 									className={"inline-block mr-3 mb-3 group"}
 									lightMode={false}
@@ -75,7 +74,7 @@ const MediaRow = ({ title, body, buttons, videoSrc, className, index, totalRows
 									{button.text}
 								</SecondaryButton>
 							)}
-						</>
+						</React.Fragment>
 					);
 				})}
 			</div>
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
index bf22de577..eefb70742 100644
--- a/src/components/Footer/Footer.js
+++ b/src/components/Footer/Footer.js
@@ -1,20 +1,20 @@
 "use client";
-import "./Footer.scss";
-import { Body, Heading } from "@/macros/Copy";
-import footerData from "@/data/global/footer";
 import Container from "@/components/Container/Container";
+import Newsletter from "@/components/Newsletter/Newsletter";
 import VideoPlayer from "@/components/VideoPlayer/VideoPlayer";
-import Link from "@/macros/Link/Link";
+import footerData from "@/data/global/footer";
+import { Body, Heading } from "@/macros/Copy";
 import Icon from "@/macros/Icons/Icon";
+import Link from "@/macros/Link/Link";
 import ArrowLongSVG from "@/macros/SVGs/ArrowLongSVG";
 import { isInternalLink } from "@/utils/isInternalLink";
-import Newsletter from "@/components/Newsletter/Newsletter";
+import "./Footer.scss";
 
 const Footer = () => {
 	const columns = footerData();
 	const copywriteYear = new Date().getFullYear();
 	return (
-		<footer id={"footer"} className={`bg-black w-full rounded-tl-3xl rounded-tr-3xl py-5 text-white z-30 relative`}>
+		<footer id={"footer"} className={`bg-black w-full rounded-tl-3xl rounded-tr-3xl py-5 text-white z-30 relative mt-4`}>
 			<div className={`px-4`}>
 				<div className={`h-[225px] md:h-[400px] block w-full rounded-2xl bg-white overflow-hidden z-0 relative`}>
 					<VideoPlayer src={"/videos/footer.mp4"} />
diff --git a/src/components/Heroes/PrimaryHero.js b/src/components/Heroes/PrimaryHero.js
index 22972136b..431f2b283 100644
--- a/src/components/Heroes/PrimaryHero.js
+++ b/src/components/Heroes/PrimaryHero.js
@@ -1,10 +1,10 @@
 "use client";
-import { useEffect, useRef } from "react";
 import Container from "@/components/Container/Container";
+import { useBanner } from "@/context/BannerContext";
 import BorderButton from "@/macros/Buttons/BorderButton";
-import { Display, Body } from "@/macros/Copy";
+import { Body, Display } from "@/macros/Copy";
 import { usePlausible } from "next-plausible";
-import { useBanner } from "@/context/BannerContext";
+import { useEffect, useRef } from "react";
 
 const PrimaryHero = ({ headline, subheadline, buttons, videos }) => {
 	const videoRef = useRef(null);
diff --git a/src/components/Heroes/PrimaryHeroDark.js b/src/components/Heroes/PrimaryHeroDark.js
new file mode 100644
index 000000000..6a72c8c4e
--- /dev/null
+++ b/src/components/Heroes/PrimaryHeroDark.js
@@ -0,0 +1,71 @@
+"use client";
+import Container from "@/components/Container/Container";
+import { useBanner } from "@/context/BannerContext";
+import BorderButton from "@/macros/Buttons/BorderButton";
+import { Body, Display } from "@/macros/Copy";
+import { usePlausible } from "next-plausible";
+import Image from "next/image";
+
+const PrimaryHeroDark = ({ headline, subheadline, buttons, backgroundImage }) => {
+	const trackEvent = usePlausible();
+	const { isBannerVisible, bannerHeight } = useBanner();
+
+	const handleButtonClick = (buttonText, url, trackEventName) => {
+		if (!trackEventName) return;
+
+		trackEvent(trackEventName, {
+			props: {
+				button: buttonText,
+				url: url,
+				location: "hero_section",
+				path: window.location.pathname,
+			},
+		});
+	};
+
+	return (
+		<section
+			style={
+				isBannerVisible
+					? {
+							"--md-min-h": `calc(70vh + ${bannerHeight}px)`,
+							"--lg-min-h": `calc(90vh + ${bannerHeight}px)`,
+					  }
+					: undefined
+			}
+			className={`bg-[#17141A] relative flex flex-col-reverse md:block content-center
+				${isBannerVisible ? "md:[min-height:var(--md-min-h)] lg:[min-height:var(--lg-min-h)]" : "md:min-h-[70vh] lg:min-h-[90vh]"}`}
+		>
+			<div className='z-10 block md:absolute md:top-0 md:left-0 md:h-full md:w-full md:z-0'>
+				<Image src={backgroundImage} alt='Background' fill className='object-cover' priority />
+			</div>
+			<Container
+				size={`lg`}
+				className={`relative z-10 ${isBannerVisible ? "pt-64 lg:pt-24 pb-[480px] lg:pb-[450px]" : "pt-36 lg:pt-10 pb-96 lg:pb-[450px]"}`}
+			>
+				<div className={`w-full md:w-3/4 lg:w-full lg:pt-32 lg:my-auto`}>
+					<Display size={"lg"} className={`mb-4 text-white max-w-[514px] max-sm:text-5xl`}>
+						{headline}
+					</Display>
+					<Body size={"lg"} className={`mb-8 text-white`}>
+						{subheadline}
+					</Body>
+					<div className='w-10/12 gap-4 md:w-full md:flex md:flex-wrap lg:gap-10'>
+						{buttons.map((button, index) => (
+							<BorderButton
+								key={index}
+								onClick={() => handleButtonClick(button.text, button.url, button.trackEvent)}
+								href={button.url}
+								className='text-white border-white md:inline-flex [&_path]:fill-white'
+							>
+								{button.text}
+							</BorderButton>
+						))}
+					</div>
+				</div>
+			</Container>
+		</section>
+	);
+};
+
+export default PrimaryHeroDark;
diff --git a/src/components/Nav/DesktopNav.js b/src/components/Nav/DesktopNav.js
index 2439d3e64..a6188401c 100644
--- a/src/components/Nav/DesktopNav.js
+++ b/src/components/Nav/DesktopNav.js
@@ -1,13 +1,13 @@
-import { useState, useEffect, useRef } from "react";
-import MenuData from "./data";
 import PrimaryButton from "@/macros/Buttons/PrimaryButton";
-import Icon from "@/macros/Icons/Icon";
-import DropdownArrow from "@/macros/SVGs/DropdownArrow";
 import { Body } from "@/macros/Copy";
+import Icon from "@/macros/Icons/Icon";
 import Link from "@/macros/Link/Link";
-import { motion, AnimatePresence } from "framer-motion";
+import DropdownArrow from "@/macros/SVGs/DropdownArrow";
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
+import MenuData from "./data";
 
-const DesktopNav = () => {
+const DesktopNav = ({ lightMode = false }) => {
 	const [activeDropdown, setActiveDropdown] = useState(null);
 	const [scrollPosition, setScrollPosition] = useState(0);
 	const navRef = useRef(null);
@@ -53,7 +53,10 @@ const DesktopNav = () => {
 						{menu.type === "dropdown" ? (
 							<PrimaryButton
 								size='md'
-								className={`bg-transparent !text-black ${activeDropdown === index ? "!bg-white-pure" : ""}`}
+								lightMode={lightMode}
+								className={`bg-transparent ${lightMode ? "" : "[&_path]:fill-white"}  ${
+									activeDropdown === index ? "!bg-white-pure" : ""
+								}`}
 								noBorder
 								isActive={activeDropdown === index}
 								aria-expanded={activeDropdown === index}
@@ -65,7 +68,7 @@ const DesktopNav = () => {
 									<Icon
 										Icon={<DropdownArrow />}
 										hover
-										HoverIcon={<DropdownArrow dark />}
+										HoverIcon={<DropdownArrow dark={!lightMode} />}
 										className={`flex-grow-0 flex-shrink-0`}
 										direction='up'
 										border={false}
diff --git a/src/components/Nav/Nav.js b/src/components/Nav/Nav.js
index 2f495900b..35b9d4399 100644
--- a/src/components/Nav/Nav.js
+++ b/src/components/Nav/Nav.js
@@ -1,35 +1,37 @@
 "use client";
-import React, { useState, useEffect } from "react";
-import { motion, useAnimation, AnimatePresence } from "framer-motion";
-import JumpNav from "./JumpNav";
-import MenuData from "./data";
+import Banner from "@/components/Banner/Banner";
+import Container from "@/components/Container/Container";
 import PrimaryButton from "@/macros/Buttons/PrimaryButton";
+import Icon from "@/macros/Icons/Icon";
 import Link from "@/macros/Link/Link";
+import ArrowLongSVG from "@/macros/SVGs/ArrowLongSVG";
 import { useScrollPosition } from "@/utils/scrollLock";
+import { AnimatePresence, motion, useAnimation } from "framer-motion";
+import Image from "next/image";
+import { useEffect, useState } from "react";
 import DesktopNav from "./DesktopNav";
+import JumpNav from "./JumpNav";
 import MobileNavDropdown from "./MobileNavDropdown";
-import Container from "@/components/Container/Container";
-import Icon from "@/macros/Icons/Icon";
-import ArrowLongSVG from "@/macros/SVGs/ArrowLongSVG";
-import Image from "next/image";
-import Banner from "@/components/Banner/Banner";
+import MenuData from "./data";
 
-const Nav = () => {
+const Nav = ({ dark = false }) => {
 	const [hasScrolled, setHasScrolled] = useState(false);
 	const controls = useAnimation();
-	const { setScrollIsLocked, menuIsOpen, setMenuIsOpen, navHeights, primaryNavRef } = useScrollPosition();
+	const { setScrollIsLocked, menuIsOpen, setMenuIsOpen, primaryNavRef } = useScrollPosition();
 
 	useEffect(() => {
+		const SCROLL_THRESHOLD = 100; // pixels
+
 		const handleScroll = () => {
-			if (window.scrollY > 0) {
+			if (window.scrollY > SCROLL_THRESHOLD) {
 				if (!hasScrolled) {
 					setHasScrolled(true);
-					controls.start({ backgroundColor: "#F6F6F6" });
+					controls.start({ backgroundColor: dark ? "#17141A" : "#F6F6F6" });
 				}
 			} else {
 				if (hasScrolled) {
 					setHasScrolled(false);
-					controls.start({ backgroundColor: "rgba(255,255,255,0)" });
+					controls.start({ backgroundColor: dark ? "#17141A" : "rgba(255, 255, 255, 0)" });
 				}
 			}
 		};
@@ -40,7 +42,7 @@ const Nav = () => {
 		return () => {
 			window.removeEventListener("scroll", handleScroll);
 		};
-	}, [hasScrolled, setHasScrolled, controls]);
+	}, [hasScrolled, setHasScrolled, controls, dark]);
 
 	useEffect(() => {
 		setScrollIsLocked(menuIsOpen);
@@ -48,13 +50,14 @@ const Nav = () => {
 
 	return (
 		<>
-			<JumpNav />
+			<JumpNav dark={dark} />
 			<motion.header
-				initial={{ backgroundColor: "rgba(255,255,255,0)" }}
+				initial={{ backgroundColor: dark ? "#17141A" : "rgba(255, 255, 255, 0)" }}
 				animate={controls}
-				className={`fixed top-0 left-0 w-full z-50`}
+				className={`fixed top-0 left-0 w-full z-50 ${dark ? "text-white" : ""}`}
 				ref={primaryNavRef}
 			>
+				{/* Toggle the banner visibility in BannerContext.js */}
 				<Banner />
 				<Container size={"lg"} padding={false}>
 					<div
@@ -62,9 +65,9 @@ const Nav = () => {
 							menuIsOpen ? "invert" : ""
 						} transition-all duration-300`}
 					>
-						<Link href={`/`}>
+						<Link href='/'>
 							<Image
-								src={`/images/celestia-logo.svg`}
+								src={dark ? `/images/celestia-logo-invert.svg` : `/images/celestia-logo.svg`}
 								alt={`Celestia logo | Home`}
 								width={128}
 								height={32}
@@ -72,7 +75,7 @@ const Nav = () => {
 								priority
 							/>
 						</Link>
-						<PrimaryButton onClick={() => setMenuIsOpen(!menuIsOpen)} lightMode className={"md:hidden"}>
+						<PrimaryButton onClick={() => setMenuIsOpen(!menuIsOpen)} lightMode={!dark} dark={dark} className={"md:hidden"}>
 							{menuIsOpen ? (
 								<>
 									Close <span className={`sr-only`}>the main</span>
@@ -83,7 +86,7 @@ const Nav = () => {
 								</>
 							)}
 						</PrimaryButton>
-						<DesktopNav />
+						<DesktopNav lightMode={!dark} />
 					</div>
 				</Container>
 			</motion.header>
@@ -117,7 +120,7 @@ const Nav = () => {
 					>
 						<Container size={"xl"} className={`block md:flex md:gap-10 h-full`}>
 							<div
-								className={`w-full sm:w-3/5 md:w-1/2 lg:w-1/3 h-full overflow-y-scroll overflow-x-visible no-scrollbar px-4 md:px-10`}
+								className={`w-full sm:w-3/5 md:w-1/2 lg:w-1/3 h-full overflow-y-scroll overflow-x-visible no-scrollbar py-10 px-4 md:px-10`}
 							>
 								{MenuData.map((item, index) => {
 									return (
diff --git a/src/context/BannerContext.js b/src/context/BannerContext.js
index ed81c90b2..dcde5536a 100644
--- a/src/context/BannerContext.js
+++ b/src/context/BannerContext.js
@@ -1,11 +1,14 @@
 "use client";
 
-import { createContext, useContext, useState, useEffect, useRef } from "react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
 
 const BannerContext = createContext();
 
 export function BannerProvider({ children }) {
-	const [isBannerVisible, setIsBannerVisible] = useState(true);
+	// Toggle this to show/hide the banner
+	const SHOW_BANNER = false;
+
+	const [isBannerVisible, setIsBannerVisible] = useState(SHOW_BANNER);
 	const [bannerHeight, setBannerHeight] = useState(0);
 	const bannerRef = useRef(null);
 
diff --git a/src/macros/Buttons/PrimaryButton.js b/src/macros/Buttons/PrimaryButton.js
index 5361eae9e..061262da9 100644
--- a/src/macros/Buttons/PrimaryButton.js
+++ b/src/macros/Buttons/PrimaryButton.js
@@ -11,7 +11,6 @@ const PrimaryButton = ({
 	noBorder = false,
 	hover = true,
 	size = "md",
-	isActive = false,
 }) => {
 	const baseClasses = `leading-none text-center uppercase rounded-full block no-underline transform transition-all duration-150`;
 	const lightModeClasses = `text-black border-black ${hover ? "hover:text-white transition-all duration-300" : null}`;
diff --git a/src/macros/Copy/Display.js b/src/macros/Copy/Display.js
index 8b9830c62..369b34f1d 100644
--- a/src/macros/Copy/Display.js
+++ b/src/macros/Copy/Display.js
@@ -1,18 +1,18 @@
-const Display = ({ children, className, tag = "h1", size = "lg" }) => {
-  const Tag = tag;
-  const sizeClasses = {
-    xs: "text-sm leading-[1.714]",
-    sm: "text-[2.3125rem] leading-[1.2] lg:text-6xl leading-[1.066666666666667]",
-    md: "text-[3.125rem] leading-[1.1] tracking-normal lg:text-7xl lg:leading-[1.1111]",
-    lg: "text-[4rem] leading-[1] tracking-normal lg:text-[5.125rem] lg:leading-[1]",
-    xl: "text-[5.125rem] leading-[1.073171] tracking-normal lg:text-5.5rem] lg:leading-[1.0909091]",
-  };
+const Display = ({ children, style, className, tag = "h1", size = "lg" }) => {
+	const Tag = tag;
+	const sizeClasses = {
+		xs: "text-sm leading-[1.714]",
+		sm: "text-[2.3125rem] lg:text-6xl leading-[1.066666666666667]",
+		md: "text-[3.125rem] leading-[1.1] tracking-normal lg:text-7xl lg:leading-[1.1111]",
+		lg: "text-[4rem] leading-[1] tracking-normal lg:text-[5.125rem] lg:leading-[1]",
+		xl: "text-[5.125rem] leading-[1.073171] tracking-normal lg:text-5.5rem] lg:leading-[1.0909091]",
+	};
 
-  return (
-    <Tag className={`text-pretty font-youth ${sizeClasses[size]} ${className}`}>
-      {children}
-    </Tag>
-  );
+	return (
+		<Tag style={style} className={`text-pretty font-youth ${sizeClasses[size]} ${className}`}>
+			{children}
+		</Tag>
+	);
 };
 
 export default Display;
diff --git a/src/macros/SVGs/DropdownArrow.js b/src/macros/SVGs/DropdownArrow.js
index b0139c0e3..eff2c4551 100644
--- a/src/macros/SVGs/DropdownArrow.js
+++ b/src/macros/SVGs/DropdownArrow.js
@@ -1,28 +1,20 @@
 import useThemeColors from "@/utils/useThemeColors";
 
 const DropdownArrow = ({ dark = false, className = "" }) => {
-  const colors = useThemeColors();
-  const fill = dark ? colors.white.DEFAULT : colors.black.DEFAULT;
+	const colors = useThemeColors();
+	const fill = dark ? colors.white.DEFAULT : colors.black.DEFAULT;
 
-  return (
-    <svg
-      width="17"
-      height="16"
-      viewBox="0 0 17 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5.9776 5.99969L8.56427 8.58635L11.1509 5.99969C11.4109 5.73969 11.8309 5.73969 12.0909 5.99969C12.3509 6.25969 12.3509 6.67969 12.0909 6.93969L9.03094 9.99969C8.77094 10.2597 8.35094 10.2597 8.09094 9.99969L5.03094 6.93969C4.77094 6.67969 4.77094 6.25969 5.03094 5.99969C5.29094 5.74635 5.7176 5.73969 5.9776 5.99969Z"
-        fill={fill}
-        className={`group-hover:fill-[${
-          dark ? colors.black.DEFAULT : colors.white.DEFAULT
-        }] transition duration-300 ${className}`}
-      />
-    </svg>
-  );
+	return (
+		<svg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+			<path
+				fillRule='evenodd'
+				clipRule='evenodd'
+				d='M5.9776 5.99969L8.56427 8.58635L11.1509 5.99969C11.4109 5.73969 11.8309 5.73969 12.0909 5.99969C12.3509 6.25969 12.3509 6.67969 12.0909 6.93969L9.03094 9.99969C8.77094 10.2597 8.35094 10.2597 8.09094 9.99969L5.03094 6.93969C4.77094 6.67969 4.77094 6.25969 5.03094 5.99969C5.29094 5.74635 5.7176 5.73969 5.9776 5.99969Z'
+				fill={fill}
+				className={`group-hover:fill-[${dark ? colors.black.DEFAULT : colors.white.DEFAULT}] transition duration-300 ${className}`}
+			/>
+		</svg>
+	);
 };
 
 export default DropdownArrow;
diff --git a/src/utils/scrollLock.js b/src/utils/scrollLock.js
index 562424d7c..6c796e210 100644
--- a/src/utils/scrollLock.js
+++ b/src/utils/scrollLock.js
@@ -1,6 +1,6 @@
 "use client";
-import { useEffect, useContext, createContext, useState, useRef } from "react";
 import { usePathname } from "next/navigation";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
 
 // Providing a default value matching the context type
 const ScrollPositionContext = createContext(undefined);