diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx
index a4ee9227f..3cfb3a582 100644
--- a/space_flow/src/App.tsx
+++ b/space_flow/src/App.tsx
@@ -105,7 +105,7 @@ export default function App() {
 				<ExtraSidebar />
 
 				{/* Main area */}
-				<main className="min-w-0 flex-1 border-t border-gray-200 flex">
+				<main className="min-w-0 flex-1 border-t border-gray-200 dark:border-slate-700 flex">
 					{/* Primary column */}
 					<div className="w-full h-full">
 						<TabsManagerComponent></TabsManagerComponent>
diff --git a/space_flow/src/pages/FlowPage/components/tabComponent/index.tsx b/space_flow/src/pages/FlowPage/components/tabComponent/index.tsx
index 49a505a73..6eb76881d 100644
--- a/space_flow/src/pages/FlowPage/components/tabComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/components/tabComponent/index.tsx
@@ -15,7 +15,7 @@ export default function TabComponent({ selected, flow, onClick }) {
 			{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"
+						className="dark:text-white flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-x-gray-300 dark:border-x-slate-600 -ml-px"
 						onClick={onClick}
 					>
 						{flow.name}
@@ -25,11 +25,11 @@ export default function TabComponent({ selected, flow, onClick }) {
 								removeFlow(flow.id);
 							}}
 						>
-							<XMarkIcon className="h-4 hover:bg-white rounded-full" />
+							<XMarkIcon className="h-4 hover:bg-white dark:hover:bg-slate-600 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">
+					<div className="bg-white dark:text-white dark:bg-slate-700 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-slate-600 px-4 py-1.5 rounded-t-xl -ml-px">
 						{isRename ? (
 							<input
 								autoFocus
@@ -70,7 +70,7 @@ export default function TabComponent({ selected, flow, onClick }) {
 							}}
 						>
 							{flows.length > 1 && (
-								<XMarkIcon className="h-4 hover:bg-gray-100 rounded-full" />
+								<XMarkIcon className="h-4 hover:bg-gray-100 dark:hover:bg-slate-600 rounded-full" />
 							)}
 						</button>
 					</div>
@@ -78,10 +78,10 @@ export default function TabComponent({ selected, flow, onClick }) {
 			) : (
 				<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"
+						className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-x-gray-300 dark:border-x-slate-600 dark:text-white -ml-px"
 						onClick={onClick}
 					>
-						<PlusIcon className="h-5 rounded-full hover:bg-white" />
+						<PlusIcon className="h-5 rounded-full hover:bg-white dark:hover:bg-slate-600" />
 					</button>
 				</div>
 			)}
diff --git a/space_flow/src/pages/FlowPage/components/tabsManagerComponent/index.tsx b/space_flow/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
index 4840a0778..81f19a69d 100644
--- a/space_flow/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
@@ -14,7 +14,7 @@ export default function TabsManagerComponent() {
 
   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 px-2">
+      <div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 dark:bg-slate-800 px-2">
         {flows.map((flow, index) => {
           return (
             <TabComponent