diff --git a/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx b/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx
index 95aef019..4bc63a9e 100644
--- a/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx
@@ -4,21 +4,21 @@ import { Link, Head } from 'tuono'
 import { IconChevronRight, IconBolt } from '@tabler/icons-react'
 
 interface Breadcrumb {
-	href?: string
-	label: string
+  href?: string
+  label: string
 }
 interface BreadcrumbsProps {
-	breadcrumbs: Breadcrumb[]
+  breadcrumbs: Breadcrumb[]
 }
 
 export default function TuonoBreadcrumbs({
-	breadcrumbs = [],
+  breadcrumbs = [],
 }: BreadcrumbsProps): JSX.Element {
-	return (
-		<>
-			<Head>
-				<script type="application/ld+json">
-					{`[
+  return (
+    <>
+      <Head>
+        <script type="application/ld+json">
+          {`[
             {
               "@context": "https://schema.org",
               "@type": "BreadcrumbList",
@@ -36,61 +36,61 @@ export default function TuonoBreadcrumbs({
                   "item": "https://tuono.dev/documentation",
                 }${breadcrumbs.length > 0 ? ',' : ''}
                 ${breadcrumbs
-							.map((br, i) =>
-								JSON.stringify({
-									'@type': 'ListItem',
-									position: i + 3,
-									name: br.label,
-									item: br.href ? `https://tuono.dev${br.href}` : undefined,
-								}),
-							)
-							.join(',')}]
+                  .map((br, i) =>
+                    JSON.stringify({
+                      '@type': 'ListItem',
+                      position: i + 3,
+                      name: br.label,
+                      item: br.href ? `https://tuono.dev${br.href}` : undefined,
+                    }),
+                  )
+                  .join(',')}]
             }
           ]`}
-				</script>
-			</Head>
-			<Breadcrumbs
-				separator={<IconChevronRight size="1.1rem" stroke={1.5} />}
-				mb="md"
-				mt="md"
-			>
-				<Button
-					href="/documentation"
-					component={Link}
-					variant="subtle"
-					radius="xl"
-					p={5}
-				>
-					<IconBolt />
-				</Button>
-				{breadcrumbs.map((br) => (
-					<BreadcrumbElement href={br.href} label={br.label} key={br.label} />
-				))}
-			</Breadcrumbs>
-		</>
-	)
+        </script>
+      </Head>
+      <Breadcrumbs
+        separator={<IconChevronRight size="1.1rem" stroke={1.5} />}
+        mb="md"
+        mt="md"
+      >
+        <Button
+          href="/documentation"
+          component={Link}
+          variant="subtle"
+          radius="xl"
+          p={5}
+        >
+          <IconBolt />
+        </Button>
+        {breadcrumbs.map((br) => (
+          <BreadcrumbElement href={br.href} label={br.label} key={br.label} />
+        ))}
+      </Breadcrumbs>
+    </>
+  )
 }
 
 interface BreadcrumbElementProps {
-	href?: string
-	label: string
+  href?: string
+  label: string
 }
 
 export function BreadcrumbElement({
-	href,
-	label,
+  href,
+  label,
 }: BreadcrumbElementProps): JSX.Element {
-	if (href) {
-		return (
-			<Button component={Link} href={href} variant="subtle" radius="xl" px={10}>
-				{label}
-			</Button>
-		)
-	}
+  if (href) {
+    return (
+      <Button component={Link} href={href} variant="subtle" radius="xl" px={10}>
+        {label}
+      </Button>
+    )
+  }
 
-	return (
-		<Button component="span" variant="light" radius="xl">
-			{label}
-		</Button>
-	)
+  return (
+    <Button component="span" variant="light" radius="xl">
+      {label}
+    </Button>
+  )
 }
