diff --git a/apps/web/pages/documents/[id]/index.tsx b/apps/web/pages/documents/[id]/index.tsx
index f14d76442..5e2176013 100644
--- a/apps/web/pages/documents/[id]/index.tsx
+++ b/apps/web/pages/documents/[id]/index.tsx
@@ -30,7 +30,20 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
     <div className="mt-4">
       <div>
         <div>
-          <Breadcrumb document={props.document}></Breadcrumb>
+          <Breadcrumb
+            document={props.document}
+            items={[
+              {
+                title: "Documents",
+                href: "/documents",
+              },
+              {
+                title: props.document.title,
+                href:
+                  NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id,
+              },
+            ]}
+          />
         </div>
         <div className="mt-2 md:flex md:items-center md:justify-between">
           <div className="min-w-0 flex-1">
diff --git a/apps/web/pages/documents/[id]/recipients.tsx b/apps/web/pages/documents/[id]/recipients.tsx
index f3c0ea919..81960428c 100644
--- a/apps/web/pages/documents/[id]/recipients.tsx
+++ b/apps/web/pages/documents/[id]/recipients.tsx
@@ -10,7 +10,7 @@ import { useRouter } from "next/router";
 import { toast } from "react-hot-toast";
 import { getDocument } from "@documenso/lib/query";
 import { Document as PrismaDocument } from "@prisma/client";
-import { Button } from "@documenso/ui";
+import { Breadcrumb, Button } from "@documenso/ui";
 
 const RecipientsPage: NextPageWithLayout = (props: any) => {
   const router = useRouter();
@@ -23,68 +23,28 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
       </Head>
       <div className="mt-10">
         <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>
-              <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 +
-                      "/recipients"
-                    }
-                    aria-current="page"
-                    className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
-                  >
-                    Recipients
-                  </a>
-                </div>
-              </li>
-            </ol>
-          </nav>
+          <Breadcrumb
+            document={props.document}
+            items={[
+              {
+                title: "Documents",
+                href: "/documents",
+              },
+              {
+                title: props.document.title,
+                href:
+                  NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id,
+              },
+              {
+                title: "Recipients",
+                href:
+                  NEXT_PUBLIC_WEBAPP_URL +
+                  "/documents/" +
+                  props.document.id +
+                  "/recipients",
+              },
+            ]}
+          />
         </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
index 47a3b0576..749026885 100644
--- a/packages/ui/components/breadcrumb/breadcrumb.tsx
+++ b/packages/ui/components/breadcrumb/breadcrumb.tsx
@@ -1,13 +1,18 @@
 import React from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib";
+import Link from "next/link";
 
 export function Breadcrumb(props: any) {
   return (
     <>
       <nav className="sm:hidden" aria-label="Back">
-        <a
-          href="#"
+        <Link
+          href={
+            props.items.length > 1
+              ? props.items[props.items.length - 2].href
+              : props.items[0].href
+          }
           className="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700"
         >
           <ChevronLeftIcon
@@ -15,36 +20,33 @@ export function Breadcrumb(props: any) {
             aria-hidden="true"
           />
           Back
-        </a>
+        </Link>
       </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>
+          {props?.items.map((item: any, index: number) => (
+            <React.Fragment>
+              {index > 0 ? (
+                <ChevronRightIcon
+                  key={item.href}
+                  className="h-5 w-5 flex-shrink-0 text-gray-400"
+                  aria-hidden="true"
+                />
+              ) : (
+                ""
+              )}
+              <li key={item.href}>
+                <div className="flex">
+                  <Link
+                    href={item.href}
+                    className="text-sm font-medium text-gray-500 hover:text-gray-700"
+                  >
+                    {item.title}
+                  </Link>
+                </div>
+              </li>
+            </React.Fragment>
+          ))}
         </ol>
       </nav>
     </>