diff --git a/entry/src/main/ets/application/MailBox.ets b/entry/src/main/ets/application/MailBox.ets
index e157a7bbe9aff531ca398a9e9217c3b0e530366d..fb8ba8b28544b26e663396d4de2628d2e73851fe 100644
--- a/entry/src/main/ets/application/MailBox.ets
+++ b/entry/src/main/ets/application/MailBox.ets
@@ -14,8 +14,10 @@
  */
 
 import { BreakpointType } from '../common/BreakpointSystem';
+import { CommonConstants } from '../common/CommonConstants';
 import { MailNavigation } from '../common/MailNavigation';
 import { MailSideBar } from '../common/MailSideBar';
+import { router } from '@kit.ArkUI';
 
 let storage = LocalStorage.getShared();
 
@@ -30,41 +32,60 @@ struct MailBox {
   build() {
     GridRow() {
       GridCol({ span: { sm: 12, md: 12, lg: 12 } }) {
-        SideBarContainer(SideBarContainerType.AUTO) {
-          // Area A
-          Column() {
-            MailSideBar()
-          }
-          .borderWidth({ right: 0.5 })
-          .borderColor({ right: $r('sys.color.comp_divider') })
-          .width('100%')
-          .height('100%')
-          .backgroundColor($r('sys.color.background_primary'))
+        Stack({ alignContent: Alignment.TopStart }) {
+          SideBarContainer(SideBarContainerType.AUTO) {
+            // Area A
+            Column() {
+              MailSideBar()
+            }
+            .borderWidth({ right: 0.5 })
+            .borderColor({ right: $r('sys.color.comp_divider') })
+            .width('100%')
+            .height('100%')
+            .backgroundColor($r('sys.color.background_primary'))
 
-          // Area B+C
-          Column() {
-            Stack() {
-              MailNavigation()
-              if (this.isFold && this.currentBreakPoint !== 'lg') {
-                Column().width('100%').height('100%').backgroundColor('#33000000')
+            // Area B+C
+            Column() {
+              Stack() {
+                MailNavigation()
+                if (this.isFold && this.currentBreakPoint !== 'lg') {
+                  Column().width('100%').height('100%').backgroundColor('#33000000')
+                }
               }
-            }
-          }.height('100%').width('100%')
+            }.height('100%').width('100%')
+          }
+          .divider({ color: $r('sys.color.comp_divider'), strokeWidth: 0 })
+          .sideBarWidth(this.sideBarWidth)
+          .minSideBarWidth(240)
+          .minContentWidth(this.currentBreakPoint === 'sm' ? '100%' : 600)
+          .controlButton({
+            left: new BreakpointType(16 + CommonConstants.BACK_SIZE, 24 + CommonConstants.BACK_SIZE,
+              32 + CommonConstants.BACK_SIZE).GetValue(this.currentBreakPoint),
+            top: px2vp(this.topRectHeight),
+            width: 24,
+            height: 24
+          })
+          .showSideBar(this.currentBreakPoint === 'lg')
+          .onChange((value: boolean) => {
+            this.isFold = value;
+          })
+
+          Button({ type: ButtonType.Circle }) {
+            SymbolGlyph($r('sys.symbol.chevron_backward'))
+              .fontColor([$r('sys.color.icon_primary')])
+              .fontSize($r('sys.float.Title_M'))
+          }
+          .margin({
+            left: new BreakpointType(16, 24, 32).GetValue(this.currentBreakPoint),
+            top: px2vp(this.topRectHeight)
+          })
+          .backgroundColor(Color.Transparent)
+          .height(24)
+          .aspectRatio(1)
+          .onClick(() => {
+            router.back({ url: 'pages/Index' });
+          })
         }
-        .divider({ color: $r('sys.color.comp_divider'), strokeWidth: 0 })
-        .sideBarWidth(this.sideBarWidth)
-        .minSideBarWidth(240)
-        .minContentWidth(this.currentBreakPoint === 'sm' ? '100%' : 600)
-        .controlButton({
-          left: new BreakpointType(16, 24, 32).GetValue(this.currentBreakPoint),
-          top: px2vp(this.topRectHeight),
-          width: 24,
-          height: 24
-        })
-        .showSideBar(this.currentBreakPoint === 'lg')
-        .onChange((value: boolean) => {
-          this.isFold = value;
-        })
       }
     }
     .onBreakpointChange((breakpoint: string) => {
diff --git a/entry/src/main/ets/application/PhotoAlbum.ets b/entry/src/main/ets/application/PhotoAlbum.ets
index e70f41585ddefbeccc719702e01df0ca05332af3..d854043abf6da13cc5755f7b4ab0eef10145dc9d 100644
--- a/entry/src/main/ets/application/PhotoAlbum.ets
+++ b/entry/src/main/ets/application/PhotoAlbum.ets
@@ -17,6 +17,7 @@ import { BreakpointType } from '../common/BreakpointSystem';
 import { CommonConstants } from '../common/CommonConstants';
 import { PhotoContent } from '../common/PhotoContent';
 import { PhotoSideBar } from '../common/PhotoSideBar';
+import { router } from '@kit.ArkUI';
 
 let storage = LocalStorage.getShared();
 
@@ -31,27 +32,46 @@ struct PhotoAlbum {
   build() {
     GridRow() {
       GridCol({ span: { sm: 12, md: 12, lg: 12 } }) {
-        SideBarContainer(SideBarContainerType.AUTO) {
-          Column() {
-            PhotoSideBar()
+        Stack({ alignContent: Alignment.TopStart }) {
+          SideBarContainer(SideBarContainerType.AUTO) {
+            Column() {
+              PhotoSideBar()
+            }
+            .backgroundColor($r('sys.color.comp_background_primary'))
+
+            Column() {
+              PhotoContent({ sideBarStatus: $sideBarStatus })
+            }
+            .backgroundColor($r('sys.color.background_secondary'))
           }
-          .backgroundColor($r('sys.color.comp_background_primary'))
+          .divider({ strokeWidth: 0.5, color: $r('sys.color.comp_divider') })
+          .controlButton({
+            left: new BreakpointType(16 + CommonConstants.BACK_SIZE, 24 + CommonConstants.BACK_SIZE,
+              32 + CommonConstants.BACK_SIZE).GetValue(this.curBp),
+            top: px2vp(this.topRectHeight),
+            width: 24,
+            height: 24
+          })
+          .onChange((value: boolean) => {
+            this.sideBarStatus = value;
+          })
 
-          Column() {
-            PhotoContent({ sideBarStatus: $sideBarStatus })
+          Button({ type: ButtonType.Circle }) {
+            SymbolGlyph($r('sys.symbol.chevron_backward'))
+              .fontColor([$r('sys.color.icon_primary')])
+              .fontSize($r('sys.float.Title_M'))
           }
-          .backgroundColor($r('sys.color.background_secondary'))
+          .margin({
+            left: new BreakpointType(16, 24, 32).GetValue(this.currentBreakPoint),
+            top: px2vp(this.topRectHeight)
+          })
+          .backgroundColor(Color.Transparent)
+          .height(24)
+          .aspectRatio(1)
+          .onClick(() => {
+            router.back({ url: 'pages/Index' });
+          })
         }
-        .divider({ strokeWidth: 0.5, color: $r('sys.color.comp_divider') })
-        .controlButton({
-          left: new BreakpointType(16, 24, 32).GetValue(this.curBp),
-          top: px2vp(this.topRectHeight),
-          width: 24,
-          height: 24
-        })
-        .onChange((value: boolean) => {
-          this.sideBarStatus = value;
-        })
       }
     }
     .onBreakpointChange((breakpoint: string) => {
diff --git a/entry/src/main/ets/common/CommonConstants.ets b/entry/src/main/ets/common/CommonConstants.ets
index b2f6854da1078ab18bc7348c48faebb9ded618b1..371a6fab45639d5bc6455ccd212948e64b28b92d 100644
--- a/entry/src/main/ets/common/CommonConstants.ets
+++ b/entry/src/main/ets/common/CommonConstants.ets
@@ -17,6 +17,10 @@
  * Common constants for all features.
  */
 export class CommonConstants {
+  /**
+   * BACK Button size.
+   */
+  public static readonly BACK_SIZE: number = 48;
   /**
    * Index page padding top size.
    */
diff --git a/entry/src/main/ets/common/MailContent.ets b/entry/src/main/ets/common/MailContent.ets
index c0791504e740f0450bb844cbd90d290d32e2f6ba..28e84d304adac033f25ed8d19a0d99f40e58c732 100644
--- a/entry/src/main/ets/common/MailContent.ets
+++ b/entry/src/main/ets/common/MailContent.ets
@@ -36,7 +36,7 @@ export struct MailContent {
         Column() {
           Text('HHHxx UXD')
             .fontSize(22)
-            .margin({ left: this.curBp === 'sm' ? 32 : 0 })
+            .margin({ left: this.curBp === 'sm' ? 32 + CommonConstants.BACK_SIZE : 0 })
             .fontWeight(FontWeight.Medium)
             .fontColor($r('sys.color.font_primary'))
 
diff --git a/entry/src/main/ets/common/PhotoContent.ets b/entry/src/main/ets/common/PhotoContent.ets
index b8fca8ed0892beb208922b34df895cf3a49ccbb9..5092f7c7daeb953c26a2bcb17481362e40617fa2 100644
--- a/entry/src/main/ets/common/PhotoContent.ets
+++ b/entry/src/main/ets/common/PhotoContent.ets
@@ -72,7 +72,7 @@ export struct PhotoContent {
     Column() {
       Row() {
         Text($r('app.string.album')).fontSize(20).fontWeight(FontWeight.Medium)
-          .margin({ left: this.sideBarStatus ? 0 : 36 })
+          .margin({ left: this.sideBarStatus ? 0 : 36 + CommonConstants.BACK_SIZE })
         Row() {
           SymbolGlyph($r('sys.symbol.plus'))
             .fontSize(24)
diff --git a/entry/src/main/ets/entryability/EntryAbility.ets b/entry/src/main/ets/entryability/EntryAbility.ets
index c698329a02416c333312baeafe6b59f5ba4703aa..d45ef0c71910029d0e018b09b00b48e53c8cd845 100644
--- a/entry/src/main/ets/entryability/EntryAbility.ets
+++ b/entry/src/main/ets/entryability/EntryAbility.ets
@@ -16,7 +16,7 @@
 import { ConfigurationConstant, UIAbility } from '@kit.AbilityKit';
 import { display, window } from '@kit.ArkUI';
 import { hilog } from '@kit.PerformanceAnalysisKit';
-import { BusinessError } from '@kit.BasicServicesKit';
+import { BusinessError, deviceInfo } from '@kit.BasicServicesKit';
 
 export default class EntryAbility extends UIAbility {
   private curBp: string = '';
@@ -66,11 +66,6 @@ export default class EntryAbility extends UIAbility {
         this.updateBreakpoint(windowObj.getWindowProperties().windowRect.width);
         windowObj.on('windowSizeChange', (windowSize) => {
           this.updateBreakpoint(windowSize.width);
-        })
-        windowObj.setWindowLayoutFullScreen(true).then(() => {
-          hilog.info(0x0000, 'testTag', 'Succeeded in setting the window layout to full-screen mode.');
-        }).catch((err: BusinessError) => {
-          hilog.error(0x0000, 'testTag', `Failed to set the window layout to full-screen mode. Cause: ${err.message}`);
         });
       } catch (error) {
         hilog.error(0x0000, 'testTag', `Update window size fail. Cause: ${(error as BusinessError).message}`);
@@ -83,6 +78,7 @@ export default class EntryAbility extends UIAbility {
         hilog.error(0x0000, 'testTag', `Failed to load the content. Cause: ${err.message}`);
         return;
       }
+      this.getWindowDecor(windowStage);
     });
   }
 
@@ -100,4 +96,24 @@ export default class EntryAbility extends UIAbility {
     // Ability has back to background
     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
   }
+
+  private getWindowDecor(windowStage: window.WindowStage) {
+    windowStage.getMainWindow().then((data: window.Window) => {
+      try {
+        if (deviceInfo.deviceType === '2in1' && canIUse('SystemCapability.Window.SessionManager')) {
+          const decorHeight: number = data.getWindowDecorHeight();
+          AppStorage.setOrCreate('topRectHeight', vp2px(decorHeight));
+        } else {
+          hilog.info(0x0000, 'testTag', '%{public}s', 'WindowDecor UnUse');
+        }
+      } catch (error) {
+        const err: BusinessError = error as BusinessError;
+        hilog.info(0x0000, 'testTag', '%{public}s',
+          `Failed to set the visibility of window decor. Cause: ${err.code}, ${err.message}`);
+      }
+    }).catch((err: BusinessError) => {
+      hilog.info(0x0000, 'testTag', '%{public}s',
+        `Failed to obtain the main window. Cause: ${err.code}, ${err.message}`);
+    })
+  }
 }