diff --git a/src/assets/heroes/roadmap-hub-hero.jpg b/src/assets/heroes/roadmap-hub-hero.jpg
new file mode 100644
index 00000000000..a77d0fa4017
Binary files /dev/null and b/src/assets/heroes/roadmap-hub-hero.jpg differ
diff --git a/src/content/roadmap/index.md b/src/content/roadmap/index.md
index d14e725c2e7..c32faad7c0f 100644
--- a/src/content/roadmap/index.md
+++ b/src/content/roadmap/index.md
@@ -3,7 +3,7 @@ title: Ethereum roadmap
 description: The path to more scalability, security and sustainability for Ethereum.
 lang: en
 template: roadmap
-image: ../../assets/roadmap/roadmap-main.png
+image: ../../assets/heroes/roadmap-hub-hero.jpg
 alt: "Ethereum roadmap"
 summaryPoints:
 buttons:
diff --git a/src/pages/developers/index.tsx b/src/pages/developers/index.tsx
index 3ad11d62d35..726c5322f2d 100644
--- a/src/pages/developers/index.tsx
+++ b/src/pages/developers/index.tsx
@@ -5,7 +5,6 @@ import {
   Box,
   chakra,
   Flex,
-  Image,
   SimpleGrid,
   TextProps,
   useColorModeValue,
@@ -38,55 +37,6 @@ const Page = (props: ChildOnlyProp) => (
   />
 )
 
-const HeroContainer = (props: ChildOnlyProp) => (
-  <Flex
-    justifyContent="space-between"
-    flexDirection={{ base: "column-reverse", md: "row" }}
-    mt={8}
-    mb={16}
-    bg="cardGradient"
-    {...props}
-  />
-)
-
-const HeroCopyContainer = (props: ChildOnlyProp) => (
-  <Box
-    flex={{ base: "0 1 400px", md: "0 1 500px" }}
-    w={{ base: "100%", md: "auto" }}
-    maxWidth={{ base: "100%", md: "500px" }}
-    maxHeight={{ base: "280px", md: "340px" }}
-    {...props}
-  />
-)
-
-const HeroCopy = (props: ChildOnlyProp) => (
-  <Box
-    p={8}
-    m={{ base: 0, sm: 8 }}
-    mt={{ base: -2, md: 8 }}
-    bg="background.base"
-    borderRadius="4px"
-    border="1px solid border"
-    {...props}
-  />
-)
-
-const H1 = (props: ChildOnlyProp) => (
-  <OldHeading
-    as="h1"
-    fontSize="2rem"
-    fontWeight="medium"
-    fontFamily="monospace"
-    fontStyle="normal"
-    textTransform="uppercase"
-    lineHeight="110%"
-    bg="ednBackground"
-    p={2}
-    mt={0}
-    {...props}
-  />
-)
-
 const GrayContainer = (props: ChildOnlyProp) => (
   <Box
     w="full"
@@ -109,19 +59,6 @@ const Subtitle = (props: TextProps) => (
 
 const MonoSubtitle = (props: ChildOnlyProp) => <OldHeading mb={0} {...props} />
 
-const Hero = (props: ChildOnlyProp) => (
-  <Box
-    flex="1 1 50%"
-    maxW="800px"
-    bgSize="cover"
-    bgRepeat="no-repeat"
-    mt={{ base: 0, md: 12 }}
-    ml={{ base: 0, md: 8 }}
-    alignSelf={{ base: "center", md: "" }}
-    {...props}
-  />
-)
-
 const StyledCardContainer = (props: ChildOnlyProp) => (
   <SimpleGrid columns={[1, 1, 2, 4]} mx={-4} mt={8} mb={12} {...props} />
 )
diff --git a/src/templates/roadmap.tsx b/src/templates/roadmap.tsx
index 2de7de48eaf..e6775c04532 100644
--- a/src/templates/roadmap.tsx
+++ b/src/templates/roadmap.tsx
@@ -44,6 +44,7 @@ import Text from "../components/OldText"
 import GlossaryTooltip from "../components/Glossary/GlossaryTooltip"
 import MdLink from "../components/MdLink"
 import LeftNavBar from "../components/LeftNavBar"
+import { HubHero } from "../components/Hero"
 import {
   Page,
   ContentContainer,
@@ -143,11 +144,16 @@ const components = {
 }
 
 const RoadmapPage = ({
-  data: { pageData: mdx },
+  data: { pageData: mdx, heroImage },
   location,
 }: PageProps<Queries.RoadmapPageQuery, Context>) => {
   // TODO: Replace with direct token implementation after UI migration is completed
   const lgBp = useToken("breakpoints", "lg")
+  const parsedPathname = location.pathname
+    .split("/")
+    .filter((item) => item !== "")
+    .slice(1)
+    .join("/")
 
   if (!mdx?.frontmatter)
     throw new Error(
@@ -213,58 +219,67 @@ const RoadmapPage = ({
 
   return (
     <Box position="relative">
-      <HeroContainer>
-        <Flex w="100%" flexDirection={{ base: "column", md: "row" }}>
-          <TitleCard>
-            <Breadcrumbs slug={location.pathname} mb="8" />
-            <Title>{mdx.frontmatter.title}</Title>
-            <Text>{mdx.frontmatter.description}</Text>
-            {mdx?.frontmatter?.buttons && (
-              // FIXME: remove the `ul` override once removed the corresponding
-              // global styles in `src/@chakra-ui/gatsby-plugin/styles.ts`
-              <Wrap spacing={2} marginBottom={4} sx={{ ul: { m: 0 } }}>
-                {mdx.frontmatter.buttons.map((button, idx) => {
-                  if (button?.to) {
+      {parsedPathname === "roadmap" ? (
+        <HubHero
+          heroImgSrc={getImage(heroImage)!}
+          header={mdx.frontmatter.title}
+          title={""}
+          description={mdx.frontmatter.description}
+        />
+      ) : (
+        <HeroContainer>
+          <Flex w="100%" flexDirection={{ base: "column", md: "row" }}>
+            <TitleCard>
+              <Breadcrumbs slug={location.pathname} mb="8" />
+              <Title>{mdx.frontmatter.title}</Title>
+              <Text>{mdx.frontmatter.description}</Text>
+              {mdx?.frontmatter?.buttons && (
+                // FIXME: remove the `ul` override once removed the corresponding
+                // global styles in `src/@chakra-ui/gatsby-plugin/styles.ts`
+                <Wrap spacing={2} marginBottom={4} sx={{ ul: { m: 0 } }}>
+                  {mdx.frontmatter.buttons.map((button, idx) => {
+                    if (button?.to) {
+                      return (
+                        <WrapItem>
+                          <ButtonLink
+                            key={idx}
+                            variant={button?.variant}
+                            to={button?.to}
+                          >
+                            {button.label}
+                          </ButtonLink>
+                        </WrapItem>
+                      )
+                    }
                     return (
                       <WrapItem>
-                        <ButtonLink
+                        <Button
                           key={idx}
                           variant={button?.variant}
-                          to={button?.to}
+                          toId={button?.toId}
                         >
-                          {button.label}
-                        </ButtonLink>
+                          {button?.label}
+                        </Button>
                       </WrapItem>
                     )
-                  }
-                  return (
-                    <WrapItem>
-                      <Button
-                        key={idx}
-                        variant={button?.variant}
-                        toId={button?.toId}
-                      >
-                        {button?.label}
-                      </Button>
-                    </WrapItem>
-                  )
-                })}
-              </Wrap>
-            )}
-            <TableOfContents
-              position="relative"
-              zIndex="2"
-              items={tocItems}
-              isMobile
+                  })}
+                </Wrap>
+              )}
+              <TableOfContents
+                position="relative"
+                zIndex="2"
+                items={tocItems}
+                isMobile
+              />
+            </TitleCard>
+            <HeroImage
+              image={getImage(mdx.frontmatter.image)!}
+              alt={mdx.frontmatter.alt || ""}
+              objectFit="contain"
             />
-          </TitleCard>
-          <HeroImage
-            image={getImage(mdx.frontmatter.image)!}
-            alt={mdx.frontmatter.alt || ""}
-            objectFit="contain"
-          />
-        </Flex>
-      </HeroContainer>
+          </Flex>
+        </HeroContainer>
+      )}
       <Page dir={isRightToLeft ? "rtl" : "ltr"}>
         <PageMetadata
           title={mdx.frontmatter.title}
@@ -309,6 +324,16 @@ export const roadmapPageQuery = graphql`
         }
       }
     }
+    heroImage: file(relativePath: { eq: "heroes/roadmap-hub-hero.jpg" }) {
+      childImageSharp {
+        gatsbyImageData(
+          width: 1504
+          layout: CONSTRAINED
+          placeholder: BLURRED
+          quality: 100
+        )
+      }
+    }
     pageData: mdx(fields: { relativePath: { eq: $relativePath } }) {
       fields {
         slug