diff --git a/apps/web/components/editor/field.tsx b/apps/web/components/editor/field.tsx
index 259a8ac0b..69dfa6ff3 100644
--- a/apps/web/components/editor/field.tsx
+++ b/apps/web/components/editor/field.tsx
@@ -16,7 +16,7 @@ type FieldPropsType = {
     positionX: number;
     positionY: number;
     id: string;
-    recipient: string;
+    Recipient: { name: ""; email: "" };
   };
   onPositionChanged: any;
   onDelete: any;
@@ -53,13 +53,22 @@ export default function Field(props: FieldPropsType) {
     >
       <div
         ref={nodeRef}
-        style={{ background: stc(props.field.recipient) }}
         className="cursor-move opacity-80 p-2 m-auto w-auto flex-row-reverse text-lg font-bold text-center absolute top-0 left-0"
+        style={{
+          background: stc(props.field.Recipient.email),
+        }}
       >
+        <Logo className="mx-auto w-16 mb-2"></Logo>
         <div className="m-auto w-auto flex-row-reverse text-lg font-bold text-center">
           {/* todo icons */}
           {field.type}
-          <div className="text-xs text-center">{props.field.recipient}</div>
+          {field.type === "SIGNATURE" ? (
+            <div className="text-xs text-center">
+              {`${props.field.Recipient?.name} <${props.field.Recipient?.email}>`}
+            </div>
+          ) : (
+            ""
+          )}
         </div>
         <strong>
           <IconButton
diff --git a/apps/web/components/editor/pdf-editor.tsx b/apps/web/components/editor/pdf-editor.tsx
index cbd3552d8..a2231c5d6 100644
--- a/apps/web/components/editor/pdf-editor.tsx
+++ b/apps/web/components/editor/pdf-editor.tsx
@@ -1,11 +1,14 @@
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
 import { useRouter } from "next/router";
 import dynamic from "next/dynamic";
-import React, { useState } from "react";
+import React, { Fragment, useState } from "react";
 import { Button } from "@documenso/ui";
 import short from "short-uuid";
 import toast from "react-hot-toast";
 import { FieldType } from "@prisma/client";
+import { Listbox, Transition } from "@headlessui/react";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
+import { classNames } from "@documenso/lib";
 const stc = require("string-to-color");
 
 const PDFViewer = dynamic(() => import("./pdf-viewer"), {
@@ -13,7 +16,10 @@ const PDFViewer = dynamic(() => import("./pdf-viewer"), {
 });
 
 export default function PDFEditor(props: any) {
-  const [selectedValue, setSelectedValue] = useState("");
+  const [selectedRecipient, setSelectedRecipient]: any = useState(
+    props?.document?.Recipient[0]
+  );
+  const noRecipients = props?.document?.Recipient?.length === 0;
   const [fields, setFields] = useState<any[]>(props.document.Field);
   const router = useRouter();
 
@@ -44,50 +50,134 @@ export default function PDFEditor(props: any) {
 
   return (
     <>
-      <select
-        className="mb-3 inline mt-1 w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
-        style={{ background: stc(selectedValue) }}
-        value={selectedValue}
-        onChange={(e) => setSelectedValue(e.target.value)}
-      >
-        {props?.document?.Recipient?.map((item: any) => (
-          <option
-            key={item.email + short.generate().toString()}
-            style={{
-              background: stc(
-                item.name ? `${item.name} <${item.email}>` : item.email
-              ),
-            }}
-          >
-            {item.name ? `${item.name} <${item.email}>` : item.email}
-          </option>
-        ))}
-      </select>
-      <Button
-        className="inline ml-1"
-        onClick={() => {
-          const signatureField = {
-            id: -1,
-            page: 0,
-            type: FieldType.SIGNATURE,
-            positionX: 0,
-            positionY: 0,
-            recipient: selectedValue,
-          };
+      <div hidden={noRecipients}>
+        <Listbox value={selectedRecipient} onChange={setSelectedRecipient}>
+          {({ open }) => (
+            <div className="relative mt-1 mb-2">
+              <Listbox.Button className="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon sm:text-sm">
+                <span className="flex items-center">
+                  <span
+                    className="inline-block h-4 w-4 flex-shrink-0 rounded-full"
+                    style={{ background: stc(selectedRecipient?.email) }}
+                  />
+                  <span className="ml-3 block truncate">
+                    {`${selectedRecipient?.name} <${selectedRecipient?.email}>`}
+                  </span>
+                </span>
+                <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                  <ChevronUpDownIcon
+                    className="h-5 w-5 text-gray-400"
+                    aria-hidden="true"
+                  />
+                </span>
+              </Listbox.Button>
 
-          upsertField(props?.document, signatureField).then((res) => {
-            setFields(fields.concat(res));
-          });
-        }}
-      >
-        Add Signature Field
-      </Button>
-      <Button color="secondary" className="inline ml-1">
-        Add Date Field
-      </Button>
-      <Button color="secondary" className="inline ml-1">
-        Add Text Field
-      </Button>
+              <Transition
+                show={open}
+                as={Fragment}
+                leave="transition ease-in duration-100"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                  {props?.document?.Recipient?.map((recipient: any) => (
+                    <Listbox.Option
+                      key={recipient?.id}
+                      className={({ active }) =>
+                        classNames(
+                          active ? "text-white bg-indigo-600" : "text-gray-900",
+                          "relative cursor-default select-none py-2 pl-3 pr-9"
+                        )
+                      }
+                      value={recipient}
+                    >
+                      {({ selected, active }) => (
+                        <>
+                          <div className="flex items-center">
+                            <span
+                              className="inline-block h-4 w-4 flex-shrink-0 rounded-full"
+                              style={{
+                                background: stc(recipient?.email),
+                              }}
+                            />
+                            <span
+                              className={classNames(
+                                selected ? "font-semibold" : "font-normal",
+                                "ml-3 block truncate"
+                              )}
+                            >
+                              {`${selectedRecipient?.name} <${selectedRecipient?.email}>`}
+                            </span>
+                          </div>
+
+                          {selected ? (
+                            <span
+                              className={classNames(
+                                active ? "text-white" : "text-indigo-600",
+                                "absolute inset-y-0 right-0 flex items-center pr-4"
+                              )}
+                            >
+                              <CheckIcon
+                                className="h-5 w-5"
+                                aria-hidden="true"
+                              />
+                            </span>
+                          ) : null}
+                        </>
+                      )}
+                    </Listbox.Option>
+                  ))}
+                </Listbox.Options>
+              </Transition>
+            </div>
+          )}
+        </Listbox>
+        <Button
+          className="inline ml-1"
+          color="secondary"
+          onClick={() => {
+            console.log(selectedRecipient);
+            const signatureField = {
+              id: -1,
+              page: 0,
+              type: FieldType.SIGNATURE,
+              positionX: 0,
+              positionY: 0,
+              Recipient: selectedRecipient,
+            };
+
+            upsertField(props?.document, signatureField).then((res) => {
+              setFields(fields.concat(res));
+            });
+          }}
+        >
+          <span
+            className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3"
+            style={{
+              background: stc(selectedRecipient?.email),
+            }}
+          />
+          Add Signature Field
+        </Button>
+        <Button color="secondary" className="inline ml-1" disabled>
+          <span
+            className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3"
+            style={{
+              background: stc(selectedRecipient?.email),
+            }}
+          />
+          Add Date Field
+        </Button>
+        <Button color="secondary" className="inline ml-1" disabled>
+          <span
+            className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3"
+            style={{
+              background: stc(selectedRecipient?.email),
+            }}
+          />
+          Add Text Field
+        </Button>
+      </div>
       <PDFViewer
         document={props.document}
         fields={fields}
diff --git a/apps/web/pages/api/documents/[id]/fields/index.ts b/apps/web/pages/api/documents/[id]/fields/index.ts
index ef3944ae3..7040a2347 100644
--- a/apps/web/pages/api/documents/[id]/fields/index.ts
+++ b/apps/web/pages/api/documents/[id]/fields/index.ts
@@ -30,6 +30,7 @@ async function getHandler(req: NextApiRequest, res: NextApiResponse) {
 
   const fields = await prisma.field.findMany({
     where: { documentId: +documentId },
+    include: { Recipient: true },
   });
 
   return res.status(200).end(JSON.stringify(fields));
@@ -44,6 +45,7 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
     page: number;
     positionX: number;
     positionY: number;
+    Recipient: { id: number };
   } = req.body;
 
   if (!user) return;
@@ -69,6 +71,7 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
       page: +body.page,
       positionX: +body.positionX,
       positionY: +body.positionY,
+      recipientId: body.Recipient.id,
     },
     create: {
       documentId: +documentId,
@@ -76,6 +79,11 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
       page: +body.page,
       positionX: +body.positionX,
       positionY: +body.positionY,
+      // todo refactor only one type of recipientId
+      recipientId: body.Recipient.id,
+    },
+    include: {
+      Recipient: true,
     },
   });
 
diff --git a/apps/web/pages/documents.tsx b/apps/web/pages/documents.tsx
index 0d93a726b..8aced3010 100644
--- a/apps/web/pages/documents.tsx
+++ b/apps/web/pages/documents.tsx
@@ -44,7 +44,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
   }, []);
 
   function showDocument(documentId: number) {
-    router.push("/documents/" + documentId);
+    router.push(`/documents/" + ${documentId} + "recipients`);
   }
 
   return (
diff --git a/apps/web/pages/documents/[id]/index.tsx b/apps/web/pages/documents/[id]/index.tsx
index eaab64c24..d28fed69d 100644
--- a/apps/web/pages/documents/[id]/index.tsx
+++ b/apps/web/pages/documents/[id]/index.tsx
@@ -9,6 +9,7 @@ import { DocumentStatus } from "@prisma/client";
 import {
   InformationCircleIcon,
   PaperAirplaneIcon,
+  UserPlusIcon,
   UsersIcon,
 } from "@heroicons/react/24/outline";
 import { getDocument } from "@documenso/lib/query";
@@ -66,7 +67,6 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
           <div className="mt-4 flex flex-shrink-0 md:mt-0 md:ml-4">
             <Button
               icon={PaperAirplaneIcon}
-              disabled={(props?.document?.Recipient?.length || 0) === 0}
               className="ml-3"
               href={
                 NEXT_PUBLIC_WEBAPP_URL +
diff --git a/apps/web/pages/documents/[id]/recipients.tsx b/apps/web/pages/documents/[id]/recipients.tsx
index 872c34589..72eda2377 100644
--- a/apps/web/pages/documents/[id]/recipients.tsx
+++ b/apps/web/pages/documents/[id]/recipients.tsx
@@ -8,6 +8,7 @@ import {
   CheckIcon,
   EnvelopeIcon,
   PaperAirplaneIcon,
+  PencilSquareIcon,
   UserPlusIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
@@ -62,6 +63,14 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
             </h2>
           </div>
           <div className="mt-4 flex flex-shrink-0 md:mt-0 md:ml-4">
+            <Button
+              icon={PencilSquareIcon}
+              color="secondary"
+              className="mr-2"
+              href={breadcrumbItems[1].href}
+            >
+              Customize Document
+            </Button>
             <Button
               className="min-w-[125px]"
               color="primary"
diff --git a/packages/features/uploadDocument.ts b/packages/features/uploadDocument.ts
index 5cf5c7a1b..15f3a40d2 100644
--- a/packages/features/uploadDocument.ts
+++ b/packages/features/uploadDocument.ts
@@ -23,7 +23,7 @@ export const uploadDocument = async (event: any) => {
       .then((response: Response) => {
         response.json().then((createdDocumentIdFromBody) => {
           router.push(
-            `${NEXT_PUBLIC_WEBAPP_URL}/documents/${createdDocumentIdFromBody}`
+            `${NEXT_PUBLIC_WEBAPP_URL}/documents/${createdDocumentIdFromBody}/recipients`
           );
         });
       });
diff --git a/packages/lib/query/getDocument.ts b/packages/lib/query/getDocument.ts
index f317d624c..e75e89d0d 100644
--- a/packages/lib/query/getDocument.ts
+++ b/packages/lib/query/getDocument.ts
@@ -19,7 +19,7 @@ export const getDocument = async (
     },
     include: {
       Recipient: true,
-      Field: true,
+      Field: { include: { Recipient: true } },
     },
   });
 
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 507dbf27d..85cee780a 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 import React from "react";
 
 export function Button(props: any) {
-  const isLink = typeof props.href !== "undefined";
+  const isLink = typeof props.href !== "undefined" && !props.disabled;
   const { color = "primary", icon, disabled, onClick } = props;
   const baseStyles =
     "inline-flex items-center justify-center min-w-[80px] rounded-md border border-transparent px-4 py-2 text-sm font-medium shadow-sm disabled:bg-gray-300";