diff --git a/en/application-dev/ui/ts-component-based-preview.md b/en/application-dev/ui/ts-component-based-preview.md
index 703e4d41a434d66d32a25ab941c1a98da977a7e0..c0fffb15c2772842dfb1ac223abc848a1496e458 100644
--- a/en/application-dev/ui/ts-component-based-preview.md
+++ b/en/application-dev/ui/ts-component-based-preview.md
@@ -1,10 +1,10 @@
 # @Preview
 
 
-Custom components decorated by @Preview can be previewed in the Previewer of DevEco Studio. When the page is loaded, the custom components decorated by @Preview are created and displayed.
+You can use @Preview to decorate a custom component so that it can be previewed in DevEco Studio. This component is created and displayed when the page where it is located is loaded.
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
 > In a source file, at most one custom component can be decorated by @Preview.