diff --git a/space_flow/src/pages/FlowPage/flowManager/index.tsx b/space_flow/src/pages/FlowPage/flowManager/index.tsx
index 0a64e67f2..55c01389d 100644
--- a/space_flow/src/pages/FlowPage/flowManager/index.tsx
+++ b/space_flow/src/pages/FlowPage/flowManager/index.tsx
@@ -9,10 +9,11 @@ var _ = require("lodash");
 
 export function TabsManager() {
 	const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext);
+  const [inputMode,setInputMode] = useState(false)
 	useEffect(() => {
 		if (flows.length === 0) {
-			addFlow({ name: "untitled", data: null, id: _.uniqueId() });
-			addFlow({ name: "untitle", data: null, id: _.uniqueId() });
+      const id = _.uniqueId()
+			addFlow({ name: "flow "+id, data: null, id });
 		}
 	}, []);
 
@@ -22,12 +23,14 @@ export function TabsManager() {
 				{flows.map((flow, index) => {
           console.log(tabIndex)
 					return (
-						<TabComponent selected={index === tabIndex} key={index} id={flow.id}>
-							<div onClick={() => setTabIndex(index)}>{flow.name}</div>
+						<TabComponent onClick={() => setTabIndex(index)} selected={index === tabIndex} key={index} id={flow.id}>
+							<div onClick={()=>setInputMode(true)}>{flow.name}</div>
 						</TabComponent>
 					);
 				})}
-        <div onClick={()=>addFlow({ name: "untitled", data: null, id: _.uniqueId() })} className="cursor-pointer"><PlusIcon color="black" width={24}></PlusIcon></div>
+        <div onClick={()=>{
+          const id = _.uniqueId()
+          addFlow({ name: "flow"+id, data: null, id})}} className="cursor-pointer"><PlusIcon color="black" width={24}></PlusIcon></div>
 			</div>
 			<div className="w-full h-full">
 				<ReactFlowProvider>
diff --git a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
index 60708c762..2d37e50ec 100644
--- a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
@@ -3,10 +3,10 @@ import { useContext } from "react";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { classNames } from "../../../../utils";
 
-export default function TabComponent({ children, selected, id }) {
+export default function TabComponent({ children, selected, id, onClick}) {
 	const { removeFlow, flows } = useContext(TabsContext);
 	return (
-		<div
+		<div onClick={onClick}
 			className={classNames(
 				selected ? " shadow-lg" : "bg-gray-300",
 				"flex border-t border-l border-r border-black rounded-t-md shadow-sm cursor-pointer"