diff --git a/app/(layout)/[...not-found]/page.tsx b/app/(layout)/layout/[...not-found]/page.tsx
similarity index 100%
rename from app/(layout)/[...not-found]/page.tsx
rename to app/(layout)/layout/[...not-found]/page.tsx
diff --git a/app/(layout)/blockspace/category-comparison/layout.tsx b/app/(layout)/layout/blockspace/category-comparison/layout.tsx
similarity index 100%
rename from app/(layout)/blockspace/category-comparison/layout.tsx
rename to app/(layout)/layout/blockspace/category-comparison/layout.tsx
diff --git a/app/(layout)/blockspace/category-comparison/page.tsx b/app/(layout)/layout/blockspace/category-comparison/page.tsx
similarity index 100%
rename from app/(layout)/blockspace/category-comparison/page.tsx
rename to app/(layout)/layout/blockspace/category-comparison/page.tsx
diff --git a/app/(layout)/blockspace/chain-overview/[category]/layout.tsx b/app/(layout)/layout/blockspace/chain-overview/[category]/layout.tsx
similarity index 100%
rename from app/(layout)/blockspace/chain-overview/[category]/layout.tsx
rename to app/(layout)/layout/blockspace/chain-overview/[category]/layout.tsx
diff --git a/app/(layout)/blockspace/chain-overview/[category]/page.tsx b/app/(layout)/layout/blockspace/chain-overview/[category]/page.tsx
similarity index 100%
rename from app/(layout)/blockspace/chain-overview/[category]/page.tsx
rename to app/(layout)/layout/blockspace/chain-overview/[category]/page.tsx
diff --git a/app/(layout)/blockspace/chain-overview/layout.tsx b/app/(layout)/layout/blockspace/chain-overview/layout.tsx
similarity index 100%
rename from app/(layout)/blockspace/chain-overview/layout.tsx
rename to app/(layout)/layout/blockspace/chain-overview/layout.tsx
diff --git a/app/(layout)/blockspace/chain-overview/page.tsx b/app/(layout)/layout/blockspace/chain-overview/page.tsx
similarity index 100%
rename from app/(layout)/blockspace/chain-overview/page.tsx
rename to app/(layout)/layout/blockspace/chain-overview/page.tsx
diff --git a/app/(layout)/blockspace/treemap/page.tsx b/app/(layout)/layout/blockspace/treemap/page.tsx
similarity index 100%
rename from app/(layout)/blockspace/treemap/page.tsx
rename to app/(layout)/layout/blockspace/treemap/page.tsx
diff --git a/app/(layout)/blog/[originalContentDigest]/[imageURI]/page.tsx b/app/(layout)/layout/blog/[originalContentDigest]/[imageURI]/page.tsx
similarity index 100%
rename from app/(layout)/blog/[originalContentDigest]/[imageURI]/page.tsx
rename to app/(layout)/layout/blog/[originalContentDigest]/[imageURI]/page.tsx
diff --git a/app/(layout)/blog/page.tsx b/app/(layout)/layout/blog/page.tsx
similarity index 100%
rename from app/(layout)/blog/page.tsx
rename to app/(layout)/layout/blog/page.tsx
diff --git a/app/(layout)/chains/[chain]/layout.tsx b/app/(layout)/layout/chains/[chain]/layout.tsx
similarity index 100%
rename from app/(layout)/chains/[chain]/layout.tsx
rename to app/(layout)/layout/chains/[chain]/layout.tsx
diff --git a/app/(layout)/chains/[chain]/page.tsx b/app/(layout)/layout/chains/[chain]/page.tsx
similarity index 100%
rename from app/(layout)/chains/[chain]/page.tsx
rename to app/(layout)/layout/chains/[chain]/page.tsx
diff --git a/app/(layout)/contracts/[address]/page.tsx b/app/(layout)/layout/contracts/[address]/page.tsx
similarity index 100%
rename from app/(layout)/contracts/[address]/page.tsx
rename to app/(layout)/layout/contracts/[address]/page.tsx
diff --git a/app/(layout)/contracts/address-search.tsx b/app/(layout)/layout/contracts/address-search.tsx
similarity index 100%
rename from app/(layout)/contracts/address-search.tsx
rename to app/(layout)/layout/contracts/address-search.tsx
diff --git a/app/(layout)/contracts/layout.tsx b/app/(layout)/layout/contracts/layout.tsx
similarity index 100%
rename from app/(layout)/contracts/layout.tsx
rename to app/(layout)/layout/contracts/layout.tsx
diff --git a/app/(layout)/contracts/page.tsx b/app/(layout)/layout/contracts/page.tsx
similarity index 100%
rename from app/(layout)/contracts/page.tsx
rename to app/(layout)/layout/contracts/page.tsx
diff --git a/app/(layout)/contributors/layout.tsx b/app/(layout)/layout/contributors/layout.tsx
similarity index 100%
rename from app/(layout)/contributors/layout.tsx
rename to app/(layout)/layout/contributors/layout.tsx
diff --git a/app/(layout)/contributors/page.tsx b/app/(layout)/layout/contributors/page.tsx
similarity index 100%
rename from app/(layout)/contributors/page.tsx
rename to app/(layout)/layout/contributors/page.tsx
diff --git a/app/(layout)/error.tsx b/app/(layout)/layout/error.tsx
similarity index 100%
rename from app/(layout)/error.tsx
rename to app/(layout)/layout/error.tsx
diff --git a/app/(layout)/fees-explainer/page.tsx b/app/(layout)/layout/fees-explainer/page.tsx
similarity index 100%
rename from app/(layout)/fees-explainer/page.tsx
rename to app/(layout)/layout/fees-explainer/page.tsx
diff --git a/app/(layout)/fundamentals/[metric]/layout.tsx b/app/(layout)/layout/fundamentals/[metric]/layout.tsx
similarity index 100%
rename from app/(layout)/fundamentals/[metric]/layout.tsx
rename to app/(layout)/layout/fundamentals/[metric]/layout.tsx
diff --git a/app/(layout)/fundamentals/[metric]/loading_2.tsx b/app/(layout)/layout/fundamentals/[metric]/loading_2.tsx
similarity index 100%
rename from app/(layout)/fundamentals/[metric]/loading_2.tsx
rename to app/(layout)/layout/fundamentals/[metric]/loading_2.tsx
diff --git a/app/(layout)/fundamentals/[metric]/page.tsx b/app/(layout)/layout/fundamentals/[metric]/page.tsx
similarity index 100%
rename from app/(layout)/fundamentals/[metric]/page.tsx
rename to app/(layout)/layout/fundamentals/[metric]/page.tsx
diff --git a/app/(layout)/head.tsx b/app/(layout)/layout/head.tsx
similarity index 100%
rename from app/(layout)/head.tsx
rename to app/(layout)/layout/head.tsx
diff --git a/app/(layout)/imprint/layout.tsx b/app/(layout)/layout/imprint/layout.tsx
similarity index 100%
rename from app/(layout)/imprint/layout.tsx
rename to app/(layout)/layout/imprint/layout.tsx
diff --git a/app/(layout)/imprint/page.tsx b/app/(layout)/layout/imprint/page.tsx
similarity index 100%
rename from app/(layout)/imprint/page.tsx
rename to app/(layout)/layout/imprint/page.tsx
diff --git a/app/(layout)/layout.tsx b/app/(layout)/layout/layout.tsx
similarity index 100%
rename from app/(layout)/layout.tsx
rename to app/(layout)/layout/layout.tsx
diff --git a/app/(layout)/loading_2.tsx b/app/(layout)/layout/loading_2.tsx
similarity index 100%
rename from app/(layout)/loading_2.tsx
rename to app/(layout)/layout/loading_2.tsx
diff --git a/app/(layout)/not-found.tsx b/app/(layout)/layout/not-found.tsx
similarity index 100%
rename from app/(layout)/not-found.tsx
rename to app/(layout)/layout/not-found.tsx
diff --git a/app/(layout)/page.tsx b/app/(layout)/layout/page.tsx
similarity index 100%
rename from app/(layout)/page.tsx
rename to app/(layout)/layout/page.tsx
diff --git a/app/(layout)/privacy-policy/layout.tsx b/app/(layout)/layout/privacy-policy/layout.tsx
similarity index 100%
rename from app/(layout)/privacy-policy/layout.tsx
rename to app/(layout)/layout/privacy-policy/layout.tsx
diff --git a/app/(layout)/privacy-policy/page.tsx b/app/(layout)/layout/privacy-policy/page.tsx
similarity index 100%
rename from app/(layout)/privacy-policy/page.tsx
rename to app/(layout)/layout/privacy-policy/page.tsx
diff --git a/app/(layout)/server-sitemap.xml/route.ts b/app/(layout)/layout/server-sitemap.xml/route.ts
similarity index 100%
rename from app/(layout)/server-sitemap.xml/route.ts
rename to app/(layout)/layout/server-sitemap.xml/route.ts
diff --git a/app/(layout)/trackers/eip4844/page.tsx b/app/(layout)/layout/trackers/eip4844/page.tsx
similarity index 100%
rename from app/(layout)/trackers/eip4844/page.tsx
rename to app/(layout)/layout/trackers/eip4844/page.tsx
diff --git a/app/(layout)/trackers/octant/OctantLinks.tsx b/app/(layout)/layout/trackers/octant/OctantLinks.tsx
similarity index 100%
rename from app/(layout)/trackers/octant/OctantLinks.tsx
rename to app/(layout)/layout/trackers/octant/OctantLinks.tsx
diff --git a/app/(layout)/trackers/octant/OctantSubheader.tsx b/app/(layout)/layout/trackers/octant/OctantSubheader.tsx
similarity index 100%
rename from app/(layout)/trackers/octant/OctantSubheader.tsx
rename to app/(layout)/layout/trackers/octant/OctantSubheader.tsx
diff --git a/app/(layout)/trackers/octant/OctantTable.tsx b/app/(layout)/layout/trackers/octant/OctantTable.tsx
similarity index 100%
rename from app/(layout)/trackers/octant/OctantTable.tsx
rename to app/(layout)/layout/trackers/octant/OctantTable.tsx
diff --git a/app/(layout)/trackers/octant/layout.tsx b/app/(layout)/layout/trackers/octant/layout.tsx
similarity index 100%
rename from app/(layout)/trackers/octant/layout.tsx
rename to app/(layout)/layout/trackers/octant/layout.tsx
diff --git a/app/(layout)/trackers/octant/page.tsx b/app/(layout)/layout/trackers/octant/page.tsx
similarity index 100%
rename from app/(layout)/trackers/octant/page.tsx
rename to app/(layout)/layout/trackers/octant/page.tsx
diff --git a/app/(layout)/trackers/optimism-retropgf-3/layout.tsx b/app/(layout)/layout/trackers/optimism-retropgf-3/layout.tsx
similarity index 100%
rename from app/(layout)/trackers/optimism-retropgf-3/layout.tsx
rename to app/(layout)/layout/trackers/optimism-retropgf-3/layout.tsx
diff --git a/app/(layout)/trackers/optimism-retropgf-3/osoApplicantData.ts b/app/(layout)/layout/trackers/optimism-retropgf-3/osoApplicantData.ts
similarity index 100%
rename from app/(layout)/trackers/optimism-retropgf-3/osoApplicantData.ts
rename to app/(layout)/layout/trackers/optimism-retropgf-3/osoApplicantData.ts
diff --git a/app/(layout)/trackers/optimism-retropgf-3/osoProjectStats.ts b/app/(layout)/layout/trackers/optimism-retropgf-3/osoProjectStats.ts
similarity index 100%
rename from app/(layout)/trackers/optimism-retropgf-3/osoProjectStats.ts
rename to app/(layout)/layout/trackers/optimism-retropgf-3/osoProjectStats.ts
diff --git a/app/(layout)/trackers/optimism-retropgf-3/osoTaggedProjects.ts b/app/(layout)/layout/trackers/optimism-retropgf-3/osoTaggedProjects.ts
similarity index 100%
rename from app/(layout)/trackers/optimism-retropgf-3/osoTaggedProjects.ts
rename to app/(layout)/layout/trackers/optimism-retropgf-3/osoTaggedProjects.ts
diff --git a/app/(layout)/trackers/optimism-retropgf-3/page.tsx b/app/(layout)/layout/trackers/optimism-retropgf-3/page.tsx
similarity index 100%
rename from app/(layout)/trackers/optimism-retropgf-3/page.tsx
rename to app/(layout)/layout/trackers/optimism-retropgf-3/page.tsx
diff --git a/app/(layout)/trackers/optimism-retropgf-3/recoveredListData.ts b/app/(layout)/layout/trackers/optimism-retropgf-3/recoveredListData.ts
similarity index 100%
rename from app/(layout)/trackers/optimism-retropgf-3/recoveredListData.ts
rename to app/(layout)/layout/trackers/optimism-retropgf-3/recoveredListData.ts
diff --git a/app/(layout)/trackers/optimism-retropgf-3/rpgf3_results.ts b/app/(layout)/layout/trackers/optimism-retropgf-3/rpgf3_results.ts
similarity index 100%
rename from app/(layout)/trackers/optimism-retropgf-3/rpgf3_results.ts
rename to app/(layout)/layout/trackers/optimism-retropgf-3/rpgf3_results.ts
diff --git a/app/(refactor)/[...not-found]/page.tsx b/app/(refactor)/[...not-found]/page.tsx
new file mode 100644
index 00000000..7537a573
--- /dev/null
+++ b/app/(refactor)/[...not-found]/page.tsx
@@ -0,0 +1,5 @@
+import { notFound } from "next/navigation";
+
+export default function NotFoundCatchAll() {
+  notFound();
+}
diff --git a/app/(refactor)/head.tsx b/app/(refactor)/head.tsx
new file mode 100644
index 00000000..020c189c
--- /dev/null
+++ b/app/(refactor)/head.tsx
@@ -0,0 +1,74 @@
+import { IS_PRODUCTION } from "@/lib/helpers";
+import { getCookie } from "cookies-next";
+import Script from "next/script";
+
+export default function Head() {
+  const consent = getCookie("growthepieCookieConsent");
+
+  return (
+    <>
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/apple-touch-icon.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/favicon-32x32.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/favicon-16x16.png"
+      />
+      {/* <link rel="preload" as="image" href="/logo_pie_only.png" />
+      <link rel="preload" as="image" href="/logo_full.png" />
+      <link rel="preload" as="image" href="/logo_full_light.png" /> */}
+      <link rel="manifest" href="/site.webmanifest" />
+      <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+      <meta name="msapplication-TileColor" content="#da532c" />
+
+      {IS_PRODUCTION && (
+        <>
+          <Script
+            id="gtag"
+            strategy="afterInteractive"
+            dangerouslySetInnerHTML={{
+              __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+
+            gtag('consent', 'default', {
+              'ad_storage': 'denied',
+              'analytics_storage': 'denied'
+            });
+
+            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+              j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+              'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+              })(window,document,'script','dataLayer','GTM-WK73L5M');`,
+            }}
+          />
+          {consent === true && (
+            <Script
+              id="consupd"
+              strategy="afterInteractive"
+              dangerouslySetInnerHTML={{
+                __html: `
+            gtag('consent', 'update', {
+              'ad_storage': 'granted',
+              'analytics_storage': 'granted'
+            });
+          `,
+              }}
+            />
+          )}
+        </>
+      )}
+    </>
+  );
+}
diff --git a/app/(refactor)/layout.tsx b/app/(refactor)/layout.tsx
new file mode 100644
index 00000000..0c37a0c1
--- /dev/null
+++ b/app/(refactor)/layout.tsx
@@ -0,0 +1,107 @@
+import "../globals.css";
+import { Analytics } from "@vercel/analytics/react";
+import { Providers } from "../providers";
+import CookieConsent from "@/components/layout/CookieConsent";
+import { Raleway, Inter, Roboto_Mono } from "next/font/google";
+import Header from "@/components/layout/Header";
+import SidebarContainer from "@/components/layout/SidebarContainer";
+import Head from "./head";
+import Share from "@/components/Share";
+import BottomBanner from "@/components/BottomBanner";
+import { baseMetadata } from "@/refactor/lib/seo/metadata";
+import { baseJsonLd } from "@/refactor/lib/seo/jsonLd";
+
+import "../background.css";
+import { Metadata } from "next";
+
+export const metadata: Metadata = baseMetadata;
+
+export const viewport = {
+  width: "device-width",
+  initialScale: "1.0",
+  themeColor: "dark",
+};
+
+// If loading a variable font, you don't need to specify the font weight
+const raleway = Raleway({
+  subsets: ["latin"],
+  variable: "--font-raleway",
+  display: "swap",
+});
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  display: "swap",
+});
+
+const robotoMono = Roboto_Mono({
+  subsets: ["latin"],
+  variable: "--font-roboto-mono",
+  display: "swap",
+});
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html
+      lang="en"
+      className={`${raleway.variable} ${inter.variable} ${robotoMono.variable}`}
+      suppressHydrationWarning
+    >
+      <Head />
+      <body className="bg-forest-50 dark:bg-[#1F2726] text-forest-900 dark:text-forest-500 font-raleway !overflow-x-hidden overflow-y-scroll">
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(baseJsonLd) }}
+        />
+        <Providers>
+          <div className="flex h-fit w-full justify-center">
+            <div className="flex w-full max-w-[1680px] min-h-screen">
+              <SidebarContainer />
+              <div className="flex flex-col flex-1 overflow-y-auto z-10 overflow-x-hidden relative min-h-full bg-white dark:bg-inherit">
+                <div className="w-full relative min-h-full">
+                  <div className="background-container">
+                    <div className="background-gradient-group">
+                      <div className="background-gradient-yellow"></div>
+                      <div className="background-gradient-green"></div>
+                    </div>
+                  </div>
+                  <Header />
+                  <main className="flex-1 w-full mx-auto z-10 mb-[165px]">
+                    {children}
+                    <div className="bg-blue-200 z-50"></div>
+                  </main>
+                  <BottomBanner />
+                </div>
+              </div>
+              <div className="z-50 flex fixed bottom-[20px] w-full max-w-[1680px] justify-end pointer-events-none">
+                <div className="pr-[20px] md:pr-[50px] pointer-events-auto">
+                  <div className="relative flex gap-x-[15px] z-50 p-[5px] bg-forest-500 dark:bg-[#5A6462] rounded-full shadow-[0px_0px_50px_0px_#00000033] dark:shadow-[0px_0px_50px_0px_#000000]">
+                    {/* <Details /> */}
+                    <Share />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          {process.env.NEXT_PUBLIC_VERCEL_ENV === "development" && (
+            <div className="fixed bottom-0 left-0 z-50 bg-white dark:bg-black text-xs px-1 py-0.5">
+              <div className="block sm:hidden">{"< sm"}</div>
+              <div className="hidden sm:block md:hidden">{"sm"}</div>
+              <div className="hidden md:block lg:hidden">{"md"}</div>
+              <div className="hidden lg:block xl:hidden">{"lg"}</div>
+              <div className="hidden xl:block 2xl:hidden">{"xl"}</div>
+              <div className="hidden 2xl:block">{"2xl"}</div>
+            </div>
+          )}
+          <CookieConsent />
+        </Providers>
+        <Analytics />
+      </body>
+    </html>
+  );
+}
diff --git a/app/(refactor)/not-found.tsx b/app/(refactor)/not-found.tsx
new file mode 100644
index 00000000..1a1447dd
--- /dev/null
+++ b/app/(refactor)/not-found.tsx
@@ -0,0 +1,22 @@
+"use client";
+import Link from "next/link";
+import { headers } from "next/headers";
+import { useEffect, useState } from "react";
+import { useMediaQuery } from "usehooks-ts";
+import Icon from "@/components/layout/Icon";
+import { navigationItems } from "@/lib/navigation";
+import ErrorGen from "@/components/ErrorGen";
+import React from "react";
+
+export default function NotFound() {
+  return (
+    <>
+      <ErrorGen
+        header={"404 Page Not Found ..."}
+        subheader={
+          "The page you requested was not found. We can recommend checking out one of these pages:"
+        }
+      />
+    </>
+  );
+}
diff --git a/app/(refactor)/page.tsx b/app/(refactor)/page.tsx
new file mode 100644
index 00000000..e6c4e839
--- /dev/null
+++ b/app/(refactor)/page.tsx
@@ -0,0 +1,256 @@
+import Home from "@/components/home/Home";
+import LandingUserBaseChart from "@/components/home/LandingUserBaseChart";
+import Container from "@/components/layout/Container";
+import Heading from "@/components/layout/Heading";
+import LandingTopContracts from "@/components/layout/LandingTopContracts";
+import QuestionAnswer from "@/components/layout/QuestionAnswer";
+import Icon from "@/components/layout/ServerIcon";
+// import ShowLoading from "@/components/layout/ShowLoading";
+import Subheading from "@/components/layout/Subheading";
+import SwiperContainer from "@/components/layout/SwiperContainer";
+import { Metadata } from "next";
+import Link from "next/link";
+import Image from "next/image";
+import HorizontalScrollContainer from "@/components/HorizontalScrollContainer";
+// import { LandingURL } from "@/lib/urls";
+import MainPage from "@/refactor/components/layout/MainPage";
+import PageTitle from "@/refactor/components/layout/PageTitle";
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title:
+      "growthepie - Growing Ethereum’s Ecosystem Together - Layer 2 User Base",
+    description:
+      "At growthepie, our mission is to provide comprehensive and accurate analytics of layer 2 solutions for the Ethereum ecosystem, acting as a trusted data aggregator from reliable sources such as L2Beat and DefiLlama, while also developing our own metrics.",
+  };
+}
+
+export default async function Page() {
+  return (
+    <MainPage>
+      <PageTitle
+        title="Mastering Ethereum Layer 2s"
+        subtitle="Your Gateway to Curated Analytics and Knowledge"
+      />
+      <Container className="flex flex-col flex-1 w-full mt-[30px] md:mt-[30px] mb-[15px] md:mb-[15px] gap-y-[15px] justify-center">
+        <div className="flex items-center gap-x-[8px] py-[10px] md:py-0">
+          <Icon
+            icon="gtp:fundamentals"
+            className="w-[30px] h-[30px] md:w-9 md:h-9"
+          />
+          <Heading
+            id="layer-2-traction-title"
+            className="text-[20px] md:text-[30px] leading-[1.2] font-semibold"
+          >
+            Layer 2 Traction
+          </Heading>
+        </div>
+        <Subheading className="text-base leading-normal md:leading-snug px-[5px] lg:px-[45px]">
+          <div>Aggregated daily metrics across all tracked Layer 2s.</div>
+        </Subheading>
+      </Container>
+      <Container className="!px-0 fade-edge-div pb-[24px] -mb-[24px]">
+        <SwiperContainer ariaId={"layer-2-traction-title"} />
+        {/* <div className="h-[145px] md:h-[183px] w-full">
+          <ShowLoading section />
+        </div> */}
+      </Container>
+
+      <Container className="flex flex-col flex-1 w-full mt-[30px] md:mt-[60px] mb-[15px] md:mb-[15px] gap-y-[15px] justify-center">
+        <div className="flex items-center gap-x-[8px] py-[10px] md:py-0">
+          <Icon
+            icon="gtp:gtp-pie"
+            className="w-[30px] h-[30px] md:w-9 md:h-9"
+          />
+          <Heading className="text-[20px] md:text-[30px] leading-[1.2] font-semibold">
+            Layer 2 User Base
+          </Heading>
+        </div>
+        <Subheading className="text-base leading-normal md:leading-snug px-[5px] lg:px-[45px]">
+          Number of distinct addresses interacting with one or multiple Layer 2s
+          in a given week.
+        </Subheading>
+      </Container>
+      <LandingUserBaseChart />
+      <Container className="flex flex-col flex-1 w-full mt-[30px] md:mt-[60px] mb-[15px] md:mb-[15px] gap-y-[15px] justify-center">
+        <div className="flex items-center gap-x-[8px] py-[10px] md:py-0">
+          <Icon
+            icon="gtp:package"
+            className="w-[30px] h-[30px] md:w-9 md:h-9"
+          />
+          <Heading
+            id="layer-2-traction-title"
+            className="text-[20px] md:text-[30px] leading-[1.2] font-semibold"
+          >
+            Blockspace
+          </Heading>
+        </div>
+        <Subheading className="text-base leading-normal md:leading-snug px-[5px] lg:px-[45px]">
+          <div>Top 6 gas-consuming contracts across all tracked Layer 2s.</div>
+        </Subheading>
+      </Container>
+
+      <Container className="">
+        <LandingTopContracts />
+      </Container>
+      <Container>
+        <div className="flex gap-x-0 md:gap-x-12 w-full ml-0 mt-[30px] md:mt-[60px]">
+          <div className="flex flex-col md:w-1/2 lg:w-2/3 ">
+            <div className="flex items-center mb-[15px] md:mb-[15px] gap-x-[8px] py-[10px] md:py-0 ">
+              <Icon
+                icon="gtp:gtp-about"
+                className="w-[30px] h-[30px] md:w-9 md:h-9"
+              />
+              <Heading
+                id="layer-2-traction-title"
+                className="text-[20px] md:text-[30px] leading-[1.2] font-semibold"
+              >
+                About growthepie
+              </Heading>
+            </div>
+            <div className="block md:hidden relative mt-[0px] lg:mt-[15px] mb-[30px] lg:-mb-[30px] h-[190px]">
+              <Image
+                src="/GTP-Data-Kraken.png"
+                fill={true}
+                alt="About growthepie"
+                className="object-contain"
+                sizes="25vw"
+              />
+            </div>
+            <div className="text-base md:text-sm lg:text-base">
+              At growthepie, our mission is to provide comprehensive and
+              accurate analytics Ethereum scaling solutions, acting as a trusted
+              data aggregator from reliable sources such as L2Beat and
+              DefiLlama, while also developing our own metrics. Through our
+              analytics interface, we aim to educate and increase transparency.
+              Our goal is to be one of the go-to resources for those seeking to
+              learn more about the potential of layer 2 technologies and their
+              impact on the future of the Ethereum ecosystem.
+            </div>
+          </div>
+          <div className="hidden md:flex md:flex-1 relative mt-[5px] lg:mt-[15px] -mb-[10px] lg:-mb-[30px]">
+            <Image
+              src="/GTP-Data-Kraken.png"
+              fill={true}
+              alt="About growthepie"
+              className="object-contain"
+              sizes="25vw"
+            />
+          </div>
+        </div>
+
+        <div className="flex mt-[25px] md:mt-[60px] mb-[25px] md:mb-[30px] ml-1.5 md:ml-0 space-x-2 items-center">
+          <Icon
+            icon="gtp:gtp-faq"
+            className="w-[30px] h-[30px] md:w-9 md:h-9"
+          />
+          <Heading
+            id="layer-2-traction-title"
+            className="text-[20px] md:text-[30px] leading-[1.2] font-semibold"
+          >
+            <div>Frequently Asked Questions</div>
+          </Heading>
+        </div>
+        <div className="flex flex-col space-y-[15px] my-0 md:my-[30px]">
+          <QuestionAnswer
+            className="rounded-3xl bg-forest-50 dark:bg-forest-900 px-[46px] py-[23px] flex flex-col"
+            question="What's up with the name?"
+            answer={
+              <>
+                We view the different layer 2 solutions for the Ethereum
+                ecosystem as complementary technologies that enable more use
+                cases, rather than competitors vying for market share. We
+                believe that the space is a positive-sum game, where each unique
+                flavor of layer 2 technology brings its own benefits to the
+                table. Through collaboration and innovation, the Ethereum
+                community can unlock the full potential of layer 2 solutions and
+                continue to expand it&apos;s user-base and evolve in exciting
+                ways.
+              </>
+            }
+          />
+          <QuestionAnswer
+            className="rounded-3xl bg-forest-50 dark:bg-forest-900 px-[46px] py-[23px] flex flex-col"
+            question='What exactly does "Active on Multiple Chains" stand for?'
+            answer={
+              <>
+                The &quot;multiple&quot; category denotes addresses that were
+                active on multiple Layer 2 (L2) networks within a given week.
+                This implies that if an address was active on different L2
+                networks, such as Arbitrum and OP Mainnet, in the same week, it
+                would be included in the &quot;multiple&quot; category, but not
+                attributed to either Arbitrum or OP Mainnet. For a more detailed
+                breakdown of active addresses on each individual chain, please
+                refer to the{" "}
+                <Link
+                  href="https://www.growthepie.xyz/fundamentals/daily-active-addresses"
+                  className="underline"
+                >
+                  &quot;Active addresses&quot;
+                </Link>{" "}
+                tab.
+              </>
+            }
+          />
+          <QuestionAnswer
+            className="rounded-3xl bg-forest-50 dark:bg-forest-900 px-[46px] py-[23px] flex flex-col"
+            question="Why have the numbers on the landing page not been updated for a few days?"
+            answer={
+              <>
+                The numbers in the User Base chart use a weekly aggregation. In
+                order to avoid confusion we only show completed weeks and no
+                partial weeks. The date that you can see in the chart is always
+                the start of the week (Monday). These numbers will update every
+                Monday. All other numbers on this page update daily.
+              </>
+            }
+          />
+          <QuestionAnswer
+            className="rounded-3xl bg-forest-50 dark:bg-forest-900 px-[46px] py-[23px] flex flex-col"
+            question="L2Beat has way more Layer 2s listed why do you not cover all of them?"
+            answer={
+              <>
+                The goal is to cover as many Layer 2s as possible. We will add
+                more Layer 2s over time. For our type of analysis, we need
+                access to the raw data of each L2. This makes adding new L2s
+                time and resource-consuming. Our goal is to cover at least 80%
+                of all Ethereum ecosystem usage.
+              </>
+            }
+          />
+          <QuestionAnswer
+            className="rounded-3xl bg-forest-50 dark:bg-forest-900 px-[46px] py-[23px] flex flex-col"
+            question="Are the dates on this website my regional timezone or UTC?"
+            answer={
+              <>
+                All dates on our website use UTC time. This makes it easier for
+                us to aggregate data and avoid confusion when people in
+                different timezones share charts.
+              </>
+            }
+          />
+          <QuestionAnswer
+            className="rounded-3xl bg-forest-50 dark:bg-forest-900 px-[46px] py-[23px] flex flex-col"
+            question="Interested in collaborating with us?"
+            answer={
+              <>
+                We are always looking for new collaborators. If you are
+                interested in working with us, please send us a message in our{" "}
+                <Link
+                  href="https://discord.gg/fxjJFe7QyN"
+                  className="underline"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  Discord
+                </Link>
+                .
+              </>
+            }
+          />
+        </div>
+      </Container>
+      <Home />
+    </MainPage>
+  );
+}
diff --git a/refactor/components/layout/MainPage.css b/refactor/components/layout/MainPage.css
new file mode 100644
index 00000000..e69de29b
diff --git a/refactor/components/layout/MainPage.tsx b/refactor/components/layout/MainPage.tsx
new file mode 100644
index 00000000..1110213a
--- /dev/null
+++ b/refactor/components/layout/MainPage.tsx
@@ -0,0 +1,22 @@
+import Home from "@/components/home/Home";
+import LandingUserBaseChart from "@/components/home/LandingUserBaseChart";
+import Container from "@/components/layout/Container";
+import Heading from "@/components/layout/Heading";
+import LandingTopContracts from "@/components/layout/LandingTopContracts";
+import QuestionAnswer from "@/components/layout/QuestionAnswer";
+import Icon from "@/components/layout/ServerIcon";
+// import ShowLoading from "@/components/layout/ShowLoading";
+import Subheading from "@/components/layout/Subheading";
+import SwiperContainer from "@/components/layout/SwiperContainer";
+import Link from "next/link";
+import Image from "next/image";
+import PageTitle from "./PageTitle";
+// import { LandingURL } from "@/lib/urls";
+
+type MainPageProps = {
+  children: React.ReactNode;
+};
+
+export default async function MainPage({ children }: MainPageProps) {
+  return <>{children}</>;
+}
diff --git a/refactor/components/layout/PageTitle.css b/refactor/components/layout/PageTitle.css
new file mode 100644
index 00000000..a3f6f23f
--- /dev/null
+++ b/refactor/components/layout/PageTitle.css
@@ -0,0 +1,13 @@
+.page-title-container {
+  @apply flex flex-col flex-1 w-full;
+  @apply mt-[65px] md:mt-[70px] gap-y-[10px];
+}
+
+.page-title-container h1 {
+  @apply max-w-[900px];
+  @apply font-bold leading-[1.2] text-[24px] sm:text-[32px] md:text-[36px];
+}
+
+.page-title-container h2 {
+  @apply text-xs sm:text-sm md:text-[20px] font-semibold leading-[1.2];
+}
diff --git a/refactor/components/layout/PageTitle.tsx b/refactor/components/layout/PageTitle.tsx
new file mode 100644
index 00000000..50ca6850
--- /dev/null
+++ b/refactor/components/layout/PageTitle.tsx
@@ -0,0 +1,16 @@
+import Heading from "@/components/layout/Heading";
+import "./PageTitle.css";
+
+type PageTitleProps = {
+  title: string;
+  subtitle: string;
+};
+
+export default function PageTitle({ title, subtitle }: PageTitleProps) {
+  return (
+    <div className="page-title-container">
+      <h1>{title}</h1>
+      <h2>{subtitle}</h2>
+    </div>
+  );
+}
diff --git a/refactor/lib/seo/jsonLd.ts b/refactor/lib/seo/jsonLd.ts
new file mode 100644
index 00000000..f238e4fe
--- /dev/null
+++ b/refactor/lib/seo/jsonLd.ts
@@ -0,0 +1,35 @@
+import { Graph } from "schema-dts";
+
+export const baseJsonLd: Graph = {
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      "@type": "Organization",
+      "@id": "https://www.growthepie.xyz/#organization",
+      name: "growthepie",
+      url: "https://www.growthepie.xyz",
+      logo: "https://www.growthepie.xyz/logo_full.png",
+      sameAs: [
+        "https://twitter.com/growthepie_eth",
+        "https://mirror.xyz/blog.growthepie.eth",
+        "https://github.com/growthepie",
+      ],
+    },
+    {
+      "@type": "WebSite",
+      "@id": "https://www.growthepie.xyz/#website",
+      url: "https://www.growthepie.xyz",
+      name: "growthepie",
+      description:
+        "At growthepie, our mission is to provide comprehensive and accurate analytics of layer 2 solutions for the Ethereum ecosystem, acting as a trusted data aggregator from reliable sources such as L2Beat and DefiLlama, while also developing our own metrics.",
+      publisher: {
+        "@type": "Organization",
+        name: "growthepie",
+        logo: {
+          "@type": "ImageObject",
+          url: "https://www.growthepie.xyz/logo_full.png",
+        },
+      },
+    },
+  ],
+};
diff --git a/refactor/lib/seo/metadata.ts b/refactor/lib/seo/metadata.ts
new file mode 100644
index 00000000..261a27ef
--- /dev/null
+++ b/refactor/lib/seo/metadata.ts
@@ -0,0 +1,50 @@
+import { Metadata } from "next";
+
+export const baseMetadata: Metadata = {
+  metadataBase: new URL("https://www.growthepie.xyz"),
+  title: {
+    template: "%s - growthepie",
+    default: "growthepie - Growing Ethereum’s Ecosystem Together",
+  },
+  description:
+    "At growthepie, our mission is to provide comprehensive and accurate analytics of layer 2 solutions for the Ethereum ecosystem, acting as a trusted data aggregator from reliable sources such as L2Beat and DefiLlama, while also developing our own metrics.",
+  openGraph: {
+    title: "growthepie",
+    description: "Growing Ethereum’s Ecosystem Together",
+    url: "https://www.growthepie.xyz",
+
+    images: [
+      {
+        url: "https://www.growthepie.xyz/gtp_og.png",
+        width: 1200,
+        height: 627,
+        alt: "growthepie.xyz",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "growthepie.xyz",
+    description: "Growing Ethereum’s Ecosystem Together",
+    site: "@growthepie_eth",
+    siteId: "1636391104689094656",
+    creator: "@growthepie_eth",
+    creatorId: "1636391104689094656",
+    images: ["https://www.growthepie.xyz/gtp_og.png"],
+  },
+  robots: {
+    index: true,
+    follow: true,
+    nocache: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      noimageindex: false,
+      "max-video-preview": -1,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+    },
+  },
+};