diff --git a/UI/eTsBuildCommonView/README_zh.md b/UI/eTsBuildCommonView/README_zh.md
new file mode 100644
index 0000000000000000000000000000000000000000..01baaf69607cc98a9f9c07cf803c99983e062873
--- /dev/null
+++ b/UI/eTsBuildCommonView/README_zh.md
@@ -0,0 +1,9 @@
+# 构建简单页面
+## 简介
+本示例为构建了简单页面展示食物番茄的图片和营养信息，主要为了展示简单页面的Stack布局和Flex布局。详情参考《ArkUI-声明式范式开发指南》第三章。
+## 使用说明
+无
+
+## 约束与限制
+本示例仅支持在大型系统上运行，需使用API7 HarmonyOS SDK和版本为3.0 Beta1 Dev Eco Studio。
+
diff --git a/UI/eTsBuildCommonView/build.gradle b/UI/eTsBuildCommonView/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..fde06f92df3b4d934ad0b1968bbe90fd4091d431
--- /dev/null
+++ b/UI/eTsBuildCommonView/build.gradle
@@ -0,0 +1,33 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+apply plugin: 'com.huawei.ohos.app'
+
+//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510
+ohos {
+    compileSdkVersion 7
+}
+	
+buildscript {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+    }
+    dependencies {
+        classpath 'com.huawei.ohos:hap:3.0.3.4'
+        classpath 'com.huawei.ohos:decctest:1.2.6.0'
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+    }
+}
diff --git a/UI/eTsBuildCommonView/entry/build.gradle b/UI/eTsBuildCommonView/entry/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..385e273e9fbb252aff5dc0e185271db2cae25ea3
--- /dev/null
+++ b/UI/eTsBuildCommonView/entry/build.gradle
@@ -0,0 +1,26 @@
+apply plugin: 'com.huawei.ohos.hap'
+apply plugin: 'com.huawei.ohos.decctest'
+//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510
+ohos {
+    compileSdkVersion 7
+    defaultConfig {
+        compatibleSdkVersion 7
+    }
+    buildTypes {
+        release {
+            proguardOpt {
+                proguardEnabled false
+                rulesFiles 'proguard-rules.pro'
+            }
+        }
+    }
+}
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
+    testImplementation 'junit:junit:4.13.1'
+    ohosTestImplementation 'com.huawei.ohos.testkit:runner:1.0.0.200'
+}
+decc {
+    supportType = ['html','xml']
+}
diff --git a/UI/eTsBuildCommonView/entry/src/main/config.json b/UI/eTsBuildCommonView/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..a1d8f888c7159b21748e5b1199594a55859b08db
--- /dev/null
+++ b/UI/eTsBuildCommonView/entry/src/main/config.json
@@ -0,0 +1,62 @@
+{
+  "app": {
+    "bundleName": "ohos.samples.etsbuildcommonview",
+    "vendor": "example",
+    "version": {
+      "code": 1000000,
+      "name": "1.0.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "ohos.samples.etsbuildcommonview",
+    "name": ".MyApplication",
+    "mainAbility": "ohos.samples.etsbuildcommonview.MainAbility",
+    "deviceType": [
+      "phone"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry",
+      "installationFree": false
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "visible": true,
+        "name": "ohos.samples.etsbuildcommonview.MainAbility",
+        "icon": "$media:Logo",
+        "description": "$string:mainability_description",
+        "label": "$string:entry_MainAbility",
+        "type": "page",
+        "launchType": "standard"
+      }
+    ],
+    "js": [
+      {
+        "mode": {
+          "syntax": "ets",
+          "type": "pageAbility"
+        },
+        "pages": [
+          "pages/FoodDetail"
+        ],
+        "name": "default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": false
+        }
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/UI/eTsBuildCommonView/entry/src/main/ets/default/app.ets b/UI/eTsBuildCommonView/entry/src/main/ets/default/app.ets
new file mode 100644
index 0000000000000000000000000000000000000000..bf28e58b36cf11db491d3f00768ef2c9e41d05cf
--- /dev/null
+++ b/UI/eTsBuildCommonView/entry/src/main/ets/default/app.ets
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 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.
+ */
+
+export default {
+  onCreate() {
+    console.info('Application onCreate')
+  },
+  onDestroy() {
+    console.info('Application onDestroy')
+  },
+}
\ No newline at end of file
diff --git a/UI/eTsBuildCommonView/entry/src/main/ets/default/pages/FoodDetail.ets b/UI/eTsBuildCommonView/entry/src/main/ets/default/pages/FoodDetail.ets
new file mode 100644
index 0000000000000000000000000000000000000000..10a5ba48614cf0b239fe287040cb0883293f7cfa
--- /dev/null
+++ b/UI/eTsBuildCommonView/entry/src/main/ets/default/pages/FoodDetail.ets
@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) 2021 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
+struct FoodImageDisplay {
+  build() {
+    Stack({ alignContent: Alignment.BottomStart }) {
+      Image($r('app.media.Tomato'))
+        .objectFit(ImageFit.Contain)
+      Text('Tomato')
+        .fontSize(26)
+        .fontWeight(500)
+        .margin({ left: 26, bottom: 17.4 })
+    }
+    .backgroundColor('#FFedf2f5')
+    .height(357)
+  }
+}
+
+@Component
+struct ContentTable {
+  @Builder IngredientItem(title:string, name: string, value: string) {
+    Flex() {
+      Text(title)
+        .fontSize(17.4)
+        .fontWeight(FontWeight.Bold)
+        .layoutWeight(1)
+      Flex({ alignItems: ItemAlign.Center }) {
+        Text(name)
+          .fontSize(17.4)
+          .flexGrow(1)
+        Text(value)
+          .fontSize(17.4)
+      }
+      .layoutWeight(2)
+    }
+  }
+
+  build() {
+    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
+      this.IngredientItem('Calories', 'Calories', '17kcal')
+      this.IngredientItem('Nutrition', 'Protein', '0.9g')
+      this.IngredientItem(' ', 'Fat', '0.2g')
+      this.IngredientItem(' ', 'Carbohydrates', '3.9g')
+      this.IngredientItem(' ', 'VitaminC', '17.8mg')
+    }
+    .padding({ top: 20, right: 20, left: 20 })
+    .height(250)
+  }
+}
+
+@Entry
+@Component
+struct FoodDetail {
+  build() {
+    Column() {
+      FoodImageDisplay()
+      ContentTable()
+    }
+    .alignItems(HorizontalAlign.Center)
+  }
+}
\ No newline at end of file
diff --git a/UI/eTsBuildCommonView/entry/src/main/java/ohos/samples/etsbuildcommonview/MainAbility.java b/UI/eTsBuildCommonView/entry/src/main/java/ohos/samples/etsbuildcommonview/MainAbility.java
new file mode 100644
index 0000000000000000000000000000000000000000..d8740983c72cd346732e7cd239b44a60d6e3d8dd
--- /dev/null
+++ b/UI/eTsBuildCommonView/entry/src/main/java/ohos/samples/etsbuildcommonview/MainAbility.java
@@ -0,0 +1,16 @@
+package ohos.samples.etsbuildcommonview;
+
+import ohos.ace.ability.AceAbility;
+import ohos.aafwk.content.Intent;
+
+public class MainAbility extends AceAbility {
+    @Override
+    public void onStart(Intent intent) {
+        super.onStart(intent);
+    }
+
+    @Override
+    public void onStop() {
+        super.onStop();
+    }
+}
diff --git a/UI/eTsBuildCommonView/entry/src/main/java/ohos/samples/etsbuildcommonview/MyApplication.java b/UI/eTsBuildCommonView/entry/src/main/java/ohos/samples/etsbuildcommonview/MyApplication.java
new file mode 100644
index 0000000000000000000000000000000000000000..7bd2b123e4a77c2d61866898856b8bbfdd393395
--- /dev/null
+++ b/UI/eTsBuildCommonView/entry/src/main/java/ohos/samples/etsbuildcommonview/MyApplication.java
@@ -0,0 +1,10 @@
+package ohos.samples.etsbuildcommonview;
+
+import ohos.aafwk.ability.AbilityPackage;
+
+public class MyApplication extends AbilityPackage {
+    @Override
+    public void onInitialize() {
+        super.onInitialize();
+    }
+}
diff --git a/UI/eTsBuildCommonView/entry/src/main/resources/base/element/string.json b/UI/eTsBuildCommonView/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..a369e7b5d7acba406c1e7808e88980d71725898d
--- /dev/null
+++ b/UI/eTsBuildCommonView/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "Healthy Diet"
+    },
+    {
+      "name": "mainability_description",
+      "value": "ETS_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/UI/eTsBuildCommonView/entry/src/main/resources/base/media/Logo.png b/UI/eTsBuildCommonView/entry/src/main/resources/base/media/Logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..826c9813215ecaef36f1900b9ad37c93598181c2
Binary files /dev/null and b/UI/eTsBuildCommonView/entry/src/main/resources/base/media/Logo.png differ
diff --git a/UI/eTsBuildCommonView/entry/src/main/resources/phone/media/Tomato.png b/UI/eTsBuildCommonView/entry/src/main/resources/phone/media/Tomato.png
new file mode 100644
index 0000000000000000000000000000000000000000..93ad983d4862485684c34cfcf1632569a13ae5a1
Binary files /dev/null and b/UI/eTsBuildCommonView/entry/src/main/resources/phone/media/Tomato.png differ
diff --git a/UI/eTsBuildCommonView/entry/src/main/resources/rawfile/Tomato.png b/UI/eTsBuildCommonView/entry/src/main/resources/rawfile/Tomato.png
new file mode 100644
index 0000000000000000000000000000000000000000..93ad983d4862485684c34cfcf1632569a13ae5a1
Binary files /dev/null and b/UI/eTsBuildCommonView/entry/src/main/resources/rawfile/Tomato.png differ
diff --git a/UI/eTsBuildCommonView/screenshots/device/FoodDetail.png b/UI/eTsBuildCommonView/screenshots/device/FoodDetail.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c86977d269534d034cbbb31990309ffb971c4d4
Binary files /dev/null and b/UI/eTsBuildCommonView/screenshots/device/FoodDetail.png differ
diff --git a/UI/eTsBuildCommonView/settings.gradle b/UI/eTsBuildCommonView/settings.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..28d595f2fba0d06b2025da200383d15f87c4e9f0
--- /dev/null
+++ b/UI/eTsBuildCommonView/settings.gradle
@@ -0,0 +1 @@
+include ':entry'
diff --git a/UI/eTsDefiningPageLayoutAndConnection/README_zh.md b/UI/eTsDefiningPageLayoutAndConnection/README_zh.md
new file mode 100644
index 0000000000000000000000000000000000000000..bdedde5ad353dfde2020aaf70537ad5ca1ea1520
--- /dev/null
+++ b/UI/eTsDefiningPageLayoutAndConnection/README_zh.md
@@ -0,0 +1,18 @@
+# 构建页面布局和连接
+## 简介
+本示例构建食物分类列表页面和食物详情页，包含：
+
+1. List布局：创建食物数据模型，ForEach循环渲染ListItem；
+
+2. Grid布局：展示食物分类信息，创建Tabs页签展示不同分类的食物网格；
+
+3. 路由机制：router接口、Navigator和页面间数据传递。
+
+详情参考《ArkUI-声明式范式开发指南》第四章。
+
+## 使用说明
+1. 点击首页的切换按钮，可切换List和Grid布局；
+2. 点击食物单元，可跳转到食物详情页。
+
+## 约束与限制
+本示例仅支持在大型系统上运行，需使用API7 HarmonyOS SDK和版本为3.0 Beta1 Dev Eco Studio。
\ No newline at end of file
diff --git a/UI/eTsDefiningPageLayoutAndConnection/build.gradle b/UI/eTsDefiningPageLayoutAndConnection/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..fde06f92df3b4d934ad0b1968bbe90fd4091d431
--- /dev/null
+++ b/UI/eTsDefiningPageLayoutAndConnection/build.gradle
@@ -0,0 +1,33 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+apply plugin: 'com.huawei.ohos.app'
+
+//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510
+ohos {
+    compileSdkVersion 7
+}
+	
+buildscript {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+    }
+    dependencies {
+        classpath 'com.huawei.ohos:hap:3.0.3.4'
+        classpath 'com.huawei.ohos:decctest:1.2.6.0'
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+    }
+}
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/build.gradle b/UI/eTsDefiningPageLayoutAndConnection/entry/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..385e273e9fbb252aff5dc0e185271db2cae25ea3
--- /dev/null
+++ b/UI/eTsDefiningPageLayoutAndConnection/entry/build.gradle
@@ -0,0 +1,26 @@
+apply plugin: 'com.huawei.ohos.hap'
+apply plugin: 'com.huawei.ohos.decctest'
+//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510
+ohos {
+    compileSdkVersion 7
+    defaultConfig {
+        compatibleSdkVersion 7
+    }
+    buildTypes {
+        release {
+            proguardOpt {
+                proguardEnabled false
+                rulesFiles 'proguard-rules.pro'
+            }
+        }
+    }
+}
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
+    testImplementation 'junit:junit:4.13.1'
+    ohosTestImplementation 'com.huawei.ohos.testkit:runner:1.0.0.200'
+}
+decc {
+    supportType = ['html','xml']
+}
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/config.json b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..3bf5d77ce6e7225140e36120eeb11b2c1b1dca94
--- /dev/null
+++ b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/config.json
@@ -0,0 +1,63 @@
+{
+  "app": {
+    "bundleName": "ohos.samples.etsdefiningpagelayoutandconnection",
+    "vendor": "example",
+    "version": {
+      "code": 1000000,
+      "name": "1.0.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "ohos.samples.etsdefiningpagelayoutandconnection",
+    "name": ".MyApplication",
+    "mainAbility": "ohos.samples.etsdefiningpagelayoutandconnection.MainAbility",
+    "deviceType": [
+      "phone"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry",
+      "installationFree": false
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "visible": true,
+        "name": "ohos.samples.etsdefiningpagelayoutandconnection.MainAbility",
+        "icon": "$media:Logo",
+        "description": "$string:mainability_description",
+        "label": "$string:entry_MainAbility",
+        "type": "page",
+        "launchType": "standard"
+      }
+    ],
+    "js": [
+      {
+        "mode": {
+          "syntax": "ets",
+          "type": "pageAbility"
+        },
+        "pages": [
+          "pages/FoodCategoryList",
+          "pages/FoodDetail"
+        ],
+        "name": "default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": false
+        }
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/ets/default/app.ets b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/ets/default/app.ets
new file mode 100644
index 0000000000000000000000000000000000000000..2a3b6238737330f469fc124b0669aacd9a376056
--- /dev/null
+++ b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/ets/default/app.ets
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 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.
+ */
+
+export default {
+  onCreate() {
+    console.info('Application onCreate')
+  },
+  onDestroy() {
+    console.info('Application onDestroy')
+  },
+}
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/ets/default/model/FoodData.ets b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/ets/default/model/FoodData.ets
new file mode 100644
index 0000000000000000000000000000000000000000..458b87ab5d868d06bf8c4e4749beaf137f12ea03
--- /dev/null
+++ b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/ets/default/model/FoodData.ets
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2021 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.
+ */
+
+export enum Category  {
+  Fruit,
+  Vegetable,
+  Nut,
+  Seafood,
+  Dessert
+}
+
+let NextId = 0;
+export class FoodData {
+  id: string;
+  name: string;
+  image: Resource
+  category: Category;
+  calories: number;
+  protein: number;
+  fat: number;
+  carbohydrates: number;
+  vitaminC: number;
+
+  constructor(name: string, image: Resource, category: Category, calories: number, protein: number, fat: number, carbohydrates: number, vitaminC: number) {
+    this.id = `${ NextId++ }`;
+    this.name = name;
+    this.image = image;
+    this.category = category;
+    this.calories = calories;
+    this.protein = protein;
+    this.fat = fat;
+    this.carbohydrates = carbohydrates;
+    this.vitaminC = vitaminC;
+  }
+}
\ No newline at end of file
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/ets/default/model/FoodDataModels.ets b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/ets/default/model/FoodDataModels.ets
new file mode 100644
index 0000000000000000000000000000000000000000..71a700f7082a5c3b6f5e8d6ecd9487966698acba
--- /dev/null
+++ b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/ets/default/model/FoodDataModels.ets
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2021 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 { FoodData, Category } from './FoodData'
+
+const FoodComposition: any[] = [
+  { 'name': 'Tomato', 'image': $r('app.media.Tomato'), 'category': Category.Vegetable, 'calories': 17, 'protein': 0.9, 'fat': 0.2, 'carbohydrates': 3.9, 'vitaminC': 17.8 },
+  { 'name': 'Walnut', 'image': $r('app.media.Walnut'), 'category': Category.Nut, 'calories': 654 , 'protein': 15, 'fat': 65, 'carbohydrates': 14, 'vitaminC': 1.3 },
+  { 'name': 'Cucumber', 'image': $r('app.media.Cucumber'), 'category': Category.Vegetable, 'calories': 30, 'protein': 3, 'fat': 0, 'carbohydrates': 1.9, 'vitaminC': 2.1 },
+  { 'name': 'Blueberry', 'image': $r('app.media.Blueberry'), 'category': Category.Fruit, 'calories': 57, 'protein': 0.7, 'fat': 0.3, 'carbohydrates': 14, 'vitaminC': 9.7 },
+  { 'name': 'Crab', 'image': $r('app.media.Crab'), 'category': Category.Seafood, 'calories': 97, 'protein': 19, 'fat': 1.5, 'carbohydrates': 0, 'vitaminC': 7.6 },
+  { 'name': 'IceCream', 'image': $r('app.media.IceCream'), 'category': Category.Dessert, 'calories': 207, 'protein': 3.5, 'fat': 11, 'carbohydrates': 24, 'vitaminC': 0.6 },
+  { 'name': 'Onion', 'image': $r('app.media.Onion'), 'category': Category.Vegetable, 'calories': 39, 'protein': 1.1, 'fat': 0.1, 'carbohydrates': 9, 'vitaminC': 7.4 },
+  { 'name': 'Mushroom', 'image': $r('app.media.Mushroom'), 'category': Category.Vegetable, 'calories': 22, 'protein': 3.1, 'fat': 0.3, 'carbohydrates': 3.3, 'vitaminC': 2.1 },
+  { 'name': 'Kiwi', 'image': $r('app.media.Kiwi'), 'category': Category.Fruit, 'calories': 60 , 'protein': 1.1, 'fat': 0.5, 'carbohydrates': 15, 'vitaminC': 20.5 },
+  { 'name': 'Pitaya', 'image': $r('app.media.Pitaya'), 'category': Category.Fruit, 'calories': 60, 'protein': 1.2, 'fat': 0, 'carbohydrates': 10, 'vitaminC': 60.9 },
+  { 'name': 'Avocado', 'image': $r('app.media.Avocado'), 'category': Category.Fruit, 'calories': 160, 'protein': 2, 'fat': 15, 'carbohydrates': 9, 'vitaminC': 10 },
+  { 'name': 'Strawberry', 'image': $r('app.media.Strawberry'), 'category': Category.Fruit, 'calories': 32, 'protein': 0.7, 'fat': 0.3, 'carbohydrates': 8, 'vitaminC': 58.8 }
+]
+
+export function initializeOnStartup(): Array<FoodData> {
+  let FoodDataArray: Array<FoodData> = []
+  FoodComposition.forEach(item => {
+    FoodDataArray.push(new FoodData(item.name, item.image, item.category, item.calories, item.protein, item.fat, item.carbohydrates, item.vitaminC));
+  })
+  return FoodDataArray;
+}
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/ets/default/pages/FoodCategoryList.ets b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/ets/default/pages/FoodCategoryList.ets
new file mode 100644
index 0000000000000000000000000000000000000000..1d60743c950f9e6de40bab883fd1eebc1a4f0f4c
--- /dev/null
+++ b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/ets/default/pages/FoodCategoryList.ets
@@ -0,0 +1,196 @@
+/*
+ * Copyright (c) 2021 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 router from '@system.router'
+import { Category, FoodData } from '../model/FoodData'
+import { initializeOnStartup } from '../model/FoodDataModels'
+
+@Component
+struct FoodListItem {
+  private foodItem: FoodData
+  build() {
+    Navigator({ target: 'pages/FoodDetail' }) {
+      Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+        Row() {
+          Image(this.foodItem.image)
+            .objectFit(ImageFit.Contain)
+            .autoResize(false)
+            .height(40)
+            .width(40)
+        }
+        .backgroundColor('#FFf1f3f5')
+        .margin({ right: 16 })
+        Text(this.foodItem.name)
+          .fontSize(14)
+          .flexGrow(1)
+        Text(this.foodItem.calories + ' kcal')
+          .fontSize(14)
+      }
+      .height(64)
+    }
+    .params({ foodId: this.foodItem })
+    .margin({ right: 24, left: 32 })
+  }
+}
+
+
+@Component
+struct FoodList {
+  private foodItems: FoodData[]
+  build() {
+    Column() {
+      Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+        Text('Food List')
+          .fontSize(20)
+          .margin({ left: 20 })
+      }
+      .height('7%')
+      .backgroundColor('#FFf1f3f5')
+      List() {
+        ForEach(this.foodItems, item => {
+          ListItem() {
+            FoodListItem({ foodItem: item })
+          }
+        }, item => item.id.toString())
+      }.height('93%')
+    }
+  }
+}
+
+@Component
+struct FoodGridItem {
+  private foodItem: FoodData
+  build() {
+    Column() {
+      Row() {
+        Image(this.foodItem.image)
+          .objectFit(ImageFit.Contain)
+          .height(152)
+          .width('100%')
+      }.backgroundColor('#FFf1f3f5')
+      Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+        Text(this.foodItem.name)
+          .fontSize(14)
+          .flexGrow(1)
+          .padding({ left: 8 })
+        Text(this.foodItem.calories + 'kcal')
+          .fontSize(14)
+          .margin({ right: 6 })
+      }
+      .height(32)
+      .width('100%')
+      .backgroundColor('#FFe5e5e5')
+    }
+    .height(184)
+    .width('100%')
+    .onClick(() => {
+      router.push({ uri: 'pages/FoodDetail', params: { foodId: this.foodItem } })
+    })
+  }
+}
+
+@Component
+struct FoodGrid {
+  private foodItems: FoodData[]
+  private gridRowTemplate: string = ''
+  private heightValue: number
+
+  aboutToAppear() {
+    var rows = Math.round(this.foodItems.length / 2);
+    this.gridRowTemplate = '1fr '.repeat(rows);
+    this.heightValue = rows * 192 - 8;
+  }
+
+  build() {
+    Scroll() {
+      Grid() {
+        ForEach(this.foodItems, (item: FoodData) => {
+          GridItem() {
+            FoodGridItem({ foodItem: item })
+          }
+        }, (item: FoodData) => item.id.toString())
+      }
+      .rowsTemplate(this.gridRowTemplate)
+      .columnsTemplate('1fr 1fr')
+      .columnsGap(8)
+      .rowsGap(8)
+      .height(this.heightValue)
+    }
+    .scrollBar(BarState.Off)
+    .padding({ left: 16, right: 16 })
+  }
+}
+
+@Component
+struct FoodCategory {
+  private foodItems: FoodData[]
+  build() {
+    Stack() {
+      Tabs() {
+        TabContent() {
+          FoodGrid({ foodItems: this.foodItems })
+        }.tabBar('All')
+
+        TabContent() {
+          FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Vegetable)) })
+        }.tabBar('Vegetable')
+
+        TabContent() {
+          FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Fruit)) })
+        }.tabBar('Fruit')
+
+        TabContent() {
+          FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Nut)) })
+        }.tabBar('Nut')
+
+        TabContent() {
+          FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Seafood)) })
+        }.tabBar('Seafood')
+
+        TabContent() {
+          FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Dessert)) })
+        }.tabBar('Dessert')
+      }
+      .barWidth(280)
+      .barMode(BarMode.Scrollable)
+    }
+  }
+}
+
+@Entry
+@Component
+struct FoodCategoryList {
+  private foodItems: FoodData[] = initializeOnStartup()
+  @State private showList: boolean = false
+
+  build() {
+    Column() {
+      Stack({ alignContent: Alignment.TopEnd }) {
+        if (this.showList) {
+          FoodList({ foodItems: this.foodItems })
+        } else {
+          FoodCategory({ foodItems: this.foodItems })
+        }
+        Image($r('app.media.Switch'))
+          .height(24)
+          .width(24)
+          .margin({ top: 15, right: 10 })
+          .onClick(() => {
+            this.showList = !this.showList
+          })
+      }
+    }.height('100%')
+  }
+}
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/ets/default/pages/FoodDetail.ets b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/ets/default/pages/FoodDetail.ets
new file mode 100644
index 0000000000000000000000000000000000000000..6710c6391be03c32367f19e18eef39946170b038
--- /dev/null
+++ b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/ets/default/pages/FoodDetail.ets
@@ -0,0 +1,102 @@
+/*
+ * Copyright (c) 2021 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 router from '@system.router'
+import { FoodData, Category } from '../model/FoodData'
+
+@Component
+struct PageTitle {
+  build() {
+    Flex({ alignItems: ItemAlign.Start }) {
+      Image($r('app.media.Back'))
+        .width(21.8)
+        .height(19.6)
+      Text('Food Detail')
+        .fontSize(21.8)
+        .margin({ left: 17.4 })
+    }
+    .height(61)
+    .backgroundColor('#FFedf2f5')
+    .padding({ top: 13, bottom: 15, left: 28.3 })
+    .onClick(() => {
+      router.back()
+    })
+  }
+}
+
+@Component
+struct FoodImageDisplay {
+  private foodItem: FoodData
+  build() {
+    Stack({ alignContent: Alignment.BottomStart }) {
+      Image(this.foodItem.image)
+        .objectFit(ImageFit.Contain)
+      Text(this.foodItem.name)
+        .fontSize(26)
+        .fontWeight(500)
+        .margin({ left: 26, bottom: 17.4 })
+    }
+    .backgroundColor('#FFedf2f5')
+    .height(357)
+  }
+}
+
+@Component
+struct ContentTable {
+  private foodItem: FoodData
+  @Builder IngredientItem(title:string, name: string, value: string) {
+    Flex() {
+      Text(title)
+        .fontSize(17.4)
+        .fontWeight(FontWeight.Bold)
+        .layoutWeight(1)
+      Flex({ alignItems: ItemAlign.Center }) {
+        Text(name)
+          .fontSize(17.4)
+          .flexGrow(1)
+        Text(value)
+          .fontSize(17.4)
+      }
+      .layoutWeight(2)
+    }
+  }
+  build() {
+    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
+      this.IngredientItem('Calories', 'Calories', this.foodItem.calories + 'kcal')
+      this.IngredientItem('Nutrition', 'Protein', this.foodItem.protein + 'g')
+      this.IngredientItem(' ', 'Fat', this.foodItem.fat + 'g')
+      this.IngredientItem(' ', 'Carbohydrates', this.foodItem.carbohydrates + 'g')
+      this.IngredientItem(' ', 'VitaminC', this.foodItem.vitaminC + 'mg')
+    }
+    .padding({ top: 20, right: 20, left: 20 })
+    .height(250)
+  }
+}
+
+@Entry
+@Component
+struct FoodDetail {
+  private foodItem: number = router.getParams().foodId
+  build() {
+    Column() {
+      Stack({ alignContent: Alignment.TopStart }) {
+        FoodImageDisplay({ foodItem: this.foodItem })
+        PageTitle()
+      }
+      ContentTable({ foodItem: this.foodItem })
+    }
+    .alignItems(HorizontalAlign.Center)
+  }
+}
\ No newline at end of file
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/java/ohos/samples/etsdefiningpagelayoutandconnection/MainAbility.java b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/java/ohos/samples/etsdefiningpagelayoutandconnection/MainAbility.java
new file mode 100644
index 0000000000000000000000000000000000000000..02a125b24d56c4aad0ca3040eb358217da247a3b
--- /dev/null
+++ b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/java/ohos/samples/etsdefiningpagelayoutandconnection/MainAbility.java
@@ -0,0 +1,16 @@
+package ohos.samples.etsdefiningpagelayoutandconnection;
+
+import ohos.ace.ability.AceAbility;
+import ohos.aafwk.content.Intent;
+
+public class MainAbility extends AceAbility {
+    @Override
+    public void onStart(Intent intent) {
+        super.onStart(intent);
+    }
+
+    @Override
+    public void onStop() {
+        super.onStop();
+    }
+}
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/java/ohos/samples/etsdefiningpagelayoutandconnection/MyApplication.java b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/java/ohos/samples/etsdefiningpagelayoutandconnection/MyApplication.java
new file mode 100644
index 0000000000000000000000000000000000000000..9a60d4e9d78a9bbeb7bf023b26928053d9df3872
--- /dev/null
+++ b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/java/ohos/samples/etsdefiningpagelayoutandconnection/MyApplication.java
@@ -0,0 +1,10 @@
+package ohos.samples.etsdefiningpagelayoutandconnection;
+
+import ohos.aafwk.ability.AbilityPackage;
+
+public class MyApplication extends AbilityPackage {
+    @Override
+    public void onInitialize() {
+        super.onInitialize();
+    }
+}
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/base/element/string.json b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..a369e7b5d7acba406c1e7808e88980d71725898d
--- /dev/null
+++ b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "Healthy Diet"
+    },
+    {
+      "name": "mainability_description",
+      "value": "ETS_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/base/media/Logo.png b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/base/media/Logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..826c9813215ecaef36f1900b9ad37c93598181c2
Binary files /dev/null and b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/base/media/Logo.png differ
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Avocado.png b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Avocado.png
new file mode 100644
index 0000000000000000000000000000000000000000..a2848b10707f0f4f1c6a661826d822e678b3cceb
Binary files /dev/null and b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Avocado.png differ
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Back.png b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Back.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b0806c99ba80ca8bd23cf65f0b8eebf01dcb460
Binary files /dev/null and b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Back.png differ
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Blueberry.png b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Blueberry.png
new file mode 100644
index 0000000000000000000000000000000000000000..a07421e575d4d41e718ace47c16aaba8ac0755ac
Binary files /dev/null and b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Blueberry.png differ
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Crab.png b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Crab.png
new file mode 100644
index 0000000000000000000000000000000000000000..b71a627013711964e4d5d3b271e9311a2b525f65
Binary files /dev/null and b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Crab.png differ
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Cucumber.png b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Cucumber.png
new file mode 100644
index 0000000000000000000000000000000000000000..6dd74778e8d76e29a269fdd0155084292504ef61
Binary files /dev/null and b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Cucumber.png differ
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/IceCream.png b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/IceCream.png
new file mode 100644
index 0000000000000000000000000000000000000000..13a867424f48674c3e95590ec9887d38cd00fbfd
Binary files /dev/null and b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/IceCream.png differ
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Kiwi.png b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Kiwi.png
new file mode 100644
index 0000000000000000000000000000000000000000..f22fb4328a9850ddd526d165964096c1bb9778a7
Binary files /dev/null and b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Kiwi.png differ
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Mushroom.png b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Mushroom.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e984ee10df7a0ff4dae4558f17f2c6c7b89075f
Binary files /dev/null and b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Mushroom.png differ
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Onion.png b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Onion.png
new file mode 100644
index 0000000000000000000000000000000000000000..9c1c5a81c2ff9717df20fcec6a7a8e128b41f1ee
Binary files /dev/null and b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Onion.png differ
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Pitaya.png b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Pitaya.png
new file mode 100644
index 0000000000000000000000000000000000000000..2770b34deb402ab0639e861fb83e4c8a5865bf59
Binary files /dev/null and b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Pitaya.png differ
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Strawberry.png b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Strawberry.png
new file mode 100644
index 0000000000000000000000000000000000000000..a8d239456cdac76fa31e919768151ed6e74cae44
Binary files /dev/null and b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Strawberry.png differ
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Switch.png b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Switch.png
new file mode 100644
index 0000000000000000000000000000000000000000..51aa0fc19aeb19ee0599d09f9802fd1f344818ec
Binary files /dev/null and b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Switch.png differ
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Tomato.png b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Tomato.png
new file mode 100644
index 0000000000000000000000000000000000000000..93ad983d4862485684c34cfcf1632569a13ae5a1
Binary files /dev/null and b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Tomato.png differ
diff --git a/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Walnut.png b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Walnut.png
new file mode 100644
index 0000000000000000000000000000000000000000..8187a4209586dae8522fb494386cc9d64aba95df
Binary files /dev/null and b/UI/eTsDefiningPageLayoutAndConnection/entry/src/main/resources/phone/media/Walnut.png differ
diff --git a/UI/eTsDefiningPageLayoutAndConnection/screenshots/device/FoodCategory.png b/UI/eTsDefiningPageLayoutAndConnection/screenshots/device/FoodCategory.png
new file mode 100644
index 0000000000000000000000000000000000000000..57ee6f14bc67cbab046fe4c197f1f9d4ee50b55f
Binary files /dev/null and b/UI/eTsDefiningPageLayoutAndConnection/screenshots/device/FoodCategory.png differ
diff --git a/UI/eTsDefiningPageLayoutAndConnection/screenshots/device/FoodDetail.png b/UI/eTsDefiningPageLayoutAndConnection/screenshots/device/FoodDetail.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f77491b061636e74944f91f433bd727c76b16b0
Binary files /dev/null and b/UI/eTsDefiningPageLayoutAndConnection/screenshots/device/FoodDetail.png differ
diff --git a/UI/eTsDefiningPageLayoutAndConnection/screenshots/device/FoodList.png b/UI/eTsDefiningPageLayoutAndConnection/screenshots/device/FoodList.png
new file mode 100644
index 0000000000000000000000000000000000000000..89bcc891f2e8de3d86fa1394fce1c6ce175054a2
Binary files /dev/null and b/UI/eTsDefiningPageLayoutAndConnection/screenshots/device/FoodList.png differ
diff --git a/UI/eTsDefiningPageLayoutAndConnection/settings.gradle b/UI/eTsDefiningPageLayoutAndConnection/settings.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..28d595f2fba0d06b2025da200383d15f87c4e9f0
--- /dev/null
+++ b/UI/eTsDefiningPageLayoutAndConnection/settings.gradle
@@ -0,0 +1 @@
+include ':entry'
diff --git a/UI/eTsDrawingAndAnimation/README_zh.md b/UI/eTsDrawingAndAnimation/README_zh.md
new file mode 100644
index 0000000000000000000000000000000000000000..70eb1ec9921db2c651ff09f7d7427a60d44228e9
--- /dev/null
+++ b/UI/eTsDrawingAndAnimation/README_zh.md
@@ -0,0 +1,16 @@
+# 绘图和动画
+## 简介
+本示例构建健康饮食应用的动画部分，包含：
+
+1. 绘制组件：使用绘制组件Shape和Path绘制健康饮食应用的Logo；
+2. 动画：显式动画animateTo实现闪屏动画，以及添加食物分类列表页面到食物详情页的共享元素转场动画。
+
+详情参考《ArkUI-声明式范式开发指南》第五章。
+
+## 使用说明
+1. 启动应用，播放闪屏动画后，进入首页；
+2. 点击食物单元，食物图片共享元素转场到下一个页面。
+
+## 约束与限制
+本示例仅支持在大型系统上运行，需使用API7 HarmonyOS SDK和版本为3.0 Beta1 Dev Eco Studio。
+
diff --git a/UI/eTsDrawingAndAnimation/build.gradle b/UI/eTsDrawingAndAnimation/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..fde06f92df3b4d934ad0b1968bbe90fd4091d431
--- /dev/null
+++ b/UI/eTsDrawingAndAnimation/build.gradle
@@ -0,0 +1,33 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+apply plugin: 'com.huawei.ohos.app'
+
+//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510
+ohos {
+    compileSdkVersion 7
+}
+	
+buildscript {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+    }
+    dependencies {
+        classpath 'com.huawei.ohos:hap:3.0.3.4'
+        classpath 'com.huawei.ohos:decctest:1.2.6.0'
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+    }
+}
diff --git a/UI/eTsDrawingAndAnimation/entry/build.gradle b/UI/eTsDrawingAndAnimation/entry/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..385e273e9fbb252aff5dc0e185271db2cae25ea3
--- /dev/null
+++ b/UI/eTsDrawingAndAnimation/entry/build.gradle
@@ -0,0 +1,26 @@
+apply plugin: 'com.huawei.ohos.hap'
+apply plugin: 'com.huawei.ohos.decctest'
+//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510
+ohos {
+    compileSdkVersion 7
+    defaultConfig {
+        compatibleSdkVersion 7
+    }
+    buildTypes {
+        release {
+            proguardOpt {
+                proguardEnabled false
+                rulesFiles 'proguard-rules.pro'
+            }
+        }
+    }
+}
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
+    testImplementation 'junit:junit:4.13.1'
+    ohosTestImplementation 'com.huawei.ohos.testkit:runner:1.0.0.200'
+}
+decc {
+    supportType = ['html','xml']
+}
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/config.json b/UI/eTsDrawingAndAnimation/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..e2f75cea5348c5b3689faa46faff2c0845b25edf
--- /dev/null
+++ b/UI/eTsDrawingAndAnimation/entry/src/main/config.json
@@ -0,0 +1,64 @@
+{
+  "app": {
+    "bundleName": "ohos.samples.etsdrawingandanimation",
+    "vendor": "example",
+    "version": {
+      "code": 1000000,
+      "name": "1.0.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "ohos.samples.etsdrawingandanimation",
+    "name": ".MyApplication",
+    "mainAbility": "ohos.samples.etsdrawingandanimation.MainAbility",
+    "deviceType": [
+      "phone"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry",
+      "installationFree": false
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "visible": true,
+        "name": "ohos.samples.etsdrawingandanimation.MainAbility",
+        "icon": "$media:Logo",
+        "description": "$string:mainability_description",
+        "label": "$string:entry_MainAbility",
+        "type": "page",
+        "launchType": "standard"
+      }
+    ],
+    "js": [
+      {
+        "mode": {
+          "syntax": "ets",
+          "type": "pageAbility"
+        },
+        "pages": [
+          "pages/Logo",
+          "pages/FoodCategoryList",
+          "pages/FoodDetail"
+        ],
+        "name": "default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": false
+        }
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/ets/default/app.ets b/UI/eTsDrawingAndAnimation/entry/src/main/ets/default/app.ets
new file mode 100644
index 0000000000000000000000000000000000000000..2a3b6238737330f469fc124b0669aacd9a376056
--- /dev/null
+++ b/UI/eTsDrawingAndAnimation/entry/src/main/ets/default/app.ets
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 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.
+ */
+
+export default {
+  onCreate() {
+    console.info('Application onCreate')
+  },
+  onDestroy() {
+    console.info('Application onDestroy')
+  },
+}
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/ets/default/model/FoodData.ets b/UI/eTsDrawingAndAnimation/entry/src/main/ets/default/model/FoodData.ets
new file mode 100644
index 0000000000000000000000000000000000000000..458b87ab5d868d06bf8c4e4749beaf137f12ea03
--- /dev/null
+++ b/UI/eTsDrawingAndAnimation/entry/src/main/ets/default/model/FoodData.ets
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2021 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.
+ */
+
+export enum Category  {
+  Fruit,
+  Vegetable,
+  Nut,
+  Seafood,
+  Dessert
+}
+
+let NextId = 0;
+export class FoodData {
+  id: string;
+  name: string;
+  image: Resource
+  category: Category;
+  calories: number;
+  protein: number;
+  fat: number;
+  carbohydrates: number;
+  vitaminC: number;
+
+  constructor(name: string, image: Resource, category: Category, calories: number, protein: number, fat: number, carbohydrates: number, vitaminC: number) {
+    this.id = `${ NextId++ }`;
+    this.name = name;
+    this.image = image;
+    this.category = category;
+    this.calories = calories;
+    this.protein = protein;
+    this.fat = fat;
+    this.carbohydrates = carbohydrates;
+    this.vitaminC = vitaminC;
+  }
+}
\ No newline at end of file
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/ets/default/model/FoodDataModels.ets b/UI/eTsDrawingAndAnimation/entry/src/main/ets/default/model/FoodDataModels.ets
new file mode 100644
index 0000000000000000000000000000000000000000..71a700f7082a5c3b6f5e8d6ecd9487966698acba
--- /dev/null
+++ b/UI/eTsDrawingAndAnimation/entry/src/main/ets/default/model/FoodDataModels.ets
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2021 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 { FoodData, Category } from './FoodData'
+
+const FoodComposition: any[] = [
+  { 'name': 'Tomato', 'image': $r('app.media.Tomato'), 'category': Category.Vegetable, 'calories': 17, 'protein': 0.9, 'fat': 0.2, 'carbohydrates': 3.9, 'vitaminC': 17.8 },
+  { 'name': 'Walnut', 'image': $r('app.media.Walnut'), 'category': Category.Nut, 'calories': 654 , 'protein': 15, 'fat': 65, 'carbohydrates': 14, 'vitaminC': 1.3 },
+  { 'name': 'Cucumber', 'image': $r('app.media.Cucumber'), 'category': Category.Vegetable, 'calories': 30, 'protein': 3, 'fat': 0, 'carbohydrates': 1.9, 'vitaminC': 2.1 },
+  { 'name': 'Blueberry', 'image': $r('app.media.Blueberry'), 'category': Category.Fruit, 'calories': 57, 'protein': 0.7, 'fat': 0.3, 'carbohydrates': 14, 'vitaminC': 9.7 },
+  { 'name': 'Crab', 'image': $r('app.media.Crab'), 'category': Category.Seafood, 'calories': 97, 'protein': 19, 'fat': 1.5, 'carbohydrates': 0, 'vitaminC': 7.6 },
+  { 'name': 'IceCream', 'image': $r('app.media.IceCream'), 'category': Category.Dessert, 'calories': 207, 'protein': 3.5, 'fat': 11, 'carbohydrates': 24, 'vitaminC': 0.6 },
+  { 'name': 'Onion', 'image': $r('app.media.Onion'), 'category': Category.Vegetable, 'calories': 39, 'protein': 1.1, 'fat': 0.1, 'carbohydrates': 9, 'vitaminC': 7.4 },
+  { 'name': 'Mushroom', 'image': $r('app.media.Mushroom'), 'category': Category.Vegetable, 'calories': 22, 'protein': 3.1, 'fat': 0.3, 'carbohydrates': 3.3, 'vitaminC': 2.1 },
+  { 'name': 'Kiwi', 'image': $r('app.media.Kiwi'), 'category': Category.Fruit, 'calories': 60 , 'protein': 1.1, 'fat': 0.5, 'carbohydrates': 15, 'vitaminC': 20.5 },
+  { 'name': 'Pitaya', 'image': $r('app.media.Pitaya'), 'category': Category.Fruit, 'calories': 60, 'protein': 1.2, 'fat': 0, 'carbohydrates': 10, 'vitaminC': 60.9 },
+  { 'name': 'Avocado', 'image': $r('app.media.Avocado'), 'category': Category.Fruit, 'calories': 160, 'protein': 2, 'fat': 15, 'carbohydrates': 9, 'vitaminC': 10 },
+  { 'name': 'Strawberry', 'image': $r('app.media.Strawberry'), 'category': Category.Fruit, 'calories': 32, 'protein': 0.7, 'fat': 0.3, 'carbohydrates': 8, 'vitaminC': 58.8 }
+]
+
+export function initializeOnStartup(): Array<FoodData> {
+  let FoodDataArray: Array<FoodData> = []
+  FoodComposition.forEach(item => {
+    FoodDataArray.push(new FoodData(item.name, item.image, item.category, item.calories, item.protein, item.fat, item.carbohydrates, item.vitaminC));
+  })
+  return FoodDataArray;
+}
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/ets/default/pages/FoodCategoryList.ets b/UI/eTsDrawingAndAnimation/entry/src/main/ets/default/pages/FoodCategoryList.ets
new file mode 100644
index 0000000000000000000000000000000000000000..6a08c895a6512fd1854cfc96aef815c989f9db40
--- /dev/null
+++ b/UI/eTsDrawingAndAnimation/entry/src/main/ets/default/pages/FoodCategoryList.ets
@@ -0,0 +1,200 @@
+/*
+ * Copyright (c) 2021 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 Curves from '@ohos.curves'
+import router from '@system.router'
+import { Category, FoodData } from '../model/FoodData'
+import { initializeOnStartup } from '../model/FoodDataModels'
+
+@Component
+struct FoodListItem {
+  private foodItem: FoodData
+  build() {
+    Navigator({ target: 'pages/FoodDetail' }) {
+      Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+        Row() {
+          Image(this.foodItem.image)
+            .objectFit(ImageFit.Contain)
+            .autoResize(false)
+            .height(40)
+            .width(40)
+            .sharedTransition(this.foodItem.id, { duration: 1000, curve: Curves.cubicBezier(0.2, 0.2, 0.1, 1.0), delay: 100})
+
+        }
+        .backgroundColor('#FFf1f3f5')
+        .margin({ right: 16 })
+        Text(this.foodItem.name)
+          .fontSize(14)
+          .flexGrow(1)
+        Text(this.foodItem.calories + ' kcal')
+          .fontSize(14)
+      }
+      .height(64)
+    }
+    .params({ foodId: this.foodItem })
+    .margin({ right: 24, left: 32 })
+  }
+}
+
+
+@Component
+struct FoodList {
+  private foodItems: FoodData[]
+  build() {
+    Column() {
+      Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+        Text('Food List')
+          .fontSize(20)
+          .margin({ left: 20 })
+      }
+      .height('7%')
+      .backgroundColor('#FFf1f3f5')
+      List() {
+        ForEach(this.foodItems, item => {
+          ListItem() {
+            FoodListItem({ foodItem: item })
+          }
+        }, item => item.id.toString())
+      }.height('93%')
+    }
+  }
+}
+
+@Component
+struct FoodGridItem {
+  private foodItem: FoodData
+  build() {
+    Column() {
+      Row() {
+        Image(this.foodItem.image)
+          .objectFit(ImageFit.Contain)
+          .height(152)
+          .width('100%')
+          .sharedTransition(this.foodItem.id, { duration: 1000, curve: Curves.cubicBezier(0.2, 0.2, 0.1, 1.0), delay: 100})
+      }.backgroundColor('#FFf1f3f5')
+      Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+        Text(this.foodItem.name)
+          .fontSize(14)
+          .flexGrow(1)
+          .padding({ left: 8 })
+        Text(this.foodItem.calories + 'kcal')
+          .fontSize(14)
+          .margin({ right: 6 })
+      }
+      .height(32)
+      .width('100%')
+      .backgroundColor('#FFe5e5e5')
+    }
+    .height(184)
+    .width('100%')
+    .onClick(() => {
+      router.push({ uri: 'pages/FoodDetail', params: { foodId: this.foodItem } })
+    })
+  }
+}
+
+@Component
+struct FoodGrid {
+  private foodItems: FoodData[]
+  private gridRowTemplate: string = ''
+  private heightValue: number
+
+  aboutToAppear() {
+    var rows = Math.round(this.foodItems.length / 2);
+    this.gridRowTemplate = '1fr '.repeat(rows);
+    this.heightValue = rows * 192 - 8;
+  }
+
+  build() {
+    Scroll() {
+      Grid() {
+        ForEach(this.foodItems, (item: FoodData) => {
+          GridItem() {
+            FoodGridItem({ foodItem: item })
+          }
+        }, (item: FoodData) => item.id.toString())
+      }
+      .rowsTemplate(this.gridRowTemplate)
+      .columnsTemplate('1fr 1fr')
+      .columnsGap(8)
+      .rowsGap(8)
+      .height(this.heightValue)
+    }
+    .scrollBar(BarState.Off)
+    .padding({ left: 16, right: 16 })
+  }
+}
+
+@Component
+struct FoodCategory {
+  private foodItems: FoodData[]
+  build() {
+    Stack() {
+      Tabs() {
+        TabContent() {
+          FoodGrid({ foodItems: this.foodItems })
+        }.tabBar('All')
+
+        TabContent() {
+          FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Vegetable)) })
+        }.tabBar('Vegetable')
+
+        TabContent() {
+          FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Fruit)) })
+        }.tabBar('Fruit')
+
+        TabContent() {
+          FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Nut)) })
+        }.tabBar('Nut')
+
+        TabContent() {
+          FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Seafood)) })
+        }.tabBar('Seafood')
+
+        TabContent() {
+          FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Dessert)) })
+        }.tabBar('Dessert')
+      }
+      .barWidth(280)
+      .barMode(BarMode.Scrollable)
+    }
+  }
+}
+
+@Entry
+@Component
+struct FoodCategoryList {
+  private foodItems: FoodData[] = initializeOnStartup()
+  @State private showList: boolean = false
+
+  build() {
+    Column() {
+      Stack({ alignContent: Alignment.TopEnd }) {
+        if (this.showList) {
+          FoodList({ foodItems: this.foodItems })
+        } else {
+          FoodCategory({ foodItems: this.foodItems })
+        }
+        Image($r('app.media.Switch'))
+          .height(24)
+          .width(24)
+          .margin({ top: 15, right: 10 })
+          .onClick(() => {
+            this.showList = !this.showList
+          })
+      }
+    }.height('100%')
+  }
+}
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/ets/default/pages/FoodDetail.ets b/UI/eTsDrawingAndAnimation/entry/src/main/ets/default/pages/FoodDetail.ets
new file mode 100644
index 0000000000000000000000000000000000000000..09519bad99f0e4f21b3d53621e2f3f5c2493c3b5
--- /dev/null
+++ b/UI/eTsDrawingAndAnimation/entry/src/main/ets/default/pages/FoodDetail.ets
@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2021 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 Curves from '@ohos.curves'
+import router from '@system.router'
+import { FoodData, Category } from '../model/FoodData'
+
+@Component
+struct PageTitle {
+  build() {
+    Flex({ alignItems: ItemAlign.Start }) {
+      Image($r('app.media.Back'))
+        .width(21.8)
+        .height(19.6)
+      Text('Food Detail')
+        .fontSize(21.8)
+        .margin({ left: 17.4 })
+    }
+    .height(61)
+    .backgroundColor('#FFedf2f5')
+    .padding({ top: 13, bottom: 15, left: 28.3 })
+    .onClick(() => {
+      router.back()
+    })
+  }
+}
+
+@Component
+struct FoodImageDisplay {
+  private foodItem: FoodData
+  build() {
+    Stack({ alignContent: Alignment.BottomStart }) {
+      Image(this.foodItem.image)
+        .objectFit(ImageFit.Contain)
+        .sharedTransition(this.foodItem.id, { duration: 1000, curve: Curves.cubicBezier(0.2, 0.2, 0.1, 1.0), delay: 100})
+      Text(this.foodItem.name)
+        .fontSize(26)
+        .fontWeight(500)
+        .margin({ left: 26, bottom: 17.4 })
+    }
+    .backgroundColor('#FFedf2f5')
+    .height(357)
+  }
+}
+
+@Component
+struct ContentTable {
+  private foodItem: FoodData
+  @Builder IngredientItem(title:string, colorValue: string, name: string, value: string) {
+    Flex() {
+      Text(title)
+        .fontSize(17.4)
+        .fontWeight(FontWeight.Bold)
+        .layoutWeight(1)
+      Flex({ alignItems: ItemAlign.Center }) {
+        Circle({ width: 6, height: 6 })
+          .margin({ right: 12 })
+          .fill(colorValue)
+        Text(name)
+          .fontSize(17.4)
+          .flexGrow(1)
+        Text(value)
+          .fontSize(17.4)
+      }
+      .layoutWeight(2)
+    }
+  }
+
+  build() {
+    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
+      this.IngredientItem('Calories', '#FFf54040', 'Calories', this.foodItem.calories + 'kcal')
+      this.IngredientItem('Nutrition', '#FFcccccc', 'Protein', this.foodItem.protein + 'g')
+      this.IngredientItem(' ', '#FFf5d640', 'Fat', this.foodItem.fat + 'g')
+      this.IngredientItem(' ', '#FF9e9eff', 'Carbohydrates', this.foodItem.carbohydrates + 'g')
+      this.IngredientItem(' ', '#FF53f540', 'VitaminC', this.foodItem.vitaminC + 'mg')
+    }
+    .padding({ top: 20, right: 20, left: 20 })
+    .height(250)
+  }
+}
+
+@Entry
+@Component
+struct FoodDetail {
+  private foodItem: FoodData = router.getParams().foodId
+  build() {
+    Column() {
+      Stack({ alignContent: Alignment.TopStart }) {
+        FoodImageDisplay({ foodItem: this.foodItem })
+        PageTitle()
+      }
+      ContentTable({ foodItem: this.foodItem })
+    }
+    .alignItems(HorizontalAlign.Center)
+  }
+}
\ No newline at end of file
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/ets/default/pages/Logo.ets b/UI/eTsDrawingAndAnimation/entry/src/main/ets/default/pages/Logo.ets
new file mode 100644
index 0000000000000000000000000000000000000000..732a83a46ea0137ed6d3ac5f76d27081a503b497
--- /dev/null
+++ b/UI/eTsDrawingAndAnimation/entry/src/main/ets/default/pages/Logo.ets
@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) 2021 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 Curves from '@ohos.curves'
+import router from '@system.router'
+
+@Entry
+@Component
+struct Logo {
+  @State private opacityValue: number = 0
+  @State private scaleValue: number = 0
+  private curve1 = Curves.cubicBezier(0.4, 0, 1, 1)
+  private pathCommands1: string = 'M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z'
+  private pathCommands2: string = 'M270.6 128.1 h48.6 c51.6 0 98.4 21 132.3 54.6 a411 411 0 0 3 -45.6 123 c-25.2 45.6 -56.4 84 -87.6 110.4 a206.1 206.1 0 0 0 -47.7 -288 z'
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Shape() {
+        Path()
+          .commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36')
+          .fill(Color.White)
+
+        Path()
+          .commands(this.pathCommands1)
+          .fill('none')
+          .linearGradient({ angle: 30, colors: [['#C4FFA0', 0], ['#ffffff', 1]] })
+          .clip(new Path().commands(this.pathCommands1))
+
+        Path()
+          .commands(this.pathCommands2)
+          .fill('none')
+          .linearGradient({ angle: 50, colors: [['#8CC36A', 0.1], ['#B3EB90', 0.4], ['#ffffff', 0.7]] })
+          .clip(new Path().commands(this.pathCommands2))
+      }
+      .height('630px')
+      .width('630px')
+      .scale({ x: this.scaleValue, y: this.scaleValue })
+      .opacity(this.opacityValue)
+      .onAppear(() => {
+        animateTo({
+          duration: 1000,
+          curve: this.curve1,
+          delay: 100,
+          onFinish: () =>{
+            setTimeout(() => {
+              router.replace({ uri: 'pages/FoodCategoryList' })
+            }, 1000);
+          }
+        }, () => {
+          this.opacityValue = 1
+          this.scaleValue = 1
+        })
+      })
+
+      Text('Healthy Diet')
+        .fontSize(26)
+        .fontColor(Color.White)
+        .margin({ top: 300 })
+
+      Text('Healthy life comes from a balanced diet')
+        .fontSize(17)
+        .fontColor(Color.White)
+        .margin({ top: 4 })
+    }
+    .width('100%')
+    .height('100%')
+    .linearGradient({ angle: 180, colors: [['#BDE895', 0.1], ['#95DE7F', 0.6], ['#7AB967', 1]] })
+  }
+}
\ No newline at end of file
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/java/ohos/samples/etsdrawingandanimation/MainAbility.java b/UI/eTsDrawingAndAnimation/entry/src/main/java/ohos/samples/etsdrawingandanimation/MainAbility.java
new file mode 100644
index 0000000000000000000000000000000000000000..a355c0467c8bfa09469dadd760986c58847e3a78
--- /dev/null
+++ b/UI/eTsDrawingAndAnimation/entry/src/main/java/ohos/samples/etsdrawingandanimation/MainAbility.java
@@ -0,0 +1,16 @@
+package ohos.samples.etsdrawingandanimation;
+
+import ohos.ace.ability.AceAbility;
+import ohos.aafwk.content.Intent;
+
+public class MainAbility extends AceAbility {
+    @Override
+    public void onStart(Intent intent) {
+        super.onStart(intent);
+    }
+
+    @Override
+    public void onStop() {
+        super.onStop();
+    }
+}
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/java/ohos/samples/etsdrawingandanimation/MyApplication.java b/UI/eTsDrawingAndAnimation/entry/src/main/java/ohos/samples/etsdrawingandanimation/MyApplication.java
new file mode 100644
index 0000000000000000000000000000000000000000..6a4de5403d48de75935cbaf14d10e0820b8d88db
--- /dev/null
+++ b/UI/eTsDrawingAndAnimation/entry/src/main/java/ohos/samples/etsdrawingandanimation/MyApplication.java
@@ -0,0 +1,10 @@
+package ohos.samples.etsdrawingandanimation;
+
+import ohos.aafwk.ability.AbilityPackage;
+
+public class MyApplication extends AbilityPackage {
+    @Override
+    public void onInitialize() {
+        super.onInitialize();
+    }
+}
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/resources/base/element/string.json b/UI/eTsDrawingAndAnimation/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..a369e7b5d7acba406c1e7808e88980d71725898d
--- /dev/null
+++ b/UI/eTsDrawingAndAnimation/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "Healthy Diet"
+    },
+    {
+      "name": "mainability_description",
+      "value": "ETS_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/resources/base/media/Logo.png b/UI/eTsDrawingAndAnimation/entry/src/main/resources/base/media/Logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..826c9813215ecaef36f1900b9ad37c93598181c2
Binary files /dev/null and b/UI/eTsDrawingAndAnimation/entry/src/main/resources/base/media/Logo.png differ
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Avocado.png b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Avocado.png
new file mode 100644
index 0000000000000000000000000000000000000000..a2848b10707f0f4f1c6a661826d822e678b3cceb
Binary files /dev/null and b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Avocado.png differ
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Back.png b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Back.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b0806c99ba80ca8bd23cf65f0b8eebf01dcb460
Binary files /dev/null and b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Back.png differ
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Blueberry.png b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Blueberry.png
new file mode 100644
index 0000000000000000000000000000000000000000..a07421e575d4d41e718ace47c16aaba8ac0755ac
Binary files /dev/null and b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Blueberry.png differ
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Crab.png b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Crab.png
new file mode 100644
index 0000000000000000000000000000000000000000..b71a627013711964e4d5d3b271e9311a2b525f65
Binary files /dev/null and b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Crab.png differ
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Cucumber.png b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Cucumber.png
new file mode 100644
index 0000000000000000000000000000000000000000..6dd74778e8d76e29a269fdd0155084292504ef61
Binary files /dev/null and b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Cucumber.png differ
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/IceCream.png b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/IceCream.png
new file mode 100644
index 0000000000000000000000000000000000000000..13a867424f48674c3e95590ec9887d38cd00fbfd
Binary files /dev/null and b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/IceCream.png differ
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Kiwi.png b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Kiwi.png
new file mode 100644
index 0000000000000000000000000000000000000000..f22fb4328a9850ddd526d165964096c1bb9778a7
Binary files /dev/null and b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Kiwi.png differ
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Mushroom.png b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Mushroom.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e984ee10df7a0ff4dae4558f17f2c6c7b89075f
Binary files /dev/null and b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Mushroom.png differ
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Onion.png b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Onion.png
new file mode 100644
index 0000000000000000000000000000000000000000..9c1c5a81c2ff9717df20fcec6a7a8e128b41f1ee
Binary files /dev/null and b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Onion.png differ
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Pitaya.png b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Pitaya.png
new file mode 100644
index 0000000000000000000000000000000000000000..2770b34deb402ab0639e861fb83e4c8a5865bf59
Binary files /dev/null and b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Pitaya.png differ
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Strawberry.png b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Strawberry.png
new file mode 100644
index 0000000000000000000000000000000000000000..a8d239456cdac76fa31e919768151ed6e74cae44
Binary files /dev/null and b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Strawberry.png differ
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Switch.png b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Switch.png
new file mode 100644
index 0000000000000000000000000000000000000000..51aa0fc19aeb19ee0599d09f9802fd1f344818ec
Binary files /dev/null and b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Switch.png differ
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Tomato.png b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Tomato.png
new file mode 100644
index 0000000000000000000000000000000000000000..93ad983d4862485684c34cfcf1632569a13ae5a1
Binary files /dev/null and b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Tomato.png differ
diff --git a/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Walnut.png b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Walnut.png
new file mode 100644
index 0000000000000000000000000000000000000000..8187a4209586dae8522fb494386cc9d64aba95df
Binary files /dev/null and b/UI/eTsDrawingAndAnimation/entry/src/main/resources/phone/media/Walnut.png differ
diff --git a/UI/eTsDrawingAndAnimation/screenshots/device/FoodCategory.png b/UI/eTsDrawingAndAnimation/screenshots/device/FoodCategory.png
new file mode 100644
index 0000000000000000000000000000000000000000..57ee6f14bc67cbab046fe4c197f1f9d4ee50b55f
Binary files /dev/null and b/UI/eTsDrawingAndAnimation/screenshots/device/FoodCategory.png differ
diff --git a/UI/eTsDrawingAndAnimation/screenshots/device/FoodDetail.png b/UI/eTsDrawingAndAnimation/screenshots/device/FoodDetail.png
new file mode 100644
index 0000000000000000000000000000000000000000..1d5e88530d9a0fc53e5995182bfbd567d6a5cdda
Binary files /dev/null and b/UI/eTsDrawingAndAnimation/screenshots/device/FoodDetail.png differ
diff --git a/UI/eTsDrawingAndAnimation/screenshots/device/FoodList.png b/UI/eTsDrawingAndAnimation/screenshots/device/FoodList.png
new file mode 100644
index 0000000000000000000000000000000000000000..89bcc891f2e8de3d86fa1394fce1c6ce175054a2
Binary files /dev/null and b/UI/eTsDrawingAndAnimation/screenshots/device/FoodList.png differ
diff --git a/UI/eTsDrawingAndAnimation/screenshots/device/Logo.png b/UI/eTsDrawingAndAnimation/screenshots/device/Logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..dba8b9a23d9c43b234a541f294c38f00d21d1340
Binary files /dev/null and b/UI/eTsDrawingAndAnimation/screenshots/device/Logo.png differ
diff --git a/UI/eTsDrawingAndAnimation/settings.gradle b/UI/eTsDrawingAndAnimation/settings.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..28d595f2fba0d06b2025da200383d15f87c4e9f0
--- /dev/null
+++ b/UI/eTsDrawingAndAnimation/settings.gradle
@@ -0,0 +1 @@
+include ':entry'