diff --git a/src/frontend/src/components/IOInputField/index.tsx b/src/frontend/src/components/IOInputField/index.tsx
new file mode 100644
index 000000000..68d442648
--- /dev/null
+++ b/src/frontend/src/components/IOInputField/index.tsx
@@ -0,0 +1,23 @@
+import { Textarea } from "../ui/textarea";
+import InputFileComponent from "../inputFileComponent";
+import { IOInputProps } from "../../types/components";
+
+export default function IOInputField({
+  inputType,
+  value,
+  onChange,
+  styleClasses,
+  placeholder,
+}: IOInputProps): JSX.Element | undefined {
+   switch (inputType) {
+    case "TextInput":
+        return (
+            <Textarea
+              className={styleClasses}
+              placeholder={placeholder}
+              value={value}
+              onChange={onChange}
+            />
+        );
+  }
+}
diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index a01988fd4..cf7e10270 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/src/frontend/src/components/IOview/index.tsx
@@ -8,6 +8,7 @@ import IconComponent from "../genericIconComponent";
 import NewChatView from "../newChatView";
 import { Badge } from "../ui/badge";
 import { Textarea } from "../ui/textarea";
+import IOInputField from "../IOInputField";
 
 export default function IOView(): JSX.Element {
   const inputs = useFlowStore((state) => state.inputs);
@@ -17,7 +18,6 @@ export default function IOView(): JSX.Element {
   const nodes = useFlowStore((state) => state.nodes);
   const setNode = useFlowStore((state) => state.setNode);
   const options = inputIds.concat(outputIds);
-  console.log(options);
   const [selectedView, setSelectedView] = useState<ReactNode>(
     handleSelectChange(options[0])
   );
@@ -33,7 +33,7 @@ export default function IOView(): JSX.Element {
         break;
     }
   }
-
+  console.log(inputs)
   return (
     <div className="form-modal-iv-box">
       <div className="mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide">
@@ -66,23 +66,21 @@ export default function IOView(): JSX.Element {
                 >
                   {/* TODO: EXTEND AND IMPROVE VIEW MODE AND ADD OTHER TYPES OF VIEWS */}
                   <div className="file-component-tab-column">
-                    <Textarea
-                      value={
-                        nodes.find((node) => node.id === inputId)?.data?.node
-                          ?.template?.value.value
-                      }
-                      className="custom-scroll"
+                    <IOInputField
+                      value={nodes.find((node) => node.id === inputId)?.data.node.template.value.value}
+                      styleClasses="custom-scroll"
+                      placeholder="Enter text..."
+                      inputType={inputs.find((input) => input.id === inputId)?.type!}
                       onChange={(e) => {
                         e.target.value;
                         if (node) {
-                          let newNode = cloneDeep(node);
-                          newNode.data.node!.template["value"].value =
+                            let newNode = cloneDeep(node);
+                            newNode.data.node!.template["value"].value =
                             e.target.value;
-                          setNode(node.id, newNode);
+                            setNode(node.id, newNode);
                         }
-                      }}
-                      placeholder="Enter text..."
-                    ></Textarea>
+                        }}
+                    />
                   </div>
                 </AccordionComponent>
               </div>
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index f414db1eb..e761c76d2 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -856,7 +856,6 @@ export async function requestLogout() {
 export async function getVerticesOrder(
   flowId: string
 ): Promise<AxiosResponse<VerticesOrderTypeAPI>> {
-  console.log;
   return await api.get(`${BASE_URL_API}build/${flowId}/vertices`);
 }
 
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 7b1322f1b..e641ef1a3 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import { ChangeEvent, ReactElement, ReactNode } from "react";
 import { ReactFlowJsonObject, XYPosition } from "reactflow";
 import { APIClassType, APITemplateType, TemplateVariableType } from "../api";
 import { ChatMessageType } from "../chat";
@@ -645,3 +645,11 @@ export type dropdownButtonPropsType = {
   onFirstBtnClick: () => void;
   options: Array<{ name: string; onBtnClick: () => void }>;
 };
+
+export type IOInputProps = {
+  inputType: string;
+  value: string;
+  onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  styleClasses: string;
+  placeholder: string;
+}