diff --git a/README.en.md b/README.en.md
new file mode 100644
index 0000000000000000000000000000000000000000..79c1b91022d34187e322782ce505eb34de82b97f
--- /dev/null
+++ b/README.en.md
@@ -0,0 +1,80 @@
+# Web Lucky Draw Case
+
+## Introduction
+
+This codelab gives an example of ArkTS declarative development, introducing how the **Web** component loads H5 or Vue pages on the local or cloud server.
+
+![image](screenshots/device/web.en.gif)
+
+## Concepts
+
+- Web: displays web pages.
+- runJavaScript: runs a JavaScript script. This API uses an asynchronous callback to return the script execution result.
+
+## Permissions
+
+**ohos.permission.INTERNET**, required for accessing online web pages.
+
+## How to Use
+
+#### Server setup process
+
+1. Set up the Node.js environment. The server in this codelab is implemented based on Node.js. You need to install Node.js. If you already have a Node.js environment, skip this step.
+   1. Check whether Node.js is installed on the local PC. Open the command line tool (for example, **cmd** in Windows or **Terminal** in the macOS. Windows is used here). Enter the **node -v** command. If the version information is displayed, Node.js has been successfully installed.
+      ![](screenshots/device/node.PNG)
+   2. If you do not have the Node.js environment on your local PC, download the required version from the Node.js official website and install it.
+   3. After the environment variables are configured, open the command line tool again and enter **node -v**. If the version information is displayed, the installation is successful.
+2. Run the server code.
+   1. Run the H5 server code. Open the command line tool in the **HttpServerOfWeb** directory of this project, enter **npm install** to install the server dependency package. If the installation is successful, enter **npm start** and press **Enter**. If you see message "The server is started successfully", the server is running properly.
+   ![](screenshots/device/npm.PNG)
+   2. Run the Vue server code. Open the command line tool in the **HttpServerOfVue** directory of this project, enter **npm install** to install the server dependency package. If the installation is successful, enter **npm run dev** and press **Enter**. If a link is displayed, the server can be started normally.
+   ![](screenshots/device/img.png)
+3. Build a LAN environment: When testing this codelab, ensure that the PCs for running the server code and testing are connected to the same LAN. You can enable your personal hotspot on your mobile phone, and then connect both PCs to your mobile phone hotspot for testing.
+4. Connect to the server address: Open the command line tool, run the **ipconfig** command to view the local IP address, and copy the local IP address to the **entry/src/main/ets/common/constants/Constants.ets** file. If the H5 server is running, modify the **CLOUD_PATH** variable. If the Vue server is running, modify the **VUE_CLOUD_PATH** variable. Note that only the IP address needs to be replaced. Do not change the port number. After saving the IP address, run the codelab to perform the test.
+
+#### Frontend instructions
+
+1. There are four buttons on the app home page, which are used for loading H5 or Vue pages on the local or cloud server respectively. The **Web** component loads the lucky draw page.
+2. The lucky draw page consists of the Lucky Draw button and **Web** component. Bind a tap event to the Lucky Draw button to call the related function of the H5/Vue page, which returns the lucky draw result through **runjavascript** and displays the result in a dialog box on the native page.
+3. Tap the back button to return to the app home page.
+
+#### H5/Vue code description
+
+1. When loading local H5 pages, you do not need to perform other operations. The **Web** component directly reads the H5 resources in **entry/src/main/resource/rawfile/local**.
+2. When loading cloud H5 pages, you need to run the H5 server according to the server setup process in the previous section.
+3. When loading local Vue pages, you need to package the Vue project in the **HttpServerOfVue** directory. The **Web** component can load only static resources and cannot directly run the packaged Vue file. You need to modify the packaged **index.html** file.
+   1. Change `<script src="./public/communication.js"></script>` to `<script src="./communication.js"></script>`.
+   2. Add a `<script>` tag. The content is as follows:
+
+```typescript
+    <script>
+      (function (win) {
+        let scripts = document.getElementsByTagName('script')
+        for(let i = 0; i < scripts.length; i++) {
+          let script = scripts[i]
+          let url = script.getAttribute("src")
+          let type = script.getAttribute("type")
+          let scriptText = script.innerHTML
+          if (url || type === "module") {
+            let tag=document.createElement('script');
+            tag.setAttribute('url',url);
+            tag.innerHTML = scriptText
+            script.remove()
+            document.getElementsByTagName('head')[0].appendChild(tag)
+          }
+        }
+      })(window)
+    </script>
+```
+
+4. When loading cloud Vue pages, you need to run the Vue server according to the server setup process in the previous section.
+
+## 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: DevEco Studio 5.0.0 Release SDK or later.
diff --git a/README.md b/README.md
index 89cc446672fd26aef8cc34c68867fe5c653ae2b2..d29312b7a822910630437d83aa2b6ef13f2741f8 100755
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Web组件抽奖案例
+# 基于Web组件实现随机抽奖功能
 
 ## 简介
 
@@ -72,6 +72,6 @@
 ## 约束与限制
 
 1. 本示例仅支持标准系统上运行，支持设备：华为手机。
-2. HarmonyOS系统：HarmonyOS NEXT Developer Beta1及以上。
-3. DevEco Studio版本：DevEco Studio NEXT Developer Beta1及以上。
-4. HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta1 SDK及以上。
+2. HarmonyOS系统：HarmonyOS 5.0.0 Release及以上。
+3. DevEco Studio版本：DevEco Studio 5.0.0 Release及以上。
+4. HarmonyOS SDK版本：HarmonyOS 5.0.0 Release SDK及以上。