diff --git a/apps/web/pages/dashboard.tsx b/apps/web/pages/dashboard.tsx
index ef66d3b77..3f38efd5e 100644
--- a/apps/web/pages/dashboard.tsx
+++ b/apps/web/pages/dashboard.tsx
@@ -119,8 +119,8 @@ const DashboardPage: NextPageWithLayout = (props: any) => {
             aria-hidden="true"
           >
             <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
+              strokeLinecap="round"
+              strokeLinejoin="round"
               d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
             />
           </svg>
diff --git a/apps/web/pages/documents/[id]/index.tsx b/apps/web/pages/documents/[id]/index.tsx
index b660bb332..f14d76442 100644
--- a/apps/web/pages/documents/[id]/index.tsx
+++ b/apps/web/pages/documents/[id]/index.tsx
@@ -17,7 +17,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { getDocument } from "@documenso/lib/query";
 import { Document as PrismaDocument } from "@prisma/client";
-import { Button } from "@documenso/ui";
+import { Button, Breadcrumb } from "@documenso/ui";
 
 const PDFViewer = dynamic(() => import("../../../components/pdf-viewer"), {
   ssr: false,
@@ -30,48 +30,7 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
     <div className="mt-4">
       <div>
         <div>
-          <nav className="sm:hidden" aria-label="Back">
-            <a
-              href="#"
-              className="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700"
-            >
-              <ChevronLeftIcon
-                className="-ml-1 mr-1 h-5 w-5 flex-shrink-0 text-gray-400"
-                aria-hidden="true"
-              />
-              Back
-            </a>
-          </nav>
-          <nav className="hidden sm:flex" aria-label="Breadcrumb">
-            <ol role="list" className="flex items-center space-x-4">
-              <li>
-                <div className="flex">
-                  <a
-                    href="/documents"
-                    className="text-sm font-medium text-gray-500 hover:text-gray-700"
-                  >
-                    Documents
-                  </a>
-                </div>
-              </li>
-              <li>
-                <div className="flex items-center">
-                  <ChevronRightIcon
-                    className="h-5 w-5 flex-shrink-0 text-gray-400"
-                    aria-hidden="true"
-                  />
-                  <a
-                    href={
-                      NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id
-                    }
-                    className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
-                  >
-                    "{props.document.title}"
-                  </a>
-                </div>
-              </li>
-            </ol>
-          </nav>
+          <Breadcrumb document={props.document}></Breadcrumb>
         </div>
         <div className="mt-2 md:flex md:items-center md:justify-between">
           <div className="min-w-0 flex-1">
diff --git a/packages/ui/components/breadcrumb/breadcrumb.tsx b/packages/ui/components/breadcrumb/breadcrumb.tsx
new file mode 100644
index 000000000..47a3b0576
--- /dev/null
+++ b/packages/ui/components/breadcrumb/breadcrumb.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
+import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib";
+
+export function Breadcrumb(props: any) {
+  return (
+    <>
+      <nav className="sm:hidden" aria-label="Back">
+        <a
+          href="#"
+          className="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700"
+        >
+          <ChevronLeftIcon
+            className="-ml-1 mr-1 h-5 w-5 flex-shrink-0 text-gray-400"
+            aria-hidden="true"
+          />
+          Back
+        </a>
+      </nav>
+      <nav className="hidden sm:flex" aria-label="Breadcrumb">
+        <ol role="list" className="flex items-center space-x-4">
+          <li>
+            <div className="flex">
+              <a
+                href="/documents"
+                className="text-sm font-medium text-gray-500 hover:text-gray-700"
+              >
+                Documents
+              </a>
+            </div>
+          </li>
+          <li>
+            <div className="flex items-center">
+              <ChevronRightIcon
+                className="h-5 w-5 flex-shrink-0 text-gray-400"
+                aria-hidden="true"
+              />
+              <a
+                href={
+                  NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id
+                }
+                className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
+              >
+                "{props.document.title}"
+              </a>
+            </div>
+          </li>
+        </ol>
+      </nav>
+    </>
+  );
+}
diff --git a/packages/ui/components/breadcrumb/index.ts b/packages/ui/components/breadcrumb/index.ts
new file mode 100644
index 000000000..69b4a5ced
--- /dev/null
+++ b/packages/ui/components/breadcrumb/index.ts
@@ -0,0 +1 @@
+export { Breadcrumb } from "./breadcrumb";
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index a87f77d62..3115d535d 100644
--- a/packages/ui/index.ts
+++ b/packages/ui/index.ts
@@ -1 +1,2 @@
 export { Button } from "./components/button/index";
+export { Breadcrumb } from "./components/breadcrumb/index";