From f5930dc934ae99bab826a12b80b8e566215bf125 Mon Sep 17 00:00:00 2001
From: Sumit Bisht <75713174+sumitbishti@users.noreply.github.com>
Date: Mon, 5 Feb 2024 07:20:35 +0530
Subject: [PATCH 1/6] perf: mentioned type and size of the doc to be uploaded
 (#867)

explicitly mentioned "PDF" to upload, and added a toast if pdf size is
greater than 50mb

fixes: #621
---
 .env.example                                         |  2 ++
 .../app/(dashboard)/documents/upload-document.tsx    | 11 +++++++++++
 packages/lib/constants/app.ts                        |  3 +++
 packages/ui/primitives/document-dropzone.tsx         | 12 ++++++++++--
 turbo.json                                           |  1 +
 5 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/.env.example b/.env.example
index f21560ca3..c482c128e 100644
--- a/.env.example
+++ b/.env.example
@@ -74,6 +74,8 @@ NEXT_PRIVATE_MAILCHANNELS_DKIM_DOMAIN=
 NEXT_PRIVATE_MAILCHANNELS_DKIM_SELECTOR=
 # OPTIONAL: The private key to use for DKIM signing.
 NEXT_PRIVATE_MAILCHANNELS_DKIM_PRIVATE_KEY=
+# OPTIONAL: Displays the maximum document upload limit to the user in MBs
+NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT=5
 
 # [[STRIPE]]
 NEXT_PRIVATE_STRIPE_API_KEY=
diff --git a/apps/web/src/app/(dashboard)/documents/upload-document.tsx b/apps/web/src/app/(dashboard)/documents/upload-document.tsx
index 65b95f9ec..444bd1db0 100644
--- a/apps/web/src/app/(dashboard)/documents/upload-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/upload-document.tsx
@@ -10,6 +10,7 @@ import { useSession } from 'next-auth/react';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
 import { putFile } from '@documenso/lib/universal/upload/put-file';
 import { TRPCClientError } from '@documenso/trpc/client';
@@ -96,6 +97,15 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
     }
   };
 
+  const onFileDropRejected = () => {
+    toast({
+      title: 'Your document failed to upload.',
+      description: `File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`,
+      duration: 5000,
+      variant: 'destructive',
+    });
+  };
+
   return (
     <div className={cn('relative', className)}>
       <DocumentDropzone
@@ -103,6 +113,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
         disabled={remaining.documents === 0 || !session?.user.emailVerified}
         disabledMessage={disabledMessage}
         onDrop={onFileDrop}
+        onDropRejected={onFileDropRejected}
       />
 
       <div className="absolute -bottom-6 right-0">
diff --git a/packages/lib/constants/app.ts b/packages/lib/constants/app.ts
index 827fcef0a..a19d2bb0d 100644
--- a/packages/lib/constants/app.ts
+++ b/packages/lib/constants/app.ts
@@ -6,3 +6,6 @@ export const APP_FOLDER = IS_APP_MARKETING ? 'marketing' : 'web';
 export const APP_BASE_URL = IS_APP_WEB
   ? process.env.NEXT_PUBLIC_WEBAPP_URL
   : process.env.NEXT_PUBLIC_MARKETING_URL;
+
+export const APP_DOCUMENT_UPLOAD_SIZE_LIMIT =
+  Number(process.env.NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT) || 50;
diff --git a/packages/ui/primitives/document-dropzone.tsx b/packages/ui/primitives/document-dropzone.tsx
index 21337956d..6caf6d040 100644
--- a/packages/ui/primitives/document-dropzone.tsx
+++ b/packages/ui/primitives/document-dropzone.tsx
@@ -5,6 +5,7 @@ import { motion } from 'framer-motion';
 import { Plus } from 'lucide-react';
 import { useDropzone } from 'react-dropzone';
 
+import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
 
 import { cn } from '../lib/utils';
@@ -89,6 +90,7 @@ export type DocumentDropzoneProps = {
   disabled?: boolean;
   disabledMessage?: string;
   onDrop?: (_file: File) => void | Promise<void>;
+  onDropRejected?: () => void | Promise<void>;
   type?: 'document' | 'template';
   [key: string]: unknown;
 };
@@ -96,6 +98,7 @@ export type DocumentDropzoneProps = {
 export const DocumentDropzone = ({
   className,
   onDrop,
+  onDropRejected,
   disabled,
   disabledMessage = 'You cannot upload documents at this time.',
   type = 'document',
@@ -112,7 +115,12 @@ export const DocumentDropzone = ({
         void onDrop(acceptedFile);
       }
     },
-    maxSize: megabytesToBytes(50),
+    onDropRejected: () => {
+      if (onDropRejected) {
+        void onDropRejected();
+      }
+    },
+    maxSize: megabytesToBytes(APP_DOCUMENT_UPLOAD_SIZE_LIMIT),
   });
 
   return (
@@ -175,7 +183,7 @@ export const DocumentDropzone = ({
           </p>
 
           <p className="text-muted-foreground/80 mt-1 text-sm">
-            {disabled ? disabledMessage : 'Drag & drop your document here.'}
+            {disabled ? disabledMessage : 'Drag & drop your PDF here.'}
           </p>
         </CardContent>
       </Card>
diff --git a/turbo.json b/turbo.json
index b78d7c9d0..b0a7a0fc6 100644
--- a/turbo.json
+++ b/turbo.json
@@ -45,6 +45,7 @@
     "NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID",
     "NEXT_PUBLIC_STRIPE_FREE_PLAN_ID",
     "NEXT_PUBLIC_DISABLE_SIGNUP",
+    "NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT",
     "NEXT_PRIVATE_DATABASE_URL",
     "NEXT_PRIVATE_DIRECT_DATABASE_URL",
     "NEXT_PRIVATE_GOOGLE_CLIENT_ID",

From c6457e75e068084feabdc6f735ad01533c59998c Mon Sep 17 00:00:00 2001
From: Catalin Pit <25515812+catalinpit@users.noreply.github.com>
Date: Mon, 5 Feb 2024 05:17:01 +0200
Subject: [PATCH 2/6] feat: migration for verifying paid users (#889)

---
 .../20240131132916_verify_paid_users/migration.sql          | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 packages/prisma/migrations/20240131132916_verify_paid_users/migration.sql

diff --git a/packages/prisma/migrations/20240131132916_verify_paid_users/migration.sql b/packages/prisma/migrations/20240131132916_verify_paid_users/migration.sql
new file mode 100644
index 000000000..993f103f0
--- /dev/null
+++ b/packages/prisma/migrations/20240131132916_verify_paid_users/migration.sql
@@ -0,0 +1,6 @@
+UPDATE "User"
+SET "emailVerified" = NOW()
+FROM "Subscription"
+WHERE "User"."id" = "Subscription"."userId"
+AND "Subscription"."status" = 'ACTIVE'
+AND "User"."emailVerified" IS NULL

From 0c339b78b65a63c8e9ca52a92266001fb394f183 Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Tue, 6 Feb 2024 16:16:10 +1100
Subject: [PATCH 3/6] feat: add teams (#848)

## Description

Add support for teams which will allow users to collaborate on
documents.

Teams features allows users to:

- Create, manage and transfer teams
- Manage team members
- Manage team emails
- Manage a shared team inbox and documents

These changes do NOT include the following, which are planned for a
future release:

- Team templates
- Team API
- Search menu integration

## Testing Performed

- Added E2E tests for general team management
- Added E2E tests to validate document counts

## Checklist

- [X] I have tested these changes locally and they work as expected.
- [X] I have added/updated tests that prove the effectiveness of these
changes.
- [ ] I have updated the documentation to reflect these changes, if
applicable.
- [X] I have followed the project's coding style guidelines.
---
 apps/web/public/static/add-user.png           | Bin 0 -> 3361 bytes
 apps/web/public/static/mail-open-alert.png    | Bin 0 -> 3818 bytes
 apps/web/public/static/mail-open.png          | Bin 0 -> 3839 bytes
 .../admin/documents/data-table.tsx            |   8 +-
 .../users/[id]/multiselect-role-combobox.tsx  |   4 +-
 .../app/(dashboard)/admin/users/[id]/page.tsx |   5 +-
 .../src/app/(dashboard)/admin/users/page.tsx  |   5 +-
 .../documents/[id]/document-page-view.tsx     | 131 +++++
 .../documents/[id]/edit-document.tsx          |   4 +-
 .../app/(dashboard)/documents/[id]/page.tsx   | 119 +---
 .../_action-items/resend-document.tsx         |  12 +-
 .../documents/data-table-action-button.tsx    |  31 +-
 .../documents/data-table-action-dropdown.tsx  |  18 +-
 .../documents/data-table-sender-filter.tsx    |  63 +++
 .../app/(dashboard)/documents/data-table.tsx  |  23 +-
 .../documents/documents-page-view.tsx         | 158 ++++++
 .../documents/duplicate-document-dialog.tsx   |  11 +-
 .../src/app/(dashboard)/documents/page.tsx    | 113 +---
 .../(dashboard)/documents/upload-document.tsx |  30 +-
 apps/web/src/app/(dashboard)/layout.tsx       |   9 +-
 .../billing/billing-portal-button.tsx         |  12 +-
 .../app/(dashboard)/settings/billing/page.tsx |  19 +-
 .../app/(dashboard)/settings/profile/page.tsx |   7 +-
 .../(dashboard)/settings/security/page.tsx    |  12 +-
 .../teams/accept-team-invitation-button.tsx   |  45 ++
 .../app/(dashboard)/settings/teams/page.tsx   |  39 ++
 .../settings/teams/team-email-usage.tsx       | 105 ++++
 .../settings/teams/team-invitations.tsx       |  83 +++
 .../templates/data-table-templates.tsx        |   2 +-
 .../src/app/(signing)/sign/[token]/layout.tsx |  10 +-
 .../t/[teamUrl]/documents/[id]/page.tsx       |  20 +
 .../(teams)/t/[teamUrl]/documents/page.tsx    |  25 +
 .../web/src/app/(teams)/t/[teamUrl]/error.tsx |  54 ++
 .../t/[teamUrl]/layout-billing-banner.tsx     | 130 +++++
 .../src/app/(teams)/t/[teamUrl]/layout.tsx    |  65 +++
 .../src/app/(teams)/t/[teamUrl]/not-found.tsx |  32 ++
 .../t/[teamUrl]/settings/billing/page.tsx     |  84 +++
 .../(teams)/t/[teamUrl]/settings/layout.tsx   |  54 ++
 .../t/[teamUrl]/settings/members/page.tsx     |  38 ++
 .../app/(teams)/t/[teamUrl]/settings/page.tsx | 186 +++++++
 .../settings/team-email-dropdown.tsx          | 143 +++++
 .../settings/team-transfer-status.tsx         | 115 ++++
 .../src/app/(unauthenticated)/signin/page.tsx |  23 +-
 .../src/app/(unauthenticated)/signup/page.tsx |  22 +-
 .../team/invite/[token]/page.tsx              | 121 +++++
 .../team/verify/email/[token]/page.tsx        |  89 +++
 .../team/verify/transfer/[token]/page.tsx     |  80 +++
 .../(dashboard)/common/command-menu.tsx       |  17 +-
 .../(dashboard)/layout/desktop-nav.tsx        |  38 +-
 .../components/(dashboard)/layout/header.tsx  |  44 +-
 .../(dashboard)/layout/menu-switcher.tsx      | 214 ++++++++
 .../(dashboard)/layout/mobile-nav.tsx         |   0
 .../(dashboard)/layout/mobile-navigation.tsx  |  96 ++++
 .../(dashboard)/layout/profile-dropdown.tsx   | 169 ------
 .../period-selector/period-selector.tsx       |   8 +-
 .../settings/layout/desktop-nav.tsx           |  17 +-
 .../(dashboard)/settings/layout/header.tsx    |  25 +
 .../settings/layout/mobile-nav.tsx            |  17 +-
 .../(teams)/dialogs/add-team-email-dialog.tsx | 188 +++++++
 .../dialogs/create-team-checkout-dialog.tsx   | 177 ++++++
 .../(teams)/dialogs/create-team-dialog.tsx    | 223 ++++++++
 .../(teams)/dialogs/delete-team-dialog.tsx    | 160 ++++++
 .../dialogs/delete-team-member-dialog.tsx     | 107 ++++
 .../dialogs/invite-team-member-dialog.tsx     | 244 +++++++++
 .../(teams)/dialogs/leave-team-dialog.tsx     |  98 ++++
 .../(teams)/dialogs/transfer-team-dialog.tsx  | 293 ++++++++++
 .../dialogs/update-team-email-dialog.tsx      | 165 ++++++
 .../dialogs/update-team-member-dialog.tsx     | 185 +++++++
 .../(teams)/forms/update-team-form.tsx        | 173 ++++++
 .../(teams)/settings/layout/desktop-nav.tsx   |  67 +++
 .../(teams)/settings/layout/mobile-nav.tsx    |  75 +++
 .../tables/current-user-teams-data-table.tsx  | 158 ++++++
 .../pending-user-teams-data-table-actions.tsx |  53 ++
 .../tables/pending-user-teams-data-table.tsx  | 145 +++++
 .../team-billing-invoices-data-table.tsx      | 152 ++++++
 .../tables/team-member-invites-data-table.tsx | 203 +++++++
 .../tables/team-members-data-table.tsx        | 209 +++++++
 .../tables/teams-member-page-data-table.tsx   |  93 ++++
 .../user-settings-teams-page-data-table.tsx   |  83 +++
 .../(teams)/team-billing-portal-button.tsx    |  39 ++
 apps/web/src/components/forms/signin.tsx      |   5 +-
 apps/web/src/components/forms/signup.tsx      |   5 +-
 apps/web/src/middleware.ts                    |  81 ++-
 package-lock.json                             | 133 +----
 .../app-tests/e2e/fixtures/authentication.ts  |  40 ++
 .../e2e/pr-711-deletion-of-documents.spec.ts  |  65 +--
 ...dd-document-search-to-command-menu.spec.ts |  18 -
 .../app-tests/e2e/teams/manage-team.spec.ts   |  87 +++
 .../e2e/teams/team-documents.spec.ts          | 282 ++++++++++
 .../app-tests/e2e/teams/team-email.spec.ts    | 102 ++++
 .../app-tests/e2e/teams/team-members.spec.ts  | 110 ++++
 .../app-tests/e2e/teams/transfer-team.spec.ts |  69 +++
 packages/app-tests/e2e/test-auth-flow.spec.ts |   2 +-
 packages/ee/server-only/limits/client.ts      |  10 +-
 packages/ee/server-only/limits/constants.ts   |   7 +-
 packages/ee/server-only/limits/handler.ts     |  18 +-
 .../ee/server-only/limits/provider/client.tsx |  17 +-
 .../ee/server-only/limits/provider/server.tsx |  12 +-
 packages/ee/server-only/limits/server.ts      |  74 ++-
 .../stripe/create-team-customer.ts            |  20 +
 .../stripe/delete-customer-payment-methods.ts |  22 +
 .../stripe/get-checkout-session.ts            |   7 +
 .../stripe/get-community-plan-prices.ts       |  13 +
 .../ee/server-only/stripe/get-customer.ts     |  15 +-
 .../ee/server-only/stripe/get-invoices.ts     |  11 +
 .../server-only/stripe/get-portal-session.ts  |   2 +-
 .../stripe/get-prices-by-interval.ts          |   8 +-
 .../server-only/stripe/get-prices-by-plan.ts  |  14 +
 .../server-only/stripe/get-prices-by-type.ts  |  11 -
 .../ee/server-only/stripe/get-team-prices.ts  |  43 ++
 .../stripe/transfer-team-subscription.ts      | 126 +++++
 .../ee/server-only/stripe/update-customer.ts  |  18 +
 .../update-subscription-item-quantity.ts      |  44 ++
 .../ee/server-only/stripe/webhook/handler.ts  | 115 +++-
 .../stripe/webhook/on-subscription-updated.ts |  26 +-
 packages/email/static/add-user.png            | Bin 0 -> 3361 bytes
 packages/email/static/mail-open-alert.png     | Bin 0 -> 3818 bytes
 packages/email/static/mail-open.png           | Bin 0 -> 3839 bytes
 .../template-components/template-image.tsx    |  17 +
 packages/email/templates/confirm-email.tsx    |   4 +-
 .../email/templates/confirm-team-email.tsx    | 127 +++++
 .../email/templates/team-email-removed.tsx    |  83 +++
 packages/email/templates/team-invite.tsx      | 108 ++++
 .../email/templates/team-transfer-request.tsx | 112 ++++
 packages/lib/constants/app.ts                 |   9 +-
 packages/lib/constants/billing.ts             |  11 +
 packages/lib/constants/teams.ts               | 102 ++++
 packages/lib/errors/app-error.ts              | 144 +++++
 packages/lib/server-only/crypto/decrypt.ts    |  30 +-
 .../document-meta/upsert-document-meta.ts     |  15 +-
 .../server-only/document/create-document.ts   |  36 +-
 .../document/duplicate-document-by-id.ts      |  35 +-
 .../server-only/document/find-documents.ts    | 433 +++++++++++----
 .../document/get-document-by-id.ts            | 101 +++-
 .../lib/server-only/document/get-stats.ts     | 186 +++++--
 .../server-only/document/resend-document.tsx  |  21 +-
 .../server-only/document/send-document.tsx    |  15 +-
 .../lib/server-only/document/update-title.ts  |  15 +-
 .../field/get-fields-for-document.ts          |  15 +-
 .../field/set-fields-for-document.ts          |  15 +-
 .../recipient/get-recipients-for-document.ts  |  15 +-
 .../recipient/set-recipients-for-document.ts  |  15 +-
 .../team/accept-team-invitation.ts            |  63 +++
 .../team/create-team-billing-portal.ts        |  47 ++
 .../team/create-team-checkout-session.ts      |  52 ++
 .../team/create-team-email-verification.ts    | 132 +++++
 .../team/create-team-member-invites.ts        | 161 ++++++
 packages/lib/server-only/team/create-team.ts  | 207 +++++++
 .../team/delete-team-email-verification.ts    |  34 ++
 .../lib/server-only/team/delete-team-email.ts |  93 ++++
 .../team/delete-team-invitations.ts           |  47 ++
 .../server-only/team/delete-team-members.ts   | 102 ++++
 .../server-only/team/delete-team-pending.ts   |  15 +
 .../team/delete-team-transfer-request.ts      |  42 ++
 packages/lib/server-only/team/delete-team.ts  |  42 ++
 .../server-only/team/find-team-invoices.ts    |  52 ++
 .../team/find-team-member-invites.ts          |  91 ++++
 .../lib/server-only/team/find-team-members.ts | 100 ++++
 .../server-only/team/find-teams-pending.ts    |  58 ++
 packages/lib/server-only/team/find-teams.ts   |  76 +++
 .../team/get-team-email-by-email.ts           |  22 +
 .../server-only/team/get-team-invitations.ts  |  22 +
 .../lib/server-only/team/get-team-members.ts  |  33 ++
 packages/lib/server-only/team/get-team.ts     |  95 ++++
 packages/lib/server-only/team/get-teams.ts    |  33 ++
 packages/lib/server-only/team/leave-team.ts   |  59 ++
 .../team/request-team-ownership-transfer.ts   | 106 ++++
 .../team/resend-team-email-verification.ts    |  65 +++
 .../team/resend-team-member-invitation.ts     |  76 +++
 .../team/transfer-team-ownership.ts           |  88 +++
 .../lib/server-only/team/update-team-email.ts |  42 ++
 .../server-only/team/update-team-member.ts    |  92 ++++
 packages/lib/server-only/team/update-team.ts  |  65 +++
 packages/lib/server-only/user/create-user.ts  |  88 ++-
 packages/lib/utils/billing.ts                 |  16 +
 packages/lib/utils/params.ts                  |  30 ++
 packages/lib/utils/recipient-formatter.ts     |   4 +-
 packages/lib/utils/teams.ts                   |  42 ++
 packages/lib/utils/token-verification.ts      |  21 +
 .../20240205040421_add_teams/migration.sql    | 187 +++++++
 packages/prisma/package.json                  |   3 +-
 packages/prisma/schema.prisma                 | 109 +++-
 packages/prisma/seed/documents.ts             | 375 +++++++++++++
 packages/prisma/seed/teams.ts                 | 177 ++++++
 packages/prisma/seed/users.ts                 |  34 ++
 .../trpc/server/document-router/router.ts     |  19 +-
 .../trpc/server/document-router/schema.ts     |   3 +
 packages/trpc/server/router.ts                |   4 +-
 packages/trpc/server/team-router/router.ts    | 508 ++++++++++++++++++
 packages/trpc/server/team-router/schema.ts    | 213 ++++++++
 .../animate/animate-generic-fade-in-out.tsx   |  27 +
 packages/ui/package.json                      |   4 +-
 packages/ui/primitives/avatar.tsx             |  35 +-
 packages/ui/primitives/badge.tsx              |   3 +-
 packages/ui/primitives/button.tsx             |   1 +
 packages/ui/primitives/command.tsx            |   4 +-
 packages/ui/primitives/dialog.tsx             |   5 +-
 .../primitives/document-flow/add-fields.tsx   |   4 +-
 .../ui/primitives/multi-select-combobox.tsx   | 165 ++++++
 turbo.json                                    |   1 -
 200 files changed, 12916 insertions(+), 968 deletions(-)
 create mode 100644 apps/web/public/static/add-user.png
 create mode 100644 apps/web/public/static/mail-open-alert.png
 create mode 100644 apps/web/public/static/mail-open.png
 rename packages/ui/primitives/multiselect-combobox.tsx => apps/web/src/app/(dashboard)/admin/users/[id]/multiselect-role-combobox.tsx (95%)
 create mode 100644 apps/web/src/app/(dashboard)/documents/[id]/document-page-view.tsx
 create mode 100644 apps/web/src/app/(dashboard)/documents/data-table-sender-filter.tsx
 create mode 100644 apps/web/src/app/(dashboard)/documents/documents-page-view.tsx
 create mode 100644 apps/web/src/app/(dashboard)/settings/teams/accept-team-invitation-button.tsx
 create mode 100644 apps/web/src/app/(dashboard)/settings/teams/page.tsx
 create mode 100644 apps/web/src/app/(dashboard)/settings/teams/team-email-usage.tsx
 create mode 100644 apps/web/src/app/(dashboard)/settings/teams/team-invitations.tsx
 create mode 100644 apps/web/src/app/(teams)/t/[teamUrl]/documents/[id]/page.tsx
 create mode 100644 apps/web/src/app/(teams)/t/[teamUrl]/documents/page.tsx
 create mode 100644 apps/web/src/app/(teams)/t/[teamUrl]/error.tsx
 create mode 100644 apps/web/src/app/(teams)/t/[teamUrl]/layout-billing-banner.tsx
 create mode 100644 apps/web/src/app/(teams)/t/[teamUrl]/layout.tsx
 create mode 100644 apps/web/src/app/(teams)/t/[teamUrl]/not-found.tsx
 create mode 100644 apps/web/src/app/(teams)/t/[teamUrl]/settings/billing/page.tsx
 create mode 100644 apps/web/src/app/(teams)/t/[teamUrl]/settings/layout.tsx
 create mode 100644 apps/web/src/app/(teams)/t/[teamUrl]/settings/members/page.tsx
 create mode 100644 apps/web/src/app/(teams)/t/[teamUrl]/settings/page.tsx
 create mode 100644 apps/web/src/app/(teams)/t/[teamUrl]/settings/team-email-dropdown.tsx
 create mode 100644 apps/web/src/app/(teams)/t/[teamUrl]/settings/team-transfer-status.tsx
 create mode 100644 apps/web/src/app/(unauthenticated)/team/invite/[token]/page.tsx
 create mode 100644 apps/web/src/app/(unauthenticated)/team/verify/email/[token]/page.tsx
 create mode 100644 apps/web/src/app/(unauthenticated)/team/verify/transfer/[token]/page.tsx
 create mode 100644 apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
 delete mode 100644 apps/web/src/components/(dashboard)/layout/mobile-nav.tsx
 create mode 100644 apps/web/src/components/(dashboard)/layout/mobile-navigation.tsx
 delete mode 100644 apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
 create mode 100644 apps/web/src/components/(dashboard)/settings/layout/header.tsx
 create mode 100644 apps/web/src/components/(teams)/dialogs/add-team-email-dialog.tsx
 create mode 100644 apps/web/src/components/(teams)/dialogs/create-team-checkout-dialog.tsx
 create mode 100644 apps/web/src/components/(teams)/dialogs/create-team-dialog.tsx
 create mode 100644 apps/web/src/components/(teams)/dialogs/delete-team-dialog.tsx
 create mode 100644 apps/web/src/components/(teams)/dialogs/delete-team-member-dialog.tsx
 create mode 100644 apps/web/src/components/(teams)/dialogs/invite-team-member-dialog.tsx
 create mode 100644 apps/web/src/components/(teams)/dialogs/leave-team-dialog.tsx
 create mode 100644 apps/web/src/components/(teams)/dialogs/transfer-team-dialog.tsx
 create mode 100644 apps/web/src/components/(teams)/dialogs/update-team-email-dialog.tsx
 create mode 100644 apps/web/src/components/(teams)/dialogs/update-team-member-dialog.tsx
 create mode 100644 apps/web/src/components/(teams)/forms/update-team-form.tsx
 create mode 100644 apps/web/src/components/(teams)/settings/layout/desktop-nav.tsx
 create mode 100644 apps/web/src/components/(teams)/settings/layout/mobile-nav.tsx
 create mode 100644 apps/web/src/components/(teams)/tables/current-user-teams-data-table.tsx
 create mode 100644 apps/web/src/components/(teams)/tables/pending-user-teams-data-table-actions.tsx
 create mode 100644 apps/web/src/components/(teams)/tables/pending-user-teams-data-table.tsx
 create mode 100644 apps/web/src/components/(teams)/tables/team-billing-invoices-data-table.tsx
 create mode 100644 apps/web/src/components/(teams)/tables/team-member-invites-data-table.tsx
 create mode 100644 apps/web/src/components/(teams)/tables/team-members-data-table.tsx
 create mode 100644 apps/web/src/components/(teams)/tables/teams-member-page-data-table.tsx
 create mode 100644 apps/web/src/components/(teams)/tables/user-settings-teams-page-data-table.tsx
 create mode 100644 apps/web/src/components/(teams)/team-billing-portal-button.tsx
 create mode 100644 packages/app-tests/e2e/fixtures/authentication.ts
 create mode 100644 packages/app-tests/e2e/teams/manage-team.spec.ts
 create mode 100644 packages/app-tests/e2e/teams/team-documents.spec.ts
 create mode 100644 packages/app-tests/e2e/teams/team-email.spec.ts
 create mode 100644 packages/app-tests/e2e/teams/team-members.spec.ts
 create mode 100644 packages/app-tests/e2e/teams/transfer-team.spec.ts
 create mode 100644 packages/ee/server-only/stripe/create-team-customer.ts
 create mode 100644 packages/ee/server-only/stripe/delete-customer-payment-methods.ts
 create mode 100644 packages/ee/server-only/stripe/get-community-plan-prices.ts
 create mode 100644 packages/ee/server-only/stripe/get-invoices.ts
 create mode 100644 packages/ee/server-only/stripe/get-prices-by-plan.ts
 delete mode 100644 packages/ee/server-only/stripe/get-prices-by-type.ts
 create mode 100644 packages/ee/server-only/stripe/get-team-prices.ts
 create mode 100644 packages/ee/server-only/stripe/transfer-team-subscription.ts
 create mode 100644 packages/ee/server-only/stripe/update-customer.ts
 create mode 100644 packages/ee/server-only/stripe/update-subscription-item-quantity.ts
 create mode 100644 packages/email/static/add-user.png
 create mode 100644 packages/email/static/mail-open-alert.png
 create mode 100644 packages/email/static/mail-open.png
 create mode 100644 packages/email/template-components/template-image.tsx
 create mode 100644 packages/email/templates/confirm-team-email.tsx
 create mode 100644 packages/email/templates/team-email-removed.tsx
 create mode 100644 packages/email/templates/team-invite.tsx
 create mode 100644 packages/email/templates/team-transfer-request.tsx
 create mode 100644 packages/lib/constants/billing.ts
 create mode 100644 packages/lib/constants/teams.ts
 create mode 100644 packages/lib/errors/app-error.ts
 create mode 100644 packages/lib/server-only/team/accept-team-invitation.ts
 create mode 100644 packages/lib/server-only/team/create-team-billing-portal.ts
 create mode 100644 packages/lib/server-only/team/create-team-checkout-session.ts
 create mode 100644 packages/lib/server-only/team/create-team-email-verification.ts
 create mode 100644 packages/lib/server-only/team/create-team-member-invites.ts
 create mode 100644 packages/lib/server-only/team/create-team.ts
 create mode 100644 packages/lib/server-only/team/delete-team-email-verification.ts
 create mode 100644 packages/lib/server-only/team/delete-team-email.ts
 create mode 100644 packages/lib/server-only/team/delete-team-invitations.ts
 create mode 100644 packages/lib/server-only/team/delete-team-members.ts
 create mode 100644 packages/lib/server-only/team/delete-team-pending.ts
 create mode 100644 packages/lib/server-only/team/delete-team-transfer-request.ts
 create mode 100644 packages/lib/server-only/team/delete-team.ts
 create mode 100644 packages/lib/server-only/team/find-team-invoices.ts
 create mode 100644 packages/lib/server-only/team/find-team-member-invites.ts
 create mode 100644 packages/lib/server-only/team/find-team-members.ts
 create mode 100644 packages/lib/server-only/team/find-teams-pending.ts
 create mode 100644 packages/lib/server-only/team/find-teams.ts
 create mode 100644 packages/lib/server-only/team/get-team-email-by-email.ts
 create mode 100644 packages/lib/server-only/team/get-team-invitations.ts
 create mode 100644 packages/lib/server-only/team/get-team-members.ts
 create mode 100644 packages/lib/server-only/team/get-team.ts
 create mode 100644 packages/lib/server-only/team/get-teams.ts
 create mode 100644 packages/lib/server-only/team/leave-team.ts
 create mode 100644 packages/lib/server-only/team/request-team-ownership-transfer.ts
 create mode 100644 packages/lib/server-only/team/resend-team-email-verification.ts
 create mode 100644 packages/lib/server-only/team/resend-team-member-invitation.ts
 create mode 100644 packages/lib/server-only/team/transfer-team-ownership.ts
 create mode 100644 packages/lib/server-only/team/update-team-email.ts
 create mode 100644 packages/lib/server-only/team/update-team-member.ts
 create mode 100644 packages/lib/server-only/team/update-team.ts
 create mode 100644 packages/lib/utils/billing.ts
 create mode 100644 packages/lib/utils/params.ts
 create mode 100644 packages/lib/utils/teams.ts
 create mode 100644 packages/lib/utils/token-verification.ts
 create mode 100644 packages/prisma/migrations/20240205040421_add_teams/migration.sql
 create mode 100644 packages/prisma/seed/documents.ts
 create mode 100644 packages/prisma/seed/teams.ts
 create mode 100644 packages/prisma/seed/users.ts
 create mode 100644 packages/trpc/server/team-router/router.ts
 create mode 100644 packages/trpc/server/team-router/schema.ts
 create mode 100644 packages/ui/components/animate/animate-generic-fade-in-out.tsx
 create mode 100644 packages/ui/primitives/multi-select-combobox.tsx

diff --git a/apps/web/public/static/add-user.png b/apps/web/public/static/add-user.png
new file mode 100644
index 0000000000000000000000000000000000000000..abd337ceb70d306c70f31d07f1c74e2ca34399be
GIT binary patch
literal 3361
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

literal 0
HcmV?d00001

diff --git a/apps/web/public/static/mail-open-alert.png b/apps/web/public/static/mail-open-alert.png
new file mode 100644
index 0000000000000000000000000000000000000000..1511f0bc539302bf3fc9de7e18283d8882861ffb
GIT binary patch
literal 3818
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

literal 0
HcmV?d00001

diff --git a/apps/web/public/static/mail-open.png b/apps/web/public/static/mail-open.png
new file mode 100644
index 0000000000000000000000000000000000000000..306313b03f900dde2c71456df73ad92b898f04db
GIT binary patch
literal 3839
zcmV<b4gm3qP)<h;3K|Lk000e1NJLTq004LZ004Uk1^@s6zwktS00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH4wOkmK~#7F?VVd}
z6xSKY&)5b#K)_rKHJ7rE)Q1ElLeoA_Dh2uo4-gfeL2Z#*sZ!EPtyHy&*C<V^Hd5#<
zeITerYNQmW66phP5TmMniAoR+Bx)qQbuk7TV`Gf*b*JC|c)sO$_RMW}W@pwuKWV+|
znK^Sg|M|Z2ednB=6~bUJ7z_r3!C){L3<iV2V5kQyv54vI?QLDQY}w(4hK57*@AI~8
z=bTknEz2qti^UJNZryrT80wF{zP`i#{rw|DLqqn&#DqONJ8Lu3)6@2&N002`;bEJ$
z>AiL9)^TB|4`8*oZ{L3N&Ye5<)YOz61cb-7D1)+Mk+G;;^uWMCjx_sl<;s=0RjXDB
za?PR2k*gLDA3hXh)decEzrDS^APm`ptng*B!jbXual2ATWLWYDy<QQ9Y@oViwVkb$
z#pbf>+C^9Dl7nEEO~F}#qV2kN+40m!3c!t$xF4@xy*fv)*u(|c*P1nJ#M4hdjT`7=
z<Fac=+%9>syX?Ah(Mh@FAnG~Ft{WGPC^;#Y90a>;9J}6JcIGV@Zn3$!xsxjSl?@v<
zh{nc7ktTC<bK>5;d$8(L)REHF(a|v~GEAlgPRk_+QBN*Avo1PKmmEYrx$MkY@U?5#
z){-lJH7hPTh^)KpObJ{l6grkKUw$cTE;)!SyX?%=Alw{@dnJo5IfyK~?9?sT8I;dA
zH8s6l4=y<f)n(7j%$(f5efx+=kyHiFYLr|pS#sH_)o7NZ<Z8*1%dWWvXRYHRY0`Gt
zH5GWVy5u0zblEkl;UtImvQC;VJ8=tMY*BKx)VgCNQGx5V<05Hl>9P~6@p|sKNSa!@
z?AR@MsYS`vlC;Z?Rp6x>C09$5E;}{_mU5I_ElIlUsx8>K<amkOWmhGzammRLr^~Kb
z5#y4RBTkoHkp*LpuyM(?fn7EUohM7~5)p|iu+`t+-$^}Fo$J@HH&$CC;IbhyiG7Mh
z{-I@AcG$9^1*SU);vS<e$3L~TwHa}13`8Cp8p8Wan>TMhAGTa*m2lUPsGV@jM%>zi
zI&W>2-<)}KWMm}tS7<^jg~uFFI+QbQZhBDt3u+#7<KyG|;Zehs2`exeuyv@Vr9~Lh
zWyOjWu;yc7+u=Zgai`D=?>QPg5QcPt6%)Ji`FukdEB4#~qS9R=x4~yhjfx1a$VCW4
zdQ4AG%ZQo+t&(y2S#y)u3W)2zLlDKmMWEM;qG@5M9ZK(({NK?B!di+kmf@)q#N|Ts
z`<Z8AVnR?KDZc$K#Wp0*<m9Ay@Zf>$^l&lnVl8h^?bim|PTN~ruxZmKX}LJi=;)|?
z&CbpWLo%Rl;g0X$zc1??F%UEW)CNlf?CR>W{MzE6M!IDF)X7mKzb_ZUis3GBP^3+8
z*)-rF4Dms!kbJ>4BL{}Z<T|E!sMH2K)*HPIW*4n9f4F8ubIy}!r2D|hp!?Fa&D8;`
zg=a)C1(2Fz;KAMh;BG!6x4}*$F5lq}-0N{b^sK;bur&`34$3<XFGDn7sR*D@mjLy<
zcI{f>m6|G=*nVxWuZw2i4nKe5#ECg}(QY6vESMua7T?L)3<1Desr#`MM4`#^8((J^
ztqAMsqC*Mn?6l}5FvCMze4-|$^2eR}1X(QufwyegBGq?Xv>n++R{~BDQ65g3+h>zf
z=|Sp)ww8k^1W-|%Hf};4L)2QaZ;*v|Zi}P9f({Q4F9;fpHJ1lbuvS=Y)Il6YT=}op
zcD{Kq{&2n(6`b(KjT>cKjL)!UxNmkxOA*8=r~`=0({d`E6{7~hm3DN<;EDvcqgt>E
zEEyMpceo>@RCn**T~Zw+Gcz+%*s-xOSqDgc(61jy-+?Z}Q3*<uWM8N7aRFgiswq{}
z)Ta_UJ3DO>*>k;bgUBK~X_BZGSTXKijvP4<TZ}1H)YPXE!Ze+J0>eF9B(8`PZhLUC
zoKhheTP!J+JN3cvDy}z)v2?#tq_8{Sj%-Z0vy*_@CH(S<eBrUZ_%)Pz<?-Xk_Q1e^
zycWFU+L8eK=K+7`-BUx~0e^LUn2wH0ffd7@aq3WS)*M&r6Bc(zhu?sIs0IOTut*S8
z1S0KvOsV2beWHNoQ?cCW!-Z_YoNpy*!78w34!!^?DvP63NPUp<siQu)L2EIkI7(l%
z=h^T$Bg9SGf>k)BVr%A<ic^iW;UEgrmmn^CpLOfj)pWkNGtghwl)4EVY+!NyMw604
z*BK8NnAY^&TBJT<h|&g!&Vxk?=u#?7U#WEvR?E~UEQ)6>3ZKrXplP!*7e;SMt=eEe
zc$5mjnrksig;;>Q7%Lt1i5qpw4yb0@Y*k&9al?XgN|od&RjpH>O5m{qzipZVb|CK(
z^mS5lEwTUyH9YYT?-*N+)3W>~yk!M-tiVs?SZ8$9nz&P{G*h1_aFB)O(;4lHKBL2S
zW>s=y9>-uq+{86XRq523G~wu(V<i!FMu*dITWLkmQQ%Q39-(5Z4wF)4CH1KUJH%i^
z;KX;{Q5Ida4)?@ASRrlzytC`ZIvN;|Z8y8)ETleRfr~zU`g9}Qvy<f%y@U>GgXK0s
z(`K^>Te0T*JPXKb5akEA!HNY}JlJ4`3B|JrM8mWgw9#<WYT$)77R&JXC(IkG)34oF
z%A~uB1{)Tvs}~o&6yS~yj*rLyi(cC<x;A(zpczd9S}*JCqJw7a8PX+8M`K_|N3F+$
z4Z&#oqVX2pg4K==VaObcE){iEs#8LY1!oAg4Gv0`0>8Rq$R=UL1%Y2(G446r1O-~5
zf-Imuqr;FcYEKrZbjps!k8h~Qo~(LiWO7Jc8R`+e4{nHoM+GrCJ3q?R(zH^vugr-J
z);968%SUsxs8ID_gRObWjv*OFrUu1dKmQ{Mdp*?lB+FTAR-An8#qM6uZG!fJKPC@O
zo_`En5SRM8OV--4W`}ro-B-oB<~C`yU}S1Y+$M|u^!`WcO)zSUhOS?H{V%6<`wg6Q
z$9~=joE#Vb*Db{b5c6QiaT54B-!gFD?|=T57$vKhSXTb^z2~~z+XY%McURWiaACc0
zWw3|b@>}xr-u46Hz%$216fWF6E3F?`jn?s>?>YC5y52<5DS|fl?SFTX6%JJ-E`u8c
zHwrPjys>e2e$RUaUgwzytJ6WuphGfT>U&>`yS8~_#o~g49mhl~?Sp8YDb97O>wG&p
zcwRInz6(RFz<M346W{pa5m60DpN@R#d-5|Wc0B*#;nHt91bz9;s`M#427eGF0a)*s
zH|`5v4pH`v;g8CeBkFFYh#O2TYd+4)eO<KfvmqW>q-WQCC3G2B{qL^+SiJk$uVuRA
z<~d5MfMpeT@iIRP=IJ0t-2_0}3t)LV(3`d3e<dJ;)vstQpGVfdDmVYZ7W;UaUsq-6
zaq)okF3io%nV;2(iN{Wd##2q@Lfs_yedd!q3E3vTv$IoRcAP3MmbJFDm6dY>tp$XB
zlp(#YPEAea%rhsGXDx|`zzIE9Z-3GyEiFh~FZ^8e{6i3(bcw9@Z~Pq~L-nxbj&M(u
z0$VPN99G=XC;KY>=5XMY9cFB7?1Sm)=}|mA)=)iPaQc@A#tYi@=(1#y!&)v!=G1+4
zm6!PmTv8XQ($1YbM`vbczRi!oHB`qlPG9qtq05x|=shDu{?QA65Z{0PSE1bU%_jp8
zm-&NVnpBFOo$tVivuDqqCy{@PC({{`s{<(wtP^?dzi8~&i<YJp@)ZO+O`OQQuzY%^
z^y{R)9UW@^%e`6Kwr%?Xx#^R5%8dC*oyvi@U!(qKfRUup$w5&mXvZ%)qfsQ<JNf<R
z!?nST`)i74&YbC@_V`;QasdxTLGWe7j?UiA2V`mkEB^CmZ+N<DKT!7FPv3ZAy{l#y
zj0*?$L8>E4x-xxzea9#_K1AE)XuDm)5Q%%!{o?$<@5NN{aVdIkZP^&AEG!q|Vp<R7
zJfm|>jk|xTj3j|j0?Q3GBBNc#>*&#=R(H2_5wde+-@biTPfw3c%S#2Y9&P#c>({Lv
zJ9fx-EOT$8mgV*2DdaM&Yinz>d0SqGWn7j&tL5GB@!jX4?2Dh1T`I3TSHJ(=%bofu
zog*I$%W~gs*tNX5c#-~Tg~)rh9276Ky(rzd4p=S5fd6^>g8U3|?FO;`^}XF!-P=YI
znA>FCR9Y6B;R@vCPDR?z&0wqByB}z+o9M^o^O}cWD>s?#Uha2pUf1B>UOk3$P4bZm
z%Kx7GQO}$Aaqir?qS6&C%S`V5Pp;vq*^9K>9R7#6=*Dbcv7I_T<}Dh%U%g{D<a8aL
z+Cz}}ikEcaf>6Um>UU7pud}EZp^B+qr0$}<D%7iT-4*Qq-z}IbxchkOJ3v|f%==LH
zhv3qAUYPdU`1;lII&{~rJFlPo{m3!PYIv1}_Ci{%uz!O#H^2KyP*t{_h=3z(14q;l
znLn!yH7XbHZqZfp8VmLlSl!MGUa#J8ZjTYBlGPhYcV6n#|J3EW8!fM~Zm;uYYX?8Q
z{LOu0S>quRvJ}_Qokl|1|7~b!JpbCB_j*L!u#2{x2Zg&|Vm>NY|CbM}=4DvV>+(;2
z!J4;Ou+F_NEaMlK;g?dT?AWg3FL-yKhx)&JJM|pY{d-(z=~~^_p*xm(?M~U!OFf3F
zLE^Z@byt*EMf!c#RVrVoN9C7(g5F&jVfX1(v0eh}#P+%2`Lo~~KvyT~I^D6Ab+yB*
z0^K5r^1Ib7st~S<^xL;;mFm8AH;Pbh0->>D*9{?rhlLBhg_iA0vrnyvy7Tedzq2eI
zysSc$SFRA{ccpNbb!}6!P`BVhV}-hkbCngk<z6>{@VH6bpLP2WTCcNcr9MRJ!un7W
zQ&f-6HCaB}dTkT5j?Y<CTd8(%8<|Pb3<iV2kREo3pJ<7|f}q0LzvVh!;Bj>AnOC_e
z!HF8=d7ZDiPxral0Y8QjbdF)R_1Q)Z)_l(s{2yZxW!--FndATf002ovPDHLkV1ftJ
BjST<*

literal 0
HcmV?d00001

diff --git a/apps/web/src/app/(dashboard)/admin/documents/data-table.tsx b/apps/web/src/app/(dashboard)/admin/documents/data-table.tsx
index 83ad81ca1..0fc660968 100644
--- a/apps/web/src/app/(dashboard)/admin/documents/data-table.tsx
+++ b/apps/web/src/app/(dashboard)/admin/documents/data-table.tsx
@@ -7,9 +7,9 @@ import Link from 'next/link';
 import { Loader } from 'lucide-react';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { FindResultSet } from '@documenso/lib/types/find-result-set';
-import { recipientInitials } from '@documenso/lib/utils/recipient-formatter';
-import { Document, User } from '@documenso/prisma/client';
+import type { FindResultSet } from '@documenso/lib/types/find-result-set';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import type { Document, User } from '@documenso/prisma/client';
 import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
@@ -65,7 +65,7 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
             accessorKey: 'owner',
             cell: ({ row }) => {
               const avatarFallbackText = row.original.User.name
-                ? recipientInitials(row.original.User.name)
+                ? extractInitials(row.original.User.name)
                 : row.original.User.email.slice(0, 1).toUpperCase();
 
               return (
diff --git a/packages/ui/primitives/multiselect-combobox.tsx b/apps/web/src/app/(dashboard)/admin/users/[id]/multiselect-role-combobox.tsx
similarity index 95%
rename from packages/ui/primitives/multiselect-combobox.tsx
rename to apps/web/src/app/(dashboard)/admin/users/[id]/multiselect-role-combobox.tsx
index bac87ce0b..9a25af897 100644
--- a/packages/ui/primitives/multiselect-combobox.tsx
+++ b/apps/web/src/app/(dashboard)/admin/users/[id]/multiselect-role-combobox.tsx
@@ -19,7 +19,7 @@ type ComboboxProps = {
   onChange: (_values: string[]) => void;
 };
 
-const MultiSelectCombobox = ({ listValues, onChange }: ComboboxProps) => {
+const MultiSelectRoleCombobox = ({ listValues, onChange }: ComboboxProps) => {
   const [open, setOpen] = React.useState(false);
   const [selectedValues, setSelectedValues] = React.useState<string[]>([]);
   const dbRoles = Object.values(Role);
@@ -79,4 +79,4 @@ const MultiSelectCombobox = ({ listValues, onChange }: ComboboxProps) => {
   );
 };
 
-export { MultiSelectCombobox };
+export { MultiSelectRoleCombobox };
diff --git a/apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx b/apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx
index 9ae270d28..3bd909623 100644
--- a/apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx
+++ b/apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx
@@ -18,9 +18,10 @@ import {
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import { MultiSelectCombobox } from '@documenso/ui/primitives/multiselect-combobox';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { MultiSelectRoleCombobox } from './multiselect-role-combobox';
+
 const ZUserFormSchema = ZUpdateProfileMutationByAdminSchema.omit({ id: true });
 
 type TUserFormSchema = z.infer<typeof ZUserFormSchema>;
@@ -117,7 +118,7 @@ export default function UserPage({ params }: { params: { id: number } }) {
                   <fieldset className="flex flex-col gap-2">
                     <FormLabel className="text-muted-foreground">Roles</FormLabel>
                     <FormControl>
-                      <MultiSelectCombobox
+                      <MultiSelectRoleCombobox
                         listValues={roles}
                         onChange={(values: string[]) => onChange(values)}
                       />
diff --git a/apps/web/src/app/(dashboard)/admin/users/page.tsx b/apps/web/src/app/(dashboard)/admin/users/page.tsx
index 069378274..577e0739a 100644
--- a/apps/web/src/app/(dashboard)/admin/users/page.tsx
+++ b/apps/web/src/app/(dashboard)/admin/users/page.tsx
@@ -1,4 +1,5 @@
-import { getPricesByType } from '@documenso/ee/server-only/stripe/get-prices-by-type';
+import { getPricesByPlan } from '@documenso/ee/server-only/stripe/get-prices-by-plan';
+import { STRIPE_PLAN_TYPE } from '@documenso/lib/constants/billing';
 
 import { UsersDataTable } from './data-table-users';
 import { search } from './fetch-users.actions';
@@ -18,7 +19,7 @@ export default async function AdminManageUsers({ searchParams = {} }: AdminManag
 
   const [{ users, totalPages }, individualPrices] = await Promise.all([
     search(searchString, page, perPage),
-    getPricesByType('individual'),
+    getPricesByPlan(STRIPE_PLAN_TYPE.COMMUNITY),
   ]);
 
   const individualPriceIds = individualPrices.map((price) => price.id);
diff --git a/apps/web/src/app/(dashboard)/documents/[id]/document-page-view.tsx b/apps/web/src/app/(dashboard)/documents/[id]/document-page-view.tsx
new file mode 100644
index 000000000..3a46ed5e7
--- /dev/null
+++ b/apps/web/src/app/(dashboard)/documents/[id]/document-page-view.tsx
@@ -0,0 +1,131 @@
+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 { 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';
+
+export type DocumentPageViewProps = {
+  params: {
+    id: string;
+  };
+  team?: Team;
+};
+
+export default async function DocumentPageView({ params, team }: DocumentPageViewProps) {
+  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);
+  }
+
+  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>
+
+      {document.status !== InternalDocumentStatus.COMPLETED && (
+        <EditDocumentForm
+          className="mt-8"
+          document={document}
+          user={user}
+          documentMeta={documentMeta}
+          recipients={recipients}
+          fields={fields}
+          documentData={documentData}
+          documentRootPath={documentRootPath}
+        />
+      )}
+
+      {document.status === InternalDocumentStatus.COMPLETED && (
+        <div className="mx-auto mt-12 max-w-2xl">
+          <LazyPDFViewer
+            document={document}
+            key={documentData.id}
+            documentMeta={documentMeta}
+            documentData={documentData}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx b/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
index af1877a64..e6cbd6fd4 100644
--- a/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
@@ -32,6 +32,7 @@ export type EditDocumentFormProps = {
   documentMeta: DocumentMeta | null;
   fields: Field[];
   documentData: DocumentData;
+  documentRootPath: string;
 };
 
 type EditDocumentStep = 'title' | 'signers' | 'fields' | 'subject';
@@ -45,6 +46,7 @@ export const EditDocumentForm = ({
   documentMeta,
   user: _user,
   documentData,
+  documentRootPath,
 }: EditDocumentFormProps) => {
   const { toast } = useToast();
   const router = useRouter();
@@ -168,7 +170,7 @@ export const EditDocumentForm = ({
         duration: 5000,
       });
 
-      router.push('/documents');
+      router.push(documentRootPath);
     } catch (err) {
       console.error(err);
 
diff --git a/apps/web/src/app/(dashboard)/documents/[id]/page.tsx b/apps/web/src/app/(dashboard)/documents/[id]/page.tsx
index 44f3991d8..e7a34889e 100644
--- a/apps/web/src/app/(dashboard)/documents/[id]/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/page.tsx
@@ -1,20 +1,4 @@
-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 { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
-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 DocumentPageView from './document-page-view';
 
 export type DocumentPageProps = {
   params: {
@@ -22,103 +6,6 @@ export type DocumentPageProps = {
   };
 };
 
-export default async function DocumentPage({ params }: DocumentPageProps) {
-  const { id } = params;
-
-  const documentId = Number(id);
-
-  if (!documentId || Number.isNaN(documentId)) {
-    redirect('/documents');
-  }
-
-  const { user } = await getRequiredServerComponentSession();
-
-  const document = await getDocumentById({
-    id: documentId,
-    userId: user.id,
-  }).catch(() => null);
-
-  if (!document || !document.documentData) {
-    redirect('/documents');
-  }
-
-  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="/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="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>
-
-      {document.status !== InternalDocumentStatus.COMPLETED && (
-        <EditDocumentForm
-          className="mt-8"
-          document={document}
-          user={user}
-          documentMeta={documentMeta}
-          recipients={recipients}
-          fields={fields}
-          documentData={documentData}
-        />
-      )}
-
-      {document.status === InternalDocumentStatus.COMPLETED && (
-        <div className="mx-auto mt-12 max-w-2xl">
-          <LazyPDFViewer
-            document={document}
-            key={documentData.id}
-            documentMeta={documentMeta}
-            documentData={documentData}
-          />
-        </div>
-      )}
-    </div>
-  );
+export default function DocumentPage({ params }: DocumentPageProps) {
+  return <DocumentPageView params={params} />;
 }
diff --git a/apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx b/apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx
index 7fabeef95..e8e3d6130 100644
--- a/apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx
@@ -10,6 +10,7 @@ import * as z from 'zod';
 
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
+import type { Team } from '@documenso/prisma/client';
 import { type Document, type Recipient, SigningStatus } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -39,8 +40,11 @@ import { StackAvatar } from '~/components/(dashboard)/avatar/stack-avatar';
 const FORM_ID = 'resend-email';
 
 export type ResendDocumentActionItemProps = {
-  document: Document;
+  document: Document & {
+    team: Pick<Team, 'id' | 'url'> | null;
+  };
   recipients: Recipient[];
+  team?: Pick<Team, 'id' | 'url'>;
 };
 
 export const ZResendDocumentFormSchema = z.object({
@@ -54,15 +58,17 @@ export type TResendDocumentFormSchema = z.infer<typeof ZResendDocumentFormSchema
 export const ResendDocumentActionItem = ({
   document,
   recipients,
+  team,
 }: ResendDocumentActionItemProps) => {
   const { data: session } = useSession();
   const { toast } = useToast();
 
   const [isOpen, setIsOpen] = useState(false);
   const isOwner = document.userId === session?.user?.id;
+  const isCurrentTeamDocument = team && document.team?.url === team.url;
 
   const isDisabled =
-    !isOwner ||
+    (!isOwner && !isCurrentTeamDocument) ||
     document.status !== 'PENDING' ||
     !recipients.some((r) => r.signingStatus === SigningStatus.NOT_SIGNED);
 
@@ -82,7 +88,7 @@ export const ResendDocumentActionItem = ({
 
   const onFormSubmit = async ({ recipients }: TResendDocumentFormSchema) => {
     try {
-      await resendDocument({ documentId: document.id, recipients });
+      await resendDocument({ documentId: document.id, recipients, teamId: team?.id });
 
       toast({
         title: 'Document re-sent',
diff --git a/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx b/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx
index ecddf1190..78ffd0b3b 100644
--- a/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx
@@ -7,7 +7,8 @@ import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
-import type { Document, Recipient, User } from '@documenso/prisma/client';
+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 type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc as trpcClient } from '@documenso/trpc/client';
@@ -18,10 +19,12 @@ export type DataTableActionButtonProps = {
   row: Document & {
     User: Pick<User, 'id' | 'name' | 'email'>;
     Recipient: Recipient[];
+    team: Pick<Team, 'id' | 'url'> | null;
   };
+  team?: Pick<Team, 'id' | 'url'>;
 };
 
-export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
+export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps) => {
   const { data: session } = useSession();
   const { toast } = useToast();
 
@@ -38,6 +41,9 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
   const isComplete = row.status === DocumentStatus.COMPLETED;
   const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
   const role = recipient?.role;
+  const isCurrentTeamDocument = team && row.team?.url === team.url;
+
+  const documentsPath = formatDocumentsPath(team?.url);
 
   const onDownloadClick = async () => {
     try {
@@ -46,6 +52,7 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
       if (!recipient) {
         document = await trpcClient.document.getDocumentById.query({
           id: row.id,
+          teamId: team?.id,
         });
       } else {
         document = await trpcClient.document.getDocumentByToken.query({
@@ -81,15 +88,19 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
     isPending,
     isComplete,
     isSigned,
+    isCurrentTeamDocument,
   })
-    .with({ isOwner: true, isDraft: true }, () => (
-      <Button className="w-32" asChild>
-        <Link href={`/documents/${row.id}`}>
-          <Edit className="-ml-1 mr-2 h-4 w-4" />
-          Edit
-        </Link>
-      </Button>
-    ))
+    .with(
+      isOwner ? { isDraft: true, isOwner: true } : { isDraft: true, isCurrentTeamDocument: true },
+      () => (
+        <Button className="w-32" asChild>
+          <Link href={`${documentsPath}/${row.id}`}>
+            <Edit className="-ml-1 mr-2 h-4 w-4" />
+            Edit
+          </Link>
+        </Button>
+      ),
+    )
     .with({ isRecipient: true, isPending: true, isSigned: false }, () => (
       <Button className="w-32" asChild>
         <Link href={`/sign/${recipient?.token}`}>
diff --git a/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx b/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx
index e1d9b64bb..b7d2cf452 100644
--- a/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx
@@ -20,8 +20,9 @@ import {
 import { useSession } from 'next-auth/react';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
-import type { Document, Recipient, User } from '@documenso/prisma/client';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { DocumentStatus, RecipientRole } from '@documenso/prisma/client';
+import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
@@ -42,10 +43,12 @@ export type DataTableActionDropdownProps = {
   row: Document & {
     User: Pick<User, 'id' | 'name' | 'email'>;
     Recipient: Recipient[];
+    team: Pick<Team, 'id' | 'url'> | null;
   };
+  team?: Pick<Team, 'id' | 'url'>;
 };
 
-export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
+export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownProps) => {
   const { data: session } = useSession();
   const { toast } = useToast();
 
@@ -65,6 +68,9 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
   const isComplete = row.status === DocumentStatus.COMPLETED;
   // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
   const isDocumentDeletable = isOwner;
+  const isCurrentTeamDocument = team && row.team?.url === team.url;
+
+  const documentsPath = formatDocumentsPath(team?.url);
 
   const onDownloadClick = async () => {
     try {
@@ -73,6 +79,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
       if (!recipient) {
         document = await trpcClient.document.getDocumentById.query({
           id: row.id,
+          teamId: team?.id,
         });
       } else {
         document = await trpcClient.document.getDocumentByToken.query({
@@ -134,8 +141,8 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
           </DropdownMenuItem>
         )}
 
-        <DropdownMenuItem disabled={!isOwner || isComplete} asChild>
-          <Link href={`/documents/${row.id}`}>
+        <DropdownMenuItem disabled={(!isOwner && !isCurrentTeamDocument) || isComplete} asChild>
+          <Link href={`${documentsPath}/${row.id}`}>
             <Edit className="mr-2 h-4 w-4" />
             Edit
           </Link>
@@ -163,7 +170,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
 
         <DropdownMenuLabel>Share</DropdownMenuLabel>
 
-        <ResendDocumentActionItem document={row} recipients={nonSignedRecipients} />
+        <ResendDocumentActionItem document={row} recipients={nonSignedRecipients} team={team} />
 
         <DocumentShareButton
           documentId={row.id}
@@ -193,6 +200,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
           id={row.id}
           open={isDuplicateDialogOpen}
           onOpenChange={setDuplicateDialogOpen}
+          team={team}
         />
       )}
     </DropdownMenu>
diff --git a/apps/web/src/app/(dashboard)/documents/data-table-sender-filter.tsx b/apps/web/src/app/(dashboard)/documents/data-table-sender-filter.tsx
new file mode 100644
index 000000000..6c66153a7
--- /dev/null
+++ b/apps/web/src/app/(dashboard)/documents/data-table-sender-filter.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
+import { parseToIntegerArray } from '@documenso/lib/utils/params';
+import { trpc } from '@documenso/trpc/react';
+import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
+
+type DataTableSenderFilterProps = {
+  teamId: number;
+};
+
+export const DataTableSenderFilter = ({ teamId }: DataTableSenderFilterProps) => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const isMounted = useIsMounted();
+
+  const senderIds = parseToIntegerArray(searchParams?.get('senderIds') ?? '');
+
+  const { data, isInitialLoading } = trpc.team.getTeamMembers.useQuery({
+    teamId,
+  });
+
+  const comboBoxOptions = (data ?? []).map((member) => ({
+    label: member.user.name ?? member.user.email,
+    value: member.user.id,
+  }));
+
+  const onChange = (newSenderIds: number[]) => {
+    if (!pathname) {
+      return;
+    }
+
+    const params = new URLSearchParams(searchParams?.toString());
+
+    params.set('senderIds', newSenderIds.join(','));
+
+    if (newSenderIds.length === 0) {
+      params.delete('senderIds');
+    }
+
+    router.push(`${pathname}?${params.toString()}`, { scroll: false });
+  };
+
+  return (
+    <MultiSelectCombobox
+      emptySelectionPlaceholder={
+        <p className="text-muted-foreground font-normal">
+          <span className="text-muted-foreground/70">Sender:</span> All
+        </p>
+      }
+      enableClearAllButton={true}
+      inputPlaceholder="Search"
+      loading={!isMounted || isInitialLoading}
+      options={comboBoxOptions}
+      selectedValues={senderIds}
+      onChange={onChange}
+    />
+  );
+};
diff --git a/apps/web/src/app/(dashboard)/documents/data-table.tsx b/apps/web/src/app/(dashboard)/documents/data-table.tsx
index c8adb1422..13b85d526 100644
--- a/apps/web/src/app/(dashboard)/documents/data-table.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table.tsx
@@ -7,7 +7,7 @@ import { useSession } from 'next-auth/react';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import type { FindResultSet } from '@documenso/lib/types/find-result-set';
-import type { Document, Recipient, User } from '@documenso/prisma/client';
+import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
@@ -25,11 +25,18 @@ export type DocumentsDataTableProps = {
     Document & {
       Recipient: Recipient[];
       User: Pick<User, 'id' | 'name' | 'email'>;
+      team: Pick<Team, 'id' | 'url'> | null;
     }
   >;
+  showSenderColumn?: boolean;
+  team?: Pick<Team, 'id' | 'url'>;
 };
 
-export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
+export const DocumentsDataTable = ({
+  results,
+  showSenderColumn,
+  team,
+}: DocumentsDataTableProps) => {
   const { data: session } = useSession();
   const [isPending, startTransition] = useTransition();
 
@@ -61,6 +68,11 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
             header: 'Title',
             cell: ({ row }) => <DataTableTitle row={row.original} />,
           },
+          {
+            id: 'sender',
+            header: 'Sender',
+            cell: ({ row }) => row.original.User.name ?? row.original.User.email,
+          },
           {
             header: 'Recipient',
             accessorKey: 'recipient',
@@ -79,8 +91,8 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
               (!row.original.deletedAt ||
                 row.original.status === ExtendedDocumentStatus.COMPLETED) && (
                 <div className="flex items-center gap-x-4">
-                  <DataTableActionButton row={row.original} />
-                  <DataTableActionDropdown row={row.original} />
+                  <DataTableActionButton team={team} row={row.original} />
+                  <DataTableActionDropdown team={team} row={row.original} />
                 </div>
               ),
           },
@@ -90,6 +102,9 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
         currentPage={results.currentPage}
         totalPages={results.totalPages}
         onPaginationChange={onPaginationChange}
+        columnVisibility={{
+          sender: Boolean(showSenderColumn),
+        }}
       >
         {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
       </DataTable>
diff --git a/apps/web/src/app/(dashboard)/documents/documents-page-view.tsx b/apps/web/src/app/(dashboard)/documents/documents-page-view.tsx
new file mode 100644
index 000000000..ead3e8f4f
--- /dev/null
+++ b/apps/web/src/app/(dashboard)/documents/documents-page-view.tsx
@@ -0,0 +1,158 @@
+import Link from 'next/link';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
+import type { PeriodSelectorValue } from '@documenso/lib/server-only/document/find-documents';
+import type { GetStatsInput } from '@documenso/lib/server-only/document/get-stats';
+import { getStats } from '@documenso/lib/server-only/document/get-stats';
+import { parseToIntegerArray } from '@documenso/lib/utils/params';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import type { Team, TeamEmail } from '@documenso/prisma/client';
+import { isExtendedDocumentStatus } from '@documenso/prisma/guards/is-extended-document-status';
+import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+
+import { PeriodSelector } from '~/components/(dashboard)/period-selector/period-selector';
+import { isPeriodSelectorValue } from '~/components/(dashboard)/period-selector/types';
+import { DocumentStatus } from '~/components/formatter/document-status';
+
+import { DocumentsDataTable } from './data-table';
+import { DataTableSenderFilter } from './data-table-sender-filter';
+import { EmptyDocumentState } from './empty-state';
+import { UploadDocument } from './upload-document';
+
+export type DocumentsPageViewProps = {
+  searchParams?: {
+    status?: ExtendedDocumentStatus;
+    period?: PeriodSelectorValue;
+    page?: string;
+    perPage?: string;
+    senderIds?: string;
+  };
+  team?: Team & { teamEmail?: TeamEmail | null };
+};
+
+export default async function DocumentsPageView({
+  searchParams = {},
+  team,
+}: DocumentsPageViewProps) {
+  const { user } = await getRequiredServerComponentSession();
+
+  const status = isExtendedDocumentStatus(searchParams.status) ? searchParams.status : 'ALL';
+  const period = isPeriodSelectorValue(searchParams.period) ? searchParams.period : '';
+  const page = Number(searchParams.page) || 1;
+  const perPage = Number(searchParams.perPage) || 20;
+  const senderIds = parseToIntegerArray(searchParams.senderIds ?? '');
+  const currentTeam = team ? { id: team.id, url: team.url } : undefined;
+
+  const getStatOptions: GetStatsInput = {
+    user,
+    period,
+  };
+
+  if (team) {
+    getStatOptions.team = {
+      teamId: team.id,
+      teamEmail: team.teamEmail?.email,
+      senderIds,
+    };
+  }
+
+  const stats = await getStats(getStatOptions);
+
+  const results = await findDocuments({
+    userId: user.id,
+    teamId: team?.id,
+    status,
+    orderBy: {
+      column: 'createdAt',
+      direction: 'desc',
+    },
+    page,
+    perPage,
+    period,
+    senderIds,
+  });
+
+  const getTabHref = (value: typeof status) => {
+    const params = new URLSearchParams(searchParams);
+
+    params.set('status', value);
+
+    if (params.has('page')) {
+      params.delete('page');
+    }
+
+    return `${formatDocumentsPath(team?.url)}?${params.toString()}`;
+  };
+
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <UploadDocument team={currentTeam} />
+
+      <div className="mt-12 flex flex-wrap items-center justify-between gap-x-4 gap-y-8">
+        <div className="flex flex-row items-center">
+          {team && (
+            <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
+              <AvatarFallback className="text-xs text-gray-400">
+                {team.name.slice(0, 1)}
+              </AvatarFallback>
+            </Avatar>
+          )}
+
+          <h1 className="text-4xl font-semibold">Documents</h1>
+        </div>
+
+        <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
+          <Tabs value={status} className="overflow-x-auto">
+            <TabsList>
+              {[
+                ExtendedDocumentStatus.INBOX,
+                ExtendedDocumentStatus.PENDING,
+                ExtendedDocumentStatus.COMPLETED,
+                ExtendedDocumentStatus.DRAFT,
+                ExtendedDocumentStatus.ALL,
+              ].map((value) => (
+                <TabsTrigger
+                  key={value}
+                  className="hover:text-foreground min-w-[60px]"
+                  value={value}
+                  asChild
+                >
+                  <Link href={getTabHref(value)} scroll={false}>
+                    <DocumentStatus status={value} />
+
+                    {value !== ExtendedDocumentStatus.ALL && (
+                      <span className="ml-1 inline-block opacity-50">
+                        {Math.min(stats[value], 99)}
+                        {stats[value] > 99 && '+'}
+                      </span>
+                    )}
+                  </Link>
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+
+          {team && <DataTableSenderFilter teamId={team.id} />}
+
+          <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
+            <PeriodSelector />
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-8">
+        {results.count > 0 && (
+          <DocumentsDataTable
+            results={results}
+            showSenderColumn={team !== undefined}
+            team={currentTeam}
+          />
+        )}
+        {results.count === 0 && <EmptyDocumentState status={status} />}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/(dashboard)/documents/duplicate-document-dialog.tsx b/apps/web/src/app/(dashboard)/documents/duplicate-document-dialog.tsx
index 56c112d75..14370cff8 100644
--- a/apps/web/src/app/(dashboard)/documents/duplicate-document-dialog.tsx
+++ b/apps/web/src/app/(dashboard)/documents/duplicate-document-dialog.tsx
@@ -1,5 +1,7 @@
 import { useRouter } from 'next/navigation';
 
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import type { Team } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -16,18 +18,21 @@ type DuplicateDocumentDialogProps = {
   id: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
+  team?: Pick<Team, 'id' | 'url'>;
 };
 
 export const DuplicateDocumentDialog = ({
   id,
   open,
   onOpenChange,
+  team,
 }: DuplicateDocumentDialogProps) => {
   const router = useRouter();
   const { toast } = useToast();
 
   const { data: document, isLoading } = trpcReact.document.getDocumentById.useQuery({
     id,
+    teamId: team?.id,
   });
 
   const documentData = document?.documentData
@@ -37,10 +42,12 @@ export const DuplicateDocumentDialog = ({
       }
     : undefined;
 
+  const documentsPath = formatDocumentsPath(team?.url);
+
   const { mutateAsync: duplicateDocument, isLoading: isDuplicateLoading } =
     trpcReact.document.duplicateDocument.useMutation({
       onSuccess: (newId) => {
-        router.push(`/documents/${newId}`);
+        router.push(`${documentsPath}/${newId}`);
 
         toast({
           title: 'Document Duplicated',
@@ -54,7 +61,7 @@ export const DuplicateDocumentDialog = ({
 
   const onDuplicate = async () => {
     try {
-      await duplicateDocument({ id });
+      await duplicateDocument({ id, teamId: team?.id });
     } catch {
       toast({
         title: 'Something went wrong',
diff --git a/apps/web/src/app/(dashboard)/documents/page.tsx b/apps/web/src/app/(dashboard)/documents/page.tsx
index 5780df1dc..b67ed6f02 100644
--- a/apps/web/src/app/(dashboard)/documents/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/page.tsx
@@ -1,119 +1,16 @@
 import type { Metadata } from 'next';
-import Link from 'next/link';
 
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import type { PeriodSelectorValue } from '@documenso/lib/server-only/document/find-documents';
-import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
-import { getStats } from '@documenso/lib/server-only/document/get-stats';
-import { isExtendedDocumentStatus } from '@documenso/prisma/guards/is-extended-document-status';
-import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
-import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
-
-import { PeriodSelector } from '~/components/(dashboard)/period-selector/period-selector';
-import { isPeriodSelectorValue } from '~/components/(dashboard)/period-selector/types';
-import { DocumentStatus } from '~/components/formatter/document-status';
-
-import { DocumentsDataTable } from './data-table';
-import { EmptyDocumentState } from './empty-state';
-import { UploadDocument } from './upload-document';
+import type { DocumentsPageViewProps } from './documents-page-view';
+import DocumentsPageView from './documents-page-view';
 
 export type DocumentsPageProps = {
-  searchParams?: {
-    status?: ExtendedDocumentStatus;
-    period?: PeriodSelectorValue;
-    page?: string;
-    perPage?: string;
-  };
+  searchParams?: DocumentsPageViewProps['searchParams'];
 };
 
 export const metadata: Metadata = {
   title: 'Documents',
 };
-export default async function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
-  const { user } = await getRequiredServerComponentSession();
 
-  const status = isExtendedDocumentStatus(searchParams.status) ? searchParams.status : 'ALL';
-  const period = isPeriodSelectorValue(searchParams.period) ? searchParams.period : '';
-  const page = Number(searchParams.page) || 1;
-  const perPage = Number(searchParams.perPage) || 20;
-
-  const stats = await getStats({
-    user,
-    period,
-  });
-
-  const results = await findDocuments({
-    userId: user.id,
-    status,
-    orderBy: {
-      column: 'createdAt',
-      direction: 'desc',
-    },
-    page,
-    perPage,
-    period,
-  });
-
-  const getTabHref = (value: typeof status) => {
-    const params = new URLSearchParams(searchParams);
-
-    params.set('status', value);
-
-    if (params.has('page')) {
-      params.delete('page');
-    }
-
-    return `/documents?${params.toString()}`;
-  };
-
-  return (
-    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-      <UploadDocument />
-
-      <div className="mt-12 flex flex-wrap items-center justify-between gap-x-4 gap-y-8">
-        <h1 className="text-4xl font-semibold">Documents</h1>
-
-        <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
-          <Tabs value={status} className="overflow-x-auto">
-            <TabsList>
-              {[
-                ExtendedDocumentStatus.INBOX,
-                ExtendedDocumentStatus.PENDING,
-                ExtendedDocumentStatus.COMPLETED,
-                ExtendedDocumentStatus.DRAFT,
-                ExtendedDocumentStatus.ALL,
-              ].map((value) => (
-                <TabsTrigger
-                  key={value}
-                  className="hover:text-foreground min-w-[60px]"
-                  value={value}
-                  asChild
-                >
-                  <Link href={getTabHref(value)} scroll={false}>
-                    <DocumentStatus status={value} />
-
-                    {value !== ExtendedDocumentStatus.ALL && (
-                      <span className="ml-1 inline-block opacity-50">
-                        {Math.min(stats[value], 99)}
-                        {stats[value] > 99 && '+'}
-                      </span>
-                    )}
-                  </Link>
-                </TabsTrigger>
-              ))}
-            </TabsList>
-          </Tabs>
-
-          <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
-            <PeriodSelector />
-          </div>
-        </div>
-      </div>
-
-      <div className="mt-8">
-        {results.count > 0 && <DocumentsDataTable results={results} />}
-        {results.count === 0 && <EmptyDocumentState status={status} />}
-      </div>
-    </div>
-  );
+export default function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
+  return <DocumentsPageView searchParams={searchParams} />;
 }
diff --git a/apps/web/src/app/(dashboard)/documents/upload-document.tsx b/apps/web/src/app/(dashboard)/documents/upload-document.tsx
index 444bd1db0..ed91620dc 100644
--- a/apps/web/src/app/(dashboard)/documents/upload-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/upload-document.tsx
@@ -13,6 +13,7 @@ import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
 import { putFile } from '@documenso/lib/universal/upload/put-file';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -21,9 +22,13 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type UploadDocumentProps = {
   className?: string;
+  team?: {
+    id: number;
+    url: string;
+  };
 };
 
-export const UploadDocument = ({ className }: UploadDocumentProps) => {
+export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
   const router = useRouter();
   const analytics = useAnalytics();
 
@@ -39,13 +44,15 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
 
   const disabledMessage = useMemo(() => {
     if (remaining.documents === 0) {
-      return 'You have reached your document limit.';
+      return team
+        ? 'Document upload disabled due to unpaid invoices'
+        : 'You have reached your document limit.';
     }
 
     if (!session?.user.emailVerified) {
       return 'Verify your email to upload documents.';
     }
-  }, [remaining.documents, session?.user.emailVerified]);
+  }, [remaining.documents, session?.user.emailVerified, team]);
 
   const onFileDrop = async (file: File) => {
     try {
@@ -61,6 +68,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
       const { id } = await createDocument({
         title: file.name,
         documentDataId,
+        teamId: team?.id,
       });
 
       toast({
@@ -75,7 +83,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
         timestamp: new Date().toISOString(),
       });
 
-      router.push(`/documents/${id}`);
+      router.push(`${formatDocumentsPath(team?.url)}/${id}`);
     } catch (error) {
       console.error(error);
 
@@ -117,11 +125,13 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
       />
 
       <div className="absolute -bottom-6 right-0">
-        {remaining.documents > 0 && Number.isFinite(remaining.documents) && (
-          <p className="text-muted-foreground/60 text-xs">
-            {remaining.documents} of {quota.documents} documents remaining this month.
-          </p>
-        )}
+        {team?.id === undefined &&
+          remaining.documents > 0 &&
+          Number.isFinite(remaining.documents) && (
+            <p className="text-muted-foreground/60 text-xs">
+              {remaining.documents} of {quota.documents} documents remaining this month.
+            </p>
+          )}
       </div>
 
       {isLoading && (
@@ -130,7 +140,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
         </div>
       )}
 
-      {remaining.documents === 0 && (
+      {team?.id === undefined && remaining.documents === 0 && (
         <div className="bg-background/60 absolute inset-0 flex items-center justify-center rounded-lg backdrop-blur-sm">
           <div className="text-center">
             <h2 className="text-muted-foreground/80 text-xl font-semibold">
diff --git a/apps/web/src/app/(dashboard)/layout.tsx b/apps/web/src/app/(dashboard)/layout.tsx
index 433aeb18c..99db66c55 100644
--- a/apps/web/src/app/(dashboard)/layout.tsx
+++ b/apps/web/src/app/(dashboard)/layout.tsx
@@ -7,6 +7,7 @@ import { getServerSession } from 'next-auth';
 import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/server';
 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 { Header } from '~/components/(dashboard)/layout/header';
 import { VerifyEmailBanner } from '~/components/(dashboard)/layout/verify-email-banner';
@@ -26,13 +27,17 @@ export default async function AuthenticatedDashboardLayout({
     redirect('/signin');
   }
 
-  const { user } = await getRequiredServerComponentSession();
+  const [{ user }, teams] = await Promise.all([
+    getRequiredServerComponentSession(),
+    getTeams({ userId: session.user.id }),
+  ]);
 
   return (
     <NextAuthProvider session={session}>
       <LimitsProvider>
         {!user.emailVerified && <VerifyEmailBanner email={user.email} />}
-        <Header user={user} />
+
+        <Header user={user} teams={teams} />
 
         <main className="mt-8 pb-8 md:mt-12 md:pb-12">{children}</main>
 
diff --git a/apps/web/src/app/(dashboard)/settings/billing/billing-portal-button.tsx b/apps/web/src/app/(dashboard)/settings/billing/billing-portal-button.tsx
index 8fd78cae3..9ed6a2515 100644
--- a/apps/web/src/app/(dashboard)/settings/billing/billing-portal-button.tsx
+++ b/apps/web/src/app/(dashboard)/settings/billing/billing-portal-button.tsx
@@ -7,7 +7,11 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { createBillingPortal } from './create-billing-portal.action';
 
-export const BillingPortalButton = () => {
+export type BillingPortalButtonProps = {
+  buttonProps?: React.ComponentProps<typeof Button>;
+};
+
+export const BillingPortalButton = ({ buttonProps }: BillingPortalButtonProps) => {
   const { toast } = useToast();
 
   const [isFetchingPortalUrl, setIsFetchingPortalUrl] = useState(false);
@@ -48,7 +52,11 @@ export const BillingPortalButton = () => {
   };
 
   return (
-    <Button onClick={async () => handleFetchPortalUrl()} loading={isFetchingPortalUrl}>
+    <Button
+      {...buttonProps}
+      onClick={async () => handleFetchPortalUrl()}
+      loading={isFetchingPortalUrl}
+    >
       Manage Subscription
     </Button>
   );
diff --git a/apps/web/src/app/(dashboard)/settings/billing/page.tsx b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
index e226a7e39..cee2aa2f1 100644
--- a/apps/web/src/app/(dashboard)/settings/billing/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
@@ -5,8 +5,9 @@ import { match } from 'ts-pattern';
 
 import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
 import { getPricesByInterval } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
-import { getPricesByType } from '@documenso/ee/server-only/stripe/get-prices-by-type';
+import { getPricesByPlan } from '@documenso/ee/server-only/stripe/get-prices-by-plan';
 import { getProductByPriceId } from '@documenso/ee/server-only/stripe/get-product-by-price-id';
+import { STRIPE_PLAN_TYPE } from '@documenso/lib/constants/billing';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
 import { type Stripe } from '@documenso/lib/server-only/stripe';
@@ -36,23 +37,23 @@ export default async function BillingSettingsPage() {
     user = await getStripeCustomerByUser(user).then((result) => result.user);
   }
 
-  const [subscriptions, prices, individualPrices] = await Promise.all([
+  const [subscriptions, prices, communityPlanPrices] = await Promise.all([
     getSubscriptionsByUserId({ userId: user.id }),
-    getPricesByInterval({ type: 'individual' }),
-    getPricesByType('individual'),
+    getPricesByInterval({ plan: STRIPE_PLAN_TYPE.COMMUNITY }),
+    getPricesByPlan(STRIPE_PLAN_TYPE.COMMUNITY),
   ]);
 
-  const individualPriceIds = individualPrices.map(({ id }) => id);
+  const communityPlanPriceIds = communityPlanPrices.map(({ id }) => id);
 
   let subscriptionProduct: Stripe.Product | null = null;
 
-  const individualUserSubscriptions = subscriptions.filter(({ priceId }) =>
-    individualPriceIds.includes(priceId),
+  const communityPlanUserSubscriptions = subscriptions.filter(({ priceId }) =>
+    communityPlanPriceIds.includes(priceId),
   );
 
   const subscription =
-    individualUserSubscriptions.find(({ status }) => status === SubscriptionStatus.ACTIVE) ??
-    individualUserSubscriptions[0];
+    communityPlanUserSubscriptions.find(({ status }) => status === SubscriptionStatus.ACTIVE) ??
+    communityPlanUserSubscriptions[0];
 
   if (subscription?.priceId) {
     subscriptionProduct = await getProductByPriceId({ priceId: subscription.priceId }).catch(
diff --git a/apps/web/src/app/(dashboard)/settings/profile/page.tsx b/apps/web/src/app/(dashboard)/settings/profile/page.tsx
index 60f7da49c..2890eb5d5 100644
--- a/apps/web/src/app/(dashboard)/settings/profile/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/profile/page.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 
+import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
 import { ProfileForm } from '~/components/forms/profile';
 
 export const metadata: Metadata = {
@@ -13,11 +14,7 @@ export default async function ProfileSettingsPage() {
 
   return (
     <div>
-      <h3 className="text-2xl font-semibold">Profile</h3>
-
-      <p className="text-muted-foreground mt-2 text-sm">Here you can edit your personal details.</p>
-
-      <hr className="my-4" />
+      <SettingsHeader title="Profile" subtitle="Here you can edit your personal details." />
 
       <ProfileForm user={user} className="max-w-xl" />
     </div>
diff --git a/apps/web/src/app/(dashboard)/settings/security/page.tsx b/apps/web/src/app/(dashboard)/settings/security/page.tsx
index 4e0a40838..f46784aed 100644
--- a/apps/web/src/app/(dashboard)/settings/security/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/security/page.tsx
@@ -6,6 +6,7 @@ import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 
+import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
 import { AuthenticatorApp } from '~/components/forms/2fa/authenticator-app';
 import { RecoveryCodes } from '~/components/forms/2fa/recovery-codes';
 import { PasswordForm } from '~/components/forms/password';
@@ -19,13 +20,10 @@ export default async function SecuritySettingsPage() {
 
   return (
     <div>
-      <h3 className="text-2xl font-semibold">Security</h3>
-
-      <p className="text-muted-foreground mt-2 text-sm">
-        Here you can manage your password and security settings.
-      </p>
-
-      <hr className="my-4" />
+      <SettingsHeader
+        title="Security"
+        subtitle="Here you can manage your password and security settings."
+      />
 
       {user.identityProvider === 'DOCUMENSO' ? (
         <div>
diff --git a/apps/web/src/app/(dashboard)/settings/teams/accept-team-invitation-button.tsx b/apps/web/src/app/(dashboard)/settings/teams/accept-team-invitation-button.tsx
new file mode 100644
index 000000000..8aa81653d
--- /dev/null
+++ b/apps/web/src/app/(dashboard)/settings/teams/accept-team-invitation-button.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type AcceptTeamInvitationButtonProps = {
+  teamId: number;
+};
+
+export const AcceptTeamInvitationButton = ({ teamId }: AcceptTeamInvitationButtonProps) => {
+  const { toast } = useToast();
+
+  const {
+    mutateAsync: acceptTeamInvitation,
+    isLoading,
+    isSuccess,
+  } = trpc.team.acceptTeamInvitation.useMutation({
+    onSuccess: () => {
+      toast({
+        title: 'Success',
+        description: 'Accepted team invitation',
+        duration: 5000,
+      });
+    },
+    onError: () => {
+      toast({
+        title: 'Something went wrong',
+        variant: 'destructive',
+        duration: 10000,
+        description: 'Unable to join this team at this time.',
+      });
+    },
+  });
+
+  return (
+    <Button
+      onClick={async () => acceptTeamInvitation({ teamId })}
+      loading={isLoading}
+      disabled={isLoading || isSuccess}
+    >
+      Accept
+    </Button>
+  );
+};
diff --git a/apps/web/src/app/(dashboard)/settings/teams/page.tsx b/apps/web/src/app/(dashboard)/settings/teams/page.tsx
new file mode 100644
index 000000000..1a3d90b66
--- /dev/null
+++ b/apps/web/src/app/(dashboard)/settings/teams/page.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import { AnimatePresence } from 'framer-motion';
+
+import { trpc } from '@documenso/trpc/react';
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+
+import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+import { CreateTeamDialog } from '~/components/(teams)/dialogs/create-team-dialog';
+import { UserSettingsTeamsPageDataTable } from '~/components/(teams)/tables/user-settings-teams-page-data-table';
+
+import { TeamEmailUsage } from './team-email-usage';
+import { TeamInvitations } from './team-invitations';
+
+export default function TeamsSettingsPage() {
+  const { data: teamEmail } = trpc.team.getTeamEmailByEmail.useQuery();
+
+  return (
+    <div>
+      <SettingsHeader title="Teams" subtitle="Manage all teams you are currently associated with.">
+        <CreateTeamDialog />
+      </SettingsHeader>
+
+      <UserSettingsTeamsPageDataTable />
+
+      <div className="mt-8 space-y-8">
+        <AnimatePresence>
+          {teamEmail && (
+            <AnimateGenericFadeInOut>
+              <TeamEmailUsage teamEmail={teamEmail} />
+            </AnimateGenericFadeInOut>
+          )}
+        </AnimatePresence>
+
+        <TeamInvitations />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/(dashboard)/settings/teams/team-email-usage.tsx b/apps/web/src/app/(dashboard)/settings/teams/team-email-usage.tsx
new file mode 100644
index 000000000..56a7b110a
--- /dev/null
+++ b/apps/web/src/app/(dashboard)/settings/teams/team-email-usage.tsx
@@ -0,0 +1,105 @@
+'use client';
+
+import { useState } from 'react';
+
+import type { TeamEmail } from '@documenso/prisma/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 TeamEmailUsageProps = {
+  teamEmail: TeamEmail & { team: { name: string; url: string } };
+};
+
+export const TeamEmailUsage = ({ teamEmail }: TeamEmailUsageProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const { mutateAsync: deleteTeamEmail, isLoading: isDeletingTeamEmail } =
+    trpc.team.deleteTeamEmail.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'You have successfully revoked access.',
+          duration: 5000,
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          variant: 'destructive',
+          duration: 10000,
+          description:
+            'We encountered an unknown error while attempting to revoke access. Please try again or contact support.',
+        });
+      },
+    });
+
+  return (
+    <Alert variant="neutral" className="flex flex-row items-center justify-between p-6">
+      <div>
+        <AlertTitle className="mb-0">Team Email</AlertTitle>
+        <AlertDescription>
+          <p>
+            Your email is currently being used by team{' '}
+            <span className="font-semibold">{teamEmail.team.name}</span> ({teamEmail.team.url}
+            ).
+          </p>
+
+          <p className="mt-1">They have permission on your behalf to:</p>
+
+          <ul className="mt-0.5 list-inside list-disc">
+            <li>Display your name and email in documents</li>
+            <li>View all documents sent to your account</li>
+          </ul>
+        </AlertDescription>
+      </div>
+
+      <Dialog open={open} onOpenChange={(value) => !isDeletingTeamEmail && setOpen(value)}>
+        <DialogTrigger asChild>
+          <Button variant="destructive">Revoke access</Button>
+        </DialogTrigger>
+
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>Are you sure?</DialogTitle>
+
+            <DialogDescription className="mt-4">
+              You are about to revoke access for team{' '}
+              <span className="font-semibold">{teamEmail.team.name}</span> ({teamEmail.team.url}) to
+              use your email.
+            </DialogDescription>
+          </DialogHeader>
+
+          <fieldset disabled={isDeletingTeamEmail}>
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+
+              <Button
+                type="submit"
+                variant="destructive"
+                loading={isDeletingTeamEmail}
+                onClick={async () => deleteTeamEmail({ teamId: teamEmail.teamId })}
+              >
+                Revoke
+              </Button>
+            </DialogFooter>
+          </fieldset>
+        </DialogContent>
+      </Dialog>
+    </Alert>
+  );
+};
diff --git a/apps/web/src/app/(dashboard)/settings/teams/team-invitations.tsx b/apps/web/src/app/(dashboard)/settings/teams/team-invitations.tsx
new file mode 100644
index 000000000..aa1be3f3f
--- /dev/null
+++ b/apps/web/src/app/(dashboard)/settings/teams/team-invitations.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import { AnimatePresence } from 'framer-motion';
+import { BellIcon } from 'lucide-react';
+
+import { formatTeamUrl } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+
+import { AcceptTeamInvitationButton } from './accept-team-invitation-button';
+
+export const TeamInvitations = () => {
+  const { data, isInitialLoading } = trpc.team.getTeamInvitations.useQuery();
+
+  return (
+    <AnimatePresence>
+      {data && data.length > 0 && !isInitialLoading && (
+        <AnimateGenericFadeInOut>
+          <Alert variant="secondary">
+            <div className="flex h-full flex-row items-center p-2">
+              <BellIcon className="mr-4 h-5 w-5 text-blue-800" />
+
+              <AlertDescription className="mr-2">
+                You have <strong>{data.length}</strong> pending team invitation
+                {data.length > 1 ? 's' : ''}.
+              </AlertDescription>
+
+              <Dialog>
+                <DialogTrigger asChild>
+                  <button className="ml-auto text-sm font-medium text-blue-700 hover:text-blue-600">
+                    View invites
+                  </button>
+                </DialogTrigger>
+
+                <DialogContent position="center">
+                  <DialogHeader>
+                    <DialogTitle>Pending invitations</DialogTitle>
+
+                    <DialogDescription className="mt-4">
+                      You have {data.length} pending team invitation{data.length > 1 ? 's' : ''}.
+                    </DialogDescription>
+                  </DialogHeader>
+
+                  <ul className="-mx-6 -mb-6 max-h-[80vh] divide-y overflow-auto px-6 pb-6 xl:max-h-[70vh]">
+                    {data.map((invitation) => (
+                      <li key={invitation.teamId}>
+                        <AvatarWithText
+                          className="w-full max-w-none py-4"
+                          avatarFallback={invitation.team.name.slice(0, 1)}
+                          primaryText={
+                            <span className="text-foreground/80 font-semibold">
+                              {invitation.team.name}
+                            </span>
+                          }
+                          secondaryText={formatTeamUrl(invitation.team.url)}
+                          rightSideComponent={
+                            <div className="ml-auto">
+                              <AcceptTeamInvitationButton teamId={invitation.team.id} />
+                            </div>
+                          }
+                        />
+                      </li>
+                    ))}
+                  </ul>
+                </DialogContent>
+              </Dialog>
+            </div>
+          </Alert>
+        </AnimateGenericFadeInOut>
+      )}
+    </AnimatePresence>
+  );
+};
diff --git a/apps/web/src/app/(dashboard)/templates/data-table-templates.tsx b/apps/web/src/app/(dashboard)/templates/data-table-templates.tsx
index 7930dcd0e..0e8f822c2 100644
--- a/apps/web/src/app/(dashboard)/templates/data-table-templates.tsx
+++ b/apps/web/src/app/(dashboard)/templates/data-table-templates.tsx
@@ -83,7 +83,7 @@ export const TemplatesDataTable = ({
   return (
     <div className="relative">
       {remaining.documents === 0 && (
-        <Alert className="mb-4 mt-5">
+        <Alert variant="warning" className="mb-4">
           <AlertTriangle className="h-4 w-4" />
           <AlertTitle>Document Limit Exceeded!</AlertTitle>
           <AlertDescription className="mt-2">
diff --git a/apps/web/src/app/(signing)/sign/[token]/layout.tsx b/apps/web/src/app/(signing)/sign/[token]/layout.tsx
index cfec41cdf..9db36e8aa 100644
--- a/apps/web/src/app/(signing)/sign/[token]/layout.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/layout.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 
 import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
+import { getTeams } from '@documenso/lib/server-only/team/get-teams';
 
 import { Header as AuthenticatedHeader } from '~/components/(dashboard)/layout/header';
 import { NextAuthProvider } from '~/providers/next-auth';
@@ -12,10 +14,16 @@ export type SigningLayoutProps = {
 export default async function SigningLayout({ children }: SigningLayoutProps) {
   const { user, session } = await getServerComponentSession();
 
+  let teams: GetTeamsResponse = [];
+
+  if (user && session) {
+    teams = await getTeams({ userId: user.id });
+  }
+
   return (
     <NextAuthProvider session={session}>
       <div className="min-h-screen">
-        {user && <AuthenticatedHeader user={user} />}
+        {user && <AuthenticatedHeader user={user} teams={teams} />}
 
         <main className="mb-8 mt-8 px-4 md:mb-12 md:mt-12 md:px-8">{children}</main>
       </div>
diff --git a/apps/web/src/app/(teams)/t/[teamUrl]/documents/[id]/page.tsx b/apps/web/src/app/(teams)/t/[teamUrl]/documents/[id]/page.tsx
new file mode 100644
index 000000000..b7f610cff
--- /dev/null
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/documents/[id]/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 DocumentPageComponent from '~/app/(dashboard)/documents/[id]/document-page-view';
+
+export type DocumentPageProps = {
+  params: {
+    id: string;
+    teamUrl: string;
+  };
+};
+
+export default async function DocumentPage({ params }: DocumentPageProps) {
+  const { teamUrl } = params;
+
+  const { user } = await getRequiredServerComponentSession();
+  const team = await getTeamByUrl({ userId: user.id, teamUrl });
+
+  return <DocumentPageComponent params={params} team={team} />;
+}
diff --git a/apps/web/src/app/(teams)/t/[teamUrl]/documents/page.tsx b/apps/web/src/app/(teams)/t/[teamUrl]/documents/page.tsx
new file mode 100644
index 000000000..952aeeeea
--- /dev/null
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/documents/page.tsx
@@ -0,0 +1,25 @@
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+
+import type { DocumentsPageViewProps } from '~/app/(dashboard)/documents/documents-page-view';
+import DocumentsPageView from '~/app/(dashboard)/documents/documents-page-view';
+
+export type TeamsDocumentPageProps = {
+  params: {
+    teamUrl: string;
+  };
+  searchParams?: DocumentsPageViewProps['searchParams'];
+};
+
+export default async function TeamsDocumentPage({
+  params,
+  searchParams = {},
+}: TeamsDocumentPageProps) {
+  const { teamUrl } = params;
+
+  const { user } = await getRequiredServerComponentSession();
+
+  const team = await getTeamByUrl({ userId: user.id, teamUrl });
+
+  return <DocumentsPageView searchParams={searchParams} team={team} />;
+}
diff --git a/apps/web/src/app/(teams)/t/[teamUrl]/error.tsx b/apps/web/src/app/(teams)/t/[teamUrl]/error.tsx
new file mode 100644
index 000000000..1e1eb9921
--- /dev/null
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/error.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
+import { ChevronLeft } from 'lucide-react';
+
+import { AppErrorCode } from '@documenso/lib/errors/app-error';
+import { Button } from '@documenso/ui/primitives/button';
+
+type ErrorProps = {
+  error: Error & { digest?: string };
+};
+
+export default function ErrorPage({ error }: ErrorProps) {
+  const router = useRouter();
+
+  let errorMessage = 'Unknown error';
+  let errorDetails = '';
+
+  if (error.message === AppErrorCode.UNAUTHORIZED) {
+    errorMessage = 'Unauthorized';
+    errorDetails = 'You are not authorized to view this page.';
+  }
+
+  return (
+    <div className="mx-auto flex min-h-[80vh] w-full items-center justify-center py-32">
+      <div>
+        <p className="text-muted-foreground font-semibold">{errorMessage}</p>
+
+        <h1 className="mt-3 text-2xl font-bold md:text-3xl">Oops! Something went wrong.</h1>
+
+        <p className="text-muted-foreground mt-4 text-sm">{errorDetails}</p>
+
+        <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
+          <Button
+            variant="ghost"
+            className="w-32"
+            onClick={() => {
+              void router.back();
+            }}
+          >
+            <ChevronLeft className="mr-2 h-4 w-4" />
+            Go Back
+          </Button>
+
+          <Button asChild>
+            <Link href="/settings/teams">View teams</Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/(teams)/t/[teamUrl]/layout-billing-banner.tsx b/apps/web/src/app/(teams)/t/[teamUrl]/layout-billing-banner.tsx
new file mode 100644
index 000000000..3b4f43031
--- /dev/null
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/layout-billing-banner.tsx
@@ -0,0 +1,130 @@
+'use client';
+
+import { useState } from 'react';
+
+import { AlertTriangle } from 'lucide-react';
+import { match } from 'ts-pattern';
+
+import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import type { TeamMemberRole } from '@documenso/prisma/client';
+import { type Subscription, SubscriptionStatus } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type LayoutBillingBannerProps = {
+  subscription: Subscription;
+  teamId: number;
+  userRole: TeamMemberRole;
+};
+
+export const LayoutBillingBanner = ({
+  subscription,
+  teamId,
+  userRole,
+}: LayoutBillingBannerProps) => {
+  const { toast } = useToast();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { mutateAsync: createBillingPortal, isLoading } =
+    trpc.team.createBillingPortal.useMutation();
+
+  const handleCreatePortal = async () => {
+    try {
+      const sessionUrl = await createBillingPortal({ teamId });
+
+      window.open(sessionUrl, '_blank');
+
+      setIsOpen(false);
+    } catch (err) {
+      toast({
+        title: 'Something went wrong',
+        description:
+          'We are unable to proceed to the billing portal at this time. Please try again, or contact support.',
+        variant: 'destructive',
+        duration: 10000,
+      });
+    }
+  };
+
+  if (subscription.status === SubscriptionStatus.ACTIVE) {
+    return null;
+  }
+
+  return (
+    <>
+      <div
+        className={cn({
+          'bg-yellow-200 text-yellow-900 dark:bg-yellow-400':
+            subscription.status === SubscriptionStatus.PAST_DUE,
+          'bg-destructive text-destructive-foreground':
+            subscription.status === SubscriptionStatus.INACTIVE,
+        })}
+      >
+        <div className="mx-auto flex max-w-screen-xl items-center justify-center gap-x-4 px-4 py-2 text-sm font-medium">
+          <div className="flex items-center">
+            <AlertTriangle className="mr-2.5 h-5 w-5" />
+
+            {match(subscription.status)
+              .with(SubscriptionStatus.PAST_DUE, () => 'Payment overdue')
+              .with(SubscriptionStatus.INACTIVE, () => 'Teams restricted')
+              .exhaustive()}
+          </div>
+
+          <Button
+            variant="ghost"
+            className={cn({
+              'text-yellow-900 hover:bg-yellow-100 hover:text-yellow-900 dark:hover:bg-yellow-500':
+                subscription.status === SubscriptionStatus.PAST_DUE,
+              'text-destructive-foreground hover:bg-destructive-foreground hover:text-white':
+                subscription.status === SubscriptionStatus.INACTIVE,
+            })}
+            disabled={isLoading}
+            onClick={() => setIsOpen(true)}
+            size="sm"
+          >
+            Resolve
+          </Button>
+        </div>
+      </div>
+
+      <Dialog open={isOpen} onOpenChange={(value) => !isLoading && setIsOpen(value)}>
+        <DialogContent>
+          <DialogTitle>Payment overdue</DialogTitle>
+
+          {match(subscription.status)
+            .with(SubscriptionStatus.PAST_DUE, () => (
+              <DialogDescription>
+                Your payment for teams is overdue. Please settle the payment to avoid any service
+                disruptions.
+              </DialogDescription>
+            ))
+            .with(SubscriptionStatus.INACTIVE, () => (
+              <DialogDescription>
+                Due to an unpaid invoice, your team has been restricted. Please settle the payment
+                to restore full access to your team.
+              </DialogDescription>
+            ))
+            .otherwise(() => null)}
+
+          {canExecuteTeamAction('MANAGE_BILLING', userRole) && (
+            <DialogFooter>
+              <Button loading={isLoading} onClick={handleCreatePortal}>
+                Resolve payment
+              </Button>
+            </DialogFooter>
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
diff --git a/apps/web/src/app/(teams)/t/[teamUrl]/layout.tsx b/apps/web/src/app/(teams)/t/[teamUrl]/layout.tsx
new file mode 100644
index 000000000..2883abc21
--- /dev/null
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/layout.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+
+import { RedirectType, redirect } from 'next/navigation';
+
+import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/server';
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { getTeams } from '@documenso/lib/server-only/team/get-teams';
+import { SubscriptionStatus } from '@documenso/prisma/client';
+
+import { Header } from '~/components/(dashboard)/layout/header';
+import { RefreshOnFocus } from '~/components/(dashboard)/refresh-on-focus/refresh-on-focus';
+import { NextAuthProvider } from '~/providers/next-auth';
+
+import { LayoutBillingBanner } from './layout-billing-banner';
+
+export type AuthenticatedTeamsLayoutProps = {
+  children: React.ReactNode;
+  params: {
+    teamUrl: string;
+  };
+};
+
+export default async function AuthenticatedTeamsLayout({
+  children,
+  params,
+}: AuthenticatedTeamsLayoutProps) {
+  const { session, user } = await getServerComponentSession();
+
+  if (!session || !user) {
+    redirect('/signin');
+  }
+
+  const [getTeamsPromise, getTeamPromise] = await Promise.allSettled([
+    getTeams({ userId: user.id }),
+    getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl }),
+  ]);
+
+  if (getTeamPromise.status === 'rejected') {
+    redirect('/documents', RedirectType.replace);
+  }
+
+  const team = getTeamPromise.value;
+  const teams = getTeamsPromise.status === 'fulfilled' ? getTeamsPromise.value : [];
+
+  return (
+    <NextAuthProvider session={session}>
+      <LimitsProvider teamId={team.id}>
+        {team.subscription && team.subscription.status !== SubscriptionStatus.ACTIVE && (
+          <LayoutBillingBanner
+            subscription={team.subscription}
+            teamId={team.id}
+            userRole={team.currentTeamMember.role}
+          />
+        )}
+
+        <Header user={user} teams={teams} />
+
+        <main className="mt-8 pb-8 md:mt-12 md:pb-12">{children}</main>
+
+        <RefreshOnFocus />
+      </LimitsProvider>
+    </NextAuthProvider>
+  );
+}
diff --git a/apps/web/src/app/(teams)/t/[teamUrl]/not-found.tsx b/apps/web/src/app/(teams)/t/[teamUrl]/not-found.tsx
new file mode 100644
index 000000000..35962e264
--- /dev/null
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/not-found.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import Link from 'next/link';
+
+import { ChevronLeft } from 'lucide-react';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export default function NotFound() {
+  return (
+    <div className="mx-auto flex min-h-[80vh] w-full items-center justify-center py-32">
+      <div>
+        <p className="text-muted-foreground font-semibold">404 Team not found</p>
+
+        <h1 className="mt-3 text-2xl font-bold md:text-3xl">Oops! Something went wrong.</h1>
+
+        <p className="text-muted-foreground mt-4 text-sm">
+          The team you are looking for may have been removed, renamed or may have never existed.
+        </p>
+
+        <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
+          <Button asChild className="w-32">
+            <Link href="/settings/teams">
+              <ChevronLeft className="mr-2 h-4 w-4" />
+              Go Back
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/(teams)/t/[teamUrl]/settings/billing/page.tsx b/apps/web/src/app/(teams)/t/[teamUrl]/settings/billing/page.tsx
new file mode 100644
index 000000000..1d0e87f79
--- /dev/null
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/settings/billing/page.tsx
@@ -0,0 +1,84 @@
+import { DateTime } from 'luxon';
+import type Stripe from 'stripe';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { stripe } from '@documenso/lib/server-only/stripe';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+import { TeamBillingInvoicesDataTable } from '~/components/(teams)/tables/team-billing-invoices-data-table';
+import { TeamBillingPortalButton } from '~/components/(teams)/team-billing-portal-button';
+
+export type TeamsSettingsBillingPageProps = {
+  params: {
+    teamUrl: string;
+  };
+};
+
+export default async function TeamsSettingBillingPage({ params }: TeamsSettingsBillingPageProps) {
+  const session = await getRequiredServerComponentSession();
+
+  const team = await getTeamByUrl({ userId: session.user.id, teamUrl: params.teamUrl });
+
+  const canManageBilling = canExecuteTeamAction('MANAGE_BILLING', team.currentTeamMember.role);
+
+  let teamSubscription: Stripe.Subscription | null = null;
+
+  if (team.subscription) {
+    teamSubscription = await stripe.subscriptions.retrieve(team.subscription.planId);
+  }
+
+  const formatTeamSubscriptionDetails = (subscription: Stripe.Subscription | null) => {
+    if (!subscription) {
+      return 'No payment required';
+    }
+
+    const numberOfSeats = subscription.items.data[0].quantity ?? 0;
+
+    const formattedTeamMemberQuanity = numberOfSeats > 1 ? `${numberOfSeats} members` : '1 member';
+
+    const formattedDate = DateTime.fromSeconds(subscription.current_period_end).toFormat(
+      'LLL dd, yyyy',
+    );
+
+    return `${formattedTeamMemberQuanity} • Monthly • Renews: ${formattedDate}`;
+  };
+
+  return (
+    <div>
+      <SettingsHeader title="Billing" subtitle="Your subscription is currently active." />
+
+      <Card gradient className="shadow-sm">
+        <CardContent className="flex flex-row items-center justify-between p-4">
+          <div className="flex flex-col text-sm">
+            <p className="text-foreground font-semibold">
+              Current plan: {teamSubscription ? 'Team' : 'Community Team'}
+            </p>
+
+            <p className="text-muted-foreground mt-0.5">
+              {formatTeamSubscriptionDetails(teamSubscription)}
+            </p>
+          </div>
+
+          {teamSubscription && (
+            <div
+              title={
+                canManageBilling
+                  ? 'Manage team subscription.'
+                  : 'You must be an admin of this team to manage billing.'
+              }
+            >
+              <TeamBillingPortalButton teamId={team.id} />
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <section className="mt-6">
+        <TeamBillingInvoicesDataTable teamId={team.id} />
+      </section>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/(teams)/t/[teamUrl]/settings/layout.tsx b/apps/web/src/app/(teams)/t/[teamUrl]/settings/layout.tsx
new file mode 100644
index 000000000..fe2ee5aee
--- /dev/null
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/settings/layout.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { notFound } from 'next/navigation';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+
+import { DesktopNav } from '~/components/(teams)/settings/layout/desktop-nav';
+import { MobileNav } from '~/components/(teams)/settings/layout/mobile-nav';
+
+export type TeamSettingsLayoutProps = {
+  children: React.ReactNode;
+  params: {
+    teamUrl: string;
+  };
+};
+
+export default async function TeamsSettingsLayout({
+  children,
+  params: { teamUrl },
+}: TeamSettingsLayoutProps) {
+  const session = await getRequiredServerComponentSession();
+
+  try {
+    const team = await getTeamByUrl({ userId: session.user.id, teamUrl });
+
+    if (!canExecuteTeamAction('MANAGE_TEAM', team.currentTeamMember.role)) {
+      throw new Error(AppErrorCode.UNAUTHORIZED);
+    }
+  } catch (e) {
+    const error = AppError.parseError(e);
+
+    if (error.code === 'P2025') {
+      notFound();
+    }
+
+    throw e;
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <h1 className="text-4xl font-semibold">Team Settings</h1>
+
+      <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
+        <DesktopNav className="hidden md:col-span-3 md:flex" />
+        <MobileNav className="col-span-12 mb-8 md:hidden" />
+
+        <div className="col-span-12 md:col-span-9">{children}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/(teams)/t/[teamUrl]/settings/members/page.tsx b/apps/web/src/app/(teams)/t/[teamUrl]/settings/members/page.tsx
new file mode 100644
index 000000000..4617b3d48
--- /dev/null
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/settings/members/page.tsx
@@ -0,0 +1,38 @@
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+
+import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+import { InviteTeamMembersDialog } from '~/components/(teams)/dialogs/invite-team-member-dialog';
+import { TeamsMemberPageDataTable } from '~/components/(teams)/tables/teams-member-page-data-table';
+
+export type TeamsSettingsMembersPageProps = {
+  params: {
+    teamUrl: string;
+  };
+};
+
+export default async function TeamsSettingsMembersPage({ params }: TeamsSettingsMembersPageProps) {
+  const { teamUrl } = params;
+
+  const session = await getRequiredServerComponentSession();
+
+  const team = await getTeamByUrl({ userId: session.user.id, teamUrl });
+
+  return (
+    <div>
+      <SettingsHeader title="Members" subtitle="Manage the members or invite new members.">
+        <InviteTeamMembersDialog
+          teamId={team.id}
+          currentUserTeamRole={team.currentTeamMember.role}
+        />
+      </SettingsHeader>
+
+      <TeamsMemberPageDataTable
+        currentUserTeamRole={team.currentTeamMember.role}
+        teamId={team.id}
+        teamName={team.name}
+        teamOwnerUserId={team.ownerUserId}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/src/app/(teams)/t/[teamUrl]/settings/page.tsx b/apps/web/src/app/(teams)/t/[teamUrl]/settings/page.tsx
new file mode 100644
index 000000000..a86797191
--- /dev/null
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/settings/page.tsx
@@ -0,0 +1,186 @@
+import { CheckCircle2, Clock } from 'lucide-react';
+import { P, match } from 'ts-pattern';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { isTokenExpired } from '@documenso/lib/utils/token-verification';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+
+import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+import { AddTeamEmailDialog } from '~/components/(teams)/dialogs/add-team-email-dialog';
+import { DeleteTeamDialog } from '~/components/(teams)/dialogs/delete-team-dialog';
+import { TransferTeamDialog } from '~/components/(teams)/dialogs/transfer-team-dialog';
+import { UpdateTeamForm } from '~/components/(teams)/forms/update-team-form';
+
+import { TeamEmailDropdown } from './team-email-dropdown';
+import { TeamTransferStatus } from './team-transfer-status';
+
+export type TeamsSettingsPageProps = {
+  params: {
+    teamUrl: string;
+  };
+};
+
+export default async function TeamsSettingsPage({ params }: TeamsSettingsPageProps) {
+  const { teamUrl } = params;
+
+  const session = await getRequiredServerComponentSession();
+
+  const team = await getTeamByUrl({ userId: session.user.id, teamUrl });
+
+  const isTransferVerificationExpired =
+    !team.transferVerification || isTokenExpired(team.transferVerification.expiresAt);
+
+  return (
+    <div>
+      <SettingsHeader title="Team Profile" subtitle="Here you can edit your team's details." />
+
+      <TeamTransferStatus
+        className="mb-4"
+        currentUserTeamRole={team.currentTeamMember.role}
+        teamId={team.id}
+        transferVerification={team.transferVerification}
+      />
+
+      <UpdateTeamForm teamId={team.id} teamName={team.name} teamUrl={team.url} />
+
+      <section className="mt-6 space-y-6">
+        {(team.teamEmail || team.emailVerification) && (
+          <Alert className="p-6" variant="neutral">
+            <AlertTitle>Team email</AlertTitle>
+
+            <AlertDescription className="mr-2">
+              You can view documents associated with this email and use this identity when sending
+              documents.
+            </AlertDescription>
+
+            <hr className="border-border/50 mt-2" />
+
+            <div className="flex flex-row items-center justify-between pt-4">
+              <AvatarWithText
+                avatarClass="h-12 w-12"
+                avatarFallback={extractInitials(
+                  (team.teamEmail?.name || team.emailVerification?.name) ?? '',
+                )}
+                primaryText={
+                  <span className="text-foreground/80 text-sm font-semibold">
+                    {team.teamEmail?.name || team.emailVerification?.name}
+                  </span>
+                }
+                secondaryText={
+                  <span className="text-sm">
+                    {team.teamEmail?.email || team.emailVerification?.email}
+                  </span>
+                }
+              />
+
+              <div className="flex flex-row items-center pr-2">
+                <div className="text-muted-foreground mr-4 flex flex-row items-center text-sm xl:mr-8">
+                  {match({
+                    teamEmail: team.teamEmail,
+                    emailVerification: team.emailVerification,
+                  })
+                    .with({ teamEmail: P.not(null) }, () => (
+                      <>
+                        <CheckCircle2 className="mr-1.5 text-green-500 dark:text-green-300" />
+                        Active
+                      </>
+                    ))
+                    .with(
+                      {
+                        emailVerification: P.when(
+                          (emailVerification) =>
+                            emailVerification && emailVerification?.expiresAt < new Date(),
+                        ),
+                      },
+                      () => (
+                        <>
+                          <Clock className="mr-1.5 text-yellow-500 dark:text-yellow-200" />
+                          Expired
+                        </>
+                      ),
+                    )
+                    .with({ emailVerification: P.not(null) }, () => (
+                      <>
+                        <Clock className="mr-1.5 text-blue-600 dark:text-blue-300" />
+                        Awaiting email confirmation
+                      </>
+                    ))
+                    .otherwise(() => null)}
+                </div>
+
+                <TeamEmailDropdown team={team} />
+              </div>
+            </div>
+          </Alert>
+        )}
+
+        {!team.teamEmail && !team.emailVerification && (
+          <Alert
+            className="flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+            variant="neutral"
+          >
+            <div className="mb-4 sm:mb-0">
+              <AlertTitle>Team email</AlertTitle>
+
+              <AlertDescription className="mr-2">
+                <ul className="text-muted-foreground mt-0.5 list-inside list-disc text-sm">
+                  {/* Feature not available yet. */}
+                  {/* <li>Display this name and email when sending documents</li> */}
+                  {/* <li>View documents associated with this email</li> */}
+
+                  <span>View documents associated with this email</span>
+                </ul>
+              </AlertDescription>
+            </div>
+
+            <AddTeamEmailDialog teamId={team.id} />
+          </Alert>
+        )}
+
+        {team.ownerUserId === session.user.id && (
+          <>
+            {isTransferVerificationExpired && (
+              <Alert
+                className="flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+                variant="neutral"
+              >
+                <div className="mb-4 sm:mb-0">
+                  <AlertTitle>Transfer team</AlertTitle>
+
+                  <AlertDescription className="mr-2">
+                    Transfer the ownership of the team to another team member.
+                  </AlertDescription>
+                </div>
+
+                <TransferTeamDialog
+                  ownerUserId={team.ownerUserId}
+                  teamId={team.id}
+                  teamName={team.name}
+                />
+              </Alert>
+            )}
+
+            <Alert
+              className="flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+              variant="neutral"
+            >
+              <div className="mb-4 sm:mb-0">
+                <AlertTitle>Delete team</AlertTitle>
+
+                <AlertDescription className="mr-2">
+                  This team, and any associated data excluding billing invoices will be permanently
+                  deleted.
+                </AlertDescription>
+              </div>
+
+              <DeleteTeamDialog teamId={team.id} teamName={team.name} />
+            </Alert>
+          </>
+        )}
+      </section>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/(teams)/t/[teamUrl]/settings/team-email-dropdown.tsx b/apps/web/src/app/(teams)/t/[teamUrl]/settings/team-email-dropdown.tsx
new file mode 100644
index 000000000..e2c0a0d87
--- /dev/null
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/settings/team-email-dropdown.tsx
@@ -0,0 +1,143 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { Edit, Loader, Mail, MoreHorizontal, X } from 'lucide-react';
+
+import type { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { trpc } from '@documenso/trpc/react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { UpdateTeamEmailDialog } from '~/components/(teams)/dialogs/update-team-email-dialog';
+
+export type TeamsSettingsPageProps = {
+  team: Awaited<ReturnType<typeof getTeamByUrl>>;
+};
+
+export const TeamEmailDropdown = ({ team }: TeamsSettingsPageProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const { mutateAsync: resendEmailVerification, isLoading: isResendingEmailVerification } =
+    trpc.team.resendTeamEmailVerification.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Email verification has been resent',
+          duration: 5000,
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          variant: 'destructive',
+          duration: 10000,
+          description: 'Unable to resend verification at this time. Please try again.',
+        });
+      },
+    });
+
+  const { mutateAsync: deleteTeamEmail, isLoading: isDeletingTeamEmail } =
+    trpc.team.deleteTeamEmail.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Team email has been removed',
+          duration: 5000,
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          variant: 'destructive',
+          duration: 10000,
+          description: 'Unable to remove team email at this time. Please try again.',
+        });
+      },
+    });
+
+  const { mutateAsync: deleteTeamEmailVerification, isLoading: isDeletingTeamEmailVerification } =
+    trpc.team.deleteTeamEmailVerification.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Email verification has been removed',
+          duration: 5000,
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          variant: 'destructive',
+          duration: 10000,
+          description: 'Unable to remove email verification at this time. Please try again.',
+        });
+      },
+    });
+
+  const onRemove = async () => {
+    if (team.teamEmail) {
+      await deleteTeamEmail({ teamId: team.id });
+    }
+
+    if (team.emailVerification) {
+      await deleteTeamEmailVerification({ teamId: team.id });
+    }
+
+    router.refresh();
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="w-52" align="start" forceMount>
+        {!team.teamEmail && team.emailVerification && (
+          <DropdownMenuItem
+            disabled={isResendingEmailVerification}
+            onClick={(e) => {
+              e.preventDefault();
+              void resendEmailVerification({ teamId: team.id });
+            }}
+          >
+            {isResendingEmailVerification ? (
+              <Loader className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <Mail className="mr-2 h-4 w-4" />
+            )}
+            Resend verification
+          </DropdownMenuItem>
+        )}
+
+        {team.teamEmail && (
+          <UpdateTeamEmailDialog
+            teamEmail={team.teamEmail}
+            trigger={
+              <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                <Edit className="mr-2 h-4 w-4" />
+                Edit
+              </DropdownMenuItem>
+            }
+          />
+        )}
+
+        <DropdownMenuItem
+          disabled={isDeletingTeamEmail || isDeletingTeamEmailVerification}
+          onClick={async () => onRemove()}
+        >
+          <X className="mr-2 h-4 w-4" />
+          Remove
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
diff --git a/apps/web/src/app/(teams)/t/[teamUrl]/settings/team-transfer-status.tsx b/apps/web/src/app/(teams)/t/[teamUrl]/settings/team-transfer-status.tsx
new file mode 100644
index 000000000..cba50966f
--- /dev/null
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/settings/team-transfer-status.tsx
@@ -0,0 +1,115 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { AnimatePresence } from 'framer-motion';
+
+import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import { isTokenExpired } from '@documenso/lib/utils/token-verification';
+import type { TeamMemberRole, TeamTransferVerification } from '@documenso/prisma/client';
+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';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TeamTransferStatusProps = {
+  className?: string;
+  currentUserTeamRole: TeamMemberRole;
+  teamId: number;
+  transferVerification: TeamTransferVerification | null;
+};
+
+export const TeamTransferStatus = ({
+  className,
+  currentUserTeamRole,
+  teamId,
+  transferVerification,
+}: TeamTransferStatusProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const isExpired = transferVerification && isTokenExpired(transferVerification.expiresAt);
+
+  const { mutateAsync: deleteTeamTransferRequest, isLoading } =
+    trpc.team.deleteTeamTransferRequest.useMutation({
+      onSuccess: () => {
+        if (!isExpired) {
+          toast({
+            title: 'Success',
+            description: 'The team transfer invitation has been successfully deleted.',
+            duration: 5000,
+          });
+        }
+
+        router.refresh();
+      },
+      onError: () => {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          description:
+            'We encountered an unknown error while attempting to remove this transfer. Please try again or contact support.',
+        });
+      },
+    });
+
+  return (
+    <AnimatePresence>
+      {transferVerification && (
+        <AnimateGenericFadeInOut>
+          <Alert
+            variant={isExpired ? 'destructive' : 'warning'}
+            className={cn(
+              'flex flex-col justify-between p-6 sm:flex-row sm:items-center',
+              className,
+            )}
+          >
+            <div>
+              <AlertTitle>
+                {isExpired ? 'Team transfer request expired' : 'Team transfer in progress'}
+              </AlertTitle>
+
+              <AlertDescription>
+                {isExpired ? (
+                  <p className="text-sm">
+                    The team transfer request to <strong>{transferVerification.name}</strong> has
+                    expired.
+                  </p>
+                ) : (
+                  <section className="text-sm">
+                    <p>
+                      A request to transfer the ownership of this team has been sent to{' '}
+                      <strong>
+                        {transferVerification.name} ({transferVerification.email})
+                      </strong>
+                    </p>
+
+                    <p>
+                      If they accept this request, the team will be transferred to their account.
+                    </p>
+                  </section>
+                )}
+              </AlertDescription>
+            </div>
+
+            {canExecuteTeamAction('DELETE_TEAM_TRANSFER_REQUEST', currentUserTeamRole) && (
+              <Button
+                onClick={async () => deleteTeamTransferRequest({ teamId })}
+                loading={isLoading}
+                variant={isExpired ? 'destructive' : 'ghost'}
+                className={cn('ml-auto', {
+                  'hover:bg-transparent hover:text-blue-800': !isExpired,
+                })}
+              >
+                {isExpired ? 'Close' : 'Cancel'}
+              </Button>
+            )}
+          </Alert>
+        </AnimateGenericFadeInOut>
+      )}
+    </AnimatePresence>
+  );
+};
diff --git a/apps/web/src/app/(unauthenticated)/signin/page.tsx b/apps/web/src/app/(unauthenticated)/signin/page.tsx
index 1332a3f37..8331e7c03 100644
--- a/apps/web/src/app/(unauthenticated)/signin/page.tsx
+++ b/apps/web/src/app/(unauthenticated)/signin/page.tsx
@@ -1,7 +1,9 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
+import { redirect } from 'next/navigation';
 
 import { IS_GOOGLE_SSO_ENABLED } from '@documenso/lib/constants/auth';
+import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
 
 import { SignInForm } from '~/components/forms/signin';
 
@@ -9,7 +11,20 @@ export const metadata: Metadata = {
   title: 'Sign In',
 };
 
-export default function SignInPage() {
+type SignInPageProps = {
+  searchParams: {
+    email?: string;
+  };
+};
+
+export default function SignInPage({ searchParams }: SignInPageProps) {
+  const rawEmail = typeof searchParams.email === 'string' ? searchParams.email : undefined;
+  const email = rawEmail ? decryptSecondaryData(rawEmail) : null;
+
+  if (!email && rawEmail) {
+    redirect('/signin');
+  }
+
   return (
     <div>
       <h1 className="text-4xl font-semibold">Sign in to your account</h1>
@@ -18,7 +33,11 @@ export default function SignInPage() {
         Welcome back, we are lucky to have you.
       </p>
 
-      <SignInForm className="mt-4" isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED} />
+      <SignInForm
+        className="mt-4"
+        initialEmail={email || undefined}
+        isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
+      />
 
       {process.env.NEXT_PUBLIC_DISABLE_SIGNUP !== 'true' && (
         <p className="text-muted-foreground mt-6 text-center text-sm">
diff --git a/apps/web/src/app/(unauthenticated)/signup/page.tsx b/apps/web/src/app/(unauthenticated)/signup/page.tsx
index c6d49f891..dbbbcdba9 100644
--- a/apps/web/src/app/(unauthenticated)/signup/page.tsx
+++ b/apps/web/src/app/(unauthenticated)/signup/page.tsx
@@ -3,6 +3,7 @@ import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
 import { IS_GOOGLE_SSO_ENABLED } from '@documenso/lib/constants/auth';
+import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
 
 import { SignUpForm } from '~/components/forms/signup';
 
@@ -10,11 +11,24 @@ export const metadata: Metadata = {
   title: 'Sign Up',
 };
 
-export default function SignUpPage() {
+type SignUpPageProps = {
+  searchParams: {
+    email?: string;
+  };
+};
+
+export default function SignUpPage({ searchParams }: SignUpPageProps) {
   if (process.env.NEXT_PUBLIC_DISABLE_SIGNUP === 'true') {
     redirect('/signin');
   }
 
+  const rawEmail = typeof searchParams.email === 'string' ? searchParams.email : undefined;
+  const email = rawEmail ? decryptSecondaryData(rawEmail) : null;
+
+  if (!email && rawEmail) {
+    redirect('/signup');
+  }
+
   return (
     <div>
       <h1 className="text-4xl font-semibold">Create a new account</h1>
@@ -24,7 +38,11 @@ export default function SignUpPage() {
         signing is within your grasp.
       </p>
 
-      <SignUpForm className="mt-4" isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED} />
+      <SignUpForm
+        className="mt-4"
+        initialEmail={email || undefined}
+        isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
+      />
 
       <p className="text-muted-foreground mt-6 text-center text-sm">
         Already have an account?{' '}
diff --git a/apps/web/src/app/(unauthenticated)/team/invite/[token]/page.tsx b/apps/web/src/app/(unauthenticated)/team/invite/[token]/page.tsx
new file mode 100644
index 000000000..634416fe3
--- /dev/null
+++ b/apps/web/src/app/(unauthenticated)/team/invite/[token]/page.tsx
@@ -0,0 +1,121 @@
+import Link from 'next/link';
+
+import { DateTime } from 'luxon';
+
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { encryptSecondaryData } from '@documenso/lib/server-only/crypto/encrypt';
+import { acceptTeamInvitation } from '@documenso/lib/server-only/team/accept-team-invitation';
+import { getTeamById } from '@documenso/lib/server-only/team/get-team';
+import { prisma } from '@documenso/prisma';
+import { TeamMemberInviteStatus } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+
+type AcceptInvitationPageProps = {
+  params: {
+    token: string;
+  };
+};
+
+export default async function AcceptInvitationPage({
+  params: { token },
+}: AcceptInvitationPageProps) {
+  const session = await getServerComponentSession();
+
+  const teamMemberInvite = await prisma.teamMemberInvite.findUnique({
+    where: {
+      token,
+    },
+  });
+
+  if (!teamMemberInvite) {
+    return (
+      <div>
+        <h1 className="text-4xl font-semibold">Invalid token</h1>
+
+        <p className="text-muted-foreground mb-4 mt-2 text-sm">
+          This token is invalid or has expired. Please contact your team for a new invitation.
+        </p>
+
+        <Button asChild>
+          <Link href="/">Return</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  const team = await getTeamById({ teamId: teamMemberInvite.teamId });
+
+  const user = await prisma.user.findFirst({
+    where: {
+      email: {
+        equals: teamMemberInvite.email,
+        mode: 'insensitive',
+      },
+    },
+  });
+
+  // Directly convert the team member invite to a team member if they already have an account.
+  if (user) {
+    await acceptTeamInvitation({ userId: user.id, teamId: team.id });
+  }
+
+  // For users who do not exist yet, set the team invite status to accepted, which is checked during
+  // user creation to determine if we should add the user to the team at that time.
+  if (!user && teamMemberInvite.status !== TeamMemberInviteStatus.ACCEPTED) {
+    await prisma.teamMemberInvite.update({
+      where: {
+        id: teamMemberInvite.id,
+      },
+      data: {
+        status: TeamMemberInviteStatus.ACCEPTED,
+      },
+    });
+  }
+
+  const email = encryptSecondaryData({
+    data: teamMemberInvite.email,
+    expiresAt: DateTime.now().plus({ days: 1 }).toMillis(),
+  });
+
+  if (!user) {
+    return (
+      <div>
+        <h1 className="text-4xl font-semibold">Team invitation</h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          You have been invited by <strong>{team.name}</strong> to join their team.
+        </p>
+
+        <p className="text-muted-foreground mb-4 mt-1 text-sm">
+          To accept this invitation you must create an account.
+        </p>
+
+        <Button asChild>
+          <Link href={`/signup?email=${encodeURIComponent(email)}`}>Create account</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  const isSessionUserTheInvitedUser = user.id === session.user?.id;
+
+  return (
+    <div>
+      <h1 className="text-4xl font-semibold">Invitation accepted!</h1>
+
+      <p className="text-muted-foreground mb-4 mt-2 text-sm">
+        You have accepted an invitation from <strong>{team.name}</strong> to join their team.
+      </p>
+
+      {isSessionUserTheInvitedUser ? (
+        <Button asChild>
+          <Link href="/">Continue</Link>
+        </Button>
+      ) : (
+        <Button asChild>
+          <Link href={`/signin?email=${encodeURIComponent(email)}`}>Continue to login</Link>
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/app/(unauthenticated)/team/verify/email/[token]/page.tsx b/apps/web/src/app/(unauthenticated)/team/verify/email/[token]/page.tsx
new file mode 100644
index 000000000..53ad4461b
--- /dev/null
+++ b/apps/web/src/app/(unauthenticated)/team/verify/email/[token]/page.tsx
@@ -0,0 +1,89 @@
+import Link from 'next/link';
+
+import { isTokenExpired } from '@documenso/lib/utils/token-verification';
+import { prisma } from '@documenso/prisma';
+import { Button } from '@documenso/ui/primitives/button';
+
+type VerifyTeamEmailPageProps = {
+  params: {
+    token: string;
+  };
+};
+
+export default async function VerifyTeamEmailPage({ params: { token } }: VerifyTeamEmailPageProps) {
+  const teamEmailVerification = await prisma.teamEmailVerification.findUnique({
+    where: {
+      token,
+    },
+    include: {
+      team: true,
+    },
+  });
+
+  if (!teamEmailVerification || isTokenExpired(teamEmailVerification.expiresAt)) {
+    return (
+      <div>
+        <h1 className="text-4xl font-semibold">Invalid link</h1>
+
+        <p className="text-muted-foreground mb-4 mt-2 text-sm">
+          This link is invalid or has expired. Please contact your team to resend a verification.
+        </p>
+
+        <Button asChild>
+          <Link href="/">Return</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  const { team } = teamEmailVerification;
+
+  let isTeamEmailVerificationError = false;
+
+  try {
+    await prisma.$transaction([
+      prisma.teamEmailVerification.deleteMany({
+        where: {
+          teamId: team.id,
+        },
+      }),
+      prisma.teamEmail.create({
+        data: {
+          teamId: team.id,
+          email: teamEmailVerification.email,
+          name: teamEmailVerification.name,
+        },
+      }),
+    ]);
+  } catch (e) {
+    console.error(e);
+    isTeamEmailVerificationError = true;
+  }
+
+  if (isTeamEmailVerificationError) {
+    return (
+      <div>
+        <h1 className="text-4xl font-semibold">Team email verification</h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          Something went wrong while attempting to verify your email address for{' '}
+          <strong>{team.name}</strong>. Please try again later.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1 className="text-4xl font-semibold">Team email verified!</h1>
+
+      <p className="text-muted-foreground mb-4 mt-2 text-sm">
+        You have verified your email address for <strong>{team.name}</strong>.
+      </p>
+
+      <Button asChild>
+        <Link href="/">Continue</Link>
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/(unauthenticated)/team/verify/transfer/[token]/page.tsx b/apps/web/src/app/(unauthenticated)/team/verify/transfer/[token]/page.tsx
new file mode 100644
index 000000000..819b7e970
--- /dev/null
+++ b/apps/web/src/app/(unauthenticated)/team/verify/transfer/[token]/page.tsx
@@ -0,0 +1,80 @@
+import Link from 'next/link';
+
+import { transferTeamOwnership } from '@documenso/lib/server-only/team/transfer-team-ownership';
+import { isTokenExpired } from '@documenso/lib/utils/token-verification';
+import { prisma } from '@documenso/prisma';
+import { Button } from '@documenso/ui/primitives/button';
+
+type VerifyTeamTransferPage = {
+  params: {
+    token: string;
+  };
+};
+
+export default async function VerifyTeamTransferPage({
+  params: { token },
+}: VerifyTeamTransferPage) {
+  const teamTransferVerification = await prisma.teamTransferVerification.findUnique({
+    where: {
+      token,
+    },
+    include: {
+      team: true,
+    },
+  });
+
+  if (!teamTransferVerification || isTokenExpired(teamTransferVerification.expiresAt)) {
+    return (
+      <div>
+        <h1 className="text-4xl font-semibold">Invalid link</h1>
+
+        <p className="text-muted-foreground mb-4 mt-2 text-sm">
+          This link is invalid or has expired. Please contact your team to resend a transfer
+          request.
+        </p>
+
+        <Button asChild>
+          <Link href="/">Return</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  const { team } = teamTransferVerification;
+
+  let isTransferError = false;
+
+  try {
+    await transferTeamOwnership({ token });
+  } catch (e) {
+    console.error(e);
+    isTransferError = true;
+  }
+
+  if (isTransferError) {
+    return (
+      <div>
+        <h1 className="text-4xl font-semibold">Team ownership transfer</h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          Something went wrong while attempting to transfer the ownership of team{' '}
+          <strong>{team.name}</strong> to your. Please try again later or contact support.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1 className="text-4xl font-semibold">Team ownership transferred!</h1>
+
+      <p className="text-muted-foreground mb-4 mt-2 text-sm">
+        The ownership of team <strong>{team.name}</strong> has been successfully transferred to you.
+      </p>
+
+      <Button asChild>
+        <Link href={`/t/${team.url}/settings`}>Continue</Link>
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/(dashboard)/common/command-menu.tsx b/apps/web/src/components/(dashboard)/common/command-menu.tsx
index 0312a96d2..3fe42a4c4 100644
--- a/apps/web/src/components/(dashboard)/common/command-menu.tsx
+++ b/apps/web/src/components/(dashboard)/common/command-menu.tsx
@@ -197,20 +197,22 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
         )}
         {!currentPage && (
           <>
-            <CommandGroup heading="Documents">
+            <CommandGroup className="mx-2 p-0 pb-2" heading="Documents">
               <Commands push={push} pages={DOCUMENTS_PAGES} />
             </CommandGroup>
-            <CommandGroup heading="Templates">
+            <CommandGroup className="mx-2 p-0 pb-2" heading="Templates">
               <Commands push={push} pages={TEMPLATES_PAGES} />
             </CommandGroup>
-            <CommandGroup heading="Settings">
+            <CommandGroup className="mx-2 p-0 pb-2" heading="Settings">
               <Commands push={push} pages={SETTINGS_PAGES} />
             </CommandGroup>
-            <CommandGroup heading="Preferences">
-              <CommandItem onSelect={() => addPage('theme')}>Change theme</CommandItem>
+            <CommandGroup className="mx-2 p-0 pb-2" heading="Preferences">
+              <CommandItem className="-mx-2 -my-1 rounded-lg" onSelect={() => addPage('theme')}>
+                Change theme
+              </CommandItem>
             </CommandGroup>
             {searchResults.length > 0 && (
-              <CommandGroup heading="Your documents">
+              <CommandGroup className="mx-2 p-0 pb-2" heading="Your documents">
                 <Commands push={push} pages={searchResults} />
               </CommandGroup>
             )}
@@ -231,6 +233,7 @@ const Commands = ({
 }) => {
   return pages.map((page, idx) => (
     <CommandItem
+      className="-mx-2 -my-1 rounded-lg"
       key={page.path + idx}
       value={page.value ?? page.label}
       onSelect={() => push(page.path)}
@@ -255,7 +258,7 @@ const ThemeCommands = ({ setTheme }: { setTheme: (_theme: string) => void }) =>
     <CommandItem
       key={theme.theme}
       onSelect={() => setTheme(theme.theme)}
-      className="mx-2 first:mt-2 last:mb-2"
+      className="-my-1 mx-2 rounded-lg first:mt-2 last:mb-2"
     >
       <theme.icon className="mr-2" />
       {theme.label}
diff --git a/apps/web/src/components/(dashboard)/layout/desktop-nav.tsx b/apps/web/src/components/(dashboard)/layout/desktop-nav.tsx
index e04bc2818..2b11c4be2 100644
--- a/apps/web/src/components/(dashboard)/layout/desktop-nav.tsx
+++ b/apps/web/src/components/(dashboard)/layout/desktop-nav.tsx
@@ -4,10 +4,11 @@ import type { HTMLAttributes } from 'react';
 import { useEffect, useState } from 'react';
 
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
+import { useParams, usePathname } from 'next/navigation';
 
 import { Search } from 'lucide-react';
 
+import { getRootHref } from '@documenso/lib/utils/params';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
@@ -28,10 +29,13 @@ export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;
 
 export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
   const pathname = usePathname();
+  const params = useParams();
 
   const [open, setOpen] = useState(false);
   const [modifierKey, setModifierKey] = useState(() => 'Ctrl');
 
+  const rootHref = getRootHref(params, { returnEmptyRootString: true });
+
   useEffect(() => {
     const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : 'unknown';
     const isMacOS = /Macintosh|Mac\s+OS\s+X/i.test(userAgent);
@@ -48,20 +52,24 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
       {...props}
     >
       <div className="flex items-baseline gap-x-6">
-        {navigationLinks.map(({ href, label }) => (
-          <Link
-            key={href}
-            href={href}
-            className={cn(
-              'text-muted-foreground dark:text-muted focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
-              {
-                'text-foreground dark:text-muted-foreground': pathname?.startsWith(href),
-              },
-            )}
-          >
-            {label}
-          </Link>
-        ))}
+        {navigationLinks
+          .filter(({ href }) => href !== '/templates' || rootHref === '') // Remove templates for team pages.
+          .map(({ href, label }) => (
+            <Link
+              key={href}
+              href={`${rootHref}${href}`}
+              className={cn(
+                'text-muted-foreground dark:text-muted focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
+                {
+                  'text-foreground dark:text-muted-foreground': pathname?.startsWith(
+                    `${rootHref}${href}`,
+                  ),
+                },
+              )}
+            >
+              {label}
+            </Link>
+          ))}
       </div>
 
       <CommandMenu open={open} onOpenChange={setOpen} />
diff --git a/apps/web/src/components/(dashboard)/layout/header.tsx b/apps/web/src/components/(dashboard)/layout/header.tsx
index ba35671e6..753f5fb11 100644
--- a/apps/web/src/components/(dashboard)/layout/header.tsx
+++ b/apps/web/src/components/(dashboard)/layout/header.tsx
@@ -1,23 +1,34 @@
 'use client';
 
-import type { HTMLAttributes } from 'react';
-import { useEffect, useState } from 'react';
+import { type HTMLAttributes, useEffect, useState } from 'react';
 
 import Link from 'next/link';
+import { useParams } from 'next/navigation';
 
+import { MenuIcon, SearchIcon } from 'lucide-react';
+
+import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
+import { getRootHref } from '@documenso/lib/utils/params';
 import type { User } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 
 import { Logo } from '~/components/branding/logo';
 
+import { CommandMenu } from '../common/command-menu';
 import { DesktopNav } from './desktop-nav';
-import { ProfileDropdown } from './profile-dropdown';
+import { MenuSwitcher } from './menu-switcher';
+import { MobileNavigation } from './mobile-navigation';
 
 export type HeaderProps = HTMLAttributes<HTMLDivElement> & {
   user: User;
+  teams: GetTeamsResponse;
 };
 
-export const Header = ({ className, user, ...props }: HeaderProps) => {
+export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
+  const params = useParams();
+
+  const [isCommandMenuOpen, setIsCommandMenuOpen] = useState(false);
+  const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
   const [scrollY, setScrollY] = useState(0);
 
   useEffect(() => {
@@ -41,8 +52,8 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {
     >
       <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-x-4 px-4 md:justify-normal md:px-8">
         <Link
-          href="/"
-          className="focus-visible:ring-ring ring-offset-background rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+          href={getRootHref(params)}
+          className="focus-visible:ring-ring ring-offset-background hidden rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 md:inline"
         >
           <Logo className="h-6 w-auto" />
         </Link>
@@ -50,11 +61,24 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {
         <DesktopNav />
 
         <div className="flex gap-x-4 md:ml-8">
-          <ProfileDropdown user={user} />
+          <MenuSwitcher user={user} teams={teams} />
+        </div>
 
-          {/* <Button variant="outline" size="sm" className="h-10 w-10 p-0.5 md:hidden">
-            <Menu className="h-6 w-6" />
-          </Button> */}
+        <div className="flex flex-row items-center space-x-4 md:hidden">
+          <button onClick={() => setIsCommandMenuOpen(true)}>
+            <SearchIcon className="h-6 w-6" />
+          </button>
+
+          <button onClick={() => setIsHamburgerMenuOpen(true)}>
+            <MenuIcon className="h-6 w-6" />
+          </button>
+
+          <CommandMenu open={isCommandMenuOpen} onOpenChange={setIsCommandMenuOpen} />
+
+          <MobileNavigation
+            isMenuOpen={isHamburgerMenuOpen}
+            onMenuOpenChange={setIsHamburgerMenuOpen}
+          />
         </div>
       </div>
     </header>
diff --git a/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx b/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
new file mode 100644
index 000000000..35a05baf2
--- /dev/null
+++ b/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
@@ -0,0 +1,214 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { CheckCircle2, ChevronsUpDown, Plus, Settings2 } from 'lucide-react';
+import { signOut } from 'next-auth/react';
+
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
+import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import type { User } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+
+export type MenuSwitcherProps = {
+  user: User;
+  teams: GetTeamsResponse;
+};
+
+export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProps) => {
+  const pathname = usePathname();
+
+  const isUserAdmin = isAdmin(user);
+
+  const { data: teamsQueryResult } = trpc.team.getTeams.useQuery(undefined, {
+    initialData: initialTeamsData,
+  });
+
+  const teams = teamsQueryResult && teamsQueryResult.length > 0 ? teamsQueryResult : null;
+
+  const isPathTeamUrl = (teamUrl: string) => {
+    if (!pathname || !pathname.startsWith(`/t/`)) {
+      return false;
+    }
+
+    return pathname.split('/')[2] === teamUrl;
+  };
+
+  const selectedTeam = teams?.find((team) => isPathTeamUrl(team.url));
+
+  const formatAvatarFallback = (teamName?: string) => {
+    if (teamName !== undefined) {
+      return teamName.slice(0, 1).toUpperCase();
+    }
+
+    return user.name ? extractInitials(user.name) : user.email.slice(0, 1).toUpperCase();
+  };
+
+  const formatSecondaryAvatarText = (team?: typeof selectedTeam) => {
+    if (!team) {
+      return 'Personal Account';
+    }
+
+    if (team.ownerUserId === user.id) {
+      return 'Owner';
+    }
+
+    return TEAM_MEMBER_ROLE_MAP[team.currentTeamMember.role];
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          data-testid="menu-switcher"
+          variant="none"
+          className="relative flex h-12 flex-row items-center px-2 py-2 ring-0 focus-visible:border-0 focus-visible:ring-0"
+        >
+          <AvatarWithText
+            avatarFallback={formatAvatarFallback(selectedTeam?.name)}
+            primaryText={selectedTeam ? selectedTeam.name : user.name}
+            secondaryText={formatSecondaryAvatarText(selectedTeam)}
+            rightSideComponent={
+              <ChevronsUpDown className="text-muted-foreground ml-auto h-4 w-4" />
+            }
+          />
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        className={cn('z-[60] ml-2 w-full md:ml-0', teams ? 'min-w-[20rem]' : 'min-w-[12rem]')}
+        align="end"
+        forceMount
+      >
+        {teams ? (
+          <>
+            <DropdownMenuLabel>Personal</DropdownMenuLabel>
+
+            <DropdownMenuItem asChild>
+              <Link href="/">
+                <AvatarWithText
+                  avatarFallback={formatAvatarFallback()}
+                  primaryText={user.name}
+                  secondaryText={formatSecondaryAvatarText()}
+                  rightSideComponent={
+                    !pathname?.startsWith(`/t/`) && (
+                      <CheckCircle2 className="ml-auto fill-black text-white dark:fill-white dark:text-black" />
+                    )
+                  }
+                />
+              </Link>
+            </DropdownMenuItem>
+
+            <DropdownMenuSeparator className="mt-2" />
+
+            <DropdownMenuLabel>
+              <div className="flex flex-row items-center justify-between">
+                <p>Teams</p>
+
+                <div className="flex flex-row space-x-2">
+                  <DropdownMenuItem asChild>
+                    <Button
+                      title="Manage teams"
+                      variant="ghost"
+                      className="text-muted-foreground flex h-5 w-5 items-center justify-center p-0"
+                      asChild
+                    >
+                      <Link href="/settings/teams">
+                        <Settings2 className="h-4 w-4" />
+                      </Link>
+                    </Button>
+                  </DropdownMenuItem>
+
+                  <DropdownMenuItem asChild>
+                    <Button
+                      title="Create team"
+                      variant="ghost"
+                      className="text-muted-foreground flex h-5 w-5 items-center justify-center p-0"
+                      asChild
+                    >
+                      <Link href="/settings/teams?action=add-team">
+                        <Plus className="h-4 w-4" />
+                      </Link>
+                    </Button>
+                  </DropdownMenuItem>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+
+            {teams.map((team) => (
+              <DropdownMenuItem asChild key={team.id}>
+                <Link href={`/t/${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>
+            ))}
+          </>
+        ) : (
+          <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+            <Link
+              href="/settings/teams?action=add-team"
+              className="flex items-center justify-between"
+            >
+              Create team
+              <Plus className="ml-2 h-4 w-4" />
+            </Link>
+          </DropdownMenuItem>
+        )}
+
+        <DropdownMenuSeparator />
+
+        {isUserAdmin && (
+          <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+            <Link href="/admin">Admin panel</Link>
+          </DropdownMenuItem>
+        )}
+
+        <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+          <Link href="/settings/profile">User settings</Link>
+        </DropdownMenuItem>
+
+        {selectedTeam &&
+          canExecuteTeamAction('MANAGE_TEAM', selectedTeam.currentTeamMember.role) && (
+            <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+              <Link href={`/t/${selectedTeam.url}/settings/`}>Team settings</Link>
+            </DropdownMenuItem>
+          )}
+
+        <DropdownMenuItem
+          className="text-destructive/90 hover:!text-destructive px-4 py-2"
+          onSelect={async () =>
+            signOut({
+              callbackUrl: '/',
+            })
+          }
+        >
+          Sign Out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
diff --git a/apps/web/src/components/(dashboard)/layout/mobile-nav.tsx b/apps/web/src/components/(dashboard)/layout/mobile-nav.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/apps/web/src/components/(dashboard)/layout/mobile-navigation.tsx b/apps/web/src/components/(dashboard)/layout/mobile-navigation.tsx
new file mode 100644
index 000000000..7142de5dc
--- /dev/null
+++ b/apps/web/src/components/(dashboard)/layout/mobile-navigation.tsx
@@ -0,0 +1,96 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+
+import { signOut } from 'next-auth/react';
+
+import LogoImage from '@documenso/assets/logo.png';
+import { getRootHref } from '@documenso/lib/utils/params';
+import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
+import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher';
+
+export type MobileNavigationProps = {
+  isMenuOpen: boolean;
+  onMenuOpenChange?: (_value: boolean) => void;
+};
+
+export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigationProps) => {
+  const params = useParams();
+
+  const handleMenuItemClick = () => {
+    onMenuOpenChange?.(false);
+  };
+
+  const rootHref = getRootHref(params, { returnEmptyRootString: true });
+
+  const menuNavigationLinks = [
+    {
+      href: `${rootHref}/documents`,
+      text: 'Documents',
+    },
+    {
+      href: `${rootHref}/templates`,
+      text: 'Templates',
+    },
+    {
+      href: '/settings/teams',
+      text: 'Teams',
+    },
+    {
+      href: '/settings/profile',
+      text: 'Settings',
+    },
+  ].filter(({ text, href }) => text !== 'Templates' || href === '/templates'); // Filter out templates for teams.
+
+  return (
+    <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
+      <SheetContent className="flex w-full max-w-[400px] flex-col">
+        <Link href="/" className="z-10" onClick={handleMenuItemClick}>
+          <Image
+            src={LogoImage}
+            alt="Documenso Logo"
+            className="dark:invert"
+            width={170}
+            height={25}
+          />
+        </Link>
+
+        <div className="mt-8 flex w-full flex-col items-start gap-y-4">
+          {menuNavigationLinks.map(({ href, text }) => (
+            <Link
+              key={href}
+              className="text-foreground hover:text-foreground/80 text-2xl font-semibold"
+              href={href}
+              onClick={() => handleMenuItemClick()}
+            >
+              {text}
+            </Link>
+          ))}
+
+          <button
+            className="text-foreground hover:text-foreground/80 text-2xl font-semibold"
+            onClick={async () =>
+              signOut({
+                callbackUrl: '/',
+              })
+            }
+          >
+            Sign Out
+          </button>
+        </div>
+
+        <div className="mt-auto flex w-full flex-col space-y-4 self-end">
+          <div className="w-fit">
+            <ThemeSwitcher />
+          </div>
+
+          <p className="text-muted-foreground text-sm">
+            © {new Date().getFullYear()} Documenso, Inc. All rights reserved.
+          </p>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};
diff --git a/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx b/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
deleted file mode 100644
index f2432c071..000000000
--- a/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-
-import {
-  CreditCard,
-  FileSpreadsheet,
-  Lock,
-  LogOut,
-  User as LucideUser,
-  Monitor,
-  Moon,
-  Palette,
-  Sun,
-  UserCog,
-} from 'lucide-react';
-import { signOut } from 'next-auth/react';
-import { useTheme } from 'next-themes';
-import { LuGithub } from 'react-icons/lu';
-
-import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
-import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
-import { recipientInitials } from '@documenso/lib/utils/recipient-formatter';
-import type { User } from '@documenso/prisma/client';
-import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from '@documenso/ui/primitives/dropdown-menu';
-
-export type ProfileDropdownProps = {
-  user: User;
-};
-
-export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
-  const { getFlag } = useFeatureFlags();
-  const { theme, setTheme } = useTheme();
-  const isUserAdmin = isAdmin(user);
-
-  const isBillingEnabled = getFlag('app_billing');
-
-  const avatarFallback = user.name
-    ? recipientInitials(user.name)
-    : user.email.slice(0, 1).toUpperCase();
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="ghost"
-          title="Profile Dropdown"
-          className="relative h-10 w-10 rounded-full"
-        >
-          <Avatar className="h-10 w-10">
-            <AvatarFallback>{avatarFallback}</AvatarFallback>
-          </Avatar>
-        </Button>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent className="z-[60] w-56" align="end" forceMount>
-        <DropdownMenuLabel>Account</DropdownMenuLabel>
-
-        {isUserAdmin && (
-          <>
-            <DropdownMenuItem asChild>
-              <Link href="/admin" className="cursor-pointer">
-                <UserCog className="mr-2 h-4 w-4" />
-                Admin
-              </Link>
-            </DropdownMenuItem>
-
-            <DropdownMenuSeparator />
-          </>
-        )}
-
-        <DropdownMenuItem asChild>
-          <Link href="/settings/profile" className="cursor-pointer">
-            <LucideUser className="mr-2 h-4 w-4" />
-            Profile
-          </Link>
-        </DropdownMenuItem>
-
-        <DropdownMenuItem asChild>
-          <Link href="/settings/security" className="cursor-pointer">
-            <Lock className="mr-2 h-4 w-4" />
-            Security
-          </Link>
-        </DropdownMenuItem>
-
-        {isBillingEnabled && (
-          <DropdownMenuItem asChild>
-            <Link href="/settings/billing" className="cursor-pointer">
-              <CreditCard className="mr-2 h-4 w-4" />
-              Billing
-            </Link>
-          </DropdownMenuItem>
-        )}
-
-        <DropdownMenuSeparator />
-        <DropdownMenuItem asChild>
-          <Link href="/templates" className="cursor-pointer">
-            <FileSpreadsheet className="mr-2 h-4 w-4" />
-            Templates
-          </Link>
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger>
-            <Palette className="mr-2 h-4 w-4" />
-            Themes
-          </DropdownMenuSubTrigger>
-          <DropdownMenuPortal>
-            <DropdownMenuSubContent className="z-[60]">
-              <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
-                <DropdownMenuRadioItem value="light">
-                  <Sun className="mr-2 h-4 w-4" /> Light
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="dark">
-                  <Moon className="mr-2 h-4 w-4" />
-                  Dark
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="system">
-                  <Monitor className="mr-2 h-4 w-4" />
-                  System
-                </DropdownMenuRadioItem>
-              </DropdownMenuRadioGroup>
-            </DropdownMenuSubContent>
-          </DropdownMenuPortal>
-        </DropdownMenuSub>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem asChild>
-          <Link
-            href="https://github.com/documenso/documenso"
-            className="cursor-pointer"
-            target="_blank"
-          >
-            <LuGithub className="mr-2 h-4 w-4" />
-            Star on Github
-          </Link>
-        </DropdownMenuItem>
-
-        <DropdownMenuSeparator />
-
-        <DropdownMenuItem
-          onSelect={() =>
-            void signOut({
-              callbackUrl: '/',
-            })
-          }
-        >
-          <LogOut className="mr-2 h-4 w-4" />
-          Sign Out
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};
diff --git a/apps/web/src/components/(dashboard)/period-selector/period-selector.tsx b/apps/web/src/components/(dashboard)/period-selector/period-selector.tsx
index caeb780d0..a49e2f284 100644
--- a/apps/web/src/components/(dashboard)/period-selector/period-selector.tsx
+++ b/apps/web/src/components/(dashboard)/period-selector/period-selector.tsx
@@ -21,9 +21,9 @@ export const PeriodSelector = () => {
   const router = useRouter();
 
   const period = useMemo(() => {
-    const p = searchParams?.get('period') ?? '';
+    const p = searchParams?.get('period') ?? 'all';
 
-    return isPeriodSelectorValue(p) ? p : '';
+    return isPeriodSelectorValue(p) ? p : 'all';
   }, [searchParams]);
 
   const onPeriodChange = (newPeriod: string) => {
@@ -35,7 +35,7 @@ export const PeriodSelector = () => {
 
     params.set('period', newPeriod);
 
-    if (newPeriod === '') {
+    if (newPeriod === '' || newPeriod === 'all') {
       params.delete('period');
     }
 
@@ -49,7 +49,7 @@ export const PeriodSelector = () => {
       </SelectTrigger>
 
       <SelectContent position="popper">
-        <SelectItem value="">All Time</SelectItem>
+        <SelectItem value="all">All Time</SelectItem>
         <SelectItem value="7d">Last 7 days</SelectItem>
         <SelectItem value="14d">Last 14 days</SelectItem>
         <SelectItem value="30d">Last 30 days</SelectItem>
diff --git a/apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx b/apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx
index f4b2aae5e..c7ab61d8a 100644
--- a/apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx
+++ b/apps/web/src/components/(dashboard)/settings/layout/desktop-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 { CreditCard, Lock, User } from 'lucide-react';
+import { CreditCard, Lock, User, Users } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -35,6 +35,19 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </Button>
       </Link>
 
+      <Link href="/settings/teams">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/teams') && 'bg-secondary',
+          )}
+        >
+          <Users className="mr-2 h-5 w-5" />
+          Teams
+        </Button>
+      </Link>
+
       <Link href="/settings/security">
         <Button
           variant="ghost"
diff --git a/apps/web/src/components/(dashboard)/settings/layout/header.tsx b/apps/web/src/components/(dashboard)/settings/layout/header.tsx
new file mode 100644
index 000000000..3fe567b81
--- /dev/null
+++ b/apps/web/src/components/(dashboard)/settings/layout/header.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+export type SettingsHeaderProps = {
+  title: string;
+  subtitle: string;
+  children?: React.ReactNode;
+};
+
+export const SettingsHeader = ({ children, title, subtitle }: SettingsHeaderProps) => {
+  return (
+    <>
+      <div className="flex flex-row items-center justify-between">
+        <div>
+          <h3 className="text-lg font-medium">{title}</h3>
+
+          <p className="text-muted-foreground text-sm md:mt-2">{subtitle}</p>
+        </div>
+
+        {children}
+      </div>
+
+      <hr className="my-4" />
+    </>
+  );
+};
diff --git a/apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx b/apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx
index 28ffc960f..2809cefe5 100644
--- a/apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx
+++ b/apps/web/src/components/(dashboard)/settings/layout/mobile-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 { CreditCard, Lock, User } from 'lucide-react';
+import { CreditCard, Lock, User, Users } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -38,6 +38,19 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         </Button>
       </Link>
 
+      <Link href="/settings/teams">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/teams') && 'bg-secondary',
+          )}
+        >
+          <Users className="mr-2 h-5 w-5" />
+          Teams
+        </Button>
+      </Link>
+
       <Link href="/settings/security">
         <Button
           variant="ghost"
diff --git a/apps/web/src/components/(teams)/dialogs/add-team-email-dialog.tsx b/apps/web/src/components/(teams)/dialogs/add-team-email-dialog.tsx
new file mode 100644
index 000000000..fe894f49f
--- /dev/null
+++ b/apps/web/src/components/(teams)/dialogs/add-team-email-dialog.tsx
@@ -0,0 +1,188 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Plus } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateTeamEmailVerificationMutationSchema } from '@documenso/trpc/server/team-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type AddTeamEmailDialogProps = {
+  teamId: number;
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZCreateTeamEmailFormSchema = ZCreateTeamEmailVerificationMutationSchema.pick({
+  name: true,
+  email: true,
+});
+
+type TCreateTeamEmailFormSchema = z.infer<typeof ZCreateTeamEmailFormSchema>;
+
+export const AddTeamEmailDialog = ({ teamId, trigger, ...props }: AddTeamEmailDialogProps) => {
+  const router = useRouter();
+
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const form = useForm<TCreateTeamEmailFormSchema>({
+    resolver: zodResolver(ZCreateTeamEmailFormSchema),
+    defaultValues: {
+      name: '',
+      email: '',
+    },
+  });
+
+  const { mutateAsync: createTeamEmailVerification, isLoading } =
+    trpc.team.createTeamEmailVerification.useMutation();
+
+  const onFormSubmit = async ({ name, email }: TCreateTeamEmailFormSchema) => {
+    try {
+      await createTeamEmailVerification({
+        teamId,
+        name,
+        email,
+      });
+
+      toast({
+        title: 'Success',
+        description: 'We have sent a confirmation email for verification.',
+        duration: 5000,
+      });
+
+      router.refresh();
+
+      setOpen(false);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.ALREADY_EXISTS) {
+        form.setError('email', {
+          type: 'manual',
+          message: 'This email is already being used by another team.',
+        });
+
+        return;
+      }
+
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting to add this email. Please try again later.',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        {trigger ?? (
+          <Button variant="outline" loading={isLoading} className="bg-background">
+            <Plus className="-ml-1 mr-1 h-5 w-5" />
+            Add email
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Add team email</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            A verification email will be sent to the provided email.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>Name</FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" placeholder="eg. Legal" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>Email</FormLabel>
+                    <FormControl>
+                      <Input
+                        className="bg-background"
+                        placeholder="example@example.com"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  Cancel
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  Add
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/web/src/components/(teams)/dialogs/create-team-checkout-dialog.tsx b/apps/web/src/components/(teams)/dialogs/create-team-checkout-dialog.tsx
new file mode 100644
index 000000000..f7ee8ca51
--- /dev/null
+++ b/apps/web/src/components/(teams)/dialogs/create-team-checkout-dialog.tsx
@@ -0,0 +1,177 @@
+import { useMemo, useState } from 'react';
+
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Loader, TagIcon } from 'lucide-react';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type CreateTeamCheckoutDialogProps = {
+  pendingTeamId: number | null;
+  onClose: () => void;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const MotionCard = motion(Card);
+
+export const CreateTeamCheckoutDialog = ({
+  pendingTeamId,
+  onClose,
+  ...props
+}: CreateTeamCheckoutDialogProps) => {
+  const { toast } = useToast();
+
+  const [interval, setInterval] = useState<'monthly' | 'yearly'>('monthly');
+
+  const { data, isLoading } = trpc.team.getTeamPrices.useQuery();
+
+  const { mutateAsync: createCheckout, isLoading: isCreatingCheckout } =
+    trpc.team.createTeamPendingCheckout.useMutation({
+      onSuccess: (checkoutUrl) => {
+        window.open(checkoutUrl, '_blank');
+        onClose();
+      },
+      onError: () =>
+        toast({
+          title: 'Something went wrong',
+          description:
+            'We were unable to create a checkout session. Please try again, or contact support',
+          variant: 'destructive',
+        }),
+    });
+
+  const selectedPrice = useMemo(() => {
+    if (!data) {
+      return null;
+    }
+
+    return data[interval];
+  }, [data, interval]);
+
+  const handleOnOpenChange = (open: boolean) => {
+    if (pendingTeamId === null) {
+      return;
+    }
+
+    if (!open) {
+      onClose();
+    }
+  };
+
+  if (pendingTeamId === null) {
+    return null;
+  }
+
+  return (
+    <Dialog {...props} open={pendingTeamId !== null} onOpenChange={handleOnOpenChange}>
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Team checkout</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            Payment is required to finalise the creation of your team.
+          </DialogDescription>
+        </DialogHeader>
+
+        {(isLoading || !data) && (
+          <div className="flex h-20 items-center justify-center text-sm">
+            {isLoading ? (
+              <Loader className="text-documenso h-6 w-6 animate-spin" />
+            ) : (
+              <p>Something went wrong</p>
+            )}
+          </div>
+        )}
+
+        {data && selectedPrice && !isLoading && (
+          <div>
+            <Tabs
+              // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+              onValueChange={(value) => setInterval(value as 'monthly' | 'yearly')}
+              value={interval}
+              className="mb-4"
+            >
+              <TabsList className="w-full">
+                {[data.monthly, data.yearly].map((price) => (
+                  <TabsTrigger key={price.priceId} className="w-full" value={price.interval}>
+                    {price.friendlyInterval}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </Tabs>
+
+            <AnimatePresence mode="wait">
+              <MotionCard
+                key={selectedPrice.priceId}
+                initial={{ opacity: 0, y: 15 }}
+                animate={{ opacity: 1, y: 0, transition: { duration: 0.3 } }}
+                exit={{ opacity: 0, transition: { duration: 0.15 } }}
+              >
+                <CardContent className="flex h-full flex-col p-6">
+                  {selectedPrice.interval === 'monthly' ? (
+                    <div className="text-muted-foreground text-lg font-medium">
+                      $50 USD <span className="text-xs">per month</span>
+                    </div>
+                  ) : (
+                    <div className="text-muted-foreground flex items-center justify-between text-lg font-medium">
+                      <span>
+                        $480 USD <span className="text-xs">per year</span>
+                      </span>
+                      <div className="bg-primary text-primary-foreground ml-2 inline-flex flex-row items-center justify-center rounded px-2 py-1 text-xs">
+                        <TagIcon className="mr-1 h-4 w-4" />
+                        20% off
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="text-muted-foreground mt-1.5 text-sm">
+                    <p>This price includes minimum 5 seats.</p>
+
+                    <p className="mt-1">
+                      Adding and removing seats will adjust your invoice accordingly.
+                    </p>
+                  </div>
+                </CardContent>
+              </MotionCard>
+            </AnimatePresence>
+
+            <DialogFooter className="mt-4">
+              <Button
+                type="button"
+                variant="secondary"
+                disabled={isCreatingCheckout}
+                onClick={() => onClose()}
+              >
+                Cancel
+              </Button>
+
+              <Button
+                type="submit"
+                loading={isCreatingCheckout}
+                onClick={async () =>
+                  createCheckout({
+                    interval: selectedPrice.interval,
+                    pendingTeamId,
+                  })
+                }
+              >
+                Checkout
+              </Button>
+            </DialogFooter>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/web/src/components/(teams)/dialogs/create-team-dialog.tsx b/apps/web/src/components/(teams)/dialogs/create-team-dialog.tsx
new file mode 100644
index 000000000..283fd8dad
--- /dev/null
+++ b/apps/web/src/components/(teams)/dialogs/create-team-dialog.tsx
@@ -0,0 +1,223 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateTeamMutationSchema } from '@documenso/trpc/server/team-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type CreateTeamDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZCreateTeamFormSchema = ZCreateTeamMutationSchema.pick({
+  teamName: true,
+  teamUrl: true,
+});
+
+type TCreateTeamFormSchema = z.infer<typeof ZCreateTeamFormSchema>;
+
+export const CreateTeamDialog = ({ trigger, ...props }: CreateTeamDialogProps) => {
+  const { toast } = useToast();
+
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const [open, setOpen] = useState(false);
+
+  const actionSearchParam = searchParams?.get('action');
+
+  const form = useForm({
+    resolver: zodResolver(ZCreateTeamFormSchema),
+    defaultValues: {
+      teamName: '',
+      teamUrl: '',
+    },
+  });
+
+  const { mutateAsync: createTeam } = trpc.team.createTeam.useMutation();
+
+  const onFormSubmit = async ({ teamName, teamUrl }: TCreateTeamFormSchema) => {
+    try {
+      const response = await createTeam({
+        teamName,
+        teamUrl,
+      });
+
+      setOpen(false);
+
+      if (response.paymentRequired) {
+        router.push(`/settings/teams?tab=pending&checkout=${response.pendingTeamId}`);
+        return;
+      }
+
+      toast({
+        title: 'Success',
+        description: 'Your team has been created.',
+        duration: 5000,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.ALREADY_EXISTS) {
+        form.setError('teamUrl', {
+          type: 'manual',
+          message: 'This URL is already in use.',
+        });
+
+        return;
+      }
+
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting to create a team. Please try again later.',
+      });
+    }
+  };
+
+  const mapTextToUrl = (text: string) => {
+    return text.toLowerCase().replace(/\s+/g, '-');
+  };
+
+  useEffect(() => {
+    if (actionSearchParam === 'add-team') {
+      setOpen(true);
+      updateSearchParams({ action: null });
+    }
+  }, [actionSearchParam, open, setOpen, updateSearchParams]);
+
+  useEffect(() => {
+    form.reset();
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        {trigger ?? (
+          <Button className="flex-shrink-0" variant="secondary">
+            Create team
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Create team</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            Create a team to collaborate with your team members.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="teamName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>Team Name</FormLabel>
+                    <FormControl>
+                      <Input
+                        className="bg-background"
+                        {...field}
+                        onChange={(event) => {
+                          const oldGeneratedUrl = mapTextToUrl(field.value);
+                          const newGeneratedUrl = mapTextToUrl(event.target.value);
+
+                          const urlField = form.getValues('teamUrl');
+                          if (urlField === oldGeneratedUrl) {
+                            form.setValue('teamUrl', newGeneratedUrl);
+                          }
+
+                          field.onChange(event);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="teamUrl"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>Team URL</FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" {...field} />
+                    </FormControl>
+                    {!form.formState.errors.teamUrl && (
+                      <span className="text-foreground/50 text-xs font-normal">
+                        {field.value
+                          ? `${WEBAPP_BASE_URL}/t/${field.value}`
+                          : 'A unique URL to identify your team'}
+                      </span>
+                    )}
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  Cancel
+                </Button>
+
+                <Button
+                  type="submit"
+                  data-testid="dialog-create-team-button"
+                  loading={form.formState.isSubmitting}
+                >
+                  Create Team
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/web/src/components/(teams)/dialogs/delete-team-dialog.tsx b/apps/web/src/components/(teams)/dialogs/delete-team-dialog.tsx
new file mode 100644
index 000000000..99630e57c
--- /dev/null
+++ b/apps/web/src/components/(teams)/dialogs/delete-team-dialog.tsx
@@ -0,0 +1,160 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AppError } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import type { Toast } from '@documenso/ui/primitives/use-toast';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type DeleteTeamDialogProps = {
+  teamId: number;
+  teamName: string;
+  trigger?: React.ReactNode;
+};
+
+export const DeleteTeamDialog = ({ trigger, teamId, teamName }: DeleteTeamDialogProps) => {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const deleteMessage = `delete ${teamName}`;
+
+  const ZDeleteTeamFormSchema = z.object({
+    teamName: z.literal(deleteMessage, {
+      errorMap: () => ({ message: `You must enter '${deleteMessage}' to proceed` }),
+    }),
+  });
+
+  const form = useForm({
+    resolver: zodResolver(ZDeleteTeamFormSchema),
+    defaultValues: {
+      teamName: '',
+    },
+  });
+
+  const { mutateAsync: deleteTeam } = trpc.team.deleteTeam.useMutation();
+
+  const onFormSubmit = async () => {
+    try {
+      await deleteTeam({ teamId });
+
+      toast({
+        title: 'Success',
+        description: 'Your team has been successfully deleted.',
+        duration: 5000,
+      });
+
+      setOpen(false);
+
+      router.push('/settings/teams');
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      let toastError: Toast = {
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        duration: 10000,
+        description:
+          'We encountered an unknown error while attempting to delete this team. Please try again later.',
+      };
+
+      if (error.code === 'resource_missing') {
+        toastError = {
+          title: 'Unable to delete team',
+          variant: 'destructive',
+          duration: 15000,
+          description:
+            'Something went wrong while updating the team billing subscription, please contact support.',
+        };
+      }
+
+      toast(toastError);
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? <Button variant="destructive">Delete team</Button>}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Delete team</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            Are you sure? This is irreversable.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="teamName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      Confirm by typing <span className="text-destructive">{deleteMessage}</span>
+                    </FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  Cancel
+                </Button>
+
+                <Button type="submit" variant="destructive" loading={form.formState.isSubmitting}>
+                  Delete
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/web/src/components/(teams)/dialogs/delete-team-member-dialog.tsx b/apps/web/src/components/(teams)/dialogs/delete-team-member-dialog.tsx
new file mode 100644
index 000000000..7ae8ccf1c
--- /dev/null
+++ b/apps/web/src/components/(teams)/dialogs/delete-team-member-dialog.tsx
@@ -0,0 +1,107 @@
+'use client';
+
+import { useState } from 'react';
+
+import { trpc } from '@documenso/trpc/react';
+import { Alert } from '@documenso/ui/primitives/alert';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+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 DeleteTeamMemberDialogProps = {
+  teamId: number;
+  teamName: string;
+  teamMemberId: number;
+  teamMemberName: string;
+  teamMemberEmail: string;
+  trigger?: React.ReactNode;
+};
+
+export const DeleteTeamMemberDialog = ({
+  trigger,
+  teamId,
+  teamName,
+  teamMemberId,
+  teamMemberName,
+  teamMemberEmail,
+}: DeleteTeamMemberDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const { mutateAsync: deleteTeamMembers, isLoading: isDeletingTeamMember } =
+    trpc.team.deleteTeamMembers.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'You have successfully removed this user from the team.',
+          duration: 5000,
+        });
+
+        setOpen(false);
+      },
+      onError: () => {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          duration: 10000,
+          description:
+            'We encountered an unknown error while attempting to remove this user. Please try again later.',
+        });
+      },
+    });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isDeletingTeamMember && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? <Button variant="secondary">Delete team member</Button>}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Are you sure?</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            You are about to remove the following user from{' '}
+            <span className="font-semibold">{teamName}</span>.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="neutral" padding="tight">
+          <AvatarWithText
+            avatarClass="h-12 w-12"
+            avatarFallback={teamMemberName.slice(0, 1).toUpperCase()}
+            primaryText={<span className="font-semibold">{teamMemberName}</span>}
+            secondaryText={teamMemberEmail}
+          />
+        </Alert>
+
+        <fieldset disabled={isDeletingTeamMember}>
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+
+            <Button
+              type="submit"
+              variant="destructive"
+              loading={isDeletingTeamMember}
+              onClick={async () => deleteTeamMembers({ teamId, teamMemberIds: [teamMemberId] })}
+            >
+              Delete
+            </Button>
+          </DialogFooter>
+        </fieldset>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/web/src/components/(teams)/dialogs/invite-team-member-dialog.tsx b/apps/web/src/components/(teams)/dialogs/invite-team-member-dialog.tsx
new file mode 100644
index 000000000..482142c99
--- /dev/null
+++ b/apps/web/src/components/(teams)/dialogs/invite-team-member-dialog.tsx
@@ -0,0 +1,244 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Mail, PlusCircle, Trash } from 'lucide-react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { TEAM_MEMBER_ROLE_HIERARCHY, TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { TeamMemberRole } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateTeamMemberInvitesMutationSchema } from '@documenso/trpc/server/team-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type InviteTeamMembersDialogProps = {
+  currentUserTeamRole: TeamMemberRole;
+  teamId: number;
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZInviteTeamMembersFormSchema = z
+  .object({
+    invitations: ZCreateTeamMemberInvitesMutationSchema.shape.invitations,
+  })
+  .refine(
+    (schema) => {
+      const emails = schema.invitations.map((invitation) => invitation.email.toLowerCase());
+
+      return new Set(emails).size === emails.length;
+    },
+    // Dirty hack to handle errors when .root is populated for an array type
+    { message: 'Members must have unique emails', path: ['members__root'] },
+  );
+
+type TInviteTeamMembersFormSchema = z.infer<typeof ZInviteTeamMembersFormSchema>;
+
+export const InviteTeamMembersDialog = ({
+  currentUserTeamRole,
+  teamId,
+  trigger,
+  ...props
+}: InviteTeamMembersDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const form = useForm<TInviteTeamMembersFormSchema>({
+    resolver: zodResolver(ZInviteTeamMembersFormSchema),
+    defaultValues: {
+      invitations: [
+        {
+          email: '',
+          role: TeamMemberRole.MEMBER,
+        },
+      ],
+    },
+  });
+
+  const {
+    append: appendTeamMemberInvite,
+    fields: teamMemberInvites,
+    remove: removeTeamMemberInvite,
+  } = useFieldArray({
+    control: form.control,
+    name: 'invitations',
+  });
+
+  const { mutateAsync: createTeamMemberInvites } = trpc.team.createTeamMemberInvites.useMutation();
+
+  const onAddTeamMemberInvite = () => {
+    appendTeamMemberInvite({
+      email: '',
+      role: TeamMemberRole.MEMBER,
+    });
+  };
+
+  const onFormSubmit = async ({ invitations }: TInviteTeamMembersFormSchema) => {
+    try {
+      await createTeamMemberInvites({
+        teamId,
+        invitations,
+      });
+
+      toast({
+        title: 'Success',
+        description: 'Team invitations have been sent.',
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting to invite team members. Please try again later.',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? <Button variant="secondary">Invite member</Button>}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Invite team members</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            An email containing an invitation will be sent to each member.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              {teamMemberInvites.map((teamMemberInvite, index) => (
+                <div className="flex w-full flex-row space-x-4" key={teamMemberInvite.id}>
+                  <FormField
+                    control={form.control}
+                    name={`invitations.${index}.email`}
+                    render={({ field }) => (
+                      <FormItem className="w-full">
+                        {index === 0 && <FormLabel required>Email address</FormLabel>}
+                        <FormControl>
+                          <Input className="bg-background" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name={`invitations.${index}.role`}
+                    render={({ field }) => (
+                      <FormItem className="w-full">
+                        {index === 0 && <FormLabel required>Role</FormLabel>}
+                        <FormControl>
+                          <Select {...field} onValueChange={field.onChange}>
+                            <SelectTrigger className="text-muted-foreground max-w-[200px]">
+                              <SelectValue />
+                            </SelectTrigger>
+
+                            <SelectContent position="popper">
+                              {TEAM_MEMBER_ROLE_HIERARCHY[currentUserTeamRole].map((role) => (
+                                <SelectItem key={role} value={role}>
+                                  {TEAM_MEMBER_ROLE_MAP[role] ?? role}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <button
+                    type="button"
+                    className={cn(
+                      'justify-left inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50',
+                      index === 0 ? 'mt-8' : 'mt-0',
+                    )}
+                    disabled={teamMemberInvites.length === 1}
+                    onClick={() => removeTeamMemberInvite(index)}
+                  >
+                    <Trash className="h-5 w-5" />
+                  </button>
+                </div>
+              ))}
+
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                className="w-fit"
+                onClick={() => onAddTeamMemberInvite()}
+              >
+                <PlusCircle className="mr-2 h-4 w-4" />
+                Add more
+              </Button>
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  Cancel
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  {!form.formState.isSubmitting && <Mail className="mr-2 h-4 w-4" />}
+                  Invite
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/web/src/components/(teams)/dialogs/leave-team-dialog.tsx b/apps/web/src/components/(teams)/dialogs/leave-team-dialog.tsx
new file mode 100644
index 000000000..27384d680
--- /dev/null
+++ b/apps/web/src/components/(teams)/dialogs/leave-team-dialog.tsx
@@ -0,0 +1,98 @@
+'use client';
+
+import { useState } from 'react';
+
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import type { TeamMemberRole } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { Alert } from '@documenso/ui/primitives/alert';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+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 LeaveTeamDialogProps = {
+  teamId: number;
+  teamName: string;
+  role: TeamMemberRole;
+  trigger?: React.ReactNode;
+};
+
+export const LeaveTeamDialog = ({ trigger, teamId, teamName, role }: LeaveTeamDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const { mutateAsync: leaveTeam, isLoading: isLeavingTeam } = trpc.team.leaveTeam.useMutation({
+    onSuccess: () => {
+      toast({
+        title: 'Success',
+        description: 'You have successfully left this team.',
+        duration: 5000,
+      });
+
+      setOpen(false);
+    },
+    onError: () => {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        duration: 10000,
+        description:
+          'We encountered an unknown error while attempting to leave this team. Please try again later.',
+      });
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLeavingTeam && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? <Button variant="destructive">Leave team</Button>}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Are you sure?</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            You are about to leave the following team.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="neutral" padding="tight">
+          <AvatarWithText
+            avatarClass="h-12 w-12"
+            avatarFallback={teamName.slice(0, 1).toUpperCase()}
+            primaryText={teamName}
+            secondaryText={TEAM_MEMBER_ROLE_MAP[role]}
+          />
+        </Alert>
+
+        <fieldset disabled={isLeavingTeam}>
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+
+            <Button
+              type="submit"
+              variant="destructive"
+              loading={isLeavingTeam}
+              onClick={async () => leaveTeam({ teamId })}
+            >
+              Leave
+            </Button>
+          </DialogFooter>
+        </fieldset>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/web/src/components/(teams)/dialogs/transfer-team-dialog.tsx b/apps/web/src/components/(teams)/dialogs/transfer-team-dialog.tsx
new file mode 100644
index 000000000..e5dd8ca17
--- /dev/null
+++ b/apps/web/src/components/(teams)/dialogs/transfer-team-dialog.tsx
@@ -0,0 +1,293 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } 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 {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TransferTeamDialogProps = {
+  teamId: number;
+  teamName: string;
+  ownerUserId: number;
+  trigger?: React.ReactNode;
+};
+
+export const TransferTeamDialog = ({
+  trigger,
+  teamId,
+  teamName,
+  ownerUserId,
+}: TransferTeamDialogProps) => {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const { mutateAsync: requestTeamOwnershipTransfer } =
+    trpc.team.requestTeamOwnershipTransfer.useMutation();
+
+  const {
+    data,
+    refetch: refetchTeamMembers,
+    isLoading: loadingTeamMembers,
+    isLoadingError: loadingTeamMembersError,
+  } = trpc.team.getTeamMembers.useQuery({
+    teamId,
+  });
+
+  const confirmTransferMessage = `transfer ${teamName}`;
+
+  const ZTransferTeamFormSchema = z.object({
+    teamName: z.literal(confirmTransferMessage, {
+      errorMap: () => ({ message: `You must enter '${confirmTransferMessage}' to proceed` }),
+    }),
+    newOwnerUserId: z.string(),
+    clearPaymentMethods: z.boolean(),
+  });
+
+  const form = useForm<z.infer<typeof ZTransferTeamFormSchema>>({
+    resolver: zodResolver(ZTransferTeamFormSchema),
+    defaultValues: {
+      teamName: '',
+      clearPaymentMethods: false,
+    },
+  });
+
+  const onFormSubmit = async ({
+    newOwnerUserId,
+    clearPaymentMethods,
+  }: z.infer<typeof ZTransferTeamFormSchema>) => {
+    try {
+      await requestTeamOwnershipTransfer({
+        teamId,
+        newOwnerUserId: Number.parseInt(newOwnerUserId),
+        clearPaymentMethods,
+      });
+
+      router.refresh();
+
+      toast({
+        title: 'Success',
+        description: 'An email requesting the transfer of this team has been sent.',
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch (err) {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        duration: 10000,
+        description:
+          'We encountered an unknown error while attempting to request a transfer of this team. Please try again later.',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  useEffect(() => {
+    if (open && loadingTeamMembersError) {
+      void refetchTeamMembers();
+    }
+  }, [open, loadingTeamMembersError, refetchTeamMembers]);
+
+  const teamMembers = data
+    ? data.filter((teamMember) => teamMember.userId !== ownerUserId)
+    : undefined;
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="outline" className="bg-background">
+            Transfer team
+          </Button>
+        )}
+      </DialogTrigger>
+
+      {teamMembers && teamMembers.length > 0 ? (
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>Transfer team</DialogTitle>
+
+            <DialogDescription className="mt-4">
+              Transfer ownership of this team to a selected team member.
+            </DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onFormSubmit)}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="newOwnerUserId"
+                  render={({ field }) => (
+                    <FormItem className="w-full">
+                      <FormLabel required>New team owner</FormLabel>
+                      <FormControl>
+                        <Select {...field} onValueChange={field.onChange}>
+                          <SelectTrigger className="text-muted-foreground">
+                            <SelectValue />
+                          </SelectTrigger>
+
+                          <SelectContent position="popper">
+                            {teamMembers.map((teamMember) => (
+                              <SelectItem
+                                key={teamMember.userId}
+                                value={teamMember.userId.toString()}
+                              >
+                                {teamMember.user.name} ({teamMember.user.email})
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="teamName"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        Confirm by typing{' '}
+                        <span className="text-destructive">{confirmTransferMessage}</span>
+                      </FormLabel>
+                      <FormControl>
+                        <Input className="bg-background" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {/* Temporary removed.  */}
+                {/* {IS_BILLING_ENABLED && (
+                  <FormField
+                    control={form.control}
+                    name="clearPaymentMethods"
+                    render={({ field }) => (
+                      <FormItem>
+                        <div className="flex flex-row items-center">
+                          <Checkbox
+                            id="clearPaymentMethods"
+                            className="h-5 w-5 rounded-full"
+                            checkClassName="dark:text-white text-primary"
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+
+                          <label
+                            className="text-muted-foreground ml-2 text-sm"
+                            htmlFor="clearPaymentMethods"
+                          >
+                            Clear current payment methods
+                          </label>
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+                )} */}
+
+                <Alert variant="neutral">
+                  <AlertDescription>
+                    <ul className="list-outside list-disc space-y-2 pl-4">
+                      {IS_BILLING_ENABLED && (
+                        // Temporary removed.
+                        // <li>
+                        //   {form.getValues('clearPaymentMethods')
+                        //     ? 'You will not be billed for any upcoming invoices'
+                        //     : 'We will continue to bill current payment methods if required'}
+                        // </li>
+
+                        <li>
+                          Any payment methods attached to this team will remain attached to this
+                          team. Please contact us if you need to update this information.
+                        </li>
+                      )}
+                      <li>
+                        The selected team member will receive an email which they must accept before
+                        the team is transferred
+                      </li>
+                    </ul>
+                  </AlertDescription>
+                </Alert>
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                    Cancel
+                  </Button>
+
+                  <Button type="submit" variant="destructive" loading={form.formState.isSubmitting}>
+                    Request transfer
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        </DialogContent>
+      ) : (
+        <DialogContent
+          position="center"
+          className="text-muted-foreground flex items-center justify-center py-16 text-sm"
+        >
+          {loadingTeamMembers ? (
+            <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+          ) : (
+            <p className="text-center text-sm">
+              {loadingTeamMembersError
+                ? 'An error occurred while loading team members. Please try again later.'
+                : 'You must have at least one other team member to transfer ownership.'}
+            </p>
+          )}
+        </DialogContent>
+      )}
+    </Dialog>
+  );
+};
diff --git a/apps/web/src/components/(teams)/dialogs/update-team-email-dialog.tsx b/apps/web/src/components/(teams)/dialogs/update-team-email-dialog.tsx
new file mode 100644
index 000000000..c6ab8890a
--- /dev/null
+++ b/apps/web/src/components/(teams)/dialogs/update-team-email-dialog.tsx
@@ -0,0 +1,165 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import type { TeamEmail } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type UpdateTeamEmailDialogProps = {
+  teamEmail: TeamEmail;
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZUpdateTeamEmailFormSchema = z.object({
+  name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
+});
+
+type TUpdateTeamEmailFormSchema = z.infer<typeof ZUpdateTeamEmailFormSchema>;
+
+export const UpdateTeamEmailDialog = ({
+  teamEmail,
+  trigger,
+  ...props
+}: UpdateTeamEmailDialogProps) => {
+  const router = useRouter();
+
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const form = useForm<TUpdateTeamEmailFormSchema>({
+    resolver: zodResolver(ZUpdateTeamEmailFormSchema),
+    defaultValues: {
+      name: teamEmail.name,
+    },
+  });
+
+  const { mutateAsync: updateTeamEmail } = trpc.team.updateTeamEmail.useMutation();
+
+  const onFormSubmit = async ({ name }: TUpdateTeamEmailFormSchema) => {
+    try {
+      await updateTeamEmail({
+        teamId: teamEmail.teamId,
+        data: {
+          name,
+        },
+      });
+
+      toast({
+        title: 'Success',
+        description: 'Team email was updated.',
+        duration: 5000,
+      });
+
+      router.refresh();
+
+      setOpen(false);
+    } catch (err) {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting update the team email. Please try again later.',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? (
+          <Button variant="outline" className="bg-background">
+            Update team email
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Update team email</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            To change the email you must remove and add a new email address.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>Name</FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" placeholder="eg. Legal" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormItem>
+                <FormLabel required>Email</FormLabel>
+                <FormControl>
+                  <Input className="bg-background" value={teamEmail.email} disabled={true} />
+                </FormControl>
+              </FormItem>
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  Cancel
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  Update
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/web/src/components/(teams)/dialogs/update-team-member-dialog.tsx b/apps/web/src/components/(teams)/dialogs/update-team-member-dialog.tsx
new file mode 100644
index 000000000..cc8ea675f
--- /dev/null
+++ b/apps/web/src/components/(teams)/dialogs/update-team-member-dialog.tsx
@@ -0,0 +1,185 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { TEAM_MEMBER_ROLE_HIERARCHY, TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { isTeamRoleWithinUserHierarchy } from '@documenso/lib/utils/teams';
+import { TeamMemberRole } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type UpdateTeamMemberDialogProps = {
+  currentUserTeamRole: TeamMemberRole;
+  trigger?: React.ReactNode;
+  teamId: number;
+  teamMemberId: number;
+  teamMemberName: string;
+  teamMemberRole: TeamMemberRole;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZUpdateTeamMemberFormSchema = z.object({
+  role: z.nativeEnum(TeamMemberRole),
+});
+
+type ZUpdateTeamMemberSchema = z.infer<typeof ZUpdateTeamMemberFormSchema>;
+
+export const UpdateTeamMemberDialog = ({
+  currentUserTeamRole,
+  trigger,
+  teamId,
+  teamMemberId,
+  teamMemberName,
+  teamMemberRole,
+  ...props
+}: UpdateTeamMemberDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const form = useForm<ZUpdateTeamMemberSchema>({
+    resolver: zodResolver(ZUpdateTeamMemberFormSchema),
+    defaultValues: {
+      role: teamMemberRole,
+    },
+  });
+
+  const { mutateAsync: updateTeamMember } = trpc.team.updateTeamMember.useMutation();
+
+  const onFormSubmit = async ({ role }: ZUpdateTeamMemberSchema) => {
+    try {
+      await updateTeamMember({
+        teamId,
+        teamMemberId,
+        data: {
+          role,
+        },
+      });
+
+      toast({
+        title: 'Success',
+        description: `You have updated ${teamMemberName}.`,
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting to update this team member. Please try again later.',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    form.reset();
+
+    if (!isTeamRoleWithinUserHierarchy(currentUserTeamRole, teamMemberRole)) {
+      setOpen(false);
+
+      toast({
+        title: 'You cannot modify a team member who has a higher role than you.',
+        variant: 'destructive',
+      });
+    }
+  }, [open, currentUserTeamRole, teamMemberRole, form, toast]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? <Button variant="secondary">Update team member</Button>}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Update team member</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            You are currently updating <span className="font-bold">{teamMemberName}.</span>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+              <FormField
+                control={form.control}
+                name="role"
+                render={({ field }) => (
+                  <FormItem className="w-full">
+                    <FormLabel required>Role</FormLabel>
+                    <FormControl>
+                      <Select {...field} onValueChange={field.onChange}>
+                        <SelectTrigger className="text-muted-foreground">
+                          <SelectValue />
+                        </SelectTrigger>
+
+                        <SelectContent className="w-full" position="popper">
+                          {TEAM_MEMBER_ROLE_HIERARCHY[currentUserTeamRole].map((role) => (
+                            <SelectItem key={role} value={role}>
+                              {TEAM_MEMBER_ROLE_MAP[role] ?? role}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter className="mt-4">
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  Cancel
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  Update
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/web/src/components/(teams)/forms/update-team-form.tsx b/apps/web/src/components/(teams)/forms/update-team-form.tsx
new file mode 100644
index 000000000..142914b8c
--- /dev/null
+++ b/apps/web/src/components/(teams)/forms/update-team-form.tsx
@@ -0,0 +1,173 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZUpdateTeamMutationSchema } from '@documenso/trpc/server/team-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type UpdateTeamDialogProps = {
+  teamId: number;
+  teamName: string;
+  teamUrl: string;
+};
+
+const ZUpdateTeamFormSchema = ZUpdateTeamMutationSchema.shape.data.pick({
+  name: true,
+  url: true,
+});
+
+type TUpdateTeamFormSchema = z.infer<typeof ZUpdateTeamFormSchema>;
+
+export const UpdateTeamForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const form = useForm({
+    resolver: zodResolver(ZUpdateTeamFormSchema),
+    defaultValues: {
+      name: teamName,
+      url: teamUrl,
+    },
+  });
+
+  const { mutateAsync: updateTeam } = trpc.team.updateTeam.useMutation();
+
+  const onFormSubmit = async ({ name, url }: TUpdateTeamFormSchema) => {
+    try {
+      await updateTeam({
+        data: {
+          name,
+          url,
+        },
+        teamId,
+      });
+
+      toast({
+        title: 'Success',
+        description: 'Your team has been successfully updated.',
+        duration: 5000,
+      });
+
+      form.reset({
+        name,
+        url,
+      });
+
+      if (url !== teamUrl) {
+        router.push(`${WEBAPP_BASE_URL}/t/${url}/settings`);
+      }
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.ALREADY_EXISTS) {
+        form.setError('url', {
+          type: 'manual',
+          message: 'This URL is already in use.',
+        });
+
+        return;
+      }
+
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting to update your team. Please try again later.',
+      });
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+        <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel required>Team Name</FormLabel>
+                <FormControl>
+                  <Input className="bg-background" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="url"
+            render={({ field }) => (
+              <FormItem className="mt-4">
+                <FormLabel required>Team URL</FormLabel>
+                <FormControl>
+                  <Input className="bg-background" {...field} />
+                </FormControl>
+                {!form.formState.errors.url && (
+                  <span className="text-foreground/50 text-xs font-normal">
+                    {field.value
+                      ? `${WEBAPP_BASE_URL}/t/${field.value}`
+                      : 'A unique URL to identify your team'}
+                  </span>
+                )}
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex flex-row justify-end space-x-4">
+            <AnimatePresence>
+              {form.formState.isDirty && (
+                <motion.div
+                  initial={{
+                    opacity: 0,
+                  }}
+                  animate={{
+                    opacity: 1,
+                  }}
+                  exit={{
+                    opacity: 0,
+                  }}
+                >
+                  <Button type="button" variant="secondary" onClick={() => form.reset()}>
+                    Reset
+                  </Button>
+                </motion.div>
+              )}
+            </AnimatePresence>
+
+            <Button
+              type="submit"
+              className="transition-opacity"
+              disabled={!form.formState.isDirty}
+              loading={form.formState.isSubmitting}
+            >
+              Update team
+            </Button>
+          </div>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};
diff --git a/apps/web/src/components/(teams)/settings/layout/desktop-nav.tsx b/apps/web/src/components/(teams)/settings/layout/desktop-nav.tsx
new file mode 100644
index 000000000..be68f6c03
--- /dev/null
+++ b/apps/web/src/components/(teams)/settings/layout/desktop-nav.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+
+import Link from 'next/link';
+import { useParams, usePathname } from 'next/navigation';
+
+import { CreditCard, Settings, Users } from 'lucide-react';
+
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;
+
+export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
+  const pathname = usePathname();
+  const params = useParams();
+
+  const teamUrl = typeof params?.teamUrl === 'string' ? params?.teamUrl : '';
+
+  const settingsPath = `/t/${teamUrl}/settings`;
+  const membersPath = `/t/${teamUrl}/settings/members`;
+  const billingPath = `/t/${teamUrl}/settings/billing`;
+
+  return (
+    <div className={cn('flex flex-col gap-y-2', className)} {...props}>
+      <Link href={settingsPath}>
+        <Button
+          variant="ghost"
+          className={cn('w-full justify-start', pathname === settingsPath && 'bg-secondary')}
+        >
+          <Settings className="mr-2 h-5 w-5" />
+          General
+        </Button>
+      </Link>
+
+      <Link href={membersPath}>
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith(membersPath) && 'bg-secondary',
+          )}
+        >
+          <Users className="mr-2 h-5 w-5" />
+          Members
+        </Button>
+      </Link>
+
+      {IS_BILLING_ENABLED && (
+        <Link href={billingPath}>
+          <Button
+            variant="ghost"
+            className={cn(
+              'w-full justify-start',
+              pathname?.startsWith(billingPath) && 'bg-secondary',
+            )}
+          >
+            <CreditCard className="mr-2 h-5 w-5" />
+            Billing
+          </Button>
+        </Link>
+      )}
+    </div>
+  );
+};
diff --git a/apps/web/src/components/(teams)/settings/layout/mobile-nav.tsx b/apps/web/src/components/(teams)/settings/layout/mobile-nav.tsx
new file mode 100644
index 000000000..de01ca9bf
--- /dev/null
+++ b/apps/web/src/components/(teams)/settings/layout/mobile-nav.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+
+import Link from 'next/link';
+import { useParams, usePathname } from 'next/navigation';
+
+import { CreditCard, Key, User } from 'lucide-react';
+
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type MobileNavProps = HTMLAttributes<HTMLDivElement>;
+
+export const MobileNav = ({ className, ...props }: MobileNavProps) => {
+  const pathname = usePathname();
+  const params = useParams();
+
+  const teamUrl = typeof params?.teamUrl === 'string' ? params?.teamUrl : '';
+
+  const settingsPath = `/t/${teamUrl}/settings`;
+  const membersPath = `/t/${teamUrl}/settings/members`;
+  const billingPath = `/t/${teamUrl}/settings/billing`;
+
+  return (
+    <div
+      className={cn('flex flex-wrap items-center justify-start gap-x-2 gap-y-4', className)}
+      {...props}
+    >
+      <Link href={settingsPath}>
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith(settingsPath) &&
+              pathname.split('/').length === 4 &&
+              'bg-secondary',
+          )}
+        >
+          <User className="mr-2 h-5 w-5" />
+          General
+        </Button>
+      </Link>
+
+      <Link href={membersPath}>
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith(membersPath) && 'bg-secondary',
+          )}
+        >
+          <Key className="mr-2 h-5 w-5" />
+          Members
+        </Button>
+      </Link>
+
+      {IS_BILLING_ENABLED && (
+        <Link href={billingPath}>
+          <Button
+            variant="ghost"
+            className={cn(
+              'w-full justify-start',
+              pathname?.startsWith(billingPath) && 'bg-secondary',
+            )}
+          >
+            <CreditCard className="mr-2 h-5 w-5" />
+            Billing
+          </Button>
+        </Link>
+      )}
+    </div>
+  );
+};
diff --git a/apps/web/src/components/(teams)/tables/current-user-teams-data-table.tsx b/apps/web/src/components/(teams)/tables/current-user-teams-data-table.tsx
new file mode 100644
index 000000000..0dd4bcf4c
--- /dev/null
+++ b/apps/web/src/components/(teams)/tables/current-user-teams-data-table.tsx
@@ -0,0 +1,158 @@
+'use client';
+
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+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';
+
+import { LeaveTeamDialog } from '../dialogs/leave-team-dialog';
+
+export const CurrentUserTeamsDataTable = () => {
+  const searchParams = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const parsedSearchParams = ZBaseTableSearchParamsSchema.parse(
+    Object.fromEntries(searchParams ?? []),
+  );
+
+  const { data, isLoading, isInitialLoading, isLoadingError } = trpc.team.findTeams.useQuery(
+    {
+      term: parsedSearchParams.query,
+      page: parsedSearchParams.page,
+      perPage: parsedSearchParams.perPage,
+    },
+    {
+      keepPreviousData: true,
+    },
+  );
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  return (
+    <DataTable
+      columns={[
+        {
+          header: 'Team',
+          accessorKey: 'name',
+          cell: ({ row }) => (
+            <Link href={`/t/${row.original.url}`} scroll={false}>
+              <AvatarWithText
+                avatarClass="h-12 w-12"
+                avatarFallback={row.original.name.slice(0, 1).toUpperCase()}
+                primaryText={
+                  <span className="text-foreground/80 font-semibold">{row.original.name}</span>
+                }
+                secondaryText={`${WEBAPP_BASE_URL}/t/${row.original.url}`}
+              />
+            </Link>
+          ),
+        },
+        {
+          header: 'Role',
+          accessorKey: 'role',
+          cell: ({ row }) =>
+            row.original.ownerUserId === row.original.currentTeamMember.userId
+              ? 'Owner'
+              : TEAM_MEMBER_ROLE_MAP[row.original.currentTeamMember.role],
+        },
+        {
+          header: 'Member Since',
+          accessorKey: 'createdAt',
+          cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+        },
+        {
+          id: 'actions',
+          cell: ({ row }) => (
+            <div className="flex justify-end space-x-2">
+              {canExecuteTeamAction('MANAGE_TEAM', row.original.currentTeamMember.role) && (
+                <Button variant="outline" asChild>
+                  <Link href={`/t/${row.original.url}/settings`}>Manage</Link>
+                </Button>
+              )}
+
+              <LeaveTeamDialog
+                teamId={row.original.id}
+                teamName={row.original.name}
+                role={row.original.currentTeamMember.role}
+                trigger={
+                  <Button
+                    variant="destructive"
+                    disabled={row.original.ownerUserId === row.original.currentTeamMember.userId}
+                    onSelect={(e) => e.preventDefault()}
+                  >
+                    Leave
+                  </Button>
+                }
+              />
+            </div>
+          ),
+        },
+      ]}
+      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 className="w-1/3 py-4 pr-4">
+              <div className="flex w-full flex-row items-center">
+                <Skeleton className="h-12 w-12 flex-shrink-0 rounded-full" />
+
+                <div className="ml-2 flex flex-grow flex-col">
+                  <Skeleton className="h-4 w-1/2 max-w-[8rem]" />
+                  <Skeleton className="mt-1 h-4 w-2/3 max-w-[12rem]" />
+                </div>
+              </div>
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <div className="flex flex-row justify-end space-x-2">
+                <Skeleton className="h-10 w-20 rounded" />
+                <Skeleton className="h-10 w-16 rounded" />
+              </div>
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+    </DataTable>
+  );
+};
diff --git a/apps/web/src/components/(teams)/tables/pending-user-teams-data-table-actions.tsx b/apps/web/src/components/(teams)/tables/pending-user-teams-data-table-actions.tsx
new file mode 100644
index 000000000..64a58375c
--- /dev/null
+++ b/apps/web/src/components/(teams)/tables/pending-user-teams-data-table-actions.tsx
@@ -0,0 +1,53 @@
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type PendingUserTeamsDataTableActionsProps = {
+  className?: string;
+  pendingTeamId: number;
+  onPayClick: (pendingTeamId: number) => void;
+};
+
+export const PendingUserTeamsDataTableActions = ({
+  className,
+  pendingTeamId,
+  onPayClick,
+}: PendingUserTeamsDataTableActionsProps) => {
+  const { toast } = useToast();
+
+  const { mutateAsync: deleteTeamPending, isLoading: deletingTeam } =
+    trpc.team.deleteTeamPending.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Pending team deleted.',
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          description:
+            'We encountered an unknown error while attempting to delete the pending team. Please try again later.',
+          duration: 10000,
+          variant: 'destructive',
+        });
+      },
+    });
+
+  return (
+    <fieldset disabled={deletingTeam} className={cn('flex justify-end space-x-2', className)}>
+      <Button variant="outline" onClick={() => onPayClick(pendingTeamId)}>
+        Pay
+      </Button>
+
+      <Button
+        variant="destructive"
+        loading={deletingTeam}
+        onClick={async () => deleteTeamPending({ pendingTeamId: pendingTeamId })}
+      >
+        Remove
+      </Button>
+    </fieldset>
+  );
+};
diff --git a/apps/web/src/components/(teams)/tables/pending-user-teams-data-table.tsx b/apps/web/src/components/(teams)/tables/pending-user-teams-data-table.tsx
new file mode 100644
index 000000000..84d4e38df
--- /dev/null
+++ b/apps/web/src/components/(teams)/tables/pending-user-teams-data-table.tsx
@@ -0,0 +1,145 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useSearchParams } from 'next/navigation';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { trpc } from '@documenso/trpc/react';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+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';
+
+import { CreateTeamCheckoutDialog } from '../dialogs/create-team-checkout-dialog';
+import { PendingUserTeamsDataTableActions } from './pending-user-teams-data-table-actions';
+
+export const PendingUserTeamsDataTable = () => {
+  const searchParams = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const parsedSearchParams = ZBaseTableSearchParamsSchema.parse(
+    Object.fromEntries(searchParams ?? []),
+  );
+
+  const [checkoutPendingTeamId, setCheckoutPendingTeamId] = useState<number | null>(null);
+
+  const { data, isLoading, isInitialLoading, isLoadingError } = trpc.team.findTeamsPending.useQuery(
+    {
+      term: parsedSearchParams.query,
+      page: parsedSearchParams.page,
+      perPage: parsedSearchParams.perPage,
+    },
+    {
+      keepPreviousData: true,
+    },
+  );
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  useEffect(() => {
+    const searchParamCheckout = searchParams?.get('checkout');
+
+    if (searchParamCheckout && !isNaN(parseInt(searchParamCheckout))) {
+      setCheckoutPendingTeamId(parseInt(searchParamCheckout));
+      updateSearchParams({ checkout: null });
+    }
+  }, [searchParams, updateSearchParams]);
+
+  return (
+    <>
+      <DataTable
+        columns={[
+          {
+            header: 'Team',
+            accessorKey: 'name',
+            cell: ({ row }) => (
+              <AvatarWithText
+                avatarClass="h-12 w-12"
+                avatarFallback={row.original.name.slice(0, 1).toUpperCase()}
+                primaryText={
+                  <span className="text-foreground/80 font-semibold">{row.original.name}</span>
+                }
+                secondaryText={`${WEBAPP_BASE_URL}/t/${row.original.url}`}
+              />
+            ),
+          },
+          {
+            header: 'Created on',
+            accessorKey: 'createdAt',
+            cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+          },
+          {
+            id: 'actions',
+            cell: ({ row }) => (
+              <PendingUserTeamsDataTableActions
+                className="justify-end"
+                pendingTeamId={row.original.id}
+                onPayClick={setCheckoutPendingTeamId}
+              />
+            ),
+          },
+        ]}
+        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 className="w-1/3 py-4 pr-4">
+                <div className="flex w-full flex-row items-center">
+                  <Skeleton className="h-12 w-12 flex-shrink-0 rounded-full" />
+
+                  <div className="ml-2 flex flex-grow flex-col">
+                    <Skeleton className="h-4 w-1/2 max-w-[8rem]" />
+                    <Skeleton className="mt-1 h-4 w-2/3 max-w-[12rem]" />
+                  </div>
+                </div>
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-12 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <div className="flex flex-row justify-end space-x-2">
+                  <Skeleton className="h-10 w-16 rounded" />
+                  <Skeleton className="h-10 w-20 rounded" />
+                </div>
+              </TableCell>
+            </>
+          ),
+        }}
+      >
+        {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+      </DataTable>
+
+      <CreateTeamCheckoutDialog
+        pendingTeamId={checkoutPendingTeamId}
+        onClose={() => setCheckoutPendingTeamId(null)}
+      />
+    </>
+  );
+};
diff --git a/apps/web/src/components/(teams)/tables/team-billing-invoices-data-table.tsx b/apps/web/src/components/(teams)/tables/team-billing-invoices-data-table.tsx
new file mode 100644
index 000000000..a860ac6d9
--- /dev/null
+++ b/apps/web/src/components/(teams)/tables/team-billing-invoices-data-table.tsx
@@ -0,0 +1,152 @@
+'use client';
+
+import Link from 'next/link';
+
+import { File } from 'lucide-react';
+import { DateTime } from 'luxon';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+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';
+
+export type TeamBillingInvoicesDataTableProps = {
+  teamId: number;
+};
+
+export const TeamBillingInvoicesDataTable = ({ teamId }: TeamBillingInvoicesDataTableProps) => {
+  const { data, isLoading, isInitialLoading, isLoadingError } = trpc.team.findTeamInvoices.useQuery(
+    {
+      teamId,
+    },
+    {
+      keepPreviousData: true,
+    },
+  );
+
+  const formatCurrency = (currency: string, amount: number) => {
+    const formatter = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency,
+    });
+
+    return formatter.format(amount);
+  };
+
+  const results = {
+    data: data?.data ?? [],
+    perPage: 100,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  return (
+    <DataTable
+      columns={[
+        {
+          header: 'Invoice',
+          accessorKey: 'created',
+          cell: ({ row }) => (
+            <div className="flex max-w-xs items-center gap-2">
+              <File className="h-6 w-6" />
+
+              <div className="flex flex-col text-sm">
+                <span className="text-foreground/80 font-semibold">
+                  {DateTime.fromSeconds(row.original.created).toFormat('MMMM yyyy')}
+                </span>
+                <span className="text-muted-foreground">
+                  {row.original.quantity} {row.original.quantity > 1 ? 'Seats' : 'Seat'}
+                </span>
+              </div>
+            </div>
+          ),
+        },
+        {
+          header: 'Status',
+          accessorKey: 'status',
+          cell: ({ row }) => {
+            const { status, paid } = row.original;
+
+            if (!status) {
+              return paid ? 'Paid' : 'Unpaid';
+            }
+
+            return status.charAt(0).toUpperCase() + status.slice(1);
+          },
+        },
+        {
+          header: 'Amount',
+          accessorKey: 'total',
+          cell: ({ row }) => formatCurrency(row.original.currency, row.original.total / 100),
+        },
+        {
+          id: 'actions',
+          cell: ({ row }) => (
+            <div className="flex justify-end space-x-2">
+              <Button
+                variant="outline"
+                asChild
+                disabled={typeof row.original.hostedInvoicePdf !== 'string'}
+              >
+                <Link href={row.original.hostedInvoicePdf ?? ''} target="_blank">
+                  View
+                </Link>
+              </Button>
+
+              <Button
+                variant="outline"
+                asChild
+                disabled={typeof row.original.hostedInvoicePdf !== 'string'}
+              >
+                <Link href={row.original.invoicePdf ?? ''} target="_blank">
+                  Download
+                </Link>
+              </Button>
+            </div>
+          ),
+        },
+      ]}
+      data={results.data}
+      perPage={results.perPage}
+      currentPage={results.currentPage}
+      totalPages={results.totalPages}
+      error={{
+        enable: isLoadingError,
+      }}
+      skeleton={{
+        enable: isLoading && isInitialLoading,
+        rows: 3,
+        component: (
+          <>
+            <TableCell className="w-1/3 py-4 pr-4">
+              <div className="flex w-full flex-row items-center">
+                <Skeleton className="h-7 w-7 flex-shrink-0 rounded" />
+
+                <div className="ml-2 flex flex-grow flex-col">
+                  <Skeleton className="h-4 w-1/2 max-w-[8rem]" />
+                  <Skeleton className="mt-1 h-4 w-2/3 max-w-[12rem]" />
+                </div>
+              </div>
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <div className="flex flex-row justify-end space-x-2">
+                <Skeleton className="h-10 w-20 rounded" />
+                <Skeleton className="h-10 w-16 rounded" />
+              </div>
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+    </DataTable>
+  );
+};
diff --git a/apps/web/src/components/(teams)/tables/team-member-invites-data-table.tsx b/apps/web/src/components/(teams)/tables/team-member-invites-data-table.tsx
new file mode 100644
index 000000000..f0e3580e3
--- /dev/null
+++ b/apps/web/src/components/(teams)/tables/team-member-invites-data-table.tsx
@@ -0,0 +1,203 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+
+import { History, MoreHorizontal, Trash2 } from 'lucide-react';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { trpc } from '@documenso/trpc/react';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+export type TeamMemberInvitesDataTableProps = {
+  teamId: number;
+};
+
+export const TeamMemberInvitesDataTable = ({ teamId }: TeamMemberInvitesDataTableProps) => {
+  const searchParams = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const { toast } = useToast();
+
+  const parsedSearchParams = ZBaseTableSearchParamsSchema.parse(
+    Object.fromEntries(searchParams ?? []),
+  );
+
+  const { data, isLoading, isInitialLoading, isLoadingError } =
+    trpc.team.findTeamMemberInvites.useQuery(
+      {
+        teamId,
+        term: parsedSearchParams.query,
+        page: parsedSearchParams.page,
+        perPage: parsedSearchParams.perPage,
+      },
+      {
+        keepPreviousData: true,
+      },
+    );
+
+  const { mutateAsync: resendTeamMemberInvitation } =
+    trpc.team.resendTeamMemberInvitation.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Invitation has been resent',
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          description: 'Unable to resend invitation. Please try again.',
+          variant: 'destructive',
+        });
+      },
+    });
+
+  const { mutateAsync: deleteTeamMemberInvitations } =
+    trpc.team.deleteTeamMemberInvitations.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Invitation has been deleted',
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          description: 'Unable to delete invitation. Please try again.',
+          variant: 'destructive',
+        });
+      },
+    });
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  return (
+    <DataTable
+      columns={[
+        {
+          header: 'Team Member',
+          cell: ({ row }) => {
+            return (
+              <AvatarWithText
+                avatarClass="h-12 w-12"
+                avatarFallback={row.original.email.slice(0, 1).toUpperCase()}
+                primaryText={
+                  <span className="text-foreground/80 font-semibold">{row.original.email}</span>
+                }
+              />
+            );
+          },
+        },
+        {
+          header: 'Role',
+          accessorKey: 'role',
+          cell: ({ row }) => TEAM_MEMBER_ROLE_MAP[row.original.role] ?? row.original.role,
+        },
+        {
+          header: 'Invited At',
+          accessorKey: 'createdAt',
+          cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+        },
+        {
+          header: 'Actions',
+          cell: ({ row }) => (
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent className="w-52" align="start" forceMount>
+                <DropdownMenuLabel>Actions</DropdownMenuLabel>
+
+                <DropdownMenuItem
+                  onClick={async () =>
+                    resendTeamMemberInvitation({
+                      teamId,
+                      invitationId: row.original.id,
+                    })
+                  }
+                >
+                  <History className="mr-2 h-4 w-4" />
+                  Resend
+                </DropdownMenuItem>
+
+                <DropdownMenuItem
+                  onClick={async () =>
+                    deleteTeamMemberInvitations({
+                      teamId,
+                      invitationIds: [row.original.id],
+                    })
+                  }
+                >
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  Remove
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ),
+        },
+      ]}
+      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 className="w-1/2 py-4 pr-4">
+              <div className="flex w-full flex-row items-center">
+                <Skeleton className="h-12 w-12 flex-shrink-0 rounded-full" />
+                <Skeleton className="ml-2 h-4 w-1/3 max-w-[10rem]" />
+              </div>
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-6 rounded-full" />
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+    </DataTable>
+  );
+};
diff --git a/apps/web/src/components/(teams)/tables/team-members-data-table.tsx b/apps/web/src/components/(teams)/tables/team-members-data-table.tsx
new file mode 100644
index 000000000..3002ecbb0
--- /dev/null
+++ b/apps/web/src/components/(teams)/tables/team-members-data-table.tsx
@@ -0,0 +1,209 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+
+import { Edit, MoreHorizontal, Trash2 } from 'lucide-react';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { isTeamRoleWithinUserHierarchy } from '@documenso/lib/utils/teams';
+import type { TeamMemberRole } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+import { DeleteTeamMemberDialog } from '../dialogs/delete-team-member-dialog';
+import { UpdateTeamMemberDialog } from '../dialogs/update-team-member-dialog';
+
+export type TeamMembersDataTableProps = {
+  currentUserTeamRole: TeamMemberRole;
+  teamOwnerUserId: number;
+  teamId: number;
+  teamName: string;
+};
+
+export const TeamMembersDataTable = ({
+  currentUserTeamRole,
+  teamOwnerUserId,
+  teamId,
+  teamName,
+}: TeamMembersDataTableProps) => {
+  const searchParams = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const parsedSearchParams = ZBaseTableSearchParamsSchema.parse(
+    Object.fromEntries(searchParams ?? []),
+  );
+
+  const { data, isLoading, isInitialLoading, isLoadingError } = trpc.team.findTeamMembers.useQuery(
+    {
+      teamId,
+      term: parsedSearchParams.query,
+      page: parsedSearchParams.page,
+      perPage: parsedSearchParams.perPage,
+    },
+    {
+      keepPreviousData: true,
+    },
+  );
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  return (
+    <DataTable
+      columns={[
+        {
+          header: 'Team Member',
+          cell: ({ row }) => {
+            const avatarFallbackText = row.original.user.name
+              ? extractInitials(row.original.user.name)
+              : row.original.user.email.slice(0, 1).toUpperCase();
+
+            return (
+              <AvatarWithText
+                avatarClass="h-12 w-12"
+                avatarFallback={avatarFallbackText}
+                primaryText={
+                  <span className="text-foreground/80 font-semibold">{row.original.user.name}</span>
+                }
+                secondaryText={row.original.user.email}
+              />
+            );
+          },
+        },
+        {
+          header: 'Role',
+          accessorKey: 'role',
+          cell: ({ row }) =>
+            teamOwnerUserId === row.original.userId
+              ? 'Owner'
+              : TEAM_MEMBER_ROLE_MAP[row.original.role],
+        },
+        {
+          header: 'Member Since',
+          accessorKey: 'createdAt',
+          cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+        },
+        {
+          header: 'Actions',
+          cell: ({ row }) => (
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent className="w-52" align="start" forceMount>
+                <DropdownMenuLabel>Actions</DropdownMenuLabel>
+
+                <UpdateTeamMemberDialog
+                  currentUserTeamRole={currentUserTeamRole}
+                  teamId={row.original.teamId}
+                  teamMemberId={row.original.id}
+                  teamMemberName={row.original.user.name ?? ''}
+                  teamMemberRole={row.original.role}
+                  trigger={
+                    <DropdownMenuItem
+                      disabled={
+                        teamOwnerUserId === row.original.userId ||
+                        !isTeamRoleWithinUserHierarchy(currentUserTeamRole, row.original.role)
+                      }
+                      onSelect={(e) => e.preventDefault()}
+                      title="Update team member role"
+                    >
+                      <Edit className="mr-2 h-4 w-4" />
+                      Update role
+                    </DropdownMenuItem>
+                  }
+                />
+
+                <DeleteTeamMemberDialog
+                  teamId={teamId}
+                  teamName={teamName}
+                  teamMemberId={row.original.id}
+                  teamMemberName={row.original.user.name ?? ''}
+                  teamMemberEmail={row.original.user.email}
+                  trigger={
+                    <DropdownMenuItem
+                      onSelect={(e) => e.preventDefault()}
+                      disabled={
+                        teamOwnerUserId === row.original.userId ||
+                        !isTeamRoleWithinUserHierarchy(currentUserTeamRole, row.original.role)
+                      }
+                      title="Remove team member"
+                    >
+                      <Trash2 className="mr-2 h-4 w-4" />
+                      Remove
+                    </DropdownMenuItem>
+                  }
+                />
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ),
+        },
+      ]}
+      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 className="w-1/2 py-4 pr-4">
+              <div className="flex w-full flex-row items-center">
+                <Skeleton className="h-12 w-12 flex-shrink-0 rounded-full" />
+
+                <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>
+              </div>
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-6 rounded-full" />
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+    </DataTable>
+  );
+};
diff --git a/apps/web/src/components/(teams)/tables/teams-member-page-data-table.tsx b/apps/web/src/components/(teams)/tables/teams-member-page-data-table.tsx
new file mode 100644
index 000000000..316c4373f
--- /dev/null
+++ b/apps/web/src/components/(teams)/tables/teams-member-page-data-table.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import Link from 'next/link';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import type { TeamMemberRole } from '@documenso/prisma/client';
+import { Input } from '@documenso/ui/primitives/input';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+
+import { TeamMemberInvitesDataTable } from '~/components/(teams)/tables/team-member-invites-data-table';
+import { TeamMembersDataTable } from '~/components/(teams)/tables/team-members-data-table';
+
+export type TeamsMemberPageDataTableProps = {
+  currentUserTeamRole: TeamMemberRole;
+  teamId: number;
+  teamName: string;
+  teamOwnerUserId: number;
+};
+
+export const TeamsMemberPageDataTable = ({
+  currentUserTeamRole,
+  teamId,
+  teamName,
+  teamOwnerUserId,
+}: TeamsMemberPageDataTableProps) => {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
+
+  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
+
+  const currentTab = searchParams?.get('tab') === 'invites' ? 'invites' : 'members';
+
+  /**
+   * Handle debouncing the search query.
+   */
+  useEffect(() => {
+    if (!pathname) {
+      return;
+    }
+
+    const params = new URLSearchParams(searchParams?.toString());
+
+    params.set('query', debouncedSearchQuery);
+
+    if (debouncedSearchQuery === '') {
+      params.delete('query');
+    }
+
+    router.push(`${pathname}?${params.toString()}`);
+  }, [debouncedSearchQuery, pathname, router, searchParams]);
+
+  return (
+    <div>
+      <div className="my-4 flex flex-row items-center justify-between space-x-4">
+        <Input
+          defaultValue={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder="Search"
+        />
+
+        <Tabs value={currentTab} className="flex-shrink-0 overflow-x-auto">
+          <TabsList>
+            <TabsTrigger className="min-w-[60px]" value="members" asChild>
+              <Link href={pathname ?? '/'}>All</Link>
+            </TabsTrigger>
+
+            <TabsTrigger className="min-w-[60px]" value="invites" asChild>
+              <Link href={`${pathname}?tab=invites`}>Pending</Link>
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+
+      {currentTab === 'invites' ? (
+        <TeamMemberInvitesDataTable key="invites" teamId={teamId} />
+      ) : (
+        <TeamMembersDataTable
+          key="members"
+          currentUserTeamRole={currentUserTeamRole}
+          teamId={teamId}
+          teamName={teamName}
+          teamOwnerUserId={teamOwnerUserId}
+        />
+      )}
+    </div>
+  );
+};
diff --git a/apps/web/src/components/(teams)/tables/user-settings-teams-page-data-table.tsx b/apps/web/src/components/(teams)/tables/user-settings-teams-page-data-table.tsx
new file mode 100644
index 000000000..277421263
--- /dev/null
+++ b/apps/web/src/components/(teams)/tables/user-settings-teams-page-data-table.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import Link from 'next/link';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { trpc } from '@documenso/trpc/react';
+import { Input } from '@documenso/ui/primitives/input';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+
+import { CurrentUserTeamsDataTable } from './current-user-teams-data-table';
+import { PendingUserTeamsDataTable } from './pending-user-teams-data-table';
+
+export const UserSettingsTeamsPageDataTable = () => {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
+
+  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
+
+  const currentTab = searchParams?.get('tab') === 'pending' ? 'pending' : 'active';
+
+  const { data } = trpc.team.findTeamsPending.useQuery(
+    {},
+    {
+      keepPreviousData: true,
+    },
+  );
+
+  /**
+   * Handle debouncing the search query.
+   */
+  useEffect(() => {
+    if (!pathname) {
+      return;
+    }
+
+    const params = new URLSearchParams(searchParams?.toString());
+
+    params.set('query', debouncedSearchQuery);
+
+    if (debouncedSearchQuery === '') {
+      params.delete('query');
+    }
+
+    router.push(`${pathname}?${params.toString()}`);
+  }, [debouncedSearchQuery, pathname, router, searchParams]);
+
+  return (
+    <div>
+      <div className="my-4 flex flex-row items-center justify-between space-x-4">
+        <Input
+          defaultValue={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder="Search"
+        />
+
+        <Tabs value={currentTab} className="flex-shrink-0 overflow-x-auto">
+          <TabsList>
+            <TabsTrigger className="min-w-[60px]" value="active" asChild>
+              <Link href={pathname ?? '/'}>Active</Link>
+            </TabsTrigger>
+
+            <TabsTrigger className="min-w-[60px]" value="pending" asChild>
+              <Link href={`${pathname}?tab=pending`}>
+                Pending
+                {data && data.count > 0 && (
+                  <span className="ml-1 hidden opacity-50 md:inline-block">{data.count}</span>
+                )}
+              </Link>
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+
+      {currentTab === 'pending' ? <PendingUserTeamsDataTable /> : <CurrentUserTeamsDataTable />}
+    </div>
+  );
+};
diff --git a/apps/web/src/components/(teams)/team-billing-portal-button.tsx b/apps/web/src/components/(teams)/team-billing-portal-button.tsx
new file mode 100644
index 000000000..808b9b9ba
--- /dev/null
+++ b/apps/web/src/components/(teams)/team-billing-portal-button.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TeamBillingPortalButtonProps = {
+  buttonProps?: React.ComponentProps<typeof Button>;
+  teamId: number;
+};
+
+export const TeamBillingPortalButton = ({ buttonProps, teamId }: TeamBillingPortalButtonProps) => {
+  const { toast } = useToast();
+
+  const { mutateAsync: createBillingPortal, isLoading } =
+    trpc.team.createBillingPortal.useMutation();
+
+  const handleCreatePortal = async () => {
+    try {
+      const sessionUrl = await createBillingPortal({ teamId });
+
+      window.open(sessionUrl, '_blank');
+    } catch (err) {
+      toast({
+        title: 'Something went wrong',
+        description:
+          'We are unable to proceed to the billing portal at this time. Please try again, or contact support.',
+        variant: 'destructive',
+        duration: 10000,
+      });
+    }
+  };
+
+  return (
+    <Button {...buttonProps} onClick={async () => handleCreatePortal()} loading={isLoading}>
+      Manage subscription
+    </Button>
+  );
+};
diff --git a/apps/web/src/components/forms/signin.tsx b/apps/web/src/components/forms/signin.tsx
index b3e4ea019..b21e9621b 100644
--- a/apps/web/src/components/forms/signin.tsx
+++ b/apps/web/src/components/forms/signin.tsx
@@ -55,10 +55,11 @@ export type TSignInFormSchema = z.infer<typeof ZSignInFormSchema>;
 
 export type SignInFormProps = {
   className?: string;
+  initialEmail?: string;
   isGoogleSSOEnabled?: boolean;
 };
 
-export const SignInForm = ({ className, isGoogleSSOEnabled }: SignInFormProps) => {
+export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: SignInFormProps) => {
   const { toast } = useToast();
   const [isTwoFactorAuthenticationDialogOpen, setIsTwoFactorAuthenticationDialogOpen] =
     useState(false);
@@ -69,7 +70,7 @@ export const SignInForm = ({ className, isGoogleSSOEnabled }: SignInFormProps) =
 
   const form = useForm<TSignInFormSchema>({
     values: {
-      email: '',
+      email: initialEmail ?? '',
       password: '',
       totpCode: '',
       backupCode: '',
diff --git a/apps/web/src/components/forms/signup.tsx b/apps/web/src/components/forms/signup.tsx
index f38ab15d1..430c7ebdf 100644
--- a/apps/web/src/components/forms/signup.tsx
+++ b/apps/web/src/components/forms/signup.tsx
@@ -48,17 +48,18 @@ export type TSignUpFormSchema = z.infer<typeof ZSignUpFormSchema>;
 
 export type SignUpFormProps = {
   className?: string;
+  initialEmail?: string;
   isGoogleSSOEnabled?: boolean;
 };
 
-export const SignUpForm = ({ className, isGoogleSSOEnabled }: SignUpFormProps) => {
+export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: SignUpFormProps) => {
   const { toast } = useToast();
   const analytics = useAnalytics();
 
   const form = useForm<TSignUpFormSchema>({
     values: {
       name: '',
-      email: '',
+      email: initialEmail ?? '',
       password: '',
       signature: '',
     },
diff --git a/apps/web/src/middleware.ts b/apps/web/src/middleware.ts
index 25bfbbb40..46ee93fdf 100644
--- a/apps/web/src/middleware.ts
+++ b/apps/web/src/middleware.ts
@@ -1,14 +1,62 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
 
 import { getToken } from 'next-auth/jwt';
 
+import { TEAM_URL_ROOT_REGEX } from '@documenso/lib/constants/teams';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+
 export default async function middleware(req: NextRequest) {
+  const preferredTeamUrl = cookies().get('preferred-team-url');
+
+  const referrer = req.headers.get('referer');
+  const referrerUrl = referrer ? new URL(referrer) : null;
+  const referrerPathname = referrerUrl ? referrerUrl.pathname : null;
+
+  // Whether to reset the preferred team url cookie if the user accesses a non team page from a team page.
+  const resetPreferredTeamUrl =
+    referrerPathname &&
+    referrerPathname.startsWith('/t/') &&
+    (!req.nextUrl.pathname.startsWith('/t/') || req.nextUrl.pathname === '/');
+
+  // Redirect root page to `/documents` or `/t/{preferredTeamUrl}/documents`.
   if (req.nextUrl.pathname === '/') {
-    const redirectUrl = new URL('/documents', req.url);
+    const redirectUrlPath = formatDocumentsPath(
+      resetPreferredTeamUrl ? undefined : preferredTeamUrl?.value,
+    );
+
+    const redirectUrl = new URL(redirectUrlPath, req.url);
+    const response = NextResponse.redirect(redirectUrl);
+
+    return response;
+  }
+
+  // Redirect `/t` to `/settings/teams`.
+  if (req.nextUrl.pathname === '/t') {
+    const redirectUrl = new URL('/settings/teams', req.url);
 
     return NextResponse.redirect(redirectUrl);
   }
 
+  // Redirect `/t/<team_url>` to `/t/<team_url>/documents`.
+  if (TEAM_URL_ROOT_REGEX.test(req.nextUrl.pathname)) {
+    const redirectUrl = new URL(`${req.nextUrl.pathname}/documents`, req.url);
+
+    const response = NextResponse.redirect(redirectUrl);
+    response.cookies.set('preferred-team-url', req.nextUrl.pathname.replace('/t/', ''));
+
+    return response;
+  }
+
+  // Set the preferred team url cookie if user accesses a team page.
+  if (req.nextUrl.pathname.startsWith('/t/')) {
+    const response = NextResponse.next();
+    response.cookies.set('preferred-team-url', req.nextUrl.pathname.split('/')[2]);
+
+    return response;
+  }
+
   if (req.nextUrl.pathname.startsWith('/signin')) {
     const token = await getToken({ req });
 
@@ -19,5 +67,34 @@ export default async function middleware(req: NextRequest) {
     }
   }
 
+  // Clear preferred team url cookie if user accesses a non team page from a team page.
+  if (resetPreferredTeamUrl || req.nextUrl.pathname === '/documents') {
+    const response = NextResponse.next();
+    response.cookies.set('preferred-team-url', '');
+
+    return response;
+  }
+
   return NextResponse.next();
 }
+
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - api (API routes)
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     * - ingest (analytics)
+     * - site.webmanifest
+     */
+    {
+      source: '/((?!api|_next/static|_next/image|ingest|favicon|site.webmanifest).*)',
+      missing: [
+        { type: 'header', key: 'next-router-prefetch' },
+        { type: 'header', key: 'purpose', value: 'prefetch' },
+      ],
+    },
+  ],
+};
diff --git a/package-lock.json b/package-lock.json
index 9012d3f29..aae034c57 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4886,9 +4886,9 @@
       }
     },
     "node_modules/@radix-ui/react-select": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-1.2.2.tgz",
-      "integrity": "sha512-zI7McXr8fNaSrUY9mZe4x/HC0jTLY9fWNhO1oLWYMQGDXuV4UCivIGTxwioSzO0ZCYX9iSLyWmAh/1TOmX3Cnw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.0.0.tgz",
+      "integrity": "sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@radix-ui/number": "1.0.1",
@@ -4897,12 +4897,12 @@
         "@radix-ui/react-compose-refs": "1.0.1",
         "@radix-ui/react-context": "1.0.1",
         "@radix-ui/react-direction": "1.0.1",
-        "@radix-ui/react-dismissable-layer": "1.0.4",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
         "@radix-ui/react-focus-guards": "1.0.1",
-        "@radix-ui/react-focus-scope": "1.0.3",
+        "@radix-ui/react-focus-scope": "1.0.4",
         "@radix-ui/react-id": "1.0.1",
-        "@radix-ui/react-popper": "1.1.2",
-        "@radix-ui/react-portal": "1.0.3",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
         "@radix-ui/react-primitive": "1.0.3",
         "@radix-ui/react-slot": "1.0.2",
         "@radix-ui/react-use-callback-ref": "1.0.1",
@@ -4928,113 +4928,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-dismissable-layer": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz",
-      "integrity": "sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-use-callback-ref": "1.0.1",
-        "@radix-ui/react-use-escape-keydown": "1.0.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-focus-scope": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.3.tgz",
-      "integrity": "sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-use-callback-ref": "1.0.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-popper": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.2.tgz",
-      "integrity": "sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@floating-ui/react-dom": "^2.0.0",
-        "@radix-ui/react-arrow": "1.0.3",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-use-callback-ref": "1.0.1",
-        "@radix-ui/react-use-layout-effect": "1.0.1",
-        "@radix-ui/react-use-rect": "1.0.1",
-        "@radix-ui/react-use-size": "1.0.1",
-        "@radix-ui/rect": "1.0.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-portal": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.3.tgz",
-      "integrity": "sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "1.0.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-separator": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz",
@@ -19750,13 +19643,19 @@
         "@prisma/client": "5.4.2",
         "dotenv": "^16.3.1",
         "dotenv-cli": "^7.3.0",
-        "prisma": "5.4.2"
+        "prisma": "5.4.2",
+        "ts-pattern": "^5.0.6"
       },
       "devDependencies": {
         "ts-node": "^10.9.1",
         "typescript": "5.2.2"
       }
     },
+    "packages/prisma/node_modules/ts-pattern": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.0.6.tgz",
+      "integrity": "sha512-Y+jOjihlFriWzcBjncPCf2/am+Hgz7LtsWs77pWg5vQQKLQj07oNrJryo/wK2G0ndNaoVn2ownFMeoeAuReu3Q=="
+    },
     "packages/prisma/node_modules/typescript": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
@@ -19864,7 +19763,7 @@
         "@radix-ui/react-checkbox": "^1.0.3",
         "@radix-ui/react-collapsible": "^1.0.2",
         "@radix-ui/react-context-menu": "^2.1.3",
-        "@radix-ui/react-dialog": "^1.0.3",
+        "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.4",
         "@radix-ui/react-hover-card": "^1.0.5",
         "@radix-ui/react-label": "^2.0.1",
@@ -19874,7 +19773,7 @@
         "@radix-ui/react-progress": "^1.0.2",
         "@radix-ui/react-radio-group": "^1.1.2",
         "@radix-ui/react-scroll-area": "^1.0.3",
-        "@radix-ui/react-select": "^1.2.1",
+        "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-separator": "^1.0.2",
         "@radix-ui/react-slider": "^1.1.1",
         "@radix-ui/react-slot": "^1.0.2",
diff --git a/packages/app-tests/e2e/fixtures/authentication.ts b/packages/app-tests/e2e/fixtures/authentication.ts
new file mode 100644
index 000000000..f1926fb2a
--- /dev/null
+++ b/packages/app-tests/e2e/fixtures/authentication.ts
@@ -0,0 +1,40 @@
+import type { Page } from '@playwright/test';
+
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+
+type ManualLoginOptions = {
+  page: Page;
+  email?: string;
+  password?: string;
+
+  /**
+   * Where to navigate after login.
+   */
+  redirectPath?: string;
+};
+
+export const manualLogin = async ({
+  page,
+  email = 'example@documenso.com',
+  password = 'password',
+  redirectPath,
+}: ManualLoginOptions) => {
+  await page.goto(`${WEBAPP_BASE_URL}/signin`);
+
+  await page.getByLabel('Email').click();
+  await page.getByLabel('Email').fill(email);
+
+  await page.getByLabel('Password', { exact: true }).fill(password);
+  await page.getByLabel('Password', { exact: true }).press('Enter');
+
+  if (redirectPath) {
+    await page.waitForURL(`${WEBAPP_BASE_URL}/documents`);
+    await page.goto(`${WEBAPP_BASE_URL}${redirectPath}`);
+  }
+};
+
+export const manualSignout = async ({ page }: ManualLoginOptions) => {
+  await page.getByTestId('menu-switcher').click();
+  await page.getByRole('menuitem', { name: 'Sign Out' }).click();
+  await page.waitForURL(`${WEBAPP_BASE_URL}/signin`);
+};
diff --git a/packages/app-tests/e2e/pr-711-deletion-of-documents.spec.ts b/packages/app-tests/e2e/pr-711-deletion-of-documents.spec.ts
index 12a099bbf..da95c66f0 100644
--- a/packages/app-tests/e2e/pr-711-deletion-of-documents.spec.ts
+++ b/packages/app-tests/e2e/pr-711-deletion-of-documents.spec.ts
@@ -2,6 +2,8 @@ import { expect, test } from '@playwright/test';
 
 import { TEST_USERS } from '@documenso/prisma/seed/pr-711-deletion-of-documents';
 
+import { manualLogin, manualSignout } from './fixtures/authentication';
+
 test.describe.configure({ mode: 'serial' });
 
 test('[PR-711]: seeded documents should be visible', async ({ page }) => {
@@ -19,17 +21,11 @@ test('[PR-711]: seeded documents should be visible', async ({ page }) => {
   await expect(page.getByRole('link', { name: 'Document 1 - Pending' })).toBeVisible();
   await expect(page.getByRole('link', { name: 'Document 1 - Draft' })).toBeVisible();
 
-  await page.getByTitle('Profile Dropdown').click();
-  await page.getByRole('menuitem', { name: 'Sign Out' }).click();
-
-  await page.waitForURL('/signin');
+  await manualSignout({ page });
 
   for (const recipient of recipients) {
-    await page.goto('/signin');
-
-    await page.getByLabel('Email').fill(recipient.email);
-    await page.getByLabel('Password', { exact: true }).fill(recipient.password);
-    await page.getByRole('button', { name: 'Sign In' }).click();
+    await page.waitForURL('/signin');
+    await manualLogin({ page, email: recipient.email, password: recipient.password });
 
     await page.waitForURL('/documents');
 
@@ -38,10 +34,7 @@ test('[PR-711]: seeded documents should be visible', async ({ page }) => {
 
     await expect(page.getByRole('link', { name: 'Document 1 - Draft' })).not.toBeVisible();
 
-    await page.getByTitle('Profile Dropdown').click();
-    await page.getByRole('menuitem', { name: 'Sign Out' }).click();
-
-    await page.waitForURL('/signin');
+    await manualSignout({ page });
   }
 });
 
@@ -74,13 +67,10 @@ test('[PR-711]: deleting a completed document should not remove it from recipien
 
   await expect(page.getByRole('row', { name: /Document 1 - Completed/ })).not.toBeVisible();
 
-  // signout
-  await page.getByTitle('Profile Dropdown').click();
-  await page.getByRole('menuitem', { name: 'Sign Out' }).click();
-
-  await page.waitForURL('/signin');
+  await manualSignout({ page });
 
   for (const recipient of recipients) {
+    await page.waitForURL('/signin');
     await page.goto('/signin');
 
     // sign in
@@ -96,11 +86,7 @@ test('[PR-711]: deleting a completed document should not remove it from recipien
     await expect(page.getByText('Everyone has signed').nth(0)).toBeVisible();
 
     await page.goto('/documents');
-
-    await page.getByTitle('Profile Dropdown').click();
-    await page.getByRole('menuitem', { name: 'Sign Out' }).click();
-
-    await page.waitForURL('/signin');
+    await manualSignout({ page });
   }
 });
 
@@ -115,11 +101,7 @@ test('[PR-711]: deleting a pending document should remove it from recipients', a
 
   await page.goto('/signin');
 
-  // sign in
-  await page.getByLabel('Email').fill(sender.email);
-  await page.getByLabel('Password', { exact: true }).fill(sender.password);
-  await page.getByRole('button', { name: 'Sign In' }).click();
-
+  await manualLogin({ page, email: sender.email, password: sender.password });
   await page.waitForURL('/documents');
 
   // open actions menu
@@ -133,19 +115,12 @@ test('[PR-711]: deleting a pending document should remove it from recipients', a
   await expect(page.getByRole('row', { name: /Document 1 - Pending/ })).not.toBeVisible();
 
   // signout
-  await page.getByTitle('Profile Dropdown').click();
-  await page.getByRole('menuitem', { name: 'Sign Out' }).click();
-
-  await page.waitForURL('/signin');
+  await manualSignout({ page });
 
   for (const recipient of recipients) {
-    await page.goto('/signin');
-
-    // sign in
-    await page.getByLabel('Email').fill(recipient.email);
-    await page.getByLabel('Password', { exact: true }).fill(recipient.password);
-    await page.getByRole('button', { name: 'Sign In' }).click();
+    await page.waitForURL('/signin');
 
+    await manualLogin({ page, email: recipient.email, password: recipient.password });
     await page.waitForURL('/documents');
 
     await expect(page.getByRole('link', { name: 'Document 1 - Pending' })).not.toBeVisible();
@@ -154,11 +129,9 @@ test('[PR-711]: deleting a pending document should remove it from recipients', a
     await expect(page.getByText(/document.*cancelled/i).nth(0)).toBeVisible();
 
     await page.goto('/documents');
+    await page.waitForURL('/documents');
 
-    await page.getByTitle('Profile Dropdown').click();
-    await page.getByRole('menuitem', { name: 'Sign Out' }).click();
-
-    await page.waitForURL('/signin');
+    await manualSignout({ page });
   }
 });
 
@@ -167,13 +140,7 @@ test('[PR-711]: deleting a draft document should remove it without additional pr
 }) => {
   const [sender] = TEST_USERS;
 
-  await page.goto('/signin');
-
-  // sign in
-  await page.getByLabel('Email').fill(sender.email);
-  await page.getByLabel('Password', { exact: true }).fill(sender.password);
-  await page.getByRole('button', { name: 'Sign In' }).click();
-
+  await manualLogin({ page, email: sender.email, password: sender.password });
   await page.waitForURL('/documents');
 
   // open actions menu
diff --git a/packages/app-tests/e2e/pr-713-add-document-search-to-command-menu.spec.ts b/packages/app-tests/e2e/pr-713-add-document-search-to-command-menu.spec.ts
index e9ae60d0e..160113f95 100644
--- a/packages/app-tests/e2e/pr-713-add-document-search-to-command-menu.spec.ts
+++ b/packages/app-tests/e2e/pr-713-add-document-search-to-command-menu.spec.ts
@@ -17,12 +17,6 @@ test('[PR-713]: should see sent documents', async ({ page }) => {
 
   await page.getByPlaceholder('Type a command or search...').fill('sent');
   await expect(page.getByRole('option', { name: '[713] Document - Sent' })).toBeVisible();
-
-  await page.keyboard.press('Escape');
-
-  // signout
-  await page.getByTitle('Profile Dropdown').click();
-  await page.getByRole('menuitem', { name: 'Sign Out' }).click();
 });
 
 test('[PR-713]: should see received documents', async ({ page }) => {
@@ -40,12 +34,6 @@ test('[PR-713]: should see received documents', async ({ page }) => {
 
   await page.getByPlaceholder('Type a command or search...').fill('received');
   await expect(page.getByRole('option', { name: '[713] Document - Received' })).toBeVisible();
-
-  await page.keyboard.press('Escape');
-
-  // signout
-  await page.getByTitle('Profile Dropdown').click();
-  await page.getByRole('menuitem', { name: 'Sign Out' }).click();
 });
 
 test('[PR-713]: should be able to search by recipient', async ({ page }) => {
@@ -63,10 +51,4 @@ test('[PR-713]: should be able to search by recipient', async ({ page }) => {
 
   await page.getByPlaceholder('Type a command or search...').fill(recipient.email);
   await expect(page.getByRole('option', { name: '[713] Document - Sent' })).toBeVisible();
-
-  await page.keyboard.press('Escape');
-
-  // signout
-  await page.getByTitle('Profile Dropdown').click();
-  await page.getByRole('menuitem', { name: 'Sign Out' }).click();
 });
diff --git a/packages/app-tests/e2e/teams/manage-team.spec.ts b/packages/app-tests/e2e/teams/manage-team.spec.ts
new file mode 100644
index 000000000..aed56b2bc
--- /dev/null
+++ b/packages/app-tests/e2e/teams/manage-team.spec.ts
@@ -0,0 +1,87 @@
+import { test } from '@playwright/test';
+
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { seedTeam, unseedTeam } from '@documenso/prisma/seed/teams';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+import { manualLogin } from '../fixtures/authentication';
+
+test.describe.configure({ mode: 'parallel' });
+
+test('[TEAMS]: create team', async ({ page }) => {
+  const user = await seedUser();
+
+  await manualLogin({
+    page,
+    email: user.email,
+    redirectPath: '/settings/teams',
+  });
+
+  const teamId = `team-${Date.now()}`;
+
+  // Create team.
+  await page.getByRole('button', { name: 'Create team' }).click();
+  await page.getByLabel('Team Name*').fill(teamId);
+  await page.getByTestId('dialog-create-team-button').click();
+
+  await page.getByTestId('dialog-create-team-button').waitFor({ state: 'hidden' });
+
+  const isCheckoutRequired = page.url().includes('pending');
+  test.skip(isCheckoutRequired, 'Test skipped because billing is enabled.');
+
+  // Goto new team settings page.
+  await page.getByRole('row').filter({ hasText: teamId }).getByRole('link').nth(1).click();
+
+  await unseedTeam(teamId);
+});
+
+test('[TEAMS]: delete team', async ({ page }) => {
+  const team = await seedTeam();
+
+  await manualLogin({
+    page,
+    email: team.owner.email,
+    redirectPath: `/t/${team.url}/settings`,
+  });
+
+  // Delete team.
+  await page.getByRole('button', { name: 'Delete team' }).click();
+  await page.getByLabel(`Confirm by typing delete ${team.url}`).fill(`delete ${team.url}`);
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  // Check that we have been redirected to the teams page.
+  await page.waitForURL(`${WEBAPP_BASE_URL}/settings/teams`);
+});
+
+test('[TEAMS]: update team', async ({ page }) => {
+  const team = await seedTeam();
+
+  await manualLogin({
+    page,
+    email: team.owner.email,
+  });
+
+  // Navigate to create team page.
+  await page.getByTestId('menu-switcher').click();
+  await page.getByRole('menuitem', { name: 'Manage teams' }).click();
+
+  // Goto team settings page.
+  await page.getByRole('row').filter({ hasText: team.url }).getByRole('link').nth(1).click();
+
+  const updatedTeamId = `team-${Date.now()}`;
+
+  // Update team.
+  await page.getByLabel('Team Name*').click();
+  await page.getByLabel('Team Name*').clear();
+  await page.getByLabel('Team Name*').fill(updatedTeamId);
+  await page.getByLabel('Team URL*').click();
+  await page.getByLabel('Team URL*').clear();
+  await page.getByLabel('Team URL*').fill(updatedTeamId);
+
+  await page.getByRole('button', { name: 'Update team' }).click();
+
+  // Check we have been redirected to the new team URL and the name is updated.
+  await page.waitForURL(`${WEBAPP_BASE_URL}/t/${updatedTeamId}/settings`);
+
+  await unseedTeam(updatedTeamId);
+});
diff --git a/packages/app-tests/e2e/teams/team-documents.spec.ts b/packages/app-tests/e2e/teams/team-documents.spec.ts
new file mode 100644
index 000000000..210189ca7
--- /dev/null
+++ b/packages/app-tests/e2e/teams/team-documents.spec.ts
@@ -0,0 +1,282 @@
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+import { DocumentStatus } from '@documenso/prisma/client';
+import { seedDocuments, seedTeamDocuments } from '@documenso/prisma/seed/documents';
+import { seedTeamEmail, unseedTeam, unseedTeamEmail } from '@documenso/prisma/seed/teams';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+import { manualLogin, manualSignout } from '../fixtures/authentication';
+
+test.describe.configure({ mode: 'parallel' });
+
+const checkDocumentTabCount = async (page: Page, tabName: string, count: number) => {
+  await page.getByRole('tab', { name: tabName }).click();
+
+  if (tabName !== 'All') {
+    await expect(page.getByRole('tab', { name: tabName })).toContainText(count.toString());
+  }
+
+  if (count === 0) {
+    await expect(page.getByRole('main')).toContainText(`Nothing to do`);
+    return;
+  }
+
+  await expect(page.getByRole('main')).toContainText(`Showing ${count}`);
+};
+
+test('[TEAMS]: check team documents count', async ({ page }) => {
+  const { team, teamMember2 } = await seedTeamDocuments();
+
+  // Run the test twice, once with the team owner and once with a team member to ensure the counts are the same.
+  for (const user of [team.owner, teamMember2]) {
+    await manualLogin({
+      page,
+      email: user.email,
+      redirectPath: `/t/${team.url}/documents`,
+    });
+
+    // Check document counts.
+    await checkDocumentTabCount(page, 'Inbox', 0);
+    await checkDocumentTabCount(page, 'Pending', 2);
+    await checkDocumentTabCount(page, 'Completed', 1);
+    await checkDocumentTabCount(page, 'Draft', 2);
+    await checkDocumentTabCount(page, 'All', 5);
+
+    // Apply filter.
+    await page.locator('button').filter({ hasText: 'Sender: All' }).click();
+    await page.getByRole('option', { name: teamMember2.name ?? '' }).click();
+    await page.waitForURL(/senderIds/);
+
+    // Check counts after filtering.
+    await checkDocumentTabCount(page, 'Inbox', 0);
+    await checkDocumentTabCount(page, 'Pending', 2);
+    await checkDocumentTabCount(page, 'Completed', 0);
+    await checkDocumentTabCount(page, 'Draft', 1);
+    await checkDocumentTabCount(page, 'All', 3);
+
+    await manualSignout({ page });
+  }
+
+  await unseedTeam(team.url);
+});
+
+test('[TEAMS]: check team documents count with internal team email', async ({ page }) => {
+  const { team, teamMember2, teamMember4 } = await seedTeamDocuments();
+  const { team: team2, teamMember2: team2Member2 } = await seedTeamDocuments();
+
+  const teamEmailMember = teamMember4;
+
+  await seedTeamEmail({
+    email: teamEmailMember.email,
+    teamId: team.id,
+  });
+
+  const testUser1 = await seedUser();
+
+  await seedDocuments([
+    // Documents sent from the team email account.
+    {
+      sender: teamEmailMember,
+      recipients: [testUser1],
+      type: DocumentStatus.COMPLETED,
+      documentOptions: {
+        teamId: team.id,
+      },
+    },
+    {
+      sender: teamEmailMember,
+      recipients: [testUser1],
+      type: DocumentStatus.PENDING,
+      documentOptions: {
+        teamId: team.id,
+      },
+    },
+    {
+      sender: teamMember4,
+      recipients: [testUser1],
+      type: DocumentStatus.DRAFT,
+    },
+    // Documents sent to the team email account.
+    {
+      sender: testUser1,
+      recipients: [teamEmailMember],
+      type: DocumentStatus.COMPLETED,
+    },
+    {
+      sender: testUser1,
+      recipients: [teamEmailMember],
+      type: DocumentStatus.PENDING,
+    },
+    {
+      sender: testUser1,
+      recipients: [teamEmailMember],
+      type: DocumentStatus.DRAFT,
+    },
+    // Document sent to the team email account from another team.
+    {
+      sender: team2Member2,
+      recipients: [teamEmailMember],
+      type: DocumentStatus.PENDING,
+      documentOptions: {
+        teamId: team2.id,
+      },
+    },
+  ]);
+
+  // Run the test twice, one with the team owner and once with the team member email to ensure the counts are the same.
+  for (const user of [team.owner, teamEmailMember]) {
+    await manualLogin({
+      page,
+      email: user.email,
+      redirectPath: `/t/${team.url}/documents`,
+    });
+
+    // Check document counts.
+    await checkDocumentTabCount(page, 'Inbox', 2);
+    await checkDocumentTabCount(page, 'Pending', 3);
+    await checkDocumentTabCount(page, 'Completed', 3);
+    await checkDocumentTabCount(page, 'Draft', 3);
+    await checkDocumentTabCount(page, 'All', 11);
+
+    // Apply filter.
+    await page.locator('button').filter({ hasText: 'Sender: All' }).click();
+    await page.getByRole('option', { name: teamMember2.name ?? '' }).click();
+    await page.waitForURL(/senderIds/);
+
+    // Check counts after filtering.
+    await checkDocumentTabCount(page, 'Inbox', 0);
+    await checkDocumentTabCount(page, 'Pending', 2);
+    await checkDocumentTabCount(page, 'Completed', 0);
+    await checkDocumentTabCount(page, 'Draft', 1);
+    await checkDocumentTabCount(page, 'All', 3);
+
+    await manualSignout({ page });
+  }
+
+  await unseedTeamEmail({ teamId: team.id });
+  await unseedTeam(team.url);
+});
+
+test('[TEAMS]: check team documents count with external team email', async ({ page }) => {
+  const { team, teamMember2 } = await seedTeamDocuments();
+  const { team: team2, teamMember2: team2Member2 } = await seedTeamDocuments();
+
+  const teamEmail = `external-team-email-${team.id}@test.documenso.com`;
+
+  await seedTeamEmail({
+    email: teamEmail,
+    teamId: team.id,
+  });
+
+  const testUser1 = await seedUser();
+
+  await seedDocuments([
+    // Documents sent to the team email account.
+    {
+      sender: testUser1,
+      recipients: [teamEmail],
+      type: DocumentStatus.COMPLETED,
+    },
+    {
+      sender: testUser1,
+      recipients: [teamEmail],
+      type: DocumentStatus.PENDING,
+    },
+    {
+      sender: testUser1,
+      recipients: [teamEmail],
+      type: DocumentStatus.DRAFT,
+    },
+    // Document sent to the team email account from another team.
+    {
+      sender: team2Member2,
+      recipients: [teamEmail],
+      type: DocumentStatus.PENDING,
+      documentOptions: {
+        teamId: team2.id,
+      },
+    },
+    // Document sent to the team email account from an individual user.
+    {
+      sender: testUser1,
+      recipients: [teamEmail],
+      type: DocumentStatus.PENDING,
+      documentOptions: {
+        teamId: team2.id,
+      },
+    },
+    {
+      sender: testUser1,
+      recipients: [teamEmail],
+      type: DocumentStatus.DRAFT,
+      documentOptions: {
+        teamId: team2.id,
+      },
+    },
+  ]);
+
+  await manualLogin({
+    page,
+    email: teamMember2.email,
+    redirectPath: `/t/${team.url}/documents`,
+  });
+
+  // Check document counts.
+  await checkDocumentTabCount(page, 'Inbox', 3);
+  await checkDocumentTabCount(page, 'Pending', 2);
+  await checkDocumentTabCount(page, 'Completed', 2);
+  await checkDocumentTabCount(page, 'Draft', 2);
+  await checkDocumentTabCount(page, 'All', 9);
+
+  // Apply filter.
+  await page.locator('button').filter({ hasText: 'Sender: All' }).click();
+  await page.getByRole('option', { name: teamMember2.name ?? '' }).click();
+  await page.waitForURL(/senderIds/);
+
+  // Check counts after filtering.
+  await checkDocumentTabCount(page, 'Inbox', 0);
+  await checkDocumentTabCount(page, 'Pending', 2);
+  await checkDocumentTabCount(page, 'Completed', 0);
+  await checkDocumentTabCount(page, 'Draft', 1);
+  await checkDocumentTabCount(page, 'All', 3);
+
+  await unseedTeamEmail({ teamId: team.id });
+  await unseedTeam(team.url);
+});
+
+test('[TEAMS]: delete pending team document', async ({ page }) => {
+  const { team, teamMember2: currentUser } = await seedTeamDocuments();
+
+  await manualLogin({
+    page,
+    email: currentUser.email,
+    redirectPath: `/t/${team.url}/documents?status=PENDING`,
+  });
+
+  await page.getByRole('row').getByRole('button').nth(1).click();
+
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await page.getByPlaceholder("Type 'delete' to confirm").fill('delete');
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  await checkDocumentTabCount(page, 'Pending', 1);
+});
+
+test('[TEAMS]: resend pending team document', async ({ page }) => {
+  const { team, teamMember2: currentUser } = await seedTeamDocuments();
+
+  await manualLogin({
+    page,
+    email: currentUser.email,
+    redirectPath: `/t/${team.url}/documents?status=PENDING`,
+  });
+
+  await page.getByRole('row').getByRole('button').nth(1).click();
+  await page.getByRole('menuitem', { name: 'Resend' }).click();
+
+  await page.getByLabel('test.documenso.com').first().click();
+  await page.getByRole('button', { name: 'Send reminder' }).click();
+
+  await expect(page.getByRole('status')).toContainText('Document re-sent');
+});
diff --git a/packages/app-tests/e2e/teams/team-email.spec.ts b/packages/app-tests/e2e/teams/team-email.spec.ts
new file mode 100644
index 000000000..953be5aaf
--- /dev/null
+++ b/packages/app-tests/e2e/teams/team-email.spec.ts
@@ -0,0 +1,102 @@
+import { expect, test } from '@playwright/test';
+
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { seedTeam, seedTeamEmailVerification, unseedTeam } from '@documenso/prisma/seed/teams';
+import { seedUser, unseedUser } from '@documenso/prisma/seed/users';
+
+import { manualLogin } from '../fixtures/authentication';
+
+test.describe.configure({ mode: 'parallel' });
+
+test('[TEAMS]: send team email request', async ({ page }) => {
+  const team = await seedTeam();
+
+  await manualLogin({
+    page,
+    email: team.owner.email,
+    password: 'password',
+    redirectPath: `/t/${team.url}/settings`,
+  });
+
+  await page.getByRole('button', { name: 'Add email' }).click();
+  await page.getByPlaceholder('eg. Legal').click();
+  await page.getByPlaceholder('eg. Legal').fill('test@test.documenso.com');
+  await page.getByPlaceholder('example@example.com').click();
+  await page.getByPlaceholder('example@example.com').fill('test@test.documenso.com');
+  await page.getByRole('button', { name: 'Add' }).click();
+
+  await expect(
+    page
+      .getByRole('status')
+      .filter({ hasText: 'We have sent a confirmation email for verification.' })
+      .first(),
+  ).toBeVisible();
+
+  await unseedTeam(team.url);
+});
+
+test('[TEAMS]: accept team email request', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const teamEmailVerification = await seedTeamEmailVerification({
+    email: 'team-email-verification@test.documenso.com',
+    teamId: team.id,
+  });
+
+  await page.goto(`${WEBAPP_BASE_URL}/team/verify/email/${teamEmailVerification.token}`);
+  await expect(page.getByRole('heading')).toContainText('Team email verified!');
+
+  await unseedTeam(team.url);
+});
+
+test('[TEAMS]: delete team email', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+    createTeamEmail: true,
+  });
+
+  await manualLogin({
+    page,
+    email: team.owner.email,
+    redirectPath: `/t/${team.url}/settings`,
+  });
+
+  await page.locator('section div').filter({ hasText: 'Team email' }).getByRole('button').click();
+
+  await page.getByRole('menuitem', { name: 'Remove' }).click();
+
+  await expect(page.getByText('Team email has been removed').first()).toBeVisible();
+
+  await unseedTeam(team.url);
+});
+
+test('[TEAMS]: team email owner removes access', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+    createTeamEmail: true,
+  });
+
+  if (!team.teamEmail) {
+    throw new Error('Not possible');
+  }
+
+  const teamEmailOwner = await seedUser({
+    email: team.teamEmail.email,
+  });
+
+  await manualLogin({
+    page,
+    email: teamEmailOwner.email,
+    redirectPath: `/settings/teams`,
+  });
+
+  await page.getByRole('button', { name: 'Revoke access' }).click();
+  await page.getByRole('button', { name: 'Revoke' }).click();
+
+  await expect(page.getByText('You have successfully revoked').first()).toBeVisible();
+
+  await unseedTeam(team.url);
+  await unseedUser(teamEmailOwner.id);
+});
diff --git a/packages/app-tests/e2e/teams/team-members.spec.ts b/packages/app-tests/e2e/teams/team-members.spec.ts
new file mode 100644
index 000000000..05f096c09
--- /dev/null
+++ b/packages/app-tests/e2e/teams/team-members.spec.ts
@@ -0,0 +1,110 @@
+import { expect, test } from '@playwright/test';
+
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { seedTeam, seedTeamInvite, unseedTeam } from '@documenso/prisma/seed/teams';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+import { manualLogin } from '../fixtures/authentication';
+
+test.describe.configure({ mode: 'parallel' });
+
+test('[TEAMS]: update team member role', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  await manualLogin({
+    page,
+    email: team.owner.email,
+    password: 'password',
+    redirectPath: `/t/${team.url}/settings/members`,
+  });
+
+  const teamMemberToUpdate = team.members[1];
+
+  await page
+    .getByRole('row')
+    .filter({ hasText: teamMemberToUpdate.user.email })
+    .getByRole('button')
+    .click();
+
+  await page.getByRole('menuitem', { name: 'Update role' }).click();
+  await page.getByRole('combobox').click();
+  await page.getByLabel('Manager').click();
+  await page.getByRole('button', { name: 'Update' }).click();
+  await expect(
+    page.getByRole('row').filter({ hasText: teamMemberToUpdate.user.email }),
+  ).toContainText('Manager');
+
+  await unseedTeam(team.url);
+});
+
+test('[TEAMS]: accept team invitation without account', async ({ page }) => {
+  const team = await seedTeam();
+
+  const teamInvite = await seedTeamInvite({
+    email: `team-invite-test-${Date.now()}@test.documenso.com`,
+    teamId: team.id,
+  });
+
+  await page.goto(`${WEBAPP_BASE_URL}/team/invite/${teamInvite.token}`);
+  await expect(page.getByRole('heading')).toContainText('Team invitation');
+
+  await unseedTeam(team.url);
+});
+
+test('[TEAMS]: accept team invitation with account', async ({ page }) => {
+  const team = await seedTeam();
+  const user = await seedUser();
+
+  const teamInvite = await seedTeamInvite({
+    email: user.email,
+    teamId: team.id,
+  });
+
+  await page.goto(`${WEBAPP_BASE_URL}/team/invite/${teamInvite.token}`);
+  await expect(page.getByRole('heading')).toContainText('Invitation accepted!');
+
+  await unseedTeam(team.url);
+});
+
+test('[TEAMS]: member can leave team', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const teamMember = team.members[1];
+
+  await manualLogin({
+    page,
+    email: teamMember.user.email,
+    password: 'password',
+    redirectPath: `/settings/teams`,
+  });
+
+  await page.getByRole('button', { name: 'Leave' }).click();
+  await page.getByRole('button', { name: 'Leave' }).click();
+
+  await expect(page.getByRole('status').first()).toContainText(
+    'You have successfully left this team.',
+  );
+
+  await unseedTeam(team.url);
+});
+
+test('[TEAMS]: owner cannot leave team', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  await manualLogin({
+    page,
+    email: team.owner.email,
+    password: 'password',
+    redirectPath: `/settings/teams`,
+  });
+
+  await expect(page.getByRole('button').getByText('Leave')).toBeDisabled();
+
+  await unseedTeam(team.url);
+});
diff --git a/packages/app-tests/e2e/teams/transfer-team.spec.ts b/packages/app-tests/e2e/teams/transfer-team.spec.ts
new file mode 100644
index 000000000..a5d95b720
--- /dev/null
+++ b/packages/app-tests/e2e/teams/transfer-team.spec.ts
@@ -0,0 +1,69 @@
+import { expect, test } from '@playwright/test';
+
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { seedTeam, seedTeamTransfer, unseedTeam } from '@documenso/prisma/seed/teams';
+
+import { manualLogin } from '../fixtures/authentication';
+
+test.describe.configure({ mode: 'parallel' });
+
+test('[TEAMS]: initiate and cancel team transfer', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const teamMember = team.members[1];
+
+  await manualLogin({
+    page,
+    email: team.owner.email,
+    password: 'password',
+    redirectPath: `/t/${team.url}/settings`,
+  });
+
+  await page.getByRole('button', { name: 'Transfer team' }).click();
+
+  await page.getByRole('combobox').click();
+  await page.getByLabel(teamMember.user.name ?? '').click();
+  await page.getByLabel('Confirm by typing transfer').click();
+  await page.getByLabel('Confirm by typing transfer').fill('transfer');
+  await page.getByRole('button', { name: 'Transfer' }).click();
+
+  await expect(page.locator('[id="\\:r2\\:-form-item-message"]')).toContainText(
+    `You must enter 'transfer ${team.name}' to proceed`,
+  );
+
+  await page.getByLabel('Confirm by typing transfer').click();
+  await page.getByLabel('Confirm by typing transfer').fill(`transfer ${team.name}`);
+  await page.getByRole('button', { name: 'Transfer' }).click();
+
+  await expect(page.getByRole('heading', { name: 'Team transfer in progress' })).toBeVisible();
+  await page.getByRole('button', { name: 'Cancel' }).click();
+
+  await expect(page.getByRole('status').first()).toContainText(
+    'The team transfer invitation has been successfully deleted.',
+  );
+
+  await unseedTeam(team.url);
+});
+
+/**
+ * Current skipped until we disable billing during tests.
+ */
+test.skip('[TEAMS]: accept team transfer', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const newOwnerMember = team.members[1];
+
+  const teamTransferRequest = await seedTeamTransfer({
+    teamId: team.id,
+    newOwnerUserId: newOwnerMember.userId,
+  });
+
+  await page.goto(`${WEBAPP_BASE_URL}/team/verify/transfer/${teamTransferRequest.token}`);
+  await expect(page.getByRole('heading')).toContainText('Team ownership transferred!');
+
+  await unseedTeam(team.url);
+});
diff --git a/packages/app-tests/e2e/test-auth-flow.spec.ts b/packages/app-tests/e2e/test-auth-flow.spec.ts
index 45b6dea03..40ee5e768 100644
--- a/packages/app-tests/e2e/test-auth-flow.spec.ts
+++ b/packages/app-tests/e2e/test-auth-flow.spec.ts
@@ -30,7 +30,7 @@ test('user can sign up with email and password', async ({ page }: { page: Page }
     await page.mouse.up();
   }
 
-  await page.getByRole('button', { name: 'Sign Up' }).click();
+  await page.getByRole('button', { name: 'Sign Up', exact: true }).click();
   await page.waitForURL('/documents');
 
   await expect(page).toHaveURL('/documents');
diff --git a/packages/ee/server-only/limits/client.ts b/packages/ee/server-only/limits/client.ts
index 7f48e6856..9a36928b1 100644
--- a/packages/ee/server-only/limits/client.ts
+++ b/packages/ee/server-only/limits/client.ts
@@ -1,17 +1,23 @@
 import { APP_BASE_URL } from '@documenso/lib/constants/app';
 
 import { FREE_PLAN_LIMITS } from './constants';
-import { TLimitsResponseSchema, ZLimitsResponseSchema } from './schema';
+import type { TLimitsResponseSchema } from './schema';
+import { ZLimitsResponseSchema } from './schema';
 
 export type GetLimitsOptions = {
   headers?: Record<string, string>;
+  teamId?: number | null;
 };
 
-export const getLimits = async ({ headers }: GetLimitsOptions = {}) => {
+export const getLimits = async ({ headers, teamId }: GetLimitsOptions = {}) => {
   const requestHeaders = headers ?? {};
 
   const url = new URL(`${APP_BASE_URL}/api/limits`);
 
+  if (teamId) {
+    requestHeaders['team-id'] = teamId.toString();
+  }
+
   return fetch(url, {
     headers: {
       ...requestHeaders,
diff --git a/packages/ee/server-only/limits/constants.ts b/packages/ee/server-only/limits/constants.ts
index 71ff29d9d..4c428f34f 100644
--- a/packages/ee/server-only/limits/constants.ts
+++ b/packages/ee/server-only/limits/constants.ts
@@ -1,10 +1,15 @@
-import { TLimitsSchema } from './schema';
+import type { TLimitsSchema } from './schema';
 
 export const FREE_PLAN_LIMITS: TLimitsSchema = {
   documents: 5,
   recipients: 10,
 };
 
+export const TEAM_PLAN_LIMITS: TLimitsSchema = {
+  documents: Infinity,
+  recipients: Infinity,
+};
+
 export const SELFHOSTED_PLAN_LIMITS: TLimitsSchema = {
   documents: Infinity,
   recipients: Infinity,
diff --git a/packages/ee/server-only/limits/handler.ts b/packages/ee/server-only/limits/handler.ts
index 69f77db75..a497b2314 100644
--- a/packages/ee/server-only/limits/handler.ts
+++ b/packages/ee/server-only/limits/handler.ts
@@ -1,10 +1,10 @@
-import { NextApiRequest, NextApiResponse } from 'next';
+import type { NextApiRequest, NextApiResponse } from 'next';
 
 import { getToken } from 'next-auth/jwt';
 import { match } from 'ts-pattern';
 
 import { ERROR_CODES } from './errors';
-import { TLimitsErrorResponseSchema, TLimitsResponseSchema } from './schema';
+import type { TLimitsErrorResponseSchema, TLimitsResponseSchema } from './schema';
 import { getServerLimits } from './server';
 
 export const limitsHandler = async (
@@ -14,7 +14,19 @@ export const limitsHandler = async (
   try {
     const token = await getToken({ req });
 
-    const limits = await getServerLimits({ email: token?.email });
+    const rawTeamId = req.headers['team-id'];
+
+    let teamId: number | null = null;
+
+    if (typeof rawTeamId === 'string' && !isNaN(parseInt(rawTeamId, 10))) {
+      teamId = parseInt(rawTeamId, 10);
+    }
+
+    if (!teamId && rawTeamId) {
+      throw new Error(ERROR_CODES.INVALID_TEAM_ID);
+    }
+
+    const limits = await getServerLimits({ email: token?.email, teamId });
 
     return res.status(200).json(limits);
   } catch (err) {
diff --git a/packages/ee/server-only/limits/provider/client.tsx b/packages/ee/server-only/limits/provider/client.tsx
index 07a085750..fdc00b439 100644
--- a/packages/ee/server-only/limits/provider/client.tsx
+++ b/packages/ee/server-only/limits/provider/client.tsx
@@ -6,7 +6,7 @@ import { equals } from 'remeda';
 
 import { getLimits } from '../client';
 import { FREE_PLAN_LIMITS } from '../constants';
-import { TLimitsResponseSchema } from '../schema';
+import type { TLimitsResponseSchema } from '../schema';
 
 export type LimitsContextValue = TLimitsResponseSchema;
 
@@ -24,19 +24,22 @@ export const useLimits = () => {
 
 export type LimitsProviderProps = {
   initialValue?: LimitsContextValue;
+  teamId?: number;
   children?: React.ReactNode;
 };
 
-export const LimitsProvider = ({ initialValue, children }: LimitsProviderProps) => {
-  const defaultValue: TLimitsResponseSchema = {
+export const LimitsProvider = ({
+  initialValue = {
     quota: FREE_PLAN_LIMITS,
     remaining: FREE_PLAN_LIMITS,
-  };
-
-  const [limits, setLimits] = useState(() => initialValue ?? defaultValue);
+  },
+  teamId,
+  children,
+}: LimitsProviderProps) => {
+  const [limits, setLimits] = useState(() => initialValue);
 
   const refreshLimits = async () => {
-    const newLimits = await getLimits();
+    const newLimits = await getLimits({ teamId });
 
     setLimits((oldLimits) => {
       if (equals(oldLimits, newLimits)) {
diff --git a/packages/ee/server-only/limits/provider/server.tsx b/packages/ee/server-only/limits/provider/server.tsx
index c9295483a..b7cde3573 100644
--- a/packages/ee/server-only/limits/provider/server.tsx
+++ b/packages/ee/server-only/limits/provider/server.tsx
@@ -3,16 +3,22 @@
 import { headers } from 'next/headers';
 
 import { getLimits } from '../client';
+import type { LimitsContextValue } from './client';
 import { LimitsProvider as ClientLimitsProvider } from './client';
 
 export type LimitsProviderProps = {
   children?: React.ReactNode;
+  teamId?: number;
 };
 
-export const LimitsProvider = async ({ children }: LimitsProviderProps) => {
+export const LimitsProvider = async ({ children, teamId }: LimitsProviderProps) => {
   const requestHeaders = Object.fromEntries(headers().entries());
 
-  const limits = await getLimits({ headers: requestHeaders });
+  const limits: LimitsContextValue = await getLimits({ headers: requestHeaders, teamId });
 
-  return <ClientLimitsProvider initialValue={limits}>{children}</ClientLimitsProvider>;
+  return (
+    <ClientLimitsProvider initialValue={limits} teamId={teamId}>
+      {children}
+    </ClientLimitsProvider>
+  );
 };
diff --git a/packages/ee/server-only/limits/server.ts b/packages/ee/server-only/limits/server.ts
index f256c6356..e48eb7187 100644
--- a/packages/ee/server-only/limits/server.ts
+++ b/packages/ee/server-only/limits/server.ts
@@ -1,22 +1,22 @@
 import { DateTime } from 'luxon';
 
-import { getFlag } from '@documenso/lib/universal/get-feature-flag';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { STRIPE_PLAN_TYPE } from '@documenso/lib/constants/billing';
 import { prisma } from '@documenso/prisma';
 import { SubscriptionStatus } from '@documenso/prisma/client';
 
-import { getPricesByType } from '../stripe/get-prices-by-type';
-import { FREE_PLAN_LIMITS, SELFHOSTED_PLAN_LIMITS } from './constants';
+import { getPricesByPlan } from '../stripe/get-prices-by-plan';
+import { FREE_PLAN_LIMITS, SELFHOSTED_PLAN_LIMITS, TEAM_PLAN_LIMITS } from './constants';
 import { ERROR_CODES } from './errors';
 import { ZLimitsSchema } from './schema';
 
 export type GetServerLimitsOptions = {
   email?: string | null;
+  teamId?: number | null;
 };
 
-export const getServerLimits = async ({ email }: GetServerLimitsOptions) => {
-  const isBillingEnabled = await getFlag('app_billing');
-
-  if (!isBillingEnabled) {
+export const getServerLimits = async ({ email, teamId }: GetServerLimitsOptions) => {
+  if (!IS_BILLING_ENABLED) {
     return {
       quota: SELFHOSTED_PLAN_LIMITS,
       remaining: SELFHOSTED_PLAN_LIMITS,
@@ -27,6 +27,14 @@ export const getServerLimits = async ({ email }: GetServerLimitsOptions) => {
     throw new Error(ERROR_CODES.UNAUTHORIZED);
   }
 
+  return teamId ? handleTeamLimits({ email, teamId }) : handleUserLimits({ email });
+};
+
+type HandleUserLimitsOptions = {
+  email: string;
+};
+
+const handleUserLimits = async ({ email }: HandleUserLimitsOptions) => {
   const user = await prisma.user.findFirst({
     where: {
       email,
@@ -48,10 +56,10 @@ export const getServerLimits = async ({ email }: GetServerLimitsOptions) => {
   );
 
   if (activeSubscriptions.length > 0) {
-    const individualPrices = await getPricesByType('individual');
+    const communityPlanPrices = await getPricesByPlan(STRIPE_PLAN_TYPE.COMMUNITY);
 
     for (const subscription of activeSubscriptions) {
-      const price = individualPrices.find((price) => price.id === subscription.priceId);
+      const price = communityPlanPrices.find((price) => price.id === subscription.priceId);
       if (!price || typeof price.product === 'string' || price.product.deleted) {
         continue;
       }
@@ -71,6 +79,7 @@ export const getServerLimits = async ({ email }: GetServerLimitsOptions) => {
   const documents = await prisma.document.count({
     where: {
       userId: user.id,
+      teamId: null,
       createdAt: {
         gte: DateTime.utc().startOf('month').toJSDate(),
       },
@@ -84,3 +93,50 @@ export const getServerLimits = async ({ email }: GetServerLimitsOptions) => {
     remaining,
   };
 };
+
+type HandleTeamLimitsOptions = {
+  email: string;
+  teamId: number;
+};
+
+const handleTeamLimits = async ({ email, teamId }: HandleTeamLimitsOptions) => {
+  const team = await prisma.team.findFirst({
+    where: {
+      id: teamId,
+      members: {
+        some: {
+          user: {
+            email,
+          },
+        },
+      },
+    },
+    include: {
+      subscription: true,
+    },
+  });
+
+  if (!team) {
+    throw new Error('Team not found');
+  }
+
+  const { subscription } = team;
+
+  if (subscription && subscription.status === SubscriptionStatus.INACTIVE) {
+    return {
+      quota: {
+        documents: 0,
+        recipients: 0,
+      },
+      remaining: {
+        documents: 0,
+        recipients: 0,
+      },
+    };
+  }
+
+  return {
+    quota: structuredClone(TEAM_PLAN_LIMITS),
+    remaining: structuredClone(TEAM_PLAN_LIMITS),
+  };
+};
diff --git a/packages/ee/server-only/stripe/create-team-customer.ts b/packages/ee/server-only/stripe/create-team-customer.ts
new file mode 100644
index 000000000..591c445af
--- /dev/null
+++ b/packages/ee/server-only/stripe/create-team-customer.ts
@@ -0,0 +1,20 @@
+import { STRIPE_CUSTOMER_TYPE } from '@documenso/lib/constants/billing';
+import { stripe } from '@documenso/lib/server-only/stripe';
+
+type CreateTeamCustomerOptions = {
+  name: string;
+  email: string;
+};
+
+/**
+ * Create a Stripe customer for a given team.
+ */
+export const createTeamCustomer = async ({ name, email }: CreateTeamCustomerOptions) => {
+  return await stripe.customers.create({
+    name,
+    email,
+    metadata: {
+      type: STRIPE_CUSTOMER_TYPE.TEAM,
+    },
+  });
+};
diff --git a/packages/ee/server-only/stripe/delete-customer-payment-methods.ts b/packages/ee/server-only/stripe/delete-customer-payment-methods.ts
new file mode 100644
index 000000000..749c15763
--- /dev/null
+++ b/packages/ee/server-only/stripe/delete-customer-payment-methods.ts
@@ -0,0 +1,22 @@
+import { stripe } from '@documenso/lib/server-only/stripe';
+
+type DeleteCustomerPaymentMethodsOptions = {
+  customerId: string;
+};
+
+/**
+ * Delete all attached payment methods for a given customer.
+ */
+export const deleteCustomerPaymentMethods = async ({
+  customerId,
+}: DeleteCustomerPaymentMethodsOptions) => {
+  const paymentMethods = await stripe.paymentMethods.list({
+    customer: customerId,
+  });
+
+  await Promise.all(
+    paymentMethods.data.map(async (paymentMethod) =>
+      stripe.paymentMethods.detach(paymentMethod.id),
+    ),
+  );
+};
diff --git a/packages/ee/server-only/stripe/get-checkout-session.ts b/packages/ee/server-only/stripe/get-checkout-session.ts
index fd15d538a..7c89c1f8c 100644
--- a/packages/ee/server-only/stripe/get-checkout-session.ts
+++ b/packages/ee/server-only/stripe/get-checkout-session.ts
@@ -1,17 +1,21 @@
 'use server';
 
+import type Stripe from 'stripe';
+
 import { stripe } from '@documenso/lib/server-only/stripe';
 
 export type GetCheckoutSessionOptions = {
   customerId: string;
   priceId: string;
   returnUrl: string;
+  subscriptionMetadata?: Stripe.Metadata;
 };
 
 export const getCheckoutSession = async ({
   customerId,
   priceId,
   returnUrl,
+  subscriptionMetadata,
 }: GetCheckoutSessionOptions) => {
   'use server';
 
@@ -26,6 +30,9 @@ export const getCheckoutSession = async ({
     ],
     success_url: `${returnUrl}?success=true`,
     cancel_url: `${returnUrl}?canceled=true`,
+    subscription_data: {
+      metadata: subscriptionMetadata,
+    },
   });
 
   return session.url;
diff --git a/packages/ee/server-only/stripe/get-community-plan-prices.ts b/packages/ee/server-only/stripe/get-community-plan-prices.ts
new file mode 100644
index 000000000..86c7f61bd
--- /dev/null
+++ b/packages/ee/server-only/stripe/get-community-plan-prices.ts
@@ -0,0 +1,13 @@
+import { STRIPE_PLAN_TYPE } from '@documenso/lib/constants/billing';
+
+import { getPricesByPlan } from './get-prices-by-plan';
+
+export const getCommunityPlanPrices = async () => {
+  return await getPricesByPlan(STRIPE_PLAN_TYPE.COMMUNITY);
+};
+
+export const getCommunityPlanPriceIds = async () => {
+  const prices = await getCommunityPlanPrices();
+
+  return prices.map((price) => price.id);
+};
diff --git a/packages/ee/server-only/stripe/get-customer.ts b/packages/ee/server-only/stripe/get-customer.ts
index c85488e6f..6e2d4f088 100644
--- a/packages/ee/server-only/stripe/get-customer.ts
+++ b/packages/ee/server-only/stripe/get-customer.ts
@@ -1,15 +1,19 @@
+import { STRIPE_CUSTOMER_TYPE } from '@documenso/lib/constants/billing';
 import { stripe } from '@documenso/lib/server-only/stripe';
 import { prisma } from '@documenso/prisma';
 import type { User } from '@documenso/prisma/client';
 
 import { onSubscriptionUpdated } from './webhook/on-subscription-updated';
 
+/**
+ * Get a non team Stripe customer by email.
+ */
 export const getStripeCustomerByEmail = async (email: string) => {
   const foundStripeCustomers = await stripe.customers.list({
     email,
   });
 
-  return foundStripeCustomers.data[0] ?? null;
+  return foundStripeCustomers.data.find((customer) => customer.metadata.type !== 'team') ?? null;
 };
 
 export const getStripeCustomerById = async (stripeCustomerId: string) => {
@@ -51,6 +55,7 @@ export const getStripeCustomerByUser = async (user: User) => {
       email: user.email,
       metadata: {
         userId: user.id,
+        type: STRIPE_CUSTOMER_TYPE.INDIVIDUAL,
       },
     });
   }
@@ -78,6 +83,14 @@ export const getStripeCustomerByUser = async (user: User) => {
   };
 };
 
+export const getStripeCustomerIdByUser = async (user: User) => {
+  if (user.customerId !== null) {
+    return user.customerId;
+  }
+
+  return await getStripeCustomerByUser(user).then((session) => session.stripeCustomer.id);
+};
+
 const syncStripeCustomerSubscriptions = async (userId: number, stripeCustomerId: string) => {
   const stripeSubscriptions = await stripe.subscriptions.list({
     customer: stripeCustomerId,
diff --git a/packages/ee/server-only/stripe/get-invoices.ts b/packages/ee/server-only/stripe/get-invoices.ts
new file mode 100644
index 000000000..f8f383921
--- /dev/null
+++ b/packages/ee/server-only/stripe/get-invoices.ts
@@ -0,0 +1,11 @@
+import { stripe } from '@documenso/lib/server-only/stripe';
+
+export type GetInvoicesOptions = {
+  customerId: string;
+};
+
+export const getInvoices = async ({ customerId }: GetInvoicesOptions) => {
+  return await stripe.invoices.list({
+    customer: customerId,
+  });
+};
diff --git a/packages/ee/server-only/stripe/get-portal-session.ts b/packages/ee/server-only/stripe/get-portal-session.ts
index 310cc1e47..275d166d8 100644
--- a/packages/ee/server-only/stripe/get-portal-session.ts
+++ b/packages/ee/server-only/stripe/get-portal-session.ts
@@ -4,7 +4,7 @@ import { stripe } from '@documenso/lib/server-only/stripe';
 
 export type GetPortalSessionOptions = {
   customerId: string;
-  returnUrl: string;
+  returnUrl?: string;
 };
 
 export const getPortalSession = async ({ customerId, returnUrl }: GetPortalSessionOptions) => {
diff --git a/packages/ee/server-only/stripe/get-prices-by-interval.ts b/packages/ee/server-only/stripe/get-prices-by-interval.ts
index a5578a813..1b528706a 100644
--- a/packages/ee/server-only/stripe/get-prices-by-interval.ts
+++ b/packages/ee/server-only/stripe/get-prices-by-interval.ts
@@ -9,12 +9,12 @@ export type PriceIntervals = Record<Stripe.Price.Recurring.Interval, PriceWithPr
 
 export type GetPricesByIntervalOptions = {
   /**
-   * Filter products by their meta 'type' attribute.
+   * Filter products by their meta 'plan' attribute.
    */
-  type?: 'individual';
+  plan?: 'community';
 };
 
-export const getPricesByInterval = async ({ type }: GetPricesByIntervalOptions = {}) => {
+export const getPricesByInterval = async ({ plan }: GetPricesByIntervalOptions = {}) => {
   let { data: prices } = await stripe.prices.search({
     query: `active:'true' type:'recurring'`,
     expand: ['data.product'],
@@ -26,7 +26,7 @@ export const getPricesByInterval = async ({ type }: GetPricesByIntervalOptions =
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     const product = price.product as Stripe.Product;
 
-    const filter = !type || product.metadata?.type === type;
+    const filter = !plan || product.metadata?.plan === plan;
 
     // Filter out prices for products that are not active.
     return product.active && filter;
diff --git a/packages/ee/server-only/stripe/get-prices-by-plan.ts b/packages/ee/server-only/stripe/get-prices-by-plan.ts
new file mode 100644
index 000000000..5c390b35a
--- /dev/null
+++ b/packages/ee/server-only/stripe/get-prices-by-plan.ts
@@ -0,0 +1,14 @@
+import type { STRIPE_PLAN_TYPE } from '@documenso/lib/constants/billing';
+import { stripe } from '@documenso/lib/server-only/stripe';
+
+export const getPricesByPlan = async (
+  plan: (typeof STRIPE_PLAN_TYPE)[keyof typeof STRIPE_PLAN_TYPE],
+) => {
+  const { data: prices } = await stripe.prices.search({
+    query: `metadata['plan']:'${plan}' type:'recurring'`,
+    expand: ['data.product'],
+    limit: 100,
+  });
+
+  return prices;
+};
diff --git a/packages/ee/server-only/stripe/get-prices-by-type.ts b/packages/ee/server-only/stripe/get-prices-by-type.ts
deleted file mode 100644
index 22124562c..000000000
--- a/packages/ee/server-only/stripe/get-prices-by-type.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { stripe } from '@documenso/lib/server-only/stripe';
-
-export const getPricesByType = async (type: 'individual') => {
-  const { data: prices } = await stripe.prices.search({
-    query: `metadata['type']:'${type}' type:'recurring'`,
-    expand: ['data.product'],
-    limit: 100,
-  });
-
-  return prices;
-};
diff --git a/packages/ee/server-only/stripe/get-team-prices.ts b/packages/ee/server-only/stripe/get-team-prices.ts
new file mode 100644
index 000000000..5c3021b78
--- /dev/null
+++ b/packages/ee/server-only/stripe/get-team-prices.ts
@@ -0,0 +1,43 @@
+import type Stripe from 'stripe';
+
+import { STRIPE_PLAN_TYPE } from '@documenso/lib/constants/billing';
+import { AppError } from '@documenso/lib/errors/app-error';
+
+import { getPricesByPlan } from './get-prices-by-plan';
+
+export const getTeamPrices = async () => {
+  const prices = (await getPricesByPlan(STRIPE_PLAN_TYPE.TEAM)).filter((price) => price.active);
+
+  const monthlyPrice = prices.find((price) => price.recurring?.interval === 'month');
+  const yearlyPrice = prices.find((price) => price.recurring?.interval === 'year');
+  const priceIds = prices.map((price) => price.id);
+
+  if (!monthlyPrice || !yearlyPrice) {
+    throw new AppError('INVALID_CONFIG', 'Missing monthly or yearly price');
+  }
+
+  return {
+    monthly: {
+      friendlyInterval: 'Monthly',
+      interval: 'monthly',
+      ...extractPriceData(monthlyPrice),
+    },
+    yearly: {
+      friendlyInterval: 'Yearly',
+      interval: 'yearly',
+      ...extractPriceData(yearlyPrice),
+    },
+    priceIds,
+  } as const;
+};
+
+const extractPriceData = (price: Stripe.Price) => {
+  const product =
+    typeof price.product !== 'string' && !price.product.deleted ? price.product : null;
+
+  return {
+    priceId: price.id,
+    description: product?.description ?? '',
+    features: product?.features ?? [],
+  };
+};
diff --git a/packages/ee/server-only/stripe/transfer-team-subscription.ts b/packages/ee/server-only/stripe/transfer-team-subscription.ts
new file mode 100644
index 000000000..b4e0bd59a
--- /dev/null
+++ b/packages/ee/server-only/stripe/transfer-team-subscription.ts
@@ -0,0 +1,126 @@
+import type Stripe from 'stripe';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { stripe } from '@documenso/lib/server-only/stripe';
+import { subscriptionsContainsActiveCommunityPlan } from '@documenso/lib/utils/billing';
+import { prisma } from '@documenso/prisma';
+import { type Subscription, type Team, type User } from '@documenso/prisma/client';
+
+import { deleteCustomerPaymentMethods } from './delete-customer-payment-methods';
+import { getCommunityPlanPriceIds } from './get-community-plan-prices';
+import { getTeamPrices } from './get-team-prices';
+
+type TransferStripeSubscriptionOptions = {
+  /**
+   * The user to transfer the subscription to.
+   */
+  user: User & { Subscription: Subscription[] };
+
+  /**
+   * The team the subscription is associated with.
+   */
+  team: Team & { subscription?: Subscription | null };
+
+  /**
+   * Whether to clear any current payment methods attached to the team.
+   */
+  clearPaymentMethods: boolean;
+};
+
+/**
+ * Transfer the Stripe Team seats subscription from one user to another.
+ *
+ * Will create a new subscription for the new owner and cancel the old one.
+ *
+ * Returns the subscription that should be associated with the team, null if
+ * no subscription is needed (for community plan).
+ */
+export const transferTeamSubscription = async ({
+  user,
+  team,
+  clearPaymentMethods,
+}: TransferStripeSubscriptionOptions) => {
+  const teamCustomerId = team.customerId;
+
+  if (!teamCustomerId) {
+    throw new AppError(AppErrorCode.NOT_FOUND, 'Missing customer ID.');
+  }
+
+  const [communityPlanIds, teamSeatPrices] = await Promise.all([
+    getCommunityPlanPriceIds(),
+    getTeamPrices(),
+  ]);
+
+  const teamSubscriptionRequired = !subscriptionsContainsActiveCommunityPlan(
+    user.Subscription,
+    communityPlanIds,
+  );
+
+  let teamSubscription: Stripe.Subscription | null = null;
+
+  if (team.subscription) {
+    teamSubscription = await stripe.subscriptions.retrieve(team.subscription.planId);
+
+    if (!teamSubscription) {
+      throw new Error('Could not find the current subscription.');
+    }
+
+    if (clearPaymentMethods) {
+      await deleteCustomerPaymentMethods({ customerId: teamCustomerId });
+    }
+  }
+
+  await stripe.customers.update(teamCustomerId, {
+    name: user.name ?? team.name,
+    email: user.email,
+  });
+
+  // If team subscription is required and the team does not have a subscription, create one.
+  if (teamSubscriptionRequired && !teamSubscription) {
+    const numberOfSeats = await prisma.teamMember.count({
+      where: {
+        teamId: team.id,
+      },
+    });
+
+    const teamSeatPriceId = teamSeatPrices.monthly.priceId;
+
+    teamSubscription = await stripe.subscriptions.create({
+      customer: teamCustomerId,
+      items: [
+        {
+          price: teamSeatPriceId,
+          quantity: numberOfSeats,
+        },
+      ],
+      metadata: {
+        teamId: team.id.toString(),
+      },
+    });
+  }
+
+  // If no team subscription is required, cancel the current team subscription if it exists.
+  if (!teamSubscriptionRequired && teamSubscription) {
+    try {
+      // Set the quantity to 0 so we can refund/charge the old Stripe customer the prorated amount.
+      await stripe.subscriptions.update(teamSubscription.id, {
+        items: teamSubscription.items.data.map((item) => ({
+          id: item.id,
+          quantity: 0,
+        })),
+      });
+
+      await stripe.subscriptions.cancel(teamSubscription.id, {
+        invoice_now: true,
+        prorate: false,
+      });
+    } catch (e) {
+      // Do not error out since we can't easily undo the transfer.
+      // Todo: Teams - Alert us.
+    }
+
+    return null;
+  }
+
+  return teamSubscription;
+};
diff --git a/packages/ee/server-only/stripe/update-customer.ts b/packages/ee/server-only/stripe/update-customer.ts
new file mode 100644
index 000000000..78e223b48
--- /dev/null
+++ b/packages/ee/server-only/stripe/update-customer.ts
@@ -0,0 +1,18 @@
+import { stripe } from '@documenso/lib/server-only/stripe';
+
+type UpdateCustomerOptions = {
+  customerId: string;
+  name?: string;
+  email?: string;
+};
+
+export const updateCustomer = async ({ customerId, name, email }: UpdateCustomerOptions) => {
+  if (!name && !email) {
+    return;
+  }
+
+  return await stripe.customers.update(customerId, {
+    name,
+    email,
+  });
+};
diff --git a/packages/ee/server-only/stripe/update-subscription-item-quantity.ts b/packages/ee/server-only/stripe/update-subscription-item-quantity.ts
new file mode 100644
index 000000000..e0fa95f3d
--- /dev/null
+++ b/packages/ee/server-only/stripe/update-subscription-item-quantity.ts
@@ -0,0 +1,44 @@
+import type Stripe from 'stripe';
+
+import { stripe } from '@documenso/lib/server-only/stripe';
+
+export type UpdateSubscriptionItemQuantityOptions = {
+  subscriptionId: string;
+  quantity: number;
+  priceId: string;
+};
+
+export const updateSubscriptionItemQuantity = async ({
+  subscriptionId,
+  quantity,
+  priceId,
+}: UpdateSubscriptionItemQuantityOptions) => {
+  const subscription = await stripe.subscriptions.retrieve(subscriptionId);
+
+  const items = subscription.items.data.filter((item) => item.price.id === priceId);
+
+  if (items.length !== 1) {
+    throw new Error('Subscription does not contain required item');
+  }
+
+  const hasYearlyItem = items.find((item) => item.price.recurring?.interval === 'year');
+  const oldQuantity = items[0].quantity;
+
+  if (oldQuantity === quantity) {
+    return;
+  }
+
+  const subscriptionUpdatePayload: Stripe.SubscriptionUpdateParams = {
+    items: items.map((item) => ({
+      id: item.id,
+      quantity,
+    })),
+  };
+
+  // Only invoice immediately when changing the quantity of yearly item.
+  if (hasYearlyItem) {
+    subscriptionUpdatePayload.proration_behavior = 'always_invoice';
+  }
+
+  await stripe.subscriptions.update(subscriptionId, subscriptionUpdatePayload);
+};
diff --git a/packages/ee/server-only/stripe/webhook/handler.ts b/packages/ee/server-only/stripe/webhook/handler.ts
index 047de7962..23705438a 100644
--- a/packages/ee/server-only/stripe/webhook/handler.ts
+++ b/packages/ee/server-only/stripe/webhook/handler.ts
@@ -3,8 +3,10 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 import { buffer } from 'micro';
 import { match } from 'ts-pattern';
 
+import { STRIPE_PLAN_TYPE } from '@documenso/lib/constants/billing';
 import type { Stripe } from '@documenso/lib/server-only/stripe';
 import { stripe } from '@documenso/lib/server-only/stripe';
+import { createTeamFromPendingTeam } from '@documenso/lib/server-only/team/create-team';
 import { getFlag } from '@documenso/lib/universal/get-feature-flag';
 import { prisma } from '@documenso/prisma';
 
@@ -84,14 +86,9 @@ export const stripeWebhookHandler = async (
             },
           });
 
-          if (!result?.id) {
-            return res.status(500).json({
-              success: false,
-              message: 'User not found',
-            });
+          if (result?.id) {
+            userId = result.id;
           }
-
-          userId = result.id;
         }
 
         const subscriptionId =
@@ -99,7 +96,7 @@ export const stripeWebhookHandler = async (
             ? session.subscription
             : session.subscription?.id;
 
-        if (!subscriptionId || Number.isNaN(userId)) {
+        if (!subscriptionId) {
           return res.status(500).json({
             success: false,
             message: 'Invalid session',
@@ -108,6 +105,24 @@ export const stripeWebhookHandler = async (
 
         const subscription = await stripe.subscriptions.retrieve(subscriptionId);
 
+        // Handle team creation after seat checkout.
+        if (subscription.items.data[0].price.metadata.plan === STRIPE_PLAN_TYPE.TEAM) {
+          await handleTeamSeatCheckout({ subscription });
+
+          return res.status(200).json({
+            success: true,
+            message: 'Webhook received',
+          });
+        }
+
+        // Validate user ID.
+        if (!userId || Number.isNaN(userId)) {
+          return res.status(500).json({
+            success: false,
+            message: 'Invalid session or missing user ID',
+          });
+        }
+
         await onSubscriptionUpdated({ userId, subscription });
 
         return res.status(200).json({
@@ -124,6 +139,28 @@ export const stripeWebhookHandler = async (
             ? subscription.customer
             : subscription.customer.id;
 
+        if (subscription.items.data[0].price.metadata.plan === STRIPE_PLAN_TYPE.TEAM) {
+          const team = await prisma.team.findFirst({
+            where: {
+              customerId,
+            },
+          });
+
+          if (!team) {
+            return res.status(500).json({
+              success: false,
+              message: 'No team associated with subscription found',
+            });
+          }
+
+          await onSubscriptionUpdated({ teamId: team.id, subscription });
+
+          return res.status(200).json({
+            success: true,
+            message: 'Webhook received',
+          });
+        }
+
         const result = await prisma.user.findFirst({
           select: {
             id: true,
@@ -182,6 +219,28 @@ export const stripeWebhookHandler = async (
           });
         }
 
+        if (subscription.items.data[0].price.metadata.plan === STRIPE_PLAN_TYPE.TEAM) {
+          const team = await prisma.team.findFirst({
+            where: {
+              customerId,
+            },
+          });
+
+          if (!team) {
+            return res.status(500).json({
+              success: false,
+              message: 'No team associated with subscription found',
+            });
+          }
+
+          await onSubscriptionUpdated({ teamId: team.id, subscription });
+
+          return res.status(200).json({
+            success: true,
+            message: 'Webhook received',
+          });
+        }
+
         const result = await prisma.user.findFirst({
           select: {
             id: true,
@@ -233,6 +292,28 @@ export const stripeWebhookHandler = async (
           });
         }
 
+        if (subscription.items.data[0].price.metadata.plan === STRIPE_PLAN_TYPE.TEAM) {
+          const team = await prisma.team.findFirst({
+            where: {
+              customerId,
+            },
+          });
+
+          if (!team) {
+            return res.status(500).json({
+              success: false,
+              message: 'No team associated with subscription found',
+            });
+          }
+
+          await onSubscriptionUpdated({ teamId: team.id, subscription });
+
+          return res.status(200).json({
+            success: true,
+            message: 'Webhook received',
+          });
+        }
+
         const result = await prisma.user.findFirst({
           select: {
             id: true,
@@ -282,3 +363,21 @@ export const stripeWebhookHandler = async (
     });
   }
 };
+
+export type HandleTeamSeatCheckoutOptions = {
+  subscription: Stripe.Subscription;
+};
+
+const handleTeamSeatCheckout = async ({ subscription }: HandleTeamSeatCheckoutOptions) => {
+  if (subscription.metadata?.pendingTeamId === undefined) {
+    throw new Error('Missing pending team ID');
+  }
+
+  const pendingTeamId = Number(subscription.metadata.pendingTeamId);
+
+  if (Number.isNaN(pendingTeamId)) {
+    throw new Error('Invalid pending team ID');
+  }
+
+  return await createTeamFromPendingTeam({ pendingTeamId, subscription }).then((team) => team.id);
+};
diff --git a/packages/ee/server-only/stripe/webhook/on-subscription-updated.ts b/packages/ee/server-only/stripe/webhook/on-subscription-updated.ts
index d7ce7b062..8e2f00df8 100644
--- a/packages/ee/server-only/stripe/webhook/on-subscription-updated.ts
+++ b/packages/ee/server-only/stripe/webhook/on-subscription-updated.ts
@@ -2,23 +2,40 @@ import { match } from 'ts-pattern';
 
 import type { Stripe } from '@documenso/lib/server-only/stripe';
 import { prisma } from '@documenso/prisma';
+import type { Prisma } from '@documenso/prisma/client';
 import { SubscriptionStatus } from '@documenso/prisma/client';
 
 export type OnSubscriptionUpdatedOptions = {
-  userId: number;
+  userId?: number;
+  teamId?: number;
   subscription: Stripe.Subscription;
 };
 
 export const onSubscriptionUpdated = async ({
   userId,
+  teamId,
   subscription,
 }: OnSubscriptionUpdatedOptions) => {
+  await prisma.subscription.upsert(
+    mapStripeSubscriptionToPrismaUpsertAction(subscription, userId, teamId),
+  );
+};
+
+export const mapStripeSubscriptionToPrismaUpsertAction = (
+  subscription: Stripe.Subscription,
+  userId?: number,
+  teamId?: number,
+): Prisma.SubscriptionUpsertArgs => {
+  if ((!userId && !teamId) || (userId && teamId)) {
+    throw new Error('Either userId or teamId must be provided.');
+  }
+
   const status = match(subscription.status)
     .with('active', () => SubscriptionStatus.ACTIVE)
     .with('past_due', () => SubscriptionStatus.PAST_DUE)
     .otherwise(() => SubscriptionStatus.INACTIVE);
 
-  await prisma.subscription.upsert({
+  return {
     where: {
       planId: subscription.id,
     },
@@ -27,7 +44,8 @@ export const onSubscriptionUpdated = async ({
       planId: subscription.id,
       priceId: subscription.items.data[0].price.id,
       periodEnd: new Date(subscription.current_period_end * 1000),
-      userId,
+      userId: userId ?? null,
+      teamId: teamId ?? null,
       cancelAtPeriodEnd: subscription.cancel_at_period_end,
     },
     update: {
@@ -37,5 +55,5 @@ export const onSubscriptionUpdated = async ({
       periodEnd: new Date(subscription.current_period_end * 1000),
       cancelAtPeriodEnd: subscription.cancel_at_period_end,
     },
-  });
+  };
 };
diff --git a/packages/email/static/add-user.png b/packages/email/static/add-user.png
new file mode 100644
index 0000000000000000000000000000000000000000..abd337ceb70d306c70f31d07f1c74e2ca34399be
GIT binary patch
literal 3361
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

literal 0
HcmV?d00001

diff --git a/packages/email/static/mail-open-alert.png b/packages/email/static/mail-open-alert.png
new file mode 100644
index 0000000000000000000000000000000000000000..1511f0bc539302bf3fc9de7e18283d8882861ffb
GIT binary patch
literal 3818
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

literal 0
HcmV?d00001

diff --git a/packages/email/static/mail-open.png b/packages/email/static/mail-open.png
new file mode 100644
index 0000000000000000000000000000000000000000..306313b03f900dde2c71456df73ad92b898f04db
GIT binary patch
literal 3839
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
BjST<*

literal 0
HcmV?d00001

diff --git a/packages/email/template-components/template-image.tsx b/packages/email/template-components/template-image.tsx
new file mode 100644
index 000000000..8f821c10f
--- /dev/null
+++ b/packages/email/template-components/template-image.tsx
@@ -0,0 +1,17 @@
+import { Img } from '../components';
+
+export interface TemplateImageProps {
+  assetBaseUrl: string;
+  className?: string;
+  staticAsset: string;
+}
+
+export const TemplateImage = ({ assetBaseUrl, className, staticAsset }: TemplateImageProps) => {
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return <Img className={className} src={getAssetUrl(`/static/${staticAsset}`)} />;
+};
+
+export default TemplateImage;
diff --git a/packages/email/templates/confirm-email.tsx b/packages/email/templates/confirm-email.tsx
index b3acd1ecd..59c7add10 100644
--- a/packages/email/templates/confirm-email.tsx
+++ b/packages/email/templates/confirm-email.tsx
@@ -7,7 +7,7 @@ import { TemplateFooter } from '../template-components/template-footer';
 
 export const ConfirmEmailTemplate = ({
   confirmationLink,
-  assetBaseUrl,
+  assetBaseUrl = 'http://localhost:3002',
 }: TemplateConfirmationEmailProps) => {
   const previewText = `Please confirm your email address`;
 
@@ -55,3 +55,5 @@ export const ConfirmEmailTemplate = ({
     </Html>
   );
 };
+
+export default ConfirmEmailTemplate;
diff --git a/packages/email/templates/confirm-team-email.tsx b/packages/email/templates/confirm-team-email.tsx
new file mode 100644
index 000000000..5752f806d
--- /dev/null
+++ b/packages/email/templates/confirm-team-email.tsx
@@ -0,0 +1,127 @@
+import { formatTeamUrl } from '@documenso/lib/utils/teams';
+import config from '@documenso/tailwind-config';
+
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Hr,
+  Html,
+  Link,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '../components';
+import { TemplateFooter } from '../template-components/template-footer';
+import TemplateImage from '../template-components/template-image';
+
+export type ConfirmTeamEmailProps = {
+  assetBaseUrl: string;
+  baseUrl: string;
+  teamName: string;
+  teamUrl: string;
+  token: string;
+};
+
+export const ConfirmTeamEmailTemplate = ({
+  assetBaseUrl = 'http://localhost:3002',
+  baseUrl = 'https://documenso.com',
+  teamName = 'Team Name',
+  teamUrl = 'demo',
+  token = '',
+}: ConfirmTeamEmailProps) => {
+  const previewText = `Accept team email request for ${teamName} on Documenso`;
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: config.theme.extend.colors,
+            },
+          },
+        }}
+      >
+        <Body className="mx-auto my-auto font-sans">
+          <Section className="bg-white">
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 px-2 pt-2 backdrop-blur-sm">
+              <TemplateImage
+                assetBaseUrl={assetBaseUrl}
+                className="mb-4 h-6 p-2"
+                staticAsset="logo.png"
+              />
+
+              <Section>
+                <TemplateImage
+                  className="mx-auto"
+                  assetBaseUrl={assetBaseUrl}
+                  staticAsset="mail-open.png"
+                />
+              </Section>
+
+              <Section className="p-2 text-slate-500">
+                <Text className="text-center text-lg font-medium text-black">
+                  Verify your team email address
+                </Text>
+
+                <Text className="text-center text-base">
+                  <span className="font-bold">{teamName}</span> has requested to use your email
+                  address for their team on Documenso.
+                </Text>
+
+                <div className="mx-auto mt-6 w-fit rounded-lg bg-gray-50 px-4 py-2 text-base font-medium text-slate-600">
+                  {formatTeamUrl(teamUrl, baseUrl)}
+                </div>
+
+                <Section className="mt-6">
+                  <Text className="my-0 text-sm">
+                    By accepting this request, you will be granting <strong>{teamName}</strong>{' '}
+                    access to:
+                  </Text>
+
+                  <ul className="mb-0 mt-2">
+                    <li className="text-sm">
+                      View all documents sent to and from this email address
+                    </li>
+                    <li className="mt-1 text-sm">
+                      Allow document recipients to reply directly to this email address
+                    </li>
+                  </ul>
+
+                  <Text className="mt-2 text-sm">
+                    You can revoke access at any time in your team settings on Documenso{' '}
+                    <Link href={`${baseUrl}/settings/teams`}>here.</Link>
+                  </Text>
+                </Section>
+
+                <Section className="mb-6 mt-8 text-center">
+                  <Button
+                    className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
+                    href={`${baseUrl}/team/verify/email/${token}`}
+                  >
+                    Accept
+                  </Button>
+                </Section>
+              </Section>
+
+              <Text className="text-center text-xs text-slate-500">Link expires in 1 hour.</Text>
+            </Container>
+
+            <Hr className="mx-auto mt-12 max-w-xl" />
+
+            <Container className="mx-auto max-w-xl">
+              <TemplateFooter isDocument={false} />
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default ConfirmTeamEmailTemplate;
diff --git a/packages/email/templates/team-email-removed.tsx b/packages/email/templates/team-email-removed.tsx
new file mode 100644
index 000000000..0a143d1b9
--- /dev/null
+++ b/packages/email/templates/team-email-removed.tsx
@@ -0,0 +1,83 @@
+import { formatTeamUrl } from '@documenso/lib/utils/teams';
+import config from '@documenso/tailwind-config';
+
+import { Body, Container, Head, Hr, Html, Preview, Section, Tailwind, Text } from '../components';
+import { TemplateFooter } from '../template-components/template-footer';
+import TemplateImage from '../template-components/template-image';
+
+export type TeamEmailRemovedTemplateProps = {
+  assetBaseUrl: string;
+  baseUrl: string;
+  teamEmail: string;
+  teamName: string;
+  teamUrl: string;
+};
+
+export const TeamEmailRemovedTemplate = ({
+  assetBaseUrl = 'http://localhost:3002',
+  baseUrl = 'https://documenso.com',
+  teamEmail = 'example@documenso.com',
+  teamName = 'Team Name',
+  teamUrl = 'demo',
+}: TeamEmailRemovedTemplateProps) => {
+  const previewText = `Team email removed for ${teamName} on Documenso`;
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: config.theme.extend.colors,
+            },
+          },
+        }}
+      >
+        <Body className="mx-auto my-auto font-sans">
+          <Section className="bg-white text-slate-500">
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 px-2 pt-2 backdrop-blur-sm">
+              <TemplateImage
+                assetBaseUrl={assetBaseUrl}
+                className="mb-4 h-6 p-2"
+                staticAsset="logo.png"
+              />
+
+              <Section>
+                <TemplateImage
+                  className="mx-auto"
+                  assetBaseUrl={assetBaseUrl}
+                  staticAsset="mail-open-alert.png"
+                />
+              </Section>
+
+              <Section className="p-2 text-slate-500">
+                <Text className="text-center text-lg font-medium text-black">
+                  Team email removed
+                </Text>
+
+                <Text className="my-1 text-center text-base">
+                  The team email <span className="font-bold">{teamEmail}</span> has been removed
+                  from the following team
+                </Text>
+
+                <div className="mx-auto mb-6 mt-2 w-fit rounded-lg bg-gray-50 px-4 py-2 text-base font-medium text-slate-600">
+                  {formatTeamUrl(teamUrl, baseUrl)}
+                </div>
+              </Section>
+            </Container>
+
+            <Hr className="mx-auto mt-12 max-w-xl" />
+
+            <Container className="mx-auto max-w-xl">
+              <TemplateFooter isDocument={false} />
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default TeamEmailRemovedTemplate;
diff --git a/packages/email/templates/team-invite.tsx b/packages/email/templates/team-invite.tsx
new file mode 100644
index 000000000..4602b7382
--- /dev/null
+++ b/packages/email/templates/team-invite.tsx
@@ -0,0 +1,108 @@
+import { formatTeamUrl } from '@documenso/lib/utils/teams';
+import config from '@documenso/tailwind-config';
+
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Hr,
+  Html,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '../components';
+import { TemplateFooter } from '../template-components/template-footer';
+import TemplateImage from '../template-components/template-image';
+
+export type TeamInviteEmailProps = {
+  assetBaseUrl: string;
+  baseUrl: string;
+  senderName: string;
+  teamName: string;
+  teamUrl: string;
+  token: string;
+};
+
+export const TeamInviteEmailTemplate = ({
+  assetBaseUrl = 'http://localhost:3002',
+  baseUrl = 'https://documenso.com',
+  senderName = 'John Doe',
+  teamName = 'Team Name',
+  teamUrl = 'demo',
+  token = '',
+}: TeamInviteEmailProps) => {
+  const previewText = `Accept invitation to join a team on Documenso`;
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: config.theme.extend.colors,
+            },
+          },
+        }}
+      >
+        <Body className="mx-auto my-auto font-sans">
+          <Section className="bg-white text-slate-500">
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
+              <TemplateImage
+                assetBaseUrl={assetBaseUrl}
+                className="mb-4 h-6 p-2"
+                staticAsset="logo.png"
+              />
+
+              <Section>
+                <TemplateImage
+                  className="mx-auto"
+                  assetBaseUrl={assetBaseUrl}
+                  staticAsset="add-user.png"
+                />
+              </Section>
+
+              <Section className="p-2 text-slate-500">
+                <Text className="text-center text-lg font-medium text-black">
+                  Join {teamName} on Documenso
+                </Text>
+
+                <Text className="my-1 text-center text-base">
+                  You have been invited to join the following team
+                </Text>
+
+                <div className="mx-auto my-2 w-fit rounded-lg bg-gray-50 px-4 py-2 text-base font-medium text-slate-600">
+                  {formatTeamUrl(teamUrl, baseUrl)}
+                </div>
+
+                <Text className="my-1 text-center text-base">
+                  by <span className="text-slate-900">{senderName}</span>
+                </Text>
+
+                <Section className="mb-6 mt-6 text-center">
+                  <Button
+                    className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
+                    href={`${baseUrl}/team/invite/${token}`}
+                  >
+                    Accept
+                  </Button>
+                </Section>
+              </Section>
+            </Container>
+
+            <Hr className="mx-auto mt-12 max-w-xl" />
+
+            <Container className="mx-auto max-w-xl">
+              <TemplateFooter isDocument={false} />
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default TeamInviteEmailTemplate;
diff --git a/packages/email/templates/team-transfer-request.tsx b/packages/email/templates/team-transfer-request.tsx
new file mode 100644
index 000000000..82723226c
--- /dev/null
+++ b/packages/email/templates/team-transfer-request.tsx
@@ -0,0 +1,112 @@
+import { formatTeamUrl } from '@documenso/lib/utils/teams';
+import config from '@documenso/tailwind-config';
+
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Hr,
+  Html,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '../components';
+import { TemplateFooter } from '../template-components/template-footer';
+import TemplateImage from '../template-components/template-image';
+
+export type TeamTransferRequestTemplateProps = {
+  assetBaseUrl: string;
+  baseUrl: string;
+  senderName: string;
+  teamName: string;
+  teamUrl: string;
+  token: string;
+};
+
+export const TeamTransferRequestTemplate = ({
+  assetBaseUrl = 'http://localhost:3002',
+  baseUrl = 'https://documenso.com',
+  senderName = 'John Doe',
+  teamName = 'Team Name',
+  teamUrl = 'demo',
+  token = '',
+}: TeamTransferRequestTemplateProps) => {
+  const previewText = 'Accept team transfer request on Documenso';
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: config.theme.extend.colors,
+            },
+          },
+        }}
+      >
+        <Body className="mx-auto my-auto font-sans">
+          <Section className="bg-white text-slate-500">
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 px-2 pt-2 backdrop-blur-sm">
+              <TemplateImage
+                assetBaseUrl={assetBaseUrl}
+                className="mb-4 h-6 p-2"
+                staticAsset="logo.png"
+              />
+
+              <Section>
+                <TemplateImage
+                  className="mx-auto"
+                  assetBaseUrl={assetBaseUrl}
+                  staticAsset="add-user.png"
+                />
+              </Section>
+
+              <Section className="p-2 text-slate-500">
+                <Text className="text-center text-lg font-medium text-black">
+                  {teamName} ownership transfer request
+                </Text>
+
+                <Text className="my-1 text-center text-base">
+                  <span className="font-bold">{senderName}</span> has requested that you take
+                  ownership of the following team
+                </Text>
+
+                <div className="mx-auto my-2 w-fit rounded-lg bg-gray-50 px-4 py-2 text-base font-medium text-slate-600">
+                  {formatTeamUrl(teamUrl, baseUrl)}
+                </div>
+
+                <Text className="text-center text-sm">
+                  By accepting this request, you will take responsibility for any billing items
+                  associated with this team.
+                </Text>
+
+                <Section className="mb-6 mt-6 text-center">
+                  <Button
+                    className="bg-documenso-500 ml-2 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
+                    href={`${baseUrl}/team/verify/transfer/${token}`}
+                  >
+                    Accept
+                  </Button>
+                </Section>
+              </Section>
+
+              <Text className="text-center text-xs">Link expires in 1 hour.</Text>
+            </Container>
+
+            <Hr className="mx-auto mt-12 max-w-xl" />
+
+            <Container className="mx-auto max-w-xl">
+              <TemplateFooter isDocument={false} />
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default TeamTransferRequestTemplate;
diff --git a/packages/lib/constants/app.ts b/packages/lib/constants/app.ts
index a19d2bb0d..6c4d056d0 100644
--- a/packages/lib/constants/app.ts
+++ b/packages/lib/constants/app.ts
@@ -1,5 +1,9 @@
 export const IS_APP_MARKETING = process.env.NEXT_PUBLIC_PROJECT === 'marketing';
 export const IS_APP_WEB = process.env.NEXT_PUBLIC_PROJECT === 'web';
+export const IS_BILLING_ENABLED = process.env.NEXT_PUBLIC_FEATURE_BILLING_ENABLED === 'true';
+
+export const APP_DOCUMENT_UPLOAD_SIZE_LIMIT =
+  Number(process.env.NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT) || 50;
 
 export const APP_FOLDER = IS_APP_MARKETING ? 'marketing' : 'web';
 
@@ -7,5 +11,6 @@ export const APP_BASE_URL = IS_APP_WEB
   ? process.env.NEXT_PUBLIC_WEBAPP_URL
   : process.env.NEXT_PUBLIC_MARKETING_URL;
 
-export const APP_DOCUMENT_UPLOAD_SIZE_LIMIT =
-  Number(process.env.NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT) || 50;
+export const WEBAPP_BASE_URL = process.env.NEXT_PUBLIC_WEBAPP_URL ?? 'http://localhost:3000';
+
+export const MARKETING_BASE_URL = process.env.NEXT_PUBLIC_MARKETING_URL ?? 'http://localhost:3001';
diff --git a/packages/lib/constants/billing.ts b/packages/lib/constants/billing.ts
new file mode 100644
index 000000000..e6d897af8
--- /dev/null
+++ b/packages/lib/constants/billing.ts
@@ -0,0 +1,11 @@
+export enum STRIPE_CUSTOMER_TYPE {
+  INDIVIDUAL = 'individual',
+  TEAM = 'team',
+}
+
+export enum STRIPE_PLAN_TYPE {
+  TEAM = 'team',
+  COMMUNITY = 'community',
+}
+
+export const TEAM_BILLING_DOMAIN = 'billing.team.documenso.com';
diff --git a/packages/lib/constants/teams.ts b/packages/lib/constants/teams.ts
new file mode 100644
index 000000000..47705bb14
--- /dev/null
+++ b/packages/lib/constants/teams.ts
@@ -0,0 +1,102 @@
+import { TeamMemberRole } from '@documenso/prisma/client';
+
+export const TEAM_URL_ROOT_REGEX = new RegExp('^/t/[^/]+$');
+
+export const TEAM_MEMBER_ROLE_MAP: Record<keyof typeof TeamMemberRole, string> = {
+  ADMIN: 'Admin',
+  MANAGER: 'Manager',
+  MEMBER: 'Member',
+};
+
+export const TEAM_MEMBER_ROLE_PERMISSIONS_MAP = {
+  /**
+   * Includes permissions to:
+   * - Manage team members
+   * - Manage team settings, changing name, url, etc.
+   */
+  MANAGE_TEAM: [TeamMemberRole.ADMIN, TeamMemberRole.MANAGER],
+  MANAGE_BILLING: [TeamMemberRole.ADMIN],
+  DELETE_TEAM_TRANSFER_REQUEST: [TeamMemberRole.ADMIN],
+} satisfies Record<string, TeamMemberRole[]>;
+
+/**
+ * A hierarchy of team member roles to determine which role has higher permission than another.
+ */
+export const TEAM_MEMBER_ROLE_HIERARCHY = {
+  [TeamMemberRole.ADMIN]: [TeamMemberRole.ADMIN, TeamMemberRole.MANAGER, TeamMemberRole.MEMBER],
+  [TeamMemberRole.MANAGER]: [TeamMemberRole.MANAGER, TeamMemberRole.MEMBER],
+  [TeamMemberRole.MEMBER]: [TeamMemberRole.MEMBER],
+} satisfies Record<TeamMemberRole, TeamMemberRole[]>;
+
+export const PROTECTED_TEAM_URLS = [
+  '403',
+  '404',
+  '500',
+  '502',
+  '503',
+  '504',
+  'about',
+  'account',
+  'admin',
+  'administrator',
+  'api',
+  'app',
+  'archive',
+  'auth',
+  'backup',
+  'config',
+  'configure',
+  'contact',
+  'contact-us',
+  'copyright',
+  'crime',
+  'criminal',
+  'dashboard',
+  'docs',
+  'documenso',
+  'documentation',
+  'document',
+  'documents',
+  'error',
+  'exploit',
+  'exploitation',
+  'exploiter',
+  'feedback',
+  'finance',
+  'forgot-password',
+  'fraud',
+  'fraudulent',
+  'hack',
+  'hacker',
+  'harassment',
+  'help',
+  'helpdesk',
+  'illegal',
+  'internal',
+  'legal',
+  'login',
+  'logout',
+  'maintenance',
+  'malware',
+  'newsletter',
+  'policy',
+  'privacy',
+  'profile',
+  'public',
+  'reset-password',
+  'scam',
+  'scammer',
+  'settings',
+  'setup',
+  'sign',
+  'signin',
+  'signout',
+  'signup',
+  'spam',
+  'support',
+  'system',
+  'team',
+  'terms',
+  'virus',
+  'webhook',
+];
diff --git a/packages/lib/errors/app-error.ts b/packages/lib/errors/app-error.ts
new file mode 100644
index 000000000..3337bab4c
--- /dev/null
+++ b/packages/lib/errors/app-error.ts
@@ -0,0 +1,144 @@
+import { TRPCError } from '@trpc/server';
+import { z } from 'zod';
+
+import { TRPCClientError } from '@documenso/trpc/client';
+
+/**
+ * Generic application error codes.
+ */
+export enum AppErrorCode {
+  'ALREADY_EXISTS' = 'AlreadyExists',
+  'EXPIRED_CODE' = 'ExpiredCode',
+  'INVALID_BODY' = 'InvalidBody',
+  'INVALID_REQUEST' = 'InvalidRequest',
+  'NOT_FOUND' = 'NotFound',
+  'NOT_SETUP' = 'NotSetup',
+  'UNAUTHORIZED' = 'Unauthorized',
+  'UNKNOWN_ERROR' = 'UnknownError',
+  'RETRY_EXCEPTION' = 'RetryException',
+  'SCHEMA_FAILED' = 'SchemaFailed',
+  'TOO_MANY_REQUESTS' = 'TooManyRequests',
+}
+
+const genericErrorCodeToTrpcErrorCodeMap: Record<string, TRPCError['code']> = {
+  [AppErrorCode.ALREADY_EXISTS]: 'BAD_REQUEST',
+  [AppErrorCode.EXPIRED_CODE]: 'BAD_REQUEST',
+  [AppErrorCode.INVALID_BODY]: 'BAD_REQUEST',
+  [AppErrorCode.INVALID_REQUEST]: 'BAD_REQUEST',
+  [AppErrorCode.NOT_FOUND]: 'NOT_FOUND',
+  [AppErrorCode.NOT_SETUP]: 'BAD_REQUEST',
+  [AppErrorCode.UNAUTHORIZED]: 'UNAUTHORIZED',
+  [AppErrorCode.UNKNOWN_ERROR]: 'INTERNAL_SERVER_ERROR',
+  [AppErrorCode.RETRY_EXCEPTION]: 'INTERNAL_SERVER_ERROR',
+  [AppErrorCode.SCHEMA_FAILED]: 'INTERNAL_SERVER_ERROR',
+  [AppErrorCode.TOO_MANY_REQUESTS]: 'TOO_MANY_REQUESTS',
+};
+
+export const ZAppErrorJsonSchema = z.object({
+  code: z.string(),
+  message: z.string().optional(),
+  userMessage: z.string().optional(),
+});
+
+export type TAppErrorJsonSchema = z.infer<typeof ZAppErrorJsonSchema>;
+
+export class AppError extends Error {
+  /**
+   * The error code.
+   */
+  code: string;
+
+  /**
+   * An error message which can be displayed to the user.
+   */
+  userMessage?: string;
+
+  /**
+   * Create a new AppError.
+   *
+   * @param errorCode A string representing the error code.
+   * @param message An internal error message.
+   * @param userMessage A error message which can be displayed to the user.
+   */
+  public constructor(errorCode: string, message?: string, userMessage?: string) {
+    super(message || errorCode);
+    this.code = errorCode;
+    this.userMessage = userMessage;
+  }
+
+  /**
+   * Parse an unknown value into an AppError.
+   *
+   * @param error An unknown type.
+   */
+  static parseError(error: unknown): AppError {
+    if (error instanceof AppError) {
+      return error;
+    }
+
+    // Handle TRPC errors.
+    if (error instanceof TRPCClientError) {
+      const parsedJsonError = AppError.parseFromJSONString(error.message);
+      return parsedJsonError || new AppError('UnknownError', error.message);
+    }
+
+    // Handle completely unknown errors.
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const { code, message, userMessage } = error as {
+      code: unknown;
+      message: unknown;
+      status: unknown;
+      userMessage: unknown;
+    };
+
+    const validCode: string | null = typeof code === 'string' ? code : AppErrorCode.UNKNOWN_ERROR;
+    const validMessage: string | undefined = typeof message === 'string' ? message : undefined;
+    const validUserMessage: string | undefined =
+      typeof userMessage === 'string' ? userMessage : undefined;
+
+    return new AppError(validCode, validMessage, validUserMessage);
+  }
+
+  static parseErrorToTRPCError(error: unknown): TRPCError {
+    const appError = AppError.parseError(error);
+
+    return new TRPCError({
+      code: genericErrorCodeToTrpcErrorCodeMap[appError.code] || 'BAD_REQUEST',
+      message: AppError.toJSONString(appError),
+    });
+  }
+
+  /**
+   * Convert an AppError into a JSON object which represents the error.
+   *
+   * @param appError The AppError to convert to JSON.
+   * @returns A JSON object representing the AppError.
+   */
+  static toJSON({ code, message, userMessage }: AppError): TAppErrorJsonSchema {
+    return {
+      code,
+      message,
+      userMessage,
+    };
+  }
+
+  /**
+   * Convert an AppError into a JSON string containing the relevant information.
+   *
+   * @param appError The AppError to stringify.
+   * @returns A JSON string representing the AppError.
+   */
+  static toJSONString(appError: AppError): string {
+    return JSON.stringify(AppError.toJSON(appError));
+  }
+
+  static parseFromJSONString(jsonString: string): AppError | null {
+    const parsed = ZAppErrorJsonSchema.safeParse(JSON.parse(jsonString));
+
+    if (!parsed.success) {
+      return null;
+    }
+
+    return new AppError(parsed.data.code, parsed.data.message, parsed.data.userMessage);
+  }
+}
diff --git a/packages/lib/server-only/crypto/decrypt.ts b/packages/lib/server-only/crypto/decrypt.ts
index 7b4db9894..de7b82c4b 100644
--- a/packages/lib/server-only/crypto/decrypt.ts
+++ b/packages/lib/server-only/crypto/decrypt.ts
@@ -13,21 +13,25 @@ export const decryptSecondaryData = (encryptedData: string): string | null => {
     throw new Error('Missing encryption key');
   }
 
-  const decryptedBufferValue = symmetricDecrypt({
-    key: DOCUMENSO_ENCRYPTION_SECONDARY_KEY,
-    data: encryptedData,
-  });
+  try {
+    const decryptedBufferValue = symmetricDecrypt({
+      key: DOCUMENSO_ENCRYPTION_SECONDARY_KEY,
+      data: encryptedData,
+    });
 
-  const decryptedValue = Buffer.from(decryptedBufferValue).toString('utf-8');
-  const result = ZEncryptedDataSchema.safeParse(JSON.parse(decryptedValue));
+    const decryptedValue = Buffer.from(decryptedBufferValue).toString('utf-8');
+    const result = ZEncryptedDataSchema.safeParse(JSON.parse(decryptedValue));
 
-  if (!result.success) {
+    if (!result.success) {
+      return null;
+    }
+
+    if (result.data.expiresAt !== undefined && result.data.expiresAt < Date.now()) {
+      return null;
+    }
+
+    return result.data.data;
+  } catch {
     return null;
   }
-
-  if (result.data.expiresAt !== undefined && result.data.expiresAt < Date.now()) {
-    return null;
-  }
-
-  return result.data.data;
 };
diff --git a/packages/lib/server-only/document-meta/upsert-document-meta.ts b/packages/lib/server-only/document-meta/upsert-document-meta.ts
index b67c6848b..3e6cd75be 100644
--- a/packages/lib/server-only/document-meta/upsert-document-meta.ts
+++ b/packages/lib/server-only/document-meta/upsert-document-meta.ts
@@ -24,7 +24,20 @@ export const upsertDocumentMeta = async ({
   await prisma.document.findFirstOrThrow({
     where: {
       id: documentId,
-      userId,
+      OR: [
+        {
+          userId,
+        },
+        {
+          team: {
+            members: {
+              some: {
+                userId,
+              },
+            },
+          },
+        },
+      ],
     },
   });
 
diff --git a/packages/lib/server-only/document/create-document.ts b/packages/lib/server-only/document/create-document.ts
index b84f8e46e..93307a7b4 100644
--- a/packages/lib/server-only/document/create-document.ts
+++ b/packages/lib/server-only/document/create-document.ts
@@ -5,15 +5,37 @@ import { prisma } from '@documenso/prisma';
 export type CreateDocumentOptions = {
   title: string;
   userId: number;
+  teamId?: number;
   documentDataId: string;
 };
 
-export const createDocument = async ({ userId, title, documentDataId }: CreateDocumentOptions) => {
-  return await prisma.document.create({
-    data: {
-      title,
-      documentDataId,
-      userId,
-    },
+export const createDocument = async ({
+  userId,
+  title,
+  documentDataId,
+  teamId,
+}: CreateDocumentOptions) => {
+  return await prisma.$transaction(async (tx) => {
+    if (teamId !== undefined) {
+      await tx.team.findFirstOrThrow({
+        where: {
+          id: teamId,
+          members: {
+            some: {
+              userId,
+            },
+          },
+        },
+      });
+    }
+
+    return await tx.document.create({
+      data: {
+        title,
+        documentDataId,
+        userId,
+        teamId,
+      },
+    });
   });
 };
diff --git a/packages/lib/server-only/document/duplicate-document-by-id.ts b/packages/lib/server-only/document/duplicate-document-by-id.ts
index ddb70b1cb..5ca848bb3 100644
--- a/packages/lib/server-only/document/duplicate-document-by-id.ts
+++ b/packages/lib/server-only/document/duplicate-document-by-id.ts
@@ -1,16 +1,27 @@
 import { prisma } from '@documenso/prisma';
+import type { Prisma } from '@documenso/prisma/client';
+
+import { getDocumentWhereInput } from './get-document-by-id';
 
 export interface DuplicateDocumentByIdOptions {
   id: number;
   userId: number;
+  teamId?: number;
 }
 
-export const duplicateDocumentById = async ({ id, userId }: DuplicateDocumentByIdOptions) => {
+export const duplicateDocumentById = async ({
+  id,
+  userId,
+  teamId,
+}: DuplicateDocumentByIdOptions) => {
+  const documentWhereInput = await getDocumentWhereInput({
+    documentId: id,
+    userId,
+    teamId,
+  });
+
   const document = await prisma.document.findUniqueOrThrow({
-    where: {
-      id,
-      userId: userId,
-    },
+    where: documentWhereInput,
     select: {
       title: true,
       userId: true,
@@ -33,7 +44,7 @@ export const duplicateDocumentById = async ({ id, userId }: DuplicateDocumentByI
     },
   });
 
-  const createdDocument = await prisma.document.create({
+  const createDocumentArguments: Prisma.DocumentCreateArgs = {
     data: {
       title: document.title,
       User: {
@@ -53,7 +64,17 @@ export const duplicateDocumentById = async ({ id, userId }: DuplicateDocumentByI
         },
       },
     },
-  });
+  };
+
+  if (teamId !== undefined) {
+    createDocumentArguments.data.team = {
+      connect: {
+        id: teamId,
+      },
+    };
+  }
+
+  const createdDocument = await prisma.document.create(createDocumentArguments);
 
   return createdDocument.id;
 };
diff --git a/packages/lib/server-only/document/find-documents.ts b/packages/lib/server-only/document/find-documents.ts
index 8d367dbe4..f34cc4c2c 100644
--- a/packages/lib/server-only/document/find-documents.ts
+++ b/packages/lib/server-only/document/find-documents.ts
@@ -2,8 +2,8 @@ import { DateTime } from 'luxon';
 import { P, match } from 'ts-pattern';
 
 import { prisma } from '@documenso/prisma';
-import type { Document, Prisma } from '@documenso/prisma/client';
 import { RecipientRole, SigningStatus } from '@documenso/prisma/client';
+import type { Document, Prisma, Team, TeamEmail, User } from '@documenso/prisma/client';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 
 import type { FindResultSet } from '../../types/find-result-set';
@@ -13,6 +13,7 @@ export type PeriodSelectorValue = '' | '7d' | '14d' | '30d';
 
 export type FindDocumentsOptions = {
   userId: number;
+  teamId?: number;
   term?: string;
   status?: ExtendedDocumentStatus;
   page?: number;
@@ -22,21 +23,49 @@ export type FindDocumentsOptions = {
     direction: 'asc' | 'desc';
   };
   period?: PeriodSelectorValue;
+  senderIds?: number[];
 };
 
 export const findDocuments = async ({
   userId,
+  teamId,
   term,
   status = ExtendedDocumentStatus.ALL,
   page = 1,
   perPage = 10,
   orderBy,
   period,
+  senderIds,
 }: FindDocumentsOptions) => {
-  const user = await prisma.user.findFirstOrThrow({
-    where: {
-      id: userId,
-    },
+  const { user, team } = await prisma.$transaction(async (tx) => {
+    const user = await tx.user.findFirstOrThrow({
+      where: {
+        id: userId,
+      },
+    });
+
+    let team = null;
+
+    if (teamId !== undefined) {
+      team = await tx.team.findFirstOrThrow({
+        where: {
+          id: teamId,
+          members: {
+            some: {
+              userId,
+            },
+          },
+        },
+        include: {
+          teamEmail: true,
+        },
+      });
+    }
+
+    return {
+      user,
+      team,
+    };
   });
 
   const orderByColumn = orderBy?.column ?? 'createdAt';
@@ -53,96 +82,34 @@ export const findDocuments = async ({
     })
     .otherwise(() => undefined);
 
-  const filters = match<ExtendedDocumentStatus, Prisma.DocumentWhereInput>(status)
-    .with(ExtendedDocumentStatus.ALL, () => ({
-      OR: [
-        {
-          userId,
-          deletedAt: null,
-        },
-        {
-          status: ExtendedDocumentStatus.COMPLETED,
-          Recipient: {
-            some: {
-              email: user.email,
-            },
-          },
-        },
-        {
-          status: ExtendedDocumentStatus.PENDING,
-          Recipient: {
-            some: {
-              email: user.email,
-            },
-          },
-          deletedAt: null,
-        },
-      ],
-    }))
-    .with(ExtendedDocumentStatus.INBOX, () => ({
-      status: {
-        not: ExtendedDocumentStatus.DRAFT,
-      },
-      Recipient: {
-        some: {
-          email: user.email,
-          signingStatus: SigningStatus.NOT_SIGNED,
-          role: {
-            not: RecipientRole.CC,
-          },
-        },
-      },
-      deletedAt: null,
-    }))
-    .with(ExtendedDocumentStatus.DRAFT, () => ({
-      userId,
-      status: ExtendedDocumentStatus.DRAFT,
-      deletedAt: null,
-    }))
-    .with(ExtendedDocumentStatus.PENDING, () => ({
-      OR: [
-        {
-          userId,
-          status: ExtendedDocumentStatus.PENDING,
-          deletedAt: null,
-        },
-        {
-          status: ExtendedDocumentStatus.PENDING,
-          Recipient: {
-            some: {
-              email: user.email,
-              signingStatus: SigningStatus.SIGNED,
-              role: {
-                not: RecipientRole.CC,
-              },
-            },
-          },
-          deletedAt: null,
-        },
-      ],
-    }))
-    .with(ExtendedDocumentStatus.COMPLETED, () => ({
-      OR: [
-        {
-          userId,
-          status: ExtendedDocumentStatus.COMPLETED,
-          deletedAt: null,
-        },
-        {
-          status: ExtendedDocumentStatus.COMPLETED,
-          Recipient: {
-            some: {
-              email: user.email,
-            },
-          },
-        },
-      ],
-    }))
-    .exhaustive();
+  const filters = team ? findTeamDocumentsFilter(status, team) : findDocumentsFilter(status, user);
 
-  const whereClause = {
+  if (filters === null) {
+    return {
+      data: [],
+      count: 0,
+      currentPage: 1,
+      perPage,
+      totalPages: 0,
+    };
+  }
+
+  const whereClause: Prisma.DocumentWhereInput = {
     ...termFilters,
     ...filters,
+    AND: {
+      OR: [
+        {
+          status: ExtendedDocumentStatus.COMPLETED,
+        },
+        {
+          status: {
+            not: ExtendedDocumentStatus.COMPLETED,
+          },
+          deletedAt: null,
+        },
+      ],
+    },
   };
 
   if (period) {
@@ -155,6 +122,12 @@ export const findDocuments = async ({
     };
   }
 
+  if (senderIds && senderIds.length > 0) {
+    whereClause.userId = {
+      in: senderIds,
+    };
+  }
+
   const [data, count] = await Promise.all([
     prisma.document.findMany({
       where: whereClause,
@@ -172,13 +145,16 @@ export const findDocuments = async ({
           },
         },
         Recipient: true,
+        team: {
+          select: {
+            id: true,
+            url: true,
+          },
+        },
       },
     }),
     prisma.document.count({
-      where: {
-        ...termFilters,
-        ...filters,
-      },
+      where: whereClause,
     }),
   ]);
 
@@ -197,3 +173,268 @@ export const findDocuments = async ({
     totalPages: Math.ceil(count / perPage),
   } satisfies FindResultSet<typeof data>;
 };
+
+const findDocumentsFilter = (status: ExtendedDocumentStatus, user: User) => {
+  return match<ExtendedDocumentStatus, Prisma.DocumentWhereInput>(status)
+    .with(ExtendedDocumentStatus.ALL, () => ({
+      OR: [
+        {
+          userId: user.id,
+          teamId: null,
+        },
+        {
+          status: ExtendedDocumentStatus.COMPLETED,
+          Recipient: {
+            some: {
+              email: user.email,
+            },
+          },
+        },
+        {
+          status: ExtendedDocumentStatus.PENDING,
+          Recipient: {
+            some: {
+              email: user.email,
+            },
+          },
+        },
+      ],
+    }))
+    .with(ExtendedDocumentStatus.INBOX, () => ({
+      status: {
+        not: ExtendedDocumentStatus.DRAFT,
+      },
+      Recipient: {
+        some: {
+          email: user.email,
+          signingStatus: SigningStatus.NOT_SIGNED,
+          role: {
+            not: RecipientRole.CC,
+          },
+        },
+      },
+    }))
+    .with(ExtendedDocumentStatus.DRAFT, () => ({
+      userId: user.id,
+      teamId: null,
+      status: ExtendedDocumentStatus.DRAFT,
+    }))
+    .with(ExtendedDocumentStatus.PENDING, () => ({
+      OR: [
+        {
+          userId: user.id,
+          teamId: null,
+          status: ExtendedDocumentStatus.PENDING,
+        },
+        {
+          status: ExtendedDocumentStatus.PENDING,
+          Recipient: {
+            some: {
+              email: user.email,
+              signingStatus: SigningStatus.SIGNED,
+              role: {
+                not: RecipientRole.CC,
+              },
+            },
+          },
+        },
+      ],
+    }))
+    .with(ExtendedDocumentStatus.COMPLETED, () => ({
+      OR: [
+        {
+          userId: user.id,
+          teamId: null,
+          status: ExtendedDocumentStatus.COMPLETED,
+        },
+        {
+          status: ExtendedDocumentStatus.COMPLETED,
+          Recipient: {
+            some: {
+              email: user.email,
+            },
+          },
+        },
+      ],
+    }))
+    .exhaustive();
+};
+
+/**
+ * Create a Prisma filter for the Document schema to find documents for a team.
+ *
+ * Status All:
+ *  - Documents that belong to the team
+ *  - Documents that have been sent by the team email
+ *  - Non draft documents that have been sent to the team email
+ *
+ * Status Inbox:
+ *  - Non draft documents that have been sent to the team email that have not been signed
+ *
+ * Status Draft:
+ * - Documents that belong to the team that are draft
+ * - Documents that belong to the team email that are draft
+ *
+ * Status Pending:
+ * - Documents that belong to the team that are pending
+ * - Documents that have been sent by the team email that is pending to be signed by someone else
+ * - Documents that have been sent to the team email that is pending to be signed by someone else
+ *
+ * Status Completed:
+ * - Documents that belong to the team that are completed
+ * - Documents that have been sent to the team email that are completed
+ * - Documents that have been sent by the team email that are completed
+ *
+ * @param status The status of the documents to find.
+ * @param team The team to find the documents for.
+ * @returns A filter which can be applied to the Prisma Document schema.
+ */
+const findTeamDocumentsFilter = (
+  status: ExtendedDocumentStatus,
+  team: Team & { teamEmail: TeamEmail | null },
+) => {
+  const teamEmail = team.teamEmail?.email ?? null;
+
+  return match<ExtendedDocumentStatus, Prisma.DocumentWhereInput | null>(status)
+    .with(ExtendedDocumentStatus.ALL, () => {
+      const filter: Prisma.DocumentWhereInput = {
+        // Filter to display all documents that belong to the team.
+        OR: [
+          {
+            teamId: team.id,
+          },
+        ],
+      };
+
+      if (teamEmail && filter.OR) {
+        // Filter to display all documents received by the team email that are not draft.
+        filter.OR.push({
+          status: {
+            not: ExtendedDocumentStatus.DRAFT,
+          },
+          Recipient: {
+            some: {
+              email: teamEmail,
+            },
+          },
+        });
+
+        // Filter to display all documents that have been sent by the team email.
+        filter.OR.push({
+          User: {
+            email: teamEmail,
+          },
+        });
+      }
+
+      return filter;
+    })
+    .with(ExtendedDocumentStatus.INBOX, () => {
+      // Return a filter that will return nothing.
+      if (!teamEmail) {
+        return null;
+      }
+
+      return {
+        status: {
+          not: ExtendedDocumentStatus.DRAFT,
+        },
+        Recipient: {
+          some: {
+            email: teamEmail,
+            signingStatus: SigningStatus.NOT_SIGNED,
+            role: {
+              not: RecipientRole.CC,
+            },
+          },
+        },
+      };
+    })
+    .with(ExtendedDocumentStatus.DRAFT, () => {
+      const filter: Prisma.DocumentWhereInput = {
+        OR: [
+          {
+            teamId: team.id,
+            status: ExtendedDocumentStatus.DRAFT,
+          },
+        ],
+      };
+
+      if (teamEmail && filter.OR) {
+        filter.OR.push({
+          status: ExtendedDocumentStatus.DRAFT,
+          User: {
+            email: teamEmail,
+          },
+        });
+      }
+
+      return filter;
+    })
+    .with(ExtendedDocumentStatus.PENDING, () => {
+      const filter: Prisma.DocumentWhereInput = {
+        OR: [
+          {
+            teamId: team.id,
+            status: ExtendedDocumentStatus.PENDING,
+          },
+        ],
+      };
+
+      if (teamEmail && filter.OR) {
+        filter.OR.push({
+          status: ExtendedDocumentStatus.PENDING,
+          OR: [
+            {
+              Recipient: {
+                some: {
+                  email: teamEmail,
+                  signingStatus: SigningStatus.SIGNED,
+                  role: {
+                    not: RecipientRole.CC,
+                  },
+                },
+              },
+            },
+            {
+              User: {
+                email: teamEmail,
+              },
+            },
+          ],
+        });
+      }
+
+      return filter;
+    })
+    .with(ExtendedDocumentStatus.COMPLETED, () => {
+      const filter: Prisma.DocumentWhereInput = {
+        status: ExtendedDocumentStatus.COMPLETED,
+        OR: [
+          {
+            teamId: team.id,
+          },
+        ],
+      };
+
+      if (teamEmail && filter.OR) {
+        filter.OR.push(
+          {
+            Recipient: {
+              some: {
+                email: teamEmail,
+              },
+            },
+          },
+          {
+            User: {
+              email: teamEmail,
+            },
+          },
+        );
+      }
+
+      return filter;
+    })
+    .exhaustive();
+};
diff --git a/packages/lib/server-only/document/get-document-by-id.ts b/packages/lib/server-only/document/get-document-by-id.ts
index 0b599a71c..71b614976 100644
--- a/packages/lib/server-only/document/get-document-by-id.ts
+++ b/packages/lib/server-only/document/get-document-by-id.ts
@@ -1,19 +1,106 @@
 import { prisma } from '@documenso/prisma';
+import type { Prisma } from '@documenso/prisma/client';
 
-export interface GetDocumentByIdOptions {
+import { getTeamById } from '../team/get-team';
+
+export type GetDocumentByIdOptions = {
   id: number;
   userId: number;
-}
+  teamId?: number;
+};
+
+export const getDocumentById = async ({ id, userId, teamId }: GetDocumentByIdOptions) => {
+  const documentWhereInput = await getDocumentWhereInput({
+    documentId: id,
+    userId,
+    teamId,
+  });
 
-export const getDocumentById = async ({ id, userId }: GetDocumentByIdOptions) => {
   return await prisma.document.findFirstOrThrow({
-    where: {
-      id,
-      userId,
-    },
+    where: documentWhereInput,
     include: {
       documentData: true,
       documentMeta: true,
     },
   });
 };
+
+export type GetDocumentWhereInputOptions = {
+  documentId: number;
+  userId: number;
+  teamId?: number;
+
+  /**
+   * Whether to return a filter that allows access to both the user and team documents.
+   * This only applies if `teamId` is passed in.
+   *
+   * If true, and `teamId` is passed in, the filter will allow both team and user documents.
+   * If false, and `teamId` is passed in, the filter will only allow team documents.
+   *
+   * Defaults to false.
+   */
+  overlapUserTeamScope?: boolean;
+};
+
+/**
+ * Generate the where input for a given Prisma document query.
+ *
+ * This will return a query that allows a user to get a document if they have valid access to it.
+ */
+export const getDocumentWhereInput = async ({
+  documentId,
+  userId,
+  teamId,
+  overlapUserTeamScope = false,
+}: GetDocumentWhereInputOptions) => {
+  const documentWhereInput: Prisma.DocumentWhereUniqueInput = {
+    id: documentId,
+    OR: [
+      {
+        userId,
+      },
+    ],
+  };
+
+  if (teamId === undefined || !documentWhereInput.OR) {
+    return documentWhereInput;
+  }
+
+  const team = await getTeamById({ teamId, userId });
+
+  // Allow access to team and user documents.
+  if (overlapUserTeamScope) {
+    documentWhereInput.OR.push({
+      teamId: team.id,
+    });
+  }
+
+  // Allow access to only team documents.
+  if (!overlapUserTeamScope) {
+    documentWhereInput.OR = [
+      {
+        teamId: team.id,
+      },
+    ];
+  }
+
+  // Allow access to documents sent to or from the team email.
+  if (team.teamEmail) {
+    documentWhereInput.OR.push(
+      {
+        Recipient: {
+          some: {
+            email: team.teamEmail.email,
+          },
+        },
+      },
+      {
+        User: {
+          email: team.teamEmail.email,
+        },
+      },
+    );
+  }
+
+  return documentWhereInput;
+};
diff --git a/packages/lib/server-only/document/get-stats.ts b/packages/lib/server-only/document/get-stats.ts
index 6aaa9a596..db38fa79d 100644
--- a/packages/lib/server-only/document/get-stats.ts
+++ b/packages/lib/server-only/document/get-stats.ts
@@ -1,19 +1,19 @@
 import { DateTime } from 'luxon';
 
+import type { PeriodSelectorValue } from '@documenso/lib/server-only/document/find-documents';
 import { prisma } from '@documenso/prisma';
 import type { Prisma, User } from '@documenso/prisma/client';
 import { SigningStatus } from '@documenso/prisma/client';
 import { isExtendedDocumentStatus } from '@documenso/prisma/guards/is-extended-document-status';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 
-import type { PeriodSelectorValue } from './find-documents';
-
 export type GetStatsInput = {
   user: User;
+  team?: Omit<GetTeamCountsOption, 'createdAt'>;
   period?: PeriodSelectorValue;
 };
 
-export const getStats = async ({ user, period }: GetStatsInput) => {
+export const getStats = async ({ user, period, ...options }: GetStatsInput) => {
   let createdAt: Prisma.DocumentWhereInput['createdAt'];
 
   if (period) {
@@ -26,7 +26,52 @@ export const getStats = async ({ user, period }: GetStatsInput) => {
     };
   }
 
-  const [ownerCounts, notSignedCounts, hasSignedCounts] = await Promise.all([
+  const [ownerCounts, notSignedCounts, hasSignedCounts] = await (options.team
+    ? getTeamCounts({ ...options.team, createdAt })
+    : getCounts({ user, createdAt }));
+
+  const stats: Record<ExtendedDocumentStatus, number> = {
+    [ExtendedDocumentStatus.DRAFT]: 0,
+    [ExtendedDocumentStatus.PENDING]: 0,
+    [ExtendedDocumentStatus.COMPLETED]: 0,
+    [ExtendedDocumentStatus.INBOX]: 0,
+    [ExtendedDocumentStatus.ALL]: 0,
+  };
+
+  ownerCounts.forEach((stat) => {
+    stats[stat.status] = stat._count._all;
+  });
+
+  notSignedCounts.forEach((stat) => {
+    stats[ExtendedDocumentStatus.INBOX] += stat._count._all;
+  });
+
+  hasSignedCounts.forEach((stat) => {
+    if (stat.status === ExtendedDocumentStatus.COMPLETED) {
+      stats[ExtendedDocumentStatus.COMPLETED] += stat._count._all;
+    }
+
+    if (stat.status === ExtendedDocumentStatus.PENDING) {
+      stats[ExtendedDocumentStatus.PENDING] += stat._count._all;
+    }
+  });
+
+  Object.keys(stats).forEach((key) => {
+    if (key !== ExtendedDocumentStatus.ALL && isExtendedDocumentStatus(key)) {
+      stats[ExtendedDocumentStatus.ALL] += stats[key];
+    }
+  });
+
+  return stats;
+};
+
+type GetCountsOption = {
+  user: User;
+  createdAt: Prisma.DocumentWhereInput['createdAt'];
+};
+
+const getCounts = async ({ user, createdAt }: GetCountsOption) => {
+  return Promise.all([
     prisma.document.groupBy({
       by: ['status'],
       _count: {
@@ -35,6 +80,7 @@ export const getStats = async ({ user, period }: GetStatsInput) => {
       where: {
         userId: user.id,
         createdAt,
+        teamId: null,
         deletedAt: null,
       },
     }),
@@ -91,38 +137,116 @@ export const getStats = async ({ user, period }: GetStatsInput) => {
       },
     }),
   ]);
+};
 
-  const stats: Record<ExtendedDocumentStatus, number> = {
-    [ExtendedDocumentStatus.DRAFT]: 0,
-    [ExtendedDocumentStatus.PENDING]: 0,
-    [ExtendedDocumentStatus.COMPLETED]: 0,
-    [ExtendedDocumentStatus.INBOX]: 0,
-    [ExtendedDocumentStatus.ALL]: 0,
+type GetTeamCountsOption = {
+  teamId: number;
+  teamEmail?: string;
+  senderIds?: number[];
+  createdAt: Prisma.DocumentWhereInput['createdAt'];
+};
+
+const getTeamCounts = async (options: GetTeamCountsOption) => {
+  const { createdAt, teamId, teamEmail } = options;
+
+  const senderIds = options.senderIds ?? [];
+
+  const userIdWhereClause: Prisma.DocumentWhereInput['userId'] =
+    senderIds.length > 0
+      ? {
+          in: senderIds,
+        }
+      : undefined;
+
+  let ownerCountsWhereInput: Prisma.DocumentWhereInput = {
+    userId: userIdWhereClause,
+    createdAt,
+    teamId,
+    deletedAt: null,
   };
 
-  ownerCounts.forEach((stat) => {
-    stats[stat.status] = stat._count._all;
-  });
+  let notSignedCountsGroupByArgs = null;
+  let hasSignedCountsGroupByArgs = null;
 
-  notSignedCounts.forEach((stat) => {
-    stats[ExtendedDocumentStatus.INBOX] += stat._count._all;
-  });
+  if (teamEmail) {
+    ownerCountsWhereInput = {
+      userId: userIdWhereClause,
+      createdAt,
+      OR: [
+        {
+          teamId,
+        },
+        {
+          User: {
+            email: teamEmail,
+          },
+        },
+      ],
+      deletedAt: null,
+    };
 
-  hasSignedCounts.forEach((stat) => {
-    if (stat.status === ExtendedDocumentStatus.COMPLETED) {
-      stats[ExtendedDocumentStatus.COMPLETED] += stat._count._all;
-    }
+    notSignedCountsGroupByArgs = {
+      by: ['status'],
+      _count: {
+        _all: true,
+      },
+      where: {
+        userId: userIdWhereClause,
+        createdAt,
+        status: ExtendedDocumentStatus.PENDING,
+        Recipient: {
+          some: {
+            email: teamEmail,
+            signingStatus: SigningStatus.NOT_SIGNED,
+          },
+        },
+        deletedAt: null,
+      },
+    } satisfies Prisma.DocumentGroupByArgs;
 
-    if (stat.status === ExtendedDocumentStatus.PENDING) {
-      stats[ExtendedDocumentStatus.PENDING] += stat._count._all;
-    }
-  });
+    hasSignedCountsGroupByArgs = {
+      by: ['status'],
+      _count: {
+        _all: true,
+      },
+      where: {
+        userId: userIdWhereClause,
+        createdAt,
+        OR: [
+          {
+            status: ExtendedDocumentStatus.PENDING,
+            Recipient: {
+              some: {
+                email: teamEmail,
+                signingStatus: SigningStatus.SIGNED,
+              },
+            },
+            deletedAt: null,
+          },
+          {
+            status: ExtendedDocumentStatus.COMPLETED,
+            Recipient: {
+              some: {
+                email: teamEmail,
+                signingStatus: SigningStatus.SIGNED,
+              },
+            },
+            deletedAt: null,
+          },
+        ],
+      },
+    } satisfies Prisma.DocumentGroupByArgs;
+  }
 
-  Object.keys(stats).forEach((key) => {
-    if (key !== ExtendedDocumentStatus.ALL && isExtendedDocumentStatus(key)) {
-      stats[ExtendedDocumentStatus.ALL] += stats[key];
-    }
-  });
-
-  return stats;
+  return Promise.all([
+    prisma.document.groupBy({
+      by: ['status'],
+      _count: {
+        _all: true,
+      },
+      where: ownerCountsWhereInput,
+    }),
+    notSignedCountsGroupByArgs ? prisma.document.groupBy(notSignedCountsGroupByArgs) : [],
+    hasSignedCountsGroupByArgs ? prisma.document.groupBy(hasSignedCountsGroupByArgs) : [],
+  ]);
 };
diff --git a/packages/lib/server-only/document/resend-document.tsx b/packages/lib/server-only/document/resend-document.tsx
index 4c7b66be8..d72da3a8d 100644
--- a/packages/lib/server-only/document/resend-document.tsx
+++ b/packages/lib/server-only/document/resend-document.tsx
@@ -7,27 +7,38 @@ import { FROM_ADDRESS, FROM_NAME } from '@documenso/lib/constants/email';
 import { renderCustomEmailTemplate } from '@documenso/lib/utils/render-custom-email-template';
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client';
+import type { Prisma } from '@documenso/prisma/client';
 
 import { RECIPIENT_ROLES_DESCRIPTION } from '../../constants/recipient-roles';
+import { getDocumentWhereInput } from './get-document-by-id';
 
 export type ResendDocumentOptions = {
   documentId: number;
   userId: number;
   recipients: number[];
+  teamId?: number;
 };
 
-export const resendDocument = async ({ documentId, userId, recipients }: ResendDocumentOptions) => {
+export const resendDocument = async ({
+  documentId,
+  userId,
+  recipients,
+  teamId,
+}: ResendDocumentOptions) => {
   const user = await prisma.user.findFirstOrThrow({
     where: {
       id: userId,
     },
   });
 
+  const documentWhereInput: Prisma.DocumentWhereUniqueInput = await getDocumentWhereInput({
+    documentId,
+    userId,
+    teamId,
+  });
+
   const document = await prisma.document.findUnique({
-    where: {
-      id: documentId,
-      userId,
-    },
+    where: documentWhereInput,
     include: {
       Recipient: {
         where: {
diff --git a/packages/lib/server-only/document/send-document.tsx b/packages/lib/server-only/document/send-document.tsx
index 82b37852b..312b30462 100644
--- a/packages/lib/server-only/document/send-document.tsx
+++ b/packages/lib/server-only/document/send-document.tsx
@@ -25,7 +25,20 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
   const document = await prisma.document.findUnique({
     where: {
       id: documentId,
-      userId,
+      OR: [
+        {
+          userId,
+        },
+        {
+          team: {
+            members: {
+              some: {
+                userId,
+              },
+            },
+          },
+        },
+      ],
     },
     include: {
       Recipient: true,
diff --git a/packages/lib/server-only/document/update-title.ts b/packages/lib/server-only/document/update-title.ts
index ba086b9cb..19a902930 100644
--- a/packages/lib/server-only/document/update-title.ts
+++ b/packages/lib/server-only/document/update-title.ts
@@ -12,7 +12,20 @@ export const updateTitle = async ({ userId, documentId, title }: UpdateTitleOpti
   return await prisma.document.update({
     where: {
       id: documentId,
-      userId,
+      OR: [
+        {
+          userId,
+        },
+        {
+          team: {
+            members: {
+              some: {
+                userId,
+              },
+            },
+          },
+        },
+      ],
     },
     data: {
       title,
diff --git a/packages/lib/server-only/field/get-fields-for-document.ts b/packages/lib/server-only/field/get-fields-for-document.ts
index ddc35b503..72a16c3f7 100644
--- a/packages/lib/server-only/field/get-fields-for-document.ts
+++ b/packages/lib/server-only/field/get-fields-for-document.ts
@@ -10,7 +10,20 @@ export const getFieldsForDocument = async ({ documentId, userId }: GetFieldsForD
     where: {
       documentId,
       Document: {
-        userId,
+        OR: [
+          {
+            userId,
+          },
+          {
+            team: {
+              members: {
+                some: {
+                  userId,
+                },
+              },
+            },
+          },
+        ],
       },
     },
     orderBy: {
diff --git a/packages/lib/server-only/field/set-fields-for-document.ts b/packages/lib/server-only/field/set-fields-for-document.ts
index bd14d49b2..2ba592f31 100644
--- a/packages/lib/server-only/field/set-fields-for-document.ts
+++ b/packages/lib/server-only/field/set-fields-for-document.ts
@@ -25,7 +25,20 @@ export const setFieldsForDocument = async ({
   const document = await prisma.document.findFirst({
     where: {
       id: documentId,
-      userId,
+      OR: [
+        {
+          userId,
+        },
+        {
+          team: {
+            members: {
+              some: {
+                userId,
+              },
+            },
+          },
+        },
+      ],
     },
   });
 
diff --git a/packages/lib/server-only/recipient/get-recipients-for-document.ts b/packages/lib/server-only/recipient/get-recipients-for-document.ts
index 21d198d3e..80e408acc 100644
--- a/packages/lib/server-only/recipient/get-recipients-for-document.ts
+++ b/packages/lib/server-only/recipient/get-recipients-for-document.ts
@@ -13,7 +13,20 @@ export const getRecipientsForDocument = async ({
     where: {
       documentId,
       Document: {
-        userId,
+        OR: [
+          {
+            userId,
+          },
+          {
+            team: {
+              members: {
+                some: {
+                  userId,
+                },
+              },
+            },
+          },
+        ],
       },
     },
     orderBy: {
diff --git a/packages/lib/server-only/recipient/set-recipients-for-document.ts b/packages/lib/server-only/recipient/set-recipients-for-document.ts
index 4917b213d..d42d1d707 100644
--- a/packages/lib/server-only/recipient/set-recipients-for-document.ts
+++ b/packages/lib/server-only/recipient/set-recipients-for-document.ts
@@ -23,7 +23,20 @@ export const setRecipientsForDocument = async ({
   const document = await prisma.document.findFirst({
     where: {
       id: documentId,
-      userId,
+      OR: [
+        {
+          userId,
+        },
+        {
+          team: {
+            members: {
+              some: {
+                userId,
+              },
+            },
+          },
+        },
+      ],
     },
   });
 
diff --git a/packages/lib/server-only/team/accept-team-invitation.ts b/packages/lib/server-only/team/accept-team-invitation.ts
new file mode 100644
index 000000000..a69a79ecd
--- /dev/null
+++ b/packages/lib/server-only/team/accept-team-invitation.ts
@@ -0,0 +1,63 @@
+import { updateSubscriptionItemQuantity } from '@documenso/ee/server-only/stripe/update-subscription-item-quantity';
+import { prisma } from '@documenso/prisma';
+
+import { IS_BILLING_ENABLED } from '../../constants/app';
+
+export type AcceptTeamInvitationOptions = {
+  userId: number;
+  teamId: number;
+};
+
+export const acceptTeamInvitation = async ({ userId, teamId }: AcceptTeamInvitationOptions) => {
+  await prisma.$transaction(async (tx) => {
+    const user = await tx.user.findFirstOrThrow({
+      where: {
+        id: userId,
+      },
+    });
+
+    const teamMemberInvite = await tx.teamMemberInvite.findFirstOrThrow({
+      where: {
+        teamId,
+        email: user.email,
+      },
+      include: {
+        team: {
+          include: {
+            subscription: true,
+          },
+        },
+      },
+    });
+
+    const { team } = teamMemberInvite;
+
+    await tx.teamMember.create({
+      data: {
+        teamId: teamMemberInvite.teamId,
+        userId: user.id,
+        role: teamMemberInvite.role,
+      },
+    });
+
+    await tx.teamMemberInvite.delete({
+      where: {
+        id: teamMemberInvite.id,
+      },
+    });
+
+    if (IS_BILLING_ENABLED && team.subscription) {
+      const numberOfSeats = await tx.teamMember.count({
+        where: {
+          teamId: teamMemberInvite.teamId,
+        },
+      });
+
+      await updateSubscriptionItemQuantity({
+        priceId: team.subscription.priceId,
+        subscriptionId: team.subscription.planId,
+        quantity: numberOfSeats,
+      });
+    }
+  });
+};
diff --git a/packages/lib/server-only/team/create-team-billing-portal.ts b/packages/lib/server-only/team/create-team-billing-portal.ts
new file mode 100644
index 000000000..d394f2720
--- /dev/null
+++ b/packages/lib/server-only/team/create-team-billing-portal.ts
@@ -0,0 +1,47 @@
+import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-session';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '@documenso/lib/constants/teams';
+import { prisma } from '@documenso/prisma';
+
+export type CreateTeamBillingPortalOptions = {
+  userId: number;
+  teamId: number;
+};
+
+export const createTeamBillingPortal = async ({
+  userId,
+  teamId,
+}: CreateTeamBillingPortalOptions) => {
+  if (!IS_BILLING_ENABLED) {
+    throw new Error('Billing is not enabled');
+  }
+
+  const team = await prisma.team.findFirstOrThrow({
+    where: {
+      id: teamId,
+      members: {
+        some: {
+          userId,
+          role: {
+            in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_BILLING'],
+          },
+        },
+      },
+    },
+    include: {
+      subscription: true,
+    },
+  });
+
+  if (!team.subscription) {
+    throw new Error('Team has no subscription');
+  }
+
+  if (!team.customerId) {
+    throw new Error('Team has no customerId');
+  }
+
+  return getPortalSession({
+    customerId: team.customerId,
+  });
+};
diff --git a/packages/lib/server-only/team/create-team-checkout-session.ts b/packages/lib/server-only/team/create-team-checkout-session.ts
new file mode 100644
index 000000000..b80fc260b
--- /dev/null
+++ b/packages/lib/server-only/team/create-team-checkout-session.ts
@@ -0,0 +1,52 @@
+import { getCheckoutSession } from '@documenso/ee/server-only/stripe/get-checkout-session';
+import { getTeamPrices } from '@documenso/ee/server-only/stripe/get-team-prices';
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { prisma } from '@documenso/prisma';
+
+export type CreateTeamPendingCheckoutSession = {
+  userId: number;
+  pendingTeamId: number;
+  interval: 'monthly' | 'yearly';
+};
+
+export const createTeamPendingCheckoutSession = async ({
+  userId,
+  pendingTeamId,
+  interval,
+}: CreateTeamPendingCheckoutSession) => {
+  const teamPendingCreation = await prisma.teamPending.findFirstOrThrow({
+    where: {
+      id: pendingTeamId,
+      ownerUserId: userId,
+    },
+    include: {
+      owner: true,
+    },
+  });
+
+  const prices = await getTeamPrices();
+  const priceId = prices[interval].priceId;
+
+  try {
+    const stripeCheckoutSession = await getCheckoutSession({
+      customerId: teamPendingCreation.customerId,
+      priceId,
+      returnUrl: `${WEBAPP_BASE_URL}/settings/teams`,
+      subscriptionMetadata: {
+        pendingTeamId: pendingTeamId.toString(),
+      },
+    });
+
+    if (!stripeCheckoutSession) {
+      throw new AppError(AppErrorCode.UNKNOWN_ERROR);
+    }
+
+    return stripeCheckoutSession;
+  } catch (e) {
+    console.error(e);
+
+    // Absorb all the errors incase Stripe throws something sensitive.
+    throw new AppError(AppErrorCode.UNKNOWN_ERROR, 'Something went wrong.');
+  }
+};
diff --git a/packages/lib/server-only/team/create-team-email-verification.ts b/packages/lib/server-only/team/create-team-email-verification.ts
new file mode 100644
index 000000000..28e1538d0
--- /dev/null
+++ b/packages/lib/server-only/team/create-team-email-verification.ts
@@ -0,0 +1,132 @@
+import { createElement } from 'react';
+
+import { z } from 'zod';
+
+import { mailer } from '@documenso/email/mailer';
+import { render } from '@documenso/email/render';
+import { ConfirmTeamEmailTemplate } from '@documenso/email/templates/confirm-team-email';
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { FROM_ADDRESS, FROM_NAME } from '@documenso/lib/constants/email';
+import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '@documenso/lib/constants/teams';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { createTokenVerification } from '@documenso/lib/utils/token-verification';
+import { prisma } from '@documenso/prisma';
+import { Prisma } from '@documenso/prisma/client';
+
+export type CreateTeamEmailVerificationOptions = {
+  userId: number;
+  teamId: number;
+  data: {
+    email: string;
+    name: string;
+  };
+};
+
+export const createTeamEmailVerification = async ({
+  userId,
+  teamId,
+  data,
+}: CreateTeamEmailVerificationOptions) => {
+  try {
+    await prisma.$transaction(async (tx) => {
+      const team = await tx.team.findFirstOrThrow({
+        where: {
+          id: teamId,
+          members: {
+            some: {
+              userId,
+              role: {
+                in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_TEAM'],
+              },
+            },
+          },
+        },
+        include: {
+          teamEmail: true,
+          emailVerification: true,
+        },
+      });
+
+      if (team.teamEmail || team.emailVerification) {
+        throw new AppError(
+          AppErrorCode.INVALID_REQUEST,
+          'Team already has an email or existing email verification.',
+        );
+      }
+
+      const existingTeamEmail = await tx.teamEmail.findFirst({
+        where: {
+          email: data.email,
+        },
+      });
+
+      if (existingTeamEmail) {
+        throw new AppError(AppErrorCode.ALREADY_EXISTS, 'Email already taken by another team.');
+      }
+
+      const { token, expiresAt } = createTokenVerification({ hours: 1 });
+
+      await tx.teamEmailVerification.create({
+        data: {
+          token,
+          expiresAt,
+          email: data.email,
+          name: data.name,
+          teamId,
+        },
+      });
+
+      await sendTeamEmailVerificationEmail(data.email, token, team.name, team.url);
+    });
+  } catch (err) {
+    console.error(err);
+
+    if (!(err instanceof Prisma.PrismaClientKnownRequestError)) {
+      throw err;
+    }
+
+    const target = z.array(z.string()).safeParse(err.meta?.target);
+
+    if (err.code === 'P2002' && target.success && target.data.includes('email')) {
+      throw new AppError(AppErrorCode.ALREADY_EXISTS, 'Email already taken by another team.');
+    }
+
+    throw err;
+  }
+};
+
+/**
+ * Send an email to a user asking them to accept a team email request.
+ *
+ * @param email The email address to use for the team.
+ * @param token The token used to authenticate that the user has granted access.
+ * @param teamName The name of the team the user is being invited to.
+ * @param teamUrl The url of the team the user is being invited to.
+ */
+export const sendTeamEmailVerificationEmail = async (
+  email: string,
+  token: string,
+  teamName: string,
+  teamUrl: string,
+) => {
+  const assetBaseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
+
+  const template = createElement(ConfirmTeamEmailTemplate, {
+    assetBaseUrl,
+    baseUrl: WEBAPP_BASE_URL,
+    teamName,
+    teamUrl,
+    token,
+  });
+
+  await mailer.sendMail({
+    to: email,
+    from: {
+      name: FROM_NAME,
+      address: FROM_ADDRESS,
+    },
+    subject: `A request to use your email has been initiated by ${teamName} on Documenso`,
+    html: render(template),
+    text: render(template, { plainText: true }),
+  });
+};
diff --git a/packages/lib/server-only/team/create-team-member-invites.ts b/packages/lib/server-only/team/create-team-member-invites.ts
new file mode 100644
index 000000000..f167d2112
--- /dev/null
+++ b/packages/lib/server-only/team/create-team-member-invites.ts
@@ -0,0 +1,161 @@
+import { createElement } from 'react';
+
+import { nanoid } from 'nanoid';
+
+import { mailer } from '@documenso/email/mailer';
+import { render } from '@documenso/email/render';
+import type { TeamInviteEmailProps } from '@documenso/email/templates/team-invite';
+import { TeamInviteEmailTemplate } from '@documenso/email/templates/team-invite';
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { FROM_ADDRESS, FROM_NAME } from '@documenso/lib/constants/email';
+import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '@documenso/lib/constants/teams';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { isTeamRoleWithinUserHierarchy } from '@documenso/lib/utils/teams';
+import { prisma } from '@documenso/prisma';
+import { TeamMemberInviteStatus } from '@documenso/prisma/client';
+import type { TCreateTeamMemberInvitesMutationSchema } from '@documenso/trpc/server/team-router/schema';
+
+export type CreateTeamMemberInvitesOptions = {
+  userId: number;
+  userName: string;
+  teamId: number;
+  invitations: TCreateTeamMemberInvitesMutationSchema['invitations'];
+};
+
+/**
+ * Invite team members via email to join a team.
+ */
+export const createTeamMemberInvites = async ({
+  userId,
+  userName,
+  teamId,
+  invitations,
+}: CreateTeamMemberInvitesOptions) => {
+  const team = await prisma.team.findFirstOrThrow({
+    where: {
+      id: teamId,
+      members: {
+        some: {
+          userId,
+          role: {
+            in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_TEAM'],
+          },
+        },
+      },
+    },
+    include: {
+      members: {
+        select: {
+          role: true,
+          user: {
+            select: {
+              id: true,
+              email: true,
+            },
+          },
+        },
+      },
+      invites: true,
+    },
+  });
+
+  const teamMemberEmails = team.members.map((member) => member.user.email);
+  const teamMemberInviteEmails = team.invites.map((invite) => invite.email);
+  const currentTeamMember = team.members.find((member) => member.user.id === userId);
+
+  if (!currentTeamMember) {
+    throw new AppError(AppErrorCode.UNAUTHORIZED, 'User not part of team.');
+  }
+
+  const usersToInvite = invitations.filter((invitation) => {
+    // Filter out users that are already members of the team.
+    if (teamMemberEmails.includes(invitation.email)) {
+      return false;
+    }
+
+    // Filter out users that have already been invited to the team.
+    if (teamMemberInviteEmails.includes(invitation.email)) {
+      return false;
+    }
+
+    return true;
+  });
+
+  const unauthorizedRoleAccess = usersToInvite.some(
+    ({ role }) => !isTeamRoleWithinUserHierarchy(currentTeamMember.role, role),
+  );
+
+  if (unauthorizedRoleAccess) {
+    throw new AppError(
+      AppErrorCode.UNAUTHORIZED,
+      'User does not have permission to set high level roles',
+    );
+  }
+
+  const teamMemberInvites = usersToInvite.map(({ email, role }) => ({
+    email,
+    teamId,
+    role,
+    status: TeamMemberInviteStatus.PENDING,
+    token: nanoid(32),
+  }));
+
+  await prisma.teamMemberInvite.createMany({
+    data: teamMemberInvites,
+  });
+
+  const sendEmailResult = await Promise.allSettled(
+    teamMemberInvites.map(async ({ email, token }) =>
+      sendTeamMemberInviteEmail({
+        email,
+        token,
+        teamName: team.name,
+        teamUrl: team.url,
+        senderName: userName,
+      }),
+    ),
+  );
+
+  const sendEmailResultErrorList = sendEmailResult.filter(
+    (result): result is PromiseRejectedResult => result.status === 'rejected',
+  );
+
+  if (sendEmailResultErrorList.length > 0) {
+    console.error(JSON.stringify(sendEmailResultErrorList));
+
+    throw new AppError(
+      'EmailDeliveryFailed',
+      'Failed to send invite emails to one or more users.',
+      `Failed to send invites to ${sendEmailResultErrorList.length}/${teamMemberInvites.length} users.`,
+    );
+  }
+};
+
+type SendTeamMemberInviteEmailOptions = Omit<TeamInviteEmailProps, 'baseUrl' | 'assetBaseUrl'> & {
+  email: string;
+};
+
+/**
+ * Send an email to a user inviting them to join a team.
+ */
+export const sendTeamMemberInviteEmail = async ({
+  email,
+  ...emailTemplateOptions
+}: SendTeamMemberInviteEmailOptions) => {
+  const template = createElement(TeamInviteEmailTemplate, {
+    assetBaseUrl: WEBAPP_BASE_URL,
+    baseUrl: WEBAPP_BASE_URL,
+    ...emailTemplateOptions,
+  });
+
+  await mailer.sendMail({
+    to: email,
+    from: {
+      name: FROM_NAME,
+      address: FROM_ADDRESS,
+    },
+    subject: `You have been invited to join ${emailTemplateOptions.teamName} on Documenso`,
+    html: render(template),
+    text: render(template, { plainText: true }),
+  });
+};
diff --git a/packages/lib/server-only/team/create-team.ts b/packages/lib/server-only/team/create-team.ts
new file mode 100644
index 000000000..f1d245523
--- /dev/null
+++ b/packages/lib/server-only/team/create-team.ts
@@ -0,0 +1,207 @@
+import type Stripe from 'stripe';
+import { z } from 'zod';
+
+import { createTeamCustomer } from '@documenso/ee/server-only/stripe/create-team-customer';
+import { getCommunityPlanPriceIds } from '@documenso/ee/server-only/stripe/get-community-plan-prices';
+import { mapStripeSubscriptionToPrismaUpsertAction } from '@documenso/ee/server-only/stripe/webhook/on-subscription-updated';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { subscriptionsContainsActiveCommunityPlan } from '@documenso/lib/utils/billing';
+import { prisma } from '@documenso/prisma';
+import { Prisma, TeamMemberRole } from '@documenso/prisma/client';
+
+import { stripe } from '../stripe';
+
+export type CreateTeamOptions = {
+  /**
+   * ID of the user creating the Team.
+   */
+  userId: number;
+
+  /**
+   * Name of the team to display.
+   */
+  teamName: string;
+
+  /**
+   * Unique URL of the team.
+   *
+   * Used as the URL path, example: https://documenso.com/t/{teamUrl}/settings
+   */
+  teamUrl: string;
+};
+
+export type CreateTeamResponse =
+  | {
+      paymentRequired: false;
+    }
+  | {
+      paymentRequired: true;
+      pendingTeamId: number;
+    };
+
+/**
+ * Create a team or pending team depending on the user's subscription or application's billing settings.
+ */
+export const createTeam = async ({
+  userId,
+  teamName,
+  teamUrl,
+}: CreateTeamOptions): Promise<CreateTeamResponse> => {
+  const user = await prisma.user.findUniqueOrThrow({
+    where: {
+      id: userId,
+    },
+    include: {
+      Subscription: true,
+    },
+  });
+
+  let isPaymentRequired = IS_BILLING_ENABLED;
+  let customerId: string | null = null;
+
+  if (IS_BILLING_ENABLED) {
+    const communityPlanPriceIds = await getCommunityPlanPriceIds();
+
+    isPaymentRequired = !subscriptionsContainsActiveCommunityPlan(
+      user.Subscription,
+      communityPlanPriceIds,
+    );
+
+    customerId = await createTeamCustomer({
+      name: user.name ?? teamName,
+      email: user.email,
+    }).then((customer) => customer.id);
+  }
+
+  try {
+    // Create the team directly if no payment is required.
+    if (!isPaymentRequired) {
+      await prisma.team.create({
+        data: {
+          name: teamName,
+          url: teamUrl,
+          ownerUserId: user.id,
+          customerId,
+          members: {
+            create: [
+              {
+                userId,
+                role: TeamMemberRole.ADMIN,
+              },
+            ],
+          },
+        },
+      });
+
+      return {
+        paymentRequired: false,
+      };
+    }
+
+    // Create a pending team if payment is required.
+    const pendingTeam = await prisma.$transaction(async (tx) => {
+      const existingTeamWithUrl = await tx.team.findUnique({
+        where: {
+          url: teamUrl,
+        },
+      });
+
+      if (existingTeamWithUrl) {
+        throw new AppError(AppErrorCode.ALREADY_EXISTS, 'Team URL already exists.');
+      }
+
+      if (!customerId) {
+        throw new AppError(AppErrorCode.UNKNOWN_ERROR, 'Missing customer ID for pending teams.');
+      }
+
+      return await tx.teamPending.create({
+        data: {
+          name: teamName,
+          url: teamUrl,
+          ownerUserId: user.id,
+          customerId,
+        },
+      });
+    });
+
+    return {
+      paymentRequired: true,
+      pendingTeamId: pendingTeam.id,
+    };
+  } catch (err) {
+    console.error(err);
+
+    if (!(err instanceof Prisma.PrismaClientKnownRequestError)) {
+      throw err;
+    }
+
+    const target = z.array(z.string()).safeParse(err.meta?.target);
+
+    if (err.code === 'P2002' && target.success && target.data.includes('url')) {
+      throw new AppError(AppErrorCode.ALREADY_EXISTS, 'Team URL already exists.');
+    }
+
+    throw err;
+  }
+};
+
+export type CreateTeamFromPendingTeamOptions = {
+  pendingTeamId: number;
+  subscription: Stripe.Subscription;
+};
+
+export const createTeamFromPendingTeam = async ({
+  pendingTeamId,
+  subscription,
+}: CreateTeamFromPendingTeamOptions) => {
+  return await prisma.$transaction(async (tx) => {
+    const pendingTeam = await tx.teamPending.findUniqueOrThrow({
+      where: {
+        id: pendingTeamId,
+      },
+    });
+
+    await tx.teamPending.delete({
+      where: {
+        id: pendingTeamId,
+      },
+    });
+
+    const team = await tx.team.create({
+      data: {
+        name: pendingTeam.name,
+        url: pendingTeam.url,
+        ownerUserId: pendingTeam.ownerUserId,
+        customerId: pendingTeam.customerId,
+        members: {
+          create: [
+            {
+              userId: pendingTeam.ownerUserId,
+              role: TeamMemberRole.ADMIN,
+            },
+          ],
+        },
+      },
+    });
+
+    await tx.subscription.upsert(
+      mapStripeSubscriptionToPrismaUpsertAction(subscription, undefined, team.id),
+    );
+
+    // Attach the team ID to the subscription metadata for sanity reasons.
+    await stripe.subscriptions
+      .update(subscription.id, {
+        metadata: {
+          teamId: team.id.toString(),
+        },
+      })
+      .catch((e) => {
+        console.error(e);
+        // Non-critical error, but we want to log it so we can rectify it.
+        // Todo: Teams - Alert us.
+      });
+
+    return team;
+  });
+};
diff --git a/packages/lib/server-only/team/delete-team-email-verification.ts b/packages/lib/server-only/team/delete-team-email-verification.ts
new file mode 100644
index 000000000..fee39553f
--- /dev/null
+++ b/packages/lib/server-only/team/delete-team-email-verification.ts
@@ -0,0 +1,34 @@
+import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '@documenso/lib/constants/teams';
+import { prisma } from '@documenso/prisma';
+
+export type DeleteTeamEmailVerificationOptions = {
+  userId: number;
+  teamId: number;
+};
+
+export const deleteTeamEmailVerification = async ({
+  userId,
+  teamId,
+}: DeleteTeamEmailVerificationOptions) => {
+  await prisma.$transaction(async (tx) => {
+    await tx.team.findFirstOrThrow({
+      where: {
+        id: teamId,
+        members: {
+          some: {
+            userId,
+            role: {
+              in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_TEAM'],
+            },
+          },
+        },
+      },
+    });
+
+    await tx.teamEmailVerification.delete({
+      where: {
+        teamId,
+      },
+    });
+  });
+};
diff --git a/packages/lib/server-only/team/delete-team-email.ts b/packages/lib/server-only/team/delete-team-email.ts
new file mode 100644
index 000000000..c5139a971
--- /dev/null
+++ b/packages/lib/server-only/team/delete-team-email.ts
@@ -0,0 +1,93 @@
+import { createElement } from 'react';
+
+import { mailer } from '@documenso/email/mailer';
+import { render } from '@documenso/email/render';
+import { TeamEmailRemovedTemplate } from '@documenso/email/templates/team-email-removed';
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { FROM_ADDRESS, FROM_NAME } from '@documenso/lib/constants/email';
+import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '@documenso/lib/constants/teams';
+import { prisma } from '@documenso/prisma';
+
+export type DeleteTeamEmailOptions = {
+  userId: number;
+  userEmail: string;
+  teamId: number;
+};
+
+/**
+ * Delete a team email.
+ *
+ * The user must either be part of the team with the required permissions, or the owner of the email.
+ */
+export const deleteTeamEmail = async ({ userId, userEmail, teamId }: DeleteTeamEmailOptions) => {
+  const team = await prisma.$transaction(async (tx) => {
+    const foundTeam = await tx.team.findFirstOrThrow({
+      where: {
+        id: teamId,
+        OR: [
+          {
+            teamEmail: {
+              email: userEmail,
+            },
+          },
+          {
+            members: {
+              some: {
+                userId,
+                role: {
+                  in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_TEAM'],
+                },
+              },
+            },
+          },
+        ],
+      },
+      include: {
+        teamEmail: true,
+        owner: {
+          select: {
+            name: true,
+            email: true,
+          },
+        },
+      },
+    });
+
+    await tx.teamEmail.delete({
+      where: {
+        teamId,
+      },
+    });
+
+    return foundTeam;
+  });
+
+  try {
+    const assetBaseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
+
+    const template = createElement(TeamEmailRemovedTemplate, {
+      assetBaseUrl,
+      baseUrl: WEBAPP_BASE_URL,
+      teamEmail: team.teamEmail?.email ?? '',
+      teamName: team.name,
+      teamUrl: team.url,
+    });
+
+    await mailer.sendMail({
+      to: {
+        address: team.owner.email,
+        name: team.owner.name ?? '',
+      },
+      from: {
+        name: FROM_NAME,
+        address: FROM_ADDRESS,
+      },
+      subject: `Team email has been revoked for ${team.name}`,
+      html: render(template),
+      text: render(template, { plainText: true }),
+    });
+  } catch (e) {
+    // Todo: Teams - Alert us.
+    // We don't want to prevent a user from revoking access because an email could not be sent.
+  }
+};
diff --git a/packages/lib/server-only/team/delete-team-invitations.ts b/packages/lib/server-only/team/delete-team-invitations.ts
new file mode 100644
index 000000000..a2baf8352
--- /dev/null
+++ b/packages/lib/server-only/team/delete-team-invitations.ts
@@ -0,0 +1,47 @@
+import { prisma } from '@documenso/prisma';
+
+import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '../../constants/teams';
+
+export type DeleteTeamMemberInvitationsOptions = {
+  /**
+   * The ID of the user who is initiating this action.
+   */
+  userId: number;
+
+  /**
+   * The ID of the team to remove members from.
+   */
+  teamId: number;
+
+  /**
+   * The IDs of the invitations to remove.
+   */
+  invitationIds: number[];
+};
+
+export const deleteTeamMemberInvitations = async ({
+  userId,
+  teamId,
+  invitationIds,
+}: DeleteTeamMemberInvitationsOptions) => {
+  await prisma.$transaction(async (tx) => {
+    await tx.teamMember.findFirstOrThrow({
+      where: {
+        userId,
+        teamId,
+        role: {
+          in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_TEAM'],
+        },
+      },
+    });
+
+    await tx.teamMemberInvite.deleteMany({
+      where: {
+        id: {
+          in: invitationIds,
+        },
+        teamId,
+      },
+    });
+  });
+};
diff --git a/packages/lib/server-only/team/delete-team-members.ts b/packages/lib/server-only/team/delete-team-members.ts
new file mode 100644
index 000000000..7e282af5a
--- /dev/null
+++ b/packages/lib/server-only/team/delete-team-members.ts
@@ -0,0 +1,102 @@
+import { updateSubscriptionItemQuantity } from '@documenso/ee/server-only/stripe/update-subscription-item-quantity';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '@documenso/lib/constants/teams';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { isTeamRoleWithinUserHierarchy } from '@documenso/lib/utils/teams';
+import { prisma } from '@documenso/prisma';
+
+export type DeleteTeamMembersOptions = {
+  /**
+   * The ID of the user who is initiating this action.
+   */
+  userId: number;
+
+  /**
+   * The ID of the team to remove members from.
+   */
+  teamId: number;
+
+  /**
+   * The IDs of the team members to remove.
+   */
+  teamMemberIds: number[];
+};
+
+export const deleteTeamMembers = async ({
+  userId,
+  teamId,
+  teamMemberIds,
+}: DeleteTeamMembersOptions) => {
+  await prisma.$transaction(async (tx) => {
+    // Find the team and validate that the user is allowed to remove members.
+    const team = await tx.team.findFirstOrThrow({
+      where: {
+        id: teamId,
+        members: {
+          some: {
+            userId,
+            role: {
+              in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_TEAM'],
+            },
+          },
+        },
+      },
+      include: {
+        members: {
+          select: {
+            id: true,
+            userId: true,
+            role: true,
+          },
+        },
+        subscription: true,
+      },
+    });
+
+    const currentTeamMember = team.members.find((member) => member.userId === userId);
+    const teamMembersToRemove = team.members.filter((member) => teamMemberIds.includes(member.id));
+
+    if (!currentTeamMember) {
+      throw new AppError(AppErrorCode.NOT_FOUND, 'Team member record does not exist');
+    }
+
+    if (teamMembersToRemove.find((member) => member.userId === team.ownerUserId)) {
+      throw new AppError(AppErrorCode.UNAUTHORIZED, 'Cannot remove the team owner');
+    }
+
+    const isMemberToRemoveHigherRole = teamMembersToRemove.some(
+      (member) => !isTeamRoleWithinUserHierarchy(currentTeamMember.role, member.role),
+    );
+
+    if (isMemberToRemoveHigherRole) {
+      throw new AppError(AppErrorCode.UNAUTHORIZED, 'Cannot remove a member with a higher role');
+    }
+
+    // Remove the team members.
+    await tx.teamMember.deleteMany({
+      where: {
+        id: {
+          in: teamMemberIds,
+        },
+        teamId,
+        userId: {
+          not: team.ownerUserId,
+        },
+      },
+    });
+
+    if (IS_BILLING_ENABLED && team.subscription) {
+      const numberOfSeats = await tx.teamMember.count({
+        where: {
+          teamId,
+        },
+      });
+
+      await updateSubscriptionItemQuantity({
+        priceId: team.subscription.priceId,
+        subscriptionId: team.subscription.planId,
+        quantity: numberOfSeats,
+      });
+    }
+  });
+};
diff --git a/packages/lib/server-only/team/delete-team-pending.ts b/packages/lib/server-only/team/delete-team-pending.ts
new file mode 100644
index 000000000..b339fd862
--- /dev/null
+++ b/packages/lib/server-only/team/delete-team-pending.ts
@@ -0,0 +1,15 @@
+import { prisma } from '@documenso/prisma';
+
+export type DeleteTeamPendingOptions = {
+  userId: number;
+  pendingTeamId: number;
+};
+
+export const deleteTeamPending = async ({ userId, pendingTeamId }: DeleteTeamPendingOptions) => {
+  await prisma.teamPending.delete({
+    where: {
+      id: pendingTeamId,
+      ownerUserId: userId,
+    },
+  });
+};
diff --git a/packages/lib/server-only/team/delete-team-transfer-request.ts b/packages/lib/server-only/team/delete-team-transfer-request.ts
new file mode 100644
index 000000000..245a72b5a
--- /dev/null
+++ b/packages/lib/server-only/team/delete-team-transfer-request.ts
@@ -0,0 +1,42 @@
+import { prisma } from '@documenso/prisma';
+
+import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '../../constants/teams';
+
+export type DeleteTeamTransferRequestOptions = {
+  /**
+   * The ID of the user deleting the transfer.
+   */
+  userId: number;
+
+  /**
+   * The ID of the team whose team transfer request should be deleted.
+   */
+  teamId: number;
+};
+
+export const deleteTeamTransferRequest = async ({
+  userId,
+  teamId,
+}: DeleteTeamTransferRequestOptions) => {
+  await prisma.$transaction(async (tx) => {
+    await tx.team.findFirstOrThrow({
+      where: {
+        id: teamId,
+        members: {
+          some: {
+            userId,
+            role: {
+              in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['DELETE_TEAM_TRANSFER_REQUEST'],
+            },
+          },
+        },
+      },
+    });
+
+    await tx.teamTransferVerification.delete({
+      where: {
+        teamId,
+      },
+    });
+  });
+};
diff --git a/packages/lib/server-only/team/delete-team.ts b/packages/lib/server-only/team/delete-team.ts
new file mode 100644
index 000000000..dffc044d8
--- /dev/null
+++ b/packages/lib/server-only/team/delete-team.ts
@@ -0,0 +1,42 @@
+import { prisma } from '@documenso/prisma';
+
+import { AppError } from '../../errors/app-error';
+import { stripe } from '../stripe';
+
+export type DeleteTeamOptions = {
+  userId: number;
+  teamId: number;
+};
+
+export const deleteTeam = async ({ userId, teamId }: DeleteTeamOptions) => {
+  await prisma.$transaction(async (tx) => {
+    const team = await tx.team.findFirstOrThrow({
+      where: {
+        id: teamId,
+        ownerUserId: userId,
+      },
+      include: {
+        subscription: true,
+      },
+    });
+
+    if (team.subscription) {
+      await stripe.subscriptions
+        .cancel(team.subscription.planId, {
+          prorate: false,
+          invoice_now: true,
+        })
+        .catch((err) => {
+          console.error(err);
+          throw AppError.parseError(err);
+        });
+    }
+
+    await tx.team.delete({
+      where: {
+        id: teamId,
+        ownerUserId: userId,
+      },
+    });
+  });
+};
diff --git a/packages/lib/server-only/team/find-team-invoices.ts b/packages/lib/server-only/team/find-team-invoices.ts
new file mode 100644
index 000000000..bbc84f3fd
--- /dev/null
+++ b/packages/lib/server-only/team/find-team-invoices.ts
@@ -0,0 +1,52 @@
+import { getInvoices } from '@documenso/ee/server-only/stripe/get-invoices';
+import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '@documenso/lib/constants/teams';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { prisma } from '@documenso/prisma';
+
+export interface FindTeamInvoicesOptions {
+  userId: number;
+  teamId: number;
+}
+
+export const findTeamInvoices = async ({ userId, teamId }: FindTeamInvoicesOptions) => {
+  const team = await prisma.team.findUniqueOrThrow({
+    where: {
+      id: teamId,
+      members: {
+        some: {
+          userId,
+          role: {
+            in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_TEAM'],
+          },
+        },
+      },
+    },
+  });
+
+  if (!team.customerId) {
+    throw new AppError(AppErrorCode.NOT_FOUND, 'Team has no customer ID.');
+  }
+
+  const results = await getInvoices({ customerId: team.customerId });
+
+  if (!results) {
+    return null;
+  }
+
+  return {
+    ...results,
+    data: results.data.map((invoice) => ({
+      invoicePdf: invoice.invoice_pdf,
+      hostedInvoicePdf: invoice.hosted_invoice_url,
+      status: invoice.status,
+      subtotal: invoice.subtotal,
+      total: invoice.total,
+      amountPaid: invoice.amount_paid,
+      amountDue: invoice.amount_due,
+      created: invoice.created,
+      paid: invoice.paid,
+      quantity: invoice.lines.data[0].quantity ?? 0,
+      currency: invoice.currency,
+    })),
+  };
+};
diff --git a/packages/lib/server-only/team/find-team-member-invites.ts b/packages/lib/server-only/team/find-team-member-invites.ts
new file mode 100644
index 000000000..8100008b8
--- /dev/null
+++ b/packages/lib/server-only/team/find-team-member-invites.ts
@@ -0,0 +1,91 @@
+import { P, match } from 'ts-pattern';
+
+import { prisma } from '@documenso/prisma';
+import type { TeamMemberInvite } from '@documenso/prisma/client';
+import { Prisma } from '@documenso/prisma/client';
+
+import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '../../constants/teams';
+import type { FindResultSet } from '../../types/find-result-set';
+
+export interface FindTeamMemberInvitesOptions {
+  userId: number;
+  teamId: number;
+  term?: string;
+  page?: number;
+  perPage?: number;
+  orderBy?: {
+    column: keyof TeamMemberInvite;
+    direction: 'asc' | 'desc';
+  };
+}
+
+export const findTeamMemberInvites = async ({
+  userId,
+  teamId,
+  term,
+  page = 1,
+  perPage = 10,
+  orderBy,
+}: FindTeamMemberInvitesOptions) => {
+  const orderByColumn = orderBy?.column ?? 'email';
+  const orderByDirection = orderBy?.direction ?? 'desc';
+
+  // Check that the user belongs to the team they are trying to find invites in.
+  const userTeam = await prisma.team.findUniqueOrThrow({
+    where: {
+      id: teamId,
+      members: {
+        some: {
+          userId,
+          role: {
+            in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_TEAM'],
+          },
+        },
+      },
+    },
+  });
+
+  const termFilters: Prisma.TeamMemberInviteWhereInput | undefined = match(term)
+    .with(P.string.minLength(1), () => ({
+      email: {
+        contains: term,
+        mode: Prisma.QueryMode.insensitive,
+      },
+    }))
+    .otherwise(() => undefined);
+
+  const whereClause: Prisma.TeamMemberInviteWhereInput = {
+    ...termFilters,
+    teamId: userTeam.id,
+  };
+
+  const [data, count] = await Promise.all([
+    prisma.teamMemberInvite.findMany({
+      where: whereClause,
+      skip: Math.max(page - 1, 0) * perPage,
+      take: perPage,
+      orderBy: {
+        [orderByColumn]: orderByDirection,
+      },
+      // Exclude token attribute.
+      select: {
+        id: true,
+        teamId: true,
+        email: true,
+        role: true,
+        createdAt: true,
+      },
+    }),
+    prisma.teamMemberInvite.count({
+      where: whereClause,
+    }),
+  ]);
+
+  return {
+    data,
+    count,
+    currentPage: Math.max(page, 1),
+    perPage,
+    totalPages: Math.ceil(count / perPage),
+  } satisfies FindResultSet<typeof data>;
+};
diff --git a/packages/lib/server-only/team/find-team-members.ts b/packages/lib/server-only/team/find-team-members.ts
new file mode 100644
index 000000000..4a1ab8511
--- /dev/null
+++ b/packages/lib/server-only/team/find-team-members.ts
@@ -0,0 +1,100 @@
+import { P, match } from 'ts-pattern';
+
+import { prisma } from '@documenso/prisma';
+import type { TeamMember } from '@documenso/prisma/client';
+import { Prisma } from '@documenso/prisma/client';
+
+import type { FindResultSet } from '../../types/find-result-set';
+
+export interface FindTeamMembersOptions {
+  userId: number;
+  teamId: number;
+  term?: string;
+  page?: number;
+  perPage?: number;
+  orderBy?: {
+    column: keyof TeamMember | 'name';
+    direction: 'asc' | 'desc';
+  };
+}
+
+export const findTeamMembers = async ({
+  userId,
+  teamId,
+  term,
+  page = 1,
+  perPage = 10,
+  orderBy,
+}: FindTeamMembersOptions) => {
+  const orderByColumn = orderBy?.column ?? 'name';
+  const orderByDirection = orderBy?.direction ?? 'desc';
+
+  // Check that the user belongs to the team they are trying to find members in.
+  const userTeam = await prisma.team.findUniqueOrThrow({
+    where: {
+      id: teamId,
+      members: {
+        some: {
+          userId,
+        },
+      },
+    },
+  });
+
+  const termFilters: Prisma.TeamMemberWhereInput | undefined = match(term)
+    .with(P.string.minLength(1), () => ({
+      user: {
+        name: {
+          contains: term,
+          mode: Prisma.QueryMode.insensitive,
+        },
+      },
+    }))
+    .otherwise(() => undefined);
+
+  const whereClause: Prisma.TeamMemberWhereInput = {
+    ...termFilters,
+    teamId: userTeam.id,
+  };
+
+  let orderByClause: Prisma.TeamMemberOrderByWithRelationInput = {
+    [orderByColumn]: orderByDirection,
+  };
+
+  // Name field is nested in the user so we have to handle it differently.
+  if (orderByColumn === 'name') {
+    orderByClause = {
+      user: {
+        name: orderByDirection,
+      },
+    };
+  }
+
+  const [data, count] = await Promise.all([
+    prisma.teamMember.findMany({
+      where: whereClause,
+      skip: Math.max(page - 1, 0) * perPage,
+      take: perPage,
+      orderBy: orderByClause,
+      include: {
+        user: {
+          select: {
+            name: true,
+            email: true,
+          },
+        },
+      },
+    }),
+    prisma.teamMember.count({
+      where: whereClause,
+    }),
+  ]);
+
+  return {
+    data,
+    count,
+    currentPage: Math.max(page, 1),
+    perPage,
+    totalPages: Math.ceil(count / perPage),
+  } satisfies FindResultSet<typeof data>;
+};
diff --git a/packages/lib/server-only/team/find-teams-pending.ts b/packages/lib/server-only/team/find-teams-pending.ts
new file mode 100644
index 000000000..d079c6f5f
--- /dev/null
+++ b/packages/lib/server-only/team/find-teams-pending.ts
@@ -0,0 +1,58 @@
+import { prisma } from '@documenso/prisma';
+import type { Team } from '@documenso/prisma/client';
+import { Prisma } from '@documenso/prisma/client';
+
+export interface FindTeamsPendingOptions {
+  userId: number;
+  term?: string;
+  page?: number;
+  perPage?: number;
+  orderBy?: {
+    column: keyof Team;
+    direction: 'asc' | 'desc';
+  };
+}
+
+export const findTeamsPending = async ({
+  userId,
+  term,
+  page = 1,
+  perPage = 10,
+  orderBy,
+}: FindTeamsPendingOptions) => {
+  const orderByColumn = orderBy?.column ?? 'name';
+  const orderByDirection = orderBy?.direction ?? 'desc';
+
+  const whereClause: Prisma.TeamPendingWhereInput = {
+    ownerUserId: userId,
+  };
+
+  if (term && term.length > 0) {
+    whereClause.name = {
+      contains: term,
+      mode: Prisma.QueryMode.insensitive,
+    };
+  }
+
+  const [data, count] = await Promise.all([
+    prisma.teamPending.findMany({
+      where: whereClause,
+      skip: Math.max(page - 1, 0) * perPage,
+      take: perPage,
+      orderBy: {
+        [orderByColumn]: orderByDirection,
+      },
+    }),
+    prisma.teamPending.count({
+      where: whereClause,
+    }),
+  ]);
+
+  return {
+    data,
+    count,
+    currentPage: Math.max(page, 1),
+    perPage,
+    totalPages: Math.ceil(count / perPage),
+  };
+};
diff --git a/packages/lib/server-only/team/find-teams.ts b/packages/lib/server-only/team/find-teams.ts
new file mode 100644
index 000000000..f5376a65d
--- /dev/null
+++ b/packages/lib/server-only/team/find-teams.ts
@@ -0,0 +1,76 @@
+import type { FindResultSet } from '@documenso/lib/types/find-result-set';
+import { prisma } from '@documenso/prisma';
+import type { Team } from '@documenso/prisma/client';
+import { Prisma } from '@documenso/prisma/client';
+
+export interface FindTeamsOptions {
+  userId: number;
+  term?: string;
+  page?: number;
+  perPage?: number;
+  orderBy?: {
+    column: keyof Team;
+    direction: 'asc' | 'desc';
+  };
+}
+
+export const findTeams = async ({
+  userId,
+  term,
+  page = 1,
+  perPage = 10,
+  orderBy,
+}: FindTeamsOptions) => {
+  const orderByColumn = orderBy?.column ?? 'name';
+  const orderByDirection = orderBy?.direction ?? 'desc';
+
+  const whereClause: Prisma.TeamWhereInput = {
+    members: {
+      some: {
+        userId,
+      },
+    },
+  };
+
+  if (term && term.length > 0) {
+    whereClause.name = {
+      contains: term,
+      mode: Prisma.QueryMode.insensitive,
+    };
+  }
+
+  const [data, count] = await Promise.all([
+    prisma.team.findMany({
+      where: whereClause,
+      skip: Math.max(page - 1, 0) * perPage,
+      take: perPage,
+      orderBy: {
+        [orderByColumn]: orderByDirection,
+      },
+      include: {
+        members: {
+          where: {
+            userId,
+          },
+        },
+      },
+    }),
+    prisma.team.count({
+      where: whereClause,
+    }),
+  ]);
+
+  const maskedData = data.map((team) => ({
+    ...team,
+    currentTeamMember: team.members[0],
+    members: undefined,
+  }));
+
+  return {
+    data: maskedData,
+    count,
+    currentPage: Math.max(page, 1),
+    perPage,
+    totalPages: Math.ceil(count / perPage),
+  } satisfies FindResultSet<typeof maskedData>;
+};
diff --git a/packages/lib/server-only/team/get-team-email-by-email.ts b/packages/lib/server-only/team/get-team-email-by-email.ts
new file mode 100644
index 000000000..665694db4
--- /dev/null
+++ b/packages/lib/server-only/team/get-team-email-by-email.ts
@@ -0,0 +1,22 @@
+import { prisma } from '@documenso/prisma';
+
+export type GetTeamEmailByEmailOptions = {
+  email: string;
+};
+
+export const getTeamEmailByEmail = async ({ email }: GetTeamEmailByEmailOptions) => {
+  return await prisma.teamEmail.findFirst({
+    where: {
+      email,
+    },
+    include: {
+      team: {
+        select: {
+          id: true,
+          name: true,
+          url: true,
+        },
+      },
+    },
+  });
+};
diff --git a/packages/lib/server-only/team/get-team-invitations.ts b/packages/lib/server-only/team/get-team-invitations.ts
new file mode 100644
index 000000000..737f1b3f7
--- /dev/null
+++ b/packages/lib/server-only/team/get-team-invitations.ts
@@ -0,0 +1,22 @@
+import { prisma } from '@documenso/prisma';
+
+export type GetTeamInvitationsOptions = {
+  email: string;
+};
+
+export const getTeamInvitations = async ({ email }: GetTeamInvitationsOptions) => {
+  return await prisma.teamMemberInvite.findMany({
+    where: {
+      email,
+    },
+    include: {
+      team: {
+        select: {
+          id: true,
+          name: true,
+          url: true,
+        },
+      },
+    },
+  });
+};
diff --git a/packages/lib/server-only/team/get-team-members.ts b/packages/lib/server-only/team/get-team-members.ts
new file mode 100644
index 000000000..a29ed6e1d
--- /dev/null
+++ b/packages/lib/server-only/team/get-team-members.ts
@@ -0,0 +1,33 @@
+import { prisma } from '@documenso/prisma';
+
+export type GetTeamMembersOptions = {
+  userId: number;
+  teamId: number;
+};
+
+/**
+ * Get all team members for a given team.
+ */
+export const getTeamMembers = async ({ userId, teamId }: GetTeamMembersOptions) => {
+  return await prisma.teamMember.findMany({
+    where: {
+      team: {
+        id: teamId,
+        members: {
+          some: {
+            userId: userId,
+          },
+        },
+      },
+    },
+    include: {
+      user: {
+        select: {
+          id: true,
+          email: true,
+          name: true,
+        },
+      },
+    },
+  });
+};
diff --git a/packages/lib/server-only/team/get-team.ts b/packages/lib/server-only/team/get-team.ts
new file mode 100644
index 000000000..59331202e
--- /dev/null
+++ b/packages/lib/server-only/team/get-team.ts
@@ -0,0 +1,95 @@
+import { prisma } from '@documenso/prisma';
+import type { Prisma } from '@documenso/prisma/client';
+
+export type GetTeamByIdOptions = {
+  userId?: number;
+  teamId: number;
+};
+
+/**
+ * Get a team given a teamId.
+ *
+ * Provide an optional userId to check that the user is a member of the team.
+ */
+export const getTeamById = async ({ userId, teamId }: GetTeamByIdOptions) => {
+  const whereFilter: Prisma.TeamWhereUniqueInput = {
+    id: teamId,
+  };
+
+  if (userId !== undefined) {
+    whereFilter['members'] = {
+      some: {
+        userId,
+      },
+    };
+  }
+
+  const result = await prisma.team.findUniqueOrThrow({
+    where: whereFilter,
+    include: {
+      teamEmail: true,
+      members: {
+        where: {
+          userId,
+        },
+        select: {
+          role: true,
+        },
+      },
+    },
+  });
+
+  const { members, ...team } = result;
+
+  return {
+    ...team,
+    currentTeamMember: userId !== undefined ? members[0] : null,
+  };
+};
+
+export type GetTeamByUrlOptions = {
+  userId: number;
+  teamUrl: string;
+};
+
+/**
+ * Get a team given a team URL.
+ */
+export const getTeamByUrl = async ({ userId, teamUrl }: GetTeamByUrlOptions) => {
+  const whereFilter: Prisma.TeamWhereUniqueInput = {
+    url: teamUrl,
+  };
+
+  if (userId !== undefined) {
+    whereFilter['members'] = {
+      some: {
+        userId,
+      },
+    };
+  }
+
+  const result = await prisma.team.findUniqueOrThrow({
+    where: whereFilter,
+    include: {
+      teamEmail: true,
+      emailVerification: true,
+      transferVerification: true,
+      subscription: true,
+      members: {
+        where: {
+          userId,
+        },
+        select: {
+          role: true,
+        },
+      },
+    },
+  });
+
+  const { members, ...team } = result;
+
+  return {
+    ...team,
+    currentTeamMember: members[0],
+  };
+};
diff --git a/packages/lib/server-only/team/get-teams.ts b/packages/lib/server-only/team/get-teams.ts
new file mode 100644
index 000000000..57a9fb83e
--- /dev/null
+++ b/packages/lib/server-only/team/get-teams.ts
@@ -0,0 +1,33 @@
+import { prisma } from '@documenso/prisma';
+
+export type GetTeamsOptions = {
+  userId: number;
+};
+export type GetTeamsResponse = Awaited<ReturnType<typeof getTeams>>;
+
+export const getTeams = async ({ userId }: GetTeamsOptions) => {
+  const teams = await prisma.team.findMany({
+    where: {
+      members: {
+        some: {
+          userId,
+        },
+      },
+    },
+    include: {
+      members: {
+        where: {
+          userId,
+        },
+        select: {
+          role: true,
+        },
+      },
+    },
+  });
+
+  return teams.map(({ members, ...team }) => ({
+    ...team,
+    currentTeamMember: members[0],
+  }));
+};
diff --git a/packages/lib/server-only/team/leave-team.ts b/packages/lib/server-only/team/leave-team.ts
new file mode 100644
index 000000000..d0c6fe145
--- /dev/null
+++ b/packages/lib/server-only/team/leave-team.ts
@@ -0,0 +1,59 @@
+import { updateSubscriptionItemQuantity } from '@documenso/ee/server-only/stripe/update-subscription-item-quantity';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { prisma } from '@documenso/prisma';
+
+export type LeaveTeamOptions = {
+  /**
+   * The ID of the user who is leaving the team.
+   */
+  userId: number;
+
+  /**
+   * The ID of the team the user is leaving.
+   */
+  teamId: number;
+};
+
+export const leaveTeam = async ({ userId, teamId }: LeaveTeamOptions) => {
+  await prisma.$transaction(async (tx) => {
+    const team = await tx.team.findFirstOrThrow({
+      where: {
+        id: teamId,
+        ownerUserId: {
+          not: userId,
+        },
+      },
+      include: {
+        subscription: true,
+      },
+    });
+
+    await tx.teamMember.delete({
+      where: {
+        userId_teamId: {
+          userId,
+          teamId,
+        },
+        team: {
+          ownerUserId: {
+            not: userId,
+          },
+        },
+      },
+    });
+
+    if (IS_BILLING_ENABLED && team.subscription) {
+      const numberOfSeats = await tx.teamMember.count({
+        where: {
+          teamId,
+        },
+      });
+
+      await updateSubscriptionItemQuantity({
+        priceId: team.subscription.priceId,
+        subscriptionId: team.subscription.planId,
+        quantity: numberOfSeats,
+      });
+    }
+  });
+};
diff --git a/packages/lib/server-only/team/request-team-ownership-transfer.ts b/packages/lib/server-only/team/request-team-ownership-transfer.ts
new file mode 100644
index 000000000..7da976ee1
--- /dev/null
+++ b/packages/lib/server-only/team/request-team-ownership-transfer.ts
@@ -0,0 +1,106 @@
+import { createElement } from 'react';
+
+import { mailer } from '@documenso/email/mailer';
+import { render } from '@documenso/email/render';
+import { TeamTransferRequestTemplate } from '@documenso/email/templates/team-transfer-request';
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { FROM_ADDRESS, FROM_NAME } from '@documenso/lib/constants/email';
+import { createTokenVerification } from '@documenso/lib/utils/token-verification';
+import { prisma } from '@documenso/prisma';
+
+export type RequestTeamOwnershipTransferOptions = {
+  /**
+   * The ID of the user initiating the transfer.
+   */
+  userId: number;
+
+  /**
+   * The name of the user initiating the transfer.
+   */
+  userName: string;
+
+  /**
+   * The ID of the team whose ownership is being transferred.
+   */
+  teamId: number;
+
+  /**
+   * The user ID of the new owner.
+   */
+  newOwnerUserId: number;
+
+  /**
+   * Whether to clear any current payment methods attached to the team.
+   */
+  clearPaymentMethods: boolean;
+};
+
+export const requestTeamOwnershipTransfer = async ({
+  userId,
+  userName,
+  teamId,
+  newOwnerUserId,
+}: RequestTeamOwnershipTransferOptions) => {
+  // Todo: Clear payment methods disabled for now.
+  const clearPaymentMethods = false;
+
+  await prisma.$transaction(async (tx) => {
+    const team = await tx.team.findFirstOrThrow({
+      where: {
+        id: teamId,
+        ownerUserId: userId,
+        members: {
+          some: {
+            userId: newOwnerUserId,
+          },
+        },
+      },
+    });
+
+    const newOwnerUser = await tx.user.findFirstOrThrow({
+      where: {
+        id: newOwnerUserId,
+      },
+    });
+
+    const { token, expiresAt } = createTokenVerification({ minute: 10 });
+
+    const teamVerificationPayload = {
+      teamId,
+      token,
+      expiresAt,
+      userId: newOwnerUserId,
+      name: newOwnerUser.name ?? '',
+      email: newOwnerUser.email,
+      clearPaymentMethods,
+    };
+
+    await tx.teamTransferVerification.upsert({
+      where: {
+        teamId,
+      },
+      create: teamVerificationPayload,
+      update: teamVerificationPayload,
+    });
+
+    const template = createElement(TeamTransferRequestTemplate, {
+      assetBaseUrl: WEBAPP_BASE_URL,
+      baseUrl: WEBAPP_BASE_URL,
+      senderName: userName,
+      teamName: team.name,
+      teamUrl: team.url,
+      token,
+    });
+
+    await mailer.sendMail({
+      to: newOwnerUser.email,
+      from: {
+        name: FROM_NAME,
+        address: FROM_ADDRESS,
+      },
+      subject: `You have been requested to take ownership of team ${team.name} on Documenso`,
+      html: render(template),
+      text: render(template, { plainText: true }),
+    });
+  });
+};
diff --git a/packages/lib/server-only/team/resend-team-email-verification.ts b/packages/lib/server-only/team/resend-team-email-verification.ts
new file mode 100644
index 000000000..55afe61ce
--- /dev/null
+++ b/packages/lib/server-only/team/resend-team-email-verification.ts
@@ -0,0 +1,65 @@
+import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '@documenso/lib/constants/teams';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { createTokenVerification } from '@documenso/lib/utils/token-verification';
+import { prisma } from '@documenso/prisma';
+
+import { sendTeamEmailVerificationEmail } from './create-team-email-verification';
+
+export type ResendTeamMemberInvitationOptions = {
+  userId: number;
+  teamId: number;
+};
+
+/**
+ * Resend a team email verification with a new token.
+ */
+export const resendTeamEmailVerification = async ({
+  userId,
+  teamId,
+}: ResendTeamMemberInvitationOptions) => {
+  await prisma.$transaction(async (tx) => {
+    const team = await tx.team.findUniqueOrThrow({
+      where: {
+        id: teamId,
+        members: {
+          some: {
+            userId,
+            role: {
+              in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_TEAM'],
+            },
+          },
+        },
+      },
+      include: {
+        emailVerification: true,
+      },
+    });
+
+    if (!team) {
+      throw new AppError('TeamNotFound', 'User is not a member of the team.');
+    }
+
+    const { emailVerification } = team;
+
+    if (!emailVerification) {
+      throw new AppError(
+        'VerificationNotFound',
+        'No team email verification exists for this team.',
+      );
+    }
+
+    const { token, expiresAt } = createTokenVerification({ hours: 1 });
+
+    await tx.teamEmailVerification.update({
+      where: {
+        teamId,
+      },
+      data: {
+        token,
+        expiresAt,
+      },
+    });
+
+    await sendTeamEmailVerificationEmail(emailVerification.email, token, team.name, team.url);
+  });
+};
diff --git a/packages/lib/server-only/team/resend-team-member-invitation.ts b/packages/lib/server-only/team/resend-team-member-invitation.ts
new file mode 100644
index 000000000..fb860ccc0
--- /dev/null
+++ b/packages/lib/server-only/team/resend-team-member-invitation.ts
@@ -0,0 +1,76 @@
+import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '@documenso/lib/constants/teams';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { prisma } from '@documenso/prisma';
+
+import { sendTeamMemberInviteEmail } from './create-team-member-invites';
+
+export type ResendTeamMemberInvitationOptions = {
+  /**
+   * The ID of the user who is initiating this action.
+   */
+  userId: number;
+
+  /**
+   * The name of the user who is initiating this action.
+   */
+  userName: string;
+
+  /**
+   * The ID of the team.
+   */
+  teamId: number;
+
+  /**
+   * The IDs of the invitations to resend.
+   */
+  invitationId: number;
+};
+
+/**
+ * Resend an email for a given team member invite.
+ */
+export const resendTeamMemberInvitation = async ({
+  userId,
+  userName,
+  teamId,
+  invitationId,
+}: ResendTeamMemberInvitationOptions) => {
+  await prisma.$transaction(async (tx) => {
+    const team = await tx.team.findUniqueOrThrow({
+      where: {
+        id: teamId,
+        members: {
+          some: {
+            userId,
+            role: {
+              in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_TEAM'],
+            },
+          },
+        },
+      },
+    });
+
+    if (!team) {
+      throw new AppError('TeamNotFound', 'User is not a valid member of the team.');
+    }
+
+    const teamMemberInvite = await tx.teamMemberInvite.findUniqueOrThrow({
+      where: {
+        id: invitationId,
+        teamId,
+      },
+    });
+
+    if (!teamMemberInvite) {
+      throw new AppError('InviteNotFound', 'No invite exists for this user.');
+    }
+
+    await sendTeamMemberInviteEmail({
+      email: teamMemberInvite.email,
+      token: teamMemberInvite.token,
+      teamName: team.name,
+      teamUrl: team.url,
+      senderName: userName,
+    });
+  });
+};
diff --git a/packages/lib/server-only/team/transfer-team-ownership.ts b/packages/lib/server-only/team/transfer-team-ownership.ts
new file mode 100644
index 000000000..bb14eec55
--- /dev/null
+++ b/packages/lib/server-only/team/transfer-team-ownership.ts
@@ -0,0 +1,88 @@
+import type Stripe from 'stripe';
+
+import { transferTeamSubscription } from '@documenso/ee/server-only/stripe/transfer-team-subscription';
+import { mapStripeSubscriptionToPrismaUpsertAction } from '@documenso/ee/server-only/stripe/webhook/on-subscription-updated';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { prisma } from '@documenso/prisma';
+import { TeamMemberRole } from '@documenso/prisma/client';
+
+export type TransferTeamOwnershipOptions = {
+  token: string;
+};
+
+export const transferTeamOwnership = async ({ token }: TransferTeamOwnershipOptions) => {
+  await prisma.$transaction(async (tx) => {
+    const teamTransferVerification = await tx.teamTransferVerification.findFirstOrThrow({
+      where: {
+        token,
+      },
+      include: {
+        team: {
+          include: {
+            subscription: true,
+          },
+        },
+      },
+    });
+
+    const { team, userId: newOwnerUserId } = teamTransferVerification;
+
+    await tx.teamTransferVerification.delete({
+      where: {
+        teamId: team.id,
+      },
+    });
+
+    const newOwnerUser = await tx.user.findFirstOrThrow({
+      where: {
+        id: newOwnerUserId,
+        teamMembers: {
+          some: {
+            teamId: team.id,
+          },
+        },
+      },
+      include: {
+        Subscription: true,
+      },
+    });
+
+    let teamSubscription: Stripe.Subscription | null = null;
+
+    if (IS_BILLING_ENABLED) {
+      teamSubscription = await transferTeamSubscription({
+        user: newOwnerUser,
+        team,
+        clearPaymentMethods: teamTransferVerification.clearPaymentMethods,
+      });
+    }
+
+    if (teamSubscription) {
+      await tx.subscription.upsert(
+        mapStripeSubscriptionToPrismaUpsertAction(teamSubscription, undefined, team.id),
+      );
+    }
+
+    await tx.team.update({
+      where: {
+        id: team.id,
+      },
+      data: {
+        ownerUserId: newOwnerUserId,
+        members: {
+          update: {
+            where: {
+              userId_teamId: {
+                teamId: team.id,
+                userId: newOwnerUserId,
+              },
+            },
+            data: {
+              role: TeamMemberRole.ADMIN,
+            },
+          },
+        },
+      },
+    });
+  });
+};
diff --git a/packages/lib/server-only/team/update-team-email.ts b/packages/lib/server-only/team/update-team-email.ts
new file mode 100644
index 000000000..05023efc7
--- /dev/null
+++ b/packages/lib/server-only/team/update-team-email.ts
@@ -0,0 +1,42 @@
+import { prisma } from '@documenso/prisma';
+
+import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '../../constants/teams';
+
+export type UpdateTeamEmailOptions = {
+  userId: number;
+  teamId: number;
+  data: {
+    name: string;
+  };
+};
+
+export const updateTeamEmail = async ({ userId, teamId, data }: UpdateTeamEmailOptions) => {
+  await prisma.$transaction(async (tx) => {
+    await tx.team.findFirstOrThrow({
+      where: {
+        id: teamId,
+        members: {
+          some: {
+            userId,
+            role: {
+              in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_TEAM'],
+            },
+          },
+        },
+        teamEmail: {
+          isNot: null,
+        },
+      },
+    });
+
+    await tx.teamEmail.update({
+      where: {
+        teamId,
+      },
+      data: {
+        // Note: Never allow the email to be updated without re-verifying via email.
+        name: data.name,
+      },
+    });
+  });
+};
diff --git a/packages/lib/server-only/team/update-team-member.ts b/packages/lib/server-only/team/update-team-member.ts
new file mode 100644
index 000000000..9a4a85f85
--- /dev/null
+++ b/packages/lib/server-only/team/update-team-member.ts
@@ -0,0 +1,92 @@
+import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '@documenso/lib/constants/teams';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { isTeamRoleWithinUserHierarchy } from '@documenso/lib/utils/teams';
+import { prisma } from '@documenso/prisma';
+import type { TeamMemberRole } from '@documenso/prisma/client';
+
+export type UpdateTeamMemberOptions = {
+  userId: number;
+  teamId: number;
+  teamMemberId: number;
+  data: {
+    role: TeamMemberRole;
+  };
+};
+
+export const updateTeamMember = async ({
+  userId,
+  teamId,
+  teamMemberId,
+  data,
+}: UpdateTeamMemberOptions) => {
+  await prisma.$transaction(async (tx) => {
+    // Find the team and validate that the user is allowed to update members.
+    const team = await tx.team.findFirstOrThrow({
+      where: {
+        id: teamId,
+        members: {
+          some: {
+            userId,
+            role: {
+              in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_TEAM'],
+            },
+          },
+        },
+      },
+      include: {
+        members: {
+          select: {
+            id: true,
+            userId: true,
+            role: true,
+          },
+        },
+      },
+    });
+
+    const currentTeamMember = team.members.find((member) => member.userId === userId);
+    const teamMemberToUpdate = team.members.find((member) => member.id === teamMemberId);
+
+    if (!teamMemberToUpdate || !currentTeamMember) {
+      throw new AppError(AppErrorCode.NOT_FOUND, 'Team member does not exist');
+    }
+
+    if (teamMemberToUpdate.userId === team.ownerUserId) {
+      throw new AppError(AppErrorCode.UNAUTHORIZED, 'Cannot update the owner');
+    }
+
+    const isMemberToUpdateHigherRole = !isTeamRoleWithinUserHierarchy(
+      currentTeamMember.role,
+      teamMemberToUpdate.role,
+    );
+
+    if (isMemberToUpdateHigherRole) {
+      throw new AppError(AppErrorCode.UNAUTHORIZED, 'Cannot update a member with a higher role');
+    }
+
+    const isNewMemberRoleHigherThanCurrentRole = !isTeamRoleWithinUserHierarchy(
+      currentTeamMember.role,
+      data.role,
+    );
+
+    if (isNewMemberRoleHigherThanCurrentRole) {
+      throw new AppError(
+        AppErrorCode.UNAUTHORIZED,
+        'Cannot give a member a role higher than the user initating the update',
+      );
+    }
+
+    return await tx.teamMember.update({
+      where: {
+        id: teamMemberId,
+        teamId,
+        userId: {
+          not: team.ownerUserId,
+        },
+      },
+      data: {
+        role: data.role,
+      },
+    });
+  });
+};
diff --git a/packages/lib/server-only/team/update-team.ts b/packages/lib/server-only/team/update-team.ts
new file mode 100644
index 000000000..b172d3359
--- /dev/null
+++ b/packages/lib/server-only/team/update-team.ts
@@ -0,0 +1,65 @@
+import { z } from 'zod';
+
+import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '@documenso/lib/constants/teams';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { prisma } from '@documenso/prisma';
+import { Prisma } from '@documenso/prisma/client';
+
+export type UpdateTeamOptions = {
+  userId: number;
+  teamId: number;
+  data: {
+    name?: string;
+    url?: string;
+  };
+};
+
+export const updateTeam = async ({ userId, teamId, data }: UpdateTeamOptions) => {
+  try {
+    await prisma.$transaction(async (tx) => {
+      const foundPendingTeamWithUrl = await tx.teamPending.findFirst({
+        where: {
+          url: data.url,
+        },
+      });
+
+      if (foundPendingTeamWithUrl) {
+        throw new AppError(AppErrorCode.ALREADY_EXISTS, 'Team URL already exists.');
+      }
+
+      const team = await tx.team.update({
+        where: {
+          id: teamId,
+          members: {
+            some: {
+              userId,
+              role: {
+                in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_TEAM'],
+              },
+            },
+          },
+        },
+        data: {
+          url: data.url,
+          name: data.name,
+        },
+      });
+
+      return team;
+    });
+  } catch (err) {
+    console.error(err);
+
+    if (!(err instanceof Prisma.PrismaClientKnownRequestError)) {
+      throw err;
+    }
+
+    const target = z.array(z.string()).safeParse(err.meta?.target);
+
+    if (err.code === 'P2002' && target.success && target.data.includes('url')) {
+      throw new AppError(AppErrorCode.ALREADY_EXISTS, 'Team URL already exists.');
+    }
+
+    throw err;
+  }
+};
diff --git a/packages/lib/server-only/user/create-user.ts b/packages/lib/server-only/user/create-user.ts
index f7db60c85..42a9f128c 100644
--- a/packages/lib/server-only/user/create-user.ts
+++ b/packages/lib/server-only/user/create-user.ts
@@ -1,11 +1,12 @@
 import { hash } from 'bcrypt';
 
 import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
+import { updateSubscriptionItemQuantity } from '@documenso/ee/server-only/stripe/update-subscription-item-quantity';
 import { prisma } from '@documenso/prisma';
-import { IdentityProvider } from '@documenso/prisma/client';
+import { IdentityProvider, Prisma, TeamMemberInviteStatus } from '@documenso/prisma/client';
 
+import { IS_BILLING_ENABLED } from '../../constants/app';
 import { SALT_ROUNDS } from '../../constants/auth';
-import { getFlag } from '../../universal/get-feature-flag';
 
 export interface CreateUserOptions {
   name: string;
@@ -15,8 +16,6 @@ export interface CreateUserOptions {
 }
 
 export const createUser = async ({ name, email, password, signature }: CreateUserOptions) => {
-  const isBillingEnabled = await getFlag('app_billing');
-
   const hashedPassword = await hash(password, SALT_ROUNDS);
 
   const userExists = await prisma.user.findFirst({
@@ -29,7 +28,7 @@ export const createUser = async ({ name, email, password, signature }: CreateUse
     throw new Error('User already exists');
   }
 
-  let user = await prisma.user.create({
+  const user = await prisma.user.create({
     data: {
       name,
       email: email.toLowerCase(),
@@ -39,12 +38,81 @@ export const createUser = async ({ name, email, password, signature }: CreateUse
     },
   });
 
-  if (isBillingEnabled) {
+  const acceptedTeamInvites = await prisma.teamMemberInvite.findMany({
+    where: {
+      email: {
+        equals: email,
+        mode: Prisma.QueryMode.insensitive,
+      },
+      status: TeamMemberInviteStatus.ACCEPTED,
+    },
+  });
+
+  // For each team invite, add the user to the team and delete the team invite.
+  // If an error occurs, reset the invitation to not accepted.
+  await Promise.allSettled(
+    acceptedTeamInvites.map(async (invite) =>
+      prisma
+        .$transaction(async (tx) => {
+          await tx.teamMember.create({
+            data: {
+              teamId: invite.teamId,
+              userId: user.id,
+              role: invite.role,
+            },
+          });
+
+          await tx.teamMemberInvite.delete({
+            where: {
+              id: invite.id,
+            },
+          });
+
+          if (!IS_BILLING_ENABLED) {
+            return;
+          }
+
+          const team = await tx.team.findFirstOrThrow({
+            where: {
+              id: invite.teamId,
+            },
+            include: {
+              members: {
+                select: {
+                  id: true,
+                },
+              },
+              subscription: true,
+            },
+          });
+
+          if (team.subscription) {
+            await updateSubscriptionItemQuantity({
+              priceId: team.subscription.priceId,
+              subscriptionId: team.subscription.planId,
+              quantity: team.members.length,
+            });
+          }
+        })
+        .catch(async () => {
+          await prisma.teamMemberInvite.update({
+            where: {
+              id: invite.id,
+            },
+            data: {
+              status: TeamMemberInviteStatus.PENDING,
+            },
+          });
+        }),
+    ),
+  );
+
+  // Update the user record with a new or existing Stripe customer record.
+  if (IS_BILLING_ENABLED) {
     try {
-      const stripeSession = await getStripeCustomerByUser(user);
-      user = stripeSession.user;
-    } catch (e) {
-      console.error(e);
+      return await getStripeCustomerByUser(user).then((session) => session.user);
+    } catch (err) {
+      console.error(err);
     }
   }
 
diff --git a/packages/lib/utils/billing.ts b/packages/lib/utils/billing.ts
new file mode 100644
index 000000000..ca85addbb
--- /dev/null
+++ b/packages/lib/utils/billing.ts
@@ -0,0 +1,16 @@
+import type { Subscription } from '.prisma/client';
+import { SubscriptionStatus } from '.prisma/client';
+
+/**
+ * Returns true if there is a subscription that is active and is a community plan.
+ */
+export const subscriptionsContainsActiveCommunityPlan = (
+  subscriptions: Subscription[],
+  communityPlanPriceIds: string[],
+) => {
+  return subscriptions.some(
+    (subscription) =>
+      subscription.status === SubscriptionStatus.ACTIVE &&
+      communityPlanPriceIds.includes(subscription.priceId),
+  );
+};
diff --git a/packages/lib/utils/params.ts b/packages/lib/utils/params.ts
new file mode 100644
index 000000000..a8d799400
--- /dev/null
+++ b/packages/lib/utils/params.ts
@@ -0,0 +1,30 @@
+/**
+ * From an unknown string, parse it into an integer array.
+ *
+ * Filter out unknown values.
+ */
+export const parseToIntegerArray = (value: unknown): number[] => {
+  if (typeof value !== 'string') {
+    return [];
+  }
+
+  return value
+    .split(',')
+    .map((value) => parseInt(value, 10))
+    .filter((value) => !isNaN(value));
+};
+
+type GetRootHrefOptions = {
+  returnEmptyRootString?: boolean;
+};
+
+export const getRootHref = (
+  params: Record<string, string | string[]> | null,
+  options: GetRootHrefOptions = {},
+) => {
+  if (typeof params?.teamUrl === 'string') {
+    return `/t/${params.teamUrl}`;
+  }
+
+  return options.returnEmptyRootString ? '' : '/';
+};
diff --git a/packages/lib/utils/recipient-formatter.ts b/packages/lib/utils/recipient-formatter.ts
index 2e2bace3b..5fad45399 100644
--- a/packages/lib/utils/recipient-formatter.ts
+++ b/packages/lib/utils/recipient-formatter.ts
@@ -1,6 +1,6 @@
 import type { Recipient } from '@documenso/prisma/client';
 
-export const recipientInitials = (text: string) =>
+export const extractInitials = (text: string) =>
   text
     .split(' ')
     .map((name: string) => name.slice(0, 1).toUpperCase())
@@ -8,5 +8,5 @@ export const recipientInitials = (text: string) =>
     .join('');
 
 export const recipientAbbreviation = (recipient: Recipient) => {
-  return recipientInitials(recipient.name) || recipient.email.slice(0, 1).toUpperCase();
+  return extractInitials(recipient.name) || recipient.email.slice(0, 1).toUpperCase();
 };
diff --git a/packages/lib/utils/teams.ts b/packages/lib/utils/teams.ts
new file mode 100644
index 000000000..eb9be2c2b
--- /dev/null
+++ b/packages/lib/utils/teams.ts
@@ -0,0 +1,42 @@
+import { WEBAPP_BASE_URL } from '../constants/app';
+import type { TEAM_MEMBER_ROLE_MAP } from '../constants/teams';
+import { TEAM_MEMBER_ROLE_HIERARCHY, TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '../constants/teams';
+
+export const formatTeamUrl = (teamUrl: string, baseUrl?: string) => {
+  const formattedBaseUrl = (baseUrl ?? WEBAPP_BASE_URL).replace(/https?:\/\//, '');
+
+  return `${formattedBaseUrl}/t/${teamUrl}`;
+};
+
+export const formatDocumentsPath = (teamUrl?: string) => {
+  return teamUrl ? `/t/${teamUrl}/documents` : '/documents';
+};
+
+/**
+ * Determines whether a team member can execute a given action.
+ *
+ * @param action The action the user is trying to execute.
+ * @param role The current role of the user.
+ * @returns Whether the user can execute the action.
+ */
+export const canExecuteTeamAction = (
+  action: keyof typeof TEAM_MEMBER_ROLE_PERMISSIONS_MAP,
+  role: keyof typeof TEAM_MEMBER_ROLE_MAP,
+) => {
+  return TEAM_MEMBER_ROLE_PERMISSIONS_MAP[action].some((i) => i === role);
+};
+
+/**
+ * Compares the provided `currentUserRole` with the provided `roleToCheck` to determine
+ * whether the `currentUserRole` has permission to modify the `roleToCheck`.
+ *
+ * @param currentUserRole Role of the current user
+ * @param roleToCheck Role of another user to see if the current user can modify
+ * @returns True if the current user can modify the other user, false otherwise
+ */
+export const isTeamRoleWithinUserHierarchy = (
+  currentUserRole: keyof typeof TEAM_MEMBER_ROLE_MAP,
+  roleToCheck: keyof typeof TEAM_MEMBER_ROLE_MAP,
+) => {
+  return TEAM_MEMBER_ROLE_HIERARCHY[currentUserRole].some((i) => i === roleToCheck);
+};
diff --git a/packages/lib/utils/token-verification.ts b/packages/lib/utils/token-verification.ts
new file mode 100644
index 000000000..c57ddd1e5
--- /dev/null
+++ b/packages/lib/utils/token-verification.ts
@@ -0,0 +1,21 @@
+import type { DurationLike } from 'luxon';
+import { DateTime } from 'luxon';
+import { nanoid } from 'nanoid';
+
+/**
+ * Create a token verification object.
+ *
+ * @param expiry The date the token expires, or the duration until the token expires.
+ */
+export const createTokenVerification = (expiry: Date | DurationLike) => {
+  const expiresAt = expiry instanceof Date ? expiry : DateTime.now().plus(expiry).toJSDate();
+
+  return {
+    expiresAt,
+    token: nanoid(32),
+  };
+};
+
+export const isTokenExpired = (expiresAt: Date) => {
+  return expiresAt < new Date();
+};
diff --git a/packages/prisma/migrations/20240205040421_add_teams/migration.sql b/packages/prisma/migrations/20240205040421_add_teams/migration.sql
new file mode 100644
index 000000000..f80799aab
--- /dev/null
+++ b/packages/prisma/migrations/20240205040421_add_teams/migration.sql
@@ -0,0 +1,187 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[teamId]` on the table `Subscription` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateEnum
+CREATE TYPE "TeamMemberRole" AS ENUM ('ADMIN', 'MANAGER', 'MEMBER');
+
+-- CreateEnum
+CREATE TYPE "TeamMemberInviteStatus" AS ENUM ('ACCEPTED', 'PENDING');
+
+-- AlterTable
+ALTER TABLE "Document" ADD COLUMN     "teamId" INTEGER;
+
+-- AlterTable
+ALTER TABLE "Subscription" ADD COLUMN     "teamId" INTEGER,
+ALTER COLUMN "userId" DROP NOT NULL;
+
+-- CreateTable
+CREATE TABLE "Team" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "url" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "customerId" TEXT,
+    "ownerUserId" INTEGER NOT NULL,
+
+    CONSTRAINT "Team_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "TeamPending" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "url" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "customerId" TEXT NOT NULL,
+    "ownerUserId" INTEGER NOT NULL,
+
+    CONSTRAINT "TeamPending_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "TeamMember" (
+    "id" SERIAL NOT NULL,
+    "teamId" INTEGER NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "role" "TeamMemberRole" NOT NULL,
+    "userId" INTEGER NOT NULL,
+
+    CONSTRAINT "TeamMember_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "TeamEmail" (
+    "teamId" INTEGER NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "name" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+
+    CONSTRAINT "TeamEmail_pkey" PRIMARY KEY ("teamId")
+);
+
+-- CreateTable
+CREATE TABLE "TeamEmailVerification" (
+    "teamId" INTEGER NOT NULL,
+    "name" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "token" TEXT NOT NULL,
+    "expiresAt" TIMESTAMP(3) NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "TeamEmailVerification_pkey" PRIMARY KEY ("teamId")
+);
+
+-- CreateTable
+CREATE TABLE "TeamTransferVerification" (
+    "teamId" INTEGER NOT NULL,
+    "userId" INTEGER NOT NULL,
+    "name" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "token" TEXT NOT NULL,
+    "expiresAt" TIMESTAMP(3) NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "clearPaymentMethods" BOOLEAN NOT NULL DEFAULT false,
+
+    CONSTRAINT "TeamTransferVerification_pkey" PRIMARY KEY ("teamId")
+);
+
+-- CreateTable
+CREATE TABLE "TeamMemberInvite" (
+    "id" SERIAL NOT NULL,
+    "teamId" INTEGER NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "email" TEXT NOT NULL,
+    "status" "TeamMemberInviteStatus" NOT NULL DEFAULT 'PENDING',
+    "role" "TeamMemberRole" NOT NULL,
+    "token" TEXT NOT NULL,
+
+    CONSTRAINT "TeamMemberInvite_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Team_url_key" ON "Team"("url");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Team_customerId_key" ON "Team"("customerId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TeamPending_url_key" ON "TeamPending"("url");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TeamPending_customerId_key" ON "TeamPending"("customerId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TeamMember_userId_teamId_key" ON "TeamMember"("userId", "teamId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TeamEmail_teamId_key" ON "TeamEmail"("teamId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TeamEmail_email_key" ON "TeamEmail"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TeamEmailVerification_teamId_key" ON "TeamEmailVerification"("teamId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TeamEmailVerification_token_key" ON "TeamEmailVerification"("token");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TeamTransferVerification_teamId_key" ON "TeamTransferVerification"("teamId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TeamTransferVerification_token_key" ON "TeamTransferVerification"("token");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TeamMemberInvite_token_key" ON "TeamMemberInvite"("token");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TeamMemberInvite_teamId_email_key" ON "TeamMemberInvite"("teamId", "email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Subscription_teamId_key" ON "Subscription"("teamId");
+
+-- AddForeignKey
+ALTER TABLE "Subscription" ADD CONSTRAINT "Subscription_teamId_fkey" FOREIGN KEY ("teamId") REFERENCES "Team"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Document" ADD CONSTRAINT "Document_teamId_fkey" FOREIGN KEY ("teamId") REFERENCES "Team"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Team" ADD CONSTRAINT "Team_ownerUserId_fkey" FOREIGN KEY ("ownerUserId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "TeamPending" ADD CONSTRAINT "TeamPending_ownerUserId_fkey" FOREIGN KEY ("ownerUserId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "TeamMember" ADD CONSTRAINT "TeamMember_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "TeamMember" ADD CONSTRAINT "TeamMember_teamId_fkey" FOREIGN KEY ("teamId") REFERENCES "Team"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "TeamEmail" ADD CONSTRAINT "TeamEmail_teamId_fkey" FOREIGN KEY ("teamId") REFERENCES "Team"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "TeamEmailVerification" ADD CONSTRAINT "TeamEmailVerification_teamId_fkey" FOREIGN KEY ("teamId") REFERENCES "Team"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "TeamTransferVerification" ADD CONSTRAINT "TeamTransferVerification_teamId_fkey" FOREIGN KEY ("teamId") REFERENCES "Team"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "TeamMemberInvite" ADD CONSTRAINT "TeamMemberInvite_teamId_fkey" FOREIGN KEY ("teamId") REFERENCES "Team"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+ALTER TABLE "Subscription"
+ADD CONSTRAINT teamId_or_userId_check
+CHECK (
+  (
+    "teamId" IS NOT NULL
+    AND "userId" IS NULL
+  )
+  OR (
+    "teamId" IS NULL
+    AND "userId" IS NOT NULL
+  )
+);
diff --git a/packages/prisma/package.json b/packages/prisma/package.json
index 2fb01a6ac..301b51dba 100644
--- a/packages/prisma/package.json
+++ b/packages/prisma/package.json
@@ -21,7 +21,8 @@
     "@prisma/client": "5.4.2",
     "dotenv": "^16.3.1",
     "dotenv-cli": "^7.3.0",
-    "prisma": "5.4.2"
+    "prisma": "5.4.2",
+    "ts-pattern": "^5.0.6"
   },
   "devDependencies": {
     "ts-node": "^10.9.1",
diff --git a/packages/prisma/schema.prisma b/packages/prisma/schema.prisma
index 87d29d6b2..79dcdf6aa 100644
--- a/packages/prisma/schema.prisma
+++ b/packages/prisma/schema.prisma
@@ -37,6 +37,9 @@ model User {
   Document             Document[]
   Subscription         Subscription[]
   PasswordResetToken   PasswordResetToken[]
+  ownedTeams           Team[]
+  ownedPendingTeams    TeamPending[]
+  teamMembers          TeamMember[]
   twoFactorSecret      String?
   twoFactorEnabled     Boolean              @default(false)
   twoFactorBackupCodes String?
@@ -103,12 +106,14 @@ model Subscription {
   planId            String             @unique
   priceId           String
   periodEnd         DateTime?
-  userId            Int
+  userId            Int?
+  teamId            Int?               @unique
   createdAt         DateTime           @default(now())
   updatedAt         DateTime           @updatedAt
   cancelAtPeriodEnd Boolean            @default(false)
 
-  User User @relation(fields: [userId], references: [id], onDelete: Cascade)
+  team Team? @relation(fields: [teamId], references: [id], onDelete: Cascade)
+  User User? @relation(fields: [userId], references: [id], onDelete: Cascade)
 
   @@index([userId])
 }
@@ -162,6 +167,8 @@ model Document {
   updatedAt      DateTime            @default(now()) @updatedAt
   completedAt    DateTime?
   deletedAt      DateTime?
+  teamId         Int?
+  team           Team?               @relation(fields: [teamId], references: [id])
 
   @@unique([documentDataId])
   @@index([userId])
@@ -300,6 +307,104 @@ model DocumentShareLink {
   @@unique([documentId, email])
 }
 
+enum TeamMemberRole {
+  ADMIN
+  MANAGER
+  MEMBER
+}
+
+enum TeamMemberInviteStatus {
+  ACCEPTED
+  PENDING
+}
+
+model Team {
+  id                   Int                       @id @default(autoincrement())
+  name                 String
+  url                  String                    @unique
+  createdAt            DateTime                  @default(now())
+  customerId           String?                   @unique
+  ownerUserId          Int
+  members              TeamMember[]
+  invites              TeamMemberInvite[]
+  teamEmail            TeamEmail?
+  emailVerification    TeamEmailVerification?
+  transferVerification TeamTransferVerification?
+
+  owner        User          @relation(fields: [ownerUserId], references: [id])
+  subscription Subscription?
+
+  document Document[]
+}
+
+model TeamPending {
+  id          Int      @id @default(autoincrement())
+  name        String
+  url         String   @unique
+  createdAt   DateTime @default(now())
+  customerId  String   @unique
+  ownerUserId Int
+
+  owner User @relation(fields: [ownerUserId], references: [id], onDelete: Cascade)
+}
+
+model TeamMember {
+  id        Int            @id @default(autoincrement())
+  teamId    Int
+  createdAt DateTime       @default(now())
+  role      TeamMemberRole
+  userId    Int
+  user      User           @relation(fields: [userId], references: [id])
+  team      Team           @relation(fields: [teamId], references: [id], onDelete: Cascade)
+
+  @@unique([userId, teamId])
+}
+
+model TeamEmail {
+  teamId    Int      @id @unique
+  createdAt DateTime @default(now())
+  name      String
+  email     String   @unique
+  team      Team     @relation(fields: [teamId], references: [id], onDelete: Cascade)
+}
+
+model TeamEmailVerification {
+  teamId    Int      @id @unique
+  name      String
+  email     String
+  token     String   @unique
+  expiresAt DateTime
+  createdAt DateTime @default(now())
+
+  team Team @relation(fields: [teamId], references: [id], onDelete: Cascade)
+}
+
+model TeamTransferVerification {
+  teamId              Int      @id @unique
+  userId              Int
+  name                String
+  email               String
+  token               String   @unique
+  expiresAt           DateTime
+  createdAt           DateTime @default(now())
+  clearPaymentMethods Boolean  @default(false)
+
+  team Team @relation(fields: [teamId], references: [id], onDelete: Cascade)
+}
+
+model TeamMemberInvite {
+  id        Int                    @id @default(autoincrement())
+  teamId    Int
+  createdAt DateTime               @default(now())
+  email     String
+  status    TeamMemberInviteStatus @default(PENDING)
+  role      TeamMemberRole
+  token     String                 @unique
+  team      Team                   @relation(fields: [teamId], references: [id], onDelete: Cascade)
+
+  @@unique([teamId, email])
+}
+
 enum TemplateType {
   PUBLIC
   PRIVATE
diff --git a/packages/prisma/seed/documents.ts b/packages/prisma/seed/documents.ts
new file mode 100644
index 000000000..1f1f5cab8
--- /dev/null
+++ b/packages/prisma/seed/documents.ts
@@ -0,0 +1,375 @@
+import type { User } from '@prisma/client';
+import { nanoid } from 'nanoid';
+import fs from 'node:fs';
+import path from 'node:path';
+import { match } from 'ts-pattern';
+
+import { prisma } from '..';
+import {
+  DocumentDataType,
+  DocumentStatus,
+  FieldType,
+  Prisma,
+  ReadStatus,
+  SendStatus,
+  SigningStatus,
+} from '../client';
+import { seedTeam } from './teams';
+import { seedUser } from './users';
+
+const examplePdf = fs
+  .readFileSync(path.join(__dirname, '../../../assets/example.pdf'))
+  .toString('base64');
+
+type DocumentToSeed = {
+  sender: User;
+  recipients: (User | string)[];
+  type: DocumentStatus;
+  documentOptions?: Partial<Prisma.DocumentUncheckedCreateInput>;
+};
+
+export const seedDocuments = async (documents: DocumentToSeed[]) => {
+  await Promise.all(
+    documents.map(async (document, i) =>
+      match(document.type)
+        .with(DocumentStatus.DRAFT, async () =>
+          createDraftDocument(document.sender, document.recipients, {
+            key: i,
+            createDocumentOptions: document.documentOptions,
+          }),
+        )
+        .with(DocumentStatus.PENDING, async () =>
+          createPendingDocument(document.sender, document.recipients, {
+            key: i,
+            createDocumentOptions: document.documentOptions,
+          }),
+        )
+        .with(DocumentStatus.COMPLETED, async () =>
+          createCompletedDocument(document.sender, document.recipients, {
+            key: i,
+            createDocumentOptions: document.documentOptions,
+          }),
+        )
+        .exhaustive(),
+    ),
+  );
+};
+
+const createDraftDocument = async (
+  sender: User,
+  recipients: (User | string)[],
+  options: CreateDocumentOptions = {},
+) => {
+  const { key, createDocumentOptions = {} } = options;
+
+  const documentData = await prisma.documentData.create({
+    data: {
+      type: DocumentDataType.BYTES_64,
+      data: examplePdf,
+      initialData: examplePdf,
+    },
+  });
+
+  const document = await prisma.document.create({
+    data: {
+      title: `[TEST] Document ${key} - Draft`,
+      status: DocumentStatus.DRAFT,
+      documentDataId: documentData.id,
+      userId: sender.id,
+      ...createDocumentOptions,
+    },
+  });
+
+  for (const recipient of recipients) {
+    const email = typeof recipient === 'string' ? recipient : recipient.email;
+    const name = typeof recipient === 'string' ? recipient : recipient.name ?? '';
+
+    await prisma.recipient.create({
+      data: {
+        email,
+        name,
+        token: nanoid(),
+        readStatus: ReadStatus.NOT_OPENED,
+        sendStatus: SendStatus.NOT_SENT,
+        signingStatus: SigningStatus.NOT_SIGNED,
+        signedAt: new Date(),
+        Document: {
+          connect: {
+            id: document.id,
+          },
+        },
+        Field: {
+          create: {
+            page: 1,
+            type: FieldType.NAME,
+            inserted: true,
+            customText: name,
+            positionX: new Prisma.Decimal(1),
+            positionY: new Prisma.Decimal(1),
+            width: new Prisma.Decimal(1),
+            height: new Prisma.Decimal(1),
+            documentId: document.id,
+          },
+        },
+      },
+    });
+  }
+};
+
+type CreateDocumentOptions = {
+  key?: string | number;
+  createDocumentOptions?: Partial<Prisma.DocumentUncheckedCreateInput>;
+};
+
+const createPendingDocument = async (
+  sender: User,
+  recipients: (User | string)[],
+  options: CreateDocumentOptions = {},
+) => {
+  const { key, createDocumentOptions = {} } = options;
+
+  const documentData = await prisma.documentData.create({
+    data: {
+      type: DocumentDataType.BYTES_64,
+      data: examplePdf,
+      initialData: examplePdf,
+    },
+  });
+
+  const document = await prisma.document.create({
+    data: {
+      title: `[TEST] Document ${key} - Pending`,
+      status: DocumentStatus.PENDING,
+      documentDataId: documentData.id,
+      userId: sender.id,
+      ...createDocumentOptions,
+    },
+  });
+
+  for (const recipient of recipients) {
+    const email = typeof recipient === 'string' ? recipient : recipient.email;
+    const name = typeof recipient === 'string' ? recipient : recipient.name ?? '';
+
+    await prisma.recipient.create({
+      data: {
+        email,
+        name,
+        token: nanoid(),
+        readStatus: ReadStatus.OPENED,
+        sendStatus: SendStatus.SENT,
+        signingStatus: SigningStatus.NOT_SIGNED,
+        signedAt: new Date(),
+        Document: {
+          connect: {
+            id: document.id,
+          },
+        },
+        Field: {
+          create: {
+            page: 1,
+            type: FieldType.NAME,
+            inserted: true,
+            customText: name,
+            positionX: new Prisma.Decimal(1),
+            positionY: new Prisma.Decimal(1),
+            width: new Prisma.Decimal(1),
+            height: new Prisma.Decimal(1),
+            documentId: document.id,
+          },
+        },
+      },
+    });
+  }
+};
+
+const createCompletedDocument = async (
+  sender: User,
+  recipients: (User | string)[],
+  options: CreateDocumentOptions = {},
+) => {
+  const { key, createDocumentOptions = {} } = options;
+
+  const documentData = await prisma.documentData.create({
+    data: {
+      type: DocumentDataType.BYTES_64,
+      data: examplePdf,
+      initialData: examplePdf,
+    },
+  });
+
+  const document = await prisma.document.create({
+    data: {
+      title: `[TEST] Document ${key} - Completed`,
+      status: DocumentStatus.COMPLETED,
+      documentDataId: documentData.id,
+      userId: sender.id,
+      ...createDocumentOptions,
+    },
+  });
+
+  for (const recipient of recipients) {
+    const email = typeof recipient === 'string' ? recipient : recipient.email;
+    const name = typeof recipient === 'string' ? recipient : recipient.name ?? '';
+
+    await prisma.recipient.create({
+      data: {
+        email,
+        name,
+        token: nanoid(),
+        readStatus: ReadStatus.OPENED,
+        sendStatus: SendStatus.SENT,
+        signingStatus: SigningStatus.SIGNED,
+        signedAt: new Date(),
+        Document: {
+          connect: {
+            id: document.id,
+          },
+        },
+        Field: {
+          create: {
+            page: 1,
+            type: FieldType.NAME,
+            inserted: true,
+            customText: name,
+            positionX: new Prisma.Decimal(1),
+            positionY: new Prisma.Decimal(1),
+            width: new Prisma.Decimal(1),
+            height: new Prisma.Decimal(1),
+            documentId: document.id,
+          },
+        },
+      },
+    });
+  }
+};
+
+/**
+ * Create 5 team documents:
+ * - Completed document with 2 recipients.
+ * - Pending document with 1 recipient.
+ * - Pending document with 4 recipients.
+ * - Draft document with 3 recipients.
+ * - Draft document with 2 recipients.
+ *
+ * Create 3 non team documents where the user is a team member:
+ * - Completed document with 2 recipients.
+ * - Pending document with 1 recipient.
+ * - Draft document with 2 recipients.
+ *
+ * Create 3 non team documents where the user is not a team member, but the recipient is:
+ * - Completed document with 2 recipients.
+ * - Pending document with 1 recipient.
+ * - Draft document with 2 recipients.
+ *
+ * This should result in the following team document dashboard counts:
+ * - 0 Inbox
+ * - 2 Pending
+ * - 1 Completed
+ * - 2 Draft
+ * - 5 All
+ */
+export const seedTeamDocuments = async () => {
+  const team = await seedTeam({
+    createTeamMembers: 4,
+  });
+
+  const documentOptions = {
+    teamId: team.id,
+  };
+
+  const teamMember1 = team.members[1].user;
+  const teamMember2 = team.members[2].user;
+  const teamMember3 = team.members[3].user;
+  const teamMember4 = team.members[4].user;
+
+  const [testUser1, testUser2, testUser3, testUser4] = await Promise.all([
+    seedUser(),
+    seedUser(),
+    seedUser(),
+    seedUser(),
+  ]);
+
+  await seedDocuments([
+    /**
+     * Team documents.
+     */
+    {
+      sender: teamMember1,
+      recipients: [testUser1, testUser2],
+      type: DocumentStatus.COMPLETED,
+      documentOptions,
+    },
+    {
+      sender: teamMember2,
+      recipients: [testUser1],
+      type: DocumentStatus.PENDING,
+      documentOptions,
+    },
+    {
+      sender: teamMember2,
+      recipients: [testUser1, testUser2, testUser3, testUser4],
+      type: DocumentStatus.PENDING,
+      documentOptions,
+    },
+    {
+      sender: teamMember2,
+      recipients: [testUser1, testUser2, teamMember1],
+      type: DocumentStatus.DRAFT,
+      documentOptions,
+    },
+    {
+      sender: team.owner,
+      recipients: [testUser1, testUser2],
+      type: DocumentStatus.DRAFT,
+      documentOptions,
+    },
+    /**
+     * Non team documents where the sender is a team member and recipient is not.
+     */
+    {
+      sender: teamMember1,
+      recipients: [testUser1, testUser2],
+      type: DocumentStatus.COMPLETED,
+    },
+    {
+      sender: teamMember2,
+      recipients: [testUser1],
+      type: DocumentStatus.PENDING,
+    },
+    {
+      sender: teamMember3,
+      recipients: [testUser1, testUser2],
+      type: DocumentStatus.DRAFT,
+    },
+    /**
+     * Non team documents where the sender is not a team member and recipient is.
+     */
+    {
+      sender: testUser1,
+      recipients: [teamMember1, teamMember2],
+      type: DocumentStatus.COMPLETED,
+    },
+    {
+      sender: testUser2,
+      recipients: [teamMember1],
+      type: DocumentStatus.PENDING,
+    },
+    {
+      sender: testUser3,
+      recipients: [teamMember1, teamMember2],
+      type: DocumentStatus.DRAFT,
+    },
+  ]);
+
+  return {
+    team,
+    teamMember1,
+    teamMember2,
+    teamMember3,
+    teamMember4,
+    testUser1,
+    testUser2,
+    testUser3,
+    testUser4,
+  };
+};
diff --git a/packages/prisma/seed/teams.ts b/packages/prisma/seed/teams.ts
new file mode 100644
index 000000000..99b0df8d5
--- /dev/null
+++ b/packages/prisma/seed/teams.ts
@@ -0,0 +1,177 @@
+import { prisma } from '..';
+import { TeamMemberInviteStatus, TeamMemberRole } from '../client';
+import { seedUser } from './users';
+
+const EMAIL_DOMAIN = `test.documenso.com`;
+
+type SeedTeamOptions = {
+  createTeamMembers?: number;
+  createTeamEmail?: true | string;
+};
+
+export const seedTeam = async ({
+  createTeamMembers = 0,
+  createTeamEmail,
+}: SeedTeamOptions = {}) => {
+  const teamUrl = `team-${Date.now()}`;
+  const teamEmail = createTeamEmail === true ? `${teamUrl}@${EMAIL_DOMAIN}` : createTeamEmail;
+
+  const teamOwner = await seedUser({
+    name: `${teamUrl}-original-owner`,
+    email: `${teamUrl}-original-owner@${EMAIL_DOMAIN}`,
+  });
+
+  const teamMembers = await Promise.all(
+    Array.from({ length: createTeamMembers }).map(async (_, i) => {
+      return seedUser({
+        name: `${teamUrl}-member-${i + 1}`,
+        email: `${teamUrl}-member-${i + 1}@${EMAIL_DOMAIN}`,
+      });
+    }),
+  );
+
+  const team = await prisma.team.create({
+    data: {
+      name: teamUrl,
+      url: teamUrl,
+      ownerUserId: teamOwner.id,
+      members: {
+        createMany: {
+          data: [teamOwner, ...teamMembers].map((user) => ({
+            userId: user.id,
+            role: TeamMemberRole.ADMIN,
+          })),
+        },
+      },
+      teamEmail: teamEmail
+        ? {
+            create: {
+              email: teamEmail,
+              name: teamEmail,
+            },
+          }
+        : undefined,
+    },
+  });
+
+  return await prisma.team.findFirstOrThrow({
+    where: {
+      id: team.id,
+    },
+    include: {
+      owner: true,
+      members: {
+        include: {
+          user: true,
+        },
+      },
+      teamEmail: true,
+    },
+  });
+};
+
+export const unseedTeam = async (teamUrl: string) => {
+  const team = await prisma.team.findUnique({
+    where: {
+      url: teamUrl,
+    },
+    include: {
+      members: true,
+    },
+  });
+
+  if (!team) {
+    return;
+  }
+
+  await prisma.team.delete({
+    where: {
+      url: teamUrl,
+    },
+  });
+
+  await prisma.user.deleteMany({
+    where: {
+      id: {
+        in: team.members.map((member) => member.userId),
+      },
+    },
+  });
+};
+
+export const seedTeamTransfer = async (options: { newOwnerUserId: number; teamId: number }) => {
+  return await prisma.teamTransferVerification.create({
+    data: {
+      teamId: options.teamId,
+      token: Date.now().toString(),
+      expiresAt: new Date(Date.now() + 1000 * 60 * 60 * 24),
+      userId: options.newOwnerUserId,
+      name: '',
+      email: '',
+    },
+  });
+};
+
+export const seedTeamEmail = async ({ email, teamId }: { email: string; teamId: number }) => {
+  return await prisma.teamEmail.create({
+    data: {
+      name: email,
+      email,
+      teamId,
+    },
+  });
+};
+
+export const unseedTeamEmail = async ({ teamId }: { teamId: number }) => {
+  return await prisma.teamEmail.delete({
+    where: {
+      teamId,
+    },
+  });
+};
+
+export const seedTeamInvite = async ({
+  email,
+  teamId,
+  role = TeamMemberRole.ADMIN,
+}: {
+  email: string;
+  teamId: number;
+  role?: TeamMemberRole;
+}) => {
+  return await prisma.teamMemberInvite.create({
+    data: {
+      email,
+      teamId,
+      role,
+      status: TeamMemberInviteStatus.PENDING,
+      token: Date.now().toString(),
+    },
+  });
+};
+
+export const seedTeamEmailVerification = async ({
+  email,
+  teamId,
+}: {
+  email: string;
+  teamId: number;
+}) => {
+  return await prisma.teamEmailVerification.create({
+    data: {
+      teamId,
+      email,
+      name: email,
+      expiresAt: new Date(Date.now() + 1000 * 60 * 60 * 24),
+      token: Date.now().toString(),
+    },
+  });
+};
+
+export const unseedTeamEmailVerification = async ({ teamId }: { teamId: number }) => {
+  return await prisma.teamEmailVerification.delete({
+    where: {
+      teamId,
+    },
+  });
+};
diff --git a/packages/prisma/seed/users.ts b/packages/prisma/seed/users.ts
new file mode 100644
index 000000000..ce3858bc6
--- /dev/null
+++ b/packages/prisma/seed/users.ts
@@ -0,0 +1,34 @@
+import { hashSync } from '@documenso/lib/server-only/auth/hash';
+
+import { prisma } from '..';
+
+type SeedUserOptions = {
+  name?: string;
+  email?: string;
+  password?: string;
+  verified?: boolean;
+};
+
+export const seedUser = async ({
+  name = `user-${Date.now()}`,
+  email = `user-${Date.now()}@test.documenso.com`,
+  password = 'password',
+  verified = true,
+}: SeedUserOptions = {}) => {
+  return await prisma.user.create({
+    data: {
+      name,
+      email,
+      password: hashSync(password),
+      emailVerified: verified ? new Date() : undefined,
+    },
+  });
+};
+
+export const unseedUser = async (userId: number) => {
+  await prisma.user.delete({
+    where: {
+      id: userId,
+    },
+  });
+};
diff --git a/packages/trpc/server/document-router/router.ts b/packages/trpc/server/document-router/router.ts
index 9dba63797..5940d971d 100644
--- a/packages/trpc/server/document-router/router.ts
+++ b/packages/trpc/server/document-router/router.ts
@@ -36,10 +36,8 @@ export const documentRouter = router({
     .input(ZGetDocumentByIdQuerySchema)
     .query(async ({ input, ctx }) => {
       try {
-        const { id } = input;
-
         return await getDocumentById({
-          id,
+          ...input,
           userId: ctx.user.id,
         });
       } catch (err) {
@@ -73,9 +71,9 @@ export const documentRouter = router({
     .input(ZCreateDocumentMutationSchema)
     .mutation(async ({ input, ctx }) => {
       try {
-        const { title, documentDataId } = input;
+        const { title, documentDataId, teamId } = input;
 
-        const { remaining } = await getServerLimits({ email: ctx.user.email });
+        const { remaining } = await getServerLimits({ email: ctx.user.email, teamId });
 
         if (remaining.documents <= 0) {
           throw new TRPCError({
@@ -87,6 +85,7 @@ export const documentRouter = router({
 
         return await createDocument({
           userId: ctx.user.id,
+          teamId,
           title,
           documentDataId,
         });
@@ -245,12 +244,9 @@ export const documentRouter = router({
     .input(ZResendDocumentMutationSchema)
     .mutation(async ({ input, ctx }) => {
       try {
-        const { documentId, recipients } = input;
-
         return await resendDocument({
           userId: ctx.user.id,
-          documentId,
-          recipients,
+          ...input,
         });
       } catch (err) {
         console.error(err);
@@ -266,14 +262,13 @@ export const documentRouter = router({
     .input(ZGetDocumentByIdQuerySchema)
     .mutation(async ({ input, ctx }) => {
       try {
-        const { id } = input;
-
         return await duplicateDocumentById({
-          id,
           userId: ctx.user.id,
+          ...input,
         });
       } catch (err) {
         console.log(err);
+
         throw new TRPCError({
           code: 'BAD_REQUEST',
           message: 'We are unable to duplicate this document. Please try again later.',
diff --git a/packages/trpc/server/document-router/schema.ts b/packages/trpc/server/document-router/schema.ts
index 5d8c23c27..f8d008f50 100644
--- a/packages/trpc/server/document-router/schema.ts
+++ b/packages/trpc/server/document-router/schema.ts
@@ -4,6 +4,7 @@ import { DocumentStatus, FieldType, RecipientRole } from '@documenso/prisma/clie
 
 export const ZGetDocumentByIdQuerySchema = z.object({
   id: z.number().min(1),
+  teamId: z.number().min(1).optional(),
 });
 
 export type TGetDocumentByIdQuerySchema = z.infer<typeof ZGetDocumentByIdQuerySchema>;
@@ -17,6 +18,7 @@ export type TGetDocumentByTokenQuerySchema = z.infer<typeof ZGetDocumentByTokenQ
 export const ZCreateDocumentMutationSchema = z.object({
   title: z.string().min(1),
   documentDataId: z.string().min(1),
+  teamId: z.number().optional(),
 });
 
 export type TCreateDocumentMutationSchema = z.infer<typeof ZCreateDocumentMutationSchema>;
@@ -86,6 +88,7 @@ export type TSetPasswordForDocumentMutationSchema = z.infer<
 export const ZResendDocumentMutationSchema = z.object({
   documentId: z.number(),
   recipients: z.array(z.number()).min(1),
+  teamId: z.number().min(1).optional(),
 });
 
 export type TSendDocumentMutationSchema = z.infer<typeof ZSendDocumentMutationSchema>;
diff --git a/packages/trpc/server/router.ts b/packages/trpc/server/router.ts
index 3ed2a0d05..aec70fd63 100644
--- a/packages/trpc/server/router.ts
+++ b/packages/trpc/server/router.ts
@@ -7,6 +7,7 @@ import { profileRouter } from './profile-router/router';
 import { recipientRouter } from './recipient-router/router';
 import { shareLinkRouter } from './share-link-router/router';
 import { singleplayerRouter } from './singleplayer-router/router';
+import { teamRouter } from './team-router/router';
 import { templateRouter } from './template-router/router';
 import { router } from './trpc';
 import { twoFactorAuthenticationRouter } from './two-factor-authentication-router/router';
@@ -21,8 +22,9 @@ export const appRouter = router({
   admin: adminRouter,
   shareLink: shareLinkRouter,
   singleplayer: singleplayerRouter,
-  twoFactorAuthentication: twoFactorAuthenticationRouter,
+  team: teamRouter,
   template: templateRouter,
+  twoFactorAuthentication: twoFactorAuthenticationRouter,
 });
 
 export type AppRouter = typeof appRouter;
diff --git a/packages/trpc/server/team-router/router.ts b/packages/trpc/server/team-router/router.ts
new file mode 100644
index 000000000..dd2032daf
--- /dev/null
+++ b/packages/trpc/server/team-router/router.ts
@@ -0,0 +1,508 @@
+import { getTeamPrices } from '@documenso/ee/server-only/stripe/get-team-prices';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { acceptTeamInvitation } from '@documenso/lib/server-only/team/accept-team-invitation';
+import { createTeam } from '@documenso/lib/server-only/team/create-team';
+import { createTeamBillingPortal } from '@documenso/lib/server-only/team/create-team-billing-portal';
+import { createTeamPendingCheckoutSession } from '@documenso/lib/server-only/team/create-team-checkout-session';
+import { createTeamEmailVerification } from '@documenso/lib/server-only/team/create-team-email-verification';
+import { createTeamMemberInvites } from '@documenso/lib/server-only/team/create-team-member-invites';
+import { deleteTeam } from '@documenso/lib/server-only/team/delete-team';
+import { deleteTeamEmail } from '@documenso/lib/server-only/team/delete-team-email';
+import { deleteTeamEmailVerification } from '@documenso/lib/server-only/team/delete-team-email-verification';
+import { deleteTeamMemberInvitations } from '@documenso/lib/server-only/team/delete-team-invitations';
+import { deleteTeamMembers } from '@documenso/lib/server-only/team/delete-team-members';
+import { deleteTeamPending } from '@documenso/lib/server-only/team/delete-team-pending';
+import { deleteTeamTransferRequest } from '@documenso/lib/server-only/team/delete-team-transfer-request';
+import { findTeamInvoices } from '@documenso/lib/server-only/team/find-team-invoices';
+import { findTeamMemberInvites } from '@documenso/lib/server-only/team/find-team-member-invites';
+import { findTeamMembers } from '@documenso/lib/server-only/team/find-team-members';
+import { findTeams } from '@documenso/lib/server-only/team/find-teams';
+import { findTeamsPending } from '@documenso/lib/server-only/team/find-teams-pending';
+import { getTeamById } from '@documenso/lib/server-only/team/get-team';
+import { getTeamEmailByEmail } from '@documenso/lib/server-only/team/get-team-email-by-email';
+import { getTeamInvitations } from '@documenso/lib/server-only/team/get-team-invitations';
+import { getTeamMembers } from '@documenso/lib/server-only/team/get-team-members';
+import { getTeams } from '@documenso/lib/server-only/team/get-teams';
+import { leaveTeam } from '@documenso/lib/server-only/team/leave-team';
+import { requestTeamOwnershipTransfer } from '@documenso/lib/server-only/team/request-team-ownership-transfer';
+import { resendTeamEmailVerification } from '@documenso/lib/server-only/team/resend-team-email-verification';
+import { resendTeamMemberInvitation } from '@documenso/lib/server-only/team/resend-team-member-invitation';
+import { updateTeam } from '@documenso/lib/server-only/team/update-team';
+import { updateTeamEmail } from '@documenso/lib/server-only/team/update-team-email';
+import { updateTeamMember } from '@documenso/lib/server-only/team/update-team-member';
+
+import { authenticatedProcedure, router } from '../trpc';
+import {
+  ZAcceptTeamInvitationMutationSchema,
+  ZCreateTeamBillingPortalMutationSchema,
+  ZCreateTeamEmailVerificationMutationSchema,
+  ZCreateTeamMemberInvitesMutationSchema,
+  ZCreateTeamMutationSchema,
+  ZCreateTeamPendingCheckoutMutationSchema,
+  ZDeleteTeamEmailMutationSchema,
+  ZDeleteTeamEmailVerificationMutationSchema,
+  ZDeleteTeamMemberInvitationsMutationSchema,
+  ZDeleteTeamMembersMutationSchema,
+  ZDeleteTeamMutationSchema,
+  ZDeleteTeamPendingMutationSchema,
+  ZDeleteTeamTransferRequestMutationSchema,
+  ZFindTeamInvoicesQuerySchema,
+  ZFindTeamMemberInvitesQuerySchema,
+  ZFindTeamMembersQuerySchema,
+  ZFindTeamsPendingQuerySchema,
+  ZFindTeamsQuerySchema,
+  ZGetTeamMembersQuerySchema,
+  ZGetTeamQuerySchema,
+  ZLeaveTeamMutationSchema,
+  ZRequestTeamOwnerhsipTransferMutationSchema,
+  ZResendTeamEmailVerificationMutationSchema,
+  ZResendTeamMemberInvitationMutationSchema,
+  ZUpdateTeamEmailMutationSchema,
+  ZUpdateTeamMemberMutationSchema,
+  ZUpdateTeamMutationSchema,
+} from './schema';
+
+export const teamRouter = router({
+  acceptTeamInvitation: authenticatedProcedure
+    .input(ZAcceptTeamInvitationMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        return await acceptTeamInvitation({
+          teamId: input.teamId,
+          userId: ctx.user.id,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  createBillingPortal: authenticatedProcedure
+    .input(ZCreateTeamBillingPortalMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        return await createTeamBillingPortal({
+          userId: ctx.user.id,
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  createTeam: authenticatedProcedure
+    .input(ZCreateTeamMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        return await createTeam({
+          userId: ctx.user.id,
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  createTeamEmailVerification: authenticatedProcedure
+    .input(ZCreateTeamEmailVerificationMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        return await createTeamEmailVerification({
+          teamId: input.teamId,
+          userId: ctx.user.id,
+          data: {
+            email: input.email,
+            name: input.name,
+          },
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  createTeamMemberInvites: authenticatedProcedure
+    .input(ZCreateTeamMemberInvitesMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        return await createTeamMemberInvites({
+          userId: ctx.user.id,
+          userName: ctx.user.name ?? '',
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  createTeamPendingCheckout: authenticatedProcedure
+    .input(ZCreateTeamPendingCheckoutMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        return await createTeamPendingCheckoutSession({
+          userId: ctx.user.id,
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  deleteTeam: authenticatedProcedure
+    .input(ZDeleteTeamMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        return await deleteTeam({
+          userId: ctx.user.id,
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  deleteTeamEmail: authenticatedProcedure
+    .input(ZDeleteTeamEmailMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        return await deleteTeamEmail({
+          userId: ctx.user.id,
+          userEmail: ctx.user.email,
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  deleteTeamEmailVerification: authenticatedProcedure
+    .input(ZDeleteTeamEmailVerificationMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        return await deleteTeamEmailVerification({
+          userId: ctx.user.id,
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  deleteTeamMemberInvitations: authenticatedProcedure
+    .input(ZDeleteTeamMemberInvitationsMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        return await deleteTeamMemberInvitations({
+          userId: ctx.user.id,
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  deleteTeamMembers: authenticatedProcedure
+    .input(ZDeleteTeamMembersMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        return await deleteTeamMembers({
+          userId: ctx.user.id,
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  deleteTeamPending: authenticatedProcedure
+    .input(ZDeleteTeamPendingMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        return await deleteTeamPending({
+          userId: ctx.user.id,
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  deleteTeamTransferRequest: authenticatedProcedure
+    .input(ZDeleteTeamTransferRequestMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        return await deleteTeamTransferRequest({
+          userId: ctx.user.id,
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  findTeamInvoices: authenticatedProcedure
+    .input(ZFindTeamInvoicesQuerySchema)
+    .query(async ({ input, ctx }) => {
+      try {
+        return await findTeamInvoices({
+          userId: ctx.user.id,
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  findTeamMemberInvites: authenticatedProcedure
+    .input(ZFindTeamMemberInvitesQuerySchema)
+    .query(async ({ input, ctx }) => {
+      try {
+        return await findTeamMemberInvites({
+          userId: ctx.user.id,
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  findTeamMembers: authenticatedProcedure
+    .input(ZFindTeamMembersQuerySchema)
+    .query(async ({ input, ctx }) => {
+      try {
+        return await findTeamMembers({
+          userId: ctx.user.id,
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  findTeams: authenticatedProcedure.input(ZFindTeamsQuerySchema).query(async ({ input, ctx }) => {
+    try {
+      return await findTeams({
+        userId: ctx.user.id,
+        ...input,
+      });
+    } catch (err) {
+      console.error(err);
+
+      throw AppError.parseErrorToTRPCError(err);
+    }
+  }),
+
+  findTeamsPending: authenticatedProcedure
+    .input(ZFindTeamsPendingQuerySchema)
+    .query(async ({ input, ctx }) => {
+      try {
+        return await findTeamsPending({
+          userId: ctx.user.id,
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  getTeam: authenticatedProcedure.input(ZGetTeamQuerySchema).query(async ({ input, ctx }) => {
+    try {
+      return await getTeamById({ teamId: input.teamId, userId: ctx.user.id });
+    } catch (err) {
+      console.error(err);
+
+      throw AppError.parseErrorToTRPCError(err);
+    }
+  }),
+
+  getTeamEmailByEmail: authenticatedProcedure.query(async ({ ctx }) => {
+    try {
+      return await getTeamEmailByEmail({ email: ctx.user.email });
+    } catch (err) {
+      console.error(err);
+
+      throw AppError.parseErrorToTRPCError(err);
+    }
+  }),
+
+  getTeamInvitations: authenticatedProcedure.query(async ({ ctx }) => {
+    try {
+      return await getTeamInvitations({ email: ctx.user.email });
+    } catch (err) {
+      console.error(err);
+
+      throw AppError.parseErrorToTRPCError(err);
+    }
+  }),
+
+  getTeamMembers: authenticatedProcedure
+    .input(ZGetTeamMembersQuerySchema)
+    .query(async ({ input, ctx }) => {
+      try {
+        return await getTeamMembers({ teamId: input.teamId, userId: ctx.user.id });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  getTeamPrices: authenticatedProcedure.query(async () => {
+    try {
+      return await getTeamPrices();
+    } catch (err) {
+      console.error(err);
+
+      throw AppError.parseErrorToTRPCError(err);
+    }
+  }),
+
+  getTeams: authenticatedProcedure.query(async ({ ctx }) => {
+    try {
+      return await getTeams({ userId: ctx.user.id });
+    } catch (err) {
+      console.error(err);
+
+      throw AppError.parseErrorToTRPCError(err);
+    }
+  }),
+
+  leaveTeam: authenticatedProcedure
+    .input(ZLeaveTeamMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        return await leaveTeam({
+          userId: ctx.user.id,
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  updateTeam: authenticatedProcedure
+    .input(ZUpdateTeamMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        return await updateTeam({
+          userId: ctx.user.id,
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  updateTeamEmail: authenticatedProcedure
+    .input(ZUpdateTeamEmailMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        return await updateTeamEmail({
+          userId: ctx.user.id,
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  updateTeamMember: authenticatedProcedure
+    .input(ZUpdateTeamMemberMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        return await updateTeamMember({
+          userId: ctx.user.id,
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  requestTeamOwnershipTransfer: authenticatedProcedure
+    .input(ZRequestTeamOwnerhsipTransferMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        return await requestTeamOwnershipTransfer({
+          userId: ctx.user.id,
+          userName: ctx.user.name ?? '',
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  resendTeamEmailVerification: authenticatedProcedure
+    .input(ZResendTeamEmailVerificationMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        await resendTeamEmailVerification({
+          userId: ctx.user.id,
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  resendTeamMemberInvitation: authenticatedProcedure
+    .input(ZResendTeamMemberInvitationMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        await resendTeamMemberInvitation({
+          userId: ctx.user.id,
+          userName: ctx.user.name ?? '',
+          ...input,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+});
diff --git a/packages/trpc/server/team-router/schema.ts b/packages/trpc/server/team-router/schema.ts
new file mode 100644
index 000000000..953b12490
--- /dev/null
+++ b/packages/trpc/server/team-router/schema.ts
@@ -0,0 +1,213 @@
+import { z } from 'zod';
+
+import { PROTECTED_TEAM_URLS } from '@documenso/lib/constants/teams';
+import { TeamMemberRole } from '@documenso/prisma/client';
+
+const GenericFindQuerySchema = z.object({
+  term: z.string().optional(),
+  page: z.number().optional(),
+  perPage: z.number().optional(),
+});
+
+/**
+ * Restrict team URLs schema.
+ *
+ * Allowed characters:
+ * - Alphanumeric
+ * - Lowercase
+ * - Dashes
+ * - Underscores
+ *
+ * Conditions:
+ * - 3-30 characters
+ * - Cannot start and end with underscores or dashes.
+ * - Cannot contain consecutive underscores or dashes.
+ * - Cannot be a reserved URL in the PROTECTED_TEAM_URLS list
+ */
+export const ZTeamUrlSchema = z
+  .string()
+  .trim()
+  .min(3, { message: 'Team URL must be at least 3 characters long.' })
+  .max(30, { message: 'Team URL must not exceed 30 characters.' })
+  .toLowerCase()
+  .regex(/^[a-z0-9].*[^_-]$/, 'Team URL cannot start or end with dashes or underscores.')
+  .regex(/^(?!.*[-_]{2})/, 'Team URL cannot contain consecutive dashes or underscores.')
+  .regex(
+    /^[a-z0-9]+(?:[-_][a-z0-9]+)*$/,
+    'Team URL can only contain letters, numbers, dashes and underscores.',
+  )
+  .refine((value) => !PROTECTED_TEAM_URLS.includes(value), {
+    message: 'This URL is already in use.',
+  });
+
+export const ZTeamNameSchema = z
+  .string()
+  .trim()
+  .min(3, { message: 'Team name must be at least 3 characters long.' })
+  .max(30, { message: 'Team name must not exceed 30 characters.' });
+
+export const ZAcceptTeamInvitationMutationSchema = z.object({
+  teamId: z.number(),
+});
+
+export const ZCreateTeamBillingPortalMutationSchema = z.object({
+  teamId: z.number(),
+});
+
+export const ZCreateTeamMutationSchema = z.object({
+  teamName: ZTeamNameSchema,
+  teamUrl: ZTeamUrlSchema,
+});
+
+export const ZCreateTeamEmailVerificationMutationSchema = z.object({
+  teamId: z.number(),
+  name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
+  email: z.string().trim().email().toLowerCase().min(1, 'Please enter a valid email.'),
+});
+
+export const ZCreateTeamMemberInvitesMutationSchema = z.object({
+  teamId: z.number(),
+  invitations: z.array(
+    z.object({
+      email: z.string().email().toLowerCase(),
+      role: z.nativeEnum(TeamMemberRole),
+    }),
+  ),
+});
+
+export const ZCreateTeamPendingCheckoutMutationSchema = z.object({
+  interval: z.union([z.literal('monthly'), z.literal('yearly')]),
+  pendingTeamId: z.number(),
+});
+
+export const ZDeleteTeamEmailMutationSchema = z.object({
+  teamId: z.number(),
+});
+
+export const ZDeleteTeamEmailVerificationMutationSchema = z.object({
+  teamId: z.number(),
+});
+
+export const ZDeleteTeamMembersMutationSchema = z.object({
+  teamId: z.number(),
+  teamMemberIds: z.array(z.number()),
+});
+
+export const ZDeleteTeamMemberInvitationsMutationSchema = z.object({
+  teamId: z.number(),
+  invitationIds: z.array(z.number()),
+});
+
+export const ZDeleteTeamMutationSchema = z.object({
+  teamId: z.number(),
+});
+
+export const ZDeleteTeamPendingMutationSchema = z.object({
+  pendingTeamId: z.number(),
+});
+
+export const ZDeleteTeamTransferRequestMutationSchema = z.object({
+  teamId: z.number(),
+});
+
+export const ZFindTeamInvoicesQuerySchema = z.object({
+  teamId: z.number(),
+});
+
+export const ZFindTeamMemberInvitesQuerySchema = GenericFindQuerySchema.extend({
+  teamId: z.number(),
+});
+
+export const ZFindTeamMembersQuerySchema = GenericFindQuerySchema.extend({
+  teamId: z.number(),
+});
+
+export const ZFindTeamsQuerySchema = GenericFindQuerySchema;
+
+export const ZFindTeamsPendingQuerySchema = GenericFindQuerySchema;
+
+export const ZGetTeamQuerySchema = z.object({
+  teamId: z.number(),
+});
+
+export const ZGetTeamMembersQuerySchema = z.object({
+  teamId: z.number(),
+});
+
+export const ZLeaveTeamMutationSchema = z.object({
+  teamId: z.number(),
+});
+
+export const ZUpdateTeamMutationSchema = z.object({
+  teamId: z.number(),
+  data: z.object({
+    name: ZTeamNameSchema,
+    url: ZTeamUrlSchema,
+  }),
+});
+
+export const ZUpdateTeamEmailMutationSchema = z.object({
+  teamId: z.number(),
+  data: z.object({
+    name: z.string().trim().min(1),
+  }),
+});
+
+export const ZUpdateTeamMemberMutationSchema = z.object({
+  teamId: z.number(),
+  teamMemberId: z.number(),
+  data: z.object({
+    role: z.nativeEnum(TeamMemberRole),
+  }),
+});
+
+export const ZRequestTeamOwnerhsipTransferMutationSchema = z.object({
+  teamId: z.number(),
+  newOwnerUserId: z.number(),
+  clearPaymentMethods: z.boolean(),
+});
+
+export const ZResendTeamEmailVerificationMutationSchema = z.object({
+  teamId: z.number(),
+});
+
+export const ZResendTeamMemberInvitationMutationSchema = z.object({
+  teamId: z.number(),
+  invitationId: z.number(),
+});
+
+export type TCreateTeamMutationSchema = z.infer<typeof ZCreateTeamMutationSchema>;
+export type TCreateTeamEmailVerificationMutationSchema = z.infer<
+  typeof ZCreateTeamEmailVerificationMutationSchema
+>;
+export type TCreateTeamMemberInvitesMutationSchema = z.infer<
+  typeof ZCreateTeamMemberInvitesMutationSchema
+>;
+export type TCreateTeamPendingCheckoutMutationSchema = z.infer<
+  typeof ZCreateTeamPendingCheckoutMutationSchema
+>;
+export type TDeleteTeamEmailMutationSchema = z.infer<typeof ZDeleteTeamEmailMutationSchema>;
+export type TDeleteTeamMembersMutationSchema = z.infer<typeof ZDeleteTeamMembersMutationSchema>;
+export type TDeleteTeamMutationSchema = z.infer<typeof ZDeleteTeamMutationSchema>;
+export type TDeleteTeamPendingMutationSchema = z.infer<typeof ZDeleteTeamPendingMutationSchema>;
+export type TDeleteTeamTransferRequestMutationSchema = z.infer<
+  typeof ZDeleteTeamTransferRequestMutationSchema
+>;
+export type TFindTeamMemberInvitesQuerySchema = z.infer<typeof ZFindTeamMembersQuerySchema>;
+export type TFindTeamMembersQuerySchema = z.infer<typeof ZFindTeamMembersQuerySchema>;
+export type TFindTeamsQuerySchema = z.infer<typeof ZFindTeamsQuerySchema>;
+export type TFindTeamsPendingQuerySchema = z.infer<typeof ZFindTeamsPendingQuerySchema>;
+export type TGetTeamQuerySchema = z.infer<typeof ZGetTeamQuerySchema>;
+export type TGetTeamMembersQuerySchema = z.infer<typeof ZGetTeamMembersQuerySchema>;
+export type TLeaveTeamMutationSchema = z.infer<typeof ZLeaveTeamMutationSchema>;
+export type TUpdateTeamMutationSchema = z.infer<typeof ZUpdateTeamMutationSchema>;
+export type TUpdateTeamEmailMutationSchema = z.infer<typeof ZUpdateTeamEmailMutationSchema>;
+export type TRequestTeamOwnerhsipTransferMutationSchema = z.infer<
+  typeof ZRequestTeamOwnerhsipTransferMutationSchema
+>;
+export type TResendTeamEmailVerificationMutationSchema = z.infer<
+  typeof ZResendTeamEmailVerificationMutationSchema
+>;
+export type TResendTeamMemberInvitationMutationSchema = z.infer<
+  typeof ZResendTeamMemberInvitationMutationSchema
+>;
diff --git a/packages/ui/components/animate/animate-generic-fade-in-out.tsx b/packages/ui/components/animate/animate-generic-fade-in-out.tsx
new file mode 100644
index 000000000..5f57c96df
--- /dev/null
+++ b/packages/ui/components/animate/animate-generic-fade-in-out.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+type AnimateGenericFadeInOutProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export const AnimateGenericFadeInOut = ({ children, className }: AnimateGenericFadeInOutProps) => {
+  return (
+    <motion.section
+      initial={{
+        opacity: 0,
+      }}
+      animate={{
+        opacity: 1,
+      }}
+      exit={{
+        opacity: 0,
+      }}
+      className={className}
+    >
+      {children}
+    </motion.section>
+  );
+};
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 34675ba89..44d14cb82 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -35,7 +35,7 @@
     "@radix-ui/react-checkbox": "^1.0.3",
     "@radix-ui/react-collapsible": "^1.0.2",
     "@radix-ui/react-context-menu": "^2.1.3",
-    "@radix-ui/react-dialog": "^1.0.3",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@radix-ui/react-hover-card": "^1.0.5",
     "@radix-ui/react-label": "^2.0.1",
@@ -45,7 +45,7 @@
     "@radix-ui/react-progress": "^1.0.2",
     "@radix-ui/react-radio-group": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.0.3",
-    "@radix-ui/react-select": "^1.2.1",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.2",
     "@radix-ui/react-slider": "^1.1.1",
     "@radix-ui/react-slot": "^1.0.2",
diff --git a/packages/ui/primitives/avatar.tsx b/packages/ui/primitives/avatar.tsx
index 0039ad4eb..c80e3a658 100644
--- a/packages/ui/primitives/avatar.tsx
+++ b/packages/ui/primitives/avatar.tsx
@@ -48,4 +48,37 @@ const AvatarFallback = React.forwardRef<
 
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback };
+type AvatarWithTextProps = {
+  avatarClass?: string;
+  avatarFallback: string;
+  className?: string;
+  primaryText: React.ReactNode;
+  secondaryText?: React.ReactNode;
+  rightSideComponent?: React.ReactNode;
+};
+
+const AvatarWithText = ({
+  avatarClass,
+  avatarFallback,
+  className,
+  primaryText,
+  secondaryText,
+  rightSideComponent,
+}: AvatarWithTextProps) => (
+  <div className={cn('flex w-full max-w-xs items-center gap-2', className)}>
+    <Avatar
+      className={cn('dark:border-border h-10 w-10 border-2 border-solid border-white', avatarClass)}
+    >
+      <AvatarFallback className="text-xs text-gray-400">{avatarFallback}</AvatarFallback>
+    </Avatar>
+
+    <div className="flex flex-col text-left text-sm font-normal">
+      <span className="text-foreground truncate">{primaryText}</span>
+      <span className="text-muted-foreground truncate text-xs">{secondaryText}</span>
+    </div>
+
+    {rightSideComponent}
+  </div>
+);
+
+export { Avatar, AvatarImage, AvatarFallback, AvatarWithText };
diff --git a/packages/ui/primitives/badge.tsx b/packages/ui/primitives/badge.tsx
index 1ff153f79..fd56bc1ce 100644
--- a/packages/ui/primitives/badge.tsx
+++ b/packages/ui/primitives/badge.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
-import { VariantProps, cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
 
 import { cn } from '../lib/utils';
 
diff --git a/packages/ui/primitives/button.tsx b/packages/ui/primitives/button.tsx
index 5754b35a5..5fc3fc1bb 100644
--- a/packages/ui/primitives/button.tsx
+++ b/packages/ui/primitives/button.tsx
@@ -18,6 +18,7 @@ const buttonVariants = cva(
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'underline-offset-4 hover:underline text-primary',
+        none: '',
       },
       size: {
         default: 'h-10 py-2 px-4',
diff --git a/packages/ui/primitives/command.tsx b/packages/ui/primitives/command.tsx
index 65f88fc4e..fee5321cd 100644
--- a/packages/ui/primitives/command.tsx
+++ b/packages/ui/primitives/command.tsx
@@ -92,7 +92,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground mx-2 overflow-hidden border-b pb-2 last:border-0 [&_[cmdk-group-heading]]:mt-2 [&_[cmdk-group-heading]]:px-0 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:opacity-50 ',
+      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden border-b p-1 last:border-0 [&_[cmdk-group-heading]]:mt-2 [&_[cmdk-group-heading]]:px-0 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:opacity-50 ',
       className,
     )}
     {...props}
@@ -121,7 +121,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'aria-selected:bg-accent aria-selected:text-accent-foreground relative -mx-2 -my-1 flex cursor-default select-none items-center rounded-lg px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
     )}
     {...props}
diff --git a/packages/ui/primitives/dialog.tsx b/packages/ui/primitives/dialog.tsx
index 47982ab09..0271d4d12 100644
--- a/packages/ui/primitives/dialog.tsx
+++ b/packages/ui/primitives/dialog.tsx
@@ -87,7 +87,10 @@ DialogHeader.displayName = 'DialogHeader';
 
 const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    className={cn(
+      'flex flex-col-reverse space-y-2 space-y-reverse sm:flex-row sm:justify-end sm:space-x-2 sm:space-y-0',
+      className,
+    )}
     {...props}
   />
 );
diff --git a/packages/ui/primitives/document-flow/add-fields.tsx b/packages/ui/primitives/document-flow/add-fields.tsx
index 74764df80..9c8db7918 100644
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@@ -403,7 +403,7 @@ export const AddFieldsFormPartial = ({
                       {recipients.map((recipient) => (
                         <CommandItem
                           key={recipient.id}
-                          className={cn('!rounded-2xl px-4 last:mb-1 [&:not(:first-child)]:mt-1', {
+                          className={cn('px-4 last:mb-1 [&:not(:first-child)]:mt-1', {
                             'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
                           })}
                           onSelect={() => {
@@ -439,7 +439,7 @@ export const AddFieldsFormPartial = ({
                             ) : (
                               <Tooltip>
                                 <TooltipTrigger>
-                                  <Info className="mx-2 h-4 w-4" />
+                                  <Info className="ml-2 h-4 w-4" />
                                 </TooltipTrigger>
 
                                 <TooltipContent className="text-muted-foreground max-w-xs">
diff --git a/packages/ui/primitives/multi-select-combobox.tsx b/packages/ui/primitives/multi-select-combobox.tsx
new file mode 100644
index 000000000..62e5fa2cf
--- /dev/null
+++ b/packages/ui/primitives/multi-select-combobox.tsx
@@ -0,0 +1,165 @@
+'use client';
+
+import * as React from 'react';
+
+import { AnimatePresence } from 'framer-motion';
+import { Check, ChevronsUpDown, Loader, XIcon } from 'lucide-react';
+
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+
+import { cn } from '../lib/utils';
+import { Button } from './button';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from './command';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+
+type OptionValue = string | number | boolean | null;
+
+type ComboBoxOption<T = OptionValue> = {
+  label: string;
+  value: T;
+  disabled?: boolean;
+};
+
+type MultiSelectComboboxProps<T = OptionValue> = {
+  emptySelectionPlaceholder?: React.ReactNode | string;
+  enableClearAllButton?: boolean;
+  loading?: boolean;
+  inputPlaceholder?: string;
+  onChange: (_values: T[]) => void;
+  options: ComboBoxOption<T>[];
+  selectedValues: T[];
+};
+
+/**
+ * Multi select combo box component which supports:
+ *
+ * - Label/value pairs
+ * - Loading state
+ * - Clear all button
+ */
+export function MultiSelectCombobox<T = OptionValue>({
+  emptySelectionPlaceholder = 'Select values...',
+  enableClearAllButton,
+  inputPlaceholder,
+  loading,
+  onChange,
+  options,
+  selectedValues,
+}: MultiSelectComboboxProps<T>) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleSelect = (selectedOption: T) => {
+    let newSelectedOptions = [...selectedValues, selectedOption];
+
+    if (selectedValues.includes(selectedOption)) {
+      newSelectedOptions = selectedValues.filter((v) => v !== selectedOption);
+    }
+
+    onChange(newSelectedOptions);
+
+    setOpen(false);
+  };
+
+  const selectedOptions = React.useMemo(() => {
+    return selectedValues.map((value): ComboBoxOption<T> => {
+      const foundOption = options.find((option) => option.value === value);
+
+      if (foundOption) {
+        return foundOption;
+      }
+
+      let label = '';
+
+      if (typeof value === 'string' || typeof value === 'number') {
+        label = value.toString();
+      }
+
+      return {
+        label,
+        value,
+      };
+    });
+  }, [selectedValues, options]);
+
+  const buttonLabel = React.useMemo(() => {
+    if (loading) {
+      return '';
+    }
+
+    if (selectedOptions.length === 0) {
+      return emptySelectionPlaceholder;
+    }
+
+    return selectedOptions.map((option) => option.label).join(', ');
+  }, [selectedOptions, emptySelectionPlaceholder, loading]);
+
+  const showClearButton = enableClearAllButton && selectedValues.length > 0;
+
+  return (
+    <Popover open={open && !loading} onOpenChange={setOpen}>
+      <div className="relative">
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            disabled={loading}
+            aria-expanded={open}
+            className="w-[200px] px-3"
+          >
+            <AnimatePresence>
+              {loading ? (
+                <div className="flex items-center justify-center">
+                  <Loader className="h-5 w-5 animate-spin text-gray-500 dark:text-gray-100" />
+                </div>
+              ) : (
+                <AnimateGenericFadeInOut className="flex w-full justify-between">
+                  <span className="truncate">{buttonLabel}</span>
+
+                  <div
+                    className={cn('ml-2 flex flex-row items-center', {
+                      'ml-6': showClearButton,
+                    })}
+                  >
+                    <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+                  </div>
+                </AnimateGenericFadeInOut>
+              )}
+            </AnimatePresence>
+          </Button>
+        </PopoverTrigger>
+
+        {/* This is placed outside the trigger since we can't have nested buttons. */}
+        {showClearButton && !loading && (
+          <div className="absolute bottom-0 right-8 top-0 flex items-center justify-center">
+            <button
+              className="flex h-4 w-4 items-center justify-center rounded-full bg-gray-300 dark:bg-neutral-700"
+              onClick={() => onChange([])}
+            >
+              <XIcon className="text-muted-foreground h-3.5 w-3.5" />
+            </button>
+          </div>
+        )}
+      </div>
+
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder={inputPlaceholder} />
+          <CommandEmpty>No value found.</CommandEmpty>
+          <CommandGroup>
+            {options.map((option, i) => (
+              <CommandItem key={i} onSelect={() => handleSelect(option.value)}>
+                <Check
+                  className={cn(
+                    'mr-2 h-4 w-4',
+                    selectedValues.includes(option.value) ? 'opacity-100' : 'opacity-0',
+                  )}
+                />
+                {option.label}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/turbo.json b/turbo.json
index b0a7a0fc6..4ea966a4d 100644
--- a/turbo.json
+++ b/turbo.json
@@ -43,7 +43,6 @@
     "NEXT_PUBLIC_POSTHOG_KEY",
     "NEXT_PUBLIC_FEATURE_BILLING_ENABLED",
     "NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID",
-    "NEXT_PUBLIC_STRIPE_FREE_PLAN_ID",
     "NEXT_PUBLIC_DISABLE_SIGNUP",
     "NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT",
     "NEXT_PRIVATE_DATABASE_URL",

From fe4345eeb9f3cfc891469d901ebde22554b9f634 Mon Sep 17 00:00:00 2001
From: rajesh <71485855+rajesh-1252@users.noreply.github.com>
Date: Tue, 6 Feb 2024 11:15:46 +0530
Subject: [PATCH 4/6] fix: add responsive for blog preview mobile view (#906)

This Issue https://github.com/documenso/documenso/issues/904
---
 apps/marketing/src/app/(marketing)/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/marketing/src/app/(marketing)/layout.tsx b/apps/marketing/src/app/(marketing)/layout.tsx
index 248414b33..dd1a46418 100644
--- a/apps/marketing/src/app/(marketing)/layout.tsx
+++ b/apps/marketing/src/app/(marketing)/layout.tsx
@@ -41,7 +41,7 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
         <Header className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
       </div>
 
-      <div className="relative mx-auto max-w-screen-xl flex-1 px-4 lg:px-8">{children}</div>
+      <div className="relative max-w-screen-xl flex-1 px-4 sm:mx-auto lg:px-8">{children}</div>
 
       <Footer className="bg-background border-muted mt-24 border-t" />
     </div>

From 58e2eda5e9929c91fd5ab0a904cbbec2ecb8208f Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Wed, 7 Feb 2024 14:40:15 +1100
Subject: [PATCH 5/6] fix: update field remove logic

---
 packages/lib/server-only/field/set-fields-for-document.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/lib/server-only/field/set-fields-for-document.ts b/packages/lib/server-only/field/set-fields-for-document.ts
index 2ba592f31..ecb45d461 100644
--- a/packages/lib/server-only/field/set-fields-for-document.ts
+++ b/packages/lib/server-only/field/set-fields-for-document.ts
@@ -56,11 +56,7 @@ export const setFieldsForDocument = async ({
   });
 
   const removedFields = existingFields.filter(
-    (existingField) =>
-      !fields.find(
-        (field) =>
-          field.id === existingField.id || field.signerEmail === existingField.Recipient?.email,
-      ),
+    (existingField) => !fields.find((field) => field.id === existingField.id),
   );
 
   const linkedFields = fields

From bf26f2cb9d972d17c2419f9a747d7e26b7e2f74e Mon Sep 17 00:00:00 2001
From: Sumit Bisht <75713174+sumitbishti@users.noreply.github.com>
Date: Wed, 7 Feb 2024 10:55:39 +0530
Subject: [PATCH 6/6] fix: empty document titles (#917)

fixes: #909
---
 packages/ui/primitives/document-flow/add-title.tsx      | 5 ++++-
 packages/ui/primitives/document-flow/add-title.types.ts | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/ui/primitives/document-flow/add-title.tsx b/packages/ui/primitives/document-flow/add-title.tsx
index 730c4248f..a6390fd3a 100644
--- a/packages/ui/primitives/document-flow/add-title.tsx
+++ b/packages/ui/primitives/document-flow/add-title.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 
 import type { Field, Recipient } from '@documenso/prisma/client';
@@ -10,6 +11,7 @@ import { Input } from '../input';
 import { Label } from '../label';
 import { useStep } from '../stepper';
 import type { TAddTitleFormSchema } from './add-title.types';
+import { ZAddTitleFormSchema } from './add-title.types';
 import {
   DocumentFlowFormContainerActions,
   DocumentFlowFormContainerContent,
@@ -40,6 +42,7 @@ export const AddTitleFormPartial = ({
     handleSubmit,
     formState: { errors, isSubmitting },
   } = useForm<TAddTitleFormSchema>({
+    resolver: zodResolver(ZAddTitleFormSchema),
     defaultValues: {
       title: document.title,
     },
@@ -71,7 +74,7 @@ export const AddTitleFormPartial = ({
                 id="title"
                 className="bg-background my-2"
                 disabled={isSubmitting}
-                {...register('title', { required: "Title can't be empty" })}
+                {...register('title')}
               />
 
               <FormErrorMessage className="mt-2" error={errors.title} />
diff --git a/packages/ui/primitives/document-flow/add-title.types.ts b/packages/ui/primitives/document-flow/add-title.types.ts
index aaa8c17e4..b910c060a 100644
--- a/packages/ui/primitives/document-flow/add-title.types.ts
+++ b/packages/ui/primitives/document-flow/add-title.types.ts
@@ -1,7 +1,7 @@
 import { z } from 'zod';
 
 export const ZAddTitleFormSchema = z.object({
-  title: z.string().min(1),
+  title: z.string().trim().min(1, { message: "Title can't be empty" }),
 });
 
 export type TAddTitleFormSchema = z.infer<typeof ZAddTitleFormSchema>;