diff --git a/en/application-dev/quick-start/arkts-restrictions-and-extensions.md b/en/application-dev/quick-start/arkts-restrictions-and-extensions.md
index fa62ed392100f7ff0b60dcc6e8ee66ef465fbb3a..1c1a9a2ed4066f2d55badd2a02e0421a9a01f09b 100644
--- a/en/application-dev/quick-start/arkts-restrictions-and-extensions.md
+++ b/en/application-dev/quick-start/arkts-restrictions-and-extensions.md
@@ -83,7 +83,7 @@ struct bindPopupPage {
     }
     ```
 
-    ![datePicker](../../application-dev/reference/arkui-ts/figures/datePicker.gif)
+    ![datePicker](figures/restrictions-data-type-declarations.gif)
 
 2. The data type declaration of the **@State**, **@Provide**, **@Link**, or **@Consume** decorated state variables can consist of only one of the primitive data types or reference data types.
 
@@ -232,3 +232,26 @@ struct Child {
   }
 }
 ```
+
+## Restrictions on Naming Custom Components, Classes, and Functions
+
+The name of a custom component, class, or function cannot be the same as any system component name.
+
+Example:
+
+```
+// Rect.ets
+export class Rect {
+  constructor(){}
+}
+// Index.ets
+// ERROR: The module name 'Rect' can not be the same as the inner component name.
+import { Rect } from './Rect';
+@Entry
+@Component
+struct Index {
+  build() {
+    
+  }
+}
+```
diff --git a/en/application-dev/quick-start/figures/restrictions-data-type-declarations.gif b/en/application-dev/quick-start/figures/restrictions-data-type-declarations.gif
new file mode 100644
index 0000000000000000000000000000000000000000..52ee9ca7eb42b521cf879e364c95694ca698b834
Binary files /dev/null and b/en/application-dev/quick-start/figures/restrictions-data-type-declarations.gif differ