diff --git a/README.en.md b/README.en.md
new file mode 100644
index 0000000000000000000000000000000000000000..9d0182ca89e70c4cf7448fe13382cef1dda947b0
--- /dev/null
+++ b/README.en.md
@@ -0,0 +1,43 @@
+# Instant Messaging
+
+### Introduction
+
+Learn to implement an instant messaging app based on the adaptive layout and responsive layout, achieving one-time development for multi-device deployment.
+
+#### Description
+
+This codelab implements an instant messaging app based on the adaptive layout and responsive layout, achieving one-time development for multi-device deployment. It uses the three-layer project architecture for code reuse and tailors the pages to different device sizes such as mobile phones, foldable phones, and 2-in-1 devices.
+The following figure shows the effect on the mobile phone:
+
+![](screenshots/device/phone_EN.png)
+
+The following figure shows the effect on the foldable phone in unfolded state:
+
+![](screenshots/device/foldable_EN.png)
+
+The following figure shows the effect on the 2-in-1 device:
+
+![](screenshots/device/pad_EN.png)
+
+#### Concepts
+
+- One-time development for multi-device deployment: It enables you to develop and release one set of project code for deployment on multiple devices as demanded. This feature enables you to efficiently develop applications that are compatible with multiple devices while providing distributed user experiences for cross-device transferring, migration, and collaboration.
+- Adaptive layout: When the size of an external container changes, elements can automatically change based on the relative relationship to adapt to the external container. Relative relationships include the proportion, fixed aspect ratio, and display priority. Common adaptive layouts include linear, stacking, flexbox, and relative layouts. These capabilities enable the GUI to continuously change with the size of the external container.
+- Responsive layout: When the size of an external container changes, elements can automatically change based on the breakpoints, grids, or specific features (such as the screen direction and window width and height) to adapt to the external container.
+- Navigation: This component is the root container of pages, usually used in the split-view layout.
+
+#### Permissions
+
+N/A.
+
+#### How to Use
+
+- 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.
+- Tap Message, Contacts, or Social Circle at the bottom to switch to the corresponding tab page. By default, the Message tab page is displayed.
+
+#### Constraints
+
+1. The sample app is supported only on Huawei phones running the standard system.
+2. HarmonyOS: HarmonyOS NEXT Developer Beta 1 or later
+3. DevEco Studio: DevEco Studio NEXT Developer Beta 1 or later
+4. HarmonyOS SDK: HarmonyOS NEXT Developer Beta 1 SDK or later
\ No newline at end of file
diff --git a/screenshots/device/foldable_EN.png b/screenshots/device/foldable_EN.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d7b6ad297bb6232288a1ab2ddd4751165a37e52
Binary files /dev/null and b/screenshots/device/foldable_EN.png differ
diff --git a/screenshots/device/pad_EN.png b/screenshots/device/pad_EN.png
new file mode 100644
index 0000000000000000000000000000000000000000..72e879b2a431160394da02a201d1fd117332cfbb
Binary files /dev/null and b/screenshots/device/pad_EN.png differ
diff --git a/screenshots/device/phone_EN.png b/screenshots/device/phone_EN.png
new file mode 100644
index 0000000000000000000000000000000000000000..d91f74fa6378c2e46eb2de46c4002ed6b5361084
Binary files /dev/null and b/screenshots/device/phone_EN.png differ