diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx
index cca4e3df1..c878aead7 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 dark:border-slate-700 flex">
+				<main className="min-w-0 flex-1 border-t border-gray-200 dark:border-gray-700 flex">
 					{/* Primary column */}
 					<div className="w-full h-full">
 						<TabsManagerComponent></TabsManagerComponent>
diff --git a/space_flow/src/CustomNodes/BooleanNode/index.tsx b/space_flow/src/CustomNodes/BooleanNode/index.tsx
index db4fd4e4f..707680964 100644
--- a/space_flow/src/CustomNodes/BooleanNode/index.tsx
+++ b/space_flow/src/CustomNodes/BooleanNode/index.tsx
@@ -10,8 +10,8 @@ export default function BooleanNode({ data }) {
   const [enabled, setEnabled] = useState(false);
   const {types, deleteNode} = useContext(typesContext);
   return (
-    <div className="prompt-node relative bg-white dark:bg-slate-900 rounded-lg solid border dark:border-slate-700 flex flex-col justify-center">
-      <div className="w-full flex items-center justify-between gap-8 p-4 bg-gray-50 dark:bg-slate-800 dark:text-white dark:border-b-slate-700 border-b ">
+    <div className="prompt-node relative bg-white dark:bg-gray-900 rounded-lg solid border dark:border-gray-700 flex flex-col justify-center">
+      <div className="w-full flex items-center justify-between gap-8 p-4 bg-gray-50 dark:bg-gray-800 dark:text-white dark:border-b-gray-700 border-b ">
         <div className="flex items-center gap-4 text-lg">
           <CheckCircleIcon
             className="w-10 h-10 p-1 rounded"
@@ -35,7 +35,7 @@ export default function BooleanNode({ data }) {
         position={Position.Right}
         id={data.type}
         isValidConnection={(connection) => isValidConnection(data,connection)}
-        className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
+        className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"}
         style={{
           borderColor: nodeColors[types[data.type]],
         }}
diff --git a/space_flow/src/CustomNodes/ChatInputNode/index.tsx b/space_flow/src/CustomNodes/ChatInputNode/index.tsx
index e74071bb4..66cd8e51a 100644
--- a/space_flow/src/CustomNodes/ChatInputNode/index.tsx
+++ b/space_flow/src/CustomNodes/ChatInputNode/index.tsx
@@ -13,7 +13,7 @@ export default function ChatInputNode({ data }) {
   const { types } = useContext(typesContext);
   return (
     <div
-      className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50 dark:bg-slate-800 dark:border-slate-700"
+      className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50 dark:bg-gray-800 dark:border-gray-700"
       style={{ color: nodeColors[types[data.type]] }}
     >
       <Tooltip title="Prefix: str">
@@ -24,7 +24,7 @@ export default function ChatInputNode({ data }) {
           }
           position={Position.Left}
           id={"str|Prefix|" + data.id}
-          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
+          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"}
           style={{
             borderColor: nodeColors[types[data.type]],
           }}
@@ -38,7 +38,7 @@ export default function ChatInputNode({ data }) {
           }
           position={Position.Right}
           id={"str|str|" + data.id}
-          className={"-mr-0.5  w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
+          className={"-mr-0.5  w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"}
           style={{
             borderColor: nodeColors[types[data.type]],
           }}
diff --git a/space_flow/src/CustomNodes/ChatOutputNode/index.tsx b/space_flow/src/CustomNodes/ChatOutputNode/index.tsx
index c8ffbab79..48836d760 100644
--- a/space_flow/src/CustomNodes/ChatOutputNode/index.tsx
+++ b/space_flow/src/CustomNodes/ChatOutputNode/index.tsx
@@ -9,14 +9,14 @@ import { typesContext } from "../../contexts/typesContext";
 export default function ChatOutputNode({ data }) {
   const {types} = useContext(typesContext);
   return (
-    <div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50 dark:bg-slate-800 dark:border-slate-700" style={{color: nodeColors[types[data.type]]}}>
+    <div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50 dark:bg-gray-800 dark:border-gray-700" style={{color: nodeColors[types[data.type]]}}>
       <Tooltip title="Message: str">
         <Handle
           type="target"
           isValidConnection={(connection) => isValidConnection(data,connection)}
           position={Position.Left}
           id={"str|output|"+data.id}
-          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"
+          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
           }
           style={{
             borderColor: nodeColors[types[data.type]],
diff --git a/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index fa86811b2..4864d0aa4 100644
--- a/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -43,7 +43,7 @@ export default function ParameterComponent({
   let disabled = reactFlowInstance?.getEdges().some((e) => (e.targetHandle === id)) ?? false;
 
   return (
-    <div ref={ref} className="w-full flex flex-wrap justify-between items-center bg-gray-50 dark:bg-slate-800 dark:text-white mt-1 px-5 py-2">
+    <div ref={ref} className="w-full flex flex-wrap justify-between items-center bg-gray-50 dark:bg-gray-800 dark:text-white mt-1 px-5 py-2">
       <>
         <div className="text-sm truncate">{title}<span className="text-red-600">{required ? " *" : ""}</span></div>
         <Tooltip title={tooltipTitle + (required ? " (required)" : "")}>
@@ -56,7 +56,7 @@ export default function ParameterComponent({
             }
             className={
               (left ? "-ml-0.5 " : "-mr-0.5 ") +
-              "w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"
+              "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
             }
             style={{
               borderColor: color,
diff --git a/space_flow/src/CustomNodes/GenericNode/index.tsx b/space_flow/src/CustomNodes/GenericNode/index.tsx
index d046746ab..dde32a486 100644
--- a/space_flow/src/CustomNodes/GenericNode/index.tsx
+++ b/space_flow/src/CustomNodes/GenericNode/index.tsx
@@ -16,8 +16,8 @@ export default function GenericNode({ data }) {
 
 
   return (
-    <div className="prompt-node relative bg-white dark:bg-slate-900 w-96 rounded-lg solid border dark:border-slate-700 flex flex-col justify-center">
-      <div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-slate-800 border-b dark:border-b-slate-700 ">
+    <div className="prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg solid border dark:border-gray-700 flex flex-col justify-center">
+      <div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-gray-800 border-b dark:border-b-gray-700 ">
         <div className="w-full flex items-center truncate gap-4 text-lg">
           <Icon
             className="w-10 h-10 p-1 rounded"
@@ -26,7 +26,7 @@ export default function GenericNode({ data }) {
           <div className="truncate">{data.type}</div>
         </div>
         <button onClick={() => {deleteNode(data.id)}}>
-          <TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-slate-500 dark:hover:text-red-500"></TrashIcon>
+          <TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-500"></TrashIcon>
         </button>
       </div>
 
diff --git a/space_flow/src/CustomNodes/InputNode/index.tsx b/space_flow/src/CustomNodes/InputNode/index.tsx
index 21031049f..dfda0edaf 100644
--- a/space_flow/src/CustomNodes/InputNode/index.tsx
+++ b/space_flow/src/CustomNodes/InputNode/index.tsx
@@ -15,7 +15,7 @@ import TextAreaComponent from "../../components/textAreaComponent";
 export default function InputNode({ data }) {
   const {types, deleteNode} = useContext(typesContext);
   return (
-    <div className="prompt-node relative bg-white dark:bg-slate-900 w-96 rounded-lg solid border dark:border-slate-700 flex flex-col justify-center">
+    <div className="prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg solid border dark:border-gray-700 flex flex-col justify-center">
       <Tooltip title="Prefix: str">
         <Handle
           type="target"
@@ -24,14 +24,14 @@ export default function InputNode({ data }) {
           isValidConnection={(connection) =>
             isValidConnection(data, connection)
           }
-          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
+          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"}
           style={{
             borderColor: nodeColors[types[data.type]],
           }}
         ></Handle>
       </Tooltip>
 
-      <div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 dark:bg-slate-800 dark:text-white border-b dark:border-b-slate-700 ">
+      <div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 dark:bg-gray-800 dark:text-white border-b dark:border-b-gray-700 ">
         <div className="flex items-center gap-4 text-lg">
           <Bars3CenterLeftIcon
             className="w-10 h-10 p-1 rounded"
@@ -62,7 +62,7 @@ export default function InputNode({ data }) {
         position={Position.Right}
         id={data.type}
         isValidConnection={(connection) => isValidConnection(data, connection)}
-        className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
+        className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"}
         style={{
           borderColor: nodeColors[types[data.type]],
         }}
diff --git a/space_flow/src/alerts/alertDropDown/index.tsx b/space_flow/src/alerts/alertDropDown/index.tsx
index 87ecb5478..e8cb279e2 100644
--- a/space_flow/src/alerts/alertDropDown/index.tsx
+++ b/space_flow/src/alerts/alertDropDown/index.tsx
@@ -67,7 +67,7 @@ export default function AlertDropdown({closeFunction, open}: AlertDropdownProps)
             <SingleAlert key={index} dropItem={alertItem} removeAlert={removeFromNotificationList} />
           ))
         :
-        <div className="h-full w-full pb-16 text-slate-500 flex justify-center items-center">
+        <div className="h-full w-full pb-16 text-gray-500 flex justify-center items-center">
           No new notifications
           </div>
         }
diff --git a/space_flow/src/components/ExtraSidebarComponent/index.tsx b/space_flow/src/components/ExtraSidebarComponent/index.tsx
index 1f16098e0..ff15e8973 100644
--- a/space_flow/src/components/ExtraSidebarComponent/index.tsx
+++ b/space_flow/src/components/ExtraSidebarComponent/index.tsx
@@ -20,9 +20,9 @@ export default function ExtraSidebar() {
       <aside
         className={` ${
           isStackedOpen ? "w-60" : "w-0 "
-        } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-slate-700 transition-all duration-500`}
+        } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`}
       >
-        <div className="w-60 dark:bg-slate-800 border dark:border-slate-700  overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
+        <div className="w-60 dark:bg-gray-800 border dark:border-gray-700  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 dark:text-white text-lg ml-2 font-semibold">
               {extraNavigation.title}
diff --git a/space_flow/src/components/HeaderComponent/index.tsx b/space_flow/src/components/HeaderComponent/index.tsx
index 58cf48633..83ecf204b 100644
--- a/space_flow/src/components/HeaderComponent/index.tsx
+++ b/space_flow/src/components/HeaderComponent/index.tsx
@@ -28,7 +28,7 @@ export default function Header({user, userNavigation}){
   })
   const {dark, setDark} = useContext(darkContext);
     return (
-    <header className="relative flex h-16 w-full shrink-0 items-center bg-white dark:bg-slate-800">
+    <header className="relative flex h-16 w-full shrink-0 items-center bg-white dark:bg-gray-800">
         {/* Logo area */}
         <div className="static shrink-0">
           <a
diff --git a/space_flow/src/components/SidebarComponent/index.tsx b/space_flow/src/components/SidebarComponent/index.tsx
index 8d413ae98..83e59a1d0 100644
--- a/space_flow/src/components/SidebarComponent/index.tsx
+++ b/space_flow/src/components/SidebarComponent/index.tsx
@@ -21,7 +21,7 @@ export default function Sidebar() {
       <div className="w-20 h-full">
         <nav
           aria-label="Sidebar"
-          className="h-full overflow-y-auto bg-slate-800 dark:bg-slate-900"
+          className="h-full overflow-y-auto bg-gray-800 dark:bg-gray-900"
         >
           <div className="flex flex-col h-full justify-between">
             <div className="relative flex w-20 flex-col space-y-3 p-3">
diff --git a/space_flow/src/components/chatComponent/index.tsx b/space_flow/src/components/chatComponent/index.tsx
index 9668346b0..51809c10c 100644
--- a/space_flow/src/components/chatComponent/index.tsx
+++ b/space_flow/src/components/chatComponent/index.tsx
@@ -88,8 +88,8 @@ export default function Chat({flow, reactFlowInstance }) {
         leaveTo="translate-y-96"
       >
         <div className="w-[400px] absolute bottom-0 right-6">
-          <div className="border dark:border-slate-700 h-full rounded-xl rounded-b-none bg-white dark:bg-slate-800 shadow">
-            <div className="flex justify-between items-center px-5 py-3 border-b dark:border-b-slate-700">
+          <div className="border dark:border-gray-700 h-full rounded-xl rounded-b-none bg-white dark:bg-gray-800 shadow">
+            <div className="flex justify-between items-center px-5 py-3 border-b dark:border-b-gray-700">
               <div className="flex gap-3 text-xl dark:text-white font-medium items-center">
                 <Bars3CenterLeftIcon className="h-8 w-8 mt-1" style={{color: nodeColors['chat']}} />
                 Chat
@@ -102,7 +102,7 @@ export default function Chat({flow, reactFlowInstance }) {
                 <XMarkIcon className="h-6 w-6 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
               </button>
             </div>
-            <div  className="w-full h-[400px] flex gap-3 mb-auto overflow-y-auto scrollbar-hide flex-col bg-gray-50 dark:bg-slate-900 p-3 py-5">
+            <div  className="w-full h-[400px] flex gap-3 mb-auto overflow-y-auto scrollbar-hide flex-col bg-gray-50 dark:bg-gray-900 p-3 py-5">
               {chatHistory.map((c, i) => (
                 <div key={i}>
                   {!c.isSend ? (
@@ -113,7 +113,7 @@ export default function Chat({flow, reactFlowInstance }) {
                     </div>
                   ) : (
                     <div className="w-full text-start">
-                      <div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-slate-700 bg-gray-200 font-normal rounded-tl-none">
+                      <div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-gray-700 bg-gray-200 font-normal rounded-tl-none">
                         {c.message}
                       </div>
                     </div>
@@ -122,7 +122,7 @@ export default function Chat({flow, reactFlowInstance }) {
               ))}
               <div ref={ref}></div>
             </div>
-            <div className="w-full bg-white dark:bg-slate-800 border-t dark:border-t-slate-600 flex items-center justify-between p-3">
+            <div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex items-center justify-between p-3">
               <div className="relative w-full mt-1 rounded-md shadow-sm">
                 <input
                 onKeyDown={(event)=>{
@@ -135,7 +135,7 @@ export default function Chat({flow, reactFlowInstance }) {
                   onChange={(e) => {
                     setChatValue(e.target.value);
                   }}
-                  className="form-input block w-full rounded-md border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-white pr-10 sm:text-sm"
+                  className="form-input block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white pr-10 sm:text-sm"
                   placeholder="Send a message..."
                 />
                 <div className="absolute inset-y-0 right-0 flex items-center pr-3">
@@ -164,7 +164,7 @@ export default function Chat({flow, reactFlowInstance }) {
         leaveTo="translate-y-96"
       >
         <div className="absolute bottom-0 right-6">
-          <div className="border flex justify-center align-center py-2 px-4 rounded-xl rounded-b-none bg-white dark:bg-slate-800 dark:border-slate-600 dark:text-white shadow">
+          <div className="border flex justify-center align-center py-2 px-4 rounded-xl rounded-b-none bg-white dark:bg-gray-800 dark:border-gray-600 dark:text-white shadow">
             <button
               onClick={() => {
                 setOpen(true);
diff --git a/space_flow/src/components/inputComponent/index.tsx b/space_flow/src/components/inputComponent/index.tsx
index 87ea3bb06..bf0d0a813 100644
--- a/space_flow/src/components/inputComponent/index.tsx
+++ b/space_flow/src/components/inputComponent/index.tsx
@@ -13,7 +13,7 @@ export default function InputComponent({value, onChange, disabled}){
             <input
             type="text"
             value={myValue}
-            className={"block w-full form-input dark:bg-slate-900 dark:border-slate-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200 dark:bg-slate-700" : "")}
+            className={"block w-full form-input dark:bg-gray-900 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200 dark:bg-gray-700" : "")}
             placeholder="Type a text"
             onChange={(e) => {
                 setMyValue(e.target.value);
diff --git a/space_flow/src/components/textAreaComponent/index.tsx b/space_flow/src/components/textAreaComponent/index.tsx
index 31aba2c64..1d8414f05 100644
--- a/space_flow/src/components/textAreaComponent/index.tsx
+++ b/space_flow/src/components/textAreaComponent/index.tsx
@@ -17,7 +17,7 @@ export default function TextAreaComponent({ value, onChange, disabled }) {
       <div className="w-full flex items-center gap-3">
         <span
           className={
-            "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-slate-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+            "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
             (disabled ? " bg-gray-200" : "")
           }
         >
diff --git a/space_flow/src/components/toggleComponent/index.tsx b/space_flow/src/components/toggleComponent/index.tsx
index 744ee535f..01a3bc528 100644
--- a/space_flow/src/components/toggleComponent/index.tsx
+++ b/space_flow/src/components/toggleComponent/index.tsx
@@ -16,7 +16,7 @@ export default function ToggleComponent({ enabled, setEnabled, disabled }) {
           setEnabled(x);
         }}
         className={classNames(
-          enabled ? "bg-indigo-600" : "bg-gray-200 dark:bg-slate-600",
+          enabled ? "bg-indigo-600" : "bg-gray-200 dark:bg-gray-600",
           "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out "
         )}
       >
@@ -24,7 +24,7 @@ export default function ToggleComponent({ enabled, setEnabled, disabled }) {
         <span
           className={classNames(
             enabled ? "translate-x-5" : "translate-x-0",
-            "pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out", disabled ? "bg-gray-200 dark:bg-slate-600" : "bg-white dark:bg-slate-800"
+            "pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out", disabled ? "bg-gray-200 dark:bg-gray-600" : "bg-white dark:bg-gray-800"
           )}
         >
           <span
diff --git a/space_flow/src/modals/textAreaModal/index.tsx b/space_flow/src/modals/textAreaModal/index.tsx
index a94571c6f..897bf301b 100644
--- a/space_flow/src/modals/textAreaModal/index.tsx
+++ b/space_flow/src/modals/textAreaModal/index.tsx
@@ -32,7 +32,7 @@ export default function TextAreaModal({value, setValue}){
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 dark:bg-slate-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -46,7 +46,7 @@ export default function TextAreaModal({value, setValue}){
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-slate-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
                 <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                   <button
                     type="button"
@@ -61,7 +61,7 @@ export default function TextAreaModal({value, setValue}){
                 </div>
                 <div className="h-full w-full flex flex-col justify-center items-center">
                   <div className="flex w-full pb-6 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-8 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-slate-900 sm:mx-0 sm:h-10 sm:w-10">
+                    <div className="mx-auto mt-8 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
                       <ClipboardDocumentListIcon
                         className="h-6 w-6 text-blue-600"
                         aria-hidden="true"
@@ -76,14 +76,14 @@ export default function TextAreaModal({value, setValue}){
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-gray-200 dark:bg-slate-900 p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
                     <div className="flex h-full w-full">
-                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-slate-800 shadow">
-                        <textarea ref={ref} className="form-input h-full w-full rounded-lg border-gray-300 dark:border-slate-700 dark:bg-slate-900 dark:text-white" value={myValue} onChange={(e) => {setMyValue(e.target.value); setValue(e.target.value)}}/>
+                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-gray-800 shadow">
+                        <textarea ref={ref} className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white" value={myValue} onChange={(e) => {setMyValue(e.target.value); setValue(e.target.value)}}/>
                       </div>
                     </div>
                   </div>
-                  <div className="bg-gray-200 dark:bg-slate-900 w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
                       className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
diff --git a/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index 78f8b1c4c..ba9bb5636 100644
--- a/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -19,7 +19,7 @@ export default function DisclosureComponent({
       {({ open }) => (
         <>
           <div>
-            <div className="select-none bg-gray-50 dark:bg-slate-700 dark:border-y-slate-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
+            <div className="select-none bg-gray-50 dark:bg-gray-700 dark:border-y-gray-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
               <div className="flex gap-4">
                 <Icon className="w-6 text-gray-800 dark:text-white" />
                 <span className="flex items-center text-sm text-gray-800 dark:text-white font-medium">
diff --git a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 83ac8be87..35c1935a7 100644
--- a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -69,9 +69,9 @@ export default function ExtraSidebar() {
                     })
                   }
                 >
-                  <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 dark:border-slate-600 border-l-0 rounded-md rounded-l-none border-2">
+                  <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border-2">
                     <span className="text-black dark:text-white w-36 truncate">{t}</span>
-                    <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
+                    <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
                   </div>
                 </div>
               </div>
@@ -94,9 +94,9 @@ export default function ExtraSidebar() {
                 })
               }
             >
-              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 dark:border-slate-600 border-l-0 rounded-md rounded-l-none border-2">
+              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border-2">
                 <span className="text-black dark:text-white w-36 truncate">Chat Input</span>
-                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
+                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
               </div>
             </div>
           </div>
@@ -111,9 +111,9 @@ export default function ExtraSidebar() {
                 })
               }
             >
-              <div className="flex w-full justify-between text-sm px-4 py-3 items-center dark:border-slate-600 border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
+              <div className="flex w-full justify-between text-sm px-4 py-3 items-center dark:border-gray-600 border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
                 <span className="text-black dark:text-white w-36 truncate">Chat Output</span>
-                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
+                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
               </div>
             </div>
           </div>
@@ -134,9 +134,9 @@ export default function ExtraSidebar() {
                 })
               }
             >
-              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed dark:border-slate-600 border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
+              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed dark:border-gray-600 border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
                 <span className="text-black dark:text-white w-36 truncate">String</span>
-                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
+                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
               </div>
             </div>
           </div>
@@ -151,9 +151,9 @@ export default function ExtraSidebar() {
                 })
               }
             >
-              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed dark:border-slate-600 border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
+              <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed dark:border-gray-600 border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
                 <span className="text-black dark:text-white w-36 truncate">Boolean</span>
-                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
+                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
               </div>
             </div>
           </div>
diff --git a/space_flow/src/pages/FlowPage/components/tabComponent/index.tsx b/space_flow/src/pages/FlowPage/components/tabComponent/index.tsx
index 6eb76881d..e7e0b5bbe 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="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"
+						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-gray-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 dark:hover:bg-slate-600 rounded-full" />
+							<XMarkIcon className="h-4 hover:bg-white dark:hover:bg-gray-600 rounded-full" />
 						</button>
 					</div>
 				) : (
-					<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">
+					<div className="bg-white dark:text-white dark:bg-gray-700 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-gray-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 dark:hover:bg-slate-600 rounded-full" />
+								<XMarkIcon className="h-4 hover:bg-gray-100 dark:hover:bg-gray-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-x-gray-300 dark:border-x-slate-600 dark:text-white -ml-px"
+						className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-x-gray-300 dark:border-x-gray-600 dark:text-white -ml-px"
 						onClick={onClick}
 					>
-						<PlusIcon className="h-5 rounded-full hover:bg-white dark:hover:bg-slate-600" />
+						<PlusIcon className="h-5 rounded-full hover:bg-white dark:hover:bg-gray-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 81f19a69d..d63ac1e0c 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 dark:bg-slate-800 px-2">
+      <div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 dark:bg-gray-800 px-2">
         {flows.map((flow, index) => {
           return (
             <TabComponent
diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx
index e7c812449..c31fec035 100644
--- a/space_flow/src/pages/FlowPage/index.tsx
+++ b/space_flow/src/pages/FlowPage/index.tsx
@@ -174,8 +174,8 @@ export default function FlowPage({ flow }) {
 						onDragOver={onDragOver}
 						onDrop={onDrop}
 					>
-						<Background className="dark:bg-slate-900"/>
-						<Controls className="[&>button]:text-black  [&>button]:dark:bg-slate-800 hover:[&>button]:dark:bg-slate-700 [&>button]:dark:text-slate-400 [&>button]:dark:fill-slate-400 [&>button]:dark:border-slate-600">
+						<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()}
 							>