diff --git a/space_flow/public/index.html b/space_flow/public/index.html
index 7b11caa99..52741e97f 100644
--- a/space_flow/public/index.html
+++ b/space_flow/public/index.html
@@ -6,9 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
-<body class="h-full overflow-hidden">
+<body style="width: 100%; height:100%">
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div class="w-screen h-screen overflow-hidden" id='root'>
+    <div style="width: 100vw; height:100vh" id='root'>
     </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/space_flow/src/CustomNodes/AgentNode/index.tsx b/space_flow/src/CustomNodes/AgentNode/index.tsx
new file mode 100644
index 000000000..8baa59f06
--- /dev/null
+++ b/space_flow/src/CustomNodes/AgentNode/index.tsx
@@ -0,0 +1,17 @@
+import { Handle, Position } from "reactflow";
+
+export default function AgentNode({ data }) {
+    console.log(data)
+  return (
+    <div onClick={data.delete} className="agent-node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center">
+      <Handle type="source" position={Position.Left}></Handle>
+      <label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center">
+        Agent
+      </label>
+      <div className="w-full h-min text-xs text-center">
+        Agent data
+      </div>
+      <Handle type="target" position={Position.Right}></Handle>
+    </div>
+  );
+}
diff --git a/space_flow/src/CustomNodes/ChainNode/index.tsx b/space_flow/src/CustomNodes/ChainNode/index.tsx
new file mode 100644
index 000000000..5887d611c
--- /dev/null
+++ b/space_flow/src/CustomNodes/ChainNode/index.tsx
@@ -0,0 +1,17 @@
+import { Handle, Position } from "reactflow";
+
+export default function ChainNode({ data }) {
+    console.log(data)
+  return (
+    <div onClick={data.delete} className="chain-node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center">
+      <Handle type="source" position={Position.Left}></Handle>
+      <label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center">
+        Chain
+      </label>
+      <div className="w-full h-min text-xs text-center">
+        Chain data
+      </div>
+      <Handle type="target" position={Position.Right}></Handle>
+    </div>
+  );
+}
diff --git a/space_flow/src/CustomNodes/ModelNode/index.tsx b/space_flow/src/CustomNodes/ModelNode/index.tsx
index 7c66a6ccc..29f30dafe 100644
--- a/space_flow/src/CustomNodes/ModelNode/index.tsx
+++ b/space_flow/src/CustomNodes/ModelNode/index.tsx
@@ -3,7 +3,7 @@ import { Handle, Position } from "reactflow";
 export default function ModelNode({ data }) {
     console.log(data)
   return (
-    <div onClick={data.delete} className="model-Node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center">
+    <div onClick={data.delete} className="model-node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center">
       <Handle type="source" position={Position.Left}></Handle>
       <label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center">
         Model
diff --git a/space_flow/src/CustomNodes/PromptNode/index.tsx b/space_flow/src/CustomNodes/PromptNode/index.tsx
index c40c07c92..dce0dca81 100644
--- a/space_flow/src/CustomNodes/PromptNode/index.tsx
+++ b/space_flow/src/CustomNodes/PromptNode/index.tsx
@@ -8,7 +8,7 @@ export default function PromptNode({ data }) {
   return (
     <div
       onClick={()=>openPopUp(<div className="absolute top-1/2 left-1/2">teste</div>)}
-      className="prompt-Node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center"
+      className="prompt-node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center"
     >
       <Handle type="source" position={Position.Left}></Handle>
       <label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center">
diff --git a/space_flow/src/CustomNodes/ValidatorNode/index.tsx b/space_flow/src/CustomNodes/ValidatorNode/index.tsx
new file mode 100644
index 000000000..c7543b8a7
--- /dev/null
+++ b/space_flow/src/CustomNodes/ValidatorNode/index.tsx
@@ -0,0 +1,17 @@
+import { Handle, Position } from "reactflow";
+
+export default function ValidatorNode({ data }) {
+    console.log(data)
+  return (
+    <div onClick={data.delete} className="validator-node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center">
+      <Handle type="source" position={Position.Left}></Handle>
+      <label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center">
+        Validator
+      </label>
+      <div className="w-full h-min text-xs text-center">
+        validator data
+      </div>
+      <Handle type="target" position={Position.Right}></Handle>
+    </div>
+  );
+}
diff --git a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 12cddeff7..4a42e1394 100644
--- a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -1,4 +1,6 @@
 import { llm_chain } from "../../../../data_assets/llm_chain";
+import { prompt } from "../../../../data_assets/prompt";
+
 
 export function ExtraSidebar(){
 
@@ -12,13 +14,26 @@ export function ExtraSidebar(){
         if(nodeType==="modelNode"){
             json = JSON.stringify(llm_chain)
         }
+        if(nodeType==="chainNode"){
+            json = JSON.stringify({content:""})
+        }
+        if(nodeType==="agentNode"){
+            json = JSON.stringify({content:""})
+        }
+        if(nodeType==="validatorNode"){
+            json = JSON.stringify({content:""})
+        }
         event.dataTransfer.setData('json',json);
     }
 
     return(
     <div className="h-full w-48 bg-slate-200 flex flex-col">
-        <div className="w-full text-center border border-black cursor-grab" draggable onDragStart={(event)=>onDragStart(event,'promptNode')}> prompt Node</div>
+        <div draggable className="w-full text-center border border-black cursor-grab" onDragStart={(event)=>onDragStart(event,'promptNode')}> Prompt Node</div>
         <div draggable className="w-full text-center border border-black cursor-grab" onDragStart={(event)=>onDragStart(event,'modelNode')}> Model Node</div>
+        <div draggable className="w-full text-center border border-black cursor-grab" onDragStart={(event)=>onDragStart(event,'chainNode')}> Chain Node</div>
+        <div draggable className="w-full text-center border border-black cursor-grab" onDragStart={(event)=>onDragStart(event,'agentNode')}> Agent Node</div>
+        <div draggable className="w-full text-center border border-black cursor-grab" onDragStart={(event)=>onDragStart(event,'validatorNode')}> Validator Node</div>
+
     </div>
     )
 }
\ No newline at end of file
diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx
index f7706a806..c0c1eac22 100644
--- a/space_flow/src/pages/FlowPage/index.tsx
+++ b/space_flow/src/pages/FlowPage/index.tsx
@@ -11,21 +11,30 @@ import PromptNode from "../../CustomNodes/PromptNode";
 import ModelNode from "../../CustomNodes/ModelNode";
 import { locationContext } from "../../contexts/locationContext";
 import { ExtraSidebar } from "./components/extraSidebarComponent";
+import AgentNode from "../../CustomNodes/AgentNode";
+import ChainNode from "../../CustomNodes/ChainNode";
+import ValidatorNode from "../../CustomNodes/ValidatorNode";
+
+const nodeTypes = {
+  textUpdater: TextUpdaterNode,
+  promptNode: PromptNode,
+  modelNode: ModelNode,
+  chainNode: ChainNode,
+  agentNode: AgentNode,
+  validatorNode: ValidatorNode,
+};
 
 export default function FlowPage() {
   // outside component to avoid render trigger
 
   const reactFlowWrapper = useRef(null);
-  const nodeTypes = {
-    textUpdater: TextUpdaterNode,
-    promptNode: PromptNode,
-    modelNode: ModelNode,
-  };
 
   const rfStyle = {
     backgroundCOlor: "#B8CEFF",
   };
+
   let id = 0;
+  
   const getId = () => `dndnode_${id++}`;
 
   const { setExtraComponent } = useContext(locationContext);
