diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md
index 33e0654aaa787c1ee4bd58e7d198653463a32c80..68d1c22f59642c5fb0d1460c4c3be13481fb9210 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md
@@ -2,6 +2,7 @@
 
 
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+>
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
@@ -21,7 +22,8 @@ Supported
 ## APIs
 
 - Button(options?: {type?: ButtonType, stateEffect?: boolean})
-    **Table1** options parameters
+  
+  **Table 1** options parameters
   
   | Name | Type | Mandatory | Default Value | Description |
   | -------- | -------- | -------- | -------- | -------- |
@@ -30,14 +32,15 @@ Supported
 
 
 - Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })
+  
   Creates a button component based on text content. In this case, the **<Button>** component cannot contain child components.
 
-    **Table2** value parameters
-  
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | label | string | No | - | Button text. |
-  | options | Object | No | - | For details, see the **options** parameters. |
+  **Table 2** value parameters
+
+| Name | Type | Mandatory | Default Value | Description |
+| -------- | -------- | -------- | -------- | -------- |
+| label | string | No | - | Button text. |
+| options | Object | No | - | For details, see the **options** parameters. |
 
 
 ## Attributes
diff --git a/en/application-dev/ui/figures/en-us_image_0000001189744672.png b/en/application-dev/ui/figures/en-us_image_0000001189744672.png
new file mode 100644
index 0000000000000000000000000000000000000000..926b023516156e8daa94afee4b9d2769d0e2547e
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001189744672.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001190463780.png b/en/application-dev/ui/figures/en-us_image_0000001190463780.png
new file mode 100644
index 0000000000000000000000000000000000000000..30b7d2bb30c9f9a2cd8b3419285267b6be4f0143
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001190463780.png differ
diff --git a/en/application-dev/ui/ui-js-overview.md b/en/application-dev/ui/ui-js-overview.md
index 39612e9d878502f3a855b24dae62eee1ea8b5436..e69b8f2553764abe0420e13febb351faaaadb724 100644
--- a/en/application-dev/ui/ui-js-overview.md
+++ b/en/application-dev/ui/ui-js-overview.md
@@ -1,8 +1,9 @@
 # Overview
 
-
 The web-like development paradigm uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically updates with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. It could be helpful if you are developing small- and medium-sized applications with simple UIs.
 
+For details about the components, see [Component Reference (JavaScript-based Web-like Development Paradigm)](../reference/arkui-js/js-components-common-attributes.md). 
+
 
 ## Overall Architecture
 
diff --git a/en/application-dev/ui/ui-ts-basic-components-button.md b/en/application-dev/ui/ui-ts-basic-components-button.md
index cbbcab6f9333b56013b67d7bed7cbd45e5d98d42..e43a42df91c43c8e605d84617f853d58e2b235a3 100644
--- a/en/application-dev/ui/ui-ts-basic-components-button.md
+++ b/en/application-dev/ui/ui-ts-basic-components-button.md
@@ -1,15 +1,16 @@
 # Button
 
 
-The **\<Button>** component is usually activated by user clicks to perform a specific action, for example, submitting a form. Buttons are classified as capsule, circle, or normal buttons.
+The **\<Button>** component is usually activated by user clicks to perform a specific action, for example, submitting a form. Buttons are classified as capsule, circle, or normal buttons. For details, see [Button](../reference/arkui-ts/ts-basic-components-button.md).
 
 
 ## Creating a Button
 
-You can create a button by invoking either of the following APIs:
+You can create a button that contains or does not contain child components.
 
-- Button(options?: {type?: ButtonType, stateEffect?: boolean})
-  This API creates a button that contains child components. In the syntax, **type** indicates the button type, and **stateEffect** indicates whether to enable the click effect for the button.
+- Create a button that contains child components.
+
+  `Button(options?: {type?: ButtonType, stateEffect?: boolean})`, where `type` indicates the button type, and `stateEffect` indicates whether to enable the click effect for the button.
 
 
   ```
@@ -23,8 +24,9 @@ You can create a button by invoking either of the following APIs:
 
   ![en-us_image_0000001260555857](figures/en-us_image_0000001260555857.png)
 
-- Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })
-  This API creates a button that does not contain any child components. In the syntax, **label** indicates whether the created button contains child components.
+- Create a button that does not contain child components.
+
+  `Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })`, where `label` indicates whether the button contains child components.
 
 
   ```
@@ -74,9 +76,10 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or
     .borderRadius(20)
   ```
 
-  ![en-us_image_0000001215645452](figures/en-us_image_0000001215645452.png)
+  ![en-us_image_0000001190463780](figures/en-us_image_0000001190463780.png)
 
-- Setting Text Styles
+- Set the text style:
+  
   Add a font style for text displayed on the button.
 
 
@@ -87,9 +90,10 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or
     .fontWeight(800)
   ```
 
-  ![en-us_image_0000001215965420](figures/en-us_image_0000001215965420.png)
+  ![en-us_image_0000001189744672](figures/en-us_image_0000001189744672.png)
 
 - Set the background color:
+  
   You can do so by adding the **backgroundColor** attribute.
 
 
@@ -100,6 +104,7 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or
   ![en-us_image_0000001235146483](figures/en-us_image_0000001235146483.png)
 
 - Assign a function to the button:
+  
   In this example, we are creating a button with the delete function.
 
 
@@ -168,6 +173,7 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
 
 
 - Using the Button for Submitting Forms
+  
   On the user login/registration page, you can use a button to submit a login or registration request.
 
 
diff --git a/en/application-dev/ui/ui-ts-overview.md b/en/application-dev/ui/ui-ts-overview.md
index bb34ef82c1acff6cbbb552461d07f6021dcc3e61..9c0b3ec07c524a87b8327ef447d516d501255330 100644
--- a/en/application-dev/ui/ui-ts-overview.md
+++ b/en/application-dev/ui/ui-ts-overview.md
@@ -8,20 +8,26 @@ The TypeScript-based declarative development paradigm of ArkUI is a simplified,
 
 In ArkUI that uses the TypeScript-based declarative development paradigm, the programming mode is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development. The UI capabilities are provided from three dimensions: component, animation, and state management. System capability APIs are also provided to allow for effortless invocation of system capabilities.
 
+For details about the UI components, see [Component Reference (TypeScript-based Declarative Development Paradigm)](../reference/arkui-ts/ts-universal-events-click.md).
+
 
 - Out-of-the-box components
+  
   A wide range of preset system components are provided. You can set the rendering effect of these components in method chaining mode. You can combine system components to form custom components. In this way, page components are divided into independent UI units to implement independent creation, development, and reuse of different units on pages, making pages more engineering-oriented.
 
 
 - A diverse array of animation APIs
+  
   By drawing from the standard SVG drawing capability and various open animation APIs, you can customize animation tracks by encapsulating physical models or calling the provided APIs.
 
 
 - State and data management
+  
   State data management provides clear page update and rendering processes and pipes through decorators with different functions. State management covers UI component states and application states. With these features, you are able to build an application-wide data update and UI rendering process.
 
 
 - System capability APIs
+  
   Development has never been so easy, with a diverse array of encapsulated system capability APIs, from UI design to system capability invoking.
 
 
@@ -32,16 +38,21 @@ In ArkUI that uses the TypeScript-based declarative development paradigm, the pr
 ![en-us_image_0000001223287712](figures/en-us_image_0000001223287712.png)
 
 - Declarative UI frontend
-  Provides basic language specifications of the UI development paradigm, built-in UI components, layouts, and animations, and multiple state management mechanisms, with a wide array of APIs for you to call as required.
-
+  
+Provides basic language specifications of the UI development paradigm, built-in UI components, layouts, and animations, and multiple state management mechanisms, with a wide array of APIs for you to call as required.
+  
 - Language runtime
-  Provides the parsing capability for the UI paradigm syntax and allows for cross-language API calls for a high-performance running environment of the TS language.
-
+  
+Provides the parsing capability for the UI paradigm syntax and allows for cross-language API calls for a high-performance running environment of the TS language.
+  
 - Declarative UI backend engine
-  Provides UI rendering pipelines that are compatible with different development paradigms, multiple basic components, layout calculation, dynamic effects, and interaction events, with state management and drawing capabilities.
-
+  
+Provides UI rendering pipelines that are compatible with different development paradigms, multiple basic components, layout calculation, dynamic effects, and interaction events, with state management and drawing capabilities.
+  
 - Render engine
-  Provides efficient drawing capabilities, which enable rendering instructions collected by the rendering pipeline to be drawn to the screen.
-
+  
+Provides efficient drawing capabilities, which enable rendering instructions collected by the rendering pipeline to be drawn to the screen.
+  
 - Porting layer
+  
   Provides abstract APIs to connect to different systems, such as system rendering pipelines and lifecycle scheduling.