diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 5c4d534e8..52b0b03f6 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -2,7 +2,14 @@ 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 { ReactNode, useContext, useEffect, useRef, useState } from "react";
+import {
+  ReactNode,
+  forwardRef,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 // import "ace-builds/webpack-resolver";
 import { Check, Clipboard, Code2 } from "lucide-react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
@@ -19,7 +26,6 @@ import IntComponent from "../../components/intComponent";
 import PromptAreaComponent from "../../components/promptComponent";
 import TextAreaComponent from "../../components/textAreaComponent";
 import ToggleShadComponent from "../../components/toggleShadComponent";
-import { DialogTitle } from "../../components/ui/dialog";
 import {
   Table,
   TableBody,
@@ -45,651 +51,673 @@ import { FlowType } from "../../types/flow/index";
 import { buildTweaks, classNames } from "../../utils";
 import BaseModal from "../baseModal";
 
-export default function ApiModal({
-  flow,
-  children,
-}: {
-  flow: FlowType;
-  children: ReactNode;
-}) {
-  const [activeTab, setActiveTab] = useState("0");
-  const [isCopied, setIsCopied] = useState<Boolean>(false);
-  const [openAccordion, setOpenAccordion] = useState([]);
-  const tweak = useRef([]);
-  const tweaksList = useRef([]);
-  const { setTweak, getTweak, tabsState } = useContext(TabsContext);
-  const copyToClipboard = () => {
-    if (!navigator.clipboard || !navigator.clipboard.writeText) {
-      return;
-    }
-
-    navigator.clipboard.writeText(tabs[activeTab].code).then(() => {
-      setIsCopied(true);
-
-      setTimeout(() => {
-        setIsCopied(false);
-      }, 2000);
-    });
-  };
-  const pythonApiCode = getPythonApiCode(flow, tweak.current, tabsState);
-  const curl_code = getCurlCode(flow, tweak.current, tabsState);
-  const pythonCode = getPythonCode(flow, tweak.current, tabsState);
-  const tweaksCode = buildTweaks(flow);
-  const tabs = [
+const ApiModal = forwardRef(
+  (
     {
-      name: "cURL",
-      mode: "bash",
-      image: "https://curl.se/logo/curl-symbol-transparent.png",
-      code: curl_code,
+      flow,
+      children,
+    }: {
+      flow: FlowType;
+      children: ReactNode;
     },
-    {
-      name: "Python API",
-      mode: "python",
-      image:
-        "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
-      code: pythonApiCode,
-    },
-    {
-      name: "Python Code",
-      mode: "python",
-      image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
-      code: pythonCode,
-    },
-  ];
-
-  useEffect(() => {
-    filterNodes();
-  }, []);
-
-  if (Object.keys(tweaksCode).length > 0) {
-    tabs.push({
-      name: "Tweaks",
-      mode: "python",
-      image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
-      code: pythonCode,
-    });
-  }
-
-  function filterNodes() {
-    let arrNodesWithValues = [];
-
-    flow["data"]["nodes"].forEach((t) => {
-      Object.keys(t["data"]["node"]["template"])
-        .filter(
-          (n) =>
-            n.charAt(0) !== "_" &&
-            t.data.node.template[n].show &&
-            (t.data.node.template[n].type === "str" ||
-              t.data.node.template[n].type === "bool" ||
-              t.data.node.template[n].type === "float" ||
-              t.data.node.template[n].type === "code" ||
-              t.data.node.template[n].type === "prompt" ||
-              t.data.node.template[n].type === "file" ||
-              t.data.node.template[n].type === "int")
-        )
-        .map((n, i) => {
-          arrNodesWithValues.push(t["id"]);
-        });
-    });
-
-    tweaksList.current = arrNodesWithValues.filter((value, index, self) => {
-      return self.indexOf(value) === index;
-    });
-  }
-
-  function buildTweakObject(tw, changes, template) {
-    if (template.type === "float") {
-      changes = parseFloat(changes);
-    }
-    if (template.type === "int") {
-      changes = parseInt(changes);
-    }
-    if (template.list === true && Array.isArray(changes)) {
-      changes = changes?.filter((x) => x !== "");
-    }
-
-    const existingTweak = tweak.current.find((element) =>
-      element.hasOwnProperty(tw)
-    );
-
-    if (existingTweak) {
-      existingTweak[tw][template["name"]] = changes;
-
-      if (existingTweak[tw][template["name"]] == template.value) {
-        tweak.current.forEach((element) => {
-          if (element[tw] && Object.keys(element[tw])?.length === 0) {
-            tweak.current = tweak.current.filter((obj) => {
-              const prop = obj[Object.keys(obj)[0]].prop;
-              return prop !== undefined && prop !== null && prop !== "";
-            });
-          }
-        });
+    ref
+  ) => {
+    const [activeTab, setActiveTab] = useState("0");
+    const [isCopied, setIsCopied] = useState<Boolean>(false);
+    const [openAccordion, setOpenAccordion] = useState([]);
+    const tweak = useRef([]);
+    const tweaksList = useRef([]);
+    const { setTweak, getTweak, tabsState } = useContext(TabsContext);
+    const copyToClipboard = () => {
+      if (!navigator.clipboard || !navigator.clipboard.writeText) {
+        return;
       }
-    } else {
-      const newTweak = {
-        [tw]: {
-          [template["name"]]: changes,
-        },
-      };
-      tweak.current.push(newTweak);
-    }
 
-    const pythonApiCode = getPythonApiCode(flow, tweak.current);
-    const curl_code = getCurlCode(flow, tweak.current);
-    const pythonCode = getPythonCode(flow, tweak.current);
+      navigator.clipboard.writeText(tabs[activeTab].code).then(() => {
+        setIsCopied(true);
 
-    tabs[0].code = curl_code;
-    tabs[1].code = pythonApiCode;
-    tabs[2].code = pythonCode;
-
-    setTweak(tweak.current);
-  }
-
-  function buildContent(value) {
-    const htmlContent = (
-      <div className="w-[200px]">
-        <span>{value != null && value != "" ? value : "None"}</span>
-      </div>
-    );
-    return htmlContent;
-  }
-
-  function getValue(value, node, template) {
-    let returnValue = value ?? "";
-
-    if (getTweak.length > 0) {
-      for (const obj of getTweak) {
-        Object.keys(obj).forEach((key) => {
-          const value = obj[key];
-          if (key == node["id"]) {
-            Object.keys(value).forEach((key) => {
-              if (key == template["name"]) {
-                returnValue = value[key];
-              }
-            });
-          }
-        });
-      }
-    } else {
-      return value ?? "";
-    }
-    return returnValue;
-  }
-
-  function openAccordions() {
-    let accordionsToOpen = [];
-    tweak.current.forEach((el) => {
-      Object.keys(el).forEach((key) => {
-        if (Object.keys(el[key]).length > 0) {
-          accordionsToOpen.push(key);
-          setOpenAccordion(accordionsToOpen);
-        }
+        setTimeout(() => {
+          setIsCopied(false);
+        }, 2000);
       });
-    });
-  }
+    };
+    const pythonApiCode = getPythonApiCode(flow, tweak.current, tabsState);
+    const curl_code = getCurlCode(flow, tweak.current, tabsState);
+    const pythonCode = getPythonCode(flow, tweak.current, tabsState);
+    const tweaksCode = buildTweaks(flow);
+    const tabs = [
+      {
+        name: "cURL",
+        mode: "bash",
+        image: "https://curl.se/logo/curl-symbol-transparent.png",
+        code: curl_code,
+      },
+      {
+        name: "Python API",
+        mode: "python",
+        image:
+          "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
+        code: pythonApiCode,
+      },
+      {
+        name: "Python Code",
+        mode: "python",
+        image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+        code: pythonCode,
+      },
+    ];
 
-  return (
-    <BaseModal>
-      <BaseModal.Trigger>{children}</BaseModal.Trigger>
-      <BaseModal.Header description={EXPORT_CODE_DIALOG}>
-        <DialogTitle className="flex items-center">
+    useEffect(() => {
+      filterNodes();
+    }, []);
+
+    if (Object.keys(tweaksCode).length > 0) {
+      tabs.push({
+        name: "Tweaks",
+        mode: "python",
+        image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+        code: pythonCode,
+      });
+    }
+
+    function filterNodes() {
+      let arrNodesWithValues = [];
+
+      flow["data"]["nodes"].forEach((t) => {
+        Object.keys(t["data"]["node"]["template"])
+          .filter(
+            (n) =>
+              n.charAt(0) !== "_" &&
+              t.data.node.template[n].show &&
+              (t.data.node.template[n].type === "str" ||
+                t.data.node.template[n].type === "bool" ||
+                t.data.node.template[n].type === "float" ||
+                t.data.node.template[n].type === "code" ||
+                t.data.node.template[n].type === "prompt" ||
+                t.data.node.template[n].type === "file" ||
+                t.data.node.template[n].type === "int")
+          )
+          .map((n, i) => {
+            arrNodesWithValues.push(t["id"]);
+          });
+      });
+
+      tweaksList.current = arrNodesWithValues.filter((value, index, self) => {
+        return self.indexOf(value) === index;
+      });
+    }
+
+    function buildTweakObject(tw, changes, template) {
+      if (template.type === "float") {
+        changes = parseFloat(changes);
+      }
+      if (template.type === "int") {
+        changes = parseInt(changes);
+      }
+      if (template.list === true && Array.isArray(changes)) {
+        changes = changes?.filter((x) => x !== "");
+      }
+
+      const existingTweak = tweak.current.find((element) =>
+        element.hasOwnProperty(tw)
+      );
+
+      if (existingTweak) {
+        existingTweak[tw][template["name"]] = changes;
+
+        if (existingTweak[tw][template["name"]] == template.value) {
+          tweak.current.forEach((element) => {
+            if (element[tw] && Object.keys(element[tw])?.length === 0) {
+              tweak.current = tweak.current.filter((obj) => {
+                const prop = obj[Object.keys(obj)[0]].prop;
+                return prop !== undefined && prop !== null && prop !== "";
+              });
+            }
+          });
+        }
+      } else {
+        const newTweak = {
+          [tw]: {
+            [template["name"]]: changes,
+          },
+        };
+        tweak.current.push(newTweak);
+      }
+
+      const pythonApiCode = getPythonApiCode(flow, tweak.current);
+      const curl_code = getCurlCode(flow, tweak.current);
+      const pythonCode = getPythonCode(flow, tweak.current);
+
+      tabs[0].code = curl_code;
+      tabs[1].code = pythonApiCode;
+      tabs[2].code = pythonCode;
+
+      setTweak(tweak.current);
+    }
+
+    function buildContent(value) {
+      const htmlContent = (
+        <div className="w-[200px]">
+          <span>{value != null && value != "" ? value : "None"}</span>
+        </div>
+      );
+      return htmlContent;
+    }
+
+    function getValue(value, node, template) {
+      let returnValue = value ?? "";
+
+      if (getTweak.length > 0) {
+        for (const obj of getTweak) {
+          Object.keys(obj).forEach((key) => {
+            const value = obj[key];
+            if (key == node["id"]) {
+              Object.keys(value).forEach((key) => {
+                if (key == template["name"]) {
+                  returnValue = value[key];
+                }
+              });
+            }
+          });
+        }
+      } else {
+        return value ?? "";
+      }
+      return returnValue;
+    }
+
+    function openAccordions() {
+      let accordionsToOpen = [];
+      tweak.current.forEach((el) => {
+        Object.keys(el).forEach((key) => {
+          if (Object.keys(el[key]).length > 0) {
+            accordionsToOpen.push(key);
+            setOpenAccordion(accordionsToOpen);
+          }
+        });
+      });
+    }
+
+    return (
+      <BaseModal>
+        <BaseModal.Trigger>{children}</BaseModal.Trigger>
+        <BaseModal.Header description={EXPORT_CODE_DIALOG}>
           <span className="pr-2">Code</span>
           <Code2
             strokeWidth={1.5}
             className="h-6 w-6 pl-1 text-primary "
             aria-hidden="true"
           />
-        </DialogTitle>
-      </BaseModal.Header>
-      <BaseModal.Content>
-        <Tabs
-          value={activeTab}
-          className="api-modal-tabs"
-          onValueChange={(value) => {
-            setActiveTab(value);
-            if (value === "3") {
-              openAccordions();
-            }
-          }}
-        >
-          <div className="api-modal-tablist-div">
-            <TabsList>
-              {tabs.map((tab, index) => (
-                <TabsTrigger key={index} value={index.toString()}>
-                  {tab.name}
-                </TabsTrigger>
-              ))}
-            </TabsList>
-            {Number(activeTab) < 3 && (
-              <div className="float-right">
-                <button
-                  className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
-                  onClick={copyToClipboard}
-                >
-                  {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
-                  {isCopied ? "Copied!" : "Copy code"}
-                </button>
-              </div>
-            )}
-          </div>
+        </BaseModal.Header>
+        <BaseModal.Content>
+          <Tabs
+            value={activeTab}
+            className="api-modal-tabs"
+            onValueChange={(value) => {
+              setActiveTab(value);
+              if (value === "3") {
+                openAccordions();
+              }
+            }}
+          >
+            <div className="api-modal-tablist-div">
+              <TabsList>
+                {tabs.map((tab, index) => (
+                  <TabsTrigger key={index} value={index.toString()}>
+                    {tab.name}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+              {Number(activeTab) < 3 && (
+                <div className="float-right">
+                  <button
+                    className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
+                    onClick={copyToClipboard}
+                  >
+                    {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
+                    {isCopied ? "Copied!" : "Copy code"}
+                  </button>
+                </div>
+              )}
+            </div>
 
-          {tabs.map((tab, index) => (
-            <TabsContent
-              value={index.toString()}
-              className="api-modal-tabs-content"
-              key={index} // Remember to add a unique key prop
-            >
-              {index < 3 ? (
-                <SyntaxHighlighter
-                  className="h-[70vh] w-full overflow-auto custom-scroll"
-                  language={tab.mode}
-                  style={oneDark}
-                >
-                  {tab.code}
-                </SyntaxHighlighter>
-              ) : index === 3 ? (
-                <>
-                  <div className="api-modal-according-display">
-                    <div
-                      className={classNames(
-                        "h-[70vh] w-full rounded-lg bg-muted",
-                        1 == 1
-                          ? "overflow-scroll overflow-x-hidden custom-scroll"
-                          : "overflow-hidden"
-                      )}
-                    >
-                      {flow["data"]["nodes"].map((t: any, index) => (
-                        <div className="px-3" key={index}>
-                          {tweaksList.current.includes(t["data"]["id"]) && (
-                            <AccordionComponent
-                              trigger={t["data"]["id"]}
-                              open={openAccordion}
-                            >
-                              <div className="api-modal-table-arrangement">
-                                <Table className="table-fixed bg-muted outline-1">
-                                  <TableHeader className="h-10 border-input text-xs font-medium text-ring">
-                                    <TableRow className="dark:border-b-muted">
-                                      <TableHead className="h-7 text-center">
-                                        PARAM
-                                      </TableHead>
-                                      <TableHead className="h-7 p-0 text-center">
-                                        VALUE
-                                      </TableHead>
-                                    </TableRow>
-                                  </TableHeader>
-                                  <TableBody className="p-0">
-                                    {Object.keys(t["data"]["node"]["template"])
-                                      .filter(
-                                        (n) =>
-                                          n.charAt(0) !== "_" &&
-                                          t.data.node.template[n].show &&
-                                          (t.data.node.template[n].type ===
-                                            "str" ||
-                                            t.data.node.template[n].type ===
-                                              "bool" ||
-                                            t.data.node.template[n].type ===
-                                              "float" ||
-                                            t.data.node.template[n].type ===
-                                              "code" ||
-                                            t.data.node.template[n].type ===
-                                              "prompt" ||
-                                            t.data.node.template[n].type ===
-                                              "file" ||
-                                            t.data.node.template[n].type ===
-                                              "int")
+            {tabs.map((tab, index) => (
+              <TabsContent
+                value={index.toString()}
+                className="api-modal-tabs-content"
+                key={index} // Remember to add a unique key prop
+              >
+                {index < 3 ? (
+                  <SyntaxHighlighter
+                    className="h-[70vh] w-full overflow-auto custom-scroll"
+                    language={tab.mode}
+                    style={oneDark}
+                  >
+                    {tab.code}
+                  </SyntaxHighlighter>
+                ) : index === 3 ? (
+                  <>
+                    <div className="api-modal-according-display">
+                      <div
+                        className={classNames(
+                          "h-[70vh] w-full rounded-lg bg-muted",
+                          1 == 1
+                            ? "overflow-scroll overflow-x-hidden custom-scroll"
+                            : "overflow-hidden"
+                        )}
+                      >
+                        {flow["data"]["nodes"].map((t: any, index) => (
+                          <div className="px-3" key={index}>
+                            {tweaksList.current.includes(t["data"]["id"]) && (
+                              <AccordionComponent
+                                trigger={t["data"]["id"]}
+                                open={openAccordion}
+                              >
+                                <div className="api-modal-table-arrangement">
+                                  <Table className="table-fixed bg-muted outline-1">
+                                    <TableHeader className="h-10 border-input text-xs font-medium text-ring">
+                                      <TableRow className="dark:border-b-muted">
+                                        <TableHead className="h-7 text-center">
+                                          PARAM
+                                        </TableHead>
+                                        <TableHead className="h-7 p-0 text-center">
+                                          VALUE
+                                        </TableHead>
+                                      </TableRow>
+                                    </TableHeader>
+                                    <TableBody className="p-0">
+                                      {Object.keys(
+                                        t["data"]["node"]["template"]
                                       )
-                                      .map((n, i) => {
-                                        //console.log(t.data.node.template[n]);
+                                        .filter(
+                                          (n) =>
+                                            n.charAt(0) !== "_" &&
+                                            t.data.node.template[n].show &&
+                                            (t.data.node.template[n].type ===
+                                              "str" ||
+                                              t.data.node.template[n].type ===
+                                                "bool" ||
+                                              t.data.node.template[n].type ===
+                                                "float" ||
+                                              t.data.node.template[n].type ===
+                                                "code" ||
+                                              t.data.node.template[n].type ===
+                                                "prompt" ||
+                                              t.data.node.template[n].type ===
+                                                "file" ||
+                                              t.data.node.template[n].type ===
+                                                "int")
+                                        )
+                                        .map((n, i) => {
+                                          //console.log(t.data.node.template[n]);
 
-                                        return (
-                                          <TableRow
-                                            key={i}
-                                            className="h-10 dark:border-b-muted"
-                                          >
-                                            <TableCell className="p-0 text-center text-sm text-foreground">
-                                              {n}
-                                            </TableCell>
-                                            <TableCell className="p-0 text-xs text-foreground">
-                                              <div className="m-auto w-[250px]">
-                                                {t.data.node.template[n]
-                                                  .type === "str" &&
-                                                !t.data.node.template[n]
-                                                  .options ? (
-                                                  <div className="mx-auto">
-                                                    {t.data.node.template[n]
-                                                      .list ? (
-                                                      <InputListComponent
-                                                        editNode={true}
-                                                        disabled={false}
-                                                        value={
-                                                          !t.data.node.template[
-                                                            n
-                                                          ].value ||
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value === ""
-                                                            ? [""]
-                                                            : t.data.node
-                                                                .template[n]
-                                                                .value
-                                                        }
-                                                        onChange={(k) => {}}
-                                                        onAddInput={(k) => {
-                                                          buildTweakObject(
-                                                            t["data"]["id"],
-                                                            k,
+                                          return (
+                                            <TableRow
+                                              key={i}
+                                              className="h-10 dark:border-b-muted"
+                                            >
+                                              <TableCell className="p-0 text-center text-sm text-foreground">
+                                                {n}
+                                              </TableCell>
+                                              <TableCell className="p-0 text-xs text-foreground">
+                                                <div className="m-auto w-[250px]">
+                                                  {t.data.node.template[n]
+                                                    .type === "str" &&
+                                                  !t.data.node.template[n]
+                                                    .options ? (
+                                                    <div className="mx-auto">
+                                                      {t.data.node.template[n]
+                                                        .list ? (
+                                                        <InputListComponent
+                                                          editNode={true}
+                                                          disabled={false}
+                                                          value={
+                                                            !t.data.node
+                                                              .template[n]
+                                                              .value ||
                                                             t.data.node
                                                               .template[n]
-                                                          );
-                                                        }}
-                                                      />
-                                                    ) : t.data.node.template[n]
-                                                        .multiline ? (
-                                                      <ShadTooltip
-                                                        content={buildContent(
+                                                              .value === ""
+                                                              ? [""]
+                                                              : t.data.node
+                                                                  .template[n]
+                                                                  .value
+                                                          }
+                                                          onChange={(k) => {}}
+                                                          onAddInput={(k) => {
+                                                            buildTweakObject(
+                                                              t["data"]["id"],
+                                                              k,
+                                                              t.data.node
+                                                                .template[n]
+                                                            );
+                                                          }}
+                                                        />
+                                                      ) : t.data.node.template[
+                                                          n
+                                                        ].multiline ? (
+                                                        <ShadTooltip
+                                                          content={buildContent(
+                                                            t.data.node
+                                                              .template[n].value
+                                                          )}
+                                                        >
+                                                          <div>
+                                                            <TextAreaComponent
+                                                              disabled={false}
+                                                              editNode={true}
+                                                              value={getValue(
+                                                                t.data.node
+                                                                  .template[n]
+                                                                  .value,
+                                                                t.data,
+                                                                t.data.node
+                                                                  .template[n]
+                                                              )}
+                                                              onChange={(k) => {
+                                                                buildTweakObject(
+                                                                  t["data"][
+                                                                    "id"
+                                                                  ],
+                                                                  k,
+                                                                  t.data.node
+                                                                    .template[n]
+                                                                );
+                                                              }}
+                                                            />
+                                                          </div>
+                                                        </ShadTooltip>
+                                                      ) : (
+                                                        <InputComponent
+                                                          editNode={true}
+                                                          disabled={false}
+                                                          password={
+                                                            t.data.node
+                                                              .template[n]
+                                                              .password ?? false
+                                                          }
+                                                          value={getValue(
+                                                            t.data.node
+                                                              .template[n]
+                                                              .value,
+                                                            t.data,
+                                                            t.data.node
+                                                              .template[n]
+                                                          )}
+                                                          onChange={(k) => {
+                                                            buildTweakObject(
+                                                              t["data"]["id"],
+                                                              k,
+                                                              t.data.node
+                                                                .template[n]
+                                                            );
+                                                          }}
+                                                        />
+                                                      )}
+                                                    </div>
+                                                  ) : t.data.node.template[n]
+                                                      .type === "bool" ? (
+                                                    <div className="ml-auto">
+                                                      {" "}
+                                                      <ToggleShadComponent
+                                                        enabled={
                                                           t.data.node.template[
                                                             n
                                                           ].value
+                                                        }
+                                                        setEnabled={(e) => {
+                                                          t.data.node.template[
+                                                            n
+                                                          ].value = e;
+                                                          buildTweakObject(
+                                                            t["data"]["id"],
+                                                            e,
+                                                            t.data.node
+                                                              .template[n]
+                                                          );
+                                                        }}
+                                                        size="small"
+                                                        disabled={false}
+                                                      />
+                                                    </div>
+                                                  ) : t.data.node.template[n]
+                                                      .type === "file" ? (
+                                                    <ShadTooltip
+                                                      content={buildContent(
+                                                        getValue(
+                                                          t.data.node.template[
+                                                            n
+                                                          ].value,
+                                                          t.data,
+                                                          t.data.node.template[
+                                                            n
+                                                          ]
+                                                        )
+                                                      )}
+                                                    >
+                                                      <div className="mx-auto">
+                                                        <InputFileComponent
+                                                          editNode={true}
+                                                          disabled={false}
+                                                          value={
+                                                            t.data.node
+                                                              .template[n]
+                                                              .value ?? ""
+                                                          }
+                                                          onChange={(
+                                                            k: any
+                                                          ) => {}}
+                                                          fileTypes={
+                                                            t.data.node
+                                                              .template[n]
+                                                              .fileTypes
+                                                          }
+                                                          suffixes={
+                                                            t.data.node
+                                                              .template[n]
+                                                              .suffixes
+                                                          }
+                                                          onFileChange={(
+                                                            k: any
+                                                          ) => {}}
+                                                        ></InputFileComponent>
+                                                      </div>
+                                                    </ShadTooltip>
+                                                  ) : t.data.node.template[n]
+                                                      .type === "float" ? (
+                                                    <div className="mx-auto">
+                                                      <FloatComponent
+                                                        disabled={false}
+                                                        editNode={true}
+                                                        value={getValue(
+                                                          t.data.node.template[
+                                                            n
+                                                          ].value,
+                                                          t.data,
+                                                          t.data.node.template[
+                                                            n
+                                                          ]
                                                         )}
-                                                      >
-                                                        <div>
-                                                          <TextAreaComponent
-                                                            disabled={false}
-                                                            editNode={true}
-                                                            value={getValue(
+                                                        onChange={(k) => {
+                                                          buildTweakObject(
+                                                            t["data"]["id"],
+                                                            k,
+                                                            t.data.node
+                                                              .template[n]
+                                                          );
+                                                        }}
+                                                      />
+                                                    </div>
+                                                  ) : t.data.node.template[n]
+                                                      .type === "str" &&
+                                                    t.data.node.template[n]
+                                                      .options ? (
+                                                    <div className="mx-auto">
+                                                      <Dropdown
+                                                        editNode={true}
+                                                        apiModal={true}
+                                                        options={
+                                                          t.data.node.template[
+                                                            n
+                                                          ].options
+                                                        }
+                                                        onSelect={(k) => {
+                                                          buildTweakObject(
+                                                            t["data"]["id"],
+                                                            k,
+                                                            t.data.node
+                                                              .template[n]
+                                                          );
+                                                        }}
+                                                        value={getValue(
+                                                          t.data.node.template[
+                                                            n
+                                                          ].value,
+                                                          t.data,
+                                                          t.data.node.template[
+                                                            n
+                                                          ]
+                                                        )}
+                                                      ></Dropdown>
+                                                    </div>
+                                                  ) : t.data.node.template[n]
+                                                      .type === "int" ? (
+                                                    <div className="mx-auto">
+                                                      <IntComponent
+                                                        disabled={false}
+                                                        editNode={true}
+                                                        value={getValue(
+                                                          t.data.node.template[
+                                                            n
+                                                          ].value,
+                                                          t.data,
+                                                          t.data.node.template[
+                                                            n
+                                                          ]
+                                                        )}
+                                                        onChange={(k) => {
+                                                          buildTweakObject(
+                                                            t["data"]["id"],
+                                                            k,
+                                                            t.data.node
+                                                              .template[n]
+                                                          );
+                                                        }}
+                                                      />
+                                                    </div>
+                                                  ) : t.data.node.template[n]
+                                                      .type === "prompt" ? (
+                                                    <ShadTooltip
+                                                      content={buildContent(
+                                                        getValue(
+                                                          t.data.node.template[
+                                                            n
+                                                          ].value,
+                                                          t.data,
+                                                          t.data.node.template[
+                                                            n
+                                                          ]
+                                                        )
+                                                      )}
+                                                    >
+                                                      <div className="mx-auto">
+                                                        <PromptAreaComponent
+                                                          editNode={true}
+                                                          disabled={false}
+                                                          value={getValue(
+                                                            t.data.node
+                                                              .template[n]
+                                                              .value,
+                                                            t.data,
+                                                            t.data.node
+                                                              .template[n]
+                                                          )}
+                                                          onChange={(k) => {
+                                                            buildTweakObject(
+                                                              t["data"]["id"],
+                                                              k,
                                                               t.data.node
                                                                 .template[n]
-                                                                .value,
-                                                              t.data,
+                                                            );
+                                                          }}
+                                                        />
+                                                      </div>
+                                                    </ShadTooltip>
+                                                  ) : t.data.node.template[n]
+                                                      .type === "code" ? (
+                                                    <ShadTooltip
+                                                      content={buildContent(
+                                                        getValue(
+                                                          t.data.node.template[
+                                                            n
+                                                          ].value,
+                                                          t.data,
+                                                          t.data.node.template[
+                                                            n
+                                                          ]
+                                                        )
+                                                      )}
+                                                    >
+                                                      <div className="mx-auto">
+                                                        <CodeAreaComponent
+                                                          disabled={false}
+                                                          editNode={true}
+                                                          value={getValue(
+                                                            t.data.node
+                                                              .template[n]
+                                                              .value,
+                                                            t.data,
+                                                            t.data.node
+                                                              .template[n]
+                                                          )}
+                                                          onChange={(k) => {
+                                                            buildTweakObject(
+                                                              t["data"]["id"],
+                                                              k,
                                                               t.data.node
                                                                 .template[n]
-                                                            )}
-                                                            onChange={(k) => {
-                                                              buildTweakObject(
-                                                                t["data"]["id"],
-                                                                k,
-                                                                t.data.node
-                                                                  .template[n]
-                                                              );
-                                                            }}
-                                                          />
-                                                        </div>
-                                                      </ShadTooltip>
-                                                    ) : (
-                                                      <InputComponent
-                                                        editNode={true}
-                                                        disabled={false}
-                                                        password={
-                                                          t.data.node.template[
-                                                            n
-                                                          ].password ?? false
-                                                        }
-                                                        value={getValue(
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value,
-                                                          t.data,
-                                                          t.data.node.template[
-                                                            n
-                                                          ]
-                                                        )}
-                                                        onChange={(k) => {
-                                                          buildTweakObject(
-                                                            t["data"]["id"],
-                                                            k,
-                                                            t.data.node
-                                                              .template[n]
-                                                          );
-                                                        }}
-                                                      />
-                                                    )}
-                                                  </div>
-                                                ) : t.data.node.template[n]
-                                                    .type === "bool" ? (
-                                                  <div className="ml-auto">
-                                                    {" "}
-                                                    <ToggleShadComponent
-                                                      enabled={
-                                                        t.data.node.template[n]
-                                                          .value
-                                                      }
-                                                      setEnabled={(e) => {
-                                                        t.data.node.template[
-                                                          n
-                                                        ].value = e;
-                                                        buildTweakObject(
-                                                          t["data"]["id"],
-                                                          e,
-                                                          t.data.node.template[
-                                                            n
-                                                          ]
-                                                        );
-                                                      }}
-                                                      size="small"
-                                                      disabled={false}
-                                                    />
-                                                  </div>
-                                                ) : t.data.node.template[n]
-                                                    .type === "file" ? (
-                                                  <ShadTooltip
-                                                    content={buildContent(
-                                                      getValue(
-                                                        t.data.node.template[n]
-                                                          .value,
-                                                        t.data,
-                                                        t.data.node.template[n]
-                                                      )
-                                                    )}
-                                                  >
-                                                    <div className="mx-auto">
-                                                      <InputFileComponent
-                                                        editNode={true}
-                                                        disabled={false}
-                                                        value={
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value ?? ""
-                                                        }
-                                                        onChange={(
-                                                          k: any
-                                                        ) => {}}
-                                                        fileTypes={
-                                                          t.data.node.template[
-                                                            n
-                                                          ].fileTypes
-                                                        }
-                                                        suffixes={
-                                                          t.data.node.template[
-                                                            n
-                                                          ].suffixes
-                                                        }
-                                                        onFileChange={(
-                                                          k: any
-                                                        ) => {}}
-                                                      ></InputFileComponent>
-                                                    </div>
-                                                  </ShadTooltip>
-                                                ) : t.data.node.template[n]
-                                                    .type === "float" ? (
-                                                  <div className="mx-auto">
-                                                    <FloatComponent
-                                                      disabled={false}
-                                                      editNode={true}
-                                                      value={getValue(
-                                                        t.data.node.template[n]
-                                                          .value,
-                                                        t.data,
-                                                        t.data.node.template[n]
-                                                      )}
-                                                      onChange={(k) => {
-                                                        buildTweakObject(
-                                                          t["data"]["id"],
-                                                          k,
-                                                          t.data.node.template[
-                                                            n
-                                                          ]
-                                                        );
-                                                      }}
-                                                    />
-                                                  </div>
-                                                ) : t.data.node.template[n]
-                                                    .type === "str" &&
-                                                  t.data.node.template[n]
-                                                    .options ? (
-                                                  <div className="mx-auto">
-                                                    <Dropdown
-                                                      editNode={true}
-                                                      apiModal={true}
-                                                      options={
-                                                        t.data.node.template[n]
-                                                          .options
-                                                      }
-                                                      onSelect={(k) => {
-                                                        buildTweakObject(
-                                                          t["data"]["id"],
-                                                          k,
-                                                          t.data.node.template[
-                                                            n
-                                                          ]
-                                                        );
-                                                      }}
-                                                      value={getValue(
-                                                        t.data.node.template[n]
-                                                          .value,
-                                                        t.data,
-                                                        t.data.node.template[n]
-                                                      )}
-                                                    ></Dropdown>
-                                                  </div>
-                                                ) : t.data.node.template[n]
-                                                    .type === "int" ? (
-                                                  <div className="mx-auto">
-                                                    <IntComponent
-                                                      disabled={false}
-                                                      editNode={true}
-                                                      value={getValue(
-                                                        t.data.node.template[n]
-                                                          .value,
-                                                        t.data,
-                                                        t.data.node.template[n]
-                                                      )}
-                                                      onChange={(k) => {
-                                                        buildTweakObject(
-                                                          t["data"]["id"],
-                                                          k,
-                                                          t.data.node.template[
-                                                            n
-                                                          ]
-                                                        );
-                                                      }}
-                                                    />
-                                                  </div>
-                                                ) : t.data.node.template[n]
-                                                    .type === "prompt" ? (
-                                                  <ShadTooltip
-                                                    content={buildContent(
-                                                      getValue(
-                                                        t.data.node.template[n]
-                                                          .value,
-                                                        t.data,
-                                                        t.data.node.template[n]
-                                                      )
-                                                    )}
-                                                  >
-                                                    <div className="mx-auto">
-                                                      <PromptAreaComponent
-                                                        editNode={true}
-                                                        disabled={false}
-                                                        value={getValue(
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value,
-                                                          t.data,
-                                                          t.data.node.template[
-                                                            n
-                                                          ]
-                                                        )}
-                                                        onChange={(k) => {
-                                                          buildTweakObject(
-                                                            t["data"]["id"],
-                                                            k,
-                                                            t.data.node
-                                                              .template[n]
-                                                          );
-                                                        }}
-                                                      />
-                                                    </div>
-                                                  </ShadTooltip>
-                                                ) : t.data.node.template[n]
-                                                    .type === "code" ? (
-                                                  <ShadTooltip
-                                                    content={buildContent(
-                                                      getValue(
-                                                        t.data.node.template[n]
-                                                          .value,
-                                                        t.data,
-                                                        t.data.node.template[n]
-                                                      )
-                                                    )}
-                                                  >
-                                                    <div className="mx-auto">
-                                                      <CodeAreaComponent
-                                                        disabled={false}
-                                                        editNode={true}
-                                                        value={getValue(
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value,
-                                                          t.data,
-                                                          t.data.node.template[
-                                                            n
-                                                          ]
-                                                        )}
-                                                        onChange={(k) => {
-                                                          buildTweakObject(
-                                                            t["data"]["id"],
-                                                            k,
-                                                            t.data.node
-                                                              .template[n]
-                                                          );
-                                                        }}
-                                                      />
-                                                    </div>
-                                                  </ShadTooltip>
-                                                ) : t.data.node.template[n]
-                                                    .type === "Any" ? (
-                                                  "-"
-                                                ) : (
-                                                  <div className="hidden"></div>
-                                                )}
-                                              </div>
-                                            </TableCell>
-                                          </TableRow>
-                                        );
-                                      })}
-                                  </TableBody>
-                                </Table>
-                              </div>
-                            </AccordionComponent>
-                          )}
+                                                            );
+                                                          }}
+                                                        />
+                                                      </div>
+                                                    </ShadTooltip>
+                                                  ) : t.data.node.template[n]
+                                                      .type === "Any" ? (
+                                                    "-"
+                                                  ) : (
+                                                    <div className="hidden"></div>
+                                                  )}
+                                                </div>
+                                              </TableCell>
+                                            </TableRow>
+                                          );
+                                        })}
+                                    </TableBody>
+                                  </Table>
+                                </div>
+                              </AccordionComponent>
+                            )}
 
-                          {tweaksList.current.length === 0 && (
-                            <>
-                              <div className="pt-3">
-                                No tweaks are available for this flow.
-                              </div>
-                            </>
-                          )}
-                        </div>
-                      ))}
+                            {tweaksList.current.length === 0 && (
+                              <>
+                                <div className="pt-3">
+                                  No tweaks are available for this flow.
+                                </div>
+                              </>
+                            )}
+                          </div>
+                        ))}
+                      </div>
                     </div>
-                  </div>
-                </>
-              ) : null}
-            </TabsContent>
-          ))}
-        </Tabs>
-      </BaseModal.Content>
-    </BaseModal>
-  );
-}
+                  </>
+                ) : null}
+              </TabsContent>
+            ))}
+          </Tabs>
+        </BaseModal.Content>
+      </BaseModal>
+    );
+  }
+);
+
+export default ApiModal;
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 0e5ab9efc..52e0e3a2c 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -12,7 +12,6 @@ import TextAreaComponent from "../../components/textAreaComponent";
 import ToggleShadComponent from "../../components/toggleShadComponent";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
-import { DialogTitle } from "../../components/ui/dialog";
 import {
   Table,
   TableBody,
@@ -93,10 +92,8 @@ export default function EditNodeModal({
     <BaseModal size="large-h-full" open={modalOpen} setOpen={setModalOpen}>
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       <BaseModal.Header description={data.node?.description}>
-        <DialogTitle className="flex items-center">
-          <span className="pr-2">{data.type}</span>
-          <Badge variant="secondary">ID: {data.id}</Badge>
-        </DialogTitle>
+        <span className="pr-2">{data.type}</span>
+        <Badge variant="secondary">ID: {data.id}</Badge>
       </BaseModal.Header>
       <BaseModal.Content>
         <div className="flex pb-2">
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 44208ebd4..f8af1cc6f 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -1,4 +1,3 @@
-import { DialogTitle } from "@radix-ui/react-dialog";
 import "ace-builds/src-noconflict/ace";
 import "ace-builds/src-noconflict/ext-language_tools";
 import "ace-builds/src-noconflict/mode-python";
@@ -77,14 +76,12 @@ export default function CodeAreaModal({
     <BaseModal open={open} setOpen={setOpen}>
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       <BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>
-        <DialogTitle className="flex items-center">
-          <span className="pr-2">Edit Code</span>
-          <TerminalSquare
-            strokeWidth={1.5}
-            className="h-6 w-6 pl-1 text-primary "
-            aria-hidden="true"
-          />
-        </DialogTitle>
+        <span className="pr-2">Edit Code</span>
+        <TerminalSquare
+          strokeWidth={1.5}
+          className="h-6 w-6 pl-1 text-primary "
+          aria-hidden="true"
+        />
       </BaseModal.Header>
       <BaseModal.Content>
         <div className="flex h-full w-full flex-col transition-all">
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 2355082cf..0a709d3fa 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -3,7 +3,6 @@ import { ReactNode, forwardRef, useContext, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
-import { DialogTitle } from "../../components/ui/dialog";
 import { EXPORT_DIALOG_SUBTITLE } from "../../constants";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
@@ -23,14 +22,12 @@ const ExportModal = forwardRef((props: { children: ReactNode }, ref) => {
     <BaseModal size="smaller">
       <BaseModal.Trigger>{props.children}</BaseModal.Trigger>
       <BaseModal.Header description={EXPORT_DIALOG_SUBTITLE}>
-        <DialogTitle className="flex items-center">
-          <span className="pr-2">Export</span>
-          <Download
-            strokeWidth={1.5}
-            className="h-6 w-6 pl-1 text-primary "
-            aria-hidden="true"
-          />
-        </DialogTitle>
+        <span className="pr-2">Export</span>
+        <Download
+          strokeWidth={1.5}
+          className="h-6 w-6 pl-1 text-primary "
+          aria-hidden="true"
+        />
       </BaseModal.Header>
       <BaseModal.Content>
         <EditFlowSettings
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index ebcfded5b..7a0e89231 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -4,7 +4,6 @@ import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
-import { DialogTitle } from "../../components/ui/dialog";
 import { Textarea } from "../../components/ui/textarea";
 import {
   MAX_WORDS_HIGHLIGHT,
@@ -180,14 +179,12 @@ export default function GenericModal({
           }
         })()}
       >
-        <DialogTitle className="flex items-center">
-          <span className="pr-2">{myModalTitle}</span>
-          <FileText
-            strokeWidth={1.5}
-            className="h-6 w-6 pl-1 text-primary "
-            aria-hidden="true"
-          />
-        </DialogTitle>
+        <span className="pr-2">{myModalTitle}</span>
+        <FileText
+          strokeWidth={1.5}
+          className="h-6 w-6 pl-1 text-primary "
+          aria-hidden="true"
+        />
       </BaseModal.Header>
       <BaseModal.Content>
         <div className="flex h-full flex-col">
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index eeb39badc..a561c46b3 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -75,23 +75,23 @@ export default function ExtraSidebar() {
 
         <ShadTooltip content="Export" side="top">
           <ExportModal>
-            <button className={classNames("extra-side-bar-buttons")}>
+            <div className={classNames("extra-side-bar-buttons")}>
               <FileDown
                 strokeWidth={1.5}
                 className="side-bar-button-size"
               ></FileDown>
-            </button>
+            </div>
           </ExportModal>
         </ShadTooltip>
         <ShadTooltip content="Code" side="top">
           {flow && flow.data && (
             <ApiModal flow={flow}>
-              <button className={classNames("extra-side-bar-buttons")}>
+              <div className={classNames("extra-side-bar-buttons")}>
                 <Code2
                   strokeWidth={1.5}
                   className="side-bar-button-size"
                 ></Code2>
-              </button>
+              </div>
             </ApiModal>
           )}
         </ShadTooltip>
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 83c204c03..a86cf1eb0 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -96,7 +96,7 @@ const NodeToolbarComponent = (props) => {
 
           <ShadTooltip content="Edit" side="top">
             <EditNodeModal data={props.data}>
-              <button
+              <div
                 className={classNames(
                   "relative -ml-px inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset  ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
                     (nodeLength == 0
@@ -105,7 +105,7 @@ const NodeToolbarComponent = (props) => {
                 )}
               >
                 <Settings2 className="h-4 w-4 "></Settings2>
-              </button>
+              </div>
             </EditNodeModal>
           </ShadTooltip>
         </span>