diff --git a/atomicservicenavigation/interfaces/atomicservicenavigation.js b/atomicservicenavigation/interfaces/atomicservicenavigation.js
index 3ded062ae256d0018028bbd7a3633f9583700503..c3ad84c8228357159b75e67b6982079ed578924d 100644
--- a/atomicservicenavigation/interfaces/atomicservicenavigation.js
+++ b/atomicservicenavigation/interfaces/atomicservicenavigation.js
@@ -405,7 +405,8 @@ export class AtomicServiceNavigation extends ViewPU {
             Canvas.create(this.context);
             Canvas.opacity(transparencyMapArray[(gradientBackground.alpha === undefined) ? GradientAlpha.OPACITY_20 :
                 gradientBackground.alpha]);
-            Canvas.blur(BLUR_CONSTANT);
+            Canvas.backdropBlur(BLUR_CONSTANT);
+            Canvas.height(this.navigationHeight);
             Canvas.backgroundColor(gradientBackground.backgroundTheme === undefined ? backGroundColor[2] :
                 backGroundColor[gradientBackground.backgroundTheme - 1]);
             Canvas.onReady(() => {
@@ -722,6 +723,8 @@ export class AtomicServiceNavigation extends ViewPU {
                                 this.observeComponentCreation2((elmtId, isInitialRender) => {
                                     SymbolGlyph.create();
                                     SymbolGlyph.attributeModifier.bind(this)(this.sideBarOptions?.sideBarIcon);
+                                    SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
+                                    SymbolGlyph.size({ width: 36, height: 36 });
                                 }, SymbolGlyph);
                                 Button.pop();
                             });
@@ -813,10 +816,13 @@ export class AtomicServiceNavigation extends ViewPU {
                                         top: LengthMetrics.vp(8)
                                     });
                                     Button.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None);
+                                    Button.align(Alignment.Top);
                                 }, Button);
                                 this.observeComponentCreation2((elmtId, isInitialRender) => {
                                     SymbolGlyph.create();
                                     SymbolGlyph.attributeModifier.bind(this)(this.titleOptions?.titleIcon);
+                                    SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
+                                    SymbolGlyph.size({ width: 36, height: 36 });
                                 }, SymbolGlyph);
                                 Button.pop();
                             });
@@ -917,6 +923,8 @@ export class AtomicServiceNavigation extends ViewPU {
                     this.observeComponentCreation2((elmtId, isInitialRender) => {
                         SymbolGlyph.create();
                         SymbolGlyph.attributeModifier.bind(this)(this.titleOptions?.titleIcon);
+                        SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
+                        SymbolGlyph.size({ width: 36, height: 36 });
                     }, SymbolGlyph);
                     Button.pop();
                 });
@@ -972,6 +980,8 @@ export class AtomicServiceNavigation extends ViewPU {
                     this.observeComponentCreation2((elmtId, isInitialRender) => {
                         SymbolGlyph.create();
                         SymbolGlyph.attributeModifier.bind(this)(this.titleOptions?.titleIcon);
+                        SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' });
+                        SymbolGlyph.size({ width: 36, height: 36 });
                     }, SymbolGlyph);
                     Button.pop();
                 });
@@ -981,6 +991,7 @@ export class AtomicServiceNavigation extends ViewPU {
                     this.observeComponentCreation2((elmtId, isInitialRender) => {
                         Image.create(this.titleOptions?.titleIcon ?? this.atomicServiceIcon);
                         Image.height(36);
+                        Image.width(36);
                         Image.margin({
                             start: LengthMetrics.vp(this.marginWindowLeft),
                             end: LengthMetrics.vp(-12),
@@ -1030,6 +1041,7 @@ export class AtomicServiceNavigation extends ViewPU {
     initialRender() {
         this.observeComponentCreation2((elmtId, isInitialRender) => {
             Stack.create();
+            Stack.align(Alignment.TopStart);
             Stack.width('100%');
             Stack.height('100%');
             Stack.onSizeChange((oldValue, newValue) => {
diff --git a/atomicservicenavigation/source/atomicservicenavigation.ets b/atomicservicenavigation/source/atomicservicenavigation.ets
index 1d2a8bfbdda1b6f96708b22e5cee8b95797addd6..f316be1540f3bf455620a37ca6779dac7ecdbeb3 100644
--- a/atomicservicenavigation/source/atomicservicenavigation.ets
+++ b/atomicservicenavigation/source/atomicservicenavigation.ets
@@ -167,7 +167,8 @@ export struct AtomicServiceNavigation {
     Canvas(this.context)
       .opacity(transparencyMapArray[(gradientBackground.alpha === undefined) ? GradientAlpha.OPACITY_20 :
       gradientBackground.alpha])
-      .blur(BLUR_CONSTANT)
+      .backdropBlur(BLUR_CONSTANT)
+      .height(this.navigationHeight)
       .backgroundColor(gradientBackground.backgroundTheme === undefined ? backGroundColor[2] :
       backGroundColor[gradientBackground.backgroundTheme - 1])
       .onReady(() => {
@@ -453,6 +454,8 @@ export struct AtomicServiceNavigation {
         Button({ type: ButtonType.Circle }) {
           SymbolGlyph()
             .attributeModifier(this.sideBarOptions?.sideBarIcon)
+            .fontSize($r('sys.float.ohos_id_text_size_headline7'))
+            .size({ width: 36, height: 36 })
         }
         .controlButtonStyle()
       } else {
@@ -472,8 +475,11 @@ export struct AtomicServiceNavigation {
         Button({ type: ButtonType.Circle }) {
           SymbolGlyph()
             .attributeModifier(this.titleOptions?.titleIcon)
+            .fontSize($r('sys.float.ohos_id_text_size_headline7'))
+            .size({ width: 36, height: 36 })
         }
         .controlButtonStyle()
+        .align(Alignment.Top)
       } else {
         Image(this.titleOptions?.titleIcon)
           .controlButtonStyle()
@@ -535,6 +541,8 @@ export struct AtomicServiceNavigation {
       Button({ type: ButtonType.Circle }) {
         SymbolGlyph()
           .attributeModifier(this.titleOptions?.titleIcon)
+          .fontSize($r('sys.float.ohos_id_text_size_headline7'))
+          .size({ width: 36, height: 36 })
       }
       .roundIconStyle()
     } else {
@@ -546,6 +554,7 @@ export struct AtomicServiceNavigation {
   @Styles
   longIconStyles() {
     .height(36)
+    .width(36)
     .margin({
       start: LengthMetrics.vp(this.marginWindowLeft),
       end: LengthMetrics.vp(-12),
@@ -565,9 +574,10 @@ export struct AtomicServiceNavigation {
       Button() {
         SymbolGlyph()
           .attributeModifier(this.titleOptions?.titleIcon)
+          .fontSize($r('sys.float.ohos_id_text_size_headline7'))
+          .size({ width: 36, height: 36 })
       }
       .backgroundColor($r('sys.color.ohos_id_color_button_normal'))
-      .width(36)
       .longIconStyles()
     } else {
       Image(this.titleOptions?.titleIcon ?? this.atomicServiceIcon)
@@ -689,6 +699,7 @@ export struct AtomicServiceNavigation {
         .onNavigationModeChange(this.modeChangeCallback)
       }
     }
+    .align(Alignment.TopStart)
     .width('100%')
     .height('100%')
     .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {