feat: add envelopes api (#2105)

2025-11-17 18:21:32 +10:00 · 2025-11-07 14:17:52 +11:00
parent d2a009d52e
commit d05bfa9fed
230 changed files with 10066 additions and 2812 deletions
--- a/apps/remix/app/components/dialogs/document-duplicate-dialog.tsx
+++ b/apps/remix/app/components/dialogs/document-duplicate-dialog.tsx
@ -19,13 +19,15 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { useCurrentTeam } from '~/providers/team';

 type DocumentDuplicateDialogProps = {
-  id: number;
+  id: string;
+  token?: string;
  open: boolean;
  onOpenChange: (_open: boolean) => void;
 };

 export const DocumentDuplicateDialog = ({
  id,
+  token,
  open,
  onOpenChange,
 }: DocumentDuplicateDialogProps) => {
@ -36,27 +38,23 @@ export const DocumentDuplicateDialog = ({

  const team = useCurrentTeam();

-  const { data: document, isLoading } = trpcReact.document.get.useQuery(
-    {
-      documentId: id,
-    },
-    {
-      queryHash: `document-duplicate-dialog-${id}`,
-      enabled: open === true,
-    },
-  );
+  const { data: envelopeItemsPayload, isLoading: isLoadingEnvelopeItems } =
+    trpcReact.envelope.item.getManyByToken.useQuery(
+      {
+        envelopeId: id,
+        access: token ? { type: 'recipient', token } : { type: 'user' },
+      },
+      {
+        enabled: open,
+      },
+    );

-  const documentData = document?.documentData
-    ? {
-        ...document.documentData,
-        data: document.documentData.initialData,
-      }
-    : undefined;
+  const envelopeItems = envelopeItemsPayload?.data || [];

  const documentsPath = formatDocumentsPath(team.url);

-  const { mutateAsync: duplicateDocument, isPending: isDuplicateLoading } =
-    trpcReact.document.duplicate.useMutation({
+  const { mutateAsync: duplicateEnvelope, isPending: isDuplicating } =
+    trpcReact.envelope.duplicate.useMutation({
      onSuccess: async ({ id }) => {
        toast({
          title: _(msg`Document Duplicated`),
@ -71,7 +69,7 @@ export const DocumentDuplicateDialog = ({

  const onDuplicate = async () => {
    try {
-      await duplicateDocument({ documentId: id });
+      await duplicateEnvelope({ envelopeId: id });
    } catch {
      toast({
        title: _(msg`Something went wrong`),
@ -83,14 +81,14 @@ export const DocumentDuplicateDialog = ({
  };

  return (
-    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
+    <Dialog open={open} onOpenChange={(value) => !isDuplicating && onOpenChange(value)}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
            <Trans>Duplicate</Trans>
          </DialogTitle>
        </DialogHeader>
-        {!documentData || isLoading ? (
+        {isLoadingEnvelopeItems || !envelopeItems || envelopeItems.length === 0 ? (
          <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
            <h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
              <Trans>Loading Document...</Trans>
@ -98,7 +96,12 @@ export const DocumentDuplicateDialog = ({
          </div>
        ) : (
          <div className="p-2 [&>div]:h-[50vh] [&>div]:overflow-y-scroll">
-            <PDFViewer key={document?.id} documentData={documentData} />
+            <PDFViewer
+              key={envelopeItems[0].id}
+              envelopeItem={envelopeItems[0]}
+              token={undefined}
+              version="original"
+            />
          </div>
        )}

@ -115,8 +118,8 @@ export const DocumentDuplicateDialog = ({

            <Button
              type="button"
-              disabled={isDuplicateLoading || isLoading}
-              loading={isDuplicateLoading}
+              disabled={isDuplicating}
+              loading={isDuplicating}
              onClick={onDuplicate}
              className="flex-1"
            >
--- a/apps/remix/app/components/dialogs/envelope-download-dialog.tsx
+++ b/apps/remix/app/components/dialogs/envelope-download-dialog.tsx
@ -2,11 +2,10 @@ import { useState } from 'react';

 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
-import { type DocumentData, DocumentStatus, type EnvelopeItem } from '@prisma/client';
+import { DocumentStatus, type EnvelopeItem } from '@prisma/client';
 import { DownloadIcon, FileTextIcon } from 'lucide-react';

-import { downloadFile } from '@documenso/lib/client-only/download-file';
-import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@ -20,9 +19,7 @@ import {
 import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { useToast } from '@documenso/ui/primitives/use-toast';

-type EnvelopeItemToDownload = Pick<EnvelopeItem, 'id' | 'title' | 'order'> & {
-  documentData: DocumentData;
-};
+type EnvelopeItemToDownload = Pick<EnvelopeItem, 'id' | 'envelopeId' | 'title' | 'order'>;

 type EnvelopeDownloadDialogProps = {
  envelopeId: string;
@ -64,12 +61,12 @@ export const EnvelopeDownloadDialog = ({
        access: token ? { type: 'recipient', token } : { type: 'user' },
      },
      {
-        initialData: initialEnvelopeItems ? { envelopeItems: initialEnvelopeItems } : undefined,
+        initialData: initialEnvelopeItems ? { data: initialEnvelopeItems } : undefined,
        enabled: open,
      },
    );

-  const envelopeItems = envelopeItemsPayload?.envelopeItems || [];
+  const envelopeItems = envelopeItemsPayload?.data || [];

  const onDownload = async (
    envelopeItem: EnvelopeItemToDownload,
@ -87,25 +84,11 @@ export const EnvelopeDownloadDialog = ({
    }));

    try {
-      const data = await getFile({
-        type: envelopeItem.documentData.type,
-        data:
-          version === 'signed'
-            ? envelopeItem.documentData.data
-            : envelopeItem.documentData.initialData,
-      });
-
-      const blob = new Blob([data], {
-        type: 'application/pdf',
-      });
-
-      const baseTitle = envelopeItem.title.replace(/\.pdf$/, '');
-      const suffix = version === 'signed' ? '_signed.pdf' : '.pdf';
-      const filename = `${baseTitle}${suffix}`;
-
-      downloadFile({
-        filename,
-        data: blob,
+      await downloadPDF({
+        envelopeItem,
+        token,
+        fileName: envelopeItem.title,
+        version,
      });

      setIsDownloadingState((prev) => ({
@ -146,7 +129,7 @@ export const EnvelopeDownloadDialog = ({
        <div className="flex flex-col gap-4">
          {isLoadingEnvelopeItems ? (
            <>
-              {Array.from({ length: 2 }).map((_, index) => (
+              {Array.from({ length: 1 }).map((_, index) => (
                <div
                  key={index}
                  className="border-border bg-card flex items-center gap-2 rounded-lg border p-4"
@ -175,6 +158,7 @@ export const EnvelopeDownloadDialog = ({
                </div>

                <div className="min-w-0 flex-1">
+                  {/* Todo: Envelopes - Fix overflow */}
                  <h4 className="text-foreground truncate text-sm font-medium">{item.title}</h4>
                  <p className="text-muted-foreground mt-0.5 text-xs">
                    <Trans>PDF Document</Trans>
--- a/apps/remix/app/components/dialogs/envelope-duplicate-dialog.tsx
+++ b/apps/remix/app/components/dialogs/envelope-duplicate-dialog.tsx
@ -43,7 +43,7 @@ export const EnvelopeDuplicateDialog = ({

  const { mutateAsync: duplicateEnvelope, isPending: isDuplicating } =
    trpc.envelope.duplicate.useMutation({
-      onSuccess: async ({ duplicatedEnvelopeId }) => {
+      onSuccess: async ({ id }) => {
        toast({
          title: t`Envelope Duplicated`,
          description: t`Your envelope has been successfully duplicated.`,
@ -55,7 +55,7 @@ export const EnvelopeDuplicateDialog = ({
            ? formatDocumentsPath(team.url)
            : formatTemplatesPath(team.url);

-        await navigate(`${path}/${duplicatedEnvelopeId}/edit`);
+        await navigate(`${path}/${id}/edit`);
        setOpen(false);
      },
    });
--- a/apps/remix/app/components/dialogs/template-create-dialog.tsx
+++ b/apps/remix/app/components/dialogs/template-create-dialog.tsx
@ -7,9 +7,9 @@ import { FilePlus, Loader } from 'lucide-react';
 import { useNavigate } from 'react-router';

 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
+import type { TCreateTemplatePayloadSchema } from '@documenso/trpc/server/template-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import {
  Dialog,
@ -54,13 +54,17 @@ export const TemplateCreateDialog = ({ folderId }: TemplateCreateDialogProps) =>
    setIsUploadingFile(true);

    try {
-      const response = await putPdfFile(file);
-
-      const { legacyTemplateId: id } = await createTemplate({
+      const payload = {
        title: file.name,
-        templateDocumentDataId: response.id,
        folderId: folderId,
-      });
+      } satisfies TCreateTemplatePayloadSchema;
+
+      const formData = new FormData();
+
+      formData.append('payload', JSON.stringify(payload));
+      formData.append('file', file);
+
+      const { envelopeId: id } = await createTemplate(formData);

      toast({
        title: _(msg`Template document uploaded`),
--- a/apps/remix/app/components/dialogs/template-use-dialog.tsx
+++ b/apps/remix/app/components/dialogs/template-use-dialog.tsx
@ -143,7 +143,7 @@ export function TemplateUseDialog({
    },
  );

-  const envelopeItems = response?.envelopeItems ?? [];
+  const envelopeItems = response?.data ?? [];

  const { mutateAsync: createDocumentFromTemplate } =
    trpc.template.createDocumentFromTemplate.useMutation();
--- a/apps/remix/app/components/embed/authoring/configure-fields-view.tsx
+++ b/apps/remix/app/components/embed/authoring/configure-fields-view.tsx
@ -4,6 +4,7 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { DocumentData, FieldType } from '@prisma/client';
 import { ReadStatus, type Recipient, SendStatus, SigningStatus } from '@prisma/client';
+import { base64 } from '@scure/base';
 import { ChevronsUpDown } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
@ -12,7 +13,6 @@ import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-c
 import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { type TFieldMetaSchema, ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
-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 { useRecipientColors } from '@documenso/ui/lib/recipient-colors';
@ -83,21 +83,14 @@ export const ConfigureFieldsView = ({

  const normalizedDocumentData = useMemo(() => {
    if (documentData) {
-      return documentData;
+      return documentData.data;
    }

    if (!configData.documentData) {
      return null;
    }

-    const data = base64.encode(configData.documentData?.data);
-
-    return {
-      id: 'preview',
-      type: 'BYTES_64',
-      data,
-      initialData: data,
-    } satisfies DocumentData;
+    return base64.encode(configData.documentData.data);
  }, [configData.documentData]);

  const recipients = useMemo(() => {
@ -541,7 +534,15 @@ export const ConfigureFieldsView = ({
            <Form {...form}>
              {normalizedDocumentData && (
                <div>
-                  <PDFViewer documentData={normalizedDocumentData} />
+                  <PDFViewer
+                    overrideData={normalizedDocumentData}
+                    envelopeItem={{
+                      id: '',
+                      envelopeId: '',
+                    }}
+                    token={undefined}
+                    version="signed"
+                  />

                  <ElementVisible
                    target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}
--- a/apps/remix/app/components/embed/embed-direct-template-client-page.tsx
+++ b/apps/remix/app/components/embed/embed-direct-template-client-page.tsx
@ -3,8 +3,8 @@ import { useEffect, useLayoutEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { DocumentMeta, Recipient, Signature } from '@prisma/client';
-import { type DocumentData, type Field, FieldType } from '@prisma/client';
+import type { DocumentMeta, EnvelopeItem, Recipient, Signature } from '@prisma/client';
+import { type Field, FieldType } from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 import { DateTime } from 'luxon';
 import { useSearchParams } from 'react-router';
@ -47,7 +47,7 @@ export type EmbedDirectTemplateClientPageProps = {
  token: string;
  envelopeId: string;
  updatedAt: Date;
-  documentData: DocumentData;
+  envelopeItems: Pick<EnvelopeItem, 'id' | 'envelopeId'>[];
  recipient: Recipient;
  fields: Field[];
  metadata?: DocumentMeta | null;
@ -59,7 +59,7 @@ export const EmbedDirectTemplateClientPage = ({
  token,
  envelopeId,
  updatedAt,
-  documentData,
+  envelopeItems,
  recipient,
  fields,
  metadata,
@ -335,7 +335,9 @@ export const EmbedDirectTemplateClientPage = ({
        {/* Viewer */}
        <div className="flex-1">
          <PDFViewer
-            documentData={documentData}
+            envelopeItem={envelopeItems[0]}
+            token={token}
+            version="signed"
            onDocumentLoad={() => setHasDocumentLoaded(true)}
          />
        </div>
--- a/apps/remix/app/components/embed/embed-document-signing-page-v1.tsx
+++ b/apps/remix/app/components/embed/embed-document-signing-page-v1.tsx
@ -3,14 +3,8 @@ import { useEffect, useId, useLayoutEffect, useMemo, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { DocumentMeta } from '@prisma/client';
-import {
-  type DocumentData,
-  type Field,
-  FieldType,
-  RecipientRole,
-  SigningStatus,
-} from '@prisma/client';
+import type { DocumentMeta, EnvelopeItem } from '@prisma/client';
+import { type Field, FieldType, RecipientRole, SigningStatus } from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';

 import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
@ -46,11 +40,11 @@ import { EmbedDocumentCompleted } from './embed-document-completed';
 import { EmbedDocumentFields } from './embed-document-fields';
 import { EmbedDocumentRejected } from './embed-document-rejected';

-export type EmbedSignDocumentClientPageProps = {
+export type EmbedSignDocumentV1ClientPageProps = {
  token: string;
  documentId: number;
  envelopeId: string;
-  documentData: DocumentData;
+  envelopeItems: Pick<EnvelopeItem, 'id' | 'envelopeId'>[];
  recipient: RecipientWithFields;
  fields: Field[];
  completedFields: DocumentField[];
@ -61,11 +55,11 @@ export type EmbedSignDocumentClientPageProps = {
  allRecipients?: RecipientWithFields[];
 };

-export const EmbedSignDocumentClientPage = ({
+export const EmbedSignDocumentV1ClientPage = ({
  token,
  documentId,
  envelopeId,
-  documentData,
+  envelopeItems,
  recipient,
  fields,
  completedFields,
@ -74,7 +68,7 @@ export const EmbedSignDocumentClientPage = ({
  hidePoweredBy = false,
  allowWhitelabelling = false,
  allRecipients = [],
-}: EmbedSignDocumentClientPageProps) => {
+}: EmbedSignDocumentV1ClientPageProps) => {
  const { _ } = useLingui();
  const { toast } = useToast();

@ -293,7 +287,9 @@ export const EmbedSignDocumentClientPage = ({
          {/* Viewer */}
          <div className="embed--DocumentViewer flex-1">
            <PDFViewer
-              documentData={documentData}
+              envelopeItem={envelopeItems[0]}
+              token={token}
+              version="signed"
              onDocumentLoad={() => setHasDocumentLoaded(true)}
            />
          </div>
--- a/apps/remix/app/components/embed/embed-document-signing-page-v2.tsx
+++ b/apps/remix/app/components/embed/embed-document-signing-page-v2.tsx
@ -0,0 +1,232 @@
+import { useEffect, useLayoutEffect, useState } from 'react';
+
+import { useLingui } from '@lingui/react';
+
+import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
+
+import { ZSignDocumentEmbedDataSchema } from '~/types/embed-document-sign-schema';
+import { injectCss } from '~/utils/css-vars';
+
+import { DocumentSigningPageViewV2 } from '../general/document-signing/document-signing-page-view-v2';
+import { useRequiredEnvelopeSigningContext } from '../general/document-signing/envelope-signing-provider';
+import { EmbedClientLoading } from './embed-client-loading';
+import { EmbedDocumentCompleted } from './embed-document-completed';
+import { EmbedDocumentRejected } from './embed-document-rejected';
+import { EmbedSigningProvider } from './embed-signing-context';
+
+export type EmbedSignDocumentV2ClientPageProps = {
+  hidePoweredBy?: boolean;
+  allowWhitelabelling?: boolean;
+};
+
+export const EmbedSignDocumentV2ClientPage = ({
+  hidePoweredBy = false,
+  allowWhitelabelling = false,
+}: EmbedSignDocumentV2ClientPageProps) => {
+  const { _ } = useLingui();
+
+  const { envelope, recipient, envelopeData, setFullName, fullName } =
+    useRequiredEnvelopeSigningContext();
+
+  const { isCompleted, isRejected, recipientSignature } = envelopeData;
+
+  // !: Not used at the moment, may be removed in the future.
+  // const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
+  const [hasFinishedInit, setHasFinishedInit] = useState(false);
+  const [allowDocumentRejection, setAllowDocumentRejection] = useState(false);
+  const [isNameLocked, setIsNameLocked] = useState(false);
+
+  const onDocumentCompleted = (data: {
+    token: string;
+    documentId: number;
+    envelopeId: string;
+    recipientId: number;
+  }) => {
+    if (window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'document-completed',
+          data,
+        },
+        '*',
+      );
+    }
+  };
+
+  const onDocumentError = () => {
+    if (window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'document-error',
+          data: null,
+        },
+        '*',
+      );
+    }
+  };
+
+  const onDocumentReady = () => {
+    if (window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'document-ready',
+          data: null,
+        },
+        '*',
+      );
+    }
+  };
+
+  const onFieldSigned = (data: { fieldId?: number; value?: string; isBase64?: boolean }) => {
+    if (window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'field-signed',
+          data,
+        },
+        '*',
+      );
+    }
+  };
+
+  const onFieldUnsigned = (data: { fieldId?: number }) => {
+    if (window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'field-unsigned',
+          data,
+        },
+        '*',
+      );
+    }
+  };
+
+  const onDocumentRejected = (data: {
+    token: string;
+    documentId: number;
+    envelopeId: string;
+    recipientId: number;
+    reason?: string;
+  }) => {
+    if (window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'document-rejected',
+          data,
+        },
+        '*',
+      );
+    }
+  };
+
+  useLayoutEffect(() => {
+    const hash = window.location.hash.slice(1);
+
+    try {
+      const data = ZSignDocumentEmbedDataSchema.parse(JSON.parse(decodeURIComponent(atob(hash))));
+
+      if (!isCompleted && data.name) {
+        setFullName(data.name);
+      }
+
+      // Since a recipient can be provided a name we can lock it without requiring
+      // a to be provided by the parent application, unlike direct templates.
+      setIsNameLocked(!!data.lockName);
+      setAllowDocumentRejection(!!data.allowDocumentRejection);
+
+      if (data.darkModeDisabled) {
+        document.documentElement.classList.add('dark-mode-disabled');
+      }
+
+      if (allowWhitelabelling) {
+        injectCss({
+          css: data.css,
+          cssVars: data.cssVars,
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+
+    setHasFinishedInit(true);
+
+    // !: While the setters are stable we still want to ensure we're avoiding
+    // !: re-renders.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allowWhitelabelling]);
+
+  useEffect(() => {
+    if (hasFinishedInit) {
+      onDocumentReady();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasFinishedInit]);
+
+  // Listen for document completion events from the envelope signing context
+  useEffect(() => {
+    if (isCompleted) {
+      onDocumentCompleted({
+        token: recipient.token,
+        envelopeId: envelope.id,
+        documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
+        recipientId: recipient.id,
+      });
+    }
+  }, [isCompleted, envelope.id, recipient.id, recipient.token]);
+
+  // Listen for document rejection events
+  useEffect(() => {
+    if (isRejected) {
+      onDocumentRejected({
+        token: recipient.token,
+        envelopeId: envelope.id,
+        documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
+        recipientId: recipient.id,
+      });
+    }
+  }, [isRejected, envelope.id, recipient.id, recipient.token]);
+
+  if (isRejected) {
+    return <EmbedDocumentRejected />;
+  }
+
+  if (isCompleted) {
+    return (
+      <EmbedDocumentCompleted
+        name={fullName}
+        signature={
+          recipientSignature
+            ? {
+                id: 1,
+                fieldId: 1,
+                recipientId: recipient.id,
+                created: new Date(),
+                signatureImageAsBase64: recipientSignature.signatureImageAsBase64,
+                typedSignature: recipientSignature.typedSignature,
+              }
+            : undefined
+        }
+      />
+    );
+  }
+
+  return (
+    <EmbedSigningProvider
+      isNameLocked={isNameLocked}
+      hidePoweredBy={hidePoweredBy}
+      allowDocumentRejection={allowDocumentRejection}
+      onDocumentCompleted={onDocumentCompleted}
+      onDocumentError={onDocumentError}
+      onDocumentRejected={onDocumentRejected}
+      onDocumentReady={onDocumentReady}
+      onFieldSigned={onFieldSigned}
+      onFieldUnsigned={onFieldUnsigned}
+    >
+      <div className="embed--Root relative">
+        {!hasFinishedInit && <EmbedClientLoading />}
+
+        <DocumentSigningPageViewV2 />
+      </div>
+    </EmbedSigningProvider>
+  );
+};
--- a/apps/remix/app/components/embed/embed-signing-context.tsx
+++ b/apps/remix/app/components/embed/embed-signing-context.tsx
@ -0,0 +1,101 @@
+import { createContext, useContext } from 'react';
+
+export type EmbedSigningContextValue = {
+  isEmbed: true;
+  allowDocumentRejection: boolean;
+  isNameLocked: boolean;
+  isEmailLocked: boolean;
+  hidePoweredBy: boolean;
+  onDocumentCompleted: (data: {
+    token: string;
+    documentId: number;
+    envelopeId: string;
+    recipientId: number;
+  }) => void;
+  onDocumentError: () => void;
+  onDocumentRejected: (data: {
+    token: string;
+    documentId: number;
+    envelopeId: string;
+    recipientId: number;
+    reason?: string;
+  }) => void;
+  onDocumentReady: () => void;
+  onFieldSigned: (data: { fieldId?: number; value?: string; isBase64?: boolean }) => void;
+  onFieldUnsigned: (data: { fieldId?: number }) => void;
+};
+
+const EmbedSigningContext = createContext<EmbedSigningContextValue | null>(null);
+
+export const useEmbedSigningContext = () => {
+  return useContext(EmbedSigningContext);
+};
+
+export const useRequiredEmbedSigningContext = () => {
+  const context = useEmbedSigningContext();
+
+  if (!context) {
+    throw new Error('useRequiredEmbedSigningContext must be used within EmbedSigningProvider');
+  }
+
+  return context;
+};
+
+export type EmbedSigningProviderProps = {
+  allowDocumentRejection?: boolean;
+  isNameLocked?: boolean;
+  isEmailLocked?: boolean;
+  hidePoweredBy?: boolean;
+  onDocumentCompleted: (data: {
+    token: string;
+    documentId: number;
+    envelopeId: string;
+    recipientId: number;
+  }) => void;
+  onDocumentError: () => void;
+  onDocumentRejected: (data: {
+    token: string;
+    documentId: number;
+    envelopeId: string;
+    recipientId: number;
+    reason?: string;
+  }) => void;
+  onDocumentReady: () => void;
+  onFieldSigned: (data: { fieldId?: number; value?: string; isBase64?: boolean }) => void;
+  onFieldUnsigned: (data: { fieldId?: number }) => void;
+  children: React.ReactNode;
+};
+
+export const EmbedSigningProvider = ({
+  allowDocumentRejection = false,
+  isNameLocked = false,
+  isEmailLocked = true,
+  hidePoweredBy = false,
+  onDocumentCompleted,
+  onDocumentError,
+  onDocumentRejected,
+  onDocumentReady,
+  onFieldSigned,
+  onFieldUnsigned,
+  children,
+}: EmbedSigningProviderProps) => {
+  return (
+    <EmbedSigningContext.Provider
+      value={{
+        isEmbed: true,
+        allowDocumentRejection,
+        isNameLocked,
+        isEmailLocked,
+        hidePoweredBy,
+        onDocumentCompleted,
+        onDocumentError,
+        onDocumentRejected,
+        onDocumentReady,
+        onFieldSigned,
+        onFieldUnsigned,
+      }}
+    >
+      {children}
+    </EmbedSigningContext.Provider>
+  );
+};
--- a/apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx
+++ b/apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx
@ -226,7 +226,9 @@ export const MultiSignDocumentSigningView = ({
                  })}
                >
                  <PDFViewer
-                    documentData={document.documentData}
+                    envelopeItem={document.envelopeItems[0]}
+                    token={token}
+                    version="signed"
                    onDocumentLoad={() => {
                      setHasDocumentLoaded(true);
                      onDocumentReady?.();
--- a/apps/remix/app/components/forms/branding-preferences-form.tsx
+++ b/apps/remix/app/components/forms/branding-preferences-form.tsx
@ -1,14 +1,14 @@
 import { useEffect, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
-import { useLingui } from '@lingui/react/macro';
-import { Trans } from '@lingui/react/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import type { TeamGlobalSettings } from '@prisma/client';
 import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';

-import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@ -29,6 +29,8 @@ import {
 } from '@documenso/ui/primitives/select';
 import { Textarea } from '@documenso/ui/primitives/textarea';

+import { useOptionalCurrentTeam } from '~/providers/team';
+
 const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
 const ACCEPTED_FILE_TYPES = ['image/jpeg', 'image/png', 'image/webp'];

@ -68,6 +70,9 @@ export function BrandingPreferencesForm({
 }: BrandingPreferencesFormProps) {
  const { t } = useLingui();

+  const team = useOptionalCurrentTeam();
+  const organisation = useCurrentOrganisation();
+
  const [previewUrl, setPreviewUrl] = useState<string>('');
  const [hasLoadedPreview, setHasLoadedPreview] = useState(false);

@ -88,14 +93,13 @@ export function BrandingPreferencesForm({
      const file = JSON.parse(settings.brandingLogo);

      if ('type' in file && 'data' in file) {
-        void getFile(file).then((binaryData) => {
-          const objectUrl = URL.createObjectURL(new Blob([binaryData]));
+        const logoUrl =
+          context === 'Team'
+            ? `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/team/${team?.id}`
+            : `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/organisation/${organisation?.id}`;

-          setPreviewUrl(objectUrl);
-          setHasLoadedPreview(true);
-        });
-
-        return;
+        setPreviewUrl(logoUrl);
+        setHasLoadedPreview(true);
      }
    }

--- a/apps/remix/app/components/forms/editor/editor-field-text-form.tsx
+++ b/apps/remix/app/components/forms/editor/editor-field-text-form.tsx
@ -152,6 +152,18 @@ export const EditorFieldTextForm = ({
                    className="h-auto"
                    placeholder={t`Add text to the field`}
                    {...field}
+                    onChange={(e) => {
+                      const values = form.getValues();
+                      const characterLimit = values.characterLimit || 0;
+                      let textValue = e.target.value;
+
+                      if (characterLimit > 0 && textValue.length > characterLimit) {
+                        textValue = textValue.slice(0, characterLimit);
+                      }
+
+                      e.target.value = textValue;
+                      field.onChange(e);
+                    }}
                    rows={1}
                  />
                </FormControl>
@ -175,6 +187,18 @@ export const EditorFieldTextForm = ({
                    className="bg-background"
                    placeholder={t`Field character limit`}
                    {...field}
+                    onChange={(e) => {
+                      field.onChange(e);
+
+                      const values = form.getValues();
+                      const characterLimit = parseInt(e.target.value, 10) || 0;
+
+                      const textValue = values.text || '';
+
+                      if (characterLimit > 0 && textValue.length > characterLimit) {
+                        form.setValue('text', textValue.slice(0, characterLimit));
+                      }
+                    }}
                  />
                </FormControl>
                <FormMessage />
--- a/apps/remix/app/components/general/direct-template/direct-template-page.tsx
+++ b/apps/remix/app/components/general/direct-template/direct-template-page.tsx
@ -153,7 +153,9 @@ export const DirectTemplatePageView = ({
        <CardContent className="p-2">
          <PDFViewer
            key={template.id}
-            documentData={template.templateDocumentData}
+            envelopeItem={template.envelopeItems[0]}
+            token={directTemplateRecipient.token}
+            version="signed"
            onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
          />
        </CardContent>
--- 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
@ -34,6 +34,7 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';

+import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
 import { AccessAuth2FAForm } from '~/components/general/document-signing/access-auth-2fa-form';
 import { DocumentSigningDisclosure } from '~/components/general/document-signing/document-signing-disclosure';

@ -102,6 +103,8 @@ export const DocumentSigningCompleteDialog = ({

  const { derivedRecipientAccessAuth } = useRequiredDocumentSigningAuthContext();

+  const { isNameLocked, isEmailLocked } = useEmbedSigningContext() || {};
+
  const form = useForm<TNextSignerFormSchema>({
    resolver: allowDictateNextSigner ? zodResolver(ZNextSignerFormSchema) : undefined,
    defaultValues: {
@ -267,7 +270,12 @@ export const DocumentSigningCompleteDialog = ({
                              <Trans>Your Name</Trans>
                            </FormLabel>
                            <FormControl>
-                              <Input {...field} className="mt-2" placeholder={t`Enter your name`} />
+                              <Input
+                                {...field}
+                                className="mt-2"
+                                placeholder={t`Enter your name`}
+                                disabled={isNameLocked}
+                              />
                            </FormControl>

                            <FormMessage />
@ -289,6 +297,7 @@ export const DocumentSigningCompleteDialog = ({
                                type="email"
                                className="mt-2"
                                placeholder={t`Enter your email`}
+                                disabled={!!field.value && isEmailLocked}
                              />
                            </FormControl>
                            <FormMessage />
--- a/apps/remix/app/components/general/document-signing/document-signing-mobile-widget.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-mobile-widget.tsx
@ -8,6 +8,9 @@ import { match } from 'ts-pattern';

 import { Button } from '@documenso/ui/primitives/button';

+import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
+
+import { BrandingLogo } from '../branding-logo';
 import EnvelopeSignerForm from '../envelope-signing/envelope-signer-form';
 import { EnvelopeSignerCompleteDialog } from '../envelope-signing/envelope-signing-complete-dialog';
 import { useRequiredEnvelopeSigningContext } from './envelope-signing-provider';
@ -15,6 +18,8 @@ import { useRequiredEnvelopeSigningContext } from './envelope-signing-provider';
 export const DocumentSigningMobileWidget = () => {
  const [isExpanded, setIsExpanded] = useState(false);

+  const { hidePoweredBy = true } = useEmbedSigningContext() || {};
+
  const { recipientFieldsRemaining, recipient, requiredRecipientFields } =
    useRequiredEnvelopeSigningContext();

@ -29,7 +34,7 @@ export const DocumentSigningMobileWidget = () => {

  return (
    <div className="pointer-events-none fixed bottom-0 left-0 right-0 z-50 flex justify-center px-2 pb-2 sm:px-4 sm:pb-6">
-      <div className="pointer-events-auto w-full max-w-2xl">
+      <div className="pointer-events-auto w-full max-w-[760px]">
        <div className="bg-card border-border overflow-hidden rounded-xl border shadow-2xl">
          {/* Main Header Bar */}
          <div className="flex items-center justify-between gap-4 p-4">
@ -114,6 +119,13 @@ export const DocumentSigningMobileWidget = () => {
          {isExpanded && (
            <div className="border-border animate-in slide-in-from-bottom-2 border-t p-4 duration-200">
              <EnvelopeSignerForm />
+
+              {!hidePoweredBy && (
+                <div className="bg-primary text-primary-foreground mt-2 inline-block rounded px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100 lg:hidden">
+                  <span>Powered by</span>
+                  <BrandingLogo className="ml-2 inline-block h-[14px]" />
+                </div>
+              )}
            </div>
          )}
        </div>
--- a/apps/remix/app/components/general/document-signing/document-signing-page-view-v1.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-page-view-v1.tsx
@ -245,7 +245,12 @@ export const DocumentSigningPageViewV1 = ({
          <div className="flex-1">
            <Card className="rounded-xl before:rounded-xl" gradient>
              <CardContent className="p-2">
-                <PDFViewer key={documentData.id} documentData={documentData} document={document} />
+                <PDFViewer
+                  key={document.envelopeItems[0].id}
+                  envelopeItem={document.envelopeItems[0]}
+                  token={recipient.token}
+                  version="signed"
+                />
              </CardContent>
            </Card>
          </div>
--- a/apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx
@ -22,7 +22,9 @@ import { SignFieldNameDialog } from '~/components/dialogs/sign-field-name-dialog
 import { SignFieldNumberDialog } from '~/components/dialogs/sign-field-number-dialog';
 import { SignFieldSignatureDialog } from '~/components/dialogs/sign-field-signature-dialog';
 import { SignFieldTextDialog } from '~/components/dialogs/sign-field-text-dialog';
+import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';

+import { BrandingLogo } from '../branding-logo';
 import { DocumentSigningAttachmentsPopover } from '../document-signing/document-signing-attachments-popover';
 import { EnvelopeItemSelector } from '../envelope-editor/envelope-file-selector';
 import EnvelopeSignerForm from '../envelope-signing/envelope-signer-form';
@ -48,6 +50,13 @@ export const DocumentSigningPageViewV2 = () => {
    selectedAssistantRecipientFields,
  } = useRequiredEnvelopeSigningContext();

+  const {
+    isEmbed = false,
+    allowDocumentRejection = true,
+    hidePoweredBy = true,
+    onDocumentRejected,
+  } = useEmbedSigningContext() || {};
+
  /**
   * The total remaining fields remaining for the current recipient or selected assistant recipient.
   *
@ -77,7 +86,7 @@ export const DocumentSigningPageViewV2 = () => {
      {/* Main Content Area */}
      <div className="flex h-[calc(100vh-4rem)] w-screen">
        {/* Left Section - Step Navigation */}
-        <div className="bg-background border-border hidden w-80 flex-shrink-0 flex-col overflow-y-auto border-r py-4 lg:flex">
+        <div className="embed--DocumentWidgetContainer bg-background border-border hidden w-80 flex-shrink-0 flex-col overflow-y-auto border-r py-4 lg:flex">
          <div className="px-4">
            <h3 className="text-foreground flex items-end justify-between text-sm font-semibold">
              {match(recipient.role)
@ -107,7 +116,7 @@ export const DocumentSigningPageViewV2 = () => {
              />
            </div>

-            <div className="mt-6 space-y-3">
+            <div className="embed--DocumentWidgetContent mt-6 space-y-3">
              <EnvelopeSignerForm />
            </div>
          </div>
@ -116,7 +125,7 @@ export const DocumentSigningPageViewV2 = () => {

          {/* Quick Actions. */}
          {!isDirectTemplate && (
-            <div className="space-y-3 px-4">
+            <div className="embed--Actions space-y-3 px-4">
              <h4 className="text-foreground text-sm font-semibold">
                <Trans>Actions</Trans>
              </h4>
@ -145,10 +154,21 @@ export const DocumentSigningPageViewV2 = () => {
                }
              />

-              {envelope.type === EnvelopeType.DOCUMENT && (
+              {envelope.type === EnvelopeType.DOCUMENT && allowDocumentRejection && (
                <DocumentSigningRejectDialog
                  documentId={mapSecondaryIdToDocumentId(envelope.secondaryId)}
                  token={recipient.token}
+                  onRejected={
+                    onDocumentRejected &&
+                    ((reason) =>
+                      onDocumentRejected({
+                        token: recipient.token,
+                        documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
+                        envelopeId: envelope.id,
+                        recipientId: recipient.id,
+                        reason,
+                      }))
+                  }
                  trigger={
                    <Button
                      variant="ghost"
@ -164,18 +184,22 @@ export const DocumentSigningPageViewV2 = () => {
            </div>
          )}

-          {/* Footer of left sidebar. */}
-          <div className="mt-auto px-4">
-            <Button asChild variant="ghost" className="w-full justify-start">
-              <Link to="/">
-                <ArrowLeftIcon className="mr-2 h-4 w-4" />
-                <Trans>Return</Trans>
-              </Link>
-            </Button>
+          <div className="embed--DocumentWidgetFooter">
+            {/* Footer of left sidebar. */}
+            {!isEmbed && (
+              <div className="mt-auto px-4">
+                <Button asChild variant="ghost" className="w-full justify-start">
+                  <Link to="/">
+                    <ArrowLeftIcon className="mr-2 h-4 w-4" />
+                    <Trans>Return</Trans>
+                  </Link>
+                </Button>
+              </div>
+            )}
          </div>
        </div>

-        <div className="flex-1 overflow-y-auto">
+        <div className="embed--DocumentContainer flex-1 overflow-y-auto">
          <div className="flex flex-col">
            {/* Horizontal envelope item selector */}
            {envelopeItems.length > 1 && (
@ -202,11 +226,11 @@ export const DocumentSigningPageViewV2 = () => {
            )}

            {/* Document View */}
-            <div className="flex flex-col items-center justify-center p-2 sm:mt-4 sm:p-4">
+            <div className="embed--DocumentViewer flex flex-col items-center justify-center p-2 sm:mt-4 sm:p-4">
              {currentEnvelopeItem ? (
                <PDFViewerKonvaLazy
+                  renderer="signing"
                  key={currentEnvelopeItem.id}
-                  documentDataId={currentEnvelopeItem.documentDataId}
                  customPageRenderer={EnvelopeSignerPageRenderer}
                />
              ) : (
@ -218,9 +242,20 @@ export const DocumentSigningPageViewV2 = () => {
              )}

              {/* Mobile widget - Additional padding to allow users to scroll */}
-              <div className="block pb-16 md:hidden">
+              <div className="block pb-28 lg:hidden">
                <DocumentSigningMobileWidget />
              </div>
+
+              {!hidePoweredBy && (
+                <a
+                  href="https://documenso.com"
+                  target="_blank"
+                  className="bg-primary text-primary-foreground fixed bottom-0 right-0 z-40 hidden cursor-pointer rounded-tl px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100 lg:block"
+                >
+                  <span>Powered by</span>
+                  <BrandingLogo className="ml-2 inline-block h-[14px]" />
+                </a>
+              )}
            </div>
          </div>
        </div>
--- a/apps/remix/app/components/general/document-signing/envelope-signing-provider.tsx
+++ b/apps/remix/app/components/general/document-signing/envelope-signing-provider.tsx
@ -13,6 +13,7 @@ import { prop, sortBy } from 'remeda';
 import { isBase64Image } from '@documenso/lib/constants/signatures';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import type { EnvelopeForSigningResponse } from '@documenso/lib/server-only/envelope/get-envelope-for-recipient-signing';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import {
  isFieldUnsignedAndRequired,
  isRequiredField,
@ -51,7 +52,11 @@ export type EnvelopeSigningContextValue = {
  setSelectedAssistantRecipientId: (_value: number | null) => void;
  selectedAssistantRecipient: EnvelopeForSigningResponse['envelope']['recipients'][number] | null;

-  signField: (_fieldId: number, _value: TSignEnvelopeFieldValue) => Promise<void>;
+  signField: (
+    _fieldId: number,
+    _value: TSignEnvelopeFieldValue,
+    authOptions?: TRecipientActionAuth,
+  ) => Promise<Pick<Field, 'id' | 'inserted'>>;
 };

 const EnvelopeSigningContext = createContext<EnvelopeSigningContextValue | null>(null);
@ -284,19 +289,26 @@ export const EnvelopeSigningProvider = ({
      : null;
  }, [envelope.documentMeta?.signingOrder, envelope.recipients, recipient.id]);

-  const signField = async (fieldId: number, fieldValue: TSignEnvelopeFieldValue) => {
+  const signField = async (
+    fieldId: number,
+    fieldValue: TSignEnvelopeFieldValue,
+    authOptions?: TRecipientActionAuth,
+  ) => {
    // Set the field locally for direct templates.
    if (isDirectTemplate) {
-      handleDirectTemplateFieldInsertion(fieldId, fieldValue);
-      return;
+      const signedField = handleDirectTemplateFieldInsertion(fieldId, fieldValue);
+
+      return signedField;
    }

-    await signEnvelopeField({
+    const { signedField } = await signEnvelopeField({
      token: envelopeData.recipient.token,
      fieldId,
      fieldValue,
-      authOptions: undefined,
+      authOptions,
    });
+
+    return signedField;
  };

  const handleDirectTemplateFieldInsertion = (
@ -354,6 +366,8 @@ export const EnvelopeSigningProvider = ({
        fields: prev.recipient.fields.map((field) => (field.id === fieldId ? updatedField : field)),
      },
    }));
+
+    return updatedField;
  };

  return (
--- a/apps/remix/app/components/general/document/document-certificate-qr-view.tsx
+++ b/apps/remix/app/components/general/document/document-certificate-qr-view.tsx
@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';

 import { Trans } from '@lingui/react/macro';
-import type { DocumentData, EnvelopeItem } from '@prisma/client';
+import { type DocumentData, DocumentStatus, type EnvelopeItem } from '@prisma/client';
+import { DownloadIcon } from 'lucide-react';
 import { DateTime } from 'luxon';

 import {
@ -22,9 +23,10 @@ import {
 } from '@documenso/ui/primitives/dialog';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';

+import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
+
 import { EnvelopeRendererFileSelector } from '../envelope-editor/envelope-file-selector';
 import EnvelopeGenericPageRenderer from '../envelope-editor/envelope-generic-page-renderer';
-import { ShareDocumentDownloadButton } from '../share-document-download-button';

 export type DocumentCertificateQRViewProps = {
  documentId: number;
@ -34,6 +36,7 @@ export type DocumentCertificateQRViewProps = {
  documentTeamUrl: string;
  recipientCount?: number;
  completedDate?: Date;
+  token: string;
 };

 export const DocumentCertificateQRView = ({
@ -44,6 +47,7 @@ export const DocumentCertificateQRView = ({
  documentTeamUrl,
  recipientCount = 0,
  completedDate,
+  token,
 }: DocumentCertificateQRViewProps) => {
  const { data: documentViaUser } = trpc.document.get.useQuery({
    documentId,
@ -96,11 +100,12 @@ export const DocumentCertificateQRView = ({
      )}

      {internalVersion === 2 ? (
-        <EnvelopeRenderProvider envelope={{ envelopeItems }}>
+        <EnvelopeRenderProvider envelope={{ envelopeItems }} token={token}>
          <DocumentCertificateQrV2
            title={title}
            recipientCount={recipientCount}
            formattedDate={formattedDate}
+            token={token}
          />
        </EnvelopeRenderProvider>
      ) : (
@ -119,14 +124,27 @@ export const DocumentCertificateQRView = ({
              </div>
            </div>

-            <ShareDocumentDownloadButton
-              title={title}
-              documentData={envelopeItems[0].documentData}
+            <EnvelopeDownloadDialog
+              envelopeId={envelopeItems[0].envelopeId}
+              envelopeStatus={DocumentStatus.COMPLETED}
+              envelopeItems={envelopeItems}
+              token={token}
+              trigger={
+                <Button type="button" variant="outline" className="flex-1">
+                  <DownloadIcon className="mr-2 h-5 w-5" />
+                  <Trans>Download</Trans>
+                </Button>
+              }
            />
          </div>

          <div className="mt-12 w-full">
-            <PDFViewer key={envelopeItems[0].id} documentData={envelopeItems[0].documentData} />
+            <PDFViewer
+              key={envelopeItems[0].id}
+              envelopeItem={envelopeItems[0]}
+              token={token}
+              version="signed"
+            />
          </div>
        </>
      )}
@ -138,14 +156,16 @@ type DocumentCertificateQrV2Props = {
  title: string;
  recipientCount: number;
  formattedDate: string;
+  token: string;
 };

 const DocumentCertificateQrV2 = ({
  title,
  recipientCount,
  formattedDate,
+  token,
 }: DocumentCertificateQrV2Props) => {
-  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
+  const { currentEnvelopeItem, envelopeItems } = useCurrentEnvelopeRender();

  return (
    <div className="flex min-h-screen flex-col items-start">
@ -163,18 +183,24 @@ const DocumentCertificateQrV2 = ({
          </div>
        </div>

-        {currentEnvelopeItem && (
-          <ShareDocumentDownloadButton
-            title={title}
-            documentData={currentEnvelopeItem.documentData}
-          />
-        )}
+        <EnvelopeDownloadDialog
+          envelopeId={envelopeItems[0].envelopeId}
+          envelopeStatus={DocumentStatus.COMPLETED}
+          envelopeItems={envelopeItems}
+          token={token}
+          trigger={
+            <Button type="button" variant="outline" className="flex-1">
+              <DownloadIcon className="mr-2 h-5 w-5" />
+              <Trans>Download</Trans>
+            </Button>
+          }
+        />
      </div>

      <div className="mt-12 w-full">
        <EnvelopeRendererFileSelector className="mb-4 p-0" fields={[]} secondaryOverride={''} />

-        <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
+        <PDFViewerKonvaLazy renderer="preview" customPageRenderer={EnvelopeGenericPageRenderer} />
      </div>
    </div>
  );
--- a/apps/remix/app/components/general/document/document-drop-zone-wrapper.tsx
+++ b/apps/remix/app/components/general/document/document-drop-zone-wrapper.tsx
@ -16,9 +16,9 @@ import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT, IS_BILLING_ENABLED } from '@documenso/l
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
-import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
+import type { TCreateDocumentPayloadSchema } from '@documenso/trpc/server/document-router/create-document.types';
 import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';

@ -62,14 +62,18 @@ export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZon
    try {
      setIsLoading(true);

-      const response = await putPdfFile(file);
-
-      const { legacyDocumentId: id } = await createDocument({
+      const payload = {
        title: file.name,
-        documentDataId: response.id,
-        timezone: userTimezone, // Note: When migrating to v2 document upload remember to pass this through as a 'userTimezone' field.
+        timezone: userTimezone,
        folderId: folderId ?? undefined,
-      });
+      } satisfies TCreateDocumentPayloadSchema;
+
+      const formData = new FormData();
+
+      formData.append('payload', JSON.stringify(payload));
+      formData.append('file', file);
+
+      const { envelopeId: id } = await createDocument(formData);

      void refreshLimits();

--- a/apps/remix/app/components/general/document/document-edit-form.tsx
+++ b/apps/remix/app/components/general/document/document-edit-form.tsx
@ -441,9 +441,10 @@ export const DocumentEditForm = ({
      >
        <CardContent className="p-2">
          <PDFViewer
-            key={document.documentData.id}
-            documentData={document.documentData}
-            document={document}
+            key={document.envelopeItems[0].id}
+            envelopeItem={document.envelopeItems[0]}
+            token={undefined}
+            version="signed"
            onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
          />
        </CardContent>
--- a/apps/remix/app/components/general/document/document-page-view-button.tsx
+++ b/apps/remix/app/components/general/document/document-page-view-button.tsx
@ -1,18 +1,14 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
 import { CheckCircle, Download, EyeIcon, Pencil } from 'lucide-react';
 import { Link } from 'react-router';
 import { match } from 'ts-pattern';

-import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';

 import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';

@ -23,9 +19,6 @@ export type DocumentPageViewButtonProps = {
 export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps) => {
  const { user } = useSession();

-  const { toast } = useToast();
-  const { _ } = useLingui();
-
  const recipient = envelope.recipients.find((recipient) => recipient.email === user.email);

  const isRecipient = !!recipient;
@ -37,25 +30,6 @@ export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps
  const documentsPath = formatDocumentsPath(envelope.team.url);
  const formatPath = `${documentsPath}/${envelope.id}/edit`;

-  const onDownloadClick = async () => {
-    try {
-      // Todo; Envelopes - Support multiple items
-      const envelopeItem = envelope.envelopeItems[0];
-
-      if (!envelopeItem.documentData) {
-        throw new Error('No document available');
-      }
-
-      await downloadPDF({ documentData: envelopeItem.documentData, fileName: envelopeItem.title });
-    } catch (err) {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`An error occurred while downloading your document.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
  return match({
    isRecipient,
    isPending,
@ -95,7 +69,7 @@ export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps
        </Link>
      </Button>
    ))
-    .with({ isComplete: true, internalVersion: 2 }, () => (
+    .with({ isComplete: true }, () => (
      <EnvelopeDownloadDialog
        envelopeId={envelope.id}
        envelopeStatus={envelope.status}
@ -109,11 +83,5 @@ export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps
        }
      />
    ))
-    .with({ isComplete: true }, () => (
-      <Button className="w-full" onClick={onDownloadClick}>
-        <Download className="-ml-1 mr-2 inline h-4 w-4" />
-        <Trans>Download</Trans>
-      </Button>
-    ))
    .otherwise(() => null);
 };
--- a/apps/remix/app/components/general/document/document-page-view-dropdown.tsx
+++ b/apps/remix/app/components/general/document/document-page-view-dropdown.tsx
@ -1,6 +1,5 @@
 import { useState } from 'react';

-import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus } from '@prisma/client';
@ -16,13 +15,11 @@ import {
 } from 'lucide-react';
 import { Link, useNavigate } from 'react-router';

-import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import {
  DropdownMenu,
@ -67,64 +64,6 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP

  const documentsPath = formatDocumentsPath(team.url);

-  const onDownloadClick = async () => {
-    try {
-      const documentWithData = await trpcClient.document.get.query(
-        {
-          documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
-        },
-        {
-          context: {
-            teamId: team?.id?.toString(),
-          },
-        },
-      );
-
-      const documentData = documentWithData?.documentData;
-
-      if (!documentData) {
-        return;
-      }
-
-      await downloadPDF({ documentData, fileName: envelope.title });
-    } catch (err) {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`An error occurred while downloading your document.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const onDownloadOriginalClick = async () => {
-    try {
-      const documentWithData = await trpcClient.document.get.query(
-        {
-          documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
-        },
-        {
-          context: {
-            teamId: team?.id?.toString(),
-          },
-        },
-      );
-
-      const documentData = documentWithData?.documentData;
-
-      if (!documentData) {
-        return;
-      }
-
-      await downloadPDF({ documentData, fileName: envelope.title, version: 'original' });
-    } catch (err) {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`An error occurred while downloading your document.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
  const nonSignedRecipients = envelope.recipients.filter((item) => item.signingStatus !== 'SIGNED');

  return (
@ -147,36 +86,20 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
          </DropdownMenuItem>
        )}

-        {envelope.internalVersion === 2 ? (
-          <EnvelopeDownloadDialog
-            envelopeId={envelope.id}
-            envelopeStatus={envelope.status}
-            token={recipient?.token}
-            envelopeItems={envelope.envelopeItems}
-            trigger={
-              <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
-                <div>
-                  <Download className="mr-2 h-4 w-4" />
-                  <Trans>Download</Trans>
-                </div>
-              </DropdownMenuItem>
-            }
-          />
-        ) : (
-          <>
-            {isComplete && (
-              <DropdownMenuItem onClick={onDownloadClick}>
+        <EnvelopeDownloadDialog
+          envelopeId={envelope.id}
+          envelopeStatus={envelope.status}
+          token={recipient?.token}
+          envelopeItems={envelope.envelopeItems}
+          trigger={
+            <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+              <div>
                <Download className="mr-2 h-4 w-4" />
                <Trans>Download</Trans>
-              </DropdownMenuItem>
-            )}
-
-            <DropdownMenuItem onClick={onDownloadOriginalClick}>
-              <Download className="mr-2 h-4 w-4" />
-              <Trans>Download Original</Trans>
+              </div>
            </DropdownMenuItem>
-          </>
-        )}
+          }
+        />

        <DropdownMenuItem asChild>
          <Link to={`${documentsPath}/${envelope.id}/logs`}>
@ -250,7 +173,8 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP

      {isDuplicateDialogOpen && (
        <DocumentDuplicateDialog
-          id={mapSecondaryIdToDocumentId(envelope.secondaryId)}
+          id={envelope.id}
+          token={recipient?.token}
          open={isDuplicateDialogOpen}
          onOpenChange={setDuplicateDialogOpen}
        />
--- a/apps/remix/app/components/general/document/document-upload-button.tsx
+++ b/apps/remix/app/components/general/document/document-upload-button.tsx
@ -13,9 +13,9 @@ import { useSession } from '@documenso/lib/client-only/providers/session';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
+import type { TCreateDocumentPayloadSchema } from '@documenso/trpc/server/document-router/create-document.types';
 import { cn } from '@documenso/ui/lib/utils';
 import { DocumentDropzone } from '@documenso/ui/primitives/document-upload';
 import {
@ -73,14 +73,18 @@ export const DocumentUploadButton = ({ className }: DocumentUploadButtonProps) =
    try {
      setIsLoading(true);

-      const response = await putPdfFile(file);
-
-      const { legacyDocumentId: id } = await createDocument({
+      const payload = {
        title: file.name,
-        documentDataId: response.id,
        timezone: userTimezone,
        folderId: folderId ?? undefined,
-      });
+      } satisfies TCreateDocumentPayloadSchema;
+
+      const formData = new FormData();
+
+      formData.append('payload', JSON.stringify(payload));
+      formData.append('file', file);
+
+      const { envelopeId: id } = await createDocument(formData);

      void refreshLimits();

--- a/apps/remix/app/components/general/document/envelope-upload-button.tsx
+++ b/apps/remix/app/components/general/document/envelope-upload-button.tsx
@ -14,9 +14,9 @@ import { useSession } from '@documenso/lib/client-only/providers/session';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
+import type { TCreateEnvelopePayload } from '@documenso/trpc/server/envelope-router/create-envelope.types';
 import { cn } from '@documenso/ui/lib/utils';
 import { DocumentDropzone } from '@documenso/ui/primitives/document-upload';
 import {
@ -78,35 +78,24 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
    try {
      setIsLoading(true);

-      const result = await Promise.all(
-        files.map(async (file) => {
-          try {
-            const response = await putPdfFile(file);
-
-            return {
-              title: file.name,
-              documentDataId: response.id,
-            };
-          } catch (err) {
-            console.error(err);
-            throw new Error('Failed to upload document');
-          }
-        }),
-      );
-
-      const envelopeItemsToCreate = result.filter(
-        (item): item is { title: string; documentDataId: string } => item !== undefined,
-      );
-
-      const { id } = await createEnvelope({
+      const payload = {
        folderId,
        type,
        title: files[0].name,
-        items: envelopeItemsToCreate,
        meta: {
          timezone: userTimezone,
        },
-      }).catch((error) => {
+      } satisfies TCreateEnvelopePayload;
+
+      const formData = new FormData();
+
+      formData.append('payload', JSON.stringify(payload));
+
+      for (const file of files) {
+        formData.append('files', file);
+      }
+
+      const { id } = await createEnvelope(formData).catch((error) => {
        console.error(error);

        throw error;
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx
@ -26,7 +26,7 @@ import { fieldButtonList } from './envelope-editor-fields-drag-drop';
 export default function EnvelopeEditorFieldsPageRenderer() {
  const { t, i18n } = useLingui();
  const { envelope, editorFields, getRecipientColorKey } = useCurrentEnvelopeEditor();
-  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
+  const { currentEnvelopeItem, setRenderError } = useCurrentEnvelopeRender();

  const interactiveTransformer = useRef<Transformer | null>(null);

@ -103,7 +103,6 @@ export default function EnvelopeEditorFieldsPageRenderer() {
      fieldUpdates.height = fieldPageHeight;
    }

-    // Todo: envelopes Use id
    editorFields.updateFieldByFormId(fieldFormId, fieldUpdates);

    // Select the field if it is not already selected.
@ -114,7 +113,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
    pageLayer.current?.batchDraw();
  };

-  const renderFieldOnLayer = (field: TLocalField) => {
+  const unsafeRenderFieldOnLayer = (field: TLocalField) => {
    if (!pageLayer.current) {
      return;
    }
@ -160,6 +159,15 @@ export default function EnvelopeEditorFieldsPageRenderer() {
    fieldGroup.on('dragend', handleResizeOrMove);
  };

+  const renderFieldOnLayer = (field: TLocalField) => {
+    try {
+      unsafeRenderFieldOnLayer(field);
+    } catch (err) {
+      console.error(err);
+      setRenderError(true);
+    }
+  };
+
  /**
   * Initialize the Konva page canvas and all fields and interactions.
   */
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx
@ -27,7 +27,8 @@ import type {
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
-import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
 import { RecipientSelector } from '@documenso/ui/primitives/recipient-selector';
 import { Separator } from '@documenso/ui/primitives/separator';

@ -112,9 +113,34 @@ export const EnvelopeEditorFieldsPage = () => {
        <EnvelopeRendererFileSelector fields={editorFields.localFields} />

        {/* Document View */}
-        <div className="mt-4 flex h-full justify-center p-4">
+        <div className="mt-4 flex flex-col items-center justify-center">
+          {envelope.recipients.length === 0 && (
+            <Alert
+              variant="neutral"
+              className="border-border bg-background mb-4 flex max-w-[800px] flex-row items-center justify-between space-y-0 rounded-sm border"
+            >
+              <div className="flex flex-col gap-1">
+                <AlertTitle>
+                  <Trans>Missing Recipients</Trans>
+                </AlertTitle>
+                <AlertDescription>
+                  <Trans>You need at least one recipient to add fields</Trans>
+                </AlertDescription>
+              </div>
+
+              <Button asChild variant="outline">
+                <Link to={`${relativePath.editorPath}`}>
+                  <Trans>Add Recipients</Trans>
+                </Link>
+              </Button>
+            </Alert>
+          )}
+
          {currentEnvelopeItem !== null ? (
-            <PDFViewerKonvaLazy customPageRenderer={EnvelopeEditorFieldsPageRenderer} />
+            <PDFViewerKonvaLazy
+              renderer="editor"
+              customPageRenderer={EnvelopeEditorFieldsPageRenderer}
+            />
          ) : (
            <div className="flex flex-col items-center justify-center py-32">
              <FileTextIcon className="text-muted-foreground h-10 w-10" />
@ -130,7 +156,7 @@ export const EnvelopeEditorFieldsPage = () => {
      </div>

      {/* Right Section - Form Fields Panel */}
-      {currentEnvelopeItem && (
+      {currentEnvelopeItem && envelope.recipients.length > 0 && (
        <div className="bg-background border-border sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l py-4">
          {/* Recipient selector section. */}
          <section className="px-4">
@ -138,29 +164,15 @@ export const EnvelopeEditorFieldsPage = () => {
              <Trans>Selected Recipient</Trans>
            </h3>

-            {envelope.recipients.length === 0 ? (
-              <Alert variant="warning">
-                <AlertDescription className="flex flex-col gap-2">
-                  <Trans>You need at least one recipient to add fields</Trans>
-
-                  <Link to={`${relativePath.editorPath}`} className="text-sm">
-                    <p>
-                      <Trans>Click here to add a recipient</Trans>
-                    </p>
-                  </Link>
-                </AlertDescription>
-              </Alert>
-            ) : (
-              <RecipientSelector
-                selectedRecipient={editorFields.selectedRecipient}
-                onSelectedRecipientChange={(recipient) =>
-                  editorFields.setSelectedRecipient(recipient.id)
-                }
-                recipients={envelope.recipients}
-                className="w-full"
-                align="end"
-              />
-            )}
+            <RecipientSelector
+              selectedRecipient={editorFields.selectedRecipient}
+              onSelectedRecipientChange={(recipient) =>
+                editorFields.setSelectedRecipient(recipient.id)
+              }
+              recipients={envelope.recipients}
+              className="w-full"
+              align="end"
+            />

            {editorFields.selectedRecipient &&
              !canRecipientFieldsBeModified(editorFields.selectedRecipient, envelope.fields) && (
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-preview-page.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-preview-page.tsx
@ -1,10 +1,20 @@
-import { lazy, useEffect, useState } from 'react';
+import { lazy, useEffect, useMemo, useState } from 'react';

+import { faker } from '@faker-js/faker/locale/en';
 import { Trans } from '@lingui/react/macro';
-import { ConstructionIcon, FileTextIcon } from 'lucide-react';
+import { FieldType } from '@prisma/client';
+import { FileTextIcon } from 'lucide-react';
+import { match } from 'ts-pattern';

 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
-import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import {
+  EnvelopeRenderProvider,
+  useCurrentEnvelopeRender,
+} from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { ZFieldAndMetaSchema } from '@documenso/lib/types/field-meta';
+import { extractFieldInsertionValues } from '@documenso/lib/utils/envelope-signing';
+import { toCheckboxCustomText } from '@documenso/lib/utils/fields';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
@ -15,15 +25,169 @@ import { EnvelopeRendererFileSelector } from './envelope-file-selector';

 const EnvelopeGenericPageRenderer = lazy(async () => import('./envelope-generic-page-renderer'));

+// Todo: Envelopes - Dynamically import faker
 export const EnvelopeEditorPreviewPage = () => {
  const { envelope, editorFields } = useCurrentEnvelopeEditor();

-  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
+  const { currentEnvelopeItem, fields } = useCurrentEnvelopeRender();

  const [selectedPreviewMode, setSelectedPreviewMode] = useState<'recipient' | 'signed'>(
    'recipient',
  );

+  const fieldsWithPlaceholders = useMemo(() => {
+    return fields.map((field) => {
+      const fieldMeta = ZFieldAndMetaSchema.parse(field);
+
+      const recipient = envelope.recipients.find((recipient) => recipient.id === field.recipientId);
+
+      if (!recipient) {
+        throw new Error('Recipient not found');
+      }
+
+      faker.seed(recipient.id);
+
+      const recipientName = recipient.name || faker.person.fullName();
+      const recipientEmail = recipient.email || faker.internet.email();
+
+      faker.seed(recipient.id + field.id);
+
+      return {
+        ...field,
+        inserted: true,
+        ...match(fieldMeta)
+          .with({ type: FieldType.TEXT }, ({ fieldMeta }) => {
+            let text = fieldMeta?.text || faker.lorem.words(5);
+
+            if (fieldMeta?.characterLimit) {
+              text = text.slice(0, fieldMeta?.characterLimit);
+            }
+
+            return {
+              customText: text,
+            };
+          })
+          .with({ type: FieldType.NUMBER }, ({ fieldMeta }) => {
+            let number = fieldMeta?.value ?? '';
+
+            if (number === '') {
+              number = faker.number
+                .int({
+                  min: fieldMeta?.minValue ?? 0,
+                  max: fieldMeta?.maxValue ?? 1000,
+                })
+                .toString();
+            }
+
+            return {
+              customText: number,
+            };
+          })
+          .with({ type: FieldType.DATE }, () => {
+            const date = extractFieldInsertionValues({
+              fieldValue: {
+                type: FieldType.DATE,
+                value: true,
+              },
+              field,
+              documentMeta: envelope.documentMeta,
+            });
+
+            return {
+              customText: date.customText,
+            };
+          })
+          .with({ type: FieldType.EMAIL }, () => {
+            return {
+              customText: recipientEmail,
+            };
+          })
+          .with({ type: FieldType.NAME }, () => {
+            return {
+              customText: recipientName,
+            };
+          })
+          .with({ type: FieldType.INITIALS }, () => {
+            return {
+              customText: extractInitials(recipientName),
+            };
+          })
+          .with({ type: FieldType.RADIO }, ({ fieldMeta }) => {
+            const values = fieldMeta?.values ?? [];
+
+            if (values.length === 0) {
+              return '';
+            }
+
+            let customText = '';
+
+            const preselectedValue = values.findIndex((value) => value.checked);
+
+            if (preselectedValue !== -1) {
+              customText = preselectedValue.toString();
+            } else {
+              const randomIndex = faker.number.int({ min: 0, max: values.length - 1 });
+              customText = randomIndex.toString();
+            }
+
+            return {
+              customText,
+            };
+          })
+          .with({ type: FieldType.CHECKBOX }, ({ fieldMeta }) => {
+            let checkedValues: number[] = [];
+
+            const values = fieldMeta?.values ?? [];
+
+            values.forEach((value, index) => {
+              if (value.checked) {
+                checkedValues.push(index);
+              }
+            });
+
+            if (checkedValues.length === 0 && values.length > 0) {
+              const numberOfValues = fieldMeta?.validationLength || 1;
+
+              checkedValues = Array.from({ length: numberOfValues }, (_, index) => index);
+            }
+
+            return {
+              customText: toCheckboxCustomText(checkedValues),
+            };
+          })
+          .with({ type: FieldType.DROPDOWN }, ({ fieldMeta }) => {
+            const values = fieldMeta?.values ?? [];
+
+            let customText = fieldMeta?.defaultValue || '';
+
+            if (!customText && values.length > 0) {
+              const randomIndex = faker.number.int({ min: 0, max: values.length - 1 });
+              customText = values[randomIndex].value;
+            }
+
+            return {
+              customText,
+            };
+          })
+          .with({ type: FieldType.SIGNATURE }, () => {
+            return {
+              customText: '',
+              signature: {
+                signatureImageAsBase64: '',
+                typedSignature: recipientName,
+              },
+            };
+          })
+          .with({ type: FieldType.FREE_SIGNATURE }, () => {
+            return {
+              customText: '',
+            };
+          })
+          .exhaustive(),
+      };
+    });
+  }, [fields, envelope, envelope.recipients, envelope.documentMeta]);
+
  /**
   * Set the selected recipient to the first recipient in the envelope.
   */
@ -31,40 +195,38 @@ export const EnvelopeEditorPreviewPage = () => {
    editorFields.setSelectedRecipient(envelope.recipients[0]?.id ?? null);
  }, []);

+  // Override the parent renderer provider so we can inject custom fields.
  return (
-    <div className="relative flex h-full">
-      <div className="flex w-full flex-col overflow-y-auto">
-        {/* Horizontal envelope item selector */}
-        <EnvelopeRendererFileSelector fields={editorFields.localFields} />
+    <EnvelopeRenderProvider
+      envelope={envelope}
+      token={undefined}
+      fields={fieldsWithPlaceholders}
+      recipients={envelope.recipients}
+      overrideSettings={{
+        mode: 'export',
+      }}
+    >
+      <div className="relative flex h-full">
+        <div className="flex w-full flex-col overflow-y-auto">
+          {/* Horizontal envelope item selector */}
+          <EnvelopeRendererFileSelector fields={editorFields.localFields} />

-        {/* Document View */}
-        <div className="mt-4 flex flex-col items-center justify-center">
-          <Alert variant="warning" className="mb-4 max-w-[800px]">
-            <AlertTitle>
-              <Trans>Preview Mode</Trans>
-            </AlertTitle>
-            <AlertDescription>
-              <Trans>Preview what the signed document will look like with placeholder data</Trans>
-            </AlertDescription>
-          </Alert>
+          {/* Document View */}
+          <div className="mt-4 flex flex-col items-center justify-center">
+            <Alert variant="warning" className="mb-4 max-w-[800px]">
+              <AlertTitle>
+                <Trans>Preview Mode</Trans>
+              </AlertTitle>
+              <AlertDescription>
+                <Trans>Preview what the signed document will look like with placeholder data</Trans>
+              </AlertDescription>
+            </Alert>

-          {/* Coming soon section */}
-          <div className="border-border bg-card hover:bg-accent/10 flex w-full max-w-[800px] items-center gap-4 rounded-lg border p-4 transition-colors">
-            <div className="flex w-full flex-col items-center justify-center gap-2 py-32">
-              <ConstructionIcon className="text-muted-foreground h-10 w-10" />
-              <h3 className="text-foreground text-sm font-semibold">
-                <Trans>Coming soon</Trans>
-              </h3>
-              <p className="text-muted-foreground text-sm">
-                <Trans>This feature is coming soon</Trans>
-              </p>
-            </div>
-          </div>
-
-          {/* Todo: Envelopes - Remove div after preview mode is implemented */}
-          <div className="hidden">
            {currentEnvelopeItem !== null ? (
-              <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
+              <PDFViewerKonvaLazy
+                renderer="editor"
+                customPageRenderer={EnvelopeGenericPageRenderer}
+              />
            ) : (
              <div className="flex flex-col items-center justify-center py-32">
                <FileTextIcon className="text-muted-foreground h-10 w-10" />
@ -78,27 +240,28 @@ export const EnvelopeEditorPreviewPage = () => {
            )}
          </div>
        </div>
-      </div>

-      {/* Right Section - Form Fields Panel */}
-      {currentEnvelopeItem && false && (
-        <div className="sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l border-gray-200 bg-white py-4">
-          {/* Add fields section. */}
-          <section className="px-4">
-            {/* <h3 className="mb-2 text-sm font-semibold text-gray-900">
+        {/* Right Section - Form Fields Panel */}
+        {currentEnvelopeItem && false && (
+          <div className="sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l border-gray-200 bg-white py-4">
+            {/* Add fields section. */}
+            <section className="px-4">
+              {/* <h3 className="mb-2 text-sm font-semibold text-gray-900">
              <Trans>Preivew Mode</Trans>
            </h3> */}

-            <Alert variant="neutral">
-              <AlertTitle>
-                <Trans>Preview Mode</Trans>
-              </AlertTitle>
-              <AlertDescription>
-                <Trans>Preview what the signed document will look like with placeholder data</Trans>
-              </AlertDescription>
-            </Alert>
+              <Alert variant="neutral">
+                <AlertTitle>
+                  <Trans>Preview Mode</Trans>
+                </AlertTitle>
+                <AlertDescription>
+                  <Trans>
+                    Preview what the signed document will look like with placeholder data
+                  </Trans>
+                </AlertDescription>
+              </Alert>

-            {/* <Alert variant="neutral">
+              {/* <Alert variant="neutral">
              <RadioGroup
                className="gap-y-1"
                value={selectedPreviewMode}
@ -137,36 +300,37 @@ export const EnvelopeEditorPreviewPage = () => {
            <div>Preview what a recipient will see</div>

            <div>Preview the signed document</div> */}
-          </section>
+            </section>

-          {false && (
-            <AnimateGenericFadeInOut key={selectedPreviewMode}>
-              {selectedPreviewMode === 'recipient' && (
-                <>
-                  <Separator className="my-4" />
+            {false && (
+              <AnimateGenericFadeInOut key={selectedPreviewMode}>
+                {selectedPreviewMode === 'recipient' && (
+                  <>
+                    <Separator className="my-4" />

-                  {/* Recipient selector section. */}
-                  <section className="px-4">
-                    <h3 className="mb-2 text-sm font-semibold text-gray-900">
-                      <Trans>Selected Recipient</Trans>
-                    </h3>
+                    {/* Recipient selector section. */}
+                    <section className="px-4">
+                      <h3 className="mb-2 text-sm font-semibold text-gray-900">
+                        <Trans>Selected Recipient</Trans>
+                      </h3>

-                    <RecipientSelector
-                      selectedRecipient={editorFields.selectedRecipient}
-                      onSelectedRecipientChange={(recipient) =>
-                        editorFields.setSelectedRecipient(recipient.id)
-                      }
-                      recipients={envelope.recipients}
-                      className="w-full"
-                      align="end"
-                    />
-                  </section>
-                </>
-              )}
-            </AnimateGenericFadeInOut>
-          )}
-        </div>
-      )}
-    </div>
+                      <RecipientSelector
+                        selectedRecipient={editorFields.selectedRecipient}
+                        onSelectedRecipientChange={(recipient) =>
+                          editorFields.setSelectedRecipient(recipient.id)
+                        }
+                        recipients={envelope.recipients}
+                        className="w-full"
+                        align="end"
+                      />
+                    </section>
+                  </>
+                )}
+              </AnimateGenericFadeInOut>
+            )}
+          </div>
+        )}
+      </div>
+    </EnvelopeRenderProvider>
  );
 };
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-recipient-form.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-recipient-form.tsx
@ -482,30 +482,46 @@ export const EnvelopeEditorRecipientForm = () => {

    const { data } = validatedFormValues;

+    // Weird edge case where the whole envelope is created via API
+    // with no signing order. If they come to this page it will show an error
+    // since they aren't equal and the recipient is no longer editable.
+    const envelopeRecipients = data.signers.map((recipient) => {
+      if (!canRecipientBeModified(recipient.id)) {
+        return {
+          ...recipient,
+          signingOrder: recipient.signingOrder,
+        };
+      }
+      return recipient;
+    });
+
    const hasSigningOrderChanged = envelope.documentMeta.signingOrder !== data.signingOrder;
    const hasAllowDictateNextSignerChanged =
      envelope.documentMeta.allowDictateNextSigner !== data.allowDictateNextSigner;

    const hasSignersChanged =
-      data.signers.length !== recipients.length ||
-      data.signers.some((signer) => {
+      envelopeRecipients.length !== recipients.length ||
+      envelopeRecipients.some((signer) => {
        const recipient = recipients.find((recipient) => recipient.id === signer.id);

        if (!recipient) {
          return true;
        }

+        const signerActionAuth = signer.actionAuth;
+        const recipientActionAuth = recipient.authOptions?.actionAuth || [];
+
        return (
          signer.email !== recipient.email ||
          signer.name !== recipient.name ||
          signer.role !== recipient.role ||
          signer.signingOrder !== recipient.signingOrder ||
-          !isDeepEqual(signer.actionAuth, recipient.authOptions?.actionAuth)
+          !isDeepEqual(signerActionAuth, recipientActionAuth)
        );
      });

    if (hasSignersChanged) {
-      setRecipientsDebounced(validatedFormValues.data.signers);
+      setRecipientsDebounced(envelopeRecipients);
    }

    if (hasSigningOrderChanged || hasAllowDictateNextSignerChanged) {
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx
@ -174,7 +174,7 @@ export const EnvelopeEditorSettingsDialog = ({
  const { t, i18n } = useLingui();
  const { toast } = useToast();

-  const { envelope } = useCurrentEnvelopeEditor();
+  const { envelope, updateEnvelopeAsync } = useCurrentEnvelopeEditor();

  const team = useCurrentTeam();
  const organisation = useCurrentOrganisation();
@ -186,14 +186,12 @@ export const EnvelopeEditorSettingsDialog = ({
    documentAuth: envelope.authOptions,
  });

-  const form = useForm<TAddSettingsFormSchema>({
-    resolver: zodResolver(ZAddSettingsFormSchema),
-    defaultValues: {
-      externalId: envelope.externalId || '', // Todo: String or undefined?
+  const createDefaultValues = () => {
+    return {
+      externalId: envelope.externalId || '',
      visibility: envelope.visibility || '',
      globalAccessAuth: documentAuthOption?.globalAccessAuth || [],
      globalActionAuth: documentAuthOption?.globalActionAuth || [],
-
      meta: {
        subject: envelope.documentMeta.subject ?? '',
        message: envelope.documentMeta.message ?? '',
@ -210,10 +208,13 @@ export const EnvelopeEditorSettingsDialog = ({
        emailSettings: ZDocumentEmailSettingsSchema.parse(envelope.documentMeta.emailSettings),
        signatureTypes: extractTeamSignatureSettings(envelope.documentMeta),
      },
-    },
-  });
+    };
+  };

-  const { mutateAsync: updateEnvelope } = trpc.envelope.update.useMutation();
+  const form = useForm<TAddSettingsFormSchema>({
+    resolver: zodResolver(ZAddSettingsFormSchema),
+    defaultValues: createDefaultValues(),
+  });

  const envelopeHasBeenSent =
    envelope.type === EnvelopeType.DOCUMENT &&
@ -229,7 +230,6 @@ export const EnvelopeEditorSettingsDialog = ({

  const emails = emailData?.data || [];

-  // Todo: Envelopes this doesn't make sense (look at previous)
  const canUpdateVisibility = canAccessTeamDocument(team.currentTeamRole, envelope.visibility);

  const onFormSubmit = async (data: TAddSettingsFormSchema) => {
@ -240,9 +240,7 @@ export const EnvelopeEditorSettingsDialog = ({
      .safeParse(data.globalAccessAuth);

    try {
-      await updateEnvelope({
-        envelopeId: envelope.id,
-        envelopeType: envelope.type,
+      await updateEnvelopeAsync({
        data: {
          externalId: data.externalId || null,
          visibility: data.visibility,
@ -297,7 +295,7 @@ export const EnvelopeEditorSettingsDialog = ({
  ]);

  useEffect(() => {
-    form.reset();
+    form.reset(createDefaultValues());
    setActiveTab('general');
  }, [open, form]);

@ -323,7 +321,7 @@ export const EnvelopeEditorSettingsDialog = ({

      <DialogContent className="flex w-full !max-w-5xl flex-row gap-0 p-0">
        {/* Sidebar. */}
-        <div className="flex w-80 flex-col border-r bg-gray-50">
+        <div className="bg-accent/20 flex w-80 flex-col border-r">
          <DialogHeader className="p-6 pb-4">
            <DialogTitle>Document Settings</DialogTitle>
          </DialogHeader>
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx
@ -18,9 +18,9 @@ import {
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { nanoid } from '@documenso/lib/universal/id';
-import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { canEnvelopeItemsBeModified } from '@documenso/lib/utils/envelope';
 import { trpc } from '@documenso/trpc/react';
+import type { TCreateEnvelopeItemsPayload } from '@documenso/trpc/server/envelope-router/create-envelope-items.types';
 import { Button } from '@documenso/ui/primitives/button';
 import {
  Card,
@ -67,8 +67,8 @@ export const EnvelopeEditorUploadPage = () => {

  const { mutateAsync: createEnvelopeItems, isPending: isCreatingEnvelopeItems } =
    trpc.envelope.item.createMany.useMutation({
-      onSuccess: (data) => {
-        const createdEnvelopes = data.createdEnvelopeItems.filter(
+      onSuccess: ({ data }) => {
+        const createdEnvelopes = data.filter(
          (item) => !envelope.envelopeItems.find((envelopeItem) => envelopeItem.id === item.id),
        );

@ -79,10 +79,10 @@ export const EnvelopeEditorUploadPage = () => {
    });

  const { mutateAsync: updateEnvelopeItems } = trpc.envelope.item.updateMany.useMutation({
-    onSuccess: (data) => {
+    onSuccess: ({ data }) => {
      setLocalEnvelope({
        envelopeItems: envelope.envelopeItems.map((originalItem) => {
-          const updatedItem = data.updatedEnvelopeItems.find((item) => item.id === originalItem.id);
+          const updatedItem = data.find((item) => item.id === originalItem.id);

          if (updatedItem) {
            return {
@ -114,36 +114,19 @@ export const EnvelopeEditorUploadPage = () => {

    setLocalFiles((prev) => [...prev, ...newUploadingFiles]);

-    const result = await Promise.all(
-      files.map(async (file, index) => {
-        try {
-          const response = await putPdfFile(file);
-
-          // Mark as uploaded (remove from uploading state)
-          return {
-            title: file.name,
-            documentDataId: response.id,
-          };
-        } catch (_error) {
-          setLocalFiles((prev) =>
-            prev.map((uploadingFile) =>
-              uploadingFile.id === newUploadingFiles[index].id
-                ? { ...uploadingFile, isError: true, isUploading: false }
-                : uploadingFile,
-            ),
-          );
-        }
-      }),
-    );
-
-    const envelopeItemsToCreate = result.filter(
-      (item): item is { title: string; documentDataId: string } => item !== undefined,
-    );
-
-    const { createdEnvelopeItems } = await createEnvelopeItems({
+    const payload = {
      envelopeId: envelope.id,
-      items: envelopeItemsToCreate,
-    }).catch((error) => {
+    } satisfies TCreateEnvelopeItemsPayload;
+
+    const formData = new FormData();
+
+    formData.append('payload', JSON.stringify(payload));
+
+    for (const file of files) {
+      formData.append('files', file);
+    }
+
+    const { data } = await createEnvelopeItems(formData).catch((error) => {
      console.error(error);

      // Set error state on files in batch upload.
@ -165,7 +148,7 @@ export const EnvelopeEditorUploadPage = () => {
      );

      return filteredFiles.concat(
-        createdEnvelopeItems.map((item) => ({
+        data.map((item) => ({
          id: item.id,
          envelopeItemId: item.id,
          title: item.title,
@ -203,7 +186,6 @@ export const EnvelopeEditorUploadPage = () => {
    debouncedUpdateEnvelopeItems(items);
  };

-  // Todo: Envelopes - Sync into envelopes data
  const debouncedUpdateEnvelopeItems = useDebounceFunction((files: LocalFile[]) => {
    void updateEnvelopeItems({
      envelopeId: envelope.id,
--- a/apps/remix/app/components/general/envelope-editor/envelope-file-selector.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-file-selector.tsx
@ -29,7 +29,7 @@ export const EnvelopeItemSelector = ({
      {...buttonProps}
    >
      <div
-        className={`flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium ${
+        className={`flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full text-xs font-medium ${
          isSelected ? 'bg-green-100 text-green-600' : 'bg-gray-200 text-gray-600'
        }`}
      >
--- a/apps/remix/app/components/general/envelope-editor/envelope-generic-page-renderer.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-generic-page-renderer.tsx
@ -1,6 +1,7 @@
 import { useEffect, useMemo } from 'react';

 import { useLingui } from '@lingui/react/macro';
+import { type Recipient, SigningStatus } from '@prisma/client';
 import type Konva from 'konva';

 import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
@ -8,11 +9,23 @@ import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/e
 import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
 import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
+import { EnvelopeRecipientFieldTooltip } from '@documenso/ui/components/document/envelope-recipient-field-tooltip';
+
+type GenericLocalField = TEnvelope['fields'][number] & {
+  recipient: Pick<Recipient, 'id' | 'name' | 'email' | 'signingStatus'>;
+};

 export default function EnvelopeGenericPageRenderer() {
  const { i18n } = useLingui();

-  const { currentEnvelopeItem, fields, getRecipientColorKey } = useCurrentEnvelopeRender();
+  const {
+    currentEnvelopeItem,
+    fields,
+    recipients,
+    getRecipientColorKey,
+    setRenderError,
+    overrideSettings,
+  } = useCurrentEnvelopeRender();

  const {
    stage,
@ -28,44 +41,73 @@ export default function EnvelopeGenericPageRenderer() {

  const { _className, scale } = pageContext;

-  const localPageFields = useMemo(
-    () =>
-      fields.filter(
+  const localPageFields = useMemo((): GenericLocalField[] => {
+    return fields
+      .filter(
        (field) =>
          field.page === pageContext.pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
-      ),
-    [fields, pageContext.pageNumber],
-  );
+      )
+      .map((field) => {
+        const recipient = recipients.find((recipient) => recipient.id === field.recipientId);

-  const renderFieldOnLayer = (field: TEnvelope['fields'][number]) => {
+        if (!recipient) {
+          throw new Error(`Recipient not found for field ${field.id}`);
+        }
+
+        return {
+          ...field,
+          recipient,
+        };
+      });
+  }, [fields, pageContext.pageNumber, currentEnvelopeItem?.id, recipients]);
+
+  const unsafeRenderFieldOnLayer = (field: GenericLocalField) => {
    if (!pageLayer.current) {
      console.error('Layer not loaded yet');
      return;
    }

+    const { recipient } = field;
+
+    const fieldTranslations = getClientSideFieldTranslations(i18n);
+
+    const isInserted = recipient.signingStatus === SigningStatus.SIGNED && field.inserted;
+
    renderField({
      scale,
      pageLayer: pageLayer.current,
      field: {
        renderId: field.id.toString(),
        ...field,
-        customText: '',
        width: Number(field.width),
        height: Number(field.height),
        positionX: Number(field.positionX),
        positionY: Number(field.positionY),
-        inserted: false,
+        customText: isInserted ? field.customText : '',
        fieldMeta: field.fieldMeta,
+        signature: {
+          signatureImageAsBase64: '',
+          typedSignature: fieldTranslations.SIGNATURE,
+        },
      },
-      translations: getClientSideFieldTranslations(i18n),
+      translations: fieldTranslations,
      pageWidth: unscaledViewport.width,
      pageHeight: unscaledViewport.height,
      color: getRecipientColorKey(field.recipientId),
      editable: false,
-      mode: 'sign',
+      mode: overrideSettings?.mode ?? 'sign',
    });
  };

+  const renderFieldOnLayer = (field: GenericLocalField) => {
+    try {
+      unsafeRenderFieldOnLayer(field);
+    } catch (err) {
+      console.error(err);
+      setRenderError(true);
+    }
+  };
+
  /**
   * Initialize the Konva page canvas and all fields and interactions.
   */
@ -113,6 +155,16 @@ export default function EnvelopeGenericPageRenderer() {
      className="relative w-full"
      key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}
    >
+      {overrideSettings?.showRecipientTooltip &&
+        localPageFields.map((field) => (
+          <EnvelopeRecipientFieldTooltip
+            key={field.id}
+            field={field}
+            showFieldStatus={overrideSettings?.showRecipientSigningStatus}
+            showRecipientTooltip={overrideSettings?.showRecipientTooltip}
+          />
+        ))}
+
      {/* The element Konva will inject it's canvas into. */}
      <div className="konva-container absolute inset-0 z-10 w-full" ref={konvaContainer}></div>

--- a/apps/remix/app/components/general/envelope-signing/envelope-signer-form.tsx
+++ b/apps/remix/app/components/general/envelope-signing/envelope-signer-form.tsx
@ -8,6 +8,8 @@ import { Label } from '@documenso/ui/primitives/label';
 import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
 import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';

+import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
+
 import { useRequiredEnvelopeSigningContext } from '../document-signing/envelope-signing-provider';

 export default function EnvelopeSignerForm() {
@ -25,6 +27,8 @@ export default function EnvelopeSignerForm() {
    setSelectedAssistantRecipientId,
  } = useRequiredEnvelopeSigningContext();

+  const { isNameLocked, isEmailLocked } = useEmbedSigningContext() || {};
+
  const hasSignatureField = useMemo(() => {
    return recipientFields.some((field) => field.type === FieldType.SIGNATURE);
  }, [recipientFields]);
@ -37,7 +41,7 @@ export default function EnvelopeSignerForm() {

  if (recipient.role === RecipientRole.ASSISTANT) {
    return (
-      <fieldset className="dark:bg-background border-border rounded-2xl sm:border sm:p-3">
+      <fieldset className="embed--DocumentWidgetForm dark:bg-background border-border rounded-2xl sm:border sm:p-3">
        <RadioGroup
          className="gap-0 space-y-2 shadow-none sm:space-y-3"
          value={selectedAssistantRecipient?.id?.toString()}
@ -101,7 +105,8 @@ export default function EnvelopeSignerForm() {
            id="full-name"
            className="bg-background mt-2"
            value={fullName}
-            onChange={(e) => setFullName(e.target.value.trimStart())}
+            disabled={isNameLocked}
+            onChange={(e) => !isNameLocked && setFullName(e.target.value.trimStart())}
          />
        </div>

--- a/apps/remix/app/components/general/envelope-signing/envelope-signer-header.tsx
+++ b/apps/remix/app/components/general/envelope-signing/envelope-signer-header.tsx
@ -16,6 +16,7 @@ import {
 import { Separator } from '@documenso/ui/primitives/separator';

 import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
+import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
 import { BrandingLogo } from '~/components/general/branding-logo';

 import { BrandingLogoIcon } from '../branding-logo-icon';
@ -28,7 +29,7 @@ export const EnvelopeSignerHeader = () => {
    useRequiredEnvelopeSigningContext();

  return (
-    <nav className="bg-background border-border max-w-screen flex flex-row justify-between border-b px-4 py-3 md:px-6">
+    <nav className="embed--DocumentWidgetHeader bg-background border-border max-w-screen flex flex-row justify-between border-b px-4 py-3 md:px-6">
      {/* Left side - Logo and title */}
      <div className="flex min-w-0 flex-1 items-center space-x-2 md:w-auto md:flex-none">
        <Link to="/" className="flex-shrink-0">
@ -72,7 +73,7 @@ export const EnvelopeSignerHeader = () => {
      </div>

      {/* Right side - Desktop content */}
-      <div className="hidden items-center space-x-2 md:flex">
+      <div className="hidden items-center space-x-2 lg:flex">
        <p className="text-muted-foreground mr-2 flex-shrink-0 text-sm">
          <Plural
            one="1 Field Remaining"
@ -85,7 +86,7 @@ export const EnvelopeSignerHeader = () => {
      </div>

      {/* Mobile Actions button */}
-      <div className="flex-shrink-0 md:hidden">
+      <div className="flex-shrink-0 lg:hidden">
        <MobileDropdownMenu />
      </div>
    </nav>
@ -95,6 +96,8 @@ export const EnvelopeSignerHeader = () => {
 const MobileDropdownMenu = () => {
  const { envelope, recipient } = useRequiredEnvelopeSigningContext();

+  const { allowDocumentRejection } = useEmbedSigningContext() || {};
+
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
@ -119,7 +122,7 @@ const MobileDropdownMenu = () => {
          }
        />

-        {envelope.type === EnvelopeType.DOCUMENT && (
+        {envelope.type === EnvelopeType.DOCUMENT && allowDocumentRejection !== false && (
          <DocumentSigningRejectDialog
            documentId={mapSecondaryIdToDocumentId(envelope.secondaryId)}
            token={recipient.token}
--- a/apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx
+++ b/apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx
@ -10,15 +10,20 @@ import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-rende
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import { DIRECT_TEMPLATE_RECIPIENT_EMAIL } from '@documenso/lib/constants/direct-templates';
+import { isBase64Image } from '@documenso/lib/constants/signatures';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { ZFullFieldSchema } from '@documenso/lib/types/field';
 import { createSpinner } from '@documenso/lib/universal/field-renderer/field-generic-items';
 import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
 import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import type { TSignEnvelopeFieldValue } from '@documenso/trpc/server/envelope-router/sign-envelope-field.types';
 import { EnvelopeFieldToolTip } from '@documenso/ui/components/field/envelope-field-tooltip';
 import type { TRecipientColor } from '@documenso/ui/lib/recipient-colors';
+import { useToast } from '@documenso/ui/primitives/use-toast';

+import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
 import { handleCheckboxFieldClick } from '~/utils/field-signing/checkbox-field';
 import { handleDropdownFieldClick } from '~/utils/field-signing/dropdown-field';
 import { handleEmailFieldClick } from '~/utils/field-signing/email-field';
@ -28,20 +33,24 @@ import { handleNumberFieldClick } from '~/utils/field-signing/number-field';
 import { handleSignatureFieldClick } from '~/utils/field-signing/signature-field';
 import { handleTextFieldClick } from '~/utils/field-signing/text-field';

+import { useRequiredDocumentSigningAuthContext } from '../document-signing/document-signing-auth-provider';
 import { useRequiredEnvelopeSigningContext } from '../document-signing/envelope-signing-provider';

 export default function EnvelopeSignerPageRenderer() {
-  const { i18n } = useLingui();
-  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
+  const { t, i18n } = useLingui();
+  const { currentEnvelopeItem, setRenderError } = useCurrentEnvelopeRender();
  const { sessionData } = useOptionalSession();

+  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
+  const { toast } = useToast();
+
  const {
    envelopeData,
    recipient,
    recipientFields,
    recipientFieldsRemaining,
    showPendingFieldTooltip,
-    signField,
+    signField: signFieldInternal,
    email,
    setEmail,
    fullName,
@ -53,6 +62,8 @@ export default function EnvelopeSignerPageRenderer() {
    isDirectTemplate,
  } = useRequiredEnvelopeSigningContext();

+  const { onFieldSigned, onFieldUnsigned } = useEmbedSigningContext() || {};
+
  const {
    stage,
    pageLayer,
@ -80,7 +91,7 @@ export default function EnvelopeSignerPageRenderer() {
    );
  }, [recipientFields, selectedAssistantRecipientFields, pageContext.pageNumber]);

-  const renderFieldOnLayer = (unparsedField: Field & { signature?: Signature | null }) => {
+  const unsafeRenderFieldOnLayer = (unparsedField: Field & { signature?: Signature | null }) => {
    if (!pageLayer.current) {
      console.error('Layer not loaded yet');
      return;
@ -237,7 +248,7 @@ export default function EnvelopeSignerPageRenderer() {
            .then(async (payload) => {
              if (payload) {
                fieldGroup.add(loadingSpinnerGroup);
-                await signField(field.id, payload); // Todo: Envelopes - Handle errors
+                await signField(field.id, payload);
              }

              if (payload?.value) {
@ -318,7 +329,6 @@ export default function EnvelopeSignerPageRenderer() {
         * SIGNATURE FIELD.
         */
        .with({ type: FieldType.SIGNATURE }, (field) => {
-          // Todo: Envelopes - Reauth
          handleSignatureFieldClick({
            field,
            signature,
@ -329,11 +339,21 @@ export default function EnvelopeSignerPageRenderer() {
            .then(async (payload) => {
              if (payload) {
                fieldGroup.add(loadingSpinnerGroup);
-                await signField(field.id, payload);
-              }

-              if (payload?.value) {
-                setSignature(payload.value);
+                if (payload.value) {
+                  void executeActionAuthProcedure({
+                    onReauthFormSubmit: async (authOptions) => {
+                      await signField(field.id, payload, authOptions);
+
+                      loadingSpinnerGroup.destroy();
+                    },
+                    actionTarget: field.type,
+                  });
+
+                  setSignature(payload.value);
+                } else {
+                  await signField(field.id, payload);
+                }
              }
            })
            .finally(() => {
@ -347,13 +367,54 @@ export default function EnvelopeSignerPageRenderer() {
    fieldGroup.on('pointerdown', handleFieldGroupClick);
  };

+  const renderFieldOnLayer = (unparsedField: Field & { signature?: Signature | null }) => {
+    try {
+      unsafeRenderFieldOnLayer(unparsedField);
+    } catch (err) {
+      console.error(err);
+      setRenderError(true);
+    }
+  };
+
+  const signField = async (
+    fieldId: number,
+    payload: TSignEnvelopeFieldValue,
+    authOptions?: TRecipientActionAuth,
+  ) => {
+    try {
+      const { inserted } = await signFieldInternal(fieldId, payload, authOptions);
+
+      // ?: The two callbacks below are used within the embedding context
+      if (inserted && onFieldSigned) {
+        const value = payload.value ? JSON.stringify(payload.value) : undefined;
+        const isBase64 = value ? isBase64Image(value) : undefined;
+
+        onFieldSigned({ fieldId, value, isBase64 });
+      }
+
+      if (!inserted && onFieldUnsigned) {
+        onFieldUnsigned({ fieldId });
+      }
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: t`Error`,
+        description: t`An error occurred while signing the field.`,
+        variant: 'destructive',
+      });
+
+      throw err;
+    }
+  };
+
  /**
   * Initialize the Konva page canvas and all fields and interactions.
   */
  const createPageCanvas = (currentStage: Konva.Stage, currentPageLayer: Konva.Layer) => {
    // Render the fields.
    for (const field of localPageFields) {
-      renderFieldOnLayer(field); // Todo: Envelopes - [CRITICAL] Handle errors which prevent rendering
+      renderFieldOnLayer(field);
    }

    currentPageLayer.batchDraw();
@ -368,8 +429,7 @@ export default function EnvelopeSignerPageRenderer() {
    }

    localPageFields.forEach((field) => {
-      console.log('Field changed/inserted, rendering on canvas');
-      renderFieldOnLayer(field); // Todo: Envelopes - [CRITICAL] Handle errors which prevent rendering
+      renderFieldOnLayer(field);
    });

    pageLayer.current.batchDraw();
@ -387,7 +447,7 @@ export default function EnvelopeSignerPageRenderer() {
    pageLayer.current.destroyChildren();

    localPageFields.forEach((field) => {
-      renderFieldOnLayer(field); // Todo: Envelopes - [CRITICAL] Handle errors which prevent rendering
+      renderFieldOnLayer(field);
    });

    pageLayer.current.batchDraw();
--- a/apps/remix/app/components/general/envelope-signing/envelope-signing-complete-dialog.tsx
+++ b/apps/remix/app/components/general/envelope-signing/envelope-signing-complete-dialog.tsx
@ -2,16 +2,19 @@ import { useMemo } from 'react';

 import { useLingui } from '@lingui/react/macro';
 import { FieldType } from '@prisma/client';
-import { useNavigate, useSearchParams } from 'react-router';
+import { useNavigate, useRevalidator, useSearchParams } from 'react-router';

 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { isBase64Image } from '@documenso/lib/constants/signatures';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientAccessAuth } from '@documenso/lib/types/document-auth';
 import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
 import { trpc } from '@documenso/trpc/react';
 import { useToast } from '@documenso/ui/primitives/use-toast';

+import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
+
 import { DocumentSigningCompleteDialog } from '../document-signing/document-signing-complete-dialog';
 import { useRequiredEnvelopeSigningContext } from '../document-signing/envelope-signing-provider';

@ -19,8 +22,9 @@ export const EnvelopeSignerCompleteDialog = () => {
  const navigate = useNavigate();
  const analytics = useAnalytics();

-  const { toast } = useToast();
  const { t } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();

  const [searchParams] = useSearchParams();

@ -37,6 +41,8 @@ export const EnvelopeSignerCompleteDialog = () => {

  const { currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();

+  const { onDocumentCompleted, onDocumentError } = useEmbedSigningContext() || {};
+
  const { mutateAsync: completeDocument, isPending } =
    trpc.recipient.completeDocumentWithToken.useMutation();

@ -68,25 +74,54 @@ export const EnvelopeSignerCompleteDialog = () => {
    nextSigner?: { name: string; email: string },
    accessAuthOptions?: TRecipientAccessAuth,
  ) => {
-    const payload = {
-      token: recipient.token,
-      documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
-      authOptions: accessAuthOptions,
-      ...(nextSigner?.email && nextSigner?.name ? { nextSigner } : {}),
-    };
+    try {
+      const payload = {
+        token: recipient.token,
+        documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
+        authOptions: accessAuthOptions,
+        ...(nextSigner?.email && nextSigner?.name ? { nextSigner } : {}),
+      };

-    await completeDocument(payload);
+      await completeDocument(payload);

-    analytics.capture('App: Recipient has completed signing', {
-      signerId: recipient.id,
-      documentId: envelope.id,
-      timestamp: new Date().toISOString(),
-    });
+      analytics.capture('App: Recipient has completed signing', {
+        signerId: recipient.id,
+        documentId: envelope.id,
+        timestamp: new Date().toISOString(),
+      });

-    if (envelope.documentMeta.redirectUrl) {
-      window.location.href = envelope.documentMeta.redirectUrl;
-    } else {
-      await navigate(`/sign/${recipient.token}/complete`);
+      if (onDocumentCompleted) {
+        onDocumentCompleted({
+          token: recipient.token,
+          documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
+          recipientId: recipient.id,
+          envelopeId: envelope.id,
+        });
+
+        await revalidate();
+
+        return;
+      }
+
+      if (envelope.documentMeta.redirectUrl) {
+        window.location.href = envelope.documentMeta.redirectUrl;
+      } else {
+        await navigate(`/sign/${recipient.token}/complete`);
+      }
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code !== AppErrorCode.TWO_FACTOR_AUTH_FAILED) {
+        toast({
+          title: t`Something went wrong`,
+          description: t`We were unable to submit this document at this time. Please try again later.`,
+          variant: 'destructive',
+        });
+
+        onDocumentError?.();
+      }
+
+      throw err;
    }
  };

@ -105,8 +140,12 @@ export const EnvelopeSignerCompleteDialog = () => {
        directTemplateExternalId = decodeURIComponent(directTemplateExternalId);
      }

+      if (!recipient.directToken) {
+        throw new Error('Recipient direct token is required');
+      }
+
      const { token } = await createDocumentFromDirectTemplate({
-        directTemplateToken: recipient.token, // The direct template token is inserted into the recipient token for ease of use.
+        directTemplateToken: recipient.directToken, // The direct template token is inserted into the recipient token for ease of use.
        directTemplateExternalId,
        directRecipientName: recipientDetails?.name || fullName,
        directRecipientEmail: recipientDetails?.email || email,
@ -132,18 +171,31 @@ export const EnvelopeSignerCompleteDialog = () => {

      const redirectUrl = envelope.documentMeta.redirectUrl;

+      if (onDocumentCompleted) {
+        await navigate({
+          pathname: `/embed/sign/${token}`,
+          search: window.location.search,
+          hash: window.location.hash,
+        });
+
+        return;
+      }
+
      if (redirectUrl) {
        window.location.href = redirectUrl;
      } else {
        await navigate(`/sign/${token}/complete`);
      }
    } catch (err) {
+      console.log('err', err);
      toast({
        title: t`Something went wrong`,
        description: t`We were unable to submit this document at this time. Please try again later.`,
        variant: 'destructive',
      });

+      onDocumentError?.();
+
      throw err;
    }
  };
--- a/apps/remix/app/components/general/share-document-download-button.tsx
+++ b/apps/remix/app/components/general/share-document-download-button.tsx
@ -1,49 +0,0 @@
-import { useState } from 'react';
-
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { Download } from 'lucide-react';
-
-import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
-import type { DocumentData } from '@documenso/prisma/client';
-import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type ShareDocumentDownloadButtonProps = {
-  title: string;
-  documentData: DocumentData;
-};
-
-export const ShareDocumentDownloadButton = ({
-  title,
-  documentData,
-}: ShareDocumentDownloadButtonProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const [isDownloading, setIsDownloading] = useState(false);
-
-  const onDownloadClick = async () => {
-    try {
-      setIsDownloading(true);
-
-      await downloadPDF({ documentData, fileName: title });
-    } catch (err) {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`An error occurred while downloading your document.`),
-        variant: 'destructive',
-      });
-    } finally {
-      setIsDownloading(false);
-    }
-  };
-
-  return (
-    <Button loading={isDownloading} onClick={onDownloadClick}>
-      {!isDownloading && <Download className="mr-2 h-4 w-4" />}
-      <Trans>Download</Trans>
-    </Button>
-  );
-};
--- a/apps/remix/app/components/general/template/template-drop-zone-wrapper.tsx
+++ b/apps/remix/app/components/general/template/template-drop-zone-wrapper.tsx
@ -10,9 +10,9 @@ import { match } from 'ts-pattern';

 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
-import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
+import type { TCreateTemplatePayloadSchema } from '@documenso/trpc/server/template-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';

@ -40,13 +40,17 @@ export const TemplateDropZoneWrapper = ({ children, className }: TemplateDropZon
    try {
      setIsLoading(true);

-      const documentData = await putPdfFile(file);
-
-      const { legacyTemplateId: id } = await createTemplate({
+      const payload = {
        title: file.name,
-        templateDocumentDataId: documentData.id,
        folderId: folderId ?? undefined,
-      });
+      } satisfies TCreateTemplatePayloadSchema;
+
+      const formData = new FormData();
+
+      formData.append('payload', JSON.stringify(payload));
+      formData.append('file', file);
+
+      const { envelopeId: id } = await createTemplate(formData);

      toast({
        title: _(msg`Template uploaded`),
--- a/apps/remix/app/components/general/template/template-edit-form.tsx
+++ b/apps/remix/app/components/general/template/template-edit-form.tsx
@ -313,8 +313,10 @@ export const TemplateEditForm = ({
      >
        <CardContent className="p-2">
          <PDFViewer
-            key={templateDocumentData.id}
-            documentData={templateDocumentData}
+            key={template.envelopeItems[0].id}
+            envelopeItem={template.envelopeItems[0]}
+            token={undefined}
+            version="signed"
            onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
          />
        </CardContent>
--- a/apps/remix/app/components/tables/documents-table-action-button.tsx
+++ b/apps/remix/app/components/tables/documents-table-action-button.tsx
@ -1,19 +1,14 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
 import { CheckCircle, Download, Edit, EyeIcon, Pencil } from 'lucide-react';
 import { Link } from 'react-router';
 import { match } from 'ts-pattern';

-import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import type { TDocumentMany as TDocumentRow } from '@documenso/lib/types/document';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { trpc as trpcClient } from '@documenso/trpc/client';
 import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';

 import { useCurrentTeam } from '~/providers/team';

@ -25,8 +20,6 @@ export type DocumentsTableActionButtonProps = {

 export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonProps) => {
  const { user } = useSession();
-  const { toast } = useToast();
-  const { _ } = useLingui();

  const team = useCurrentTeam();

@ -44,39 +37,6 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
  const documentsPath = formatDocumentsPath(team.url);
  const formatPath = `${documentsPath}/${row.envelopeId}/edit`;

-  const onDownloadClick = async () => {
-    try {
-      const document = !recipient
-        ? await trpcClient.document.get.query(
-            {
-              documentId: row.id,
-            },
-            {
-              context: {
-                teamId: team?.id?.toString(),
-              },
-            },
-          )
-        : await trpcClient.document.getDocumentByToken.query({
-            token: recipient.token,
-          });
-
-      const documentData = document?.documentData;
-
-      if (!documentData) {
-        throw Error('No document available');
-      }
-
-      await downloadPDF({ documentData, fileName: row.title });
-    } catch (err) {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`An error occurred while downloading your document.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
  // TODO: Consider if want to keep this logic for hiding viewing for CC'ers
  if (recipient?.role === RecipientRole.CC && isComplete === false) {
    return null;
@ -134,7 +94,7 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
        <Trans>View</Trans>
      </Button>
    ))
-    .with({ isComplete: true, internalVersion: 2 }, () => (
+    .with({ isComplete: true }, () => (
      <EnvelopeDownloadDialog
        envelopeId={row.envelopeId}
        envelopeStatus={row.status}
@ -147,11 +107,5 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
        }
      />
    ))
-    .with({ isComplete: true }, () => (
-      <Button className="w-32" onClick={onDownloadClick}>
-        <Download className="-ml-1 mr-2 inline h-4 w-4" />
-        <Trans>Download</Trans>
-      </Button>
-    ))
    .otherwise(() => <div></div>);
 };
--- a/apps/remix/app/components/tables/documents-table-action-dropdown.tsx
+++ b/apps/remix/app/components/tables/documents-table-action-dropdown.tsx
@ -10,7 +10,6 @@ import {
  Download,
  Edit,
  EyeIcon,
-  FileDown,
  FolderInput,
  Loader,
  MoreHorizontal,
@ -20,12 +19,10 @@ import {
 } from 'lucide-react';
 import { Link } from 'react-router';

-import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import type { TDocumentMany as TDocumentRow } from '@documenso/lib/types/document';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import {
  DropdownMenu,
@ -34,7 +31,6 @@ import {
  DropdownMenuLabel,
  DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
-import { useToast } from '@documenso/ui/primitives/use-toast';

 import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialog';
 import { DocumentDuplicateDialog } from '~/components/dialogs/document-duplicate-dialog';
@ -56,7 +52,6 @@ export const DocumentsTableActionDropdown = ({
  const { user } = useSession();
  const team = useCurrentTeam();

-  const { toast } = useToast();
  const { _ } = useLingui();

  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
@ -76,58 +71,6 @@ export const DocumentsTableActionDropdown = ({
  const documentsPath = formatDocumentsPath(team.url);
  const formatPath = `${documentsPath}/${row.envelopeId}/edit`;

-  const onDownloadClick = async () => {
-    try {
-      const document = !recipient
-        ? await trpcClient.document.get.query({
-            documentId: row.id,
-          })
-        : await trpcClient.document.getDocumentByToken.query({
-            token: recipient.token,
-          });
-
-      const documentData = document?.documentData;
-
-      if (!documentData) {
-        return;
-      }
-
-      await downloadPDF({ documentData, fileName: row.title });
-    } catch (err) {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`An error occurred while downloading your document.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const onDownloadOriginalClick = async () => {
-    try {
-      const document = !recipient
-        ? await trpcClient.document.get.query({
-            documentId: row.id,
-          })
-        : await trpcClient.document.getDocumentByToken.query({
-            token: recipient.token,
-          });
-
-      const documentData = document?.documentData;
-
-      if (!documentData) {
-        return;
-      }
-
-      await downloadPDF({ documentData, fileName: row.title, version: 'original' });
-    } catch (err) {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`An error occurred while downloading your document.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
  const nonSignedRecipients = row.recipients.filter((item) => item.signingStatus !== 'SIGNED');

  return (
@ -178,33 +121,19 @@ export const DocumentsTableActionDropdown = ({
          </Link>
        </DropdownMenuItem>

-        {row.internalVersion === 2 ? (
-          <EnvelopeDownloadDialog
-            envelopeId={row.envelopeId}
-            envelopeStatus={row.status}
-            token={recipient?.token}
-            trigger={
-              <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
-                <div>
-                  <Download className="mr-2 h-4 w-4" />
-                  <Trans>Download</Trans>
-                </div>
-              </DropdownMenuItem>
-            }
-          />
-        ) : (
-          <>
-            <DropdownMenuItem disabled={!isComplete} onClick={onDownloadClick}>
-              <Download className="mr-2 h-4 w-4" />
-              <Trans>Download</Trans>
+        <EnvelopeDownloadDialog
+          envelopeId={row.envelopeId}
+          envelopeStatus={row.status}
+          token={recipient?.token}
+          trigger={
+            <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+              <div>
+                <Download className="mr-2 h-4 w-4" />
+                <Trans>Download</Trans>
+              </div>
            </DropdownMenuItem>
-
-            <DropdownMenuItem onClick={onDownloadOriginalClick}>
-              <FileDown className="mr-2 h-4 w-4" />
-              <Trans>Download Original</Trans>
-            </DropdownMenuItem>
-          </>
-        )}
+          }
+        />

        <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
          <Copy className="mr-2 h-4 w-4" />
@ -273,7 +202,8 @@ export const DocumentsTableActionDropdown = ({
      />

      <DocumentDuplicateDialog
-        id={row.id}
+        id={row.envelopeId}
+        token={recipient?.token}
        open={isDuplicateDialogOpen}
        onOpenChange={setDuplicateDialogOpen}
      />
--- a/apps/remix/app/components/tables/inbox-table.tsx
+++ b/apps/remix/app/components/tables/inbox-table.tsx
@ -10,11 +10,9 @@ import { DateTime } from 'luxon';
 import { Link, useSearchParams } from 'react-router';
 import { match } from 'ts-pattern';

-import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
-import { trpc as trpcClient } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import type { TFindInboxResponse } from '@documenso/trpc/server/document-router/find-inbox.types';
 import { Button } from '@documenso/ui/primitives/button';
@ -28,6 +26,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { DocumentStatus } from '~/components/general/document/document-status';
 import { useOptionalCurrentTeam } from '~/providers/team';

+import { EnvelopeDownloadDialog } from '../dialogs/envelope-download-dialog';
 import { StackAvatarsWithTooltip } from '../general/stack-avatars-with-tooltip';

 export type DocumentsTableProps = {
@ -199,28 +198,6 @@ export const InboxTableActionButton = ({ row }: InboxTableActionButtonProps) =>
    return null;
  }

-  const onDownloadClick = async () => {
-    try {
-      const document = await trpcClient.document.getDocumentByToken.query({
-        token: recipient.token,
-      });
-
-      const documentData = document?.documentData;
-
-      if (!documentData) {
-        throw Error('No document available');
-      }
-
-      await downloadPDF({ documentData, fileName: row.title });
-    } catch (err) {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`An error occurred while downloading your document.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
  // TODO: Consider if want to keep this logic for hiding viewing for CC'ers
  if (recipient?.role === RecipientRole.CC && isComplete === false) {
    return null;
@ -230,6 +207,7 @@ export const InboxTableActionButton = ({ row }: InboxTableActionButtonProps) =>
    isPending,
    isComplete,
    isSigned,
+    internalVersion: row.internalVersion,
  })
    .with({ isPending: true, isSigned: false }, () => (
      <Button className="w-32" asChild>
@ -263,10 +241,17 @@ export const InboxTableActionButton = ({ row }: InboxTableActionButtonProps) =>
      </Button>
    ))
    .with({ isComplete: true }, () => (
-      <Button className="w-32" onClick={onDownloadClick}>
-        <DownloadIcon className="-ml-1 mr-2 inline h-4 w-4" />
-        <Trans>Download</Trans>
-      </Button>
+      <EnvelopeDownloadDialog
+        envelopeId={row.envelopeId}
+        envelopeStatus={row.status}
+        token={recipient?.token}
+        trigger={
+          <Button className="w-32">
+            <DownloadIcon className="-ml-1 mr-2 inline h-4 w-4" />
+            <Trans>Download</Trans>
+          </Button>
+        }
+      />
    ))
    .otherwise(() => <div></div>);
 };