diff --git a/public/images/about/whitepaper.png b/public/images/about/whitepaper.png
new file mode 100644
index 0000000..90d5919
Binary files /dev/null and b/public/images/about/whitepaper.png differ
diff --git a/public/laconic-whitepaper.pdf b/public/laconic-whitepaper.pdf
new file mode 100644
index 0000000..67504e3
Binary files /dev/null and b/public/laconic-whitepaper.pdf differ
diff --git a/src/components/primitives/link/link.module.scss b/src/components/primitives/link/link.module.scss
index 9c102a9..4c003a2 100644
--- a/src/components/primitives/link/link.module.scss
+++ b/src/components/primitives/link/link.module.scss
@@ -38,7 +38,10 @@
       position: absolute;
       top: 100%;
       left: 0;
+      right: 0;
       opacity: 0;
+      width: 100%;
+      margin: auto;
       background-image: repeating-linear-gradient(
           0deg,
           currentcolor,
@@ -73,7 +76,6 @@
       background-position: 0 0, 0 0, 100% 0, 0 100%;
       background-repeat: no-repeat;
       background-size: 0 100%, 100% 0, 0 100%, 100% 2px;
-      width: 100%;
       height: tovw(1px, 'default', 1px);
       animation: border var(--duration-normal) linear infinite;
       content: '';
@@ -101,6 +103,8 @@
 
       &::before {
         opacity: 1;
+        width: 90%;
+        transition: width var(--duration-normal) var(--ease);
       }
     }
   }
diff --git a/src/components/sections/about/roadmap/index.tsx b/src/components/sections/about/roadmap/index.tsx
new file mode 100644
index 0000000..9949a8e
--- /dev/null
+++ b/src/components/sections/about/roadmap/index.tsx
@@ -0,0 +1,112 @@
+import Line from '~/components/icons/line'
+import { Container } from '~/components/layout/container'
+import Section from '~/components/layout/section'
+import Heading from '~/components/primitives/heading'
+import { useIsMobile } from '~/hooks/use-media'
+
+import s from './roadmap.module.scss'
+
+interface Props {
+  data: {
+    roadmapHeading: string
+    roadmapQuarter01: {
+      heading: string
+      details: string[]
+    }
+    roadmapQuarter02: {
+      heading: string
+      details: string[]
+    }
+    roadmapQuarter03: {
+      heading: string
+      details: string[]
+    }
+    roadmapQuarter04: {
+      heading: string
+      details: string[]
+    }
+  }
+}
+
+const Roadmap = ({ data }: Props) => {
+  const isMobile = useIsMobile()
+
+  return (
+    <Section className={s['section']} id="team">
+      <Container className={s['container']}>
+        <Heading as="h2" variant="lg">
+          {data?.roadmapHeading}
+        </Heading>
+        <div className={s.roadmap}>
+          <div className={s.block}>
+            <div>
+              <Line className={s['line']} height={135} />
+              <div className={s.dot} />
+              <Heading as="h3" variant="sm" font="tthoves">
+                {data?.roadmapQuarter01?.heading}
+              </Heading>
+              <ul>
+                {data?.roadmapQuarter01?.details.map((point, i) => (
+                  <li key={i}>{point}</li>
+                ))}
+              </ul>
+            </div>
+            <div>
+              <Line className={s['line']} height={135} />
+              <div className={s.dot} />
+              <Heading as="h3" variant="sm" font="tthoves">
+                {isMobile
+                  ? data?.roadmapQuarter02?.heading
+                  : data?.roadmapQuarter03?.heading}
+              </Heading>
+              <ul>
+                {isMobile
+                  ? data?.roadmapQuarter02?.details.map((point, i) => (
+                      <li key={i}>{point}</li>
+                    ))
+                  : data?.roadmapQuarter03?.details.map((point, i) => (
+                      <li key={i}>{point}</li>
+                    ))}
+              </ul>
+            </div>
+          </div>
+          <div className={s.separator} />
+          <div className={s.block}>
+            <div>
+              <Line className={s['line']} height={135} />
+              <div className={s.dot} />
+              <Heading as="h3" variant="sm" font="tthoves">
+                {isMobile
+                  ? data?.roadmapQuarter03?.heading
+                  : data?.roadmapQuarter02?.heading}
+              </Heading>
+              <ul>
+                {isMobile
+                  ? data?.roadmapQuarter03?.details.map((point, i) => (
+                      <li key={i}>{point}</li>
+                    ))
+                  : data?.roadmapQuarter02?.details.map((point, i) => (
+                      <li key={i}>{point}</li>
+                    ))}
+              </ul>
+            </div>
+            <div>
+              <Line className={s['line']} height={135} />
+              <div className={s.dot} />
+              <Heading as="h3" variant="sm" font="tthoves">
+                {data?.roadmapQuarter04?.heading}
+              </Heading>
+              <ul>
+                {data?.roadmapQuarter04?.details.map((point, i) => (
+                  <li key={i}>{point}</li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </Section>
+  )
+}
+
+export default Roadmap
diff --git a/src/components/sections/about/roadmap/roadmap.module.scss b/src/components/sections/about/roadmap/roadmap.module.scss
new file mode 100644
index 0000000..d9c4999
--- /dev/null
+++ b/src/components/sections/about/roadmap/roadmap.module.scss
@@ -0,0 +1,205 @@
+@import '~/css/helpers';
+
+.section {
+  @include respond-to('mobile') {
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  position: relative;
+  margin: tovw(135px, 'default', 70px) 0;
+  padding: tovw(104px, 'default', 95px) 0;
+
+  .container {
+    @include respond-to('mobile') {
+      padding: 0 tovw(56px, 'default', 32px);
+    }
+
+    display: flex;
+    flex-direction: column;
+
+    h2 {
+      text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
+    }
+
+    .roadmap {
+      @include respond-to('mobile') {
+        position: relative;
+        margin: 0;
+        margin-top: tovw(70px, 'mobile', 70px);
+        padding-left: tovw(15px, 'mobile', 30px);
+      }
+
+      width: 100%;
+      margin-top: tovw(110px, 'default', 60px);
+
+      .block {
+        @include respond-to('mobile') {
+          grid-template-rows: repeat(2, 1fr);
+          grid-template-columns: 1fr;
+          min-height: tovw(220px, 'mobile', 480px);
+        }
+
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        min-height: 230px;
+
+        ul {
+          margin-bottom: 0;
+          padding-left: tovw(20px, 'default', 18px);
+          font-family: var(--font-tt-hoves);
+          font-size: tovw(18px, 'default', 15px);
+
+          li {
+            padding: tovw(4px) 0;
+          }
+        }
+
+        > div {
+          @include respond-to('mobile') {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+          }
+
+          position: relative;
+          width: tovw(320px, 'default', 160px);
+
+          .line {
+            @include respond-to('mobile') {
+              position: relative;
+              transform: rotate(270deg);
+              margin: 0 0 tovw(-50px, 'mobile', -45px)
+                tovw(25px, 'mobile', 55px);
+              align-self: flex-start;
+            }
+
+            position: absolute;
+            margin-left: tovw(-50px, 'default', -105px);
+            margin-top: tovw(35px, 'default', 30px);
+            width: tovw(4px, 'default', 3px);
+            transform: scaleY(125%);
+          }
+
+          .dot {
+            position: absolute;
+            width: tovw(22px, 'default', 22px);
+            height: tovw(22px, 'default', 22px);
+            left: tovw(-59px, 'default', -147px);
+            background-color: var(--color-white);
+            border-radius: 50%;
+            box-shadow: 0px 0px tovw(16px, 'default', 16px) var(--color-white);
+          }
+        }
+
+        &:first-child {
+          @include respond-to('mobile') {
+            padding-bottom: 0;
+            margin-top: tovw(-25px, 'mobile', -25px);
+          }
+
+          padding-bottom: tovw(100px, 'default', 20px);
+
+          .line {
+            @include respond-to('mobile') {
+              transform: rotate(270deg);
+            }
+
+            transform: rotate(180deg) scaleY(135%);
+          }
+
+          .dot {
+            @include respond-to('mobile') {
+              position: absolute;
+              top: tovw(14px, 'mobile', 55px);
+              left: tovw(-52px, 'mobile', -41px);
+            }
+
+            top: tovw(255px, 'default', 220px);
+          }
+
+          div:nth-child(2) {
+            @include respond-to('mobile') {
+              grid-area: 2 / 1 / 3 / 2;
+            }
+
+            grid-area: 1 / 3 / 1 / 4;
+          }
+        }
+
+        &:nth-child(3) {
+          @include respond-to('mobile') {
+            padding-top: 0;
+          }
+
+          position: relative;
+          padding-top: tovw(100px, 'default', 20px);
+
+          .line {
+            @include respond-to('mobile') {
+              bottom: unset;
+            }
+
+            bottom: tovw(30px, 'default', 30px);
+          }
+
+          .dot {
+            @include respond-to('mobile') {
+              position: absolute;
+              top: tovw(14px, 'mobile', 56px);
+              left: tovw(-52px, 'mobile', -41px);
+            }
+
+            bottom: tovw(262px, 'default', 219px);
+          }
+
+          div:first-child {
+            @include respond-to('mobile') {
+              grid-area: 1 / 1 / 2 / 2;
+            }
+
+            grid-area: 1 / 2 / 1 / 3;
+          }
+
+          div:nth-child(2) {
+            @include respond-to('mobile') {
+              grid-area: 2 / 1 / 3 / 2;
+            }
+
+            grid-area: 1 / 4 / 1 / 5;
+          }
+        }
+      }
+
+      .separator {
+        @include respond-to('mobile') {
+          position: absolute;
+          width: unset;
+          height: calc(100% + tovw(260px));
+          left: 0;
+          top: 0;
+          transform: translateY(tovw(-130px));
+          border-bottom: unset;
+          border-left: 2px solid var(--color-white);
+          border-image-source: linear-gradient(
+            180deg,
+            rgb(255 255 255 / 1) 0%,
+            rgb(255 255 255 / 1) 85%,
+            rgb(4 4 4 / 1) 100%
+          );
+        }
+
+        width: calc(100% + tovw(260px));
+        transform: translateX(tovw(-130px));
+        border-bottom: 2px solid var(--color-white);
+        border-image-slice: 1;
+        border-image-source: linear-gradient(
+          90deg,
+          rgb(255 255 255 / 1) 0%,
+          rgb(255 255 255 / 1) 85%,
+          rgb(4 4 4 / 1) 100%
+        );
+      }
+    }
+  }
+}
diff --git a/src/components/sections/about/whitepaper/index.tsx b/src/components/sections/about/whitepaper/index.tsx
new file mode 100644
index 0000000..099ad4d
--- /dev/null
+++ b/src/components/sections/about/whitepaper/index.tsx
@@ -0,0 +1,46 @@
+import { Container } from '~/components/layout/container'
+import Section from '~/components/layout/section'
+import Heading from '~/components/primitives/heading'
+import Link from '~/components/primitives/link'
+
+import s from './whitepaper.module.scss'
+
+interface Props {
+  data: {
+    whitepaperHeading: string
+    whitepaperLine: string
+    whitepaperCtaText: string
+    whitepaperCtaLink: string
+    whitepaperImage: {
+      url: string
+    }
+  }
+}
+
+const Whitepaper = ({ data }: Props) => {
+  return (
+    <Section className={s['section']}>
+      <Container className={s['container']}>
+        <div>
+          <Heading as="h2" variant="lg">
+            {data?.whitepaperHeading}
+          </Heading>
+          <p>
+            {data?.whitepaperLine}
+            <Link className={s.link} href={data?.whitepaperCtaLink}>
+              {data?.whitepaperCtaText}
+            </Link>
+          </p>
+        </div>
+        <img
+          className={s.whitepaper__img}
+          src={data?.whitepaperImage?.url}
+          alt="whitepaper"
+        />
+        <div className={s['gradient']} />
+      </Container>
+    </Section>
+  )
+}
+
+export default Whitepaper
diff --git a/src/components/sections/about/whitepaper/whitepaper.module.scss b/src/components/sections/about/whitepaper/whitepaper.module.scss
new file mode 100644
index 0000000..dcccb36
--- /dev/null
+++ b/src/components/sections/about/whitepaper/whitepaper.module.scss
@@ -0,0 +1,87 @@
+@import '~/css/helpers';
+
+.section {
+  @include respond-to('mobile') {
+    margin-top: 0;
+    padding: tovw(30px, 'mobile') 0;
+  }
+
+  position: relative;
+  margin: tovw(135px, 'default', 70px) 0;
+  padding: tovw(104px, 'default', 95px) 0;
+
+  .container {
+    @include respond-to('mobile') {
+      padding: 0 tovw(56px, 'default', 16px);
+    }
+
+    display: flex;
+    place-content: center;
+    align-items: center;
+
+    div:first-child {
+      @include respond-to('mobile') {
+        width: 100%;
+        max-width: 500px;
+      }
+
+      text-align: center;
+      width: tovw(780px, 'default', 550px);
+      position: absolute;
+
+      h2 {
+        text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
+      }
+
+      p {
+        line-height: 152%;
+        font-size: tovw(30px, 'default', 18px);
+        padding-top: tovw(68px, 'default', 20px);
+        margin: 0;
+      }
+    }
+
+    .link {
+      text-transform: unset;
+      color: var(--color-grey-light);
+      font-family: var(--default);
+      font-size: tovw(30px, 'default', 18px);
+    }
+
+    .whitepaper__img {
+      @include respond-to('mobile') {
+        width: 240%;
+        padding-top: tovw(60px, 'mobile', 60px);
+      }
+
+      padding-top: tovw(130px, 'default', 60px);
+      width: tovw(1300px, 'default', 400px);
+    }
+
+    .gradient {
+      @include respond-to('mobile') {
+        bottom: 32%;
+        height: tovw(260px, 'mobile', 320px);
+      }
+
+      position: absolute;
+      right: 0;
+      bottom: tovw(245px, 'default', 170px);
+      left: 0;
+      opacity: 0.3;
+      margin-left: 0;
+      background: linear-gradient(
+        180deg,
+        rgb(229 229 229 / 0) 0%,
+        rgb(241 241 241 / 0.4) 50%,
+        rgb(241 241 241 / 0) 95%
+      );
+      width: 100%;
+      height: tovw(900px, 'default', 400px);
+      content: '';
+      pointer-events: none;
+      user-select: none;
+      z-index: -1;
+    }
+  }
+}
diff --git a/src/hooks/use-media.ts b/src/hooks/use-media.ts
index 9f105d9..5b0941b 100644
--- a/src/hooks/use-media.ts
+++ b/src/hooks/use-media.ts
@@ -33,5 +33,5 @@ export const useMedia = (mediaQuery: string, initialValue?: boolean) => {
 }
 
 export const useIsMobile = () => {
-  return useMedia('(max-width: 767px)')
+  return useMedia('(max-width: 900px)')
 }
diff --git a/src/lib/cms/queries/about.js b/src/lib/cms/queries/about.js
index 38bb7f7..6f6aed6 100644
--- a/src/lib/cms/queries/about.js
+++ b/src/lib/cms/queries/about.js
@@ -23,6 +23,34 @@ const AboutTeam = {
         }`
 }
 
+const AboutWhitepaper = {
+  query: `
+        {
+            aboutPage {
+                whitepaperCtaLink
+                whitepaperCtaText
+                whitepaperHeading
+                whitepaperLine
+                whitepaperImage {
+                    url
+                }
+            }
+        }`
+}
+
+const AboutRoadmap = {
+  query: `
+        {
+            aboutPage {
+                roadmapHeading
+                roadmapQuarter01
+                roadmapQuarter02
+                roadmapQuarter03
+                roadmapQuarter04
+            }
+        }`
+}
+
 const Teams = {
   query: `
         {
@@ -41,4 +69,4 @@ const Teams = {
         }`
 }
 
-export { AboutHero, AboutTeam, Teams }
+export { AboutHero, AboutRoadmap, AboutTeam, AboutWhitepaper, Teams }
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index e3a57d2..32e750f 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -8,8 +8,16 @@ import { Meta } from '~/components/common/meta'
 import { PageLayout } from '~/components/layout/page'
 import Hero from '~/components/sections/about/hero'
 import Related from '~/components/sections/about/related'
+import Roadmap from '~/components/sections/about/roadmap'
 import Team from '~/components/sections/about/team'
-import { AboutHero, AboutTeam, Teams } from '~/lib/cms/queries/about'
+import Whitepaper from '~/components/sections/about/whitepaper'
+import {
+  AboutHero,
+  AboutRoadmap,
+  AboutTeam,
+  AboutWhitepaper,
+  Teams
+} from '~/lib/cms/queries/about'
 
 import { request } from '../lib/datocms'
 
@@ -21,11 +29,14 @@ export const getStaticProps = async () => {
 
   const heroBlogPost = allBlogPosts.data[0]
 
-  const [heroData, teamsData, teamsPageData] = await Promise.all([
-    request(AboutHero),
-    request(Teams),
-    request(AboutTeam)
-  ])
+  const [heroData, teamsData, teamsPageData, whitepaperData, roadmapData] =
+    await Promise.all([
+      request(AboutHero),
+      request(Teams),
+      request(AboutTeam),
+      request(AboutWhitepaper),
+      request(AboutRoadmap)
+    ])
 
   return {
     props: {
@@ -35,6 +46,8 @@ export const getStaticProps = async () => {
       },
       heroData: heroData?.aboutPage,
       teamsData: teamsData?.allTeams,
+      whitepaperData: whitepaperData?.aboutPage,
+      roadmapData: roadmapData?.aboutPage,
       teamsPageData: teamsPageData?.aboutPage,
       categories,
       page:
@@ -50,18 +63,17 @@ const About = ({
   initialBlogPosts,
   heroData,
   teamsData,
-  teamsPageData
+  teamsPageData,
+  roadmapData,
+  whitepaperData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
     <PageLayout>
-      <Meta
-        preload={[
-          { href: '/videos/banner-about.mp4', as: 'fetch' },
-          { href: '/videos/banner-about.webm', as: 'fetch' }
-        ]}
-      />
+      <Meta />
       <Hero data={heroData} />
       <Team teamData={teamsData} data={teamsPageData} />
+      <Whitepaper data={whitepaperData} />
+      <Roadmap data={roadmapData} />
       <Related data={initialBlogPosts?.data} />
     </PageLayout>
   )