diff --git a/README.md b/README.md
index 60693f0b1..8de32742a 100644
--- a/README.md
+++ b/README.md
@@ -34,6 +34,18 @@ Creating flows with LangFlow is easy. Simply drag sidebar components onto the ca
 
 Explore by editing prompt parameters, link chains and agents, track an agent's thought process, and export your flow.
 
+Once you're done, you can export your flow as a JSON file to use with LangChain.
+To do so, click the "Export" button in the top right corner of the canvas, then
+in Python, you can load the flow with:
+
+```python
+from langflow import load_flow_from_json
+
+flow = load_flow_from_json("path/to/flow.json")
+# Now you can use it like any chain
+flow("Hey, have you heard of LangFlow?")
+```
+
 
 ## 👋 Contributing
 
diff --git a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
index 6b2e05b08..6396b753f 100644
--- a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
@@ -4,17 +4,24 @@ import TabComponent from "../tabComponent";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import FlowPage from "../..";
 import { darkContext } from "../../../../contexts/darkContext";
-import { BellIcon, MoonIcon, SunIcon } from "@heroicons/react/24/outline";
+import {
+	ArrowDownTrayIcon,
+	ArrowUpTrayIcon,
+	BellIcon,
+	MoonIcon,
+	SunIcon,
+} from "@heroicons/react/24/outline";
 import { PopUpContext } from "../../../../contexts/popUpContext";
 import AlertDropdown from "../../../../alerts/alertDropDown";
 import { alertContext } from "../../../../contexts/alertContext";
 
 export default function TabsManagerComponent() {
-	const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext);
+	const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } = useContext(TabsContext);
 	const { openPopUp } = useContext(PopUpContext);
-	const AlertWidth = 256
+	const AlertWidth = 256;
 	const { dark, setDark } = useContext(darkContext);
-	const {notificationCenter, setNotificationCenter} = useContext(alertContext)
+	const { notificationCenter, setNotificationCenter } =
+		useContext(alertContext);
 	useEffect(() => {
 		//create the first flow
 		if (flows.length === 0) {
@@ -43,6 +50,12 @@ export default function TabsManagerComponent() {
 					flow={null}
 				/>
 				<div className="ml-auto mr-2 flex gap-3">
+					<button onClick={() => uploadFlow()} className="flex items-center gap-1 text-gray-400 hover:text-gray-500">
+						Import <ArrowUpTrayIcon className="w-5 h-5" />
+					</button>
+					<button onClick={() => downloadFlow()} className="flex items-center gap-1 text-gray-400 hover:text-gray-500">
+						Export <ArrowDownTrayIcon className="h-5 w-5" />
+					</button>
 					<button
 						className="text-gray-400 hover:text-gray-500 "
 						onClick={() => {
@@ -58,13 +71,23 @@ export default function TabsManagerComponent() {
 					<button
 						className="text-gray-400 hover:text-gray-500 relative"
 						onClick={(event: React.MouseEvent<HTMLElement>) => {
-							setNotificationCenter(false)
-							const top = (event.target as Element).getBoundingClientRect().top
-							const left = (event.target as Element).getBoundingClientRect().left
-							openPopUp(<div className="z-10 absolute" style={{top:top+20, left:left-AlertWidth}}><AlertDropdown/></div>)
+							setNotificationCenter(false);
+							const top = (event.target as Element).getBoundingClientRect().top;
+							const left = (event.target as Element).getBoundingClientRect()
+								.left;
+							openPopUp(
+								<div
+									className="z-10 absolute"
+									style={{ top: top + 20, left: left - AlertWidth }}
+								>
+									<AlertDropdown />
+								</div>
+							);
 						}}
 					>
-						{notificationCenter&&<div className='absolute w-1.5 h-1.5 rounded-full bg-red-600 right-[3px]'></div>}
+						{notificationCenter && (
+							<div className="absolute w-1.5 h-1.5 rounded-full bg-red-600 right-[3px]"></div>
+						)}
 						<BellIcon className="h-5 w-5" aria-hidden="true" />
 					</button>
 				</div>
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index 2cf11574f..6471621af 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -182,17 +182,6 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
 					>
 						<Background className="dark:bg-gray-900"/>
 						<Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600">
-							<ControlButton
-								onClick={() => uploadFlow()}
-							>
-								<ArrowUpTrayIcon />
-							</ControlButton>
-
-							<ControlButton
-								onClick={() => downloadFlow()}
-							>
-								<ArrowDownTrayIcon />
-							</ControlButton>
 						</Controls>
 					</ReactFlow>
 					<Chat flow={flow} reactFlowInstance={reactFlowInstance} />