diff --git a/app/layout.tsx b/app/layout.tsx
index e031f9c..6c0a171 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import Navbar from '@/components/Navbar'
+import SiteTree from '@/components/SiteTree'
 import { MDXProvider } from '@mdx-js/react'
 import { Inter } from 'next/font/google'
 import './globals.css'
@@ -23,6 +24,7 @@ export default function RootLayout({
         <body className={inter.className}>
           <>
           <Navbar />
+          <SiteTree />
           {children}
           </>
         </body>
diff --git a/components/SiteTree.tsx b/components/SiteTree.tsx
index e69de29..0f64726 100644
--- a/components/SiteTree.tsx
+++ b/components/SiteTree.tsx
@@ -0,0 +1,30 @@
+'use client'
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+import { v4 } from 'uuid'
+
+export default function SiteTree() {
+    const pathname = usePathname()
+    const pathAsArray = pathname.split('/').filter(x => x !== '');
+
+    return (
+        <div className="flex flex-nowrap">
+            <Link href="/">
+                <p className="mx-4">home</p>
+            </Link>
+
+            {pathAsArray.map((segment: string, idx: number) => {
+                const path = pathAsArray.slice(0, idx + 1).join('/')
+
+                return (
+                    <>
+                    <p className="mr-4">/</p>
+                    <Link href={path} key={v4()}>
+                        <p className="mr-4">{segment}</p>
+                    </Link>
+                    </>
+                )
+            })}
+        </div>
+    )
+}
diff --git a/package.json b/package.json
index 5393650..6f2bbde 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,10 @@
     "react-dom": "18.2.0",
     "remark-prism": "^1.3.6",
     "tailwindcss": "3.3.2",
-    "typescript": "5.0.4"
+    "typescript": "5.0.4",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/uuid": "^9.0.1"
   }
 }
