diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
index a05c6a440..d79aacc7b 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
@@ -1303,10 +1303,11 @@ RED.view = (function() {
             show: function(n) { return !n.valid }
         })
 
+        setScaleFactor(1)
         if (RED.settings.get("editor.view.view-store-zoom")) {
             var  userZoomLevel = parseFloat(RED.settings.getLocal('zoom-level'))
             if (!isNaN(userZoomLevel)) {
-                scaleFactor = userZoomLevel
+                setScaleFactor(userZoomLevel)
             }
         }
 
@@ -3109,7 +3110,7 @@ RED.view = (function() {
             center = [(scrollPos[0] + screenSize[0]/2)/oldScaleFactor, (scrollPos[1] + screenSize[1]/2)/oldScaleFactor];
         }
 
-        scaleFactor = factor;
+        setScaleFactor(factor)
 
         // Calculate new scroll position to keep the center point at the same screen position
         if (focalPoint) {
@@ -3195,7 +3196,7 @@ RED.view = (function() {
             interpolateValue: true, // Use exponential interpolation for zoom
             onStep: function(values) {
                 var currentFactor = values.zoom;
-                scaleFactor = currentFactor;
+                setScaleFactor(currentFactor);
 
                 // Calculate new scroll position to maintain focal point
                 var currentScreenSize = [chart.width(), chart.height()];
@@ -3233,7 +3234,7 @@ RED.view = (function() {
             onEnd: function() {
                 cancelInProgressAnimation = null;
                 // Ensure scaleFactor is exactly the target to prevent precision issues
-                scaleFactor = targetFactor;
+                setScaleFactor(targetFactor);
                 // Full redraw at the end to ensure everything is correct
                 _redraw();
                 if (RED.settings.get("editor.view.view-store-zoom")) {
@@ -3244,7 +3245,7 @@ RED.view = (function() {
             onCancel: function() {
                 cancelInProgressAnimation = null;
                 // Ensure scaleFactor is set to current target on cancel
-                scaleFactor = targetFactor;
+                setScaleFactor(targetFactor)
                 _redraw();
                 RED.events.emit("view:navigate");
             }
@@ -5182,17 +5183,17 @@ RED.view = (function() {
             img.src = iconUrl;
             img.onload = function() {
                 if (!iconUrl.match(/\.svg$/)) {
-                    var largestEdge = Math.max(img.width,img.height);
-                    var scaleFactor = 1;
+                    const largestEdge = Math.max(img.width,img.height);
+                    let imgScaleFactor = 1;
                     if (largestEdge > 30) {
-                        scaleFactor = 30/largestEdge;
+                        imgScaleFactor = 30/largestEdge;
                     }
-                    var width = img.width * scaleFactor;
+                    var width = img.width * imgScaleFactor;
                     if (width > 20) {
-                        scaleFactor *= 20/width;
+                        imgScaleFactor *= 20/width;
                         width = 20;
                     }
-                    var height = img.height * scaleFactor;
+                    var height = img.height * imgScaleFactor;
                     icon.attr("width",width);
                     icon.attr("height",height);
                     icon.attr("x",15-width/2);
@@ -7666,6 +7667,20 @@ RED.view = (function() {
         }
     }
 
+    function setScaleFactor(sf) {
+        scaleFactor = sf;
+        if (sf <= 0.5) {
+            chart.removeClass('red-ui-workspace-zoom-level-1')
+            chart.addClass('red-ui-workspace-zoom-level-2')
+        } else if (sf <= 0.75) {
+            chart.addClass('red-ui-workspace-zoom-level-1')
+            chart.removeClass('red-ui-workspace-zoom-level-2')
+        } else {
+            chart.removeClass('red-ui-workspace-zoom-level-1')
+            chart.removeClass('red-ui-workspace-zoom-level-2')
+        }
+    }
+
     return {
         init: init,
         state:function(state) {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
index 90a94e5fa..7ccedf579 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
@@ -151,6 +151,14 @@
         animation-name: node-reveal-highlight;
         animation-timing-function: ease-out;
         animation-iteration-count: 1;
+        .red-ui-workspace-zoom-level-1 & {
+            stroke-width: 8;
+            stroke-dasharray: 16, 8;
+        }
+        .red-ui-workspace-zoom-level-2 & {
+            stroke-width: 16;
+            stroke-dasharray: 16, 8;
+        }
     }
 }
 
@@ -302,6 +310,14 @@ g.red-ui-flow-node-selected {
     stroke-dasharray: 8, 4;
     fill: none;
     pointer-events: none;
+    .red-ui-workspace-zoom-level-1 & {
+        stroke-width: 8;
+        stroke-dasharray: 16, 8;
+    }
+    .red-ui-workspace-zoom-level-2 & {
+        stroke-width: 16;
+        stroke-dasharray: 16, 8;
+    }
     .red-ui-flow-node-highlighted & {
         animation-duration: 8s;
         animation-name: node-reveal-highlight;