diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index c1a6d5f5f..ff6099835 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -10,6 +10,7 @@ import { typesContext } from "../../../../contexts/typesContext";
 import { ParameterComponentType } from "../../../../types/components";
 import FloatComponent from "../../../../components/floatComponent";
 import Dropdown from "../../../../components/dropdownComponent";
+import CodeAreaComponent from "../../../../components/codeAreaComponent";
 
 export default function ParameterComponent({
 	left,
@@ -136,9 +137,17 @@ export default function ParameterComponent({
 				  data.node.template[name].options ? (
 					<Dropdown
 						options={data.node.template[name].options}
-						onSelect={(newValue) => data.node.template[name].value=newValue}
-						value={data.node.template[name].value??"chose an option"}
+						onSelect={(newValue) => (data.node.template[name].value = newValue)}
+						value={data.node.template[name].value ?? "chose an option"}
 					></Dropdown>
+				) : left === true && type === "code" ? (
+					<CodeAreaComponent
+						disabled={disabled}
+						value={data.node.template[name].value ?? ""}
+						onChange={(t: string) => {
+							data.node.template[name].value = t;
+						}}
+					/>
 				) : (
 					<></>
 				)}
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index ddb9524ee..4432b3f6b 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -34,7 +34,7 @@ export default function GenericNode({
 		}
 		return;
 	}
-
+	console.log(data)
 	return (
 		<div
 			className={classNames(
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
new file mode 100644
index 000000000..8ac089940
--- /dev/null
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -0,0 +1,34 @@
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
+import { useContext, useEffect, useState } from "react";
+import { PopUpContext } from "../../contexts/popUpContext";
+import CodeAreaModal from "../../modals/codeAreaModal";
+import TextAreaModal from "../../modals/textAreaModal";
+import { TextAreaComponentType } from "../../types/components";
+
+export default function CodeAreaComponent({ value, onChange, disabled }:TextAreaComponentType) {
+  const [myValue, setMyValue] = useState(value);
+  const { openPopUp } = useContext(PopUpContext);
+  useEffect(() => {
+    if (disabled) {
+      setMyValue("");
+      onChange("");
+    }
+  }, [disabled, onChange]);
+  return (
+    <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
+      <div className="w-full flex items-center gap-3">
+        <span
+          className={
+            "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'}
+        </span>
+        <button onClick={()=>{openPopUp(<CodeAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}}>
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 26fd5bce1..df61e1ae1 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -25,7 +25,7 @@ export default function TextAreaComponent({ value, onChange, disabled }:TextArea
         >
             {myValue !== "" ? myValue : 'Text empty'}
         </span>
-        <button onClick={()=>{openPopUp(<CodeAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}}>
+        <button onClick={()=>{openPopUp(<TextAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}}>
             <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
         </button>
       </div>