diff --git a/apps/web/pages/documents/[id]/recipients.tsx b/apps/web/pages/documents/[id]/recipients.tsx
index ed8e50f97..631d15c9d 100644
--- a/apps/web/pages/documents/[id]/recipients.tsx
+++ b/apps/web/pages/documents/[id]/recipients.tsx
@@ -15,21 +15,120 @@ import {
   TrashIcon,
   UserPlusIcon,
 } from "@heroicons/react/20/solid";
-import { classNames } from "@documenso/lib";
+import { classNames, NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib";
 import {
+  PaperAirplaneIcon,
   UserGroupIcon,
   UserIcon,
   UsersIcon,
 } from "@heroicons/react/24/outline";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
+import { getUserFromToken } from "@documenso/lib/server";
 
-const RecipientsPage: NextPageWithLayout = () => {
+const RecipientsPage: NextPageWithLayout = (props: any) => {
+  const title: string =
+    `"` + props?.document?.title + `"` + "Recipients | Documenso";
   return (
     <>
       <Head>
-        <title>Documenttitle - Recipients | Documenso</title>
+        <title>{title}</title>
       </Head>
-      -todo add signers ui -todo add breadcrumps -todo who will sign this
-      dropdown
+      {/* -todo add signers ui -todo add breadcrumps -todo who will sign this
+      dropdown */}
+      <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>
+        </div>
+        <div className="mt-2 md:flex md:items-center md:justify-between">
+          <div className="min-w-0 flex-1">
+            <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
+              {props.document.title}
+            </h2>
+          </div>
+          <div className="mt-4 flex flex-shrink-0 md:mt-0 md:ml-4">
+            <button
+              type="button"
+              className="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+            >
+              Save and Close
+            </button>
+            <button
+              type="button"
+              disabled={(props?.document?.Recipient?.length || 0) === 0}
+              onClick={() =>
+                confirm(
+                  `Send document out to ${props?.document?.recipient?.length} recipients?`
+                )
+              }
+              className="ml-3 inline-flex items-center rounded-md border border-transparent bg-neon px-4 py-2 text-sm font-medium text-white shadow-sm bg-grey hover:bg-neon-dark focus:outline-none focus:ring-2 focus:neon-dark focus:ring-offset-2"
+            >
+              <PaperAirplaneIcon className="inline text-white w-4 mr-1"></PaperAirplaneIcon>
+              Send
+            </button>
+          </div>
+        </div>
+      </div>
     </>
   );
 };
@@ -39,9 +138,23 @@ RecipientsPage.getLayout = function getLayout(page: ReactElement) {
 };
 
 export async function getServerSideProps(context: any) {
-  // todo get current document
+  const user = await getUserFromToken(context.req, context.res);
+  if (!user) return;
+
+  const { id: documentId } = context.query;
+  const document = await prisma.document.findFirstOrThrow({
+    where: {
+      id: +documentId,
+    },
+    include: {
+      Recipient: true,
+    },
+  });
+
   return {
-    props: {},
+    props: {
+      document: document,
+    },
   };
 }
 
