diff --git a/src/docs/Components/Breadcrumb/breadcrumb-preview--small.png b/src/docs/Components/Breadcrumb/breadcrumb-preview--small.png
new file mode 100644
index 000000000..d3ff441a2
Binary files /dev/null and b/src/docs/Components/Breadcrumb/breadcrumb-preview--small.png differ
diff --git a/src/docs/Components/Breadcrumb/index.mdx b/src/docs/Components/Breadcrumb/index.mdx
index 8235ab2ff..68ae297f1 100644
--- a/src/docs/Components/Breadcrumb/index.mdx
+++ b/src/docs/Components/Breadcrumb/index.mdx
@@ -17,11 +17,11 @@ Every breadcrumb size variation is available both in light and dark version. Thi
 
 ### Light mode
 
---light mode preview--
+<Preview path="default" nude />
 
 ### Dark mode
 
---dark mode preview--
+<Preview path="dark-mode" nude />
 
 ## Breakpoint behaviours
 
@@ -29,13 +29,13 @@ Every breadcrumb size variation is available both in light and dark version. Thi
 
 Breadcrumb can't be fully displayed on smaller breakpoints, that is why this version allows you to go back on the previous level only.
 
---small breadcrumb preview--
+![preferences](breadcrumb-preview--small.png)
 
 ### Medium and larger breakpoints
 
 For medium and larger breakpoints, you can display the whole path of the current page. We used some links to inform the user that the breadcrumb is clickable.
 
---medium 768 breadcrumb preview--
+<Preview path="default" nude />
 
 ## Do & dont's