From 193325717d7970a99bfb79be92a845966d9f030e Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Wed, 23 Apr 2025 21:40:42 +1000
Subject: [PATCH 1/4] fix: rework fields (#1697)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rework:
- Field styling to improve visibility
- Field insertions, better alignment, centering and overflows

## Changes

General changes:

- Set default text alignment to left if no meta found
- Reduce borders and rings around fields to allow smaller fields
- Removed lots of redundant duplicated code surrounding field rendering
- Make fields more consistent across viewing, editing and signing
- Add more transparency to fields to allow users to see under fields
- No more optional/required/etc colors when signing, required fields
will be highlighted as orange when form is "validating"

Highlighted internal changes:

- Utilize native PDF fields to insert text, instead of drawing text
- Change font auto scaling to only apply to when the height overflows
AND no custom font is set

⚠️ Multiline changes:

Multi line is enabled for a field under these conditions

1. Field content exceeds field width
2. Field includes a new line
3. Field type is TEXT

## [BEFORE] Field UI Signing


![image](https://github.com/user-attachments/assets/ea002743-faeb-477c-a239-3ed240b54f55)

## [AFTER] Field UI Signing


![image](https://github.com/user-attachments/assets/0f8eb252-4cf3-4d96-8d4f-cd085881b78c)

## [BEFORE] Signing a checkbox


![image](https://github.com/user-attachments/assets/4567d745-e1da-4202-a758-5d3c178c930e)

![image](https://github.com/user-attachments/assets/c25068e7-fe80-40f5-b63a-e8a0d4b38b6c)

## [AFTER] Signing a checkbox


![image](https://github.com/user-attachments/assets/effa5e3d-385a-4c35-bc8a-405386dd27d6)

![image](https://github.com/user-attachments/assets/64be34a9-0b32-424d-9264-15361c03eca5)

## [BEFORE] What a 2nd recipient sees once someone else signed a
document


![image](https://github.com/user-attachments/assets/21c21ae2-fc62-4ccc-880a-46aab012aa70)

## [AFTER] What a 2nd recipient sees once someone else signed a document


![image](https://github.com/user-attachments/assets/ae51677b-f1d5-4008-a7fd-756533166542)

## **[BEFORE]** Inserting fields


![image](https://github.com/user-attachments/assets/1a8bb8da-9a15-4deb-bc28-eb349414465c)

## **[AFTER]** Inserting fields


![image](https://github.com/user-attachments/assets/c52c5238-9836-45aa-b8a4-bc24a3462f40)

## Overflows, multilines and field alignments testing

Debugging borders:
- Red border = The original field placement without any modifications
- Blue border = The available space to overflow

### Single line overflows and field alignments

This is left aligned fields, overflow will always go to the end of the
page and will not wrap


![image](https://github.com/user-attachments/assets/47003658-783e-4f9c-adbf-c4686804d98f)

This is center aligned fields, the max width is the closest edge to the
page * 2


![image](https://github.com/user-attachments/assets/05a38093-75d6-4600-bae2-21ecff63e115)

This is right aligned text, the width will extend all the way to the
left hand side of the page


![image](https://github.com/user-attachments/assets/6a9d84a8-4166-4626-9fb3-1577fac2571e)

### Multiline line overflows and field alignments

These are text fields that can be overflowed


![image](https://github.com/user-attachments/assets/f7b5456e-2c49-48b2-8d4c-ab1dc3401644)

Another example of left aligned text overflows with more text


![image](https://github.com/user-attachments/assets/3db6b35e-4c8d-4ffe-8036-0da760d9c167)
---
 .../dialogs/template-bulk-send-dialog.tsx     |   2 +-
 .../embed/authoring/configure-fields-view.tsx |   6 +-
 .../embed/embed-document-signing-page.tsx     |   2 +-
 .../direct-template-configure-form.tsx        |  23 +-
 .../document-signing-checkbox-field.tsx       |  42 +-
 .../document-signing-complete-dialog.tsx      |   2 +-
 .../document-signing-date-field.tsx           |  10 +-
 .../document-signing-dropdown-field.tsx       |  10 +-
 .../document-signing-email-field.tsx          |  35 +-
 .../document-signing-field-container.tsx      |  52 ++-
 .../document-signing-fields.tsx               |  51 +++
 .../document-signing-initials-field.tsx       |  24 +-
 .../document-signing-name-field.tsx           |  39 +-
 .../document-signing-number-field.tsx         |  47 +--
 .../document-signing-page-view.tsx            |   8 +-
 .../document-signing-radio-field.tsx          |  48 ++-
 .../document-signing-signature-field.tsx      |   6 +-
 .../document-signing-text-field.tsx           |  61 +--
 .../document/document-read-only-fields.tsx    | 171 --------
 .../general/legacy-field-warning-popover.tsx  | 112 +++++
 .../_authenticated+/documents.$id._index.tsx  |  12 +-
 .../_authenticated+/documents.$id.edit.tsx    |  55 ++-
 .../_authenticated+/templates.$id._index.tsx  |   5 +-
 .../_authenticated+/templates.$id.edit.tsx    |   9 +-
 .../internal/seal-document.handler.ts         |   5 +-
 .../lib/server-only/document/seal-document.ts |   5 +-
 .../server-only/document/update-document.ts   |   5 +-
 .../server-only/pdf/insert-field-in-pdf.ts    | 310 ++++++++++++--
 .../pdf/legacy-insert-field-in-pdf.ts         | 395 ++++++++++++++++++
 .../create-document-from-template-legacy.ts   |   1 +
 .../template/create-document-from-template.ts |   1 +
 .../server-only/template/update-template.ts   |   2 +
 packages/lib/types/document.ts                |   2 +
 packages/lib/types/template.ts                |   2 +
 .../migration.sql                             |   5 +
 .../migration.sql                             |   5 +
 packages/prisma/schema.prisma                 |  11 +-
 packages/tailwind-config/index.cjs            |   8 +
 .../document-router/update-document.types.ts  |   1 +
 .../trpc/server/template-router/schema.ts     |   1 +
 .../document/document-read-only-fields.tsx    | 170 ++++++++
 packages/ui/components/field/field.tsx        | 106 ++---
 packages/ui/lib/recipient-colors.ts           |  95 +++++
 packages/ui/lib/signer-colors.ts              | 108 -----
 .../primitives/document-flow/add-fields.tsx   |  24 +-
 .../primitives/document-flow/add-settings.tsx |  16 +-
 .../primitives/document-flow/add-signers.tsx  |  16 +-
 .../primitives/document-flow/add-subject.tsx  |  16 +-
 .../advanced-fields/checkbox.tsx              |  46 --
 .../document-flow/advanced-fields/radio.tsx   |  49 ---
 .../document-flow/field-content.tsx           | 188 +++++++++
 .../primitives/document-flow/field-icon.tsx   |  72 ----
 .../field-item-advanced-settings.tsx          |  12 +-
 .../primitives/document-flow/field-item.tsx   |  73 ++--
 .../document-flow/show-field-item.tsx         |  49 ---
 packages/ui/primitives/element-visible.tsx    |   7 +-
 packages/ui/primitives/popover.tsx            |   5 +-
 packages/ui/primitives/recipient-selector.tsx |  10 +-
 .../template-flow/add-template-fields.tsx     | 176 ++++----
 .../add-template-placeholder-recipients.tsx   |  17 +-
 .../template-flow/add-template-settings.tsx   |  16 +-
 packages/ui/styles/theme.css                  |  27 +-
 62 files changed, 1819 insertions(+), 1070 deletions(-)
 create mode 100644 apps/remix/app/components/general/document-signing/document-signing-fields.tsx
 delete mode 100644 apps/remix/app/components/general/document/document-read-only-fields.tsx
 create mode 100644 apps/remix/app/components/general/legacy-field-warning-popover.tsx
 create mode 100644 packages/lib/server-only/pdf/legacy-insert-field-in-pdf.ts
 create mode 100644 packages/prisma/migrations/20250423062206_add_legacy_field_insertion_column/migration.sql
 create mode 100644 packages/prisma/migrations/20250423062248_set_legacy_field_insert_default_to_false/migration.sql
 create mode 100644 packages/ui/components/document/document-read-only-fields.tsx
 create mode 100644 packages/ui/lib/recipient-colors.ts
 delete mode 100644 packages/ui/lib/signer-colors.ts
 delete mode 100644 packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx
 delete mode 100644 packages/ui/primitives/document-flow/advanced-fields/radio.tsx
 create mode 100644 packages/ui/primitives/document-flow/field-content.tsx
 delete mode 100644 packages/ui/primitives/document-flow/field-icon.tsx
 delete mode 100644 packages/ui/primitives/document-flow/show-field-item.tsx

diff --git a/apps/remix/app/components/dialogs/template-bulk-send-dialog.tsx b/apps/remix/app/components/dialogs/template-bulk-send-dialog.tsx
index d210550c6..cd700ac1e 100644
--- a/apps/remix/app/components/dialogs/template-bulk-send-dialog.tsx
+++ b/apps/remix/app/components/dialogs/template-bulk-send-dialog.tsx
@@ -114,7 +114,7 @@ export const TemplateBulkSendDialog = ({
     <Dialog>
       <DialogTrigger asChild>
         {trigger ?? (
-          <Button>
+          <Button variant="outline">
             <Upload className="mr-2 h-4 w-4" />
             <Trans>Bulk Send via CSV</Trans>
           </Button>
diff --git a/apps/remix/app/components/embed/authoring/configure-fields-view.tsx b/apps/remix/app/components/embed/authoring/configure-fields-view.tsx
index 24b4801c1..68d833d38 100644
--- a/apps/remix/app/components/embed/authoring/configure-fields-view.tsx
+++ b/apps/remix/app/components/embed/authoring/configure-fields-view.tsx
@@ -16,7 +16,7 @@ import { type TFieldMetaSchema, ZFieldMetaSchema } from '@documenso/lib/types/fi
 import { base64 } from '@documenso/lib/universal/base64';
 import { nanoid } from '@documenso/lib/universal/id';
 import { ADVANCED_FIELD_TYPES_WITH_OPTIONAL_SETTING } from '@documenso/lib/utils/advanced-fields-helpers';
-import { useSignerColors } from '@documenso/ui/lib/signer-colors';
+import { useRecipientColors } from '@documenso/ui/lib/recipient-colors';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { FieldItem } from '@documenso/ui/primitives/document-flow/field-item';
@@ -162,7 +162,7 @@ export const ConfigureFieldsView = ({
   });
 
   const selectedRecipientIndex = recipients.findIndex((r) => r.id === selectedRecipient?.id);
-  const selectedSignerStyles = useSignerColors(
+  const selectedRecipientStyles = useRecipientColors(
     selectedRecipientIndex === -1 ? 0 : selectedRecipientIndex,
   );
 
@@ -505,7 +505,7 @@ export const ConfigureFieldsView = ({
               <div
                 className={cn(
                   'text-muted-foreground dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center bg-white transition duration-200 [container-type:size]',
-                  selectedSignerStyles.default.base,
+                  selectedRecipientStyles.base,
                   {
                     '-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,
                     'dark:text-black/60': isFieldWithinBounds,
diff --git a/apps/remix/app/components/embed/embed-document-signing-page.tsx b/apps/remix/app/components/embed/embed-document-signing-page.tsx
index 31cbe3b0d..e125b2b4a 100644
--- a/apps/remix/app/components/embed/embed-document-signing-page.tsx
+++ b/apps/remix/app/components/embed/embed-document-signing-page.tsx
@@ -20,6 +20,7 @@ import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields
 import { validateFieldsInserted } from '@documenso/lib/utils/fields';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
 import { trpc } from '@documenso/trpc/react';
+import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { Button } from '@documenso/ui/primitives/button';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
@@ -37,7 +38,6 @@ import { ZSignDocumentEmbedDataSchema } from '../../types/embed-document-sign-sc
 import { useRequiredDocumentSigningContext } from '../general/document-signing/document-signing-provider';
 import { DocumentSigningRecipientProvider } from '../general/document-signing/document-signing-recipient-provider';
 import { DocumentSigningRejectDialog } from '../general/document-signing/document-signing-reject-dialog';
-import { DocumentReadOnlyFields } from '../general/document/document-read-only-fields';
 import { EmbedClientLoading } from './embed-client-loading';
 import { EmbedDocumentCompleted } from './embed-document-completed';
 import { EmbedDocumentFields } from './embed-document-fields';
diff --git a/apps/remix/app/components/general/direct-template/direct-template-configure-form.tsx b/apps/remix/app/components/general/direct-template/direct-template-configure-form.tsx
index 27b01e963..39272b3b1 100644
--- a/apps/remix/app/components/general/direct-template/direct-template-configure-form.tsx
+++ b/apps/remix/app/components/general/direct-template/direct-template-configure-form.tsx
@@ -9,6 +9,10 @@ import { z } from 'zod';
 
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import type { TTemplate } from '@documenso/lib/types/template';
+import {
+  DocumentReadOnlyFields,
+  mapFieldsWithRecipients,
+} from '@documenso/ui/components/document/document-read-only-fields';
 import {
   DocumentFlowFormContainerActions,
   DocumentFlowFormContainerContent,
@@ -16,7 +20,6 @@ import {
   DocumentFlowFormContainerHeader,
   DocumentFlowFormContainerStep,
 } from '@documenso/ui/primitives/document-flow/document-flow-root';
-import { ShowFieldItem } from '@documenso/ui/primitives/document-flow/show-field-item';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
 import {
   Form,
@@ -97,14 +100,16 @@ export const DirectTemplateConfigureForm = ({
       <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
 
       <DocumentFlowFormContainerContent>
-        {isDocumentPdfLoaded &&
-          directTemplateRecipient.fields.map((field, index) => (
-            <ShowFieldItem
-              key={index}
-              field={field}
-              recipients={recipientsWithBlankDirectRecipientEmail}
-            />
-          ))}
+        {isDocumentPdfLoaded && (
+          <DocumentReadOnlyFields
+            fields={mapFieldsWithRecipients(
+              directTemplateRecipient.fields,
+              recipientsWithBlankDirectRecipientEmail,
+            )}
+            recipientIds={recipients.map((recipient) => recipient.id)}
+            showRecipientColors={true}
+          />
+        )}
 
         <Form {...form}>
           <fieldset
diff --git a/apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx
index dcd8edc1c..fa2be505d 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx
@@ -97,6 +97,12 @@ export const DocumentSigningCheckboxField = ({
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
+      // Do nothing, this should only happen when the user clicks the field, but
+      // misses the checkbox which triggers this callback.
+      if (checkedValues.length === 0) {
+        return;
+      }
+
       if (!isLengthConditionMet) {
         return;
       }
@@ -270,21 +276,26 @@ export const DocumentSigningCheckboxField = ({
               {validationSign?.label} {checkboxValidationLength}
             </FieldToolTip>
           )}
-          <div className="z-50 flex flex-col gap-y-2">
+          <div className="z-50 my-0.5 flex flex-col gap-y-1">
             {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
               const itemValue = item.value || `empty-value-${item.id}`;
 
               return (
-                <div key={index} className="flex items-center gap-x-1.5">
+                <div key={index} className="flex items-center">
                   <Checkbox
-                    className="h-4 w-4"
-                    id={`checkbox-${index}`}
+                    className="h-3 w-3"
+                    id={`checkbox-${field.id}-${item.id}`}
                     checked={checkedValues.includes(itemValue)}
                     onCheckedChange={() => handleCheckboxChange(item.value, item.id)}
                   />
-                  <Label htmlFor={`checkbox-${index}`}>
-                    {item.value.includes('empty-value-') ? '' : item.value}
-                  </Label>
+                  {!item.value.includes('empty-value-') && item.value && (
+                    <Label
+                      htmlFor={`checkbox-${field.id}-${item.id}`}
+                      className="text-foreground ml-1.5 text-xs font-normal"
+                    >
+                      {item.value}
+                    </Label>
+                  )}
                 </div>
               );
             })}
@@ -293,22 +304,27 @@ export const DocumentSigningCheckboxField = ({
       )}
 
       {field.inserted && (
-        <div className="flex flex-col gap-y-1">
+        <div className="my-0.5 flex flex-col gap-y-1">
           {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
             const itemValue = item.value || `empty-value-${item.id}`;
 
             return (
-              <div key={index} className="flex items-center gap-x-1.5">
+              <div key={index} className="flex items-center">
                 <Checkbox
                   className="h-3 w-3"
-                  id={`checkbox-${index}`}
+                  id={`checkbox-${field.id}-${item.id}`}
                   checked={parsedCheckedValues.includes(itemValue)}
                   disabled={isLoading}
                   onCheckedChange={() => void handleCheckboxOptionClick(item)}
                 />
-                <Label htmlFor={`checkbox-${index}`} className="text-xs">
-                  {item.value.includes('empty-value-') ? '' : item.value}
-                </Label>
+                {!item.value.includes('empty-value-') && item.value && (
+                  <Label
+                    htmlFor={`checkbox-${field.id}-${item.id}`}
+                    className="text-foreground ml-1.5 text-xs font-normal"
+                  >
+                    {item.value}
+                  </Label>
+                )}
               </div>
             );
           })}
diff --git a/apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx b/apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx
index 6dd9ba3e6..a14f9719c 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx
@@ -281,7 +281,7 @@ export const DocumentSigningCompleteDialog = ({
                 <div className="flex w-full flex-1 flex-nowrap gap-4">
                   <Button
                     type="button"
-                    className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                    className="flex-1"
                     variant="secondary"
                     onClick={() => setShowDialog(false)}
                     disabled={form.formState.isSubmitting}
diff --git a/apps/remix/app/components/general/document-signing/document-signing-date-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-date-field.tsx
index 09a816b5b..2f507e637 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-date-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-date-field.tsx
@@ -142,7 +142,7 @@ export const DocumentSigningDateField = ({
       )}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
+        <p className="group-hover:text-primary text-foreground group-hover:text-recipient-green text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
           <Trans>Date</Trans>
         </p>
       )}
@@ -151,12 +151,10 @@ export const DocumentSigningDateField = ({
         <div className="flex h-full w-full items-center">
           <p
             className={cn(
-              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              'text-foreground w-full whitespace-nowrap text-left text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
               {
-                'text-left': parsedFieldMeta?.textAlign === 'left',
-                'text-center':
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
-                'text-right': parsedFieldMeta?.textAlign === 'right',
+                '!text-center': parsedFieldMeta?.textAlign === 'center',
+                '!text-right': parsedFieldMeta?.textAlign === 'right',
               },
             )}
           >
diff --git a/apps/remix/app/components/general/document-signing/document-signing-dropdown-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-dropdown-field.tsx
index b2d5a4b0f..3c567c32e 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-dropdown-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-dropdown-field.tsx
@@ -177,15 +177,11 @@ export const DocumentSigningDropdownField = ({
         )}
 
         {!field.inserted && (
-          <p className="group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200">
+          <p className="group-hover:text-primary text-foreground flex flex-col items-center justify-center duration-200">
             <Select value={localChoice} onValueChange={handleSelectItem}>
               <SelectTrigger
                 className={cn(
-                  'text-muted-foreground z-10 h-full w-full border-none ring-0 focus:ring-0',
-                  {
-                    'hover:text-red-300': parsedFieldMeta.required,
-                    'hover:text-yellow-300': !parsedFieldMeta.required,
-                  },
+                  'text-foreground z-10 h-full w-full border-none ring-0 focus:border-none focus:ring-0',
                 )}
               >
                 <SelectValue
@@ -205,7 +201,7 @@ export const DocumentSigningDropdownField = ({
         )}
 
         {field.inserted && (
-          <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+          <p className="text-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
             {field.customText}
           </p>
         )}
diff --git a/apps/remix/app/components/general/document-signing/document-signing-email-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-email-field.tsx
index a7ebc1dbe..3cfd1b236 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-email-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-email-field.tsx
@@ -1,7 +1,6 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -14,10 +13,14 @@ import type {
   TRemovedSignedFieldWithTokenMutationSchema,
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
-import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import {
+  DocumentSigningFieldsInserted,
+  DocumentSigningFieldsLoader,
+  DocumentSigningFieldsUninserted,
+} from './document-signing-fields';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
@@ -120,34 +123,18 @@ export const DocumentSigningEmailField = ({
 
   return (
     <DocumentSigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Email">
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
+      {isLoading && <DocumentSigningFieldsLoader />}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
+        <DocumentSigningFieldsUninserted>
           <Trans>Email</Trans>
-        </p>
+        </DocumentSigningFieldsUninserted>
       )}
 
       {field.inserted && (
-        <div className="flex h-full w-full items-center">
-          <p
-            className={cn(
-              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
-              {
-                'text-left': parsedFieldMeta?.textAlign === 'left',
-                'text-center':
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
-                'text-right': parsedFieldMeta?.textAlign === 'right',
-              },
-            )}
-          >
-            {field.customText}
-          </p>
-        </div>
+        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
+          {field.customText}
+        </DocumentSigningFieldsInserted>
       )}
     </DocumentSigningFieldContainer>
   );
diff --git a/apps/remix/app/components/general/document-signing/document-signing-field-container.tsx b/apps/remix/app/components/general/document-signing/document-signing-field-container.tsx
index 14fe95c44..f0fd84c3c 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-field-container.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-field-container.tsx
@@ -2,12 +2,14 @@ import React from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import { FieldType } from '@prisma/client';
+import { TooltipArrow } from '@radix-ui/react-tooltip';
 import { X } from 'lucide-react';
 
 import { type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { FieldRootContainer } from '@documenso/ui/components/field/field';
+import { RECIPIENT_COLOR_STYLES } from '@documenso/ui/lib/recipient-colors';
 import { cn } from '@documenso/ui/lib/utils';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
@@ -128,57 +130,51 @@ export const DocumentSigningFieldContainer = ({
   };
 
   return (
-    <div className={cn('[container-type:size]', { group: type === 'Checkbox' })}>
-      <FieldRootContainer field={field}>
+    <div className={cn('[container-type:size]')}>
+      <FieldRootContainer color={RECIPIENT_COLOR_STYLES.green} field={field}>
         {!field.inserted && !loading && !readOnlyField && (
           <button
             type="submit"
-            className="absolute inset-0 z-10 h-full w-full rounded-md border"
+            className="absolute inset-0 z-10 h-full w-full rounded-[2px]"
             onClick={async () => handleInsertField()}
           />
         )}
 
         {readOnlyField && (
           <button className="bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100">
-            <span className="bg-foreground/50 dark:bg-background/50 text-background dark:text-foreground rounded-xl p-2">
+            <span className="bg-foreground/50 text-background rounded-xl p-2">
               <Trans>Read only field</Trans>
             </span>
           </button>
         )}
 
-        {type === 'Date' && field.inserted && !loading && !readOnlyField && (
-          <Tooltip delayDuration={0}>
-            <TooltipTrigger asChild>
-              <button
-                className="text-destructive bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100"
-                onClick={onRemoveSignedFieldClick}
-              >
-                <Trans>Remove</Trans>
-              </button>
-            </TooltipTrigger>
-
-            {tooltipText && <TooltipContent className="max-w-xs">{tooltipText}</TooltipContent>}
-          </Tooltip>
-        )}
-
         {type === 'Checkbox' && field.inserted && !loading && !readOnlyField && (
           <button
-            className="dark:bg-background absolute -bottom-10 flex items-center justify-evenly rounded-md border bg-gray-900 opacity-0 group-hover:opacity-100"
+            className="absolute -bottom-10 flex items-center justify-evenly rounded-md border bg-gray-900 opacity-0 group-hover:opacity-100"
             onClick={() => void onClearCheckBoxValues(type)}
           >
-            <span className="dark:text-muted-foreground/50 dark:hover:text-muted-foreground dark:hover:bg-foreground/10 rounded-md p-1 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100">
+            <span className="rounded-md p-1 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100">
               <X className="h-4 w-4" />
             </span>
           </button>
         )}
 
-        {type !== 'Date' && type !== 'Checkbox' && field.inserted && !loading && !readOnlyField && (
-          <button
-            className="text-destructive bg-background/50 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100"
-            onClick={onRemoveSignedFieldClick}
-          >
-            <Trans>Remove</Trans>
-          </button>
+        {type !== 'Checkbox' && field.inserted && !loading && !readOnlyField && (
+          <Tooltip delayDuration={0}>
+            <TooltipTrigger asChild>
+              <button className="absolute inset-0 z-10" onClick={onRemoveSignedFieldClick}></button>
+            </TooltipTrigger>
+
+            <TooltipContent
+              className="border-0 bg-orange-300 fill-orange-300 font-bold text-orange-900"
+              sideOffset={2}
+            >
+              {tooltipText && <p>{tooltipText}</p>}
+
+              <Trans>Remove</Trans>
+              <TooltipArrow />
+            </TooltipContent>
+          </Tooltip>
         )}
 
         {(field.type === FieldType.RADIO || field.type === FieldType.CHECKBOX) &&
diff --git a/apps/remix/app/components/general/document-signing/document-signing-fields.tsx b/apps/remix/app/components/general/document-signing/document-signing-fields.tsx
new file mode 100644
index 000000000..99e1bc8e1
--- /dev/null
+++ b/apps/remix/app/components/general/document-signing/document-signing-fields.tsx
@@ -0,0 +1,51 @@
+import { Loader } from 'lucide-react';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+export const DocumentSigningFieldsLoader = () => {
+  return (
+    <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+      <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+    </div>
+  );
+};
+
+export const DocumentSigningFieldsUninserted = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <p className="group-hover:text-primary text-foreground group-hover:text-recipient-green text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+      {children}
+    </p>
+  );
+};
+
+type DocumentSigningFieldsInsertedProps = {
+  children: React.ReactNode;
+
+  /**
+   * The text alignment of the field.
+   *
+   * Defaults to left.
+   */
+  textAlign?: 'left' | 'center' | 'right';
+};
+
+export const DocumentSigningFieldsInserted = ({
+  children,
+  textAlign = 'left',
+}: DocumentSigningFieldsInsertedProps) => {
+  return (
+    <div className="flex h-full w-full items-center">
+      <p
+        className={cn(
+          'text-foreground w-full text-left text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+          {
+            '!text-center': textAlign === 'center',
+            '!text-right': textAlign === 'right',
+          },
+        )}
+      >
+        {children}
+      </p>
+    </div>
+  );
+};
diff --git a/apps/remix/app/components/general/document-signing/document-signing-initials-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-initials-field.tsx
index 532b0cc4b..a3bdc47c2 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-initials-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-initials-field.tsx
@@ -1,12 +1,12 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { ZInitialsFieldMeta } from '@documenso/lib/types/field-meta';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
@@ -17,6 +17,11 @@ import type {
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import {
+  DocumentSigningFieldsInserted,
+  DocumentSigningFieldsLoader,
+  DocumentSigningFieldsUninserted,
+} from './document-signing-fields';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
@@ -50,6 +55,9 @@ export const DocumentSigningInitialsField = ({
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
 
+  const safeFieldMeta = ZInitialsFieldMeta.safeParse(field.fieldMeta);
+  const parsedFieldMeta = safeFieldMeta.success ? safeFieldMeta.data : null;
+
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
       const value = initials ?? '';
@@ -122,22 +130,18 @@ export const DocumentSigningInitialsField = ({
       onRemove={onRemove}
       type="Initials"
     >
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
+      {isLoading && <DocumentSigningFieldsLoader />}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
+        <DocumentSigningFieldsUninserted>
           <Trans>Initials</Trans>
-        </p>
+        </DocumentSigningFieldsUninserted>
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
           {field.customText}
-        </p>
+        </DocumentSigningFieldsInserted>
       )}
     </DocumentSigningFieldContainer>
   );
diff --git a/apps/remix/app/components/general/document-signing/document-signing-name-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-name-field.tsx
index 7c0246c97..8d303a47e 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-name-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-name-field.tsx
@@ -3,7 +3,6 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -16,7 +15,6 @@ import type {
   TRemovedSignedFieldWithTokenMutationSchema,
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
-import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
 import { Input } from '@documenso/ui/primitives/input';
@@ -25,6 +23,11 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import {
+  DocumentSigningFieldsInserted,
+  DocumentSigningFieldsLoader,
+  DocumentSigningFieldsUninserted,
+} from './document-signing-fields';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
@@ -166,34 +169,18 @@ export const DocumentSigningNameField = ({
       onRemove={onRemove}
       type="Name"
     >
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
+      {isLoading && <DocumentSigningFieldsLoader />}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground duration-200 group-hover:text-yellow-300">
+        <DocumentSigningFieldsUninserted>
           <Trans>Name</Trans>
-        </p>
+        </DocumentSigningFieldsUninserted>
       )}
 
       {field.inserted && (
-        <div className="flex h-full w-full items-center">
-          <p
-            className={cn(
-              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
-              {
-                'text-left': parsedFieldMeta?.textAlign === 'left',
-                'text-center':
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
-                'text-right': parsedFieldMeta?.textAlign === 'right',
-              },
-            )}
-          >
-            {field.customText}
-          </p>
-        </div>
+        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
+          {field.customText}
+        </DocumentSigningFieldsInserted>
       )}
 
       <Dialog open={showFullNameModal} onOpenChange={setShowFullNameModal}>
@@ -202,7 +189,7 @@ export const DocumentSigningNameField = ({
             <Trans>
               Sign as
               <div>
-                {recipient.name} <div className="text-muted-foreground">({recipient.email})</div>
+                {recipient.name} <div className="text-foreground">({recipient.email})</div>
               </div>
             </Trans>
           </DialogTitle>
@@ -224,7 +211,7 @@ export const DocumentSigningNameField = ({
             <div className="flex w-full flex-1 flex-nowrap gap-4">
               <Button
                 type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                className="flex-1"
                 variant="secondary"
                 onClick={() => {
                   setShowFullNameModal(false);
diff --git a/apps/remix/app/components/general/document-signing/document-signing-number-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-number-field.tsx
index 307225778..23a577f9e 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-number-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-number-field.tsx
@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { Hash, Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { validateNumberField } from '@documenso/lib/advanced-fields-validation/validate-number';
@@ -25,6 +24,11 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import {
+  DocumentSigningFieldsInserted,
+  DocumentSigningFieldsLoader,
+  DocumentSigningFieldsUninserted,
+} from './document-signing-fields';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
 type ValidationErrors = {
@@ -245,45 +249,16 @@ export const DocumentSigningNumberField = ({
       onRemove={onRemove}
       type="Number"
     >
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
+      {isLoading && <DocumentSigningFieldsLoader />}
 
       {!field.inserted && (
-        <p
-          className={cn(
-            'group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200',
-            {
-              'group-hover:text-yellow-300': !field.inserted && !parsedFieldMeta?.required,
-              'group-hover:text-red-300': !field.inserted && parsedFieldMeta?.required,
-            },
-          )}
-        >
-          <span className="flex items-center justify-center gap-x-1">
-            <Hash className="h-[clamp(0.625rem,20cqw,0.925rem)] w-[clamp(0.625rem,20cqw,0.925rem)]" />{' '}
-            <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">{fieldDisplayName}</span>
-          </span>
-        </p>
+        <DocumentSigningFieldsUninserted>{fieldDisplayName}</DocumentSigningFieldsUninserted>
       )}
 
       {field.inserted && (
-        <div className="flex h-full w-full items-center">
-          <p
-            className={cn(
-              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
-              {
-                'text-left': parsedFieldMeta?.textAlign === 'left',
-                'text-center':
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
-                'text-right': parsedFieldMeta?.textAlign === 'right',
-              },
-            )}
-          >
-            {field.customText}
-          </p>
-        </div>
+        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
+          {field.customText}
+        </DocumentSigningFieldsInserted>
       )}
 
       <Dialog open={showNumberModal} onOpenChange={setShowNumberModal}>
@@ -339,7 +314,7 @@ export const DocumentSigningNumberField = ({
             <div className="flex w-full flex-1 flex-nowrap gap-4">
               <Button
                 type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                className="flex-1"
                 variant="secondary"
                 onClick={() => {
                   setShowNumberModal(false);
diff --git a/apps/remix/app/components/general/document-signing/document-signing-page-view.tsx b/apps/remix/app/components/general/document-signing/document-signing-page-view.tsx
index c194d8e61..33b553af9 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-page-view.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-page-view.tsx
@@ -19,6 +19,7 @@ import {
 import type { CompletedField } from '@documenso/lib/types/fields';
 import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
+import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
@@ -36,7 +37,6 @@ import { DocumentSigningRadioField } from '~/components/general/document-signing
 import { DocumentSigningRejectDialog } from '~/components/general/document-signing/document-signing-reject-dialog';
 import { DocumentSigningSignatureField } from '~/components/general/document-signing/document-signing-signature-field';
 import { DocumentSigningTextField } from '~/components/general/document-signing/document-signing-text-field';
-import { DocumentReadOnlyFields } from '~/components/general/document/document-read-only-fields';
 
 import { DocumentSigningRecipientProvider } from './document-signing-recipient-provider';
 
@@ -157,7 +157,11 @@ export const DocumentSigningPageView = ({
           </div>
         </div>
 
-        <DocumentReadOnlyFields documentMeta={documentMeta || undefined} fields={completedFields} />
+        <DocumentReadOnlyFields
+          documentMeta={documentMeta || undefined}
+          fields={completedFields}
+          showRecipientTooltip={true}
+        />
 
         {recipient.role !== RecipientRole.ASSISTANT && (
           <DocumentSigningAutoSign recipient={recipient} fields={fields} />
diff --git a/apps/remix/app/components/general/document-signing/document-signing-radio-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-radio-field.tsx
index b518c7bb3..934f91c8a 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-radio-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-radio-field.tsx
@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -21,6 +20,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import { DocumentSigningFieldsLoader } from './document-signing-fields';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
 export type DocumentSigningRadioFieldProps = {
@@ -150,44 +150,52 @@ export const DocumentSigningRadioField = ({
 
   return (
     <DocumentSigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Radio">
-      {isLoading && (
-        <div className="bg-background absolute inset-0 z-20 flex items-center justify-center rounded-md">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
+      {isLoading && <DocumentSigningFieldsLoader />}
 
       {!field.inserted && (
-        <RadioGroup onValueChange={(value) => handleSelectItem(value)} className="z-10">
+        <RadioGroup
+          onValueChange={(value) => handleSelectItem(value)}
+          className="z-10 my-0.5 gap-y-1"
+        >
           {values?.map((item, index) => (
-            <div key={index} className="flex items-center gap-x-1.5">
+            <div key={index} className="flex items-center">
               <RadioGroupItem
-                className="h-4 w-4 shrink-0"
+                className="h-3 w-3 shrink-0"
                 value={item.value}
-                id={`option-${index}`}
+                id={`option-${field.id}-${item.id}`}
                 checked={item.checked}
               />
-
-              <Label htmlFor={`option-${index}`}>
-                {item.value.includes('empty-value-') ? '' : item.value}
-              </Label>
+              {!item.value.includes('empty-value-') && item.value && (
+                <Label
+                  htmlFor={`option-${field.id}-${item.id}`}
+                  className="text-foreground ml-1.5 text-xs font-normal"
+                >
+                  {item.value}
+                </Label>
+              )}
             </div>
           ))}
         </RadioGroup>
       )}
 
       {field.inserted && (
-        <RadioGroup className="gap-y-1">
+        <RadioGroup className="my-0.5 gap-y-1">
           {values?.map((item, index) => (
-            <div key={index} className="flex items-center gap-x-1.5">
+            <div key={index} className="flex items-center">
               <RadioGroupItem
                 className="h-3 w-3"
                 value={item.value}
-                id={`option-${index}`}
+                id={`option-${field.id}-${item.id}`}
                 checked={item.value === field.customText}
               />
-              <Label htmlFor={`option-${index}`} className="text-xs">
-                {item.value.includes('empty-value-') ? '' : item.value}
-              </Label>
+              {!item.value.includes('empty-value-') && item.value && (
+                <Label
+                  htmlFor={`option-${field.id}-${item.id}`}
+                  className="text-foreground ml-1.5 text-xs font-normal"
+                >
+                  {item.value}
+                </Label>
+              )}
             </div>
           ))}
         </RadioGroup>
diff --git a/apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx
index 381658ab3..8c80925d7 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx
@@ -242,7 +242,7 @@ export const DocumentSigningSignatureField = ({
       )}
 
       {state === 'empty' && (
-        <p className="group-hover:text-primary font-signature text-muted-foreground text-[clamp(0.575rem,25cqw,1.2rem)] text-xl duration-200 group-hover:text-yellow-300">
+        <p className="group-hover:text-primary font-signature text-muted-foreground group-hover:text-recipient-green text-[clamp(0.575rem,25cqw,1.2rem)] text-xl duration-200">
           <Trans>Signature</Trans>
         </p>
       )}
@@ -259,7 +259,7 @@ export const DocumentSigningSignatureField = ({
         <div ref={containerRef} className="flex h-full w-full items-center justify-center p-2">
           <p
             ref={signatureRef}
-            className="font-signature text-muted-foreground dark:text-background w-full overflow-hidden break-all text-center leading-tight duration-200"
+            className="font-signature text-muted-foreground w-full overflow-hidden break-all text-center leading-tight duration-200"
             style={{ fontSize: `${fontSize}rem` }}
           >
             {signature?.typedSignature}
@@ -291,7 +291,7 @@ export const DocumentSigningSignatureField = ({
             <div className="flex w-full flex-1 flex-nowrap gap-4">
               <Button
                 type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                className="flex-1"
                 variant="secondary"
                 onClick={() => {
                   setShowSignatureModal(false);
diff --git a/apps/remix/app/components/general/document-signing/document-signing-text-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-text-field.tsx
index 074628cc4..3cfa87ab9 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-text-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-text-field.tsx
@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Plural, Trans } from '@lingui/react/macro';
-import { Loader, Type } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { validateTextField } from '@documenso/lib/advanced-fields-validation/validate-text';
@@ -25,6 +24,11 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import {
+  DocumentSigningFieldsInserted,
+  DocumentSigningFieldsLoader,
+  DocumentSigningFieldsUninserted,
+} from './document-signing-fields';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
 export type DocumentSigningTextFieldProps = {
@@ -248,49 +252,20 @@ export const DocumentSigningTextField = ({
       onRemove={onRemove}
       type="Text"
     >
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
+      {isLoading && <DocumentSigningFieldsLoader />}
 
       {!field.inserted && (
-        <p
-          className={cn(
-            'group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200',
-            {
-              'group-hover:text-yellow-300': !field.inserted && !parsedFieldMeta?.required,
-              'group-hover:text-red-300': !field.inserted && parsedFieldMeta?.required,
-            },
-          )}
-        >
-          <span className="flex items-center justify-center gap-x-1">
-            <Type className="h-[clamp(0.625rem,20cqw,0.925rem)] w-[clamp(0.625rem,20cqw,0.925rem)]" />
-            <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">
-              {fieldDisplayName || <Trans>Text</Trans>}
-            </span>
-          </span>
-        </p>
+        <DocumentSigningFieldsUninserted>
+          {fieldDisplayName || <Trans>Text</Trans>}
+        </DocumentSigningFieldsUninserted>
       )}
 
       {field.inserted && (
-        <div className="flex h-full w-full items-center">
-          <p
-            className={cn(
-              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
-              {
-                'text-left': parsedFieldMeta?.textAlign === 'left',
-                'text-center':
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
-                'text-right': parsedFieldMeta?.textAlign === 'right',
-              },
-            )}
-          >
-            {field.customText.length < 20
-              ? field.customText
-              : field.customText.substring(0, 20) + '...'}
-          </p>
-        </div>
+        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
+          {field.customText.length < 20
+            ? field.customText
+            : field.customText.substring(0, 20) + '...'}
+        </DocumentSigningFieldsInserted>
       )}
 
       <Dialog open={showCustomTextModal} onOpenChange={setShowCustomTextModal}>
@@ -304,11 +279,9 @@ export const DocumentSigningTextField = ({
               id="custom-text"
               placeholder={parsedFieldMeta?.placeholder ?? _(msg`Enter your text here`)}
               className={cn('mt-2 w-full rounded-md', {
-                'border-2 border-red-300 ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 focus-visible:border-red-400 focus-visible:ring-4 focus-visible:ring-red-200 focus-visible:ring-offset-2 focus-visible:ring-offset-red-200':
+                'border-2 border-red-300 text-left ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 focus-visible:border-red-400 focus-visible:ring-4 focus-visible:ring-red-200 focus-visible:ring-offset-2 focus-visible:ring-offset-red-200':
                   userInputHasErrors,
-                'text-left': parsedFieldMeta?.textAlign === 'left',
-                'text-center':
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
+                'text-center': parsedFieldMeta?.textAlign === 'center',
                 'text-right': parsedFieldMeta?.textAlign === 'right',
               })}
               value={localText}
@@ -354,8 +327,8 @@ export const DocumentSigningTextField = ({
             <div className="mt-4 flex w-full flex-1 flex-nowrap gap-4">
               <Button
                 type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
                 variant="secondary"
+                className="flex-1"
                 onClick={() => {
                   setShowCustomTextModal(false);
                   setLocalCustomText('');
diff --git a/apps/remix/app/components/general/document/document-read-only-fields.tsx b/apps/remix/app/components/general/document/document-read-only-fields.tsx
deleted file mode 100644
index 26b0b20da..000000000
--- a/apps/remix/app/components/general/document/document-read-only-fields.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import { useState } from 'react';
-
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type { DocumentMeta, TemplateMeta } from '@prisma/client';
-import { FieldType, SigningStatus } from '@prisma/client';
-import { Clock, EyeOffIcon } from 'lucide-react';
-import { P, match } from 'ts-pattern';
-
-import {
-  DEFAULT_DOCUMENT_DATE_FORMAT,
-  convertToLocalSystemFormat,
-} from '@documenso/lib/constants/date-formats';
-import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
-import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
-import type { DocumentField } from '@documenso/lib/server-only/field/get-fields-for-document';
-import { parseMessageDescriptor } from '@documenso/lib/utils/i18n';
-import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
-import { FieldRootContainer } from '@documenso/ui/components/field/field';
-import { SignatureIcon } from '@documenso/ui/icons/signature';
-import { cn } from '@documenso/ui/lib/utils';
-import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
-import { Badge } from '@documenso/ui/primitives/badge';
-import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
-import { ElementVisible } from '@documenso/ui/primitives/element-visible';
-import { PopoverHover } from '@documenso/ui/primitives/popover';
-
-export type DocumentReadOnlyFieldsProps = {
-  fields: DocumentField[];
-  documentMeta?: DocumentMeta | TemplateMeta;
-  showFieldStatus?: boolean;
-};
-
-export const DocumentReadOnlyFields = ({
-  documentMeta,
-  fields,
-  showFieldStatus = true,
-}: DocumentReadOnlyFieldsProps) => {
-  const { _ } = useLingui();
-
-  const [hiddenFieldIds, setHiddenFieldIds] = useState<Record<string, boolean>>({});
-
-  const handleHideField = (fieldId: string) => {
-    setHiddenFieldIds((prev) => ({ ...prev, [fieldId]: true }));
-  };
-
-  return (
-    <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
-      {fields.map(
-        (field) =>
-          !hiddenFieldIds[field.secondaryId] && (
-            <FieldRootContainer
-              field={field}
-              key={field.id}
-              cardClassName="border-gray-300/50 !shadow-none backdrop-blur-[1px] bg-gray-50 ring-0 ring-offset-0"
-            >
-              <div className="absolute -right-3 -top-3">
-                <PopoverHover
-                  trigger={
-                    <Avatar className="dark:border-foreground h-8 w-8 border-2 border-solid border-gray-200/50 transition-colors hover:border-gray-200">
-                      <AvatarFallback className="bg-neutral-50 text-xs text-gray-400">
-                        {extractInitials(field.recipient.name || field.recipient.email)}
-                      </AvatarFallback>
-                    </Avatar>
-                  }
-                  contentProps={{
-                    className: 'relative flex w-fit flex-col p-4 text-sm',
-                  }}
-                >
-                  {showFieldStatus && (
-                    <Badge
-                      className="mx-auto mb-1 py-0.5"
-                      variant={
-                        field.recipient.signingStatus === SigningStatus.SIGNED
-                          ? 'default'
-                          : 'secondary'
-                      }
-                    >
-                      {field.recipient.signingStatus === SigningStatus.SIGNED ? (
-                        <>
-                          <SignatureIcon className="mr-1 h-3 w-3" />
-                          <Trans>Signed</Trans>
-                        </>
-                      ) : (
-                        <>
-                          <Clock className="mr-1 h-3 w-3" />
-                          <Trans>Pending</Trans>
-                        </>
-                      )}
-                    </Badge>
-                  )}
-
-                  <p className="text-center font-semibold">
-                    <span>{parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type])} field</span>
-                  </p>
-
-                  <p className="text-muted-foreground mt-1 text-center text-xs">
-                    {field.recipient.name
-                      ? `${field.recipient.name} (${field.recipient.email})`
-                      : field.recipient.email}{' '}
-                  </p>
-
-                  <button
-                    className="absolute right-0 top-0 my-1 p-2 focus:outline-none focus-visible:ring-0"
-                    onClick={() => handleHideField(field.secondaryId)}
-                    title="Hide field"
-                  >
-                    <EyeOffIcon className="h-3 w-3" />
-                  </button>
-                </PopoverHover>
-              </div>
-
-              <div className="text-muted-foreground dark:text-background/70 break-all text-sm">
-                {field.recipient.signingStatus === SigningStatus.SIGNED &&
-                  match(field)
-                    .with({ type: FieldType.SIGNATURE }, (field) =>
-                      field.signature?.signatureImageAsBase64 ? (
-                        <img
-                          src={field.signature.signatureImageAsBase64}
-                          alt="Signature"
-                          className="h-full w-full object-contain dark:invert"
-                        />
-                      ) : (
-                        <p className="font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl">
-                          {field.signature?.typedSignature}
-                        </p>
-                      ),
-                    )
-                    .with(
-                      {
-                        type: P.union(
-                          FieldType.NAME,
-                          FieldType.INITIALS,
-                          FieldType.EMAIL,
-                          FieldType.NUMBER,
-                          FieldType.RADIO,
-                          FieldType.CHECKBOX,
-                          FieldType.DROPDOWN,
-                        ),
-                      },
-                      () => field.customText,
-                    )
-                    .with({ type: FieldType.TEXT }, () => field.customText.substring(0, 20) + '...')
-                    .with({ type: FieldType.DATE }, () =>
-                      convertToLocalSystemFormat(
-                        field.customText,
-                        documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
-                        documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
-                      ),
-                    )
-                    .with({ type: FieldType.FREE_SIGNATURE }, () => null)
-                    .exhaustive()}
-
-                {field.recipient.signingStatus === SigningStatus.NOT_SIGNED && (
-                  <p
-                    className={cn('text-muted-foreground text-lg duration-200', {
-                      'font-signature sm:text-xl md:text-2xl':
-                        field.type === FieldType.SIGNATURE ||
-                        field.type === FieldType.FREE_SIGNATURE,
-                    })}
-                  >
-                    {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type])}
-                  </p>
-                )}
-              </div>
-            </FieldRootContainer>
-          ),
-      )}
-    </ElementVisible>
-  );
-};
diff --git a/apps/remix/app/components/general/legacy-field-warning-popover.tsx b/apps/remix/app/components/general/legacy-field-warning-popover.tsx
new file mode 100644
index 000000000..6bd489c27
--- /dev/null
+++ b/apps/remix/app/components/general/legacy-field-warning-popover.tsx
@@ -0,0 +1,112 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { AlertCircle } from 'lucide-react';
+import { useRevalidator } from 'react-router';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { PopoverHover } from '@documenso/ui/primitives/popover';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type LegacyFieldWarningPopoverProps = {
+  type?: 'document' | 'template';
+  documentId?: number;
+  templateId?: number;
+};
+
+export const LegacyFieldWarningPopover = ({
+  type = 'document',
+  documentId,
+  templateId,
+}: LegacyFieldWarningPopoverProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const revalidator = useRevalidator();
+
+  const { mutateAsync: updateTemplate, isPending: isUpdatingTemplate } =
+    trpc.template.updateTemplate.useMutation();
+  const { mutateAsync: updateDocument, isPending: isUpdatingDocument } =
+    trpc.document.updateDocument.useMutation();
+
+  const onUpdateFieldsClick = async () => {
+    if (type === 'document') {
+      if (!documentId) {
+        return;
+      }
+
+      await updateDocument({
+        documentId,
+        data: {
+          useLegacyFieldInsertion: false,
+        },
+      });
+    }
+
+    if (type === 'template') {
+      if (!templateId) {
+        return;
+      }
+
+      await updateTemplate({
+        templateId,
+        data: {
+          useLegacyFieldInsertion: false,
+        },
+      });
+    }
+
+    void revalidator.revalidate();
+
+    toast({
+      title: _(msg`Fields updated`),
+      description: _(
+        msg`The fields have been updated to the new field insertion method successfully`,
+      ),
+    });
+  };
+
+  return (
+    <PopoverHover
+      side="bottom"
+      trigger={
+        <Button variant="outline" className="h-9 w-9 p-0">
+          <span className="sr-only">
+            {type === 'document' ? (
+              <Trans>Document is using legacy field insertion</Trans>
+            ) : (
+              <Trans>Template is using legacy field insertion</Trans>
+            )}
+          </span>
+          <AlertCircle className="h-5 w-5" />
+        </Button>
+      }
+    >
+      <p className="text-muted-foreground text-sm">
+        {type === 'document' ? (
+          <Trans>
+            This document is using legacy field insertion, we recommend using the new field
+            insertion method for more accurate results.
+          </Trans>
+        ) : (
+          <Trans>
+            This template is using legacy field insertion, we recommend using the new field
+            insertion method for more accurate results.
+          </Trans>
+        )}
+      </p>
+
+      <div className="mt-2 flex w-full items-center justify-end">
+        <Button
+          type="button"
+          size="sm"
+          loading={isUpdatingDocument || isUpdatingTemplate}
+          onClick={onUpdateFieldsClick}
+        >
+          <Trans>Update Fields</Trans>
+        </Button>
+      </div>
+    </PopoverHover>
+  );
+};
diff --git a/apps/remix/app/routes/_authenticated+/documents.$id._index.tsx b/apps/remix/app/routes/_authenticated+/documents.$id._index.tsx
index 23d9b371f..d382ce76e 100644
--- a/apps/remix/app/routes/_authenticated+/documents.$id._index.tsx
+++ b/apps/remix/app/routes/_authenticated+/documents.$id._index.tsx
@@ -13,6 +13,7 @@ import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/g
 import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -24,7 +25,6 @@ import { DocumentPageViewDropdown } from '~/components/general/document/document
 import { DocumentPageViewInformation } from '~/components/general/document/document-page-view-information';
 import { DocumentPageViewRecentActivity } from '~/components/general/document/document-page-view-recent-activity';
 import { DocumentPageViewRecipients } from '~/components/general/document/document-page-view-recipients';
-import { DocumentReadOnlyFields } from '~/components/general/document/document-read-only-fields';
 import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
 import {
   DocumentStatus as DocumentStatusComponent,
@@ -200,8 +200,14 @@ export default function DocumentPage() {
           </CardContent>
         </Card>
 
-        {document.status === DocumentStatus.PENDING && (
-          <DocumentReadOnlyFields fields={fields} documentMeta={documentMeta || undefined} />
+        {document.status !== DocumentStatus.COMPLETED && (
+          <DocumentReadOnlyFields
+            fields={fields}
+            documentMeta={documentMeta || undefined}
+            showRecipientTooltip={true}
+            showRecipientColors={true}
+            recipientIds={recipients.map((recipient) => recipient.id)}
+          />
         )}
 
         <div className="col-span-12 lg:col-span-6 xl:col-span-5">
diff --git a/apps/remix/app/routes/_authenticated+/documents.$id.edit.tsx b/apps/remix/app/routes/_authenticated+/documents.$id.edit.tsx
index ba91b24b3..ad87cdee2 100644
--- a/apps/remix/app/routes/_authenticated+/documents.$id.edit.tsx
+++ b/apps/remix/app/routes/_authenticated+/documents.$id.edit.tsx
@@ -14,6 +14,7 @@ import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 
 import { DocumentEditForm } from '~/components/general/document/document-edit-form';
 import { DocumentStatus } from '~/components/general/document/document-status';
+import { LegacyFieldWarningPopover } from '~/components/general/legacy-field-warning-popover';
 import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
 import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
 
@@ -100,29 +101,43 @@ export default function DocumentEditPage() {
         <Trans>Documents</Trans>
       </Link>
 
-      <h1
-        className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
-        title={document.title}
-      >
-        {document.title}
-      </h1>
+      <div className="mt-4 flex w-full items-end justify-between">
+        <div className="flex-1">
+          <h1
+            className="block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
+            title={document.title}
+          >
+            {document.title}
+          </h1>
 
-      <div className="mt-2.5 flex items-center gap-x-6">
-        <DocumentStatus inheritColor status={document.status} className="text-muted-foreground" />
+          <div className="mt-2.5 flex items-center gap-x-6">
+            <DocumentStatus
+              inheritColor
+              status={document.status}
+              className="text-muted-foreground"
+            />
 
-        {recipients.length > 0 && (
-          <div className="text-muted-foreground flex items-center">
-            <Users2 className="mr-2 h-5 w-5" />
+            {recipients.length > 0 && (
+              <div className="text-muted-foreground flex items-center">
+                <Users2 className="mr-2 h-5 w-5" />
 
-            <StackAvatarsWithTooltip
-              recipients={recipients}
-              documentStatus={document.status}
-              position="bottom"
-            >
-              <span>
-                <Plural one="1 Recipient" other="# Recipients" value={recipients.length} />
-              </span>
-            </StackAvatarsWithTooltip>
+                <StackAvatarsWithTooltip
+                  recipients={recipients}
+                  documentStatus={document.status}
+                  position="bottom"
+                >
+                  <span>
+                    <Plural one="1 Recipient" other="# Recipients" value={recipients.length} />
+                  </span>
+                </StackAvatarsWithTooltip>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {document.useLegacyFieldInsertion && (
+          <div>
+            <LegacyFieldWarningPopover type="document" documentId={document.id} />
           </div>
         )}
       </div>
diff --git a/apps/remix/app/routes/_authenticated+/templates.$id._index.tsx b/apps/remix/app/routes/_authenticated+/templates.$id._index.tsx
index b8fc390b6..e315b87cc 100644
--- a/apps/remix/app/routes/_authenticated+/templates.$id._index.tsx
+++ b/apps/remix/app/routes/_authenticated+/templates.$id._index.tsx
@@ -7,6 +7,7 @@ import { getSession } from '@documenso/auth/server/lib/utils/get-session';
 import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
@@ -14,7 +15,6 @@ import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 import { TemplateBulkSendDialog } from '~/components/dialogs/template-bulk-send-dialog';
 import { TemplateDirectLinkDialogWrapper } from '~/components/dialogs/template-direct-link-dialog-wrapper';
 import { TemplateUseDialog } from '~/components/dialogs/template-use-dialog';
-import { DocumentReadOnlyFields } from '~/components/general/document/document-read-only-fields';
 import { TemplateDirectLinkBadge } from '~/components/general/template/template-direct-link-badge';
 import { TemplatePageViewDocumentsTable } from '~/components/general/template/template-page-view-documents-table';
 import { TemplatePageViewInformation } from '~/components/general/template/template-page-view-information';
@@ -151,6 +151,9 @@ export default function TemplatePage() {
         <DocumentReadOnlyFields
           fields={readOnlyFields}
           showFieldStatus={false}
+          showRecipientTooltip={true}
+          showRecipientColors={true}
+          recipientIds={recipients.map((recipient) => recipient.id)}
           documentMeta={mockedDocumentMeta}
         />
 
diff --git a/apps/remix/app/routes/_authenticated+/templates.$id.edit.tsx b/apps/remix/app/routes/_authenticated+/templates.$id.edit.tsx
index 0ecd61813..75c0c8f12 100644
--- a/apps/remix/app/routes/_authenticated+/templates.$id.edit.tsx
+++ b/apps/remix/app/routes/_authenticated+/templates.$id.edit.tsx
@@ -8,6 +8,7 @@ import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-
 import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
 import { formatTemplatesPath } from '@documenso/lib/utils/teams';
 
+import { LegacyFieldWarningPopover } from '~/components/general/legacy-field-warning-popover';
 import { TemplateDirectLinkBadge } from '~/components/general/template/template-direct-link-badge';
 import { TemplateEditForm } from '~/components/general/template/template-edit-form';
 import { TemplateType } from '~/components/general/template/template-type';
@@ -91,8 +92,14 @@ export default function TemplateEditPage() {
           </div>
         </div>
 
-        <div className="mt-2 sm:mt-0 sm:self-end">
+        <div className="mt-2 flex items-center gap-2 sm:mt-0 sm:self-end">
           <TemplateDirectLinkDialogWrapper template={template} />
+
+          {template.useLegacyFieldInsertion && (
+            <div>
+              <LegacyFieldWarningPopover type="template" templateId={template.id} />
+            </div>
+          )}
         </div>
       </div>
 
diff --git a/packages/lib/jobs/definitions/internal/seal-document.handler.ts b/packages/lib/jobs/definitions/internal/seal-document.handler.ts
index a6e7e692d..716d4737b 100644
--- a/packages/lib/jobs/definitions/internal/seal-document.handler.ts
+++ b/packages/lib/jobs/definitions/internal/seal-document.handler.ts
@@ -14,6 +14,7 @@ import { addRejectionStampToPdf } from '../../../server-only/pdf/add-rejection-s
 import { flattenAnnotations } from '../../../server-only/pdf/flatten-annotations';
 import { flattenForm } from '../../../server-only/pdf/flatten-form';
 import { insertFieldInPDF } from '../../../server-only/pdf/insert-field-in-pdf';
+import { legacy_insertFieldInPDF } from '../../../server-only/pdf/legacy-insert-field-in-pdf';
 import { normalizeSignatureAppearances } from '../../../server-only/pdf/normalize-signature-appearances';
 import { triggerWebhook } from '../../../server-only/webhooks/trigger/trigger-webhook';
 import { DOCUMENT_AUDIT_LOG_TYPE } from '../../../types/document-audit-logs';
@@ -167,7 +168,9 @@ export const run = async ({
 
     for (const field of fields) {
       if (field.inserted) {
-        await insertFieldInPDF(pdfDoc, field);
+        document.useLegacyFieldInsertion
+          ? await legacy_insertFieldInPDF(pdfDoc, field)
+          : await insertFieldInPDF(pdfDoc, field);
       }
     }
 
diff --git a/packages/lib/server-only/document/seal-document.ts b/packages/lib/server-only/document/seal-document.ts
index 2f328a40f..507f6ec19 100644
--- a/packages/lib/server-only/document/seal-document.ts
+++ b/packages/lib/server-only/document/seal-document.ts
@@ -22,6 +22,7 @@ import { addRejectionStampToPdf } from '../pdf/add-rejection-stamp-to-pdf';
 import { flattenAnnotations } from '../pdf/flatten-annotations';
 import { flattenForm } from '../pdf/flatten-form';
 import { insertFieldInPDF } from '../pdf/insert-field-in-pdf';
+import { legacy_insertFieldInPDF } from '../pdf/legacy-insert-field-in-pdf';
 import { normalizeSignatureAppearances } from '../pdf/normalize-signature-appearances';
 import { triggerWebhook } from '../webhooks/trigger/trigger-webhook';
 import { sendCompletedEmail } from './send-completed-email';
@@ -146,7 +147,9 @@ export const sealDocument = async ({
   }
 
   for (const field of fields) {
-    await insertFieldInPDF(doc, field);
+    document.useLegacyFieldInsertion
+      ? await legacy_insertFieldInPDF(doc, field)
+      : await insertFieldInPDF(doc, field);
   }
 
   // Re-flatten post-insertion to handle fields that create arcoFields
diff --git a/packages/lib/server-only/document/update-document.ts b/packages/lib/server-only/document/update-document.ts
index 371f6bb9a..f93661583 100644
--- a/packages/lib/server-only/document/update-document.ts
+++ b/packages/lib/server-only/document/update-document.ts
@@ -23,6 +23,7 @@ export type UpdateDocumentOptions = {
     visibility?: DocumentVisibility | null;
     globalAccessAuth?: TDocumentAccessAuthTypes | null;
     globalActionAuth?: TDocumentActionAuthTypes | null;
+    useLegacyFieldInsertion?: boolean;
   };
   requestMetadata: ApiRequestMetadata;
 };
@@ -118,6 +119,7 @@ export const updateDocument = async ({
 
   // If no data just return the document since this function is normally chained after a meta update.
   if (!data || Object.values(data).length === 0) {
+    console.log('no data');
     return document;
   }
 
@@ -236,7 +238,7 @@ export const updateDocument = async ({
   }
 
   // Early return if nothing is required.
-  if (auditLogs.length === 0) {
+  if (auditLogs.length === 0 && data.useLegacyFieldInsertion === undefined) {
     return document;
   }
 
@@ -254,6 +256,7 @@ export const updateDocument = async ({
         title: data.title,
         externalId: data.externalId,
         visibility: data.visibility as DocumentVisibility,
+        useLegacyFieldInsertion: data.useLegacyFieldInsertion,
         authOptions,
       },
     });
diff --git a/packages/lib/server-only/pdf/insert-field-in-pdf.ts b/packages/lib/server-only/pdf/insert-field-in-pdf.ts
index 403c42559..8db5abcfe 100644
--- a/packages/lib/server-only/pdf/insert-field-in-pdf.ts
+++ b/packages/lib/server-only/pdf/insert-field-in-pdf.ts
@@ -1,8 +1,8 @@
 // https://github.com/Hopding/pdf-lib/issues/20#issuecomment-412852821
 import fontkit from '@pdf-lib/fontkit';
 import { FieldType } from '@prisma/client';
-import type { PDFDocument } from 'pdf-lib';
-import { RotationTypes, degrees, radiansToDegrees, rgb } from 'pdf-lib';
+import type { PDFDocument, PDFFont } from 'pdf-lib';
+import { RotationTypes, TextAlignment, degrees, radiansToDegrees, rgb } from 'pdf-lib';
 import { P, match } from 'ts-pattern';
 
 import {
@@ -34,6 +34,13 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
   ]);
 
   const isSignatureField = isSignatureFieldType(field.type);
+
+  /**
+   * Red box is the original field width, height and position.
+   *
+   * Blue box is the adjusted field width, height and position. It will represent
+   * where the text will overflow into.
+   */
   const isDebugMode =
     // eslint-disable-next-line turbo/no-undeclared-env-vars
     process.env.DEBUG_PDF_INSERT === '1' || process.env.DEBUG_PDF_INSERT === 'true';
@@ -227,8 +234,13 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
 
       const selected: string[] = fromCheckboxValue(field.customText);
 
+      const topPadding = 12;
+      const leftCheckboxPadding = 8;
+      const leftCheckboxLabelPadding = 12;
+      const checkboxSpaceY = 13;
+
       for (const [index, item] of (values ?? []).entries()) {
-        const offsetY = index * 16;
+        const offsetY = index * checkboxSpaceY + topPadding;
 
         const checkbox = pdf.getForm().createCheckBox(`checkbox.${field.secondaryId}.${index}`);
 
@@ -237,7 +249,7 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
         }
 
         page.drawText(item.value.includes('empty-value-') ? '' : item.value, {
-          x: fieldX + 16,
+          x: fieldX + leftCheckboxPadding + leftCheckboxLabelPadding,
           y: pageHeight - (fieldY + offsetY),
           size: 12,
           font,
@@ -245,7 +257,7 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
         });
 
         checkbox.addToPage(page, {
-          x: fieldX,
+          x: fieldX + leftCheckboxPadding,
           y: pageHeight - (fieldY + offsetY),
           height: 8,
           width: 8,
@@ -268,21 +280,28 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
 
       const selected = field.customText.split(',');
 
+      const topPadding = 12;
+      const leftRadioPadding = 8;
+      const leftRadioLabelPadding = 12;
+      const radioSpaceY = 13;
+
       for (const [index, item] of (values ?? []).entries()) {
-        const offsetY = index * 16;
+        const offsetY = index * radioSpaceY + topPadding;
 
         const radio = pdf.getForm().createRadioGroup(`radio.${field.secondaryId}.${index}`);
 
+        // Draw label.
         page.drawText(item.value.includes('empty-value-') ? '' : item.value, {
-          x: fieldX + 16,
+          x: fieldX + leftRadioPadding + leftRadioLabelPadding,
           y: pageHeight - (fieldY + offsetY),
           size: 12,
           font,
           rotate: degrees(pageRotationInDegrees),
         });
 
+        // Draw radio button.
         radio.addOptionToPage(item.value, page, {
-          x: fieldX,
+          x: fieldX + leftRadioPadding,
           y: pageHeight - (fieldY + offsetY),
           height: 8,
           width: 8,
@@ -304,62 +323,144 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
       } as const;
 
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      const Parser = fieldMetaParsers[field.type as keyof typeof fieldMetaParsers];
-      const meta = Parser ? Parser.safeParse(field.fieldMeta) : null;
+      const fieldMetaParser = fieldMetaParsers[field.type as keyof typeof fieldMetaParsers];
+      const meta = fieldMetaParser ? fieldMetaParser.safeParse(field.fieldMeta) : null;
 
       const customFontSize = meta?.success && meta.data.fontSize ? meta.data.fontSize : null;
-      const textAlign = meta?.success && meta.data.textAlign ? meta.data.textAlign : 'center';
-      const longestLineInTextForWidth = field.customText
-        .split('\n')
-        .sort((a, b) => b.length - a.length)[0];
+      const textAlign = meta?.success && meta.data.textAlign ? meta.data.textAlign : 'left';
 
       let fontSize = customFontSize || maxFontSize;
-      let textWidth = font.widthOfTextAtSize(longestLineInTextForWidth, fontSize);
+      const textWidth = font.widthOfTextAtSize(field.customText, fontSize);
       const textHeight = font.heightAtSize(fontSize);
 
+      // Scale font only if no custom font and height exceeds field height.
       if (!customFontSize) {
-        const scalingFactor = Math.min(fieldWidth / textWidth, fieldHeight / textHeight, 1);
+        const scalingFactor = Math.min(fieldHeight / textHeight, 1);
         fontSize = Math.max(Math.min(fontSize * scalingFactor, maxFontSize), minFontSize);
       }
 
-      textWidth = font.widthOfTextAtSize(longestLineInTextForWidth, fontSize);
+      /**
+       * Calculate whether the field should be multiline.
+       *
+       * - True = text will overflow downwards.
+       * - False = text will overflow sideways.
+       */
+      const isMultiline =
+        field.type === FieldType.TEXT &&
+        (textWidth > fieldWidth || field.customText.includes('\n'));
 
       // Add padding similar to web display (roughly 0.5rem equivalent in PDF units)
-      const padding = 8; // PDF points, roughly equivalent to 0.5rem
+      const padding = 8;
 
-      // Calculate X position based on text alignment with padding
-      let textX = fieldX + padding; // Left alignment starts after padding
-      if (textAlign === 'center') {
-        textX = fieldX + (fieldWidth - textWidth) / 2; // Center alignment ignores padding
-      } else if (textAlign === 'right') {
-        textX = fieldX + fieldWidth - textWidth - padding; // Right alignment respects right padding
-      }
-
-      let textY = fieldY + (fieldHeight - textHeight) / 2;
+      const textAlignmentOptions = getTextAlignmentOptions(textAlign, fieldX, isMultiline, padding);
 
       // Invert the Y axis since PDFs use a bottom-left coordinate system
-      textY = pageHeight - textY - textHeight;
+      let textFieldBoxY = pageHeight - fieldY - fieldHeight;
+      const textFieldBoxX = textAlignmentOptions.xPos;
+
+      const textField = pdf.getForm().createTextField(`text.${field.secondaryId}`);
+      textField.setAlignment(textAlignmentOptions.textAlignment);
+
+      /**
+       * From now on we will adjust the field size and position so the text
+       * overflows correctly in the X or Y axis depending on the field type.
+       */
+      let adjustedFieldWidth = fieldWidth - padding * 2; //
+      let adjustedFieldHeight = fieldHeight;
+      let adjustedFieldX = textFieldBoxX;
+      let adjustedFieldY = textFieldBoxY;
+
+      let textToInsert = field.customText;
+
+      // The padding to use when fields go off the page.
+      const pagePadding = 4;
+
+      // Handle multiline text, which will overflow on the Y axis.
+      if (isMultiline) {
+        textToInsert = breakLongString(textToInsert, adjustedFieldWidth, font, fontSize);
+
+        textField.enableMultiline();
+        textField.disableCombing();
+        textField.disableScrolling();
+
+        // Adjust the textFieldBox so it extends to the bottom of the page so text can wrap.
+        textFieldBoxY = pageHeight - fieldY - fieldHeight;
+
+        // Calculate how much PX from the current field to bottom of the page.
+        const fieldYOffset = pageHeight - (fieldY + fieldHeight) - pagePadding;
+
+        // Field height will be from current to bottom of page.
+        adjustedFieldHeight = fieldHeight + fieldYOffset;
+
+        // Need to move the field Y so it offsets the new field height.
+        adjustedFieldY = adjustedFieldY - fieldYOffset;
+      }
+
+      // Handle non-multiline text, which will overflow on the X axis.
+      if (!isMultiline) {
+        // Left align will extend all the way to the right of the page
+        if (textAlignmentOptions.textAlignment === TextAlignment.Left) {
+          adjustedFieldWidth = pageWidth - textFieldBoxX - pagePadding;
+        }
+
+        // Right align will extend all the way to the left of the page.
+        if (textAlignmentOptions.textAlignment === TextAlignment.Right) {
+          adjustedFieldWidth = textFieldBoxX + fieldWidth - pagePadding;
+          adjustedFieldX = adjustedFieldX - adjustedFieldWidth + fieldWidth;
+        }
+
+        // Center align will extend to the closest page edge, then use that * 2 as the width.
+        if (textAlignmentOptions.textAlignment === TextAlignment.Center) {
+          const fieldMidpoint = textFieldBoxX + fieldWidth / 2;
+
+          const isCloserToLeftEdge = fieldMidpoint < pageWidth / 2;
+
+          // If field is closer to left edge, the width must be based of the left.
+          if (isCloserToLeftEdge) {
+            adjustedFieldWidth = (textFieldBoxX - pagePadding) * 2 + fieldWidth;
+            adjustedFieldX = pagePadding;
+          }
+
+          // If field is closer to right edge, the width must be based of the right
+          if (!isCloserToLeftEdge) {
+            adjustedFieldWidth = (pageWidth - textFieldBoxX - pagePadding - fieldWidth / 2) * 2;
+            adjustedFieldX = pageWidth - adjustedFieldWidth - pagePadding;
+          }
+        }
+      }
 
       if (pageRotationInDegrees !== 0) {
         const adjustedPosition = adjustPositionForRotation(
           pageWidth,
           pageHeight,
-          textX,
-          textY,
+          adjustedFieldX,
+          adjustedFieldY,
           pageRotationInDegrees,
         );
 
-        textX = adjustedPosition.xPos;
-        textY = adjustedPosition.yPos;
+        adjustedFieldX = adjustedPosition.xPos;
+        adjustedFieldY = adjustedPosition.yPos;
       }
 
-      page.drawText(field.customText, {
-        x: textX,
-        y: textY,
-        size: fontSize,
-        font,
+      // Set the position and size of the text field
+      textField.addToPage(page, {
+        x: adjustedFieldX,
+        y: adjustedFieldY,
+        width: adjustedFieldWidth,
+        height: adjustedFieldHeight,
         rotate: degrees(pageRotationInDegrees),
+
+        // Hide borders.
+        borderWidth: 0,
+        borderColor: undefined,
+        backgroundColor: undefined,
+
+        ...(isDebugMode ? { borderWidth: 1, borderColor: rgb(0, 0, 1) } : {}),
       });
+
+      // Set properties for the text field
+      textField.setFontSize(fontSize);
+      textField.setText(textToInsert);
     });
 
   return pdf;
@@ -393,3 +494,138 @@ const adjustPositionForRotation = (
     yPos,
   };
 };
+
+const textAlignmentMap = {
+  left: TextAlignment.Left,
+  center: TextAlignment.Center,
+  right: TextAlignment.Right,
+} as const;
+
+/**
+ * Get the PDF-lib alignment position, and the X position of the field with padding included.
+ *
+ * @param textAlign - The text alignment of the field.
+ * @param fieldX - The X position of the field.
+ * @param isMultiline - Whether the field is multiline.
+ * @param padding - The padding of the field. Defaults to 8.
+ *
+ * @returns The X position and text alignment for the field.
+ */
+const getTextAlignmentOptions = (
+  textAlign: 'left' | 'center' | 'right',
+  fieldX: number,
+  isMultiline: boolean,
+  padding: number = 8,
+) => {
+  const textAlignment = textAlignmentMap[textAlign];
+
+  // For multiline, it needs to be centered so we just basic left padding.
+  if (isMultiline) {
+    return {
+      xPos: fieldX + padding,
+      textAlignment,
+    };
+  }
+
+  return match(textAlign)
+    .with('left', () => ({
+      xPos: fieldX + padding,
+      textAlignment,
+    }))
+    .with('center', () => ({
+      xPos: fieldX,
+      textAlignment,
+    }))
+    .with('right', () => ({
+      xPos: fieldX - padding,
+      textAlignment,
+    }))
+    .exhaustive();
+};
+
+/**
+ * Break a long string into multiple lines so it fits within a given width,
+ * using natural word breaking similar to word processors.
+ *
+ * - Keeps words together when possible
+ * - Only breaks words when they're too long to fit on a line
+ * - Handles whitespace intelligently
+ *
+ * @param text - The text to break into lines
+ * @param maxWidth - The maximum width of each line in PX
+ * @param font - The PDF font object
+ * @param fontSize - The font size in points
+ * @returns Object containing the result string and line count
+ */
+function breakLongString(text: string, maxWidth: number, font: PDFFont, fontSize: number): string {
+  // Handle empty text
+  if (!text) {
+    return '';
+  }
+
+  const lines: string[] = [];
+
+  // Process each original line separately to preserve newlines
+  for (const paragraph of text.split('\n')) {
+    // If paragraph fits on one line or is empty, add it as-is
+    if (paragraph === '' || font.widthOfTextAtSize(paragraph, fontSize) <= maxWidth) {
+      lines.push(paragraph);
+      continue;
+    }
+
+    // Split paragraph into words
+    const words = paragraph.split(' ');
+    let currentLine = '';
+
+    for (const word of words) {
+      // Check if adding word to current line would exceed max width
+      const lineWithWord = currentLine.length === 0 ? word : `${currentLine} ${word}`;
+
+      if (font.widthOfTextAtSize(lineWithWord, fontSize) <= maxWidth) {
+        // Word fits, add it to current line
+        currentLine = lineWithWord;
+      } else {
+        // Word doesn't fit on current line
+
+        // First, save current line if it's not empty
+        if (currentLine.length > 0) {
+          lines.push(currentLine);
+          currentLine = '';
+        }
+
+        // Check if word fits on a line by itself
+        if (font.widthOfTextAtSize(word, fontSize) <= maxWidth) {
+          // Word fits on its own line
+          currentLine = word;
+        } else {
+          // Word is too long, need to break it character by character
+          let charLine = '';
+
+          // Process each character in the word
+          for (const char of word) {
+            const nextCharLine = charLine + char;
+
+            if (font.widthOfTextAtSize(nextCharLine, fontSize) <= maxWidth) {
+              // Character fits, add it
+              charLine = nextCharLine;
+            } else {
+              // Character doesn't fit, push current charLine and start a new one
+              lines.push(charLine);
+              charLine = char;
+            }
+          }
+
+          // Add any remaining characters as the current line
+          currentLine = charLine;
+        }
+      }
+    }
+
+    // Add the last line if not empty
+    if (currentLine.length > 0) {
+      lines.push(currentLine);
+    }
+  }
+
+  return lines.join('\n');
+}
diff --git a/packages/lib/server-only/pdf/legacy-insert-field-in-pdf.ts b/packages/lib/server-only/pdf/legacy-insert-field-in-pdf.ts
new file mode 100644
index 000000000..ba351092c
--- /dev/null
+++ b/packages/lib/server-only/pdf/legacy-insert-field-in-pdf.ts
@@ -0,0 +1,395 @@
+// https://github.com/Hopding/pdf-lib/issues/20#issuecomment-412852821
+import fontkit from '@pdf-lib/fontkit';
+import { FieldType } from '@prisma/client';
+import type { PDFDocument } from 'pdf-lib';
+import { RotationTypes, degrees, radiansToDegrees, rgb } from 'pdf-lib';
+import { P, match } from 'ts-pattern';
+
+import {
+  DEFAULT_HANDWRITING_FONT_SIZE,
+  DEFAULT_STANDARD_FONT_SIZE,
+  MIN_HANDWRITING_FONT_SIZE,
+  MIN_STANDARD_FONT_SIZE,
+} from '@documenso/lib/constants/pdf';
+import { fromCheckboxValue } from '@documenso/lib/universal/field-checkbox';
+import { isSignatureFieldType } from '@documenso/prisma/guards/is-signature-field';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
+import {
+  ZCheckboxFieldMeta,
+  ZDateFieldMeta,
+  ZEmailFieldMeta,
+  ZInitialsFieldMeta,
+  ZNameFieldMeta,
+  ZNumberFieldMeta,
+  ZRadioFieldMeta,
+  ZTextFieldMeta,
+} from '../../types/field-meta';
+
+export const legacy_insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignature) => {
+  const [fontCaveat, fontNoto] = await Promise.all([
+    fetch(`${NEXT_PUBLIC_WEBAPP_URL()}/fonts/caveat.ttf`).then(async (res) => res.arrayBuffer()),
+    fetch(`${NEXT_PUBLIC_WEBAPP_URL()}/fonts/noto-sans.ttf`).then(async (res) => res.arrayBuffer()),
+  ]);
+
+  const isSignatureField = isSignatureFieldType(field.type);
+  const isDebugMode =
+    // eslint-disable-next-line turbo/no-undeclared-env-vars
+    process.env.DEBUG_PDF_INSERT === '1' || process.env.DEBUG_PDF_INSERT === 'true';
+
+  pdf.registerFontkit(fontkit);
+
+  const pages = pdf.getPages();
+
+  const minFontSize = isSignatureField ? MIN_HANDWRITING_FONT_SIZE : MIN_STANDARD_FONT_SIZE;
+  const maxFontSize = isSignatureField ? DEFAULT_HANDWRITING_FONT_SIZE : DEFAULT_STANDARD_FONT_SIZE;
+
+  const page = pages.at(field.page - 1);
+
+  if (!page) {
+    throw new Error(`Page ${field.page} does not exist`);
+  }
+
+  const pageRotation = page.getRotation();
+
+  let pageRotationInDegrees = match(pageRotation.type)
+    .with(RotationTypes.Degrees, () => pageRotation.angle)
+    .with(RotationTypes.Radians, () => radiansToDegrees(pageRotation.angle))
+    .exhaustive();
+
+  // Round to the closest multiple of 90 degrees.
+  pageRotationInDegrees = Math.round(pageRotationInDegrees / 90) * 90;
+
+  const isPageRotatedToLandscape = pageRotationInDegrees === 90 || pageRotationInDegrees === 270;
+
+  let { width: pageWidth, height: pageHeight } = page.getSize();
+
+  // PDFs can have pages that are rotated, which are correctly rendered in the frontend.
+  // However when we load the PDF in the backend, the rotation is applied.
+  //
+  // To account for this, we swap the width and height for pages that are rotated by 90/270
+  // degrees. This is so we can calculate the virtual position the field was placed if it
+  // was correctly oriented in the frontend.
+  //
+  // Then when we insert the fields, we apply a transformation to the position of the field
+  // so it is rotated correctly.
+  if (isPageRotatedToLandscape) {
+    [pageWidth, pageHeight] = [pageHeight, pageWidth];
+  }
+
+  const fieldWidth = pageWidth * (Number(field.width) / 100);
+  const fieldHeight = pageHeight * (Number(field.height) / 100);
+
+  const fieldX = pageWidth * (Number(field.positionX) / 100);
+  const fieldY = pageHeight * (Number(field.positionY) / 100);
+
+  // Draw debug box if debug mode is enabled
+  if (isDebugMode) {
+    let debugX = fieldX;
+    let debugY = pageHeight - fieldY - fieldHeight; // Invert Y for PDF coordinates
+
+    if (pageRotationInDegrees !== 0) {
+      const adjustedPosition = adjustPositionForRotation(
+        pageWidth,
+        pageHeight,
+        debugX,
+        debugY,
+        pageRotationInDegrees,
+      );
+
+      debugX = adjustedPosition.xPos;
+      debugY = adjustedPosition.yPos;
+    }
+
+    page.drawRectangle({
+      x: debugX,
+      y: debugY,
+      width: fieldWidth,
+      height: fieldHeight,
+      borderColor: rgb(1, 0, 0), // Red
+      borderWidth: 1,
+      rotate: degrees(pageRotationInDegrees),
+    });
+  }
+
+  const font = await pdf.embedFont(
+    isSignatureField ? fontCaveat : fontNoto,
+    isSignatureField ? { features: { calt: false } } : undefined,
+  );
+
+  if (field.type === FieldType.SIGNATURE || field.type === FieldType.FREE_SIGNATURE) {
+    await pdf.embedFont(fontCaveat);
+  }
+
+  await match(field)
+    .with(
+      {
+        type: P.union(FieldType.SIGNATURE, FieldType.FREE_SIGNATURE),
+      },
+      async (field) => {
+        if (field.signature?.signatureImageAsBase64) {
+          const image = await pdf.embedPng(field.signature?.signatureImageAsBase64 ?? '');
+
+          let imageWidth = image.width;
+          let imageHeight = image.height;
+
+          const scalingFactor = Math.min(fieldWidth / imageWidth, fieldHeight / imageHeight, 1);
+
+          imageWidth = imageWidth * scalingFactor;
+          imageHeight = imageHeight * scalingFactor;
+
+          let imageX = fieldX + (fieldWidth - imageWidth) / 2;
+          let imageY = fieldY + (fieldHeight - imageHeight) / 2;
+
+          // Invert the Y axis since PDFs use a bottom-left coordinate system
+          imageY = pageHeight - imageY - imageHeight;
+
+          if (pageRotationInDegrees !== 0) {
+            const adjustedPosition = adjustPositionForRotation(
+              pageWidth,
+              pageHeight,
+              imageX,
+              imageY,
+              pageRotationInDegrees,
+            );
+
+            imageX = adjustedPosition.xPos;
+            imageY = adjustedPosition.yPos;
+          }
+
+          page.drawImage(image, {
+            x: imageX,
+            y: imageY,
+            width: imageWidth,
+            height: imageHeight,
+            rotate: degrees(pageRotationInDegrees),
+          });
+        } else {
+          const signatureText = field.signature?.typedSignature ?? '';
+
+          const longestLineInTextForWidth = signatureText
+            .split('\n')
+            .sort((a, b) => b.length - a.length)[0];
+
+          let fontSize = maxFontSize;
+          let textWidth = font.widthOfTextAtSize(longestLineInTextForWidth, fontSize);
+          let textHeight = font.heightAtSize(fontSize);
+
+          const scalingFactor = Math.min(fieldWidth / textWidth, fieldHeight / textHeight, 1);
+          fontSize = Math.max(Math.min(fontSize * scalingFactor, maxFontSize), minFontSize);
+
+          textWidth = font.widthOfTextAtSize(longestLineInTextForWidth, fontSize);
+          textHeight = font.heightAtSize(fontSize);
+
+          let textX = fieldX + (fieldWidth - textWidth) / 2;
+          let textY = fieldY + (fieldHeight - textHeight) / 2;
+
+          // Invert the Y axis since PDFs use a bottom-left coordinate system
+          textY = pageHeight - textY - textHeight;
+
+          if (pageRotationInDegrees !== 0) {
+            const adjustedPosition = adjustPositionForRotation(
+              pageWidth,
+              pageHeight,
+              textX,
+              textY,
+              pageRotationInDegrees,
+            );
+
+            textX = adjustedPosition.xPos;
+            textY = adjustedPosition.yPos;
+          }
+
+          page.drawText(signatureText, {
+            x: textX,
+            y: textY,
+            size: fontSize,
+            font,
+            rotate: degrees(pageRotationInDegrees),
+          });
+        }
+      },
+    )
+    .with({ type: FieldType.CHECKBOX }, (field) => {
+      const meta = ZCheckboxFieldMeta.safeParse(field.fieldMeta);
+
+      if (!meta.success) {
+        console.error(meta.error);
+
+        throw new Error('Invalid checkbox field meta');
+      }
+
+      const values = meta.data.values?.map((item) => ({
+        ...item,
+        value: item.value.length > 0 ? item.value : `empty-value-${item.id}`,
+      }));
+
+      const selected: string[] = fromCheckboxValue(field.customText);
+
+      for (const [index, item] of (values ?? []).entries()) {
+        const offsetY = index * 16;
+
+        const checkbox = pdf.getForm().createCheckBox(`checkbox.${field.secondaryId}.${index}`);
+
+        if (selected.includes(item.value)) {
+          checkbox.check();
+        }
+
+        page.drawText(item.value.includes('empty-value-') ? '' : item.value, {
+          x: fieldX + 16,
+          y: pageHeight - (fieldY + offsetY),
+          size: 12,
+          font,
+          rotate: degrees(pageRotationInDegrees),
+        });
+
+        checkbox.addToPage(page, {
+          x: fieldX,
+          y: pageHeight - (fieldY + offsetY),
+          height: 8,
+          width: 8,
+        });
+      }
+    })
+    .with({ type: FieldType.RADIO }, (field) => {
+      const meta = ZRadioFieldMeta.safeParse(field.fieldMeta);
+
+      if (!meta.success) {
+        console.error(meta.error);
+
+        throw new Error('Invalid radio field meta');
+      }
+
+      const values = meta?.data.values?.map((item) => ({
+        ...item,
+        value: item.value.length > 0 ? item.value : `empty-value-${item.id}`,
+      }));
+
+      const selected = field.customText.split(',');
+
+      for (const [index, item] of (values ?? []).entries()) {
+        const offsetY = index * 16;
+
+        const radio = pdf.getForm().createRadioGroup(`radio.${field.secondaryId}.${index}`);
+
+        page.drawText(item.value.includes('empty-value-') ? '' : item.value, {
+          x: fieldX + 16,
+          y: pageHeight - (fieldY + offsetY),
+          size: 12,
+          font,
+          rotate: degrees(pageRotationInDegrees),
+        });
+
+        radio.addOptionToPage(item.value, page, {
+          x: fieldX,
+          y: pageHeight - (fieldY + offsetY),
+          height: 8,
+          width: 8,
+        });
+
+        if (selected.includes(item.value)) {
+          radio.select(item.value);
+        }
+      }
+    })
+    .otherwise((field) => {
+      const fieldMetaParsers = {
+        [FieldType.TEXT]: ZTextFieldMeta,
+        [FieldType.NUMBER]: ZNumberFieldMeta,
+        [FieldType.DATE]: ZDateFieldMeta,
+        [FieldType.EMAIL]: ZEmailFieldMeta,
+        [FieldType.NAME]: ZNameFieldMeta,
+        [FieldType.INITIALS]: ZInitialsFieldMeta,
+      } as const;
+
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      const Parser = fieldMetaParsers[field.type as keyof typeof fieldMetaParsers];
+      const meta = Parser ? Parser.safeParse(field.fieldMeta) : null;
+
+      const customFontSize = meta?.success && meta.data.fontSize ? meta.data.fontSize : null;
+      const textAlign = meta?.success && meta.data.textAlign ? meta.data.textAlign : 'center';
+      const longestLineInTextForWidth = field.customText
+        .split('\n')
+        .sort((a, b) => b.length - a.length)[0];
+
+      let fontSize = customFontSize || maxFontSize;
+      let textWidth = font.widthOfTextAtSize(longestLineInTextForWidth, fontSize);
+      const textHeight = font.heightAtSize(fontSize);
+
+      if (!customFontSize) {
+        const scalingFactor = Math.min(fieldWidth / textWidth, fieldHeight / textHeight, 1);
+        fontSize = Math.max(Math.min(fontSize * scalingFactor, maxFontSize), minFontSize);
+      }
+
+      textWidth = font.widthOfTextAtSize(longestLineInTextForWidth, fontSize);
+
+      // Add padding similar to web display (roughly 0.5rem equivalent in PDF units)
+      const padding = 8; // PDF points, roughly equivalent to 0.5rem
+
+      // Calculate X position based on text alignment with padding
+      let textX = fieldX + padding; // Left alignment starts after padding
+      if (textAlign === 'center') {
+        textX = fieldX + (fieldWidth - textWidth) / 2; // Center alignment ignores padding
+      } else if (textAlign === 'right') {
+        textX = fieldX + fieldWidth - textWidth - padding; // Right alignment respects right padding
+      }
+
+      let textY = fieldY + (fieldHeight - textHeight) / 2;
+
+      // Invert the Y axis since PDFs use a bottom-left coordinate system
+      textY = pageHeight - textY - textHeight;
+
+      if (pageRotationInDegrees !== 0) {
+        const adjustedPosition = adjustPositionForRotation(
+          pageWidth,
+          pageHeight,
+          textX,
+          textY,
+          pageRotationInDegrees,
+        );
+
+        textX = adjustedPosition.xPos;
+        textY = adjustedPosition.yPos;
+      }
+
+      page.drawText(field.customText, {
+        x: textX,
+        y: textY,
+        size: fontSize,
+        font,
+        rotate: degrees(pageRotationInDegrees),
+      });
+    });
+
+  return pdf;
+};
+
+const adjustPositionForRotation = (
+  pageWidth: number,
+  pageHeight: number,
+  xPos: number,
+  yPos: number,
+  pageRotationInDegrees: number,
+) => {
+  if (pageRotationInDegrees === 270) {
+    xPos = pageWidth - xPos;
+    [xPos, yPos] = [yPos, xPos];
+  }
+
+  if (pageRotationInDegrees === 90) {
+    yPos = pageHeight - yPos;
+    [xPos, yPos] = [yPos, xPos];
+  }
+
+  // Invert all the positions since it's rotated by 180 degrees.
+  if (pageRotationInDegrees === 180) {
+    xPos = pageWidth - xPos;
+    yPos = pageHeight - yPos;
+  }
+
+  return {
+    xPos,
+    yPos,
+  };
+};
diff --git a/packages/lib/server-only/template/create-document-from-template-legacy.ts b/packages/lib/server-only/template/create-document-from-template-legacy.ts
index 7c3b843e7..ea1659a1d 100644
--- a/packages/lib/server-only/template/create-document-from-template-legacy.ts
+++ b/packages/lib/server-only/template/create-document-from-template-legacy.ts
@@ -77,6 +77,7 @@ export const createDocumentFromTemplateLegacy = async ({
       title: template.title,
       visibility: template.team?.teamGlobalSettings?.documentVisibility,
       documentDataId: documentData.id,
+      useLegacyFieldInsertion: template.useLegacyFieldInsertion ?? false,
       recipients: {
         create: template.recipients.map((recipient) => ({
           email: recipient.email,
diff --git a/packages/lib/server-only/template/create-document-from-template.ts b/packages/lib/server-only/template/create-document-from-template.ts
index 07300d184..b17a36835 100644
--- a/packages/lib/server-only/template/create-document-from-template.ts
+++ b/packages/lib/server-only/template/create-document-from-template.ts
@@ -384,6 +384,7 @@ export const createDocumentFromTemplate = async ({
           globalActionAuth: templateAuthOptions.globalActionAuth,
         }),
         visibility: template.visibility || template.team?.teamGlobalSettings?.documentVisibility,
+        useLegacyFieldInsertion: template.useLegacyFieldInsertion ?? false,
         documentMeta: {
           create: {
             subject: override?.subject || template.templateMeta?.subject,
diff --git a/packages/lib/server-only/template/update-template.ts b/packages/lib/server-only/template/update-template.ts
index 6bf41f7b2..dee71d678 100644
--- a/packages/lib/server-only/template/update-template.ts
+++ b/packages/lib/server-only/template/update-template.ts
@@ -20,6 +20,7 @@ export type UpdateTemplateOptions = {
     publicTitle?: string;
     publicDescription?: string;
     type?: Template['type'];
+    useLegacyFieldInsertion?: boolean;
   };
   meta?: Partial<Omit<TemplateMeta, 'id' | 'templateId'>>;
 };
@@ -102,6 +103,7 @@ export const updateTemplate = async ({
       visibility: data?.visibility,
       publicDescription: data?.publicDescription,
       publicTitle: data?.publicTitle,
+      useLegacyFieldInsertion: data?.useLegacyFieldInsertion,
       authOptions,
       templateMeta: {
         upsert: {
diff --git a/packages/lib/types/document.ts b/packages/lib/types/document.ts
index d0be2c225..3709b140c 100644
--- a/packages/lib/types/document.ts
+++ b/packages/lib/types/document.ts
@@ -83,6 +83,7 @@ export const ZDocumentLiteSchema = DocumentSchema.pick({
   deletedAt: true,
   teamId: true,
   templateId: true,
+  useLegacyFieldInsertion: true,
 });
 
 /**
@@ -105,6 +106,7 @@ export const ZDocumentManySchema = DocumentSchema.pick({
   deletedAt: true,
   teamId: true,
   templateId: true,
+  useLegacyFieldInsertion: true,
 }).extend({
   user: UserSchema.pick({
     id: true,
diff --git a/packages/lib/types/template.ts b/packages/lib/types/template.ts
index 591cd345d..2f36336c4 100644
--- a/packages/lib/types/template.ts
+++ b/packages/lib/types/template.ts
@@ -83,6 +83,7 @@ export const ZTemplateLiteSchema = TemplateSchema.pick({
   updatedAt: true,
   publicTitle: true,
   publicDescription: true,
+  useLegacyFieldInsertion: true,
 });
 
 /**
@@ -102,6 +103,7 @@ export const ZTemplateManySchema = TemplateSchema.pick({
   updatedAt: true,
   publicTitle: true,
   publicDescription: true,
+  useLegacyFieldInsertion: true,
 }).extend({
   team: TeamSchema.pick({
     id: true,
diff --git a/packages/prisma/migrations/20250423062206_add_legacy_field_insertion_column/migration.sql b/packages/prisma/migrations/20250423062206_add_legacy_field_insertion_column/migration.sql
new file mode 100644
index 000000000..2f466fee3
--- /dev/null
+++ b/packages/prisma/migrations/20250423062206_add_legacy_field_insertion_column/migration.sql
@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "Document" ADD COLUMN     "useLegacyFieldInsertion" BOOLEAN NOT NULL DEFAULT true;
+
+-- AlterTable
+ALTER TABLE "Template" ADD COLUMN     "useLegacyFieldInsertion" BOOLEAN NOT NULL DEFAULT true;
diff --git a/packages/prisma/migrations/20250423062248_set_legacy_field_insert_default_to_false/migration.sql b/packages/prisma/migrations/20250423062248_set_legacy_field_insert_default_to_false/migration.sql
new file mode 100644
index 000000000..f8e2316e2
--- /dev/null
+++ b/packages/prisma/migrations/20250423062248_set_legacy_field_insert_default_to_false/migration.sql
@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "Document" ALTER COLUMN "useLegacyFieldInsertion" SET DEFAULT false;
+
+-- AlterTable
+ALTER TABLE "Template" ALTER COLUMN "useLegacyFieldInsertion" SET DEFAULT false;
diff --git a/packages/prisma/schema.prisma b/packages/prisma/schema.prisma
index 04b60843f..4eec0bbc7 100644
--- a/packages/prisma/schema.prisma
+++ b/packages/prisma/schema.prisma
@@ -327,18 +327,21 @@ model Document {
   fields         Field[]
   shareLinks     DocumentShareLink[]
   documentDataId String
-  documentData   DocumentData        @relation(fields: [documentDataId], references: [id], onDelete: Cascade)
   documentMeta   DocumentMeta?
   createdAt      DateTime            @default(now())
   updatedAt      DateTime            @default(now()) @updatedAt
   completedAt    DateTime?
   deletedAt      DateTime?
   teamId         Int?
-  team           Team?               @relation(fields: [teamId], references: [id])
   templateId     Int?
-  template       Template?           @relation(fields: [templateId], references: [id], onDelete: SetNull)
   source         DocumentSource
 
+  useLegacyFieldInsertion Boolean @default(false)
+
+  documentData DocumentData @relation(fields: [documentDataId], references: [id], onDelete: Cascade)
+  team         Team?        @relation(fields: [teamId], references: [id])
+  template     Template?    @relation(fields: [templateId], references: [id], onDelete: SetNull)
+
   auditLogs DocumentAuditLog[]
 
   @@unique([documentDataId])
@@ -706,6 +709,8 @@ model Template {
   publicTitle            String             @default("")
   publicDescription      String             @default("")
 
+  useLegacyFieldInsertion Boolean @default(false)
+
   team                 Team?               @relation(fields: [teamId], references: [id], onDelete: Cascade)
   templateDocumentData DocumentData        @relation(fields: [templateDocumentDataId], references: [id], onDelete: Cascade)
   user                 User                @relation(fields: [userId], references: [id], onDelete: Cascade)
diff --git a/packages/tailwind-config/index.cjs b/packages/tailwind-config/index.cjs
index ca0334fef..1a2a1b8ff 100644
--- a/packages/tailwind-config/index.cjs
+++ b/packages/tailwind-config/index.cjs
@@ -107,6 +107,14 @@ module.exports = {
           900: '#364772',
           950: '#252d46',
         },
+        recipient: {
+          green: 'hsl(var(--recipient-green))',
+          blue: 'hsl(var(--recipient-blue))',
+          purple: 'hsl(var(--recipient-purple))',
+          orange: 'hsl(var(--recipient-orange))',
+          yellow: 'hsl(var(--recipient-yellow))',
+          pink: 'hsl(var(--recipient-pink))',
+        },
       },
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
diff --git a/packages/trpc/server/document-router/update-document.types.ts b/packages/trpc/server/document-router/update-document.types.ts
index a68391499..e0f91b482 100644
--- a/packages/trpc/server/document-router/update-document.types.ts
+++ b/packages/trpc/server/document-router/update-document.types.ts
@@ -44,6 +44,7 @@ export const ZUpdateDocumentRequestSchema = z.object({
       visibility: ZDocumentVisibilitySchema.optional(),
       globalAccessAuth: ZDocumentAccessAuthTypesSchema.nullish(),
       globalActionAuth: ZDocumentActionAuthTypesSchema.nullish(),
+      useLegacyFieldInsertion: z.boolean().optional(),
     })
     .optional(),
   meta: z
diff --git a/packages/trpc/server/template-router/schema.ts b/packages/trpc/server/template-router/schema.ts
index f2f4691ca..2d8481395 100644
--- a/packages/trpc/server/template-router/schema.ts
+++ b/packages/trpc/server/template-router/schema.ts
@@ -153,6 +153,7 @@ export const ZUpdateTemplateRequestSchema = z.object({
         )
         .optional(),
       type: z.nativeEnum(TemplateType).optional(),
+      useLegacyFieldInsertion: z.boolean().optional(),
     })
     .optional(),
   meta: z
diff --git a/packages/ui/components/document/document-read-only-fields.tsx b/packages/ui/components/document/document-read-only-fields.tsx
new file mode 100644
index 000000000..4dcf72104
--- /dev/null
+++ b/packages/ui/components/document/document-read-only-fields.tsx
@@ -0,0 +1,170 @@
+import { useState } from 'react';
+
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { DocumentMeta, Field, Recipient, TemplateMeta } from '@prisma/client';
+import { SigningStatus } from '@prisma/client';
+import { Clock, EyeOffIcon } from 'lucide-react';
+
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import type { DocumentField } from '@documenso/lib/server-only/field/get-fields-for-document';
+import { parseMessageDescriptor } from '@documenso/lib/utils/i18n';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { FieldRootContainer } from '@documenso/ui/components/field/field';
+import { SignatureIcon } from '@documenso/ui/icons/signature';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { PopoverHover } from '@documenso/ui/primitives/popover';
+
+import { getRecipientColorStyles } from '../../lib/recipient-colors';
+import { FieldContent } from '../../primitives/document-flow/field-content';
+
+export type DocumentReadOnlyFieldsProps = {
+  fields: DocumentField[];
+  documentMeta?: DocumentMeta | TemplateMeta;
+
+  showFieldStatus?: boolean;
+
+  /**
+   * Required if you want to show colors.
+   *
+   * Can't derive this from the fields because sometimes recipients don't have fields
+   * yet.
+   */
+  recipientIds?: number[];
+
+  /**
+   * Whether to show the recipient tooltip.
+   *
+   * @default false
+   */
+  showRecipientTooltip?: boolean;
+
+  /**
+   * Whether to color code the recipient fields.
+   *
+   * @default false
+   */
+  showRecipientColors?: boolean;
+};
+
+export const mapFieldsWithRecipients = (
+  fields: Field[],
+  recipients: Recipient[],
+): DocumentField[] => {
+  return fields.map((field) => {
+    const recipient = recipients.find((recipient) => recipient.id === field.recipientId) || {
+      id: field.recipientId,
+      name: 'Unknown',
+      email: 'Unknown',
+      signingStatus: SigningStatus.NOT_SIGNED,
+    };
+
+    return { ...field, recipient, signature: null };
+  });
+};
+
+export const DocumentReadOnlyFields = ({
+  documentMeta,
+  fields,
+  recipientIds = [],
+  showFieldStatus = true,
+  showRecipientTooltip = false,
+  showRecipientColors = false,
+}: DocumentReadOnlyFieldsProps) => {
+  const { _ } = useLingui();
+
+  const [hiddenFieldIds, setHiddenFieldIds] = useState<Record<string, boolean>>({});
+
+  const handleHideField = (fieldId: string) => {
+    setHiddenFieldIds((prev) => ({ ...prev, [fieldId]: true }));
+  };
+
+  return (
+    <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+      {fields.map(
+        (field) =>
+          !hiddenFieldIds[field.secondaryId] && (
+            <FieldRootContainer
+              field={field}
+              key={field.id}
+              color={
+                showRecipientColors
+                  ? getRecipientColorStyles(
+                      Math.max(
+                        recipientIds.findIndex((id) => id === field.recipientId),
+                        0,
+                      ),
+                    )
+                  : undefined
+              }
+            >
+              {showRecipientTooltip && (
+                <div className="absolute -right-3 -top-3">
+                  <PopoverHover
+                    trigger={
+                      <Avatar className="h-6 w-6 border-2 border-solid border-gray-200/50 transition-colors hover:border-gray-200">
+                        <AvatarFallback className="bg-neutral-50 text-xs text-gray-400">
+                          {extractInitials(field.recipient.name || field.recipient.email)}
+                        </AvatarFallback>
+                      </Avatar>
+                    }
+                    contentProps={{
+                      className: 'relative flex w-fit flex-col p-4 text-sm',
+                    }}
+                  >
+                    {showFieldStatus && (
+                      <Badge
+                        className="mx-auto mb-1 py-0.5"
+                        variant={
+                          field.recipient.signingStatus === SigningStatus.SIGNED
+                            ? 'default'
+                            : 'secondary'
+                        }
+                      >
+                        {field.recipient.signingStatus === SigningStatus.SIGNED ? (
+                          <>
+                            <SignatureIcon className="mr-1 h-3 w-3" />
+                            <Trans>Signed</Trans>
+                          </>
+                        ) : (
+                          <>
+                            <Clock className="mr-1 h-3 w-3" />
+                            <Trans>Pending</Trans>
+                          </>
+                        )}
+                      </Badge>
+                    )}
+
+                    <p className="text-center font-semibold">
+                      <span>
+                        {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type])} field
+                      </span>
+                    </p>
+
+                    <p className="text-muted-foreground mt-1 text-center text-xs">
+                      {field.recipient.name
+                        ? `${field.recipient.name} (${field.recipient.email})`
+                        : field.recipient.email}{' '}
+                    </p>
+
+                    <button
+                      className="absolute right-0 top-0 my-1 p-2 focus:outline-none focus-visible:ring-0"
+                      onClick={() => handleHideField(field.secondaryId)}
+                      title="Hide field"
+                    >
+                      <EyeOffIcon className="h-3 w-3" />
+                    </button>
+                  </PopoverHover>
+                </div>
+              )}
+
+              <FieldContent field={field} documentMeta={documentMeta} />
+            </FieldRootContainer>
+          ),
+      )}
+    </ElementVisible>
+  );
+};
diff --git a/packages/ui/components/field/field.tsx b/packages/ui/components/field/field.tsx
index bc648ccbf..e3acf8005 100644
--- a/packages/ui/components/field/field.tsx
+++ b/packages/ui/components/field/field.tsx
@@ -1,71 +1,18 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
-import type { Field } from '@prisma/client';
+import { type Field, FieldType } from '@prisma/client';
 import { createPortal } from 'react-dom';
 
 import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
-import type { TFieldMetaSchema } from '@documenso/lib/types/field-meta';
-import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
+import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 
+import type { RecipientColorStyles } from '../../lib/recipient-colors';
 import { cn } from '../../lib/utils';
-import { Card, CardContent } from '../../primitives/card';
-
-export type FieldRootContainerProps = {
-  field: Field;
-  children: React.ReactNode;
-};
 
 export type FieldContainerPortalProps = {
   field: Field;
   className?: string;
   children: React.ReactNode;
-  cardClassName?: string;
-};
-
-const getCardClassNames = (
-  field: Field,
-  parsedField: TFieldMetaSchema | null,
-  isValidating: boolean,
-  checkBoxOrRadio: boolean,
-  cardClassName?: string,
-) => {
-  const baseClasses =
-    'field--FieldRootContainer field-card-container relative z-20 h-full w-full transition-all';
-
-  const insertedClasses =
-    'bg-primary/20 border-primary ring-primary/20 ring-offset-primary/20 ring-2 ring-offset-2 dark:shadow-none';
-  const nonRequiredClasses =
-    'border-yellow-300 shadow-none ring-2 ring-yellow-100 ring-offset-2 ring-offset-yellow-100 dark:border-2';
-  const validatingClasses = 'border-orange-300 ring-1 ring-orange-300';
-  const requiredClasses =
-    'border-red-500 shadow-none ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 hover:text-red-500';
-  const requiredCheckboxRadioClasses = 'border-dashed border-red-500';
-
-  if (checkBoxOrRadio) {
-    return cn(
-      {
-        [insertedClasses]: field.inserted,
-        'ring-offset-yellow-200 border-dashed border-yellow-300 ring-2 ring-yellow-200 ring-offset-2 dark:shadow-none':
-          !field.inserted && !parsedField?.required,
-        'shadow-none': !field.inserted,
-        [validatingClasses]: !field.inserted && isValidating,
-        [requiredCheckboxRadioClasses]: !field.inserted && parsedField?.required,
-      },
-      cardClassName,
-    );
-  }
-
-  return cn(
-    baseClasses,
-    {
-      [insertedClasses]: field.inserted,
-      [nonRequiredClasses]: !field.inserted && !parsedField?.required,
-      'shadow-none': !field.inserted && checkBoxOrRadio,
-      [validatingClasses]: !field.inserted && isValidating,
-      [requiredClasses]: !field.inserted && parsedField?.required && !checkBoxOrRadio,
-    },
-    cardClassName,
-  );
 };
 
 export function FieldContainerPortal({
@@ -76,13 +23,10 @@ export function FieldContainerPortal({
   const coords = useFieldPageCoords(field);
 
   const isCheckboxOrRadioField = field.type === 'CHECKBOX' || field.type === 'RADIO';
-  const isFieldSigned = field.inserted;
 
   const style = {
     top: `${coords.y}px`,
     left: `${coords.x}px`,
-    // height: `${coords.height}px`,
-    // width: `${coords.width}px`,
     ...(!isCheckboxOrRadioField && {
       height: `${coords.height}px`,
       width: `${coords.width}px`,
@@ -97,7 +41,14 @@ export function FieldContainerPortal({
   );
 }
 
-export function FieldRootContainer({ field, children, cardClassName }: FieldContainerPortalProps) {
+export type FieldRootContainerProps = {
+  field: Field;
+  color?: RecipientColorStyles;
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function FieldRootContainer({ field, children, color, className }: FieldRootContainerProps) {
   const [isValidating, setIsValidating] = useState(false);
   const ref = React.useRef<HTMLDivElement>(null);
 
@@ -121,33 +72,26 @@ export function FieldRootContainer({ field, children, cardClassName }: FieldCont
     };
   }, []);
 
-  const parsedField = useMemo(
-    () => (field.fieldMeta ? ZFieldMetaSchema.parse(field.fieldMeta) : null),
-    [field.fieldMeta],
-  );
-  const isCheckboxOrRadio = useMemo(
-    () => parsedField?.type === 'checkbox' || parsedField?.type === 'radio',
-    [parsedField],
-  );
-
-  const cardClassNames = useMemo(
-    () => getCardClassNames(field, parsedField, isValidating, isCheckboxOrRadio, cardClassName),
-    [field, parsedField, isValidating, isCheckboxOrRadio, cardClassName],
-  );
-
   return (
     <FieldContainerPortal field={field}>
-      <Card
+      <div
         id={`field-${field.id}`}
         ref={ref}
         data-field-type={field.type}
         data-inserted={field.inserted ? 'true' : 'false'}
-        className={cardClassNames}
+        className={cn(
+          'field--FieldRootContainer field-card-container dark-mode-disabled group relative z-20 flex h-full w-full items-center rounded-[2px] bg-white/90 ring-2 ring-gray-200 transition-all',
+          color?.base,
+          {
+            'px-2': field.type !== FieldType.SIGNATURE && field.type !== FieldType.FREE_SIGNATURE,
+            'justify-center': !field.inserted,
+            'ring-orange-300': isValidating && isFieldUnsignedAndRequired(field),
+          },
+          className,
+        )}
       >
-        <CardContent className="text-foreground hover:shadow-primary-foreground group flex h-full w-full flex-col items-center justify-center p-2">
-          {children}
-        </CardContent>
-      </Card>
+        {children}
+      </div>
     </FieldContainerPortal>
   );
 }
diff --git a/packages/ui/lib/recipient-colors.ts b/packages/ui/lib/recipient-colors.ts
new file mode 100644
index 000000000..6a9c30227
--- /dev/null
+++ b/packages/ui/lib/recipient-colors.ts
@@ -0,0 +1,95 @@
+// !: We declare all of our classes here since TailwindCSS will remove any unused CSS classes,
+// !: therefore doing this at runtime is not possible without whitelisting a set of classnames.
+// !:
+// !: This will later be improved as we move to a CSS variable approach and rotate the lightness
+
+export type RecipientColorMap = Record<number, RecipientColorStyles>;
+
+export type RecipientColorStyles = {
+  base: string;
+  fieldItem: string;
+  fieldItemInitials: string;
+  comboxBoxTrigger: string;
+  comboxBoxItem: string;
+};
+
+// !: values of the declared variable to do all the background, border and shadow styles.
+export const RECIPIENT_COLOR_STYLES = {
+  green: {
+    base: 'ring-recipient-green hover:bg-recipient-green/30',
+    fieldItem: 'group/field-item rounded-[2px]',
+    fieldItemInitials: 'group-hover/field-item:bg-recipient-green',
+    comboxBoxTrigger:
+      'ring-2 ring-recipient-green hover:bg-recipient-green/15 active:bg-recipient-green/15 shadow-[0_0_0_5px_hsl(var(--recipient-green)/10%),0_0_0_2px_hsl(var(--recipient-green)/60%),0_0_0_0.5px_hsl(var(--recipient-green))]',
+    comboxBoxItem: 'hover:bg-recipient-green/15 active:bg-recipient-green/15',
+  },
+
+  blue: {
+    base: 'ring-recipient-blue hover:bg-recipient-blue/30',
+    fieldItem: 'group/field-item rounded-[2px]',
+    fieldItemInitials: 'group-hover/field-item:bg-recipient-blue',
+    comboxBoxTrigger:
+      'ring-2 ring-recipient-blue hover:bg-recipient-blue/15 active:bg-recipient-blue/15 shadow-[0_0_0_5px_hsl(var(--recipient-blue)/10%),0_0_0_2px_hsl(var(--recipient-blue)/60%),0_0_0_0.5px_hsl(var(--recipient-blue))]',
+    comboxBoxItem: 'ring-recipient-blue hover:bg-recipient-blue/15 active:bg-recipient-blue/15',
+  },
+
+  purple: {
+    base: 'ring-recipient-purple hover:bg-recipient-purple/30',
+    fieldItem: 'group/field-item rounded-[2px]',
+    fieldItemInitials: 'group-hover/field-item:bg-recipient-purple',
+    comboxBoxTrigger:
+      'ring-2 ring-recipient-purple hover:bg-recipient-purple/15 active:bg-recipient-purple/15 shadow-[0_0_0_5px_hsl(var(--recipient-purple)/10%),0_0_0_2px_hsl(var(--recipient-purple)/60%),0_0_0_0.5px_hsl(var(--recipient-purple))]',
+    comboxBoxItem: 'hover:bg-recipient-purple/15 active:bg-recipient-purple/15',
+  },
+
+  orange: {
+    base: 'ring-recipient-orange hover:bg-recipient-orange/30',
+    fieldItem: 'group/field-item rounded-[2px]',
+    fieldItemInitials: 'group-hover/field-item:bg-recipient-orange',
+    comboxBoxTrigger:
+      'ring-2 ring-recipient-orange hover:bg-recipient-orange/15 active:bg-recipient-orange/15 shadow-[0_0_0_5px_hsl(var(--recipient-orange)/10%),0_0_0_2px_hsl(var(--recipient-orange)/60%),0_0_0_0.5px_hsl(var(--recipient-orange))]',
+    comboxBoxItem: 'hover:bg-recipient-orange/15 active:bg-recipient-orange/15',
+  },
+
+  yellow: {
+    base: 'ring-recipient-yellow hover:bg-recipient-yellow/30',
+    fieldItem: 'group/field-item rounded-[2px]',
+    fieldItemInitials: 'group-hover/field-item:bg-recipient-yellow',
+    comboxBoxTrigger:
+      'ring-2 ring-recipient-yellow hover:bg-recipient-yellow/15 active:bg-recipient-yellow/15 shadow-[0_0_0_5px_hsl(var(--recipient-yellow)/10%),0_0_0_2px_hsl(var(--recipient-yellow)/60%),0_0_0_0.5px_hsl(var(--recipient-yellow))]',
+    comboxBoxItem: 'hover:bg-recipient-yellow/15 active:bg-recipient-yellow/15',
+  },
+
+  pink: {
+    base: 'ring-recipient-pink hover:bg-recipient-pink/30',
+    fieldItem: 'group/field-item rounded-[2px]',
+    fieldItemInitials: 'group-hover/field-item:bg-recipient-pink',
+    comboxBoxTrigger:
+      'ring-2 ring-recipient-pink hover:bg-recipient-pink/15 active:bg-recipient-pink/15 shadow-[0_0_0_5px_hsl(var(--recipient-pink)/10%),0_0_0_2px_hsl(var(--recipient-pink)/60%),0_0_0_0.5px_hsl(var(--recipient-pink',
+    comboxBoxItem: 'hover:bg-recipient-pink/15 active:bg-recipient-pink/15',
+  },
+} satisfies Record<string, RecipientColorStyles>;
+
+export type CombinedStylesKey = keyof typeof RECIPIENT_COLOR_STYLES;
+
+export const AVAILABLE_RECIPIENT_COLORS = [
+  'green',
+  'blue',
+  'purple',
+  'orange',
+  'yellow',
+  'pink',
+] satisfies CombinedStylesKey[];
+
+export const useRecipientColors = (index: number) => {
+  const key = AVAILABLE_RECIPIENT_COLORS[index % AVAILABLE_RECIPIENT_COLORS.length];
+
+  return RECIPIENT_COLOR_STYLES[key];
+};
+
+export const getRecipientColorStyles = (index: number) => {
+  // Disabling the rule since the hook doesn't do anything special and can
+  // be used universally.
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return useRecipientColors(index);
+};
diff --git a/packages/ui/lib/signer-colors.ts b/packages/ui/lib/signer-colors.ts
deleted file mode 100644
index 862b75e58..000000000
--- a/packages/ui/lib/signer-colors.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-// !: We declare all of our classes here since TailwindCSS will remove any unused CSS classes,
-// !: therefore doing this at runtime is not possible without whitelisting a set of classnames.
-// !:
-// !: This will later be improved as we move to a CSS variable approach and rotate the lightness
-// !: values of the declared variable to do all the background, border and shadow styles.
-export const SIGNER_COLOR_STYLES = {
-  green: {
-    default: {
-      background: 'bg-[hsl(var(--signer-green))]',
-      base: 'rounded-lg shadow-[0_0_0_5px_hsl(var(--signer-green)/10%),0_0_0_2px_hsl(var(--signer-green)/60%),0_0_0_0.5px_hsl(var(--signer-green))]',
-      fieldItem:
-        'group/field-item p-2 border-none ring-none hover:bg-gradient-to-r hover:from-[hsl(var(--signer-green))]/10 hover:to-[hsl(var(--signer-green))]/10',
-      fieldItemInitials:
-        'opacity-0 transition duration-200 group-hover/field-item:opacity-100 group-hover/field-item:bg-[hsl(var(--signer-green))]',
-      comboxBoxItem:
-        'hover:bg-[hsl(var(--signer-green)/15%)] active:bg-[hsl(var(--signer-green)/15%)]',
-    },
-  },
-
-  blue: {
-    default: {
-      background: 'bg-[hsl(var(--signer-blue))]',
-      base: 'rounded-lg shadow-[0_0_0_5px_hsl(var(--signer-blue)/10%),0_0_0_2px_hsl(var(--signer-blue)/60%),0_0_0_0.5px_hsl(var(--signer-blue))]',
-      fieldItem:
-        'group/field-item p-2 border-none ring-none hover:bg-gradient-to-r hover:from-[hsl(var(--signer-blue))]/10 hover:to-[hsl(var(--signer-blue))]/10',
-      fieldItemInitials:
-        'opacity-0 transition duration-200 group-hover/field-item:opacity-100 group-hover/field-item:bg-[hsl(var(--signer-blue))]',
-      comboxBoxItem:
-        'hover:bg-[hsl(var(--signer-blue)/15%)] active:bg-[hsl(var(--signer-blue)/15%)]',
-    },
-  },
-
-  purple: {
-    default: {
-      background: 'bg-[hsl(var(--signer-purple))]',
-      base: 'rounded-lg shadow-[0_0_0_5px_hsl(var(--signer-purple)/10%),0_0_0_2px_hsl(var(--signer-purple)/60%),0_0_0_0.5px_hsl(var(--signer-purple))]',
-      fieldItem:
-        'group/field-item p-2 border-none ring-none hover:bg-gradient-to-r hover:from-[hsl(var(--signer-purple))]/10 hover:to-[hsl(var(--signer-purple))]/10',
-      fieldItemInitials:
-        'opacity-0 transition duration-200 group-hover/field-item:opacity-100 group-hover/field-item:bg-[hsl(var(--signer-purple))]',
-      comboxBoxItem:
-        'hover:bg-[hsl(var(--signer-purple)/15%)] active:bg-[hsl(var(--signer-purple)/15%)]',
-    },
-  },
-
-  orange: {
-    default: {
-      background: 'bg-[hsl(var(--signer-orange))]',
-      base: 'rounded-lg shadow-[0_0_0_5px_hsl(var(--signer-orange)/10%),0_0_0_2px_hsl(var(--signer-orange)/60%),0_0_0_0.5px_hsl(var(--signer-orange))]',
-      fieldItem:
-        'group/field-item p-2 border-none ring-none hover:bg-gradient-to-r hover:from-[hsl(var(--signer-orange))]/10 hover:to-[hsl(var(--signer-orange))]/10',
-      fieldItemInitials:
-        'opacity-0 transition duration-200 group-hover/field-item:opacity-100 group-hover/field-item:bg-[hsl(var(--signer-orange))]',
-      comboxBoxItem:
-        'hover:bg-[hsl(var(--signer-orange)/15%)] active:bg-[hsl(var(--signer-orange)/15%)]',
-    },
-  },
-
-  yellow: {
-    default: {
-      background: 'bg-[hsl(var(--signer-yellow))]',
-      base: 'rounded-lg shadow-[0_0_0_5px_hsl(var(--signer-yellow)/10%),0_0_0_2px_hsl(var(--signer-yellow)/60%),0_0_0_0.5px_hsl(var(--signer-yellow))]',
-      fieldItem:
-        'group/field-item p-2 border-none ring-none hover:bg-gradient-to-r hover:from-[hsl(var(--signer-yellow))]/10 hover:to-[hsl(var(--signer-yellow))]/10',
-      fieldItemInitials:
-        'opacity-0 transition duration-200 group-hover/field-item:opacity-100 group-hover/field-item:bg-[hsl(var(--signer-yellow))]',
-      comboxBoxItem:
-        'hover:bg-[hsl(var(--signer-yellow)/15%)] active:bg-[hsl(var(--signer-yellow)/15%)]',
-    },
-  },
-
-  pink: {
-    default: {
-      background: 'bg-[hsl(var(--signer-pink))]',
-      base: 'rounded-lg shadow-[0_0_0_5px_hsl(var(--signer-pink)/10%),0_0_0_2px_hsl(var(--signer-pink)/60%),0_0_0_0.5px_hsl(var(--signer-pink))]',
-      fieldItem:
-        'group/field-item p-2 border-none ring-none hover:bg-gradient-to-r hover:from-[hsl(var(--signer-pink))]/10 hover:to-[hsl(var(--signer-pink))]/10',
-      fieldItemInitials:
-        'opacity-0 transition duration-200 group-hover/field-item:opacity-100 group-hover/field-item:bg-[hsl(var(--signer-pink))]',
-      comboxBoxItem:
-        'hover:bg-[hsl(var(--signer-pink)/15%)] active:bg-[hsl(var(--signer-pink)/15%)]',
-    },
-  },
-};
-
-export type CombinedStylesKey = keyof typeof SIGNER_COLOR_STYLES;
-
-export const AVAILABLE_SIGNER_COLORS = [
-  'green',
-  'blue',
-  'purple',
-  'orange',
-  'yellow',
-  'pink',
-] satisfies CombinedStylesKey[];
-
-export const useSignerColors = (index: number) => {
-  const key = AVAILABLE_SIGNER_COLORS[index % AVAILABLE_SIGNER_COLORS.length];
-
-  return SIGNER_COLOR_STYLES[key];
-};
-
-export const getSignerColorStyles = (index: number) => {
-  // Disabling the rule since the hook doesn't do anything special and can
-  // be used universally.
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  return useSignerColors(index);
-};
diff --git a/packages/ui/primitives/document-flow/add-fields.tsx b/packages/ui/primitives/document-flow/add-fields.tsx
index 377bc0812..145e9a89c 100644
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@@ -3,9 +3,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { Prisma } from '@prisma/client';
 import type { Field, Recipient } from '@prisma/client';
-import { FieldType, RecipientRole, SendStatus } from '@prisma/client';
+import { FieldType, Prisma, RecipientRole, SendStatus } from '@prisma/client';
 import {
   CalendarDays,
   CheckSquare,
@@ -38,7 +37,7 @@ import {
 } from '@documenso/lib/utils/recipients';
 
 import { FieldToolTip } from '../../components/field/field-tooltip';
-import { useSignerColors } from '../../lib/signer-colors';
+import { useRecipientColors } from '../../lib/recipient-colors';
 import { cn } from '../../lib/utils';
 import { Alert, AlertDescription } from '../alert';
 import { Card, CardContent } from '../card';
@@ -175,9 +174,10 @@ export const AddFieldsFormPartial = ({
     null,
   );
   const selectedSignerIndex = recipients.findIndex((r) => r.id === selectedSigner?.id);
-  const selectedSignerStyles = useSignerColors(
+  const selectedSignerStyles = useRecipientColors(
     selectedSignerIndex === -1 ? 0 : selectedSignerIndex,
   );
+
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
 
   const filterFieldsWithEmptyValues = (fields: typeof localFields, fieldType: string) =>
@@ -593,13 +593,12 @@ export const AddFieldsFormPartial = ({
               {selectedField && (
                 <div
                   className={cn(
-                    'text-muted-foreground dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center bg-white transition duration-200 [container-type:size]',
-                    selectedSignerStyles.default.base,
+                    'text-muted-foreground dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center rounded-[2px] bg-white ring-2 transition duration-200 [container-type:size]',
+                    selectedSignerStyles?.base,
                     {
                       '-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,
                       'dark:text-black/60': isFieldWithinBounds,
                     },
-                    // selectedField === FieldType.SIGNATURE && fontCaveat.className,
                   )}
                   style={{
                     top: coords.y,
@@ -646,7 +645,6 @@ export const AddFieldsFormPartial = ({
                         setCurrentField(field);
                         handleAdvancedSettings();
                       }}
-                      hideRecipients={hideRecipients}
                       hasErrors={!!hasFieldError}
                       active={activeFieldId === field.formId}
                       onFieldActivate={() => setActiveFieldId(field.formId)}
@@ -677,7 +675,6 @@ export const AddFieldsFormPartial = ({
                       <Card
                         className={cn(
                           'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
-                          // selectedSignerStyles.borderClass,
                         )}
                       >
                         <CardContent className="flex flex-col items-center justify-center px-6 py-4">
@@ -702,7 +699,6 @@ export const AddFieldsFormPartial = ({
                       <Card
                         className={cn(
                           'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
-                          // selectedSignerStyles.borderClass,
                         )}
                       >
                         <CardContent className="flex flex-col items-center justify-center px-6 py-4">
@@ -728,7 +724,6 @@ export const AddFieldsFormPartial = ({
                       <Card
                         className={cn(
                           'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
-                          // selectedSignerStyles.borderClass,
                         )}
                       >
                         <CardContent className="flex flex-col items-center justify-center px-6 py-4">
@@ -754,7 +749,6 @@ export const AddFieldsFormPartial = ({
                       <Card
                         className={cn(
                           'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
-                          // selectedSignerStyles.borderClass,
                         )}
                       >
                         <CardContent className="p-4">
@@ -780,7 +774,6 @@ export const AddFieldsFormPartial = ({
                       <Card
                         className={cn(
                           'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
-                          // selectedSignerStyles.borderClass,
                         )}
                       >
                         <CardContent className="p-4">
@@ -806,7 +799,6 @@ export const AddFieldsFormPartial = ({
                       <Card
                         className={cn(
                           'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
-                          // selectedSignerStyles.borderClass,
                         )}
                       >
                         <CardContent className="p-4">
@@ -832,7 +824,6 @@ export const AddFieldsFormPartial = ({
                       <Card
                         className={cn(
                           'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
-                          // selectedSignerStyles.borderClass,
                         )}
                       >
                         <CardContent className="p-4">
@@ -858,7 +849,6 @@ export const AddFieldsFormPartial = ({
                       <Card
                         className={cn(
                           'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
-                          // selectedSignerStyles.borderClass,
                         )}
                       >
                         <CardContent className="p-4">
@@ -884,7 +874,6 @@ export const AddFieldsFormPartial = ({
                       <Card
                         className={cn(
                           'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
-                          // selectedSignerStyles.borderClass,
                         )}
                       >
                         <CardContent className="p-4">
@@ -911,7 +900,6 @@ export const AddFieldsFormPartial = ({
                       <Card
                         className={cn(
                           'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
-                          // selectedSignerStyles.borderClass,
                         )}
                       >
                         <CardContent className="p-4">
diff --git a/packages/ui/primitives/document-flow/add-settings.tsx b/packages/ui/primitives/document-flow/add-settings.tsx
index 2f1534b7e..b1f33517d 100644
--- a/packages/ui/primitives/document-flow/add-settings.tsx
+++ b/packages/ui/primitives/document-flow/add-settings.tsx
@@ -24,6 +24,10 @@ import {
   DocumentGlobalAuthActionSelect,
   DocumentGlobalAuthActionTooltip,
 } from '@documenso/ui/components/document/document-global-auth-action-select';
+import {
+  DocumentReadOnlyFields,
+  mapFieldsWithRecipients,
+} from '@documenso/ui/components/document/document-read-only-fields';
 import {
   DocumentVisibilitySelect,
   DocumentVisibilityTooltip,
@@ -59,7 +63,6 @@ import {
   DocumentFlowFormContainerHeader,
   DocumentFlowFormContainerStep,
 } from './document-flow-root';
-import { ShowFieldItem } from './show-field-item';
 import type { DocumentFlowStep } from './types';
 
 export type AddSettingsFormProps = {
@@ -154,10 +157,13 @@ export const AddSettingsFormPartial = ({
       />
 
       <DocumentFlowFormContainerContent>
-        {isDocumentPdfLoaded &&
-          fields.map((field, index) => (
-            <ShowFieldItem key={index} field={field} recipients={recipients} />
-          ))}
+        {isDocumentPdfLoaded && (
+          <DocumentReadOnlyFields
+            showRecipientColors={true}
+            recipientIds={recipients.map((recipient) => recipient.id)}
+            fields={mapFieldsWithRecipients(fields, recipients)}
+          />
+        )}
 
         <Form {...form}>
           <fieldset
diff --git a/packages/ui/primitives/document-flow/add-signers.tsx b/packages/ui/primitives/document-flow/add-signers.tsx
index 6ab770c5a..cac83cd75 100644
--- a/packages/ui/primitives/document-flow/add-signers.tsx
+++ b/packages/ui/primitives/document-flow/add-signers.tsx
@@ -23,6 +23,10 @@ import { RecipientActionAuthSelect } from '@documenso/ui/components/recipient/re
 import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
 import { cn } from '@documenso/ui/lib/utils';
 
+import {
+  DocumentReadOnlyFields,
+  mapFieldsWithRecipients,
+} from '../../components/document/document-read-only-fields';
 import { Button } from '../button';
 import { Checkbox } from '../checkbox';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../form/form';
@@ -40,7 +44,6 @@ import {
   DocumentFlowFormContainerHeader,
   DocumentFlowFormContainerStep,
 } from './document-flow-root';
-import { ShowFieldItem } from './show-field-item';
 import { SigningOrderConfirmation } from './signing-order-confirmation';
 import type { DocumentFlowStep } from './types';
 
@@ -368,10 +371,13 @@ export const AddSignersFormPartial = ({
         description={documentFlow.description}
       />
       <DocumentFlowFormContainerContent>
-        {isDocumentPdfLoaded &&
-          fields.map((field, index) => (
-            <ShowFieldItem key={index} field={field} recipients={recipients} />
-          ))}
+        {isDocumentPdfLoaded && (
+          <DocumentReadOnlyFields
+            showRecipientColors={true}
+            recipientIds={recipients.map((recipient) => recipient.id)}
+            fields={mapFieldsWithRecipients(fields, recipients)}
+          />
+        )}
 
         <AnimateGenericFadeInOut motionKey={showAdvancedSettings ? 'Show' : 'Hide'}>
           <Form {...form}>
diff --git a/packages/ui/primitives/document-flow/add-subject.tsx b/packages/ui/primitives/document-flow/add-subject.tsx
index 93ff374de..92fe8f111 100644
--- a/packages/ui/primitives/document-flow/add-subject.tsx
+++ b/packages/ui/primitives/document-flow/add-subject.tsx
@@ -16,6 +16,10 @@ import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 
 import { CopyTextButton } from '../../components/common/copy-text-button';
 import { DocumentEmailCheckboxes } from '../../components/document/document-email-checkboxes';
+import {
+  DocumentReadOnlyFields,
+  mapFieldsWithRecipients,
+} from '../../components/document/document-read-only-fields';
 import { AvatarWithText } from '../avatar';
 import { FormErrorMessage } from '../form/form-error-message';
 import { Input } from '../input';
@@ -31,7 +35,6 @@ import {
   DocumentFlowFormContainerHeader,
   DocumentFlowFormContainerStep,
 } from './document-flow-root';
-import { ShowFieldItem } from './show-field-item';
 import type { DocumentFlowStep } from './types';
 
 export type AddSubjectFormProps = {
@@ -103,10 +106,13 @@ export const AddSubjectFormPartial = ({
       />
       <DocumentFlowFormContainerContent>
         <div className="flex flex-col">
-          {isDocumentPdfLoaded &&
-            fields.map((field, index) => (
-              <ShowFieldItem key={index} field={field} recipients={recipients} />
-            ))}
+          {isDocumentPdfLoaded && (
+            <DocumentReadOnlyFields
+              showRecipientColors={true}
+              recipientIds={recipients.map((recipient) => recipient.id)}
+              fields={mapFieldsWithRecipients(fields, recipients)}
+            />
+          )}
 
           <Tabs
             onValueChange={(value) =>
diff --git a/packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx b/packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx
deleted file mode 100644
index d0ff41e5f..000000000
--- a/packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { ZCheckboxFieldMeta } from '@documenso/lib/types/field-meta';
-import type { TCheckboxFieldMeta } from '@documenso/lib/types/field-meta';
-import { Checkbox } from '@documenso/ui/primitives/checkbox';
-import { Label } from '@documenso/ui/primitives/label';
-
-import { FieldIcon } from '../field-icon';
-import type { TDocumentFlowFormSchema } from '../types';
-
-type Field = TDocumentFlowFormSchema['fields'][0];
-
-export type CheckboxFieldProps = {
-  field: Field;
-};
-
-export const CheckboxField = ({ field }: CheckboxFieldProps) => {
-  let parsedFieldMeta: TCheckboxFieldMeta | undefined = undefined;
-
-  if (field.fieldMeta) {
-    parsedFieldMeta = ZCheckboxFieldMeta.parse(field.fieldMeta);
-  }
-
-  if (parsedFieldMeta && (!parsedFieldMeta.values || parsedFieldMeta.values.length === 0)) {
-    return <FieldIcon fieldMeta={field.fieldMeta} type={field.type} />;
-  }
-
-  return (
-    <div className="flex flex-col gap-y-1">
-      {!parsedFieldMeta?.values ? (
-        <FieldIcon fieldMeta={field.fieldMeta} type={field.type} />
-      ) : (
-        parsedFieldMeta.values.map((item: { value: string; checked: boolean }, index: number) => (
-          <div key={index} className="flex items-center gap-x-1.5">
-            <Checkbox
-              className="dark:border-field-border h-3 w-3 bg-white"
-              id={`checkbox-${index}`}
-              checked={item.checked}
-            />
-            <Label htmlFor={`checkbox-${index}`} className="text-xs font-normal text-black">
-              {item.value}
-            </Label>
-          </div>
-        ))
-      )}
-    </div>
-  );
-};
diff --git a/packages/ui/primitives/document-flow/advanced-fields/radio.tsx b/packages/ui/primitives/document-flow/advanced-fields/radio.tsx
deleted file mode 100644
index 28af5a10f..000000000
--- a/packages/ui/primitives/document-flow/advanced-fields/radio.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { ZRadioFieldMeta } from '@documenso/lib/types/field-meta';
-import type { TRadioFieldMeta } from '@documenso/lib/types/field-meta';
-import { Label } from '@documenso/ui/primitives/label';
-import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
-
-import { FieldIcon } from '../field-icon';
-import type { TDocumentFlowFormSchema } from '../types';
-
-type Field = TDocumentFlowFormSchema['fields'][0];
-
-export type RadioFieldProps = {
-  field: Field;
-};
-
-export const RadioField = ({ field }: RadioFieldProps) => {
-  let parsedFieldMeta: TRadioFieldMeta | undefined = undefined;
-
-  if (field.fieldMeta) {
-    parsedFieldMeta = ZRadioFieldMeta.parse(field.fieldMeta);
-  }
-
-  if (parsedFieldMeta && (!parsedFieldMeta.values || parsedFieldMeta.values.length === 0)) {
-    return <FieldIcon fieldMeta={field.fieldMeta} type={field.type} />;
-  }
-
-  return (
-    <div className="flex flex-col gap-y-2">
-      {!parsedFieldMeta?.values ? (
-        <FieldIcon fieldMeta={field.fieldMeta} type={field.type} />
-      ) : (
-        <RadioGroup className="gap-y-1">
-          {parsedFieldMeta.values?.map((item, index) => (
-            <div key={index} className="flex items-center gap-x-1.5">
-              <RadioGroupItem
-                className="dark:border-field-border pointer-events-none h-3 w-3"
-                value={item.value}
-                id={`option-${index}`}
-                checked={item.checked}
-              />
-              <Label htmlFor={`option-${index}`} className="text-xs font-normal text-black">
-                {item.value}
-              </Label>
-            </div>
-          ))}
-        </RadioGroup>
-      )}
-    </div>
-  );
-};
diff --git a/packages/ui/primitives/document-flow/field-content.tsx b/packages/ui/primitives/document-flow/field-content.tsx
new file mode 100644
index 000000000..c80287257
--- /dev/null
+++ b/packages/ui/primitives/document-flow/field-content.tsx
@@ -0,0 +1,188 @@
+import { useLingui } from '@lingui/react';
+import type { DocumentMeta, Signature, TemplateMeta } from '@prisma/client';
+import { FieldType } from '@prisma/client';
+import { ChevronDown } from 'lucide-react';
+
+import {
+  DEFAULT_DOCUMENT_DATE_FORMAT,
+  convertToLocalSystemFormat,
+} from '@documenso/lib/constants/date-formats';
+import type { TFieldMetaSchema } from '@documenso/lib/types/field-meta';
+import { fromCheckboxValue } from '@documenso/lib/universal/field-checkbox';
+
+import { cn } from '../../lib/utils';
+import { Checkbox } from '../checkbox';
+import { Label } from '../label';
+import { RadioGroup, RadioGroupItem } from '../radio-group';
+import { FRIENDLY_FIELD_TYPE } from './types';
+
+type FieldIconProps = {
+  /**
+   * Loose field type since this is used for partial fields.
+   */
+  field: {
+    inserted?: boolean;
+    customText?: string;
+    type: FieldType;
+    fieldMeta?: TFieldMetaSchema | null;
+    signature?: Signature | null;
+  };
+  documentMeta?: DocumentMeta | TemplateMeta;
+};
+
+/**
+ * Renders the content inside field containers prior to sealing.
+ */
+export const FieldContent = ({ field, documentMeta }: FieldIconProps) => {
+  const { _ } = useLingui();
+
+  const { type, fieldMeta } = field;
+
+  // Only render checkbox if values exist, otherwise render the empty checkbox field content.
+  if (
+    field.type === FieldType.CHECKBOX &&
+    field.fieldMeta?.type === 'checkbox' &&
+    field.fieldMeta.values &&
+    field.fieldMeta.values.length > 0
+  ) {
+    let checkedValues: string[] = [];
+
+    try {
+      checkedValues = fromCheckboxValue(field.customText ?? '');
+    } catch (err) {
+      // Do nothing.
+
+      console.error(err);
+    }
+
+    return (
+      <div className="flex flex-col gap-y-1 py-0.5">
+        {field.fieldMeta.values.map((item, index) => (
+          <div key={index} className="flex items-center">
+            <Checkbox
+              className="h-3 w-3"
+              id={`checkbox-${index}`}
+              checked={checkedValues.includes(
+                item.value === '' ? `empty-value-${index + 1}` : item.value, // I got no idea...
+              )}
+            />
+
+            {item.value && (
+              <Label
+                htmlFor={`checkbox-${index}`}
+                className="text-foreground ml-1.5 text-xs font-normal"
+              >
+                {item.value}
+              </Label>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  // Only render radio if values exist, otherwise render the empty radio field content.
+  if (
+    field.type === FieldType.RADIO &&
+    field.fieldMeta?.type === 'radio' &&
+    field.fieldMeta.values &&
+    field.fieldMeta.values.length > 0
+  ) {
+    return (
+      <div className="flex flex-col gap-y-2 py-0.5">
+        <RadioGroup className="gap-y-1">
+          {field.fieldMeta.values.map((item, index) => (
+            <div key={index} className="flex items-center">
+              <RadioGroupItem
+                className="pointer-events-none h-3 w-3"
+                value={item.value}
+                id={`option-${index}`}
+                checked={item.value === field.customText}
+              />
+              {item.value && (
+                <Label
+                  htmlFor={`option-${index}`}
+                  className="text-foreground ml-1.5 text-xs font-normal"
+                >
+                  {item.value}
+                </Label>
+              )}
+            </div>
+          ))}
+        </RadioGroup>
+      </div>
+    );
+  }
+
+  if (
+    field.type === FieldType.DROPDOWN &&
+    field.fieldMeta?.type === 'dropdown' &&
+    !field.inserted
+  ) {
+    return (
+      <div className="text-field-card-foreground flex flex-row items-center py-0.5 text-[clamp(0.07rem,25cqw,0.825rem)] text-sm">
+        <p>Select</p>
+        <ChevronDown className="h-4 w-4" />
+      </div>
+    );
+  }
+
+  if (
+    field.type === FieldType.SIGNATURE &&
+    field.signature?.signatureImageAsBase64 &&
+    field.inserted
+  ) {
+    return (
+      <img
+        src={field.signature.signatureImageAsBase64}
+        alt="Signature"
+        className="h-full w-full object-contain"
+      />
+    );
+  }
+
+  let textToDisplay = fieldMeta?.label || _(FRIENDLY_FIELD_TYPE[type]) || '';
+
+  const isSignatureField =
+    field.type === FieldType.SIGNATURE || field.type === FieldType.FREE_SIGNATURE;
+
+  // Trim default labels.
+  if (textToDisplay.length > 20) {
+    textToDisplay = textToDisplay.substring(0, 20) + '...';
+  }
+
+  if (field.inserted) {
+    if (field.customText) {
+      textToDisplay = field.customText;
+    }
+
+    if (field.type === FieldType.DATE) {
+      textToDisplay = convertToLocalSystemFormat(
+        field.customText ?? '',
+        documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
+      );
+    }
+
+    if (isSignatureField && field.signature?.typedSignature) {
+      textToDisplay = field.signature.typedSignature;
+    }
+  }
+
+  const textAlign = fieldMeta && 'textAlign' in fieldMeta ? fieldMeta.textAlign : 'left';
+
+  return (
+    <div
+      className={cn(
+        'text-field-card-foreground flex h-full w-full items-center justify-center gap-x-1.5 overflow-clip whitespace-nowrap text-center text-[clamp(0.07rem,25cqw,0.825rem)]',
+        {
+          // Using justify instead of align because we also vertically center the text.
+          'justify-start': field.inserted && !isSignatureField && textAlign === 'left',
+          'justify-end': field.inserted && !isSignatureField && textAlign === 'right',
+          'font-signature text-[clamp(0.07rem,25cqw,1.125rem)]': isSignatureField,
+        },
+      )}
+    >
+      {textToDisplay}
+    </div>
+  );
+};
diff --git a/packages/ui/primitives/document-flow/field-icon.tsx b/packages/ui/primitives/document-flow/field-icon.tsx
deleted file mode 100644
index f1b9e412a..000000000
--- a/packages/ui/primitives/document-flow/field-icon.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Trans } from '@lingui/react/macro';
-import { FieldType } from '@prisma/client';
-import {
-  CalendarDays,
-  CheckSquare,
-  ChevronDown,
-  Contact,
-  Disc,
-  Hash,
-  Mail,
-  Type,
-  User,
-} from 'lucide-react';
-
-import type { TFieldMetaSchema as FieldMetaType } from '@documenso/lib/types/field-meta';
-
-import { cn } from '../../lib/utils';
-
-type FieldIconProps = {
-  fieldMeta: FieldMetaType;
-  type: FieldType;
-};
-
-const fieldIcons = {
-  [FieldType.INITIALS]: { icon: Contact, label: 'Initials' },
-  [FieldType.EMAIL]: { icon: Mail, label: 'Email' },
-  [FieldType.NAME]: { icon: User, label: 'Name' },
-  [FieldType.DATE]: { icon: CalendarDays, label: 'Date' },
-  [FieldType.TEXT]: { icon: Type, label: 'Text' },
-  [FieldType.NUMBER]: { icon: Hash, label: 'Number' },
-  [FieldType.RADIO]: { icon: Disc, label: 'Radio' },
-  [FieldType.CHECKBOX]: { icon: CheckSquare, label: 'Checkbox' },
-  [FieldType.DROPDOWN]: { icon: ChevronDown, label: 'Select' },
-};
-
-export const FieldIcon = ({ fieldMeta, type }: FieldIconProps) => {
-  if (type === 'SIGNATURE' || type === 'FREE_SIGNATURE') {
-    return (
-      <div
-        className={cn(
-          'text-field-card-foreground font-signature flex items-center justify-center gap-x-1 text-[clamp(0.575rem,25cqw,1.2rem)]',
-        )}
-      >
-        <Trans>Signature</Trans>
-      </div>
-    );
-  } else {
-    const Icon = fieldIcons[type]?.icon;
-    let label;
-
-    if (fieldMeta && (type === 'TEXT' || type === 'NUMBER')) {
-      if (type === 'TEXT' && 'text' in fieldMeta && fieldMeta.text && !fieldMeta.label) {
-        label =
-          fieldMeta.text.length > 20 ? fieldMeta.text.substring(0, 20) + '...' : fieldMeta.text;
-      } else if (fieldMeta.label) {
-        label =
-          fieldMeta.label.length > 20 ? fieldMeta.label.substring(0, 20) + '...' : fieldMeta.label;
-      } else {
-        label = fieldIcons[type]?.label;
-      }
-    } else {
-      label = fieldIcons[type]?.label;
-    }
-
-    return (
-      <div className="text-field-card-foreground flex items-center justify-center gap-x-1.5 text-[clamp(0.425rem,25cqw,0.825rem)]">
-        <Icon className="h-[clamp(0.625rem,20cqw,0.925rem)] w-[clamp(0.625rem,20cqw,0.925rem)]" />{' '}
-        {label}
-      </div>
-    );
-  }
-};
diff --git a/packages/ui/primitives/document-flow/field-item-advanced-settings.tsx b/packages/ui/primitives/document-flow/field-item-advanced-settings.tsx
index ea6097f73..37d194210 100644
--- a/packages/ui/primitives/document-flow/field-item-advanced-settings.tsx
+++ b/packages/ui/primitives/document-flow/field-item-advanced-settings.tsx
@@ -229,11 +229,19 @@ export const FieldAdvancedSettings = forwardRef<HTMLDivElement, FieldAdvancedSet
     return (
       <div ref={ref} className="flex h-full flex-col">
         <DocumentFlowFormContainerHeader title={title} description={description} />
+
         <DocumentFlowFormContainerContent>
           {isDocumentPdfLoaded &&
-            fields.map((field, index) => (
+            fields.map((localField, index) => (
               <span key={index} className="opacity-75 active:pointer-events-none">
-                <FieldItem key={index} field={field} disabled={true} />
+                <FieldItem
+                  key={index}
+                  field={localField}
+                  disabled={true}
+                  fieldClassName={
+                    localField.formId === field.formId ? 'ring-red-400' : 'ring-neutral-200'
+                  }
+                />
               </span>
             ))}
 
diff --git a/packages/ui/primitives/document-flow/field-item.tsx b/packages/ui/primitives/document-flow/field-item.tsx
index f96fd3aee..3b9a2d8d2 100644
--- a/packages/ui/primitives/document-flow/field-item.tsx
+++ b/packages/ui/primitives/document-flow/field-item.tsx
@@ -4,23 +4,21 @@ import { FieldType } from '@prisma/client';
 import { CopyPlus, Settings2, Trash } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { Rnd } from 'react-rnd';
-import { match } from 'ts-pattern';
 
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import type { TFieldMetaSchema } from '@documenso/lib/types/field-meta';
 import { ZCheckboxFieldMeta, ZRadioFieldMeta } from '@documenso/lib/types/field-meta';
 
-import { useSignerColors } from '../../lib/signer-colors';
+import { useRecipientColors } from '../../lib/recipient-colors';
 import { cn } from '../../lib/utils';
-import { CheckboxField } from './advanced-fields/checkbox';
-import { RadioField } from './advanced-fields/radio';
-import { FieldIcon } from './field-icon';
+import { FieldContent } from './field-content';
 import type { TDocumentFlowFormSchema } from './types';
 
 type Field = TDocumentFlowFormSchema['fields'][0];
 
 export type FieldItemProps = {
   field: Field;
+  fieldClassName?: string;
   passive?: boolean;
   disabled?: boolean;
   minHeight?: number;
@@ -35,14 +33,17 @@ export type FieldItemProps = {
   onFocus?: () => void;
   onBlur?: () => void;
   recipientIndex?: number;
-  hideRecipients?: boolean;
   hasErrors?: boolean;
   active?: boolean;
   onFieldActivate?: () => void;
   onFieldDeactivate?: () => void;
 };
 
+/**
+ * The item when editing fields??
+ */
 export const FieldItem = ({
+  fieldClassName,
   field,
   passive,
   disabled,
@@ -58,7 +59,6 @@ export const FieldItem = ({
   onBlur,
   onAdvancedSettings,
   recipientIndex = 0,
-  hideRecipients = false,
   hasErrors,
   active,
   onFieldActivate,
@@ -73,7 +73,7 @@ export const FieldItem = ({
   const [settingsActive, setSettingsActive] = useState(false);
   const $el = useRef(null);
 
-  const signerStyles = useSignerColors(recipientIndex);
+  const signerStyles = useRecipientColors(recipientIndex);
 
   const advancedField = [
     'NUMBER',
@@ -209,7 +209,7 @@ export const FieldItem = ({
   return createPortal(
     <Rnd
       key={coords.pageX + coords.pageY + coords.pageHeight + coords.pageWidth}
-      className={cn('group', {
+      className={cn('dark-mode-disabled group', {
         'pointer-events-none': passive,
         'pointer-events-none cursor-not-allowed opacity-75': disabled,
         'z-50': active && !disabled,
@@ -260,11 +260,12 @@ export const FieldItem = ({
 
       <div
         className={cn(
-          'relative flex h-full w-full items-center justify-center bg-white',
-          !hasErrors && signerStyles.default.base,
-          !hasErrors && signerStyles.default.fieldItem,
+          'group/field-item relative flex h-full w-full items-center justify-center rounded-[2px] bg-white/90 px-2 ring-2 transition-colors',
+          !hasErrors && signerStyles.base,
+          !hasErrors && signerStyles.fieldItem,
+          fieldClassName,
           {
-            'rounded-lg border border-red-400 bg-red-400/20 shadow-[0_0_0_5px_theme(colors.red.500/10%),0_0_0_2px_theme(colors.red.500/40%),0_0_0_0.5px_theme(colors.red.500)]':
+            'rounded-[2px] border bg-red-400/20 shadow-[0_0_0_5px_theme(colors.red.500/10%),0_0_0_2px_theme(colors.red.500/40%),0_0_0_0.5px_theme(colors.red.500)] ring-red-400':
               hasErrors,
           },
           !fixedSize && '[container-type:size]',
@@ -279,37 +280,31 @@ export const FieldItem = ({
         ref={$el}
         data-field-id={field.nativeId}
       >
-        {match(field.type)
-          .with('CHECKBOX', () => <CheckboxField field={field} />)
-          .with('RADIO', () => <RadioField field={field} />)
-          .otherwise(() => (
-            <FieldIcon fieldMeta={field.fieldMeta} type={field.type} />
-          ))}
+        <FieldContent field={field} />
 
-        {!hideRecipients && (
-          <div className="absolute -right-5 top-0 z-20 hidden h-full w-5 items-center justify-center group-hover:flex">
-            <div
-              className={cn(
-                'flex h-5 w-5 flex-col items-center justify-center rounded-r-md text-[0.5rem] font-bold text-white',
-                signerStyles.default.fieldItemInitials,
-                {
-                  '!opacity-50': disabled || passive,
-                },
-              )}
-            >
-              {(field.signerEmail?.charAt(0)?.toUpperCase() ?? '') +
-                (field.signerEmail?.charAt(1)?.toUpperCase() ?? '')}
-            </div>
+        {/* On hover, display recipient initials on side of field.  */}
+        <div className="absolute -right-5 top-0 z-20 hidden h-full w-5 items-center justify-center group-hover:flex">
+          <div
+            className={cn(
+              'flex h-5 w-5 flex-col items-center justify-center rounded-r-md text-[0.5rem] font-bold text-white opacity-0 transition duration-200 group-hover/field-item:opacity-100',
+              signerStyles.fieldItemInitials,
+              {
+                '!opacity-50': disabled || passive,
+              },
+            )}
+          >
+            {(field.signerEmail?.charAt(0)?.toUpperCase() ?? '') +
+              (field.signerEmail?.charAt(1)?.toUpperCase() ?? '')}
           </div>
-        )}
+        </div>
       </div>
 
       {!disabled && settingsActive && (
-        <div className="z-[60] mt-1 flex justify-center">
-          <div className="dark:bg-background group flex items-center justify-evenly gap-x-1 rounded-md border bg-gray-900 p-0.5">
+        <div className="absolute z-[60] mt-1 flex w-full items-center justify-center">
+          <div className="group flex items-center justify-evenly gap-x-1 rounded-md border bg-gray-900 p-0.5">
             {advancedField && (
               <button
-                className="dark:text-muted-foreground/50 dark:hover:text-muted-foreground dark:hover:bg-foreground/10 rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
+                className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
                 onClick={onAdvancedSettings}
                 onTouchEnd={onAdvancedSettings}
               >
@@ -318,7 +313,7 @@ export const FieldItem = ({
             )}
 
             <button
-              className="dark:text-muted-foreground/50 dark:hover:text-muted-foreground dark:hover:bg-foreground/10 rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
+              className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
               onClick={onDuplicate}
               onTouchEnd={onDuplicate}
             >
@@ -326,7 +321,7 @@ export const FieldItem = ({
             </button>
 
             <button
-              className="dark:text-muted-foreground/50 dark:hover:text-muted-foreground dark:hover:bg-foreground/10 rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
+              className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
               onClick={onRemove}
               onTouchEnd={onRemove}
             >
diff --git a/packages/ui/primitives/document-flow/show-field-item.tsx b/packages/ui/primitives/document-flow/show-field-item.tsx
deleted file mode 100644
index ef21465f8..000000000
--- a/packages/ui/primitives/document-flow/show-field-item.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { useLingui } from '@lingui/react';
-import { FieldType, type Prisma } from '@prisma/client';
-import { createPortal } from 'react-dom';
-
-import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
-import { parseMessageDescriptor } from '@documenso/lib/utils/i18n';
-
-import { cn } from '../../lib/utils';
-import { Card, CardContent } from '../card';
-import { FRIENDLY_FIELD_TYPE } from './types';
-
-export type ShowFieldItemProps = {
-  field: Prisma.FieldGetPayload<null>;
-  recipients: Prisma.RecipientGetPayload<null>[];
-};
-
-export const ShowFieldItem = ({ field }: ShowFieldItemProps) => {
-  const { _ } = useLingui();
-
-  const coords = useFieldPageCoords(field);
-
-  return createPortal(
-    <div
-      className={cn('pointer-events-none absolute z-10 opacity-75')}
-      style={{
-        top: `${coords.y}px`,
-        left: `${coords.x}px`,
-        height: `${coords.height}px`,
-        width: `${coords.width}px`,
-      }}
-    >
-      <Card className={cn('bg-background h-full w-full [container-type:size]')}>
-        <CardContent
-          className={cn(
-            'text-muted-foreground/50 flex h-full w-full flex-col items-center justify-center p-0 text-[clamp(0.575rem,1.8cqw,1.2rem)] leading-none',
-            field.type === FieldType.SIGNATURE && 'font-signature',
-          )}
-        >
-          {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type])}
-
-          {/* <p className="text-muted-foreground/50 w-full truncate text-center text-xs">
-            {signerEmail}
-          </p> */}
-        </CardContent>
-      </Card>
-    </div>,
-    document.body,
-  );
-};
diff --git a/packages/ui/primitives/element-visible.tsx b/packages/ui/primitives/element-visible.tsx
index 032f3c115..fda3f402d 100644
--- a/packages/ui/primitives/element-visible.tsx
+++ b/packages/ui/primitives/element-visible.tsx
@@ -12,7 +12,12 @@ export const ElementVisible = ({ target, children }: ElementVisibleProps) => {
     const observer = new MutationObserver((_mutations) => {
       const $el = document.querySelector(target);
 
-      setVisible(!!$el);
+      // Wait a fraction of a second to allow the scrollbar to load if it exists.
+      // If we don't wait, then the elements on the first page will be
+      // shifted across.
+      setTimeout(() => {
+        setVisible(!!$el);
+      }, 100);
     });
 
     observer.observe(document.body, {
diff --git a/packages/ui/primitives/popover.tsx b/packages/ui/primitives/popover.tsx
index d6d7a8f81..906206e4b 100644
--- a/packages/ui/primitives/popover.tsx
+++ b/packages/ui/primitives/popover.tsx
@@ -30,11 +30,12 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 type PopoverHoverProps = {
   trigger: React.ReactNode;
+  side?: 'top' | 'bottom' | 'left' | 'right';
   children: React.ReactNode;
   contentProps?: React.ComponentPropsWithoutRef<typeof PopoverContent>;
 };
 
-const PopoverHover = ({ trigger, children, contentProps }: PopoverHoverProps) => {
+const PopoverHover = ({ trigger, children, contentProps, side = 'top' }: PopoverHoverProps) => {
   const [open, setOpen] = React.useState(false);
 
   const isControlled = React.useRef(false);
@@ -79,7 +80,7 @@ const PopoverHover = ({ trigger, children, contentProps }: PopoverHoverProps) =>
       </PopoverTrigger>
 
       <PopoverContent
-        side="top"
+        side={side}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         {...contentProps}
diff --git a/packages/ui/primitives/recipient-selector.tsx b/packages/ui/primitives/recipient-selector.tsx
index 7e3d16865..d47ba89ef 100644
--- a/packages/ui/primitives/recipient-selector.tsx
+++ b/packages/ui/primitives/recipient-selector.tsx
@@ -9,7 +9,7 @@ import { sortBy } from 'remeda';
 
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 
-import { getSignerColorStyles } from '../lib/signer-colors';
+import { getRecipientColorStyles } from '../lib/recipient-colors';
 import { cn } from '../lib/utils';
 import { Button } from './button';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from './command';
@@ -78,12 +78,12 @@ export const RecipientSelector = ({
           role="combobox"
           className={cn(
             'bg-background text-muted-foreground hover:text-foreground justify-between font-normal',
-            getSignerColorStyles(
+            getRecipientColorStyles(
               Math.max(
                 recipients.findIndex((r) => r.id === selectedRecipient?.id),
                 0,
               ),
-            ).default.base,
+            ).base,
             className,
           )}
         >
@@ -131,12 +131,12 @@ export const RecipientSelector = ({
                   key={recipient.id}
                   className={cn(
                     'px-2 last:mb-1 [&:not(:first-child)]:mt-1',
-                    getSignerColorStyles(
+                    getRecipientColorStyles(
                       Math.max(
                         recipients.findIndex((r) => r.id === recipient.id),
                         0,
                       ),
-                    ).default.comboxBoxItem,
+                    ).comboxBoxItem,
                     {
                       'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
                     },
diff --git a/packages/ui/primitives/template-flow/add-template-fields.tsx b/packages/ui/primitives/template-flow/add-template-fields.tsx
index f82c9656f..ef18dab06 100644
--- a/packages/ui/primitives/template-flow/add-template-fields.tsx
+++ b/packages/ui/primitives/template-flow/add-template-fields.tsx
@@ -53,7 +53,7 @@ import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/type
 import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { getSignerColorStyles, useSignerColors } from '../../lib/signer-colors';
+import { getRecipientColorStyles, useRecipientColors } from '../../lib/recipient-colors';
 import type { FieldFormType } from '../document-flow/add-fields';
 import { FieldAdvancedSettings } from '../document-flow/field-item-advanced-settings';
 import { Form } from '../form/form';
@@ -68,7 +68,6 @@ const DEFAULT_WIDTH_PX = MIN_WIDTH_PX * 2.5;
 
 export type AddTemplateFieldsFormProps = {
   documentFlow: DocumentFlowStep;
-  hideRecipients?: boolean;
   recipients: Recipient[];
   fields: Field[];
   onSubmit: (_data: TAddTemplateFieldsFormSchema) => void;
@@ -77,7 +76,6 @@ export type AddTemplateFieldsFormProps = {
 
 export const AddTemplateFieldsFormPartial = ({
   documentFlow,
-  hideRecipients = false,
   recipients,
   fields,
   onSubmit,
@@ -136,7 +134,7 @@ export const AddTemplateFieldsFormPartial = ({
   const [showRecipientsSelector, setShowRecipientsSelector] = useState(false);
 
   const selectedSignerIndex = recipients.findIndex((r) => r.id === selectedSigner?.id);
-  const selectedSignerStyles = useSignerColors(
+  const selectedSignerStyles = useRecipientColors(
     selectedSignerIndex === -1 ? 0 : selectedSignerIndex,
   );
 
@@ -505,8 +503,8 @@ export const AddTemplateFieldsFormPartial = ({
               {selectedField && (
                 <div
                   className={cn(
-                    'text-muted-foreground dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center bg-white transition duration-200 [container-type:size]',
-                    selectedSignerStyles.default.base,
+                    'text-muted-foreground dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center rounded-[2px] bg-white ring-2 transition duration-200 [container-type:size]',
+                    selectedSignerStyles?.base,
                     {
                       '-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,
                       'dark:text-black/60': isFieldWithinBounds,
@@ -549,7 +547,6 @@ export const AddTemplateFieldsFormPartial = ({
                       setCurrentField(field);
                       handleAdvancedSettings();
                     }}
-                    hideRecipients={hideRecipients}
                     active={activeFieldId === field.formId}
                     onFieldActivate={() => setActiveFieldId(field.formId)}
                     onFieldDeactivate={() => setActiveFieldId(null)}
@@ -557,99 +554,98 @@ export const AddTemplateFieldsFormPartial = ({
                 );
               })}
 
-              {!hideRecipients && (
-                <Popover open={showRecipientsSelector} onOpenChange={setShowRecipientsSelector}>
-                  <PopoverTrigger asChild>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      role="combobox"
-                      className={cn(
-                        'bg-background text-muted-foreground hover:text-foreground mb-12 mt-2 justify-between font-normal',
-                        selectedSignerStyles.default.base,
-                      )}
-                    >
-                      {selectedSigner?.email && (
-                        <span className="flex-1 truncate text-left">
-                          {selectedSigner?.name} ({selectedSigner?.email})
-                        </span>
-                      )}
+              <Popover open={showRecipientsSelector} onOpenChange={setShowRecipientsSelector}>
+                <PopoverTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    role="combobox"
+                    className={cn(
+                      'bg-background text-muted-foreground hover:text-foreground mb-12 mt-2 justify-between font-normal',
+                      selectedSignerStyles?.comboxBoxTrigger,
+                    )}
+                  >
+                    {selectedSigner?.email && (
+                      <span className="flex-1 truncate text-left">
+                        {selectedSigner?.name} ({selectedSigner?.email})
+                      </span>
+                    )}
 
-                      {!selectedSigner?.email && (
-                        <span className="gradie flex-1 truncate text-left">
-                          {selectedSigner?.email}
-                        </span>
-                      )}
+                    {!selectedSigner?.email && (
+                      <span className="gradie flex-1 truncate text-left">
+                        {selectedSigner?.email}
+                      </span>
+                    )}
 
-                      <ChevronsUpDown className="ml-2 h-4 w-4" />
-                    </Button>
-                  </PopoverTrigger>
+                    <ChevronsUpDown className="ml-2 h-4 w-4" />
+                  </Button>
+                </PopoverTrigger>
 
-                  <PopoverContent className="p-0" align="start">
-                    <Command value={selectedSigner?.email}>
-                      <CommandInput />
+                <PopoverContent className="p-0" align="start">
+                  <Command value={selectedSigner?.email}>
+                    <CommandInput />
 
-                      <CommandEmpty>
-                        <span className="text-muted-foreground inline-block px-4">
-                          <Trans>No recipient matching this description was found.</Trans>
-                        </span>
-                      </CommandEmpty>
+                    <CommandEmpty>
+                      <span className="text-muted-foreground inline-block px-4">
+                        <Trans>No recipient matching this description was found.</Trans>
+                      </span>
+                    </CommandEmpty>
 
-                      {recipientsByRoleToDisplay.map(([role, roleRecipients], roleIndex) => (
-                        <CommandGroup key={roleIndex}>
-                          <div className="text-muted-foreground mb-1 ml-2 mt-2 text-xs font-medium">
-                            {_(RECIPIENT_ROLES_DESCRIPTION[role].roleNamePlural)}
+                    {/* Note: This is duplicated in `add-fields.tsx` */}
+                    {recipientsByRoleToDisplay.map(([role, roleRecipients], roleIndex) => (
+                      <CommandGroup key={roleIndex}>
+                        <div className="text-muted-foreground mb-1 ml-2 mt-2 text-xs font-medium">
+                          {_(RECIPIENT_ROLES_DESCRIPTION[role].roleNamePlural)}
+                        </div>
+
+                        {roleRecipients.length === 0 && (
+                          <div
+                            key={`${role}-empty`}
+                            className="text-muted-foreground/80 px-4 pb-4 pt-2.5 text-center text-xs"
+                          >
+                            <Trans>No recipients with this role</Trans>
                           </div>
+                        )}
 
-                          {roleRecipients.length === 0 && (
-                            <div
-                              key={`${role}-empty`}
-                              className="text-muted-foreground/80 px-4 pb-4 pt-2.5 text-center text-xs"
+                        {roleRecipients.map((recipient) => (
+                          <CommandItem
+                            key={recipient.id}
+                            className={cn(
+                              'px-2 last:mb-1 [&:not(:first-child)]:mt-1',
+                              getRecipientColorStyles(
+                                Math.max(
+                                  recipients.findIndex((r) => r.id === recipient.id),
+                                  0,
+                                ),
+                              )?.comboxBoxItem,
+                            )}
+                            onSelect={() => {
+                              setSelectedSigner(recipient);
+                              setShowRecipientsSelector(false);
+                            }}
+                          >
+                            <span
+                              className={cn('text-foreground/70 truncate', {
+                                'text-foreground/80': recipient === selectedSigner,
+                              })}
                             >
-                              <Trans>No recipients with this role</Trans>
-                            </div>
-                          )}
-
-                          {roleRecipients.map((recipient) => (
-                            <CommandItem
-                              key={recipient.id}
-                              className={cn(
-                                'px-2 last:mb-1 [&:not(:first-child)]:mt-1',
-                                getSignerColorStyles(
-                                  Math.max(
-                                    recipients.findIndex((r) => r.id === recipient.id),
-                                    0,
-                                  ),
-                                ).default.comboxBoxItem,
+                              {recipient.name && (
+                                <span title={`${recipient.name} (${recipient.email})`}>
+                                  {recipient.name} ({recipient.email})
+                                </span>
                               )}
-                              onSelect={() => {
-                                setSelectedSigner(recipient);
-                                setShowRecipientsSelector(false);
-                              }}
-                            >
-                              <span
-                                className={cn('text-foreground/70 truncate', {
-                                  'text-foreground/80': recipient === selectedSigner,
-                                })}
-                              >
-                                {recipient.name && (
-                                  <span title={`${recipient.name} (${recipient.email})`}>
-                                    {recipient.name} ({recipient.email})
-                                  </span>
-                                )}
 
-                                {!recipient.name && (
-                                  <span title={recipient.email}>{recipient.email}</span>
-                                )}
-                              </span>
-                            </CommandItem>
-                          ))}
-                        </CommandGroup>
-                      ))}
-                    </Command>
-                  </PopoverContent>
-                </Popover>
-              )}
+                              {!recipient.name && (
+                                <span title={recipient.email}>{recipient.email}</span>
+                              )}
+                            </span>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    ))}
+                  </Command>
+                </PopoverContent>
+              </Popover>
 
               <Form {...form}>
                 <div className="-mx-2 flex-1 overflow-y-auto px-2">
diff --git a/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx b/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
index 03b3444ce..a4e65d64c 100644
--- a/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
+++ b/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
@@ -25,6 +25,10 @@ import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-messa
 import { Input } from '@documenso/ui/primitives/input';
 import { toast } from '@documenso/ui/primitives/use-toast';
 
+import {
+  DocumentReadOnlyFields,
+  mapFieldsWithRecipients,
+} from '../../components/document/document-read-only-fields';
 import { Checkbox } from '../checkbox';
 import {
   DocumentFlowFormContainerActions,
@@ -33,7 +37,6 @@ import {
   DocumentFlowFormContainerHeader,
   DocumentFlowFormContainerStep,
 } from '../document-flow/document-flow-root';
-import { ShowFieldItem } from '../document-flow/show-field-item';
 import { SigningOrderConfirmation } from '../document-flow/signing-order-confirmation';
 import type { DocumentFlowStep } from '../document-flow/types';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../form/form';
@@ -391,10 +394,13 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
         description={documentFlow.description}
       />
       <DocumentFlowFormContainerContent>
-        {isDocumentPdfLoaded &&
-          fields.map((field, index) => (
-            <ShowFieldItem key={index} field={field} recipients={recipients} />
-          ))}
+        {isDocumentPdfLoaded && (
+          <DocumentReadOnlyFields
+            showRecipientColors={true}
+            recipientIds={recipients.map((recipient) => recipient.id)}
+            fields={mapFieldsWithRecipients(fields, recipients)}
+          />
+        )}
 
         <AnimateGenericFadeInOut motionKey={showAdvancedSettings ? 'Show' : 'Hide'}>
           <Form {...form}>
@@ -500,6 +506,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
                     ref={provided.innerRef}
                     className="flex w-full flex-col gap-y-2"
                   >
+                    {/* todo */}
                     {signers.map((signer, index) => (
                       <Draggable
                         key={`${signer.id}-${signer.signingOrder}`}
diff --git a/packages/ui/primitives/template-flow/add-template-settings.tsx b/packages/ui/primitives/template-flow/add-template-settings.tsx
index 57f1313cb..2002327c6 100644
--- a/packages/ui/primitives/template-flow/add-template-settings.tsx
+++ b/packages/ui/primitives/template-flow/add-template-settings.tsx
@@ -50,6 +50,10 @@ import {
 } from '@documenso/ui/primitives/form/form';
 
 import { DocumentEmailCheckboxes } from '../../components/document/document-email-checkboxes';
+import {
+  DocumentReadOnlyFields,
+  mapFieldsWithRecipients,
+} from '../../components/document/document-read-only-fields';
 import { DocumentSignatureSettingsTooltip } from '../../components/document/document-signature-settings-tooltip';
 import { Combobox } from '../combobox';
 import {
@@ -59,7 +63,6 @@ import {
   DocumentFlowFormContainerHeader,
   DocumentFlowFormContainerStep,
 } from '../document-flow/document-flow-root';
-import { ShowFieldItem } from '../document-flow/show-field-item';
 import type { DocumentFlowStep } from '../document-flow/types';
 import { Input } from '../input';
 import { MultiSelectCombobox } from '../multi-select-combobox';
@@ -153,10 +156,13 @@ export const AddTemplateSettingsFormPartial = ({
       />
 
       <DocumentFlowFormContainerContent>
-        {isDocumentPdfLoaded &&
-          fields.map((field, index) => (
-            <ShowFieldItem key={index} field={field} recipients={recipients} />
-          ))}
+        {isDocumentPdfLoaded && (
+          <DocumentReadOnlyFields
+            showRecipientColors={true}
+            recipientIds={recipients.map((recipient) => recipient.id)}
+            fields={mapFieldsWithRecipients(fields, recipients)}
+          />
+        )}
 
         <Form {...form}>
           <fieldset
diff --git a/packages/ui/styles/theme.css b/packages/ui/styles/theme.css
index dd973aa62..facb8be4c 100644
--- a/packages/ui/styles/theme.css
+++ b/packages/ui/styles/theme.css
@@ -3,7 +3,8 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
+  :root,
+  .dark-mode-disabled {
     --background: 0 0% 100%;
     --foreground: 222.2 47.4% 11.2%;
 
@@ -48,12 +49,12 @@
 
     --gold: 47.9 95.8% 53.1%;
 
-    --signer-green: 100 48% 55%;
-    --signer-blue: 212 56% 50%;
-    --signer-purple: 266 100% 64%;
-    --signer-orange: 36 92% 54%;
-    --signer-yellow: 51 100% 43%;
-    --signer-pink: 313 65% 57%;
+    --recipient-green: 100 48% 55%;
+    --recipient-blue: 212 56% 50%;
+    --recipient-purple: 266 100% 64%;
+    --recipient-orange: 36 92% 54%;
+    --recipient-yellow: 51 100% 43%;
+    --recipient-pink: 313 65% 57%;
 
     /* Base - Neutral */
     --new-neutral-50: 0, 0%, 96%;
@@ -190,7 +191,9 @@
 
   body {
     @apply bg-background text-foreground;
-    font-feature-settings: 'rlig' 1, 'calt' 1;
+    font-feature-settings:
+      'rlig' 1,
+      'calt' 1;
   }
 }
 
@@ -210,8 +213,12 @@
 }
 
 .gradient-border-mask::before {
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
   mask-composite: exclude;
   -webkit-mask-composite: xor;
 }

From 6540291055ea4788329bb7252ea153c37da6c77c Mon Sep 17 00:00:00 2001
From: Ephraim Duncan <55143799+ephraimduncan@users.noreply.github.com>
Date: Thu, 24 Apr 2025 06:00:53 +0000
Subject: [PATCH 2/4] feat: migrate webhook execution to background jobs
 (#1694)

---
 packages/lib/jobs/client.ts                   |  2 +
 .../internal/execute-webhook.handler.ts       | 74 +++++++++++++++++++
 .../definitions/internal/execute-webhook.ts   | 34 +++++++++
 .../webhooks/trigger/execute-webhook.ts       | 54 --------------
 .../server-only/webhooks/trigger/handler.ts   | 21 +++---
 5 files changed, 122 insertions(+), 63 deletions(-)
 create mode 100644 packages/lib/jobs/definitions/internal/execute-webhook.handler.ts
 create mode 100644 packages/lib/jobs/definitions/internal/execute-webhook.ts
 delete mode 100644 packages/lib/server-only/webhooks/trigger/execute-webhook.ts

diff --git a/packages/lib/jobs/client.ts b/packages/lib/jobs/client.ts
index 713d928d8..8b857b66f 100644
--- a/packages/lib/jobs/client.ts
+++ b/packages/lib/jobs/client.ts
@@ -9,6 +9,7 @@ import { SEND_TEAM_DELETED_EMAIL_JOB_DEFINITION } from './definitions/emails/sen
 import { SEND_TEAM_MEMBER_JOINED_EMAIL_JOB_DEFINITION } from './definitions/emails/send-team-member-joined-email';
 import { SEND_TEAM_MEMBER_LEFT_EMAIL_JOB_DEFINITION } from './definitions/emails/send-team-member-left-email';
 import { BULK_SEND_TEMPLATE_JOB_DEFINITION } from './definitions/internal/bulk-send-template';
+import { EXECUTE_WEBHOOK_JOB_DEFINITION } from './definitions/internal/execute-webhook';
 import { SEAL_DOCUMENT_JOB_DEFINITION } from './definitions/internal/seal-document';
 
 /**
@@ -27,6 +28,7 @@ export const jobsClient = new JobClient([
   SEND_RECIPIENT_SIGNED_EMAIL_JOB_DEFINITION,
   SEND_DOCUMENT_CANCELLED_EMAILS_JOB_DEFINITION,
   BULK_SEND_TEMPLATE_JOB_DEFINITION,
+  EXECUTE_WEBHOOK_JOB_DEFINITION,
 ] as const);
 
 export const jobs = jobsClient;
diff --git a/packages/lib/jobs/definitions/internal/execute-webhook.handler.ts b/packages/lib/jobs/definitions/internal/execute-webhook.handler.ts
new file mode 100644
index 000000000..a357ea51f
--- /dev/null
+++ b/packages/lib/jobs/definitions/internal/execute-webhook.handler.ts
@@ -0,0 +1,74 @@
+import { Prisma, WebhookCallStatus } from '@prisma/client';
+
+import { prisma } from '@documenso/prisma';
+
+import type { JobRunIO } from '../../client/_internal/job';
+import type { TExecuteWebhookJobDefinition } from './execute-webhook';
+
+export const run = async ({
+  payload,
+  io,
+}: {
+  payload: TExecuteWebhookJobDefinition;
+  io: JobRunIO;
+}) => {
+  const { event, webhookId, data } = payload;
+
+  const webhook = await prisma.webhook.findUniqueOrThrow({
+    where: {
+      id: webhookId,
+    },
+  });
+
+  const { webhookUrl: url, secret } = webhook;
+
+  await io.runTask('execute-webhook', async () => {
+    const payloadData = {
+      event,
+      payload: data,
+      createdAt: new Date().toISOString(),
+      webhookEndpoint: url,
+    };
+
+    const response = await fetch(url, {
+      method: 'POST',
+      body: JSON.stringify(payloadData),
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Documenso-Secret': secret ?? '',
+      },
+    });
+
+    const body = await response.text();
+
+    let responseBody: Prisma.InputJsonValue | Prisma.JsonNullValueInput = Prisma.JsonNull;
+
+    try {
+      responseBody = JSON.parse(body);
+    } catch (err) {
+      responseBody = body;
+    }
+
+    await prisma.webhookCall.create({
+      data: {
+        url,
+        event,
+        status: response.ok ? WebhookCallStatus.SUCCESS : WebhookCallStatus.FAILED,
+        requestBody: payloadData as Prisma.InputJsonValue,
+        responseCode: response.status,
+        responseBody,
+        responseHeaders: Object.fromEntries(response.headers.entries()),
+        webhookId: webhook.id,
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Webhook execution failed with status ${response.status}`);
+    }
+
+    return {
+      success: response.ok,
+      status: response.status,
+    };
+  });
+};
diff --git a/packages/lib/jobs/definitions/internal/execute-webhook.ts b/packages/lib/jobs/definitions/internal/execute-webhook.ts
new file mode 100644
index 000000000..af320034c
--- /dev/null
+++ b/packages/lib/jobs/definitions/internal/execute-webhook.ts
@@ -0,0 +1,34 @@
+import { WebhookTriggerEvents } from '@prisma/client';
+import { z } from 'zod';
+
+import { ZRequestMetadataSchema } from '../../../universal/extract-request-metadata';
+import { type JobDefinition } from '../../client/_internal/job';
+
+const EXECUTE_WEBHOOK_JOB_DEFINITION_ID = 'internal.execute-webhook';
+
+const EXECUTE_WEBHOOK_JOB_DEFINITION_SCHEMA = z.object({
+  event: z.nativeEnum(WebhookTriggerEvents),
+  webhookId: z.string(),
+  data: z.unknown(),
+  requestMetadata: ZRequestMetadataSchema.optional(),
+});
+
+export type TExecuteWebhookJobDefinition = z.infer<typeof EXECUTE_WEBHOOK_JOB_DEFINITION_SCHEMA>;
+
+export const EXECUTE_WEBHOOK_JOB_DEFINITION = {
+  id: EXECUTE_WEBHOOK_JOB_DEFINITION_ID,
+  name: 'Execute Webhook',
+  version: '1.0.0',
+  trigger: {
+    name: EXECUTE_WEBHOOK_JOB_DEFINITION_ID,
+    schema: EXECUTE_WEBHOOK_JOB_DEFINITION_SCHEMA,
+  },
+  handler: async ({ payload, io }) => {
+    const handler = await import('./execute-webhook.handler');
+
+    await handler.run({ payload, io });
+  },
+} as const satisfies JobDefinition<
+  typeof EXECUTE_WEBHOOK_JOB_DEFINITION_ID,
+  TExecuteWebhookJobDefinition
+>;
diff --git a/packages/lib/server-only/webhooks/trigger/execute-webhook.ts b/packages/lib/server-only/webhooks/trigger/execute-webhook.ts
deleted file mode 100644
index df94d9f1a..000000000
--- a/packages/lib/server-only/webhooks/trigger/execute-webhook.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Prisma, type Webhook, WebhookCallStatus, type WebhookTriggerEvents } from '@prisma/client';
-
-import { prisma } from '@documenso/prisma';
-
-export type ExecuteWebhookOptions = {
-  event: WebhookTriggerEvents;
-  webhook: Webhook;
-  data: unknown;
-};
-
-export const executeWebhook = async ({ event, webhook, data }: ExecuteWebhookOptions) => {
-  const { webhookUrl: url, secret } = webhook;
-
-  console.log('Executing webhook', { event, url });
-
-  const payload = {
-    event,
-    payload: data,
-    createdAt: new Date().toISOString(),
-    webhookEndpoint: url,
-  };
-
-  const response = await fetch(url, {
-    method: 'POST',
-    body: JSON.stringify(payload),
-    headers: {
-      'Content-Type': 'application/json',
-      'X-Documenso-Secret': secret ?? '',
-    },
-  });
-
-  const body = await response.text();
-
-  let responseBody: Prisma.InputJsonValue | Prisma.JsonNullValueInput = Prisma.JsonNull;
-
-  try {
-    responseBody = JSON.parse(body);
-  } catch (err) {
-    responseBody = body;
-  }
-
-  await prisma.webhookCall.create({
-    data: {
-      url,
-      event,
-      status: response.ok ? WebhookCallStatus.SUCCESS : WebhookCallStatus.FAILED,
-      requestBody: payload as Prisma.InputJsonValue,
-      responseCode: response.status,
-      responseBody,
-      responseHeaders: Object.fromEntries(response.headers.entries()),
-      webhookId: webhook.id,
-    },
-  });
-};
diff --git a/packages/lib/server-only/webhooks/trigger/handler.ts b/packages/lib/server-only/webhooks/trigger/handler.ts
index 4889e54ed..55d287bac 100644
--- a/packages/lib/server-only/webhooks/trigger/handler.ts
+++ b/packages/lib/server-only/webhooks/trigger/handler.ts
@@ -1,6 +1,6 @@
+import { jobs } from '../../../jobs/client';
 import { verify } from '../../crypto/verify';
 import { getAllWebhooksByEventTrigger } from '../get-all-webhooks-by-event-trigger';
-import { executeWebhook } from './execute-webhook';
 import { ZTriggerWebhookBodySchema } from './schema';
 
 export type HandlerTriggerWebhooksResponse =
@@ -42,17 +42,20 @@ export const handlerTriggerWebhooks = async (req: Request) => {
   const allWebhooks = await getAllWebhooksByEventTrigger({ event, userId, teamId });
 
   await Promise.allSettled(
-    allWebhooks.map(async (webhook) =>
-      executeWebhook({
-        event,
-        webhook,
-        data,
-      }),
-    ),
+    allWebhooks.map(async (webhook) => {
+      await jobs.triggerJob({
+        name: 'internal.execute-webhook',
+        payload: {
+          event,
+          webhookId: webhook.id,
+          data,
+        },
+      });
+    }),
   );
 
   return Response.json(
-    { success: true, message: 'Webhooks executed successfully' },
+    { success: true, message: 'Webhooks queued for execution' },
     { status: 200 },
   );
 };

From f0dcf7e9bf01a4cc23d2be13741b6b38ace753ad Mon Sep 17 00:00:00 2001
From: Ephraim Duncan <55143799+ephraimduncan@users.noreply.github.com>
Date: Thu, 24 Apr 2025 06:14:38 +0000
Subject: [PATCH 3/4] fix: signing volume query (#1753)

This pull request updates the implementation of the admin leaderboard,
enhancing data handling and improving type safety. It introduces clearer
differentiation between users and teams, adds additional fields to track
more relevant information, and refactors the querying logic to optimize
performance and maintainability.
---
 .../tables/admin-leaderboard-table.tsx        |   4 +
 .../_authenticated+/admin+/leaderboard.tsx    |  23 +-
 .../server-only/admin/get-signing-volume.ts   | 253 ++++++++++++------
 3 files changed, 195 insertions(+), 85 deletions(-)

diff --git a/apps/remix/app/components/tables/admin-leaderboard-table.tsx b/apps/remix/app/components/tables/admin-leaderboard-table.tsx
index eca409eb9..d7baf2cb9 100644
--- a/apps/remix/app/components/tables/admin-leaderboard-table.tsx
+++ b/apps/remix/app/components/tables/admin-leaderboard-table.tsx
@@ -14,9 +14,13 @@ import { Input } from '@documenso/ui/primitives/input';
 export type SigningVolume = {
   id: number;
   name: string;
+  email: string;
   signingVolume: number;
   createdAt: Date;
   planId: string;
+  userId?: number | null;
+  teamId?: number | null;
+  isTeam: boolean;
 };
 
 type LeaderboardTableProps = {
diff --git a/apps/remix/app/routes/_authenticated+/admin+/leaderboard.tsx b/apps/remix/app/routes/_authenticated+/admin+/leaderboard.tsx
index a258a21aa..2a6857e5e 100644
--- a/apps/remix/app/routes/_authenticated+/admin+/leaderboard.tsx
+++ b/apps/remix/app/routes/_authenticated+/admin+/leaderboard.tsx
@@ -2,7 +2,10 @@ import { Trans } from '@lingui/react/macro';
 
 import { getSigningVolume } from '@documenso/lib/server-only/admin/get-signing-volume';
 
-import { AdminLeaderboardTable } from '~/components/tables/admin-leaderboard-table';
+import {
+  AdminLeaderboardTable,
+  type SigningVolume,
+} from '~/components/tables/admin-leaderboard-table';
 
 import type { Route } from './+types/leaderboard';
 
@@ -25,7 +28,7 @@ export async function loader({ request }: Route.LoaderArgs) {
   const perPage = Number(url.searchParams.get('perPage')) || 10;
   const search = url.searchParams.get('search') || '';
 
-  const { leaderboard: signingVolume, totalPages } = await getSigningVolume({
+  const { leaderboard, totalPages } = await getSigningVolume({
     search,
     page,
     perPage,
@@ -33,8 +36,14 @@ export async function loader({ request }: Route.LoaderArgs) {
     sortOrder,
   });
 
+  const typedSigningVolume: SigningVolume[] = leaderboard.map((item) => ({
+    ...item,
+    name: item.name || '',
+    createdAt: item.createdAt || new Date(),
+  }));
+
   return {
-    signingVolume,
+    signingVolume: typedSigningVolume,
     totalPages,
     page,
     perPage,
@@ -48,9 +57,11 @@ export default function Leaderboard({ loaderData }: Route.ComponentProps) {
 
   return (
     <div>
-      <h2 className="text-4xl font-semibold">
-        <Trans>Signing Volume</Trans>
-      </h2>
+      <div className="flex items-center">
+        <h2 className="text-4xl font-semibold">
+          <Trans>Signing Volume</Trans>
+        </h2>
+      </div>
       <div className="mt-8">
         <AdminLeaderboardTable
           signingVolume={signingVolume}
diff --git a/packages/lib/server-only/admin/get-signing-volume.ts b/packages/lib/server-only/admin/get-signing-volume.ts
index dbaa6307a..0d862c7d2 100644
--- a/packages/lib/server-only/admin/get-signing-volume.ts
+++ b/packages/lib/server-only/admin/get-signing-volume.ts
@@ -1,16 +1,7 @@
-import { DocumentStatus, SubscriptionStatus } from '@prisma/client';
+import { prisma } from '@documenso/prisma';
+import { DocumentStatus, SubscriptionStatus } from '@documenso/prisma/client';
 
-import { kyselyPrisma, sql } from '@documenso/prisma';
-
-export type SigningVolume = {
-  id: number;
-  name: string;
-  signingVolume: number;
-  createdAt: Date;
-  planId: string;
-};
-
-export type GetSigningVolumeOptions = {
+type GetSigningVolumeOptions = {
   search?: string;
   page?: number;
   perPage?: number;
@@ -18,83 +9,187 @@ export type GetSigningVolumeOptions = {
   sortOrder?: 'asc' | 'desc';
 };
 
-export async function getSigningVolume({
+export const getSigningVolume = async ({
   search = '',
   page = 1,
   perPage = 10,
   sortBy = 'signingVolume',
   sortOrder = 'desc',
-}: GetSigningVolumeOptions) {
-  const offset = Math.max(page - 1, 0) * perPage;
+}: GetSigningVolumeOptions) => {
+  const validPage = Math.max(1, page);
+  const validPerPage = Math.max(1, perPage);
+  const skip = (validPage - 1) * validPerPage;
 
-  let findQuery = kyselyPrisma.$kysely
-    .selectFrom('Subscription as s')
-    .leftJoin('User as u', 's.userId', 'u.id')
-    .leftJoin('Team as t', 's.teamId', 't.id')
-    .leftJoin('Document as ud', (join) =>
-      join
-        .onRef('u.id', '=', 'ud.userId')
-        .on('ud.status', '=', sql.lit(DocumentStatus.COMPLETED))
-        .on('ud.deletedAt', 'is', null)
-        .on('ud.teamId', 'is', null),
-    )
-    .leftJoin('Document as td', (join) =>
-      join
-        .onRef('t.id', '=', 'td.teamId')
-        .on('td.status', '=', sql.lit(DocumentStatus.COMPLETED))
-        .on('td.deletedAt', 'is', null),
-    )
-    .where(sql`s.status = ${SubscriptionStatus.ACTIVE}::"SubscriptionStatus"`)
-    .where((eb) =>
-      eb.or([
-        eb('u.name', 'ilike', `%${search}%`),
-        eb('u.email', 'ilike', `%${search}%`),
-        eb('t.name', 'ilike', `%${search}%`),
-      ]),
-    )
-    .select([
-      's.id as id',
-      's.createdAt as createdAt',
-      's.planId as planId',
-      sql<string>`COALESCE(u.name, t.name, u.email, 'Unknown')`.as('name'),
-      sql<number>`COUNT(DISTINCT ud.id) + COUNT(DISTINCT td.id)`.as('signingVolume'),
-    ])
-    .groupBy(['s.id', 'u.name', 't.name', 'u.email']);
+  const activeSubscriptions = await prisma.subscription.findMany({
+    where: {
+      status: SubscriptionStatus.ACTIVE,
+    },
+    select: {
+      id: true,
+      planId: true,
+      userId: true,
+      teamId: true,
+      createdAt: true,
+      user: {
+        select: {
+          id: true,
+          name: true,
+          email: true,
+          createdAt: true,
+        },
+      },
+      team: {
+        select: {
+          id: true,
+          name: true,
+          teamEmail: {
+            select: {
+              email: true,
+            },
+          },
+          createdAt: true,
+        },
+      },
+    },
+  });
 
-  switch (sortBy) {
-    case 'name':
-      findQuery = findQuery.orderBy('name', sortOrder);
-      break;
-    case 'createdAt':
-      findQuery = findQuery.orderBy('createdAt', sortOrder);
-      break;
-    case 'signingVolume':
-      findQuery = findQuery.orderBy('signingVolume', sortOrder);
-      break;
-    default:
-      findQuery = findQuery.orderBy('signingVolume', 'desc');
-  }
+  const userSubscriptionsMap = new Map();
+  const teamSubscriptionsMap = new Map();
 
-  findQuery = findQuery.limit(perPage).offset(offset);
+  activeSubscriptions.forEach((subscription) => {
+    const isTeam = !!subscription.teamId;
 
-  const countQuery = kyselyPrisma.$kysely
-    .selectFrom('Subscription as s')
-    .leftJoin('User as u', 's.userId', 'u.id')
-    .leftJoin('Team as t', 's.teamId', 't.id')
-    .where(sql`s.status = ${SubscriptionStatus.ACTIVE}::"SubscriptionStatus"`)
-    .where((eb) =>
-      eb.or([
-        eb('u.name', 'ilike', `%${search}%`),
-        eb('u.email', 'ilike', `%${search}%`),
-        eb('t.name', 'ilike', `%${search}%`),
-      ]),
-    )
-    .select(({ fn }) => [fn.countAll().as('count')]);
+    if (isTeam && subscription.teamId) {
+      if (!teamSubscriptionsMap.has(subscription.teamId)) {
+        teamSubscriptionsMap.set(subscription.teamId, {
+          id: subscription.id,
+          planId: subscription.planId,
+          teamId: subscription.teamId,
+          name: subscription.team?.name || '',
+          email: subscription.team?.teamEmail?.email || `Team ${subscription.team?.id}`,
+          createdAt: subscription.team?.createdAt,
+          isTeam: true,
+          subscriptionIds: [subscription.id],
+        });
+      } else {
+        const existingTeam = teamSubscriptionsMap.get(subscription.teamId);
+        existingTeam.subscriptionIds.push(subscription.id);
+      }
+    } else if (subscription.userId) {
+      if (!userSubscriptionsMap.has(subscription.userId)) {
+        userSubscriptionsMap.set(subscription.userId, {
+          id: subscription.id,
+          planId: subscription.planId,
+          userId: subscription.userId,
+          name: subscription.user?.name || '',
+          email: subscription.user?.email || '',
+          createdAt: subscription.user?.createdAt,
+          isTeam: false,
+          subscriptionIds: [subscription.id],
+        });
+      } else {
+        const existingUser = userSubscriptionsMap.get(subscription.userId);
+        existingUser.subscriptionIds.push(subscription.id);
+      }
+    }
+  });
 
-  const [results, [{ count }]] = await Promise.all([findQuery.execute(), countQuery.execute()]);
+  const subscriptions = [
+    ...Array.from(userSubscriptionsMap.values()),
+    ...Array.from(teamSubscriptionsMap.values()),
+  ];
+
+  const filteredSubscriptions = search
+    ? subscriptions.filter((sub) => {
+        const searchLower = search.toLowerCase();
+        return (
+          sub.name?.toLowerCase().includes(searchLower) ||
+          sub.email?.toLowerCase().includes(searchLower)
+        );
+      })
+    : subscriptions;
+
+  const signingVolume = await Promise.all(
+    filteredSubscriptions.map(async (subscription) => {
+      let signingVolume = 0;
+
+      if (subscription.userId && !subscription.isTeam) {
+        const personalCount = await prisma.document.count({
+          where: {
+            userId: subscription.userId,
+            status: DocumentStatus.COMPLETED,
+            teamId: null,
+          },
+        });
+
+        signingVolume += personalCount;
+
+        const userTeams = await prisma.teamMember.findMany({
+          where: {
+            userId: subscription.userId,
+          },
+          select: {
+            teamId: true,
+          },
+        });
+
+        if (userTeams.length > 0) {
+          const teamIds = userTeams.map((team) => team.teamId);
+          const teamCount = await prisma.document.count({
+            where: {
+              teamId: {
+                in: teamIds,
+              },
+              status: DocumentStatus.COMPLETED,
+            },
+          });
+
+          signingVolume += teamCount;
+        }
+      }
+
+      if (subscription.teamId) {
+        const teamCount = await prisma.document.count({
+          where: {
+            teamId: subscription.teamId,
+            status: DocumentStatus.COMPLETED,
+          },
+        });
+
+        signingVolume += teamCount;
+      }
+
+      return {
+        ...subscription,
+        signingVolume,
+      };
+    }),
+  );
+
+  const sortedResults = [...signingVolume].sort((a, b) => {
+    if (sortBy === 'name') {
+      return sortOrder === 'asc'
+        ? (a.name || '').localeCompare(b.name || '')
+        : (b.name || '').localeCompare(a.name || '');
+    }
+
+    if (sortBy === 'createdAt') {
+      const dateA = a.createdAt ? new Date(a.createdAt).getTime() : 0;
+      const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0;
+      return sortOrder === 'asc' ? dateA - dateB : dateB - dateA;
+    }
+
+    return sortOrder === 'asc'
+      ? a.signingVolume - b.signingVolume
+      : b.signingVolume - a.signingVolume;
+  });
+
+  const paginatedResults = sortedResults.slice(skip, skip + validPerPage);
+
+  const totalPages = Math.ceil(sortedResults.length / validPerPage);
 
   return {
-    leaderboard: results,
-    totalPages: Math.ceil(Number(count) / perPage),
+    leaderboard: paginatedResults,
+    totalPages,
   };
-}
+};

From d78cfec00e7be5f87ccab96a28f031698c7de5e4 Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Thu, 24 Apr 2025 16:15:06 +1000
Subject: [PATCH 4/4] fix: branding logos (#1759)

---
 .../routes/api+/branding.logo.team.$teamId.ts    | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/remix/app/routes/api+/branding.logo.team.$teamId.ts b/apps/remix/app/routes/api+/branding.logo.team.$teamId.ts
index d6bd0e738..4aab1b588 100644
--- a/apps/remix/app/routes/api+/branding.logo.team.$teamId.ts
+++ b/apps/remix/app/routes/api+/branding.logo.team.$teamId.ts
@@ -1,6 +1,6 @@
 import sharp from 'sharp';
 
-import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { getFileServerSide } from '@documenso/lib/universal/upload/get-file.server';
 import { prisma } from '@documenso/prisma';
 
 import type { Route } from './+types/branding.logo.team.$teamId';
@@ -24,27 +24,29 @@ export async function loader({ params }: Route.LoaderArgs) {
     },
   });
 
-  if (!settings || !settings.brandingEnabled) {
+  if (!settings || !settings.brandingLogo) {
     return Response.json(
       {
         status: 'error',
-        message: 'Not found',
+        message: 'Logo not found',
       },
       { status: 404 },
     );
   }
 
-  if (!settings.brandingLogo) {
+  if (!settings.brandingEnabled) {
     return Response.json(
       {
         status: 'error',
-        message: 'Not found',
+        message: 'Branding is not enabled',
       },
-      { status: 404 },
+      { status: 400 },
     );
   }
 
-  const file = await getFile(JSON.parse(settings.brandingLogo)).catch(() => null);
+  const file = await getFileServerSide(JSON.parse(settings.brandingLogo)).catch((e) => {
+    console.error(e);
+  });
 
   if (!file) {
     return Response.json(