diff --git a/README.md b/README.md
index e6d1d9653..d37fbf5b1 100644
--- a/README.md
+++ b/README.md
@@ -121,6 +121,7 @@ Follow these steps to setup documenso on you local machnine:
 - Register a new user at http://localhost:3000/signup
 
 ---
+
 - Optional: Seed the database using <code>npm run db-seed</code> to create a test user and document
 - Optional: Upload and sign <code>apps\web\ressources\example.pdf</code> manually to test your setup
 
diff --git a/apps/web/components/editor/editable-field.tsx b/apps/web/components/editor/editable-field.tsx
index c4966a0f0..26444101f 100644
--- a/apps/web/components/editor/editable-field.tsx
+++ b/apps/web/components/editor/editable-field.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from "react";
-import Draggable from "react-draggable";
-import Logo from "../logo";
 import { IconButton } from "@documenso/ui";
+import Logo from "../logo";
 import { XCircleIcon } from "@heroicons/react/20/solid";
+import Draggable from "react-draggable";
+
 const stc = require("string-to-color");
 
 type FieldPropsType = {
@@ -51,21 +52,19 @@ export default function EditableField(props: FieldPropsType) {
       onMouseDown={(e: any) => {
         e.preventDefault();
         e.stopPropagation();
-      }}
-    >
+      }}>
       {/* width: 192 height 96 */}
       <div
         hidden={props.hidden}
         ref={nodeRef}
-        className="cursor-move opacity-80 p-2 m-auto w-48 h-16 flex-row-reverse text-lg font-bold text-center absolute top-0 left-0 select-none"
+        className="absolute top-0 left-0 m-auto h-16 w-48 cursor-move select-none flex-row-reverse p-2 text-center text-lg font-bold opacity-80"
         style={{
           background: stc(props.field.Recipient.email),
-        }}
-      >
-        <div className="m-auto overflow-hidden flex-row-reverse text-lg font-bold text-center">
+        }}>
+        <div className="m-auto flex-row-reverse overflow-hidden text-center text-lg font-bold">
           {field.type}
           {field.type === "SIGNATURE" ? (
-            <div className="text-xs text-center">
+            <div className="text-center text-xs">
               {`${props.field.Recipient?.name} <${props.field.Recipient?.email}>`}
             </div>
           ) : (
@@ -79,8 +78,7 @@ export default function EditableField(props: FieldPropsType) {
             icon={XCircleIcon}
             onClick={(event: any) => {
               props.onDelete(props.field.id);
-            }}
-          ></IconButton>
+            }}></IconButton>
         </strong>
       </div>
     </Draggable>
diff --git a/apps/web/components/editor/field-type-selector.tsx b/apps/web/components/editor/field-type-selector.tsx
index 09d75903d..c8a6ff454 100644
--- a/apps/web/components/editor/field-type-selector.tsx
+++ b/apps/web/components/editor/field-type-selector.tsx
@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react";
-import { RadioGroup } from "@headlessui/react";
 import { classNames } from "@documenso/lib";
+import { RadioGroup } from "@headlessui/react";
 import { FieldType } from "@prisma/client";
+
 const stc = require("string-to-color");
 
 export default function FieldTypeSelector(props: any) {
@@ -24,8 +25,7 @@ export default function FieldTypeSelector(props: any) {
       value={selectedFieldType}
       onChange={(e: any) => {
         setSelectedFieldType(e);
-      }}
-    >
+      }}>
       <div className="space-y-4">
         {fieldTypes.map((fieldType) => (
           <RadioGroup.Option
@@ -37,30 +37,23 @@ export default function FieldTypeSelector(props: any) {
             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"
+                "relative block cursor-pointer select-none rounded-lg border bg-white px-3 py-2 hover:bg-slate-100 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"
-                    >
+                    <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"
+                        className="mr-3 inline-block h-4 w-4 flex-shrink-0 rounded-full align-middle"
                         style={{
                           background: stc(props.selectedRecipient?.email),
                         }}
                       />
                       <span className="align-middle">
                         {" "}
-                        {
-                          fieldTypes.filter((e) => e.id === fieldType.id)[0]
-                            .name
-                        }
+                        {fieldTypes.filter((e) => e.id === fieldType.id)[0].name}
                       </span>
                     </RadioGroup.Label>
                   </span>
diff --git a/apps/web/components/editor/pdf-editor.tsx b/apps/web/components/editor/pdf-editor.tsx
index f4e9eea11..dd9418a24 100644
--- a/apps/web/components/editor/pdf-editor.tsx
+++ b/apps/web/components/editor/pdf-editor.tsx
@@ -1,13 +1,14 @@
-import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
-import { useRouter } from "next/router";
-import dynamic from "next/dynamic";
 import { useState } from "react";
-import { createOrUpdateField, deleteField } from "@documenso/lib/api";
-import { createField } from "@documenso/features/editor";
-import RecipientSelector from "./recipient-selector";
-import FieldTypeSelector from "./field-type-selector";
-import { InformationCircleIcon } from "@heroicons/react/24/outline";
+import dynamic from "next/dynamic";
 import Link from "next/link";
+import { useRouter } from "next/router";
+import { createField } from "@documenso/features/editor";
+import { createOrUpdateField, deleteField } from "@documenso/lib/api";
+import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
+import FieldTypeSelector from "./field-type-selector";
+import RecipientSelector from "./recipient-selector";
+import { InformationCircleIcon } from "@heroicons/react/24/outline";
+
 const stc = require("string-to-color");
 
 const PDFViewer = dynamic(() => import("./pdf-viewer"), {
@@ -20,8 +21,7 @@ export default function PDFEditor(props: any) {
   const [selectedRecipient, setSelectedRecipient]: any = useState();
   const [selectedFieldType, setSelectedFieldType] = useState();
   const noRecipients =
-    props?.document.Recipient.length === 0 ||
-    props?.document.Recipient.every((e: any) => !e.email);
+    props?.document.Recipient.length === 0 || props?.document.Recipient.every((e: any) => !e.email);
 
   function onPositionChangedHandler(position: any, id: any) {
     if (!position) return;
@@ -53,26 +53,16 @@ export default function PDFEditor(props: any) {
         <div hidden={!noRecipients} className="rounded-md bg-yellow-50 p-4">
           <div className="flex">
             <div className="flex-shrink-0">
-              <InformationCircleIcon
-                className="h-5 w-5 text-yellow-400"
-                aria-hidden="true"
-              />
+              <InformationCircleIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
             </div>
             <div className="ml-3 flex-1 md:flex md:justify-between">
               <p className="text-sm text-yellow-700">
-                This document does not have any recipients. Add recipients to
-                create fields.
+                This document does not have any recipients. Add recipients to create fields.
               </p>
               <p className="mt-3 text-sm md:mt-0 md:ml-6">
                 <Link
-                  href={
-                    NEXT_PUBLIC_WEBAPP_URL +
-                    "/documents/" +
-                    props.document.id +
-                    "/recipients"
-                  }
-                  className="whitespace-nowrap font-medium text-yellow-700 hover:text-yellow-600"
-                >
+                  href={NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id + "/recipients"}
+                  className="whitespace-nowrap font-medium text-yellow-700 hover:text-yellow-600">
                   Add Recipients
                   <span aria-hidden="true"> &rarr;</span>
                 </Link>
@@ -98,12 +88,10 @@ export default function PDFEditor(props: any) {
           }}
           onMouseDown={(e: any, page: number) => {
             if (e.button === 0) addField(e, page);
-          }}
-        ></PDFViewer>
+          }}></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"
-        >
+          className="fixed left-0 top-1/3 max-w-xs rounded-md border border-slate-300 bg-white py-4 pr-5">
           <RecipientSelector
             recipients={props?.document?.Recipient}
             onChange={setSelectedRecipient}
@@ -123,12 +111,7 @@ export default function PDFEditor(props: any) {
     if (!selectedFieldType) return;
     if (noRecipients) return;
 
-    const signatureField = createField(
-      e,
-      page,
-      selectedRecipient,
-      selectedFieldType
-    );
+    const signatureField = createField(e, page, selectedRecipient, selectedFieldType);
 
     createOrUpdateField(props?.document, signatureField).then((res) => {
       setFields((prevState) => [...prevState, res]);
diff --git a/apps/web/components/editor/pdf-signer.tsx b/apps/web/components/editor/pdf-signer.tsx
index 3c8627ca6..797745a4c 100644
--- a/apps/web/components/editor/pdf-signer.tsx
+++ b/apps/web/components/editor/pdf-signer.tsx
@@ -1,21 +1,14 @@
-import Logo from "../logo";
-import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
-import { useRouter } from "next/router";
-import dynamic from "next/dynamic";
-import SignatureDialog from "./signature-dialog";
 import { useEffect, useState } from "react";
-import { Button } from "@documenso/ui";
-import {
-  CheckBadgeIcon,
-  InformationCircleIcon,
-} from "@heroicons/react/24/outline";
-import { FieldType } from "@prisma/client";
-import {
-  createOrUpdateField,
-  deleteField,
-  signDocument,
-} from "@documenso/lib/api";
+import dynamic from "next/dynamic";
+import { useRouter } from "next/router";
 import { createField } from "@documenso/features/editor";
+import { createOrUpdateField, deleteField, signDocument } from "@documenso/lib/api";
+import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
+import { Button } from "@documenso/ui";
+import Logo from "../logo";
+import SignatureDialog from "./signature-dialog";
+import { CheckBadgeIcon, InformationCircleIcon } from "@heroicons/react/24/outline";
+import { FieldType } from "@prisma/client";
 
 const PDFViewer = dynamic(() => import("./pdf-viewer"), {
   ssr: false,
@@ -27,9 +20,7 @@ export default function PDFSigner(props: any) {
   const [signingDone, setSigningDone] = useState(false);
   const [localSignatures, setLocalSignatures] = useState<any[]>([]);
   const [fields, setFields] = useState<any[]>(props.fields);
-  const signatureFields = fields.filter(
-    (field) => field.type === FieldType.SIGNATURE
-  );
+  const signatureFields = fields.filter((field) => field.type === FieldType.SIGNATURE);
   const [dialogField, setDialogField] = useState<any>();
 
   useEffect(() => {
@@ -80,9 +71,9 @@ export default function PDFSigner(props: any) {
       <div className="bg-neon p-4">
         <div className="flex">
           <div className="flex-shrink-0">
-            <Logo className="h-12 w-12 -mt-2.5"></Logo>
+            <Logo className="-mt-2.5 h-12 w-12"></Logo>
           </div>
-          <div className="ml-3 flex-1 md:flex md:justify-between text-center justify-start items-center">
+          <div className="ml-3 flex-1 items-center justify-start text-center md:flex md:justify-between">
             <p className="text-lg text-slate-700">
               {props.document.User.name
                 ? `${props.document.User.name} (${props.document.User.email})`
@@ -96,17 +87,14 @@ export default function PDFSigner(props: any) {
                 icon={CheckBadgeIcon}
                 className="float-right"
                 onClick={() => {
-                  signDocument(
-                    props.document,
-                    localSignatures,
-                    `${router.query.token}`
-                  ).then(() => {
-                    router.push(
-                      `/documents/${props.document.id}/signed?token=${router.query.token}`
-                    );
-                  });
-                }}
-              >
+                  signDocument(props.document, localSignatures, `${router.query.token}`).then(
+                    () => {
+                      router.push(
+                        `/documents/${props.document.id}/signed?token=${router.query.token}`
+                      );
+                    }
+                  );
+                }}>
                 Done
               </Button>
             </p>
@@ -117,15 +105,11 @@ export default function PDFSigner(props: any) {
         <div className="bg-yellow-50 p-4">
           <div className="flex">
             <div className="flex-shrink-0">
-              <InformationCircleIcon
-                className="h-5 w-5 text-yellow-400"
-                aria-hidden="true"
-              />
+              <InformationCircleIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
             </div>
             <div className="ml-3 flex-1 md:flex md:justify-between">
               <p className="text-sm text-yellow-700">
-                You can sign this document anywhere you like, but maybe look for
-                a signature line.
+                You can sign this document anywhere you like, but maybe look for a signature line.
               </p>
             </div>
           </div>
@@ -144,12 +128,10 @@ export default function PDFSigner(props: any) {
         pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}?token=${router.query.token}`}
         onClick={onClick}
         onMouseDown={function onMouseDown(e: any, page: number) {
-          if (signatureFields.length === 0)
-            addFreeSignature(e, page, props.recipient);
+          if (signatureFields.length === 0) addFreeSignature(e, page, props.recipient);
         }}
         onMouseUp={() => {}}
-        onDelete={onDeleteHandler}
-      ></PDFViewer>
+        onDelete={onDeleteHandler}></PDFViewer>
     </>
   );
 
@@ -166,18 +148,9 @@ export default function PDFSigner(props: any) {
   }
 
   function addFreeSignature(e: any, page: number, recipient: any): any {
-    const freeSignatureField = createField(
-      e,
-      page,
-      recipient,
-      FieldType.FREE_SIGNATURE
-    );
+    const freeSignatureField = createField(e, page, recipient, FieldType.FREE_SIGNATURE);
 
-    createOrUpdateField(
-      props.document,
-      freeSignatureField,
-      recipient.token
-    ).then((res) => {
+    createOrUpdateField(props.document, freeSignatureField, recipient.token).then((res) => {
       setFields((prevState) => [...prevState, res]);
       setDialogField(res);
       setOpen(true);
diff --git a/apps/web/components/editor/pdf-viewer.jsx b/apps/web/components/editor/pdf-viewer.jsx
index 1d3678b05..886c02206 100644
--- a/apps/web/components/editor/pdf-viewer.jsx
+++ b/apps/web/components/editor/pdf-viewer.jsx
@@ -1,9 +1,9 @@
 import { Fragment, useState } from "react";
-import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
 import EditableField from "./editable-field";
 import SignableField from "./signable-field";
-import short from "short-uuid";
 import { FieldType } from "@prisma/client";
+import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
+import short from "short-uuid";
 
 export default function PDFViewer(props) {
   const [numPages, setNumPages] = useState(null);
@@ -33,16 +33,14 @@ export default function PDFViewer(props) {
       <div
         hidden={loading}
         onMouseUp={props.onMouseUp}
-        style={{ height: numPages * pageHeight + 1000 }}
-      >
-        <div className="max-w-xs mt-6"></div>
+        style={{ height: numPages * pageHeight + 1000 }}>
+        <div className="mt-6 max-w-xs"></div>
         <Document
           file={props.pdfUrl}
           onLoadSuccess={onDocumentLoadSuccess}
           options={options}
           renderMode="canvas"
-          className="absolute w-auto mx-auto left-0 right-0"
-        >
+          className="absolute left-0 right-0 mx-auto w-auto">
           {Array.from({ length: numPages }, (_, index) => (
             <Fragment key={short.generate().toString()}>
               <div
@@ -57,8 +55,7 @@ export default function PDFViewer(props) {
                   position: "relative",
                   ...props.style,
                 }}
-                className="mx-auto w-fit"
-              >
+                className="mx-auto w-fit">
                 <Page
                   className="mt-5"
                   key={`page_${index + 1}`}
@@ -69,8 +66,7 @@ export default function PDFViewer(props) {
                     if (e.height) setPageHeight(e.height);
                     setLoading(false);
                   }}
-                  onRenderError={() => setLoading(false)}
-                ></Page>
+                  onRenderError={() => setLoading(false)}></Page>
                 {props?.fields
                   .filter((field) => field.page === index)
                   .map((field) =>
@@ -80,8 +76,7 @@ export default function PDFViewer(props) {
                         key={field.id}
                         field={field}
                         className="absolute"
-                        onDelete={onDeleteHandler}
-                      ></SignableField>
+                        onDelete={onDeleteHandler}></SignableField>
                     ) : (
                       <EditableField
                         hidden={
@@ -93,8 +88,7 @@ export default function PDFViewer(props) {
                         field={field}
                         className="absolute"
                         onPositionChanged={onPositionChangedHandler}
-                        onDelete={onDeleteHandler}
-                      ></EditableField>
+                        onDelete={onDeleteHandler}></EditableField>
                     )
                   )}
               </div>
diff --git a/apps/web/components/editor/recipient-selector.tsx b/apps/web/components/editor/recipient-selector.tsx
index a88fe78e0..d38bb2d1b 100644
--- a/apps/web/components/editor/recipient-selector.tsx
+++ b/apps/web/components/editor/recipient-selector.tsx
@@ -1,13 +1,12 @@
 import { Fragment, useEffect, useState } from "react";
+import { classNames } from "@documenso/lib";
 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");
 
 export default function RecipientSelector(props: any) {
-  const [selectedRecipient, setSelectedRecipient]: any = useState(
-    props?.recipients[0]
-  );
+  const [selectedRecipient, setSelectedRecipient]: any = useState(props?.recipients[0]);
 
   useEffect(() => {
     props.onChange(selectedRecipient);
@@ -18,11 +17,10 @@ export default function RecipientSelector(props: any) {
       value={selectedRecipient}
       onChange={(e: any) => {
         setSelectedRecipient(e);
-      }}
-    >
+      }}>
       {({ 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">
+          <Listbox.Button className="focus:border-neon focus:ring-neon relative w-full cursor-default select-none rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-1 sm:text-sm">
             <span className="flex items-center">
               <span
                 className="inline-block h-4 w-4 flex-shrink-0 rounded-full"
@@ -33,10 +31,7 @@ export default function RecipientSelector(props: any) {
               </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"
-              />
+              <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
             </span>
           </Listbox.Button>
 
@@ -45,20 +40,18 @@ export default function RecipientSelector(props: any) {
             as={Fragment}
             leave="transition ease-in duration-100"
             leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
+            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?.recipients.map((recipient: any) => (
                 <Listbox.Option
                   key={recipient?.id}
                   className={({ active }) =>
                     classNames(
-                      active ? "text-white bg-neon-dark" : "text-gray-900",
+                      active ? "bg-neon-dark text-white" : "text-gray-900",
                       "relative cursor-default select-none py-2 pl-3 pr-9"
                     )
                   }
-                  value={recipient}
-                >
+                  value={recipient}>
                   {({ selected, active }) => (
                     <>
                       <div className="flex items-center">
@@ -72,8 +65,7 @@ export default function RecipientSelector(props: any) {
                           className={classNames(
                             selected ? "font-semibold" : "font-normal",
                             "ml-3 block truncate"
-                          )}
-                        >
+                          )}>
                           {`${selectedRecipient?.name} <${selectedRecipient?.email}>`}
                         </span>
                       </div>
@@ -83,8 +75,7 @@ export default function RecipientSelector(props: any) {
                           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}
diff --git a/apps/web/components/editor/signable-field.tsx b/apps/web/components/editor/signable-field.tsx
index 97eed3e0b..29a8559e9 100644
--- a/apps/web/components/editor/signable-field.tsx
+++ b/apps/web/components/editor/signable-field.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from "react";
-import Draggable from "react-draggable";
+import { classNames } from "@documenso/lib";
 import { IconButton } from "@documenso/ui";
 import { XCircleIcon } from "@heroicons/react/20/solid";
-import { classNames } from "@documenso/lib";
+import Draggable from "react-draggable";
+
 const stc = require("string-to-color");
 
 type FieldPropsType = {
@@ -37,31 +38,26 @@ export default function SignableField(props: FieldPropsType) {
       onMouseDown={(e: any) => {
         // e.preventDefault();
         e.stopPropagation();
-      }}
-    >
+      }}>
       <div
         onClick={(e: any) => {
           if (!field?.signature) props.onClick(props.field);
         }}
         ref={nodeRef}
         className={classNames(
-          "opacity-80 m-auto w-48 h-16 flex-row-reverse text-lg font-bold text-center absolute top-0 left-0 select-none",
-          field.type === "SIGNATURE"
-            ? "cursor-pointer hover:brightness-50"
-            : "cursor-not-allowed"
+          "absolute top-0 left-0 m-auto h-16 w-48 select-none flex-row-reverse text-center text-lg font-bold opacity-80",
+          field.type === "SIGNATURE" ? "cursor-pointer hover:brightness-50" : "cursor-not-allowed"
         )}
         style={{
           background: stc(props.field.Recipient.email),
-        }}
-      >
-        <div hidden={field?.signature} className="font-medium my-4">
+        }}>
+        <div hidden={field?.signature} className="my-4 font-medium">
           {field.type === "SIGNATURE" ? "SIGN HERE" : ""}
           {field.type === "DATE" ? <small>Date (filled on sign)</small> : ""}
         </div>
         <div
           hidden={!field?.signature}
-          className="font-qwigley text-5xl m-auto w-auto flex-row-reverse font-medium text-center"
-        >
+          className="font-qwigley m-auto w-auto flex-row-reverse text-center text-5xl font-medium">
           {field?.signature?.type === "type" ? (
             <div className="my-4">{field?.signature.typedSignature}</div>
           ) : (
@@ -69,7 +65,7 @@ export default function SignableField(props: FieldPropsType) {
           )}
 
           {field?.signature?.type === "draw" ? (
-            <img className="w-48 h-16" src={field?.signature?.signatureImage} />
+            <img className="h-16 w-48" src={field?.signature?.signatureImage} />
           ) : (
             ""
           )}
diff --git a/apps/web/components/editor/signature-dialog.tsx b/apps/web/components/editor/signature-dialog.tsx
index 78943cabf..0dd442b83 100644
--- a/apps/web/components/editor/signature-dialog.tsx
+++ b/apps/web/components/editor/signature-dialog.tsx
@@ -1,14 +1,10 @@
+import { Fragment, useEffect, useState } from "react";
 import { classNames } from "@documenso/lib";
+import { localStorage } from "@documenso/lib";
 import { Button, IconButton } from "@documenso/ui";
 import { Dialog, Transition } from "@headlessui/react";
-import {
-  LanguageIcon,
-  PencilIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
-import { Fragment, useEffect, useState } from "react";
+import { LanguageIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
 import SignatureCanvas from "react-signature-canvas";
-import { localStorage } from "@documenso/lib";
 
 const tabs = [
   { name: "Type", icon: LanguageIcon, current: true },
@@ -34,8 +30,7 @@ export default function SignatureDialog(props: any) {
           onClose={() => {
             props.setOpen(false);
             setCurrent(tabs[0]);
-          }}
-        >
+          }}>
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -43,8 +38,7 @@ export default function SignatureDialog(props: any) {
             enterTo="opacity-100"
             leave="ease-in duration-200"
             leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
+            leaveTo="opacity-0">
             <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
           </Transition.Child>
 
@@ -57,11 +51,10 @@ export default function SignatureDialog(props: any) {
                 enterTo="opacity-100 translate-y-0 sm:scale-100"
                 leave="ease-in duration-200"
                 leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              >
-                <Dialog.Panel className="min-h-[350px] relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
+                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+                <Dialog.Panel className="relative min-h-[350px] transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
                   <div className="">
-                    <div className="border-b border-gray-200 mb-3">
+                    <div className="mb-3 border-b border-gray-200">
                       <nav className="-mb-px flex space-x-8" aria-label="Tabs">
                         {tabs.map((tab) => (
                           <a
@@ -72,11 +65,10 @@ export default function SignatureDialog(props: any) {
                             className={classNames(
                               tab.current
                                 ? "border-neon text-neon"
-                                : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
-                              "group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm cursor-pointer"
+                                : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
+                              "group inline-flex cursor-pointer items-center border-b-2 py-4 px-1 text-sm font-medium"
                             )}
-                            aria-current={tab.current ? "page" : undefined}
-                          >
+                            aria-current={tab.current ? "page" : undefined}>
                             <tab.icon
                               className={classNames(
                                 tab.current
@@ -93,7 +85,7 @@ export default function SignatureDialog(props: any) {
                     </div>
                     {isCurrentTab("Type") ? (
                       <div>
-                        <div className="my-8 border-b border-gray-300 mb-3">
+                        <div className="my-8 mb-3 border-b border-gray-300">
                           <input
                             value={typedSignature}
                             onChange={(e) => {
@@ -101,7 +93,7 @@ export default function SignatureDialog(props: any) {
                             }}
                             className={classNames(
                               typedSignature ? "font-qwigley text-4xl" : "",
-                              "leading-none h-10 align-bottom mt-14 text-center block w-full focus:border-neon focus:ring-neon text-2xl"
+                              "focus:border-neon focus:ring-neon mt-14 block h-10 w-full text-center align-bottom text-2xl leading-none"
                             )}
                             placeholder="Kindly type your name"
                           />
@@ -113,24 +105,19 @@ export default function SignatureDialog(props: any) {
                               props.onClose();
                               props.setOpen(false);
                               setCurrent(tabs[0]);
-                            }}
-                          >
+                            }}>
                             Cancel
                           </Button>
                           <Button
                             className="ml-3"
                             disabled={!typedSignature}
                             onClick={() => {
-                              localStorage.setItem(
-                                "typedSignature",
-                                typedSignature
-                              );
+                              localStorage.setItem("typedSignature", typedSignature);
                               props.onClose({
                                 type: "type",
                                 typedSignature: typedSignature,
                               });
-                            }}
-                          >
+                            }}>
                             Sign
                           </Button>
                         </div>
@@ -145,8 +132,7 @@ export default function SignatureDialog(props: any) {
                             signCanvasRef = ref;
                           }}
                           canvasProps={{
-                            className:
-                              "sigCanvas border-b b-2 border-slate w-full h-full mb-3",
+                            className: "sigCanvas border-b b-2 border-slate w-full h-full mb-3",
                           }}
                           clearOnResize={true}
                           onEnd={() => {
@@ -154,22 +140,20 @@ export default function SignatureDialog(props: any) {
                           }}
                         />
                         <IconButton
-                          className="block float-left"
+                          className="float-left block"
                           icon={TrashIcon}
                           onClick={() => {
                             signCanvasRef?.clear();
                             setSignatureEmpty(signCanvasRef?.isEmpty());
-                          }}
-                        ></IconButton>
-                        <div className="mt-10 float-right">
+                          }}></IconButton>
+                        <div className="float-right mt-10">
                           <Button
                             color="secondary"
                             onClick={() => {
                               props.onClose();
                               props.setOpen(false);
                               setCurrent(tabs[0]);
-                            }}
-                          >
+                            }}>
                             Cancel
                           </Button>
                           <Button
@@ -177,12 +161,10 @@ export default function SignatureDialog(props: any) {
                             onClick={() => {
                               props.onClose({
                                 type: "draw",
-                                signatureImage:
-                                  signCanvasRef.toDataURL("image/png"),
+                                signatureImage: signCanvasRef.toDataURL("image/png"),
                               });
                             }}
-                            disabled={signatureEmpty}
-                          >
+                            disabled={signatureEmpty}>
                             Sign
                           </Button>
                         </div>
@@ -200,11 +182,11 @@ export default function SignatureDialog(props: any) {
     </>
   );
 
-      function isCurrentTab(tabName: string): boolean {
+  function isCurrentTab(tabName: string): boolean {
     return currentTab.name === tabName;
   }
 
-        function setCurrent(t: any) {
+  function setCurrent(t: any) {
     tabs.forEach((tab) => {
       tab.current = tab.name === t.name;
     });
diff --git a/apps/web/components/layout.tsx b/apps/web/components/layout.tsx
index d77a390a1..408472633 100644
--- a/apps/web/components/layout.tsx
+++ b/apps/web/components/layout.tsx
@@ -1,9 +1,8 @@
 import { useEffect } from "react";
 import { useRouter } from "next/router";
-import { useSession } from "next-auth/react";
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
-
 import Navigation from "./navigation";
+import { useSession } from "next-auth/react";
 
 function useRedirectToLoginIfUnauthenticated() {
   const { data: session, status } = useSession();
diff --git a/apps/web/components/login.tsx b/apps/web/components/login.tsx
index 4f41a7d9b..4bbb784a1 100644
--- a/apps/web/components/login.tsx
+++ b/apps/web/components/login.tsx
@@ -1,14 +1,13 @@
-import { LockClosedIcon } from "@heroicons/react/20/solid";
-import Link from "next/link";
-import { FormProvider, useForm } from "react-hook-form";
-
-import Logo from "./logo";
-import { signIn } from "next-auth/react";
 import { useState } from "react";
+import Link from "next/link";
 import { useRouter } from "next/router";
-import { toast } from "react-hot-toast";
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
 import { Button } from "@documenso/ui";
+import Logo from "./logo";
+import { LockClosedIcon } from "@heroicons/react/20/solid";
+import { signIn } from "next-auth/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { toast } from "react-hot-toast";
 
 interface LoginValues {
   email: string;
@@ -22,10 +21,7 @@ export default function Login(props: any) {
   const methods = useForm<LoginValues>();
   const { register, formState } = methods;
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  let callbackUrl =
-    typeof router.query?.callbackUrl === "string"
-      ? router.query.callbackUrl
-      : "";
+  let callbackUrl = typeof router.query?.callbackUrl === "string" ? router.query.callbackUrl : "";
 
   // If not absolute URL, make it absolute
   if (!/^https?:\/\//.test(callbackUrl)) {
@@ -79,10 +75,7 @@ export default function Login(props: any) {
             </h2>
           </div>
           <FormProvider {...methods}>
-            <form
-              className="mt-8 space-y-6"
-              onSubmit={methods.handleSubmit(onSubmit)}
-            >
+            <form className="mt-8 space-y-6" onSubmit={methods.handleSubmit(onSubmit)}>
               <input type="hidden" name="remember" defaultValue="true" />
               <div className="-space-y-px rounded-md shadow-sm">
                 <div>
@@ -96,7 +89,7 @@ export default function Login(props: any) {
                     type="email"
                     autoComplete="email"
                     required
-                    className="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
+                    className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
                     placeholder="Email"
                   />
                 </div>
@@ -111,14 +104,14 @@ export default function Login(props: any) {
                     type="password"
                     autoComplete="current-password"
                     required
-                    className="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
+                    className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
                     placeholder="Password"
                   />
                 </div>
               </div>
               <div className="flex items-center justify-between">
                 <div className="text-sm">
-                  <a href="#" className="font-medium text-neon hover:text-neon">
+                  <a href="#" className="text-neon hover:text-neon font-medium">
                     Forgot your password?
                   </a>
                 </div>
@@ -127,11 +120,10 @@ export default function Login(props: any) {
                 <Button
                   type="submit"
                   disabled={formState.isSubmitting}
-                  className="group relative flex w-full"
-                >
+                  className="group relative flex w-full">
                   <span className="absolute inset-y-0 left-0 flex items-center pl-3">
                     <LockClosedIcon
-                      className="h-5 w-5 text-neon-dark group-hover:text-neon disabled:group-hover:bg-gray-600 disabled:disabled:bg-gray-600"
+                      className="text-neon-dark group-hover:text-neon h-5 w-5 disabled:disabled:bg-gray-600 disabled:group-hover:bg-gray-600"
                       aria-hidden="true"
                     />
                   </span>
@@ -140,10 +132,7 @@ export default function Login(props: any) {
               </div>
               <div>
                 <div className="relative">
-                  <div
-                    className="absolute inset-0 flex items-center"
-                    aria-hidden="true"
-                  >
+                  <div className="absolute inset-0 flex items-center" aria-hidden="true">
                     <div className="w-full border-t border-gray-300" />
                   </div>
                   <div className="relative flex justify-center"></div>
@@ -152,10 +141,7 @@ export default function Login(props: any) {
               {props.allowSignup ? (
                 <p className="mt-2 text-center text-sm text-gray-600">
                   Are you new here?{" "}
-                  <Link
-                    href="/signup"
-                    className="font-medium text-neon hover:text-neon"
-                  >
+                  <Link href="/signup" className="text-neon hover:text-neon font-medium">
                     Create a new Account
                   </Link>
                 </p>
@@ -164,8 +150,7 @@ export default function Login(props: any) {
                   Like Documenso{" "}
                   <Link
                     href="https://documenso.com"
-                    className="font-medium text-neon hover:text-neon"
-                  >
+                    className="text-neon hover:text-neon font-medium">
                     Hosted Documenso will be availible soon™
                   </Link>
                 </p>
diff --git a/apps/web/components/logo.tsx b/apps/web/components/logo.tsx
index 5a70b8a56..c1504e081 100644
--- a/apps/web/components/logo.tsx
+++ b/apps/web/components/logo.tsx
@@ -1,25 +1,16 @@
-import { classNames } from "@documenso/lib";
 import Link from "next/link";
+import { classNames } from "@documenso/lib";
 
 export default function Logo(props: any) {
   return (
     <>
       <Link href="/dashboard">
-        <svg
-          className="w-12"
-          viewBox="0 0 88.6758041381836 32.18000030517578"
-          {...props}
-        >
-          <rect
-            width="88.6758041381836"
-            height="32.18000030517578"
-            fill="transparent"
-          ></rect>
+        <svg className="w-12" viewBox="0 0 88.6758041381836 32.18000030517578" {...props}>
+          <rect width="88.6758041381836" height="32.18000030517578" fill="transparent"></rect>
           <g transform="matrix(1,0,0,1,-25.98720359802246,-66.41200256347656)">
             <path
               d="M99.004,68.26l-.845-1.848-23.226,2.299c-1.437,.142-2.876,.089-4.3-.156-2.949-.51-6.32-1.717-9.073-2.099-1.477-.206-2.934,.448-3.789,1.67-1.174,1.678-2.308,3.888-3.501,5.622-1.518,2.207-3.032,4.418-4.531,6.638-1.693,2.499-3.365,5.013-5.061,7.51-.103,.153-.333,.221-.503,.329-.079-.279-.306-.636-.206-.824,1.006-1.928,1.845-4,3.165-5.694,1.908-2.449,2.914-5.445,5.007-7.745,.342-.777,.845-1.466,1.151-2.244,.915-2.341-1.295-5.305-2.935-5.305h-.613c-1.196,0-2.526,.357-4.092,1.716-.986,.856-2.391,2.432-2.97,3.326-3.424,5.286-7.177,10.382-10.15,15.932-.365,.682-1.719,3.722-2.013,3.606-.214-.077-.159-.458-.041-.823,1.312-4.065,4.163-9.851,5.843-13.777,.41-.962,.635-1.516-.305-2.361-1.016-.913-2.669,.084-3.084,1.052-1.784,4.174-2.631,8.08-4.038,12.396-.466,1.43-.916,2.865-1.386,4.294-.273,.831-.548,1.661-.836,2.488-.112,.321-.226,.642-.345,.962-.032,.082-.064,.165-.095,.248-.006,.011-.003,.002-.009,.017-.005,.008-.003,.015-.006,.023-.011,.026-.021,.05-.03,.076-.024,.067-.012,.044,.009-.002-.691,1.577,.417,3.002,2.091,3.002,.808,0,1.552-1.431,1.943-2.055,1.224-1.957,3.28-5.125,4.36-7.163,.894-1.69,2.078-3.14,3.209-4.615,1.857-2.42,3.065-5.242,5.025-7.575,.33-.394,.694-.772,1.093-1.093,.121-.098,.473-.05,.618,.062,.124,.098,.2,.432,.127,.577-.397,.788-.863,1.542-1.278,2.322-1.481,2.79-2.953,5.582-4.425,8.377-1.16,2.204-2.659,5.055-3.551,6.755-.438,.833-.176,1.857,.604,2.382,0,0-.383,2.028,1.908,2.028,1.896,0,2.711-1.145,3.053-1.624,.348-.486,.748-.951,1.202-1.334,.151-.13,.563-.018,.821,.079,.076,.029,.085,.406,.03,.582-.398,1.272-.323,2.283,1.879,2.283,.784,0,2.218-1.283,2.904-2.213,.794-1.075,.731-1.1,1.415-2.244,1.678-2.821,3.132-5.055,4.751-7.91,1.083-1.91,2.175-3.854,3.294-5.516,.685-1.015,1.446-1.252,2.188-1.252s.409,.686,.336,1.025c-.071,.341-.677,1.545-2.531,4.35-1.115,1.687-2.244,3.367-3.308,5.084-1.075,1.736-2.141,3.48-3.205,5.225-.88,1.445,.162,3.467,1.854,3.467h2.765c2.653,0,5.302-.397,7.916-.851l7.41-1.287c1.421-.245,2.868-.298,4.303-.158l23.161,2.296,.845-1.849c4.61-9.858,15.211-11.322,15.66-11.38v-5.717c-.448-.058-11.05-1.522-15.66-11.381Zm-40.143,6.165c-.164,.465-.491,.922-.86,1.255-.918,.828-1.451,1.842-1.911,2.977-.512,1.269-1.829,2.119-1.966,3.65-.027,.3-.627,.577-1.006,.797-.109,.062-.357-.114-.524-.174,.015-.229-.024-.401,.039-.515,.848-1.495,1.678-3.002,2.584-4.462,.775-1.254,1.642-2.453,2.469-3.677,.085-.126,.158-.273,.27-.365,.457-.368,.93-.719,1.399-1.075,.497,.721-.312,1.071-.494,1.589Zm30.047,12.011c1.736,0,3.162-1.137,3.686-2.693h10.547c-3.02,1.916-6.1,4.684-8.402,8.716l-21.902-2.17v-15.584l21.902-2.167c2.302,4.032,5.382,6.802,8.402,8.714h-10.547c-.524-1.554-1.951-2.691-3.686-2.691-2.172,0-3.938,1.763-3.938,3.938s1.766,3.938,3.938,3.938Z"
-              className={classNames(props.dark ? "fill-white" : "fill-brown")}
-            ></path>
+              className={classNames(props.dark ? "fill-white" : "fill-brown")}></path>
           </g>
         </svg>
       </Link>
diff --git a/apps/web/components/navigation.tsx b/apps/web/components/navigation.tsx
index 1155875f9..d0143a41c 100644
--- a/apps/web/components/navigation.tsx
+++ b/apps/web/components/navigation.tsx
@@ -1,23 +1,22 @@
 import { Fragment, useEffect, useState } from "react";
-import { Disclosure, Menu, Transition } from "@headlessui/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { signOut, useSession } from "next-auth/react";
-import avatarFromInitials from "avatar-from-initials";
-import { toast } from "react-hot-toast";
-
+import { getUser } from "@documenso/lib/api";
+import Logo from "./logo";
+import { Disclosure, Menu, Transition } from "@headlessui/react";
 import {
+  ArrowRightOnRectangleIcon,
   Bars3Icon,
   BellIcon,
-  XMarkIcon,
-  UserCircleIcon,
-  ArrowRightOnRectangleIcon,
-  DocumentTextIcon,
   ChartBarIcon,
+  DocumentTextIcon,
+  UserCircleIcon,
   WrenchIcon,
+  XMarkIcon,
 } from "@heroicons/react/24/outline";
-import Logo from "./logo";
-import { getUser } from "@documenso/lib/api";
+import avatarFromInitials from "avatar-from-initials";
+import { signOut, useSession } from "next-auth/react";
+import { toast } from "react-hot-toast";
 
 const navigation = [
   {
@@ -125,14 +124,12 @@ export default function TopNavigation() {
                           item.current
                             ? "border-neon text-brown"
                             : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
-                          "inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
+                          "inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
                         )}
-                        aria-current={item.current ? "page" : undefined}
-                      >
+                        aria-current={item.current ? "page" : undefined}>
                         <item.icon
-                          className="flex-shrink-0 -ml-1 mr-3 h-6 w-6 inline"
-                          aria-hidden="true"
-                        ></item.icon>
+                          className="-ml-1 mr-3 inline h-6 w-6 flex-shrink-0"
+                          aria-hidden="true"></item.icon>
                         {item.name}
                       </Link>
                     ))}
@@ -142,8 +139,7 @@ export default function TopNavigation() {
                   onClick={() => {
                     document?.getElementById("mb")?.click();
                   }}
-                  className="hidden sm:ml-6 sm:flex sm:items-center hover:bg-gray-200 px-3 cursor-pointer"
-                >
+                  className="hidden cursor-pointer px-3 hover:bg-gray-200 sm:ml-6 sm:flex sm:items-center">
                   <span className="text-sm">
                     <p className="font-bold">{user?.name || ""}</p>
                     <p>{user?.email}</p>
@@ -152,8 +148,7 @@ export default function TopNavigation() {
                     <div>
                       <Menu.Button
                         id="mb"
-                        className="flex max-w-xs items-center rounded-full bg-white text-sm"
-                      >
+                        className="flex max-w-xs items-center rounded-full bg-white text-sm">
                         <span className="sr-only">Open user menu</span>
                         <div
                           key={user?.email}
@@ -170,8 +165,7 @@ export default function TopNavigation() {
                       enterTo="transform opacity-100 scale-100"
                       leave="transition ease-in duration-75"
                       leaveFrom="transform opacity-100 scale-100"
-                      leaveTo="transform opacity-0 scale-95"
-                    >
+                      leaveTo="transform opacity-0 scale-95">
                       <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                         {userNavigation.map((item) => (
                           <Menu.Item key={item.name}>
@@ -182,12 +176,10 @@ export default function TopNavigation() {
                                 className={classNames(
                                   active ? "bg-gray-100" : "",
                                   "block px-4 py-2 text-sm text-gray-700"
-                                )}
-                              >
+                                )}>
                                 <item.icon
-                                  className="flex-shrink-0 -ml-1 mr-3 h-6 w-6 inline"
-                                  aria-hidden="true"
-                                ></item.icon>
+                                  className="-ml-1 mr-3 inline h-6 w-6 flex-shrink-0"
+                                  aria-hidden="true"></item.icon>
                                 {item.name}
                               </Link>
                             )}
@@ -219,15 +211,14 @@ export default function TopNavigation() {
                     href={item.href}
                     className={classNames(
                       item.current
-                        ? "bg-teal-50 border-teal-500 text-teal-700"
-                        : "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800",
-                      "block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
+                        ? "border-teal-500 bg-teal-50 text-teal-700"
+                        : "border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800",
+                      "block border-l-4 py-2 pl-3 pr-4 text-base font-medium"
                     )}
                     aria-current={item.current ? "page" : undefined}
                     onClick={() => {
                       close();
-                    }}
-                  >
+                    }}>
                     {item.name}
                   </Link>
                 ))}
@@ -259,8 +250,7 @@ export default function TopNavigation() {
                           : item.click
                       }
                       href={item.href}
-                      className="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
-                    >
+                      className="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">
                       {item.name}
                     </Link>
                   ))}
diff --git a/apps/web/components/settings.tsx b/apps/web/components/settings.tsx
index b72cb4d48..32d868804 100644
--- a/apps/web/components/settings.tsx
+++ b/apps/web/components/settings.tsx
@@ -1,12 +1,12 @@
 import { ChangeEvent, useEffect, useState } from "react";
-import { KeyIcon, UserCircleIcon } from "@heroicons/react/24/outline";
-import { useRouter } from "next/router";
-import Link from "next/link";
 import Head from "next/head";
-import { useSession } from "next-auth/react";
+import Link from "next/link";
+import { useRouter } from "next/router";
 import { updateUser } from "@documenso/features";
-import { Button } from "@documenso/ui";
 import { getUser } from "@documenso/lib/api";
+import { Button } from "@documenso/ui";
+import { KeyIcon, UserCircleIcon } from "@heroicons/react/24/outline";
+import { useSession } from "next-auth/react";
 
 const subNavigation = [
   {
@@ -74,15 +74,12 @@ export default function Setttings() {
       </Head>
       <header className="py-10">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <h1 className="text-3xl font-bold leading-tight tracking-tight text-brown">
-            Settings
-          </h1>
+          <h1 className="text-brown text-3xl font-bold leading-tight tracking-tight">Settings</h1>
         </div>
       </header>
       <div
         className="mx-auto max-w-screen-xl px-4 pb-6 sm:px-6 lg:px-8 lg:pb-16"
-        hidden={!user.email}
-      >
+        hidden={!user.email}>
         <div className="overflow-hidden rounded-lg bg-white shadow">
           <div className="divide-y divide-gray-200 lg:grid lg:grid-cols-12 lg:divide-y-0 lg:divide-x">
             <aside className="py-6 lg:col-span-3">
@@ -93,18 +90,17 @@ export default function Setttings() {
                     href={item.href}
                     className={classNames(
                       item.current
-                        ? "bg-teal-50 border-neon-dark text-teal-700 hover:bg-teal-50 hover:text-teal-700"
+                        ? "border-neon-dark bg-teal-50 text-teal-700 hover:bg-teal-50 hover:text-teal-700"
                         : "border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900",
-                      "group border-l-4 px-3 py-2 flex items-center text-sm font-medium"
+                      "group flex items-center border-l-4 px-3 py-2 text-sm font-medium"
                     )}
-                    aria-current={item.current ? "page" : undefined}
-                  >
+                    aria-current={item.current ? "page" : undefined}>
                     <item.icon
                       className={classNames(
                         item.current
                           ? "text-teal-500 group-hover:text-teal-500"
                           : "text-gray-400 group-hover:text-gray-500",
-                        "flex-shrink-0 -ml-1 mr-3 h-6 w-6"
+                        "-ml-1 mr-3 h-6 w-6 flex-shrink-0"
                       )}
                       aria-hidden="true"
                     />
@@ -115,20 +111,14 @@ export default function Setttings() {
             </aside>
 
             <form
-              className="divide-y divide-gray-200 lg:col-span-9 min-h-[251px]"
+              className="min-h-[251px] divide-y divide-gray-200 lg:col-span-9"
               action="#"
               method="POST"
-              hidden={
-                subNavigation.filter((e) => e.current)[0]?.name !==
-                subNavigation[0].name
-              }
-            >
+              hidden={subNavigation.filter((e) => e.current)[0]?.name !== subNavigation[0].name}>
               {/* Profile section */}
               <div className="py-6 px-4 sm:p-6 lg:pb-8">
                 <div>
-                  <h2 className="text-lg font-medium leading-6 text-gray-900">
-                    Profile
-                  </h2>
+                  <h2 className="text-lg font-medium leading-6 text-gray-900">Profile</h2>
                   <p className="mt-1 text-sm text-gray-500">
                     Let people know who they are dealing with builds trust.
                   </p>
@@ -136,10 +126,7 @@ export default function Setttings() {
 
                 <div className="my-6 grid grid-cols-12 gap-6">
                   <div className="col-span-12 sm:col-span-6">
-                    <label
-                      htmlFor="first-name"
-                      className="block text-sm font-medium text-gray-700"
-                    >
+                    <label htmlFor="first-name" className="block text-sm font-medium text-gray-700">
                       Full Name
                     </label>
                     <input
@@ -150,14 +137,11 @@ export default function Setttings() {
                       onChange={(e) => handleNameChange(e)}
                       onKeyDown={handleKeyPress}
                       autoComplete="given-name"
-                      className="mt-1 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
+                      className="focus:border-neon focus:ring-neon mt-1 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm focus:outline-none sm:text-sm"
                     />
                   </div>
                   <div className="col-span-12 sm:col-span-6">
-                    <label
-                      htmlFor="first-name"
-                      className="block text-sm font-medium text-gray-700"
-                    >
+                    <label htmlFor="first-name" className="block text-sm font-medium text-gray-700">
                       Email
                     </label>
                     <input
@@ -167,7 +151,7 @@ export default function Setttings() {
                       name="first-name"
                       id="first-name"
                       autoComplete="given-name"
-                      className="mt-1 block w-full rounded-md border disabled:bg-neutral-100 border-gray-300 py-2 px-3 shadow-sm focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
+                      className="focus:border-neon focus:ring-neon mt-1 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm focus:outline-none disabled:bg-neutral-100 sm:text-sm"
                     />
                   </div>
                 </div>
@@ -175,21 +159,14 @@ export default function Setttings() {
               </div>
             </form>
             <div
-              hidden={
-                subNavigation.filter((e) => e.current)[0]?.name !==
-                subNavigation[1].name
-              }
-              className="divide-y divide-gray-200 lg:col-span-9 min-h-[251px]"
-            >
+              hidden={subNavigation.filter((e) => e.current)[0]?.name !== subNavigation[1].name}
+              className="min-h-[251px] divide-y divide-gray-200 lg:col-span-9">
               {/* Passwords section */}
               <div className="py-6 px-4 sm:p-6 lg:pb-8">
                 <div>
-                  <h2 className="text-lg font-medium leading-6 text-gray-900">
-                    Password
-                  </h2>
+                  <h2 className="text-lg font-medium leading-6 text-gray-900">Password</h2>
                   <p className="mt-1 text-sm text-gray-500">
-                    Forgot your passwort? Email <b>hi@documenso.com</b> to reset
-                    it.
+                    Forgot your passwort? Email <b>hi@documenso.com</b> to reset it.
                   </p>
                 </div>
               </div>
diff --git a/apps/web/components/signup.tsx b/apps/web/components/signup.tsx
index 96e356777..d7b27ba7b 100644
--- a/apps/web/components/signup.tsx
+++ b/apps/web/components/signup.tsx
@@ -1,9 +1,9 @@
+import Link from "next/link";
 import { signup } from "@documenso/lib/api";
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
 import { Button } from "@documenso/ui";
 import { XCircleIcon } from "@heroicons/react/24/outline";
 import { signIn } from "next-auth/react";
-import Link from "next/link";
 import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 
@@ -107,8 +107,7 @@ export default function Signup(props: { source: string }) {
                 viewBox="0 0 24 24"
                 strokeWidth={1.5}
                 stroke="rgb(17 24 39 / var(--tw-text-opacity))"
-                className="w-8 h-8 inline mb-1"
-              >
+                className="mb-1 inline h-8 w-8">
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
@@ -130,8 +129,7 @@ export default function Signup(props: { source: string }) {
                 form.clearErrors();
                 trigger();
               }}
-              className="mt-8 space-y-6"
-            >
+              className="mt-8 space-y-6">
               <input type="hidden" name="remember" defaultValue="true" />
               <div className="-space-y-px rounded-md shadow-sm">
                 <div>
@@ -145,7 +143,7 @@ export default function Signup(props: { source: string }) {
                     type="email"
                     autoComplete="email"
                     required
-                    className="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
+                    className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
                     placeholder="Email"
                   />
                 </div>
@@ -157,8 +155,7 @@ export default function Signup(props: { source: string }) {
                     {...register("password", {
                       minLength: {
                         value: 7,
-                        message:
-                          "Your password has to be at least 7 characters long.",
+                        message: "Your password has to be at least 7 characters long.",
                       },
                     })}
                     id="password"
@@ -166,7 +163,7 @@ export default function Signup(props: { source: string }) {
                     type="password"
                     autoComplete="current-password"
                     required
-                    className="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
+                    className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
                     placeholder="Password"
                   />
                 </div>
@@ -177,16 +174,12 @@ export default function Signup(props: { source: string }) {
                 onClick={() => {
                   form.clearErrors();
                 }}
-                className="sgroup relative flex w-full"
-              >
+                className="sgroup relative flex w-full">
                 Create Account
               </Button>
               <div className="pt-2">
                 <div className="relative">
-                  <div
-                    className="absolute inset-0 flex items-center"
-                    aria-hidden="true"
-                  >
+                  <div className="absolute inset-0 flex items-center" aria-hidden="true">
                     <div className="w-full border-t border-gray-300" />
                   </div>
                   <div className="relative flex justify-center"></div>
@@ -194,10 +187,7 @@ export default function Signup(props: { source: string }) {
               </div>
               <p className="mt-2 text-center text-sm text-gray-600">
                 Already have an account?{" "}
-                <Link
-                  href="/login"
-                  className="font-medium text-neon hover:text-neon"
-                >
+                <Link href="/login" className="text-neon hover:text-neon font-medium">
                   Sign In
                 </Link>
               </p>
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index 3043c0962..0c64f9bf6 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -18,7 +18,6 @@ const withTM = require("next-transpile-modules")([
 const plugins = [];
 plugins.push(withTM);
 
-const moduleExports = () =>
-  plugins.reduce((acc, next) => next(acc), nextConfig);
+const moduleExports = () => plugins.reduce((acc, next) => next(acc), nextConfig);
 
 module.exports = moduleExports;
diff --git a/apps/web/pages/404.jsx b/apps/web/pages/404.jsx
index 615766083..6321032d0 100644
--- a/apps/web/pages/404.jsx
+++ b/apps/web/pages/404.jsx
@@ -1,31 +1,29 @@
-import { ArrowSmallLeftIcon } from "@heroicons/react/20/solid";
-
 import { Button } from "@documenso/ui";
 import Logo from "../components/logo";
+import { ArrowSmallLeftIcon } from "@heroicons/react/20/solid";
 
 export default function Custom404() {
   return (
     <>
-      <main className="relative min-h-full bg-gray-100 isolate">
+      <main className="relative isolate min-h-full bg-gray-100">
         <div className="absolute top-10 left-10">
           <Logo className="w-10 md:w-20" />
         </div>
 
-        <div className="px-6 py-48 mx-auto text-center max-w-7xl sm:py-40 lg:px-8">
-          <p className="text-base font-semibold leading-8 text-brown">404</p>
-          <h1 className="mt-4 text-3xl font-bold tracking-tight text-brown sm:text-5xl">
+        <div className="mx-auto max-w-7xl px-6 py-48 text-center sm:py-40 lg:px-8">
+          <p className="text-brown text-base font-semibold leading-8">404</p>
+          <h1 className="text-brown mt-4 text-3xl font-bold tracking-tight sm:text-5xl">
             Page not found
           </h1>
           <p className="mt-4 text-base text-gray-700 sm:mt-6">
             Sorry, we couldn’t find the page you’re looking for.
           </p>
-          <div className="flex justify-center mt-10">
+          <div className="mt-10 flex justify-center">
             <Button
               color="secondary"
               href="/"
               icon={ArrowSmallLeftIcon}
-              className="text-base font-semibold leading-7 text-brown"
-            >
+              className="text-brown text-base font-semibold leading-7">
               Back to home
             </Button>
           </div>
diff --git a/apps/web/pages/500.jsx b/apps/web/pages/500.jsx
index 1aab5c936..2735dded2 100644
--- a/apps/web/pages/500.jsx
+++ b/apps/web/pages/500.jsx
@@ -1,27 +1,25 @@
-import Logo from "../components/logo";
 import { Button } from "@documenso/ui";
+import Logo from "../components/logo";
 import { ArrowSmallLeftIcon } from "@heroicons/react/20/solid";
 import { EllipsisVerticalIcon } from "@heroicons/react/20/solid";
 
 export default function Custom500() {
   return (
     <>
-      <div className="relative flex flex-col items-center justify-center min-h-full text-white bg-black">
+      <div className="relative flex min-h-full flex-col items-center justify-center bg-black text-white">
         <div className="absolute top-10 left-10">
           <Logo dark className="w-10 md:w-20" />
         </div>
 
-        <div className="px-4 py-10 mt-20 max-w-7xl">
+        <div className="mt-20 max-w-7xl px-4 py-10">
           <p className="inline-flex items-center text-3xl font-bold sm:text-5xl">
             500
-            <span className="relative px-3 font-thin sm:text-6xl -top-1.5">
-              |
-            </span>{" "}
-            <span className="text-base font-semibold align-middle sm:text-2xl">
+            <span className="relative -top-1.5 px-3 font-thin sm:text-6xl">|</span>{" "}
+            <span className="align-middle text-base font-semibold sm:text-2xl">
               Something went wrong.
             </span>
           </p>
-          <div className="flex justify-center mt-10">
+          <div className="mt-10 flex justify-center">
             <Button color="secondary" href="/" icon={ArrowSmallLeftIcon}>
               Back to home
             </Button>
diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx
index d9a50d762..f8f86b960 100644
--- a/apps/web/pages/_app.tsx
+++ b/apps/web/pages/_app.tsx
@@ -1,13 +1,14 @@
-import "../styles/tailwind.css";
+import { ReactElement, ReactNode } from "react";
+import { NextPage } from "next";
+import type { AppProps } from "next/app";
 import "../../../node_modules/placeholder-loading/src/scss/placeholder-loading.scss";
 import "../../../node_modules/react-resizable/css/styles.css";
-import "react-tooltip/dist/react-tooltip.css";
-import { ReactElement, ReactNode } from "react";
-import type { AppProps } from "next/app";
-import { NextPage } from "next";
+import "../styles/tailwind.css";
 import { SessionProvider } from "next-auth/react";
-export { coloredConsole } from "@documenso/lib";
 import { Toaster } from "react-hot-toast";
+import "react-tooltip/dist/react-tooltip.css";
+
+export { coloredConsole } from "@documenso/lib";
 
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: ReactElement) => ReactNode;
diff --git a/apps/web/pages/_document.jsx b/apps/web/pages/_document.jsx
index 4baf290c4..0058cd7bb 100644
--- a/apps/web/pages/_document.jsx
+++ b/apps/web/pages/_document.jsx
@@ -5,10 +5,7 @@ export default function Document(props) {
   let pageProps = props.__NEXT_DATA__?.props?.pageProps;
 
   return (
-    <Html
-      className="h-full bg-gray-100 scroll-smooth font-normal antialiased"
-      lang="en"
-    >
+    <Html className="h-full scroll-smooth bg-gray-100 font-normal antialiased" lang="en">
       <Head>
         <meta name="color-scheme"></meta>
       </Head>
diff --git a/apps/web/pages/api/auth/[...nextauth].ts b/apps/web/pages/api/auth/[...nextauth].ts
index 16c98a352..b03575dd1 100644
--- a/apps/web/pages/api/auth/[...nextauth].ts
+++ b/apps/web/pages/api/auth/[...nextauth].ts
@@ -1,9 +1,9 @@
-import NextAuth, { Session } from "next-auth";
-import GitHubProvider from "next-auth/providers/github";
-import CredentialsProvider from "next-auth/providers/credentials";
 import { ErrorCode } from "@documenso/lib/auth";
-import prisma from "@documenso/prisma";
 import { verifyPassword } from "@documenso/lib/auth";
+import prisma from "@documenso/prisma";
+import NextAuth, { Session } from "next-auth";
+import CredentialsProvider from "next-auth/providers/credentials";
+import GitHubProvider from "next-auth/providers/github";
 
 export default NextAuth({
   secret: process.env.AUTH_SECRET,
@@ -27,8 +27,7 @@ export default NextAuth({
         password: {
           label: "Password",
           type: "password",
-          placeholder:
-            "Select a password. Here is some inspiration: https://xkcd.com/936/",
+          placeholder: "Select a password. Here is some inspiration: https://xkcd.com/936/",
         },
       },
       async authorize(credentials: any) {
@@ -57,10 +56,7 @@ export default NextAuth({
           throw new Error(ErrorCode.UserMissingPassword);
         }
 
-        const isCorrectPassword = await verifyPassword(
-          credentials.password,
-          user.password
-        );
+        const isCorrectPassword = await verifyPassword(credentials.password, user.password);
 
         if (!isCorrectPassword) {
           throw new Error(ErrorCode.IncorrectPassword);
diff --git a/apps/web/pages/api/auth/signup.ts b/apps/web/pages/api/auth/signup.ts
index 933747e3a..b82bf5ea2 100644
--- a/apps/web/pages/api/auth/signup.ts
+++ b/apps/web/pages/api/auth/signup.ts
@@ -1,9 +1,8 @@
-import { IdentityProvider } from "@prisma/client";
 import { NextApiRequest, NextApiResponse } from "next";
-
-import prisma from "@documenso/prisma";
 import { hashPassword } from "@documenso/lib/auth";
 import { defaultHandler, defaultResponder } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
+import { IdentityProvider } from "@prisma/client";
 
 async function postHandler(req: NextApiRequest, res: NextApiResponse) {
   const { email, password, source } = req.body;
diff --git a/apps/web/pages/api/documents/[id].ts b/apps/web/pages/api/documents/[id].ts
index 500061921..93e976f5f 100644
--- a/apps/web/pages/api/documents/[id].ts
+++ b/apps/web/pages/api/documents/[id].ts
@@ -1,13 +1,9 @@
-import {
-  defaultHandler,
-  defaultResponder,
-  getUserFromToken,
-} from "@documenso/lib/server";
-import prisma from "@documenso/prisma";
 import { NextApiRequest, NextApiResponse } from "next";
-import { Document as PrismaDocument } from "@prisma/client";
 import { getDocument } from "@documenso/lib/query";
+import { defaultHandler, defaultResponder, getUserFromToken } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
 import { addDigitalSignature } from "@documenso/signing/addDigitalSignature";
+import { Document as PrismaDocument } from "@prisma/client";
 
 async function getHandler(req: NextApiRequest, res: NextApiResponse) {
   const { id: documentId } = req.query;
@@ -46,8 +42,7 @@ async function getHandler(req: NextApiRequest, res: NextApiResponse) {
     document = await getDocument(+documentId, req, res);
   }
 
-  if (!document)
-    res.status(404).end(`No document with id ${documentId} found.`);
+  if (!document) res.status(404).end(`No document with id ${documentId} found.`);
 
   const signaturesCount = await prisma.signature.count({
     where: {
@@ -61,18 +56,13 @@ async function getHandler(req: NextApiRequest, res: NextApiResponse) {
 
   // No need to add a signature, if no one signed yet.
   if (signaturesCount > 0) {
-    signedDocumentAsBase64 = await addDigitalSignature(
-      document?.document || ""
-    );
+    signedDocumentAsBase64 = await addDigitalSignature(document?.document || "");
   }
 
   const buffer: Buffer = Buffer.from(signedDocumentAsBase64, "base64");
   res.setHeader("Content-Type", "application/pdf");
   res.setHeader("Content-Length", buffer.length);
-  res.setHeader(
-    "Content-Disposition",
-    `attachment; filename=${document?.title}`
-  );
+  res.setHeader("Content-Disposition", `attachment; filename=${document?.title}`);
 
   return res.status(200).send(buffer);
 }
diff --git a/apps/web/pages/api/documents/[id]/fields/[fid].ts b/apps/web/pages/api/documents/[id]/fields/[fid].ts
index 4f55a4d56..b847a379e 100644
--- a/apps/web/pages/api/documents/[id]/fields/[fid].ts
+++ b/apps/web/pages/api/documents/[id]/fields/[fid].ts
@@ -1,13 +1,9 @@
-import {
-  defaultHandler,
-  defaultResponder,
-  getUserFromToken,
-} from "@documenso/lib/server";
-import prisma from "@documenso/prisma";
 import { NextApiRequest, NextApiResponse } from "next";
-import short from "short-uuid";
-import { Document as PrismaDocument, FieldType } from "@prisma/client";
 import { getDocument } from "@documenso/lib/query";
+import { defaultHandler, defaultResponder, getUserFromToken } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
+import { FieldType, Document as PrismaDocument } from "@prisma/client";
+import short from "short-uuid";
 
 async function deleteHandler(req: NextApiRequest, res: NextApiResponse) {
   const user = await getUserFromToken(req, res);
diff --git a/apps/web/pages/api/documents/[id]/fields/index.ts b/apps/web/pages/api/documents/[id]/fields/index.ts
index 861b4c672..5d2743b16 100644
--- a/apps/web/pages/api/documents/[id]/fields/index.ts
+++ b/apps/web/pages/api/documents/[id]/fields/index.ts
@@ -1,12 +1,8 @@
-import {
-  defaultHandler,
-  defaultResponder,
-  getUserFromToken,
-} from "@documenso/lib/server";
-import prisma from "@documenso/prisma";
 import { NextApiRequest, NextApiResponse } from "next";
-import { Document as PrismaDocument, FieldType } from "@prisma/client";
 import { getDocument } from "@documenso/lib/query";
+import { defaultHandler, defaultResponder, getUserFromToken } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
+import { FieldType, Document as PrismaDocument } from "@prisma/client";
 
 async function getHandler(req: NextApiRequest, res: NextApiResponse) {
   const user = await getUserFromToken(req, res);
@@ -61,18 +57,14 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
     });
 
     if (!recipient || recipient?.documentId !== +documentId)
-      return res
-        .status(401)
-        .send("Recipient does not have access to this document.");
+      return res.status(401).send("Recipient does not have access to this document.");
   }
 
   if (user) {
     const document: PrismaDocument = await getDocument(+documentId, req, res);
     // todo entity ownerships checks
     if (document.userId !== user.id) {
-      return res
-        .status(401)
-        .send("User does not have access to this document.");
+      return res.status(401).send("User does not have access to this document.");
     }
   }
 
diff --git a/apps/web/pages/api/documents/[id]/recipients/[rid].ts b/apps/web/pages/api/documents/[id]/recipients/[rid].ts
index 9b21708b2..dab82d077 100644
--- a/apps/web/pages/api/documents/[id]/recipients/[rid].ts
+++ b/apps/web/pages/api/documents/[id]/recipients/[rid].ts
@@ -1,13 +1,9 @@
-import {
-  defaultHandler,
-  defaultResponder,
-  getUserFromToken,
-} from "@documenso/lib/server";
-import prisma from "@documenso/prisma";
 import { NextApiRequest, NextApiResponse } from "next";
-import short from "short-uuid";
-import { Document as PrismaDocument } from "@prisma/client";
 import { getDocument } from "@documenso/lib/query";
+import { defaultHandler, defaultResponder, getUserFromToken } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
+import { Document as PrismaDocument } from "@prisma/client";
+import short from "short-uuid";
 
 async function deleteHandler(req: NextApiRequest, res: NextApiResponse) {
   const user = await getUserFromToken(req, res);
diff --git a/apps/web/pages/api/documents/[id]/recipients/index.ts b/apps/web/pages/api/documents/[id]/recipients/index.ts
index f2243e7aa..0fa29549a 100644
--- a/apps/web/pages/api/documents/[id]/recipients/index.ts
+++ b/apps/web/pages/api/documents/[id]/recipients/index.ts
@@ -1,13 +1,9 @@
-import {
-  defaultHandler,
-  defaultResponder,
-  getUserFromToken,
-} from "@documenso/lib/server";
-import prisma from "@documenso/prisma";
 import { NextApiRequest, NextApiResponse } from "next";
-import short from "short-uuid";
-import { Document as PrismaDocument } from "@prisma/client";
 import { getDocument } from "@documenso/lib/query";
+import { defaultHandler, defaultResponder, getUserFromToken } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
+import { Document as PrismaDocument } from "@prisma/client";
+import short from "short-uuid";
 
 async function postHandler(req: NextApiRequest, res: NextApiResponse) {
   const user = await getUserFromToken(req, res);
diff --git a/apps/web/pages/api/documents/[id]/send.ts b/apps/web/pages/api/documents/[id]/send.ts
index b5902c8ed..302e75001 100644
--- a/apps/web/pages/api/documents/[id]/send.ts
+++ b/apps/web/pages/api/documents/[id]/send.ts
@@ -1,12 +1,8 @@
-import {
-  defaultHandler,
-  defaultResponder,
-  getUserFromToken,
-} from "@documenso/lib/server";
-import prisma from "@documenso/prisma";
 import { NextApiRequest, NextApiResponse } from "next";
 import { sendSigningRequest } from "@documenso/lib/mail";
 import { getDocument } from "@documenso/lib/query";
+import { defaultHandler, defaultResponder, getUserFromToken } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
 import { Document as PrismaDocument, SendStatus } from "@prisma/client";
 
 async function postHandler(req: NextApiRequest, res: NextApiResponse) {
@@ -23,8 +19,7 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
 
   const document: PrismaDocument = await getDocument(+documentId, req, res);
 
-  if (!document)
-    res.status(404).end(`No document with id ${documentId} found.`);
+  if (!document) res.status(404).end(`No document with id ${documentId} found.`);
 
   let recipientCondition: any = {
     documentId: +documentId,
diff --git a/apps/web/pages/api/documents/[id]/sign.ts b/apps/web/pages/api/documents/[id]/sign.ts
index e4d22487d..ef68e1a78 100644
--- a/apps/web/pages/api/documents/[id]/sign.ts
+++ b/apps/web/pages/api/documents/[id]/sign.ts
@@ -1,11 +1,11 @@
-import { defaultHandler, defaultResponder } from "@documenso/lib/server";
-import prisma from "@documenso/prisma";
 import { NextApiRequest, NextApiResponse } from "next";
-import { SigningStatus, DocumentStatus } from "@prisma/client";
-import { getDocument } from "@documenso/lib/query";
-import { Document as PrismaDocument, FieldType } from "@prisma/client";
-import { insertImageInPDF, insertTextInPDF } from "@documenso/pdf";
 import { sendSigningDoneMail } from "@documenso/lib/mail";
+import { getDocument } from "@documenso/lib/query";
+import { defaultHandler, defaultResponder } from "@documenso/lib/server";
+import { insertImageInPDF, insertTextInPDF } from "@documenso/pdf";
+import prisma from "@documenso/prisma";
+import { DocumentStatus, SigningStatus } from "@prisma/client";
+import { FieldType, Document as PrismaDocument } from "@prisma/client";
 
 async function postHandler(req: NextApiRequest, res: NextApiResponse) {
   const { token: recipientToken } = req.query;
@@ -115,10 +115,7 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
     },
     data: {
       document: documentWithInserts,
-      status:
-        unsignedRecipients.length > 0
-          ? DocumentStatus.PENDING
-          : DocumentStatus.COMPLETED,
+      status: unsignedRecipients.length > 0 ? DocumentStatus.PENDING : DocumentStatus.COMPLETED,
     },
   });
 
@@ -129,8 +126,7 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
     });
 
     document.document = documentWithInserts;
-    if (documentOwner)
-      await sendSigningDoneMail(recipient, document, documentOwner);
+    if (documentOwner) await sendSigningDoneMail(recipient, document, documentOwner);
   }
 
   return res.status(200).end();
@@ -139,9 +135,7 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
     if (signedField?.Signature?.signatureImageAsBase64) {
       documentWithInserts = await insertImageInPDF(
         documentWithInserts,
-        signedField.Signature
-          ? signedField.Signature?.signatureImageAsBase64
-          : "",
+        signedField.Signature ? signedField.Signature?.signatureImageAsBase64 : "",
         signedField.positionX,
         signedField.positionY,
         signedField.page
@@ -169,12 +163,8 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
       create: {
         recipientId: recipient.id,
         fieldId: signature.fieldId,
-        signatureImageAsBase64: signature.signatureImage
-          ? signature.signatureImage
-          : null,
-        typedSignature: signature.typedSignature
-          ? signature.typedSignature
-          : null,
+        signatureImageAsBase64: signature.signatureImage ? signature.signatureImage : null,
+        typedSignature: signature.typedSignature ? signature.typedSignature : null,
       },
     });
   }
diff --git a/apps/web/pages/api/documents/index.ts b/apps/web/pages/api/documents/index.ts
index 5ff092d5d..2b5d96b32 100644
--- a/apps/web/pages/api/documents/index.ts
+++ b/apps/web/pages/api/documents/index.ts
@@ -1,9 +1,9 @@
-import { defaultHandler, defaultResponder } from "@documenso/lib/server";
-import prisma from "@documenso/prisma";
 import { NextApiRequest, NextApiResponse } from "next";
-import { getUserFromToken } from "@documenso/lib/server";
-import formidable from "formidable";
 import { getDocumentsForUserFromToken } from "@documenso/lib/query";
+import { defaultHandler, defaultResponder } from "@documenso/lib/server";
+import { getUserFromToken } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
+import formidable from "formidable";
 
 export const config = {
   api: {
diff --git a/apps/web/pages/api/health.ts b/apps/web/pages/api/health.ts
index 16432b87d..ac444c77f 100644
--- a/apps/web/pages/api/health.ts
+++ b/apps/web/pages/api/health.ts
@@ -1,5 +1,4 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-
 import { defaultHandler, defaultResponder } from "@documenso/lib/server";
 import prisma from "@documenso/prisma";
 
diff --git a/apps/web/pages/api/test-sign/[id].ts b/apps/web/pages/api/test-sign/[id].ts
index ccf08a10d..4d1305525 100644
--- a/apps/web/pages/api/test-sign/[id].ts
+++ b/apps/web/pages/api/test-sign/[id].ts
@@ -1,8 +1,9 @@
-import { defaultHandler, defaultResponder } from "@documenso/lib/server";
 import { NextApiRequest, NextApiResponse } from "next";
-import { Document as PrismaDocument } from "@prisma/client";
 import { getDocument } from "@documenso/lib/query";
+import { defaultHandler, defaultResponder, getUserFromToken } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
 import { addDigitalSignature } from "@documenso/signing/addDigitalSignature";
+import { Document as PrismaDocument } from "@prisma/client";
 
 // todo remove before launch
 
@@ -12,10 +13,7 @@ async function getHandler(req: NextApiRequest, res: NextApiResponse) {
   const signedDocument = await addDigitalSignature(document.document);
   res.setHeader("Content-Type", "application/pdf");
   res.setHeader("Content-Length", signedDocument.length);
-  res.setHeader(
-    "Content-Disposition",
-    `attachment; filename=${document.title}`
-  );
+  res.setHeader("Content-Disposition", `attachment; filename=${document.title}`);
 
   return res.status(200).send(signedDocument);
 }
diff --git a/apps/web/pages/api/users/index.ts b/apps/web/pages/api/users/index.ts
index 338243c04..654555a62 100644
--- a/apps/web/pages/api/users/index.ts
+++ b/apps/web/pages/api/users/index.ts
@@ -1,11 +1,6 @@
-import {
-  defaultHandler,
-  defaultResponder,
-  getUserFromToken,
-} from "@documenso/lib/server";
-import prisma from "@documenso/prisma";
-
 import type { NextApiRequest, NextApiResponse } from "next";
+import { defaultHandler, defaultResponder, getUserFromToken } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
 
 async function postHandler(req: NextApiRequest, res: NextApiResponse) {
   const { method, body } = req;
diff --git a/apps/web/pages/api/users/me.ts b/apps/web/pages/api/users/me.ts
index e55c06ff7..7efce411d 100644
--- a/apps/web/pages/api/users/me.ts
+++ b/apps/web/pages/api/users/me.ts
@@ -1,11 +1,6 @@
-import {
-  defaultHandler,
-  defaultResponder,
-  getUserFromToken,
-} from "@documenso/lib/server";
-import prisma from "@documenso/prisma";
-
 import type { NextApiRequest, NextApiResponse } from "next";
+import { defaultHandler, defaultResponder, getUserFromToken } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
 
 async function getHandler(req: NextApiRequest, res: NextApiResponse) {
   const user = await getUserFromToken(req, res);
diff --git a/apps/web/pages/dashboard.tsx b/apps/web/pages/dashboard.tsx
index 54666b95e..324560f5a 100644
--- a/apps/web/pages/dashboard.tsx
+++ b/apps/web/pages/dashboard.tsx
@@ -1,7 +1,10 @@
-import Head from "next/head";
 import { ReactElement } from "react";
-import Layout from "../components/layout";
+import Head from "next/head";
 import Link from "next/link";
+import { uploadDocument } from "@documenso/features";
+import { getDocumentsForUserFromToken } from "@documenso/lib/query";
+import { getUserFromToken } from "@documenso/lib/server";
+import Layout from "../components/layout";
 import type { NextPageWithLayout } from "./_app";
 import {
   CheckBadgeIcon,
@@ -9,15 +12,12 @@ import {
   ExclamationTriangleIcon,
   UsersIcon,
 } from "@heroicons/react/24/outline";
-import { uploadDocument } from "@documenso/features";
 import {
   DocumentStatus,
+  Document as PrismaDocument,
   SendStatus,
   SigningStatus,
-  Document as PrismaDocument,
 } from "@prisma/client";
-import { getUserFromToken } from "@documenso/lib/server";
-import { getDocumentsForUserFromToken } from "@documenso/lib/query";
 import { truncate } from "fs";
 import { Tooltip as ReactTooltip } from "react-tooltip";
 
@@ -59,15 +59,14 @@ const DashboardPage: NextPageWithLayout = (props: any) => {
             Dashboard
           </h1>
         </header>
-        <dl className="grid gap-5 mt-8 md:grid-cols-3 ">
+        <dl className="mt-8 grid gap-5 md:grid-cols-3 ">
           {stats.map((item) => (
             <Link href={item.link} key={item.name}>
-              <div className="px-4 py-3 overflow-hidden bg-white rounded-lg shadow md:p-6 sm:py-5">
-                <dt className="text-sm font-medium text-gray-500 truncate ">
+              <div className="overflow-hidden rounded-lg bg-white px-4 py-3 shadow sm:py-5 md:p-6">
+                <dt className="truncate text-sm font-medium text-gray-500 ">
                   <item.icon
-                    className="flex-shrink-0 inline w-5 h-5 mr-3 text-neon sm:w-6 sm:h-6"
-                    aria-hidden="true"
-                  ></item.icon>
+                    className="text-neon mr-3 inline h-5 w-5 flex-shrink-0 sm:h-6 sm:w-6"
+                    aria-hidden="true"></item.icon>
                   {item.name}
                 </dt>
                 <dd className="mt-1 text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl">
@@ -92,25 +91,20 @@ const DashboardPage: NextPageWithLayout = (props: any) => {
           onClick={() => {
             document?.getElementById("fileUploadHelper")?.click();
           }}
-          className="relative block w-full p-12 text-center border-2 border-gray-300 border-dashed rounded-lg cursor-pointer hover:border-neon focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-        >
+          className="hover:border-neon relative block w-full cursor-pointer rounded-lg border-2 border-dashed border-gray-300 p-12 text-center focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
           <svg
-            className="w-12 h-12 mx-auto text-gray-400"
+            className="mx-auto h-12 w-12 text-gray-400"
             stroke="currentColor"
             fill="none"
             viewBox="0 00 20 25"
-            aria-hidden="true"
-          >
+            aria-hidden="true">
             <path
               strokeLinecap="round"
               strokeLinejoin="round"
               d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
             />
           </svg>
-          <span
-            id="add_document"
-            className="mt-2 block text-sm font-medium text-neon"
-          >
+          <span id="add_document" className="text-neon mt-2 block text-sm font-medium">
             Add a new PDF document.
           </span>
         </div>
@@ -147,9 +141,7 @@ export async function getServerSideProps(context: any) {
 
   const documents: any[] = await getDocumentsForUserFromToken(context);
 
-  const drafts: PrismaDocument[] = documents.filter(
-    (d) => d.status === DocumentStatus.DRAFT
-  );
+  const drafts: PrismaDocument[] = documents.filter((d) => d.status === DocumentStatus.DRAFT);
 
   const waiting: any[] = documents.filter(
     (e) =>
diff --git a/apps/web/pages/documents.tsx b/apps/web/pages/documents.tsx
index a9cd23690..b1ef1fce7 100644
--- a/apps/web/pages/documents.tsx
+++ b/apps/web/pages/documents.tsx
@@ -1,7 +1,12 @@
 import { ReactElement, useEffect, useState } from "react";
+import { NextPageContext } from "next";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { uploadDocument } from "@documenso/features";
+import { deleteDocument, getDocuments } from "@documenso/lib/api";
+import { Button, IconButton, SelectBox } from "@documenso/ui";
 import Layout from "../components/layout";
 import type { NextPageWithLayout } from "./_app";
-import Head from "next/head";
 import {
   ArrowDownTrayIcon,
   CheckBadgeIcon,
@@ -13,12 +18,7 @@ import {
   PlusIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
-import { useRouter } from "next/router";
-import { uploadDocument } from "@documenso/features";
 import { DocumentStatus } from "@prisma/client";
-import { Button, IconButton, SelectBox } from "@documenso/ui";
-import { NextPageContext } from "next";
-import { deleteDocument, getDocuments } from "@documenso/lib/api";
 import { Tooltip as ReactTooltip } from "react-tooltip";
 
 const DocumentsPage: NextPageWithLayout = (props: any) => {
@@ -42,12 +42,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
     { label: "Last 12 months", value: 366 },
   ];
 
-  const [selectedStatusFilter, setSelectedStatusFilter] = useState(
-    statusFilters[0]
-  );
-  const [selectedCreatedFilter, setSelectedCreatedFilter] = useState(
-    createdFilter[0]
-  );
+  const [selectedStatusFilter, setSelectedStatusFilter] = useState(statusFilters[0]);
+  const [selectedCreatedFilter, setSelectedCreatedFilter] = useState(createdFilter[0]);
 
   const loadDocuments = async () => {
     if (!documents.length) setLoading(true);
@@ -62,9 +58,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
   useEffect(() => {
     loadDocuments().finally(() => {
       setSelectedStatusFilter(
-        statusFilters.filter(
-          (status) => status.value === props.filter.toUpperCase()
-        )[0]
+        statusFilters.filter((status) => status.value === props.filter.toUpperCase())[0]
       );
     });
   }, []);
@@ -79,9 +73,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
 
   function filterDocumentes(documents: []): any {
     let filteredDocuments = documents.filter(
-      (d: any) =>
-        d.status === selectedStatusFilter.value ||
-        selectedStatusFilter.value === "ALL"
+      (d: any) => d.status === selectedStatusFilter.value || selectedStatusFilter.value === "ALL"
     );
 
     filteredDocuments = filteredDocuments.filter((document: any) =>
@@ -98,9 +90,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
     const today: Date = new Date(); // Today's date
 
     // Calculate the difference between the two dates in days
-    const diffInDays = Math.floor(
-      (today.getTime() - documentDate.getTime()) / millisecondsInDay
-    );
+    const diffInDays = Math.floor((today.getTime() - documentDate.getTime()) / millisecondsInDay);
 
     console.log(diffInDays);
 
@@ -114,7 +104,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
         <title>Documents | Documenso</title>
       </Head>
       <div className="px-4 sm:px-6 lg:px-8">
-        <div className="sm:flex sm:items-center mt-10">
+        <div className="mt-10 sm:flex sm:items-center">
           <div className="sm:flex-auto">
             <header>
               <h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
@@ -127,27 +117,24 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
               icon={DocumentPlusIcon}
               onClick={() => {
                 document?.getElementById("fileUploadHelper")?.click();
-              }}
-            >
+              }}>
               Add Document
             </Button>
           </div>
         </div>
         <div className="mt-3 mb-12">
-          <div className="w-fit block float-right ml-3 mt-7">
-            {filteredDocuments.length != 1
-              ? filteredDocuments.length + " Documents"
-              : "1 Document"}
+          <div className="float-right ml-3 mt-7 block w-fit">
+            {filteredDocuments.length != 1 ? filteredDocuments.length + " Documents" : "1 Document"}
           </div>
           <SelectBox
-            className="w-1/4 block float-right"
+            className="float-right block w-1/4"
             label="Created"
             options={createdFilter}
             value={selectedCreatedFilter}
             onChange={setSelectedCreatedFilter}
           />
           <SelectBox
-            className="w-1/4 block float-right ml-3"
+            className="float-right ml-3 block w-1/4"
             label="Status"
             options={statusFilters}
             value={selectedStatusFilter}
@@ -171,14 +158,10 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
             </div>
           </div>
         </div>
-        <div
-          className="mt-28 flex flex-col"
-          hidden={!documents.length || loading}
-        >
+        <div className="mt-28 flex flex-col" hidden={!documents.length || loading}>
           <div
             className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8"
-            hidden={!documents.length || loading}
-          >
+            hidden={!documents.length || loading}>
             <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
               <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
                 <table className="min-w-full divide-y divide-gray-300">
@@ -186,32 +169,25 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                     <tr>
                       <th
                         scope="col"
-                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                      >
+                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                         Title
                       </th>
                       <th
                         scope="col"
-                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                      >
+                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                         Recipients
                       </th>
                       <th
                         scope="col"
-                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                      >
+                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                         Status
                       </th>
                       <th
                         scope="col"
-                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                      >
+                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                         Created
                       </th>
-                      <th
-                        scope="col"
-                        className="relative py-3.5 pl-3 pr-4 sm:pr-6"
-                      >
+                      <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
                         <span className="sr-only">Delete</span>
                       </th>
                     </tr>
@@ -220,9 +196,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                     {filteredDocuments.map((document: any, index: number) => (
                       <tr
                         key={document.id}
-                        className="hover:bg-gray-100 cursor-pointer"
-                        onClick={(event) => showDocument(document.id)}
-                      >
+                        className="cursor-pointer hover:bg-gray-100"
+                        onClick={(event) => showDocument(document.id)}>
                         <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                           {document.title || "#" + document.id}
                         </td>
@@ -232,26 +207,19 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                               {item.sendStatus === "NOT_SENT" ? (
                                 <span
                                   id="sent_icon"
-                                  className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"
-                                >
-                                  {item.name
-                                    ? item.name + " <" + item.email + ">"
-                                    : item.email}
+                                  className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
+                                  {item.name ? item.name + " <" + item.email + ">" : item.email}
                                 </span>
                               ) : (
                                 ""
                               )}
-                              {item.sendStatus === "SENT" &&
-                              item.readStatus !== "OPENED" ? (
+                              {item.sendStatus === "SENT" && item.readStatus !== "OPENED" ? (
                                 <span id="sent_icon">
                                   <span
                                     id="sent_icon"
-                                    className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-green-800"
-                                  >
-                                    <EnvelopeIcon className="inline h-5 mr-1"></EnvelopeIcon>
-                                    {item.name
-                                      ? item.name + " <" + item.email + ">"
-                                      : item.email}
+                                    className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-green-800">
+                                    <EnvelopeIcon className="mr-1 inline h-5"></EnvelopeIcon>
+                                    {item.name ? item.name + " <" + item.email + ">" : item.email}
                                   </span>
                                 </span>
                               ) : (
@@ -262,13 +230,10 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                                 <span id="read_icon">
                                   <span
                                     id="sent_icon"
-                                    className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-green-800"
-                                  >
-                                    <CheckIcon className="inline h-5 -mr-2"></CheckIcon>
-                                    <CheckIcon className="inline h-5 mr-1"></CheckIcon>
-                                    {item.name
-                                      ? item.name + " <" + item.email + ">"
-                                      : item.email}
+                                    className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-green-800">
+                                    <CheckIcon className="-mr-2 inline h-5"></CheckIcon>
+                                    <CheckIcon className="mr-1 inline h-5"></CheckIcon>
+                                    {item.name ? item.name + " <" + item.email + ">" : item.email}
                                   </span>
                                 </span>
                               ) : (
@@ -277,7 +242,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                               {item.signingStatus === "SIGNED" ? (
                                 <span id="signed_icon">
                                   <span className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
-                                    <CheckBadgeIcon className="inline h-5 mr-1"></CheckBadgeIcon>{" "}
+                                    <CheckBadgeIcon className="mr-1 inline h-5"></CheckBadgeIcon>{" "}
                                     {item.email}
                                   </span>
                                 </span>
@@ -307,9 +272,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                           {formatDocumentStatus(document.status)}
                           <p>
                             <small hidden={document.Recipient.length === 0}>
-                              {document.Recipient.filter(
-                                (r: any) => r.signingStatus === "SIGNED"
-                              ).length || 0}
+                              {document.Recipient.filter((r: any) => r.signingStatus === "SIGNED")
+                                .length || 0}
                               /{document.Recipient.length || 0}
                             </small>
                           </p>
@@ -342,30 +306,20 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                               onClick={(event: any) => {
                                 event.preventDefault();
                                 event.stopPropagation();
-                                if (
-                                  confirm(
-                                    "Are you sure you want to delete this document"
-                                  )
-                                ) {
+                                if (confirm("Are you sure you want to delete this document")) {
                                   const documentsWithoutIndex = [...documents];
-                                  const removedItem: any =
-                                    documentsWithoutIndex.splice(index, 1);
+                                  const removedItem: any = documentsWithoutIndex.splice(index, 1);
                                   setDocuments(documentsWithoutIndex);
                                   deleteDocument(document.id)
                                     .catch((err) => {
-                                      documentsWithoutIndex.splice(
-                                        index,
-                                        0,
-                                        removedItem
-                                      );
+                                      documentsWithoutIndex.splice(index, 0, removedItem);
                                       setDocuments(documentsWithoutIndex);
                                     })
                                     .then(() => {
                                       loadDocuments();
                                     });
                                 }
-                              }}
-                            ></IconButton>
+                              }}></IconButton>
                             <span className="sr-only">, {document.name}</span>
                           </div>
                         </td>
@@ -374,29 +328,21 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                   </tbody>
                 </table>
               </div>
-              <div
-                hidden={filteredDocuments.length > 0}
-                className="mx-auto w-fit mt-12 p-3"
-              >
-                <FunnelIcon className="w-5 inline mr-1 align-middle" /> Nothing
-                here. Maybe try a different filter.
+              <div hidden={filteredDocuments.length > 0} className="mx-auto mt-12 w-fit p-3">
+                <FunnelIcon className="mr-1 inline w-5 align-middle" /> Nothing here. Maybe try a
+                different filter.
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div
-        className="text-center mt-24"
-        id="empty"
-        hidden={documents.length > 0 || loading}
-      >
+      <div className="mt-24 text-center" id="empty" hidden={documents.length > 0 || loading}>
         <svg
           className="mx-auto h-12 w-12 text-gray-400"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
-          aria-hidden="true"
-        >
+          aria-hidden="true">
           <path
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -413,8 +359,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
             icon={PlusIcon}
             onClick={() => {
               document?.getElementById("fileUploadHelper")?.click();
-            }}
-          >
+            }}>
             Add Document
           </Button>
           <input
diff --git a/apps/web/pages/documents/[id]/index.tsx b/apps/web/pages/documents/[id]/index.tsx
index 3076fc632..7503902c6 100644
--- a/apps/web/pages/documents/[id]/index.tsx
+++ b/apps/web/pages/documents/[id]/index.tsx
@@ -1,20 +1,16 @@
 import { ReactElement } from "react";
-import Layout from "../../../components/layout";
-import { NextPageWithLayout } from "../../_app";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib";
-import { getUserFromToken } from "@documenso/lib/server";
-import Link from "next/link";
-import { DocumentStatus } from "@prisma/client";
-import {
-  InformationCircleIcon,
-  PaperAirplaneIcon,
-  UsersIcon,
-} from "@heroicons/react/24/outline";
 import { getDocument } from "@documenso/lib/query";
-import { Document as PrismaDocument } from "@prisma/client";
-import { Button, Breadcrumb } from "@documenso/ui";
+import { getUserFromToken } from "@documenso/lib/server";
+import { Breadcrumb, Button } from "@documenso/ui";
 import PDFEditor from "../../../components/editor/pdf-editor";
+import Layout from "../../../components/layout";
+import { NextPageWithLayout } from "../../_app";
+import { InformationCircleIcon, PaperAirplaneIcon, UsersIcon } from "@heroicons/react/24/outline";
+import { DocumentStatus } from "@prisma/client";
+import { Document as PrismaDocument } from "@prisma/client";
 
 const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
   const router = useRouter();
@@ -32,8 +28,7 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
               },
               {
                 title: props.document.title,
-                href:
-                  NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id,
+                href: NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id,
               },
             ]}
           />
@@ -67,21 +62,13 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
             <Button
               icon={PaperAirplaneIcon}
               className="ml-3"
-              href={
-                NEXT_PUBLIC_WEBAPP_URL +
-                "/documents/" +
-                props.document.id +
-                "/recipients"
-              }
+              href={NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id + "/recipients"}
               onClick={() => {
                 if (
-                  confirm(
-                    `Send document out to ${props?.document?.Recipient?.length} recipients?`
-                  )
+                  confirm(`Send document out to ${props?.document?.Recipient?.length} recipients?`)
                 ) {
                 }
-              }}
-            >
+              }}>
               Prepare to Send
             </Button>
           </div>
@@ -120,11 +107,7 @@ export async function getServerSideProps(context: any) {
   const { id: documentId } = context.query;
 
   try {
-    const document: PrismaDocument = await getDocument(
-      +documentId,
-      context.req,
-      context.res
-    );
+    const document: PrismaDocument = await getDocument(+documentId, context.req, context.res);
 
     return {
       props: {
diff --git a/apps/web/pages/documents/[id]/recipients.tsx b/apps/web/pages/documents/[id]/recipients.tsx
index 4164e4367..ebea8b34a 100644
--- a/apps/web/pages/documents/[id]/recipients.tsx
+++ b/apps/web/pages/documents/[id]/recipients.tsx
@@ -1,25 +1,24 @@
-import Head from "next/head";
 import { ReactElement, useRef, useState } from "react";
+import Head from "next/head";
+import { NEXT_PUBLIC_WEBAPP_URL, classNames } from "@documenso/lib";
+import { createOrUpdateRecipient, deleteRecipient, sendSigningRequests } from "@documenso/lib/api";
+import { getDocument } from "@documenso/lib/query";
+import { getUserFromToken } from "@documenso/lib/server";
+import { Breadcrumb, Button, Dialog, IconButton } from "@documenso/ui";
 import Layout from "../../../components/layout";
 import { NextPageWithLayout } from "../../_app";
-import { classNames, NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib";
 import {
   ArrowDownTrayIcon,
   CheckBadgeIcon,
   CheckIcon,
+  EnvelopeIcon,
   PaperAirplaneIcon,
   PencilSquareIcon,
   TrashIcon,
   UserPlusIcon,
-  EnvelopeIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
-import { getUserFromToken } from "@documenso/lib/server";
-import { getDocument } from "@documenso/lib/query";
-import { Document as PrismaDocument, DocumentStatus } from "@prisma/client";
-import { Breadcrumb, Button, Dialog, IconButton } from "@documenso/ui";
-import { createOrUpdateRecipient, deleteRecipient, sendSigningRequests } from "@documenso/lib/api";
-
+import { DocumentStatus, Document as PrismaDocument } from "@prisma/client";
 import { FormProvider, useFieldArray, useForm, useWatch } from "react-hook-form";
 
 export type FormValues = {
@@ -71,23 +70,22 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
       <Head>
         <title>{title}</title>
       </Head>
-      <div className="px-6 mt-10 sm:px-0">
+      <div className="mt-10 px-6 sm:px-0">
         <div>
           <Breadcrumb document={props.document} items={breadcrumbItems} />
         </div>
         <div className="mt-2 md:flex md:items-center md:justify-between">
-          <div className="flex-1 min-w-0">
+          <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="flex flex-shrink-0 mt-4 md:mt-0 md:ml-4">
+          <div className="mt-4 flex flex-shrink-0 md:mt-0 md:ml-4">
             <Button
               icon={ArrowDownTrayIcon}
               color="secondary"
               className="mr-2"
-              href={"/api/documents/" + props.document.id}
-            >
+              href={"/api/documents/" + props.document.id}>
               Download
             </Button>
             <Button
@@ -95,8 +93,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
               disabled={props.document.status === DocumentStatus.COMPLETED}
               color={props.document.status === DocumentStatus.COMPLETED ? "primary" : "secondary"}
               className="mr-2"
-              href={breadcrumbItems[1].href}
-            >
+              href={breadcrumbItems[1].href}>
               Edit Document
             </Button>
             <Button
@@ -112,16 +109,15 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                   (r: any) => r.email && !hasEmailError(r) && r.sendStatus === "NOT_SENT"
                 ) ||
                 loading
-              }
-            >
+              }>
               Send
             </Button>
           </div>
         </div>
-        <div className="p-4 mt-10 overflow-hidden bg-white rounded-md shadow sm:p-6">
-          <div className="pb-3 border-b border-gray-200 sm:pb-5">
+        <div className="mt-10 overflow-hidden rounded-md bg-white p-4 shadow sm:p-6">
+          <div className="border-b border-gray-200 pb-3 sm:pb-5">
             <h3 className="text-lg font-medium leading-6 text-gray-900 ">Signers</h3>
-            <p className="max-w-4xl mt-2 text-sm text-gray-500">
+            <p className="mt-2 max-w-4xl text-sm text-gray-500">
               The people who will sign the document.
             </p>
           </div>
@@ -129,22 +125,19 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
             <form
               onChange={() => {
                 trigger();
-              }}
-            >
+              }}>
               <ul role="list" className="divide-y divide-gray-200">
                 {fields.map((item: any, index: number) => (
                   <li
                     key={index}
-                    className="w-full px-2 py-3 border-0 hover:bg-green-50 group sm:py-4"
-                  >
+                    className="group w-full border-0 px-2 py-3 hover:bg-green-50 sm:py-4">
                     <div id="container" className="block w-full lg:flex lg:justify-between">
-                      <div className="block space-y-2 md:space-x-2 md:space-y-0 md:flex">
+                      <div className="block space-y-2 md:flex md:space-x-2 md:space-y-0">
                         <div
                           className={classNames(
-                            "md:w-[250px] rounded-md border border-gray-300 px-3 py-2 shadow-sm focus-within:border-neon focus-within:ring-1 focus-within:ring-neon",
+                            "focus-within:border-neon focus-within:ring-neon rounded-md border border-gray-300 px-3 py-2 shadow-sm focus-within:ring-1 md:w-[250px]",
                             item.sendStatus === "SENT" ? "bg-gray-100" : ""
-                          )}
-                        >
+                          )}>
                           <label htmlFor="name" className="block text-xs font-medium text-gray-900">
                             Email
                           </label>
@@ -170,7 +163,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                                     documentId: props.document.id,
                                   });
                             }}
-                            className="block w-full p-0  text-gray-900 placeholder-gray-500 disabled:bg-neutral-100 border-0 outline-none sm:text-sm bg-inherit"
+                            className="block w-full border-0  bg-inherit p-0 text-gray-900 placeholder-gray-500 outline-none disabled:bg-neutral-100 sm:text-sm"
                             placeholder="john.dorian@loremipsum.com"
                           />
                           {errors?.signers?.[index] ? (
@@ -183,10 +176,9 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                         </div>
                         <div
                           className={classNames(
-                            "md:w-[250px] rounded-md border border-gray-300 px-3 py-2 shadow-sm focus-within:border-neon focus-within:ring-1 focus-within:ring-neon",
+                            "focus-within:border-neon focus-within:ring-neon rounded-md border border-gray-300 px-3 py-2 shadow-sm focus-within:ring-1 md:w-[250px]",
                             item.sendStatus === "SENT" ? "bg-gray-100" : ""
-                          )}
-                        >
+                          )}>
                           <label htmlFor="name" className="block text-xs font-medium text-gray-900">
                             Name (optional)
                           </label>
@@ -209,19 +201,18 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                                   documentId: props.document.id,
                                 });
                             }}
-                            className="block w-full p-0 text-gray-900 placeholder-gray-500 disabled:bg-neutral-100 border-0 outline-none sm:text-sm bg-inherit"
+                            className="block w-full border-0 bg-inherit p-0 text-gray-900 placeholder-gray-500 outline-none disabled:bg-neutral-100 sm:text-sm"
                             placeholder="John Dorian"
                           />
                         </div>
                       </div>
                       <div className="flex items-center space-x-2 lg:ml-2">
-                        <div className="flex mb-2 mr-2 lg:mr-0">
+                        <div className="mb-2 mr-2 flex lg:mr-0">
                           <div key={item.id} className="space-x-2">
                             {item.sendStatus === "NOT_SENT" ? (
                               <span
                                 id="sent_icon"
-                                className="inline-block mt-3 flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-gray-800"
-                              >
+                                className="mt-3 inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-gray-800">
                                 Not Sent
                               </span>
                             ) : (
@@ -231,9 +222,8 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                               <span id="sent_icon">
                                 <span
                                   id="sent_icon"
-                                  className="inline-block mt-3 flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-gray-800 "
-                                >
-                                  <CheckIcon className="inline h-5 mr-1" /> Sent
+                                  className="mt-3 inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-gray-800 ">
+                                  <CheckIcon className="mr-1 inline h-5" /> Sent
                                 </span>
                               </span>
                             ) : (
@@ -243,10 +233,9 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                               <span id="read_icon">
                                 <span
                                   id="sent_icon"
-                                  className="inline-block mt-3 flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-gray-800"
-                                >
-                                  <CheckIcon className="inline h-5 -mr-2"></CheckIcon>
-                                  <CheckIcon className="inline h-5 mr-1"></CheckIcon>
+                                  className="mt-3 inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-gray-800">
+                                  <CheckIcon className="-mr-2 inline h-5"></CheckIcon>
+                                  <CheckIcon className="mr-1 inline h-5"></CheckIcon>
                                   Seen
                                 </span>
                               </span>
@@ -257,9 +246,8 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                               <span id="signed_icon">
                                 <span
                                   id="sent_icon"
-                                  className="inline-block mt-3 flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"
-                                >
-                                  <CheckBadgeIcon className="inline h-5 mr-1"></CheckBadgeIcon>
+                                  className="mt-3 inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
+                                  <CheckBadgeIcon className="mr-1 inline h-5"></CheckBadgeIcon>
                                   Signed
                                 </span>
                               </span>
@@ -268,7 +256,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                             )}
                           </div>
                         </div>
-                        <div className="flex mr-1">
+                        <div className="mr-1 flex">
                           <IconButton
                             icon={PaperAirplaneIcon}
                             disabled={
@@ -286,8 +274,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                                   setLoading(false);
                                 });
                               }
-                            }}
-                          >
+                            }}>
                             Resend
                           </IconButton>
                           <IconButton
@@ -320,8 +307,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                   }).then((res) => {
                     append(res);
                   });
-                }}
-              >
+                }}>
                 Add Signer
               </Button>
             </form>
@@ -336,7 +322,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
         open={open}
         setLoading={setLoading}
         setOpen={setOpen}
-        icon={<EnvelopeIcon className="w-6 h-6 text-green-600" aria-hidden="true" />}
+        icon={<EnvelopeIcon className="h-6 w-6 text-green-600" aria-hidden="true" />}
       />
     </>
   );
diff --git a/apps/web/pages/documents/[id]/sign.tsx b/apps/web/pages/documents/[id]/sign.tsx
index e46c35c8f..252d0f429 100644
--- a/apps/web/pages/documents/[id]/sign.tsx
+++ b/apps/web/pages/documents/[id]/sign.tsx
@@ -1,11 +1,11 @@
-import prisma from "@documenso/prisma";
 import Head from "next/head";
-import { NextPageWithLayout } from "../../_app";
-import { ReadStatus } from "@prisma/client";
-import PDFSigner from "../../../components/editor/pdf-signer";
 import Link from "next/link";
+import prisma from "@documenso/prisma";
+import PDFSigner from "../../../components/editor/pdf-signer";
+import { NextPageWithLayout } from "../../_app";
 import { ClockIcon } from "@heroicons/react/24/outline";
-import { FieldType, DocumentStatus } from "@prisma/client";
+import { ReadStatus } from "@prisma/client";
+import { DocumentStatus, FieldType } from "@prisma/client";
 
 const SignPage: NextPageWithLayout = (props: any) => {
   return (
@@ -14,36 +14,22 @@ const SignPage: NextPageWithLayout = (props: any) => {
         <title>Sign | Documenso</title>
       </Head>
       {!props.expired ? (
-        <PDFSigner
-          document={props.document}
-          recipient={props.recipient}
-          fields={props.fields}
-        />
+        <PDFSigner document={props.document} recipient={props.recipient} fields={props.fields} />
       ) : (
         <>
           <div className="mx-auto w-fit px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
-            <ClockIcon className="text-neon w-10 inline mr-1"></ClockIcon>
-            <h1 className="text-base font-medium text-neon inline align-middle">
-              Time flies.
-            </h1>
-            <p className="mt-2 text-4xl font-bold tracking-tight">
-              This signing link is expired.
-            </p>
+            <ClockIcon className="text-neon mr-1 inline w-10"></ClockIcon>
+            <h1 className="text-neon inline align-middle text-base font-medium">Time flies.</h1>
+            <p className="mt-2 text-4xl font-bold tracking-tight">This signing link is expired.</p>
             <p className="mt-2 text-base text-gray-500">
-              Please ask{" "}
-              {props.document.User.name
-                ? `${props.document.User.name}`
-                : `the sender`}{" "}
+              Please ask {props.document.User.name ? `${props.document.User.name}` : `the sender`}{" "}
               to resend it.
             </p>
-            <div className="mx-auto w-fit text-xl pt-20"></div>
+            <div className="mx-auto w-fit pt-20 text-xl"></div>
           </div>
           <div>
             <div className="relative mx-96">
-              <div
-                className="absolute inset-0 flex items-center"
-                aria-hidden="true"
-              >
+              <div className="absolute inset-0 flex items-center" aria-hidden="true">
                 <div className="w-full border-t border-gray-300" />
               </div>
               <div className="relative flex justify-center"></div>
@@ -51,10 +37,7 @@ const SignPage: NextPageWithLayout = (props: any) => {
           </div>
           <p className="mt-4 text-center text-sm text-gray-600">
             Want to send of your own?{" "}
-            <Link
-              href="/signup?source=expired"
-              className="font-medium text-neon hover:text-neon"
-            >
+            <Link href="/signup?source=expired" className="text-neon hover:text-neon font-medium">
               Create your own Account
             </Link>
           </p>
@@ -118,13 +101,9 @@ export async function getServerSideProps(context: any) {
   return {
     props: {
       recipient: JSON.parse(JSON.stringify(recipient)),
-      document: JSON.parse(
-        JSON.stringify({ ...recipient.Document, document: "" })
-      ),
+      document: JSON.parse(JSON.stringify({ ...recipient.Document, document: "" })),
       fields: JSON.parse(JSON.stringify(unsignedFields)),
-      expired: recipient.expired
-        ? new Date(recipient.expired) < new Date()
-        : false,
+      expired: recipient.expired ? new Date(recipient.expired) < new Date() : false,
     },
   };
 }
diff --git a/apps/web/pages/documents/[id]/signed.tsx b/apps/web/pages/documents/[id]/signed.tsx
index 8075fe226..53f375ab2 100644
--- a/apps/web/pages/documents/[id]/signed.tsx
+++ b/apps/web/pages/documents/[id]/signed.tsx
@@ -1,10 +1,10 @@
-import prisma from "@documenso/prisma";
 import Head from "next/head";
-import { NextPageWithLayout } from "../../_app";
-import { ArrowDownTrayIcon, CheckBadgeIcon } from "@heroicons/react/24/outline";
-import { Button, IconButton } from "@documenso/ui";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import prisma from "@documenso/prisma";
+import { Button, IconButton } from "@documenso/ui";
+import { NextPageWithLayout } from "../../_app";
+import { ArrowDownTrayIcon, CheckBadgeIcon } from "@heroicons/react/24/outline";
 
 const Signed: NextPageWithLayout = (props: any) => {
   const router = useRouter();
@@ -18,29 +18,18 @@ const Signed: NextPageWithLayout = (props: any) => {
         <title>Sign | Documenso</title>
       </Head>
       <div className="mx-auto w-fit px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
-        <CheckBadgeIcon className="text-neon w-10 inline mr-1"></CheckBadgeIcon>
-        <h1 className="text-base font-medium text-neon inline align-middle">
-          It's done!
-        </h1>
+        <CheckBadgeIcon className="text-neon mr-1 inline w-10"></CheckBadgeIcon>
+        <h1 className="text-neon inline align-middle text-base font-medium">It's done!</h1>
         <p className="mt-2 text-4xl font-bold tracking-tight">
           You signed "{props.document.title}"
         </p>
-        <p
-          className="mt-2 text-base text-gray-500 max-w-sm"
-          hidden={allRecipientsSigned}
-        >
+        <p className="mt-2 max-w-sm text-base text-gray-500" hidden={allRecipientsSigned}>
           You will be notfied when all recipients have signed.
         </p>
-        <p
-          className="mt-2 text-base text-gray-500 max-w-sm"
-          hidden={!allRecipientsSigned}
-        >
+        <p className="mt-2 max-w-sm text-base text-gray-500" hidden={!allRecipientsSigned}>
           All recipients signed.
         </p>
-        <div
-          className="mx-auto w-fit text-xl pt-20"
-          hidden={!allRecipientsSigned}
-        >
+        <div className="mx-auto w-fit pt-20 text-xl" hidden={!allRecipientsSigned}>
           <Button
             icon={ArrowDownTrayIcon}
             color="secondary"
@@ -48,23 +37,16 @@ const Signed: NextPageWithLayout = (props: any) => {
               event.preventDefault();
               event.stopPropagation();
               router.push(
-                "/api/documents/" +
-                  props.document.id +
-                  "?token=" +
-                  props.recipient.token
+                "/api/documents/" + props.document.id + "?token=" + props.recipient.token
               );
-            }}
-          >
+            }}>
             Download "{props.document.title}"
           </Button>
         </div>
       </div>
       <div>
         <div className="relative mx-96">
-          <div
-            className="absolute inset-0 flex items-center"
-            aria-hidden="true"
-          >
+          <div className="absolute inset-0 flex items-center" aria-hidden="true">
             <div className="w-full border-t border-gray-300" />
           </div>
           <div className="relative flex justify-center"></div>
@@ -72,10 +54,7 @@ const Signed: NextPageWithLayout = (props: any) => {
       </div>
       <p className="mt-4 text-center text-sm text-gray-600">
         Want to send slick signing links like this one?{" "}
-        <Link
-          href="https://documenso.com"
-          className="font-medium text-neon hover:text-neon"
-        >
+        <Link href="https://documenso.com" className="text-neon hover:text-neon font-medium">
           Hosted Documenso is coming soon™
         </Link>
       </p>
diff --git a/apps/web/pages/settings/account.tsx b/apps/web/pages/settings/account.tsx
index e593d261a..fd60790e5 100644
--- a/apps/web/pages/settings/account.tsx
+++ b/apps/web/pages/settings/account.tsx
@@ -1,2 +1,3 @@
 import SettingsPage from ".";
+
 export default SettingsPage;
diff --git a/apps/web/pages/settings/password.tsx b/apps/web/pages/settings/password.tsx
index e593d261a..fd60790e5 100644
--- a/apps/web/pages/settings/password.tsx
+++ b/apps/web/pages/settings/password.tsx
@@ -1,2 +1,3 @@
 import SettingsPage from ".";
+
 export default SettingsPage;
diff --git a/apps/web/pages/settings/profile.tsx b/apps/web/pages/settings/profile.tsx
index e593d261a..fd60790e5 100644
--- a/apps/web/pages/settings/profile.tsx
+++ b/apps/web/pages/settings/profile.tsx
@@ -1,2 +1,3 @@
 import SettingsPage from ".";
+
 export default SettingsPage;
diff --git a/apps/web/postcss.config.js b/apps/web/postcss.config.js
index 33ad091d2..12a703d90 100644
--- a/apps/web/postcss.config.js
+++ b/apps/web/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/apps/web/styles/tailwind.css b/apps/web/styles/tailwind.css
index 1a744e23d..2ea56f9bf 100644
--- a/apps/web/styles/tailwind.css
+++ b/apps/web/styles/tailwind.css
@@ -24,9 +24,8 @@ body,
   font-weight: 400;
   font-display: swap;
   src: url("/fonts/montserrat.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 /* latin */
@@ -36,7 +35,6 @@ body,
   font-weight: 700;
   font-display: swap;
   src: url("/fonts/montserrat.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
diff --git a/package-lock.json b/package-lock.json
index af9ca495f..cf3178688 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,6 +37,11 @@
         "react-hot-toast": "^2.4.0",
         "react-signature-canvas": "^1.0.6",
         "typescript": "4.8.4"
+      },
+      "devDependencies": {
+        "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+        "prettier": "^2.8.7",
+        "prettier-plugin-tailwindcss": "^0.2.5"
       }
     },
     "apps/web": {
@@ -102,6 +107,244 @@
       "integrity": "sha512-p6ua9zBxz5otCmbpb5D3U4B5Nanw6Pk3PPyX05xnxbB/fRv71N7CPmORg7uAD5P70T0xmx1pzAx/FUfa5X+3cw==",
       "dev": true
     },
+    "node_modules/@babel/code-frame": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
+      "integrity": "sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/highlight": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.17.7",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.7.tgz",
+      "integrity": "sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.17.0",
+        "jsesc": "^2.5.1",
+        "source-map": "^0.5.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/generator/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@babel/helper-environment-visitor": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz",
+      "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-function-name": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
+      "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/template": "^7.20.7",
+        "@babel/types": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-function-name/node_modules/@babel/types": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
+      "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.19.4",
+        "@babel/helper-validator-identifier": "^7.19.1",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-hoist-variables": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
+      "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-hoist-variables/node_modules/@babel/types": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
+      "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.19.4",
+        "@babel/helper-validator-identifier": "^7.19.1",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-split-export-declaration": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
+      "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-split-export-declaration/node_modules/@babel/types": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
+      "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.19.4",
+        "@babel/helper-validator-identifier": "^7.19.1",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.19.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
+      "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
+      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
+      "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.18.6",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
+    "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz",
+      "integrity": "sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==",
+      "dev": true,
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.21.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
@@ -113,6 +356,77 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/template": {
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
+      "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.18.6",
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template/node_modules/@babel/types": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
+      "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.19.4",
+        "@babel/helper-validator-identifier": "^7.19.1",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.17.3",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.3.tgz",
+      "integrity": "sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.16.7",
+        "@babel/generator": "^7.17.3",
+        "@babel/helper-environment-visitor": "^7.16.7",
+        "@babel/helper-function-name": "^7.16.7",
+        "@babel/helper-hoist-variables": "^7.16.7",
+        "@babel/helper-split-export-declaration": "^7.16.7",
+        "@babel/parser": "^7.17.3",
+        "@babel/types": "^7.17.0",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse/node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz",
+      "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.16.7",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -724,6 +1038,29 @@
         "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
       }
     },
+    "node_modules/@trivago/prettier-plugin-sort-imports": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.1.1.tgz",
+      "integrity": "sha512-dQ2r2uzNr1x6pJsuh/8x0IRA3CBUB+pWEW3J/7N98axqt7SQSm+2fy0FLNXvXGg77xEDC7KHxJlHfLYyi7PDcw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/generator": "7.17.7",
+        "@babel/parser": "^7.20.5",
+        "@babel/traverse": "7.17.3",
+        "@babel/types": "7.17.0",
+        "javascript-natural-sort": "0.7.1",
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "@vue/compiler-sfc": "3.x",
+        "prettier": "2.x"
+      },
+      "peerDependenciesMeta": {
+        "@vue/compiler-sfc": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
@@ -3486,6 +3823,12 @@
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
       "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g=="
     },
+    "node_modules/javascript-natural-sort": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
+      "dev": true
+    },
     "node_modules/jest-worker": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
@@ -3553,6 +3896,18 @@
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
       "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg=="
     },
+    "node_modules/jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "dev": true,
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -3685,6 +4040,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -7227,6 +7588,95 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "2.8.7",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
+      "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.6.tgz",
+      "integrity": "sha512-F+7XCl9RLF/LPrGdUMHWpsT6TM31JraonAUyE6eBmpqymFvDwyl0ETHsKFHP1NG+sEfv8bmKqnTxEbWQbHPlBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.17.0"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-php": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@shufo/prettier-plugin-blade": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "prettier": ">=2.2.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*",
+        "prettier-plugin-twig-melody": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-php": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@shufo/prettier-plugin-blade": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        },
+        "prettier-plugin-twig-melody": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-format": {
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
@@ -8138,6 +8588,15 @@
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
     },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -8685,6 +9144,194 @@
     }
   },
   "dependencies": {
+    "@babel/code-frame": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
+      "integrity": "sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==",
+      "dev": true,
+      "requires": {
+        "@babel/highlight": "^7.18.6"
+      }
+    },
+    "@babel/generator": {
+      "version": "7.17.7",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.7.tgz",
+      "integrity": "sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.17.0",
+        "jsesc": "^2.5.1",
+        "source-map": "^0.5.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/helper-environment-visitor": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz",
+      "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==",
+      "dev": true
+    },
+    "@babel/helper-function-name": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
+      "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
+      "dev": true,
+      "requires": {
+        "@babel/template": "^7.20.7",
+        "@babel/types": "^7.21.0"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
+          "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-string-parser": "^7.19.4",
+            "@babel/helper-validator-identifier": "^7.19.1",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-hoist-variables": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
+      "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.18.6"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
+          "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-string-parser": "^7.19.4",
+            "@babel/helper-validator-identifier": "^7.19.1",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-split-export-declaration": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
+      "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.18.6"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
+          "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-string-parser": "^7.19.4",
+            "@babel/helper-validator-identifier": "^7.19.1",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-string-parser": {
+      "version": "7.19.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
+      "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==",
+      "dev": true
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
+      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
+      "dev": true
+    },
+    "@babel/highlight": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
+      "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.18.6",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+          "dev": true
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@babel/parser": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz",
+      "integrity": "sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==",
+      "dev": true
+    },
     "@babel/runtime": {
       "version": "7.21.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
@@ -8693,6 +9340,66 @@
         "regenerator-runtime": "^0.13.11"
       }
     },
+    "@babel/template": {
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
+      "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.18.6",
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
+          "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-string-parser": "^7.19.4",
+            "@babel/helper-validator-identifier": "^7.19.1",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/traverse": {
+      "version": "7.17.3",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.3.tgz",
+      "integrity": "sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.16.7",
+        "@babel/generator": "^7.17.3",
+        "@babel/helper-environment-visitor": "^7.16.7",
+        "@babel/helper-function-name": "^7.16.7",
+        "@babel/helper-hoist-variables": "^7.16.7",
+        "@babel/helper-split-export-declaration": "^7.16.7",
+        "@babel/parser": "^7.17.3",
+        "@babel/types": "^7.17.0",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      },
+      "dependencies": {
+        "globals": {
+          "version": "11.12.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+          "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/types": {
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz",
+      "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.16.7",
+        "to-fast-properties": "^2.0.0"
+      }
+    },
     "@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -9170,6 +9877,20 @@
         "mini-svg-data-uri": "^1.2.3"
       }
     },
+    "@trivago/prettier-plugin-sort-imports": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.1.1.tgz",
+      "integrity": "sha512-dQ2r2uzNr1x6pJsuh/8x0IRA3CBUB+pWEW3J/7N98axqt7SQSm+2fy0FLNXvXGg77xEDC7KHxJlHfLYyi7PDcw==",
+      "dev": true,
+      "requires": {
+        "@babel/generator": "7.17.7",
+        "@babel/parser": "^7.20.5",
+        "@babel/traverse": "7.17.3",
+        "@babel/types": "7.17.0",
+        "javascript-natural-sort": "0.7.1",
+        "lodash": "^4.17.21"
+      }
+    },
     "@tsconfig/node10": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
@@ -11238,6 +11959,12 @@
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
       "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g=="
     },
+    "javascript-natural-sort": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
+      "dev": true
+    },
     "jest-worker": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
@@ -11288,6 +12015,12 @@
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
       "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg=="
     },
+    "jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "dev": true
+    },
     "json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -11390,6 +12123,12 @@
         "p-locate": "^5.0.0"
       }
     },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -13722,6 +14461,19 @@
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
     },
+    "prettier": {
+      "version": "2.8.7",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
+      "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
+      "dev": true
+    },
+    "prettier-plugin-tailwindcss": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.6.tgz",
+      "integrity": "sha512-F+7XCl9RLF/LPrGdUMHWpsT6TM31JraonAUyE6eBmpqymFvDwyl0ETHsKFHP1NG+sEfv8bmKqnTxEbWQbHPlBA==",
+      "dev": true,
+      "requires": {}
+    },
     "pretty-format": {
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
@@ -14331,6 +15083,12 @@
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
     },
+    "to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "dev": true
+    },
     "to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
diff --git a/package.json b/package.json
index 96efb8f04..a993179f2 100644
--- a/package.json
+++ b/package.json
@@ -43,5 +43,10 @@
     "react-hot-toast": "^2.4.0",
     "react-signature-canvas": "^1.0.6",
     "typescript": "4.8.4"
+  },
+  "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+    "prettier": "^2.8.7",
+    "prettier-plugin-tailwindcss": "^0.2.5"
   }
 }
diff --git a/packages/features/editor/createField.ts b/packages/features/editor/createField.ts
index f97c57bf6..c66c16691 100644
--- a/packages/features/editor/createField.ts
+++ b/packages/features/editor/createField.ts
@@ -14,10 +14,8 @@ export const createField = (
   if (newFieldX < 0) newFieldX = 0;
   if (newFieldY < 0) newFieldY = 0;
 
-  if (newFieldX + fieldSize.width > rect.width)
-    newFieldX = rect.width - fieldSize.width;
-  if (newFieldY + fieldSize.height > rect.height)
-    newFieldY = rect.height - fieldSize.height;
+  if (newFieldX + fieldSize.width > rect.width) newFieldX = rect.width - fieldSize.width;
+  if (newFieldY + fieldSize.height > rect.height) newFieldY = rect.height - fieldSize.height;
 
   const signatureField = {
     id: -1,
diff --git a/packages/features/uploadDocument.ts b/packages/features/uploadDocument.ts
index b5b7e560f..ef57d795f 100644
--- a/packages/features/uploadDocument.ts
+++ b/packages/features/uploadDocument.ts
@@ -1,6 +1,6 @@
 import router from "next/router";
-import toast from "react-hot-toast";
 import { NEXT_PUBLIC_WEBAPP_URL } from "../lib/constants";
+import toast from "react-hot-toast";
 
 export const uploadDocument = async (event: any) => {
   if (event.target.files && event.target.files[0]) {
diff --git a/packages/lib/api/deleteRecipient.ts b/packages/lib/api/deleteRecipient.ts
index 138cb52c2..bf73b2b84 100644
--- a/packages/lib/api/deleteRecipient.ts
+++ b/packages/lib/api/deleteRecipient.ts
@@ -6,16 +6,13 @@ export const deleteRecipient = (recipient: any) => {
   }
 
   return toast.promise(
-    fetch(
-      "/api/documents/" + recipient.documentId + "/recipients/" + recipient.id,
-      {
-        method: "DELETE",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(recipient),
-      }
-    ),
+    fetch("/api/documents/" + recipient.documentId + "/recipients/" + recipient.id, {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(recipient),
+    }),
     {
       loading: "Deleting...",
       success: "Deleted.",
diff --git a/packages/lib/api/index.ts b/packages/lib/api/index.ts
index b6cca406f..ef9139868 100644
--- a/packages/lib/api/index.ts
+++ b/packages/lib/api/index.ts
@@ -7,4 +7,4 @@ export { getDocuments } from "./getDocuments";
 export { deleteDocument } from "./deleteDocument";
 export { deleteRecipient } from "./deleteRecipient";
 export { createOrUpdateRecipient } from "./createOrUpdateRecipient";
-export { sendSigningRequests } from "./sendSigningRequests";
\ No newline at end of file
+export { sendSigningRequests } from "./sendSigningRequests";
diff --git a/packages/lib/api/sendSigningRequests.ts b/packages/lib/api/sendSigningRequests.ts
index 75ab99d50..dda1520e2 100644
--- a/packages/lib/api/sendSigningRequests.ts
+++ b/packages/lib/api/sendSigningRequests.ts
@@ -1,9 +1,6 @@
 import toast from "react-hot-toast";
 
-export const sendSigningRequests = async (
-  document: any,
-  resendTo: number[] = []
-) => {
+export const sendSigningRequests = async (document: any, resendTo: number[] = []) => {
   if (!document || !document.id) return;
   try {
     const sent = await toast.promise(
diff --git a/packages/lib/api/signDocument.ts b/packages/lib/api/signDocument.ts
index 94dbfb679..017a29623 100644
--- a/packages/lib/api/signDocument.ts
+++ b/packages/lib/api/signDocument.ts
@@ -1,11 +1,7 @@
 import { useRouter } from "next/router";
 import toast from "react-hot-toast";
 
-export const signDocument = (
-  document: any,
-  signatures: any[],
-  token: string
-): Promise<any> => {
+export const signDocument = (document: any, signatures: any[], token: string): Promise<any> => {
   const body = { documentId: document.id, signatures };
 
   return toast.promise(
diff --git a/packages/lib/auth.ts b/packages/lib/auth.ts
index 1c83255b6..71efa1fbf 100644
--- a/packages/lib/auth.ts
+++ b/packages/lib/auth.ts
@@ -1,12 +1,8 @@
-import { compare, hash } from "bcryptjs";
 import type { NextApiRequest } from "next";
-import type { Session } from "next-auth";
-import {
-  getSession as getSessionInner,
-  GetSessionParams,
-} from "next-auth/react";
-
 import { HttpError } from "@documenso/lib/server";
+import { compare, hash } from "bcryptjs";
+import type { Session } from "next-auth";
+import { GetSessionParams, getSession as getSessionInner } from "next-auth/react";
 
 export async function hashPassword(password: string) {
   const hashedPassword = await hash(password, 12);
@@ -28,9 +24,7 @@ export function validPassword(password: string) {
   return true;
 }
 
-export async function getSession(
-  options: GetSessionParams
-): Promise<Session | null> {
+export async function getSession(options: GetSessionParams): Promise<Session | null> {
   const session = await getSessionInner(options);
 
   // that these are equal are ensured in `[...nextauth]`'s callback
@@ -43,11 +37,7 @@ export function isPasswordValid(
   breakdown: boolean,
   strict?: boolean
 ): { caplow: boolean; num: boolean; min: boolean; admin_min: boolean };
-export function isPasswordValid(
-  password: string,
-  breakdown?: boolean,
-  strict?: boolean
-) {
+export function isPasswordValid(password: string, breakdown?: boolean, strict?: boolean) {
   let cap = false, // Has uppercase characters
     low = false, // Has lowercase characters
     num = false, // At least one number
@@ -63,8 +53,7 @@ export function isPasswordValid(
     }
   }
 
-  if (!breakdown)
-    return cap && low && num && min && (strict ? admin_min : true);
+  if (!breakdown) return cap && low && num && min && (strict ? admin_min : true);
 
   let errors: Record<string, boolean> = { caplow: cap && low, num, min };
   // Only return the admin key if strict mode is enabled.
@@ -79,8 +68,7 @@ type CtxOrReq =
 
 export const ensureSession = async (ctxOrReq: CtxOrReq) => {
   const session = await getSession(ctxOrReq);
-  if (!session?.user)
-    throw new HttpError({ statusCode: 401, message: "Unauthorized" });
+  if (!session?.user) throw new HttpError({ statusCode: 401, message: "Unauthorized" });
   return session;
 };
 
diff --git a/packages/lib/mail/sendSigningDoneMail.ts b/packages/lib/mail/sendSigningDoneMail.ts
index 85708e88f..67c73868e 100644
--- a/packages/lib/mail/sendSigningDoneMail.ts
+++ b/packages/lib/mail/sendSigningDoneMail.ts
@@ -1,13 +1,9 @@
-import { sendMail } from "./sendMail";
 import { signingCompleteTemplate } from "@documenso/lib/mail";
-import { Document as PrismaDocument } from "@prisma/client";
 import { addDigitalSignature } from "@documenso/signing/addDigitalSignature";
+import { sendMail } from "./sendMail";
+import { Document as PrismaDocument } from "@prisma/client";
 
-export const sendSigningDoneMail = async (
-  recipient: any,
-  document: PrismaDocument,
-  user: any
-) => {
+export const sendSigningDoneMail = async (recipient: any, document: PrismaDocument, user: any) => {
   await sendMail(
     user.email,
     `Completed: "${document.title}"`,
@@ -15,10 +11,7 @@ export const sendSigningDoneMail = async (
     [
       {
         filename: document.title,
-        content: Buffer.from(
-          await addDigitalSignature(document.document),
-          "base64"
-        ),
+        content: Buffer.from(await addDigitalSignature(document.document), "base64"),
       },
     ]
   );
diff --git a/packages/lib/mail/sendSigningRequest.ts b/packages/lib/mail/sendSigningRequest.ts
index 6ada0db06..13cf52ecb 100644
--- a/packages/lib/mail/sendSigningRequest.ts
+++ b/packages/lib/mail/sendSigningRequest.ts
@@ -1,8 +1,8 @@
-import prisma from "@documenso/prisma";
-import { sendMail } from "./sendMail";
-import { SendStatus, ReadStatus, DocumentStatus } from "@prisma/client";
-import { NEXT_PUBLIC_WEBAPP_URL } from "../constants";
 import { signingRequestTemplate } from "@documenso/lib/mail";
+import prisma from "@documenso/prisma";
+import { NEXT_PUBLIC_WEBAPP_URL } from "../constants";
+import { sendMail } from "./sendMail";
+import { DocumentStatus, ReadStatus, SendStatus } from "@prisma/client";
 
 export const sendSigningRequest = async (recipient: any, document: any, user: any) => {
   const signingRequestMessage = user.name
diff --git a/packages/lib/mail/signingCompleteTemplate.ts b/packages/lib/mail/signingCompleteTemplate.ts
index 532c1ce1f..803c26db6 100644
--- a/packages/lib/mail/signingCompleteTemplate.ts
+++ b/packages/lib/mail/signingCompleteTemplate.ts
@@ -1,6 +1,6 @@
 import { NEXT_PUBLIC_WEBAPP_URL } from "../constants";
-import { Document as PrismaDocument } from "@prisma/client";
 import { baseEmailTemplate } from "./baseTemplate";
+import { Document as PrismaDocument } from "@prisma/client";
 
 export const signingCompleteTemplate = (message: string) => {
   const customContent = `
diff --git a/packages/lib/mail/signingRequestTemplate.ts b/packages/lib/mail/signingRequestTemplate.ts
index 3992bee1e..a99ff2be4 100644
--- a/packages/lib/mail/signingRequestTemplate.ts
+++ b/packages/lib/mail/signingRequestTemplate.ts
@@ -1,6 +1,6 @@
 import { NEXT_PUBLIC_WEBAPP_URL } from "../constants";
-import { Document as PrismaDocument } from "@prisma/client";
 import { baseEmailTemplate } from "./baseTemplate";
+import { Document as PrismaDocument } from "@prisma/client";
 
 export const signingRequestTemplate = (
   message: string,
diff --git a/packages/lib/query/getDocumentsForUserFromToken.ts b/packages/lib/query/getDocumentsForUserFromToken.ts
index cbdde2a07..819b414c1 100644
--- a/packages/lib/query/getDocumentsForUserFromToken.ts
+++ b/packages/lib/query/getDocumentsForUserFromToken.ts
@@ -1,9 +1,7 @@
 import { getUserFromToken } from "@documenso/lib/server";
 import prisma from "@documenso/prisma";
 
-export const getDocumentsForUserFromToken = async (
-  context: any
-): Promise<any> => {
+export const getDocumentsForUserFromToken = async (context: any): Promise<any> => {
   const user = await getUserFromToken(context.req, context.res);
   if (!user) return Promise.reject("Invalid user or token.");
 
diff --git a/packages/lib/server/defaultHandler.ts b/packages/lib/server/defaultHandler.ts
index 1cfa351bd..69d466648 100644
--- a/packages/lib/server/defaultHandler.ts
+++ b/packages/lib/server/defaultHandler.ts
@@ -1,24 +1,27 @@
 import type { NextApiHandler, NextApiRequest, NextApiResponse } from "next";
 
 type Handlers = {
-  [method in "GET" | "POST" | "PATCH" | "PUT" | "DELETE"]?: Promise<{ default: NextApiHandler }>;
+  [method in "GET" | "POST" | "PATCH" | "PUT" | "DELETE"]?: Promise<{
+    default: NextApiHandler;
+  }>;
 };
 
 /** Allows us to split big API handlers by method */
-export const defaultHandler = (handlers: Handlers) => async (req: NextApiRequest, res: NextApiResponse) => {
-  const handler = (await handlers[req.method as keyof typeof handlers])?.default;
-  // auto catch unsupported methods.
-  if (!handler) {
-    return res
-      .status(405)
-      .json({ message: `Method Not Allowed (Allow: ${Object.keys(handlers).join(",")})` });
-  }
+export const defaultHandler =
+  (handlers: Handlers) => async (req: NextApiRequest, res: NextApiResponse) => {
+    const handler = (await handlers[req.method as keyof typeof handlers])?.default;
+    // auto catch unsupported methods.
+    if (!handler) {
+      return res.status(405).json({
+        message: `Method Not Allowed (Allow: ${Object.keys(handlers).join(",")})`,
+      });
+    }
 
-  try {
-    await handler(req, res);
-    return;
-  } catch (error) {
-    console.error(error);
-    return res.status(500).json({ message: "Something went wrong" });
-  }
-};
+    try {
+      await handler(req, res);
+      return;
+    } catch (error) {
+      console.error(error);
+      return res.status(500).json({ message: "Something went wrong" });
+    }
+  };
diff --git a/packages/lib/server/defaultResponder.ts b/packages/lib/server/defaultResponder.ts
index b598a977f..796bbe90b 100644
--- a/packages/lib/server/defaultResponder.ts
+++ b/packages/lib/server/defaultResponder.ts
@@ -1,5 +1,4 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-
 import { getServerErrorFromUnknown } from "@documenso/lib/server";
 
 type Handle<T> = (req: NextApiRequest, res: NextApiResponse) => Promise<T>;
diff --git a/packages/lib/server/getServerErrorFromUnknown.ts b/packages/lib/server/getServerErrorFromUnknown.ts
index 1ec9d93d8..8a4823082 100644
--- a/packages/lib/server/getServerErrorFromUnknown.ts
+++ b/packages/lib/server/getServerErrorFromUnknown.ts
@@ -1,9 +1,5 @@
-import {
-  PrismaClientKnownRequestError,
-  NotFoundError,
-} from "@prisma/client/runtime";
-
 import { HttpError } from "@documenso/lib/server";
+import { NotFoundError, PrismaClientKnownRequestError } from "@prisma/client/runtime";
 
 export function getServerErrorFromUnknown(cause: unknown): HttpError {
   // Error was manually thrown and does not need to be parsed.
diff --git a/packages/lib/server/getUserFromToken.ts b/packages/lib/server/getUserFromToken.ts
index 579d47ada..b548a2ffa 100644
--- a/packages/lib/server/getUserFromToken.ts
+++ b/packages/lib/server/getUserFromToken.ts
@@ -1,6 +1,6 @@
+import { NextApiRequest, NextApiResponse } from "next";
 import prisma from "@documenso/prisma";
 import { User as PrismaUser } from "@prisma/client";
-import { NextApiRequest, NextApiResponse } from "next";
 import { getToken } from "next-auth/jwt";
 import { signOut } from "next-auth/react";
 
diff --git a/packages/lib/server/http-error.ts b/packages/lib/server/http-error.ts
index 223761480..b73b23f9d 100644
--- a/packages/lib/server/http-error.ts
+++ b/packages/lib/server/http-error.ts
@@ -5,7 +5,13 @@ export class HttpError<TCode extends number = number> extends Error {
   public readonly url: string | undefined;
   public readonly method: string | undefined;
 
-  constructor(opts: { url?: string; method?: string; message?: string; statusCode: TCode; cause?: Error }) {
+  constructor(opts: {
+    url?: string;
+    method?: string;
+    message?: string;
+    statusCode: TCode;
+    cause?: Error;
+  }) {
     super(opts.message ?? `HTTP Error ${opts.statusCode} `);
 
     Object.setPrototypeOf(this, HttpError.prototype);
diff --git a/packages/pdf/insertTextInPDF.ts b/packages/pdf/insertTextInPDF.ts
index d7e829069..83487e94b 100644
--- a/packages/pdf/insertTextInPDF.ts
+++ b/packages/pdf/insertTextInPDF.ts
@@ -1,6 +1,6 @@
-import { PDFDocument, rgb, StandardFonts } from "pdf-lib";
 import fontkit from "@pdf-lib/fontkit";
 import * as fs from "fs";
+import { PDFDocument, StandardFonts, rgb } from "pdf-lib";
 
 export async function insertTextInPDF(
   pdfAsBase64: string,
diff --git a/packages/prisma/index.ts b/packages/prisma/index.ts
index 0c2cb450e..3a76d6bca 100644
--- a/packages/prisma/index.ts
+++ b/packages/prisma/index.ts
@@ -1,5 +1,5 @@
-import { PrismaClient, Document, User } from "@prisma/client";
-import { isENVProd } from "@documenso/lib"
+import { isENVProd } from "@documenso/lib";
+import { Document, PrismaClient, User } from "@prisma/client";
 
 declare global {
   var client: PrismaClient | undefined;
diff --git a/packages/prisma/seed.ts b/packages/prisma/seed.ts
index 5f9203a01..42812331f 100644
--- a/packages/prisma/seed.ts
+++ b/packages/prisma/seed.ts
@@ -1,7 +1,7 @@
-import prisma from "@documenso/prisma";
-import { hashPassword } from "@documenso/lib/auth";
-import { IdentityProvider } from "@prisma/client";
 import { coloredConsole } from "@documenso/lib";
+import { hashPassword } from "@documenso/lib/auth";
+import prisma from "@documenso/prisma";
+import { IdentityProvider } from "@prisma/client";
 
 async function createUser(userData: { email: string; password: string }) {
   try {
diff --git a/packages/signing/addDigitalSignature.ts b/packages/signing/addDigitalSignature.ts
index f38a85cb4..b77c60138 100644
--- a/packages/signing/addDigitalSignature.ts
+++ b/packages/signing/addDigitalSignature.ts
@@ -1,17 +1,10 @@
+import { PDFDocument, PDFHexString, PDFName, PDFNumber, PDFString } from "pdf-lib";
+
 const fs = require("fs");
 // Local copy of Node SignPDF because https://github.com/vbuch/node-signpdf/pull/187 was not published in NPM yet. Can be switched to npm packge.
 const signer = require("./node-signpdf/dist/signpdf");
-import {
-  PDFDocument,
-  PDFName,
-  PDFNumber,
-  PDFHexString,
-  PDFString,
-} from "pdf-lib";
 
-export const addDigitalSignature = async (
-  documentAsBase64: string
-): Promise<string> => {
+export const addDigitalSignature = async (documentAsBase64: string): Promise<string> => {
   // Custom code to add Byterange to PDF
   const PDFArrayCustom = require("./PDFArrayCustom");
   const pdfBuffer = Buffer.from(documentAsBase64, "base64");
diff --git a/packages/signing/index.ts b/packages/signing/index.ts
index e09ffe6ea..7aeeb6470 100644
--- a/packages/signing/index.ts
+++ b/packages/signing/index.ts
@@ -1 +1 @@
-export { signDocument } from "./signDocument";
\ No newline at end of file
+export { signDocument } from "./signDocument";
diff --git a/packages/signing/node-signpdf/dist/SignPdfError.js b/packages/signing/node-signpdf/dist/SignPdfError.js
index a46e7f97e..f8e06aa0f 100644
--- a/packages/signing/node-signpdf/dist/SignPdfError.js
+++ b/packages/signing/node-signpdf/dist/SignPdfError.js
@@ -1,9 +1,14 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
-exports.default = exports.ERROR_VERIFY_SIGNATURE = exports.ERROR_TYPE_UNKNOWN = exports.ERROR_TYPE_PARSE = exports.ERROR_TYPE_INPUT = void 0;
+exports.default =
+  exports.ERROR_VERIFY_SIGNATURE =
+  exports.ERROR_TYPE_UNKNOWN =
+  exports.ERROR_TYPE_PARSE =
+  exports.ERROR_TYPE_INPUT =
+    void 0;
 const ERROR_TYPE_UNKNOWN = 1;
 exports.ERROR_TYPE_UNKNOWN = ERROR_TYPE_UNKNOWN;
 const ERROR_TYPE_INPUT = 2;
@@ -18,13 +23,11 @@ class SignPdfError extends Error {
     super(msg);
     this.type = type;
   }
-
 } // Shorthand
 
-
 SignPdfError.TYPE_UNKNOWN = ERROR_TYPE_UNKNOWN;
 SignPdfError.TYPE_INPUT = ERROR_TYPE_INPUT;
 SignPdfError.TYPE_PARSE = ERROR_TYPE_PARSE;
 SignPdfError.VERIFY_SIGNATURE = ERROR_VERIFY_SIGNATURE;
 var _default = SignPdfError;
-exports.default = _default;
\ No newline at end of file
+exports.default = _default;
diff --git a/packages/signing/node-signpdf/dist/helpers/const.js b/packages/signing/node-signpdf/dist/helpers/const.js
index 7b2d86721..3fe7e4ad6 100644
--- a/packages/signing/node-signpdf/dist/helpers/const.js
+++ b/packages/signing/node-signpdf/dist/helpers/const.js
@@ -1,18 +1,24 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
-exports.SUBFILTER_ETSI_CADES_DETACHED = exports.SUBFILTER_ADOBE_X509_SHA1 = exports.SUBFILTER_ADOBE_PKCS7_SHA1 = exports.SUBFILTER_ADOBE_PKCS7_DETACHED = exports.DEFAULT_SIGNATURE_LENGTH = exports.DEFAULT_BYTE_RANGE_PLACEHOLDER = void 0;
+exports.SUBFILTER_ETSI_CADES_DETACHED =
+  exports.SUBFILTER_ADOBE_X509_SHA1 =
+  exports.SUBFILTER_ADOBE_PKCS7_SHA1 =
+  exports.SUBFILTER_ADOBE_PKCS7_DETACHED =
+  exports.DEFAULT_SIGNATURE_LENGTH =
+  exports.DEFAULT_BYTE_RANGE_PLACEHOLDER =
+    void 0;
 const DEFAULT_SIGNATURE_LENGTH = 8192;
 exports.DEFAULT_SIGNATURE_LENGTH = DEFAULT_SIGNATURE_LENGTH;
-const DEFAULT_BYTE_RANGE_PLACEHOLDER = '**********';
+const DEFAULT_BYTE_RANGE_PLACEHOLDER = "**********";
 exports.DEFAULT_BYTE_RANGE_PLACEHOLDER = DEFAULT_BYTE_RANGE_PLACEHOLDER;
-const SUBFILTER_ADOBE_PKCS7_DETACHED = 'adbe.pkcs7.detached';
+const SUBFILTER_ADOBE_PKCS7_DETACHED = "adbe.pkcs7.detached";
 exports.SUBFILTER_ADOBE_PKCS7_DETACHED = SUBFILTER_ADOBE_PKCS7_DETACHED;
-const SUBFILTER_ADOBE_PKCS7_SHA1 = 'adbe.pkcs7.sha1';
+const SUBFILTER_ADOBE_PKCS7_SHA1 = "adbe.pkcs7.sha1";
 exports.SUBFILTER_ADOBE_PKCS7_SHA1 = SUBFILTER_ADOBE_PKCS7_SHA1;
-const SUBFILTER_ADOBE_X509_SHA1 = 'adbe.x509.rsa.sha1';
+const SUBFILTER_ADOBE_X509_SHA1 = "adbe.x509.rsa.sha1";
 exports.SUBFILTER_ADOBE_X509_SHA1 = SUBFILTER_ADOBE_X509_SHA1;
-const SUBFILTER_ETSI_CADES_DETACHED = 'ETSI.CAdES.detached';
-exports.SUBFILTER_ETSI_CADES_DETACHED = SUBFILTER_ETSI_CADES_DETACHED;
\ No newline at end of file
+const SUBFILTER_ETSI_CADES_DETACHED = "ETSI.CAdES.detached";
+exports.SUBFILTER_ETSI_CADES_DETACHED = SUBFILTER_ETSI_CADES_DETACHED;
diff --git a/packages/signing/node-signpdf/dist/helpers/extractSignature.js b/packages/signing/node-signpdf/dist/helpers/extractSignature.js
index 0d3002401..e966f4dc3 100644
--- a/packages/signing/node-signpdf/dist/helpers/extractSignature.js
+++ b/packages/signing/node-signpdf/dist/helpers/extractSignature.js
@@ -1,13 +1,15 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
 exports.default = void 0;
 
 var _SignPdfError = _interopRequireDefault(require("../SignPdfError"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
 const getSubstringIndex = (str, substring, n) => {
   let times = 0;
@@ -30,42 +32,55 @@ const getSubstringIndex = (str, substring, n) => {
  * @returns {Object} {ByteRange: Number[], signature: Buffer, signedData: Buffer}
  */
 
-
 const extractSignature = (pdf, signatureCount = 1) => {
   if (!(pdf instanceof Buffer)) {
-    throw new _SignPdfError.default('PDF expected as Buffer.', _SignPdfError.default.TYPE_INPUT);
+    throw new _SignPdfError.default("PDF expected as Buffer.", _SignPdfError.default.TYPE_INPUT);
   } // const byteRangePos = pdf.indexOf('/ByteRange [');
 
-
-  const byteRangePos = getSubstringIndex(pdf, '/ByteRange [', signatureCount);
+  const byteRangePos = getSubstringIndex(pdf, "/ByteRange [", signatureCount);
 
   if (byteRangePos === -1) {
-    throw new _SignPdfError.default('Failed to locate ByteRange.', _SignPdfError.default.TYPE_PARSE);
+    throw new _SignPdfError.default(
+      "Failed to locate ByteRange.",
+      _SignPdfError.default.TYPE_PARSE
+    );
   }
 
-  const byteRangeEnd = pdf.indexOf(']', byteRangePos);
+  const byteRangeEnd = pdf.indexOf("]", byteRangePos);
 
   if (byteRangeEnd === -1) {
-    throw new _SignPdfError.default('Failed to locate the end of the ByteRange.', _SignPdfError.default.TYPE_PARSE);
+    throw new _SignPdfError.default(
+      "Failed to locate the end of the ByteRange.",
+      _SignPdfError.default.TYPE_PARSE
+    );
   }
 
   const byteRange = pdf.slice(byteRangePos, byteRangeEnd + 1).toString();
   const matches = /\/ByteRange \[(\d+) +(\d+) +(\d+) +(\d+) *\]/.exec(byteRange);
 
   if (matches === null) {
-    throw new _SignPdfError.default('Failed to parse the ByteRange.', _SignPdfError.default.TYPE_PARSE);
+    throw new _SignPdfError.default(
+      "Failed to parse the ByteRange.",
+      _SignPdfError.default.TYPE_PARSE
+    );
   }
 
   const ByteRange = matches.slice(1).map(Number);
-  const signedData = Buffer.concat([pdf.slice(ByteRange[0], ByteRange[0] + ByteRange[1]), pdf.slice(ByteRange[2], ByteRange[2] + ByteRange[3])]);
-  const signatureHex = pdf.slice(ByteRange[0] + ByteRange[1] + 1, ByteRange[2]).toString('binary').replace(/(?:00|>)+$/, '');
-  const signature = Buffer.from(signatureHex, 'hex').toString('binary');
+  const signedData = Buffer.concat([
+    pdf.slice(ByteRange[0], ByteRange[0] + ByteRange[1]),
+    pdf.slice(ByteRange[2], ByteRange[2] + ByteRange[3]),
+  ]);
+  const signatureHex = pdf
+    .slice(ByteRange[0] + ByteRange[1] + 1, ByteRange[2])
+    .toString("binary")
+    .replace(/(?:00|>)+$/, "");
+  const signature = Buffer.from(signatureHex, "hex").toString("binary");
   return {
     ByteRange: matches.slice(1, 5).map(Number),
     signature,
-    signedData
+    signedData,
   };
 };
 
 var _default = extractSignature;
-exports.default = _default;
\ No newline at end of file
+exports.default = _default;
diff --git a/packages/signing/node-signpdf/dist/helpers/findByteRange.js b/packages/signing/node-signpdf/dist/helpers/findByteRange.js
index c3853bf07..556e98d45 100644
--- a/packages/signing/node-signpdf/dist/helpers/findByteRange.js
+++ b/packages/signing/node-signpdf/dist/helpers/findByteRange.js
@@ -1,7 +1,7 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
 exports.default = void 0;
 
@@ -9,7 +9,9 @@ var _SignPdfError = _interopRequireDefault(require("../SignPdfError"));
 
 var _const = require("./const");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
 /**
  * Finds ByteRange information within a given PDF Buffer if one exists
@@ -17,25 +19,32 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {Buffer} pdf
  * @returns {Object} {byteRangePlaceholder: String, byteRangeStrings: String[], byteRange: String[]}
  */
-const findByteRange = pdf => {
+const findByteRange = (pdf) => {
   if (!(pdf instanceof Buffer)) {
-    throw new _SignPdfError.default('PDF expected as Buffer.', _SignPdfError.default.TYPE_INPUT);
+    throw new _SignPdfError.default("PDF expected as Buffer.", _SignPdfError.default.TYPE_INPUT);
   }
 
-  const byteRangeStrings = pdf.toString().match(/\/ByteRange\s*\[{1}\s*(?:(?:\d*|\/\*{10})\s+){3}(?:\d+|\/\*{10}){1}\s*]{1}/g);
+  const byteRangeStrings = pdf
+    .toString()
+    .match(/\/ByteRange\s*\[{1}\s*(?:(?:\d*|\/\*{10})\s+){3}(?:\d+|\/\*{10}){1}\s*]{1}/g);
 
   if (!byteRangeStrings) {
-    throw new _SignPdfError.default('No ByteRangeStrings found within PDF buffer', _SignPdfError.default.TYPE_PARSE);
+    throw new _SignPdfError.default(
+      "No ByteRangeStrings found within PDF buffer",
+      _SignPdfError.default.TYPE_PARSE
+    );
   }
 
-  const byteRangePlaceholder = byteRangeStrings.find(s => s.includes(`/${_const.DEFAULT_BYTE_RANGE_PLACEHOLDER}`));
-  const byteRanges = byteRangeStrings.map(brs => brs.match(/[^[\s]*(?:\d|\/\*{10})/g));
+  const byteRangePlaceholder = byteRangeStrings.find((s) =>
+    s.includes(`/${_const.DEFAULT_BYTE_RANGE_PLACEHOLDER}`)
+  );
+  const byteRanges = byteRangeStrings.map((brs) => brs.match(/[^[\s]*(?:\d|\/\*{10})/g));
   return {
     byteRangePlaceholder,
     byteRangeStrings,
-    byteRanges
+    byteRanges,
   };
 };
 
 var _default = findByteRange;
-exports.default = _default;
\ No newline at end of file
+exports.default = _default;
diff --git a/packages/signing/node-signpdf/dist/helpers/index.js b/packages/signing/node-signpdf/dist/helpers/index.js
index 3c44df91b..088ad1ecb 100644
--- a/packages/signing/node-signpdf/dist/helpers/index.js
+++ b/packages/signing/node-signpdf/dist/helpers/index.js
@@ -1,37 +1,37 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
 Object.defineProperty(exports, "extractSignature", {
   enumerable: true,
   get: function () {
     return _extractSignature.default;
-  }
+  },
 });
 Object.defineProperty(exports, "findByteRange", {
   enumerable: true,
   get: function () {
     return _findByteRange.default;
-  }
+  },
 });
 Object.defineProperty(exports, "pdfkitAddPlaceholder", {
   enumerable: true,
   get: function () {
     return _pdfkitAddPlaceholder.default;
-  }
+  },
 });
 Object.defineProperty(exports, "plainAddPlaceholder", {
   enumerable: true,
   get: function () {
     return _plainAddPlaceholder.default;
-  }
+  },
 });
 Object.defineProperty(exports, "removeTrailingNewLine", {
   enumerable: true,
   get: function () {
     return _removeTrailingNewLine.default;
-  }
+  },
 });
 
 var _extractSignature = _interopRequireDefault(require("./extractSignature"));
@@ -44,6 +44,8 @@ var _removeTrailingNewLine = _interopRequireDefault(require("./removeTrailingNew
 
 var _findByteRange = _interopRequireDefault(require("./findByteRange"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
-'This string is added so that jest collects coverage for this file'; // eslint-disable-line
\ No newline at end of file
+("This string is added so that jest collects coverage for this file"); // eslint-disable-line
diff --git a/packages/signing/node-signpdf/dist/helpers/pdfkit/abstract_reference.js b/packages/signing/node-signpdf/dist/helpers/pdfkit/abstract_reference.js
index d68dbff2e..982f8f773 100644
--- a/packages/signing/node-signpdf/dist/helpers/pdfkit/abstract_reference.js
+++ b/packages/signing/node-signpdf/dist/helpers/pdfkit/abstract_reference.js
@@ -1,7 +1,7 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
 exports.default = void 0;
 
@@ -17,10 +17,9 @@ PDFAbstractReference - abstract class for PDF reference
 */
 class PDFAbstractReference {
   toString() {
-    throw new Error('Must be implemented by subclasses');
+    throw new Error("Must be implemented by subclasses");
   }
-
 }
 
 var _default = PDFAbstractReference;
-exports.default = _default;
\ No newline at end of file
+exports.default = _default;
diff --git a/packages/signing/node-signpdf/dist/helpers/pdfkit/pdfobject.js b/packages/signing/node-signpdf/dist/helpers/pdfkit/pdfobject.js
index 498ab5323..7be4d3b93 100644
--- a/packages/signing/node-signpdf/dist/helpers/pdfkit/pdfobject.js
+++ b/packages/signing/node-signpdf/dist/helpers/pdfkit/pdfobject.js
@@ -1,13 +1,15 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
 exports.default = void 0;
 
 var _abstract_reference = _interopRequireDefault(require("./abstract_reference"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
 /*
 PDFObject by Devon Govett used below.
@@ -20,26 +22,26 @@ Modifications may have been applied for the purposes of node-signpdf.
 PDFObject - converts JavaScript types into their corresponding PDF types.
 By Devon Govett
 */
-const pad = (str, length) => (Array(length + 1).join('0') + str).slice(-length);
+const pad = (str, length) => (Array(length + 1).join("0") + str).slice(-length);
 
 const escapableRe = /[\n\r\t\b\f()\\]/g;
 const escapable = {
-  '\n': '\\n',
-  '\r': '\\r',
-  '\t': '\\t',
-  '\b': '\\b',
-  '\f': '\\f',
-  '\\': '\\\\',
-  '(': '\\(',
-  ')': '\\)'
+  "\n": "\\n",
+  "\r": "\\r",
+  "\t": "\\t",
+  "\b": "\\b",
+  "\f": "\\f",
+  "\\": "\\\\",
+  "(": "\\(",
+  ")": "\\)",
 }; // Convert little endian UTF-16 to big endian
 
-const swapBytes = buff => buff.swap16();
+const swapBytes = (buff) => buff.swap16();
 
 class PDFObject {
   static convert(object, encryptFn = null) {
     // String literals are converted to the PDF name type
-    if (typeof object === 'string') {
+    if (typeof object === "string") {
       return `/${object}`; // String objects are converted to PDF strings (UTF-16)
     }
 
@@ -55,29 +57,26 @@ class PDFObject {
         }
       } // If so, encode it as big endian UTF-16
 
-
       let stringBuffer;
 
       if (isUnicode) {
-        stringBuffer = swapBytes(Buffer.from(`\ufeff${string}`, 'utf16le'));
+        stringBuffer = swapBytes(Buffer.from(`\ufeff${string}`, "utf16le"));
       } else {
-        stringBuffer = Buffer.from(string, 'ascii');
+        stringBuffer = Buffer.from(string, "ascii");
       } // Encrypt the string when necessary
 
-
       if (encryptFn) {
-        string = encryptFn(stringBuffer).toString('binary');
+        string = encryptFn(stringBuffer).toString("binary");
       } else {
-        string = stringBuffer.toString('binary');
+        string = stringBuffer.toString("binary");
       } // Escape characters as required by the spec
 
-
-      string = string.replace(escapableRe, c => escapable[c]);
+      string = string.replace(escapableRe, (c) => escapable[c]);
       return `(${string})`; // Buffers are converted to PDF hex strings
     }
 
     if (Buffer.isBuffer(object)) {
-      return `<${object.toString('hex')}>`;
+      return `<${object.toString("hex")}>`;
     }
 
     if (object instanceof _abstract_reference.default) {
@@ -85,51 +84,57 @@ class PDFObject {
     }
 
     if (object instanceof Date) {
-      let string = `D:${pad(object.getUTCFullYear(), 4)}${pad(object.getUTCMonth() + 1, 2)}${pad(object.getUTCDate(), 2)}${pad(object.getUTCHours(), 2)}${pad(object.getUTCMinutes(), 2)}${pad(object.getUTCSeconds(), 2)}Z`; // Encrypt the string when necessary
+      let string = `D:${pad(object.getUTCFullYear(), 4)}${pad(object.getUTCMonth() + 1, 2)}${pad(
+        object.getUTCDate(),
+        2
+      )}${pad(object.getUTCHours(), 2)}${pad(object.getUTCMinutes(), 2)}${pad(
+        object.getUTCSeconds(),
+        2
+      )}Z`; // Encrypt the string when necessary
 
       if (encryptFn) {
-        string = encryptFn(Buffer.from(string, 'ascii')).toString('binary'); // Escape characters as required by the spec
+        string = encryptFn(Buffer.from(string, "ascii")).toString("binary"); // Escape characters as required by the spec
 
-        string = string.replace(escapableRe, c => escapable[c]);
+        string = string.replace(escapableRe, (c) => escapable[c]);
       }
 
       return `(${string})`;
     }
 
     if (Array.isArray(object)) {
-      const items = object.map(e => PDFObject.convert(e, encryptFn)).join(' ');
+      const items = object.map((e) => PDFObject.convert(e, encryptFn)).join(" ");
       return `[${items}]`;
     }
 
-    if ({}.toString.call(object) === '[object Object]') {
-      const out = ['<<'];
+    if ({}.toString.call(object) === "[object Object]") {
+      const out = ["<<"];
       let streamData; // @todo this can probably be refactored into a reduce
 
       Object.entries(object).forEach(([key, val]) => {
-        let checkedValue = '';
+        let checkedValue = "";
 
-        if (val.toString().indexOf('<<') !== -1) {
+        if (val.toString().indexOf("<<") !== -1) {
           checkedValue = val;
         } else {
           checkedValue = PDFObject.convert(val, encryptFn);
         }
 
-        if (key === 'stream') {
+        if (key === "stream") {
           streamData = `${key}\n${val}\nendstream`;
         } else {
           out.push(`/${key} ${checkedValue}`);
         }
       });
-      out.push('>>');
+      out.push(">>");
 
       if (streamData) {
         out.push(streamData);
       }
 
-      return out.join('\n');
+      return out.join("\n");
     }
 
-    if (typeof object === 'number') {
+    if (typeof object === "number") {
       return PDFObject.number(object);
     }
 
@@ -143,7 +148,6 @@ class PDFObject {
 
     throw new Error(`unsupported number: ${n}`);
   }
-
 }
 
-exports.default = PDFObject;
\ No newline at end of file
+exports.default = PDFObject;
diff --git a/packages/signing/node-signpdf/dist/helpers/pdfkitAddPlaceholder.js b/packages/signing/node-signpdf/dist/helpers/pdfkitAddPlaceholder.js
index fe266ec10..0f4501c78 100644
--- a/packages/signing/node-signpdf/dist/helpers/pdfkitAddPlaceholder.js
+++ b/packages/signing/node-signpdf/dist/helpers/pdfkitAddPlaceholder.js
@@ -1,7 +1,7 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
 exports.default = void 0;
 
@@ -9,7 +9,9 @@ var _const = require("./const");
 
 var _pdfkitReferenceMock = _interopRequireDefault(require("./pdfkitReferenceMock"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
 // eslint-disable-next-line import/no-unresolved
 
@@ -25,18 +27,18 @@ const pdfkitAddPlaceholder = ({
   pdf,
   pdfBuffer,
   reason,
-  contactInfo = 'emailfromp1289@gmail.com',
-  name = 'Name from p12',
-  location = 'Location from p12',
+  contactInfo = "emailfromp1289@gmail.com",
+  name = "Name from p12",
+  location = "Location from p12",
   signatureLength = _const.DEFAULT_SIGNATURE_LENGTH,
   byteRangePlaceholder = _const.DEFAULT_BYTE_RANGE_PLACEHOLDER,
-  subFilter = _const.SUBFILTER_ADOBE_PKCS7_DETACHED
+  subFilter = _const.SUBFILTER_ADOBE_PKCS7_DETACHED,
 }) => {
   /* eslint-disable no-underscore-dangle,no-param-reassign */
   // Generate the signature placeholder
   const signature = pdf.ref({
-    Type: 'Sig',
-    Filter: 'Adobe.PPKLite',
+    Type: "Sig",
+    Filter: "Adobe.PPKLite",
     SubFilter: subFilter,
     ByteRange: [0, byteRangePlaceholder, byteRangePlaceholder, byteRangePlaceholder],
     Contents: Buffer.from(String.fromCharCode(0).repeat(signatureLength)),
@@ -47,11 +49,10 @@ const pdfkitAddPlaceholder = ({
     // eslint-disable-line no-new-wrappers
     Name: new String(name),
     // eslint-disable-line no-new-wrappers
-    Location: new String(location) // eslint-disable-line no-new-wrappers
-
+    Location: new String(location), // eslint-disable-line no-new-wrappers
   }); // Check if pdf already contains acroform field
 
-  const acroFormPosition = pdfBuffer.lastIndexOf('/Type /AcroForm');
+  const acroFormPosition = pdfBuffer.lastIndexOf("/Type /AcroForm");
   const isAcroFormExists = acroFormPosition !== -1;
   let fieldIds = [];
   let acroFormId;
@@ -65,13 +66,13 @@ const pdfkitAddPlaceholder = ({
     // (generally it's 2 or 3, but I'm giving a big space though)
 
     const maxAcroFormIdLength = 12;
-    let foundAcroFormId = '';
+    let foundAcroFormId = "";
     let index = charsUntilIdEnd + 1;
 
     for (index; index < charsUntilIdEnd + maxAcroFormIdLength; index += 1) {
       const acroFormIdString = pdfBuffer.slice(acroFormPosition - index, acroFormIdEnd).toString();
 
-      if (acroFormIdString[0] === '\n') {
+      if (acroFormIdString[0] === "\n") {
         break;
       }
 
@@ -80,25 +81,27 @@ const pdfkitAddPlaceholder = ({
     }
 
     const pdfSlice = pdfBuffer.slice(acroFormStart);
-    const acroForm = pdfSlice.slice(0, pdfSlice.indexOf('endobj')).toString();
+    const acroForm = pdfSlice.slice(0, pdfSlice.indexOf("endobj")).toString();
     acroFormId = parseInt(foundAcroFormId);
-    const acroFormFields = acroForm.slice(acroForm.indexOf('/Fields [') + 9, acroForm.indexOf(']'));
-    fieldIds = acroFormFields.split(' ').filter((element, i) => i % 3 === 0).map(fieldId => new _pdfkitReferenceMock.default(fieldId));
+    const acroFormFields = acroForm.slice(acroForm.indexOf("/Fields [") + 9, acroForm.indexOf("]"));
+    fieldIds = acroFormFields
+      .split(" ")
+      .filter((element, i) => i % 3 === 0)
+      .map((fieldId) => new _pdfkitReferenceMock.default(fieldId));
   }
 
-  const signatureName = 'Signature'; // Generate signature annotation widget
+  const signatureName = "Signature"; // Generate signature annotation widget
 
   const widget = pdf.ref({
-    Type: 'Annot',
-    Subtype: 'Widget',
-    FT: 'Sig',
+    Type: "Annot",
+    Subtype: "Widget",
+    FT: "Sig",
     Rect: [0, 0, 0, 0],
     V: signature,
     T: new String(signatureName + (fieldIds.length + 1)),
     // eslint-disable-line no-new-wrappers
     F: 4,
-    P: pdf.page.dictionary // eslint-disable-line no-underscore-dangle
-
+    P: pdf.page.dictionary, // eslint-disable-line no-underscore-dangle
   });
   pdf.page.dictionary.data.Annots = [widget]; // Include the widget in a page
 
@@ -107,27 +110,30 @@ const pdfkitAddPlaceholder = ({
   if (!isAcroFormExists) {
     // Create a form (with the widget) and link in the _root
     form = pdf.ref({
-      Type: 'AcroForm',
+      Type: "AcroForm",
       SigFlags: 3,
-      Fields: [...fieldIds, widget]
+      Fields: [...fieldIds, widget],
     });
   } else {
     // Use existing acroform and extend the fields with newly created widgets
-    form = pdf.ref({
-      Type: 'AcroForm',
-      SigFlags: 3,
-      Fields: [...fieldIds, widget]
-    }, acroFormId);
+    form = pdf.ref(
+      {
+        Type: "AcroForm",
+        SigFlags: 3,
+        Fields: [...fieldIds, widget],
+      },
+      acroFormId
+    );
   }
 
   pdf._root.data.AcroForm = form;
   return {
     signature,
     form,
-    widget
+    widget,
   };
   /* eslint-enable no-underscore-dangle,no-param-reassign */
 };
 
 var _default = pdfkitAddPlaceholder;
-exports.default = _default;
\ No newline at end of file
+exports.default = _default;
diff --git a/packages/signing/node-signpdf/dist/helpers/pdfkitReferenceMock.js b/packages/signing/node-signpdf/dist/helpers/pdfkitReferenceMock.js
index 0930df58d..5fea8a3fe 100644
--- a/packages/signing/node-signpdf/dist/helpers/pdfkitReferenceMock.js
+++ b/packages/signing/node-signpdf/dist/helpers/pdfkitReferenceMock.js
@@ -1,20 +1,22 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
 exports.default = void 0;
 
 var _abstract_reference = _interopRequireDefault(require("./pdfkit/abstract_reference"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
 class PDFKitReferenceMock extends _abstract_reference.default {
   constructor(index, additionalData = undefined) {
     super();
     this.index = index;
 
-    if (typeof additionalData !== 'undefined') {
+    if (typeof additionalData !== "undefined") {
       Object.assign(this, additionalData);
     }
   }
@@ -22,8 +24,7 @@ class PDFKitReferenceMock extends _abstract_reference.default {
   toString() {
     return `${this.index} 0 R`;
   }
-
 }
 
 var _default = PDFKitReferenceMock;
-exports.default = _default;
\ No newline at end of file
+exports.default = _default;
diff --git a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/createBufferPageWithAnnotation.js b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/createBufferPageWithAnnotation.js
index 1a046096c..73ffafd2d 100644
--- a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/createBufferPageWithAnnotation.js
+++ b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/createBufferPageWithAnnotation.js
@@ -1,7 +1,7 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
 exports.default = void 0;
 
@@ -9,7 +9,9 @@ var _findObject = _interopRequireDefault(require("./findObject"));
 
 var _getIndexFromRef = _interopRequireDefault(require("./getIndexFromRef"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
 const createBufferPageWithAnnotation = (pdf, info, pagesRef, widget) => {
   const pagesDictionary = (0, _findObject.default)(pdf, info.xref, pagesRef).toString(); // Extend page dictionary with newly created annotations
@@ -17,16 +19,16 @@ const createBufferPageWithAnnotation = (pdf, info, pagesRef, widget) => {
   let annotsStart;
   let annotsEnd;
   let annots;
-  annotsStart = pagesDictionary.indexOf('/Annots');
+  annotsStart = pagesDictionary.indexOf("/Annots");
 
   if (annotsStart > -1) {
-    annotsEnd = pagesDictionary.indexOf(']', annotsStart);
+    annotsEnd = pagesDictionary.indexOf("]", annotsStart);
     annots = pagesDictionary.substr(annotsStart, annotsEnd + 1 - annotsStart);
     annots = annots.substr(0, annots.length - 1); // remove the trailing ]
   } else {
     annotsStart = pagesDictionary.length;
     annotsEnd = pagesDictionary.length;
-    annots = '/Annots [';
+    annots = "/Annots [";
   }
 
   const pagesDictionaryIndex = (0, _getIndexFromRef.default)(info.xref, pagesRef);
@@ -34,14 +36,19 @@ const createBufferPageWithAnnotation = (pdf, info, pagesRef, widget) => {
   annots = `${annots} ${widgetValue}]`; // add the trailing ] back
 
   const preAnnots = pagesDictionary.substr(0, annotsStart);
-  let postAnnots = '';
+  let postAnnots = "";
 
   if (pagesDictionary.length > annotsEnd) {
     postAnnots = pagesDictionary.substr(annotsEnd + 1);
   }
 
-  return Buffer.concat([Buffer.from(`${pagesDictionaryIndex} 0 obj\n`), Buffer.from('<<\n'), Buffer.from(`${preAnnots + annots + postAnnots}\n`), Buffer.from('\n>>\nendobj\n')]);
+  return Buffer.concat([
+    Buffer.from(`${pagesDictionaryIndex} 0 obj\n`),
+    Buffer.from("<<\n"),
+    Buffer.from(`${preAnnots + annots + postAnnots}\n`),
+    Buffer.from("\n>>\nendobj\n"),
+  ]);
 };
 
 var _default = createBufferPageWithAnnotation;
-exports.default = _default;
\ No newline at end of file
+exports.default = _default;
diff --git a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/createBufferRootWithAcroform.js b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/createBufferRootWithAcroform.js
index 4a34369c1..1930db43d 100644
--- a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/createBufferRootWithAcroform.js
+++ b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/createBufferRootWithAcroform.js
@@ -1,18 +1,26 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
 exports.default = void 0;
 
 var _getIndexFromRef = _interopRequireDefault(require("./getIndexFromRef"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
 const createBufferRootWithAcroform = (pdf, info, form) => {
   const rootIndex = (0, _getIndexFromRef.default)(info.xref, info.rootRef);
-  return Buffer.concat([Buffer.from(`${rootIndex} 0 obj\n`), Buffer.from('<<\n'), Buffer.from(`${info.root}\n`), Buffer.from(`/AcroForm ${form}`), Buffer.from('\n>>\nendobj\n')]);
+  return Buffer.concat([
+    Buffer.from(`${rootIndex} 0 obj\n`),
+    Buffer.from("<<\n"),
+    Buffer.from(`${info.root}\n`),
+    Buffer.from(`/AcroForm ${form}`),
+    Buffer.from("\n>>\nendobj\n"),
+  ]);
 };
 
 var _default = createBufferRootWithAcroform;
-exports.default = _default;
\ No newline at end of file
+exports.default = _default;
diff --git a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/createBufferTrailer.js b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/createBufferTrailer.js
index c982767ba..0e57e5f23 100644
--- a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/createBufferTrailer.js
+++ b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/createBufferTrailer.js
@@ -1,21 +1,35 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
 exports.default = void 0;
 
 const createBufferTrailer = (pdf, info, addedReferences) => {
   let rows = [];
-  rows[0] = '0000000000 65535 f '; // info.xref.tableRows[0];
+  rows[0] = "0000000000 65535 f "; // info.xref.tableRows[0];
 
   addedReferences.forEach((offset, index) => {
     const paddedOffset = `0000000000${offset}`.slice(-10);
     rows[index + 1] = `${index} 1\n${paddedOffset} 00000 n `;
   });
-  rows = rows.filter(row => row !== undefined);
-  return Buffer.concat([Buffer.from('xref\n'), Buffer.from(`${info.xref.startingIndex} 1\n`), Buffer.from(rows.join('\n')), Buffer.from('\ntrailer\n'), Buffer.from('<<\n'), Buffer.from(`/Size ${info.xref.maxIndex + 1}\n`), Buffer.from(`/Root ${info.rootRef}\n`), Buffer.from(info.infoRef ? `/Info ${info.infoRef}\n` : ''), Buffer.from(`/Prev ${info.xRefPosition}\n`), Buffer.from('>>\n'), Buffer.from('startxref\n'), Buffer.from(`${pdf.length}\n`), Buffer.from('%%EOF')]);
+  rows = rows.filter((row) => row !== undefined);
+  return Buffer.concat([
+    Buffer.from("xref\n"),
+    Buffer.from(`${info.xref.startingIndex} 1\n`),
+    Buffer.from(rows.join("\n")),
+    Buffer.from("\ntrailer\n"),
+    Buffer.from("<<\n"),
+    Buffer.from(`/Size ${info.xref.maxIndex + 1}\n`),
+    Buffer.from(`/Root ${info.rootRef}\n`),
+    Buffer.from(info.infoRef ? `/Info ${info.infoRef}\n` : ""),
+    Buffer.from(`/Prev ${info.xRefPosition}\n`),
+    Buffer.from(">>\n"),
+    Buffer.from("startxref\n"),
+    Buffer.from(`${pdf.length}\n`),
+    Buffer.from("%%EOF"),
+  ]);
 };
 
 var _default = createBufferTrailer;
-exports.default = _default;
\ No newline at end of file
+exports.default = _default;
diff --git a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/findObject.js b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/findObject.js
index db6c7b3e4..cb3bc4845 100644
--- a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/findObject.js
+++ b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/findObject.js
@@ -1,13 +1,15 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
 exports.default = void 0;
 
 var _getIndexFromRef = _interopRequireDefault(require("./getIndexFromRef"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
 /**
  * @param {Buffer} pdf
@@ -18,12 +20,12 @@ const findObject = (pdf, refTable, ref) => {
   const index = (0, _getIndexFromRef.default)(refTable, ref);
   const offset = refTable.offsets.get(index);
   let slice = pdf.slice(offset);
-  slice = slice.slice(0, slice.indexOf('endobj', 'utf8')); // FIXME: What if it is a stream?
+  slice = slice.slice(0, slice.indexOf("endobj", "utf8")); // FIXME: What if it is a stream?
 
-  slice = slice.slice(slice.indexOf('<<', 'utf8') + 2);
-  slice = slice.slice(0, slice.lastIndexOf('>>', 'utf8'));
+  slice = slice.slice(slice.indexOf("<<", "utf8") + 2);
+  slice = slice.slice(0, slice.lastIndexOf(">>", "utf8"));
   return slice;
 };
 
 var _default = findObject;
-exports.default = _default;
\ No newline at end of file
+exports.default = _default;
diff --git a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/getIndexFromRef.js b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/getIndexFromRef.js
index 1db2ed468..6b8b6d0f2 100644
--- a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/getIndexFromRef.js
+++ b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/getIndexFromRef.js
@@ -1,13 +1,15 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
 exports.default = void 0;
 
 var _SignPdfError = _interopRequireDefault(require("../../SignPdfError"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
 /**
  * @param {object} refTable
@@ -15,15 +17,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @returns {number}
  */
 const getIndexFromRef = (refTable, ref) => {
-  let [index] = ref.split(' ');
+  let [index] = ref.split(" ");
   index = parseInt(index);
 
   if (!refTable.offsets.has(index)) {
-    throw new _SignPdfError.default(`Failed to locate object "${ref}".`, _SignPdfError.default.TYPE_PARSE);
+    throw new _SignPdfError.default(
+      `Failed to locate object "${ref}".`,
+      _SignPdfError.default.TYPE_PARSE
+    );
   }
 
   return index;
 };
 
 var _default = getIndexFromRef;
-exports.default = _default;
\ No newline at end of file
+exports.default = _default;
diff --git a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/getPageRef.js b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/getPageRef.js
index f7dc95b85..1529d1e09 100644
--- a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/getPageRef.js
+++ b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/getPageRef.js
@@ -1,7 +1,7 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
 exports.default = getPageRef;
 
@@ -9,7 +9,9 @@ var _getPagesDictionaryRef = _interopRequireDefault(require("./getPagesDictionar
 
 var _findObject = _interopRequireDefault(require("./findObject"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
 /**
  * Finds the reference to a page.
@@ -20,10 +22,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function getPageRef(pdfBuffer, info) {
   const pagesRef = (0, _getPagesDictionaryRef.default)(info);
   const pagesDictionary = (0, _findObject.default)(pdfBuffer, info.xref, pagesRef);
-  const kidsPosition = pagesDictionary.indexOf('/Kids');
-  const kidsStart = pagesDictionary.indexOf('[', kidsPosition) + 1;
-  const kidsEnd = pagesDictionary.indexOf(']', kidsPosition);
+  const kidsPosition = pagesDictionary.indexOf("/Kids");
+  const kidsStart = pagesDictionary.indexOf("[", kidsPosition) + 1;
+  const kidsEnd = pagesDictionary.indexOf("]", kidsPosition);
   const pages = pagesDictionary.slice(kidsStart, kidsEnd).toString();
-  const split = pages.trim().split(' ', 3);
+  const split = pages.trim().split(" ", 3);
   return `${split[0]} ${split[1]} ${split[2]}`;
-}
\ No newline at end of file
+}
diff --git a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/getPagesDictionaryRef.js b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/getPagesDictionaryRef.js
index 375de63b0..3f34b176d 100644
--- a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/getPagesDictionaryRef.js
+++ b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/getPagesDictionaryRef.js
@@ -1,13 +1,15 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
 exports.default = getPagesDictionaryRef;
 
 var _SignPdfError = _interopRequireDefault(require("../../SignPdfError"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
 /**
  * @param {Object} info As extracted from readRef()
@@ -17,8 +19,11 @@ function getPagesDictionaryRef(info) {
   const match = pagesRefRegex.exec(info.root);
 
   if (match === null) {
-    throw new _SignPdfError.default('Failed to find the pages descriptor. This is probably a problem in node-signpdf.', _SignPdfError.default.TYPE_PARSE);
+    throw new _SignPdfError.default(
+      "Failed to find the pages descriptor. This is probably a problem in node-signpdf.",
+      _SignPdfError.default.TYPE_PARSE
+    );
   }
 
   return match[1];
-}
\ No newline at end of file
+}
diff --git a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/index.js b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/index.js
index 764dbfe24..08241d99e 100644
--- a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/index.js
+++ b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/index.js
@@ -1,7 +1,7 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
 exports.default = void 0;
 
@@ -21,18 +21,24 @@ var _readPdf = _interopRequireDefault(require("./readPdf"));
 
 var _getPageRef = _interopRequireDefault(require("./getPageRef"));
 
-var _createBufferRootWithAcroform = _interopRequireDefault(require("./createBufferRootWithAcroform"));
+var _createBufferRootWithAcroform = _interopRequireDefault(
+  require("./createBufferRootWithAcroform")
+);
 
-var _createBufferPageWithAnnotation = _interopRequireDefault(require("./createBufferPageWithAnnotation"));
+var _createBufferPageWithAnnotation = _interopRequireDefault(
+  require("./createBufferPageWithAnnotation")
+);
 
 var _createBufferTrailer = _interopRequireDefault(require("./createBufferTrailer"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
-const isContainBufferRootWithAcroform = pdf => {
+const isContainBufferRootWithAcroform = (pdf) => {
   const bufferRootWithAcroformRefRegex = /\/AcroForm\s+(\d+\s\d+\sR)/g;
   const match = bufferRootWithAcroformRefRegex.exec(pdf.toString());
-  return match != null && match[1] != null && match[1] !== '';
+  return match != null && match[1] != null && match[1] !== "";
 };
 /**
  * Adds a signature placeholder to a PDF Buffer.
@@ -44,15 +50,14 @@ const isContainBufferRootWithAcroform = pdf => {
  * not only on a freshly created through PDFKit one.
  */
 
-
 const plainAddPlaceholder = ({
   pdfBuffer,
   reason,
-  contactInfo = 'emailfromp1289@gmail.com',
-  name = 'Name from p12',
-  location = 'Location from p12',
+  contactInfo = "emailfromp1289@gmail.com",
+  name = "Name from p12",
+  location = "Location from p12",
   signatureLength = _const.DEFAULT_SIGNATURE_LENGTH,
-  subFilter = _const.SUBFILTER_ADOBE_PKCS7_DETACHED
+  subFilter = _const.SUBFILTER_ADOBE_PKCS7_DETACHED,
 }) => {
   let pdf = (0, _removeTrailingNewLine.default)(pdfBuffer);
   const info = (0, _readPdf.default)(pdf);
@@ -65,24 +70,27 @@ const plainAddPlaceholder = ({
       const index = additionalIndex != null ? additionalIndex : info.xref.maxIndex;
       addedReferences.set(index, pdf.length + 1); // + 1 new line
 
-      pdf = Buffer.concat([pdf, Buffer.from('\n'), Buffer.from(`${index} 0 obj\n`), Buffer.from(_pdfobject.default.convert(input)), Buffer.from('\nendobj\n')]);
+      pdf = Buffer.concat([
+        pdf,
+        Buffer.from("\n"),
+        Buffer.from(`${index} 0 obj\n`),
+        Buffer.from(_pdfobject.default.convert(input)),
+        Buffer.from("\nendobj\n"),
+      ]);
       return new _pdfkitReferenceMock.default(info.xref.maxIndex);
     },
     page: {
       dictionary: new _pdfkitReferenceMock.default(pageIndex, {
         data: {
-          Annots: []
-        }
-      })
+          Annots: [],
+        },
+      }),
     },
     _root: {
-      data: {}
-    }
+      data: {},
+    },
   };
-  const {
-    form,
-    widget
-  } = (0, _pdfkitAddPlaceholder.default)({
+  const { form, widget } = (0, _pdfkitAddPlaceholder.default)({
     pdf: pdfKitMock,
     pdfBuffer,
     reason,
@@ -90,20 +98,32 @@ const plainAddPlaceholder = ({
     name,
     location,
     signatureLength,
-    subFilter
+    subFilter,
   });
 
   if (!isContainBufferRootWithAcroform(pdf)) {
     const rootIndex = (0, _getIndexFromRef.default)(info.xref, info.rootRef);
     addedReferences.set(rootIndex, pdf.length + 1);
-    pdf = Buffer.concat([pdf, Buffer.from('\n'), (0, _createBufferRootWithAcroform.default)(pdf, info, form)]);
+    pdf = Buffer.concat([
+      pdf,
+      Buffer.from("\n"),
+      (0, _createBufferRootWithAcroform.default)(pdf, info, form),
+    ]);
   }
 
   addedReferences.set(pageIndex, pdf.length + 1);
-  pdf = Buffer.concat([pdf, Buffer.from('\n'), (0, _createBufferPageWithAnnotation.default)(pdf, info, pageRef, widget)]);
-  pdf = Buffer.concat([pdf, Buffer.from('\n'), (0, _createBufferTrailer.default)(pdf, info, addedReferences)]);
+  pdf = Buffer.concat([
+    pdf,
+    Buffer.from("\n"),
+    (0, _createBufferPageWithAnnotation.default)(pdf, info, pageRef, widget),
+  ]);
+  pdf = Buffer.concat([
+    pdf,
+    Buffer.from("\n"),
+    (0, _createBufferTrailer.default)(pdf, info, addedReferences),
+  ]);
   return pdf;
 };
 
 var _default = plainAddPlaceholder;
-exports.default = _default;
\ No newline at end of file
+exports.default = _default;
diff --git a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/readPdf.js b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/readPdf.js
index 1bba22555..422bf98b9 100644
--- a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/readPdf.js
+++ b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/readPdf.js
@@ -1,7 +1,7 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
 exports.default = void 0;
 
@@ -9,7 +9,9 @@ var _readRefTable = _interopRequireDefault(require("./readRefTable"));
 
 var _findObject = _interopRequireDefault(require("./findObject"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
 const getValue = (trailer, key) => {
   let index = trailer.indexOf(key);
@@ -19,13 +21,16 @@ const getValue = (trailer, key) => {
   }
 
   const slice = trailer.slice(index);
-  index = slice.indexOf('/', 1);
+  index = slice.indexOf("/", 1);
 
   if (index === -1) {
-    index = slice.indexOf('>', 1);
+    index = slice.indexOf(">", 1);
   }
 
-  return slice.slice(key.length + 1, index).toString().trim(); // key + at least one space
+  return slice
+    .slice(key.length + 1, index)
+    .toString()
+    .trim(); // key + at least one space
 };
 /**
  * Simplified parsing of a PDF Buffer.
@@ -36,18 +41,17 @@ const getValue = (trailer, key) => {
  * @param {Buffer} pdfBuffer
  */
 
-
-const readPdf = pdfBuffer => {
+const readPdf = (pdfBuffer) => {
   // Extract the trailer dictionary.
-  const trailerStart = pdfBuffer.lastIndexOf('trailer'); // The trailer is followed by xref. Then an EOF. EOF's length is 6 characters.
+  const trailerStart = pdfBuffer.lastIndexOf("trailer"); // The trailer is followed by xref. Then an EOF. EOF's length is 6 characters.
 
   const trailer = pdfBuffer.slice(trailerStart, pdfBuffer.length - 6);
-  let xRefPosition = trailer.slice(trailer.lastIndexOf('startxref') + 10).toString();
+  let xRefPosition = trailer.slice(trailer.lastIndexOf("startxref") + 10).toString();
   xRefPosition = parseInt(xRefPosition);
   const refTable = (0, _readRefTable.default)(pdfBuffer);
-  const rootRef = getValue(trailer, '/Root');
+  const rootRef = getValue(trailer, "/Root");
   const root = (0, _findObject.default)(pdfBuffer, refTable, rootRef).toString();
-  const infoRef = getValue(trailer, '/Info');
+  const infoRef = getValue(trailer, "/Info");
   return {
     xref: refTable,
     rootRef,
@@ -55,9 +59,9 @@ const readPdf = pdfBuffer => {
     infoRef,
     trailerStart,
     previousXrefs: [],
-    xRefPosition
+    xRefPosition,
   };
 };
 
 var _default = readPdf;
-exports.default = _default;
\ No newline at end of file
+exports.default = _default;
diff --git a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/readRefTable.js b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/readRefTable.js
index 8c8a75c27..c5f75ca66 100644
--- a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/readRefTable.js
+++ b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/readRefTable.js
@@ -1,20 +1,28 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
-exports.getXref = exports.getLastTrailerPosition = exports.getFullXrefTable = exports.default = void 0;
+exports.getXref =
+  exports.getLastTrailerPosition =
+  exports.getFullXrefTable =
+  exports.default =
+    void 0;
 
 var _SignPdfError = _interopRequireDefault(require("../../SignPdfError"));
 
 var _xrefToRefMap = _interopRequireDefault(require("./xrefToRefMap"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
-const getLastTrailerPosition = pdf => {
-  const trailerStart = pdf.lastIndexOf(Buffer.from('trailer', 'utf8'));
+const getLastTrailerPosition = (pdf) => {
+  const trailerStart = pdf.lastIndexOf(Buffer.from("trailer", "utf8"));
   const trailer = pdf.slice(trailerStart, pdf.length - 6);
-  const xRefPosition = trailer.slice(trailer.lastIndexOf(Buffer.from('startxref', 'utf8')) + 10).toString();
+  const xRefPosition = trailer
+    .slice(trailer.lastIndexOf(Buffer.from("startxref", "utf8")) + 10)
+    .toString();
   return parseInt(xRefPosition);
 };
 
@@ -23,47 +31,62 @@ exports.getLastTrailerPosition = getLastTrailerPosition;
 const getXref = (pdf, position) => {
   let refTable = pdf.slice(position); // slice starting from where xref starts
 
-  const realPosition = refTable.indexOf(Buffer.from('xref', 'utf8'));
+  const realPosition = refTable.indexOf(Buffer.from("xref", "utf8"));
 
   if (realPosition === -1) {
-    throw new _SignPdfError.default(`Could not find xref anywhere at or after ${position}.`, _SignPdfError.default.TYPE_PARSE);
+    throw new _SignPdfError.default(
+      `Could not find xref anywhere at or after ${position}.`,
+      _SignPdfError.default.TYPE_PARSE
+    );
   }
 
   if (realPosition > 0) {
     const prefix = refTable.slice(0, realPosition);
 
-    if (prefix.toString().replace(/\s*/g, '') !== '') {
-      throw new _SignPdfError.default(`Expected xref at ${position} but found other content.`, _SignPdfError.default.TYPE_PARSE);
+    if (prefix.toString().replace(/\s*/g, "") !== "") {
+      throw new _SignPdfError.default(
+        `Expected xref at ${position} but found other content.`,
+        _SignPdfError.default.TYPE_PARSE
+      );
     }
   }
 
-  const nextEofPosition = refTable.indexOf(Buffer.from('%%EOF', 'utf8'));
+  const nextEofPosition = refTable.indexOf(Buffer.from("%%EOF", "utf8"));
 
   if (nextEofPosition === -1) {
-    throw new _SignPdfError.default('Expected EOF after xref and trailer but could not find one.', _SignPdfError.default.TYPE_PARSE);
+    throw new _SignPdfError.default(
+      "Expected EOF after xref and trailer but could not find one.",
+      _SignPdfError.default.TYPE_PARSE
+    );
   }
 
   refTable = refTable.slice(0, nextEofPosition);
   refTable = refTable.slice(realPosition + 4); // move ahead with the "xref"
 
-  refTable = refTable.slice(refTable.indexOf('\n') + 1); // move after the next new line
+  refTable = refTable.slice(refTable.indexOf("\n") + 1); // move after the next new line
   // extract the size
 
-  let size = refTable.toString().split('/Size')[1];
+  let size = refTable.toString().split("/Size")[1];
 
   if (!size) {
-    throw new _SignPdfError.default('Size not found in xref table.', _SignPdfError.default.TYPE_PARSE);
+    throw new _SignPdfError.default(
+      "Size not found in xref table.",
+      _SignPdfError.default.TYPE_PARSE
+    );
   }
 
   size = /^\s*(\d+)/.exec(size);
 
   if (size === null) {
-    throw new _SignPdfError.default('Failed to parse size of xref table.', _SignPdfError.default.TYPE_PARSE);
+    throw new _SignPdfError.default(
+      "Failed to parse size of xref table.",
+      _SignPdfError.default.TYPE_PARSE
+    );
   }
 
   size = parseInt(size[1]);
-  const [objects, infos] = refTable.toString().split('trailer');
-  const isContainingPrev = infos.split('/Prev')[1] != null;
+  const [objects, infos] = refTable.toString().split("trailer");
+  const isContainingPrev = infos.split("/Prev")[1] != null;
   let prev;
 
   if (isContainingPrev) {
@@ -77,13 +100,13 @@ const getXref = (pdf, position) => {
   return {
     size,
     prev,
-    xRefContent
+    xRefContent,
   };
 };
 
 exports.getXref = getXref;
 
-const getFullXrefTable = pdf => {
+const getFullXrefTable = (pdf) => {
   const lastTrailerPosition = getLastTrailerPosition(pdf);
   const lastXrefTable = getXref(pdf, lastTrailerPosition);
 
@@ -101,19 +124,18 @@ const getFullXrefTable = pdf => {
  * @returns {object}
  */
 
-
 exports.getFullXrefTable = getFullXrefTable;
 
-const readRefTable = pdf => {
+const readRefTable = (pdf) => {
   const fullXrefTable = getFullXrefTable(pdf);
   const startingIndex = 0;
   const maxIndex = Math.max(...fullXrefTable.keys());
   return {
     startingIndex,
     maxIndex,
-    offsets: fullXrefTable
+    offsets: fullXrefTable,
   };
 };
 
 var _default = readRefTable;
-exports.default = _default;
\ No newline at end of file
+exports.default = _default;
diff --git a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/xrefToRefMap.js b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/xrefToRefMap.js
index 5c78727b5..224f7e7bc 100644
--- a/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/xrefToRefMap.js
+++ b/packages/signing/node-signpdf/dist/helpers/plainAddPlaceholder/xrefToRefMap.js
@@ -1,21 +1,23 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
 exports.default = void 0;
 
 var _SignPdfError = _interopRequireDefault(require("../../SignPdfError"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
-const xrefToRefMap = xrefString => {
-  const lines = xrefString.split('\n').filter(l => l !== '');
+const xrefToRefMap = (xrefString) => {
+  const lines = xrefString.split("\n").filter((l) => l !== "");
   let index = 0;
   let expectedLines = 0;
   const xref = new Map();
-  lines.forEach(line => {
-    const split = line.split(' ');
+  lines.forEach((line) => {
+    const split = line.split(" ");
 
     if (split.length === 2) {
       index = parseInt(split[0]);
@@ -24,23 +26,32 @@ const xrefToRefMap = xrefString => {
     }
 
     if (expectedLines <= 0) {
-      throw new _SignPdfError.default('Too many lines in xref table.', _SignPdfError.default.TYPE_PARSE);
+      throw new _SignPdfError.default(
+        "Too many lines in xref table.",
+        _SignPdfError.default.TYPE_PARSE
+      );
     }
 
     expectedLines -= 1;
-    const [offset,, inUse] = split;
+    const [offset, , inUse] = split;
 
-    if (inUse.trim() === 'f') {
+    if (inUse.trim() === "f") {
       index += 1;
       return;
     }
 
-    if (inUse.trim() !== 'n') {
-      throw new _SignPdfError.default(`Unknown in-use flag "${inUse}". Expected "n" or "f".`, _SignPdfError.default.TYPE_PARSE);
+    if (inUse.trim() !== "n") {
+      throw new _SignPdfError.default(
+        `Unknown in-use flag "${inUse}". Expected "n" or "f".`,
+        _SignPdfError.default.TYPE_PARSE
+      );
     }
 
     if (!/^\d+$/.test(offset.trim())) {
-      throw new _SignPdfError.default(`Expected integer offset. Got "${offset}".`, _SignPdfError.default.TYPE_PARSE);
+      throw new _SignPdfError.default(
+        `Expected integer offset. Got "${offset}".`,
+        _SignPdfError.default.TYPE_PARSE
+      );
     }
 
     const storeOffset = parseInt(offset.trim());
@@ -51,4 +62,4 @@ const xrefToRefMap = xrefString => {
 };
 
 var _default = xrefToRefMap;
-exports.default = _default;
\ No newline at end of file
+exports.default = _default;
diff --git a/packages/signing/node-signpdf/dist/helpers/removeTrailingNewLine.js b/packages/signing/node-signpdf/dist/helpers/removeTrailingNewLine.js
index 74f19c47a..2d6cae9f1 100644
--- a/packages/signing/node-signpdf/dist/helpers/removeTrailingNewLine.js
+++ b/packages/signing/node-signpdf/dist/helpers/removeTrailingNewLine.js
@@ -1,13 +1,15 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
 exports.default = void 0;
 
 var _SignPdfError = _interopRequireDefault(require("../SignPdfError"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
 const sliceLastChar = (pdf, character) => {
   const lastChar = pdf.slice(pdf.length - 1).toString();
@@ -26,23 +28,25 @@ const sliceLastChar = (pdf, character) => {
  * @returns {Buffer}
  */
 
-
-const removeTrailingNewLine = pdf => {
+const removeTrailingNewLine = (pdf) => {
   if (!(pdf instanceof Buffer)) {
-    throw new _SignPdfError.default('PDF expected as Buffer.', _SignPdfError.default.TYPE_INPUT);
+    throw new _SignPdfError.default("PDF expected as Buffer.", _SignPdfError.default.TYPE_INPUT);
   }
 
   let output = pdf;
-  output = sliceLastChar(output, '\n');
-  output = sliceLastChar(output, '\r');
+  output = sliceLastChar(output, "\n");
+  output = sliceLastChar(output, "\r");
   const lastLine = output.slice(output.length - 6).toString();
 
-  if (lastLine !== '\n%%EOF') {
-    throw new _SignPdfError.default('A PDF file must end with an EOF line.', _SignPdfError.default.TYPE_PARSE);
+  if (lastLine !== "\n%%EOF") {
+    throw new _SignPdfError.default(
+      "A PDF file must end with an EOF line.",
+      _SignPdfError.default.TYPE_PARSE
+    );
   }
 
   return output;
 };
 
 var _default = removeTrailingNewLine;
-exports.default = _default;
\ No newline at end of file
+exports.default = _default;
diff --git a/packages/signing/node-signpdf/dist/signpdf.js b/packages/signing/node-signpdf/dist/signpdf.js
index 9e06b6028..133623e4b 100644
--- a/packages/signing/node-signpdf/dist/signpdf.js
+++ b/packages/signing/node-signpdf/dist/signpdf.js
@@ -1,18 +1,18 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
 var _exportNames = {
   SignPdf: true,
-  SignPdfError: true
+  SignPdfError: true,
 };
 exports.SignPdf = void 0;
 Object.defineProperty(exports, "SignPdfError", {
   enumerable: true,
   get: function () {
     return _SignPdfError.default;
-  }
+  },
 });
 exports.default = void 0;
 
@@ -30,7 +30,7 @@ Object.keys(_helpers).forEach(function (key) {
     enumerable: true,
     get: function () {
       return _helpers[key];
-    }
+    },
   });
 });
 
@@ -44,11 +44,13 @@ Object.keys(_const).forEach(function (key) {
     enumerable: true,
     get: function () {
       return _const[key];
-    }
+    },
   });
 });
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
 class SignPdf {
   constructor() {
@@ -59,77 +61,88 @@ class SignPdf {
   sign(pdfBuffer, p12Buffer, additionalOptions = {}) {
     const options = {
       asn1StrictParsing: false,
-      passphrase: '',
-      ...additionalOptions
+      passphrase: "",
+      ...additionalOptions,
     };
 
     if (!(pdfBuffer instanceof Buffer)) {
-      throw new _SignPdfError.default('PDF expected as Buffer.', _SignPdfError.default.TYPE_INPUT);
+      throw new _SignPdfError.default("PDF expected as Buffer.", _SignPdfError.default.TYPE_INPUT);
     }
 
     if (!(p12Buffer instanceof Buffer)) {
-      throw new _SignPdfError.default('p12 certificate expected as Buffer.', _SignPdfError.default.TYPE_INPUT);
+      throw new _SignPdfError.default(
+        "p12 certificate expected as Buffer.",
+        _SignPdfError.default.TYPE_INPUT
+      );
     }
 
     let pdf = (0, _helpers.removeTrailingNewLine)(pdfBuffer); // Find the ByteRange placeholder.
 
-    const {
-      byteRangePlaceholder
-    } = (0, _helpers.findByteRange)(pdf);
+    const { byteRangePlaceholder } = (0, _helpers.findByteRange)(pdf);
 
     if (!byteRangePlaceholder) {
-      throw new _SignPdfError.default(`Could not find empty ByteRange placeholder: ${byteRangePlaceholder}`, _SignPdfError.default.TYPE_PARSE);
+      throw new _SignPdfError.default(
+        `Could not find empty ByteRange placeholder: ${byteRangePlaceholder}`,
+        _SignPdfError.default.TYPE_PARSE
+      );
     }
 
     const byteRangePos = pdf.indexOf(byteRangePlaceholder); // Calculate the actual ByteRange that needs to replace the placeholder.
 
     const byteRangeEnd = byteRangePos + byteRangePlaceholder.length;
-    const contentsTagPos = pdf.indexOf('/Contents ', byteRangeEnd);
-    const placeholderPos = pdf.indexOf('<', contentsTagPos);
-    const placeholderEnd = pdf.indexOf('>', placeholderPos);
+    const contentsTagPos = pdf.indexOf("/Contents ", byteRangeEnd);
+    const placeholderPos = pdf.indexOf("<", contentsTagPos);
+    const placeholderEnd = pdf.indexOf(">", placeholderPos);
     const placeholderLengthWithBrackets = placeholderEnd + 1 - placeholderPos;
     const placeholderLength = placeholderLengthWithBrackets - 2;
     const byteRange = [0, 0, 0, 0];
     byteRange[1] = placeholderPos;
     byteRange[2] = byteRange[1] + placeholderLengthWithBrackets;
     byteRange[3] = pdf.length - byteRange[2];
-    let actualByteRange = `/ByteRange [${byteRange.join(' ')}]`;
-    actualByteRange += ' '.repeat(byteRangePlaceholder.length - actualByteRange.length); // Replace the /ByteRange placeholder with the actual ByteRange
+    let actualByteRange = `/ByteRange [${byteRange.join(" ")}]`;
+    actualByteRange += " ".repeat(byteRangePlaceholder.length - actualByteRange.length); // Replace the /ByteRange placeholder with the actual ByteRange
 
-    pdf = Buffer.concat([pdf.slice(0, byteRangePos), Buffer.from(actualByteRange), pdf.slice(byteRangeEnd)]); // Remove the placeholder signature
+    pdf = Buffer.concat([
+      pdf.slice(0, byteRangePos),
+      Buffer.from(actualByteRange),
+      pdf.slice(byteRangeEnd),
+    ]); // Remove the placeholder signature
 
-    pdf = Buffer.concat([pdf.slice(0, byteRange[1]), pdf.slice(byteRange[2], byteRange[2] + byteRange[3])]); // Convert Buffer P12 to a forge implementation.
+    pdf = Buffer.concat([
+      pdf.slice(0, byteRange[1]),
+      pdf.slice(byteRange[2], byteRange[2] + byteRange[3]),
+    ]); // Convert Buffer P12 to a forge implementation.
 
-    const forgeCert = _nodeForge.default.util.createBuffer(p12Buffer.toString('binary'));
+    const forgeCert = _nodeForge.default.util.createBuffer(p12Buffer.toString("binary"));
 
     const p12Asn1 = _nodeForge.default.asn1.fromDer(forgeCert);
 
-    const p12 = _nodeForge.default.pkcs12.pkcs12FromAsn1(p12Asn1, options.asn1StrictParsing, options.passphrase); // Extract safe bags by type.
+    const p12 = _nodeForge.default.pkcs12.pkcs12FromAsn1(
+      p12Asn1,
+      options.asn1StrictParsing,
+      options.passphrase
+    ); // Extract safe bags by type.
     // We will need all the certificates and the private key.
 
-
     const certBags = p12.getBags({
-      bagType: _nodeForge.default.pki.oids.certBag
+      bagType: _nodeForge.default.pki.oids.certBag,
     })[_nodeForge.default.pki.oids.certBag];
 
     const keyBags = p12.getBags({
-      bagType: _nodeForge.default.pki.oids.pkcs8ShroudedKeyBag
+      bagType: _nodeForge.default.pki.oids.pkcs8ShroudedKeyBag,
     })[_nodeForge.default.pki.oids.pkcs8ShroudedKeyBag];
 
     const privateKey = keyBags[0].key; // Here comes the actual PKCS#7 signing.
 
     const p7 = _nodeForge.default.pkcs7.createSignedData(); // Start off by setting the content.
 
-
-    p7.content = _nodeForge.default.util.createBuffer(pdf.toString('binary')); // Then add all the certificates (-cacerts & -clcerts)
+    p7.content = _nodeForge.default.util.createBuffer(pdf.toString("binary")); // Then add all the certificates (-cacerts & -clcerts)
     // Keep track of the last found client certificate.
     // This will be the public key that will be bundled in the signature.
 
     let certificate;
-    Object.keys(certBags).forEach(i => {
-      const {
-        publicKey
-      } = certBags[i].cert;
+    Object.keys(certBags).forEach((i) => {
+      const { publicKey } = certBags[i].cert;
       p7.addCertificate(certBags[i].cert); // Try to find the certificate that matches the private key.
 
       if (privateKey.n.compareTo(publicKey.n) === 0 && privateKey.e.compareTo(publicKey.e) === 0) {
@@ -137,57 +150,69 @@ class SignPdf {
       }
     });
 
-    if (typeof certificate === 'undefined') {
-      throw new _SignPdfError.default('Failed to find a certificate that matches the private key.', _SignPdfError.default.TYPE_INPUT);
+    if (typeof certificate === "undefined") {
+      throw new _SignPdfError.default(
+        "Failed to find a certificate that matches the private key.",
+        _SignPdfError.default.TYPE_INPUT
+      );
     } // Add a sha256 signer. That's what Adobe.PPKLite adbe.pkcs7.detached expects.
 
-
     p7.addSigner({
       key: privateKey,
       certificate,
       digestAlgorithm: _nodeForge.default.pki.oids.sha256,
-      authenticatedAttributes: [{
-        type: _nodeForge.default.pki.oids.contentType,
-        value: _nodeForge.default.pki.oids.data
-      }, {
-        type: _nodeForge.default.pki.oids.signingTime,
-        // value can also be auto-populated at signing time
-        // We may also support passing this as an option to sign().
-        // Would be useful to match the creation time of the document for example.
-        value: new Date()
-      }, {
-        type: _nodeForge.default.pki.oids.messageDigest // value will be auto-populated at signing time
-
-      }]
+      authenticatedAttributes: [
+        {
+          type: _nodeForge.default.pki.oids.contentType,
+          value: _nodeForge.default.pki.oids.data,
+        },
+        {
+          type: _nodeForge.default.pki.oids.signingTime,
+          // value can also be auto-populated at signing time
+          // We may also support passing this as an option to sign().
+          // Would be useful to match the creation time of the document for example.
+          value: new Date(),
+        },
+        {
+          type: _nodeForge.default.pki.oids.messageDigest, // value will be auto-populated at signing time
+        },
+      ],
     }); // Sign in detached mode.
 
     p7.sign({
-      detached: true
+      detached: true,
     }); // Check if the PDF has a good enough placeholder to fit the signature.
 
     const raw = _nodeForge.default.asn1.toDer(p7.toAsn1()).getBytes(); // placeholderLength represents the length of the HEXified symbols but we're
     // checking the actual lengths.
 
-
     if (raw.length * 2 > placeholderLength) {
-      throw new _SignPdfError.default(`Signature exceeds placeholder length: ${raw.length * 2} > ${placeholderLength}`, _SignPdfError.default.TYPE_INPUT);
+      throw new _SignPdfError.default(
+        `Signature exceeds placeholder length: ${raw.length * 2} > ${placeholderLength}`,
+        _SignPdfError.default.TYPE_INPUT
+      );
     }
 
-    let signature = Buffer.from(raw, 'binary').toString('hex'); // Store the HEXified signature. At least useful in tests.
+    let signature = Buffer.from(raw, "binary").toString("hex"); // Store the HEXified signature. At least useful in tests.
 
     this.lastSignature = signature; // Pad the signature with zeroes so the it is the same length as the placeholder
 
-    signature += Buffer.from(String.fromCharCode(0).repeat(placeholderLength / 2 - raw.length)).toString('hex'); // Place it in the document.
+    signature += Buffer.from(
+      String.fromCharCode(0).repeat(placeholderLength / 2 - raw.length)
+    ).toString("hex"); // Place it in the document.
 
-    pdf = Buffer.concat([pdf.slice(0, byteRange[1]), Buffer.from(`<${signature}>`), pdf.slice(byteRange[1])]); // Magic. Done.
+    pdf = Buffer.concat([
+      pdf.slice(0, byteRange[1]),
+      Buffer.from(`<${signature}>`),
+      pdf.slice(byteRange[1]),
+    ]); // Magic. Done.
 
     return pdf;
   }
-
 }
 
 exports.SignPdf = SignPdf;
 
 var _default = new SignPdf();
 
-exports.default = _default;
\ No newline at end of file
+exports.default = _default;
diff --git a/packages/ui/components/breadcrumb/breadcrumb.tsx b/packages/ui/components/breadcrumb/breadcrumb.tsx
index 1313d322e..d256908c3 100644
--- a/packages/ui/components/breadcrumb/breadcrumb.tsx
+++ b/packages/ui/components/breadcrumb/breadcrumb.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
 import Link from "next/link";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
 
 export function Breadcrumb(props: any) {
   return (
@@ -8,12 +8,9 @@ export function Breadcrumb(props: any) {
       <nav className="sm:hidden" aria-label="Back">
         <Link
           href={
-            props.items.length > 1
-              ? props.items[props.items.length - 2].href
-              : props.items[0].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"
-        >
+          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"
@@ -37,8 +34,7 @@ export function Breadcrumb(props: any) {
                 <div className="flex">
                   <Link
                     href={item.href}
-                    className="text-sm font-medium text-gray-500 hover:text-gray-700"
-                  >
+                    className="text-sm font-medium text-gray-500 hover:text-gray-700">
                     {item.title}
                   </Link>
                 </div>
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index d695049e3..fae2fd716 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -1,6 +1,6 @@
-import { classNames } from "@documenso/lib";
-import Link from "next/link";
 import React from "react";
+import Link from "next/link";
+import { classNames } from "@documenso/lib";
 
 export function Button(props: any) {
   const isLink = typeof props.href !== "undefined" && !props.disabled;
@@ -8,8 +8,7 @@ export function Button(props: any) {
   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";
   const primaryStyles = "text-white bg-neon hover:bg-neon-dark";
-  const secondaryStyles =
-    "border-gray-300 bg-white text-gray-700 hover:bg-gray-50";
+  const secondaryStyles = "border-gray-300 bg-white text-gray-700 hover:bg-gray-50";
 
   return isLink ? (
     <Link
@@ -20,13 +19,9 @@ export function Button(props: any) {
         color === "primary" ? primaryStyles : secondaryStyles,
         props.className
       )}
-      hidden={props.hidden}
-    >
+      hidden={props.hidden}>
       {props.icon ? (
-        <props.icon
-          className="inline h-5 mr-1 text-inherit"
-          aria-hidden="true"
-        ></props.icon>
+        <props.icon className="mr-1 inline h-5 text-inherit" aria-hidden="true"></props.icon>
       ) : (
         ""
       )}
@@ -43,13 +38,9 @@ export function Button(props: any) {
       )}
       onClick={props.onClick}
       disabled={props.disabled || props.loading}
-      hidden={props.hidden}
-    >
+      hidden={props.hidden}>
       {props.icon ? (
-        <props.icon
-          className="inline h-5 mr-1 text-inherit"
-          aria-hidden="true"
-        ></props.icon>
+        <props.icon className="mr-1 inline h-5 text-inherit" aria-hidden="true"></props.icon>
       ) : (
         ""
       )}
diff --git a/packages/ui/components/button/IconButton.tsx b/packages/ui/components/button/IconButton.tsx
index e58dea539..2793b6359 100644
--- a/packages/ui/components/button/IconButton.tsx
+++ b/packages/ui/components/button/IconButton.tsx
@@ -1,6 +1,6 @@
-import { classNames } from "@documenso/lib";
-import Link from "next/link";
 import React from "react";
+import Link from "next/link";
+import { classNames } from "@documenso/lib";
 
 export function IconButton(props: any) {
   const isLink = typeof props.href !== "undefined";
@@ -18,13 +18,9 @@ export function IconButton(props: any) {
         color === "primary" ? primaryStyles : secondaryStyles,
         props.className
       )}
-      hidden={props.hidden}
-    >
+      hidden={props.hidden}>
       {props.icon ? (
-        <props.icon
-          className="inline text-inherit h-6 mr-1"
-          aria-hidden="true"
-        ></props.icon>
+        <props.icon className="mr-1 inline h-6 text-inherit" aria-hidden="true"></props.icon>
       ) : (
         ""
       )}
@@ -40,13 +36,9 @@ export function IconButton(props: any) {
       )}
       onClick={props.onClick}
       disabled={props.disabled}
-      hidden={props.hidden}
-    >
+      hidden={props.hidden}>
       {props.icon ? (
-        <props.icon
-          className="inline text-inherit h-6 mr-1"
-          aria-hidden="true"
-        ></props.icon>
+        <props.icon className="mr-1 inline h-6 text-inherit" aria-hidden="true"></props.icon>
       ) : (
         ""
       )}
diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index 5490cfa02..07c92686b 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import { Transition, Dialog as DialogComponent } from "@headlessui/react";
 import { Fragment } from "react";
-import { Button } from "@documenso/ui";
 import { sendSigningRequests } from "@documenso/lib/api";
+import { Button } from "@documenso/ui";
+import { Dialog as DialogComponent, Transition } from "@headlessui/react";
 import { Document as PrismaDocument } from "@prisma/client";
 
 type FormValue = {
@@ -44,13 +44,12 @@ export function Dialog({
           enterTo="opacity-100"
           leave="ease-in duration-200"
           leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
+          leaveTo="opacity-0">
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex items-end justify-center min-h-full p-4 text-center sm:items-center sm:p-0">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
             <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
@@ -58,18 +57,16 @@ export function Dialog({
               enterTo="opacity-100 translate-y-0 sm:scale-100"
               leave="ease-in duration-200"
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <DialogComponent.Panel className="relative px-4 pt-5 pb-4 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+              <DialogComponent.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
                 <div>
-                  <div className="flex items-center justify-center w-12 h-12 mx-auto bg-green-100 rounded-full">
+                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
                     {icon}
                   </div>
                   <div className="mt-3 text-center sm:mt-5">
                     <DialogComponent.Title
                       as="h3"
-                      className="text-lg font-medium leading-6 text-gray-900"
-                    >
+                      className="text-lg font-medium leading-6 text-gray-900">
                       {title}
                     </DialogComponent.Title>
                     <div className="mt-2">
@@ -79,7 +76,7 @@ export function Dialog({
                     </div>
                   </div>
                 </div>
-                <div className="flex justify-end gap-3 mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:flex-none ">
+                <div className="mt-5 flex justify-end gap-3 sm:mt-6 sm:grid sm:flex-none sm:grid-flow-row-dense sm:grid-cols-2 ">
                   <Button color="secondary" onClick={() => setOpen(false)}>
                     Cancel
                   </Button>
@@ -90,8 +87,7 @@ export function Dialog({
                       sendSigningRequests(document).finally(() => {
                         setLoading(false);
                       });
-                    }}
-                  >
+                    }}>
                     Send
                   </Button>
                 </div>
diff --git a/packages/ui/components/selectBox/SelectBox.tsx b/packages/ui/components/selectBox/SelectBox.tsx
index 91f5e3b13..cfab5b18b 100644
--- a/packages/ui/components/selectBox/SelectBox.tsx
+++ b/packages/ui/components/selectBox/SelectBox.tsx
@@ -1,7 +1,7 @@
+import React, { Fragment, useState } from "react";
 import { classNames } from "@documenso/lib";
 import { Listbox, Transition } from "@headlessui/react";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
-import React, { Fragment, useState } from "react";
 
 export function SelectBox(props: any) {
   return (
@@ -10,21 +10,17 @@ export function SelectBox(props: any) {
         value={props.value}
         onChange={(e) => {
           props.onChange(e);
-        }}
-      >
+        }}>
         {({ open }) => (
           <>
             <Listbox.Label className="block text-sm font-medium text-gray-700">
               {props.label}
             </Listbox.Label>
             <div className="relative mt-1">
-              <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">
+              <Listbox.Button className="focus:border-neon focus:ring-neon relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:outline-none focus:ring-1 sm:text-sm">
                 <span className="block truncate">{props?.value?.label}</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"
-                  />
+                  <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
                 </span>
               </Listbox.Button>
 
@@ -33,28 +29,25 @@ export function SelectBox(props: any) {
                 as={Fragment}
                 leave="transition ease-in duration-100"
                 leaveFrom="opacity-100"
-                leaveTo="opacity-0"
-              >
+                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.options.map((option: any) => (
                     <Listbox.Option
                       key={option.value}
                       className={({ active }) =>
                         classNames(
-                          active ? "text-white bg-neon" : "text-gray-900",
+                          active ? "bg-neon text-white" : "text-gray-900",
                           "relative cursor-default select-none py-2 pl-3 pr-9"
                         )
                       }
-                      value={option}
-                    >
+                      value={option}>
                       {({ selected, active }) => (
                         <>
                           <span
                             className={classNames(
                               selected ? "font-semibold" : "font-normal",
                               "block truncate"
-                            )}
-                          >
+                            )}>
                             {option.label}
                           </span>
 
@@ -63,12 +56,8 @@ export function SelectBox(props: any) {
                               className={classNames(
                                 active ? "text-white" : "text-neon",
                                 "absolute inset-y-0 right-0 flex items-center pr-4"
-                              )}
-                            >
-                              <CheckIcon
-                                className="h-5 w-5"
-                                aria-hidden="true"
-                              />
+                              )}>
+                              <CheckIcon className="h-5 w-5" aria-hidden="true" />
                             </span>
                           ) : null}
                         </>
diff --git a/prettier.config.js b/prettier.config.js
new file mode 100644
index 000000000..5b00582d6
--- /dev/null
+++ b/prettier.config.js
@@ -0,0 +1,26 @@
+module.exports = {
+  bracketSpacing: true,
+  bracketSameLine: true,
+  singleQuote: false,
+  jsxSingleQuote: false,
+  trailingComma: "es5",
+  semi: true,
+  printWidth: 100,
+  arrowParens: "always",
+  importOrder: [
+    "^(react/(.*)$)|^(react$)",
+    "^(next/(.*)$)|^(next$)",
+    "^@documenso/(.*)$",
+    "<THIRD_PARTY_MODULES>",
+    "",
+    "^[./]",
+  ],
+  importOrderSeparation: false,
+  importOrderSortSpecifiers: true,
+  importOrderBuiltinModulesToTop: true,
+  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
+  importOrderMergeDuplicateImports: true,
+  importOrderCombineTypeAndValueImports: true,
+
+  plugins: ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
+};