diff --git a/README.en.md b/README.en.md
index 56685eaebf56e84ce66c42cfcf369877c740811c..3e1eb6e265586b8b6e99674d0f5f361b10b0e84a 100644
--- a/README.en.md
+++ b/README.en.md
@@ -1,6 +1,6 @@
 # Music Album
 
-### Introduction
+## Project Introduction
 
 This codelab implements music album pages based on the adaptive layout and responsive layout, achieving one-time development for multi-device deployment.
 
@@ -16,7 +16,12 @@ The figure shows the effect on the tablet.
 
 ![](screenshots/device/pad.en.png)
 
-### How to Use
+The figure shows the effect on the wearable.
+
+<img src="./screenshots/device/wearable.png" width="320">
+
+
+## How to Use
 
 1. Install and open an app on a mobile phone, foldable phone, or tablet. The responsive layout and adaptive layout are used to display different effects on the app pages over different devices.
 2. Touch the Play/Pause, Previous, or Next icon on the screen to control music playback.
@@ -24,13 +29,13 @@ The figure shows the effect on the tablet.
 4. Tap the comment button on the page to go to the corresponding comment page.
 5. Other buttons do not have actual tap events or functions.
 
-### Permissions
+## Permissions
 
 N/A
 
-### Constraints
+## Constraints
 
-1. The sample is only supported on Huawei phones with standard systems.
-2. HarmonyOS: HarmonyOS 5.0.0 Release or later.
-3. DevEco Studio: DevEco Studio 5.0.0 Release or later.
-4. HarmonyOS SDK: HarmonyOS 5.0.0 Release SDK or later.
+1. The sample is only supported on standard systems and is compatible with the following devices: Huawei smartphones, tablets, PCs/2in1s, and smart wearables.
+2. HarmonyOS: HarmonyOS 5.1.0 Release or later.
+3. DevEco Studio: DevEco Studio 5.1.0 Release or later.
+4. HarmonyOS SDK: HarmonyOS 5.1.0 Release SDK or later.
diff --git a/README.md b/README.md
index 17c075c2b843df793450a416e2f65f914897e68c..c8fa3fffc6ffecd631fea269327209143dc85950 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # 多设备音乐界面
 
-### 简介
+## 项目简介
 
 基于自适应和响应式布局，实现一次开发、多端部署音乐专辑。
 
@@ -16,21 +16,26 @@
 
 ![](screenshots/device/pad.png)
 
-### 使用说明
+智能穿戴效果图如下：
 
-1. 分别在手机、折叠屏、平板安装并打开应用，不同设备的应用页面通过响应式布局和自适应布局呈现不同的效果。
+<img src="./screenshots/device/wearable.png" width="320">
+
+
+## 使用说明
+
+1. 分别在手机、折叠屏、平板、智能穿戴安装并打开应用，不同设备的应用页面通过响应式布局和自适应布局呈现不同的效果。
 2. 点击界面上播放/暂停、上一首、下一首图标控制音乐播放功能。
 3. 点击界面上播放控制区空白处或列表歌曲跳转到播放页面。
 4. 点击界面上评论按钮跳转到对应的评论页面。
 5. 其他按钮无实际点击事件或功能。
 
-### 相关权限
+## 相关权限
 
 不涉及
 
-### 约束与限制
+## 约束与限制
 
-1. 本示例仅支持标准系统上运行，支持设备：华为手机。
-2. HarmonyOS系统：HarmonyOS 5.0.0 Release及以上。
-3. DevEco Studio版本：DevEco Studio 5.0.0 Release及以上。
-4. HarmonyOS SDK版本：HarmonyOS 5.0.0 Release SDK及以上。
\ No newline at end of file
+1. 本示例仅支持标准系统上运行，支持设备：华为手机、平板、PC/2in1、智能穿戴。
+2. HarmonyOS系统：HarmonyOS 5.1.0 Release及以上。
+3. DevEco Studio版本：DevEco Studio 5.1.0 Release及以上。
+4. HarmonyOS SDK版本：HarmonyOS 5.1.0 Release SDK及以上。
\ No newline at end of file
diff --git a/build-profile.json5 b/build-profile.json5
index 146e5bd23f2d3904774233687b69066f0beddca1..87aa30168395a8a5e8a7998f74923c2004140ee9 100644
--- a/build-profile.json5
+++ b/build-profile.json5
@@ -5,8 +5,9 @@
       {
         "name": "default",
         "signingConfig": "default",
-        "compatibleSdkVersion": "5.0.0(12)",
-        "runtimeOS": "HarmonyOS"
+        "compatibleSdkVersion": "5.1.0(18)",
+        "runtimeOS": "HarmonyOS",
+        "targetSdkVersion": "5.1.0(18)"
       }
     ],
     "buildModeSet": [
@@ -74,6 +75,18 @@
     {
       "name": "constantsCommon",
       "srcPath": "./common/constantsCommon"
+    },
+    {
+      "name": "watch",
+      "srcPath": "./products/watch",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
     }
   ]
 }
\ No newline at end of file
diff --git a/common/mediaCommon/src/main/ets/utils/BackgroundUtil.ets b/common/mediaCommon/src/main/ets/utils/BackgroundUtil.ets
index 1ac92b37f02f31b7492d9b4eedb320bb0a450f93..74715949ebd97426464acd26444f135ac0d53bee 100644
--- a/common/mediaCommon/src/main/ets/utils/BackgroundUtil.ets
+++ b/common/mediaCommon/src/main/ets/utils/BackgroundUtil.ets
@@ -27,7 +27,7 @@ export class BackgroundUtil {
   public static startContinuousTask(context?: common.UIAbilityContext): void {
     if (!context) {
       Logger.error('this avPlayer: ', `context undefined`);
-      return
+      return;
     }
     let wantAgentInfo: wantAgent.WantAgentInfo = {
       wants: [
diff --git a/common/mediaCommon/src/main/ets/utils/BreakpointSystem.ets b/common/mediaCommon/src/main/ets/utils/BreakpointSystem.ets
index e1a5789bf1ad5e9f625c222fa741adea9454d318..2c1cdd2f998e7c7e2f4573042fb7b4142fdd2634 100644
--- a/common/mediaCommon/src/main/ets/utils/BreakpointSystem.ets
+++ b/common/mediaCommon/src/main/ets/utils/BreakpointSystem.ets
@@ -60,17 +60,17 @@ export class BreakpointSystem {
     if (mediaQueryResult.matches) {
       this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_SM);
     }
-  }
+  };
   private isBreakpointMD = (mediaQueryResult: mediaquery.MediaQueryResult): void => {
     if (mediaQueryResult.matches) {
       this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_MD);
     }
-  }
+  };
   private isBreakpointLG = (mediaQueryResult: mediaquery.MediaQueryResult): void => {
     if (mediaQueryResult.matches) {
       this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_LG);
     }
-  }
+  };
 
   public register(): void {
     this.smListener = uiContext?.getMediaQuery().matchMediaSync(BreakpointConstants.RANGE_SM);
diff --git a/common/mediaCommon/src/main/ets/utils/MediaService.ets b/common/mediaCommon/src/main/ets/utils/MediaService.ets
index 424268401b4b39b9a79454174807713330189582..5b65c2d919af606e5cf5cf086eaef35015d27dbc 100644
--- a/common/mediaCommon/src/main/ets/utils/MediaService.ets
+++ b/common/mediaCommon/src/main/ets/utils/MediaService.ets
@@ -46,6 +46,7 @@ export class MediaService {
   private songList: SongItem[] = [];
   private formIds: string[] = [];
   private isCurrent: boolean = true;
+  private isNeedPlay: boolean = true;
 
   private seekCall: (seekDoneTime: number) => void = (seekDoneTime: number) => {
     this.isCurrent = true;
@@ -97,10 +98,11 @@ export class MediaService {
         this.isPrepared = true;
         AppStorage.setOrCreate('totalTime', MediaTools.msToCountdownTime(this.getDuration()));
         AppStorage.setOrCreate('progressMax', this.getDuration());
-        if (this.avPlayer) {
+        if (this.avPlayer && this.isNeedPlay) {
           this.avPlayer.play();
         }
         this.setAVMetadata();
+        this.isNeedPlay = true;
         Logger.info(TAG, 'AVPlayer prepared succeeded.');
         break;
       case 'playing':
@@ -155,6 +157,10 @@ export class MediaService {
     Logger.info(TAG, `on playPrevious , do playPrevious task`);
     this.playPrevious();
   };
+  private volumeChangeCall: (volume: number) => void = (volume: number) => {
+    Logger.info(TAG, `on volumeChangeCall, do volumeChange task`);
+    AppStorage.setOrCreate('volume', volume);
+  };
 
   constructor() {
     let list: SongItem[] | undefined = AppStorage.get('songList');
@@ -182,8 +188,8 @@ export class MediaService {
         this.createSession();
       }
     }) .catch((error: BusinessError) => {
-      Logger.error(TAG, 'this avPlayer: ', `catch error happened,error code is ${error.code}`)
-    })
+      Logger.error(TAG, 'this avPlayer: ', `catch error happened,error code is ${error.code}`);
+    });
   }
 
   private setAVPlayerCallback() {
@@ -196,7 +202,9 @@ export class MediaService {
 
     this.avPlayer.on('timeUpdate', this.updateTimeCall);
 
-    this.avPlayer.on('stateChange', this.stateCall)
+    this.avPlayer.on('stateChange', this.stateCall);
+
+    this.avPlayer.on('volumeChange', this.volumeChangeCall);
   }
 
   async createSession() {
@@ -217,12 +225,12 @@ export class MediaService {
       operationType: wantAgent.OperationType.START_ABILITIES,
       requestCode: 0,
       wantAgentFlags: [wantAgent.WantAgentFlags.UPDATE_PRESENT_FLAG]
-    }
+    };
     wantAgent.getWantAgent(wantAgentInfo).then((agent) => {
       if (this.session) {
         this.session.setLaunchAbility(agent);
       }
-    })
+    });
     this.setListenerForMesFromController();
   }
 
@@ -278,8 +286,9 @@ export class MediaService {
    * Play music by index.
    *
    * @param musicIndex
+   * @param isNeedPlay
    */
-  async loadAssent(musicIndex: number) {
+  async loadAssent(musicIndex: number, loadOnly?: boolean) {
     if (musicIndex >= this.songList.length) {
       Logger.error(TAG, `current musicIndex ${musicIndex}`);
       return;
@@ -291,6 +300,9 @@ export class MediaService {
       this.songItem = await this.songItemBuilder.build(this.songList[this.musicIndex]);
       let url = this.songItemBuilder.getRealUrl();
       if (url) {
+        if (loadOnly) {
+          this.isNeedPlay = false;
+        }
         let avFileDescriptor: media.AVFileDescriptor = { fd: url.fd, offset: url.offset, length: url.length };
         this.avPlayer.fdSrc = avFileDescriptor;
         Logger.info(TAG, 'loadAsset avPlayer.url:' + this.avPlayer.fdSrc);
@@ -372,7 +384,7 @@ export class MediaService {
     if (this.avPlayer) {
       this.avPlayer.prepare().then(() => {
       }).catch((error: BusinessError) => {
-        Logger.error(TAG, `start error ${JSON.stringify(error)}`)
+        Logger.error(TAG, `start error ${JSON.stringify(error)}`);
         this.state = AudioPlayerState.ERROR;
         this.updateIsPlay(false);
         this.isPrepared = false;
@@ -394,7 +406,7 @@ export class MediaService {
         this.seek(this.getCurrentTime());
         this.updateIsPlay(true);
         this.state = AudioPlayerState.PLAY;
-      })
+      });
     }
   }
 
@@ -589,7 +601,7 @@ export class MediaService {
         musicCover: this.songList[this.musicIndex].label,
         musicSinger: this.songList[this.musicIndex].singer,
         cardSongList: cardSongList
-      }
+      };
       let formInfo = formBindingData.createFormBindingData(formData);
 
       this.formIds.forEach(formId => {
@@ -600,8 +612,8 @@ export class MediaService {
           if (error.code === SongConstants.ID_NO_EXIT && this.context) {
             PreferencesUtil.getInstance().removeFormId(this.context, formId);
           }
-        })
-      })
+        });
+      });
     } catch (error) {
       Logger.error(TAG, `updateCardData err: ${(error as BusinessError).code}`);
     }
@@ -617,7 +629,7 @@ export class MediaService {
     }
     let formData: Record<string, boolean> = {
       'isPlay': false
-    }
+    };
     let formInfo = formBindingData.createFormBindingData(formData);
     for (let index = 0; index < this.formIds.length; index++) {
       await formProvider.updateForm(this.formIds[index], formInfo);
diff --git a/common/mediaCommon/src/main/ets/utils/PreferencesUtil.ets b/common/mediaCommon/src/main/ets/utils/PreferencesUtil.ets
index be10d451eaf9a941edb60ff77a7e7dbd2520ae43..2dc7dcbc44ac7e240b19a282cb6d3120e8e962a6 100644
--- a/common/mediaCommon/src/main/ets/utils/PreferencesUtil.ets
+++ b/common/mediaCommon/src/main/ets/utils/PreferencesUtil.ets
@@ -40,8 +40,8 @@ export class PreferencesUtil {
           return;
         }
         resolve(pref);
-      })
-    })
+      });
+    });
   }
 
   preferencesFlush(preferences: preferences.Preferences) {
@@ -49,7 +49,7 @@ export class PreferencesUtil {
       if (err) {
         Logger.error(TAG, `Failed to flush. Code:${err.code}, message:${err.message}`);
       }
-    })
+    });
   }
 
   preferencesPut(preferences: preferences.Preferences, formIds: Array<string>): Promise<boolean> {
@@ -63,7 +63,7 @@ export class PreferencesUtil {
           }
           Logger.info(TAG, `preferencesPut succeed,formIds: ${JSON.stringify(formIds)}`);
           resolve(true);
-        })
+        });
       } catch (error) {
         Logger.error(TAG, `Failed to put data. Code: ${(error as BusinessError).code},
         message:${(error as BusinessError).message}`);
@@ -81,7 +81,7 @@ export class PreferencesUtil {
         }
         resolve(value);
       });
-    })
+    });
   }
 
   removePreferencesFromCache(context: Context): void {
@@ -104,13 +104,13 @@ export class PreferencesUtil {
           }
           resolve(value as Array<string>);
           Logger.info(TAG, `Succeeded in getting value of 'formIds'. val: ${value}.`);
-        })
-      })
+        });
+      });
     } catch (error) {
       Logger.error(TAG, `WANG Failed to get value of 'formIds'. Code:${(error as BusinessError).code},
        message:${(error as BusinessError).message}`);
     }
-    return new Promise((resolve, reject) => {})
+    return new Promise((resolve, reject) => {});
   }
 
   async addFormId(context: Context, formId: string) {
diff --git a/common/mediaCommon/src/main/ets/utils/SongItemBuilder.ets b/common/mediaCommon/src/main/ets/utils/SongItemBuilder.ets
index 500224b53738fdc28a3c95c956cd71bf6e208b5b..cd01303505cdd73b94d6010799447728175f6257 100644
--- a/common/mediaCommon/src/main/ets/utils/SongItemBuilder.ets
+++ b/common/mediaCommon/src/main/ets/utils/SongItemBuilder.ets
@@ -32,18 +32,18 @@ export default class SongItemBuilder {
     let rawfileFd = await this.context.resourceManager.getRawFd(songItem.src)
       .catch((error: BusinessError) => {
         Logger.error(`resourceManager error code ${error.code} message ${error.message}`);
-      })
+      });
     if (rawfileFd) {
       this.realUrl = rawfileFd;
     } else {
-      Logger.error('get rawfileFd failed')
+      Logger.error('get rawfileFd failed');
     }
     Logger.info('MediaAssetBuilder build realUrl:' + this.realUrl);
     return this.songItem;
   }
 
   public getRealUrl(): resourceManager.RawFileDescriptor | undefined {
-    Logger.info(`url ${this.realUrl}`)
+    Logger.info(`url ${this.realUrl}`);
     return this.realUrl;
   }
 
diff --git a/common/mediaCommon/src/main/ets/viewmodel/MusicData.ets b/common/mediaCommon/src/main/ets/viewmodel/MusicData.ets
index c99528f39c427e2c513ba6c1c1410661f907e9d4..67e8a98f668cd4aff532f493b3a2cb97151d6a82 100644
--- a/common/mediaCommon/src/main/ets/viewmodel/MusicData.ets
+++ b/common/mediaCommon/src/main/ets/viewmodel/MusicData.ets
@@ -36,4 +36,4 @@ enum AudioPlayerState {
   UNKNOWN
 }
 
-export { MusicPlayMode, AudioPlayerState }
\ No newline at end of file
+export { MusicPlayMode, AudioPlayerState };
\ No newline at end of file
diff --git a/features/live/src/main/ets/view/LiveList.ets b/features/live/src/main/ets/view/LiveList.ets
index df4f8b48759614b5881e9b0d88a5a8bb65c2ec4d..74f778cfa706bb09292059e47aedd68cd1509bda 100644
--- a/features/live/src/main/ets/view/LiveList.ets
+++ b/features/live/src/main/ets/view/LiveList.ets
@@ -37,7 +37,7 @@ export struct LiveList {
         Scroll(this.scroller) {
           Column() {
             ForEach(this.liveStreams, (item: LiveStream, index: number) => {
-              this.LiveItem(item, index)
+              this.LiveItem(item, index);
             }, (item: LiveStream, index: number) => index + JSON.stringify(item))
           }
           .width(LiveConstants.FULL_WIDTH_PERCENT)
diff --git a/features/musicComment/src/main/ets/view/MusicCommentPage.ets b/features/musicComment/src/main/ets/view/MusicCommentPage.ets
index 4a09f627e82a0ee26d61a0cd6d3afb6e4aae12dc..a95d12e8df53ed387b10c923be1ec3838fcb7f5f 100644
--- a/features/musicComment/src/main/ets/view/MusicCommentPage.ets
+++ b/features/musicComment/src/main/ets/view/MusicCommentPage.ets
@@ -84,7 +84,7 @@ export struct MusicCommentPage {
                 $r('app.float.margin_right_sm') : $r('app.float.margin_right')
             })
 
-          this.ShowTitle($r('app.string.wonderful_comment'))
+          this.ShowTitle($r('app.string.wonderful_comment'));
 
           List() {
             ForEach(this.wonderfulComment, (comment: Comment, index?: number) => {
@@ -139,7 +139,7 @@ export struct MusicCommentPage {
             $r('app.float.margin_right_sm') : $r('app.float.margin_right_list')
           })
 
-          this.ShowTitle($r('app.string.new_comment'))
+          this.ShowTitle($r('app.string.new_comment'));
 
           List() {
             ForEach(this.newComment, (comment: Comment) => {
diff --git a/features/musicList/Index.ets b/features/musicList/Index.ets
index 917bff724095291c5613e4b6fb5c6d40a5c5aa16..c91b68b13ef892f0810c9fb21afb14e6f0090ea1 100644
--- a/features/musicList/Index.ets
+++ b/features/musicList/Index.ets
@@ -2,3 +2,4 @@ export { Content } from './src/main/ets/components/ListContent';
 export { Header } from './src/main/ets/components/Header';
 export { Player } from './src/main/ets/components/Player';
 export { MusicListPage } from './src/main/ets/view/MusicListPage';
+export {songList} from '../musicList/src/main/ets/viewmodel/SongListData';
\ No newline at end of file
diff --git a/features/musicList/src/main/ets/components/AlbumComponent.ets b/features/musicList/src/main/ets/components/AlbumComponent.ets
index 47bb2eaa741c6ed2b8c6836496ab601ef837e02e..f6b8f56e94d493880afecaad80ed3c6afd0c1586 100644
--- a/features/musicList/src/main/ets/components/AlbumComponent.ets
+++ b/features/musicList/src/main/ets/components/AlbumComponent.ets
@@ -140,19 +140,19 @@ export struct AlbumComponent {
         GridCol({
           span: { sm: GridConstants.SPAN_FOUR, md: GridConstants.SPAN_TWELVE, lg: GridConstants.SPAN_TWELVE }
         }) {
-          this.CoverImage()
+          this.CoverImage();
         }
 
         GridCol({
           span: { sm: GridConstants.SPAN_EIGHT, md: GridConstants.SPAN_TWELVE, lg: GridConstants.SPAN_TWELVE }
         }) {
-          this.CoverIntroduction()
+          this.CoverIntroduction();
         }
 
         GridCol({
           span: { sm: GridConstants.SPAN_TWELVE, md: GridConstants.SPAN_TWELVE, lg: GridConstants.SPAN_TWELVE }
         }) {
-          this.CoverOptions()
+          this.CoverOptions();
         }
         .padding({
           top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.option_margin') : 0,
diff --git a/features/musicList/src/main/ets/components/ControlAreaComponent.ets b/features/musicList/src/main/ets/components/ControlAreaComponent.ets
index 49f0327152805a448b262a608fed63b4b04f0e44..6605ea33659af3543224b7e47e97ddede1be650e 100644
--- a/features/musicList/src/main/ets/components/ControlAreaComponent.ets
+++ b/features/musicList/src/main/ets/components/ControlAreaComponent.ets
@@ -165,5 +165,5 @@ export struct ControlAreaComponent {
 function controlImageBuilder() {
   .aspectRatio(1)
   .opacity(0.86)
-  .objectFit(ImageFit.Contain)
+  .objectFit(ImageFit.Contain);
 }
diff --git a/features/musicList/src/main/ets/components/LyricsComponent.ets b/features/musicList/src/main/ets/components/LyricsComponent.ets
index 667b6a5b4296d84970432fd0113b054fd16f5638..9b1ea3de6a8b103a1de60bd3ccf76bea1aa6a33a 100644
--- a/features/musicList/src/main/ets/components/LyricsComponent.ets
+++ b/features/musicList/src/main/ets/components/LyricsComponent.ets
@@ -61,7 +61,7 @@ export struct LyricsComponent {
         } else if (this.songList[this.selectIndex].lyric.endsWith(LyricFile.LRC)) {
           this.mLrcEntryList = parseLrcLyric(stringData);
         }
-      })
+      });
   }
 
   build() {
diff --git a/features/musicList/src/main/ets/components/MusicControlComponent.ets b/features/musicList/src/main/ets/components/MusicControlComponent.ets
index e68a0ef83022911a18d05e14e221fb5e524c73b9..aec824a1876adb3a0d4dee2d8a1655725f9fbfb2 100644
--- a/features/musicList/src/main/ets/components/MusicControlComponent.ets
+++ b/features/musicList/src/main/ets/components/MusicControlComponent.ets
@@ -258,21 +258,21 @@ export struct MusicControlComponent {
               let colorArr = ColorConversion.dealColor(color.red, color.green, color.blue);
               this.imageColor = `rgba(${colorArr[0]}, ${colorArr[1]}, ${colorArr[2]}, 1)`;
             }
-          })
+          });
           let headFilter = effectKit.createEffect(pixelMap);
           if (headFilter !== null) {
             headFilter.blur(PlayerConstants.IMAGE_BLUR);
             headFilter.getEffectPixelMap().then((value) => {
               this.imageLabel = value;
-            })
+            });
           }
         })
           .catch((error: BusinessError) => {
-            Logger.error(`${error.code} + ${error.message}`)
-          })
+            Logger.error(`${error.code} + ${error.message}`);
+          });
       })
       .catch((error: BusinessError) => {
-        Logger.error(`${error.code} + ${error.message}`)
-      })
+        Logger.error(`${error.code} + ${error.message}`);
+      });
   }
 }
\ No newline at end of file
diff --git a/features/musicList/src/main/ets/components/MusicInfoComponent.ets b/features/musicList/src/main/ets/components/MusicInfoComponent.ets
index 3828c58bafc0e78c385460baf2b5a721cd1f90a0..967036f453d4e6b8fb454bd29987406d1148836a 100644
--- a/features/musicList/src/main/ets/components/MusicInfoComponent.ets
+++ b/features/musicList/src/main/ets/components/MusicInfoComponent.ets
@@ -47,8 +47,8 @@ export struct MusicInfoComponent {
         offset: { md: BreakpointConstants.OFFSET_MD }
       }) {
         Column() {
-          this.CoverInfo()
-          this.MusicInfo()
+          this.CoverInfo();
+          this.MusicInfo();
           Blank()
           ControlAreaComponent()
         }
diff --git a/features/musicList/src/main/ets/components/PlayList.ets b/features/musicList/src/main/ets/components/PlayList.ets
index 9ed1b12767c1a6eb5416b3e0b5da692584bc455d..1ad3f2e5d6363a729dcdd1b772a602902a39f3fe 100644
--- a/features/musicList/src/main/ets/components/PlayList.ets
+++ b/features/musicList/src/main/ets/components/PlayList.ets
@@ -1,3 +1,4 @@
+/* eslint-disable */
 /*
  * Copyright (c) 2023 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -100,7 +101,7 @@ export struct PlayList {
         .width($r('app.float.order_icon_size'))
     }
     .onClick(() => {
-      MediaService.getInstance().loadAssent(index)
+      MediaService.getInstance().loadAssent(index);
       this.isShowPlay = true;
     })
     .height($r('app.float.list_item_height'))
@@ -109,19 +110,19 @@ export struct PlayList {
 
   build() {
     Column() {
-      this.PlayAll()
+      this.PlayAll();
       List() {
         LazyForEach(new SongDataSource(this.songList), (item: SongItem, index: number) => {
           ListItem() {
             Column() {
-              this.SongItem(item, index)
+              this.SongItem(item, index);
             }
             .padding({
               left: $r('app.float.list_item_padding'),
               right: $r('app.float.list_item_padding')
             })
           }
-        }, (item: SongItem, index?: number) => JSON.stringify(item) + index)
+        }, (item: SongItem, index?: number) => (item).toString() + index)
       }
       .width(StyleConstants.FULL_WIDTH)
       .backgroundColor(Color.White)
@@ -129,6 +130,7 @@ export struct PlayList {
       .lanes(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ?
         ContentConstants.COL_TWO : ContentConstants.COL_ONE)
       .layoutWeight(1)
+      .cachedCount(2)
       .divider({
         color: $r('app.color.list_divider'),
         strokeWidth: $r('app.float.stroke_width'),
diff --git a/features/musicList/src/main/ets/components/Player.ets b/features/musicList/src/main/ets/components/Player.ets
index de49d77050c9e74b81b20aa39aeeee7c45a553e7..9e7c65a38993e41267cd9f7b2bb1ca9e5ef18713 100644
--- a/features/musicList/src/main/ets/components/Player.ets
+++ b/features/musicList/src/main/ets/components/Player.ets
@@ -198,7 +198,7 @@ export struct Player {
         this.topArea = this.getUIContext().px2vp(area.topRect.height);
         let bottomArea = windowStage.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
         this.bottomArea = this.getUIContext().px2vp(bottomArea.bottomRect.height);
-        Logger.info('bottomArea ' + this.bottomArea)
+        Logger.info('bottomArea ' + this.bottomArea);
         if (this.topArea > 0) {
           windowStage.setWindowLayoutFullScreen(true);
         }
@@ -207,7 +207,7 @@ export struct Player {
         };
         windowStage.setWindowSystemBarProperties(sysBarProps);
       }).catch((error: BusinessError) => {
-        Logger.error(`${error.code} + ${error.message}`)
+        Logger.error(`${error.code} + ${error.message}`);
       });
     })
     .onDisAppear(() => {
@@ -224,7 +224,7 @@ export struct Player {
         };
         windowStage.setWindowSystemBarProperties(sysBarProps);
       }).catch((error: BusinessError) => {
-        Logger.error(`${error.code} + ${error.message}`)
+        Logger.error(`${error.code} + ${error.message}`);
       });
     })
     .gesture(
diff --git a/features/musicList/src/main/ets/lyric/LrcUtils.ets b/features/musicList/src/main/ets/lyric/LrcUtils.ets
index 38f2cdc9d9a89ea4773a9aee3304134971443169..44f47c320961b49b8097baee3207f5875af79c1d 100644
--- a/features/musicList/src/main/ets/lyric/LrcUtils.ets
+++ b/features/musicList/src/main/ets/lyric/LrcUtils.ets
@@ -68,7 +68,7 @@ export function parseLrcLyric(text: string): Array<LrcEntry> {
   if (lrc && lrc.length > 0) {
     lrc.sort((a, b) => {
       return a.lineStartTime - b.lineStartTime;
-    })
+    });
     for (let i = 0; i < lrc.length; i++) {
       if (i === lrc.length - 1) {
         lrc[i].lineDuration = Number.MAX_VALUE;
@@ -125,7 +125,7 @@ export function parseKrcLyric(lyricText: string): LrcEntry[] {
   }
   lyricLines.sort((a, b) => {
     return a.lineStartTime - b.lineStartTime;
-  })
+  });
   return lyricLines;
 }
 
diff --git a/features/musicList/src/main/ets/lyric/LrcView.ets b/features/musicList/src/main/ets/lyric/LrcView.ets
index 1eaf47c67bee4d4366b1b0592e8999feb0be1271..260100e661d1ab17de081ece33f11c69fd762d61 100644
--- a/features/musicList/src/main/ets/lyric/LrcView.ets
+++ b/features/musicList/src/main/ets/lyric/LrcView.ets
@@ -481,7 +481,7 @@ export default struct shiLrcView {
             this.context.fillText(text, this.lrcX, this.lrcY, this.lrcWidth);
           }
           else {
-            this.context.textAlign = 'center'
+            this.context.textAlign = 'center';
             this.context.fillText(text, this.lrcX, this.lrcY, this.lrcWidth);
           }
           break;
diff --git a/features/musicList/src/main/ets/view/MusicListPage.ets b/features/musicList/src/main/ets/view/MusicListPage.ets
index ad29881858629d3deded3b08f30cb0852810d06b..8be59aeb2e2fa4204f118baf0f029170151dd3ef 100644
--- a/features/musicList/src/main/ets/view/MusicListPage.ets
+++ b/features/musicList/src/main/ets/view/MusicListPage.ets
@@ -18,7 +18,7 @@ import { StyleConstants, BreakpointConstants, SongConstants } from '@ohos/consta
 import { Header } from '../components/Header';
 import { Player } from '../components/Player';
 import { Content } from '../components/ListContent';
-import { songList } from '../viewmodel/SongListData'
+import { songList } from '../viewmodel/SongListData';
 
 @Component
 export struct MusicListPage {
diff --git a/features/musicList/src/main/ets/viewmodel/SongDataSource.ets b/features/musicList/src/main/ets/viewmodel/SongDataSource.ets
index 866be1222ad2caa3d115eccef7a6a2f067dd4e0f..6cd8ea376cb8725c6a9fe0bc157efeeb34c5adfb 100644
--- a/features/musicList/src/main/ets/viewmodel/SongDataSource.ets
+++ b/features/musicList/src/main/ets/viewmodel/SongDataSource.ets
@@ -65,24 +65,24 @@ export class SongDataSource implements IDataSource {
   notifyDataAdd(index: number): void {
     this.listeners.forEach(listener => {
       listener.onDataAdd(index);
-    })
+    });
   }
 
   notifyDataChange(index: number): void {
     this.listeners.forEach(listener => {
       listener.onDataChange(index);
-    })
+    });
   }
 
   notifyDataDelete(index: number): void {
     this.listeners.forEach(listener => {
       listener.onDataDelete(index);
-    })
+    });
   }
 
   notifyDataMove(from: number, to: number): void {
     this.listeners.forEach(listener => {
       listener.onDataMove(from, to);
-    })
+    });
   }
 }
\ No newline at end of file
diff --git a/features/musicList/src/main/ets/viewmodel/SongListData.ets b/features/musicList/src/main/ets/viewmodel/SongListData.ets
index d7f5303cd441e6d04ef1e361064095465d1b2935..808e80e02d9156f2c31662598469aab574b40d56 100644
--- a/features/musicList/src/main/ets/viewmodel/SongListData.ets
+++ b/features/musicList/src/main/ets/viewmodel/SongListData.ets
@@ -86,7 +86,7 @@ const songList: SongItem[] = [
     label: $r('app.media.ic_avatar17'), src: 'power.wav', index:32, lyric: '' },
   { id: 34, title: '无归', singer: '小安安', mark: $r('app.media.ic_sq'),
     label: $r('app.media.ic_avatar11'), src: 'power.wav', index:33, lyric: '' }
-]
+];
 
 const optionList : OptionItem[] = [
   { image: $r('app.media.ic_collect'), text: $r('app.string.collect') },
@@ -95,7 +95,7 @@ const optionList : OptionItem[] = [
     pageIndexInfos.pushPathByName(RouterUrlConstants.MUSIC_COMMENT, null);
   }},
   { image: $r('app.media.ic_share'), text: $r('app.string.share') }
-]
+];
 
 class OptionItem {
   image: Resource = $r('app.media.ic_collect');
@@ -103,4 +103,4 @@ class OptionItem {
   action?: (pageIndexInfos: NavPathStack) => void;
 }
 
-export { optionList, OptionItem, songList }
\ No newline at end of file
+export { optionList, OptionItem, songList };
\ No newline at end of file
diff --git a/products/phone/src/main/ets/entryability/EntryAbility.ets b/products/phone/src/main/ets/entryability/EntryAbility.ets
index e617cbb6e1da95de9b9e2571e0b526a291d47dbd..0317f56b7e96088a8a66deb1d135e2e5e5a5bc46 100644
--- a/products/phone/src/main/ets/entryability/EntryAbility.ets
+++ b/products/phone/src/main/ets/entryability/EntryAbility.ets
@@ -21,7 +21,7 @@ export default class EntryAbility extends UIAbility {
   private windowObj?: window.Window;
 
   onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
-    AppStorage.setOrCreate('context', this.context)
+    AppStorage.setOrCreate('context', this.context);
     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
   }
 
@@ -38,8 +38,8 @@ export default class EntryAbility extends UIAbility {
       this.updateBreakpoint(this.windowObj.getWindowProperties().windowRect.width);
       this.windowObj.on('windowSizeChange', (windowSize: window.Size) => {
         this.updateBreakpoint(windowSize.width);
-      })
-    })
+      });
+    });
 
     windowStage.loadContent('pages/Index', (err) => {
       AppStorage.setOrCreate('uiContext', windowStage.getMainWindowSync().getUIContext());
diff --git a/products/watch/build-profile.json5 b/products/watch/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..4d611879c7913fb0610c686e2399258ab3a6dad1
--- /dev/null
+++ b/products/watch/build-profile.json5
@@ -0,0 +1,28 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": false,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    },
+    {
+      "name": "ohosTest",
+    }
+  ]
+}
\ No newline at end of file
diff --git a/products/watch/hvigorfile.ts b/products/watch/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b0e3a1ab98a91bc918d6404b2413111a5011f14a
--- /dev/null
+++ b/products/watch/hvigorfile.ts
@@ -0,0 +1,6 @@
+import { hapTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+  system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []       /* Custom plugin to extend the functionality of Hvigor. */
+}
\ No newline at end of file
diff --git a/products/watch/obfuscation-rules.txt b/products/watch/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..272efb6ca3f240859091bbbfc7c5802d52793b0b
--- /dev/null
+++ b/products/watch/obfuscation-rules.txt
@@ -0,0 +1,23 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/source-obfuscation-V5
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
+
+-enable-property-obfuscation
+-enable-toplevel-obfuscation
+-enable-filename-obfuscation
+-enable-export-obfuscation
\ No newline at end of file
diff --git a/products/watch/oh-package.json5 b/products/watch/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..1edae348bc0ae542154e24101e6e2a0b3a988678
--- /dev/null
+++ b/products/watch/oh-package.json5
@@ -0,0 +1,17 @@
+{
+  "name": "watch",
+  "version": "1.0.0",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "author": "",
+  "license": "",
+  "dependencies": {
+    "musicList": "file:../../features/musicList",
+    "@ohos/constantsCommon": "file:../../common/constantsCommon",
+    "@ohos/live": "file:../../features/live",
+    "@ohos/musicComment": "file:../../features/musicComment",
+    "@ohos/musicList": "file:../../features/musicList",
+    "@ohos/mediaCommon": "file:../../common/mediaCommon",
+  }
+}
+
diff --git a/products/watch/src/main/ets/constants/StyleConstants.ets b/products/watch/src/main/ets/constants/StyleConstants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..aa6725807601e82c63f4b3fb841f792985a3343a
--- /dev/null
+++ b/products/watch/src/main/ets/constants/StyleConstants.ets
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Common constants for all styles.
+ */
+export class StyleConstants {
+  /**
+   * Component width percentage: 100%.
+   */
+  static readonly FULL_WIDTH: string = '100%';
+  /**
+   * Component height percentage: 100%.
+   */
+  static readonly FULL_HEIGHT: string = '100%';
+  /**
+   * Circle Border Radius.
+   */
+  static readonly CIRCLE_BORDER_RADIUS: string = '50%';
+}
\ No newline at end of file
diff --git a/products/watch/src/main/ets/pages/Index.ets b/products/watch/src/main/ets/pages/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ce1dcf429ab1397ae102ba317fbcf11082702bd6
--- /dev/null
+++ b/products/watch/src/main/ets/pages/Index.ets
@@ -0,0 +1,84 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  ArcSwiper,
+  ArcSwiperAttribute,
+  ArcDotIndicator,
+  ArcDirection,
+  ArcSwiperController
+} from '@kit.ArkUI';
+import { Home } from '../view/Home';
+import { PlayList } from '../view/PlayList';
+import { MediaService } from '@ohos/mediaCommon';
+import { songList } from 'musicList';
+import { StyleConstants } from '../constants/StyleConstants';
+
+@Preview
+@Entry
+@Component
+struct Index {
+  @Provide pageStack: NavPathStack = new NavPathStack();
+  innerSelectedIndex: number = 0;
+  private wearableSwiperController: ArcSwiperController = new ArcSwiperController();
+  private arcDotIndicator: ArcDotIndicator = new ArcDotIndicator();
+
+  aboutToAppear(): void {
+    AppStorage.setOrCreate('songList', songList);
+    MediaService.getInstance();
+  }
+
+  build() {
+    Navigation(this.pageStack) {
+      Column() {
+        Row() {
+          ArcSwiper(this.wearableSwiperController) {
+            Home()
+            PlayList()
+          }
+          .duration(400)
+          .indicator(this.arcDotIndicator
+            .arcDirection(ArcDirection.SIX_CLOCK_DIRECTION)
+            .selectedItemColor('#FE1B48')
+          )
+          .onAnimationStart((index: number, targetIndex: number) => {
+            this.innerSelectedIndex = targetIndex;
+          })
+          .onGestureRecognizerJudgeBegin((event: BaseGestureEvent, current: GestureRecognizer,
+            others: Array<GestureRecognizer>): GestureJudgeResult => { // When the recognizer is about to succeed, set the recognizer enable status based on the current component state.
+            if (current) {
+              let target = current.getEventTargetInfo();
+              if (target && current.isBuiltIn() && current.getType() == GestureControl.GestureType.PAN_GESTURE) {
+                // Here, the condition `swiperTarget.isBegin()` or `innerSelectedIndex === 0` indicates that the ArcSwiper has been swiped to the beginning.
+                let swiperTarget = target as ScrollableTargetInfo;
+                if (swiperTarget instanceof ScrollableTargetInfo &&
+                  (swiperTarget.isBegin() || this.innerSelectedIndex === 0)) {
+                  let panEvent = event as PanGestureEvent;
+                  if (panEvent && panEvent.offsetX > 0 && (swiperTarget.isBegin() || this.innerSelectedIndex === 0)) {
+                    return GestureJudgeResult.REJECT;
+                  }
+                }
+              }
+            }
+            return GestureJudgeResult.CONTINUE;
+          })
+        }
+        .height(StyleConstants.FULL_HEIGHT)
+      }
+      .width(StyleConstants.FULL_WIDTH)
+    }
+    .hideTitleBar(true)
+  }
+}
\ No newline at end of file
diff --git a/products/watch/src/main/ets/view/Home.ets b/products/watch/src/main/ets/view/Home.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f5d4a896e65bd89b0c048bcd276222dc68560c56
--- /dev/null
+++ b/products/watch/src/main/ets/view/Home.ets
@@ -0,0 +1,110 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { LengthMetrics } from '@kit.ArkUI';
+import { ArcList, ArcListItem, ArcListAttribute } from '@kit.ArkUI';
+import { StyleConstants } from '../constants/StyleConstants';
+
+class Menu {
+  icon: Resource;
+  text: Resource;
+  pathName: string;
+
+  constructor(icon: Resource, text: Resource, pathName: string) {
+    this.icon = icon;
+    this.text = text;
+    this.pathName = pathName;
+  }
+}
+
+@Preview
+@Component
+export struct Home {
+  @Consume pageStack: NavPathStack;
+  readonly HOME_BTN_WIDTH: string = '90%';
+  private menuList: Menu[] = [
+    new Menu(
+      $r('app.media.hottest_playlists'),
+      $r('app.string.home_hottest_playlists'),
+      'playList'
+    ),
+    new Menu(
+      $r('app.media.my_favorite'),
+      $r('app.string.home_my_favorite'),
+      'songList'
+    ),
+    new Menu(
+      $r('app.media.is_playing'),
+      $r('app.string.home_is_playing'),
+      'songPage'
+    ),
+    new Menu(
+      $r('app.media.setting'),
+      $r('app.string.home_setting'),
+      'setting'
+    )
+  ];
+
+  build() {
+    Column() {
+      ArcList({ initialIndex: 0 }) {
+        ForEach(this.menuList, (item: Menu) => {
+          ArcListItem() {
+            Row() {
+              Image(item.icon)
+                .width($r('app.float.home_icon_width'))
+                .height($r('app.float.home_icon_width'))
+                .borderRadius(StyleConstants.CIRCLE_BORDER_RADIUS)
+                .backgroundColor($r('app.color.home_icon_background'))
+                .padding($r('app.float.home_icon_padding'))
+
+              Text(item.text)
+                .fontColor($r('app.color.font_color'))
+                .fontSize($r('app.float.home_font_size'))
+
+              Image($r('app.media.chevron_right'))
+                .width($r('app.float.home_icon_jump_width'))
+            }
+            .width(this.HOME_BTN_WIDTH)
+            .height($r('app.float.home_btn_height'))
+            .padding({ left: $r('app.float.list_btn_padding'), right: $r('app.float.list_btn_padding') })
+            .justifyContent(FlexAlign.SpaceBetween)
+            .borderRadius(StyleConstants.CIRCLE_BORDER_RADIUS)
+            .focusable(true)
+            .focusOnTouch(true)
+            .backgroundColor($r('app.color.home_btn_background'))
+            .onClick(() => {
+              if (item.pathName === 'setting') {
+                return;
+              }
+              this.pageStack.replacePathByName(item.pathName, null);
+            })
+          }
+        },
+          (item: Menu, index: number) => JSON.stringify(item) + index)
+      }
+      .scrollBar(BarState.Off)
+      .space(LengthMetrics.vp(5))
+      .borderRadius(StyleConstants.CIRCLE_BORDER_RADIUS)
+      .focusable(true)
+      .focusOnTouch(true)
+      .defaultFocus(true)
+    }
+    .align(Alignment.Center)
+    .width(StyleConstants.FULL_WIDTH)
+    .height(StyleConstants.FULL_HEIGHT)
+    .borderRadius(StyleConstants.CIRCLE_BORDER_RADIUS)
+  }
+}
\ No newline at end of file
diff --git a/products/watch/src/main/ets/view/PlayList.ets b/products/watch/src/main/ets/view/PlayList.ets
new file mode 100644
index 0000000000000000000000000000000000000000..a643e708df4d0c263fee832926807333d8409fa8
--- /dev/null
+++ b/products/watch/src/main/ets/view/PlayList.ets
@@ -0,0 +1,124 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ArcSwiper, ArcSwiperAttribute, ArcSwiperController } from '@kit.ArkUI';
+import { StyleConstants } from '../constants/StyleConstants';
+
+@Builder
+export function PlayListBuilder() {
+  PlayList();
+}
+
+class PlayListSheet {
+  name: Resource;
+  background: Resource;
+  title: Resource;
+
+  constructor(name: Resource, background: Resource, title: Resource) {
+    this.name = name;
+    this.background = background;
+    this.title = title;
+  }
+}
+
+@Preview
+@Component
+export struct PlayList {
+  @Consume pageStack: NavPathStack;
+  @State itemSimpleColor: Color | number | string = '';
+  @State selectedItemSimpleColor: Color | number | string = '';
+  innerSelectedIndex: number = 0;
+  private wearableSwiperController: ArcSwiperController = new ArcSwiperController();
+  private playList: PlayListSheet[] = [
+    new PlayListSheet(
+      $r('app.string.playlist_name_one'),
+      $r('app.media.playlist_bg1'),
+      $r('app.string.playlist_title_one')
+    ),
+    new PlayListSheet(
+      $r('app.string.playlist_name_two'),
+      $r('app.media.playlist_bg2'),
+      $r('app.string.playlist_title_two')
+    )
+  ];
+
+  build() {
+    NavDestination() {
+      Column() {
+        ArcSwiper(this.wearableSwiperController) {
+          ForEach(this.playList, (item: PlayListSheet, index: number) => {
+            Column({ space: 10 }) {
+              Row() {
+                Text(item.name)
+                  .fontWeight(FontWeight.Bold)
+                  .fontColor($r('app.color.font_color'))
+                  .fontSize($r('app.float.home_font_size'))
+                Image($r('app.media.chevron_right'))
+                  .width($r('app.float.home_icon_jump_width'))
+                  .margin({ left: $r('app.float.playlist_padding') })
+              }
+
+              Image($r('app.media.play_btn_fill'))
+                .width($r('app.float.playlist_icon'))
+                .height($r('app.float.playlist_icon'))
+                .position({ x: '25%', y: '65%' })
+              Text(item.title)
+            }
+            .width(StyleConstants.FULL_WIDTH)
+            .height(StyleConstants.FULL_HEIGHT)
+            .backgroundImage(item.background, ImageRepeat.NoRepeat)
+            .backgroundImageSize({ width: StyleConstants.FULL_WIDTH, height: StyleConstants.FULL_HEIGHT })
+            .justifyContent(FlexAlign.SpaceBetween)
+            .padding({ top: $r('app.float.playlist_row_padding'), bottom: $r('app.float.playlist_row_padding') })
+            .onClick(() => {
+              this.pageStack.replacePathByName('songList', null);
+            })
+          }, (item: PlayListSheet, index?: number) => index + JSON.stringify(item))
+        }
+        .index(0)
+        .duration(400)
+        .vertical(true)
+        .indicator(false)
+        .disableSwipe(false)
+        .digitalCrownSensitivity(CrownSensitivity.MEDIUM)
+        .disableTransitionAnimation(false)
+        .onAnimationStart((index: number, targetIndex: number) => {
+          this.innerSelectedIndex = targetIndex;
+        })
+        .onGestureRecognizerJudgeBegin((event: BaseGestureEvent, current: GestureRecognizer,
+        ): GestureJudgeResult => { // When the recognizer is about to succeed, set the recognizer enable status based on the current component state.
+          if (current) {
+            let target = current.getEventTargetInfo();
+            if (target && current.isBuiltIn() && current.getType() == GestureControl.GestureType.PAN_GESTURE) {
+              // Here, the condition `swiperTarget.isBegin()` or `innerSelectedIndex === 0` indicates that the ArcSwiper has been swiped to the beginning.
+              let swiperTarget = target as ScrollableTargetInfo;
+              if (swiperTarget instanceof ScrollableTargetInfo &&
+                (swiperTarget.isBegin() || this.innerSelectedIndex === 0)) {
+                let panEvent = event as PanGestureEvent;
+                if (panEvent && panEvent.offsetX > 0 && (swiperTarget.isBegin() || this.innerSelectedIndex === 0)) {
+                  return GestureJudgeResult.REJECT;
+                }
+              }
+            }
+          }
+          return GestureJudgeResult.CONTINUE;
+        })
+      }
+      .width(StyleConstants.FULL_WIDTH)
+      .height(StyleConstants.FULL_HEIGHT)
+    }
+    .hideTitleBar(true)
+  }
+}
\ No newline at end of file
diff --git a/products/watch/src/main/ets/view/SongList.ets b/products/watch/src/main/ets/view/SongList.ets
new file mode 100644
index 0000000000000000000000000000000000000000..3cb4fa50ea1962d45215a41c9583e40c57772b50
--- /dev/null
+++ b/products/watch/src/main/ets/view/SongList.ets
@@ -0,0 +1,87 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { LengthMetrics } from '@kit.ArkUI';
+import { ArcList, ArcListItem, ArcListAttribute, ArcListItemAttribute } from '@kit.ArkUI';
+import { MediaService, SongItem } from '@ohos/mediaCommon';
+import { StyleConstants } from '../constants/StyleConstants';
+
+@Builder
+export function SongListBuilder() {
+  SongList();
+}
+
+@Preview
+@Component
+struct SongList {
+  readonly HOME_BTN_WIDTH: string = '90%';
+  @Consume pageStack: NavPathStack;
+  @StorageLink('songList') songList: SongItem[] = [];
+
+  aboutToAppear(): void {
+    MediaService.getInstance();
+  }
+
+  build() {
+    NavDestination() {
+      Column() {
+        ArcList({ initialIndex: 0 }) {
+          ForEach(this.songList, (item: SongItem) => {
+            ArcListItem() {
+              Row() {
+                Image(item.label)
+                  .width($r('app.float.home_icon_width'))
+                  .height($r('app.float.home_icon_width'))
+                  .borderRadius(StyleConstants.CIRCLE_BORDER_RADIUS)
+
+                Column() {
+                  Text(item.title)
+                    .fontWeight(FontWeight.Bold)
+                    .fontColor($r('app.color.font_color'))
+                  Text(item.singer)
+                    .fontColor($r('app.color.text_color'))
+                }
+                .layoutWeight(1)
+              }
+              .width(this.HOME_BTN_WIDTH)
+              .height($r('app.float.home_btn_height'))
+              .padding({ left: $r('app.float.list_btn_padding'), right: $r('app.float.list_btn_padding') })
+              .borderRadius(StyleConstants.CIRCLE_BORDER_RADIUS)
+              .focusable(true)
+              .focusOnTouch(true)
+              .backgroundColor($r('app.color.home_btn_background'))
+            }
+            .align(Alignment.Center)
+            .onClick(async () => {
+              await MediaService.getInstance().loadAssent(index);
+              this.pageStack.replacePathByName('songPage', null);
+            })
+          }, (item: SongItem, index: number) => JSON.stringify(item) + index)
+        }
+        .scrollBar(BarState.Off)
+        .space(LengthMetrics.vp(5))
+        .borderRadius(StyleConstants.CIRCLE_BORDER_RADIUS)
+        .focusable(true)
+        .focusOnTouch(true)
+        .defaultFocus(true)
+      }
+      .align(Alignment.Center)
+      .width(StyleConstants.FULL_WIDTH)
+      .height(StyleConstants.FULL_HEIGHT)
+      .borderRadius(StyleConstants.CIRCLE_BORDER_RADIUS)
+    }
+    .hideTitleBar(true)
+  }
+}
\ No newline at end of file
diff --git a/products/watch/src/main/ets/view/SongPage.ets b/products/watch/src/main/ets/view/SongPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..8e1638d25be6c81b98b4484a83c4692951a84515
--- /dev/null
+++ b/products/watch/src/main/ets/view/SongPage.ets
@@ -0,0 +1,136 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { MediaService, SongItem } from '@ohos/mediaCommon';
+import { StyleConstants } from '../constants/StyleConstants';
+import { VolumeSlider } from './VolumeSliderComponent';
+
+@Builder
+export function SongPageBuilder() {
+  SongPage();
+}
+
+@Preview
+@Component
+struct SongPage {
+  @StorageLink('songList') songList: SongItem[] = [];
+  @StorageLink('selectIndex') selectIndex: number = 0;
+  @StorageLink('isPlay') isPlay: boolean = false;
+  @StorageLink('progress') time: number = 0;
+  @StorageLink('progressMax') max: number = 0;
+  @StorageLink('isFirstLaunch') isFirstLaunch: boolean = true;
+  readonly HALF_WIDTH: string = '50%';
+
+  aboutToAppear(): void {
+    if (this.isFirstLaunch) {
+      MediaService.getInstance().loadAssent(0, true);
+    }
+    AppStorage.setOrCreate('isFirstLaunch', false);
+  }
+
+  build() {
+    NavDestination() {
+      Column() {
+        Column() {
+          Text(this.songList[this.selectIndex].title)
+            .fontWeight(FontWeight.Bold)
+            .fontColor($r('app.color.font_color'))
+          Text(this.songList[this.selectIndex].singer)
+            .fontColor($r('app.color.play_singer_color'))
+        }
+
+        Row() {
+          Column() {
+            Image($r('app.media.previous_btn'))
+              .width($r('app.float.play_song_img'))
+          }
+          .onClick(() => {
+            MediaService.getInstance().playPrevious();
+          })
+
+          Stack() {
+            Image(this.songList[this.selectIndex].label)
+              .width($r('app.float.play_circle_img'))
+              .height($r('app.float.play_circle_img'))
+              .borderRadius(StyleConstants.CIRCLE_BORDER_RADIUS)
+
+            Progress({ value: this.time, total: this.max, type: ProgressType.Ring })
+              .width($r('app.float.play_progress_width'))
+              .backgroundColor(Color.Transparent)
+              .color($r('app.color.font_color'))
+
+            Image($r('app.media.play_btn'))
+              .width($r('app.float.play_song_img'))
+              .visibility(this.isPlay === true ? Visibility.None : Visibility.Visible)
+              .onClick(() => {
+                if (MediaService.getInstance().getFirst()) {
+                  MediaService.getInstance().loadAssent(0);
+                } else {
+                  this.isPlay ? MediaService.getInstance().pause() : MediaService.getInstance().play();
+                }
+              })
+
+            Image($r('app.media.pause_btn'))
+              .width($r('app.float.play_song_img'))
+              .visibility(this.isPlay === true ? Visibility.Visible : Visibility.None)
+              .onClick(() => {
+                MediaService.getInstance().pause();
+              })
+          }
+          .width(this.HALF_WIDTH)
+          .align(Alignment.Center)
+
+          Column() {
+            Image($r('app.media.next_btn'))
+              .width($r('app.float.play_song_img'))
+          }
+          .onClick(() => {
+            MediaService.getInstance().playNextAuto(true);
+          })
+        }
+        .justifyContent(FlexAlign.SpaceAround)
+        .width('85%')
+
+        Row() {
+          Image($r('app.media.download'))
+            .width($r('app.float.play_icon_width'))
+          Image($r('app.media.repeat'))
+            .width($r('app.float.play_icon_width'))
+          Image($r('app.media.full_screen'))
+            .width($r('app.float.play_icon_width'))
+        }
+        .width('60%')
+        .justifyContent(FlexAlign.SpaceAround)
+      }
+      .width(StyleConstants.FULL_WIDTH)
+      .height(StyleConstants.FULL_HEIGHT)
+      .padding({ top: $r('app.float.play_column_padding'), bottom: $r('app.float.play_column_padding') })
+      .justifyContent(FlexAlign.SpaceAround)
+
+      VolumeSlider()
+    }
+    .hideTitleBar(true)
+    .focusable(true)
+    .focusOnTouch(true)
+    .defaultFocus(true)
+    .linearGradient({
+      direction: GradientDirection.Bottom,
+      colors: [
+        ['#5E4C4B', 1.0],
+        ['#695951', 1.0]
+      ]
+    })
+  }
+}
\ No newline at end of file
diff --git a/products/watch/src/main/ets/view/VolumeSliderComponent.ets b/products/watch/src/main/ets/view/VolumeSliderComponent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ffd156b1a0bfcde9cb23fa5ed4ec802a5026bf85
--- /dev/null
+++ b/products/watch/src/main/ets/view/VolumeSliderComponent.ets
@@ -0,0 +1,103 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  ArcSlider,
+  ArcSliderLayoutOptions,
+  ArcSliderLayoutOptionsConstructorOptions,
+  ArcSliderOptions,
+  ArcSliderOptionsConstructorOptions,
+  ArcSliderPosition,
+  ArcSliderStyleOptions,
+  ArcSliderStyleOptionsConstructorOptions,
+  ArcSliderValueOptions,
+  ArcSliderValueOptionsConstructorOptions
+} from '@kit.ArkUI';
+import { BusinessError } from '@kit.BasicServicesKit';
+import { MediaService } from '@ohos/mediaCommon';
+import { hilog } from '@kit.PerformanceAnalysisKit';
+
+@Preview
+@Component
+export struct VolumeSlider {
+  @StorageLink('volume') volume: number = 0.4;
+  valueOptionsConstructorOptions: ArcSliderValueOptionsConstructorOptions = {
+    progress: this.volume * 100,
+    min: 0,
+    max: 100
+  };
+  layoutOptionsConstructorOptions: ArcSliderLayoutOptionsConstructorOptions = {
+    reverse: true,
+    position: ArcSliderPosition.RIGHT
+  };
+  styleOptionsConstructorOptions: ArcSliderStyleOptionsConstructorOptions = {
+    trackThickness: 5,
+    activeTrackThickness: 8,
+    trackColor: '#33f1ebeb',
+    selectedColor: '#FE1B48',
+    trackBlur: 20
+  };
+  valueOptions: ArcSliderValueOptions = new ArcSliderValueOptions(this.valueOptionsConstructorOptions);
+  layoutOptions: ArcSliderLayoutOptions = new ArcSliderLayoutOptions(this.layoutOptionsConstructorOptions);
+  styleOptions: ArcSliderStyleOptions = new ArcSliderStyleOptions(this.styleOptionsConstructorOptions);
+  arcSliderOptionsConstructorOptions: ArcSliderOptionsConstructorOptions = {
+    valueOptions: this.valueOptions,
+    layoutOptions: this.layoutOptions,
+    styleOptions: this.styleOptions,
+    digitalCrownSensitivity: CrownSensitivity.LOW,
+    onChange: (progress: number) => {
+      this.setAVPlayerVolume(progress);
+    },
+  };
+  arcSliderOptions: ArcSliderOptions = new ArcSliderOptions(this.arcSliderOptionsConstructorOptions);
+
+  setAVPlayerVolume(progress: number) {
+    try {
+      MediaService.getInstance().avPlayer?.setVolume(progress / 100);
+    } catch (error) {
+      hilog.error(0x0000, 'volumeSlider', "ArcSlider setVolume failed", (error as BusinessError).code);
+    }
+  }
+
+  build() {
+    Column() {
+      ArcSlider({ options: this.arcSliderOptions })
+        .focusable(true)
+        .focusOnTouch(true)
+        .defaultFocus(true)
+        .zIndex(999)
+        .onDigitalCrown((event: CrownEvent) => {
+          event.stopPropagation();
+          const STEP_DEGREE = 20;
+          let newVolume = this.volume + event.degree / STEP_DEGREE;
+          newVolume = Math.max(0, Math.min(100, newVolume));
+          this.setAVPlayerVolume(newVolume);
+        })
+      Image($r('app.media.speaker_fill'))
+        .width($r('app.float.volume_icon_width'))
+        .height($r('app.float.volume_icon_width'))
+        .rotate({ angle: '-30deg' })
+        .position({
+          right: $r('app.float.volume_icon_right'),
+          top: $r('app.float.volume_icon_top'),
+        })
+    }
+    .hitTestBehavior(HitTestMode.Transparent)
+    .position({
+      top: 0,
+      right: 0
+    })
+  }
+}
diff --git a/products/watch/src/main/ets/watchability/WatchAbility.ets b/products/watch/src/main/ets/watchability/WatchAbility.ets
new file mode 100644
index 0000000000000000000000000000000000000000..efa9a310feac83f5d23874b405a26a8b26dc341c
--- /dev/null
+++ b/products/watch/src/main/ets/watchability/WatchAbility.ets
@@ -0,0 +1,45 @@
+import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
+import { hilog } from '@kit.PerformanceAnalysisKit';
+import { window } from '@kit.ArkUI';
+
+const DOMAIN = 0x0000;
+
+export default class WatchAbility extends UIAbility {
+  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
+    AppStorage.setOrCreate('context', this.context);
+    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');
+  }
+
+  onDestroy(): void {
+    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onDestroy');
+  }
+
+  onWindowStageCreate(windowStage: window.WindowStage): void {
+    // Main window is created, set main page for this ability
+    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
+
+    windowStage.loadContent('pages/Index', (err) => {
+      if (err.code) {
+        hilog.error(DOMAIN, 'testTag', `${err.code} + ${err.message}`);
+        return;
+      }
+      AppStorage.setOrCreate('uiContext', windowStage.getMainWindowSync().getUIContext());
+      hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
+    });
+  }
+
+  onWindowStageDestroy(): void {
+    // Main window is destroyed, release UI related resources
+    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
+  }
+
+  onForeground(): void {
+    // Ability has brought to foreground
+    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onForeground');
+  }
+
+  onBackground(): void {
+    // Ability has back to background
+    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onBackground');
+  }
+}
diff --git a/products/watch/src/main/ets/watchbackupability/WatchBackupAbility.ets b/products/watch/src/main/ets/watchbackupability/WatchBackupAbility.ets
new file mode 100644
index 0000000000000000000000000000000000000000..d5e190e5ff258fc2f7ea97890fe735cc1099e095
--- /dev/null
+++ b/products/watch/src/main/ets/watchbackupability/WatchBackupAbility.ets
@@ -0,0 +1,16 @@
+import { hilog } from '@kit.PerformanceAnalysisKit';
+import { BackupExtensionAbility, BundleVersion } from '@kit.CoreFileKit';
+
+const DOMAIN = 0x0000;
+
+export default class WatchBackupAbility extends BackupExtensionAbility {
+  async onBackup() {
+    hilog.info(DOMAIN, 'testTag', 'onBackup ok');
+    await Promise.resolve();
+  }
+
+  async onRestore(bundleVersion: BundleVersion) {
+    hilog.info(DOMAIN, 'testTag', 'onRestore ok %{public}s', JSON.stringify(bundleVersion));
+    await Promise.resolve();
+  }
+}
\ No newline at end of file
diff --git a/products/watch/src/main/module.json5 b/products/watch/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..99c543c0991fe3d32f63f66926dc96b292ca3110
--- /dev/null
+++ b/products/watch/src/main/module.json5
@@ -0,0 +1,51 @@
+{
+  "module": {
+    "name": "watch",
+    "type": "entry",
+    "description": "$string:module_desc",
+    "mainElement": "WatchAbility",
+    "deviceTypes": [
+      "wearable",
+    ],
+    "deliveryWithInstall": true,
+    "installationFree": false,
+    "pages": "$profile:main_pages",
+    "routerMap": "$profile:router_map",
+    "abilities": [
+      {
+        "name": "WatchAbility",
+        "srcEntry": "./ets/watchability/WatchAbility.ets",
+        "description": "$string:WatchAbility_desc",
+        "icon": "$media:layered_image",
+        "label": "$string:WatchAbility_label",
+        "startWindowIcon": "$media:startIcon",
+        "startWindowBackground": "$color:start_window_background",
+        "exported": true,
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "ohos.want.action.home"
+            ]
+          }
+        ]
+      }
+    ],
+    "extensionAbilities": [
+      {
+        "name": "WatchBackupAbility",
+        "srcEntry": "./ets/watchbackupability/WatchBackupAbility.ets",
+        "type": "backup",
+        "exported": false,
+        "metadata": [
+          {
+            "name": "ohos.extension.backup",
+            "resource": "$profile:backup_config"
+          }
+        ],
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/products/watch/src/main/resources/base/element/color.json b/products/watch/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..834cb898dc34373415e6571cb055404e74fe262b
--- /dev/null
+++ b/products/watch/src/main/resources/base/element/color.json
@@ -0,0 +1,36 @@
+{
+  "color": [
+    {
+      "name": "start_window_background",
+      "value": "#FFFFFF"
+    },
+    {
+      "name": "font_color",
+      "value": "#F6F5F6"
+    },
+    {
+      "name": "text_color",
+      "value": "#767674"
+    },
+    {
+      "name": "home_icon_background",
+      "value": "#FC1B46"
+    },
+    {
+      "name": "home_btn_background",
+      "value": "#2A2A29"
+    },
+    {
+      "name": "playlist_color_one",
+      "value": "#4C5363"
+    },
+    {
+      "name": "playlist_color_two",
+      "value": "#5D544D"
+    },
+    {
+      "name": "play_singer_color",
+      "value": "#BAAEAD"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/products/watch/src/main/resources/base/element/float.json b/products/watch/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..58ea5f8f08aefc7f6d98d70d9081349aa4e81bdf
--- /dev/null
+++ b/products/watch/src/main/resources/base/element/float.json
@@ -0,0 +1,84 @@
+{
+  "float": [
+    {
+      "name": "home_font_size",
+      "value": "18vp"
+    },
+    {
+      "name": "home_icon_width",
+      "value": "45vp"
+    },
+    {
+      "name": "home_icon_jump_width",
+      "value": "16vp"
+    },
+    {
+      "name": "home_icon_padding",
+      "value": "6vp"
+    },
+    {
+      "name": "home_btn_space",
+      "value": "10vp"
+    },
+    {
+      "name": "home_btn_height",
+      "value": "66vp"
+    },
+    {
+      "name": "list_btn_padding",
+      "value": "10vp"
+    },
+    {
+      "name": "playlist_padding",
+      "value": "6vp"
+    },
+    {
+      "name": "playlist_icon",
+      "value": "30vp"
+    },
+    {
+      "name": "playlist_img_border_radius",
+      "value": "12vp"
+    },
+    {
+      "name": "playlist_margin",
+      "value": "4vp"
+    },
+    {
+      "name": "playlist_row_padding",
+      "value": "16vp"
+    },
+    {
+      "name": "play_song_img",
+      "value": "36vp"
+    },
+    {
+      "name": "play_icon_width",
+      "value": "24vp"
+    },
+    {
+      "name": "play_circle_img",
+      "value": "90vp"
+    },
+    {
+      "name": "play_progress_width",
+      "value": "100vp"
+    },
+    {
+      "name": "play_column_padding",
+      "value": "16vp"
+    },
+    {
+      "name": "volume_icon_width",
+      "value": "15vp"
+    },
+    {
+      "name": "volume_icon_right",
+      "value": "22vp"
+    },
+    {
+      "name": "volume_icon_top",
+      "value": "60vp"
+    }
+  ]
+}
diff --git a/products/watch/src/main/resources/base/element/string.json b/products/watch/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..874b5aae0ca020ea2a9b6114596f3feae9753be7
--- /dev/null
+++ b/products/watch/src/main/resources/base/element/string.json
@@ -0,0 +1,48 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "WatchAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "WatchAbility_label",
+      "value": "label"
+    },
+    {
+      "name": "home_hottest_playlists",
+      "value": "hottest_playlists"
+    },
+    {
+      "name": "home_my_favorite",
+      "value": "My Favorite"
+    },
+    {
+      "name": "home_is_playing",
+      "value": "Is Playing"
+    },
+    {
+      "name": "home_setting",
+      "value": "Setting"
+    },
+    {
+      "name": "playlist_name_one",
+      "value": "Popular Playlists"
+    },
+    {
+      "name": "playlist_name_two",
+      "value": "Exercise Music"
+    },
+    {
+      "name": "playlist_title_one",
+      "value": "New independent singer-songwriter"
+    },
+    {
+      "name": "playlist_title_two",
+      "value": "Pleasant jogging "
+    }
+  ]
+}
\ No newline at end of file
diff --git a/products/watch/src/main/resources/base/media/chevron_right.svg b/products/watch/src/main/resources/base/media/chevron_right.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8dc4eb7efe15b8a6f24dabed3f23ce4de8a4009f
--- /dev/null
+++ b/products/watch/src/main/resources/base/media/chevron_right.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="24"><rect width="12" height="24" opacity="0"></rect><g><path d="M2.78 18Q3.07 18.24 3.36 18.24Q3.65 18.24 3.86 18L9.14 12.65L9.24 12.55Q9.46 12.26 9.46 11.88Q9.46 11.4 9.14 11.11L3.86 5.74Q3.65 5.52 3.34 5.52Q3.02 5.52 2.81 5.74Q2.62 5.93 2.6 6.22Q2.59 6.5 2.76 6.74L2.81 6.79L7.82 11.88L2.78 16.94Q2.57 17.16 2.57 17.47Q2.57 17.78 2.78 18Z" fill="#969694"></path></g></svg>
\ No newline at end of file
diff --git a/products/watch/src/main/resources/base/media/download.svg b/products/watch/src/main/resources/base/media/download.svg
new file mode 100644
index 0000000000000000000000000000000000000000..71509bddc564c5dc30a0e7ce6d78ee0be02d2fc6
--- /dev/null
+++ b/products/watch/src/main/resources/base/media/download.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+    <rect width="24" height="24" opacity="0"></rect>
+    <g>
+        <path d="M12.74 16.66L12.74 5.95Q12.74 5.64 12.53 5.42Q12.31 5.21 12 5.21Q11.69 5.21 11.47 5.42Q11.26 5.64 11.26 5.95L11.26 16.68L7.27 12.7Q7.06 12.48 6.74 12.48Q6.43 12.48 6.22 12.7Q6 12.91 6 13.22Q6 13.54 6.22 13.75L10.73 18.26Q11.26 18.79 11.99 18.79Q12.72 18.79 13.27 18.26L17.76 13.75Q17.98 13.54 17.98 13.22Q17.98 12.91 17.76 12.7Q17.57 12.48 17.24 12.48Q16.92 12.48 16.7 12.7Z"
+              fill="rgba(230,230,230,0.3)"></path>
+        <path d="M12 1.01Q9.02 1.01 6.49 2.48Q3.96 3.96 2.48 6.49Q1.01 9.02 1.01 12Q1.01 14.98 2.48 17.51Q3.96 20.04 6.49 21.52Q9.02 22.99 12 22.99Q14.98 22.99 17.5 21.52Q20.02 20.04 21.5 17.51Q22.99 14.98 22.99 12Q22.99 9.02 21.5 6.49Q20.02 3.96 17.5 2.48Q14.98 1.01 12 1.01ZM12 21.5Q9.43 21.5 7.25 20.22Q5.06 18.94 3.78 16.75Q2.5 14.57 2.5 12Q2.5 9.41 3.78 7.22Q5.06 5.04 7.25 3.77Q9.43 2.5 12 2.5Q14.57 2.5 16.75 3.77Q18.94 5.04 20.22 7.22Q21.5 9.41 21.5 12Q21.5 14.57 20.22 16.75Q18.94 18.94 16.75 20.22Q14.57 21.5 12 21.5Z"
+              fill="rgba(230,230,230,0.3)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/products/watch/src/main/resources/base/media/full_screen.svg b/products/watch/src/main/resources/base/media/full_screen.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ae7f22ccca468bd7901c02ea2383264d6a246089
--- /dev/null
+++ b/products/watch/src/main/resources/base/media/full_screen.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" opacity="0"></rect><g><path d="M17.76 4.75Q17.02 4.75 16.51 5.26Q16.01 5.76 16.01 6.5Q16.01 7.22 16.51 7.74Q17.02 8.26 17.76 8.26Q18.48 8.26 19 7.74Q19.51 7.22 19.51 6.5Q19.51 5.76 19 5.26Q18.48 4.75 17.76 4.75ZM6.24 4.75Q5.52 4.75 5.02 5.26Q4.51 5.76 4.51 6.5Q4.51 7.22 5.02 7.74Q5.52 8.26 6.24 8.26Q6.96 8.26 7.48 7.74Q7.99 7.22 7.99 6.5Q7.99 5.76 7.48 5.26Q6.96 4.75 6.24 4.75ZM17.76 15.74Q17.02 15.74 16.51 16.26Q16.01 16.78 16.01 17.5Q16.01 18.22 16.51 18.73Q17.02 19.25 17.76 19.25Q18.48 19.25 19 18.73Q19.51 18.22 19.51 17.5Q19.51 16.78 19 16.26Q18.48 15.74 17.76 15.74ZM6.24 15.74Q5.52 15.74 5.02 16.26Q4.51 16.78 4.51 17.5Q4.51 18.22 5.02 18.73Q5.52 19.25 6.24 19.25Q6.96 19.25 7.48 18.73Q7.99 18.22 7.99 17.5Q7.99 16.78 7.48 16.26Q6.96 15.74 6.24 15.74Z" fill="rgba(255,255,255,1)"></path></g></svg>
\ No newline at end of file
diff --git a/products/watch/src/main/resources/base/media/hottest_playlists.svg b/products/watch/src/main/resources/base/media/hottest_playlists.svg
new file mode 100644
index 0000000000000000000000000000000000000000..27c8c75c77a06a3600247a3f7fc56c1be0099b9d
--- /dev/null
+++ b/products/watch/src/main/resources/base/media/hottest_playlists.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" opacity="0"></rect><g><path d="M7.03 16.2Q6.72 16.2 6.49 16.42Q6.26 16.63 6.26 16.94Q6.26 17.26 6.49 17.48Q6.72 17.71 7.03 17.71L9 17.71Q9.31 17.71 9.54 17.48Q9.77 17.26 9.77 16.94Q9.77 16.63 9.54 16.42Q9.31 16.2 9 16.2L7.03 16.2ZM14.14 7.68Q14.45 7.68 14.68 7.46Q14.9 7.25 14.9 6.94Q14.9 6.62 14.68 6.41Q14.45 6.19 14.14 6.19L7.03 6.19Q6.72 6.19 6.49 6.41Q6.26 6.62 6.26 6.94Q6.26 7.25 6.49 7.46Q6.72 7.68 7.03 7.68L14.14 7.68ZM7.03 11.18Q6.72 11.18 6.5 11.4Q6.29 11.62 6.29 11.93Q6.29 12.24 6.5 12.47Q6.72 12.7 7.03 12.7L11.81 12.7Q12.12 12.7 12.34 12.47Q12.55 12.24 12.55 11.93Q12.55 11.62 12.34 11.4Q12.12 11.18 11.81 11.18L7.03 11.18ZM17.33 6.84Q16.9 6.89 16.61 7.21Q16.32 7.54 16.32 7.99L16.34 9.5L16.34 12.31Q16.34 12.6 16.24 12.79Q16.13 12.98 15.91 13.15Q15.65 13.37 14.74 13.73L14.69 13.75Q13.63 14.16 12.96 14.62Q12.29 15.07 11.98 15.86Q11.78 16.39 11.86 16.92Q11.93 17.45 12.26 17.88Q12.7 18.43 13.44 18.64Q14.18 18.84 14.83 18.77Q16.44 18.58 17.05 17.5Q17.66 16.42 17.66 15.17L17.66 9.5Q17.71 9.12 17.82 9Q17.93 8.88 18.22 8.76Q18.58 8.62 18.89 8.42Q19.3 8.16 19.52 7.87Q19.75 7.58 19.82 7.26Q19.9 6.94 19.8 6.53L17.33 6.84ZM14.69 17.47Q13.7 17.54 13.3 17.06Q13.18 16.9 13.15 16.72Q13.13 16.54 13.22 16.32Q13.39 15.89 13.87 15.59Q14.35 15.29 15.17 14.98L15.22 14.95Q15.31 14.9 15.41 14.88Q15.65 14.78 15.89 14.68Q16.13 14.57 16.32 14.45L16.32 15.41Q16.32 16.08 16 16.72Q15.67 17.35 14.69 17.47Z" fill="rgba(254,249,255,1)"></path><path d="M19.01 22.01Q19.8 22.01 20.5 21.6Q21.19 21.19 21.6 20.5Q22.01 19.8 22.01 19.01L22.01 4.99Q22.01 4.2 21.6 3.5Q21.19 2.81 20.5 2.4Q19.8 1.99 19.01 1.99L4.99 1.99Q4.2 1.99 3.5 2.4Q2.81 2.81 2.4 3.5Q1.99 4.2 1.99 4.99L1.99 19.01Q1.99 19.8 2.4 20.5Q2.81 21.19 3.5 21.6Q4.2 22.01 4.99 22.01L19.01 22.01ZM19.01 3.5Q19.63 3.5 20.06 3.94Q20.5 4.37 20.5 4.99L20.5 19.01Q20.5 19.61 20.06 20.05Q19.63 20.5 19.01 20.5L4.99 20.5Q4.39 20.5 3.95 20.05Q3.5 19.61 3.5 19.01L3.5 4.99Q3.5 4.37 3.95 3.94Q4.39 3.5 4.99 3.5L19.01 3.5Z" fill="rgba(254,249,255,1)"></path></g></svg>
\ No newline at end of file
diff --git a/products/watch/src/main/resources/base/media/is_playing.svg b/products/watch/src/main/resources/base/media/is_playing.svg
new file mode 100644
index 0000000000000000000000000000000000000000..45111b3022fd893b700dd2ae45e5cd62c7c25040
--- /dev/null
+++ b/products/watch/src/main/resources/base/media/is_playing.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" opacity="0"></rect><g><path d="M13.75 21.36Q12.94 21.53 12.02 21.53Q9.43 21.53 7.25 20.24Q5.06 18.96 3.78 16.78Q2.5 14.59 2.5 12Q2.5 9.41 3.78 7.22Q5.06 5.04 7.25 3.76Q9.43 2.47 12.02 2.47Q14.35 2.47 16.42 3.55Q18.48 4.63 19.82 6.55Q19.99 6.79 20.3 6.85Q20.62 6.91 20.88 6.72Q21.12 6.55 21.18 6.25Q21.24 5.95 21.05 5.69Q19.49 3.48 17.1 2.23Q14.71 0.98 12.02 0.98Q9.05 0.98 6.52 2.47Q3.98 3.96 2.5 6.49Q1.01 9.02 1.01 12Q1.01 14.98 2.5 17.51Q3.98 20.04 6.52 21.53Q9.05 23.02 12.02 23.02Q13.1 23.02 14.02 22.85Q14.33 22.8 14.5 22.54Q14.66 22.27 14.62 21.96Q14.57 21.65 14.32 21.48Q14.06 21.31 13.75 21.36ZM10.15 9.22L15.17 11.98L10.15 14.78ZM10.2 7.61Q9.89 7.44 9.55 7.5Q9.22 7.56 8.99 7.84Q8.76 8.11 8.76 8.47L8.76 15.55Q8.76 15.91 8.99 16.18Q9.22 16.44 9.55 16.5Q9.89 16.56 10.2 16.39L16.34 12.84Q16.66 12.67 16.78 12.34Q16.9 12 16.78 11.68Q16.66 11.35 16.34 11.16L10.2 7.61Z" fill="rgba(254,249,255,1)"></path><path d="M20.14 8.88Q19.66 8.9 19.33 9.28Q19.01 9.65 19.01 10.15L19.03 11.69L19.03 14.52Q19.03 15.19 18.71 15.5Q18.38 15.82 17.62 16.13Q16.58 16.54 15.94 16.97Q15.29 17.4 14.98 18.19Q14.78 18.72 14.86 19.26Q14.93 19.8 15.26 20.21Q15.6 20.66 16.14 20.89Q16.68 21.12 17.35 21.12L17.78 21.12Q19.37 20.95 19.96 19.93Q20.54 18.91 20.54 17.69L20.54 11.93Q20.54 11.59 20.71 11.42Q20.88 11.26 21.31 11.06Q21.74 10.9 22.13 10.66Q22.8 10.25 23.04 9.71Q23.28 9.17 23.14 8.47L20.14 8.88ZM17.62 19.61Q17.21 19.66 16.9 19.57Q16.58 19.49 16.44 19.3Q16.25 19.08 16.37 18.72Q16.51 18.34 16.94 18.08Q17.38 17.83 18.17 17.52Q18.6 17.33 19.03 17.16L19.03 17.64Q19.03 18.36 18.78 18.92Q18.53 19.49 17.62 19.61Z" fill="rgba(254,249,255,1)"></path></g></svg>
\ No newline at end of file
diff --git a/products/watch/src/main/resources/base/media/layered_image.json b/products/watch/src/main/resources/base/media/layered_image.json
new file mode 100644
index 0000000000000000000000000000000000000000..fb49920440fb4d246c82f9ada275e26123a2136a
--- /dev/null
+++ b/products/watch/src/main/resources/base/media/layered_image.json
@@ -0,0 +1,7 @@
+{
+  "layered-image":
+  {
+    "background" : "$media:background",
+    "foreground" : "$media:foreground"
+  }
+}
\ No newline at end of file
diff --git a/products/watch/src/main/resources/base/media/my_favorite.svg b/products/watch/src/main/resources/base/media/my_favorite.svg
new file mode 100644
index 0000000000000000000000000000000000000000..837bf06c5176aa9258275c1e0370d1a59edb221a
--- /dev/null
+++ b/products/watch/src/main/resources/base/media/my_favorite.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" opacity="0"></rect><g mask="url(#hms_mask_0)"><path d="M12 2.02Q9.29 2.02 6.98 3.36Q4.68 4.7 3.34 7Q1.99 9.29 1.99 12Q1.99 14.71 3.34 17Q4.68 19.3 6.98 20.64Q9.29 21.98 12 21.98Q14.71 21.98 17 20.64Q19.3 19.3 20.64 17Q21.98 14.71 21.98 12Q21.98 9.29 20.64 7Q19.3 4.7 17 3.36Q14.71 2.02 12 2.02ZM12 20.5Q9.7 20.5 7.74 19.36Q5.78 18.22 4.64 16.26Q3.5 14.3 3.5 12Q3.5 9.7 4.64 7.74Q5.78 5.78 7.74 4.64Q9.7 3.5 12 3.5Q14.3 3.5 16.26 4.64Q18.22 5.78 19.36 7.74Q20.5 9.7 20.5 12Q20.5 14.3 19.36 16.26Q18.22 18.22 16.26 19.36Q14.3 20.5 12 20.5ZM12 9Q11.18 9 10.5 9.41Q9.82 9.82 9.41 10.5Q9 11.18 9 12Q9 12.82 9.41 13.51Q9.82 14.21 10.5 14.62Q11.18 15.02 12 15.02Q12.82 15.02 13.51 14.62Q14.21 14.21 14.62 13.51Q15.02 12.82 15.02 12Q15.02 11.18 14.62 10.5Q14.21 9.82 13.51 9.41Q12.82 9 12 9ZM12 13.51Q11.38 13.51 10.94 13.07Q10.51 12.62 10.51 12Q10.51 11.38 10.96 10.93Q11.4 10.49 12 10.49Q12.62 10.49 13.07 10.93Q13.51 11.38 13.51 12Q13.51 12.62 13.07 13.07Q12.62 13.51 12 13.51ZM11.57 5.38Q9.91 5.47 8.53 6.32Q7.15 7.18 6.3 8.57Q5.45 9.96 5.35 11.62Q5.33 12.1 5.69 12.3Q6.05 12.5 6.43 12.34Q6.82 12.17 6.86 11.69Q6.94 10.42 7.6 9.35Q8.26 8.28 9.34 7.62Q10.42 6.96 11.69 6.89Q12.14 6.84 12.29 6.46Q12.43 6.07 12.23 5.71Q12.02 5.35 11.57 5.38Z" fill="rgba(254,249,255,1)"></path></g><defs><mask id="hms_mask_0"><rect width="24" height="24" fill="#ffffff"></rect><g><path d="M22.44 15.1Q21.94 14.59 21.41 14.35Q20.88 14.11 20.28 14.06Q19.8 14.02 19.32 14.09Q18.84 14.16 18.29 14.4Q17.81 14.21 17.33 14.12Q16.85 14.04 16.32 14.06Q15.72 14.11 15.12 14.39Q14.52 14.66 14.09 15.1Q13.1 16.1 13.16 17.62Q13.22 19.13 14.28 20.52Q15.26 21.79 16.68 22.82Q17.11 23.14 17.52 23.28Q17.93 23.42 18.29 23.42Q18.67 23.42 19.12 23.27Q19.56 23.11 19.92 22.82Q20.64 22.37 21.23 21.78Q21.82 21.19 22.58 20.26Q23.18 19.44 23.39 18.48Q23.59 17.52 23.35 16.63Q23.11 15.74 22.44 15.1Z" fill="#000000"></path></g></mask></defs><g><path d="M18.34 22.46Q19.08 22.46 19.9 21.8Q20.71 21.14 21.35 20.26Q21.98 19.37 22.25 18.7Q22.44 18.26 22.44 17.52Q22.44 16.32 21.62 15.67Q20.81 15.02 19.73 15.02Q18.98 15.02 18.31 15.46Q17.62 15.02 16.87 15.02Q15.79 15.02 14.98 15.68Q14.16 16.34 14.16 17.5Q14.16 18.26 14.38 18.77Q14.59 19.42 15.29 20.3Q15.98 21.19 16.81 21.83Q17.64 22.46 18.34 22.46ZM21.05 17.69Q21.05 17.98 20.93 18.34Q20.78 18.77 20.3 19.44Q19.82 20.11 19.26 20.62Q18.7 21.12 18.34 21.12Q17.95 21.12 17.38 20.63Q16.8 20.14 16.3 19.49Q15.79 18.84 15.67 18.41Q15.55 17.98 15.55 17.71Q15.55 17.06 15.97 16.74Q16.39 16.42 16.87 16.44Q17.14 16.44 17.4 16.55Q17.66 16.66 17.83 16.82L17.93 16.92Q18.02 17.02 18.13 17.09Q18.24 17.16 18.31 17.16Q18.46 17.16 18.77 16.85Q18.94 16.68 19.21 16.56Q19.49 16.44 19.73 16.44Q20.23 16.44 20.64 16.75Q21.05 17.06 21.05 17.69Z" fill="rgba(254,249,255,1)"></path></g></svg>
\ No newline at end of file
diff --git a/products/watch/src/main/resources/base/media/next_btn.svg b/products/watch/src/main/resources/base/media/next_btn.svg
new file mode 100644
index 0000000000000000000000000000000000000000..873a96a3f3934747a8c2482ea0b9ae7e7880a6f8
--- /dev/null
+++ b/products/watch/src/main/resources/base/media/next_btn.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" opacity="0"></rect><g><path d="M6.29 5.83Q5.86 5.59 5.38 5.69Q4.9 5.78 4.57 6.14Q4.25 6.5 4.25 7.01L4.25 16.97Q4.25 17.47 4.57 17.84Q4.9 18.22 5.36 18.31Q5.83 18.41 6.29 18.17L14.9 13.18Q15.34 12.91 15.5 12.46Q15.67 12 15.5 11.54Q15.34 11.09 14.9 10.82L6.29 5.83ZM18.74 17.71Q19.15 17.71 19.45 17.42Q19.75 17.14 19.75 16.7L19.75 7.18Q19.75 6.77 19.45 6.47Q19.15 6.17 18.74 6.17Q18.34 6.17 18.05 6.47Q17.76 6.77 17.76 7.18L17.76 16.7Q17.76 17.14 18.05 17.42Q18.34 17.71 18.74 17.71Z" fill="rgba(255,255,255,1)"></path></g></svg>
\ No newline at end of file
diff --git a/products/watch/src/main/resources/base/media/pause_btn.svg b/products/watch/src/main/resources/base/media/pause_btn.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6b931769ca31ecf78dbeae95e6506e00dbc70fa0
--- /dev/null
+++ b/products/watch/src/main/resources/base/media/pause_btn.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" opacity="0"></rect><g><path d="M6.34 3Q5.69 3 5.16 3.31Q4.63 3.62 4.32 4.16Q4.01 4.7 4.01 5.35L4.01 18.65Q4.01 19.3 4.32 19.84Q4.63 20.38 5.16 20.69Q5.69 21 6.34 21L7.25 21Q7.9 21 8.44 20.69Q8.98 20.38 9.29 19.84Q9.6 19.3 9.6 18.65L9.6 5.35Q9.6 4.7 9.29 4.16Q8.98 3.62 8.44 3.31Q7.9 3 7.25 3L6.34 3ZM16.73 3Q16.1 3 15.56 3.31Q15.02 3.62 14.71 4.16Q14.4 4.7 14.4 5.35L14.4 18.65Q14.4 19.3 14.71 19.84Q15.02 20.38 15.56 20.69Q16.1 21 16.73 21L17.64 21Q18.29 21 18.83 20.69Q19.37 20.38 19.68 19.84Q19.99 19.3 19.99 18.65L19.99 5.35Q19.99 4.7 19.68 4.16Q19.37 3.62 18.83 3.31Q18.29 3 17.64 3L16.73 3Z" fill="rgba(254,249,255,1)"></path></g></svg>
\ No newline at end of file
diff --git a/products/watch/src/main/resources/base/media/play_btn.svg b/products/watch/src/main/resources/base/media/play_btn.svg
new file mode 100644
index 0000000000000000000000000000000000000000..78098f400d6bb2d3ebdabc651c57b0d89ee72ead
--- /dev/null
+++ b/products/watch/src/main/resources/base/media/play_btn.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" opacity="0"></rect><g><path d="M6.77 2.35Q5.95 1.9 5.08 2.06Q4.2 2.23 3.61 2.9Q3.02 3.58 3.02 4.51L3.02 19.46Q3.02 20.4 3.61 21.08Q4.2 21.77 5.08 21.94Q5.95 22.1 6.77 21.65L19.73 14.16Q20.54 13.7 20.83 12.85Q21.12 12 20.83 11.15Q20.54 10.3 19.73 9.84L6.77 2.35Z" fill="rgba(255,255,255,1)"></path></g></svg>
\ No newline at end of file
diff --git a/products/watch/src/main/resources/base/media/play_btn_fill.svg b/products/watch/src/main/resources/base/media/play_btn_fill.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0b004278380e9481e96763c2bf379eb2eb0e50e8
--- /dev/null
+++ b/products/watch/src/main/resources/base/media/play_btn_fill.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" opacity="0"></rect><g mask="url(#hms_mask_0)"><path d="M17.28 1.44Q14.69 0.65 11.48 1.56Q8.28 2.47 5.06 5.57Q1.97 8.57 1.36 11.2Q0.74 13.82 1.51 16.06Q1.94 17.3 3.38 18.74Q4.82 20.18 7.15 21.32Q9.48 22.46 12.41 22.8Q17.26 23.35 19.86 21.5Q22.46 19.66 22.87 14.83Q23.14 11.66 22.39 8.75Q21.65 5.83 20.24 3.88Q18.84 1.92 17.28 1.44Z" fill="rgba(254,249,255,1)"></path></g><defs><mask id="hms_mask_0"><rect width="24" height="24" fill="#ffffff"></rect><g><path d="M15.86 11.06Q16.32 11.33 16.5 11.9Q16.68 12.48 16.52 13.07Q16.37 13.66 15.91 13.92L11.57 16.42Q10.99 16.75 10.36 16.63Q9.72 16.51 9.29 16.04Q8.86 15.58 8.86 14.98L8.86 9.96Q8.86 9.36 9.29 8.92Q9.72 8.47 10.36 8.35Q10.99 8.23 11.54 8.54L15.86 11.06Z" fill="#000000"></path></g></mask></defs></svg>
\ No newline at end of file
diff --git a/products/watch/src/main/resources/base/media/playlist_bg1.png b/products/watch/src/main/resources/base/media/playlist_bg1.png
new file mode 100644
index 0000000000000000000000000000000000000000..3743af2116d88ad8ec06725c6b48db252106b8e4
Binary files /dev/null and b/products/watch/src/main/resources/base/media/playlist_bg1.png differ
diff --git a/products/watch/src/main/resources/base/media/playlist_bg2.png b/products/watch/src/main/resources/base/media/playlist_bg2.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec5ebf0553df24f59e5fba17f8e6f15b51a21600
Binary files /dev/null and b/products/watch/src/main/resources/base/media/playlist_bg2.png differ
diff --git a/products/watch/src/main/resources/base/media/previous_btn.svg b/products/watch/src/main/resources/base/media/previous_btn.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1740ea4acdd38df4f726459d5fbbf8f1487fcba6
--- /dev/null
+++ b/products/watch/src/main/resources/base/media/previous_btn.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" opacity="0"></rect><g><path d="M9.07 10.82Q8.64 11.09 8.47 11.54Q8.3 12 8.47 12.46Q8.64 12.91 9.07 13.18L17.71 18.17Q18.17 18.41 18.64 18.31Q19.1 18.22 19.43 17.84Q19.75 17.47 19.75 16.97L19.75 7.01Q19.75 6.5 19.43 6.14Q19.1 5.78 18.62 5.69Q18.14 5.59 17.71 5.83L9.07 10.82ZM5.26 17.71Q5.66 17.71 5.95 17.42Q6.24 17.14 6.24 16.7L6.24 7.18Q6.24 6.77 5.95 6.47Q5.66 6.17 5.26 6.17Q4.85 6.17 4.55 6.47Q4.25 6.77 4.25 7.18L4.25 16.7Q4.25 17.14 4.55 17.42Q4.85 17.71 5.26 17.71Z" fill="rgba(255,255,255,1)"></path></g></svg>
\ No newline at end of file
diff --git a/products/watch/src/main/resources/base/media/repeat.svg b/products/watch/src/main/resources/base/media/repeat.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e146ead47915e642eb5f4362413cf497a43a52ee
--- /dev/null
+++ b/products/watch/src/main/resources/base/media/repeat.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" opacity="0"></rect><g><path d="M16.66 7.27L19.63 7.27Q19.78 7.27 19.88 7.16Q19.99 7.06 19.99 6.91Q19.99 6.77 19.87 6.65L16.99 3.84Q16.9 3.72 16.75 3.72Q16.61 3.72 16.5 3.83Q16.39 3.94 16.39 4.08L16.39 5.76L7.32 5.76Q5.62 5.76 4.18 6.6Q2.74 7.44 1.9 8.88Q1.06 10.32 1.06 12Q1.06 13.63 1.85 15.05Q2.02 15.36 2.33 15.42Q2.64 15.48 2.88 15.34Q3.14 15.17 3.23 14.87Q3.31 14.57 3.17 14.3Q2.57 13.27 2.57 12Q2.57 10.7 3.2 9.62Q3.84 8.54 4.93 7.91Q6.02 7.27 7.32 7.27ZM22.15 8.95Q22.01 8.69 21.7 8.6Q21.38 8.52 21.12 8.66Q20.86 8.81 20.77 9.11Q20.69 9.41 20.83 9.67Q21.43 10.73 21.43 11.98Q21.43 13.27 20.8 14.36Q20.16 15.46 19.07 16.09Q17.98 16.73 16.68 16.73L7.34 16.73L4.37 16.73Q4.22 16.73 4.13 16.84Q4.03 16.94 4.03 17.09Q4.03 17.23 4.13 17.33L7.01 20.16Q7.1 20.26 7.25 20.26Q7.39 20.26 7.5 20.15Q7.61 20.04 7.61 19.9L7.61 18.22L16.68 18.22Q18.38 18.22 19.82 17.38Q21.26 16.54 22.1 15.1Q22.94 13.66 22.94 11.98Q22.94 10.32 22.15 8.95Z" fill="rgba(255,255,255,1)"></path></g></svg>
\ No newline at end of file
diff --git a/products/watch/src/main/resources/base/media/setting.svg b/products/watch/src/main/resources/base/media/setting.svg
new file mode 100644
index 0000000000000000000000000000000000000000..98cc6d8a4bda4a0402f4fd89d1ad5179f10a490c
--- /dev/null
+++ b/products/watch/src/main/resources/base/media/setting.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" opacity="0"></rect><g><path d="M12.02 9Q12.84 9 13.52 9.41Q14.21 9.82 14.6 10.51Q15 11.21 15 12.02Q15 12.84 14.6 13.52Q14.21 14.21 13.52 14.6Q12.84 15 12 15Q11.18 15 10.49 14.59Q9.79 14.18 9.4 13.49Q9 12.79 9 11.98Q9 11.16 9.41 10.48Q9.82 9.79 10.51 9.4Q11.21 9 12.02 9ZM12.05 7.51Q10.82 7.51 9.78 8.11Q8.74 8.71 8.12 9.73Q7.51 10.75 7.51 11.98Q7.51 13.2 8.11 14.24Q8.71 15.29 9.74 15.9Q10.78 16.51 12 16.51Q13.22 16.51 14.26 15.91Q15.29 15.31 15.9 14.28Q16.51 13.25 16.51 12.02Q16.51 10.8 15.91 9.77Q15.31 8.74 14.29 8.12Q13.27 7.51 12.05 7.51ZM13.56 22.66Q14.02 22.66 14.4 22.4Q14.78 22.15 14.98 21.74L15.79 19.85L15.98 19.75Q16.42 19.49 16.85 19.22L18.91 19.49Q19.39 19.54 19.8 19.33Q20.21 19.13 20.45 18.72L22.03 15.98Q22.27 15.58 22.24 15.12Q22.2 14.66 21.94 14.28L20.69 12.6L20.69 11.42L21.94 9.74Q22.22 9.36 22.25 8.9Q22.27 8.45 22.03 8.04L20.45 5.28Q20.23 4.9 19.82 4.68Q19.42 4.46 18.94 4.51L16.85 4.78Q16.42 4.46 15.86 4.2L15.02 2.23Q14.83 1.82 14.45 1.56Q14.06 1.3 13.61 1.3L10.44 1.3Q9.98 1.3 9.59 1.56Q9.19 1.82 9 2.23L8.16 4.2L7.92 4.34Q7.73 4.44 7.55 4.54Q7.37 4.63 7.2 4.75L5.09 4.51Q4.63 4.44 4.21 4.64Q3.79 4.85 3.55 5.26L1.97 8.02Q1.73 8.4 1.76 8.87Q1.8 9.34 2.06 9.72L3.34 11.42L3.34 12.53L2.06 14.23Q1.78 14.62 1.75 15.07Q1.73 15.53 1.97 15.94L3.53 18.67Q3.77 19.08 4.18 19.28Q4.58 19.49 5.06 19.44L7.13 19.2Q7.8 19.63 8.14 19.8L8.98 21.72Q9.14 22.15 9.53 22.4Q9.91 22.66 10.39 22.66L13.56 22.66ZM7.08 17.66L4.8 17.9L3.22 15.1L4.58 13.27Q4.8 12.94 4.8 12.6Q4.78 12.31 4.78 11.95Q4.78 11.59 4.8 11.3Q4.8 10.92 4.58 10.61L3.22 8.74L4.85 5.95L7.15 6.24Q7.37 6.26 7.55 6.22Q7.73 6.17 7.87 6.07Q8.3 5.76 8.93 5.47Q9.29 5.28 9.43 4.94L10.39 2.78L13.61 2.81L14.52 4.94Q14.64 5.26 15.02 5.47Q15.55 5.71 16.1 6.1Q16.46 6.34 16.82 6.26L19.13 6.02L20.71 8.83L19.37 10.63Q19.1 10.92 19.15 11.33Q19.18 11.64 19.18 12.01Q19.18 12.38 19.15 12.67Q19.13 13.06 19.37 13.37L20.71 15.19L19.08 17.98L16.85 17.71Q16.66 17.69 16.46 17.72Q16.27 17.76 16.13 17.88Q15.6 18.26 15 18.53Q14.83 18.62 14.69 18.76Q14.54 18.89 14.47 19.06L13.56 21.14L10.34 21.12L9.46 19.03Q9.29 18.67 8.95 18.5Q8.47 18.29 7.85 17.88Q7.58 17.69 7.25 17.69Z" fill="rgba(254,249,255,1)"></path></g></svg>
\ No newline at end of file
diff --git a/products/watch/src/main/resources/base/media/speaker_fill.svg b/products/watch/src/main/resources/base/media/speaker_fill.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0e9b38170c4310d099988184772eec6ef023cc29
--- /dev/null
+++ b/products/watch/src/main/resources/base/media/speaker_fill.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" opacity="0"></rect><g><path d="M16.56 21.07Q17.04 20.83 17.33 20.38Q17.62 19.92 17.62 19.39L17.62 4.58Q17.62 4.06 17.33 3.61Q17.04 3.17 16.56 2.93Q16.06 2.69 15.54 2.76Q15.02 2.83 14.62 3.17L9.74 7.08L6.02 7.08Q5.38 7.08 4.81 7.4Q4.25 7.73 3.92 8.28Q3.6 8.83 3.6 9.48L3.6 14.52Q3.6 15.17 3.92 15.72Q4.25 16.27 4.8 16.6Q5.35 16.92 6.02 16.92L9.77 16.92L14.62 20.83Q15.02 21.17 15.59 21.23Q16.15 21.29 16.56 21.07Z" fill="#FE1B48"></path></g></svg>
\ No newline at end of file
diff --git a/products/watch/src/main/resources/base/media/startIcon.png b/products/watch/src/main/resources/base/media/startIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..205ad8b5a8a42e8762fbe4899b8e5e31ce822b8b
Binary files /dev/null and b/products/watch/src/main/resources/base/media/startIcon.png differ
diff --git a/products/watch/src/main/resources/base/profile/backup_config.json b/products/watch/src/main/resources/base/profile/backup_config.json
new file mode 100644
index 0000000000000000000000000000000000000000..78f40ae7c494d71e2482278f359ec790ca73471a
--- /dev/null
+++ b/products/watch/src/main/resources/base/profile/backup_config.json
@@ -0,0 +1,3 @@
+{
+  "allowToBackupRestore": true
+}
\ No newline at end of file
diff --git a/products/watch/src/main/resources/base/profile/main_pages.json b/products/watch/src/main/resources/base/profile/main_pages.json
new file mode 100644
index 0000000000000000000000000000000000000000..55c3f007f87b7ce5206d325f968cc56f2f79441f
--- /dev/null
+++ b/products/watch/src/main/resources/base/profile/main_pages.json
@@ -0,0 +1,5 @@
+{
+  "src": [
+    "pages/Index"
+  ]
+}
\ No newline at end of file
diff --git a/products/watch/src/main/resources/base/profile/router_map.json b/products/watch/src/main/resources/base/profile/router_map.json
new file mode 100644
index 0000000000000000000000000000000000000000..12b3ff12fa24cf000ef6408cda5748fd00cd7c22
--- /dev/null
+++ b/products/watch/src/main/resources/base/profile/router_map.json
@@ -0,0 +1,19 @@
+{
+  "routerMap" : [
+    {
+      "name" : "playList",
+      "pageSourceFile"  : "src/main/ets/view/PlayList.ets",
+      "buildFunction" : "PlayListBuilder"
+    },
+    {
+      "name" : "songList",
+      "pageSourceFile"  : "src/main/ets/view/SongList.ets",
+      "buildFunction" : "SongListBuilder"
+    },
+    {
+      "name" : "songPage",
+      "pageSourceFile"  : "src/main/ets/view/SongPage.ets",
+      "buildFunction" : "SongPageBuilder"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/products/watch/src/main/resources/en_US/element/string.json b/products/watch/src/main/resources/en_US/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..324307dde82780388e6d75c763c01e7417904fa0
--- /dev/null
+++ b/products/watch/src/main/resources/en_US/element/string.json
@@ -0,0 +1,48 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "WatchAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "WatchAbility_label",
+      "value": "label"
+    },
+    {
+      "name": "home_hottest_playlists",
+      "value": "hottest Playlists"
+    },
+    {
+      "name": "home_my_favorite",
+      "value": "My Favorite"
+    },
+    {
+      "name": "home_is_playing",
+      "value": "Is Playing"
+    },
+    {
+      "name": "home_setting",
+      "value": "Setting"
+    },
+    {
+      "name": "playlist_name_one",
+      "value": "Popular Playlists "
+    },
+    {
+      "name": "playlist_name_two",
+      "value": "Exercise Music "
+    },
+    {
+      "name": "playlist_title_one",
+      "value": "New independent singer-songwriter"
+    },
+    {
+      "name": "playlist_title_two",
+      "value": "Pleasant jogging "
+    }
+  ]
+}
\ No newline at end of file
diff --git a/products/watch/src/main/resources/zh_CN/element/string.json b/products/watch/src/main/resources/zh_CN/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..adf5fb63588a9fd5f2e386c7358a415c58bb558a
--- /dev/null
+++ b/products/watch/src/main/resources/zh_CN/element/string.json
@@ -0,0 +1,48 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "WatchAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "WatchAbility_label",
+      "value": "label"
+    },
+    {
+      "name": "home_hottest_playlists",
+      "value": "热门歌单"
+    },
+    {
+      "name": "home_my_favorite",
+      "value": "我喜欢"
+    },
+    {
+      "name": "home_is_playing",
+      "value": "正在播放"
+    },
+    {
+      "name": "home_setting",
+      "value": "设置"
+    },
+    {
+      "name": "playlist_name_one",
+      "value": "热门歌单"
+    },
+    {
+      "name": "playlist_name_two",
+      "value": "运动音乐"
+    },
+    {
+      "name": "playlist_title_one",
+      "value": "新锐独立唱作人"
+    },
+    {
+      "name": "playlist_title_two",
+      "value": "惬意慢跑"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/screenshots/device/wearable.png b/screenshots/device/wearable.png
new file mode 100644
index 0000000000000000000000000000000000000000..be1a81e2c985f0a444c673ce5458e4b2158c25d6
Binary files /dev/null and b/screenshots/device/wearable.png differ