diff --git a/apps/site/src/content/design-system/components/breadcrumb/accessibilityDemo.mdoc b/apps/site/src/content/design-system/components/breadcrumb/accessibilityDemo.mdoc
index 4cce98db2..6a21514e7 100644
--- a/apps/site/src/content/design-system/components/breadcrumb/accessibilityDemo.mdoc
+++ b/apps/site/src/content/design-system/components/breadcrumb/accessibilityDemo.mdoc
@@ -1,12 +1,12 @@
 ```jsx
-// Using the Link component (as NextLink) from 'next/LinkLink'
-<div className="flex flex-col gap-5">
-  <Breadcrumb aria-label="Page transitions and the such">
+// Using the Link component (as NextLink) from 'next/Link'
+<div className="flex flex-col gap-4">
+  <Breadcrumb aria-label="Page transitions and the such" className="px-3 py-1 mt-2">
     <NextLink href="#home" passHref legacyBehavior>
       <Breadcrumb.Item isCurrent tag="a">Home</Breadcrumb.Item>
     </NextLink>
   </Breadcrumb>
-  <Breadcrumb aria-label="Page transitions and the such">
+  <Breadcrumb aria-label="Page transitions and the such" className="px-3 py-1">
     <NextLink href="#home" passHref legacyBehavior>
       <Breadcrumb.Item tag="a">Home</Breadcrumb.Item>
     </NextLink>
@@ -14,7 +14,7 @@
       <Breadcrumb.Item tag="a" isCurrent>Personal</Breadcrumb.Item>
     </NextLink>
   </Breadcrumb>
-  <Breadcrumb aria-label="Page transitions and the such">
+  <Breadcrumb aria-label="Page transitions and the such" className="px-3 py-1 mb-2">
     <NextLink href="#home" passHref legacyBehavior>
       <Breadcrumb.Item tag="a">Home</Breadcrumb.Item>
     </NextLink>
@@ -25,23 +25,5 @@
       <Breadcrumb.Item tag="a" isCurrent>Credit cards</Breadcrumb.Item>
     </NextLink>
   </Breadcrumb>
-  <Breadcrumb>
-    <NextLink href="#test" passHref legacyBehavior>
-      <Breadcrumb.Item tag="a">Anchor item</Breadcrumb.Item>
-    </NextLink>
-    <NextLink href="#another" passHref legacyBehavior>
-      <Breadcrumb.Item tag="a">Another anchor item</Breadcrumb.Item>
-    </NextLink>
-    <NextLink href="#another" passHref legacyBehavior>
-      <Breadcrumb.Item isDisabled tag="a">
-        Disabled item
-      </Breadcrumb.Item>
-    </NextLink>
-    <NextLink href="#another" passHref legacyBehavior>
-      <Breadcrumb.Item isCurrent tag="a">
-        Last item
-      </Breadcrumb.Item>
-    </NextLink>
-  </Breadcrumb>
 </div>
 ```
diff --git a/apps/site/src/content/design-system/components/breadcrumb/code.mdoc b/apps/site/src/content/design-system/components/breadcrumb/code.mdoc
index 6e6a7aeb1..dccb4cca1 100644
--- a/apps/site/src/content/design-system/components/breadcrumb/code.mdoc
+++ b/apps/site/src/content/design-system/components/breadcrumb/code.mdoc
@@ -1,24 +1,30 @@
 ### Default breadcrumb
 
 ```jsx
-// Using the Link component (as NextLink) from 'next/LinkLink'
-<div>
-  <Breadcrumb>
-    <NextLink href="#test" passHref legacyBehavior>
-      <Breadcrumb.Item tag="a">Anchor item</Breadcrumb.Item>
+// Using the Link component (as NextLink) from 'next/Link'
+<div className="flex flex-col gap-5">
+  <Breadcrumb aria-label="Page transitions and the such">
+    <NextLink href="#home" passHref legacyBehavior>
+      <Breadcrumb.Item isCurrent tag="a">Home</Breadcrumb.Item>
     </NextLink>
-    <NextLink href="#another" passHref legacyBehavior>
-      <Breadcrumb.Item tag="a">Another anchor item</Breadcrumb.Item>
+  </Breadcrumb>
+  <Breadcrumb aria-label="Page transitions and the such">
+    <NextLink href="#home" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Home</Breadcrumb.Item>
     </NextLink>
-    <NextLink href="#another" passHref legacyBehavior>
-      <Breadcrumb.Item isDisabled tag="a">
-        Disabled item
-      </Breadcrumb.Item>
+    <NextLink href="#personal" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a" isCurrent>Personal</Breadcrumb.Item>
     </NextLink>
-    <NextLink href="#another" passHref legacyBehavior>
-      <Breadcrumb.Item isCurrent tag="a">
-        Last item
-      </Breadcrumb.Item>
+  </Breadcrumb>
+  <Breadcrumb aria-label="Page transitions and the such">
+    <NextLink href="#home" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Home</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#personal" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Personal</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#credit-cards" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a" isCurrent>Credit cards</Breadcrumb.Item>
     </NextLink>
   </Breadcrumb>
 </div>
diff --git a/apps/site/src/content/design-system/components/breadcrumb/design/breadcrumbs/content.mdoc b/apps/site/src/content/design-system/components/breadcrumb/design/breadcrumbs/content.mdoc
index ea461ece0..e2228c2e8 100644
--- a/apps/site/src/content/design-system/components/breadcrumb/design/breadcrumbs/content.mdoc
+++ b/apps/site/src/content/design-system/components/breadcrumb/design/breadcrumbs/content.mdoc
@@ -1,23 +1,31 @@
 Breadcrumbs come in one style for navigational consistency across all touch-points.
 
 ```jsx
-// Using the Link component (as NextLink) from 'next/LinkLink'
-<Breadcrumb>
-  <NextLink href="#test" passHref legacyBehavior>
-    <Breadcrumb.Item tag="a">Anchor item</Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item tag="a">Another anchor item</Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item isDisabled tag="a">
-      Disabled item
-    </Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item isCurrent tag="a">
-      Last item
-    </Breadcrumb.Item>
-  </NextLink>
-</Breadcrumb>
+// Using the Link component (as NextLink) from 'next/Link'
+<div className="flex flex-col gap-4">
+  <Breadcrumb aria-label="Page transitions and the such" className="px-3 py-1 mt-2">
+    <NextLink href="#home" passHref legacyBehavior>
+      <Breadcrumb.Item isCurrent tag="a">Home</Breadcrumb.Item>
+    </NextLink>
+  </Breadcrumb>
+  <Breadcrumb aria-label="Page transitions and the such" className="px-3 py-1">
+    <NextLink href="#home" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Home</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#personal" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a" isCurrent>Personal</Breadcrumb.Item>
+    </NextLink>
+  </Breadcrumb>
+  <Breadcrumb aria-label="Page transitions and the such" className="px-3 py-1 mb-2">
+    <NextLink href="#home" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Home</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#personal" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a">Personal</Breadcrumb.Item>
+    </NextLink>
+    <NextLink href="#credit-cards" passHref legacyBehavior>
+      <Breadcrumb.Item tag="a" isCurrent>Credit cards</Breadcrumb.Item>
+    </NextLink>
+  </Breadcrumb>
+</div>
 ```