fix: scale signature images to fill signature fields

The field renderer decreased large signature images to the field size, but it did not
increase small images. Thus a low-resolution image, for example an upload from a different
tool, showed at its native pixel size and was too small. This change removes the cap on the
scale factor in the Konva field renderer and in the v1 and legacy PDF insert paths. The image
scales in the two directions to fill the field, and the aspect ratio stays the same.

.agents/plans/quiet-jade-river-recipient-signing-groups.md

@@ -1,175 +0,0 @@
----
-date: 2026-08-04
-title: Recipient Signing Groups
----
-
-## Summary
-
-Allow recipients to be **grouped into a single signing step** when "Enable signing order" (SEQUENTIAL) is on. Grouped recipients share the same `signingOrder` number and may act **in any order among themselves**; the next step only unlocks once **every** member of the group has completed their required action.
-
-- A **step** = all non-CC recipients sharing one `signingOrder` value.
-- A **group** = a step with 2+ members.
-- Feature surface: **V2 envelope editor only** (`apps/remix/app/components/general/envelope-editor/envelope-editor-recipient-form.tsx`). Backend enforcement is global (any document with duplicate orders behaves correctly, including API-created ones).
-
-No database schema changes: `Recipient.signingOrder` is already a nullable, non-unique `Int` (`packages/prisma/schema.prisma:647`), and all tRPC/REST schemas already accept duplicate values (`z.number().optional()` everywhere). Today duplicates are only destroyed by client-side normalization.
-
-## Amendments (2026-08-04, post-implementation)
-
-- The step badge copy is **"Group N"** (not "Step N").
-- The signing-order number input was **removed entirely** — grouping, joining,
-  extraction and reordering are **drag-and-drop only**. The "type-to-join" and
-  "out-of-bounds number extraction" decisions below are superseded; the
-  `Ungroup` link remains as the non-drag affordance for dissolving a group.
-- Known limitation: gap drop-zones keep a constant hit area (drop-target
-  geometry is captured at drag start, so drag-dependent resizing would
-  desynchronise the visible strip from the actual hit area).
-
-## Product decisions (agreed)
-
-| Topic | Decision |
-| --- | --- |
-| Group representation | Derived from duplicate `signingOrder` values. No new tables/columns. |
-| Whole-group drag | Required. Step cards are draggable as a unit (nested Kanban DnD). |
-| Grouping gestures | Drag a recipient/step onto a card (combine) **or** type an existing step number into the order input (type-to-join, DocuSign style). |
-| Removing one member | Drag the member row out to a gap zone, **or** type an out-of-bounds number (> step count) to become a standalone step at the end. |
-| Ungroup link | Dissolves the whole group into consecutive standalone steps, preserving relative order. |
-| Dictate next signer | Coexists with groups. Dictation UI/rewrite applies **only** when the completing signer is the last unsigned member of their step **and** the next step has exactly one member. Otherwise dictation is silently skipped for that transition. |
-| Assistants | May be grouped. A grouped assistant can only assist recipients in **strictly higher** steps (never group peers). |
-| CSC/TSP (AES/QES) instances | Groups are blocked (editor validation). TSP signing path unchanged. |
-| V1 editors | Unchanged. Editing recipients of a grouped document in a V1 surface flattens groups (accepted limitation). |
-
-## Current-state reference
-
-Key decision points that assume a single "next recipient":
-
-- `packages/lib/server-only/document/send-document.ts:150-157` — SEQUENTIAL initial send notifies `.slice(0, 1)` of pending recipients.
-- `packages/lib/server-only/document/complete-document-with-token.ts:368-459` — after completion, `const [nextRecipient] = pendingRecipients` is activated (sendStatus SENT) and emailed; dictation rewrites that single recipient.
-- `packages/lib/server-only/recipient/get-is-recipient-turn.ts:40-49` — **index-based** loop: everyone earlier in the sorted array must be SIGNED. Two recipients sharing an order would block each other.
-- `packages/lib/server-only/envelope/get-envelope-for-recipient-signing.ts:263-279` — duplicated inline copy of the same index-based loop (feeds V2 signing `isRecipientsTurn`).
-- `packages/lib/server-only/recipient/get-next-pending-recipient.ts` — returns `recipients[currentIndex + 1]` for the dictate-next-signer form (V1 sign loader).
-- `packages/lib/server-only/template/create-document-from-direct-template.ts:674-742` — same single-next assumption for direct-template dictation.
-- Assistant scope: `packages/lib/server-only/recipient/get-recipients-for-assistant.ts` and the assistant branch of `packages/trpc/server/envelope-router/sign-envelope-field.ts` use `signingOrder: { gte: ... }`.
-- Client normalization: `normalizeRecipientSigningOrders` (`packages/lib/utils/recipients.ts:50-68`) force-renumbers non-CC recipients `index + 1`, destroying duplicates. Used by V2 editor (via `packages/lib/client-only/hooks/use-editor-recipients.ts`) and V1 editors.
-- Editor autosave: watch-effect in `envelope-editor-recipient-form.tsx:524-588` diffs signers (incl. `signingOrder`) and calls `setRecipientsDebounced` → `trpc.envelope.recipient.set` (1000 ms debounce); meta changes go through `envelope.update`.
-- The canonical sort everywhere: `orderBy: [{ signingOrder: { sort: 'asc', nulls: 'last' } }, { id: 'asc' }]`.
-
-## 1. Data model & ordering semantics
-
-- Orders stay dense `1..K` (K = number of steps): a grouped document looks like `[1, 2, 3, 3, 4]`.
-- CC recipients keep `signingOrder: undefined` and always sort after steps (unchanged).
-- REJECTED semantics unchanged: turn checks treat `signingStatus !== SIGNED` (including REJECTED) as blocking; rejection independently cancels the document via the existing flow.
-- Null orders (legacy/API data) sort last (treated as `+Infinity` in comparisons).
-
-## 2. Shared pure utilities — `packages/lib/utils/recipient-groups.ts` (new)
-
-Client-safe pure functions, fully unit-tested:
-
-- `groupRecipientsBySigningOrder(signers)` → `{ steps: Array<{ order: number; members: T[] }>, ccRecipients: T[] }`. Steps sorted ascending; members keep array order.
-- `normalizeGroupedSigningOrders(signers, canUpdate?)` → dense-renumbers steps **preserving duplicates**. Contract mirrors the flat normalizer: steps sort by current order and are renumbered by sequence position; a step containing a locked recipient (per `canUpdate`) keeps the locked member's persisted order; editable steps never collide into a locked step's number (no accidental grouping — they take the next free position). In practice locked recipients occupy a prefix of the sequence (sequential signing means earlier steps signed first), so positions and persisted orders agree; API-created oddities degrade gracefully like today. CC recipients get `undefined` and move to the tail.
-- Editor operations (each returns a new, normalized signers array; no mutation):
-  - `reorderStep(signers, fromStepIndex, toStepIndex)`
-  - `mergeSteps(signers, sourceStepIndex, targetStepIndex)` — all source members adopt the target step's order
-  - `moveRecipientToStep(signers, formId, targetStepIndex)` — join a group
-  - `extractRecipientToNewStep(signers, formId, insertStepIndex)` — become a standalone step at that gap position
-  - `ungroupStep(signers, stepIndex)` — members become consecutive standalone steps
-- `getDictatableNextRecipient(recipients, currentRecipientId)` → the single next-step recipient, or `null` when the current signer isn't the last unsigned member of their step or the next step has ≠ 1 member. Shared by server dictation logic and client dictate-form mirrors.
-
-`normalizeRecipientSigningOrders` (flat) is left untouched for V1 surfaces. `isAssistantLastSigner` (`packages/lib/utils/recipients.ts:25-30`) becomes group-aware: warns when any ASSISTANT sits in the **last step** (equivalent behavior for ungrouped documents).
-
-## 3. Editor UI — structure & visuals
-
-Component split under `apps/remix/app/components/general/envelope-editor/`:
-
-- `envelope-editor-recipient-form.tsx` — retains header actions (AI detect, Add Myself, Add Signer), signing-order/dictate checkboxes, autosave watch-effect (unchanged logic), dialogs, limits alert.
-- `recipient-step-list.tsx` (new) — `DragDropContext`, outer step `Droppable`, gap drop-zones, step derivation via `groupRecipientsBySigningOrder(watchedSigners)`.
-- `recipient-step-card.tsx` (new) — card chrome: card-level grip, `Step {n}` badge (`Badge variant="neutral"`), group header row (`Users2Icon` + `{n} signers · any order` via `plural()` + right-aligned `Ungroup` link `Button variant="link"`), inner member `Droppable`.
-- `recipient-row.tsx` (new) — moved row internals: row grip, order input, email/name `RecipientAutoCompleteInput`, `RecipientRoleSelect`, delete button, advanced `RecipientActionAuthSelect`.
-
-Rendering rules:
-
-- Form state remains the single flat `signers` field array (react-hook-form indices = flat array positions); steps are derived at render time only.
-- Sequential mode: every step renders as a bordered card. Group cards (2+ members) get the green accent treatment: `border-primary`-tinted border, light green background, green-tinted order inputs, group header row visible.
-- Single-member steps: card with `Step {n}` badge, card grip, and the member row (with its own row grip) — no group header.
-- CC recipients: plain non-draggable cards without badge/order input, rendered after the last step.
-- Parallel mode (signing order off): render today's flat rows — no cards, badges, or grouping UI.
-- All new strings use `<Trans>`/`t`/`plural` macros.
-
-## 4. Editor UI — interactions
-
-### Drag & drop (nested Kanban, `@hello-pangea/dnd`)
-
-- Outer `Droppable` `type="STEP"` (vertical) contains one `Draggable` per step; drag handle = card grip. `isCombineEnabled` on.
-- Each step card contains an inner `Droppable` `type="RECIPIENT"` with one `Draggable` per member; drag handle = row grip.
-- Gap zones: slim `Droppable`s of `type="RECIPIENT"` rendered between cards and at both ends. Collapsed (`h-2`, invisible) normally; while a RECIPIENT drag is active (tracked via `onBeforeCapture`), they expand to dashed strips (per mock image 2).
-
-| Gesture | DnD result | Operation |
-| --- | --- | --- |
-| Card grip → drop between cards | `type=STEP`, `destination` | `reorderStep` |
-| Card grip → drop onto another card's center | `type=STEP`, `combine` | `mergeSteps` |
-| Row grip → drop onto another step card | `type=RECIPIENT`, destination = that card's inner droppable | `moveRecipientToStep` |
-| Row grip → drop on a gap zone | `type=RECIPIENT`, destination = gap droppable | `extractRecipientToNewStep` |
-| Row grip → drop within own step | destination = own inner droppable | no-op |
-
-Hover affordances: target card shows a green ring + floating `Release to sign together` badge (with users icon) when it is a combine target (`snapshot.combineTargetFor`) **or** an inner-droppable hover target (`snapshot.isDraggingOver`). Existing drag styling (widget background, pointer-events) carries over.
-
-After every operation: normalize → `form.setValue('signers', ...)` (validate + dirty) → assistant-last-step warning toast when applicable → `form.trigger('signers')`. The existing watch-effect autosaves.
-
-### Signing-order number input
-
-- `min=1`, `max=stepCount + 1` (spinner + typed, `data-testid="signing-order-input"` kept).
-- Value `N` where `N` = own step → no-op.
-- `N` in `1..K`, other step → `moveRecipientToStep` (type-to-join; also merges two solo steps into a group).
-- `N > K` → `extractRecipientToNewStep` at the end (out-of-bounds extraction).
-- Invalid input (empty, non-integer, `< 1`) → ignored (current behavior).
-
-### Other interactions
-
-- **Ungroup** link → `ungroupStep`.
-- **Add Signer / Add Myself / AI detection** → new standalone step at the end (`signingOrder = stepCount + 1`).
-- **Remove signer** → existing flow + group-aware normalize (a group of 2 losing a member dissolves into a plain step; empty steps disappear).
-- **Role change to CC** → member leaves its step (normalize moves it to the tail). Role change to ASSISTANT inside a group is allowed.
-- **Locked recipients** (signed or inserted fields, per `canRecipientBeModified`): row controls disabled as today. A step containing a locked member cannot have its order changed — card grip disabled (no drag/reorder, no combining it *into* another step) and Ungroup disabled. It **may** still receive new members (inner drop, combine-as-target, type-to-join), since that never alters the locked member's order; editable peers may still be dragged out individually.
-- **Drag disabled** entirely when: parallel mode, submitting, or (per draggable) CC/locked — matching current `isDragDisabled` rules.
-
-## 5. Backend signing flow (group-aware)
-
-Single shared predicate (pure, in `recipient-groups.ts`): *a recipient may act iff no non-CC recipient with `signingStatus !== SIGNED` has a strictly lower `signingOrder` (null = ∞)*.
-
-1. **Turn check** — `get-is-recipient-turn.ts` replaces its index loop with the predicate; `get-envelope-for-recipient-signing.ts:263-279` deletes its inline copy and calls the same helper. Both keep their existing queries (add the `nulls: 'last'` + `id` tiebreaker to the sort in both for consistency).
-2. **Initial send** — `send-document.ts`: SEQUENTIAL now notifies **all** pending non-CC recipients holding the minimum pending order (replaces `.slice(0, 1)`).
-3. **Completion advance** — `complete-document-with-token.ts`: compute `nextGroup` = pending (non-SIGNED, non-CC) recipients at the minimum order. Activate (sendStatus SENT + sentAt) and email **only members with `sendStatus !== SENT`**, each via the existing `send.signing.requested.email` job. This one rule covers both cases: mid-group completion (remaining peers already SENT → nothing sent, no advance) and step transition (all next-step members activated together). The "waiting for others" pending email to the just-signed recipient is unchanged. Mirror the same logic in `create-document-from-direct-template.ts`.
-4. **Dictate next signer** — rewrite (`nextSigner` name/email + RECIPIENT_UPDATED audit log) applies only when `allowDictateNextSigner && nextGroup.length === 1` and that member is freshly activated (`sendStatus !== SENT`). Server form source `get-next-pending-recipient.ts` and the client mirrors (`envelope-signing-provider.tsx`, `document-signing-page-view-v1.tsx`, `direct-template-signing-form.tsx`) all switch to `getDictatableNextRecipient` — the form only renders when the completing signer is the last unsigned member of their step and the next step has exactly one member.
-5. **Assistants** — `get-recipients-for-assistant.ts` and the assistant branch of `sign-envelope-field.ts` change `gte` → strictly-greater semantics so grouped assistants cannot act for group peers. Implementation must verify whether the current `gte` lists include the assistant themself and preserve that self-inclusion explicitly (`OR id = assistant.id`) if so.
-6. **CSC/TSP** — no changes to `execute-tsp-sign.ts` (head-of-queue advance stays safe even if duplicates arrive via API). The editor blocks group creation on CSC instances via the existing CSC `superRefine` in `ZEditorRecipientsFormSchema`: add an issue when any non-CC duplicate `signingOrder` exists.
-
-No email template, webhook, audit-log, or job-definition changes: activation emails, events, and logs are already per-recipient.
-
-## 6. Validation & compatibility
-
-- `ZEditorRecipientsFormSchema` gains the CSC no-duplicates issue only; tRPC/REST schemas stay `z.number().optional()` (duplicates are now legitimate).
-- Templates: groups carry into created documents (`signingOrder` copies verbatim in template → document creation and document duplication). Verified by unit/E2E coverage.
-- V1 editors and embed authoring keep the flat normalizer: opening & saving recipients there flattens groups into consecutive steps (accepted, documented limitation).
-- API consumers that already send duplicate orders gain correct parallel-group behavior automatically.
-
-## 7. Testing
-
-**Unit (vitest, `packages/lib`)** — new `recipient-groups.test.ts` (+ extend `recipients.test.ts`):
-
-- Step derivation (duplicates, nulls, CC exclusion, stable member order).
-- `normalizeGroupedSigningOrders`: preserves groups, compacts gaps, locked-recipient anchoring, CC tail.
-- Each editor operation: merge, join, extract (incl. out-of-bounds), reorder, ungroup, dissolve-on-removal.
-- Turn predicate: group member allowed when lower steps signed; blocked by any lower unsigned/REJECTED; parallel mode; null orders; single-member equivalence with old behavior.
-- `getDictatableNextRecipient`: eligibility matrix (mid-group vs last-of-group × next step size 1/2+/none).
-
-**E2E (Playwright, `packages/app-tests`, per the envelope-editor-v2-e2e skill)**:
-
-- Editor: type-to-join creates a group (badge `Step 3`, header `2 signers · any order`, green styling), persistence after reload, Ungroup restores sequential steps, out-of-bounds extraction.
-- Signing flow: document `[1, (2,2), 3]` — after step 1 signs, both group members can access signing (either order); step 3 is blocked (waiting page) until both complete, then unlocks; activation emails fire once per member.
-- One best-effort drag smoke test (combine two solo steps); drag logic correctness is otherwise covered by unit tests.
-
-## 8. Out of scope
-
-- Named groups, quorum ("k of n") semantics, or per-group metadata (would require an explicit group entity — future migration if ever needed).
-- Whole-group drag *into* another group via card grip is a merge (`mergeSteps`); there is no "insert group inside group" concept.
-- V1 editor group awareness.
-- TSP/CSC parallel signing.

apps/remix/app/components/dialogs/document-preferences-reset-dialog.tsx

@@ -18,7 +18,6 @@ export type DocumentPreferencesResetDialogProps = {
   onReset: () => Promise<void>;
   showAiFeatures?: boolean;
   showDocumentVisibility?: boolean;
-  showIncludeSenderDetails?: boolean;
 };
 
 export const DocumentPreferencesResetDialog = ({
@@ -26,7 +25,6 @@ export const DocumentPreferencesResetDialog = ({
   onReset,
   showAiFeatures = false,
   showDocumentVisibility = false,
-  showIncludeSenderDetails = false,
 }: DocumentPreferencesResetDialogProps) => {
   const [open, setOpen] = useState(false);
   const [isResetting, setIsResetting] = useState(false);
@@ -92,29 +90,12 @@ export const DocumentPreferencesResetDialog = ({
               <li>
                 <Trans>Default signature settings</Trans>
               </li>
-              {showIncludeSenderDetails && (
-                <li>
-                  <Trans>Send on behalf of team</Trans>
-                </li>
-              )}
-              <li>
-                <Trans>Include the signing certificate in the document</Trans>
-              </li>
-              <li>
-                <Trans>Include the audit logs in the document</Trans>
-              </li>
               <li>
                 <Trans>Default recipients</Trans>
               </li>
               <li>
                 <Trans>Delegate document ownership</Trans>
               </li>
-              <li>
-                <Trans>Default envelope expiration</Trans>
-              </li>
-              <li>
-                <Trans>Default signing reminders</Trans>
-              </li>
               {showAiFeatures && (
                 <li>
                   <Trans>AI features</Trans>

apps/remix/app/components/dialogs/team-email-delete-dialog.tsx

@@ -17,28 +17,25 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { Prisma } from '@prisma/client';
+import type { Team, TeamEmail, TeamEmailVerification } from '@prisma/client';
 import { useState } from 'react';
 import { useRevalidator } from 'react-router';
 
 export type TeamEmailDeleteDialogProps = {
   trigger?: React.ReactNode;
   teamName: string;
-  team: Prisma.TeamGetPayload<{
-    include: {
-      teamEmail: true;
-      emailVerification: {
-        select: {
-          expiresAt: true;
-          name: true;
-          email: true;
-        };
-      };
-    };
-  }>;
+  team: Pick<Team, 'id' | 'avatarImageId' | 'name'>;
+  teamEmail: Pick<TeamEmail, 'email' | 'name'> | null;
+  emailVerification: Pick<TeamEmailVerification, 'email' | 'name' | 'expiresAt'> | null;
 };
 
-export const TeamEmailDeleteDialog = ({ trigger, teamName, team }: TeamEmailDeleteDialogProps) => {
+export const TeamEmailDeleteDialog = ({
+  trigger,
+  teamName,
+  team,
+  teamEmail,
+  emailVerification,
+}: TeamEmailDeleteDialogProps) => {
   const [open, setOpen] = useState(false);
 
   const { _ } = useLingui();
@@ -83,11 +80,11 @@ export const TeamEmailDeleteDialog = ({ trigger, teamName, team }: TeamEmailDele
     });
 
   const onRemove = async () => {
-    if (team.teamEmail) {
+    if (teamEmail) {
       await deleteTeamEmail({ teamId: team.id });
     }
 
-    if (team.emailVerification) {
+    if (emailVerification) {
       await deleteTeamEmailVerification({ teamId: team.id });
     }
 
@@ -121,13 +118,13 @@ export const TeamEmailDeleteDialog = ({ trigger, teamName, team }: TeamEmailDele
           <AvatarWithText
             avatarClass="h-12 w-12"
             avatarSrc={formatAvatarUrl(team.avatarImageId)}
-            avatarFallback={extractInitials((team.teamEmail?.name || team.emailVerification?.name) ?? '')}
+            avatarFallback={extractInitials((teamEmail?.name || emailVerification?.name) ?? '')}
             primaryText={
               <span className="font-semibold text-foreground/80 text-sm">
-                {team.teamEmail?.name || team.emailVerification?.name}
+                {teamEmail?.name || emailVerification?.name}
               </span>
             }
-            secondaryText={<span className="text-sm">{team.teamEmail?.email || team.emailVerification?.email}</span>}
+            secondaryText={<span className="text-sm">{teamEmail?.email || emailVerification?.email}</span>}
           />
         </Alert>
 

apps/remix/app/components/dialogs/team-email-update-dialog.tsx

@@ -23,7 +23,8 @@ import { useRevalidator } from 'react-router';
 import type { z } from 'zod';
 
 export type TeamEmailUpdateDialogProps = {
-  teamEmail: TeamEmail;
+  teamId: number;
+  teamEmail: Pick<TeamEmail, 'email' | 'name'>;
   trigger?: React.ReactNode;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
@@ -33,7 +34,7 @@ const ZUpdateTeamEmailFormSchema = ZUpdateTeamEmailMutationSchema.pick({
 
 type TUpdateTeamEmailFormSchema = z.infer<typeof ZUpdateTeamEmailFormSchema>;
 
-export const TeamEmailUpdateDialog = ({ teamEmail, trigger, ...props }: TeamEmailUpdateDialogProps) => {
+export const TeamEmailUpdateDialog = ({ teamId, teamEmail, trigger, ...props }: TeamEmailUpdateDialogProps) => {
   const [open, setOpen] = useState(false);
 
   const { t } = useLingui();
@@ -53,7 +54,7 @@ export const TeamEmailUpdateDialog = ({ teamEmail, trigger, ...props }: TeamEmai
   const onFormSubmit = async ({ name }: TUpdateTeamEmailFormSchema) => {
     try {
       await updateTeamEmail({
-        teamId: teamEmail.teamId,
+        teamId,
         data: {
           name,
         },

apps/remix/app/components/forms/branding-preferences-form.tsx

@@ -29,6 +29,7 @@ import { useOptionalCurrentTeam } from '~/providers/team';
 import { useCspNonce } from '~/utils/nonce';
 
 import { FormStickySaveBar } from './form-sticky-save-bar';
+import { InheritableField } from './inheritable-field';
 
 const ZBrandingPreferencesFormSchema = z.object({
   brandingEnabled: z.boolean().nullable(),
@@ -210,11 +211,13 @@ export function BrandingPreferencesForm({
             control={form.control}
             name="brandingEnabled"
             render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormLabel>
-                  <Trans>Enable Custom Branding</Trans>
-                </FormLabel>
-
+              <InheritableField
+                className="flex-1"
+                canInherit={canInherit}
+                isInherited={field.value === null}
+                label={<Trans>Enable Custom Branding</Trans>}
+                testId="branding-enabled"
+              >
                 <FormControl>
                   <Select
                     {...field}
@@ -252,7 +255,7 @@ export function BrandingPreferencesForm({
                     <Trans>Enable custom branding for all documents in this organisation</Trans>
                   )}
                 </FormDescription>
-              </FormItem>
+              </InheritableField>
             )}
           />
 
@@ -263,11 +266,13 @@ export function BrandingPreferencesForm({
               control={form.control}
               name="brandingLogo"
               render={({ field: { value: _value, onChange, ...field } }) => (
-                <FormItem className="flex-1">
-                  <FormLabel>
-                    <Trans>Branding Logo</Trans>
-                  </FormLabel>
-
+                <InheritableField
+                  className="flex-1"
+                  canInherit={canInherit}
+                  isInherited={!previewUrl}
+                  label={<Trans>Branding Logo</Trans>}
+                  testId="branding-logo"
+                >
                   <div className="flex flex-col gap-4">
                     <div className="relative h-48 w-full overflow-hidden rounded-lg border border-border bg-background">
                       {previewUrl ? (
@@ -345,7 +350,7 @@ export function BrandingPreferencesForm({
                       )}
                     </FormDescription>
                   </div>
-                </FormItem>
+                </InheritableField>
               )}
             />
 
@@ -353,11 +358,13 @@ export function BrandingPreferencesForm({
               control={form.control}
               name="brandingUrl"
               render={({ field }) => (
-                <FormItem className="flex-1">
-                  <FormLabel>
-                    <Trans>Brand Website</Trans>
-                  </FormLabel>
-
+                <InheritableField
+                  className="flex-1"
+                  canInherit={canInherit}
+                  isInherited={!field.value}
+                  label={<Trans>Brand Website</Trans>}
+                  testId="branding-url"
+                >
                   <FormControl>
                     <Input type="url" placeholder="https://example.com" disabled={!isBrandingEnabled} {...field} />
                   </FormControl>
@@ -372,7 +379,7 @@ export function BrandingPreferencesForm({
                       </span>
                     )}
                   </FormDescription>
-                </FormItem>
+                </InheritableField>
               )}
             />
 
@@ -380,11 +387,13 @@ export function BrandingPreferencesForm({
               control={form.control}
               name="brandingCompanyDetails"
               render={({ field }) => (
-                <FormItem className="flex-1">
-                  <FormLabel>
-                    <Trans>Brand Details</Trans>
-                  </FormLabel>
-
+                <InheritableField
+                  className="flex-1"
+                  canInherit={canInherit}
+                  isInherited={!field.value}
+                  label={<Trans>Brand Details</Trans>}
+                  testId="branding-company-details"
+                >
                   <FormControl>
                     <Textarea
                       placeholder={t`Enter your brand details`}
@@ -404,7 +413,7 @@ export function BrandingPreferencesForm({
                       </span>
                     )}
                   </FormDescription>
-                </FormItem>
+                </InheritableField>
               )}
             />
           </div>

apps/remix/app/components/forms/certificate-preferences-form.tsx

@@ -0,0 +1,169 @@
+import { Form, FormControl, FormDescription, FormField } from '@documenso/ui/primitives/form/form';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans } from '@lingui/react/macro';
+import type { TeamGlobalSettings } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { FormStickySaveBar } from './form-sticky-save-bar';
+import { InheritableField } from './inheritable-field';
+
+const ZCertificatePreferencesFormSchema = z.object({
+  includeSigningCertificate: z.boolean().nullable(),
+  includeAuditLog: z.boolean().nullable(),
+});
+
+export type TCertificatePreferencesFormSchema = z.infer<typeof ZCertificatePreferencesFormSchema>;
+
+type SettingsSubset = Pick<TeamGlobalSettings, 'includeSigningCertificate' | 'includeAuditLog'>;
+
+export type CertificatePreferencesFormProps = {
+  settings: SettingsSubset;
+  canInherit: boolean;
+  onFormSubmit: (data: TCertificatePreferencesFormSchema) => Promise<void>;
+};
+
+export const CertificatePreferencesForm = ({ settings, canInherit, onFormSubmit }: CertificatePreferencesFormProps) => {
+  const form = useForm<TCertificatePreferencesFormSchema>({
+    defaultValues: {
+      includeSigningCertificate: settings.includeSigningCertificate,
+      includeAuditLog: settings.includeAuditLog,
+    },
+    resolver: zodResolver(ZCertificatePreferencesFormSchema),
+  });
+
+  const handleFormSubmit = form.handleSubmit(async (data) => {
+    try {
+      await onFormSubmit(data);
+    } catch {
+      // The page handler surfaces its own error toast. Keep the form dirty so
+      // the save bar stays visible and the user can retry.
+      return;
+    }
+
+    form.reset(data);
+  });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={handleFormSubmit}>
+        <fieldset className="flex h-full flex-col gap-y-6" disabled={form.formState.isSubmitting}>
+          <FormField
+            control={form.control}
+            name="includeSigningCertificate"
+            render={({ field }) => (
+              <InheritableField
+                className="flex-1"
+                canInherit={canInherit}
+                isInherited={field.value === null}
+                label={<Trans>Include the Signing Certificate in the Document</Trans>}
+                testId="include-signing-certificate"
+              >
+                <FormControl>
+                  <Select
+                    {...field}
+                    value={field.value === null ? '-1' : field.value.toString()}
+                    onValueChange={(value) =>
+                      field.onChange(value === 'true' ? true : value === 'false' ? false : null)
+                    }
+                  >
+                    <SelectTrigger
+                      className="bg-background text-muted-foreground"
+                      data-testid="include-signing-certificate-trigger"
+                    >
+                      <SelectValue />
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      <SelectItem value="true">
+                        <Trans>Yes</Trans>
+                      </SelectItem>
+
+                      <SelectItem value="false">
+                        <Trans>No</Trans>
+                      </SelectItem>
+
+                      {canInherit && (
+                        <SelectItem value={'-1'}>
+                          <Trans>Inherit from organisation</Trans>
+                        </SelectItem>
+                      )}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+
+                <FormDescription>
+                  <Trans>
+                    Controls whether the signing certificate will be included in the document when it is downloaded. The
+                    signing certificate can still be downloaded from the logs page separately.
+                  </Trans>
+                </FormDescription>
+              </InheritableField>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="includeAuditLog"
+            render={({ field }) => (
+              <InheritableField
+                className="flex-1"
+                canInherit={canInherit}
+                isInherited={field.value === null}
+                label={<Trans>Include the Audit Logs in the Document</Trans>}
+                testId="include-audit-log"
+              >
+                <FormControl>
+                  <Select
+                    {...field}
+                    value={field.value === null ? '-1' : field.value.toString()}
+                    onValueChange={(value) =>
+                      field.onChange(value === 'true' ? true : value === 'false' ? false : null)
+                    }
+                  >
+                    <SelectTrigger
+                      className="bg-background text-muted-foreground"
+                      data-testid="include-audit-log-trigger"
+                    >
+                      <SelectValue />
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      <SelectItem value="true">
+                        <Trans>Yes</Trans>
+                      </SelectItem>
+
+                      <SelectItem value="false">
+                        <Trans>No</Trans>
+                      </SelectItem>
+
+                      {canInherit && (
+                        <SelectItem value={'-1'}>
+                          <Trans>Inherit from organisation</Trans>
+                        </SelectItem>
+                      )}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+
+                <FormDescription>
+                  <Trans>
+                    Controls whether the audit logs will be included in the document when it is downloaded. The audit
+                    logs can still be downloaded from the logs page separately.
+                  </Trans>
+                </FormDescription>
+              </InheritableField>
+            )}
+          />
+
+          <FormStickySaveBar
+            isDirty={form.formState.isDirty}
+            isSubmitting={form.formState.isSubmitting}
+            onReset={() => form.reset()}
+          />
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/forms/document-preferences-form.tsx

@@ -1,12 +1,8 @@
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { IS_AI_FEATURES_CONFIGURED } from '@documenso/lib/constants/app';
 import { DATE_FORMATS } from '@documenso/lib/constants/date-formats';
 import { DOCUMENT_SIGNATURE_TYPES, DocumentSignatureType } from '@documenso/lib/constants/document';
-import {
-  type TEnvelopeExpirationPeriod,
-  ZEnvelopeExpirationPeriod,
-} from '@documenso/lib/constants/envelope-expiration';
-import { type TEnvelopeReminderSettings, ZEnvelopeReminderSettings } from '@documenso/lib/constants/envelope-reminder';
 import { isValidLanguageCode, SUPPORTED_LANGUAGE_CODES, SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n';
 import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import type { TDefaultRecipients } from '@documenso/lib/types/default-recipients';
@@ -16,36 +12,24 @@ import { generateDefaultOrganisationSettings, isPersonalLayout } from '@documens
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import { extractTeamSignatureSettings, generateDefaultTeamSettings } from '@documenso/lib/utils/teams';
 import { DocumentSignatureSettingsTooltip } from '@documenso/ui/components/document/document-signature-settings-tooltip';
-import { ExpirationPeriodPicker } from '@documenso/ui/components/document/expiration-period-picker';
-import { ReminderSettingsPicker } from '@documenso/ui/components/document/reminder-settings-picker';
 import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
-import { Alert } from '@documenso/ui/primitives/alert';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
 import { Combobox } from '@documenso/ui/primitives/combobox';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
+import { Form, FormControl, FormDescription, FormField, FormMessage } from '@documenso/ui/primitives/form/form';
 import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg, t } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { DocumentVisibility, OrganisationType, type RecipientRole, type TeamGlobalSettings } from '@prisma/client';
+import { DocumentVisibility, type RecipientRole, type TeamGlobalSettings } from '@prisma/client';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
-
 import { DocumentPreferencesResetDialog } from '~/components/dialogs/document-preferences-reset-dialog';
 import { useOptionalCurrentTeam } from '~/providers/team';
-
 import { DefaultRecipientsMultiSelectCombobox } from '../general/default-recipients-multiselect-combobox';
 import { FormStickySaveBar } from './form-sticky-save-bar';
+import { InheritableField } from './inheritable-field';
 
 /**
  * Can't infer this from the schema since we need to keep the schema inside the component to allow
@@ -56,15 +40,10 @@ export type TDocumentPreferencesFormSchema = {
   documentLanguage: (typeof SUPPORTED_LANGUAGE_CODES)[number] | null;
   documentTimezone: string | null;
   documentDateFormat: TDocumentMetaDateFormat | null;
-  includeSenderDetails: boolean | null;
-  includeSigningCertificate: boolean | null;
-  includeAuditLog: boolean | null;
   signatureTypes: DocumentSignatureType[];
   defaultRecipients: TDefaultRecipients | null;
   delegateDocumentOwnership: boolean | null;
   aiFeaturesEnabled: boolean | null;
-  envelopeExpirationPeriod: TEnvelopeExpirationPeriod | null;
-  reminderSettings: TEnvelopeReminderSettings | null;
 };
 
 type SettingsSubset = Pick<
@@ -73,23 +52,17 @@ type SettingsSubset = Pick<
   | 'documentLanguage'
   | 'documentTimezone'
   | 'documentDateFormat'
-  | 'includeSenderDetails'
-  | 'includeSigningCertificate'
-  | 'includeAuditLog'
   | 'typedSignatureEnabled'
   | 'uploadSignatureEnabled'
   | 'drawSignatureEnabled'
   | 'defaultRecipients'
   | 'delegateDocumentOwnership'
   | 'aiFeaturesEnabled'
-  | 'envelopeExpirationPeriod'
-  | 'reminderSettings'
 >;
 
 export type DocumentPreferencesFormProps = {
   settings: SettingsSubset;
   canInherit: boolean;
-  isAiFeaturesConfigured?: boolean;
   onFormSubmit: (data: TDocumentPreferencesFormSchema) => Promise<void>;
 };
 
@@ -101,50 +74,34 @@ const getDocumentPreferencesFormValues = (settings: SettingsSubset): TDocumentPr
     documentLanguage: isValidLanguageCode(settings.documentLanguage) ? settings.documentLanguage : null,
     documentTimezone: settings.documentTimezone,
     documentDateFormat: parsedDocumentDateFormat.success ? parsedDocumentDateFormat.data : null,
-    includeSenderDetails: settings.includeSenderDetails,
-    includeSigningCertificate: settings.includeSigningCertificate,
-    includeAuditLog: settings.includeAuditLog,
     signatureTypes: extractTeamSignatureSettings({ ...settings }),
     defaultRecipients: settings.defaultRecipients ? ZDefaultRecipientsSchema.parse(settings.defaultRecipients) : null,
     delegateDocumentOwnership: settings.delegateDocumentOwnership,
     aiFeaturesEnabled: settings.aiFeaturesEnabled,
-    envelopeExpirationPeriod: settings.envelopeExpirationPeriod ?? null,
-    reminderSettings: settings.reminderSettings ?? null,
   };
 };
 
-export const DocumentPreferencesForm = ({
-  settings,
-  onFormSubmit,
-  canInherit,
-  isAiFeaturesConfigured = false,
-}: DocumentPreferencesFormProps) => {
+export const DocumentPreferencesForm = ({ settings, onFormSubmit, canInherit }: DocumentPreferencesFormProps) => {
   const { _ } = useLingui();
-  const { user, organisations } = useSession();
+  const { organisations } = useSession();
   const currentOrganisation = useCurrentOrganisation();
   const optionalTeam = useOptionalCurrentTeam();
 
-  const isPersonalLayoutMode = isPersonalLayout(organisations);
-  const isPersonalOrganisation = currentOrganisation.type === OrganisationType.PERSONAL;
+  const isAiFeaturesConfigured = IS_AI_FEATURES_CONFIGURED();
 
-  const placeholderEmail = user.email ?? 'user@example.com';
+  const isPersonalLayoutMode = isPersonalLayout(organisations);
 
   const ZDocumentPreferencesFormSchema = z.object({
     documentVisibility: z.nativeEnum(DocumentVisibility).nullable(),
     documentLanguage: z.enum(SUPPORTED_LANGUAGE_CODES).nullable(),
     documentTimezone: z.string().nullable(),
     documentDateFormat: ZDocumentMetaDateFormatSchema.nullable(),
-    includeSenderDetails: z.boolean().nullable(),
-    includeSigningCertificate: z.boolean().nullable(),
-    includeAuditLog: z.boolean().nullable(),
     signatureTypes: z.array(z.nativeEnum(DocumentSignatureType)).min(canInherit ? 0 : 1, {
       message: msg`At least one signature type must be enabled`.id,
     }),
     defaultRecipients: ZDefaultRecipientsSchema.nullable(),
     delegateDocumentOwnership: z.boolean().nullable(),
     aiFeaturesEnabled: z.boolean().nullable(),
-    envelopeExpirationPeriod: ZEnvelopeExpirationPeriod.nullable(),
-    reminderSettings: ZEnvelopeReminderSettings.nullable(),
   });
 
   const defaultValues = getDocumentPreferencesFormValues(settings);
@@ -189,17 +146,19 @@ export const DocumentPreferencesForm = ({
   return (
     <Form {...form}>
       <form onSubmit={handleFormSubmit}>
-        <fieldset className="flex h-full max-w-2xl flex-col gap-y-6" disabled={form.formState.isSubmitting}>
+        <fieldset className="flex h-full flex-col gap-y-6" disabled={form.formState.isSubmitting}>
           {!isPersonalLayoutMode && (
             <FormField
               control={form.control}
               name="documentVisibility"
               render={({ field }) => (
-                <FormItem className="flex-1">
-                  <FormLabel>
-                    <Trans>Default Document Visibility</Trans>
-                  </FormLabel>
-
+                <InheritableField
+                  className="flex-1"
+                  canInherit={canInherit}
+                  isInherited={field.value === null}
+                  label={<Trans>Default Document Visibility</Trans>}
+                  testId="document-visibility"
+                >
                   <FormControl>
                     <Select
                       {...field}
@@ -236,7 +195,7 @@ export const DocumentPreferencesForm = ({
                   <FormDescription>
                     <Trans>Controls the default visibility of an uploaded document.</Trans>
                   </FormDescription>
-                </FormItem>
+                </InheritableField>
               )}
             />
           )}
@@ -245,11 +204,13 @@ export const DocumentPreferencesForm = ({
             control={form.control}
             name="documentLanguage"
             render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormLabel>
-                  <Trans>Default Document Language</Trans>
-                </FormLabel>
-
+              <InheritableField
+                className="flex-1"
+                canInherit={canInherit}
+                isInherited={field.value === null}
+                label={<Trans>Default Document Language</Trans>}
+                testId="document-language"
+              >
                 <FormControl>
                   <Select
                     {...field}
@@ -283,7 +244,7 @@ export const DocumentPreferencesForm = ({
                     communications with the recipients.
                   </Trans>
                 </FormDescription>
-              </FormItem>
+              </InheritableField>
             )}
           />
 
@@ -291,11 +252,12 @@ export const DocumentPreferencesForm = ({
             control={form.control}
             name="documentDateFormat"
             render={({ field }) => (
-              <FormItem>
-                <FormLabel>
-                  <Trans>Default Date Format</Trans>
-                </FormLabel>
-
+              <InheritableField
+                canInherit={canInherit}
+                isInherited={field.value === null}
+                label={<Trans>Default Date Format</Trans>}
+                testId="document-date-format"
+              >
                 <FormControl>
                   <Select
                     value={field.value === null ? '-1' : field.value}
@@ -322,7 +284,7 @@ export const DocumentPreferencesForm = ({
                 </FormControl>
 
                 <FormMessage />
-              </FormItem>
+              </InheritableField>
             )}
           />
 
@@ -330,11 +292,12 @@ export const DocumentPreferencesForm = ({
             control={form.control}
             name="documentTimezone"
             render={({ field }) => (
-              <FormItem>
-                <FormLabel>
-                  <Trans>Default Time Zone</Trans>
-                </FormLabel>
-
+              <InheritableField
+                canInherit={canInherit}
+                isInherited={field.value === null}
+                label={<Trans>Default Time Zone</Trans>}
+                testId="document-timezone"
+              >
                 <FormControl>
                   <Combobox
                     triggerPlaceholder={canInherit ? t`Inherit from organisation` : t`Local timezone`}
@@ -347,7 +310,7 @@ export const DocumentPreferencesForm = ({
                 </FormControl>
 
                 <FormMessage />
-              </FormItem>
+              </InheritableField>
             )}
           />
 
@@ -355,12 +318,18 @@ export const DocumentPreferencesForm = ({
             control={form.control}
             name="signatureTypes"
             render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormLabel className="flex flex-row items-center">
-                  <Trans>Default Signature Settings</Trans>
-                  <DocumentSignatureSettingsTooltip />
-                </FormLabel>
-
+              <InheritableField
+                className="flex-1"
+                canInherit={canInherit}
+                isInherited={canInherit && (field.value === null || field.value.length === 0)}
+                label={
+                  <span className="flex flex-row items-center">
+                    <Trans>Default Signature Settings</Trans>
+                    <DocumentSignatureSettingsTooltip />
+                  </span>
+                }
+                testId="signature-types"
+              >
                 <FormControl>
                   <MultiSelectCombobox
                     options={Object.values(DOCUMENT_SIGNATURE_TYPES).map((option) => ({
@@ -383,179 +352,7 @@ export const DocumentPreferencesForm = ({
                     <Trans>Controls which signatures are allowed to be used when signing a document.</Trans>
                   </FormDescription>
                 )}
-              </FormItem>
-            )}
-          />
-
-          {!isPersonalLayoutMode && !isPersonalOrganisation && (
-            <FormField
-              control={form.control}
-              name="includeSenderDetails"
-              render={({ field }) => (
-                <FormItem className="flex-1">
-                  <FormLabel>
-                    <Trans>Send on Behalf of Team</Trans>
-                  </FormLabel>
-
-                  <FormControl>
-                    <Select
-                      {...field}
-                      value={field.value === null ? '-1' : field.value.toString()}
-                      onValueChange={(value) =>
-                        field.onChange(value === 'true' ? true : value === 'false' ? false : null)
-                      }
-                    >
-                      <SelectTrigger
-                        className="bg-background text-muted-foreground"
-                        data-testid="include-sender-details-trigger"
-                      >
-                        <SelectValue />
-                      </SelectTrigger>
-
-                      <SelectContent>
-                        <SelectItem value="true">
-                          <Trans>Yes</Trans>
-                        </SelectItem>
-
-                        <SelectItem value="false">
-                          <Trans>No</Trans>
-                        </SelectItem>
-
-                        {canInherit && (
-                          <SelectItem value={'-1'}>
-                            <Trans>Inherit from organisation</Trans>
-                          </SelectItem>
-                        )}
-                      </SelectContent>
-                    </Select>
-                  </FormControl>
-
-                  <div className="pt-2">
-                    <div className="font-medium text-muted-foreground text-xs">
-                      <Trans>Preview</Trans>
-                    </div>
-
-                    <Alert variant="neutral" className="mt-1 px-2.5 py-1.5 text-sm">
-                      {field.value ? (
-                        <Trans>
-                          "{placeholderEmail}" on behalf of "Team Name" has invited you to sign "example document".
-                        </Trans>
-                      ) : (
-                        <Trans>"Team Name" has invited you to sign "example document".</Trans>
-                      )}
-                    </Alert>
-                  </div>
-
-                  <FormDescription>
-                    <Trans>
-                      Controls the formatting of the message that will be sent when inviting a recipient to sign a
-                      document. If a custom message has been provided while configuring the document, it will be used
-                      instead.
-                    </Trans>
-                  </FormDescription>
-                </FormItem>
-              )}
-            />
-          )}
-
-          <FormField
-            control={form.control}
-            name="includeSigningCertificate"
-            render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormLabel>
-                  <Trans>Include the Signing Certificate in the Document</Trans>
-                </FormLabel>
-
-                <FormControl>
-                  <Select
-                    {...field}
-                    value={field.value === null ? '-1' : field.value.toString()}
-                    onValueChange={(value) =>
-                      field.onChange(value === 'true' ? true : value === 'false' ? false : null)
-                    }
-                  >
-                    <SelectTrigger
-                      className="bg-background text-muted-foreground"
-                      data-testid="include-signing-certificate-trigger"
-                    >
-                      <SelectValue />
-                    </SelectTrigger>
-
-                    <SelectContent>
-                      <SelectItem value="true">
-                        <Trans>Yes</Trans>
-                      </SelectItem>
-
-                      <SelectItem value="false">
-                        <Trans>No</Trans>
-                      </SelectItem>
-
-                      {canInherit && (
-                        <SelectItem value={'-1'}>
-                          <Trans>Inherit from organisation</Trans>
-                        </SelectItem>
-                      )}
-                    </SelectContent>
-                  </Select>
-                </FormControl>
-
-                <FormDescription>
-                  <Trans>
-                    Controls whether the signing certificate will be included in the document when it is downloaded. The
-                    signing certificate can still be downloaded from the logs page separately.
-                  </Trans>
-                </FormDescription>
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="includeAuditLog"
-            render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormLabel>
-                  <Trans>Include the Audit Logs in the Document</Trans>
-                </FormLabel>
-
-                <FormControl>
-                  <Select
-                    {...field}
-                    value={field.value === null ? '-1' : field.value.toString()}
-                    onValueChange={(value) =>
-                      field.onChange(value === 'true' ? true : value === 'false' ? false : null)
-                    }
-                  >
-                    <SelectTrigger className="bg-background text-muted-foreground">
-                      <SelectValue />
-                    </SelectTrigger>
-
-                    <SelectContent>
-                      <SelectItem value="true">
-                        <Trans>Yes</Trans>
-                      </SelectItem>
-
-                      <SelectItem value="false">
-                        <Trans>No</Trans>
-                      </SelectItem>
-
-                      {canInherit && (
-                        <SelectItem value={'-1'}>
-                          <Trans>Inherit from organisation</Trans>
-                        </SelectItem>
-                      )}
-                    </SelectContent>
-                  </Select>
-                </FormControl>
-
-                <FormDescription>
-                  <Trans>
-                    Controls whether the audit logs will be included in the document when it is downloaded. The audit
-                    logs can still be downloaded from the logs page separately.
-                  </Trans>
-                </FormDescription>
-              </FormItem>
+              </InheritableField>
             )}
           />
 
@@ -566,11 +363,13 @@ export const DocumentPreferencesForm = ({
               const recipients = field.value ?? [];
 
               return (
-                <FormItem className="flex-1">
-                  <FormLabel>
-                    <Trans>Default Recipients</Trans>
-                  </FormLabel>
-
+                <InheritableField
+                  className="flex-1"
+                  canInherit={canInherit}
+                  isInherited={field.value === null}
+                  label={<Trans>Default Recipients</Trans>}
+                  testId="default-recipients"
+                >
                   {canInherit && (
                     <Select
                       value={field.value === null ? '-1' : '0'}
@@ -638,7 +437,7 @@ export const DocumentPreferencesForm = ({
                   <FormDescription>
                     <Trans>Recipients that will be automatically added to new documents.</Trans>
                   </FormDescription>
-                </FormItem>
+                </InheritableField>
               );
             }}
           />
@@ -647,11 +446,13 @@ export const DocumentPreferencesForm = ({
             control={form.control}
             name="delegateDocumentOwnership"
             render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormLabel>
-                  <Trans>Delegate Document Ownership</Trans>
-                </FormLabel>
-
+              <InheritableField
+                className="flex-1"
+                canInherit={canInherit}
+                isInherited={field.value === null}
+                label={<Trans>Delegate Document Ownership</Trans>}
+                testId="delegate-document-ownership"
+              >
                 <Select
                   {...field}
                   value={field.value === null ? '-1' : field.value.toString()}
@@ -681,65 +482,7 @@ export const DocumentPreferencesForm = ({
                 <FormDescription>
                   <Trans>Enable team API tokens to delegate document ownership to another team member.</Trans>
                 </FormDescription>
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="envelopeExpirationPeriod"
-            render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormLabel>
-                  <Trans>Default Envelope Expiration</Trans>
-                </FormLabel>
-
-                <FormControl>
-                  <ExpirationPeriodPicker
-                    value={field.value}
-                    onChange={field.onChange}
-                    inheritLabel={canInherit ? t`Inherit from organisation` : undefined}
-                  />
-                </FormControl>
-
-                <FormDescription>
-                  <Trans>
-                    Controls how long recipients have to complete signing before the document expires. After expiration,
-                    recipients can no longer sign the document.
-                  </Trans>
-                </FormDescription>
-
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="reminderSettings"
-            render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormLabel>
-                  <Trans>Default Signing Reminders</Trans>
-                </FormLabel>
-
-                <FormControl>
-                  <ReminderSettingsPicker
-                    value={field.value}
-                    onChange={field.onChange}
-                    inheritLabel={canInherit ? t`Inherit from organisation` : undefined}
-                  />
-                </FormControl>
-
-                <FormDescription>
-                  <Trans>
-                    Controls when and how often reminder emails are sent to recipients who have not yet completed
-                    signing.
-                  </Trans>
-                </FormDescription>
-
-                <FormMessage />
-              </FormItem>
+              </InheritableField>
             )}
           />
 
@@ -748,11 +491,13 @@ export const DocumentPreferencesForm = ({
               control={form.control}
               name="aiFeaturesEnabled"
               render={({ field }) => (
-                <FormItem className="flex-1">
-                  <FormLabel>
-                    <Trans>AI Features</Trans>
-                  </FormLabel>
-
+                <InheritableField
+                  className="flex-1"
+                  canInherit={canInherit}
+                  isInherited={field.value === null}
+                  label={<Trans>AI Features</Trans>}
+                  testId="ai-features-enabled"
+                >
                   <FormControl>
                     <Select
                       {...field}
@@ -790,7 +535,7 @@ export const DocumentPreferencesForm = ({
                       prefer European regions where available.
                     </Trans>
                   </FormDescription>
-                </FormItem>
+                </InheritableField>
               )}
             />
           )}
@@ -806,7 +551,6 @@ export const DocumentPreferencesForm = ({
                   onReset={handleResetToDefaults}
                   showAiFeatures={isAiFeaturesConfigured}
                   showDocumentVisibility={!isPersonalLayoutMode}
-                  showIncludeSenderDetails={!isPersonalLayoutMode && !isPersonalOrganisation}
                 />
               ) : undefined
             }

apps/remix/app/components/forms/email-preferences-form.tsx

@@ -1,9 +1,11 @@
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { FROM_ADDRESS } from '@documenso/lib/constants/email';
 import { DEFAULT_DOCUMENT_EMAIL_SETTINGS, ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
 import { zEmail } from '@documenso/lib/utils/zod';
 import { trpc } from '@documenso/trpc/react';
 import { DocumentEmailCheckboxes } from '@documenso/ui/components/document/document-email-checkboxes';
+import { Alert } from '@documenso/ui/primitives/alert';
 import {
   Form,
   FormControl,
@@ -17,22 +19,27 @@ import { Input } from '@documenso/ui/primitives/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans } from '@lingui/react/macro';
-import type { TeamGlobalSettings } from '@prisma/client';
+import { OrganisationType, type TeamGlobalSettings } from '@prisma/client';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { FormStickySaveBar } from './form-sticky-save-bar';
+import { InheritableField } from './inheritable-field';
 
 const ZEmailPreferencesFormSchema = z.object({
   emailId: z.string().nullable(),
   emailReplyTo: zEmail().nullable(),
   // emailReplyToName: z.string(),
   emailDocumentSettings: ZDocumentEmailSettingsSchema.nullable(),
+  includeSenderDetails: z.boolean().nullable(),
 });
 
 export type TEmailPreferencesFormSchema = z.infer<typeof ZEmailPreferencesFormSchema>;
 
-type SettingsSubset = Pick<TeamGlobalSettings, 'emailId' | 'emailReplyTo' | 'emailDocumentSettings'>;
+type SettingsSubset = Pick<
+  TeamGlobalSettings,
+  'emailId' | 'emailReplyTo' | 'emailDocumentSettings' | 'includeSenderDetails'
+>;
 
 export type EmailPreferencesFormProps = {
   settings: SettingsSubset;
@@ -41,14 +48,20 @@ export type EmailPreferencesFormProps = {
 };
 
 export const EmailPreferencesForm = ({ settings, onFormSubmit, canInherit }: EmailPreferencesFormProps) => {
+  const { user } = useSession();
   const organisation = useCurrentOrganisation();
 
+  const isPersonalOrganisation = organisation.type === OrganisationType.PERSONAL;
+
+  const placeholderEmail = user.email ?? 'user@example.com';
+
   const form = useForm<TEmailPreferencesFormSchema>({
     defaultValues: {
       emailId: settings.emailId,
       emailReplyTo: settings.emailReplyTo,
       // emailReplyToName: settings.emailReplyToName,
       emailDocumentSettings: settings.emailDocumentSettings,
+      includeSenderDetails: settings.includeSenderDetails,
     },
     resolver: zodResolver(ZEmailPreferencesFormSchema),
   });
@@ -75,7 +88,7 @@ export const EmailPreferencesForm = ({ settings, onFormSubmit, canInherit }: Ema
   return (
     <Form {...form}>
       <form onSubmit={handleFormSubmit}>
-        <fieldset className="flex h-full max-w-2xl flex-col gap-y-6" disabled={form.formState.isSubmitting}>
+        <fieldset className="flex h-full flex-col gap-y-6" disabled={form.formState.isSubmitting}>
           {organisation.organisationClaim.flags.emailDomains && (
             <FormField
               control={form.control}
@@ -122,10 +135,12 @@ export const EmailPreferencesForm = ({ settings, onFormSubmit, canInherit }: Ema
             control={form.control}
             name="emailReplyTo"
             render={({ field }) => (
-              <FormItem>
-                <FormLabel>
-                  <Trans>Reply to email</Trans>
-                </FormLabel>
+              <InheritableField
+                canInherit={canInherit}
+                isInherited={field.value === null}
+                label={<Trans>Reply to email</Trans>}
+                testId="email-reply-to"
+              >
                 <FormControl>
                   <Input
                     {...field}
@@ -146,7 +161,7 @@ export const EmailPreferencesForm = ({ settings, onFormSubmit, canInherit }: Ema
                     </span>
                   )}
                 </FormDescription>
-              </FormItem>
+              </InheritableField>
             )}
           />
 
@@ -170,10 +185,13 @@ export const EmailPreferencesForm = ({ settings, onFormSubmit, canInherit }: Ema
             control={form.control}
             name="emailDocumentSettings"
             render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormLabel>
-                  <Trans>Default Email Settings</Trans>
-                </FormLabel>
+              <InheritableField
+                className="flex-1"
+                canInherit={canInherit}
+                isInherited={field.value === null}
+                label={<Trans>Default Email Settings</Trans>}
+                testId="email-document-settings"
+              >
                 {canInherit && (
                   <Select
                     value={field.value === null ? 'INHERIT' : 'CONTROLLED'}
@@ -212,10 +230,83 @@ export const EmailPreferencesForm = ({ settings, onFormSubmit, canInherit }: Ema
                     settings will not affect existing documents or templates.
                   </Trans>
                 </FormDescription>
-              </FormItem>
+              </InheritableField>
             )}
           />
 
+          {!isPersonalOrganisation && (
+            <FormField
+              control={form.control}
+              name="includeSenderDetails"
+              render={({ field }) => (
+                <InheritableField
+                  className="flex-1"
+                  canInherit={canInherit}
+                  isInherited={field.value === null}
+                  label={<Trans>Send on Behalf of Team</Trans>}
+                  testId="include-sender-details"
+                >
+                  <FormControl>
+                    <Select
+                      {...field}
+                      value={field.value === null ? '-1' : field.value.toString()}
+                      onValueChange={(value) =>
+                        field.onChange(value === 'true' ? true : value === 'false' ? false : null)
+                      }
+                    >
+                      <SelectTrigger
+                        className="bg-background text-muted-foreground"
+                        data-testid="include-sender-details-trigger"
+                      >
+                        <SelectValue />
+                      </SelectTrigger>
+
+                      <SelectContent>
+                        <SelectItem value="true">
+                          <Trans>Yes</Trans>
+                        </SelectItem>
+
+                        <SelectItem value="false">
+                          <Trans>No</Trans>
+                        </SelectItem>
+
+                        {canInherit && (
+                          <SelectItem value={'-1'}>
+                            <Trans>Inherit from organisation</Trans>
+                          </SelectItem>
+                        )}
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+
+                  <div className="pt-2">
+                    <div className="font-medium text-muted-foreground text-xs">
+                      <Trans>Preview</Trans>
+                    </div>
+
+                    <Alert variant="neutral" className="mt-1 px-2.5 py-1.5 text-sm">
+                      {field.value ? (
+                        <Trans>
+                          "{placeholderEmail}" on behalf of "Team Name" has invited you to sign "example document".
+                        </Trans>
+                      ) : (
+                        <Trans>"Team Name" has invited you to sign "example document".</Trans>
+                      )}
+                    </Alert>
+                  </div>
+
+                  <FormDescription>
+                    <Trans>
+                      Controls the formatting of the message that will be sent when inviting a recipient to sign a
+                      document. If a custom message has been provided while configuring the document, it will be used
+                      instead.
+                    </Trans>
+                  </FormDescription>
+                </InheritableField>
+              )}
+            />
+          )}
+
           <FormStickySaveBar
             isDirty={form.formState.isDirty}
             isSubmitting={form.formState.isSubmitting}

apps/remix/app/components/forms/form-sticky-save-bar.tsx

@@ -5,6 +5,22 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { AlertTriangleIcon } from 'lucide-react';
 import { type ReactNode, useEffect, useRef, useState } from 'react';
 
+const getScrollParent = (node: HTMLElement): HTMLElement | null => {
+  let current = node.parentElement;
+
+  while (current) {
+    const { overflowY } = getComputedStyle(current);
+
+    if (overflowY === 'auto' || overflowY === 'scroll') {
+      return current;
+    }
+
+    current = current.parentElement;
+  }
+
+  return null;
+};
+
 export type FormStickySaveBarProps = {
   isDirty: boolean;
   isSubmitting: boolean;
@@ -43,14 +59,18 @@ export const FormStickySaveBar = ({ isDirty, isSubmitting, onReset, resetToDefau
     }
 
     // The sentinel sits at the bar's resting position (the end of the form). While the
-    // bar is stuck to the bottom of the viewport the sentinel is scrolled past (out of
-    // view); once you reach the form's end it comes into view and the bar settles.
+    // bar is stuck to the bottom of the scroll container the sentinel is scrolled past
+    // (out of view); once you reach the form's end it comes into view and the bar settles.
+    //
+    // Observe relative to the actual scroll container (not always the viewport) so a
+    // banner shifting the page can't desync the detection from the sticky bar — both
+    // then share the same reference box.
     const observer = new IntersectionObserver(
       ([entry]) => {
         setIsStuck(!entry.isIntersecting);
       },
       {
-        root: null,
+        root: getScrollParent(sentinel),
         rootMargin: '0px 0px -24px 0px',
         threshold: 0,
       },

apps/remix/app/components/forms/inheritable-field.tsx

@@ -0,0 +1,51 @@
+import { cn } from '@documenso/ui/lib/utils';
+import { FormItem, FormLabel } from '@documenso/ui/primitives/form/form';
+import { Trans } from '@lingui/react/macro';
+import type { ReactNode } from 'react';
+
+export type InheritableFieldProps = {
+  isInherited: boolean;
+  canInherit: boolean;
+  label: ReactNode;
+  children: ReactNode;
+  className?: string;
+  testId?: string;
+};
+
+export const InheritableField = ({
+  isInherited,
+  canInherit,
+  label,
+  children,
+  className,
+  testId,
+}: InheritableFieldProps) => {
+  if (!canInherit) {
+    return (
+      <FormItem className={className}>
+        <FormLabel>{label}</FormLabel>
+        {children}
+      </FormItem>
+    );
+  }
+
+  return (
+    <FormItem className={className} data-testid={testId ? `inheritable-${testId}` : undefined}>
+      <FormLabel className="flex items-center gap-2">
+        {label}
+        <span
+          className={cn(
+            'rounded px-1.5 py-0.5 font-bold text-[9px] uppercase tracking-wide',
+            isInherited
+              ? 'bg-muted text-muted-foreground'
+              : 'bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-300',
+          )}
+          data-testid={testId ? `${testId}-status` : undefined}
+        >
+          {isInherited ? <Trans>Inherited</Trans> : <Trans>Override</Trans>}
+        </span>
+      </FormLabel>
+      {children}
+    </FormItem>
+  );
+};

apps/remix/app/components/forms/organisation-update-form.tsx

@@ -56,7 +56,7 @@ export const OrganisationUpdateForm = () => {
       await refreshSession();
 
       if (url !== organisation.url) {
-        await navigate(`/o/${url}/settings`);
+        await navigate(`/o/${url}/settings/general`);
       }
 
       toast({

apps/remix/app/components/forms/reminder-preferences-form.tsx

@@ -0,0 +1,134 @@
+import {
+  type TEnvelopeExpirationPeriod,
+  ZEnvelopeExpirationPeriod,
+} from '@documenso/lib/constants/envelope-expiration';
+import { type TEnvelopeReminderSettings, ZEnvelopeReminderSettings } from '@documenso/lib/constants/envelope-reminder';
+import { ExpirationPeriodPicker } from '@documenso/ui/components/document/expiration-period-picker';
+import { ReminderSettingsPicker } from '@documenso/ui/components/document/reminder-settings-picker';
+import { Form, FormControl, FormDescription, FormField, FormMessage } from '@documenso/ui/primitives/form/form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
+import type { TeamGlobalSettings } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { FormStickySaveBar } from './form-sticky-save-bar';
+import { InheritableField } from './inheritable-field';
+
+const ZReminderPreferencesFormSchema = z.object({
+  envelopeExpirationPeriod: ZEnvelopeExpirationPeriod.nullable(),
+  reminderSettings: ZEnvelopeReminderSettings.nullable(),
+});
+
+export type TReminderPreferencesFormSchema = {
+  envelopeExpirationPeriod: TEnvelopeExpirationPeriod | null;
+  reminderSettings: TEnvelopeReminderSettings | null;
+};
+
+type SettingsSubset = Pick<TeamGlobalSettings, 'envelopeExpirationPeriod' | 'reminderSettings'>;
+
+export type ReminderPreferencesFormProps = {
+  settings: SettingsSubset;
+  canInherit: boolean;
+  onFormSubmit: (data: TReminderPreferencesFormSchema) => Promise<void>;
+};
+
+export const ReminderPreferencesForm = ({ settings, canInherit, onFormSubmit }: ReminderPreferencesFormProps) => {
+  const { t } = useLingui();
+
+  const form = useForm<TReminderPreferencesFormSchema>({
+    defaultValues: {
+      envelopeExpirationPeriod: settings.envelopeExpirationPeriod ?? null,
+      reminderSettings: settings.reminderSettings ?? null,
+    },
+    resolver: zodResolver(ZReminderPreferencesFormSchema),
+  });
+
+  const handleFormSubmit = form.handleSubmit(async (data) => {
+    try {
+      await onFormSubmit(data);
+    } catch {
+      // The page handler surfaces its own error toast. Keep the form dirty so
+      // the save bar stays visible and the user can retry.
+      return;
+    }
+
+    form.reset(data);
+  });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={handleFormSubmit}>
+        <fieldset className="flex h-full flex-col gap-y-6" disabled={form.formState.isSubmitting}>
+          <FormField
+            control={form.control}
+            name="envelopeExpirationPeriod"
+            render={({ field }) => (
+              <InheritableField
+                className="flex-1"
+                canInherit={canInherit}
+                isInherited={field.value === null}
+                label={<Trans>Default Envelope Expiration</Trans>}
+                testId="envelope-expiration-period"
+              >
+                <FormControl>
+                  <ExpirationPeriodPicker
+                    value={field.value}
+                    onChange={field.onChange}
+                    inheritLabel={canInherit ? t`Inherit from organisation` : undefined}
+                  />
+                </FormControl>
+
+                <FormDescription>
+                  <Trans>
+                    Controls how long recipients have to complete signing before the document expires. After expiration,
+                    recipients can no longer sign the document.
+                  </Trans>
+                </FormDescription>
+
+                <FormMessage />
+              </InheritableField>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="reminderSettings"
+            render={({ field }) => (
+              <InheritableField
+                className="flex-1"
+                canInherit={canInherit}
+                isInherited={field.value === null}
+                label={<Trans>Default Signing Reminders</Trans>}
+                testId="reminder-settings"
+              >
+                <FormControl>
+                  <ReminderSettingsPicker
+                    value={field.value}
+                    onChange={field.onChange}
+                    inheritLabel={canInherit ? t`Inherit from organisation` : undefined}
+                  />
+                </FormControl>
+
+                <FormDescription>
+                  <Trans>
+                    Controls when and how often reminder emails are sent to recipients who have not yet completed
+                    signing.
+                  </Trans>
+                </FormDescription>
+
+                <FormMessage />
+              </InheritableField>
+            )}
+          />
+
+          <FormStickySaveBar
+            isDirty={form.formState.isDirty}
+            isSubmitting={form.formState.isSubmitting}
+            onReset={() => form.reset()}
+          />
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/forms/team-update-form.tsx

@@ -65,7 +65,7 @@ export const TeamUpdateForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogPr
       });
 
       if (url !== teamUrl) {
-        await navigate(`/t/${url}/settings`);
+        await navigate(`/t/${url}/settings/general`);
       }
     } catch (err) {
       const error = AppError.parseError(err);

apps/remix/app/components/general/app-command-menu.tsx

@@ -287,7 +287,7 @@ export const AppCommandMenu = ({ open, onOpenChange }: AppCommandMenuProps) => {
       {
         id: 'settings-main',
         label: msg`Settings`,
-        path: '/settings',
+        path: '/settings/profile',
         icon: SettingsIcon,
         shortcut: SETTINGS_PAGE_SHORTCUT.replace('+', ''),
       },
@@ -389,7 +389,7 @@ export const AppCommandMenu = ({ open, onOpenChange }: AppCommandMenuProps) => {
 
   const formatChipCount = (count: number, isCapped: boolean) => (isCapped ? `≥${count}` : `${count}`);
 
-  const goToSettings = useCallback(() => push('/settings'), [push]);
+  const goToSettings = useCallback(() => push('/settings/profile'), [push]);
   const goToDocuments = useCallback(() => {
     if (teamUrl) {
       push(`/t/${teamUrl}/documents?status=ALL`);

apps/remix/app/components/general/app-header.tsx

@@ -1,5 +1,3 @@
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { getRootHref } from '@documenso/lib/utils/params';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -14,16 +12,16 @@ import { BrandingLogo } from '~/components/general/branding-logo';
 import { AppCommandMenu } from './app-command-menu';
 import { AppNavDesktop } from './app-nav-desktop';
 import { AppNavMobile } from './app-nav-mobile';
-import { MenuSwitcher } from './menu-switcher';
 import { OrgMenuSwitcher } from './org-menu-switcher';
 
-export type HeaderProps = HTMLAttributes<HTMLDivElement>;
+export type HeaderProps = HTMLAttributes<HTMLDivElement> & {
+  /** Span the full viewport width instead of the centered max-w-screen-xl container. */
+  fullWidth?: boolean;
+};
 
-export const Header = ({ className, ...props }: HeaderProps) => {
+export const Header = ({ className, fullWidth = false, ...props }: HeaderProps) => {
   const params = useParams();
 
-  const { organisations } = useSession();
-
   const [isCommandMenuOpen, setIsCommandMenuOpen] = useState(false);
   const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
   const [scrollY, setScrollY] = useState(0);
@@ -51,12 +49,18 @@ export const Header = ({ className, ...props }: HeaderProps) => {
     <header
       className={cn(
         'sticky top-0 z-[60] flex h-16 w-full items-center border-b border-b-transparent bg-background/95 backdrop-blur duration-200 supports-backdrop-blur:bg-background/60',
-        scrollY > 5 && 'border-b-border',
+        (scrollY > 5 || fullWidth) && 'border-b-border',
         className,
       )}
       {...props}
     >
-      <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-x-4 px-4 md:justify-normal md:px-8">
+      <div
+        className={cn(
+          'mx-auto flex w-full items-center justify-between gap-x-4 px-4 md:justify-normal',
+          fullWidth ? 'md:px-6' : 'max-w-screen-xl md:px-8',
+        )}
+        data-testid="app-header-container"
+      >
         <Link
           to={getRootHref(params)}
           className="hidden rounded-md ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 md:inline"
@@ -78,7 +82,9 @@ export const Header = ({ className, ...props }: HeaderProps) => {
           </Link>
         </Button>
 
-        <div className="md:ml-4">{isPersonalLayout(organisations) ? <MenuSwitcher /> : <OrgMenuSwitcher />}</div>
+        <div className="md:ml-4">
+          <OrgMenuSwitcher />
+        </div>
 
         <div className="flex flex-row items-center space-x-4 md:hidden">
           <button onClick={() => setIsCommandMenuOpen(true)}>

apps/remix/app/components/general/app-nav-desktop.tsx

@@ -1,5 +1,4 @@
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { msg } from '@lingui/core/macro';
@@ -37,8 +36,8 @@ export const AppNavDesktop = ({ className, setIsCommandMenuOpen, ...props }: App
   const menuNavigationLinks = useMemo(() => {
     let teamUrl = currentTeam?.url || null;
 
-    if (!teamUrl && isPersonalLayout(organisations)) {
-      teamUrl = organisations[0].teams[0]?.url || null;
+    if (!teamUrl && organisations.length === 1 && organisations[0].teams.length === 1) {
+      teamUrl = organisations[0].teams[0].url;
     }
 
     if (!teamUrl) {

apps/remix/app/components/general/app-nav-mobile.tsx

@@ -1,7 +1,6 @@
 import LogoImage from '@documenso/assets/logo.png';
 import { authClient } from '@documenso/auth/client';
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
 import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher';
@@ -40,8 +39,8 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
   const menuNavigationLinks = useMemo(() => {
     let teamUrl = currentTeam?.url || null;
 
-    if (!teamUrl && isPersonalLayout(organisations)) {
-      teamUrl = organisations[0].teams[0]?.url || null;
+    if (!teamUrl && organisations.length === 1 && organisations[0].teams.length === 1) {
+      teamUrl = organisations[0].teams[0].url;
     }
 
     if (!teamUrl) {

apps/remix/app/components/general/billing-plans.tsx

@@ -317,7 +317,6 @@ export const IndividualPersonalLayoutCheckoutButton = ({
       const createSubscriptionResponse = await createSubscription({
         organisationId: organisations[0].id,
         priceId,
-        isPersonalLayoutMode: true,
       });
 
       window.location.href = createSubscriptionResponse.redirectUrl;

apps/remix/app/components/general/direct-template/direct-template-signing-form.tsx

@@ -11,7 +11,6 @@ import {
 import type { TTemplate } from '@documenso/lib/types/template';
 import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
-import { getDictatableNextRecipient } from '@documenso/lib/utils/recipient-groups';
 import type {
   TRemovedSignedFieldWithTokenMutationSchema,
   TSignFieldWithTokenMutationSchema,
@@ -224,12 +223,27 @@ export const DirectTemplateSigningForm = ({
       return undefined;
     }
 
-    return (
-      getDictatableNextRecipient({
-        recipients: template.recipients,
-        currentRecipientId: directRecipient.id,
-      }) ?? undefined
-    );
+    const sortedRecipients = template.recipients.sort((a, b) => {
+      // Sort by signingOrder first (nulls last), then by id
+      if (a.signingOrder === null && b.signingOrder === null) {
+        return a.id - b.id;
+      }
+      if (a.signingOrder === null) {
+        return 1;
+      }
+      if (b.signingOrder === null) {
+        return -1;
+      }
+      if (a.signingOrder === b.signingOrder) {
+        return a.id - b.id;
+      }
+      return a.signingOrder - b.signingOrder;
+    });
+
+    const currentIndex = sortedRecipients.findIndex((r) => r.id === directRecipient.id);
+    return currentIndex !== -1 && currentIndex < sortedRecipients.length - 1
+      ? sortedRecipients[currentIndex + 1]
+      : undefined;
   }, [template.templateMeta?.signingOrder, template.recipients, directRecipient.id]);
 
   return (

apps/remix/app/components/general/document-signing/document-signing-page-view-v1.tsx

@@ -15,7 +15,6 @@ import type { CompletedField } from '@documenso/lib/types/fields';
 import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { getDocumentDataUrlForPdfViewer } from '@documenso/lib/utils/envelope-download';
 import { validateFieldsInserted } from '@documenso/lib/utils/fields';
-import { getDictatableNextRecipient } from '@documenso/lib/utils/recipient-groups';
 import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
 import { trpc } from '@documenso/trpc/react';
@@ -144,11 +143,31 @@ export const DocumentSigningPageViewV1 = ({
   const targetSigner = recipient.role === RecipientRole.ASSISTANT && selectedSigner ? selectedSigner : null;
 
   const nextRecipient = useMemo(() => {
-    if (documentMeta?.signingOrder !== 'SEQUENTIAL') {
+    if (!documentMeta?.signingOrder || documentMeta.signingOrder !== 'SEQUENTIAL') {
       return undefined;
     }
 
-    return getDictatableNextRecipient({ recipients: allRecipients, currentRecipientId: recipient.id }) ?? undefined;
+    const sortedRecipients = [...allRecipients].sort((a, b) => {
+      // Sort by signingOrder first (nulls last), then by id
+      if (a.signingOrder === null && b.signingOrder === null) {
+        return a.id - b.id;
+      }
+      if (a.signingOrder === null) {
+        return 1;
+      }
+      if (b.signingOrder === null) {
+        return -1;
+      }
+      if (a.signingOrder === b.signingOrder) {
+        return a.id - b.id;
+      }
+      return a.signingOrder - b.signingOrder;
+    });
+
+    const currentIndex = sortedRecipients.findIndex((r) => r.id === recipient.id);
+    return currentIndex !== -1 && currentIndex < sortedRecipients.length - 1
+      ? sortedRecipients[currentIndex + 1]
+      : undefined;
   }, [document.documentMeta?.signingOrder, allRecipients, recipient.id]);
 
   const pendingFields = fieldsRequiringValidation.filter((field) => !field.inserted);

apps/remix/app/components/general/document-signing/envelope-signing-provider.tsx

@@ -6,7 +6,6 @@ import type { EnvelopeForSigningResponse } from '@documenso/lib/server-only/enve
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { isFieldUnsignedAndRequired, isRequiredField } from '@documenso/lib/utils/advanced-fields-helpers';
 import { extractFieldInsertionValues } from '@documenso/lib/utils/envelope-signing';
-import { getDictatableNextRecipient } from '@documenso/lib/utils/recipient-groups';
 import { trpc } from '@documenso/trpc/react';
 import type { TSignEnvelopeFieldValue } from '@documenso/trpc/server/envelope-router/sign-envelope-field.types';
 import { EnvelopeType, type Field, FieldType, type Recipient, RecipientRole, SigningStatus } from '@prisma/client';
@@ -291,14 +290,32 @@ export const EnvelopeSigningProvider = ({
     .filter((field) => field.inserted);
 
   const nextRecipient = useMemo(() => {
-    if (envelope.documentMeta.signingOrder !== 'SEQUENTIAL') {
+    if (!envelope.documentMeta.signingOrder || envelope.documentMeta.signingOrder !== 'SEQUENTIAL') {
       return null;
     }
 
-    return getDictatableNextRecipient({
-      recipients: envelope.recipients,
-      currentRecipientId: recipient.id,
+    const sortedRecipients = [...envelope.recipients].sort((a, b) => {
+      // Sort by signingOrder first (nulls last), then by id
+      if (a.signingOrder === null && b.signingOrder === null) {
+        return a.id - b.id;
+      }
+      if (a.signingOrder === null) {
+        return 1;
+      }
+      if (b.signingOrder === null) {
+        return -1;
+      }
+      if (a.signingOrder === b.signingOrder) {
+        return a.id - b.id;
+      }
+      return a.signingOrder - b.signingOrder;
     });
+
+    const currentIndex = sortedRecipients.findIndex((r) => r.id === recipient.id);
+
+    return currentIndex !== -1 && currentIndex < sortedRecipients.length - 1
+      ? sortedRecipients[currentIndex + 1]
+      : null;
   }, [envelope.documentMeta?.signingOrder, envelope.recipients, recipient.id]);
 
   const signField = async (

apps/remix/app/components/general/envelope-editor/envelope-editor-recipient-form.tsx

@@ -1,30 +1,42 @@
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
-import {
-  updateEditorSigners,
-  ZEditorRecipientsFormSchema,
-} from '@documenso/lib/client-only/hooks/use-editor-recipients';
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { ZEditorRecipientsFormSchema } from '@documenso/lib/client-only/hooks/use-editor-recipients';
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 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 { groupRecipientsBySigningOrder, normalizeGroupedSigningOrders } from '@documenso/lib/utils/recipient-groups';
-import { canEditorRecipientBeModified } from '@documenso/lib/utils/recipients';
+import {
+  isAssistantLastSigner,
+  isCcRecipient,
+  normalizeRecipientSigningOrders,
+  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 {
+  RecipientAutoCompleteInput,
+  type RecipientAutoCompleteOption,
+} from '@documenso/ui/components/recipient/recipient-autocomplete-input';
+import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
 import { cn } from '@documenso/ui/lib/utils';
 import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@documenso/ui/primitives/card';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import { SigningOrderConfirmation } from '@documenso/ui/primitives/document-flow/signing-order-confirmation';
-import { Form, FormControl, FormField, FormItem, FormLabel } from '@documenso/ui/primitives/form/form';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
 import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
+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 { DragDropContext, Draggable, Droppable, type DropResult, type SensorAPI } from '@hello-pangea/dnd';
 import { plural } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import { DocumentSigningOrder, RecipientRole, SendStatus } from '@prisma/client';
-import { HelpCircleIcon, PlusIcon, SparklesIcon } from 'lucide-react';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { DocumentSigningOrder, EnvelopeType, RecipientRole, SendStatus } from '@prisma/client';
+import { motion } from 'framer-motion';
+import { GripVerticalIcon, HelpCircleIcon, PlusIcon, SparklesIcon, TrashIcon } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useFieldArray, useWatch } from 'react-hook-form';
 import { useRevalidator, useSearchParams } from 'react-router';
@@ -34,8 +46,6 @@ import { AiFeaturesEnableDialog } from '~/components/dialogs/ai-features-enable-
 import { AiRecipientDetectionDialog } from '~/components/dialogs/ai-recipient-detection-dialog';
 import { useCurrentTeam } from '~/providers/team';
 
-import { RecipientStepList } from './recipient-step-list';
-
 export const EnvelopeEditorRecipientForm = () => {
   const { envelope, setRecipientsDebounced, updateEnvelope, editorRecipients, isEmbedded, editorConfig } =
     useCurrentEnvelopeEditor();
@@ -43,6 +53,7 @@ export const EnvelopeEditorRecipientForm = () => {
   const organisation = useCurrentOrganisation();
   const team = useCurrentTeam();
 
+  const { t } = useLingui();
   const { toast } = useToast();
   const { remaining } = useLimits();
   const { sessionData } = useOptionalSession();
@@ -50,6 +61,7 @@ export const EnvelopeEditorRecipientForm = () => {
   const user = sessionData?.user;
 
   const [searchParams, setSearchParams] = useSearchParams();
+  const [recipientSearchQuery, setRecipientSearchQuery] = useState('');
   const [isAiEnableDialogOpen, setIsAiEnableDialogOpen] = useState(false);
 
   // AI recipient detection dialog state
@@ -95,8 +107,23 @@ export const EnvelopeEditorRecipientForm = () => {
     });
   };
 
+  const debouncedRecipientSearchQuery = useDebouncedValue(recipientSearchQuery, 500);
+
+  const $sensorApi = useRef<SensorAPI | null>(null);
   const isFirstRender = useRef(true);
-  const { recipients } = envelope;
+  const { recipients, fields } = envelope;
+
+  const { data: recipientSuggestionsData, isLoading } = trpc.recipient.suggestions.find.useQuery(
+    {
+      query: debouncedRecipientSearchQuery,
+    },
+    {
+      enabled: debouncedRecipientSearchQuery.length > 1 && !isEmbedded,
+      retry: false,
+    },
+  );
+
+  const recipientSuggestions = recipientSuggestionsData?.results || [];
 
   const { form } = editorRecipients;
 
@@ -134,20 +161,17 @@ export const EnvelopeEditorRecipientForm = () => {
   }, [watchedSigners]);
 
   const normalizeSigningOrders = (signers: typeof watchedSigners) => {
-    return normalizeGroupedSigningOrders(signers, (signer) => canRecipientBeModified(signer.id));
+    return normalizeRecipientSigningOrders(signers, (signer) => canRecipientBeModified(signer.id));
   };
 
-  // Keep a mounted field array for `signers` so react-hook-form reconciles
-  // whole-array `setValue` calls atomically. Without it, reordering the array
-  // leaves stale partial entries in watched values (missing email/name/role),
-  // which breaks validation and the autosave sync.
-  useFieldArray({
+  const activeRecipientCount = watchedSigners.filter((signer) => !isCcRecipient(signer)).length;
+
+  const { fields: signers, remove: removeSigner } = useFieldArray({
     control,
     name: 'signers',
+    keyName: 'nativeId',
   });
 
-  const stepCount = useMemo(() => groupRecipientsBySigningOrder(watchedSigners).steps.length, [watchedSigners]);
-
   const emptySignerIndex = watchedSigners.findIndex(
     (signer) =>
       !signer.name && !signer.email && envelope.fields.filter((field) => field.recipientId === signer.id).length === 0,
@@ -159,22 +183,39 @@ export const EnvelopeEditorRecipientForm = () => {
 
   const hasCurrentEditorInfo = Boolean(currentEditorEmail || currentEditorName);
 
-  // Note: Watched signer entries can be transiently partial while react-hook-form
-  // re-registers reordered array fields, so guard optional access here.
   const isUserAlreadyARecipient = watchedSigners.some(
-    (signer) => Boolean(currentEditorEmail) && signer.email?.toLowerCase() === currentEditorEmail?.toLowerCase(),
+    (signer) => signer.email.toLowerCase() === currentEditorEmail?.toLowerCase(),
   );
 
   const hasDocumentBeenSent = recipients.some(
     (recipient) => recipient.role !== RecipientRole.CC && recipient.sendStatus === SendStatus.SENT,
   );
 
-  const canRecipientBeModified = (recipientId?: number) => canEditorRecipientBeModified(envelope, recipientId);
+  const canRecipientBeModified = (recipientId?: number) => {
+    if (envelope.type === EnvelopeType.TEMPLATE) {
+      return true;
+    }
+
+    if (recipientId === undefined) {
+      return true;
+    }
+
+    const recipient = recipients.find((recipient) => recipient.id === recipientId);
+
+    if (!recipient) {
+      return false;
+    }
+
+    return utilCanRecipientBeModified(recipient, fields);
+  };
 
   const appendNormalizedSigner = (signer: (typeof watchedSigners)[number], shouldFocus = false) => {
     const updatedSigners = normalizeSigningOrders([...form.getValues('signers'), signer]);
 
-    updateEditorSigners(form, updatedSigners);
+    form.setValue('signers', updatedSigners, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
 
     if (shouldFocus) {
       const signerIndex = updatedSigners.findIndex((updatedSigner) => updatedSigner.formId === signer.formId);
@@ -192,7 +233,7 @@ export const EnvelopeEditorRecipientForm = () => {
       email: '',
       role: RecipientRole.SIGNER,
       actionAuth: [],
-      signingOrder: stepCount + 1,
+      signingOrder: activeRecipientCount + 1,
     });
   };
 
@@ -204,8 +245,8 @@ export const EnvelopeEditorRecipientForm = () => {
 
     // If the only signer is the default empty signer lets just replace it with the detected recipients
     if (currentSigners.length === 1 && !currentSigners[0].name && !currentSigners[0].email) {
-      updateEditorSigners(
-        form,
+      form.setValue(
+        'signers',
         detectedRecipients.map((recipient, index) => ({
           formId: nanoid(12),
           name: recipient.name,
@@ -214,6 +255,10 @@ export const EnvelopeEditorRecipientForm = () => {
           actionAuth: [],
           signingOrder: index + 1,
         })),
+        {
+          shouldValidate: true,
+          shouldDirty: true,
+        },
       );
 
       return;
@@ -240,7 +285,10 @@ export const EnvelopeEditorRecipientForm = () => {
       nextSigningOrder += 1;
     }
 
-    updateEditorSigners(form, normalizeSigningOrders(currentSigners));
+    form.setValue('signers', normalizeSigningOrders(currentSigners), {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
 
     toast({
       title: plural(detectedRecipients.length, {
@@ -254,6 +302,32 @@ export const EnvelopeEditorRecipientForm = () => {
     });
   };
 
+  const onRemoveSigner = (index: number) => {
+    const signer = signers[index];
+
+    if (!canRecipientBeModified(signer.id)) {
+      toast({
+        title: t`Cannot remove signer`,
+        description: t`This signer has already signed the document.`,
+        variant: 'destructive',
+      });
+
+      return;
+    }
+
+    const formStateIndex = form.getValues('signers').findIndex((s) => s.formId === signer.formId);
+    if (formStateIndex !== -1) {
+      removeSigner(formStateIndex);
+
+      const updatedSigners = form.getValues('signers').filter((s) => s.formId !== signer.formId);
+
+      form.setValue('signers', normalizeSigningOrders(updatedSigners), {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+    }
+  };
+
   const onAddSelfSigner = () => {
     if (emptySignerIndex !== -1) {
       setValue(`signers.${emptySignerIndex}.name`, currentEditorName ?? '', {
@@ -274,7 +348,7 @@ export const EnvelopeEditorRecipientForm = () => {
           email: currentEditorEmail ?? '',
           role: RecipientRole.SIGNER,
           actionAuth: [],
-          signingOrder: stepCount + 1,
+          signingOrder: activeRecipientCount + 1,
         },
         true,
       );
@@ -283,6 +357,142 @@ export const EnvelopeEditorRecipientForm = () => {
     }
   };
 
+  const handleRecipientAutoCompleteSelect = (index: number, suggestion: RecipientAutoCompleteOption) => {
+    setValue(`signers.${index}.email`, suggestion.email, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+    setValue(`signers.${index}.name`, suggestion.name || '', {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+  };
+
+  const onDragEnd = useCallback(
+    async (result: DropResult) => {
+      if (!result.destination) {
+        return;
+      }
+
+      const items = Array.from(watchedSigners);
+      const [reorderedSigner] = items.splice(result.source.index, 1);
+
+      // Find next valid position
+      let insertIndex = result.destination.index;
+      while (insertIndex < items.length && !canRecipientBeModified(items[insertIndex].id)) {
+        insertIndex++;
+      }
+
+      items.splice(insertIndex, 0, reorderedSigner);
+
+      const updatedSigners = normalizeSigningOrders(items);
+
+      form.setValue('signers', updatedSigners, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+
+      if (isAssistantLastSigner(updatedSigners)) {
+        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.`,
+        });
+      }
+
+      await form.trigger('signers');
+    },
+    [form, canRecipientBeModified, watchedSigners, toast],
+  );
+
+  const handleRoleChange = useCallback(
+    (index: number, role: RecipientRole) => {
+      const currentSigners = form.getValues('signers');
+      const signingOrder = form.getValues('signingOrder');
+
+      // Handle parallel to sequential conversion for assistants
+      if (role === RecipientRole.ASSISTANT && signingOrder === DocumentSigningOrder.PARALLEL) {
+        form.setValue('signingOrder', DocumentSigningOrder.SEQUENTIAL, {
+          shouldValidate: true,
+          shouldDirty: true,
+        });
+        toast({
+          title: t`Signing order is enabled.`,
+          description: t`You cannot add assistants when signing order is disabled.`,
+          variant: 'destructive',
+        });
+        return;
+      }
+
+      const updatedSigners = normalizeSigningOrders(
+        currentSigners.map((signer, idx) => ({
+          ...signer,
+          role: idx === index ? role : signer.role,
+        })),
+      );
+
+      form.setValue('signers', updatedSigners, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+
+      if (role === RecipientRole.ASSISTANT && isAssistantLastSigner(updatedSigners)) {
+        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.`,
+        });
+      }
+    },
+    [form, toast, canRecipientBeModified],
+  );
+
+  const handleSigningOrderChange = useCallback(
+    (index: number, newOrderString: string) => {
+      const trimmedOrderString = newOrderString.trim();
+      if (!trimmedOrderString) {
+        return;
+      }
+
+      const newOrder = Number(trimmedOrderString);
+      if (!Number.isInteger(newOrder) || newOrder < 1) {
+        return;
+      }
+
+      const currentSigners = form.getValues('signers');
+      const signer = currentSigners[index];
+
+      if (isCcRecipient(signer)) {
+        return;
+      }
+
+      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]);
+
+      form.setValue('signers', updatedSigners, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+
+      if (signer.role === RecipientRole.ASSISTANT && isAssistantLastSigner(updatedSigners)) {
+        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.`,
+        });
+      }
+    },
+    [form, canRecipientBeModified, toast],
+  );
+
   const handleSigningOrderDisable = useCallback(() => {
     setShowSigningOrderConfirmation(false);
 
@@ -294,8 +504,10 @@ export const EnvelopeEditorRecipientForm = () => {
       })),
     );
 
-    updateEditorSigners(form, updatedSigners);
-
+    form.setValue('signers', updatedSigners, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
     form.setValue('signingOrder', DocumentSigningOrder.PARALLEL, {
       shouldValidate: true,
       shouldDirty: true,
@@ -376,7 +588,7 @@ export const EnvelopeEditorRecipientForm = () => {
   }, [formValues]);
 
   const recipientCountLimit = organisation.organisationClaim.recipientCount;
-  const isOverRecipientLimit = recipientCountLimit > 0 && watchedSigners.length > recipientCountLimit;
+  const isOverRecipientLimit = recipientCountLimit > 0 && signers.length > recipientCountLimit;
 
   return (
     <Card backdropBlur={false} className="border">
@@ -432,7 +644,7 @@ export const EnvelopeEditorRecipientForm = () => {
             type="button"
             className="flex-1"
             size="sm"
-            disabled={isSubmitting || watchedSigners.length >= remaining.recipients}
+            disabled={isSubmitting || signers.length >= remaining.recipients}
             onClick={() => onAddSigner()}
           >
             <PlusIcon className="mr-1 -ml-1 h-5 w-5" />
@@ -582,7 +794,287 @@ export const EnvelopeEditorRecipientForm = () => {
             )}
           </div>
 
-          <RecipientStepList showAdvancedSettings={showAdvancedSettings} />
+          <DragDropContext
+            onDragEnd={onDragEnd}
+            sensors={[
+              (api: SensorAPI) => {
+                $sensorApi.current = api;
+              },
+            ]}
+          >
+            <Droppable droppableId="signers">
+              {(provided) => (
+                <div {...provided.droppableProps} ref={provided.innerRef} className="flex w-full flex-col gap-y-2">
+                  {signers.map((signer, index) => {
+                    const isDirectRecipient =
+                      envelope.type === EnvelopeType.TEMPLATE &&
+                      envelope.directLink !== null &&
+                      signer.id === envelope.directLink.directTemplateRecipientId;
+
+                    return (
+                      <Draggable
+                        key={`${signer.nativeId}-${signer.signingOrder}`}
+                        draggableId={signer['nativeId']}
+                        index={index}
+                        isDragDisabled={
+                          !isSigningOrderSequential ||
+                          isSubmitting ||
+                          isCcRecipient(signer) ||
+                          !canRecipientBeModified(signer.id) ||
+                          !signer.signingOrder
+                        }
+                      >
+                        {(provided, snapshot) => (
+                          <div
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                            className={cn('py-1', {
+                              'pointer-events-none rounded-md bg-widget-foreground pt-2': snapshot.isDragging,
+                            })}
+                          >
+                            <motion.fieldset
+                              data-native-id={signer.id}
+                              disabled={isSubmitting || !canRecipientBeModified(signer.id)}
+                              className={cn('pb-2', {
+                                'border-b pb-4': showAdvancedSettings && index !== signers.length - 1,
+                                'pt-2': showAdvancedSettings && index === 0,
+                                'pr-3': isSigningOrderSequential,
+                              })}
+                            >
+                              <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) && (
+                                  <FormField
+                                    control={form.control}
+                                    name={`signers.${index}.signingOrder`}
+                                    render={({ field }) => (
+                                      <FormItem
+                                        className={cn('mt-auto flex items-center gap-x-1 space-y-0', {
+                                          'mb-6':
+                                            form.formState.errors.signers?.[index] &&
+                                            !form.formState.errors.signers[index]?.signingOrder,
+                                        })}
+                                      >
+                                        <GripVerticalIcon className="h-5 w-5 flex-shrink-0 opacity-40" />
+                                        <FormControl>
+                                          <Input
+                                            type="number"
+                                            max={activeRecipientCount}
+                                            data-testid="signing-order-input"
+                                            className={cn(
+                                              'w-10 text-center',
+                                              '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+                                            )}
+                                            {...field}
+                                            onChange={(e) => {
+                                              field.onChange(e);
+                                              handleSigningOrderChange(index, e.target.value);
+                                            }}
+                                            onBlur={(e) => {
+                                              field.onBlur();
+                                              handleSigningOrderChange(index, e.target.value);
+                                            }}
+                                            disabled={
+                                              snapshot.isDragging || isSubmitting || !canRecipientBeModified(signer.id)
+                                            }
+                                          />
+                                        </FormControl>
+                                        <FormMessage />
+                                      </FormItem>
+                                    )}
+                                  />
+                                )}
+
+                                <FormField
+                                  control={form.control}
+                                  name={`signers.${index}.email`}
+                                  render={({ field }) => (
+                                    <FormItem
+                                      className={cn('relative w-full', {
+                                        'mb-6':
+                                          form.formState.errors.signers?.[index] &&
+                                          !form.formState.errors.signers[index]?.email,
+                                      })}
+                                    >
+                                      {!showAdvancedSettings && index === 0 && (
+                                        <FormLabel>
+                                          <Trans>Email</Trans>
+                                        </FormLabel>
+                                      )}
+
+                                      <FormControl>
+                                        <RecipientAutoCompleteInput
+                                          type="email"
+                                          placeholder={t`Email`}
+                                          value={field.value}
+                                          disabled={
+                                            snapshot.isDragging ||
+                                            isSubmitting ||
+                                            !canRecipientBeModified(signer.id) ||
+                                            isDirectRecipient
+                                          }
+                                          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
+                                  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`Recipient ${index + 1}`}
+                                          {...field}
+                                          disabled={
+                                            snapshot.isDragging ||
+                                            isSubmitting ||
+                                            !canRecipientBeModified(signer.id) ||
+                                            isDirectRecipient
+                                          }
+                                          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}
+                                          hideAssistantRole={!editorConfig.recipients?.allowAssistantRole}
+                                          hideCCerRole={!editorConfig.recipients?.allowCCerRole}
+                                          hideViewerRole={!editorConfig.recipients?.allowViewerRole}
+                                          hideApproverRole={!editorConfig.recipients?.allowApproverRole}
+                                          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
+                                  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 ||
+                                    isDirectRecipient
+                                  }
+                                  onClick={() => onRemoveSigner(index)}
+                                >
+                                  <TrashIcon className="h-4 w-4" />
+                                </Button>
+                              </div>
+
+                              {showAdvancedSettings && organisation.organisationClaim.flags.cfr21 && (
+                                <FormField
+                                  control={form.control}
+                                  name={`signers.${index}.actionAuth`}
+                                  render={({ field }) => (
+                                    <FormItem
+                                      className={cn('mt-2 w-full', {
+                                        'mb-6':
+                                          form.formState.errors.signers?.[index] &&
+                                          !form.formState.errors.signers[index]?.actionAuth,
+                                        'pl-6': isSigningOrderSequential,
+                                      })}
+                                    >
+                                      <FormControl>
+                                        <RecipientActionAuthSelect
+                                          {...field}
+                                          onValueChange={field.onChange}
+                                          disabled={
+                                            snapshot.isDragging || isSubmitting || !canRecipientBeModified(signer.id)
+                                          }
+                                        />
+                                      </FormControl>
+
+                                      <FormMessage />
+                                    </FormItem>
+                                  )}
+                                />
+                              )}
+                            </motion.fieldset>
+                          </div>
+                        )}
+                      </Draggable>
+                    );
+                  })}
+
+                  {provided.placeholder}
+                </div>
+              )}
+            </Droppable>
+          </DragDropContext>
 
           <FormErrorMessage
             className="mt-2"

apps/remix/app/components/general/envelope-editor/recipient-row.tsx

@@ -1,233 +0,0 @@
-import type { TEditorRecipientsFormSchema } from '@documenso/lib/client-only/hooks/use-editor-recipients';
-import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
-import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { isCcRecipient } from '@documenso/lib/utils/recipients';
-import { RecipientActionAuthSelect } from '@documenso/ui/components/recipient/recipient-action-auth-select';
-import {
-  RecipientAutoCompleteInput,
-  type RecipientAutoCompleteOption,
-} from '@documenso/ui/components/recipient/recipient-autocomplete-input';
-import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { FormControl, FormField, FormItem, FormMessage } from '@documenso/ui/primitives/form/form';
-import type { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd';
-import { useLingui } from '@lingui/react/macro';
-import { EnvelopeType, type RecipientRole } from '@prisma/client';
-import { GripVerticalIcon, TrashIcon } from 'lucide-react';
-import { memo } from 'react';
-import { useFormContext } from 'react-hook-form';
-
-type TEditorSigner = TEditorRecipientsFormSchema['signers'][number];
-
-export type RecipientRowProps = {
-  signerIndex: number;
-  signer: TEditorSigner;
-  isSequential: boolean;
-  isInputDisabled: boolean;
-  canBeModified: boolean;
-  isRemoveDisabled: boolean;
-  showAdvancedSettings: boolean;
-  dragHandleProps?: DraggableProvidedDragHandleProps | null;
-  recipientSuggestions: RecipientAutoCompleteOption[];
-  isLoadingSuggestions: boolean;
-  onRoleChange: (signerIndex: number, role: RecipientRole) => void;
-  onRemove: (signerIndex: number) => void;
-  onAutoCompleteSelect: (signerIndex: number, suggestion: RecipientAutoCompleteOption) => void;
-  onSearchQueryChange: (query: string) => void;
-};
-
-const RecipientRowInner = ({
-  signerIndex,
-  signer,
-  isSequential,
-  isInputDisabled,
-  canBeModified,
-  isRemoveDisabled,
-  showAdvancedSettings,
-  dragHandleProps,
-  recipientSuggestions,
-  isLoadingSuggestions,
-  onRoleChange,
-  onRemove,
-  onAutoCompleteSelect,
-  onSearchQueryChange,
-}: RecipientRowProps) => {
-  const { t } = useLingui();
-
-  const { envelope, editorConfig } = useCurrentEnvelopeEditor();
-  const organisation = useCurrentOrganisation();
-
-  const form = useFormContext<TEditorRecipientsFormSchema>();
-
-  const { isSubmitting } = form.formState;
-
-  const isDirectRecipient =
-    envelope.type === EnvelopeType.TEMPLATE &&
-    envelope.directLink !== null &&
-    signer.id === envelope.directLink.directTemplateRecipientId;
-
-  const isFieldDisabled = isInputDisabled || isSubmitting || !canBeModified;
-
-  const rowErrors = form.formState.errors.signers?.[signerIndex];
-
-  return (
-    <fieldset data-native-id={signer.id} disabled={isSubmitting || !canBeModified} className="py-1">
-      <div className="flex flex-row items-center gap-x-2">
-        {isSequential && !isCcRecipient(signer) && (
-          <span
-            {...(dragHandleProps ?? {})}
-            data-testid="recipient-row-drag-handle"
-            className={cn(
-              'mt-auto -ml-1.5 flex h-10 w-8 flex-shrink-0 cursor-grab items-center justify-center rounded-md hover:bg-foreground/5 active:cursor-grabbing',
-              {
-                'mb-6': rowErrors,
-                'cursor-default hover:bg-transparent': !dragHandleProps,
-              },
-            )}
-          >
-            <GripVerticalIcon
-              className={cn('h-5 w-5 flex-shrink-0 opacity-40', {
-                'opacity-10': !dragHandleProps,
-              })}
-            />
-          </span>
-        )}
-
-        <FormField
-          control={form.control}
-          name={`signers.${signerIndex}.email`}
-          render={({ field }) => (
-            <FormItem
-              className={cn('relative w-full', {
-                'mb-6': rowErrors && !rowErrors.email,
-              })}
-            >
-              <FormControl>
-                <RecipientAutoCompleteInput
-                  type="email"
-                  placeholder={t`Email`}
-                  value={field.value}
-                  disabled={isFieldDisabled || isDirectRecipient}
-                  options={recipientSuggestions}
-                  onSelect={(suggestion) => onAutoCompleteSelect(signerIndex, suggestion)}
-                  onSearchQueryChange={(query) => {
-                    field.onChange(query);
-                    onSearchQueryChange(query);
-                  }}
-                  loading={isLoadingSuggestions}
-                  data-testid="signer-email-input"
-                  maxLength={254}
-                />
-              </FormControl>
-
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name={`signers.${signerIndex}.name`}
-          render={({ field }) => (
-            <FormItem
-              className={cn('w-full', {
-                'mb-6': rowErrors && !rowErrors.name,
-              })}
-            >
-              <FormControl>
-                <RecipientAutoCompleteInput
-                  type="text"
-                  placeholder={t`Recipient ${signerIndex + 1}`}
-                  {...field}
-                  disabled={isFieldDisabled || isDirectRecipient}
-                  options={recipientSuggestions}
-                  onSelect={(suggestion) => onAutoCompleteSelect(signerIndex, suggestion)}
-                  onSearchQueryChange={(query) => {
-                    field.onChange(query);
-                    onSearchQueryChange(query);
-                  }}
-                  loading={isLoadingSuggestions}
-                  maxLength={255}
-                />
-              </FormControl>
-
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name={`signers.${signerIndex}.role`}
-          render={({ field }) => (
-            <FormItem
-              className={cn('mt-auto w-fit', {
-                'mb-6': rowErrors && !rowErrors.role,
-              })}
-            >
-              <FormControl>
-                <RecipientRoleSelect
-                  {...field}
-                  hideAssistantRole={!editorConfig.recipients?.allowAssistantRole}
-                  hideCCerRole={!editorConfig.recipients?.allowCCerRole}
-                  hideViewerRole={!editorConfig.recipients?.allowViewerRole}
-                  hideApproverRole={!editorConfig.recipients?.allowApproverRole}
-                  isAssistantEnabled={isSequential}
-                  onValueChange={(value) => {
-                    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                    onRoleChange(signerIndex, value as RecipientRole);
-                  }}
-                  disabled={isFieldDisabled}
-                />
-              </FormControl>
-
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <Button
-          variant="ghost"
-          className={cn('mt-auto px-2', {
-            'mb-6': rowErrors,
-          })}
-          data-testid="remove-signer-button"
-          disabled={isFieldDisabled || isRemoveDisabled || isDirectRecipient}
-          onClick={() => onRemove(signerIndex)}
-        >
-          <TrashIcon className="h-4 w-4" />
-        </Button>
-      </div>
-
-      {showAdvancedSettings && organisation.organisationClaim.flags.cfr21 && (
-        <FormField
-          control={form.control}
-          name={`signers.${signerIndex}.actionAuth`}
-          render={({ field }) => (
-            <FormItem
-              className={cn('mt-2 w-full', {
-                'mb-6': rowErrors && !rowErrors.actionAuth,
-                'pl-6': isSequential,
-              })}
-            >
-              <FormControl>
-                <RecipientActionAuthSelect {...field} onValueChange={field.onChange} disabled={isFieldDisabled} />
-              </FormControl>
-
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      )}
-    </fieldset>
-  );
-};
-
-/**
- * Memoized: rows contain heavy inputs (autocomplete, role select) and would
- * otherwise re-render on every drag state change, making drags feel sluggish.
- * All callback props are stable (useCallback in the list) and `signer` object
- * identities only change when form values actually change.
- */
-export const RecipientRow = memo(RecipientRowInner);

apps/remix/app/components/general/envelope-editor/recipient-step-card.tsx

@@ -1,247 +0,0 @@
-import type { TEditorRecipientsFormSchema } from '@documenso/lib/client-only/hooks/use-editor-recipients';
-import type { RecipientStep } from '@documenso/lib/utils/recipient-groups';
-import { cn } from '@documenso/ui/lib/utils';
-import { Badge } from '@documenso/ui/primitives/badge';
-import { Button } from '@documenso/ui/primitives/button';
-import type { DraggableProvided, DraggableStateSnapshot } from '@hello-pangea/dnd';
-import { Draggable, Droppable } from '@hello-pangea/dnd';
-import { Trans } from '@lingui/react/macro';
-import { GripVerticalIcon, Users2Icon } from 'lucide-react';
-
-import { RecipientRow, type RecipientRowProps } from './recipient-row';
-
-type TEditorSigner = TEditorRecipientsFormSchema['signers'][number];
-
-export type DraggingType = 'STEP' | 'RECIPIENT' | null;
-
-/**
- * Skips the drop animation. The post-drop state update re-sorts and renumbers
- * the groups anyway, so gliding to the predicted slot first makes every drop
- * feel like it settles twice — snapping hands control to the real re-render
- * immediately instead.
- */
-const getDraggableStyle = (provided: DraggableProvided, snapshot: DraggableStateSnapshot) => {
-  if (!snapshot.isDropAnimating) {
-    return provided.draggableProps.style;
-  }
-
-  return {
-    ...provided.draggableProps.style,
-    transitionDuration: '0.001s',
-  };
-};
-
-export type RecipientStepCardSharedRowProps = Pick<
-  RecipientRowProps,
-  | 'showAdvancedSettings'
-  | 'recipientSuggestions'
-  | 'isLoadingSuggestions'
-  | 'onRoleChange'
-  | 'onRemove'
-  | 'onAutoCompleteSelect'
-  | 'onSearchQueryChange'
->;
-
-export type RecipientStepCardProps = {
-  stepIndex: number;
-  step: RecipientStep<TEditorSigner>;
-  isLastStep: boolean;
-  draggableProvided: DraggableProvided;
-  draggableSnapshot: DraggableStateSnapshot;
-  draggingType: DraggingType;
-  isStepLocked: boolean;
-  isRemoveDisabled: boolean;
-  flatIndexByFormId: Map<string, number>;
-  canSignerBeModified: (signer: TEditorSigner) => boolean;
-  isSubmitting: boolean;
-  onUngroup: (stepIndex: number) => void;
-  rowProps: RecipientStepCardSharedRowProps;
-};
-
-/**
- * The drop-zone strip rendered above each group card (and below the last one)
- * that receives recipient-row drops. Invisible until a dragged row hovers it,
- * then it shows a full-width green line marking the insertion point.
- *
- * Notes:
- * - It lives INSIDE the step's Draggable so it shifts together with the card
- *   while groups are being reordered — a static strip between draggables
- *   would stay behind while the cards around it are displaced, making group
- *   drags look broken.
- * - Its `droppableId` must stay STABLE while mounted (anchored to a formId,
- *   never a positional index): @hello-pangea/dnd does not support changing
- *   ids on mounted droppables/draggables, which silently breaks them.
- * - `type="RECIPIENT"` already scopes it to recipient-row drags, and
- *   `isDropDisabled` must not be toggled based on the active drag, as
- *   @hello-pangea/dnd snapshots it at drag start (before state updates land).
- * - It must keep a CONSTANT size: droppable geometry is captured when a drag
- *   starts, so resizing during the drag would leave the visible strip and the
- *   actual hit area in different places. Only colors may change mid-drag.
- */
-const RecipientStepGap = ({ droppableId }: { droppableId: string }) => (
-  <Droppable droppableId={droppableId} type="RECIPIENT">
-    {(provided, snapshot) => (
-      <div
-        ref={provided.innerRef}
-        {...provided.droppableProps}
-        data-testid="recipient-step-gap"
-        className={cn('flex h-6 items-center', {
-          'gap-active': snapshot.isDraggingOver,
-        })}
-      >
-        <div
-          className={cn('h-[3px] w-full rounded-full bg-primary opacity-0 transition-opacity duration-100', {
-            'opacity-100': snapshot.isDraggingOver,
-          })}
-        />
-        {provided.placeholder}
-      </div>
-    )}
-  </Droppable>
-);
-
-export const RecipientStepCard = ({
-  stepIndex,
-  step,
-  isLastStep,
-  draggableProvided,
-  draggableSnapshot,
-  draggingType,
-  isStepLocked,
-  isRemoveDisabled,
-  flatIndexByFormId,
-  canSignerBeModified,
-  isSubmitting,
-  onUngroup,
-  rowProps,
-}: RecipientStepCardProps) => {
-  const isGroup = step.members.length > 1;
-  const isCombineTarget = draggingType === 'STEP' && Boolean(draggableSnapshot.combineTargetFor);
-
-  // All droppable ids are anchored to the first member's formId (never a
-  // positional index) so they stay stable while cards are reordered —
-  // @hello-pangea/dnd does not support changing ids on mounted elements.
-  const stepAnchor = step.members[0].formId;
-
-  return (
-    <div
-      ref={draggableProvided.innerRef}
-      {...draggableProvided.draggableProps}
-      style={getDraggableStyle(draggableProvided, draggableSnapshot)}
-      className={cn({
-        'pointer-events-none': draggableSnapshot.isDragging,
-      })}
-    >
-      <RecipientStepGap droppableId={`gap-${stepAnchor}`} />
-
-      <Droppable droppableId={`step-members-${stepAnchor}`} type="RECIPIENT">
-        {(droppableProvided, droppableSnapshot) => {
-          const isJoinTarget = draggingType === 'RECIPIENT' && droppableSnapshot.isDraggingOver;
-          const isHighlighted = isCombineTarget || isJoinTarget;
-
-          return (
-            <div
-              ref={droppableProvided.innerRef}
-              {...droppableProvided.droppableProps}
-              data-testid="recipient-step-card"
-              className={cn('relative rounded-lg border bg-background px-3 pt-2 pb-1 transition-shadow', {
-                'border-primary/60 bg-primary/5': isGroup,
-                'bg-widget-foreground shadow-lg': draggableSnapshot.isDragging,
-                'border-primary ring-1 ring-primary': isHighlighted,
-              })}
-            >
-              {isHighlighted && (
-                <Badge
-                  variant="default"
-                  size="small"
-                  className="absolute -top-3 right-4 z-10 flex items-center gap-x-1 shadow-sm"
-                >
-                  <Users2Icon className="h-3 w-3" />
-                  <Trans>Release to group</Trans>
-                </Badge>
-              )}
-
-              <div className="flex flex-row items-center gap-x-1">
-                <span
-                  {...(draggableProvided.dragHandleProps ?? {})}
-                  data-testid="step-drag-handle"
-                  className={cn(
-                    '-my-1 -ml-1.5 flex h-8 w-8 flex-shrink-0 cursor-grab items-center justify-center rounded-md hover:bg-foreground/5 active:cursor-grabbing',
-                    { 'pointer-events-none opacity-30': isStepLocked },
-                  )}
-                >
-                  <GripVerticalIcon className="h-4 w-4 opacity-60" />
-                </span>
-
-                <Badge variant={isGroup ? 'default' : 'neutral'} size="small">
-                  <Trans>Group {step.order}</Trans>
-                </Badge>
-
-                {isGroup && (
-                  <>
-                    <span className="ml-1 flex items-center gap-x-1.5 text-green-700 text-xs dark:text-green-400">
-                      <Users2Icon className="h-3.5 w-3.5" />
-                      <Trans>{step.members.length} recipients · any order</Trans>
-                    </span>
-
-                    <Button
-                      type="button"
-                      variant="link"
-                      size="sm"
-                      data-testid="ungroup-step-button"
-                      className="ml-auto h-auto p-0 text-xs"
-                      disabled={isStepLocked || isSubmitting}
-                      onClick={() => onUngroup(stepIndex)}
-                    >
-                      <Trans>Ungroup</Trans>
-                    </Button>
-                  </>
-                )}
-              </div>
-
-              {step.members.map((member, memberIndex) => {
-                const signerIndex = flatIndexByFormId.get(member.formId) ?? -1;
-                const canBeModified = canSignerBeModified(member);
-
-                return (
-                  <Draggable
-                    key={member.formId}
-                    draggableId={`recipient-${member.formId}`}
-                    index={memberIndex}
-                    isDragDisabled={isSubmitting || !canBeModified}
-                  >
-                    {(memberProvided, memberSnapshot) => (
-                      <div
-                        ref={memberProvided.innerRef}
-                        {...memberProvided.draggableProps}
-                        style={getDraggableStyle(memberProvided, memberSnapshot)}
-                        className={cn({
-                          'rounded-md bg-widget-foreground shadow-lg': memberSnapshot.isDragging,
-                        })}
-                      >
-                        <RecipientRow
-                          signerIndex={signerIndex}
-                          signer={member}
-                          isSequential={true}
-                          isInputDisabled={memberSnapshot.isDragging || draggableSnapshot.isDragging}
-                          canBeModified={canBeModified}
-                          isRemoveDisabled={isRemoveDisabled}
-                          dragHandleProps={memberProvided.dragHandleProps}
-                          {...rowProps}
-                        />
-                      </div>
-                    )}
-                  </Draggable>
-                );
-              })}
-
-              {droppableProvided.placeholder}
-            </div>
-          );
-        }}
-      </Droppable>
-
-      {isLastStep && <RecipientStepGap droppableId="gap-end" />}
-    </div>
-  );
-};

apps/remix/app/components/general/envelope-editor/recipient-step-list.tsx

@@ -1,359 +0,0 @@
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
-import {
-  type TEditorRecipientsFormSchema,
-  updateEditorSigners,
-} from '@documenso/lib/client-only/hooks/use-editor-recipients';
-import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
-import {
-  extractRecipientToNewStep,
-  groupRecipientsBySigningOrder,
-  mergeSteps,
-  moveRecipientToStep,
-  normalizeGroupedSigningOrders,
-  reorderStep,
-  ungroupStep,
-} from '@documenso/lib/utils/recipient-groups';
-import { canEditorRecipientBeModified, isAssistantLastSigner } from '@documenso/lib/utils/recipients';
-import { trpc } from '@documenso/trpc/react';
-import type { RecipientAutoCompleteOption } from '@documenso/ui/components/recipient/recipient-autocomplete-input';
-import { Badge } from '@documenso/ui/primitives/badge';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-import type { BeforeCapture, DropResult } from '@hello-pangea/dnd';
-import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
-import { Trans, useLingui } from '@lingui/react/macro';
-import { DocumentSigningOrder, RecipientRole } from '@prisma/client';
-import { useCallback, useMemo, useState } from 'react';
-import { RecipientRow } from './recipient-row';
-import { type DraggingType, RecipientStepCard } from './recipient-step-card';
-
-type TEditorSigner = TEditorRecipientsFormSchema['signers'][number];
-
-export type RecipientStepListProps = {
-  showAdvancedSettings: boolean;
-};
-
-export const RecipientStepList = ({ showAdvancedSettings }: RecipientStepListProps) => {
-  const { t } = useLingui();
-  const { toast } = useToast();
-
-  const { envelope, editorRecipients, isEmbedded } = useCurrentEnvelopeEditor();
-  const { form } = editorRecipients;
-
-  const [draggingType, setDraggingType] = useState<DraggingType>(null);
-  const [recipientSearchQuery, setRecipientSearchQuery] = useState('');
-
-  const debouncedRecipientSearchQuery = useDebouncedValue(recipientSearchQuery, 500);
-
-  const { data: recipientSuggestionsData, isLoading } = trpc.recipient.suggestions.find.useQuery(
-    {
-      query: debouncedRecipientSearchQuery,
-    },
-    {
-      enabled: debouncedRecipientSearchQuery.length > 1 && !isEmbedded,
-      retry: false,
-    },
-  );
-
-  const recipientSuggestions = recipientSuggestionsData?.results || [];
-
-  const watchedSigners = form.watch('signers');
-  const isSequential = form.watch('signingOrder') === DocumentSigningOrder.SEQUENTIAL;
-  const { isSubmitting } = form.formState;
-
-  const { steps, ccRecipients } = useMemo(() => groupRecipientsBySigningOrder(watchedSigners), [watchedSigners]);
-
-  const isRemoveDisabled = watchedSigners.length === 1;
-
-  const flatIndexByFormId = useMemo(
-    () => new Map(watchedSigners.map((signer, index) => [signer.formId, index])),
-    [watchedSigners],
-  );
-
-  const canSignerBeModified = useCallback(
-    (signer: TEditorSigner) => canEditorRecipientBeModified(envelope, signer.id),
-    [envelope],
-  );
-
-  const applySigners = useCallback(
-    (updatedSigners: TEditorSigner[], options: { warnWhenAssistantLast?: boolean } = {}) => {
-      const { warnWhenAssistantLast = true } = options;
-
-      updateEditorSigners(form, updatedSigners);
-
-      if (warnWhenAssistantLast && isAssistantLastSigner(updatedSigners)) {
-        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.`,
-        });
-      }
-
-      void form.trigger('signers');
-    },
-    [form, t, toast],
-  );
-
-  const handleRoleChange = useCallback(
-    (signerIndex: number, role: RecipientRole) => {
-      const currentSigners = form.getValues('signers');
-      const signingOrder = form.getValues('signingOrder');
-
-      if (role === RecipientRole.ASSISTANT && signingOrder === DocumentSigningOrder.PARALLEL) {
-        form.setValue('signingOrder', DocumentSigningOrder.SEQUENTIAL, {
-          shouldValidate: true,
-          shouldDirty: true,
-        });
-
-        toast({
-          title: t`Signing order is enabled.`,
-          description: t`You cannot add assistants when signing order is disabled.`,
-          variant: 'destructive',
-        });
-
-        return;
-      }
-
-      const updatedSigners = normalizeGroupedSigningOrders(
-        currentSigners.map((signer, index) => ({
-          ...signer,
-          role: index === signerIndex ? role : signer.role,
-        })),
-        canSignerBeModified,
-      );
-
-      applySigners(updatedSigners, { warnWhenAssistantLast: role === RecipientRole.ASSISTANT });
-    },
-    [form, toast, t, canSignerBeModified, applySigners],
-  );
-
-  const handleRemove = useCallback(
-    (signerIndex: number) => {
-      const signer = form.getValues('signers')[signerIndex];
-
-      if (!signer) {
-        return;
-      }
-
-      if (!canSignerBeModified(signer)) {
-        toast({
-          title: t`Cannot remove signer`,
-          description: t`This signer has already signed the document.`,
-          variant: 'destructive',
-        });
-
-        return;
-      }
-
-      const updatedSigners = normalizeGroupedSigningOrders(
-        form.getValues('signers').filter((s) => s.formId !== signer.formId),
-        canSignerBeModified,
-      );
-
-      applySigners(updatedSigners, { warnWhenAssistantLast: false });
-    },
-    [form, toast, t, canSignerBeModified, applySigners],
-  );
-
-  const handleUngroup = useCallback(
-    (stepIndex: number) => {
-      applySigners(ungroupStep(form.getValues('signers'), stepIndex, canSignerBeModified));
-    },
-    [form, canSignerBeModified, applySigners],
-  );
-
-  const handleAutoCompleteSelect = useCallback(
-    (signerIndex: number, suggestion: RecipientAutoCompleteOption) => {
-      form.setValue(`signers.${signerIndex}.email`, suggestion.email, {
-        shouldValidate: true,
-        shouldDirty: true,
-      });
-      form.setValue(`signers.${signerIndex}.name`, suggestion.name || '', {
-        shouldValidate: true,
-        shouldDirty: true,
-      });
-    },
-    [form],
-  );
-
-  const onBeforeCapture = useCallback((before: BeforeCapture) => {
-    setDraggingType(before.draggableId.startsWith('step-') ? 'STEP' : 'RECIPIENT');
-  }, []);
-
-  const onDragEnd = useCallback(
-    (result: DropResult) => {
-      setDraggingType(null);
-
-      const currentSigners = form.getValues('signers');
-
-      // Drag-and-drop ids are anchored to the first member's formId so they
-      // stay stable across reorders; resolve them back to step indexes here.
-      const { steps: currentSteps } = groupRecipientsBySigningOrder(currentSigners);
-
-      const findStepIndexByAnchor = (anchorFormId: string) =>
-        currentSteps.findIndex((step) => step.members[0]?.formId === anchorFormId);
-
-      if (result.type === 'STEP') {
-        if (result.combine) {
-          const targetStepIndex = findStepIndexByAnchor(result.combine.draggableId.slice('step-'.length));
-
-          if (targetStepIndex === -1) {
-            return;
-          }
-
-          applySigners(mergeSteps(currentSigners, result.source.index, targetStepIndex, canSignerBeModified));
-
-          return;
-        }
-
-        if (result.destination) {
-          applySigners(reorderStep(currentSigners, result.source.index, result.destination.index, canSignerBeModified));
-        }
-
-        return;
-      }
-
-      if (result.type === 'RECIPIENT' && result.destination) {
-        const formId = result.draggableId.slice('recipient-'.length);
-        const { droppableId } = result.destination;
-
-        if (droppableId === 'gap-end') {
-          applySigners(extractRecipientToNewStep(currentSigners, formId, currentSteps.length, canSignerBeModified));
-
-          return;
-        }
-
-        if (droppableId.startsWith('gap-')) {
-          const insertStepIndex = findStepIndexByAnchor(droppableId.slice('gap-'.length));
-
-          if (insertStepIndex === -1) {
-            return;
-          }
-
-          applySigners(extractRecipientToNewStep(currentSigners, formId, insertStepIndex, canSignerBeModified));
-
-          return;
-        }
-
-        if (droppableId.startsWith('step-members-')) {
-          const targetStepIndex = findStepIndexByAnchor(droppableId.slice('step-members-'.length));
-
-          if (targetStepIndex === -1) {
-            return;
-          }
-
-          applySigners(moveRecipientToStep(currentSigners, formId, targetStepIndex, canSignerBeModified));
-        }
-      }
-    },
-    [form, canSignerBeModified, applySigners],
-  );
-
-  const sharedRowProps = {
-    showAdvancedSettings,
-    recipientSuggestions,
-    isLoadingSuggestions: isLoading,
-    onRoleChange: handleRoleChange,
-    onRemove: handleRemove,
-    onAutoCompleteSelect: handleAutoCompleteSelect,
-    onSearchQueryChange: setRecipientSearchQuery,
-  };
-
-  return (
-    <div>
-      {!showAdvancedSettings && !isSequential && (
-        <div className="mb-1 flex flex-row gap-x-2 text-sm">
-          <span className="w-full">
-            <Trans>Email</Trans>
-          </span>
-          <span className="w-full">
-            <Trans>Name</Trans>
-          </span>
-          <span className="w-[7.5rem] flex-shrink-0" />
-        </div>
-      )}
-
-      {!isSequential ? (
-        <div className="flex w-full flex-col">
-          {watchedSigners.map((signer, index) => (
-            <RecipientRow
-              key={signer.formId}
-              signerIndex={index}
-              signer={signer}
-              isSequential={false}
-              isInputDisabled={false}
-              canBeModified={canSignerBeModified(signer)}
-              isRemoveDisabled={isRemoveDisabled}
-              dragHandleProps={null}
-              {...sharedRowProps}
-            />
-          ))}
-        </div>
-      ) : (
-        <>
-          <DragDropContext onBeforeCapture={onBeforeCapture} onDragEnd={onDragEnd}>
-            <Droppable droppableId="recipient-steps" type="STEP" isCombineEnabled>
-              {(provided) => (
-                <div {...provided.droppableProps} ref={provided.innerRef} className="flex w-full flex-col">
-                  {steps.map((step, stepIndex) => {
-                    const isStepLocked = step.members.some((member) => !canSignerBeModified(member));
-
-                    return (
-                      <Draggable
-                        key={`step-${step.members[0].formId}`}
-                        draggableId={`step-${step.members[0].formId}`}
-                        index={stepIndex}
-                        isDragDisabled={isSubmitting || isStepLocked}
-                      >
-                        {(draggableProvided, draggableSnapshot) => (
-                          <RecipientStepCard
-                            stepIndex={stepIndex}
-                            step={step}
-                            isLastStep={stepIndex === steps.length - 1}
-                            draggableProvided={draggableProvided}
-                            draggableSnapshot={draggableSnapshot}
-                            draggingType={draggingType}
-                            isStepLocked={isStepLocked}
-                            isRemoveDisabled={isRemoveDisabled}
-                            flatIndexByFormId={flatIndexByFormId}
-                            canSignerBeModified={canSignerBeModified}
-                            isSubmitting={isSubmitting}
-                            onUngroup={handleUngroup}
-                            rowProps={sharedRowProps}
-                          />
-                        )}
-                      </Draggable>
-                    );
-                  })}
-
-                  {provided.placeholder}
-                </div>
-              )}
-            </Droppable>
-          </DragDropContext>
-
-          {ccRecipients.length > 0 && (
-            <div className="my-1 rounded-lg border px-3 py-1.5">
-              <Badge variant="neutral" size="small">
-                <Trans>Receives Copy</Trans>
-              </Badge>
-
-              {ccRecipients.map((signer) => (
-                <div key={signer.formId} className="my-1">
-                  <RecipientRow
-                    signerIndex={flatIndexByFormId.get(signer.formId) ?? -1}
-                    signer={signer}
-                    isSequential={true}
-                    isInputDisabled={false}
-                    canBeModified={canSignerBeModified(signer)}
-                    isRemoveDisabled={isRemoveDisabled}
-                    dragHandleProps={null}
-                    {...sharedRowProps}
-                  />
-                </div>
-              ))}
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-};

apps/remix/app/components/general/envelope-signing/envelope-signing-complete-dialog.tsx

@@ -42,7 +42,11 @@ export const EnvelopeSignerCompleteDialog = () => {
 
   const { onDocumentCompleted, onDocumentError } = useEmbedSigningContext() || {};
 
-  const { mutateAsync: completeDocument, isPending } = trpc.recipient.completeDocumentWithToken.useMutation();
+  const {
+    mutateAsync: completeDocument,
+    isPending,
+    isSuccess,
+  } = trpc.recipient.completeDocumentWithToken.useMutation();
 
   const { mutateAsync: createDocumentFromDirectTemplate } =
     trpc.template.createDocumentFromDirectTemplate.useMutation();
@@ -106,11 +110,21 @@ export const EnvelopeSignerCompleteDialog = () => {
         return;
       }
 
-      analytics.capture('App: Recipient has completed signing', {
-        signerId: recipient.id,
-        documentId: envelope.id,
-        timestamp: new Date().toISOString(),
-      });
+      // The document was already completed by an earlier request (retry,
+      // stale tab or concurrent submission). Let the user know this click
+      // didn't complete the document, then continue to the completed page.
+      if (result.status === 'ALREADY_SIGNED') {
+        toast({
+          title: t`Document already signed`,
+          description: t`This document was already signed and no further action was taken.`,
+        });
+      } else {
+        analytics.capture('App: Recipient has completed signing', {
+          signerId: recipient.id,
+          documentId: envelope.id,
+          timestamp: new Date().toISOString(),
+        });
+      }
 
       if (onDocumentCompleted) {
         onDocumentCompleted({
@@ -246,7 +260,7 @@ export const EnvelopeSignerCompleteDialog = () => {
 
   return (
     <DocumentSigningCompleteDialog
-      isSubmitting={isPending}
+      isSubmitting={isPending || isSuccess}
       recipientPayload={recipientPayload}
       onSignatureComplete={isDirectTemplate ? handleDirectTemplateCompleteClick : handleOnCompleteClick}
       documentTitle={envelope.title}

apps/remix/app/components/general/menu-switcher.tsx

@@ -1,104 +0,0 @@
-import { authClient } from '@documenso/auth/client';
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
-import { isAdmin } from '@documenso/lib/utils/is-admin';
-import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
-import { LanguageSwitcherDialog } from '@documenso/ui/components/common/language-switcher-dialog';
-import { cn } from '@documenso/ui/lib/utils';
-import { AvatarWithText } from '@documenso/ui/primitives/avatar';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@documenso/ui/primitives/dropdown-menu';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { ChevronsUpDown, Plus } from 'lucide-react';
-import { useState } from 'react';
-import { Link } from 'react-router';
-
-export const MenuSwitcher = () => {
-  const { _ } = useLingui();
-
-  const { user } = useSession();
-
-  const [languageSwitcherOpen, setLanguageSwitcherOpen] = useState(false);
-
-  const isUserAdmin = isAdmin(user);
-
-  const formatAvatarFallback = (name?: string) => {
-    if (name !== undefined) {
-      return name.slice(0, 1).toUpperCase();
-    }
-
-    return user.name ? extractInitials(user.name) : user.email.slice(0, 1).toUpperCase();
-  };
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          data-testid="menu-switcher"
-          variant="none"
-          className="relative flex h-12 flex-row items-center px-0 py-2 ring-0 focus:outline-none focus-visible:border-0 focus-visible:ring-0 focus-visible:ring-transparent md:px-2"
-        >
-          <AvatarWithText
-            avatarSrc={formatAvatarUrl(user.avatarImageId)}
-            avatarFallback={formatAvatarFallback(user.name || user.email)}
-            primaryText={user.name}
-            secondaryText={_(msg`Personal Account`)}
-            rightSideComponent={<ChevronsUpDown className="ml-auto h-4 w-4 text-muted-foreground" />}
-            textSectionClassName="hidden lg:flex"
-          />
-        </Button>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent className={cn('z-[60] ml-6 w-full min-w-[12rem] md:ml-0')} align="end" forceMount>
-        <DropdownMenuItem className="px-4 py-2 text-muted-foreground" asChild>
-          <Link to="/settings/organisations?action=add-organisation" className="flex items-center justify-between">
-            <Trans>Create Organisation</Trans>
-            <Plus className="ml-2 h-4 w-4" />
-          </Link>
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-
-        {isUserAdmin && (
-          <DropdownMenuItem className="px-4 py-2 text-muted-foreground" asChild>
-            <Link to="/admin">
-              <Trans>Admin panel</Trans>
-            </Link>
-          </DropdownMenuItem>
-        )}
-
-        <DropdownMenuItem className="px-4 py-2 text-muted-foreground" asChild>
-          <Link to="/inbox">
-            <Trans>Personal Inbox</Trans>
-          </Link>
-        </DropdownMenuItem>
-
-        <DropdownMenuItem className="px-4 py-2 text-muted-foreground" asChild>
-          <Link to="/settings/profile">
-            <Trans>User settings</Trans>
-          </Link>
-        </DropdownMenuItem>
-
-        <DropdownMenuItem className="px-4 py-2 text-muted-foreground" onClick={() => setLanguageSwitcherOpen(true)}>
-          <Trans>Language</Trans>
-        </DropdownMenuItem>
-
-        <DropdownMenuItem
-          className="hover:!text-destructive px-4 py-2 text-destructive/90"
-          onSelect={async () => authClient.signOut()}
-        >
-          <Trans>Sign Out</Trans>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-
-      <LanguageSwitcherDialog open={languageSwitcherOpen} setOpen={setLanguageSwitcherOpen} />
-    </DropdownMenu>
-  );
-};

apps/remix/app/components/general/org-menu-switcher.tsx

@@ -1,6 +1,7 @@
 import { authClient } from '@documenso/auth/client';
 import { useOptionalCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { EXTENDED_ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations-translations';
 import { EXTENDED_TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
@@ -55,6 +56,12 @@ export const OrgMenuSwitcher = () => {
   const currentOrganisation = useOptionalCurrentOrganisation();
   const currentTeam = useOptionalCurrentTeam();
 
+  const canAccessOrganisationSettings =
+    currentOrganisation &&
+    canExecuteOrganisationAction('MANAGE_ORGANISATION', currentOrganisation.currentOrganisationRole);
+
+  const canAccessTeamSettings = currentTeam && canExecuteTeamAction('MANAGE_TEAM', currentTeam.currentTeamRole);
+
   // Use hovered org for teams display if available,
   // otherwise use current team's org if in a team,
   // finally fallback to selected org
@@ -161,7 +168,7 @@ export const OrgMenuSwitcher = () => {
                   {canExecuteOrganisationAction('MANAGE_ORGANISATION', org.currentOrganisationRole) && (
                     <div className="absolute top-0 right-0 bottom-0 flex items-center justify-center">
                       <Link
-                        to={`/o/${org.url}/settings`}
+                        to={`/o/${org.url}/settings/general`}
                         className="mr-2 rounded-sm border p-1 text-muted-foreground transition-opacity duration-200 group-hover:opacity-100 md:opacity-0"
                       >
                         <Settings2Icon className="h-3.5 w-3.5" />
@@ -214,7 +221,7 @@ export const OrgMenuSwitcher = () => {
                       {canExecuteTeamAction('MANAGE_TEAM', team.currentTeamRole) && (
                         <div className="absolute top-0 right-0 bottom-0 flex items-center justify-center">
                           <Link
-                            to={`/t/${team.url}/settings`}
+                            to={`/t/${team.url}/settings/general`}
                             className="mr-2 rounded-sm border p-1 text-muted-foreground opacity-0 transition-opacity duration-200 group-hover:opacity-100"
                           >
                             <Settings2Icon className="h-3.5 w-3.5" />
@@ -258,26 +265,23 @@ export const OrgMenuSwitcher = () => {
                 </DropdownMenuItem>
               )}
 
-              {currentOrganisation &&
-                canExecuteOrganisationAction('MANAGE_ORGANISATION', currentOrganisation.currentOrganisationRole) && (
-                  <DropdownMenuItem className="px-4 py-2 text-muted-foreground" asChild>
-                    <Link to={`/o/${currentOrganisation.url}/settings`}>
-                      <Trans>Organisation settings</Trans>
-                    </Link>
-                  </DropdownMenuItem>
-                )}
-
-              {currentTeam && canExecuteTeamAction('MANAGE_TEAM', currentTeam.currentTeamRole) && (
-                <DropdownMenuItem className="px-4 py-2 text-muted-foreground" asChild>
-                  <Link to={`/t/${currentTeam.url}/settings`}>
-                    <Trans>Team settings</Trans>
-                  </Link>
-                </DropdownMenuItem>
-              )}
-
               <DropdownMenuItem className="px-4 py-2 text-muted-foreground" asChild>
                 <Link to="/inbox">
-                  <Trans>Personal Inbox</Trans>
+                  <Trans>Inbox</Trans>
+                </Link>
+              </DropdownMenuItem>
+
+              <DropdownMenuItem className="px-4 py-2 text-muted-foreground" asChild>
+                <Link
+                  to={
+                    canAccessOrganisationSettings
+                      ? `/o/${currentOrganisation?.url}/settings/general`
+                      : canAccessTeamSettings
+                        ? `/t/${currentTeam?.url}/settings/general`
+                        : '/settings/profile'
+                  }
+                >
+                  <Trans>Settings</Trans>
                 </Link>
               </DropdownMenuItem>
 
@@ -287,6 +291,14 @@ export const OrgMenuSwitcher = () => {
                 </Link>
               </DropdownMenuItem>
 
+              {IS_BILLING_ENABLED() && (
+                <DropdownMenuItem className="px-4 py-2 text-muted-foreground" asChild>
+                  <Link to="/settings/billing">
+                    <Trans>Billing</Trans>
+                  </Link>
+                </DropdownMenuItem>
+              )}
+
               <DropdownMenuItem
                 className="px-4 py-2 text-muted-foreground"
                 onClick={() => setLanguageSwitcherOpen(true)}

apps/remix/app/components/general/organisations/organisation-billing-portal-button.tsx

@@ -1,6 +1,5 @@
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { canExecuteOrganisationAction, isPersonalLayout } from '@documenso/lib/utils/organisations';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -13,8 +12,6 @@ export type OrganisationBillingPortalButtonProps = {
 };
 
 export const OrganisationBillingPortalButton = ({ buttonProps }: OrganisationBillingPortalButtonProps) => {
-  const { organisations } = useSession();
-
   const organisation = useCurrentOrganisation();
 
   const { _ } = useLingui();
@@ -28,11 +25,10 @@ export const OrganisationBillingPortalButton = ({ buttonProps }: OrganisationBil
     try {
       const { redirectUrl } = await manageSubscription({
         organisationId: organisation.id,
-        isPersonalLayoutMode: isPersonalLayout(organisations),
       });
 
       window.open(redirectUrl, '_blank');
-    } catch (err) {
+    } catch (_err) {
       toast({
         title: _(msg`Something went wrong`),
         description: _(

apps/remix/app/components/general/settings-header.tsx

@@ -12,9 +12,9 @@ export type SettingsHeaderProps = {
 export const SettingsHeader = ({ children, title, subtitle, className, hideDivider }: SettingsHeaderProps) => {
   return (
     <>
-      <div className={cn('flex flex-row items-center justify-between', className)}>
+      <div className={cn('mb-4 flex flex-row items-center justify-between', className)}>
         <div>
-          <h3 className="font-medium text-lg">{title}</h3>
+          <h2 className="font-bold text-xl">{title}</h2>
 
           <p className="text-muted-foreground text-sm md:mt-2">{subtitle}</p>
         </div>
@@ -22,7 +22,7 @@ export const SettingsHeader = ({ children, title, subtitle, className, hideDivid
         {children}
       </div>
 
-      {!hideDivider && <hr className="my-4" />}
+      {!hideDivider && <hr className="mb-4" />}
     </>
   );
 };

apps/remix/app/components/general/settings-nav-desktop.tsx

@@ -1,137 +0,0 @@
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
-import { canExecuteOrganisationAction, isPersonalLayout } from '@documenso/lib/utils/organisations';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { Trans } from '@lingui/react/macro';
-import { BracesIcon, CreditCardIcon, Globe2Icon, Lock, Settings2Icon, User, Users, WebhookIcon } from 'lucide-react';
-import type { HTMLAttributes } from 'react';
-import { Link, useLocation } from 'react-router';
-
-export type SettingsDesktopNavProps = HTMLAttributes<HTMLDivElement>;
-
-export const SettingsDesktopNav = ({ className, ...props }: SettingsDesktopNavProps) => {
-  const { pathname } = useLocation();
-
-  const { organisations } = useSession();
-
-  const isPersonalLayoutMode = isPersonalLayout(organisations);
-
-  const hasManageableBillingOrgs = organisations.some((org) =>
-    canExecuteOrganisationAction('MANAGE_BILLING', org.currentOrganisationRole),
-  );
-
-  return (
-    <div className={cn('flex flex-col gap-y-2', className)} {...props}>
-      <Link to="/settings/profile">
-        <Button
-          variant="ghost"
-          className={cn('w-full justify-start', pathname?.startsWith('/settings/profile') && 'bg-secondary')}
-        >
-          <User className="mr-2 h-5 w-5" />
-          <Trans>Profile</Trans>
-        </Button>
-      </Link>
-
-      {isPersonalLayoutMode && (
-        <>
-          <Link to="/settings/document">
-            <Button variant="ghost" className={cn('w-full justify-start')}>
-              <Settings2Icon className="mr-2 h-5 w-5" />
-              <Trans>Preferences</Trans>
-            </Button>
-          </Link>
-
-          <Link className="w-full pl-8" to="/settings/document">
-            <Button
-              variant="ghost"
-              className={cn('w-full justify-start', pathname?.startsWith('/settings/document') && 'bg-secondary')}
-            >
-              <Trans>Document</Trans>
-            </Button>
-          </Link>
-
-          <Link className="w-full pl-8" to="/settings/branding">
-            <Button
-              variant="ghost"
-              className={cn('w-full justify-start', pathname?.startsWith('/settings/branding') && 'bg-secondary')}
-            >
-              <Trans>Branding</Trans>
-            </Button>
-          </Link>
-
-          <Link className="w-full pl-8" to="/settings/email">
-            <Button
-              variant="ghost"
-              className={cn('w-full justify-start', pathname?.startsWith('/settings/email') && 'bg-secondary')}
-            >
-              <Trans>Email</Trans>
-            </Button>
-          </Link>
-
-          <Link to="/settings/public-profile">
-            <Button
-              variant="ghost"
-              className={cn('w-full justify-start', pathname?.startsWith('/settings/public-profile') && 'bg-secondary')}
-            >
-              <Globe2Icon className="mr-2 h-5 w-5" />
-              <Trans>Public Profile</Trans>
-            </Button>
-          </Link>
-
-          <Link to="/settings/tokens">
-            <Button
-              variant="ghost"
-              className={cn('w-full justify-start', pathname?.startsWith('/settings/tokens') && 'bg-secondary')}
-            >
-              <BracesIcon className="mr-2 h-5 w-5" />
-              <Trans>API Tokens</Trans>
-            </Button>
-          </Link>
-
-          <Link to="/settings/webhooks">
-            <Button
-              variant="ghost"
-              className={cn('w-full justify-start', pathname?.startsWith('/settings/webhooks') && 'bg-secondary')}
-            >
-              <WebhookIcon className="mr-2 h-5 w-5" />
-              <Trans>Webhooks</Trans>
-            </Button>
-          </Link>
-        </>
-      )}
-
-      <Link to="/settings/organisations">
-        <Button
-          variant="ghost"
-          className={cn('w-full justify-start', pathname?.startsWith('/settings/organisations') && 'bg-secondary')}
-        >
-          <Users className="mr-2 h-5 w-5" />
-          <Trans>Organisations</Trans>
-        </Button>
-      </Link>
-
-      {IS_BILLING_ENABLED() && hasManageableBillingOrgs && (
-        <Link to={isPersonalLayoutMode ? '/settings/billing-personal' : `/settings/billing`}>
-          <Button
-            variant="ghost"
-            className={cn('w-full justify-start', pathname?.startsWith('/settings/billing') && 'bg-secondary')}
-          >
-            <CreditCardIcon className="mr-2 h-5 w-5" />
-            <Trans>Billing</Trans>
-          </Button>
-        </Link>
-      )}
-
-      <Link to="/settings/security">
-        <Button
-          variant="ghost"
-          className={cn('w-full justify-start', pathname?.startsWith('/settings/security') && 'bg-secondary')}
-        >
-          <Lock className="mr-2 h-5 w-5" />
-          <Trans>Security</Trans>
-        </Button>
-      </Link>
-    </div>
-  );
-};

apps/remix/app/components/general/settings-nav-mobile.tsx

@@ -1,144 +0,0 @@
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
-import { canExecuteOrganisationAction, isPersonalLayout } from '@documenso/lib/utils/organisations';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { Trans } from '@lingui/react/macro';
-import {
-  BracesIcon,
-  CreditCardIcon,
-  Globe2Icon,
-  Lock,
-  MailIcon,
-  PaletteIcon,
-  Settings2Icon,
-  User,
-  Users,
-  WebhookIcon,
-} from 'lucide-react';
-import type { HTMLAttributes } from 'react';
-import { Link, useLocation } from 'react-router';
-
-export type SettingsMobileNavProps = HTMLAttributes<HTMLDivElement>;
-
-export const SettingsMobileNav = ({ className, ...props }: SettingsMobileNavProps) => {
-  const { pathname } = useLocation();
-
-  const { organisations } = useSession();
-
-  const isPersonalLayoutMode = isPersonalLayout(organisations);
-
-  const hasManageableBillingOrgs = organisations.some((org) =>
-    canExecuteOrganisationAction('MANAGE_BILLING', org.currentOrganisationRole),
-  );
-
-  return (
-    <div className={cn('flex flex-wrap items-center justify-start gap-x-2 gap-y-4', className)} {...props}>
-      <Link to="/settings/profile">
-        <Button
-          variant="ghost"
-          className={cn('w-full justify-start', pathname?.startsWith('/settings/profile') && 'bg-secondary')}
-        >
-          <User className="mr-2 h-5 w-5" />
-          <Trans>Profile</Trans>
-        </Button>
-      </Link>
-
-      {isPersonalLayoutMode && (
-        <>
-          <Link to="/settings/document">
-            <Button
-              variant="ghost"
-              className={cn('w-full justify-start', pathname?.startsWith('/settings/document') && 'bg-secondary')}
-            >
-              <Settings2Icon className="mr-2 h-5 w-5" />
-              <Trans>Document Preferences</Trans>
-            </Button>
-          </Link>
-
-          <Link to="/settings/branding">
-            <Button
-              variant="ghost"
-              className={cn('w-full justify-start', pathname?.startsWith('/settings/branding') && 'bg-secondary')}
-            >
-              <PaletteIcon className="mr-2 h-5 w-5" />
-              <Trans>Branding Preferences</Trans>
-            </Button>
-          </Link>
-
-          <Link to="/settings/email">
-            <Button
-              variant="ghost"
-              className={cn('w-full justify-start', pathname?.startsWith('/settings/email') && 'bg-secondary')}
-            >
-              <MailIcon className="mr-2 h-5 w-5" />
-              <Trans>Email Preferences</Trans>
-            </Button>
-          </Link>
-
-          <Link to="/settings/public-profile">
-            <Button
-              variant="ghost"
-              className={cn('w-full justify-start', pathname?.startsWith('/settings/public-profile') && 'bg-secondary')}
-            >
-              <Globe2Icon className="mr-2 h-5 w-5" />
-              <Trans>Public Profile</Trans>
-            </Button>
-          </Link>
-
-          <Link to="/settings/tokens">
-            <Button
-              variant="ghost"
-              className={cn('w-full justify-start', pathname?.startsWith('/settings/tokens') && 'bg-secondary')}
-            >
-              <BracesIcon className="mr-2 h-5 w-5" />
-              <Trans>API Tokens</Trans>
-            </Button>
-          </Link>
-
-          <Link to="/settings/webhooks">
-            <Button
-              variant="ghost"
-              className={cn('w-full justify-start', pathname?.startsWith('/settings/webhooks') && 'bg-secondary')}
-            >
-              <WebhookIcon className="mr-2 h-5 w-5" />
-              <Trans>Webhooks</Trans>
-            </Button>
-          </Link>
-        </>
-      )}
-
-      <Link to="/settings/organisations">
-        <Button
-          variant="ghost"
-          className={cn('w-full justify-start', pathname?.startsWith('/settings/organisations') && 'bg-secondary')}
-        >
-          <Users className="mr-2 h-5 w-5" />
-          <Trans>Organisations</Trans>
-        </Button>
-      </Link>
-
-      {IS_BILLING_ENABLED() && hasManageableBillingOrgs && (
-        <Link to={isPersonalLayoutMode ? '/settings/billing-personal' : `/settings/billing`}>
-          <Button
-            variant="ghost"
-            className={cn('w-full justify-start', pathname?.startsWith('/settings/billing') && 'bg-secondary')}
-          >
-            <CreditCardIcon className="mr-2 h-5 w-5" />
-            <Trans>Billing</Trans>
-          </Button>
-        </Link>
-      )}
-
-      <Link to="/settings/security">
-        <Button
-          variant="ghost"
-          className={cn('w-full justify-start', pathname?.startsWith('/settings/security') && 'bg-secondary')}
-        >
-          <Lock className="mr-2 h-5 w-5" />
-          <Trans>Security</Trans>
-        </Button>
-      </Link>
-    </div>
-  );
-};

apps/remix/app/components/general/settings-org-switcher.tsx

@@ -0,0 +1,200 @@
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { type INTERNAL_CLAIM_ID, internalClaims } from '@documenso/lib/types/subscription';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
+import { getSettingsNavGroups } from '@documenso/lib/utils/settings-nav';
+import { computeSwitcherContinuityPath } from '@documenso/lib/utils/settings-switcher';
+import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import { cn } from '@documenso/ui/lib/utils';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import { Input } from '@documenso/ui/primitives/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { ChevronsUpDownIcon, PlusIcon, SearchIcon } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router';
+
+const SEARCH_THRESHOLD = 5;
+
+export type SettingsOrgSwitcherProps = {
+  currentOrgUrl: string;
+};
+
+export const SettingsOrgSwitcher = ({ currentOrgUrl }: SettingsOrgSwitcherProps) => {
+  const { t } = useLingui();
+  const { organisations } = useSession();
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState('');
+
+  const manageableOrgs = useMemo(
+    () =>
+      organisations.filter(
+        (org) =>
+          canExecuteOrganisationAction('MANAGE_ORGANISATION', org.currentOrganisationRole) ||
+          org.teams.some((team) => canExecuteTeamAction('MANAGE_TEAM', team.currentTeamRole)),
+      ),
+    [organisations],
+  );
+
+  const currentOrg = manageableOrgs.find((org) => org.url === currentOrgUrl);
+
+  const hasManageableBillingOrgs = useMemo(
+    () => organisations.some((org) => canExecuteOrganisationAction('MANAGE_BILLING', org.currentOrganisationRole)),
+    [organisations],
+  );
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+
+    if (!q) {
+      return manageableOrgs;
+    }
+
+    return manageableOrgs.filter((org) => org.name.toLowerCase().includes(q));
+  }, [manageableOrgs, query]);
+
+  const isBillingEnabled = IS_BILLING_ENABLED();
+
+  const handleSelect = (orgUrl: string) => {
+    const destinationOrg = manageableOrgs.find((org) => org.url === orgUrl);
+
+    if (!destinationOrg) {
+      return;
+    }
+
+    const manageableTeam = destinationOrg.teams.find((team) =>
+      canExecuteTeamAction('MANAGE_TEAM', team.currentTeamRole),
+    );
+
+    const destinationGroups = getSettingsNavGroups({
+      organisation: {
+        url: destinationOrg.url,
+        currentOrganisationRole: destinationOrg.currentOrganisationRole,
+        organisationClaim: destinationOrg.organisationClaim,
+      },
+      team: manageableTeam ? { url: manageableTeam.url, currentTeamRole: manageableTeam.currentTeamRole } : null,
+      hasManageableBillingOrgs,
+    });
+
+    // The list also contains organisations the user can only reach through a team they
+    // manage — for those `getSettingsNavGroups` returns no organisation group, so we land
+    // them in the team group instead of on an organisation page they aren't authorised for.
+    const destinationGroup = destinationGroups.organisation ?? destinationGroups.team;
+
+    if (!destinationGroup) {
+      return;
+    }
+
+    setIsOpen(false);
+
+    void navigate(
+      computeSwitcherContinuityPath({
+        currentPath: pathname,
+        destinationPaths: destinationGroup.items.map((item) => item.path),
+        fallbackPath: destinationGroup.items[0].path,
+      }),
+    );
+  };
+
+  if (!currentOrg) {
+    return null;
+  }
+
+  // Resolve an organisation's plan label. Unknown or custom claims (including
+  // self-hosted custom claim IDs) fall back to "Custom Plan".
+  const getPlanName = (organisationClaimId: string | null) => {
+    const planClaim =
+      organisationClaimId && organisationClaimId in internalClaims
+        ? internalClaims[organisationClaimId as INTERNAL_CLAIM_ID]
+        : undefined;
+
+    return planClaim ? t`${planClaim.name} Plan` : t`Custom Plan`;
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          data-testid="settings-org-switcher-trigger"
+          className="flex h-auto w-full items-center justify-start gap-2 rounded-lg border bg-background px-1.5 py-1 hover:bg-muted"
+        >
+          <AvatarWithText
+            className="max-w-none"
+            avatarClass="h-8 w-8"
+            avatarSrc={formatAvatarUrl(currentOrg.avatarImageId)}
+            avatarFallback={currentOrg.name.slice(0, 1).toUpperCase()}
+            primaryText={<span className="font-semibold text-muted-foreground">{currentOrg.name}</span>}
+            secondaryText={
+              isBillingEnabled ? getPlanName(currentOrg.organisationClaim.originalSubscriptionClaimId) : undefined
+            }
+            rightSideComponent={<ChevronsUpDownIcon className="ml-auto h-4 w-4 shrink-0 text-muted-foreground" />}
+          />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="w-[var(--radix-popover-trigger-width)] p-0"
+        data-testid="settings-org-switcher-content"
+      >
+        {manageableOrgs.length >= SEARCH_THRESHOLD && (
+          <div className="border-b p-2">
+            <div className="relative">
+              <SearchIcon className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder={t`Search organisations…`}
+                className="h-8 pl-7"
+                data-testid="settings-org-switcher-search"
+              />
+            </div>
+          </div>
+        )}
+
+        <ul className="max-h-72 space-y-1 overflow-auto p-1">
+          {filtered.map((org) => {
+            const isCurrent = org.url === currentOrgUrl;
+            return (
+              <li key={org.id}>
+                <button
+                  type="button"
+                  onClick={() => handleSelect(org.url)}
+                  className={cn(
+                    'flex w-full items-center rounded-md px-2 py-2 text-left hover:bg-muted',
+                    isCurrent && 'bg-muted',
+                  )}
+                  data-testid={`settings-org-switcher-item-${org.url}`}
+                >
+                  <AvatarWithText
+                    avatarClass="h-8 w-8"
+                    avatarSrc={formatAvatarUrl(org.avatarImageId)}
+                    avatarFallback={org.name.slice(0, 1).toUpperCase()}
+                    primaryText={<span className={cn(isCurrent && 'font-semibold')}>{org.name}</span>}
+                    secondaryText={
+                      isBillingEnabled ? getPlanName(org.organisationClaim.originalSubscriptionClaimId) : undefined
+                    }
+                  />
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+
+        <div className="border-t p-1">
+          <Button variant="ghost" asChild className="w-full justify-start" data-testid="settings-org-switcher-create">
+            <a href="/settings/organisations?action=add-organisation">
+              <PlusIcon className="mr-2 h-4 w-4" />
+              <Trans>Create organisation</Trans>
+            </a>
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

apps/remix/app/components/general/settings-scope-breadcrumb.tsx

@@ -0,0 +1,58 @@
+import { cn } from '@documenso/ui/lib/utils';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Trans } from '@lingui/react/macro';
+import { Building2Icon, ChevronRightIcon, UserIcon, Users2Icon } from 'lucide-react';
+
+export type SettingsScopeBreadcrumbProps = {
+  scope: 'organisation' | 'team' | 'account';
+  scopeName: string;
+  crumbs: string[];
+};
+
+export const SettingsScopeBreadcrumb = ({ scope, scopeName, crumbs }: SettingsScopeBreadcrumbProps) => {
+  return (
+    <nav
+      aria-label="settings-scope-breadcrumb"
+      className="mb-4 flex flex-wrap items-center gap-2 text-muted-foreground text-sm"
+      data-testid="settings-scope-breadcrumb"
+    >
+      <span>{scopeName}</span>
+
+      {crumbs.map((crumb, idx) => {
+        const isLeaf = idx === crumbs.length - 1;
+
+        return (
+          <span key={`${crumb}-${idx}`} className="flex items-center gap-2">
+            <ChevronRightIcon className="h-3.5 w-3.5 opacity-50" />
+            <span className={cn(isLeaf && 'font-semibold text-foreground')}>{crumb}</span>
+          </span>
+        );
+      })}
+      <Badge
+        variant={scope === 'organisation' ? 'default' : scope === 'team' ? 'secondary' : 'neutral'}
+        role="presentation"
+        className="ml-auto gap-1.5"
+        data-testid="settings-scope-breadcrumb-chip"
+      >
+        {scope === 'organisation' && (
+          <>
+            <Building2Icon className="h-3.5 w-3.5" />
+            <Trans>Organisation Settings</Trans>
+          </>
+        )}
+        {scope === 'team' && (
+          <>
+            <Users2Icon className="h-3.5 w-3.5" />
+            <Trans>Team Settings</Trans>
+          </>
+        )}
+        {scope === 'account' && (
+          <>
+            <UserIcon className="h-3.5 w-3.5" />
+            <Trans>Account Settings</Trans>
+          </>
+        )}
+      </Badge>
+    </nav>
+  );
+};

apps/remix/app/components/general/settings-team-switcher.tsx

@@ -0,0 +1,166 @@
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { EXTENDED_TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { getSettingsNavGroups } from '@documenso/lib/utils/settings-nav';
+import { computeSwitcherContinuityPath } from '@documenso/lib/utils/settings-switcher';
+import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import { cn } from '@documenso/ui/lib/utils';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import { Input } from '@documenso/ui/primitives/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { ChevronsUpDownIcon, PlusIcon, SearchIcon } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router';
+
+const SEARCH_THRESHOLD = 5;
+
+export type SettingsTeamSwitcherProps = {
+  currentOrgUrl: string;
+  currentTeamUrl: string | null;
+};
+
+export const SettingsTeamSwitcher = ({ currentOrgUrl, currentTeamUrl }: SettingsTeamSwitcherProps) => {
+  const { t } = useLingui();
+  const { organisations } = useSession();
+  const { pathname } = useLocation();
+
+  const navigate = useNavigate();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState('');
+
+  const currentOrg = organisations.find((org) => org.url === currentOrgUrl);
+
+  const manageableTeams = useMemo(
+    () =>
+      currentOrg ? currentOrg.teams.filter((team) => canExecuteTeamAction('MANAGE_TEAM', team.currentTeamRole)) : [],
+    [currentOrg],
+  );
+
+  const currentTeam = manageableTeams.find((team) => team.url === currentTeamUrl) ?? manageableTeams[0];
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+
+    if (!q) {
+      return manageableTeams;
+    }
+
+    return manageableTeams.filter((team) => team.name.toLowerCase().includes(q));
+  }, [manageableTeams, query]);
+
+  const handleSelect = (teamUrl: string) => {
+    const destinationTeam = manageableTeams.find((team) => team.url === teamUrl);
+
+    if (!currentOrg || !destinationTeam) {
+      return;
+    }
+
+    const destinationGroup = getSettingsNavGroups({
+      organisation: {
+        url: currentOrg.url,
+        currentOrganisationRole: currentOrg.currentOrganisationRole,
+        organisationClaim: currentOrg.organisationClaim,
+      },
+      team: { url: destinationTeam.url, currentTeamRole: destinationTeam.currentTeamRole },
+      hasManageableBillingOrgs: false,
+    }).team;
+
+    if (!destinationGroup) {
+      return;
+    }
+
+    setIsOpen(false);
+
+    void navigate(
+      computeSwitcherContinuityPath({
+        currentPath: pathname,
+        destinationPaths: destinationGroup.items.map((item) => item.path),
+        fallbackPath: destinationGroup.items[0].path,
+      }),
+    );
+  };
+
+  if (!currentOrg || !currentTeam) {
+    return null;
+  }
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          data-testid="settings-team-switcher-trigger"
+          className="flex h-auto w-full items-center justify-start gap-2 rounded-lg border bg-background px-1.5 py-1 hover:bg-muted"
+        >
+          <AvatarWithText
+            className="max-w-none"
+            avatarClass="h-8 w-8"
+            avatarSrc={formatAvatarUrl(currentTeam.avatarImageId)}
+            avatarFallback={currentTeam.name.slice(0, 1).toUpperCase()}
+            primaryText={<span className="font-semibold text-muted-foreground">{currentTeam.name}</span>}
+            rightSideComponent={<ChevronsUpDownIcon className="ml-auto h-4 w-4 shrink-0 text-muted-foreground" />}
+          />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="w-[var(--radix-popover-trigger-width)] p-0"
+        data-testid="settings-team-switcher-content"
+      >
+        {manageableTeams.length >= SEARCH_THRESHOLD && (
+          <div className="border-b p-2">
+            <div className="relative">
+              <SearchIcon className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder={t`Search teams…`}
+                className="h-8 pl-7"
+                data-testid="settings-team-switcher-search"
+              />
+            </div>
+          </div>
+        )}
+
+        <ul className="max-h-72 space-y-1 overflow-auto p-1">
+          {filtered.map((team) => {
+            const isCurrent = team.url === currentTeam.url;
+            return (
+              <li key={team.id}>
+                <button
+                  type="button"
+                  onClick={() => handleSelect(team.url)}
+                  className={cn(
+                    'flex w-full items-center rounded-md px-2 py-2 text-left hover:bg-muted',
+                    isCurrent && 'bg-muted',
+                  )}
+                  data-testid={`settings-team-switcher-item-${team.url}`}
+                >
+                  <AvatarWithText
+                    avatarClass="h-8 w-8"
+                    avatarSrc={formatAvatarUrl(team.avatarImageId)}
+                    avatarFallback={team.name.slice(0, 1).toUpperCase()}
+                    primaryText={<span className={cn(isCurrent && 'font-semibold')}>{team.name}</span>}
+                    secondaryText={t(EXTENDED_TEAM_MEMBER_ROLE_MAP[team.currentTeamRole])}
+                  />
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+
+        <div className="border-t p-1">
+          <Button variant="ghost" asChild className="w-full justify-start" data-testid="settings-team-switcher-create">
+            <a href={`/o/${currentOrg.url}/settings/teams?action=add-team`}>
+              <PlusIcon className="mr-2 h-4 w-4" />
+              <Trans>Create team</Trans>
+            </a>
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

apps/remix/app/components/general/teams/team-email-dropdown.tsx

@@ -1,94 +0,0 @@
-import type { getTeamWithEmail } from '@documenso/lib/server-only/team/get-team-email-by-email';
-import { trpc } from '@documenso/trpc/react';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@documenso/ui/primitives/dropdown-menu';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { Edit, Loader, Mail, MoreHorizontal, X } from 'lucide-react';
-
-import { TeamEmailDeleteDialog } from '~/components/dialogs/team-email-delete-dialog';
-import { TeamEmailUpdateDialog } from '~/components/dialogs/team-email-update-dialog';
-
-export type TeamEmailDropdownProps = {
-  team: Awaited<ReturnType<typeof getTeamWithEmail>>;
-};
-
-export const TeamEmailDropdown = ({ team }: TeamEmailDropdownProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const { mutateAsync: resendEmailVerification, isPending: isResendingEmailVerification } =
-    trpc.team.email.verification.resend.useMutation({
-      onSuccess: () => {
-        toast({
-          title: _(msg`Success`),
-          description: _(msg`Email verification has been resent`),
-          duration: 5000,
-        });
-      },
-      onError: () => {
-        toast({
-          title: _(msg`Something went wrong`),
-          description: _(msg`Unable to resend verification at this time. Please try again.`),
-          variant: 'destructive',
-          duration: 10000,
-        });
-      },
-    });
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger>
-        <MoreHorizontal className="h-5 w-5 text-muted-foreground" />
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent className="w-52" align="start" forceMount>
-        {!team.teamEmail && team.emailVerification && (
-          <DropdownMenuItem
-            disabled={isResendingEmailVerification}
-            onClick={(e) => {
-              e.preventDefault();
-              void resendEmailVerification({ teamId: team.id });
-            }}
-          >
-            {isResendingEmailVerification ? (
-              <Loader className="mr-2 h-4 w-4 animate-spin" />
-            ) : (
-              <Mail className="mr-2 h-4 w-4" />
-            )}
-            <Trans>Resend verification</Trans>
-          </DropdownMenuItem>
-        )}
-
-        {team.teamEmail && (
-          <TeamEmailUpdateDialog
-            teamEmail={team.teamEmail}
-            trigger={
-              <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-                <Edit className="mr-2 h-4 w-4" />
-                <Trans>Edit</Trans>
-              </DropdownMenuItem>
-            }
-          />
-        )}
-
-        <TeamEmailDeleteDialog
-          team={team}
-          teamName={team.name}
-          trigger={
-            <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-              <X className="mr-2 h-4 w-4" />
-              <Trans>Remove</Trans>
-            </DropdownMenuItem>
-          }
-        />
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};

apps/remix/app/components/general/unified-settings-layout.tsx

@@ -0,0 +1,211 @@
+import { useOptionalCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
+import { getSettingsNavGroups, type SettingsNavGroup, type SettingsNavItem } from '@documenso/lib/utils/settings-nav';
+import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import { Button } from '@documenso/ui/primitives/button';
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { useEffect, useRef } from 'react';
+import { Link, Outlet, useLocation } from 'react-router';
+import { match } from 'ts-pattern';
+import { GenericErrorLayout } from '~/components/general/generic-error-layout';
+import { useOptionalCurrentTeam } from '~/providers/team';
+import { SettingsScopeBreadcrumb } from './settings-scope-breadcrumb';
+import { UnifiedSettingsSidebar } from './unified-settings-sidebar';
+import { UnifiedSettingsSidebarMobile } from './unified-settings-sidebar-mobile';
+
+export type UnifiedSettingsScope = 'organisation' | 'team' | 'account';
+
+export type UnifiedSettingsLayoutProps = {
+  activeScope: UnifiedSettingsScope;
+
+  /**
+   * The team the user last worked in, read from the `preferred-team-url` cookie by the
+   * layout's loader. Used to keep the sidebar's team switcher stable at organisation and
+   * account scope, where the URL carries no team.
+   */
+  preferredTeamUrl?: string | null;
+};
+
+/**
+ * Walk a group's items and find the item (and its parent if it's a sub-nav child)
+ * that matches the current pathname most specifically. Returns the labels to use
+ * as breadcrumb crumbs (e.g. ['Preferences', 'Document'] or just ['Members']).
+ */
+const findActiveCrumbs = (group: SettingsNavGroup | null, pathname: string): MessageDescriptor[] => {
+  if (!group) {
+    return [];
+  }
+
+  let bestMatch: SettingsNavItem | null = null;
+
+  for (const item of group.items) {
+    if (item.isSubNavParent) {
+      continue;
+    }
+
+    if (pathname === item.path || pathname.startsWith(`${item.path}/`)) {
+      if (!bestMatch || item.path.length > bestMatch.path.length) {
+        bestMatch = item;
+      }
+    }
+  }
+
+  if (!bestMatch) {
+    return [];
+  }
+
+  if (bestMatch.isSubNav) {
+    const parent = group.items.find((it) => it.isSubNavParent);
+    return parent ? [parent.label, bestMatch.label] : [bestMatch.label];
+  }
+
+  return [bestMatch.label];
+};
+
+export const UnifiedSettingsLayout = ({ activeScope, preferredTeamUrl = null }: UnifiedSettingsLayoutProps) => {
+  const { _ } = useLingui();
+  const { organisations } = useSession();
+  const { pathname } = useLocation();
+
+  const currentOrganisation = useOptionalCurrentOrganisation();
+  const team = useOptionalCurrentTeam();
+
+  const contentPaneRef = useRef<HTMLElement>(null);
+
+  // Scroll back to the top when navigating between settings pages.
+  useEffect(() => {
+    contentPaneRef.current?.scrollTo(0, 0);
+  }, [pathname]);
+
+  // An organisation is worth showing in the sidebar if it has settings the user can reach —
+  // either the organisation's own, or those of a team inside it.
+  const hasReachableSettings = (org: (typeof organisations)[number]) =>
+    canExecuteOrganisationAction('MANAGE_ORGANISATION', org.currentOrganisationRole) ||
+    org.teams.some((t) => canExecuteTeamAction('MANAGE_TEAM', t.currentTeamRole));
+
+  const organisation =
+    currentOrganisation ??
+    organisations.find((org) => org.teams.some((t) => t.url === preferredTeamUrl) && hasReachableSettings(org)) ??
+    organisations.find(hasReachableSettings) ??
+    null;
+
+  const manageableTeams = organisation?.teams.filter((t) => canExecuteTeamAction('MANAGE_TEAM', t.currentTeamRole));
+
+  const teamForSidebar =
+    team ?? manageableTeams?.find((t) => t.url === preferredTeamUrl) ?? manageableTeams?.[0] ?? null;
+
+  const sidebarTeamUrl = teamForSidebar?.url ?? null;
+
+  // Sync the selected team URL in the sidebar into the preferred team URL cookie.
+  useEffect(() => {
+    if (!sidebarTeamUrl) {
+      return;
+    }
+
+    const body = new FormData();
+
+    body.append('teamUrl', sidebarTeamUrl);
+
+    void fetch('/api/preferred-team', { method: 'POST', body });
+  }, [sidebarTeamUrl]);
+
+  const groups = getSettingsNavGroups({
+    organisation: organisation
+      ? {
+          url: organisation.url,
+          currentOrganisationRole: organisation.currentOrganisationRole,
+          organisationClaim: organisation.organisationClaim,
+        }
+      : null,
+    team: teamForSidebar ? { url: teamForSidebar.url, currentTeamRole: teamForSidebar.currentTeamRole } : null,
+    hasManageableBillingOrgs: organisations.some((org) =>
+      canExecuteOrganisationAction('MANAGE_BILLING', org.currentOrganisationRole),
+    ),
+  });
+
+  const canManageOrg =
+    organisation !== null && canExecuteOrganisationAction('MANAGE_ORGANISATION', organisation.currentOrganisationRole);
+
+  // Must be derived from the team in the URL context, NOT from `teamForSidebar` — the
+  // latter falls back to any manageable team in the org, which would let a team manager
+  // through the organisation-scope guard (and `useOptionalCurrentTeam()` resolves for any
+  // member regardless of role, which would let a plain member through the team guard).
+  const canManageCurrentTeam = team !== null && canExecuteTeamAction('MANAGE_TEAM', team.currentTeamRole);
+
+  // Account pages are available to every user. The organisation and team scopes each
+  // require the manage permission for THAT scope — they are not interchangeable.
+  const isAuthorised = match(activeScope)
+    .with('account', () => true)
+    .with('organisation', () => canManageOrg)
+    .with('team', () => canManageCurrentTeam)
+    .exhaustive();
+
+  if (!isAuthorised) {
+    return (
+      <GenericErrorLayout
+        errorCode={401}
+        errorCodeMap={{
+          401: {
+            heading: msg`Unauthorized`,
+            subHeading: msg`401 Unauthorized`,
+            message: msg`You are not authorized to access this page.`,
+          },
+        }}
+        primaryButton={
+          <Button asChild>
+            <Link to="/settings/profile">
+              <Trans>Go to your settings</Trans>
+            </Link>
+          </Button>
+        }
+        secondaryButton={null}
+      />
+    );
+  }
+
+  const scopeName = match(activeScope)
+    .with('account', () => _(msg`Account`))
+    .with('organisation', () => organisation?.name ?? '')
+    .with('team', () => team?.name ?? organisation?.name ?? '')
+    .exhaustive();
+
+  const activeGroup =
+    activeScope === 'account' ? groups.account : activeScope === 'organisation' ? groups.organisation : groups.team;
+
+  const crumbs = findActiveCrumbs(activeGroup, pathname).map((label) => _(label));
+
+  return (
+    <div className="flex flex-col md:min-h-0 md:flex-1 md:flex-row">
+      <aside className="hover-scrollbar w-full shrink-0 border-b bg-background md:w-80 md:overflow-y-auto md:border-r md:border-b-0">
+        <div className="flex h-full flex-col">
+          <div className="hidden md:block">
+            <UnifiedSettingsSidebar
+              groups={groups}
+              currentOrgUrl={organisation?.url ?? null}
+              currentTeamUrl={teamForSidebar?.url ?? null}
+            />
+          </div>
+          <div className="md:hidden">
+            <UnifiedSettingsSidebarMobile
+              groups={groups}
+              activeScope={activeScope}
+              currentOrgUrl={organisation?.url ?? null}
+              currentTeamUrl={teamForSidebar?.url ?? null}
+            />
+          </div>
+        </div>
+      </aside>
+
+      <main ref={contentPaneRef} className="relative flex-1 px-4 md:overflow-y-auto md:px-12 lg:px-16">
+        <div className="mx-auto w-full max-w-3xl py-6 md:py-8" data-testid="unified-settings-content">
+          <SettingsScopeBreadcrumb scope={activeScope} scopeName={scopeName} crumbs={crumbs} />
+          <Outlet />
+        </div>
+      </main>
+    </div>
+  );
+};

apps/remix/app/components/general/unified-settings-sidebar-mobile.tsx

@@ -0,0 +1,165 @@
+import type { SettingsNavGroups, SettingsNavScope } from '@documenso/lib/utils/settings-nav';
+import { cn } from '@documenso/ui/lib/utils';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { useMemo } from 'react';
+import { useLocation, useNavigate } from 'react-router';
+
+import { SettingsOrgSwitcher } from './settings-org-switcher';
+import { SettingsTeamSwitcher } from './settings-team-switcher';
+
+type MobileScope = SettingsNavScope | 'account';
+
+export type UnifiedSettingsSidebarMobileProps = {
+  groups: SettingsNavGroups;
+  activeScope: MobileScope;
+  currentOrgUrl: string | null;
+  currentTeamUrl: string | null;
+};
+
+export const UnifiedSettingsSidebarMobile = ({
+  groups,
+  activeScope,
+  currentOrgUrl,
+  currentTeamUrl,
+}: UnifiedSettingsSidebarMobileProps) => {
+  const { _ } = useLingui();
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+
+  const visibleScopes = useMemo<MobileScope[]>(() => {
+    const scopes: MobileScope[] = [];
+    if (groups.organisation) {
+      scopes.push('organisation');
+    }
+    if (groups.team) {
+      scopes.push('team');
+    }
+    scopes.push('account');
+    return scopes;
+  }, [groups]);
+
+  // Falls back to the Account group rather than rendering nothing — an empty scope group
+  // would leave the mobile viewport with no settings navigation at all.
+  const activeGroup =
+    (activeScope === 'organisation' ? groups.organisation : activeScope === 'team' ? groups.team : null) ??
+    groups.account;
+
+  const selectableItems = useMemo(() => activeGroup.items.filter((item) => !item.isSubNavParent), [activeGroup.items]);
+
+  // The select matches on exact value, but plenty of settings pages are sub-routes of a
+  // nav item (`/settings/security/passkeys`, `/t/x/settings/webhooks/:id`, …). Resolving
+  // to the longest matching item path keeps the trigger populated on those pages instead
+  // of rendering an empty box — mirrors the desktop sidebar's prefix highlighting.
+  const selectedPath = useMemo(() => {
+    let bestMatch: string | undefined;
+
+    for (const item of selectableItems) {
+      if (pathname !== item.path && !pathname.startsWith(`${item.path}/`)) {
+        continue;
+      }
+
+      if (!bestMatch || item.path.length > bestMatch.length) {
+        bestMatch = item.path;
+      }
+    }
+
+    return bestMatch;
+  }, [selectableItems, pathname]);
+
+  const handleScopeChange = (scope: MobileScope) => {
+    if (scope === activeScope) {
+      return;
+    }
+    if (scope === 'organisation' && groups.organisation) {
+      void navigate(groups.organisation.items[0].path);
+    } else if (scope === 'team' && groups.team) {
+      void navigate(groups.team.items[0].path);
+    } else if (scope === 'account') {
+      void navigate(groups.account.items[0].path);
+    }
+  };
+
+  // The tab row stays full-bleed (its border-b acts as a full-width divider); the
+  // sections under it get `px-4` to line up with the content pane's own `px-4`
+  // inset, and `pb-4` keeps the last control off the aside's bottom border.
+  return (
+    <div className="flex flex-col gap-3 pb-4" data-testid="unified-settings-sidebar-mobile">
+      {visibleScopes.length > 1 ? (
+        <div className="flex border-border border-b" role="tablist">
+          {visibleScopes.map((scope) => {
+            const isActive = scope === activeScope;
+            const accent =
+              scope === 'organisation'
+                ? 'border-emerald-500 text-emerald-700 dark:text-emerald-300'
+                : scope === 'team'
+                  ? 'border-blue-500 text-blue-700 dark:text-blue-300'
+                  : 'border-foreground text-foreground';
+            return (
+              <button
+                key={scope}
+                type="button"
+                role="tab"
+                aria-selected={isActive}
+                onClick={() => handleScopeChange(scope)}
+                className={cn(
+                  'flex-1 border-b-2 py-2 text-center font-bold text-xs uppercase tracking-wide',
+                  isActive ? accent : 'border-transparent text-muted-foreground',
+                )}
+                data-testid={`unified-settings-mobile-tab-${scope}`}
+              >
+                {scope === 'organisation' && <Trans>Organisation</Trans>}
+                {scope === 'team' && <Trans>Team</Trans>}
+                {scope === 'account' && <Trans>Account</Trans>}
+              </button>
+            );
+          })}
+        </div>
+      ) : (
+        <div className="px-4 py-2 text-center font-bold text-muted-foreground text-xs uppercase tracking-wide">
+          {activeScope === 'organisation' && <Trans>Organisation</Trans>}
+          {activeScope === 'team' && <Trans>Team</Trans>}
+          {activeScope === 'account' && <Trans>Account</Trans>}
+        </div>
+      )}
+
+      {/* The organisation switcher is always present in a scoped view — at team scope it's
+          the only way for a user who can't manage the organisation to move between them,
+          since the Organisation tab is absent when they have no organisation pages. */}
+      {activeScope !== 'account' && currentOrgUrl && (
+        <div className="flex flex-col gap-2 px-4">
+          <SettingsOrgSwitcher currentOrgUrl={currentOrgUrl} />
+
+          {activeScope === 'team' && (
+            <SettingsTeamSwitcher currentOrgUrl={currentOrgUrl} currentTeamUrl={currentTeamUrl} />
+          )}
+        </div>
+      )}
+
+      <div className="px-4">
+        <div className="mb-1 font-bold text-[10px] text-muted-foreground uppercase tracking-wide">
+          <Trans>Jump to</Trans>
+        </div>
+        <Select
+          value={selectedPath}
+          onValueChange={(value) => {
+            void navigate(value);
+          }}
+        >
+          <SelectTrigger data-testid="unified-settings-mobile-section-trigger">
+            <SelectValue placeholder={_(msg`Select a section`)} />
+          </SelectTrigger>
+          <SelectContent>
+            {selectableItems.map((item) => (
+              <SelectItem key={item.path} value={item.path}>
+                {item.isSubNav ? `${_(msg`Preferences`)} › ${_(item.label)}` : _(item.label)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/general/unified-settings-sidebar.tsx

@@ -0,0 +1,275 @@
+import type { SettingsNavGroups, SettingsNavItem, SettingsNavScope } from '@documenso/lib/utils/settings-nav';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@documenso/ui/primitives/collapsible';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { ChevronRightIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+import { useEffect, useState } from 'react';
+import { NavLink, useLocation } from 'react-router';
+
+import { SettingsOrgSwitcher } from './settings-org-switcher';
+import { SettingsTeamSwitcher } from './settings-team-switcher';
+
+export type UnifiedSettingsSidebarProps = {
+  groups: SettingsNavGroups;
+  currentOrgUrl: string | null;
+  currentTeamUrl: string | null;
+};
+
+export const UnifiedSettingsSidebar = ({ groups, currentOrgUrl, currentTeamUrl }: UnifiedSettingsSidebarProps) => {
+  return (
+    <aside className="flex w-full flex-col" data-testid="unified-settings-sidebar">
+      {currentOrgUrl && (
+        <div className="p-4">
+          <SidebarGroup
+            heading={<Trans>Organisation Settings</Trans>}
+            activeBgClassName="bg-[#F1FBEA] text-gray-900 hover:bg-[#F1FBEA] hover:text-gray-900 dark:bg-[#1C2515] dark:text-[#F1FBEA] dark:hover:bg-[#1C2515] dark:hover:text-[#F1FBEA]"
+            switcher={<SettingsOrgSwitcher currentOrgUrl={currentOrgUrl} />}
+            items={groups.organisation?.items ?? []}
+            scope="organisation"
+            emptyState={
+              <p
+                className="rounded-md border border-dashed px-3 py-2 text-muted-foreground text-xs"
+                data-testid="unified-settings-organisation-empty-state"
+              >
+                <Trans>
+                  You don't have permission to manage this organisation. Switch to another one above, or continue in
+                  your team settings below.
+                </Trans>
+              </p>
+            }
+          />
+        </div>
+      )}
+
+      {groups.team && currentOrgUrl && (
+        <div className="border-t p-4">
+          <SidebarGroup
+            heading={<Trans>Team Settings</Trans>}
+            activeBgClassName="bg-[#F1FBEA] text-gray-900 hover:bg-[#F1FBEA] hover:text-gray-900 dark:bg-[#1C2515] dark:text-[#F1FBEA] dark:hover:bg-[#1C2515] dark:hover:text-[#F1FBEA]"
+            switcher={<SettingsTeamSwitcher currentOrgUrl={currentOrgUrl} currentTeamUrl={currentTeamUrl} />}
+            items={groups.team.items}
+            scope={groups.team.scope}
+          />
+        </div>
+      )}
+
+      <div className={cn('p-4', currentOrgUrl && 'border-t')}>
+        <SidebarGroup
+          heading={<Trans>Account Settings</Trans>}
+          activeBgClassName="bg-[#F1FBEA] text-gray-900 hover:bg-[#F1FBEA] hover:text-gray-900 dark:bg-[#1C2515] dark:text-[#F1FBEA] dark:hover:bg-[#1C2515] dark:hover:text-[#F1FBEA]"
+          items={groups.account.items}
+          scope={groups.account.scope}
+        />
+      </div>
+    </aside>
+  );
+};
+
+type SidebarGroupProps = {
+  className?: string;
+  headingClassName?: string;
+  heading: ReactNode;
+  activeBgClassName: string;
+  switcher?: ReactNode;
+  items: SettingsNavItem[];
+  scope: SettingsNavScope;
+  emptyState?: ReactNode;
+};
+
+type GroupedNavEntry =
+  | { kind: 'flat'; item: SettingsNavItem }
+  | { kind: 'collapsible'; parent: SettingsNavItem; children: SettingsNavItem[] };
+
+/**
+ * Walk a flat item list and group consecutive `isSubNav` items under their preceding
+ * `isSubNavParent`. Anything else renders as a flat entry.
+ */
+const groupNavEntries = (items: SettingsNavItem[]): GroupedNavEntry[] => {
+  const entries: GroupedNavEntry[] = [];
+  let currentCollapsible: { parent: SettingsNavItem; children: SettingsNavItem[] } | null = null;
+
+  for (const item of items) {
+    if (item.isSubNavParent) {
+      currentCollapsible = { parent: item, children: [] };
+      entries.push({ kind: 'collapsible', ...currentCollapsible });
+      continue;
+    }
+
+    if (item.isSubNav && currentCollapsible) {
+      currentCollapsible.children.push(item);
+      continue;
+    }
+
+    currentCollapsible = null;
+    entries.push({ kind: 'flat', item });
+  }
+
+  return entries;
+};
+
+const SidebarGroup = ({
+  className,
+  headingClassName,
+  heading,
+  activeBgClassName,
+  switcher,
+  items,
+  scope,
+  emptyState,
+}: SidebarGroupProps) => {
+  const grouped = groupNavEntries(items);
+
+  return (
+    <div className={className} data-testid="unified-settings-sidebar-group">
+      <div
+        className={cn('mb-2 font-semibold text-muted-foreground text-xs uppercase tracking-widest', headingClassName)}
+      >
+        {heading}
+      </div>
+      {switcher && <div className="mb-2">{switcher}</div>}
+
+      {items.length === 0 && emptyState}
+
+      <nav className="flex flex-col gap-1">
+        {grouped.map((entry) => {
+          if (entry.kind === 'flat') {
+            return (
+              <FlatNavItem
+                key={`${entry.item.key}-${entry.item.path}`}
+                item={entry.item}
+                activeBgClassName={activeBgClassName}
+                scope={scope}
+              />
+            );
+          }
+
+          return (
+            <CollapsibleNavSection
+              key={`${entry.parent.key}-${entry.parent.path}`}
+              parent={entry.parent}
+              childItems={entry.children}
+              activeBgClassName={activeBgClassName}
+              scope={scope}
+            />
+          );
+        })}
+      </nav>
+    </div>
+  );
+};
+
+type FlatNavItemProps = {
+  item: SettingsNavItem;
+  activeBgClassName: string;
+  scope: SettingsNavScope;
+};
+
+const FlatNavItem = ({ item, activeBgClassName, scope }: FlatNavItemProps) => {
+  const { _ } = useLingui();
+  const { pathname } = useLocation();
+
+  // The General items link to the settings root, which prefixes every other
+  // item's path — those require an exact match. Everything else highlights on
+  // its sub-routes too (e.g. Security on /settings/security/passkeys).
+  const isActive =
+    item.key === 'general' ? pathname === item.path : pathname === item.path || pathname.startsWith(`${item.path}/`);
+
+  return (
+    <NavLink to={item.path} className="group block" data-testid={`unified-settings-nav-${scope}-${item.key}`} end>
+      <Button
+        variant="ghost"
+        size="sm"
+        className={cn(
+          'h-8 w-full justify-start font-normal text-muted-foreground',
+          isActive && cn(activeBgClassName, 'font-medium'),
+        )}
+      >
+        {item.icon && <item.icon className="mr-2 h-4 w-4" />}
+        {_(item.label)}
+      </Button>
+    </NavLink>
+  );
+};
+
+type CollapsibleNavSectionProps = {
+  parent: SettingsNavItem;
+  childItems: SettingsNavItem[];
+  activeBgClassName: string;
+  scope: SettingsNavScope;
+};
+
+const CollapsibleNavSection = ({ parent, childItems, activeBgClassName, scope }: CollapsibleNavSectionProps) => {
+  const { _ } = useLingui();
+  const { pathname } = useLocation();
+
+  const hasActiveChild = childItems.some((child) => pathname === child.path || pathname.startsWith(`${child.path}/`));
+
+  const [isOpen, setIsOpen] = useState(hasActiveChild);
+
+  // Auto-open when navigating to a sub-route. Closing while on a sub-route is
+  // respected (state stays closed) until the user navigates away and back.
+  useEffect(() => {
+    if (hasActiveChild) {
+      setIsOpen(true);
+    }
+  }, [hasActiveChild]);
+
+  const ParentIcon = parent.icon ? parent.icon : null;
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <CollapsibleTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className={cn(
+            'h-8 w-full justify-start font-normal text-muted-foreground',
+            // Emphasise the parent when one of its children is the active page.
+            hasActiveChild && 'font-medium text-foreground',
+          )}
+          data-testid={`unified-settings-nav-${scope}-${parent.key}`}
+          aria-expanded={isOpen}
+        >
+          {ParentIcon && <ParentIcon className="mr-2 h-4 w-4" />}
+          {_(parent.label)}
+          <ChevronRightIcon
+            className={cn('ml-auto h-4 w-4 transition-transform duration-200', isOpen && 'rotate-90')}
+          />
+        </Button>
+      </CollapsibleTrigger>
+
+      {/* data-[state=closed]:hidden — the `flex` display class would otherwise
+          defeat the `hidden` attribute Radix sets when closed, leaving the
+          empty content box (and its mt-1) inflating the gap below the trigger. */}
+      <CollapsibleContent className="mt-1 flex flex-col gap-1 data-[state=closed]:hidden">
+        {childItems.map((child) => {
+          const isActive = pathname === child.path || pathname.startsWith(`${child.path}/`);
+
+          return (
+            <NavLink
+              key={`${child.key}-${child.path}`}
+              to={child.path}
+              className="group block pl-6"
+              data-testid={`unified-settings-nav-${scope}-${child.key}`}
+            >
+              <Button
+                variant="ghost"
+                size="sm"
+                className={cn(
+                  'h-8 w-full justify-start font-normal text-muted-foreground',
+                  isActive && cn(activeBgClassName, 'font-medium'),
+                )}
+              >
+                {_(child.label)}
+              </Button>
+            </NavLink>
+          );
+        })}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};

apps/remix/app/components/tables/organisation-teams-table.tsx

@@ -76,7 +76,7 @@ export const OrganisationTeamsTable = () => {
         cell: ({ row }) => (
           <div className="flex justify-end space-x-2">
             <Button variant="outline" asChild>
-              <Link to={`/t/${row.original.url}/settings`}>
+              <Link to={`/t/${row.original.url}/settings/general`}>
                 <Trans>Manage</Trans>
               </Link>
             </Button>

apps/remix/app/components/tables/user-organisations-table.tsx

@@ -2,7 +2,7 @@ import { useSession } from '@documenso/lib/client-only/providers/session';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations-translations';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
-import { canExecuteOrganisationAction, isPersonalLayout } from '@documenso/lib/utils/organisations';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
@@ -29,8 +29,6 @@ export const UserOrganisationsTable = () => {
     })),
   });
 
-  const isPersonalLayoutMode = isPersonalLayout(data);
-
   const results = {
     data: data || [],
     perPage: 10,
@@ -44,31 +42,13 @@ export const UserOrganisationsTable = () => {
         header: _(msg`Organisation`),
         accessorKey: 'name',
         cell: ({ row }) => (
-          <Link
-            to={isPersonalLayoutMode ? `/settings/organisations` : `/o/${row.original.url}`}
-            preventScrollReset={true}
-          >
+          <Link to={`/o/${row.original.url}`} preventScrollReset={true}>
             <AvatarWithText
               avatarSrc={formatAvatarUrl(row.original.avatarImageId)}
               avatarClass="h-12 w-12"
               avatarFallback={row.original.name.slice(0, 1).toUpperCase()}
-              primaryText={
-                <span className="font-semibold text-foreground/80">
-                  {isPersonalLayoutMode
-                    ? _(
-                        msg({
-                          message: `Personal`,
-                          context: `Personal organisation (adjective)`,
-                        }),
-                      )
-                    : row.original.name}
-                </span>
-              }
-              secondaryText={
-                isPersonalLayoutMode
-                  ? _(msg`Your personal organisation`)
-                  : `${NEXT_PUBLIC_WEBAPP_URL()}/o/${row.original.url}`
-              }
+              primaryText={<span className="font-semibold text-foreground/80">{row.original.name}</span>}
+              secondaryText={`${NEXT_PUBLIC_WEBAPP_URL()}/o/${row.original.url}`}
             />
           </Link>
         ),
@@ -92,7 +72,7 @@ export const UserOrganisationsTable = () => {
           <div className="flex justify-end space-x-2">
             {canExecuteOrganisationAction('MANAGE_ORGANISATION', row.original.currentOrganisationRole) && (
               <Button variant="outline" asChild>
-                <Link to={`/o/${row.original.url}/settings`}>
+                <Link to={`/o/${row.original.url}/settings/general`}>
                   <Trans>Manage</Trans>
                 </Link>
               </Button>
@@ -117,7 +97,7 @@ export const UserOrganisationsTable = () => {
         ),
       },
     ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
-  }, [isPersonalLayoutMode]);
+  }, []);
 
   return (
     <div>
@@ -130,9 +110,6 @@ export const UserOrganisationsTable = () => {
         error={{
           enable: isLoadingError,
         }}
-        columnVisibility={{
-          actions: !isPersonalLayoutMode,
-        }}
         skeleton={{
           enable: isLoading,
           rows: 3,
@@ -154,14 +131,12 @@ export const UserOrganisationsTable = () => {
               <TableCell>
                 <Skeleton className="h-4 w-20 rounded-full" />
               </TableCell>
-              {!isPersonalLayoutMode && (
-                <TableCell>
-                  <div className="flex flex-row justify-end space-x-2">
-                    <Skeleton className="h-10 w-20 rounded" />
-                    <Skeleton className="h-10 w-16 rounded" />
-                  </div>
-                </TableCell>
-              )}
+              <TableCell>
+                <div className="flex flex-row justify-end space-x-2">
+                  <Skeleton className="h-10 w-20 rounded" />
+                  <Skeleton className="h-10 w-16 rounded" />
+                </div>
+              </TableCell>
             </>
           ),
         }}

apps/remix/app/routes/_authenticated+/_layout.tsx

@@ -1,4 +1,5 @@
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
+import { useChildRouteFlags } from '@documenso/lib/client-only/hooks/use-child-route-flags';
 import { OrganisationProvider } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { getSiteSettings } from '@documenso/lib/server-only/site-settings/get-site-settings';
@@ -46,6 +47,8 @@ export default function Layout({ loaderData, params, matches }: Route.ComponentP
 
   const { user, organisations } = useSession();
 
+  const { layoutMode } = useChildRouteFlags();
+
   const teamUrl = params.teamUrl;
   const orgUrl = params.orgUrl;
 
@@ -108,23 +111,26 @@ export default function Layout({ loaderData, params, matches }: Route.ComponentP
   return (
     <OrganisationProvider organisation={currentOrganisation}>
       <TeamProvider team={currentTeam || null}>
-        <OrganisationBillingBanner />
+        <div className={cn({ 'md:flex md:h-dvh md:flex-col md:overflow-hidden': layoutMode === 'settings' })}>
+          <OrganisationBillingBanner />
 
-        <OrganisationQuotaBanner />
+          <OrganisationQuotaBanner />
 
-        {!user.emailVerified && <VerifyEmailBanner email={user.email} />}
+          {!user.emailVerified && <VerifyEmailBanner email={user.email} />}
 
-        {banner && !hideHeader && <AppBanner banner={banner} />}
+          {banner && !hideHeader && <AppBanner banner={banner} />}
 
-        {!hideHeader && <Header />}
+          {!hideHeader && <Header fullWidth={layoutMode === 'settings'} />}
 
-        <main
-          className={cn({
-            'mt-8 pb-8 md:mt-12 md:pb-12': !hideHeader,
-          })}
-        >
-          <Outlet />
-        </main>
+          <main
+            className={cn({
+              'mt-8 pb-8 md:mt-12 md:pb-12': !hideHeader && layoutMode !== 'settings',
+              'md:flex md:min-h-0 md:flex-1 md:flex-col': layoutMode === 'settings',
+            })}
+          >
+            <Outlet />
+          </main>
+        </div>
       </TeamProvider>
     </OrganisationProvider>
   );

apps/remix/app/routes/_authenticated+/admin+/claims.tsx

@@ -53,7 +53,7 @@ export default function Claims({ loaderData }: Route.ComponentProps) {
 
   return (
     <div>
-      <SettingsHeader title={t`Subscription Claims`} subtitle={t`Manage all subscription claims`} hideDivider>
+      <SettingsHeader hideDivider title={t`Subscription Claims`} subtitle={t`Manage all subscription claims`}>
         <ClaimCreateDialog licenseFlags={licenseFlags} />
       </SettingsHeader>
 

apps/remix/app/routes/_authenticated+/admin+/email-transports._index.tsx

@@ -40,7 +40,7 @@ export default function AdminEmailTransportsPage() {
 
   return (
     <div>
-      <SettingsHeader title={t`Email Transports`} subtitle={t`Manage all email transports`} hideDivider>
+      <SettingsHeader hideDivider title={t`Email Transports`} subtitle={t`Manage all email transports`}>
         <EmailTransportCreateDialog />
       </SettingsHeader>
 

apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx

@@ -258,7 +258,11 @@ export default function OrganisationGroupSettingsPage({ params, loaderData }: Ro
 
   return (
     <div>
-      <SettingsHeader title={t`Manage organisation`} subtitle={t`Manage the ${organisation.name} organisation`}>
+      <SettingsHeader
+        hideDivider
+        title={t`Manage organisation`}
+        subtitle={t`Manage the ${organisation.name} organisation`}
+      >
         <Button variant="outline" asChild>
           <Link to={`/admin/organisation-insights/${organisationId}`}>
             <Trans>View insights</Trans>
@@ -269,10 +273,10 @@ export default function OrganisationGroupSettingsPage({ params, loaderData }: Ro
       <GenericOrganisationAdminForm organisation={organisation} />
 
       <SettingsHeader
+        hideDivider
         title={t`Organisation usage`}
         subtitle={t`Current usage against organisation limits.`}
         className="mt-6"
-        hideDivider
       />
 
       <OrganisationUsagePanel
@@ -308,6 +312,7 @@ export default function OrganisationGroupSettingsPage({ params, loaderData }: Ro
       </div>
 
       <SettingsHeader
+        hideDivider
         title={t`Manage subscription`}
         subtitle={t`Manage the ${organisation.name} organisation subscription`}
         className="mt-16"
@@ -425,6 +430,7 @@ export default function OrganisationGroupSettingsPage({ params, loaderData }: Ro
       </div>
 
       <SettingsHeader
+        hideDivider
         title={t`Danger Zone`}
         subtitle={t`Irreversible actions for this organisation`}
         className="mt-16"

apps/remix/app/routes/_authenticated+/dashboard.tsx

@@ -143,7 +143,7 @@ export default function DashboardPage() {
 
                   {canExecuteOrganisationAction('MANAGE_ORGANISATION', org.currentOrganisationRole) && (
                     <div className="absolute top-4 right-4 text-muted-foreground opacity-0 transition-opacity duration-200 group-hover:opacity-100">
-                      <Link to={`/o/${org.url}/settings`}>
+                      <Link to={`/o/${org.url}/settings/general`}>
                         <SettingsIcon className="h-4 w-4" />
                       </Link>
                     </div>
@@ -212,7 +212,7 @@ export default function DashboardPage() {
 
                     {canExecuteTeamAction('MANAGE_TEAM', team.currentTeamRole) && (
                       <div className="absolute top-4 right-4 text-muted-foreground opacity-0 transition-opacity duration-200 group-hover:opacity-100">
-                        <Link to={`/t/${team.url}/settings`}>
+                        <Link to={`/t/${team.url}/settings/general`}>
                           <SettingsIcon className="h-4 w-4" />
                         </Link>
                       </div>

apps/remix/app/routes/_authenticated+/o.$orgUrl._index.tsx

@@ -115,7 +115,7 @@ export default function OrganisationSettingsTeamsPage() {
         </div>
 
         <Button asChild>
-          <Link to={`/o/${organisation.url}/settings`}>
+          <Link to={`/o/${organisation.url}/settings/general`}>
             <Trans>Manage Organisation</Trans>
           </Link>
         </Button>
@@ -184,7 +184,7 @@ const TeamDropdownMenu = ({ team }: { team: TGetOrganisationSessionResponse[0]['
           </Link>
         </DropdownMenuItem>
         <DropdownMenuItem asChild>
-          <Link to={`/t/${team.url}/settings`}>
+          <Link to={`/t/${team.url}/settings/general`}>
             <SettingsIcon className="mr-2 h-4 w-4" />
             <Trans>Settings</Trans>
           </Link>

apps/remix/app/routes/_authenticated+/o.$orgUrl._layout.tsx

@@ -1,13 +1,23 @@
+import { useChildRouteFlags } from '@documenso/lib/client-only/hooks/use-child-route-flags';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { cn } from '@documenso/ui/lib/utils';
 import { Outlet } from 'react-router';
 
 export default function Layout() {
   const currentOrganisation = useCurrentOrganisation();
 
+  const { layoutMode } = useChildRouteFlags();
+
   // Note: We use a key to force a re-render if the team context changes.
   // This is required otherwise you would see the wrong page content.
   return (
-    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8" key={currentOrganisation.url}>
+    <div
+      className={cn({
+        'mx-auto w-full max-w-screen-xl px-4 md:px-8': layoutMode !== 'settings',
+        'md:flex md:min-h-0 md:flex-1 md:flex-col': layoutMode === 'settings',
+      })}
+      key={currentOrganisation.url}
+    >
       <Outlet />
     </div>
   );

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings._index.tsx

@@ -1,11 +0,0 @@
-import { redirect } from 'react-router';
-
-import type { Route } from './+types/_layout';
-
-export function loader({ params }: Route.LoaderArgs) {
-  if (params.orgUrl) {
-    throw redirect(`/o/${params.orgUrl}/settings/general`);
-  }
-
-  throw redirect('/');
-}

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings._layout.tsx

@@ -1,173 +1,45 @@
-import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
-import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
+import { extractCookieFromHeaders } from '@documenso/auth/server/lib/utils/cookies';
+import { extractCookieFromDocument } from '@documenso/lib/client-only/cookies';
+import type { RouteHandle } from '@documenso/lib/client-only/hooks/use-child-route-flags';
+import { PREFERRED_TEAM_URL_COOKIE } from '@documenso/lib/constants/cookies';
 import { msg } from '@lingui/core/macro';
-import { Trans, useLingui } from '@lingui/react/macro';
-import {
-  Building2Icon,
-  CreditCardIcon,
-  GroupIcon,
-  MailboxIcon,
-  Settings2Icon,
-  ShieldCheckIcon,
-  Users2Icon,
-} from 'lucide-react';
-import { FaUsers } from 'react-icons/fa6';
-import { Link, NavLink, Outlet } from 'react-router';
 
-import { GenericErrorLayout } from '~/components/general/generic-error-layout';
+import { UnifiedSettingsLayout } from '~/components/general/unified-settings-layout';
 import { appMetaTags } from '~/utils/meta';
 
+import type { Route } from './+types/o.$orgUrl.settings._layout';
+
 export function meta() {
   return appMetaTags(msg`Organisation Settings`);
 }
 
-export default function SettingsLayout() {
-  const { t } = useLingui();
+export const handle: RouteHandle = {
+  layoutMode: 'settings',
+};
 
-  const isBillingEnabled = IS_BILLING_ENABLED();
-  const organisation = useCurrentOrganisation();
-
-  const organisationSettingRoutes = [
-    {
-      path: `/o/${organisation.url}/settings/general`,
-      label: t`General`,
-      icon: Building2Icon,
-    },
-    {
-      path: `/o/${organisation.url}/settings/document`,
-      label: t`Preferences`,
-      icon: Settings2Icon,
-      hideHighlight: true,
-    },
-    {
-      path: `/o/${organisation.url}/settings/document`,
-      label: t`Document`,
-      isSubNav: true,
-    },
-    {
-      path: `/o/${organisation.url}/settings/branding`,
-      label: t`Branding`,
-      isSubNav: true,
-    },
-    {
-      path: `/o/${organisation.url}/settings/email`,
-      label: t`Email`,
-      isSubNav: true,
-    },
-    {
-      path: `/o/${organisation.url}/settings/email-domains`,
-      label: t`Email Domains`,
-      icon: MailboxIcon,
-    },
-    {
-      path: `/o/${organisation.url}/settings/teams`,
-      label: t`Teams`,
-      icon: FaUsers,
-    },
-    {
-      path: `/o/${organisation.url}/settings/members`,
-      label: t`Members`,
-      icon: Users2Icon,
-    },
-    {
-      path: `/o/${organisation.url}/settings/groups`,
-      label: t`Groups`,
-      icon: GroupIcon,
-    },
-    {
-      path: `/o/${organisation.url}/settings/sso`,
-      label: t`SSO`,
-      icon: ShieldCheckIcon,
-    },
-    {
-      path: `/o/${organisation.url}/settings/billing`,
-      label: t`Billing`,
-      icon: CreditCardIcon,
-    },
-  ].filter((route) => {
-    if (!isBillingEnabled && route.path.includes('/billing')) {
-      return false;
-    }
-
-    if (
-      (!isBillingEnabled || !organisation.organisationClaim.flags.emailDomains) &&
-      route.path.includes('/email-domains')
-    ) {
-      return false;
-    }
-
-    if (
-      (!isBillingEnabled || !organisation.organisationClaim.flags.authenticationPortal) &&
-      route.path.includes('/sso')
-    ) {
-      return false;
-    }
-
-    return true;
-  });
-
-  if (!canExecuteOrganisationAction('MANAGE_ORGANISATION', organisation.currentOrganisationRole)) {
-    return (
-      <GenericErrorLayout
-        errorCode={401}
-        errorCodeMap={{
-          401: {
-            heading: msg`Unauthorized`,
-            subHeading: msg`401 Unauthorized`,
-            message: msg`You are not authorized to access this page.`,
-          },
-        }}
-        primaryButton={
-          <Button asChild>
-            <Link to={`/o/${organisation.url}`}>
-              <Trans>Go Back</Trans>
-            </Link>
-          </Button>
-        }
-        secondaryButton={null}
-      />
-    );
-  }
-
-  return (
-    <div>
-      <h1 className="font-semibold text-4xl">
-        <Trans>Organisation Settings</Trans>
-      </h1>
-
-      <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
-        {/* Navigation */}
-        <div
-          className={cn(
-            'col-span-12 mb-8 flex flex-wrap items-center justify-start gap-x-2 gap-y-4 md:col-span-3 md:w-full md:flex-col md:items-start md:gap-y-2',
-          )}
-        >
-          {organisationSettingRoutes.map((route) => (
-            <NavLink
-              to={route.path}
-              className={cn('group w-full justify-start', route.isSubNav && 'pl-8')}
-              key={route.path}
-            >
-              <Button
-                variant="ghost"
-                className={cn('w-full justify-start', {
-                  'group-aria-[current]:bg-secondary': !route.hideHighlight,
-                })}
-              >
-                {route.icon && <route.icon className="mr-2 h-5 w-5" />}
-                <Trans>{route.label}</Trans>
-              </Button>
-            </NavLink>
-          ))}
-        </div>
-
-        <div className="col-span-12 md:col-span-9">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
+/**
+ * Only runs on the initial document request (SSR) so the first paint has the
+ * correct preferred team without a hydration mismatch.
+ */
+export function loader({ request }: Route.LoaderArgs) {
+  return {
+    preferredTeamUrl: extractCookieFromHeaders(PREFERRED_TEAM_URL_COOKIE, request.headers),
+  };
+}
+
+/**
+ * Runs instead of the server loader on client-side navigations, otherwise every
+ * settings page switch would trigger a `.data` round-trip to the server just to
+ * read this cookie.
+ *
+ * The cookie is not `HttpOnly` so it can be read straight from the document.
+ */
+export function clientLoader() {
+  return {
+    preferredTeamUrl: extractCookieFromDocument(PREFERRED_TEAM_URL_COOKIE),
+  };
+}
+
+export default function OrganisationSettingsLayout({ loaderData }: Route.ComponentProps) {
+  return <UnifiedSettingsLayout activeScope="organisation" preferredTeamUrl={loaderData.preferredTeamUrl} />;
 }

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.branding.tsx

@@ -1,7 +1,6 @@
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { useSession } from '@documenso/lib/client-only/providers/session';
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
-import { canExecuteOrganisationAction, isPersonalLayout } from '@documenso/lib/utils/organisations';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
 import type { SanitizeBrandingCssWarning } from '@documenso/lib/utils/sanitize-branding-css';
 import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
@@ -26,16 +25,12 @@ export function meta() {
 }
 
 export default function OrganisationSettingsBrandingPage() {
-  const { organisations } = useSession();
-
   const organisation = useCurrentOrganisation();
   const team = useOptionalCurrentTeam();
 
   const { t } = useLingui();
   const { toast } = useToast();
 
-  const isPersonalLayoutMode = isPersonalLayout(organisations);
-
   const [cssWarnings, setCssWarnings] = useState<SanitizeBrandingCssWarning[]>([]);
 
   const {
@@ -122,14 +117,12 @@ export default function OrganisationSettingsBrandingPage() {
 
   const settingsHeaderText = t`Branding Preferences`;
 
-  const settingsHeaderSubtitle = isPersonalLayoutMode
-    ? t`Here you can set your general branding preferences.`
-    : team
-      ? t`Here you can set branding preferences for your team.`
-      : t`Here you can set branding preferences for your organisation. Teams will inherit these settings by default.`;
+  const settingsHeaderSubtitle = team
+    ? t`Here you can set branding preferences for your team.`
+    : t`Here you can set branding preferences for your organisation. Teams will inherit these settings by default.`;
 
   return (
-    <div className="max-w-2xl">
+    <div>
       <SettingsHeader title={settingsHeaderText} subtitle={settingsHeaderSubtitle} />
 
       {organisationWithSettings.organisationClaim.flags.allowCustomBranding || !IS_BILLING_ENABLED() ? (
@@ -181,7 +174,7 @@ export default function OrganisationSettingsBrandingPage() {
 
           {canExecuteOrganisationAction('MANAGE_BILLING', organisation.currentOrganisationRole) && (
             <Button asChild variant="outline">
-              <Link to={isPersonalLayoutMode ? '/settings/billing' : `/o/${organisation.url}/settings/billing`}>
+              <Link to={`/o/${organisation.url}/settings/billing`}>
                 <Trans>Update Billing</Trans>
               </Link>
             </Button>

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.certificates.tsx

@@ -0,0 +1,80 @@
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { trpc } from '@documenso/trpc/react';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { useLingui } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
+
+import {
+  CertificatePreferencesForm,
+  type TCertificatePreferencesFormSchema,
+} from '~/components/forms/certificate-preferences-form';
+import { SettingsHeader } from '~/components/general/settings-header';
+
+export default function OrganisationSettingsCertificatesPage() {
+  const organisation = useCurrentOrganisation();
+
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const { data: organisationWithSettings, isLoading: isLoadingOrganisation } = trpc.organisation.get.useQuery({
+    organisationReference: organisation.url,
+  });
+
+  const { mutateAsync: updateOrganisationSettings } = trpc.organisation.settings.update.useMutation();
+
+  const onCertificatePreferencesFormSubmit = async (data: TCertificatePreferencesFormSchema) => {
+    try {
+      const { includeSigningCertificate, includeAuditLog } = data;
+
+      if (includeSigningCertificate === null || includeAuditLog === null) {
+        throw new Error('Should not be possible.');
+      }
+
+      await updateOrganisationSettings({
+        organisationId: organisation.id,
+        data: {
+          includeSigningCertificate,
+          includeAuditLog,
+        },
+      });
+
+      toast({
+        title: t`Certificate preferences updated`,
+        description: t`Your certificate preferences have been updated`,
+      });
+    } catch (err) {
+      toast({
+        title: t`Something went wrong!`,
+        description: t`We were unable to update your certificate preferences at this time, please try again later`,
+        variant: 'destructive',
+      });
+
+      throw err;
+    }
+  };
+
+  if (isLoadingOrganisation || !organisationWithSettings) {
+    return (
+      <div className="flex items-center justify-center rounded-lg py-32">
+        <Loader className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <SettingsHeader
+        title={t`Certificates`}
+        subtitle={t`Here you can set certificate and audit log preferences for your organisation. Teams will inherit these settings by default.`}
+      />
+
+      <section>
+        <CertificatePreferencesForm
+          canInherit={false}
+          settings={organisationWithSettings.organisationGlobalSettings}
+          onFormSubmit={onCertificatePreferencesFormSubmit}
+        />
+      </section>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.document.tsx

@@ -1,14 +1,10 @@
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { IS_AI_FEATURES_CONFIGURED } from '@documenso/lib/constants/app';
 import { DocumentSignatureType } from '@documenso/lib/constants/document';
-import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
-import { useLoaderData } from 'react-router';
 
 import {
   DocumentPreferencesForm,
@@ -21,23 +17,12 @@ export function meta() {
   return appMetaTags(msg`Document Preferences`);
 }
 
-export const loader = () => {
-  return {
-    isAiFeaturesConfigured: IS_AI_FEATURES_CONFIGURED(),
-  };
-};
-
 export default function OrganisationSettingsDocumentPage() {
-  const { isAiFeaturesConfigured } = useLoaderData<typeof loader>();
-
-  const { organisations } = useSession();
   const organisation = useCurrentOrganisation();
 
   const { t } = useLingui();
   const { toast } = useToast();
 
-  const isPersonalLayoutMode = isPersonalLayout(organisations);
-
   const { data: organisationWithSettings, isLoading: isLoadingOrganisation } = trpc.organisation.get.useQuery({
     organisationReference: organisation.url,
   });
@@ -51,24 +36,16 @@ export default function OrganisationSettingsDocumentPage() {
         documentLanguage,
         documentTimezone,
         documentDateFormat,
-        includeSenderDetails,
-        includeSigningCertificate,
-        includeAuditLog,
         signatureTypes,
         defaultRecipients,
         delegateDocumentOwnership,
         aiFeaturesEnabled,
-        envelopeExpirationPeriod,
-        reminderSettings,
       } = data;
 
       if (
         documentVisibility === null ||
         documentLanguage === null ||
         documentDateFormat === null ||
-        includeSenderDetails === null ||
-        includeSigningCertificate === null ||
-        includeAuditLog === null ||
         aiFeaturesEnabled === null
       ) {
         throw new Error('Should not be possible.');
@@ -81,17 +58,12 @@ export default function OrganisationSettingsDocumentPage() {
           documentLanguage,
           documentTimezone,
           documentDateFormat,
-          includeSenderDetails,
-          includeSigningCertificate,
-          includeAuditLog,
           defaultRecipients,
           typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
           uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
           drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
           delegateDocumentOwnership,
           aiFeaturesEnabled,
-          envelopeExpirationPeriod: envelopeExpirationPeriod ?? undefined,
-          reminderSettings: reminderSettings ?? undefined,
         },
       });
 
@@ -119,18 +91,15 @@ export default function OrganisationSettingsDocumentPage() {
   }
 
   const settingsHeaderText = t`Document Preferences`;
-  const settingsHeaderSubtitle = isPersonalLayoutMode
-    ? t`Here you can set your general document preferences.`
-    : t`Here you can set document preferences for your organisation. Teams will inherit these settings by default.`;
+  const settingsHeaderSubtitle = t`Here you can set document preferences for your organisation. Teams will inherit these settings by default.`;
 
   return (
-    <div className="max-w-2xl">
+    <div>
       <SettingsHeader title={settingsHeaderText} subtitle={settingsHeaderSubtitle} />
 
       <section>
         <DocumentPreferencesForm
           canInherit={false}
-          isAiFeaturesConfigured={isAiFeaturesConfigured}
           settings={organisationWithSettings.organisationGlobalSettings}
           onFormSubmit={onDocumentPreferencesFormSubmit}
         />

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.email-domains.$id.tsx

@@ -132,7 +132,7 @@ export default function OrganisationEmailDomainSettingsPage({ params }: Route.Co
 
   return (
     <div>
-      <SettingsHeader title={t`Email Domain Settings`} subtitle={t`Manage your email domain settings.`}>
+      <SettingsHeader hideDivider title={t`Email Domain Settings`} subtitle={t`Manage your email domain settings.`}>
         <OrganisationEmailCreateDialog emailDomain={emailDomain} />
       </SettingsHeader>
 

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.email-domains._index.tsx

@@ -1,7 +1,6 @@
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { useSession } from '@documenso/lib/client-only/providers/session';
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
-import { canExecuteOrganisationAction, isPersonalLayout } from '@documenso/lib/utils/organisations';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { msg } from '@lingui/core/macro';
@@ -19,12 +18,9 @@ export function meta() {
 
 export default function OrganisationSettingsEmailDomains() {
   const { t } = useLingui();
-  const { organisations } = useSession();
 
   const organisation = useCurrentOrganisation();
 
-  const isPersonalLayoutMode = isPersonalLayout(organisations);
-
   const isEmailDomainsEnabled = organisation.organisationClaim.flags.emailDomains;
 
   if (!IS_BILLING_ENABLED()) {
@@ -33,7 +29,11 @@ export default function OrganisationSettingsEmailDomains() {
 
   return (
     <div>
-      <SettingsHeader title={t`Email Domains`} subtitle={t`Here you can add email domains to your organisation.`}>
+      <SettingsHeader
+        hideDivider
+        title={t`Email Domains`}
+        subtitle={t`Here you can add email domains to your organisation.`}
+      >
         {isEmailDomainsEnabled && <OrganisationEmailDomainCreateDialog />}
       </SettingsHeader>
 
@@ -55,7 +55,7 @@ export default function OrganisationSettingsEmailDomains() {
 
           {canExecuteOrganisationAction('MANAGE_BILLING', organisation.currentOrganisationRole) && (
             <Button asChild variant="outline">
-              <Link to={isPersonalLayoutMode ? '/settings/billing' : `/o/${organisation.url}/settings/billing`}>
+              <Link to={`/o/${organisation.url}/settings/billing`}>
                 <Trans>Update Billing</Trans>
               </Link>
             </Button>

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.email.tsx

@@ -27,7 +27,7 @@ export default function OrganisationSettingsGeneral() {
 
   const onEmailPreferencesSubmit = async (data: TEmailPreferencesFormSchema) => {
     try {
-      const { emailId, emailReplyTo, emailDocumentSettings } = data;
+      const { emailId, emailReplyTo, emailDocumentSettings, includeSenderDetails } = data;
 
       await updateOrganisationSettings({
         organisationId: organisation.id,
@@ -36,6 +36,7 @@ export default function OrganisationSettingsGeneral() {
           emailReplyTo: emailReplyTo || null,
           // emailReplyToName,
           emailDocumentSettings,
+          includeSenderDetails: includeSenderDetails ?? undefined,
         },
       });
 
@@ -59,7 +60,7 @@ export default function OrganisationSettingsGeneral() {
   }
 
   return (
-    <div className="max-w-2xl">
+    <div>
       <SettingsHeader title={t`Email Preferences`} subtitle={t`You can manage your email preferences here.`} />
 
       <section>

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.general.tsx

@@ -21,7 +21,7 @@ export default function OrganisationSettingsGeneral() {
   const organisation = useCurrentOrganisation();
 
   return (
-    <div className="max-w-2xl">
+    <div>
       <SettingsHeader title={_(msg`General`)} subtitle={_(msg`Here you can edit your organisation details.`)} />
 
       <div className="space-y-8">
@@ -30,23 +30,19 @@ export default function OrganisationSettingsGeneral() {
       </div>
 
       {canExecuteOrganisationAction('DELETE_ORGANISATION', organisation.currentOrganisationRole) && (
-        <>
-          <hr className="my-4" />
+        <Alert className="flex flex-col justify-between p-6 sm:flex-row sm:items-center" variant="neutral">
+          <div className="mb-4 sm:mb-0">
+            <AlertTitle>
+              <Trans>Delete organisation</Trans>
+            </AlertTitle>
 
-          <Alert className="flex flex-col justify-between p-6 sm:flex-row sm:items-center" variant="neutral">
-            <div className="mb-4 sm:mb-0">
-              <AlertTitle>
-                <Trans>Delete organisation</Trans>
-              </AlertTitle>
+            <AlertDescription className="mr-2">
+              <Trans>This organisation, and any associated data will be permanently deleted.</Trans>
+            </AlertDescription>
+          </div>
 
-              <AlertDescription className="mr-2">
-                <Trans>This organisation, and any associated data will be permanently deleted.</Trans>
-              </AlertDescription>
-            </div>
-
-            <OrganisationDeleteDialog />
-          </Alert>
-        </>
+          <OrganisationDeleteDialog />
+        </Alert>
       )}
     </div>
   );

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.groups.$id.tsx

@@ -94,7 +94,11 @@ export default function OrganisationGroupSettingsPage({ params }: Route.Componen
 
   return (
     <div>
-      <SettingsHeader title={t`Organisation Group Settings`} subtitle={t`Manage your organisation group settings.`}>
+      <SettingsHeader
+        hideDivider
+        title={t`Organisation Group Settings`}
+        subtitle={t`Manage your organisation group settings.`}
+      >
         <OrganisationGroupDeleteDialog
           organisationGroupId={groupId}
           organisationGroupName={group.name || ''}

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.groups._index.tsx

@@ -10,6 +10,7 @@ export default function TeamsSettingsMembersPage() {
   return (
     <div>
       <SettingsHeader
+        hideDivider
         title={t`Custom Organisation Groups`}
         subtitle={t`Manage the custom groups of members for your organisation.`}
       >

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.members.tsx

@@ -46,7 +46,11 @@ export default function TeamsSettingsMembersPage() {
 
   return (
     <div>
-      <SettingsHeader title={_(msg`Organisation Members`)} subtitle={_(msg`Manage the members or invite new members.`)}>
+      <SettingsHeader
+        hideDivider
+        title={_(msg`Organisation Members`)}
+        subtitle={_(msg`Manage the members or invite new members.`)}
+      >
         <OrganisationMemberInviteDialog />
       </SettingsHeader>
 

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.reminders.tsx

@@ -0,0 +1,76 @@
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { trpc } from '@documenso/trpc/react';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { useLingui } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
+
+import {
+  ReminderPreferencesForm,
+  type TReminderPreferencesFormSchema,
+} from '~/components/forms/reminder-preferences-form';
+import { SettingsHeader } from '~/components/general/settings-header';
+
+export default function OrganisationSettingsRemindersPage() {
+  const organisation = useCurrentOrganisation();
+
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const { data: organisationWithSettings, isLoading: isLoadingOrganisation } = trpc.organisation.get.useQuery({
+    organisationReference: organisation.url,
+  });
+
+  const { mutateAsync: updateOrganisationSettings } = trpc.organisation.settings.update.useMutation();
+
+  const onReminderPreferencesFormSubmit = async (data: TReminderPreferencesFormSchema) => {
+    try {
+      const { envelopeExpirationPeriod, reminderSettings } = data;
+
+      await updateOrganisationSettings({
+        organisationId: organisation.id,
+        data: {
+          envelopeExpirationPeriod: envelopeExpirationPeriod ?? undefined,
+          reminderSettings: reminderSettings ?? undefined,
+        },
+      });
+
+      toast({
+        title: t`Reminder preferences updated`,
+        description: t`Your reminder preferences have been updated`,
+      });
+    } catch (err) {
+      toast({
+        title: t`Something went wrong!`,
+        description: t`We were unable to update your reminder preferences at this time, please try again later`,
+        variant: 'destructive',
+      });
+
+      throw err;
+    }
+  };
+
+  if (isLoadingOrganisation || !organisationWithSettings) {
+    return (
+      <div className="flex items-center justify-center rounded-lg py-32">
+        <Loader className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <SettingsHeader
+        title={t`Reminders`}
+        subtitle={t`Here you can set expiration and signing reminder preferences for your organisation. Teams will inherit these settings by default.`}
+      />
+
+      <section>
+        <ReminderPreferencesForm
+          canInherit={false}
+          settings={organisationWithSettings.organisationGlobalSettings}
+          onFormSubmit={onReminderPreferencesFormSubmit}
+        />
+      </section>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.sso.tsx

@@ -73,8 +73,9 @@ export default function OrganisationSettingSSOLoginPage() {
   }
 
   return (
-    <div className="max-w-2xl">
+    <div>
       <SettingsHeader
+        hideDivider
         title={t`Organisation SSO Portal`}
         subtitle={t`Manage a custom SSO login portal for your organisation.`}
       />

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.teams.tsx

@@ -35,7 +35,7 @@ export default function OrganisationSettingsTeamsPage() {
 
   return (
     <div>
-      <SettingsHeader title={t`Teams`} subtitle={t`Manage the teams in this organisation.`}>
+      <SettingsHeader hideDivider title={t`Teams`} subtitle={t`Manage the teams in this organisation.`}>
         <TeamCreateDialog />
       </SettingsHeader>
 

apps/remix/app/routes/_authenticated+/settings+/_dynamic_personal_routes+/_layout.tsx

@@ -1,54 +0,0 @@
-import { OrganisationProvider } from '@documenso/lib/client-only/providers/organisation';
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { isPersonalLayout } from '@documenso/lib/utils/organisations';
-import { TrpcProvider } from '@documenso/trpc/react';
-import { useEffect } from 'react';
-import { Outlet, useNavigate } from 'react-router';
-
-import { TeamProvider } from '~/providers/team';
-
-/**
- * These routes should only render if the user has:
- *
- * - 1 Personal organisation
- * - Nothing else
- *
- * This removes the UX complexity for users who only have a single personal organisation, instead of showing them multiple settings pages:
- *
- * - Organisation settings
- * - Teams settings
- */
-export default function Layout() {
-  const { organisations } = useSession();
-
-  const navigate = useNavigate();
-
-  const isPersonalLayoutMode = isPersonalLayout(organisations);
-
-  const currentOrganisation = organisations[0];
-  const team = currentOrganisation?.teams[0] || null;
-
-  useEffect(() => {
-    if (!isPersonalLayoutMode || !team) {
-      void navigate('/settings/profile');
-    }
-  }, []);
-
-  if (!isPersonalLayoutMode || !team) {
-    return null;
-  }
-
-  const trpcHeaders = {
-    'x-team-Id': team.id.toString(),
-  };
-
-  return (
-    <TrpcProvider headers={trpcHeaders}>
-      <OrganisationProvider organisation={currentOrganisation}>
-        <TeamProvider team={team}>
-          <Outlet />
-        </TeamProvider>
-      </OrganisationProvider>
-    </TrpcProvider>
-  );
-}

apps/remix/app/routes/_authenticated+/settings+/_dynamic_personal_routes+/billing-personal.tsx

@@ -1,5 +0,0 @@
-import BillingPage, { meta } from '../../o.$orgUrl.settings.billing';
-
-export { meta };
-
-export default BillingPage;

apps/remix/app/routes/_authenticated+/settings+/_dynamic_personal_routes+/branding.tsx

@@ -1,5 +0,0 @@
-import BrandingPage, { meta } from '../../o.$orgUrl.settings.branding';
-
-export { meta };
-
-export default BrandingPage;

apps/remix/app/routes/_authenticated+/settings+/_dynamic_personal_routes+/document.tsx

@@ -1,5 +0,0 @@
-import DocumentPage, { loader, meta } from '../../o.$orgUrl.settings.document';
-
-export { loader, meta };
-
-export default DocumentPage;

apps/remix/app/routes/_authenticated+/settings+/_dynamic_personal_routes+/email.tsx

@@ -1,5 +0,0 @@
-import EmailPage, { meta } from '../../o.$orgUrl.settings.email';
-
-export { meta };
-
-export default EmailPage;

apps/remix/app/routes/_authenticated+/settings+/_dynamic_personal_routes+/public-profile.tsx

@@ -1,5 +0,0 @@
-import PublicProfilePage, { loader, meta } from '../../t.$teamUrl+/settings.public-profile';
-
-export { loader, meta };
-
-export default PublicProfilePage;

apps/remix/app/routes/_authenticated+/settings+/_dynamic_personal_routes+/tokens.tsx

@@ -1,5 +0,0 @@
-import TokensPage, { meta } from '../../t.$teamUrl+/settings.tokens';
-
-export { meta };
-
-export default TokensPage;

apps/remix/app/routes/_authenticated+/settings+/_dynamic_personal_routes+/webhooks.$id._index.tsx

@@ -1,5 +0,0 @@
-import WebhookPage, { meta } from '../../t.$teamUrl+/settings.webhooks.$id._index';
-
-export { meta };
-
-export default WebhookPage;

apps/remix/app/routes/_authenticated+/settings+/_dynamic_personal_routes+/webhooks._index.tsx

@@ -1,5 +0,0 @@
-import WebhookPage, { meta } from '../../t.$teamUrl+/settings.webhooks._index';
-
-export { meta };
-
-export default WebhookPage;

apps/remix/app/routes/_authenticated+/settings+/_index.tsx

@@ -1,5 +0,0 @@
-import { redirect } from 'react-router';
-
-export function loader() {
-  throw redirect('/settings/profile');
-}

apps/remix/app/routes/_authenticated+/settings+/_layout.tsx

@@ -1,30 +1,45 @@
+import { extractCookieFromHeaders } from '@documenso/auth/server/lib/utils/cookies';
+import { extractCookieFromDocument } from '@documenso/lib/client-only/cookies';
+import type { RouteHandle } from '@documenso/lib/client-only/hooks/use-child-route-flags';
+import { PREFERRED_TEAM_URL_COOKIE } from '@documenso/lib/constants/cookies';
 import { msg } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import { Outlet } from 'react-router';
 
-import { SettingsDesktopNav } from '~/components/general/settings-nav-desktop';
-import { SettingsMobileNav } from '~/components/general/settings-nav-mobile';
+import { UnifiedSettingsLayout } from '~/components/general/unified-settings-layout';
 import { appMetaTags } from '~/utils/meta';
 
+import type { Route } from './+types/_layout';
+
 export function meta() {
   return appMetaTags(msg`Settings`);
 }
 
-export default function SettingsLayout() {
-  return (
-    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-      <h1 className="font-semibold text-4xl">
-        <Trans>Settings</Trans>
-      </h1>
+export const handle: RouteHandle = {
+  layoutMode: 'settings',
+};
 
-      <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
-        <SettingsDesktopNav className="hidden md:col-span-3 md:flex" />
-        <SettingsMobileNav className="col-span-12 mb-8 md:hidden" />
+/**
+ * Only runs on the initial document request (SSR) so the first paint has the
+ * correct preferred team without a hydration mismatch.
+ */
+export function loader({ request }: Route.LoaderArgs) {
+  return {
+    preferredTeamUrl: extractCookieFromHeaders(PREFERRED_TEAM_URL_COOKIE, request.headers),
+  };
+}
 
-        <div className="col-span-12 md:col-span-9">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
+/**
+ * Runs instead of the server loader on client-side navigations, otherwise every
+ * settings page switch would trigger a `.data` round-trip to the server just to
+ * read this cookie.
+ *
+ * The cookie is not `HttpOnly` so it can be read straight from the document.
+ */
+export function clientLoader() {
+  return {
+    preferredTeamUrl: extractCookieFromDocument(PREFERRED_TEAM_URL_COOKIE),
+  };
+}
+
+export default function SettingsLayout({ loaderData }: Route.ComponentProps) {
+  return <UnifiedSettingsLayout activeScope="account" preferredTeamUrl={loaderData.preferredTeamUrl} />;
 }

apps/remix/app/routes/_authenticated+/settings+/billing.tsx

@@ -17,6 +17,7 @@ export default function SettingsBilling() {
       <SettingsHeader
         title={t`Billing`}
         subtitle={t`Manage billing and subscriptions for organisations where you have billing management permissions.`}
+        hideDivider
       />
 
       <UserBillingOrganisationsTable />

apps/remix/app/routes/_authenticated+/settings+/organisations.tsx

@@ -14,6 +14,7 @@ export default function TeamsSettingsPage() {
       <SettingsHeader
         title={_(msg`Organisations`)}
         subtitle={_(msg`Manage all organisations you are currently associated with.`)}
+        hideDivider
       >
         <OrganisationCreateDialog />
       </SettingsHeader>

apps/remix/app/routes/_authenticated+/settings+/profile.tsx

@@ -32,8 +32,6 @@ export default function SettingsProfile() {
       <AvatarImageForm className="mb-8 max-w-xl" />
       <ProfileForm className="mb-8 max-w-xl" />
 
-      <hr className="my-4 max-w-xl" />
-
       <div className="max-w-xl space-y-8">
         <AnimatePresence>
           {(!isPersonalLayoutMode || user.email !== teamEmail?.email) && teamEmail && (

apps/remix/app/routes/_authenticated+/settings+/security._index.tsx

@@ -66,13 +66,7 @@ export default function SettingsSecurity({ loaderData }: Route.ComponentProps) {
         title={_(msg`Security`)}
         subtitle={_(msg`Here you can manage your password and security settings.`)}
       />
-      {hasEmailPasswordAccount && (
-        <>
-          <PasswordForm user={user} />
-
-          <hr className="mt-6 border-border/50" />
-        </>
-      )}
+      {hasEmailPasswordAccount && <PasswordForm user={user} />}
 
       <Alert className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center" variant="neutral">
         <div className="mb-4 sm:mb-0">

apps/remix/app/routes/_authenticated+/settings+/security.activity.tsx

@@ -15,9 +15,9 @@ export default function SettingsSecurityActivity() {
   return (
     <div>
       <SettingsHeader
+        hideDivider
         title={_(msg`Security activity`)}
         subtitle={_(msg`View all security activity related to your account.`)}
-        hideDivider={true}
       />
 
       <div className="mt-4">

apps/remix/app/routes/_authenticated+/settings+/security.passkeys.tsx

@@ -15,7 +15,7 @@ export default function SettingsPasskeys() {
 
   return (
     <div>
-      <SettingsHeader title={_(msg`Passkeys`)} subtitle={_(msg`Manage your passkeys.`)} hideDivider={true}>
+      <SettingsHeader hideDivider title={_(msg`Passkeys`)} subtitle={_(msg`Manage your passkeys.`)}>
         <PasskeyCreateDialog />
       </SettingsHeader>
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/_layout.tsx

@@ -1,8 +1,10 @@
 import { 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 { useChildRouteFlags } from '@documenso/lib/client-only/hooks/use-child-route-flags';
 import { useOptionalCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { isOrganisationPendingPayment } from '@documenso/lib/utils/billing';
 import { TrpcProvider } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { msg } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
@@ -17,6 +19,8 @@ export default function Layout() {
   const team = useOptionalCurrentTeam();
   const organisation = useOptionalCurrentOrganisation();
 
+  const { layoutMode } = useChildRouteFlags();
+
   const limits = useMemo(() => {
     if (!organisation) {
       return undefined;
@@ -78,7 +82,7 @@ export default function Layout() {
   // Note: We use a key to force a re-render if the team context changes.
   // This is required otherwise you would see the wrong page content.
   return (
-    <div key={team.url}>
+    <div key={team.url} className={cn({ 'md:flex md:min-h-0 md:flex-1 md:flex-col': layoutMode === 'settings' })}>
       <TrpcProvider headers={trpcHeaders}>
         <LimitsProvider initialValue={limits} teamId={team.id}>
           <Outlet />

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.logs.tsx

@@ -72,7 +72,12 @@ export async function loader({ params, request }: Route.LoaderArgs) {
       updatedAt: envelope.updatedAt,
       documentMeta: envelope.documentMeta,
     },
-    recipients: envelope.recipients,
+    recipients: envelope.recipients.map((recipient) => ({
+      id: recipient.id,
+      email: recipient.email,
+      name: recipient.name,
+      role: recipient.role,
+    })),
     documentRootPath,
     userId: user.id,
   };
@@ -118,7 +123,7 @@ export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps)
     },
   ];
 
-  const formatRecipientText = (recipient: Recipient) => {
+  const formatRecipientText = (recipient: Pick<Recipient, 'email' | 'name' | 'role'>) => {
     let text = recipient.email;
 
     if (recipient.name) {

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings._index.tsx

@@ -1,162 +0,0 @@
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
-import { getTeamWithEmail } from '@documenso/lib/server-only/team/get-team-email-by-email';
-import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
-import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
-import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
-import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
-import { AvatarWithText } from '@documenso/ui/primitives/avatar';
-import { Trans } from '@lingui/react/macro';
-import { CheckCircle2, Clock } from 'lucide-react';
-import { match, P } from 'ts-pattern';
-
-import { TeamDeleteDialog } from '~/components/dialogs/team-delete-dialog';
-import { TeamEmailAddDialog } from '~/components/dialogs/team-email-add-dialog';
-import { AvatarImageForm } from '~/components/forms/avatar-image';
-import { TeamUpdateForm } from '~/components/forms/team-update-form';
-import { SettingsHeader } from '~/components/general/settings-header';
-import { TeamEmailDropdown } from '~/components/general/teams/team-email-dropdown';
-import { useCurrentTeam } from '~/providers/team';
-
-import type { Route } from './+types/settings._index';
-
-export async function loader({ request, params }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
-
-  const team = await getTeamWithEmail({
-    userId: user.id,
-    teamUrl: params.teamUrl,
-  });
-
-  return {
-    team,
-  };
-}
-
-export default function TeamsSettingsPage({ loaderData }: Route.ComponentProps) {
-  const { team } = loaderData;
-
-  const currentTeam = useCurrentTeam();
-
-  return (
-    <div className="max-w-2xl">
-      <SettingsHeader title="General settings" subtitle="Here you can edit your team's details." />
-
-      <AvatarImageForm team={currentTeam} className="mb-8" />
-
-      <TeamUpdateForm teamId={team.id} teamName={team.name} teamUrl={team.url} />
-
-      <section className="mt-6 space-y-6">
-        {(team.teamEmail || team.emailVerification) && (
-          <Alert className="p-6" variant="neutral">
-            <AlertTitle>
-              <Trans>Team email</Trans>
-            </AlertTitle>
-
-            <AlertDescription className="mr-2">
-              <Trans>
-                You can view documents associated with this email and use this identity when sending documents.
-              </Trans>
-            </AlertDescription>
-
-            <hr className="mt-2 border-border/50" />
-
-            <div className="flex flex-row items-center justify-between pt-4">
-              <AvatarWithText
-                avatarClass="h-12 w-12"
-                avatarSrc={formatAvatarUrl(team.avatarImageId)}
-                avatarFallback={extractInitials((team.teamEmail?.name || team.emailVerification?.name) ?? '')}
-                primaryText={
-                  <span className="font-semibold text-foreground/80 text-sm">
-                    {team.teamEmail?.name || team.emailVerification?.name}
-                  </span>
-                }
-                secondaryText={
-                  <span className="text-sm">{team.teamEmail?.email || team.emailVerification?.email}</span>
-                }
-              />
-
-              <div className="flex flex-row items-center pr-2">
-                <div className="mr-4 flex flex-row items-center text-muted-foreground text-sm xl:mr-8">
-                  {match({
-                    teamEmail: team.teamEmail,
-                    emailVerification: team.emailVerification,
-                  })
-                    .with({ teamEmail: P.not(null) }, () => (
-                      <>
-                        <CheckCircle2 className="mr-1.5 text-green-500 dark:text-green-300" />
-                        <Trans>Active</Trans>
-                      </>
-                    ))
-                    .with(
-                      {
-                        emailVerification: P.when(
-                          (emailVerification) => emailVerification && emailVerification?.expiresAt < new Date(),
-                        ),
-                      },
-                      () => (
-                        <>
-                          <Clock className="mr-1.5 text-yellow-500 dark:text-yellow-200" />
-                          <Trans>Expired</Trans>
-                        </>
-                      ),
-                    )
-                    .with({ emailVerification: P.not(null) }, () => (
-                      <>
-                        <Clock className="mr-1.5 text-blue-600 dark:text-blue-300" />
-                        <Trans>Awaiting email confirmation</Trans>
-                      </>
-                    ))
-                    .otherwise(() => null)}
-                </div>
-
-                <TeamEmailDropdown team={team} />
-              </div>
-            </div>
-          </Alert>
-        )}
-
-        {!team.teamEmail && !team.emailVerification && (
-          <Alert className="flex flex-col justify-between p-6 sm:flex-row sm:items-center" variant="neutral">
-            <div className="mb-4 sm:mb-0">
-              <AlertTitle>
-                <Trans>Team email</Trans>
-              </AlertTitle>
-
-              <AlertDescription className="mr-2">
-                <ul className="mt-0.5 list-inside list-disc text-muted-foreground text-sm">
-                  {/* Feature not available yet. */}
-                  {/* <li>Display this name and email when sending documents</li> */}
-                  {/* <li>View documents associated with this email</li> */}
-
-                  <span>
-                    <Trans>View documents associated with this email</Trans>
-                  </span>
-                </ul>
-              </AlertDescription>
-            </div>
-
-            <TeamEmailAddDialog teamId={team.id} />
-          </Alert>
-        )}
-
-        {canExecuteTeamAction('MANAGE_TEAM', currentTeam.currentTeamRole) && (
-          <Alert className="flex flex-col justify-between p-6 sm:flex-row sm:items-center" variant="neutral">
-            <div className="mb-4 sm:mb-0">
-              <AlertTitle>
-                <Trans>Delete team</Trans>
-              </AlertTitle>
-
-              <AlertDescription className="mr-2">
-                <Trans>
-                  This team, and any associated data excluding billing invoices will be permanently deleted.
-                </Trans>
-              </AlertDescription>
-            </div>
-
-            <TeamDeleteDialog teamId={team.id} teamName={team.name} redirectTo="/dashboard" />
-          </Alert>
-        )}
-      </section>
-    </div>
-  );
-}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings._layout.tsx

@@ -1,15 +1,11 @@
 import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import type { RouteHandle } from '@documenso/lib/client-only/hooks/use-child-route-flags';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
 import { msg } from '@lingui/core/macro';
-import { Trans, useLingui } from '@lingui/react/macro';
-import { BracesIcon, Globe2Icon, GroupIcon, Settings2Icon, SettingsIcon, Users2Icon, WebhookIcon } from 'lucide-react';
-import { Link, NavLink, Outlet, redirect } from 'react-router';
+import { redirect } from 'react-router';
 
-import { GenericErrorLayout } from '~/components/general/generic-error-layout';
-import { useCurrentTeam } from '~/providers/team';
+import { UnifiedSettingsLayout } from '~/components/general/unified-settings-layout';
 import { appMetaTags } from '~/utils/meta';
 
 import type { Route } from './+types/settings._layout';
@@ -18,6 +14,10 @@ export function meta() {
   return appMetaTags(msg`Team Settings`);
 }
 
+export const handle: RouteHandle = {
+  layoutMode: 'settings',
+};
+
 export async function loader({ request, params }: Route.LoaderArgs) {
   const session = await getSession(request);
 
@@ -35,123 +35,6 @@ export async function clientLoader() {
   // Do nothing, we only want the loader to run on SSR.
 }
 
-export default function TeamsSettingsLayout() {
-  const { t } = useLingui();
-
-  const team = useCurrentTeam();
-
-  const teamSettingRoutes = [
-    {
-      path: `/t/${team.url}/settings`,
-      label: t`General`,
-      icon: SettingsIcon,
-    },
-    {
-      path: `/t/${team.url}/settings/document`,
-      label: t`Preferences`,
-      icon: Settings2Icon,
-      isSubNavParent: true,
-    },
-    {
-      path: `/t/${team.url}/settings/document`,
-      label: t`Document`,
-      isSubNav: true,
-    },
-    {
-      path: `/t/${team.url}/settings/branding`,
-      label: t`Branding`,
-      isSubNav: true,
-    },
-    {
-      path: `/t/${team.url}/settings/email`,
-      label: t`Email`,
-      isSubNav: true,
-    },
-    {
-      path: `/t/${team.url}/settings/public-profile`,
-      label: t`Public Profile`,
-      icon: Globe2Icon,
-    },
-    {
-      path: `/t/${team.url}/settings/members`,
-      label: t`Members`,
-      icon: Users2Icon,
-    },
-    {
-      path: `/t/${team.url}/settings/groups`,
-      label: t`Groups`,
-      icon: GroupIcon,
-    },
-    {
-      path: `/t/${team.url}/settings/tokens`,
-      label: t`API Tokens`,
-      icon: BracesIcon,
-    },
-    {
-      path: `/t/${team.url}/settings/webhooks`,
-      label: t`Webhooks`,
-      icon: WebhookIcon,
-    },
-  ];
-
-  if (!canExecuteTeamAction('MANAGE_TEAM', team.currentTeamRole)) {
-    return (
-      <GenericErrorLayout
-        errorCode={401}
-        errorCodeMap={{
-          401: {
-            heading: msg`Unauthorized`,
-            subHeading: msg`401 Unauthorized`,
-            message: msg`You are not authorized to access this page.`,
-          },
-        }}
-        primaryButton={
-          <Button asChild>
-            <Link to={`/t/${team.url}`}>
-              <Trans>Go Back</Trans>
-            </Link>
-          </Button>
-        }
-        secondaryButton={null}
-      />
-    );
-  }
-
-  return (
-    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-      <h1 className="font-semibold text-4xl">
-        <Trans>Team Settings</Trans>
-      </h1>
-
-      <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
-        <div
-          className={cn(
-            'col-span-12 mb-8 flex flex-wrap items-center justify-start gap-x-2 gap-y-4 md:col-span-3 md:w-full md:flex-col md:items-start md:gap-y-2',
-          )}
-        >
-          {teamSettingRoutes.map((route) => (
-            <NavLink
-              to={route.path}
-              className={cn('group w-full justify-start', route.isSubNav && 'pl-8')}
-              key={route.path}
-            >
-              <Button
-                variant="ghost"
-                className={cn('w-full justify-start', {
-                  'group-aria-[current]:bg-secondary': !route.isSubNavParent,
-                })}
-              >
-                {route.icon && <route.icon className="mr-2 h-5 w-5" />}
-                <Trans>{route.label}</Trans>
-              </Button>
-            </NavLink>
-          ))}
-        </div>
-
-        <div className="col-span-12 md:col-span-9">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
+export default function TeamSettingsLayout() {
+  return <UnifiedSettingsLayout activeScope="team" />;
 }

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.branding.tsx

@@ -115,7 +115,7 @@ export default function TeamsSettingsPage() {
   }
 
   return (
-    <div className="max-w-2xl">
+    <div>
       <SettingsHeader
         title={t`Branding Preferences`}
         subtitle={t`Here you can set preferences and defaults for branding.`}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.certificates.tsx

@@ -0,0 +1,76 @@
+import { trpc } from '@documenso/trpc/react';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { useLingui } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
+
+import {
+  CertificatePreferencesForm,
+  type TCertificatePreferencesFormSchema,
+} from '~/components/forms/certificate-preferences-form';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { useCurrentTeam } from '~/providers/team';
+
+export default function TeamsSettingsCertificatesPage() {
+  const team = useCurrentTeam();
+
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const { data: teamWithSettings, isLoading: isLoadingTeam } = trpc.team.get.useQuery({
+    teamReference: team.id,
+  });
+
+  const { mutateAsync: updateTeamSettings } = trpc.team.settings.update.useMutation();
+
+  const onCertificatePreferencesFormSubmit = async (data: TCertificatePreferencesFormSchema) => {
+    try {
+      const { includeSigningCertificate, includeAuditLog } = data;
+
+      await updateTeamSettings({
+        teamId: team.id,
+        data: {
+          includeSigningCertificate,
+          includeAuditLog,
+        },
+      });
+
+      toast({
+        title: t`Certificate preferences updated`,
+        description: t`Your certificate preferences have been updated`,
+      });
+    } catch (err) {
+      toast({
+        title: t`Something went wrong!`,
+        description: t`We were unable to update your certificate preferences at this time, please try again later`,
+        variant: 'destructive',
+      });
+
+      throw err;
+    }
+  };
+
+  if (isLoadingTeam || !teamWithSettings) {
+    return (
+      <div className="flex items-center justify-center rounded-lg py-32">
+        <Loader className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <SettingsHeader
+        title={t`Certificates`}
+        subtitle={t`Here you can set certificate and audit log preferences for your team.`}
+      />
+
+      <section>
+        <CertificatePreferencesForm
+          canInherit={true}
+          settings={teamWithSettings.teamSettings}
+          onFormSubmit={onCertificatePreferencesFormSubmit}
+        />
+      </section>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.document.tsx

@@ -1,11 +1,8 @@
-import { IS_AI_FEATURES_CONFIGURED } from '@documenso/lib/constants/app';
 import { DocumentSignatureType } from '@documenso/lib/constants/document';
 import { trpc } from '@documenso/trpc/react';
 import { useToast } from '@documenso/ui/primitives/use-toast';
-import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
-import { useLoaderData } from 'react-router';
 
 import {
   DocumentPreferencesForm,
@@ -13,21 +10,8 @@ import {
 } from '~/components/forms/document-preferences-form';
 import { SettingsHeader } from '~/components/general/settings-header';
 import { useCurrentTeam } from '~/providers/team';
-import { appMetaTags } from '~/utils/meta';
-
-export function meta() {
-  return appMetaTags(msg`Document Preferences`);
-}
-
-export const loader = () => {
-  return {
-    isAiFeaturesConfigured: IS_AI_FEATURES_CONFIGURED(),
-  };
-};
 
 export default function TeamsSettingsPage() {
-  const { isAiFeaturesConfigured } = useLoaderData<typeof loader>();
-
   const team = useCurrentTeam();
 
   const { t } = useLingui();
@@ -46,15 +30,10 @@ export default function TeamsSettingsPage() {
         documentLanguage,
         documentTimezone,
         documentDateFormat,
-        includeSenderDetails,
-        includeSigningCertificate,
-        includeAuditLog,
         signatureTypes,
         defaultRecipients,
         delegateDocumentOwnership,
         aiFeaturesEnabled,
-        envelopeExpirationPeriod,
-        reminderSettings,
       } = data;
 
       await updateTeamSettings({
@@ -64,13 +43,8 @@ export default function TeamsSettingsPage() {
           documentLanguage,
           documentTimezone,
           documentDateFormat,
-          includeSenderDetails,
-          includeSigningCertificate,
-          includeAuditLog,
           defaultRecipients,
           aiFeaturesEnabled,
-          envelopeExpirationPeriod,
-          reminderSettings,
           ...(signatureTypes.length === 0
             ? {
                 typedSignatureEnabled: null,
@@ -110,7 +84,7 @@ export default function TeamsSettingsPage() {
   }
 
   return (
-    <div className="max-w-2xl">
+    <div>
       <SettingsHeader
         title={t`Document Preferences`}
         subtitle={t`Here you can set preferences and defaults for your team.`}
@@ -119,7 +93,6 @@ export default function TeamsSettingsPage() {
       <section>
         <DocumentPreferencesForm
           canInherit={true}
-          isAiFeaturesConfigured={isAiFeaturesConfigured}
           settings={teamWithSettings.teamSettings}
           onFormSubmit={onDocumentPreferencesSubmit}
         />

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.email.tsx

@@ -1,17 +1,11 @@
 import { trpc } from '@documenso/trpc/react';
 import { SpinnerBox } from '@documenso/ui/primitives/spinner';
 import { useToast } from '@documenso/ui/primitives/use-toast';
-import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 
 import { EmailPreferencesForm, type TEmailPreferencesFormSchema } from '~/components/forms/email-preferences-form';
 import { SettingsHeader } from '~/components/general/settings-header';
 import { useCurrentTeam } from '~/providers/team';
-import { appMetaTags } from '~/utils/meta';
-
-export function meta() {
-  return appMetaTags(msg`Settings`);
-}
 
 export default function TeamEmailSettingsGeneral() {
   const { t } = useLingui();
@@ -27,7 +21,7 @@ export default function TeamEmailSettingsGeneral() {
 
   const onEmailPreferencesSubmit = async (data: TEmailPreferencesFormSchema) => {
     try {
-      const { emailId, emailReplyTo, emailDocumentSettings } = data;
+      const { emailId, emailReplyTo, emailDocumentSettings, includeSenderDetails } = data;
 
       await updateTeamSettings({
         teamId: team.id,
@@ -36,6 +30,7 @@ export default function TeamEmailSettingsGeneral() {
           emailReplyTo,
           // emailReplyToName,
           emailDocumentSettings,
+          includeSenderDetails,
         },
       });
 
@@ -59,7 +54,7 @@ export default function TeamEmailSettingsGeneral() {
   }
 
   return (
-    <div className="max-w-2xl">
+    <div>
       <SettingsHeader title={t`Email Preferences`} subtitle={t`You can manage your email preferences here.`} />
 
       <section>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.general.tsx

@@ -0,0 +1,281 @@
+import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '@documenso/lib/constants/teams';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { buildTeamWhereQuery, canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import { prisma } from '@documenso/prisma';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { CheckCircle2, Clock, EditIcon, LoaderIcon, MailIcon, MoreHorizontalIcon, XIcon } from 'lucide-react';
+import { redirect } from 'react-router';
+import { match, P } from 'ts-pattern';
+import { TeamDeleteDialog } from '~/components/dialogs/team-delete-dialog';
+import { TeamEmailAddDialog } from '~/components/dialogs/team-email-add-dialog';
+import { TeamEmailDeleteDialog } from '~/components/dialogs/team-email-delete-dialog';
+import { TeamEmailUpdateDialog } from '~/components/dialogs/team-email-update-dialog';
+import { AvatarImageForm } from '~/components/forms/avatar-image';
+import { TeamUpdateForm } from '~/components/forms/team-update-form';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { useCurrentTeam } from '~/providers/team';
+import type { Route } from './+types/settings.general';
+
+export async function loader({ request, params }: Route.LoaderArgs) {
+  const { user } = await getSession(request);
+
+  if (!user || !params.teamUrl) {
+    throw redirect('/');
+  }
+
+  const team = await prisma.team.findUnique({
+    where: {
+      ...buildTeamWhereQuery({
+        teamId: undefined,
+        userId: user.id,
+        roles: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_TEAM'],
+      }),
+      url: params.teamUrl,
+    },
+    include: {
+      teamEmail: {
+        select: {
+          email: true,
+          name: true,
+        },
+      },
+      emailVerification: {
+        select: {
+          email: true,
+          name: true,
+          expiresAt: true,
+        },
+      },
+    },
+  });
+
+  if (!team) {
+    throw redirect('/');
+  }
+
+  return {
+    teamEmail: team.teamEmail
+      ? {
+          email: team.teamEmail?.email,
+          name: team.teamEmail.name,
+        }
+      : null,
+    emailVerification: team.emailVerification
+      ? {
+          email: team.emailVerification?.email,
+          name: team.emailVerification.name,
+          expiresAt: team.emailVerification.expiresAt,
+        }
+      : null,
+  };
+}
+
+export default function TeamsSettingsPage({ loaderData }: Route.ComponentProps) {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const { teamEmail, emailVerification } = loaderData;
+
+  const team = useCurrentTeam();
+
+  const { mutateAsync: resendEmailVerification, isPending: isResendingEmailVerification } =
+    trpc.team.email.verification.resend.useMutation({
+      onSuccess: () => {
+        toast({
+          title: t`Success`,
+          description: t`Email verification has been resent`,
+          duration: 5000,
+        });
+      },
+      onError: () => {
+        toast({
+          title: t`Something went wrong`,
+          description: t`Unable to resend verification at this time. Please try again.`,
+          variant: 'destructive',
+          duration: 10000,
+        });
+      },
+    });
+
+  return (
+    <div>
+      <SettingsHeader title={t`General settings`} subtitle={t`Here you can edit your team's details.`} />
+
+      <AvatarImageForm team={team} className="mb-8" />
+
+      <TeamUpdateForm teamId={team.id} teamName={team.name} teamUrl={team.url} />
+
+      <section className="mt-6 space-y-6">
+        {(teamEmail || emailVerification) && (
+          <Alert className="p-6" variant="neutral">
+            <AlertTitle>
+              <Trans>Team email</Trans>
+            </AlertTitle>
+
+            <AlertDescription className="mr-2">
+              <Trans>
+                You can view documents associated with this email and use this identity when sending documents.
+              </Trans>
+            </AlertDescription>
+
+            <hr className="mt-2 border-border/50" />
+
+            <div className="flex flex-row items-center justify-between pt-4">
+              <AvatarWithText
+                avatarClass="h-12 w-12"
+                avatarSrc={formatAvatarUrl(team.avatarImageId)}
+                avatarFallback={extractInitials((teamEmail?.name || emailVerification?.name) ?? '')}
+                primaryText={
+                  <span className="font-semibold text-foreground/80 text-sm">
+                    {teamEmail?.name || emailVerification?.name}
+                  </span>
+                }
+                secondaryText={<span className="text-sm">{teamEmail?.email || emailVerification?.email}</span>}
+              />
+
+              <div className="flex flex-row items-center pr-2">
+                <div className="mr-4 flex flex-row items-center text-muted-foreground text-sm xl:mr-8">
+                  {match({
+                    teamEmail,
+                    emailVerification: emailVerification,
+                  })
+                    .with({ teamEmail: P.not(null) }, () => (
+                      <>
+                        <CheckCircle2 className="mr-1.5 text-green-500 dark:text-green-300" />
+                        <Trans>Active</Trans>
+                      </>
+                    ))
+                    .with(
+                      {
+                        emailVerification: P.when(
+                          (emailVerification) => emailVerification && emailVerification?.expiresAt < new Date(),
+                        ),
+                      },
+                      () => (
+                        <>
+                          <Clock className="mr-1.5 text-yellow-500 dark:text-yellow-200" />
+                          <Trans>Expired</Trans>
+                        </>
+                      ),
+                    )
+                    .with({ emailVerification: P.not(null) }, () => (
+                      <>
+                        <Clock className="mr-1.5 text-blue-600 dark:text-blue-300" />
+                        <Trans>Awaiting email confirmation</Trans>
+                      </>
+                    ))
+                    .otherwise(() => null)}
+                </div>
+
+                <DropdownMenu>
+                  <DropdownMenuTrigger>
+                    <MoreHorizontalIcon className="h-5 w-5 text-muted-foreground" />
+                  </DropdownMenuTrigger>
+
+                  <DropdownMenuContent className="w-52" align="start" forceMount>
+                    {!teamEmail && emailVerification && (
+                      <DropdownMenuItem
+                        disabled={isResendingEmailVerification}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          void resendEmailVerification({ teamId: team.id });
+                        }}
+                      >
+                        {isResendingEmailVerification ? (
+                          <LoaderIcon className="mr-2 h-4 w-4 animate-spin" />
+                        ) : (
+                          <MailIcon className="mr-2 h-4 w-4" />
+                        )}
+                        <Trans>Resend verification</Trans>
+                      </DropdownMenuItem>
+                    )}
+
+                    {teamEmail && (
+                      <TeamEmailUpdateDialog
+                        teamId={team.id}
+                        teamEmail={teamEmail}
+                        trigger={
+                          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                            <EditIcon className="mr-2 h-4 w-4" />
+                            <Trans>Edit</Trans>
+                          </DropdownMenuItem>
+                        }
+                      />
+                    )}
+
+                    <TeamEmailDeleteDialog
+                      team={team}
+                      teamEmail={teamEmail}
+                      emailVerification={emailVerification}
+                      teamName={team.name}
+                      trigger={
+                        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                          <XIcon className="mr-2 h-4 w-4" />
+                          <Trans>Remove</Trans>
+                        </DropdownMenuItem>
+                      }
+                    />
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </div>
+          </Alert>
+        )}
+
+        {!teamEmail && !emailVerification && (
+          <Alert className="flex flex-col justify-between p-6 sm:flex-row sm:items-center" variant="neutral">
+            <div className="mb-4 sm:mb-0">
+              <AlertTitle>
+                <Trans>Team email</Trans>
+              </AlertTitle>
+
+              <AlertDescription className="mr-2">
+                <ul className="mt-0.5 list-inside list-disc text-muted-foreground text-sm">
+                  {/* Feature not available yet. */}
+                  {/* <li>Display this name and email when sending documents</li> */}
+                  {/* <li>View documents associated with this email</li> */}
+
+                  <span>
+                    <Trans>View documents associated with this email</Trans>
+                  </span>
+                </ul>
+              </AlertDescription>
+            </div>
+
+            <TeamEmailAddDialog teamId={team.id} />
+          </Alert>
+        )}
+
+        {canExecuteTeamAction('MANAGE_TEAM', team.currentTeamRole) && (
+          <Alert className="flex flex-col justify-between p-6 sm:flex-row sm:items-center" variant="neutral">
+            <div className="mb-4 sm:mb-0">
+              <AlertTitle>
+                <Trans>Delete team</Trans>
+              </AlertTitle>
+
+              <AlertDescription className="mr-2">
+                <Trans>
+                  This team, and any associated data excluding billing invoices will be permanently deleted.
+                </Trans>
+              </AlertDescription>
+            </div>
+
+            <TeamDeleteDialog teamId={team.id} teamName={team.name} redirectTo="/dashboard" />
+          </Alert>
+        )}
+      </section>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.groups.tsx

@@ -56,7 +56,7 @@ export default function TeamsSettingsGroupsPage() {
 
   return (
     <div>
-      <SettingsHeader title={t`Team Groups`} subtitle={t`Manage the groups assigned to this team.`}>
+      <SettingsHeader hideDivider title={t`Team Groups`} subtitle={t`Manage the groups assigned to this team.`}>
         <TeamGroupCreateDialog />
       </SettingsHeader>
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.members.tsx

@@ -40,7 +40,7 @@ export default function TeamsSettingsMembersPage() {
 
   return (
     <div>
-      <SettingsHeader title={t`Team Members`} subtitle={t`Manage the members of your team.`}>
+      <SettingsHeader hideDivider title={t`Team Members`} subtitle={t`Manage the members of your team.`}>
         <TeamMemberCreateDialog />
       </SettingsHeader>
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.public-profile.tsx

@@ -128,8 +128,9 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
   }, [profile.enabled]);
 
   return (
-    <div className="max-w-2xl">
+    <div>
       <SettingsHeader
+        hideDivider
         title={t`Public Profile`}
         subtitle={t`You can choose to enable or disable the profile for public view.`}
       >
@@ -189,9 +190,9 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
 
       <div className="mt-4">
         <SettingsHeader
+          hideDivider
           title={t`Templates`}
           subtitle={t`Show templates in your public profile for your audience to sign and get started quickly`}
-          hideDivider={true}
           className="mt-8 [&>*>h3]:text-base"
         >
           <ManagePublicTemplateDialog

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.reminders.tsx

@@ -0,0 +1,76 @@
+import { trpc } from '@documenso/trpc/react';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { useLingui } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
+
+import {
+  ReminderPreferencesForm,
+  type TReminderPreferencesFormSchema,
+} from '~/components/forms/reminder-preferences-form';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { useCurrentTeam } from '~/providers/team';
+
+export default function TeamsSettingsRemindersPage() {
+  const team = useCurrentTeam();
+
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const { data: teamWithSettings, isLoading: isLoadingTeam } = trpc.team.get.useQuery({
+    teamReference: team.id,
+  });
+
+  const { mutateAsync: updateTeamSettings } = trpc.team.settings.update.useMutation();
+
+  const onReminderPreferencesFormSubmit = async (data: TReminderPreferencesFormSchema) => {
+    try {
+      const { envelopeExpirationPeriod, reminderSettings } = data;
+
+      await updateTeamSettings({
+        teamId: team.id,
+        data: {
+          envelopeExpirationPeriod,
+          reminderSettings,
+        },
+      });
+
+      toast({
+        title: t`Reminder preferences updated`,
+        description: t`Your reminder preferences have been updated`,
+      });
+    } catch (err) {
+      toast({
+        title: t`Something went wrong!`,
+        description: t`We were unable to update your reminder preferences at this time, please try again later`,
+        variant: 'destructive',
+      });
+
+      throw err;
+    }
+  };
+
+  if (isLoadingTeam || !teamWithSettings) {
+    return (
+      <div className="flex items-center justify-center rounded-lg py-32">
+        <Loader className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <SettingsHeader
+        title={t`Reminders`}
+        subtitle={t`Here you can set expiration and signing reminder preferences for your team.`}
+      />
+
+      <section>
+        <ReminderPreferencesForm
+          canInherit={true}
+          settings={teamWithSettings.teamSettings}
+          onFormSubmit={onReminderPreferencesFormSubmit}
+        />
+      </section>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.tokens.tsx

@@ -84,6 +84,7 @@ export default function ApiTokensPage() {
   return (
     <div>
       <SettingsHeader
+        hideDivider
         title={<Trans>API Tokens</Trans>}
         subtitle={
           <Trans>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks.$id._index.tsx

@@ -216,6 +216,7 @@ export default function WebhookPage({ params }: Route.ComponentProps) {
   return (
     <div>
       <SettingsHeader
+        hideDivider
         title={
           <div className="flex items-center gap-2">
             <p>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks._index.tsx

@@ -89,6 +89,7 @@ export default function WebhookPage() {
   return (
     <div>
       <SettingsHeader
+        hideDivider
         title={t`Webhooks`}
         subtitle={t`On this page, you can create new Webhooks and manage the existing ones.`}
       >

apps/remix/app/routes/_index.tsx

@@ -1,5 +1,6 @@
 import { extractCookieFromHeaders } from '@documenso/auth/server/lib/utils/cookies';
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
+import { PREFERRED_TEAM_URL_COOKIE } from '@documenso/lib/constants/cookies';
 import { getTeams } from '@documenso/lib/server-only/team/get-teams';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { ZTeamUrlSchema } from '@documenso/trpc/server/team-router/schema';
@@ -11,7 +12,7 @@ export async function loader({ request }: Route.LoaderArgs) {
   const session = await getOptionalSession(request);
 
   if (session.isAuthenticated) {
-    const teamUrlCookie = extractCookieFromHeaders('preferred-team-url', request.headers);
+    const teamUrlCookie = extractCookieFromHeaders(PREFERRED_TEAM_URL_COOKIE, request.headers);
 
     // const referrer = request.headers.get('referer');
     // let isReferrerFromTeamUrl = false;

apps/remix/app/routes/_profile+/p.$url.tsx

@@ -1,7 +1,9 @@
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import { getPublicProfileByUrl } from '@documenso/lib/server-only/profile/get-public-profile-by-url';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
 import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
@@ -53,6 +55,19 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
   const { sessionData } = useOptionalSession();
   const user = sessionData?.user;
 
+  const canManageProfileSettings = (sessionData?.organisations ?? []).some((organisation) => {
+    const team = organisation.teams.find((currentTeam) => currentTeam.id === profile.teamId);
+
+    if (!team) {
+      return false;
+    }
+
+    return (
+      canExecuteOrganisationAction('MANAGE_ORGANISATION', organisation.currentOrganisationRole) ||
+      canExecuteTeamAction('MANAGE_TEAM', team.currentTeamRole)
+    );
+  });
+
   return (
     <div className="flex flex-col items-center justify-center py-4 sm:py-32">
       <div className="flex flex-col items-center">
@@ -118,11 +133,11 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
                 </Trans>
               </span>
             )}
-            {'userId' in profile && user?.id === profile.userId && (
+            {canManageProfileSettings && (
               <span className="mt-2 inline-block">
                 <Trans>
                   Go to your{' '}
-                  <Link to="/settings/public-profile" className="underline">
+                  <Link to={`/t/${publicProfile.url}/settings/public-profile`} className="underline">
                     public profile settings
                   </Link>{' '}
                   to add documents.

apps/remix/app/routes/_unauthenticated+/organisation.sso.confirmation.$token.tsx

@@ -64,7 +64,7 @@ export async function loader({ params }: Route.LoaderArgs) {
     },
   });
 
-  if (!verificationToken || verificationToken.expires < new Date()) {
+  if (!verificationToken || verificationToken.completed || verificationToken.expires < new Date()) {
     throw data({
       type: 'invalid-token',
     });