diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index e1af8c6c7..66b6c0a9a 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -567,8 +567,7 @@
         },
         "node_modules/@floating-ui/react-dom": {
             "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.0.tgz",
-            "integrity": "sha512-Ke0oU3SeuABC2C4OFu2mSAwHIP5WUiV98O9YWoHV4Q5aT6E9k06DV0Khi5uYspR8xmmBk08t8ZDcz3TR3ARkEg==",
+            "license": "MIT",
             "dependencies": {
                 "@floating-ui/dom": "^1.2.7"
             },
@@ -925,8 +924,7 @@
         },
         "node_modules/@radix-ui/react-arrow": {
             "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
-            "integrity": "sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==",
+            "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "^7.13.10",
                 "@radix-ui/react-primitive": "1.0.3"
@@ -1149,8 +1147,7 @@
         },
         "node_modules/@radix-ui/react-popper": {
             "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.2.tgz",
-            "integrity": "sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==",
+            "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "^7.13.10",
                 "@floating-ui/react-dom": "^2.0.0",
@@ -1293,8 +1290,7 @@
         },
         "node_modules/@radix-ui/react-tooltip": {
             "version": "1.0.6",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.6.tgz",
-            "integrity": "sha512-DmNFOiwEc2UDigsYj6clJENma58OelxD24O4IODoZ+3sQc3Zb+L8w1EP+y9laTuKCLAysPw4fD6/v0j4KNV8rg==",
+            "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "^7.13.10",
                 "@radix-ui/primitive": "1.0.1",
@@ -1409,8 +1405,7 @@
         },
         "node_modules/@radix-ui/react-use-rect": {
             "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz",
-            "integrity": "sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==",
+            "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "^7.13.10",
                 "@radix-ui/rect": "1.0.1"
@@ -1444,8 +1439,7 @@
         },
         "node_modules/@radix-ui/react-visually-hidden": {
             "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
-            "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==",
+            "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "^7.13.10",
                 "@radix-ui/react-primitive": "1.0.3"
@@ -1467,8 +1461,7 @@
         },
         "node_modules/@radix-ui/rect": {
             "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz",
-            "integrity": "sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==",
+            "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "^7.13.10"
             }
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index aca9f9bb3..d6ca1fe90 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -65,7 +65,7 @@ export default function ParameterComponent({
 
     refHtml.current = groupedObj.map((item, i) => (
       <span
-        key={item}
+        key={i}
         className={classNames(
           i > 0 ? "items-center flex mt-3" : "items-center flex"
         )}
@@ -86,7 +86,7 @@ export default function ParameterComponent({
             {item.type.split(", ").length > 2
               ? item.type.split(", ").map((el, i) => (
                   <>
-                    <span key={el}>
+                    <span key={i}>
                       {i == item.type.split(", ").length - 1
                         ? el
                         : (el += `, `)}
diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx
index 30b2c6856..1625fb2da 100644
--- a/src/frontend/src/components/ui/dialog.tsx
+++ b/src/frontend/src/components/ui/dialog.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 47c9a8b08..068bdf27f 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -16,6 +16,7 @@ import { TabsContext } from "../../../../contexts/tabsContext";
 import { useReactFlow } from "reactflow";
 import EditNodeModal from "../../../../modals/EditNodeModal";
 import TooltipReact from "../../../../components/ReactTooltipComponent";
+import ShadTooltip from "../../../../components/ShadTooltipComponent";
 
 const NodeToolbarComponent = (props) => {
   const [nodeLength, setNodeLength] = useState(
@@ -40,12 +41,7 @@ const NodeToolbarComponent = (props) => {
     <>
       <div className="h-10 w-26">
         <span className="isolate inline-flex rounded-md shadow-sm">
-          <TooltipReact
-            delayShow={1000}
-            selector="Delete"
-            htmlContent="Delete"
-            position="top"
-          >
+          <ShadTooltip delayDuration={1000} content="Delete" side="top">
             <button
               className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
               onClick={() => {
@@ -54,59 +50,9 @@ const NodeToolbarComponent = (props) => {
             >
               <TrashIcon className="w-5 h-5 dark:text-gray-300"></TrashIcon>
             </button>
-          </TooltipReact>
+          </ShadTooltip>
 
-          <TooltipReact
-            delayShow={1000}
-            selector="Settings"
-            htmlContent="Settings"
-            position="top"
-          >
-            <button
-              className={classNames(
-                Object.keys(props.data.node.template).some(
-                  (t) =>
-                    props.data.node.template[t].advanced &&
-                    props.data.node.template[t].show
-                )
-                  ? "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-                  : "hidden"
-              )}
-              onClick={(event) => {
-                event.preventDefault();
-                props.openPopUp(<NodeModal data={props.data} />);
-              }}
-            >
-              <div className=" absolute right-1 top-[-2px] text-red-600">
-                {Object.keys(props.data.node.template).some(
-                  (t) =>
-                    props.data.node.template[t].advanced &&
-                    props.data.node.template[t].required
-                )
-                  ? " *"
-                  : ""}
-              </div>
-              <Cog6ToothIcon
-                className={classNames(
-                  Object.keys(props.data.node.template).some(
-                    (t) =>
-                      props.data.node.template[t].advanced &&
-                      props.data.node.template[t].show
-                  )
-                    ? ""
-                    : "hidden",
-                  "w-5 h-5  dark:text-gray-300"
-                )}
-              ></Cog6ToothIcon>
-            </button>
-          </TooltipReact>
-
-          <TooltipReact
-            delayShow={1000}
-            selector="Duplicate"
-            htmlContent="Duplicate"
-            position="top"
-          >
+          <ShadTooltip delayDuration={1000} content="Duplicate" side="top">
             <button
               className={classNames(
                 nodeLength > 0
@@ -132,15 +78,10 @@ const NodeToolbarComponent = (props) => {
             >
               <Square2StackIcon className="w-5 h-5  dark:text-gray-300"></Square2StackIcon>
             </button>
-          </TooltipReact>
+          </ShadTooltip>
 
           {nodeLength > 0 && (
-            <TooltipReact
-              delayShow={1000}
-              selector="Edit"
-              htmlContent="Edit"
-              position="top"
-            >
+            <ShadTooltip delayDuration={1000} content="Edit" side="top">
               <button
                 className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md"
                 onClick={(event) => {
@@ -150,7 +91,7 @@ const NodeToolbarComponent = (props) => {
               >
                 <PencilSquareIcon className="w-5 h-5  dark:text-gray-300"></PencilSquareIcon>
               </button>
-            </TooltipReact>
+            </ShadTooltip>
           )}
 
           {/*