diff --git a/apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx b/apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx
index 37d60f946..ab05ac3dc 100644
--- a/apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx
+++ b/apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx
@@ -18,7 +18,10 @@ import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import {
   Dialog,
+  DialogClose,
   DialogContent,
+  DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -34,7 +37,6 @@ import {
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 const ZCreateTemplateFormSchema = z.object({
@@ -61,8 +63,7 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
     resolver: zodResolver(ZCreateTemplateFormSchema),
   });
 
-  const { mutateAsync: createTemplate, isLoading: isCreatingTemplate } =
-    trpc.template.createTemplate.useMutation();
+  const { mutateAsync: createTemplate } = trpc.template.createTemplate.useMutation();
 
   const [showNewTemplateDialog, setShowNewTemplateDialog] = useState(false);
   const [uploadedFile, setUploadedFile] = useState<{ file: File; fileBase64: string } | null>();
@@ -140,6 +141,7 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
   useEffect(() => {
     if (!showNewTemplateDialog) {
       form.reset();
+      setUploadedFile(null);
     }
   }, [form, showNewTemplateDialog]);
 
@@ -154,20 +156,23 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
 
       <DialogContent className="w-full max-w-xl">
         <DialogHeader>
-          <DialogTitle className="mb-4">New Template</DialogTitle>
+          <DialogTitle>New Template</DialogTitle>
+          <DialogDescription>
+            Templates allow you to quickly generate documents with pre-filled recipients and fields.
+          </DialogDescription>
         </DialogHeader>
 
-        <div>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <fieldset disabled={form.formState.isSubmitting} className="flex flex-col gap-y-4">
               <FormField
                 control={form.control}
                 name="name"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Name your template</FormLabel>
+                    <FormLabel>Template name</FormLabel>
                     <FormControl>
-                      <Input id="email" type="text" className="bg-background mt-1.5" {...field} />
+                      <Input {...field} />
                     </FormControl>
                     <FormDescription>
                       <span className="text-muted-foreground text-xs">
@@ -180,55 +185,57 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
                 )}
               />
 
-              <div>
-                <Label htmlFor="template">Upload a Document</Label>
+              <div className="mt-1.5">
+                {uploadedFile ? (
+                  <Card gradient className="h-[40vh]">
+                    <CardContent className="flex h-full flex-col items-center justify-center p-2">
+                      <button
+                        onClick={() => resetForm()}
+                        title="Remove Template"
+                        className="text-muted-foreground absolute right-2.5 top-2.5 rounded-sm opacity-60 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
+                      >
+                        <X className="h-6 w-6" />
+                        <span className="sr-only">Remove Template</span>
+                      </button>
 
-                <div className="my-3">
-                  {uploadedFile ? (
-                    <Card gradient className="h-[40vh]">
-                      <CardContent className="flex h-full flex-col items-center justify-center p-2">
-                        <button
-                          onClick={() => resetForm()}
-                          title="Remove Template"
-                          className="text-muted-foreground absolute right-2.5 top-2.5 rounded-sm opacity-60 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
-                        >
-                          <X className="h-6 w-6" />
-                          <span className="sr-only">Remove Template</span>
-                        </button>
+                      <div className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm">
+                        <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
+                        <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
+                        <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
+                      </div>
 
-                        <div className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm">
-                          <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
-                          <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
-                          <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
-                        </div>
+                      <p className="group-hover:text-foreground text-muted-foreground mt-4 font-medium">
+                        Uploaded Document
+                      </p>
 
-                        <p className="group-hover:text-foreground text-muted-foreground mt-4 font-medium">
-                          Uploaded Document
-                        </p>
-
-                        <span className="text-muted-foreground/80 mt-1 text-sm">
-                          {uploadedFile.file.name}
-                        </span>
-                      </CardContent>
-                    </Card>
-                  ) : (
-                    <DocumentDropzone
-                      className="mt-1.5 h-[40vh]"
-                      onDrop={onFileDrop}
-                      type="template"
-                    />
-                  )}
-                </div>
+                      <span className="text-muted-foreground/80 mt-1 text-sm">
+                        {uploadedFile.file.name}
+                      </span>
+                    </CardContent>
+                  </Card>
+                ) : (
+                  <DocumentDropzone className="h-[40vh]" onDrop={onFileDrop} type="template" />
+                )}
               </div>
 
-              <div className="flex w-full justify-end">
-                <Button loading={isCreatingTemplate} type="submit">
-                  Create Template
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button type="button" variant="secondary">
+                    Cancel
+                  </Button>
+                </DialogClose>
+
+                <Button
+                  loading={form.formState.isSubmitting}
+                  disabled={!uploadedFile}
+                  type="submit"
+                >
+                  Create template
                 </Button>
-              </div>
-            </form>
-          </Form>
-        </div>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
       </DialogContent>
     </Dialog>
   );
diff --git a/apps/web/src/app/(signing)/sign/[token]/complete/page.tsx b/apps/web/src/app/(signing)/sign/[token]/complete/page.tsx
index cfed976e5..1b7adfe70 100644
--- a/apps/web/src/app/(signing)/sign/[token]/complete/page.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/complete/page.tsx
@@ -131,7 +131,7 @@ export default async function CompletedSigningPage({
               </div>
             ))
             .with({ deletedAt: null }, () => (
-              <div className="flex items-center text-center text-blue-600">
+              <div className="flex items-center mt-4 text-center text-blue-600">
                 <Clock8 className="mr-2 h-5 w-5" />
                 <span className="text-sm">Waiting for others to sign</span>
               </div>
diff --git a/packages/ui/primitives/document-flow/add-signers.tsx b/packages/ui/primitives/document-flow/add-signers.tsx
index 27839a453..25169bcec 100644
--- a/packages/ui/primitives/document-flow/add-signers.tsx
+++ b/packages/ui/primitives/document-flow/add-signers.tsx
@@ -361,29 +361,83 @@ export const AddSignersFormPartial = ({
                             <SelectContent align="end">
                               <SelectItem value={RecipientRole.SIGNER}>
                                 <div className="flex items-center">
-                                  <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
-                                  Signer
-                                </div>
-                              </SelectItem>
-
-                              <SelectItem value={RecipientRole.CC}>
-                                <div className="flex items-center">
-                                  <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
-                                  Receives copy
+                                  <div className="flex w-[150px] items-center">
+                                    <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
+                                    Needs to sign
+                                  </div>
+                                  <Tooltip>
+                                    <TooltipTrigger>
+                                      <InfoIcon className="h-4 w-4" />
+                                    </TooltipTrigger>
+                                    <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                      <p>
+                                        The recipient is required to sign the document for it to be
+                                        completed.
+                                      </p>
+                                    </TooltipContent>
+                                  </Tooltip>
                                 </div>
                               </SelectItem>
 
                               <SelectItem value={RecipientRole.APPROVER}>
                                 <div className="flex items-center">
-                                  <span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
-                                  Approver
+                                  <div className="flex w-[150px] items-center">
+                                    <span className="mr-2">
+                                      {ROLE_ICONS[RecipientRole.APPROVER]}
+                                    </span>
+                                    Needs to approve
+                                  </div>
+                                  <Tooltip>
+                                    <TooltipTrigger>
+                                      <InfoIcon className="h-4 w-4" />
+                                    </TooltipTrigger>
+                                    <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                      <p>
+                                        The recipient is required to approve the document for it to
+                                        be completed.
+                                      </p>
+                                    </TooltipContent>
+                                  </Tooltip>
                                 </div>
                               </SelectItem>
 
                               <SelectItem value={RecipientRole.VIEWER}>
                                 <div className="flex items-center">
-                                  <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
-                                  Viewer
+                                  <div className="flex w-[150px] items-center">
+                                    <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
+                                    Needs to view
+                                  </div>
+                                  <Tooltip>
+                                    <TooltipTrigger>
+                                      <InfoIcon className="h-4 w-4" />
+                                    </TooltipTrigger>
+                                    <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                      <p>
+                                        The recipient is required to view the document for it to be
+                                        completed.
+                                      </p>
+                                    </TooltipContent>
+                                  </Tooltip>
+                                </div>
+                              </SelectItem>
+
+                              <SelectItem value={RecipientRole.CC}>
+                                <div className="flex items-center">
+                                  <div className="flex w-[150px] items-center">
+                                    <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
+                                    Receives copy
+                                  </div>
+                                  <Tooltip>
+                                    <TooltipTrigger>
+                                      <InfoIcon className="h-4 w-4" />
+                                    </TooltipTrigger>
+                                    <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                      <p>
+                                        The recipient is not required to take any action and
+                                        receives a copy of the document after it is completed.
+                                      </p>
+                                    </TooltipContent>
+                                  </Tooltip>
                                 </div>
                               </SelectItem>
                             </SelectContent>
diff --git a/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx b/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
index 08cfc4957..e415f1aac 100644
--- a/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
+++ b/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
@@ -4,7 +4,7 @@ import React, { useId, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Plus, Trash } from 'lucide-react';
+import { InfoIcon, Plus, Trash } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
 
@@ -25,6 +25,7 @@ import type { DocumentFlowStep } from '../document-flow/types';
 import { ROLE_ICONS } from '../recipient-role-icons';
 import { Select, SelectContent, SelectItem, SelectTrigger } from '../select';
 import { useStep } from '../stepper';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
 import type { TAddTemplatePlacholderRecipientsFormSchema } from './add-template-placeholder-recipients.types';
 import { ZAddTemplatePlacholderRecipientsFormSchema } from './add-template-placeholder-recipients.types';
 
@@ -159,29 +160,81 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
                         <SelectContent className="" align="end">
                           <SelectItem value={RecipientRole.SIGNER}>
                             <div className="flex items-center">
-                              <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
-                              Signer
-                            </div>
-                          </SelectItem>
-
-                          <SelectItem value={RecipientRole.CC}>
-                            <div className="flex items-center">
-                              <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
-                              Receives copy
+                              <div className="flex w-[150px] items-center">
+                                <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
+                                Needs to sign
+                              </div>
+                              <Tooltip>
+                                <TooltipTrigger>
+                                  <InfoIcon className="h-4 w-4" />
+                                </TooltipTrigger>
+                                <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                  <p>
+                                    The recipient is required to sign the document for it to be
+                                    completed.
+                                  </p>
+                                </TooltipContent>
+                              </Tooltip>
                             </div>
                           </SelectItem>
 
                           <SelectItem value={RecipientRole.APPROVER}>
                             <div className="flex items-center">
-                              <span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
-                              Approver
+                              <div className="flex w-[150px] items-center">
+                                <span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
+                                Needs to approve
+                              </div>
+                              <Tooltip>
+                                <TooltipTrigger>
+                                  <InfoIcon className="h-4 w-4" />
+                                </TooltipTrigger>
+                                <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                  <p>
+                                    The recipient is required to approve the document for it to be
+                                    completed.
+                                  </p>
+                                </TooltipContent>
+                              </Tooltip>
                             </div>
                           </SelectItem>
 
                           <SelectItem value={RecipientRole.VIEWER}>
                             <div className="flex items-center">
-                              <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
-                              Viewer
+                              <div className="flex w-[150px] items-center">
+                                <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
+                                Needs to view
+                              </div>
+                              <Tooltip>
+                                <TooltipTrigger>
+                                  <InfoIcon className="h-4 w-4" />
+                                </TooltipTrigger>
+                                <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                  <p>
+                                    The recipient is required to view the document for it to be
+                                    completed.
+                                  </p>
+                                </TooltipContent>
+                              </Tooltip>
+                            </div>
+                          </SelectItem>
+
+                          <SelectItem value={RecipientRole.CC}>
+                            <div className="flex items-center">
+                              <div className="flex w-[150px] items-center">
+                                <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
+                                Receives copy
+                              </div>
+                              <Tooltip>
+                                <TooltipTrigger>
+                                  <InfoIcon className="h-4 w-4" />
+                                </TooltipTrigger>
+                                <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                                  <p>
+                                    The recipient is not required to take any action and receives a
+                                    copy of the document after it is completed.
+                                  </p>
+                                </TooltipContent>
+                              </Tooltip>
                             </div>
                           </SelectItem>
                         </SelectContent>