diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 0dfcf8faf..12af8a556 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -1,10 +1,11 @@
-import { useContext, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import AceEditor from "react-ace";
 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 "ace-builds/webpack-resolver";
 import { darkContext } from "../../contexts/darkContext";
 import { postCustomComponent, postValidateCode } from "../../controllers/API";
@@ -63,6 +64,10 @@ export default function CodeAreaModal({
   }
   console.log(dynamic);
 
+  useEffect(()=>{
+    setValue(code);
+  },[code,setValue])
+
   function handleClick() {
     setLoading(true);
     if (!dynamic) {
diff --git a/src/frontend/src/modals/codeAreaModal/v2.tsx b/src/frontend/src/modals/codeAreaModal/v2.tsx
new file mode 100644
index 000000000..52a564d06
--- /dev/null
+++ b/src/frontend/src/modals/codeAreaModal/v2.tsx
@@ -0,0 +1,118 @@
+import { useContext, useRef, useState } from "react";
+import { PopUpContext } from "../../contexts/popUpContext";
+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 {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../components/ui/tabs";
+import TwoColumnsModal from "../twoColumnsModal";
+
+export default function CodeAreaModal({
+  value,
+  setValue,
+  nodeClass,
+  setNodeClass,
+  dynamic
+}: {
+  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);
+    }
+  }
+  console.log(dynamic);
+
+  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",
+          });
+        });
+    }
+    else {
+      postCustomComponent(code, nodeClass).then((apiReturn) => {
+        const { data } = apiReturn;
+        if (data) {
+          setNodeClass(data);
+          setModalOpen(false);
+        }
+      }).catch((err) => {
+        setErrorData({
+          title: "There is something wrong with this code, please see the error on the errors tab",
+        });
+        console.log(err.response.data);
+        setError(err.response.data);
+      });
+    }
+
+  }
+  const tabs = [{ name: "code" }, { name: "errors" }]
+
+  return (
+    <TwoColumnsModal open={open} setOpen={setOpen}>
+        <TwoColumnsModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>{"A"}</TwoColumnsModal.Header>
+        <TwoColumnsModal.First>{"A"}</TwoColumnsModal.First>
+        <TwoColumnsModal.Second>{"B"}</TwoColumnsModal.Second>
+    </TwoColumnsModal>
+  );
+}
diff --git a/src/frontend/src/modals/twoColumnsModal/index.tsx b/src/frontend/src/modals/twoColumnsModal/index.tsx
index b84cd2d37..f91626a27 100644
--- a/src/frontend/src/modals/twoColumnsModal/index.tsx
+++ b/src/frontend/src/modals/twoColumnsModal/index.tsx
@@ -1,7 +1,4 @@
 import { ReactNode, useEffect, useRef } from "react";
-import {
-    TerminalSquare,
-} from "lucide-react";
 
 import _ from "lodash";
 import {
@@ -14,6 +11,10 @@ import {
 } from "../../components/ui/dialog";
 import React from "react";
 
+type FirstProps = {children:ReactNode};
+type SecondProps = {children:ReactNode};
+type HeaderProps = {children:ReactNode,description:string};
+
 const First: React.FC<{ children: ReactNode }> = ({ children }) => {
     return (
         <div className="w-2/5 h-full">
@@ -37,20 +38,16 @@ const Header: React.FC<{ children: ReactNode, description:string }> = ({ childre
         </DialogHeader>
     )
 }
-
+interface TwoColumnsModalProps {
+    children: [React.ReactElement<FirstProps>, React.ReactElement<SecondProps>, React.ReactElement<HeaderProps>];
+    open: boolean;
+    setOpen: (open: boolean) => void;
+  }
 function TwoColumnsModal({
-    title,
-    description,
     open,
     setOpen,
     children,
-}: {
-    children: ReactNode;
-    description: string;
-    title: string;
-    open: boolean;
-    setOpen: Function;
-}, { }) {
+}: TwoColumnsModalProps) {
     const isOpen = useRef(open);
     useEffect(() => {
         isOpen.current = open;