diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx
index 2d51c88a..02bc30db 100644
--- a/packages/docusaurus-playground/src/pages/index.mdx
+++ b/packages/docusaurus-playground/src/pages/index.mdx
@@ -180,102 +180,64 @@ import * as challengesData from '/generated/challenges.json'
 </Box>
 
 <Box top={{ xs: 144, lg: 216 }}>
-  <SectionHeader
-    title="Development Roadmap"
-    description="Codex is currently in its first proof-of-concept iteration and aims to release its beta version, Katana, before the end of Q4 2023."
+  <Roadmap
+    title="Roadmap"
+    description="Nomos is currently in its first proof-of-concept iteration and aims to release its beta version, Katana, before the end of Q4 2023."
     bottom={{ xs: '4rem', lg: '7.25rem' }}
+    timeline={[
+      {
+        period: [2013],
+        description: "Ethereum's Whisper unveiled as web3 messaging protocol",
+      },
+      {
+        period: [2018],
+        description: 'Status establishes Vac to R&D Whisper improvements',
+      },
+      {
+        period: [2020],
+        description: 'Waku v1 replaces Whisper in Status app',
+      },
+      {
+        period: [2021, 'Q1'],
+        description: 'Waku v2 specs and PoC released with RLN Relay',
+      },
+      {
+        period: [2021, 'Q2'],
+        description: 'JS-Waku (for browsers) and Go-Waku released',
+      },
+      {
+        period: [2022, 'Q3'],
+        description: 'DNS Discovery added, plus availability in more languages',
+      },
+      {
+        period: [2022, 'Q4'],
+        description:
+          'SQLite for Waku Store, RLN Relay testnet debuts at DevCon',
+      },
+      {
+        period: [2023, 'Q2'],
+        description: 'Relay sharding, opt-in spam-protected topic',
+      },
+      {
+        period: [2023, 'Q4'],
+        description: 'Auto-sharding, DoS protection, bandwidth capping',
+      },
+      {
+        period: [2024, 'Q1'],
+        description: 'Auto-sharding, DoS protection, bandwidth capping',
+      },
+      {
+        period: [2025, '+'],
+        description: 'Operator Incentivization, use-case specific SDKs',
+      },
+    ]}
   />
-  <Grid
-    xs={{ cols: 6, wrap: false, gap: '0 1rem' }}
-    actions={
-      <CallToActionButton
-        style={{ marginTop: 0 }}
-        size="small"
-        variant="outlined"
-        href="/about"
-      >
-        Read more
-      </CallToActionButton>
-    }
-  >
-    <Grid.Item>
-      <TimelineItem
-        period="2021"
-        borderStyle="dashed"
-        description="Codex project begins"
-      />
-    </Grid.Item>
-    <Grid.Item>
-      <TimelineItem
-        period="2022"
-        borderStyle="solid"
-        description=" PoC-1 “Dagger” demos"
-      />
-    </Grid.Item>
-    <Grid.Item>
-      <TimelineItem
-        period="2022"
-        borderStyle="dashed"
-        description="Marketplace redesign, zk-proofs research"
-      />
-    </Grid.Item>
-    <Grid.Item>
-      <TimelineItem
-        period="2023"
-        borderStyle="solid"
-        description="PoC-2 “Scimitar” demos"
-      />
-    </Grid.Item>
-    <Grid.Item>
-      <TimelineItem
-        period="2023 Q3"
-        borderStyle="solid"
-        description="PoC-3 demo scheduled"
-      />
-    </Grid.Item>
-    <Grid.Item>
-      <TimelineItem
-        period="2023 Q4"
-        borderStyle="dashed"
-        description="V1 “Katana” release scheduled"
-      />
-    </Grid.Item>
-    <Grid.Item>
-      <TimelineItem
-        period="2024"
-        borderStyle="solid"
-        description="L2 aggregator node development"
-      />
-    </Grid.Item>
-    <Grid.Item>
-      <TimelineItem
-        period="2024"
-        borderStyle="dashed"
-        description="Payment channels/bandwidth incentives"
-      />
-    </Grid.Item>
-    <Grid.Item>
-      <TimelineItem
-        period="2025"
-        borderStyle="solid"
-        description="V2 with improved incentives and repair"
-      />
-    </Grid.Item>
-    <Grid.Item>
-      <TimelineItem
-        period="2025"
-        description="Public mainnet release"
-        borderStyle="none"
-      />
-    </Grid.Item>
-  </Grid>
 </Box>
 
 <Box top={{ xs: 144, lg: 216 }}>
-  <CallToActionSection
-    title="User Endorsements"
-  />
+  <CallToActionSection title="User Endorsements" />
 </Box>
+
 <Box top={{ xs: 64, lg: 100 }}>
   <Showcase
     id="showcase"
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx
index 7542e782..99e9ca2c 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx
@@ -14,10 +14,16 @@ import { GridItem } from './GridItem'
 
 export type GridProps = React.ComponentProps<typeof GridRoot> & {
   actions?: React.ReactNode
+  leftLabel?: string
+  rightLabel?: string
+  spacingButtons?: boolean
 }
 
 export const Grid: { Item: typeof GridItem } & React.FC<GridProps> = ({
   actions,
+  leftLabel = '',
+  rightLabel = '',
+  spacingButtons = false,
   children,
   ...props
 }) => {
@@ -40,12 +46,41 @@ export const Grid: { Item: typeof GridItem } & React.FC<GridProps> = ({
     <GridRoot {...props} className={clsx(props.className, 'mdx-grid')}>
       <div className="mdx-grid__actions">
         {actions}
-        <div className="mdx-grid__scroll">
+        <div
+          className={clsx(
+            'mdx-grid__scroll',
+            spacingButtons && 'mdx-grid__scroll--spacing-buttons',
+          )}
+        >
           <IconButtonGroup size="small" color="primary">
-            <IconButton size="small" onClick={scroll.bind(null, -1)}>
+            <IconButton
+              className={clsx(
+                'mdx-grid__scroll-button',
+                leftLabel?.length && 'mdx-grid__scroll-button--with-label',
+              )}
+              size="small"
+              onClick={scroll.bind(null, -1)}
+            >
               <ChevronLeftIcon />
+              {leftLabel.length ? (
+                <span className="mdx-grid__scroll-button-label">
+                  {leftLabel}
+                </span>
+              ) : null}
             </IconButton>
-            <IconButton size="small" onClick={scroll.bind(null, 1)}>
+            <IconButton
+              className={clsx(
+                'mdx-grid__scroll-button',
+                rightLabel?.length && 'mdx-grid__scroll-button--with-label',
+              )}
+              size="small"
+              onClick={scroll.bind(null, +1)}
+            >
+              {rightLabel.length ? (
+                <span className="mdx-grid__scroll-button-label">
+                  {rightLabel}
+                </span>
+              ) : null}
               <ChevronRightIcon />
             </IconButton>
           </IconButtonGroup>
@@ -64,6 +99,7 @@ type GridBreakpointProps = {
   cols?: number
   wrap?: boolean
   gap?: string | number
+  scrollButtons?: boolean
 }
 
 const GridRoot = styled.div<{
@@ -79,6 +115,24 @@ const GridRoot = styled.div<{
     display: flex;
     flex-direction: row;
     gap: 0 1rem;
+    margin-left: auto;
+  }
+
+  .mdx-grid__scroll--spacing-buttons {
+    width: 100%;
+
+    > div {
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    > div > button:not(:last-child) {
+      border-right: 1px solid rgb(var(--lsd-border-primary)) !important;
+    }
+  }
+
+  .mdx-grid__scroll-button {
+    display: flex;
   }
 
   .mdx-grid__content {
@@ -95,7 +149,7 @@ const GridRoot = styled.div<{
     gap: 1rem;
 
     & > * {
-      margin-bottom: 2rem;
+      margin-bottom: 3rem;
     }
   }
 
@@ -148,9 +202,38 @@ const GridRoot = styled.div<{
             scroll-snap-type: x mandatory;
           }
         `}
+
+        ${bp.scrollButtons === false &&
+        css`
+          .mdx-grid__scroll {
+            display: none;
+          }
+        `}
       `)
     })}
 
+  ${(props) =>
+    lsdUtils.responsive(
+      props.theme as any,
+      'md',
+      'up',
+    )(css`
+      .mdx-grid__scroll-button--with-label {
+        width: auto;
+        min-width: 83px;
+        padding: 5px 11px 5px 9px;
+        gap: 12px;
+
+        &:first-of-type {
+          justify-content: flex-start;
+        }
+
+        &:last-of-type {
+          justify-content: flex-start;
+        }
+      }
+    `)}
+
   ${(props) =>
     lsdUtils.responsive(
       props.theme as any,
@@ -158,7 +241,17 @@ const GridRoot = styled.div<{
       'down',
     )(css`
       .mdx-grid__scroll {
-        display: none !important;
+        & > div {
+          justify-content: flex-end;
+
+          > button:not(:last-child) {
+            border-right: none !important;
+          }
+        }
+      }
+
+      .mdx-grid__scroll-button-label {
+        display: none;
       }
     `)}
 `
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx
index 9f5b4d12..95921f7c 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx
@@ -11,28 +11,67 @@ export type RoadmapProps = Omit<
 > & {
   title: React.ReactNode
   description?: React.ReactNode
-  alignment?: 'top' | 'bottom'
   timeline?: Partial<TimelineItemProps>[]
 }
 
 export const Roadmap: React.FC<RoadmapProps> = ({
   title,
   description,
-  alignment = 'bottom',
   timeline = [],
   className,
   children,
   ...props
 }) => {
+  const currentYear = new Date().getFullYear()
+
+  const handleBorderStyle = (item, index, array) => {
+    if (index === array.length - 1) {
+      return 'none'
+    }
+
+    const currentYear = item.period[0]
+    const nextYear = array[index + 1].period[0]
+
+    if (currentYear === nextYear) {
+      return 'solid'
+    }
+
+    return 'dashed'
+  }
+  const getCurrentQuarter = () => {
+    const month = new Date().getMonth()
+    return 'Q' + Math.ceil((month + 1) / 3)
+  }
+
+  const handlePeriodStyle = (period: TimelineItemProps['period']) => {
+    const currentYear = new Date().getFullYear()
+    const currentQuarter = getCurrentQuarter()
+
+    let year, additional
+
+    if (Array.isArray(period)) {
+      ;[year, additional] = period
+    } else {
+      year = period
+    }
+
+    if (year < currentYear) {
+      return 'filled'
+    } else if (year > currentYear) {
+      return 'transparent'
+    } else {
+      if (!additional || additional === '+') {
+        return 'filled'
+      }
+      if (additional <= currentQuarter) {
+        return 'filled'
+      }
+      return 'transparent'
+    }
+  }
+
   return (
-    <div
-      className={clsx(
-        className,
-        'mdx-roadmap',
-        `mdx-roadmap--${alignment}-aligned`,
-      )}
-      {...props}
-    >
+    <div className={clsx(className, 'mdx-roadmap')} {...props}>
       <div className="mdx-roadmap__header">
         <Typography component="h2" variant="h6">
           {title}
@@ -47,17 +86,20 @@ export const Roadmap: React.FC<RoadmapProps> = ({
       {timeline.length > 0 && (
         <Grid
           className="mdx-roadmap__timeline"
-          xs={{ cols: 6, wrap: false, gap: '0 1rem' }}
+          xs={{ cols: 6, wrap: false, gap: '0 1rem', scrollButtons: true }}
+          spacingButtons={true}
+          leftLabel="Past"
+          rightLabel="Future"
         >
           {timeline.map((item, index) => (
             <Grid.Item key={index} xs={1}>
               <TimelineItem
                 {...item}
-                index={item.index ?? index + 1}
-                period={item.period}
+                index={index}
+                period={item.period ?? currentYear}
                 description={item.description}
-                alignment={alignment}
-                borderStyle={item.borderStyle}
+                borderStyle={handleBorderStyle(item, index, timeline)}
+                periodStyle={handlePeriodStyle(item?.period ?? currentYear)}
                 className={clsx('mdx-roadmap__timeline-item', item.className)}
               />
             </Grid.Item>
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss
index a323a79f..1dbc631e 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss
@@ -3,7 +3,8 @@
 
 .mdx-timeline-item {
   width: 236px;
-  height: 100%;
+  min-height: 306px;
+  justify-content: space-between;
   gap: 1rem;
   flex: 0 0 auto;
   display: flex;
@@ -45,8 +46,18 @@
   padding: 3px 12px;
   display: inline-block;
   border-radius: 10rem;
+}
+
+.mdx-timeline-item__period--filled {
   color: rgb(var(--lsd-text-secondary)) !important;
   background-color: rgb(var(--lsd-surface-secondary));
+  border: 1px solid rgb(var(--lsd-border-secondary));
+}
+
+.mdx-timeline-item__period--transparent {
+  color: rgb(var(--lsd-text-primary)) !important;
+  background-color: rgb(var(--lsd-surface-primary));
+  border: 1px solid rgb(var(--lsd-border-primary));
 }
 
 .mdx-timeline-item__item:last-child {
@@ -55,12 +66,8 @@
   }
 }
 
-.mdx-timeline-item--top-aligned {
-}
-
-.mdx-timeline-item--bottom-aligned {
-  min-height: 308px;
-  justify-content: space-between;
+.mdx-timeline-item__description {
+  margin-top: auto;
 }
 
 @include utils.responsive('lg', 'down') {
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx
index 76d8ddda..c19f8af7 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx
@@ -9,14 +9,32 @@ export type TimelineItemProps = Omit<
 > & {
   /** The index or label of the timeline item. */
   index: React.ReactNode
-  /** The alignment of the timeline item, either 'top' or 'bottom'. (Optional, default: 'top') */
-  alignment?: 'top' | 'bottom'
   /** The period or time frame associated with the timeline item. e.g., `2023 Q3` */
-  period: React.ReactNode
+  period: [number, 'Q1' | 'Q2' | 'Q3' | 'Q4' | '+'] | number
   /** The description or content of the timeline item. */
   description: React.ReactNode
   /** The border style for the timeline item */
   borderStyle?: 'solid' | 'dashed' | 'none'
+  /** The period style for the timeline item */
+  periodStyle?: 'transparent' | 'filled'
+}
+
+const formatPeriod = (input: TimelineItemProps['period']) => {
+  if (Array.isArray(input) && input.length > 0) {
+    let result = input[0].toString()
+
+    if (input.length > 1) {
+      if (input[1] === '+') {
+        result += '+'
+      } else {
+        result += ' ' + input[1]
+      }
+    }
+
+    return result
+  } else {
+    return ''
+  }
 }
 
 /**
@@ -65,12 +83,13 @@ export type TimelineItemProps = Omit<
  * </Box>
  * ```
  */
+
 export const TimelineItem: React.FC<TimelineItemProps> = ({
   index,
   period,
   description,
-  alignment = 'top',
   borderStyle,
+  periodStyle,
   className,
   children,
   ...props
@@ -80,7 +99,6 @@ export const TimelineItem: React.FC<TimelineItemProps> = ({
       className={clsx(
         className,
         'mdx-timeline-item',
-        `mdx-timeline-item--${alignment}-aligned`,
         borderStyle === 'dashed' && 'mdx-timeline-item--border-dashed',
       )}
       {...props}
@@ -93,9 +111,12 @@ export const TimelineItem: React.FC<TimelineItemProps> = ({
           <Typography
             variant="subtitle1"
             component="span"
-            className="mdx-timeline-item__period"
+            className={clsx(
+              'mdx-timeline-item__period',
+              `mdx-timeline-item__period--${periodStyle}`,
+            )}
           >
-            {period}
+            {formatPeriod(period)}
           </Typography>
         </div>
         <Typography
diff --git a/yarn.lock b/yarn.lock
index 7ef191d4..96436ca9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,53 @@
 # yarn lockfile v1
 
 
+"@acid-info/logos-docusaurus-theme@1.0.0-alpha.121":
+  version "1.0.0-alpha.121"
+  resolved "https://registry.yarnpkg.com/@acid-info/logos-docusaurus-theme/-/logos-docusaurus-theme-1.0.0-alpha.121.tgz#8086b475acf4a9885d7a3d48057b8add22602db5"
+  integrity sha512-0CFVyl0zjv88sF0xBkcPxJg5CwKN59IAghUpK4L0Y0Yb5GHA3xBY555yEHhorboPJ1OO6Xma0n0nxTR4es9dpQ==
+  dependencies:
+    "@acid-info/docusaurus-og" "^1.0.0-alpha.111"
+    "@acid-info/lsd-react" "^0.1.0-alpha.21"
+    "@docusaurus/core" "^2.4.1"
+    "@docusaurus/mdx-loader" "^2.4.1"
+    "@docusaurus/module-type-aliases" "^2.4.1"
+    "@docusaurus/plugin-content-blog" "^2.4.1"
+    "@docusaurus/plugin-content-docs" "^2.4.1"
+    "@docusaurus/plugin-content-pages" "^2.4.1"
+    "@docusaurus/theme-classic" "^2.4.1"
+    "@docusaurus/theme-common" "^2.4.1"
+    "@docusaurus/theme-mermaid" "^2.4.1"
+    "@docusaurus/theme-translations" "^2.4.1"
+    "@docusaurus/types" "^2.4.1"
+    "@docusaurus/utils" "^2.4.1"
+    "@docusaurus/utils-common" "^2.4.1"
+    "@docusaurus/utils-validation" "^2.4.1"
+    "@emotion/react" "^11.11.0"
+    "@emotion/styled" "^11.11.0"
+    "@mdx-js/react" "^1.6.22"
+    "@react-three/drei" "8.20.2"
+    "@react-three/fiber" "6.2.3"
+    "@tryghost/content-api" "^1.11.4"
+    axios "^1.4.0"
+    boolean "^3.2.0"
+    clsx "^1.2.1"
+    copy-text-to-clipboard "^3.0.1"
+    copy-to-clipboard "^3.3.2"
+    date-fns "^2.30.0"
+    docusaurus-plugin-sass "^0.2.3"
+    dotenv "^16.0.3"
+    lodash "^4.17.21"
+    object-hash "^3.0.0"
+    prism-react-renderer "^1.3.5"
+    react "^17.0.2"
+    react-dom "^17.0.2"
+    react-quick-pinch-zoom "^4.9.0"
+    react-use "^17.4.0"
+    sharp "^0.32.1"
+    three "^0.152.2"
+    three-stdlib "^2.23.4"
+    utility-types "^3.10.0"
+
 "@acid-info/lsd-react@^0.1.0-alpha.21":
   version "0.1.0-alpha.21"
   resolved "https://registry.yarnpkg.com/@acid-info/lsd-react/-/lsd-react-0.1.0-alpha.21.tgz#3a6a6862bc492521197ef354795f1b1fe9bceffe"