diff --git a/src/components/docPage/type.scss b/src/components/docPage/type.scss
index 04af19d969a6b..dc8055b799d9f 100644
--- a/src/components/docPage/type.scss
+++ b/src/components/docPage/type.scss
@@ -41,6 +41,10 @@
 
     scroll-margin-top: calc(var(--header-height) + 1.5rem);
   }
+  .onboarding-options ~ :is(h1, h2, h3, h4, h5, h6) {
+    // the magic 2rem to account for the onboarding options
+    scroll-margin-top: calc(var(--header-height) + 1.5rem + 2rem);
+  }
 
   h1 {
     font-size: 2rem;
diff --git a/src/components/onboarding/index.tsx b/src/components/onboarding/index.tsx
index 98592acb39eed..da581c0da2b70 100644
--- a/src/components/onboarding/index.tsx
+++ b/src/components/onboarding/index.tsx
@@ -212,7 +212,7 @@ export function OnboardingOptionButtons({
   }, [options, touchedOptions]);
 
   return (
-    <div className="flex flex-wrap gap-3 py-2 bg-[var(--white)] dark:bg-[var(--gray-1)]  sticky top-[80px] z-[4] shadow-[var(--shadow-6)] transition">
+    <div className="onboarding-options flex flex-wrap gap-3 py-2 bg-[var(--white)] dark:bg-[var(--gray-1)]  sticky top-[80px] z-[4] shadow-[var(--shadow-6)] transition">
       {options.map(option => (
         <Button
           variant="surface"