diff --git a/README.en.md b/README.en.md
new file mode 100644
index 0000000000000000000000000000000000000000..9a403a006f32b04f3b5962f5440a23191438291d
--- /dev/null
+++ b/README.en.md
@@ -0,0 +1,60 @@
+# ArkUI Component Encapsulation
+
+### Overview
+
+This sample describes three typical scenarios of ArkUI component encapsulation: common component encapsulation, dialog component encapsulation, and component factory encapsulation.
+
+### Preview
+
+| Home page                                             | Common component                                                                              | Dialog component                                                                              | Component factory                                                                               |
+|-------------------------------------------------------|-----------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------|
+| <img src="screenshots/device/index.en.png" width=320> | <img src="screenshots/device/common.en.png" width=320> | <img src="screenshots/device/dialog.en.png" width=320> | <img src="screenshots/device/factory.en.png" width=320> |
+
+### How to Use
+
+On the home page, tap the corresponding button to access the page for common component encapsulation, dialog component encapsulation, or component factory encapsulation.
+
+### Project Directory
+
+```
+├──entry/src/main/ets/
+│  ├──common
+│  │  └──CommonConstants.ets         // Common constants
+│  ├──entryability
+│  │  └──EntryAbility.ets            // Entry ability
+│  ├──model
+│  │  ├──AttributeModifier.ets       // AttributeModifier interface
+│  │  ├──GetResourceString.ets       // Resource-to-string conversion function
+│  │  └──PopViewUtils.ets            // Custom pop-up window
+│  ├──pages
+│  │  ├──CommonComponent.ets         // Common component
+│  │  ├──ComponentFactory.ets        // Component factory
+│  │  ├──DialogComponent.ets         // Dialog component
+│  │  └──Index.ets                   // Home page
+│  └──view
+│     ├──CustomImageText.ets         // Custom image and text component
+│     └──FactoryMap.ets              // Component factory
+└──entry/src/main/resources          // Static resources of the app
+```
+
+### How to Implement
+
+1. Common component encapsulation: The **attributeModifier** method is provided, and the **AttributeModifier** API is implemented through the custom class to extend the system component attributes.
+
+2. Dialog component encapsulation: The **PromptAction** object obtained from **UIContext** is used to encapsulate the custom dialog box. The **openCustomDialog** API in the **PromptAction** object is used to open the dialog box, and the **closeCustomDialog** API is used to close the dialog box.
+
+3. Component factory encapsulation: The **Map** structure is used to store encapsulated components. The provider encapsulates the factory components using the global **@Builder** method, wraps the global **@Builder** method using the **wrapBuilder** function, and stores the return as the **value** of the component factory **Map**. The corresponding component is obtained based on the **key** value of **Map**.
+
+### Permissions
+
+N/A
+
+### Constraints
+
+1. The sample is only supported on Huawei phones with standard systems.
+
+2. The HarmonyOS version must be HarmonyOS NEXT Release or later.
+
+3. The DevEco Studio version must be DevEco Studio NEXT Release or later.
+
+4. The HarmonyOS SDK version must be HarmonyOS NEXT Release SDK or later.
\ No newline at end of file
diff --git a/oh-package.json5 b/oh-package.json5
index bb12751b97530b9a3504e56e8ed09d8c9ba1fa52..8bf916d4a165e0466c65bc49f58ab2e3c27e8931 100644
--- a/oh-package.json5
+++ b/oh-package.json5
@@ -4,7 +4,5 @@
   "dependencies": {
   },
   "devDependencies": {
-    "@ohos/hypium": "1.0.19",
-    "@ohos/hamock": "1.0.0"
   }
 }
diff --git a/screenshots/device/common.en.png b/screenshots/device/common.en.png
new file mode 100644
index 0000000000000000000000000000000000000000..a9fa688b73c52d29cd2a1184b51c5a6b52921a1a
Binary files /dev/null and b/screenshots/device/common.en.png differ
diff --git a/screenshots/device/dialog.en.png b/screenshots/device/dialog.en.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b262671f8b5c64420b1129fddea9310a1e6d33a
Binary files /dev/null and b/screenshots/device/dialog.en.png differ
diff --git a/screenshots/device/factory.en.png b/screenshots/device/factory.en.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ea7265ebc1a14d4206c7086f53efb9f9857b111
Binary files /dev/null and b/screenshots/device/factory.en.png differ
diff --git a/screenshots/device/index.en.png b/screenshots/device/index.en.png
new file mode 100644
index 0000000000000000000000000000000000000000..40901d1ec68094ff6862a3df97f630f3511ef0f6
Binary files /dev/null and b/screenshots/device/index.en.png differ