diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 5c0248ae4..94e1ee6bd 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -174,7 +174,7 @@ export default function GenericNode({
                     validationStatus && validationStatus.valid
                       ? "w-4 h-4 rounded-full bg-green-500 opacity-100"
                       : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                    "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
                   )}
                 ></div>
                 <div
@@ -182,7 +182,7 @@ export default function GenericNode({
                     validationStatus && !validationStatus.valid
                       ? "w-4 h-4 rounded-full bg-yellow-500 opacity-100"
                       : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                    "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
                   )}
                 ></div>
                 <div
@@ -190,13 +190,12 @@ export default function GenericNode({
                     !validationStatus
                       ? "w-4 h-4 rounded-full bg-red-500 opacity-100"
                       : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                    "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
                   )}
                 ></div>
               </div>
             </Tooltip>
           </div>
-
         </div>
       </div>
 
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 4c4d0ad9a..c6b1befe3 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -15,7 +15,11 @@ export default function FloatComponent({
     }
   }, [disabled, onChange]);
   return (
-    <div className={"w-full " + (disabled ? "pointer-events-none cursor-not-allowed" : "")}>
+    <div
+      className={
+        "w-full " + (disabled ? "pointer-events-none cursor-not-allowed" : "")
+      }
+    >
       <input
         type="number"
         value={myValue}
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index f8887e895..6353dff60 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -16,9 +16,10 @@ export default function IntComponent({
   }, [disabled, onChange]);
   return (
     <div
-      className={"w-full " + (
-        disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
-  )}
+      className={
+        "w-full " +
+        (disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full")
+      }
     >
       <input
         onKeyDown={(event) => {
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 480a154f8..f8015a21e 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -89,7 +89,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       cookieObject.flows.forEach((flow) => {
         flow.data.edges.forEach((edge) => {
           edge.className = "";
-          edge.style = { stroke: "#222222" };
+          edge.style = { stroke: "#555555" };
         });
         flow.data.nodes.forEach((node) => {
           if (Object.keys(templates[node.data.type]["template"]).length > 0) {
@@ -295,7 +295,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     if (data) {
       data.edges.forEach((edge) => {
         edge.className = "";
-        edge.style = { stroke: "#222222" };
+        edge.style = { stroke: "#555555" };
       });
       data.nodes.forEach((node) => {
         if (Object.keys(templates[node.data.type]["template"]).length > 0) {
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index eb2581225..b88e13586 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -15,7 +15,9 @@ export default function ExtraSidebar() {
   ) {
     //start drag event
     var crt = event.currentTarget.cloneNode(true);
-    crt.style.position = "absolute"; crt.style.top = "-500px"; crt.style.right = "-500px";
+    crt.style.position = "absolute";
+    crt.style.top = "-500px";
+    crt.style.right = "-500px";
     crt.classList.add("cursor-grabbing");
     document.body.appendChild(crt);
     event.dataTransfer.setDragImage(crt, 0, 0);
@@ -60,7 +62,9 @@ export default function ExtraSidebar() {
                         }
                         onDragEnd={() => {
                           document.body.removeChild(
-                            document.getElementsByClassName("cursor-grabbing")[0]
+                            document.getElementsByClassName(
+                              "cursor-grabbing"
+                            )[0]
                           );
                         }}
                       >
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index d8112410d..3216b44e4 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -154,7 +154,7 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
             style:
               params.targetHandle.split("|")[0] === "Text"
                 ? { stroke: "#333333", strokeWidth: 2 }
-                : { stroke: "#222222" },
+                : { stroke: "#555555" },
             animated: params.targetHandle.split("|")[0] === "Text",
           },
           eds