diff --git a/README.en.md b/README.en.md
new file mode 100644
index 0000000000000000000000000000000000000000..8bf98c1fdf42abb4d4e008b1a493e78f11fafdcd
--- /dev/null
+++ b/README.en.md
@@ -0,0 +1,29 @@
+# Cascading List
+
+### Introduction
+
+This codelab introduces how to implement cascading between navigation and content based on the **List** component. Example:
+
+![](screenshots/device/TwoLevelLink.en.gif)
+
+### Concepts
+
+- List: a component that provides a series of list items with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text.
+
+- ListItemGroup: a component that is used to display a group of list items. This component must be used in conjunction with the **List** component, and they have the same width by default.
+
+### Permissions
+
+N/A
+
+### How to Use
+
+1. Open the app and scroll the navigation bar on the left to find the desired content on the right.
+2. Open the app and scroll the content on the right to switch to the corresponding navigation item on the left.
+
+### Constraints
+
+1. The sample is only supported on Huawei phones with standard systems.
+2. HarmonyOS: HarmonyOS 5.0.0 Release or later.
+3. DevEco Studio: DevEco Studio 5.0.0 Release or later.
+4. HarmonyOS SDK: HarmonyOS NEXT 5.0.0 Release SDK or later.
diff --git a/README.md b/README.md
index 5112f12246e8bf08f95904a2e79a5896bcc1be80..c63f815e0d1ba928bb2d252e150c9111139f25a0 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
-# 二级联动
+# 基于List组件实现二级联动效果
 
 ### 简介
 
-本篇Codelab是基于ArkTS的声明式开发范式的样例，主要介绍了如何基于List组件实现一个导航和内容的二级联动效果。效果图如下：
+本篇Codelab是基于ArkTS的声明式开发范式的样例，主要介绍了如何基于List组件实现一个导航和内容的二级联动效果，帮助开发者在基础场景开发中，实现List组件的使用。效果图如下：
 
 ![](screenshots/device/TwoLevelLink.gif)
 
@@ -24,6 +24,6 @@
 ### 约束与限制
 
 1. 本示例仅支持标准系统上运行，支持设备：华为手机。
-2. HarmonyOS系统：HarmonyOS NEXT Developer Beta1及以上。
-3. DevEco Studio版本：DevEco Studio NEXT Developer Beta1及以上。
-4. HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta1 SDK及以上。
+2. HarmonyOS系统：HarmonyOS 5.0.0 Release及以上。
+3. DevEco Studio版本：DevEco Studio 5.0.0 Release及以上。
+4. HarmonyOS SDK版本：HarmonyOS NEXT 5.0.0 Release SDK及以上。
diff --git a/entry/src/main/ets/pages/IndexPage.ets b/entry/src/main/ets/pages/IndexPage.ets
index cb85eace7c90e9547ca9a8df087d410067d69e8c..252c8ae99efa403188fe02f14120589e9d10fafa 100644
--- a/entry/src/main/ets/pages/IndexPage.ets
+++ b/entry/src/main/ets/pages/IndexPage.ets
@@ -37,7 +37,7 @@ struct IndexPage {
     }, Constants.LOADING_DURATION);
   }
 
-  @Builder ClassifyHeader(classifyName: string) {
+  @Builder ClassifyHeader(classifyName: ResourceStr) {
     Row() {
       Text(classifyName)
         .fontSize($r('app.float.header_font_size'))
@@ -81,7 +81,7 @@ struct IndexPage {
                 }
               })
             }
-          }, (item: ClassifyModel) => item.classifyName + this.currentClassify)
+          }, (item: ClassifyModel) => item.classifyName.toString() + this.currentClassify)
         }
         .height(Constants.FULL_PERCENT)
         .width($r('app.float.classify_item_width'))
diff --git a/entry/src/main/ets/view/ClassityItem.ets b/entry/src/main/ets/view/ClassityItem.ets
index ffaf2c2587bf2b047f18e342d01101cc3b65358e..ac25d9112e5dd04a3171ba399d80e250b8276814 100644
--- a/entry/src/main/ets/view/ClassityItem.ets
+++ b/entry/src/main/ets/view/ClassityItem.ets
@@ -17,7 +17,7 @@ import Constants from '../common/constants/Constants';
 
 @Component
 export default struct ClassifyItem {
-  classifyName?: string;
+  classifyName?: ResourceStr;
   @Prop isSelected: boolean = false;
   onClickAction = (): void => {}
 
diff --git a/entry/src/main/ets/viewmodel/ClassifyModel.ets b/entry/src/main/ets/viewmodel/ClassifyModel.ets
index 22c7d0e31eae9ab26dd26898501a80d42a8e4851..4067d7868fa4dc9bd7c967e22143e307ed320f3e 100644
--- a/entry/src/main/ets/viewmodel/ClassifyModel.ets
+++ b/entry/src/main/ets/viewmodel/ClassifyModel.ets
@@ -26,13 +26,13 @@ export default class ClassifyModel {
   /**
    * classify name
    */
-  classifyName: string;
+  classifyName: ResourceStr;
   /**
    * course list of the classify.
    */
   courseList: Array<CourseModel>;
 
-  constructor(classifyId: number, classifyName: string, courseList: Array<CourseModel>) {
+  constructor(classifyId: number, classifyName: ResourceStr, courseList: Array<CourseModel>) {
     this.classifyId = classifyId;
     this.classifyName = classifyName;
     this.courseList = courseList;
diff --git a/entry/src/main/ets/viewmodel/ClassifyViewModel.ets b/entry/src/main/ets/viewmodel/ClassifyViewModel.ets
index 83a14962aee054855bee92670dbfb709fb51e391..0330f31cf717b53c98602cd27ce5ed8919ab32fe 100644
--- a/entry/src/main/ets/viewmodel/ClassifyViewModel.ets
+++ b/entry/src/main/ets/viewmodel/ClassifyViewModel.ets
@@ -46,59 +46,108 @@ let classifyViewModel = new ClassifyViewModel();
 export default classifyViewModel as ClassifyViewModel;
 
 const LINK_DATA: LinkDataModel[] = [
-  new LinkDataModel(1, '热门课程', 1, '应用市场介绍', $r('app.media.ic_img_1'), 0),
-  new LinkDataModel(1, '热门课程', 2, '上架流程', $r('app.media.ic_img_2'), 100),
-  new LinkDataModel(1, '热门课程', 3, '应用出海', $r('app.media.ic_img_3'), 50),
-  new LinkDataModel(1, '热门课程', 4, '审核政策', $r('app.media.ic_img_4'), 222),
-  new LinkDataModel(1, '热门课程', 5, 'CaaS Kit - HMS Core精品实战课', $r('app.media.ic_img_5'), 256),
-  new LinkDataModel(1, '热门课程', 6, '机器学习在图像分割场景中的应用', $r('app.media.ic_img_6'), 0),
-  new LinkDataModel(1, '热门课程', 7, '一分钟了解华为应用内支付服务', $r('app.media.ic_img_7'), 0),
-  new LinkDataModel(1, '热门课程', 8, '一分钟了解华为位置服务', $r('app.media.ic_img_8'), 400),
-  new LinkDataModel(2, '最新课程', 9, 'Excel函数在商业中的应用', $r('app.media.ic_img_9'), 65),
-  new LinkDataModel(2, '最新课程', 10, '“震动”手机锁屏制作', $r('app.media.ic_img_10'), 0),
-  new LinkDataModel(2, '最新课程', 11, '“流体动效”手机锁屏制作', $r('app.media.ic_img_11'), 50),
-  new LinkDataModel(2, '最新课程', 12, 'HUAWEI GT自定义表盘制作', $r('app.media.ic_img_12'), 70),
-  new LinkDataModel(2, '最新课程', 13, '商务表盘制作', $r('app.media.ic_img_13'), 0),
-  new LinkDataModel(2, '最新课程', 14, '5分钟了解跨应用、跨形态无缝登录', $r('app.media.ic_img_14'), 80),
-  new LinkDataModel(2, '最新课程', 15, 'oCPC进阶功能及最新政策解读', $r('app.media.ic_img_15'), 120),
-  new LinkDataModel(2, '最新课程', 16, 'HUAWEI Ads 游戏行业投放指南', $r('app.media.ic_img_16'), 160),
-  new LinkDataModel(3, 'HarmonyOS', 17, 'HarmonyOS物联网开发课程', $r('app.media.ic_img_17'), 0),
-  new LinkDataModel(3, 'HarmonyOS', 18, '【Hello系列直播课】第1期：手把手教你搭建开发环境', $r('app.media.ic_img_18'), 0),
-  new LinkDataModel(3, 'HarmonyOS', 19, 'HarmonyOS技术训练营-10分钟快速体验HarmonyOS分布式应用', $r('app.media.ic_img_9'), 0),
-  new LinkDataModel(3, 'HarmonyOS', 20, '应用开发基础：JS FA开发基础（第一期）', $r('app.media.ic_img_10'), 0),
-  new LinkDataModel(3, 'HarmonyOS', 21, 'HarmonyOS Connect设备开发基础：OpenHarmony基础', $r('app.media.ic_img_1'), 60),
-  new LinkDataModel(3, 'HarmonyOS', 22, '组件开发和集成：SDK集成指南（第五期）', $r('app.media.ic_img_2'), 120),
-  new LinkDataModel(4, '精彩活动', 23, 'HUAWEI Developer Day•2018北京精彩回顾', $r('app.media.ic_img_3'), 0),
-  new LinkDataModel(4, '精彩活动', 24, '华为AR帮你轻松打造酷炫应用', $r('app.media.ic_img_4'), 99),
-  new LinkDataModel(4, '精彩活动', 25, 'AR VR应用创新大赛获奖作品', $r('app.media.ic_img_5'), 30),
-  new LinkDataModel(4, '精彩活动', 26, '华为HiLink智能家居生态介绍', $r('app.media.ic_img_6'), 80),
-  new LinkDataModel(4, '精彩活动', 27, '华为校园千帆行丨武汉站', $r('app.media.ic_img_7'), 160),
-  new LinkDataModel(4, '精彩活动', 28, 'HUAWEI Developer Day•杭州站精彩回顾', $r('app.media.ic_img_8'), 0),
-  new LinkDataModel(5, '开发者说', 29, '优秀实践分享 - 掌阅科技', $r('app.media.ic_img_9'), 0),
-  new LinkDataModel(5, '开发者说', 30, '极限试驾', $r('app.media.ic_img_10'), 130),
-  new LinkDataModel(5, '开发者说', 31, 'AR狙击手', $r('app.media.ic_img_11'), 100),
-  new LinkDataModel(5, '开发者说', 32, '宇宙解码', $r('app.media.ic_img_12'), 100),
-  new LinkDataModel(5, '开发者说', 33, 'Wars of Stone', $r('app.media.ic_img_13'), 1200),
-  new LinkDataModel(5, '开发者说', 34, 'ROCK ME', $r('app.media.ic_img_14'), 156),
-  new LinkDataModel(5, '开发者说', 35, '神奇AR智能宝宝', $r('app.media.ic_img_15'), 130),
-  new LinkDataModel(6, '后端开发', 36, '从零开始学架构', $r('app.media.ic_img_16'), 120),
-  new LinkDataModel(6, '后端开发', 37, '架构设计之异步化技术', $r('app.media.ic_img_17'), 0),
-  new LinkDataModel(6, '后端开发', 38, '架构设计之页面静态化技术', $r('app.media.ic_img_18'), 0),
-  new LinkDataModel(6, '后端开发', 39, 'Python极简入门', $r('app.media.ic_img_9'), 0),
-  new LinkDataModel(6, '后端开发', 40, 'Python实践指南', $r('app.media.ic_img_10'), 2001),
-  new LinkDataModel(6, '后端开发', 41, 'Java高级特性', $r('app.media.ic_img_1'), 30),
-  new LinkDataModel(6, '后端开发', 42, 'C++核心编程', $r('app.media.ic_img_2'), 50),
-  new LinkDataModel(7, '移动开发', 43, 'EMUI 9.1主题转10.0主题适配指导', $r('app.media.ic_img_3'), 0),
-  new LinkDataModel(7, '移动开发', 44, '“流体动效”手机锁屏制作', $r('app.media.ic_img_4'), 0),
-  new LinkDataModel(7, '移动开发', 45, '“震动”手机锁屏制作', $r('app.media.ic_img_5'), 0),
-  new LinkDataModel(8, '前端开发', 46, 'DevOps新技术入门', $r('app.media.ic_img_6'), 50),
-  new LinkDataModel(8, '前端开发', 47, 'Vue.js 框架开发系列课程', $r('app.media.ic_img_16'), 60),
-  new LinkDataModel(8, '前端开发', 48, 'jQuery实例精讲', $r('app.media.ic_img_8'), 80),
-  new LinkDataModel(8, '前端开发', 49, 'JavaScript 编程技巧与实战', $r('app.media.ic_img_9'), 300),
-  new LinkDataModel(8, '前端开发', 50, '基于 Bootstrap 框架开发技巧实战', $r('app.media.ic_img_10'), 150),
-  new LinkDataModel(8, '前端开发', 51, 'Java Web开发课程', $r('app.media.ic_img_11'), 200),
-  new LinkDataModel(8, '前端开发', 52, 'JavaScript 设计模式', $r('app.media.ic_img_12'), 0),
-  new LinkDataModel(8, '前端开发', 53, 'HTML入门基础系列课程', $r('app.media.ic_img_13'), 0),
-  new LinkDataModel(8, '前端开发', 54, '前端系列第7期-微前端–架构介绍篇', $r('app.media.ic_img_14'), 0),
-  new LinkDataModel(8, '前端开发', 55, 'Web安全系列课程', $r('app.media.ic_img_15'), 0)
+  new LinkDataModel(1, $r('app.string.popular_courses'), 1, $r('app.string.popular_courses_text1'),
+    $r('app.media.ic_img_1'), 0),
+  new LinkDataModel(1, $r('app.string.popular_courses'), 2, $r('app.string.popular_courses_text2'),
+    $r('app.media.ic_img_2'), 100),
+  new LinkDataModel(1, $r('app.string.popular_courses'), 3, $r('app.string.popular_courses_text3'),
+    $r('app.media.ic_img_3'), 50),
+  new LinkDataModel(1, $r('app.string.popular_courses'), 4, $r('app.string.popular_courses_text4'),
+    $r('app.media.ic_img_4'), 222),
+  new LinkDataModel(1, $r('app.string.popular_courses'), 5, $r('app.string.popular_courses_text5'),
+    $r('app.media.ic_img_5'), 256),
+  new LinkDataModel(1, $r('app.string.popular_courses'), 6, $r('app.string.popular_courses_text6'),
+    $r('app.media.ic_img_6'), 0),
+  new LinkDataModel(1, $r('app.string.popular_courses'), 7, $r('app.string.popular_courses_text7'),
+    $r('app.media.ic_img_7'), 0),
+  new LinkDataModel(1, $r('app.string.popular_courses'), 8, $r('app.string.popular_courses_text8'),
+    $r('app.media.ic_img_8'), 400),
+  new LinkDataModel(2, $r('app.string.latest_courses'), 9, $r('app.string.popular_courses_text1'),
+    $r('app.media.ic_img_9'), 65),
+  new LinkDataModel(2, $r('app.string.latest_courses'), 10, $r('app.string.popular_courses_text2'),
+    $r('app.media.ic_img_10'), 0),
+  new LinkDataModel(2, $r('app.string.latest_courses'), 11, $r('app.string.popular_courses_text3'),
+    $r('app.media.ic_img_11'), 50),
+  new LinkDataModel(2, $r('app.string.latest_courses'), 12, $r('app.string.popular_courses_text4'),
+    $r('app.media.ic_img_12'), 70),
+  new LinkDataModel(2, $r('app.string.latest_courses'), 13, $r('app.string.popular_courses_text5'),
+    $r('app.media.ic_img_13'), 0),
+  new LinkDataModel(2, $r('app.string.latest_courses'), 14, $r('app.string.popular_courses_text6'),
+    $r('app.media.ic_img_14'), 80),
+  new LinkDataModel(2, $r('app.string.latest_courses'), 15, $r('app.string.popular_courses_text7'),
+    $r('app.media.ic_img_15'), 120),
+  new LinkDataModel(2, $r('app.string.latest_courses'), 16, $r('app.string.popular_courses_text8'),
+    $r('app.media.ic_img_16'), 160),
+  new LinkDataModel(3, 'HarmonyOS', 17, $r('app.string.popular_courses_text1'), $r('app.media.ic_img_17'), 0),
+  new LinkDataModel(3, 'HarmonyOS', 18, $r('app.string.popular_courses_text2'), $r('app.media.ic_img_18'), 0),
+  new LinkDataModel(3, 'HarmonyOS', 19, $r('app.string.popular_courses_text3'), $r('app.media.ic_img_9'), 0),
+  new LinkDataModel(3, 'HarmonyOS', 20, $r('app.string.popular_courses_text4'), $r('app.media.ic_img_10'), 0),
+  new LinkDataModel(3, 'HarmonyOS', 21, $r('app.string.popular_courses_text5'), $r('app.media.ic_img_1'), 60),
+  new LinkDataModel(3, 'HarmonyOS', 22, $r('app.string.popular_courses_text6'), $r('app.media.ic_img_2'), 120),
+  new LinkDataModel(4, $r('app.string.exciting_activities'), 23, $r('app.string.popular_courses_text1'),
+    $r('app.media.ic_img_3'), 0),
+  new LinkDataModel(4, $r('app.string.exciting_activities'), 24, $r('app.string.popular_courses_text2'),
+    $r('app.media.ic_img_4'), 99),
+  new LinkDataModel(4, $r('app.string.exciting_activities'), 25, $r('app.string.popular_courses_text3'),
+    $r('app.media.ic_img_5'), 30),
+  new LinkDataModel(4, $r('app.string.exciting_activities'), 26, $r('app.string.popular_courses_text4'),
+    $r('app.media.ic_img_6'), 80),
+  new LinkDataModel(4, $r('app.string.exciting_activities'), 27, $r('app.string.popular_courses_text5'),
+    $r('app.media.ic_img_7'), 160),
+  new LinkDataModel(4, $r('app.string.exciting_activities'), 28, $r('app.string.popular_courses_text6'),
+    $r('app.media.ic_img_8'), 0),
+  new LinkDataModel(5, $r('app.string.developer_said'), 29, $r('app.string.popular_courses_text1'),
+    $r('app.media.ic_img_9'), 0),
+  new LinkDataModel(5, $r('app.string.developer_said'), 30, $r('app.string.popular_courses_text2'),
+    $r('app.media.ic_img_10'), 130),
+  new LinkDataModel(5, $r('app.string.developer_said'), 31, $r('app.string.popular_courses_text3'),
+    $r('app.media.ic_img_11'), 100),
+  new LinkDataModel(5, $r('app.string.developer_said'), 32, $r('app.string.popular_courses_text4'),
+    $r('app.media.ic_img_12'), 100),
+  new LinkDataModel(5, $r('app.string.developer_said'), 33, $r('app.string.popular_courses_text5'),
+    $r('app.media.ic_img_13'), 1200),
+  new LinkDataModel(5, $r('app.string.developer_said'), 34, $r('app.string.popular_courses_text6'),
+    $r('app.media.ic_img_14'), 156),
+  new LinkDataModel(5, $r('app.string.developer_said'), 35, $r('app.string.popular_courses_text7'),
+    $r('app.media.ic_img_15'), 130),
+  new LinkDataModel(6, $r('app.string.backend_development'), 36, $r('app.string.popular_courses_text1'),
+    $r('app.media.ic_img_16'), 120),
+  new LinkDataModel(6, $r('app.string.backend_development'), 37, $r('app.string.popular_courses_text2'),
+    $r('app.media.ic_img_17'), 0),
+  new LinkDataModel(6, $r('app.string.backend_development'), 38, $r('app.string.popular_courses_text3'),
+    $r('app.media.ic_img_18'), 0),
+  new LinkDataModel(6, $r('app.string.backend_development'), 39, $r('app.string.popular_courses_text4'),
+    $r('app.media.ic_img_9'), 0),
+  new LinkDataModel(6, $r('app.string.backend_development'), 40, $r('app.string.popular_courses_text5'),
+    $r('app.media.ic_img_10'), 2001),
+  new LinkDataModel(6, $r('app.string.backend_development'), 41, $r('app.string.popular_courses_text6'),
+    $r('app.media.ic_img_1'), 30),
+  new LinkDataModel(6, $r('app.string.backend_development'), 42, $r('app.string.popular_courses_text7'),
+    $r('app.media.ic_img_2'), 50),
+  new LinkDataModel(7, $r('app.string.mobile_development'), 43, $r('app.string.popular_courses_text8'),
+    $r('app.media.ic_img_3'), 0),
+  new LinkDataModel(7, $r('app.string.mobile_development'), 44, $r('app.string.popular_courses_text1'),
+    $r('app.media.ic_img_4'), 0),
+  new LinkDataModel(7, $r('app.string.mobile_development'), 45, $r('app.string.popular_courses_text2'),
+    $r('app.media.ic_img_5'), 0),
+  new LinkDataModel(8, $r('app.string.front_end_development'), 46, $r('app.string.popular_courses_text1'),
+    $r('app.media.ic_img_6'), 50),
+  new LinkDataModel(8, $r('app.string.front_end_development'), 47, $r('app.string.popular_courses_text2'),
+    $r('app.media.ic_img_16'), 60),
+  new LinkDataModel(8, $r('app.string.front_end_development'), 48, $r('app.string.popular_courses_text3'),
+    $r('app.media.ic_img_8'), 80),
+  new LinkDataModel(8, $r('app.string.front_end_development'), 49, $r('app.string.popular_courses_text4'),
+    $r('app.media.ic_img_9'), 300),
+  new LinkDataModel(8, $r('app.string.front_end_development'), 50, $r('app.string.popular_courses_text5'),
+    $r('app.media.ic_img_10'), 150),
+  new LinkDataModel(8, $r('app.string.front_end_development'), 51, $r('app.string.popular_courses_text6'),
+    $r('app.media.ic_img_11'), 200),
+  new LinkDataModel(8, $r('app.string.front_end_development'), 52, $r('app.string.popular_courses_text7'),
+    $r('app.media.ic_img_12'), 0),
+  new LinkDataModel(8, $r('app.string.front_end_development'), 53, $r('app.string.popular_courses_text8'),
+    $r('app.media.ic_img_13'), 0),
+  new LinkDataModel(8, $r('app.string.front_end_development'), 54, $r('app.string.popular_courses_text1'),
+    $r('app.media.ic_img_14'), 0),
+  new LinkDataModel(8, $r('app.string.front_end_development'), 55, $r('app.string.popular_courses_text2'),
+    $r('app.media.ic_img_15'), 0)
 ]
\ No newline at end of file
diff --git a/entry/src/main/ets/viewmodel/CourseModel.ets b/entry/src/main/ets/viewmodel/CourseModel.ets
index cf36e2b34af8d5d20cbe45b93ca7981bd4cf2061..f6e8d53929499de088991265e4973933dd7390d6 100644
--- a/entry/src/main/ets/viewmodel/CourseModel.ets
+++ b/entry/src/main/ets/viewmodel/CourseModel.ets
@@ -19,11 +19,11 @@
 export default class CourseModel {
   classifyId: number;
   courseId: number;
-  courseName: string;
+  courseName: ResourceStr;
   imageUrl: Resource;
   price: number;
 
-  constructor(classifyId: number, courseId: number, courseName: string, imageUrl: Resource, price: number) {
+  constructor(classifyId: number, courseId: number, courseName: ResourceStr, imageUrl: Resource, price: number) {
     this.classifyId = classifyId;
     this.courseId = courseId;
     this.courseName = courseName;
diff --git a/entry/src/main/ets/viewmodel/LinkDataModel.ets b/entry/src/main/ets/viewmodel/LinkDataModel.ets
index 6ace6bf534fc14ce8a0f9882190e21b63e9f297f..0c3e411fda54e075e10545cade2fcca1f4e976c8 100644
--- a/entry/src/main/ets/viewmodel/LinkDataModel.ets
+++ b/entry/src/main/ets/viewmodel/LinkDataModel.ets
@@ -24,13 +24,13 @@ export default class LinkDataModel {
   /**
    * ParentName
    */
-  superName: string;
+  superName: ResourceStr;
   id: number;
-  courseName: string;
+  courseName: ResourceStr;
   imageUrl: Resource;
   price: number;
 
-  constructor(superId: number, superName: string, id: number, courseName: string, imageUrl: Resource, price: number) {
+  constructor(superId: number, superName: ResourceStr, id: number, courseName: ResourceStr, imageUrl: Resource, price: number) {
     this.superId = superId;
     this.superName = superName;
     this.id = id;
diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json
index 083356a580d93f7d7649dbd6d53d563086e18cf8..a76578e0305d0166d3ef8b506fcff113f85bfa1d 100644
--- a/entry/src/main/resources/base/element/string.json
+++ b/entry/src/main/resources/base/element/string.json
@@ -31,6 +31,66 @@
     {
       "name": "hei_ti",
       "value": "HarmonyHeiTi"
+    },
+    {
+      "name": "popular_courses",
+      "value": "Popular Courses"
+    },
+    {
+      "name": "latest_courses",
+      "value": "Latest Courses"
+    },
+    {
+      "name": "exciting_activities",
+      "value": "Exciting Activities"
+    },
+    {
+      "name": "developer_said",
+      "value": "Developer Said"
+    },
+    {
+      "name": "backend_development",
+      "value": "Backend Development"
+    },
+    {
+      "name": "mobile_development",
+      "value": "Mobile Development"
+    },
+    {
+      "name": "front_end_development",
+      "value": "Front End Development"
+    },
+    {
+      "name": "popular_courses_text1",
+      "value": "Introduction to the Application Market"
+    },
+    {
+      "name": "popular_courses_text2",
+      "value": "Listing process"
+    },
+    {
+      "name": "popular_courses_text3",
+      "value": "Apply overseas"
+    },
+    {
+      "name": "popular_courses_text4",
+      "value": "Audit Policy"
+    },
+    {
+      "name": "popular_courses_text5",
+      "value": "CaaS Kit - HMS Core Premium Practical Course"
+    },
+    {
+      "name": "popular_courses_text6",
+      "value": "The Application of Machine Learning in Image Segmentation Scenarios"
+    },
+    {
+      "name": "popular_courses_text7",
+      "value": "One minute understanding of Huawei's in app payment services"
+    },
+    {
+      "name": "popular_courses_text8",
+      "value": "One minute understanding of Huawei location services"
     }
   ]
 }
\ No newline at end of file
diff --git a/entry/src/main/resources/en_US/element/string.json b/entry/src/main/resources/en_US/element/string.json
index 083356a580d93f7d7649dbd6d53d563086e18cf8..a76578e0305d0166d3ef8b506fcff113f85bfa1d 100644
--- a/entry/src/main/resources/en_US/element/string.json
+++ b/entry/src/main/resources/en_US/element/string.json
@@ -31,6 +31,66 @@
     {
       "name": "hei_ti",
       "value": "HarmonyHeiTi"
+    },
+    {
+      "name": "popular_courses",
+      "value": "Popular Courses"
+    },
+    {
+      "name": "latest_courses",
+      "value": "Latest Courses"
+    },
+    {
+      "name": "exciting_activities",
+      "value": "Exciting Activities"
+    },
+    {
+      "name": "developer_said",
+      "value": "Developer Said"
+    },
+    {
+      "name": "backend_development",
+      "value": "Backend Development"
+    },
+    {
+      "name": "mobile_development",
+      "value": "Mobile Development"
+    },
+    {
+      "name": "front_end_development",
+      "value": "Front End Development"
+    },
+    {
+      "name": "popular_courses_text1",
+      "value": "Introduction to the Application Market"
+    },
+    {
+      "name": "popular_courses_text2",
+      "value": "Listing process"
+    },
+    {
+      "name": "popular_courses_text3",
+      "value": "Apply overseas"
+    },
+    {
+      "name": "popular_courses_text4",
+      "value": "Audit Policy"
+    },
+    {
+      "name": "popular_courses_text5",
+      "value": "CaaS Kit - HMS Core Premium Practical Course"
+    },
+    {
+      "name": "popular_courses_text6",
+      "value": "The Application of Machine Learning in Image Segmentation Scenarios"
+    },
+    {
+      "name": "popular_courses_text7",
+      "value": "One minute understanding of Huawei's in app payment services"
+    },
+    {
+      "name": "popular_courses_text8",
+      "value": "One minute understanding of Huawei location services"
     }
   ]
 }
\ No newline at end of file
diff --git a/entry/src/main/resources/zh_CN/element/string.json b/entry/src/main/resources/zh_CN/element/string.json
index c01a61e27f37eb59c6014ac9fac670ad6fc827e6..1a7244907e3db466a1249afd5c937e2447f08a38 100644
--- a/entry/src/main/resources/zh_CN/element/string.json
+++ b/entry/src/main/resources/zh_CN/element/string.json
@@ -31,6 +31,66 @@
     {
       "name": "hei_ti",
       "value": "HarmonyHeiTi"
+    },
+    {
+      "name": "popular_courses",
+      "value": "热门课程"
+    },
+    {
+      "name": "latest_courses",
+      "value": "最新课程"
+    },
+    {
+      "name": "exciting_activities",
+      "value": "精彩活动"
+    },
+    {
+      "name": "developer_said",
+      "value": "开发者说"
+    },
+    {
+      "name": "backend_development",
+      "value": "后端开发"
+    },
+    {
+      "name": "mobile_development",
+      "value": "移动开发"
+    },
+    {
+      "name": "front_end_development",
+      "value": "前端开发"
+    },
+    {
+      "name": "popular_courses_text1",
+      "value": "应用市场介绍"
+    },
+    {
+      "name": "popular_courses_text2",
+      "value": "上架流程"
+    },
+    {
+      "name": "popular_courses_text3",
+      "value": "应用出海"
+    },
+    {
+      "name": "popular_courses_text4",
+      "value": "审核政策"
+    },
+    {
+      "name": "popular_courses_text5",
+      "value": "CaaS Kit - HMS Core精品实战课"
+    },
+    {
+      "name": "popular_courses_text6",
+      "value": "机器学习在图像分割场景中的应用"
+    },
+    {
+      "name": "popular_courses_text7",
+      "value": "一分钟了解华为应用内支付服务"
+    },
+    {
+      "name": "popular_courses_text8",
+      "value": "一分钟了解华为位置服务"
     }
   ]
 }
\ No newline at end of file
diff --git a/screenshots/device/TwoLevelLink.en.gif b/screenshots/device/TwoLevelLink.en.gif
new file mode 100644
index 0000000000000000000000000000000000000000..f6b6483ac6b773813bb4794f79b78183f22e2ca3
Binary files /dev/null and b/screenshots/device/TwoLevelLink.en.gif differ