diff --git a/resources/sass/fo/base/_common.scss b/resources/sass/fo/base/_common.scss
index abafa5e..f3690fa 100644
--- a/resources/sass/fo/base/_common.scss
+++ b/resources/sass/fo/base/_common.scss
@@ -21,11 +21,8 @@ $theme-colors: map.merge($theme-colors, $light-colors);
     text-transform: inherit;
 }
 
-// Fix: header overlapped a section when we clicked on an anchor.
-// DO NOT apply this class WITH border-top-curved-*. This is not necessary and will cause bugs.
 .anchor-padding {
-    padding-top: $header-height;
-    margin-top: -$header-height;
+    scroll-margin: calc(#{$header-height} + 1rem);
 }
 
 .video-frame {
diff --git a/resources/views/fo/pages/commitments.blade.php b/resources/views/fo/pages/commitments.blade.php
index d28d75e..1b910d6 100644
--- a/resources/views/fo/pages/commitments.blade.php
+++ b/resources/views/fo/pages/commitments.blade.php
@@ -18,7 +18,7 @@
 @section('content')
     <section class="commit">
         {{-- AMBITION --}}
-        <section class="ambition my-4" id="introduction">
+        <section class="ambition anchor-padding my-4" id="introduction">
             <div class="container">
                 <div class="row">
                     <div class="col-12">
@@ -63,7 +63,7 @@
             </div>
         </section>
         {{-- BREEDING --}}
-        <section class="breeding border-top-curved-tertiary mt-4" id="breeding">
+        <section class="breeding border-top-curved-tertiary anchor-padding mt-4" id="breeding">
             <div class="text-bg-tertiary">
                 <div class="breeding-wrapper position-relative container">
                     <div class="row">
@@ -121,7 +121,7 @@
             </div>
         </section>
         {{-- LIFE --}}
-        <section class="life border-top-curved-upper-tertiary-light mb-4" id="life">
+        <section class="life border-top-curved-upper-tertiary-light anchor-padding mb-4" id="life">
             <div class="container">
                 <div class="row">
                     <div class="col-12 mb-3">
@@ -186,7 +186,7 @@
             </div>
         </section>
         {{-- EARTH --}}
-        <section class="earth border-top-curved-quint mt-4" id="earth">
+        <section class="earth border-top-curved-quint anchor-padding mt-4" id="earth">
             <div class="position-relative text-bg-quint">
                 <div class="container">
                     <div class="row">
@@ -269,7 +269,7 @@
             </div>
         </section>
         {{-- FEED --}}
-        <section class="feed mb-4" id="feed">
+        <section class="feed anchor-padding mb-4" id="feed">
             <div class="border-top-curved-white bg-quint-light"></div>
             <div class="container">
                 <div class="row">
@@ -339,7 +339,7 @@
             </div>
         </section>
         {{-- TESTIMONIALS --}}
-        <section class="border-top-curved-tertiary-light testimonials mt-4" id="testimonials">
+        <section class="border-top-curved-tertiary-light testimonials anchor-padding mt-4" id="testimonials">
             <div class="bg-primary-light">
                 <div class="container">
                     <div class="row">
diff --git a/resources/views/fo/pages/hire.blade.php b/resources/views/fo/pages/hire.blade.php
index 3b58db7..b513d5c 100644
--- a/resources/views/fo/pages/hire.blade.php
+++ b/resources/views/fo/pages/hire.blade.php
@@ -18,7 +18,7 @@
 @section('content')
     <section class="we-hire">
         {{-- COMPAGNY LIFE --}}
-        <section class="company-life" id="company-life">
+        <section class="company-life anchor-padding" id="company-life">
             <div class="container">
                 <div class="row position-relative">
                     <div class="col-12 text-center">
@@ -179,7 +179,7 @@
             </div>
         </section>
         {{-- TESTIMONIALS --}}
-        <section class="we-testimonials border-top-curved-tertiary-light" id="we-testimonials">
+        <section class="we-testimonials border-top-curved-tertiary-light anchor-padding" id="we-testimonials">
             <div class="bg-tertiary-light overflow-hidden pb-5">
                 <div class="text-primary container text-center">
                     <h2 class="fw-bold">{{ $testimonialSection->h2_title }}</h2>
@@ -223,7 +223,7 @@
             </div>
         </section>
         {{-- PARITY --}}
-        <section class="parity border-top-curved-upper-tertiary-light" id="parity">
+        <section class="parity border-top-curved-upper-tertiary-light anchor-padding" id="parity">
             <div class="container">
                 <div class="row">
                     <div class="col-12 text-primary text-center">
@@ -286,7 +286,7 @@
             </div>
         </section>
         {{-- FIND --}}
-        <section class="find border-top-curved-quad-light" id="on-se-retrouve">
+        <section class="find border-top-curved-quad-light anchor-padding" id="on-se-retrouve">
             <div class="bg-quad-light pb-5">
                 <div class="container">
                     <div class="container-fluid">
diff --git a/resources/views/fo/pages/home.blade.php b/resources/views/fo/pages/home.blade.php
index fd3a0a6..08a6a15 100644
--- a/resources/views/fo/pages/home.blade.php
+++ b/resources/views/fo/pages/home.blade.php
@@ -7,14 +7,14 @@
 @section('banner')
     @include('fo.layouts.banner-slider', [
         'displayArrow' => true,
-        'buttonLink' => '#missions',
+        'buttonLink' => '#home-title',
     ])
 @endsection
 
 @section('content')
     <section class="homepage">
         {{-- TITLE --}}
-        <section class="title-part my-5">
+        <section class="title-part anchor-padding my-5" id="home-title">
             <div class="container text-center">
                 <div class="row">
                     <div class="col">
@@ -24,7 +24,7 @@
             </div>
         </section>
         {{-- MISSIONS --}}
-        <section class="missions" id="missions">
+        <section class="missions anchor-padding" id="missions">
             <div class="container">
                 <div class="row align-items-center">
                     <div class="col-12">
@@ -179,7 +179,7 @@
             </div>
         </section>
         {{-- LIFE --}}
-        <section class="life border-top-curved-upper-primary position-relative pb-5" id="life">
+        <section class="life border-top-curved-upper-primary position-relative anchor-padding pb-5" id="life">
             <div class="life-content text-lg-start mask-white-right overflow-hidden text-center">
                 <div class="container">
                     <div class="row align-items-center">
diff --git a/resources/views/fo/pages/listen.blade.php b/resources/views/fo/pages/listen.blade.php
index 46bb499..258aa20 100644
--- a/resources/views/fo/pages/listen.blade.php
+++ b/resources/views/fo/pages/listen.blade.php
@@ -16,7 +16,7 @@
 @endsection
 
 @section('content')
-    <section class="container mb-5" id="listen">
+    <section class="anchor-padding container mb-5" id="listen">
         <div class="d-none d-lg-block my-5 p-5 text-center">
             <a class="btn btn-outline-primary rounded-pill border-primary border shadow-none" href="{{ route('fo.hire.show') }}#on-se-retrouve">
                 {{ __('Je suis candidat') }}