diff --git a/styles/globals.css b/styles/globals.css
index 4f33c48..34d2b88 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -14,7 +14,7 @@
   .sidebar-icon {
     @apply relative flex items-center justify-center
                     h-14 w-14 my-2 mx-auto
-                    shadow-lg bg-gray-800 text-secondary
+                    shadow-lg bg-blueSecondary text-secondary
                     hover:bg-green-900 hover:text-primary
                     rounded-3xl
                     hover:rounded-xl
@@ -63,7 +63,7 @@
 
   .node-layout {
     @apply flex flex-col items-center
-    w-[150px] h-fit bg-gray-700
+    w-[150px] h-fit bg-bluePrimary
     p-[4px];
   }
 
@@ -88,7 +88,7 @@
 
   .node-component {
     @apply relative flex flex-row h-fit rounded-md
-    bg-gray-600
+    bg-blueSecondary
     pr-2 my-1 mx-2
     text-white align-middle;
   }
diff --git a/tailwind.config.js b/tailwind.config.js
index e2aa85e..7ad6f8c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,11 +7,13 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: "#39ff14", //39ff14
-        secondary: "#008a00", //78b856
+        primary: "#39ff14", 
+        secondary: "#008a00", 
         sidebar: "#333333",
         panel: "#252526",
         content: "#1e1e1e",
+        bluePrimary: "#094c72",
+        blueSecondary: "#0c3953",
       }
     },
   },