diff --git a/README_EN.md b/README_EN.md
new file mode 100644
index 0000000000000000000000000000000000000000..3241a4600bf86588416f0e4ece33939e309ce67e
--- /dev/null
+++ b/README_EN.md
@@ -0,0 +1,115 @@
+## Multi-Column Control
+
+### Overview
+
+This sample shows the responsive change effect of the multi-column control in various scenarios.
+
+The SideBarContainer and Navigation components are used, and their application scenarios are as follows:
+
+* A+B+C: combination of the SideBarContainer and Navigation components
+* A+C: SideBarContainer component
+* B+C: Navigation component
+
+### Preview
+
+Below are the preview effects.
+
+**A+B+C**:
+
+| 360vp                                  | 600vp                                  | 840vp                                  |
+|----------------------------------------|----------------------------------------|----------------------------------------|
+| ![](screenshots/Devices/image3_EN.png) | ![](screenshots/Devices/image2_EN.png) | ![](screenshots/Devices/image1_EN.png) |
+
+**A+C**:
+
+| 360vp                                  | 600vp                                  |
+|----------------------------------------|----------------------------------------|
+| ![](screenshots/Devices/image8_EN.png) | ![](screenshots/Devices/image7_EN.png) |
+
+**B+C**:
+
+| 360vp                                   | 600vp                                  |
+|-----------------------------------------|----------------------------------------|
+| ![](screenshots/Devices/image10_EN.png) | ![](screenshots/Devices/image9_EN.png) |
+
+### How to Use
+
+1. Check the page effects in the Previewer.
+
+2. Enable the window drag mode in the previewer and drag the window to view the responsive changes of the component, as shown in the following figure.
+![](screenshots/Devices/image11.png)
+
+### Project Directory
+
+```
+├──entry/src/main/ets                         // Code area
+│  ├──application                                  
+│  │  ├──MailBox.ets                          // Mailbox
+│  │  ├──PhotoAlbum.ets                       // Photo album
+│  │  └──Settings.ets                         // Settings
+│  ├──common  
+│  │  ├──BreakpointSystem.ets                 // Breakpoint system
+│  │  ├──MailContent.ets                      // Mail content
+│  │  ├──MailNavigation.ets                   // Mailbox navigation
+│  │  ├──MailSideBar.ets                      // Sidebar of the mailbox
+│  │  ├──PhotoContent.ets            	      // Photo details
+│  │  ├──PhotoSideBar.ets             	      // Photo sidebar    
+│  │  ├──SettingItem.ets             	      // Setting item 
+│  │  └──WlanItem.ets                         // WLAN details page
+│  ├──entryability  
+│  │  └──EntryAbility.ets         
+│  ├──model  
+│  │  └──dataType.ets                         // Sidebar menu data type
+│  └──pages                                    
+│     └──Index.ets                            // Home page
+└──entry/src/main/resources                   // App resource directory
+
+```
+
+### How to Implement
+
+* The SideBarContainer component implements the function of automatically hiding the sidebar using **minContentWidth** and **minSideBarWidth** attributes. When the display type of the **SideBarContainer** component is set to **SideBarContainerType.AUTO** and the window width reaches the total boundary value of **minContentWidth** and **minSideBarWidth**, the sidebar is automatically hidden.
+
+* The Navigation component implements the function of automatically hiding the sidebar using the **minContentWidth** attribute. When the content area of the **Navigation** component reaches the value of **minContentWidth**, the navigation bar is automatically hidden.
+
+  
+
+**Responsive Rules**
+
+**Scenario 1: A+B+C**
+
+1. When the width of the previewer window is greater than 840vp, columns A, B, and C are displayed. When the previewer window is zoomed in or out, column C is changed first.
+2. When the width of the previewer window is less than or equal to 840vp and greater than 600vp, columns B and C are displayed. When the previewer window is zoomed in or out, column C is changed first.
+3. When the width of the previewer window is less than or equal to 600vp and greater than 360vp, only column C is displayed.
+
+**Scenario 2: A+C**
+
+1. When the width of the previewer window is greater than 600vp, columns A and C are displayed. When the previewer window is zoomed in or out, column C is changed first.
+2. When the width of the previewer window is less than or equal to 600vp and greater than 360vp, only column C is displayed.
+
+
+
+**Scenario 3: B+C**
+
+1. When the width of the previewer window is greater than 600vp, columns B and C are displayed. When the previewer window is zoomed in or out, column C is changed first.
+
+2. When the width of the previewer window is less than or equal to 600vp and greater than 360vp, only column C is displayed.
+   
+
+### Required Permissions
+
+N/A
+
+### Dependencies
+
+N/A
+
+### Constraints
+
+1. The sample app is supported only on Huawei phones running the standard system.
+
+2. The HarmonyOS version must be HarmonyOS NEXT Developer Beta1 or later.
+
+3. The DevEco Studio version must be DevEco Studio NEXT Developer Beta1 or later.
+
+4. The HarmonyOS SDK version must be HarmonyOS NEXT Developer Beta1 or later.
diff --git a/screenshots/Devices/image10_EN.png b/screenshots/Devices/image10_EN.png
new file mode 100644
index 0000000000000000000000000000000000000000..e6c63d38f4088e05f134a437b441a597c0b896a9
Binary files /dev/null and b/screenshots/Devices/image10_EN.png differ
diff --git a/screenshots/Devices/image1_EN.png b/screenshots/Devices/image1_EN.png
new file mode 100644
index 0000000000000000000000000000000000000000..beb5e74528bf2d4dcfa9440263e39597ef33c941
Binary files /dev/null and b/screenshots/Devices/image1_EN.png differ
diff --git a/screenshots/Devices/image2_EN.png b/screenshots/Devices/image2_EN.png
new file mode 100644
index 0000000000000000000000000000000000000000..48554e72d7a063c8f52593bed4adf384d97046e4
Binary files /dev/null and b/screenshots/Devices/image2_EN.png differ
diff --git a/screenshots/Devices/image3_EN.png b/screenshots/Devices/image3_EN.png
new file mode 100644
index 0000000000000000000000000000000000000000..c746f8efc02ca5ae0f4cc89e4eb533fcf3c41bcb
Binary files /dev/null and b/screenshots/Devices/image3_EN.png differ
diff --git a/screenshots/Devices/image7_EN.png b/screenshots/Devices/image7_EN.png
new file mode 100644
index 0000000000000000000000000000000000000000..e4877872e4487ff12100ef7546dc3d70a08d38ac
Binary files /dev/null and b/screenshots/Devices/image7_EN.png differ
diff --git a/screenshots/Devices/image8_EN.png b/screenshots/Devices/image8_EN.png
new file mode 100644
index 0000000000000000000000000000000000000000..424f559aa3a4937a50dec8c89a5a46fd19fb12e3
Binary files /dev/null and b/screenshots/Devices/image8_EN.png differ
diff --git a/screenshots/Devices/image9_EN.png b/screenshots/Devices/image9_EN.png
new file mode 100644
index 0000000000000000000000000000000000000000..8b15cd8393f45fa478a4f093968277f025bdd30e
Binary files /dev/null and b/screenshots/Devices/image9_EN.png differ