diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index 8141179783b..89514474c4b 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState, useEffect } from 'react'
 import { IconChevronLeft } from '~/../../packages/ui'
@@ -60,6 +61,8 @@ const SideNav = () => {
   }
 
   useEffect(() => {
+    console.log(router)
+    handleRouteChange(router.basePath + router.asPath)
     // Listen for page changes after a navigation or when the query changes
     router.events.on('routeChangeComplete', handleRouteChange)
     return () => {
@@ -212,26 +215,22 @@ const SideNav = () => {
                 <div className="flex flex-col gap-3" key={`section-${sectionIndex}`}>
                   {section.map((link) => {
                     return (
-                      <a
-                        key={link.label}
-                        onClick={() => {
-                          // setLevel(link.level)
-                          router.push(tempBasePath + link.href)
-                        }}
-                      >
-                        <li
-                          className={[
-                            'group flex items-center gap-3',
-                            'text-base transition-all duration-150 text-scale-1200 hover:text-brand-900 hover:cursor-pointer ',
-                          ].join(' ')}
-                        >
-                          <img
-                            src={`${router.basePath}/img/icons/menu/${link.icon}`}
-                            className="opacity-75 w-4.5 group-hover:scale-110 group-hover:opacity-100 ease-out transition-all"
-                          />
-                          {link.label}
-                        </li>
-                      </a>
+                      <Link href={tempBasePath + link.href} passHref>
+                        <a key={link.label}>
+                          <li
+                            className={[
+                              'group flex items-center gap-3',
+                              'text-base transition-all duration-150 text-scale-1200 hover:text-brand-900 hover:cursor-pointer ',
+                            ].join(' ')}
+                          >
+                            <img
+                              src={`${router.basePath}/img/icons/menu/${link.icon}`}
+                              className="opacity-75 w-4.5 group-hover:scale-110 group-hover:opacity-100 ease-out transition-all"
+                            />
+                            {link.label}
+                          </li>
+                        </a>
+                      </Link>
                     )
                   })}
                 </div>
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
index 3d765484574..1fa4196a254 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link'
 import { useRouter } from 'next/router'
 import rehypeFilter from 'react-markdown/lib/rehype-filter'
 import { IconChevronLeft } from '~/../../packages/ui'
@@ -65,29 +66,23 @@ const NavigationMenuGuideList = ({ currentLevel, setLevel, tempBasePath, id }) =
                   {x.items.map((x) => {
                     return (
                       <li key={x.name}>
-                        <a
-                          onClick={() => {
-                            router.push(`/${tempBasePath}${x.href}`)
-                          }}
-                          className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand-900"
-                        >
-                          {x.name}
-                        </a>
+                        <Link href={`/${tempBasePath}${x.href}`} passHref>
+                          <a className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand-900">
+                            {x.name}
+                          </a>
+                        </Link>
                       </li>
                     )
                   })}
                 </>
               ) : (
                 <li>
-                  <a
-                    onClick={() => {
-                      router.push(`/${tempBasePath}${x.href}`)
-                    }}
-                    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.name}
-                  </a>
+                  <Link href={`/${tempBasePath}${x.href}`} 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.name}
+                    </a>
+                  </Link>
                 </li>
               )}
             </div>
@@ -105,15 +100,12 @@ const NavigationMenuGuideList = ({ currentLevel, setLevel, tempBasePath, id }) =
           return (
             <div key={x.name}>
               <li>
-                <a
-                  onClick={() => {
-                    router.push(`/${tempBasePath}${x.href}`)
-                  }}
-                  className="cursor-pointer transition text-scale-1100 text-sm hover:text-brand-900 flex gap-3 my-1"
-                >
-                  {x.icon && <img className="w-4" src={`${router.basePath}${x.icon}`} />}
-                  {x.name}
-                </a>
+                <Link href={`/${tempBasePath}${x.href}`} passHref>
+                  <a className="cursor-pointer transition text-scale-1100 text-sm hover:text-brand-900 flex gap-3 my-1">
+                    {x.icon && <img className="w-4" src={`${router.basePath}${x.icon}`} />}
+                    {x.name}
+                  </a>
+                </Link>
               </li>
             </div>
           )
diff --git a/apps/docs/pages/new/index.mdx b/apps/docs/pages/new/index.mdx
index 3ad9fe6b221..426e8486b11 100644
--- a/apps/docs/pages/new/index.mdx
+++ b/apps/docs/pages/new/index.mdx
@@ -71,19 +71,19 @@ hello world
     return (
       <Link
         href={`/new/${product.href}`}
-        passHref
         key={product.title}
+        passHref
       >
-      <a className={`
-        relative
-        group
-        overflow-hidden
-        bg-white dark:bg-scale-300 border rounded-md drop-shadow-sm
-        transition
-        border-scale-500
-        hover:border-scale-700
-        gap-6
-        p-8 flex flex-col ${
+        <a className={`
+          relative
+          group
+          overflow-hidden
+          bg-white dark:bg-scale-300 border rounded-md drop-shadow-sm
+          transition
+          border-scale-500
+          hover:border-scale-700
+          gap-6
+          p-8 flex flex-col ${
           product.span ?? 'col-span-4'
         }`}>
           <img