diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 8e35a85a..622e5b61 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,25 +1,13 @@
-import Link from 'next/link'
-
-import { Button } from '~/components/Button'
-import { Logo } from '~/components/FullLogo'
-import { SlimLayout } from '~/components/SlimLayout'
+import { Header } from '~/components/layout/header'
+import { Hero } from '~/components/sections/404/hero'
 
 export default function NotFound() {
   return (
-    <SlimLayout>
-      <div className="flex">
-        <Link href="/" aria-label="Home">
-          <Logo className="h-10 w-auto" />
-        </Link>
-      </div>
-      <p className="mt-20 text-sm font-medium text-gray-700">404</p>
-      <h1 className="mt-3 text-lg font-semibold text-gray-900">Page not found</h1>
-      <p className="mt-3 text-sm text-gray-700">
-        Sorry, we couldn’t find the page you’re looking for.
-      </p>
-      <Button href="/" className="mt-10">
-        Go back home
-      </Button>
-    </SlimLayout>
+    <>
+      <Header variant="dark" className="!bg-transparent" />
+      <main className="pt-[var(--header-height)]">
+        <Hero />
+      </main>
+    </>
   )
 }
diff --git a/src/components/layout/header/index.tsx b/src/components/layout/header/index.tsx
index 9c1900af..cfb13149 100644
--- a/src/components/layout/header/index.tsx
+++ b/src/components/layout/header/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, FC } from 'react'
 import { usePathname } from 'next/navigation'
 import Link from 'next/link'
 
@@ -27,7 +27,11 @@ const NAVLINKS: Navlink[] = [
   { href: '/about', label: 'Company' }
 ]
 
-export function Header({ variant = 'light' }: { variant?: 'dark' | 'light' }) {
+type HeaderProps = {
+  variant?: 'dark' | 'light'
+} & React.HTMLAttributes<HTMLDivElement>
+
+export const Header: FC<HeaderProps> = ({ variant = 'light', className, ...rest }) => {
   const toggle = useToggleState()
   const [scrollProgress, setScrollProgress] = useState(0)
   const pathname = usePathname()
@@ -55,8 +59,10 @@ export function Header({ variant = 'light' }: { variant?: 'dark' | 'light' }) {
         {
           ['border-b border-gray-100 !bg-white shadow-[0px_2px_18px_0px_rgba(5,73,30,0.08)]']:
             variant === 'light' && (scrollProgress > 0 || toggle.isOn)
-        }
+        },
+        className
       )}
+      {...rest}
     >
       <Container className="flex-1">
         <nav className="relative z-50 flex justify-between">
diff --git a/src/components/sections/404/hero/hero.module.scss b/src/components/sections/404/hero/hero.module.scss
deleted file mode 100644
index 4ddd3036..00000000
--- a/src/components/sections/404/hero/hero.module.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-@import 'css/helpers';
-
-.section {
-  position: relative;
-  min-height: 100vh;
-  margin-top: calc(var(--header-height) * -1);
-  background: linear-gradient(
-    251.84deg,
-    #111827 -24.23%,
-    #111826 -18.4%,
-    #101726 -13.17%,
-    #101725 -8.33%,
-    #101624 -3.65%,
-    #0f1523 1.08%,
-    #0f1421 6.08%,
-    #0e1420 11.58%,
-    #0d121e 17.81%,
-    #0c111c 24.96%,
-    #0b1019 33.28%,
-    #0a0e16 42.98%,
-    #080c13 54.28%,
-    #070a10 67.41%,
-    #000 82.57%,
-    #000 100%
-  );
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-  .bg-container {
-    isolation: isolate;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-
-    .child {
-      position: absolute;
-      inset: 0;
-    }
-  }
-
-  .container {
-    width: 100%;
-    transition: opacity 0.5s var(--ease-out-soft);
-
-    .title {
-      position: relative;
-      max-width: 1040px;
-      width: 100%;
-      height: 140px;
-      user-select: none;
-
-      img {
-        object-fit: contain;
-      }
-      @include respond-to(‘tablet’) {
-        width: 100%;
-        height: 46px;
-      }
-    }
-
-    .text {
-      font-size: 18px;
-      line-height: 24px;
-      text-align: center;
-      margin: 24px 0 32px;
-    }
-
-    a {
-      margin: auto;
-      @include respond-to(‘tablet’) {
-        width: 100%;
-      }
-    }
-  }
-}
diff --git a/src/components/sections/404/hero/index.tsx b/src/components/sections/404/hero/index.tsx
index dd4fce85..b34362fb 100644
--- a/src/components/sections/404/hero/index.tsx
+++ b/src/components/sections/404/hero/index.tsx
@@ -1,15 +1,16 @@
-import dynamic, { LoaderComponent } from 'next/dynamic'
+'use client'
+
+import dynamic from 'next/dynamic'
 import Image from 'next/image'
 import { FC, useState } from 'react'
+import { Button } from '~/components/Button'
+import { Container } from '~/components/Container'
 
 import { Section } from '~/components/common/section'
-import { Container } from '~/components/layout/container'
 import { ButtonLink } from '~/components/primitives/cta'
 import { SITEMAP } from '~/lib/sitemap'
 
-import s from './hero.module.scss'
-
-const Sky = dynamic(() => import('~/components/common/sky').then((m) => m.Sky) as LoaderComponent, {
+const Sky = dynamic(() => import('~/components/common/sky').then((m) => m.Sky), {
   ssr: false
 })
 
@@ -17,34 +18,48 @@ export const Hero: FC = () => {
   const [imageLoaded, setImageLoaded] = useState(false)
 
   return (
-    <Section className={s.section}>
-      <div className={s['bg-container']}>
-        <div className={s['child']}>
+    <Section
+      className="relative mt-[calc(var(--header-height)_*_-1)] flex h-[100dvh] flex-col justify-center overflow-hidden"
+      style={{
+        background:
+          'linear-gradient(251.84deg,#111827 -24.23%,#111826 -18.4%,#101726 -13.17%,#101725 -8.33%,#101624 -3.65%,#0f1523 1.08%,#0f1421 6.08%,#0e1420 11.58%,#0d121e 17.81%,#0c111c 24.96%,#0b1019 33.28%,#0a0e16 42.98%,#080c13 54.28%,#070a10 67.41%,#000 82.57%,#000 100%)'
+      }}
+    >
+      <div className="pointer-events-none absolute left-0 top-0 isolate h-full w-full">
+        <div className={'absolute inset-0'}>
           <Sky />
         </div>
       </div>
+
       <Container
         style={{
           opacity: imageLoaded ? 1 : 0
         }}
-        className={s.container}
+        className="duration-[0.5s] ease-ease-in-out relative z-10 flex h-full w-full transition-opacity"
       >
-        <h1 className="screen-reader-only">Page Not Found</h1>
-        <div className={s.title}>
-          <Image
-            src="/images/404/title.svg"
-            fill
-            alt="Page Not Found"
-            draggable={false}
-            onLoadingComplete={() => {
-              setImageLoaded(true)
-            }}
-          />
+        <div className="my-auto flex-1">
+          <h1 className="sr-only">Page Not Found</h1>
+          <div className="relative mx-auto h-[46px] w-full max-w-[1040px] select-none lg:h-[140px]">
+            <Image
+              className="object-contain"
+              src="/images/404/title.svg"
+              fill
+              alt="Page Not Found"
+              draggable={false}
+              onLoadingComplete={() => {
+                setImageLoaded(true)
+              }}
+            />
+          </div>
+          <p className="mx-0 mb-8 mt-6 text-center text-lg leading-6 text-slate-300">
+            The page you are looking for doesn&apos;t exist or has been moved.
+          </p>
+          <div className="flex w-full justify-center">
+            <Button href={SITEMAP.home.href || '/'} aria-label={SITEMAP.home.label}>
+              Go Back {SITEMAP.home.label}
+            </Button>
+          </div>
         </div>
-        <p className={s.text}>The page you are looking for doesn&apos;t exist or has been moved.</p>
-        <ButtonLink size="big" href={SITEMAP.home.href || '/'} aria-label={SITEMAP.home.label}>
-          Go Back {SITEMAP.home.label}
-        </ButtonLink>
       </Container>
     </Section>
   )