diff --git a/web/src/app/ee/admin/groups/[groupId]/GroupDisplay.tsx b/web/src/app/ee/admin/groups/[groupId]/GroupDisplay.tsx
index 878eb0f63..41d3c6c40 100644
--- a/web/src/app/ee/admin/groups/[groupId]/GroupDisplay.tsx
+++ b/web/src/app/ee/admin/groups/[groupId]/GroupDisplay.tsx
@@ -296,21 +296,29 @@ export const GroupDisplay = ({
         )}
       </div>
 
-      <div className="mt-3 w-fit">
-        <Button
-          tooltip={
-            !userGroup.is_up_to_date
-              ? "Cannot update group while sync is occurring"
-              : undefined
-          }
-          size="sm"
-          variant="submit"
-          onClick={() => setAddMemberFormVisible(true)}
-          disabled={!userGroup.is_up_to_date}
-        >
-          Add Users
-        </Button>
-      </div>
+      <TooltipProvider>
+        <Tooltip delayDuration={0}>
+          <TooltipTrigger asChild>
+            <Button
+              size="sm"
+              className={userGroup.is_up_to_date ? "" : "opacity-50"}
+              variant="submit"
+              onClick={() => {
+                if (userGroup.is_up_to_date) {
+                  setAddMemberFormVisible(true);
+                }
+              }}
+            >
+              Add Users
+            </Button>
+          </TooltipTrigger>
+          {!userGroup.is_up_to_date && (
+            <TooltipContent>
+              <p>Cannot update group while sync is occurring</p>
+            </TooltipContent>
+          )}
+        </Tooltip>
+      </TooltipProvider>
       {addMemberFormVisible && (
         <AddMemberForm
           users={users}
@@ -400,21 +408,29 @@ export const GroupDisplay = ({
         )}
       </div>
 
-      <div className="mt-3 w-fit">
-        <Button
-          tooltip={
-            !userGroup.is_up_to_date
-              ? "Cannot update group while sync is occurring"
-              : undefined
-          }
-          onClick={() => setAddConnectorFormVisible(true)}
-          size="sm"
-          variant="submit"
-          disabled={!userGroup.is_up_to_date}
-        >
-          Add Connectors
-        </Button>
-      </div>
+      <TooltipProvider>
+        <Tooltip delayDuration={0}>
+          <TooltipTrigger asChild>
+            <Button
+              size="sm"
+              className={userGroup.is_up_to_date ? "" : "opacity-50"}
+              variant="submit"
+              onClick={() => {
+                if (userGroup.is_up_to_date) {
+                  setAddConnectorFormVisible(true);
+                }
+              }}
+            >
+              Add Connectors
+            </Button>
+          </TooltipTrigger>
+          {!userGroup.is_up_to_date && (
+            <TooltipContent>
+              <p>Cannot update group while sync is occurring</p>
+            </TooltipContent>
+          )}
+        </Tooltip>
+      </TooltipProvider>
 
       {addConnectorFormVisible && (
         <AddConnectorForm
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index e7a53170b..637165d63 100644
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -1,11 +1,9 @@
-"use client";
-
 import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { Slot } from "@radix-ui/react-slot";
-import { cn } from "@/lib/utils";
 import { cva, type VariantProps } from "class-variance-authority";
 
+import { cn } from "@/lib/utils";
+
 const buttonVariants = cva(
   "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300",
   {
@@ -118,12 +116,10 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     if (tooltip) {
       return (
-        <div className="group relative inline-block">
+        <div className="relative group">
           {button}
-          <div className="absolute z-50 invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity duration-300 bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-auto">
-            <div className="bg-neutral-800 text-white text-xs rounded py-1 px-2 shadow-md">
-              {tooltip}
-            </div>
+          <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-neutral-800 text-white text-sm rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
+            {tooltip}
           </div>
         </div>
       );