diff --git a/public/images/Safenet/roadmap-hook.png b/public/images/Safenet/roadmap-hook.png
new file mode 100644
index 00000000..73f37fd0
Binary files /dev/null and b/public/images/Safenet/roadmap-hook.png differ
diff --git a/public/images/Safenet/telegram-gradient.svg b/public/images/Safenet/telegram-gradient.svg
new file mode 100644
index 00000000..b055d5ed
--- /dev/null
+++ b/public/images/Safenet/telegram-gradient.svg
@@ -0,0 +1,9 @@
+<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.9968 0.00244141C23.2613 0.00244141 17.6543 1.70325 12.8853 4.88981C8.11628 8.07637 4.39928 12.6055 2.20434 17.9046C0.00940321 23.2035 -0.564907 29.0347 0.554058 34.66C1.67302 40.2856 4.43502 45.4527 8.49074 49.5087C12.5465 53.5644 17.7138 56.3262 23.3393 57.4453C28.9646 58.5643 34.7957 57.9897 40.0948 55.7948C45.3938 53.5999 49.9229 49.8832 53.1096 45.1141C56.296 40.3451 57.9968 34.7383 57.9968 29.0024C57.9968 21.3112 54.9413 13.9349 49.5031 8.49636C44.0645 3.05777 36.688 0.00244141 28.9968 0.00244141ZM43.2431 19.8674L38.4943 42.3062C38.1318 43.9012 37.1893 44.2637 35.8481 43.5387L28.5981 38.1737L24.9731 41.5449C24.8023 41.7679 24.583 41.9491 24.3318 42.0749C24.0806 42.2003 23.804 42.267 23.5231 42.2699L24.0306 35.0199L37.4431 22.8762C38.0593 22.3687 37.4431 22.0787 36.5731 22.5862L20.1156 32.9174L12.8656 30.6699C11.3068 30.1987 11.2706 29.1112 13.1918 28.3862L41.1406 17.5112C42.5181 17.1124 43.6781 17.9099 43.2431 19.8674Z" fill="url(#paint0_linear_16393_5864)"/>
+<defs>
+<linearGradient id="paint0_linear_16393_5864" x1="-0.00317383" y1="29.0025" x2="57.9968" y2="29.0025" gradientUnits="userSpaceOnUse">
+<stop stop-color="#32F970"/>
+<stop offset="1" stop-color="#EED509"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/Safenet/timeline.png b/public/images/Safenet/timeline.png
new file mode 100644
index 00000000..ec8c06af
Binary files /dev/null and b/public/images/Safenet/timeline.png differ
diff --git a/src/components/Safenet/Roadmap/index.tsx b/src/components/Safenet/Roadmap/index.tsx
new file mode 100644
index 00000000..a2624d97
--- /dev/null
+++ b/src/components/Safenet/Roadmap/index.tsx
@@ -0,0 +1,74 @@
+import { Button, Container, Grid, IconButton, Typography } from '@mui/material'
+import GradientChip from '@/components/Safenet/GradientChip'
+import TelegramGradient from '@/public/images/Safenet/telegram-gradient.svg'
+import css from './styles.module.css'
+import { ALPHA_TELEGRAM_LINK } from '@/config/constants'
+
+const items: Array<{ title: string; features: Array<string> }> = [
+  {
+    title: 'Alpha',
+    features: ['Cross-chain Accounts', 'Execution guarantees', 'Validity proofs'],
+  },
+  {
+    title: 'Beta',
+    features: ['Safe Apps Support', 'SAFE Validator network'],
+  },
+  {
+    title: 'Version 1',
+    features: ['Third-party Processors', 'Liquidity Network', 'ERC-7579 Support'],
+  },
+]
+
+const Roadmap = () => {
+  return (
+    <Container className={css.container}>
+      <div className={css.contentWrapper}>
+        <GradientChip caption="Roadmap" />
+
+        <Typography className={css.title}>
+          <img src="/images/Safenet/roadmap-hook.png" alt="Addornment" className={css.hook} />
+          Safenet is coming <span className={css.titleGradient}>2025</span>
+        </Typography>
+
+        <Typography className={css.text}>Builder mode on.</Typography>
+      </div>
+
+      <img src="/images/Safenet/timeline.png" alt="Safenet timeline" width="100%" className={css.timelineImage} />
+
+      <Grid container className={css.gridContainer}>
+        {items.map(({ title, features }, index) => (
+          <Grid item md={3} className={css.blockItem} key={index}>
+            <Typography className={css.blockTitle}>{title}</Typography>
+
+            <div className={css.blockText}>
+              {features.map((item) => (
+                <Typography key={item}>{item}</Typography>
+              ))}
+            </div>
+          </Grid>
+        ))}
+      </Grid>
+
+      <div className={css.buttonWrapper}>
+        <IconButton href={ALPHA_TELEGRAM_LINK} target="_blank" rel="noreferrer">
+          <TelegramGradient />
+        </IconButton>
+
+        <Typography>Stay in the loop for all the latest insights!</Typography>
+
+        <Button
+          variant="contained"
+          size="large"
+          href={ALPHA_TELEGRAM_LINK}
+          target="_blank"
+          rel="noreferrer"
+          className={css.gradientButton}
+        >
+          Join Telegram group
+        </Button>
+      </div>
+    </Container>
+  )
+}
+
+export default Roadmap
diff --git a/src/components/Safenet/Roadmap/styles.module.css b/src/components/Safenet/Roadmap/styles.module.css
new file mode 100644
index 00000000..fd78c1a0
--- /dev/null
+++ b/src/components/Safenet/Roadmap/styles.module.css
@@ -0,0 +1,125 @@
+.container {
+  margin-top: 300px;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.contentWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.title {
+  max-width: 1042px;
+  text-transform: uppercase;
+  text-align: center;
+
+  font-size: 40px;
+  line-height: 44px;
+}
+
+.titleGradient {
+  background: radial-gradient(129.11% 259.78% at 103.1% -21.2%, #ff5f00 0%, #ffd200 50%, #12ff80 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-style: italic;
+}
+
+.gradientButton {
+  border-radius: 12px;
+  background: radial-gradient(129.11% 259.78% at 103.1% -21.2%, #ff5f00 0%, #ffd200 50%, #12ff80 100%);
+}
+
+.gridContainer {
+  margin-top: 80px;
+  justify-content: center;
+  gap: 80px;
+}
+
+.blockItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.blockTitle {
+  font-size: 32px;
+  line-height: 36px;
+  text-transform: uppercase;
+
+  background: radial-gradient(129.11% 259.78% at 103.1% -21.2%, #ff5f00 0%, #ffd200 50%, #12ff80 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.blockText {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  align-items: center;
+  text-align: center;
+}
+
+.buttonWrapper {
+  margin-top: 70px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+  gap: 24px;
+  width: 214px;
+}
+
+.hook,
+.timelineImage {
+  display: none;
+}
+
+@media (min-width: 900px) {
+  .hook {
+    display: block;
+    position: absolute;
+    left: -260px;
+    top: 6px;
+  }
+
+  .title {
+    font-size: 56px;
+    line-height: 60px;
+  }
+
+  .timelineImage {
+    width: 100%;
+    margin-top: 108px;
+  }
+
+  .gridContainer {
+    margin-top: 40px;
+    justify-content: space-around;
+  }
+
+  .buttonWrapper {
+    width: 100%;
+  }
+}
+
+@media (min-width: 1200px) {
+  .hook {
+    left: -112px;
+  }
+}
+
+@media (min-width: 1630px) {
+  .hook {
+    left: 104px;
+  }
+}
diff --git a/src/components/Safenet/index.tsx b/src/components/Safenet/index.tsx
index efc76116..3b5ee916 100644
--- a/src/components/Safenet/index.tsx
+++ b/src/components/Safenet/index.tsx
@@ -1,6 +1,7 @@
 import ChainAbstraction from '@/components/Safenet/ChainAbstraction'
 import Hero from '@/components/Safenet/Hero'
 import Metadata from '@/components/Safenet/Metatags'
+import Roadmap from '@/components/Safenet/Roadmap'
 
 const Safenet = () => {
   return (
@@ -8,6 +9,7 @@ const Safenet = () => {
       <Metadata />
       <Hero />
       <ChainAbstraction />
+      <Roadmap />
     </div>
   )
 }