diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 313be210c..5a727106b 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -1,3 +1,15 @@
+import { Zap } from "lucide-react";
+import { useContext, useEffect, useRef, useState } from "react";
+import { NodeToolbar } from "reactflow";
+import ShadTooltip from "../../components/ShadTooltipComponent";
+import Tooltip from "../../components/TooltipComponent";
+import { useSSE } from "../../contexts/SSEContext";
+import { alertContext } from "../../contexts/alertContext";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { typesContext } from "../../contexts/typesContext";
+import NodeModal from "../../modals/NodeModal";
+import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
+import { NodeDataType } from "../../types/flow";
 import {
   classNames,
   nodeColors,
@@ -5,18 +17,6 @@ import {
   toTitleCase,
 } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
-import { typesContext } from "../../contexts/typesContext";
-import { useContext, useState, useEffect, useRef } from "react";
-import { NodeDataType } from "../../types/flow";
-import { alertContext } from "../../contexts/alertContext";
-import { PopUpContext } from "../../contexts/popUpContext";
-import NodeModal from "../../modals/NodeModal";
-import Tooltip from "../../components/TooltipComponent";
-import { NodeToolbar } from "reactflow";
-import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
-import ShadTooltip from "../../components/ShadTooltipComponent";
-import { useSSE } from "../../contexts/SSEContext";
-import { Zap } from "lucide-react";
 
 export default function GenericNode({
   data,
@@ -94,10 +94,7 @@ export default function GenericNode({
               }}
             />
             <div className="generic-node-tooltip-div">
-              <ShadTooltip
-                delayDuration={1500}
-                content={data.node.display_name}
-              >
+              <ShadTooltip content={data.node.display_name}>
                 <div className="generic-node-tooltip-div text-primary">
                   {data.node.display_name}
                 </div>
diff --git a/src/frontend/src/components/ShadTooltipComponent/index.tsx b/src/frontend/src/components/ShadTooltipComponent/index.tsx
index 1a352221e..3fe82afd7 100644
--- a/src/frontend/src/components/ShadTooltipComponent/index.tsx
+++ b/src/frontend/src/components/ShadTooltipComponent/index.tsx
@@ -1,4 +1,4 @@
-import { RadialProgressType, ShadToolTipType } from "../../types/components";
+import { ShadToolTipType } from "../../types/components";
 import {
   Tooltip,
   TooltipContent,
@@ -11,15 +11,20 @@ export default function ShadTooltip({
   side,
   asChild = true,
   children,
-  delayDuration,
-  style
+  style,
+  delayDuration = 500,
 }: ShadToolTipType) {
   return (
     <TooltipProvider>
       <Tooltip delayDuration={delayDuration}>
         <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
 
-        <TooltipContent className={style} side={side} avoidCollisions={false} sticky="always">
+        <TooltipContent
+          className={style}
+          side={side}
+          avoidCollisions={false}
+          sticky="always"
+        >
           {content}
         </TooltipContent>
       </Tooltip>
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 99fd03941..ea802cbad 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -1,42 +1,15 @@
-import { useContext, useEffect, useRef, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
+import "ace-builds/src-noconflict/ext-language_tools";
 import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
-import "ace-builds/src-noconflict/ext-language_tools";
+import { useContext, useEffect, useRef, useState } from "react";
+import { PopUpContext } from "../../contexts/popUpContext";
 // import "ace-builds/webpack-resolver";
-import { darkContext } from "../../contexts/darkContext";
+import { Check, Clipboard, Code2 } from "lucide-react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../../components/ui/dialog";
-import { FlowType } from "../../types/flow/index";
-import { getCurlCode, getPythonApiCode, getPythonCode } from "../../constants";
-import { EXPORT_CODE_DIALOG } from "../../constants";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "../../components/ui/tabs";
-import { Check, Clipboard, Code2 } from "lucide-react";
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../../components/ui/table";
-import { buildTweaks, classNames, limitScrollFieldsModal } from "../../utils";
 import AccordionComponent from "../../components/AccordionComponent";
+import ShadTooltip from "../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../components/codeAreaComponent";
 import Dropdown from "../../components/dropdownComponent";
 import FloatComponent from "../../components/floatComponent";
@@ -47,9 +20,38 @@ import IntComponent from "../../components/intComponent";
 import PromptAreaComponent from "../../components/promptComponent";
 import TextAreaComponent from "../../components/textAreaComponent";
 import ToggleShadComponent from "../../components/toggleShadComponent";
-import ShadTooltip from "../../components/ShadTooltipComponent";
-import { cloneDeep, filter } from "lodash";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/ui/table";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../components/ui/tabs";
+import {
+  EXPORT_CODE_DIALOG,
+  getCurlCode,
+  getPythonApiCode,
+  getPythonCode,
+} from "../../constants";
+import { darkContext } from "../../contexts/darkContext";
 import { TabsContext } from "../../contexts/tabsContext";
+import { FlowType } from "../../types/flow/index";
+import { buildTweaks, classNames } from "../../utils";
 
 export default function ApiModal({ flow }: { flow: FlowType }) {
   const [open, setOpen] = useState(true);
@@ -420,7 +422,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                     ) : t.data.node.template[n]
                                                         .multiline ? (
                                                       <ShadTooltip
-                                                        delayDuration={1000}
                                                         content={buildContent(
                                                           t.data.node.template[
                                                             n
@@ -508,7 +509,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                 ) : t.data.node.template[n]
                                                     .type === "file" ? (
                                                   <ShadTooltip
-                                                    delayDuration={1000}
                                                     content={buildContent(
                                                       getValue(
                                                         t.data.node.template[n]
@@ -624,7 +624,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                 ) : t.data.node.template[n]
                                                     .type === "prompt" ? (
                                                   <ShadTooltip
-                                                    delayDuration={1000}
                                                     content={buildContent(
                                                       getValue(
                                                         t.data.node.template[n]
@@ -661,7 +660,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                 ) : t.data.node.template[n]
                                                     .type === "code" ? (
                                                   <ShadTooltip
-                                                    delayDuration={1000}
                                                     content={buildContent(
                                                       getValue(
                                                         t.data.node.template[n]
@@ -722,7 +720,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                         </div>
                       ))}
 
-                      {/* 
+                      {/*
                       <div className="flex flex-col gap-5 bg-muted">
                         <Table className="table-fixed bg-muted outline-1">
                           <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium h-10">
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index b0a0ae315..ba3fb672f 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -1,8 +1,9 @@
-import { useContext, useRef, useState, useEffect } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
-import { darkContext } from "../../contexts/darkContext";
-import { postValidatePrompt } from "../../controllers/API";
-import { alertContext } from "../../contexts/alertContext";
+import DOMPurify from "dompurify";
+import { FileText, Variable } from "lucide-react";
+import { useContext, useEffect, useRef, useState } from "react";
+import ShadTooltip from "../../components/ShadTooltipComponent";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -12,14 +13,16 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
-import { Button } from "../../components/ui/button";
 import { Textarea } from "../../components/ui/textarea";
 import {
   HIGHLIGH_CSS,
   PROMPT_DIALOG_SUBTITLE,
   TEXT_DIALOG_SUBTITLE,
 } from "../../constants";
-import { FileText } from "lucide-react";
+import { alertContext } from "../../contexts/alertContext";
+import { darkContext } from "../../contexts/darkContext";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { postValidatePrompt } from "../../controllers/API";
 import { APIClassType } from "../../types/api";
 import {
   INVALID_CHARACTERS,
@@ -29,10 +32,6 @@ import {
   regexHighlight,
   varHighlightHTML,
 } from "../../utils";
-import { Badge } from "../../components/ui/badge";
-import ShadTooltip from "../../components/ShadTooltipComponent";
-import DOMPurify from "dompurify";
-import { Variable } from "lucide-react";
 
 export default function GenericModal({
   field_name = "",
@@ -238,39 +237,38 @@ export default function GenericModal({
 
         {type == TypeModal.PROMPT && (
           <>
-          <div className="h-[60px] overflow-y-auto custom-scroll sm:6/6 mt-3 mr-28">
-            <div className="flex flex-wrap items-center">
-              <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
-              <span className="text-md font-semibold text-primary">
-                Input Variables:
-              </span>
+            <div className="sm:6/6 mr-28 mt-3 h-[60px] overflow-y-auto custom-scroll">
+              <div className="flex flex-wrap items-center">
+                <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
+                <span className="text-md font-semibold text-primary">
+                  Input Variables:
+                </span>
 
-              {wordsHighlight.map((word, index) => (
-                <ShadTooltip
-                  key={getRandomKeyByssmm() + index}
-                  content={word.replace(/[{}]/g, "")}
-                  asChild={false}
-                  delayDuration={1500}
-                >
-                  <Badge
-                    key={index}
-                    variant="gray"
-                    size="md"
-                    className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
+                {wordsHighlight.map((word, index) => (
+                  <ShadTooltip
+                    key={getRandomKeyByssmm() + index}
+                    content={word.replace(/[{}]/g, "")}
+                    asChild={false}
                   >
-                    <div className="relative bottom-[1px]">
-                      <span>
-                        {word.replace(/[{}]/g, "").length > 59
-                          ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
-                          : word.replace(/[{}]/g, "")}
-                      </span>
-                    </div>
-                  </Badge>
-                </ShadTooltip>
-              ))}
+                    <Badge
+                      key={index}
+                      variant="gray"
+                      size="md"
+                      className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
+                    >
+                      <div className="relative bottom-[1px]">
+                        <span>
+                          {word.replace(/[{}]/g, "").length > 59
+                            ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
+                            : word.replace(/[{}]/g, "")}
+                        </span>
+                      </div>
+                    </Badge>
+                  </ShadTooltip>
+                ))}
+              </div>
             </div>
-          </div>
-        </>
+          </>
         )}
 
         <DialogFooter>