diff --git a/en/application-dev/application-models/arkts-ui-widget-page-animation.md b/en/application-dev/application-models/arkts-ui-widget-page-animation.md
index ff479a47e17cadc04c38ecdc3931b5aa1b3d687f..8764b64a48ad1d810352c0848d8f1df7f3cc5459 100644
--- a/en/application-dev/application-models/arkts-ui-widget-page-animation.md
+++ b/en/application-dev/application-models/arkts-ui-widget-page-animation.md
@@ -17,25 +17,29 @@ The following sample code implements the animation effect of button rotation:
 
 ![WidgetAnimation](figures/WidgetAnimation.gif)
 
+
+
 ```ts
 @Entry
 @Component
-struct AttrAnimationExample {
+struct AnimationCard {
   @State rotateAngle: number = 0;
 
   build() {
-    Column() {
+    Row() {
       Button('change rotate angle')
+        .height('20%')
+        .width('90%')
+        .margin('5%')
         .onClick(() => {
-          this.rotateAngle = 90;
+          this.rotateAngle = (this.rotateAngle === 0 ? 90 : 0);
         })
-        .margin(50)
         .rotate({ angle: this.rotateAngle })
         .animation({
           curve: Curve.EaseOut,
-          playMode: PlayMode.AlternateReverse
+          playMode: PlayMode.Normal,
         })
-    }.width('100%').margin({ top: 20 })
+    }.height('100%').alignItems(VerticalAlign.Center)
   }
 }
 ```
diff --git a/en/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md b/en/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md
index 3fb83498972a425ef11821c3292a74bbdb81016d..a9d0495b7de986411b95a0e7e8f1fa4467fd0bd0 100644
--- a/en/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md
+++ b/en/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md
@@ -6,7 +6,7 @@ You can apply custom drawing in your ArkTS widget to create a more vibrant exper
 ```ts
 @Entry
 @Component
-struct WidgetCard {
+struct CanvasCard {
   private canvasWidth: number = 0;
   private canvasHeight: number = 0;
   // Initialize CanvasRenderingContext2D and RenderingContextSettings.