diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
index c027bf23cfe..e0a43504b95 100644
--- a/apps/docs/app/layout.tsx
+++ b/apps/docs/app/layout.tsx
@@ -4,6 +4,7 @@ import 'ui-patterns/ShimmeringLoader/index.css'
 import '../styles/globals.css'
 import '../styles/prism-okaidia.css'
 
+import { SkipToContent } from '~/components/SkipToContent'
 import { GlobalProviders } from '~/features/app.providers'
 import { TopNavSkeleton } from '~/layouts/MainSkeleton'
 import { BASE_PATH, IS_PRODUCTION } from '~/lib/constants'
@@ -54,6 +55,7 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <html lang="en" className={`${manrope.variable} ${inter.variable}`} suppressHydrationWarning>
       <body>
+        <SkipToContent />
         <TelemetryTagManager />
         <GlobalProviders>
           <TopNavSkeleton>{children}</TopNavSkeleton>
diff --git a/apps/docs/components/SkipToContent.tsx b/apps/docs/components/SkipToContent.tsx
new file mode 100644
index 00000000000..8b31bcb2243
--- /dev/null
+++ b/apps/docs/components/SkipToContent.tsx
@@ -0,0 +1,22 @@
+import { DOCS_CONTENT_CONTAINER_ID } from '~/features/ui/helpers.constants'
+import Link from 'next/link'
+import { Button, cn } from 'ui'
+
+const SkipToContent = () => {
+  return (
+    <Button
+      size="tiny"
+      variant="default"
+      asChild
+      className={cn(
+        'fixed top-0 left-4 z-[100] w-auto',
+        '-translate-y-full focus-visible:translate-y-4',
+        'transition-transform duration-200 ease-out'
+      )}
+    >
+      <Link href={`#${DOCS_CONTENT_CONTAINER_ID}`}>Skip to content</Link>
+    </Button>
+  )
+}
+
+export { SkipToContent }
diff --git a/apps/docs/layouts/MainSkeleton.tsx b/apps/docs/layouts/MainSkeleton.tsx
index 906fc2b879c..048bed82157 100644
--- a/apps/docs/layouts/MainSkeleton.tsx
+++ b/apps/docs/layouts/MainSkeleton.tsx
@@ -283,8 +283,9 @@ const Container = memo(function Container({
     <main
       // used by layout to scroll to top
       id={DOCS_CONTENT_CONTAINER_ID}
+      tabIndex={-1}
       className={cn(
-        'w-full transition-all ease-out relative',
+        'w-full transition-all ease-out relative scroll-mt-(--header-height)',
         // desktop override any margin styles
         'lg:ml-0',
         className
diff --git a/apps/docs/styles/globals.css b/apps/docs/styles/globals.css
index e2207f0fa35..a7f2386c79a 100644
--- a/apps/docs/styles/globals.css
+++ b/apps/docs/styles/globals.css
@@ -406,13 +406,6 @@ th code {
   image-rendering: high-quality;
 }
 
-.skip-link {
-  @apply sr-only;
-}
-.skip-link:focus {
-  @apply not-sr-only;
-}
-
 /* Code blocks need margin applied when in content container */
 .prose :where(.shiki:not(.shiki-wrapper *), .shiki-wrapper) {
   margin-block: 2rem;