diff --git a/UI/JsFACard/README.md b/UI/JsFACard/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..b9a6d82989cf6ac7a873b5237d7745ba99ef7ef2
--- /dev/null
+++ b/UI/JsFACard/README.md
@@ -0,0 +1,14 @@
+# JS Service Widget Development<a name="EN-US_TOPIC_0000001119874784"></a>
+
+### Introduction<a name="section103mcpsimp"></a>
+
+This sample demonstrates service widgets. Service widgets are used to present important information about apps, allowing users to access desired services instantly via shortcut gestures.
+
+### Usage<a name="section105mcpsimp"></a>
+
+Swipe up the icon of the sample app, select a service widget size, and touch  **ADD TO HOME SCREEN**  to add the service widget to the home screen. Alternatively, touch and hold the sample app icon until  **Service Widgets**  is displayed, touch  **Service Widgets**, select a service widget size, and touch  **ADD TO HOME SCREEN**  to add the service widget to the home screen. You can touch a service widget on the home screen to go to the home page of the sample app.
+
+### Constraints<a name="section118mcpsimp"></a>
+
+This sample can only be run on large-system devices. A maximum of 16 service widgets can be configured for a single app.
+
diff --git a/UI/JsFACard/READNE_zh.md b/UI/JsFACard/READNE_zh.md
new file mode 100644
index 0000000000000000000000000000000000000000..d7d41afc11654362203bfdb8460918b0bdd479e8
--- /dev/null
+++ b/UI/JsFACard/READNE_zh.md
@@ -0,0 +1,14 @@
+# JS 卡片开发<a name="ZH-CN_TOPIC_0000001119874784"></a>
+
+### 简介<a name="section103mcpsimp"></a>
+
+本示例展示了服务卡片功能，通过服务卡片将用户应用程序的重要信息展示在桌面，用户可通过快捷手势使用卡片，以达到服务直达、减少层级跳转的目的。
+
+### 使用说明<a name="section105mcpsimp"></a>
+
+上滑本示例应用图标，选择需要的卡片尺寸添加到屏幕，也可以长按示例应用，等待出现服务卡片字样，点击后选择卡片尺寸，添加到桌面。可以点击在桌面上的卡片进入示例应用的主页面。
+
+### 约束与限制<a name="section118mcpsimp"></a>
+
+本示例仅支持在大型系统上运行，对于同一个应用，最多支持配置16张卡片。
+
diff --git a/UI/JsFACard/build.gradle b/UI/JsFACard/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..91af1ca64995ab365fbf9f4d6b6c9a5f816d163f
--- /dev/null
+++ b/UI/JsFACard/build.gradle
@@ -0,0 +1,36 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+apply plugin: 'com.huawei.ohos.app'
+
+ohos {
+    compileSdkVersion 5
+    defaultConfig {
+        compatibleSdkVersion 4
+    }
+}
+
+buildscript {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+        jcenter()
+    }
+    dependencies {
+        classpath 'com.huawei.ohos:hap:2.4.4.2'
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+        jcenter()
+    }
+}
\ No newline at end of file
diff --git a/UI/JsFACard/entry/build.gradle b/UI/JsFACard/entry/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..83f59debbd68242b503a22270f4378d7843ca204
--- /dev/null
+++ b/UI/JsFACard/entry/build.gradle
@@ -0,0 +1,19 @@
+apply plugin: 'com.huawei.ohos.hap'
+ohos {
+    compileSdkVersion 5
+    defaultConfig {
+        compatibleSdkVersion 4
+    }
+    buildTypes {
+        release {
+            proguardOpt {
+                proguardEnabled false
+                rulesFiles 'proguard-rules.pro'
+            }
+        }
+    }
+}
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
+}
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/config.json b/UI/JsFACard/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..d4649ebc8cb4e20a97f14f2d64c4b356079c2873
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/config.json
@@ -0,0 +1,140 @@
+{
+  "app": {
+    "bundleName": "ohos.samples.jsfacard",
+    "version": {
+      "code": 1000000,
+      "name": "1.0.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "ohos.samples.jsfacard",
+    "name": ".MyApplication",
+    "mainAbility": "ohos.samples.jsfacard.MainAbility",
+    "deviceType": [
+      "default"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry",
+      "installationFree": false
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "name": "ohos.samples.jsfacard.MainAbility",
+        "icon": "$media:icon",
+        "description": "$string:mainability_description",
+        "formsEnabled": true,
+        "label": "$string:entry_MainAbility",
+        "type": "page",
+        "forms": [
+          {
+            "jsComponentName": "jsmusictemplate",
+            "isDefault": true,
+            "formConfigAbility": "ability://ohos.samples.jsfacard.MainAbility",
+            "scheduledUpdateTime": "10:30",
+            "defaultDimension": "2*4",
+            "name": "jsmusictemplate",
+            "description": "This is a service widget",
+            "colorMode": "auto",
+            "type": "JS",
+            "supportDimensions": [
+              "2*4"
+            ],
+            "updateEnabled": true,
+            "updateDuration": 1
+          },
+          {
+            "jsComponentName": "card",
+            "isDefault": false,
+            "formConfigAbility": "ability://ohos.samples.jsfacard.MainAbility",
+            "scheduledUpdateTime": "10:30",
+            "defaultDimension": "2*4",
+            "name": "card",
+            "description": "This is a service widget",
+            "colorMode": "auto",
+            "type": "JS",
+            "supportDimensions": [
+              "2*4"
+            ],
+            "updateEnabled": true,
+            "updateDuration": 1
+          },
+          {
+            "jsComponentName": "jscardtemplate",
+            "isDefault": false,
+            "formConfigAbility": "ability://ohos.samples.jsfacard.MainAbility",
+            "scheduledUpdateTime": "10:30",
+            "defaultDimension": "4*4",
+            "name": "jscardtemplate",
+            "description": "This is a service widget",
+            "colorMode": "auto",
+            "type": "JS",
+            "supportDimensions": [
+              "4*4"
+            ],
+            "updateEnabled": true,
+            "updateDuration": 1
+          }
+        ],
+        "launchType": "standard"
+      }
+    ],
+    "js": [
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": "default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": true
+        }
+      },
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": "card",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": true
+        },
+        "type": "form"
+      },
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": "jscardtemplate",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": true
+        },
+        "type": "form"
+      },
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": "jsmusictemplate",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": true
+        },
+        "type": "form"
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/java/ohos/samples/jsfacard/MainAbility.java b/UI/JsFACard/entry/src/main/java/ohos/samples/jsfacard/MainAbility.java
new file mode 100644
index 0000000000000000000000000000000000000000..a8e10f50492567523db1dc80a1b6c31a4061ad22
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/java/ohos/samples/jsfacard/MainAbility.java
@@ -0,0 +1,85 @@
+/*
+ * 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.
+ */
+
+package ohos.samples.jsfacard;
+
+import ohos.aafwk.ability.FormBindingData;
+import ohos.aafwk.ability.FormException;
+import ohos.aafwk.ability.ProviderFormInfo;
+import ohos.aafwk.content.Intent;
+import ohos.ace.ability.AceAbility;
+import ohos.hiviewdfx.HiLog;
+import ohos.hiviewdfx.HiLogLabel;
+import ohos.utils.zson.ZSONObject;
+
+/**
+ * Main ability
+ *
+ * @since 2021-07-05
+ */
+public class MainAbility extends AceAbility {
+    private static final HiLogLabel TAG = new HiLogLabel(HiLog.DEBUG, 0x0, MainAbility.class.getName());
+
+    private static final String STATUS = "status";
+
+    private static final String PLAY = "play";
+
+    private static final String PAUSE = "pause";
+
+    private static boolean isStatus = true;
+
+    @Override
+    public void onStart(Intent intent) {
+        HiLog.info(TAG, "onStart");
+        super.onStart(intent);
+    }
+
+    @Override
+    protected ProviderFormInfo onCreateForm(Intent intent) {
+        HiLog.info(TAG, "onCreateForm");
+        return super.onCreateForm(intent);
+    }
+
+    @Override
+    protected void onUpdateForm(long formId) {
+        HiLog.info(TAG, "onUpdateForm");
+        super.onUpdateForm(formId);
+    }
+
+    @Override
+    protected void onDeleteForm(long formId) {
+        HiLog.info(TAG, "onDeleteForm: formId=" + formId);
+        super.onDeleteForm(formId);
+    }
+
+    @Override
+    protected void onTriggerFormEvent(long formId, String message) {
+        super.onTriggerFormEvent(formId, message);
+        ZSONObject zsonObject = new ZSONObject();
+        if (isStatus) {
+            zsonObject.put(STATUS, PAUSE);
+            isStatus = false;
+        } else {
+            zsonObject.put(STATUS, PLAY);
+            isStatus = true;
+        }
+        FormBindingData formBindingData = new FormBindingData(zsonObject);
+        try {
+            updateForm(formId, formBindingData);
+        } catch (FormException e) {
+            HiLog.info(TAG, "onTriggerFormEvent:" + e.getMessage());
+        }
+    }
+}
diff --git a/UI/JsFACard/entry/src/main/java/ohos/samples/jsfacard/MyApplication.java b/UI/JsFACard/entry/src/main/java/ohos/samples/jsfacard/MyApplication.java
new file mode 100644
index 0000000000000000000000000000000000000000..1fe528672f947fce0311e030dda7099e7f8c3ff2
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/java/ohos/samples/jsfacard/MyApplication.java
@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+package ohos.samples.jsfacard;
+
+import ohos.aafwk.ability.AbilityPackage;
+
+/**
+ * MyApplication
+ *
+ * @since 2021-07-05
+ */
+public class MyApplication extends AbilityPackage {
+    @Override
+    public void onInitialize() {
+        super.onInitialize();
+    }
+}
diff --git a/UI/JsFACard/entry/src/main/js/card/common/ic_default_blue.svg b/UI/JsFACard/entry/src/main/js/card/common/ic_default_blue.svg
new file mode 100644
index 0000000000000000000000000000000000000000..79fb28c566dd90caa2725bd6841d5bac6c1f262e
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/card/common/ic_default_blue.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px"
+    height="24px"
+    viewBox="0 0 24 24"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>Public/ic_public_list_add_light</title>
+    <desc>Created with Sketch.</desc>
+    <g
+        id="Public/ic_public_list_add_light"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd">
+        <path
+            d="M12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 Z"
+            id="椭圆形"
+            fill="#0A59F7"></path>
+        <path
+            d="M12.75,17.25 C12.75,17.6642136 12.4142136,18 12,18 C11.5857864,18 11.25,17.6642136 11.25,17.25 L11.25,12.749 L6.75,12.75 C6.33578644,12.75 6,12.4142136 6,12 C6,11.5857864 6.33578644,11.25 6.75,11.25 L11.25,11.249 L11.25,6.75 C11.25,6.33578644 11.5857864,6 12,6 C12.4142136,6 12.75,6.33578644 12.75,6.75 L12.75,17.25 Z M13.75,11.25 L17.25,11.25 C17.6642136,11.25 18,11.5857864 18,12 C18,12.4142136 17.6642136,12.75 17.25,12.75 L13.75,12.75 L13.75,11.25 Z"
+            id="形状"
+            fill="#FFFFFF"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/card/common/ic_default_image.png b/UI/JsFACard/entry/src/main/js/card/common/ic_default_image.png
new file mode 100644
index 0000000000000000000000000000000000000000..b1cd3a18c1c2b2406580a4e0a9eebdaf1d0c951c
Binary files /dev/null and b/UI/JsFACard/entry/src/main/js/card/common/ic_default_image.png differ
diff --git a/UI/JsFACard/entry/src/main/js/card/i18n/en-US.json b/UI/JsFACard/entry/src/main/js/card/i18n/en-US.json
new file mode 100644
index 0000000000000000000000000000000000000000..95afaba20b6a7458e2da68f1b41b9bcbeabdc6f5
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/card/i18n/en-US.json
@@ -0,0 +1,6 @@
+{
+  "strings": {
+    "music": "Music",
+    "singer": "Singer"
+  }
+}
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/card/i18n/zh-CN.json b/UI/JsFACard/entry/src/main/js/card/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..f91dfd0066a88ad7d557e797e88d1f82d806b662
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/card/i18n/zh-CN.json
@@ -0,0 +1,6 @@
+{
+  "strings": {
+    "music": "音乐",
+    "singer": "歌手"
+  }
+}
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/card/pages/index/index.css b/UI/JsFACard/entry/src/main/js/card/pages/index/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..5afbbcbd9c738803f33d2609f2bde78d293e4b1f
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/card/pages/index/index.css
@@ -0,0 +1,79 @@
+/*
+ * 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.
+ */
+
+.container {
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+.main-div {
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    padding: 8% 15px;
+    min-height: 126px;
+    max-height: 150px;
+    display-index: 2;
+}
+
+.main-image {
+    width: 126px;
+    aspect-ratio: 1;
+    border-radius: 14px;
+    flex-shrink: 0;
+    display-index: 2;
+}
+
+.right-div {
+    flex-direction: column;
+    margin: 13% 0px 0px;
+    display-index: 1;
+    width: 154px;
+    flex-grow: 1;
+    justify-content: space-evenly;
+}
+
+.bottom-div {
+    flex-direction: column;
+    display-index: 1;
+    height: 100px;
+    padding-start: 12px;
+    padding-end: 12px;
+}
+
+.image-div {
+    justify-content: space-between;
+}
+
+.check-image {
+    width: 30px;
+    aspect-ratio: 1;
+}
+
+.music-text {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 2px;
+}
+
+.singer-text {
+    font-size: 12px;
+    opacity: 0.6;
+    font-weight: normal;
+    margin-bottom: 24px;
+}
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/card/pages/index/index.hml b/UI/JsFACard/entry/src/main/js/card/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..748b13d2201fb4647e94ec3daf9dcd168424ce0d
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/card/pages/index/index.hml
@@ -0,0 +1,42 @@
+<!--
+ 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.
+ -->
+
+<div class="container">
+    <div class="main-div" onclick="activeEvent">
+        <image src="/common/ic_default_image.png" class="main-image"></image>
+        <div class="right-div">
+            <text class="music-text" style="margin-start : 14px; padding-left : 10px;">{{ $t('strings.music') }}</text>
+            <text class="singer-text" style="margin-start : 14px; padding-left : 10px;">{{ $t('strings.singer') }}</text>
+            <div style="justify-content : space-between; margin : 0px 3.8%; padding-left : 10px; width : 100%;">
+                <image src="/common/ic_default_blue.svg" class="check-image"></image>
+                <image src="/common/ic_default_blue.svg" class="check-image"></image>
+                <image src="/common/ic_default_blue.svg" class="check-image"></image>
+                <image src="/common/ic_default_blue.svg" class="check-image"></image>
+                <image src="/common/ic_default_blue.svg" class="check-image"></image>
+            </div>
+        </div>
+    </div>
+    <div class="bottom-div">
+        <text class="music-text">{{ $t('strings.music') }}</text>
+        <text class="singer-text">{{ $t('strings.singer') }}</text>
+        <div class="image-div">
+            <image src="/common/ic_default_blue.svg" class="check-image"></image>
+            <image src="/common/ic_default_blue.svg" class="check-image"></image>
+            <image src="/common/ic_default_blue.svg" class="check-image"></image>
+            <image src="/common/ic_default_blue.svg" class="check-image"></image>
+            <image src="/common/ic_default_blue.svg" class="check-image"></image>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/card/pages/index/index.json b/UI/JsFACard/entry/src/main/js/card/pages/index/index.json
new file mode 100644
index 0000000000000000000000000000000000000000..cf44ac53309b8d5b3e43847b13d51013a7c54c9a
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/card/pages/index/index.json
@@ -0,0 +1,13 @@
+{
+  "data": {},
+  "actions": {
+    "activeEvent": {
+      "action": "router",
+      "bundleName": "ohos.samples.jsfacard",
+      "abilityName": "ohos.samples.jsfacard.MainAbility",
+      "params": {
+        "message": "add detail"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/default/app.js b/UI/JsFACard/entry/src/main/js/default/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..8e47afff13e928a74fdcc01a108e4422404b9ac9
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/default/app.js
@@ -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('AceApplication onCreate');
+    },
+    onDestroy() {
+        console.info('AceApplication onDestroy');
+    }
+};
diff --git a/UI/JsFACard/entry/src/main/js/default/common/images/Wallpaper.png b/UI/JsFACard/entry/src/main/js/default/common/images/Wallpaper.png
new file mode 100644
index 0000000000000000000000000000000000000000..60d4841a80eb20c63de74306cb7f8350d6a85c48
Binary files /dev/null and b/UI/JsFACard/entry/src/main/js/default/common/images/Wallpaper.png differ
diff --git a/UI/JsFACard/entry/src/main/js/default/i18n/en-US.json b/UI/JsFACard/entry/src/main/js/default/i18n/en-US.json
new file mode 100644
index 0000000000000000000000000000000000000000..e63c70d978a3a53be988388c87182f81785e170c
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/default/i18n/en-US.json
@@ -0,0 +1,6 @@
+{
+  "strings": {
+    "hello": "Hello",
+    "world": "World"
+  }
+}
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/default/i18n/zh-CN.json b/UI/JsFACard/entry/src/main/js/default/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..de6ee5748322f44942c1b003319d8e66c837675f
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/default/i18n/zh-CN.json
@@ -0,0 +1,6 @@
+{
+  "strings": {
+    "hello": "您好",
+    "world": "世界"
+  }
+}
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/default/pages/index/index.css b/UI/JsFACard/entry/src/main/js/default/pages/index/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..d40090fe59f3d152a0ca5128bf51369166f65c23
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/default/pages/index/index.css
@@ -0,0 +1,59 @@
+/*
+ * 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.
+ */
+
+.container {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.title {
+    font-size: 40px;
+    color: #000000;
+    opacity: 0.9;
+}
+
+@media screen and (device-type: tablet) and (orientation: landscape) {
+    .title {
+        font-size: 100px;
+    }
+}
+
+@media screen and (device-type: wearable) {
+    .title {
+        font-size: 28px;
+        color: #FFFFFF;
+    }
+}
+
+@media screen and (device-type: tv) {
+    .container {
+        background-image: url("../../common/images/Wallpaper.png");
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+
+    .title {
+        font-size: 100px;
+        color: #FFFFFF;
+    }
+}
+
+@media screen and (device-type: phone) and (orientation: landscape) {
+    .title {
+        font-size: 60px;
+    }
+}
diff --git a/UI/JsFACard/entry/src/main/js/default/pages/index/index.hml b/UI/JsFACard/entry/src/main/js/default/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..1902b8746737ba8bd2fb89d049bc56e01878ce23
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/default/pages/index/index.hml
@@ -0,0 +1,20 @@
+<!--
+ 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.
+ -->
+
+<div class="container">
+    <text class="title">
+        {{ $t('strings.hello') }} {{ title }}
+    </text>
+</div>
diff --git a/UI/JsFACard/entry/src/main/js/default/pages/index/index.js b/UI/JsFACard/entry/src/main/js/default/pages/index/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..63f1dda0335591afcfdb78c38bae73e4dae4c861
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/default/pages/index/index.js
@@ -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 {
+    data: {
+        title: ""
+    },
+    onInit() {
+        this.title = this.$t('strings.world');
+    }
+}
diff --git a/UI/JsFACard/entry/src/main/js/jscardtemplate/common/ic_default_image.png b/UI/JsFACard/entry/src/main/js/jscardtemplate/common/ic_default_image.png
new file mode 100644
index 0000000000000000000000000000000000000000..d26a30caccb7c77a7b37f21b0d819cf7b969bf9c
Binary files /dev/null and b/UI/JsFACard/entry/src/main/js/jscardtemplate/common/ic_default_image.png differ
diff --git a/UI/JsFACard/entry/src/main/js/jscardtemplate/i18n/en-US.json b/UI/JsFACard/entry/src/main/js/jscardtemplate/i18n/en-US.json
new file mode 100644
index 0000000000000000000000000000000000000000..06a27810eba3ed5c5c5b168afcf1645f27e14d15
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/jscardtemplate/i18n/en-US.json
@@ -0,0 +1,8 @@
+{
+  "strings": {
+    "hello": "Hello",
+    "world": "World",
+    "title": "Title",
+    "text": "Text"
+  }
+}
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/jscardtemplate/i18n/zh-CN.json b/UI/JsFACard/entry/src/main/js/jscardtemplate/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..9e396b2954f8d05c54897834f30d5155d3cfcd19
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/jscardtemplate/i18n/zh-CN.json
@@ -0,0 +1,8 @@
+{
+  "strings": {
+    "hello": "您好",
+    "world": "世界",
+    "title": "标题",
+    "text": "文本"
+  }
+}
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/jscardtemplate/pages/index/index.css b/UI/JsFACard/entry/src/main/js/jscardtemplate/pages/index/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..e9c6b9ff37089c645af63d7b939323848e03d15f
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/jscardtemplate/pages/index/index.css
@@ -0,0 +1,73 @@
+/*
+ * 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.
+ */
+
+.container {
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+
+.header-div {
+    width: 100%;
+    height: 50%;
+    flex-shrink: 0;
+    background-color: dodgerblue;
+    border-top-left-radius: 14px;
+    border-top-right-radius: 14px;
+    flex-direction: column;
+    justify-content: flex-end;
+    padding: 12px;
+}
+
+.header-title {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 2px;
+    color: white;
+}
+
+.header-description {
+    font-size: 14px;
+    color: white;
+}
+
+.foot-div {
+    justify-content: space-evenly;
+    align-items: center;
+    width: 100%;
+    height: 50%;
+    flex-direction: row;
+    flex-shrink: 0;
+}
+
+.item-div {
+    flex-direction: column;
+    height: 100%;
+    width: 84px;
+    justify-content: center;
+    align-items: center;
+}
+
+.item-image {
+    width: 84px;
+    height: 126px;
+    border-radius: 14px;
+}
+
+.item-title {
+    font-size: 14px;
+    font-weight: 500;
+    margin-top: 2px;
+}
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/jscardtemplate/pages/index/index.hml b/UI/JsFACard/entry/src/main/js/jscardtemplate/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..da1eab6a4f7e4a6cc5e009fce17f506c8dc85b1a
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/jscardtemplate/pages/index/index.hml
@@ -0,0 +1,43 @@
+<!--
+ 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.
+ -->
+
+<div class="container" onclick="activeEvent">
+    <div class="header-div">
+        <text class="header-title">{{ $t('strings.title') }}</text>
+        <text class="header-description">{{ $t('strings.text') }}</text>
+    </div>
+    <div class="foot-div">
+        <div class="item-div" style="display-index : 5;">
+            <image src="/common/ic_default_image.png" class="item-image"></image>
+            <text class="item-title">{{ $t('strings.title') }}</text>
+        </div>
+        <div class="item-div" style="display-index : 4;">
+            <image src="/common/ic_default_image.png" class="item-image"></image>
+            <text class="item-title">{{ $t('strings.title') }}</text>
+        </div>
+        <div class="item-div" style="display-index : 3;">
+            <image src="/common/ic_default_image.png" class="item-image"></image>
+            <text class="item-title">{{ $t('strings.title') }}</text>
+        </div>
+        <div class="item-div" style="display-index : 2;">
+            <image src="/common/ic_default_image.png" class="item-image"></image>
+            <text class="item-title">{{ $t('strings.title') }}</text>
+        </div>
+        <div class="item-div" style="display-index : 1;">
+            <image src="/common/ic_default_image.png" class="item-image"></image>
+            <text class="item-title">{{ $t('strings.title') }}</text>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/jscardtemplate/pages/index/index.json b/UI/JsFACard/entry/src/main/js/jscardtemplate/pages/index/index.json
new file mode 100644
index 0000000000000000000000000000000000000000..cf44ac53309b8d5b3e43847b13d51013a7c54c9a
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/jscardtemplate/pages/index/index.json
@@ -0,0 +1,13 @@
+{
+  "data": {},
+  "actions": {
+    "activeEvent": {
+      "action": "router",
+      "bundleName": "ohos.samples.jsfacard",
+      "abilityName": "ohos.samples.jsfacard.MainAbility",
+      "params": {
+        "message": "add detail"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/ic_default_image.png b/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/ic_default_image.png
new file mode 100644
index 0000000000000000000000000000000000000000..3af559f74358e9f54aebbb6f765bf9f5f493760e
Binary files /dev/null and b/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/ic_default_image.png differ
diff --git a/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/ic_favor.svg b/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/ic_favor.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4316e98b18cabfb99b6aad5368f32362fa467b12
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/ic_favor.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px"
+    height="24px"
+    viewBox="0 0 24 24"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_favor_filled</title>
+    <defs>
+        <path
+            d="M12.1593726,4.65960664 C12.3223335,4.82303542 12.4951682,4.99703924 12.669858,5.17359602 L13.0193352,5.52773659 C13.5401335,6.05692261 14.0295162,6.56095264 14.2709795,6.82323009 L14.2709795,6.82323009 L14.4130459,6.97910741 C14.690336,7.28681354 15.1645691,7.31147058 15.4722753,7.03418046 C15.7799814,6.75689034 15.8046385,6.28265717 15.5273483,5.97495104 C15.1356849,5.54032602 14.1082843,4.49022482 13.2490364,3.62804287 C15.807302,2.24414079 19.0703432,2.63315168 21.2320021,4.7948106 C23.7381758,7.30098428 23.6296302,11.2079931 21.32375,14.2825 C20.619018,15.2221426 19.5405547,16.3935283 18.1571818,17.7279496 L18.1571818,17.7279496 L18.1107695,17.7725634 C17.4340425,18.4208657 16.2634585,19.4492679 14.5931605,20.8635183 L14.5931605,20.8635183 L13.6095931,21.6924482 C12.6786942,22.4737069 11.3208127,22.4723465 10.391481,21.6892241 C8.11075712,19.7673202 6.58183313,18.4344222 5.79364099,17.6797654 L5.79364099,17.6797654 L5.57218695,17.4649031 C4.31819158,16.2390572 3.3345236,15.1598332 2.67652368,14.2825 C0.370643522,11.2079931 0.262097854,7.30098428 2.76827153,4.7948106 C5.29886894,2.26421319 9.33888554,2.16298929 11.9902365,4.49113891 L11.9902365,4.49113891 L12,4.5 Z"
+            id="path-1"></path>
+    </defs>
+    <g
+        id="Public/ic_public_favor_filled"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd">
+        <mask
+            id="mask-2"
+            fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use
+            id="蒙版"
+            fill="#000000"
+            fill-rule="nonzero"
+            xlink:href="#path-1"></use>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/ic_ranking.svg b/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/ic_ranking.svg
new file mode 100644
index 0000000000000000000000000000000000000000..faa46fc72cf8086e0f34ea99b8fbc00eedcd310b
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/ic_ranking.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    width="24px"
+    height="24px"
+    version="1.1"
+    viewBox="0 0 40 40">
+    <g
+        fill="none"
+        fill-rule="evenodd"
+        stroke="none"
+        stroke-width="1">
+        <circle
+            cx="20"
+            cy="20"
+            r="20"
+            fill="#333" />
+        <g
+            fill="#FFF"
+            transform="translate(10 10)">
+            <rect
+                width="5.556"
+                height="10"
+                x="14.444"
+                y="10"
+                fill-opacity=".6"
+                rx="1.667" />
+            <path d="M11.1111111,0 C12.0315857,-3.91133043e-16 12.7777778,0.746192084 12.7777778,1.66666667 L12.7777778,18.3333333 C12.7777778,19.2538079 12.0315857,20 11.1111111,20 L8.88888889,20 C7.96841431,20 7.22222222,19.2538079 7.22222222,18.3333333 L7.22222222,1.66666667 C7.22222222,0.746192084 7.96841431,8.35222253e-16 8.88888889,0 L11.1111111,0 Z M3.88888889,5 C4.80936347,5 5.55555556,5.74619208 5.55555556,6.66666667 L5.55555556,18.3333333 C5.55555556,19.2538079 4.80936347,20 3.88888889,20 L1.66666667,20 C0.746192084,20 9.30271286e-16,19.2538079 0,18.3333333 L0,6.66666667 C-1.12725625e-16,5.74619208 0.746192084,5 1.66666667,5 L3.88888889,5 Z" />
+        </g>
+    </g>
+</svg>
diff --git a/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/ic_recommend.svg b/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/ic_recommend.svg
new file mode 100644
index 0000000000000000000000000000000000000000..205a88c0405902a92d5e36060eef257e37287cf4
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/ic_recommend.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    width="24px"
+    height="24px"
+    version="1.1"
+    viewBox="0 0 40 40">
+    <g
+        fill="none"
+        fill-rule="evenodd"
+        stroke="none"
+        stroke-width="1">
+        <circle
+            cx="20"
+            cy="20"
+            r="20"
+            fill="#333" />
+        <g
+            fill="#FFF"
+            transform="translate(10.906 7.608)">
+            <path d="M9.77976226,0.958061744 C10.9934579,1.12961318 11.8615296,2.21971612 11.7569852,3.44100951 L11.3905719,7.71905357 L18.4457482,7.71951879 C19.5503177,7.71951879 20.4457482,8.61494929 20.4457482,9.71951879 C20.4457482,9.88118886 20.4261455,10.0422625 20.3873694,10.1992136 L18.396187,18.2587594 C18.0683876,19.5855663 16.8852548,20.5231186 15.5186472,20.5390143 L3.03489202,20.6842186 L2.85857192,20.6811764 L3.378,20.6792847 L4.13,20.6702847 L4.13,7.71928474 L5.56357192,7.71905357 L7.00691388,2.75068401 C7.35652687,1.54653293 8.53822551,0.782575075 9.77976226,0.958061744 Z" />
+            <path
+                fill-opacity=".6"
+                d="M4.13,7.71928474 L4.13,20.6702847 L3.378,20.6792847 L2.84549806,20.680543 C1.27582401,20.6011031 0.0187335993,19.3124656 0.00020291567,17.7193135 L0,10.7195188 C-2.02906125e-16,9.06266454 1.34314575,7.71951879 3,7.71951879 L4.13,7.71928474 Z" />
+        </g>
+    </g>
+</svg>
diff --git a/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/ic_search.svg b/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/ic_search.svg
new file mode 100644
index 0000000000000000000000000000000000000000..81beb56fd3b36415f3afaabe32e5bad38d97fd9c
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/ic_search.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px"
+    height="24px"
+    viewBox="0 0 24 24"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_search_filled</title>
+    <defs>
+        <path
+            d="M17.6179267,16.3277876 L20.8132621,19.5240485 C21.2037864,19.9145728 21.2037864,20.5477378 20.8132621,20.9382621 C20.4227378,21.3287864 19.7895728,21.3287864 19.3990485,20.9382621 L16.189979,17.729164 C16.7142906,17.3140255 17.1931651,16.8440081 17.6179267,16.3277876 Z M10.375,2 C15.0003848,2 18.75,5.74961522 18.75,10.375 C18.75,12.5107968 17.9505141,14.4598636 16.6344856,15.9392571 L16.8468572,15.6909887 C16.7564149,15.8009681 16.6632239,15.9086017 16.5673893,16.0137845 C16.4969337,16.0911028 16.4254201,16.1667191 16.3525335,16.240983 C16.338412,16.2553719 16.3241207,16.2698289 16.3097773,16.2842339 C16.2403031,16.3540107 16.1694244,16.4227398 16.0973523,16.4902097 C16.0802283,16.506238 16.063454,16.5218113 16.046616,16.5373165 C15.9709789,16.6069739 15.8937108,16.6755519 15.8151858,16.7427027 C15.8023252,16.7537003 15.7894477,16.7646456 15.7765366,16.7755526 L15.7332842,16.8118433 C14.2811297,18.021995 12.4130822,18.75 10.375,18.75 C5.74961522,18.75 2,15.0003848 2,10.375 C2,5.74961522 5.74961522,2 10.375,2 Z M10.375,4 C6.85418472,4 4,6.85418472 4,10.375 C4,13.8958153 6.85418472,16.75 10.375,16.75 C13.8958153,16.75 16.75,13.8958153 16.75,10.375 C16.75,6.85418472 13.8958153,4 10.375,4 Z"
+            id="path-1"></path>
+    </defs>
+    <g
+        id="Public/ic_public_search_filled"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd">
+        <mask
+            id="mask-2"
+            fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use
+            id="形状结合"
+            fill="#000000"
+            fill-rule="nonzero"
+            xlink:href="#path-1"></use>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/pause.svg b/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/pause.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ff1be4c8181ee5cf630e102017a18cae92712dfb
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/pause.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    width="32px"
+    height="32px"
+    version="1.1"
+    viewBox="0 0 24 24"
+    >
+    <defs>
+        <path
+            id="uxs-a"
+            d="M12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 Z M12,2.5 C6.75329488,2.5 2.5,6.75329488 2.5,12 C2.5,17.2467051 6.75329488,21.5 12,21.5 C17.2467051,21.5 21.5,17.2467051 21.5,12 C21.5,6.75329488 17.2467051,2.5 12,2.5 Z M9.5,7.5 C10.0522847,7.5 10.5,7.94771525 10.5,8.5 L10.5,15.5 C10.5,16.0522847 10.0522847,16.5 9.5,16.5 C8.94771525,16.5 8.5,16.0522847 8.5,15.5 L8.5,8.5 C8.5,7.94771525 8.94771525,7.5 9.5,7.5 Z M14.5,7.5 C15.0522847,7.5 15.5,7.94771525 15.5,8.5 L15.5,15.5 C15.5,16.0522847 15.0522847,16.5 14.5,16.5 C13.9477153,16.5 13.5,16.0522847 13.5,15.5 L13.5,8.5 C13.5,7.94771525 13.9477153,7.5 14.5,7.5 Z" />
+    </defs>
+    <g
+        fill="none"
+        fill-rule="evenodd"
+        stroke="none"
+        stroke-width="1">
+        <mask
+            id="uxs-b"
+            fill="#fff">
+            <use xlink:href="#uxs-a" />
+        </mask>
+        <use
+            fill="#000"
+            fill-rule="nonzero"
+            xlink:href="#uxs-a" />
+        <rect
+            width="24"
+            height="24"
+            x="0"
+            y="0"
+            mask="url(#uxs-b)" />
+    </g>
+</svg>
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/play.svg b/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/play.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2decbc95faeaf8b29b2fdc643b14814232c3eccd
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/jsmusictemplate/common/play.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px"
+    height="32px"
+    viewBox="0 0 24 24"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_play_norm</title>
+    <defs>
+        <path
+            d="M12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 Z M12,2.5 C6.75329488,2.5 2.5,6.75329488 2.5,12 C2.5,17.2467051 6.75329488,21.5 12,21.5 C17.2467051,21.5 21.5,17.2467051 21.5,12 C21.5,6.75329488 17.2467051,2.5 12,2.5 Z M16.1490452,13.0797236 L10.8798388,16.1534274 C10.2835239,16.5012777 9.51812673,16.2998574 9.17027637,15.7035425 C9.0587605,15.5123725 9,15.295022 9,15.0737038 L9,8.92629625 C9,8.23594031 9.55964406,7.67629625 10.25,7.67629625 C10.4713183,7.67629625 10.6886687,7.73505675 10.8798388,7.84657262 L16.1490452,10.9202764 C16.7453601,11.2681267 16.9467804,12.0335239 16.5989301,12.6298388 C16.4902816,12.8160933 16.3352998,12.9710751 16.1490452,13.0797236 Z"
+            id="path-1"></path>
+    </defs>
+    <g
+        id="Public/ic_public_play_norm"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd">
+        <mask
+            id="mask-2"
+            fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use
+            id="形状结合"
+            fill="#000000"
+            fill-rule="nonzero"
+            xlink:href="#path-1"></use>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/jsmusictemplate/i18n/en-US.json b/UI/JsFACard/entry/src/main/js/jsmusictemplate/i18n/en-US.json
new file mode 100644
index 0000000000000000000000000000000000000000..fe5f405e2084dcbda33caaa669b899a2319d1e7c
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/jsmusictemplate/i18n/en-US.json
@@ -0,0 +1,8 @@
+{
+  "strings": {
+    "search": "search",
+    "favor": "favor",
+    "recommend": "search",
+    "ranking": "favor"
+  }
+}
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/jsmusictemplate/i18n/zh-CN.json b/UI/JsFACard/entry/src/main/js/jsmusictemplate/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..58ba2a5b8fe8166c7911f51a5a842f4ff692a99f
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/jsmusictemplate/i18n/zh-CN.json
@@ -0,0 +1,8 @@
+{
+  "strings": {
+    "search": "搜索",
+    "favor": "喜欢",
+    "recommend": "推荐",
+    "ranking": "排行"
+  }
+}
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/jsmusictemplate/pages/index/index.css b/UI/JsFACard/entry/src/main/js/jsmusictemplate/pages/index/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..b8bd80ecb76510c01bce4896e81bc84ef3f71b22
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/jsmusictemplate/pages/index/index.css
@@ -0,0 +1,116 @@
+/*
+ * 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.
+ */
+
+.background {
+    width: 100%;
+    height: 100%;
+    background-image: url("/common/ic_default_image.png");
+}
+
+.container {
+    width: 100%;
+    height: 100%;
+    background-color: #4D000000;
+    align-items: center;
+    backdrop-filter: blur(2px);
+    padding: 12px 0px 0px 12px;
+}
+
+.cover-image {
+    flex-shrink: 0;
+    flex-weight: 3;
+    min-width: 126px;
+    margin-right: 12px;
+    height: 100%;
+    margin-bottom: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+}
+
+.default_image {
+    border-radius: 14px;
+}
+
+.status-image {
+    width: 32px;
+    height: 32px;
+}
+
+.absolute-text {
+    font-size: 16px;
+    color: white;
+    position: absolute;
+    left: 12px;
+    bottom: 18px;
+}
+
+.absolute-button {
+    color: white;
+    position: absolute;
+    left: 12px;
+    bottom: 18px;
+}
+
+.main-div {
+    flex-direction: column;
+    flex-weight: 2;
+    min-width: 75px;
+    margin-right: 12px;
+    justify-content: space-between;
+}
+
+.wrap-div {
+    flex-weight: 1;
+    margin-bottom: 12px;
+    background-color: #19FFFFFF;
+    border-radius: 14px;
+    width: 100%;
+    min-height: 46px;
+    flex-wrap: wrap;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+}
+
+.image-div {
+    width: 24px;
+    aspect-ratio: 1;
+    flex-shrink: 0;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+}
+
+.image-text {
+    font-size: 12px;
+    color: white;
+    text-align: center;
+    margin: 0px 12px;
+}
+
+.large-display-index {
+    display-index: 3;
+}
+
+.medium-display-index {
+    display-index: 2;
+}
+
+.small-display-index {
+    display-index: 1;
+}
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/jsmusictemplate/pages/index/index.hml b/UI/JsFACard/entry/src/main/js/jsmusictemplate/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..ffb67320bc886addf90a5b61ec1abb6f5b0eac5e
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/jsmusictemplate/pages/index/index.hml
@@ -0,0 +1,60 @@
+<!--
+ 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.
+ -->
+
+<div class="background">
+    <div class="container">
+        <stack class="large-display-index cover-image">
+            <image src="/common/ic_default_image.png" class="default_image"></image>
+            <image src="/common/{{ status }}.svg" onclick="messageEvent" class="status-image"></image>
+        </stack>
+        <div class="main-div medium-display-index">
+            <div class="wrap-div medium-display-index">
+                <image src="/common/ic_search.svg" class="image-div"></image>
+                <text class="image-text">{{ $t('strings.search') }}</text>
+            </div>
+            <div class="wrap-div medium-display-index">
+                <image src="/common/ic_favor.svg" class="image-div"></image>
+                <text class="image-text">{{ $t('strings.favor') }}</text>
+            </div>
+            <div class="wrap-div small-display-index">
+                <image src="/common/ic_ranking.svg" class="image-div"></image>
+                <text class="image-text">{{ $t('strings.ranking') }}</text>
+            </div>
+            <div class="wrap-div small-display-index">
+                <image src="/common/ic_recommend.svg" class="image-div"></image>
+                <text class="image-text">{{ $t('strings.recommend') }}</text>
+            </div>
+        </div>
+
+        <div class="main-div small-display-index">
+            <div class="wrap-div medium-display-index">
+                <image src="/common/ic_ranking.svg" class="image-div"></image>
+                <text class="image-text">{{ $t('strings.ranking') }}</text>
+            </div>
+            <div class="wrap-div medium-display-index">
+                <image src="/common/ic_recommend.svg" class="image-div"></image>
+                <text class="image-text">{{ $t('strings.recommend') }}</text>
+            </div>
+            <div class="wrap-div small-display-index">
+                <image src="/common/ic_favor.svg" class="image-div"></image>
+                <text class="image-text">{{ $t('strings.favor') }}</text>
+            </div>
+            <div class="wrap-div small-display-index">
+                <image src="/common/ic_search.svg" class="image-div"></image>
+                <text class="image-text">{{ $t('strings.search') }}</text>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/js/jsmusictemplate/pages/index/index.json b/UI/JsFACard/entry/src/main/js/jsmusictemplate/pages/index/index.json
new file mode 100644
index 0000000000000000000000000000000000000000..f07bbdec9fa4f1315ee359cafdbe8e54d4a9a48b
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/js/jsmusictemplate/pages/index/index.json
@@ -0,0 +1,13 @@
+{
+  "data": {
+    "status": "play"
+  },
+  "actions": {
+    "messageEvent": {
+      "action": "message",
+      "params": {
+        "message": "music change status"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/resources/base/element/string.json b/UI/JsFACard/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..cc629eb54781858d04e70e3a3f6b1ce836ea21bf
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "JsFACard"
+    },
+    {
+      "name": "mainability_description",
+      "value": "JS card example"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/resources/base/layout/immersion_widget.xml b/UI/JsFACard/entry/src/main/resources/base/layout/immersion_widget.xml
new file mode 100644
index 0000000000000000000000000000000000000000..949296d69eccefed016d5bcb8941553e55e310b9
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/resources/base/layout/immersion_widget.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+<DirectionalLayout
+    xmlns:ohos="http://schemas.huawei.com/res/ohos"
+    ohos:height="match_parent"
+    ohos:orientation="vertical"
+    ohos:width="match_parent">
+
+    <Text
+        ohos:height="match_parent"
+        ohos:id="$+id:text_hello"
+        ohos:layout_alignment="center"
+        ohos:text_alignment="center"
+        ohos:text_size="50"
+        ohos:width="match_parent" />
+</DirectionalLayout>
\ No newline at end of file
diff --git a/UI/JsFACard/entry/src/main/resources/base/media/icon.png b/UI/JsFACard/entry/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/UI/JsFACard/entry/src/main/resources/base/media/icon.png differ
diff --git a/UI/JsFACard/entry/src/main/resources/en/element/string.json b/UI/JsFACard/entry/src/main/resources/en/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..7c414e340c665376d623e255c141f00c5bb95137
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/resources/en/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "JsFACard"
+    },
+    {
+      "name": "mainability_description",
+      "value": "JS card example"
+    }
+  ]
+}
diff --git a/UI/JsFACard/entry/src/main/resources/zh/element/string.json b/UI/JsFACard/entry/src/main/resources/zh/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..1ac418b8183186082fff4465f96c80acb26337bb
--- /dev/null
+++ b/UI/JsFACard/entry/src/main/resources/zh/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "Js卡片"
+    },
+    {
+      "name": "mainability_description",
+      "value": "JS卡片示例"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/UI/JsFACard/screenshots/device/Card.png b/UI/JsFACard/screenshots/device/Card.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb083b0528a2ef53f0a34f8ebca66e458d782d89
Binary files /dev/null and b/UI/JsFACard/screenshots/device/Card.png differ
diff --git a/UI/JsFACard/screenshots/device/JsCardTemplate.png b/UI/JsFACard/screenshots/device/JsCardTemplate.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb083b0528a2ef53f0a34f8ebca66e458d782d89
Binary files /dev/null and b/UI/JsFACard/screenshots/device/JsCardTemplate.png differ
diff --git a/UI/JsFACard/screenshots/device/JsMusicTemplate.png b/UI/JsFACard/screenshots/device/JsMusicTemplate.png
new file mode 100644
index 0000000000000000000000000000000000000000..9cdd1d176c58168c66b4c7ff0247f1e47f69c620
Binary files /dev/null and b/UI/JsFACard/screenshots/device/JsMusicTemplate.png differ
diff --git a/UI/JsFACard/settings.gradle b/UI/JsFACard/settings.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..4773db73233a570c2d0c01a22e75321acfbf7a07
--- /dev/null
+++ b/UI/JsFACard/settings.gradle
@@ -0,0 +1 @@
+include ':entry'