diff --git a/src/Blazor.Diagrams/Components/NavigatorWidget.razor b/src/Blazor.Diagrams/Components/NavigatorWidget.razor
index 57ff9f1b..7bfd1db1 100644
--- a/src/Blazor.Diagrams/Components/NavigatorWidget.razor
+++ b/src/Blazor.Diagrams/Components/NavigatorWidget.razor
@@ -1,9 +1,9 @@
 @if (Diagram.Container != null)
 {
-    var addedNodeX = Math.Max(0, Diagram.Pan.X);
-    var addedNodeY = Math.Max(0, Diagram.Pan.Y);
-    var addedCurrentViewX = Math.Abs(Math.Min(0, Diagram.Pan.X)) * XFactor;
-    var addedCurrentViewY = Math.Abs(Math.Min(0, Diagram.Pan.Y)) * YFactor;
+    var addedNodeX = Math.Max(0, Diagram.Pan.X) + NodePositionAdjustment.X;
+    var addedNodeY = Math.Max(0, Diagram.Pan.Y) + NodePositionAdjustment.Y;
+    var addedCurrentViewX = (Math.Abs(Math.Min(0, Diagram.Pan.X)) + NodePositionAdjustment.X) * XFactor;
+    var addedCurrentViewY = (Math.Abs(Math.Min(0, Diagram.Pan.Y)) + NodePositionAdjustment.Y) * YFactor;
     var currentViewWidth = Diagram.Container.Width * XFactor;
     var currentViewHeight = Diagram.Container.Height * YFactor;
 
@@ -13,18 +13,19 @@
                  style="top: @(addedCurrentViewY.ToInvariantString())px;
                         left: @(addedCurrentViewX.ToInvariantString())px;
                         width: @(currentViewWidth.ToInvariantString())px;
-                        height: @(currentViewHeight.ToInvariantString())px;"></div>
+                        height: @(currentViewHeight.ToInvariantString())px;
+                        border: 2px solid @FillColor;"></div>
         </div>
         <svg width="@(Width.ToInvariantString())px" height="@(Height.ToInvariantString())px">
             @foreach (var node in Diagram.Nodes.Where(n => n.Size != null))
             {
-                var left = (Math.Max(0, node.Position.X * Diagram.Zoom) + addedNodeX) * XFactor;
-                var top = (Math.Max(0, node.Position.Y * Diagram.Zoom) + addedNodeY) * YFactor;
+                var left = ((node.Position.X * Diagram.Zoom) + addedNodeX) * XFactor;
+                var top = ((node.Position.Y * Diagram.Zoom) + addedNodeY) * YFactor;
                 var width = node.Size.Width * Diagram.Zoom * XFactor;
                 var height = node.Size.Height * Diagram.Zoom * YFactor;
 
                 <g @key="node.Id" transform="translate(@left.ToInvariantString(), @top.ToInvariantString())">
-                    <rect fill="#40babd"
+                    <rect fill="@FillColor"
                           width="@width.ToInvariantString()"
                           height="@height.ToInvariantString()"></rect>
                 </g>
@@ -38,7 +39,7 @@
                 var height = group.Size.Height * Diagram.Zoom * YFactor;
 
                 <g @key="group.Id" transform="translate(@left.ToInvariantString(), @top.ToInvariantString())">
-                    <rect stroke="#40babd"
+                    <rect stroke="@FillColor"
                           stroke-width="2"
                           fill="none"
                           width="@width.ToInvariantString()"
diff --git a/src/Blazor.Diagrams/Components/NavigatorWidget.razor.cs b/src/Blazor.Diagrams/Components/NavigatorWidget.razor.cs
index 4ee45743..69ac1f94 100644
--- a/src/Blazor.Diagrams/Components/NavigatorWidget.razor.cs
+++ b/src/Blazor.Diagrams/Components/NavigatorWidget.razor.cs
@@ -10,21 +10,15 @@ namespace Blazor.Diagrams.Components
 {
     public partial class NavigatorWidget : IDisposable
     {
+        [CascadingParameter] public Diagram Diagram { get; set; }
+        [Parameter] public double Width { get; set; }
+        [Parameter] public double Height { get; set; }
+        [Parameter] public string FillColor { get; set; } = "#40babd";
+        [Parameter] public bool DefaultStyle { get; set; }
 
-        [CascadingParameter]
-        public Diagram Diagram { get; set; }
-
-        [Parameter]
-        public double Width { get; set; }
-
-        [Parameter]
-        public double Height { get; set; }
-
-        [Parameter]
-        public bool DefaultStyle { get; set; }
-
-        protected double XFactor { get; set; }
-        protected double YFactor { get; set; }
+        private Point NodePositionAdjustment { get; set; }
+        private double XFactor { get; set; }
+        private double YFactor { get; set; }
 
         protected override void OnParametersSet()
         {
@@ -77,6 +71,7 @@ private void Refresh()
             (double fullSizeWidth, double fullSizeHeight) = GetFullSize(nodesMaxX, nodesMaxY);
             AdjustFullSizeWithNodesRect(nodesMinX, nodesMinY, ref fullSizeWidth, ref fullSizeHeight);
 
+            NodePositionAdjustment = new Point(nodesMinX < 0 ? Math.Abs(nodesMinX) : 0, nodesMinY < 0 ? Math.Abs(nodesMinY) : 0);
             XFactor = Width / fullSizeWidth;
             YFactor = Height / fullSizeHeight;
             StateHasChanged();
diff --git a/src/Blazor.Diagrams/wwwroot/default.styles.css b/src/Blazor.Diagrams/wwwroot/default.styles.css
index 97c9e95b..e4de8dbf 100644
--- a/src/Blazor.Diagrams/wwwroot/default.styles.css
+++ b/src/Blazor.Diagrams/wwwroot/default.styles.css
@@ -91,10 +91,6 @@
     background-color: white;
 }
 
-.diagram-navigator.default .current-view {
-    border: 2px solid #40babd;
-}
-
 .group.default {
     outline: 2px solid black;
     background: rgb(198, 198, 198);
diff --git a/src/Blazor.Diagrams/wwwroot/default.styles.min.css b/src/Blazor.Diagrams/wwwroot/default.styles.min.css
index 879b2db7..30f8a6c8 100644
--- a/src/Blazor.Diagrams/wwwroot/default.styles.min.css
+++ b/src/Blazor.Diagrams/wwwroot/default.styles.min.css
@@ -1 +1 @@
-.default-node{width:100px;height:80px;border-radius:10px;background-color:#f5f5f5;border:1px solid #e8e8e8;-webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}.default-node.selected{border:1px solid #6e9fd4;}.default-node.selected .port{border:1px solid #6e9fd4;}.default-node .port,.default.group .port{width:20px;height:20px;margin:-10px;border-radius:50%;background-color:#f5f5f5;border:1px solid #d4d4d4;cursor:pointer;position:absolute;}.default-node .port:hover,.default-node .port.has-links,.default.group .port.has-links{background-color:#000;}.default-node .port.bottom,.default.group .port.bottom{bottom:0;left:50%;}.default-node .port.bottomleft,.default.group .port.bottomleft{bottom:0;left:0;}.default-node .port.bottomright,.default.group .port.bottomright{bottom:0;right:0;}.default-node .port.top,.default.group .port.top{top:0;left:50%;}.default-node .port.topleft,.default.group .port.topleft{top:0;left:0;}.default-node .port.topright,.default.group .port.topright{top:0;right:0;}.default-node .port.left,.default.group .port.left{left:0;top:50%;}.default-node .port.right,.default.group .port.right{right:0;top:50%;}.diagram-navigator.default{position:absolute;bottom:10px;right:10px;border:3px solid #9ba8b0;border-radius:15px;padding:20px;background-color:#fff;}.diagram-navigator.default .current-view{border:2px solid #40babd;}.group.default{outline:2px solid #000;background:#c6c6c6;}.group.default.selected{outline:2px solid #6e9fd4;}.link .link-label{display:inline-block;color:#fff;background-color:#6e9fd4;border-radius:.25rem;padding:.25rem;text-align:center;font-size:.875rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-width:3rem;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
\ No newline at end of file
+.default-node{width:100px;height:80px;border-radius:10px;background-color:#f5f5f5;border:1px solid #e8e8e8;-webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}.default-node.selected{border:1px solid #6e9fd4;}.default-node.selected .port{border:1px solid #6e9fd4;}.default-node .port,.default.group .port{width:20px;height:20px;margin:-10px;border-radius:50%;background-color:#f5f5f5;border:1px solid #d4d4d4;cursor:pointer;position:absolute;}.default-node .port:hover,.default-node .port.has-links,.default.group .port.has-links{background-color:#000;}.default-node .port.bottom,.default.group .port.bottom{bottom:0;left:50%;}.default-node .port.bottomleft,.default.group .port.bottomleft{bottom:0;left:0;}.default-node .port.bottomright,.default.group .port.bottomright{bottom:0;right:0;}.default-node .port.top,.default.group .port.top{top:0;left:50%;}.default-node .port.topleft,.default.group .port.topleft{top:0;left:0;}.default-node .port.topright,.default.group .port.topright{top:0;right:0;}.default-node .port.left,.default.group .port.left{left:0;top:50%;}.default-node .port.right,.default.group .port.right{right:0;top:50%;}.diagram-navigator.default{position:absolute;bottom:10px;right:10px;border:3px solid #9ba8b0;border-radius:15px;padding:20px;background-color:#fff;}.group.default{outline:2px solid #000;background:#c6c6c6;}.group.default.selected{outline:2px solid #6e9fd4;}.link .link-label{display:inline-block;color:#fff;background-color:#6e9fd4;border-radius:.25rem;padding:.25rem;text-align:center;font-size:.875rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-width:3rem;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
\ No newline at end of file
diff --git a/src/Blazor.Diagrams/wwwroot/default.styles.min.css.gz b/src/Blazor.Diagrams/wwwroot/default.styles.min.css.gz
index 27c95b48..ad48379e 100644
Binary files a/src/Blazor.Diagrams/wwwroot/default.styles.min.css.gz and b/src/Blazor.Diagrams/wwwroot/default.styles.min.css.gz differ