Merge branch 'feat/refresh' into v2-google-auth

2025-11-10 04:22:32 +10:00 · 2023-07-31 13:03:32 +10:00
parent d1bc948f3c 32dcd4aa0e
commit 58baf5ddf4
118 changed files with 17723 additions and 612 deletions
--- a/.env.example
+++ b/.env.example
@ -1,19 +1,56 @@
+# [[AUTH]]
 NEXTAUTH_URL="http://localhost:3000"
 NEXTAUTH_SECRET="secret"

+# [[APP]]
 NEXT_PUBLIC_SITE_URL="http://localhost:3000"
 NEXT_PUBLIC_APP_URL="http://localhost:3000"

+# [[DATABASE]]
 NEXT_PRIVATE_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"

+# [[SMTP]]
+# OPTIONAL: Defines the transport to use for sending emails. Available options: smtp-auth (default) | smtp-api | mailchannels
+NEXT_PRIVATE_SMTP_TRANSPORT="smtp-auth"
+# OPTIONAL: Defines the host to use for sending emails.
+NEXT_PRIVATE_SMTP_HOST="127.0.0.1"
+# OPTIONAL: Defines the port to use for sending emails.
+NEXT_PRIVATE_SMTP_PORT=2500
+# OPTIONAL: Defines the username to use with the SMTP server.
+NEXT_PRIVATE_SMTP_USERNAME="documenso"
+# OPTIONAL: Defines the password to use with the SMTP server.
+NEXT_PRIVATE_SMTP_PASSWORD="password"
+# OPTIONAL: Defines the API key user to use with the SMTP server.
+NEXT_PRIVATE_SMTP_APIKEY_USER=
+# OPTIONAL: Defines the API key to use with the SMTP server.
+NEXT_PRIVATE_SMTP_APIKEY=
+# OPTIONAL: Defines whether to force the use of TLS.
+NEXT_PRIVATE_SMTP_SECURE=
+# REQUIRED: Defines the sender name to use for the from address.
+NEXT_PRIVATE_SMTP_FROM_NAME="No Reply @ Documenso"
+# REQUIRED: Defines the email address to use as the from address.
+NEXT_PRIVATE_SMTP_FROM_ADDRESS="noreply@documenso.com"
+# OPTIONAL: The API key to use for the MailChannels proxy endpoint.
+NEXT_PRIVATE_MAILCHANNELS_API_KEY=
+# OPTIONAL: The endpoint to use for the MailChannels API if using a proxy.
+NEXT_PRIVATE_MAILCHANNELS_ENDPOINT=
+# OPTIONAL: The domain to use for DKIM signing.
+NEXT_PRIVATE_MAILCHANNELS_DKIM_DOMAIN=
+# OPTIONAL: The selector to use for DKIM signing.
+NEXT_PRIVATE_MAILCHANNELS_DKIM_SELECTOR=
+# OPTIONAL: The private key to use for DKIM signing.
+NEXT_PRIVATE_MAILCHANNELS_DKIM_PRIVATE_KEY=
+
+# [[STRIPE]]
+NEXT_PRIVATE_STRIPE_API_KEY=
+NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET=
 NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID=
 NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID=

-NEXT_PRIVATE_STRIPE_API_KEY=
-NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET=
-
+# [[FEATURES]]
 NEXT_PUBLIC_SUBSCRIPTIONS_ENABLED=false

 # This is only required for the marketing site
+# [[REDIS]]
 NEXT_PRIVATE_REDIS_URL=
 NEXT_PRIVATE_REDIS_TOKEN=
--- a/.gitignore
+++ b/.gitignore
@ -34,3 +34,6 @@ yarn-error.log*

 # vercel
 .vercel
+
+# contentlayer
+.contentlayer
--- a/apps/marketing/content/blog/announcing-documenso.mdx
+++ b/apps/marketing/content/blog/announcing-documenso.mdx
@ -0,0 +1,51 @@
+---
+title: Announcing Documenso
+description: Launching an open-source document signing tool because trusted-based products should be built on openness. The first release will be in 2023. Sign up at documenso.com to be on board.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2022-12-29
+tags:
+  - Announcement
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/blog-banner-announcing-documenso.webp"
+    width="1400"
+    height="884"
+    alt="Documenso announcement blog banner"
+  />
+
+  <figcaption className="text-center">Documenso — The DocuSign Open Source Alternative.</figcaption>
+</figure>
+
+## TL; DR;
+
+I am launching an open-source document signing tool because trust-based products should be built on openness. The first release will be in 2023. Sign up at <a href="https://documenso.com" target="_blank">documenso.com</a> and get on board.
+
+## Let’s build the world’s most trusted document-signing tool.
+
+Today I am excited to announce my new Project Documenso. Documenso is an open-source document signing tool you can host yourself and freely build upon because it is, you know, open-source. Before I get more into the details of what and when will be launched I want to take a moment and talk about why.
+
+## Digital signing is great
+
+Signing Documents digitally has countless benefits: Less struggle with printing, less wasting paper, faster request delivery, easier changes, easier coordination of people far away, verifiable document integrity, and verifiable signer identity (this is a vast topic, will write more on soon), easier storage and search of signed documents, the list goes on. Digital Signatures take something very old and very trusted like personally signing documents into the digital space, adding the benefits listed above. It also introduces a new party to every signing transaction, the signing tool providers. What was peer to peer transaction before, now goes through an intermediary. While this is not a problem in itself, it should make us think about how we want these providers of trust to work.
+
+## How do we build trusted systems?
+
+While doing research for Documenso I came upon a quote that expresses the current state of document signing pretty well:
+
+> Document signing is NOT a technical problem. [Editor’s Note: Because it was solved technically a long time ago] It’s a legal acceptance problem — and everyone KNOWS DocuSign and friends and understands how they’re admissible. Anything else would have to compete with that and people would be suspicious of it for a long time.
+
+While this may sound like a hurdle at first, it immediately gave me a sense of validation for a more open approach to signing. People will and should be suspicious of their tools and demand a high bar when it comes to trust. And the way to earn this trust is by being open. Trusted tools should be the result of thoughtful discussion and reviews. They should be the result of the needs and will of its community. They should be transparent, adaptable, and empowering while using. Open-Source embodies these values very well for software, which makes it a perfect fit for this space and creating a high-trust tool.
+
+## Next Steps
+
+So, what can you expect from here on out? I have started to build Documenso 0.1 which is scheduled to release in “early” 2023. If you are interested in helping make this happen, let me know via hi@documenso.com. Getting working code into the hands of the perspective Documenso community is currently the #1 goal. Other than that I will be releasing several articles about document signing and what something like Documenso should look like, in my humble opinion. So stay tuned!
+
+If you think Documenso is worthy of support, please share <a href="https://documenso.com" target="_blank">documenso.com</a> with anyone interested, and sign up to be among the first to try out version 0.1 as soon as it launches.
+
+Cheers from Hamburg
+
+Timur
--- a/apps/marketing/content/blog/building-documenso-pt1.mdx
+++ b/apps/marketing/content/blog/building-documenso-pt1.mdx
@ -0,0 +1,98 @@
+---
+title: 'Building Documenso — Part 1: Certificates'
+description: In today's fast-paced world, productivity and efficiency are crucial for success, both in personal and professional endeavors. We all strive to make the most of our time and energy to achieve our goals effectively. However, it's not always easy to stay on track and maintain peak performance. In this blog post, we'll explore 10 valuable tips to help you boost productivity and efficiency in your daily life.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2023-06-23
+tags:
+  - Open Source
+  - Document Signature
+  - Certificates
+  - Signing
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/blog-banner-building-documenso.webp"
+    width="1200"
+    height="675"
+    alt="Building Documenso blog banner"
+  />
+
+  <figcaption className="text-center">
+    What actually is a signature?
+  </figcaption>
+</figure>
+
+> Disclaimer: I’m not a lawyer and this isn’t legal advice. We plan to publish a much more specific framework on the topic of signature validity.
+
+This is the first installment of the new Building Documenso series, where I describe the challenges and design choices that we make while building the world’s most open signing platform.
+
+As you may have heard, we launched the community-reviewed <a href="https://github.com/documenso/documenso" target="_blank">version 0.9 of Documenso on GitHub</a> recently and it’s now available through the early adopter’s plan. One of the most fundamental choices we had to make on this first release, was the choice of certificate. While it’s interesting to know what we opted for, this shall also serve as a guide for everyone facing the same choice for self-hosting Documenso.
+
+> Question: Why do I need a document signing certificate to self-host?
+>
+> Short Answer: Inserting the images of a signature into the document is only part of the signing process.
+
+To have an actual digitally signed document you need a document signing certificate that is used to create the digital signature that is inserted into the document, alongside the visible one¹.
+
+When hosting a signature service yourself, as we do, there are four main choices for handling the certificate: Not using a certificate, creating your own, buying a trusted certificate, and becoming and trusted service provider to issue your own trusted certificate.
+
+## 1\. No Certificate
+
+A lot of signing services actually don’t employ actual digital signatures besides the inserted image. The only insert and image of the signatures into the document you sign. This can be done and is legally acceptable in many cases. This option isn’t directly supported by Documenso without changing the code.
+
+## 2\. Create your own
+
+Since the cryptography behind certificates is freely available as open source you could generate your own using OpenSSL for example. Since it’s hardly more work than option 1 (using Documenso at least), this would be my minimum effort recommendation. Having a self-created (“self-signed”) certificate doesn’t add much in terms of regulation but it guarantees the document’s integrity, meaning no changes have been made after signing². What this doesn’t give you, is the famous green checkmark in Adobe Acrobat. Why? Because you aren’t on the list of providers Adobe “trusts”.³
+
+## 3\. Buy a “trusted” certificate.
+
+There are Certificate Authorities (CAs) that can sell you a certificate⁴. The service they provide is, that they validate your name (personal certificates) or your organization’s name (corporate certificate) before creating your certificate for you, just like you did in option 2. The difference is, that they are listed on the previously mentioned trust lists (e.g. Adobe’s) and thus the resulting signatures get a nice, green checkmark in Adobe Reader⁵
+
+## 4\. Becoming a Trusted Certificate Authority (CA) yourself and create your own certificate
+
+This option is an incredibly complex endeavour, requiring a lot of effort and skill. It can be done, as there are multiple CAs around the world. Is it worth the effort? That depends a lot on what you’re trying to accomplish.
+
+<center>.&nbsp;&nbsp;.&nbsp;&nbsp;.</center>
+
+## What we did
+
+Having briefly introduced the options, here is what we did: Since we aim to raise the bar on digital signature proliferation and trust, we opted to buy an “Advanced Personal Certificates for Companies/Organisations” from WiseKey. Thus, documents signed with Documenso’s hosted version look like this:
+
+<figure>
+  <MdxNextImage
+    src="/blog/blog-fig-building-documenso.webp"
+    width="1262"
+    height="481"
+    alt="Figure 1"
+  />
+
+  <figcaption className="text-center">The famous green checkmark: Signed by hosted Documenso</figcaption>
+</figure>
+
+There weren’t any deeper reasons we choose WiseKey, other than they offered what we needed and there wasn’t any reason to look much further. While I didn’t map the entire certificate market offering (yet), I’m pretty sure something similar could be found elsewhere. While we opted for option 3, choosing option 2 might be perfectly reasonable considering your use case.⁶
+
+> While this is our setup, for now, we have a bigger plan for this topic. While globally trusted SSL Certificates have been available for free, courtesy of Let’s Encrypt, for a while now, there is no such thing as document signing. And there should be. Not having free and trusted infrastructure for signing is blocking a completely new generation of signing products from being created. This is why we’ll start working on option 4 when the time is right.
+
+Do you have questions or thoughts about this? As always, let me know in the comments, on <a href="http://twitter.com/eltimuro" target="_blank">twitter.com/eltimuro</a>
+or directly: <a href="https://documen.so/timur" target="_blank">documen.so/timur</a>
+
+Join the self-hoster community here: <a href="https://documenso.slack.com/" target="_blank">https://documenso.slack.com/</a>
+
+Best from Hamburg
+
+Timur
+
+\[1\] There are different approaches to signing a document. For the sake of simplicity, here we talk about a document with X inserted signature images, that is afterward signed once the by signing service, i.e. Documenso. If each visual signature should have its own digital one (e.g. QES — eIDAS Level 3), the case is a bit more complex.
+
+\[2\] Of course, the signing service provider technically can change and resign the document, especially in the case mentioned in \[1\]. This can be countered by requiring actual digital signatures from each signer, that are bound to their identity/ account. Creating a completely trustless system in the context however is extremely hard to do and not the most pressing business need for the industry at this point, in my opinion. Though, this would be nice.
+
+\[3\] Adobe, like the EU, has a list of organizations they trust. The Adobe green checkmark is powered by the Adobe trust list, if you want to be trusted by EU standards here: <a href="https://ec.europa.eu/digital-building-blocks/DSS/webapp-demo/validation" target="_blank">https://ec.europa.eu/digital-building-blocks/DSS/webapp-demo/validation</a>, you need to be on the EU trust list. Getting on each list is possible, though the latter is much more work.
+
+\[4\] Technically, they sign your certificate creation request (created by you), containing your info with their certificate (which is trusted), making your certificate trusted. This way, everything you sign with your certificate is seen as trusted. They created their certificate just like you, the difference is they are on the lists, mentioned in \[3\]
+
+\[5\] Why does Adobe get to say, what is trusted? They simply happen to have the most used pdf viewer. And since everyone checks there, whom they consider trusted carries weight. If it should be like this, is a different matter.
+
+\[6\] Self-Signed signatures, even purely visual signatures, are fully legally binding. Why you use changes mainly your confidence in the signature and the burden of proof. Also, some industries require a certain level of signatures e.g. retail loans (QES/ eIDAS Level 3 in the EU).
--- a/apps/marketing/content/blog/the-documenso-manifest.mdx
+++ b/apps/marketing/content/blog/the-documenso-manifest.mdx
@ -0,0 +1,29 @@
+---
+title: The Documenso Manifest
+description: Signing documents is a fundamental building block of private, economic, and government interactions. Access to easy and secure signing to participate in society should therefore be a fundamental right for everyone. The technology to enable this should be accessible and widespread.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2023-07-13
+tags:
+  - Manifesto
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/blog-banner-manifest.jpeg"
+    width="1260"
+    height="630"
+    alt="The Documenso Manifest blog banner"
+  />
+
+  <figcaption className="text-center">
+    Documenso — The DocuSign Open Source Alternative.
+  </figcaption>
+</figure>
+
+Signing documents is a fundamental building block of private, economic, and government interactions. Access to easy and secure signing to participate in society should therefore be a fundamental right for everyone. The technology to enable this should be accessible and widespread.
+
+We know that open source is the key to solving this need once and for all to benefit all humankind. Using open source kickstarts innovation by putting the open sharing of ideas and solutions first. With Documenso, we will create an open and globally accessible signing platform to empower users, customers, and developers to fulfill their needs. Documenso is built by and for the global community, listening and implementing what is needed. Being transparent with the code and the processes that use it brings trust and security to the platform.
+
+We build Documenso for longevity and scale by embracing the capital efficiency and inclusiveness of the Commercial Open Source (COSS) movement. We are building a global commodity for the world.
--- a/apps/marketing/content/privacy.mdx
+++ b/apps/marketing/content/privacy.mdx
@ -0,0 +1,256 @@
+---
+title: Privacy Policy
+---
+
+# Privacy Policy
+
+Effective date: 05/28/2023
+
+### 1\. Introduction
+
+Welcome to **Documenso Inc.**
+
+Documenso Inc. (“us”, “we”, or “our”) operates [https://documenso.com](https://documenso.com) (hereinafter referred to as “ **Service**”).
+
+Our Privacy Policy governs your visit to [https://documenso.com](https://documenso.com), and explains how we collect, safeguard and disclose information that results from your use of our Service.
+
+We use your data to provide and improve Service. By using Service, you agree to the collection and use of information in accordance with this policy. Unless otherwise defined in this Privacy Policy, the terms used in this Privacy Policy have the same meanings as in our Terms and Conditions.
+
+Our Terms and Conditions (“**Terms**”) govern all use of our Service and together with the Privacy Policy constitutes your agreement with us (“ **agreement**”).
+
+### 2\. Definitions
+
+**SERVICE** means the https://documenso.com website operated by Documenso Inc.
+
+**PERSONAL DATA** means data about a living individual who can be identified from those data (or from those and other information either in our possession or likely to come into our possession).
+
+**USAGE DATA** is data collected automatically either generated by the use of Service or from Service infrastructure itself (for example, the duration of a page visit).
+
+**COOKIES** are small files stored on your device (computer or mobile device).
+
+**DATA CONTROLLER** means a natural or legal person who (either alone or jointly or in common with other persons) determines the purposes for which and the manner in which any personal data are, or are to be, processed. For the purpose of this Privacy Policy, we are a Data Controller of your data.
+
+**DATA PROCESSORS (OR SERVICE PROVIDERS)** means any natural or legal person who processes the data on behalf of the Data Controller. We may use the services of various Service Providers in order to process your data more effectively.
+
+**DATA SUBJECT** is any living individual who is the subject of Personal Data.
+
+**THE USER** is the individual using our Service. The User corresponds to the Data Subject, who is the subject of Personal Data.
+
+### 3\. Information Collection and Use
+
+We collect several different types of information for various purposes to provide and improve our Service to you.
+
+### 4\. Types of Data Collected
+
+**Personal Data**
+
+While using our Service, we may ask you to provide us with certain personally identifiable information that can be used to contact or identify you (“**Personal Data**”). Personally identifiable information may include, but is not limited to:
+
+1.  Email address
+2.  First name and last name
+3.  Cookies and Usage Data
+
+We may use your Personal Data to contact you with newsletters, marketing or promotional materials and other information that may be of interest to you. You may opt out of receiving any, or all, of these communications from us by following the unsubscribe link.
+
+**Usage Data**
+
+We may also collect information that your browser sends whenever you visit our Service or when you access Service by or through a mobile device (“**Usage Data**”).
+
+This Usage Data may include information such as your computer's Internet Protocol address (e.g. IP address), browser type, browser version, the pages of our Service that you visit, the time and date of your visit, the time spent on those pages, unique device identifiers and other diagnostic data.
+
+When you access Service with a mobile device, this Usage Data may include information such as the type of mobile device you use, your mobile device unique ID, the IP address of your mobile device, your mobile operating system, the type of mobile Internet browser you use, unique device identifiers and other diagnostic data.
+
+**Tracking Cookies Data**
+
+We use cookies and similar tracking technologies to track the activity on our Service and we hold certain information.
+
+Cookies are files with a small amount of data which may include an anonymous unique identifier. Cookies are sent to your browser from a website and stored on your device. Other tracking technologies are also used such as beacons, tags and scripts to collect and track information and to improve and analyze our Service.
+
+You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent. However, if you do not accept cookies, you may not be able to use some portions of our Service.
+
+Examples of Cookies we use:
+
+1.  **Session Cookies:** We use Session Cookies to operate our Service.
+2.  **Preference Cookies:** We use Preference Cookies to remember your preferences and various settings.
+3.  **Security Cookies:** We use Security Cookies for security purposes.
+4.  **Advertising Cookies:** Advertising Cookies are used to serve you with advertisements that may be relevant to you and your interests.
+
+### 5\. Use of Data
+
+Documenso Inc. uses the collected data for various purposes:
+
+1.  to provide and maintain our Service;
+2.  to notify you about changes to our Service;
+3.  to allow you to participate in interactive features of our Service when you choose to do so;
+4.  to provide customer support;
+5.  to gather analysis or valuable information so that we can improve our Service;
+6.  to monitor the usage of our Service;
+7.  to detect, prevent and address technical issues;
+8.  to fulfill any other purpose for which you provide it;
+9.  to carry out our obligations and enforce our rights arising from any contracts entered into between you and us, including for billing and collection;
+10. to provide you with notices about your account and/or subscription, including expiration and renewal notices, email-instructions, etc.;
+11. to provide you with news, special offers and general information about other goods, services and events which we offer that are similar to those that you have already purchased or enquired about unless you have opted not to receive such information;
+12. in any other way we may describe when you provide the information;
+13. for any other purpose with your consent.
+
+### 6\. Retention of Data
+
+We will retain your Personal Data only for as long as is necessary for the purposes set out in this Privacy Policy. We will retain and use your Personal Data to the extent necessary to comply with our legal obligations (for example, if we are required to retain your data to comply with applicable laws), resolve disputes, and enforce our legal agreements and policies.
+
+We will also retain Usage Data for internal analysis purposes. Usage Data is generally retained for a shorter period, except when this data is used to strengthen the security or to improve the functionality of our Service, or we are legally obligated to retain this data for longer time periods.
+
+### 7\. Transfer of Data
+
+Your information, including Personal Data, may be transferred to – and maintained on – computers located outside of your state, province, country or other governmental jurisdiction where the data protection laws may differ from those of your jurisdiction.
+
+If you are located outside United States and choose to provide information to us, please note that we transfer the data, including Personal Data, to United States and process it there.
+
+Your consent to this Privacy Policy followed by your submission of such information represents your agreement to that transfer.
+
+Documenso Inc. will take all the steps reasonably necessary to ensure that your data is treated securely and in accordance with this Privacy Policy and no transfer of your Personal Data will take place to an organisation or a country unless there are adequate controls in place including the security of your data and other personal information.
+
+### 8\. Disclosure of Data
+
+We may disclose personal information that we collect, or you provide:
+
+1.  **Disclosure for Law Enforcement.**
+2.  Under certain circumstances, we may be required to disclose your Personal Data if required to do so by law or in response to valid requests by public authorities.
+3.  **Business Transaction.**
+4.  If we or our subsidiaries are involved in a merger, acquisition or asset sale, your Personal Data may be transferred.
+5.  **Other cases. We may disclose your information also:**
+    1.  to our subsidiaries and affiliates;
+    2.  to contractors, service providers, and other third parties we use to support our business;
+    3.  to fulfill the purpose for which you provide it;
+
+### 9\. Security of Data
+
+The security of your data is important to us but remember that no method of transmission over the Internet or method of electronic storage is 100% secure. While we strive to use commercially acceptable means to protect your Personal Data, we cannot guarantee its absolute security.
+
+### 10\. Your Data Protection Rights Under General Data Protection Regulation (GDPR)
+
+If you are a resident of the European Union (EU) and European Economic Area (EEA), you have certain data protection rights, covered by GDPR. – See more at [https://eur-lex.europa.eu/eli/reg/2016/679/oj](https://eur-lex.europa.eu/eli/reg/2016/679/oj)
+
+We aim to take reasonable steps to allow you to correct, amend, delete, or limit the use of your Personal Data.
+
+If you wish to be informed what Personal Data we hold about you and if you want it to be removed from our systems, please email us at hi@documenso.com.
+
+In certain circumstances, you have the following data protection rights:
+
+1.  the right to access, update or to delete the information we have on you;
+2.  the right of rectification. You have the right to have your information rectified if that information is inaccurate or incomplete;
+3.  the right to object. You have the right to object to our processing of your Personal Data;
+4.  the right of restriction. You have the right to request that we restrict the processing of your personal information;
+5.  the right to data portability. You have the right to be provided with a copy of your Personal Data in a structured, machine-readable and commonly used format;
+6.  the right to withdraw consent. You also have the right to withdraw your consent at any time where we rely on your consent to process your personal information;
+
+Please note that we may ask you to verify your identity before responding to such requests. Please note, we may not able to provide Service without some necessary data.
+
+You have the right to complain to a Data Protection Authority about our collection and use of your Personal Data. For more information, please contact your local data protection authority in the European Economic Area (EEA).
+
+### 11\. Your Data Protection Rights under the California Privacy Protection Act (CalOPPA)
+
+CalOPPA is the first state law in the nation to require commercial websites and online services to post a privacy policy. The law’s reach stretches well beyond California to require a person or company in the United States (and conceivable the world) that operates websites collecting personally identifiable information from California consumers to post a conspicuous privacy policy on its website stating exactly the information being collected and those individuals with whom it is being shared, and to comply with this policy. – See more at: [https://consumercal.org/about-cfc/cfc-education-foundation/california-online-privacy-protection-act-caloppa-3/](https://consumercal.org/about-cfc/cfc-education-foundation/california-online-privacy-protection-act-caloppa-3/)
+
+According to CalOPPA we agree to the following:
+
+1.  users can visit our site anonymously;
+2.  our Privacy Policy link includes the word “Privacy”, and can easily be found on the page specified above on the home page of our website;
+3.  users will be notified of any privacy policy changes on our Privacy Policy Page;
+4.  users are able to change their personal information by emailing us at hi@documenso.com.
+
+Our Policy on “Do Not Track” Signals:
+
+We honor Do Not Track signals and do not track, plant cookies, or use advertising when a Do Not Track browser mechanism is in place. Do Not Track is a preference you can set in your web browser to inform websites that you do not want to be tracked.
+
+You can enable or disable Do Not Track by visiting the Preferences or Settings page of your web browser.
+
+### 12\. Your Data Protection Rights under the California Consumer Privacy Act (CCPA)
+
+If you are a California resident, you are entitled to learn what data we collect about you, ask to delete your data and not to sell (share) it. To exercise your data protection rights, you can make certain requests and ask us:
+
+1.  **What personal information we have about you**. If you make this request, we will return to you:
+
+    1.  The categories of personal information we have collected about you.
+    2.  The categories of sources from which we collect your personal information.
+    3.  The business or commercial purpose for collecting or selling your personal information.
+    4.  The categories of third parties with whom we share personal information.
+    5.  The specific pieces of personal information we have collected about you.
+    6.  A list of categories of personal information that we have sold, along with the category of any other company we sold it to. If we have not sold your personal information, we will inform you of that fact.
+    7.  A list of categories of personal information that we have disclosed for a business purpose, along with the category of any other company we shared it with.
+
+    Please note, you are entitled to ask us to provide you with this information up to two times in a rolling twelve-month period. When you make this request, the information provided may be limited to the personal information we collected about you in the previous 12 months.
+
+2.  **To delete your personal information**. If you make this request, we will delete the personal information we hold about you as of the date of your request from our records and direct any service providers to do the same. In some cases, deletion may be accomplished through de-identification of the information. If you choose to delete your personal information, you may not be able to use certain functions that require your personal information to operate.
+3.  **To stop selling your personal information**. We don't sell or rent your personal information to any third parties for any purpose. You are the only owner of your Personal Data and can request disclosure or deletion at any time.
+
+Please note, if you ask us to delete or stop selling your data, it may impact your experience with us, and you may not be able to participate in certain programs or membership services which require the usage of your personal information to function. But in no circumstances, we will discriminate against you for exercising your rights.
+
+To exercise your California data protection rights described above, please send your request(s) by one of the following means:
+
+By email: hi@documenso.com
+
+Your data protection rights, described above, are covered by the CCPA, short for the California Consumer Privacy Act. To find out more, visit the official [California Legislative Information website](https://leginfo.legislature.ca.gov/faces/billTextClient.xhtml?bill_id=201720180AB375). The CCPA took effect on 01/01/2020.
+
+### 13\. Service Providers
+
+We may employ third party companies and individuals to facilitate our Service (“ **Service Providers**”), provide Service on our behalf, perform Service-related services or assist us in analysing how our Service is used.
+
+These third parties have access to your Personal Data only to perform these tasks on our behalf and are obligated not to disclose or use it for any other purpose.
+
+### 14\. Analytics
+
+We may use third-party Service Providers to monitor and analyze the use of our Service.
+
+**Plausible Analytics**
+
+Plausible Analytics is an analytics service provided by Conva Ventures Inc. You can find their Privacy Policy here: [https://plausible.io/privacy](https://plausible.io/privacy)
+
+### 15\. CI/CD tools
+
+We may use third-party Service Providers to automate the development process of our Service.
+
+**GitHub**
+
+GitHub is provided by GitHub, Inc.
+
+GitHub is a development platform to host and review code, manage projects, and build software.
+
+For more information on what data GitHub collects for what purpose and how the protection of the data is ensured, please visit GitHub Privacy Policy page: [https://help.github.com/en/articles/github-privacy-statement](https://help.github.com/en/articles/github-privacy-statement) .
+
+### 16\. Payments
+
+We may provide paid products and/or services within Service. In that case, we use third-party services for payment processing (e.g. payment processors).
+
+We will not store or collect your payment card details. That information is provided directly to our third-party payment processors whose use of your personal information is governed by their Privacy Policy. These payment processors adhere to the standards set by PCI-DSS as managed by the PCI Security Standards Council, which is a joint effort of brands like Visa, Mastercard, American Express and Discover. PCI-DSS requirements help ensure the secure handling of payment information.
+
+The payment processors we work with are:
+
+**Stripe:**
+
+Their Privacy Policy can be viewed at: [https://stripe.com/us/privacy](https://stripe.com/us/privacy)
+
+### 17\. Links to Other Sites
+
+Our Service may contain links to other sites that are not operated by us. If you click a third party link, you will be directed to that third party's site. We strongly advise you to review the Privacy Policy of every site you visit.
+
+We have no control over and assume no responsibility for the content, privacy policies or practices of any third party sites or services.
+
+### 18\. Children's Privacy
+
+Our Services are not intended for use by children under the age of 18 (“ **Child**” or “**Children**”).
+
+We do not knowingly collect personally identifiable information from Children under 18. If you become aware that a Child has provided us with Personal Data, please contact us. If we become aware that we have collected Personal Data from Children without verification of parental consent, we take steps to remove that information from our servers.
+
+### 19\. Changes to This Privacy Policy
+
+We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page.
+
+We will let you know via email and/or a prominent notice on our Service, prior to the change becoming effective and update “effective date” at the top of this Privacy Policy.
+
+You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are effective when they are posted on this page.
+
+### 20\. Contact Us
+
+If you have any questions about this Privacy Policy, please contact us:
+
+By email: hi@documenso.com.
--- a/apps/marketing/contentlayer.config.ts
+++ b/apps/marketing/contentlayer.config.ts
@ -0,0 +1,33 @@
+import { defineDocumentType, makeSource } from 'contentlayer/source-files';
+
+export const BlogPost = defineDocumentType(() => ({
+  name: 'BlogPost',
+  filePathPattern: `blog/**/*.mdx`,
+  contentType: 'mdx',
+  fields: {
+    title: { type: 'string', required: true },
+    description: { type: 'string', required: true },
+    date: { type: 'date', required: true },
+    tags: { type: 'list', of: { type: 'string' }, required: false, default: [] },
+    authorName: { type: 'string', required: true },
+    authorImage: { type: 'string', required: false },
+    authorRole: { type: 'string', required: true },
+  },
+  computedFields: {
+    href: { type: 'string', resolve: (post) => `/${post._raw.flattenedPath}` },
+  },
+}));
+
+export const GenericPage = defineDocumentType(() => ({
+  name: 'GenericPage',
+  filePathPattern: '**/*.mdx',
+  contentType: 'mdx',
+  fields: {
+    title: { type: 'string', required: true },
+  },
+  computedFields: {
+    href: { type: 'string', resolve: (post) => `/${post._raw.flattenedPath}` },
+  },
+}));
+
+export default makeSource({ contentDirPath: 'content', documentTypes: [BlogPost, GenericPage] });
--- a/apps/marketing/next.config.js
+++ b/apps/marketing/next.config.js
@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
+const { withContentlayer } = require('next-contentlayer');

 const { parsed: env } = require('dotenv').config({
  path: path.join(__dirname, '../../.env.local'),
@ -12,4 +13,4 @@ const config = {
  env,
 };

-module.exports = config;
+module.exports = withContentlayer(config);
--- a/apps/marketing/package.json
+++ b/apps/marketing/package.json
@ -15,11 +15,13 @@
    "@documenso/trpc": "*",
    "@documenso/ui": "*",
    "@hookform/resolvers": "^3.1.0",
+    "contentlayer": "^0.3.4",
    "framer-motion": "^10.12.8",
    "lucide-react": "^0.214.0",
    "micro": "^10.0.1",
-    "next": "13.4.1",
+    "next": "13.4.9",
    "next-auth": "^4.22.1",
+    "next-contentlayer": "^0.3.4",
    "next-plausible": "^3.7.2",
    "perfect-freehand": "^1.2.0",
    "react": "18.2.0",
--- a/apps/marketing/public/blog/blog-author-timur.jpeg
+++ b/apps/marketing/public/blog/blog-author-timur.jpeg
--- a/apps/marketing/public/blog/blog-banner-announcing-documenso.webp
+++ b/apps/marketing/public/blog/blog-banner-announcing-documenso.webp
--- a/apps/marketing/public/blog/blog-banner-building-documenso.webp
+++ b/apps/marketing/public/blog/blog-banner-building-documenso.webp
--- a/apps/marketing/public/blog/blog-banner-manifest.jpeg
+++ b/apps/marketing/public/blog/blog-banner-manifest.jpeg
--- a/apps/marketing/public/blog/blog-fig-building-documenso.webp
+++ b/apps/marketing/public/blog/blog-fig-building-documenso.webp
--- a/apps/marketing/src/app/(marketing)/[content]/page.tsx
+++ b/apps/marketing/src/app/(marketing)/[content]/page.tsx
@ -0,0 +1,46 @@
+import Image from 'next/image';
+import { notFound } from 'next/navigation';
+
+import { allDocuments } from 'contentlayer/generated';
+import type { MDXComponents } from 'mdx/types';
+import { useMDXComponent } from 'next-contentlayer/hooks';
+
+export const generateStaticParams = async () =>
+  allDocuments.map((post) => ({ post: post._raw.flattenedPath }));
+
+export const generateMetadata = ({ params }: { params: { content: string } }) => {
+  const document = allDocuments.find((post) => post._raw.flattenedPath === params.content);
+
+  if (!document) {
+    notFound();
+  }
+
+  return { title: `Documenso - ${document.title}` };
+};
+
+const mdxComponents: MDXComponents = {
+  MdxNextImage: (props: { width: number; height: number; alt?: string; src: string }) => (
+    <Image {...props} alt={props.alt ?? ''} />
+  ),
+};
+
+/**
+ * A generic catch all page for the root level that checks for content layer documents.
+ *
+ * Will render the document if it exists, otherwise will return a 404.
+ */
+export default function ContentPage({ params }: { params: { content: string } }) {
+  const post = allDocuments.find((post) => post._raw.flattenedPath === params.content);
+
+  if (!post) {
+    notFound();
+  }
+
+  const MDXContent = useMDXComponent(post.body.code);
+
+  return (
+    <article className="prose prose-slate mx-auto">
+      <MDXContent components={mdxComponents} />
+    </article>
+  );
+}
--- a/apps/marketing/src/app/(marketing)/blog/[post]/page.tsx
+++ b/apps/marketing/src/app/(marketing)/blog/[post]/page.tsx
@ -0,0 +1,88 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+
+import { allBlogPosts } from 'contentlayer/generated';
+import { ChevronLeft } from 'lucide-react';
+import type { MDXComponents } from 'mdx/types';
+import { useMDXComponent } from 'next-contentlayer/hooks';
+
+export const generateStaticParams = async () =>
+  allBlogPosts.map((post) => ({ post: post._raw.flattenedPath }));
+
+export const generateMetadata = ({ params }: { params: { post: string } }) => {
+  const blogPost = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`);
+
+  if (!blogPost) {
+    notFound();
+  }
+
+  return { title: `Documenso - ${blogPost.title}` };
+};
+
+const mdxComponents: MDXComponents = {
+  MdxNextImage: (props: { width: number; height: number; alt?: string; src: string }) => (
+    <Image {...props} alt={props.alt ?? ''} />
+  ),
+};
+
+export default function BlogPostPage({ params }: { params: { post: string } }) {
+  const post = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`);
+
+  if (!post) {
+    notFound();
+  }
+
+  const MDXContent = useMDXComponent(post.body.code);
+
+  return (
+    <article className="prose prose-slate mx-auto py-8">
+      <div className="mb-6 text-center">
+        <time dateTime={post.date} className="mb-1 text-xs text-gray-600">
+          {new Date(post.date).toLocaleDateString()}
+        </time>
+
+        <h1 className="text-3xl font-bold">{post.title}</h1>
+
+        <div className="not-prose relative -mt-2 flex items-center gap-x-4 border-b border-t py-4">
+          <div className="h-10 w-10 rounded-full bg-gray-50">
+            {post.authorImage && (
+              <img
+                src={post.authorImage}
+                alt={`Image of ${post.authorName}`}
+                className="h-10 w-10 rounded-full bg-gray-50"
+              />
+            )}
+          </div>
+
+          <div className="text-sm leading-6">
+            <p className="text-foreground text-left font-semibold">{post.authorName}</p>
+            <p className="text-muted-foreground">{post.authorRole}</p>
+          </div>
+        </div>
+      </div>
+
+      <MDXContent components={mdxComponents} />
+
+      {post.tags.length > 0 && (
+        <ul className="not-prose flex list-none flex-row space-x-2 px-0">
+          {post.tags.map((tag, i) => (
+            <li
+              key={`tag-${i}`}
+              className="bg-muted hover:bg-muted/60 text-foreground relative z-10 whitespace-nowrap rounded-full px-3 py-1.5 text-sm font-medium"
+            >
+              {tag}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <hr />
+
+      <Link href="/blog" className="text-muted-foreground flex items-center hover:opacity-60">
+        <ChevronLeft className="mr-2 h-6 w-6" />
+        Back to all posts
+      </Link>
+    </article>
+  );
+}
--- a/apps/marketing/src/app/(marketing)/blog/page.tsx
+++ b/apps/marketing/src/app/(marketing)/blog/page.tsx
@ -0,0 +1,80 @@
+import { allBlogPosts } from 'contentlayer/generated';
+
+export default function BlogPage() {
+  const blogPosts = allBlogPosts.sort((a, b) => {
+    const dateA = new Date(a.date);
+    const dateB = new Date(b.date);
+
+    return dateB.getTime() - dateA.getTime();
+  });
+
+  return (
+    <div className="mt-6 sm:mt-12">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold lg:text-5xl">From the blog</h1>
+
+        <p className="mx-auto mt-4 max-w-xl text-center text-lg leading-normal text-[#31373D]">
+          Get the latest news from Documenso, including product updates, team announcements and
+          more!
+        </p>
+      </div>
+
+      <div className="mt-10 divide-y divide-slate-100 border-t border-slate-200 ">
+        {blogPosts.map((post, i) => (
+          <article
+            key={`blog-${i}`}
+            className="mx-auto mt-8 flex max-w-xl flex-col items-start justify-between pt-8 first:pt-0 sm:mt-16 sm:pt-16"
+          >
+            <div className="flex items-center gap-x-4 text-xs">
+              <time dateTime={post.date} className="text-muted-foreground">
+                {new Date(post.date).toLocaleDateString()}
+              </time>
+
+              {post.tags.length > 0 && (
+                <ul className="flex flex-row space-x-2">
+                  {post.tags.map((tag, j) => (
+                    <li
+                      key={`blog-${i}-tag-${j}`}
+                      className="text-foreground bg-muted hover:bg-muted/60 relative z-10 whitespace-nowrap rounded-full px-3 py-1.5 font-medium"
+                    >
+                      {tag}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+
+            <div className="group relative">
+              <h3 className="text-foreground group-hover:text-foreground/60 mt-3 text-lg font-semibold leading-6">
+                <a href={post.href}>
+                  <span className="absolute inset-0" />
+                  {post.title}
+                </a>
+              </h3>
+              <p className="text-foreground/60 mt-5 line-clamp-3 text-sm leading-6">
+                {post.description}
+              </p>
+            </div>
+
+            <div className="relative mt-4 flex items-center gap-x-4">
+              <div className="h-10 w-10 rounded-full bg-slate-50">
+                {post.authorImage && (
+                  <img
+                    src={post.authorImage}
+                    alt={`Image of ${post.authorName}`}
+                    className="h-10 w-10 rounded-full bg-slate-50"
+                  />
+                )}
+              </div>
+
+              <div className="text-sm leading-6">
+                <p className="text-foreground font-semibold">{post.authorName}</p>
+                <p className="text-foreground/60">{post.authorRole}</p>
+              </div>
+            </div>
+          </article>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/apps/marketing/src/app/(marketing)/oss-friends/page.tsx
+++ b/apps/marketing/src/app/(marketing)/oss-friends/page.tsx
@ -0,0 +1,204 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { Variants, motion } from 'framer-motion';
+
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent, CardTitle } from '@documenso/ui/primitives/card';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+
+const OSSFriends = [
+  {
+    name: 'BoxyHQ',
+    description:
+      'BoxyHQ’s suite of APIs for security and privacy helps engineering teams build and ship compliant cloud applications faster.',
+    href: 'https://boxyhq.com',
+  },
+  {
+    name: 'Cal.com',
+    description:
+      'Cal.com is a scheduling tool that helps you schedule meetings without the back-and-forth emails.',
+    href: 'https://cal.com',
+  },
+  {
+    name: 'Crowd.dev',
+    description:
+      'Centralize community, product, and customer data to understand which companies are engaging with your open source project.',
+    href: 'https://www.crowd.dev',
+  },
+  {
+    name: 'Documenso',
+    description:
+      'The Open-Source DocuSign Alternative. We aim to earn your trust by enabling you to self-host the platform and examine its inner workings.',
+    href: 'https://documenso.com',
+  },
+  {
+    name: 'Erxes',
+    description:
+      'The Open-Source HubSpot Alternative. A single XOS enables to create unique and life-changing experiences that work for all types of business.',
+    href: 'https://erxes.io',
+  },
+  {
+    name: 'Formbricks',
+    description:
+      'Survey granular user segments at any point in the user journey. Gather up to 6x more insights with targeted micro-surveys. All open-source.',
+    href: 'https://formbricks.com',
+  },
+  {
+    name: 'Forward Email',
+    description:
+      'Free email forwarding for custom domains. For 6 years and counting, we are the go-to email service for thousands of creators, developers, and businesses.',
+    href: 'https://forwardemail.net',
+  },
+  {
+    name: 'GitWonk',
+    description:
+      'GitWonk is an open-source technical documentation tool, designed and built focusing on the developer experience.',
+    href: 'https://gitwonk.com',
+  },
+  {
+    name: 'Hanko',
+    description:
+      'Open-source authentication and user management for the passkey era. Integrated in minutes, for web and mobile apps.',
+    href: 'https://www.hanko.io',
+  },
+  {
+    name: 'HTMX',
+    description:
+      'HTMX is a dependency-free JavaScript library that allows you to access AJAX, CSS Transitions, WebSockets, and Server Sent Events directly in HTML.',
+    href: 'https://htmx.org',
+  },
+  {
+    name: 'Infisical',
+    description:
+      'Open source, end-to-end encrypted platform that lets you securely manage secrets and configs across your team, devices, and infrastructure.',
+    href: 'https://infisical.com',
+  },
+  {
+    name: 'Novu',
+    description:
+      'The open-source notification infrastructure for developers. Simple components and APIs for managing all communication channels in one place.',
+    href: 'https://novu.co',
+  },
+  {
+    name: 'OpenBB',
+    description:
+      'Democratizing investment research through an open source financial ecosystem. The OpenBB Terminal allows everyone to perform investment research, from everywhere.',
+    href: 'https://openbb.co',
+  },
+  {
+    name: 'Sniffnet',
+    description:
+      'Sniffnet is a network monitoring tool to help you easily keep track of your Internet traffic.',
+    href: 'https://www.sniffnet.net',
+  },
+  {
+    name: 'Typebot',
+    description:
+      'Typebot gives you powerful blocks to create unique chat experiences. Embed them anywhere on your apps and start collecting results like magic.',
+    href: 'https://typebot.io',
+  },
+  {
+    name: 'Webiny',
+    description:
+      'Open-source enterprise-grade serverless CMS. Own your data. Scale effortlessly. Customize everything.',
+    href: 'https://www.webiny.com',
+  },
+  {
+    name: 'Webstudio',
+    description: 'Webstudio is an open source alternative to Webflow',
+    href: 'https://webstudio.is',
+  },
+];
+
+const ContainerVariants: Variants = {
+  initial: {
+    opacity: 0,
+  },
+  animate: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.075,
+    },
+  },
+};
+
+const CardVariants: Variants = {
+  initial: {
+    opacity: 0,
+    y: 50,
+  },
+  animate: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.5,
+    },
+  },
+};
+
+const randomDegrees = () => {
+  const degrees = [45, 120, -140, -45];
+
+  return degrees[Math.floor(Math.random() * degrees.length)];
+};
+
+export default function OSSFriendsPage() {
+  return (
+    <div className="relative mt-12">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold lg:text-5xl">
+          Our <span title="Open Source Software">OSS</span> Friends
+        </h1>
+
+        <p className="mx-auto mt-4 max-w-[55ch] text-lg leading-normal text-[#31373D]">
+          We love open source and so should you, below you can find a list of our friends who are
+          just as passionate about open source as we are.
+        </p>
+      </div>
+
+      <motion.div
+        className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"
+        variants={ContainerVariants}
+        initial="initial"
+        animate="animate"
+      >
+        {OSSFriends.map((friend, index) => (
+          <motion.div key={index} className="h-full w-full" variants={CardVariants}>
+            <Card
+              className="h-full"
+              degrees={randomDegrees()}
+              gradient={index % 2 === 0}
+              spotlight={index % 2 !== 0}
+            >
+              <CardContent className="flex h-full flex-col p-6">
+                <CardTitle>
+                  <Link href={friend.href}>{friend.name}</Link>
+                </CardTitle>
+
+                <p className="mt-4 flex-1 text-sm text-slate-700">{friend.description}</p>
+
+                <div className="mt-8">
+                  <Link target="_blank" href={friend.href}>
+                    <Button>Learn more</Button>
+                  </Link>
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+        ))}
+      </motion.div>
+
+      <div className="absolute inset-0 -z-10 flex items-start justify-center">
+        <Image
+          src={backgroundPattern}
+          alt="background pattern"
+          className="-mr-[15vw] -mt-[15vh] h-full max-h-[150vh] scale-125 object-cover md:-mr-[50vw] md:scale-150 lg:scale-[175%]"
+        />
+      </div>
+    </div>
+  );
+}
--- a/apps/marketing/src/app/layout.tsx
+++ b/apps/marketing/src/app/layout.tsx
@ -43,9 +43,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
      </head>

      <body>
-        <PlausibleProvider>
-          {children}
-        </PlausibleProvider>
+        <PlausibleProvider>{children}</PlausibleProvider>
        <Toaster />
      </body>
    </html>
--- a/apps/marketing/src/components/(marketing)/footer.tsx
+++ b/apps/marketing/src/components/(marketing)/footer.tsx
@ -46,6 +46,10 @@ export const Footer = ({ className, ...props }: FooterProps) => {
        </div>

        <div className="flex flex-wrap items-center gap-x-4 gap-y-2.5">
+          <Link href="/blog" className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]">
+            Blog
+          </Link>
+
          <Link
            href="/pricing"
            className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]"
@ -68,12 +72,12 @@ export const Footer = ({ className, ...props }: FooterProps) => {
            Support
          </Link>

-          {/* <Link
+          <Link
            href="/privacy"
            className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]"
          >
            Privacy
-          </Link> */}
+          </Link>
        </div>
      </div>
      <div className="mx-auto mt-4 w-full max-w-screen-xl px-8 md:mt-12 lg:mt-24">
--- a/apps/marketing/src/components/(marketing)/header.tsx
+++ b/apps/marketing/src/components/(marketing)/header.tsx
@ -15,6 +15,10 @@ export const Header = ({ className, ...props }: HeaderProps) => {
      </Link>

      <div className="flex items-center gap-x-6">
+        <Link href="/blog" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
+          Blog
+        </Link>
+
        <Link href="/pricing" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
          Pricing
        </Link>
--- a/apps/marketing/src/pages/api/stripe/webhook/index.ts
+++ b/apps/marketing/src/pages/api/stripe/webhook/index.ts
@ -124,16 +124,16 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
        document.document = await insertImageInPDF(
          document.document,
          signatureDataUrl,
-          field.positionX,
-          field.positionY,
+          Number(field.positionX),
+          Number(field.positionY),
          field.page,
        );
      } else {
        document.document = await insertTextInPDF(
          document.document,
          signatureText ?? '',
-          field.positionX,
-          field.positionY,
+          Number(field.positionX),
+          Number(field.positionY),
          field.page,
        );
      }
--- a/apps/marketing/tsconfig.json
+++ b/apps/marketing/tsconfig.json
@ -1,6 +1,7 @@
 {
  "extends": "@documenso/tsconfig/nextjs.json",
  "compilerOptions": {
+    "baseUrl": ".",
    "allowJs": true,
    "plugins": [
      {
@ -8,9 +9,8 @@
      }
    ],
    "paths": {
-      "~/*": [
-        "./src/*"
-      ]
+      "~/*": ["./src/*"],
+      "contentlayer/generated": ["./.contentlayer/generated"]
    },
    "strictNullChecks": true
  },
@ -18,9 +18,8 @@
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    ".contentlayer/generated"
  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@ -7,9 +7,23 @@ const { parsed: env } = require('dotenv').config({

 /** @type {import('next').NextConfig} */
 const config = {
+  experimental: {
+    serverActions: true,
+  },
  reactStrictMode: true,
-  transpilePackages: ['@documenso/lib', '@documenso/prisma', '@documenso/trpc', '@documenso/ui'],
+  transpilePackages: [
+    '@documenso/lib',
+    '@documenso/prisma',
+    '@documenso/trpc',
+    '@documenso/ui',
+    '@documenso/email',
+  ],
  env,
+  modularizeImports: {
+    'lucide-react': {
+      transform: 'lucide-react/dist/esm/icons/{{ kebabCase member }}',
+    },
+  },
 };

 module.exports = config;
--- a/apps/web/package.json
+++ b/apps/web/package.json
@ -21,7 +21,8 @@
    "framer-motion": "^10.12.8",
    "lucide-react": "^0.214.0",
    "micro": "^10.0.1",
-    "next": "13.4.1",
+    "nanoid": "^4.0.2",
+    "next": "13.4.9",
    "next-auth": "^4.22.1",
    "next-plausible": "^3.7.2",
    "next-themes": "^0.2.1",
@ -32,6 +33,7 @@
    "react-hook-form": "^7.43.9",
    "react-icons": "^4.8.0",
    "react-pdf": "^7.1.1",
+    "react-rnd": "^10.4.1",
    "typescript": "5.0.4",
    "zod": "^3.21.4"
  },
--- a/apps/web/public/static/clock.png
+++ b/apps/web/public/static/clock.png
--- a/apps/web/public/static/completed.png
+++ b/apps/web/public/static/completed.png
--- a/apps/web/public/static/document.png
+++ b/apps/web/public/static/document.png
--- a/apps/web/public/static/download.png
+++ b/apps/web/public/static/download.png
--- a/apps/web/public/static/logo.png
+++ b/apps/web/public/static/logo.png
--- a/apps/web/public/static/review.png
+++ b/apps/web/public/static/review.png
--- a/apps/web/src/app/(dashboard)/dashboard/page.tsx
+++ b/apps/web/src/app/(dashboard)/dashboard/page.tsx
@ -14,6 +14,7 @@ import {
  TableRow,
 } from '@documenso/ui/primitives/table';

+import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
 import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
 import { DocumentStatus } from '~/components/formatter/document-status';
 import { LocaleDate } from '~/components/formatter/locale-date';
@ -38,9 +39,15 @@ export default async function DashboardPage() {
      <h1 className="text-4xl font-semibold">Dashboard</h1>

      <div className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-3">
-        <CardMetric icon={FileCheck} title="Completed" value={stats.COMPLETED} />
-        <CardMetric icon={File} title="Drafts" value={stats.DRAFT} />
-        <CardMetric icon={Clock} title="Pending" value={stats.PENDING} />
+        <Link href={'/documents?status=COMPLETED'} passHref>
+          <CardMetric icon={FileCheck} title="Completed" value={stats.COMPLETED} />
+        </Link>
+        <Link href={'/documents?status=DRAFT'} passHref>
+          <CardMetric icon={File} title="Drafts" value={stats.DRAFT} />
+        </Link>
+        <Link href={'/documents?status=PENDING'} passHref>
+          <CardMetric icon={Clock} title="Pending" value={stats.PENDING} />
+        </Link>
      </div>

      <div className="mt-12">
@ -54,30 +61,38 @@ export default async function DashboardPage() {
              <TableRow>
                <TableHead className="w-[100px]">ID</TableHead>
                <TableHead>Title</TableHead>
+                <TableHead>Reciepient</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Created</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
-              {results.data.map((document) => (
-                <TableRow key={document.id}>
-                  <TableCell className="font-medium">{document.id}</TableCell>
-                  <TableCell>
-                    <Link
-                      href={`/documents/${document.id}`}
-                      className="focus-visible:ring-ring ring-offset-background rounded-md font-medium hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
-                    >
-                      {document.title}
-                    </Link>
-                  </TableCell>
-                  <TableCell>
-                    <DocumentStatus status={document.status} />
-                  </TableCell>
-                  <TableCell className="text-right">
-                    <LocaleDate date={document.created} />
-                  </TableCell>
-                </TableRow>
-              ))}
+              {results.data.map((document) => {
+                return (
+                  <TableRow key={document.id}>
+                    <TableCell className="font-medium">{document.id}</TableCell>
+                    <TableCell>
+                      <Link
+                        href={`/documents/${document.id}`}
+                        className="focus-visible:ring-ring ring-offset-background rounded-md font-medium hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+                      >
+                        {document.title}
+                      </Link>
+                    </TableCell>
+
+                    <TableCell>
+                      <StackAvatarsWithTooltip recipients={document.Recipient} />
+                    </TableCell>
+
+                    <TableCell>
+                      <DocumentStatus status={document.status} />
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <LocaleDate date={document.created} />
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
              {results.data.length === 0 && (
                <TableRow>
                  <TableCell colSpan={4} className="h-24 text-center">
--- a/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
@ -0,0 +1,111 @@
+'use client';
+
+import { useState } from 'react';
+
+import dynamic from 'next/dynamic';
+
+import { Loader } from 'lucide-react';
+
+import { Document, Field, Recipient, User } from '@documenso/prisma/client';
+import { cn } from '@documenso/ui/lib/utils';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+import { AddFieldsFormPartial } from '~/components/forms/edit-document/add-fields';
+import { AddSignersFormPartial } from '~/components/forms/edit-document/add-signers';
+import { AddSubjectFormPartial } from '~/components/forms/edit-document/add-subject';
+
+const PDFViewer = dynamic(async () => import('~/components/(dashboard)/pdf-viewer/pdf-viewer'), {
+  ssr: false,
+  loading: () => (
+    <div className="dark:bg-background flex-col flex min-h-[80vh] items-center justify-center bg-white/50">
+      <Loader className="text-documenso h-12 w-12 animate-spin" />
+
+      <p className="text-muted-foreground mt-4">Loading document...</p>
+    </div>
+  ),
+});
+
+export type EditDocumentFormProps = {
+  className?: string;
+  user: User;
+  document: Document;
+  recipients: Recipient[];
+  fields: Field[];
+};
+
+export const EditDocumentForm = ({
+  className,
+  document,
+  recipients,
+  fields,
+  user: _user,
+}: EditDocumentFormProps) => {
+  const [step, setStep] = useState<'signers' | 'fields' | 'subject'>('signers');
+
+  const documentUrl = `data:application/pdf;base64,${document.document}`;
+
+  const onNextStep = () => {
+    if (step === 'signers') {
+      setStep('fields');
+    }
+
+    if (step === 'fields') {
+      setStep('subject');
+    }
+  };
+
+  const onPreviousStep = () => {
+    if (step === 'fields') {
+      setStep('signers');
+    }
+
+    if (step === 'subject') {
+      setStep('fields');
+    }
+  };
+
+  return (
+    <div className={cn('grid w-full grid-cols-12 gap-8', className)}>
+      <Card
+        className="col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
+        gradient
+      >
+        <CardContent className="p-2">
+          <PDFViewer document={documentUrl} />
+        </CardContent>
+      </Card>
+
+      <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+        {step === 'signers' && (
+          <AddSignersFormPartial
+            recipients={recipients}
+            fields={fields}
+            document={document}
+            onContinue={onNextStep}
+            onGoBack={onPreviousStep}
+          />
+        )}
+
+        {step === 'fields' && (
+          <AddFieldsFormPartial
+            recipients={recipients}
+            fields={fields}
+            document={document}
+            onContinue={onNextStep}
+            onGoBack={onPreviousStep}
+          />
+        )}
+
+        {step === 'subject' && (
+          <AddSubjectFormPartial
+            recipients={recipients}
+            fields={fields}
+            document={document}
+            onContinue={onNextStep}
+            onGoBack={onPreviousStep}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
--- a/apps/web/src/app/(dashboard)/documents/[id]/loadable-pdf-card.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/loadable-pdf-card.tsx
@ -16,7 +16,7 @@ export type LoadablePDFCard = PDFViewerProps & {
 const PDFViewer = dynamic(async () => import('~/components/(dashboard)/pdf-viewer/pdf-viewer'), {
  ssr: false,
  loading: () => (
-    <div className="flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
+    <div className="flex-col flex min-h-[80vh] items-center justify-center bg-white/50">
      <Loader className="h-12 w-12 animate-spin text-slate-500" />

      <p className="mt-4 text-slate-500">Loading document...</p>
--- a/apps/web/src/app/(dashboard)/documents/[id]/loading.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/loading.tsx
@ -0,0 +1,28 @@
+import Link from 'next/link';
+
+import { ChevronLeft, Loader } from 'lucide-react';
+
+export default function Loading() {
+  return (
+    <div className="flex-col mx-auto -mt-4 flex w-full max-w-screen-xl px-4 md:px-8">
+      <Link href="/documents" className="flex grow-0 items-center text-[#7AC455] hover:opacity-80">
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        Documents
+      </Link>
+      <h1 className="mt-4 max-w-xs grow-0 truncate text-2xl font-semibold md:text-3xl">
+        Loading Document...
+      </h1>
+      <div className="mt-8 grid min-h-[80vh] w-full grid-cols-12 gap-x-8">
+        <div className="dark:bg-background border-border col-span-12 rounded-xl border-2 bg-white/50 p-2 before:rounded-xl lg:col-span-6 xl:col-span-7">
+          <div className="flex-col flex min-h-[80vh] items-center justify-center">
+            <Loader className="text-documenso h-12 w-12 animate-spin" />
+
+            <p className="text-muted-foreground mt-4">Loading document...</p>
+          </div>
+        </div>
+
+        <div className="bg-background border-border col-span-12 rounded-xl border-2  before:rounded-xl lg:col-span-6 xl:col-span-5" />
+      </div>
+    </div>
+  );
+}
--- a/apps/web/src/app/(dashboard)/documents/[id]/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/page.tsx
@ -1,12 +1,15 @@
 import Link from 'next/link';
 import { redirect } from 'next/navigation';

-import { ChevronLeft } from 'lucide-react';
+import { ChevronLeft, Users2 } from 'lucide-react';

 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-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 { EditDocumentForm } from '~/components/forms/edit-document';
+import { EditDocumentForm } from '~/app/(dashboard)/documents/[id]/edit-document';
+import { DocumentStatus } from '~/components/formatter/document-status';

 export type DocumentPageProps = {
  params: {
@ -34,11 +37,22 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
    redirect('/documents');
  }

+  const [recipients, fields] = await Promise.all([
+    await getRecipientsForDocument({
+      documentId,
+      userId: session.id,
+    }),
+    await getFieldsForDocument({
+      documentId,
+      userId: session.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" />
-        Dashboard
+        Documents
      </Link>

      <h1
@ -48,7 +62,25 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
        {document.title}
      </h1>

-      <EditDocumentForm className="mt-8" document={document} user={session} />
+      <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" />
+
+            <span>{recipients.length} Recipient(s)</span>
+          </div>
+        )}
+      </div>
+
+      <EditDocumentForm
+        className="mt-8"
+        document={document}
+        user={session}
+        recipients={recipients}
+        fields={fields}
+      />
    </div>
  );
 }
--- a/apps/web/src/app/(dashboard)/documents/[id]/sent/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/sent/page.tsx
@ -0,0 +1,18 @@
+import Link from 'next/link';
+
+import { ChevronLeft } from 'lucide-react';
+
+export default function DocumentSentPage() {
+  return (
+    <div className="flex-col mx-auto -mt-4 flex w-full max-w-screen-xl px-4 md:px-8">
+      <Link href="/documents" className="flex grow-0 items-center text-[#7AC455] hover:opacity-80">
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        Documents
+      </Link>
+
+      <h1 className="mt-4 max-w-xs grow-0 truncate text-2xl font-semibold md:text-3xl">
+        Loading Document...
+      </h1>
+    </div>
+  );
+}
--- a/apps/web/src/app/(dashboard)/documents/data-table.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table.tsx
@ -8,15 +8,16 @@ 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 { Document } from '@documenso/prisma/client';
+import { DocumentWithReciepient } from '@documenso/prisma/types/document-with-recipient';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';

+import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
 import { DocumentStatus } from '~/components/formatter/document-status';
 import { LocaleDate } from '~/components/formatter/locale-date';

 export type DocumentsDataTableProps = {
-  results: FindResultSet<Document>;
+  results: FindResultSet<DocumentWithReciepient>;
 };

 export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
@ -49,6 +50,13 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
              </Link>
            ),
          },
+          {
+            header: 'Recipient',
+            accessorKey: 'recipient',
+            cell: ({ row }) => {
+              return <StackAvatarsWithTooltip recipients={row.original.Recipient} />;
+            },
+          },
          {
            header: 'Status',
            accessorKey: 'status',
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@ -2,6 +2,7 @@ import { Inter } from 'next/font/google';

 import { TrpcProvider } from '@documenso/trpc/react';
 import { Toaster } from '@documenso/ui/primitives/toaster';
+import { TooltipProvider } from '@documenso/ui/primitives/tooltip';

 import { ThemeProvider } from '~/providers/next-theme';
 import { PlausibleProvider } from '~/providers/plausible';
@ -47,7 +48,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
      <body>
        <PlausibleProvider>
          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-            <TrpcProvider>{children}</TrpcProvider>
+            <TooltipProvider>
+              <TrpcProvider>{children}</TrpcProvider>
+            </TooltipProvider>
          </ThemeProvider>
        </PlausibleProvider>
        <Toaster />
--- a/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx
+++ b/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx
@ -0,0 +1,51 @@
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+
+const ZIndexes: { [key: string]: string } = {
+  '10': 'z-10',
+  '20': 'z-20',
+  '30': 'z-30',
+  '40': 'z-40',
+  '50': 'z-50',
+};
+
+export type StackAvatarProps = {
+  first?: boolean;
+  zIndex?: string;
+  fallbackText?: string;
+  type: 'unsigned' | 'waiting' | 'completed';
+};
+
+export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarProps) => {
+  let classes = '';
+  let zIndexClass = '';
+  const firstClass = first ? '' : '-ml-3';
+
+  if (zIndex) {
+    zIndexClass = ZIndexes[zIndex] ?? '';
+  }
+
+  switch (type) {
+    case 'unsigned':
+      classes = 'bg-dawn-200 text-dawn-900';
+      break;
+    case 'waiting':
+      classes = 'bg-water text-water-700';
+      break;
+    case 'completed':
+      classes = 'bg-documenso-200 text-documenso-800';
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <Avatar
+      className={`
+        ${zIndexClass}
+        ${firstClass}
+        h-10 w-10 border-2 border-solid border-white`}
+    >
+      <AvatarFallback className={classes}>{fallbackText ?? 'UK'}</AvatarFallback>
+    </Avatar>
+  );
+};
--- a/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx
+++ b/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx
@ -0,0 +1,90 @@
+import { initials } from '@documenso/lib/client-only/recipient-initials';
+import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import { Recipient } from '@documenso/prisma/client';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@documenso/ui/primitives/tooltip';
+
+import { StackAvatar } from './stack-avatar';
+import { StackAvatars } from './stack-avatars';
+
+export const StackAvatarsWithTooltip = ({ recipients }: { recipients: Recipient[] }) => {
+  const waitingRecipients = recipients.filter(
+    (recipient) => recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED',
+  );
+
+  const completedRecipients = recipients.filter(
+    (recipient) => recipient.sendStatus === 'SENT' && recipient.signingStatus === 'SIGNED',
+  );
+
+  const uncompletedRecipients = recipients.filter(
+    (recipient) => recipient.sendStatus === 'NOT_SENT' && recipient.signingStatus === 'NOT_SIGNED',
+  );
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger className="flex cursor-pointer">
+          <StackAvatars recipients={recipients} />
+        </TooltipTrigger>
+        <TooltipContent>
+          <div className="flex flex-col gap-y-5 p-1">
+            {completedRecipients.length > 0 && (
+              <div>
+                <h1 className="text-base font-medium">Completed</h1>
+                {completedRecipients.map((recipient: Recipient) => (
+                  <div key={recipient.id} className="my-1 flex items-center gap-2">
+                    <StackAvatar
+                      first={true}
+                      key={recipient.id}
+                      type={getRecipientType(recipient)}
+                      fallbackText={initials(recipient.name)}
+                    />
+                    <span className="text-sm text-gray-500">{recipient.email}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {waitingRecipients.length > 0 && (
+              <div>
+                <h1 className="text-base font-medium">Waiting</h1>
+                {waitingRecipients.map((recipient: Recipient) => (
+                  <div key={recipient.id} className="my-1 flex items-center gap-2">
+                    <StackAvatar
+                      first={true}
+                      key={recipient.id}
+                      type={getRecipientType(recipient)}
+                      fallbackText={initials(recipient.name)}
+                    />
+                    <span className="text-sm text-gray-500">{recipient.email}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {uncompletedRecipients.length > 0 && (
+              <div>
+                <h1 className="text-base font-medium">Uncompleted</h1>
+                {uncompletedRecipients.map((recipient: Recipient) => (
+                  <div key={recipient.id} className="my-1 flex items-center gap-2">
+                    <StackAvatar
+                      first={true}
+                      key={recipient.id}
+                      type={getRecipientType(recipient)}
+                      fallbackText={initials(recipient.name)}
+                    />
+                    <span className="text-sm text-gray-500">{recipient.email}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
--- a/apps/web/src/components/(dashboard)/avatar/stack-avatars.tsx
+++ b/apps/web/src/components/(dashboard)/avatar/stack-avatars.tsx
@ -0,0 +1,36 @@
+import React from 'react';
+
+import { initials } from '@documenso/lib/client-only/recipient-initials';
+import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import { Recipient } from '@documenso/prisma/client';
+
+import { StackAvatar } from './stack-avatar';
+
+export function StackAvatars({ recipients }: { recipients: Recipient[] }) {
+  const renderStackAvatars = (recipients: Recipient[]) => {
+    const zIndex = 50;
+    const itemsToRender = recipients.slice(0, 5);
+    const remainingItems = recipients.length - itemsToRender.length;
+
+    return itemsToRender.map((recipient: Recipient, index: number) => {
+      const first = index === 0 ? true : false;
+
+      const lastItemText =
+        index === itemsToRender.length - 1 && remainingItems > 0
+          ? `+${remainingItems + 1}`
+          : undefined;
+
+      return (
+        <StackAvatar
+          key={recipient.id}
+          first={first}
+          zIndex={String(zIndex - index * 10)}
+          type={lastItemText && index === 4 ? 'unsigned' : getRecipientType(recipient)}
+          fallbackText={lastItemText ? lastItemText : initials(recipient.name)}
+        />
+      );
+    });
+  };
+
+  return <>{renderStackAvatars(recipients)}</>;
+}
--- a/apps/web/src/components/(dashboard)/document-dropzone/document-dropzone.tsx
+++ b/apps/web/src/components/(dashboard)/document-dropzone/document-dropzone.tsx
@ -2,7 +2,6 @@

 import { Variants, motion } from 'framer-motion';
 import { Plus } from 'lucide-react';
-import { useTheme } from 'next-themes';
 import { useDropzone } from 'react-dropzone';

 import { cn } from '@documenso/ui/lib/utils';
@ -92,8 +91,6 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
    },
  });

-  const { theme } = useTheme();
-
  return (
    <motion.div
      className={cn('flex', className)}
@ -105,20 +102,19 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
      <Card
        role="button"
        className={cn(
-          'focus-visible:ring-ring ring-offset-background flex flex-1 cursor-pointer flex-col items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+          'focus-visible:ring-ring ring-offset-background flex-col flex flex-1 cursor-pointer items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
          className,
        )}
        gradient={true}
        degrees={120}
-        lightMode={theme === 'light'}
        {...getRootProps()}
        {...props}
      >
-        <CardContent className="text-muted-foreground/40 flex flex-col items-center justify-center p-6">
+        <CardContent className="text-muted-foreground/40 flex-col flex items-center justify-center p-6">
          {/* <FilePlus strokeWidth="1px" className="h-16 w-16"/> */}
          <div className="flex">
            <motion.div
-              className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 origin-top-right -rotate-[22deg] flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
+              className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 flex-col z-10 flex aspect-[3/4] w-24 origin-top-right -rotate-[22deg] gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
              variants={DocumentDropzoneCardLeftVariants}
            >
              <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
@ -127,7 +123,7 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
            </motion.div>

            <motion.div
-              className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
+              className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 flex-col z-20 flex aspect-[3/4] w-24 items-center justify-center gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
              variants={DocumentDropzoneCardCenterVariants}
            >
              <Plus
@ -137,7 +133,7 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
            </motion.div>

            <motion.div
-              className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 origin-top-left rotate-[22deg] flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
+              className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 flex-col z-10 flex aspect-[3/4] w-24 origin-top-left rotate-[22deg] gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
              variants={DocumentDropzoneCardRightVariants}
            >
              <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
--- a/apps/web/src/components/(dashboard)/metric-card/metric-card.tsx
+++ b/apps/web/src/components/(dashboard)/metric-card/metric-card.tsx
@ -1,6 +1,4 @@
-import React from 'react';
-
-import { LucideIcon } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react/dist/lucide-react';

 import { cn } from '@documenso/ui/lib/utils';

@ -13,7 +11,12 @@ export type CardMetricProps = {

 export const CardMetric = ({ icon: Icon, title, value, className }: CardMetricProps) => {
  return (
-    <div className={cn('border-border bg-background overflow-hidden rounded-lg border', className)}>
+    <div
+      className={cn(
+        'border-border bg-background hover:shadow-border/80 overflow-hidden rounded-lg border shadow shadow-transparent duration-200',
+        className,
+      )}
+    >
      <div className="px-4 pb-6 pt-4 sm:px-4 sm:pb-8 sm:pt-4">
        <div className="flex items-start">
          {Icon && <Icon className="mr-2 h-4 w-4 text-slate-500" />}
--- a/apps/web/src/components/(dashboard)/pdf-viewer/pdf-viewer.tsx
+++ b/apps/web/src/components/(dashboard)/pdf-viewer/pdf-viewer.tsx
@ -67,16 +67,6 @@ export const PDFViewer = ({ className, document, onPageClick, ...props }: PDFVie
    const pageX = event.clientX - left;
    const pageY = event.clientY - top;

-    console.log({
-      pageNumber,
-      numPages,
-      originalEvent: event,
-      pageHeight: height,
-      pageWidth: width,
-      pageX,
-      pageY,
-    });
-
    if (onPageClick) {
      onPageClick({
        pageNumber,
@ -120,10 +110,10 @@ export const PDFViewer = ({ className, document, onPageClick, ...props }: PDFVie
        onLoadSuccess={(d) => onDocumentLoaded(d)}
        externalLinkTarget="_blank"
        loading={
-          <div className="flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
-            <Loader className="h-12 w-12 animate-spin text-slate-500" />
+          <div className="dark:bg-background flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
+            <Loader className="text-documenso h-12 w-12 animate-spin" />

-            <p className="mt-4 text-slate-500">Loading document...</p>
+            <p className="text-muted-foreground mt-4">Loading document...</p>
          </div>
        }
      >
@ -137,6 +127,8 @@ export const PDFViewer = ({ className, document, onPageClick, ...props }: PDFVie
              <PDFPage
                pageNumber={i + 1}
                width={width}
+                renderAnnotationLayer={false}
+                renderTextLayer={false}
                onClick={(e) => onDocumentPageClick(e, i + 1)}
              />
            </div>
--- a/apps/web/src/components/(dashboard)/pdf-viewer/types.ts
+++ b/apps/web/src/components/(dashboard)/pdf-viewer/types.ts
@ -0,0 +1,2 @@
+export const PDF_VIEWER_CONTAINER_SELECTOR = '.react-pdf__Document';
+export const PDF_VIEWER_PAGE_SELECTOR = '.react-pdf__Page';
--- a/apps/web/src/components/(marketing)/callout.tsx
+++ b/apps/web/src/components/(marketing)/callout.tsx
@ -41,16 +41,16 @@ export const Callout = () => {
        </span>
      </Button>

-      <Link
-        href="https://github.com/documenso/documenso"
-        target="_blank"
-        onClick={() => event('view-github')}
-      >
-        <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
+      <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm" asChild>
+        <Link
+          href="https://github.com/documenso/documenso"
+          target="_blank"
+          onClick={() => event('view-github')}
+        >
          <Github className="mr-2 h-5 w-5" />
          Star on Github
-        </Button>
-      </Link>
+        </Link>
+      </Button>
    </div>
  );
 };
--- a/apps/web/src/components/(marketing)/hero.tsx
+++ b/apps/web/src/components/(marketing)/hero.tsx
@ -114,12 +114,19 @@ export const Hero = ({ className, ...props }: HeroProps) => {
            </span>
          </Button>

-          <Link href="https://github.com/documenso/documenso" onClick={() => event('view-github')}>
-            <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
+          <Button
+            variant="outline"
+            className="rounded-full bg-transparent backdrop-blur-sm"
+            asChild
+          >
+            <Link
+              href="https://github.com/documenso/documenso"
+              onClick={() => event('view-github')}
+            >
              <Github className="mr-2 h-5 w-5" />
              Star on Github
-            </Button>
-          </Link>
+            </Link>
+          </Button>
        </motion.div>

        <motion.div
--- a/apps/web/src/components/(marketing)/pricing-table.tsx
+++ b/apps/web/src/components/(marketing)/pricing-table.tsx
@ -93,14 +93,15 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
            For small teams and individuals who need a simple solution
          </p>

-          <Link
-            href="https://github.com/documenso/documenso"
-            target="_blank"
-            className="mt-6"
-            onClick={() => event('view-github')}
-          >
-            <Button className="rounded-full text-base">View on Github</Button>
-          </Link>
+          <Button className="mt-6 rounded-full text-base">
+            <Link
+              href="https://github.com/documenso/documenso"
+              target="_blank"
+              onClick={() => event('view-github')}
+            >
+              View on Github
+            </Link>
+          </Button>

          <div className="mt-8 flex w-full flex-col divide-y">
            <p className="py-4 font-medium text-slate-900">Host your own instance</p>
--- a/apps/web/src/components/form/form-error-message.tsx
+++ b/apps/web/src/components/form/form-error-message.tsx
@ -1,11 +1,10 @@
 import { AnimatePresence, motion } from 'framer-motion';
-import { FieldError } from 'react-hook-form';

 import { cn } from '@documenso/ui/lib/utils';

 export type FormErrorMessageProps = {
  className?: string;
-  error: FieldError | undefined;
+  error: { message?: string } | undefined;
 };

 export const FormErrorMessage = ({ error, className }: FormErrorMessageProps) => {
--- a/apps/web/src/components/formatter/document-status.tsx
+++ b/apps/web/src/components/formatter/document-status.tsx
@ -1,6 +1,7 @@
 import { HTMLAttributes } from 'react';

-import { CheckCircle2, Clock, File, LucideIcon } from 'lucide-react';
+import { CheckCircle2, Clock, File } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react/dist/lucide-react';

 import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
@ -31,14 +32,24 @@ const FRIENDLY_STATUS_MAP: Record<InternalDocumentStatus, FriendlyStatus> = {

 export type DocumentStatusProps = HTMLAttributes<HTMLSpanElement> & {
  status: InternalDocumentStatus;
+  inheritColor?: boolean;
 };

-export const DocumentStatus = ({ className, status, ...props }: DocumentStatusProps) => {
+export const DocumentStatus = ({
+  className,
+  status,
+  inheritColor,
+  ...props
+}: DocumentStatusProps) => {
  const { label, icon: Icon, color } = FRIENDLY_STATUS_MAP[status];

  return (
    <span className={cn('flex items-center', className)} {...props}>
-      <Icon className={cn('mr-2 inline-block h-4 w-4', color)} />
+      <Icon
+        className={cn('mr-2 inline-block h-4 w-4', {
+          [color]: !inheritColor,
+        })}
+      />
      {label}
    </span>
  );
--- a/apps/web/src/components/forms/edit-document.tsx
+++ b/apps/web/src/components/forms/edit-document.tsx
@ -1,144 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import dynamic from 'next/dynamic';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader } from 'lucide-react';
-import { useTheme } from 'next-themes';
-import { useForm } from 'react-hook-form';
-
-import { Document, User } from '@documenso/prisma/client';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-
-import { AddFieldsFormPartial } from './edit-document/add-fields';
-import { AddSignersFormPartial } from './edit-document/add-signers';
-import { TEditDocumentFormSchema, ZEditDocumentFormSchema } from './edit-document/types';
-
-const PDFViewer = dynamic(async () => import('~/components/(dashboard)/pdf-viewer/pdf-viewer'), {
-  ssr: false,
-  loading: () => (
-    <div className="dark:bg-background flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
-      <Loader className="text-muted-foreground h-12 w-12 animate-spin" />
-
-      <p className="text-muted-foreground mt-4">Loading document...</p>
-    </div>
-  ),
-});
-
-const MAX_STEP = 2;
-
-export type EditDocumentFormProps = {
-  className?: string;
-  user: User;
-  document: Document;
-};
-
-export const EditDocumentForm = ({ className, document, user: _user }: EditDocumentFormProps) => {
-  const documentUrl = `data:application/pdf;base64,${document.document}`;
-
-  const [step, setStep] = useState(0);
-
-  const {
-    control,
-    // handleSubmit,
-    watch,
-    formState: { errors, isSubmitting, isValid },
-  } = useForm<TEditDocumentFormSchema>({
-    mode: 'onBlur',
-    defaultValues: {
-      signers: [
-        {
-          name: '',
-          email: '',
-        },
-      ],
-    },
-    resolver: zodResolver(ZEditDocumentFormSchema),
-  });
-
-  const { theme } = useTheme();
-
-  const canGoBack = step > 0;
-  const canGoNext = isValid && step < MAX_STEP;
-
-  const onGoBackClick = () => setStep((prev) => Math.max(0, prev - 1));
-  const onGoNextClick = () => setStep((prev) => Math.min(MAX_STEP, prev + 1));
-
-  return (
-    <div className={cn('grid w-full grid-cols-12 gap-x-8', className)}>
-      <Card
-        className="col-span-7 rounded-xl before:rounded-xl"
-        gradient
-        lightMode={theme === 'light'}
-      >
-        <CardContent className="p-2">
-          <PDFViewer document={documentUrl} />
-        </CardContent>
-      </Card>
-
-      <div className="relative col-span-5">
-        <div className="dark:bg-background border-border sticky top-20 flex h-[calc(100vh-6rem)] max-h-screen flex-col rounded-xl border bg-[hsl(var(--widget))] px-4 py-6">
-          {step === 0 && (
-            <AddSignersFormPartial
-              className="-mx-2 flex-1 overflow-y-hidden px-2"
-              control={control}
-              errors={errors}
-              isSubmitting={isSubmitting}
-            />
-          )}
-
-          {step === 1 && (
-            <AddFieldsFormPartial
-              className="-mx-2 flex-1 overflow-y-hidden px-2"
-              control={control}
-              watch={watch}
-              errors={errors}
-              isSubmitting={isSubmitting}
-              theme={theme || 'dark'}
-            />
-          )}
-
-          <div className="mt-4 flex-shrink-0">
-            <p className="text-muted-foreground text-sm">
-              Add Signers ({step + 1}/{MAX_STEP + 1})
-            </p>
-
-            <div className="bg-muted relative mt-4 h-[2px] rounded-md">
-              <div
-                className="bg-documenso absolute inset-y-0 left-0"
-                style={{
-                  width: `${(100 / (MAX_STEP + 1)) * (step + 1)}%`,
-                }}
-              />
-            </div>
-
-            <div className="mt-4 flex gap-x-4">
-              <Button
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
-                size="lg"
-                variant="secondary"
-                disabled={!canGoBack}
-                onClick={onGoBackClick}
-              >
-                Go Back
-              </Button>
-
-              <Button
-                className="bg-documenso flex-1"
-                size="lg"
-                disabled={!canGoNext}
-                onClick={onGoNextClick}
-              >
-                Continue
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
--- a/apps/web/src/components/forms/edit-document/add-fields.action.ts
+++ b/apps/web/src/components/forms/edit-document/add-fields.action.ts
@ -0,0 +1,31 @@
+'use server';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { setFieldsForDocument } from '@documenso/lib/server-only/field/set-fields-for-document';
+
+import { TAddFieldsFormSchema } from './add-fields.types';
+
+export type AddFieldsActionInput = TAddFieldsFormSchema & {
+  documentId: number;
+};
+
+export const addFields = async ({ documentId, fields }: AddFieldsActionInput) => {
+  'use server';
+
+  const { id: userId } = await getRequiredServerComponentSession();
+
+  await setFieldsForDocument({
+    userId,
+    documentId,
+    fields: fields.map((field) => ({
+      id: field.nativeId,
+      signerEmail: field.signerEmail,
+      type: field.type,
+      pageNumber: field.pageNumber,
+      pageX: field.pageX,
+      pageY: field.pageY,
+      pageWidth: field.pageWidth,
+      pageHeight: field.pageHeight,
+    })),
+  });
+};
--- a/apps/web/src/components/forms/edit-document/add-fields.tsx
+++ b/apps/web/src/components/forms/edit-document/add-fields.tsx
@ -1,12 +1,15 @@
 'use client';

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

 import { Caveat } from 'next/font/google';
+import { useRouter } from 'next/navigation';

-import { Check, ChevronsUpDown } from 'lucide-react';
-import { Control, FieldErrors, UseFormWatch } from 'react-hook-form';
+import { Check, ChevronsUpDown, Info } from 'lucide-react';
+import { nanoid } from 'nanoid';
+import { useFieldArray, useForm } from 'react-hook-form';

+import { Document, Field, FieldType, Recipient, SendStatus } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@ -18,8 +21,23 @@ import {
  CommandItem,
 } from '@documenso/ui/primitives/command';
 import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import { useToast } from '@documenso/ui/primitives/use-toast';

-import { TEditDocumentFormSchema } from './types';
+import { PDF_VIEWER_PAGE_SELECTOR } from '~/components/(dashboard)/pdf-viewer/types';
+import { getBoundingClientRect } from '~/helpers/getBoundingClientRect';
+
+import { addFields } from './add-fields.action';
+import { TAddFieldsFormSchema } from './add-fields.types';
+import {
+  EditDocumentFormContainer,
+  EditDocumentFormContainerActions,
+  EditDocumentFormContainerContent,
+  EditDocumentFormContainerFooter,
+  EditDocumentFormContainerStep,
+} from './container';
+import { FieldItem } from './field-item';
+import { FRIENDLY_FIELD_TYPE } from './types';

 const fontCaveat = Caveat({
  weight: ['500'],
@ -28,164 +46,532 @@ const fontCaveat = Caveat({
  variable: '--font-caveat',
 });

+const DEFAULT_HEIGHT_PERCENT = 5;
+const DEFAULT_WIDTH_PERCENT = 15;
+
+const MIN_HEIGHT_PX = 60;
+const MIN_WIDTH_PX = 200;
+
 export type AddFieldsFormProps = {
-  className?: string;
-  control: Control<TEditDocumentFormSchema>;
-  watch: UseFormWatch<TEditDocumentFormSchema>;
-  errors: FieldErrors<TEditDocumentFormSchema>;
-  isSubmitting: boolean;
-  theme: string;
+  recipients: Recipient[];
+  fields: Field[];
+  document: Document;
+  onContinue?: () => void;
+  onGoBack?: () => void;
 };

 export const AddFieldsFormPartial = ({
-  className,
-  control: _control,
-  watch,
-  errors: _errors,
-  isSubmitting: _isSubmitting,
-  theme,
+  recipients,
+  fields,
+  document,
+  onContinue,
+  onGoBack,
 }: AddFieldsFormProps) => {
-  const signers = watch('signers');
+  const { toast } = useToast();
+  const router = useRouter();

-  const [selectedSigner, setSelectedSigner] = useState(() => signers[0]);
+  const {
+    control,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm<TAddFieldsFormSchema>({
+    defaultValues: {
+      fields: fields.map((field) => ({
+        nativeId: field.id,
+        formId: `${field.id}-${field.documentId}`,
+        pageNumber: field.page,
+        type: field.type,
+        pageX: Number(field.positionX),
+        pageY: Number(field.positionY),
+        pageWidth: Number(field.width),
+        pageHeight: Number(field.height),
+        signerEmail:
+          recipients.find((recipient) => recipient.id === field.recipientId)?.email ?? '',
+      })),
+    },
+  });
+
+  const {
+    append,
+    remove,
+    update,
+    fields: localFields,
+  } = useFieldArray({
+    control,
+    name: 'fields',
+  });
+
+  const [selectedField, setSelectedField] = useState<FieldType | null>(null);
+  const [selectedSigner, setSelectedSigner] = useState<Recipient | null>(null);
+
+  const hasSelectedSignerBeenSent = selectedSigner?.sendStatus === SendStatus.SENT;
+
+  const [visible, setVisible] = useState(false);
+  const [coords, setCoords] = useState({
+    x: 0,
+    y: 0,
+  });
+
+  const fieldBounds = useRef({
+    height: 0,
+    width: 0,
+  });
+
+  /**
+   * Given a mouse event, find the nearest pdf page element.
+   */
+  const getPage = (event: MouseEvent) => {
+    if (!(event.target instanceof HTMLElement)) {
+      return null;
+    }
+
+    const target = event.target;
+
+    const $page =
+      target.closest<HTMLElement>(PDF_VIEWER_PAGE_SELECTOR) ??
+      target.querySelector<HTMLElement>(PDF_VIEWER_PAGE_SELECTOR);
+
+    if (!$page) {
+      return null;
+    }
+
+    return $page;
+  };
+
+  /**
+   * Provided a page and a field, calculate the position of the field
+   * as a percentage of the page width and height.
+   */
+  const getFieldPosition = (page: HTMLElement, field: HTMLElement) => {
+    const {
+      top: pageTop,
+      left: pageLeft,
+      height: pageHeight,
+      width: pageWidth,
+    } = getBoundingClientRect(page);
+
+    const {
+      top: fieldTop,
+      left: fieldLeft,
+      height: fieldHeight,
+      width: fieldWidth,
+    } = getBoundingClientRect(field);
+
+    return {
+      x: ((fieldLeft - pageLeft) / pageWidth) * 100,
+      y: ((fieldTop - pageTop) / pageHeight) * 100,
+      width: (fieldWidth / pageWidth) * 100,
+      height: (fieldHeight / pageHeight) * 100,
+    };
+  };
+
+  /**
+   * Given a mouse event, determine if the mouse is within the bounds of the
+   * nearest pdf page element.
+   */
+  const isWithinPageBounds = useCallback((event: MouseEvent) => {
+    const $page = getPage(event);
+
+    if (!$page) {
+      return false;
+    }
+
+    const { top, left, height, width } = $page.getBoundingClientRect();
+
+    if (event.clientY > top + height || event.clientY < top) {
+      return false;
+    }
+
+    if (event.clientX > left + width || event.clientX < left) {
+      return false;
+    }
+
+    return true;
+  }, []);
+
+  const onMouseMove = useCallback(
+    (event: MouseEvent) => {
+      if (!isWithinPageBounds(event)) {
+        setVisible(false);
+        return;
+      }
+
+      setVisible(true);
+      setCoords({
+        x: event.clientX - fieldBounds.current.width / 2,
+        y: event.clientY - fieldBounds.current.height / 2,
+      });
+    },
+    [isWithinPageBounds],
+  );
+
+  const onMouseClick = useCallback(
+    (event: MouseEvent) => {
+      if (!selectedField || !selectedSigner) {
+        return;
+      }
+
+      const $page = getPage(event);
+
+      if (!$page || !isWithinPageBounds(event)) {
+        return;
+      }
+
+      const { top, left, height, width } = getBoundingClientRect($page);
+
+      const pageNumber = parseInt($page.getAttribute('data-page-number') ?? '1', 10);
+
+      // Calculate x and y as a percentage of the page width and height
+      let pageX = ((event.pageX - left) / width) * 100;
+      let pageY = ((event.pageY - top) / height) * 100;
+
+      // Get the bounds as a percentage of the page width and height
+      const fieldPageWidth = (fieldBounds.current.width / width) * 100;
+      const fieldPageHeight = (fieldBounds.current.height / height) * 100;
+
+      // And center it based on the bounds
+      pageX -= fieldPageWidth / 2;
+      pageY -= fieldPageHeight / 2;
+
+      append({
+        formId: nanoid(12),
+        type: selectedField,
+        pageNumber,
+        pageX,
+        pageY,
+        pageWidth: fieldPageWidth,
+        pageHeight: fieldPageHeight,
+        signerEmail: selectedSigner.email,
+      });
+
+      setVisible(false);
+      setSelectedField(null);
+    },
+    [append, isWithinPageBounds, selectedField, selectedSigner],
+  );
+
+  const onFieldResize = useCallback(
+    (node: HTMLElement, index: number) => {
+      const field = localFields[index];
+
+      const $page = window.document.querySelector<HTMLElement>(
+        `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`,
+      );
+
+      if (!$page) {
+        return;
+      }
+
+      const {
+        x: pageX,
+        y: pageY,
+        width: pageWidth,
+        height: pageHeight,
+      } = getFieldPosition($page, node);
+
+      update(index, {
+        ...field,
+        pageX,
+        pageY,
+        pageWidth,
+        pageHeight,
+      });
+    },
+    [localFields, update],
+  );
+
+  const onFieldMove = useCallback(
+    (node: HTMLElement, index: number) => {
+      const field = localFields[index];
+
+      const $page = window.document.querySelector<HTMLElement>(
+        `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`,
+      );
+
+      if (!$page) {
+        return;
+      }
+
+      const { x: pageX, y: pageY } = getFieldPosition($page, node);
+
+      update(index, {
+        ...field,
+        pageX,
+        pageY,
+      });
+    },
+    [localFields, update],
+  );
+
+  const onFormSubmit = handleSubmit(async (data: TAddFieldsFormSchema) => {
+    try {
+      // Custom invocation server action
+      await addFields({
+        documentId: document.id,
+        fields: data.fields,
+      });
+
+      router.refresh();
+
+      onContinue?.();
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while adding signers.',
+        variant: 'destructive',
+      });
+    }
+  });
+
+  useEffect(() => {
+    if (selectedField) {
+      window.addEventListener('mousemove', onMouseMove);
+      window.addEventListener('click', onMouseClick);
+    }
+
+    return () => {
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('click', onMouseClick);
+    };
+  }, [onMouseClick, onMouseMove, selectedField]);
+
+  useEffect(() => {
+    const $page = window.document.querySelector(PDF_VIEWER_PAGE_SELECTOR);
+
+    if (!$page) {
+      return;
+    }
+
+    const { height, width } = $page.getBoundingClientRect();
+
+    fieldBounds.current = {
+      height: Math.max(height * (DEFAULT_HEIGHT_PERCENT / 100), MIN_HEIGHT_PX),
+      width: Math.max(width * (DEFAULT_WIDTH_PERCENT / 100), MIN_WIDTH_PX),
+    };
+  }, []);
+
+  useEffect(() => {
+    setSelectedSigner(recipients.find((r) => r.sendStatus !== SendStatus.SENT) ?? recipients[0]);
+  }, [recipients]);

  return (
-    <div className={cn('flex flex-col', className)}>
-      <h3 className="text-2xl font-semibold">Edit Document</h3>
-
-      <p className="text-muted-foreground mt-2 text-sm">
-        Add all relevant fields for each recipient.
-      </p>
-
-      <hr className="mb-8 mt-4" />
-
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            role="combobox"
-            className="bg-background text-muted-foreground justify-between font-normal"
-          >
-            {selectedSigner.name && (
-              <span>
-                {selectedSigner.name} ({selectedSigner.email})
-              </span>
-            )}
-
-            {!selectedSigner.name && <span>{selectedSigner.email}</span>}
-
-            <ChevronsUpDown className="ml-2 h-4 w-4" />
-          </Button>
-        </PopoverTrigger>
-
-        <PopoverContent className="p-0" align="start">
-          <Command>
-            <CommandInput />
-            <CommandEmpty />
-
-            <CommandGroup>
-              {signers.map((signer, index) => (
-                <CommandItem key={index} onSelect={() => setSelectedSigner(signer)}>
-                  <Check
-                    className={cn('mr-2 h-4 w-4', {
-                      'opacity-0': signer !== selectedSigner,
-                      'opacity-100': signer === selectedSigner,
-                    })}
-                  />
-                  {signer.name && (
-                    <span>
-                      {signer.name} ({signer.email})
-                    </span>
-                  )}
-
-                  {!signer.name && <span>{signer.email}</span>}
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </Command>
-        </PopoverContent>
-      </Popover>
-
-      <div className="-mx-2 mt-8 flex-1 overflow-y-scroll px-2">
-        <div className="mt-4 grid grid-cols-2 gap-x-4 gap-y-8">
-          <button className="group h-full w-full">
+    <EditDocumentFormContainer>
+      <EditDocumentFormContainerContent
+        title="Add Fields"
+        description="Add all relevant fields for each recipient."
+      >
+        <div className="flex-col flex">
+          {selectedField && visible && (
            <Card
-              className="group-focus:border-documenso h-full w-full cursor-pointer"
-              lightMode={theme === 'light'}
+              className="border-primary pointer-events-none fixed z-50 cursor-pointer bg-white"
+              style={{
+                top: coords.y,
+                left: coords.x,
+                height: fieldBounds.current.height,
+                width: fieldBounds.current.width,
+              }}
            >
-              <CardContent className="flex flex-col items-center justify-center px-6 py-4">
-                <p
-                  className={cn(
-                    'text-muted-foreground group-focus:text-foreground text-3xl font-medium',
-                    fontCaveat.className,
-                  )}
-                >
-                  {selectedSigner.name || 'Signature'}
-                </p>
-
-                <p className="text-muted-foreground mt-2 text-center text-xs">Signature</p>
+              <CardContent className="text-foreground flex h-full w-full items-center justify-center p-2">
+                {FRIENDLY_FIELD_TYPE[selectedField]}
              </CardContent>
            </Card>
-          </button>
+          )}

-          <button className="group h-full w-full">
-            <Card
-              className="group-focus:border-documenso h-full w-full cursor-pointer"
-              lightMode={theme === 'light'}
-            >
-              <CardContent className="flex flex-col items-center justify-center px-6 py-4">
-                <p
-                  className={cn(
-                    'text-muted-foreground group-focus:text-foreground text-xl font-medium',
-                  )}
-                >
-                  {'Email'}
-                </p>
+          {localFields.map((field, index) => (
+            <FieldItem
+              key={index}
+              field={field}
+              disabled={selectedSigner?.email !== field.signerEmail || hasSelectedSignerBeenSent}
+              minHeight={fieldBounds.current.height}
+              minWidth={fieldBounds.current.width}
+              passive={visible && !!selectedField}
+              onResize={(options) => onFieldResize(options, index)}
+              onMove={(options) => onFieldMove(options, index)}
+              onRemove={() => remove(index)}
+            />
+          ))}

-                <p className="text-muted-foreground mt-2 text-xs">Email</p>
-              </CardContent>
-            </Card>
-          </button>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                type="button"
+                variant="outline"
+                role="combobox"
+                className="bg-background text-muted-foreground justify-between font-normal"
+              >
+                {selectedSigner?.email && (
+                  <span className="flex-1 truncate text-left">
+                    {selectedSigner?.email} ({selectedSigner?.email})
+                  </span>
+                )}

-          <button className="group h-full w-full">
-            <Card
-              className="group-focus:border-documenso h-full w-full cursor-pointer"
-              lightMode={theme === 'light'}
-            >
-              <CardContent className="flex flex-col items-center justify-center px-6 py-4">
-                <p
-                  className={cn(
-                    'text-muted-foreground group-focus:text-foreground text-xl font-medium',
-                  )}
-                >
-                  {'Name'}
-                </p>
+                {!selectedSigner?.email && (
+                  <span className="flex-1 truncate text-left">{selectedSigner?.email}</span>
+                )}

-                <p className="text-muted-foreground mt-2 text-xs">Name</p>
-              </CardContent>
-            </Card>
-          </button>
+                <ChevronsUpDown className="ml-2 h-4 w-4" />
+              </Button>
+            </PopoverTrigger>

-          <button className="group h-full w-full">
-            <Card
-              className="group-focus:border-documenso h-full w-full cursor-pointer"
-              lightMode={theme === 'light'}
-            >
-              <CardContent className="flex flex-col items-center justify-center px-6 py-4">
-                <p
-                  className={cn(
-                    'text-muted-foreground group-focus:text-foreground text-xl font-medium',
-                  )}
-                >
-                  {'Date'}
-                </p>
+            <PopoverContent className="p-0" align="start">
+              <Command>
+                <CommandInput />
+                <CommandEmpty />

-                <p className="text-muted-foreground mt-2 text-xs">Date</p>
-              </CardContent>
-            </Card>
-          </button>
+                <CommandGroup>
+                  {recipients.map((recipient, index) => (
+                    <CommandItem
+                      key={index}
+                      className={cn({
+                        'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
+                      })}
+                      onSelect={() => setSelectedSigner(recipient)}
+                    >
+                      {recipient.sendStatus !== SendStatus.SENT ? (
+                        <Check
+                          aria-hidden={recipient !== selectedSigner}
+                          className={cn('mr-2 h-4 w-4 flex-shrink-0', {
+                            'opacity-0': recipient !== selectedSigner,
+                            'opacity-100': recipient === selectedSigner,
+                          })}
+                        />
+                      ) : (
+                        <Tooltip>
+                          <TooltipTrigger>
+                            <Info className="mr-2 h-4 w-4" />
+                          </TooltipTrigger>
+                          <TooltipContent className="max-w-xs">
+                            This document has already been sent to this recipient. You can no longer
+                            edit this recipient.
+                          </TooltipContent>
+                        </Tooltip>
+                      )}
+
+                      {recipient.name && (
+                        <span className="truncate" title={`${recipient.name} (${recipient.email})`}>
+                          {recipient.name} ({recipient.email})
+                        </span>
+                      )}
+
+                      {!recipient.name && (
+                        <span className="truncate" title={recipient.email}>
+                          {recipient.email}
+                        </span>
+                      )}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </Command>
+            </PopoverContent>
+          </Popover>
+
+          <div className="-mx-2 mt-8 flex-1 overflow-y-scroll px-2">
+            <div className="mt-4 grid grid-cols-2 gap-x-4 gap-y-8">
+              <button
+                type="button"
+                className="group h-full w-full"
+                disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
+                onClick={() => setSelectedField(FieldType.SIGNATURE)}
+                data-selected={selectedField === FieldType.SIGNATURE ? true : undefined}
+              >
+                <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer group-disabled:opacity-50">
+                  <CardContent className="flex-col flex items-center justify-center px-6 py-4">
+                    <p
+                      className={cn(
+                        'text-muted-foreground group-data-[selected]:text-foreground text-3xl font-medium',
+                        fontCaveat.className,
+                      )}
+                    >
+                      {selectedSigner?.name || 'Signature'}
+                    </p>
+
+                    <p className="text-muted-foreground mt-2 text-center text-xs">Signature</p>
+                  </CardContent>
+                </Card>
+              </button>
+
+              <button
+                type="button"
+                className="group h-full w-full"
+                disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
+                onClick={() => setSelectedField(FieldType.EMAIL)}
+                data-selected={selectedField === FieldType.EMAIL ? true : undefined}
+              >
+                <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer group-disabled:opacity-50">
+                  <CardContent className="flex-col flex items-center justify-center px-6 py-4">
+                    <p
+                      className={cn(
+                        'text-muted-foreground group-data-[selected]:text-foreground text-xl font-medium',
+                      )}
+                    >
+                      {'Email'}
+                    </p>
+
+                    <p className="text-muted-foreground mt-2 text-xs">Email</p>
+                  </CardContent>
+                </Card>
+              </button>
+
+              <button
+                type="button"
+                className="group h-full w-full"
+                disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
+                onClick={() => setSelectedField(FieldType.NAME)}
+                data-selected={selectedField === FieldType.NAME ? true : undefined}
+              >
+                <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer group-disabled:opacity-50">
+                  <CardContent className="flex-col flex items-center justify-center px-6 py-4">
+                    <p
+                      className={cn(
+                        'text-muted-foreground group-data-[selected]:text-foreground text-xl font-medium',
+                      )}
+                    >
+                      {'Name'}
+                    </p>
+
+                    <p className="text-muted-foreground mt-2 text-xs">Name</p>
+                  </CardContent>
+                </Card>
+              </button>
+
+              <button
+                type="button"
+                className="group h-full w-full"
+                disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
+                onClick={() => setSelectedField(FieldType.DATE)}
+                data-selected={selectedField === FieldType.DATE ? true : undefined}
+              >
+                <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer group-disabled:opacity-50">
+                  <CardContent className="flex-col flex items-center justify-center px-6 py-4">
+                    <p
+                      className={cn(
+                        'text-muted-foreground group-data-[selected]:text-foreground text-xl font-medium',
+                      )}
+                    >
+                      {'Date'}
+                    </p>
+
+                    <p className="text-muted-foreground mt-2 text-xs">Date</p>
+                  </CardContent>
+                </Card>
+              </button>
+            </div>
+          </div>
        </div>
-      </div>
-    </div>
+      </EditDocumentFormContainerContent>
+
+      <EditDocumentFormContainerFooter>
+        <EditDocumentFormContainerStep title="Add Fields" step={2} maxStep={3} />
+
+        <EditDocumentFormContainerActions
+          loading={isSubmitting}
+          disabled={isSubmitting}
+          onGoNextClick={() => onFormSubmit()}
+          onGoBackClick={onGoBack}
+        />
+      </EditDocumentFormContainerFooter>
+    </EditDocumentFormContainer>
  );
 };
--- a/apps/web/src/components/forms/edit-document/add-fields.types.ts
+++ b/apps/web/src/components/forms/edit-document/add-fields.types.ts
@ -0,0 +1,21 @@
+import { z } from 'zod';
+
+import { FieldType } from '@documenso/prisma/client';
+
+export const ZAddFieldsFormSchema = z.object({
+  fields: z.array(
+    z.object({
+      formId: z.string().min(1),
+      nativeId: z.number().optional(),
+      type: z.nativeEnum(FieldType),
+      signerEmail: z.string().min(1),
+      pageNumber: z.number().min(1),
+      pageX: z.number().min(0),
+      pageY: z.number().min(0),
+      pageWidth: z.number().min(0),
+      pageHeight: z.number().min(0),
+    }),
+  ),
+});
+
+export type TAddFieldsFormSchema = z.infer<typeof ZAddFieldsFormSchema>;
--- a/apps/web/src/components/forms/edit-document/add-signers.action.ts
+++ b/apps/web/src/components/forms/edit-document/add-signers.action.ts
@ -0,0 +1,26 @@
+'use server';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { setRecipientsForDocument } from '@documenso/lib/server-only/recipient/set-recipients-for-document';
+
+import { TAddSignersFormSchema } from './add-signers.types';
+
+export type AddSignersActionInput = TAddSignersFormSchema & {
+  documentId: number;
+};
+
+export const addSigners = async ({ documentId, signers }: AddSignersActionInput) => {
+  'use server';
+
+  const { id: userId } = await getRequiredServerComponentSession();
+
+  await setRecipientsForDocument({
+    userId,
+    documentId,
+    recipients: signers.map((signer) => ({
+      id: signer.nativeId,
+      email: signer.email,
+      name: signer.name,
+    })),
+  });
+};
--- a/apps/web/src/components/forms/edit-document/add-signers.tsx
+++ b/apps/web/src/components/forms/edit-document/add-signers.tsx
@ -1,67 +1,177 @@
 'use client';

+import React, { useId } from 'react';
+
+import { useRouter } from 'next/navigation';
+
 import { AnimatePresence, motion } from 'framer-motion';
 import { Plus, Trash } from 'lucide-react';
-import { Control, Controller, FieldErrors, useFieldArray } from 'react-hook-form';
+import { nanoid } from 'nanoid';
+import { Controller, useFieldArray, useForm } from 'react-hook-form';

-import { cn } from '@documenso/ui/lib/utils';
+import { Document, Field, Recipient, SendStatus } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';

 import { FormErrorMessage } from '~/components/form/form-error-message';

-import { TEditDocumentFormSchema } from './types';
+import { addSigners } from './add-signers.action';
+import { TAddSignersFormSchema } from './add-signers.types';
+import {
+  EditDocumentFormContainer,
+  EditDocumentFormContainerActions,
+  EditDocumentFormContainerContent,
+  EditDocumentFormContainerFooter,
+  EditDocumentFormContainerStep,
+} from './container';

 export type AddSignersFormProps = {
-  className?: string;
-  control: Control<TEditDocumentFormSchema>;
-  errors: FieldErrors<TEditDocumentFormSchema>;
-  isSubmitting: boolean;
+  recipients: Recipient[];
+  fields: Field[];
+  document: Document;
+  onContinue?: () => void;
+  onGoBack?: () => void;
 };

 export const AddSignersFormPartial = ({
-  className,
-  control,
-  errors,
-  isSubmitting,
+  recipients,
+  fields: _fields,
+  document: document,
+  onContinue,
+  onGoBack,
 }: AddSignersFormProps) => {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const initialId = useId();
+
  const {
-    append,
+    control,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<TAddSignersFormSchema>({
+    defaultValues: {
+      signers:
+        recipients.length > 0
+          ? recipients.map((recipient) => ({
+              nativeId: recipient.id,
+              formId: String(recipient.id),
+              name: recipient.name,
+              email: recipient.email,
+            }))
+          : [
+              {
+                formId: initialId,
+                name: '',
+                email: '',
+              },
+            ],
+    },
+  });
+
+  const {
+    append: appendSigner,
    fields: signers,
-    remove,
+    remove: removeSigner,
  } = useFieldArray({
    control,
    name: 'signers',
  });

+  const hasBeenSentToRecipientId = (id?: number) => {
+    if (!id) {
+      return false;
+    }
+
+    return recipients.some(
+      (recipient) => recipient.id === id && recipient.sendStatus === SendStatus.SENT,
+    );
+  };
+
+  const onAddSigner = () => {
+    appendSigner({
+      formId: nanoid(12),
+      name: '',
+      email: '',
+    });
+  };
+
+  const onRemoveSigner = (index: number) => {
+    const signer = signers[index];
+
+    if (hasBeenSentToRecipientId(signer.nativeId)) {
+      toast({
+        title: 'Cannot remove signer',
+        description: 'This signer has already received the document.',
+        variant: 'destructive',
+      });
+
+      return;
+    }
+
+    removeSigner(index);
+  };
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter' && event.target instanceof HTMLInputElement) {
+      onAddSigner();
+    }
+  };
+
+  const onFormSubmit = handleSubmit(async (data: TAddSignersFormSchema) => {
+    try {
+      // Custom invocation server action
+      await addSigners({
+        documentId: document.id,
+        signers: data.signers,
+      });
+
+      router.refresh();
+
+      onContinue?.();
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while adding signers.',
+        variant: 'destructive',
+      });
+    }
+  });
+
  return (
-    <div className={cn('flex flex-col', className)}>
-      <h3 className="text-foreground text-2xl font-semibold">Add Signers</h3>
-
-      <p className="text-muted-foreground mt-2 text-sm">
-        Add the people who will sign the document.
-      </p>
-
-      <hr className="border-border mb-8 mt-4" />
-
-      <div className="-mx-2 flex flex-1 flex-col overflow-y-scroll px-2">
-        <div className="flex w-full flex-col gap-y-4">
+    <EditDocumentFormContainer onSubmit={onFormSubmit}>
+      <EditDocumentFormContainerContent
+        title="Add Signers"
+        description="Add the people who will sign the document."
+      >
+        <div className="flex-col flex w-full gap-y-4">
          <AnimatePresence>
-            {signers.map((field, index) => (
-              <motion.div key={field.id} className="flex flex-wrap items-end gap-x-4">
+            {signers.map((signer, index) => (
+              <motion.div
+                key={signer.formId}
+                data-native-id={signer.nativeId}
+                className="flex flex-wrap items-end gap-x-4"
+              >
                <div className="flex-1">
-                  <Label htmlFor={`signer-${index}-email`}>Email</Label>
+                  <Label htmlFor={`signer-${signer.formId}-email`}>
+                    Email
+                    <span className="text-destructive ml-1 inline-block font-medium">*</span>
+                  </Label>

                  <Controller
                    control={control}
                    name={`signers.${index}.email`}
                    render={({ field }) => (
                      <Input
-                        id={`signer-${index}-email`}
+                        id={`signer-${signer.formId}-email`}
                        type="email"
                        className="bg-background mt-2"
-                        disabled={isSubmitting}
+                        disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
+                        onKeyDown={onKeyDown}
                        {...field}
                      />
                    )}
@ -69,17 +179,18 @@ export const AddSignersFormPartial = ({
                </div>

                <div className="flex-1">
-                  <Label htmlFor={`signer-${index}-name`}>Name</Label>
+                  <Label htmlFor={`signer-${signer.formId}-name`}>Name</Label>

                  <Controller
                    control={control}
                    name={`signers.${index}.name`}
                    render={({ field }) => (
                      <Input
-                        id={`signer-${index}-name`}
+                        id={`signer-${signer.formId}-name`}
                        type="text"
                        className="bg-background mt-2"
-                        disabled={isSubmitting}
+                        disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
+                        onKeyDown={onKeyDown}
                        {...field}
                      />
                    )}
@ -89,9 +200,13 @@ export const AddSignersFormPartial = ({
                <div>
                  <button
                    type="button"
-                    className="inline-flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80"
-                    disabled={isSubmitting}
-                    onClick={() => remove(index)}
+                    className="inline-flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+                    disabled={
+                      isSubmitting ||
+                      hasBeenSentToRecipientId(signer.nativeId) ||
+                      signers.length === 1
+                    }
+                    onClick={() => onRemoveSigner(index)}
                  >
                    <Trash className="h-5 w-5" />
                  </button>
@ -106,22 +221,26 @@ export const AddSignersFormPartial = ({
          </AnimatePresence>
        </div>

+        <FormErrorMessage className="mt-2" error={errors.signers} />
+
        <div className="mt-4">
-          <Button
-            type="button"
-            disabled={isSubmitting}
-            onClick={() =>
-              append({
-                email: '',
-                name: '',
-              })
-            }
-          >
+          <Button type="button" disabled={isSubmitting} onClick={() => onAddSigner()}>
            <Plus className="-ml-1 mr-2 h-5 w-5" />
            Add Signer
          </Button>
        </div>
-      </div>
-    </div>
+      </EditDocumentFormContainerContent>
+
+      <EditDocumentFormContainerFooter>
+        <EditDocumentFormContainerStep title="Add Signers" step={1} maxStep={3} />
+
+        <EditDocumentFormContainerActions
+          loading={isSubmitting}
+          disabled={isSubmitting}
+          onGoNextClick={() => onFormSubmit()}
+          onGoBackClick={onGoBack}
+        />
+      </EditDocumentFormContainerFooter>
+    </EditDocumentFormContainer>
  );
 };
--- a/apps/web/src/components/forms/edit-document/add-signers.types.ts
+++ b/apps/web/src/components/forms/edit-document/add-signers.types.ts
@ -0,0 +1,19 @@
+import { z } from 'zod';
+
+export const ZAddSignersFormSchema = z.object({
+  signers: z
+    .array(
+      z.object({
+        formId: z.string().min(1),
+        nativeId: z.number().optional(),
+        email: z.string().min(1).email(),
+        name: z.string(),
+      }),
+    )
+    .refine((signers) => {
+      const emails = signers.map((signer) => signer.email);
+      return new Set(emails).size === emails.length;
+    }, 'Signers must have unique emails'),
+});
+
+export type TAddSignersFormSchema = z.infer<typeof ZAddSignersFormSchema>;
--- a/apps/web/src/components/forms/edit-document/add-subject.action.ts
+++ b/apps/web/src/components/forms/edit-document/add-subject.action.ts
@ -0,0 +1,21 @@
+'use server';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { sendDocument } from '@documenso/lib/server-only/document/send-document';
+
+import { TAddSubjectFormSchema } from './add-subject.types';
+
+export type CompleteDocumentActionInput = TAddSubjectFormSchema & {
+  documentId: number;
+};
+
+export const completeDocument = async ({ documentId }: CompleteDocumentActionInput) => {
+  'use server';
+
+  const { id: userId } = await getRequiredServerComponentSession();
+
+  await sendDocument({
+    userId,
+    documentId,
+  });
+};
--- a/apps/web/src/components/forms/edit-document/add-subject.tsx
+++ b/apps/web/src/components/forms/edit-document/add-subject.tsx
@ -0,0 +1,169 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { useForm } from 'react-hook-form';
+
+import { Document, DocumentStatus, Field, Recipient } from '@documenso/prisma/client';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { FormErrorMessage } from '~/components/form/form-error-message';
+
+import { completeDocument } from './add-subject.action';
+import { TAddSubjectFormSchema } from './add-subject.types';
+import {
+  EditDocumentFormContainer,
+  EditDocumentFormContainerActions,
+  EditDocumentFormContainerContent,
+  EditDocumentFormContainerFooter,
+  EditDocumentFormContainerStep,
+} from './container';
+
+export type AddSubjectFormProps = {
+  recipients: Recipient[];
+  fields: Field[];
+  document: Document;
+  onContinue?: () => void;
+  onGoBack?: () => void;
+};
+
+export const AddSubjectFormPartial = ({
+  recipients: _recipients,
+  fields: _fields,
+  document,
+  onContinue,
+  onGoBack,
+}: AddSubjectFormProps) => {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<TAddSubjectFormSchema>({
+    defaultValues: {
+      email: {
+        subject: '',
+        message: '',
+      },
+    },
+  });
+
+  const onFormSubmit = handleSubmit(async (data: TAddSubjectFormSchema) => {
+    const { subject, message } = data.email;
+
+    try {
+      await completeDocument({
+        documentId: document.id,
+        email: {
+          subject,
+          message,
+        },
+      });
+
+      router.refresh();
+
+      onContinue?.();
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while sending the document.',
+        variant: 'destructive',
+      });
+    }
+  });
+
+  return (
+    <EditDocumentFormContainer>
+      <EditDocumentFormContainerContent
+        title="Add Subject"
+        description="Add the subject and message you wish to send to signers."
+      >
+        <div className="flex-col flex">
+          <div className="flex-col flex gap-y-4">
+            <div>
+              <Label htmlFor="subject">
+                Subject <span className="text-muted-foreground">(Optional)</span>
+              </Label>
+
+              <Input
+                id="subject"
+                // placeholder="Subject"
+                className="bg-background mt-2"
+                disabled={isSubmitting}
+                {...register('email.subject')}
+              />
+
+              <FormErrorMessage className="mt-2" error={errors.email?.subject} />
+            </div>
+
+            <div>
+              <Label htmlFor="message">
+                Message <span className="text-muted-foreground">(Optional)</span>
+              </Label>
+
+              <Textarea
+                id="message"
+                className="bg-background mt-2 h-32 resize-none"
+                disabled={isSubmitting}
+                {...register('email.message')}
+              />
+
+              <FormErrorMessage
+                className="mt-2"
+                error={
+                  typeof errors.email?.message !== 'string' ? errors.email?.message : undefined
+                }
+              />
+            </div>
+
+            <div>
+              <p className="text-muted-foreground text-sm">
+                You can use the following variables in your message:
+              </p>
+
+              <ul className="flex-col mt-2 flex list-inside list-disc gap-y-2 text-sm">
+                <li className="text-muted-foreground">
+                  <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
+                    {'{signer.name}'}
+                  </code>{' '}
+                  - The signer's name
+                </li>
+                <li className="text-muted-foreground">
+                  <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
+                    {'{signer.email}'}
+                  </code>{' '}
+                  - The signer's email
+                </li>
+                <li className="text-muted-foreground">
+                  <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
+                    {'{document.name}'}
+                  </code>{' '}
+                  - The document's name
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </EditDocumentFormContainerContent>
+
+      <EditDocumentFormContainerFooter>
+        <EditDocumentFormContainerStep title="Add Subject" step={3} maxStep={3} />
+
+        <EditDocumentFormContainerActions
+          loading={isSubmitting}
+          disabled={isSubmitting}
+          goNextLabel={document.status === DocumentStatus.DRAFT ? 'Send' : 'Update'}
+          onGoNextClick={() => onFormSubmit()}
+          onGoBackClick={onGoBack}
+        />
+      </EditDocumentFormContainerFooter>
+    </EditDocumentFormContainer>
+  );
+};
--- a/apps/web/src/components/forms/edit-document/add-subject.types.ts
+++ b/apps/web/src/components/forms/edit-document/add-subject.types.ts
@ -0,0 +1,10 @@
+import { z } from 'zod';
+
+export const ZAddSubjectFormSchema = z.object({
+  email: z.object({
+    subject: z.string(),
+    message: z.string(),
+  }),
+});
+
+export type TAddSubjectFormSchema = z.infer<typeof ZAddSubjectFormSchema>;
--- a/apps/web/src/components/forms/edit-document/container.tsx
+++ b/apps/web/src/components/forms/edit-document/container.tsx
@ -0,0 +1,152 @@
+import React, { HTMLAttributes } from 'react';
+
+import { Loader } from 'lucide-react';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type EditDocumentFormContainerProps = HTMLAttributes<HTMLFormElement> & {
+  children?: React.ReactNode;
+};
+
+export const EditDocumentFormContainer = ({
+  children,
+  id = 'edit-document-form',
+  className,
+  ...props
+}: EditDocumentFormContainerProps) => {
+  return (
+    <form
+      id={id}
+      className={cn(
+        'dark:bg-background border-border bg-widget flex-col sticky top-20 flex h-[calc(100vh-6rem)] max-h-screen rounded-xl border px-4 py-6',
+        className,
+      )}
+      {...props}
+    >
+      <div className={cn('flex-col -mx-2 flex flex-1 overflow-hidden px-2')}>{children}</div>
+    </form>
+  );
+};
+
+export type EditDocumentFormContainerContentProps = HTMLAttributes<HTMLDivElement> & {
+  title: string;
+  description: string;
+  children?: React.ReactNode;
+};
+
+export const EditDocumentFormContainerContent = ({
+  children,
+  title,
+  description,
+  className,
+  ...props
+}: EditDocumentFormContainerContentProps) => {
+  return (
+    <div className={cn('flex-col flex flex-1', className)} {...props}>
+      <h3 className="text-foreground text-2xl font-semibold">{title}</h3>
+
+      <p className="text-muted-foreground mt-2 text-sm">{description}</p>
+
+      <hr className="border-border mb-8 mt-4" />
+
+      <div className="flex-col -mx-2 flex flex-1 overflow-y-auto px-2">{children}</div>
+    </div>
+  );
+};
+
+export type EditDocumentFormContainerFooterProps = HTMLAttributes<HTMLDivElement> & {
+  children?: React.ReactNode;
+};
+
+export const EditDocumentFormContainerFooter = ({
+  children,
+  className,
+  ...props
+}: EditDocumentFormContainerFooterProps) => {
+  return (
+    <div className={cn('mt-4 flex-shrink-0', className)} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export type EditDocumentFormContainerStepProps = {
+  title: string;
+  step: number;
+  maxStep: number;
+};
+
+export const EditDocumentFormContainerStep = ({
+  title,
+  step,
+  maxStep,
+}: EditDocumentFormContainerStepProps) => {
+  return (
+    <div>
+      <p className="text-muted-foreground text-sm">
+        {title}{' '}
+        <span>
+          ({step}/{maxStep})
+        </span>
+      </p>
+
+      <div className="bg-muted relative mt-4 h-[2px] rounded-md">
+        <div
+          className="bg-documenso absolute inset-y-0 left-0"
+          style={{
+            width: `${(100 / maxStep) * step}%`,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export type EditDocumentFormContainerActionsProps = {
+  canGoBack?: boolean;
+  canGoNext?: boolean;
+  goNextLabel?: string;
+  goBackLabel?: string;
+  onGoBackClick?: () => void;
+  onGoNextClick?: () => void;
+  loading?: boolean;
+  disabled?: boolean;
+};
+
+export const EditDocumentFormContainerActions = ({
+  canGoBack = true,
+  canGoNext = true,
+  goNextLabel = 'Continue',
+  goBackLabel = 'Go Back',
+  onGoBackClick,
+  onGoNextClick,
+  loading,
+  disabled,
+}: EditDocumentFormContainerActionsProps) => {
+  return (
+    <div className="mt-4 flex gap-x-4">
+      <Button
+        type="button"
+        className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+        size="lg"
+        variant="secondary"
+        disabled={disabled || loading || !canGoBack}
+        onClick={onGoBackClick}
+      >
+        {goBackLabel}
+      </Button>
+
+      <Button
+        type="button"
+        className="bg-documenso flex-1"
+        size="lg"
+        disabled={disabled || loading || !canGoNext}
+        onClick={onGoNextClick}
+      >
+        {loading && <Loader className="mr-2 h-5 w-5 animate-spin" />}
+        {goNextLabel}
+      </Button>
+    </div>
+  );
+};
--- a/apps/web/src/components/forms/edit-document/field-item.tsx
+++ b/apps/web/src/components/forms/edit-document/field-item.tsx
@ -0,0 +1,168 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { Trash } from 'lucide-react';
+import { createPortal } from 'react-dom';
+import { Rnd } from 'react-rnd';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+import { PDF_VIEWER_PAGE_SELECTOR } from '~/components/(dashboard)/pdf-viewer/types';
+
+import { FRIENDLY_FIELD_TYPE, TEditDocumentFormSchema } from './types';
+
+type Field = TEditDocumentFormSchema['fields'][0];
+
+export type FieldItemProps = {
+  field: Field;
+  passive?: boolean;
+  disabled?: boolean;
+  minHeight?: number;
+  minWidth?: number;
+  onResize?: (_node: HTMLElement) => void;
+  onMove?: (_node: HTMLElement) => void;
+  onRemove?: () => void;
+};
+
+export const FieldItem = ({
+  field,
+  passive,
+  disabled,
+  minHeight,
+  minWidth,
+  onResize,
+  onMove,
+  onRemove,
+}: FieldItemProps) => {
+  const [active, setActive] = useState(false);
+  const [coords, setCoords] = useState({
+    pageX: 0,
+    pageY: 0,
+    pageHeight: 0,
+    pageWidth: 0,
+  });
+
+  const calculateCoords = useCallback(() => {
+    const $page = document.querySelector<HTMLElement>(
+      `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`,
+    );
+
+    if (!$page) {
+      return;
+    }
+
+    const { height, width } = $page.getBoundingClientRect();
+
+    const top = $page.getBoundingClientRect().top + window.scrollY;
+    const left = $page.getBoundingClientRect().left + window.scrollX;
+
+    // X and Y are percentages of the page's height and width
+    const pageX = (field.pageX / 100) * width + left;
+    const pageY = (field.pageY / 100) * height + top;
+
+    const pageHeight = (field.pageHeight / 100) * height;
+    const pageWidth = (field.pageWidth / 100) * width;
+
+    console.log(
+      structuredClone({
+        field,
+        top,
+        left,
+        height,
+        width,
+        pageX: coords.pageX,
+        pageY: coords.pageY,
+        pageHeight: coords.pageHeight,
+        pageWidth: coords.pageWidth,
+        newPageX: pageX,
+        newPageY: pageY,
+        newPageHeight: pageHeight,
+        newPageWidth: pageWidth,
+      }),
+    );
+
+    setCoords({
+      pageX: pageX,
+      pageY: pageY,
+      pageHeight: pageHeight,
+      pageWidth: pageWidth,
+    });
+  }, [field.pageHeight, field.pageNumber, field.pageWidth, field.pageX, field.pageY]);
+
+  useEffect(() => {
+    calculateCoords();
+  }, [calculateCoords]);
+
+  useEffect(() => {
+    const onResize = () => {
+      calculateCoords();
+    };
+
+    window.addEventListener('resize', onResize);
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, [calculateCoords]);
+
+  return createPortal(
+    <Rnd
+      key={coords.pageX + coords.pageY + coords.pageHeight + coords.pageWidth}
+      className={cn('absolute z-20', {
+        'pointer-events-none': passive,
+        'pointer-events-none z-10 opacity-75': disabled,
+      })}
+      // minHeight={minHeight}
+      // minWidth={minWidth}
+      default={{
+        x: coords.pageX,
+        y: coords.pageY,
+        height: coords.pageHeight,
+        width: coords.pageWidth,
+      }}
+      bounds={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`}
+      onDragStart={() => setActive(true)}
+      onResizeStart={() => setActive(true)}
+      onResizeStop={(_e, _d, ref) => {
+        setActive(false);
+        onResize?.(ref);
+      }}
+      onDragStop={(_e, d) => {
+        setActive(false);
+        onMove?.(d.node);
+      }}
+    >
+      {!disabled && (
+        <button
+          className="text-muted-foreground/50 hover:text-muted-foreground/80 absolute -right-2 -top-2 z-[9999] flex h-8 w-8 items-center justify-center rounded-full border bg-white shadow-[0_0_0_2px_theme(colors.gray.100/70%)]"
+          onClick={() => onRemove?.()}
+        >
+          <Trash className="h-4 w-4" />
+        </button>
+      )}
+
+      <Card
+        className={cn('h-full w-full bg-white', {
+          'border-primary': !disabled,
+          'border-primary/80': active,
+        })}
+      >
+        <CardContent
+          className={cn(
+            'text-foreground flex h-full w-full flex-col items-center justify-center p-2',
+            {
+              'text-muted-foreground/50': disabled,
+            },
+          )}
+        >
+          {FRIENDLY_FIELD_TYPE[field.type]}
+
+          <p className="text-muted-foreground/50 w-full truncate text-center text-xs">
+            {field.signerEmail}
+          </p>
+        </CardContent>
+      </Card>
+    </Rnd>,
+    document.body,
+  );
+};
--- a/apps/web/src/components/forms/edit-document/provider.tsx
+++ b/apps/web/src/components/forms/edit-document/provider.tsx
@ -0,0 +1,53 @@
+import React, { createContext, useRef } from 'react';
+
+import { OnPDFViewerPageClick } from '~/components/(dashboard)/pdf-viewer/pdf-viewer';
+
+type EditFormContextValue = {
+  firePageClickEvent: OnPDFViewerPageClick;
+  registerPageClickHandler: (_handler: OnPDFViewerPageClick) => void;
+  unregisterPageClickHandler: (_handler: OnPDFViewerPageClick) => void;
+} | null;
+
+const EditFormContext = createContext<EditFormContextValue>(null);
+
+export type EditFormProviderProps = {
+  children: React.ReactNode;
+};
+
+export const useEditForm = () => {
+  const context = React.useContext(EditFormContext);
+
+  if (!context) {
+    throw new Error('useEditForm must be used within a EditFormProvider');
+  }
+
+  return context;
+};
+
+export const EditFormProvider = ({ children }: EditFormProviderProps) => {
+  const handlers = useRef(new Set<OnPDFViewerPageClick>());
+
+  const firePageClickEvent: OnPDFViewerPageClick = (event) => {
+    handlers.current.forEach((handler) => handler(event));
+  };
+
+  const registerPageClickHandler = (handler: OnPDFViewerPageClick) => {
+    handlers.current.add(handler);
+  };
+
+  const unregisterPageClickHandler = (handler: OnPDFViewerPageClick) => {
+    handlers.current.delete(handler);
+  };
+
+  return (
+    <EditFormContext.Provider
+      value={{
+        firePageClickEvent,
+        registerPageClickHandler,
+        unregisterPageClickHandler,
+      }}
+    >
+      {children}
+    </EditFormContext.Provider>
+  );
+};
--- a/apps/web/src/components/forms/edit-document/send-document-action-dialog.tsx
+++ b/apps/web/src/components/forms/edit-document/send-document-action-dialog.tsx
@ -0,0 +1,64 @@
+import { useState } from 'react';
+
+import { Loader } from 'lucide-react';
+
+import { Button, ButtonProps } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+
+export type SendDocumentActionDialogProps = ButtonProps & {
+  loading?: boolean;
+};
+
+export const SendDocumentActionDialog = ({
+  loading,
+  className,
+  ...props
+}: SendDocumentActionDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button type="button" className={className}>
+          {loading && <Loader className="text-documenso mr-2 h-5 w-5 animate-spin" />}
+          Send
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-center text-lg font-semibold">Send Document</DialogTitle>
+          <DialogDescription className="text-center text-base">
+            You are about to send this document to the recipients. Are you sure you want to
+            continue?
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter className="mt-4 flex items-center gap-x-4">
+          <Button
+            className="dark:bg-muted dark:hover:bg-muted/80 dark:focus-visible:ring-muted/80 flex-1 border-none bg-black/5 hover:bg-black/10 focus-visible:ring-black/10"
+            type="button"
+            variant="secondary"
+            onClick={() => setOpen(false)}
+          >
+            Cancel
+          </Button>
+
+          {/* We would use DialogAction here but it interrupts the submit action */}
+          <Button className={className} {...props}>
+            {loading && <Loader className="mr-2 h-5 w-5 animate-spin" />}
+            Send
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
--- a/apps/web/src/components/forms/edit-document/types.ts
+++ b/apps/web/src/components/forms/edit-document/types.ts
@ -1,13 +1,49 @@
 import { z } from 'zod';

+import { FieldType } from '@documenso/prisma/client';
+
 export const ZEditDocumentFormSchema = z.object({
-  signers: z.array(
+  signers: z
+    .array(
+      z.object({
+        formId: z.string().min(1),
+        nativeId: z.number().optional(),
+        email: z.string().min(1).email(),
+        name: z.string(),
+      }),
+    )
+    .refine((signers) => {
+      const emails = signers.map((signer) => signer.email);
+      return new Set(emails).size === emails.length;
+    }, 'Signers must have unique emails'),
+
+  fields: z.array(
    z.object({
-      id: z.number().optional(),
-      email: z.string().min(1).email(),
-      name: z.string(),
+      formId: z.string().min(1),
+      nativeId: z.number().optional(),
+      type: z.nativeEnum(FieldType),
+      signerEmail: z.string().min(1),
+      pageNumber: z.number().min(1),
+      pageX: z.number().min(0),
+      pageY: z.number().min(0),
+      pageWidth: z.number().min(0),
+      pageHeight: z.number().min(0),
    }),
  ),
+
+  email: z.object({
+    subject: z.string(),
+    message: z.string(),
+  }),
 });

 export type TEditDocumentFormSchema = z.infer<typeof ZEditDocumentFormSchema>;
+
+export const FRIENDLY_FIELD_TYPE: Record<FieldType, string> = {
+  [FieldType.SIGNATURE]: 'Signature',
+  [FieldType.FREE_SIGNATURE]: 'Free Signature',
+  [FieldType.TEXT]: 'Text',
+  [FieldType.DATE]: 'Date',
+  [FieldType.EMAIL]: 'Email',
+  [FieldType.NAME]: 'Name',
+};
--- a/apps/web/src/components/forms/password.tsx
+++ b/apps/web/src/components/forms/password.tsx
@ -81,7 +81,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {

  return (
    <form
-      className={cn('flex w-full flex-col gap-y-4', className)}
+      className={cn('flex-col flex w-full gap-y-4', className)}
      onSubmit={handleSubmit(onFormSubmit)}
    >
      <div>
--- a/apps/web/src/helpers/getBoundingClientRect.ts
+++ b/apps/web/src/helpers/getBoundingClientRect.ts
@ -0,0 +1,10 @@
+export const getBoundingClientRect = (element: HTMLElement) => {
+  const rect = element.getBoundingClientRect();
+
+  const { width, height } = rect;
+
+  const top = rect.top + window.scrollY;
+  const left = rect.left + window.scrollX;
+
+  return { top, left, width, height };
+};
--- a/apps/web/src/pages/api/stripe/webhook/index.ts
+++ b/apps/web/src/pages/api/stripe/webhook/index.ts
@ -124,16 +124,16 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
        document.document = await insertImageInPDF(
          document.document,
          signatureDataUrl,
-          field.positionX,
-          field.positionY,
+          field.positionX.toNumber(),
+          field.positionY.toNumber(),
          field.page,
        );
      } else {
        document.document = await insertTextInPDF(
          document.document,
          signatureText ?? '',
-          field.positionX,
-          field.positionY,
+          field.positionX.toNumber(),
+          field.positionY.toNumber(),
          field.page,
        );
      }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -19,6 +19,7 @@
  "packageManager": "npm@8.19.2",
  "workspaces": [
    "apps/*",
-    "packages/*"
+    "packages/*",
+    "packages/email/.react-email"
  ]
 }
--- a/packages/email/.gitignore
+++ b/packages/email/.gitignore
@ -0,0 +1 @@
+.react-email/
--- a/packages/email/ambient.d.ts
+++ b/packages/email/ambient.d.ts
@ -0,0 +1 @@
+declare module '@documenso/tailwind-config';
--- a/packages/email/index.ts
+++ b/packages/email/index.ts
@ -0,0 +1 @@
+export {};
--- a/packages/email/mailer.ts
+++ b/packages/email/mailer.ts
@ -0,0 +1,50 @@
+import { createTransport } from 'nodemailer';
+
+import { MailChannelsTransport } from './transports/mailchannels';
+
+const getTransport = () => {
+  const transport = process.env.NEXT_PRIVATE_SMTP_TRANSPORT ?? 'smtp-auth';
+
+  if (transport === 'mailchannels') {
+    return createTransport(
+      MailChannelsTransport.makeTransport({
+        apiKey: process.env.NEXT_PRIVATE_MAILCHANNELS_API_KEY,
+        endpoint: process.env.NEXT_PRIVATE_MAILCHANNELS_ENDPOINT,
+      }),
+    );
+  }
+
+  if (transport === 'smtp-api') {
+    if (!process.env.NEXT_PRIVATE_SMTP_HOST || !process.env.NEXT_PRIVATE_SMTP_APIKEY) {
+      throw new Error(
+        'SMTP API transport requires NEXT_PRIVATE_SMTP_HOST and NEXT_PRIVATE_SMTP_APIKEY',
+      );
+    }
+
+    return createTransport({
+      host: process.env.NEXT_PRIVATE_SMTP_HOST,
+      port: Number(process.env.NEXT_PRIVATE_SMTP_PORT) || 587,
+      secure: process.env.NEXT_PRIVATE_SMTP_SECURE === 'true',
+      auth: {
+        user: process.env.NEXT_PRIVATE_SMTP_APIKEY_USER ?? 'apikey',
+        pass: process.env.NEXT_PRIVATE_SMTP_APIKEY ?? '',
+      },
+    });
+  }
+
+  if (!process.env.NEXT_PRIVATE_SMTP_HOST) {
+    throw new Error('SMTP transport requires NEXT_PRIVATE_SMTP_HOST');
+  }
+
+  return createTransport({
+    host: process.env.NEXT_PRIVATE_SMTP_HOST,
+    port: Number(process.env.NEXT_PRIVATE_SMTP_PORT) || 587,
+    secure: process.env.NEXT_PRIVATE_SMTP_SECURE === 'true',
+    auth: {
+      user: process.env.NEXT_PRIVATE_SMTP_USERNAME ?? '',
+      pass: process.env.NEXT_PRIVATE_SMTP_PASSWORD ?? '',
+    },
+  });
+};
+
+export const mailer = getTransport();
--- a/packages/email/package.json
+++ b/packages/email/package.json
@ -0,0 +1,30 @@
+{
+  "name": "@documenso/email",
+  "version": "1.0.0",
+  "main": "./index.ts",
+  "types": "./index.ts",
+  "license": "MIT",
+  "files": [
+    "templates/",
+    "transports/",
+    "mailer.ts",
+    "render.ts",
+    "index.ts"
+  ],
+  "scripts": {
+    "dev": "email dev --port 3002 --dir templates",
+    "worker:test": "tsup worker/index.ts --format esm"
+  },
+  "dependencies": {
+    "@documenso/tsconfig": "*",
+    "@documenso/tailwind-config": "*",
+    "@documenso/ui": "*",
+    "@react-email/components": "^0.0.7",
+    "nodemailer": "^6.9.3"
+  },
+  "devDependencies": {
+    "@types/nodemailer": "^6.4.8",
+    "react-email": "^1.9.4",
+    "tsup": "^7.1.0"
+  }
+}
--- a/packages/email/render.ts
+++ b/packages/email/render.ts
@ -0,0 +1 @@
+export { render, renderAsync } from '@react-email/components';
--- a/packages/email/static/clock.png
+++ b/packages/email/static/clock.png
--- a/packages/email/static/completed.png
+++ b/packages/email/static/completed.png
--- a/packages/email/static/document.png
+++ b/packages/email/static/document.png
--- a/packages/email/static/download.png
+++ b/packages/email/static/download.png
--- a/packages/email/static/logo.png
+++ b/packages/email/static/logo.png
--- a/packages/email/static/review.png
+++ b/packages/email/static/review.png
--- a/packages/email/tailwind.config.js
+++ b/packages/email/tailwind.config.js
@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const baseConfig = require('@documenso/tailwind-config');
+const path = require('path');
+
+module.exports = {
+  ...baseConfig,
+  content: [
+    `templates/**/*.{ts,tsx}`,
+    `${path.join(require.resolve('@documenso/ui'), '..')}/**/*.{ts,tsx}`,
+  ],
+};
--- a/packages/email/templates/document-completed.tsx
+++ b/packages/email/templates/document-completed.tsx
@ -0,0 +1,129 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '@react-email/components';
+
+import * as config from '@documenso/tailwind-config';
+
+interface DocumentCompletedEmailTemplateProps {
+  downloadLink?: string;
+  reviewLink?: string;
+  documentName?: string;
+  assetBaseUrl?: string;
+}
+
+export const DocumentCompletedEmailTemplate = ({
+  downloadLink = 'https://documenso.com',
+  reviewLink = 'https://documenso.com',
+  documentName = 'Open Source Pledge.pdf',
+  assetBaseUrl = 'http://localhost:3002',
+}: DocumentCompletedEmailTemplateProps) => {
+  const previewText = `Completed Document`;
+
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  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 p-2 backdrop-blur-sm">
+              <Section className="p-2">
+                <Img src={getAssetUrl('/static/logo.png')} alt="Documenso Logo" className="h-6" />
+
+                <Section className="mt-4 flex-row items-center justify-center">
+                  <div className="flex items-center justify-center p-4">
+                    <Img
+                      className="h-42"
+                      src={getAssetUrl('/static/document.png')}
+                      alt="Documenso"
+                    />
+                  </div>
+
+                  <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-[#7AC455]">
+                    <Img
+                      src={getAssetUrl('/static/completed.png')}
+                      className="-mb-0.5 mr-2 inline h-7 w-7"
+                    />
+                    Completed
+                  </Text>
+
+                  <Text className="text-primary mb-0 text-center text-lg font-semibold">
+                    “{documentName}” was signed by all signers
+                  </Text>
+
+                  <Text className="my-1 text-center text-base text-slate-400">
+                    Continue by downloading or reviewing the document.
+                  </Text>
+
+                  <Section className="mb-6 mt-8 text-center">
+                    <Button
+                      className="mr-4 inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+                      href={reviewLink}
+                    >
+                      <Img
+                        src={getAssetUrl('/static/review.png')}
+                        className="-mb-1 mr-2 inline h-5 w-5"
+                      />
+                      Review
+                    </Button>
+                    <Button
+                      className="inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+                      href={downloadLink}
+                    >
+                      <Img
+                        src={getAssetUrl('/static/download.png')}
+                        className="-mb-1 mr-2 inline h-5 w-5"
+                      />
+                      Download
+                    </Button>
+                  </Section>
+                </Section>
+              </Section>
+            </Container>
+
+            <Container className="mx-auto max-w-xl">
+              <Section>
+                <Text className="my-4 text-base text-slate-400">
+                  This document was sent using{' '}
+                  <Link className="text-[#7AC455]" href="https://documenso.com">
+                    Documenso.
+                  </Link>
+                </Text>
+
+                <Text className="my-8 text-sm text-slate-400">
+                  Documenso
+                  <br />
+                  2261 Market Street, #5211, San Francisco, CA 94114, USA
+                </Text>
+              </Section>
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default DocumentCompletedEmailTemplate;
--- a/packages/email/templates/document-invite.tsx
+++ b/packages/email/templates/document-invite.tsx
@ -0,0 +1,127 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Hr,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '@react-email/components';
+
+import * as config from '@documenso/tailwind-config';
+
+interface DocumentInviteEmailTemplateProps {
+  inviterName?: string;
+  inviterEmail?: string;
+  documentName?: string;
+  signDocumentLink?: string;
+  assetBaseUrl?: string;
+}
+
+export const DocumentInviteEmailTemplate = ({
+  inviterName = 'Lucas Smith',
+  inviterEmail = 'lucas@documenso.com',
+  documentName = 'Open Source Pledge.pdf',
+  signDocumentLink = 'https://documenso.com',
+  assetBaseUrl = 'http://localhost:3002',
+}: DocumentInviteEmailTemplateProps) => {
+  const previewText = `Completed Document`;
+
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: config.theme.extend.colors,
+            },
+          },
+        }}
+      >
+        <Body className="mx-auto my-auto bg-white font-sans">
+          <Section>
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
+              <Section className="p-2">
+                <Img src={getAssetUrl('/static/logo.png')} alt="Documenso Logo" className="h-6" />
+
+                <Section className="mt-4 flex-row items-center justify-center">
+                  <div className="flex items-center justify-center p-4">
+                    <Img
+                      className="h-42"
+                      src={getAssetUrl('/static/document.png')}
+                      alt="Documenso"
+                    />
+                  </div>
+
+                  <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
+                    {inviterName} has invited you to sign "{documentName}"
+                  </Text>
+
+                  <Text className="my-1 text-center text-base text-slate-400">
+                    Continue by signing the document.
+                  </Text>
+
+                  <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={signDocumentLink}
+                    >
+                      Sign Document
+                    </Button>
+                  </Section>
+                </Section>
+              </Section>
+            </Container>
+
+            <Container className="mx-auto mt-12 max-w-xl">
+              <Section>
+                <Text className="my-4 text-base font-semibold">
+                  {inviterName}{' '}
+                  <Link className="font-normal text-slate-400" href="mailto:{inviterEmail}">
+                    ({inviterEmail})
+                  </Link>
+                </Text>
+
+                <Text className="mt-2 text-base text-slate-400">
+                  {inviterName} has invited you to sign the document "{documentName}".
+                </Text>
+              </Section>
+            </Container>
+
+            <Hr className="mx-auto mt-12 max-w-xl" />
+
+            <Container className="mx-auto max-w-xl">
+              <Section>
+                <Text className="my-4 text-base text-slate-400">
+                  This document was sent using{' '}
+                  <Link className="text-[#7AC455]" href="https://documenso.com">
+                    Documenso.
+                  </Link>
+                </Text>
+
+                <Text className="my-8 text-sm text-slate-400">
+                  Documenso
+                  <br />
+                  2261 Market Street, #5211, San Francisco, CA 94114, USA
+                </Text>
+              </Section>
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default DocumentInviteEmailTemplate;
--- a/packages/email/templates/document-pending.tsx
+++ b/packages/email/templates/document-pending.tsx
@ -0,0 +1,103 @@
+import {
+  Body,
+  Container,
+  Head,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '@react-email/components';
+
+import * as config from '@documenso/tailwind-config';
+
+interface DocumentPendingEmailTemplateProps {
+  documentName?: string;
+  assetBaseUrl?: string;
+}
+
+export const DocumentPendingEmailTemplate = ({
+  documentName = 'Open Source Pledge.pdf',
+  assetBaseUrl = 'http://localhost:3002',
+}: DocumentPendingEmailTemplateProps) => {
+  const previewText = `Pending Document`;
+
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  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 p-2 backdrop-blur-sm">
+              <Section className="p-2">
+                <Img src={getAssetUrl('/static/logo.png')} alt="Documenso Logo" className="h-6" />
+
+                <Section className="mt-4 flex-row items-center justify-center">
+                  <div className="flex items-center justify-center p-4">
+                    <Img
+                      className="h-42"
+                      src={getAssetUrl('/static/document.png')}
+                      alt="Documenso"
+                    />
+                  </div>
+
+                  <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-blue-500">
+                    <Img
+                      src={getAssetUrl('/static/clock.png')}
+                      className="-mb-0.5 mr-2 inline h-7 w-7"
+                    />
+                    Waiting for others
+                  </Text>
+
+                  <Text className="text-primary mb-0 text-center text-lg font-semibold">
+                    “{documentName}” has been signed
+                  </Text>
+
+                  <Text className="mx-auto mb-6 mt-1 max-w-[80%] text-center text-base text-slate-400">
+                    We're still waiting for other signers to sign this document.
+                    <br />
+                    We'll notify you as soon as it's ready.
+                  </Text>
+                </Section>
+              </Section>
+            </Container>
+
+            <Container className="mx-auto max-w-xl">
+              <Section>
+                <Text className="my-4 text-base text-slate-400">
+                  This document was sent using{' '}
+                  <Link className="text-[#7AC455]" href="https://documenso.com">
+                    Documenso.
+                  </Link>
+                </Text>
+
+                <Text className="my-8 text-sm text-slate-400">
+                  Documenso
+                  <br />
+                  2261 Market Street, #5211, San Francisco, CA 94114, USA
+                </Text>
+              </Section>
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default DocumentPendingEmailTemplate;
--- a/packages/email/transports/mailchannels.ts
+++ b/packages/email/transports/mailchannels.ts
@ -0,0 +1,154 @@
+import { SentMessageInfo, Transport } from 'nodemailer';
+import type { Address } from 'nodemailer/lib/mailer';
+import type MailMessage from 'nodemailer/lib/mailer/mail-message';
+
+const VERSION = '1.0.0';
+
+type NodeMailerAddress = string | Address | Array<string | Address> | undefined;
+
+interface MailChannelsAddress {
+  email: string;
+  name?: string;
+}
+
+interface MailChannelsTransportOptions {
+  apiKey: string;
+  endpoint: string;
+}
+
+/**
+ * Transport for sending email through MailChannels via Cloudflare Workers.
+ *
+ * Optionally allows specifying a custom endpoint and API key so you can setup a worker
+ * to proxy requests to MailChannels with added security.
+ *
+ * @see https://blog.cloudflare.com/sending-email-from-workers-with-mailchannels/
+ */
+export class MailChannelsTransport implements Transport<SentMessageInfo> {
+  public name = 'CloudflareMailTransport';
+  public version = VERSION;
+
+  private _options: MailChannelsTransportOptions;
+
+  public static makeTransport(options: Partial<MailChannelsTransportOptions>) {
+    return new MailChannelsTransport(options);
+  }
+
+  constructor(options: Partial<MailChannelsTransportOptions>) {
+    const { apiKey = '', endpoint = 'https://api.mailchannels.net/tx/v1/send' } = options;
+
+    this._options = {
+      apiKey,
+      endpoint,
+    };
+  }
+
+  public send(mail: MailMessage, callback: (_err: Error | null, _info: SentMessageInfo) => void) {
+    if (!mail.data.to || !mail.data.from) {
+      return callback(new Error('Missing required fields "to" or "from"'), null);
+    }
+
+    const mailTo = this.toMailChannelsAddresses(mail.data.to);
+    const mailCc = this.toMailChannelsAddresses(mail.data.cc);
+    const mailBcc = this.toMailChannelsAddresses(mail.data.bcc);
+
+    const from: MailChannelsAddress =
+      typeof mail.data.from === 'string'
+        ? { email: mail.data.from }
+        : {
+            email: mail.data.from?.address,
+            name: mail.data.from?.name,
+          };
+
+    const requestHeaders: Record<string, string> = {
+      'Content-Type': 'application/json',
+    };
+
+    if (this._options.apiKey) {
+      requestHeaders['X-Auth-Token'] = this._options.apiKey;
+    }
+
+    fetch(this._options.endpoint, {
+      method: 'POST',
+      headers: requestHeaders,
+      body: JSON.stringify({
+        from: from,
+        subject: mail.data.subject,
+        personalizations: [
+          {
+            to: mailTo,
+            cc: mailCc.length > 0 ? mailCc : undefined,
+            bcc: mailBcc.length > 0 ? mailBcc : undefined,
+            dkim_domain: process.env.NEXT_PRIVATE_MAILCHANNELS_DKIM_DOMAIN || undefined,
+            dkim_selector: process.env.NEXT_PRIVATE_MAILCHANNELS_DKIM_SELECTOR || undefined,
+            dkim_private_key: process.env.NEXT_PRIVATE_MAILCHANNELS_DKIM_PRIVATE_KEY || undefined,
+          },
+        ],
+        content: [
+          {
+            type: 'text/plain',
+            value: mail.data.text?.toString('utf-8') ?? '',
+          },
+          {
+            type: 'text/html',
+            value: mail.data.html?.toString('utf-8') ?? '',
+          },
+        ],
+      }),
+    })
+      .then((res) => {
+        if (res.status >= 200 && res.status <= 299) {
+          return callback(null, {
+            messageId: '',
+            envelope: {
+              from: mail.data.from,
+              to: mail.data.to,
+            },
+            accepted: mail.data.to,
+            rejected: [],
+            pending: [],
+          });
+        }
+
+        res.json().then((data) => {
+          return callback(new Error(`MailChannels error: ${data.message}`), null);
+        });
+      })
+      .catch((err) => {
+        return callback(err, null);
+      });
+  }
+
+  /**
+   * Converts a nodemailer address(s) to an array of MailChannel compatible address.
+   */
+  private toMailChannelsAddresses(address: NodeMailerAddress): Array<MailChannelsAddress> {
+    if (!address) {
+      return [];
+    }
+
+    if (typeof address === 'string') {
+      return [{ email: address }];
+    }
+
+    if (Array.isArray(address)) {
+      return address.map((address) => {
+        if (typeof address === 'string') {
+          return { email: address };
+        }
+
+        return {
+          email: address.address,
+          name: address.name,
+        };
+      });
+    }
+
+    return [
+      {
+        email: address.address,
+        name: address.name,
+      },
+    ];
+  }
+}
--- a/packages/email/tsconfig.json
+++ b/packages/email/tsconfig.json
@ -0,0 +1,5 @@
+{
+  "extends": "@documenso/tsconfig/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}
--- a/packages/eslint-config/package.json
+++ b/packages/eslint-config/package.json
@ -7,7 +7,7 @@
    "@typescript-eslint/eslint-plugin": "^5.59.2",
    "@typescript-eslint/parser": "^5.59.2",
    "eslint": "^8.40.0",
-    "eslint-config-next": "^13.4.1",
+    "eslint-config-next": "^13.4.9",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
--- a/packages/lib/client-only/recipient-initials.ts
+++ b/packages/lib/client-only/recipient-initials.ts
@ -0,0 +1,6 @@
+export const initials = (text: string) =>
+  text
+    ?.split(' ')
+    .map((name: string) => name.slice(0, 1).toUpperCase())
+    .slice(0, 2)
+    .join('') ?? 'UK';
--- a/packages/lib/client-only/recipient-type.ts
+++ b/packages/lib/client-only/recipient-type.ts
@ -0,0 +1,13 @@
+import { Recipient } from '@documenso/prisma/client';
+
+export const getRecipientType = (recipient: Recipient) => {
+  if (recipient.sendStatus === 'SENT' && recipient.signingStatus === 'SIGNED') {
+    return 'completed';
+  }
+
+  if (recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED') {
+    return 'waiting';
+  }
+
+  return 'unsigned';
+};
--- a/packages/lib/next-auth/auth-options.ts
+++ b/packages/lib/next-auth/auth-options.ts
@ -31,7 +31,6 @@ export const NEXT_AUTH_OPTIONS: AuthOptions = {
        const user = await getUserByEmail({ email }).catch(() => null);

        if (!user || !user.password) {
-          console.log('no user');
          return null;
        }

--- a/packages/lib/package.json
+++ b/packages/lib/package.json
@ -13,14 +13,17 @@
  "scripts": {
  },
  "dependencies": {
+    "@documenso/email": "*",
    "@documenso/prisma": "*",
    "@pdf-lib/fontkit": "^1.1.1",
    "@next-auth/prisma-adapter": "^1.0.6",
    "@upstash/redis": "^1.20.6",
    "bcrypt": "^5.1.0",
    "pdf-lib": "^1.17.1",
-    "next": "13.4.1",
+    "nanoid": "^4.0.2",
+    "next": "13.4.9",
    "next-auth": "^4.22.1",
+    "react": "18.2.0",
    "stripe": "^12.7.0"
  },
  "devDependencies": {
--- a/packages/lib/server-only/document/find-documents.ts
+++ b/packages/lib/server-only/document/find-documents.ts
@ -1,5 +1,6 @@
 import { prisma } from '@documenso/prisma';
 import { Document, DocumentStatus, Prisma } from '@documenso/prisma/client';
+import { DocumentWithReciepient } from '@documenso/prisma/types/document-with-recipient';

 import { FindResultSet } from '../../types/find-result-set';

@ -22,7 +23,7 @@ export const findDocuments = async ({
  page = 1,
  perPage = 10,
  orderBy,
-}: FindDocumentsOptions): Promise<FindResultSet<Document>> => {
+}: FindDocumentsOptions): Promise<FindResultSet<DocumentWithReciepient>> => {
  const orderByColumn = orderBy?.column ?? 'created';
  const orderByDirection = orderBy?.direction ?? 'desc';

@ -48,6 +49,9 @@ export const findDocuments = async ({
      orderBy: {
        [orderByColumn]: orderByDirection,
      },
+      include: {
+        Recipient: true,
+      },
    }),
    prisma.document.count({
      where: {
--- a/packages/lib/server-only/document/send-document.tsx
+++ b/packages/lib/server-only/document/send-document.tsx
@ -0,0 +1,94 @@
+import { createElement } from 'react';
+
+import { mailer } from '@documenso/email/mailer';
+import { render } from '@documenso/email/render';
+import { DocumentInviteEmailTemplate } from '@documenso/email/templates/document-invite';
+import { prisma } from '@documenso/prisma';
+import { DocumentStatus, SendStatus } from '@documenso/prisma/client';
+
+export interface SendDocumentOptions {
+  documentId: number;
+  userId: number;
+}
+
+export const sendDocument = async ({ documentId, userId }: SendDocumentOptions) => {
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+  });
+
+  const document = await prisma.document.findUnique({
+    where: {
+      id: documentId,
+      userId,
+    },
+    include: {
+      Recipient: true,
+    },
+  });
+
+  if (!document) {
+    throw new Error('Document not found');
+  }
+
+  if (document.Recipient.length === 0) {
+    throw new Error('Document has no recipients');
+  }
+
+  if (document.status === DocumentStatus.COMPLETED) {
+    throw new Error('Can not send completed document');
+  }
+
+  await Promise.all([
+    document.Recipient.map(async (recipient) => {
+      const { email, name } = recipient;
+
+      if (recipient.sendStatus === SendStatus.SENT) {
+        return;
+      }
+
+      const template = createElement(DocumentInviteEmailTemplate, {
+        documentName: document.title,
+        assetBaseUrl: process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000',
+        inviterName: user.name || undefined,
+        inviterEmail: user.email,
+        signDocumentLink: 'https://example.com',
+      });
+
+      mailer.sendMail({
+        to: {
+          address: email,
+          name,
+        },
+        from: {
+          name: process.env.NEXT_PRIVATE_SMTP_FROM_NAME || 'Documenso',
+          address: process.env.NEXT_PRIVATE_SMTP_FROM_ADDRESS || 'noreply@documenso.com',
+        },
+        subject: 'Please sign this document',
+        html: render(template),
+        text: render(template, { plainText: true }),
+      });
+
+      await prisma.recipient.update({
+        where: {
+          id: recipient.id,
+        },
+        data: {
+          sendStatus: SendStatus.SENT,
+        },
+      });
+    }),
+  ]);
+
+  const updatedDocument = await prisma.document.update({
+    where: {
+      id: documentId,
+    },
+    data: {
+      status: DocumentStatus.PENDING,
+    },
+  });
+
+  return updatedDocument;
+};
--- a/packages/lib/server-only/field/get-fields-for-document.ts
+++ b/packages/lib/server-only/field/get-fields-for-document.ts
@ -0,0 +1,19 @@
+import { prisma } from '@documenso/prisma';
+
+export interface GetFieldsForDocumentOptions {
+  documentId: number;
+  userId: number;
+}
+
+export const getFieldsForDocument = async ({ documentId, userId }: GetFieldsForDocumentOptions) => {
+  const fields = await prisma.field.findMany({
+    where: {
+      documentId,
+      Document: {
+        userId,
+      },
+    },
+  });
+
+  return fields;
+};
--- a/packages/lib/server-only/field/set-fields-for-document.ts
+++ b/packages/lib/server-only/field/set-fields-for-document.ts
@ -0,0 +1,125 @@
+import { prisma } from '@documenso/prisma';
+import { SendStatus, SigningStatus } from '@documenso/prisma/client';
+
+export interface SetFieldsForDocumentOptions {
+  userId: number;
+  documentId: number;
+  fields: {
+    id?: number | null;
+    signerEmail: string;
+    pageNumber: number;
+    pageX: number;
+    pageY: number;
+    pageWidth: number;
+    pageHeight: number;
+  }[];
+}
+
+export const setFieldsForDocument = async ({
+  userId,
+  documentId,
+  fields,
+}: SetFieldsForDocumentOptions) => {
+  const document = await prisma.document.findFirst({
+    where: {
+      id: documentId,
+      userId,
+    },
+  });
+
+  if (!document) {
+    throw new Error('Document not found');
+  }
+
+  const existingFields = await prisma.field.findMany({
+    where: {
+      documentId,
+    },
+    include: {
+      Recipient: true,
+    },
+  });
+
+  const removedFields = existingFields.filter(
+    (existingField) =>
+      !fields.find(
+        (field) =>
+          field.id === existingField.id || field.signerEmail === existingField.Recipient?.email,
+      ),
+  );
+
+  const linkedFields = fields
+    .map((field) => {
+      const existing = existingFields.find((existingField) => existingField.id === field.id);
+
+      return {
+        ...field,
+        ...existing,
+      };
+    })
+    .filter((field) => {
+      return (
+        field.Recipient?.sendStatus !== SendStatus.SENT &&
+        field.Recipient?.signingStatus !== SigningStatus.SIGNED
+      );
+    });
+
+  const persistedFields = await prisma.$transaction(
+    linkedFields.map((field) =>
+      field.id
+        ? prisma.field.update({
+            where: {
+              id: field.id,
+              recipientId: field.recipientId,
+              documentId,
+            },
+            data: {
+              type: field.type,
+              page: field.pageNumber,
+              positionX: field.pageX,
+              positionY: field.pageY,
+              width: field.pageWidth,
+              height: field.pageHeight,
+            },
+          })
+        : prisma.field.create({
+            data: {
+              type: field.type!,
+              page: field.pageNumber,
+              positionX: field.pageX,
+              positionY: field.pageY,
+              width: field.pageWidth,
+              height: field.pageHeight,
+              customText: '',
+              inserted: false,
+
+              Document: {
+                connect: {
+                  id: document.id,
+                },
+              },
+              Recipient: {
+                connect: {
+                  documentId_email: {
+                    documentId: document.id,
+                    email: field.signerEmail,
+                  },
+                },
+              },
+            },
+          }),
+    ),
+  );
+
+  if (removedFields.length > 0) {
+    await prisma.field.deleteMany({
+      where: {
+        id: {
+          in: removedFields.map((field) => field.id),
+        },
+      },
+    });
+  }
+
+  return persistedFields;
+};
--- a/packages/lib/server-only/recipient/get-recipients-for-document.ts
+++ b/packages/lib/server-only/recipient/get-recipients-for-document.ts
@ -0,0 +1,22 @@
+import { prisma } from '@documenso/prisma';
+
+export interface GetRecipientsForDocumentOptions {
+  documentId: number;
+  userId: number;
+}
+
+export const getRecipientsForDocument = async ({
+  documentId,
+  userId,
+}: GetRecipientsForDocumentOptions) => {
+  const recipients = await prisma.recipient.findMany({
+    where: {
+      documentId,
+      Document: {
+        userId,
+      },
+    },
+  });
+
+  return recipients;
+};
--- a/packages/lib/server-only/recipient/set-recipients-for-document.ts
+++ b/packages/lib/server-only/recipient/set-recipients-for-document.ts
@ -0,0 +1,100 @@
+import { nanoid } from 'nanoid';
+
+import { prisma } from '@documenso/prisma';
+import { SendStatus, SigningStatus } from '@documenso/prisma/client';
+
+export interface SetRecipientsForDocumentOptions {
+  userId: number;
+  documentId: number;
+  recipients: {
+    id?: number | null;
+    email: string;
+    name: string;
+  }[];
+}
+
+export const setRecipientsForDocument = async ({
+  userId,
+  documentId,
+  recipients,
+}: SetRecipientsForDocumentOptions) => {
+  const document = await prisma.document.findFirst({
+    where: {
+      id: documentId,
+      userId,
+    },
+  });
+
+  if (!document) {
+    throw new Error('Document not found');
+  }
+
+  const existingRecipients = await prisma.recipient.findMany({
+    where: {
+      documentId,
+    },
+  });
+
+  const removedRecipients = existingRecipients.filter(
+    (existingRecipient) =>
+      !recipients.find(
+        (recipient) =>
+          recipient.id === existingRecipient.id || recipient.email === existingRecipient.email,
+      ),
+  );
+
+  const linkedRecipients = recipients
+    .map((recipient) => {
+      const existing = existingRecipients.find(
+        (existingRecipient) =>
+          existingRecipient.id === recipient.id || existingRecipient.email === recipient.email,
+      );
+
+      return {
+        ...recipient,
+        ...existing,
+      };
+    })
+    .filter((recipient) => {
+      return (
+        recipient.sendStatus !== SendStatus.SENT && recipient.signingStatus !== SigningStatus.SIGNED
+      );
+    });
+
+  const persistedRecipients = await prisma.$transaction(
+    linkedRecipients.map((recipient) =>
+      recipient.id
+        ? prisma.recipient.update({
+            where: {
+              id: recipient.id,
+              documentId,
+            },
+            data: {
+              name: recipient.name,
+              email: recipient.email,
+              documentId,
+            },
+          })
+        : prisma.recipient.create({
+            data: {
+              name: recipient.name,
+              email: recipient.email,
+              token: nanoid(),
+              documentId,
+            },
+          }),
+    ),
+  );
+
+  if (removedRecipients.length > 0) {
+    await prisma.recipient.deleteMany({
+      where: {
+        id: {
+          in: removedRecipients.map((recipient) => recipient.id),
+        },
+      },
+    });
+  }
+
+  return persistedRecipients;
+};
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`declare module '@documenso/tailwind-config';`
				`@ -0,0 +1 @@`
				`export { render, renderAsync } from '@react-email/components';`