diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 0e4e42cd7..06b7ebaa8 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -268,9 +268,9 @@ export default function ParameterComponent({
             ></Dropdown>
           </div>
         ) : left === true && type === "code" ? (
-          <div  className="mt-2 w-full">
+          <div className="mt-2 w-full">
             <CodeAreaComponent
-              dynamic = {data.node.template[name].dynamic ?? false}
+              dynamic={data.node.template[name].dynamic ?? false}
               setNodeClass={(nodeClass) => {
                 data.node = nodeClass;
               }}
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index ab8fd3fd1..fc69e5f95 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -91,7 +91,6 @@ export default function InputFileComponent({
     input.click();
   };
 
-
   return (
     <div className={disabled ? "input-component-div" : "w-full"}>
       <div className="input-file-component">
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index d2456eb40..fdfe721a9 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -345,4 +345,4 @@ export async function postCustomComponent(
   apiClass: APIClassType
 ): Promise<AxiosResponse<APIClassType>> {
   return await axios.post(`/api/v1/custom_component`, { code });
-}
\ No newline at end of file
+}
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 2c84d7e56..2a5a686a0 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -66,7 +66,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
     }
   }
 
-  useEffect(() => { }, [closePopUp, data.node.template]);
+  useEffect(() => {}, [closePopUp, data.node.template]);
 
   function changeAdvanced(node): void {
     Object.keys(data.node.template).filter((n, i) => {
@@ -140,7 +140,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                           </TableCell>
                           <TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
                             {data.node.template[n].type === "str" &&
-                              !data.node.template[n].options ? (
+                            !data.node.template[n].options ? (
                               <div className="mx-auto">
                                 {data.node.template[n].list ? (
                                   <InputListComponent
@@ -148,7 +148,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                     disabled={false}
                                     value={
                                       !data.node.template[n].value ||
-                                        data.node.template[n].value === ""
+                                      data.node.template[n].value === ""
                                         ? [""]
                                         : data.node.template[n].value
                                     }
@@ -261,7 +261,9 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                             ) : data.node.template[n].type === "code" ? (
                               <div className="mx-auto">
                                 <CodeAreaComponent
-                                  dynamic={data.node.template[n].dynamic ?? false}
+                                  dynamic={
+                                    data.node.template[n].dynamic ?? false
+                                  }
                                   setNodeClass={(nodeClass) => {
                                     data.node = nodeClass;
                                   }}
diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
index dce616132..db63adc39 100644
--- a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
+++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
@@ -63,7 +63,7 @@ export default function ModalField({
               disabled={false}
               value={
                 !data.node.template[name].value ||
-                  data.node.template[name].value === ""
+                data.node.template[name].value === ""
                   ? [""]
                   : data.node.template[name].value
               }
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index e4d01e06b..13893d8c1 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -1,78 +1,69 @@
-import { ReactNode, useContext, useEffect, useRef } from "react";
+import { ReactNode, useContext } from "react";
 
-import _ from "lodash";
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger,
-} from "../../components/ui/dialog";
 import React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
 import { PopUpContext } from "../../contexts/popUpContext";
 
-type ContentProps = {children:ReactNode};
-type HeaderProps = {children:ReactNode,description:string};
-
+type ContentProps = { children: ReactNode };
+type HeaderProps = { children: ReactNode; description: string };
 
 const Content: React.FC<ContentProps> = ({ children }) => {
-    return (
-        <div className="w-full h-full">
-            {children}
-        </div>)
-}
+  return <div className="h-full w-full">{children}</div>;
+};
 
-const Header: React.FC<{ children: ReactNode, description:string }> = ({ children,description }) => {
-    return (
-        <DialogHeader>
-            <DialogTitle className="flex items-center">
-                {children}
-            </DialogTitle>
-            <DialogDescription>{description}</DialogDescription>
-        </DialogHeader>
-    )
-}
+const Header: React.FC<{ children: ReactNode; description: string }> = ({
+  children,
+  description,
+}) => {
+  return (
+    <DialogHeader>
+      <DialogTitle className="flex items-center">{children}</DialogTitle>
+      <DialogDescription>{description}</DialogDescription>
+    </DialogHeader>
+  );
+};
 interface BaseModalProps {
-    children: [React.ReactElement<ContentProps>, React.ReactElement<HeaderProps>];
-    open: boolean;
-    setOpen: (open: boolean) => void;
+  children: [React.ReactElement<ContentProps>, React.ReactElement<HeaderProps>];
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+function BaseModal({ open, setOpen, children }: BaseModalProps) {
+  const { closePopUp, setCloseEdit } = useContext(PopUpContext);
+
+  function setModalOpen(x: boolean) {
+    setOpen(x);
+    if (x === false) {
+      setTimeout(() => {
+        setCloseEdit("editcode");
+        closePopUp();
+      }, 300);
+    }
   }
-function BaseModal({
-    open,
-    setOpen,
-    children,
-}: BaseModalProps) {
-   const {closePopUp, setCloseEdit} = useContext(PopUpContext)
-
-    function setModalOpen(x: boolean) {
-        setOpen(x);
-        if (x === false) {
-          setTimeout(() => {
-            setCloseEdit("editcode");
-            closePopUp();
-          }, 300);
-        }
-      }
-    const headerChild = React.Children.toArray(children).find((child) => (child as React.ReactElement).type === Header);
-    const ContentChild = React.Children.toArray(children).find(
-        (child) => (child as React.ReactElement).type === Content
-    );
-    //UPDATE COLORS AND STYLE CLASSSES
-    return (
-        <Dialog open={open} onOpenChange={setModalOpen}>
-            <DialogTrigger className="hidden"></DialogTrigger>
-            <DialogContent className="min-w-[80vw]">
-                {headerChild}
-                <div className="flex h-[80vh] w-full mt-2 ">
-                    {ContentChild}
-                </div>
-            </DialogContent>
-        </Dialog>
-    );
-
+  const headerChild = React.Children.toArray(children).find(
+    (child) => (child as React.ReactElement).type === Header
+  );
+  const ContentChild = React.Children.toArray(children).find(
+    (child) => (child as React.ReactElement).type === Content
+  );
+  //UPDATE COLORS AND STYLE CLASSSES
+  return (
+    <Dialog open={open} onOpenChange={setModalOpen}>
+      <DialogTrigger className="hidden"></DialogTrigger>
+      <DialogContent className="min-w-[80vw]">
+        {headerChild}
+        <div className="mt-2 flex h-[80vh] w-full ">{ContentChild}</div>
+      </DialogContent>
+    </Dialog>
+  );
 }
 
 BaseModal.Content = Content;
 BaseModal.Header = Header;
-export default BaseModal;
\ No newline at end of file
+export default BaseModal;
diff --git a/src/frontend/src/modals/codeAreaModal/v2.tsx b/src/frontend/src/modals/codeAreaModal/v2.tsx
index 13d522039..9655945f7 100644
--- a/src/frontend/src/modals/codeAreaModal/v2.tsx
+++ b/src/frontend/src/modals/codeAreaModal/v2.tsx
@@ -1,13 +1,13 @@
+// organize-imports-ignore
 import { useContext, useEffect, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
-import 'ace-builds/src-noconflict/ace';
+import "ace-builds/src-noconflict/ace";
 import { darkContext } from "../../contexts/darkContext";
 import { postCustomComponent, postValidateCode } from "../../controllers/API";
 import { alertContext } from "../../contexts/alertContext";
 import { Button } from "../../components/ui/button";
 import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
 import { APIClassType } from "../../types/api";
-import TwoColumnsModal from "../baseModal";
 import { DialogTitle } from "@radix-ui/react-dialog";
 import { TerminalSquare } from "lucide-react";
 import AceEditor from "react-ace";
@@ -15,143 +15,157 @@ import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
 import "ace-builds/src-noconflict/ext-language_tools";
-import 'ace-builds/src-noconflict/ace';
-import { XCircle } from 'lucide-react';
+import "ace-builds/src-noconflict/ace";
 import BaseModal from "../baseModal";
 
 export default function CodeAreaModal({
-    value,
-    setValue,
-    nodeClass,
-    setNodeClass,
-    dynamic
+  value,
+  setValue,
+  nodeClass,
+  setNodeClass,
+  dynamic,
 }: {
-    setValue: (value: string) => void;
-    value: string;
-    nodeClass: APIClassType;
-    setNodeClass: (Class: APIClassType) => void;
-    dynamic?: boolean;
+  setValue: (value: string) => void;
+  value: string;
+  nodeClass: APIClassType;
+  setNodeClass: (Class: APIClassType) => void;
+  dynamic?: boolean;
 }) {
-    const [open, setOpen] = useState(true);
-    const [code, setCode] = useState(value);
-    const [loading, setLoading] = useState(false);
-    const { dark } = useContext(darkContext);
-    const { setErrorData, setSuccessData } = useContext(alertContext);
-    const [activeTab, setActiveTab] = useState("0");
-    const [error, setError] = useState<{ detail: { error: string, traceback: string } }>(null)
-    const { closePopUp, setCloseEdit } = useContext(PopUpContext);
-    const ref = useRef();
-    function setModalOpen(x: boolean) {
-        setOpen(x);
-        if (x === false) {
-            setTimeout(() => {
-                setCloseEdit("editcode");
-                closePopUp();
-            }, 300);
-        }
+  const [open, setOpen] = useState(true);
+  const [code, setCode] = useState(value);
+  const [loading, setLoading] = useState(false);
+  const { dark } = useContext(darkContext);
+  const { setErrorData, setSuccessData } = useContext(alertContext);
+  const [activeTab, setActiveTab] = useState("0");
+  const [error, setError] = useState<{
+    detail: { error: string; traceback: string };
+  }>(null);
+  const { closePopUp, setCloseEdit } = useContext(PopUpContext);
+  const ref = useRef();
+  function setModalOpen(x: boolean) {
+    setOpen(x);
+    if (x === false) {
+      setTimeout(() => {
+        setCloseEdit("editcode");
+        closePopUp();
+      }, 300);
     }
-    useEffect(() => {
-        setValue(code);
-    }, [code, setValue])
+  }
+  useEffect(() => {
+    setValue(code);
+  }, [code, setValue]);
 
-    function handleClick() {
-        setLoading(true);
-        if (!dynamic) {
-            postValidateCode(code)
-                .then((apiReturn) => {
-                    setLoading(false);
-                    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",
-                            });
-                            // 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((_) => {
-                    setLoading(false);
-                    setErrorData({
-                        title: "There is something wrong with this code, please review it",
-                    });
+  function handleClick() {
+    setLoading(true);
+    if (!dynamic) {
+      postValidateCode(code)
+        .then((apiReturn) => {
+          setLoading(false);
+          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",
+              });
+              // setValue(code);
+            } else {
+              if (funcErrors.length !== 0) {
+                setErrorData({
+                  title: "There is an error in your function",
+                  list: funcErrors,
                 });
-        }
-        else {
-            postCustomComponent(code, nodeClass).then((apiReturn) => {
-                const { data } = apiReturn;
-                if (data) {
-                    setNodeClass(data);
-                    setModalOpen(false);
-                }
-            }).catch((err) => {
-                setError(err.response.data);
+              }
+              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((_) => {
+          setLoading(false);
+          setErrorData({
+            title: "There is something wrong with this code, please review it",
+          });
+        });
+    } else {
+      postCustomComponent(code, nodeClass)
+        .then((apiReturn) => {
+          const { data } = apiReturn;
+          if (data) {
+            setNodeClass(data);
+            setModalOpen(false);
+          }
+        })
+        .catch((err) => {
+          setError(err.response.data);
+        });
     }
-    const tabs = [{ name: "code" }, { name: "errors" }]
+  }
+  const tabs = [{ name: "code" }, { name: "errors" }];
 
-    return (
-        <BaseModal open={true} setOpen={setOpen}>
-            <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 text-primary pl-1 "
-                        aria-hidden="true"
-                    />
-                </DialogTitle></BaseModal.Header>
-            <BaseModal.Content>
-                <div className="w-full h-full flex flex-col transition-all">
-                    <div className="h-full w-full">
-                        <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-full custom-scroll border-[1px] border-gray-300 dark:border-gray-600"
-                        />
-                    </div>
-                    <div className={"w-full transition-all delay-500 " + (error?.detail.error !== undefined ? "h-2/6" : "h-0")}>
-                        <div className="w-full h-full overflow-y-scroll overflow-x-clip custom-scroll text-left mt-1">
-                            <h1 className="text-destructive text-lg">{error?.detail?.error}</h1>
-                            <div className="text-status-red text-sm ml-2 w-full break-all"><pre className="w-full break-all whitespace-pre-wrap">{error?.detail?.traceback}</pre></div>
-                        </div>
-                    </div>
-                    <div className="h-fit w-full flex justify-end">
-                        <Button className="mt-3" onClick={handleClick} type="submit">
-                            Check & Save
-                        </Button></div>
-                </div>
-            </BaseModal.Content>
-        </BaseModal>
-    );
+  return (
+    <BaseModal open={true} setOpen={setOpen}>
+      <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>
+      </BaseModal.Header>
+      <BaseModal.Content>
+        <div className="flex h-full w-full flex-col transition-all">
+          <div className="h-full w-full">
+            <AceEditor
+              value={code}
+              mode="python"
+              highlightActiveLine={true}
+              showPrintMargin={false}
+              fontSize={14}
+              showGutter
+              enableLiveAutocompletion
+              theme={dark ? "twilight" : "github"}
+              name="CodeEditor"
+              onChange={(value) => {
+                setCode(value);
+              }}
+              className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600"
+            />
+          </div>
+          <div
+            className={
+              "w-full transition-all delay-500 " +
+              (error?.detail.error !== undefined ? "h-2/6" : "h-0")
+            }
+          >
+            <div className="mt-1 h-full w-full overflow-x-clip overflow-y-scroll text-left custom-scroll">
+              <h1 className="text-lg text-destructive">
+                {error?.detail?.error}
+              </h1>
+              <div className="ml-2 w-full break-all text-sm text-status-red">
+                <pre className="w-full whitespace-pre-wrap break-all">
+                  {error?.detail?.traceback}
+                </pre>
+              </div>
+            </div>
+          </div>
+          <div className="flex h-fit w-full justify-end">
+            <Button className="mt-3" onClick={handleClick} type="submit">
+              Check & Save
+            </Button>
+          </div>
+        </div>
+      </BaseModal.Content>
+    </BaseModal>
+  );
 }
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 710c27971..d9be31ad5 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -17,10 +17,10 @@ import {
   Paperclip,
   Rocket,
   Scissors,
+  Sparkles,
   TerminalSquare,
   Wand2,
   Wrench,
-  Sparkles,
 } from "lucide-react";
 import { ComponentType, SVGProps } from "react";
 import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";