diff --git a/Source/Editor/Surface/Archetypes/BehaviorTree.cs b/Source/Editor/Surface/Archetypes/BehaviorTree.cs
index 0b4b3f713..9c9325177 100644
--- a/Source/Editor/Surface/Archetypes/BehaviorTree.cs
+++ b/Source/Editor/Surface/Archetypes/BehaviorTree.cs
@@ -415,8 +415,8 @@ namespace FlaxEditor.Surface.Archetypes
                 // Setup boxes
                 _input = (InputBox)GetBox(0);
                 _output = (OutputBox)GetBox(1);
-                _input.ConnectionOffset = new Float2(0, FlaxEditor.Surface.Constants.BoxSize * -0.5f);
-                _output.ConnectionOffset = new Float2(0, FlaxEditor.Surface.Constants.BoxSize * 0.5f);
+                _input.ConnectionOffset = new Float2(0, FlaxEditor.Surface.Constants.BoxRowHeight * -0.5f);
+                _output.ConnectionOffset = new Float2(0, FlaxEditor.Surface.Constants.BoxRowHeight * 0.5f);
 
                 // Setup node type and data
                 var flagsRoot = NodeFlags.NoRemove | NodeFlags.NoCloseButton | NodeFlags.NoSpawnViaPaste;
@@ -667,7 +667,7 @@ namespace FlaxEditor.Surface.Archetypes
                 }
             }
 
-            protected override Color FooterColor => Color.Transparent;
+            protected override Color ArchetypeColor => Color.Transparent;
 
             protected override Float2 CalculateNodeSize(float width, float height)
             {
diff --git a/Source/Editor/Surface/Archetypes/Function.cs b/Source/Editor/Surface/Archetypes/Function.cs
index 79d3948bf..6410b51e7 100644
--- a/Source/Editor/Surface/Archetypes/Function.cs
+++ b/Source/Editor/Surface/Archetypes/Function.cs
@@ -631,7 +631,7 @@ namespace FlaxEditor.Surface.Archetypes
             }
 
             /// <inheritdoc />
-            protected override Color FooterColor => new Color(200, 11, 112);
+            protected override Color ArchetypeColor => new Color(200, 11, 112);
 
             /// <inheritdoc />
             public override void OnLoaded(SurfaceNodeActions action)
diff --git a/Source/Editor/Surface/Archetypes/Textures.cs b/Source/Editor/Surface/Archetypes/Textures.cs
index 56f8154d7..c1132e947 100644
--- a/Source/Editor/Surface/Archetypes/Textures.cs
+++ b/Source/Editor/Surface/Archetypes/Textures.cs
@@ -204,7 +204,7 @@ namespace FlaxEditor.Surface.Archetypes
                     NodeElementArchetype.Factory.Input(3, "Max Steps", true, typeof(float), 3, 2),
                     NodeElementArchetype.Factory.Input(4, "Heightmap Texture", true, typeof(FlaxEngine.Object), 4),
                     NodeElementArchetype.Factory.Output(0, "Parallax UVs", typeof(Float2), 5),
-                    NodeElementArchetype.Factory.Text(Surface.Constants.BoxSize + 4, 5 * Surface.Constants.LayoutOffsetY, "Channel"),
+                    NodeElementArchetype.Factory.Text(Surface.Constants.BoxRowHeight + 4, 5 * Surface.Constants.LayoutOffsetY, "Channel"),
                     NodeElementArchetype.Factory.ComboBox(70, 5 * Surface.Constants.LayoutOffsetY, 50, 3, new[]
                     {
                         "R",
diff --git a/Source/Editor/Surface/Archetypes/Tools.cs b/Source/Editor/Surface/Archetypes/Tools.cs
index aacebd189..3d0a8cd0c 100644
--- a/Source/Editor/Surface/Archetypes/Tools.cs
+++ b/Source/Editor/Surface/Archetypes/Tools.cs
@@ -1058,7 +1058,7 @@ namespace FlaxEditor.Surface.Archetypes
 
         internal class RerouteNode : SurfaceNode, IConnectionInstigator
         {
-            internal static readonly Float2 DefaultSize = new Float2(FlaxEditor.Surface.Constants.BoxSize);
+            internal static readonly Float2 DefaultSize = new Float2(FlaxEditor.Surface.Constants.BoxRowHeight);
             private Rectangle _localBounds;
             private InputBox _input;
             private OutputBox _output;
diff --git a/Source/Editor/Surface/Constants.cs b/Source/Editor/Surface/Constants.cs
index 0f3dca783..3310351bf 100644
--- a/Source/Editor/Surface/Constants.cs
+++ b/Source/Editor/Surface/Constants.cs
@@ -23,12 +23,14 @@ namespace FlaxEditor.Surface
         /// <summary>
         /// The node header height.
         /// </summary>
-        public const float NodeHeaderSize = 28.0f;
+        public const float NodeHeaderSize = 20.0f;
+
+        public const float NodeHeaderTextScale = 0.65f;
 
         /// <summary>
         /// The node footer height.
         /// </summary>
-        public const float NodeFooterSize = 4.0f;
+        public const float NodeFooterSize = 2.0f;
 
         /// <summary>
         /// The node left margin.
@@ -45,14 +47,19 @@ namespace FlaxEditor.Surface
         /// </summary>
         public const float BoxOffsetX = 2.0f;
 
+        /// <summary>
+        /// The width of the row that is started by a box.
+        /// </summary>
+        public const float BoxRowHeight = 18.0f;
+
         /// <summary>
         /// The box size (with and height).
         /// </summary>
-        public const float BoxSize = 20.0f;
+        public const float BoxSize = 12.0f;
 
         /// <summary>
         /// The node layout offset on the y axis (height of the boxes rows, etc.). It's used to make the design more consistent.
         /// </summary>
-        public const float LayoutOffsetY = 20.0f;
+        public const float LayoutOffsetY = 22.0f;
     }
 }
diff --git a/Source/Editor/Surface/Elements/Box.cs b/Source/Editor/Surface/Elements/Box.cs
index 964b3cc69..08023ac93 100644
--- a/Source/Editor/Surface/Elements/Box.cs
+++ b/Source/Editor/Surface/Elements/Box.cs
@@ -196,7 +196,7 @@ namespace FlaxEditor.Surface.Elements
 
         /// <inheritdoc />
         protected Box(SurfaceNode parentNode, NodeElementArchetype archetype, Float2 location)
-        : base(parentNode, archetype, location, new Float2(Constants.BoxSize), false)
+        : base(parentNode, archetype, location, new Float2(Constants.BoxRowHeight), false)
         {
             _currentType = DefaultType;
             _isSingle = Archetype.Single;
diff --git a/Source/Editor/Surface/NodeElementArchetype.cs b/Source/Editor/Surface/NodeElementArchetype.cs
index f5a23d411..1a9d4ae74 100644
--- a/Source/Editor/Surface/NodeElementArchetype.cs
+++ b/Source/Editor/Surface/NodeElementArchetype.cs
@@ -157,7 +157,7 @@ namespace FlaxEditor.Surface
                 {
                     Type = NodeElementType.Output,
                     Position = new Float2(
-                                          Constants.NodeMarginX - Constants.BoxSize + Constants.BoxOffsetX,
+                                          Constants.NodeMarginX - Constants.BoxRowHeight + Constants.BoxOffsetX,
                                           Constants.NodeMarginY + Constants.NodeHeaderSize + yLevel * Constants.LayoutOffsetY),
                     Text = text,
                     Single = single,
@@ -182,7 +182,7 @@ namespace FlaxEditor.Surface
                 {
                     Type = NodeElementType.Output,
                     Position = new Float2(
-                                          Constants.NodeMarginX - Constants.BoxSize + Constants.BoxOffsetX,
+                                          Constants.NodeMarginX - Constants.BoxRowHeight + Constants.BoxOffsetX,
                                           Constants.NodeMarginY + Constants.NodeHeaderSize + yLevel * Constants.LayoutOffsetY),
                     Text = text,
                     Single = single,
diff --git a/Source/Editor/Surface/NodeFactory.cs b/Source/Editor/Surface/NodeFactory.cs
index 7c85cb449..8448c37a3 100644
--- a/Source/Editor/Surface/NodeFactory.cs
+++ b/Source/Editor/Surface/NodeFactory.cs
@@ -60,56 +60,56 @@ namespace FlaxEditor.Surface
             {
                 GroupID = 1,
                 Name = "Material",
-                Color = new Color(231, 76, 60),
+                Color = new Color(181, 89, 49),
                 Archetypes = Archetypes.Material.Nodes
             },
             new GroupArchetype
             {
                 GroupID = 2,
                 Name = "Constants",
-                Color = new Color(243, 156, 18),
+                Color = new Color(163, 106, 21),
                 Archetypes = Archetypes.Constants.Nodes
             },
             new GroupArchetype
             {
                 GroupID = 3,
                 Name = "Math",
-                Color = new Color(52, 152, 219),
+                Color = new Color(45, 126, 181),
                 Archetypes = Archetypes.Math.Nodes
             },
             new GroupArchetype
             {
                 GroupID = 4,
                 Name = "Packing",
-                Color = new Color(155, 89, 182),
+                Color = new Color(124, 66, 143),
                 Archetypes = Archetypes.Packing.Nodes
             },
             new GroupArchetype
             {
                 GroupID = 5,
                 Name = "Textures",
-                Color = new Color(46, 204, 113),
+                Color = new Color(43, 130, 83),
                 Archetypes = Archetypes.Textures.Nodes
             },
             new GroupArchetype
             {
                 GroupID = 6,
                 Name = "Parameters",
-                Color = new Color(52, 73, 94),
+                Color = new Color(55, 78, 99),
                 Archetypes = Archetypes.Parameters.Nodes
             },
             new GroupArchetype
             {
                 GroupID = 7,
                 Name = "Tools",
-                Color = new Color(149, 165, 166),
+                Color = new Color(88, 96, 97),
                 Archetypes = Archetypes.Tools.Nodes
             },
             new GroupArchetype
             {
                 GroupID = 8,
                 Name = "Layers",
-                Color = new Color(249, 105, 116),
+                Color = new Color(189, 75, 81),
                 Archetypes = Archetypes.Layers.Nodes
             },
             new GroupArchetype
@@ -123,21 +123,21 @@ namespace FlaxEditor.Surface
             {
                 GroupID = 10,
                 Name = "Boolean",
-                Color = new Color(237, 28, 36),
+                Color = new Color(166, 27, 32),
                 Archetypes = Archetypes.Boolean.Nodes
             },
             new GroupArchetype
             {
                 GroupID = 11,
                 Name = "Bitwise",
-                Color = new Color(181, 230, 29),
+                Color = new Color(96, 125, 34),
                 Archetypes = Archetypes.Bitwise.Nodes
             },
             new GroupArchetype
             {
                 GroupID = 12,
                 Name = "Comparisons",
-                Color = new Color(148, 30, 34),
+                Color = new Color(166, 33, 57),
                 Archetypes = Archetypes.Comparisons.Nodes
             },
             // GroupID = 13 -> Custom Nodes provided externally
diff --git a/Source/Editor/Surface/SurfaceNode.cs b/Source/Editor/Surface/SurfaceNode.cs
index 6312bd68d..4b918de08 100644
--- a/Source/Editor/Surface/SurfaceNode.cs
+++ b/Source/Editor/Surface/SurfaceNode.cs
@@ -55,6 +55,11 @@ namespace FlaxEditor.Surface
         /// </summary>
         protected Rectangle _headerRect;
 
+        /// <summary>
+        /// The header text rectangle (local space).
+        /// </summary>
+        protected Rectangle _headerTextRect;
+
         /// <summary>
         /// The close button rectangle (local space).
         /// </summary>
@@ -132,7 +137,7 @@ namespace FlaxEditor.Surface
             AutoFocus = false;
             TooltipText = GetTooltip();
             CullChildren = false;
-            BackgroundColor = Style.Current.BackgroundNormal;
+            BackgroundColor = Color.Lerp(Style.Current.Background, Style.Current.BackgroundHighlighted, 0.55f);
 
             if (Archetype.DefaultValues != null)
             {
@@ -149,7 +154,7 @@ namespace FlaxEditor.Surface
         /// <summary>
         /// Gets the color of the footer of the node.
         /// </summary>
-        protected virtual Color FooterColor => GroupArchetype.Color;
+        protected virtual Color ArchetypeColor => GroupArchetype.Color;
 
         private Float2 mouseDownMousePosition;
 
@@ -1032,6 +1037,7 @@ namespace FlaxEditor.Surface
             const float closeButtonMargin = Constants.NodeCloseButtonMargin;
             const float closeButtonSize = Constants.NodeCloseButtonSize;
             _headerRect = new Rectangle(0, 0, Width, headerSize);
+            _headerTextRect = _headerRect with { Width = _headerRect.Width - 5f, X = _headerRect.X + 5f }; 
             _closeButtonRect = new Rectangle(Width - closeButtonSize - closeButtonMargin, closeButtonMargin, closeButtonSize, closeButtonSize);
             _footerRect = new Rectangle(0, Height - footerSize, Width, footerSize);
         }
@@ -1058,8 +1064,8 @@ namespace FlaxEditor.Surface
             var headerColor = style.BackgroundHighlighted;
             if (_headerRect.Contains(ref _mousePosition) && !Surface.IsConnecting && !Surface.IsSelecting)
                 headerColor *= 1.07f;
-            Render2D.FillRectangle(_headerRect, headerColor);
-            Render2D.DrawText(style.FontLarge, Title, _headerRect, style.Foreground, TextAlignment.Center, TextAlignment.Center);
+            Render2D.FillRectangle(_headerRect, ArchetypeColor);
+            Render2D.DrawText(style.FontLarge, Title, _headerTextRect, style.Foreground, TextAlignment.Near, TextAlignment.Center, TextWrapping.NoWrap, 1f, Constants.NodeHeaderTextScale);
 
             // Close button
             if ((Archetype.Flags & NodeFlags.NoCloseButton) == 0 && Surface.CanEdit)
@@ -1069,7 +1075,7 @@ namespace FlaxEditor.Surface
             }
 
             // Footer
-            Render2D.FillRectangle(_footerRect, FooterColor);
+            Render2D.FillRectangle(_footerRect, ArchetypeColor);
 
             DrawChildren();
 
diff --git a/Source/Editor/Surface/SurfaceStyle.cs b/Source/Editor/Surface/SurfaceStyle.cs
index be09f51be..654cf7abf 100644
--- a/Source/Editor/Surface/SurfaceStyle.cs
+++ b/Source/Editor/Surface/SurfaceStyle.cs
@@ -140,6 +140,11 @@ namespace FlaxEditor.Surface
         /// </summary>
         public Texture Background;
 
+        /// <summary>
+        /// The color used as a surface background.
+        /// </summary>
+        public Color BackgroundColor;
+
         /// <summary>
         /// Boxes drawing callback.
         /// </summary>
@@ -216,7 +221,7 @@ namespace FlaxEditor.Surface
 
         private static void DefaultDrawBox(Elements.Box box)
         {
-            var rect = new Rectangle(Float2.Zero, box.Size);
+            var rect = new Rectangle(0.0f, box.Height * 0.5f - Constants.BoxSize * 0.5f, new Float2(Constants.BoxSize));
 
             // Size culling
             const float minBoxSize = 5.0f;
@@ -293,6 +298,7 @@ namespace FlaxEditor.Surface
                     ArrowClose = editor.Icons.VisjectArrowClosed32,
                 },
                 Background = editor.UI.VisjectSurfaceBackground,
+                BackgroundColor = new Color(31, 31, 31),
             };
         }
 
diff --git a/Source/Editor/Surface/VisjectSurface.Draw.cs b/Source/Editor/Surface/VisjectSurface.Draw.cs
index af5893907..0138bce8d 100644
--- a/Source/Editor/Surface/VisjectSurface.Draw.cs
+++ b/Source/Editor/Surface/VisjectSurface.Draw.cs
@@ -65,7 +65,7 @@ namespace FlaxEditor.Surface
         /// </summary>
         protected virtual void DrawBackground()
         {
-            DrawBackgroundDefault(Style.Background, Width, Height);
+            DrawBackgroundSolidColor(Style.BackgroundColor, Width, Height);
         }
 
         internal static void DrawBackgroundDefault(Texture background, float width, float height)
@@ -95,6 +95,12 @@ namespace FlaxEditor.Surface
             }
         }
 
+        internal static void DrawBackgroundSolidColor(Color color, float width, float height)
+        {
+            Rectangle backgroundRect = new Rectangle(0f, 0f, width, height);
+            Render2D.FillRectangle(backgroundRect, color);
+        }
+
         /// <summary>
         /// Draws the selection background.
         /// </summary>