diff --git a/apps/remix/app/components/forms/token.tsx b/apps/remix/app/components/forms/token.tsx
index 7311bfce4..95b1a8830 100644
--- a/apps/remix/app/components/forms/token.tsx
+++ b/apps/remix/app/components/forms/token.tsx
@@ -212,12 +212,12 @@ export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
               />
 
               <div>
-                <FormLabel className="text-muted-foreground mt-2">
+                <FormLabel className="mt-2 text-muted-foreground">
                   <Trans>Never expire</Trans>
                 </FormLabel>
                 <div className="block md:py-1.5">
                   <Switch
-                    className="bg-background mt-2"
+                    className="mt-2 bg-background"
                     checked={noExpirationDate}
                     onCheckedChange={setNoExpirationDate}
                   />
@@ -254,14 +254,14 @@ export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
             >
               <Card gradient>
                 <CardContent className="p-4">
-                  <p className="text-muted-foreground mt-2 text-sm">
+                  <p className="mt-2 text-sm text-muted-foreground">
                     <Trans>
                       Your token was created successfully! Make sure to copy it because you won't be
                       able to see it again!
                     </Trans>
                   </p>
 
-                  <p className="bg-muted-foreground/10 my-4 rounded-md px-2.5 py-1 font-mono text-sm">
+                  <p className="my-4 rounded-md bg-muted-foreground/10 px-2.5 py-1 font-mono text-sm">
                     {newlyCreatedToken.token}
                   </p>
 
diff --git a/apps/remix/app/components/general/document-signing/document-signing-mobile-widget.tsx b/apps/remix/app/components/general/document-signing/document-signing-mobile-widget.tsx
index 6c765b2a1..40eb9dc92 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-mobile-widget.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-mobile-widget.tsx
@@ -35,7 +35,7 @@ export const DocumentSigningMobileWidget = () => {
   return (
     <div className="pointer-events-none fixed bottom-0 left-0 right-0 z-50 flex justify-center px-2 pb-2 sm:px-4 sm:pb-6">
       <div className="pointer-events-auto w-full max-w-[760px]">
-        <div className="bg-card border-border overflow-hidden rounded-xl border shadow-2xl">
+        <div className="overflow-hidden rounded-xl border border-border bg-card shadow-2xl">
           {/* Main Header Bar */}
           <div className="flex items-center justify-between gap-4 p-4">
             <div className="flex-1">
@@ -48,15 +48,15 @@ export const DocumentSigningMobileWidget = () => {
                     aria-label={isExpanded ? 'Collapse' : 'Expand'}
                   >
                     {isExpanded ? (
-                      <LucideChevronDown className="text-muted-foreground h-5 w-5 flex-shrink-0" />
+                      <LucideChevronDown className="h-5 w-5 flex-shrink-0 text-muted-foreground" />
                     ) : (
-                      <LucideChevronUp className="text-muted-foreground h-5 w-5 flex-shrink-0" />
+                      <LucideChevronUp className="h-5 w-5 flex-shrink-0 text-muted-foreground" />
                     )}
                   </Button>
                 )}
 
                 <div>
-                  <h2 className="text-foreground text-lg font-semibold">
+                  <h2 className="text-lg font-semibold text-foreground">
                     {match(recipient.role)
                       .with(RecipientRole.VIEWER, () => <Trans>View Document</Trans>)
                       .with(RecipientRole.SIGNER, () => <Trans>Sign Document</Trans>)
@@ -65,7 +65,7 @@ export const DocumentSigningMobileWidget = () => {
                       .otherwise(() => null)}
                   </h2>
 
-                  <p className="text-muted-foreground -mt-0.5 text-sm">
+                  <p className="-mt-0.5 text-sm text-muted-foreground">
                     {recipientFieldsRemaining.length === 0 ? (
                       match(recipient.role)
                         .with(RecipientRole.VIEWER, () => (
@@ -102,11 +102,11 @@ export const DocumentSigningMobileWidget = () => {
           {recipient.role !== RecipientRole.VIEWER &&
             recipient.role !== RecipientRole.ASSISTANT && (
               <div className="px-4 pb-3">
-                <div className="bg-muted relative h-[4px] rounded-md">
+                <div className="relative h-[4px] rounded-md bg-muted">
                   <motion.div
                     layout="size"
                     layoutId="document-signing-mobile-widget-progress-bar"
-                    className="bg-primary absolute inset-y-0 left-0"
+                    className="absolute inset-y-0 left-0 bg-primary"
                     style={{
                       width: `${100 - (100 / requiredRecipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
                     }}
@@ -117,11 +117,11 @@ export const DocumentSigningMobileWidget = () => {
 
           {/* Expandable Content */}
           {isExpanded && (
-            <div className="border-border animate-in slide-in-from-bottom-2 border-t p-4 duration-200">
+            <div className="border-t border-border p-4 duration-200 animate-in slide-in-from-bottom-2">
               <EnvelopeSignerForm />
 
               {!hidePoweredBy && (
-                <div className="bg-primary text-primary-foreground mt-2 inline-block rounded px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100 lg:hidden">
+                <div className="mt-2 inline-block rounded bg-primary px-2 py-1 text-xs font-medium text-primary-foreground opacity-60 hover:opacity-100 lg:hidden">
                   <span>Powered by</span>
                   <BrandingLogo className="ml-2 inline-block h-[14px]" />
                 </div>
diff --git a/apps/remix/app/components/general/document/document-page-view-recent-activity.tsx b/apps/remix/app/components/general/document/document-page-view-recent-activity.tsx
index abeeacbc4..12febc4cb 100644
--- a/apps/remix/app/components/general/document/document-page-view-recent-activity.tsx
+++ b/apps/remix/app/components/general/document/document-page-view-recent-activity.tsx
@@ -22,7 +22,7 @@ export const DocumentPageViewRecentActivity = ({
   documentId,
   userId,
 }: DocumentPageViewRecentActivityProps) => {
-  const { _ } = useLingui();
+  const { _, i18n } = useLingui();
 
   const {
     data,
@@ -48,9 +48,9 @@ export const DocumentPageViewRecentActivity = ({
   const documentAuditLogs = useMemo(() => (data?.pages ?? []).flatMap((page) => page.data), [data]);
 
   return (
-    <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
+    <section className="flex flex-col rounded-xl border border-border bg-widget dark:bg-background">
       <div className="flex flex-row items-center justify-between border-b px-4 py-3">
-        <h1 className="text-foreground font-medium">
+        <h1 className="font-medium text-foreground">
           <Trans>Recent activity</Trans>
         </h1>
 
@@ -59,18 +59,18 @@ export const DocumentPageViewRecentActivity = ({
 
       {isLoading && (
         <div className="flex h-full items-center justify-center py-16">
-          <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+          <Loader className="h-6 w-6 animate-spin text-muted-foreground" />
         </div>
       )}
 
       {isLoadingError && (
         <div className="flex h-full flex-col items-center justify-center py-16">
-          <p className="text-foreground/80 text-sm">
+          <p className="text-sm text-foreground/80">
             <Trans>Unable to load document history</Trans>
           </p>
           <button
             onClick={async () => refetch()}
-            className="text-foreground/70 hover:text-muted-foreground mt-2 text-sm"
+            className="mt-2 text-sm text-foreground/70 hover:text-muted-foreground"
           >
             <Trans>Click here to retry</Trans>
           </button>
@@ -83,16 +83,16 @@ export const DocumentPageViewRecentActivity = ({
             {hasNextPage && (
               <li className="relative flex gap-x-4">
                 <div className="absolute -bottom-6 left-0 top-0 flex w-6 justify-center">
-                  <div className="bg-border w-px" />
+                  <div className="w-px bg-border" />
                 </div>
 
-                <div className="bg-widget relative flex h-6 w-6 flex-none items-center justify-center">
-                  <div className="bg-widget h-1.5 w-1.5 rounded-full ring-1 ring-gray-300 dark:ring-neutral-600" />
+                <div className="relative flex h-6 w-6 flex-none items-center justify-center bg-widget">
+                  <div className="h-1.5 w-1.5 rounded-full bg-widget ring-1 ring-gray-300 dark:ring-neutral-600" />
                 </div>
 
                 <button
                   onClick={async () => fetchNextPage()}
-                  className="text-foreground/70 hover:text-muted-foreground text-xs"
+                  className="text-xs text-foreground/70 hover:text-muted-foreground"
                 >
                   {isFetchingNextPage ? _(msg`Loading...`) : _(msg`Load older activity`)}
                 </button>
@@ -101,7 +101,7 @@ export const DocumentPageViewRecentActivity = ({
 
             {documentAuditLogs.length === 0 && (
               <div className="flex items-center justify-center py-4">
-                <p className="text-muted-foreground/70 text-sm">
+                <p className="text-sm text-muted-foreground/70">
                   <Trans>No recent activity</Trans>
                 </p>
               </div>
@@ -115,44 +115,44 @@ export const DocumentPageViewRecentActivity = ({
                     'absolute left-0 top-0 flex w-6 justify-center',
                   )}
                 >
-                  <div className="bg-border w-px" />
+                  <div className="w-px bg-border" />
                 </div>
 
-                <div className="bg-widget text-foreground/40 relative flex h-6 w-6 flex-none items-center justify-center">
+                <div className="relative flex h-6 w-6 flex-none items-center justify-center bg-widget text-foreground/40">
                   {match(auditLog.type)
                     .with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_COMPLETED, () => (
-                      <div className="bg-widget rounded-full border border-gray-300 p-1 dark:border-neutral-600">
+                      <div className="rounded-full border border-gray-300 bg-widget p-1 dark:border-neutral-600">
                         <CheckCheckIcon className="h-3 w-3" aria-hidden="true" />
                       </div>
                     ))
                     .with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED, () => (
-                      <div className="bg-widget rounded-full border border-gray-300 p-1 dark:border-neutral-600">
+                      <div className="rounded-full border border-gray-300 bg-widget p-1 dark:border-neutral-600">
                         <CheckIcon className="h-3 w-3" aria-hidden="true" />
                       </div>
                     ))
                     .with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_REJECTED, () => (
-                      <div className="bg-widget rounded-full border border-gray-300 p-1 dark:border-neutral-600">
+                      <div className="rounded-full border border-gray-300 bg-widget p-1 dark:border-neutral-600">
                         <AlertTriangle className="h-3 w-3" aria-hidden="true" />
                       </div>
                     ))
                     .with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED, () => (
-                      <div className="bg-widget rounded-full border border-gray-300 p-1 dark:border-neutral-600">
+                      <div className="rounded-full border border-gray-300 bg-widget p-1 dark:border-neutral-600">
                         <MailOpen className="h-3 w-3" aria-hidden="true" />
                       </div>
                     ))
                     .otherwise(() => (
-                      <div className="bg-widget h-1.5 w-1.5 rounded-full ring-1 ring-gray-300 dark:ring-neutral-600" />
+                      <div className="h-1.5 w-1.5 rounded-full bg-widget ring-1 ring-gray-300 dark:ring-neutral-600" />
                     ))}
                 </div>
 
                 <p
-                  className="text-muted-foreground dark:text-muted-foreground/70 flex-auto truncate py-0.5 text-xs leading-5"
-                  title={formatDocumentAuditLogAction(_, auditLog, userId).description}
+                  className="flex-auto truncate py-0.5 text-xs leading-5 text-muted-foreground dark:text-muted-foreground/70"
+                  title={formatDocumentAuditLogAction(i18n, auditLog, userId).description}
                 >
-                  {formatDocumentAuditLogAction(_, auditLog, userId).description}
+                  {formatDocumentAuditLogAction(i18n, auditLog, userId).description}
                 </p>
 
-                <time className="text-muted-foreground dark:text-muted-foreground/70 flex-none py-0.5 text-xs leading-5">
+                <time className="flex-none py-0.5 text-xs leading-5 text-muted-foreground dark:text-muted-foreground/70">
                   {DateTime.fromJSDate(auditLog.createdAt).toRelative({ style: 'short' })}
                 </time>
               </li>
diff --git a/apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx b/apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx
index 5ee92f661..475dc5b62 100644
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx
@@ -339,7 +339,7 @@ export const EnvelopeEditorSettingsDialog = ({
 
       <DialogContent className="flex w-full !max-w-5xl flex-row gap-0 p-0">
         {/* Sidebar. */}
-        <div className="bg-accent/20 flex w-80 flex-col border-r">
+        <div className="flex w-80 flex-col border-r bg-accent/20">
           <DialogHeader className="p-6 pb-4">
             <DialogTitle>Document Settings</DialogTitle>
           </DialogHeader>
@@ -390,7 +390,7 @@ export const EnvelopeEditorSettingsDialog = ({
                                   <InfoIcon className="mx-2 h-4 w-4" />
                                 </TooltipTrigger>
 
-                                <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
+                                <TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
                                   <Trans>
                                     Controls the language for the document, including the language
                                     to be used for email notifications, and the final certificate
@@ -441,7 +441,7 @@ export const EnvelopeEditorSettingsDialog = ({
                                 }))}
                                 selectedValues={field.value}
                                 onChange={field.onChange}
-                                className="bg-background w-full"
+                                className="w-full bg-background"
                                 emptySelectionPlaceholder="Select signature types"
                               />
                             </FormControl>
@@ -518,7 +518,7 @@ export const EnvelopeEditorSettingsDialog = ({
                                   <InfoIcon className="mx-2 h-4 w-4" />
                                 </TooltipTrigger>
 
-                                <TooltipContent className="text-muted-foreground max-w-xs">
+                                <TooltipContent className="max-w-xs text-muted-foreground">
                                   <Trans>
                                     Add an external ID to the document. This can be used to identify
                                     the document in external systems.
@@ -548,7 +548,7 @@ export const EnvelopeEditorSettingsDialog = ({
                                   <InfoIcon className="mx-2 h-4 w-4" />
                                 </TooltipTrigger>
 
-                                <TooltipContent className="text-muted-foreground max-w-xs">
+                                <TooltipContent className="max-w-xs text-muted-foreground">
                                   <Trans>
                                     Add a URL to redirect the user to once the document is signed
                                   </Trans>
@@ -576,7 +576,7 @@ export const EnvelopeEditorSettingsDialog = ({
                                   <InfoIcon className="mx-2 h-4 w-4" />
                                 </TooltipTrigger>
 
-                                <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
+                                <TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
                                   <h2>
                                     <strong>
                                       <Trans>Document Distribution Method</Trans>
@@ -735,14 +735,14 @@ export const EnvelopeEditorSettingsDialog = ({
                                 <TooltipTrigger>
                                   <InfoIcon className="mx-2 h-4 w-4" />
                                 </TooltipTrigger>
-                                <TooltipContent className="text-muted-foreground p-4">
+                                <TooltipContent className="p-4 text-muted-foreground">
                                   <DocumentSendEmailMessageHelper />
                                 </TooltipContent>
                               </Tooltip>
                             </FormLabel>
 
                             <FormControl>
-                              <Textarea className="bg-background h-16 resize-none" {...field} />
+                              <Textarea className="h-16 resize-none bg-background" {...field} />
                             </FormControl>
 
                             <FormMessage />
diff --git a/apps/remix/app/components/tables/document-logs-table.tsx b/apps/remix/app/components/tables/document-logs-table.tsx
index fb1402091..8b0aed223 100644
--- a/apps/remix/app/components/tables/document-logs-table.tsx
+++ b/apps/remix/app/components/tables/document-logs-table.tsx
@@ -95,7 +95,7 @@ export const DocumentLogsTable = ({ documentId, userId }: DocumentLogsTableProps
         header: _(msg`Action`),
         accessorKey: 'type',
         cell: ({ row }) => (
-          <span>{formatDocumentAuditLogAction(_, row.original, userId).description}</span>
+          <span>{formatDocumentAuditLogAction(i18n, row.original, userId).description}</span>
         ),
       },
       {
diff --git a/apps/remix/app/components/tables/internal-audit-log-table.tsx b/apps/remix/app/components/tables/internal-audit-log-table.tsx
index b3b68147a..5449bb052 100644
--- a/apps/remix/app/components/tables/internal-audit-log-table.tsx
+++ b/apps/remix/app/components/tables/internal-audit-log-table.tsx
@@ -65,7 +65,7 @@ const formatUserAgent = (userAgent: string | null | undefined, userAgentInfo: UA
 };
 
 export const InternalAuditLogTable = ({ logs }: AuditLogDataTableProps) => {
-  const { _ } = useLingui();
+  const { _, i18n } = useLingui();
 
   const parser = new UAParser();
 
@@ -73,7 +73,7 @@ export const InternalAuditLogTable = ({ logs }: AuditLogDataTableProps) => {
     <div className="space-y-4">
       {logs.map((log, index) => {
         parser.setUA(log.userAgent || '');
-        const formattedAction = formatDocumentAuditLogAction(_, log);
+        const formattedAction = formatDocumentAuditLogAction(i18n, log);
         const userAgentInfo = parser.getResult();
 
         return (
@@ -95,17 +95,17 @@ export const InternalAuditLogTable = ({ logs }: AuditLogDataTableProps) => {
                   />
 
                   <div>
-                    <div className="text-muted-foreground text-sm font-medium uppercase tracking-wide print:text-[8pt]">
+                    <div className="text-sm font-medium uppercase tracking-wide text-muted-foreground print:text-[8pt]">
                       {log.type.replace(/_/g, ' ')}
                     </div>
 
-                    <div className="text-foreground text-sm font-medium print:text-[8pt]">
+                    <div className="text-sm font-medium text-foreground print:text-[8pt]">
                       {formattedAction.description}
                     </div>
                   </div>
                 </div>
 
-                <div className="text-muted-foreground text-sm print:text-[8pt]">
+                <div className="text-sm text-muted-foreground print:text-[8pt]">
                   {DateTime.fromJSDate(log.createdAt)
                     .setLocale(APP_I18N_OPTIONS.defaultLocale)
                     .toLocaleString(dateFormat)}
@@ -117,27 +117,27 @@ export const InternalAuditLogTable = ({ logs }: AuditLogDataTableProps) => {
               {/* Details Section - Two column layout */}
               <div className="grid grid-cols-2 gap-x-8 gap-y-2 text-xs print:text-[6pt]">
                 <div>
-                  <div className="text-muted-foreground/70 font-medium uppercase tracking-wide">
+                  <div className="font-medium uppercase tracking-wide text-muted-foreground/70">
                     {_(msg`User`)}
                   </div>
 
-                  <div className="text-foreground mt-1 font-mono">{log.email || 'N/A'}</div>
+                  <div className="mt-1 font-mono text-foreground">{log.email || 'N/A'}</div>
                 </div>
 
                 <div className="text-right">
-                  <div className="text-muted-foreground/70 font-medium uppercase tracking-wide">
+                  <div className="font-medium uppercase tracking-wide text-muted-foreground/70">
                     {_(msg`IP Address`)}
                   </div>
 
-                  <div className="text-foreground mt-1 font-mono">{log.ipAddress || 'N/A'}</div>
+                  <div className="mt-1 font-mono text-foreground">{log.ipAddress || 'N/A'}</div>
                 </div>
 
                 <div className="col-span-2">
-                  <div className="text-muted-foreground/70 font-medium uppercase tracking-wide">
+                  <div className="font-medium uppercase tracking-wide text-muted-foreground/70">
                     {_(msg`User Agent`)}
                   </div>
 
-                  <div className="text-foreground mt-1">
+                  <div className="mt-1 text-foreground">
                     {_(formatUserAgent(log.userAgent, userAgentInfo))}
                   </div>
                 </div>
diff --git a/apps/remix/app/routes/_authenticated+/o.$orgUrl._index.tsx b/apps/remix/app/routes/_authenticated+/o.$orgUrl._index.tsx
index e7cfe75c6..3829bcabb 100644
--- a/apps/remix/app/routes/_authenticated+/o.$orgUrl._index.tsx
+++ b/apps/remix/app/routes/_authenticated+/o.$orgUrl._index.tsx
@@ -40,8 +40,8 @@ export default function OrganisationSettingsTeamsPage() {
   if (organisation.teams.length === 0) {
     return (
       <div className="flex flex-col items-center justify-center px-4 py-16">
-        <div className="bg-muted mb-6 flex h-20 w-20 items-center justify-center rounded-full">
-          <UsersIcon className="text-muted-foreground h-10 w-10" />
+        <div className="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-muted">
+          <UsersIcon className="h-10 w-10 text-muted-foreground" />
         </div>
 
         <h2 className="mb-2 text-xl font-semibold">
@@ -53,7 +53,7 @@ export default function OrganisationSettingsTeamsPage() {
           organisation.currentOrganisationRole,
         ) ? (
           <>
-            <p className="text-muted-foreground mb-8 max-w-md text-center text-sm">
+            <p className="mb-8 max-w-md text-center text-sm text-muted-foreground">
               <Trans>
                 Teams help you organise your work and collaborate with others. Create your first
                 team to get started.
@@ -73,21 +73,21 @@ export default function OrganisationSettingsTeamsPage() {
               <h3 className="mb-2 font-medium">
                 <Trans>What you can do with teams:</Trans>
               </h3>
-              <ul className="text-muted-foreground space-y-2 text-sm">
+              <ul className="space-y-2 text-sm text-muted-foreground">
                 <li className="flex flex-row items-center gap-2">
-                  <div className="bg-muted mt-0.5 flex h-5 w-5 items-center justify-center rounded-full font-bold">
+                  <div className="mt-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-muted font-bold">
                     <span className="text-xs">1</span>
                   </div>
                   <Trans>Organize your documents and templates</Trans>
                 </li>
                 <li className="flex flex-row items-center gap-2">
-                  <div className="bg-muted mt-0.5 flex h-5 w-5 items-center justify-center rounded-full font-bold">
+                  <div className="mt-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-muted font-bold">
                     <span className="text-xs">2</span>
                   </div>
                   <Trans>Invite team members to collaborate</Trans>
                 </li>
                 <li className="flex flex-row items-center gap-2">
-                  <div className="bg-muted mt-0.5 flex h-5 w-5 items-center justify-center rounded-full font-bold">
+                  <div className="mt-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-muted font-bold">
                     <span className="text-xs">3</span>
                   </div>
                   <Trans>Manage permissions and access controls</Trans>
@@ -96,7 +96,7 @@ export default function OrganisationSettingsTeamsPage() {
             </div>
           </>
         ) : (
-          <p className="text-muted-foreground mb-8 max-w-md text-center text-sm">
+          <p className="mb-8 max-w-md text-center text-sm text-muted-foreground">
             <Trans>
               You currently have no access to any teams within this organisation. Please contact
               your organisation to request access.
@@ -114,7 +114,7 @@ export default function OrganisationSettingsTeamsPage() {
           <h1 className="text-2xl font-semibold tracking-tight">
             <Trans>{organisation.name} Teams</Trans>
           </h1>
-          <p className="text-muted-foreground mt-1 text-sm">
+          <p className="mt-1 text-sm text-muted-foreground">
             <Trans>Select a team to view its dashboard</Trans>
           </p>
         </div>
@@ -129,7 +129,7 @@ export default function OrganisationSettingsTeamsPage() {
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
         {organisation.teams.map((team) => (
           <Link to={`/t/${team.url}`} key={team.id}>
-            <Card className="hover:bg-muted/50 border-border h-full border transition-all">
+            <Card className="h-full border border-border transition-all hover:bg-muted/50">
               <CardContent className="p-4">
                 <div className="flex items-center gap-3">
                   <Avatar className="h-10 w-10 border-2 border-solid">
@@ -145,7 +145,7 @@ export default function OrganisationSettingsTeamsPage() {
                     <div className="flex items-center justify-between">
                       <div>
                         <h3 className="font-medium">{team.name}</h3>
-                        <div className="text-muted-foreground truncate text-xs">
+                        <div className="truncate text-xs text-muted-foreground">
                           {formatTeamUrl(team.url)}
                         </div>
                       </div>
@@ -154,11 +154,11 @@ export default function OrganisationSettingsTeamsPage() {
                     </div>
 
                     <div className="mt-2 flex items-center gap-4">
-                      <div className="text-muted-foreground flex items-center gap-1 text-xs">
+                      <div className="flex items-center gap-1 text-xs text-muted-foreground">
                         <CalendarIcon className="h-3 w-3" />
                         {i18n.date(team.createdAt, { dateStyle: 'short' })}
                       </div>
-                      <div className="text-muted-foreground flex items-center gap-1 text-xs">
+                      <div className="flex items-center gap-1 text-xs text-muted-foreground">
                         <UserIcon className="h-3 w-3" />
                         <span>{t(TEAM_MEMBER_ROLE_MAP[team.currentTeamRole])}</span>
                       </div>
diff --git a/apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.branding.tsx b/apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.branding.tsx
index dabbea2b8..5d71baaf9 100644
--- a/apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.branding.tsx
+++ b/apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.branding.tsx
@@ -79,7 +79,7 @@ export default function OrganisationSettingsBrandingPage() {
   if (isLoadingOrganisation || !organisationWithSettings) {
     return (
       <div className="flex items-center justify-center rounded-lg py-32">
-        <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+        <Loader className="h-6 w-6 animate-spin text-muted-foreground" />
       </div>
     );
   }
diff --git a/apps/remix/app/routes/_internal+/[__htmltopdf]+/audit-log.tsx b/apps/remix/app/routes/_internal+/[__htmltopdf]+/audit-log.tsx
index b4e6716f9..cee5f06d8 100644
--- a/apps/remix/app/routes/_internal+/[__htmltopdf]+/audit-log.tsx
+++ b/apps/remix/app/routes/_internal+/[__htmltopdf]+/audit-log.tsx
@@ -149,7 +149,7 @@ export default function AuditLog({ loaderData }: Route.ComponentProps) {
             <span className="mt-1 block">
               {DateTime.fromJSDate(document.createdAt)
                 .setLocale(APP_I18N_OPTIONS.defaultLocale)
-                .toFormat('yyyy-mm-dd hh:mm:ss a (ZZZZ)')}
+                .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')}
             </span>
           </p>
 
@@ -159,7 +159,7 @@ export default function AuditLog({ loaderData }: Route.ComponentProps) {
             <span className="mt-1 block">
               {DateTime.fromJSDate(document.updatedAt)
                 .setLocale(APP_I18N_OPTIONS.defaultLocale)
-                .toFormat('yyyy-mm-dd hh:mm:ss a (ZZZZ)')}
+                .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')}
             </span>
           </p>
 
diff --git a/apps/remix/app/routes/_recipient+/sign.$token+/_index.tsx b/apps/remix/app/routes/_recipient+/sign.$token+/_index.tsx
index 41a6fe72e..ede85cafd 100644
--- a/apps/remix/app/routes/_recipient+/sign.$token+/_index.tsx
+++ b/apps/remix/app/routes/_recipient+/sign.$token+/_index.tsx
@@ -355,16 +355,16 @@ const SigningPageV1 = ({ data }: { data: Awaited<ReturnType<typeof handleV1Loade
             </Trans>
           </h2>
 
-          <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+          <p className="mt-2.5 max-w-[60ch] text-center text-sm font-medium text-muted-foreground/60 md:text-base">
             <Trans>This document has been cancelled by the owner.</Trans>
           </p>
 
           {user ? (
-            <Link to="/" className="text-documenso-700 hover:text-documenso-600 mt-36">
+            <Link to="/" className="mt-36 text-documenso-700 hover:text-documenso-600">
               <Trans>Go Back Home</Trans>
             </Link>
           ) : (
-            <p className="text-muted-foreground/60 mt-36 text-sm">
+            <p className="mt-36 text-sm text-muted-foreground/60">
               <Trans>
                 Want to send slick signing links like this one?{' '}
                 <Link
@@ -455,16 +455,16 @@ const SigningPageV2 = ({ data }: { data: Awaited<ReturnType<typeof handleV2Loade
             </Trans>
           </h2>
 
-          <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+          <p className="mt-2.5 max-w-[60ch] text-center text-sm font-medium text-muted-foreground/60 md:text-base">
             <Trans>This document has been cancelled by the owner.</Trans>
           </p>
 
           {user ? (
-            <Link to="/" className="text-documenso-700 hover:text-documenso-600 mt-36">
+            <Link to="/" className="mt-36 text-documenso-700 hover:text-documenso-600">
               <Trans>Go Back Home</Trans>
             </Link>
           ) : (
-            <p className="text-muted-foreground/60 mt-36 text-sm">
+            <p className="mt-36 text-sm text-muted-foreground/60">
               <Trans>
                 Want to send slick signing links like this one?{' '}
                 <Link
diff --git a/apps/remix/app/routes/_recipient+/sign.$token+/rejected.tsx b/apps/remix/app/routes/_recipient+/sign.$token+/rejected.tsx
index d0e4746a0..861ae0d92 100644
--- a/apps/remix/app/routes/_recipient+/sign.$token+/rejected.tsx
+++ b/apps/remix/app/routes/_recipient+/sign.$token+/rejected.tsx
@@ -91,25 +91,25 @@ export default function RejectedSigningPage({ loaderData }: Route.ComponentProps
 
       <div className="flex flex-col items-center">
         <div className="flex items-center gap-x-4">
-          <XCircle className="text-destructive h-10 w-10" />
+          <XCircle className="h-10 w-10 text-destructive" />
 
           <h2 className="max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
             <Trans>Document Rejected</Trans>
           </h2>
         </div>
 
-        <div className="text-destructive mt-4 flex items-center text-center text-sm">
+        <div className="mt-4 flex items-center text-center text-sm text-destructive">
           <Trans>You have rejected this document</Trans>
         </div>
 
-        <p className="text-muted-foreground mt-6 max-w-[60ch] text-center text-sm">
+        <p className="mt-6 max-w-[60ch] text-center text-sm text-muted-foreground">
           <Trans>
             The document owner has been notified of your decision. They may contact you with further
             instructions if necessary.
           </Trans>
         </p>
 
-        <p className="text-muted-foreground mt-2 max-w-[60ch] text-center text-sm">
+        <p className="mt-2 max-w-[60ch] text-center text-sm text-muted-foreground">
           <Trans>No further action is required from you at this time.</Trans>
         </p>
 
diff --git a/apps/remix/app/routes/_recipient+/sign.$token+/waiting.tsx b/apps/remix/app/routes/_recipient+/sign.$token+/waiting.tsx
index 6184372ff..9917933cb 100644
--- a/apps/remix/app/routes/_recipient+/sign.$token+/waiting.tsx
+++ b/apps/remix/app/routes/_recipient+/sign.$token+/waiting.tsx
@@ -78,14 +78,14 @@ export default function WaitingForTurnToSignPage({ loaderData }: Route.Component
           <Trans>Waiting for Your Turn</Trans>
         </h2>
 
-        <p className="text-muted-foreground mt-2 text-sm">
+        <p className="mt-2 text-sm text-muted-foreground">
           <Trans>
             It's currently not your turn to sign. You will receive an email with instructions once
             it's your turn to sign the document.
           </Trans>
         </p>
 
-        <p className="text-muted-foreground mt-4 text-sm">
+        <p className="mt-4 text-sm text-muted-foreground">
           <Trans>Please check your email for updates.</Trans>
         </p>
 
diff --git a/packages/app-tests/visual-regression/blank-certificate.png b/packages/app-tests/visual-regression/blank-certificate.png
index 390501365..3d546ca2f 100644
Binary files a/packages/app-tests/visual-regression/blank-certificate.png and b/packages/app-tests/visual-regression/blank-certificate.png differ
diff --git a/packages/email/templates/confirm-team-email.tsx b/packages/email/templates/confirm-team-email.tsx
index 4b8b6ee06..e6aa2a272 100644
--- a/packages/email/templates/confirm-team-email.tsx
+++ b/packages/email/templates/confirm-team-email.tsx
@@ -113,7 +113,7 @@ export const ConfirmTeamEmailTemplate = ({
 
               <Section className="mb-6 mt-8 text-center">
                 <Button
-                  className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
+                  className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center text-sm font-medium text-black no-underline"
                   href={`${baseUrl}/team/verify/email/${token}`}
                 >
                   <Trans>Accept</Trans>
diff --git a/packages/email/templates/reset-password.tsx b/packages/email/templates/reset-password.tsx
index 1d35ea8a8..2e8d2d9f9 100644
--- a/packages/email/templates/reset-password.tsx
+++ b/packages/email/templates/reset-password.tsx
@@ -72,7 +72,7 @@ export const ResetPasswordTemplate = ({
                 <Trans>
                   Didn't request a password change? We are here to help you secure your account,
                   just{' '}
-                  <Link className="text-documenso-700 font-normal" href="mailto:hi@documenso.com">
+                  <Link className="font-normal text-documenso-700" href="mailto:hi@documenso.com">
                     contact us
                   </Link>
                   .
diff --git a/packages/lib/constants/app.ts b/packages/lib/constants/app.ts
index 87633c803..452ec68a0 100644
--- a/packages/lib/constants/app.ts
+++ b/packages/lib/constants/app.ts
@@ -21,3 +21,12 @@ export const USE_INTERNAL_URL_BROWSERLESS = () =>
 
 export const IS_AI_FEATURES_CONFIGURED = () =>
   !!env('GOOGLE_VERTEX_PROJECT_ID') && !!env('GOOGLE_VERTEX_API_KEY');
+
+/**
+ * Temporary flag to toggle between Playwright-based and Konva-based PDF generation
+ * for audit logs during sealing.
+ *
+ * @deprecated This is a temporary flag and will be removed once Konva-based generation is stable.
+ */
+export const NEXT_PRIVATE_USE_PLAYWRIGHT_PDF = () =>
+  env('NEXT_PRIVATE_USE_PLAYWRIGHT_PDF') === 'true';
diff --git a/packages/lib/constants/pdf.ts b/packages/lib/constants/pdf.ts
index 31f5bde62..2d66948b8 100644
--- a/packages/lib/constants/pdf.ts
+++ b/packages/lib/constants/pdf.ts
@@ -8,3 +8,8 @@ export const MIN_STANDARD_FONT_SIZE = 8;
 export const MIN_HANDWRITING_FONT_SIZE = 20;
 
 export const CAVEAT_FONT_PATH = () => `${NEXT_PUBLIC_WEBAPP_URL()}/fonts/caveat.ttf`;
+
+export const PDF_SIZE_A4_72PPI = {
+  width: 595,
+  height: 842,
+};
diff --git a/packages/lib/jobs/definitions/internal/seal-document.handler.ts b/packages/lib/jobs/definitions/internal/seal-document.handler.ts
index 8759dcbe3..d4148cfc7 100644
--- a/packages/lib/jobs/definitions/internal/seal-document.handler.ts
+++ b/packages/lib/jobs/definitions/internal/seal-document.handler.ts
@@ -7,7 +7,7 @@ import {
   rotateDegrees,
   translate,
 } from '@cantoo/pdf-lib';
-import type { DocumentData, DocumentMeta, Envelope, EnvelopeItem, Field } from '@prisma/client';
+import type { DocumentData, Envelope, EnvelopeItem, Field } from '@prisma/client';
 import {
   DocumentStatus,
   EnvelopeType,
@@ -20,9 +20,13 @@ import path from 'node:path';
 import { groupBy } from 'remeda';
 import { match } from 'ts-pattern';
 
+import { generateAuditLogPdf } from '@documenso/lib/server-only/pdf/generate-audit-log-pdf';
+import { generateCertificatePdf } from '@documenso/lib/server-only/pdf/generate-certificate-pdf';
 import { prisma } from '@documenso/prisma';
 import { signPdf } from '@documenso/signing';
 
+import { NEXT_PRIVATE_USE_PLAYWRIGHT_PDF } from '../../../constants/app';
+import { PDF_SIZE_A4_72PPI } from '../../../constants/pdf';
 import { AppError, AppErrorCode } from '../../../errors/app-error';
 import { sendCompletedEmail } from '../../../server-only/document/send-completed-email';
 import { getAuditLogsPdf } from '../../../server-only/htmltopdf/get-audit-logs-pdf';
@@ -48,7 +52,7 @@ import { putPdfFileServerSide } from '../../../universal/upload/put-file.server'
 import { fieldsContainUnsignedRequiredField } from '../../../utils/advanced-fields-helpers';
 import { isDocumentCompleted } from '../../../utils/document';
 import { createDocumentAuditLogData } from '../../../utils/document-audit-logs';
-import { mapDocumentIdToSecondaryId, mapSecondaryIdToDocumentId } from '../../../utils/envelope';
+import { mapDocumentIdToSecondaryId } from '../../../utils/envelope';
 import type { JobRunIO } from '../../client/_internal/job';
 import type { TSealDocumentJobDefinition } from './seal-document';
 
@@ -68,8 +72,19 @@ export const run = async ({
         secondaryId: mapDocumentIdToSecondaryId(documentId),
       },
       include: {
+        user: {
+          select: {
+            name: true,
+            email: true,
+          },
+        },
         documentMeta: true,
         recipients: true,
+        fields: {
+          include: {
+            signature: true,
+          },
+        },
         envelopeItems: {
           include: {
             documentData: true,
@@ -116,23 +131,20 @@ export const run = async ({
       });
     }
 
-    let envelopeItems = envelope.envelopeItems;
+    let { envelopeItems } = envelope;
+
+    const fields = envelope.fields;
 
     if (envelopeItems.length < 1) {
       throw new Error(`Document ${envelope.id} has no envelope items`);
     }
 
-    const recipients = await prisma.recipient.findMany({
-      where: {
-        envelopeId: envelope.id,
-        role: {
-          not: RecipientRole.CC,
-        },
-      },
-    });
+    const recipientsWithoutCCers = envelope.recipients.filter(
+      (recipient) => recipient.role !== RecipientRole.CC,
+    );
 
     // Determine if the document has been rejected by checking if any recipient has rejected it
-    const rejectedRecipient = recipients.find(
+    const rejectedRecipient = recipientsWithoutCCers.find(
       (recipient) => recipient.signingStatus === SigningStatus.REJECTED,
     );
 
@@ -141,15 +153,6 @@ export const run = async ({
     // Get the rejection reason from the rejected recipient
     const rejectionReason = rejectedRecipient?.rejectionReason ?? '';
 
-    const fields = await prisma.field.findMany({
-      where: {
-        envelopeId: envelope.id,
-      },
-      include: {
-        signature: true,
-      },
-    });
-
     // Skip the field check if the document is rejected
     if (!isRejected && fieldsContainUnsignedRequiredField(fields)) {
       throw new Error(`Document ${envelope.id} has unsigned required fields`);
@@ -178,13 +181,52 @@ export const run = async ({
       });
     }
 
-    const legacyDocumentId = mapSecondaryIdToDocumentId(envelope.secondaryId);
+    let certificateDoc: PDFDocument | null = null;
+    let auditLogDoc: PDFDocument | null = null;
 
-    const { certificateData, auditLogData } = await getCertificateAndAuditLogData({
-      legacyDocumentId,
-      documentMeta: envelope.documentMeta,
-      settings,
-    });
+    if (settings.includeSigningCertificate || settings.includeAuditLog) {
+      const certificatePayload = {
+        envelope,
+        recipients: envelope.recipients, // Need to use the recipients from envelope which contains ALL recipients.
+        fields,
+        language: envelope.documentMeta.language,
+        envelopeOwner: {
+          email: envelope.user.email,
+          name: envelope.user.name || '',
+        },
+        envelopeItems: envelopeItems.map((item) => item.title),
+        pageWidth: PDF_SIZE_A4_72PPI.width,
+        pageHeight: PDF_SIZE_A4_72PPI.height,
+      };
+
+      // Use Playwright-based PDF generation if enabled, otherwise use Konva-based generation.
+      // This is a temporary toggle while we validate the Konva-based approach.
+      const usePlaywrightPdf = NEXT_PRIVATE_USE_PLAYWRIGHT_PDF();
+
+      const makeCertificatePdf = async () =>
+        usePlaywrightPdf
+          ? getCertificatePdf({
+              documentId,
+              language: envelope.documentMeta.language,
+            }).then(async (buffer) => PDFDocument.load(buffer))
+          : generateCertificatePdf(certificatePayload);
+
+      const makeAuditLogPdf = async () =>
+        usePlaywrightPdf
+          ? getAuditLogsPdf({
+              documentId,
+              language: envelope.documentMeta.language,
+            }).then(async (buffer) => PDFDocument.load(buffer))
+          : generateAuditLogPdf(certificatePayload);
+
+      const [createdCertificatePdf, createdAuditLogPdf] = await Promise.all([
+        settings.includeSigningCertificate ? makeCertificatePdf() : null,
+        settings.includeAuditLog ? makeAuditLogPdf() : null,
+      ]);
+
+      certificateDoc = createdCertificatePdf;
+      auditLogDoc = createdAuditLogPdf;
+    }
 
     const newDocumentData: Array<{ oldDocumentDataId: string; newDocumentDataId: string }> = [];
 
@@ -203,8 +245,8 @@ export const run = async ({
         envelopeItemFields,
         isRejected,
         rejectionReason,
-        certificateData,
-        auditLogData,
+        certificateDoc,
+        auditLogDoc,
       });
 
       newDocumentData.push(result);
@@ -300,8 +342,8 @@ type DecorateAndSignPdfOptions = {
   envelopeItemFields: Field[];
   isRejected: boolean;
   rejectionReason: string;
-  certificateData: Buffer | null;
-  auditLogData: Buffer | null;
+  certificateDoc: PDFDocument | null;
+  auditLogDoc: PDFDocument | null;
 };
 
 /**
@@ -313,8 +355,8 @@ const decorateAndSignPdf = async ({
   envelopeItemFields,
   isRejected,
   rejectionReason,
-  certificateData,
-  auditLogData,
+  certificateDoc,
+  auditLogDoc,
 }: DecorateAndSignPdfOptions) => {
   const pdfData = await getFileServerSide(envelopeItem.documentData);
 
@@ -330,9 +372,7 @@ const decorateAndSignPdf = async ({
     await addRejectionStampToPdf(pdfDoc, rejectionReason);
   }
 
-  if (certificateData) {
-    const certificateDoc = await PDFDocument.load(certificateData);
-
+  if (certificateDoc) {
     const certificatePages = await pdfDoc.copyPages(
       certificateDoc,
       certificateDoc.getPageIndices(),
@@ -343,9 +383,7 @@ const decorateAndSignPdf = async ({
     });
   }
 
-  if (auditLogData) {
-    const auditLogDoc = await PDFDocument.load(auditLogData);
-
+  if (auditLogDoc) {
     const auditLogPages = await pdfDoc.copyPages(auditLogDoc, auditLogDoc.getPageIndices());
 
     auditLogPages.forEach((page) => {
@@ -470,47 +508,3 @@ const decorateAndSignPdf = async ({
     newDocumentDataId: newDocumentData.id,
   };
 };
-
-export const getCertificateAndAuditLogData = async ({
-  legacyDocumentId,
-  documentMeta,
-  settings,
-}: {
-  legacyDocumentId: number;
-  documentMeta: DocumentMeta;
-  settings: { includeSigningCertificate: boolean; includeAuditLog: boolean };
-}) => {
-  const getCertificateDataPromise = settings.includeSigningCertificate
-    ? getCertificatePdf({
-        documentId: legacyDocumentId,
-        language: documentMeta.language,
-      }).catch((e) => {
-        console.log('Failed to get certificate PDF');
-        console.error(e);
-
-        return null;
-      })
-    : null;
-
-  const getAuditLogDataPromise = settings.includeAuditLog
-    ? getAuditLogsPdf({
-        documentId: legacyDocumentId,
-        language: documentMeta.language,
-      }).catch((e) => {
-        console.log('Failed to get audit logs PDF');
-        console.error(e);
-
-        return null;
-      })
-    : null;
-
-  const [certificateData, auditLogData] = await Promise.all([
-    getCertificateDataPromise,
-    getAuditLogDataPromise,
-  ]);
-
-  return {
-    certificateData,
-    auditLogData,
-  };
-};
diff --git a/packages/lib/server-only/htmltopdf/get-audit-logs-pdf.ts b/packages/lib/server-only/htmltopdf/get-audit-logs-pdf.ts
index b5ef967ff..582c191a9 100644
--- a/packages/lib/server-only/htmltopdf/get-audit-logs-pdf.ts
+++ b/packages/lib/server-only/htmltopdf/get-audit-logs-pdf.ts
@@ -1,3 +1,6 @@
+/**
+ * @deprecated We use Konva to generate the audit logs PDF now.
+ */
 import { DateTime } from 'luxon';
 import type { Browser } from 'playwright';
 
diff --git a/packages/lib/server-only/htmltopdf/get-certificate-pdf.ts b/packages/lib/server-only/htmltopdf/get-certificate-pdf.ts
index fdc186deb..59862844c 100644
--- a/packages/lib/server-only/htmltopdf/get-certificate-pdf.ts
+++ b/packages/lib/server-only/htmltopdf/get-certificate-pdf.ts
@@ -1,3 +1,6 @@
+/**
+ * @deprecated We use Konva to generate the certificate PDF now.
+ */
 import { DateTime } from 'luxon';
 import type { Browser } from 'playwright';
 
diff --git a/packages/lib/server-only/pdf/generate-audit-log-pdf.ts b/packages/lib/server-only/pdf/generate-audit-log-pdf.ts
new file mode 100644
index 000000000..4f257fc80
--- /dev/null
+++ b/packages/lib/server-only/pdf/generate-audit-log-pdf.ts
@@ -0,0 +1,60 @@
+import { i18n } from '@lingui/core';
+
+import { prisma } from '@documenso/prisma';
+
+import { ZSupportedLanguageCodeSchema } from '../../constants/i18n';
+import { parseDocumentAuditLogData } from '../../utils/document-audit-logs';
+import { getTranslations } from '../../utils/i18n';
+import { getOrganisationClaimByTeamId } from '../organisation/get-organisation-claims';
+import type { GenerateCertificatePdfOptions } from './generate-certificate-pdf';
+import { mergeFilesIntoPdf } from './generate-certificate-pdf';
+import { renderAuditLogs } from './render-audit-logs';
+
+type GenerateAuditLogPdfOptions = GenerateCertificatePdfOptions & {
+  envelopeItems: string[];
+};
+
+export const generateAuditLogPdf = async (options: GenerateAuditLogPdfOptions) => {
+  const { envelope, envelopeOwner, envelopeItems, recipients, language, pageWidth, pageHeight } =
+    options;
+
+  const documentLanguage = ZSupportedLanguageCodeSchema.parse(language);
+
+  const [organisationClaim, auditLogs, messages] = await Promise.all([
+    getOrganisationClaimByTeamId({ teamId: envelope.teamId }),
+    getAuditLogs(envelope.id),
+    getTranslations(documentLanguage),
+  ]);
+
+  i18n.loadAndActivate({
+    locale: documentLanguage,
+    messages,
+  });
+
+  const auditLogPages = await renderAuditLogs({
+    envelope,
+    envelopeOwner,
+    envelopeItems,
+    recipients,
+    auditLogs,
+    hidePoweredBy: organisationClaim.flags.hidePoweredBy ?? false,
+    pageWidth,
+    pageHeight,
+    i18n,
+  });
+
+  return await mergeFilesIntoPdf(auditLogPages);
+};
+
+const getAuditLogs = async (envelopeId: string) => {
+  const auditLogs = await prisma.documentAuditLog.findMany({
+    where: {
+      envelopeId,
+    },
+    orderBy: {
+      createdAt: 'desc',
+    },
+  });
+
+  return auditLogs.map((auditLog) => parseDocumentAuditLogData(auditLog));
+};
diff --git a/packages/lib/server-only/pdf/generate-certificate-pdf.ts b/packages/lib/server-only/pdf/generate-certificate-pdf.ts
new file mode 100644
index 000000000..ba302b2a3
--- /dev/null
+++ b/packages/lib/server-only/pdf/generate-certificate-pdf.ts
@@ -0,0 +1,160 @@
+import { PDFDocument } from '@cantoo/pdf-lib';
+import { i18n } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+import type { DocumentMeta } from '@prisma/client';
+import type { Envelope, Field, Recipient, Signature } from '@prisma/client';
+import { FieldType } from '@prisma/client';
+import { prop, sortBy } from 'remeda';
+import { match } from 'ts-pattern';
+
+import { ZSupportedLanguageCodeSchema } from '../../constants/i18n';
+import type { TDocumentAuditLogBaseSchema } from '../../types/document-audit-logs';
+import { extractDocumentAuthMethods } from '../../utils/document-auth';
+import { getTranslations } from '../../utils/i18n';
+import { getDocumentCertificateAuditLogs } from '../document/get-document-certificate-audit-logs';
+import { getOrganisationClaimByTeamId } from '../organisation/get-organisation-claims';
+import { renderCertificate } from './render-certificate';
+
+export type GenerateCertificatePdfOptions = {
+  envelope: Envelope & {
+    documentMeta: DocumentMeta;
+  };
+  envelopeOwner: {
+    name: string;
+    email: string;
+  };
+  recipients: Recipient[];
+  fields: (Pick<Field, 'id' | 'type' | 'secondaryId' | 'recipientId'> & {
+    signature?: Pick<Signature, 'signatureImageAsBase64' | 'typedSignature'> | null;
+  })[];
+  language?: string;
+  pageWidth: number;
+  pageHeight: number;
+};
+
+export const generateCertificatePdf = async (options: GenerateCertificatePdfOptions) => {
+  const { envelope, envelopeOwner, recipients, fields, language, pageWidth, pageHeight } = options;
+
+  const documentLanguage = ZSupportedLanguageCodeSchema.parse(language);
+
+  const [organisationClaim, auditLogs, messages] = await Promise.all([
+    getOrganisationClaimByTeamId({ teamId: envelope.teamId }),
+    getDocumentCertificateAuditLogs({
+      envelopeId: envelope.id,
+    }),
+    getTranslations(documentLanguage),
+  ]);
+
+  i18n.loadAndActivate({
+    locale: documentLanguage,
+    messages,
+  });
+
+  const payload = {
+    recipients: recipients.map((recipient) => {
+      const recipientId = recipient.id;
+
+      const signatureField = fields.find(
+        (field) => field.recipientId === recipient.id && field.type === FieldType.SIGNATURE,
+      );
+
+      const emailSent: TDocumentAuditLogBaseSchema | undefined = auditLogs['EMAIL_SENT'].find(
+        (log) => log.type === 'EMAIL_SENT' && log.data.recipientId === recipientId,
+      );
+
+      const documentSent: TDocumentAuditLogBaseSchema | undefined = auditLogs['DOCUMENT_SENT'].find(
+        (log) => log.type === 'DOCUMENT_SENT',
+      );
+
+      const documentOpened: TDocumentAuditLogBaseSchema | undefined = auditLogs[
+        'DOCUMENT_OPENED'
+      ].find((log) => log.type === 'DOCUMENT_OPENED' && log.data.recipientId === recipientId);
+
+      const documentRecipientCompleted: TDocumentAuditLogBaseSchema | undefined = auditLogs[
+        'DOCUMENT_RECIPIENT_COMPLETED'
+      ].find(
+        (log) =>
+          log.type === 'DOCUMENT_RECIPIENT_COMPLETED' && log.data.recipientId === recipientId,
+      );
+
+      const documentRecipientRejected: TDocumentAuditLogBaseSchema | undefined = auditLogs[
+        'DOCUMENT_RECIPIENT_REJECTED'
+      ].find(
+        (log) => log.type === 'DOCUMENT_RECIPIENT_REJECTED' && log.data.recipientId === recipientId,
+      );
+
+      const extractedAuthMethods = extractDocumentAuthMethods({
+        documentAuth: envelope.authOptions,
+        recipientAuth: recipient.authOptions,
+      });
+
+      const insertedAuditLogsWithFieldAuth = sortBy(
+        auditLogs.DOCUMENT_FIELD_INSERTED.filter(
+          (log) => log.data.recipientId === recipient.id && log.data.fieldSecurity,
+        ),
+        [prop('createdAt'), 'desc'],
+      );
+
+      const actionAuthMethod = insertedAuditLogsWithFieldAuth.at(0)?.data?.fieldSecurity?.type;
+
+      let authLevel = match(actionAuthMethod)
+        .with('ACCOUNT', () => i18n._(msg`Account Re-Authentication`))
+        .with('TWO_FACTOR_AUTH', () => i18n._(msg`Two-Factor Re-Authentication`))
+        .with('PASSWORD', () => i18n._(msg`Password Re-Authentication`))
+        .with('PASSKEY', () => i18n._(msg`Passkey Re-Authentication`))
+        .with('EXPLICIT_NONE', () => i18n._(msg`Email`))
+        .with(undefined, () => null)
+        .exhaustive();
+
+      if (!authLevel) {
+        const accessAuthMethod = extractedAuthMethods.derivedRecipientAccessAuth.at(0);
+
+        authLevel = match(accessAuthMethod)
+          .with('ACCOUNT', () => i18n._(msg`Account Authentication`))
+          .with('TWO_FACTOR_AUTH', () => i18n._(msg`Two-Factor Authentication`))
+          .with(undefined, () => i18n._(msg`Email`))
+          .exhaustive();
+      }
+
+      return {
+        id: recipient.id,
+        name: recipient.name,
+        email: recipient.email,
+        role: recipient.role,
+        signingStatus: recipient.signingStatus,
+        signatureField,
+        rejectionReason: recipient.rejectionReason,
+        authLevel,
+        logs: {
+          emailed: emailSent ?? null,
+          sent: documentSent ?? null,
+          opened: documentOpened ?? null,
+          completed: documentRecipientCompleted ?? null,
+          rejected: documentRecipientRejected ?? null,
+        },
+      };
+    }),
+    envelopeOwner,
+    qrToken: envelope.qrToken,
+    hidePoweredBy: organisationClaim.flags.hidePoweredBy ?? false,
+    pageWidth,
+    pageHeight,
+    i18n,
+  };
+
+  const certificatePages = await renderCertificate(payload);
+
+  return await mergeFilesIntoPdf(certificatePages);
+};
+
+export async function mergeFilesIntoPdf(buffers: Uint8Array[]) {
+  const mergedPdf = await PDFDocument.create();
+
+  for (const buffer of buffers) {
+    const pdf = await PDFDocument.load(buffer);
+    const pages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
+    pages.forEach((p) => mergedPdf.addPage(p));
+  }
+
+  return mergedPdf;
+}
diff --git a/packages/lib/server-only/pdf/render-audit-logs.ts b/packages/lib/server-only/pdf/render-audit-logs.ts
new file mode 100644
index 000000000..2cd5d307c
--- /dev/null
+++ b/packages/lib/server-only/pdf/render-audit-logs.ts
@@ -0,0 +1,721 @@
+import type { I18n } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+import type { DocumentMeta } from '@prisma/client';
+import type { Envelope, RecipientRole } from '@prisma/client';
+import Konva from 'konva';
+import 'konva/skia-backend';
+import type { DateTimeFormatOptions } from 'luxon';
+import { DateTime } from 'luxon';
+import fs from 'node:fs';
+import path from 'node:path';
+import type { Canvas } from 'skia-canvas';
+import { FontLibrary } from 'skia-canvas';
+import { Image as SkiaImage } from 'skia-canvas';
+import { match } from 'ts-pattern';
+import { P } from 'ts-pattern';
+import { UAParser } from 'ua-parser-js';
+
+import { DOCUMENT_STATUS } from '../../constants/document';
+import { APP_I18N_OPTIONS } from '../../constants/i18n';
+import { RECIPIENT_ROLES_DESCRIPTION } from '../../constants/recipient-roles';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
+import type { TDocumentAuditLog } from '../../types/document-audit-logs';
+import { formatDocumentAuditLogAction } from '../../utils/document-audit-logs';
+
+export type AuditLogRecipient = {
+  id: number;
+  name: string;
+  email: string;
+  role: RecipientRole;
+};
+
+type GenerateAuditLogsOptions = {
+  envelope: Envelope & {
+    documentMeta: DocumentMeta;
+  };
+  envelopeItems: string[];
+  recipients: AuditLogRecipient[];
+  auditLogs: TDocumentAuditLog[];
+  hidePoweredBy: boolean;
+  pageWidth: number;
+  pageHeight: number;
+  i18n: I18n;
+  envelopeOwner: {
+    email: string;
+    name: string;
+  };
+};
+
+const parser = new UAParser();
+
+const textMutedForegroundLight = '#929DAE';
+const textForeground = '#000';
+const textMutedForeground = '#64748B';
+const textBase = 10;
+const textSm = 9;
+const textXs = 8;
+const fontMedium = '500';
+
+const pageTopMargin = 60;
+const pageBottomMargin = 15;
+const contentMaxWidth = 768;
+const rowPadding = 10;
+const titleFontSize = 18;
+
+type RenderOverviewCardLabelAndTextOptions = {
+  label: string;
+  text: string | string[];
+  width: number;
+  groupX?: number;
+};
+
+const renderOverviewCardLabels = (options: RenderOverviewCardLabelAndTextOptions) => {
+  const { width, text } = options;
+
+  const labelYSpacing = 4;
+
+  const group = new Konva.Group({
+    x: options.groupX ?? 0,
+  });
+
+  const label = new Konva.Text({
+    x: 0,
+    y: 0,
+    text: options.label,
+    fontStyle: fontMedium,
+    fontFamily: 'Inter',
+    fill: textForeground,
+    fontSize: textSm,
+  });
+
+  group.add(label);
+
+  if (typeof text === 'string') {
+    const value = new Konva.Text({
+      x: 0,
+      y: label.height() + labelYSpacing,
+      width: width - label.width(),
+      fontFamily: 'Inter',
+      text,
+      fill: textForeground,
+      wrap: 'char',
+      fontSize: textSm,
+    });
+
+    group.add(value);
+  } else {
+    for (const textValue of text) {
+      const value = new Konva.Text({
+        x: 0,
+        y: group.getClientRect().height + 4,
+        width: width - label.width(),
+        fontFamily: 'Inter',
+        text: '• ' + textValue,
+        fill: textForeground,
+        wrap: 'char',
+        fontSize: textSm,
+      });
+
+      group.add(value);
+    }
+  }
+
+  return group;
+};
+
+type RenderVerticalLabelAndTextOptions = {
+  label: string;
+  text: string;
+  width?: number;
+  align?: 'left' | 'right';
+  x?: number;
+  y?: number;
+  textFontFamily?: string;
+};
+
+const renderVerticalLabelAndText = (options: RenderVerticalLabelAndTextOptions) => {
+  const { label, text, width, align, x, y, textFontFamily } = options;
+
+  const group = new Konva.Group({
+    x: x ?? 0,
+    y: y ?? 0,
+  });
+
+  const konvaLabel = new Konva.Text({
+    align: align ?? 'left',
+    fontFamily: 'Inter',
+    width,
+    text: label,
+    fontSize: textXs,
+    fill: textMutedForegroundLight,
+  });
+
+  group.add(konvaLabel);
+
+  const konvaText = new Konva.Text({
+    y: group.getClientRect().height + 6,
+    align: align ?? 'left',
+    fontFamily: textFontFamily ?? 'Inter',
+    width,
+    text: text,
+    fontSize: textXs,
+    fill: textForeground,
+  });
+
+  group.add(konvaText);
+
+  return group;
+};
+
+type RenderOverviewCardOptions = {
+  envelope: Envelope & {
+    documentMeta: DocumentMeta;
+  };
+  envelopeItems: string[];
+  envelopeOwner: {
+    email: string;
+    name: string;
+  };
+  recipients: AuditLogRecipient[];
+  width: number;
+  i18n: I18n;
+};
+
+const renderOverviewCard = (options: RenderOverviewCardOptions) => {
+  const { envelope, envelopeItems, envelopeOwner, recipients, width, i18n } = options;
+  const cardPadding = 16;
+
+  const overviewCard = new Konva.Group();
+
+  const columnSpacing = 10;
+  const columnWidth = (width - columnSpacing) / 2;
+  const rowVerticalSpacing = 32;
+
+  const rowOne = new Konva.Group({
+    x: cardPadding,
+    y: cardPadding,
+  });
+
+  const envelopeIdLabel = renderOverviewCardLabels({
+    label: i18n._(msg`Envelope ID`),
+    text: envelope.id,
+    width: columnWidth,
+  });
+  const ownerLabel = renderOverviewCardLabels({
+    label: i18n._(msg`Owner`),
+    text: `${envelopeOwner.name} (${envelopeOwner.email})`,
+    width: columnWidth,
+    groupX: columnWidth + columnSpacing,
+  });
+
+  rowOne.add(envelopeIdLabel);
+  rowOne.add(ownerLabel);
+  overviewCard.add(rowOne);
+
+  const rowTwo = new Konva.Group({
+    x: cardPadding,
+    y: overviewCard.getClientRect().height + rowVerticalSpacing,
+  });
+
+  const statusLabel = renderOverviewCardLabels({
+    label: i18n._(msg`Status`),
+    text: i18n
+      ._(envelope.deletedAt ? msg`Deleted` : DOCUMENT_STATUS[envelope.status].description)
+      .toUpperCase(),
+    width: columnWidth,
+  });
+  const timeZoneLabel = renderOverviewCardLabels({
+    label: i18n._(msg`Time Zone`),
+    text: envelope.documentMeta?.timezone || 'N/A',
+    width: columnWidth,
+    groupX: columnWidth + columnSpacing,
+  });
+
+  rowTwo.add(statusLabel);
+  rowTwo.add(timeZoneLabel);
+  overviewCard.add(rowTwo);
+
+  const rowThree = new Konva.Group({
+    x: cardPadding,
+    y: overviewCard.getClientRect().height + rowVerticalSpacing,
+  });
+
+  const createdAtLabel = renderOverviewCardLabels({
+    label: i18n._(msg`Created At`),
+    text: DateTime.fromJSDate(envelope.createdAt)
+      .setLocale(APP_I18N_OPTIONS.defaultLocale)
+      .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)'),
+    width: columnWidth,
+  });
+  const lastUpdatedLabel = renderOverviewCardLabels({
+    label: i18n._(msg`Last Updated`),
+    text: DateTime.fromJSDate(envelope.updatedAt)
+      .setLocale(APP_I18N_OPTIONS.defaultLocale)
+      .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)'),
+    width: columnWidth,
+    groupX: columnWidth + columnSpacing,
+  });
+
+  rowThree.add(createdAtLabel);
+  rowThree.add(lastUpdatedLabel);
+  overviewCard.add(rowThree);
+
+  const rowFour = new Konva.Group({
+    x: cardPadding,
+    y: overviewCard.getClientRect().height + rowVerticalSpacing,
+  });
+
+  const enclosedDocumentsLabel = renderOverviewCardLabels({
+    label: i18n._(msg`Enclosed Documents`),
+    text: envelopeItems,
+    width: columnWidth,
+  });
+
+  const recipientsLabel = renderOverviewCardLabels({
+    label: i18n._(msg`Recipients`),
+    text: recipients.map(
+      (recipient) =>
+        `[${i18n._(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}] ${recipient.name} (${recipient.email})`,
+    ),
+    width: columnWidth,
+    groupX: columnWidth + columnSpacing,
+  });
+
+  rowFour.add(enclosedDocumentsLabel);
+  rowFour.add(recipientsLabel);
+  overviewCard.add(rowFour);
+
+  // Create rect border around the overview card
+  const cardRect = new Konva.Rect({
+    x: 0,
+    y: 0,
+    width,
+    height: overviewCard.getClientRect().height + cardPadding * 2,
+    stroke: '#e5e7eb',
+    strokeWidth: 1.5,
+    cornerRadius: 8,
+  });
+
+  overviewCard.add(cardRect);
+
+  return overviewCard;
+};
+
+type RenderRowOptions = {
+  auditLog: TDocumentAuditLog;
+  width: number;
+  i18n: I18n;
+};
+
+const renderRow = (options: RenderRowOptions) => {
+  const { auditLog, width, i18n } = options;
+
+  const paddingWithinCard = 12;
+
+  const columnSpacing = 10;
+  const columnWidth = (width - paddingWithinCard * 2 - columnSpacing) / 2;
+
+  const indicatorWidth = 3;
+  const indicatorPaddingRight = 10;
+  const rowGroup = new Konva.Group();
+
+  const rowHeaderGroup = new Konva.Group();
+
+  const auditLogIndicatorColor = new Konva.Circle({
+    x: indicatorWidth,
+    y: indicatorWidth + 3,
+    radius: indicatorWidth,
+    fill: getAuditLogIndicatorColor(auditLog.type),
+  });
+
+  const auditLogTypeText = new Konva.Text({
+    x: indicatorWidth + indicatorPaddingRight,
+    y: 0,
+    width: columnWidth - indicatorWidth - indicatorPaddingRight,
+    text: auditLog.type.replace(/_/g, ' '),
+    fontFamily: 'Inter',
+    fontSize: textSm,
+    fontStyle: fontMedium,
+    fill: textMutedForeground,
+  });
+
+  const auditLogDescriptionText = new Konva.Text({
+    x: indicatorWidth + indicatorPaddingRight,
+    y: auditLogTypeText.height() + 4,
+    width: columnWidth - indicatorWidth - indicatorPaddingRight,
+    text: formatDocumentAuditLogAction(i18n, auditLog).description,
+    fontFamily: 'Inter',
+    fontSize: textSm,
+    fill: textForeground,
+  });
+
+  const auditLogTimestampText = new Konva.Text({
+    x: columnWidth + columnSpacing,
+    width: columnWidth,
+    text: DateTime.fromJSDate(auditLog.createdAt)
+      .setLocale(APP_I18N_OPTIONS.defaultLocale)
+      .toLocaleString(dateFormat),
+    fontFamily: 'Inter',
+    align: 'right',
+    fontSize: textSm,
+    fill: textMutedForeground,
+  });
+
+  rowHeaderGroup.add(auditLogIndicatorColor);
+  rowHeaderGroup.add(auditLogTypeText);
+  rowHeaderGroup.add(auditLogDescriptionText);
+  rowHeaderGroup.add(auditLogTimestampText);
+
+  rowHeaderGroup.setAttrs({
+    x: paddingWithinCard,
+    y: paddingWithinCard,
+  } satisfies Partial<Konva.GroupConfig>);
+
+  rowGroup.add(rowHeaderGroup);
+
+  // Draw border line.
+  const borderLine = new Konva.Line({
+    points: [0, 0, width - paddingWithinCard * 2, 0],
+    stroke: '#e5e7eb',
+    strokeWidth: 1,
+    x: paddingWithinCard,
+    y: rowGroup.getClientRect().height + paddingWithinCard + 12,
+  });
+
+  rowGroup.add(borderLine);
+
+  const bottomSection = new Konva.Group({
+    x: paddingWithinCard,
+    y: rowGroup.getClientRect().height + paddingWithinCard + 12,
+  });
+
+  // Row 1 Column 1
+  const userLabel = renderVerticalLabelAndText({
+    label: i18n._(msg`User`).toUpperCase(),
+    text: auditLog.email || 'N/A',
+    align: 'left',
+    width: columnWidth,
+    textFontFamily: 'ui-monospace',
+  });
+
+  // Row 1 Column 2
+  const ipAddressLabel = renderVerticalLabelAndText({
+    label: i18n._(msg`IP Address`).toUpperCase(),
+    text: auditLog.ipAddress || 'N/A',
+    align: 'right',
+    x: columnWidth + columnSpacing,
+    width: columnWidth,
+    textFontFamily: 'ui-monospace',
+  });
+
+  bottomSection.add(userLabel);
+  bottomSection.add(ipAddressLabel);
+
+  parser.setUA(auditLog.userAgent || '');
+  const userAgentInfo = parser.getResult();
+
+  // Row 2 Column 1
+  const userAgentLabel = renderVerticalLabelAndText({
+    label: i18n._(msg`User Agent`).toUpperCase(),
+    text: i18n._(formatUserAgent(auditLog.userAgent, userAgentInfo)),
+    align: 'left',
+    width,
+    y: bottomSection.getClientRect().height + 16,
+  });
+
+  bottomSection.add(userAgentLabel);
+  rowGroup.add(bottomSection);
+
+  const cardRect = new Konva.Rect({
+    x: 0,
+    y: 0,
+    width: rowGroup.getClientRect().width,
+    height: rowGroup.getClientRect().height + paddingWithinCard * 2,
+    stroke: '#e5e7eb',
+    strokeWidth: 1,
+    cornerRadius: 8,
+  });
+
+  rowGroup.add(cardRect);
+
+  return rowGroup;
+};
+
+const renderBranding = () => {
+  const branding = new Konva.Group();
+
+  const brandingHeight = 16;
+
+  const logoPath = path.join(process.cwd(), 'public/static/logo.png');
+  const logo = fs.readFileSync(logoPath);
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  const img = new SkiaImage(logo) as unknown as HTMLImageElement;
+
+  const brandingImage = new Konva.Image({
+    image: img,
+    height: brandingHeight,
+    width: brandingHeight * (img.width / img.height),
+  });
+
+  branding.add(brandingImage);
+  return branding;
+};
+
+type GroupRowsIntoPagesOptions = {
+  auditLogs: TDocumentAuditLog[];
+  maxHeight: number;
+  contentWidth: number;
+  i18n: I18n;
+  overviewCard: Konva.Group;
+};
+
+const groupRowsIntoPages = (options: GroupRowsIntoPagesOptions) => {
+  const { auditLogs, maxHeight, contentWidth, i18n, overviewCard } = options;
+
+  const groupedRows: Konva.Group[][] = [[]];
+
+  const overviewCardHeight = overviewCard.getClientRect().height;
+
+  // First page has title + overview card
+  let availableHeight = maxHeight - pageTopMargin - overviewCardHeight;
+  let currentGroupedRowIndex = 0;
+
+  // Group rows into pages.
+  for (const auditLog of auditLogs) {
+    const row = renderRow({ auditLog, width: contentWidth, i18n });
+
+    const rowHeight = row.getClientRect().height;
+    const requiredHeight = rowHeight + rowPadding;
+
+    if (requiredHeight > availableHeight) {
+      currentGroupedRowIndex++;
+      groupedRows[currentGroupedRowIndex] = [row];
+
+      // Subsequent pages only have title (no overview card)
+      availableHeight = maxHeight - pageTopMargin;
+    } else {
+      groupedRows[currentGroupedRowIndex].push(row);
+    }
+
+    // Reduce available height by the row height.
+    availableHeight -= requiredHeight;
+  }
+
+  return groupedRows;
+};
+
+type RenderPagesOptions = {
+  groupedRows: Konva.Group[][];
+  margin: number;
+  pageTopMargin: number;
+  i18n: I18n;
+  overviewCard: Konva.Group;
+};
+
+const renderPages = (options: RenderPagesOptions) => {
+  const { groupedRows, margin, pageTopMargin, i18n, overviewCard } = options;
+
+  const rowPadding = 10;
+  const pages: Konva.Group[] = [];
+
+  // Render the rows for each page.
+  for (const [pageIndex, rows] of groupedRows.entries()) {
+    const pageGroup = new Konva.Group();
+
+    // Add title to each page
+    const pageTitle = new Konva.Text({
+      x: margin,
+      y: 0,
+      height: pageTopMargin,
+      verticalAlign: 'middle',
+      text: i18n._(msg`Audit Log`),
+      fill: textForeground,
+      fontFamily: 'Inter',
+      fontSize: titleFontSize,
+      fontStyle: '700',
+    });
+    pageGroup.add(pageTitle);
+
+    // Add overview card only on first page
+    if (pageIndex === 0) {
+      overviewCard.setAttrs({
+        x: margin,
+        y: pageGroup.getClientRect().height,
+      });
+      pageGroup.add(overviewCard);
+    }
+
+    // Add rows to the page
+    for (const row of rows) {
+      const yPosition = pageGroup.getClientRect().height + rowPadding;
+
+      row.setAttrs({
+        x: margin,
+        y: yPosition,
+      });
+
+      pageGroup.add(row);
+    }
+
+    pages.push(pageGroup);
+  }
+
+  return pages;
+};
+
+export async function renderAuditLogs({
+  envelope,
+  envelopeOwner,
+  envelopeItems,
+  recipients,
+  auditLogs,
+  pageWidth,
+  pageHeight,
+  i18n,
+  hidePoweredBy,
+}: GenerateAuditLogsOptions) {
+  const fontPath = path.join(process.cwd(), 'public/fonts');
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  FontLibrary.use({
+    ['Caveat']: [path.join(fontPath, 'caveat.ttf')],
+    ['Inter']: [path.join(fontPath, 'inter-variablefont_opsz,wght.ttf')],
+  });
+
+  const minimumMargin = 10;
+
+  const contentWidth = Math.min(pageWidth - minimumMargin * 2, contentMaxWidth);
+  const margin = (pageWidth - contentWidth) / 2;
+
+  let stage: Konva.Stage | null = new Konva.Stage({ width: pageWidth, height: pageHeight });
+
+  const overviewCard = renderOverviewCard({
+    envelope,
+    envelopeOwner,
+    envelopeItems,
+    recipients,
+    width: contentWidth,
+    i18n,
+  });
+
+  const groupedRows = groupRowsIntoPages({
+    auditLogs,
+    maxHeight: pageHeight,
+    contentWidth,
+    i18n,
+    overviewCard,
+  });
+
+  const pageGroups = renderPages({
+    groupedRows,
+    margin,
+    pageTopMargin,
+    i18n,
+    overviewCard,
+  });
+
+  const brandingGroup = renderBranding();
+  const brandingRect = brandingGroup.getClientRect();
+  const brandingTopPadding = 24;
+
+  const pages: Uint8Array[] = [];
+
+  let isBrandingPlaced = false;
+
+  // Render each page group to PDF
+  for (const [index, pageGroup] of pageGroups.entries()) {
+    stage.destroyChildren();
+    const page = new Konva.Layer();
+
+    page.add(pageGroup);
+
+    // Add branding on the last page if there is space.
+    if (index === pageGroups.length - 1 && !hidePoweredBy) {
+      const remainingHeight = pageHeight - pageGroup.getClientRect().height - pageBottomMargin;
+
+      if (brandingRect.height + brandingTopPadding <= remainingHeight) {
+        brandingGroup.setAttrs({
+          x: pageWidth - brandingRect.width - margin,
+          y: pageGroup.getClientRect().height + brandingTopPadding,
+        } satisfies Partial<Konva.GroupConfig>);
+
+        page.add(brandingGroup);
+        isBrandingPlaced = true;
+      }
+    }
+
+    stage.add(page);
+
+    // Export the page and save it.
+    const canvas = page.canvas._canvas as unknown as Canvas; // eslint-disable-line @typescript-eslint/consistent-type-assertions
+    const buffer = await canvas.toBuffer('pdf');
+    pages.push(new Uint8Array(buffer));
+  }
+
+  // Need to create an empty page for the branding if it hasn't been placed yet.
+  if (!hidePoweredBy && !isBrandingPlaced) {
+    stage.destroyChildren();
+    const page = new Konva.Layer();
+
+    brandingGroup.setAttrs({
+      x: pageWidth - brandingRect.width - margin,
+      y: pageTopMargin,
+    } satisfies Partial<Konva.GroupConfig>);
+
+    page.add(brandingGroup);
+    stage.add(page);
+
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const canvas = page.canvas._canvas as unknown as Canvas;
+    const buffer = await canvas.toBuffer('pdf');
+
+    pages.push(new Uint8Array(buffer));
+  }
+
+  stage.destroy();
+  stage = null;
+
+  return pages;
+}
+
+const dateFormat: DateTimeFormatOptions = {
+  ...DateTime.DATETIME_SHORT,
+  hourCycle: 'h12',
+};
+
+/**
+ * Get the color indicator for the audit log type
+ */
+const getAuditLogIndicatorColor = (type: string) =>
+  match(type)
+    .with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED, () => '#22c55e') // bg-green-500
+    .with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_REJECTED, () => '#ef4444') // bg-red-500
+    .with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_SENT, () => '#f97316') // bg-orange-500
+    .with(
+      P.union(
+        DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_INSERTED,
+        DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_UNINSERTED,
+      ),
+      () => '#3b82f6', // bg-blue-500
+    )
+    .otherwise(() => '#f1f5f9'); // bg-muted
+
+const formatUserAgent = (userAgent: string | null | undefined, userAgentInfo: UAParser.IResult) => {
+  if (!userAgent) {
+    return msg`N/A`;
+  }
+
+  const browser = userAgentInfo.browser.name;
+  const version = userAgentInfo.browser.version;
+  const os = userAgentInfo.os.name;
+
+  // If we can parse meaningful browser info, format it nicely
+  if (browser && os) {
+    const browserInfo = version ? `${browser} ${version}` : browser;
+
+    return msg`${browserInfo} on ${os}`;
+  }
+
+  return msg`${userAgent}`;
+};
diff --git a/packages/lib/server-only/pdf/render-certificate.ts b/packages/lib/server-only/pdf/render-certificate.ts
new file mode 100644
index 000000000..2a525caaf
--- /dev/null
+++ b/packages/lib/server-only/pdf/render-certificate.ts
@@ -0,0 +1,819 @@
+import type { I18n } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+import type { Field, Signature } from '@prisma/client';
+import { SigningStatus } from '@prisma/client';
+import type { RecipientRole } from '@prisma/client';
+import Konva from 'konva';
+import 'konva/skia-backend';
+import { DateTime } from 'luxon';
+import fs from 'node:fs';
+import path from 'node:path';
+import sharp from 'sharp';
+import type { Canvas } from 'skia-canvas';
+import { FontLibrary } from 'skia-canvas';
+import { Image as SkiaImage } from 'skia-canvas';
+import { UAParser } from 'ua-parser-js';
+import { renderSVG } from 'uqr';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
+import { APP_I18N_OPTIONS } from '../../constants/i18n';
+import {
+  RECIPIENT_ROLES_DESCRIPTION,
+  RECIPIENT_ROLE_SIGNING_REASONS,
+} from '../../constants/recipient-roles';
+import type { TDocumentAuditLogBaseSchema } from '../../types/document-audit-logs';
+
+type ColumnWidths = [number, number, number];
+
+type BaseAuditLog = Pick<TDocumentAuditLogBaseSchema, 'createdAt' | 'ipAddress' | 'userAgent'>;
+
+export type CertificateRecipient = {
+  id: number;
+  name: string;
+  email: string;
+  role: RecipientRole;
+  rejectionReason: string | null;
+  signingStatus: SigningStatus;
+  signatureField?: Pick<Field, 'id' | 'secondaryId' | 'recipientId'> & {
+    signature?: Pick<Signature, 'signatureImageAsBase64' | 'typedSignature'> | null;
+  };
+  authLevel: string;
+  logs: {
+    emailed: BaseAuditLog | null;
+    sent: BaseAuditLog | null;
+    opened: BaseAuditLog | null;
+    completed: BaseAuditLog | null;
+    rejected: BaseAuditLog | null;
+  };
+};
+
+type GenerateCertificateOptions = {
+  recipients: CertificateRecipient[];
+  qrToken: string | null;
+  hidePoweredBy: boolean;
+  i18n: I18n;
+  envelopeOwner: {
+    name: string;
+    email: string;
+  };
+  pageWidth: number;
+  pageHeight: number;
+};
+
+// Helper function to get device info from user agent
+const getDevice = (userAgent?: string | null): string => {
+  if (!userAgent) {
+    return 'Unknown';
+  }
+
+  const parser = new UAParser(userAgent);
+
+  parser.setUA(userAgent);
+
+  const result = parser.getResult();
+
+  return `${result.os.name} - ${result.browser.name} ${result.browser.version}`;
+};
+
+const textMutedForegroundLight = '#929DAE';
+const textForeground = '#000';
+const textMutedForeground = '#64748B';
+const textBase = 10;
+const textSm = 9;
+const textXs = 8;
+const fontMedium = '500';
+
+const columnWidthPercentages = [30, 30, 40];
+const rowPadding = 12;
+const tableHeaderHeight = 38;
+const pageTopMargin = 72;
+const pageBottomMargin = 12;
+const contentMaxWidth = 768;
+
+const titleFontSize = 18;
+
+type RenderLabelAndTextOptions = {
+  label: string;
+  text: string;
+  width: number;
+  y?: number;
+};
+
+const renderLabelAndText = (options: RenderLabelAndTextOptions) => {
+  const { width, y } = options;
+
+  const group = new Konva.Group({
+    y,
+  });
+
+  const label = new Konva.Text({
+    x: 0,
+    y: 0,
+    text: `${options.label}: `,
+    fontStyle: fontMedium,
+    fontFamily: 'Inter',
+    fill: textMutedForeground,
+    fontSize: textSm,
+  });
+
+  group.add(label);
+
+  const value = new Konva.Text({
+    x: label.width(),
+    y: 0,
+    width: width - label.width(),
+    fontFamily: 'Inter',
+    text: options.text,
+    fill: textMutedForeground,
+    wrap: 'char',
+    fontSize: textSm,
+  });
+
+  group.add(value);
+
+  return group;
+};
+
+type RenderRowHeaderOptions = {
+  columnWidths: number[];
+  i18n: I18n;
+};
+
+const renderRowHeader = (options: RenderRowHeaderOptions) => {
+  const { columnWidths, i18n } = options;
+
+  const columnOneWidth = columnWidths[0];
+  const columnTwoWidth = columnWidths[1];
+  const columnThreeWidth = columnWidths[2];
+
+  const headerRow = new Konva.Group();
+
+  const headerFontStyling = {
+    fontFamily: 'Inter',
+    fontSize: 11,
+    fontStyle: fontMedium,
+    verticalAlign: 'middle',
+    fill: textMutedForeground,
+    height: tableHeaderHeight,
+  };
+
+  const header1 = new Konva.Text({
+    x: rowPadding,
+    width: columnOneWidth,
+    text: i18n._(msg`Signer Events`),
+    ...headerFontStyling,
+  });
+  headerRow.add(header1);
+
+  const header2 = new Konva.Text({
+    x: columnOneWidth + rowPadding,
+    width: columnTwoWidth,
+    text: i18n._(msg`Signature`),
+    ...headerFontStyling,
+  });
+  headerRow.add(header2);
+
+  const header3 = new Konva.Text({
+    x: columnOneWidth + columnTwoWidth + rowPadding,
+    width: columnThreeWidth,
+    text: i18n._(msg`Details`),
+    ...headerFontStyling,
+  });
+  headerRow.add(header3);
+
+  return headerRow;
+};
+
+const columnPadding = 10;
+
+type RenderColumnOptions = {
+  recipient: CertificateRecipient;
+  width: number;
+  i18n: I18n;
+  envelopeOwner: {
+    name: string;
+    email: string;
+  };
+};
+
+const renderColumnOne = (options: RenderColumnOptions) => {
+  const { recipient, width, i18n } = options;
+
+  const columnGroup = new Konva.Group();
+
+  const textSectionPadding = 8;
+
+  const textFontStyling = {
+    x: 0,
+    fontFamily: 'Inter',
+    wrap: 'char',
+    lineHeight: 1.2,
+    fill: textMutedForeground,
+    width: width - columnPadding,
+  };
+
+  if (recipient.name) {
+    const nameText = new Konva.Text({
+      y: 0,
+      text: recipient.name,
+      fontSize: textBase,
+      ...textFontStyling,
+      fontStyle: fontMedium,
+    });
+
+    columnGroup.add(nameText);
+  }
+
+  const emailText = new Konva.Text({
+    y: columnGroup.getClientRect().height,
+    text: recipient.email,
+    fontSize: textBase,
+    ...textFontStyling,
+  });
+
+  columnGroup.add(emailText);
+
+  const roleText = new Konva.Text({
+    y: columnGroup.getClientRect().height + textSectionPadding,
+    text: i18n._(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName),
+    fontSize: textSm,
+    ...textFontStyling,
+  });
+  columnGroup.add(roleText);
+
+  const authLabel = new Konva.Text({
+    y: columnGroup.getClientRect().height + textSectionPadding,
+    text: `${i18n._(msg`Authentication Level`)}:`,
+    fontSize: textSm,
+    fontStyle: fontMedium,
+    ...textFontStyling,
+  });
+  columnGroup.add(authLabel);
+
+  const authValue = new Konva.Text({
+    y: columnGroup.getClientRect().height,
+    text: recipient.authLevel,
+    fontSize: textSm,
+    ...textFontStyling,
+  });
+  columnGroup.add(authValue);
+
+  return columnGroup;
+};
+
+const renderColumnTwo = (options: RenderColumnOptions) => {
+  const { recipient, width, i18n } = options;
+
+  // Column 2: Signature
+  const column = new Konva.Group();
+
+  const columnWidth = width - columnPadding;
+
+  if (recipient.signatureField?.secondaryId) {
+    // Signature container with green border
+    const signatureContainer = new Konva.Group({ x: 0, y: 0 });
+
+    const minSignatureHeight = 40;
+    const maxSignatureWidth = 100;
+
+    // Signature content
+    if (recipient.signatureField?.signature?.signatureImageAsBase64) {
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      const img = new SkiaImage(
+        recipient.signatureField?.signature?.signatureImageAsBase64,
+      ) as unknown as HTMLImageElement;
+
+      const signatureImage = new Konva.Image({
+        image: img,
+        x: 4,
+        y: 4,
+        width: maxSignatureWidth,
+        height: maxSignatureWidth * (img.height / img.width),
+      });
+
+      signatureContainer.add(signatureImage);
+    } else if (recipient.signatureField?.signature?.typedSignature) {
+      const typedSig = new Konva.Text({
+        x: 2,
+        text: recipient.signatureField?.signature?.typedSignature,
+        padding: 4,
+        fontFamily: 'Caveat',
+        fontSize: 16,
+        align: 'center',
+        verticalAlign: 'middle',
+        width: maxSignatureWidth,
+      });
+
+      if (typedSig.getClientRect().height < minSignatureHeight) {
+        typedSig.setAttrs({
+          height: minSignatureHeight,
+        });
+      }
+
+      signatureContainer.add(typedSig);
+    }
+
+    column.add(signatureContainer);
+
+    const signatureHeight = Math.max(signatureContainer.getClientRect().height, minSignatureHeight);
+
+    const signatureBorder = new Konva.Rect({
+      x: 2,
+      y: 2,
+      width: maxSignatureWidth,
+      height: signatureHeight,
+      stroke: 'rgba(122, 196, 85, 0.6)',
+      strokeWidth: 1,
+      cornerRadius: 8,
+    });
+    signatureContainer.add(signatureBorder);
+
+    const signatureShadow = new Konva.Rect({
+      x: 0,
+      y: 0,
+      width: maxSignatureWidth + 4,
+      height: signatureHeight + 4,
+      stroke: 'rgba(122, 196, 85, 0.1)',
+      strokeWidth: 4,
+      cornerRadius: 8,
+    });
+    signatureContainer.add(signatureShadow);
+
+    // Signature ID
+    const sigIdLabel = new Konva.Text({
+      x: 0,
+      y: signatureHeight + 10,
+      text: `${i18n._(msg`Signature ID`)}:`,
+      fill: textMutedForeground,
+      width: columnWidth,
+      fontFamily: 'Inter',
+      fontSize: textSm,
+      fontStyle: fontMedium,
+      lineHeight: 1.4,
+    });
+    column.add(sigIdLabel);
+
+    const sigIdValue = new Konva.Text({
+      x: 0,
+      y: column.getClientRect().height,
+      text: recipient.signatureField.secondaryId.toUpperCase(),
+      fill: textMutedForeground,
+      fontFamily: 'monospace',
+      fontSize: textSm,
+      width: columnWidth,
+      wrap: 'char',
+    });
+    column.add(sigIdValue);
+  } else {
+    const naText = new Konva.Text({
+      x: 0,
+      y: 0,
+      text: 'N/A',
+      fill: textMutedForeground,
+      fontFamily: 'Inter',
+      fontSize: textSm,
+    });
+    column.add(naText);
+  }
+
+  const ipLabelAndText = renderLabelAndText({
+    label: i18n._(msg`IP Address`),
+    text: recipient.logs.completed?.ipAddress ?? i18n._(msg`Unknown`),
+    width,
+    y: column.getClientRect().height + 6,
+  });
+  column.add(ipLabelAndText);
+
+  const deviceLabelAndText = renderLabelAndText({
+    label: i18n._(msg`Device`),
+    text: getDevice(recipient.logs.completed?.userAgent),
+    width,
+    y: column.getClientRect().height + 6,
+  });
+  column.add(deviceLabelAndText);
+
+  return column;
+};
+
+const renderColumnThree = (options: RenderColumnOptions) => {
+  const { recipient, width, i18n, envelopeOwner } = options;
+
+  const column = new Konva.Group();
+
+  const itemsToRender = [
+    {
+      label: i18n._(msg`Sent`),
+      value: recipient.logs.emailed
+        ? DateTime.fromJSDate(recipient.logs.emailed.createdAt)
+            .setLocale(APP_I18N_OPTIONS.defaultLocale)
+            .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
+        : recipient.logs.sent
+          ? DateTime.fromJSDate(recipient.logs.sent.createdAt)
+              .setLocale(APP_I18N_OPTIONS.defaultLocale)
+              .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
+          : i18n._(msg`Unknown`),
+    },
+    {
+      label: i18n._(msg`Viewed`),
+      value: recipient.logs.opened
+        ? DateTime.fromJSDate(recipient.logs.opened.createdAt)
+            .setLocale(APP_I18N_OPTIONS.defaultLocale)
+            .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
+        : i18n._(msg`Unknown`),
+    },
+  ];
+
+  if (recipient.logs.rejected) {
+    itemsToRender.push({
+      label: i18n._(msg`Rejected`),
+      value: DateTime.fromJSDate(recipient.logs.rejected.createdAt)
+        .setLocale(APP_I18N_OPTIONS.defaultLocale)
+        .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)'),
+    });
+  } else {
+    itemsToRender.push({
+      label: i18n._(msg`Signed`),
+      value: recipient.logs.completed
+        ? DateTime.fromJSDate(recipient.logs.completed.createdAt)
+            .setLocale(APP_I18N_OPTIONS.defaultLocale)
+            .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
+        : i18n._(msg`Unknown`),
+    });
+  }
+
+  const isOwner = recipient.email.toLowerCase() === envelopeOwner.email.toLowerCase();
+
+  itemsToRender.push({
+    label: i18n._(msg`Reason`),
+    value:
+      recipient.signingStatus === SigningStatus.REJECTED
+        ? recipient.rejectionReason || ''
+        : isOwner
+          ? i18n._(msg`I am the owner of this document`)
+          : i18n._(RECIPIENT_ROLE_SIGNING_REASONS[recipient.role]),
+  });
+
+  for (const [index, item] of itemsToRender.entries()) {
+    const labelAndText = renderLabelAndText({
+      label: item.label,
+      text: item.value,
+      width,
+      y: column.getClientRect().height + (index === 0 ? 0 : 8),
+    });
+    column.add(labelAndText);
+  }
+
+  return column;
+};
+
+type RenderRowOptions = {
+  recipient: CertificateRecipient;
+  columnWidths: ColumnWidths;
+  i18n: I18n;
+  envelopeOwner: {
+    name: string;
+    email: string;
+  };
+};
+
+const renderRow = (options: RenderRowOptions) => {
+  const { recipient, columnWidths, i18n, envelopeOwner } = options;
+
+  const rowGroup = new Konva.Group();
+
+  const width = columnWidths[0] + columnWidths[1] + columnWidths[2];
+
+  // Draw top border line.
+  const borderLine = new Konva.Line({
+    points: [0, 0, width + rowPadding * 2, 0],
+    stroke: '#e5e7eb',
+    strokeWidth: 1,
+  });
+
+  rowGroup.add(borderLine);
+
+  // Column 1: Signer Events
+  const columnGroup = renderColumnOne({
+    recipient,
+    width: columnWidths[0],
+    i18n,
+    envelopeOwner,
+  });
+  columnGroup.setAttrs({
+    x: rowPadding,
+    y: rowPadding,
+  } satisfies Partial<Konva.GroupConfig>);
+  rowGroup.add(columnGroup);
+
+  const columnTwoGroup = renderColumnTwo({
+    recipient,
+    width: columnWidths[1],
+    i18n,
+    envelopeOwner,
+  });
+  columnTwoGroup.setAttrs({
+    x: rowPadding + columnWidths[0],
+    y: rowPadding,
+  } satisfies Partial<Konva.GroupConfig>);
+  rowGroup.add(columnTwoGroup);
+
+  // Column 3: Details
+  const columnThreeGroup = renderColumnThree({
+    recipient,
+    width: columnWidths[2],
+    i18n,
+    envelopeOwner,
+  });
+  columnThreeGroup.setAttrs({
+    x: rowPadding + columnWidths[0] + columnWidths[1],
+    y: rowPadding,
+  } satisfies Partial<Konva.GroupConfig>);
+  rowGroup.add(columnThreeGroup);
+
+  const rowBottomPadding = new Konva.Rect({
+    x: 0,
+    y: rowGroup.getClientRect().height,
+    width: rowGroup.getClientRect().width,
+    height: rowPadding,
+  });
+  rowGroup.add(rowBottomPadding);
+
+  return rowGroup;
+};
+
+const renderBranding = async ({ qrToken, i18n }: { qrToken: string | null; i18n: I18n }) => {
+  const branding = new Konva.Group();
+
+  const brandingHeight = 12;
+
+  const text = new Konva.Text({
+    x: 0,
+    verticalAlign: 'middle',
+    text: i18n._(msg`Signing certificate provided by`) + ':',
+    fontStyle: fontMedium,
+    fontFamily: 'Inter',
+    fontSize: textSm,
+    height: brandingHeight,
+  });
+
+  const logoPath = path.join(process.cwd(), 'public/static/logo.png');
+  const logo = fs.readFileSync(logoPath);
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  const img = new SkiaImage(logo) as unknown as HTMLImageElement;
+
+  const documensoImage = new Konva.Image({
+    image: img,
+    height: brandingHeight,
+    width: brandingHeight * (img.width / img.height),
+    x: text.width() + 16,
+  });
+
+  const qrSize = qrToken ? 72 : 0;
+
+  const logoGroup = new Konva.Group({
+    y: qrSize + 16,
+  });
+  logoGroup.add(text);
+  logoGroup.add(documensoImage);
+
+  branding.add(logoGroup);
+
+  if (qrToken) {
+    const qrSvg = renderSVG(`${NEXT_PUBLIC_WEBAPP_URL()}/share/${qrToken}`, {
+      ecc: 'Q',
+    });
+
+    const svgImage = await sharp(Buffer.from(qrSvg)).toFormat('png').toBuffer();
+
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const qrSkiaImage = new SkiaImage(svgImage) as unknown as HTMLImageElement;
+    const qrImage = new Konva.Image({
+      image: qrSkiaImage,
+      height: qrSize,
+      width: qrSize,
+      x: branding.getClientRect().width - qrSize,
+      y: 0,
+    });
+
+    branding.add(qrImage);
+  }
+
+  return branding;
+};
+
+type GroupRowsIntoPagesOptions = {
+  recipients: CertificateRecipient[];
+  maxHeight: number;
+  i18n: I18n;
+  columnWidths: ColumnWidths;
+  envelopeOwner: {
+    name: string;
+    email: string;
+  };
+};
+
+const groupRowsIntoPages = (options: GroupRowsIntoPagesOptions) => {
+  const { recipients, maxHeight, i18n, columnWidths, envelopeOwner } = options;
+
+  const rowHeader = renderRowHeader({ columnWidths, i18n });
+  const rowHeaderHeight = rowHeader.getClientRect().height;
+
+  const groupedRows: Konva.Group[][] = [[]];
+
+  let availablePageHeight = maxHeight - rowHeaderHeight;
+  let currentGroupedRowIndex = 0;
+
+  // Group rows into pages.
+  for (const recipient of recipients) {
+    const row = renderRow({ recipient, columnWidths, i18n, envelopeOwner });
+
+    const rowHeight = row.getClientRect().height;
+
+    if (rowHeight > availablePageHeight) {
+      currentGroupedRowIndex++;
+      groupedRows[currentGroupedRowIndex] = [row];
+      availablePageHeight = maxHeight - rowHeaderHeight;
+    } else {
+      groupedRows[currentGroupedRowIndex].push(row);
+    }
+
+    // Reduce available height by the row height.
+    availablePageHeight -= rowHeight;
+  }
+
+  return groupedRows;
+};
+
+type RenderTablesOptions = {
+  groupedRows: Konva.Group[][];
+  columnWidths: ColumnWidths;
+  i18n: I18n;
+};
+
+const renderTables = (options: RenderTablesOptions) => {
+  const { groupedRows, columnWidths, i18n } = options;
+
+  const tables: Konva.Group[] = [];
+
+  // Render the rows for each page.
+  for (const rows of groupedRows) {
+    const table = new Konva.Group();
+    const tableHeader = renderRowHeader({ columnWidths, i18n });
+
+    table.add(tableHeader);
+
+    for (const row of rows) {
+      row.setAttrs({
+        x: 0,
+        y: table.getClientRect().height,
+      } satisfies Partial<Konva.GroupConfig>);
+
+      table.add(row);
+    }
+
+    // Add table background and border.
+    const tableClientRect = table.getClientRect();
+    const cardRect = new Konva.Rect({
+      x: tableClientRect.x,
+      y: tableClientRect.y,
+      width: tableClientRect.width,
+      height: tableClientRect.height,
+      stroke: '#e5e7eb',
+      strokeWidth: 1.5,
+      cornerRadius: 8,
+    });
+    table.add(cardRect);
+
+    tables.push(table);
+  }
+
+  return tables;
+};
+
+export async function renderCertificate({
+  recipients,
+  qrToken,
+  hidePoweredBy,
+  i18n,
+  envelopeOwner,
+  pageWidth,
+  pageHeight,
+}: GenerateCertificateOptions) {
+  const fontPath = path.join(process.cwd(), 'public/fonts');
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  FontLibrary.use({
+    ['Caveat']: [path.join(fontPath, 'caveat.ttf')],
+    ['Inter']: [path.join(fontPath, 'inter-variablefont_opsz,wght.ttf')],
+  });
+
+  const minimumMargin = 10;
+
+  const tableWidth = Math.min(pageWidth - minimumMargin * 2, contentMaxWidth);
+  const tableContentWidth = tableWidth - rowPadding * 2;
+  const margin = (pageWidth - tableWidth) / 2;
+
+  const columnOneWidth = (tableContentWidth * columnWidthPercentages[0]) / 100;
+  const columnTwoWidth = (tableContentWidth * columnWidthPercentages[1]) / 100;
+  const columnThreeWidth = (tableContentWidth * columnWidthPercentages[2]) / 100;
+
+  const columnWidths: ColumnWidths = [columnOneWidth, columnTwoWidth, columnThreeWidth];
+
+  // Helper to render a Konva stage to a PNG buffer
+  let stage: Konva.Stage | null = new Konva.Stage({ width: pageWidth, height: pageHeight });
+
+  const maxTableHeight = pageHeight - pageTopMargin - pageBottomMargin;
+
+  const groupedRows = groupRowsIntoPages({
+    recipients,
+    maxHeight: maxTableHeight,
+    columnWidths,
+    i18n,
+    envelopeOwner,
+  });
+
+  const tables = renderTables({ groupedRows, columnWidths, i18n });
+
+  const brandingGroup = await renderBranding({ qrToken, i18n });
+  const brandingRect = brandingGroup.getClientRect();
+  const brandingTopPadding = 24;
+
+  const pages: Uint8Array[] = [];
+
+  let isQrPlaced = false;
+
+  // Add a table to each page.
+  for (const [index, table] of tables.entries()) {
+    stage.destroyChildren();
+    const page = new Konva.Layer();
+
+    const group = new Konva.Group();
+
+    const titleText = new Konva.Text({
+      x: margin,
+      y: 0,
+      height: pageTopMargin,
+      verticalAlign: 'middle',
+      text: i18n._(msg`Signing Certificate`),
+      fontFamily: 'Inter',
+      fontSize: titleFontSize,
+      fontStyle: '700',
+    });
+
+    table.setAttrs({
+      x: margin,
+      y: pageTopMargin,
+    } satisfies Partial<Konva.GroupConfig>);
+
+    group.add(titleText);
+    group.add(table);
+
+    // Add QR code and branding on the last page if there is space.
+    if (index === tables.length - 1 && !hidePoweredBy) {
+      const remainingHeight = pageHeight - group.getClientRect().height - pageBottomMargin;
+
+      if (brandingRect.height + brandingTopPadding <= remainingHeight) {
+        brandingGroup.setAttrs({
+          x: pageWidth - brandingRect.width - margin,
+          y: group.getClientRect().height + brandingTopPadding,
+        } satisfies Partial<Konva.GroupConfig>);
+
+        page.add(brandingGroup);
+        isQrPlaced = true;
+      }
+    }
+
+    page.add(group);
+    stage.add(page);
+
+    // Export the page and save it.
+    const canvas = page.canvas._canvas as unknown as Canvas; // eslint-disable-line @typescript-eslint/consistent-type-assertions
+    const buffer = await canvas.toBuffer('pdf');
+    pages.push(new Uint8Array(buffer));
+  }
+
+  // Need to create an empty page for the QR code if it hasn't been placed yet.
+  if (!hidePoweredBy && !isQrPlaced) {
+    const page = new Konva.Layer();
+
+    brandingGroup.setAttrs({
+      x: pageWidth - brandingRect.width - margin,
+      y: pageTopMargin / 2, // Less padding since there's nothing else on this page.
+    } satisfies Partial<Konva.GroupConfig>);
+
+    page.add(brandingGroup);
+    stage.add(page);
+
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const canvas = page.canvas._canvas as unknown as Canvas;
+    const buffer = await canvas.toBuffer('pdf');
+
+    pages.push(new Uint8Array(buffer));
+  }
+
+  stage.destroy();
+  stage = null;
+
+  return pages;
+}
diff --git a/packages/lib/types/document-audit-logs.ts b/packages/lib/types/document-audit-logs.ts
index 08f671633..f4d0508da 100644
--- a/packages/lib/types/document-audit-logs.ts
+++ b/packages/lib/types/document-audit-logs.ts
@@ -759,3 +759,5 @@ export type DocumentAuditLogByType<T = TDocumentAuditLog['type']> = Extract<
   TDocumentAuditLog,
   { type: T }
 >;
+
+export type TDocumentAuditLogBaseSchema = z.infer<typeof ZDocumentAuditLogBaseSchema>;
diff --git a/packages/lib/utils/document-audit-logs.ts b/packages/lib/utils/document-audit-logs.ts
index f2d4681a7..e427804d6 100644
--- a/packages/lib/utils/document-audit-logs.ts
+++ b/packages/lib/utils/document-audit-logs.ts
@@ -290,11 +290,12 @@ export const diffDocumentMetaChanges = (
  * Provide a userId to prefix the action with the user, example 'X did Y'.
  */
 export const formatDocumentAuditLogAction = (
-  _: I18n['_'],
+  i18n: I18n,
   auditLog: TDocumentAuditLog,
   userId?: number,
 ) => {
-  const prefix = userId === auditLog.userId ? _(msg`You`) : auditLog.name || auditLog.email || '';
+  const prefix =
+    userId === auditLog.userId ? i18n._(msg`You`) : auditLog.name || auditLog.email || '';
 
   const description = match(auditLog)
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_CREATED }, () => ({
@@ -452,7 +453,7 @@ export const formatDocumentAuditLogAction = (
       identified: msg`${prefix} moved the document to team`,
     }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED }, ({ data }) => {
-      const userName = prefix || _(msg`Recipient`);
+      const userName = prefix || i18n._(msg`Recipient`);
 
       const result = match(data.recipientRole)
         .with(RecipientRole.SIGNER, () => msg`${userName} signed the document`)
@@ -467,7 +468,7 @@ export const formatDocumentAuditLogAction = (
       };
     })
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_REJECTED }, ({ data }) => {
-      const userName = prefix || _(msg`Recipient`);
+      const userName = prefix || i18n._(msg`Recipient`);
 
       const result = msg`${userName} rejected the document`;
 
@@ -477,7 +478,7 @@ export const formatDocumentAuditLogAction = (
       };
     })
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_ACCESS_AUTH_2FA_REQUESTED }, ({ data }) => {
-      const userName = prefix || _(msg`Recipient`);
+      const userName = prefix || i18n._(msg`Recipient`);
 
       const result = msg`${userName} requested a 2FA token for the document`;
 
@@ -487,7 +488,7 @@ export const formatDocumentAuditLogAction = (
       };
     })
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_ACCESS_AUTH_2FA_VALIDATED }, ({ data }) => {
-      const userName = prefix || _(msg`Recipient`);
+      const userName = prefix || i18n._(msg`Recipient`);
 
       const result = msg`${userName} validated a 2FA token for the document`;
 
@@ -497,7 +498,7 @@ export const formatDocumentAuditLogAction = (
       };
     })
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_ACCESS_AUTH_2FA_FAILED }, ({ data }) => {
-      const userName = prefix || _(msg`Recipient`);
+      const userName = prefix || i18n._(msg`Recipient`);
 
       const result = msg`${userName} failed to validate a 2FA token for the document`;
 
@@ -541,6 +542,6 @@ export const formatDocumentAuditLogAction = (
 
   return {
     prefix,
-    description: _(prefix ? description.identified : description.anonymous),
+    description: i18n._(prefix ? description.identified : description.anonymous),
   };
 };
diff --git a/packages/prisma/seed/documents.ts b/packages/prisma/seed/documents.ts
index 00dc47990..fcb87f974 100644
--- a/packages/prisma/seed/documents.ts
+++ b/packages/prisma/seed/documents.ts
@@ -67,7 +67,7 @@ export const seedBlankDocument = async (
   teamId: number,
   options: CreateDocumentOptions = {},
 ) => {
-  const { key, createDocumentOptions = {} } = options;
+  const { key, createDocumentOptions = {}, internalVersion = 1 } = options;
 
   const documentData = await prisma.documentData.create({
     data: {
@@ -87,7 +87,7 @@ export const seedBlankDocument = async (
     data: {
       id: prefixedId('envelope'),
       secondaryId: documentId.formattedDocumentId,
-      internalVersion: 1,
+      internalVersion,
       type: EnvelopeType.DOCUMENT,
       documentMetaId: documentMeta.id,
       source: DocumentSource.DOCUMENT,
@@ -287,7 +287,7 @@ export const seedDraftDocument = async (
   recipients: (User | string)[],
   options: CreateDocumentOptions = {},
 ) => {
-  const { key, createDocumentOptions = {} } = options;
+  const { key, createDocumentOptions = {}, internalVersion = 1 } = options;
 
   const documentData = await prisma.documentData.create({
     data: {
@@ -307,7 +307,7 @@ export const seedDraftDocument = async (
     data: {
       id: prefixedId('envelope'),
       secondaryId: documentId.formattedDocumentId,
-      internalVersion: 1,
+      internalVersion,
       type: EnvelopeType.DOCUMENT,
       documentMetaId: documentMeta.id,
       source: DocumentSource.DOCUMENT,
@@ -372,6 +372,7 @@ export const seedDraftDocument = async (
 type CreateDocumentOptions = {
   key?: string | number;
   createDocumentOptions?: Partial<Prisma.EnvelopeUncheckedCreateInput>;
+  internalVersion?: number;
 };
 
 export const seedPendingDocument = async (
@@ -380,7 +381,7 @@ export const seedPendingDocument = async (
   recipients: (User | string)[],
   options: CreateDocumentOptions = {},
 ) => {
-  const { key, createDocumentOptions = {} } = options;
+  const { key, createDocumentOptions = {}, internalVersion = 1 } = options;
 
   const documentData = await prisma.documentData.create({
     data: {
@@ -400,7 +401,7 @@ export const seedPendingDocument = async (
     data: {
       id: prefixedId('envelope'),
       secondaryId: documentId.formattedDocumentId,
-      internalVersion: 1,
+      internalVersion,
       type: EnvelopeType.DOCUMENT,
       documentMetaId: documentMeta.id,
       source: DocumentSource.DOCUMENT,
@@ -620,7 +621,7 @@ export const seedCompletedDocument = async (
   recipients: (User | string)[],
   options: CreateDocumentOptions = {},
 ) => {
-  const { key, createDocumentOptions = {} } = options;
+  const { key, createDocumentOptions = {}, internalVersion = 1 } = options;
 
   const documentData = await prisma.documentData.create({
     data: {
@@ -640,7 +641,7 @@ export const seedCompletedDocument = async (
     data: {
       id: prefixedId('envelope'),
       secondaryId: documentId.formattedDocumentId,
-      internalVersion: 1,
+      internalVersion,
       type: EnvelopeType.DOCUMENT,
       documentMetaId: documentMeta.id,
       source: DocumentSource.DOCUMENT,
diff --git a/packages/trpc/server/envelope-router/router.ts b/packages/trpc/server/envelope-router/router.ts
index 17ae34ecf..78131f093 100644
--- a/packages/trpc/server/envelope-router/router.ts
+++ b/packages/trpc/server/envelope-router/router.ts
@@ -18,8 +18,8 @@ import { createEnvelopeRecipientsRoute } from './envelope-recipients/create-enve
 import { deleteEnvelopeRecipientRoute } from './envelope-recipients/delete-envelope-recipient';
 import { getEnvelopeRecipientRoute } from './envelope-recipients/get-envelope-recipient';
 import { updateEnvelopeRecipientsRoute } from './envelope-recipients/update-envelope-recipients';
-import { findEnvelopesRoute } from './find-envelopes';
 import { findEnvelopeAuditLogsRoute } from './find-envelope-audit-logs';
+import { findEnvelopesRoute } from './find-envelopes';
 import { getEnvelopeRoute } from './get-envelope';
 import { getEnvelopeItemsRoute } from './get-envelope-items';
 import { getEnvelopeItemsByTokenRoute } from './get-envelope-items-by-token';
diff --git a/packages/ui/primitives/data-table-pagination.tsx b/packages/ui/primitives/data-table-pagination.tsx
index dbba61cb6..94b6b5e5a 100644
--- a/packages/ui/primitives/data-table-pagination.tsx
+++ b/packages/ui/primitives/data-table-pagination.tsx
@@ -23,7 +23,7 @@ export function DataTablePagination<TData>({
 }: DataTablePaginationProps<TData>) {
   return (
     <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-4 px-2">
-      <div className="text-muted-foreground flex-1 text-sm">
+      <div className="flex-1 text-sm text-muted-foreground">
         {match(additionalInformation)
           .with('SelectedCount', () => (
             <span>
diff --git a/packages/ui/primitives/dialog.tsx b/packages/ui/primitives/dialog.tsx
index 46a061f07..0e28c3008 100644
--- a/packages/ui/primitives/dialog.tsx
+++ b/packages/ui/primitives/dialog.tsx
@@ -39,7 +39,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'bg-background/80 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 backdrop-blur-sm transition-all duration-100',
+      'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in',
       className,
     )}
     {...props}
@@ -66,7 +66,7 @@ const DialogContent = React.forwardRef<
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
-          'bg-background animate-in data-[state=open]:fade-in-90 sm:zoom-in-90 data-[state=open]:slide-in-from-bottom-10 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid w-full gap-4 border p-6 shadow-lg sm:max-w-lg sm:rounded-lg',
+          'fixed z-50 grid w-full gap-4 border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0',
           {
             'rounded-b-xl': position === 'start',
             'rounded-t-xl': position === 'end',
@@ -79,7 +79,7 @@ const DialogContent = React.forwardRef<
         {!hideClose && (
           <DialogPrimitive.Close
             data-testid="btn-dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+            className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
           >
             <X className="h-4 w-4" />
             <span className="sr-only">
@@ -131,7 +131,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn('text-muted-foreground text-sm', className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
 ));
diff --git a/packages/ui/primitives/document-flow/add-subject.tsx b/packages/ui/primitives/document-flow/add-subject.tsx
index 25951179c..af49cb210 100644
--- a/packages/ui/primitives/document-flow/add-subject.tsx
+++ b/packages/ui/primitives/document-flow/add-subject.tsx
@@ -323,7 +323,7 @@ export const AddSubjectFormPartial = ({
                               <TooltipTrigger>
                                 <InfoIcon className="mx-2 h-4 w-4" />
                               </TooltipTrigger>
-                              <TooltipContent className="text-muted-foreground p-4">
+                              <TooltipContent className="p-4 text-muted-foreground">
                                 <DocumentSendEmailMessageHelper />
                               </TooltipContent>
                             </Tooltip>
@@ -331,7 +331,7 @@ export const AddSubjectFormPartial = ({
 
                           <FormControl>
                             <Textarea
-                              className="bg-background mt-2 h-16 resize-none"
+                              className="mt-2 h-16 resize-none bg-background"
                               {...field}
                               maxLength={5000}
                             />
@@ -360,7 +360,7 @@ export const AddSubjectFormPartial = ({
                 className="rounded-lg border"
               >
                 {document.status === DocumentStatus.DRAFT ? (
-                  <div className="text-muted-foreground py-16 text-center text-sm">
+                  <div className="py-16 text-center text-sm text-muted-foreground">
                     <p>
                       <Trans>We won't send anything to notify recipients.</Trans>
                     </p>
@@ -373,7 +373,7 @@ export const AddSubjectFormPartial = ({
                     </p>
                   </div>
                 ) : (
-                  <ul className="text-muted-foreground divide-y">
+                  <ul className="divide-y text-muted-foreground">
                     {recipients.length === 0 && (
                       <li className="flex flex-col items-center justify-center py-6 text-sm">
                         <Trans>No recipients</Trans>
@@ -388,10 +388,10 @@ export const AddSubjectFormPartial = ({
                         <AvatarWithText
                           avatarFallback={recipient.email.slice(0, 1).toUpperCase()}
                           primaryText={
-                            <p className="text-muted-foreground text-sm">{recipient.email}</p>
+                            <p className="text-sm text-muted-foreground">{recipient.email}</p>
                           }
                           secondaryText={
-                            <p className="text-muted-foreground/70 text-xs">
+                            <p className="text-xs text-muted-foreground/70">
                               {_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
                             </p>
                           }
diff --git a/packages/ui/primitives/document-flow/document-flow-root.tsx b/packages/ui/primitives/document-flow/document-flow-root.tsx
index fb55d86c7..29709e240 100644
--- a/packages/ui/primitives/document-flow/document-flow-root.tsx
+++ b/packages/ui/primitives/document-flow/document-flow-root.tsx
@@ -24,7 +24,7 @@ export const DocumentFlowFormContainer = ({
     <form
       id={id}
       className={cn(
-        'dark:bg-background border-border bg-widget sticky top-20 flex h-full max-h-[64rem] flex-col overflow-auto rounded-xl border px-4 py-6',
+        'sticky top-20 flex h-full max-h-[64rem] flex-col overflow-auto rounded-xl border border-border bg-widget px-4 py-6 dark:bg-background',
         className,
       )}
       {...props}
@@ -47,11 +47,11 @@ export const DocumentFlowFormContainerHeader = ({
 
   return (
     <>
-      <h3 className="text-foreground text-2xl font-semibold">{_(title)}</h3>
+      <h3 className="text-2xl font-semibold text-foreground">{_(title)}</h3>
 
-      <p className="text-muted-foreground mt-2 text-sm">{_(description)}</p>
+      <p className="mt-2 text-sm text-muted-foreground">{_(description)}</p>
 
-      <hr className="border-border mb-8 mt-4" />
+      <hr className="mb-8 mt-4 border-border" />
     </>
   );
 };
@@ -66,10 +66,7 @@ export const DocumentFlowFormContainerContent = ({
   ...props
 }: DocumentFlowFormContainerContentProps) => {
   return (
-    <div
-      className={cn('custom-scrollbar -mx-2 flex flex-1 flex-col px-2', className)}
-      {...props}
-    >
+    <div className={cn('custom-scrollbar -mx-2 flex flex-1 flex-col px-2', className)} {...props}>
       <div className="flex flex-1 flex-col">{children}</div>
     </div>
   );
@@ -102,17 +99,17 @@ export const DocumentFlowFormContainerStep = ({
 }: DocumentFlowFormContainerStepProps) => {
   return (
     <div>
-      <p className="text-muted-foreground text-sm">
+      <p className="text-sm text-muted-foreground">
         <Trans>
           Step <span>{`${step} of ${maxStep}`}</span>
         </Trans>
       </p>
 
-      <div className="bg-muted relative mt-4 h-[2px] rounded-md">
+      <div className="relative mt-4 h-[2px] rounded-md bg-muted">
         <motion.div
           layout="size"
           layoutId="document-flow-container-step"
-          className="bg-primary absolute inset-y-0 left-0"
+          className="absolute inset-y-0 left-0 bg-primary"
           style={{
             width: `${(100 / maxStep) * step}%`,
           }}
@@ -150,7 +147,7 @@ export const DocumentFlowFormContainerActions = ({
     <div className="mt-4 flex gap-x-4">
       <Button
         type="button"
-        className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+        className="flex-1 bg-black/5 hover:bg-black/10 dark:bg-muted dark:hover:bg-muted/80"
         size="lg"
         variant="secondary"
         disabled={disabled || loading || !canGoBack || !onGoBackClick}
@@ -161,7 +158,7 @@ export const DocumentFlowFormContainerActions = ({
 
       <Button
         type="button"
-        className="bg-primary flex-1"
+        className="flex-1 bg-primary"
         size="lg"
         disabled={disabled || disableNextStep || loading || !canGoNext}
         loading={loading}
diff --git a/packages/ui/primitives/document-flow/field-content.tsx b/packages/ui/primitives/document-flow/field-content.tsx
index bfd08945b..c9c7b6b69 100644
--- a/packages/ui/primitives/document-flow/field-content.tsx
+++ b/packages/ui/primitives/document-flow/field-content.tsx
@@ -62,7 +62,7 @@ export const FieldContent = ({ field, documentMeta }: FieldIconProps) => {
         >
           <div className="flex items-center">
             <Checkbox className="h-3 w-3" disabled />
-            <Label className="text-foreground ml-1.5 text-xs font-normal opacity-50">
+            <Label className="ml-1.5 text-xs font-normal text-foreground opacity-50">
               <Trans>Checkbox option</Trans>
             </Label>
           </div>
@@ -90,7 +90,7 @@ export const FieldContent = ({ field, documentMeta }: FieldIconProps) => {
             {item.value && (
               <Label
                 htmlFor={`checkbox-${index}`}
-                className="text-foreground ml-1.5 text-xs font-normal"
+                className="ml-1.5 text-xs font-normal text-foreground"
               >
                 {item.value}
               </Label>
@@ -122,7 +122,7 @@ export const FieldContent = ({ field, documentMeta }: FieldIconProps) => {
               {item.value && (
                 <Label
                   htmlFor={`option-${index}`}
-                  className="text-foreground ml-1.5 text-xs font-normal"
+                  className="ml-1.5 text-xs font-normal text-foreground"
                 >
                   {item.value}
                 </Label>
@@ -140,7 +140,7 @@ export const FieldContent = ({ field, documentMeta }: FieldIconProps) => {
     !field.inserted
   ) {
     return (
-      <div className="text-field-card-foreground flex flex-row items-center py-0.5 text-[clamp(0.07rem,25cqw,0.825rem)] text-sm">
+      <div className="flex flex-row items-center py-0.5 text-[clamp(0.07rem,25cqw,0.825rem)] text-sm text-field-card-foreground">
         <p>
           <Trans>Select</Trans>
         </p>
@@ -196,7 +196,7 @@ export const FieldContent = ({ field, documentMeta }: FieldIconProps) => {
     <div className="flex h-full w-full items-center overflow-hidden">
       <p
         className={cn(
-          'text-foreground w-full whitespace-pre-wrap text-left text-[clamp(0.07rem,25cqw,0.825rem)] duration-200',
+          'w-full whitespace-pre-wrap text-left text-[clamp(0.07rem,25cqw,0.825rem)] text-foreground duration-200',
           {
             '!text-center': textAlign === 'center' || !textToDisplay,
             '!text-right': textAlign === 'right',
diff --git a/packages/ui/primitives/sheet.tsx b/packages/ui/primitives/sheet.tsx
index 2869a89d1..30723e73b 100644
--- a/packages/ui/primitives/sheet.tsx
+++ b/packages/ui/primitives/sheet.tsx
@@ -42,7 +42,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, children: _children, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      'bg-background/80 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-[61] backdrop-blur-sm transition-all duration-100',
+      'fixed inset-0 z-[61] bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in',
       className,
     )}
     {...props}
@@ -159,7 +159,7 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <X className="h-4 w-4" />
         <span className="sr-only">
           <Trans>Close</Trans>
@@ -192,7 +192,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={cn('text-foreground text-lg font-semibold', className)}
+    className={cn('text-lg font-semibold text-foreground', className)}
     {...props}
   />
 ));
@@ -205,7 +205,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn('text-muted-foreground text-sm', className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
 ));
diff --git a/packages/ui/primitives/signature-pad/signature-pad-draw.tsx b/packages/ui/primitives/signature-pad/signature-pad-draw.tsx
index 9cc340ba0..aff0363e5 100644
--- a/packages/ui/primitives/signature-pad/signature-pad-draw.tsx
+++ b/packages/ui/primitives/signature-pad/signature-pad-draw.tsx
@@ -294,7 +294,7 @@ export const SignaturePadDraw = ({
       <div className="absolute bottom-3 right-3 flex gap-2">
         <button
           type="button"
-          className="focus-visible:ring-ring ring-offset-background text-muted-foreground/60 hover:text-muted-foreground rounded-full p-0 text-[0.688rem] focus-visible:outline-none focus-visible:ring-2"
+          className="rounded-full p-0 text-[0.688rem] text-muted-foreground/60 ring-offset-background hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           onClick={() => onClearClick()}
         >
           <Trans>Clear Signature</Trans>
@@ -303,7 +303,7 @@ export const SignaturePadDraw = ({
 
       {isSignatureValid === false && (
         <div className="absolute bottom-4 left-4 flex gap-2">
-          <span className="text-destructive text-xs">
+          <span className="text-xs text-destructive">
             <Trans>Signature is too small</Trans>
           </span>
         </div>
@@ -314,7 +314,7 @@ export const SignaturePadDraw = ({
           <button
             type="button"
             title="undo"
-            className="focus-visible:ring-ring ring-offset-background text-muted-foreground/60 hover:text-muted-foreground rounded-full p-0 text-[0.688rem] focus-visible:outline-none focus-visible:ring-2"
+            className="rounded-full p-0 text-[0.688rem] text-muted-foreground/60 ring-offset-background hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             onClick={onUndoClick}
           >
             <Undo2 className="h-4 w-4" />
diff --git a/packages/ui/primitives/template-flow/add-template-settings.tsx b/packages/ui/primitives/template-flow/add-template-settings.tsx
index 1294d8812..ce2a26f99 100644
--- a/packages/ui/primitives/template-flow/add-template-settings.tsx
+++ b/packages/ui/primitives/template-flow/add-template-settings.tsx
@@ -239,7 +239,7 @@ export const AddTemplateSettingsFormPartial = ({
                         <InfoIcon className="mx-2 h-4 w-4" />
                       </TooltipTrigger>
 
-                      <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
+                      <TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
                         Controls the language for the document, including the language to be used
                         for email notifications, and the final certificate that is generated and
                         attached to the document.
@@ -337,7 +337,7 @@ export const AddTemplateSettingsFormPartial = ({
                         <InfoIcon className="mx-2 h-4 w-4" />
                       </TooltipTrigger>
 
-                      <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
+                      <TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
                         <h2>
                           <strong>
                             <Trans>Document Distribution Method</Trans>
@@ -423,7 +423,7 @@ export const AddTemplateSettingsFormPartial = ({
                         field.onChange(value);
                         void handleAutoSave();
                       }}
-                      className="bg-background w-full"
+                      className="w-full bg-background"
                       emptySelectionPlaceholder={t`Select signature types`}
                     />
                   </FormControl>
@@ -463,11 +463,11 @@ export const AddTemplateSettingsFormPartial = ({
             {distributionMethod === DocumentDistributionMethod.EMAIL && (
               <Accordion type="multiple">
                 <AccordionItem value="email-options" className="border-none">
-                  <AccordionTrigger className="text-foreground rounded border px-3 py-2 text-left hover:bg-neutral-200/30 hover:no-underline">
+                  <AccordionTrigger className="rounded border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
                     <Trans>Email Options</Trans>
                   </AccordionTrigger>
 
-                  <AccordionContent className="text-muted-foreground -mx-1 px-1 pt-4 text-sm leading-relaxed [&>div]:pb-0">
+                  <AccordionContent className="-mx-1 px-1 pt-4 text-sm leading-relaxed text-muted-foreground [&>div]:pb-0">
                     <div className="flex flex-col space-y-6">
                       {organisation.organisationClaim.flags.emailDomains && (
                         <FormField
@@ -566,7 +566,7 @@ export const AddTemplateSettingsFormPartial = ({
                                 <TooltipTrigger>
                                   <InfoIcon className="mx-2 h-4 w-4" />
                                 </TooltipTrigger>
-                                <TooltipContent className="text-muted-foreground p-4">
+                                <TooltipContent className="p-4 text-muted-foreground">
                                   <DocumentSendEmailMessageHelper />
                                 </TooltipContent>
                               </Tooltip>
@@ -574,7 +574,7 @@ export const AddTemplateSettingsFormPartial = ({
 
                             <FormControl>
                               <Textarea
-                                className="bg-background h-16 resize-none"
+                                className="h-16 resize-none bg-background"
                                 {...field}
                                 maxLength={5000}
                                 onBlur={handleAutoSave}
@@ -603,11 +603,11 @@ export const AddTemplateSettingsFormPartial = ({
 
             <Accordion type="multiple">
               <AccordionItem value="advanced-options" className="border-none">
-                <AccordionTrigger className="text-foreground rounded border px-3 py-2 text-left hover:bg-neutral-200/30 hover:no-underline">
+                <AccordionTrigger className="rounded border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
                   <Trans>Advanced Options</Trans>
                 </AccordionTrigger>
 
-                <AccordionContent className="text-muted-foreground -mx-1 px-1 pt-4 text-sm leading-relaxed">
+                <AccordionContent className="-mx-1 px-1 pt-4 text-sm leading-relaxed text-muted-foreground">
                   <div className="flex flex-col space-y-6">
                     <FormField
                       control={form.control}
@@ -621,7 +621,7 @@ export const AddTemplateSettingsFormPartial = ({
                                 <InfoIcon className="mx-2 h-4 w-4" />
                               </TooltipTrigger>
 
-                              <TooltipContent className="text-muted-foreground max-w-xs">
+                              <TooltipContent className="max-w-xs text-muted-foreground">
                                 <Trans>
                                   Add an external ID to the template. This can be used to identify
                                   in external systems.
@@ -691,7 +691,7 @@ export const AddTemplateSettingsFormPartial = ({
 
                           <FormControl>
                             <Combobox
-                              className="bg-background time-zone-field"
+                              className="time-zone-field bg-background"
                               options={TIME_ZONES}
                               {...field}
                               onChange={(value) => {
@@ -718,7 +718,7 @@ export const AddTemplateSettingsFormPartial = ({
                                 <InfoIcon className="mx-2 h-4 w-4" />
                               </TooltipTrigger>
 
-                              <TooltipContent className="text-muted-foreground max-w-xs">
+                              <TooltipContent className="max-w-xs text-muted-foreground">
                                 <Trans>
                                   Add a URL to redirect the user to once the document is signed
                                 </Trans>