diff --git a/packages/chronicle/src/components/mdx/link.tsx b/packages/chronicle/src/components/mdx/link.tsx
index 18f30d6f..73cccc47 100644
--- a/packages/chronicle/src/components/mdx/link.tsx
+++ b/packages/chronicle/src/components/mdx/link.tsx
@@ -1,10 +1,12 @@
 import { Link as ApsaraLink } from '@raystack/apsara';
-import type { ComponentProps } from 'react';
-import { Link as RouterLink } from 'react-router';
+import type { ComponentProps, MouseEvent } from 'react';
+import { useNavigate } from 'react-router';
 
 type LinkProps = ComponentProps<'a'>;
 
-export function Link({ href, children, ...props }: LinkProps) {
+export function Link({ href, children, onClick: onClickProp, ...props }: LinkProps) {
+  const navigate = useNavigate();
+
   if (!href) {
     return <span {...props}>{children}</span>;
   }
@@ -12,14 +14,6 @@ export function Link({ href, children, ...props }: LinkProps) {
   const isExternal = href.startsWith('http://') || href.startsWith('https://');
   const isAnchor = href.startsWith('#');
 
-  if (isAnchor) {
-    return (
-      <ApsaraLink href={href} {...props}>
-        {children}
-      </ApsaraLink>
-    );
-  }
-
   if (isExternal) {
     return (
       <ApsaraLink
@@ -33,9 +27,36 @@ export function Link({ href, children, ...props }: LinkProps) {
     );
   }
 
+  if (isAnchor) {
+    return (
+      <ApsaraLink href={href} {...props}>
+        {children}
+      </ApsaraLink>
+    );
+  }
+
+  const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    if (
+      e.defaultPrevented ||
+      e.button !== 0 ||
+      e.metaKey ||
+      e.ctrlKey ||
+      e.shiftKey ||
+      e.altKey
+    ) {
+      return;
+    }
+
+    onClickProp?.(e);
+    if (e.defaultPrevented) return;
+
+    e.preventDefault();
+    navigate(href);
+  };
+
   return (
-    <RouterLink to={href} className={props.className}>
+    <ApsaraLink href={href} {...props} onClick={onClick}>
       {children}
-    </RouterLink>
+    </ApsaraLink>
   );
 }
diff --git a/packages/chronicle/src/pages/DocsPage.tsx b/packages/chronicle/src/pages/DocsPage.tsx
index 94a0206f..3ebb7928 100644
--- a/packages/chronicle/src/pages/DocsPage.tsx
+++ b/packages/chronicle/src/pages/DocsPage.tsx
@@ -30,7 +30,7 @@ export function DocsPage({ slug }: DocsPageProps) {
       />
       <Page
         page={{
-          slug,
+          slug: page.slug,
           frontmatter: page.frontmatter,
           content: page.content,
           toc: page.toc
diff --git a/packages/chronicle/src/server/api/page/index.ts b/packages/chronicle/src/server/api/page/index.ts
new file mode 100644
index 00000000..347ef5d4
--- /dev/null
+++ b/packages/chronicle/src/server/api/page/index.ts
@@ -0,0 +1 @@
+export { default } from './[...slug]';