diff --git a/atomicservicenavigation/interfaces/atomicservicenavigation.js b/atomicservicenavigation/interfaces/atomicservicenavigation.js
index b1293149e71cf6c83cc983a5a8bc7947d87c01d0..a81f85ee233c6371b7dbe5b5a12a509a2214fbde 100644
--- a/atomicservicenavigation/interfaces/atomicservicenavigation.js
+++ b/atomicservicenavigation/interfaces/atomicservicenavigation.js
@@ -149,8 +149,8 @@ export class AtomicServiceNavigation extends ViewPU {
         this.modeChangeCallback = undefined;
         this.settings = new RenderingContextSettings(true);
         this.context = new CanvasRenderingContext2D(this.settings);
-        this.navigationWidth = 0;
-        this.navigationHeight = 0;
+        this.__navigationWidth = new ObservedPropertySimplePU(0, this, "navigationWidth");
+        this.__navigationHeight = new ObservedPropertySimplePU(0, this, "navigationHeight");
         this.mainWindow = undefined;
         this.onWindowSizeChangeCallback = undefined;
         this.onAvoidSafeAreaChangeCallback = undefined;
@@ -258,6 +258,8 @@ export class AtomicServiceNavigation extends ViewPU {
         this.__currentBreakPoint.purgeDependencyOnElmtId(rmElmtId);
         this.__sideBarAttribute.purgeDependencyOnElmtId(rmElmtId);
         this.__controlButtonVisible.purgeDependencyOnElmtId(rmElmtId);
+        this.__navigationWidth.purgeDependencyOnElmtId(rmElmtId);
+        this.__navigationHeight.purgeDependencyOnElmtId(rmElmtId);
     }
 
     aboutToBeDeleted() {
@@ -276,6 +278,8 @@ export class AtomicServiceNavigation extends ViewPU {
         this.__currentBreakPoint.aboutToBeDeleted();
         this.__sideBarAttribute.aboutToBeDeleted();
         this.__controlButtonVisible.aboutToBeDeleted();
+        this.__navigationWidth.aboutToBeDeleted();
+        this.__navigationHeight.aboutToBeDeleted();
         SubscriberManager.Get().delete(this.id__());
         this.aboutToBeDeletedInternal();
     }
@@ -399,7 +403,18 @@ export class AtomicServiceNavigation extends ViewPU {
     set controlButtonVisible(newValue) {
         this.__controlButtonVisible.set(newValue);
     }
-
+    get navigationWidth() {
+        return this.__navigationWidth.get();
+    }
+    set navigationWidth(newValue) {
+        this.__navigationWidth.set(newValue);
+    }
+    get navigationHeight() {
+        return this.__navigationHeight.get();
+    }
+    set navigationHeight(newValue) {
+        this.__navigationHeight.set(newValue);
+    }
     defaultNavDestinationBuilder(name, param, parent = null) {
     }
 
@@ -1119,7 +1134,7 @@ export class AtomicServiceNavigation extends ViewPU {
             Stack.create();
             Stack.width('100%');
             Stack.height('100%');
-            Stack.background(this.gradientBackground === undefined ? undefined : {
+            Stack.background(this.gradientBackground === undefined || (this.navigationWidth === -1 && this.navigationHeight === -1) ? undefined : {
                 builder: () => {
                     this.BackgroundBuilder.call(this, makeBuilderParameterProxy('BackgroundBuilder', {
                         primaryColor: () => this.gradientBackground.primaryColor,
@@ -1129,7 +1144,7 @@ export class AtomicServiceNavigation extends ViewPU {
                         alpha: () => this.gradientBackground.alpha
                     }));
                 }
-            });
+            } , { align: Alignment.Top });
             Stack.onSizeChange((oldValue, newValue) => {
                 this.navigationWidth = newValue.width;
                 this.navigationHeight = newValue.height;