diff --git a/atomicservicenavigation/interfaces/atomicservicenavigation.js b/atomicservicenavigation/interfaces/atomicservicenavigation.js
index a3e73c5d4f6e261810a4ec09147692cc74837cd9..e9f279c0ea6d1fa6e85091c4958c30190b0961e5 100644
--- a/atomicservicenavigation/interfaces/atomicservicenavigation.js
+++ b/atomicservicenavigation/interfaces/atomicservicenavigation.js
@@ -145,8 +145,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;
@@ -254,6 +254,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() {
         this.__navPathStack.aboutToBeDeleted();
@@ -271,6 +273,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();
     }
@@ -364,6 +368,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) {
     }
     BackgroundBuilder(gradientBackground, parent = null) {
@@ -396,6 +412,7 @@ export class AtomicServiceNavigation extends ViewPU {
                         gradientBackground.backgroundTheme);
                 }
             });
+            Canvas.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]);
         }, Canvas);
         Canvas.pop();
     }
@@ -962,24 +979,34 @@ export class AtomicServiceNavigation extends ViewPU {
             Stack.create();
             Stack.width('100%');
             Stack.height('100%');
-            Stack.background(this.gradientBackground === undefined ? undefined : {
-                builder: () => {
-                    this.BackgroundBuilder.call(this,
-                        makeBuilderParameterProxy('BackgroundBuilder', {
-                            primaryColor: () => this.gradientBackground.primaryColor,
-                            secondaryColor: () => this.gradientBackground.secondaryColor,
-                            backgroundTheme: () => this.gradientBackground.backgroundTheme,
-                            mixMode: () => this.gradientBackground.mixMode,
-                            alpha: () => this.gradientBackground.alpha
-                        })
-                    );
-                }});
             Stack.onSizeChange((oldValue, newValue) => {
                 this.navigationWidth = newValue.width;
                 this.navigationHeight = newValue.height;
             });
             Stack.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]);
         }, Stack);
+        this.observeComponentCreation2((elmtId, isInitialRender) => {
+            Column.create();
+        }, Column);
+        this.observeComponentCreation2((elmtId, isInitialRender) => {
+            If.create();
+            if (this.gradientBackground !== undefined) {
+                this.ifElseBranchUpdateFunction(0, () => {
+                    this.BackgroundBuilder.bind(this)(makeBuilderParameterProxy('BackgroundBuilder', {
+                        primaryColor: () => this.gradientBackground.primaryColor,
+                        secondaryColor: () => this.gradientBackground.secondaryColor,
+                        backgroundTheme: () => this.gradientBackground.backgroundTheme,
+                        mixMode: () => this.gradientBackground.mixMode,
+                        alpha: () => this.gradientBackground.alpha
+                    }));
+                });
+            } else {
+                this.ifElseBranchUpdateFunction(1, () => {
+                });
+            }
+        }, If);
+        If.pop();
+        Column.pop();
         this.observeComponentCreation2((elmtId, isInitialRender) => {
             If.create();
             if (this.titleOptions?.titleBarType === TitleBarType.DRAWER) {
diff --git a/atomicservicenavigation/source/atomicservicenavigation.ets b/atomicservicenavigation/source/atomicservicenavigation.ets
index 95650eb7941af2bc4278f0016f184b9141b80932..42593cff697b2f286896b8da580cc387a06a83d5 100644
--- a/atomicservicenavigation/source/atomicservicenavigation.ets
+++ b/atomicservicenavigation/source/atomicservicenavigation.ets
@@ -141,8 +141,8 @@ export struct AtomicServiceNavigation {
 
   private settings: RenderingContextSettings = new RenderingContextSettings(true);
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
-  private navigationWidth: number = 0;
-  private navigationHeight: number = 0;
+  @State private navigationWidth: number = 0;
+  @State private navigationHeight: number = 0;
 
   private mainWindow?: window.Window;
   private onWindowSizeChangeCallback?: Callback<Size>;
@@ -187,7 +187,7 @@ export struct AtomicServiceNavigation {
             gradientBackground.backgroundTheme === undefined ? BackgroundTheme.DEFAULT :
             gradientBackground.backgroundTheme);
         }
-      })
+      }).expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
   }
 
   aboutToAppear(): void {
@@ -559,6 +559,17 @@ export struct AtomicServiceNavigation {
 
   build() {
     Stack() {
+      Column() {
+        if (this.gradientBackground !== undefined) {
+          this.BackgroundBuilder({
+            primaryColor: this.gradientBackground.primaryColor,
+            secondaryColor: this.gradientBackground.secondaryColor,
+            backgroundTheme: this.gradientBackground.backgroundTheme,
+            mixMode: this.gradientBackground.mixMode,
+            alpha: this.gradientBackground.alpha
+          })
+        }
+      }
       if (this.titleOptions?.titleBarType === TitleBarType.DRAWER) {
         this.controlButton();
 
@@ -638,13 +649,6 @@ export struct AtomicServiceNavigation {
     }
     .width('100%')
     .height('100%')
-    .background(this.gradientBackground === undefined ? undefined : this.BackgroundBuilder({
-      primaryColor: this.gradientBackground.primaryColor,
-      secondaryColor: this.gradientBackground.secondaryColor,
-      backgroundTheme: this.gradientBackground.backgroundTheme,
-      mixMode: this.gradientBackground.mixMode,
-      alpha: this.gradientBackground.alpha
-    }))
     .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
       this.navigationWidth = newValue.width as number;
       this.navigationHeight = newValue.height as number;