diff --git a/packages/ui/package.json b/packages/ui/package.json
index 603d0e250..4eb7ac8b8 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -33,8 +33,6 @@
   "dependencies": {
     "@blueprintjs/core": "^4.16.3",
     "@blueprintjs/popover2": "^1.13.3",
-    "@headlessui/react": "^1.7.17",
-    "clsx": "^2.0.0",
-    "next-themes": "^0.2.1"
+    "@headlessui/react": "^1.7.17"
   }
 }
diff --git a/packages/ui/src/button/button.tsx b/packages/ui/src/button/button.tsx
index 706b0ae6c..138e105e0 100644
--- a/packages/ui/src/button/button.tsx
+++ b/packages/ui/src/button/button.tsx
@@ -47,13 +47,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       >
         {prependIcon && (
           <div className={buttonIconStyle}>
-            {React.cloneElement(prependIcon, { "stroke-width": 2 })}
+            {React.cloneElement(prependIcon, { strokeWidth: 2 })}
           </div>
         )}
         {children}
         {appendIcon && (
           <div className={buttonIconStyle}>
-            {React.cloneElement(appendIcon, { "stroke-width": 2 })}
+            {React.cloneElement(appendIcon, { strokeWidth: 2 })}
           </div>
         )}
       </button>
diff --git a/packages/ui/src/tooltip/tooltip.tsx b/packages/ui/src/tooltip/tooltip.tsx
index ca25cd3e1..96bf45aa3 100644
--- a/packages/ui/src/tooltip/tooltip.tsx
+++ b/packages/ui/src/tooltip/tooltip.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 
 // next-themes
-import { useTheme } from "next-themes";
 import { Tooltip2 } from "@blueprintjs/popover2";
 
 export type TPosition =
@@ -41,46 +40,32 @@ export const Tooltip: React.FC<ITooltipProps> = ({
   className = "",
   openDelay = 200,
   closeDelay,
-}) => {
-  const { theme } = useTheme();
-
-  return (
-    <Tooltip2
-      disabled={disabled}
-      hoverOpenDelay={openDelay}
-      hoverCloseDelay={closeDelay}
-      content={
-        <div
-          className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md ${
-            theme === "custom"
-              ? "bg-custom-background-100 text-custom-text-200"
-              : "bg-black text-gray-400"
-          } break-words overflow-hidden ${className}`}
-        >
-          {tooltipHeading && (
-            <h5
-              className={`font-medium ${
-                theme === "custom" ? "text-custom-text-100" : "text-white"
-              }`}
-            >
-              {tooltipHeading}
-            </h5>
-          )}
-          {tooltipContent}
-        </div>
-      }
-      position={position}
-      renderTarget={({
-        isOpen: isTooltipOpen,
+}) => (
+  <Tooltip2
+    disabled={disabled}
+    hoverOpenDelay={openDelay}
+    hoverCloseDelay={closeDelay}
+    content={
+      <div
+        className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md bg-custom-background-100 text-custom-text-200 break-words overflow-hidden ${className}`}
+      >
+        {tooltipHeading && (
+          <h5 className="font-medium text-custom-text-100">{tooltipHeading}</h5>
+        )}
+        {tooltipContent}
+      </div>
+    }
+    position={position}
+    renderTarget={({
+      isOpen: isTooltipOpen,
+      ref: eleReference,
+      ...tooltipProps
+    }) =>
+      React.cloneElement(children, {
         ref: eleReference,
-        ...tooltipProps
-      }) =>
-        React.cloneElement(children, {
-          ref: eleReference,
-          ...tooltipProps,
-          ...children.props,
-        })
-      }
-    />
-  );
-};
+        ...tooltipProps,
+        ...children.props,
+      })
+    }
+  />
+);