diff --git a/commons/base/src/main/ets/utils/BreakpointType.ets b/commons/base/src/main/ets/utils/BreakpointType.ets
index 6f56b216d6e7cebe58e936c985debbbf64c833e3..0eca3421ad8b3c63262fe0269d16ad2f8aaaa50d 100644
--- a/commons/base/src/main/ets/utils/BreakpointType.ets
+++ b/commons/base/src/main/ets/utils/BreakpointType.ets
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -13,12 +13,6 @@
  * limitations under the License.
  */
 
-/*
-* 最佳实践: 一多断点开发实践
-*/
-
-import { BreakpointConstants } from '../constants/BreakpointConstants';
-
 // [Start break_point_type]
 // [Start dd_break_point_type]
 export class BreakpointType<T> {
diff --git a/features/home/Index.ets b/features/home/Index.ets
index 7434a219ce671f411211ca842ebc7d866addfe88..c0743053504da3bc06aa5be1111026e7598d6621 100644
--- a/features/home/Index.ets
+++ b/features/home/Index.ets
@@ -1 +1,2 @@
-export { Home } from './src/main/ets/view/Home';
\ No newline at end of file
+export { Home } from './src/main/ets/view/Home';
+export { TVHome } from './src/main/ets/view/TVHome';
\ No newline at end of file
diff --git a/features/home/src/main/ets/constants/HomeConstants.ets b/features/home/src/main/ets/constants/HomeConstants.ets
index 44ae6863fff64eb8a2e8686362f51d177773aba4..f0a4983a75a972e487e2288228f2cfd26c5a781a 100644
--- a/features/home/src/main/ets/constants/HomeConstants.ets
+++ b/features/home/src/main/ets/constants/HomeConstants.ets
@@ -221,7 +221,7 @@ export class HomeConstants {
   /**
    * Home header background change height.
    */
-  static readonly BACKGROUND_CHANGE_HEIGHT: number[] = [27, 34, 56];
+  static readonly BACKGROUND_CHANGE_HEIGHT: number[] = [27, 34, 56, 0];
   /**
    * Video grid item space.
    */
@@ -229,7 +229,7 @@ export class HomeConstants {
   /**
    * Video grid margin.
    */
-  static readonly VIDEO_GRID_MARGIN: number[] = [32, 48, 64];
+  static readonly VIDEO_GRID_MARGIN: number[] = [32, 48, 64, 80];
   /**
    * Number of displayed icons.
    */
@@ -238,6 +238,10 @@ export class HomeConstants {
    * Lg sidebar width.
    */
   static readonly LG_SIDEBAR_WIDTH: number = 96;
+  /**
+   * Lg sidebar width.
+   */
+  static readonly XL_SIDEBAR_WIDTH: number = 260;
   /**
    * Video grid description height.
    */
@@ -334,5 +338,34 @@ export class HomeConstants {
   /**
    * Item width of IconView.
    */
-  static readonly ICONVIEW_ITEM_WIDTH: number[] = [40, 43, 45];
+  static readonly ICONVIEW_ITEM_WIDTH: number[] = [40, 43, 45, 56];
+  /**
+   * TV Banner Image count
+   * */
+  static readonly TV_BANNER_IMAGE_COUNT: number = 5;
+  /**
+   * TV Banner scale param two
+   * */
+  static readonly TV_BANNER_IMAGE_SCALE_1: ScaleOptions = { x: 0.6, y: 0.7 };
+  /**
+   * TV Banner scale param one
+   * */
+  static readonly TV_BANNER_IMAGE_SCALE_2: ScaleOptions = { x: 0.7, y: 0.8 };
+  /**
+   * TV Banner scale param three
+   * */
+  static readonly TV_BANNER_IMAGE_SCALE_3: ScaleOptions = { x: 2.2, y: 1 };
+  /**
+   * TV Banner scale param two
+   * */
+  // static readonly TV_BANNER_IMAGE_SCALE_1: ScaleOptions = { x: 0.6, y: 0.6 };
+  // /**
+  //  * TV Banner scale param one
+  //  * */
+  // static readonly TV_BANNER_IMAGE_SCALE_2: ScaleOptions = { x: 0.7, y: 0.7 };
+  // /**
+  //  * TV Banner scale param three
+  //  * */
+  // static readonly TV_BANNER_IMAGE_SCALE_3: ScaleOptions = { x: 2.2, y: 2.0 };
+
 }
\ No newline at end of file
diff --git a/features/home/src/main/ets/utils/PreviousVideoUtil.ets b/features/home/src/main/ets/utils/PreviousVideoUtil.ets
index 0c82b70e97134f1d64c13c838edb1b95537c62e6..c4abd75a8f09e54288008759f3f4c40225bf5e4a 100644
--- a/features/home/src/main/ets/utils/PreviousVideoUtil.ets
+++ b/features/home/src/main/ets/utils/PreviousVideoUtil.ets
@@ -13,12 +13,11 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants } from '@ohos/commons';
 import { HomeConstants } from '../constants/HomeConstants';
 
 export class PreviousVideoUtil {
-  static getImgAspectRatio(currentWidthBreakpoint: string, index: number): number {
-    if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM) {
+  static getImgAspectRatio(currentWidthBreakpoint: number, index: number): number {
+    if (currentWidthBreakpoint === WidthBreakpoint.WIDTH_SM) {
       switch (index) {
         case 2:
           return HomeConstants.PREVIOUS_TWO_RATIOS[0];
@@ -27,7 +26,7 @@ export class PreviousVideoUtil {
         default:
           return HomeConstants.PREVIOUS_TWO_RATIOS[2];
       }
-    } else if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+    } else if (currentWidthBreakpoint === WidthBreakpoint.WIDTH_MD) {
       switch (index) {
         case 2:
           return HomeConstants.PREVIOUS_TWO_RATIOS[3];
diff --git a/features/home/src/main/ets/view/BannerView.ets b/features/home/src/main/ets/view/BannerView.ets
index d7b28e7af2d10fc7d91d6c14c598468a6bcf48e5..a78a1591c6781fc647d991466ab2b16135990c4b 100644
--- a/features/home/src/main/ets/view/BannerView.ets
+++ b/features/home/src/main/ets/view/BannerView.ets
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -13,11 +13,7 @@
  * limitations under the License.
  */
 
-/*
-* 最佳实践: 一多交互事件开发实践
-*/
-
-import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { BreakpointConstants, WindowInfo } from '@ohos/commons';
 import { BreakpointType } from '@ohos/commons';
 import { HomeConstants } from '../constants/HomeConstants';
 import { Banner, BannerViewModel } from '../viewmodel/BannerViewModel';
@@ -38,7 +34,7 @@ class BannerDataSource implements IDataSource {
     return this.bannerImgList[index];
   }
 
-  registerDataChangeListener(listener: DataChangeListener): void {
+  registerDataChangeListener(_listener: DataChangeListener): void {
   }
 
   unregisterDataChangeListener() {
@@ -47,8 +43,7 @@ class BannerDataSource implements IDataSource {
 
 @Component
 export struct BannerView {
-  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
-  @StorageLink('windowWidth') windowWidth: number = 0;
+  @ObjectLink mainWindowInfo: WindowInfo;
   @StorageLink('currentTopIndex') currentTopIndex: number = 0;
   private bannerImgList: Banner[] = new BannerViewModel().getBannerList();
   private bannerDataSource: BannerDataSource = new BannerDataSource([]);
@@ -69,7 +64,8 @@ export struct BannerView {
             Stack() {
               // [StartExclude swiper1_lazyforeach]
               // [EndExclude jh_lazy_for_each]
-              Image(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? item.getBannerImg().getImgSrcSm() :
+              Image(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ?
+                item.getBannerImg().getImgSrcSm() :
                 item.getBannerImg().getImgSrc())
                 .objectFit(ImageFit.Fill)
                 .borderRadius($r('app.float.banner_img_border_radius'))
@@ -79,81 +75,83 @@ export struct BannerView {
                 .zIndex(1)
               // [StartExclude jh_lazy_for_each]
               Column() {
-                Text(item.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
+                Text(item.getDescription().getIsLeftCenter().getValue(this.mainWindowInfo.widthBp) ?
                   `${item.getDescription().getDescription()[0]}${item.getDescription().getDescription()[1]}` :
                   item.getDescription().getDescription()[0])
-                  .fontSize(item.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[0])
+                  .fontSize(item.getDescription().getFontSize().getValue(this.mainWindowInfo.widthBp)[0])
                   .fontWeight(item.getDescription().getFontWeight()[0])
-                  .lineHeight(item.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[0])
+                  .lineHeight(item.getDescription().getLineHeight().getValue(this.mainWindowInfo.widthBp)[0])
                   .fontColor(Color.White)
                   .letterSpacing('1vp')
                   .maxLines(1)
 
                 Text(item.getDescription().getDescription()[1])
-                  .fontSize(item.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[0])
+                  .fontSize(item.getDescription().getFontSize().getValue(this.mainWindowInfo.widthBp)[0])
                   .fontWeight(item.getDescription().getFontWeight()[0])
-                  .lineHeight(item.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[0])
+                  .lineHeight(item.getDescription().getLineHeight().getValue(this.mainWindowInfo.widthBp)[0])
                   .fontColor(Color.White)
                   .letterSpacing('1vp')
                   .maxLines(1)
-                  .visibility(item.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
-                  Visibility.None : Visibility.Visible)
+                  .visibility(item.getDescription().getIsLeftCenter().getValue(this.mainWindowInfo.widthBp) ?
+                    Visibility.None : Visibility.Visible)
 
                 Text(item.getDescription().getDescription()[2])
-                  .fontSize(item.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[1])
+                  .fontSize(item.getDescription().getFontSize().getValue(this.mainWindowInfo.widthBp)[1])
                   .fontWeight(item.getDescription().getFontWeight()[1])
-                  .lineHeight(item.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[1])
+                  .lineHeight(item.getDescription().getLineHeight().getValue(this.mainWindowInfo.widthBp)[1])
                   .fontColor(Color.White)
                   .margin({
-                    top: item.getDescription().getTopPosition().getValue(this.currentWidthBreakpoint)[1]
+                    top: item.getDescription().getTopPosition().getValue(this.mainWindowInfo.widthBp)[1]
                   })
                   .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[1])
                   .maxLines(1)
               }
               .padding({
-                left: !item.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
-                  item.getDescription().getLeftPosition().getValue(this.currentWidthBreakpoint)[0] : '0',
-                top: !item.getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ?
-                  item.getDescription().getTopPosition().getValue(this.currentWidthBreakpoint)[0] : '0'
+                left: !item.getDescription().getIsLeftCenter().getValue(this.mainWindowInfo.widthBp) ?
+                  item.getDescription().getLeftPosition().getValue(this.mainWindowInfo.widthBp)[0] : '0',
+                top: !item.getDescription().getIsTopCenter().getValue(this.mainWindowInfo.widthBp) ?
+                  item.getDescription().getTopPosition().getValue(this.mainWindowInfo.widthBp)[0] : '0'
               })
-              .alignItems(item.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
+              .alignItems(item.getDescription().getIsLeftCenter().getValue(this.mainWindowInfo.widthBp) ?
                 HorizontalAlign.Center : HorizontalAlign.Start)
-              .justifyContent(!item.getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ?
+              .justifyContent(!item.getDescription().getIsTopCenter().getValue(this.mainWindowInfo.widthBp) ?
                 FlexAlign.Start : FlexAlign.Center)
               .height('100%')
               .width('100%')
               .zIndex(2)
+
               // [EndExclude swiper1_lazyforeach]
             }
-            .height(item.getBannerImg().getHeight().getValue(this.currentWidthBreakpoint))
+            .height(item.getBannerImg().getHeight().getValue(this.mainWindowInfo.widthBp))
             .width('100%')
             // The width and height vary with the container assembly and the aspect ratio remains unchanged.
-            .aspectRatio(new BreakpointType(1.49, 1.6,
-              2.1).getValue(this.currentWidthBreakpoint))
+            .aspectRatio(new BreakpointType(1.91, this.mainWindowInfo.heightBp === HeightBreakpoint.HEIGHT_MD ? 1.91 : 1.49, 1.6,
+              2.1, 2.1).getValue(this.mainWindowInfo.widthBp))
             .groupDefaultFocus(index === 0 ? true : false)
             .focusable(true)
             .padding({
               top: $r('app.float.banner_margin'),
               bottom: $r('app.float.banner_margin'),
-              left: this.currentWidthBreakpoint === 'sm' ? $r('app.float.banner_padding_sm') : 0,
-              right: this.currentWidthBreakpoint === 'sm' ? $r('app.float.banner_padding_sm') : 0
+              left: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ? $r('app.float.banner_padding_sm') : 0,
+              right: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ? $r('app.float.banner_padding_sm') : 0
             })
+
             // [EndExclude jh_lazy_for_each]
           }, (item: Banner, index: number) => index + JSON.stringify(item))
         }
         // [StartExclude jh_lazy_for_each]
-        .displayCount(this.currentWidthBreakpoint === 'sm' ? 1 : 2)
+        .displayCount(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ? 1 : 2)
         // Interval between banner images
         .itemSpace('12vp')
-        .prevMargin(new BreakpointType("0vp",
-          "12vp", "64vp")
-          .getValue(this.currentWidthBreakpoint))
-        .nextMargin(new BreakpointType("0vp",
-          "12vp", "64vp")
-          .getValue(this.currentWidthBreakpoint))
+        .prevMargin(new BreakpointType('0vp', '0vp',
+          '12vp', '64vp', '64vp')
+          .getValue(this.mainWindowInfo.widthBp))
+        .nextMargin(new BreakpointType('0vp', '0vp',
+          '12vp', '64vp', '64vp')
+          .getValue(this.mainWindowInfo.widthBp))
         // [End swiper1_lazyforeach]
         // Setting the navigation point Style of the swiper.
-        .indicator(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Indicator.dot()
+        .indicator(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ? Indicator.dot()
           .itemWidth($r('app.float.swiper_item_size'))
           .itemHeight($r('app.float.swiper_item_size'))
           .selectedItemWidth($r('app.float.swiper_selected_item_width'))
@@ -164,13 +162,14 @@ export struct BannerView {
         )
         .loop(true)
         .width('100%')
-        .visibility((this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) &&
+        .visibility((this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL) &&
           (this.currentTopIndex === 1) ? Visibility.None : Visibility.Visible)
         .effectMode(EdgeEffect.None)
         // The sizes of the front and rear banners on the MD and LG devices are different.
         .index(2)
         // [EndExclude jh_lazy_for_each]
         .tabIndex(getTabIndex('Banner'))
+
         // [End jh_lazy_for_each]
         // Switch the tab to switch the banner display effect.
 
@@ -178,14 +177,16 @@ export struct BannerView {
         Row({ space: '12vp' }) {
           BannerText({
             banner: this.bannerImgList[2],
-            index: 0
+            index: 0,
+            mainWindowInfo: this.mainWindowInfo
           })
             .layoutWeight(4)
             .height('100%')
 
           BannerText({
             banner: this.bannerImgList[1],
-            index: 1
+            index: 1,
+            mainWindowInfo: this.mainWindowInfo
           })
             .layoutWeight(4)
             .height('100%')
@@ -193,28 +194,31 @@ export struct BannerView {
           Column() {
             BannerText({
               banner: this.bannerImgList[0],
-              index: 2
+              index: 2,
+              mainWindowInfo: this.mainWindowInfo
             })
               .margin({ bottom: $r('app.float.new_banner_3_margin') })
               .layoutWeight(1)
 
             BannerText({
               banner: this.bannerImgList[4],
-              index: 3
+              index: 3,
+              mainWindowInfo: this.mainWindowInfo
             })
               .margin({ top: $r('app.float.new_banner_3_margin') })
               .layoutWeight(1)
           }
           .layoutWeight(3)
         }
-        .height(this.getBannerNewHeight(this.windowWidth))
+        .height(this.getBannerNewHeight(this.mainWindowInfo.windowSize.width))
         .width('100%')
-        .visibility((this.currentWidthBreakpoint === 'lg') &&
+        .visibility((this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL) &&
           (this.currentTopIndex === 1) ? Visibility.Visible : Visibility.None)
         .padding({
           left: $r('app.float.banner_padding_sm'),
           right: $r('app.float.banner_padding_sm')
         })
+
         // [End home_constants]
       }
       .width('100%')
@@ -223,47 +227,79 @@ export struct BannerView {
       Row() {
         // Immersive layout.
         Column() {
-          Text(this.bannerImgList[2].getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
+          Text(this.bannerImgList[2].getDescription().getIsLeftCenter().getValue(this.mainWindowInfo.widthBp) ?
             `${this.bannerImgList[2].getDescription().getDescription()[0]}${this.bannerImgList[2].getDescription()
               .getDescription()[1]}` : this.bannerImgList[2].getDescription().getDescription()[0])
-            .fontSize(new BreakpointType($r('app.float.immersive_text_1_font_sm'), $r('app.float.immersive_text_1_font_md'), $r('app.float.immersive_text_1_font_lg')).getValue(this.currentWidthBreakpoint))
+            .fontSize(new BreakpointType($r('app.float.immersive_text_1_font_sm'),
+              $r('app.float.immersive_text_1_font_sm'),
+              $r('app.float.immersive_text_1_font_md'),
+              $r('app.float.immersive_text_1_font_lg'),
+              $r('app.float.immersive_text_1_font_lg')).getValue(this.mainWindowInfo.widthBp))
             .fontWeight(this.bannerImgList[2].getDescription().getFontWeight()[0])
-            .lineHeight(new BreakpointType($r('app.float.immersive_text_1_line_sm'), $r('app.float.immersive_text_1_line_md'), $r('app.float.immersive_text_1_line_lg')).getValue(this.currentWidthBreakpoint))
+            .lineHeight(new BreakpointType($r('app.float.immersive_text_1_line_sm'),
+              $r('app.float.immersive_text_1_line_sm'),
+              $r('app.float.immersive_text_1_line_md'),
+              $r('app.float.immersive_text_1_line_lg'),
+              $r('app.float.immersive_text_1_line_lg')).getValue(this.mainWindowInfo.widthBp))
             .fontColor(Color.White)
             .letterSpacing('1vp')
             .maxLines(1)
 
           Text(this.bannerImgList[2].getDescription().getDescription()[1])
-            .fontSize(new BreakpointType($r('app.float.immersive_text_1_font_sm'), $r('app.float.immersive_text_1_font_md'), $r('app.float.immersive_text_1_font_lg')).getValue(this.currentWidthBreakpoint))
+            .fontSize(new BreakpointType($r('app.float.immersive_text_1_font_sm'),
+              $r('app.float.immersive_text_1_font_sm'),
+              $r('app.float.immersive_text_1_font_md'),
+              $r('app.float.immersive_text_1_font_lg'),
+              $r('app.float.immersive_text_1_font_lg')).getValue(this.mainWindowInfo.widthBp))
             .fontWeight(this.bannerImgList[2].getDescription().getFontWeight()[0])
-            .lineHeight(new BreakpointType($r('app.float.immersive_text_1_line_sm'), $r('app.float.immersive_text_1_line_md'), $r('app.float.immersive_text_1_line_lg')).getValue(this.currentWidthBreakpoint))
+            .lineHeight(new BreakpointType($r('app.float.immersive_text_1_line_sm'),
+              $r('app.float.immersive_text_1_line_sm'),
+              $r('app.float.immersive_text_1_line_md'),
+              $r('app.float.immersive_text_1_line_lg'),
+              $r('app.float.immersive_text_1_line_lg')).getValue(this.mainWindowInfo.widthBp))
             .fontColor(Color.White)
             .letterSpacing('1vp')
             .maxLines(1)
-            .visibility(this.bannerImgList[2].getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
-            Visibility.None : Visibility.Visible)
+            .visibility(this.bannerImgList[2].getDescription().getIsLeftCenter().getValue(this.mainWindowInfo.widthBp) ?
+              Visibility.None : Visibility.Visible)
 
           Text(this.bannerImgList[2].getDescription().getDescription()[2])
-            .fontSize(new BreakpointType($r('app.float.immersive_text_2_font_sm'), $r('app.float.immersive_text_2_font_md'), $r('app.float.immersive_text_2_font_lg')).getValue(this.currentWidthBreakpoint))
+            .fontSize(new BreakpointType($r('app.float.immersive_text_2_font_sm'),
+              $r('app.float.immersive_text_2_font_sm'),
+              $r('app.float.immersive_text_2_font_md'),
+              $r('app.float.immersive_text_2_font_lg'),
+              $r('app.float.immersive_text_2_font_lg')).getValue(this.mainWindowInfo.widthBp))
             .fontWeight(this.bannerImgList[2].getDescription().getFontWeight()[1])
-            .lineHeight(new BreakpointType($r('app.float.immersive_text_2_line_sm'), $r('app.float.immersive_text_2_line_md'), $r('app.float.immersive_text_2_line_lg')).getValue(this.currentWidthBreakpoint))
+            .lineHeight(new BreakpointType($r('app.float.immersive_text_2_line_sm'),
+              $r('app.float.immersive_text_2_line_sm'),
+              $r('app.float.immersive_text_2_line_md'),
+              $r('app.float.immersive_text_2_line_lg'),
+              $r('app.float.immersive_text_2_line_lg')).getValue(this.mainWindowInfo.widthBp))
             .fontColor(Color.White)
             .margin({
-              top: this.bannerImgList[2].getDescription().getTopPosition().getValue(this.currentWidthBreakpoint)[1]
+              top: this.bannerImgList[2].getDescription().getTopPosition().getValue(this.mainWindowInfo.widthBp)[1]
             })
             .letterSpacing('3vp')
             .maxLines(1)
         }
         .padding({
-          left: new BreakpointType($r('app.float.immersive_col_padding_left_sm'), $r('app.float.immersive_col_padding_left_md'), $r('app.float.immersive_col_padding_left_lg')).getValue(this.currentWidthBreakpoint),
-          top: new BreakpointType($r('app.float.immersive_col_padding_top_sm'), $r('app.float.immersive_col_padding_top_md'), $r('app.float.immersive_col_padding_top_lg')).getValue(this.currentWidthBreakpoint)
+          left: new BreakpointType($r('app.float.immersive_col_padding_left_sm'),
+            $r('app.float.immersive_col_padding_left_sm'),
+            $r('app.float.immersive_col_padding_left_md'),
+            $r('app.float.immersive_col_padding_left_lg'),
+            $r('app.float.immersive_col_padding_left_lg')).getValue(this.mainWindowInfo.widthBp),
+          top: new BreakpointType($r('app.float.immersive_col_padding_top_sm'),
+            $r('app.float.immersive_col_padding_top_sm'),
+            $r('app.float.immersive_col_padding_top_md'),
+            $r('app.float.immersive_col_padding_top_lg'),
+            $r('app.float.immersive_col_padding_top_lg')).getValue(this.mainWindowInfo.widthBp)
         })
         .height('100%')
         .width('100%')
-        .alignItems(new BreakpointType(true, false, false).getValue(this.currentWidthBreakpoint) ?
-        HorizontalAlign.Center : HorizontalAlign.Start)
-        .justifyContent(!this.bannerImgList[2].getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ?
-        FlexAlign.Start : FlexAlign.Center)
+        .alignItems(new BreakpointType(true, true, false, false, false).getValue(this.mainWindowInfo.widthBp) ?
+          HorizontalAlign.Center : HorizontalAlign.Start)
+        .justifyContent(!this.bannerImgList[2].getDescription().getIsTopCenter().getValue(this.mainWindowInfo.widthBp) ?
+          FlexAlign.Start : FlexAlign.Center)
       }
       .margin({
         top: $r('app.float.immersive_col_margin')
@@ -272,28 +308,39 @@ export struct BannerView {
         left: $r('app.float.home_content_padding'),
         right: $r('app.float.home_content_padding')
       })
-      .height(new BreakpointType($r('app.float.immersive_banner_height_sm'), $r('app.float.immersive_banner_height_md'), $r('app.float.immersive_banner_height_lg')).getValue(this.currentWidthBreakpoint))
+      .height(new BreakpointType($r('app.float.immersive_banner_height_sm'),
+        $r('app.float.immersive_banner_height_sm'), $r('app.float.immersive_banner_height_md'),
+        $r('app.float.immersive_banner_height_lg'),
+        $r('app.float.immersive_banner_height_lg')).getValue(this.mainWindowInfo.widthBp))
       .width('100%')
       .visibility(this.currentTopIndex === 2 ? Visibility.Visible : Visibility.None)
     }
     .width('100%')
     .padding({
-      left: this.currentWidthBreakpoint === 'vp' && this.currentTopIndex === 2 ? $r('app.float.side_bar_width') : 0
+      left: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG && this.currentTopIndex === 2 ? $r('app.float.side_bar_width') : 0
     })
   }
 
   getBannerNewHeight(windowWidth: number): string {
     // Obtain the window width and subtract the blank parts on both sides.
-    let result: number = this.getUIContext().px2vp(windowWidth) - new BreakpointType(32, 48, 64).getValue(this.currentWidthBreakpoint) - 96;
-    // Calculate the width of a single image based on the percent.
-    result = (result - 12 * 2) * 4 / 11;
-    // Calculate the total height of the grid layout.
-    return result / 1.5 + 'vp';
+    let result: number =
+      this.getUIContext().px2vp(windowWidth) -
+      new BreakpointType(32, 32, 48, 64, 64).getValue(this.mainWindowInfo.widthBp);
+    if (this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG) {
+      // Calculate the width of a single image based on the percent.
+      result = (result - 96 - 12 * 2) * 4 / 11;
+      // Calculate the total height of the grid layout.
+      return result / 1.5 + 'vp';
+    } else {
+      result = (result - 260 - 12 * 2) * 4 / 11;
+      return result / 1.8 + 'vp';
+    }
   }
 }
 
 @Component
 struct BannerText {
+  @ObjectLink mainWindowInfo: WindowInfo;
   public banner: Banner = new BannerViewModel().getBannerList()[0];
   public currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
   public index: number = 0;
@@ -309,43 +356,43 @@ struct BannerText {
         .borderRadius($r('app.float.banner_img_border_radius'))
 
       Column() {
-        Text(this.banner.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
+        Text(this.banner.getDescription().getIsLeftCenter().getValue(this.mainWindowInfo.widthBp) ?
           `${this.banner.getDescription().getDescription()[0]}${this.banner.getDescription().getDescription()[1]}` :
           this.banner.getDescription().getDescription()[0])
-          .fontSize(this.banner.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[0])
+          .fontSize(this.banner.getDescription().getFontSize().getValue(this.mainWindowInfo.widthBp)[0])
           .fontWeight(this.banner.getDescription().getFontWeight()[0])
-          .lineHeight(this.banner.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[0])
+          .lineHeight(this.banner.getDescription().getLineHeight().getValue(this.mainWindowInfo.widthBp)[0])
           .fontColor(Color.White)
           .letterSpacing('1vp')
           .maxLines(1)
         Text(this.banner.getDescription().getDescription()[1])
-          .fontSize(this.banner.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[0])
+          .fontSize(this.banner.getDescription().getFontSize().getValue(this.mainWindowInfo.widthBp)[0])
           .fontWeight(this.banner.getDescription().getFontWeight()[0])
-          .lineHeight(this.banner.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[0])
+          .lineHeight(this.banner.getDescription().getLineHeight().getValue(this.mainWindowInfo.widthBp)[0])
           .fontColor(Color.White)
           .letterSpacing('1vp')
           .maxLines(1)
-          .visibility(this.banner.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
+          .visibility(this.banner.getDescription().getIsLeftCenter().getValue(this.mainWindowInfo.widthBp) ?
             Visibility.None : Visibility.Visible)
 
         Text(this.banner.getDescription().getDescription()[2])
-          .fontSize(this.banner.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[1])
+          .fontSize(this.banner.getDescription().getFontSize().getValue(this.mainWindowInfo.widthBp)[1])
           .fontWeight(this.banner.getDescription().getFontWeight()[1])
-          .lineHeight(this.banner.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[1])
+          .lineHeight(this.banner.getDescription().getLineHeight().getValue(this.mainWindowInfo.widthBp)[1])
           .fontColor(Color.White)
-          .margin({ top: this.banner.getDescription().getTopPosition().getValue(this.currentWidthBreakpoint)[1] })
+          .margin({ top: this.banner.getDescription().getTopPosition().getValue(this.mainWindowInfo.widthBp)[1] })
           .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[1])
           .maxLines(1)
       }
       .padding({
-        left: !this.banner.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
-          this.banner.getDescription().getLeftPosition().getValue(this.currentWidthBreakpoint)[0] : '0',
-        top: !this.banner.getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ?
-          this.banner.getDescription().getTopPosition().getValue(this.currentWidthBreakpoint)[0] : '0'
+        left: !this.banner.getDescription().getIsLeftCenter().getValue(this.mainWindowInfo.widthBp) ?
+          this.banner.getDescription().getLeftPosition().getValue(this.mainWindowInfo.widthBp)[0] : '0',
+        top: !this.banner.getDescription().getIsTopCenter().getValue(this.mainWindowInfo.widthBp) ?
+          this.banner.getDescription().getTopPosition().getValue(this.mainWindowInfo.widthBp)[0] : '0'
       })
-      .alignItems(this.banner.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ?
+      .alignItems(this.banner.getDescription().getIsLeftCenter().getValue(this.mainWindowInfo.widthBp) ?
         HorizontalAlign.Center : HorizontalAlign.Start)
-      .justifyContent(!this.banner.getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ?
+      .justifyContent(!this.banner.getDescription().getIsTopCenter().getValue(this.mainWindowInfo.widthBp) ?
         FlexAlign.Start : FlexAlign.Center)
       .width('100%')
       .height('100%')
diff --git a/features/home/src/main/ets/view/CommonView.ets b/features/home/src/main/ets/view/CommonView.ets
index 1e490b6a9addd04505b8a47aa48ce99c9d83e945..3624c164e5bc60c82f3d73e5cafad0d8dba6394a 100644
--- a/features/home/src/main/ets/view/CommonView.ets
+++ b/features/home/src/main/ets/view/CommonView.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants, BreakpointType, CommonConstants } from '@ohos/commons';
+import { BreakpointType, CommonConstants, WindowInfo } from '@ohos/commons';
 import { HomeConstants } from '../constants/HomeConstants';
 
 @Component
@@ -44,7 +44,6 @@ export struct VideoImgRating {
 
 @Component
 export struct VideoTitle {
-  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
   @StorageLink('currentTopIndex') currentTopIndex: number = 0;
   public title: ResourceStr = '';
 
@@ -62,7 +61,6 @@ export struct VideoTitle {
 
 @Component
 export struct VideoContent {
-  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
   @StorageLink('currentTopIndex') currentTopIndex: number = 0;
   public content: ResourceStr = '';
 
@@ -81,7 +79,7 @@ export struct VideoContent {
 
 @Component
 export struct SubtitleComponent {
-  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @ObjectLink mainWindowInfo: WindowInfo;
   @StorageLink('currentTopIndex') currentTopIndex: number = 0;
   public title: ResourceStr = '';
 
@@ -93,10 +91,15 @@ export struct SubtitleComponent {
       .lineHeight($r('app.float.sub_title_row_height'))
       .width(CommonConstants.FULL_PERCENT)
       .padding({
-        left: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
-          $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint),
-        right: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
-          $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint)})
+        left: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_sm'),
+          $r('app.float.home_content_padding_md'),
+          $r('app.float.home_content_padding_lg'),
+          $r('app.float.home_content_padding_lg')).getValue(this.mainWindowInfo.widthBp),
+        right: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_sm'),
+          $r('app.float.home_content_padding_md'),
+          $r('app.float.home_content_padding_lg'),
+          $r('app.float.home_content_padding_lg')).getValue(this.mainWindowInfo.widthBp)
+      })
   }
 }
 
@@ -119,14 +122,16 @@ export struct VideoImgComponent {
 
 @Component
 export struct VideoImgPlay {
-  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @ObjectLink mainWindowInfo: WindowInfo;
 
   build() {
     Column() {
       Image($r('app.media.new_video_play'))
-        .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.video_img_size_lg') :
+        .height(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ||
+          this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ? $r('app.float.video_img_size_lg') :
           $r('app.float.video_img_size'))
-        .width(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.video_img_size_lg') :
+        .width(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ||
+          this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ? $r('app.float.video_img_size_lg') :
           $r('app.float.video_img_size'))
     }
     .width(CommonConstants.FULL_PERCENT)
@@ -135,6 +140,26 @@ export struct VideoImgPlay {
   }
 }
 
+@Component
+export struct MembershipTag {
+  public tagText: Resource | ResourceStr = $r('app.string.Membership');
+
+  build() {
+    Stack() {
+      Image($r('app.media.newMarkGray'))
+        .width(45)
+        .height(20)
+      Text(this.tagText)
+        .fontColor(Color.White)
+        .fontSize(12)
+    }
+    .margin({
+      top: 5,
+      right: 7
+    })
+  }
+}
+
 export function getTabIndex(direction: string): number {
   let tabIndex: number = 0;
   switch (direction) {
diff --git a/features/home/src/main/ets/view/DailyVideo.ets b/features/home/src/main/ets/view/DailyVideo.ets
index f6868fe0733d24f03f51699d0e43687c656b3f88..618c55a53ebdc2c88919b57a261b4d9822c47226 100644
--- a/features/home/src/main/ets/view/DailyVideo.ets
+++ b/features/home/src/main/ets/view/DailyVideo.ets
@@ -13,14 +13,16 @@
  * limitations under the License.
  */
 
-import { BreakpointType } from '@ohos/commons';
+import { BreakpointType, WindowInfo } from '@ohos/commons';
 import { VideoImage, VideoImgViewModel } from '../viewmodel/VideoImgViewModel';
-import { getTabIndex, SubtitleComponent, VideoImgComponent, VideoImgPlay, VideoImgRating } from './CommonView';
+import { getTabIndex,
+  MembershipTag,
+  SubtitleComponent, VideoImgComponent, VideoImgPlay, VideoImgRating } from './CommonView';
 
 @Component
 export struct DailyVideo {
-  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'lg';
-  @StorageLink('windowWidth') windowWidth: number = 0;
+  @ObjectLink mainWindowInfo: WindowInfo;
+  @Prop isTVShow: boolean;
   @StorageLink('currentTopIndex') currentTopIndex: number = 0;
   @State isShowingMainBorder: boolean = false;
   private dailyVideoImgList: VideoImage[] = new VideoImgViewModel().getDailyVideoImgList();
@@ -29,14 +31,14 @@ export struct DailyVideo {
   build() {
     // [Start sub_title_component]
     Column() {
-      SubtitleComponent({ title: '每日佳片' })
+      SubtitleComponent({ title: $r('app.string.DailyVideo'), mainWindowInfo: this.mainWindowInfo })
 
       GridRow({
-        columns: { sm: 4, md: 12, lg: 12 },
+        columns: { xs: 4, sm: 4, md: 12, lg: 12, xl: 12 },
         gutter: '12vp'
       }) {
         // Main video section.
-        GridCol({ span: { sm: 4, md: 6, lg: 6 } }) {
+        GridCol({ span: { xs: 4, sm: 4, md: 6, lg: 6, xl: 6 } }) {
           Column() {
             // [StartExclude sub_title_component]
             Stack({ alignContent: Alignment.Bottom }) {
@@ -46,123 +48,179 @@ export struct DailyVideo {
                 .width('100%')
                 .height('100%')
                 .draggable(false)
-                .borderRadius({
+                .borderRadius(this.isTVShow ? 18 : {
                   topLeft: '18vp',
                   topRight: '18vp'
                 })
-              VideoImgPlay()
+              VideoImgPlay({
+                mainWindowInfo: this.mainWindowInfo
+              })
+                .visibility(this.isTVShow ? Visibility.None : Visibility.Visible)
 
               Row() {
                 Text(this.mainDailyVideoImg.getTitle())
-                  .fontSize(this.currentWidthBreakpoint === 'lg' ? '20fp' : '16fp')
+                  .fontSize(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ? '20fp' : '16fp')
                   .fontColor(Color.White)
                   .fontWeight(700)
-                  .margin({ left: this.currentWidthBreakpoint === 'lg' ? '16vp' : '12vp' })
+                  .margin({ left: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ? '16vp' : '12vp' })
                   .layoutWeight(1)
                   .maxLines(1)
 
                 Text(this.mainDailyVideoImg.getRating())
-                  .fontSize(this.currentWidthBreakpoint === 'lg' ? '12fp' : '8fp')
+                  .fontSize(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ? '12fp' : '8fp')
                   .fontWeight(FontWeight.Normal)
                   .fontColor(Color.White)
-                  .height(this.currentWidthBreakpoint === 'lg' ? '18vp' : '12vp')
-                  .width(this.currentWidthBreakpoint === 'lg' ? '30vp' : '20vp')
+                  .height(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ? '18vp' : '12vp')
+                  .width(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ? '30vp' : '20vp')
                   .margin({
-                    right: this.currentWidthBreakpoint === 'lg'? '16vp' : '12vp',
-                    top: this.currentWidthBreakpoint === 'lg' ? '6vp' : '5vp'
+                    right: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ? '16vp' : '12vp',
+                    top: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ? '6vp' : '5vp'
                   })
                   .backgroundColor('#4D000000')
-                  .borderRadius(this.currentWidthBreakpoint === 'lg' ? '3vp' : '2vp')
+                  .borderRadius(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ? '3vp' : '2vp')
                   .textAlign(TextAlign.Center)
+                  .visibility(this.isTVShow ? Visibility.None : Visibility.Visible)
               }
               .alignItems(VerticalAlign.Top)
               .justifyContent(FlexAlign.Start)
               .width('100%')
-              .height(this.currentWidthBreakpoint === 'lg' ? '46vp' : '33vp')
+              .height(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ? '46vp' : '33vp')
+
+              Column() {
+                MembershipTag()
+              }
+              .width('100%')
+              .height('100%')
+              .alignItems(HorizontalAlign.End)
+              .justifyContent(FlexAlign.Start)
+              .visibility(this.isTVShow ? Visibility.Visible : Visibility.None)
+
             }
             .width('100%')
             .layoutWeight(5)
 
-            Row() {
-              // [Start daily_small_video]
-              Image($r('app.media.daily_small_video'))
-                .height(new BreakpointType('40vp', '44vp', '68vp').getValue(this.currentWidthBreakpoint))
-                .width(new BreakpointType('76vp', '84vp', '129vp').getValue(this.currentWidthBreakpoint))
-                .borderRadius('8vp')
-              // [End daily_small_video]
+            if (!this.isTVShow) {
+              Row() {
+                // [Start daily_small_video]
+                Image($r('app.media.daily_small_video'))
+                  .height(new BreakpointType('40vp', '40vp', '44vp', '68vp',
+                    '88vp').getValue(this.mainWindowInfo.widthBp))
+                  .width(new BreakpointType('76vp', '76vp', '84vp', '129vp',
+                    '168vp').getValue(this.mainWindowInfo.widthBp))
+                  .borderRadius('8vp')
+                // [End daily_small_video]
 
-              Column() {
-                // [Start dd_main_daily_video_img]
-                Text(this.mainDailyVideoImg.getOtherInfo())
-                  .fontSize(this.currentWidthBreakpoint === 'lg' ? '16vp' : '14vp')
+                Column() {
+                  // [Start dd_main_daily_video_img]
+                  Text(this.mainDailyVideoImg.getOtherInfo())
+                    .fontSize(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ? '16vp' : '14vp')
                     // [End dd_main_daily_video_img]
-                  .fontWeight(FontWeight.Normal)
-                  .maxLines(1)
-                Text(this.mainDailyVideoImg.getContent())
-                  .opacity(0.4)
-                  .fontSize(this.currentWidthBreakpoint === 'lg' ? '14vp' : '12vp')
-                  .fontWeight(FontWeight.Normal)
-                  .maxLines(1)
+                    .fontWeight(FontWeight.Normal)
+                    .maxLines(1)
+                  Text(this.mainDailyVideoImg.getContent())
+                    .opacity(0.4)
+                    .fontSize(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ? '14vp' : '12vp')
+                    .fontWeight(FontWeight.Normal)
+                    .maxLines(1)
+                }
+                .margin({
+                  left: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ? '16vp' : '12vp',
+                  right: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ? '16vp' : '12vp'
+                })
+                .alignItems(HorizontalAlign.Start)
+                .layoutWeight(1)
+
+                Button('关注')
+                  .fontSize(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ? '14fp' : '12fp')
+                  .fontColor('#ED6F21')
+                  .fontWeight(500)
+                  .height(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ? '34vp' : '34vp')
+                  .width(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ? '77vp' : '77vp')
+                  .borderRadius('16vp')
+                  .backgroundColor('#0D000000')
               }
-              .margin({
-                left: this.currentWidthBreakpoint === 'lg' ? '16vp': '12vp',
-                right: this.currentWidthBreakpoint === 'lg' ? '16vp': '12vp'
+              .alignItems(VerticalAlign.Center)
+              .padding({
+                left: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ? '16vp' : '12vp',
+                right: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ? '16vp' : '12vp'
               })
-              .alignItems(HorizontalAlign.Start)
-              .layoutWeight(1)
-
-              Button('关注')
-                .fontSize(this.currentWidthBreakpoint === 'lg' ? '14fp': '12fp')
-                .fontColor('#ED6F21')
-                .fontWeight(500)
-                .height(this.currentWidthBreakpoint === 'lg' ? '34vp' : '34vp')
-                .width(this.currentWidthBreakpoint === 'lg' ? '77vp' : '77vp')
-                .borderRadius('16vp')
-                .backgroundColor('#0D000000')
+              .layoutWeight(2)
             }
-            .alignItems(VerticalAlign.Center)
-            .padding({
-              left: this.currentWidthBreakpoint === 'lg' ? '16vp' : '12vp',
-              right: this.currentWidthBreakpoint === 'lg' ? '16vp' : '12vp'
-            })
-            .layoutWeight(2)
+
             // [EndExclude sub_title_component]
           }
           .tabIndex(getTabIndex('DailyVideoOne'))
           .width('100%')
           // Dynamically setting the height at different breakpoints.
-          .height(this.getDailyVideoHeight(this.currentWidthBreakpoint, this.windowWidth, true))
+          .height(this.getDailyVideoHeight(this.mainWindowInfo.widthBp, this.mainWindowInfo.windowSize.width, true))
           .borderRadius('36vp')
           .backgroundColor('#F1F3F5')
         }
         .padding({
           top: '13vp',
-          bottom: this.currentWidthBreakpoint !== 'sm' ? '13vp' : 0,
-          left: new BreakpointType('16vp', '24vp', '36vp').getValue(this.currentWidthBreakpoint),
-          right: this.currentWidthBreakpoint === 'sm' ? '16vp' : 0
+          bottom: this.mainWindowInfo.widthBp !== WidthBreakpoint.WIDTH_SM ? '13vp' : 0,
+          left: new BreakpointType('16vp', '16vp', '24vp', '36vp', '36vp').getValue(this.mainWindowInfo.widthBp),
+          right: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ? '16vp' : 0
         })
 
         // Sub video section.
-        GridCol({ span: { sm: 4, md: 6, lg: 6 } }) {
+        GridCol({
+          span: {
+            xs: 4,
+            sm: 4,
+            md: 6,
+            lg: 6,
+            xl: 6
+          }
+        }) {
           Grid() {
             ForEach(this.dailyVideoImgList, (item: VideoImage) => {
               GridItem() {
                 Column() {
                   Stack({ alignContent: Alignment.Bottom }) {
                     VideoImgComponent({ imgSrc: item.getImgSrc() })
-                    VideoImgPlay()
+                    VideoImgPlay({
+                      mainWindowInfo: this.mainWindowInfo
+                    })
+                      .visibility(this.isTVShow ? Visibility.None : Visibility.Visible)
                     VideoImgRating({ rating: item.getRating() })
+                      .visibility(this.isTVShow ? Visibility.None : Visibility.Visible)
+
+                    Row() {
+                      Text(item.getTitle())
+                        .fontSize('16fp')
+                        .fontWeight(FontWeight.Normal)
+                        .lineHeight('24vp')
+                        .margin({ top: '4vp' })
+                        .fontColor(Color.White)
+                    }
+                    .justifyContent(FlexAlign.Start)
+                    .width('100%')
+                    .padding(8)
+
+                    Column() {
+                      MembershipTag()
+                    }
+                    .width('100%')
+                    .height('100%')
+                    .alignItems(HorizontalAlign.End)
+                    .justifyContent(FlexAlign.Start)
+                    .visibility(this.isTVShow ? Visibility.Visible : Visibility.None)
                   }
                   .width('100%')
                   // The width and height vary with the container assembly and the aspect ratio remains unchanged.
                   .aspectRatio(1.74)
+
                   // [StartExclude sub_title_component]
                   Text(item.getTitle())
-                    .fontSize(this.currentWidthBreakpoint === 'lg' ? '16fp' : '14fp')
+                    .fontSize(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ||
+                      this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ? '16fp' : '14fp')
                     .fontWeight(FontWeight.Normal)
-                    .lineHeight(this.currentWidthBreakpoint === 'lg' ? '24vp' : '21vp')
+                    .lineHeight(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ||
+                      this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ? '24vp' : '21vp')
                     .margin({ top: '4vp' })
                     .fontColor(this.currentTopIndex === 2 ? Color.White : '#182431')
+                    .visibility(this.isTVShow ? Visibility.None : Visibility.Visible)
 
                   Text(item.getContent())
                     .fontSize('12fp')
@@ -171,7 +229,8 @@ export struct DailyVideo {
                     .margin({ top: '2vp' })
                     .opacity(0.4)
                     .fontColor(this.currentTopIndex === 2 ? Color.White : '#182431')
-                    .visibility(this.currentWidthBreakpoint === 'sm' ? Visibility.Visible : Visibility.None)
+                    .visibility(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ? Visibility.Visible :
+                      Visibility.None)
                   // [EndExclude sub_title_component]
                 }
                 .alignItems(HorizontalAlign.Start)
@@ -180,7 +239,7 @@ export struct DailyVideo {
           }
           .tabIndex(getTabIndex('DailyVideoTwo'))
           // Dynamically setting the height at different breakpoints.
-          .height(this.getDailyVideoHeight(this.currentWidthBreakpoint, this.windowWidth, false))
+          .height(this.getDailyVideoHeight(this.mainWindowInfo.widthBp, this.mainWindowInfo.windowSize.width, false))
           .width('100%')
           // Sets the number of grid layout columns and evenly divides the height.
           .columnsTemplate('1fr 1fr')
@@ -188,34 +247,39 @@ export struct DailyVideo {
           .rowsGap('12vp')
           .columnsGap('12vp')
           .padding({
-            top: this.currentWidthBreakpoint !== 'sm' ? '13vp' : '6vp',
-            bottom: this.currentWidthBreakpoint !== 'sm' ? '13vp' : '6vp',
-            left: this.currentWidthBreakpoint === 'sm' ? '16vp' : '6vp',
-            right: new BreakpointType('16vp', '24vp', '36vp').getValue(this.currentWidthBreakpoint)
+            top: this.mainWindowInfo.widthBp !== WidthBreakpoint.WIDTH_SM ? '13vp' : '6vp',
+            bottom: this.mainWindowInfo.widthBp !== WidthBreakpoint.WIDTH_SM ? '13vp' : '6vp',
+            left: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ? '16vp' : '6vp',
+            right: new BreakpointType('16vp', '16vp', '24vp', '36vp', '36vp').getValue(this.mainWindowInfo.widthBp)
           })
         }
       }
     }
-    .padding({ left: this.currentWidthBreakpoint === 'lg' && this.currentTopIndex === 2 ? '96vp' : 0 })
+    .padding({
+      left: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG && this.currentTopIndex === 2 && !this.isTVShow ? '96vp' : 0
+    })
     .margin({ top: '12vp' })
+
     // [End sub_title_component]
   }
 
-  getDailyVideoHeight(currentWidthBreakpoint: string, windowWidth: number, isMain: boolean): string {
+  getDailyVideoHeight(currentWidthBreakpoint: number, windowWidth: number, isMain: boolean): string {
     // Obtain the window width and subtract the blank parts on both sides.
-    let result: number = this.getUIContext().px2vp(windowWidth) - new BreakpointType(32,
-      48, 64).getValue(this.currentWidthBreakpoint) - 12;
+    let result: number = this.getUIContext().px2vp(windowWidth) - new BreakpointType(32, 32,
+      48, 64, 64).getValue(this.mainWindowInfo.widthBp) - 12;
     // Calculate the width of a single image based on the number of grid columns.
-    if (currentWidthBreakpoint === 'lg') {
+    if (currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG) {
       result = (result - 96) / 2;
-    } else if (currentWidthBreakpoint === 'md') {
+    } else if (currentWidthBreakpoint === WidthBreakpoint.WIDTH_MD) {
       result /= 2;
-    } else {
+    } else if (currentWidthBreakpoint === WidthBreakpoint.WIDTH_SM) {
       result /= 1;
+    } else {
+      result = (result - 260) / 2;
     }
     // Calculate the height of a single image and title, and calculate the total height of the grid layout.
     result = (result - 12) / 1.74;
-    if (currentWidthBreakpoint === 'sm') {
+    if (currentWidthBreakpoint === WidthBreakpoint.WIDTH_SM) {
       if (isMain) {
         return (result + 103 + 'vp');
       } else {
diff --git a/features/home/src/main/ets/view/Home.ets b/features/home/src/main/ets/view/Home.ets
index 8f5f03ac6dc06c5d17f8b73a279272f6fbb7565b..61a954e8ef00cfbac4507105ddec21297281651e 100644
--- a/features/home/src/main/ets/view/Home.ets
+++ b/features/home/src/main/ets/view/Home.ets
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -13,27 +13,99 @@
  * limitations under the License.
  */
 
-/*
-* 最佳实践: 平板开发实践
-*/
-
-import { deviceInfo } from '@kit.BasicServicesKit';
-import { SearchView } from '@ohos/search';
-import { CommonConstants } from '@ohos/commons';
+// import { SearchView } from '@ohos/search';
+import { ImmersiveType, WindowInfo, WindowUtil } from '@ohos/commons';
 import { FooterTab, FooterTabViewModel } from '../viewmodel/FooterTabViewModel';
 import { HomeHeader } from './HomeHeader';
 import { HomeContent } from './HomeContent';
+import { display } from '@kit.ArkUI';
+import { hilog } from '@kit.PerformanceAnalysisKit';
+import { BusinessError } from '@kit.BasicServicesKit';
+
+const TAG = '[Home]';
 
 @Component
 export struct Home {
-  @State currentBottomIndex: number = 0;
-  @State isSearching: boolean = false;
+  @ObjectLink @Watch('mainWindowInfoChange') mainWindowInfo: WindowInfo;
   @StorageLink('scrollHeight') scrollHeight: number = 0;
   @StorageLink('currentTopIndex') currentTopIndex: number = 0;
-  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'lg';
+  @StorageLink('windowUtil') windowUtil: WindowUtil | undefined = undefined;
+  @State currentBottomIndex: number = 0;
+  @State isSearching: boolean = false;
+  @State topAvoidHeight: number = this.getUIContext().px2vp(this.mainWindowInfo.AvoidSystem?.topRect.height);
+  @State bottomAvoidHeight: number = this.getUIContext().px2vp(this.mainWindowInfo.AvoidSystem?.bottomRect.height);
+  @State bottomBarHeight: number = 76 + this.bottomAvoidHeight;
+  @State topBarHeight: number = 56 + this.topAvoidHeight;
+  @State barOpacity: number = 1;
+  // The current vertical sliding distance of the list.
+  @State currentYOffset: number = 0;
+  // Whether the list slide to the bottom
+  @State isReachingEnd: boolean = false;
+  @State currentIndex: number = 0;
+  @State decorWidth: number = 0;
   private tabList: FooterTab[] = new FooterTabViewModel().getTabList();
   private scroller: Scroller = new Scroller();
   private sideScroller: Scroller = new Scroller();
+  private isHiding: boolean = false;
+  private cupWidthBp: number = WidthBreakpoint.WIDTH_SM;
+
+  mainWindowInfoChange(): void {
+    this.topAvoidHeight = this.getUIContext().px2vp(this.mainWindowInfo.AvoidSystem?.topRect.height);
+    this.bottomAvoidHeight = this.getUIContext().px2vp(this.mainWindowInfo.AvoidSystem?.bottomRect.height);
+    if (this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM && this.mainWindowInfo.heightBp === HeightBreakpoint.HEIGHT_LG) {
+      this.topBarHeight = 112 + this.topAvoidHeight;
+    } else {
+      this.topBarHeight = 56 + this.topAvoidHeight;
+    }
+    this.bottomBarHeight = 76 + this.bottomAvoidHeight;
+
+    if (this.cupWidthBp !== this.mainWindowInfo.widthBp) {
+      try {
+        this.windowUtil!.mainWindow.setWindowDecorVisible(this.mainWindowInfo.widthBp !== WidthBreakpoint.WIDTH_XL);
+      } catch (error) {
+        hilog.info(0x0000, TAG, 'setWindowDecorVisible failed. The error is: ' + JSON.stringify(error));
+      }
+      this.cupWidthBp = this.mainWindowInfo.widthBp;
+      try {
+        this.decorWidth = this.windowUtil!.mainWindow.getTitleButtonRect().width
+      } catch (error) {
+        hilog.info(0x0000, TAG, 'getTitleButtonRect failed. The error is: ' + JSON.stringify(error));
+      }
+    }
+  }
+
+  aboutToAppear(): void {
+    let callback: Callback<display.FoldStatus> = (data: display.FoldStatus) => {
+      if (data === display.FoldStatus.FOLD_STATUS_EXPANDED) {
+        this.barOpacity = 1;
+        if (this.currentTopIndex === 2) {
+          this.sideScroller.scrollToIndex(this.currentIndex);
+        } else {
+          this.scroller.scrollToIndex(this.currentIndex);
+        }
+      } else if (data === display.FoldStatus.FOLD_STATUS_FOLDED) {
+        if (this.currentTopIndex === 2) {
+          this.sideScroller.scrollToIndex(this.currentIndex);
+        } else {
+          this.scroller.scrollToIndex(this.currentIndex);
+        }
+      }
+      hilog.info(0x0000, TAG, 'Listening enabled. Data: ' + JSON.stringify(data));
+    };
+    try {
+      display.on('foldStatusChange', callback);
+    } catch (error) {
+      let err = error as BusinessError;
+      hilog.error(0x0000, 'TestLog', `Failed to update fold status. Code: ${err.code}, message: ${err.message}`);
+    }
+    try {
+      this.windowUtil!.mainWindow.setDecorButtonStyle({ buttonIconSize: 24 });
+      this.windowUtil!.mainWindow.setWindowDecorHeight(64);
+    } catch (err) {
+      hilog.error(0x0000, 'TestLog', `Failed to set DecorButtonStyle. Code: ${err.code}, message: ${err.message}`);
+    }
+    this.mainWindowInfoChange();
+  }
 
   @Builder
   BottomTabBuilder(item: FooterTab, index: number) {
@@ -50,109 +122,309 @@ export struct Home {
         .margin({ top: '4vp' })
         .opacity(index === this.currentBottomIndex ? 1 : 0.4)
     }
-    .padding({ bottom: this.currentWidthBreakpoint !== 'lg' && deviceInfo.deviceType !==
-      '2in1' ? '24vp' : 0 })
-    .height(this.currentWidthBreakpoint === 'lg' ? '100vp' :
+    .padding({ bottom: this.bottomAvoidHeight + 'vp' })
+    .height(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ? '100vp' :
       '100%')
     .width('100%')
     .justifyContent(FlexAlign.Center)
+    .opacity(this.barOpacity)
+  }
+
+  @Builder
+  SideBarBuilder(item: FooterTab, index: number) {
+    Row({ space: 10 }) {
+      Image(index !== this.currentBottomIndex ? (this.currentTopIndex === 2 && this.currentBottomIndex === 0 &&
+        !this.isSearching ? item.getIconWhite() : item.getIcon()) : item.getIconSelected())
+        .width('24vp')
+        .height('24vp')
+      Text(item.getName())
+        .fontSize('18fp')
+        .fontWeight(800)
+        .height('24vp')
+        .fontColor(this.currentBottomIndex === index ? '#ffed6f21' : (this.currentTopIndex === 2 &&
+          this.currentBottomIndex === 0 && !this.isSearching ? Color.White : Color.Black))
+        .opacity(this.currentBottomIndex === index ? 1 : 0.4)
+    }
+    .backgroundColor(this.currentBottomIndex === index ? '#33ed6f21' : Color.Transparent)
+    .borderRadius(12)
+    .width('100%')
+    .height('45vp')
+    .padding(20)
+    .alignItems(VerticalAlign.Center)
+    .onClick(() => {
+      this.currentBottomIndex = index;
+    })
   }
 
   build() {
     // [Start tabs_barposition]
-    Tabs({
-      barPosition: this.currentWidthBreakpoint === 'lg' ? BarPosition.Start : BarPosition.End
-    }) {
-      // [StartExclude tabs_barposition]
-      // [Start tab_content]
-      TabContent() {
-        if (this.currentTopIndex === 2) {
-          // The immersive design of the home page is displayed when the top tab is switched to 2.
-          Stack() {
-            Scroll(this.sideScroller) {
-              Column() {
-                HomeContent()
-                  .visibility(!this.isSearching ? Visibility.Visible : Visibility.None)
+    if (this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL) {
+      SideBarContainer(SideBarContainerType.Embed) {
+        Column() {
+          Row() {
+            Text($r('app.string.videoApplication'))
+              .fontSize('24fp')
+              .fontColor(this.currentTopIndex === 2 && this.currentBottomIndex === 0 ? Color.White : Color.Black)
+              .fontWeight(800)
+          }
+          .justifyContent(FlexAlign.Start)
+          .alignItems(VerticalAlign.Top)
+          .padding({
+            left: 40,
+            top: 30
+          })
+          .width('100%')
 
-                SearchView({ isSearching: $isSearching })
-                  .visibility(!this.isSearching ? Visibility.None : Visibility.Visible)
+          Column() {
+            ForEach(this.tabList, (item: FooterTab, index: number) => {
+              ListItem() {
+                this.SideBarBuilder(item, index)
+              }
+            }, (item: FooterTab) => JSON.stringify(item))
+          }
+          .margin('20vp')
+        }
+        .width('100%')
+        .height('100%')
+        .backgroundColor(this.currentTopIndex === 2 && this.currentBottomIndex === 0 ? '#242833' : '#eff3f9')
+
+        if (this.currentBottomIndex === 0) {
+          if (this.currentTopIndex === 2) {
+            Stack() {
+              Scroll(this.sideScroller) {
+                Column() {
+                  HomeContent({ mainWindowInfo: this.mainWindowInfo })
+                    .visibility(!this.isSearching ? Visibility.Visible : Visibility.None)
+
+                  // SearchView({ isSearching: $isSearching })
+                  //   .visibility(!this.isSearching ? Visibility.None : Visibility.Visible)
+                }
+                .width('100%')
+              }
+              .scrollBar(BarState.Off)
+              .height('100%')
+              // Obtains the sliding offset on the y axis during sliding.
+              .onScrollFrameBegin((offset: number) => {
+                this.scrollHeight = this.sideScroller.currentOffset().yOffset;
+                return { offsetRemain: offset }
+              })
+
+              Row() {
+                HomeHeader({ isSearching: $isSearching, mainWindowInfo: this.mainWindowInfo })
+                  .visibility(!this.isSearching ? Visibility.Visible : Visibility.None)
               }
               .width('100%')
+              .padding({
+                right: this.decorWidth,
+                top: 8
+              })
+              .backgroundColor(this.scrollHeight > 0 ? $r('app.color.home_content_background') : Color.Transparent)
             }
-            .scrollBar(BarState.Off)
             .height('100%')
-            // Obtains the sliding offset on the y axis during sliding.
-            .onScrollFrameBegin((offset: number) => {
-              this.scrollHeight = this.sideScroller.currentOffset().yOffset;
-              return { offsetRemain: offset }
-            })
-
-            HomeHeader({ isSearching: $isSearching })
-              .visibility(!this.isSearching ? Visibility.Visible : Visibility.None)
-              .padding({ left: this.currentWidthBreakpoint === 'lg' ? '96vp' : 0 })
-          }
-          .height('100%')
-          .width('100%')
-          .alignContent(Alignment.Top)
-        } else {
-          // Non-immersive design for the home page.
-          Column() {
-            HomeHeader({ isSearching: $isSearching })
-              .visibility(!this.isSearching ? Visibility.Visible : Visibility.None)
-
-            Scroll(this.scroller) {
-              Column() {
-                HomeContent()
+            .alignContent(Alignment.Top)
+          } else {
+            Column() {
+              Row() {
+                HomeHeader({ isSearching: $isSearching, mainWindowInfo: this.mainWindowInfo })
                   .visibility(!this.isSearching ? Visibility.Visible : Visibility.None)
-
-                SearchView({ isSearching: $isSearching })
-                  .visibility(!this.isSearching ? Visibility.None : Visibility.Visible)
               }
               .width('100%')
+              .padding({
+                right: this.decorWidth,
+                top: 8
+              })
+
+              Scroll(this.sideScroller) {
+                Column() {
+                  HomeContent({ mainWindowInfo: this.mainWindowInfo })
+                    .visibility(!this.isSearching ? Visibility.Visible : Visibility.None)
+
+                  // SearchView({ isSearching: $isSearching })
+                  //   .visibility(!this.isSearching ? Visibility.None : Visibility.Visible)
+                }
+                .width('100%')
+              }
+              .height('100%')
+              .scrollBar(BarState.Off)
+              // Obtains the sliding offset on the y axis during sliding.
+              .onScrollFrameBegin((offset: number) => {
+                this.scrollHeight = this.sideScroller.currentOffset().yOffset;
+                return { offsetRemain: offset }
+              })
             }
-            .layoutWeight(1)
-            .scrollBar(BarState.Off)
+            .height('100%')
           }
-          .height('100%')
-          .width('100%')
         }
       }
-      .tabBar(this.BottomTabBuilder(this.tabList[0], 0))
-      // [End tab_content]
+      .height('100%')
+      .width('100%')
+      .sideBarWidth('20%')
+      .showControlButton(false)
+      .minSideBarWidth('240vp')
+      .maxSideBarWidth('300vp')
+      .autoHide(false)
+      .divider(this.currentTopIndex === 2 && !this.isSearching ? { strokeWidth: 1, color: $r('app.color.home_content_background')} : { strokeWidth: 1, color: $r('app.color.tab_background_color')})
+    } else {
+      Tabs({
+        barPosition: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ? BarPosition.Start : BarPosition.End
+      }) {
+        // [StartExclude tabs_barposition]
+        // [Start tab_content]
+        TabContent() {
+          if (this.currentTopIndex === 2) {
+            // The immersive design of the home page is displayed when the top tab is switched to 2.
+            Stack() {
+              Scroll(this.sideScroller) {
+                Column() {
+                  HomeContent({ mainWindowInfo: this.mainWindowInfo })
+                    .visibility(!this.isSearching ? Visibility.Visible : Visibility.None)
 
-      TabContent() {
-        Column()
-      }
-      .tabBar(this.BottomTabBuilder(this.tabList[1], 1))
+                  // SearchView({ isSearching: $isSearching })
+                  //   .visibility(!this.isSearching ? Visibility.None : Visibility.Visible)
+                }
+                .width('100%')
+              }
+              .scrollBar(BarState.Off)
+              .height('100%')
+              // Obtains the sliding offset on the y axis during sliding.
+              .onScrollFrameBegin((offset: number) => {
+                this.scrollHeight = this.sideScroller.currentOffset().yOffset;
+                if (this.mainWindowInfo.widthBp !== WidthBreakpoint.WIDTH_SM ||
+                  (this.mainWindowInfo.heightBp !== HeightBreakpoint.HEIGHT_MD &&
+                    this.mainWindowInfo.heightBp !== HeightBreakpoint.HEIGHT_SM)) {
+                  return { offsetRemain: offset };
+                }
+                if (offset > 0) {
+                  this.currentYOffset += offset;
+                  if (this.currentYOffset <= 100) {
+                    this.bottomBarHeight = this.bottomBarHeight * (1 - this.currentYOffset / 100);
+                    this.topBarHeight = this.topBarHeight * (1 - this.currentYOffset / 100);
+                    this.barOpacity = 1 - this.currentYOffset / 100;
+                  } else {
+                    this.topBarHeight = 0;
+                    this.bottomBarHeight = 0;
+                    this.barOpacity = 0;
+                  }
+                  this.isHiding = true;
+                }
+                if (offset < 0 && this.isHiding) {
+                  this.getUIContext().animateTo({
+                    duration: 300
+                  }, () => {
+                    this.bottomBarHeight = 76 + this.bottomAvoidHeight;
+                    this.topBarHeight = 56 + this.topAvoidHeight;
+                    this.barOpacity = 1;
+                    this.currentYOffset = 0;
+                    this.isHiding = false;
+                  });
+                }
+                return { offsetRemain: offset };
+              })
 
-      TabContent() {
-        Column()
-      }
-      .tabBar(this.BottomTabBuilder(this.tabList[2], 2))
+              HomeHeader({ isSearching: $isSearching, mainWindowInfo: this.mainWindowInfo })
+                .visibility(!this.isSearching ? Visibility.Visible : Visibility.None)
+                .padding({ left: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ? '96vp' : 0 })
+                .opacity(this.barOpacity)
+                .height(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM && (this.mainWindowInfo.heightBp === HeightBreakpoint.HEIGHT_SM || this.mainWindowInfo.heightBp === HeightBreakpoint.HEIGHT_MD) ? this.topBarHeight : 'auto')
+            }
+            .height('100%')
+            .width('100%')
+            .alignContent(Alignment.Top)
+          } else {
+            // Non-immersive design for the home page.
+            Column() {
+              HomeHeader({ isSearching: $isSearching, mainWindowInfo: this.mainWindowInfo })
+                .visibility(!this.isSearching ? Visibility.Visible : Visibility.None)
+                .opacity(this.barOpacity)
+                .height(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM && (this.mainWindowInfo.heightBp === HeightBreakpoint.HEIGHT_SM || this.mainWindowInfo.heightBp === HeightBreakpoint.HEIGHT_MD) ? this.topBarHeight : 'auto')
+
+              Scroll(this.scroller) {
+                Column() {
+                  HomeContent({ mainWindowInfo: this.mainWindowInfo })
+                    .visibility(!this.isSearching ? Visibility.Visible : Visibility.None)
+
+                  // SearchView({ isSearching: $isSearching })
+                  //   .visibility(!this.isSearching ? Visibility.None : Visibility.Visible)
+                }
+                .width('100%')
+              }
+              .layoutWeight(1)
+              .scrollBar(BarState.Off)
+              .onScrollFrameBegin((offset: number) => {
+                if (this.mainWindowInfo.widthBp !== WidthBreakpoint.WIDTH_SM ||
+                  (this.mainWindowInfo.heightBp !== HeightBreakpoint.HEIGHT_MD &&
+                    this.mainWindowInfo.heightBp !== HeightBreakpoint.HEIGHT_SM)) {
+                  return { offsetRemain: offset };
+                }
+                if (offset > 0) {
+                  this.currentYOffset += offset;
+                  if (this.currentYOffset <= 100) {
+                    this.bottomBarHeight = this.bottomBarHeight * (1 - this.currentYOffset / 100);
+                    this.topBarHeight = this.topBarHeight * (1 - this.currentYOffset / 100);
+                    this.barOpacity = 1 - this.currentYOffset / 100;
+                  } else {
+                    this.topBarHeight = 0;
+                    this.bottomBarHeight = 0;
+                    this.barOpacity = 0;
+                  }
+                  this.isHiding = true;
+                }
+                if (offset < 0 && this.isHiding) {
+                  this.getUIContext().animateTo({
+                    duration: 300
+                  }, () => {
+                    this.bottomBarHeight = 76 + this.bottomAvoidHeight;
+                    this.topBarHeight = 56 + this.topAvoidHeight;
+                    this.barOpacity = 1;
+                    this.currentYOffset = 0;
+                    this.isHiding = false;
+                  });
+                }
+                return { offsetRemain: offset };
+              })
+            }
+            .height('100%')
+            .width('100%')
+          }
+        }
+        .tabBar(this.BottomTabBuilder(this.tabList[0], 0))
+        // [End tab_content]
+
+        TabContent() {
+          Column()
+        }
+        .tabBar(this.BottomTabBuilder(this.tabList[1], 1))
+
+        TabContent() {
+          Column()
+        }
+        .tabBar(this.BottomTabBuilder(this.tabList[2], 2))
 
-      TabContent() {
-        Column()
+        TabContent() {
+          Column()
+        }
+        .tabBar(this.BottomTabBuilder(this.tabList[3], 3))
+        // [EndExclude tabs_barposition]
       }
-      .tabBar(this.BottomTabBuilder(this.tabList[3], 3))
-      // [EndExclude tabs_barposition]
+      // Change the position and size of the tab at the bottom.
+      .barWidth(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ? '96vp' : '100%')
+      // .barHeight(this.mainWindowInfo.widthBp === 'lg' ? '100%' : (deviceInfo.deviceType === '2in1' ? '56vp' : '76vp'))
+      .barHeight(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ? '100%' : this.bottomBarHeight)
+      .barMode(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ? BarMode.Scrollable : BarMode.Fixed,
+        { nonScrollableLayoutStyle: LayoutStyle.ALWAYS_CENTER })
+      .vertical(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG)
+      // [End tabs_barposition]
+      .barOverlap(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG && this.currentTopIndex === 2 ? true : false)
+      .barBackgroundBlurStyle(BlurStyle.NONE)
+      .barBackgroundColor(this.currentTopIndex === 2 && this.currentBottomIndex === 0 ?
+        (this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ? '#0DFFFFFF' : '#222A3E') : '#F1F3F5')
+      .onChange((index: number) => {
+        this.currentBottomIndex = index;
+      })
+      .scrollable(false)
+      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
+      .height('100%')
+      .width('100%')
     }
-    // Change the position and size of the tab at the bottom.
-    .barWidth(this.currentWidthBreakpoint === 'lg' ? '96vp' : '100%')
-    .barHeight(this.currentWidthBreakpoint === 'lg' ? '100%' : (deviceInfo.deviceType === '2in1' ? '56vp' : '76vp'))
-    .barMode(this.currentWidthBreakpoint === 'lg' ? BarMode.Scrollable : BarMode.Fixed,
-      { nonScrollableLayoutStyle: LayoutStyle.ALWAYS_CENTER })
-    .vertical(this.currentWidthBreakpoint === 'lg')
-    // [End tabs_barposition]
-    .barOverlap(this.currentWidthBreakpoint === 'lg' && this.currentTopIndex === 2 ? true : false)
-    .barBackgroundBlurStyle(BlurStyle.NONE)
-    .barBackgroundColor(this.currentTopIndex === 2 && this.currentBottomIndex === 0 ?
-      (this.currentWidthBreakpoint === 'lg' ? '#0DFFFFFF' : '#222A3E') : '#F1F3F5')
-    .onChange((index: number) => {
-      this.currentBottomIndex = index;
-    })
-    .scrollable(false)
-    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
-    .height('100%')
-    .width('100%')
   }
 }
\ No newline at end of file
diff --git a/features/home/src/main/ets/view/HomeContent.ets b/features/home/src/main/ets/view/HomeContent.ets
index 6e8a43880c2c47ba96f65e5257614e70455f4a26..8e04cc23f04d6a444ec0966915010e4ee1b1731c 100644
--- a/features/home/src/main/ets/view/HomeContent.ets
+++ b/features/home/src/main/ets/view/HomeContent.ets
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -14,7 +14,9 @@
  */
 
 import { deviceInfo } from '@kit.BasicServicesKit';
-import { BreakpointConstants, BreakpointType, CommonConstants } from '@ohos/commons';
+import { hilog } from '@kit.PerformanceAnalysisKit';
+import { BusinessError } from '@kit.BasicServicesKit';
+import { BreakpointType, CommonConstants, WindowInfo } from '@ohos/commons';
 import { WindowUtil } from '@ohos/commons';
 import { BannerView } from './BannerView';
 import { IconView } from './IconView';
@@ -25,16 +27,21 @@ import { PreviousVideo } from './PreviousVideo';
 
 @Component
 export struct HomeContent {
-  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @ObjectLink mainWindowInfo: WindowInfo;
+  @StorageLink('windowUtil') windowUtil: WindowUtil | undefined = undefined;
   @StorageLink('currentTopIndex') currentTopIndex: number = 0;
   @State gridStatus: number = 1;
-  private windowUtil?: WindowUtil;
   private isSearching: boolean = false;
 
   aboutToAppear(): void {
-    this.windowUtil = WindowUtil.getInstance();
     if (deviceInfo.deviceType !== CommonConstants.DEVICE_TYPE) {
-      this.windowUtil!.setFullScreen();
+      this.windowUtil!.mainWindow.setWindowLayoutFullScreen(true)
+        .then(() => {
+          hilog.info(0x0000, 'testLog', `Succeeded in setting immersive mode.`);
+        })
+        .catch((err: BusinessError) => {
+          hilog.error(0x0000, 'testLog', `Failed to set immersive mode. Code: ${err.code}, message: ${err.message}`);
+        });
     }
   }
 
@@ -42,25 +49,25 @@ export struct HomeContent {
     // [Start banner_view]
     Column() {
       // [EndExclude banner_view]
-      BannerView()
-      IconView()
-      RecommendedVideo()
-      NewVideoRelease()
-      DailyVideo()
-      PreviousVideo()
+      BannerView({ mainWindowInfo: this.mainWindowInfo })
+      IconView({ mainWindowInfo: this.mainWindowInfo })
+      RecommendedVideo({ mainWindowInfo: this.mainWindowInfo, isTVShow: false })
+      NewVideoRelease({ mainWindowInfo: this.mainWindowInfo, isTVShow: false })
+      DailyVideo({ mainWindowInfo: this.mainWindowInfo })
+      PreviousVideo({ mainWindowInfo: this.mainWindowInfo })
       // [EndExclude banner_view]
     }
     // Set the background image to cover the side and top tabs.
-    .backgroundImage(this.currentTopIndex === 2 && !this.isSearching ? new BreakpointType(
+    .backgroundImage(this.currentTopIndex === 2 && !this.isSearching ? new BreakpointType($r('app.media.immersive_background_sm'),
       $r('app.media.immersive_background_sm'), $r('app.media.immersive_background_md'),
-      $r('app.media.immersive_background_lg')).getValue(this.currentWidthBreakpoint) : $r('app.media.white_background'))
+      $r('app.media.immersive_background_lg'), $r('app.media.immersive_background_lg')).getValue(this.mainWindowInfo.widthBp) : $r('app.media.white_background'))
     // Set the size of the background image.
-    .backgroundImageSize({ width: '100%', height: new BreakpointType('384vp','420vp', '720vp').getValue(this.currentWidthBreakpoint) })
+    .backgroundImageSize({ width: '100%', height: new BreakpointType('384vp', '384vp','420vp', '720vp', '720vp').getValue(this.mainWindowInfo.widthBp) })
     // Set the uniform background color.
-    .backgroundColor(this.currentTopIndex === 2 && !this.isSearching ? (this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_MD ?
+    .backgroundColor(this.currentTopIndex === 2 && !this.isSearching ? (this.mainWindowInfo.widthBp !== WidthBreakpoint.WIDTH_MD ?
       '#222A3E' : '#273148') : Color.White)
     .width('100%')
     // [End banner_view]
-    .padding({ bottom: deviceInfo.deviceType !== '2in1' && this.currentWidthBreakpoint === 'lg' ? $r('app.float.bottom_navigation') : 0 })
+    .padding({ bottom: deviceInfo.deviceType !== '2in1' && this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ? $r('app.float.bottom_navigation') : 0 })
   }
 }
\ No newline at end of file
diff --git a/features/home/src/main/ets/view/HomeHeader.ets b/features/home/src/main/ets/view/HomeHeader.ets
index 0f5db20f73c161af7f1adc56ba3c75762dfdbc20..aedff0afa6cd032f289eb76c530b6216d62574f5 100644
--- a/features/home/src/main/ets/view/HomeHeader.ets
+++ b/features/home/src/main/ets/view/HomeHeader.ets
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -13,49 +13,68 @@
  * limitations under the License.
  */
 
-/*
-* 最佳实践: 平板开发实践
-*/
-
-import { deviceInfo } from '@kit.BasicServicesKit';
-import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { ConfigurationConstant } from '@kit.AbilityKit';
+import { hilog } from '@kit.PerformanceAnalysisKit';
+import { ImmersiveType, WindowInfo, WindowUtil } from '@ohos/commons';
 import { BreakpointType } from '@ohos/commons';
 import { HomeConstants } from '../constants/HomeConstants';
 import { getTabIndex } from './CommonView';
 
 @Component
 export struct HomeHeader {
+  @ObjectLink @Watch('mainWindowInfoChange') mainWindowInfo: WindowInfo;
   @State isShowingBorder: boolean = false;
+  @State topAvoidHeight: number = this.getUIContext().px2vp(this.mainWindowInfo.AvoidSystem?.topRect.height);
   @Link isSearching: boolean;
   @StorageLink('scrollHeight') scrollHeight: number = 0;
-  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string =  'lg';
   @StorageLink('currentTopIndex') currentTopIndex: number = 0;
+  @StorageLink('windowUtil') windowUtil: WindowUtil | undefined = undefined;
+
+  mainWindowInfoChange() {
+    this.topAvoidHeight = this.getUIContext().px2vp(this.mainWindowInfo.AvoidSystem?.topRect.height);
+  }
+
+  getSMBreakPointColSpans(): number {
+    if (this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM && this.mainWindowInfo.heightBp === HeightBreakpoint.HEIGHT_LG) {
+      return 4;
+    } else {
+      return 2;
+    }
+  }
+
+  getTopSearchBarPaddingTop(): string | Resource {
+    if (this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM && this.mainWindowInfo.heightBp === HeightBreakpoint.HEIGHT_LG) {
+      return '0';
+    }
+    return this.topAvoidHeight + 'vp';
+  }
 
   // [Start Home_Header]
   // [Start build_column]
   build() {
     Column() {
-      GridRow({ columns: { sm: 4, md: 12, lg: 12 } }) {
-        GridCol({ span: { sm: 4, md: 7, lg: 7 } }) {
+      GridRow({ columns: { sm: 4, md: 12, lg: 12, xl: 12 } }) {
+        GridCol({ span: { sm: this.getSMBreakPointColSpans(), md: 7, lg: 7, xl: 7 } }) {
           this.TopTabBar()
         }
-        .padding({ top: deviceInfo.deviceType === '2in1' ? 0 : $r('app.float.search_top_padding_top') })
-        .height(deviceInfo.deviceType === '2in1' ? $r('app.float.search_top_height') : $r('app.float.search_top_height_more'))
+        .margin({ top: this.topAvoidHeight + 'vp' })
+        .height('59vp')
 
-        GridCol({ span: { sm: 4, md: 5, lg: 5 } }) {
+        GridCol({ span: { sm: this.getSMBreakPointColSpans(), md: 5, lg: 5, xl: 5 } }) {
           this.searchBar()
         }
-        .padding({ top: this.currentWidthBreakpoint === 'sm' || deviceInfo.deviceType === '2in1' ? 0 : $r('app.float.search_top_padding_top') })
-        .height(this.currentWidthBreakpoint === 'sm' || deviceInfo.deviceType === '2in1' ? $r('app.float.search_top_height') : $r('app.float.search_top_height_more'))
+        .margin({ top: this.getTopSearchBarPaddingTop() })
+        .height('59vp')
       }
       // The background color of the top tab bar is changed during the slide-down process.
-      .backgroundColor(this.scrollHeight >= new BreakpointType(HomeConstants.BACKGROUND_CHANGE_HEIGHT[0],
-        HomeConstants.BACKGROUND_CHANGE_HEIGHT[1], HomeConstants.BACKGROUND_CHANGE_HEIGHT[2])
-        .getValue(this.currentWidthBreakpoint) && this.currentTopIndex === 2 ? $r('app.color.home_content_background') :
+      .backgroundColor(this.scrollHeight >= new BreakpointType(HomeConstants.BACKGROUND_CHANGE_HEIGHT[0], HomeConstants.BACKGROUND_CHANGE_HEIGHT[0],
+        HomeConstants.BACKGROUND_CHANGE_HEIGHT[1], HomeConstants.BACKGROUND_CHANGE_HEIGHT[2], HomeConstants.BACKGROUND_CHANGE_HEIGHT[2])
+        .getValue(this.mainWindowInfo.widthBp) && this.currentTopIndex === 2 ? $r('app.color.home_content_background') :
         Color.Transparent)
     }
     .width('100%')
   }
+
   // [End build_column]
   // [End Home_Header]
 
@@ -69,28 +88,41 @@ export struct HomeHeader {
           ForEach(HomeConstants.TOP_TOPIC_LIST, (item: string, index: number) => {
             ListItem() {
               Text(item)
-                .fontSize(this.currentTopIndex === index ? $r('app.float.search_tab_font_selected') : $r('app.float.search_tab_font'))
+                .fontSize(this.currentTopIndex === index ? $r('app.float.search_tab_font_selected') :
+                  $r('app.float.search_tab_font'))
                 .fontWeight(this.currentTopIndex === index ? 700 : 500)
                 .width(this.currentTopIndex === index ? '70vp' : '66vp')
                 .textAlign(TextAlign.Center)
                 .fontColor(this.currentTopIndex === 2 ? Color.White : $r('app.color.normal_font_color'))
-                .lineHeight(index === this.currentTopIndex ? $r('app.float.top_tab_list_height_selected') : $r('app.float.top_tab_list_height'))
+                .lineHeight(index === this.currentTopIndex ? $r('app.float.top_tab_list_height_selected') :
+                  $r('app.float.top_tab_list_height'))
                 .focusable(true)
                 .groupDefaultFocus(index === 0 ? true : false)
                 .borderRadius($r('app.float.text_focus_radius'))
             }
             .align(Alignment.Center)
             .margin({
-              top: this.currentTopIndex === index ? $r('app.float.top_tab_list_top_selected') : $r('app.float.top_tab_list_top'),
-              bottom: this.currentTopIndex === index ? $r('app.float.top_tab_list_bottom_selected') : $r('app.float.top_tab_list_bottom')
+              top: this.currentTopIndex === index ? $r('app.float.top_tab_list_top_selected') :
+                $r('app.float.top_tab_list_top'),
+              bottom: this.currentTopIndex === index ? $r('app.float.top_tab_list_bottom_selected') :
+                $r('app.float.top_tab_list_bottom')
             })
             .padding({
-              left: new BreakpointType(8, 12, 18).getValue(this.currentWidthBreakpoint),
-              right: new BreakpointType(8, 12, 18).getValue(this.currentWidthBreakpoint)
+              left: new BreakpointType(8, 8, 12, 18, 18).getValue(this.mainWindowInfo.widthBp),
+              right: new BreakpointType(8, 8, 12, 18, 18).getValue(this.mainWindowInfo.widthBp)
             })
             .onClick(() => {
               this.currentTopIndex = index;
               this.scrollHeight = 0;
+              try {
+                if (index === 2) {
+                  this.windowUtil!.mainWindow.setDecorButtonStyle({ colorMode: ConfigurationConstant.ColorMode.COLOR_MODE_DARK});
+                } else {
+                  this.windowUtil!.mainWindow.setDecorButtonStyle({ colorMode: ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT});
+                }
+              } catch (err) {
+                hilog.error(0x0000, 'TestLog', `Failed to set DecorButtonStyle. Code: ${err.code}, message: ${err.message}`);
+              }
             })
           }, (item: number, index: number) => index + JSON.stringify(item))
           // [EndExclude top_tab_bar]
@@ -99,24 +131,41 @@ export struct HomeHeader {
         .scrollBar(BarState.Off)
         .listDirection(Axis.Horizontal)
         .padding({ left: $r('app.float.search_top_padding') })
+        .width('100%')
+        .height('100%')
       }
       .alignItems(HorizontalAlign.Center)
       .layoutWeight(1)
+
       // [StartExclude top_tab_bar]
-      Image($r('app.media.ic_public_more'))
-        .width($r('app.float.top_tab_img_size'))
-        .height($r('app.float.top_tab_img_size'))
-        .margin({
-          left: $r('app.float.top_tab_img_margin'),
-          right: $r('app.float.top_tab_img_margin')
-        })
-        .fillColor(this.currentTopIndex === 2 ? Color.White : Color.Black)
-        .visibility(this.currentWidthBreakpoint === 'sm' ? Visibility.Visible : Visibility.None)
+      Row() {
+        Image($r('app.media.ic_public_more'))
+          .width($r('app.float.top_tab_img_size'))
+          .height($r('app.float.top_tab_img_size'))
+          .fillColor(this.currentTopIndex === 2 ? Color.White : Color.Black)
+      }
+      .backgroundColor(this.currentTopIndex === 2 ? '#1affffff' : '#0d000000')
+      .width('40vp')
+      .height('40vp')
+      .margin({
+        left: $r('app.float.top_tab_img_margin'),
+        right: $r('app.float.top_tab_img_margin')
+      })
+      .border({
+        width: 0,
+        radius: 20
+      })
+      .alignItems(VerticalAlign.Center)
+      .justifyContent(FlexAlign.Center)
+      .visibility((this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM && this.mainWindowInfo.heightBp === HeightBreakpoint.HEIGHT_LG) ? Visibility.Visible :
+        Visibility.None)
+
       // [StartExclude top_tab_bar]
     }
     .height($r('app.float.top_bar_height'))
     .width('100%')
   }
+
   // [End top_tab_bar]
 
   // [Start search_bar]
@@ -140,10 +189,12 @@ export struct HomeHeader {
           .width('100%')
           .onClick(() => {
             this.isSearching = true;
+            this.windowUtil!.setImmersiveType(ImmersiveType.IMMERSIVE);
           })
           .onSubmit((enterKey: EnterKeyType) => {
             if (enterKey === EnterKeyType.Go) {
               this.isSearching = true;
+              this.windowUtil!.setImmersiveType(ImmersiveType.IMMERSIVE);
             }
           })
           .enterKeyType(EnterKeyType.Go)
@@ -159,21 +210,68 @@ export struct HomeHeader {
           .margin({ left: $r('app.float.search_img_left') })
         // [EndExclude search_bar]
       }
-      // .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[1]))
       .alignSelf(ItemAlign.Center)
       .layoutWeight(1)
+      .visibility((this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM && this.mainWindowInfo.heightBp === HeightBreakpoint.HEIGHT_MD) ? Visibility.None :
+        Visibility.Visible)
+
       // [StartExclude search_bar]
+      Row() {
+        Image(this.currentTopIndex === 2 ? $r('app.media.ic_public_search_white') : $r('app.media.ic_public_search'))
+          .width($r('app.float.history_img_size'))
+          .height($r('app.float.history_img_size'))
+      }
+      .backgroundColor(this.currentTopIndex === 2 ? '#1affffff' : '#0d000000')
+      .width('40vp')
+      .height('40vp')
+      .border({
+        width: 0,
+        radius: 20
+      })
+      .margin({ bottom: '8vp' })
+      .alignItems(VerticalAlign.Center)
+      .justifyContent(FlexAlign.Center)
+      .visibility((this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM && this.mainWindowInfo.heightBp === HeightBreakpoint.HEIGHT_MD) ? Visibility.Visible :
+        Visibility.None)
+      .onClick(() => {
+        this.windowUtil!.setImmersiveType(ImmersiveType.IMMERSIVE);
+        this.isSearching = true;
+      })
+
       // History image.
-      Image(this.currentTopIndex === 2 ? $r('app.media.ic_public_history_white') : $r('app.media.ic_public_history'))
-        .width($r('app.float.history_img_size'))
-        .height($r('app.float.history_img_size'))
-        .margin({ left: $r('app.float.history_img_left') })
-
-      Image(this.currentTopIndex === 2 ? $r('app.media.ic_public_more_white') : $r('app.media.ic_public_more'))
-        .width($r('app.float.history_img_size'))
-        .height($r('app.float.history_img_size'))
-        .margin({ left: $r('app.float.history_img_left') })
-        .visibility(this.currentWidthBreakpoint === 'sm' ? Visibility.None : Visibility.Visible)
+      Row() {
+        Image(this.currentTopIndex === 2 ? $r('app.media.ic_public_history_white') : $r('app.media.ic_public_history'))
+          .width($r('app.float.history_img_size'))
+          .height($r('app.float.history_img_size'))
+      }
+      .backgroundColor(this.currentTopIndex === 2 ? '#1affffff' : '#0d000000')
+      .width('40vp')
+      .height('40vp')
+      .margin({ left: '8vp', bottom: '8vp' })
+      .border({
+        width: 0,
+        radius: 20
+      })
+      .alignItems(VerticalAlign.Center)
+      .justifyContent(FlexAlign.Center)
+
+      Row() {
+        Image(this.currentTopIndex === 2 ? $r('app.media.ic_public_more_white') : $r('app.media.ic_public_more'))
+          .width($r('app.float.history_img_size'))
+          .height($r('app.float.history_img_size'))
+      }
+      .backgroundColor(this.currentTopIndex === 2 ? '#1affffff' : '#0d000000')
+      .width('40vp')
+      .height('40vp')
+      .margin({ left: '8vp', bottom: '8vp' })
+      .border({
+        width: 0,
+        radius: 20
+      })
+      .alignItems(VerticalAlign.Center)
+      .justifyContent(FlexAlign.Center)
+      .visibility((this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM && this.mainWindowInfo.heightBp === HeightBreakpoint.HEIGHT_LG) ? Visibility.None :
+        Visibility.Visible)
       // [EndExclude search_bar]
     }
     .padding({
@@ -182,7 +280,8 @@ export struct HomeHeader {
     })
     .justifyContent(FlexAlign.Center)
     .width('100%')
-    .height('100%')
+    // .height('100%')
+    .height($r('app.float.top_bar_height'))
   }
   // [End search_bar]
 }
\ No newline at end of file
diff --git a/features/home/src/main/ets/view/IconView.ets b/features/home/src/main/ets/view/IconView.ets
index e77e5452bb86d9f13b20c188bd8386205904ebdf..c6c843377868f6bbf33492cd8efe90fd3ed0eba1 100644
--- a/features/home/src/main/ets/view/IconView.ets
+++ b/features/home/src/main/ets/view/IconView.ets
@@ -15,7 +15,7 @@
 
 import { hilog } from '@kit.PerformanceAnalysisKit';
 import { BusinessError } from '@kit.BasicServicesKit';
-import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { CommonConstants, WindowInfo } from '@ohos/commons';
 import { BreakpointType } from '@ohos/commons';
 import { HomeConstants } from '../constants/HomeConstants';
 import { IconViewModel, VideoIcon } from '../viewmodel/IconViewModel';
@@ -23,14 +23,13 @@ import { getTabIndex } from './CommonView';
 
 @Component
 export struct IconView {
-  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
-  @StorageLink('windowWidth') windowWidth: number = 0;
+  @ObjectLink mainWindowInfo: WindowInfo;
   @StorageLink('currentTopIndex') currentTopIndex: number = 0;
   private iconList: VideoIcon[] = new IconViewModel().getIconList();
 
   build() {
     Column() {
-      List({ space: this.getSpace(this.windowWidth, this.currentWidthBreakpoint) }) {
+      List({ space: this.getSpace(this.mainWindowInfo.windowSize.width, this.mainWindowInfo.widthBp) }) {
         ForEach(this.iconList, (item: VideoIcon, index: number) => {
           ListItem() {
             Column() {
@@ -54,7 +53,7 @@ export struct IconView {
           }
           .padding({
             right: index === this.iconList.length - 1 ?
-              this.getSpace(this.windowWidth, this.currentWidthBreakpoint) / 2 : 0
+              this.getSpace(this.mainWindowInfo.windowSize.width, this.mainWindowInfo.widthBp) / 2 : 0
           })
         }, (item: VideoIcon) => JSON.stringify(item))
       }
@@ -66,36 +65,41 @@ export struct IconView {
       .chainAnimation(true)
       .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[3]))
       .width(CommonConstants.FULL_PERCENT)
+      .height('auto')
     }
     .padding({
-      left: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
-        $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint)
+      left: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
+        $r('app.float.home_content_padding_lg'), $r('app.float.home_content_padding_lg')).getValue(this.mainWindowInfo.widthBp)
     })
     .margin({
-      top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+      top: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG ?
         $r('app.float.icon_list_column_margin_lg') : 0
     })
-    .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ?
+    .visibility(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG && this.currentTopIndex === 2 ?
       Visibility.None : Visibility.Visible)
   }
 
-  getSpace(windowWidth: number, currentWidthBreakpoint: string): number {
+  getSpace(windowWidth: number, currentWidthBreakpoint: number): number {
     // Obtain the window width and subtract the blank parts on both sides.
     try {
       let result: number =
-        this.getUIContext().px2vp(windowWidth) - (new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0],
+        this.getUIContext().px2vp(windowWidth) - (new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0], HomeConstants.VIDEO_GRID_MARGIN[0],
           HomeConstants.VIDEO_GRID_MARGIN[1],
-          HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentWidthBreakpoint) /
+          HomeConstants.VIDEO_GRID_MARGIN[2], HomeConstants.VIDEO_GRID_MARGIN[3]).getValue(this.mainWindowInfo.widthBp) /
         HomeConstants.TWO) -
           this.getUIContext().getHostContext()!.resourceManager.getNumber($r('app.float.icon_img_size').id) / 2;
-      if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM) {
+      if (currentWidthBreakpoint === WidthBreakpoint.WIDTH_SM) {
         result = (result - HomeConstants.ICONVIEW_ITEM_WIDTH[0] * CommonConstants.FOUR) / CommonConstants.FOUR;
-      } else if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+      } else if (currentWidthBreakpoint === WidthBreakpoint.WIDTH_MD) {
         result = (result - HomeConstants.ICONVIEW_ITEM_WIDTH[1] * HomeConstants.SIX) / HomeConstants.SIX;
-      } else {
+      } else if (currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG) {
         result =
           (result - HomeConstants.LG_SIDEBAR_WIDTH - HomeConstants.ICONVIEW_ITEM_WIDTH[2] * HomeConstants.EIGHT) /
           HomeConstants.EIGHT;
+      } else {
+        result =
+          (result - HomeConstants.XL_SIDEBAR_WIDTH - HomeConstants.ICONVIEW_ITEM_WIDTH[3] * HomeConstants.EIGHT) /
+          HomeConstants.EIGHT;
       }
       return result;
     } catch (error) {
diff --git a/features/home/src/main/ets/view/NewVideoRelease.ets b/features/home/src/main/ets/view/NewVideoRelease.ets
index a7b19ff5e0d9943d0479082b886abad9bebadebe..5fab8ecc283eca28fbae48eb44a233f78cd78f6a 100644
--- a/features/home/src/main/ets/view/NewVideoRelease.ets
+++ b/features/home/src/main/ets/view/NewVideoRelease.ets
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { CommonConstants, WindowInfo } from '@ohos/commons';
 import { BreakpointType } from '@ohos/commons';
 import { HomeConstants } from '../constants/HomeConstants';
 import { VideoImage, VideoImgViewModel } from '../viewmodel/VideoImgViewModel';
@@ -22,14 +22,14 @@ import { getTabIndex,SubtitleComponent,VideoContent,VideoImgComponent, VideoImgP
 
 @Component
 export struct NewVideoRelease {
-  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
-  @StorageLink('windowWidth') windowWidth: number = 0;
+  @ObjectLink mainWindowInfo: WindowInfo;
+  @Prop isTVShow: boolean;
   @StorageLink('currentTopIndex') currentTopIndex: number = 0;
   private newVideoImgList: VideoImage[] = new VideoImgViewModel().getNewVideoImgList();
 
   build() {
     Column() {
-      SubtitleComponent({ title: HomeConstants.HOME_SUB_TITLES[0] })
+      SubtitleComponent({ title: HomeConstants.HOME_SUB_TITLES[0], mainWindowInfo: this.mainWindowInfo })
         .margin({ top: $r('app.float.sub_title_row_margin') })
 
       // Video grid.
@@ -39,16 +39,32 @@ export struct NewVideoRelease {
             Column() {
               Stack({ alignContent: Alignment.Bottom }) {
                 VideoImgComponent({ imgSrc:item.getImgSrc(), index: index })
-                VideoImgPlay()
+                VideoImgPlay({ mainWindowInfo: this.mainWindowInfo })
+                  .visibility(this.isTVShow ? Visibility.None : Visibility.Visible)
                 VideoImgRating({ rating: item.getRating() })
+                  .visibility(this.isTVShow ? Visibility.Hidden : Visibility.Visible)
+                Row() {
+                  Text(item.getTitle())
+                    .fontSize('16fp')
+                    .fontWeight(FontWeight.Normal)
+                    .lineHeight('24vp')
+                    .margin({ top: '4vp' })
+                    .fontColor(Color.White)
+                }
+                .justifyContent(FlexAlign.Start)
+                .width('100%')
+                .padding(8)
+                .visibility(this.isTVShow ? Visibility.Visible : Visibility.None)
               }
-              .height(new BreakpointType($r('app.float.new_video_height_sm'), $r('app.float.new_video_height_md'),
-                $r('app.float.new_video_height_lg')).getValue(this.currentWidthBreakpoint))
+              .height(new BreakpointType($r('app.float.new_video_height_sm'), $r('app.float.new_video_height_sm'), $r('app.float.new_video_height_md'),
+                $r('app.float.new_video_height_lg'), $r('app.float.new_video_height_xl')).getValue(this.mainWindowInfo.widthBp))
               .width(CommonConstants.FULL_PERCENT)
               .aspectRatio(HomeConstants.NEW_VIDEO_ASPECT_RATIO)
 
-              VideoTitle({ title: item.getTitle() })
-              VideoContent({ content: item.getContent() })
+              if (!this.isTVShow) {
+                VideoTitle({ title: item.getTitle() })
+                VideoContent({ content: item.getContent() })
+              }
             }
             .alignItems(HorizontalAlign.Start)
           }
@@ -56,34 +72,37 @@ export struct NewVideoRelease {
       }
       .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[5]))
       .padding({
-        left: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
-          $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint),
-        right: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
-          $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint),
+        left: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
+          $r('app.float.home_content_padding_lg'), $r('app.float.home_content_padding_lg')).getValue(this.mainWindowInfo.widthBp),
+        right: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
+          $r('app.float.home_content_padding_lg'), $r('app.float.home_content_padding_lg')).getValue(this.mainWindowInfo.widthBp),
         top: $r('app.float.sub_title_row_margin'),
         bottom: $r('app.float.sub_title_row_margin')
       })
-      .columnsTemplate(new BreakpointType(CommonConstants.VIDEO_GRID_COLUMNS[1], CommonConstants.VIDEO_GRID_COLUMNS[3],
-        CommonConstants.VIDEO_GRID_COLUMNS[4]).getValue(this.currentWidthBreakpoint))
+      .columnsTemplate(new BreakpointType(CommonConstants.VIDEO_GRID_COLUMNS[1], CommonConstants.VIDEO_GRID_COLUMNS[1], CommonConstants.VIDEO_GRID_COLUMNS[3],
+        CommonConstants.VIDEO_GRID_COLUMNS[4], CommonConstants.VIDEO_GRID_COLUMNS[4]).getValue(this.mainWindowInfo.widthBp))
       .rowsTemplate(HomeConstants.NEW_VIDEO_ROWS_TEMPLATE)
       .width(CommonConstants.FULL_PERCENT)
       .columnsGap($r('app.float.new_video_columns_gap'))
-      .height(this.getNewVideoHeight(this.currentWidthBreakpoint, this.windowWidth))
+      .height(this.getNewVideoHeight(this.mainWindowInfo.widthBp, this.mainWindowInfo.windowSize.width))
     }
-    .padding({ left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ?
+    .padding({ left: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG && this.currentTopIndex === 2 &&  !this.isTVShow?
       $r('app.float.side_bar_width') : 0 })
   }
 
-  getNewVideoHeight(currentWidthBreakpoint: string, windowWidth: number): string {
-    let result: number = this.getUIContext().px2vp(windowWidth) - new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0],
-      HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentWidthBreakpoint);
-    if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+  getNewVideoHeight(currentWidthBreakpoint: number, windowWidth: number): string {
+    let result: number = this.getUIContext().px2vp(windowWidth) - new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0], HomeConstants.VIDEO_GRID_MARGIN[0],
+      HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.mainWindowInfo.widthBp);
+    if (currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG) {
       result = result - HomeConstants.LG_SIDEBAR_WIDTH;
       result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * HomeConstants.SIX) / HomeConstants.SEVEN;
-    } else if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+    } else if (currentWidthBreakpoint === WidthBreakpoint.WIDTH_MD) {
       result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * CommonConstants.FOUR) / HomeConstants.FIVE;
-    } else {
+    } else if (currentWidthBreakpoint === WidthBreakpoint.WIDTH_SM) {
       result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * HomeConstants.TWO) / CommonConstants.THREE;
+    } else {
+      result = result - HomeConstants.XL_SIDEBAR_WIDTH;
+      result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * HomeConstants.SIX) / HomeConstants.SEVEN;
     }
     return (result / HomeConstants.NEW_VIDEO_ASPECT_RATIO + HomeConstants.NEW_VIDEO_DESCRIPTION_HEIGHT +
       HomeConstants.HEIGHT_UNIT);
diff --git a/features/home/src/main/ets/view/PreviousVideo.ets b/features/home/src/main/ets/view/PreviousVideo.ets
index b05b84f149ddceea15b2f69bea090949ffb2e098..3d4fd45e7b0ae3cc2afe1deec3962105dd2c0ea5 100644
--- a/features/home/src/main/ets/view/PreviousVideo.ets
+++ b/features/home/src/main/ets/view/PreviousVideo.ets
@@ -13,7 +13,9 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants, CommonConstants, VideoNavPathStack } from '@ohos/commons';
+import { BreakpointConstants, CommonConstants,
+  ImmersiveType,
+  VideoNavPathStack, WindowInfo, WindowUtil } from '@ohos/commons';
 import { BreakpointType } from '@ohos/commons';
 import { HomeConstants } from '../constants/HomeConstants';
 import { VideoImage, VideoImgViewModel } from '../viewmodel/VideoImgViewModel';
@@ -22,36 +24,41 @@ import { getTabIndex, SubtitleComponent } from './CommonView';
 
 @Component
 export struct PreviousVideo {
-  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @ObjectLink mainWindowInfo: WindowInfo;
+  @StorageLink('windowUtil') windowUtil: WindowUtil | undefined = undefined;
   @StorageLink('currentTopIndex') currentTopIndex: number = 0;
-  @State previousVideoImgListTwo: VideoImage[] = new VideoImgViewModel().getPreviousVideoTwo(this.currentWidthBreakpoint);
+  @State previousVideoImgListTwo: VideoImage[] = new VideoImgViewModel().getPreviousVideoTwo(this.mainWindowInfo.widthBp);
   @Consume('pageInfo') pageInfo: VideoNavPathStack;
   private previousVideoImgListOne: VideoImage[] = new VideoImgViewModel().getPreviousVideoOne();
 
   build() {
     Column() {
-      SubtitleComponent({ title: HomeConstants.HOME_SUB_TITLES[2] })
+      SubtitleComponent({ title: HomeConstants.HOME_SUB_TITLES[2], mainWindowInfo: this.mainWindowInfo })
 
       GridRow({
         columns: {
+          xs: BreakpointConstants.GRID_ROW_COLUMNS[2],
           sm: BreakpointConstants.GRID_ROW_COLUMNS[2],
           md: BreakpointConstants.GRID_ROW_COLUMNS[0],
-          lg: BreakpointConstants.GRID_ROW_COLUMNS[1]
+          lg: BreakpointConstants.GRID_ROW_COLUMNS[1],
+          xl: BreakpointConstants.GRID_ROW_COLUMNS[1]
         },
         gutter: $r('app.float.grid_row_gutter')
       }) {
         ForEach(this.previousVideoImgListOne, (item: VideoImage, index: number) => {
           GridCol({
             span: {
+              xs: BreakpointConstants.GRID_COLUMN_SPANS[5],
               sm: BreakpointConstants.GRID_COLUMN_SPANS[5],
               md: BreakpointConstants.GRID_COLUMN_SPANS[1],
-              lg: BreakpointConstants.GRID_COLUMN_SPANS[3]
+              lg: BreakpointConstants.GRID_COLUMN_SPANS[3],
+              xl: BreakpointConstants.GRID_COLUMN_SPANS[3]
             }
           }) {
             Row() {
               Image(item.getImgSrc())
                 .objectFit(ImageFit.Fill)
-                .margin({ right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+                .margin({ right: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ?
                 $r('app.float.previous_one_image_margin_sm') : $r('app.float.previous_one_image_margin') })
                 .layoutWeight(CommonConstants.THREE)
                 .height(CommonConstants.FULL_PERCENT)
@@ -59,24 +66,24 @@ export struct PreviousVideo {
 
               Column() {
                 Text(item.getTitle())
-                  .fontSize(new BreakpointType($r('app.float.previous_one_title_font_sm'),
-                    $r('app.float.previous_one_title_font_md'), $r('app.float.previous_one_title_font_lg'))
-                    .getValue(this.currentWidthBreakpoint))
+                  .fontSize(new BreakpointType($r('app.float.previous_one_title_font_sm'), $r('app.float.previous_one_title_font_sm'),
+                    $r('app.float.previous_one_title_font_md'), $r('app.float.previous_one_title_font_lg'), $r('app.float.previous_one_title_font_xl'))
+                    .getValue(this.mainWindowInfo.widthBp))
                   .fontWeight(CommonConstants.FONT_WEIGHT_500)
                   .maxLines(2)
                   .textOverflow({ overflow: TextOverflow.Ellipsis })
                 Text(item.getContent())
-                  .fontSize(new BreakpointType($r('app.float.previous_one_content_font_sm'),
-                    $r('app.float.previous_one_content_font_md'), $r('app.float.previous_one_content_font_lg'))
-                    .getValue(this.currentWidthBreakpoint))
+                  .fontSize(new BreakpointType($r('app.float.previous_one_content_font_sm'),$r('app.float.previous_one_content_font_sm'),
+                    $r('app.float.previous_one_content_font_md'), $r('app.float.previous_one_content_font_lg'), $r('app.float.previous_one_content_font_xl'))
+                    .getValue(this.mainWindowInfo.widthBp))
                   .opacity(CommonConstants.TEXT_OPACITY[1])
                   .fontWeight(FontWeight.Normal)
                   .margin({ top: $r('app.float.previous_one_content_margin') })
                   .maxLines(1)
                 Text(item.getOtherInfo())
-                  .fontSize(new BreakpointType($r('app.float.previous_one_content_font_sm'),
-                    $r('app.float.previous_one_content_font_md'), $r('app.float.previous_one_content_font_lg'))
-                    .getValue(this.currentWidthBreakpoint))
+                  .fontSize(new BreakpointType($r('app.float.previous_one_content_font_sm'),$r('app.float.previous_one_content_font_sm'),
+                    $r('app.float.previous_one_content_font_md'), $r('app.float.previous_one_content_font_lg'), $r('app.float.previous_one_content_font_xl'))
+                    .getValue(this.mainWindowInfo.widthBp))
                   .opacity(CommonConstants.TEXT_OPACITY[1])
                   .fontWeight(FontWeight.Normal)
                   .margin({ top: $r('app.float.previous_one_content_margin') })
@@ -87,30 +94,31 @@ export struct PreviousVideo {
                     .borderRadius($r('app.float.previous_one_button_radius'))
                     .backgroundColor($r('app.color.previous_one_button_origin'))
                     .fontWeight(CommonConstants.FONT_WEIGHT_500)
-                    .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    .fontSize(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ?
                     $r('app.float.previous_one_button_font_lg') : $r('app.float.previous_one_button_font'))
                     .fontColor(Color.White)
-                    .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    .height(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ?
                     $r('app.float.previous_one_button_height_lg') : $r('app.float.previous_one_button_height'))
                     .layoutWeight(1)
                     .groupDefaultFocus(index === 0 ? true : false)
                     .onClick(() => {
+                      this.windowUtil!.setImmersiveType(ImmersiveType.IMMERSIVE);
                       this.pageInfo.setPageName(CommonConstants.PAGE_NAMES[1]);
                       this.pageInfo.pushPath({ name: CommonConstants.PAGE_NAMES[1] });
                     })
 
                   Blank()
-                    .width(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD ?
+                    .width(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_MD ?
                     $r('app.float.previous_blank_width_md') : $r('app.float.previous_blank_width'))
 
                   Button(HomeConstants.HOME_BUTTON_TEXT[3])
                     .borderRadius($r('app.float.previous_one_button_radius'))
                     .backgroundColor($r('app.color.button_background'))
                     .fontWeight(CommonConstants.FONT_WEIGHT_500)
-                    .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    .fontSize(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ?
                     $r('app.float.previous_one_button_font_lg') : $r('app.float.previous_one_button_font'))
                     .fontColor($r('app.color.previous_one_button_origin'))
-                    .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                    .height(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ?
                     $r('app.float.previous_one_button_height_lg') : $r('app.float.previous_one_button_height'))
                     .layoutWeight(1)
                 }
@@ -125,13 +133,13 @@ export struct PreviousVideo {
             .aspectRatio(CommonConstants.PREVIOUS_ONE_ROW_RATIO)
             .width(CommonConstants.FULL_PERCENT)
             .padding({
-              top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+              top: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ?
               $r('app.float.previous_one_row_padding_sm') : $r('app.float.previous_one_row_padding'),
-              bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+              bottom: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ?
               $r('app.float.previous_one_row_padding_sm') : $r('app.float.previous_one_row_padding'),
-              left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+              left: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ?
               $r('app.float.previous_one_row_padding_sm') : $r('app.float.previous_one_row_padding'),
-              right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
+              right: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ?
               $r('app.float.previous_one_row_padding_sm') : $r('app.float.previous_one_row_padding')
             })
             .backgroundColor($r('app.color.home_component_background'))
@@ -142,15 +150,17 @@ export struct PreviousVideo {
         ForEach(this.previousVideoImgListTwo, (item: VideoImage, index: number) => {
           GridCol({
             span: {
+              xs: BreakpointConstants.GRID_COLUMN_SPANS[6],
               sm: BreakpointConstants.GRID_COLUMN_SPANS[6],
               md: BreakpointConstants.GRID_COLUMN_SPANS[4],
-              lg: BreakpointConstants.GRID_COLUMN_SPANS[4]
+              lg: BreakpointConstants.GRID_COLUMN_SPANS[4],
+              xl: BreakpointConstants.GRID_COLUMN_SPANS[4]
             }
           }) {
             Column() {
               Image(item.getImgSrc())
                 .width(CommonConstants.FULL_PERCENT)
-                .aspectRatio(PreviousVideoUtil.getImgAspectRatio(this.currentWidthBreakpoint, index))
+                .aspectRatio(PreviousVideoUtil.getImgAspectRatio(this.mainWindowInfo.widthBp, index))
                 .objectFit(ImageFit.Fill)
                 .focusable(true)
                 .borderRadius({
@@ -161,56 +171,63 @@ export struct PreviousVideo {
               Column() {
                 Text(item.getTitle())
                   .fontWeight(FontWeight.Normal)
-                  .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                  .fontSize(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ?
                   $r('app.float.previous_two_title_font_lg') : $r('app.float.previous_two_title_font'))
                   .maxLines(1)
-                  .lineHeight(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                  .lineHeight(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ?
                   $r('app.float.previous_two_title_line_lg') : $r('app.float.previous_two_title_line'))
                 Text(item.getContent())
                   .fontWeight(FontWeight.Normal)
-                  .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                  .fontSize(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ?
                   $r('app.float.previous_two_content_font_lg') : $r('app.float.previous_two_content_font'))
-                  .margin({ top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                  .margin({ top: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ?
                   $r('app.float.previous_two_content_margin_lg') : $r('app.float.previous_two_content_margin') })
                   .opacity(CommonConstants.TEXT_OPACITY[0])
                   .maxLines(1)
-                  .lineHeight(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                  .lineHeight(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ?
                   $r('app.float.previous_two_content_line_lg') : $r('app.float.previous_two_content_line'))
               }
               .alignItems(HorizontalAlign.Start)
-              .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+              .height(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ?
               $r('app.float.previous_two_column_height_lg') : $r('app.float.previous_two_column_height'))
               .width(CommonConstants.FULL_PERCENT)
               .padding({
-                top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                top: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ?
                 $r('app.float.previous_two_column_padding_lg') : $r('app.float.previous_two_column_padding'),
-                bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                bottom: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ?
                 $r('app.float.previous_two_column_bottom_lg') : $r('app.float.previous_two_column_bottom'),
-                left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                left: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ?
                 $r('app.float.previous_two_column_padding_lg') : $r('app.float.previous_two_column_padding'),
-                right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
+                right: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL ?
                 $r('app.float.previous_two_column_padding_lg') : $r('app.float.previous_two_column_padding')
               })
             }
-            .translate({ y: (((index === 2) || (index === 3)) && (this.currentWidthBreakpoint ===
-            BreakpointConstants.BREAKPOINT_MD)) ? HomeConstants.PREVIOUS_TWO_TRANSLATE_MD : '0' })
+            .translate({ y: (((index === 2) || (index === 3)) && (this.mainWindowInfo.widthBp ===
+            WidthBreakpoint.WIDTH_MD)) ? HomeConstants.PREVIOUS_TWO_TRANSLATE_MD : '0' })
             .backgroundColor($r('app.color.home_component_background'))
             .borderRadius($r('app.float.previous_two_radius'))
           }
         }, (item: VideoImage, index: number) => index + JSON.stringify(item))
       }
       .onBreakpointChange((breakPoints) => {
-        this.previousVideoImgListTwo = new VideoImgViewModel().getPreviousVideoTwo(breakPoints);
+        const BREAKPOINT_MAP = new Map<string, WidthBreakpoint>([
+          ['xs', WidthBreakpoint.WIDTH_XS],
+          ['sm', WidthBreakpoint.WIDTH_SM],
+          ['md', WidthBreakpoint.WIDTH_MD],
+          ['lg', WidthBreakpoint.WIDTH_LG],
+          ['xl', WidthBreakpoint.WIDTH_XL]
+        ]);
+        this.previousVideoImgListTwo = new VideoImgViewModel().getPreviousVideoTwo(BREAKPOINT_MAP.get(breakPoints) || WidthBreakpoint.WIDTH_SM);
       })
       .padding({
-        left: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
-          $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint),
-        right: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
-          $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint)})
+        left: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
+          $r('app.float.home_content_padding_lg'), $r('app.float.home_content_padding_xl')).getValue(this.mainWindowInfo.widthBp),
+        right: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
+          $r('app.float.home_content_padding_lg'), $r('app.float.home_content_padding_xl')).getValue(this.mainWindowInfo.widthBp)})
       .margin({ top: $r('app.float.main_daily_margin') })
     }
     .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[8]))
-    .padding({ left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ?
+    .padding({ left: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG && this.currentTopIndex === 2 ?
       $r('app.float.side_bar_width') : 0 })
   }
 }
\ No newline at end of file
diff --git a/features/home/src/main/ets/view/RecommendedVideo.ets b/features/home/src/main/ets/view/RecommendedVideo.ets
index dd35caadc99ba4aabd66bf42f934ea975326a7ac..638b2176053eea8148eb931ee86c54beb6c15297 100644
--- a/features/home/src/main/ets/view/RecommendedVideo.ets
+++ b/features/home/src/main/ets/view/RecommendedVideo.ets
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -13,29 +13,52 @@
  * limitations under the License.
  */
 
-/*
-* 最佳实践: 一多交互事件开发实践
-*/
-
 import { componentUtils } from '@kit.ArkUI';
 import { deviceInfo } from '@kit.BasicServicesKit';
-import { BreakpointType, Logger, WindowUtil } from '@ohos/commons';
+import { hilog } from '@kit.PerformanceAnalysisKit';
+import { BreakpointType, Logger, WindowUtil, WindowInfo, CommonConstants } from '@ohos/commons';
 import { HomeConstants } from '../constants/HomeConstants';
 import { VideoImage, VideoImgViewModel } from '../viewmodel/VideoImgViewModel';
-import { getTabIndex, VideoContent, VideoImgRating, VideoTitle } from './CommonView';
+import { getTabIndex, MembershipTag, VideoContent, VideoImgRating, VideoTitle } from './CommonView';
 import { RightClickMenu, VideoDialog } from './VideoDialog';
 
 @Component
 export struct RecommendedVideo {
-  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'lg';
-  @StorageLink('videoGridColumn') videoGridColumn: string = '1fr 1fr';
-  @StorageLink('windowWidth') windowWidth: number = 0;
+  @ObjectLink @Watch('mainWindowInfoChange') mainWindowInfo: WindowInfo;
+  @Prop isTVShow: boolean;
+  @StorageLink('windowUtil') windowUtil: WindowUtil | undefined = undefined;
+  @State videoGridColumn: string = CommonConstants.VIDEO_GRID_COLUMNS[2];
   @StorageLink('currentTopIndex') currentTopIndex: number = 0;
   @State isShowingRecommendBorder: boolean = false;
   @State currentRecommendFocusIndex: number = 0;
   @State videoImgList: VideoImage[] = new VideoImgViewModel().getVideoImgList();
   private videoDialogController?: CustomDialogController;
-  private windowUtil?: WindowUtil;
+  private curBp: WidthBreakpoint = this.mainWindowInfo.widthBp;
+
+  aboutToAppear(): void {
+    this.updateVideoGridColumn();
+  }
+
+  mainWindowInfoChange(): void {
+    if (this.curBp !== this.mainWindowInfo.widthBp) {
+      this.curBp = this.mainWindowInfo.widthBp;
+      this.updateVideoGridColumn();
+    }
+  }
+
+  updateVideoGridColumn(): void {
+    if (this.curBp === WidthBreakpoint.WIDTH_XS) {
+      this.videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[0];
+    } else if (this.curBp === WidthBreakpoint.WIDTH_SM) {
+      this.videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[0];
+    } else if (this.curBp === WidthBreakpoint.WIDTH_MD) {
+      this.videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[1];
+    } else if (this.curBp === WidthBreakpoint.WIDTH_LG) {
+      this.videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[2];
+    } else {
+      this.videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[1];
+    }
+  }
 
   // [Start build_grid]
   build() {
@@ -70,6 +93,16 @@ export struct RecommendedVideo {
               .height('100%')
               .alignItems(HorizontalAlign.End)
               .justifyContent(FlexAlign.End)
+              .visibility(this.isTVShow ? Visibility.None : Visibility.Visible)
+
+              Column() {
+                MembershipTag({ tagText: item.getMemberShipTag() })
+              }
+              .width('100%')
+              .height('100%')
+              .alignItems(HorizontalAlign.End)
+              .justifyContent(FlexAlign.Start)
+              .visibility(this.isTVShow ? Visibility.Visible : Visibility.None)
               // [EndExclude build_grid]
               // [EndExclude aligncontent]
             }
@@ -90,55 +123,57 @@ export struct RecommendedVideo {
                     return;
                   }
                   // Obtains all attributes of a component.
-                  let modePosition: componentUtils.ComponentInfo =
-                    this.getUIContext().getComponentUtils().getRectangleById(JSON.stringify(item));
-                  let windowOffset = modePosition.windowOffset;
-                  let size = modePosition.size;
-                  // Obtains the height of the component from the top.
-                  let rectTop: number = this.getUIContext().px2vp(windowOffset.y);
-                  let rectTop2: number = this.getUIContext().px2vp(windowOffset.y + Math.floor(size.height));
-                  // Obtains the width of the component from the left.
-                  let rectLeft: number = this.getUIContext().px2vp(windowOffset.x);
-                  let topHeightNeeded: number = new BreakpointType(HomeConstants.VIDEO_DIALOG_HEIGHTS[0],
-                    HomeConstants.VIDEO_DIALOG_HEIGHTS[1], HomeConstants.VIDEO_DIALOG_HEIGHTS[2])
-                    .getValue(this.currentWidthBreakpoint) + rectTop - rectTop2;
-                  if (this.currentWidthBreakpoint === 'sm') {
-                    topHeightNeeded += HomeConstants.HOME_HEADER_HEIGHT_SM;
-                  }
-                  let dialogYOffset: number;
-                  // Adaptive pop-up window expansion direction.
-                  if (topHeightNeeded < rectTop) {
-                    dialogYOffset = rectTop2 - new BreakpointType(HomeConstants.VIDEO_DIALOG_HEIGHTS[0],
-                      HomeConstants.VIDEO_DIALOG_HEIGHTS[1], HomeConstants.VIDEO_DIALOG_HEIGHTS[2])
-                      .getValue(this.currentWidthBreakpoint);
-                  } else {
-                    dialogYOffset = rectTop;
-                  }
-                  this.windowUtil = WindowUtil.getInstance();
-                  let isLayoutFullScreen: boolean = true;
-                  let mainWindow = this.windowUtil!.getMainWindow();
-                  isLayoutFullScreen = mainWindow!.getWindowProperties().isLayoutFullScreen;
-                  // Subtract the width and height of the window in the PC/2in1 device.
-                  if (deviceInfo.deviceType === '2in1' && !isLayoutFullScreen) {
-                    dialogYOffset -= HomeConstants.WINDOW_UNDEFINED_TOP;
-                    rectLeft -= HomeConstants.WINDOW_UNDEFINED_LEFT;
-                  } else {
-                    Logger.info(`No need to subtract extra height`);
-                  }
-                  this.videoDialogController = new CustomDialogController({
-                    builder: VideoDialog(),
-                    autoCancel: true,
-                    customStyle: true,
-                    alignment: DialogAlignment.TopStart,
-                    offset: {
-                      dx: rectLeft,
-                      dy: dialogYOffset
+                  try {
+                    let modePosition: componentUtils.ComponentInfo =
+                      this.getUIContext().getComponentUtils().getRectangleById(JSON.stringify(item));
+                    let windowOffset = modePosition.windowOffset;
+                    let size = modePosition.size;
+                    // Obtains the height of the component from the top.
+                    let rectTop: number = this.getUIContext().px2vp(windowOffset.y);
+                    let rectTop2: number = this.getUIContext().px2vp(windowOffset.y + Math.floor(size.height));
+                    // Obtains the width of the component from the left.
+                    let rectLeft: number = this.getUIContext().px2vp(windowOffset.x);
+                    let topHeightNeeded: number = new BreakpointType(HomeConstants.VIDEO_DIALOG_HEIGHTS[0], HomeConstants.VIDEO_DIALOG_HEIGHTS[0],
+                      HomeConstants.VIDEO_DIALOG_HEIGHTS[1], HomeConstants.VIDEO_DIALOG_HEIGHTS[2], HomeConstants.VIDEO_DIALOG_HEIGHTS[2])
+                      .getValue(this.mainWindowInfo.widthBp) + rectTop - rectTop2;
+                    if (this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM) {
+                      topHeightNeeded += HomeConstants.HOME_HEADER_HEIGHT_SM;
+                    }
+                    let dialogYOffset: number;
+                    // Adaptive pop-up window expansion direction.
+                    if (topHeightNeeded < rectTop) {
+                      dialogYOffset = rectTop2 - new BreakpointType(HomeConstants.VIDEO_DIALOG_HEIGHTS[0],HomeConstants.VIDEO_DIALOG_HEIGHTS[0],
+                        HomeConstants.VIDEO_DIALOG_HEIGHTS[1], HomeConstants.VIDEO_DIALOG_HEIGHTS[2], HomeConstants.VIDEO_DIALOG_HEIGHTS[2])
+                        .getValue(this.mainWindowInfo.widthBp);
+                    } else {
+                      dialogYOffset = rectTop;
                     }
-                  });
-                  // Display the customized pop-up window to play the video.
-                  this.videoDialogController.open();
+                    let isLayoutFullScreen: boolean = true;
+                    isLayoutFullScreen = this.windowUtil!.mainWindow!.getWindowProperties().isLayoutFullScreen;
+                    // Subtract the width and height of the window in the PC/2in1 device.
+                    if (deviceInfo.deviceType === '2in1' && !isLayoutFullScreen) {
+                      dialogYOffset -= HomeConstants.WINDOW_UNDEFINED_TOP;
+                      rectLeft -= HomeConstants.WINDOW_UNDEFINED_LEFT;
+                    } else {
+                      Logger.info(`No need to subtract extra height`);
+                    }
+                    this.videoDialogController = new CustomDialogController({
+                      builder: VideoDialog({ mainWindowInfo: this.mainWindowInfo }),
+                      autoCancel: true,
+                      customStyle: true,
+                      alignment: DialogAlignment.TopStart,
+                      offset: {
+                        dx: rectLeft,
+                        dy: dialogYOffset
+                      }
+                    });
+                    // Display the customized pop-up window to play the video.
+                    this.videoDialogController.open();
+                  } catch (error) {
+                    hilog.error(0x0000, 'testLog', `Get events failed, the error is: ` + JSON.stringify(error));
+                  }
                 }))
-            .bindContextMenu(RightClickMenu(this.currentWidthBreakpoint), ResponseType.RightClick)
+            .bindContextMenu(RightClickMenu(this.mainWindowInfo.widthBp), ResponseType.RightClick)
             // [End aligncontent]
             VideoTitle({ title: item.getTitle() })
             VideoContent({ content: item.getContent() })
@@ -160,12 +195,12 @@ export struct RecommendedVideo {
     .rowsGap('12vp')
     .columnsGap('12vp')
     // Dynamically calculates the total height based on the following numbers of breakpoints.
-    .height(this.getGridHeight(this.videoGridColumn, this.currentWidthBreakpoint, this.windowWidth))
+    .height(this.getGridHeight(this.videoGridColumn, this.mainWindowInfo.widthBp, this.mainWindowInfo.windowSize.width))
     .padding({
-      left: this.currentWidthBreakpoint === 'lg' && this.currentTopIndex === 2 ?
-        new BreakpointType('112vp', '120vp', '132vp').getValue(this.currentWidthBreakpoint) :
-        new BreakpointType('16vp', '24vp', '36vp').getValue(this.currentWidthBreakpoint),
-      right: new BreakpointType('16vp', '24vp', '36vp').getValue(this.currentWidthBreakpoint),
+      left: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG && this.currentTopIndex === 2 && !this.isTVShow ?
+        new BreakpointType('112vp', '112vp', '120vp', '132vp', '132vp').getValue(this.mainWindowInfo.widthBp) :
+        new BreakpointType('16vp', '16vp', '24vp', '36vp', '36vp').getValue(this.mainWindowInfo.widthBp),
+      right: new BreakpointType('16vp', '16vp', '24vp', '36vp', '36vp').getValue(this.mainWindowInfo.widthBp),
       top: '12vp',
       bottom: '6vp'
     })
@@ -174,8 +209,8 @@ export struct RecommendedVideo {
     // Zooming and pinching functions of the grid.
     // [EndExclude jh_tabindex_gettabindex]
     .gesture(PinchGesture({ fingers: 2 }).onActionUpdate((event: GestureEvent) => {
-      if (event.scale > 1 && this.currentWidthBreakpoint !== 'sm') {
-        if (this.currentWidthBreakpoint === 'md') {
+      if (event.scale > 1 && this.mainWindowInfo.widthBp !== WidthBreakpoint.WIDTH_SM) {
+        if (this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_MD) {
           this.getUIContext().animateTo({
             duration: 500
           }, () => {
@@ -188,8 +223,8 @@ export struct RecommendedVideo {
             this.videoGridColumn = '1fr 1fr 1fr 1fr';
           })
         }
-      } else if (event.scale < 1 && this.currentWidthBreakpoint !== 'sm') {
-        if (this.currentWidthBreakpoint === 'md') {
+      } else if (event.scale < 1 && this.mainWindowInfo.widthBp !== WidthBreakpoint.WIDTH_SM) {
+        if (this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_MD) {
           this.getUIContext().animateTo({
             duration: 500
           }, () => {
@@ -210,13 +245,16 @@ export struct RecommendedVideo {
     // [End grid_foreach]
   }
 
-  getGridHeight(videoGridColumn: string, currentWidthBreakpoint: string, windowWidth: number): string {
+  getGridHeight(videoGridColumn: string, currentWidthBreakpoint: number, windowWidth: number): string {
     // Obtain the window width and subtract the blank parts on both sides.
-    let result: number = this.getUIContext().px2vp(windowWidth) - new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0],
-      HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentWidthBreakpoint);
-    if (currentWidthBreakpoint === 'lg') {
+    let result: number = this.getUIContext().px2vp(windowWidth) - new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0],HomeConstants.VIDEO_GRID_MARGIN[0],
+      HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.mainWindowInfo.widthBp);
+    if (currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG && !this.isTVShow) {
       result = result - HomeConstants.LG_SIDEBAR_WIDTH;
     }
+    if (currentWidthBreakpoint === WidthBreakpoint.WIDTH_XL) {
+      result = result - HomeConstants.XL_SIDEBAR_WIDTH;
+    }
     // Calculate the width of a single image based on the number of grid columns.
     if (videoGridColumn === '1fr 1fr') {
       result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * 1) / HomeConstants.TWO;
diff --git a/features/home/src/main/ets/view/SegmentHomeHeader.ets b/features/home/src/main/ets/view/SegmentHomeHeader.ets
new file mode 100644
index 0000000000000000000000000000000000000000..0bc538be5a7256c6c3736e65614174dc0dc925cd
--- /dev/null
+++ b/features/home/src/main/ets/view/SegmentHomeHeader.ets
@@ -0,0 +1,103 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Component
+export struct SegmentHomeHeader {
+  @Link isSearching: boolean;
+  @Link currentBottomIndex: number;
+  private iconList: Array<Resource> = [$r('app.media.ic_public_more_white'), $r('app.media.ic_public_history_white'), $r('app.media.ic_public_search_white')];
+  private btnList: Array<Resource> = [$r('app.string.tab_home'), $r('app.string.tab_development'), $r('app.string.tab_member'), $r('app.string.tab_mine')];
+
+  build() {
+    Row({ space: 20 }) {
+      List({ space: 10 }) {
+        ForEach(this.iconList, (item: Resource, index: number) => {
+          ListItem() {
+            Row() {
+              Image(item)
+                .width($r('app.float.history_img_size'))
+                .height($r('app.float.history_img_size'))
+            }
+            .backgroundColor('#ff555756')
+            .width('40vp')
+            .height('100%')
+            .border({
+              width: 0,
+              radius: 20
+            })
+            .alignItems(VerticalAlign.Center)
+            .justifyContent(FlexAlign.Center)
+            .onClick(() => {
+              if (index === 2) {
+                this.isSearching = true;
+              }
+            })
+          }
+        }, (item: Resource) => JSON.stringify(item))
+      }
+      .listDirection(Axis.Horizontal)
+      .height('40vp')
+      .width('auto')
+
+      Row() {
+      }
+      .height('35vp')
+      .width(0.5)
+      .border({
+        width: 1,
+        color: '#ff555756'
+      })
+
+      List() {
+        ForEach(this.btnList, (item: Resource, index: number) => {
+          ListItem() {
+            Row() {
+              Text(item)
+                .fontSize('18fp')
+                .fontWeight(800)
+                .fontColor(this.currentBottomIndex === index ? Color.White : '#aeafaf')
+            }
+            .backgroundColor(this.currentBottomIndex === index ? '#ff555756': Color.Transparent)
+            .width('78vp')
+            .height('100%')
+            .border({
+              width: 0,
+              radius: 25
+            })
+            .alignItems(VerticalAlign.Center)
+            .justifyContent(FlexAlign.Center)
+            .onClick(() => {
+              this.currentBottomIndex = index;
+            })
+          }
+          .align(Alignment.Center)
+        }, (item: Resource) => JSON.stringify(item))
+      }
+      .listDirection(Axis.Horizontal)
+      .height('48vp')
+      .width('auto')
+    }
+    .backgroundColor('#37393a')
+    .borderRadius(50)
+    .height('63vp')
+    .padding({
+      left: 12,
+      right: 18,
+    })
+    .margin({ top: 20 })
+    .alignItems(VerticalAlign.Center)
+    .justifyContent(FlexAlign.Center)
+  }
+}
\ No newline at end of file
diff --git a/features/home/src/main/ets/view/TVBannerView.ets b/features/home/src/main/ets/view/TVBannerView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..6bbf8d96895a013bc5452923c743b918343443fc
--- /dev/null
+++ b/features/home/src/main/ets/view/TVBannerView.ets
@@ -0,0 +1,210 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { WindowInfo } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+import { Banner, BannerViewModel, TVBanner } from '../viewmodel/BannerViewModel';
+import { getTabIndex, MembershipTag } from './CommonView';
+
+class BannerDataSource implements IDataSource {
+  private bannerImgList: TVBanner[] = [];
+
+  constructor(bannerImgList: TVBanner[]) {
+    this.bannerImgList = bannerImgList;
+  }
+
+  totalCount(): number {
+    return this.bannerImgList.length;
+  }
+
+  getData(index: number): TVBanner {
+    return this.bannerImgList[index];
+  }
+
+  registerDataChangeListener(_listener: DataChangeListener): void {
+  }
+
+  unregisterDataChangeListener() {
+  }
+}
+
+@Component
+export struct TVBannerView {
+  @ObjectLink mainWindowInfo: WindowInfo;
+  @StorageLink('currentTopIndex') currentTopIndex: number = 0;
+  @State firstShowIndex: number = 0;
+  @State bannerScaleList: Array<ScaleOptions | null> = new BannerViewModel().getTVBannerScaleList();
+  @State bannerTranslateList: Array<TranslateOptions> = [];
+  @State bannerZIndexList: Array<number> = [];
+  @State bannerImgDataList: Array<Resource> = [];
+  @State currentCenterIndex: number = 2;
+  private bannerImgList: TVBanner[] = new BannerViewModel().getTVBannerList();
+  private bannerDataSource: BannerDataSource = new BannerDataSource([]);
+  private scaleParamData: Array<ScaleOptions> =
+    [HomeConstants.TV_BANNER_IMAGE_SCALE_1, HomeConstants.TV_BANNER_IMAGE_SCALE_2,
+      HomeConstants.TV_BANNER_IMAGE_SCALE_3, HomeConstants.TV_BANNER_IMAGE_SCALE_2,
+      HomeConstants.TV_BANNER_IMAGE_SCALE_1];
+  private bannerCardTargetHeight: Array<number> = [216, 254, 300 ,254, 216];
+  @State bannerCardHeight: number = 300;
+  @State bannerCardWidth: number = 256;
+  @State bannerCardHeightList: Array<number> = [];
+  @State borderRadiusValue: Array<string> = [];
+
+  aboutToAppear(): void {
+    this.bannerDataSource = new BannerDataSource(this.bannerImgList);
+    this.updateBannerCard();
+  }
+
+  build() {
+    Column() {
+      // Banner layout.
+      Swiper() {
+        LazyForEach(this.bannerDataSource, (item: TVBanner, index: number) => {
+          Stack({ alignContent: Alignment.BottomStart }) {
+            Image(this.bannerImgDataList[index])
+              .objectFit(ImageFit.Fill)
+              .borderRadius(this.borderRadiusValue[index])
+              .focusable(true)
+              .height('100%')
+              .width('100%')
+
+            Row() {
+              Text(item.title)
+                .fontSize('16vp')
+                .fontColor(Color.White)
+                .fontWeight(800)
+                .scale({
+                  x: 1 / (this.bannerScaleList[index]?.x || 1),
+                  y: 1 / (this.bannerScaleList[index]?.y || 1),
+                })
+
+              MembershipTag()
+                .scale({
+                  x: 1 / (this.bannerScaleList[index]?.x || 1),
+                  y: 1 / (this.bannerScaleList[index]?.y || 1),
+                })
+            }
+            .margin({
+              bottom: 8
+            })
+            .padding({
+              left: 8,
+              right: 8
+            })
+            .zIndex(this.bannerZIndexList[index] + 1)
+            .translate({
+              x: -(this.bannerTranslateList[index]?.x as number || 0),
+              y: 0,
+            })
+            .justifyContent(FlexAlign.SpaceBetween)
+            .width('100%')
+            .visibility(this.currentCenterIndex === index ? Visibility.Visible : Visibility.None)
+          }
+          .width('100%')
+          .height(this.bannerCardHeight)
+          .zIndex(this.bannerZIndexList[index])
+          .scale(this.bannerScaleList[index])
+          .translate(this.bannerTranslateList[index])
+          .borderRadius(this.borderRadiusValue[index])
+        }, (item: Banner, index: number) => index + JSON.stringify(item))
+      }
+      .height(this.bannerCardHeight)
+      .displayCount(HomeConstants.TV_BANNER_IMAGE_COUNT)
+      .indicator(false)
+      .loop(true)
+      .width('100%')
+      .autoPlay(true)
+      .interval(6000)
+      .effectMode(EdgeEffect.None)
+      .tabIndex(getTabIndex('Banner'))
+      .onChange((index: number) => {
+        this.firstShowIndex = index;
+        this.getUIContext().animateTo({
+          duration: 500,
+          curve: Curve.Friction,
+          delay: 0,
+          iterations: 1, // 设置-1表示动画无限循环
+          playMode: PlayMode.Alternate,
+          expectedFrameRateRange: {
+            min: 10,
+            max: 120,
+            expected: 60,
+          }
+        }, () => {
+          this.updateBannerCard();
+        })
+      })
+      .onSizeChange((_oldValue: SizeOptions, newValue: SizeOptions) => {
+        this.bannerCardWidth = (newValue.width as number)  / HomeConstants.TV_BANNER_IMAGE_COUNT;
+      })
+    }
+    .width('100%')
+    .margin({
+      top: 124
+    })
+  }
+
+  private updateBannerCard(): void {
+    const bannerDataLength: number = this.bannerDataSource.totalCount();
+    let resList: Array<number> = [];
+    const centerOffset = Math.floor(HomeConstants.TV_BANNER_IMAGE_COUNT / 2);
+    this.currentCenterIndex = (this.firstShowIndex + centerOffset) % bannerDataLength;
+    for (let showIndex = 0; showIndex < 5; showIndex++) {
+      const current = this.firstShowIndex + showIndex + bannerDataLength;
+      const currentIndex = current % bannerDataLength;
+      resList.push(currentIndex);
+    }
+    for (let index = 0; index < bannerDataLength; index++) {
+      const indexOf: number = resList.indexOf(index);
+      if (indexOf !== -1) {
+        const indexScale: ScaleOptions = this.scaleParamData[indexOf];
+        this.bannerScaleList[index] = indexScale;
+        // this.bannerScaleList[index] = {
+        //   x: this.bannerAspectRatio[indexOf] * this.bannerCardTargetHeight[indexOf] / this.bannerCardWidth,
+        //   y: 1
+        // };
+        this.bannerTranslateList[index] = this.getTranslateParam(indexScale, indexOf, index);
+        this.bannerCardHeightList[index] = this.bannerCardTargetHeight[indexOf];
+      } else {
+        this.bannerScaleList[index] = HomeConstants.TV_BANNER_IMAGE_SCALE_1;
+        this.bannerTranslateList[index] = this.getTranslateParam(HomeConstants.TV_BANNER_IMAGE_SCALE_1, 2, index);
+        this.bannerZIndexList[index] = 1;
+        this.bannerCardHeightList[index] = 216;
+      }
+      this.borderRadiusValue[index] = '5%';
+      this.bannerImgDataList[index] = this.currentCenterIndex === index ? this.bannerDataSource.getData(index).imgHorizontal : this.bannerDataSource.getData(index).imgVertical;
+    }
+    this.borderRadiusValue[this.currentCenterIndex] = '2%';
+    this.bannerZIndexList[this.currentCenterIndex] = 4;
+    console.log('hhhh', JSON.stringify(this.bannerZIndexList))
+  }
+
+  private getTranslateParam(scale: ScaleOptions, index: number, currentIndex: number): TranslateOptions {
+    let res: TranslateOptions = {};
+    let yOffset: number = Math.abs((1 - (scale.y || 1))) * this.bannerCardHeight / 2;
+    if (index === 1) {
+      res.x = -140;
+      this.bannerZIndexList[currentIndex] = 3;
+    } else if (index === 3) {
+      this.bannerZIndexList[currentIndex] = 3;
+      res.x = 140;
+    } else {
+      this.bannerZIndexList[currentIndex] = 1;
+      res.x = 0;
+    }
+    res.y = yOffset;
+    return res;
+  }
+}
\ No newline at end of file
diff --git a/features/home/src/main/ets/view/TVHome.ets b/features/home/src/main/ets/view/TVHome.ets
new file mode 100644
index 0000000000000000000000000000000000000000..37b359b79ab5a12724835b568839286dde8f880f
--- /dev/null
+++ b/features/home/src/main/ets/view/TVHome.ets
@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// import { SearchView } from '@ohos/search';
+import {  WindowInfo, WindowUtil } from '@ohos/commons';
+import { SegmentHomeHeader } from './SegmentHomeHeader';
+import { TVHomeContent } from './TVHomeContent';
+
+@Component
+export struct TVHome {
+  @ObjectLink mainWindowInfo: WindowInfo;
+  @StorageLink('scrollHeight') scrollHeight: number = 0;
+  @StorageLink('currentTopIndex') currentTopIndex: number = 2;
+  @StorageLink('windowUtil') windowUtil: WindowUtil | undefined = undefined;
+  @State currentBottomIndex: number = 0;
+  @State isSearching: boolean = false;
+  private sideScroller: Scroller = new Scroller();
+
+  build() {
+    // [Start tabs_barposition]
+    // The immersive design of the home page is displayed when the top tab is switched to 2.
+    Stack() {
+      Scroll(this.sideScroller) {
+        Column() {
+          TVHomeContent()
+            .visibility(!this.isSearching ? Visibility.Visible : Visibility.None)
+
+          // SearchView({ isSearching: $isSearching })
+          //   .visibility(!this.isSearching ? Visibility.None : Visibility.Visible)
+        }
+        .width('100%')
+      }
+      .scrollBar(BarState.Off)
+      .height('100%')
+      // Obtains the sliding offset on the y axis during sliding.
+      .onScrollFrameBegin((offset: number) => {
+        this.scrollHeight = this.sideScroller.currentOffset().yOffset;
+        return { offsetRemain: offset };
+      })
+
+      SegmentHomeHeader({ isSearching: $isSearching, currentBottomIndex: $currentBottomIndex })
+    }
+    .height('100%')
+    .width('100%')
+    .alignContent(Alignment.Top)
+    .backgroundColor($r('sys.color.gray_02'))
+  }
+}
\ No newline at end of file
diff --git a/features/home/src/main/ets/view/TVHomeContent.ets b/features/home/src/main/ets/view/TVHomeContent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f4a42f32ca556d8c9395154258983d78ea6f6f0f
--- /dev/null
+++ b/features/home/src/main/ets/view/TVHomeContent.ets
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { WindowUtil } from '@ohos/commons';
+import { DailyVideo } from './DailyVideo';
+import { NewVideoRelease } from './NewVideoRelease';
+import { RecommendedVideo } from './RecommendedVideo';
+import { TVBannerView } from './TVBannerView';
+import { TVPreviousVideo } from './TVPreviousVideo';
+import { TVTopBarView } from './TVTopBarView';
+
+@Component
+export struct TVHomeContent {
+  @StorageLink('windowUtil') windowUtil: WindowUtil | undefined = undefined;
+  @StorageLink('currentTVTopIndex') currentTVTopIndex: number = 0;
+
+  build() {
+    Column() {
+      TVBannerView({ mainWindowInfo: this.windowUtil!.mainWindowInfo})
+      TVTopBarView()
+      RecommendedVideo({ mainWindowInfo: this.windowUtil!.mainWindowInfo, isTVShow: true })
+      NewVideoRelease({ mainWindowInfo: this.windowUtil!.mainWindowInfo, isTVShow: true })
+      DailyVideo({ mainWindowInfo: this.windowUtil!.mainWindowInfo, isTVShow: true })
+      TVPreviousVideo({ mainWindowInfo: this.windowUtil!.mainWindowInfo })
+    }
+    .alignItems(HorizontalAlign.Start)
+    .width('100%')
+  }
+}
\ No newline at end of file
diff --git a/features/home/src/main/ets/view/TVPreviousVideo.ets b/features/home/src/main/ets/view/TVPreviousVideo.ets
new file mode 100644
index 0000000000000000000000000000000000000000..5d4a48b7100dcd31611beb5440fcfff396ca1b09
--- /dev/null
+++ b/features/home/src/main/ets/view/TVPreviousVideo.ets
@@ -0,0 +1,121 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BreakpointConstants, CommonConstants, VideoNavPathStack, WindowInfo } from '@ohos/commons';
+import { BreakpointType } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+import { VideoImage, VideoImgViewModel } from '../viewmodel/VideoImgViewModel';
+import { getTabIndex, SubtitleComponent } from './CommonView';
+
+@Component
+export struct TVPreviousVideo {
+  @ObjectLink mainWindowInfo: WindowInfo;
+  @StorageLink('currentTopIndex') currentTopIndex: number = 0;
+  @Consume('pageInfo') pageInfo: VideoNavPathStack;
+  private previousVideoImgListOne: VideoImage[] = new VideoImgViewModel().getTVPreviousVideoOne();
+  private previousVideoImgListTwo: VideoImage[] = new VideoImgViewModel().getTVPreviousVideoImgListTwo();
+
+  build() {
+    Column() {
+      SubtitleComponent({ title: HomeConstants.HOME_SUB_TITLES[2], mainWindowInfo: this.mainWindowInfo })
+
+      GridRow({
+        columns: {
+          xs: BreakpointConstants.GRID_ROW_COLUMNS[2],
+          sm: BreakpointConstants.GRID_ROW_COLUMNS[2],
+          md: BreakpointConstants.GRID_ROW_COLUMNS[0],
+          lg: BreakpointConstants.GRID_ROW_COLUMNS[0],
+          xl: BreakpointConstants.GRID_ROW_COLUMNS[1]
+        },
+        gutter: $r('app.float.grid_row_gutter')
+      }) {
+        ForEach(this.previousVideoImgListOne, (item: VideoImage, _index: number) => {
+          GridCol({
+            span: {
+              xs: BreakpointConstants.GRID_COLUMN_SPANS[5],
+              sm: BreakpointConstants.GRID_COLUMN_SPANS[5],
+              md: BreakpointConstants.GRID_COLUMN_SPANS[1],
+              lg: BreakpointConstants.GRID_COLUMN_SPANS[4],
+              xl: BreakpointConstants.GRID_COLUMN_SPANS[3]
+            }
+          }) {
+            Stack({ alignContent: Alignment.BottomStart }) {
+              Image(item.getImgSrc())
+                .objectFit(ImageFit.Fill)
+                .margin({ right: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ?
+                  $r('app.float.previous_one_image_margin_sm') : $r('app.float.previous_one_image_margin') })
+                .layoutWeight(CommonConstants.THREE)
+                .height(CommonConstants.FULL_PERCENT)
+                .borderRadius($r('app.float.banner_img_border_radius'))
+
+              Text(item.getTitle())
+                .fontSize(new BreakpointType($r('app.float.previous_one_title_font_sm'), $r('app.float.previous_one_title_font_sm'),
+                  $r('app.float.previous_one_title_font_md'), $r('app.float.previous_one_title_font_lg'), $r('app.float.previous_one_title_font_xl'))
+                  .getValue(this.mainWindowInfo.widthBp))
+                .fontWeight(CommonConstants.FONT_WEIGHT_500)
+                .maxLines(2)
+                .textOverflow({ overflow: TextOverflow.Ellipsis })
+                .fontColor(Color.White)
+                .margin({
+                  left: 15,
+                  bottom: 20
+                })
+            }
+            .aspectRatio(0.7)
+            .width(CommonConstants.FULL_PERCENT)
+            .borderRadius($r('app.float.card_radius'))
+            .onClick(() => {
+              this.pageInfo.setPageName(CommonConstants.PAGE_NAMES[1]);
+              this.pageInfo.pushPath({ name: CommonConstants.PAGE_NAMES[1] });
+            })
+          }
+        }, (item: VideoImage, index: number) => index + JSON.stringify(item))
+
+        ForEach(this.previousVideoImgListTwo, (item: VideoImage, _index: number) => {
+          GridCol({
+            span: {
+              xs: BreakpointConstants.GRID_COLUMN_SPANS[5],
+              sm: BreakpointConstants.GRID_COLUMN_SPANS[5],
+              md: BreakpointConstants.GRID_COLUMN_SPANS[1],
+              lg: BreakpointConstants.GRID_COLUMN_SPANS[1],
+              xl: BreakpointConstants.GRID_COLUMN_SPANS[3]
+            }
+          }) {
+            Row() {
+              Image(item.getImgSrc())
+                .objectFit(ImageFit.Fill)
+                .layoutWeight(CommonConstants.THREE)
+                .height(CommonConstants.FULL_PERCENT)
+                .borderRadius($r('app.float.banner_img_border_radius'))
+            }
+            .aspectRatio(2.3)
+            .width(CommonConstants.FULL_PERCENT)
+            .borderRadius($r('app.float.card_radius'))
+          }
+          .margin({
+            top: 12
+          })
+        }, (item: VideoImage, index: number) => index + JSON.stringify(item))
+      }
+      .padding({
+        left: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
+          $r('app.float.home_content_padding_lg'), $r('app.float.home_content_padding_xl')).getValue(this.mainWindowInfo.widthBp),
+        right: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'),
+          $r('app.float.home_content_padding_lg'), $r('app.float.home_content_padding_xl')).getValue(this.mainWindowInfo.widthBp)})
+      .margin({ top: $r('app.float.main_daily_margin') })
+    }
+    .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[8]))
+  }
+}
\ No newline at end of file
diff --git a/features/home/src/main/ets/view/TVTopBarView.ets b/features/home/src/main/ets/view/TVTopBarView.ets
new file mode 100644
index 0000000000000000000000000000000000000000..9be13ca4ab1a22cd187a19198666f04e370c49e8
--- /dev/null
+++ b/features/home/src/main/ets/view/TVTopBarView.ets
@@ -0,0 +1,86 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HomeConstants } from '../constants/HomeConstants'
+
+@Component
+export struct TVTopBarView {
+  @StorageLink('currentTVTopIndex') currentTVTopIndex: number = 0;
+
+  build() {
+    Column() {
+      List() {
+        ForEach(HomeConstants.TOP_TOPIC_LIST, (item: string, index: number) => {
+          ListItem() {
+            Row() {
+              Row() {
+                Row() {
+                  Text(item)
+                    .fontSize($r('app.float.search_tab_font_selected'))
+                    .fontWeight(this.currentTVTopIndex === index ? 700 : 500)
+                    .width(this.currentTVTopIndex === index ? '70vp' : '66vp')
+                    .textAlign(TextAlign.Center)
+                    .fontColor(this.currentTVTopIndex === index ? Color.White : '#aeafaf')
+                    .lineHeight(index === this.currentTVTopIndex ? $r('app.float.top_tab_list_height_selected') :
+                      $r('app.float.top_tab_list_height'))
+                    .focusable(true)
+                    .groupDefaultFocus(index === 0 ? true : false)
+                    .borderRadius($r('app.float.text_focus_radius'))
+                }
+                .backgroundColor(this.currentTVTopIndex === index ? '#ff555756': Color.Transparent)
+                .width(92)
+                .height(48)
+                .alignItems(VerticalAlign.Center)
+                .justifyContent(FlexAlign.Center)
+                .onClick(() => {
+                  this.currentTVTopIndex = index;
+                })
+                .borderRadius(30)
+              }
+              .width(96)
+              .height(52)
+              .borderRadius(30)
+              .alignItems(VerticalAlign.Center)
+              .justifyContent(FlexAlign.Center)
+              .backgroundColor($r('sys.color.gray_02'))
+            }
+            .borderRadius(30)
+            .width(100)
+            .height(56)
+            .linearGradient(this.currentTVTopIndex === index ? {
+              angle: 90,
+              colors: [[Color.White, 0.0], [$r('sys.color.gray_02'), 1]]
+            } : null)
+            .alignItems(VerticalAlign.Center)
+            .justifyContent(FlexAlign.Center)
+          }
+          .align(Alignment.Center)
+        }, (item: number, index: number) => index + JSON.stringify(item))
+      }
+      .scrollBar(BarState.Off)
+      .listDirection(Axis.Horizontal)
+      .width('100%')
+      .height('100%')
+    }
+    .height(86)
+    .padding(10)
+    .alignItems(HorizontalAlign.Start)
+    .justifyContent(FlexAlign.Start)
+    .margin({
+      top: 32,
+      left: 32
+    })
+  }
+}
\ No newline at end of file
diff --git a/features/home/src/main/ets/view/VideoDaily.ets b/features/home/src/main/ets/view/VideoDaily.ets
index f8b6200b4e8648d289beb4157bc10083aab83fc7..1cf9c9c125dcc41daf74aac93cdf7f8f1f65c01f 100644
--- a/features/home/src/main/ets/view/VideoDaily.ets
+++ b/features/home/src/main/ets/view/VideoDaily.ets
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -13,26 +13,23 @@
  * limitations under the License.
  */
 
-import { AvPlayerUtil, BreakpointConstants, CommonConstants, WindowUtil } from '@ohos/commons';
-import { BreakpointType } from '@ohos/commons';
-import { HomeConstants } from '../constants/HomeConstants';
-import { VideoImage, VideoImgViewModel } from '../viewmodel/VideoImgViewModel';
-import { getTabIndex, SubtitleComponent, VideoImgComponent, VideoImgPlay, VideoImgRating } from './CommonView';
 import { display, window } from '@kit.ArkUI';
 import { deviceInfo } from '@kit.BasicServicesKit';
 import { KeyCode } from '@kit.InputKit';
+import { AvPlayerUtil, WindowInfo, WindowUtil } from '@ohos/commons';
+import { BreakpointType } from '@ohos/commons';
+import { HomeConstants } from '../constants/HomeConstants';
+import { getTabIndex } from './CommonView';
+import { hilog } from '@kit.PerformanceAnalysisKit';
 
 @Component
 export struct DailyVideo {
+  @ObjectLink mainWindowInfo: WindowInfo;
   @State scrollHeight: number =0;
-  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'lg';
-  @StorageLink('currentHeightBreakpoint') currentHeightBreakpoint: string = 'lg';
-  @StorageLink('windowWidth') windowWidth: number = 0;
   @StorageLink('currentTopIndex') currentTopIndex: number = 0;
   @State isShowingMainBorder: boolean = false;
-  private mainWindowClass?: window.Window;
   @StorageLink('isFullScreen') isFullScreen: boolean = false;
-  private windowUtil?: WindowUtil = WindowUtil.getInstance();
+  @StorageLink('windowUtil') windowUtil: WindowUtil | undefined = undefined;
   @StorageLink('isHalfFolded') isHalfFolded: boolean = false;
   private avPlayerUtil?: AvPlayerUtil;
   private xComponentController: XComponentController = new XComponentController();
@@ -40,34 +37,47 @@ export struct DailyVideo {
   aboutToAppear(): void {
     // [Start dd_judgment_of]
     // Judgment of the horizontal window. (The actual application may need to be combined with other conditions, for example, determine the horizontal breakpoint)
-    if (this.currentHeightBreakpoint === 'sm' && this.currentWidthBreakpoint === 'md') {
+    if (this.mainWindowInfo.heightBp === HeightBreakpoint.HEIGHT_SM && this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_MD) {
       // Horizontal window page layout.
     }
     // Judgment of the square window. (The actual use may need to be combined with other conditions, such as determining horizontal breakpoints)
-    if (this.currentHeightBreakpoint === 'md' && this.currentWidthBreakpoint === 'sm') {
+    if (this.mainWindowInfo.heightBp === HeightBreakpoint.HEIGHT_MD && this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM) {
       // Square-like window page layout.
     }
     // [End dd_judgment_of]
 
     // [Start dd_set_preferred_orientation]
-    let currentHeightBreakpoint: string | undefined = AppStorage.get('currentHeightBreakpoint');
-    if (currentHeightBreakpoint === 'md') {
-      this.mainWindowClass?.setPreferredOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED);
+    if (this.mainWindowInfo.heightBp === HeightBreakpoint.HEIGHT_MD) {
+      this.windowUtil!.mainWindow.setPreferredOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED).catch(() => {
+        // TODO: Implement error handling.
+      });
     }
     // [End dd_set_preferred_orientation]
     // [Start dd_isfullscreen]
     if (this.isFullScreen) {
-      if (deviceInfo.deviceType !== '2in1') {
-        this.windowUtil!.disableWindowSystemBar();
+      if (this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL) {
+        this.windowUtil!.mainWindow.setWindowSystemBarEnable([]).catch(() => {
+          hilog.error(0x0000, 'testLog', `setWindowSystemBarEnable failed.`);
+        });
       }
-      if ((!display.isFoldable() && deviceInfo.deviceType === 'phone') ||
-        display.getFoldStatus() === display.FoldStatus.FOLD_STATUS_FOLDED) {
-        this.windowUtil!.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE);
-      }
-      if (display.isFoldable()) {
-        if (this.isHalfFolded) {
-          this.windowUtil!.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE);
+      try {
+        let isFoldable = display.isFoldable();
+        if ((!isFoldable && deviceInfo.deviceType === 'phone') ||
+          display.getFoldStatus() === display.FoldStatus.FOLD_STATUS_FOLDED) {
+          this.windowUtil!.mainWindow.setPreferredOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE).catch(() => {
+            hilog.error(0x0000, 'testLog', `setPreferredOrientation failed.`);
+          });
+        }
+        if (isFoldable) {
+          if (this.isHalfFolded) {
+            this.windowUtil!.mainWindow.setPreferredOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE)
+              .catch(() => {
+                hilog.error(0x0000, 'testLog', `setPreferredOrientation failed.`);
+              });
+          }
         }
+      } catch (error) {
+        hilog.error(0x0000, 'testLog', `Get display foldable params failed. Code: ${error.code}, message: ${error.message}`);
       }
     }
     // [End dd_isfullscreen]
@@ -76,7 +86,7 @@ export struct DailyVideo {
     Column(){
       // [Start dd_break_point_type_getValue]
       Text('Test')
-        .fontSize(new BreakpointType('14fp', '16fp', '18fp').getValue(this.currentWidthBreakpoint))
+        .fontSize(new BreakpointType('14fp', '14fp', '16fp', '18fp', '18fp').getValue(this.mainWindowInfo.widthBp))
       // [End dd_break_point_type_getValue]
 
       // [Start dd_movable_layout]
@@ -108,10 +118,10 @@ export struct DailyVideo {
       // Carousel layout.
       Swiper() {
       }
-      .displayCount(new BreakpointType(1, 2, 3).getValue(this.currentWidthBreakpoint))
-      .nextMargin(new BreakpointType(0, 16, 32).getValue(this.currentWidthBreakpoint))
-      .prevMargin(new BreakpointType(0, 16, 32).getValue(this.currentWidthBreakpoint))
-      .indicator(this.currentWidthBreakpoint === 'sm' ? Indicator.dot()
+      .displayCount(new BreakpointType(1, 1, 2, 3, 3).getValue(this.mainWindowInfo.widthBp))
+      .nextMargin(new BreakpointType(0, 0, 16, 32, 32).getValue(this.mainWindowInfo.widthBp))
+      .prevMargin(new BreakpointType(0, 0, 16, 32, 32).getValue(this.mainWindowInfo.widthBp))
+      .indicator(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ? Indicator.dot()
         .itemWidth(6)
         .itemHeight(6)
         .selectedItemWidth(12)
@@ -121,8 +131,8 @@ export struct DailyVideo {
         .selectedColor(Color.White) : false
       )
       .padding({
-        left: this.currentWidthBreakpoint === 'sm' ? 12 : 0,
-        right: this.currentWidthBreakpoint === 'sm' ? 12 : 0
+        left: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ? 12 : 0,
+        right: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ? 12 : 0
       })
       // [End dd_carousel_layout]
 
@@ -130,9 +140,9 @@ export struct DailyVideo {
       // Palace grid layout.
       Grid() {
       }
-      .columnsTemplate('1fr '.repeat(this.currentWidthBreakpoint === 'sm' ? 4 : 8))
-      .rowsTemplate(this.currentWidthBreakpoint === 'sm' ? '1fr 1fr' : '1fr')
-      .height(this.currentWidthBreakpoint === 'sm' ? 164 : 78)
+      .columnsTemplate('1fr '.repeat(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ? 4 : 8))
+      .rowsTemplate(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ? '1fr 1fr' : '1fr')
+      .height(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ? 164 : 78)
       .columnsGap(12)
       .rowsGap(12)
       // [End dd_palace_grid_layout]
@@ -199,8 +209,8 @@ export struct DailyVideo {
               $r('app.float.top_tab_list_bottom')
             })
             .padding({
-              left: new BreakpointType(8, 12, 18).getValue(this.currentWidthBreakpoint),
-              right: new BreakpointType(8, 12, 18).getValue(this.currentWidthBreakpoint)
+              left: new BreakpointType(8, 8, 12, 18, 18).getValue(this.mainWindowInfo.widthBp),
+              right: new BreakpointType(8, 8, 12, 18, 18).getValue(this.mainWindowInfo.widthBp)
             })
             .onClick(() => {
               this.currentTopIndex = index;
@@ -212,6 +222,8 @@ export struct DailyVideo {
         .scrollBar(BarState.Off)
         .listDirection(Axis.Horizontal)
         .padding({ left: $r('app.float.search_top_padding') })
+        .height('auto')
+        .width('auto')
       }
       .alignItems(HorizontalAlign.Center)
       .layoutWeight(1)
@@ -223,7 +235,7 @@ export struct DailyVideo {
           right: $r('app.float.top_tab_img_margin')
         })
         .fillColor(this.currentTopIndex === 2 ? Color.White : Color.Black)
-        .visibility(this.currentWidthBreakpoint === 'sm' ? Visibility.Visible : Visibility.None)
+        .visibility(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ? Visibility.Visible : Visibility.None)
     }
     .height($r('app.float.top_bar_height'))
     .width('100%')
@@ -259,8 +271,8 @@ export struct DailyVideo {
               $r('app.float.top_tab_list_bottom')
             })
             .padding({
-              left: new BreakpointType(8, 12, 18).getValue(this.currentWidthBreakpoint),
-              right: new BreakpointType(8, 12, 18).getValue(this.currentWidthBreakpoint)
+              left: new BreakpointType(8, 8, 12, 18, 18).getValue(this.mainWindowInfo.widthBp),
+              right: new BreakpointType(8, 8, 12, 18, 18).getValue(this.mainWindowInfo.widthBp)
             })
             .onClick(() => {
               this.currentTopIndex = index;
@@ -272,6 +284,8 @@ export struct DailyVideo {
         .scrollBar(BarState.Off)
         .listDirection(Axis.Horizontal)
         .padding({ left: $r('app.float.search_top_padding') })
+        .width('auto')
+        .height('auto')
       }
       .alignItems(HorizontalAlign.Center)
       .layoutWeight(1)
@@ -283,7 +297,7 @@ export struct DailyVideo {
           right: $r('app.float.top_tab_img_margin')
         })
         .fillColor(this.currentTopIndex === 2 ? Color.White : Color.Black)
-        .visibility(this.currentWidthBreakpoint === 'sm' ? Visibility.Visible : Visibility.None)
+        .visibility(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ? Visibility.Visible : Visibility.None)
     }
     .height($r('app.float.top_bar_height'))
     .width('100%')
diff --git a/features/home/src/main/ets/view/VideoDialog.ets b/features/home/src/main/ets/view/VideoDialog.ets
index d8e31a1ce5f2d8389c367c07ba66f9fe878b98fa..ab20a8db3bea27bf5493d9b4ccfea982f991c14e 100644
--- a/features/home/src/main/ets/view/VideoDialog.ets
+++ b/features/home/src/main/ets/view/VideoDialog.ets
@@ -17,10 +17,10 @@ import { resourceManager } from '@kit.LocalizationKit';
 import { common } from '@kit.AbilityKit';
 import { media } from '@kit.MediaKit';
 import { BusinessError } from '@kit.BasicServicesKit';
-import { BreakpointConstants, CommonConstants } from '@ohos/commons';
+import { hilog } from '@kit.PerformanceAnalysisKit';
+import { CommonConstants, WindowInfo } from '@ohos/commons';
 import { BreakpointType, Logger } from '@ohos/commons';
 import { HomeConstants } from '../constants/HomeConstants';
-import { hilog } from '@kit.PerformanceAnalysisKit';
 
 @Builder
 function MenuItemFunction(img: Resource, text: ResourceStr) {
@@ -38,7 +38,7 @@ function MenuItemFunction(img: Resource, text: ResourceStr) {
 }
 
 @Builder
-export function RightClickMenu(currentWidthBreakpoint: string) {
+export function RightClickMenu(currentWidthBreakpoint: number) {
   Column() {
     MenuItemFunction($r('app.media.ic_public_view_list'), HomeConstants.VIDEO_DIALOG_OPTIONS[0])
     MenuItemFunction($r('app.media.ic_public_highlights'), HomeConstants.VIDEO_DIALOG_OPTIONS[1])
@@ -46,7 +46,7 @@ export function RightClickMenu(currentWidthBreakpoint: string) {
   }
   .borderRadius($r('app.float.dialog_text_radius'))
   .backgroundColor(Color.White)
-  .width(currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.dialog_text_col_width_lg') :
+  .width(currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG ? $r('app.float.dialog_text_col_width_lg') :
     $r('app.float.dialog_text_col_width'))
   .padding({
     left: $r('app.float.dialog_text_col_padding'),
@@ -56,7 +56,7 @@ export function RightClickMenu(currentWidthBreakpoint: string) {
 
 @CustomDialog
 export struct VideoDialog {
-  @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
+  @ObjectLink mainWindowInfo: WindowInfo;
   private xComponentController: XComponentController = new XComponentController();
   private surfaceId: string = '';
   private avPlayer?: media.AVPlayer;
@@ -174,10 +174,13 @@ export struct VideoDialog {
           .height(CommonConstants.FULL_PERCENT)
       }
       .margin({ bottom: $r('app.float.dialog_col_margin') })
-      .height(new BreakpointType($r('app.float.dialog_col_height_sm'), $r('app.float.dialog_col_height_md'),
-        $r('app.float.dialog_col_height_lg')).getValue(this.currentWidthBreakpoint))
-      .width(new BreakpointType($r('app.float.dialog_col_width_sm'), $r('app.float.dialog_col_width_md'),
-        $r('app.float.dialog_col_width_lg')).getValue(this.currentWidthBreakpoint))
+      .height(new BreakpointType($r('app.float.dialog_col_height_sm'), $r('app.float.dialog_col_height_sm'),
+        $r('app.float.dialog_col_height_md'),
+        $r('app.float.dialog_col_height_lg'),
+        $r('app.float.dialog_col_height_lg')).getValue(this.mainWindowInfo.widthBp))
+      .width(new BreakpointType($r('app.float.dialog_col_width_sm'), $r('app.float.dialog_col_width_sm'),
+        $r('app.float.dialog_col_width_md'),
+        $r('app.float.dialog_col_width_lg'), $r('app.float.dialog_col_width_lg')).getValue(this.mainWindowInfo.widthBp))
       .aspectRatio(HomeConstants.VIDEO_DIALOG_ASPECT_RATIO)
       .onClick(() => {
         if (this.avPlayer!.state === CommonConstants.AV_PLAYER_STOPPED_STATE) {
@@ -197,7 +200,7 @@ export struct VideoDialog {
         }
       })
 
-      RightClickMenu(this.currentWidthBreakpoint)
+      RightClickMenu(this.mainWindowInfo.widthBp)
     }
     .alignItems(HorizontalAlign.Start)
   }
diff --git a/features/home/src/main/ets/viewmodel/BannerViewModel.ets b/features/home/src/main/ets/viewmodel/BannerViewModel.ets
index 59cf99e5a7b54b960dfbe4ff92879b3ad08a5cab..5bde5b3ff92733d190c41f3b5ae1145389480fbc 100644
--- a/features/home/src/main/ets/viewmodel/BannerViewModel.ets
+++ b/features/home/src/main/ets/viewmodel/BannerViewModel.ets
@@ -21,6 +21,8 @@ export class BannerViewModel {
   private bannerList: Banner[] = [];
   private bannerImgList: BannerImg[] = new BannerImgModel().getBannerImgList();
   private bannerDescriptionList: BannerDescription[] = new BannerDescriptionModel().getBannerDescriptionList();
+  private tvBannerImgList: TVBanner[] = [];
+  private tvBannerScaleList: Array<ScaleOptions> = [];
 
   constructor() {
     this.bannerList.push(new Banner(this.bannerImgList[0], this.bannerDescriptionList[3]));
@@ -28,11 +30,34 @@ export class BannerViewModel {
     this.bannerList.push(new Banner(this.bannerImgList[1], this.bannerDescriptionList[0]));
     this.bannerList.push(new Banner(this.bannerImgList[2], this.bannerDescriptionList[1]));
     this.bannerList.push(new Banner(this.bannerImgList[3], this.bannerDescriptionList[2]));
+    this.bannerList.push(new Banner(this.bannerImgList[0], this.bannerDescriptionList[3]));
   }
 
   getBannerList(): Banner[] {
     return this.bannerList;
   }
+
+  getTVBannerList(): TVBanner[] {
+    this.tvBannerImgList.push({imgHorizontal: $r('app.media.ic_banner_6'), imgVertical: $r('app.media.ic_banner_vertical_6'), title: $r('app.string.sutra')})
+    this.tvBannerImgList.push({imgHorizontal: $r('app.media.ic_banner_5'), imgVertical: $r('app.media.ic_banner_vertical_5'), title: $r('app.string.lonely')})
+    this.tvBannerImgList.push({imgHorizontal: $r('app.media.ic_banner_2'), imgVertical: $r('app.media.ic_banner_vertical_2'), title: $r('app.string.source')})
+    this.tvBannerImgList.push({imgHorizontal: $r('app.media.ic_banner_3'), imgVertical: $r('app.media.ic_banner_vertical_3'), title: $r('app.string.science')})
+    this.tvBannerImgList.push({imgHorizontal: $r('app.media.ic_banner_4'), imgVertical: $r('app.media.ic_banner_vertical_4'), title: $r('app.string.lonely')})
+    this.tvBannerImgList.push({imgHorizontal: $r('app.media.ic_banner_6'), imgVertical: $r('app.media.ic_banner_vertical_6'), title: $r('app.string.lonely')})
+    this.tvBannerImgList.push({imgHorizontal: $r('app.media.ic_banner_5'), imgVertical: $r('app.media.ic_banner_vertical_5'), title: $r('app.string.lonely')})
+    this.tvBannerImgList.push({imgHorizontal: $r('app.media.ic_banner_4'), imgVertical: $r('app.media.ic_banner_vertical_2'), title: $r('app.string.lonely')})
+		return this.tvBannerImgList;
+	}
+
+  getTVBannerScaleList(): Array<ScaleOptions> {
+    this.tvBannerScaleList = [HomeConstants.TV_BANNER_IMAGE_SCALE_1, HomeConstants.TV_BANNER_IMAGE_SCALE_2,
+      HomeConstants.TV_BANNER_IMAGE_SCALE_3, HomeConstants.TV_BANNER_IMAGE_SCALE_2,
+      HomeConstants.TV_BANNER_IMAGE_SCALE_1];
+    this.tvBannerScaleList.push(HomeConstants.TV_BANNER_IMAGE_SCALE_1);
+    this.tvBannerScaleList.push(HomeConstants.TV_BANNER_IMAGE_SCALE_1);
+    this.tvBannerScaleList.push(HomeConstants.TV_BANNER_IMAGE_SCALE_1);
+    return this.tvBannerScaleList;
+  }
 }
 
 class BannerImgModel {
@@ -40,17 +65,17 @@ class BannerImgModel {
 
   constructor() {
     this.BannerImgList.push(new BannerImg($r("app.media.ic_banner_1"), $r('app.media.ic_banner_1_sm'),
-      new BreakpointType($r('app.float.banner_height_sm'), $r('app.float.banner_height_md'),
-        $r('app.float.banner_height_lg'))));
+      new BreakpointType($r('app.float.banner_height_sm'), $r('app.float.banner_height_sm'), $r('app.float.banner_height_md'),
+        $r('app.float.banner_height_lg'), $r('app.float.banner_height_lg'))));
     this.BannerImgList.push(new BannerImg($r('app.media.ic_banner_2'), $r('app.media.ic_banner_2_sm'),
-      new BreakpointType($r('app.float.banner_height_sm'), $r('app.float.banner_height_md'),
-        $r('app.float.banner_height_lg'))));
+      new BreakpointType($r('app.float.banner_height_sm'), $r('app.float.banner_height_sm'), $r('app.float.banner_height_md'),
+        $r('app.float.banner_height_lg'), $r('app.float.banner_height_lg'))));
     this.BannerImgList.push(new BannerImg($r('app.media.ic_banner_3'), $r('app.media.ic_banner_3_sm'),
-      new BreakpointType($r('app.float.banner_height_sm'), $r('app.float.banner_height_md'),
-        $r('app.float.banner_height_lg'))));
+      new BreakpointType($r('app.float.banner_height_sm'), $r('app.float.banner_height_sm'), $r('app.float.banner_height_md'),
+        $r('app.float.banner_height_lg'), $r('app.float.banner_height_lg'))));
     this.BannerImgList.push(new BannerImg($r("app.media.ic_banner_4"), $r("app.media.ic_banner_4"),
-      new BreakpointType($r('app.float.banner_height_sm'), $r('app.float.banner_height_md'),
-        $r('app.float.banner_height_lg'))));
+      new BreakpointType($r('app.float.banner_height_sm'), $r('app.float.banner_height_sm'), $r('app.float.banner_height_md'),
+        $r('app.float.banner_height_lg'), $r('app.float.banner_height_lg'))));
   }
 
   getBannerImgList(): BannerImg[] {
@@ -63,48 +88,48 @@ class BannerDescriptionModel {
 
   constructor() {
     this.bannerDescriptionList.push(new BannerDescription(HomeConstants.BANNER_TEXT_1,
-      new BreakpointType([$r('app.float.banner_text_1_font_sm'), $r('app.float.banner_text_2_font_sm')],
+      new BreakpointType([$r('app.float.banner_text_1_font_sm'), $r('app.float.banner_text_2_font_sm')],[$r('app.float.banner_text_1_font_sm'), $r('app.float.banner_text_2_font_sm')],
         [$r('app.float.banner_text_1_font_md'), $r('app.float.banner_text_2_font_md')],
-        [$r('app.float.banner_text_1_font_lg'), $r('app.float.banner_text_2_font_lg')]),
+        [$r('app.float.banner_text_1_font_lg'), $r('app.float.banner_text_2_font_lg')], [$r('app.float.banner_text_1_font_lg'), $r('app.float.banner_text_2_font_lg')]),
       [CommonConstants.FONT_WEIGHT_700, CommonConstants.FONT_WEIGHT_500],
-      new BreakpointType([$r('app.float.banner_text_1_height_sm'), $r('app.float.banner_text_2_height_sm')],
+      new BreakpointType([$r('app.float.banner_text_1_height_sm'), $r('app.float.banner_text_2_height_sm')],[$r('app.float.banner_text_1_height_sm'), $r('app.float.banner_text_2_height_sm')],
         [$r('app.float.banner_text_1_height_md'), $r('app.float.banner_text_2_height_md')],
-        [$r('app.float.banner_text_1_height_lg'), $r('app.float.banner_text_2_height_lg')]),
-      new BreakpointType([], [HomeConstants.BANNER_TEXT_1_LEFT_MD], []), new BreakpointType(
-        HomeConstants.BANNER_TEXT_1_TOP_SM, HomeConstants.BANNER_TEXT_1_TOP_MD, HomeConstants.BANNER_TEXT_1_TOP_LG),
-      new BreakpointType(true, false, true), new BreakpointType(false, false, false)));
+        [$r('app.float.banner_text_1_height_lg'), $r('app.float.banner_text_2_height_lg')],[$r('app.float.banner_text_1_height_lg'), $r('app.float.banner_text_2_height_lg')]),
+      new BreakpointType([], [], [HomeConstants.BANNER_TEXT_1_LEFT_MD], [], []), new BreakpointType(
+        HomeConstants.BANNER_TEXT_1_TOP_SM, HomeConstants.BANNER_TEXT_1_TOP_SM, HomeConstants.BANNER_TEXT_1_TOP_MD, HomeConstants.BANNER_TEXT_1_TOP_LG, HomeConstants.BANNER_TEXT_1_TOP_LG),
+      new BreakpointType(true, true, false, true, true), new BreakpointType(false, false, false, false, false)));
     this.bannerDescriptionList.push(new BannerDescription(HomeConstants.BANNER_TEXT_2,
-      new BreakpointType([$r('app.float.banner_text_1_font_sm'), $r('app.float.banner_text_2_font_sm')],
+      new BreakpointType([$r('app.float.banner_text_1_font_sm'), $r('app.float.banner_text_2_font_sm')],[$r('app.float.banner_text_1_font_sm'), $r('app.float.banner_text_2_font_sm')],
         [$r('app.float.banner_text_1_font_md'), $r('app.float.banner_text_2_font_md')],
-        [$r('app.float.banner_text_1_font_lg'), $r('app.float.banner_text_2_font_lg')]),
+        [$r('app.float.banner_text_1_font_lg'), $r('app.float.banner_text_2_font_lg')], [$r('app.float.banner_text_1_font_lg'), $r('app.float.banner_text_2_font_lg')]),
       [CommonConstants.FONT_WEIGHT_700, CommonConstants.FONT_WEIGHT_500],
-      new BreakpointType([$r('app.float.banner_text_1_height_sm'), $r('app.float.banner_text_2_height_sm')],
+      new BreakpointType([$r('app.float.banner_text_1_height_sm'), $r('app.float.banner_text_2_height_sm')],[$r('app.float.banner_text_1_height_sm'), $r('app.float.banner_text_2_height_sm')],
         [$r('app.float.banner_text_1_height_md'), $r('app.float.banner_text_2_height_md')],
-        [$r('app.float.banner_text_1_height_lg'), $r('app.float.banner_text_2_height_lg')]),
-      new BreakpointType([], [HomeConstants.BANNER_TEXT_2_LEFT_MD], [HomeConstants.BANNER_TEXT_2_LEFT_LG]),
-      new BreakpointType(HomeConstants.BANNER_TEXT_2_TOP_SM, HomeConstants.BANNER_TEXT_2_TOP_MD,
-        HomeConstants.BANNER_TEXT_2_TOP_LG), new BreakpointType(true, false, false),
-      new BreakpointType(false, false, false)));
+        [$r('app.float.banner_text_1_height_lg'), $r('app.float.banner_text_2_height_lg')], [$r('app.float.banner_text_1_height_lg'), $r('app.float.banner_text_2_height_lg')]),
+      new BreakpointType([], [], [HomeConstants.BANNER_TEXT_2_LEFT_MD], [HomeConstants.BANNER_TEXT_2_LEFT_LG], [HomeConstants.BANNER_TEXT_2_LEFT_LG]),
+      new BreakpointType(HomeConstants.BANNER_TEXT_2_TOP_SM, HomeConstants.BANNER_TEXT_2_TOP_SM, HomeConstants.BANNER_TEXT_2_TOP_MD,
+        HomeConstants.BANNER_TEXT_2_TOP_LG, HomeConstants.BANNER_TEXT_2_TOP_LG), new BreakpointType(true, true, false, false, false),
+      new BreakpointType(false, false, false, false, false)));
     this.bannerDescriptionList.push(new BannerDescription(HomeConstants.BANNER_TEXT_3,
-      new BreakpointType([$r('app.float.banner_text_1_font_sm'), $r('app.float.banner_text_2_font_sm')],
+      new BreakpointType([$r('app.float.banner_text_1_font_sm'), $r('app.float.banner_text_2_font_sm')],[$r('app.float.banner_text_1_font_sm'), $r('app.float.banner_text_2_font_sm')],
         [$r('app.float.banner_text_1_font_md'), $r('app.float.banner_text_2_font_md')],
-        [$r('app.float.banner_text_1_font_lg'), $r('app.float.banner_text_2_font_lg')]),
+        [$r('app.float.banner_text_1_font_lg'), $r('app.float.banner_text_2_font_lg')], [$r('app.float.banner_text_1_font_lg'), $r('app.float.banner_text_2_font_lg')]),
       [CommonConstants.FONT_WEIGHT_700, CommonConstants.FONT_WEIGHT_500],
-      new BreakpointType([$r('app.float.banner_text_1_height_sm'), $r('app.float.banner_text_2_height_sm')],
+      new BreakpointType([$r('app.float.banner_text_1_height_sm'), $r('app.float.banner_text_2_height_sm')],[$r('app.float.banner_text_1_height_sm'), $r('app.float.banner_text_2_height_sm')],
         [$r('app.float.banner_text_1_height_md'), $r('app.float.banner_text_2_height_md')],
-        [$r('app.float.banner_text_1_height_lg'), $r('app.float.banner_text_2_height_lg')]),
-      new BreakpointType([], [''], []), new BreakpointType([''], [], []),
-      new BreakpointType(true, true, true), new BreakpointType(true, true, true)));
+        [$r('app.float.banner_text_1_height_lg'), $r('app.float.banner_text_2_height_lg')], [$r('app.float.banner_text_1_height_lg'), $r('app.float.banner_text_2_height_lg')]),
+      new BreakpointType([], [], [''], [], []), new BreakpointType([''], [''], [], [], []),
+      new BreakpointType(true, true, true, true, true), new BreakpointType(true, true, true, true, true)));
     this.bannerDescriptionList.push(new BannerDescription(HomeConstants.BANNER_TEXT_4,
-      new BreakpointType([$r('app.float.banner_text_1_font_sm'), $r('app.float.banner_text_2_font_sm')],
+      new BreakpointType([$r('app.float.banner_text_1_font_sm'), $r('app.float.banner_text_2_font_sm')],[$r('app.float.banner_text_1_font_sm'), $r('app.float.banner_text_2_font_sm')],
         [$r('app.float.banner_text_1_font_md'), $r('app.float.banner_text_2_font_md')],
-        [$r('app.float.banner_text_1_font_lg'), $r('app.float.banner_text_2_font_lg')]),
+        [$r('app.float.banner_text_1_font_lg'), $r('app.float.banner_text_2_font_lg')], [$r('app.float.banner_text_1_font_lg'), $r('app.float.banner_text_2_font_lg')]),
       [CommonConstants.FONT_WEIGHT_700, CommonConstants.FONT_WEIGHT_500],
-      new BreakpointType([$r('app.float.banner_text_1_height_sm'), $r('app.float.banner_text_2_height_sm')],
+      new BreakpointType([$r('app.float.banner_text_1_height_sm'), $r('app.float.banner_text_2_height_sm')],[$r('app.float.banner_text_1_height_sm'), $r('app.float.banner_text_2_height_sm')],
         [$r('app.float.banner_text_1_height_md'), $r('app.float.banner_text_2_height_md')],
-        [$r('app.float.banner_text_1_height_lg'), $r('app.float.banner_text_2_height_lg')]),
-      new BreakpointType([], [''], []), new BreakpointType([''], [], []),
-      new BreakpointType(true, true, true), new BreakpointType(true, true, true)));
+        [$r('app.float.banner_text_1_height_lg'), $r('app.float.banner_text_2_height_lg')], [$r('app.float.banner_text_1_height_lg'), $r('app.float.banner_text_2_height_lg')]),
+      new BreakpointType([], [], [''], [], []), new BreakpointType([''], [''], [], [], []),
+      new BreakpointType(true, true, true, true, true), new BreakpointType(true, true, true, true, true)));
   }
 
   getBannerDescriptionList(): BannerDescription[] {
@@ -258,4 +283,10 @@ class BannerImg {
   getHeight(): BreakpointType<Resource> {
     return this.height;
   }
+}
+
+export interface TVBanner {
+  imgHorizontal: Resource;
+  imgVertical: Resource;
+  title: Resource;
 }
\ No newline at end of file
diff --git a/features/home/src/main/ets/viewmodel/VideoImgViewModel.ets b/features/home/src/main/ets/viewmodel/VideoImgViewModel.ets
index 3ad84f50a49e473eeca57ea9b6c3f5f8ff08c9dd..b21403330e5fcd282d7e33368740efec9e856cc5 100644
--- a/features/home/src/main/ets/viewmodel/VideoImgViewModel.ets
+++ b/features/home/src/main/ets/viewmodel/VideoImgViewModel.ets
@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants } from '@ohos/commons';
 import { HomeConstants } from '../constants/HomeConstants';
 
 export class VideoImgViewModel {
@@ -22,79 +21,103 @@ export class VideoImgViewModel {
   private dailyVideoImgList: VideoImage[] = [];
   private mainDailyVideoImg: VideoImage;
   private previousVideoImgListOne: VideoImage[] = [];
+  private tvPreviousVideoImgListOne: VideoImage[] = [];
   private previousVideoImgListTwo: VideoImage[] = [];
+  private tvPreviousVideoImgListTwo: VideoImage[] = [];
 
   constructor() {
     this.videoImgList.push(new VideoImage($r('app.media.ic_video_grid_1'), HomeConstants.VIDEO_GRID_RATES[0],
-      HomeConstants.VIDEO_GRID_NAMES[0], HomeConstants.VIDEO_GRID_CONTENTS[0], ''));
+      HomeConstants.VIDEO_GRID_NAMES[0], HomeConstants.VIDEO_GRID_CONTENTS[0], '', $r('app.string.exclusive')));
     this.videoImgList.push(new VideoImage($r('app.media.ic_video_grid_2'), HomeConstants.VIDEO_GRID_RATES[1],
-      HomeConstants.VIDEO_GRID_NAMES[1], HomeConstants.VIDEO_GRID_CONTENTS[1], ''));
+      HomeConstants.VIDEO_GRID_NAMES[1], HomeConstants.VIDEO_GRID_CONTENTS[1], '', $r('app.string.Membership')));
     this.videoImgList.push(new VideoImage($r('app.media.ic_video_grid_3'), HomeConstants.VIDEO_GRID_RATES[2],
-      HomeConstants.VIDEO_GRID_NAMES[2], HomeConstants.VIDEO_GRID_CONTENTS[2], ''));
+      HomeConstants.VIDEO_GRID_NAMES[2], HomeConstants.VIDEO_GRID_CONTENTS[2], '', $r('app.string.Membership')));
     this.videoImgList.push(new VideoImage($r('app.media.ic_video_grid_4'), HomeConstants.VIDEO_GRID_RATES[3],
-      HomeConstants.VIDEO_GRID_NAMES[3], HomeConstants.VIDEO_GRID_CONTENTS[3], ''));
+      HomeConstants.VIDEO_GRID_NAMES[3], HomeConstants.VIDEO_GRID_CONTENTS[3], '', $r('app.string.Membership')));
     this.videoImgList.push(new VideoImage($r('app.media.ic_video_grid_5'), HomeConstants.VIDEO_GRID_RATES[4],
-      HomeConstants.VIDEO_GRID_NAMES[4], HomeConstants.VIDEO_GRID_CONTENTS[4], ''));
+      HomeConstants.VIDEO_GRID_NAMES[4], HomeConstants.VIDEO_GRID_CONTENTS[4], '', $r('app.string.Membership')));
     this.videoImgList.push(new VideoImage($r('app.media.ic_video_grid_6'), HomeConstants.VIDEO_GRID_RATES[5],
-      HomeConstants.VIDEO_GRID_NAMES[5], HomeConstants.VIDEO_GRID_CONTENTS[5], ''));
+      HomeConstants.VIDEO_GRID_NAMES[5], HomeConstants.VIDEO_GRID_CONTENTS[5], '', $r('app.string.Membership')));
     this.videoImgList.push(new VideoImage($r('app.media.ic_video_grid_7'), HomeConstants.VIDEO_GRID_RATES[6],
-      HomeConstants.VIDEO_GRID_NAMES[6], HomeConstants.VIDEO_GRID_CONTENTS[6], ''));
+      HomeConstants.VIDEO_GRID_NAMES[6], HomeConstants.VIDEO_GRID_CONTENTS[6], '', $r('app.string.Membership')));
     this.videoImgList.push(new VideoImage($r('app.media.ic_video_grid_8'), HomeConstants.VIDEO_GRID_RATES[7],
-      HomeConstants.VIDEO_GRID_NAMES[7], HomeConstants.VIDEO_GRID_CONTENTS[7], ''));
+      HomeConstants.VIDEO_GRID_NAMES[7], HomeConstants.VIDEO_GRID_CONTENTS[7], '', $r('app.string.Membership')));
     this.videoImgList.push(new VideoImage($r('app.media.ic_video_grid_9'), HomeConstants.VIDEO_GRID_RATES[8],
-      HomeConstants.VIDEO_GRID_NAMES[8], HomeConstants.VIDEO_GRID_CONTENTS[8], ''));
+      HomeConstants.VIDEO_GRID_NAMES[8], HomeConstants.VIDEO_GRID_CONTENTS[8], '', $r('app.string.Membership')));
     this.videoImgList.push(new VideoImage($r('app.media.ic_video_grid_10'), HomeConstants.VIDEO_GRID_RATES[9],
-      HomeConstants.VIDEO_GRID_NAMES[9], HomeConstants.VIDEO_GRID_CONTENTS[9], ''));
+      HomeConstants.VIDEO_GRID_NAMES[9], HomeConstants.VIDEO_GRID_CONTENTS[9], '', $r('app.string.Membership')));
 
     this.newVideoImgList.push(new VideoImage($r('app.media.new_video_1'), HomeConstants.NEW_VIDEO_RATES[0],
-      HomeConstants.NEW_VIDEO_NAMES[0], HomeConstants.NEW_VIDEO_CONTENTS[0], ''));
+      HomeConstants.NEW_VIDEO_NAMES[0], HomeConstants.NEW_VIDEO_CONTENTS[0], '', ''));
     this.newVideoImgList.push(new VideoImage($r('app.media.new_video_2'), HomeConstants.NEW_VIDEO_RATES[1],
-      HomeConstants.NEW_VIDEO_NAMES[1], HomeConstants.NEW_VIDEO_CONTENTS[1], ''));
+      HomeConstants.NEW_VIDEO_NAMES[1], HomeConstants.NEW_VIDEO_CONTENTS[1], '', ''));
     this.newVideoImgList.push(new VideoImage($r('app.media.new_video_3'), HomeConstants.NEW_VIDEO_RATES[2],
-      HomeConstants.NEW_VIDEO_NAMES[2], HomeConstants.NEW_VIDEO_CONTENTS[2], ''));
+      HomeConstants.NEW_VIDEO_NAMES[2], HomeConstants.NEW_VIDEO_CONTENTS[2], '', ''));
     this.newVideoImgList.push(new VideoImage($r('app.media.new_video_4'), HomeConstants.NEW_VIDEO_RATES[3],
-      HomeConstants.NEW_VIDEO_NAMES[3], HomeConstants.NEW_VIDEO_CONTENTS[3], ''));
+      HomeConstants.NEW_VIDEO_NAMES[3], HomeConstants.NEW_VIDEO_CONTENTS[3], '', ''));
     this.newVideoImgList.push(new VideoImage($r('app.media.new_video_5'), HomeConstants.NEW_VIDEO_RATES[4],
-      HomeConstants.NEW_VIDEO_NAMES[4], HomeConstants.NEW_VIDEO_CONTENTS[4], ''));
+      HomeConstants.NEW_VIDEO_NAMES[4], HomeConstants.NEW_VIDEO_CONTENTS[4], '', ''));
     this.newVideoImgList.push(new VideoImage($r('app.media.new_video_6'), HomeConstants.NEW_VIDEO_RATES[5],
-      HomeConstants.NEW_VIDEO_NAMES[5], HomeConstants.NEW_VIDEO_CONTENTS[5], ''));
+      HomeConstants.NEW_VIDEO_NAMES[5], HomeConstants.NEW_VIDEO_CONTENTS[5], '', ''));
     this.newVideoImgList.push(new VideoImage($r('app.media.new_video_7'), HomeConstants.NEW_VIDEO_RATES[6],
-      HomeConstants.NEW_VIDEO_NAMES[6], HomeConstants.NEW_VIDEO_CONTENTS[6], ''));
+      HomeConstants.NEW_VIDEO_NAMES[6], HomeConstants.NEW_VIDEO_CONTENTS[6], '', ''));
 
     this.mainDailyVideoImg = new VideoImage($r('app.media.daily_video'), HomeConstants.MAIN_DAILY_VIDEO_RATE,
-      HomeConstants.MAIN_DAILY_VIDEO_NAME, HomeConstants.MAIN_DAILY_VIDEO_CONTENT, HomeConstants.MAIN_DAILY_VIDEO_MORE);
+      HomeConstants.MAIN_DAILY_VIDEO_NAME, HomeConstants.MAIN_DAILY_VIDEO_CONTENT, HomeConstants.MAIN_DAILY_VIDEO_MORE, $r('app.string.Membership'));
 
     this.dailyVideoImgList.push(new VideoImage($r('app.media.daily_video_1'), HomeConstants.DAILY_VIDEO_RATES[0],
-      HomeConstants.DAILY_VIDEO_NAMES[0], HomeConstants.DAILY_VIDEO_CONTENTS[0], ''));
+      HomeConstants.DAILY_VIDEO_NAMES[0], HomeConstants.DAILY_VIDEO_CONTENTS[0], '', $r('app.string.Membership')));
     this.dailyVideoImgList.push(new VideoImage($r('app.media.daily_video_2'), HomeConstants.DAILY_VIDEO_RATES[1],
-      HomeConstants.DAILY_VIDEO_NAMES[1], HomeConstants.DAILY_VIDEO_CONTENTS[1], ''));
+      HomeConstants.DAILY_VIDEO_NAMES[1], HomeConstants.DAILY_VIDEO_CONTENTS[1], '', $r('app.string.Membership')));
     this.dailyVideoImgList.push(new VideoImage($r('app.media.daily_video_3'), HomeConstants.DAILY_VIDEO_RATES[2],
-      HomeConstants.DAILY_VIDEO_NAMES[2], HomeConstants.DAILY_VIDEO_CONTENTS[2], ''));
+      HomeConstants.DAILY_VIDEO_NAMES[2], HomeConstants.DAILY_VIDEO_CONTENTS[2], '', ''));
     this.dailyVideoImgList.push(new VideoImage($r('app.media.daily_video_4'), HomeConstants.DAILY_VIDEO_RATES[3],
-      HomeConstants.DAILY_VIDEO_NAMES[3], HomeConstants.DAILY_VIDEO_CONTENTS[3], ''));
+      HomeConstants.DAILY_VIDEO_NAMES[3], HomeConstants.DAILY_VIDEO_CONTENTS[3], '', ''));
 
     this.previousVideoImgListOne.push(new VideoImage($r('app.media.previous_video_1'), '',
       HomeConstants.PREVIOUS_VIDEO_NAMES_ONE[0], HomeConstants.PREVIOUS_VIDEO_CONTENTS_ONE[0],
-      HomeConstants.PREVIOUS_VIDEO_MORE_ONE[0]));
+      HomeConstants.PREVIOUS_VIDEO_MORE_ONE[0], ''));
     this.previousVideoImgListOne.push(new VideoImage($r('app.media.previous_video_2'), '',
       HomeConstants.PREVIOUS_VIDEO_NAMES_ONE[1], HomeConstants.PREVIOUS_VIDEO_CONTENTS_ONE[1],
-      HomeConstants.PREVIOUS_VIDEO_MORE_ONE[1]));
+      HomeConstants.PREVIOUS_VIDEO_MORE_ONE[1], ''));
     this.previousVideoImgListOne.push(new VideoImage($r('app.media.previous_video_3'), '',
       HomeConstants.PREVIOUS_VIDEO_NAMES_ONE[2], HomeConstants.PREVIOUS_VIDEO_CONTENTS_ONE[2],
-      HomeConstants.PREVIOUS_VIDEO_MORE_ONE[2]));
+      HomeConstants.PREVIOUS_VIDEO_MORE_ONE[2], ''));
+
+    this.tvPreviousVideoImgListOne.push(new VideoImage($r('app.media.previous_video_1'), '',
+      HomeConstants.DAILY_VIDEO_NAMES[0], HomeConstants.PREVIOUS_VIDEO_CONTENTS_ONE[0],
+      HomeConstants.PREVIOUS_VIDEO_MORE_ONE[0], ''));
+    this.tvPreviousVideoImgListOne.push(new VideoImage($r('app.media.previous_video_2'), '',
+      HomeConstants.DAILY_VIDEO_CONTENTS[1], HomeConstants.PREVIOUS_VIDEO_CONTENTS_ONE[1],
+      HomeConstants.PREVIOUS_VIDEO_MORE_ONE[1], ''));
+    this.tvPreviousVideoImgListOne.push(new VideoImage($r('app.media.previous_video_3'), '',
+      HomeConstants.PREVIOUS_VIDEO_NAMES_ONE[2], HomeConstants.PREVIOUS_VIDEO_CONTENTS_ONE[2],
+      HomeConstants.PREVIOUS_VIDEO_MORE_ONE[2], ''));
+    this.tvPreviousVideoImgListOne.push(new VideoImage($r('app.media.previous_video_6'), '',
+      HomeConstants.PREVIOUS_VIDEO_NAMES_ONE[2], HomeConstants.PREVIOUS_VIDEO_CONTENTS_ONE[2],
+      HomeConstants.PREVIOUS_VIDEO_MORE_ONE[2], ''));
 
     this.previousVideoImgListTwo.push(new VideoImage($r('app.media.previous_video_4'), '',
-      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[0], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[0], ''));
+      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[0], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[0], '', ''));
     this.previousVideoImgListTwo.push(new VideoImage($r('app.media.previous_video_5'), '',
-      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[1], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[1], ''));
+      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[1], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[1], '', ''));
     this.previousVideoImgListTwo.push(new VideoImage($r('app.media.previous_video_6'), '',
-      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[2], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[2], ''));
+      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[2], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[2], '', ''));
     this.previousVideoImgListTwo.push(new VideoImage($r('app.media.previous_video_7'), '',
-      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[3], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[3], ''));
+      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[3], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[3], '', ''));
     this.previousVideoImgListTwo.push(new VideoImage($r('app.media.previous_video_8'), '',
-      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[4], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[4], ''));
+      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[4], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[4], '', ''));
     this.previousVideoImgListTwo.push(new VideoImage($r('app.media.previous_video_9'), '',
-      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[5], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[5], ''));
+      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[5], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[5], '', ''));
+
+    this.tvPreviousVideoImgListTwo.push(new VideoImage($r('app.media.previous_video_7'), '',
+      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[0], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[0], '', ''));
+    this.tvPreviousVideoImgListTwo.push(new VideoImage($r('app.media.previous_video_10'), '',
+      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[1], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[1], '', ''));
+    this.tvPreviousVideoImgListTwo.push(new VideoImage($r('app.media.previous_video_11'), '',
+      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[2], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[2], '', ''));
+    this.tvPreviousVideoImgListTwo.push(new VideoImage($r('app.media.previous_video_12'), '',
+      HomeConstants.PREVIOUS_VIDEO_NAMES_TWO[3], HomeConstants.PREVIOUS_VIDEO_CONTENTS_TWO[3], '', ''));
   }
 
   getVideoImgList(): VideoImage[] {
@@ -117,10 +140,18 @@ export class VideoImgViewModel {
     return this.previousVideoImgListOne;
   }
 
-  getPreviousVideoTwo(currentWidthBreakpoint: string): VideoImage[] {
-    if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) {
+  getTVPreviousVideoOne(): VideoImage[] {
+    return this.tvPreviousVideoImgListOne;
+  }
+
+  getTVPreviousVideoImgListTwo() : VideoImage[] {
+    return this.tvPreviousVideoImgListTwo;
+  }
+
+  getPreviousVideoTwo(currentWidthBreakpoint: number): VideoImage[] {
+    if (currentWidthBreakpoint === WidthBreakpoint.WIDTH_MD) {
       return this.previousVideoImgListTwo;
-    } else if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
+    } else if (currentWidthBreakpoint === WidthBreakpoint.WIDTH_LG) {
       return this.previousVideoImgListTwo.slice(1, 6);
     } else {
       return this.previousVideoImgListTwo.slice(0, 4);
@@ -154,12 +185,18 @@ export class VideoImage {
    */
   private otherInfo: ResourceStr;
 
-  constructor(imgSrc: Resource, rating: string, title: ResourceStr, content: ResourceStr, otherInfo: ResourceStr) {
+  /**
+   * Membership of the video.
+   */
+  private memberShipTag: Resource | ResourceStr;
+
+  constructor(imgSrc: Resource, rating: string, title: ResourceStr, content: ResourceStr, otherInfo: ResourceStr, memberShipTag: Resource | ResourceStr) {
     this.imgSrc = imgSrc;
     this.rating = rating;
     this.title = title;
     this.content = content;
     this.otherInfo = otherInfo;
+    this.memberShipTag = memberShipTag;
   }
 
   getImgSrc(): Resource {
@@ -181,4 +218,8 @@ export class VideoImage {
   getOtherInfo(): ResourceStr {
     return this.otherInfo;
   }
+
+  getMemberShipTag(): Resource | ResourceStr {
+    return this.memberShipTag;
+  }
 }
\ No newline at end of file
diff --git a/features/home/src/main/resources/base/element/float.json b/features/home/src/main/resources/base/element/float.json
index f7cfb5c8a0746960b629f48a92ac83e84e8558b8..66f9d6b1d0f8bce205bd52f8c84e7c59dffa2619 100644
--- a/features/home/src/main/resources/base/element/float.json
+++ b/features/home/src/main/resources/base/element/float.json
@@ -92,6 +92,10 @@
       "name": "home_content_padding_lg",
       "value": "36vp"
     },
+    {
+      "name": "home_content_padding_xl",
+      "value": "42vp"
+    },
     {
       "name": "home_recommended_padding_sm",
       "value": "112vp"
@@ -200,6 +204,10 @@
       "name": "new_video_height_lg",
       "value": "211vp"
     },
+    {
+      "name": "new_video_height_xl",
+      "value": "240vp"
+    },
     {
       "name": "new_video_columns_gap",
       "value": "12vp"
@@ -428,6 +436,10 @@
       "name": "previous_one_title_font_lg",
       "value": "18fp"
     },
+    {
+      "name": "previous_one_title_font_xl",
+      "value": "20fp"
+    },
     {
       "name": "previous_one_content_font_sm",
       "value": "10fp"
@@ -440,6 +452,10 @@
       "name": "previous_one_content_font_lg",
       "value": "14fp"
     },
+    {
+      "name": "previous_one_content_font_xl",
+      "value": "16fp"
+    },
     {
       "name": "previous_one_content_margin",
       "value": "4vp"
diff --git a/features/home/src/main/resources/base/element/string.json b/features/home/src/main/resources/base/element/string.json
index 2f8ec58923ee80084ff9540cd56f612975f42ed5..85fef39f078cf969e4d6d5526371b98f0b71ffdf 100644
--- a/features/home/src/main/resources/base/element/string.json
+++ b/features/home/src/main/resources/base/element/string.json
@@ -175,6 +175,22 @@
     {
       "name": "like",
       "value": "点赞"
+    },
+    {
+      "name": "videoApplication",
+      "value": "视频应用"
+    },
+    {
+      "name": "DailyVideo",
+      "value": "每日佳片"
+    },
+    {
+      "name": "Membership",
+      "value": "SVIP"
+    },
+    {
+      "name": "exclusive",
+      "value": "独播"
     }
   ]
 }
\ No newline at end of file
diff --git a/features/home/src/main/resources/base/media/ic_banner_5.png b/features/home/src/main/resources/base/media/ic_banner_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..a4f8a55f8a0586187941ecb3dd77be7187348bcd
Binary files /dev/null and b/features/home/src/main/resources/base/media/ic_banner_5.png differ
diff --git a/features/home/src/main/resources/base/media/ic_banner_6.png b/features/home/src/main/resources/base/media/ic_banner_6.png
new file mode 100644
index 0000000000000000000000000000000000000000..119e4db96af1556f916d5f98a2365d17ba178343
Binary files /dev/null and b/features/home/src/main/resources/base/media/ic_banner_6.png differ
diff --git a/features/home/src/main/resources/base/media/ic_banner_vertical_1.png b/features/home/src/main/resources/base/media/ic_banner_vertical_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a86d97093703699b6330bc3dbe0db5d88a383fa
Binary files /dev/null and b/features/home/src/main/resources/base/media/ic_banner_vertical_1.png differ
diff --git a/features/home/src/main/resources/base/media/ic_banner_vertical_2.png b/features/home/src/main/resources/base/media/ic_banner_vertical_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..b8f11b11d981c92004a68ab6b6061bfd6a0ad4d4
Binary files /dev/null and b/features/home/src/main/resources/base/media/ic_banner_vertical_2.png differ
diff --git a/features/home/src/main/resources/base/media/ic_banner_vertical_3.png b/features/home/src/main/resources/base/media/ic_banner_vertical_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb988648cd212e3fa08a5ab650e9dfb84789bbf7
Binary files /dev/null and b/features/home/src/main/resources/base/media/ic_banner_vertical_3.png differ
diff --git a/features/home/src/main/resources/base/media/ic_banner_vertical_4.png b/features/home/src/main/resources/base/media/ic_banner_vertical_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..e9d02779cdfb1c01ee2f2ff0ba06bb11e0a10f0b
Binary files /dev/null and b/features/home/src/main/resources/base/media/ic_banner_vertical_4.png differ
diff --git a/features/home/src/main/resources/base/media/ic_banner_vertical_5.png b/features/home/src/main/resources/base/media/ic_banner_vertical_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a5d237da1003c6fee9512510962fddf63c628dc
Binary files /dev/null and b/features/home/src/main/resources/base/media/ic_banner_vertical_5.png differ
diff --git a/features/home/src/main/resources/base/media/ic_banner_vertical_6.png b/features/home/src/main/resources/base/media/ic_banner_vertical_6.png
new file mode 100644
index 0000000000000000000000000000000000000000..980b9fcc5440dd6ee611f7b7ac533af5d2074cb2
Binary files /dev/null and b/features/home/src/main/resources/base/media/ic_banner_vertical_6.png differ
diff --git a/features/home/src/main/resources/base/media/newMarkGray.svg b/features/home/src/main/resources/base/media/newMarkGray.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8661c187a6c07df2cad422e165e42e3840083c1c
--- /dev/null
+++ b/features/home/src/main/resources/base/media/newMarkGray.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 51 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="51.000000" height="22.000000" fill="none" customFrame="#000000">
+	<path id="矩形" d="M39 0C45.6274 0 51 5.37258 51 12L51 18C51 20.2091 49.2091 22 47 22L12 22C5.37258 22 0 16.6274 0 10L0 4C0 1.79086 1.79086 0 4 0L39 0Z" fill="rgb(255,254.745,254.745)" fill-opacity="0.300000012" fill-rule="evenodd" />
+	<path id="矩形" d="M39 0C45.6274 0 51 5.37258 51 12L51 18C51 20.2091 49.2091 22 47 22L12 22C5.37258 22 0 16.6274 0 10L0 4C0 1.79086 1.79086 0 4 0L39 0Z" fill="rgb(0,0,0)" fill-opacity="0.300000012" fill-rule="evenodd" />
+</svg>
diff --git a/features/home/src/main/resources/base/media/previous_video_10.jpg b/features/home/src/main/resources/base/media/previous_video_10.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..362ea63cf563802f588710e766b7fbb208e0273a
Binary files /dev/null and b/features/home/src/main/resources/base/media/previous_video_10.jpg differ
diff --git a/features/home/src/main/resources/base/media/previous_video_11.jpg b/features/home/src/main/resources/base/media/previous_video_11.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4ac4029b3a0342c0e22769ff56e9b3013a1f3a02
Binary files /dev/null and b/features/home/src/main/resources/base/media/previous_video_11.jpg differ
diff --git a/features/home/src/main/resources/base/media/previous_video_12.jpg b/features/home/src/main/resources/base/media/previous_video_12.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..afaa58e2b3c1a7cab1732f2d8e7d4257a79c2fe2
Binary files /dev/null and b/features/home/src/main/resources/base/media/previous_video_12.jpg differ
diff --git a/features/home/src/main/resources/en_US/element/string.json b/features/home/src/main/resources/en_US/element/string.json
index 7b83743c4aa55169a262e045850cb0e0579a2ec9..55008a1bf9ab473ab0ca63b1bd3fbb912976453d 100644
--- a/features/home/src/main/resources/en_US/element/string.json
+++ b/features/home/src/main/resources/en_US/element/string.json
@@ -175,6 +175,22 @@
     {
       "name": "like",
       "value": "Like"
+    },
+    {
+      "name": "videoApplication",
+      "value": "Video Application"
+    },
+    {
+      "name": "DailyVideo",
+      "value": "Daily Video"
+    },
+    {
+      "name": "Membership",
+      "value": "SVIP"
+    },
+    {
+      "name": "exclusive",
+      "value": "exclusive"
     }
   ]
 }
\ No newline at end of file
diff --git a/features/home/src/main/resources/zh_CN/element/string.json b/features/home/src/main/resources/zh_CN/element/string.json
index 331169b0e5528adbc0c9f26818fd61488dccd917..8e6160b6dcf1da6410a594d5210020f193ed6ee5 100644
--- a/features/home/src/main/resources/zh_CN/element/string.json
+++ b/features/home/src/main/resources/zh_CN/element/string.json
@@ -174,6 +174,22 @@
     {
       "name": "like",
       "value": "点赞"
+    },
+    {
+      "name": "videoApplication",
+      "value": "视频应用"
+    },
+    {
+      "name": "DailyVideo",
+      "value": "每日佳片"
+    },
+    {
+      "name": "Membership",
+      "value": "SVIP"
+    },
+    {
+      "name": "exclusive",
+      "value": "独播"
     }
   ]
 }
\ No newline at end of file
diff --git a/features/videoDetail/src/main/ets/view/VideoDetail.ets b/features/videoDetail/src/main/ets/view/VideoDetail.ets
index d336dcb793486d33287e641a2fa7c359f96e8aa5..09adcc1c2c77b93dbc97c3ded7ffe010068a4e06 100644
--- a/features/videoDetail/src/main/ets/view/VideoDetail.ets
+++ b/features/videoDetail/src/main/ets/view/VideoDetail.ets
@@ -147,6 +147,14 @@ export struct VideoDetail {
     this.isFullScreen = false;
     this.avPlayerUtil?.offTimeUpdate();
     this.avPlayerUtil?.release();
+    if (this.windowUtil!.mainWindowInfo.widthBp !== WidthBreakpoint.WIDTH_XL) {
+      try {
+        this.windowUtil!.mainWindow.setWindowDecorVisible(true);
+      } catch (error) {
+        let err = error as BusinessError;
+        hilog.error(0x0000, 'videoDetail', `Failed to set WindowDecorVisible, errCode = ${err.code}, errMessage = ${err.message}.`);
+      }
+    }
 
     if (this.mainWindowInfo.heightBp !== HeightBreakpoint.HEIGHT_LG && (this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_LG  || this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_XL)) {
       this.windowUtil!.setWindowOrientation(window.Orientation.LANDSCAPE);
diff --git a/products/phone/src/main/module.json5 b/products/phone/src/main/module.json5
index 761638d999d537f3bcf9267851cee8568ae86eab..dd2b2d81752c091a6d00c915a31caa6636b368d4 100644
--- a/products/phone/src/main/module.json5
+++ b/products/phone/src/main/module.json5
@@ -7,7 +7,8 @@
     "deviceTypes": [
       "phone",
       "tablet",
-      "2in1"
+      "2in1",
+      "tv"
     ],
     "deliveryWithInstall": true,
     "installationFree": false,