diff --git a/en/application-dev/ui/figures/en-us_image_00000011.gif b/en/application-dev/ui/figures/en-us_image_00000011.gif
new file mode 100644
index 0000000000000000000000000000000000000000..9dd23bf2e649eb1e9c7a71281a8f26dcd90d6f26
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_00000011.gif differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001176075554.gif b/en/application-dev/ui/figures/en-us_image_0000001176075554.gif
new file mode 100644
index 0000000000000000000000000000000000000000..16e7ff213bd5caf5a9802001d3ced2996c66e0bc
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001176075554.gif differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001227701867.gif b/en/application-dev/ui/figures/en-us_image_0000001227701867.gif
new file mode 100644
index 0000000000000000000000000000000000000000..0cbcaa3ff368a2a2ad63c8729acc0f66ae874437
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001227701867.gif differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003541.gif b/en/application-dev/ui/figures/en-us_image_0000001276003541.gif
deleted file mode 100644
index 7d8da86f2f1cf71ca9bc5d6cb65564bb64ae5fd1..0000000000000000000000000000000000000000
Binary files a/en/application-dev/ui/figures/en-us_image_0000001276003541.gif and /dev/null differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001276162773.gif b/en/application-dev/ui/figures/en-us_image_0000001276162773.gif
deleted file mode 100644
index 9e313e1e87059572aa036b06881381da7b070641..0000000000000000000000000000000000000000
Binary files a/en/application-dev/ui/figures/en-us_image_0000001276162773.gif and /dev/null differ
diff --git a/en/application-dev/ui/ui-js-building-ui-event.md b/en/application-dev/ui/ui-js-building-ui-event.md
index 8ab6becdd9af00f34e2d4429d380d6b4decab92e..fd188d02e9bc4aa81d6c639362ae07dd1cbc46d9 100644
--- a/en/application-dev/ui/ui-js-building-ui-event.md
+++ b/en/application-dev/ui/ui-js-building-ui-event.md
@@ -49,16 +49,18 @@ The following is an example:
 ```css
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 .text-container {
-  margin-top: 10px;
+  margin-top: 30px;
   flex-direction: column;
-  width: 750px;
-  height: 50px;
-  background-color: #09ba07;
+  width: 600px;
+  height: 70px;
+  background-color: #0000FF;
 }
 .text-style {
   width: 100%;
@@ -100,3 +102,5 @@ export default {
   },
 }
 ```
+
+![en-us_image_00000011](figures/en-us_image_00000011.gif)
\ No newline at end of file
diff --git a/en/application-dev/ui/ui-js-components-canvas.md b/en/application-dev/ui/ui-js-components-canvas.md
index 9442d5d0fada4ac969e060264238df2b4cb4c65e..9f92788d41e3d1d62fb1eb3dd9df413ef2a9944c 100644
--- a/en/application-dev/ui/ui-js-components-canvas.md
+++ b/en/application-dev/ui/ui-js-components-canvas.md
@@ -115,12 +115,10 @@ Add the long press event to the **<canvas>** component. When the event is
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   data:{
     dataURL:null,
-    antialia: false,
-    porc:'open',
   },
   onShow(){
     let el = this.$refs.canvas1;
@@ -131,7 +129,7 @@ export default {
     let el = this.$refs.canvas1
     let dataUrl = el.toDataURL()
     this.dataURL = dataUrl;
-    prompt.showToast({duration:2000,message:"long press,get dataURL"})
+    promptAction.showToast({duration:2000,message:"long press,get dataURL"})
   }
 }
 ```
diff --git a/en/application-dev/ui/ui-js-components-marquee.md b/en/application-dev/ui/ui-js-components-marquee.md
index 4f6ded26a943e9d3b4301b01a8432e4224342323..844caa67cb1066cc7f5bb7f8f2ca61a766d8c0ee 100644
--- a/en/application-dev/ui/ui-js-components-marquee.md
+++ b/en/application-dev/ui/ui-js-components-marquee.md
@@ -79,7 +79,7 @@ Set the **scrollamount**, **loop**, and **direction** attributes to define the m
 <div class="tutorial-page">
   <div class="mymarquee">
     <marquee loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext" id="testmarquee" onclick="makestart">
-      It's a racing lamp
+      Life is a journey, not the destination.
     </marquee>
   </div>
   <div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;">
@@ -128,7 +128,9 @@ button{
 // xxx.js
 export default {
   private: {
-    loopval: -1,    scroll: 10,    isleft: "left",
+    loopval: -1,
+    scroll: 10,    
+    isleft: "left",
   },
   onInit(){
   },
@@ -148,7 +150,7 @@ export default {
 >
 > When the value of **loop** is less than or equal to 0, the marquee scrolls continuously. If **loop** is not set, the default value **-1** is used.
 
-![en-us_image_0000001276162773](figures/en-us_image_0000001276162773.gif)
+![en-us_image_0000001227701867](figures/en-us_image_0000001227701867.gif)
 
 
 ## Example Scenario
@@ -164,7 +166,7 @@ Set **loop** to **1**. When scrolling ends, trigger a **finish** event to increa
   <div class="mymarquee">
     <marquee  style="color: {{color1}}" loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext" 
     id="testmarquee" onfinish="setfinish">
-      It's a racing lamp
+      Life is a journey, not the destination.
     </marquee>
   </div>
   <div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;">
@@ -233,4 +235,4 @@ export default {
 }
 ```
 
-![en-us_image_0000001276003541](figures/en-us_image_0000001276003541.gif)
+![en-us_image_0000001176075554](figures/en-us_image_0000001176075554.gif)
diff --git a/en/application-dev/ui/ui-js-components-search.md b/en/application-dev/ui/ui-js-components-search.md
index 9426b2431c21b3b86822f47e7a8ecbf3a3328ed6..126a08496409cdabb4699c86fddc2680e6504247 100644
--- a/en/application-dev/ui/ui-js-components-search.md
+++ b/en/application-dev/ui/ui-js-components-search.md
@@ -62,7 +62,7 @@ Set the **hint**, **icon**, and **searchbutton** to define the hint text, icon,
 
 ## Adding Styles
 
-Set **color**, **placeholder**, and **caret-color** to set the text color, hint text color, and cursor color of the search box.
+Set **color**, **placeholder-color**, and **caret-color** to set the text color, hint text color, and cursor color of the search box.
 
 
 ```html
@@ -84,7 +84,9 @@ Set **color**, **placeholder**, and **caret-color** to set the text color, hint
   background-color: #F1F3F5;
 }
 search{
-  color: black;  placeholder-color: black;  caret-color: red;
+  color: black;
+  placeholder-color: black;
+  caret-color: red;
 }
 ```
 
@@ -130,34 +132,34 @@ text{
 
 ```js
 // index.js
-import prompt from '@system.prompt'
+import promptAction from '@ohos.promptAction'
 export default {
   search(e){
-    prompt.showToast({
+    promptAction.showToast({
       message:  e.value,
       duration: 3000,
     });
   },
   translate(e){
-    prompt.showToast({
+    promptAction.showToast({
       message:  e.value,
       duration: 3000,
     });
   },
   share(e){
-    prompt.showToast({
+    promptAction.showToast({
       message:  e.value,
       duration: 3000,
     });
   },
   change(e){
-    prompt.showToast({
+    promptAction.showToast({
       message:  e.value,
       duration: 3000,
     });
   },
   submit(e){
-    prompt.showToast({
+    promptAction.showToast({
       message: 'submit',
       duration: 3000,
     });
@@ -216,7 +218,7 @@ In this example, you can select the **&lt;search&gt;**, **&lt;textarea&gt;**, or
 
 ```js
 // index.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   data: {
     showsearch: true,
@@ -241,13 +243,13 @@ export default {
     }
   },
   submit(e) {
-    prompt.showToast({
+    promptAction.showToast({
       message: 'Search!',
       duration: 2000
     })
   },
   change(e) {
-    prompt.showToast({
+    promptAction.showToast({
       message: 'Content:'+ e.text,
       duration: 2000
     })