diff --git a/zh-cn/third-party-components/hpm-third-party-guide.md b/zh-cn/third-party-components/hpm-third-party-guide.md
deleted file mode 100644
index 745904a616be5d732c1a8544034ac30f78629710..0000000000000000000000000000000000000000
--- a/zh-cn/third-party-components/hpm-third-party-guide.md
+++ /dev/null
@@ -1 +0,0 @@
-待hpm包发布后完善该文档......
\ No newline at end of file
diff --git a/zh-cn/third-party-components/npm-third-party-guide.md b/zh-cn/third-party-components/npm-third-party-guide.md
index 6596f3aebb201deb9446959ec1f7c788b4900edc..e9231f9f6d748935f668594cc5fde1e22c12a9a6 100644
--- a/zh-cn/third-party-components/npm-third-party-guide.md
+++ b/zh-cn/third-party-components/npm-third-party-guide.md
@@ -1,55 +1,51 @@
 # OpenHarmony JS/TS三方组件使用指导
 ## OpenHarmony JS/TS三方组件介绍
 
-OpenHarmony JS/TS三方组件是以OpenHarmony npm包的形式，在传统的npm三方组件的基础上，定义了OpenHarmony npm共享包特定的工程结构和配置文件，支持OpenHarmony页面组件相关API、资源的调用。通过OpenHarmony npm包，您可以实现多个模块或者多个工程共享OpenHarmony页面、资源等相关代码。前往[npm官方文档](https://docs.npmjs.com/about-npm)，您可以了解和掌握npm的基础功能和机制。
+OpenHarmony JS/TS三方组件是以OpenHarmony npm包的形式，在传统的npm三方组件的基础上，定义了OpenHarmony npm共享包特定的工程结构和配置文件，支持OpenHarmony页面组件相关API、资源的调用。通过OpenHarmony npm包，可以实现多个模块或者多个工程共享OpenHarmony页面、资源等相关代码。前往[npm官方文档](https://docs.npmjs.com/about-npm)，可以了解和掌握npm的基础功能和机制。
 
 
 
 ## 查找OpenHarmony JS/TS三方组件
 
-a.关注Gitee官网OpenHarmony-TPC[三方组件资源汇总](https://gitee.com/openharmony-tpc/tpc_resource)项目，根据目录索引即可找到对应分类下的具体组件。
+1. 关注Gitee官网OpenHarmony-TPC[三方组件资源汇总](https://gitee.com/openharmony-tpc/tpc_resource)项目，根据目录索引即可找到对应分类下的具体组件。
 
 
 
-b.访问[OpenHarmony官网](https://www.openharmony.cn/mainPlay/tpc)，通过类型，分类，以及关键字搜索需要的三方组件。
-![official-website.png](official-website.png)
+2. 访问[OpenHarmony官网](https://www.openharmony.cn/mainPlay/tpc)，通过类型，分类，以及关键字搜索需要的三方组件。
+   ![official-website.png](official-website.png)
 
 
 
 ## 安装并使用OpenHarmony JS/TS语言的三方组件
 
-在应用开发的过程中，JS/TS语言的三方组件，通常以源码或OpenHarmony npm包的方式被引入使用。您可以按照以下步骤将OpenHarmony npm包引入应用并使用，源码的具体引入及使用请参考各三方组件README.md指导介绍。
+在应用开发的过程中，JS/TS语言的三方组件，通常以源码或OpenHarmony npm包的方式被引入使用。按照以下步骤即可将OpenHarmony npm包引入应用并使用，源码的具体引入及使用请参考各三方组件README.md指导介绍。
 
 1. 配置OpenHarmony npm环境，详情请参考安装教程 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md)。
 
 2. 在Terminal项目终端中，进入entry目录，并执行目标组件命令进行安装。具体的下载命令详见OpenHarmony官网该三方组件的“下载安装“模块。
 
-![npm-usage1.png](npm-usage1.png)
+   以安装[vcard三方组件](https://growing.openharmony.cn/mainPlay/libraryMaps/vcard_595)为例，找到“下载安装”模块获取其安装命令，并执行该命令安装：
 
-   以安装vcard三方组件为例，依赖包会存储在工程的node_modules目录下@ohos\vcard下。
+   ![npm-usage1.png](npm-usage1.png)
+   
+   ![npm-usage2.png](npm-usage2.png)
 
-```
-npm install @ohos/vcard
-```
+3. 下载完成后在项目文件下自动生成node_modules文件，下载的三方库即node_modules目录下的@ohos\VCard。
 
-![npm-usage2.png](npm-usage2.png)
-
-3. 下载完成后在项目文件下自动生成node_modules文件，下载的三方库就在node_modules文件夹下。
-
-![npm-usage3.png](npm-usage3.png)
+   ![npm-usage3.png](npm-usage3.png)
 
 4. 在package.json中会自动添加如下依赖：
 
-```
-"dependencies": {
-  "@ohos/vcard": "^2.0.5"
-}
-```
-
+   ```
+   "dependencies": {
+     "@ohos/vcard": "^2.0.5"
+   }
+   ```
+   
 5. 在需要使用该组件的文件中导入组件。
 
-![npm-usage4.png](npm-usage4.png)
+   ![npm-usage4.png](npm-usage4.png)
 
 6. 导入组件后直接使用方法即可。
 
-![npm-usage5.png](npm-usage5.png)
\ No newline at end of file
+   ![npm-usage5.png](npm-usage5.png)
\ No newline at end of file
diff --git a/zh-cn/third-party-components/official-website.png b/zh-cn/third-party-components/official-website.png
index 9747ab1dde415ab0f438721cc428882520a231e2..cf814196da68758b0dcee94c1f69edb3fd501f34 100644
Binary files a/zh-cn/third-party-components/official-website.png and b/zh-cn/third-party-components/official-website.png differ