diff --git a/apps/web/pages/documents/[id]/index.tsx b/apps/web/pages/documents/[id]/index.tsx
index 7fb6dfe23..72735a157 100644
--- a/apps/web/pages/documents/[id]/index.tsx
+++ b/apps/web/pages/documents/[id]/index.tsx
@@ -56,7 +56,10 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
                   className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
                   aria-hidden="true"
                 />
-                {props?.document?.Recipient?.length} Recipients
+
+                <Link href={`/documents/${props.document.id}/recipients`}>
+                  {props?.document?.Recipient?.length} Recipients
+                </Link>
               </div>
               <div className="mt-2 flex items-center text-sm text-gray-500">
                 <InformationCircleIcon
diff --git a/apps/web/pages/documents/[id]/recipients.tsx b/apps/web/pages/documents/[id]/recipients.tsx
index 98d15154d..595b329d0 100644
--- a/apps/web/pages/documents/[id]/recipients.tsx
+++ b/apps/web/pages/documents/[id]/recipients.tsx
@@ -159,19 +159,13 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
             icon={UserPlusIcon}
             className="mt-3"
             onClick={() => {
-              setSigners(
-                signers.concat({
-                  id: "",
-                  email: "",
-                  name: "",
-                  documentId: props.document.id,
-                })
-              );
               upsertRecipient({
                 id: "",
                 email: "",
                 name: "",
                 documentId: props.document.id,
+              }).then((res) => {
+                setSigners(signers.concat(res));
               });
             }}
           >
@@ -218,9 +212,9 @@ async function deleteRecipient(recipient: any) {
   );
 }
 
-async function upsertRecipient(recipient: any) {
+async function upsertRecipient(recipient: any): Promise<any> {
   try {
-    await toast.promise(
+    const created = await toast.promise(
       fetch("/api/documents/" + recipient.documentId + "/recipients", {
         method: "POST",
         headers: {
@@ -231,6 +225,7 @@ async function upsertRecipient(recipient: any) {
         if (!res.ok) {
           throw new Error(res.status.toString());
         }
+        return res.json();
       }),
       {
         loading: "Saving...",
@@ -244,6 +239,7 @@ async function upsertRecipient(recipient: any) {
         },
       }
     );
+    return created;
   } catch (error) {}
 }
 
diff --git a/packages/prisma/schema.prisma b/packages/prisma/schema.prisma
index 1fa60c27a..d6ffc6f33 100644
--- a/packages/prisma/schema.prisma
+++ b/packages/prisma/schema.prisma
@@ -20,7 +20,7 @@ model Document {
 model Recipient {
   id            Int           @id @default(autoincrement())
   documentId    Int
-  email         String        @unique @db.VarChar(255)
+  email         String        @db.VarChar(255)
   name          String        @default("") @db.VarChar(255)
   token         String
   readStatus    ReadStatus    @default(NOT_OPENED)