diff --git a/www/apps/book/app/learn/advanced-development/admin/ui-routes/page.mdx b/www/apps/book/app/learn/advanced-development/admin/ui-routes/page.mdx
index 0815a2f4d3..e5550d3923 100644
--- a/www/apps/book/app/learn/advanced-development/admin/ui-routes/page.mdx
+++ b/www/apps/book/app/learn/advanced-development/admin/ui-routes/page.mdx
@@ -175,7 +175,7 @@ For example, create the file `src/admin/routes/custom/[id]/page.tsx` with the fo
 
 ```tsx title="src/admin/routes/custom/[id]/page.tsx" highlights={[["5", "", "Retrieve the path parameter."], ["10", "{id}", "Show the path parameter."]]}
 import { useParams } from "react-router-dom"
-import { Container } from "@medusajs/ui"
+import { Container, Heading } from "@medusajs/ui"
 
 const CustomPage = () => {
   const { id } = useParams()
diff --git a/www/packages/docs-ui/src/components/Heading/H2/index.tsx b/www/packages/docs-ui/src/components/Heading/H2/index.tsx
index 9d3273562e..f4c8560726 100644
--- a/www/packages/docs-ui/src/components/Heading/H2/index.tsx
+++ b/www/packages/docs-ui/src/components/Heading/H2/index.tsx
@@ -4,6 +4,7 @@ import clsx from "clsx"
 import React, { useMemo } from "react"
 import { CopyButton, Link } from "@/components"
 import { useIsBrowser } from "../../../providers"
+import { usePathname } from "next/navigation"
 
 type H2Props = React.HTMLAttributes<HTMLHeadingElement> & {
   id?: string
@@ -12,20 +13,15 @@ type H2Props = React.HTMLAttributes<HTMLHeadingElement> & {
 
 export const H2 = ({ className, children, passRef, ...props }: H2Props) => {
   const { isBrowser } = useIsBrowser()
+  const pathname = usePathname()
   const copyText = useMemo(() => {
-    const url = `#${props.id}`
+    const hash = `#${props.id}`
     if (!isBrowser) {
-      return url
+      return hash
     }
 
-    const hashIndex = window.location.href.indexOf("#")
-    return (
-      window.location.href.substring(
-        0,
-        hashIndex !== -1 ? hashIndex : window.location.href.length
-      ) + url
-    )
-  }, [props.id, isBrowser])
+    return `${window.location.origin}${pathname}${hash}`
+  }, [props.id, isBrowser, pathname])
   return (
     <h2
       className={clsx(
@@ -42,7 +38,7 @@ export const H2 = ({ className, children, passRef, ...props }: H2Props) => {
           text={copyText}
           className="opacity-0 group-hover/h2:opacity-100 transition-opacity ml-docs_0.5 inline-block"
         >
-          <Link href={`#${props.id}`} scroll={false}>
+          <Link href={`#${props.id}`} scroll={false} prefetch={false}>
             #
           </Link>
         </CopyButton>