diff --git a/src/components/Breadcrumbs.astro b/src/components/Breadcrumbs.astro
new file mode 100644
index 0000000..579dfdc
--- /dev/null
+++ b/src/components/Breadcrumbs.astro
@@ -0,0 +1,30 @@
+---
+type BreadcrumbItem = {
+  label: string;
+  href?: string;
+};
+
+const { items = [] } = Astro.props as { items?: BreadcrumbItem[] };
+---
+
+{
+  items.length > 0 && (
+    <nav aria-label="Breadcrumb">
+      <ol>
+        {items.map((item, index) => {
+          const isCurrent = index === items.length - 1;
+
+          return (
+            <li>
+              {item.href && !isCurrent ? (
+                <a href={item.href}>{item.label}</a>
+              ) : (
+                <span aria-current={isCurrent ? "page" : undefined}>{item.label}</span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  )
+}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 150c9f4..f70b413 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,5 +1,12 @@
 ---
-const { title } = Astro.props;
+import "../styles/global.css";
+import Breadcrumbs from "../components/Breadcrumbs.astro";
+import type { BreadcrumbItem } from "../lib/types/breadcrum";
+
+const { title, breadcrumbs = [] } = Astro.props as {
+    title: string;
+    breadcrumbs?: BreadcrumbItem[];
+};
 ---
 
 <!DOCTYPE html>
@@ -10,6 +17,9 @@ const { title } = Astro.props;
     <title>Radium Help - {title}</title>
 </head>
 <body>
-    <slot />
+    <main class="page-shell">
+        <Breadcrumbs items={breadcrumbs} />
+        <slot />
+    </main>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/lib/types/breadcrum.ts b/src/lib/types/breadcrum.ts
new file mode 100644
index 0000000..227a47f
--- /dev/null
+++ b/src/lib/types/breadcrum.ts
@@ -0,0 +1,4 @@
+export type BreadcrumbItem = {
+  label: string;
+  href?: string;
+};
\ No newline at end of file
diff --git a/src/pages/[collection]/[...slug].astro b/src/pages/[collection]/[...slug].astro
index 2251fc0..4627d9d 100644
--- a/src/pages/[collection]/[...slug].astro
+++ b/src/pages/[collection]/[...slug].astro
@@ -30,9 +30,24 @@ if (!collection || !isSiteCollection(collection)) {
 }
 
 const { entry } = Astro.props;
+const entries = await getCollection(collection);
+const collectionIndex = entries.find((item) => item.id === "index");
+const entryUrl = entry.id === "index" ? `/${collection}` : `/${collection}/${entry.id}`;
+const breadcrumbs = [
+  { label: "Radie Help", href: "/" },
+  {
+    label: collectionIndex?.data.title ?? collection,
+    href: entry.id === "index" ? undefined : `/${collection}`,
+  },
+];
+
+if (entry.id !== "index") {
+  breadcrumbs.push({ label: entry.data.title, href: entryUrl });
+}
+
 const { Content } = await render(entry);
 ---
 
-<Layout title={entry.data.title}>
+<Layout title={entry.data.title} breadcrumbs={breadcrumbs}>
   <Content />
-</Layout>
\ No newline at end of file
+</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 946be82..680fa12 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,8 +1,10 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import TOC from "../components/TOC.astro";
+
+const breadcrumbs = [{ label: "Radie Help" }];
 ---
 
-<Layout title="Home">
+<Layout title="Home" breadcrumbs={breadcrumbs}>
   <TOC />
 </Layout>
diff --git a/src/styles/global.css b/src/styles/global.css
index a461c50..ba7b7df 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1 +1 @@
-@import "tailwindcss";
\ No newline at end of file
+/* @import "tailwindcss"; */
\ No newline at end of file
