diff --git a/apps/web/components/editor/pdf-editor.tsx b/apps/web/components/editor/pdf-editor.tsx
index 003b912e3..ae28f4a7f 100644
--- a/apps/web/components/editor/pdf-editor.tsx
+++ b/apps/web/components/editor/pdf-editor.tsx
@@ -6,10 +6,11 @@ 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 { Listbox, RadioGroup, Transition } from "@headlessui/react";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
 import { classNames } from "@documenso/lib";
 import Draggable from "react-draggable";
+import Logo from "../logo";
 const stc = require("string-to-color");
 
 const PDFViewer = dynamic(() => import("./pdf-viewer"), {
@@ -22,13 +23,22 @@ export default function PDFEditor(props: any) {
   );
   const noRecipients = props?.document?.Recipient?.length === 0;
   const [fields, setFields] = useState<any[]>(props.document.Field);
+  const [adding, setAdding] = useState(false);
   const router = useRouter();
+  const fieldTypes = [
+    { name: "Signature" },
+    { name: "Text" },
+    { name: "Date" },
+  ];
+  const [selectedFieldType, setSelectedFieldType] = useState(
+    fieldTypes[0].name
+  );
 
   function onPositionChangedHandler(position: any, id: any) {
     if (!position) return;
     const movedField = fields.find((e) => e.id == id);
-    movedField.positionX = position.x;
-    movedField.positionY = position.y;
+    movedField.positionX = position.x.toFixed(0);
+    movedField.positionY = position.y.toFixed(0);
     upsertField(props.document, movedField);
 
     // no instant redraw neccessary, postion information for saving or later rerender is enough
@@ -50,150 +60,188 @@ export default function PDFEditor(props: any) {
 
   return (
     <>
-      <PDFViewer
-        readonly={false}
-        document={props.document}
-        fields={fields}
-        onPositionChanged={onPositionChangedHandler}
-        onDelete={onDeleteHandler}
-        pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}`}
-        onMouseDown={(e: any, page: number) => {
-          var rect = e.target.getBoundingClientRect();
-          var newFieldX = e.clientX - rect.left; //x position within the element.
-          var newFieldY = e.clientY - rect.top; //y position within the element.
-          const signatureField = {
-            id: -1,
-            page: page,
-            type: FieldType.SIGNATURE,
-            positionX: newFieldX.toFixed(0),
-            positionY: newFieldY.toFixed(0),
-            Recipient: selectedRecipient,
-          };
-
-          upsertField(props?.document, signatureField).then((res) => {
-            setFields(fields.concat(res));
-          });
-        }}
-      ></PDFViewer>
-      <div hidden={noRecipients} className="fixed left-0 top-1/3 max-w-xs">
-        <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}>`}
+      <div>
+        <PDFViewer
+          readonly={false}
+          document={props.document}
+          fields={fields}
+          onPositionChanged={onPositionChangedHandler}
+          onDelete={onDeleteHandler}
+          pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}`}
+          onMouseUp={(e: any, page: number) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (adding) {
+              console.log("adding to page " + page);
+              addField(e, page);
+              setAdding(false);
+            }
+          }}
+          onMouseDown={(e: any, page: number) => {
+            addField(e, page);
+          }}
+        ></PDFViewer>
+        <div
+          hidden={noRecipients}
+          className="fixed left-0 top-1/3 max-w-xs border border-slate-300 bg-white py-4 pr-5 rounded-md"
+        >
+          <Listbox value={selectedRecipient} onChange={setSelectedRecipient}>
+            {({ open }) => (
+              <div className="relative mt-1 mb-2">
+                <Listbox.Button className="select-none relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left 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>
-                <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>
+                  <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>
 
-              <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-neon-dark" : "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-neon-dark",
-                                "absolute inset-y-0 right-0 flex items-center pr-4"
-                              )}
-                            >
-                              <CheckIcon
-                                className="h-5 w-5"
-                                aria-hidden="true"
+                <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-neon-dark"
+                              : "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>
-                          ) : null}
-                        </>
-                      )}
-                    </Listbox.Option>
-                  ))}
-                </Listbox.Options>
-              </Transition>
-            </div>
-          )}
-        </Listbox>
-        <div>
-          <Draggable>
-            <div
-              className="ml-1 cursor-move p-3 border-2 border-slate-200 my-2 rounded-md"
-              color="secondary"
+                              <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-neon-dark",
+                                  "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>
+          <hr className="m-3 border-slate-300"></hr>
+          <div>
+            <RadioGroup
+              value={selectedFieldType}
+              onChange={setSelectedFieldType}
+              onMouseDown={() => {
+                setAdding(true);
+              }}
             >
-              <span
-                className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3"
-                style={{
-                  background: stc(selectedRecipient?.email),
-                }}
-              />
-              Add Signature Field
-            </div>
-          </Draggable>
-          <div color="secondary" className="ml-1 ">
-            <span
-              className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3"
-              style={{
-                background: stc(selectedRecipient?.email),
-              }}
-            />
-            Add Date Field
-          </div>
-          <div color="secondary" className="ml-1 cursor-move">
-            <span
-              className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3"
-              style={{
-                background: stc(selectedRecipient?.email),
-              }}
-            />
-            Add Text Field
+              <div className="space-y-4">
+                {fieldTypes.map((fieldType) => (
+                  <RadioGroup.Option
+                    onMouseDown={() => {
+                      setSelectedFieldType(fieldType.name);
+                    }}
+                    key={fieldType.name}
+                    value={fieldType.name}
+                    className={({ checked, active }) =>
+                      classNames(
+                        checked ? "border-neon border-2" : "border-transparent",
+                        "hover:bg-slate-100 select-none relative block cursor-pointer rounded-lg border bg-white px-3 py-2 focus:outline-none sm:flex sm:justify-between"
+                      )
+                    }
+                  >
+                    {({ active, checked }) => (
+                      <>
+                        <span className="flex items-center">
+                          <span className="flex flex-col text-sm">
+                            <RadioGroup.Label
+                              as="span"
+                              className="font-medium text-gray-900"
+                            >
+                              <span
+                                className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3 align-middle"
+                                style={{
+                                  background: stc(selectedRecipient?.email),
+                                }}
+                              />
+                              <span className="align-middle">
+                                {" "}
+                                {fieldType.name}
+                              </span>
+                            </RadioGroup.Label>
+                          </span>
+                        </span>
+                      </>
+                    )}
+                  </RadioGroup.Option>
+                ))}
+              </div>
+            </RadioGroup>
           </div>
         </div>
       </div>
     </>
   );
+
+  function addField(e: any, page: number) {
+    var rect = e.target.getBoundingClientRect();
+    var newFieldX = e.clientX - rect.left; //x position within the element.
+    var newFieldY = e.clientY - rect.top; //y position within the element.
+    const signatureField = {
+      id: -1,
+      page: page,
+      type: FieldType.SIGNATURE,
+      positionX: newFieldX.toFixed(0),
+      positionY: newFieldY.toFixed(0),
+      Recipient: selectedRecipient,
+    };
+
+    upsertField(props?.document, signatureField).then((res) => {
+      setFields(fields.concat(res));
+    });
+  }
 }
 
 async function upsertField(document: any, field: any): Promise<any> {
diff --git a/apps/web/components/editor/pdf-viewer.jsx b/apps/web/components/editor/pdf-viewer.jsx
index adc64686c..e4d338b37 100644
--- a/apps/web/components/editor/pdf-viewer.jsx
+++ b/apps/web/components/editor/pdf-viewer.jsx
@@ -34,7 +34,7 @@ export default function PDFViewer(props) {
 
   return (
     <>
-      <div hidden={loading}>
+      <div hidden={loading} onMouseUp={props.onMouseUp}>
         <div className="max-w-xs mt-6"></div>
         <Document
           file={props.pdfUrl}
@@ -48,6 +48,9 @@ export default function PDFViewer(props) {
                 onMouseDown={(e) => {
                   props.onMouseDown(e, index);
                 }}
+                onMouseUp={(e) => {
+                  props.onMouseUp(e, index);
+                }}
                 key={short.generate().toString()}
                 style={{
                   position: "relative",
diff --git a/apps/web/pages/api/documents/[id]/fields/index.ts b/apps/web/pages/api/documents/[id]/fields/index.ts
index 7040a2347..93cd7a4ce 100644
--- a/apps/web/pages/api/documents/[id]/fields/index.ts
+++ b/apps/web/pages/api/documents/[id]/fields/index.ts
@@ -67,11 +67,8 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
       id: +body.id,
     },
     update: {
-      type: body.type,
-      page: +body.page,
       positionX: +body.positionX,
       positionY: +body.positionY,
-      recipientId: body.Recipient.id,
     },
     create: {
       documentId: +documentId,