diff --git a/space_flow/src/components/textAreaComponent/index.tsx b/space_flow/src/components/textAreaComponent/index.tsx
index 258054919..31aba2c64 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 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-slate-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
             (disabled ? " bg-gray-200" : "")
           }
         >
diff --git a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 26df86484..83ac8be87 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 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-slate-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" />
+                    <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-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 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-slate-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" />
+                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-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 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-slate-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" />
+                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-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 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-slate-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" />
+                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-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 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-slate-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" />
+                <Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
               </div>
             </div>
           </div>