diff --git a/README.en.md b/README.en.md
new file mode 100644
index 0000000000000000000000000000000000000000..02cb42586a856c828d0f11236082cfdc234f1375
--- /dev/null
+++ b/README.en.md
@@ -0,0 +1,47 @@
+# Implementing Interactions Between ArkTS and HTML5
+
+## Overview
+
+This sample focuses on illustrating the interactions between ArkTS and HTML5. It uses the scenario of recharge to show how methods can be called between the ArkTS and HTML5 sides, helping you understand their interactions.
+
+## Preview
+![SelectContact](screenshots/device/SelectContact_en.gif)
+
+## How to Use
+
+1. On the home page of the application, touch the button to access the recharge page.
+2. Touch the contact icon on the right to display the Contacts screen. Select a contact, and the contact information is returned asynchronously.
+3. Select an amount and touch the recharge button at the bottom. A toast is displayed.
+
+## Project Directory
+
+```
+├──entry/src/main/ets                         // Code area
+│  ├──entryability
+│  │  └──EntryAbility.ets       
+│  ├──entrybackupability
+│  │  └──EntryBackupAbility.ets           
+│  └──pages
+│     ├──Index.ets                            // Home page
+│     └──SelectContact.ets                    // Recharge page
+└──entry/src/main/resources                   // Application resources
+```
+
+## How to Implement
+
+1. On the ArkTS side, implement the chooseContact method to call the system contact interface to display the contact list and retrieve the selected contact's information.
+2. Call javaScriptProxy or registerJavaScriptProxy to register the JS object and the chooseContact method.
+3. Call the chooseContact method on the HTML5 side.
+4. Implement the recharge method on the HTML5 side.
+5. Call runJavaScript on the ArkTS side to invoke the recharge method of the HTML5 side.
+
+## Permissions
+
+None.
+
+## Constraints
+
+1. The sample is only supported on Huawei phones with standard systems.
+2. The HarmonyOS version must be HarmonyOS 5.0.0 Release or later.
+3. The DevEco Studio version must be DevEco Studio 5.0.0 Release or later.
+4. The HarmonyOS SDK version must be HarmonyOS 5.0.0 Release SDK or later.
diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets
index b53ba902a23dbee042b65d6168c9bade5d10b167..6cb0f513f8a2a38ec541259177412dcc0f94220b 100644
--- a/entry/src/main/ets/pages/Index.ets
+++ b/entry/src/main/ets/pages/Index.ets
@@ -19,7 +19,6 @@ import { SelectContact } from './SelectContact';
 @Component
 struct Index {
   @Provide('NavPathStack') pageStack: NavPathStack = new NavPathStack();
-  @State pageTitle: string = getContext(this).resourceManager.getStringSync($r('app.string.mobile_phone_recharge'));
 
   @Builder
   PagesMap(name: string) {
@@ -27,7 +26,7 @@ struct Index {
       NavDestination() {
         SelectContact();
       }
-      .title(this.pageTitle)
+      .title($r('app.string.mobile_phone_recharge'))
       .backgroundColor('#F1F3F5')
       .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
     }
diff --git a/screenshots/device/SelectContact_en.gif b/screenshots/device/SelectContact_en.gif
new file mode 100644
index 0000000000000000000000000000000000000000..d030075e6082cbfb46cc799077b1e33a85f6c7ac
Binary files /dev/null and b/screenshots/device/SelectContact_en.gif differ