Merge branch 'main' into feat/public-api

2025-11-13 08:13:56 +10:00 · 2024-02-26 00:21:25 +11:00
parent 2abcdd7533 6ea6dda99d
commit 2a74ce06ef
126 changed files with 4134 additions and 892 deletions
--- a/apps/marketing/src/app/(marketing)/[content]/page.tsx
+++ b/apps/marketing/src/app/(marketing)/[content]/page.tsx
@ -5,11 +5,10 @@ import { allDocuments } from 'contentlayer/generated';
 import type { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';

-export const generateStaticParams = () =>
-  allDocuments.map((post) => ({ post: post._raw.flattenedPath }));
+export const dynamic = 'force-dynamic';

 export const generateMetadata = ({ params }: { params: { content: string } }) => {
-  const document = allDocuments.find((post) => post._raw.flattenedPath === params.content);
+  const document = allDocuments.find((doc) => doc._raw.flattenedPath === params.content);

  if (!document) {
    return { title: 'Not Found' };
--- a/apps/marketing/src/app/(marketing)/blog/[post]/page.tsx
+++ b/apps/marketing/src/app/(marketing)/blog/[post]/page.tsx
@ -9,9 +9,6 @@ import { useMDXComponent } from 'next-contentlayer/hooks';

 export const dynamic = 'force-dynamic';

-export const generateStaticParams = () =>
-  allBlogPosts.map((post) => ({ post: post._raw.flattenedPath }));
-
 export const generateMetadata = ({ params }: { params: { post: string } }) => {
  const blogPost = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`);

--- a/apps/marketing/src/app/(marketing)/blog/page.tsx
+++ b/apps/marketing/src/app/(marketing)/blog/page.tsx
@ -5,6 +5,7 @@ import { allBlogPosts } from 'contentlayer/generated';
 export const metadata: Metadata = {
  title: 'Blog',
 };
+
 export default function BlogPage() {
  const blogPosts = allBlogPosts.sort((a, b) => {
    const dateA = new Date(a.date);
--- a/apps/marketing/src/app/(marketing)/singleplayer/client.tsx
+++ b/apps/marketing/src/app/(marketing)/singleplayer/client.tsx
@ -256,6 +256,7 @@ export const SinglePlayerClient = () => {
                fields={fields}
                onSubmit={onSignSubmit}
                requireName={Boolean(fields.find((field) => field.type === 'NAME'))}
+                requireCustomText={Boolean(fields.find((field) => field.type === 'TEXT'))}
                requireSignature={Boolean(fields.find((field) => field.type === 'SIGNATURE'))}
              />
            </Stepper>
--- a/apps/marketing/src/app/layout.tsx
+++ b/apps/marketing/src/app/layout.tsx
@ -2,6 +2,8 @@ import { Suspense } from 'react';

 import { Caveat, Inter } from 'next/font/google';

+import { PublicEnvScript } from 'next-runtime-env';
+
 import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag';
 import { NEXT_PUBLIC_MARKETING_URL } from '@documenso/lib/constants/app';
 import { getAllAnonymousFlags } from '@documenso/lib/universal/get-feature-flag';
@ -62,6 +64,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
        <link rel="manifest" href="/site.webmanifest" />
+        <PublicEnvScript />
      </head>

      <Suspense>
--- a/apps/marketing/src/components/(marketing)/pricing-table.tsx
+++ b/apps/marketing/src/components/(marketing)/pricing-table.tsx
@ -114,7 +114,9 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
          </p>

          <Button className="mt-6 rounded-full text-base" asChild>
-            <Link href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup`}>Signup Now</Link>
+            <Link href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup`} target="_blank">
+              Signup Now
+            </Link>
          </Button>

          <div className="mt-8 flex w-full flex-col divide-y">
--- a/apps/web/package.json
+++ b/apps/web/package.json
@ -43,6 +43,7 @@
    "react-hotkeys-hook": "^4.4.1",
    "react-icons": "^4.11.0",
    "react-rnd": "^10.4.1",
+    "remeda": "^1.27.1",
    "sharp": "0.33.1",
    "ts-pattern": "^5.0.5",
    "typescript": "5.2.2",
--- a/apps/web/src/app/(dashboard)/admin/nav.tsx
+++ b/apps/web/src/app/(dashboard)/admin/nav.tsx
@ -1,11 +1,11 @@
 'use client';

-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';

 import Link from 'next/link';
 import { usePathname } from 'next/navigation';

-import { BarChart3, FileStack, User2, Wallet2 } from 'lucide-react';
+import { BarChart3, FileStack, Settings, User2, Wallet2 } from 'lucide-react';

 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@ -78,6 +78,20 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
          Subscriptions
        </Link>
      </Button>
+
+      <Button
+        variant="ghost"
+        className={cn(
+          'justify-start md:w-full',
+          pathname?.startsWith('/admin/banner') && 'bg-secondary',
+        )}
+        asChild
+      >
+        <Link href="/admin/site-settings">
+          <Settings className="mr-2 h-5 w-5" />
+          Site Settings
+        </Link>
+      </Button>
    </div>
  );
 };
--- a/apps/web/src/app/(dashboard)/admin/site-settings/banner-form.tsx
+++ b/apps/web/src/app/(dashboard)/admin/site-settings/banner-form.tsx
@ -0,0 +1,200 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import type { TSiteSettingsBannerSchema } from '@documenso/lib/server-only/site-settings/schemas/banner';
+import {
+  SITE_SETTINGS_BANNER_ID,
+  ZSiteSettingsBannerSchema,
+} from '@documenso/lib/server-only/site-settings/schemas/banner';
+import { TRPCClientError } from '@documenso/trpc/client';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { ColorPicker } from '@documenso/ui/primitives/color-picker';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+const ZBannerFormSchema = ZSiteSettingsBannerSchema;
+
+type TBannerFormSchema = z.infer<typeof ZBannerFormSchema>;
+
+export type BannerFormProps = {
+  banner?: TSiteSettingsBannerSchema;
+};
+
+export function BannerForm({ banner }: BannerFormProps) {
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const form = useForm<TBannerFormSchema>({
+    resolver: zodResolver(ZBannerFormSchema),
+    defaultValues: {
+      id: SITE_SETTINGS_BANNER_ID,
+      enabled: banner?.enabled ?? false,
+      data: {
+        content: banner?.data?.content ?? '',
+        bgColor: banner?.data?.bgColor ?? '#000000',
+        textColor: banner?.data?.textColor ?? '#FFFFFF',
+      },
+    },
+  });
+
+  const enabled = form.watch('enabled');
+
+  const { mutateAsync: updateSiteSetting, isLoading: isUpdateSiteSettingLoading } =
+    trpcReact.admin.updateSiteSetting.useMutation();
+
+  const onBannerUpdate = async ({ id, enabled, data }: TBannerFormSchema) => {
+    try {
+      await updateSiteSetting({
+        id,
+        enabled,
+        data,
+      });
+
+      toast({
+        title: 'Banner Updated',
+        description: 'Your banner has been updated successfully.',
+        duration: 5000,
+      });
+
+      router.refresh();
+    } catch (err) {
+      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
+        toast({
+          title: 'An error occurred',
+          description: err.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          description:
+            'We encountered an unknown error while attempting to update the banner. Please try again later.',
+        });
+      }
+    }
+  };
+
+  return (
+    <div>
+      <h2 className="font-semibold">Site Banner</h2>
+      <p className="text-muted-foreground mt-2 text-sm">
+        The site banner is a message that is shown at the top of the site. It can be used to display
+        important information to your users.
+      </p>
+
+      <Form {...form}>
+        <form
+          className="mt-4 flex flex-col rounded-md"
+          onSubmit={form.handleSubmit(onBannerUpdate)}
+        >
+          <div className="mt-4 flex flex-col gap-4 md:flex-row">
+            <FormField
+              control={form.control}
+              name="enabled"
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>Enabled</FormLabel>
+
+                  <FormControl>
+                    <div>
+                      <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    </div>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            <fieldset
+              className="flex flex-col gap-4 md:flex-row"
+              disabled={!enabled}
+              aria-disabled={!enabled}
+            >
+              <FormField
+                control={form.control}
+                name="data.bgColor"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Background Color</FormLabel>
+
+                    <FormControl>
+                      <div>
+                        <ColorPicker {...field} />
+                      </div>
+                    </FormControl>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="data.textColor"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Text Color</FormLabel>
+
+                    <FormControl>
+                      <div>
+                        <ColorPicker {...field} />
+                      </div>
+                    </FormControl>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </fieldset>
+          </div>
+
+          <fieldset disabled={!enabled} aria-disabled={!enabled}>
+            <FormField
+              control={form.control}
+              name="data.content"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Content</FormLabel>
+
+                  <FormControl>
+                    <Textarea className="h-32 resize-none" {...field} />
+                  </FormControl>
+
+                  <FormDescription>
+                    The content to show in the banner, HTML is allowed
+                  </FormDescription>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </fieldset>
+
+          <Button
+            type="submit"
+            loading={isUpdateSiteSettingLoading}
+            className="mt-4 justify-end self-end"
+          >
+            Update Banner
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+}
--- a/apps/web/src/app/(dashboard)/admin/site-settings/page.tsx
+++ b/apps/web/src/app/(dashboard)/admin/site-settings/page.tsx
@ -0,0 +1,24 @@
+import { getSiteSettings } from '@documenso/lib/server-only/site-settings/get-site-settings';
+import { SITE_SETTINGS_BANNER_ID } from '@documenso/lib/server-only/site-settings/schemas/banner';
+
+import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+
+import { BannerForm } from './banner-form';
+
+// import { BannerForm } from './banner-form';
+
+export default async function AdminBannerPage() {
+  const banner = await getSiteSettings().then((settings) =>
+    settings.find((setting) => setting.id === SITE_SETTINGS_BANNER_ID),
+  );
+
+  return (
+    <div>
+      <SettingsHeader title="Site Settings" subtitle="Manage your site settings here" />
+
+      <div className="mt-8">
+        <BannerForm banner={banner} />
+      </div>
+    </div>
+  );
+}
--- a/apps/web/src/app/(dashboard)/documents/[id]/document-page-view-button.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/document-page-view-button.tsx
@ -0,0 +1,110 @@
+'use client';
+
+import Link from 'next/link';
+
+import { CheckCircle, Download, EyeIcon, Pencil } from 'lucide-react';
+import { useSession } from 'next-auth/react';
+import { match } from 'ts-pattern';
+
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
+import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client';
+import { trpc as trpcClient } from '@documenso/trpc/client';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type DocumentPageViewButtonProps = {
+  document: Document & {
+    User: Pick<User, 'id' | 'name' | 'email'>;
+    Recipient: Recipient[];
+    team: Pick<Team, 'id' | 'url'> | null;
+  };
+  team?: Pick<Team, 'id' | 'url'>;
+};
+
+export const DocumentPageViewButton = ({ document, team }: DocumentPageViewButtonProps) => {
+  const { data: session } = useSession();
+  const { toast } = useToast();
+
+  if (!session) {
+    return null;
+  }
+
+  const recipient = document.Recipient.find((recipient) => recipient.email === session.user.email);
+
+  const isRecipient = !!recipient;
+  const isPending = document.status === DocumentStatus.PENDING;
+  const isComplete = document.status === DocumentStatus.COMPLETED;
+  const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
+  const role = recipient?.role;
+
+  const documentsPath = formatDocumentsPath(document.team?.url);
+
+  const onDownloadClick = async () => {
+    try {
+      const documentWithData = await trpcClient.document.getDocumentById.query({
+        id: document.id,
+        teamId: team?.id,
+      });
+
+      const documentData = documentWithData?.documentData;
+
+      if (!documentData) {
+        throw new Error('No document available');
+      }
+
+      await downloadPDF({ documentData, fileName: documentWithData.title });
+    } catch (err) {
+      toast({
+        title: 'Something went wrong',
+        description: 'An error occurred while downloading your document.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return match({
+    isRecipient,
+    isPending,
+    isComplete,
+    isSigned,
+  })
+    .with({ isRecipient: true, isPending: true, isSigned: false }, () => (
+      <Button className="w-full" asChild>
+        <Link href={`/sign/${recipient?.token}`}>
+          {match(role)
+            .with(RecipientRole.SIGNER, () => (
+              <>
+                <Pencil className="-ml-1 mr-2 h-4 w-4" />
+                Sign
+              </>
+            ))
+            .with(RecipientRole.APPROVER, () => (
+              <>
+                <CheckCircle className="-ml-1 mr-2 h-4 w-4" />
+                Approve
+              </>
+            ))
+            .otherwise(() => (
+              <>
+                <EyeIcon className="-ml-1 mr-2 h-4 w-4" />
+                View
+              </>
+            ))}
+        </Link>
+      </Button>
+    ))
+    .with({ isComplete: false }, () => (
+      <Button className="w-full" asChild>
+        <Link href={`${documentsPath}/${document.id}/edit`}>Edit</Link>
+      </Button>
+    ))
+    .with({ isComplete: true }, () => (
+      <Button className="w-full" onClick={onDownloadClick}>
+        <Download className="-ml-1 mr-2 inline h-4 w-4" />
+        Download
+      </Button>
+    ))
+    .otherwise(() => null);
+};
--- a/apps/web/src/app/(dashboard)/documents/[id]/document-page-view-dropdown.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/document-page-view-dropdown.tsx
@ -0,0 +1,160 @@
+'use client';
+
+import { useState } from 'react';
+
+import Link from 'next/link';
+
+import { Copy, Download, Edit, Loader, MoreHorizontal, Share, Trash2 } from 'lucide-react';
+import { useSession } from 'next-auth/react';
+
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { DocumentStatus } from '@documenso/prisma/client';
+import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
+import { trpc as trpcClient } from '@documenso/trpc/client';
+import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { ResendDocumentActionItem } from '../_action-items/resend-document';
+import { DeleteDocumentDialog } from '../delete-document-dialog';
+import { DuplicateDocumentDialog } from '../duplicate-document-dialog';
+
+export type DocumentPageViewDropdownProps = {
+  document: Document & {
+    User: Pick<User, 'id' | 'name' | 'email'>;
+    Recipient: Recipient[];
+    team: Pick<Team, 'id' | 'url'> | null;
+  };
+  team?: Pick<Team, 'id' | 'url'>;
+};
+
+export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDropdownProps) => {
+  const { data: session } = useSession();
+  const { toast } = useToast();
+
+  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
+
+  if (!session) {
+    return null;
+  }
+
+  const recipient = document.Recipient.find((recipient) => recipient.email === session.user.email);
+
+  const isOwner = document.User.id === session.user.id;
+  const isDraft = document.status === DocumentStatus.DRAFT;
+  const isComplete = document.status === DocumentStatus.COMPLETED;
+  const isDocumentDeletable = isOwner;
+  const isCurrentTeamDocument = team && document.team?.url === team.url;
+
+  const documentsPath = formatDocumentsPath(team?.url);
+
+  const onDownloadClick = async () => {
+    try {
+      const documentWithData = await trpcClient.document.getDocumentById.query({
+        id: document.id,
+        teamId: team?.id,
+      });
+
+      const documentData = documentWithData?.documentData;
+
+      if (!documentData) {
+        return;
+      }
+
+      await downloadPDF({ documentData, fileName: document.title });
+    } catch (err) {
+      toast({
+        title: 'Something went wrong',
+        description: 'An error occurred while downloading your document.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const nonSignedRecipients = document.Recipient.filter((item) => item.signingStatus !== 'SIGNED');
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="w-52" align="end" forceMount>
+        <DropdownMenuLabel>Action</DropdownMenuLabel>
+
+        {(isOwner || isCurrentTeamDocument) && !isComplete && (
+          <DropdownMenuItem asChild>
+            <Link href={`${documentsPath}/${document.id}/edit`}>
+              <Edit className="mr-2 h-4 w-4" />
+              Edit
+            </Link>
+          </DropdownMenuItem>
+        )}
+
+        {isComplete && (
+          <DropdownMenuItem onClick={onDownloadClick}>
+            <Download className="mr-2 h-4 w-4" />
+            Download
+          </DropdownMenuItem>
+        )}
+
+        <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
+          <Copy className="mr-2 h-4 w-4" />
+          Duplicate
+        </DropdownMenuItem>
+
+        <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)} disabled={!isDocumentDeletable}>
+          <Trash2 className="mr-2 h-4 w-4" />
+          Delete
+        </DropdownMenuItem>
+
+        <DropdownMenuLabel>Share</DropdownMenuLabel>
+
+        <ResendDocumentActionItem
+          document={document}
+          recipients={nonSignedRecipients}
+          team={team}
+        />
+
+        <DocumentShareButton
+          documentId={document.id}
+          token={isOwner ? undefined : recipient?.token}
+          trigger={({ loading, disabled }) => (
+            <DropdownMenuItem disabled={disabled || isDraft} onSelect={(e) => e.preventDefault()}>
+              <div className="flex items-center">
+                {loading ? <Loader className="mr-2 h-4 w-4" /> : <Share className="mr-2 h-4 w-4" />}
+                Share Signing Card
+              </div>
+            </DropdownMenuItem>
+          )}
+        />
+      </DropdownMenuContent>
+
+      {isDocumentDeletable && (
+        <DeleteDocumentDialog
+          id={document.id}
+          status={document.status}
+          documentTitle={document.title}
+          open={isDeleteDialogOpen}
+          onOpenChange={setDeleteDialogOpen}
+        />
+      )}
+      {isDuplicateDialogOpen && (
+        <DuplicateDocumentDialog
+          id={document.id}
+          open={isDuplicateDialogOpen}
+          onOpenChange={setDuplicateDialogOpen}
+          team={team}
+        />
+      )}
+    </DropdownMenu>
+  );
+};
--- a/apps/web/src/app/(dashboard)/documents/[id]/document-page-view-information.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/document-page-view-information.tsx
@ -0,0 +1,72 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import { DateTime } from 'luxon';
+
+import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
+import { useLocale } from '@documenso/lib/client-only/providers/locale';
+import type { Document, Recipient, User } from '@documenso/prisma/client';
+
+export type DocumentPageViewInformationProps = {
+  userId: number;
+  document: Document & {
+    User: Pick<User, 'id' | 'name' | 'email'>;
+    Recipient: Recipient[];
+  };
+};
+
+export const DocumentPageViewInformation = ({
+  document,
+  userId,
+}: DocumentPageViewInformationProps) => {
+  const isMounted = useIsMounted();
+
+  const { locale } = useLocale();
+
+  const documentInformation = useMemo(() => {
+    let createdValue = DateTime.fromJSDate(document.createdAt).toFormat('MMMM d, yyyy');
+    let lastModifiedValue = DateTime.fromJSDate(document.updatedAt).toRelative();
+
+    if (!isMounted) {
+      createdValue = DateTime.fromJSDate(document.createdAt)
+        .setLocale(locale)
+        .toFormat('MMMM d, yyyy');
+
+      lastModifiedValue = DateTime.fromJSDate(document.updatedAt).setLocale(locale).toRelative();
+    }
+
+    return [
+      {
+        description: 'Uploaded by',
+        value: userId === document.userId ? 'You' : document.User.name ?? document.User.email,
+      },
+      {
+        description: 'Created',
+        value: createdValue,
+      },
+      {
+        description: 'Last modified',
+        value: lastModifiedValue,
+      },
+    ];
+  }, [isMounted, document, locale, userId]);
+
+  return (
+    <section className="dark:bg-background text-foreground border-border bg-widget flex flex-col rounded-xl border">
+      <h1 className="px-4 py-3 font-medium">Information</h1>
+
+      <ul className="divide-y border-t">
+        {documentInformation.map((item) => (
+          <li
+            key={item.description}
+            className="flex items-center justify-between px-4 py-2.5 text-sm last:border-b"
+          >
+            <span className="text-muted-foreground">{item.description}</span>
+            <span>{item.value}</span>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+};
--- a/apps/web/src/app/(dashboard)/documents/[id]/document-page-view-recent-activity.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/document-page-view-recent-activity.tsx
@ -0,0 +1,153 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import { CheckCheckIcon, CheckIcon, Loader, MailOpen } from 'lucide-react';
+import { DateTime } from 'luxon';
+import { match } from 'ts-pattern';
+
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import { formatDocumentAuditLogAction } from '@documenso/lib/utils/document-audit-logs';
+import { trpc } from '@documenso/trpc/react';
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import { cn } from '@documenso/ui/lib/utils';
+
+export type DocumentPageViewRecentActivityProps = {
+  documentId: number;
+  userId: number;
+};
+
+export const DocumentPageViewRecentActivity = ({
+  documentId,
+  userId,
+}: DocumentPageViewRecentActivityProps) => {
+  const {
+    data,
+    isLoading,
+    isLoadingError,
+    refetch,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = trpc.document.findDocumentAuditLogs.useInfiniteQuery(
+    {
+      documentId,
+      filterForRecentActivity: true,
+      orderBy: {
+        column: 'createdAt',
+        direction: 'asc',
+      },
+      perPage: 10,
+    },
+    {
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+    },
+  );
+
+  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">
+      <div className="flex flex-row items-center justify-between border-b px-4 py-3">
+        <h1 className="text-foreground font-medium">Recent activity</h1>
+
+        {/* Can add dropdown menu here for additional options. */}
+      </div>
+
+      {isLoading && (
+        <div className="flex h-full items-center justify-center py-16">
+          <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+        </div>
+      )}
+
+      {isLoadingError && (
+        <div className="flex h-full flex-col items-center justify-center py-16">
+          <p className="text-foreground/80 text-sm">Unable to load document history</p>
+          <button
+            onClick={async () => refetch()}
+            className="text-foreground/70 hover:text-muted-foreground mt-2 text-sm"
+          >
+            Click here to retry
+          </button>
+        </div>
+      )}
+
+      <AnimateGenericFadeInOut>
+        {data && (
+          <ul role="list" className="space-y-6 p-4">
+            {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>
+
+                <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>
+
+                <button
+                  onClick={async () => fetchNextPage()}
+                  className="text-foreground/70 hover:text-muted-foreground text-xs"
+                >
+                  {isFetchingNextPage ? 'Loading...' : 'Load older activity'}
+                </button>
+              </li>
+            )}
+
+            {documentAuditLogs.length === 0 && (
+              <div className="flex items-center justify-center py-4">
+                <p className="text-muted-foreground/70 text-sm">No recent activity</p>
+              </div>
+            )}
+
+            {documentAuditLogs.map((auditLog, auditLogIndex) => (
+              <li key={auditLog.id} className="relative flex gap-x-4">
+                <div
+                  className={cn(
+                    auditLogIndex === documentAuditLogs.length - 1 ? 'h-6' : '-bottom-6',
+                    'absolute left-0 top-0 flex w-6 justify-center',
+                  )}
+                >
+                  <div className="bg-border w-px" />
+                </div>
+
+                <div className="bg-widget text-foreground/40 relative flex h-6 w-6 flex-none items-center justify-center">
+                  {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">
+                        <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">
+                        <CheckIcon 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">
+                        <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>
+
+                <p className="text-muted-foreground dark:text-muted-foreground/70 flex-auto py-0.5 text-xs leading-5">
+                  <span className="text-foreground font-medium">
+                    {formatDocumentAuditLogAction(auditLog, userId).prefix}
+                  </span>{' '}
+                  {formatDocumentAuditLogAction(auditLog, userId).description}
+                </p>
+
+                <time className="text-muted-foreground dark:text-muted-foreground/70 flex-none py-0.5 text-xs leading-5">
+                  {DateTime.fromJSDate(auditLog.createdAt).toRelative({ style: 'short' })}
+                </time>
+              </li>
+            ))}
+          </ul>
+        )}
+      </AnimateGenericFadeInOut>
+    </section>
+  );
+};
--- a/apps/web/src/app/(dashboard)/documents/[id]/document-page-view-recipients.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/document-page-view-recipients.tsx
@ -0,0 +1,115 @@
+import Link from 'next/link';
+
+import { CheckIcon, Clock, MailIcon, MailOpenIcon, PenIcon, PlusIcon } from 'lucide-react';
+import { match } from 'ts-pattern';
+
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client';
+import type { Document, Recipient } from '@documenso/prisma/client';
+import { SignatureIcon } from '@documenso/ui/icons/signature';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Badge } from '@documenso/ui/primitives/badge';
+
+export type DocumentPageViewRecipientsProps = {
+  document: Document & {
+    Recipient: Recipient[];
+  };
+  documentRootPath: string;
+};
+
+export const DocumentPageViewRecipients = ({
+  document,
+  documentRootPath,
+}: DocumentPageViewRecipientsProps) => {
+  const recipients = document.Recipient;
+
+  return (
+    <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
+      <div className="flex flex-row items-center justify-between px-4 py-3">
+        <h1 className="text-foreground font-medium">Recipients</h1>
+
+        {document.status !== DocumentStatus.COMPLETED && (
+          <Link
+            href={`${documentRootPath}/${document.id}/edit?step=signers`}
+            title="Modify recipients"
+            className="flex flex-row items-center justify-between"
+          >
+            {recipients.length === 0 ? (
+              <PlusIcon className="ml-2 h-4 w-4" />
+            ) : (
+              <PenIcon className="ml-2 h-3 w-3" />
+            )}
+          </Link>
+        )}
+      </div>
+
+      <ul className="text-muted-foreground divide-y border-t">
+        {recipients.length === 0 && (
+          <li className="flex flex-col items-center justify-center py-6 text-sm">No recipients</li>
+        )}
+
+        {recipients.map((recipient) => (
+          <li key={recipient.id} className="flex items-center justify-between px-4 py-2.5 text-sm">
+            <AvatarWithText
+              avatarFallback={recipient.email.slice(0, 1).toUpperCase()}
+              primaryText={<p className="text-muted-foreground text-sm">{recipient.email}</p>}
+              secondaryText={
+                <p className="text-muted-foreground/70 text-xs">
+                  {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
+                </p>
+              }
+            />
+
+            {document.status !== DocumentStatus.DRAFT &&
+              recipient.signingStatus === SigningStatus.SIGNED && (
+                <Badge variant="default">
+                  {match(recipient.role)
+                    .with(RecipientRole.APPROVER, () => (
+                      <>
+                        <CheckIcon className="mr-1 h-3 w-3" />
+                        Approved
+                      </>
+                    ))
+                    .with(RecipientRole.CC, () =>
+                      document.status === DocumentStatus.COMPLETED ? (
+                        <>
+                          <MailIcon className="mr-1 h-3 w-3" />
+                          Sent
+                        </>
+                      ) : (
+                        <>
+                          <CheckIcon className="mr-1 h-3 w-3" />
+                          Ready
+                        </>
+                      ),
+                    )
+
+                    .with(RecipientRole.SIGNER, () => (
+                      <>
+                        <SignatureIcon className="mr-1 h-3 w-3" />
+                        Signed
+                      </>
+                    ))
+                    .with(RecipientRole.VIEWER, () => (
+                      <>
+                        <MailOpenIcon className="mr-1 h-3 w-3" />
+                        Viewed
+                      </>
+                    ))
+                    .exhaustive()}
+                </Badge>
+              )}
+
+            {document.status !== DocumentStatus.DRAFT &&
+              recipient.signingStatus === SigningStatus.NOT_SIGNED && (
+                <Badge variant="secondary">
+                  <Clock className="mr-1 h-3 w-3" />
+                  Pending
+                </Badge>
+              )}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+};
--- a/apps/web/src/app/(dashboard)/documents/[id]/document-page-view.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/document-page-view.tsx
@ -1,22 +1,34 @@
 import Link from 'next/link';
 import { redirect } from 'next/navigation';

-import { ChevronLeft, Users2 } from 'lucide-react';
+import { ChevronLeft, Clock9, Users2 } from 'lucide-react';
+import { match } from 'ts-pattern';

 import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
-import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
+import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { DocumentStatus } from '@documenso/prisma/client';
 import type { Team } from '@documenso/prisma/client';
-import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';

-import { EditDocumentForm } from '~/app/(dashboard)/documents/[id]/edit-document';
 import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
-import { DocumentStatus } from '~/components/formatter/document-status';
+import { DocumentHistorySheet } from '~/components/document/document-history-sheet';
+import {
+  DocumentStatus as DocumentStatusComponent,
+  FRIENDLY_STATUS_MAP,
+} from '~/components/formatter/document-status';
+
+import { DocumentPageViewButton } from './document-page-view-button';
+import { DocumentPageViewDropdown } from './document-page-view-dropdown';
+import { DocumentPageViewInformation } from './document-page-view-information';
+import { DocumentPageViewRecentActivity } from './document-page-view-recent-activity';
+import { DocumentPageViewRecipients } from './document-page-view-recipients';

 export type DocumentPageViewProps = {
  params: {
@ -44,6 +56,10 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
    teamId: team?.id,
  }).catch(() => null);

+  const isDocumentHistoryEnabled = await getServerComponentFlag(
+    'app_document_page_view_history_sheet',
+  );
+
  if (!document || !document.documentData) {
    redirect(documentRootPath);
  }
@ -67,65 +83,122 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
    documentMeta.password = securePassword;
  }

-  const [recipients, fields] = await Promise.all([
-    getRecipientsForDocument({
-      documentId,
-      userId: user.id,
-    }),
-    getFieldsForDocument({
-      documentId,
-      userId: user.id,
-    }),
-  ]);
+  const recipients = await getRecipientsForDocument({
+    documentId,
+    userId: user.id,
+  });
+
+  const documentWithRecipients = {
+    ...document,
+    Recipient: recipients,
+  };

  return (
    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
-      <Link href={documentRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
+      <Link href="/documents" className="flex items-center text-[#7AC455] hover:opacity-80">
        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
        Documents
      </Link>

-      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
-        {document.title}
-      </h1>
+      <div className="flex flex-row justify-between">
+        <div>
+          <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
+            {document.title}
+          </h1>

-      <div className="mt-2.5 flex items-center gap-x-6">
-        <DocumentStatus inheritColor status={document.status} className="text-muted-foreground" />
+          <div className="mt-2.5 flex items-center gap-x-6">
+            <DocumentStatusComponent
+              inheritColor
+              status={document.status}
+              className="text-muted-foreground"
+            />

-        {recipients.length > 0 && (
-          <div className="text-muted-foreground flex items-center">
-            <Users2 className="mr-2 h-5 w-5" />
+            {recipients.length > 0 && (
+              <div className="text-muted-foreground flex items-center">
+                <Users2 className="mr-2 h-5 w-5" />

-            <StackAvatarsWithTooltip recipients={recipients} position="bottom">
-              <span>{recipients.length} Recipient(s)</span>
-            </StackAvatarsWithTooltip>
+                <StackAvatarsWithTooltip recipients={recipients} position="bottom">
+                  <span>{recipients.length} Recipient(s)</span>
+                </StackAvatarsWithTooltip>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {isDocumentHistoryEnabled && (
+          <div className="self-end">
+            <DocumentHistorySheet documentId={document.id} userId={user.id}>
+              <Button variant="outline">
+                <Clock9 className="mr-1.5 h-4 w-4" />
+                Document history
+              </Button>
+            </DocumentHistorySheet>
          </div>
        )}
      </div>

-      {document.status !== InternalDocumentStatus.COMPLETED && (
-        <EditDocumentForm
-          className="mt-8"
-          document={document}
-          user={user}
-          documentMeta={documentMeta}
-          recipients={recipients}
-          fields={fields}
-          documentData={documentData}
-          documentRootPath={documentRootPath}
-        />
-      )}
+      <div className="mt-6 grid w-full grid-cols-12 gap-8">
+        <Card
+          className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
+          gradient
+        >
+          <CardContent className="p-2">
+            <LazyPDFViewer document={document} key={documentData.id} documentData={documentData} />
+          </CardContent>
+        </Card>

-      {document.status === InternalDocumentStatus.COMPLETED && (
-        <div className="mx-auto mt-12 max-w-2xl">
-          <LazyPDFViewer
-            document={document}
-            key={documentData.id}
-            documentMeta={documentMeta}
-            documentData={documentData}
-          />
+        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+          <div className="space-y-6">
+            <section className="border-border bg-widget flex flex-col rounded-xl border pb-4 pt-6">
+              <div className="flex flex-row items-center justify-between px-4">
+                <h3 className="text-foreground text-2xl font-semibold">
+                  Document {FRIENDLY_STATUS_MAP[document.status].label.toLowerCase()}
+                </h3>
+
+                <DocumentPageViewDropdown document={documentWithRecipients} team={team} />
+              </div>
+
+              <p className="text-muted-foreground mt-2 px-4 text-sm ">
+                {match(document.status)
+                  .with(
+                    DocumentStatus.COMPLETED,
+                    () => 'This document has been signed by all recipients',
+                  )
+                  .with(
+                    DocumentStatus.DRAFT,
+                    () => 'This document is currently a draft and has not been sent',
+                  )
+                  .with(DocumentStatus.PENDING, () => {
+                    const pendingRecipients = recipients.filter(
+                      (recipient) => recipient.signingStatus === 'NOT_SIGNED',
+                    );
+
+                    return `Waiting on ${pendingRecipients.length} recipient${
+                      pendingRecipients.length > 1 ? 's' : ''
+                    }`;
+                  })
+                  .exhaustive()}
+              </p>
+
+              <div className="mt-4 border-t px-4 pt-4">
+                <DocumentPageViewButton document={documentWithRecipients} team={team} />
+              </div>
+            </section>
+
+            {/* Document information section. */}
+            <DocumentPageViewInformation document={documentWithRecipients} userId={user.id} />
+
+            {/* Recipients section. */}
+            <DocumentPageViewRecipients
+              document={documentWithRecipients}
+              documentRootPath={documentRootPath}
+            />
+
+            {/* Recent activity section. */}
+            <DocumentPageViewRecentActivity documentId={document.id} userId={user.id} />
+          </div>
        </div>
-      )}
+      </div>
    </div>
  );
 };
--- a/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
@ -2,10 +2,16 @@

 import { useState } from 'react';

-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';

-import type { DocumentData, DocumentMeta, Field, Recipient, User } from '@documenso/prisma/client';
-import { DocumentStatus } from '@documenso/prisma/client';
+import {
+  type DocumentData,
+  type DocumentMeta,
+  DocumentStatus,
+  type Field,
+  type Recipient,
+  type User,
+} from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@ -49,12 +55,9 @@ export const EditDocumentForm = ({
  documentRootPath,
 }: EditDocumentFormProps) => {
  const { toast } = useToast();
-  const router = useRouter();

-  // controlled stepper state
-  const [step, setStep] = useState<EditDocumentStep>(
-    document.status === DocumentStatus.DRAFT ? 'title' : 'signers',
-  );
+  const router = useRouter();
+  const searchParams = useSearchParams();

  const { mutateAsync: addTitle } = trpc.document.setTitleForDocument.useMutation();
  const { mutateAsync: addFields } = trpc.field.addFields.useMutation();
@ -86,6 +89,24 @@ export const EditDocumentForm = ({
    },
  };

+  const [step, setStep] = useState<EditDocumentStep>(() => {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const searchParamStep = searchParams?.get('step') as EditDocumentStep | undefined;
+
+    let initialStep: EditDocumentStep =
+      document.status === DocumentStatus.DRAFT ? 'title' : 'signers';
+
+    if (
+      searchParamStep &&
+      documentFlow[searchParamStep] !== undefined &&
+      !(recipients.length === 0 && (searchParamStep === 'subject' || searchParamStep === 'fields'))
+    ) {
+      initialStep = searchParamStep;
+    }
+
+    return initialStep;
+  });
+
  const onAddTitleFormSubmit = async (data: TAddTitleFormSchema) => {
    try {
      // Custom invocation server action
--- a/apps/web/src/app/(dashboard)/documents/[id]/edit/document-edit-page-view.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/edit/document-edit-page-view.tsx
@ -0,0 +1,121 @@
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+
+import { ChevronLeft, Users2 } from 'lucide-react';
+
+import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
+import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
+import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
+import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import type { Team } from '@documenso/prisma/client';
+import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
+
+import { EditDocumentForm } from '~/app/(dashboard)/documents/[id]/edit-document';
+import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
+import { DocumentStatus } from '~/components/formatter/document-status';
+
+export type DocumentEditPageViewProps = {
+  params: {
+    id: string;
+  };
+  team?: Team;
+};
+
+export const DocumentEditPageView = async ({ params, team }: DocumentEditPageViewProps) => {
+  const { id } = params;
+
+  const documentId = Number(id);
+
+  const documentRootPath = formatDocumentsPath(team?.url);
+
+  if (!documentId || Number.isNaN(documentId)) {
+    redirect(documentRootPath);
+  }
+
+  const { user } = await getRequiredServerComponentSession();
+
+  const document = await getDocumentById({
+    id: documentId,
+    userId: user.id,
+    teamId: team?.id,
+  }).catch(() => null);
+
+  if (!document || !document.documentData) {
+    redirect(documentRootPath);
+  }
+
+  if (document.status === InternalDocumentStatus.COMPLETED) {
+    redirect(`${documentRootPath}/${documentId}`);
+  }
+
+  const { documentData, documentMeta } = document;
+
+  if (documentMeta?.password) {
+    const key = DOCUMENSO_ENCRYPTION_KEY;
+
+    if (!key) {
+      throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
+    }
+
+    const securePassword = Buffer.from(
+      symmetricDecrypt({
+        key,
+        data: documentMeta.password,
+      }),
+    ).toString('utf-8');
+
+    documentMeta.password = securePassword;
+  }
+
+  const [recipients, fields] = await Promise.all([
+    getRecipientsForDocument({
+      documentId,
+      userId: user.id,
+    }),
+    getFieldsForDocument({
+      documentId,
+      userId: user.id,
+    }),
+  ]);
+
+  return (
+    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
+      <Link href={documentRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        Documents
+      </Link>
+
+      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
+        {document.title}
+      </h1>
+
+      <div className="mt-2.5 flex items-center gap-x-6">
+        <DocumentStatus inheritColor status={document.status} className="text-muted-foreground" />
+
+        {recipients.length > 0 && (
+          <div className="text-muted-foreground flex items-center">
+            <Users2 className="mr-2 h-5 w-5" />
+
+            <StackAvatarsWithTooltip recipients={recipients} position="bottom">
+              <span>{recipients.length} Recipient(s)</span>
+            </StackAvatarsWithTooltip>
+          </div>
+        )}
+      </div>
+
+      <EditDocumentForm
+        className="mt-8"
+        document={document}
+        user={user}
+        documentMeta={documentMeta}
+        recipients={recipients}
+        fields={fields}
+        documentData={documentData}
+        documentRootPath={documentRootPath}
+      />
+    </div>
+  );
+};
--- a/apps/web/src/app/(dashboard)/documents/[id]/edit/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/edit/page.tsx
@ -0,0 +1,11 @@
+import { DocumentEditPageView } from './document-edit-page-view';
+
+export type DocumentPageProps = {
+  params: {
+    id: string;
+  };
+};
+
+export default function DocumentEditPage({ params }: DocumentPageProps) {
+  return <DocumentEditPageView params={params} />;
+}
--- a/apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-data-table.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-data-table.tsx
@ -0,0 +1,165 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+
+import { DateTime } from 'luxon';
+import type { DateTimeFormatOptions } from 'luxon';
+import { UAParser } from 'ua-parser-js';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { formatDocumentAuditLogAction } from '@documenso/lib/utils/document-audit-logs';
+import { trpc } from '@documenso/trpc/react';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+export type DocumentLogsDataTableProps = {
+  documentId: number;
+};
+
+const dateFormat: DateTimeFormatOptions = {
+  ...DateTime.DATETIME_SHORT,
+  hourCycle: 'h12',
+};
+
+export const DocumentLogsDataTable = ({ documentId }: DocumentLogsDataTableProps) => {
+  const parser = new UAParser();
+
+  const searchParams = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const parsedSearchParams = ZBaseTableSearchParamsSchema.parse(
+    Object.fromEntries(searchParams ?? []),
+  );
+
+  const { data, isLoading, isInitialLoading, isLoadingError } =
+    trpc.document.findDocumentAuditLogs.useQuery(
+      {
+        documentId,
+        page: parsedSearchParams.page,
+        perPage: parsedSearchParams.perPage,
+      },
+      {
+        keepPreviousData: true,
+      },
+    );
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const uppercaseFistLetter = (text: string) => {
+    return text.charAt(0).toUpperCase() + text.slice(1);
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  return (
+    <DataTable
+      columns={[
+        {
+          header: 'Time',
+          accessorKey: 'createdAt',
+          cell: ({ row }) => <LocaleDate format={dateFormat} date={row.original.createdAt} />,
+        },
+        {
+          header: 'User',
+          accessorKey: 'name',
+          cell: ({ row }) =>
+            row.original.name || row.original.email ? (
+              <div>
+                {row.original.name && (
+                  <p className="truncate" title={row.original.name}>
+                    {row.original.name}
+                  </p>
+                )}
+
+                {row.original.email && (
+                  <p className="truncate" title={row.original.email}>
+                    {row.original.email}
+                  </p>
+                )}
+              </div>
+            ) : (
+              <p>N/A</p>
+            ),
+        },
+        {
+          header: 'Action',
+          accessorKey: 'type',
+          cell: ({ row }) => (
+            <span>
+              {uppercaseFistLetter(formatDocumentAuditLogAction(row.original).description)}
+            </span>
+          ),
+        },
+        {
+          header: 'IP Address',
+          accessorKey: 'ipAddress',
+        },
+        {
+          header: 'Browser',
+          cell: ({ row }) => {
+            if (!row.original.userAgent) {
+              return 'N/A';
+            }
+
+            parser.setUA(row.original.userAgent);
+
+            const result = parser.getResult();
+
+            return result.browser.name ?? 'N/A';
+          },
+        },
+      ]}
+      data={results.data}
+      perPage={results.perPage}
+      currentPage={results.currentPage}
+      totalPages={results.totalPages}
+      onPaginationChange={onPaginationChange}
+      error={{
+        enable: isLoadingError,
+      }}
+      skeleton={{
+        enable: isLoading && isInitialLoading,
+        rows: 3,
+        component: (
+          <>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell className="w-1/2 py-4 pr-4">
+              <div className="ml-2 flex flex-grow flex-col">
+                <Skeleton className="h-4 w-1/3 max-w-[8rem]" />
+                <Skeleton className="mt-1 h-4 w-1/2 max-w-[12rem]" />
+              </div>
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-10 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-10 rounded-full" />
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+    </DataTable>
+  );
+};
--- a/apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-page-view.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-page-view.tsx
@ -0,0 +1,150 @@
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+
+import { ChevronLeft, DownloadIcon } from 'lucide-react';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
+import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import type { Recipient, Team } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card } from '@documenso/ui/primitives/card';
+
+import { FRIENDLY_STATUS_MAP } from '~/components/formatter/document-status';
+
+import { DocumentLogsDataTable } from './document-logs-data-table';
+
+export type DocumentLogsPageViewProps = {
+  params: {
+    id: string;
+  };
+  team?: Team;
+};
+
+export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageViewProps) => {
+  const { id } = params;
+
+  const documentId = Number(id);
+
+  const documentRootPath = formatDocumentsPath(team?.url);
+
+  if (!documentId || Number.isNaN(documentId)) {
+    redirect(documentRootPath);
+  }
+
+  const { user } = await getRequiredServerComponentSession();
+
+  const [document, recipients] = await Promise.all([
+    getDocumentById({
+      id: documentId,
+      userId: user.id,
+      teamId: team?.id,
+    }).catch(() => null),
+    getRecipientsForDocument({
+      documentId,
+      userId: user.id,
+    }),
+  ]);
+
+  if (!document || !document.documentData) {
+    redirect(documentRootPath);
+  }
+
+  const documentInformation: { description: string; value: string }[] = [
+    {
+      description: 'Document title',
+      value: document.title,
+    },
+    {
+      description: 'Document ID',
+      value: document.id.toString(),
+    },
+    {
+      description: 'Document status',
+      value: FRIENDLY_STATUS_MAP[document.status].label,
+    },
+    {
+      description: 'Created by',
+      value: document.User.name ?? document.User.email,
+    },
+    {
+      description: 'Date created',
+      value: document.createdAt.toISOString(),
+    },
+    {
+      description: 'Last updated',
+      value: document.updatedAt.toISOString(),
+    },
+    {
+      description: 'Time zone',
+      value: document.documentMeta?.timezone ?? 'N/A',
+    },
+  ];
+
+  const formatRecipientText = (recipient: Recipient) => {
+    let text = recipient.email;
+
+    if (recipient.name) {
+      text = `${recipient.name} (${recipient.email})`;
+    }
+
+    return `${text} - ${recipient.role}`;
+  };
+
+  return (
+    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
+      <Link
+        href={`${documentRootPath}/${document.id}`}
+        className="flex items-center text-[#7AC455] hover:opacity-80"
+      >
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        Document
+      </Link>
+
+      <div className="flex flex-col justify-between sm:flex-row">
+        <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
+          {document.title}
+        </h1>
+
+        <div className="mt-4 flex w-full flex-row sm:mt-0 sm:w-auto sm:self-end">
+          <Button variant="outline" className="mr-2 w-full sm:w-auto">
+            <DownloadIcon className="mr-1.5 h-4 w-4" />
+            Download certificate
+          </Button>
+
+          <Button className="w-full sm:w-auto">
+            <DownloadIcon className="mr-1.5 h-4 w-4" />
+            Download PDF
+          </Button>
+        </div>
+      </div>
+
+      <section className="mt-6">
+        <Card className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2" degrees={45} gradient>
+          {documentInformation.map((info, i) => (
+            <div className="text-foreground text-sm" key={i}>
+              <h3 className="font-semibold">{info.description}</h3>
+              <p className="text-muted-foreground">{info.value}</p>
+            </div>
+          ))}
+
+          <div className="text-foreground text-sm">
+            <h3 className="font-semibold">Recipients</h3>
+            <ul className="text-muted-foreground list-inside list-disc">
+              {recipients.map((recipient) => (
+                <li key={`recipient-${recipient.id}`}>
+                  <span className="-ml-2">{formatRecipientText(recipient)}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </Card>
+      </section>
+
+      <section className="mt-6">
+        <DocumentLogsDataTable documentId={document.id} />
+      </section>
+    </div>
+  );
+};
--- a/apps/web/src/app/(dashboard)/documents/[id]/logs/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/logs/page.tsx
@ -0,0 +1,11 @@
+import { DocumentLogsPageView } from './document-logs-page-view';
+
+export type DocumentsLogsPageProps = {
+  params: {
+    id: string;
+  };
+};
+
+export default function DocumentsLogsPage({ params }: DocumentsLogsPageProps) {
+  return <DocumentLogsPageView params={params} />;
+}
--- a/apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx
@ -118,7 +118,7 @@ export const ResendDocumentActionItem = ({

      <DialogContent className="sm:max-w-sm" hideClose>
        <DialogHeader>
-          <DialogTitle>
+          <DialogTitle asChild>
            <h1 className="text-center text-xl">Who do you want to remind?</h1>
          </DialogTitle>
        </DialogHeader>
--- a/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx
@ -94,7 +94,7 @@ export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps)
      isOwner ? { isDraft: true, isOwner: true } : { isDraft: true, isCurrentTeamDocument: true },
      () => (
        <Button className="w-32" asChild>
-          <Link href={`${documentsPath}/${row.id}`}>
+          <Link href={`${documentsPath}/${row.id}/edit`}>
            <Edit className="-ml-1 mr-2 h-4 w-4" />
            Edit
          </Link>
--- a/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx
@ -142,7 +142,7 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
        )}

        <DropdownMenuItem disabled={(!isOwner && !isCurrentTeamDocument) || isComplete} asChild>
-          <Link href={`${documentsPath}/${row.id}`}>
+          <Link href={`${documentsPath}/${row.id}/edit`}>
            <Edit className="mr-2 h-4 w-4" />
            Edit
          </Link>
--- a/apps/web/src/app/(dashboard)/documents/data-table-title.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table-title.tsx
@ -5,16 +5,19 @@ import Link from 'next/link';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';

-import { Document, Recipient, User } from '@documenso/prisma/client';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import type { Document, Recipient, Team, User } from '@documenso/prisma/client';

 export type DataTableTitleProps = {
  row: Document & {
    User: Pick<User, 'id' | 'name' | 'email'>;
+    team: Pick<Team, 'url'> | null;
    Recipient: Recipient[];
  };
+  teamUrl?: string;
 };

-export const DataTableTitle = ({ row }: DataTableTitleProps) => {
+export const DataTableTitle = ({ row, teamUrl }: DataTableTitleProps) => {
  const { data: session } = useSession();

  if (!session) {
@ -25,14 +28,18 @@ export const DataTableTitle = ({ row }: DataTableTitleProps) => {

  const isOwner = row.User.id === session.user.id;
  const isRecipient = !!recipient;
+  const isCurrentTeamDocument = teamUrl && row.team?.url === teamUrl;
+
+  const documentsPath = formatDocumentsPath(isCurrentTeamDocument ? teamUrl : undefined);

  return match({
    isOwner,
    isRecipient,
+    isCurrentTeamDocument,
  })
-    .with({ isOwner: true }, () => (
+    .with({ isOwner: true }, { isCurrentTeamDocument: true }, () => (
      <Link
-        href={`/documents/${row.id}`}
+        href={`${documentsPath}/${row.id}`}
        title={row.title}
        className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]"
      >
--- a/apps/web/src/app/(dashboard)/documents/data-table.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table.tsx
@ -66,7 +66,7 @@ export const DocumentsDataTable = ({
          },
          {
            header: 'Title',
-            cell: ({ row }) => <DataTableTitle row={row.original} />,
+            cell: ({ row }) => <DataTableTitle row={row.original} teamUrl={team?.url} />,
          },
          {
            id: 'sender',
--- a/apps/web/src/app/(dashboard)/documents/duplicate-document-dialog.tsx
+++ b/apps/web/src/app/(dashboard)/documents/duplicate-document-dialog.tsx
@ -47,7 +47,7 @@ export const DuplicateDocumentDialog = ({
  const { mutateAsync: duplicateDocument, isLoading: isDuplicateLoading } =
    trpcReact.document.duplicateDocument.useMutation({
      onSuccess: (newId) => {
-        router.push(`${documentsPath}/${newId}`);
+        router.push(`${documentsPath}/${newId}/edit`);

        toast({
          title: 'Document Duplicated',
--- a/apps/web/src/app/(dashboard)/documents/upload-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/upload-document.tsx
@ -83,7 +83,7 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
        timestamp: new Date().toISOString(),
      });

-      router.push(`${formatDocumentsPath(team?.url)}/${id}`);
+      router.push(`${formatDocumentsPath(team?.url)}/${id}/edit`);
    } catch (error) {
      console.error(error);

--- a/apps/web/src/app/(dashboard)/layout.tsx
+++ b/apps/web/src/app/(dashboard)/layout.tsx
@ -9,6 +9,7 @@ import { NEXT_AUTH_OPTIONS } from '@documenso/lib/next-auth/auth-options';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getTeams } from '@documenso/lib/server-only/team/get-teams';

+import { Banner } from '~/components/(dashboard)/layout/banner';
 import { Header } from '~/components/(dashboard)/layout/header';
 import { VerifyEmailBanner } from '~/components/(dashboard)/layout/verify-email-banner';
 import { RefreshOnFocus } from '~/components/(dashboard)/refresh-on-focus/refresh-on-focus';
@ -37,6 +38,8 @@ export default async function AuthenticatedDashboardLayout({
      <LimitsProvider>
        {!user.emailVerified && <VerifyEmailBanner email={user.email} />}

+        <Banner />
+
        <Header user={user} teams={teams} />

        <main className="mt-8 pb-8 md:mt-12 md:pb-12">{children}</main>
--- a/apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx
+++ b/apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx
@ -0,0 +1,124 @@
+'use client';
+
+import { signOut } from 'next-auth/react';
+
+import type { User } from '@documenso/prisma/client';
+import { TRPCClientError } from '@documenso/trpc/client';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type DeleteAccountDialogProps = {
+  className?: string;
+  user: User;
+};
+
+export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProps) => {
+  const { toast } = useToast();
+
+  const hasTwoFactorAuthentication = user.twoFactorEnabled;
+
+  const { mutateAsync: deleteAccount, isLoading: isDeletingAccount } =
+    trpc.profile.deleteAccount.useMutation();
+
+  const onDeleteAccount = async () => {
+    try {
+      await deleteAccount();
+
+      toast({
+        title: 'Account deleted',
+        description: 'Your account has been deleted successfully.',
+        duration: 5000,
+      });
+
+      return await signOut({ callbackUrl: '/' });
+    } catch (err) {
+      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
+        toast({
+          title: 'An error occurred',
+          description: err.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          description:
+            err.message ??
+            'We encountered an unknown error while attempting to delete your account. Please try again later.',
+        });
+      }
+    }
+  };
+
+  return (
+    <div className={className}>
+      <Alert
+        className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row "
+        variant="neutral"
+      >
+        <div>
+          <AlertTitle>Delete Account</AlertTitle>
+          <AlertDescription className="mr-2">
+            Delete your account and all its contents, including completed documents. This action is
+            irreversible and will cancel your subscription, so proceed with caution.
+          </AlertDescription>
+        </div>
+
+        <div className="flex-shrink-0">
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="destructive">Delete Account</Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader className="space-y-4">
+                <DialogTitle>Delete Account</DialogTitle>
+
+                <Alert variant="destructive">
+                  <AlertDescription className="selection:bg-red-100">
+                    This action is not reversible. Please be certain.
+                  </AlertDescription>
+                </Alert>
+
+                {hasTwoFactorAuthentication && (
+                  <Alert variant="destructive">
+                    <AlertDescription className="selection:bg-red-100">
+                      Disable Two Factor Authentication before deleting your account.
+                    </AlertDescription>
+                  </Alert>
+                )}
+
+                <DialogDescription>
+                  Documenso will delete <span className="font-semibold">all of your documents</span>
+                  , along with all of your completed documents, signatures, and all other resources
+                  belonging to your Account.
+                </DialogDescription>
+              </DialogHeader>
+
+              <DialogFooter>
+                <Button
+                  onClick={onDeleteAccount}
+                  loading={isDeletingAccount}
+                  variant="destructive"
+                  disabled={hasTwoFactorAuthentication}
+                >
+                  {isDeletingAccount ? 'Deleting account...' : 'Delete Account'}
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </Alert>
+    </div>
+  );
+};
--- a/apps/web/src/app/(dashboard)/settings/profile/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/profile/page.tsx
@ -5,6 +5,8 @@ import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
 import { ProfileForm } from '~/components/forms/profile';

+import { DeleteAccountDialog } from './delete-account-dialog';
+
 export const metadata: Metadata = {
  title: 'Profile',
 };
@ -16,7 +18,9 @@ export default async function ProfileSettingsPage() {
    <div>
      <SettingsHeader title="Profile" subtitle="Here you can edit your personal details." />

-      <ProfileForm user={user} className="max-w-xl" />
+      <ProfileForm className="max-w-xl" user={user} />
+
+      <DeleteAccountDialog className="mt-8 max-w-xl" user={user} />
    </div>
  );
 }
--- a/apps/web/src/app/(dashboard)/templates/data-table-templates.tsx
+++ b/apps/web/src/app/(dashboard)/templates/data-table-templates.tsx
@ -76,7 +76,7 @@ export const TemplatesDataTable = ({
        duration: 5000,
      });

-      router.push(`${documentRootPath}/${id}`);
+      router.push(`${documentRootPath}/${id}/edit`);
    } catch (err) {
      toast({
        title: 'Error',
--- a/apps/web/src/app/(signing)/sign/[token]/page.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/page.tsx
@ -29,6 +29,7 @@ import { NameField } from './name-field';
 import { NoLongerAvailable } from './no-longer-available';
 import { SigningProvider } from './provider';
 import { SignatureField } from './signature-field';
+import { TextField } from './text-field';

 export type SigningPageProps = {
  params: {
@ -168,6 +169,9 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
              .with(FieldType.EMAIL, () => (
                <EmailField key={field.id} field={field} recipient={recipient} />
              ))
+              .with(FieldType.TEXT, () => (
+                <TextField key={field.id} field={field} recipient={recipient} />
+              ))
              .otherwise(() => null),
          )}
        </ElementVisible>
--- a/apps/web/src/app/(signing)/sign/[token]/text-field.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/text-field.tsx
@ -0,0 +1,166 @@
+'use client';
+
+import { useEffect, useState, useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Loader } from 'lucide-react';
+
+import type { Recipient } from '@documenso/prisma/client';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { SigningFieldContainer } from './signing-field-container';
+
+export type TextFieldProps = {
+  field: FieldWithSignature;
+  recipient: Recipient;
+};
+
+export const TextField = ({ field, recipient }: TextFieldProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const [isPending, startTransition] = useTransition();
+
+  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation();
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isLoading: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation();
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+
+  const [showCustomTextModal, setShowCustomTextModal] = useState(false);
+  const [localText, setLocalCustomText] = useState('');
+  const [isLocalSignatureSet, setIsLocalSignatureSet] = useState(false);
+
+  useEffect(() => {
+    if (!showCustomTextModal && !isLocalSignatureSet) {
+      setLocalCustomText('');
+    }
+  }, [showCustomTextModal, isLocalSignatureSet]);
+
+  const onSign = async () => {
+    try {
+      if (!localText) {
+        setIsLocalSignatureSet(false);
+        setShowCustomTextModal(true);
+        return;
+      }
+
+      if (!localText) {
+        return;
+      }
+
+      await signFieldWithToken({
+        token: recipient.token,
+        fieldId: field.id,
+        value: localText,
+        isBase64: true,
+      });
+
+      setLocalCustomText('');
+
+      startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while signing the document.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async () => {
+    try {
+      await removeSignedFieldWithToken({
+        token: recipient.token,
+        fieldId: field.id,
+      });
+
+      startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while removing the text.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Signature">
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <p className="group-hover:text-primary text-muted-foreground text-lg duration-200">Text</p>
+      )}
+
+      {field.inserted && <p className="text-muted-foreground duration-200">{field.customText}</p>}
+
+      <Dialog open={showCustomTextModal} onOpenChange={setShowCustomTextModal}>
+        <DialogContent>
+          <DialogTitle>
+            Enter your Text <span className="text-muted-foreground">({recipient.email})</span>
+          </DialogTitle>
+
+          <div className="">
+            <Label htmlFor="custom-text">Custom Text</Label>
+
+            <Input
+              id="custom-text"
+              className="border-border mt-2 w-full rounded-md border"
+              onChange={(e) => setLocalCustomText(e.target.value)}
+            />
+          </div>
+
+          <DialogFooter>
+            <div className="mt-4 flex w-full flex-1 flex-nowrap gap-4">
+              <Button
+                type="button"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1  bg-black/5 hover:bg-black/10"
+                variant="secondary"
+                onClick={() => {
+                  setShowCustomTextModal(false);
+                  setLocalCustomText('');
+                }}
+              >
+                Cancel
+              </Button>
+
+              <Button
+                type="button"
+                className="flex-1"
+                disabled={!localText}
+                onClick={() => {
+                  setShowCustomTextModal(false);
+                  setIsLocalSignatureSet(true);
+                  void onSign();
+                }}
+              >
+                Save Text
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </SigningFieldContainer>
+  );
+};
--- a/apps/web/src/app/(teams)/t/[teamUrl]/documents/[id]/edit/page.tsx
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/documents/[id]/edit/page.tsx
@ -0,0 +1,21 @@
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+
+import { DocumentEditPageView } from '~/app/(dashboard)/documents/[id]/edit/document-edit-page-view';
+
+export type DocumentPageProps = {
+  params: {
+    id: string;
+    teamUrl: string;
+  };
+};
+
+export default async function TeamsDocumentEditPage({ params }: DocumentPageProps) {
+  const { teamUrl } = params;
+
+  const { user } = await getRequiredServerComponentSession();
+
+  const team = await getTeamByUrl({ userId: user.id, teamUrl });
+
+  return <DocumentEditPageView params={params} team={team} />;
+}
--- a/apps/web/src/app/(teams)/t/[teamUrl]/documents/[id]/logs/page.tsx
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/documents/[id]/logs/page.tsx
@ -0,0 +1,20 @@
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+
+import { DocumentLogsPageView } from '~/app/(dashboard)/documents/[id]/logs/document-logs-page-view';
+
+export type TeamDocumentsLogsPageProps = {
+  params: {
+    id: string;
+    teamUrl: string;
+  };
+};
+
+export default async function TeamsDocumentsLogsPage({ params }: TeamDocumentsLogsPageProps) {
+  const { teamUrl } = params;
+
+  const { user } = await getRequiredServerComponentSession();
+  const team = await getTeamByUrl({ userId: user.id, teamUrl });
+
+  return <DocumentLogsPageView params={params} team={team} />;
+}
--- a/apps/web/src/components/(dashboard)/layout/banner.tsx
+++ b/apps/web/src/components/(dashboard)/layout/banner.tsx
@ -0,0 +1,29 @@
+import { getSiteSettings } from '@documenso/lib/server-only/site-settings/get-site-settings';
+import { SITE_SETTINGS_BANNER_ID } from '@documenso/lib/server-only/site-settings/schemas/banner';
+
+export const Banner = async () => {
+  const banner = await getSiteSettings().then((settings) =>
+    settings.find((setting) => setting.id === SITE_SETTINGS_BANNER_ID),
+  );
+
+  return (
+    <>
+      {banner && banner.enabled && (
+        <div className="mb-2" style={{ background: banner.data.bgColor }}>
+          <div
+            className="mx-auto flex h-auto max-w-screen-xl items-center justify-center px-4 py-3 text-sm font-medium"
+            style={{ color: banner.data.textColor }}
+          >
+            <div className="flex items-center">
+              <span dangerouslySetInnerHTML={{ __html: banner.data.content }} />
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+// Banner
+// Custom Text
+// Custom Text with Custom Icon
--- a/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
+++ b/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
@ -166,22 +166,24 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
              </div>
            </DropdownMenuLabel>

-            {teams.map((team) => (
-              <DropdownMenuItem asChild key={team.id}>
-                <Link href={formatRedirectUrlOnSwitch(team.url)}>
-                  <AvatarWithText
-                    avatarFallback={formatAvatarFallback(team.name)}
-                    primaryText={team.name}
-                    secondaryText={formatSecondaryAvatarText(team)}
-                    rightSideComponent={
-                      isPathTeamUrl(team.url) && (
-                        <CheckCircle2 className="ml-auto fill-black text-white dark:fill-white dark:text-black" />
-                      )
-                    }
-                  />
-                </Link>
-              </DropdownMenuItem>
-            ))}
+            <div className="custom-scrollbar max-h-[40vh] overflow-auto">
+              {teams.map((team) => (
+                <DropdownMenuItem asChild key={team.id}>
+                  <Link href={formatRedirectUrlOnSwitch(team.url)}>
+                    <AvatarWithText
+                      avatarFallback={formatAvatarFallback(team.name)}
+                      primaryText={team.name}
+                      secondaryText={formatSecondaryAvatarText(team)}
+                      rightSideComponent={
+                        isPathTeamUrl(team.url) && (
+                          <CheckCircle2 className="ml-auto fill-black text-white dark:fill-white dark:text-black" />
+                        )
+                      }
+                    />
+                  </Link>
+                </DropdownMenuItem>
+              ))}
+            </div>
          </>
        ) : (
          <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
--- a/apps/web/src/components/document/document-history-sheet-changes.tsx
+++ b/apps/web/src/components/document/document-history-sheet-changes.tsx
@ -0,0 +1,28 @@
+'use client';
+
+import React from 'react';
+
+import { Badge } from '@documenso/ui/primitives/badge';
+
+export type DocumentHistorySheetChangesProps = {
+  values: {
+    key: string | React.ReactNode;
+    value: string | React.ReactNode;
+  }[];
+};
+
+export const DocumentHistorySheetChanges = ({ values }: DocumentHistorySheetChangesProps) => {
+  return (
+    <Badge
+      className="text-muted-foreground mt-3 block w-full space-y-0.5 text-xs"
+      variant="neutral"
+    >
+      {values.map(({ key, value }, i) => (
+        <p key={typeof key === 'string' ? key : i}>
+          <span>{key}: </span>
+          <span className="font-normal">{value}</span>
+        </p>
+      ))}
+    </Badge>
+  );
+};
--- a/apps/web/src/components/document/document-history-sheet.tsx
+++ b/apps/web/src/components/document/document-history-sheet.tsx
@ -0,0 +1,318 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+import { ArrowRightIcon, Loader } from 'lucide-react';
+import { match } from 'ts-pattern';
+import { UAParser } from 'ua-parser-js';
+
+import { DOCUMENT_AUDIT_LOG_EMAIL_FORMAT } from '@documenso/lib/constants/document-audit-logs';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import { formatDocumentAuditLogActionString } from '@documenso/lib/utils/document-audit-logs';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+import { Sheet, SheetContent, SheetTrigger } from '@documenso/ui/primitives/sheet';
+
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+import { DocumentHistorySheetChanges } from './document-history-sheet-changes';
+
+export type DocumentHistorySheetProps = {
+  documentId: number;
+  userId: number;
+  isMenuOpen?: boolean;
+  onMenuOpenChange?: (_value: boolean) => void;
+  children?: React.ReactNode;
+};
+
+export const DocumentHistorySheet = ({
+  documentId,
+  userId,
+  isMenuOpen,
+  onMenuOpenChange,
+  children,
+}: DocumentHistorySheetProps) => {
+  const [isUserDetailsVisible, setIsUserDetailsVisible] = useState(false);
+
+  const {
+    data,
+    isLoading,
+    isLoadingError,
+    refetch,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = trpc.document.findDocumentAuditLogs.useInfiniteQuery(
+    {
+      documentId,
+    },
+    {
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+      keepPreviousData: true,
+    },
+  );
+
+  const documentAuditLogs = useMemo(() => (data?.pages ?? []).flatMap((page) => page.data), [data]);
+
+  const extractBrowser = (userAgent?: string | null) => {
+    if (!userAgent) {
+      return 'Unknown';
+    }
+
+    const parser = new UAParser(userAgent);
+
+    parser.setUA(userAgent);
+
+    const result = parser.getResult();
+
+    return result.browser.name;
+  };
+
+  /**
+   * Applies the following formatting for a given text:
+   * - Uppercase first lower, lowercase rest
+   * - Replace _ with spaces
+   *
+   * @param text The text to format
+   * @returns The formatted text
+   */
+  const formatGenericText = (text: string) => {
+    return (text.charAt(0).toUpperCase() + text.slice(1).toLowerCase()).replaceAll('_', ' ');
+  };
+
+  return (
+    <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
+      {children && <SheetTrigger asChild>{children}</SheetTrigger>}
+
+      <SheetContent
+        sheetClass="backdrop-blur-none"
+        className="flex w-full max-w-[500px] flex-col overflow-y-auto p-0"
+      >
+        <div className="text-foreground px-6 pt-6">
+          <h1 className="text-lg font-medium">Document history</h1>
+          <button
+            className="text-muted-foreground text-sm"
+            onClick={() => setIsUserDetailsVisible(!isUserDetailsVisible)}
+          >
+            {isUserDetailsVisible ? 'Hide' : 'Show'} additional information
+          </button>
+        </div>
+
+        {isLoading && (
+          <div className="flex h-full items-center justify-center">
+            <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+          </div>
+        )}
+
+        {isLoadingError && (
+          <div className="flex h-full flex-col items-center justify-center">
+            <p className="text-foreground/80 text-sm">Unable to load document history</p>
+            <button
+              onClick={async () => refetch()}
+              className="text-foreground/70 hover:text-muted-foreground mt-2 text-sm"
+            >
+              Click here to retry
+            </button>
+          </div>
+        )}
+
+        {data && (
+          <ul
+            className={cn('divide-y border-t', {
+              'mb-4 border-b': !hasNextPage,
+            })}
+          >
+            {documentAuditLogs.map((auditLog) => (
+              <li className="px-4 py-2.5" key={auditLog.id}>
+                <div className="flex flex-row items-center">
+                  <Avatar className="mr-2 h-9 w-9">
+                    <AvatarFallback className="text-xs text-gray-400">
+                      {(auditLog?.email ?? auditLog?.name ?? '?').slice(0, 1).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+
+                  <div>
+                    <p className="text-foreground text-xs font-bold">
+                      {formatDocumentAuditLogActionString(auditLog, userId)}
+                    </p>
+                    <p className="text-foreground/50 text-xs">
+                      <LocaleDate date={auditLog.createdAt} format="d MMM, yyyy HH:MM a" />
+                    </p>
+                  </div>
+                </div>
+
+                {match(auditLog)
+                  .with(
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_CREATED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_COMPLETED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_DELETED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_SENT },
+                    () => null,
+                  )
+                  .with(
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_CREATED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_DELETED },
+                    ({ data }) => {
+                      const values = [
+                        {
+                          key: 'Email',
+                          value: data.recipientEmail,
+                        },
+                        {
+                          key: 'Role',
+                          value: formatGenericText(data.recipientRole),
+                        },
+                      ];
+
+                      // Insert the name to the start of the array if available.
+                      if (data.recipientName) {
+                        values.unshift({
+                          key: 'Name',
+                          value: data.recipientName,
+                        });
+                      }
+
+                      return <DocumentHistorySheetChanges values={values} />;
+                    },
+                  )
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_UPDATED }, ({ data }) => {
+                    if (data.changes.length === 0) {
+                      return null;
+                    }
+
+                    return (
+                      <DocumentHistorySheetChanges
+                        values={data.changes.map(({ type, from, to }) => ({
+                          key: formatGenericText(type),
+                          value: (
+                            <span className="inline-flex flex-row items-center">
+                              <span>{type === 'ROLE' ? formatGenericText(from) : from}</span>
+                              <ArrowRightIcon className="h-4 w-4" />
+                              <span>{type === 'ROLE' ? formatGenericText(to) : to}</span>
+                            </span>
+                          ),
+                        }))}
+                      />
+                    );
+                  })
+                  .with(
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_CREATED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_DELETED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_UPDATED },
+                    ({ data }) => (
+                      <DocumentHistorySheetChanges
+                        values={[
+                          {
+                            key: 'Field',
+                            value: formatGenericText(data.fieldType),
+                          },
+                          {
+                            key: 'Recipient',
+                            value: formatGenericText(data.fieldRecipientEmail),
+                          },
+                        ]}
+                      />
+                    ),
+                  )
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_META_UPDATED }, ({ data }) => {
+                    if (data.changes.length === 0) {
+                      return null;
+                    }
+
+                    return (
+                      <DocumentHistorySheetChanges
+                        values={data.changes.map((change) => ({
+                          key: formatGenericText(change.type),
+                          value: change.type === 'PASSWORD' ? '*********' : change.to,
+                        }))}
+                      />
+                    );
+                  })
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_TITLE_UPDATED }, ({ data }) => (
+                    <DocumentHistorySheetChanges
+                      values={[
+                        {
+                          key: 'Old',
+                          value: data.from,
+                        },
+                        {
+                          key: 'New',
+                          value: data.to,
+                        },
+                      ]}
+                    />
+                  ))
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_INSERTED }, ({ data }) => (
+                    <DocumentHistorySheetChanges
+                      values={[
+                        {
+                          key: 'Field inserted',
+                          value: formatGenericText(data.field.type),
+                        },
+                      ]}
+                    />
+                  ))
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_UNINSERTED }, ({ data }) => (
+                    <DocumentHistorySheetChanges
+                      values={[
+                        {
+                          key: 'Field uninserted',
+                          value: formatGenericText(data.field),
+                        },
+                      ]}
+                    />
+                  ))
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT }, ({ data }) => (
+                    <DocumentHistorySheetChanges
+                      values={[
+                        {
+                          key: 'Type',
+                          value: DOCUMENT_AUDIT_LOG_EMAIL_FORMAT[data.emailType].description,
+                        },
+                        {
+                          key: 'Sent to',
+                          value: data.recipientEmail,
+                        },
+                      ]}
+                    />
+                  ))
+                  .exhaustive()}
+
+                {isUserDetailsVisible && (
+                  <>
+                    <div className="mb-1 mt-2 flex flex-row space-x-2">
+                      <Badge variant="neutral" className="text-muted-foreground">
+                        IP: {auditLog.ipAddress ?? 'Unknown'}
+                      </Badge>
+
+                      <Badge variant="neutral" className="text-muted-foreground">
+                        Browser: {extractBrowser(auditLog.userAgent)}
+                      </Badge>
+                    </div>
+                  </>
+                )}
+              </li>
+            ))}
+
+            {hasNextPage && (
+              <div className="flex items-center justify-center py-4">
+                <Button
+                  variant="outline"
+                  loading={isFetchingNextPage}
+                  onClick={async () => fetchNextPage()}
+                >
+                  Show more
+                </Button>
+              </div>
+            )}
+          </ul>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+};
--- a/apps/web/src/components/formatter/document-status.tsx
+++ b/apps/web/src/components/formatter/document-status.tsx
@ -13,7 +13,7 @@ type FriendlyStatus = {
  color: string;
 };

-const FRIENDLY_STATUS_MAP: Record<ExtendedDocumentStatus, FriendlyStatus> = {
+export const FRIENDLY_STATUS_MAP: Record<ExtendedDocumentStatus, FriendlyStatus> = {
  PENDING: {
    label: 'Pending',
    icon: Clock,
--- a/apps/web/src/components/formatter/locale-date.tsx
+++ b/apps/web/src/components/formatter/locale-date.tsx
@ -1,7 +1,7 @@
 'use client';

 import type { HTMLAttributes } from 'react';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';

 import type { DateTimeFormatOptions } from 'luxon';
 import { DateTime } from 'luxon';
@ -10,7 +10,7 @@ import { useLocale } from '@documenso/lib/client-only/providers/locale';

 export type LocaleDateProps = HTMLAttributes<HTMLSpanElement> & {
  date: string | number | Date;
-  format?: DateTimeFormatOptions;
+  format?: DateTimeFormatOptions | string;
 };

 /**
@ -22,13 +22,24 @@ export type LocaleDateProps = HTMLAttributes<HTMLSpanElement> & {
 export const LocaleDate = ({ className, date, format, ...props }: LocaleDateProps) => {
  const { locale } = useLocale();

+  const formatDateTime = useCallback(
+    (date: DateTime) => {
+      if (typeof format === 'string') {
+        return date.toFormat(format);
+      }
+
+      return date.toLocaleString(format);
+    },
+    [format],
+  );
+
  const [localeDate, setLocaleDate] = useState(() =>
-    DateTime.fromJSDate(new Date(date)).setLocale(locale).toLocaleString(format),
+    formatDateTime(DateTime.fromJSDate(new Date(date)).setLocale(locale)),
  );

  useEffect(() => {
-    setLocaleDate(DateTime.fromJSDate(new Date(date)).toLocaleString(format));
-  }, [date, format]);
+    setLocaleDate(formatDateTime(DateTime.fromJSDate(new Date(date))));
+  }, [date, format, formatDateTime]);

  return (
    <span className={className} {...props}>
--- a/apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx
+++ b/apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx
@ -1,14 +1,12 @@
 import { useMemo } from 'react';

-import { useRouter } from 'next/navigation';
-
 import { zodResolver } from '@hookform/resolvers/zod';
-import { flushSync } from 'react-dom';
 import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 import { renderSVG } from 'uqr';
 import { z } from 'zod';

+import { downloadFile } from '@documenso/lib/client-only/download-file';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@ -54,14 +52,16 @@ export const EnableAuthenticatorAppDialog = ({
  open,
  onOpenChange,
 }: EnableAuthenticatorAppDialogProps) => {
-  const router = useRouter();
  const { toast } = useToast();

  const { mutateAsync: setupTwoFactorAuthentication, data: setupTwoFactorAuthenticationData } =
    trpc.twoFactorAuthentication.setup.useMutation();

-  const { mutateAsync: enableTwoFactorAuthentication, data: enableTwoFactorAuthenticationData } =
-    trpc.twoFactorAuthentication.enable.useMutation();
+  const {
+    mutateAsync: enableTwoFactorAuthentication,
+    data: enableTwoFactorAuthenticationData,
+    isLoading: isEnableTwoFactorAuthenticationDataLoading,
+  } = trpc.twoFactorAuthentication.enable.useMutation();

  const setupTwoFactorAuthenticationForm = useForm<TSetupTwoFactorAuthenticationForm>({
    defaultValues: {
@ -115,6 +115,19 @@ export const EnableAuthenticatorAppDialog = ({
    }
  };

+  const downloadRecoveryCodes = () => {
+    if (enableTwoFactorAuthenticationData && enableTwoFactorAuthenticationData.recoveryCodes) {
+      const blob = new Blob([enableTwoFactorAuthenticationData.recoveryCodes.join('\n')], {
+        type: 'text/plain',
+      });
+
+      downloadFile({
+        filename: 'documenso-2FA-recovery-codes.txt',
+        data: blob,
+      });
+    }
+  };
+
  const onEnableTwoFactorAuthenticationFormSubmit = async ({
    token,
  }: TEnableTwoFactorAuthenticationForm) => {
@ -136,14 +149,6 @@ export const EnableAuthenticatorAppDialog = ({
    }
  };

-  const onCompleteClick = () => {
-    flushSync(() => {
-      onOpenChange(false);
-    });
-
-    router.refresh();
-  };
-
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">
@ -270,9 +275,16 @@ export const EnableAuthenticatorAppDialog = ({
                <RecoveryCodeList recoveryCodes={enableTwoFactorAuthenticationData.recoveryCodes} />
              )}

-              <div className="mt-4 flex w-full flex-row-reverse items-center justify-between">
-                <Button type="button" onClick={() => onCompleteClick()}>
-                  Complete
+              <div className="mt-4 flex flex-row-reverse items-center gap-2">
+                <Button onClick={() => onOpenChange(false)}>Complete</Button>
+
+                <Button
+                  variant="secondary"
+                  onClick={downloadRecoveryCodes}
+                  disabled={!enableTwoFactorAuthenticationData?.recoveryCodes}
+                  loading={isEnableTwoFactorAuthenticationDataLoading}
+                >
+                  Download
                </Button>
              </div>
            </div>
--- a/apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx
+++ b/apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx
@ -5,6 +5,7 @@ import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 import { z } from 'zod';

+import { downloadFile } from '@documenso/lib/client-only/download-file';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@ -42,8 +43,11 @@ export type ViewRecoveryCodesDialogProps = {
 export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCodesDialogProps) => {
  const { toast } = useToast();

-  const { mutateAsync: viewRecoveryCodes, data: viewRecoveryCodesData } =
-    trpc.twoFactorAuthentication.viewRecoveryCodes.useMutation();
+  const {
+    mutateAsync: viewRecoveryCodes,
+    data: viewRecoveryCodesData,
+    isLoading: isViewRecoveryCodesDataLoading,
+  } = trpc.twoFactorAuthentication.viewRecoveryCodes.useMutation();

  const viewRecoveryCodesForm = useForm<TViewRecoveryCodesForm>({
    defaultValues: {
@ -62,6 +66,19 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
    return 'view';
  }, [viewRecoveryCodesData, isViewRecoveryCodesSubmitting]);

+  const downloadRecoveryCodes = () => {
+    if (viewRecoveryCodesData && viewRecoveryCodesData.recoveryCodes) {
+      const blob = new Blob([viewRecoveryCodesData.recoveryCodes.join('\n')], {
+        type: 'text/plain',
+      });
+
+      downloadFile({
+        filename: 'documenso-2FA-recovery-codes.txt',
+        data: blob,
+      });
+    }
+  };
+
  const onViewRecoveryCodesFormSubmit = async ({ password }: TViewRecoveryCodesForm) => {
    try {
      await viewRecoveryCodes({ password });
@ -139,8 +156,17 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
                <RecoveryCodeList recoveryCodes={viewRecoveryCodesData.recoveryCodes} />
              )}

-              <div className="mt-4 flex flex-row-reverse items-center justify-between">
+              <div className="mt-4 flex flex-row-reverse items-center gap-2">
                <Button onClick={() => onOpenChange(false)}>Complete</Button>
+
+                <Button
+                  variant="secondary"
+                  disabled={!viewRecoveryCodesData?.recoveryCodes}
+                  loading={isViewRecoveryCodesDataLoading}
+                  onClick={downloadRecoveryCodes}
+                >
+                  Download
+                </Button>
              </div>
            </div>
          ))
--- a/apps/web/src/components/forms/profile.tsx
+++ b/apps/web/src/components/forms/profile.tsx
@ -29,6 +29,11 @@ export const ZProfileFormSchema = z.object({
  signature: z.string().min(1, 'Signature Pad cannot be empty'),
 });

+export const ZTwoFactorAuthTokenSchema = z.object({
+  token: z.string(),
+});
+
+export type TTwoFactorAuthTokenSchema = z.infer<typeof ZTwoFactorAuthTokenSchema>;
 export type TProfileFormSchema = z.infer<typeof ZProfileFormSchema>;

 export type ProfileFormProps = {
@ -50,8 +55,11 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
  });

  const isSubmitting = form.formState.isSubmitting;
+  const hasTwoFactorAuthentication = user.twoFactorEnabled;

  const { mutateAsync: updateProfile } = trpc.profile.updateProfile.useMutation();
+  const { mutateAsync: deleteAccount, isLoading: isDeletingAccount } =
+    trpc.profile.deleteAccount.useMutation();

  const onFormSubmit = async ({ name, signature }: TProfileFormSchema) => {
    try {
@ -133,7 +141,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
          />
        </fieldset>

-        <Button type="submit" loading={isSubmitting}>
+        <Button type="submit" loading={isSubmitting} className="self-end">
          {isSubmitting ? 'Updating profile...' : 'Update profile'}
        </Button>
      </form>