diff --git a/space_flow/src/pages/FlowPage/flowManager/index.tsx b/space_flow/src/pages/FlowPage/flowManager/index.tsx
index ce978a2a4..925a75f3e 100644
--- a/space_flow/src/pages/FlowPage/flowManager/index.tsx
+++ b/space_flow/src/pages/FlowPage/flowManager/index.tsx
@@ -4,39 +4,47 @@ import { ReactFlowProvider } from "reactflow";
 import FlowPage from "..";
 import { TabsContext } from "../../../contexts/tabsContext";
 import TabComponent from "./tabComponent";
-import { PlusIcon } from '@heroicons/react/24/outline';
+import { PlusIcon } from "@heroicons/react/24/outline";
 var _ = require("lodash");
 
 export function TabsManager() {
-	const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext);
-  const [inputMode,setInputMode] = useState(false)
-	useEffect(() => {
-		if (flows.length === 0) {
-      const id = _.uniqueId()
-			addFlow({ name: "flow "+id, data: null, id });
-		}
-	}, []);
+  const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext);
+  useEffect(() => {
+    if (flows.length === 0) {
+      const id = _.uniqueId();
+      addFlow({ name: "flow " + id, data: null, id });
+    }
+  }, []);
 
-	return (
-		<div className="h-full w-full flex flex-col">
-			<div className="w-full flex pr-2 flex-row text-center items-center">
-				{flows.map((flow, index) => {
-          console.log(tabIndex)
-					return (
-						<TabComponent onClick={() => setTabIndex(index)} selected={index === tabIndex} key={index} id={flow.id}>
-							<div onClick={()=>setInputMode(true)}>{flow.name}</div>
-						</TabComponent>
-					);
-				})}
-        <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>
-					<FlowPage flow={flows[tabIndex]}></FlowPage>
-				</ReactFlowProvider>
-			</div>
-		</div>
-	);
+  return (
+    <div className="h-full w-full flex flex-col">
+      <div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100">
+        {flows.map((flow, index) => {
+          console.log(tabIndex);
+          return (
+            <TabComponent
+              onClick={() => setTabIndex(index)}
+              selected={index === tabIndex}
+              key={index}
+              flow={flow}
+            />
+          );
+        })}
+        <TabComponent
+          onClick={() => {
+            const id = _.uniqueId();
+            addFlow({ name: "flow" + id, data: null, id });
+          }}
+          selected={false}
+          key={0}
+          flow={null}
+        />
+      </div>
+      <div className="w-full h-full">
+        <ReactFlowProvider>
+          <FlowPage flow={flows[tabIndex]}></FlowPage>
+        </ReactFlowProvider>
+      </div>
+    </div>
+  );
 }
diff --git a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
index b19dd03c4..3cdaf6b8b 100644
--- a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
@@ -1,31 +1,49 @@
 import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
 import { useContext } from "react";
 import { TabsContext } from "../../../../contexts/tabsContext";
-import { classNames } from "../../../../utils";
 
-export default function TabComponent({ selected, flow, id, onClick}) {
-	const { removeFlow, flows } = useContext(TabsContext);
-	return (
-		<>
+export default function TabComponent({ selected, flow, onClick }) {
+  const { removeFlow } = useContext(TabsContext);
+  return (
+    <>
       {flow ? (
-        selected ? (
-          <button
-            className="px-4 my-2 mt-3 border-l border-gray-300 -ml-px"
+        !selected ? (
+          <div
+            className="flex justify-between select-none w-36 items-center px-4 my-2 mt-3 border-x border-gray-300 -ml-px"
             onClick={onClick}
           >
             {flow.name}
-          </button>
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                removeFlow(flow.id);
+              }}
+            >
+              <XMarkIcon className="h-4" />
+            </button>
+          </div>
         ) : (
-          <div className="bg-white pt-3 pointer-events-none border border-b-0 border-gray-300 px-4 py-2 rounded-t-xl">
+          <div className="bg-white flex select-none justify-between w-36 items-center pt-3 border border-b-0 border-gray-300 px-4 py-2 rounded-t-xl -ml-px">
             {flow.name}
+            <button
+              onClick={() => {
+                removeFlow(flow.id);
+              }}
+            >
+              <XMarkIcon className="h-4" />
+            </button>
           </div>
         )
       ) : (
         <div className="h-full py-2 pt-3 flex justify-center items-center">
-          <button className="px-3 h-full border-l border-gray-300 -ml-px">
+          <button
+            className="px-3 h-full border-gray-300 -ml-px"
+            onClick={onClick}
+          >
             <PlusIcon className="h-5" />
           </button>
         </div>
       )}
     </>
-    )}
\ No newline at end of file
+  );
+}