diff --git a/space_flow/src/components/ExtraSidebarComponent/index.tsx b/space_flow/src/components/ExtraSidebarComponent/index.tsx
index 7f6ef2c4a..6d5a92667 100644
--- a/space_flow/src/components/ExtraSidebarComponent/index.tsx
+++ b/space_flow/src/components/ExtraSidebarComponent/index.tsx
@@ -1,11 +1,13 @@
 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,
     isStackedOpen,
@@ -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">
@@ -122,6 +124,10 @@ 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/contexts/tabsContext.tsx b/space_flow/src/contexts/tabsContext.tsx
index aecaa3f08..e8e15d0a0 100644
--- a/space_flow/src/contexts/tabsContext.tsx
+++ b/space_flow/src/contexts/tabsContext.tsx
@@ -10,7 +10,8 @@ type TabsContextType={
     addFlow:(flowData?:any)=>void;
     updateFlow:(newFlow:flow)=>void;
     incrementNodeId:()=>number,
-    downloadFlow:()=>void
+    downloadFlow:()=>void,
+    uploadFlow:()=>void
 }
 
 const TabsContextInitialValue = {
@@ -21,7 +22,8 @@ const TabsContextInitialValue = {
     addFlow:(flowData?:any)=>{},
     updateFlow:(newFlow:flow)=>{},
     incrementNodeId:()=>0,
-    downloadFlow:()=>{}
+    downloadFlow:()=>{},
+    uploadFlow:()=>{}
 
 }
 
@@ -62,6 +64,18 @@ export function TabsProvider({children}){
         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 =>addFlow(JSON.parse(text))) 
+            }
+        }
+        input.click()
+        
+    }
     
     function removeFlow(id:string){
         setFlows(prevState=>{
@@ -82,8 +96,8 @@ export function TabsProvider({children}){
         });
     }
     function addFlow(flowData?:flow) {
-        const data = flowData?flowData:null
-        let newFlow: flow = {name: "flow"+id, id: id.toString(), data,chat:[]}
+        const data = flowData?.data?flowData:null
+        let newFlow: flow = {name:flowData?flowData.name:"flow"+id, id: id.toString(), data,chat:flowData?flowData.chat:[]}
         setId((old) => old+1);
         setFlows(prevState => {
             const newFlows = [...prevState, newFlow];
@@ -106,7 +120,7 @@ export function TabsProvider({children}){
     }
 
     return(
-        <TabsContext.Provider value={{tabIndex,setTabIndex,flows,incrementNodeId, removeFlow,addFlow,updateFlow, downloadFlow}}>
+        <TabsContext.Provider value={{tabIndex,setTabIndex,flows,incrementNodeId, removeFlow,addFlow,updateFlow, downloadFlow, uploadFlow}}>
             {children}
         </TabsContext.Provider>
     )
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}