diff --git a/space_flow/src/components/ExtraSidebarComponent/index.tsx b/space_flow/src/components/ExtraSidebarComponent/index.tsx
index 8f2220cd0..1f16098e0 100644
--- a/space_flow/src/components/ExtraSidebarComponent/index.tsx
+++ b/space_flow/src/components/ExtraSidebarComponent/index.tsx
@@ -20,11 +20,11 @@ export default function ExtraSidebar() {
       <aside
         className={` ${
           isStackedOpen ? "w-60" : "w-0 "
-        } flex-shrink-0 flex overflow-hidden flex-col border-r transition-all duration-500`}
+        } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-slate-700 transition-all duration-500`}
       >
-        <div className="w-60 overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
+        <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="flex pt-4 px-4 justify-between align-middle w-full">
-            <span className="text-gray-900 text-lg ml-2 font-semibold">
+            <span className="text-gray-900 dark:text-white text-lg ml-2 font-semibold">
               {extraNavigation.title}
             </span>
             <button
diff --git a/space_flow/src/components/SidebarComponent/index.tsx b/space_flow/src/components/SidebarComponent/index.tsx
index 518b985b4..8d413ae98 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-gray-800"
+          className="h-full overflow-y-auto bg-slate-800 dark:bg-slate-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 6a31d6560..9668346b0 100644
--- a/space_flow/src/components/chatComponent/index.tsx
+++ b/space_flow/src/components/chatComponent/index.tsx
@@ -88,9 +88,9 @@ export default function Chat({flow, reactFlowInstance }) {
         leaveTo="translate-y-96"
       >
         <div className="w-[400px] absolute bottom-0 right-6">
-          <div className="border h-full rounded-xl rounded-b-none bg-white shadow">
-            <div className="flex justify-between items-center px-5 py-3 border-b">
-              <div className="flex gap-3 text-xl font-medium items-center">
+          <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="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
               </div>
@@ -99,21 +99,21 @@ export default function Chat({flow, reactFlowInstance }) {
                   setOpen(false);
                 }}
               >
-                <XMarkIcon className="h-6 w-6 text-gray-600" />
+                <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 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-slate-900 p-3 py-5">
               {chatHistory.map((c, i) => (
                 <div key={i}>
-                  {c.isSend ? (
+                  {!c.isSend ? (
                     <div className="w-full text-end">
-                      <div className="text-start inline-block bg-gray-200 rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tr-none">
+                      <div style={{backgroundColor: nodeColors['chat']}} className="text-start inline-block text-white rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tr-none">
                         {c.message}
                       </div>
                     </div>
                   ) : (
                     <div className="w-full text-start">
-                      <div style={{backgroundColor: nodeColors['chat']}} className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-white 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-slate-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 border-t flex items-center justify-between p-3">
+            <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="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 pr-10 sm:text-sm"
+                  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"
                   placeholder="Send a message..."
                 />
                 <div className="absolute inset-y-0 right-0 flex items-center pr-3">
@@ -143,7 +143,7 @@ export default function Chat({flow, reactFlowInstance }) {
                     onClick={() => sendMessage()}
                   >
                     <PaperAirplaneIcon
-                      className="h-5 w-5 text-gray-400 hover:text-gray-600"
+                      className="h-5 w-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                       aria-hidden="true"
                     />
                   </button>
@@ -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 shadow">
+          <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">
             <button
               onClick={() => {
                 setOpen(true);
diff --git a/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index 3b7b37e20..78f8b1c4c 100644
--- a/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -19,10 +19,10 @@ export default function DisclosureComponent({
       {({ open }) => (
         <>
           <div>
-            <div className="select-none bg-gray-50 w-full flex justify-between items-center -mt-px px-3 py-2 border border-gray-200">
+            <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="flex gap-4">
-                <Icon className="w-6 text-gray-800" />
-                <span className="flex items-center text-sm text-gray-800 font-medium">
+                <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">
                   {title}
                 </span>
               </div>
@@ -36,7 +36,7 @@ export default function DisclosureComponent({
                   <ChevronRightIcon
                     className={`${
                       open ? "rotate-90 transform" : ""
-                    } h-5 w-5 text-gray-800`}
+                    } h-5 w-5 text-gray-800 dark:text-white`}
                   />
                 </Disclosure.Button>
               </div>
diff --git a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 980902c22..26df86484 100644
--- a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -70,7 +70,7 @@ export default function ExtraSidebar() {
                   }
                 >
                   <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
-                    <span className="text-black w-36 truncate">{t}</span>
+                    <span className="text-black dark:text-white w-36 truncate">{t}</span>
                     <Bars2Icon className="w-6 h-6 text-gray-400" />
                   </div>
                 </div>
@@ -95,7 +95,7 @@ export default function ExtraSidebar() {
               }
             >
               <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
-                <span className="text-black w-36 truncate">Chat Input</span>
+                <span className="text-black dark:text-white w-36 truncate">Chat Input</span>
                 <Bars2Icon className="w-6 h-6 text-gray-400" />
               </div>
             </div>
@@ -112,7 +112,7 @@ export default function ExtraSidebar() {
               }
             >
               <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
-                <span className="text-black w-36 truncate">Chat Output</span>
+                <span className="text-black dark:text-white w-36 truncate">Chat Output</span>
                 <Bars2Icon className="w-6 h-6 text-gray-400" />
               </div>
             </div>
@@ -135,7 +135,7 @@ export default function ExtraSidebar() {
               }
             >
               <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
-                <span className="text-black w-36 truncate">String</span>
+                <span className="text-black dark:text-white w-36 truncate">String</span>
                 <Bars2Icon className="w-6 h-6 text-gray-400" />
               </div>
             </div>
@@ -152,7 +152,7 @@ export default function ExtraSidebar() {
               }
             >
               <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
-                <span className="text-black w-36 truncate">Boolean</span>
+                <span className="text-black dark:text-white w-36 truncate">Boolean</span>
                 <Bars2Icon className="w-6 h-6 text-gray-400" />
               </div>
             </div>