diff --git a/apps/web/package.json b/apps/web/package.json
index e2f379fe7..e2e1b19c1 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@documenso/prisma": "*",
+    "@documenso/ui": "*",
     "@headlessui/react": "^1.7.4",
     "@heroicons/react": "^2.0.13",
     "@tailwindcss/forms": "^0.5.3",
diff --git a/apps/web/pages/documents.tsx b/apps/web/pages/documents.tsx
index eedeec8a5..68fb54773 100644
--- a/apps/web/pages/documents.tsx
+++ b/apps/web/pages/documents.tsx
@@ -132,7 +132,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                         </td>
                         <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                           {document.Recipient.map((item: any) => (
-                            <div>
+                            <div key={item.id}>
                               {item.sendStatus === "SENT" &&
                               item.readStatus !== "OPENED" &&
                               item.signingStatus !== "SIGNED" ? (
diff --git a/apps/web/pages/documents/[id]/index.tsx b/apps/web/pages/documents/[id]/index.tsx
index e09740269..b660bb332 100644
--- a/apps/web/pages/documents/[id]/index.tsx
+++ b/apps/web/pages/documents/[id]/index.tsx
@@ -96,19 +96,17 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
             </div>
           </div>
           <div className="mt-4 flex flex-shrink-0 md:mt-0 md:ml-4">
-            <Link
-              type="a"
+            <Button
+              icon={UserPlusIcon}
               href={
                 NEXT_PUBLIC_WEBAPP_URL +
                 "/documents/" +
                 props.document.id +
                 "/recipients"
               }
-              className="ml-3 inline-flex items-center rounded-md border border-transparent bg-neon px-4 py-2 text-sm font-medium text-white shadow-sm bg-grey hover:bg-neon-dark focus:outline-none focus:ring-2 focus:neon-dark focus:ring-offset-2"
             >
-              <UserPlusIcon className="inline text-white h-4 mr-1"></UserPlusIcon>
               Add Recipients
-            </Link>
+            </Button>
             <Button
               icon={PaperAirplaneIcon}
               disabled={(props?.document?.Recipient?.length || 0) === 0}
diff --git a/package-lock.json b/package-lock.json
index 6c36df0eb..778594706 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,6 +44,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@documenso/prisma": "*",
+        "@documenso/ui": "*",
         "@headlessui/react": "^1.7.4",
         "@heroicons/react": "^2.0.13",
         "@tailwindcss/forms": "^0.5.3",
@@ -8488,6 +8489,7 @@
       "version": "file:apps/web",
       "requires": {
         "@documenso/prisma": "*",
+        "@documenso/ui": "*",
         "@headlessui/react": "^1.7.4",
         "@heroicons/react": "^2.0.13",
         "@tailwindcss/forms": "^0.5.3",
@@ -8523,7 +8525,7 @@
         "react-tooltip": "^5.7.2",
         "sass": "^1.57.1",
         "short-uuid": "^4.2.2",
-        "signature_pad": "*",
+        "signature_pad": "^4.1.4",
         "tailwindcss": "^3.2.4",
         "typescript": "4.8.4"
       },
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 20989f54d..6a013c58b 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -6,8 +6,8 @@ export function Button(props: any) {
   const isLink = typeof props.href !== "undefined";
   const { color = "primary", icon, disabled, onClick } = props;
   const baseStyles =
-    "inline-flex items-center justify-center min-w-[80px] rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white shadow-sm disabled:bg-gray-300";
-  const primaryStyles = "bg-neon hover:bg-neon-dark";
+    "ml-3 inline-flex items-center justify-center min-w-[80px] rounded-md border border-transparent px-4 py-2 text-sm font-medium shadow-sm disabled:bg-gray-300";
+  const primaryStyles = "text-white bg-neon hover:bg-neon-dark";
   const secondaryStyles =
     "border-gray-300 bg-white text-gray-700 hover:bg-gray-50";
 
@@ -21,6 +21,14 @@ export function Button(props: any) {
         props.className
       )}
     >
+      {props.icon ? (
+        <props.icon
+          className="inline text-inherit h-5 mr-1"
+          aria-hidden="true"
+        ></props.icon>
+      ) : (
+        ""
+      )}
       {props.children}
     </Link>
   ) : (
@@ -36,7 +44,7 @@ export function Button(props: any) {
     >
       {props.icon ? (
         <props.icon
-          className="inline text-inherit w-4 mr-1"
+          className="inline text-inherit h-5 mr-1"
           aria-hidden="true"
         ></props.icon>
       ) : (