diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index b9a32eca6..7ba38918b 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -39,9 +39,10 @@ export default function CodeAreaComponent({
             );
           }}
           className={
-            editNode ? "h-7 truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" :
-            "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
-            (disabled ? " bg-gray-200" : "")
+            editNode
+              ? "h-7 truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+              : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+                (disabled ? " bg-gray-200" : "")
           }
         >
           {myValue !== "" ? myValue : "Text empty"}
@@ -59,10 +60,9 @@ export default function CodeAreaComponent({
             );
           }}
         >
-          {
-            !editNode && 
-          <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
-          }
+          {!editNode && (
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
+          )}
         </button>
       </div>
     </div>
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 423198045..48c41d118 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -8,12 +8,12 @@ export default function Dropdown({
   value,
   options,
   onSelect,
-  editNode = false
+  editNode = false,
 }: DropDownComponentType) {
   let [internalValue, setInternalValue] = useState(
     value === "" || !value ? "Choose an option" : value
   );
-  
+
   return (
     <>
       <Listbox
@@ -25,20 +25,26 @@ export default function Dropdown({
       >
         {({ open }) => (
           <>
-            <div className={
-              editNode ? "relative mt-0 w-full" :
-              "relative mt-1 w-full"
-              }>
-              <Listbox.Button 
-              className=
-              {editNode ? 
-                "pr-9 arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" : 
-                "relative w-full cursor-default rounded-md border border-gray-300 bg-white dark:bg-gray-900 py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"}
+            <div
+              className={
+                editNode ? "relative mt-0 w-full" : "relative mt-1 w-full"
+              }
+            >
+              <Listbox.Button
+                className={
+                  editNode
+                    ? "pr-9 arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+                    : "relative w-full cursor-default rounded-md border border-gray-300 bg-white dark:bg-gray-900 py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"
+                }
               >
                 <span className="block truncate w-full">{internalValue}</span>
-                <span className={
-                  editNode ? "hidden" :
-                  "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"}>
+                <span
+                  className={
+                    editNode
+                      ? "hidden"
+                      : "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+                  }
+                >
                   <ChevronUpDownIcon
                     className="h-5 w-5 text-gray-400"
                     aria-hidden="true"
@@ -53,12 +59,13 @@ export default function Dropdown({
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Listbox.Options 
-                className={
-                  editNode ? "arrow-hide" :
-                  "absolute z-50 mt-1 max-h-60 w-full dark:bg-gray-800 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
-                }>
-                  
+                <Listbox.Options
+                  className={
+                    editNode
+                      ? "arrow-hide"
+                      : "absolute z-50 mt-1 max-h-60 w-full dark:bg-gray-800 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+                  }
+                >
                   {options.map((option, id) => (
                     <Listbox.Option
                       key={id}
@@ -67,13 +74,12 @@ export default function Dropdown({
                           active && !editNode
                             ? "text-white bg-indigo-600 dark:bg-indigo-500"
                             : "text-gray-900",
-                            active && editNode
+                          active && editNode
                             ? "text-white bg-gray-400 dark:bg-gray-500"
                             : "",
-                            editNode ?  
-                            "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800"
-                            : "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800",
-                          
+                          editNode
+                            ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800"
+                            : "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800"
                         )
                       }
                       value={option}
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 086bed3f8..cfb38d353 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -7,7 +7,7 @@ export default function FloatComponent({
   onChange,
   disableCopyPaste = false,
   disabled,
-  editNode = false
+  editNode = false,
 }: FloatComponentType) {
   const [myValue, setMyValue] = useState(value ?? "");
   const { setDisableCopyPaste } = useContext(TabsContext);
@@ -34,11 +34,14 @@ export default function FloatComponent({
         type="number"
         value={myValue}
         className={
-          editNode ? "arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" :
-          "block w-full form-input dark:bg-gray-900 arrow-hide dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
-          (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
+          editNode
+            ? "arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+            : "block w-full form-input dark:bg-gray-900 arrow-hide dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+              (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
+        }
+        placeholder={
+          editNode ? "Number 0 to 1" : "Type a number from zero to one"
         }
-        placeholder={editNode ? "Number 0 to 1" : "Type a number from zero to one"}
         onChange={(e) => {
           setMyValue(e.target.value);
           onChange(e.target.value);
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 8f843e8c6..b088d2c29 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -9,7 +9,7 @@ export default function InputComponent({
   disableCopyPaste = false,
   disabled,
   password,
-  editNode = false
+  editNode = false,
 }: InputComponentType) {
   const [myValue, setMyValue] = useState(value ?? "");
   const [pwdVisible, setPwdVisible] = useState(false);
@@ -41,8 +41,10 @@ export default function InputComponent({
           "block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm  sm:text-sm",
           disabled ? " bg-gray-200 dark:bg-gray-700" : "",
           password && !pwdVisible && myValue !== "" ? "password" : "",
-          editNode ? "placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" : "focus:border-indigo-500 focus:ring-indigo-500",
-          password && editNode ? "pr-8" : "pr-3",
+          editNode
+            ? "placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+            : "focus:border-indigo-500 focus:ring-indigo-500",
+          password && editNode ? "pr-8" : "pr-3"
         )}
         placeholder={password && editNode ? "Key" : "Type something..."}
         onChange={(e) => {
@@ -50,14 +52,13 @@ export default function InputComponent({
           onChange(e.target.value);
         }}
       />
-      {
-        password && (
-          <button
-          className={
-            classNames(
-              editNode ? "absolute inset-y-0 right-0 pr-2 items-center text-gray-600" : "absolute inset-y-0 right-0 items-center px-4 text-gray-600",
-            )
-          }
+      {password && (
+        <button
+          className={classNames(
+            editNode
+              ? "absolute inset-y-0 right-0 pr-2 items-center text-gray-600"
+              : "absolute inset-y-0 right-0 items-center px-4 text-gray-600"
+          )}
           onClick={() => {
             setPwdVisible(!pwdVisible);
           }}
@@ -100,9 +101,7 @@ export default function InputComponent({
               </svg>
             ))}
         </button>
-        )
-      }
-
+      )}
     </div>
   );
 }
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index 8d01145d6..4dd32b1da 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -10,7 +10,7 @@ export default function InputFileComponent({
   suffixes,
   fileTypes,
   onFileChange,
-  editNode = false
+  editNode = false,
 }: FileComponentType) {
   const [myValue, setMyValue] = useState(value);
   const { setErrorData } = useContext(alertContext);
@@ -72,17 +72,18 @@ export default function InputFileComponent({
         <span
           onClick={handleButtonClick}
           className={
-            editNode ? "placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" :
-            "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
-            (disabled ? " bg-gray-200" : "")
+            editNode
+              ? "placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+              : "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+                (disabled ? " bg-gray-200" : "")
           }
         >
           {myValue !== "" ? myValue : "No file"}
         </span>
         <button onClick={handleButtonClick}>
-          {!editNode && 
-          <DocumentMagnifyingGlassIcon className="w-8 h-8  hover:text-blue-600" />
-          }
+          {!editNode && (
+            <DocumentMagnifyingGlassIcon className="w-8 h-8  hover:text-blue-600" />
+          )}
         </button>
       </div>
     </div>
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 8794cae53..fa8dc8cbc 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -8,11 +8,11 @@ export default function IntComponent({
   onChange,
   disableCopyPaste = false,
   disabled,
-  editNode = false
+  editNode = false,
 }: FloatComponentType) {
   const [myValue, setMyValue] = useState(value ?? "");
   const { setDisableCopyPaste } = useContext(TabsContext);
-  
+
   useEffect(() => {
     if (disabled) {
       setMyValue("");
@@ -55,9 +55,10 @@ export default function IntComponent({
         type="number"
         value={myValue}
         className={
-          editNode ? "arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" :
-          "block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
-          (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
+          editNode
+            ? "arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+            : "block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+              (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
         placeholder={editNode ? "Integer number" : "Type a integer number"}
         onChange={(e) => {
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index e7f88d1ba..a1729ef99 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -11,7 +11,7 @@ export default function PromptAreaComponent({
   value,
   onChange,
   disabled,
-  editNode = false
+  editNode = false,
 }: TextAreaComponentType) {
   const [myValue, setMyValue] = useState(value);
   const { openPopUp } = useContext(PopUpContext);
@@ -22,9 +22,6 @@ export default function PromptAreaComponent({
     }
   }, [disabled, onChange]);
   return (
-
-    
-
     <div
       className={
         disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full"
@@ -47,9 +44,10 @@ export default function PromptAreaComponent({
             );
           }}
           className={
-            editNode ? "h-7 truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" :
-            "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
-            (disabled ? " bg-gray-200" : "")
+            editNode
+              ? "h-7 truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+              : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+                (disabled ? " bg-gray-200" : "")
           }
         >
           {myValue !== "" ? myValue : "-"}
@@ -70,11 +68,9 @@ export default function PromptAreaComponent({
             );
           }}
         >
-          {
-            !editNode &&
+          {!editNode && (
             <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
-          }
-          
+          )}
         </button>
       </div>
     </div>
diff --git a/src/frontend/src/components/toggleShadComponent/index.tsx b/src/frontend/src/components/toggleShadComponent/index.tsx
index 0278c8cf5..188ddccf9 100644
--- a/src/frontend/src/components/toggleShadComponent/index.tsx
+++ b/src/frontend/src/components/toggleShadComponent/index.tsx
@@ -16,15 +16,14 @@ export default function ToggleShadComponent({
   return (
     <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
       <Switch
-  style={{
-    transform: 'scaleX(0.6) scaleY(0.6)',
-  }}
+        style={{
+          transform: "scaleX(0.6) scaleY(0.6)",
+        }}
         checked={enabled}
         onCheckedChange={(x: boolean) => {
           setEnabled(x);
         }}
-      >
-      </Switch>
+      ></Switch>
     </div>
   );
 }
diff --git a/src/frontend/src/components/ui/button.tsx b/src/frontend/src/components/ui/button.tsx
index 40e315375..dfafeacd5 100644
--- a/src/frontend/src/components/ui/button.tsx
+++ b/src/frontend/src/components/ui/button.tsx
@@ -1,8 +1,7 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "../../utils"
-
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
@@ -30,26 +29,26 @@ const buttonVariants = cva(
       size: "default",
     },
   }
-)
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Button.displayName = "Button"
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/src/frontend/src/components/ui/checkbox.tsx b/src/frontend/src/components/ui/checkbox.tsx
index c8b0eb960..4e4905bb9 100644
--- a/src/frontend/src/components/ui/checkbox.tsx
+++ b/src/frontend/src/components/ui/checkbox.tsx
@@ -1,10 +1,9 @@
-"use client"
-
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
-import { cn } from "../../utils"
+"use client";
 
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import { cn } from "../../utils";
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -24,7 +23,7 @@ const Checkbox = React.forwardRef<
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox }
+export { Checkbox };
diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx
index fc4e2e506..30b2c6856 100644
--- a/src/frontend/src/components/ui/dialog.tsx
+++ b/src/frontend/src/components/ui/dialog.tsx
@@ -1,14 +1,13 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
-import { cn } from "../../utils"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "../../utils";
 
+const Dialog = DialogPrimitive.Root;
 
-const Dialog = DialogPrimitive.Root
-
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
 const DialogPortal = ({
   className,
@@ -20,8 +19,8 @@ const DialogPortal = ({
       {children}
     </div>
   </DialogPrimitive.Portal>
-)
-DialogPortal.displayName = DialogPrimitive.Portal.displayName
+);
+DialogPortal.displayName = DialogPrimitive.Portal.displayName;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -35,8 +34,8 @@ const DialogOverlay = React.forwardRef<
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -59,8 +58,8 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
   className,
@@ -73,8 +72,8 @@ const DialogHeader = ({
     )}
     {...props}
   />
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({
   className,
@@ -87,8 +86,8 @@ const DialogFooter = ({
     )}
     {...props}
   />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -102,8 +101,8 @@ const DialogTitle = React.forwardRef<
     )}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -114,8 +113,8 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
@@ -125,4 +124,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-}
+};
diff --git a/src/frontend/src/components/ui/input.tsx b/src/frontend/src/components/ui/input.tsx
index 20c529a79..f3a8757e8 100644
--- a/src/frontend/src/components/ui/input.tsx
+++ b/src/frontend/src/components/ui/input.tsx
@@ -1,6 +1,5 @@
-import * as React from "react"
-import { cn } from "../../utils"
-
+import * as React from "react";
+import { cn } from "../../utils";
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -17,9 +16,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Input.displayName = "Input"
+);
+Input.displayName = "Input";
 
-export { Input }
+export { Input };
diff --git a/src/frontend/src/components/ui/label.tsx b/src/frontend/src/components/ui/label.tsx
index d6578bf64..ab5129253 100644
--- a/src/frontend/src/components/ui/label.tsx
+++ b/src/frontend/src/components/ui/label.tsx
@@ -1,14 +1,13 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "../../utils"
+"use client";
 
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utils";
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
+);
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
@@ -20,7 +19,7 @@ const Label = React.forwardRef<
     className={cn(labelVariants(), className)}
     {...props}
   />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+));
+Label.displayName = LabelPrimitive.Root.displayName;
 
-export { Label }
+export { Label };
diff --git a/src/frontend/src/components/ui/switch.tsx b/src/frontend/src/components/ui/switch.tsx
index 9c28fa50a..122057cfb 100644
--- a/src/frontend/src/components/ui/switch.tsx
+++ b/src/frontend/src/components/ui/switch.tsx
@@ -1,9 +1,8 @@
-"use client"
-
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
-import { cn } from "../../utils"
+"use client";
 
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cn } from "../../utils";
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -23,7 +22,7 @@ const Switch = React.forwardRef<
       )}
     />
   </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch }
+export { Switch };
diff --git a/src/frontend/src/components/ui/textarea.tsx b/src/frontend/src/components/ui/textarea.tsx
index f008db2bc..fc0cda2ff 100644
--- a/src/frontend/src/components/ui/textarea.tsx
+++ b/src/frontend/src/components/ui/textarea.tsx
@@ -1,6 +1,5 @@
-import * as React from "react"
-import { cn } from "../../utils"
-
+import * as React from "react";
+import { cn } from "../../utils";
 
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@@ -16,9 +15,9 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Textarea.displayName = "Textarea"
+);
+Textarea.displayName = "Textarea";
 
-export { Textarea }
+export { Textarea };
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 47f0c854d..73535e119 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -48,7 +48,7 @@ export default function ApiModal({ flowName }) {
   function setModalOpen(x: boolean) {
     setOpen(x);
     if (x === false) {
-        closePopUp();
+      closePopUp();
     }
   }
 
@@ -88,78 +88,69 @@ flow("Hey, have you heard of LangFlow?")`;
     },
   ];
   return (
-
-
     <Dialog open={true} onOpenChange={setModalOpen}>
-    <DialogTrigger>
-    </DialogTrigger>
-    <DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[600px]">
-      <DialogHeader>
-        <DialogTitle className="flex items-center">
-          <span className="pr-2">
-          Code
-          </span>
+      <DialogTrigger></DialogTrigger>
+      <DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[600px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center">
+            <span className="pr-2">Code</span>
             <CodeBracketSquareIcon
-            className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
-            aria-hidden="true"
+              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              aria-hidden="true"
             />
-          
           </DialogTitle>
-        <DialogDescription>
-        Export your flow to use it with this code.
-
-        </DialogDescription>
-      </DialogHeader>
-
-
-                    <div className="flex flex-col h-full w-full ">
-                      <div className="flex px-5 z-10">
-                        {tabs.map((tab, index) => (
-                          <button key={index}
-                            onClick={() => {
-                              setActiveTab(index);
-                            }}
-                            className={
-                              "p-2 rounded-t-lg w-44 border border-b-0 border-gray-300 dark:border-gray-700 dark:text-gray-300 -mr-px flex justify-center items-center gap-4 " +
-                              (activeTab === index
-                                ? " bg-white dark:bg-gray-800"
-                                : "bg-gray-100 dark:bg-gray-900")
-                            }
-                          >
-                            {tab.name}
-                            <img src={tab.image} className="w-6" />
-                          </button>
-                        ))}
-                      </div>
-                      <div className="overflow-hidden px-4 py-2 sm:p-4 sm:pb-0 sm:pt-2 w-full h-full rounded-lg shadow bg-white dark:bg-gray-800">
-                        <div className="items-center mb-2">
-                          <div className="float-right">
-                          <button
-                            className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
-                            onClick={copyToClipboard}
-                          >
-                            {isCopied ? (
-                              <IconCheck size={18} />
-                            ) : (
-                              <IconClipboard size={18} />
-                            )}
-                            {isCopied ? "Copied!" : "Copy code"}
-                          </button>
-                            </div>
-
-                        </div>
-                        <SyntaxHighlighter
-                          className="h-[370px] w-full"
-                          language={tabs[activeTab].mode}
-                          style={oneDark}
-                          customStyle={{ margin: 0 }}
-                        >
-                          {tabs[activeTab].code}
-                        </SyntaxHighlighter>
-                      </div>
-                    </div>
-    </DialogContent>
-  </Dialog>
+          <DialogDescription>
+            Export your flow to use it with this code.
+          </DialogDescription>
+        </DialogHeader>
 
+        <div className="flex flex-col h-full w-full ">
+          <div className="flex px-5 z-10">
+            {tabs.map((tab, index) => (
+              <button
+                key={index}
+                onClick={() => {
+                  setActiveTab(index);
+                }}
+                className={
+                  "p-2 rounded-t-lg w-44 border border-b-0 border-gray-300 dark:border-gray-700 dark:text-gray-300 -mr-px flex justify-center items-center gap-4 " +
+                  (activeTab === index
+                    ? " bg-white dark:bg-gray-800"
+                    : "bg-gray-100 dark:bg-gray-900")
+                }
+              >
+                {tab.name}
+                <img src={tab.image} className="w-6" />
+              </button>
+            ))}
+          </div>
+          <div className="overflow-hidden px-4 py-2 sm:p-4 sm:pb-0 sm:pt-2 w-full h-full rounded-lg shadow bg-white dark:bg-gray-800">
+            <div className="items-center mb-2">
+              <div className="float-right">
+                <button
+                  className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
+                  onClick={copyToClipboard}
+                >
+                  {isCopied ? (
+                    <IconCheck size={18} />
+                  ) : (
+                    <IconClipboard size={18} />
+                  )}
+                  {isCopied ? "Copied!" : "Copy code"}
+                </button>
+              </div>
+            </div>
+            <SyntaxHighlighter
+              className="h-[370px] w-full"
+              language={tabs[activeTab].mode}
+              style={oneDark}
+              customStyle={{ margin: 0 }}
+            >
+              {tabs[activeTab].code}
+            </SyntaxHighlighter>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 38dbd7baf..c68afe408 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -43,7 +43,6 @@ import {
 } from "../../components/ui/dialog";
 import { Button } from "../../components/ui/button";
 
-
 export default function EditNodeModal({ data }: { data: NodeDataType }) {
   const [open, setOpen] = useState(true);
   const [nodeLength, setNodeLength] = useState(
@@ -66,263 +65,272 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
   const { types } = useContext(typesContext);
   const ref = useRef();
   const { save } = useContext(TabsContext);
-  const [enabled, setEnabled] = useState(
-    false
-  );
-  if(nodeLength == 0){
+  const [enabled, setEnabled] = useState(false);
+  if (nodeLength == 0) {
     closePopUp();
   }
 
   function setModalOpen(x: boolean) {
     setOpen(x);
     if (x === false) {
-        closePopUp();
+      closePopUp();
     }
   }
 
-  function changeAdvanced(node): void{
+  function changeAdvanced(node): void {
     Object.keys(data.node.template).filter((n, i) => {
       if (n === node.name) {
         data.node.template[n].advanced = !data.node.template[n].advanced;
       }
       return true;
     });
-    setNodeValue(!nodeValue)
+    setNodeValue(!nodeValue);
   }
 
   console.log(data.node.template);
-  
 
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
-    <DialogTrigger>
-    </DialogTrigger>
-    <DialogContent className="lg:max-w-[700px]">
-      <DialogHeader>
-        <DialogTitle className="flex items-center">
-          <span className="pr-2">
-          Edit Node
-
-          </span>
+      <DialogTrigger></DialogTrigger>
+      <DialogContent className="lg:max-w-[700px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center">
+            <span className="pr-2">Edit Node</span>
             <PencilSquareIcon
-            className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
-            aria-hidden="true"
+              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              aria-hidden="true"
             />
-          
           </DialogTitle>
-        <DialogDescription>
-          Make configurations changes to your nodes. Click save when you're done.
-          <div className="flex pt-3">
-          <VariableIcon  className="w-5 h-5 pe-1 text-gray-700 stroke-2">&nbsp;</VariableIcon>
-                  <span className="text-sm font-semibold text-gray-800">Parameters</span>
+          <DialogDescription>
+            Make configurations changes to your nodes. Click save when you're
+            done.
+            <div className="flex pt-3">
+              <VariableIcon className="w-5 h-5 pe-1 text-gray-700 stroke-2">
+                &nbsp;
+              </VariableIcon>
+              <span className="text-sm font-semibold text-gray-800">
+                Parameters
+              </span>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex w-full h-fit max-h-[415px]">
+          <div
+            className={classNames(
+              "w-full rounded-lg bg-white dark:bg-gray-800 shadow",
+              nodeLength > limitScrollFieldsModal
+                ? "overflow-scroll overflow-x-hidden custom-scroll"
+                : "overflow-hidden"
+            )}
+          >
+            {nodeLength > 0 && (
+              <div className="flex flex-col gap-5 h-fit">
+                <Table className="table-fixed">
+                  <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium">
+                    <TableRow>
+                      <TableHead className="h-7 text-center">PARAM</TableHead>
+                      <TableHead className="p-0 h-7 text-center">
+                        VALUE
+                      </TableHead>
+                      <TableHead className="text-center h-7">SHOW</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody className="p-0">
+                    {Object.keys(data.node.template)
+                      .filter(
+                        (t) =>
+                          t.charAt(0) !== "_" &&
+                          data.node.template[t].show &&
+                          (data.node.template[t].type === "str" ||
+                            data.node.template[t].type === "bool" ||
+                            data.node.template[t].type === "float" ||
+                            data.node.template[t].type === "code" ||
+                            data.node.template[t].type === "prompt" ||
+                            data.node.template[t].type === "file" ||
+                            data.node.template[t].type === "Any" ||
+                            data.node.template[t].type === "int")
+                      )
+                      .map((n, i) => (
+                        <TableRow key={i} className="h-8">
+                          <TableCell className="p-0 text-center text-gray-900 text-xs">
+                            {data.node.template[n].name
+                              ? data.node.template[n].name
+                              : data.node.template[n].display_name}
+                          </TableCell>
+                          <TableCell className="p-0 text-center text-gray-900 text-xs w-[300px]">
+                            {data.node.template[n].type === "str" &&
+                            !data.node.template[n].options ? (
+                              <div className="mx-auto">
+                                {data.node.template[n].list ? (
+                                  <InputListComponent
+                                    disabled={false}
+                                    value={
+                                      !data.node.template[n].value ||
+                                      data.node.template[n].value === ""
+                                        ? [""]
+                                        : data.node.template[n].value
+                                    }
+                                    onChange={(t: string[]) => {
+                                      data.node.template[n].value = t;
+                                      save();
+                                    }}
+                                  />
+                                ) : data.node.template[n].multiline ? (
+                                  <TextAreaComponent
+                                    disabled={false}
+                                    value={data.node.template[n].value ?? ""}
+                                    onChange={(t: string) => {
+                                      data.node.template[n].value = t;
+                                      save();
+                                    }}
+                                  />
+                                ) : (
+                                  <InputComponent
+                                    editNode={true}
+                                    disabled={false}
+                                    password={
+                                      data.node.template[n].password ?? false
+                                    }
+                                    value={data.node.template[n].value ?? ""}
+                                    onChange={(t) => {
+                                      data.node.template[n].value = t;
+                                      save();
+                                    }}
+                                  />
+                                )}
+                              </div>
+                            ) : data.node.template[n].type === "bool" ? (
+                              <div className="ml-auto">
+                                {" "}
+                                <ToggleShadComponent
+                                  enabled={data.node.template[n].value}
+                                  setEnabled={(e) => {
+                                    data.node.template[n].value = e;
+                                    setEnabled(e);
+                                    save();
+                                  }}
+                                  disabled={false}
+                                />
+                              </div>
+                            ) : data.node.template[n].type === "float" ? (
+                              <div className="mx-auto">
+                                <FloatComponent
+                                  disabled={false}
+                                  editNode={true}
+                                  value={data.node.template[n].value ?? ""}
+                                  onChange={(t) => {
+                                    data.node.template[n].value = t;
+                                    save();
+                                  }}
+                                />
+                              </div>
+                            ) : data.node.template[n].type === "str" &&
+                              data.node.template[n].options ? (
+                              <div className="mx-auto">
+                                <Dropdown
+                                  editNode={true}
+                                  options={data.node.template[n].options}
+                                  onSelect={(newValue) =>
+                                    (data.node.template[n].value = newValue)
+                                  }
+                                  value={
+                                    data.node.template[n].value ??
+                                    "Choose an option"
+                                  }
+                                ></Dropdown>
+                              </div>
+                            ) : data.node.template[n].type === "int" ? (
+                              <div className="mx-auto">
+                                <IntComponent
+                                  disabled={false}
+                                  editNode={true}
+                                  value={data.node.template[n].value ?? ""}
+                                  onChange={(t) => {
+                                    data.node.template[n].value = t;
+                                    save();
+                                  }}
+                                />
+                              </div>
+                            ) : data.node.template[n].type === "file" ? (
+                              <div className="mx-auto">
+                                <InputFileComponent
+                                  editNode={true}
+                                  disabled={false}
+                                  value={data.node.template[n].value ?? ""}
+                                  onChange={(t: string) => {
+                                    data.node.template[n].value = t;
+                                  }}
+                                  fileTypes={data.node.template[n].fileTypes}
+                                  suffixes={data.node.template[n].suffixes}
+                                  onFileChange={(t: string) => {
+                                    data.node.template[n].content = t;
+                                    save();
+                                  }}
+                                ></InputFileComponent>
+                              </div>
+                            ) : data.node.template[n].type === "prompt" ? (
+                              <div className="mx-auto">
+                                <PromptAreaComponent
+                                  editNode={true}
+                                  disabled={false}
+                                  value={data.node.template[n].value ?? ""}
+                                  onChange={(t: string) => {
+                                    data.node.template[n].value = t;
+                                    save();
+                                  }}
+                                />
+                              </div>
+                            ) : data.node.template[n].type === "code" ? (
+                              <div className="mx-auto">
+                                <CodeAreaComponent
+                                  disabled={false}
+                                  editNode={true}
+                                  value={data.node.template[n].value ?? ""}
+                                  onChange={(t: string) => {
+                                    data.node.template[n].value = t;
+                                    save();
+                                  }}
+                                />
+                              </div>
+                            ) : data.node.template[n].type === "Any" ? (
+                              "-"
+                            ) : (
+                              <div className="hidden"></div>
+                            )}
+                          </TableCell>
+                          <TableCell className="p-0 text-right">
+                            <div className="items-center text-center">
+                              <ToggleShadComponent
+                                enabled={!data.node.template[n].advanced}
+                                setEnabled={(e) =>
+                                  changeAdvanced(data.node.template[n])
+                                }
+                                disabled={false}
+                              />
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                  </TableBody>
+                </Table>
+              </div>
+            )}
           </div>
+        </div>
 
-        </DialogDescription>
-      </DialogHeader>
-
-      <div className="flex w-full h-fit max-h-[415px]">
-
-<div
-  className={classNames(
-    "w-full rounded-lg bg-white dark:bg-gray-800 shadow",
-    nodeLength > limitScrollFieldsModal
-    ? "overflow-scroll overflow-x-hidden custom-scroll"
-    : "overflow-hidden"
-  )}
->
-  {
-   nodeLength > 0 &&
-    <div className="flex flex-col gap-5 h-fit">
-    <Table className="table-fixed">
-      <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium">
-        <TableRow>
-          <TableHead className="h-7 text-center">
-            PARAM
-          </TableHead>
-          <TableHead className="p-0 h-7 text-center">VALUE</TableHead>
-          <TableHead className="text-center h-7">SHOW</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody className="p-0">
-      { Object.keys(data.node.template).filter(
-            (t) =>
-              t.charAt(0) !== "_" &&
-              data.node.template[t].show &&
-              (data.node.template[t].type === "str" ||
-                data.node.template[t].type === "bool" ||
-                data.node.template[t].type === "float" ||
-                data.node.template[t].type === "code" ||
-                data.node.template[t].type === "prompt" ||
-                data.node.template[t].type === "file" ||
-                data.node.template[t].type === "Any" ||
-                data.node.template[t].type === "int")
-          )
-          .map((n, i) => (
-          <TableRow key={i} className="h-8">
-            <TableCell className="p-0 text-center text-gray-900 text-xs">
-            {data.node.template[n].name
-                  ? data.node.template[n].name
-                  : data.node.template[n].display_name}
-            </TableCell>
-            <TableCell className="p-0 text-center text-gray-900 text-xs w-[300px]">
-
-{data.node.template[n].type === "str" && !data.node.template[n].options ? (
-<div className="mx-auto">
-{data.node.template[n].list ? (
-<InputListComponent
-disabled={false}
-value={
-!data.node.template[n].value ||
-data.node.template[n].value === ""
-? [""]
-: data.node.template[n].value
-}
-onChange={(t: string[]) => {
-data.node.template[n].value = t;
-save();
-}}
-/>
-) : data.node.template[n].multiline ? (
-<TextAreaComponent
-disabled={false}
-value={data.node.template[n].value ?? ""}
-onChange={(t: string) => {
-data.node.template[n].value = t;
-save();
-}}
-/>
-) : (
-<InputComponent
-editNode={true}
-disabled={false}
-password={data.node.template[n].password ?? false}
-value={data.node.template[n].value ?? ""}
-onChange={(t) => {
-data.node.template[n].value = t;
-save();
-}}
-/>
-)}
-</div>
-) : data.node.template[n].type === "bool" ? (
-<div className="ml-auto">
-{" "}
-<ToggleShadComponent 
-enabled={data.node.template[n].value}
-setEnabled={(e) => {
-data.node.template[n].value = e;
-setEnabled(e);
-save();
-}}
-disabled={false} />
-</div>
-) : data.node.template[n].type === "float" ? (
-<div className="mx-auto">
-<FloatComponent
-disabled={false}
-editNode={true}
-value={data.node.template[n].value ?? ""}
-onChange={(t) => {
-data.node.template[n].value = t;
-save();
-}}
-/>
-</div>
-) : data.node.template[n].type === "str" && data.node.template[n].options ? (
-<div className="mx-auto">
-<Dropdown
-editNode={true}
-options={data.node.template[n].options}
-onSelect={(newValue) => (data.node.template[n].value = newValue)}
-value={data.node.template[n].value ?? "Choose an option"}
-></Dropdown>
-</div>
-) : data.node.template[n].type === "int" ? (
-<div className="mx-auto">
-<IntComponent
-disabled={false}
-editNode={true}
-value={data.node.template[n].value ?? ""}
-onChange={(t) => {
-data.node.template[n].value = t;
-save();
-}}
-/>
-</div>
-) : data.node.template[n].type === "file" ? (
-<div className="mx-auto">
-<InputFileComponent
-editNode={true}
-disabled={false}
-value={data.node.template[n].value ?? ""}
-onChange={(t: string) => {
-data.node.template[n].value = t;
-}}
-fileTypes={data.node.template[n].fileTypes}
-suffixes={data.node.template[n].suffixes}
-onFileChange={(t: string) => {
-data.node.template[n].content = t;
-save();
-}}
-></InputFileComponent>
-</div>
-) : data.node.template[n].type === "prompt" ? (
-<div className="mx-auto">
-<PromptAreaComponent
-editNode={true}
-disabled={false}
-value={data.node.template[n].value ?? ""}
-onChange={(t: string) => {
-data.node.template[n].value = t;
-save();
-}}
-/>
-</div>
-) : data.node.template[n].type === "code" ? (
-<div className="mx-auto">
-<CodeAreaComponent
-disabled={false}
-editNode={true}
-value={data.node.template[n].value ?? ""}
-onChange={(t: string) => {
-data.node.template[n].value = t;
-save();
-}}
-/>
-</div>
-)
-: data.node.template[n].type === "Any" ? "-" : (
-<div className="hidden"></div>
-) }
-
-
-            </TableCell>
-            <TableCell className="p-0 text-right">
-
-            <div className="items-center text-center">
-            <ToggleShadComponent 
-            enabled={!data.node.template[n].advanced}
-            setEnabled={(e) => changeAdvanced(data.node.template[n])}
-            disabled={false} />
-          </div>
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  </div>}
-</div>
-</div>
-
-      <DialogFooter>
-      <Button
-      className="mt-3" 
-      onClick={() => {
-        setModalOpen(false);
-      }}
-      type="submit">Save changes</Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
+        <DialogFooter>
+          <Button
+            className="mt-3"
+            onClick={() => {
+              setModalOpen(false);
+            }}
+            type="submit"
+          >
+            Save changes
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index c5d9573cb..644e7fd00 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -44,100 +44,89 @@ export default function CodeAreaModal({
     }
   }
   return (
-
     <Dialog open={true} onOpenChange={setModalOpen}>
-    <DialogTrigger>
-    </DialogTrigger>
-    <DialogContent className="lg:max-w-[700px] h-[500px]">
-      <DialogHeader>
-        <DialogTitle className="flex items-center">
-          <span className="pr-2">
-          Edit Code
-          </span>
+      <DialogTrigger></DialogTrigger>
+      <DialogContent className="lg:max-w-[700px] h-[500px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center">
+            <span className="pr-2">Edit Code</span>
             <CommandLineIcon
-            className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
-            aria-hidden="true"
+              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              aria-hidden="true"
             />
-          
           </DialogTitle>
-        <DialogDescription>
-          Make configurations changes to your nodes. Click save when you're done.
+          <DialogDescription>
+            Make configurations changes to your nodes. Click save when you're
+            done.
+          </DialogDescription>
+        </DialogHeader>
 
-        </DialogDescription>
-      </DialogHeader>
+        <div className="flex h-full w-full mt-2">
+          <AceEditor
+            value={code}
+            mode="python"
+            highlightActiveLine={true}
+            showPrintMargin={false}
+            fontSize={14}
+            showGutter
+            enableLiveAutocompletion
+            theme={dark ? "twilight" : "github"}
+            name="CodeEditor"
+            onChange={(value) => {
+              setCode(value);
+            }}
+            className="w-full rounded-lg h-[300px] custom-scroll"
+          />
+        </div>
 
-
-                    <div className="flex h-full w-full mt-2">
-                    <AceEditor
-                          value={code}
-                          mode="python"
-                          highlightActiveLine={true}
-                          showPrintMargin={false}
-                          fontSize={14}
-                          showGutter
-                          enableLiveAutocompletion
-                          theme={dark ? "twilight" : "github"}
-                          name="CodeEditor"
-                          onChange={(value) => {
-                            setCode(value);
-                          }}
-                          className="w-full rounded-lg h-[300px] custom-scroll"
-                        />
-
-                    </div>
-
-
-   
-      <DialogFooter>
-      <Button
-      className="mt-3" 
-      onClick={() => {
-        checkCode(code)
-          .then((apiReturn) => {
-            if (apiReturn.data) {
-              let importsErrors = apiReturn.data.imports.errors;
-              let funcErrors = apiReturn.data.function.errors;
-              if (
-                funcErrors.length === 0 &&
-                importsErrors.length === 0
-              ) {
-                setSuccessData({
-                  title: "Code is ready to run",
-                });
-                setModalOpen(false);
-                setValue(code);
-              } else {
-                if (funcErrors.length !== 0) {
+        <DialogFooter>
+          <Button
+            className="mt-3"
+            onClick={() => {
+              checkCode(code)
+                .then((apiReturn) => {
+                  if (apiReturn.data) {
+                    let importsErrors = apiReturn.data.imports.errors;
+                    let funcErrors = apiReturn.data.function.errors;
+                    if (funcErrors.length === 0 && importsErrors.length === 0) {
+                      setSuccessData({
+                        title: "Code is ready to run",
+                      });
+                      setModalOpen(false);
+                      setValue(code);
+                    } else {
+                      if (funcErrors.length !== 0) {
+                        setErrorData({
+                          title: "There is an error in your function",
+                          list: funcErrors,
+                        });
+                      }
+                      if (importsErrors.length !== 0) {
+                        setErrorData({
+                          title: "There is an error in your imports",
+                          list: importsErrors,
+                        });
+                      }
+                    }
+                  } else {
+                    setErrorData({
+                      title: "Something went wrong, please try again",
+                    });
+                  }
+                })
+                .catch((_) =>
                   setErrorData({
-                    title: "There is an error in your function",
-                    list: funcErrors,
-                  });
-                }
-                if (importsErrors.length !== 0) {
-                  setErrorData({
-                    title: "There is an error in your imports",
-                    list: importsErrors,
-                  });
-                }
-              }
-            } else {
-              setErrorData({
-                title: "Something went wrong, please try again",
-              });
-            }
-          })
-          .catch((_) =>
-            setErrorData({
-              title:
-                "There is something wrong with this code, please review it",
-            })
-          );
-      }}
-
-      type="submit">Check & Save</Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-
+                    title:
+                      "There is something wrong with this code, please review it",
+                  })
+                );
+            }}
+            type="submit"
+          >
+            Check & Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 7628fb327..968944158 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -41,98 +41,88 @@ export default function ExportModal() {
   const [checked, setChecked] = useState(true);
   const [name, setName] = useState(flows[tabIndex].name);
   return (
-
-    <Dialog open={true} onOpenChange={setModalOpen} >
-    <DialogTrigger asChild>
-
-    </DialogTrigger>
-    <DialogContent className="lg:max-w-[600px] h-[450px]">
-      <DialogHeader>
-        <DialogTitle className="flex items-center">
-          <span className="pr-2">
-          Export
-          </span>
+    <Dialog open={true} onOpenChange={setModalOpen}>
+      <DialogTrigger asChild></DialogTrigger>
+      <DialogContent className="lg:max-w-[600px] h-[450px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center">
+            <span className="pr-2">Export</span>
             <ArrowDownTrayIcon
-            className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
-            aria-hidden="true"
+              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              aria-hidden="true"
             />
-          
           </DialogTitle>
-        <DialogDescription>
-          Make configurations changes to your nodes. Click save when you're done.
+          <DialogDescription>
+            Make configurations changes to your nodes. Click save when you're
+            done.
+          </DialogDescription>
+        </DialogHeader>
 
-        </DialogDescription>
-      </DialogHeader>
-
-      <Label>
+        <Label>
           <span className="font-medium">Name</span>
 
-      <Input 
-      className="mt-2"
-      onChange={(event) => {
-        if (event.target.value != "") {
-          let newFlow = flows[tabIndex];
-          newFlow.name = event.target.value;
-          setName(event.target.value);
-          updateFlow(newFlow);
-        } else {
-          setName(event.target.value);
-        }
-      }}
-      type="text"
-      name="name"
-      value={name ?? null}
-      placeholder="File name"
-      id="name"
-      />
-</Label>
-<Label>
-  <span className="font-medium">Description (optional)</span>
-      <Textarea 
-      
-                        name="description"
-                        id="description"
-                        onChange={(event) => {
-                          let newFlow = flows[tabIndex];
-                          newFlow.description = event.target.value;
-                          updateFlow(newFlow);
-                        }}
-                        value={flows[tabIndex].description ?? null}
-                        placeholder="Flow description"
-                        className="max-h-[100px] mt-2"
-                        rows={3} />
-
-</Label>
-<div className="flex items-center space-x-2">
-      <Checkbox id="terms"
-                onCheckedChange={(event: boolean) => {
-                  setChecked(event);
-                }}
-               
-      />
-      <label
-        htmlFor="terms"
-        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-      >
-        Save with my API keys
-      </label>
-    </div>
-
-      <DialogFooter>
-      <Button
-                        onClick={() => {
-                          if (checked) downloadFlow(flows[tabIndex]);
-                          else downloadFlow(removeApiKeys(flows[tabIndex]));
-                        }}
-
-      type="submit">Download Flow</Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-
-
-
-
+          <Input
+            className="mt-2"
+            onChange={(event) => {
+              if (event.target.value != "") {
+                let newFlow = flows[tabIndex];
+                newFlow.name = event.target.value;
+                setName(event.target.value);
+                updateFlow(newFlow);
+              } else {
+                setName(event.target.value);
+              }
+            }}
+            type="text"
+            name="name"
+            value={name ?? null}
+            placeholder="File name"
+            id="name"
+          />
+        </Label>
+        <Label>
+          <span className="font-medium">Description (optional)</span>
+          <Textarea
+            name="description"
+            id="description"
+            onChange={(event) => {
+              let newFlow = flows[tabIndex];
+              newFlow.description = event.target.value;
+              updateFlow(newFlow);
+            }}
+            value={flows[tabIndex].description ?? null}
+            placeholder="Flow description"
+            className="max-h-[100px] mt-2"
+            rows={3}
+          />
+        </Label>
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="terms"
+            onCheckedChange={(event: boolean) => {
+              setChecked(event);
+            }}
+          />
+          <label
+            htmlFor="terms"
+            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          >
+            Save with my API keys
+          </label>
+        </div>
 
+        <DialogFooter>
+          <Button
+            onClick={() => {
+              if (checked) downloadFlow(flows[tabIndex]);
+              else downloadFlow(removeApiKeys(flows[tabIndex]));
+            }}
+            type="submit"
+          >
+            Download Flow
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 86af41e15..672581aac 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -42,102 +42,91 @@ export default function PromptAreaModal({
   function setModalOpen(x: boolean) {
     setOpen(x);
     if (x === false) {
-        closePopUp();
+      closePopUp();
     }
   }
 
   return (
-
-    
     <Dialog open={true} onOpenChange={setModalOpen}>
-    <DialogTrigger>
-    </DialogTrigger>
-    <DialogContent className="lg:max-w-[700px]">
-      <DialogHeader>
-        <DialogTitle className="flex items-center">
-          <span className="pr-2">
-          {myModalTitle}
-          </span>
+      <DialogTrigger></DialogTrigger>
+      <DialogContent className="lg:max-w-[700px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center">
+            <span className="pr-2">{myModalTitle}</span>
             <DocumentTextIcon
-            className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
-            aria-hidden="true"
+              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              aria-hidden="true"
             />
-          
           </DialogTitle>
-        <DialogDescription>
-          Make configurations changes to your nodes. Click save when you're done.
+          <DialogDescription>
+            Make configurations changes to your nodes. Click save when you're
+            done.
+          </DialogDescription>
+        </DialogHeader>
 
-        </DialogDescription>
-      </DialogHeader>
+        <div className="flex h-full w-full mt-2">
+          <Textarea
+            ref={ref}
+            className="form-input h-[300px] w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+            value={myValue}
+            onChange={(e) => {
+              setMyValue(e.target.value);
+              setValue(e.target.value);
+            }}
+            placeholder="Type message here."
+          />
+        </div>
 
-
-                    <div className="flex h-full w-full mt-2">
-                      <Textarea 
-                          ref={ref}
-                          className="form-input h-[300px] w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
-                          value={myValue}
-                          onChange={(e) => {
-                            setMyValue(e.target.value);
-                            setValue(e.target.value);
-                          }}
-                      placeholder="Type message here." />
-
-                    </div>
-
-
-   
-      <DialogFooter>
-      <Button
-      className="mt-3" 
-      onClick={() => {
-        switch (myModalType) {
-          case 1:
-            setModalOpen(false);
-            break;
-          case 2:
-            checkPrompt(myValue)
-              .then((apiReturn) => {
-                if (apiReturn.data) {
-                  let inputVariables =
-                    apiReturn.data.input_variables;
-                  if (inputVariables.length === 0) {
-                    setErrorData({
-                      title:
-                        "The template you are attempting to use does not contain any variables for data entry.",
+        <DialogFooter>
+          <Button
+            className="mt-3"
+            onClick={() => {
+              switch (myModalType) {
+                case 1:
+                  setModalOpen(false);
+                  break;
+                case 2:
+                  checkPrompt(myValue)
+                    .then((apiReturn) => {
+                      if (apiReturn.data) {
+                        let inputVariables = apiReturn.data.input_variables;
+                        if (inputVariables.length === 0) {
+                          setErrorData({
+                            title:
+                              "The template you are attempting to use does not contain any variables for data entry.",
+                          });
+                        } else {
+                          setSuccessData({
+                            title: "Prompt is ready",
+                          });
+                          setModalOpen(false);
+                          setValue(myValue);
+                        }
+                      } else {
+                        setErrorData({
+                          title: "Something went wrong, please try again",
+                        });
+                      }
+                    })
+                    .catch((error) => {
+                      return setErrorData({
+                        title:
+                          "There is something wrong with this prompt, please review it",
+                        list: [error.response.data.detail],
+                      });
                     });
-                  } else {
-                    setSuccessData({
-                      title: "Prompt is ready",
-                    });
-                    setModalOpen(false);
-                    setValue(myValue);
-                  }
-                } else {
-                  setErrorData({
-                    title:
-                      "Something went wrong, please try again",
-                  });
-                }
-              })
-              .catch((error) => {
-                return setErrorData({
-                  title:
-                    "There is something wrong with this prompt, please review it",
-                  list: [error.response.data.detail],
-                });
-              });
-            break;
-
-          default:
-            break;
-        }
-      }}
-      type="submit">{myButtonText}</Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-
-
+                  break;
 
+                default:
+                  break;
+              }
+            }}
+            type="submit"
+          >
+            {myButtonText}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 46e59a0c0..36f9ad8dc 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -18,23 +18,22 @@ import EditNodeModal from "../../../../modals/EditNodeModal";
 import TooltipReact from "../../../../components/ReactTooltipComponent";
 
 const NodeToolbarComponent = (props) => {
-
   const [nodeLength, setNodeLength] = useState(
     Object.keys(props.data.node.template).filter(
       (t) =>
         t.charAt(0) !== "_" &&
         props.data.node.template[t].show &&
         (props.data.node.template[t].type === "str" ||
-        props.data.node.template[t].type === "bool" ||
-        props.data.node.template[t].type === "float" ||
-        props.data.node.template[t].type === "code" ||
-        props.data.node.template[t].type === "prompt" ||
-        props.data.node.template[t].type === "file" ||
-        props.data.node.template[t].type === "Any" ||
-        props.data.node.template[t].type === "int")
+          props.data.node.template[t].type === "bool" ||
+          props.data.node.template[t].type === "float" ||
+          props.data.node.template[t].type === "code" ||
+          props.data.node.template[t].type === "prompt" ||
+          props.data.node.template[t].type === "file" ||
+          props.data.node.template[t].type === "Any" ||
+          props.data.node.template[t].type === "int")
     ).length
   );
-  
+
   const { setLastCopiedSelection, paste } = useContext(TabsContext);
   const reactFlowInstance = useReactFlow();
   return (
@@ -109,12 +108,11 @@ const NodeToolbarComponent = (props) => {
             position="top"
           >
             <button
-              className={
-                classNames(
-                  nodeLength > 0 ?
-                "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" : 
-                "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md"
-                )}
+              className={classNames(
+                nodeLength > 0
+                  ? "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                  : "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md"
+              )}
               onClick={(event) => {
                 event.preventDefault();
                 console.log(reactFlowInstance.getNode(props.data.id));
@@ -136,23 +134,24 @@ const NodeToolbarComponent = (props) => {
             </button>
           </TooltipReact>
 
-{nodeLength > 0 &&           <TooltipReact
-    delayShow={1000}
-    selector="Edit"
-    htmlContent="Edit"
-    position="top"
-  >
-    <button
-      className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md"
-      onClick={(event) => {
-        event.preventDefault();
-        props.openPopUp(<EditNodeModal data={props.data} />);
-      }}
-    >
-      <PencilSquareIcon className="w-5 h-5  dark:text-gray-300"></PencilSquareIcon>
-    </button>
-  </TooltipReact>}
-
+          {nodeLength > 0 && (
+            <TooltipReact
+              delayShow={1000}
+              selector="Edit"
+              htmlContent="Edit"
+              position="top"
+            >
+              <button
+                className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md"
+                onClick={(event) => {
+                  event.preventDefault();
+                  props.openPopUp(<EditNodeModal data={props.data} />);
+                }}
+              >
+                <PencilSquareIcon className="w-5 h-5  dark:text-gray-300"></PencilSquareIcon>
+              </button>
+            </TooltipReact>
+          )}
 
           {/* 
           <Menu as="div" className="relative inline-block text-left z-100">
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 1db2669c8..62467aaf8 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -47,11 +47,11 @@ import { WolframIcon } from "./icons/Wolfram";
 import { WordIcon } from "./icons/Word";
 import { SerperIcon } from "./icons/Serper";
 import { v4 as uuidv4 } from "uuid";
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
- 
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
 
 export function classNames(...classes: Array<string>) {
@@ -637,5 +637,4 @@ export function updateIds(newFlow, getNodeId) {
       e.target +
       e.targetHandle;
   });
-  
 }