diff --git a/public/images/hero-mobile.png b/public/images/hero-mobile.png
new file mode 100644
index 0000000..9f56b4a
Binary files /dev/null and b/public/images/hero-mobile.png differ
diff --git a/src/components/common/footer/footer.module.scss b/src/components/common/footer/footer.module.scss
index 463d8e9..0767c6e 100644
--- a/src/components/common/footer/footer.module.scss
+++ b/src/components/common/footer/footer.module.scss
@@ -63,18 +63,6 @@
       height: 100%;
       pointer-events: none;
       user-select: none;
-
-      &::after {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        z-index: -1;
-        background: radial-gradient(circle, transparent 0, #fdbb2d 100%);
-        height: calc(var(--vh) * 63);
-        content: '';
-        filter: blur(30px);
-      }
     }
   }
 
diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx
index d632700..fabe25b 100644
--- a/src/components/common/footer/index.tsx
+++ b/src/components/common/footer/index.tsx
@@ -21,10 +21,10 @@ export const Footer = () => {
     <>
       <Section className={s['pre__footer--section']}>
         <video
-          autoPlay
+          // autoPlay
           className={clsx('hide-on-mobile', s['video'])}
           controls={false}
-          loop
+          // loop
           muted
           preload="true"
         >
diff --git a/src/components/icons/arrow.tsx b/src/components/icons/arrow.tsx
index 8089b97..6c184b8 100644
--- a/src/components/icons/arrow.tsx
+++ b/src/components/icons/arrow.tsx
@@ -25,11 +25,20 @@ const ArrowDotted = ({
     <svg
       className={className}
       fill="none"
-      viewBox="0 0 42 14"
+      viewBox="0 0 18 26"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="m1 35 6 6 6-6" stroke={fill || '#fff'} />
-      <path d="M7 41V0" stroke={fill || '#fff'} strokeDasharray="2 2" />
+      <path
+        d="m1 16 8 8 8-8"
+        stroke={fill || 'var(--color-white)'}
+        strokeWidth="1.5"
+      />
+      <path
+        d="M9 24V0"
+        stroke={fill || 'var(--color-white)'}
+        strokeWidth="1.5"
+        strokeDasharray="4 4"
+      />
     </svg>
   )
 }
diff --git a/src/components/icons/flag.tsx b/src/components/icons/flag.tsx
new file mode 100644
index 0000000..c345b3d
--- /dev/null
+++ b/src/components/icons/flag.tsx
@@ -0,0 +1,15 @@
+const Flag = ({ className, fill }: { className?: string; fill?: string }) => {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      viewBox="0 0 36 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path fill={fill || 'var(--color-white)'} d="M0 0h36v20H0z" />
+      <path stroke="#040404" strokeWidth="2" d="M0 7h36M9 0v20" />
+    </svg>
+  )
+}
+
+export default Flag
diff --git a/src/components/icons/line.tsx b/src/components/icons/line.tsx
new file mode 100644
index 0000000..8f54cf7
--- /dev/null
+++ b/src/components/icons/line.tsx
@@ -0,0 +1,27 @@
+const Line = ({ className, fill }: { className?: string; fill?: string }) => {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      viewBox="0 0 3 72"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path stroke="url(#heroline)" strokeWidth="3" d="M1.5 0v72" />
+      <defs>
+        <linearGradient
+          id="heroline"
+          x1="0"
+          y1="0"
+          x2="0"
+          y2="72"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={fill || 'var(--color-white)'} stopOpacity="0" />
+          <stop offset="1" stopColor={fill || 'var(--color-white)'} />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default Line
diff --git a/src/components/layout/section/section.module.scss b/src/components/layout/section/section.module.scss
index 7f5f0c3..957b361 100644
--- a/src/components/layout/section/section.module.scss
+++ b/src/components/layout/section/section.module.scss
@@ -1,30 +1,14 @@
 @import '~/css/helpers';
 
-.base:not(.variant-unstyled) {
+.base {
   position: relative;
   overflow: hidden;
-}
-
-.variant-stripes,
-.variant-stripes-center {
-  background-color: theme('colors.pink');
-  overflow: hidden;
-}
-
-.stripesBase {
-  top: tovw(-524px);
-  left: tovw(-342px);
-  width: tovw(2605px, 'desktop-large');
-  height: tovw(2460px, 'desktop-large');
-
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
+  padding: 0 tovw(56px, 'default', 16px);
 }
 
 .children {
-  z-index: 1;
   position: relative;
+  z-index: 1;
   width: 100%;
   height: 100%;
 }
diff --git a/src/components/primitives/button/button.module.scss b/src/components/primitives/button/button.module.scss
index ccf1c47..78bf377 100644
--- a/src/components/primitives/button/button.module.scss
+++ b/src/components/primitives/button/button.module.scss
@@ -7,12 +7,12 @@
   border-radius: tovw(4px);
   background: transparent;
   cursor: pointer;
-  padding: tovw(16px, 'default', 10px) tovw(32px, 'default', 14px);
+  padding: tovw(16px, 'default', 16px) tovw(32px, 'default', 14px);
   text-transform: uppercase;
   line-height: 1;
   color: var(--color-white);
   font-family: var(--font-dm-mono);
-  font-size: tovw(18px, 'default', 14px);
+  font-size: tovw(18px, 'default', 18px);
   appearance: none;
 
   &:disabled {
diff --git a/src/components/primitives/heading/heading.module.scss b/src/components/primitives/heading/heading.module.scss
index 1ffe3e5..bc6c11c 100644
--- a/src/components/primitives/heading/heading.module.scss
+++ b/src/components/primitives/heading/heading.module.scss
@@ -11,7 +11,7 @@
   }
 
   &--xl {
-    font-size: tovw(110px, 'default', 48px);
+    font-size: tovw(110px, 'default', 50px);
     line-height: 1.1;
     letter-spacing: tovw(-3px);
   }
diff --git a/src/components/sections/homepage/hero/hero.module.scss b/src/components/sections/homepage/hero/hero.module.scss
index 6132f71..7544240 100644
--- a/src/components/sections/homepage/hero/hero.module.scss
+++ b/src/components/sections/homepage/hero/hero.module.scss
@@ -1,32 +1,128 @@
+@import '~/css/helpers';
+
 .section {
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  height: calc(var(--vh) * 118 - var(--header-height));
+  max-width: 100%;
+  min-height: calc(var(--vh) * 100);
   text-align: center;
 
+  @media screen and (max-width: 800px) {
+    background-image: url('/images/hero-mobile.png');
+    background-repeat: no-repeat;
+    background-position: 50% 15%;
+    background-size: 100%;
+  }
+
+  @supports (aspect-ratio: 16 / 9) {
+    aspect-ratio: 16 / 9;
+  }
+
   &::after,
   &::before {
     position: absolute;
     z-index: -1;
-    bottom: 0;
-    left: 0;
+    top: 50%;
+    left: 50%;
     width: 100%;
-    height: calc(var(--vh) * 95);
+    height: 100%;
     content: '';
-  }
-
-  &::after {
-    background: radial-gradient(
-      circle,
-      rgb(0 0 0 / 0.5) 45%,
-      hsl(0deg 0% 100% / 0) 100%
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    background: linear-gradient(
+      0deg,
+      black 15%,
+      rgb(9 9 121 / 0) 50%,
+      black 100%
     );
+    @supports (aspect-ratio: 16 / 9) {
+      aspect-ratio: 16 / 9;
+    }
+    @media screen and (max-width: 800px) {
+      content: initial;
+    }
   }
 
   &::before {
-    background: linear-gradient(0deg, #000 50%, hsl(0deg 0% 100% / 0));
+    width: 120%;
+    height: 115%;
+    background: radial-gradient(
+      ellipse farthest-corner at center center,
+      rgb(4 4 4 / 0.25) 45%,
+      #000 0
+    );
+    filter: blur(tovw(80px, 'default', 40px));
+  }
+
+  .line {
+    width: tovw(3px, 'default', 2px);
+    height: tovw(72px, 'default', 56px);
+    margin: tovw(37px, 'default', 20px) auto tovw(23px, 'default', 20px) auto;
+  }
+
+  .arrow {
+    width: tovw(16px, 'default', 12px);
+    height: tovw(24px, 'default', 24px);
+  }
+
+  .flag {
+    width: tovw(36px, 'default', 36px);
+    height: tovw(20px, 'default', 20px);
+    margin: 0 auto tovw(8px, 'default', 6px) auto;
+  }
+
+  p {
+    margin: 0 auto;
+  }
+
+  .scroll {
+    position: absolute;
+    bottom: 11%;
+    left: tovw(56px, 'default', 16px);
+    display: grid;
+    align-items: flex-end;
+    width: calc(100% - (tovw(56px, 'default', 16px) * 2));
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 1fr;
+
+    @media screen and (max-width: 800px) {
+      grid-template-columns: 1fr;
+      bottom: 5%;
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+    }
+
+    p,
+    li {
+      font-family: var(--font-dm-mono);
+      font-size: tovw(12px, 'default', 11px);
+      line-height: 1.7;
+      text-transform: uppercase;
+      font-variant-numeric: tabular-nums;
+    }
+
+    > div {
+      &:first-of-type {
+        display: flex;
+        justify-self: flex-start;
+      }
+
+      &:last-of-type {
+        text-align: right;
+        justify-self: flex-end;
+
+        span {
+          display: inline-block;
+          width: tovw(55px, 'default', 40px);
+        }
+      }
+    }
   }
 
   .video {
@@ -39,4 +135,9 @@
     user-select: none;
     pointer-events: none;
   }
+
+  .mobile__button {
+    width: 100%;
+    margin: tovw(48px, 'mobile', 40px) 0 0 0;
+  }
 }
diff --git a/src/components/sections/homepage/hero/index.tsx b/src/components/sections/homepage/hero/index.tsx
index c6dacbc..1d3b57e 100644
--- a/src/components/sections/homepage/hero/index.tsx
+++ b/src/components/sections/homepage/hero/index.tsx
@@ -1,35 +1,82 @@
 import clsx from 'clsx'
+import { useEffect, useState } from 'react'
 
+import { ArrowDotted } from '~/components/icons/arrow'
+import Flag from '~/components/icons/flag'
+import Line from '~/components/icons/line'
 import Section from '~/components/layout/section'
+import Button from '~/components/primitives/button'
 import Heading from '~/components/primitives/heading'
 import HighlightedText from '~/components/primitives/highlighted-text'
 
 import s from './hero.module.scss'
 
 const Hero = () => {
+  const [position, setPosition] = useState({ x: 0, y: 0 })
+
+  useEffect(() => {
+    const setFromEvent = (e: { clientX: any; clientY: any }) =>
+      setPosition({ x: e.clientX, y: e.clientY })
+    window.addEventListener('mousemove', setFromEvent)
+
+    return () => {
+      window.removeEventListener('mousemove', setFromEvent)
+    }
+  }, [])
+
   return (
     <Section className={s['section']}>
       <video
-        autoPlay
+        // autoPlay
         className={clsx('hide-on-mobile', s['video'])}
         controls={false}
-        loop
+        // loop
         muted
         preload="true"
       >
         <source src="/videos/hero-grid.mp4" type="video/mp4" />
       </video>
       <Heading as="h1" variant="xl" centered>
-        The <HighlightedText>Multi-chain</HighlightedText> <br /> Verifable Data
+        The <br className="hide-on-desktop" />{' '}
+        <HighlightedText>Multi-chain</HighlightedText> <br /> Verifable Data
         Marketplace
       </Heading>
+      <Line className={s['line']} />
       <p>
         From months to minutes. Laconic accelerates <br /> your DApp
         development, interoperability, <br /> and user adoption.
       </p>
-      <Heading as="h5" variant="xs" font="dmmono" centered>
-        Scroll Down
-      </Heading>
+      <Button
+        variant="primary"
+        className={clsx(s['mobile__button'], 'hide-on-desktop')}
+      >
+        Get Started
+      </Button>
+      <div className={s['scroll']}>
+        <div className="hide-on-mobile">
+          <p>C:</p>
+          <Flag className={s['flag']} />
+        </div>
+        <div>
+          <Heading as="h5" variant="xs" font="dmmono" centered>
+            Scroll Down
+          </Heading>
+          <ArrowDotted className={s['arrow']} />
+        </div>
+        <div className="hide-on-mobile">
+          <p>Home</p>
+          <ul>
+            <li>
+              H:
+              <span>{position.x} PX</span>
+            </li>
+            <li>
+              V:
+              <span>{position.y} PX</span>
+            </li>
+          </ul>
+        </div>
+      </div>
     </Section>
   )
 }