diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index df61e1ae1..9efdfacbc 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -1,7 +1,6 @@
 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";
 
diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
new file mode 100644
index 000000000..f786f2bb1
--- /dev/null
+++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
@@ -0,0 +1,57 @@
+import { useContext } from "react";
+import { TabsContext } from "../../../../contexts/tabsContext";
+import InputListComponent from "../../../../components/inputListComponent";
+import Dropdown from "../../../../components/dropdownComponent";
+import TextAreaComponent from "../../../../components/textAreaComponent";
+import InputComponent from "../../../../components/inputComponent";
+
+export default function ModalField({ data, title, required, id, name, type }) {
+	const { save } = useContext(TabsContext);
+	console.log(name);
+	console.log(data.node.template[name].options);
+
+	return (
+		<div>
+			{type === "str" && !data.node.template[name].options ? (
+				<div>
+					{data.node.template[name].list ? (
+						<InputListComponent
+							disabled={false}
+							value={
+								!data.node.template[name].value ||
+								data.node.template[name].value === ""
+									? [""]
+									: data.node.template[name].value
+							}
+							onChange={(t: string[]) => {
+								data.node.template[name].value = t;
+								save();
+							}}
+						/>
+					) : data.node.template[name].multiline ? (
+						<TextAreaComponent
+							disabled={false}
+							value={data.node.template[name].value ?? ""}
+							onChange={(t: string) => {
+								data.node.template[name].value = t;
+								save();
+							}}
+						/>
+					) : (
+						<InputComponent
+							disabled={false}
+							password={data.node.template[name].password ?? false}
+							value={data.node.template[name].value ?? ""}
+							onChange={(t) => {
+								data.node.template[name].value = t;
+								save();
+							}}
+						/>
+					)}
+				</div>
+			) : (
+				<div>{name}</div>
+			)}
+		</div>
+	);
+}
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index 8b6f3e851..e346914d8 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -3,8 +3,9 @@ import { XMarkIcon } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { NodeDataType } from "../../types/flow";
-import { nodeColors, nodeIcons } from "../../utils";
+import { nodeColors, nodeIcons, snakeToNormalCase } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
+import ModalField from "./components/ModalField";
 
 export default function NodeModal({ data }: { data: NodeDataType }) {
 	const [open, setOpen] = useState(true);
@@ -86,10 +87,36 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
 										<div className="flex h-full w-full">
 											<div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-gray-800 shadow">
 												<div>
+													{/*  str, code, bool, float, int,prompt, file, */}
 													{Object.keys(data.node.template)
 														.filter((t) => t.charAt(0) !== "_")
 														.map((t: string, idx) => (
-															<div key={idx}>{t}</div>
+															<div key={idx}>
+																{
+																	<ModalField
+																		data={data}
+																		title={
+																			data.node.template[t].display_name
+																				? data.node.template[t].display_name
+																				: data.node.template[t].name
+																				? snakeToNormalCase(
+																						data.node.template[t].name
+																				  )
+																				: snakeToNormalCase(t)
+																		}
+																		required={data.node.template[t].required}
+																		id={
+																			data.node.template[t].type +
+																			"|" +
+																			t +
+																			"|" +
+																			data.id
+																		}
+																		name={t}
+																		type={data.node.template[t].type} 
+																	/>
+																}
+															</div>
 														))}
 												</div>
 											</div>