diff --git a/src/components/docPage/type.scss b/src/components/docPage/type.scss
index ad1dfc16ddad9..a6c5931c442cf 100644
--- a/src/components/docPage/type.scss
+++ b/src/components/docPage/type.scss
@@ -42,6 +42,18 @@
     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);
+    scroll-margin-top: var(--scroll-margin-top);
+  }
+
+  @media (max-width: 768px) {
+    .onboarding-options ~ :is(h1, h2, h3, h4, h5, h6) {
+      --scroll-margin-top: calc(var(--header-height) + 1.5rem + 5rem);
+    }
+  }
+
   h1 {
     font-size: 2rem;
     margin: 2rem 0 1rem;
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"