diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
index ba0463f17d8..e246100f987 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
@@ -24,7 +24,7 @@ const NavigationMenuRefList = ({ currentLevel, setLevel, id }) => {
         currentLevel !== id ? 'opacity-0 invisible absolute' : '',
       ].join(' ')}
     >
-      <ul className={'relative w-full flex flex-col gap-0'}>
+      <div className={'relative w-full flex flex-col gap-0 sticky top-8'}>
         <Link href={`${menu.parent ?? '/'}`} passHref>
           <a
             className={[
@@ -52,52 +52,50 @@ const NavigationMenuRefList = ({ currentLevel, setLevel, id }) => {
             {menu.title ?? currentLevel}
           </h2>
         </div>
+        <ul>
+          {jsSpec.functions.map((x, index) => {
+            return (
+              <li key={x.name}>
+                {x.items && x.items.length > 0 ? (
+                  <>
+                    {x.items.map((subItem, subItemIndex) => {
+                      return (
+                        <>
+                          {subItemIndex === 0 && (
+                            <>
+                              <div className="h-px w-full bg-green-500 my-3"></div>
+                              <span className="font-mono text-xs uppercase text-scale-1200 font-medium tracking-wider">
+                                {x.name}
+                              </span>
+                            </>
+                          )}
 
-        {jsSpec.functions.map((x, index) => {
-          return (
-            <div key={x.name}>
-              {x.items && x.items.length > 0 ? (
-                <>
-                  {x.items.map((subItem, subItemIndex) => {
-                    return (
-                      <>
-                        {subItemIndex === 0 && (
-                          <>
-                            <div className="h-px w-full bg-green-500 my-3"></div>
-                            <span className="font-mono text-xs uppercase text-scale-1200 font-medium tracking-wider">
-                              {x.name}
-                            </span>
-                          </>
-                        )}
-                        <li key={subItem.name}>
-                          <Link href={`/${subItem.url}`} passHref>
+                          <Link href={`/${subItem.url}`} passHref key={subItem.name}>
                             <a className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand-900">
                               {subItem.name}
                             </a>
                           </Link>
-                        </li>
-                        {/* {subItemIndex === x.items.length - 1 && (
+                          {/* {subItemIndex === x.items.length - 1 && (
                           <div className="h-px w-full bg-green-500 my-3"></div>
                         )} */}
-                      </>
-                    )
-                  })}
-                </>
-              ) : (
-                <>
-                  <li>
+                        </>
+                      )
+                    })}
+                  </>
+                ) : (
+                  <>
                     <Link href={`#${x.id}`} passHref>
                       <a className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand-900 flex gap-3">
                         {x.icon && <img className="w-3" src={`${router.basePath}${x.icon}`} />}
                         {x.title}
                       </a>
                     </Link>
-                  </li>
-                </>
-              )}
-            </div>
-          )
-        })}
+                  </>
+                )}
+              </li>
+            )
+          })}
+        </ul>
         {menu.extras && (
           <>
             <div className="h-px w-full bg-green-500 my-3"></div>
@@ -120,7 +118,7 @@ const NavigationMenuRefList = ({ currentLevel, setLevel, id }) => {
             </div>
           )
         })}
-      </ul>
+      </div>
     </div>
   )
 }
diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index 13401b3b88b..429dc7719e3 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -6,10 +6,6 @@ import NavigationMenu from '~/components/Navigation/NavigationMenu/NavigationMen
 import TopNavBar from '~/components/Navigation/NavigationMenu/TopNavBar'
 
 const Layout = ({ children }) => {
-  if (process.env.NEXT_PUBLIC_NEW_DOCS !== 'true') {
-    return <>{children}</>
-  }
-
   const router = useRouter()
 
   useEffect(() => {
@@ -22,6 +18,10 @@ const Layout = ({ children }) => {
     }
   }, [])
 
+  if (process.env.NEXT_PUBLIC_NEW_DOCS !== 'true') {
+    return <>{children}</>
+  }
+
   return (
     <>
       <main>
diff --git a/apps/docs/pages/new/reference/javascript/[...slug].tsx b/apps/docs/pages/new/reference/javascript/[...slug].tsx
index 16e13851927..d0746456ffe 100644
--- a/apps/docs/pages/new/reference/javascript/[...slug].tsx
+++ b/apps/docs/pages/new/reference/javascript/[...slug].tsx
@@ -231,15 +231,15 @@ export default function Ref(props) {
                           ' mb-16',
                         ].join(' ')}
                       >
-                        <h1
-                          className="text-2xl not-prose text-scale-1200 capitalize mb-4"
+                        <h2
+                          className="text-2xl not-prose text-scale-1200 capitalize mb-4 scroll-mt-16"
                           onClick={() => updateUrl(item.id)}
                         >
                           {examples.functions[itemIndex].title ??
                             examples.functions[itemIndex].id ??
                             item.name ??
                             item.id}
-                        </h1>
+                        </h2>
                         {shortText && (
                           <>
                             <p
@@ -323,7 +323,7 @@ export default function Ref(props) {
                                           <div
                                             className="px-5 py-3 first:border-t border-b border-l border-r
                                             border-scale-500
-                                          
+
                                             first:rounded-tl-lg first:rounded-tr-lg
                                             last:rounded-bl-lg last:rounded-br-lg