feat: redesign envelope editor step navigation and unify brand colors

2026-07-12 14:05:20 +10:00 · 2026-07-08 02:16:30 +00:00
26 changed files with 1508 additions and 2562 deletions
@@ -76,8 +76,6 @@ The Enterprise Edition is required when you:
    4. Restart your Documenso instance
    5. Verify the license is active in the **Admin Panel** under the **Stats** section

-    See [Apply Your License Key](/docs/self-hosting/configuration/license) for the full walkthrough, including how to enable individual features once licensed.
-
  </Accordion>
 </Accordions>

@@ -199,7 +197,7 @@ See [Support](/docs/policies/support) for complete support options.
    1. Sign the Enterprise license agreement
    2. Receive license key and access credentials
    3. Deploy using [self-hosting guides](/docs/self-hosting) or access Documenso Cloud
-    4. Apply the key — see [Apply Your License Key](/docs/self-hosting/configuration/license) — and configure Enterprise features with support assistance
+    4. Configure Enterprise features with support assistance

  </Step>
  <Step>
@@ -240,7 +238,6 @@ See [Support](/docs/policies/support) for complete support options.

 ## Related

- [Apply Your License Key](/docs/self-hosting/configuration/license) - Step-by-step license activation
 - [Community Edition](/docs/policies/community-edition) - AGPL-3.0 open-source license
 - [Licenses](/docs/policies/licenses) - Complete licensing overview and FAQ
 - [Support](/docs/policies/support) - Support channels and response times
@@ -443,11 +443,11 @@ Telemetry collects only: app version, installation ID, and node ID. No personal

 ## Enterprise Features

-These variables require an active [Enterprise Edition](/docs/policies/enterprise-edition) license. Obtain a license key from [license.documenso.com](https://license.documenso.com) and set it below to unlock enterprise features such as SSO, embed editor, and 21 CFR Part 11 compliance. See [Apply Your License Key](/docs/self-hosting/configuration/license) for step-by-step setup.
+These variables require an active [Enterprise Edition](/docs/policies/enterprise-edition) license. Obtain a license key from [license.documenso.com](https://license.documenso.com) and set it below to unlock enterprise features such as SSO, embed editor, and 21 CFR Part 11 compliance.

 | Variable                             | Description                                      |
 | ------------------------------------ | ------------------------------------------------ |
-| `NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY` | License key for enterprise features — see [Apply Your License Key](/docs/self-hosting/configuration/license) for how to apply it |
+| `NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY` | License key for enterprise features              |
 | `NEXT_PRIVATE_STRIPE_API_KEY`        | Stripe API key for billing                       |
 | `NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET` | Stripe webhook secret                            |
 | `NEXT_PRIVATE_SES_ACCESS_KEY_ID`     | AWS SES access key for email domain verification |
@@ -1,107 +0,0 @@
---
-title: Apply Your License Key
-description: Activate your Enterprise license key to unlock enterprise features on your self-hosted instance.
---
-
-import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
-import { Callout } from 'fumadocs-ui/components/callout';
-import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
-
-A license key activates the Enterprise features available to your self-hosted instance, such as CSC signing, SSO, embed white-labelling, and 21 CFR Part 11 compliance.
-
-<Callout type="info">
-  The license key applies to your **whole instance**, not an individual user account. There's one
-  key per deployment.
-</Callout>
-
-## Prerequisites
-
- An active Enterprise license key — contact [sales](https://documen.so/enterprise) to set up an
-  Enterprise subscription, then copy your key from [license.documenso.com](https://license.documenso.com).
-  See [Enterprise Edition](/docs/policies/enterprise-edition) for details.
- A running self-hosted Documenso instance that you're able to restart
-
-## Step 1: Set the environment variable
-
-Set `NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY` to your license key.
-
-<Tabs items={['Docker Compose', 'docker run', '.env']}>
-<Tab value="Docker Compose">
-
-Add the variable to your `.env` file (or directly under `environment:` in `compose.yml`):
-
-```bash
-NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY=your-license-key-here
-```
-
-Then apply it:
-
-```bash
-docker compose up -d
-```
-
-</Tab>
-<Tab value="docker run">
-
-```bash
-docker run -d \
-  --name documenso \
-  -e NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY=your-license-key-here \
-  documenso/documenso:latest
-```
-
-</Tab>
-<Tab value=".env">
-
-If you're running Documenso directly (not in a container), add the variable to your `.env` file:
-
-```bash
-NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY=your-license-key-here
-```
-
-</Tab>
-</Tabs>
-
-## Step 2: Restart the instance
-
-The license key is only read once, at process startup. Setting the variable in a running container or shell has no effect until the process restarts.
-
-```bash
-# Docker Compose
-docker compose restart documenso
-
-# Docker
-docker restart documenso
-```
-
-On startup, Documenso validates the key against the Documenso license server and caches the result locally for future startups, so a brief license-server outage won't lock you out.
-
-## What the license enables
-
-A valid license doesn't turn every enterprise feature on everywhere — activation depends on the feature:
-
- **CSC signing** activates instance-wide automatically once the license is active and CSC transport is configured. See [CSC / QES Signing](/docs/self-hosting/configuration/signing-certificate/csc-qes) for the full setup.
- **SSO, embed white-labelling, 21 CFR Part 11, and similar** are provisioned per organisation. Follow each feature's own guide to configure it once the license is active.
-
-## Troubleshooting
-
-<Accordions type="multiple">
-  <Accordion title="Enterprise features are still unavailable after applying the key">
-    - Confirm the key is present in the environment the running process actually reads — `docker
-      exec` into the container and check `env | grep LICENSE` if unsure.
-    - Confirm the instance was fully restarted after the variable was set, not just reloaded.
-    - Re-copy the key to rule out truncation or accidental whitespace.
-  </Accordion>
-  <Accordion title="A specific feature still isn't working">
-    Instance-wide features (like CSC signing) also need their own configuration — an active license
-    alone isn't enough. Check that feature's guide to confirm the required settings are in place.
-    Per-organisation features additionally need to be provisioned for the organisation that's using
-    them.
-  </Accordion>
-</Accordions>
-
-## See Also
-
- [Environment Variables](/docs/self-hosting/configuration/environment) - Complete configuration reference
- [Enterprise Edition](/docs/policies/enterprise-edition) - What's included and how to purchase a license
- [CSC / QES Signing](/docs/self-hosting/configuration/signing-certificate/csc-qes) - Enable CSC-based signing
@@ -2,7 +2,6 @@
  "title": "Configuration",
  "pages": [
    "environment",
-    "license",
    "database",
    "email",
    "storage",
@@ -49,7 +49,7 @@ The callback URL is fixed — Documenso derives it from `NEXT_PUBLIC_WEBAPP_URL`

 ### Enterprise Edition license

-CSC mode is gated by the `instanceCscSigning` license flag. Without a valid Enterprise license, the transport refuses to start (`CSC_UNLICENSED`). See [Apply Your License Key](/docs/self-hosting/configuration/license) to activate one.
+CSC mode is gated by the `instanceCscSigning` license flag. Without a valid Enterprise license, the transport refuses to start (`CSC_UNLICENSED`).

 </Step>
 <Step>
@@ -141,7 +141,7 @@ See the [Quick Start guide](/docs/self-hosting/getting-started/quick-start) for

 Self-hosted Documenso includes full core functionality under the AGPL-3.0 license. If you need enterprise features such as SSO, embed editor white label, or 21 CFR Part 11 compliance, you can activate them with a license key.

-See [Enterprise Edition](/docs/policies/enterprise-edition) for details and [Licenses](/docs/policies/licenses) for a comparison. Already have a key? See [Apply Your License Key](/docs/self-hosting/configuration/license).
+See [Enterprise Edition](/docs/policies/enterprise-edition) for details and [Licenses](/docs/policies/licenses) for a comparison.

 ---

@@ -216,7 +216,7 @@ export const EnvelopeEditorFieldsPage = () => {
                  <div className="relative flex h-5 w-5 flex-shrink-0 items-center justify-center">
                    <div
                      className={cn('h-2 w-2 rounded-full transition-opacity duration-150 group-hover:opacity-0', {
-                        'bg-green-500': currentEnvelopeItem?.id === item.id,
+                        'bg-primary': currentEnvelopeItem?.id === item.id,
                      })}
                    />
                    <EnvelopeItemEditDialog
@@ -7,12 +7,7 @@ import { useOptionalSession } from '@documenso/lib/client-only/providers/session
 import type { TDetectedRecipientSchema } from '@documenso/lib/server-only/ai/envelope/detect-recipients/schema';
 import { ZRecipientAuthOptionsSchema } from '@documenso/lib/types/document-auth';
 import { nanoid } from '@documenso/lib/universal/id';
-import {
-  isAssistantLastSigner,
-  isCcRecipient,
-  normalizeRecipientSigningOrders,
-  canRecipientBeModified as utilCanRecipientBeModified,
-} from '@documenso/lib/utils/recipients';
+import { canRecipientBeModified as utilCanRecipientBeModified } from '@documenso/lib/utils/recipients';
 import { trpc } from '@documenso/trpc/react';
 import { RecipientActionAuthSelect } from '@documenso/ui/components/recipient/recipient-action-auth-select';
 import {
@@ -161,12 +156,16 @@ export const EnvelopeEditorRecipientForm = () => {
  }, [watchedSigners]);

  const normalizeSigningOrders = (signers: typeof watchedSigners) => {
-    return normalizeRecipientSigningOrders(signers, (signer) => canRecipientBeModified(signer.id));
+    return signers
+      .sort((a, b) => (a.signingOrder ?? 0) - (b.signingOrder ?? 0))
+      .map((signer, index) => ({ ...signer, signingOrder: index + 1 }));
  };

-  const activeRecipientCount = watchedSigners.filter((signer) => !isCcRecipient(signer)).length;
-
-  const { fields: signers, remove: removeSigner } = useFieldArray({
+  const {
+    append: appendSigner,
+    fields: signers,
+    remove: removeSigner,
+  } = useFieldArray({
    control,
    name: 'signers',
    keyName: 'nativeId',
@@ -209,31 +208,14 @@ export const EnvelopeEditorRecipientForm = () => {
    return utilCanRecipientBeModified(recipient, fields);
  };

-  const appendNormalizedSigner = (signer: (typeof watchedSigners)[number], shouldFocus = false) => {
-    const updatedSigners = normalizeSigningOrders([...form.getValues('signers'), signer]);
-
-    form.setValue('signers', updatedSigners, {
-      shouldValidate: true,
-      shouldDirty: true,
-    });
-
-    if (shouldFocus) {
-      const signerIndex = updatedSigners.findIndex((updatedSigner) => updatedSigner.formId === signer.formId);
-
-      if (signerIndex !== -1) {
-        requestAnimationFrame(() => form.setFocus(`signers.${signerIndex}.email`));
-      }
-    }
-  };
-
  const onAddSigner = () => {
-    appendNormalizedSigner({
+    appendSigner({
      formId: nanoid(12),
      name: '',
      email: '',
      role: RecipientRole.SIGNER,
      actionAuth: [],
-      signingOrder: activeRecipientCount + 1,
+      signingOrder: signers.length > 0 ? (signers[signers.length - 1]?.signingOrder ?? 0) + 1 : 1,
    });
  };

@@ -341,16 +323,18 @@ export const EnvelopeEditorRecipientForm = () => {

      form.setFocus(`signers.${emptySignerIndex}.email`);
    } else {
-      appendNormalizedSigner(
+      appendSigner(
        {
          formId: nanoid(12),
          name: currentEditorName ?? '',
          email: currentEditorEmail ?? '',
          role: RecipientRole.SIGNER,
          actionAuth: [],
-          signingOrder: activeRecipientCount + 1,
+          signingOrder: signers.length > 0 ? (signers[signers.length - 1]?.signingOrder ?? 0) + 1 : 1,
+        },
+        {
+          shouldFocus: true,
        },
-        true,
      );

      void form.trigger('signers');
@@ -385,14 +369,18 @@ export const EnvelopeEditorRecipientForm = () => {

      items.splice(insertIndex, 0, reorderedSigner);

-      const updatedSigners = normalizeSigningOrders(items);
+      const updatedSigners = items.map((signer, index) => ({
+        ...signer,
+        signingOrder: !canRecipientBeModified(signer.id) ? signer.signingOrder : index + 1,
+      }));

      form.setValue('signers', updatedSigners, {
        shouldValidate: true,
        shouldDirty: true,
      });

-      if (isAssistantLastSigner(updatedSigners)) {
+      const lastSigner = updatedSigners[updatedSigners.length - 1];
+      if (lastSigner.role === RecipientRole.ASSISTANT) {
        toast({
          title: t`Warning: Assistant as last signer`,
          description: t`Having an assistant as the last signer means they will be unable to take any action as there are no subsequent signers to assist.`,
@@ -423,19 +411,18 @@ export const EnvelopeEditorRecipientForm = () => {
        return;
      }

-      const updatedSigners = normalizeSigningOrders(
-        currentSigners.map((signer, idx) => ({
-          ...signer,
-          role: idx === index ? role : signer.role,
-        })),
-      );
+      const updatedSigners = currentSigners.map((signer, idx) => ({
+        ...signer,
+        role: idx === index ? role : signer.role,
+        signingOrder: !canRecipientBeModified(signer.id) ? signer.signingOrder : idx + 1,
+      }));

      form.setValue('signers', updatedSigners, {
        shouldValidate: true,
        shouldDirty: true,
      });

-      if (role === RecipientRole.ASSISTANT && isAssistantLastSigner(updatedSigners)) {
+      if (role === RecipientRole.ASSISTANT && index === updatedSigners.length - 1) {
        toast({
          title: t`Warning: Assistant as last signer`,
          description: t`Having an assistant as the last signer means they will be unable to take any action as there are no subsequent signers to assist.`,
@@ -460,30 +447,22 @@ export const EnvelopeEditorRecipientForm = () => {
      const currentSigners = form.getValues('signers');
      const signer = currentSigners[index];

-      if (isCcRecipient(signer)) {
-        return;
-      }
+      // Remove signer from current position and insert at new position
+      const remainingSigners = currentSigners.filter((_, idx) => idx !== index);
+      const newPosition = Math.min(Math.max(0, newOrder - 1), currentSigners.length - 1);
+      remainingSigners.splice(newPosition, 0, signer);

-      const nonCcSigners = currentSigners.filter((s) => !isCcRecipient(s));
-      const ccSigners = currentSigners.filter((s) => isCcRecipient(s));
-      const currentSigningOrderIndex = nonCcSigners.findIndex((s) => s.formId === signer.formId);
-
-      if (currentSigningOrderIndex === -1) {
-        return;
-      }
-
-      const [reorderedSigner] = nonCcSigners.splice(currentSigningOrderIndex, 1);
-      const newPosition = Math.min(Math.max(0, newOrder - 1), nonCcSigners.length);
-      nonCcSigners.splice(newPosition, 0, reorderedSigner);
-
-      const updatedSigners = normalizeSigningOrders([...nonCcSigners, ...ccSigners]);
+      const updatedSigners = remainingSigners.map((s, idx) => ({
+        ...s,
+        signingOrder: !canRecipientBeModified(s.id) ? s.signingOrder : idx + 1,
+      }));

      form.setValue('signers', updatedSigners, {
        shouldValidate: true,
        shouldDirty: true,
      });

-      if (signer.role === RecipientRole.ASSISTANT && isAssistantLastSigner(updatedSigners)) {
+      if (signer.role === RecipientRole.ASSISTANT && newPosition === remainingSigners.length - 1) {
        toast({
          title: t`Warning: Assistant as last signer`,
          description: t`Having an assistant as the last signer means they will be unable to take any action as there are no subsequent signers to assist.`,
@@ -497,12 +476,10 @@ export const EnvelopeEditorRecipientForm = () => {
    setShowSigningOrderConfirmation(false);

    const currentSigners = form.getValues('signers');
-    const updatedSigners = normalizeSigningOrders(
-      currentSigners.map((signer) => ({
-        ...signer,
-        role: signer.role === RecipientRole.ASSISTANT ? RecipientRole.SIGNER : signer.role,
-      })),
-    );
+    const updatedSigners = currentSigners.map((signer) => ({
+      ...signer,
+      role: signer.role === RecipientRole.ASSISTANT ? RecipientRole.SIGNER : signer.role,
+    }));

    form.setValue('signers', updatedSigners, {
      shouldValidate: true,
@@ -819,7 +796,6 @@ export const EnvelopeEditorRecipientForm = () => {
                        isDragDisabled={
                          !isSigningOrderSequential ||
                          isSubmitting ||
-                          isCcRecipient(signer) ||
                          !canRecipientBeModified(signer.id) ||
                          !signer.signingOrder
                        }
@@ -843,11 +819,7 @@ export const EnvelopeEditorRecipientForm = () => {
                              })}
                            >
                              <div className="flex flex-row items-center gap-x-2">
-                                {isSigningOrderSequential && isCcRecipient(signer) && (
-                                  <div className="mt-auto h-10 w-[4.25rem] flex-shrink-0" />
-                                )}
-
-                                {isSigningOrderSequential && !isCcRecipient(signer) && (
+                                {isSigningOrderSequential && (
                                  <FormField
                                    control={form.control}
                                    name={`signers.${index}.signingOrder`}
@@ -863,7 +835,7 @@ export const EnvelopeEditorRecipientForm = () => {
                                        <FormControl>
                                          <Input
                                            type="number"
-                                            max={activeRecipientCount}
+                                            max={signers.length}
                                            data-testid="signing-order-input"
                                            className={cn(
                                              'w-10 text-center',
@@ -1004,6 +976,7 @@ export const EnvelopeEditorRecipientForm = () => {
                                          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)
@@ -9,9 +9,10 @@ import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
-import { motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import {
  ArrowLeftIcon,
+  CheckIcon,
  CopyPlusIcon,
  DownloadCloudIcon,
  EyeIcon,
@@ -229,101 +230,125 @@ export const EnvelopeEditor = () => {
            </div>
          ) : (
            <div className="px-4">
-              <h3 className="flex items-end justify-between font-semibold text-foreground text-sm">
+              <h3 className="flex items-baseline justify-between font-semibold text-foreground text-sm tracking-tight">
                {isDocument ? <Trans>Document Editor</Trans> : <Trans>Template Editor</Trans>}

-                <span className="ml-2 rounded border bg-muted/50 px-2 py-0.5 text-muted-foreground text-xs">
+                <span className="text-muted-foreground text-xs tabular-nums">
                  <Trans context="The step counter">
                    Step {currentStepData.order}/{envelopeEditorSteps.length}
                  </Trans>
                </span>
              </h3>
-
-              <div className="relative my-4 h-[4px] rounded-md bg-muted">
-                <motion.div
-                  layout="size"
-                  layoutId="document-flow-container-step"
-                  className="absolute inset-y-0 left-0 bg-primary"
-                  style={{
-                    width: `${(100 / envelopeEditorSteps.length) * (currentStepData.order ?? 0)}%`,
-                  }}
-                />
-              </div>
            </div>
          )}

-          <div
-            className={cn('space-y-3', {
-              'px-4': !minimizeLeftSidebar,
-              'mt-4 flex flex-col items-center': minimizeLeftSidebar,
+          <nav
+            className={cn('flex flex-col', {
+              'mt-5 px-4': !minimizeLeftSidebar,
+              'mt-4 items-center': minimizeLeftSidebar,
            })}
          >
-            {envelopeEditorSteps.map((step) => {
+            {envelopeEditorSteps.map((step, index) => {
              const Icon = step.icon;
              const isActive = searchParamsStep === step.id;
+              const isCompleted = (currentStepData.order ?? 0) > step.order;
+              const isLast = index === envelopeEditorSteps.length - 1;

              return (
                <button
                  key={step.id}
                  data-testid={`envelope-editor-step-${step.id}`}
                  type="button"
-                  className={cn(
-                    `cursor-pointer rounded-lg text-left transition-colors ${
-                      isActive
-                        ? 'border border-green-200 bg-green-50 dark:border-green-500/20 dark:bg-green-500/10'
-                        : 'border border-gray-200 hover:bg-gray-50 dark:border-gray-400/20 dark:hover:bg-gray-400/10'
-                    }`,
-                    {
-                      'p-3': !minimizeLeftSidebar,
-                    },
-                  )}
+                  title={minimizeLeftSidebar ? t(step.title) : undefined}
+                  aria-current={isActive ? 'step' : undefined}
+                  className="group flex cursor-pointer rounded-lg text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
                  onClick={() => void navigateToStep(step.id as EnvelopeEditorStep)}
                >
-                  <div className="flex items-center space-x-3">
+                  <div className="flex flex-col items-center">
                    <div
-                      className={`rounded border p-2 ${
-                        isActive
-                          ? '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'
-                      }`}
+                      className={cn(
+                        'flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full border transition-[color,border-color,background-color,box-shadow] duration-150',
+                        {
+                          'border-primary bg-primary text-primary-foreground': isCompleted,
+                          'border-primary bg-primary/10 text-documenso-700 ring-4 ring-primary/10 dark:text-primary':
+                            isActive,
+                          'border-border bg-background text-muted-foreground group-hover:border-muted-foreground/40 group-hover:text-foreground':
+                            !isActive && !isCompleted,
+                        },
+                      )}
                    >
-                      <Icon className={`h-4 w-4 ${isActive ? 'text-green-600' : 'text-gray-600'}`} />
+                      {isCompleted ? (
+                        <motion.span
+                          className="flex"
+                          initial={{ scale: 0.5, opacity: 0 }}
+                          animate={{ scale: 1, opacity: 1 }}
+                          transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+                        >
+                          <CheckIcon className="h-3.5 w-3.5" />
+                        </motion.span>
+                      ) : (
+                        <Icon className="h-3.5 w-3.5" />
+                      )}
                    </div>

-                    {!minimizeLeftSidebar && (
-                      <div>
-                        <div
-                          className={`font-medium text-sm ${
-                            isActive
-                              ? '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>
+                    {!isLast && (
+                      <div className="relative my-1 min-h-4 w-px flex-1 overflow-hidden bg-border">
+                        <motion.div
+                          className="absolute inset-x-0 top-0 bg-primary"
+                          initial={false}
+                          animate={{ height: isCompleted ? '100%' : '0%' }}
+                          transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+                        />
                      </div>
                    )}
                  </div>
+
+                  {!minimizeLeftSidebar && (
+                    <div className={cn('ml-3 min-w-0 pt-1', !isLast && 'pb-5')}>
+                      <div
+                        className={cn('font-medium text-sm transition-colors duration-150', {
+                          'text-documenso-800 dark:text-primary': isActive,
+                          'text-foreground': isCompleted,
+                          'text-muted-foreground group-hover:text-foreground': !isActive && !isCompleted,
+                        })}
+                      >
+                        {t(step.title)}
+                      </div>
+
+                      <AnimatePresence initial={false}>
+                        {isActive && (
+                          <motion.div
+                            className="overflow-hidden"
+                            initial={{ height: 0, opacity: 0 }}
+                            animate={{ height: 'auto', opacity: 1 }}
+                            exit={{ height: 0, opacity: 0 }}
+                            transition={{ duration: 0.15, ease: 'easeOut' }}
+                          >
+                            <div className="mt-0.5 text-muted-foreground text-xs">{t(step.description)}</div>
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+                    </div>
+                  )}
                </button>
              );
            })}
-          </div>
+          </nav>

          <Separator
-            className={cn('my-6', {
+            className={cn('my-5', {
              'mx-auto mb-4 w-4/5': minimizeLeftSidebar,
            })}
          />

          {/* Quick Actions. */}
          <div
-            className={cn('space-y-3 px-4 [&_.lucide]:text-muted-foreground', {
+            className={cn('space-y-1 px-4 [&_.lucide]:text-muted-foreground', {
              'px-2': minimizeLeftSidebar,
            })}
          >
            {!minimizeLeftSidebar && (
-              <h4 className="font-semibold text-foreground text-sm">
+              <h4 className="mb-2 px-3 font-medium text-muted-foreground text-xs uppercase tracking-wider">
                <Trans>Quick Actions</Trans>
              </h4>
            )}
@@ -467,7 +492,7 @@ export const EnvelopeEditor = () => {
                    type="button"
                    variant="ghost"
                    size="sm"
-                    className="w-full justify-start"
+                    className="w-full justify-start hover:bg-destructive/10 hover:text-destructive hover:[&_.lucide]:text-destructive"
                    title={t(msg`Delete Envelope`)}
                  >
                    <Trash2Icon className="h-4 w-4" />
@@ -493,13 +518,14 @@ export const EnvelopeEditor = () => {
          {/* Footer of left sidebar. */}
          {!editorConfig.embedded && (
            <div
-              className={cn('mt-auto px-4', {
+              className={cn('mt-auto border-border border-t px-4 pt-3', {
                'px-2': minimizeLeftSidebar,
              })}
            >
              <Button
                variant="ghost"
-                className={cn('w-full justify-start', {
+                size="sm"
+                className={cn('w-full justify-start text-muted-foreground hover:text-foreground', {
                  'flex items-center justify-center': minimizeLeftSidebar,
                })}
                asChild
@@ -24,26 +24,26 @@ export const EnvelopeItemSelector = ({
      title={typeof primaryText === 'string' ? primaryText : undefined}
      className={`group 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-primary/40 bg-primary/10 text-documenso-800 dark:text-primary'
          : 'border-border bg-muted/50 hover:bg-muted/70'
      }`}
      {...buttonProps}
    >
      <div
        className={`flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full font-medium text-xs ${
-          isSelected ? 'bg-green-100 text-green-600' : 'bg-gray-200 text-gray-600'
+          isSelected ? 'bg-primary/20 text-documenso-700 dark:text-primary' : 'bg-muted text-muted-foreground'
        }`}
      >
        {number}
      </div>
      <div className="min-w-0 text-left">
        <div className="truncate font-medium text-sm">{primaryText}</div>
-        <div className="text-gray-500 text-xs">{secondaryText}</div>
+        <div className="text-muted-foreground text-xs">{secondaryText}</div>
      </div>
      {actionSlot ?? (
        <div
          className={cn('h-2 w-2 flex-shrink-0 rounded-full', {
-            'bg-green-500': isSelected,
+            'bg-primary': isSelected,
          })}
        />
      )}
@@ -36,8 +36,8 @@
    "@lingui/react": "^5.6.0",
    "@oslojs/crypto": "^1.0.1",
    "@oslojs/encoding": "^1.1.0",
-    "@react-router/node": "^7.18.1",
-    "@react-router/serve": "^7.18.1",
+    "@react-router/node": "^7.12.0",
+    "@react-router/serve": "^7.12.0",
    "@simplewebauthn/browser": "^13.2.2",
    "@simplewebauthn/server": "^13.2.2",
    "@tanstack/react-query": "5.90.10",
@@ -81,8 +81,8 @@
    "@babel/preset-typescript": "^7.28.5",
    "@lingui/babel-plugin-lingui-macro": "^5.6.0",
    "@lingui/vite-plugin": "^5.6.0",
-    "@react-router/dev": "^7.18.1",
-    "@react-router/remix-routes-option-adapter": "^7.18.1",
+    "@react-router/dev": "^7.12.0",
+    "@react-router/remix-routes-option-adapter": "^7.12.0",
    "@rollup/plugin-babel": "^6.1.0",
    "@rollup/plugin-commonjs": "^28.0.9",
    "@rollup/plugin-json": "^6.1.0",
@@ -225,20 +225,15 @@ test('[DOCUMENT_FLOW]: should be able to create a document with multiple recipie
  await page.getByLabel('Receives copy').click();
  await page.getByRole('button', { name: 'Add Signer' }).click();

-  // CC recipients are kept last, so new rows are inserted above the CC row.
-  await expect(page.getByLabel('Email')).toHaveCount(3);
-
-  await page.getByLabel('Email').nth(1).fill('user3@example.com');
-  await page.getByLabel('Name').nth(1).fill('User 3');
-  await page.getByRole('combobox').nth(1).click();
+  await page.getByLabel('Email').nth(2).fill('user3@example.com');
+  await page.getByLabel('Name').nth(2).fill('User 3');
+  await page.getByRole('combobox').nth(2).click();
  await page.getByLabel('Needs to approve').click();
  await page.getByRole('button', { name: 'Add Signer' }).click();

-  await expect(page.getByLabel('Email')).toHaveCount(4);
-
-  await page.getByLabel('Email').nth(2).fill('user4@example.com');
-  await page.getByLabel('Name').nth(2).fill('User 4');
-  await page.getByRole('combobox').nth(2).click();
+  await page.getByLabel('Email').nth(3).fill('user4@example.com');
+  await page.getByLabel('Name').nth(3).fill('User 4');
+  await page.getByRole('combobox').nth(3).click();
  await page.getByLabel('Needs to view').click();

  await page.getByRole('button', { name: 'Continue' }).click();
@@ -110,7 +110,7 @@ test.describe('Default Recipients', () => {
    await page.getByRole('button', { name: 'Add Signer' }).click();

    // Add a regular signer using the v2 editor
-    await page.getByTestId('signer-email-input').first().fill('regular-signer@documenso.com');
+    await page.getByTestId('signer-email-input').last().fill('regular-signer@documenso.com');
    await page
      .getByPlaceholder(/Recipient/)
      .first()
@@ -7,10 +7,9 @@ import { DocumentSigningOrder, RecipientRole } from '@prisma/client';
 import { useId } from 'react';
 import type { UseFormReturn } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
+import { prop, sortBy } from 'remeda';
 import { z } from 'zod';

-import { isCcRecipient, normalizeRecipientSigningOrders, sortRecipientsForSigningOrder } from '../../utils/recipients';
-
 const LocalRecipientSchema = z.object({
  formId: z.string().min(1),
  id: z.number().optional(),
@@ -95,13 +94,13 @@ export const useEditorRecipients = ({ envelope }: EditorRecipientsProps): UseEdi
      name: recipient.name,
      email: recipient.email,
      role: recipient.role,
-      signingOrder: isCcRecipient(recipient) ? undefined : (recipient.signingOrder ?? index + 1),
+      signingOrder: recipient.signingOrder ?? index + 1,
      actionAuth: ZRecipientAuthOptionsSchema.parse(recipient.authOptions)?.actionAuth ?? undefined,
    }));

    const signers: TLocalRecipient[] =
      formRecipients.length > 0
-        ? normalizeRecipientSigningOrders(sortRecipientsForSigningOrder(formRecipients))
+        ? sortBy(formRecipients, [prop('signingOrder'), 'asc'], [prop('id'), 'asc'])
        : [
            {
              formId: initialId,
@@ -35,7 +35,6 @@ import { getFileServerSide } from '../../universal/upload/get-file.server';
 import { putPdfFileServerSide } from '../../universal/upload/put-file.server';
 import { extractDerivedDocumentMeta } from '../../utils/document';
 import { createDocumentAuthOptions, createRecipientAuthOptions } from '../../utils/document-auth';
-import { getRecipientSigningOrder } from '../../utils/recipients';
 import { buildTeamWhereQuery } from '../../utils/teams';
 import { incrementDocumentId, incrementTemplateId } from '../envelope/increment-id';
 import { assertOrganisationRatesAndLimits } from '../rate-limit/assert-organisation-rates-and-limits';
@@ -462,7 +461,7 @@ export const createEnvelope = async ({
            name: recipient.name,
            email: recipient.email,
            role: recipient.role,
-            signingOrder: getRecipientSigningOrder(recipient),
+            signingOrder: recipient.signingOrder,
            token: nanoid(),
            sendStatus: recipient.role === RecipientRole.CC ? SendStatus.SENT : SendStatus.NOT_SENT,
            signingStatus: recipient.role === RecipientRole.CC ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
@@ -8,7 +8,6 @@ import { ZSignatureLevelSchema } from '../../types/signature-level';
 import { mapEnvelopeToWebhookDocumentPayload, ZWebhookDocumentSchema } from '../../types/webhook-payload';
 import { nanoid, prefixedId } from '../../universal/id';
 import type { EnvelopeIdOptions } from '../../utils/envelope';
-import { getRecipientSigningOrder } from '../../utils/recipients';
 import { getEnvelopeWhereInput } from '../envelope/get-envelope-by-id';
 import { incrementDocumentId, incrementTemplateId } from '../envelope/increment-id';
 import { assertOrganisationRatesAndLimits } from '../rate-limit/assert-organisation-rates-and-limits';
@@ -191,7 +190,7 @@ export const duplicateEnvelope = async ({ id, userId, teamId, overrides }: Dupli
            email: recipient.email,
            name: recipient.name,
            role: recipient.role,
-            signingOrder: getRecipientSigningOrder(recipient),
+            signingOrder: recipient.signingOrder,
            token: nanoid(),
            fields: includeFields
              ? {
@@ -9,7 +9,7 @@ import { EnvelopeType, RecipientRole, SendStatus, SigningStatus } from '@prisma/

 import { AppError, AppErrorCode } from '../../errors/app-error';
 import type { EnvelopeIdOptions } from '../../utils/envelope';
-import { getRecipientSigningOrder, mapRecipientToLegacyRecipient } from '../../utils/recipients';
+import { mapRecipientToLegacyRecipient } from '../../utils/recipients';
 import { assertEnvelopeMutable } from '../envelope/assert-envelope-mutable';
 import { getEnvelopeWhereInput } from '../envelope/get-envelope-by-id';
 import { assertCompatibleRecipientRole } from '../signature-level/assert-compatible-recipient-role';
@@ -112,7 +112,7 @@ export const createEnvelopeRecipients = async ({
            name: recipient.name,
            email: recipient.email,
            role: recipient.role,
-            signingOrder: getRecipientSigningOrder(recipient),
+            signingOrder: recipient.signingOrder,
            token: nanoid(),
            sendStatus: recipient.role === RecipientRole.CC ? SendStatus.SENT : SendStatus.NOT_SENT,
            signingStatus: recipient.role === RecipientRole.CC ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
@@ -14,11 +14,7 @@ import { AppError, AppErrorCode } from '../../errors/app-error';
 import { jobs } from '../../jobs/client';
 import { extractDerivedDocumentEmailSettings } from '../../types/document-email';
 import { type EnvelopeIdOptions, mapSecondaryIdToDocumentId } from '../../utils/envelope';
-import {
-  canRecipientBeModified,
-  getRecipientSigningOrder,
-  isRecipientEmailValidForSending,
-} from '../../utils/recipients';
+import { canRecipientBeModified, isRecipientEmailValidForSending } from '../../utils/recipients';
 import { assertEnvelopeMutable } from '../envelope/assert-envelope-mutable';
 import { getEnvelopeWhereInput } from '../envelope/get-envelope-by-id';
 import { assertCompatibleRecipientRole } from '../signature-level/assert-compatible-recipient-role';
@@ -165,7 +161,7 @@ export const setDocumentRecipients = async ({
            name: recipient.name,
            email: recipient.email,
            role: recipient.role,
-            signingOrder: getRecipientSigningOrder(recipient),
+            signingOrder: recipient.signingOrder,
            envelopeId: envelope.id,
            sendStatus: recipient.role === RecipientRole.CC ? SendStatus.SENT : SendStatus.NOT_SENT,
            signingStatus: recipient.role === RecipientRole.CC ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
@@ -175,7 +171,7 @@ export const setDocumentRecipients = async ({
            name: recipient.name,
            email: recipient.email,
            role: recipient.role,
-            signingOrder: getRecipientSigningOrder(recipient),
+            signingOrder: recipient.signingOrder,
            token: nanoid(),
            envelopeId: envelope.id,
            sendStatus: recipient.role === RecipientRole.CC ? SendStatus.SENT : SendStatus.NOT_SENT,
@@ -11,7 +11,6 @@ import { type TRecipientActionAuthTypes, ZRecipientAuthOptionsSchema } from '../
 import { nanoid } from '../../universal/id';
 import { createRecipientAuthOptions } from '../../utils/document-auth';
 import { type EnvelopeIdOptions, mapSecondaryIdToTemplateId } from '../../utils/envelope';
-import { getRecipientSigningOrder } from '../../utils/recipients';
 import { getEnvelopeWhereInput } from '../envelope/get-envelope-by-id';
 import { assertCompatibleRecipientRole } from '../signature-level/assert-compatible-recipient-role';

@@ -143,7 +142,7 @@ export const setTemplateRecipients = async ({ userId, teamId, id, recipients }:
            name: recipient.name,
            email: recipient.email,
            role: recipient.role,
-            signingOrder: getRecipientSigningOrder(recipient),
+            signingOrder: recipient.signingOrder,
            envelopeId: envelope.id,
            authOptions,
          },
@@ -151,7 +150,7 @@ export const setTemplateRecipients = async ({ userId, teamId, id, recipients }:
            name: recipient.name,
            email: recipient.email,
            role: recipient.role,
-            signingOrder: getRecipientSigningOrder(recipient),
+            signingOrder: recipient.signingOrder,
            token: nanoid(),
            envelopeId: envelope.id,
            authOptions,
@@ -11,7 +11,7 @@ import { AppError, AppErrorCode } from '../../errors/app-error';
 import { extractLegacyIds } from '../../universal/id';
 import type { EnvelopeIdOptions } from '../../utils/envelope';
 import { mapFieldToLegacyField } from '../../utils/fields';
-import { canRecipientBeModified, getRecipientSigningOrder } from '../../utils/recipients';
+import { canRecipientBeModified } from '../../utils/recipients';
 import { assertEnvelopeMutable } from '../envelope/assert-envelope-mutable';
 import { getEnvelopeWhereInput } from '../envelope/get-envelope-by-id';
 import { assertCompatibleRecipientRole } from '../signature-level/assert-compatible-recipient-role';
@@ -148,7 +148,7 @@ export const updateEnvelopeRecipients = async ({
            name: mergedRecipient.name,
            email: mergedRecipient.email,
            role: mergedRecipient.role,
-            signingOrder: getRecipientSigningOrder(mergedRecipient),
+            signingOrder: mergedRecipient.signingOrder,
            envelopeId: envelope.id,
            sendStatus: mergedRecipient.role === RecipientRole.CC ? SendStatus.SENT : SendStatus.NOT_SENT,
            signingStatus: mergedRecipient.role === RecipientRole.CC ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
@@ -40,7 +40,6 @@ import {
  extractDocumentAuthMethods,
 } from '../../utils/document-auth';
 import { mapSecondaryIdToTemplateId } from '../../utils/envelope';
-import { getRecipientSigningOrder } from '../../utils/recipients';
 import { sendDocument } from '../document/send-document';
 import { validateFieldAuth } from '../document/validate-field-auth';
 import { incrementDocumentId } from '../envelope/increment-id';
@@ -399,7 +398,7 @@ export const createDocumentFromDirectTemplate = async ({
                }),
                sendStatus: recipient.role === RecipientRole.CC ? SendStatus.SENT : SendStatus.NOT_SENT,
                signingStatus: recipient.role === RecipientRole.CC ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
-                signingOrder: getRecipientSigningOrder(recipient),
+                signingOrder: recipient.signingOrder,
                token: nanoid(),
              };
            }),
@@ -47,7 +47,6 @@ import {
 } from '../../utils/document-auth';
 import type { EnvelopeIdOptions } from '../../utils/envelope';
 import { mapSecondaryIdToTemplateId } from '../../utils/envelope';
-import { getRecipientSigningOrder } from '../../utils/recipients';
 import { buildTeamWhereQuery } from '../../utils/teams';
 import { getEnvelopeWhereInput } from '../envelope/get-envelope-by-id';
 import { incrementDocumentId } from '../envelope/increment-id';
@@ -592,7 +591,7 @@ export const createDocumentFromTemplate = async ({
                }),
                sendStatus: recipient.role === RecipientRole.CC ? SendStatus.SENT : SendStatus.NOT_SENT,
                signingStatus: recipient.role === RecipientRole.CC ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
-                signingOrder: getRecipientSigningOrder(recipient),
+                signingOrder: recipient.signingOrder,
                token: recipient.token,
              };
            }),
@@ -1,81 +0,0 @@
-import { RecipientRole } from '@prisma/client';
-import { describe, expect, it } from 'vitest';
-
-import {
-  getRecipientSigningOrder,
-  isAssistantLastSigner,
-  normalizeRecipientSigningOrders,
-  sortRecipientsForSigningOrder,
-} from './recipients';
-
-describe('recipient signing order helpers', () => {
-  it('sorts CC recipients after ordered active recipients', () => {
-    const recipients = [
-      { id: 1, role: RecipientRole.CC, signingOrder: 1 },
-      { id: 2, role: RecipientRole.SIGNER, signingOrder: 2 },
-      { id: 3, role: RecipientRole.APPROVER, signingOrder: 1 },
-    ];
-
-    expect(sortRecipientsForSigningOrder(recipients).map((recipient) => recipient.id)).toEqual([3, 2, 1]);
-  });
-
-  it('keeps original order when recipients have the same signing order', () => {
-    const recipients = [
-      { id: 2, role: RecipientRole.SIGNER, signingOrder: 1 },
-      { id: 1, role: RecipientRole.APPROVER, signingOrder: 1 },
-    ];
-
-    expect(sortRecipientsForSigningOrder(recipients).map((recipient) => recipient.id)).toEqual([2, 1]);
-  });
-
-  it('sorts and normalizes active recipient signing order and removes it from CC recipients', () => {
-    const recipients = [
-      { id: 1, role: RecipientRole.CC, signingOrder: 1 },
-      { id: 2, role: RecipientRole.SIGNER, signingOrder: 4 },
-      { id: 3, role: RecipientRole.APPROVER, signingOrder: 2 },
-    ];
-
-    expect(normalizeRecipientSigningOrders(sortRecipientsForSigningOrder(recipients))).toEqual([
-      { id: 3, role: RecipientRole.APPROVER, signingOrder: 1 },
-      { id: 2, role: RecipientRole.SIGNER, signingOrder: 2 },
-      { id: 1, role: RecipientRole.CC, signingOrder: undefined },
-    ]);
-  });
-
-  it('preserves caller order while normalizing signing order', () => {
-    const recipients = [
-      { id: 2, role: RecipientRole.ASSISTANT, signingOrder: 2 },
-      { id: 1, role: RecipientRole.SIGNER, signingOrder: 1 },
-      { id: 3, role: RecipientRole.CC, signingOrder: 1 },
-    ];
-
-    expect(normalizeRecipientSigningOrders(recipients)).toEqual([
-      { id: 2, role: RecipientRole.ASSISTANT, signingOrder: 1 },
-      { id: 1, role: RecipientRole.SIGNER, signingOrder: 2 },
-      { id: 3, role: RecipientRole.CC, signingOrder: undefined },
-    ]);
-  });
-
-  it('coerces CC signing order to null for persistence', () => {
-    expect(getRecipientSigningOrder({ role: RecipientRole.CC, signingOrder: 1 })).toBeNull();
-    expect(getRecipientSigningOrder({ role: RecipientRole.SIGNER, signingOrder: 1 })).toBe(1);
-  });
-
-  it('checks whether the last non-CC recipient is an assistant', () => {
-    expect(
-      isAssistantLastSigner([
-        { role: RecipientRole.SIGNER },
-        { role: RecipientRole.ASSISTANT },
-        { role: RecipientRole.CC },
-      ]),
-    ).toBe(true);
-
-    expect(
-      isAssistantLastSigner([
-        { role: RecipientRole.ASSISTANT },
-        { role: RecipientRole.SIGNER },
-        { role: RecipientRole.CC },
-      ]),
-    ).toBe(false);
-  });
-});
@@ -1,6 +1,6 @@
 import { isSignatureFieldType } from '@documenso/prisma/guards/is-signature-field';
-import type { Envelope, Field, Recipient } from '@prisma/client';
-import { RecipientRole, SigningStatus } from '@prisma/client';
+import type { Envelope } from '@prisma/client';
+import { type Field, RecipientRole, SigningStatus } from '@prisma/client';

 import { NEXT_PUBLIC_WEBAPP_URL } from '../constants/app';
 import { AppError, AppErrorCode } from '../errors/app-error';
@@ -15,66 +15,6 @@ import { zEmail } from './zod';
 */
 export const RECIPIENT_ROLES_THAT_REQUIRE_FIELDS = [RecipientRole.SIGNER] as const;

-// signingOrder isn't required when submitting the recipient form (Zod: z.number().optional())
-type RecipientWithSigningOrder = Pick<Recipient, 'role'> & Partial<Pick<Recipient, 'signingOrder'>>;
-
-export const isCcRecipient = (recipient: Pick<Recipient, 'role'>) => {
-  return recipient.role === RecipientRole.CC;
-};
-
-export const getRecipientSigningOrder = (recipient: RecipientWithSigningOrder) => {
-  if (isCcRecipient(recipient)) {
-    return null;
-  }
-
-  return recipient.signingOrder ?? null;
-};
-
-export const isAssistantLastSigner = (recipients: Pick<Recipient, 'role'>[]) => {
-  const nonCcRecipients = recipients.filter((recipient) => !isCcRecipient(recipient));
-  const lastNonCcRecipient = nonCcRecipients[nonCcRecipients.length - 1];
-
-  return lastNonCcRecipient?.role === RecipientRole.ASSISTANT;
-};
-
-export const sortRecipientsForSigningOrder = <T extends RecipientWithSigningOrder>(recipients: T[]): T[] => {
-  return [...recipients].sort((r1, r2) => {
-    const r1IsCcRecipient = isCcRecipient(r1);
-    const r2IsCcRecipient = isCcRecipient(r2);
-
-    // CC recipients always sort after non-CC recipients.
-    if (r1IsCcRecipient !== r2IsCcRecipient) {
-      return r1IsCcRecipient ? 1 : -1;
-    }
-
-    // Order by signing order; missing orders sort last.
-    const r1SigningOrder = r1.signingOrder ?? Number.MAX_SAFE_INTEGER;
-    const r2SigningOrder = r2.signingOrder ?? Number.MAX_SAFE_INTEGER;
-
-    return r1SigningOrder - r2SigningOrder;
-  });
-};
-
-export const normalizeRecipientSigningOrders = <T extends RecipientWithSigningOrder>(
-  recipients: T[],
-  canUpdateRecipient: (recipient: T) => boolean = () => true,
-): Array<T & { signingOrder?: number }> => {
-  const nonCcRecipients = recipients.filter((recipient) => !isCcRecipient(recipient));
-  const ccRecipients = recipients.filter((recipient) => isCcRecipient(recipient));
-
-  const normalizedNonCcRecipients = nonCcRecipients.map((recipient, index) => ({
-    ...recipient,
-    signingOrder: canUpdateRecipient(recipient) ? index + 1 : (recipient.signingOrder ?? index + 1),
-  }));
-
-  const normalizedCcRecipients = ccRecipients.map((recipient) => ({
-    ...recipient,
-    signingOrder: undefined,
-  }));
-
-  return [...normalizedNonCcRecipients, ...normalizedCcRecipients];
-};
-
 /**
 * Returns recipients who are missing required fields for their role.
 *
@@ -6,13 +6,7 @@ import { useSession } from '@documenso/lib/client-only/providers/session';
 import { ZRecipientAuthOptionsSchema } from '@documenso/lib/types/document-auth';
 import type { TRecipientLite } from '@documenso/lib/types/recipient';
 import { nanoid } from '@documenso/lib/universal/id';
-import {
-  isAssistantLastSigner,
-  isCcRecipient,
-  normalizeRecipientSigningOrders,
-  sortRecipientsForSigningOrder,
-  canRecipientBeModified as utilCanRecipientBeModified,
-} from '@documenso/lib/utils/recipients';
+import { canRecipientBeModified as utilCanRecipientBeModified } from '@documenso/lib/utils/recipients';
 import { trpc } from '@documenso/trpc/react';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import { RecipientActionAuthSelect } from '@documenso/ui/components/recipient/recipient-action-auth-select';
@@ -30,6 +24,7 @@ import { motion } from 'framer-motion';
 import { GripVerticalIcon, HelpCircle, Plus, Trash } from 'lucide-react';
 import { useCallback, useId, useMemo, useRef, useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
+import { prop, sortBy } from 'remeda';

 import { DocumentReadOnlyFields, mapFieldsWithRecipients } from '../../components/document/document-read-only-fields';
 import type { RecipientAutoCompleteOption } from '../../components/recipient/recipient-autocomplete-input';
@@ -123,18 +118,18 @@ export const AddSignersFormPartial = ({
    defaultValues: {
      signers:
        recipients.length > 0
-          ? normalizeRecipientSigningOrders(
-              sortRecipientsForSigningOrder(
-                recipients.map((recipient, index) => ({
-                  nativeId: recipient.id,
-                  formId: String(recipient.id),
-                  name: recipient.name,
-                  email: recipient.email,
-                  role: recipient.role,
-                  signingOrder: isCcRecipient(recipient) ? undefined : (recipient.signingOrder ?? index + 1),
-                  actionAuth: ZRecipientAuthOptionsSchema.parse(recipient.authOptions)?.actionAuth ?? undefined,
-                })),
-              ),
+          ? sortBy(
+              recipients.map((recipient, index) => ({
+                nativeId: recipient.id,
+                formId: String(recipient.id),
+                name: recipient.name,
+                email: recipient.email,
+                role: recipient.role,
+                signingOrder: recipient.signingOrder ?? index + 1,
+                actionAuth: ZRecipientAuthOptionsSchema.parse(recipient.authOptions)?.actionAuth ?? undefined,
+              })),
+              [prop('signingOrder'), 'asc'],
+              [prop('nativeId'), 'asc'],
            )
          : defaultRecipients,
      signingOrder: signingOrder || DocumentSigningOrder.PARALLEL,
@@ -173,14 +168,18 @@ export const AddSignersFormPartial = ({
  }, [watchedSigners]);

  const normalizeSigningOrders = (signers: typeof watchedSigners) => {
-    return normalizeRecipientSigningOrders(signers, (signer) => canRecipientBeModified(signer.nativeId));
+    return signers
+      .sort((a, b) => (a.signingOrder ?? 0) - (b.signingOrder ?? 0))
+      .map((signer, index) => ({ ...signer, signingOrder: index + 1 }));
  };

-  const activeRecipientCount = watchedSigners.filter((signer) => !isCcRecipient(signer)).length;
-
  const onFormSubmit = form.handleSubmit(onSubmit);

-  const { fields: signers, remove: removeSigner } = useFieldArray({
+  const {
+    append: appendSigner,
+    fields: signers,
+    remove: removeSigner,
+  } = useFieldArray({
    control,
    name: 'signers',
  });
@@ -259,31 +258,14 @@ export const AddSignersFormPartial = ({
    return utilCanRecipientBeModified(recipient, fields);
  };

-  const appendNormalizedSigner = (signer: (typeof watchedSigners)[number], shouldFocus = false) => {
-    const updatedSigners = normalizeSigningOrders([...form.getValues('signers'), signer]);
-
-    form.setValue('signers', updatedSigners, {
-      shouldValidate: true,
-      shouldDirty: true,
-    });
-
-    if (shouldFocus) {
-      const signerIndex = updatedSigners.findIndex((updatedSigner) => updatedSigner.formId === signer.formId);
-
-      if (signerIndex !== -1) {
-        requestAnimationFrame(() => form.setFocus(`signers.${signerIndex}.email`));
-      }
-    }
-  };
-
  const onAddSigner = () => {
-    appendNormalizedSigner({
+    appendSigner({
      formId: nanoid(12),
      name: '',
      email: '',
      role: RecipientRole.SIGNER,
      actionAuth: [],
-      signingOrder: activeRecipientCount + 1,
+      signingOrder: signers.length > 0 ? (signers[signers.length - 1]?.signingOrder ?? 0) + 1 : 1,
    });
  };

@@ -328,16 +310,18 @@ export const AddSignersFormPartial = ({

      form.setFocus(`signers.${emptySignerIndex}.email`);
    } else {
-      appendNormalizedSigner(
+      appendSigner(
        {
          formId: nanoid(12),
          name: user?.name ?? '',
          email: user?.email ?? '',
          role: RecipientRole.SIGNER,
          actionAuth: [],
-          signingOrder: activeRecipientCount + 1,
+          signingOrder: signers.length > 0 ? (signers[signers.length - 1]?.signingOrder ?? 0) + 1 : 1,
+        },
+        {
+          shouldFocus: true,
        },
-        true,
      );

      void form.trigger('signers');
@@ -372,14 +356,18 @@ export const AddSignersFormPartial = ({

      items.splice(insertIndex, 0, reorderedSigner);

-      const updatedSigners = normalizeSigningOrders(items);
+      const updatedSigners = items.map((signer, index) => ({
+        ...signer,
+        signingOrder: !canRecipientBeModified(signer.nativeId) ? signer.signingOrder : index + 1,
+      }));

      form.setValue('signers', updatedSigners, {
        shouldValidate: true,
        shouldDirty: true,
      });

-      if (isAssistantLastSigner(updatedSigners)) {
+      const lastSigner = updatedSigners[updatedSigners.length - 1];
+      if (lastSigner.role === RecipientRole.ASSISTANT) {
        toast({
          title: _(msg`Warning: Assistant as last signer`),
          description: _(
@@ -414,19 +402,18 @@ export const AddSignersFormPartial = ({
        return;
      }

-      const updatedSigners = normalizeSigningOrders(
-        currentSigners.map((signer, idx) => ({
-          ...signer,
-          role: idx === index ? role : signer.role,
-        })),
-      );
+      const updatedSigners = currentSigners.map((signer, idx) => ({
+        ...signer,
+        role: idx === index ? role : signer.role,
+        signingOrder: !canRecipientBeModified(signer.nativeId) ? signer.signingOrder : idx + 1,
+      }));

      form.setValue('signers', updatedSigners, {
        shouldValidate: true,
        shouldDirty: true,
      });

-      if (role === RecipientRole.ASSISTANT && isAssistantLastSigner(updatedSigners)) {
+      if (role === RecipientRole.ASSISTANT && index === updatedSigners.length - 1) {
        toast({
          title: _(msg`Warning: Assistant as last signer`),
          description: _(
@@ -453,30 +440,22 @@ export const AddSignersFormPartial = ({
      const currentSigners = form.getValues('signers');
      const signer = currentSigners[index];

-      if (isCcRecipient(signer)) {
-        return;
-      }
+      // Remove signer from current position and insert at new position
+      const remainingSigners = currentSigners.filter((_, idx) => idx !== index);
+      const newPosition = Math.min(Math.max(0, newOrder - 1), currentSigners.length - 1);
+      remainingSigners.splice(newPosition, 0, signer);

-      const nonCcSigners = currentSigners.filter((s) => !isCcRecipient(s));
-      const ccSigners = currentSigners.filter((s) => isCcRecipient(s));
-      const currentSigningOrderIndex = nonCcSigners.findIndex((s) => s.formId === signer.formId);
-
-      if (currentSigningOrderIndex === -1) {
-        return;
-      }
-
-      const [reorderedSigner] = nonCcSigners.splice(currentSigningOrderIndex, 1);
-      const newPosition = Math.min(Math.max(0, newOrder - 1), nonCcSigners.length);
-      nonCcSigners.splice(newPosition, 0, reorderedSigner);
-
-      const updatedSigners = normalizeSigningOrders([...nonCcSigners, ...ccSigners]);
+      const updatedSigners = remainingSigners.map((s, idx) => ({
+        ...s,
+        signingOrder: !canRecipientBeModified(s.nativeId) ? s.signingOrder : idx + 1,
+      }));

      form.setValue('signers', updatedSigners, {
        shouldValidate: true,
        shouldDirty: true,
      });

-      if (signer.role === RecipientRole.ASSISTANT && isAssistantLastSigner(updatedSigners)) {
+      if (signer.role === RecipientRole.ASSISTANT && newPosition === remainingSigners.length - 1) {
        toast({
          title: _(msg`Warning: Assistant as last signer`),
          description: _(
@@ -492,12 +471,10 @@ export const AddSignersFormPartial = ({
    setShowSigningOrderConfirmation(false);

    const currentSigners = form.getValues('signers');
-    const updatedSigners = normalizeSigningOrders(
-      currentSigners.map((signer) => ({
-        ...signer,
-        role: signer.role === RecipientRole.ASSISTANT ? RecipientRole.SIGNER : signer.role,
-      })),
-    );
+    const updatedSigners = currentSigners.map((signer) => ({
+      ...signer,
+      role: signer.role === RecipientRole.ASSISTANT ? RecipientRole.SIGNER : signer.role,
+    }));

    form.setValue('signers', updatedSigners, {
      shouldValidate: true,
@@ -665,7 +642,6 @@ export const AddSignersFormPartial = ({
                        isDragDisabled={
                          !isSigningOrderSequential ||
                          isSubmitting ||
-                          isCcRecipient(signer) ||
                          !canRecipientBeModified(signer.nativeId) ||
                          !signer.signingOrder
                        }
@@ -687,9 +663,7 @@ export const AddSignersFormPartial = ({
                                'grid-cols-12 pr-3': isSigningOrderSequential,
                              })}
                            >
-                              {isSigningOrderSequential && isCcRecipient(signer) && <div className="col-span-2" />}
-
-                              {isSigningOrderSequential && !isCcRecipient(signer) && (
+                              {isSigningOrderSequential && (
                                <FormField
                                  control={form.control}
                                  name={`signers.${index}.signingOrder`}
@@ -705,7 +679,7 @@ export const AddSignersFormPartial = ({
                                      <FormControl>
                                        <Input
                                          type="number"
-                                          max={activeRecipientCount}
+                                          max={signers.length}
                                          data-testid="signing-order-input"
                                          className={cn(
                                            'w-full text-center',