diff --git a/src/assets/heroes/garden.jpg b/src/assets/heroes/garden.jpg
new file mode 100644
index 00000000000..ffc16ccefbc
Binary files /dev/null and b/src/assets/heroes/garden.jpg differ
diff --git a/src/assets/heroes/guides-hub-hero.jpg b/src/assets/heroes/guides-hub-hero.jpg
new file mode 100644
index 00000000000..f5d8b8b9f48
Binary files /dev/null and b/src/assets/heroes/guides-hub-hero.jpg differ
diff --git a/src/intl/en/page-assets.json b/src/intl/en/page-assets.json
index f8fe30d912d..b3adf83bda8 100644
--- a/src/intl/en/page-assets.json
+++ b/src/intl/en/page-assets.json
@@ -49,5 +49,13 @@
   "page-assets-page-assets-transparent-background": "Transparent background",
   "page-assets-robot": "Robot wallet",
   "page-assets-sharding": "Sharding",
-  "page-assets-hackathon": "Hackathon"
+  "page-assets-hackathon": "Hackathon",
+  "page-assets-learn-hero-name": "Futuristic university",
+  "page-assets-community-hero-name": "Community gathering",
+  "page-assets-quizzes-hero-name": "Infinite playground",
+  "page-assets-developers-hero-name": "Building the future",
+  "page-assets-garden-name": "Garden of Ethereum",
+  "page-assets-roadmap-hero-name": "Road(s) to the future",
+  "page-assets-layer-2-hero-name": "Constructing Ethereum",
+  "page-assets-guides-hero-name": "Ethereum lab"
 }
diff --git a/src/pages/assets.tsx b/src/pages/assets.tsx
index cca26c98639..ecc64e20aae 100644
--- a/src/pages/assets.tsx
+++ b/src/pages/assets.tsx
@@ -113,6 +113,70 @@ const AssetsPage = ({ data }: PageProps<Queries.AssetsPageQuery, Context>) => {
             artistUrl="https://liamcobb.com/"
           />
         </Row>
+        <Row>
+          <AssetDownload
+            title={t("page-assets-learn-hero-name")}
+            alt={t("page-assets-learn-hero-name")}
+            image={data.learnHero}
+            artistName="Liam Cobb"
+            artistUrl="https://liamcobb.com/"
+          />
+          <AssetDownload
+            title={t("page-assets-community-hero-name")}
+            alt={t("page-assets-community-hero-name")}
+            image={data.communityHero}
+            artistName="Liam Cobb"
+            artistUrl="https://liamcobb.com/"
+          />
+        </Row>
+        <Row>
+          <AssetDownload
+            title={t("page-assets-quizzes-hero-name")}
+            alt={t("page-assets-quizzes-hero-name")}
+            image={data.quizzesHub}
+            artistName="Liam Cobb"
+            artistUrl="https://liamcobb.com/"
+          />
+          <AssetDownload
+            title={t("page-assets-developers-hero-name")}
+            alt={t("page-assets-developers-hero-name")}
+            image={data.developersHero}
+            artistName="Liam Cobb"
+            artistUrl="https://liamcobb.com/"
+          />
+        </Row>
+        <Row>
+          <AssetDownload
+            title={t("page-assets-garden-name")}
+            alt={t("page-assets-garden-name")}
+            image={data.garden}
+            artistName="Liam Cobb"
+            artistUrl="https://liamcobb.com/"
+          />
+          <AssetDownload
+            title={t("page-assets-roadmap-hero-name")}
+            alt={t("page-assets-roadmap-hero-name")}
+            image={data.roadmapHero}
+            artistName="Liam Cobb"
+            artistUrl="https://liamcobb.com/"
+          />
+        </Row>
+        <Row>
+          <AssetDownload
+            title={t("page-assets-layer-2-hero-name")}
+            alt={t("page-assets-layer-2-hero-name")}
+            image={data.layer2Hero}
+            artistName="Liam Cobb"
+            artistUrl="https://liamcobb.com/"
+          />
+          <AssetDownload
+            title={t("page-assets-guides-hero-name")}
+            alt={t("page-assets-guides-hero-name")}
+            image={data.guidesHero}
+            artistName="Liam Cobb"
+            artistUrl="https://liamcobb.com/"
+          />
+        </Row>
         <Row>
           <AssetDownload
             title={t("page-assets-doge")}
@@ -702,5 +766,31 @@ export const query = graphql`
     ) {
       ...assetItem
     }
+    communityHero: file(relativePath: { eq: "heroes/community-hero.png" }) {
+      ...assetItem
+    }
+    developersHero: file(
+      relativePath: { eq: "heroes/developers-hub-hero.jpg" }
+    ) {
+      ...assetItem
+    }
+    garden: file(relativePath: { eq: "heroes/garden.jpg" }) {
+      ...assetItem
+    }
+    guidesHero: file(relativePath: { eq: "heroes/guides-hub-hero.jpg" }) {
+      ...assetItem
+    }
+    layer2Hero: file(relativePath: { eq: "heroes/layer-2-hub-hero.jpg" }) {
+      ...assetItem
+    }
+    learnHero: file(relativePath: { eq: "heroes/learn-hub-hero.png" }) {
+      ...assetItem
+    }
+    quizzesHub: file(relativePath: { eq: "heroes/quizzes-hub-hero.png" }) {
+      ...assetItem
+    }
+    roadmapHero: file(relativePath: { eq: "heroes/roadmap-hub-hero.jpg" }) {
+      ...assetItem
+    }
   }
 `
diff --git a/src/templates/static.tsx b/src/templates/static.tsx
index 55cb65df6a8..d1265a42c52 100644
--- a/src/templates/static.tsx
+++ b/src/templates/static.tsx
@@ -55,6 +55,9 @@ import { Lang } from "../utils/languages"
 
 import { ChildOnlyProp, Context } from "../types"
 
+import { HubHero } from "../components/Hero"
+import { getImage } from "gatsby-plugin-image"
+
 const Pre = (props: ChildOnlyProp) => (
   <Text
     as="pre"
@@ -215,7 +218,7 @@ const components = {
 }
 
 const StaticPage = ({
-  data: { siteData, pageData: mdx },
+  data: { siteData, pageData: mdx, heroImage },
   pageContext: { relativePath, slug },
   location,
 }: PageProps<Queries.StaticPageQuery, Context>) => {
@@ -246,6 +249,14 @@ const StaticPage = ({
   const { editContentUrl } = siteData.siteMetadata || {}
   const absoluteEditPath = `${editContentUrl}${relativePath}`
 
+  const parsedPathname = location.pathname
+    .split("/")
+    .filter((item) => item !== "")
+    .slice(1)
+    .join("/")
+
+  console.log(parsedPathname)
+
   return (
     <Box w="full">
       {showPostMergeBanner && (
@@ -267,46 +278,59 @@ const StaticPage = ({
           title={mdx.frontmatter.title}
           description={mdx.frontmatter.description}
         />
-        <Box
-          as="article"
-          maxW="container.md"
-          w="full"
-          sx={{
-            ".featured": {
-              pl: 4,
-              ml: -4,
-              borderLeft: "1px dotted",
-              borderLeftColor: "primary.base",
-            },
+        <Box>
+          {parsedPathname === "guides" ? (
+            <HubHero
+              heroImgSrc={getImage(heroImage)!}
+              header={mdx.frontmatter.title}
+              title={""}
+              description={mdx.frontmatter.description}
+            />
+          ) : (
+            <>
+              <Breadcrumbs slug={slug} mb="8" />
+              <Text
+                color="text200"
+                dir={isLangRightToLeft(language as Lang) ? "rtl" : "ltr"}
+              >
+                <Translation id="page-last-updated" />:{" "}
+                {getLocaleTimestamp(language as Lang, lastUpdatedDate)}
+              </Text>
+            </>
+          )}
+          <Box
+            as="article"
+            maxW="container.md"
+            w="full"
+            sx={{
+              ".featured": {
+                pl: 4,
+                ml: -4,
+                borderLeft: "1px dotted",
+                borderLeftColor: "primary.base",
+              },
 
-            ".citation": {
-              p: {
-                color: "text200",
+              ".citation": {
+                p: {
+                  color: "text200",
+                },
               },
-            },
-          }}
-        >
-          <Breadcrumbs slug={slug} mb="8" />
-          <Text
-            color="text200"
-            dir={isLangRightToLeft(language as Lang) ? "rtl" : "ltr"}
+            }}
           >
-            <Translation id="page-last-updated" />:{" "}
-            {getLocaleTimestamp(language as Lang, lastUpdatedDate)}
-          </Text>
-          <TableOfContents
-            position="relative"
-            zIndex={2}
-            editPath={absoluteEditPath}
-            items={tocItems}
-            isMobile
-            maxDepth={mdx.frontmatter.sidebarDepth!}
-            hideEditButton={!!mdx.frontmatter.hideEditButton}
-          />
-          <MDXProvider components={components}>
-            <MDXRenderer>{mdx.body}</MDXRenderer>
-          </MDXProvider>
-          <FeedbackCard isArticle />
+            <TableOfContents
+              position="relative"
+              zIndex={2}
+              editPath={absoluteEditPath}
+              items={tocItems}
+              isMobile
+              maxDepth={mdx.frontmatter.sidebarDepth!}
+              hideEditButton={!!mdx.frontmatter.hideEditButton}
+            />
+            <MDXProvider components={components}>
+              <MDXRenderer>{mdx.body}</MDXRenderer>
+            </MDXProvider>
+            <FeedbackCard isArticle />
+          </Box>
         </Box>
         {tocItems && (
           <TableOfContents
@@ -346,6 +370,16 @@ export const staticPageQuery = graphql`
         }
       }
     }
+    heroImage: file(relativePath: { eq: "heroes/guides-hub-hero.jpg" }) {
+      childImageSharp {
+        gatsbyImageData(
+          width: 1504
+          layout: CONSTRAINED
+          placeholder: BLURRED
+          quality: 100
+        )
+      }
+    }
     siteData: site {
       siteMetadata {
         editContentUrl