diff --git a/public/images/careers/careers.png b/public/images/careers/careers.png
new file mode 100644
index 0000000..576897c
Binary files /dev/null and b/public/images/careers/careers.png differ
diff --git a/src/components/common/header/header.module.scss b/src/components/common/header/header.module.scss
index df0d1f4..a6430c8 100644
--- a/src/components/common/header/header.module.scss
+++ b/src/components/common/header/header.module.scss
@@ -38,26 +38,9 @@
     }
 
     position: relative;
-
-    // &::after {
-    //   position: absolute;
-    //   top: 50%;
-    //   left: tovw(-16px, 'default', -16px);
-    //   transform: translateY(-50%);
-    //   transition: opacity var(--duration-normal) var(--ease);
-    //   opacity: 0;
-    //   background: var(--color-white);
-    //   width: tovw(7px, 'default', 7px);
-    //   height: tovw(7px, 'default', 7px);
-    //   content: '';
-    // }
   }
 
   li.active {
-    // &::after {
-    //   opacity: 1;
-    // }
-
     a {
       font-weight: bold;
     }
diff --git a/src/components/sections/careers/hero/hero.module.scss b/src/components/sections/careers/hero/hero.module.scss
index 8b9dcf6..f6ee0c6 100644
--- a/src/components/sections/careers/hero/hero.module.scss
+++ b/src/components/sections/careers/hero/hero.module.scss
@@ -21,56 +21,44 @@
     }
   }
 
-  .video_container {
-    align-self: center;
-    position: relative;
-    margin-top: tovw(-165px, 'default');
-    margin-bottom: tovw(-140px, 'default');
-    padding-top: tovw(30px, 'default', 20px);
-    width: 82%;
-    mix-blend-mode: lighten;
+  .hero__container {
+    @include respond-to('mobile') {
+      min-height: unset;
+    }
 
-    video {
+    display: flex;
+    place-content: center;
+    min-height: tovw(750px, 'default', 366px);
+
+    .hero {
       @include respond-to('mobile') {
         display: none;
       }
 
-      width: 100%;
-    }
-
-    &::after {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 1;
-      background: radial-gradient(
-        ellipse,
-        rgb(3 3 3 / 0) 60%,
-        rgb(3 3 3 / 1) 75%,
-        rgb(3 3 3 / 1) 100%
-      );
-      width: 100%;
-      height: 100%;
-      content: '';
-    }
-  }
-
-  .hero__mobile {
-    @include respond-to('mobile') {
-      display: flex;
-      margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px)
-        tovw(16px, 'mobile', 20px);
-      width: 200%;
+      margin: auto;
+      width: tovw(1380px, 'default', 700px);
+      padding-left: tovw(60px, 'default', 20px);
+      margin-top: tovw(-30px, 'default', -30px);
       mix-blend-mode: screen;
-      place-self: center;
-      mask-image: linear-gradient(
-        0deg,
-        rgb(255 255 255 / 0) 0%,
-        rgb(0 0 0) 25%
-      );
-    }
 
-    display: none;
+      &__mobile {
+        @include respond-to('mobile') {
+          display: flex;
+          margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px)
+            tovw(-20px, 'mobile', -20px);
+          width: 135%;
+          mix-blend-mode: screen;
+          place-self: center;
+          mask-image: linear-gradient(
+            0deg,
+            rgb(255 255 255 / 0) 0%,
+            rgb(0 0 0) 25%
+          );
+        }
+
+        display: none;
+      }
+    }
   }
 
   .body {
@@ -81,7 +69,7 @@
 
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-start;
     margin-top: tovw(16px, 'default', 10px);
 
     h1 {
diff --git a/src/components/sections/careers/hero/index.tsx b/src/components/sections/careers/hero/index.tsx
index 5553f69..40a68a5 100644
--- a/src/components/sections/careers/hero/index.tsx
+++ b/src/components/sections/careers/hero/index.tsx
@@ -1,5 +1,3 @@
-import { useRef } from 'react'
-
 import { Arrow } from '~/components/icons/arrow'
 import Line from '~/components/icons/line'
 import { Container } from '~/components/layout/container'
@@ -16,31 +14,23 @@ interface Props {
 }
 
 const Hero = ({ data }: Props) => {
-  const heroVideoRef = useRef<HTMLVideoElement>(null)
-
   return (
     <Section className={s['section']} disableFadeIn>
       <div className={s.gradient} />
-      <div className={s.video_container}>
-        <video
-          autoPlay
-          ref={heroVideoRef}
-          controls={false}
-          loop
-          muted
-          playsInline={true}
-          preload="true"
-        >
-          <source src="/videos/banner-products.webm" type="video/webm" />
-          <source src="/videos/banner-products.mp4" type="video/mp4" />
-        </video>
+      <div className={s.hero__container}>
+        <img
+          className={s.hero}
+          loading="eager"
+          alt="hero"
+          src="/images/careers/careers.png"
+        />
+        <img
+          className={s.hero__mobile}
+          loading="eager"
+          alt="hero"
+          src="/images/careers/careers.png"
+        />
       </div>
-      <img
-        className={s.hero__mobile}
-        loading="eager"
-        alt="hero"
-        src="/images/products/products.jpg"
-      />
       <Container className={s['container']}>
         <div className={s.body}>
           <div>
diff --git a/src/components/sections/partners/hero/hero.module.scss b/src/components/sections/partners/hero/hero.module.scss
index f1ae9ff..388d6ab 100644
--- a/src/components/sections/partners/hero/hero.module.scss
+++ b/src/components/sections/partners/hero/hero.module.scss
@@ -126,7 +126,7 @@
         }
 
         display: grid;
-        width: 80%;
+        width: tovw(440px, 'default', 270px);
         margin-top: tovw(55px, 'default', 40px);
         padding: 0;
         list-style: none;
@@ -144,7 +144,7 @@
           display: flex;
           position: relative;
           counter-increment: custom;
-          gap: tovw(24px, 'default', 18px);
+          gap: tovw(20px, 'default', 12px);
 
           &:first-child {
             counter-reset: custom;
diff --git a/src/components/sections/partners/hero/index.tsx b/src/components/sections/partners/hero/index.tsx
index c26c503..d52ddc5 100644
--- a/src/components/sections/partners/hero/index.tsx
+++ b/src/components/sections/partners/hero/index.tsx
@@ -63,16 +63,16 @@ const Hero = () => {
             </p>
             <ol>
               <li>
-                <Link href="https://google.com">Validators</Link>
+                <Link href="#validators">Validators</Link>
               </li>
               <li>
-                <Link href="https://google.com">Service providers</Link>
+                <Link href="#providers">Service providers</Link>
               </li>
               <li>
-                <Link href="https://google.com">Developers</Link>
+                <Link href="#developers">Developers</Link>
               </li>
               <li>
-                <Link href="https://google.com">Investors</Link>
+                <Link href="#investors">Investors</Link>
               </li>
             </ol>
           </div>
diff --git a/src/components/sections/partners/opportunities/index.tsx b/src/components/sections/partners/opportunities/index.tsx
index 47fe082..695fcf7 100644
--- a/src/components/sections/partners/opportunities/index.tsx
+++ b/src/components/sections/partners/opportunities/index.tsx
@@ -10,7 +10,7 @@ const Opportunities = () => {
   return (
     <Section className={s['section']}>
       <Container className={s['container']}>
-        <div className={s.block}>
+        <div className={s.block} id="validators">
           <div className={s['header']}>
             <Heading as="h2" variant="lg">
               Validators
@@ -46,7 +46,7 @@ const Opportunities = () => {
             </li>
           </ul>
         </div>
-        <div className={s.block}>
+        <div className={s.block} id="providers">
           <div className={s['header']}>
             <Heading as="h2" variant="lg">
               Service Providers
@@ -82,7 +82,7 @@ const Opportunities = () => {
             </li>
           </ul>
         </div>
-        <div className={s.block}>
+        <div className={s.block} id="developers">
           <div className={s['header']}>
             <Heading as="h2" variant="lg">
               Developers
@@ -118,7 +118,7 @@ const Opportunities = () => {
             </li>
           </ul>
         </div>
-        <div className={s.block}>
+        <div className={s.block} id="investors">
           <div className={s['header']}>
             <Heading as="h2" variant="lg">
               Investors
@@ -154,7 +154,7 @@ const Opportunities = () => {
             </li>
           </ul>
         </div>
-        <div className={s.block}>
+        <div className={s.block} id="testnet">
           <div className={s['header']}>
             <Heading as="h2" variant="lg">
               Incentivized Testnet
diff --git a/src/css/global.scss b/src/css/global.scss
index 9067dcb..a11ef57 100644
--- a/src/css/global.scss
+++ b/src/css/global.scss
@@ -57,6 +57,7 @@ html {
   font-variant-ligatures: common-ligatures;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
+  scroll-padding-top: calc(var(--header-height) + 30px);
 
   &.no-animation {
     * {