diff --git a/apps/web/pages/documents.tsx b/apps/web/pages/documents.tsx
index af6752d47..3bda20aff 100644
--- a/apps/web/pages/documents.tsx
+++ b/apps/web/pages/documents.tsx
@@ -303,16 +303,17 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                         </td>
                         <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                           <div>
-                            <IconButton
-                              icon={PencilSquareIcon}
-                              className="mr-2"
-                              onClick={(event: any) => {
-                                event.preventDefault();
-                                event.stopPropagation();
-                                router.push("/documents/" + document.id);
-                              }}
-                              disabled={document.status === "COMPLETED"}
-                            />
+                            {document.status !== "COMPLETED" && (
+                              <IconButton
+                                icon={PencilSquareIcon}
+                                className="mr-2"
+                                onClick={(event: any) => {
+                                  event.preventDefault();
+                                  event.stopPropagation();
+                                  router.push("/documents/" + document.id);
+                                }}
+                              />
+                            )}
                             <IconButton
                               icon={ArrowDownTrayIcon}
                               className="mr-2"
diff --git a/apps/web/pages/documents/[id]/recipients.tsx b/apps/web/pages/documents/[id]/recipients.tsx
index 8dc9e7f64..838a8be45 100644
--- a/apps/web/pages/documents/[id]/recipients.tsx
+++ b/apps/web/pages/documents/[id]/recipients.tsx
@@ -4,7 +4,7 @@ import { NEXT_PUBLIC_WEBAPP_URL, classNames } from "@documenso/lib";
 import { createOrUpdateRecipient, deleteRecipient, sendSigningRequests } from "@documenso/lib/api";
 import { getDocument } from "@documenso/lib/query";
 import { getUserFromToken } from "@documenso/lib/server";
-import { Breadcrumb, Button, Dialog, IconButton } from "@documenso/ui";
+import { Breadcrumb, Button, Dialog, IconButton, Tooltip } from "@documenso/ui";
 import Layout from "../../../components/layout";
 import { NextPageWithLayout } from "../../_app";
 import {
@@ -264,38 +264,46 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                         </div>
                         {props.document.status !== DocumentStatus.COMPLETED && (
                           <div className="mr-1 flex">
-                            <IconButton
-                              icon={PaperAirplaneIcon}
-                              disabled={
-                                !item.id ||
-                                item.sendStatus !== "SENT" ||
-                                item.signingStatus === "SIGNED" ||
-                                loading
-                              }
-                              color="secondary"
-                              className="my-auto mr-4 h-9"
-                              onClick={() => {
-                                if (confirm("Resend this signing request?")) {
-                                  setLoading(true);
-                                  sendSigningRequests(props.document, [item.id]).finally(() => {
-                                    setLoading(false);
-                                  });
+                            <Tooltip label="Resend">
+                              <IconButton
+                                icon={PaperAirplaneIcon}
+                                disabled={
+                                  !item.id ||
+                                  item.sendStatus !== "SENT" ||
+                                  item.signingStatus === "SIGNED" ||
+                                  loading
                                 }
-                              }}>
-                              Resend
-                            </IconButton>
-                            <IconButton
-                              icon={TrashIcon}
-                              disabled={!item.id || item.sendStatus === "SENT" || loading}
-                              onClick={() => {
-                                const removedItem = { ...fields }[index];
-                                remove(index);
-                                deleteRecipient(item)?.catch((err) => {
-                                  append(removedItem);
-                                });
-                              }}
-                              className="group-hover:text-neon-dark group-hover:disabled:text-gray-400"
-                            />
+                                className="my-auto mr-4 h-9"
+                                onClick={(event: any) => {
+                                  event.preventDefault();
+                                  event.stopPropagation();
+                                  if (confirm("Resend this signing request?")) {
+                                    setLoading(true);
+                                    sendSigningRequests(props.document, [item.id]).finally(() => {
+                                      setLoading(false);
+                                    });
+                                  }
+                                }}>
+                              </IconButton>
+                            </Tooltip>
+                            <Tooltip label="Delete">
+                              <IconButton
+                                icon={TrashIcon}
+                                disabled={!item.id || item.sendStatus === "SENT" || loading}
+                                onClick={(event: any) => {
+                                  event.preventDefault();
+                                  event.stopPropagation();
+                                  if (confirm("Delete this signing request?")) {
+                                    const removedItem = { ...fields }[index];
+                                    remove(index);
+                                    deleteRecipient(item)?.catch((err) => {
+                                      append(removedItem);
+                                    });
+                                  }
+                                }}
+                                className="group-hover:text-neon-dark group-hover:disabled:text-gray-400"
+                              />
+                            </Tooltip>
                           </div>
                         )}
                       </div>
diff --git a/packages/ui/components/tooltip/Tooltip.tsx b/packages/ui/components/tooltip/Tooltip.tsx
new file mode 100644
index 000000000..b7b3749e0
--- /dev/null
+++ b/packages/ui/components/tooltip/Tooltip.tsx
@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+
+export function Tooltip(props: any) {
+  let timeout: NodeJS.Timeout;
+  const [active, setActive] = useState(false);
+
+  const showTip = () => {
+    timeout = setTimeout(() => {
+      setActive(true);
+    }, props.delay || 40);
+  };
+
+  const hideTip = () => {
+    clearInterval(timeout);
+    setActive(false);
+  };
+
+  return (
+    <div
+      className="relative"
+      onPointerEnter={showTip}
+      onPointerLeave={hideTip}
+    >
+      {props.children}
+      {active && (
+        <div className="absolute left-1/4 -translate-x-1/2 bottom-9 transform px-4">
+          <span className="text-xs inline-block py-1 px-2 rounded text-neon-800 bg-neon-200">
+            {props.label}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/ui/components/tooltip/index.ts b/packages/ui/components/tooltip/index.ts
new file mode 100644
index 000000000..3d7eea698
--- /dev/null
+++ b/packages/ui/components/tooltip/index.ts
@@ -0,0 +1 @@
+export { Tooltip } from "./Tooltip";
\ No newline at end of file
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index 1cb0c6752..a320043be 100644
--- a/packages/ui/index.ts
+++ b/packages/ui/index.ts
@@ -2,3 +2,4 @@ export { Button, IconButton } from "./components/button/index";
 export { SelectBox } from "./components/selectBox/index";
 export { Breadcrumb } from "./components/breadcrumb/index";
 export { Dialog } from "./components/dialog/index";
+export { Tooltip } from "./components/tooltip/index";