fix: wip

2025-11-10 04:22:32 +10:00 · 2025-03-03 21:35:12 +11:00
32 changed files with 742 additions and 843 deletions
--- 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>
--- 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,14 @@ 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,
+            )}
          />
-          ))}
+        )}

        <Form {...form}>
          <fieldset
--- 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
@ -254,19 +254,19 @@ 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">
                  <Checkbox
-                    className="h-4 w-4"
+                    className="h-3 w-3"
                    id={`checkbox-${index}`}
                    checked={checkedValues.includes(itemValue)}
                    onCheckedChange={() => handleCheckboxChange(item.value, item.id)}
                  />
-                  <Label htmlFor={`checkbox-${index}`}>
+                  <Label htmlFor={`checkbox-${index}`} className="text-xs font-normal">
                    {item.value.includes('empty-value-') ? '' : item.value}
                  </Label>
                </div>
@ -277,7 +277,7 @@ 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}`;

@ -290,7 +290,7 @@ export const DocumentSigningCheckboxField = ({
                  disabled={isLoading}
                  onCheckedChange={() => void handleCheckboxOptionClick(item)}
                />
-                <Label htmlFor={`checkbox-${index}`} className="text-xs">
+                <Label htmlFor={`checkbox-${index}`} className="text-xs font-normal">
                  {item.value.includes('empty-value-') ? '' : item.value}
                </Label>
              </div>
--- 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
@ -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-muted-foreground dark:text-background/80 w-full 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',
              },
            )}
          >
--- 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
@ -136,12 +136,10 @@ export const DocumentSigningEmailField = ({
        <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-muted-foreground dark:text-background/80 w-full 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',
              },
            )}
          >
--- 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
@ -182,12 +182,10 @@ export const DocumentSigningNameField = ({
        <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-muted-foreground dark:text-background/80 w-full 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',
              },
            )}
          >
--- 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
@ -272,12 +272,10 @@ export const DocumentSigningNumberField = ({
        <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-muted-foreground dark:text-background/80 w-full 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',
              },
            )}
          >
--- 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';

--- 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
@ -157,17 +157,20 @@ export const DocumentSigningRadioField = ({
      )}

      {!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">
              <RadioGroupItem
-                className="h-4 w-4 shrink-0"
+                className="h-3 w-3 shrink-0"
                value={item.value}
                id={`option-${index}`}
                checked={item.checked}
              />

-              <Label htmlFor={`option-${index}`}>
+              <Label htmlFor={`option-${index}`} className="text-xs font-normal">
                {item.value.includes('empty-value-') ? '' : item.value}
              </Label>
            </div>
@ -176,7 +179,7 @@ export const DocumentSigningRadioField = ({
      )}

      {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">
              <RadioGroupItem
@ -185,7 +188,7 @@ export const DocumentSigningRadioField = ({
                id={`option-${index}`}
                checked={item.value === field.customText}
              />
-              <Label htmlFor={`option-${index}`} className="text-xs">
+              <Label htmlFor={`option-${index}`} className="text-xs font-normal">
                {item.value.includes('empty-value-') ? '' : item.value}
              </Label>
            </div>
--- 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
@ -277,12 +277,11 @@ export const DocumentSigningTextField = ({
        <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-muted-foreground dark:text-background/80 w-full 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',
+                // Todo: Test
+                '!text-center': parsedFieldMeta?.textAlign === 'center',
+                '!text-right': parsedFieldMeta?.textAlign === 'right',
              },
            )}
          >
@ -304,11 +303,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}
--- a/apps/remix/app/components/general/document/document-read-only-fields.tsx
+++ b/apps/remix/app/components/general/document/document-read-only-fields.tsx
@ -1,171 +0,0 @@
-import { useState } from 'react';
-
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type { DocumentMeta } 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;
-  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>
-  );
-};
--- 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,12 @@ 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}
+          />
        )}

        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
--- 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,7 @@ export default function TemplatePage() {
        <DocumentReadOnlyFields
          fields={readOnlyFields}
          showFieldStatus={false}
+          showRecipientTooltip={true}
          documentMeta={mockedDocumentMeta}
        />

--- a/packages/lib/server-only/document/seal-document.ts
+++ b/packages/lib/server-only/document/seal-document.ts
@ -17,7 +17,6 @@ import type { RequestMetadata } from '../../universal/extract-request-metadata';
 import { getFileServerSide } from '../../universal/upload/get-file.server';
 import { putPdfFileServerSide } from '../../universal/upload/put-file.server';
 import { fieldsContainUnsignedRequiredField } from '../../utils/advanced-fields-helpers';
-import { getCertificatePdf } from '../htmltopdf/get-certificate-pdf';
 import { flattenAnnotations } from '../pdf/flatten-annotations';
 import { flattenForm } from '../pdf/flatten-form';
 import { insertFieldInPDF } from '../pdf/insert-field-in-pdf';
@ -104,13 +103,14 @@ export const sealDocument = async ({
  // !: Need to write the fields onto the document as a hard copy
  const pdfData = await getFileServerSide(documentData);

-  const certificateData =
-    (document.team?.teamGlobalSettings?.includeSigningCertificate ?? true)
-      ? await getCertificatePdf({
-          documentId,
-          language: document.documentMeta?.language,
-        }).catch(() => null)
-      : null;
+  // debugging........
+  // const certificateData =
+  //   (document.team?.teamGlobalSettings?.includeSigningCertificate ?? true)
+  //     ? await getCertificatePdf({
+  //         documentId,
+  //         language: document.documentMeta?.language,
+  //       }).catch(() => null)
+  //     : null;

  const doc = await PDFDocument.load(pdfData);

@ -119,15 +119,15 @@ export const sealDocument = async ({
  flattenForm(doc);
  flattenAnnotations(doc);

-  if (certificateData) {
-    const certificate = await PDFDocument.load(certificateData);
+  // if (certificateData) {
+  //   const certificate = await PDFDocument.load(certificateData);

-    const certificatePages = await doc.copyPages(certificate, certificate.getPageIndices());
+  //   const certificatePages = await doc.copyPages(certificate, certificate.getPageIndices());

-    certificatePages.forEach((page) => {
-      doc.addPage(page);
-    });
-  }
+  //   certificatePages.forEach((page) => {
+  //     doc.addPage(page);
+  //   });
+  // }

  for (const field of fields) {
    await insertFieldInPDF(doc, field);
--- a/packages/lib/server-only/pdf/insert-field-in-pdf.ts
+++ b/packages/lib/server-only/pdf/insert-field-in-pdf.ts
@ -36,7 +36,8 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
  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';
+    false; // todo
+  // true || process.env.DEBUG_PDF_INSERT === '1' || process.env.DEBUG_PDF_INSERT === 'true';

  pdf.registerFontkit(fontkit);

@ -227,8 +228,13 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu

      const selected: string[] = fromCheckboxValue(field.customText);

+      const topPadding = 13;
+      const leftCheckboxPadding = 6;
+      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 +243,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 +251,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 +274,28 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu

      const selected = field.customText.split(',');

+      const topPadding = 13;
+      const leftRadioPadding = 6;
+      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,
@ -308,7 +321,7 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
      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 textAlign = meta?.success && meta.data.textAlign ? meta.data.textAlign : 'left'; // ???
      const longestLineInTextForWidth = field.customText
        .split('\n')
        .sort((a, b) => b.length - a.length)[0];
@ -325,41 +338,69 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
      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
+      const padding = 8; // Todo: Play around with this.

      // 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;
+      let textFieldBoxY = pageHeight - fieldY - fieldHeight;
+      let textFieldBoxX = textX;
+
+      const textField = pdf.getForm().createTextField(`text.${field.secondaryId}`);

      if (pageRotationInDegrees !== 0) {
        const adjustedPosition = adjustPositionForRotation(
          pageWidth,
          pageHeight,
-          textX,
-          textY,
+          textFieldBoxX,
+          textFieldBoxY,
          pageRotationInDegrees,
        );

-        textX = adjustedPosition.xPos;
-        textY = adjustedPosition.yPos;
+        textFieldBoxX = adjustedPosition.xPos;
+        textFieldBoxY = adjustedPosition.yPos;
      }

-      page.drawText(field.customText, {
-        x: textX,
-        y: textY,
-        size: fontSize,
-        font,
+      if (isDebugMode) {
+        page.drawRectangle({
+          x: textFieldBoxX,
+          y: textFieldBoxY,
+          width: textWidth,
+          height: textHeight,
+          borderColor: rgb(1, 0, 0),
+          borderWidth: 1,
          rotate: degrees(pageRotationInDegrees),
        });
+      }
+
+      // Set the position and size of the text field
+      textField.addToPage(page, {
+        x: textFieldBoxX,
+        y: textFieldBoxY,
+        width: fieldWidth,
+        height: fieldHeight,
+        borderWidth: 0, // Hide border.
+        borderColor: rgb(1, 1, 1), // Hide border.
+        backgroundColor: undefined, // Makes transparent so background doesn't cover other text.
+        rotate: degrees(pageRotationInDegrees),
+
+        // Draw debug box if debug mode is enabled.
+        ...(isDebugMode && {
+          borderColor: rgb(1, 0, 0),
+          borderWidth: 1,
+        }),
+      });
+
+      // Set properties for the text field
+      textField.setFontSize(fontSize);
+      textField.setText(field.customText);
    });

  return pdf;
--- a/packages/tailwind-config/index.cjs
+++ b/packages/tailwind-config/index.cjs
@ -103,6 +103,14 @@ module.exports = {
          900: '#364772',
          950: '#252d46',
        },
+        signer: {
+          green: 'hsl(var(--signer-green))',
+          blue: 'hsl(var(--signer-blue))',
+          purple: 'hsl(var(--signer-purple))',
+          orange: 'hsl(var(--signer-orange))',
+          yellow: 'hsl(var(--signer-yellow))',
+          pink: 'hsl(var(--signer-pink))',
+        },
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
--- a/packages/ui/components/document/document-read-only-fields.tsx
+++ b/packages/ui/components/document/document-read-only-fields.tsx
@ -0,0 +1,148 @@
+import { useEffect, useState } from 'react';
+
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { DocumentMeta, Field, Recipient } from '@prisma/client';
+import { SigningStatus } from '@prisma/client';
+import { Clock, EyeOffIcon } from 'lucide-react';
+
+import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
+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 { FieldContent } from '../../primitives/document-flow/field-content';
+
+export type DocumentReadOnlyFieldsProps = {
+  fields: DocumentField[];
+  documentMeta?: DocumentMeta;
+  showFieldStatus?: boolean;
+
+  /**
+   * Whether to show the recipient tooltip.
+   *
+   * @default false
+   */
+  showRecipientTooltip?: boolean;
+};
+
+export const mapFieldsWithRecipients = (
+  fields: Field[],
+  recipients: Recipient[],
+): DocumentField[] => {
+  return fields.map((field) => {
+    const recipient = recipients.find((recipient) => recipient.id === field.recipientId) || {
+      name: 'Unknown',
+      email: 'Unknown',
+      signingStatus: SigningStatus.NOT_SIGNED,
+    };
+
+    return { ...field, recipient, signature: null };
+  });
+};
+
+export const DocumentReadOnlyFields = ({
+  documentMeta,
+  fields,
+  showFieldStatus = true,
+  showRecipientTooltip = false,
+}: DocumentReadOnlyFieldsProps) => {
+  const { _ } = useLingui();
+
+  const [hiddenFieldIds, setHiddenFieldIds] = useState<Record<string, boolean>>({});
+
+  const handleHideField = (fieldId: string) => {
+    setHiddenFieldIds((prev) => ({ ...prev, [fieldId]: true }));
+  };
+
+  const isMounted = useIsMounted();
+
+  useEffect(() => {
+    console.log(isMounted);
+  }, [isMounted]);
+
+  if (!isMounted) {
+    return null;
+  }
+
+  return (
+    <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+      {fields.map(
+        (field) =>
+          !hiddenFieldIds[field.secondaryId] && (
+            <FieldRootContainer field={field} key={field.id}>
+              {showRecipientTooltip && (
+                <div className="absolute -right-3 -top-3">
+                  <PopoverHover
+                    trigger={
+                      <Avatar className="dark:border-foreground 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>
+  );
+};
--- a/packages/ui/components/field/field.tsx
+++ b/packages/ui/components/field/field.tsx
@ -1,14 +1,12 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';

 import type { Field } 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 { useSignerColors } from '../../lib/signer-colors';
 import { cn } from '../../lib/utils';
-import { Card, CardContent } from '../../primitives/card';

 export type FieldRootContainerProps = {
  field: Field;
@ -19,53 +17,6 @@ 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 +27,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,10 +45,12 @@ export function FieldContainerPortal({
  );
 }

-export function FieldRootContainer({ field, children, cardClassName }: FieldContainerPortalProps) {
+export function FieldRootContainer({ field, children }: FieldContainerPortalProps) {
  const [isValidating, setIsValidating] = useState(false);
  const ref = React.useRef<HTMLDivElement>(null);

+  const signerStyles = useSignerColors(field.recipientId);
+
  useEffect(() => {
    if (!ref.current) {
      return;
@ -121,33 +71,36 @@ 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],
-  );
+  // // todo: remove
+  // const parsedField = useMemo(
+  //   () => (field.fieldMeta ? ZFieldMetaSchema.parse(field.fieldMeta) : null),
+  //   [field.fieldMeta],
+  // );

-  const cardClassNames = useMemo(
-    () => getCardClassNames(field, parsedField, isValidating, isCheckboxOrRadio, cardClassName),
-    [field, parsedField, isValidating, isCheckboxOrRadio, cardClassName],
-  );
+  // // todo: remove
+  // const isCheckboxOrRadio = useMemo(
+  //   () => parsedField?.type === 'checkbox' || parsedField?.type === 'radio',
+  //   [parsedField],
+  // );

  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 relative z-20 h-full w-full rounded-sm ring-2 transition-all',
+          'ring-signer-green bg-white/90',
+          'px-2', // This is specific to try sync with field insertion. See insert-field-in-pdf before changing this.
+          {
+            'flex items-center justify-center': !field.inserted,
+          },
+        )}
      >
-        <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>
+      </div>
    </FieldContainerPortal>
  );
 }
--- a/packages/ui/lib/signer-colors.ts
+++ b/packages/ui/lib/signer-colors.ts
@ -2,16 +2,14 @@
 // !: 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))]',
+      base: 'ring-signer-green hover:bg-signer-green/30',
+      fieldItem: 'group/field-item rounded-sm',
+      fieldItemInitials: 'group-hover/field-item:bg-[hsl(var(--signer-green))]',
      comboxBoxItem:
        'hover:bg-[hsl(var(--signer-green)/15%)] active:bg-[hsl(var(--signer-green)/15%)]',
    },
@ -19,12 +17,9 @@ export const SIGNER_COLOR_STYLES = {

  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))]',
+      base: 'ring-signer-blue hover:bg-signer-blue/30',
+      fieldItem: 'group/field-item rounded-sm',
+      fieldItemInitials: 'group-hover/field-item:bg-[hsl(var(--signer-blue))]',
      comboxBoxItem:
        'hover:bg-[hsl(var(--signer-blue)/15%)] active:bg-[hsl(var(--signer-blue)/15%)]',
    },
@ -32,12 +27,9 @@ export const SIGNER_COLOR_STYLES = {

  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))]',
+      base: 'ring-signer-purple hover:bg-signer-purple/30',
+      fieldItem: 'group/field-item rounded-sm',
+      fieldItemInitials: 'group-hover/field-item:bg-[hsl(var(--signer-purple))]',
      comboxBoxItem:
        'hover:bg-[hsl(var(--signer-purple)/15%)] active:bg-[hsl(var(--signer-purple)/15%)]',
    },
@ -45,12 +37,9 @@ export const SIGNER_COLOR_STYLES = {

  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))]',
+      base: 'ring-signer-orange hover:bg-signer-orange/30',
+      fieldItem: 'group/field-item rounded-sm',
+      fieldItemInitials: 'group-hover/field-item:bg-[hsl(var(--signer-orange))]',
      comboxBoxItem:
        'hover:bg-[hsl(var(--signer-orange)/15%)] active:bg-[hsl(var(--signer-orange)/15%)]',
    },
@ -58,12 +47,9 @@ export const SIGNER_COLOR_STYLES = {

  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))]',
+      base: 'ring-signer-yellow hover:bg-signer-yellow/30',
+      fieldItem: 'group/field-item rounded-sm',
+      fieldItemInitials: 'group-hover/field-item:bg-[hsl(var(--signer-yellow))]',
      comboxBoxItem:
        'hover:bg-[hsl(var(--signer-yellow)/15%)] active:bg-[hsl(var(--signer-yellow)/15%)]',
    },
@ -71,12 +57,9 @@ export const SIGNER_COLOR_STYLES = {

  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))]',
+      base: 'ring-signer-pink hover:bg-signer-pink/30',
+      fieldItem: 'group/field-item rounded-sm',
+      fieldItemInitials: 'group-hover/field-item:bg-[hsl(var(--signer-pink))]',
      comboxBoxItem:
        'hover:bg-[hsl(var(--signer-pink)/15%)] active:bg-[hsl(var(--signer-pink)/15%)]',
    },
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@ -88,7 +88,6 @@ export type FieldFormType = {

 export type AddFieldsFormProps = {
  documentFlow: DocumentFlowStep;
-  hideRecipients?: boolean;
  recipients: Recipient[];
  fields: Field[];
  onSubmit: (_data: TAddFieldsFormSchema) => void;
@ -100,7 +99,6 @@ export type AddFieldsFormProps = {

 export const AddFieldsFormPartial = ({
  documentFlow,
-  hideRecipients = false,
  recipients,
  fields,
  onSubmit,
@ -657,7 +655,6 @@ export const AddFieldsFormPartial = ({
                        setCurrentField(field);
                        handleAdvancedSettings();
                      }}
-                      hideRecipients={hideRecipients}
                      hasErrors={!!hasFieldError}
                      active={activeFieldId === field.formId}
                      onFieldActivate={() => setActiveFieldId(field.formId)}
@ -666,7 +663,6 @@ export const AddFieldsFormPartial = ({
                  );
                })}

-              {!hideRecipients && (
              <Popover open={showRecipientsSelector} onOpenChange={setShowRecipientsSelector}>
                <PopoverTrigger asChild>
                  <Button
@ -770,8 +766,8 @@ export const AddFieldsFormPartial = ({

                                  <TooltipContent className="text-muted-foreground max-w-xs">
                                    <Trans>
-                                        This document has already been sent to this recipient. You
-                                        can no longer edit this recipient.
+                                      This document has already been sent to this recipient. You can
+                                      no longer edit this recipient.
                                    </Trans>
                                  </TooltipContent>
                                </Tooltip>
@ -784,7 +780,6 @@ export const AddFieldsFormPartial = ({
                  </Command>
                </PopoverContent>
              </Popover>
-              )}

              <Form {...form}>
                <FormField
--- a/packages/ui/primitives/document-flow/add-settings.tsx
+++ b/packages/ui/primitives/document-flow/add-settings.tsx
@ -21,6 +21,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,
@ -54,7 +58,6 @@ import {
  DocumentFlowFormContainerHeader,
  DocumentFlowFormContainerStep,
 } from './document-flow-root';
-import { ShowFieldItem } from './show-field-item';
 import type { DocumentFlowStep } from './types';

 export type AddSettingsFormProps = {
@ -145,10 +148,9 @@ export const AddSettingsFormPartial = ({
      />

      <DocumentFlowFormContainerContent>
-        {isDocumentPdfLoaded &&
-          fields.map((field, index) => (
-            <ShowFieldItem key={index} field={field} recipients={recipients} />
-          ))}
+        {isDocumentPdfLoaded && (
+          <DocumentReadOnlyFields fields={mapFieldsWithRecipients(fields, recipients)} />
+        )}

        <Form {...form}>
          <fieldset
--- 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';
@ -39,7 +43,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';

@ -361,10 +364,9 @@ export const AddSignersFormPartial = ({
        description={documentFlow.description}
      />
      <DocumentFlowFormContainerContent>
-        {isDocumentPdfLoaded &&
-          fields.map((field, index) => (
-            <ShowFieldItem key={index} field={field} recipients={recipients} />
-          ))}
+        {isDocumentPdfLoaded && (
+          <DocumentReadOnlyFields fields={mapFieldsWithRecipients(fields, recipients)} />
+        )}

        <AnimateGenericFadeInOut motionKey={showAdvancedSettings ? 'Show' : 'Hide'}>
          <Form {...form}>
--- 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 = {
@ -101,10 +104,9 @@ export const AddSubjectFormPartial = ({
      />
      <DocumentFlowFormContainerContent>
        <div className="flex flex-col">
-          {isDocumentPdfLoaded &&
-            fields.map((field, index) => (
-              <ShowFieldItem key={index} field={field} recipients={recipients} />
-            ))}
+          {isDocumentPdfLoaded && (
+            <DocumentReadOnlyFields fields={mapFieldsWithRecipients(fields, recipients)} />
+          )}

          <Tabs
            onValueChange={(value) =>
--- a/packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx
+++ b/packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx
@ -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>
-  );
-};
--- a/packages/ui/primitives/document-flow/advanced-fields/radio.tsx
+++ b/packages/ui/primitives/document-flow/advanced-fields/radio.tsx
@ -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>
-  );
-};
--- a/packages/ui/primitives/document-flow/field-content.tsx
+++ b/packages/ui/primitives/document-flow/field-content.tsx
@ -0,0 +1,166 @@
+import { useLingui } from '@lingui/react';
+import type { DocumentMeta, Field, Signature } 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 { 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 = {
+  field: Field & { signature?: Signature };
+  documentMeta?: DocumentMeta;
+};
+
+/**
+ * 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 gap-x-1.5">
+            <Checkbox
+              className="h-3 w-3"
+              id={`checkbox-${index}`}
+              checked={checkedValues.includes(item.value)}
+            />
+
+            <Label htmlFor={`checkbox-${index}`} className="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 gap-x-1.5">
+              <RadioGroupItem
+                className="pointer-events-none h-3 w-3"
+                value={item.value}
+                id={`option-${index}`}
+                checked={item.value === field.customText}
+              />
+              <Label htmlFor={`option-${index}`} className="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 dark:invert"
+      />
+    );
+  }
+
+  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 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>
+  );
+};
--- a/packages/ui/primitives/document-flow/field-icon.tsx
+++ b/packages/ui/primitives/document-flow/field-icon.tsx
@ -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>
-    );
-  }
-};
--- a/packages/ui/primitives/document-flow/field-item.tsx
+++ b/packages/ui/primitives/document-flow/field-item.tsx
@ -4,7 +4,6 @@ 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';
@ -12,9 +11,7 @@ import { ZCheckboxFieldMeta, ZRadioFieldMeta } from '@documenso/lib/types/field-

 import { useSignerColors } from '../../lib/signer-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];
@ -35,13 +32,15 @@ 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 = ({
  field,
  passive,
@ -58,7 +57,6 @@ export const FieldItem = ({
  onBlur,
  onAdvancedSettings,
  recipientIndex = 0,
-  hideRecipients = false,
  hasErrors,
  active,
  onFieldActivate,
@ -260,11 +258,11 @@ export const FieldItem = ({

      <div
        className={cn(
-          'relative flex h-full w-full items-center justify-center bg-white',
+          'relative flex h-full w-full items-center justify-center bg-white/90 ring-2 transition-colors',
          !hasErrors && signerStyles.default.base,
          !hasErrors && signerStyles.default.fieldItem,
          {
-            '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-sm 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)]':
              hasErrors,
          },
          !fixedSize && '[container-type:size]',
@ -279,18 +277,13 @@ 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 && (
+        {/* 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',
+              '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.default.fieldItemInitials,
              {
                '!opacity-50': disabled || passive,
@ -301,11 +294,10 @@ export const FieldItem = ({
              (field.signerEmail?.charAt(1)?.toUpperCase() ?? '')}
          </div>
        </div>
-        )}
      </div>

      {!disabled && settingsActive && (
-        <div className="z-[60] mt-1 flex justify-center">
+        <div className="absolute z-[60] mt-1 flex w-full items-center 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">
            {advancedField && (
              <button
--- a/packages/ui/primitives/document-flow/show-field-item.tsx
+++ b/packages/ui/primitives/document-flow/show-field-item.tsx
@ -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,
-  );
-};
--- a/packages/ui/primitives/template-flow/add-template-fields.tsx
+++ b/packages/ui/primitives/template-flow/add-template-fields.tsx
@ -69,7 +69,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;
@ -79,7 +78,6 @@ export type AddTemplateFieldsFormProps = {

 export const AddTemplateFieldsFormPartial = ({
  documentFlow,
-  hideRecipients = false,
  recipients,
  fields,
  onSubmit,
@ -483,12 +481,6 @@ export const AddTemplateFieldsFormPartial = ({
    form.setValue('fields', updatedFields);
  };

-  const isTypedSignatureEnabled = form.watch('typedSignatureEnabled');
-
-  const handleTypedSignatureChange = (value: boolean) => {
-    form.setValue('typedSignatureEnabled', value, { shouldDirty: true });
-  };
-
  return (
    <>
      {showAdvancedSettings && currentField ? (
@ -559,7 +551,6 @@ export const AddTemplateFieldsFormPartial = ({
                      setCurrentField(field);
                      handleAdvancedSettings();
                    }}
-                    hideRecipients={hideRecipients}
                    active={activeFieldId === field.formId}
                    onFieldActivate={() => setActiveFieldId(field.formId)}
                    onFieldDeactivate={() => setActiveFieldId(null)}
@ -567,7 +558,6 @@ export const AddTemplateFieldsFormPartial = ({
                );
              })}

-              {!hideRecipients && (
              <Popover open={showRecipientsSelector} onOpenChange={setShowRecipientsSelector}>
                <PopoverTrigger asChild>
                  <Button
@ -659,7 +649,6 @@ export const AddTemplateFieldsFormPartial = ({
                  </Command>
                </PopoverContent>
              </Popover>
-              )}

              <Form {...form}>
                <FormField
--- 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';
@ -386,10 +389,9 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
        description={documentFlow.description}
      />
      <DocumentFlowFormContainerContent>
-        {isDocumentPdfLoaded &&
-          fields.map((field, index) => (
-            <ShowFieldItem key={index} field={field} recipients={recipients} />
-          ))}
+        {isDocumentPdfLoaded && (
+          <DocumentReadOnlyFields fields={mapFieldsWithRecipients(fields, recipients)} />
+        )}

        <AnimateGenericFadeInOut motionKey={showAdvancedSettings ? 'Show' : 'Hide'}>
          <Form {...form}>
@ -447,6 +449,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}`}
--- a/packages/ui/primitives/template-flow/add-template-settings.tsx
+++ b/packages/ui/primitives/template-flow/add-template-settings.tsx
@ -46,6 +46,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 { Combobox } from '../combobox';
 import {
  DocumentFlowFormContainerActions,
@ -54,7 +58,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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
@ -146,10 +149,9 @@ export const AddTemplateSettingsFormPartial = ({
      />

      <DocumentFlowFormContainerContent>
-        {isDocumentPdfLoaded &&
-          fields.map((field, index) => (
-            <ShowFieldItem key={index} field={field} recipients={recipients} />
-          ))}
+        {isDocumentPdfLoaded && (
+          <DocumentReadOnlyFields fields={mapFieldsWithRecipients(fields, recipients)} />
+        )}

        <Form {...form}>
          <fieldset