chore: update the tests

fix: invalidate sessions on password reset and update
2025-11-13 00:03:33 +10:00 · 2025-10-15 20:44:08 +00:00 · 2025-10-15 16:39:24 +00:00
267 changed files with 4441 additions and 12521 deletions
--- a/.env.example
+++ b/.env.example
@ -13,10 +13,6 @@ NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY="DEADBEEF"
 # https://docs.documenso.com/developers/self-hosting/setting-up-oauth-providers#google-oauth-gmail
 NEXT_PRIVATE_GOOGLE_CLIENT_ID=""
 NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=""
 # Find documentation on setting up Microsoft OAuth here:
 # https://docs.documenso.com/developers/self-hosting/setting-up-oauth-providers#microsoft-oauth-azure-ad
 NEXT_PRIVATE_MICROSOFT_CLIENT_ID=""
 NEXT_PRIVATE_MICROSOFT_CLIENT_SECRET=""
 NEXT_PRIVATE_OIDC_WELL_KNOWN=""
 NEXT_PRIVATE_OIDC_CLIENT_ID=""
@ -29,10 +25,6 @@ NEXT_PUBLIC_WEBAPP_URL="http://localhost:3000"
 # URL used by the web app to request itself (e.g. local background jobs)
 NEXT_PRIVATE_INTERNAL_WEBAPP_URL="http://localhost:3000"
 # [[SERVER]]
 # OPTIONAL: The port the server will listen on. Defaults to 3000.
 PORT=3000
 # [[DATABASE]]
 NEXT_PRIVATE_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"
 # Defines the URL to use for the database when running migrations and other commands that won't work with a connection pool.
--- a/CODE_STYLE.md
+++ b/CODE_STYLE.md
@ -1,692 +0,0 @@
 # Documenso Code Style Guide
 This document captures the code style, patterns, and conventions used in the Documenso codebase. It covers both enforceable rules and subjective "taste" elements that make our code consistent and maintainable.
 ## Table of Contents
 1. [General Principles](#general-principles)
 2. [TypeScript Conventions](#typescript-conventions)
 3. [Imports & Dependencies](#imports--dependencies)
 4. [Functions & Methods](#functions--methods)
 5. [React & Components](#react--components)
 6. [Error Handling](#error-handling)
 7. [Async/Await Patterns](#asyncawait-patterns)
 8. [Whitespace & Formatting](#whitespace--formatting)
 9. [Naming Conventions](#naming-conventions)
 10. [Pattern Matching](#pattern-matching)
 11. [Database & Prisma](#database--prisma)
 12. [TRPC Patterns](#trpc-patterns)
 ---
 ## General Principles
 - **Functional over Object-Oriented**: Prefer functional programming patterns over classes
 - **Explicit over Implicit**: Be explicit about types, return values, and error cases
 - **Early Returns**: Use guard clauses and early returns to reduce nesting
 - **Immutability**: Favor `const` over `let`; avoid mutation where possible
 ---
 ## TypeScript Conventions
 ### Type Definitions
 ```typescript
 // ✅ Prefer `type` over `interface`
 type CreateDocumentOptions = {
  templateId: number;
  userId: number;
  recipients: Recipient[];
 };
 // ❌ Avoid interfaces unless absolutely necessary
 interface CreateDocumentOptions {
  templateId: number;
 }
 ```
 ### Type Imports
 ```typescript
 // ✅ Use `type` keyword for type-only imports
 import type { Document, Recipient } from '@prisma/client';
 import { DocumentStatus } from '@prisma/client';
 // Types in function signatures
 export const findDocuments = async ({ userId, teamId }: FindDocumentsOptions) => {
  // ...
 };
 ```
 ### Inline Types for Function Parameters
 ```typescript
 // ✅ Extract inline types to named types
 type FinalRecipient = Pick<Recipient, 'name' | 'email' | 'role' | 'authOptions'> & {
  templateRecipientId: number;
  fields: Field[];
 };
 const finalRecipients: FinalRecipient[] = [];
 ```
 ---
 ## Imports & Dependencies
 ### Import Organization
 Imports should be organized in the following order with blank lines between groups:
 ```typescript
 // 1. React imports
 import { useCallback, useEffect, useMemo } from 'react';
 // 2. Third-party library imports (alphabetically)
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans } from '@lingui/react/macro';
 import type { Document, Recipient } from '@prisma/client';
 import { DocumentStatus, RecipientRole } from '@prisma/client';
 import { match } from 'ts-pattern';
 // 3. Internal package imports (from @documenso/*)
 import { AppError } from '@documenso/lib/errors/app-error';
 import { prisma } from '@documenso/prisma';
 import { Button } from '@documenso/ui/primitives/button';
 // 4. Relative imports
 import { getTeamById } from '../team/get-team';
 import type { FindResultResponse } from './types';
 ```
 ### Destructuring Imports
 ```typescript
 // ✅ Destructure specific exports
 // ✅ Use type imports for types
 import type { Document } from '@prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
 import { Input } from '@documenso/ui/primitives/input';
 ```
 ---
 ## Functions & Methods
 ### Arrow Functions
 ```typescript
 // ✅ Always use arrow functions for functions
 export const createDocument = async ({
  userId,
  title,
 }: CreateDocumentOptions) => {
  // ...
 };
 // ✅ Callbacks and handlers
 const onSubmit = useCallback(async () => {
  // ...
 }, [dependencies]);
 // ❌ Avoid regular function declarations
 function createDocument() {
  // ...
 }
 ```
 ### Function Parameters
 ```typescript
 // ✅ Use destructured object parameters for multiple params
 export const findDocuments = async ({
  userId,
  teamId,
  status = ExtendedDocumentStatus.ALL,
  page = 1,
  perPage = 10,
 }: FindDocumentsOptions) => {
  // ...
 };
 // ✅ Destructure on separate line when needed
 const onFormSubmit = form.handleSubmit(onSubmit);
 // ✅ Deconstruct nested properties explicitly
 const { user } = ctx;
 const { templateId } = input;
 ```
 ---
 ## React & Components
 ### Component Definition
 ```typescript
 // ✅ Use const with arrow function
 export const AddSignersFormPartial = ({
  documentFlow,
  recipients,
  fields,
  onSubmit,
 }: AddSignersFormProps) => {
  // ...
 };
 // ❌ Never use classes
 class MyComponent extends React.Component {
  // ...
 }
 ```
 ### Hooks
 ```typescript
 // ✅ Group related hooks together with blank line separation
 const { _ } = useLingui();
 const { toast } = useToast();
 const { currentStep, totalSteps, previousStep } = useStep();
 const form = useForm<TFormSchema>({
  resolver: zodResolver(ZFormSchema),
  defaultValues: {
    // ...
  },
 });
 ```
 ### Event Handlers
 ```typescript
 // ✅ Use arrow functions with descriptive names
 const onFormSubmit = async () => {
  await form.trigger();
  // ...
 };
 const onFieldCopy = useCallback(
  (event?: KeyboardEvent | null) => {
    event?.preventDefault();
    // ...
  },
  [dependencies],
 );
 // ✅ Inline handlers for simple operations
 <Button onClick={() => setOpen(false)}>Close</Button>
 ```
 ### State Management
 ```typescript
 // ✅ Descriptive state names with auxiliary verbs
 const [isLoading, setIsLoading] = useState(false);
 const [hasError, setHasError] = useState(false);
 const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
 // ✅ Complex state in single useState when related
 const [coords, setCoords] = useState({
  x: 0,
  y: 0,
 });
 ```
 ---
 ## Error Handling
 ### Try-Catch Blocks
 ```typescript
 // ✅ Use try-catch for operations that might fail
 try {
  const document = await getDocumentById({
    documentId: Number(documentId),
    userId: user.id,
  });
  return {
    status: 200,
    body: document,
  };
 } catch (err) {
  return {
    status: 404,
    body: {
      message: 'Document not found',
    },
  };
 }
 ```
 ### Throwing Errors
 ```typescript
 // ✅ Use AppError for application errors
 throw new AppError(AppErrorCode.NOT_FOUND, {
  message: 'Template not found',
 });
 // ✅ Use descriptive error messages
 if (!template) {
  throw new AppError(AppErrorCode.NOT_FOUND, {
    message: `Template with ID ${templateId} not found`,
  });
 }
 ```
 ### Error Parsing on Frontend
 ```typescript
 // ✅ Parse errors on the frontend
 try {
  await updateOrganisation({ organisationId, data });
 } catch (err) {
  const error = AppError.parseError(err);
  console.error(error);
  toast({
    title: t`An error occurred`,
    description: error.message,
    variant: 'destructive',
  });
 }
 ```
 ---
 ## Async/Await Patterns
 ### Async Function Definitions
 ```typescript
 // ✅ Mark async functions clearly
 export const createDocument = async ({
  userId,
  title,
 }: Options): Promise<Document> => {
  // ...
 };
 // ✅ Use await for promises
 const document = await prisma.document.create({ data });
 // ✅ Use Promise.all for parallel operations
 const [document, recipients] = await Promise.all([
  getDocumentById({ documentId }),
  getRecipientsForDocument({ documentId }),
 ]);
 ```
 ### Void for Fire-and-Forget
 ```typescript
 // ✅ Use void for intentionally unwaited promises
 void handleAutoSave();
 // ✅ Or in event handlers
 onClick={() => void onFormSubmit()}
 ```
 ---
 ## Whitespace & Formatting
 ### Blank Lines Between Concepts
 ```typescript
 // ✅ Blank line after imports
 import { prisma } from '@documenso/prisma';
 export const findDocuments = async () => {
  // ...
 };
 // ✅ Blank line between logical sections
 const user = await prisma.user.findFirst({ where: { id: userId } });
 let team = null;
 if (teamId !== undefined) {
  team = await getTeamById({ userId, teamId });
 }
 // ✅ Blank line before return statements
 const result = await someOperation();
 return result;
 ```
 ### Function/Method Spacing
 ```typescript
 // ✅ No blank lines between chained methods in same operation
 const documents = await prisma.document
  .findMany({ where: { userId } })
  .then((docs) => docs.map(maskTokens));
 // ✅ Blank line between different operations
 const document = await createDocument({ userId });
 await sendDocument({ documentId: document.id });
 return document;
 ```
 ### Object and Array Formatting
 ```typescript
 // ✅ Multi-line when complex
 const options = {
  userId,
  teamId,
  status: ExtendedDocumentStatus.ALL,
  page: 1,
 };
 // ✅ Single line when simple
 const coords = { x: 0, y: 0 };
 // ✅ Array items on separate lines when objects
 const recipients = [
  {
    name: 'John',
    email: 'john@example.com',
  },
  {
    name: 'Jane',
    email: 'jane@example.com',
  },
 ];
 ```
 ---
 ## Naming Conventions
 ### Variables
 ```typescript
 // ✅ camelCase for variables and functions
 const documentId = 123;
 const onSubmit = () => {};
 // ✅ Descriptive names with auxiliary verbs for booleans
 const isLoading = false;
 const hasError = false;
 const canEdit = true;
 const shouldRender = true;
 // ✅ Prefix with $ for DOM elements
 const $page = document.querySelector('.page');
 const $inputRef = useRef<HTMLInputElement>(null);
 ```
 ### Types and Schemas
 ```typescript
 // ✅ PascalCase for types
 type CreateDocumentOptions = {
  userId: number;
 };
 // ✅ Prefix Zod schemas with Z
 const ZCreateDocumentSchema = z.object({
  title: z.string(),
 });
 // ✅ Prefix type from Zod schema with T
 type TCreateDocumentSchema = z.infer<typeof ZCreateDocumentSchema>;
 ```
 ### Constants
 ```typescript
 // ✅ UPPER_SNAKE_CASE for true constants
 const DEFAULT_DOCUMENT_DATE_FORMAT = 'dd/MM/yyyy';
 const MAX_FILE_SIZE = 1024 * 1024 * 5;
 // ✅ camelCase for const variables that aren't "constants"
 const userId = await getUserId();
 ```
 ### Functions
 ```typescript
 // ✅ Verb-based names for functions
 const createDocument = async () => {};
 const findDocuments = async () => {};
 const updateDocument = async () => {};
 const deleteDocument = async () => {};
 // ✅ On prefix for event handlers
 const onSubmit = () => {};
 const onClick = () => {};
 const onFieldCopy = () => {}; // 'on' is also acceptable
 ```
 ### Clarity Over Brevity
 ```typescript
 // ✅ Prefer descriptive names over abbreviations
 const superLongMethodThatIsCorrect = () => {};
 const recipientAuthenticationOptions = {};
 const documentMetadata = {};
 // ❌ Avoid abbreviations that sacrifice clarity
 const supLongMethThatIsCorrect = () => {};
 const recipAuthOpts = {};
 const docMeta = {};
 // ✅ Common abbreviations that are widely understood are acceptable
 const userId = 123;
 const htmlElement = document.querySelector('div');
 const apiResponse = await fetch('/api');
 ```
 ---
 ## Pattern Matching
 ### Using ts-pattern
 ```typescript
 import { match } from 'ts-pattern';
 // ✅ Use match for complex conditionals
 const result = match(status)
  .with(ExtendedDocumentStatus.DRAFT, () => ({
    status: 'draft',
  }))
  .with(ExtendedDocumentStatus.PENDING, () => ({
    status: 'pending',
  }))
  .with(ExtendedDocumentStatus.COMPLETED, () => ({
    status: 'completed',
  }))
  .exhaustive();
 // ✅ Use .otherwise() for default case when not exhaustive
 const value = match(type)
  .with('text', () => 'Text field')
  .with('number', () => 'Number field')
  .otherwise(() => 'Unknown field');
 ```
 ---
 ## Database & Prisma
 ### Query Structure
 ```typescript
 // ✅ Destructure commonly used fields
 const { id, email, name } = user;
 // ✅ Use select to limit returned fields
 const user = await prisma.user.findFirst({
  where: { id: userId },
  select: {
    id: true,
    email: true,
    name: true,
  },
 });
 // ✅ Use include for relations
 const document = await prisma.document.findFirst({
  where: { id: documentId },
  include: {
    recipients: true,
    fields: true,
  },
 });
 ```
 ### Transactions
 ```typescript
 // ✅ Use transactions for related operations
 return await prisma.$transaction(async (tx) => {
  const document = await tx.document.create({ data });
  await tx.field.createMany({ data: fieldsData });
  await tx.documentAuditLog.create({ data: auditData });
  return document;
 });
 ```
 ### Where Clauses
 ```typescript
 // ✅ Build complex where clauses separately
 const whereClause: Prisma.DocumentWhereInput = {
  AND: [
    { userId: user.id },
    { deletedAt: null },
    { status: { in: [DocumentStatus.DRAFT, DocumentStatus.PENDING] } },
  ],
 };
 const documents = await prisma.document.findMany({
  where: whereClause,
 });
 ```
 ---
 ## TRPC Patterns
 ### Router Structure
 ```typescript
 // ✅ Destructure context and input at start
 .query(async ({ input, ctx }) => {
  const { teamId } = ctx;
  const { templateId } = input;
  ctx.logger.info({
    input: { templateId },
  });
  return await getTemplateById({
    id: templateId,
    userId: ctx.user.id,
    teamId,
  });
 });
 ```
 ### Request/Response Schemas
 ```typescript
 // ✅ Name schemas clearly
 const ZCreateDocumentRequestSchema = z.object({
  title: z.string(),
  recipients: z.array(ZRecipientSchema),
 });
 const ZCreateDocumentResponseSchema = z.object({
  documentId: z.number(),
  status: z.string(),
 });
 ```
 ### Error Handling in TRPC
 ```typescript
 // ✅ Catch and transform errors appropriately
 try {
  const result = await createDocument({ userId, data });
  return result;
 } catch (err) {
  return AppError.toRestAPIError(err);
 }
 // ✅ Or throw AppError directly
 if (!template) {
  throw new AppError(AppErrorCode.NOT_FOUND, {
    message: 'Template not found',
  });
 }
 ```
 ---
 ## Additional Patterns
 ### Optional Chaining
 ```typescript
 // ✅ Use optional chaining for potentially undefined values
 const email = user?.email;
 const recipientToken = recipient?.token ?? '';
 // ✅ Use nullish coalescing for defaults
 const pageSize = perPage ?? 10;
 const status = documentStatus ?? DocumentStatus.DRAFT;
 ```
 ### Array Operations
 ```typescript
 // ✅ Use functional array methods
 const activeRecipients = recipients.filter((r) => r.signingStatus === 'SIGNED');
 const recipientEmails = recipients.map((r) => r.email);
 const hasSignedRecipients = recipients.some((r) => r.signingStatus === 'SIGNED');
 // ✅ Use find instead of filter + [0]
 const recipient = recipients.find((r) => r.id === recipientId);
 ```
 ### Conditional Rendering
 ```typescript
 // ✅ Use && for conditional rendering
 {isLoading && <Loader />}
 // ✅ Use ternary for either/or
 {isLoading ? <Loader /> : <Content />}
 // ✅ Extract complex conditions to variables
 const shouldShowAdvanced = isAdmin && hasPermission && !isDisabled;
 {shouldShowAdvanced && <AdvancedSettings />}
 ```
 ---
 ## When in Doubt
 - **Consistency**: Follow the patterns you see in similar files
 - **Readability**: Favor code that's easy to read over clever one-liners
 - **Explicitness**: Be explicit rather than implicit
 - **Whitespace**: Use blank lines to separate logical sections
 - **Early Returns**: Use guard clauses to reduce nesting
 - **Functional**: Prefer functional patterns over imperative ones
--- a/apps/documentation/pages/developers/self-hosting/setting-up-oauth-providers.mdx
+++ b/apps/documentation/pages/developers/self-hosting/setting-up-oauth-providers.mdx
@ -27,33 +27,3 @@ NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=<your-client-secret>
 ```
 Finally verify the signing in with Google works by signing in with your Google account and checking the email address in your profile.
 ## Microsoft OAuth (Azure AD)
 To use Microsoft OAuth, you will need to create an Azure AD application registration in the Microsoft Azure portal. This will allow users to sign in with their Microsoft accounts.
 ### Create and configure a new Azure AD application
 1. Go to the [Azure Portal](https://portal.azure.com/)
 2. Navigate to **Azure Active Directory** (or **Microsoft Entra ID** in newer Azure portals)
 3. In the left sidebar, click **App registrations**
 4. Click **New registration**
 5. Enter a name for your application (e.g., "Documenso")
 6. Under **Supported account types**, select **Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)** to allow any Microsoft account to sign in
 7. Under **Redirect URI**, select **Web** and enter: `https://<documenso-domain>/api/auth/callback/microsoft`
 8. Click **Register**
 ### Configure the application
 1. After registration, you'll be taken to the app's overview page
 2. Copy the **Application (client) ID** - this will be your `NEXT_PRIVATE_MICROSOFT_CLIENT_ID`
 3. In the left sidebar, click **Certificates & secrets**
 4. Under **Client secrets**, click **New client secret**
 5. Add a description and select an expiration period
 6. Click **Add** and copy the **Value** (not the Secret ID) - this will be your `NEXT_PRIVATE_MICROSOFT_CLIENT_SECRET`
 7. In the Documenso environment variables, set the following:
 ```
 NEXT_PRIVATE_MICROSOFT_CLIENT_ID=<your-application-client-id>
 NEXT_PRIVATE_MICROSOFT_CLIENT_SECRET=<your-client-secret-value>
 ```
--- a/apps/documentation/pages/developers/webhooks.mdx
+++ b/apps/documentation/pages/developers/webhooks.mdx
@ -22,15 +22,6 @@ Documenso supports Webhooks and allows you to subscribe to the following events:
 - `document.completed`
 - `document.rejected`
 - `document.cancelled`
 - `document.viewed`
 - `document.recipient.completed`
 - `document.downloaded`
 - `document.reminder.sent`
 - `template.created`
 - `template.updated`
 - `template.deleted`
 - `template.used`
 - `recipient.authentication.failed`
 ## Create a webhook subscription
@ -47,7 +38,7 @@ Clicking on the "**Create Webhook**" button opens a modal to create a new webhoo
 To create a new webhook subscription, you need to provide the following information:
 - Enter the webhook URL that will receive the event payload.
- Select the event(s) you want to subscribe to: `document.created`, `document.sent`, `document.opened`, `document.signed`, `document.completed`, `document.rejected`, `document.cancelled`, `document.viewed`, `document.recipient.completed`, `document.downloaded`, `document.reminder.sent`, `template.created`, `template.updated`, `template.deleted`, `template.used`, `recipient.authentication.failed`.
+- Select the event(s) you want to subscribe to: `document.created`, `document.sent`, `document.opened`, `document.signed`, `document.completed`, `document.rejected`, `document.cancelled`.
 - Optionally, you can provide a secret key that will be used to sign the payload. This key will be included in the `X-Documenso-Secret` header of the request.
 ![A screenshot of the Create Webhook modal that shows the URL input field and the event checkboxes](/webhook-images/webhooks-page-create-webhook-modal.webp)
@ -628,591 +619,6 @@ Example payload for the `document.rejected` event:
 }
 ```
 Example payload for the `document.viewed` event:
 ```json
 {
  "event": "DOCUMENT_VIEWED",
  "payload": {
    "id": 10,
    "externalId": null,
    "userId": 1,
    "authOptions": null,
    "formValues": null,
    "visibility": "EVERYONE",
    "title": "documenso.pdf",
    "status": "PENDING",
    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
    "createdAt": "2024-04-22T11:44:43.341Z",
    "updatedAt": "2024-04-22T11:48:07.569Z",
    "completedAt": null,
    "deletedAt": null,
    "teamId": null,
    "templateId": null,
    "source": "DOCUMENT",
    "documentMeta": {
      "id": "doc_meta_123",
      "subject": "Please sign this document",
      "message": "Hello, please review and sign this document.",
      "timezone": "UTC",
      "password": null,
      "dateFormat": "MM/DD/YYYY",
      "redirectUrl": null,
      "signingOrder": "PARALLEL",
      "typedSignatureEnabled": true,
      "language": "en",
      "distributionMethod": "EMAIL",
      "emailSettings": null
    },
    "Recipient": [
      {
        "id": 52,
        "documentId": 10,
        "templateId": null,
        "email": "signer@documenso.com",
        "name": "John Doe",
        "token": "vbT8hi3jKQmrFP_LN1WcS",
        "documentDeletedAt": null,
        "expired": null,
        "signedAt": null,
        "authOptions": null,
        "signingOrder": 1,
        "rejectionReason": null,
        "role": "SIGNER",
        "readStatus": "OPENED",
        "signingStatus": "NOT_SIGNED",
        "sendStatus": "SENT"
      }
    ]
  },
  "createdAt": "2024-04-22T11:50:26.174Z",
  "webhookEndpoint": "https://mywebhooksite.com/mywebhook"
 }
 ```
 Example payload for the `document.recipient.completed` event:
 ```json
 {
  "event": "DOCUMENT_RECIPIENT_COMPLETED",
  "payload": {
    "id": 10,
    "externalId": null,
    "userId": 1,
    "authOptions": null,
    "formValues": null,
    "visibility": "EVERYONE",
    "title": "documenso.pdf",
    "status": "PENDING",
    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
    "createdAt": "2024-04-22T11:44:43.341Z",
    "updatedAt": "2024-04-22T11:51:10.055Z",
    "completedAt": null,
    "deletedAt": null,
    "teamId": null,
    "templateId": null,
    "source": "DOCUMENT",
    "documentMeta": {
      "id": "doc_meta_123",
      "subject": "Please sign this document",
      "message": "Hello, please review and sign this document.",
      "timezone": "UTC",
      "password": null,
      "dateFormat": "MM/DD/YYYY",
      "redirectUrl": null,
      "signingOrder": "PARALLEL",
      "typedSignatureEnabled": true,
      "language": "en",
      "distributionMethod": "EMAIL",
      "emailSettings": null
    },
    "Recipient": [
      {
        "id": 50,
        "documentId": 10,
        "templateId": null,
        "email": "signer1@documenso.com",
        "name": "Signer 1",
        "token": "vbT8hi3jKQmrFP_LN1WcS",
        "documentDeletedAt": null,
        "expired": null,
        "signedAt": "2024-04-22T11:51:10.055Z",
        "authOptions": {
          "accessAuth": null,
          "actionAuth": null
        },
        "signingOrder": 1,
        "rejectionReason": null,
        "role": "SIGNER",
        "readStatus": "OPENED",
        "signingStatus": "SIGNED",
        "sendStatus": "SENT"
      },
      {
        "id": 51,
        "documentId": 10,
        "templateId": null,
        "email": "signer2@documenso.com",
        "name": "Signer 2",
        "token": "HkrptwS42ZBXdRKj1TyUo",
        "documentDeletedAt": null,
        "expired": null,
        "signedAt": null,
        "authOptions": null,
        "signingOrder": 2,
        "rejectionReason": null,
        "role": "SIGNER",
        "readStatus": "NOT_OPENED",
        "signingStatus": "NOT_SIGNED",
        "sendStatus": "SENT"
      }
    ]
  },
  "createdAt": "2024-04-22T11:51:10.577Z",
  "webhookEndpoint": "https://mywebhooksite.com/mywebhook"
 }
 ```
 Example payload for the `document.downloaded` event:
 ```json
 {
  "event": "DOCUMENT_DOWNLOADED",
  "payload": {
    "id": 10,
    "externalId": null,
    "userId": 1,
    "authOptions": null,
    "formValues": null,
    "visibility": "EVERYONE",
    "title": "documenso.pdf",
    "status": "COMPLETED",
    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
    "createdAt": "2024-04-22T11:44:43.341Z",
    "updatedAt": "2024-04-22T11:52:05.708Z",
    "completedAt": "2024-04-22T11:52:05.707Z",
    "deletedAt": null,
    "teamId": null,
    "templateId": null,
    "source": "DOCUMENT",
    "documentMeta": {
      "id": "doc_meta_123",
      "subject": "Please sign this document",
      "message": "Hello, please review and sign this document.",
      "timezone": "UTC",
      "password": null,
      "dateFormat": "MM/DD/YYYY",
      "redirectUrl": null,
      "signingOrder": "PARALLEL",
      "typedSignatureEnabled": true,
      "language": "en",
      "distributionMethod": "EMAIL",
      "emailSettings": null
    },
    "Recipient": [
      {
        "id": 51,
        "documentId": 10,
        "templateId": null,
        "email": "signer@documenso.com",
        "name": "Signer",
        "token": "HkrptwS42ZBXdRKj1TyUo",
        "documentDeletedAt": null,
        "expired": null,
        "signedAt": "2024-04-22T11:52:05.688Z",
        "authOptions": {
          "accessAuth": null,
          "actionAuth": null
        },
        "signingOrder": 1,
        "rejectionReason": null,
        "role": "SIGNER",
        "readStatus": "OPENED",
        "signingStatus": "SIGNED",
        "sendStatus": "SENT"
      }
    ]
  },
  "createdAt": "2024-04-22T11:53:18.577Z",
  "webhookEndpoint": "https://mywebhooksite.com/mywebhook"
 }
 ```
 Example payload for the `document.reminder.sent` event:
 ```json
 {
  "event": "DOCUMENT_REMINDER_SENT",
  "payload": {
    "id": 10,
    "externalId": null,
    "userId": 1,
    "authOptions": null,
    "formValues": null,
    "visibility": "EVERYONE",
    "title": "documenso.pdf",
    "status": "PENDING",
    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
    "createdAt": "2024-04-22T11:44:43.341Z",
    "updatedAt": "2024-04-22T11:48:07.569Z",
    "completedAt": null,
    "deletedAt": null,
    "teamId": null,
    "templateId": null,
    "source": "DOCUMENT",
    "documentMeta": {
      "id": "doc_meta_123",
      "subject": "Please sign this document",
      "message": "Hello, please review and sign this document.",
      "timezone": "UTC",
      "password": null,
      "dateFormat": "MM/DD/YYYY",
      "redirectUrl": null,
      "signingOrder": "PARALLEL",
      "typedSignatureEnabled": true,
      "language": "en",
      "distributionMethod": "EMAIL",
      "emailSettings": null
    },
    "Recipient": [
      {
        "id": 52,
        "documentId": 10,
        "templateId": null,
        "email": "signer@documenso.com",
        "name": "Signer",
        "token": "vbT8hi3jKQmrFP_LN1WcS",
        "documentDeletedAt": null,
        "expired": null,
        "signedAt": null,
        "authOptions": null,
        "signingOrder": 1,
        "rejectionReason": null,
        "role": "SIGNER",
        "readStatus": "OPENED",
        "signingStatus": "NOT_SIGNED",
        "sendStatus": "SENT"
      }
    ]
  },
  "createdAt": "2024-04-22T12:00:00.000Z",
  "webhookEndpoint": "https://mywebhooksite.com/mywebhook"
 }
 ```
 Example payload for the `template.created` event:
 ```json
 {
  "event": "TEMPLATE_CREATED",
  "payload": {
    "id": 5,
    "externalId": null,
    "userId": 1,
    "authOptions": null,
    "formValues": null,
    "visibility": "EVERYONE",
    "title": "employment_contract.pdf",
    "status": "DRAFT",
    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
    "createdAt": "2024-04-22T11:44:43.341Z",
    "updatedAt": "2024-04-22T11:44:43.341Z",
    "completedAt": null,
    "deletedAt": null,
    "teamId": 2,
    "templateId": 5,
    "source": "TEMPLATE",
    "documentMeta": {
      "id": "doc_meta_456",
      "subject": "Employment Contract",
      "message": "Please review and sign your employment contract.",
      "timezone": "UTC",
      "password": null,
      "dateFormat": "MM/DD/YYYY",
      "redirectUrl": null,
      "signingOrder": "PARALLEL",
      "typedSignatureEnabled": true,
      "language": "en",
      "distributionMethod": "EMAIL",
      "emailSettings": null
    },
    "Recipient": [
      {
        "id": 25,
        "documentId": null,
        "templateId": 5,
        "email": "employee@company.com",
        "name": "Employee",
        "token": "TemplateToken123",
        "documentDeletedAt": null,
        "expired": null,
        "signedAt": null,
        "authOptions": null,
        "signingOrder": 1,
        "rejectionReason": null,
        "role": "SIGNER",
        "readStatus": "NOT_OPENED",
        "signingStatus": "NOT_SIGNED",
        "sendStatus": "NOT_SENT"
      }
    ]
  },
  "createdAt": "2024-04-22T11:44:44.779Z",
  "webhookEndpoint": "https://mywebhooksite.com/mywebhook"
 }
 ```
 Example payload for the `template.updated` event:
 ```json
 {
  "event": "TEMPLATE_UPDATED",
  "payload": {
    "id": 5,
    "externalId": null,
    "userId": 1,
    "authOptions": null,
    "formValues": null,
    "visibility": "EVERYONE",
    "title": "employment_contract_v2.pdf",
    "status": "DRAFT",
    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
    "createdAt": "2024-04-22T11:44:43.341Z",
    "updatedAt": "2024-04-22T12:30:00.000Z",
    "completedAt": null,
    "deletedAt": null,
    "teamId": 2,
    "templateId": 5,
    "source": "TEMPLATE",
    "documentMeta": {
      "id": "doc_meta_456",
      "subject": "Employment Contract - Updated",
      "message": "Please review and sign your employment contract.",
      "timezone": "UTC",
      "password": null,
      "dateFormat": "MM/DD/YYYY",
      "redirectUrl": null,
      "signingOrder": "PARALLEL",
      "typedSignatureEnabled": true,
      "language": "en",
      "distributionMethod": "EMAIL",
      "emailSettings": null
    },
    "Recipient": [
      {
        "id": 25,
        "documentId": null,
        "templateId": 5,
        "email": "employee@company.com",
        "name": "Employee",
        "token": "TemplateToken123",
        "documentDeletedAt": null,
        "expired": null,
        "signedAt": null,
        "authOptions": null,
        "signingOrder": 1,
        "rejectionReason": null,
        "role": "SIGNER",
        "readStatus": "NOT_OPENED",
        "signingStatus": "NOT_SIGNED",
        "sendStatus": "NOT_SENT"
      }
    ]
  },
  "createdAt": "2024-04-22T12:30:01.000Z",
  "webhookEndpoint": "https://mywebhooksite.com/mywebhook"
 }
 ```
 Example payload for the `template.deleted` event:
 ```json
 {
  "event": "TEMPLATE_DELETED",
  "payload": {
    "id": 5,
    "externalId": null,
    "userId": 1,
    "authOptions": null,
    "formValues": null,
    "visibility": "EVERYONE",
    "title": "employment_contract.pdf",
    "status": "DRAFT",
    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
    "createdAt": "2024-04-22T11:44:43.341Z",
    "updatedAt": "2024-04-22T11:44:43.341Z",
    "completedAt": null,
    "deletedAt": null,
    "teamId": 2,
    "templateId": 5,
    "source": "TEMPLATE",
    "documentMeta": {
      "id": "doc_meta_456",
      "subject": "Employment Contract",
      "message": "Please review and sign your employment contract.",
      "timezone": "UTC",
      "password": null,
      "dateFormat": "MM/DD/YYYY",
      "redirectUrl": null,
      "signingOrder": "PARALLEL",
      "typedSignatureEnabled": true,
      "language": "en",
      "distributionMethod": "EMAIL",
      "emailSettings": null
    },
    "Recipient": [
      {
        "id": 25,
        "documentId": null,
        "templateId": 5,
        "email": "employee@company.com",
        "name": "Employee",
        "token": "TemplateToken123",
        "documentDeletedAt": null,
        "expired": null,
        "signedAt": null,
        "authOptions": null,
        "signingOrder": 1,
        "rejectionReason": null,
        "role": "SIGNER",
        "readStatus": "NOT_OPENED",
        "signingStatus": "NOT_SIGNED",
        "sendStatus": "NOT_SENT"
      }
    ]
  },
  "createdAt": "2024-04-22T13:00:00.000Z",
  "webhookEndpoint": "https://mywebhooksite.com/mywebhook"
 }
 ```
 Example payload for the `template.used` event:
 ```json
 {
  "event": "TEMPLATE_USED",
  "payload": {
    "id": 15,
    "externalId": null,
    "userId": 1,
    "authOptions": null,
    "formValues": null,
    "visibility": "EVERYONE",
    "title": "employment_contract.pdf",
    "status": "DRAFT",
    "documentDataId": "new_doc_data_123",
    "createdAt": "2024-04-22T14:00:00.000Z",
    "updatedAt": "2024-04-22T14:00:00.000Z",
    "completedAt": null,
    "deletedAt": null,
    "teamId": 2,
    "templateId": 5,
    "source": "TEMPLATE",
    "documentMeta": {
      "id": "doc_meta_789",
      "subject": "Employment Contract",
      "message": "Please review and sign your employment contract.",
      "timezone": "UTC",
      "password": null,
      "dateFormat": "MM/DD/YYYY",
      "redirectUrl": null,
      "signingOrder": "PARALLEL",
      "typedSignatureEnabled": true,
      "language": "en",
      "distributionMethod": "EMAIL",
      "emailSettings": null
    },
    "Recipient": [
      {
        "id": 60,
        "documentId": 15,
        "templateId": 5,
        "email": "newemployee@company.com",
        "name": "New Employee",
        "token": "DocToken456",
        "documentDeletedAt": null,
        "expired": null,
        "signedAt": null,
        "authOptions": null,
        "signingOrder": 1,
        "rejectionReason": null,
        "role": "SIGNER",
        "readStatus": "NOT_OPENED",
        "signingStatus": "NOT_SIGNED",
        "sendStatus": "NOT_SENT"
      }
    ]
  },
  "createdAt": "2024-04-22T14:00:01.000Z",
  "webhookEndpoint": "https://mywebhooksite.com/mywebhook"
 }
 ```
 Example payload for the `recipient.authentication.failed` event:
 ```json
 {
  "event": "RECIPIENT_AUTHENTICATION_FAILED",
  "payload": {
    "id": 10,
    "externalId": null,
    "userId": 1,
    "authOptions": null,
    "formValues": null,
    "visibility": "EVERYONE",
    "title": "documenso.pdf",
    "status": "PENDING",
    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
    "createdAt": "2024-04-22T11:44:43.341Z",
    "updatedAt": "2024-04-22T11:48:07.569Z",
    "completedAt": null,
    "deletedAt": null,
    "teamId": null,
    "templateId": null,
    "source": "DOCUMENT",
    "documentMeta": {
      "id": "doc_meta_123",
      "subject": "Please sign this document",
      "message": "Hello, please review and sign this document.",
      "timezone": "UTC",
      "password": null,
      "dateFormat": "MM/DD/YYYY",
      "redirectUrl": null,
      "signingOrder": "PARALLEL",
      "typedSignatureEnabled": true,
      "language": "en",
      "distributionMethod": "EMAIL",
      "emailSettings": null
    },
    "Recipient": [
      {
        "id": 52,
        "documentId": 10,
        "templateId": null,
        "email": "signer@documenso.com",
        "name": "Signer",
        "token": "vbT8hi3jKQmrFP_LN1WcS",
        "documentDeletedAt": null,
        "expired": null,
        "signedAt": null,
        "authOptions": {
          "accessAuth": "TWO_FACTOR_AUTH",
          "actionAuth": null
        },
        "signingOrder": 1,
        "rejectionReason": null,
        "role": "SIGNER",
        "readStatus": "NOT_OPENED",
        "signingStatus": "NOT_SIGNED",
        "sendStatus": "SENT"
      }
    ]
  },
  "createdAt": "2024-04-22T11:49:00.000Z",
  "webhookEndpoint": "https://mywebhooksite.com/mywebhook"
 }
 ```
 ## Webhook Events Testing
 You can trigger test webhook events to test the webhook functionality. To trigger a test webhook, navigate to the [Webhooks page](/developers/webhooks) and click on the "Test Webhook" button.
--- a/apps/openpage-api/package.json
+++ b/apps/openpage-api/package.json
@ -5,7 +5,7 @@
  "scripts": {
    "dev": "next dev -p 3003",
    "build": "next build",
-    "start": "next start -p 3003",
+    "start": "next start",
    "lint:fix": "next lint --fix",
    "clean": "rimraf .next && rimraf node_modules"
  },
--- a/apps/remix/app/app.css
+++ b/apps/remix/app/app.css
@ -27,45 +27,9 @@
  font-display: swap;
 }
@font-face {
  font-family: 'Noto Sans';
  src: url('/fonts/noto-sans.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
 }
 /* Korean noto sans */
@font-face {
  font-family: 'Noto Sans Korean';
  src: url('/fonts/noto-sans-korean.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
 }
 /* Japanese noto sans */
@font-face {
  font-family: 'Noto Sans Japanese';
  src: url('/fonts/noto-sans-japanese.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
 }
 /* Chinese noto sans */
@font-face {
  font-family: 'Noto Sans Chinese';
  src: url('/fonts/noto-sans-chinese.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
 }
@layer base {
  :root {
    --font-sans: 'Inter';
    --font-signature: 'Caveat';
    --font-noto: 'Noto Sans', 'Noto Sans Korean', 'Noto Sans Japanese', 'Noto Sans Chinese';
  }
 }
--- a/apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
+++ b/apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
@ -1,218 +0,0 @@
 import { useEffect, useState } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
 import { OrganisationMemberRole } from '@prisma/client';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
 import { getHighestOrganisationRoleInGroup } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import type { TGetAdminOrganisationResponse } from '@documenso/trpc/server/admin-router/get-admin-organisation.types';
 import { Button } from '@documenso/ui/primitives/button';
 import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
 import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
 } from '@documenso/ui/primitives/select';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 export type AdminOrganisationMemberUpdateDialogProps = {
  trigger?: React.ReactNode;
  organisationId: string;
  organisationMember: TGetAdminOrganisationResponse['members'][number];
  isOwner: boolean;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 const ZUpdateOrganisationMemberFormSchema = z.object({
  role: z.enum(['OWNER', 'ADMIN', 'MANAGER', 'MEMBER']),
 });
 type ZUpdateOrganisationMemberSchema = z.infer<typeof ZUpdateOrganisationMemberFormSchema>;
 export const AdminOrganisationMemberUpdateDialog = ({
  trigger,
  organisationId,
  organisationMember,
  isOwner,
  ...props
 }: AdminOrganisationMemberUpdateDialogProps) => {
  const [open, setOpen] = useState(false);
  const { t } = useLingui();
  const { toast } = useToast();
  const navigate = useNavigate();
  // Determine the current role value for the form
  const currentRoleValue = isOwner
    ? 'OWNER'
    : getHighestOrganisationRoleInGroup(
        organisationMember.organisationGroupMembers.map((ogm) => ogm.group),
      );
  const organisationMemberName = organisationMember.user.name ?? organisationMember.user.email;
  const form = useForm<ZUpdateOrganisationMemberSchema>({
    resolver: zodResolver(ZUpdateOrganisationMemberFormSchema),
    defaultValues: {
      role: currentRoleValue,
    },
  });
  const { mutateAsync: updateOrganisationMemberRole } =
    trpc.admin.organisationMember.updateRole.useMutation();
  const onFormSubmit = async ({ role }: ZUpdateOrganisationMemberSchema) => {
    try {
      await updateOrganisationMemberRole({
        organisationId,
        userId: organisationMember.userId,
        role,
      });
      const roleLabel = match(role)
        .with('OWNER', () => t`Owner`)
        .with(OrganisationMemberRole.ADMIN, () => t`Admin`)
        .with(OrganisationMemberRole.MANAGER, () => t`Manager`)
        .with(OrganisationMemberRole.MEMBER, () => t`Member`)
        .exhaustive();
      toast({
        title: t`Success`,
        description:
          role === 'OWNER'
            ? t`Ownership transferred to ${organisationMemberName}.`
            : t`Updated ${organisationMemberName} to ${roleLabel}.`,
        duration: 5000,
      });
      setOpen(false);
      // Refresh the page to show updated data
      await navigate(0);
    } catch (err) {
      console.error(err);
      toast({
        title: t`An unknown error occurred`,
        description: t`We encountered an unknown error while attempting to update this organisation member. Please try again later.`,
        variant: 'destructive',
      });
    }
  };
  useEffect(() => {
    if (!open) {
      return;
    }
    form.reset({
      role: currentRoleValue,
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open, currentRoleValue, form]);
  return (
    <Dialog
      {...props}
      open={open}
      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
    >
      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
        {trigger ?? (
          <Button variant="secondary">
            <Trans>Update role</Trans>
          </Button>
        )}
      </DialogTrigger>
      <DialogContent position="center">
        <DialogHeader>
          <DialogTitle>
            <Trans>Update organisation member</Trans>
          </DialogTitle>
          <DialogDescription className="mt-4">
            <Trans>
              You are currently updating{' '}
              <span className="font-bold">{organisationMemberName}.</span>
            </Trans>
          </DialogDescription>
        </DialogHeader>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onFormSubmit)}>
            <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
              <FormField
                control={form.control}
                name="role"
                render={({ field }) => (
                  <FormItem className="w-full">
                    <FormLabel required>
                      <Trans>Role</Trans>
                    </FormLabel>
                    <FormControl>
                      <Select {...field} onValueChange={field.onChange}>
                        <SelectTrigger className="text-muted-foreground">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent className="w-full" position="popper">
                          <SelectItem value="OWNER">
                            <Trans>Owner</Trans>
                          </SelectItem>
                          <SelectItem value={OrganisationMemberRole.ADMIN}>
                            <Trans>Admin</Trans>
                          </SelectItem>
                          <SelectItem value={OrganisationMemberRole.MANAGER}>
                            <Trans>Manager</Trans>
                          </SelectItem>
                          <SelectItem value={OrganisationMemberRole.MEMBER}>
                            <Trans>Member</Trans>
                          </SelectItem>
                        </SelectContent>
                      </Select>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <DialogFooter className="mt-4">
                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
                  <Trans>Cancel</Trans>
                </Button>
                <Button type="submit" loading={form.formState.isSubmitting}>
                  <Trans>Update</Trans>
                </Button>
              </DialogFooter>
            </fieldset>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
 };
--- a/apps/remix/app/components/dialogs/document-move-to-folder-dialog.tsx
+++ b/apps/remix/app/components/dialogs/document-move-to-folder-dialog.tsx
@ -71,7 +71,7 @@ export const DocumentMoveToFolderDialog = ({
    },
  });
-  const { data: folders, isLoading: isFoldersLoading } = trpc.folder.findFoldersInternal.useQuery(
+  const { data: folders, isLoading: isFoldersLoading } = trpc.folder.findFolders.useQuery(
    {
      parentId: currentFolderId,
      type: FolderType.DOCUMENT,
--- a/apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
+++ b/apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
@ -15,16 +15,17 @@ import {
 import { AnimatePresence, motion } from 'framer-motion';
 import { InfoIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import { match } from 'ts-pattern';
 import * as z from 'zod';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { formatSigningLink } from '@documenso/lib/utils/recipients';
 import { trpc, trpc as trpcReact } from '@documenso/trpc/react';
 import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
 import { DocumentSendEmailMessageHelper } from '@documenso/ui/components/document/document-send-email-message-helper';
 import { cn } from '@documenso/ui/lib/utils';
 import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
 import {
  Dialog,
@ -60,10 +61,8 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 export type EnvelopeDistributeDialogProps = {
  envelope: Pick<TEnvelope, 'id' | 'userId' | 'teamId' | 'status' | 'type' | 'documentMeta'> & {
    recipients: Recipient[];
-    fields: Pick<Field, 'type' | 'recipientId'>[];
+    fields: Field[];
  };
  onDistribute?: () => Promise<void>;
  documentRootPath: string;
  trigger?: React.ReactNode;
 };
@ -85,19 +84,13 @@ export const ZEnvelopeDistributeFormSchema = z.object({
 export type TEnvelopeDistributeFormSchema = z.infer<typeof ZEnvelopeDistributeFormSchema>;
-export const EnvelopeDistributeDialog = ({
+export const EnvelopeDistributeDialog = ({ envelope, trigger }: EnvelopeDistributeDialogProps) => {
  envelope,
  trigger,
  documentRootPath,
  onDistribute,
 }: EnvelopeDistributeDialogProps) => {
  const organisation = useCurrentOrganisation();
  const recipients = envelope.recipients;
  const { toast } = useToast();
  const { t } = useLingui();
  const navigate = useNavigate();
  const [isOpen, setIsOpen] = useState(false);
@ -134,44 +127,22 @@ export const EnvelopeDistributeDialog = ({
  const distributionMethod = watch('meta.distributionMethod');
-  const recipientsMissingSignatureFields = useMemo(
+  const everySignerHasSignature = useMemo(
    () =>
-      envelope.recipients.filter(
+      envelope.recipients
-        (recipient) =>
+        .filter((recipient) => recipient.role === RecipientRole.SIGNER)
-          recipient.role === RecipientRole.SIGNER &&
+        .every((recipient) =>
-          !envelope.fields.some(
+          envelope.fields.some(
            (field) => field.type === FieldType.SIGNATURE && field.recipientId === recipient.id,
          ),
-      ),
+        ),
    [envelope.recipients, envelope.fields],
  );
  const invalidEnvelopeCode = useMemo(() => {
    if (recipientsMissingSignatureFields.length > 0) {
      return 'MISSING_SIGNATURES';
    }
    if (envelope.recipients.length === 0) {
      return 'MISSING_RECIPIENTS';
    }
    return null;
  }, [envelope.recipients, envelope.fields, recipientsMissingSignatureFields]);
  const onFormSubmit = async ({ meta }: TEnvelopeDistributeFormSchema) => {
    try {
      await distributeEnvelope({ envelopeId: envelope.id, meta });
      await onDistribute?.();
      let redirectPath = `${documentRootPath}/${envelope.id}`;
      if (meta.distributionMethod === DocumentDistributionMethod.NONE) {
        redirectPath += '?action=copy-links';
      }
      await navigate(redirectPath);
      toast({
        title: t`Envelope distributed`,
        description: t`Your envelope has been distributed successfully.`,
@ -207,8 +178,7 @@ export const EnvelopeDistributeDialog = ({
            <Trans>Recipients will be able to sign the document once sent</Trans>
          </DialogDescription>
        </DialogHeader>
-
+        {everySignerHasSignature ? (
        {!invalidEnvelopeCode ? (
          <Form {...form}>
            <form onSubmit={handleSubmit(onFormSubmit)}>
              <fieldset disabled={isSubmitting}>
@ -230,11 +200,7 @@ export const EnvelopeDistributeDialog = ({
                  </TabsList>
                </Tabs>
-                <div
+                <div className="min-h-72">
                  className={cn('min-h-72', {
                    'min-h-[23rem]': organisation.organisationClaim.flags.emailDomains,
                  })}
                >
                  <AnimatePresence initial={false} mode="wait">
                    {distributionMethod === DocumentDistributionMethod.EMAIL && (
                      <motion.div
@ -369,18 +335,71 @@ export const EnvelopeDistributeDialog = ({
                        exit={{ opacity: 0, transition: { duration: 0.15 } }}
                        className="min-h-60 rounded-lg border"
                      >
-                        <div className="text-muted-foreground py-24 text-center text-sm">
+                        {envelope.status === DocumentStatus.DRAFT ? (
-                          <p>
+                          <div className="text-muted-foreground py-24 text-center text-sm">
-                            <Trans>We won't send anything to notify recipients.</Trans>
+                            <p>
-                          </p>
+                              <Trans>We won't send anything to notify recipients.</Trans>
                            </p>
-                          <p className="mt-2">
+                            <p className="mt-2">
-                            <Trans>
+                              <Trans>
-                              We will generate signing links for you, which you can send to the
+                                We will generate signing links for you, which you can send to the
-                              recipients through your method of choice.
+                                recipients through your method of choice.
-                            </Trans>
+                              </Trans>
-                          </p>
+                            </p>
-                        </div>
+                          </div>
                        ) : (
                          <ul className="text-muted-foreground divide-y">
                            {recipients.length === 0 && (
                              <li className="flex flex-col items-center justify-center py-6 text-sm">
                                <Trans>No recipients</Trans>
                              </li>
                            )}
                            {recipients.map((recipient) => (
                              <li
                                key={recipient.id}
                                className="flex items-center justify-between px-4 py-3 text-sm"
                              >
                                <AvatarWithText
                                  avatarFallback={recipient.email.slice(0, 1).toUpperCase()}
                                  primaryText={
                                    <p className="text-muted-foreground text-sm">
                                      {recipient.email}
                                    </p>
                                  }
                                  secondaryText={
                                    <p className="text-muted-foreground/70 text-xs">
                                      {t(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
                                    </p>
                                  }
                                />
                                {recipient.role !== RecipientRole.CC && (
                                  <CopyTextButton
                                    value={formatSigningLink(recipient.token)}
                                    onCopySuccess={() => {
                                      toast({
                                        title: t`Copied to clipboard`,
                                        description: t`The signing link has been copied to your clipboard.`,
                                      });
                                    }}
                                    badgeContentUncopied={
                                      <p className="ml-1 text-xs">
                                        <Trans>Copy</Trans>
                                      </p>
                                    }
                                    badgeContentCopied={
                                      <p className="ml-1 text-xs">
                                        <Trans>Copied</Trans>
                                      </p>
                                    }
                                  />
                                )}
                              </li>
                            ))}
                          </ul>
                        )}
                      </motion.div>
                    )}
                  </AnimatePresence>
@ -407,24 +426,12 @@ export const EnvelopeDistributeDialog = ({
        ) : (
          <>
            <Alert variant="warning">
-              {match(invalidEnvelopeCode)
+              <AlertDescription>
-                .with('MISSING_RECIPIENTS', () => (
+                <Trans>
-                  <AlertDescription>
+                  Some signers have not been assigned a signature field. Please assign at least 1
-                    <Trans>You need at least one recipient to send a document</Trans>
+                  signature field to each signer before proceeding.
-                  </AlertDescription>
+                </Trans>
-                ))
+              </AlertDescription>
                .with('MISSING_SIGNATURES', () => (
                  <AlertDescription>
                    <Trans>The following signers are missing signature fields:</Trans>
                    <ul className="ml-2 mt-1 list-inside list-disc">
                      {recipientsMissingSignatureFields.map((recipient) => (
                        <li key={recipient.id}>{recipient.email}</li>
                      ))}
                    </ul>
                  </AlertDescription>
                ))
                .exhaustive()}
            </Alert>
            <DialogFooter>
--- a/apps/remix/app/components/dialogs/envelope-download-dialog.tsx
+++ b/apps/remix/app/components/dialogs/envelope-download-dialog.tsx
@ -1,220 +0,0 @@
 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 { DownloadIcon, FileTextIcon } from 'lucide-react';
 import { downloadFile } from '@documenso/lib/client-only/download-file';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
 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 EnvelopeDownloadDialogProps = {
  envelopeId: string;
  envelopeStatus: DocumentStatus;
  envelopeItems?: EnvelopeItemToDownload[];
  /**
   * The recipient token to download the document.
   *
   * If not provided, it will be assumed that the current user can access the document.
   */
  token?: string;
  trigger: React.ReactNode;
 };
 export const EnvelopeDownloadDialog = ({
  envelopeId,
  envelopeStatus,
  envelopeItems: initialEnvelopeItems,
  token,
  trigger,
 }: EnvelopeDownloadDialogProps) => {
  const { toast } = useToast();
  const { t } = useLingui();
  const [open, setOpen] = useState(false);
  const [isDownloadingState, setIsDownloadingState] = useState<{
    [envelopeItemIdAndVersion: string]: boolean;
  }>({});
  const generateDownloadKey = (envelopeItemId: string, version: 'original' | 'signed') =>
    `${envelopeItemId}-${version}`;
  const { data: envelopeItemsPayload, isLoading: isLoadingEnvelopeItems } =
    trpc.envelope.item.getManyByToken.useQuery(
      {
        envelopeId,
        access: token ? { type: 'recipient', token } : { type: 'user' },
      },
      {
        initialData: initialEnvelopeItems ? { envelopeItems: initialEnvelopeItems } : undefined,
        enabled: open,
      },
    );
  const envelopeItems = envelopeItemsPayload?.envelopeItems || [];
  const onDownload = async (
    envelopeItem: EnvelopeItemToDownload,
    version: 'original' | 'signed',
  ) => {
    const { id: envelopeItemId } = envelopeItem;
    if (isDownloadingState[generateDownloadKey(envelopeItemId, version)]) {
      return;
    }
    setIsDownloadingState((prev) => ({
      ...prev,
      [generateDownloadKey(envelopeItemId, version)]: true,
    }));
    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,
      });
      setIsDownloadingState((prev) => ({
        ...prev,
        [generateDownloadKey(envelopeItemId, version)]: false,
      }));
    } catch (error) {
      setIsDownloadingState((prev) => ({
        ...prev,
        [generateDownloadKey(envelopeItemId, version)]: false,
      }));
      console.error(error);
      toast({
        title: t`Something went wrong`,
        description: t`This document could not be downloaded at this time. Please try again.`,
        variant: 'destructive',
        duration: 7500,
      });
    }
  };
  return (
    <Dialog open={open} onOpenChange={(value) => setOpen(value)}>
      <DialogTrigger asChild>{trigger}</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
            <Trans>Download Files</Trans>
          </DialogTitle>
          <DialogDescription>
            <Trans>Select the files you would like to download.</Trans>
          </DialogDescription>
        </DialogHeader>
        <div className="flex flex-col gap-4">
          {isLoadingEnvelopeItems ? (
            <>
              {Array.from({ length: 2 }).map((_, index) => (
                <div
                  key={index}
                  className="border-border bg-card flex items-center gap-2 rounded-lg border p-4"
                >
                  <Skeleton className="h-10 w-10 flex-shrink-0 rounded-lg" />
                  <div className="flex w-full flex-col gap-2">
                    <Skeleton className="h-4 w-28 rounded-lg" />
                    <Skeleton className="h-4 w-20 rounded-lg" />
                  </div>
                  <Skeleton className="h-10 w-20 flex-shrink-0 rounded-lg" />
                </div>
              ))}
            </>
          ) : (
            envelopeItems.map((item) => (
              <div
                key={item.id}
                className="border-border bg-card hover:bg-accent/50 flex items-center gap-4 rounded-lg border p-4 transition-colors"
              >
                <div className="flex-shrink-0">
                  <div className="bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg">
                    <FileTextIcon className="text-primary h-5 w-5" />
                  </div>
                </div>
                <div className="min-w-0 flex-1">
                  <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>
                  </p>
                </div>
                <div className="flex flex-shrink-0 items-center gap-2">
                  <Button
                    variant="outline"
                    size="sm"
                    className="text-xs"
                    onClick={async () => onDownload(item, 'original')}
                    loading={isDownloadingState[generateDownloadKey(item.id, 'original')]}
                  >
                    {!isDownloadingState[generateDownloadKey(item.id, 'original')] && (
                      <DownloadIcon className="mr-2 h-4 w-4" />
                    )}
                    <Trans>Original</Trans>
                  </Button>
                  {envelopeStatus === DocumentStatus.COMPLETED && (
                    <Button
                      variant="default"
                      size="sm"
                      className="text-xs"
                      onClick={async () => onDownload(item, 'signed')}
                      loading={isDownloadingState[generateDownloadKey(item.id, 'signed')]}
                    >
                      {!isDownloadingState[generateDownloadKey(item.id, 'signed')] && (
                        <DownloadIcon className="mr-2 h-4 w-4" />
                      )}
                      <Trans>Signed</Trans>
                    </Button>
                  )}
                </div>
              </div>
            ))
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
 };
--- a/apps/remix/app/components/dialogs/folder-delete-dialog.tsx
+++ b/apps/remix/app/components/dialogs/folder-delete-dialog.tsx
@ -63,7 +63,7 @@ export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDelet
  const onFormSubmit = async () => {
    try {
      await deleteFolder({
-        folderId: folder.id,
+        id: folder.id,
      });
      onOpenChange(false);
--- a/apps/remix/app/components/dialogs/folder-move-dialog.tsx
+++ b/apps/remix/app/components/dialogs/folder-move-dialog.tsx
@ -53,7 +53,7 @@ export const FolderMoveDialog = ({
  const { toast } = useToast();
  const [searchTerm, setSearchTerm] = useState('');
-  const { mutateAsync: moveFolder } = trpc.folder.updateFolder.useMutation();
+  const { mutateAsync: moveFolder } = trpc.folder.moveFolder.useMutation();
  const form = useForm<TMoveFolderFormSchema>({
    resolver: zodResolver(ZMoveFolderFormSchema),
@ -63,16 +63,12 @@ export const FolderMoveDialog = ({
  });
  const onFormSubmit = async ({ targetFolderId }: TMoveFolderFormSchema) => {
-    if (!folder) {
+    if (!folder) return;
      return;
    }
    try {
      await moveFolder({
-        folderId: folder.id,
+        id: folder.id,
-        data: {
+        parentId: targetFolderId || null,
          parentId: targetFolderId || null,
        },
      });
      onOpenChange(false);
--- a/apps/remix/app/components/dialogs/folder-update-dialog.tsx
+++ b/apps/remix/app/components/dialogs/folder-update-dialog.tsx
@ -61,6 +61,8 @@ export const FolderUpdateDialog = ({ folder, isOpen, onOpenChange }: FolderUpdat
  const { toast } = useToast();
  const { mutateAsync: updateFolder } = trpc.folder.updateFolder.useMutation();
  const isTeamContext = !!team;
  const form = useForm<z.infer<typeof ZUpdateFolderFormSchema>>({
    resolver: zodResolver(ZUpdateFolderFormSchema),
    defaultValues: {
@ -85,11 +87,11 @@ export const FolderUpdateDialog = ({ folder, isOpen, onOpenChange }: FolderUpdat
    try {
      await updateFolder({
-        folderId: folder.id,
+        id: folder.id,
-        data: {
+        name: data.name,
-          name: data.name,
+        visibility: isTeamContext
-          visibility: data.visibility,
+          ? (data.visibility ?? DocumentVisibility.EVERYONE)
-        },
+          : DocumentVisibility.EVERYONE,
      });
      toast({
@ -138,36 +140,38 @@ export const FolderUpdateDialog = ({ folder, isOpen, onOpenChange }: FolderUpdat
              )}
            />
-            <FormField
+            {isTeamContext && (
-              control={form.control}
+              <FormField
-              name="visibility"
+                control={form.control}
-              render={({ field }) => (
+                name="visibility"
-                <FormItem>
+                render={({ field }) => (
-                  <FormLabel>
+                  <FormItem>
-                    <Trans>Visibility</Trans>
+                    <FormLabel>
-                  </FormLabel>
+                      <Trans>Visibility</Trans>
-                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                    </FormLabel>
-                    <FormControl>
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
-                      <SelectTrigger>
+                      <FormControl>
-                        <SelectValue placeholder={t`Select visibility`} />
+                        <SelectTrigger>
-                      </SelectTrigger>
+                          <SelectValue placeholder={t`Select visibility`} />
-                    </FormControl>
+                        </SelectTrigger>
-                    <SelectContent>
+                      </FormControl>
-                      <SelectItem value={DocumentVisibility.EVERYONE}>
+                      <SelectContent>
-                        <Trans>Everyone</Trans>
+                        <SelectItem value={DocumentVisibility.EVERYONE}>
-                      </SelectItem>
+                          <Trans>Everyone</Trans>
-                      <SelectItem value={DocumentVisibility.MANAGER_AND_ABOVE}>
+                        </SelectItem>
-                        <Trans>Managers and above</Trans>
+                        <SelectItem value={DocumentVisibility.MANAGER_AND_ABOVE}>
-                      </SelectItem>
+                          <Trans>Managers and above</Trans>
-                      <SelectItem value={DocumentVisibility.ADMIN}>
+                        </SelectItem>
-                        <Trans>Admins only</Trans>
+                        <SelectItem value={DocumentVisibility.ADMIN}>
-                      </SelectItem>
+                          <Trans>Admins only</Trans>
-                    </SelectContent>
+                        </SelectItem>
-                  </Select>
+                      </SelectContent>
-                  <FormMessage />
+                    </Select>
-                </FormItem>
+                    <FormMessage />
-              )}
+                  </FormItem>
-            />
+                )}
              />
            )}
            <DialogFooter>
              <DialogClose asChild>
--- a/apps/remix/app/components/dialogs/sign-field-checkbox-dialog.tsx
+++ b/apps/remix/app/components/dialogs/sign-field-checkbox-dialog.tsx
@ -1,186 +0,0 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { Plural, Trans } from '@lingui/react/macro';
 import { createCallable } from 'react-call';
 import { useForm, useWatch } from 'react-hook-form';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
 import { validateCheckboxLength } from '@documenso/lib/advanced-fields-validation/validate-checkbox';
 import { type TCheckboxFieldMeta } from '@documenso/lib/types/field-meta';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
 } from '@documenso/ui/primitives/dialog';
 import { Form, FormControl, FormField, FormItem } from '@documenso/ui/primitives/form/form';
 export type SignFieldCheckboxDialogProps = {
  fieldMeta: TCheckboxFieldMeta;
  validationRule: '>=' | '=' | '<=';
  validationLength: number;
  preselectedIndices: number[];
 };
 export const SignFieldCheckboxDialog = createCallable<
  SignFieldCheckboxDialogProps,
  number[] | null
 >(({ call, fieldMeta, validationRule, validationLength, preselectedIndices }) => {
  const ZSignFieldCheckboxFormSchema = z
    .object({
      values: z.array(
        z.object({
          checked: z.boolean(),
          value: z.string(),
        }),
      ),
    })
    .superRefine((data, ctx) => {
      // Allow unselecting all options if the field is not required even if
      // validation is not met.
      if (!fieldMeta.required && data.values.every((value) => !value.checked)) {
        return;
      }
      const numberOfSelectedValues = data.values.filter((value) => value.checked).length;
      const isValid = validateCheckboxLength(
        numberOfSelectedValues,
        validationRule,
        validationLength,
      );
      if (!isValid) {
        ctx.addIssue({
          code: z.ZodIssueCode.custom,
          message: msg`Validation failed`.id,
        });
      }
    });
  const form = useForm<z.infer<typeof ZSignFieldCheckboxFormSchema>>({
    resolver: zodResolver(ZSignFieldCheckboxFormSchema),
    defaultValues: {
      values: (fieldMeta.values || []).map((value, index) => ({
        checked: preselectedIndices.includes(index) || false,
        value: value.value,
      })),
    },
  });
  const formValues = useWatch({
    control: form.control,
  });
  return (
    <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
      <DialogContent position="center">
        <DialogHeader>
          <DialogTitle>
            <Trans>Sign Checkbox Field</Trans>
          </DialogTitle>
          <DialogDescription
            className={cn('mt-4', {
              'text-destructive': Object.keys(form.formState.errors).length > 0,
            })}
          >
            {match(validationRule)
              .with('>=', () => (
                <Plural
                  value={validationLength}
                  one="Select at least # option"
                  other="Select at least # options"
                />
              ))
              .with('=', () => (
                <Plural
                  value={validationLength}
                  one="Select exactly # option"
                  other="Select exactly # options"
                />
              ))
              .with('<=', () => (
                <Plural
                  value={validationLength}
                  one="Select at most # option"
                  other="Select at most # options"
                />
              ))
              .exhaustive()}
          </DialogDescription>
        </DialogHeader>
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit((data) =>
              call.end(
                data.values
                  .map((value, i) => (value.checked ? i : null))
                  .filter((value) => value !== null),
              ),
            )}
          >
            <fieldset
              className="flex h-full flex-col space-y-4"
              disabled={form.formState.isSubmitting}
            >
              <ul className="space-y-3">
                {(formValues.values || []).map((value, index) => (
                  <li key={`checkbox-${index}`}>
                    <FormField
                      control={form.control}
                      name={`values.${index}`}
                      render={({ field }) => (
                        <FormItem>
                          <FormControl>
                            <div className="flex items-center">
                              <Checkbox
                                id={`checkbox-value-${index}`}
                                className="data-[state=checked]:bg-primary border-foreground/30 h-5 w-5"
                                checked={field.value.checked}
                                onCheckedChange={(checked) => {
                                  field.onChange({
                                    ...field.value,
                                    checked,
                                  });
                                }}
                              />
                              <label
                                className="text-muted-foreground ml-2 w-full text-sm"
                                htmlFor={`checkbox-value-${index}`}
                              >
                                {value.value}
                              </label>
                            </div>
                          </FormControl>
                        </FormItem>
                      )}
                    />
                  </li>
                ))}
              </ul>
              <DialogFooter>
                <Button type="button" variant="secondary" onClick={() => call.end(null)}>
                  <Trans>Cancel</Trans>
                </Button>
                <Button type="submit">
                  <Trans>Sign</Trans>
                </Button>
              </DialogFooter>
            </fieldset>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
 });
--- a/apps/remix/app/components/dialogs/sign-field-dropdown-dialog.tsx
+++ b/apps/remix/app/components/dialogs/sign-field-dropdown-dialog.tsx
@ -1,15 +1,40 @@
-import { useLingui } from '@lingui/react/macro';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { createCallable } from 'react-call';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import type { TDropdownFieldMeta } from '@documenso/lib/types/field-meta';
 import { Button } from '@documenso/ui/primitives/button';
 import {
-  CommandDialog,
+  Dialog,
-  CommandEmpty,
+  DialogContent,
-  CommandGroup,
+  DialogDescription,
-  CommandInput,
+  DialogFooter,
-  CommandItem,
+  DialogHeader,
-  CommandList,
+  DialogTitle,
-} from '@documenso/ui/primitives/command';
+} from '@documenso/ui/primitives/dialog';
 import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
 } from '@documenso/ui/primitives/select';
 const ZSignFieldDropdownFormSchema = z.object({
  dropdown: z.string().min(1, { message: msg`Option is required`.id }),
 });
 type TSignFieldDropdownFormSchema = z.infer<typeof ZSignFieldDropdownFormSchema>;
 export type SignFieldDropdownDialogProps = {
  fieldMeta: TDropdownFieldMeta;
@ -21,25 +46,72 @@ export const SignFieldDropdownDialog = createCallable<SignFieldDropdownDialogPro
    const values = fieldMeta.values?.map((value) => value.value) ?? [];
    const form = useForm<TSignFieldDropdownFormSchema>({
      resolver: zodResolver(ZSignFieldDropdownFormSchema),
      defaultValues: {
        dropdown: fieldMeta.defaultValue,
      },
    });
    return (
-      <CommandDialog
+      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
-        position="start"
+        <DialogContent position="center">
-        dialogContentClassName="mt-4"
+          <DialogHeader>
-        open={true}
+            <DialogTitle>
-        onOpenChange={(value) => (!value ? call.end(null) : null)}
+              <Trans>Sign Dropdown Field</Trans>
-      >
+            </DialogTitle>
-        <CommandInput placeholder={t`Select an option`} />
+
-        <CommandList>
+            <DialogDescription className="mt-4">
-          <CommandEmpty>No results found.</CommandEmpty>
+              <Trans>Select a value to sign into the field</Trans>
-          <CommandGroup heading={t`Options`}>
+            </DialogDescription>
-            {values.map((value, i) => (
+          </DialogHeader>
-              <CommandItem onSelect={() => call.end(value)} key={i} value={value}>
+
-                {value}
+          <Form {...form}>
-              </CommandItem>
+            <form onSubmit={form.handleSubmit((data) => call.end(data.dropdown))}>
-            ))}
+              <fieldset
-          </CommandGroup>
+                className="flex h-full flex-col space-y-4"
-        </CommandList>
+                disabled={form.formState.isSubmitting}
-      </CommandDialog>
+              >
                <FormField
                  control={form.control}
                  name="dropdown"
                  render={({ field }) => (
                    <FormItem>
                      <FormControl>
                        <Select {...field} onValueChange={field.onChange}>
                          <SelectTrigger className="bg-background">
                            <SelectValue placeholder={t`Select an option`} />
                          </SelectTrigger>
                          <SelectContent>
                            {values.map((value, i) => (
                              <SelectItem key={i} value={value}>
                                {value}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <DialogFooter>
                  <Button type="button" variant="secondary" onClick={() => call.end(null)}>
                    <Trans>Cancel</Trans>
                  </Button>
                  <Button type="submit">
                    <Trans>Sign</Trans>
                  </Button>
                </DialogFooter>
              </fieldset>
            </form>
          </Form>
        </DialogContent>
      </Dialog>
    );
  },
 );
--- a/apps/remix/app/components/dialogs/sign-field-email-dialog.tsx
+++ b/apps/remix/app/components/dialogs/sign-field-email-dialog.tsx
@ -29,22 +29,20 @@ const ZSignFieldEmailFormSchema = z.object({
 type TSignFieldEmailFormSchema = z.infer<typeof ZSignFieldEmailFormSchema>;
-export type SignFieldEmailDialogProps = {
+export type SignFieldEmailDialogProps = Record<string, never>;
  placeholderEmail: string | null;
 };
 export const SignFieldEmailDialog = createCallable<SignFieldEmailDialogProps, string | null>(
-  ({ call, placeholderEmail }) => {
+  ({ call }) => {
    const form = useForm<TSignFieldEmailFormSchema>({
      resolver: zodResolver(ZSignFieldEmailFormSchema),
      defaultValues: {
-        email: placeholderEmail || '',
+        email: '',
      },
    });
    return (
      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
-        <DialogContent>
+        <DialogContent position="center">
          <DialogHeader>
            <DialogTitle>
              <Trans>Sign Email</Trans>
--- a/apps/remix/app/components/dialogs/sign-field-initials-dialog.tsx
+++ b/apps/remix/app/components/dialogs/sign-field-initials-dialog.tsx
@ -45,7 +45,7 @@ export const SignFieldInitialsDialog = createCallable<SignFieldInitialsDialogPro
    return (
      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
-        <DialogContent>
+        <DialogContent position="center">
          <DialogHeader>
            <DialogTitle>
              <Trans>Sign Initials</Trans>
--- a/apps/remix/app/components/dialogs/sign-field-name-dialog.tsx
+++ b/apps/remix/app/components/dialogs/sign-field-name-dialog.tsx
@ -44,7 +44,7 @@ export const SignFieldNameDialog = createCallable<SignFieldNameDialogProps, stri
    return (
      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
-        <DialogContent>
+        <DialogContent position="center">
          <DialogHeader>
            <DialogTitle>
              <Trans>Sign Name</Trans>
--- a/apps/remix/app/components/dialogs/sign-field-number-dialog.tsx
+++ b/apps/remix/app/components/dialogs/sign-field-number-dialog.tsx
@ -30,7 +30,7 @@ import { Input } from '@documenso/ui/primitives/input';
 const createNumberFieldSchema = (fieldMeta: TNumberFieldMeta) => {
  let schema = z.coerce.number({
-    invalid_type_error: msg`Please enter a valid number`.id,
+    invalid_type_error: msg`Please enter a valid number`.id, // Todo: Envelopes - Check that this works
  });
  const { numberFormat, minValue, maxValue } = fieldMeta;
@ -55,7 +55,9 @@ const createNumberFieldSchema = (fieldMeta: TNumberFieldMeta) => {
        return foundRegex.test(value.toString());
      },
      {
-        message: msg`Number needs to be formatted as ${numberFormat}`.id,
+        message: `Number needs to be formatted as ${numberFormat}`,
        // Todo: Envelopes
        // message: msg`Number needs to be formatted as ${numberFormat}`.id,
      },
    );
  }
@ -84,7 +86,7 @@ export const SignFieldNumberDialog = createCallable<SignFieldNumberDialogProps,
    return (
      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
-        <DialogContent>
+        <DialogContent position="center">
          <DialogHeader>
            <DialogTitle>
              <Trans>Sign Number Field</Trans>
--- a/apps/remix/app/components/dialogs/sign-field-text-dialog.tsx
+++ b/apps/remix/app/components/dialogs/sign-field-text-dialog.tsx
@ -50,7 +50,7 @@ export const SignFieldTextDialog = createCallable<SignFieldTextDialogProps, stri
    return (
      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
-        <DialogContent>
+        <DialogContent position="center">
          <DialogHeader>
            <DialogTitle>
              <Trans>Sign Text Field</Trans>
--- a/apps/remix/app/components/dialogs/template-move-to-folder-dialog.tsx
+++ b/apps/remix/app/components/dialogs/template-move-to-folder-dialog.tsx
@ -73,7 +73,7 @@ export function TemplateMoveToFolderDialog({
    },
  });
-  const { data: folders, isLoading: isFoldersLoading } = trpc.folder.findFoldersInternal.useQuery(
+  const { data: folders, isLoading: isFoldersLoading } = trpc.folder.findFolders.useQuery(
    {
      parentId: currentFolderId ?? null,
      type: FolderType.TEMPLATE,
--- a/apps/remix/app/components/dialogs/template-use-dialog.tsx
+++ b/apps/remix/app/components/dialogs/template-use-dialog.tsx
@ -6,7 +6,7 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { Recipient } from '@prisma/client';
 import { DocumentDistributionMethod, DocumentSigningOrder } from '@prisma/client';
-import { FileTextIcon, InfoIcon, Plus, UploadCloudIcon, X } from 'lucide-react';
+import { InfoIcon, Plus, Upload, X } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import * as z from 'zod';
@ -16,10 +16,6 @@ import {
  TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX,
  TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX,
 } from '@documenso/lib/constants/template';
 import {
  DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
  SKIP_QUERY_BATCH_META,
 } from '@documenso/lib/constants/trpc';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { trpc } from '@documenso/trpc/react';
@ -45,7 +41,6 @@ import {
  FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { SpinnerBox } from '@documenso/ui/primitives/spinner';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 import type { Toast } from '@documenso/ui/primitives/use-toast';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@ -54,13 +49,8 @@ const ZAddRecipientsForNewDocumentSchema = z.object({
  distributeDocument: z.boolean(),
  useCustomDocument: z.boolean().default(false),
  customDocumentData: z
-    .array(
+    .any()
-      z.object({
+    .refine((data) => data instanceof File || data === undefined)
        title: z.string(),
        data: z.instanceof(File).optional(),
        envelopeItemId: z.string(),
      }),
    )
    .optional(),
  recipients: z.array(
    z.object({
@ -75,7 +65,6 @@ const ZAddRecipientsForNewDocumentSchema = z.object({
 type TAddRecipientsForNewDocumentSchema = z.infer<typeof ZAddRecipientsForNewDocumentSchema>;
 export type TemplateUseDialogProps = {
  envelopeId: string;
  templateId: number;
  templateSigningOrder?: DocumentSigningOrder | null;
  recipients: Recipient[];
@ -88,7 +77,6 @@ export function TemplateUseDialog({
  recipients,
  documentDistributionMethod = DocumentDistributionMethod.EMAIL,
  documentRootPath,
  envelopeId,
  templateId,
  templateSigningOrder,
  trigger,
@ -105,7 +93,7 @@ export function TemplateUseDialog({
    defaultValues: {
      distributeDocument: false,
      useCustomDocument: false,
-      customDocumentData: [],
+      customDocumentData: undefined,
      recipients: recipients
        .sort((a, b) => (a.signingOrder || 0) - (b.signingOrder || 0))
        .map((recipient) => {
@ -127,50 +115,23 @@ export function TemplateUseDialog({
    },
  });
  const { replace, fields: localCustomDocumentData } = useFieldArray({
    control: form.control,
    name: 'customDocumentData',
  });
  const { data: response, isLoading: isLoadingEnvelopeItems } = trpc.envelope.item.getMany.useQuery(
    {
      envelopeId,
    },
    {
      placeholderData: (previousData) => previousData,
      ...SKIP_QUERY_BATCH_META,
      ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
    },
  );
  const envelopeItems = response?.envelopeItems ?? [];
  const { mutateAsync: createDocumentFromTemplate } =
    trpc.template.createDocumentFromTemplate.useMutation();
  const onSubmit = async (data: TAddRecipientsForNewDocumentSchema) => {
    try {
-      const customFilesToUpload = (data.customDocumentData || []).filter(
+      let customDocumentDataId: string | undefined = undefined;
        (item): item is { data: File; envelopeItemId: string; title: string } =>
          item.data !== undefined && item.envelopeItemId !== undefined && item.title !== undefined,
      );
-      const customDocumentData = await Promise.all(
+      if (data.useCustomDocument && data.customDocumentData) {
-        customFilesToUpload.map(async (item) => {
+        const customDocumentData = await putPdfFile(data.customDocumentData);
-          const customDocumentData = await putPdfFile(item.data);
+        customDocumentDataId = customDocumentData.id;
      }
-          return {
+      const { id } = await createDocumentFromTemplate({
            documentDataId: customDocumentData.id,
            envelopeItemId: item.envelopeItemId,
          };
        }),
      );
      const { envelopeId } = await createDocumentFromTemplate({
        templateId,
        recipients: data.recipients,
        distributeDocument: data.distributeDocument,
-        customDocumentData,
+        customDocumentDataId,
      });
      toast({
@ -179,7 +140,7 @@ export function TemplateUseDialog({
        duration: 5000,
      });
-      let documentPath = `${documentRootPath}/${envelopeId}`;
+      let documentPath = `${documentRootPath}/${id}`;
      if (
        data.distributeDocument &&
@ -219,18 +180,6 @@ export function TemplateUseDialog({
    }
  }, [open, form]);
  useEffect(() => {
    if (envelopeItems.length > 0 && localCustomDocumentData.length === 0) {
      replace(
        envelopeItems.map((item) => ({
          title: item.title,
          data: undefined,
          envelopeItemId: item.id,
        })),
      );
    }
  }, [envelopeItems, form, open]);
  return (
    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
      <DialogTrigger asChild>
@ -435,6 +384,7 @@ export function TemplateUseDialog({
                          className="text-muted-foreground ml-2 flex items-center text-sm"
                          htmlFor="useCustomDocument"
                        >
                          {/* Todo: Envelopes - How will this work? */}
                          <Trans>Upload custom document</Trans>
                          <Tooltip>
                            <TooltipTrigger type="button">
@ -456,133 +406,116 @@ export function TemplateUseDialog({
                />
                {form.watch('useCustomDocument') && (
-                  <div className="my-4 space-y-2">
+                  <div className="my-4">
-                    {isLoadingEnvelopeItems ? (
+                    <FormField
-                      <SpinnerBox className="py-16" />
+                      control={form.control}
-                    ) : (
+                      name="customDocumentData"
-                      localCustomDocumentData.map((item, i) => (
+                      render={({ field }) => (
-                        <FormField
+                        <FormItem>
-                          key={item.id}
+                          <FormControl>
-                          control={form.control}
+                            <div className="w-full space-y-4">
-                          name={`customDocumentData.${i}.data`}
+                              <label
-                          render={({ field }) => (
+                                className={cn(
-                            <FormItem>
+                                  'text-muted-foreground hover:border-muted-foreground/50 group relative flex min-h-[150px] cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-gray-300 px-6 py-10 transition-colors',
-                              <FormControl>
+                                  {
-                                <div
+                                    'border-destructive hover:border-destructive':
-                                  key={item.id}
+                                      form.formState.errors.customDocumentData,
-                                  className="border-border bg-card hover:bg-accent/10 flex items-center gap-4 rounded-lg border p-4 transition-colors"
+                                  },
-                                >
+                                )}
-                                  <div className="flex-shrink-0">
+                              >
-                                    <div className="bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg">
+                                <div className="text-center">
-                                      <FileTextIcon className="text-primary h-5 w-5" />
+                                  {!field.value && (
-                                    </div>
+                                    <>
-                                  </div>
+                                      <Upload className="text-muted-foreground/50 mx-auto h-10 w-10" />
-
+                                      <div className="mt-4 flex text-sm leading-6">
-                                  <div className="min-w-0 flex-1">
+                                        <span className="text-muted-foreground relative">
                                    <h4 className="text-foreground truncate text-sm font-medium">
                                      {item.title}
                                    </h4>
                                    <p className="text-muted-foreground mt-0.5 text-xs">
                                      {field.value ? (
                                        <div>
                                          <Trans>
-                                            Custom {(field.value.size / (1024 * 1024)).toFixed(2)}{' '}
+                                            <span className="text-primary font-semibold">
-                                            MB file
+                                              Click to upload
                                            </span>{' '}
                                            or drag and drop
                                          </Trans>
-                                        </div>
+                                        </span>
                                      ) : (
                                        <Trans>Default file</Trans>
                                      )}
                                    </p>
                                  </div>
                                  <div className="flex flex-shrink-0 items-center gap-2">
                                    {field.value ? (
                                      <div className="">
                                        <Button
                                          type="button"
                                          variant="destructive"
                                          size="sm"
                                          className="text-xs"
                                          onClick={(e) => {
                                            e.preventDefault();
                                            field.onChange(undefined);
                                          }}
                                        >
                                          <X className="mr-2 h-4 w-4" />
                                          <Trans>Remove</Trans>
                                        </Button>
                                      </div>
-                                    ) : (
+                                      <p className="text-muted-foreground/80 text-xs">
-                                      <Button
+                                        PDF files only
-                                        type="button"
+                                      </p>
-                                        variant="outline"
+                                    </>
-                                        size="sm"
+                                  )}
                                        className="text-xs"
                                        onClick={() => {
                                          const fileInput = document.getElementById(
                                            `template-use-dialog-file-input-${item.envelopeItemId}`,
                                          );
-                                          if (fileInput instanceof HTMLInputElement) {
+                                  {field.value && (
-                                            fileInput.click();
+                                    <div className="text-muted-foreground space-y-1">
-                                          }
+                                      <p className="text-sm font-medium">{field.value.name}</p>
-                                        }}
+                                      <p className="text-muted-foreground/60 text-xs">
-                                      >
+                                        {(field.value.size / (1024 * 1024)).toFixed(2)} MB
-                                        <UploadCloudIcon className="mr-2 h-4 w-4" />
+                                      </p>
-                                        <Trans>Upload</Trans>
+                                    </div>
-                                      </Button>
+                                  )}
                                    )}
                                    <input
                                      type="file"
                                      id={`template-use-dialog-file-input-${item.envelopeItemId}`}
                                      className="hidden"
                                      accept=".pdf,application/pdf"
                                      onChange={(e) => {
                                        const file = e.target.files?.[0];
                                        if (!file) {
                                          field.onChange(undefined);
                                          return;
                                        }
                                        if (file.type !== 'application/pdf') {
                                          form.setError('customDocumentData', {
                                            type: 'manual',
                                            message: _(msg`Please select a PDF file`),
                                          });
                                          return;
                                        }
                                        if (
                                          file.size >
                                          APP_DOCUMENT_UPLOAD_SIZE_LIMIT * 1024 * 1024
                                        ) {
                                          form.setError('customDocumentData', {
                                            type: 'manual',
                                            message: _(
                                              msg`File size exceeds the limit of ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT} MB`,
                                            ),
                                          });
                                          return;
                                        }
                                        field.onChange(file);
                                      }}
                                    />
                                  </div>
                                </div>
-                              </FormControl>
+
-                              <FormMessage />
+                                <input
-                            </FormItem>
+                                  type="file"
-                          )}
+                                  data-testid="template-use-dialog-file-input"
-                        />
+                                  className="absolute h-full w-full opacity-0"
-                      ))
+                                  accept=".pdf,application/pdf"
-                    )}
+                                  onChange={(e) => {
                                    const file = e.target.files?.[0];
                                    if (!file) {
                                      field.onChange(undefined);
                                      return;
                                    }
                                    if (file.type !== 'application/pdf') {
                                      form.setError('customDocumentData', {
                                        type: 'manual',
                                        message: _(msg`Please select a PDF file`),
                                      });
                                      return;
                                    }
                                    if (file.size > APP_DOCUMENT_UPLOAD_SIZE_LIMIT * 1024 * 1024) {
                                      form.setError('customDocumentData', {
                                        type: 'manual',
                                        message: _(
                                          msg`File size exceeds the limit of ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT} MB`,
                                        ),
                                      });
                                      return;
                                    }
                                    field.onChange(file);
                                  }}
                                />
                                {field.value && (
                                  <div className="absolute right-2 top-2">
                                    <Button
                                      type="button"
                                      variant="destructive"
                                      className="h-6 w-6 p-0"
                                      onClick={(e) => {
                                        e.preventDefault();
                                        field.onChange(undefined);
                                      }}
                                    >
                                      <X className="h-4 w-4" />
                                      <div className="sr-only">
                                        <Trans>Clear file</Trans>
                                      </div>
                                    </Button>
                                  </div>
                                )}
                              </label>
                            </div>
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>
                )}
              </div>
--- a/apps/remix/app/components/embed/embed-direct-template-client-page.tsx
+++ b/apps/remix/app/components/embed/embed-direct-template-client-page.tsx
@ -37,7 +37,6 @@ import { ZDirectTemplateEmbedDataSchema } from '~/types/embed-direct-template-sc
 import { injectCss } from '~/utils/css-vars';
 import type { DirectTemplateLocalField } from '../general/direct-template/direct-template-signing-form';
 import { DocumentSigningAttachmentsPopover } from '../general/document-signing/document-signing-attachments-popover';
 import { useRequiredDocumentSigningContext } from '../general/document-signing/document-signing-provider';
 import { EmbedClientLoading } from './embed-client-loading';
 import { EmbedDocumentCompleted } from './embed-document-completed';
@ -45,7 +44,6 @@ import { EmbedDocumentFields } from './embed-document-fields';
 export type EmbedDirectTemplateClientPageProps = {
  token: string;
  envelopeId: string;
  updatedAt: Date;
  documentData: DocumentData;
  recipient: Recipient;
@ -57,10 +55,9 @@ export type EmbedDirectTemplateClientPageProps = {
 export const EmbedDirectTemplateClientPage = ({
  token,
  envelopeId,
  updatedAt,
  documentData,
-  recipient,
+  recipient: _recipient,
  fields,
  metadata,
  hidePoweredBy = false,
@ -324,13 +321,9 @@ export const EmbedDirectTemplateClientPage = ({
  }
  return (
-    <div className="embed--Root relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
+    <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
      {(!hasFinishedInit || !hasDocumentLoaded) && <EmbedClientLoading />}
      <div className="embed--Actions mb-4 flex w-full flex-row-reverse items-baseline justify-between">
        <DocumentSigningAttachmentsPopover envelopeId={envelopeId} token={recipient.token} />
      </div>
      <div className="relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
        {/* Viewer */}
        <div className="flex-1">
--- a/apps/remix/app/components/embed/embed-document-signing-page.tsx
+++ b/apps/remix/app/components/embed/embed-document-signing-page.tsx
@ -37,7 +37,6 @@ import { BrandingLogo } from '~/components/general/branding-logo';
 import { injectCss } from '~/utils/css-vars';
 import { ZSignDocumentEmbedDataSchema } from '../../types/embed-document-sign-schema';
 import { DocumentSigningAttachmentsPopover } from '../general/document-signing/document-signing-attachments-popover';
 import { useRequiredDocumentSigningContext } from '../general/document-signing/document-signing-provider';
 import { DocumentSigningRecipientProvider } from '../general/document-signing/document-signing-recipient-provider';
 import { DocumentSigningRejectDialog } from '../general/document-signing/document-signing-reject-dialog';
@ -49,7 +48,6 @@ import { EmbedDocumentRejected } from './embed-document-rejected';
 export type EmbedSignDocumentClientPageProps = {
  token: string;
  documentId: number;
  envelopeId: string;
  documentData: DocumentData;
  recipient: RecipientWithFields;
  fields: Field[];
@ -64,7 +62,6 @@ export type EmbedSignDocumentClientPageProps = {
 export const EmbedSignDocumentClientPage = ({
  token,
  documentId,
  envelopeId,
  documentData,
  recipient,
  fields,
@ -277,17 +274,15 @@ export const EmbedSignDocumentClientPage = ({
      <div className="embed--Root relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
        {(!hasFinishedInit || !hasDocumentLoaded) && <EmbedClientLoading />}
-        <div className="embed--Actions mb-4 flex w-full flex-row-reverse items-baseline justify-between">
+        {allowDocumentRejection && (
-          <DocumentSigningAttachmentsPopover envelopeId={envelopeId} token={token} />
+          <div className="embed--Actions mb-4 flex w-full flex-row-reverse items-baseline justify-between">
          {allowDocumentRejection && (
            <DocumentSigningRejectDialog
              documentId={documentId}
              token={token}
              onRejected={onDocumentRejected}
            />
-          )}
+          </div>
-        </div>
+        )}
        <div className="embed--DocumentContainer relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
          {/* Viewer */}
--- a/apps/remix/app/components/forms/editor/constants.ts
+++ b/apps/remix/app/components/forms/editor/constants.ts
@ -0,0 +1,31 @@
 // export const numberFormatValues = [
 //   {
 //     label: '123,456,789.00',
 //     value: '123,456,789.00',
 //   },
 //   {
 //     label: '123.456.789,00',
 //     value: '123.456.789,00',
 //   },
 //   {
 //     label: '123456,789.00',
 //     value: '123456,789.00',
 //   },
 // ];
 export const checkboxValidationRules = ['Select at least', 'Select exactly', 'Select at most'];
 export const checkboxValidationLength = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 export const checkboxValidationSigns = [
  {
    label: 'Select at least',
    value: '>=',
  },
  {
    label: 'Select exactly',
    value: '=',
  },
  {
    label: 'Select at most',
    value: '<=',
  },
 ];
--- a/apps/remix/app/components/forms/editor/editor-field-checkbox-form.tsx
+++ b/apps/remix/app/components/forms/editor/editor-field-checkbox-form.tsx
@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { t } from '@lingui/core/macro';
@ -7,19 +7,11 @@ import { PlusIcon, Trash } from 'lucide-react';
 import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 import { validateCheckboxLength } from '@documenso/lib/advanced-fields-validation/validate-checkbox';
 import {
  type TCheckboxFieldMeta as CheckboxFieldMeta,
  DEFAULT_FIELD_FONT_SIZE,
  ZCheckboxFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import {
  checkboxValidationLength,
  checkboxValidationRules,
  checkboxValidationSigns,
 } from '@documenso/ui/primitives/document-flow/field-items-advanced-settings/constants';
 import {
  Form,
  FormControl,
@ -38,8 +30,8 @@ import {
 } from '@documenso/ui/primitives/select';
 import { Separator } from '@documenso/ui/primitives/separator';
 import { checkboxValidationLength, checkboxValidationRules } from './constants';
 import {
  EditorGenericFontSizeField,
  EditorGenericReadOnlyField,
  EditorGenericRequiredField,
 } from './editor-field-generic-field-forms';
@ -52,7 +44,6 @@ const ZCheckboxFieldFormSchema = ZCheckboxFieldMeta.pick({
  required: true,
  values: true,
  readOnly: true,
  fontSize: true,
 })
  .extend({
    validationLength: z.coerce.number().optional(),
@ -99,7 +90,6 @@ export const EditorFieldCheckboxForm = ({
      values: value.values || [{ id: 1, checked: false, value: '' }],
      required: value.required || false,
      readOnly: value.readOnly || false,
      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
    },
  });
@ -109,17 +99,13 @@ export const EditorFieldCheckboxForm = ({
    control,
  });
-  const addValue = (numberOfValues: number = 1) => {
+  const addValue = () => {
    const currentValues = form.getValues('values') || [];
-    const currentMaxId = Math.max(...currentValues.map((val) => val.id));
+    const newId =
      currentValues.length > 0 ? Math.max(...currentValues.map((val) => val.id)) + 1 : 1;
-    const newValues = Array.from({ length: numberOfValues }, (_, index) => ({
+    const newValues = [...currentValues, { id: newId, checked: false, value: '' }];
-      id: currentMaxId + index + 1,
+    form.setValue('values', newValues);
      checked: false,
      value: '',
    }));
    form.setValue('values', [...currentValues, ...newValues]);
  };
  const removeValue = (index: number) => {
@ -146,34 +132,10 @@ export const EditorFieldCheckboxForm = ({
    }
  }, [formValues]);
  const isValidationRuleMetForPreselectedValues = useMemo(() => {
    const preselectedValues = (formValues.values || [])?.filter((value) => value.checked);
    if (formValues.validationLength && formValues.validationRule && preselectedValues.length > 0) {
      const validationRule = checkboxValidationSigns.find(
        (sign) => sign.label === formValues.validationRule,
      );
      if (!validationRule) {
        return false;
      }
      return validateCheckboxLength(
        preselectedValues.length,
        validationRule.value,
        formValues.validationLength,
      );
    }
    return true;
  }, [formValues]);
  return (
    <Form {...form}>
      <form>
        <fieldset className="flex flex-col gap-2">
          <EditorGenericFontSizeField formControl={form.control} />
          <FormField
            control={form.control}
            name="direction"
@ -240,25 +202,7 @@ export const EditorFieldCheckboxForm = ({
                    <FormControl>
                      <Select
                        value={field.value ? String(field.value) : ''}
-                        onValueChange={(value) => {
+                        onValueChange={field.onChange}
                          const validationNumber = Number(value);
                          const currentValues = formValues.values || [];
                          const minimumNumberOfValuesRequired =
                            validationNumber - currentValues.length;
                          if (!formValues.validationRule) {
                            form.setValue('validationRule', checkboxValidationRules[0]);
                          }
                          if (minimumNumberOfValuesRequired > 0) {
                            addValue(minimumNumberOfValuesRequired);
                          }
                          field.onChange(validationNumber);
                          void form.trigger();
                        }}
                      >
                        <SelectTrigger className="text-muted-foreground bg-background mt-5 w-full">
                          <SelectValue placeholder={t`Pick a number`} />
@ -295,7 +239,7 @@ export const EditorFieldCheckboxForm = ({
                <Trans>Checkbox values</Trans>
              </p>
-              <button type="button" onClick={() => addValue()}>
+              <button type="button" onClick={addValue}>
                <PlusIcon className="h-4 w-4" />
              </button>
            </div>
@ -341,16 +285,6 @@ export const EditorFieldCheckboxForm = ({
                </li>
              ))}
            </ul>
            {!isValidationRuleMetForPreselectedValues && (
              <Alert variant="warning">
                <AlertDescription>
                  <Trans>
                    The preselected values will be ignored unless they meet the validation criteria.
                  </Trans>
                </AlertDescription>
              </Alert>
            )}
          </section>
        </fieldset>
      </form>
--- a/apps/remix/app/components/forms/editor/editor-field-dropdown-form.tsx
+++ b/apps/remix/app/components/forms/editor/editor-field-dropdown-form.tsx
@ -8,10 +8,7 @@ import { PlusIcon, Trash } from 'lucide-react';
 import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
-import {
+import { type TDropdownFieldMeta as DropdownFieldMeta } from '@documenso/lib/types/field-meta';
  DEFAULT_FIELD_FONT_SIZE,
  type TDropdownFieldMeta as DropdownFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import {
  Form,
  FormControl,
@ -31,50 +28,56 @@ import {
 import { Separator } from '@documenso/ui/primitives/separator';
 import {
  EditorGenericFontSizeField,
  EditorGenericReadOnlyField,
  EditorGenericRequiredField,
 } from './editor-field-generic-field-forms';
-const ZDropdownFieldFormSchema = z.object({
+const ZDropdownFieldFormSchema = z
-  defaultValue: z.string().optional(),
+  .object({
-  values: z
+    defaultValue: z.string().optional(),
-    .object({
+    values: z
-      value: z.string().min(1, {
+      .object({
-        message: msg`Option value cannot be empty`.id,
+        value: z.string().min(1, {
-      }),
+          message: msg`Option value cannot be empty`.id,
-    })
+        }),
-    .array()
+      })
-    .min(1, {
+      .array()
-      message: msg`Dropdown must have at least one option`.id,
+      .min(1, {
-    })
+        message: msg`Dropdown must have at least one option`.id,
-    .superRefine((values, ctx) => {
+      })
-      const seen = new Map<string, number[]>(); // value → indices
+      .refine(
        (data) => {
          // Todo: Envelopes - This doesn't work.
          console.log({
            data,
          });
-      values.forEach((item, index) => {
+          if (data) {
-        const key = item.value;
+            const values = data.map((item) => item.value);
-        if (!seen.has(key)) {
+            return new Set(values).size === values.length;
          seen.set(key, []);
        }
        seen.get(key)!.push(index);
      });
      for (const [key, indices] of seen) {
        if (indices.length > 1 && key.trim() !== '') {
          for (const i of indices) {
            ctx.addIssue({
              code: z.ZodIssueCode.custom,
              message: msg`Duplicate values are not allowed`.id,
              path: [i, 'value'],
            });
          }
-        }
+          return true;
        },
        {
          message: 'Duplicate values are not allowed',
        },
      ),
    required: z.boolean().optional(),
    readOnly: z.boolean().optional(),
  })
  .refine(
    (data) => {
      // Default value must be one of the available options
      if (data.defaultValue && data.values) {
        return data.values.some((item) => item.value === data.defaultValue);
      }
-    }),
+      return true;
-  required: z.boolean().optional(),
+    },
-  readOnly: z.boolean().optional(),
+    {
-  fontSize: z.number().optional(),
+      message: 'Default value must be one of the available options',
-});
+      path: ['defaultValue'],
    },
  );
 type TDropdownFieldFormSchema = z.infer<typeof ZDropdownFieldFormSchema>;
@ -99,7 +102,6 @@ export const EditorFieldDropdownForm = ({
      values: value.values || [{ value: 'Option 1' }],
      required: value.required || false,
      readOnly: value.readOnly || false,
      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
    },
  });
@ -109,20 +111,7 @@ export const EditorFieldDropdownForm = ({
  const addValue = () => {
    const currentValues = form.getValues('values') || [];
-
+    const newValues = [...currentValues, { value: 'New option' }];
    let newValue = 'New option';
    // Iterate to create a unique value
    for (let i = 0; i < currentValues.length; i++) {
      newValue = `New option ${i + 1}`;
      if (currentValues.some((item) => item.value === `New option ${i + 1}`)) {
        newValue = `New option ${i + 1}`;
      } else {
        break;
      }
    }
    const newValues = [...currentValues, { value: newValue }];
    form.setValue('values', newValues);
  };
@ -138,10 +127,6 @@ export const EditorFieldDropdownForm = ({
    newValues.splice(index, 1);
    form.setValue('values', newValues);
    if (form.getValues('defaultValue') === newValues[index].value) {
      form.setValue('defaultValue', undefined);
    }
  };
  useEffect(() => {
@ -155,13 +140,19 @@ export const EditorFieldDropdownForm = ({
    }
  }, [formValues]);
  const { formState } = form;
  useEffect(() => {
    console.log({
      errors: formState.errors,
      formValues,
    });
  }, [formState, formState.errors, formValues]);
  return (
    <Form {...form}>
      <form>
        <fieldset className="flex flex-col gap-2">
          <EditorGenericFontSizeField formControl={form.control} />
          {/* Todo: Envelopes This is buggy. */}
          <FormField
            control={form.control}
            name="defaultValue"
@ -172,25 +163,20 @@ export const EditorFieldDropdownForm = ({
                </FormLabel>
                <FormControl>
                  <Select
                    // Todo: Envelopes - This is buggy, removing/adding should update the default value.
                    {...field}
-                    value={field.value ?? '-1'}
+                    value={field.value}
-                    onValueChange={(value) => field.onChange(value === '-1' ? undefined : value)}
+                    onValueChange={(val) => field.onChange(val)}
                  >
                    <SelectTrigger className="text-muted-foreground bg-background w-full">
                      <SelectValue placeholder={t`Default Value`} />
                    </SelectTrigger>
                    <SelectContent position="popper">
-                      {(formValues.values || [])
+                      {(formValues.values || []).map((item, index) => (
-                        .filter((item) => item.value)
+                        <SelectItem key={index} value={item.value || ''}>
-                        .map((item, index) => (
+                          {item.value}
-                          <SelectItem key={index} value={item.value || ''}>
+                        </SelectItem>
-                            {item.value}
+                      ))}
                          </SelectItem>
                        ))}
                      <SelectItem value={'-1'}>
                        <Trans>Default Value</Trans>
                      </SelectItem>
                    </SelectContent>
                  </Select>
                </FormControl>
--- a/apps/remix/app/components/forms/editor/editor-field-number-form.tsx
+++ b/apps/remix/app/components/forms/editor/editor-field-number-form.tsx
@ -130,12 +130,6 @@ export const EditorFieldNumberForm = ({
    <Form {...form}>
      <form>
        <fieldset className="flex flex-col gap-2">
          <div className="flex w-full flex-row gap-x-4">
            <EditorGenericFontSizeField className="w-full" formControl={form.control} />
            <EditorGenericTextAlignField className="w-full" formControl={form.control} />
          </div>
          <EditorGenericLabelField formControl={form.control} />
          <FormField
@ -204,6 +198,12 @@ export const EditorFieldNumberForm = ({
            )}
          />
          <div className="flex w-full flex-row gap-x-4">
            <EditorGenericFontSizeField className="w-full" formControl={form.control} />
            <EditorGenericTextAlignField className="w-full" formControl={form.control} />
          </div>
          <div className="mt-1">
            <EditorGenericRequiredField formControl={form.control} />
          </div>
--- a/apps/remix/app/components/forms/editor/editor-field-radio-form.tsx
+++ b/apps/remix/app/components/forms/editor/editor-field-radio-form.tsx
@ -1,62 +1,47 @@
 import { useEffect } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
 import { PlusIcon, Trash } from 'lucide-react';
 import { useForm, useWatch } from 'react-hook-form';
-import type { z } from 'zod';
+import { z } from 'zod';
-import {
+import { type TRadioFieldMeta as RadioFieldMeta } from '@documenso/lib/types/field-meta';
  DEFAULT_FIELD_FONT_SIZE,
  type TRadioFieldMeta as RadioFieldMeta,
  ZRadioFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
-import {
+import { Form, FormControl, FormField, FormItem } from '@documenso/ui/primitives/form/form';
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
 } from '@documenso/ui/primitives/select';
 import { Separator } from '@documenso/ui/primitives/separator';
 import {
  EditorGenericFontSizeField,
  EditorGenericReadOnlyField,
  EditorGenericRequiredField,
 } from './editor-field-generic-field-forms';
-const ZRadioFieldFormSchema = ZRadioFieldMeta.pick({
+const ZRadioFieldFormSchema = z
-  label: true,
+  .object({
-  direction: true,
+    label: z.string().optional(),
-  values: true,
+    values: z
-  required: true,
+      .object({ id: z.number(), checked: z.boolean(), value: z.string() })
-  readOnly: true,
+      .array()
-  fontSize: true,
+      .min(1)
-}).refine(
+      .optional(),
-  (data) => {
+    required: z.boolean().optional(),
-    // There cannot be more than one checked option
+    readOnly: z.boolean().optional(),
-    if (data.values) {
+  })
-      const checkedValues = data.values.filter((option) => option.checked);
+  .refine(
-      return checkedValues.length <= 1;
+    (data) => {
-    }
+      // There cannot be more than one checked option
-    return true;
+      if (data.values) {
-  },
+        const checkedValues = data.values.filter((option) => option.checked);
-  {
+        return checkedValues.length <= 1;
-    message: 'There cannot be more than one checked option',
+      }
-    path: ['values'],
+      return true;
-  },
+    },
-);
+    {
      message: 'There cannot be more than one checked option',
      path: ['values'],
    },
  );
 type TRadioFieldFormSchema = z.infer<typeof ZRadioFieldFormSchema>;
@ -68,12 +53,9 @@ export type EditorFieldRadioFormProps = {
 export const EditorFieldRadioForm = ({
  value = {
    type: 'radio',
    direction: 'vertical',
  },
  onValueChange,
 }: EditorFieldRadioFormProps) => {
  const { t } = useLingui();
  const form = useForm<TRadioFieldFormSchema>({
    resolver: zodResolver(ZRadioFieldFormSchema),
    mode: 'onChange',
@ -82,8 +64,6 @@ export const EditorFieldRadioForm = ({
      values: value.values || [{ id: 1, checked: false, value: 'Default value' }],
      required: value.required || false,
      readOnly: value.readOnly || false,
      direction: value.direction || 'vertical',
      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
    },
  });
@ -127,37 +107,7 @@ export const EditorFieldRadioForm = ({
  return (
    <Form {...form}>
      <form>
-        <fieldset className="flex flex-col gap-2">
+        <fieldset className="flex flex-col gap-2 pb-2">
          <EditorGenericFontSizeField formControl={form.control} />
          <FormField
            control={form.control}
            name="direction"
            render={({ field }) => (
              <FormItem>
                <FormLabel>
                  <Trans>Direction</Trans>
                </FormLabel>
                <FormControl>
                  <Select value={field.value} onValueChange={field.onChange}>
                    <SelectTrigger className="text-muted-foreground bg-background w-full">
                      <SelectValue placeholder={t`Select direction`} />
                    </SelectTrigger>
                    <SelectContent position="popper">
                      <SelectItem value="vertical">
                        <Trans>Vertical</Trans>
                      </SelectItem>
                      <SelectItem value="horizontal">
                        <Trans>Horizontal</Trans>
                      </SelectItem>
                    </SelectContent>
                  </Select>
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <EditorGenericRequiredField formControl={form.control} />
          <EditorGenericReadOnlyField formControl={form.control} />
--- a/apps/remix/app/components/forms/editor/editor-field-signature-form.tsx
+++ b/apps/remix/app/components/forms/editor/editor-field-signature-form.tsx
@ -1,74 +0,0 @@
 import { useEffect } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans } from '@lingui/react/macro';
 import { useForm, useWatch } from 'react-hook-form';
 import type { z } from 'zod';
 import {
  DEFAULT_FIELD_FONT_SIZE,
  type TSignatureFieldMeta,
  ZSignatureFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import { Form } from '@documenso/ui/primitives/form/form';
 import { EditorGenericFontSizeField } from './editor-field-generic-field-forms';
 const ZSignatureFieldFormSchema = ZSignatureFieldMeta.pick({
  fontSize: true,
 });
 type TSignatureFieldFormSchema = z.infer<typeof ZSignatureFieldFormSchema>;
 type EditorFieldSignatureFormProps = {
  value: TSignatureFieldMeta | undefined;
  onValueChange: (value: TSignatureFieldMeta) => void;
 };
 export const EditorFieldSignatureForm = ({
  value = {
    type: 'signature',
  },
  onValueChange,
 }: EditorFieldSignatureFormProps) => {
  const form = useForm<TSignatureFieldFormSchema>({
    resolver: zodResolver(ZSignatureFieldFormSchema),
    mode: 'onChange',
    defaultValues: {
      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
    },
  });
  const { control } = form;
  const formValues = useWatch({
    control,
  });
  // Dupecode/Inefficient: Done because native isValid won't work for our usecase.
  useEffect(() => {
    const validatedFormValues = ZSignatureFieldFormSchema.safeParse(formValues);
    if (validatedFormValues.success) {
      onValueChange({
        type: 'signature',
        ...validatedFormValues.data,
      });
    }
  }, [formValues]);
  return (
    <Form {...form}>
      <form>
        <fieldset className="flex flex-col gap-2">
          <div>
            <EditorGenericFontSizeField formControl={form.control} />
            <p className="text-muted-foreground mt-0.5 text-xs">
              <Trans>The typed signature font size</Trans>
            </p>
          </div>
        </fieldset>
      </form>
    </Form>
  );
 };
--- a/apps/remix/app/components/forms/editor/editor-field-text-form.tsx
+++ b/apps/remix/app/components/forms/editor/editor-field-text-form.tsx
@ -5,10 +5,7 @@ import { Trans, useLingui } from '@lingui/react/macro';
 import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
-import {
+import { type TTextFieldMeta as TextFieldMeta } from '@documenso/lib/types/field-meta';
  DEFAULT_FIELD_FONT_SIZE,
  type TTextFieldMeta as TextFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import {
  Form,
  FormControl,
@ -72,7 +69,7 @@ export const EditorFieldTextForm = ({
      placeholder: value.placeholder || '',
      text: value.text || '',
      characterLimit: value.characterLimit || 0,
-      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
+      fontSize: value.fontSize || 14,
      textAlign: value.textAlign || 'left',
      required: value.required || false,
      readOnly: value.readOnly || false,
@ -101,12 +98,6 @@ export const EditorFieldTextForm = ({
    <Form {...form}>
      <form>
        <fieldset className="flex flex-col gap-2">
          <div className="flex w-full flex-row gap-x-4">
            <EditorGenericFontSizeField className="w-full" formControl={form.control} />
            <EditorGenericTextAlignField className="w-full" formControl={form.control} />
          </div>
          <FormField
            control={form.control}
            name="label"
@ -182,6 +173,12 @@ export const EditorFieldTextForm = ({
            )}
          />
          <div className="flex w-full flex-row gap-x-4">
            <EditorGenericFontSizeField className="w-full" formControl={form.control} />
            <EditorGenericTextAlignField className="w-full" formControl={form.control} />
          </div>
          <div className="mt-1">
            <EditorGenericRequiredField formControl={form.control} />
          </div>
--- a/apps/remix/app/components/forms/signin.tsx
+++ b/apps/remix/app/components/forms/signin.tsx
@ -70,7 +70,6 @@ export type SignInFormProps = {
  className?: string;
  initialEmail?: string;
  isGoogleSSOEnabled?: boolean;
  isMicrosoftSSOEnabled?: boolean;
  isOIDCSSOEnabled?: boolean;
  oidcProviderLabel?: string;
  returnTo?: string;
@ -80,7 +79,6 @@ export const SignInForm = ({
  className,
  initialEmail,
  isGoogleSSOEnabled,
  isMicrosoftSSOEnabled,
  isOIDCSSOEnabled,
  oidcProviderLabel,
  returnTo,
@ -97,8 +95,6 @@ export const SignInForm = ({
    'totp' | 'backup'
  >('totp');
  const hasSocialAuthEnabled = isGoogleSSOEnabled || isMicrosoftSSOEnabled || isOIDCSSOEnabled;
  const [isPasskeyLoading, setIsPasskeyLoading] = useState(false);
  const redirectPath = useMemo(() => {
@ -275,22 +271,6 @@ export const SignInForm = ({
    }
  };
  const onSignInWithMicrosoftClick = async () => {
    try {
      await authClient.microsoft.signIn({
        redirectPath,
      });
    } catch (err) {
      toast({
        title: _(msg`An unknown error occurred`),
        description: _(
          msg`We encountered an unknown error while attempting to sign you In. Please try again later.`,
        ),
        variant: 'destructive',
      });
    }
  };
  const onSignInWithOIDCClick = async () => {
    try {
      await authClient.oidc.signIn({
@ -383,7 +363,7 @@ export const SignInForm = ({
            {isSubmitting ? <Trans>Signing in...</Trans> : <Trans>Sign In</Trans>}
          </Button>
-          {hasSocialAuthEnabled && (
+          {(isGoogleSSOEnabled || isOIDCSSOEnabled) && (
            <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
              <div className="bg-border h-px flex-1" />
              <span className="text-muted-foreground bg-transparent">
@ -407,20 +387,6 @@ export const SignInForm = ({
            </Button>
          )}
          {isMicrosoftSSOEnabled && (
            <Button
              type="button"
              size="lg"
              variant="outline"
              className="bg-background text-muted-foreground border"
              disabled={isSubmitting}
              onClick={onSignInWithMicrosoftClick}
            >
              <img className="mr-2 h-4 w-4" alt="Microsoft Logo" src={'/static/microsoft.svg'} />
              Microsoft
            </Button>
          )}
          {isOIDCSSOEnabled && (
            <Button
              type="button"
--- a/apps/remix/app/components/forms/signup.tsx
+++ b/apps/remix/app/components/forms/signup.tsx
@ -66,7 +66,6 @@ export type SignUpFormProps = {
  className?: string;
  initialEmail?: string;
  isGoogleSSOEnabled?: boolean;
  isMicrosoftSSOEnabled?: boolean;
  isOIDCSSOEnabled?: boolean;
 };
@ -74,7 +73,6 @@ export const SignUpForm = ({
  className,
  initialEmail,
  isGoogleSSOEnabled,
  isMicrosoftSSOEnabled,
  isOIDCSSOEnabled,
 }: SignUpFormProps) => {
  const { _ } = useLingui();
@ -86,8 +84,6 @@ export const SignUpForm = ({
  const utmSrc = searchParams.get('utm_source') ?? null;
  const hasSocialAuthEnabled = isGoogleSSOEnabled || isMicrosoftSSOEnabled || isOIDCSSOEnabled;
  const form = useForm<TSignUpFormSchema>({
    values: {
      name: '',
@ -152,20 +148,6 @@ export const SignUpForm = ({
    }
  };
  const onSignUpWithMicrosoftClick = async () => {
    try {
      await authClient.microsoft.signIn();
    } catch (err) {
      toast({
        title: _(msg`An unknown error occurred`),
        description: _(
          msg`We encountered an unknown error while attempting to sign you Up. Please try again later.`,
        ),
        variant: 'destructive',
      });
    }
  };
  const onSignUpWithOIDCClick = async () => {
    try {
      await authClient.oidc.signIn();
@ -245,7 +227,7 @@ export const SignUpForm = ({
            <fieldset
              className={cn(
                'flex h-[550px] w-full flex-col gap-y-4',
-                hasSocialAuthEnabled && 'h-[650px]',
+                (isGoogleSSOEnabled || isOIDCSSOEnabled) && 'h-[650px]',
              )}
              disabled={isSubmitting}
            >
@ -320,7 +302,7 @@ export const SignUpForm = ({
                )}
              />
-              {hasSocialAuthEnabled && (
+              {(isGoogleSSOEnabled || isOIDCSSOEnabled) && (
                <>
                  <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
                    <div className="bg-border h-px flex-1" />
@ -348,26 +330,6 @@ export const SignUpForm = ({
                </>
              )}
              {isMicrosoftSSOEnabled && (
                <>
                  <Button
                    type="button"
                    size="lg"
                    variant={'outline'}
                    className="bg-background text-muted-foreground border"
                    disabled={isSubmitting}
                    onClick={onSignUpWithMicrosoftClick}
                  >
                    <img
                      className="mr-2 h-4 w-4"
                      alt="Microsoft Logo"
                      src={'/static/microsoft.svg'}
                    />
                    <Trans>Sign Up with Microsoft</Trans>
                  </Button>
                </>
              )}
              {isOIDCSSOEnabled && (
                <>
                  <Button
--- a/apps/remix/app/components/forms/subscription-claim-form.tsx
+++ b/apps/remix/app/components/forms/subscription-claim-form.tsx
@ -39,7 +39,6 @@ export const SubscriptionClaimForm = ({
      name: subscriptionClaim.name,
      teamCount: subscriptionClaim.teamCount,
      memberCount: subscriptionClaim.memberCount,
      envelopeItemCount: subscriptionClaim.envelopeItemCount,
      flags: subscriptionClaim.flags,
    },
  });
@ -112,30 +111,6 @@ export const SubscriptionClaimForm = ({
            )}
          />
          <FormField
            control={form.control}
            name="envelopeItemCount"
            render={({ field }) => (
              <FormItem>
                <FormLabel>
                  <Trans>Envelope Item Count</Trans>
                </FormLabel>
                <FormControl>
                  <Input
                    type="number"
                    min={1}
                    {...field}
                    onChange={(e) => field.onChange(parseInt(e.target.value, 10) || 0)}
                  />
                </FormControl>
                <FormDescription>
                  <Trans>Maximum number of uploaded files per envelope allowed</Trans>
                </FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />
          <div>
            <FormLabel>
              <Trans>Feature Flags</Trans>
--- a/apps/remix/app/components/general/branding-logo-icon.tsx
+++ b/apps/remix/app/components/general/branding-logo-icon.tsx
@ -1,17 +0,0 @@
 import type { SVGAttributes } from 'react';
 export type LogoProps = SVGAttributes<SVGSVGElement>;
 export const BrandingLogoIcon = ({ ...props }: LogoProps) => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 84" {...props}>
      <g fill="currentColor">
        <path d="M35.53 12.152c-.968.879-2.038 1.91-3.261 3.118a4.55 4.55 0 0 1-2.722.97l-4.098.079 1.194-1.194C33.883 7.885 37.502 4.265 42 4.265s8.118 3.62 15.357 10.86l1.192 1.192-3.957-.075a4.55 4.55 0 0 1-3.004-1.209l-2.373-2.194a69 69 0 0 0-.66-.61l-.128-.119h-.002a35 35 0 0 0-2.244-1.892C44.17 8.684 43 8.338 42 8.338s-2.17.346-4.18 1.88a35 35 0 0 0-2.275 1.92zM71.77 35.444a69 69 0 0 0-.608-.658l-2.196-2.374a4.55 4.55 0 0 1-1.208-3.002l-.077-3.961 1.194 1.194c7.24 7.24 10.86 10.859 10.86 15.357s-3.62 8.118-10.86 15.357l-1.194 1.194.077-3.961a4.55 4.55 0 0 1 1.209-3.002l2.195-2.373q.315-.338.609-.66l.119-.128v-.002a35 35 0 0 0 1.892-2.244c1.534-2.01 1.88-3.18 1.88-4.181s-.346-2.17-1.88-4.18a35 35 0 0 0-1.892-2.245v-.002zM48.51 71.813q.362-.33.747-.69l2.331-2.157a4.55 4.55 0 0 1 3.003-1.208l3.959-.076-1.193 1.193c-7.24 7.24-10.859 10.86-15.357 10.86s-8.118-3.62-15.357-10.86l-1.194-1.194 3.97.076a4.55 4.55 0 0 1 2.991 1.2l1.601 1.47c1.461 1.4 2.69 2.502 3.808 3.355 2.01 1.534 3.18 1.88 4.181 1.88s2.17-.346 4.18-1.88a35 35 0 0 0 2.275-1.92zM12.156 48.476q.364.4.763.825l2.115 2.287a4.55 4.55 0 0 1 1.209 3.002l.076 3.961-1.194-1.194C7.885 50.117 4.265 46.498 4.265 42s3.62-8.118 10.86-15.357l1.193-1.193-.075 3.959a4.55 4.55 0 0 1-1.21 3.004l-2.18 2.357q-.325.346-.626.676l-.117.127v.002a35 35 0 0 0-1.892 2.244C8.684 39.83 8.338 41 8.338 42s.346 2.17 1.88 4.18a35 35 0 0 0 1.92 2.275z" />
        <path d="m12.138 35.543 2.896-3.13a4.55 4.55 0 0 0 1.186-2.626c.012-1.61.038-3.013.096-4.254l.003-.17.006-.005c.053-1.072.131-2.021.246-2.875.337-2.506.92-3.578 1.627-4.286s1.78-1.29 4.285-1.626c.87-.117 1.838-.196 2.935-.25l.002-.002h.06c1.285-.062 2.746-.089 4.43-.1a4.55 4.55 0 0 0 2.711-1.257l2.923-2.825h-1.688c-10.238 0-15.357 0-18.538 3.18-3.18 3.181-3.18 8.3-3.18 18.539zM12.138 48.456v1.688c0 10.239 0 15.358 3.18 18.538s8.3 3.18 18.538 3.18h16.289c10.238 0 15.357 0 18.538-3.18 3.18-3.18 3.18-8.3 3.18-18.537v-1.69l-2.897 3.133a4.55 4.55 0 0 0-1.185 2.618c-.012 1.645-.039 3.075-.1 4.335v.04h-.001a35 35 0 0 1-.25 2.936c-.337 2.506-.92 3.578-1.627 4.286s-1.78 1.29-4.285 1.626c-.855.115-1.804.194-2.876.247l-.005.005-.149.003c-1.246.058-2.658.085-4.277.097-.976.1-1.897.515-2.623 1.185l-3.132 2.897H35.573l-3.163-2.906a4.55 4.55 0 0 0-2.61-1.176 110 110 0 0 1-4.324-.1h-.056l-.002-.002a35 35 0 0 1-2.935-.25c-2.505-.336-3.578-.919-4.285-1.626-.708-.708-1.29-1.78-1.627-4.286a35 35 0 0 1-.25-2.935l-.002-.002-.001-.075c-.06-1.251-.086-2.668-.098-4.296a4.55 4.55 0 0 0-1.186-2.621zM67.781 29.794a4.55 4.55 0 0 0 1.185 2.618l2.897 3.132v-1.688c0-10.239 0-15.358-3.18-18.538s-8.3-3.18-18.538-3.18h-1.689l3.132 2.895a4.55 4.55 0 0 0 2.627 1.186c1.6.012 2.997.038 4.232.096l.247.004.008.008a34 34 0 0 1 2.816.244c2.505.337 3.578.919 4.285 1.626.708.708 1.29 1.78 1.627 4.286.117.87.196 1.839.25 2.936l.001.04c.061 1.26.088 2.69.1 4.335M38.91 23.96l-2.747 2.33a2.9 2.9 0 0 1-1.747.689l-4.597.214 2.397-2.397c4.627-4.627 6.94-6.94 9.815-6.94s5.188 2.313 9.815 6.94l2.383 2.382-4.662-.202a2.9 2.9 0 0 1-1.773-.703l-2.074-1.789c-.728-.685-1.345-1.226-1.908-1.656-1.154-.88-1.592-.9-1.78-.9-.19 0-.627.02-1.781.9l-.055.042h-.003l-.027.023c-.387.3-.8.652-1.257 1.067" />
        <path d="M61.023 39.995c-.785-.992-1.911-2.163-3.542-3.803a2.9 2.9 0 0 1-.44-1.426l-.202-4.977 2.369 2.368c4.627 4.627 6.94 6.94 6.94 9.815s-2.313 5.188-6.94 9.815l-2.382 2.381.23-4.757a2.9 2.9 0 0 1 .727-1.787l1.742-1.968a28 28 0 0 0 1.387-1.569l.215-.242v-.03l.049-.062c.88-1.154.9-1.592.9-1.781 0-.19-.02-.627-.9-1.78l-.049-.064v-.024zM22.946 40.124l3.175-3.454c.45-.489.719-1.117.762-1.78l.175-2.71c.027-.86.071-1.584.144-2.216l.012-.192.013-.013.009-.065c.193-1.438.488-1.762.622-1.896s.457-.429 1.896-.622c.461-.062.974-.106 1.555-.138l3.9-.385a2.9 2.9 0 0 0 1.678-.75l3.296-3.017h-3.357c-6.543 0-9.815 0-11.847 2.033-1.732 1.732-1.988 4.363-2.026 9.15q-.009 1.246-.007 2.698v3.356" />
        <path d="M22.946 43.82v3.357c0 .97 0 1.866.006 2.698.038 4.787.295 7.418 2.027 9.15 1.731 1.732 4.362 1.988 9.15 2.026q1.246.009 2.697.007h10.411q1.45.002 2.697-.007c4.788-.038 7.419-.294 9.15-2.026 2.033-2.033 2.033-5.304 2.033-11.848V43.81l-3.384 3.67a2.9 2.9 0 0 0-.69 1.29c-.006 2.38-.038 4.033-.193 5.306l-.002.068-.008.008-.012.098c-.194 1.438-.489 1.762-.623 1.896-.133.133-.457.429-1.895.622l-.099.013-.008.008-.114.007c-.724.086-1.57.133-2.602.159l-2.32.141c-.661.04-1.288.305-1.778.75l-3.538 3.212h-3.697l-3.536-3.306a2.9 2.9 0 0 0-1.69-.769q-.41 0-.79-.004c-1.906-.016-3.288-.063-4.384-.21-1.439-.194-1.762-.49-1.896-.623-.134-.134-.429-.458-.622-1.896l-.009-.065-.012-.013-.002-.027-.004-.108c-.13-1.084-.171-2.442-.185-4.283l-.02-.472a2.9 2.9 0 0 0-.755-1.833zM57.01 32.35l.19 2.586c.049.652.315 1.27.757 1.751l3.16 3.447v-3.367c0-6.544 0-9.815-2.032-11.848s-5.305-2.033-11.848-2.033H43.85l3.391 3.09c.475.432 1.08.696 1.721.748l3.933.322q.562.033 1.045.085l.29.024.013.012.066.01c1.438.192 1.762.488 1.895.621.134.134.43.458.623 1.896.098.733.152 1.595.182 2.655" />
        <path d="m27.226 54.158-.013-.013.002.027.012.013zM29.849 56.78l4.289.199c-1.852-.015-3.208-.06-4.29-.198M27.044 49.476a3 3 0 0 0-.08-.57 3 3 0 0 1 .04.376l.02.472c.014 1.84.056 3.2.185 4.283l.004.108.013.013zM17.915 41.972c0 2.45 1.679 4.491 5.038 7.903q-.009-1.246-.007-2.698v-3.344l-.007-.008v-.005l-.052-.068c-.88-1.153-.9-1.59-.9-1.78s.02-.627.9-1.78l.059-.077v-3.348q-.001-1.452.006-2.698c-3.358 3.412-5.037 5.454-5.037 7.903M40.25 61.116l-.048-.037h-.01l-.022-.021h-3.344q-1.45.002-2.697-.007c3.412 3.358 5.453 5.038 7.902 5.038 2.45 0 4.491-1.68 7.903-5.038q-1.246.009-2.697.007h-3.35l-.075.058c-1.154.88-1.592.9-1.78.9-.19 0-.627-.02-1.781-.9" />
      </g>
    </svg>
  );
 };
--- a/apps/remix/app/components/general/document-signing/document-signing-attachments-popover.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-attachments-popover.tsx
@ -1,83 +0,0 @@
 import { Trans } from '@lingui/react/macro';
 import { ExternalLink, PaperclipIcon } from 'lucide-react';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
 export type DocumentSigningAttachmentsPopoverProps = {
  envelopeId: string;
  token: string;
  trigger?: React.ReactNode;
 };
 export const DocumentSigningAttachmentsPopover = ({
  envelopeId,
  token,
  trigger,
 }: DocumentSigningAttachmentsPopoverProps) => {
  const { data: attachments } = trpc.envelope.attachment.find.useQuery({
    envelopeId,
    token,
  });
  if (!attachments || attachments.data.length === 0) {
    return null;
  }
  return (
    <Popover>
      <PopoverTrigger asChild>
        {trigger ?? (
          <Button variant="outline" className="gap-2">
            <PaperclipIcon className="h-4 w-4" />
            <span>
              <Trans>Attachments</Trans>{' '}
              {attachments && attachments.data.length > 0 && (
                <span className="ml-1">({attachments.data.length})</span>
              )}
            </span>
          </Button>
        )}
      </PopoverTrigger>
      <PopoverContent className="w-96" align="start">
        <div className="space-y-4">
          <div>
            <h4 className="font-medium">
              <Trans>Attachments</Trans>
            </h4>
            <p className="text-muted-foreground mt-1 text-sm">
              <Trans>Documents and resources related to this envelope.</Trans>
            </p>
          </div>
          <div className="space-y-2">
            {attachments?.data.map((attachment) => (
              <a
                key={attachment.id}
                href={attachment.data}
                title={attachment.data}
                target="_blank"
                rel="noopener noreferrer"
                className="border-border hover:bg-muted/50 group flex items-center justify-between rounded-md border px-3 py-2.5 transition duration-200"
              >
                <div className="flex flex-1 items-center gap-2.5">
                  <div className="bg-muted rounded p-2">
                    <PaperclipIcon className="h-4 w-4" />
                  </div>
                  <span className="text-muted-foreground hover:text-foreground block truncate text-sm underline">
                    {attachment.label}
                  </span>
                </div>
                <ExternalLink className="h-4 w-4 opacity-0 transition duration-200 group-hover:opacity-100" />
              </a>
            ))}
          </div>
        </div>
      </PopoverContent>
    </Popover>
  );
 };
--- 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
@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
 import type { Field, Recipient } from '@prisma/client';
 import { RecipientRole } from '@prisma/client';
 import { useForm } from 'react-hook-form';
@ -18,9 +18,7 @@ import { Button } from '@documenso/ui/primitives/button';
 import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
@ -47,7 +45,6 @@ export type DocumentSigningCompleteDialogProps = {
  onSignatureComplete: (
    nextSigner?: { name: string; email: string },
    accessAuthOptions?: TRecipientAccessAuth,
    directRecipient?: { name: string; email: string },
  ) => void | Promise<void>;
  recipient: Pick<Recipient, 'name' | 'email' | 'role' | 'token'>;
  disabled?: boolean;
@ -56,12 +53,6 @@ export type DocumentSigningCompleteDialogProps = {
    name: string;
    email: string;
  };
  directTemplatePayload?: {
    name: string;
    email: string;
  };
  buttonSize?: 'sm' | 'lg';
  position?: 'start' | 'end' | 'center';
 };
 const ZNextSignerFormSchema = z.object({
@ -72,13 +63,6 @@ const ZNextSignerFormSchema = z.object({
 type TNextSignerFormSchema = z.infer<typeof ZNextSignerFormSchema>;
 const ZDirectRecipientFormSchema = z.object({
  name: z.string(),
  email: z.string().email('Invalid email address'),
 });
 type TDirectRecipientFormSchema = z.infer<typeof ZDirectRecipientFormSchema>;
 export const DocumentSigningCompleteDialog = ({
  isSubmitting,
  documentTitle,
@ -88,19 +72,15 @@ export const DocumentSigningCompleteDialog = ({
  recipient,
  disabled = false,
  allowDictateNextSigner = false,
  directTemplatePayload,
  defaultNextSigner,
  buttonSize = 'lg',
  position,
 }: DocumentSigningCompleteDialogProps) => {
  const { t } = useLingui();
  const [showDialog, setShowDialog] = useState(false);
  const [isEditingNextSigner, setIsEditingNextSigner] = useState(false);
  const [showTwoFactorForm, setShowTwoFactorForm] = useState(false);
  const [twoFactorValidationError, setTwoFactorValidationError] = useState<string | null>(null);
-  const { derivedRecipientAccessAuth } = useRequiredDocumentSigningAuthContext();
+  const { derivedRecipientAccessAuth, user } = useRequiredDocumentSigningAuthContext();
  const form = useForm<TNextSignerFormSchema>({
    resolver: allowDictateNextSigner ? zodResolver(ZNextSignerFormSchema) : undefined,
@ -110,14 +90,6 @@ export const DocumentSigningCompleteDialog = ({
    },
  });
  const directRecipientForm = useForm<TDirectRecipientFormSchema>({
    resolver: zodResolver(ZDirectRecipientFormSchema),
    defaultValues: {
      name: directTemplatePayload?.name ?? '',
      email: directTemplatePayload?.email ?? '',
    },
  });
  const isComplete = useMemo(() => !fieldsContainUnsignedRequiredField(fields), [fields]);
  const completionRequires2FA = useMemo(
@ -137,23 +109,12 @@ export const DocumentSigningCompleteDialog = ({
      });
    }
    setIsEditingNextSigner(false);
    setShowDialog(open);
  };
  const onFormSubmit = async (data: TNextSignerFormSchema) => {
    try {
      let directRecipient: { name: string; email: string } | undefined;
      if (directTemplatePayload && !directTemplatePayload.email) {
        const isFormValid = await directRecipientForm.trigger();
        if (!isFormValid) {
          return;
        }
        directRecipient = directRecipientForm.getValues();
      }
      // Check if 2FA is required
      if (completionRequires2FA && !data.accessAuthOptions) {
        setShowTwoFactorForm(true);
@ -165,7 +126,7 @@ export const DocumentSigningCompleteDialog = ({
          ? { name: data.name, email: data.email }
          : undefined;
-      await onSignatureComplete(nextSigner, data.accessAuthOptions, directRecipient);
+      await onSignatureComplete(nextSigner, data.accessAuthOptions);
    } catch (error) {
      const err = AppError.parseError(error);
@ -191,19 +152,21 @@ export const DocumentSigningCompleteDialog = ({
    void form.handleSubmit(onFormSubmit)();
  };
  const isNextSignerValid = !allowDictateNextSigner || (form.watch('name') && form.watch('email'));
  return (
    <Dialog open={showDialog} onOpenChange={handleOpenChange}>
      <DialogTrigger asChild>
        <Button
          className="w-full"
          type="button"
-          size={buttonSize}
+          size="lg"
          onClick={fieldsValidated}
          loading={isSubmitting}
          disabled={disabled}
        >
          {match({ isComplete, role: recipient.role })
-            .with({ isComplete: false }, () => <Trans>Next Field</Trans>)
+            .with({ isComplete: false }, () => <Trans>Next field</Trans>)
            .with({ isComplete: true, role: RecipientRole.APPROVER }, () => <Trans>Approve</Trans>)
            .with({ isComplete: true, role: RecipientRole.VIEWER }, () => (
              <Trans>Mark as viewed</Trans>
@ -213,98 +176,106 @@ export const DocumentSigningCompleteDialog = ({
        </Button>
      </DialogTrigger>
-      <DialogContent position={position}>
+      <DialogContent>
        <DialogHeader>
          <DialogTitle>
            <Trans>Are you sure?</Trans>
          </DialogTitle>
          <DialogDescription>
            <div className="text-muted-foreground max-w-[50ch]">
              {match(recipient.role)
                .with(RecipientRole.VIEWER, () => (
                  <span className="inline-flex flex-wrap">
                    <Trans>You are about to complete viewing the following document</Trans>
                  </span>
                ))
                .with(RecipientRole.SIGNER, () => (
                  <span className="inline-flex flex-wrap">
                    <Trans>You are about to complete signing the following document</Trans>
                  </span>
                ))
                .with(RecipientRole.APPROVER, () => (
                  <span className="inline-flex flex-wrap">
                    <Trans>You are about to complete approving the following document</Trans>
                  </span>
                ))
                .with(RecipientRole.ASSISTANT, () => (
                  <span className="inline-flex flex-wrap">
                    <Trans>You are about to complete assisting the following document</Trans>
                  </span>
                ))
                .with(RecipientRole.CC, () => null)
                .exhaustive()}
            </div>
          </DialogDescription>
        </DialogHeader>
        <div className="border-border bg-muted/50 rounded-lg border p-4 text-center">
          <p className="text-muted-foreground text-sm font-medium">{documentTitle}</p>
        </div>
        {!showTwoFactorForm && (
-          <>
+          <Form {...form}>
-            <fieldset disabled={form.formState.isSubmitting} className="border-none p-0">
+            <form onSubmit={form.handleSubmit(onFormSubmit)}>
-              {directTemplatePayload && !directTemplatePayload.email && (
+              <fieldset disabled={form.formState.isSubmitting} className="border-none p-0">
-                <Form {...directRecipientForm}>
+                <DialogTitle>
-                  <div className="mb-4 flex flex-col gap-4">
+                  <div className="text-foreground text-xl font-semibold">
-                    <div className="flex flex-col gap-4 md:flex-row">
+                    {match(recipient.role)
-                      <FormField
+                      .with(RecipientRole.VIEWER, () => <Trans>Complete Viewing</Trans>)
-                        control={directRecipientForm.control}
+                      .with(RecipientRole.SIGNER, () => <Trans>Complete Signing</Trans>)
-                        name="name"
+                      .with(RecipientRole.APPROVER, () => <Trans>Complete Approval</Trans>)
-                        render={({ field }) => (
+                      .with(RecipientRole.CC, () => <Trans>Complete Viewing</Trans>)
-                          <FormItem className="flex-1">
+                      .with(RecipientRole.ASSISTANT, () => <Trans>Complete Assisting</Trans>)
-                            <FormLabel>
+                      .exhaustive()}
                              <Trans>Your Name</Trans>
                            </FormLabel>
                            <FormControl>
                              <Input {...field} className="mt-2" placeholder={t`Enter your name`} />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={directRecipientForm.control}
                        name="email"
                        render={({ field }) => (
                          <FormItem className="flex-1">
                            <FormLabel>
                              <Trans>Your Email</Trans>
                            </FormLabel>
                            <FormControl>
                              <Input
                                {...field}
                                type="email"
                                className="mt-2"
                                placeholder={t`Enter your email`}
                              />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                    </div>
                  </div>
-                </Form>
+                </DialogTitle>
              )}
-              <Form {...form}>
+                <div className="text-muted-foreground max-w-[50ch]">
-                <form onSubmit={form.handleSubmit(onFormSubmit)}>
+                  {match(recipient.role)
-                  {allowDictateNextSigner && defaultNextSigner && (
+                    .with(RecipientRole.VIEWER, () => (
-                    <div className="mb-4 flex flex-col gap-4">
+                      <span>
-                      {/* Todo: Envelopes - Should we say "The next recipient to sign this document will be"? */}
+                        <Trans>
                          <span className="inline-flex flex-wrap">
                            You are about to complete viewing "
                            <span className="inline-block max-w-[11rem] truncate align-baseline">
                              {documentTitle}
                            </span>
                            ".
                          </span>
                          <br /> Are you sure?
                        </Trans>
                      </span>
                    ))
                    .with(RecipientRole.SIGNER, () => (
                      <span>
                        <Trans>
                          <span className="inline-flex flex-wrap">
                            You are about to complete signing "
                            <span className="inline-block max-w-[11rem] truncate align-baseline">
                              {documentTitle}
                            </span>
                            ".
                          </span>
                          <br /> Are you sure?
                        </Trans>
                      </span>
                    ))
                    .with(RecipientRole.APPROVER, () => (
                      <span>
                        <Trans>
                          <span className="inline-flex flex-wrap">
                            You are about to complete approving{' '}
                            <span className="inline-block max-w-[11rem] truncate align-baseline">
                              "{documentTitle}"
                            </span>
                            .
                          </span>
                          <br /> Are you sure?
                        </Trans>
                      </span>
                    ))
                    .otherwise(() => (
                      <span>
                        <Trans>
                          <span className="inline-flex flex-wrap">
                            You are about to complete viewing "
                            <span className="inline-block max-w-[11rem] truncate align-baseline">
                              {documentTitle}
                            </span>
                            ".
                          </span>
                          <br /> Are you sure?
                        </Trans>
                      </span>
                    ))}
                </div>
                {allowDictateNextSigner && (
                  <div className="mt-4 flex flex-col gap-4">
                    {!isEditingNextSigner && (
                      <div>
                        <p className="text-muted-foreground text-sm">
                          The next recipient to sign this document will be{' '}
                          <span className="font-semibold">{form.watch('name')}</span> (
                          <span className="font-semibold">{form.watch('email')}</span>).
                        </p>
                        <Button
                          type="button"
                          className="mt-2"
                          variant="outline"
                          size="sm"
                          onClick={() => setIsEditingNextSigner((prev) => !prev)}
                        >
                          <Trans>Update Recipient</Trans>
                        </Button>
                      </div>
                    )}
                    {isEditingNextSigner && (
                      <div className="flex flex-col gap-4 md:flex-row">
                        <FormField
                          control={form.control}
@ -312,13 +283,13 @@ export const DocumentSigningCompleteDialog = ({
                          render={({ field }) => (
                            <FormItem className="flex-1">
                              <FormLabel>
-                                <Trans>Next Recipient Name</Trans>
+                                <Trans>Name</Trans>
                              </FormLabel>
                              <FormControl>
                                <Input
                                  {...field}
                                  className="mt-2"
-                                  placeholder={t`Enter the next signer's name`}
+                                  placeholder="Enter the next signer's name"
                                />
                              </FormControl>
@ -333,14 +304,14 @@ export const DocumentSigningCompleteDialog = ({
                          render={({ field }) => (
                            <FormItem className="flex-1">
                              <FormLabel>
-                                <Trans>Next Recipient Email</Trans>
+                                <Trans>Email</Trans>
                              </FormLabel>
                              <FormControl>
                                <Input
                                  {...field}
                                  type="email"
                                  className="mt-2"
-                                  placeholder={t`Enter the next signer's email`}
+                                  placeholder="Enter the next signer's email"
                                />
                              </FormControl>
                              <FormMessage />
@ -348,14 +319,17 @@ export const DocumentSigningCompleteDialog = ({
                          )}
                        />
                      </div>
-                    </div>
+                    )}
-                  )}
+                  </div>
                )}
-                  <DocumentSigningDisclosure />
+                <DocumentSigningDisclosure className="mt-4" />
-                  <DialogFooter className="mt-4">
+                <DialogFooter className="mt-4">
                  <div className="flex w-full flex-1 flex-nowrap gap-4">
                    <Button
                      type="button"
                      className="flex-1"
                      variant="secondary"
                      onClick={() => setShowDialog(false)}
                      disabled={form.formState.isSubmitting}
@ -365,7 +339,8 @@ export const DocumentSigningCompleteDialog = ({
                    <Button
                      type="submit"
-                      disabled={!isComplete}
+                      className="flex-1"
                      disabled={!isComplete || !isNextSignerValid}
                      loading={form.formState.isSubmitting}
                    >
                      {match(recipient.role)
@ -376,11 +351,11 @@ export const DocumentSigningCompleteDialog = ({
                        .with(RecipientRole.ASSISTANT, () => <Trans>Complete</Trans>)
                        .exhaustive()}
                    </Button>
-                  </DialogFooter>
+                  </div>
-                </form>
+                </DialogFooter>
-              </Form>
+              </fieldset>
-            </fieldset>
+            </form>
-          </>
+          </Form>
        )}
        {showTwoFactorForm && (
--- 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
@ -1,123 +0,0 @@
 import { useEffect, useState } from 'react';
 import { Plural, Trans } from '@lingui/react/macro';
 import { RecipientRole } from '@prisma/client';
 import { motion } from 'framer-motion';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 import { match } from 'ts-pattern';
 import { Button } from '@documenso/ui/primitives/button';
 import EnvelopeSignerForm from '../envelope-signing/envelope-signer-form';
 import { EnvelopeSignerCompleteDialog } from '../envelope-signing/envelope-signing-complete-dialog';
 import { useRequiredEnvelopeSigningContext } from './envelope-signing-provider';
 export const DocumentSigningMobileWidget = () => {
  const [isExpanded, setIsExpanded] = useState(false);
  const { recipientFieldsRemaining, recipient, requiredRecipientFields } =
    useRequiredEnvelopeSigningContext();
  /**
   * Pre open the widget for assistants to let them know it's there.
   */
  useEffect(() => {
    if (recipient.role === RecipientRole.ASSISTANT) {
      setIsExpanded(true);
    }
  }, []);
  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="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">
            <div className="flex-1">
              <div className="flex items-center gap-3">
                {recipient.role !== RecipientRole.VIEWER && (
                  <Button
                    variant="outline"
                    onClick={() => setIsExpanded(!isExpanded)}
                    className="flex h-8 w-8 items-center justify-center"
                    aria-label={isExpanded ? 'Collapse' : 'Expand'}
                  >
                    {isExpanded ? (
                      <LucideChevronDown className="text-muted-foreground h-5 w-5 flex-shrink-0" />
                    ) : (
                      <LucideChevronUp className="text-muted-foreground h-5 w-5 flex-shrink-0" />
                    )}
                  </Button>
                )}
                <div>
                  <h2 className="text-foreground text-lg font-semibold">
                    {match(recipient.role)
                      .with(RecipientRole.VIEWER, () => <Trans>View Document</Trans>)
                      .with(RecipientRole.SIGNER, () => <Trans>Sign Document</Trans>)
                      .with(RecipientRole.APPROVER, () => <Trans>Approve Document</Trans>)
                      .with(RecipientRole.ASSISTANT, () => <Trans>Assist Document</Trans>)
                      .otherwise(() => null)}
                  </h2>
                  <p className="text-muted-foreground -mt-0.5 text-sm">
                    {recipientFieldsRemaining.length === 0 ? (
                      match(recipient.role)
                        .with(RecipientRole.VIEWER, () => (
                          <Trans>Please mark as viewed to complete</Trans>
                        ))
                        .with(RecipientRole.SIGNER, () => (
                          <Trans>Please complete the document once reviewed</Trans>
                        ))
                        .with(RecipientRole.APPROVER, () => (
                          <Trans>Please complete the document once reviewed</Trans>
                        ))
                        .with(RecipientRole.ASSISTANT, () => (
                          <Trans>Please complete the document once reviewed</Trans>
                        ))
                        .otherwise(() => null)
                    ) : (
                      <Plural
                        value={recipientFieldsRemaining.length}
                        one="1 Field Remaining"
                        other="# Fields Remaining"
                      />
                    )}
                  </p>
                </div>
              </div>
            </div>
            <div>
              <EnvelopeSignerCompleteDialog />
            </div>
          </div>
          {/* Progress Bar */}
          {recipient.role !== RecipientRole.VIEWER &&
            recipient.role !== RecipientRole.ASSISTANT && (
              <div className="px-4 pb-3">
                <div className="bg-muted relative h-[4px] rounded-md">
                  <motion.div
                    layout="size"
                    layoutId="document-signing-mobile-widget-progress-bar"
                    className="bg-documenso absolute inset-y-0 left-0"
                    style={{
                      width: `${100 - (100 / requiredRecipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
                    }}
                  />
                </div>
              </div>
            )}
          {/* Expandable Content */}
          {isExpanded && (
            <div className="border-border animate-in slide-in-from-bottom-2 border-t p-4 duration-200">
              <EnvelopeSignerForm />
            </div>
          )}
        </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
@ -32,7 +32,6 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 import { DocumentSigningAttachmentsPopover } from '~/components/general/document-signing/document-signing-attachments-popover';
 import { DocumentSigningAutoSign } from '~/components/general/document-signing/document-signing-auto-sign';
 import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
 import { DocumentSigningDateField } from '~/components/general/document-signing/document-signing-date-field';
@ -232,13 +231,7 @@ export const DocumentSigningPageViewV1 = ({
            </span>
          </div>
-          <div className="flex items-center gap-x-4">
+          <DocumentSigningRejectDialog documentId={document.id} token={recipient.token} />
            <DocumentSigningAttachmentsPopover
              envelopeId={document.envelopeId}
              token={recipient.token}
            />
            <DocumentSigningRejectDialog documentId={document.id} token={recipient.token} />
          </div>
        </div>
        <div className="relative mt-4 flex w-full flex-col gap-x-6 gap-y-8 sm:mt-8 md:flex-row lg:gap-x-8 lg:gap-y-0">
--- 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
@ -1,20 +1,16 @@
-import { lazy, useMemo } from 'react';
+import { lazy } from 'react';
 import { Plural, Trans } from '@lingui/react/macro';
 import { EnvelopeType, RecipientRole } from '@prisma/client';
 import { motion } from 'framer-motion';
-import { ArrowLeftIcon, BanIcon, DownloadCloudIcon, PaperclipIcon } from 'lucide-react';
+import { ArrowLeftIcon, BanIcon, DownloadCloudIcon } from 'lucide-react';
 import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
-import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
+import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
 import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
 import { SignFieldCheckboxDialog } from '~/components/dialogs/sign-field-checkbox-dialog';
 import { SignFieldDropdownDialog } from '~/components/dialogs/sign-field-dropdown-dialog';
 import { SignFieldEmailDialog } from '~/components/dialogs/sign-field-email-dialog';
 import { SignFieldInitialsDialog } from '~/components/dialogs/sign-field-initials-dialog';
@ -23,12 +19,9 @@ import { SignFieldNumberDialog } from '~/components/dialogs/sign-field-number-di
 import { SignFieldSignatureDialog } from '~/components/dialogs/sign-field-signature-dialog';
 import { SignFieldTextDialog } from '~/components/dialogs/sign-field-text-dialog';
 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';
 import { EnvelopeSignerHeader } from '../envelope-signing/envelope-signer-header';
 import { DocumentSigningMobileWidget } from './document-signing-mobile-widget';
 import { DocumentSigningRejectDialog } from './document-signing-reject-dialog';
 import { useRequiredEnvelopeSigningContext } from './envelope-signing-provider';
 const EnvelopeSignerPageRenderer = lazy(
@ -38,31 +31,11 @@ const EnvelopeSignerPageRenderer = lazy(
 export const DocumentSigningPageViewV2 = () => {
  const { envelopeItems, currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();
-  const {
+  const { envelope, recipientFields, recipientFieldsRemaining, showPendingFieldTooltip } =
-    isDirectTemplate,
+    useRequiredEnvelopeSigningContext();
    envelope,
    recipient,
    recipientFields,
    recipientFieldsRemaining,
    requiredRecipientFields,
    selectedAssistantRecipientFields,
  } = useRequiredEnvelopeSigningContext();
  /**
   * The total remaining fields remaining for the current recipient or selected assistant recipient.
   *
   * Includes both optional and required fields.
   */
  const remainingFields = useMemo(() => {
    if (recipient.role === RecipientRole.ASSISTANT) {
      return selectedAssistantRecipientFields.filter((field) => !field.inserted);
    }
    return recipientFields.filter((field) => !field.inserted);
  }, [recipientFieldsRemaining, selectedAssistantRecipientFields, currentEnvelopeItem]);
  return (
-    <div className="dark:bg-background min-h-screen w-screen bg-gray-50">
+    <div className="h-screen w-screen bg-gray-50">
      <SignFieldEmailDialog.Root />
      <SignFieldTextDialog.Root />
      <SignFieldNumberDialog.Root />
@ -70,29 +43,19 @@ export const DocumentSigningPageViewV2 = () => {
      <SignFieldInitialsDialog.Root />
      <SignFieldDropdownDialog.Root />
      <SignFieldSignatureDialog.Root />
      <SignFieldCheckboxDialog.Root />
      <EnvelopeSignerHeader />
      {/* Main Content Area */}
-      <div className="flex h-[calc(100vh-4rem)] w-screen">
+      <div className="flex h-[calc(100vh-73px)] 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="hidden w-80 flex-shrink-0 flex-col overflow-y-auto border-r border-gray-200 bg-white py-4 lg:flex">
          <div className="px-4">
-            <h3 className="text-foreground flex items-end justify-between text-sm font-semibold">
+            <h3 className="flex items-end justify-between text-sm font-semibold text-gray-900">
-              {match(recipient.role)
+              <Trans>Sign Document</Trans>
                .with(RecipientRole.VIEWER, () => <Trans>View Document</Trans>)
                .with(RecipientRole.SIGNER, () => <Trans>Sign Document</Trans>)
                .with(RecipientRole.APPROVER, () => <Trans>Approve Document</Trans>)
                .with(RecipientRole.ASSISTANT, () => <Trans>Assist Document</Trans>)
                .otherwise(() => null)}
-              <span className="text-muted-foreground bg-muted/50 ml-2 rounded border px-2 py-0.5 text-xs">
+              <span className="text-muted-foreground ml-2 rounded border bg-gray-50 px-2 py-0.5 text-xs">
-                <Plural
+                <Trans>{recipientFieldsRemaining.length} fields remaining</Trans>
                  value={recipientFieldsRemaining.length}
                  one="1 Field Remaining"
                  other="# Fields Remaining"
                />
              </span>
            </h3>
@ -102,7 +65,7 @@ export const DocumentSigningPageViewV2 = () => {
                layoutId="document-flow-container-step"
                className="bg-documenso absolute inset-y-0 left-0"
                style={{
-                  width: `${100 - (100 / requiredRecipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
+                  width: `${(100 / recipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
                }}
              />
            </div>
@ -115,54 +78,27 @@ export const DocumentSigningPageViewV2 = () => {
          <Separator className="my-6" />
          {/* Quick Actions. */}
-          {!isDirectTemplate && (
+          <div className="space-y-3 px-4">
-            <div className="space-y-3 px-4">
+            <h4 className="text-sm font-semibold text-gray-900">
-              <h4 className="text-foreground text-sm font-semibold">
+              <Trans>Actions</Trans>
-                <Trans>Actions</Trans>
+            </h4>
              </h4>
-              <DocumentSigningAttachmentsPopover
+            {/* Todo: Allow selecting which document to download and/or the original */}
-                envelopeId={envelope.id}
+            <Button variant="ghost" size="sm" className="w-full justify-start">
-                token={recipient.token}
+              <DownloadCloudIcon className="mr-2 h-4 w-4" />
-                trigger={
+              <Trans>Download Original</Trans>
-                  <Button variant="ghost" size="sm" className="w-full justify-start">
+            </Button>
                    <PaperclipIcon className="mr-2 h-4 w-4" />
                    <Trans>Attachments</Trans>
                  </Button>
                }
              />
-              <EnvelopeDownloadDialog
+            {/* Todo: Envelopes */}
-                envelopeId={envelope.id}
+            <Button
-                envelopeStatus={envelope.status}
+              variant="ghost"
-                envelopeItems={envelope.envelopeItems}
+              size="sm"
-                token={recipient.token}
+              className="hover:text-destructive w-full justify-start"
-                trigger={
+            >
-                  <Button variant="ghost" size="sm" className="w-full justify-start">
+              <BanIcon className="mr-2 h-4 w-4" />
-                    <DownloadCloudIcon className="mr-2 h-4 w-4" />
+              <Trans>Reject Document</Trans>
-                    <Trans>Download PDF</Trans>
+            </Button>
-                  </Button>
+          </div>
                }
              />
              {envelope.type === EnvelopeType.DOCUMENT && (
                <DocumentSigningRejectDialog
                  documentId={mapSecondaryIdToDocumentId(envelope.secondaryId)}
                  token={recipient.token}
                  trigger={
                    <Button
                      variant="ghost"
                      size="sm"
                      className="hover:text-destructive w-full justify-start"
                    >
                      <BanIcon className="mr-2 h-4 w-4" />
                      <Trans>Reject Document</Trans>
                    </Button>
                  }
                />
              )}
            </div>
          )}
          {/* Footer of left sidebar. */}
          <div className="mt-auto px-4">
@ -175,34 +111,47 @@ export const DocumentSigningPageViewV2 = () => {
          </div>
        </div>
        {/* Main Content - Changes based on current step */}
        <div className="flex-1 overflow-y-auto">
          <div className="flex flex-col">
            {/* Horizontal envelope item selector */}
-            {envelopeItems.length > 1 && (
+            <div className="flex h-fit space-x-2 overflow-x-auto p-4">
-              <div className="flex h-fit space-x-2 overflow-x-auto p-2 pt-4 sm:p-4">
+              {envelopeItems.map((doc, i) => (
-                {envelopeItems.map((doc, i) => (
+                <EnvelopeItemSelector
-                  <EnvelopeItemSelector
+                  key={doc.id}
-                    key={doc.id}
+                  number={i + 1}
-                    number={i + 1}
+                  primaryText={doc.title}
-                    primaryText={doc.title}
+                  secondaryText={
-                    secondaryText={
+                    <Plural
-                      <Plural
+                      one="1 Field"
-                        one="1 Field"
+                      other="# Fields"
-                        other="# Fields"
+                      value={
-                        value={
+                        recipientFieldsRemaining.filter((field) => field.envelopeItemId === doc.id)
-                          remainingFields.filter((field) => field.envelopeItemId === doc.id).length
+                          .length
-                        }
+                      }
-                      />
+                    />
-                    }
+                  }
-                    isSelected={currentEnvelopeItem?.id === doc.id}
+                  isSelected={currentEnvelopeItem?.id === doc.id}
-                    buttonProps={{ onClick: () => setCurrentEnvelopeItem(doc.id) }}
+                  buttonProps={{ onClick: () => setCurrentEnvelopeItem(doc.id) }}
-                  />
+                />
-                ))}
+              ))}
-              </div>
+            </div>
            )}
            {/* Document View */}
-            <div className="flex flex-col items-center justify-center p-2 sm:mt-4 sm:p-4">
+            <div className="mt-4 flex justify-center p-4">
              {currentEnvelopeItem &&
                showPendingFieldTooltip &&
                recipientFieldsRemaining.length > 0 &&
                recipientFieldsRemaining[0]?.envelopeItemId === currentEnvelopeItem?.id && (
                  <FieldToolTip
                    key={recipientFieldsRemaining[0].id}
                    field={recipientFieldsRemaining[0]}
                    color="warning"
                  >
                    <Trans>Click to insert field</Trans>
                  </FieldToolTip>
                )}
              {currentEnvelopeItem ? (
                <PDFViewerKonvaLazy
                  key={currentEnvelopeItem.id}
@ -216,11 +165,6 @@ export const DocumentSigningPageViewV2 = () => {
                  </p>
                </div>
              )}
              {/* Mobile widget - Additional padding to allow users to scroll */}
              <div className="block pb-16 md:hidden">
                <DocumentSigningMobileWidget />
              </div>
            </div>
          </div>
        </div>
--- a/apps/remix/app/components/general/document-signing/document-signing-reject-dialog.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-reject-dialog.tsx
@ -39,14 +39,12 @@ export interface DocumentSigningRejectDialogProps {
  documentId: number;
  token: string;
  onRejected?: (reason: string) => void | Promise<void>;
  trigger?: React.ReactNode;
 }
 export function DocumentSigningRejectDialog({
  documentId,
  token,
  onRejected,
  trigger,
 }: DocumentSigningRejectDialogProps) {
  const { toast } = useToast();
  const navigate = useNavigate();
@ -110,11 +108,9 @@ export function DocumentSigningRejectDialog({
  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
-        {trigger ?? (
+        <Button variant="outline">
-          <Button variant="outline">
+          <Trans>Reject Document</Trans>
-            <Trans>Reject Document</Trans>
+        </Button>
          </Button>
        )}
      </DialogTrigger>
      <DialogContent>
--- a/apps/remix/app/components/general/document-signing/envelope-signing-provider.tsx
+++ b/apps/remix/app/components/general/document-signing/envelope-signing-provider.tsx
@ -1,29 +1,21 @@
 import { createContext, useContext, useMemo, useState } from 'react';
 import {
  EnvelopeType,
  type Field,
  FieldType,
  type Recipient,
  RecipientRole,
  SigningStatus,
 } from '@prisma/client';
 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 {
+import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
  isFieldUnsignedAndRequired,
  isRequiredField,
 } from '@documenso/lib/utils/advanced-fields-helpers';
 import { extractFieldInsertionValues } from '@documenso/lib/utils/envelope-signing';
 import { trpc } from '@documenso/trpc/react';
 import type { TSignEnvelopeFieldValue } from '@documenso/trpc/server/envelope-router/sign-envelope-field.types';
 export type EnvelopeSigningContextValue = {
  isDirectTemplate: boolean;
  fullName: string;
  setFullName: (_value: string) => void;
  email: string;
@ -40,8 +32,7 @@ export type EnvelopeSigningContextValue = {
  recipient: EnvelopeForSigningResponse['recipient'];
  recipientFieldsRemaining: Field[];
  recipientFields: Field[];
-  requiredRecipientFields: Field[];
+  selectedRecipientFields: Field[];
  selectedAssistantRecipientFields: Field[];
  nextRecipient: EnvelopeForSigningResponse['envelope']['recipients'][number] | null;
  otherRecipientCompletedFields: (Field & {
    recipient: Pick<Recipient, 'name' | 'email' | 'signingStatus' | 'role'>;
@ -94,31 +85,26 @@ export const EnvelopeSigningProvider = ({
  const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
-  const isDirectTemplate = envelope.type === EnvelopeType.TEMPLATE;
+  const {
    mutateAsync: completeDocument,
    isPending,
    isSuccess,
  } = trpc.recipient.completeDocumentWithToken.useMutation();
  const { mutateAsync: signEnvelopeField } = trpc.envelope.field.sign.useMutation({
    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
    onSuccess: (data) => {
      console.log('signEnvelopeField', data);
      const newRecipientFields = envelopeData.recipient.fields.map((field) =>
        field.id === data.signedField.id ? data.signedField : field,
      );
      setEnvelopeData((prev) => ({
        ...prev,
        envelope: {
          ...prev.envelope,
          recipients: prev.envelope.recipients.map((recipient) =>
            recipient.id === data.signedField.recipientId
              ? {
                  ...recipient,
                  fields: recipient.fields.map((field) =>
                    field.id === data.signedField.id ? data.signedField : field,
                  ),
                }
              : recipient,
          ),
        },
        recipient: {
          ...prev.recipient,
-          fields: prev.recipient.fields.map((field) =>
+          fields: newRecipientFields,
            field.id === data.signedField.id ? data.signedField : field,
          ),
        },
      }));
    },
@ -162,49 +148,6 @@ export const EnvelopeSigningProvider = ({
    })(),
  );
  /**
   * The fields that are still required to be signed by the actual recipient.
   */
  const recipientFieldsRemaining = useMemo(() => {
    const requiredFields = envelopeData.recipient.fields
      .filter((field) => isFieldUnsignedAndRequired(field))
      .map((field) => {
        const envelopeItem = envelope.envelopeItems.find(
          (item) => item.id === field.envelopeItemId,
        );
        if (!envelopeItem) {
          throw new Error('Missing envelope item');
        }
        return {
          ...field,
          envelopeItemOrder: envelopeItem.order,
        };
      });
    return sortBy(
      requiredFields,
      [prop('envelopeItemOrder'), 'asc'],
      [prop('page'), 'asc'],
      [prop('positionY'), 'asc'],
    );
  }, [envelopeData.recipient.fields]);
  /**
   * All the required fields for the actual recipient.
   */
  const requiredRecipientFields = useMemo(() => {
    return envelopeData.recipient.fields.filter((field) => isRequiredField(field));
  }, [envelopeData.recipient.fields]);
  /**
   * All the fields for the actual recipient.
   */
  const recipientFields = useMemo(() => {
    return envelopeData.recipient.fields;
  }, [envelopeData.recipient.fields]);
  /**
   * Assistant recipients are those that have a signing order after the assistant.
   */
@ -238,8 +181,22 @@ export const EnvelopeSigningProvider = ({
    return envelope.recipients.find((r) => r.id === selectedAssistantRecipientId) || null;
  }, [envelope.recipients, selectedAssistantRecipientId]);
-  const selectedAssistantRecipientFields = useMemo(() => {
+  /**
-    return assistantFields.filter((field) => field.recipientId === selectedAssistantRecipient?.id);
+   * The fields that are still required to be signed by the current recipient.
   */
  const recipientFieldsRemaining = useMemo(() => {
    return envelopeData.recipient.fields.filter((field) => isFieldUnsignedAndRequired(field));
  }, [envelopeData.recipient.fields]);
  /**
   * All the fields for the current recipient.
   */
  const recipientFields = useMemo(() => {
    return envelopeData.recipient.fields;
  }, [envelopeData.recipient.fields]);
  const selectedRecipientFields = useMemo(() => {
    return recipientFields.filter((field) => field.recipientId === selectedAssistantRecipient?.id);
  }, [recipientFields, selectedAssistantRecipient]);
  /**
@ -287,12 +244,6 @@ export const EnvelopeSigningProvider = ({
  const signField = async (fieldId: number, fieldValue: TSignEnvelopeFieldValue) => {
    console.log('insertField', fieldId, fieldValue);
    // Set the field locally for direct templates.
    if (isDirectTemplate) {
      handleDirectTemplateFieldInsertion(fieldId, fieldValue);
      return;
    }
    await signEnvelopeField({
      token: envelopeData.recipient.token,
      fieldId,
@ -301,67 +252,9 @@ export const EnvelopeSigningProvider = ({
    });
  };
  const handleDirectTemplateFieldInsertion = (
    fieldId: number,
    fieldValue: TSignEnvelopeFieldValue,
  ) => {
    const foundField = recipient.fields.find((field) => field.id === fieldId);
    if (!foundField) {
      throw new Error('Not possible');
    }
    const insertionValues = extractFieldInsertionValues({
      fieldValue,
      field: foundField,
      documentMeta: envelope.documentMeta,
    });
    const updatedField = {
      ...foundField,
      ...insertionValues,
    };
    if (fieldValue.type === FieldType.SIGNATURE) {
      const isBase64 = isBase64Image(fieldValue.value || '');
      updatedField.signature = fieldValue.value
        ? {
            signatureImageAsBase64: isBase64 ? fieldValue.value : null,
            typedSignature: isBase64 ? null : fieldValue.value,
            recipientId: recipient.id,
            created: new Date(),
            // Dummy IDs.
            id: 0,
            fieldId: 0,
          }
        : null;
    }
    setEnvelopeData((prev) => ({
      ...prev,
      envelope: {
        ...prev.envelope,
        recipients: prev.envelope.recipients.map((r) =>
          r.id === recipient.id
            ? {
                ...r,
                fields: r.fields.map((field) => (field.id === fieldId ? updatedField : field)),
              }
            : r,
        ),
      },
      recipient: {
        ...prev.recipient,
        fields: prev.recipient.fields.map((field) => (field.id === fieldId ? updatedField : field)),
      },
    }));
  };
  return (
    <EnvelopeSigningContext.Provider
      value={{
        isDirectTemplate,
        fullName,
        setFullName,
        email,
@ -377,7 +270,6 @@ export const EnvelopeSigningProvider = ({
        recipient,
        recipientFieldsRemaining,
        recipientFields,
        requiredRecipientFields,
        nextRecipient,
        otherRecipientCompletedFields,
@ -385,7 +277,7 @@ export const EnvelopeSigningProvider = ({
        assistantFields,
        setSelectedAssistantRecipientId,
        selectedAssistantRecipient,
-        selectedAssistantRecipientFields,
+        selectedRecipientFields,
        signField,
      }}
--- a/apps/remix/app/components/general/document/document-attachments-popover.tsx
+++ b/apps/remix/app/components/general/document/document-attachments-popover.tsx
@ -1,248 +0,0 @@
 import { useState } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { Paperclip, Plus, X } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 export type DocumentAttachmentsPopoverProps = {
  envelopeId: string;
  buttonClassName?: string;
  buttonSize?: 'sm' | 'default';
 };
 const ZAttachmentFormSchema = z.object({
  label: z.string().min(1, 'Label is required'),
  url: z.string().url('Must be a valid URL'),
 });
 type TAttachmentFormSchema = z.infer<typeof ZAttachmentFormSchema>;
 export const DocumentAttachmentsPopover = ({
  envelopeId,
  buttonClassName,
  buttonSize,
 }: DocumentAttachmentsPopoverProps) => {
  const { toast } = useToast();
  const { _ } = useLingui();
  const [isOpen, setIsOpen] = useState(false);
  const [isAdding, setIsAdding] = useState(false);
  const utils = trpc.useUtils();
  const { data: attachments } = trpc.envelope.attachment.find.useQuery({
    envelopeId,
  });
  const { mutateAsync: createAttachment, isPending: isCreating } =
    trpc.envelope.attachment.create.useMutation({
      onSuccess: () => {
        void utils.envelope.attachment.find.invalidate({ envelopeId });
      },
    });
  const { mutateAsync: deleteAttachment } = trpc.envelope.attachment.delete.useMutation({
    onSuccess: () => {
      void utils.envelope.attachment.find.invalidate({ envelopeId });
    },
  });
  const form = useForm<TAttachmentFormSchema>({
    resolver: zodResolver(ZAttachmentFormSchema),
    defaultValues: {
      label: '',
      url: '',
    },
  });
  const onSubmit = async (data: TAttachmentFormSchema) => {
    try {
      await createAttachment({
        envelopeId,
        data: {
          label: data.label,
          data: data.url,
        },
      });
      form.reset();
      setIsAdding(false);
      toast({
        title: _(msg`Success`),
        description: _(msg`Attachment added successfully.`),
      });
    } catch (err) {
      const error = AppError.parseError(err);
      toast({
        title: _(msg`Error`),
        description: error.message,
        variant: 'destructive',
      });
    }
  };
  const onDeleteAttachment = async (id: string) => {
    try {
      await deleteAttachment({ id });
      toast({
        title: _(msg`Success`),
        description: _(msg`Attachment removed successfully.`),
      });
    } catch (err) {
      const error = AppError.parseError(err);
      toast({
        title: _(msg`Error`),
        description: error.message,
        variant: 'destructive',
      });
    }
  };
  return (
    <Popover open={isOpen} onOpenChange={setIsOpen}>
      <PopoverTrigger asChild>
        <Button variant="outline" className={cn('gap-2', buttonClassName)} size={buttonSize}>
          <Paperclip className="h-4 w-4" />
          <span>
            <Trans>Attachments</Trans>
            {attachments && attachments.data.length > 0 && (
              <span className="ml-1">({attachments.data.length})</span>
            )}
          </span>
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-96" align="end">
        <div className="space-y-4">
          <div>
            <h4 className="font-medium">
              <Trans>Attachments</Trans>
            </h4>
            <p className="text-muted-foreground mt-1 text-sm">
              <Trans>Add links to relevant documents or resources.</Trans>
            </p>
          </div>
          {attachments && attachments.data.length > 0 && (
            <div className="space-y-2">
              {attachments?.data.map((attachment) => (
                <div
                  key={attachment.id}
                  className="border-border flex items-center justify-between rounded-md border p-2"
                >
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-sm font-medium">{attachment.label}</p>
                    <a
                      href={attachment.data}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-muted-foreground hover:text-foreground truncate text-xs underline"
                    >
                      {attachment.data}
                    </a>
                  </div>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => void onDeleteAttachment(attachment.id)}
                    className="ml-2 h-8 w-8 p-0"
                  >
                    <X className="h-4 w-4" />
                  </Button>
                </div>
              ))}
            </div>
          )}
          {!isAdding && (
            <Button
              variant="outline"
              size="sm"
              className="w-full"
              onClick={() => setIsAdding(true)}
            >
              <Plus className="mr-2 h-4 w-4" />
              <Trans>Add Attachment</Trans>
            </Button>
          )}
          {isAdding && (
            <Form {...form}>
              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
                <FormField
                  control={form.control}
                  name="label"
                  render={({ field }) => (
                    <FormItem>
                      <FormControl>
                        <Input placeholder={_(msg`Label`)} {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="url"
                  render={({ field }) => (
                    <FormItem>
                      <FormControl>
                        <Input type="url" placeholder={_(msg`URL`)} {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <div className="flex gap-2">
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    className="flex-1"
                    onClick={() => {
                      setIsAdding(false);
                      form.reset();
                    }}
                  >
                    <Trans>Cancel</Trans>
                  </Button>
                  <Button type="submit" size="sm" className="flex-1" loading={isCreating}>
                    <Trans>Add</Trans>
                  </Button>
                </div>
              </form>
            </Form>
          )}
        </div>
      </PopoverContent>
    </Popover>
  );
 };
--- a/apps/remix/app/components/general/document/document-certificate-qr-view.tsx
+++ b/apps/remix/app/components/general/document/document-certificate-qr-view.tsx
@ -4,10 +4,7 @@ import { Trans } from '@lingui/react/macro';
 import type { DocumentData, EnvelopeItem } from '@prisma/client';
 import { DateTime } from 'luxon';
-import {
+import { EnvelopeRenderProvider } from '@documenso/lib/client-only/providers/envelope-render-provider';
  EnvelopeRenderProvider,
  useCurrentEnvelopeRender,
 } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
@ -95,60 +92,6 @@ export const DocumentCertificateQRView = ({
        </Dialog>
      )}
      {internalVersion === 2 ? (
        <EnvelopeRenderProvider envelope={{ envelopeItems }}>
          <DocumentCertificateQrV2
            title={title}
            recipientCount={recipientCount}
            formattedDate={formattedDate}
          />
        </EnvelopeRenderProvider>
      ) : (
        <>
          <div className="flex w-full flex-col justify-between gap-4 md:flex-row md:items-end">
            <div className="space-y-1">
              <h1 className="text-xl font-medium">{title}</h1>
              <div className="text-muted-foreground flex flex-col gap-0.5 text-sm">
                <p>
                  <Trans>{recipientCount} recipients</Trans>
                </p>
                <p>
                  <Trans>Completed on {formattedDate}</Trans>
                </p>
              </div>
            </div>
            <ShareDocumentDownloadButton
              title={title}
              documentData={envelopeItems[0].documentData}
            />
          </div>
          <div className="mt-12 w-full">
            <PDFViewer key={envelopeItems[0].id} documentData={envelopeItems[0].documentData} />
          </div>
        </>
      )}
    </div>
  );
 };
 type DocumentCertificateQrV2Props = {
  title: string;
  recipientCount: number;
  formattedDate: string;
 };
 const DocumentCertificateQrV2 = ({
  title,
  recipientCount,
  formattedDate,
 }: DocumentCertificateQrV2Props) => {
  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
  return (
    <div className="flex min-h-screen flex-col items-start">
      <div className="flex w-full flex-col justify-between gap-4 md:flex-row md:items-end">
        <div className="space-y-1">
          <h1 className="text-xl font-medium">{title}</h1>
@ -163,18 +106,21 @@ const DocumentCertificateQrV2 = ({
          </div>
        </div>
-        {currentEnvelopeItem && (
+        <ShareDocumentDownloadButton title={title} documentData={envelopeItems[0].documentData} />
          <ShareDocumentDownloadButton
            title={title}
            documentData={currentEnvelopeItem.documentData}
          />
        )}
      </div>
      <div className="mt-12 w-full">
-        <EnvelopeRendererFileSelector className="mb-4 p-0" fields={[]} secondaryOverride={''} />
+        {internalVersion === 2 ? (
          <EnvelopeRenderProvider envelope={{ envelopeItems }}>
            <EnvelopeRendererFileSelector className="mb-4 p-0" fields={[]} secondaryOverride={''} />
-        <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
+            <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
          </EnvelopeRenderProvider>
        ) : (
          <>
            <PDFViewer key={envelopeItems[0].id} documentData={envelopeItems[0].documentData} />
          </>
        )}
      </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
@ -95,10 +95,6 @@ export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZon
          AppErrorCode.LIMIT_EXCEEDED,
          () => msg`You have reached your document limit for this month. Please upgrade your plan.`,
        )
        .with(
          'ENVELOPE_ITEM_LIMIT_EXCEEDED',
          () => msg`You have reached the limit of the number of files per envelope`,
        )
        .otherwise(() => msg`An error occurred while uploading your document.`);
      toast({
--- a/apps/remix/app/components/general/document/document-page-view-button.tsx
+++ b/apps/remix/app/components/general/document/document-page-view-button.tsx
@ -14,8 +14,6 @@ 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';
 export type DocumentPageViewButtonProps = {
  envelope: TEnvelope;
 };
@ -61,7 +59,6 @@ export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps
    isPending,
    isComplete,
    isSigned,
    internalVersion: envelope.internalVersion,
  })
    .with({ isRecipient: true, isPending: true, isSigned: false }, () => (
      <Button className="w-full" asChild>
@ -95,20 +92,6 @@ export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps
        </Link>
      </Button>
    ))
    .with({ isComplete: true, internalVersion: 2 }, () => (
      <EnvelopeDownloadDialog
        envelopeId={envelope.id}
        envelopeStatus={envelope.status}
        envelopeItems={envelope.envelopeItems}
        token={recipient?.token}
        trigger={
          <Button className="w-full">
            <Download className="-ml-1 mr-2 inline h-4 w-4" />
            <Trans>Download</Trans>
          </Button>
        }
      />
    ))
    .with({ isComplete: true }, () => (
      <Button className="w-full" onClick={onDownloadClick}>
        <Download className="-ml-1 mr-2 inline h-4 w-4" />
--- a/apps/remix/app/components/general/document/document-page-view-dropdown.tsx
+++ b/apps/remix/app/components/general/document/document-page-view-dropdown.tsx
@ -36,7 +36,6 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialog';
 import { DocumentDuplicateDialog } from '~/components/dialogs/document-duplicate-dialog';
 import { DocumentResendDialog } from '~/components/dialogs/document-resend-dialog';
 import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
 import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
 import { useCurrentTeam } from '~/providers/team';
@ -147,37 +146,18 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
          </DropdownMenuItem>
        )}
-        {envelope.internalVersion === 2 ? (
+        {isComplete && (
-          <EnvelopeDownloadDialog
+          <DropdownMenuItem onClick={onDownloadClick}>
-            envelopeId={envelope.id}
+            <Download className="mr-2 h-4 w-4" />
-            envelopeStatus={envelope.status}
+            <Trans>Download</Trans>
-            token={recipient?.token}
+          </DropdownMenuItem>
            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}>
                <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>
            </DropdownMenuItem>
          </>
        )}
        <DropdownMenuItem onClick={onDownloadOriginalClick}>
          <Download className="mr-2 h-4 w-4" />
          <Trans>Download Original</Trans>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <Link to={`${documentsPath}/${envelope.id}/logs`}>
            <ScrollTextIcon className="mr-2 h-4 w-4" />
--- a/apps/remix/app/components/general/document/document-page-view-recipients.tsx
+++ b/apps/remix/app/components/general/document/document-page-view-recipients.tsx
@ -1,10 +1,7 @@
 import { useEffect, useState } from 'react';
 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 { TooltipArrow } from '@radix-ui/react-tooltip';
 import {
  AlertTriangle,
  CheckIcon,
@ -15,7 +12,7 @@ import {
  PlusIcon,
  UserIcon,
 } from 'lucide-react';
-import { Link, useSearchParams } from 'react-router';
+import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
@ -27,12 +24,6 @@ import { SignatureIcon } from '@documenso/ui/icons/signature';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { PopoverHover } from '@documenso/ui/primitives/popover';
 import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
 } from '@documenso/ui/primitives/tooltip';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 export type DocumentPageViewRecipientsProps = {
@ -46,24 +37,8 @@ export const DocumentPageViewRecipients = ({
 }: DocumentPageViewRecipientsProps) => {
  const { _ } = useLingui();
  const { toast } = useToast();
  const [searchParams, setSearchParams] = useSearchParams();
  const recipients = envelope.recipients;
  const [shouldHighlightCopyButtons, setShouldHighlightCopyButtons] = useState(false);
  // Check for action=view-tokens query parameter and set highlighting state
  useEffect(() => {
    const hasViewTokensAction = searchParams.get('action') === 'copy-links';
    if (hasViewTokensAction) {
      setShouldHighlightCopyButtons(true);
      // Remove the query parameter immediately
      const params = new URLSearchParams(searchParams);
      params.delete('action');
      setSearchParams(params);
    }
  }, [searchParams, setSearchParams]);
  return (
    <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
@ -94,7 +69,7 @@ export const DocumentPageViewRecipients = ({
          </li>
        )}
-        {recipients.map((recipient, i) => (
+        {recipients.map((recipient) => (
          <li key={recipient.id} className="flex items-center justify-between px-4 py-2.5 text-sm">
            <AvatarWithText
              avatarFallback={recipient.email.slice(0, 1).toUpperCase()}
@ -184,33 +159,15 @@ export const DocumentPageViewRecipients = ({
              {envelope.status === DocumentStatus.PENDING &&
                recipient.signingStatus === SigningStatus.NOT_SIGNED &&
                recipient.role !== RecipientRole.CC && (
-                  <TooltipProvider>
+                  <CopyTextButton
-                    <Tooltip open={shouldHighlightCopyButtons && i === 0}>
+                    value={formatSigningLink(recipient.token)}
-                      <TooltipTrigger asChild>
+                    onCopySuccess={() => {
-                        <div
+                      toast({
-                          className={shouldHighlightCopyButtons ? 'animate-pulse' : ''}
+                        title: _(msg`Copied to clipboard`),
-                          onClick={() => setShouldHighlightCopyButtons(false)}
+                        description: _(msg`The signing link has been copied to your clipboard.`),
-                        >
+                      });
-                          <CopyTextButton
+                    }}
-                            value={formatSigningLink(recipient.token)}
+                  />
                            onCopySuccess={() => {
                              toast({
                                title: _(msg`Copied to clipboard`),
                                description: _(
                                  msg`The signing link has been copied to your clipboard.`,
                                ),
                              });
                              setShouldHighlightCopyButtons(false);
                            }}
                          />
                        </div>
                      </TooltipTrigger>
                      <TooltipContent sideOffset={2}>
                        <Trans>Copy Signing Links</Trans>
                        <TooltipArrow className="fill-background" />
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                )}
            </div>
          </li>
--- a/apps/remix/app/components/general/document/document-upload-button.tsx
+++ b/apps/remix/app/components/general/document/document-upload-button.tsx
@ -108,10 +108,6 @@ export const DocumentUploadButton = ({ className }: DocumentUploadButtonProps) =
          AppErrorCode.LIMIT_EXCEEDED,
          () => msg`You have reached your document limit for this month. Please upgrade your plan.`,
        )
        .with(
          'ENVELOPE_ITEM_LIMIT_EXCEEDED',
          () => msg`You have reached the limit of the number of files per envelope`,
        )
        .otherwise(() => msg`An error occurred while uploading your document.`);
      toast({
--- a/apps/remix/app/components/general/document/envelope-upload-button.tsx
+++ b/apps/remix/app/components/general/document/envelope-upload-button.tsx
@ -4,7 +4,6 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
 import { ErrorCode as DropzoneErrorCode, type FileRejection } from 'react-dropzone';
 import { useNavigate } from 'react-router';
 import { match } from 'ts-pattern';
@ -52,7 +51,7 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
    (timezone) => timezone === Intl.DateTimeFormat().resolvedOptions().timeZone,
  );
-  const { quota, remaining, refreshLimits, maximumEnvelopeItemCount } = useLimits();
+  const { quota, remaining, refreshLimits } = useLimits();
  const [isLoading, setIsLoading] = useState(false);
@ -70,7 +69,6 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
    if (!user.emailVerified) {
      return msg`Verify your email to upload documents.`;
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [remaining.documents, user.emailVerified, team]);
@ -140,10 +138,6 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
          AppErrorCode.LIMIT_EXCEEDED,
          () => t`You have reached your document limit for this month. Please upgrade your plan.`,
        )
        .with(
          'ENVELOPE_ITEM_LIMIT_EXCEEDED',
          () => t`You have reached the limit of the number of files per envelope`,
        )
        .otherwise(() => t`An error occurred while uploading your document.`);
      toast({
@ -157,23 +151,12 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
    }
  };
-  const onFileDropRejected = (fileRejections: FileRejection[]) => {
+  const onFileDropRejected = () => {
    const maxItemsReached = fileRejections.some((fileRejection) =>
      fileRejection.errors.some((error) => error.code === DropzoneErrorCode.TooManyFiles),
    );
    if (maxItemsReached) {
      toast({
        title: t`You cannot upload more than ${maximumEnvelopeItemCount} items per envelope.`,
        duration: 5000,
        variant: 'destructive',
      });
      return;
    }
    toast({
-      title: t`Upload failed`,
+      title:
        type === EnvelopeType.DOCUMENT
          ? t`Your document failed to upload.`
          : t`Your template failed to upload.`,
      description: t`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`,
      duration: 5000,
      variant: 'destructive',
@ -193,7 +176,6 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
                onDrop={onFileDrop}
                onDropRejected={onFileDropRejected}
                type="envelope"
                maxFiles={maximumEnvelopeItemCount}
              />
            </div>
          </TooltipTrigger>
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx
@ -96,7 +96,7 @@ export const EnvelopeEditorFieldDragDrop = ({
  selectedRecipientId,
  selectedEnvelopeItemId,
 }: EnvelopeEditorFieldDragDropProps) => {
-  const { envelope, editorFields, isTemplate, getRecipientColorKey } = useCurrentEnvelopeEditor();
+  const { envelope, editorFields, isTemplate } = useCurrentEnvelopeEditor();
  const { t } = useLingui();
@ -262,10 +262,6 @@ export const EnvelopeEditorFieldDragDrop = ({
    };
  }, [onMouseClick, onMouseMove, selectedField]);
  const selectedRecipientColor = useMemo(() => {
    return selectedRecipientId ? getRecipientColorKey(selectedRecipientId) : 'green';
  }, [selectedRecipientId, getRecipientColorKey]);
  return (
    <>
      <div className="grid grid-cols-2 gap-x-2 gap-y-2.5">
@ -277,23 +273,12 @@ export const EnvelopeEditorFieldDragDrop = ({
            onClick={() => setSelectedField(field.type)}
            onMouseDown={() => setSelectedField(field.type)}
            data-selected={selectedField === field.type ? true : undefined}
-            className={cn(
+            className="group flex h-12 cursor-pointer items-center justify-center rounded-lg border border-gray-200 px-4 transition-colors hover:border-blue-300 hover:bg-blue-50"
              'border-border group flex h-12 cursor-pointer items-center justify-center rounded-lg border px-4 transition-colors',
              RECIPIENT_COLOR_STYLES[selectedRecipientColor].fieldButton,
            )}
          >
            <p
              className={cn(
-                'text-muted-foreground font-noto group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
+                'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
                field.className,
                {
                  'group-hover:text-recipient-green': selectedRecipientColor === 'green',
                  'group-hover:text-recipient-blue': selectedRecipientColor === 'blue',
                  'group-hover:text-recipient-purple': selectedRecipientColor === 'purple',
                  'group-hover:text-recipient-orange': selectedRecipientColor === 'orange',
                  'group-hover:text-recipient-yellow': selectedRecipientColor === 'yellow',
                  'group-hover:text-recipient-pink': selectedRecipientColor === 'pink',
                },
              )}
            >
              {field.type !== FieldType.SIGNATURE && <field.icon className="h-4 w-4" />}
@ -306,9 +291,9 @@ export const EnvelopeEditorFieldDragDrop = ({
      {selectedField && (
        <div
          className={cn(
-            'text-muted-foreground dark:text-muted-background font-noto pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center rounded-[2px] bg-white ring-2 transition duration-200 [container-type:size]',
+            'text-muted-foreground dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center rounded-[2px] bg-white ring-2 transition duration-200 [container-type:size]',
-            RECIPIENT_COLOR_STYLES[selectedRecipientColor].base,
+            // selectedSignerStyles?.base,
-            selectedField === FieldType.SIGNATURE && 'font-signature',
+            RECIPIENT_COLOR_STYLES.yellow.base, // Todo: Envelopes
            {
              '-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,
              'dark:text-black/60': isFieldWithinBounds,
--- 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
@ -3,12 +3,15 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useLingui } from '@lingui/react/macro';
 import type { FieldType } from '@prisma/client';
 import Konva from 'konva';
 import type { Layer } from 'konva/lib/Layer';
 import type { KonvaEventObject } from 'konva/lib/Node';
 import type { Transformer } from 'konva/lib/shapes/Transformer';
 import { CopyPlusIcon, SquareStackIcon, TrashIcon } from 'lucide-react';
 import type { RenderParameters } from 'pdfjs-dist/types/src/display/api';
 import { usePageContext } from 'react-pdf';
 import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
 import type { TLocalField } from '@documenso/lib/client-only/hooks/use-editor-fields';
 import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { FIELD_META_DEFAULT_VALUES } from '@documenso/lib/types/field-meta';
@ -18,16 +21,32 @@ import {
  convertPixelToPercentage,
 } from '@documenso/lib/universal/field-renderer/field-renderer';
 import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
 import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 import { fieldButtonList } from './envelope-editor-fields-drag-drop';
 export default function EnvelopeEditorFieldsPageRenderer() {
-  const { t, i18n } = useLingui();
+  const pageContext = usePageContext();
  if (!pageContext) {
    throw new Error('Unable to find Page context.');
  }
  const { _className, page, rotate, scale } = pageContext;
  if (!page) {
    throw new Error('Attempted to render page canvas, but no page was specified.');
  }
  const { t } = useLingui();
  const { envelope, editorFields, getRecipientColorKey } = useCurrentEnvelopeEditor();
  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
  const canvasElement = useRef<HTMLCanvasElement>(null);
  const konvaContainer = useRef<HTMLDivElement>(null);
  const stage = useRef<Konva.Stage | null>(null);
  const pageLayer = useRef<Layer | null>(null);
  const interactiveTransformer = useRef<Transformer | null>(null);
  const [selectedKonvaFieldGroups, setSelectedKonvaFieldGroups] = useState<Konva.Group[]>([]);
@ -35,17 +54,10 @@ export default function EnvelopeEditorFieldsPageRenderer() {
  const [isFieldChanging, setIsFieldChanging] = useState(false);
  const [pendingFieldCreation, setPendingFieldCreation] = useState<Konva.Rect | null>(null);
-  const {
+  const viewport = useMemo(
-    stage,
+    () => page.getViewport({ scale, rotation: rotate }),
-    pageLayer,
+    [page, rotate, scale],
-    canvasElement,
+  );
    konvaContainer,
    pageContext,
    scaledViewport,
    unscaledViewport,
  } = usePageRenderer(({ stage, pageLayer }) => createPageCanvas(stage, pageLayer));
  const { _className, scale } = pageContext;
  const localPageFields = useMemo(
    () =>
@ -56,7 +68,47 @@ export default function EnvelopeEditorFieldsPageRenderer() {
    [editorFields.localFields, pageContext.pageNumber],
  );
  // Custom renderer from Konva examples.
  useEffect(
    function drawPageOnCanvas() {
      if (!page) {
        return;
      }
      const { current: canvas } = canvasElement;
      const { current: container } = konvaContainer;
      if (!canvas || !container) {
        return;
      }
      const renderContext: RenderParameters = {
        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
        canvasContext: canvas.getContext('2d', { alpha: false }) as CanvasRenderingContext2D,
        viewport,
      };
      const cancellable = page.render(renderContext);
      const runningTask = cancellable;
      cancellable.promise.catch(() => {
        // Intentionally empty
      });
      void cancellable.promise.then(() => {
        createPageCanvas(container);
      });
      return () => {
        runningTask.cancel();
      };
    },
    [page, viewport],
  );
  const handleResizeOrMove = (event: KonvaEventObject<Event>) => {
    console.log('Field resized or moved');
    const { current: container } = canvasElement;
    if (!container) {
@ -68,7 +120,6 @@ export default function EnvelopeEditorFieldsPageRenderer() {
    const fieldGroup = event.target as Konva.Group;
    const fieldFormId = fieldGroup.id();
    // Note: This values are scaled.
    const {
      width: fieldPixelWidth,
      height: fieldPixelHeight,
@ -79,8 +130,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
      skipShadow: true,
    });
-    const pageHeight = scaledViewport.height;
+    const { height: pageHeight, width: pageWidth } = getBoundingClientRect(container);
    const pageWidth = scaledViewport.width;
    // Calculate x and y as a percentage of the page width and height
    const positionPercentX = (fieldX / pageWidth) * 100;
@ -115,7 +165,8 @@ export default function EnvelopeEditorFieldsPageRenderer() {
  };
  const renderFieldOnLayer = (field: TLocalField) => {
-    if (!pageLayer.current) {
+    if (!pageLayer.current || !interactiveTransformer.current) {
      console.error('Layer not loaded yet');
      return;
    }
@ -123,8 +174,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
    const isFieldEditable =
      recipient !== undefined && canRecipientFieldsBeModified(recipient, envelope.fields);
-    const { fieldGroup } = renderField({
+    const { fieldGroup, isFirstRender } = renderField({
      scale,
      pageLayer: pageLayer.current,
      field: {
        renderId: field.formId,
@ -133,9 +183,8 @@ export default function EnvelopeEditorFieldsPageRenderer() {
        inserted: false,
        fieldMeta: field.fieldMeta,
      },
-      translations: getClientSideFieldTranslations(i18n),
+      pageWidth: viewport.width,
-      pageWidth: unscaledViewport.width,
+      pageHeight: viewport.height,
      pageHeight: unscaledViewport.height,
      color: getRecipientColorKey(field.recipientId),
      editable: isFieldEditable,
      mode: 'edit',
@ -161,14 +210,24 @@ export default function EnvelopeEditorFieldsPageRenderer() {
  };
  /**
-   * Initialize the Konva page canvas and all fields and interactions.
+   * Create the initial Konva page canvas and initialize all fields and interactions.
   */
-  const createPageCanvas = (currentStage: Konva.Stage, currentPageLayer: Konva.Layer) => {
+  const createPageCanvas = (container: HTMLDivElement) => {
    stage.current = new Konva.Stage({
      container,
      width: viewport.width,
      height: viewport.height,
    });
    // Create the main layer for interactive elements.
    pageLayer.current = new Konva.Layer();
    stage.current?.add(pageLayer.current);
    // Initialize snap guides layer
    // snapGuideLayer.current = initializeSnapGuides(stage.current);
    // Add transformer for resizing and rotating.
-    interactiveTransformer.current = createInteractiveTransformer(currentStage, currentPageLayer);
+    interactiveTransformer.current = createInteractiveTransformer(stage.current, pageLayer.current);
    // Render the fields.
    for (const field of localPageFields) {
@ -176,12 +235,12 @@ export default function EnvelopeEditorFieldsPageRenderer() {
    }
    // Handle stage click to deselect.
-    currentStage.on('mousedown', (e) => {
+    stage.current?.on('click', (e) => {
      removePendingField();
      if (e.target === stage.current) {
        setSelectedFields([]);
-        currentPageLayer.batchDraw();
+        pageLayer.current?.batchDraw();
      }
    });
@ -208,12 +267,12 @@ export default function EnvelopeEditorFieldsPageRenderer() {
      setSelectedFields([e.target]);
    };
-    currentStage.on('dragstart', onDragStartOrEnd);
+    stage.current?.on('dragstart', onDragStartOrEnd);
-    currentStage.on('dragend', onDragStartOrEnd);
+    stage.current?.on('dragend', onDragStartOrEnd);
-    currentStage.on('transformstart', () => setIsFieldChanging(true));
+    stage.current?.on('transformstart', () => setIsFieldChanging(true));
-    currentStage.on('transformend', () => setIsFieldChanging(false));
+    stage.current?.on('transformend', () => setIsFieldChanging(false));
-    currentPageLayer.batchDraw();
+    pageLayer.current.batchDraw();
  };
  /**
@ -225,10 +284,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
   * - Selecting multiple fields
   * - Selecting empty area to create fields
   */
-  const createInteractiveTransformer = (
+  const createInteractiveTransformer = (stage: Konva.Stage, layer: Konva.Layer) => {
    currentStage: Konva.Stage,
    currentPageLayer: Konva.Layer,
  ) => {
    const transformer = new Konva.Transformer({
      rotateEnabled: false,
      keepRatio: false,
@ -245,36 +301,36 @@ export default function EnvelopeEditorFieldsPageRenderer() {
      },
    });
-    currentPageLayer.add(transformer);
+    layer.add(transformer);
    // Add selection rectangle.
    const selectionRectangle = new Konva.Rect({
      fill: 'rgba(24, 160, 251, 0.3)',
      visible: false,
    });
-    currentPageLayer.add(selectionRectangle);
+    layer.add(selectionRectangle);
    let x1: number;
    let y1: number;
    let x2: number;
    let y2: number;
-    currentStage.on('mousedown touchstart', (e) => {
+    stage.on('mousedown touchstart', (e) => {
      // do nothing if we mousedown on any shape
-      if (e.target !== currentStage) {
+      if (e.target !== stage) {
        return;
      }
-      const pointerPosition = currentStage.getPointerPosition();
+      const pointerPosition = stage.getPointerPosition();
      if (!pointerPosition) {
        return;
      }
-      x1 = pointerPosition.x / scale;
+      x1 = pointerPosition.x;
-      y1 = pointerPosition.y / scale;
+      y1 = pointerPosition.y;
-      x2 = pointerPosition.x / scale;
+      x2 = pointerPosition.x;
-      y2 = pointerPosition.y / scale;
+      y2 = pointerPosition.y;
      selectionRectangle.setAttrs({
        x: x1,
@ -285,7 +341,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
      });
    });
-    currentStage.on('mousemove touchmove', () => {
+    stage.on('mousemove touchmove', () => {
      // do nothing if we didn't start selection
      if (!selectionRectangle.visible()) {
        return;
@ -293,14 +349,14 @@ export default function EnvelopeEditorFieldsPageRenderer() {
      selectionRectangle.moveToTop();
-      const pointerPosition = currentStage.getPointerPosition();
+      const pointerPosition = stage.getPointerPosition();
      if (!pointerPosition) {
        return;
      }
-      x2 = pointerPosition.x / scale;
+      x2 = pointerPosition.x;
-      y2 = pointerPosition.y / scale;
+      y2 = pointerPosition.y;
      selectionRectangle.setAttrs({
        x: Math.min(x1, x2),
@ -310,7 +366,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
      });
    });
-    currentStage.on('mouseup touchend', () => {
+    stage.on('mouseup touchend', () => {
      // do nothing if we didn't start selection
      if (!selectionRectangle.visible()) {
        return;
@ -321,41 +377,38 @@ export default function EnvelopeEditorFieldsPageRenderer() {
        selectionRectangle.visible(false);
      });
-      const stageFieldGroups = currentStage.find('.field-group') || [];
+      const stageFieldGroups = stage.find('.field-group') || [];
      const box = selectionRectangle.getClientRect();
      const selectedFieldGroups = stageFieldGroups.filter(
        (shape) => Konva.Util.haveIntersection(box, shape.getClientRect()) && shape.draggable(),
      );
      setSelectedFields(selectedFieldGroups);
      const unscaledBoxWidth = box.width / scale;
      const unscaledBoxHeight = box.height / scale;
      // Create a field if no items are selected or the size is too small.
      if (
        selectedFieldGroups.length === 0 &&
        canvasElement.current &&
-        unscaledBoxWidth > MIN_FIELD_WIDTH_PX &&
+        box.width > MIN_FIELD_WIDTH_PX &&
-        unscaledBoxHeight > MIN_FIELD_HEIGHT_PX &&
+        box.height > MIN_FIELD_HEIGHT_PX &&
        editorFields.selectedRecipient &&
        canRecipientFieldsBeModified(editorFields.selectedRecipient, envelope.fields)
      ) {
        const pendingFieldCreation = new Konva.Rect({
          name: 'pending-field-creation',
-          x: box.x / scale,
+          x: box.x,
-          y: box.y / scale,
+          y: box.y,
-          width: unscaledBoxWidth,
+          width: box.width,
-          height: unscaledBoxHeight,
+          height: box.height,
          fill: 'rgba(24, 160, 251, 0.3)',
        });
-        currentPageLayer.add(pendingFieldCreation);
+        layer.add(pendingFieldCreation);
        setPendingFieldCreation(pendingFieldCreation);
      }
    });
    // Clicks should select/deselect shapes
-    currentStage.on('click tap', function (e) {
+    stage.on('click tap', function (e) {
      // if we are selecting with rect, do nothing
      if (
        selectionRectangle.visible() &&
@ -366,7 +419,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
      }
      // If empty area clicked, remove all selections
-      if (e.target === stage.current) {
+      if (e.target === stage) {
        setSelectedFields([]);
        return;
      }
@ -415,15 +468,20 @@ export default function EnvelopeEditorFieldsPageRenderer() {
        group.name() === 'field-group' &&
        !localPageFields.some((field) => field.formId === group.id())
      ) {
        console.log('Field removed, removing from canvas');
        group.destroy();
      }
    });
    // If it exists, rerender.
    localPageFields.forEach((field) => {
      console.log('Field created/updated, rendering on canvas');
      renderFieldOnLayer(field);
    });
    // If it doesn't exist, render it.
    //
    // Rerender the transformer
    interactiveTransformer.current?.forceUpdate();
@ -497,13 +555,15 @@ export default function EnvelopeEditorFieldsPageRenderer() {
      return;
    }
    const { height: pageHeight, width: pageWidth } = getBoundingClientRect(canvasElement.current);
    const { fieldX, fieldY, fieldWidth, fieldHeight } = convertPixelToPercentage({
      width: pixelWidth,
      height: pixelHeight,
      positionX: pixelX,
      positionY: pixelY,
-      pageWidth: unscaledViewport.width,
+      pageWidth,
-      pageHeight: unscaledViewport.height,
+      pageHeight,
    });
    editorFields.addField({
@ -537,10 +597,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
  }
  return (
-    <div
+    <div className="relative" key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}>
      className="relative w-full"
      key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}
    >
      {selectedKonvaFieldGroups.length > 0 &&
        interactiveTransformer.current &&
        !isFieldChanging && (
@ -592,23 +649,17 @@ export default function EnvelopeEditorFieldsPageRenderer() {
          </div>
        )}
      {/* Todo: Envelopes - This will not overflow the page when close to edges */}
      {pendingFieldCreation && (
        <div
          style={{
            position: 'absolute',
-            top:
+            top: pendingFieldCreation.y() + pendingFieldCreation.getClientRect().height + 5 + 'px',
-              pendingFieldCreation.y() * scale +
+            left: pendingFieldCreation.x() + pendingFieldCreation.getClientRect().width / 2 + 'px',
              pendingFieldCreation.getClientRect().height +
              5 +
              'px',
            left:
              pendingFieldCreation.x() * scale +
              pendingFieldCreation.getClientRect().width / 2 +
              'px',
            transform: 'translateX(-50%)',
            zIndex: 50,
          }}
-          className="text-muted-foreground grid w-max grid-cols-5 gap-x-1 gap-y-0.5 rounded-md border bg-white p-1 shadow-sm"
+          className="text-muted-foreground grid w-fit grid-cols-5 gap-x-1 gap-y-0.5 rounded-md border bg-white p-1 shadow-sm"
        >
          {fieldButtonList.map((field) => (
            <button
@ -622,15 +673,13 @@ export default function EnvelopeEditorFieldsPageRenderer() {
        </div>
      )}
-      {/* The element Konva will inject it's canvas into. */}
+      <div className="konva-container absolute inset-0 z-10" ref={konvaContainer}></div>
      <div className="konva-container absolute inset-0 z-10 w-full" ref={konvaContainer}></div>
      {/* Canvas the PDF will be rendered on. */}
      <canvas
        className={`${_className}__canvas z-0`}
        height={viewport.height}
        ref={canvasElement}
-        height={scaledViewport.height}
+        width={viewport.width}
        width={scaledViewport.width}
      />
    </div>
  );
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-header.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-header.tsx
@ -13,6 +13,7 @@ import { match } from 'ts-pattern';
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { mapSecondaryIdToTemplateId } from '@documenso/lib/utils/envelope';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
@ -21,8 +22,8 @@ import { EnvelopeDistributeDialog } from '~/components/dialogs/envelope-distribu
 import { EnvelopeRedistributeDialog } from '~/components/dialogs/envelope-redistribute-dialog';
 import { TemplateUseDialog } from '~/components/dialogs/template-use-dialog';
 import { BrandingLogo } from '~/components/general/branding-logo';
 import { DocumentAttachmentsPopover } from '~/components/general/document/document-attachments-popover';
 import { EnvelopeEditorSettingsDialog } from '~/components/general/envelope-editor/envelope-editor-settings-dialog';
 import { useCurrentTeam } from '~/providers/team';
 import { TemplateDirectLinkBadge } from '../template/template-direct-link-badge';
 import { EnvelopeItemTitleInput } from './envelope-editor-title-input';
@ -30,34 +31,30 @@ import { EnvelopeItemTitleInput } from './envelope-editor-title-input';
 export default function EnvelopeEditorHeader() {
  const { t } = useLingui();
-  const {
+  const team = useCurrentTeam();
-    envelope,
+
-    isDocument,
+  const { envelope, isDocument, isTemplate, updateEnvelope, autosaveError } =
-    isTemplate,
+    useCurrentEnvelopeEditor();
-    updateEnvelope,
+
-    autosaveError,
+  // Todo: Envelopes this probably won't work with embed? Maybe hide the back items when no team?
-    relativePath,
+
-    editorFields,
+  const rootPath = isDocument ? formatDocumentsPath(team.url) : formatTemplatesPath(team.url);
  } = useCurrentEnvelopeEditor();
  return (
-    <nav className="bg-background border-border w-full border-b px-4 py-3 md:px-6">
+    <nav className="w-full border-b border-gray-200 bg-white px-6 py-3">
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-4">
          <Link to="/">
            <BrandingLogo className="h-6 w-auto" />
          </Link>
          <Separator orientation="vertical" className="h-6" />
          <div className="flex items-center space-x-2">
            <EnvelopeItemTitleInput
              disabled={envelope.status !== DocumentStatus.DRAFT}
              value={envelope.title}
              onChange={(title) => {
                updateEnvelope({
-                  data: {
+                  title,
                    title,
                  },
                });
              }}
              placeholder={t`Envelope Title`}
@ -134,8 +131,6 @@ export default function EnvelopeEditorHeader() {
        </div>
        <div className="flex items-center space-x-2">
          <DocumentAttachmentsPopover envelopeId={envelope.id} buttonSize="sm" />
          <EnvelopeEditorSettingsDialog
            trigger={
              <Button variant="outline" size="sm">
@ -147,11 +142,7 @@ export default function EnvelopeEditorHeader() {
          {isDocument && (
            <>
              <EnvelopeDistributeDialog
-                envelope={{
+                envelope={envelope}
                  ...envelope,
                  fields: editorFields.localFields,
                }}
                documentRootPath={relativePath.documentRootPath}
                trigger={
                  <Button size="sm">
                    <SendIcon className="mr-2 h-4 w-4" />
@ -174,11 +165,10 @@ export default function EnvelopeEditorHeader() {
          {isTemplate && (
            <TemplateUseDialog
              envelopeId={envelope.id}
              templateId={mapSecondaryIdToTemplateId(envelope.secondaryId)}
              templateSigningOrder={envelope.documentMeta?.signingOrder}
              recipients={envelope.recipients}
-              documentRootPath={relativePath.documentRootPath}
+              documentRootPath={rootPath}
              trigger={
                <Button size="sm">
                  <Trans>Use Template</Trans>
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-page-fields.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-page-fields.tsx
@ -5,7 +5,6 @@ import { msg } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { FieldType, RecipientRole } from '@prisma/client';
 import { FileTextIcon } from 'lucide-react';
 import { Link } from 'react-router';
 import { isDeepEqual } from 'remeda';
 import { match } from 'ts-pattern';
@ -21,7 +20,6 @@ import type {
  TNameFieldMeta,
  TNumberFieldMeta,
  TRadioFieldMeta,
  TSignatureFieldMeta,
  TTextFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
@ -39,7 +37,6 @@ import { EditorFieldInitialsForm } from '~/components/forms/editor/editor-field-
 import { EditorFieldNameForm } from '~/components/forms/editor/editor-field-name-form';
 import { EditorFieldNumberForm } from '~/components/forms/editor/editor-field-number-form';
 import { EditorFieldRadioForm } from '~/components/forms/editor/editor-field-radio-form';
 import { EditorFieldSignatureForm } from '~/components/forms/editor/editor-field-signature-form';
 import { EditorFieldTextForm } from '~/components/forms/editor/editor-field-text-form';
 import { EnvelopeEditorFieldDragDrop } from './envelope-editor-fields-drag-drop';
@ -63,8 +60,8 @@ const FieldSettingsTypeTranslations: Record<FieldType, MessageDescriptor> = {
  [FieldType.DROPDOWN]: msg`Dropdown Settings`,
 };
-export const EnvelopeEditorFieldsPage = () => {
+export const EnvelopeEditorPageFields = () => {
-  const { envelope, editorFields, relativePath } = useCurrentEnvelopeEditor();
+  const { envelope, editorFields } = useCurrentEnvelopeEditor();
  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
@ -107,12 +104,12 @@ export const EnvelopeEditorFieldsPage = () => {
  return (
    <div className="relative flex h-full">
-      <div className="flex w-full flex-col overflow-y-auto">
+      <div className="flex w-full flex-col">
        {/* Horizontal envelope item selector */}
        <EnvelopeRendererFileSelector fields={editorFields.localFields} />
        {/* Document View */}
-        <div className="mt-4 flex h-full justify-center p-4">
+        <div className="mt-4 flex justify-center">
          {currentEnvelopeItem !== null ? (
            <PDFViewerKonvaLazy customPageRenderer={EnvelopeEditorFieldsPageRenderer} />
          ) : (
@ -131,23 +128,17 @@ export const EnvelopeEditorFieldsPage = () => {
      {/* Right Section - Form Fields Panel */}
      {currentEnvelopeItem && (
-        <div className="bg-background border-border sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l py-4">
+        <div className="sticky top-0 h-[calc(100vh-73px)] w-80 flex-shrink-0 overflow-y-auto border-l border-gray-200 bg-white py-4">
          {/* Recipient selector section. */}
          <section className="px-4">
-            <h3 className="text-foreground mb-2 text-sm font-semibold">
+            <h3 className="mb-2 text-sm font-semibold text-gray-900">
              <Trans>Selected Recipient</Trans>
            </h3>
            {envelope.recipients.length === 0 ? (
              <Alert variant="warning">
-                <AlertDescription className="flex flex-col gap-2">
+                <AlertDescription>
                  <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>
            ) : (
@ -179,7 +170,7 @@ export const EnvelopeEditorFieldsPage = () => {
          {/* Add fields section. */}
          <section className="px-4">
-            <h3 className="text-foreground mb-2 text-sm font-semibold">
+            <h3 className="mb-2 text-sm font-semibold text-gray-900">
              <Trans>Add Fields</Trans>
            </h3>
@ -191,7 +182,7 @@ export const EnvelopeEditorFieldsPage = () => {
          {/* Field details section. */}
          <AnimateGenericFadeInOut key={editorFields.selectedField?.formId}>
-            {selectedField && (
+            {selectedField && selectedField.type !== FieldType.SIGNATURE && (
              <section>
                <Separator className="my-4" />
@ -201,12 +192,6 @@ export const EnvelopeEditorFieldsPage = () => {
                  </h3>
                  {match(selectedField.type)
                    .with(FieldType.SIGNATURE, () => (
                      <EditorFieldSignatureForm
                        value={selectedField?.fieldMeta as TSignatureFieldMeta | undefined}
                        onValueChange={(value) => updateSelectedFieldMeta(value)}
                      />
                    ))
                    .with(FieldType.CHECKBOX, () => (
                      <EditorFieldCheckboxForm
                        value={selectedField?.fieldMeta as TCheckboxFieldMeta | undefined}
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-page-preview-renderer.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-page-preview-renderer.tsx
@ -0,0 +1,176 @@
 import { useEffect, useMemo, useRef } from 'react';
 import Konva from 'konva';
 import type { Layer } from 'konva/lib/Layer';
 import type { RenderParameters } from 'pdfjs-dist/types/src/display/api';
 import { usePageContext } from 'react-pdf';
 import type { TLocalField } from '@documenso/lib/client-only/hooks/use-editor-fields';
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
 export default function EnvelopeEditorPagePreviewRenderer() {
  const pageContext = usePageContext();
  if (!pageContext) {
    throw new Error('Unable to find Page context.');
  }
  const { _className, page, rotate, scale } = pageContext;
  if (!page) {
    throw new Error('Attempted to render page canvas, but no page was specified.');
  }
  const { editorFields, getRecipientColorKey } = useCurrentEnvelopeEditor();
  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
  const canvasElement = useRef<HTMLCanvasElement>(null);
  const konvaContainer = useRef<HTMLDivElement>(null);
  const stage = useRef<Konva.Stage | null>(null);
  const pageLayer = useRef<Layer | null>(null);
  const viewport = useMemo(
    () => page.getViewport({ scale, rotation: rotate }),
    [page, rotate, scale],
  );
  const localPageFields = useMemo(
    () =>
      editorFields.localFields.filter(
        (field) =>
          field.page === pageContext.pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
      ),
    [editorFields.localFields, pageContext.pageNumber],
  );
  // Custom renderer from Konva examples.
  useEffect(
    function drawPageOnCanvas() {
      if (!page) {
        return;
      }
      const { current: canvas } = canvasElement;
      const { current: container } = konvaContainer;
      if (!canvas || !container) {
        return;
      }
      const renderContext: RenderParameters = {
        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
        canvasContext: canvas.getContext('2d', { alpha: false }) as CanvasRenderingContext2D,
        viewport,
      };
      const cancellable = page.render(renderContext);
      const runningTask = cancellable;
      cancellable.promise.catch(() => {
        // Intentionally empty
      });
      void cancellable.promise.then(() => {
        createPageCanvas(container);
      });
      return () => {
        runningTask.cancel();
      };
    },
    [page, viewport],
  );
  const renderFieldOnLayer = (field: TLocalField) => {
    if (!pageLayer.current) {
      console.error('Layer not loaded yet');
      return;
    }
    renderField({
      pageLayer: pageLayer.current,
      field: {
        renderId: field.formId,
        ...field,
        customText: '',
        inserted: false,
        fieldMeta: field.fieldMeta,
      },
      pageWidth: viewport.width,
      pageHeight: viewport.height,
      color: getRecipientColorKey(field.recipientId),
      editable: false,
      mode: 'export',
    });
  };
  /**
   * Create the initial Konva page canvas and initialize all fields and interactions.
   */
  const createPageCanvas = (container: HTMLDivElement) => {
    stage.current = new Konva.Stage({
      container,
      width: viewport.width,
      height: viewport.height,
    });
    // Create the main layer for interactive elements.
    pageLayer.current = new Konva.Layer();
    stage.current?.add(pageLayer.current);
    // Render the fields.
    for (const field of localPageFields) {
      renderFieldOnLayer(field);
    }
    pageLayer.current.batchDraw();
  };
  /**
   * Render fields when they are added or removed from the localFields.
   */
  useEffect(() => {
    if (!pageLayer.current || !stage.current) {
      return;
    }
    // If doesn't exist in localFields, destroy it since it's been deleted.
    pageLayer.current.find('Group').forEach((group) => {
      if (
        group.name() === 'field-group' &&
        !localPageFields.some((field) => field.formId === group.id())
      ) {
        console.log('Field removed, removing from canvas');
        group.destroy();
      }
    });
    // If it exists, rerender.
    localPageFields.forEach((field) => {
      console.log('Field created/updated, rendering on canvas');
      renderFieldOnLayer(field);
    });
    pageLayer.current.batchDraw();
  }, [localPageFields]);
  if (!currentEnvelopeItem) {
    return null;
  }
  return (
    <div className="relative" key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}>
      <div className="konva-container absolute inset-0 z-10" ref={konvaContainer}></div>
      <canvas
        className={`${_className}__canvas z-0`}
        height={viewport.height}
        ref={canvasElement}
        width={viewport.width}
      />
    </div>
  );
 }
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-page-preview.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-page-preview.tsx
@ -1,7 +1,7 @@
 import { lazy, useEffect, useState } from 'react';
 import { Trans } from '@lingui/react/macro';
-import { ConstructionIcon, FileTextIcon } from 'lucide-react';
+import { FileTextIcon } from 'lucide-react';
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
@ -13,9 +13,11 @@ import { Separator } from '@documenso/ui/primitives/separator';
 import { EnvelopeRendererFileSelector } from './envelope-file-selector';
-const EnvelopeGenericPageRenderer = lazy(async () => import('./envelope-generic-page-renderer'));
+const EnvelopeEditorPagePreviewRenderer = lazy(
  async () => import('./envelope-editor-page-preview-renderer'),
 );
-export const EnvelopeEditorPreviewPage = () => {
+export const EnvelopeEditorPagePreview = () => {
  const { envelope, editorFields } = useCurrentEnvelopeEditor();
  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
@ -33,7 +35,7 @@ export const EnvelopeEditorPreviewPage = () => {
  return (
    <div className="relative flex h-full">
-      <div className="flex w-full flex-col overflow-y-auto">
+      <div className="flex w-full flex-col">
        {/* Horizontal envelope item selector */}
        <EnvelopeRendererFileSelector fields={editorFields.localFields} />
@ -48,41 +50,25 @@ export const EnvelopeEditorPreviewPage = () => {
            </AlertDescription>
          </Alert>
-          {/* Coming soon section */}
+          {currentEnvelopeItem !== null ? (
-          <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">
+            <PDFViewerKonvaLazy customPageRenderer={EnvelopeEditorPagePreviewRenderer} />
-            <div className="flex w-full flex-col items-center justify-center gap-2 py-32">
+          ) : (
-              <ConstructionIcon className="text-muted-foreground h-10 w-10" />
+            <div className="flex flex-col items-center justify-center py-32">
-              <h3 className="text-foreground text-sm font-semibold">
+              <FileTextIcon className="text-muted-foreground h-10 w-10" />
-                <Trans>Coming soon</Trans>
+              <p className="text-foreground mt-1 text-sm">
-              </h3>
+                <Trans>No documents found</Trans>
-              <p className="text-muted-foreground text-sm">
+              </p>
-                <Trans>This feature is coming soon</Trans>
+              <p className="text-muted-foreground mt-1 text-sm">
                <Trans>Please upload a document to continue</Trans>
              </p>
            </div>
-          </div>
+          )}
          {/* Todo: Envelopes - Remove div after preview mode is implemented */}
          <div className="hidden">
            {currentEnvelopeItem !== null ? (
              <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
            ) : (
              <div className="flex flex-col items-center justify-center py-32">
                <FileTextIcon className="text-muted-foreground h-10 w-10" />
                <p className="text-foreground mt-1 text-sm">
                  <Trans>No documents found</Trans>
                </p>
                <p className="text-muted-foreground mt-1 text-sm">
                  <Trans>Please upload a document to continue</Trans>
                </p>
              </div>
            )}
          </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">
+        <div className="sticky top-0 h-[calc(100vh-73px)] 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">
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-page-upload.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-page-upload.tsx
@ -7,16 +7,12 @@ import { Trans, useLingui } from '@lingui/react/macro';
 import { DocumentStatus } from '@prisma/client';
 import { FileWarningIcon, GripVerticalIcon, Loader2 } from 'lucide-react';
 import { X } from 'lucide-react';
 import { ErrorCode as DropzoneErrorCode, type FileRejection } from 'react-dropzone';
 import { Link } from 'react-router';
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import {
  useCurrentEnvelopeEditor,
  useDebounceFunction,
 } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 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';
@ -30,9 +26,9 @@ import {
  CardTitle,
 } from '@documenso/ui/primitives/card';
 import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 import { EnvelopeItemDeleteDialog } from '~/components/dialogs/envelope-item-delete-dialog';
 import { useCurrentTeam } from '~/providers/team';
 import { EnvelopeEditorRecipientForm } from './envelope-editor-recipient-form';
 import { EnvelopeItemTitleInput } from './envelope-editor-title-input';
@ -45,13 +41,11 @@ type LocalFile = {
  isError: boolean;
 };
-export const EnvelopeEditorUploadPage = () => {
+export const EnvelopeEditorPageUpload = () => {
-  const organisation = useCurrentOrganisation();
+  const team = useCurrentTeam();
  const { t } = useLingui();
-  const { envelope, setLocalEnvelope, relativePath } = useCurrentEnvelopeEditor();
+
-  const { maximumEnvelopeItemCount, remaining } = useLimits();
+  const { envelope, setLocalEnvelope } = useCurrentEnvelopeEditor();
  const { toast } = useToast();
  const [localFiles, setLocalFiles] = useState<LocalFile[]>(
    envelope.envelopeItems
@ -226,56 +220,12 @@ export const EnvelopeEditorUploadPage = () => {
    debouncedUpdateEnvelopeItems(newLocalFilesValue);
  };
  const dropzoneDisabledMessage = useMemo(() => {
    if (!canItemsBeModified) {
      return msg`Cannot upload items after the document has been sent`;
    }
    if (organisation.subscription && remaining.documents === 0) {
      return msg`Document upload disabled due to unpaid invoices`;
    }
    if (maximumEnvelopeItemCount <= localFiles.length) {
      return msg`You cannot upload more than ${maximumEnvelopeItemCount} items per envelope.`;
    }
    return null;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [localFiles.length, maximumEnvelopeItemCount, remaining.documents]);
  const onFileDropRejected = (fileRejections: FileRejection[]) => {
    const maxItemsReached = fileRejections.some((fileRejection) =>
      fileRejection.errors.some((error) => error.code === DropzoneErrorCode.TooManyFiles),
    );
    if (maxItemsReached) {
      toast({
        title: t`You cannot upload more than ${maximumEnvelopeItemCount} items per envelope.`,
        duration: 5000,
        variant: 'destructive',
      });
      return;
    }
    toast({
      title: t`Upload failed`,
      description: t`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`,
      duration: 5000,
      variant: 'destructive',
    });
  };
  return (
    <div className="mx-auto max-w-4xl space-y-6 p-8">
      <Card backdropBlur={false} className="border">
        <CardHeader className="pb-3">
-          <CardTitle>
+          <CardTitle>Documents</CardTitle>
-            <Trans>Documents</Trans>
+          <CardDescription>Add and configure multiple documents</CardDescription>
          </CardTitle>
          <CardDescription>
            <Trans>Add and configure multiple documents</Trans>
          </CardDescription>
        </CardHeader>
        <CardContent>
@ -283,11 +233,9 @@ export const EnvelopeEditorUploadPage = () => {
            onDrop={onFileDrop}
            allowMultiple
            className="pb-4 pt-6"
-            disabled={dropzoneDisabledMessage !== null}
+            disabled={!canItemsBeModified}
-            disabledMessage={dropzoneDisabledMessage || undefined}
+            disabledMessage={msg`Cannot upload items after the document has been sent`}
            disabledHeading={msg`Upload disabled`}
            maxFiles={maximumEnvelopeItemCount - localFiles.length}
            onDropRejected={onFileDropRejected}
          />
          {/* Uploaded Files List */}
@ -308,7 +256,7 @@ export const EnvelopeEditorUploadPage = () => {
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            style={provided.draggableProps.style}
-                            className={`bg-accent/50 flex items-center justify-between rounded-lg p-3 transition-shadow ${
+                            className={`flex items-center justify-between rounded-lg bg-gray-50 p-3 transition-shadow ${
                              snapshot.isDragging ? 'shadow-md' : ''
                            }`}
                          >
@ -334,7 +282,7 @@ export const EnvelopeEditorUploadPage = () => {
                                  <p className="text-sm font-medium">{localFile.title}</p>
                                )}
-                                <div className="text-muted-foreground text-xs">
+                                <div className="text-xs text-gray-500">
                                  {localFile.isUploading ? (
                                    <Trans>Uploading</Trans>
                                  ) : localFile.isError ? (
@ -347,7 +295,7 @@ export const EnvelopeEditorUploadPage = () => {
                            <div className="flex items-center space-x-2">
                              {localFile.isUploading && (
                                <div className="flex h-6 w-10 items-center justify-center">
-                                  <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
+                                  <Loader2 className="h-4 w-4 animate-spin text-gray-500" />
                                </div>
                              )}
@ -390,7 +338,7 @@ export const EnvelopeEditorUploadPage = () => {
      <div className="flex justify-end">
        <Button asChild>
-          <Link to={`${relativePath.editorPath}?step=addFields`}>
+          <Link to={`/t/${team.url}/documents/${envelope.id}/edit?step=addFields`}>
            <Trans>Add Fields</Trans>
          </Link>
        </Button>
--- 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
@ -14,7 +14,7 @@ import { DocumentSigningOrder, EnvelopeType, RecipientRole, SendStatus } from '@
 import { motion } from 'framer-motion';
 import { GripVerticalIcon, HelpCircleIcon, PlusIcon, TrashIcon } from 'lucide-react';
 import { useFieldArray, useForm, useWatch } from 'react-hook-form';
-import { isDeepEqual, prop, sortBy } from 'remeda';
+import { prop, sortBy } from 'remeda';
 import { z } from 'zod';
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
@ -75,6 +75,7 @@ const ZEnvelopeRecipientsForm = z.object({
      actionAuth: z.array(ZRecipientActionAuthTypesSchema).optional().default([]),
    }),
  ),
  // Todo: Envelopes - These aren't synced to the server
  signingOrder: z.nativeEnum(DocumentSigningOrder),
  allowDictateNextSigner: z.boolean().default(false),
 });
@ -82,7 +83,7 @@ const ZEnvelopeRecipientsForm = z.object({
 type TEnvelopeRecipientsForm = z.infer<typeof ZEnvelopeRecipientsForm>;
 export const EnvelopeEditorRecipientForm = () => {
-  const { envelope, setRecipientsDebounced, updateEnvelope } = useCurrentEnvelopeEditor();
+  const { envelope, setRecipientsDebounced } = useCurrentEnvelopeEditor();
  const organisation = useCurrentOrganisation();
@ -148,7 +149,8 @@ export const EnvelopeEditorRecipientForm = () => {
    },
  });
-  const recipientHasAuthSettings = useMemo(() => {
+  // Always show advanced settings if any recipient has auth options.
  const alwaysShowAdvancedSettings = useMemo(() => {
    const recipientHasAuthOptions = recipients.find((recipient) => {
      const recipientAuthOptions = ZRecipientAuthOptionsSchema.parse(recipient.authOptions);
@ -164,7 +166,7 @@ export const EnvelopeEditorRecipientForm = () => {
    return recipientHasAuthOptions !== undefined || formHasActionAuth !== undefined;
  }, [recipients, form]);
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(recipientHasAuthSettings);
+  const [showAdvancedSettings, setShowAdvancedSettings] = useState(alwaysShowAdvancedSettings);
  const [showSigningOrderConfirmation, setShowSigningOrderConfirmation] = useState(false);
  const {
@ -449,8 +451,6 @@ export const EnvelopeEditorRecipientForm = () => {
      shouldValidate: true,
      shouldDirty: true,
    });
    void form.trigger();
  }, [form]);
  // Dupecode/Inefficient: Done because native isValid won't work for our usecase.
@ -460,61 +460,15 @@ export const EnvelopeEditorRecipientForm = () => {
      return;
    }
-    const formValueSigners = formValues.signers || [];
+    const validatedFormValues = ZEnvelopeRecipientsForm.safeParse(formValues);
-    // Remove the last signer if it's empty.
+    if (validatedFormValues.success) {
-    const nonEmptyRecipients = formValueSigners.filter((signer, i) => {
+      console.log('validatedFormValues', validatedFormValues);
      if (i === formValueSigners.length - 1 && signer.email === '') {
        return false;
      }
      return true;
    });
    const validatedFormValues = ZEnvelopeRecipientsForm.safeParse({
      ...formValues,
      signers: nonEmptyRecipients,
    });
    if (!validatedFormValues.success) {
      return;
    }
    const { data } = validatedFormValues;
    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) => {
        const recipient = recipients.find((recipient) => recipient.id === signer.id);
        if (!recipient) {
          return true;
        }
        return (
          signer.email !== recipient.email ||
          signer.name !== recipient.name ||
          signer.role !== recipient.role ||
          signer.signingOrder !== recipient.signingOrder ||
          !isDeepEqual(signer.actionAuth, recipient.authOptions?.actionAuth)
        );
      });
    if (hasSignersChanged) {
      setRecipientsDebounced(validatedFormValues.data.signers);
    }
-    if (hasSigningOrderChanged || hasAllowDictateNextSignerChanged) {
+      // Todo: Envelopes - Need to save the other data as well
-      updateEnvelope({
+      // setEnvelope
        meta: {
          signingOrder: validatedFormValues.data.signingOrder,
          allowDictateNextSigner: validatedFormValues.data.allowDictateNextSigner,
        },
      });
    }
  }, [formValues]);
@ -554,17 +508,18 @@ export const EnvelopeEditorRecipientForm = () => {
      <CardContent>
        <AnimateGenericFadeInOut motionKey={showAdvancedSettings ? 'Show' : 'Hide'}>
          <Form {...form}>
-            <div className="bg-accent/50 -mt-2 mb-2 space-y-4 rounded-md p-4">
+            <div className="-mt-2 mb-2 space-y-4 rounded-md bg-gray-50/80 p-4">
-              {organisation.organisationClaim.flags.cfr21 && (
+              {!alwaysShowAdvancedSettings && organisation.organisationClaim.flags.cfr21 && (
                <div className="flex flex-row items-center">
                  <Checkbox
                    id="showAdvancedRecipientSettings"
                    className="h-5 w-5"
                    checked={showAdvancedSettings}
                    onCheckedChange={(value) => setShowAdvancedSettings(Boolean(value))}
                  />
                  <label
-                    className="ml-2 text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    className="text-muted-foreground ml-2 text-sm"
                    htmlFor="showAdvancedRecipientSettings"
                  >
                    <Trans>Show advanced settings</Trans>
@ -723,202 +678,152 @@ export const EnvelopeEditorRecipientForm = () => {
                            <motion.fieldset
                              data-native-id={signer.id}
                              disabled={isSubmitting || !canRecipientBeModified(signer.id)}
-                              className={cn('pb-2', {
+                              className={cn('grid grid-cols-10 items-end gap-2 pb-2', {
-                                'border-b pb-4':
+                                'border-b pt-2': showAdvancedSettings,
-                                  showAdvancedSettings && index !== signers.length - 1,
+                                'grid-cols-12 pr-3': isSigningOrderSequential,
                                'pt-2': showAdvancedSettings && index === 0,
                                'pr-3': isSigningOrderSequential,
                              })}
                            >
-                              <div className="flex flex-row items-center gap-x-2">
+                              {isSigningOrderSequential && (
-                                {isSigningOrderSequential && (
+                                <FormField
-                                  <FormField
+                                  control={form.control}
-                                    control={form.control}
+                                  name={`signers.${index}.signingOrder`}
-                                    name={`signers.${index}.signingOrder`}
+                                  render={({ field }) => (
-                                    render={({ field }) => (
+                                    <FormItem
-                                      <FormItem
+                                      className={cn(
-                                        className={cn(
+                                        'col-span-1 mt-auto flex items-center gap-x-1 space-y-0',
-                                          'mt-auto flex items-center gap-x-1 space-y-0',
+                                        {
-                                          {
+                                          'mb-6':
-                                            'mb-6':
+                                            form.formState.errors.signers?.[index] &&
-                                              form.formState.errors.signers?.[index] &&
+                                            !form.formState.errors.signers[index]?.signingOrder,
-                                              !form.formState.errors.signers[index]?.signingOrder,
+                                        },
-                                          },
+                                      )}
-                                        )}
+                                    >
-                                      >
+                                      <GripVerticalIcon className="h-5 w-5 flex-shrink-0 opacity-40" />
-                                        <GripVerticalIcon className="h-5 w-5 flex-shrink-0 opacity-40" />
+                                      <FormControl>
-                                        <FormControl>
+                                        <Input
-                                          <Input
+                                          type="number"
-                                            type="number"
+                                          max={signers.length}
-                                            max={signers.length}
+                                          data-testid="signing-order-input"
-                                            data-testid="signing-order-input"
+                                          className={cn(
-                                            className={cn(
+                                            'w-full text-center',
-                                              'w-10 text-center',
+                                            '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
-                                              '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+                                          )}
-                                            )}
+                                          {...field}
-                                            {...field}
+                                          onChange={(e) => {
-                                            onChange={(e) => {
+                                            field.onChange(e);
-                                              field.onChange(e);
+                                            handleSigningOrderChange(index, e.target.value);
-                                              handleSigningOrderChange(index, e.target.value);
+                                          }}
-                                            }}
+                                          onBlur={(e) => {
-                                            onBlur={(e) => {
+                                            field.onBlur();
-                                              field.onBlur();
+                                            handleSigningOrderChange(index, e.target.value);
-                                              handleSigningOrderChange(index, e.target.value);
+                                          }}
-                                            }}
+                                          disabled={
-                                            disabled={
+                                            snapshot.isDragging ||
-                                              snapshot.isDragging ||
+                                            isSubmitting ||
-                                              isSubmitting ||
+                                            !canRecipientBeModified(signer.id)
-                                              !canRecipientBeModified(signer.id)
+                                          }
-                                            }
+                                        />
-                                          />
+                                      </FormControl>
-                                        </FormControl>
+                                      <FormMessage />
-                                        <FormMessage />
+                                    </FormItem>
-                                      </FormItem>
+                                  )}
                                />
                              )}
                              <FormField
                                control={form.control}
                                name={`signers.${index}.email`}
                                render={({ field }) => (
                                  <FormItem
                                    className={cn('relative', {
                                      'mb-6':
                                        form.formState.errors.signers?.[index] &&
                                        !form.formState.errors.signers[index]?.email,
                                      'col-span-4': !showAdvancedSettings,
                                      'col-span-5': showAdvancedSettings,
                                    })}
                                  >
                                    {!showAdvancedSettings && index === 0 && (
                                      <FormLabel required>
                                        <Trans>Email</Trans>
                                      </FormLabel>
                                    )}
-                                  />
+
                                    <FormControl>
                                      <RecipientAutoCompleteInput
                                        type="email"
                                        placeholder={t`Email`}
                                        value={field.value}
                                        disabled={
                                          snapshot.isDragging ||
                                          isSubmitting ||
                                          !canRecipientBeModified(signer.id)
                                        }
                                        options={recipientSuggestions}
                                        onSelect={(suggestion) =>
                                          handleRecipientAutoCompleteSelect(index, suggestion)
                                        }
                                        onSearchQueryChange={(query) => {
                                          field.onChange(query);
                                          setRecipientSearchQuery(query);
                                        }}
                                        loading={isLoading}
                                        data-testid="signer-email-input"
                                        maxLength={254}
                                      />
                                    </FormControl>
                                    <FormMessage />
                                  </FormItem>
                                )}
                              />
-                                <FormField
+                              <FormField
-                                  control={form.control}
+                                control={form.control}
-                                  name={`signers.${index}.email`}
+                                name={`signers.${index}.name`}
-                                  render={({ field }) => (
+                                render={({ field }) => (
-                                    <FormItem
+                                  <FormItem
-                                      className={cn('relative w-full', {
+                                    className={cn({
-                                        'mb-6':
+                                      'mb-6':
-                                          form.formState.errors.signers?.[index] &&
+                                        form.formState.errors.signers?.[index] &&
-                                          !form.formState.errors.signers[index]?.email,
+                                        !form.formState.errors.signers[index]?.name,
-                                      })}
+                                      'col-span-4': !showAdvancedSettings,
-                                    >
+                                      'col-span-5': showAdvancedSettings,
-                                      {!showAdvancedSettings && index === 0 && (
+                                    })}
-                                        <FormLabel required>
+                                  >
-                                          <Trans>Email</Trans>
+                                    {!showAdvancedSettings && index === 0 && (
-                                        </FormLabel>
+                                      <FormLabel>
-                                      )}
+                                        <Trans>Name</Trans>
                                      </FormLabel>
                                    )}
-                                      <FormControl>
+                                    <FormControl>
-                                        <RecipientAutoCompleteInput
+                                      <RecipientAutoCompleteInput
-                                          type="email"
+                                        type="text"
-                                          placeholder={t`Email`}
+                                        placeholder={t`Name`}
-                                          value={field.value}
+                                        {...field}
-                                          disabled={
+                                        disabled={
-                                            snapshot.isDragging ||
+                                          snapshot.isDragging ||
-                                            isSubmitting ||
+                                          isSubmitting ||
-                                            !canRecipientBeModified(signer.id)
+                                          !canRecipientBeModified(signer.id)
-                                          }
+                                        }
-                                          options={recipientSuggestions}
+                                        options={recipientSuggestions}
-                                          onSelect={(suggestion) =>
+                                        onSelect={(suggestion) =>
-                                            handleRecipientAutoCompleteSelect(index, suggestion)
+                                          handleRecipientAutoCompleteSelect(index, suggestion)
-                                          }
+                                        }
-                                          onSearchQueryChange={(query) => {
+                                        onSearchQueryChange={(query) => {
-                                            field.onChange(query);
+                                          field.onChange(query);
-                                            setRecipientSearchQuery(query);
+                                          setRecipientSearchQuery(query);
-                                          }}
+                                        }}
-                                          loading={isLoading}
+                                        loading={isLoading}
-                                          data-testid="signer-email-input"
+                                        maxLength={255}
-                                          maxLength={254}
+                                      />
-                                        />
+                                    </FormControl>
                                      </FormControl>
-                                      <FormMessage />
+                                    <FormMessage />
-                                    </FormItem>
+                                  </FormItem>
-                                  )}
+                                )}
-                                />
+                              />
                                <FormField
                                  control={form.control}
                                  name={`signers.${index}.name`}
                                  render={({ field }) => (
                                    <FormItem
                                      className={cn('w-full', {
                                        'mb-6':
                                          form.formState.errors.signers?.[index] &&
                                          !form.formState.errors.signers[index]?.name,
                                      })}
                                    >
                                      {!showAdvancedSettings && index === 0 && (
                                        <FormLabel>
                                          <Trans>Name</Trans>
                                        </FormLabel>
                                      )}
                                      <FormControl>
                                        <RecipientAutoCompleteInput
                                          type="text"
                                          placeholder={t`Name`}
                                          {...field}
                                          disabled={
                                            snapshot.isDragging ||
                                            isSubmitting ||
                                            !canRecipientBeModified(signer.id)
                                          }
                                          options={recipientSuggestions}
                                          onSelect={(suggestion) =>
                                            handleRecipientAutoCompleteSelect(index, suggestion)
                                          }
                                          onSearchQueryChange={(query) => {
                                            field.onChange(query);
                                            setRecipientSearchQuery(query);
                                          }}
                                          loading={isLoading}
                                          maxLength={255}
                                        />
                                      </FormControl>
                                      <FormMessage />
                                    </FormItem>
                                  )}
                                />
                                <FormField
                                  control={form.control}
                                  name={`signers.${index}.role`}
                                  render={({ field }) => (
                                    <FormItem
                                      className={cn('mt-auto w-fit', {
                                        'mb-6':
                                          form.formState.errors.signers?.[index] &&
                                          !form.formState.errors.signers[index]?.role,
                                      })}
                                    >
                                      <FormControl>
                                        <RecipientRoleSelect
                                          {...field}
                                          isAssistantEnabled={isSigningOrderSequential}
                                          onValueChange={(value) => {
                                            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                                            handleRoleChange(index, value as RecipientRole);
                                            field.onChange(value);
                                          }}
                                          disabled={
                                            snapshot.isDragging ||
                                            isSubmitting ||
                                            !canRecipientBeModified(signer.id)
                                          }
                                        />
                                      </FormControl>
                                      <FormMessage />
                                    </FormItem>
                                  )}
                                />
                                <Button
                                  variant="ghost"
                                  className={cn('mt-auto px-2', {
                                    'mb-6': form.formState.errors.signers?.[index],
                                  })}
                                  data-testid="remove-signer-button"
                                  disabled={
                                    snapshot.isDragging ||
                                    isSubmitting ||
                                    !canRecipientBeModified(signer.id) ||
                                    signers.length === 1
                                  }
                                  onClick={() => onRemoveSigner(index)}
                                >
                                  <TrashIcon className="h-4 w-4" />
                                </Button>
                              </div>
                              {showAdvancedSettings &&
                                organisation.organisationClaim.flags.cfr21 && (
@ -927,11 +832,11 @@ export const EnvelopeEditorRecipientForm = () => {
                                    name={`signers.${index}.actionAuth`}
                                    render={({ field }) => (
                                      <FormItem
-                                        className={cn('mt-2 w-full', {
+                                        className={cn('col-span-8', {
                                          'mb-6':
                                            form.formState.errors.signers?.[index] &&
                                            !form.formState.errors.signers[index]?.actionAuth,
-                                          'pl-6': isSigningOrderSequential,
+                                          'col-span-10': isSigningOrderSequential,
                                        })}
                                      >
                                        <FormControl>
@ -951,6 +856,60 @@ export const EnvelopeEditorRecipientForm = () => {
                                    )}
                                  />
                                )}
                              <div className="col-span-2 flex gap-x-2">
                                <FormField
                                  control={form.control}
                                  name={`signers.${index}.role`}
                                  render={({ field }) => (
                                    <FormItem
                                      className={cn('mt-auto', {
                                        'mb-6':
                                          form.formState.errors.signers?.[index] &&
                                          !form.formState.errors.signers[index]?.role,
                                      })}
                                    >
                                      <FormControl>
                                        <RecipientRoleSelect
                                          {...field}
                                          isAssistantEnabled={isSigningOrderSequential}
                                          onValueChange={(value) => {
                                            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                                            handleRoleChange(index, value as RecipientRole);
                                          }}
                                          disabled={
                                            snapshot.isDragging ||
                                            isSubmitting ||
                                            !canRecipientBeModified(signer.id)
                                          }
                                        />
                                      </FormControl>
                                      <FormMessage />
                                    </FormItem>
                                  )}
                                />
                                <button
                                  type="button"
                                  className={cn(
                                    'mt-auto inline-flex h-10 w-10 items-center justify-center hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50',
                                    {
                                      'mb-6': form.formState.errors.signers?.[index],
                                    },
                                  )}
                                  data-testid="remove-signer-button"
                                  disabled={
                                    snapshot.isDragging ||
                                    isSubmitting ||
                                    !canRecipientBeModified(signer.id) ||
                                    signers.length === 1
                                  }
                                  onClick={() => onRemoveSigner(index)}
                                >
                                  <TrashIcon className="h-4 w-4" />
                                </button>
                              </div>
                            </motion.fieldset>
                          </div>
                        )}
--- 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
@ -215,6 +215,7 @@ export const EnvelopeEditorSettingsDialog = ({
  const { mutateAsync: updateEnvelope } = trpc.envelope.update.useMutation();
  // Todo: Envelopes - Extract into provider.
  const envelopeHasBeenSent =
    envelope.type === EnvelopeType.DOCUMENT &&
    envelope.recipients.some((recipient) => recipient.sendStatus === SendStatus.SENT);
@ -301,6 +302,8 @@ export const EnvelopeEditorSettingsDialog = ({
    setActiveTab('general');
  }, [open, form]);
  // Todo: Envelopes - Show error indicator if error is in different tab.
  const selectedTab = tabs.find((tab) => tab.id === activeTab);
  if (!selectedTab) {
@ -355,7 +358,7 @@ export const EnvelopeEditorSettingsDialog = ({
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onFormSubmit)}>
              <fieldset
-                className="flex h-[45rem] max-h-[calc(100vh-14rem)] w-full flex-col space-y-6 overflow-y-auto px-6 pt-6"
+                className="flex min-h-[45rem] w-full flex-col space-y-6 px-6 pt-6"
                disabled={form.formState.isSubmitting}
                key={activeTab}
              >
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor.tsx
@ -24,6 +24,7 @@ import {
  mapSecondaryIdToDocumentId,
  mapSecondaryIdToTemplateId,
 } from '@documenso/lib/utils/envelope';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
@ -31,17 +32,17 @@ import { SpinnerBox } from '@documenso/ui/primitives/spinner';
 import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialog';
 import { EnvelopeDistributeDialog } from '~/components/dialogs/envelope-distribute-dialog';
 import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
 import { EnvelopeDuplicateDialog } from '~/components/dialogs/envelope-duplicate-dialog';
 import { EnvelopeRedistributeDialog } from '~/components/dialogs/envelope-redistribute-dialog';
 import { TemplateDeleteDialog } from '~/components/dialogs/template-delete-dialog';
 import { TemplateDirectLinkDialog } from '~/components/dialogs/template-direct-link-dialog';
 import { EnvelopeEditorSettingsDialog } from '~/components/general/envelope-editor/envelope-editor-settings-dialog';
 import { useCurrentTeam } from '~/providers/team';
 import { EnvelopeEditorFieldsPage } from './envelope-editor-fields-page';
 import EnvelopeEditorHeader from './envelope-editor-header';
-import { EnvelopeEditorPreviewPage } from './envelope-editor-preview-page';
+import { EnvelopeEditorPageFields } from './envelope-editor-page-fields';
-import { EnvelopeEditorUploadPage } from './envelope-editor-upload-page';
+import { EnvelopeEditorPagePreview } from './envelope-editor-page-preview';
 import { EnvelopeEditorPageUpload } from './envelope-editor-page-upload';
 type EnvelopeEditorStep = 'upload' | 'addFields' | 'preview';
@ -73,16 +74,10 @@ export default function EnvelopeEditor() {
  const { t } = useLingui();
  const navigate = useNavigate();
  const team = useCurrentTeam();
-  const {
+  const { envelope, isDocument, isTemplate, isAutosaving, flushAutosave } =
-    envelope,
+    useCurrentEnvelopeEditor();
    isDocument,
    isTemplate,
    isAutosaving,
    flushAutosave,
    relativePath,
    editorFields,
  } = useCurrentEnvelopeEditor();
  const [searchParams, setSearchParams] = useSearchParams();
  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
@ -105,10 +100,13 @@ export default function EnvelopeEditor() {
    return 'upload';
  });
  const documentsPath = formatDocumentsPath(team.url);
  const templatesPath = formatTemplatesPath(team.url);
  const navigateToStep = (step: EnvelopeEditorStep) => {
    setCurrentStep(step);
-    void flushAutosave();
+    flushAutosave();
    if (!isStepLoading && isAutosaving) {
      setIsStepLoading(true);
@ -130,18 +128,6 @@ export default function EnvelopeEditor() {
    }
  };
  // Watch the URL params and setStep if the step changes.
  useEffect(() => {
    const stepParam = searchParams.get('step') || envelopeEditorSteps[0].id;
    const foundStep = envelopeEditorSteps.find((step) => step.id === stepParam);
    if (foundStep && foundStep.id !== currentStep) {
      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
      navigateToStep(foundStep.id as EnvelopeEditorStep);
    }
  }, [searchParams]);
  useEffect(() => {
    if (!isAutosaving) {
      setIsStepLoading(false);
@ -152,22 +138,20 @@ export default function EnvelopeEditor() {
    envelopeEditorSteps.find((step) => step.id === currentStep) || envelopeEditorSteps[0];
  return (
-    <div className="dark:bg-background h-screen w-screen bg-gray-50">
+    <div className="h-screen w-screen bg-gray-50">
      <EnvelopeEditorHeader />
      {/* Main Content Area */}
-      <div className="flex h-[calc(100vh-4rem)] w-screen">
+      <div className="flex h-[calc(100vh-73px)] w-screen">
        {/* Left Section - Step Navigation */}
-        <div className="bg-background border-border flex w-80 flex-shrink-0 flex-col overflow-y-auto border-r py-4">
+        <div className="flex w-80 flex-shrink-0 flex-col overflow-y-auto border-r border-gray-200 bg-white py-4">
          {/* Left section step selector. */}
          <div className="px-4">
-            <h3 className="text-foreground flex items-end justify-between text-sm font-semibold">
+            <h3 className="flex items-end justify-between text-sm font-semibold text-gray-900">
              {isDocument ? <Trans>Document Editor</Trans> : <Trans>Template Editor</Trans>}
-              <span className="text-muted-foreground bg-muted/50 ml-2 rounded border px-2 py-0.5 text-xs">
+              <span className="text-muted-foreground ml-2 rounded border bg-gray-50 px-2 py-0.5 text-xs">
-                <Trans context="The step counter">
+                Step {currentStepData.order}/{envelopeEditorSteps.length}
                  Step {currentStepData.order}/{envelopeEditorSteps.length}
                </Trans>
              </span>
            </h3>
@ -192,17 +176,15 @@ export default function EnvelopeEditor() {
                    key={step.id}
                    className={`cursor-pointer rounded-lg p-3 transition-colors ${
                      isActive
-                        ? 'border border-green-200 bg-green-50 dark:border-green-500/20 dark:bg-green-500/10'
+                        ? 'border border-green-200 bg-green-50'
-                        : 'border border-gray-200 hover:bg-gray-50 dark:border-gray-400/20 dark:hover:bg-gray-400/10'
+                        : 'border border-gray-200 hover:bg-gray-50'
                    }`}
                    onClick={() => navigateToStep(step.id as EnvelopeEditorStep)}
                  >
                    <div className="flex items-center space-x-3">
                      <div
                        className={`rounded border p-2 ${
-                          isActive
+                          isActive ? 'border-green-200 bg-green-50' : 'border-gray-100 bg-gray-100'
                            ? 'border-green-200 bg-green-50 dark:border-green-500/20 dark:bg-green-500/10'
                            : 'border-gray-100 bg-gray-100 dark:border-gray-400/20 dark:bg-gray-400/10'
                        }`}
                      >
                        <Icon
@ -212,14 +194,12 @@ export default function EnvelopeEditor() {
                      <div>
                        <div
                          className={`text-sm font-medium ${
-                            isActive
+                            isActive ? 'text-green-900' : 'text-gray-700'
                              ? 'text-green-900 dark:text-green-400'
                              : 'text-foreground dark:text-muted-foreground'
                          }`}
                        >
                          {t(step.title)}
                        </div>
-                        <div className="text-muted-foreground text-xs">{t(step.description)}</div>
+                        <div className="text-xs text-gray-500">{t(step.description)}</div>
                      </div>
                    </div>
                  </div>
@ -232,25 +212,12 @@ export default function EnvelopeEditor() {
          {/* Quick Actions. */}
          <div className="space-y-3 px-4">
-            <h4 className="text-foreground text-sm font-semibold">
+            <h4 className="text-sm font-semibold text-gray-900">
              <Trans>Quick Actions</Trans>
            </h4>
            <EnvelopeEditorSettingsDialog
              trigger={
                <Button variant="ghost" size="sm" className="w-full justify-start">
                  <SettingsIcon className="mr-2 h-4 w-4" />
                  {isDocument ? <Trans>Document Settings</Trans> : <Trans>Template Settings</Trans>}
                </Button>
              }
            />
            {isDocument && (
              <EnvelopeDistributeDialog
-                envelope={{
+                envelope={envelope}
                  ...envelope,
                  fields: editorFields.localFields,
                }}
                documentRootPath={relativePath.documentRootPath}
                trigger={
                  <Button variant="ghost" size="sm" className="w-full justify-start">
                    <SendIcon className="mr-2 h-4 w-4" />
@ -272,6 +239,16 @@ export default function EnvelopeEditor() {
              />
            )}
            <EnvelopeEditorSettingsDialog
              trigger={
                <Button variant="ghost" size="sm" className="w-full justify-start">
                  <SettingsIcon className="mr-2 h-4 w-4" />
                  {isDocument ? <Trans>Document Settings</Trans> : <Trans>Template Settings</Trans>}
                </Button>
              }
            />
            {/* Todo: Envelopes */}
            {/* <Button variant="ghost" size="sm" className="w-full justify-start">
              <FileText className="mr-2 h-4 w-4" />
              Save as Template
@ -306,17 +283,11 @@ export default function EnvelopeEditor() {
              }
            />
-            <EnvelopeDownloadDialog
+            {/* Todo: Allow selecting which document to download and/or the original */}
-              envelopeId={envelope.id}
+            <Button variant="ghost" size="sm" className="w-full justify-start">
-              envelopeStatus={envelope.status}
+              <DownloadCloudIcon className="mr-2 h-4 w-4" />
-              envelopeItems={envelope.envelopeItems}
+              <Trans>Download PDF</Trans>
-              trigger={
+            </Button>
                <Button variant="ghost" size="sm" className="w-full justify-start">
                  <DownloadCloudIcon className="mr-2 h-4 w-4" />
                  <Trans>Download PDF</Trans>
                </Button>
              }
            />
            <Button
              variant="ghost"
@ -338,7 +309,7 @@ export default function EnvelopeEditor() {
              open={isDeleteDialogOpen}
              onOpenChange={setDeleteDialogOpen}
              onDelete={async () => {
-                await navigate(relativePath.documentRootPath);
+                await navigate(documentsPath);
              }}
            />
          ) : (
@ -347,7 +318,7 @@ export default function EnvelopeEditor() {
              open={isDeleteDialogOpen}
              onOpenChange={setDeleteDialogOpen}
              onDelete={async () => {
-                await navigate(relativePath.templateRootPath);
+                await navigate(templatesPath);
              }}
            />
          )}
@ -355,7 +326,7 @@ export default function EnvelopeEditor() {
          {/* Footer of left sidebar. */}
          <div className="mt-auto px-4">
            <Button variant="ghost" className="w-full justify-start" asChild>
-              <Link to={relativePath.basePath}>
+              <Link to={isDocument ? documentsPath : templatesPath}>
                <ArrowLeftIcon className="mr-2 h-4 w-4" />
                {isDocument ? (
                  <Trans>Return to documents</Trans>
@ -368,14 +339,17 @@ export default function EnvelopeEditor() {
        </div>
        {/* Main Content - Changes based on current step */}
-        <AnimateGenericFadeInOut className="flex-1 overflow-y-auto" key={currentStep}>
+        <div className="flex-1 overflow-y-auto">
-          {match({ currentStep, isStepLoading })
+          <p>{isAutosaving ? 'Autosaving...' : 'Not autosaving'}</p>
-            .with({ isStepLoading: true }, () => <SpinnerBox className="py-32" />)
+          <AnimateGenericFadeInOut key={currentStep}>
-            .with({ currentStep: 'upload' }, () => <EnvelopeEditorUploadPage />)
+            {match({ currentStep, isStepLoading })
-            .with({ currentStep: 'addFields' }, () => <EnvelopeEditorFieldsPage />)
+              .with({ isStepLoading: true }, () => <SpinnerBox className="py-32" />)
-            .with({ currentStep: 'preview' }, () => <EnvelopeEditorPreviewPage />)
+              .with({ currentStep: 'upload' }, () => <EnvelopeEditorPageUpload />)
-            .exhaustive()}
+              .with({ currentStep: 'addFields' }, () => <EnvelopeEditorPageFields />)
-        </AnimateGenericFadeInOut>
+              .with({ currentStep: 'preview' }, () => <EnvelopeEditorPagePreview />)
              .exhaustive()}
          </AnimateGenericFadeInOut>
        </div>
      </div>
    </div>
  );
--- a/apps/remix/app/components/general/envelope-editor/envelope-file-selector.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-file-selector.tsx
@ -20,17 +20,16 @@ export const EnvelopeItemSelector = ({
 }: EnvelopeItemSelectorProps) => {
  return (
    <button
-      title={typeof primaryText === 'string' ? primaryText : undefined}
+      className={`flex min-w-0 cursor-pointer items-center space-x-3 rounded-lg border px-4 py-3 transition-colors ${
      className={`flex h-fit max-w-72 flex-shrink-0 cursor-pointer items-center space-x-3 rounded-lg border px-4 py-3 transition-colors ${
        isSelected
-          ? 'border-green-200 bg-green-50 text-green-900 dark:border-green-400/30 dark:bg-green-400/10 dark:text-green-400'
+          ? 'border-blue-200 bg-blue-50 text-blue-900'
-          : 'border-border bg-muted/50 hover:bg-muted/70'
+          : 'border-gray-200 bg-gray-50 hover:bg-gray-100'
      }`}
      {...buttonProps}
    >
      <div
        className={`flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium ${
-          isSelected ? 'bg-green-100 text-green-600' : 'bg-gray-200 text-gray-600'
+          isSelected ? 'bg-blue-100 text-blue-600' : 'bg-gray-200 text-gray-600'
        }`}
      >
        {number}
@ -40,8 +39,8 @@ export const EnvelopeItemSelector = ({
        <div className="text-xs text-gray-500">{secondaryText}</div>
      </div>
      <div
-        className={cn('h-2 w-2 flex-shrink-0 rounded-full', {
+        className={cn('h-2 w-2 rounded-full', {
-          'bg-green-500': isSelected,
+          'bg-blue-500': isSelected,
        })}
      ></div>
    </button>
@ -62,7 +61,7 @@ export const EnvelopeRendererFileSelector = ({
  const { envelopeItems, currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();
  return (
-    <div className={cn('flex h-fit flex-shrink-0 space-x-2 overflow-x-auto p-4', className)}>
+    <div className={cn('flex h-fit space-x-2 overflow-x-auto p-4', className)}>
      {envelopeItems.map((doc, i) => (
        <EnvelopeItemSelector
          key={doc.id}
--- 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,32 +1,41 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { useLingui } from '@lingui/react/macro';
-import type Konva from 'konva';
+import Konva from 'konva';
 import type { Layer } from 'konva/lib/Layer';
 import type { RenderParameters } from 'pdfjs-dist/types/src/display/api';
 import { usePageContext } from 'react-pdf';
 import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 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';
 export default function EnvelopeGenericPageRenderer() {
-  const { i18n } = useLingui();
+  const pageContext = usePageContext();
-  const { currentEnvelopeItem, fields, getRecipientColorKey } = useCurrentEnvelopeRender();
+  if (!pageContext) {
    throw new Error('Unable to find Page context.');
  }
-  const {
+  const { _className, page, rotate, scale } = pageContext;
    stage,
    pageLayer,
    canvasElement,
    konvaContainer,
    pageContext,
    scaledViewport,
    unscaledViewport,
  } = usePageRenderer(({ stage, pageLayer }) => {
    createPageCanvas(stage, pageLayer);
  });
-  const { _className, scale } = pageContext;
+  if (!page) {
    throw new Error('Attempted to render page canvas, but no page was specified.');
  }
  const { t } = useLingui();
  const { currentEnvelopeItem, fields } = useCurrentEnvelopeRender();
  const canvasElement = useRef<HTMLCanvasElement>(null);
  const konvaContainer = useRef<HTMLDivElement>(null);
  const stage = useRef<Konva.Stage | null>(null);
  const pageLayer = useRef<Layer | null>(null);
  const viewport = useMemo(
    () => page.getViewport({ scale, rotation: rotate }),
    [page, rotate, scale],
  );
  const localPageFields = useMemo(
    () =>
@ -37,6 +46,44 @@ export default function EnvelopeGenericPageRenderer() {
    [fields, pageContext.pageNumber],
  );
  // Custom renderer from Konva examples.
  useEffect(
    function drawPageOnCanvas() {
      if (!page) {
        return;
      }
      const { current: canvas } = canvasElement;
      const { current: container } = konvaContainer;
      if (!canvas || !container) {
        return;
      }
      const renderContext: RenderParameters = {
        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
        canvasContext: canvas.getContext('2d', { alpha: false }) as CanvasRenderingContext2D,
        viewport,
      };
      const cancellable = page.render(renderContext);
      const runningTask = cancellable;
      cancellable.promise.catch(() => {
        // Intentionally empty
      });
      void cancellable.promise.then(() => {
        createPageCanvas(container);
      });
      return () => {
        runningTask.cancel();
      };
    },
    [page, viewport],
  );
  const renderFieldOnLayer = (field: TEnvelope['fields'][number]) => {
    if (!pageLayer.current) {
      console.error('Layer not loaded yet');
@ -44,7 +91,6 @@ export default function EnvelopeGenericPageRenderer() {
    }
    renderField({
      scale,
      pageLayer: pageLayer.current,
      field: {
        renderId: field.id.toString(),
@ -57,29 +103,39 @@ export default function EnvelopeGenericPageRenderer() {
        inserted: false,
        fieldMeta: field.fieldMeta,
      },
-      translations: getClientSideFieldTranslations(i18n),
+      pageWidth: viewport.width,
-      pageWidth: unscaledViewport.width,
+      pageHeight: viewport.height,
-      pageHeight: unscaledViewport.height,
+      // color: getRecipientColorKey(field.recipientId),
-      color: getRecipientColorKey(field.recipientId),
+      color: 'purple', // Todo
      editable: false,
      mode: 'sign',
    });
  };
  /**
-   * Initialize the Konva page canvas and all fields and interactions.
+   * Create the initial Konva page canvas and initialize all fields and interactions.
   */
-  const createPageCanvas = (_currentStage: Konva.Stage, currentPageLayer: Konva.Layer) => {
+  const createPageCanvas = (container: HTMLDivElement) => {
    stage.current = new Konva.Stage({
      container,
      width: viewport.width,
      height: viewport.height,
    });
    // Create the main layer for interactive elements.
    pageLayer.current = new Konva.Layer();
    stage.current?.add(pageLayer.current);
    // Render the fields.
    for (const field of localPageFields) {
      renderFieldOnLayer(field);
    }
-    currentPageLayer.batchDraw();
+    pageLayer.current.batchDraw();
  };
  /**
-   * Render fields when they are added or removed
+   * Render fields when they are added or removed from the localFields.
   */
  useEffect(() => {
    if (!pageLayer.current || !stage.current) {
@ -92,12 +148,14 @@ export default function EnvelopeGenericPageRenderer() {
        group.name() === 'field-group' &&
        !localPageFields.some((field) => field.id.toString() === group.id())
      ) {
        console.log('Field removed, removing from canvas');
        group.destroy();
      }
    });
    // If it exists, rerender.
    localPageFields.forEach((field) => {
      console.log('Field created/updated, rendering on canvas');
      renderFieldOnLayer(field);
    });
@ -109,19 +167,14 @@ export default function EnvelopeGenericPageRenderer() {
  }
  return (
-    <div
+    <div className="relative" key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}>
-      className="relative w-full"
+      <div className="konva-container absolute inset-0 z-10" ref={konvaContainer}></div>
      key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}
    >
      {/* The element Konva will inject it's canvas into. */}
      <div className="konva-container absolute inset-0 z-10 w-full" ref={konvaContainer}></div>
      {/* Canvas the PDF will be rendered on. */}
      <canvas
        className={`${_className}__canvas z-0`}
        height={viewport.height}
        ref={canvasElement}
-        height={scaledViewport.height}
+        width={viewport.width}
        width={scaledViewport.width}
      />
    </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
@ -1,29 +1,17 @@
 import { useMemo } from 'react';
-import { Plural, Trans } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
-import { FieldType, RecipientRole } from '@prisma/client';
+import { FieldType } from '@prisma/client';
 import { Input } from '@documenso/ui/primitives/input';
 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 { useRequiredEnvelopeSigningContext } from '../document-signing/envelope-signing-provider';
 export default function EnvelopeSignerForm() {
-  const {
+  const { fullName, signature, setFullName, setSignature, envelope, recipientFields } =
-    fullName,
+    useRequiredEnvelopeSigningContext();
    signature,
    setFullName,
    setSignature,
    envelope,
    recipientFields,
    recipient,
    assistantFields,
    assistantRecipients,
    selectedAssistantRecipient,
    setSelectedAssistantRecipientId,
  } = useRequiredEnvelopeSigningContext();
  const hasSignatureField = useMemo(() => {
    return recipientFields.some((field) => field.type === FieldType.SIGNATURE);
@ -31,63 +19,6 @@ export default function EnvelopeSignerForm() {
  const isSubmitting = false;
  if (recipient.role === RecipientRole.VIEWER) {
    return null;
  }
  if (recipient.role === RecipientRole.ASSISTANT) {
    return (
      <fieldset className="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()}
          onValueChange={(value) => {
            setSelectedAssistantRecipientId(Number(value));
          }}
        >
          {assistantRecipients
            .filter((r) => r.fields.length > 0)
            .map((r) => (
              <div
                key={r.id}
                className="bg-widget border-border relative flex flex-col gap-4 rounded-lg border p-4"
              >
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <RadioGroupItem
                      id={r.id.toString()}
                      value={r.id.toString()}
                      className="after:absolute after:inset-0"
                    />
                    <div className="grid grow gap-1">
                      <Label className="inline-flex items-start" htmlFor={r.id.toString()}>
                        {r.name}
                        {r.id === recipient.id && (
                          <span className="text-muted-foreground ml-2">
                            <Trans>(You)</Trans>
                          </span>
                        )}
                      </Label>
                      <p className="text-muted-foreground text-xs">{r.email}</p>
                    </div>
                  </div>
                  <div className="text-muted-foreground text-xs leading-[inherit]">
                    <Plural
                      value={assistantFields.filter((field) => field.recipientId === r.id).length}
                      one="# field"
                      other="# fields"
                    />
                  </div>
                </div>
              </div>
            ))}
        </RadioGroup>
      </fieldset>
    );
  }
  return (
    <fieldset disabled={isSubmitting} className="flex flex-1 flex-col gap-4">
      <div className="flex flex-1 flex-col gap-y-4">
--- a/apps/remix/app/components/general/envelope-signing/envelope-signer-header.tsx
+++ b/apps/remix/app/components/general/envelope-signing/envelope-signer-header.tsx
@ -1,139 +1,131 @@
-import { Plural, Trans } from '@lingui/react/macro';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
-import { EnvelopeType, RecipientRole } from '@prisma/client';
+import { Link, useNavigate } from 'react-router';
 import { BanIcon, DownloadCloudIcon } from 'lucide-react';
 import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import type { TRecipientAccessAuth } from '@documenso/lib/types/document-auth';
 import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
 import { trpc } from '@documenso/trpc/react';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
 import { Separator } from '@documenso/ui/primitives/separator';
 import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
 import { BrandingLogo } from '~/components/general/branding-logo';
-import { BrandingLogoIcon } from '../branding-logo-icon';
+import { DocumentSigningCompleteDialog } from '../document-signing/document-signing-complete-dialog';
 import { DocumentSigningRejectDialog } from '../document-signing/document-signing-reject-dialog';
 import { useRequiredEnvelopeSigningContext } from '../document-signing/envelope-signing-provider';
 import { EnvelopeSignerCompleteDialog } from './envelope-signing-complete-dialog';
 export const EnvelopeSignerHeader = () => {
-  const { envelopeData, envelope, recipientFieldsRemaining, recipient } =
+  const { t } = useLingui();
  const navigate = useNavigate();
  const analytics = useAnalytics();
  const { envelope, setShowPendingFieldTooltip, recipientFieldsRemaining, recipient } =
    useRequiredEnvelopeSigningContext();
  const { currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();
  const {
    mutateAsync: completeDocument,
    isPending,
    isSuccess,
  } = trpc.recipient.completeDocumentWithToken.useMutation();
  const handleOnNextFieldClick = () => {
    const nextField = recipientFieldsRemaining[0];
    if (!nextField) {
      setShowPendingFieldTooltip(false);
      return;
    }
    if (nextField.envelopeItemId !== currentEnvelopeItem?.id) {
      setCurrentEnvelopeItem(nextField.envelopeItemId);
    }
    const fieldTooltip = document.querySelector(`#field-tooltip`);
    if (fieldTooltip) {
      fieldTooltip.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
    setShowPendingFieldTooltip(true);
  };
  const handleOnCompleteClick = async (
    nextSigner?: { name: string; email: string },
    accessAuthOptions?: TRecipientAccessAuth,
  ) => {
    const payload = {
      token: recipient.token,
      documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
      authOptions: accessAuthOptions,
      ...(nextSigner?.email && nextSigner?.name ? { nextSigner } : {}),
    };
    await completeDocument(payload);
    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`);
    }
  };
  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="w-full border-b border-gray-200 bg-white px-6 py-3">
-      {/* Left side - Logo and title */}
+      <div className="flex items-center justify-between">
-      <div className="flex min-w-0 flex-1 items-center space-x-2 md:w-auto md:flex-none">
+        <div className="flex items-center space-x-4">
-        <Link to="/" className="flex-shrink-0">
+          <Link to="/">
-          {envelopeData.settings.brandingEnabled && envelopeData.settings.brandingLogo ? (
+            <BrandingLogo className="h-6 w-auto" />
-            <img
+          </Link>
-              src={`/api/branding/logo/team/${envelope.teamId}`}
+          <Separator orientation="vertical" className="h-6" />
              alt={`${envelope.team.name}'s Logo`}
              className="h-6 w-auto"
            />
          ) : (
            <>
              <BrandingLogo className="hidden h-6 w-auto md:block" />
              <BrandingLogoIcon className="h-6 w-auto md:hidden" />
            </>
          )}
        </Link>
-        <h1
+          <div className="flex items-center space-x-2">
-          title={envelope.title}
+            <h1 className="whitespace-nowrap text-sm font-medium text-gray-600">
-          className="text-foreground min-w-0 truncate text-base font-semibold md:hidden"
+              {envelope.title}
-        >
+            </h1>
          {envelope.title}
        </h1>
-        <Separator orientation="vertical" className="hidden h-6 md:block" />
+            <Badge variant="secondary">
-
+              <Trans>Approver</Trans>
-        <div className="hidden items-center space-x-2 md:flex">
+            </Badge>
-          <h1 className="text-foreground whitespace-nowrap text-sm font-medium">
+          </div>
            {envelope.title}
          </h1>
          <Badge>
            {match(recipient.role)
              .with(RecipientRole.VIEWER, () => <Trans>Viewer</Trans>)
              .with(RecipientRole.SIGNER, () => <Trans>Signer</Trans>)
              .with(RecipientRole.APPROVER, () => <Trans>Approver</Trans>)
              .with(RecipientRole.ASSISTANT, () => <Trans>Assistant</Trans>)
              .otherwise(() => null)}
          </Badge>
        </div>
      </div>
-      {/* Right side - Desktop content */}
+        <div className="flex items-center space-x-2">
-      <div className="hidden items-center space-x-2 md:flex">
+          <p className="text-muted-foreground mr-2 flex-shrink-0 text-sm">
-        <p className="text-muted-foreground mr-2 flex-shrink-0 text-sm">
+            <Plural
-          <Plural
+              one="1 Field Remaining"
-            one="1 Field Remaining"
+              other="# Fields Remaining"
-            other="# Fields Remaining"
+              value={recipientFieldsRemaining.length}
-            value={recipientFieldsRemaining.length}
+            />
          </p>
          <DocumentSigningCompleteDialog
            isSubmitting={isPending}
            onSignatureComplete={handleOnCompleteClick}
            documentTitle={envelope.title}
            fields={recipientFieldsRemaining}
            fieldsValidated={handleOnNextFieldClick}
            recipient={recipient}
            // Todo: Envelopes
            allowDictateNextSigner={envelope.documentMeta.allowDictateNextSigner}
            // defaultNextSigner={
            //   nextRecipient
            //     ? { name: nextRecipient.name, email: nextRecipient.email }
            //     : undefined
            // }
            // Todo: Envelopes - use
            // buttonSize="sm"
          />
-        </p>
+        </div>
        <EnvelopeSignerCompleteDialog />
      </div>
      {/* Mobile Actions button */}
      <div className="flex-shrink-0 md:hidden">
        <MobileDropdownMenu />
      </div>
    </nav>
  );
 };
 const MobileDropdownMenu = () => {
  const { envelope, recipient } = useRequiredEnvelopeSigningContext();
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="sm">
          <Trans>Actions</Trans>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <EnvelopeDownloadDialog
          envelopeId={envelope.id}
          envelopeStatus={envelope.status}
          envelopeItems={envelope.envelopeItems}
          token={recipient.token}
          trigger={
            <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
              <div>
                <DownloadCloudIcon className="mr-2 h-4 w-4" />
                <Trans>Download PDF</Trans>
              </div>
            </DropdownMenuItem>
          }
        />
        {envelope.type === EnvelopeType.DOCUMENT && (
          <DocumentSigningRejectDialog
            documentId={mapSecondaryIdToDocumentId(envelope.secondaryId)}
            token={recipient.token}
            trigger={
              <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
                <div>
                  <BanIcon className="mr-2 h-4 w-4" />
                  <Trans>Reject</Trans>
                </div>
              </DropdownMenuItem>
            }
          />
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  );
 };
--- 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
@ -1,25 +1,22 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
-import { Trans, useLingui } from '@lingui/react/macro';
+import { useLingui } from '@lingui/react/macro';
-import { type Field, FieldType, RecipientRole, type Signature } from '@prisma/client';
+import { type Field, FieldType } from '@prisma/client';
-import type Konva from 'konva';
+import Konva from 'konva';
 import type { Layer } from 'konva/lib/Layer';
 import type { KonvaEventObject } from 'konva/lib/Node';
 import type { RenderParameters } from 'pdfjs-dist/types/src/display/api';
 import { usePageContext } from 'react-pdf';
 import { match } from 'ts-pattern';
 import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
 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 { 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 { EnvelopeFieldToolTip } from '@documenso/ui/components/field/envelope-field-tooltip';
 import type { TRecipientColor } from '@documenso/ui/lib/recipient-colors';
 import { handleCheckboxFieldClick } from '~/utils/field-signing/checkbox-field';
 import { handleDropdownFieldClick } from '~/utils/field-signing/dropdown-field';
 import { handleEmailFieldClick } from '~/utils/field-signing/email-field';
 import { handleInitialsFieldClick } from '~/utils/field-signing/initial-field';
@ -31,13 +28,24 @@ import { handleTextFieldClick } from '~/utils/field-signing/text-field';
 import { useRequiredEnvelopeSigningContext } from '../document-signing/envelope-signing-provider';
 export default function EnvelopeSignerPageRenderer() {
-  const { i18n } = useLingui();
+  const pageContext = usePageContext();
  if (!pageContext) {
    throw new Error('Unable to find Page context.');
  }
  const { _className, page, rotate, scale } = pageContext;
  if (!page) {
    throw new Error('Attempted to render page canvas, but no page was specified.');
  }
  const { t } = useLingui();
  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
  const { sessionData } = useOptionalSession();
  const {
    envelopeData,
    recipient,
    recipientFields,
    recipientFieldsRemaining,
    showPendingFieldTooltip,
@ -48,39 +56,71 @@ export default function EnvelopeSignerPageRenderer() {
    setFullName,
    signature,
    setSignature,
    selectedAssistantRecipientFields,
    selectedAssistantRecipient,
    isDirectTemplate,
  } = useRequiredEnvelopeSigningContext();
-  const {
+  console.log({ fullName });
    stage,
    pageLayer,
    canvasElement,
    konvaContainer,
    pageContext,
    scaledViewport,
    unscaledViewport,
  } = usePageRenderer(({ stage, pageLayer }) => createPageCanvas(stage, pageLayer));
  const { _className, scale } = pageContext;
  const { envelope } = envelopeData;
-  const localPageFields = useMemo(() => {
+  const canvasElement = useRef<HTMLCanvasElement>(null);
-    let fieldsToRender = recipientFields;
+  const konvaContainer = useRef<HTMLDivElement>(null);
-    if (recipient.role === RecipientRole.ASSISTANT) {
+  const stage = useRef<Konva.Stage | null>(null);
-      fieldsToRender = selectedAssistantRecipientFields;
+  const pageLayer = useRef<Layer | null>(null);
    }
-    return fieldsToRender.filter(
+  const viewport = useMemo(
-      (field) =>
+    () => page.getViewport({ scale, rotation: rotate }),
-        field.page === pageContext.pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
+    [page, rotate, scale],
-    );
+  );
  }, [recipientFields, selectedAssistantRecipientFields, pageContext.pageNumber]);
-  const renderFieldOnLayer = (unparsedField: Field & { signature?: Signature | null }) => {
+  const localPageFields = useMemo(
    () =>
      recipientFields.filter(
        (field) =>
          field.page === pageContext.pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
      ),
    [recipientFields, pageContext.pageNumber],
  );
  // Custom renderer from Konva examples.
  useEffect(
    function drawPageOnCanvas() {
      if (!page) {
        return;
      }
      const { current: canvas } = canvasElement;
      const { current: container } = konvaContainer;
      if (!canvas || !container) {
        return;
      }
      const renderContext: RenderParameters = {
        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
        canvasContext: canvas.getContext('2d', { alpha: false }) as CanvasRenderingContext2D,
        viewport,
      };
      const cancellable = page.render(renderContext);
      const runningTask = cancellable;
      cancellable.promise.catch(() => {
        // Intentionally empty
      });
      void cancellable.promise.then(() => {
        createPageCanvas(container);
      });
      return () => {
        runningTask.cancel();
      };
    },
    [page, viewport],
  );
  const renderFieldOnLayer = (unparsedField: Field) => {
    if (!pageLayer.current) {
      console.error('Layer not loaded yet');
      return;
@ -97,7 +137,6 @@ export default function EnvelopeSignerPageRenderer() {
    }
    const { fieldGroup } = renderField({
      scale,
      pageLayer: pageLayer.current,
      field: {
        renderId: fieldToRender.id.toString(),
@ -106,11 +145,9 @@ export default function EnvelopeSignerPageRenderer() {
        height: Number(fieldToRender.height),
        positionX: Number(fieldToRender.positionX),
        positionY: Number(fieldToRender.positionY),
        signature: unparsedField.signature,
      },
-      translations: getClientSideFieldTranslations(i18n),
+      pageWidth: viewport.width,
-      pageWidth: unscaledViewport.width,
+      pageHeight: viewport.height,
      pageHeight: unscaledViewport.height,
      color,
      mode: 'sign',
    });
@ -121,36 +158,20 @@ export default function EnvelopeSignerPageRenderer() {
      const { width: fieldWidth, height: fieldHeight } = fieldGroup.getClientRect();
-      const foundField = localPageFields.find((f) => f.id === unparsedField.id);
+      const foundField = recipientFields.find((f) => f.id === unparsedField.id);
      const foundLoadingGroup = currentTarget.findOne('.loading-spinner-group');
      if (!foundField || foundLoadingGroup || foundField.fieldMeta?.readOnly) {
        return;
      }
      let localEmail: string | null = email;
      let localFullName: string | null = fullName;
      let placeholderEmail: string | null = null;
      if (recipient.role === RecipientRole.ASSISTANT) {
        localEmail = selectedAssistantRecipient?.email || null;
        localFullName = selectedAssistantRecipient?.name || null;
      }
      // Allows us let the user set a different email than their current logged in email.
      if (isDirectTemplate) {
        placeholderEmail = sessionData?.user?.email || email || recipient.email;
        if (!placeholderEmail || placeholderEmail === DIRECT_TEMPLATE_RECIPIENT_EMAIL) {
          placeholderEmail = null;
        }
      }
      const loadingSpinnerGroup = createSpinner({
-        fieldWidth: fieldWidth / scale,
+        fieldWidth,
-        fieldHeight: fieldHeight / scale,
+        fieldHeight,
      });
      fieldGroup.add(loadingSpinnerGroup);
      const parsedFoundField = ZFullFieldSchema.parse(foundField);
      match(parsedFoundField)
@ -158,39 +179,34 @@ export default function EnvelopeSignerPageRenderer() {
         * CHECKBOX FIELD.
         */
        .with({ type: FieldType.CHECKBOX }, (field) => {
-          const clickedCheckboxIndex = Number(target.getAttr('internalCheckboxIndex'));
+          const { fieldMeta } = field;
-          if (Number.isNaN(clickedCheckboxIndex)) {
+          const { values } = fieldMeta;
            return;
          }
-          handleCheckboxFieldClick({ field, clickedCheckboxIndex })
+          const checkedValues = (values || [])
-            .then(async (payload) => {
+            .map((v) => ({
-              if (payload) {
+              ...v,
-                fieldGroup.add(loadingSpinnerGroup);
+              checked: v.id === target.getAttr('internalCheckboxId') ? !v.checked : v.checked,
-                await signField(field.id, payload);
+            }))
-              }
+            .filter((v) => v.checked);
-            })
+
-            .finally(() => {
+          void signField(field.id, {
-              loadingSpinnerGroup.destroy();
+            type: FieldType.CHECKBOX,
-            });
+            value: checkedValues.map((v) => v.id),
          }).finally(() => {
            loadingSpinnerGroup.destroy();
          });
        })
        /**
         * RADIO FIELD.
         */
        .with({ type: FieldType.RADIO }, (field) => {
-          const selectedRadioIndex = Number(target.getAttr('internalRadioIndex'));
+          const { fieldMeta } = foundField;
          const fieldCustomText = Number(field.customText);
-          if (Number.isNaN(selectedRadioIndex)) {
+          const checkedValue = target.getAttr('internalRadioValue');
            return;
          }
          fieldGroup.add(loadingSpinnerGroup);
          // Uncheck the value if it's already pressed.
-          const value =
+          const value = field.inserted && checkedValue === field.customText ? null : checkedValue;
            field.inserted && selectedRadioIndex === fieldCustomText ? null : selectedRadioIndex;
          void signField(field.id, {
            type: FieldType.RADIO,
@ -206,7 +222,6 @@ export default function EnvelopeSignerPageRenderer() {
          handleNumberFieldClick({ field, number: null })
            .then(async (payload) => {
              if (payload) {
                fieldGroup.add(loadingSpinnerGroup);
                await signField(field.id, payload);
              }
            })
@ -221,7 +236,6 @@ export default function EnvelopeSignerPageRenderer() {
          handleTextFieldClick({ field, text: null })
            .then(async (payload) => {
              if (payload) {
                fieldGroup.add(loadingSpinnerGroup);
                await signField(field.id, payload);
              }
            })
@ -233,10 +247,9 @@ export default function EnvelopeSignerPageRenderer() {
         * EMAIL FIELD.
         */
        .with({ type: FieldType.EMAIL }, (field) => {
-          handleEmailFieldClick({ field, email: localEmail, placeholderEmail })
+          handleEmailFieldClick({ field, email })
            .then(async (payload) => {
              if (payload) {
                fieldGroup.add(loadingSpinnerGroup);
                await signField(field.id, payload); // Todo: Envelopes - Handle errors
              }
@ -252,12 +265,11 @@ export default function EnvelopeSignerPageRenderer() {
         * INITIALS FIELD.
         */
        .with({ type: FieldType.INITIALS }, (field) => {
-          const initials = localFullName ? extractInitials(localFullName) : null;
+          const initials = fullName ? extractInitials(fullName) : null;
          handleInitialsFieldClick({ field, initials })
            .then(async (payload) => {
              if (payload) {
                fieldGroup.add(loadingSpinnerGroup);
                await signField(field.id, payload);
              }
            })
@ -269,10 +281,9 @@ export default function EnvelopeSignerPageRenderer() {
         * NAME FIELD.
         */
        .with({ type: FieldType.NAME }, (field) => {
-          handleNameFieldClick({ field, name: localFullName })
+          handleNameFieldClick({ field, name: fullName })
            .then(async (payload) => {
              if (payload) {
                fieldGroup.add(loadingSpinnerGroup);
                await signField(field.id, payload);
              }
@ -291,7 +302,6 @@ export default function EnvelopeSignerPageRenderer() {
          handleDropdownFieldClick({ field, text: null })
            .then(async (payload) => {
              if (payload) {
                fieldGroup.add(loadingSpinnerGroup);
                await signField(field.id, payload);
              }
@ -305,8 +315,6 @@ export default function EnvelopeSignerPageRenderer() {
         * DATE FIELD.
         */
        .with({ type: FieldType.DATE }, (field) => {
          fieldGroup.add(loadingSpinnerGroup);
          void signField(field.id, {
            type: FieldType.DATE,
            value: !field.inserted,
@ -328,7 +336,6 @@ export default function EnvelopeSignerPageRenderer() {
          })
            .then(async (payload) => {
              if (payload) {
                fieldGroup.add(loadingSpinnerGroup);
                await signField(field.id, payload);
              }
@ -341,22 +348,38 @@ export default function EnvelopeSignerPageRenderer() {
            });
        })
        .exhaustive();
      console.log('Field clicked');
    };
-    fieldGroup.off('pointerdown');
+    fieldGroup.off('click');
-    fieldGroup.on('pointerdown', handleFieldGroupClick);
+    fieldGroup.on('click', handleFieldGroupClick);
  };
  /**
-   * Initialize the Konva page canvas and all fields and interactions.
+   * Create the initial Konva page canvas and initialize all fields and interactions.
   */
-  const createPageCanvas = (currentStage: Konva.Stage, currentPageLayer: Konva.Layer) => {
+  const createPageCanvas = (container: HTMLDivElement) => {
    stage.current = new Konva.Stage({
      container,
      width: viewport.width,
      height: viewport.height,
    });
    // Create the main layer for interactive elements.
    pageLayer.current = new Konva.Layer();
    stage.current?.add(pageLayer.current);
    console.log({
      localPageFields,
    });
    // Render the fields.
    for (const field of localPageFields) {
-      renderFieldOnLayer(field); // Todo: Envelopes - [CRITICAL] Handle errors which prevent rendering
+      renderFieldOnLayer(field);
    }
-    currentPageLayer.batchDraw();
+    pageLayer.current.batchDraw();
  };
  /**
@ -369,61 +392,25 @@ 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();
  }, [localPageFields, showPendingFieldTooltip, fullName, signature, email]);
  /**
   * Rerender the whole page if the selected assistant recipient changes.
   */
  useEffect(() => {
    if (!pageLayer.current || !stage.current) {
      return;
    }
    // Rerender the whole page.
    pageLayer.current.destroyChildren();
    localPageFields.forEach((field) => {
      renderFieldOnLayer(field); // Todo: Envelopes - [CRITICAL] Handle errors which prevent rendering
    });
    pageLayer.current.batchDraw();
  }, [selectedAssistantRecipient]);
  if (!currentEnvelopeItem) {
    return null;
  }
  return (
-    <div
+    <div className="relative" key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}>
      className="relative w-full"
      key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}
    >
      {showPendingFieldTooltip &&
        recipientFieldsRemaining.length > 0 &&
        recipientFieldsRemaining[0]?.envelopeItemId === currentEnvelopeItem?.id &&
        recipientFieldsRemaining[0]?.page === pageContext.pageNumber && (
          <EnvelopeFieldToolTip
            key={recipientFieldsRemaining[0].id}
            field={recipientFieldsRemaining[0]}
            color="warning"
          >
            <Trans>Click to insert field</Trans>
          </EnvelopeFieldToolTip>
        )}
      {/* The element Konva will inject it's canvas into. */}
      <div className="konva-container absolute inset-0 z-10 w-full" ref={konvaContainer}></div>
      {/* Canvas the PDF will be rendered on. */}
      <canvas
        className={`${_className}__canvas z-0`}
        height={viewport.height}
        ref={canvasElement}
-        height={scaledViewport.height}
+        width={viewport.width}
        width={scaledViewport.width}
      />
    </div>
  );
--- 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
@ -1,182 +0,0 @@
 import { useMemo } from 'react';
 import { useLingui } from '@lingui/react/macro';
 import { FieldType } from '@prisma/client';
 import { useNavigate, 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 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 { DocumentSigningCompleteDialog } from '../document-signing/document-signing-complete-dialog';
 import { useRequiredEnvelopeSigningContext } from '../document-signing/envelope-signing-provider';
 export const EnvelopeSignerCompleteDialog = () => {
  const navigate = useNavigate();
  const analytics = useAnalytics();
  const { toast } = useToast();
  const { t } = useLingui();
  const [searchParams] = useSearchParams();
  const {
    isDirectTemplate,
    envelope,
    setShowPendingFieldTooltip,
    recipientFieldsRemaining,
    recipient,
    nextRecipient,
    email,
    fullName,
  } = useRequiredEnvelopeSigningContext();
  const { currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();
  const { mutateAsync: completeDocument, isPending } =
    trpc.recipient.completeDocumentWithToken.useMutation();
  const { mutateAsync: createDocumentFromDirectTemplate } =
    trpc.template.createDocumentFromDirectTemplate.useMutation();
  const handleOnNextFieldClick = () => {
    const nextField = recipientFieldsRemaining[0];
    if (!nextField) {
      setShowPendingFieldTooltip(false);
      return;
    }
    if (nextField.envelopeItemId !== currentEnvelopeItem?.id) {
      setCurrentEnvelopeItem(nextField.envelopeItemId);
    }
    const fieldTooltip = document.querySelector(`#field-tooltip`);
    if (fieldTooltip) {
      fieldTooltip.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
    setShowPendingFieldTooltip(true);
  };
  const handleOnCompleteClick = async (
    nextSigner?: { name: string; email: string },
    accessAuthOptions?: TRecipientAccessAuth,
  ) => {
    const payload = {
      token: recipient.token,
      documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
      authOptions: accessAuthOptions,
      ...(nextSigner?.email && nextSigner?.name ? { nextSigner } : {}),
    };
    await completeDocument(payload);
    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`);
    }
  };
  /**
   * Direct template completion flow.
   */
  const handleDirectTemplateCompleteClick = async (
    nextSigner?: { name: string; email: string },
    accessAuthOptions?: TRecipientAccessAuth,
    recipientDetails?: { name: string; email: string },
  ) => {
    try {
      let directTemplateExternalId = searchParams?.get('externalId') || undefined;
      if (directTemplateExternalId) {
        directTemplateExternalId = decodeURIComponent(directTemplateExternalId);
      }
      const { token } = await createDocumentFromDirectTemplate({
        directTemplateToken: recipient.token, // The direct template token is inserted into the recipient token for ease of use.
        directTemplateExternalId,
        directRecipientName: recipientDetails?.name || fullName,
        directRecipientEmail: recipientDetails?.email || email,
        templateUpdatedAt: envelope.updatedAt,
        signedFieldValues: recipient.fields.map((field) => {
          let value = field.customText;
          let isBase64 = false;
          if (field.type === FieldType.SIGNATURE && field.signature) {
            value = field.signature.signatureImageAsBase64 || field.signature.typedSignature || '';
            isBase64 = isBase64Image(value);
          }
          return {
            token: '',
            fieldId: field.id,
            value,
            isBase64,
          };
        }),
      });
      const redirectUrl = envelope.documentMeta.redirectUrl;
      if (redirectUrl) {
        window.location.href = redirectUrl;
      } else {
        await navigate(`/sign/${token}/complete`);
      }
    } catch (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',
      });
      throw err;
    }
  };
  const directTemplatePayload = useMemo(() => {
    if (!isDirectTemplate) {
      return;
    }
    return {
      name: fullName,
      email: email,
    };
  }, [email, fullName, isDirectTemplate]);
  return (
    <DocumentSigningCompleteDialog
      isSubmitting={isPending}
      directTemplatePayload={directTemplatePayload}
      onSignatureComplete={
        isDirectTemplate ? handleDirectTemplateCompleteClick : handleOnCompleteClick
      }
      documentTitle={envelope.title}
      fields={recipientFieldsRemaining}
      fieldsValidated={handleOnNextFieldClick}
      recipient={recipient}
      allowDictateNextSigner={Boolean(
        nextRecipient && envelope.documentMeta.allowDictateNextSigner,
      )}
      defaultNextSigner={
        nextRecipient ? { name: nextRecipient.name, email: nextRecipient.email } : undefined
      }
      buttonSize="sm"
      position="center"
    />
  );
 };
--- a/apps/remix/app/components/general/folder/folder-card.tsx
+++ b/apps/remix/app/components/general/folder/folder-card.tsx
@ -12,7 +12,6 @@ import {
 import { Link } from 'react-router';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@ -29,15 +28,22 @@ import { useCurrentTeam } from '~/providers/team';
 export type FolderCardProps = {
  folder: TFolderWithSubfolders;
  onMove: (folder: TFolderWithSubfolders) => void;
  onPin: (folderId: string) => void;
  onUnpin: (folderId: string) => void;
  onSettings: (folder: TFolderWithSubfolders) => void;
  onDelete: (folder: TFolderWithSubfolders) => void;
 };
-export const FolderCard = ({ folder, onMove, onSettings, onDelete }: FolderCardProps) => {
+export const FolderCard = ({
  folder,
  onMove,
  onPin,
  onUnpin,
  onSettings,
  onDelete,
 }: FolderCardProps) => {
  const team = useCurrentTeam();
  const { mutateAsync: updateFolderMutation } = trpc.folder.updateFolder.useMutation();
  const formatPath = () => {
    const rootPath =
      folder.type === FolderType.DOCUMENT
@ -47,15 +53,6 @@ export const FolderCard = ({ folder, onMove, onSettings, onDelete }: FolderCardP
    return `${rootPath}/f/${folder.id}`;
  };
  const updateFolder = async ({ pinned }: { pinned: boolean }) => {
    await updateFolderMutation({
      folderId: folder.id,
      data: {
        pinned,
      },
    });
  };
  return (
    <Link to={formatPath()} data-folder-id={folder.id} data-folder-name={folder.name}>
      <Card className="hover:bg-muted/50 border-border h-full border transition-all">
@ -115,7 +112,9 @@ export const FolderCard = ({ folder, onMove, onSettings, onDelete }: FolderCardP
                    <Trans>Move</Trans>
                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={async () => updateFolder({ pinned: !folder.pinned })}>
+                  <DropdownMenuItem
                    onClick={() => (folder.pinned ? onUnpin(folder.id) : onPin(folder.id))}
                  >
                    <PinIcon className="mr-2 h-4 w-4" />
                    {folder.pinned ? <Trans>Unpin</Trans> : <Trans>Pin</Trans>}
                  </DropdownMenuItem>
--- a/apps/remix/app/components/general/folder/folder-grid.tsx
+++ b/apps/remix/app/components/general/folder/folder-grid.tsx
@ -5,8 +5,6 @@ import { FolderType } from '@prisma/client';
 import { FolderIcon, HomeIcon } from 'lucide-react';
 import { Link } from 'react-router';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { IS_ENVELOPES_ENABLED } from '@documenso/lib/constants/app';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
@ -21,8 +19,6 @@ import { DocumentUploadButton } from '~/components/general/document/document-upl
 import { FolderCard, FolderCardEmpty } from '~/components/general/folder/folder-card';
 import { useCurrentTeam } from '~/providers/team';
 import { EnvelopeUploadButton } from '../document/envelope-upload-button';
 export type FolderGridProps = {
  type: FolderType;
  parentId: string | null;
@ -30,7 +26,6 @@ export type FolderGridProps = {
 export const FolderGrid = ({ type, parentId }: FolderGridProps) => {
  const team = useCurrentTeam();
  const organisation = useCurrentOrganisation();
  const [isMovingFolder, setIsMovingFolder] = useState(false);
  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
@ -39,6 +34,9 @@ export const FolderGrid = ({ type, parentId }: FolderGridProps) => {
  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
  const { data: foldersData, isPending } = trpc.folder.getFolders.useQuery({
    type,
    parentId,
@ -99,9 +97,8 @@ export const FolderGrid = ({ type, parentId }: FolderGridProps) => {
        </div>
        <div className="flex gap-4 sm:flex-row sm:justify-end">
-          {(IS_ENVELOPES_ENABLED || organisation.organisationClaim.flags.allowEnvelopes) && (
+          {/* Todo: Envelopes - Feature flag */}
-            <EnvelopeUploadButton type={type} folderId={parentId || undefined} />
+          {/* <EnvelopeUploadButton type={type} folderId={parentId || undefined} /> */}
          )}
          {type === FolderType.DOCUMENT ? (
            <DocumentUploadButton />
@ -158,6 +155,8 @@ export const FolderGrid = ({ type, parentId }: FolderGridProps) => {
                      setFolderToMove(folder);
                      setIsMovingFolder(true);
                    }}
                    onPin={(folderId) => void pinFolder({ folderId })}
                    onUnpin={(folderId) => void unpinFolder({ folderId })}
                    onSettings={(folder) => {
                      setFolderToSettings(folder);
                      setIsSettingsFolderOpen(true);
@ -181,6 +180,8 @@ export const FolderGrid = ({ type, parentId }: FolderGridProps) => {
                      setFolderToMove(folder);
                      setIsMovingFolder(true);
                    }}
                    onPin={(folderId) => void pinFolder({ folderId })}
                    onUnpin={(folderId) => void unpinFolder({ folderId })}
                    onSettings={(folder) => {
                      setFolderToSettings(folder);
                      setIsSettingsFolderOpen(true);
--- a/apps/remix/app/components/general/share-document-download-button.tsx
+++ b/apps/remix/app/components/general/share-document-download-button.tsx
@ -15,6 +15,7 @@ export type ShareDocumentDownloadButtonProps = {
  documentData: DocumentData;
 };
 // Todo: Envelopes - Support multiple item downloads.
 export const ShareDocumentDownloadButton = ({
  title,
  documentData,
--- a/apps/remix/app/components/tables/documents-table-action-button.tsx
+++ b/apps/remix/app/components/tables/documents-table-action-button.tsx
@ -17,8 +17,6 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { useCurrentTeam } from '~/providers/team';
 import { EnvelopeDownloadDialog } from '../dialogs/envelope-download-dialog';
 export type DocumentsTableActionButtonProps = {
  row: TDocumentRow;
 };
@ -90,7 +88,6 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
    isComplete,
    isSigned,
    isCurrentTeamDocument,
    internalVersion: row.internalVersion,
  })
    .with(
      isOwner ? { isDraft: true, isOwner: true } : { isDraft: true, isCurrentTeamDocument: true },
@ -134,19 +131,6 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
        <Trans>View</Trans>
      </Button>
    ))
    .with({ isComplete: true, internalVersion: 2 }, () => (
      <EnvelopeDownloadDialog
        envelopeId={row.envelopeId}
        envelopeStatus={row.status}
        token={recipient?.token}
        trigger={
          <Button className="w-32">
            <Download className="-ml-1 mr-2 inline h-4 w-4" />
            <Trans>Download</Trans>
          </Button>
        }
      />
    ))
    .with({ isComplete: true }, () => (
      <Button className="w-32" onClick={onDownloadClick}>
        <Download className="-ml-1 mr-2 inline h-4 w-4" />
--- a/apps/remix/app/components/tables/documents-table-action-dropdown.tsx
+++ b/apps/remix/app/components/tables/documents-table-action-dropdown.tsx
@ -42,8 +42,6 @@ import { DocumentResendDialog } from '~/components/dialogs/document-resend-dialo
 import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
 import { useCurrentTeam } from '~/providers/team';
 import { EnvelopeDownloadDialog } from '../dialogs/envelope-download-dialog';
 export type DocumentsTableActionDropdownProps = {
  row: TDocumentRow;
  onMoveDocument?: () => void;
@ -178,33 +176,15 @@ export const DocumentsTableActionDropdown = ({
          </Link>
        </DropdownMenuItem>
-        {row.internalVersion === 2 ? (
+        <DropdownMenuItem disabled={!isComplete} onClick={onDownloadClick}>
-          <EnvelopeDownloadDialog
+          <Download className="mr-2 h-4 w-4" />
-            envelopeId={row.envelopeId}
+          <Trans>Download</Trans>
-            envelopeStatus={row.status}
+        </DropdownMenuItem>
            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>
            </DropdownMenuItem>
-            <DropdownMenuItem onClick={onDownloadOriginalClick}>
+        <DropdownMenuItem onClick={onDownloadOriginalClick}>
-              <FileDown className="mr-2 h-4 w-4" />
+          <FileDown className="mr-2 h-4 w-4" />
-              <Trans>Download Original</Trans>
+          <Trans>Download Original</Trans>
-            </DropdownMenuItem>
+        </DropdownMenuItem>
          </>
        )}
        <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
          <Copy className="mr-2 h-4 w-4" />
--- a/apps/remix/app/components/tables/templates-table.tsx
+++ b/apps/remix/app/components/tables/templates-table.tsx
@ -159,7 +159,6 @@ export const TemplatesTable = ({
          return (
            <div className="flex items-center gap-x-4">
              <TemplateUseDialog
                envelopeId={row.original.envelopeId}
                templateId={row.original.id}
                templateSigningOrder={row.original.templateMeta?.signingOrder}
                documentDistributionMethod={row.original.templateMeta?.distributionMethod}
--- a/apps/remix/app/routes/_authenticated+/_layout.tsx
+++ b/apps/remix/app/routes/_authenticated+/_layout.tsx
@ -116,7 +116,7 @@ export default function Layout({ loaderData, params, matches }: Route.ComponentP
        {!user.emailVerified && <VerifyEmailBanner email={user.email} />}
-        {banner && !hideHeader && <AppBanner banner={banner} />}
+        {banner && <AppBanner banner={banner} />}
        {!hideHeader && <Header />}
--- a/apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx
+++ b/apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx
@ -34,7 +34,6 @@ import { Input } from '@documenso/ui/primitives/input';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 import { AdminOrganisationMemberUpdateDialog } from '~/components/dialogs/admin-organisation-member-update-dialog';
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
 import { SettingsHeader } from '~/components/general/settings-header';
@ -72,6 +71,23 @@ export default function OrganisationGroupSettingsPage({ params }: Route.Componen
      },
    });
  const { mutateAsync: promoteToOwner, isPending: isPromotingToOwner } =
    trpc.admin.organisationMember.promoteToOwner.useMutation({
      onSuccess: () => {
        toast({
          title: t`Success`,
          description: t`Member promoted to owner successfully`,
        });
      },
      onError: () => {
        toast({
          title: t`Error`,
          description: t`We couldn't promote the member to owner. Please try again.`,
          variant: 'destructive',
        });
      },
    });
  const teamsColumns = useMemo(() => {
    return [
      {
@ -104,24 +120,23 @@ export default function OrganisationGroupSettingsPage({ params }: Route.Componen
      },
      {
        header: t`Actions`,
-        cell: ({ row }) => {
+        cell: ({ row }) => (
-          const isOwner = row.original.userId === organisation?.ownerUserId;
+          <div className="flex justify-end space-x-2">
-
+            <Button
-          return (
+              variant="outline"
-            <div className="flex justify-end space-x-2">
+              disabled={row.original.userId === organisation?.ownerUserId}
-              <AdminOrganisationMemberUpdateDialog
+              loading={isPromotingToOwner}
-                trigger={
+              onClick={async () =>
-                  <Button variant="outline">
+                promoteToOwner({
-                    <Trans>Update role</Trans>
+                  organisationId,
-                  </Button>
+                  userId: row.original.userId,
-                }
+                })
-                organisationId={organisationId}
+              }
-                organisationMember={row.original}
+            >
-                isOwner={isOwner}
+              <Trans>Promote to owner</Trans>
-              />
+            </Button>
-            </div>
+          </div>
-          );
+        ),
        },
      },
    ] satisfies DataTableColumnDef<TGetAdminOrganisationResponse['members'][number]>[];
  }, [organisation]);
@ -389,7 +404,6 @@ const OrganisationAdminForm = ({ organisation }: OrganisationAdminFormOptions) =
      claims: {
        teamCount: organisation.organisationClaim.teamCount,
        memberCount: organisation.organisationClaim.memberCount,
        envelopeItemCount: organisation.organisationClaim.envelopeItemCount,
        flags: organisation.organisationClaim.flags,
      },
      originalSubscriptionClaimId: organisation.organisationClaim.originalSubscriptionClaimId || '',
@ -547,30 +561,6 @@ const OrganisationAdminForm = ({ organisation }: OrganisationAdminFormOptions) =
          )}
        />
        <FormField
          control={form.control}
          name="claims.envelopeItemCount"
          render={({ field }) => (
            <FormItem>
              <FormLabel>
                <Trans>Envelope Item Count</Trans>
              </FormLabel>
              <FormControl>
                <Input
                  type="number"
                  min={1}
                  {...field}
                  onChange={(e) => field.onChange(parseInt(e.target.value, 10) || 0)}
                />
              </FormControl>
              <FormDescription>
                <Trans>Maximum number of uploaded files per envelope allowed</Trans>
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <div>
          <FormLabel>
            <Trans>Feature Flags</Trans>
--- a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/_layout.tsx
+++ b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/_layout.tsx
@ -5,10 +5,7 @@ import { Trans } from '@lingui/react/macro';
 import { SubscriptionStatus } from '@prisma/client';
 import { Link, Outlet } from 'react-router';
-import {
+import { PAID_PLAN_LIMITS } from '@documenso/ee/server-only/limits/constants';
  DEFAULT_MINIMUM_ENVELOPE_ITEM_COUNT,
  PAID_PLAN_LIMITS,
 } from '@documenso/ee/server-only/limits/constants';
 import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/client';
 import { useOptionalCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { TrpcProvider } from '@documenso/trpc/react';
@ -41,14 +38,12 @@ export default function Layout() {
          recipients: 0,
          directTemplates: 0,
        },
        maximumEnvelopeItemCount: 0,
      };
    }
    return {
      quota: PAID_PLAN_LIMITS,
      remaining: PAID_PLAN_LIMITS,
      maximumEnvelopeItemCount: DEFAULT_MINIMUM_ENVELOPE_ITEM_COUNT,
    };
  }, [organisation?.subscription]);
--- a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id._index.tsx
+++ b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id._index.tsx
@ -15,7 +15,6 @@ import {
  mapFieldsWithRecipients,
 } from '@documenso/ui/components/document/document-read-only-fields';
 import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
 import { cn } from '@documenso/ui/lib/utils';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@ -88,8 +87,6 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
  const documentRootPath = formatDocumentsPath(team.url);
  const isMultiEnvelopeItem = envelope.envelopeItems.length > 1 && envelope.internalVersion === 2;
  return (
    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
      {envelope.status === DocumentStatus.PENDING && (
@ -143,52 +140,40 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
      </div>
      <div className="mt-6 grid w-full grid-cols-12 gap-8">
-        {envelope.internalVersion === 2 ? (
+        <Card
-          <div className="relative col-span-12 lg:col-span-6 xl:col-span-7">
+          className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
-            <EnvelopeRenderProvider
+          gradient
              envelope={envelope}
              fields={envelope.status == DocumentStatus.COMPLETED ? [] : envelope.fields}
              recipientIds={envelope.recipients.map((recipient) => recipient.id)}
            >
              {isMultiEnvelopeItem && (
                <EnvelopeRendererFileSelector fields={envelope.fields} className="mb-4 p-0" />
              )}
              <Card className="rounded-xl before:rounded-xl" gradient>
                <CardContent className="p-2">
                  <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
                </CardContent>
              </Card>
            </EnvelopeRenderProvider>
          </div>
        ) : (
          <Card
            className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
            gradient
          >
            <CardContent className="p-2">
              {envelope.status !== DocumentStatus.COMPLETED && (
                <DocumentReadOnlyFields
                  fields={mapFieldsWithRecipients(envelope.fields, envelope.recipients)}
                  documentMeta={envelope.documentMeta || undefined}
                  showRecipientTooltip={true}
                  showRecipientColors={true}
                  recipientIds={envelope.recipients.map((recipient) => recipient.id)}
                />
              )}
              <PDFViewer
                document={envelope}
                key={envelope.envelopeItems[0].id}
                documentData={envelope.envelopeItems[0].documentData}
              />
            </CardContent>
          </Card>
        )}
        <div
          className={cn('col-span-12 lg:col-span-6 xl:col-span-5', isMultiEnvelopeItem && 'mt-20')}
        >
          <CardContent className="p-2">
            {envelope.internalVersion === 2 ? (
              <EnvelopeRenderProvider envelope={envelope} fields={envelope.fields}>
                <EnvelopeRendererFileSelector fields={envelope.fields} className="mb-4 p-0" />
                <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
              </EnvelopeRenderProvider>
            ) : (
              <>
                {envelope.status !== DocumentStatus.COMPLETED && (
                  <DocumentReadOnlyFields
                    fields={mapFieldsWithRecipients(envelope.fields, envelope.recipients)}
                    documentMeta={envelope.documentMeta || undefined}
                    showRecipientTooltip={true}
                    showRecipientColors={true}
                    recipientIds={envelope.recipients.map((recipient) => recipient.id)}
                  />
                )}
                <PDFViewer
                  document={envelope}
                  key={envelope.envelopeItems[0].id}
                  documentData={envelope.envelopeItems[0].documentData}
                />
              </>
            )}
          </CardContent>
        </Card>
        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
          <div className="space-y-6">
            <section className="border-border bg-widget flex flex-col rounded-xl border pb-4 pt-6">
              <div className="flex flex-row items-center justify-between px-4">
--- a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.edit.tsx
+++ b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.edit.tsx
@ -99,11 +99,7 @@ export default function EnvelopeEditorPage({ params }: Route.ComponentProps) {
  return (
    <EnvelopeEditorProvider initialEnvelope={envelope}>
-      <EnvelopeRenderProvider
+      <EnvelopeRenderProvider envelope={envelope}>
        envelope={envelope}
        fields={envelope.fields}
        recipientIds={envelope.recipients.map((recipient) => recipient.id)}
      >
        <EnvelopeEditor />
      </EnvelopeRenderProvider>
    </EnvelopeEditorProvider>
--- a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.legacy_editor.tsx
+++ b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.legacy_editor.tsx
@ -9,7 +9,6 @@ import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { logDocumentAccess } from '@documenso/lib/utils/logger';
 import { canAccessTeamDocument, formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { DocumentAttachmentsPopover } from '~/components/general/document/document-attachments-popover';
 import { DocumentEditForm } from '~/components/general/document/document-edit-form';
 import { DocumentStatus } from '~/components/general/document/document-status';
 import { LegacyFieldWarningPopover } from '~/components/general/legacy-field-warning-popover';
@ -123,13 +122,11 @@ export default function DocumentEditPage() {
          </div>
        </div>
-        <div className="flex items-center gap-x-4">
+        {document.useLegacyFieldInsertion && (
-          <DocumentAttachmentsPopover envelopeId={document.envelopeId} />
+          <div>
          {document.useLegacyFieldInsertion && (
            <LegacyFieldWarningPopover type="document" documentId={document.id} />
-          )}
+          </div>
-        </div>
+        )}
      </div>
      <DocumentEditForm
--- a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.folders._index.tsx
+++ b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.folders._index.tsx
@ -42,6 +42,9 @@ export default function DocumentsFoldersPage() {
    parentId: null,
  });
  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
  const navigateToFolder = (folderId?: string | null) => {
    const documentsPath = formatDocumentsPath(team.url);
@ -110,6 +113,8 @@ export default function DocumentsFoldersPage() {
                        setFolderToMove(folder);
                        setIsMovingFolder(true);
                      }}
                      onPin={(folderId) => void pinFolder({ folderId })}
                      onUnpin={(folderId) => void unpinFolder({ folderId })}
                      onSettings={(folder) => {
                        setFolderToSettings(folder);
                        setIsSettingsFolderOpen(true);
@ -142,6 +147,8 @@ export default function DocumentsFoldersPage() {
                      setFolderToMove(folder);
                      setIsMovingFolder(true);
                    }}
                    onPin={(folderId) => void pinFolder({ folderId })}
                    onUnpin={(folderId) => void unpinFolder({ folderId })}
                    onSettings={(folder) => {
                      setFolderToSettings(folder);
                      setIsSettingsFolderOpen(true);
--- a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.$id._index.tsx
+++ b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.$id._index.tsx
@ -11,7 +11,6 @@ import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/t
 import { trpc } from '@documenso/trpc/react';
 import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
@ -109,8 +108,6 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
      }
    : undefined;
  const isMultiEnvelopeItem = envelope.envelopeItems.length > 1 && envelope.internalVersion === 2;
  return (
    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
      <Link to={templateRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
@ -166,51 +163,39 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
      </div>
      <div className="mt-6 grid w-full grid-cols-12 gap-8">
-        {envelope.internalVersion === 2 ? (
+        <Card
-          <div className="relative col-span-12 lg:col-span-6 xl:col-span-7">
+          className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
-            <EnvelopeRenderProvider
+          gradient
              envelope={envelope}
              fields={envelope.fields}
              recipientIds={envelope.recipients.map((recipient) => recipient.id)}
            >
              {isMultiEnvelopeItem && (
                <EnvelopeRendererFileSelector fields={envelope.fields} className="mb-4 p-0" />
              )}
              <Card className="rounded-xl before:rounded-xl" gradient>
                <CardContent className="p-2">
                  <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
                </CardContent>
              </Card>
            </EnvelopeRenderProvider>
          </div>
        ) : (
          <Card
            className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
            gradient
          >
            <CardContent className="p-2">
              <DocumentReadOnlyFields
                fields={readOnlyFields}
                showFieldStatus={false}
                showRecipientTooltip={true}
                showRecipientColors={true}
                recipientIds={envelope.recipients.map((recipient) => recipient.id)}
                documentMeta={mockedDocumentMeta}
              />
              <PDFViewer
                document={envelope}
                key={envelope.envelopeItems[0].id}
                documentData={envelope.envelopeItems[0].documentData}
              />
            </CardContent>
          </Card>
        )}
        <div
          className={cn('col-span-12 lg:col-span-6 xl:col-span-5', isMultiEnvelopeItem && 'mt-20')}
        >
          <CardContent className="p-2">
            {envelope.internalVersion === 2 ? (
              <EnvelopeRenderProvider envelope={envelope} fields={envelope.fields}>
                <EnvelopeRendererFileSelector fields={envelope.fields} className="mb-4 p-0" />
                <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
              </EnvelopeRenderProvider>
            ) : (
              <>
                <DocumentReadOnlyFields
                  fields={readOnlyFields}
                  showFieldStatus={false}
                  showRecipientTooltip={true}
                  showRecipientColors={true}
                  recipientIds={envelope.recipients.map((recipient) => recipient.id)}
                  documentMeta={mockedDocumentMeta}
                />
                <PDFViewer
                  document={envelope}
                  key={envelope.envelopeItems[0].id}
                  documentData={envelope.envelopeItems[0].documentData}
                />
              </>
            )}
          </CardContent>
        </Card>
        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
          <div className="space-y-6">
            <section className="border-border bg-widget flex flex-col rounded-xl border pb-4 pt-6">
              <div className="flex flex-row items-center justify-between px-4">
@ -238,7 +223,6 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
              <div className="mt-4 border-t px-4 pt-4">
                <TemplateUseDialog
                  envelopeId={envelope.id}
                  templateId={mapSecondaryIdToTemplateId(envelope.secondaryId)}
                  templateSigningOrder={envelope.documentMeta?.signingOrder}
                  recipients={envelope.recipients}
--- a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.$id.legacy_editor.tsx
+++ b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.$id.legacy_editor.tsx
@ -8,7 +8,6 @@ import { getTemplateById } from '@documenso/lib/server-only/template/get-templat
 import { formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { TemplateDirectLinkDialog } from '~/components/dialogs/template-direct-link-dialog';
 import { DocumentAttachmentsPopover } from '~/components/general/document/document-attachments-popover';
 import { LegacyFieldWarningPopover } from '~/components/general/legacy-field-warning-popover';
 import { TemplateDirectLinkBadge } from '~/components/general/template/template-direct-link-badge';
 import { TemplateEditForm } from '~/components/general/template/template-edit-form';
@ -88,8 +87,6 @@ export default function TemplateEditPage() {
        </div>
        <div className="mt-2 flex items-center gap-2 sm:mt-0 sm:self-end">
          <DocumentAttachmentsPopover envelopeId={template.envelopeId} />
          <TemplateDirectLinkDialog
            templateId={template.id}
            directLink={template.directLink}
--- a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.folders._index.tsx
+++ b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.folders._index.tsx
@ -42,6 +42,9 @@ export default function TemplatesFoldersPage() {
    parentId: null,
  });
  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
  const navigateToFolder = (folderId?: string | null) => {
    const templatesPath = formatTemplatesPath(team.url);
@ -110,6 +113,8 @@ export default function TemplatesFoldersPage() {
                        setFolderToMove(folder);
                        setIsMovingFolder(true);
                      }}
                      onPin={(folderId) => void pinFolder({ folderId })}
                      onUnpin={(folderId) => void unpinFolder({ folderId })}
                      onSettings={(folder) => {
                        setFolderToSettings(folder);
                        setIsSettingsFolderOpen(true);
@ -142,6 +147,8 @@ export default function TemplatesFoldersPage() {
                      setFolderToMove(folder);
                      setIsMovingFolder(true);
                    }}
                    onPin={(folderId) => void pinFolder({ folderId })}
                    onUnpin={(folderId) => void unpinFolder({ folderId })}
                    onSettings={(folder) => {
                      setFolderToSettings(folder);
                      setIsSettingsFolderOpen(true);
--- a/apps/remix/app/routes/_recipient+/_layout.tsx
+++ b/apps/remix/app/routes/_recipient+/_layout.tsx
@ -22,9 +22,7 @@ export default function RecipientLayout({ matches }: Route.ComponentProps) {
  // Hide the header for signing routes.
  const hideHeader = matches.some(
-    (match) =>
+    (match) => match?.id === 'routes/_recipient+/sign.$token+/_index',
      match?.id === 'routes/_recipient+/sign.$token+/_index' ||
      match?.id === 'routes/_recipient+/d.$token+/_index',
  );
  return (
--- a/apps/remix/app/routes/_recipient+/d.$token+/_index.tsx
+++ b/apps/remix/app/routes/_recipient+/d.$token+/_index.tsx
@ -4,29 +4,20 @@ import { redirect } from 'react-router';
 import { match } from 'ts-pattern';
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
 import { EnvelopeRenderProvider } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { getEnvelopeForDirectTemplateSigning } from '@documenso/lib/server-only/envelope/get-envelope-for-direct-template-signing';
 import { getEnvelopeRequiredAccessData } from '@documenso/lib/server-only/envelope/get-envelope-required-access-data';
 import { getTemplateByDirectLinkToken } from '@documenso/lib/server-only/template/get-template-by-direct-link-token';
 import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
 import { prisma } from '@documenso/prisma';
 import { Header as AuthenticatedHeader } from '~/components/general/app-header';
 import { DirectTemplatePageView } from '~/components/general/direct-template/direct-template-page';
 import { DirectTemplateAuthPageView } from '~/components/general/direct-template/direct-template-signing-auth-page';
 import { DocumentSigningAuthPageView } from '~/components/general/document-signing/document-signing-auth-page';
 import { DocumentSigningAuthProvider } from '~/components/general/document-signing/document-signing-auth-provider';
 import { DocumentSigningPageViewV2 } from '~/components/general/document-signing/document-signing-page-view-v2';
 import { DocumentSigningProvider } from '~/components/general/document-signing/document-signing-provider';
 import { EnvelopeSigningProvider } from '~/components/general/document-signing/envelope-signing-provider';
 import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
 import type { Route } from './+types/_index';
-const handleV1Loader = async ({ params, request }: Route.LoaderArgs) => {
+export async function loader({ params, request }: Route.LoaderArgs) {
  const session = await getOptionalSession(request);
  const { token } = params;
@ -64,111 +55,27 @@ const handleV1Loader = async ({ params, request }: Route.LoaderArgs) => {
  );
  if (!isAccessAuthValid) {
-    return {
+    return superLoaderJson({
      isAccessAuthValid: false as const,
-    };
+    });
  }
-  return {
+  return superLoaderJson({
    isAccessAuthValid: true,
    template: {
      ...template,
      folder: null,
    },
    directTemplateRecipient,
  } as const;
 };
 const handleV2Loader = async ({ params, request }: Route.LoaderArgs) => {
  const session = await getOptionalSession(request);
  const { token } = params;
  if (!token) {
    throw redirect('/');
  }
  return await getEnvelopeForDirectTemplateSigning({
    token,
    userId: session?.user?.id,
  })
    .then((envelopeForSigning) => {
      return {
        isDocumentAccessValid: true,
        envelopeForSigning,
      } as const;
    })
    .catch(async (e) => {
      const error = AppError.parseError(e);
      if (error.code === AppErrorCode.UNAUTHORIZED) {
        const requiredAccessData = await getEnvelopeRequiredAccessData({ token });
        return {
          isDocumentAccessValid: false,
          ...requiredAccessData,
        } as const;
      }
      throw new Response('Not Found', { status: 404 });
    });
 };
 export async function loader(loaderArgs: Route.LoaderArgs) {
  const { token } = loaderArgs.params;
  if (!token) {
    throw redirect('/');
  }
  const directEnvelope = await prisma.envelope.findFirst({
    where: {
      directLink: {
        enabled: true,
        token,
      },
    },
    select: {
      internalVersion: true,
    },
  });
  if (!directEnvelope) {
    throw new Response('Not Found', { status: 404 });
  }
  if (directEnvelope.internalVersion === 2) {
    const payloadV2 = await handleV2Loader(loaderArgs);
    return superLoaderJson({
      version: 2,
      payload: payloadV2,
    } as const);
  }
  const payloadV1 = await handleV1Loader(loaderArgs);
  return superLoaderJson({
    version: 1,
    payload: payloadV1,
  } as const);
 }
 export default function DirectTemplatePage() {
  const data = useSuperLoaderData<typeof loader>();
  if (data.version === 2) {
    return <DirectSigningPageV2 data={data.payload} />;
  }
  return <DirectSigningPageV1 data={data.payload} />;
 }
 const DirectSigningPageV1 = ({ data }: { data: Awaited<ReturnType<typeof handleV1Loader>> }) => {
  const { sessionData } = useOptionalSession();
  const user = sessionData?.user;
  const data = useSuperLoaderData<typeof loader>();
  // Should not be possible for directLink to be null.
  if (!data.isAccessAuthValid) {
    return <DirectTemplateAuthPageView />;
@ -190,68 +97,28 @@ const DirectSigningPageV1 = ({ data }: { data: Awaited<ReturnType<typeof handleV
        recipient={directTemplateRecipient}
        user={user}
      >
-        <>
+        <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
-          {sessionData?.user && <AuthenticatedHeader />}
+          <h1
            className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
            title={template.title}
          >
            {template.title}
          </h1>
-          <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
+          <div className="text-muted-foreground mb-8 mt-2.5 flex items-center gap-x-2">
-            <h1
+            <UsersIcon className="h-4 w-4" />
-              className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
+            <p className="text-muted-foreground/80">
-              title={template.title}
+              <Plural value={template.recipients.length} one="# recipient" other="# recipients" />
-            >
+            </p>
              {template.title}
            </h1>
            <div className="text-muted-foreground mb-8 mt-2.5 flex items-center gap-x-2">
              <UsersIcon className="h-4 w-4" />
              <p className="text-muted-foreground/80">
                <Plural value={template.recipients.length} one="# recipient" other="# recipients" />
              </p>
            </div>
            <DirectTemplatePageView
              directTemplateRecipient={directTemplateRecipient}
              directTemplateToken={template.directLink.token}
              template={template}
            />
          </div>
-        </>
+
          <DirectTemplatePageView
            directTemplateRecipient={directTemplateRecipient}
            directTemplateToken={template.directLink.token}
            template={template}
          />
        </div>
      </DocumentSigningAuthProvider>
    </DocumentSigningProvider>
  );
-};
+}
 const DirectSigningPageV2 = ({ data }: { data: Awaited<ReturnType<typeof handleV2Loader>> }) => {
  const { sessionData } = useOptionalSession();
  const user = sessionData?.user;
  if (!data.isDocumentAccessValid) {
    return (
      <DocumentSigningAuthPageView
        email={data.recipientEmail}
        emailHasAccount={!!data.recipientHasAccount}
      />
    );
  }
  const { envelope, recipient } = data.envelopeForSigning;
  return (
    <EnvelopeSigningProvider
      envelopeData={data.envelopeForSigning}
      email={''} // Doing this allows us to let users change the email if they want to.
      fullName={user?.name}
      signature={user?.signature}
    >
      <DocumentSigningAuthProvider
        documentAuthOptions={envelope.authOptions}
        recipient={recipient}
        user={user}
      >
        <EnvelopeRenderProvider envelope={envelope}>
          <DocumentSigningPageViewV2 />
        </EnvelopeRenderProvider>
      </DocumentSigningAuthProvider>
    </EnvelopeSigningProvider>
  );
 };
--- a/apps/remix/app/routes/_unauthenticated+/signin.tsx
+++ b/apps/remix/app/routes/_unauthenticated+/signin.tsx
@ -4,7 +4,6 @@ import { Link, redirect } from 'react-router';
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
 import {
  IS_GOOGLE_SSO_ENABLED,
  IS_MICROSOFT_SSO_ENABLED,
  IS_OIDC_SSO_ENABLED,
  OIDC_PROVIDER_LABEL,
 } from '@documenso/lib/constants/auth';
@ -24,7 +23,6 @@ export async function loader({ request }: Route.LoaderArgs) {
  // SSR env variables.
  const isGoogleSSOEnabled = IS_GOOGLE_SSO_ENABLED;
  const isMicrosoftSSOEnabled = IS_MICROSOFT_SSO_ENABLED;
  const isOIDCSSOEnabled = IS_OIDC_SSO_ENABLED;
  const oidcProviderLabel = OIDC_PROVIDER_LABEL;
@ -34,15 +32,13 @@ export async function loader({ request }: Route.LoaderArgs) {
  return {
    isGoogleSSOEnabled,
    isMicrosoftSSOEnabled,
    isOIDCSSOEnabled,
    oidcProviderLabel,
  };
 }
 export default function SignIn({ loaderData }: Route.ComponentProps) {
-  const { isGoogleSSOEnabled, isMicrosoftSSOEnabled, isOIDCSSOEnabled, oidcProviderLabel } =
+  const { isGoogleSSOEnabled, isOIDCSSOEnabled, oidcProviderLabel } = loaderData;
    loaderData;
  return (
    <div className="w-screen max-w-lg px-4">
@ -58,7 +54,6 @@ export default function SignIn({ loaderData }: Route.ComponentProps) {
        <SignInForm
          isGoogleSSOEnabled={isGoogleSSOEnabled}
          isMicrosoftSSOEnabled={isMicrosoftSSOEnabled}
          isOIDCSSOEnabled={isOIDCSSOEnabled}
          oidcProviderLabel={oidcProviderLabel}
        />
--- a/apps/remix/app/routes/_unauthenticated+/signup.tsx
+++ b/apps/remix/app/routes/_unauthenticated+/signup.tsx
@ -1,10 +1,6 @@
 import { redirect } from 'react-router';
-import {
+import { IS_GOOGLE_SSO_ENABLED, IS_OIDC_SSO_ENABLED } from '@documenso/lib/constants/auth';
  IS_GOOGLE_SSO_ENABLED,
  IS_MICROSOFT_SSO_ENABLED,
  IS_OIDC_SSO_ENABLED,
 } from '@documenso/lib/constants/auth';
 import { env } from '@documenso/lib/utils/env';
 import { SignUpForm } from '~/components/forms/signup';
@ -21,7 +17,6 @@ export function loader() {
  // SSR env variables.
  const isGoogleSSOEnabled = IS_GOOGLE_SSO_ENABLED;
  const isMicrosoftSSOEnabled = IS_MICROSOFT_SSO_ENABLED;
  const isOIDCSSOEnabled = IS_OIDC_SSO_ENABLED;
  if (NEXT_PUBLIC_DISABLE_SIGNUP === 'true') {
@ -30,19 +25,17 @@ export function loader() {
  return {
    isGoogleSSOEnabled,
    isMicrosoftSSOEnabled,
    isOIDCSSOEnabled,
  };
 }
 export default function SignUp({ loaderData }: Route.ComponentProps) {
-  const { isGoogleSSOEnabled, isMicrosoftSSOEnabled, isOIDCSSOEnabled } = loaderData;
+  const { isGoogleSSOEnabled, isOIDCSSOEnabled } = loaderData;
  return (
    <SignUpForm
      className="w-screen max-w-screen-2xl px-4 md:px-16 lg:-my-16"
      isGoogleSSOEnabled={isGoogleSSOEnabled}
      isMicrosoftSSOEnabled={isMicrosoftSSOEnabled}
      isOIDCSSOEnabled={isOIDCSSOEnabled}
    />
  );
--- a/apps/remix/app/routes/embed+/_v0+/direct.$url.tsx
+++ b/apps/remix/app/routes/embed+/_v0+/direct.$url.tsx
@ -122,7 +122,6 @@ export default function EmbedDirectTemplatePage() {
        <DocumentSigningRecipientProvider recipient={recipient}>
          <EmbedDirectTemplateClientPage
            token={token}
            envelopeId={template.envelopeId}
            updatedAt={template.updatedAt}
            documentData={template.templateDocumentData}
            recipient={recipient}
--- a/apps/remix/app/routes/embed+/_v0+/sign.$url.tsx
+++ b/apps/remix/app/routes/embed+/_v0+/sign.$url.tsx
@ -164,7 +164,6 @@ export default function EmbedSignDocumentPage() {
        <EmbedSignDocumentClientPage
          token={token}
          documentId={document.id}
          envelopeId={document.envelopeId}
          documentData={document.documentData}
          recipient={recipient}
          fields={fields}
--- a/apps/remix/app/types/embed-authoring-base-schema.ts
+++ b/apps/remix/app/types/embed-authoring-base-schema.ts
@ -4,6 +4,7 @@ import { ZBaseEmbedDataSchema } from './embed-base-schemas';
 export const ZBaseEmbedAuthoringSchema = z
  .object({
    token: z.string(),
    externalId: z.string().optional(),
    features: z
      .object({
--- a/apps/remix/app/utils/field-signing/checkbox-field.ts
+++ b/apps/remix/app/utils/field-signing/checkbox-field.ts
@ -1,74 +0,0 @@
 import { FieldType } from '@prisma/client';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TFieldCheckbox } from '@documenso/lib/types/field';
 import { parseCheckboxCustomText } from '@documenso/lib/utils/fields';
 import type { TSignEnvelopeFieldValue } from '@documenso/trpc/server/envelope-router/sign-envelope-field.types';
 import { checkboxValidationSigns } from '@documenso/ui/primitives/document-flow/field-items-advanced-settings/constants';
 import { SignFieldCheckboxDialog } from '~/components/dialogs/sign-field-checkbox-dialog';
 type HandleCheckboxFieldClickOptions = {
  field: TFieldCheckbox;
  clickedCheckboxIndex: number;
 };
 export const handleCheckboxFieldClick = async (
  options: HandleCheckboxFieldClickOptions,
 ): Promise<Extract<TSignEnvelopeFieldValue, { type: typeof FieldType.CHECKBOX }> | null> => {
  const { field, clickedCheckboxIndex } = options;
  if (field.type !== FieldType.CHECKBOX) {
    throw new AppError(AppErrorCode.INVALID_REQUEST, {
      message: 'Invalid field type',
    });
  }
  const { values = [], validationRule, validationLength } = field.fieldMeta;
  const { customText } = field;
  const currentCheckedIndices: number[] = customText ? parseCheckboxCustomText(customText) : [];
  const newValues = values.map((_value, i) => {
    let isChecked = currentCheckedIndices.includes(i);
    if (i === clickedCheckboxIndex) {
      isChecked = !isChecked;
    }
    return {
      index: i,
      isChecked,
    };
  });
  let checkedValues: number[] | null = newValues.filter((v) => v.isChecked).map((v) => v.index);
  if (validationRule && validationLength) {
    const checkboxValidationRule = checkboxValidationSigns.find(
      (sign) => sign.label === validationRule,
    );
    if (!checkboxValidationRule) {
      throw new AppError(AppErrorCode.INVALID_REQUEST, {
        message: 'Invalid checkbox validation rule',
      });
    }
    checkedValues = await SignFieldCheckboxDialog.call({
      fieldMeta: field.fieldMeta,
      validationRule: checkboxValidationRule.value,
      validationLength,
      preselectedIndices: currentCheckedIndices,
    });
  }
  if (!checkedValues) {
    return null;
  }
  return {
    type: FieldType.CHECKBOX,
    value: checkedValues,
  };
 };
--- a/apps/remix/app/utils/field-signing/email-field.ts
+++ b/apps/remix/app/utils/field-signing/email-field.ts
@ -9,13 +9,12 @@ import { SignFieldEmailDialog } from '~/components/dialogs/sign-field-email-dial
 type HandleEmailFieldClickOptions = {
  field: TFieldEmail;
  email: string | null;
  placeholderEmail: string | null;
 };
 export const handleEmailFieldClick = async (
  options: HandleEmailFieldClickOptions,
 ): Promise<Extract<TSignEnvelopeFieldValue, { type: typeof FieldType.EMAIL }> | null> => {
-  const { field, email, placeholderEmail } = options;
+  const { field, email } = options;
  if (field.type !== FieldType.EMAIL) {
    throw new AppError(AppErrorCode.INVALID_REQUEST, {
@ -33,9 +32,7 @@ export const handleEmailFieldClick = async (
  let emailToInsert = email;
  if (!emailToInsert) {
-    emailToInsert = await SignFieldEmailDialog.call({
+    emailToInsert = await SignFieldEmailDialog.call({});
      placeholderEmail,
    });
  }
  if (!emailToInsert) {
--- a/apps/remix/app/utils/field-signing/signature-field.ts
+++ b/apps/remix/app/utils/field-signing/signature-field.ts
@ -30,6 +30,7 @@ export const handleSignatureFieldClick = async (
    return {
      type: FieldType.SIGNATURE,
      value: null,
      isBase64: false,
    };
  }
@ -50,5 +51,6 @@ export const handleSignatureFieldClick = async (
  return {
    type: FieldType.SIGNATURE,
    value: signatureToInsert,
    isBase64: signatureToInsert.startsWith('data:image'),
  };
 };
--- a/apps/remix/package.json
+++ b/apps/remix/package.json
@ -14,7 +14,7 @@
    "with:env": "dotenv -e ../../.env -e ../../.env.local --"
  },
  "dependencies": {
-    "@cantoo/pdf-lib": "^2.5.2",
+    "@cantoo/pdf-lib": "^2.3.2",
    "@documenso/api": "*",
    "@documenso/assets": "*",
    "@documenso/auth": "*",
@ -103,5 +103,5 @@
    "vite-plugin-babel-macros": "^1.0.6",
    "vite-tsconfig-paths": "^5.1.4"
  },
-  "version": "1.13.1"
+  "version": "1.12.10"
 }
--- a/apps/remix/public/fonts/noto-sans-chinese.ttf
+++ b/apps/remix/public/fonts/noto-sans-chinese.ttf
--- a/apps/remix/public/fonts/noto-sans-japanese.ttf
+++ b/apps/remix/public/fonts/noto-sans-japanese.ttf
--- a/apps/remix/public/fonts/noto-sans-korean.ttf
+++ b/apps/remix/public/fonts/noto-sans-korean.ttf
--- a/apps/remix/public/static/microsoft.svg
+++ b/apps/remix/public/static/microsoft.svg
@ -1 +0,0 @@
 <svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" width="256" height="256" preserveAspectRatio="xMidYMid"><path fill="#F1511B" d="M121.666 121.666H0V0h121.666z"/><path fill="#80CC28" d="M256 121.666H134.335V0H256z"/><path fill="#00ADEF" d="M121.663 256.002H0V134.336h121.663z"/><path fill="#FBBC09" d="M256 256.002H134.335V134.336H256z"/></svg>
--- a/apps/remix/server/main.js
+++ b/apps/remix/server/main.js
@ -30,6 +30,4 @@ server.use(
 const handler = handle(build, server);
-const port = parseInt(process.env.PORT || '3000', 10);
+serve({ fetch: handler.fetch, port: 3000 });
 serve({ fetch: handler.fetch, port });
--- a/apps/remix/server/router.ts
+++ b/apps/remix/server/router.ts
@ -1,7 +1,6 @@
 import { Hono } from 'hono';
 import { rateLimiter } from 'hono-rate-limiter';
 import { contextStorage } from 'hono/context-storage';
 import { cors } from 'hono/cors';
 import { requestId } from 'hono/request-id';
 import type { RequestIdVariables } from 'hono/request-id';
 import type { Logger } from 'pino';
@ -84,14 +83,12 @@ app.route('/api/auth', auth);
 app.route('/api/files', filesRoute);
 // API servers.
 app.use(`/api/v1/*`, cors());
 app.route('/api/v1', tsRestHonoApp);
 app.use('/api/jobs/*', jobsClient.getApiHandler());
 app.use('/api/trpc/*', reactRouterTrpcServer);
 // Unstable API server routes. Order matters for these two.
 app.get(`${API_V2_BETA_URL}/openapi.json`, (c) => c.json(openApiDocument));
 app.use(`${API_V2_BETA_URL}/*`, cors());
 app.use(`${API_V2_BETA_URL}/*`, async (c) => openApiTrpcServerHandler(c));
 export default app;
--- a/apps/remix/vite.config.ts
+++ b/apps/remix/vite.config.ts
@ -21,7 +21,7 @@ export default defineConfig({
    },
  },
  server: {
-    port: parseInt(process.env.PORT || '3000', 10),
+    port: 3000,
    strictPort: true,
  },
  plugins: [
@ -85,7 +85,6 @@ export default defineConfig({
        'nodemailer',
        /playwright/,
        '@playwright/browser-chromium',
        'skia-canvas',
      ],
    },
  },
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Ephraim Atta-Duncan	28865c2f71	chore: update the tests	2025-10-15 20:44:08 +00:00
Ephraim Atta-Duncan	d70ea9c6a7	fix: invalidate sessions on password reset and update	2025-10-15 16:39:24 +00:00
		`@ -1 +0,0 @@`
			`<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" width="256" height="256" preserveAspectRatio="xMidYMid"><path fill="#F1511B" d="M121.666 121.666H0V0h121.666z"/><path fill="#80CC28" d="M256 121.666H134.335V0H256z"/><path fill="#00ADEF" d="M121.663 256.002H0V134.336h121.663z"/><path fill="#FBBC09" d="M256 256.002H134.335V134.336H256z"/></svg>`