diff --git a/packages/react/src/DocsLayout.tsx b/packages/react/src/DocsLayout.tsx
index 5313fec..228c297 100644
--- a/packages/react/src/DocsLayout.tsx
+++ b/packages/react/src/DocsLayout.tsx
@@ -6,7 +6,7 @@ function SideNav() {
   const location = useLocation();
 
   return (
-    <nav className="md:flex flex-col justify-start items-start gap-8 p-8 hidden">
+    <nav className="sticky top-16 overflow-auto max-h-[calc(100vh-4rem)] md:flex flex-col justify-start items-start gap-8 p-8 hidden">
       {Object.entries(RouteObject.sideNav).map(([categoryName, links]) => {
         return (
           <section
diff --git a/packages/react/src/DynamicLayout.tsx b/packages/react/src/DynamicLayout.tsx
index 753ec98..88542c3 100644
--- a/packages/react/src/DynamicLayout.tsx
+++ b/packages/react/src/DynamicLayout.tsx
@@ -47,7 +47,7 @@ export default function DynamicLayout({
           {children}
         </main>
       </div>
-      <nav className="hidden lg:flex flex-col gap-2 py-8 px-4">
+      <nav className="hidden lg:flex flex-col gap-2 py-8 px-4 sticky top-16 overflow-auto max-h-[calc(100vh-4rem)]">
         <span className="font-bold text-sm">On This Page</span>
 
         <RecursivelyToc toc={toc} />
diff --git a/packages/react/src/MainLayout.tsx b/packages/react/src/MainLayout.tsx
index 09f146a..89231da 100644
--- a/packages/react/src/MainLayout.tsx
+++ b/packages/react/src/MainLayout.tsx
@@ -88,7 +88,7 @@ function TopNav() {
 
   return (
     <>
-      <nav className="bg-transparent backdrop-blur-lg border-b border-neutral-200 dark:border-neutral-800 w-full max-w-screen px-8 flex flex-row justify-center items-center h-16">
+      <nav className="sticky top-0 z-50 bg-transparent backdrop-blur-lg border-b border-neutral-200 dark:border-neutral-800 w-full max-w-screen px-8 flex flex-row justify-center items-center h-16">
         <div
           data-role="wrapper"
           className="flex flex-row items-center justify-between w-full max-w-6xl text-lg"