diff --git a/packages/chronicle/src/components/ui/breadcrumbs.tsx b/packages/chronicle/src/components/ui/breadcrumbs.tsx
index c7724e1a..7f9c2afc 100644
--- a/packages/chronicle/src/components/ui/breadcrumbs.tsx
+++ b/packages/chronicle/src/components/ui/breadcrumbs.tsx
@@ -8,16 +8,17 @@ import { Link as RouterLink } from 'react-router'
 interface BreadcrumbsProps {
   slug: string[]
   tree: Root
+  className?: string
 }
 
-export function Breadcrumbs({ slug, tree }: BreadcrumbsProps) {
+export function Breadcrumbs({ slug, tree, className }: BreadcrumbsProps) {
   const url = slug.length === 0 ? '/' : `/${slug.join('/')}`
   const items = getBreadcrumbItems(url, tree, { includePage: true })
 
   if (items.length === 0) return null
 
   return (
-    <Breadcrumb size="small">
+    <Breadcrumb size="small" className={className}>
       {items.flatMap((item, index) => {
         const isCurrent = index === items.length - 1
         const breadcrumbItem = (
diff --git a/packages/chronicle/src/themes/paper/ChapterNav.module.css b/packages/chronicle/src/themes/paper/ChapterNav.module.css
index bbf525c4..2205aac6 100644
--- a/packages/chronicle/src/themes/paper/ChapterNav.module.css
+++ b/packages/chronicle/src/themes/paper/ChapterNav.module.css
@@ -65,6 +65,10 @@
   flex-shrink: 0;
 }
 
+.subFolder {
+  margin-top: var(--rs-space-5);
+}
+
 .subLabel {
   font-family: var(--paper-font-mono);
   font-size: var(--rs-font-size-small);
diff --git a/packages/chronicle/src/themes/paper/ChapterNav.tsx b/packages/chronicle/src/themes/paper/ChapterNav.tsx
index d0923448..11a36b65 100644
--- a/packages/chronicle/src/themes/paper/ChapterNav.tsx
+++ b/packages/chronicle/src/themes/paper/ChapterNav.tsx
@@ -67,7 +67,7 @@ function ChapterItem({
 
   if (item.type === 'folder') {
     return (
-      <li>
+      <li className={styles.subFolder}>
         <span className={styles.subLabel}>{item.name}</span>
         <ul className={styles.chapterItems}>
           {item.children.map(child => (
diff --git a/packages/chronicle/src/themes/paper/Page.module.css b/packages/chronicle/src/themes/paper/Page.module.css
index 92bcad75..0ee712e0 100644
--- a/packages/chronicle/src/themes/paper/Page.module.css
+++ b/packages/chronicle/src/themes/paper/Page.module.css
@@ -68,34 +68,12 @@
 }
 
 .breadcrumb {
-  display: flex;
-  align-items: center;
   font-family: var(--paper-font-mono);
   font-size: var(--rs-font-size-small);
   line-height: var(--rs-line-height-small);
   letter-spacing: var(--rs-letter-spacing-small);
 }
 
-.separator {
-  margin: 0 var(--rs-space-1);
-  color: var(--rs-color-foreground-base-tertiary);
-}
-
-.crumbLink {
-  color: var(--rs-color-foreground-base-tertiary);
-  font-weight: var(--rs-font-weight-medium);
-  text-decoration: none;
-}
-
-.crumbLink:hover {
-  color: var(--rs-color-foreground-base-primary);
-}
-
-.crumbActive {
-  color: var(--rs-color-foreground-base-primary);
-  font-weight: var(--rs-font-weight-medium);
-}
-
 .article {
   flex: 1;
   min-width: 0;
@@ -219,6 +197,9 @@
 }
 
 .content table {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
   margin-bottom: var(--rs-space-5);
 }
 
diff --git a/packages/chronicle/src/themes/paper/Page.tsx b/packages/chronicle/src/themes/paper/Page.tsx
index 7792c7b1..447c754f 100644
--- a/packages/chronicle/src/themes/paper/Page.tsx
+++ b/packages/chronicle/src/themes/paper/Page.tsx
@@ -1,7 +1,6 @@
 import {
   ArrowLeftIcon,
   ArrowRightIcon,
-  ChevronRightIcon,
   AdjustmentsHorizontalIcon,
   EyeIcon,
   SunIcon,
@@ -11,8 +10,8 @@ import {
 import { IconButton, useTheme } from '@raystack/apsara';
 import { useEffect, useMemo, useState } from 'react';
 import { Link as RouterLink, useLocation } from 'react-router';
-import { getBreadcrumbItems } from 'fumadocs-core/breadcrumb';
 import { flattenTree } from 'fumadocs-core/page-tree';
+import { Breadcrumbs } from '@/components/ui/breadcrumbs';
 import type { ThemePageProps } from '@/types';
 import styles from './Page.module.css';
 import { useReaderMode } from './ReaderModeContext';
@@ -27,21 +26,14 @@ export function Page({ page, tree }: ThemePageProps) {
 
   useEffect(() => { setIsClient(true); }, []);
 
-  const { prev, next, crumbs } = useMemo(() => {
+  const slug = pathname === '/' ? [] : pathname.replace(/^\//, '').split('/');
+
+  const { prev, next } = useMemo(() => {
     const pages = flattenTree(tree.children);
     const currentIndex = pages.findIndex(p => p.url === pathname);
-    const breadcrumbItems = getBreadcrumbItems(
-      pathname,
-      tree,
-      { includePage: true }
-    );
     return {
       prev: currentIndex > 0 ? pages[currentIndex - 1] : null,
       next: currentIndex < pages.length - 1 ? pages[currentIndex + 1] : null,
-      crumbs: breadcrumbItems.map(item => ({
-        label: item.name,
-        href: item.url ?? pathname,
-      })),
     };
   }, [tree, pathname]);
 
@@ -70,20 +62,7 @@ export function Page({ page, tree }: ThemePageProps) {
                 </span>
               )}
             </div>
-            <nav className={styles.breadcrumb}>
-              {crumbs.map((crumb, i) => (
-                <span key={crumb.href}>
-                  {i > 0 && <ChevronRightIcon width={12} height={12} className={styles.separator} />}
-                  {i === crumbs.length - 1 ? (
-                    <span className={styles.crumbActive}>{crumb.label}</span>
-                  ) : (
-                    <RouterLink to={crumb.href} className={styles.crumbLink}>
-                      {crumb.label}
-                    </RouterLink>
-                  )}
-                </span>
-              ))}
-            </nav>
+            <Breadcrumbs slug={slug} tree={tree} className={styles.breadcrumb} />
           </div>
           <div className={styles.navRight}>
             {settingsOpen ? (