diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index d3f787e11..493f05f0e 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -20,14 +20,7 @@ import IntComponent from "../../components/intComponent";
 import PromptAreaComponent from "../../components/promptComponent";
 import TextAreaComponent from "../../components/textAreaComponent";
 import ToggleShadComponent from "../../components/toggleShadComponent";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../../components/ui/dialog";
+import { DialogTitle } from "../../components/ui/dialog";
 import {
   Table,
   TableBody,
@@ -54,7 +47,13 @@ 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 }) {
+export default function ApiModal({
+  flow,
+  children,
+}: {
+  flow: FlowType;
+  children: ReactNode;
+}) {
   const [open, setOpen] = useState(true);
   const { dark } = useContext(darkContext);
   const { closePopUp, closeEdit, setCloseEdit } = useContext(PopUpContext);
@@ -266,25 +265,20 @@ export default function ApiModal({ flow, children }: { flow: FlowType; children:
   }
 
   return (
-
     <BaseModal>
-    <BaseModal.Trigger>
-      {children}
-    </BaseModal.Trigger>
-  <BaseModal.Header description={EXPORT_CODE_DIALOG}>
-
-    <DialogTitle className="flex items-center">
-      <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
+      <BaseModal.Trigger>{children}</BaseModal.Trigger>
+      <BaseModal.Header description={EXPORT_CODE_DIALOG}>
+        <DialogTitle className="flex items-center">
+          <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) => {
@@ -732,10 +726,7 @@ export default function ApiModal({ flow, children }: { flow: FlowType; children:
             </TabsContent>
           ))}
         </Tabs>
-  </BaseModal.Content>
-
-
-</BaseModal>
-
+      </BaseModal.Content>
+    </BaseModal>
   );
 }
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 977952d5d..0e5ab9efc 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -28,7 +28,13 @@ import { NodeDataType } from "../../types/flow";
 import { classNames, limitScrollFieldsModal } from "../../utils";
 import BaseModal from "../baseModal";
 
-export default function EditNodeModal({ data, children }: { data: NodeDataType; children: ReactNode }) {
+export default function EditNodeModal({
+  data,
+  children,
+}: {
+  data: NodeDataType;
+  children: ReactNode;
+}) {
   const [modalOpen, setModalOpen] = useState(false);
 
   const [nodeLength, setNodeLength] = useState(
@@ -59,7 +65,6 @@ export default function EditNodeModal({ data, children }: { data: NodeDataType;
     closePopUp();
   }
 
-
   function changeAdvanced(node) {
     Object.keys(data.node.template).map((n, i) => {
       if (n === node.name) {
@@ -84,12 +89,9 @@ export default function EditNodeModal({ data, children }: { data: NodeDataType;
     });
   };
 
-  
   return (
     <BaseModal size="large-h-full" open={modalOpen} setOpen={setModalOpen}>
-      <BaseModal.Trigger>
-        {children}
-      </BaseModal.Trigger>
+      <BaseModal.Trigger>{children}</BaseModal.Trigger>
       <BaseModal.Header description={data.node?.description}>
         <DialogTitle className="flex items-center">
           <span className="pr-2">{data.type}</span>
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 4baf0c785..b2a07f2de 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -1,17 +1,16 @@
 import { Download } from "lucide-react";
-import { ReactNode, useContext, useRef, useState } from "react";
+import { ReactNode, 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 { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { removeApiKeys } from "../../utils";
 import BaseModal from "../baseModal";
 
-export default function ExportModal({children} : {children: ReactNode}) {
+export default function ExportModal({ children }: { children: ReactNode }) {
   const { closePopUp } = useContext(PopUpContext);
   const { flows, tabId, updateFlow, downloadFlow, saveFlow } =
     useContext(TabsContext);
@@ -22,11 +21,8 @@ export default function ExportModal({children} : {children: ReactNode}) {
   );
   return (
     <BaseModal size="smaller">
-        <BaseModal.Trigger>
-          {children}
-        </BaseModal.Trigger>
+      <BaseModal.Trigger>{children}</BaseModal.Trigger>
       <BaseModal.Header description={EXPORT_DIALOG_SUBTITLE}>
-
         <DialogTitle className="flex items-center">
           <span className="pr-2">Export</span>
           <Download
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index f2f5acbfe..3bb948c06 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -76,28 +76,21 @@ export default function ExtraSidebar() {
         </ShadTooltip>
 
         <ShadTooltip content="Export" side="top">
-        <ExportModal>
-        <button
-            className={classNames("extra-side-bar-buttons")}
-          >
-            <FileDown
-              strokeWidth={1.5}
-              className="side-bar-button-size"
-            ></FileDown>
-          </button>
-
-        </ExportModal>
-
+          <ExportModal>
+            <button className={classNames("extra-side-bar-buttons")}>
+              <FileDown
+                strokeWidth={1.5}
+                className="side-bar-button-size"
+              ></FileDown>
+            </button>
+          </ExportModal>
         </ShadTooltip>
         <ShadTooltip content="Code" side="top">
-        <ApiModal flow={flows.find((f) => f.id === tabId)}>
-        <button
-            className={classNames("extra-side-bar-buttons")}
-          >
-            <Code2 strokeWidth={1.5} className="side-bar-button-size"></Code2>
-          </button>
-        </ApiModal>
-
+          <ApiModal flow={flows.find((f) => f.id === tabId)}>
+            <button className={classNames("extra-side-bar-buttons")}>
+              <Code2 strokeWidth={1.5} className="side-bar-button-size"></Code2>
+            </button>
+          </ApiModal>
         </ShadTooltip>
 
         <ShadTooltip content="Save" side="top">
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index daf1d46fc..267cdcdea 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -95,21 +95,18 @@ const NodeToolbarComponent = (props) => {
           </ShadTooltip>
 
           <ShadTooltip content="Edit" side="top">
-          <EditNodeModal data={props.data} >
-
-          <button
-              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
-                    ? " text-muted-foreground"
-                    : " text-foreground")
-              )}
-            >
-              <Settings2 className="h-4 w-4 "></Settings2>
-            </button>
-            
-          </EditNodeModal>
-
+            <EditNodeModal data={props.data}>
+              <button
+                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
+                      ? " text-muted-foreground"
+                      : " text-foreground")
+                )}
+              >
+                <Settings2 className="h-4 w-4 "></Settings2>
+              </button>
+            </EditNodeModal>
           </ShadTooltip>
 
           {/*