diff --git a/apps/web/pages/documents.tsx b/apps/web/pages/documents.tsx
index 3bda20aff..af6752d47 100644
--- a/apps/web/pages/documents.tsx
+++ b/apps/web/pages/documents.tsx
@@ -303,17 +303,16 @@ 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>
-                            {document.status !== "COMPLETED" && (
-                              <IconButton
-                                icon={PencilSquareIcon}
-                                className="mr-2"
-                                onClick={(event: any) => {
-                                  event.preventDefault();
-                                  event.stopPropagation();
-                                  router.push("/documents/" + document.id);
-                                }}
-                              />
-                            )}
+                            <IconButton
+                              icon={PencilSquareIcon}
+                              className="mr-2"
+                              onClick={(event: any) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                router.push("/documents/" + document.id);
+                              }}
+                              disabled={document.status === "COMPLETED"}
+                            />
                             <IconButton
                               icon={ArrowDownTrayIcon}
                               className="mr-2"
diff --git a/packages/ui/components/tooltip/Tooltip.tsx b/packages/ui/components/tooltip/Tooltip.tsx
index b7b3749e0..56bb59095 100644
--- a/packages/ui/components/tooltip/Tooltip.tsx
+++ b/packages/ui/components/tooltip/Tooltip.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { classNames } from "@documenso/lib";
 
 export function Tooltip(props: any) {
   let timeout: NodeJS.Timeout;
@@ -16,19 +17,18 @@ export function Tooltip(props: any) {
   };
 
   return (
-    <div
-      className="relative"
-      onPointerEnter={showTip}
-      onPointerLeave={hideTip}
-    >
+    <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
+        className={classNames(
+          "absolute left-1/4 -translate-x-1/2 transform px-4 transition-all delay-50 duration-120",
+          active && "bottom-9 opacity-100",
+          !active && "pointer-events-none bottom-6 opacity-0"
+        )}>
+        <span className="text-neon-800 bg-neon-200 inline-block rounded py-1 px-2 text-xs">
+          {props.label}
+        </span>
+      </div>
     </div>
   );
 };