diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx
index 32b87e72f..8787b2513 100644
--- a/space_flow/src/App.tsx
+++ b/space_flow/src/App.tsx
@@ -1,149 +1,144 @@
 import "reactflow/dist/style.css";
-import { useState, useRef, useEffect, useContext } from "react";
-import { ReactFlowProvider } from "reactflow";
+import { useState, useEffect, useContext } from "react";
 import "./App.css";
 import { useLocation } from "react-router-dom";
 import ErrorAlert from "./alerts/error";
 import NoticeAlert from "./alerts/notice";
 import SuccessAlert from "./alerts/success";
 import ExtraSidebar from "./components/ExtraSidebarComponent";
-import { alertContext } from "./contexts/alertContext"; 
+import { alertContext } from "./contexts/alertContext";
 import { locationContext } from "./contexts/locationContext";
-import FlowPage from "./pages/FlowPage";
 import Sidebar from "./components/SidebarComponent";
 import Header from "./components/HeaderComponent";
-import { TabsProvider } from "./contexts/tabsContext";
 import { TabsManager } from "./pages/FlowPage/flowManager";
 
 export default function App() {
-  var _ = require("lodash");
-  
+	var _ = require("lodash");
 
-  let { setAtual, setShowSideBar, setIsStackedOpen} =
-    useContext(locationContext);
-  let location = useLocation();
-  useEffect(() => {
-    setAtual(location.pathname.replace(/\/$/g, "").split("/"));
-    setShowSideBar(true);
-    setIsStackedOpen(true);
-  }, [location.pathname, setAtual, setIsStackedOpen, setShowSideBar]);
+	let { setCurrent, setShowSideBar, setIsStackedOpen } =
+		useContext(locationContext);
+	let location = useLocation();
+	useEffect(() => {
+		setCurrent(location.pathname.replace(/\/$/g, "").split("/"));
+		setShowSideBar(true);
+		setIsStackedOpen(true);
+	}, [location.pathname, setCurrent, setIsStackedOpen, setShowSideBar]);
 
-  const {
-    errorData,
-    errorOpen,
-    setErrorOpen,
-    noticeData,
-    noticeOpen,
-    setNoticeOpen,
-    successData,
-    successOpen,
-    setSuccessOpen,
-  } = useContext(alertContext);
+	const {
+		errorData,
+		errorOpen,
+		setErrorOpen,
+		noticeData,
+		noticeOpen,
+		setNoticeOpen,
+		successData,
+		successOpen,
+		setSuccessOpen,
+	} = useContext(alertContext);
 
-  const [alertsList, setAlertsList] = useState([]);
+	const [alertsList, setAlertsList] = useState([]);
 
-  useEffect(() => {
-    if (errorOpen && errorData) {
-      setErrorOpen(false);
-      setAlertsList((old) => {
-        let newAlertsList = [
-          ...old,
-          { type: "error", data: _.cloneDeep(errorData), id: _.uniqueId() },
-        ];
-        return newAlertsList;
-      });
-    } else if (noticeOpen && noticeData) {
-      setNoticeOpen(false);
-      setAlertsList((old) => {
-        let newAlertsList = [
-          ...old,
-          { type: "notice", data: _.cloneDeep(noticeData), id: _.uniqueId() },
-        ];
-        return newAlertsList;
-      });
-    } else if (successOpen && successData) {
-      setSuccessOpen(false);
-      setAlertsList((old) => {
-        let newAlertsList = [
-          ...old,
-          { type: "success", data: _.cloneDeep(successData), id: _.uniqueId() },
-        ];
-        return newAlertsList;
-      });
-    }
-  }, [errorData, errorOpen, noticeData, noticeOpen, successData, successOpen]);
+	useEffect(() => {
+		if (errorOpen && errorData) {
+			setErrorOpen(false);
+			setAlertsList((old) => {
+				let newAlertsList = [
+					...old,
+					{ type: "error", data: _.cloneDeep(errorData), id: _.uniqueId() },
+				];
+				return newAlertsList;
+			});
+		} else if (noticeOpen && noticeData) {
+			setNoticeOpen(false);
+			setAlertsList((old) => {
+				let newAlertsList = [
+					...old,
+					{ type: "notice", data: _.cloneDeep(noticeData), id: _.uniqueId() },
+				];
+				return newAlertsList;
+			});
+		} else if (successOpen && successData) {
+			setSuccessOpen(false);
+			setAlertsList((old) => {
+				let newAlertsList = [
+					...old,
+					{ type: "success", data: _.cloneDeep(successData), id: _.uniqueId() },
+				];
+				return newAlertsList;
+			});
+		}
+	}, [errorData, errorOpen, noticeData, noticeOpen, successData, successOpen]);
 
-  const removeAlert = (id: number) => {
-    setAlertsList((prevAlertsList) =>
-      prevAlertsList.filter((alert) => alert.id !== id)
-    );
-  };
+	const removeAlert = (id: number) => {
+		setAlertsList((prevAlertsList) =>
+			prevAlertsList.filter((alert) => alert.id !== id)
+		);
+	};
 
-  const user = {
-    name: "Whitney Francis",
-    email: "whitney.francis@example.com",
-    imageUrl:
-      "https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
-  };
+	const user = {
+		name: "Whitney Francis",
+		email: "whitney.francis@example.com",
+		imageUrl:
+			"https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+	};
 
-  const userNavigation = [
-    { name: "Your Projects", href: "/" },
-    // {
-    //   name: "Account settings",
-    //   href: "http://localhost:4455/.ory/kratos/public/self-service/settings/browser",
-    // },
-    { name: "Sign out", href: "/" },
-  ];
+	const userNavigation = [
+		{ name: "Your Projects", href: "/" },
+		// {
+		//   name: "Account settings",
+		//   href: "http://localhost:4455/.ory/kratos/public/self-service/settings/browser",
+		// },
+		{ name: "Sign out", href: "/" },
+	];
 
-  return (
-    //need parent component with width and height
-    <div className="h-full flex flex-col">
-      
-        <div className="flex grow-0 shrink basis-auto">
-          <Header userNavigation={userNavigation} user={user}></Header>
-        </div>
-        <div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
-          <Sidebar />
-          <ExtraSidebar />
+	return (
+		//need parent component with width and height
+		<div className="h-full flex flex-col">
+			<div className="flex grow-0 shrink basis-auto">
+				<Header userNavigation={userNavigation} user={user}></Header>
+			</div>
+			<div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
+				<Sidebar />
+				<ExtraSidebar />
 
-          {/* Main area */}
-          <main className="min-w-0 flex-1 border-t border-gray-200 flex">
-            {/* Primary column */}
-            <div className="w-full h-full">
-                <TabsManager></TabsManager>
-            </div>
-          </main>
-        </div>
-        <div className="flex z-50 flex-col-reverse fixed bottom-5 left-5">
-          {alertsList.map((alert) => (
-            <div key={alert.id}>
-              {alert.type === "error" ? (
-                <ErrorAlert
-                  key={alert.id}
-                  title={alert.data.title}
-                  list={alert.data.list}
-                  id={alert.id}
-                  removeAlert={removeAlert}
-                />
-              ) : alert.type === "notice" ? (
-                <NoticeAlert
-                  key={alert.id}
-                  title={alert.data.title}
-                  link={alert.data.link}
-                  id={alert.id}
-                  removeAlert={removeAlert}
-                />
-              ) : (
-                <SuccessAlert
-                  key={alert.id}
-                  title={alert.data.title}
-                  id={alert.id}
-                  removeAlert={removeAlert}
-                />
-              )}
-            </div>
-          ))}
-        </div>
-    </div>
-  );
+				{/* Main area */}
+				<main className="min-w-0 flex-1 border-t border-gray-200 flex">
+					{/* Primary column */}
+					<div className="w-full h-full">
+						<TabsManager></TabsManager>
+					</div>
+				</main>
+			</div>
+			<div className="flex z-50 flex-col-reverse fixed bottom-5 left-5">
+				{alertsList.map((alert) => (
+					<div key={alert.id}>
+						{alert.type === "error" ? (
+							<ErrorAlert
+								key={alert.id}
+								title={alert.data.title}
+								list={alert.data.list}
+								id={alert.id}
+								removeAlert={removeAlert}
+							/>
+						) : alert.type === "notice" ? (
+							<NoticeAlert
+								key={alert.id}
+								title={alert.data.title}
+								link={alert.data.link}
+								id={alert.id}
+								removeAlert={removeAlert}
+							/>
+						) : (
+							<SuccessAlert
+								key={alert.id}
+								title={alert.data.title}
+								id={alert.id}
+								removeAlert={removeAlert}
+							/>
+						)}
+					</div>
+				))}
+			</div>
+		</div>
+	);
 }
diff --git a/space_flow/src/alerts/error/errorClass.ts b/space_flow/src/alerts/error/errorClass.ts
deleted file mode 100644
index a37691976..000000000
--- a/space_flow/src/alerts/error/errorClass.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-const defaultErrorMessages ={
-    deleteRLAS:"Could not remove label from record, please try again",
-    addRLAS:"Could not label this record, please try again",
-    deleteRecords:"Could not delete record, please try again later"
-}
-
-
-
-export class CustomError extends Error{
-    constructor(message:string){
-        super(message)
-        Object.setPrototypeOf(this,CustomError.prototype)
-    }
-
-    getErrorMessage(): string{
-        return defaultErrorMessages[this.message]?? "unknow error, please try again"
-    }
-}
\ No newline at end of file
diff --git a/space_flow/src/components/ExtraSidebarComponent/index.tsx b/space_flow/src/components/ExtraSidebarComponent/index.tsx
index 7f6ef2c4a..8f2220cd0 100644
--- a/space_flow/src/components/ExtraSidebarComponent/index.tsx
+++ b/space_flow/src/components/ExtraSidebarComponent/index.tsx
@@ -1,13 +1,15 @@
 import { Disclosure } from "@headlessui/react";
-import { ChevronLeftIcon } from "@heroicons/react/24/outline";
+import { ArrowUpTrayIcon, ChevronLeftIcon } from "@heroicons/react/24/outline";
 import { useContext } from "react";
 import { Link } from "react-router-dom";
 import { classNames } from "../../utils";
 import { locationContext } from "../../contexts/locationContext";
+import { TabsContext } from "../../contexts/tabsContext";
 
 export default function ExtraSidebar() {
+  const {uploadFlow} = useContext(TabsContext)
   const {
-    atual,
+    current,
     isStackedOpen,
     setIsStackedOpen,
     extraNavigation,
@@ -20,7 +22,7 @@ export default function ExtraSidebar() {
           isStackedOpen ? "w-60" : "w-0 "
         } flex-shrink-0 flex overflow-hidden flex-col border-r transition-all duration-500`}
       >
-        <div className="w-60 overflow-y-auto scrollbar-hide h-full">
+        <div className="w-60 overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
           <div className="flex pt-4 px-4 justify-between align-middle w-full">
             <span className="text-gray-900 text-lg ml-2 font-semibold">
               {extraNavigation.title}
@@ -32,7 +34,7 @@ export default function ExtraSidebar() {
               <ChevronLeftIcon className="h-6 w-6"></ChevronLeftIcon>
             </button>
           </div>
-          <div className="flex flex-grow flex-col">
+          <div className="flex flex-grow flex-col w-full">
             {extraNavigation.options ? (
               <div className="p-4">
                 <nav className="flex-1 space-y-1">
@@ -42,7 +44,7 @@ export default function ExtraSidebar() {
                         <Link
                           to={item.href}
                           className={classNames(
-                            item.href.split("/")[2] === atual[4]
+                            item.href.split("/")[2] === current[4]
                               ? "bg-gray-100 text-gray-900"
                               : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
                             "group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"
@@ -50,7 +52,7 @@ export default function ExtraSidebar() {
                         >
                           <item.icon
                             className={classNames(
-                              item.href.split("/")[2] === atual[4]
+                              item.href.split("/")[2] === current[4]
                                 ? "text-gray-500"
                                 : "text-gray-400 group-hover:text-gray-500",
                               "mr-3 flex-shrink-0 h-6 w-6"
@@ -69,7 +71,7 @@ export default function ExtraSidebar() {
                           <>
                             <Disclosure.Button
                               className={classNames(
-                                item.href.split("/")[2] === atual[4]
+                                item.href.split("/")[2] === current[4]
                                   ? "bg-gray-100 text-gray-900"
                                   : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
                                 "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
@@ -102,7 +104,7 @@ export default function ExtraSidebar() {
                                   key={subItem.name}
                                   to={subItem.href}
                                   className={classNames(
-                                    subItem.href.split("/")[3] === atual[5]
+                                    subItem.href.split("/")[3] === current[5]
                                       ? "bg-gray-100 text-gray-900"
                                       : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
                                     "group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
@@ -122,7 +124,11 @@ export default function ExtraSidebar() {
             ) : (
               extraComponent
             )}
+            {/* need to convert to multi stackbar logic */}
           </div>
+          {/* <div className="w-full  flex content-center justify-center mt-auto mb-8">
+          <button onClick={()=>uploadFlow()} className="flex content-center justify-center py-3 px-6 border rounded-lg border-blue-500 text-blue-500 hover:text-white hover:bg-blue-500"><span>import flow</span><ArrowUpTrayIcon className=" ml-2 w-5 h-5"/>  </button>
+          </div> */}
         </div>
       </aside>
     </>
diff --git a/space_flow/src/components/HeaderComponent/index.tsx b/space_flow/src/components/HeaderComponent/index.tsx
index 3f5981a63..fc6442161 100644
--- a/space_flow/src/components/HeaderComponent/index.tsx
+++ b/space_flow/src/components/HeaderComponent/index.tsx
@@ -45,7 +45,7 @@ export default function Header({user, userNavigation}){
           <div className="min-w-0 flex-1 ml-5">
             <Breadcrumb />
           </div>
-          {/* <div className="ml-10 flex shrink-0 items-center space-x-10 pr-4">
+          <div className="ml-10 flex shrink-0 items-center space-x-10 pr-4">
             <div className="flex items-center space-x-8">
               <span className="inline-flex">
                 <button type="button" {...triggerProps} className="-mx-1 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 relative" onClick={()=>{setNotificationCenter(false);setIsOpen(true)}}>
@@ -56,7 +56,7 @@ export default function Header({user, userNavigation}){
                 </button>{renderLayer(<div {...layerProps}><AlertDropdown closeFunction={()=>setIsOpen(false)} open={isOpen}></AlertDropdown></div>)}
               </span>
 
-              <Menu as="div" className="relative inline-block text-left">
+              {/* <Menu as="div" className="relative inline-block text-left">
                 <Menu.Button className="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
                   <span className="sr-only">Open user menu</span>
                   <img className="h-8 w-8 rounded-full" src={user.imageUrl} alt="" />
@@ -100,9 +100,9 @@ export default function Header({user, userNavigation}){
                       </div>
                     </Menu.Items>
                   </Transition>
-                </Menu>
+                </Menu> */}
               </div>
-            </div> */}
+            </div>
           </div>
         </header>
     )
diff --git a/space_flow/src/components/SidebarComponent/sidebarButton/index.tsx b/space_flow/src/components/SidebarComponent/sidebarButton/index.tsx
index 447f3fc52..0540d1964 100644
--- a/space_flow/src/components/SidebarComponent/sidebarButton/index.tsx
+++ b/space_flow/src/components/SidebarComponent/sidebarButton/index.tsx
@@ -4,14 +4,14 @@ import { useContext } from "react"
 import { locationContext } from "../../../contexts/locationContext";
 
 export default function SidebarButton({item}){
-    let {atual}= useContext(locationContext);
+    let {current}= useContext(locationContext);
     return (
         <>
         <Link
         key={item.name}
         to={item.href}
         className={classNames(
-            item.href.split("/")[1]=== atual[3]? 'bg-gray-900 text-white' : 'text-gray-400 hover:bg-gray-700',
+            item.href.split("/")[1]=== current[3]? 'bg-gray-900 text-white' : 'text-gray-400 hover:bg-gray-700',
             'flex-shrink-0 inline-flex items-center justify-center h-14 w-14 rounded-lg'
         )}
         >
diff --git a/space_flow/src/components/breadcrumbComponent/index.tsx b/space_flow/src/components/breadcrumbComponent/index.tsx
index c4db2d896..809a4f144 100644
--- a/space_flow/src/components/breadcrumbComponent/index.tsx
+++ b/space_flow/src/components/breadcrumbComponent/index.tsx
@@ -22,7 +22,7 @@ function getPages(atual){
 }
 
 export default function Breadcrumb(){
-  let {atual} = useContext(locationContext);
+  let {current} = useContext(locationContext);
     return (
         <div>
             <nav className="flex ml-2" aria-label="Breadcrumb">
@@ -35,7 +35,7 @@ export default function Breadcrumb(){
                     </Link>
                   </div>
                 </li>
-                  {getPages(atual).map((page) => (
+                  {getPages(current).map((page) => (
                     <li key={page.href}>
                       <div className="flex items-center">
                         <ChevronRightIcon className="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
diff --git a/space_flow/src/components/chatComponent/index.tsx b/space_flow/src/components/chatComponent/index.tsx
index c2b43d280..6a31d6560 100644
--- a/space_flow/src/components/chatComponent/index.tsx
+++ b/space_flow/src/components/chatComponent/index.tsx
@@ -9,13 +9,16 @@ import { useContext, useEffect, useRef, useState } from "react";
 import { sendAll } from "../../controllers/NodesServices";
 import { alertContext } from "../../contexts/alertContext";
 import { nodeColors } from "../../utils";
+import { TabsContext } from "../../contexts/tabsContext";
 
 const _ = require("lodash");
 
-export default function Chat({ reactFlowInstance }) {
+export default function Chat({flow, reactFlowInstance }) {
+  const {updateFlow} = useContext(TabsContext)
+  const [saveChat,setSaveChat] = useState(false)
   const [open, setOpen] = useState(true);
   const [chatValue, setChatValue] = useState("");
-  const [chatHistory, setChatHistory] = useState([]);
+  const [chatHistory, setChatHistory] = useState(flow.chat);
   const {setErrorData} = useContext(alertContext);
   const addChatHistory = (message, isSend) => {
     setChatHistory((old) => {
@@ -23,9 +26,18 @@ export default function Chat({ reactFlowInstance }) {
       newChat.push({ message, isSend });
       return newChat;
     });
+    setSaveChat(chat=>!chat)
   };
   useEffect(()=>{
-    ref.current.scrollIntoView({behavior: 'smooth'});
+    console.log("flow")
+    updateFlow({..._.cloneDeep(flow),chat:chatHistory})
+  },[saveChat])
+  useEffect(()=>{
+    setChatHistory(flow.chat)
+  },[flow])
+  useEffect(()=>{
+    if(ref.current)
+      ref.current.scrollIntoView({behavior: 'smooth'});
   }, [chatHistory])
   function validateNodes(){
     if(reactFlowInstance.getNodes().some((n) => (n.data.node && Object.keys(n.data.node.template).some((t: any) => ((n.data.node.template[t].required && n.data.node.template[t].value === "") && (n.data.node.template[t].required && !reactFlowInstance.getEdges().some((e) => (e.sourceHandle.split('|')[1] === t && e.sourceHandle.split('|')[2] === n.id)))))))){
@@ -40,6 +52,29 @@ export default function Chat({ reactFlowInstance }) {
     return true;
   }
   const ref = useRef(null);
+
+  function sendMessage(){
+    console.log(reactFlowInstance.toObject())
+    if(chatValue !== ""){
+      if(validateNodes()){
+        if(validateChatNodes()){
+          let message = chatValue;
+          setChatValue("");
+          addChatHistory(message, true);
+          console.log({...reactFlowInstance.toObject(),message,chatHistory})
+          sendAll({...reactFlowInstance.toObject(),message,chatHistory}).then((r) => {addChatHistory(r.data.result, false);});
+        } else {
+          setErrorData({title: 'Error sending message', list:['Chat nodes are missing.']})
+        }
+      
+      } else {
+        setErrorData({title: 'Error sending message', list:['There are required fields not filled yet.']})
+      }
+    } else {
+      setErrorData({title: 'Error sending message', list:['The message cannot be empty.']})
+    }  
+  }
+
   return (
     <>
       <Transition
@@ -71,14 +106,14 @@ export default function Chat({ reactFlowInstance }) {
               {chatHistory.map((c, i) => (
                 <div key={i}>
                   {c.isSend ? (
-                    <div className="w-full text-start">
-                      <div className="text-start inline-block bg-gray-200 rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tl-none">
+                    <div className="w-full text-end">
+                      <div className="text-start inline-block bg-gray-200 rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tr-none">
                         {c.message}
                       </div>
                     </div>
                   ) : (
-                    <div className="w-full text-end">
-                      <div style={{backgroundColor: nodeColors['chat']}} className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-white font-normal rounded-tr-none">
+                    <div className="w-full text-start">
+                      <div style={{backgroundColor: nodeColors['chat']}} className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-white font-normal rounded-tl-none">
                         {c.message}
                       </div>
                     </div>
@@ -90,6 +125,11 @@ export default function Chat({ reactFlowInstance }) {
             <div className="w-full bg-white border-t flex items-center justify-between p-3">
               <div className="relative w-full mt-1 rounded-md shadow-sm">
                 <input
+                onKeyDown={(event)=>{
+                  if(event.key==='Enter'){
+                    sendMessage()
+                  }
+                }}
                   type="text"
                   value={chatValue}
                   onChange={(e) => {
@@ -100,28 +140,7 @@ export default function Chat({ reactFlowInstance }) {
                 />
                 <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                   <button
-                    onClick={() => {
-                      console.log(reactFlowInstance.toObject())
-                      if(chatValue !== ""){
-                        if(validateNodes()){
-                          if(validateChatNodes()){
-                            let message = chatValue;
-                            setChatValue("");
-                            addChatHistory(message, true);
-                            sendAll({...reactFlowInstance.toObject(),message}).then((r) => {addChatHistory(r.data.result, false);});
-                          } else {
-                            setErrorData({title: 'Error sending message', list:['Chat nodes are missing.']})
-                          }
-                        
-                        } else {
-                          setErrorData({title: 'Error sending message', list:['There are required fields not filled yet.']})
-                        }
-                      } else {
-                        setErrorData({title: 'Error sending message', list:['The message cannot be empty.']})
-                      }
-                      
-                      
-                    }}
+                    onClick={() => sendMessage()}
                   >
                     <PaperAirplaneIcon
                       className="h-5 w-5 text-gray-400 hover:text-gray-600"
diff --git a/space_flow/src/contexts/alertContext.tsx b/space_flow/src/contexts/alertContext.tsx
index 50e16e2c3..f749cef39 100644
--- a/space_flow/src/contexts/alertContext.tsx
+++ b/space_flow/src/contexts/alertContext.tsx
@@ -3,101 +3,146 @@ import { alertDropdownItem } from "../alerts/alertDropDown";
 
 var _ = require("lodash");
 
-type alertContextType=
-{
-    errorData: {title: string, list?: Array<string>};
-    setErrorData:(newState:{title: string, list?: Array<string>})=>void;
-    errorOpen: boolean;
-    setErrorOpen:(newState:boolean)=>void;
-    noticeData: {title: string, link?: string};
-    setNoticeData:(newState:{title: string, link?: string})=>void;
-    noticeOpen: boolean;
-    setNoticeOpen:(newState:boolean)=>void;
-    successData: {title: string};
-    setSuccessData:(newState:{title: string})=>void;
-    successOpen: boolean;
-    setSuccessOpen:(newState:boolean)=>void;
-    notificationCenter:boolean
-    setNotificationCenter:(newState:boolean)=>void;
-    notificationList:Array<alertDropdownItem>;
-    pushNotificationList:(Object)=>void
-    clearNotificationList:()=>void,
-    removeFromNotificationList:(index:number)=>void
-}
+//types for alertContextType
+type alertContextType = {
+	errorData: { title: string; list?: Array<string> };
+	setErrorData: (newState: { title: string; list?: Array<string> }) => void;
+	errorOpen: boolean;
+	setErrorOpen: (newState: boolean) => void;
+	noticeData: { title: string; link?: string };
+	setNoticeData: (newState: { title: string; link?: string }) => void;
+	noticeOpen: boolean;
+	setNoticeOpen: (newState: boolean) => void;
+	successData: { title: string };
+	setSuccessData: (newState: { title: string }) => void;
+	successOpen: boolean;
+	setSuccessOpen: (newState: boolean) => void;
+	notificationCenter: boolean;
+	setNotificationCenter: (newState: boolean) => void;
+	notificationList: Array<alertDropdownItem>;
+	pushNotificationList: (Object) => void;
+	clearNotificationList: () => void;
+	removeFromNotificationList: (index: number) => void;
+};
 
-const initialValue= {
-    errorData: {title:"", list:[]},
-    setErrorData:()=>{},
-    errorOpen: false,
-    setErrorOpen:()=>{},
-    noticeData: {title:"", link:""},
-    setNoticeData:()=>{},
-    noticeOpen: false,
-    setNoticeOpen:()=>{},
-    successData: {title:""},
-    setSuccessData:()=>{},
-    successOpen: false,
-    setSuccessOpen:()=>{},
-    notificationCenter:false,
-    setNotificationCenter:()=>{},
-    notificationList:[],
-    pushNotificationList:()=>{},
-    clearNotificationList:()=>{},
-    removeFromNotificationList:()=>{}
-}
+//initial values to alertContextType
+const initialValue = {
+	errorData: { title: "", list: [] },
+	setErrorData: () => {},
+	errorOpen: false,
+	setErrorOpen: () => {},
+	noticeData: { title: "", link: "" },
+	setNoticeData: () => {},
+	noticeOpen: false,
+	setNoticeOpen: () => {},
+	successData: { title: "" },
+	setSuccessData: () => {},
+	successOpen: false,
+	setSuccessOpen: () => {},
+	notificationCenter: false,
+	setNotificationCenter: () => {},
+	notificationList: [],
+	pushNotificationList: () => {},
+	clearNotificationList: () => {},
+	removeFromNotificationList: () => {},
+};
 
 export const alertContext = createContext<alertContextType>(initialValue);
 
-export function AlertProvider({children}){
-    const [errorData, setErrorDataState] = useState<{title:string,list?:Array<string>}>({title:"",list:[]});
-    const [errorOpen, setErrorOpen] = useState(false);
-    const [noticeData, setNoticeDataState] = useState<{title:string,link?:string}>({title:"",link:""});
-    const [noticeOpen, setNoticeOpen] = useState(false);
-    const [successData, setSuccessDataState] = useState<{title:string}>({title:""});
-    const [successOpen, setSuccessOpen] = useState(false);
-    const [notificationCenter,setNotificationCenter]=useState(false);
-    const [notificationList,setNotificationList] = useState([])
-    const pushNotificationList = (notification:alertDropdownItem)=>{
-        setNotificationList((old) => {
-            let newNotificationList = _.cloneDeep(old);
-            newNotificationList.unshift(notification);
-            return newNotificationList;
-        })
-    }
-    function setErrorData (newState:{title: string, list?: Array<string>}){
-        setErrorDataState(newState)
-        setErrorOpen(true)
-        if(newState.title){
-            setNotificationCenter(true)
-            pushNotificationList({type:"error",title:newState.title,list:newState.list, id:_.uniqueId()})
-        }
-    }
-    function setNoticeData(newState:{title: string, link?: string}){
-        setNoticeDataState(newState)
-        setNoticeOpen(true)
-        if(newState.title){
-            setNotificationCenter(true)
-            pushNotificationList({type:"notice",title:newState.title,link:newState.link, id:_.uniqueId()})
-        }
-    }
-    function setSuccessData(newState:{title: string}){
-        setSuccessDataState(newState)
-        setSuccessOpen(true)
-        if(newState.title){
-            setNotificationCenter(true)
-            pushNotificationList({type:"success",title:newState.title, id:_.uniqueId()})
-        }
-    }
-    function clearNotificationList(){
-        setNotificationList([])
-    }
-    function removeFromNotificationList(index:number){
-        setNotificationList((prevAlertsList) => prevAlertsList.filter((alert) => alert.id !== index));
-    }
-    return (
-        <alertContext.Provider value={{ removeFromNotificationList,clearNotificationList,notificationList,pushNotificationList,setNotificationCenter,notificationCenter,errorData, setErrorData, 
-        errorOpen,setErrorOpen, noticeData, setNoticeData, noticeOpen, setNoticeOpen, successData, setSuccessData, successOpen, setSuccessOpen}}>
-            {children}
-        </alertContext.Provider>
-    )
+export function AlertProvider({ children }) {
+	const [errorData, setErrorDataState] = useState<{
+		title: string;
+		list?: Array<string>;
+	}>({ title: "", list: [] });
+	const [errorOpen, setErrorOpen] = useState(false);
+	const [noticeData, setNoticeDataState] = useState<{
+		title: string;
+		link?: string;
+	}>({ title: "", link: "" });
+	const [noticeOpen, setNoticeOpen] = useState(false);
+	const [successData, setSuccessDataState] = useState<{ title: string }>({
+		title: "",
+	});
+	const [successOpen, setSuccessOpen] = useState(false);
+	const [notificationCenter, setNotificationCenter] = useState(false);
+	const [notificationList, setNotificationList] = useState([]);
+	const pushNotificationList = (notification: alertDropdownItem) => {
+		setNotificationList((old) => {
+			let newNotificationList = _.cloneDeep(old);
+			newNotificationList.unshift(notification);
+			return newNotificationList;
+		});
+	};
+	function setErrorData(newState: { title: string; list?: Array<string> }) {
+		setErrorDataState(newState);
+		setErrorOpen(true);
+		if (newState.title) {
+			setNotificationCenter(true);
+			pushNotificationList({
+				type: "error",
+				title: newState.title,
+				list: newState.list,
+				id: _.uniqueId(),
+			});
+		}
+	}
+	function setNoticeData(newState: { title: string; link?: string }) {
+		setNoticeDataState(newState);
+		setNoticeOpen(true);
+		if (newState.title) {
+			setNotificationCenter(true);
+			pushNotificationList({
+				type: "notice",
+				title: newState.title,
+				link: newState.link,
+				id: _.uniqueId(),
+			});
+		}
+	}
+	function setSuccessData(newState: { title: string }) {
+		setSuccessDataState(newState);
+		setSuccessOpen(true);
+		if (newState.title) {
+			setNotificationCenter(true);
+			pushNotificationList({
+				type: "success",
+				title: newState.title,
+				id: _.uniqueId(),
+			});
+		}
+	}
+	function clearNotificationList() {
+		setNotificationList([]);
+	}
+	function removeFromNotificationList(index: number) {
+		setNotificationList((prevAlertsList) =>
+			prevAlertsList.filter((alert) => alert.id !== index)
+		);
+	}
+	return (
+		<alertContext.Provider
+			value={{
+				removeFromNotificationList,
+				clearNotificationList,
+				notificationList,
+				pushNotificationList,
+				setNotificationCenter,
+				notificationCenter,
+				errorData,
+				setErrorData,
+				errorOpen,
+				setErrorOpen,
+				noticeData,
+				setNoticeData,
+				noticeOpen,
+				setNoticeOpen,
+				successData,
+				setSuccessData,
+				successOpen,
+				setSuccessOpen,
+			}}
+		>
+			{children}
+		</alertContext.Provider>
+	);
 }
diff --git a/space_flow/src/contexts/index.tsx b/space_flow/src/contexts/index.tsx
index c4a22cad6..8ad06ab0b 100644
--- a/space_flow/src/contexts/index.tsx
+++ b/space_flow/src/contexts/index.tsx
@@ -5,6 +5,7 @@ import { TabsProvider } from "./tabsContext";
 import { TypesProvider } from "./typesContext";
 
 export default function ContextWrapper({ children }) {
+  //element to wrap all context
   return (
     <>
       <LocationProvider>
diff --git a/space_flow/src/contexts/locationContext.tsx b/space_flow/src/contexts/locationContext.tsx
index 1f3fe2378..3850f8a1c 100644
--- a/space_flow/src/contexts/locationContext.tsx
+++ b/space_flow/src/contexts/locationContext.tsx
@@ -1,45 +1,79 @@
 import { createContext, useState } from "react";
 
-type locationContextType=
-{
-    atual:Array<string>;
-    setAtual:(newState:Array<string>)=>void;
-    isStackedOpen: boolean;
-    setIsStackedOpen:(newState:boolean)=>void;
-    showSideBar:boolean;
-    setShowSideBar:(newState:boolean)=>void;
-    extraNavigation:{title:string, options?:Array<{name:string, href:string, icon: any, children?:Array<any>}>};
-    setExtraNavigation:(newState:{title:string, options?:Array<{name:string, href:string, icon: any, children?:Array<any>}>}) => void;
-    extraComponent:any;
-    setExtraComponent:(newState:any) => void;
-}
-
-const initialValue= {
-    atual : window.location.pathname.replace(/\/$/g, '').split("/"),
-    isStackedOpen:((window.innerWidth > 1024 && window.location.pathname.split("/")[1]) ? true : false),
-    setAtual: ()=>{},
-    setIsStackedOpen:()=>{},
-    showSideBar: window.location.pathname.split("/")[1]?true:false,
-    setShowSideBar:()=>{},
-    extraNavigation: {title:""},
-    setExtraNavigation:()=>{},
-    extraComponent: <></>,
-    setExtraComponent:()=>{},
-}
-
+//types for location context
+type locationContextType = {
+	current: Array<string>;
+	setCurrent: (newState: Array<string>) => void;
+	isStackedOpen: boolean;
+	setIsStackedOpen: (newState: boolean) => void;
+	showSideBar: boolean;
+	setShowSideBar: (newState: boolean) => void;
+	extraNavigation: {
+		title: string;
+		options?: Array<{
+			name: string;
+			href: string;
+			icon: any;
+			children?: Array<any>;
+		}>;
+	};
+	setExtraNavigation: (newState: {
+		title: string;
+		options?: Array<{
+			name: string;
+			href: string;
+			icon: any;
+			children?: Array<any>;
+		}>;
+	}) => void;
+	extraComponent: any;
+	setExtraComponent: (newState: any) => void;
+};
 
+//initial value for location context
+const initialValue = {
+    //actual
+	current: window.location.pathname.replace(/\/$/g, "").split("/"),
+	isStackedOpen:
+		window.innerWidth > 1024 && window.location.pathname.split("/")[1]
+			? true
+			: false,
+	setCurrent: () => {},
+	setIsStackedOpen: () => {},
+	showSideBar: window.location.pathname.split("/")[1] ? true : false,
+	setShowSideBar: () => {},
+	extraNavigation: { title: "" },
+	setExtraNavigation: () => {},
+	extraComponent: <></>,
+	setExtraComponent: () => {},
+};
 
 export const locationContext = createContext<locationContextType>(initialValue);
 
-export function LocationProvider({children}){
-    const [atual,setAtual] = useState(initialValue.atual)
-    const [isStackedOpen,setIsStackedOpen] = useState(initialValue.isStackedOpen)
-    const [showSideBar,setShowSideBar] = useState(initialValue.showSideBar)
-    const [extraNavigation, setExtraNavigation] = useState({title:""})
-    const [extraComponent, setExtraComponent] = useState(<></>)
-    return (
-        <locationContext.Provider value={{isStackedOpen,setIsStackedOpen,atual,setAtual, showSideBar, setShowSideBar,extraNavigation, setExtraNavigation, extraComponent, setExtraComponent}}>
-            {children}
-        </locationContext.Provider>
-    )
+export function LocationProvider({ children }) {
+	const [current, setCurrent] = useState(initialValue.current);
+	const [isStackedOpen, setIsStackedOpen] = useState(
+		initialValue.isStackedOpen
+	);
+	const [showSideBar, setShowSideBar] = useState(initialValue.showSideBar);
+	const [extraNavigation, setExtraNavigation] = useState({ title: "" });
+	const [extraComponent, setExtraComponent] = useState(<></>);
+	return (
+		<locationContext.Provider
+			value={{
+				isStackedOpen,
+				setIsStackedOpen,
+				current,
+				setCurrent,
+				showSideBar,
+				setShowSideBar,
+				extraNavigation,
+				setExtraNavigation,
+				extraComponent,
+				setExtraComponent,
+			}}
+		>
+			{children}
+		</locationContext.Provider>
+	);
 }
diff --git a/space_flow/src/contexts/popUpContext.tsx b/space_flow/src/contexts/popUpContext.tsx
index 506be2a38..1d4d28bc7 100644
--- a/space_flow/src/contexts/popUpContext.tsx
+++ b/space_flow/src/contexts/popUpContext.tsx
@@ -1,32 +1,33 @@
 import { createContext } from "react";
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
+//context to set JSX element on the DOM
 export const PopUpContext = createContext({
-    openPopUp: (popUpElement: JSX.Element) => {},
-    closePopUp: () => {}
+  openPopUp: (popUpElement: JSX.Element) => {},
+	closePopUp: () => {},
 });
 
 interface PopUpProviderProps {
-  children: React.ReactNode;
+	children: React.ReactNode;
 }
 
 const PopUpProvider = ({ children }: PopUpProviderProps) => {
-  const [popUpElement, setPopUpElement] = useState<JSX.Element | null>(null);
+	const [popUpElement, setPopUpElement] = useState<JSX.Element | null>(null);
 
-  const openPopUp = (element: JSX.Element) => {
-    setPopUpElement(element);
-  };
+	const openPopUp = (element: JSX.Element) => {
+		setPopUpElement(element);
+	};
 
-  const closePopUp = () => {
-    setPopUpElement(null);
-  };
+	const closePopUp = () => {
+		setPopUpElement(null);
+	};
 
-  return (
-    <PopUpContext.Provider value={{ openPopUp, closePopUp }}>
-      {children}
-      {popUpElement}
-    </PopUpContext.Provider>
-  );
+	return (
+		<PopUpContext.Provider value={{ openPopUp, closePopUp }}>
+			{children}
+			{popUpElement}
+		</PopUpContext.Provider>
+	);
 };
 
-export default PopUpProvider;
\ No newline at end of file
+export default PopUpProvider;
diff --git a/space_flow/src/contexts/tabsContext.tsx b/space_flow/src/contexts/tabsContext.tsx
index d544db585..88ee249f8 100644
--- a/space_flow/src/contexts/tabsContext.tsx
+++ b/space_flow/src/contexts/tabsContext.tsx
@@ -1,102 +1,158 @@
 import { createContext, useEffect, useState, useRef } from "react";
+import { example } from "../data_assets/example";
 
-type flow={name:string,id:string,data:any}
+type flow = {
+	name: string;
+	id: string;
+	data: any;
+	chat: Array<{ message: string; isSend: boolean }>;
+};
 
-type TabsContextType={
-    tabIndex:number;
-    setTabIndex:(index:number)=>void;
-    flows:Array<flow>
-    removeFlow:(id:string)=>void;
-    addFlow:(flowData?:any)=>void;
-    updateFlow:(newFlow:flow)=>void;
-    incrementNodeId:()=>number,
-}
+type TabsContextType = {
+	tabIndex: number;
+	setTabIndex: (index: number) => void;
+	flows: Array<flow>;
+	removeFlow: (id: string) => void;
+	addFlow: (flowData?: any) => void;
+	updateFlow: (newFlow: flow) => void;
+	incrementNodeId: () => number;
+	downloadFlow: () => void;
+	uploadFlow: () => void;
+};
 
 const TabsContextInitialValue = {
-    tabIndex : 0,
-    setTabIndex:(index:number)=>{},
-    flows:[],
-    removeFlow:(id:string)=>{},
-    addFlow:(flowData?:any)=>{},
-    updateFlow:(newFlow:flow)=>{},
-    incrementNodeId:()=>0,
-    
+	tabIndex: 0,
+	setTabIndex: (index: number) => {},
+	flows: [],
+	removeFlow: (id: string) => {},
+	addFlow: (flowData?: any) => {},
+	updateFlow: (newFlow: flow) => {},
+	incrementNodeId: () => 0,
+	downloadFlow: () => {},
+	uploadFlow: () => {},
+};
 
-}
-
-export const TabsContext = createContext<TabsContextType>(TabsContextInitialValue)
-
-let _ = require('lodash');
-
-export function TabsProvider({children}){
-    const [tabIndex,setTabIndex] = useState(0)
-    const [flows,setFlows] = useState<Array<flow>>([])
-    const [id, setId] = useState(0);
-
-    const newNodeId = useRef(0);
-    function incrementNodeId(){
-        newNodeId.current = newNodeId.current + 1;
-        return newNodeId.current;
-    }
-    useEffect(() => {
-        if(flows.length !== 0)
-            window.localStorage.setItem('tabsData', JSON.stringify({tabIndex, flows, id, nodeId: newNodeId.current}));
-    }, [flows, id, tabIndex, newNodeId]);
-
-    useEffect(() => {
-        let cookie = window.localStorage.getItem('tabsData');
-        if(cookie){
-            let cookieObject = JSON.parse(cookie);
-            setTabIndex(cookieObject.tabIndex);
-            setFlows(cookieObject.flows); 
-            setId(cookieObject.id);
-            newNodeId.current= cookieObject.nodeId;
-        }
-    }, [])
-    
-    function removeFlow(id:string){
-        setFlows(prevState=>{
-            const newFlows = [...prevState];
-            const index = newFlows.findIndex(flow=>flow.id===id);
-            if(index >= 0){
-                if(index===tabIndex){
-                    setTabIndex(flows.length-2);
-                    newFlows.splice(index,1);
-                } else {
-                    let flowId = flows[tabIndex].id;
-                    newFlows.splice(index,1);
-                    setTabIndex(newFlows.findIndex(flow=>flow.id === flowId));
-                }
-                
-            }
-            return newFlows;
-        });
-    }
-    function addFlow(flowData?:flow) {
-        const data = flowData?flowData:null
-        let newFlow: flow = {name: "flow"+id, id: id.toString(), data}
-        setId((old) => old+1);
-        setFlows(prevState => {
-            const newFlows = [...prevState, newFlow];
-            return newFlows;
-        });
-        setTabIndex(flows.length);
-      }
-    function updateFlow(newFlow:flow){
-        setFlows(prevState=>{
-            const newFlows = [...prevState];
-            const index = newFlows.findIndex(flow=>flow.id===newFlow.id)
-            if(index!==-1){
-                newFlows[index].data = newFlow.data
-                newFlows[index].name = newFlow.name
-            }
-            return newFlows;
-        });
-    }
-
-    return(
-        <TabsContext.Provider value={{tabIndex,setTabIndex,flows,incrementNodeId, removeFlow,addFlow,updateFlow}}>
-            {children}
-        </TabsContext.Provider>
-    )
+export const TabsContext = createContext<TabsContextType>(
+	TabsContextInitialValue
+);
+
+let _ = require("lodash");
+
+export function TabsProvider({ children }) {
+	const [tabIndex, setTabIndex] = useState(0);
+	const [flows, setFlows] = useState<Array<flow>>([]);
+	const [id, setId] = useState(0);
+
+	const newNodeId = useRef(0);
+	function incrementNodeId() {
+		newNodeId.current = newNodeId.current + 1;
+		return newNodeId.current;
+	}
+	useEffect(() => {
+		if (flows.length !== 0)
+			window.localStorage.setItem(
+				"tabsData",
+				JSON.stringify({ tabIndex, flows, id, nodeId: newNodeId.current })
+			);
+	}, [flows, id, tabIndex, newNodeId]);
+
+	useEffect(() => {
+		let cookie = window.localStorage.getItem("tabsData");
+		if (cookie) {
+			let cookieObject = JSON.parse(cookie);
+			setTabIndex(cookieObject.tabIndex);
+			setFlows(cookieObject.flows);
+			setId(cookieObject.id);
+			newNodeId.current = cookieObject.nodeId;
+		}
+	}, []);
+
+	function downloadFlow() {
+		const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
+			JSON.stringify(flows[tabIndex])
+		)}`;
+		const link = document.createElement("a");
+		link.href = jsonString;
+		link.download = `${flows[tabIndex].name}.json`;
+		link.click();
+	}
+	
+	function uploadFlow() {
+		const input = document.createElement("input");
+		input.type = "file";
+		input.onchange = (e: Event) => {
+			if ((e.target as HTMLInputElement).files[0].type === "application/json") {
+				const file = (e.target as HTMLInputElement).files[0];
+				file.text().then((text) => {
+                    console.log(JSON.parse(text),"json from upload")
+					addFlow(JSON.parse(text));
+				});
+			}
+		};
+		input.click();
+	}
+
+	function removeFlow(id: string) {
+		setFlows((prevState) => {
+			const newFlows = [...prevState];
+			const index = newFlows.findIndex((flow) => flow.id === id);
+			if (index >= 0) {
+				if (index === tabIndex) {
+					setTabIndex(flows.length - 2);
+					newFlows.splice(index, 1);
+				} else {
+					let flowId = flows[tabIndex].id;
+					newFlows.splice(index, 1);
+					setTabIndex(newFlows.findIndex((flow) => flow.id === flowId));
+				}
+			}
+			return newFlows;
+		});
+	}
+	function addFlow(flow?: flow) {
+		const data = flow?.data ? flow.data : null;
+		let newFlow: flow = {
+			name: flow ? flow.name : "flow" + id,
+			id: id.toString(),
+			data,
+			chat: flow ? flow.chat : [],
+		};
+		setId((old) => old + 1);
+		setFlows((prevState) => {
+			const newFlows = [...prevState, newFlow];
+			return newFlows;
+		});
+		setTabIndex(flows.length);
+	}
+	function updateFlow(newFlow: flow) {
+		console.log(newFlow);
+		setFlows((prevState) => {
+			const newFlows = [...prevState];
+			const index = newFlows.findIndex((flow) => flow.id === newFlow.id);
+			if (index !== -1) {
+				newFlows[index].data = newFlow.data;
+				newFlows[index].name = newFlow.name;
+				newFlows[index].chat = newFlow.chat;
+			}
+			return newFlows;
+		});
+	}
+
+	return (
+		<TabsContext.Provider
+			value={{
+				tabIndex,
+				setTabIndex,
+				flows,
+				incrementNodeId,
+				removeFlow,
+				addFlow,
+				updateFlow,
+				downloadFlow,
+				uploadFlow,
+			}}
+		>
+			{children}
+		</TabsContext.Provider>
+	);
 }
diff --git a/space_flow/src/contexts/typesContext.tsx b/space_flow/src/contexts/typesContext.tsx
index 5f83a4e33..789c1a041 100644
--- a/space_flow/src/contexts/typesContext.tsx
+++ b/space_flow/src/contexts/typesContext.tsx
@@ -1,37 +1,44 @@
-import { ReactEventHandler, createContext, useState } from "react";
+import { createContext, useState } from "react";
 import { ReactFlowInstance } from "reactflow";
 
-type typesContextType=
-{
-    reactFlowInstance: ReactFlowInstance;
-    setReactFlowInstance: any;
-    deleteNode:(idx:number)=>void;
-    types: {};
-    setTypes:(newState:{})=>void;
+//context to share types adn functions from nodes to flow
+type typesContextType = {
+	reactFlowInstance: ReactFlowInstance;
+	setReactFlowInstance: any;
+	deleteNode: (idx: number) => void;
+	types: {};
+	setTypes: (newState: {}) => void;
+};
 
-}
-
-const initialValue= {
-    reactFlowInstance: null,
-    setReactFlowInstance: ()=>{},
-    deleteNode: ()=>{},
-    types: {},
-    setTypes:()=>{},
-}
+const initialValue = {
+	reactFlowInstance: null,
+	setReactFlowInstance: () => {},
+	deleteNode: () => {},
+	types: {},
+	setTypes: () => {},
+};
 
 export const typesContext = createContext<typesContextType>(initialValue);
 
-export function TypesProvider({children}){
-    const [types, setTypes] = useState({});
-    const [reactFlowInstance, setReactFlowInstance] = useState(null);
-    function deleteNode(idx){
-        reactFlowInstance.setNodes(
-            reactFlowInstance.getNodes().filter((n) => n.id !== idx)
-          );
-    }
-    return (
-        <typesContext.Provider value={{ types, setTypes, reactFlowInstance, setReactFlowInstance, deleteNode}}>
-            {children}
-        </typesContext.Provider>
-    )
+export function TypesProvider({ children }) {
+	const [types, setTypes] = useState({});
+	const [reactFlowInstance, setReactFlowInstance] = useState(null);
+	function deleteNode(idx) {
+		reactFlowInstance.setNodes(
+			reactFlowInstance.getNodes().filter((n) => n.id !== idx)
+		);
+	}
+	return (
+		<typesContext.Provider
+			value={{
+				types,
+				setTypes,
+				reactFlowInstance,
+				setReactFlowInstance,
+				deleteNode,
+			}}
+		>
+			{children}
+		</typesContext.Provider>
+	);
 }
diff --git a/space_flow/src/entities/sidebarNav.ts b/space_flow/src/entities/sidebarNav.ts
index 9de85c1f1..52ff363e3 100644
--- a/space_flow/src/entities/sidebarNav.ts
+++ b/space_flow/src/entities/sidebarNav.ts
@@ -10,9 +10,9 @@ import {
 
 export const sidebarNavigation = [
   { name: 'Home', href: '/', icon: HomeIcon, current: true },
-  { name: 'Table', href: '/table/', icon: TableCellsIcon, current: false },
-  //{ name: 'Train', href: '#', icon: BoltIcon, current: false },
-  //{ name: 'Model Details', href: '#', icon: LightBulbIcon, current: false },
-  //{ name: 'Deploy', href: '#', icon: RocketLaunchIcon, current: false },
-  { name: 'Settings', href: '/settings/', icon: Cog6ToothIcon, current: false },
+  // { name: 'Table', href: '/table/', icon: TableCellsIcon, current: false },
+  // //{ name: 'Train', href: '#', icon: BoltIcon, current: false },
+  // //{ name: 'Model Details', href: '#', icon: LightBulbIcon, current: false },
+  // //{ name: 'Deploy', href: '#', icon: RocketLaunchIcon, current: false },
+  // { name: 'Settings', href: '/settings/', icon: Cog6ToothIcon, current: false },
 ]
diff --git a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index ef68d3768..980902c22 100644
--- a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -49,7 +49,7 @@ export default function ExtraSidebar() {
   }
 
   return (
-    <div className="mt-4">
+    <div className="mt-4 w-full">
       {Object.keys(data).map((d, i) => (
         <DisclosureComponent
           key={i}
diff --git a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
index 9fb8861f0..138d399b9 100644
--- a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
@@ -1,3 +1,4 @@
+import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
 import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
 import { useContext, useRef, useState } from "react";
 import { TabsContext } from "../../../../contexts/tabsContext";
@@ -5,76 +6,85 @@ import { TabsContext } from "../../../../contexts/tabsContext";
 var _ = require("lodash");
 
 export default function TabComponent({ selected, flow, onClick }) {
-  const { removeFlow, updateFlow,flows } = useContext(TabsContext);
-  const [isRename, setIsRename] = useState(false);
-  const [value, setValue] = useState("");
-  return (
-    <>
-      {flow ? (
-        !selected ? (
-          <div
-            className="flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-t border-t-transparent border-gray-300 -ml-px"
-            onClick={onClick}
-          >
-            {flow.name}
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                removeFlow(flow.id);
-              }}
-            >
-              <XMarkIcon className="h-4 hover:bg-white rounded-full" />
-            </button>
-          </div>
-        ) : (
-          <div className="bg-white flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 px-4 py-1.5 rounded-t-xl -ml-px">
-            {isRename ? (
-              <input
-                autoFocus
-                className="bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md  w-28"
-                onBlur={() => {
-                  setIsRename(false);
-                  if (value !== "") {
-                    let newFlow = _.cloneDeep(flow);
-                    newFlow.name = value;
-                    updateFlow(newFlow);
-                  }
-                }}
-                value={value}
-                onChange={(e) => {
-                  setValue(e.target.value);
-                }}
-              />
-            ) : (
-              <span
-                className="text-left truncate"
-                onDoubleClick={() => {
-                  setIsRename(true);
-                  setValue(flow.name);
-                }}
-              >
-                {flow.name}
-              </span>
-            )}
-            <button
-              onClick={() => {
-                removeFlow(flow.id);
-              }}
-            >
-              {flows.length>1&& <XMarkIcon className="h-4 hover:bg-gray-100 rounded-full" />}
-            </button>
-          </div>
-        )
-      ) : (
-        <div className="h-full py-1.5 flex justify-center items-center">
-          <button
-            className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-gray-300 -ml-px border-t border-t-transparent"
-            onClick={onClick}
-          >
-            <PlusIcon className="h-5 rounded-full hover:bg-white" />
-          </button>
-        </div>
-      )}
-    </>
-  );
+	const { removeFlow, updateFlow, flows, downloadFlow } =
+		useContext(TabsContext);
+	const [isRename, setIsRename] = useState(false);
+	const [value, setValue] = useState("");
+	return (
+		<>
+			{flow ? (
+				!selected ? (
+					<div
+						className="flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-t border-t-transparent border-gray-300 -ml-px"
+						onClick={onClick}
+					>
+						{flow.name}
+						<button
+							onClick={(e) => {
+								e.stopPropagation();
+								removeFlow(flow.id);
+							}}
+						>
+							<XMarkIcon className="h-4 hover:bg-white rounded-full" />
+						</button>
+					</div>
+				) : (
+					<div className="bg-white flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 px-4 py-1.5 rounded-t-xl -ml-px">
+						{isRename ? (
+							<input
+								autoFocus
+								className="bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md  w-28"
+								onBlur={() => {
+									setIsRename(false);
+									if (value !== "") {
+										let newFlow = _.cloneDeep(flow);
+										newFlow.name = value;
+										updateFlow(newFlow);
+									}
+								}}
+								value={value}
+								onChange={(e) => {
+									setValue(e.target.value);
+								}}
+							/>
+						) : (
+							<div className="flex items-center gap-2">
+								<span
+									className="text-left truncate"
+									onDoubleClick={() => {
+										setIsRename(true);
+										setValue(flow.name);
+									}}
+								>
+									{flow.name}
+								</span>
+								{/* <ArrowDownTrayIcon
+									onClick={() => downloadFlow()}
+									className="w-4 h-4 hover:text-blue-500 cursor-pointer"
+								/> */}
+							</div>
+						)}
+						<button
+							onClick={() => {
+								removeFlow(flow.id);
+							}}
+						>
+							{flows.length > 1 && (
+								<XMarkIcon className="h-4 hover:bg-gray-100 rounded-full" />
+							)}
+						</button>
+					</div>
+				)
+			) : (
+				<div className="h-full py-1.5 flex justify-center items-center">
+					<button
+						className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-gray-300 -ml-px border-t border-t-transparent"
+						onClick={onClick}
+					>
+						<PlusIcon className="h-5 rounded-full hover:bg-white" />
+					</button>
+				</div>
+			)}
+		</>
+	);
 }
diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx
index e715460e9..d0e4538d4 100644
--- a/space_flow/src/pages/FlowPage/index.tsx
+++ b/space_flow/src/pages/FlowPage/index.tsx
@@ -1,12 +1,13 @@
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import ReactFlow, {
-  Background,
-  Controls,
-  addEdge,
-  useEdgesState,
-  useNodesState,
-  ReactFlowProvider,
-  useReactFlow,
+	Background,
+	Controls,
+	addEdge,
+	useEdgesState,
+	useNodesState,
+	ReactFlowProvider,
+	useReactFlow,
+	ControlButton,
 } from "reactflow";
 import { locationContext } from "../../contexts/locationContext";
 import ExtraSidebar from "./components/extraSidebarComponent";
@@ -20,164 +21,181 @@ import BooleanNode from "../../CustomNodes/BooleanNode";
 import { alertContext } from "../../contexts/alertContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { typesContext } from "../../contexts/typesContext";
+import {
+	ArrowDownTrayIcon,
+	ArrowUpTrayIcon,
+} from "@heroicons/react/24/outline";
 
 const nodeTypes = {
-  genericNode: GenericNode,
-  inputNode: InputNode,
-  chatInputNode: ChatInputNode,
-  chatOutputNode: ChatOutputNode,
-  booleanNode: BooleanNode,
+	genericNode: GenericNode,
+	inputNode: InputNode,
+	chatInputNode: ChatInputNode,
+	chatOutputNode: ChatOutputNode,
+	booleanNode: BooleanNode,
 };
 
 var _ = require("lodash");
 
 export default function FlowPage({ flow }) {
-  let { updateFlow, incrementNodeId } = useContext(TabsContext);
-  const { types, reactFlowInstance, setReactFlowInstance } =
-    useContext(typesContext);
-  const reactFlowWrapper = useRef(null);
+	let { updateFlow, incrementNodeId, downloadFlow, uploadFlow } =
+		useContext(TabsContext);
+	const { types, reactFlowInstance, setReactFlowInstance } =
+		useContext(typesContext);
+	const reactFlowWrapper = useRef(null);
 
-  function getId(){
-    return `dndnode_}`+incrementNodeId();
-  };
+	function getId() {
+		return `dndnode_` + incrementNodeId();
+	}
 
-  const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
-  const { setErrorData } = useContext(alertContext);
+	const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
+	const { setErrorData } = useContext(alertContext);
 
-  const [nodes, setNodes, onNodesChange] = useNodesState(
-    flow.data?.nodes ?? []
-  );
-  const [edges, setEdges, onEdgesChange] = useEdgesState(
-    flow.data?.edges ?? []
-  );
-  const {setViewport} = useReactFlow()
+	const [nodes, setNodes, onNodesChange] = useNodesState(
+		flow.data?.nodes ?? []
+	);
+	const [edges, setEdges, onEdgesChange] = useEdgesState(
+		flow.data?.edges ?? []
+	);
+	const { setViewport } = useReactFlow();
 
-  useEffect(() => {
-    if (reactFlowInstance && flow) {
-      flow.data = reactFlowInstance.toObject();
-      updateFlow(flow);
-    }
-  }, [nodes, edges]);
+	useEffect(() => {
+		if (reactFlowInstance && flow) {
+			flow.data = reactFlowInstance.toObject();
+			updateFlow(flow);
+		}
+	}, [nodes, edges]);
 
-  useEffect(() => {
-    setNodes(flow?.data?.nodes ?? []);
-    setEdges(flow?.data?.edges ?? []);
-    if (reactFlowInstance) {
-      setViewport(
-        flow?.data?.viewport ?? { x: 1, y: 0, zoom: 1 }
-      );
-    }
-  }, [flow, reactFlowInstance, setEdges, setNodes]);
+	useEffect(() => {
+		setNodes(flow?.data?.nodes ?? []);
+		setEdges(flow?.data?.edges ?? []);
+		if (reactFlowInstance) {
+			setViewport(flow?.data?.viewport ?? { x: 1, y: 0, zoom: 1 });
+		}
+	}, [flow, reactFlowInstance, setEdges, setNodes]);
 
-  useEffect(() => {
-    setExtraComponent(<ExtraSidebar />);
-    setExtraNavigation({ title: "Nodes" });
-  }, [setExtraComponent, setExtraNavigation]);
+	useEffect(() => {
+		setExtraComponent(<ExtraSidebar />);
+		setExtraNavigation({ title: "Nodes" });
+	}, [setExtraComponent, setExtraNavigation]);
 
-  const onEdgesChangeMod = useCallback(
-    (s) => {
-      onEdgesChange(s);
-      setNodes((x) => {
-        let newX = _.cloneDeep(x);
-        return newX;
-      });
-    },
-    [onEdgesChange, setNodes]
-  );
+	const onEdgesChangeMod = useCallback(
+		(s) => {
+			onEdgesChange(s);
+			setNodes((x) => {
+				let newX = _.cloneDeep(x);
+				return newX;
+			});
+		},
+		[onEdgesChange, setNodes]
+	);
 
-  const onConnect = useCallback(
-    (params) => {
-      setEdges((eds) =>
-        addEdge({ ...params, className: "animate-pulse" }, eds)
-      );
-      setNodes((x) => {
-        let newX = _.cloneDeep(x);
-        return newX;
-      });
-    },
-    [setEdges, setNodes]
-  );
+	const onConnect = useCallback(
+		(params) => {
+			setEdges((eds) =>
+				addEdge({ ...params, className: "animate-pulse" }, eds)
+			);
+			setNodes((x) => {
+				let newX = _.cloneDeep(x);
+				return newX;
+			});
+		},
+		[setEdges, setNodes]
+	);
 
-  const onDragOver = useCallback((event) => {
-    event.preventDefault();
-    event.dataTransfer.dropEffect = "move";
-  }, []);
+	const onDragOver = useCallback((event) => {
+		event.preventDefault();
+		event.dataTransfer.dropEffect = "move";
+	}, []);
 
-  const onDrop = useCallback(
-    (event) => {
-      event.preventDefault();
+	const onDrop = useCallback(
+		(event) => {
+			event.preventDefault();
 
-      const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
-      let data = JSON.parse(event.dataTransfer.getData("json"));
-      if (
-        data.type !== "chatInput" ||
-        (data.type === "chatInput" &&
-          !reactFlowInstance.getNodes().some((n) => n.type === "chatInputNode"))
-      ) {
-        const position = reactFlowInstance.project({
-          x: event.clientX - reactflowBounds.left,
-          y: event.clientY - reactflowBounds.top,
-        });
-        let newId = getId();
+			const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
+			let data = JSON.parse(event.dataTransfer.getData("json"));
+			if (
+				data.type !== "chatInput" ||
+				(data.type === "chatInput" &&
+					!reactFlowInstance.getNodes().some((n) => n.type === "chatInputNode"))
+			) {
+				const position = reactFlowInstance.project({
+					x: event.clientX - reactflowBounds.left,
+					y: event.clientY - reactflowBounds.top,
+				});
+				let newId = getId();
 
-        const newNode = {
-          id: newId,
-          type:
-            data.type === "str"
-              ? "inputNode"
-              : data.type === "chatInput"
-              ? "chatInputNode"
-              : data.type === "chatOutput"
-              ? "chatOutputNode"
-              : data.type === "bool"
-              ? "booleanNode"
-              : "genericNode",
-          position,
-          data: {
-            ...data,
-            id: newId,
-            value: null,
-          },
-        };
-        setNodes((nds) => nds.concat(newNode));
-      } else {
-        setErrorData({
-          title: "Error creating node",
-          list: ["There can't be more than one chat input."],
-        });
-      }
-    },
-    [reactFlowInstance, setErrorData, setNodes]
-  );
+				const newNode = {
+					id: newId,
+					type:
+						data.type === "str"
+							? "inputNode"
+							: data.type === "chatInput"
+							? "chatInputNode"
+							: data.type === "chatOutput"
+							? "chatOutputNode"
+							: data.type === "bool"
+							? "booleanNode"
+							: "genericNode",
+					position,
+					data: {
+						...data,
+						id: newId,
+						value: null,
+					},
+				};
+				setNodes((nds) => nds.concat(newNode));
+			} else {
+				setErrorData({
+					title: "Error creating node",
+					list: ["There can't be more than one chat input."],
+				});
+			}
+		},
+		[reactFlowInstance, setErrorData, setNodes]
+	);
 
-  return (
-    <div className="w-full h-full" ref={reactFlowWrapper}>
-      {Object.keys(types).length > 0 ? (
-        <>
-          <ReactFlow
-            nodes={nodes}
-            onMove={() =>
-              updateFlow({ ...flow, data: reactFlowInstance.toObject() })
-            }
-            edges={edges}
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChangeMod}
-            onConnect={onConnect}
-            onLoad={setReactFlowInstance}
-            onInit={setReactFlowInstance}
-            nodeTypes={nodeTypes}
-            connectionLineComponent={connection}
-            onDragOver={onDragOver}
-            onDrop={onDrop}
-          >
-            <Background />
-            <Controls></Controls>
-          </ReactFlow>
-          <Chat reactFlowInstance={reactFlowInstance} />
-        </>
-      ) : (
-        <></>
-      )}
-    </div>
-  );
+	return (
+		<div className="w-full h-full" ref={reactFlowWrapper}>
+			{Object.keys(types).length > 0 ? (
+				<>
+					<ReactFlow
+						nodes={nodes}
+						onMove={() =>
+							updateFlow({ ...flow, data: reactFlowInstance.toObject() })
+						}
+						edges={edges}
+						onNodesChange={onNodesChange}
+						onEdgesChange={onEdgesChangeMod}
+						onConnect={onConnect}
+						onLoad={setReactFlowInstance}
+						onInit={setReactFlowInstance}
+						nodeTypes={nodeTypes}
+						connectionLineComponent={connection}
+						onDragOver={onDragOver}
+						onDrop={onDrop}
+					>
+						<Background />
+						<Controls>
+							<ControlButton
+								className="text-black hover:text-blue-500"
+								onClick={() => uploadFlow()}
+							>
+								<ArrowUpTrayIcon />
+							</ControlButton>
+
+							<ControlButton
+								className="text-black hover:text-blue-500"
+								onClick={() => downloadFlow()}
+							>
+								<ArrowDownTrayIcon />
+							</ControlButton>
+						</Controls>
+					</ReactFlow>
+					<Chat flow={flow} reactFlowInstance={reactFlowInstance} />
+				</>
+			) : (
+				<></>
+			)}
+		</div>
+	);
 }
diff --git a/space_flow/src/react-app-env.d.ts b/space_flow/src/react-app-env.d.ts
deleted file mode 100644
index 6431bc5fc..000000000
--- a/space_flow/src/react-app-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="react-scripts" />
diff --git a/space_flow/src/setupTests.ts b/space_flow/src/setupTests.ts
deleted file mode 100644
index 7b0828bfa..000000000
--- a/space_flow/src/setupTests.ts
+++ /dev/null
@@ -1 +0,0 @@
-import '@testing-library/jest-dom';