diff --git a/core/core-frontend/src/assets/dynamic-background/dynamic_background1.gif b/core/core-frontend/src/assets/dynamic-background/dynamic_background1.gif
new file mode 100644
index 0000000000..09e16646ee
Binary files /dev/null and b/core/core-frontend/src/assets/dynamic-background/dynamic_background1.gif differ
diff --git a/core/core-frontend/src/assets/dynamic-background/dynamic_background2.gif b/core/core-frontend/src/assets/dynamic-background/dynamic_background2.gif
new file mode 100644
index 0000000000..34e29036b6
Binary files /dev/null and b/core/core-frontend/src/assets/dynamic-background/dynamic_background2.gif differ
diff --git a/core/core-frontend/src/assets/dynamic-background/dynamic_background3.gif b/core/core-frontend/src/assets/dynamic-background/dynamic_background3.gif
new file mode 100644
index 0000000000..b5de1cffef
Binary files /dev/null and b/core/core-frontend/src/assets/dynamic-background/dynamic_background3.gif differ
diff --git a/core/core-frontend/src/assets/dynamic-background/dynamic_background4.gif b/core/core-frontend/src/assets/dynamic-background/dynamic_background4.gif
new file mode 100644
index 0000000000..e29580de5e
Binary files /dev/null and b/core/core-frontend/src/assets/dynamic-background/dynamic_background4.gif differ
diff --git a/core/core-frontend/src/assets/svg/dv_decoration.svg b/core/core-frontend/src/assets/svg/dv_decoration.svg
new file mode 100644
index 0000000000..fd99f6d709
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/dv_decoration.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1752113357103" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4638" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M513.536 959.488c-244.992 0-444.2624-199.3216-444.2624-444.2624 0-244.992 199.3216-444.2624 444.2624-444.2624 244.992 0 444.2624 199.3216 444.2624 444.2624 0 244.9408-199.2704 444.2624-444.2624 444.2624z m0-816.896c-205.4656 0-372.5824 167.168-372.5824 372.5824 0 205.4656 167.168 372.5824 372.5824 372.5824 205.4656 0 372.5824-167.168 372.5824-372.5824s-167.1168-372.5824-372.5824-372.5824z" p-id="4639"></path><path d="M777.8816 570.4704V355.3792h-93.3888v61.44h31.9488v92.2112H476.672v73.0112H419.2256v251.4944h173.568v-251.4944H538.112v-11.5712h239.7696z m-256.768 191.3856h-30.208v-108.1344h30.208v108.1344z"  p-id="4640"></path><path d="M698.9312 489.0624H279.9104v-212.48h419.0208v212.48z m-347.3408-71.68h275.6608v-69.12H351.5904v69.12z"  p-id="4641"></path></svg>
diff --git a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
index fe5f1f8bfd..c76c6ba1e2 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
@@ -11,6 +11,7 @@ import icon_graphical from '@/assets/svg/icon_graphical.svg'
 import icon_search from '@/assets/svg/icon_search.svg'
 import other_material_board from '@/assets/svg/other_material_board.svg'
 import dv_dynamic_background from '@/assets/svg/dv_dynamic_background.svg'
+import dv_decoration from '@/assets/svg/dv_decoration.svg'
 import other_material_icon from '@/assets/svg/other_material_icon.svg'
 import scrollText from '@/assets/svg/scroll-text.svg'
 import areaOrigin from '@/assets/svg/area-origin.svg'
@@ -290,6 +291,7 @@ const iconMap = {
   icon_search: icon_search,
   other_material_board: other_material_board,
   dv_dynamic_background: dv_dynamic_background,
+  dv_decoration: dv_decoration,
   other_material_icon: other_material_icon,
   'scroll-text': scrollText,
   'area-origin': areaOrigin,
diff --git a/core/core-frontend/src/custom-component/common/ComponentConfig.ts b/core/core-frontend/src/custom-component/common/ComponentConfig.ts
index 2d45cdeddf..5f628ab744 100644
--- a/core/core-frontend/src/custom-component/common/ComponentConfig.ts
+++ b/core/core-frontend/src/custom-component/common/ComponentConfig.ts
@@ -82,85 +82,85 @@ export const CANVAS_MATERIAL = [
       {
         value: 'DeDecoration1',
         type: 'de_decoration',
-        title: t('visualization.decoration_name', [11]),
+        title: t('visualization.decoration_name', [1]),
         icon: 'DeDecoration1'
       },
       {
         value: 'DeDecoration2',
         type: 'de_decoration',
-        title: t('visualization.decoration_name', [12]),
+        title: t('visualization.decoration_name', [2]),
         icon: 'DeDecoration2'
       },
       {
         value: 'DeDecoration3',
         type: 'de_decoration',
-        title: t('visualization.decoration_name', [12]),
+        title: t('visualization.decoration_name', [3]),
         icon: 'DeDecoration3'
       },
       {
         value: 'DeDecoration4',
         type: 'de_decoration',
-        title: t('visualization.decoration_name', [12]),
+        title: t('visualization.decoration_name', [4]),
         icon: 'DeDecoration4'
       },
       {
         value: 'DeDecoration5',
         type: 'de_decoration',
-        title: t('visualization.decoration_name', [12]),
+        title: t('visualization.decoration_name', [5]),
         icon: 'DeDecoration5'
       },
       {
         value: 'DeBoard1',
         type: 'de_decoration',
-        title: t('visualization.decoration_name', [1]),
+        title: t('visualization.decoration_name', [6]),
         icon: 'DeBoard1'
       },
       {
         value: 'DeBoard2',
         type: 'de_decoration',
-        title: t('visualization.decoration_name', [2]),
+        title: t('visualization.decoration_name', [7]),
         icon: 'DeBoard2'
       },
       {
         value: 'DeBoard3',
         type: 'de_decoration',
-        title: t('visualization.decoration_name', [3]),
+        title: t('visualization.decoration_name', [8]),
         icon: 'DeBoard3'
       },
       {
         value: 'DeBoard4',
         type: 'de_decoration',
-        title: t('visualization.decoration_name', [4]),
+        title: t('visualization.decoration_name', [9]),
         icon: 'DeBoard4'
       },
       {
         value: 'DeBoard5',
         type: 'de_decoration',
-        title: t('visualization.decoration_name', [5]),
+        title: t('visualization.decoration_name', [10]),
         icon: 'DeBoard5'
       },
       {
         value: 'DeBoard6',
         type: 'de_decoration',
-        title: t('visualization.decoration_name', [6]),
+        title: t('visualization.decoration_name', [11]),
         icon: 'DeBoard6'
       },
       {
         value: 'DeBoard7',
         type: 'de_decoration',
-        title: t('visualization.decoration_name', [7]),
+        title: t('visualization.decoration_name', [12]),
         icon: 'DeBoard7'
       },
       {
         value: 'DeBoard8',
         type: 'de_decoration',
-        title: t('visualization.decoration_name', [8]),
+        title: t('visualization.decoration_name', [13]),
         icon: 'DeBoard8'
       },
       {
         value: 'DeBoard10',
         type: 'de_decoration',
-        title: t('visualization.decoration_name', [10]),
+        title: t('visualization.decoration_name', [14]),
         icon: 'DeBoard10'
       }
     ]
diff --git a/core/core-frontend/src/custom-component/component-group/CommonGroup.vue b/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
index 561b148fcb..23f5e6e5da 100644
--- a/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
@@ -49,6 +49,10 @@ const groupActiveChange = category => {
   state.curCategory = category
   anchorPosition('#' + category)
 }
+
+const findUrl = name => {
+  return new URL(`/src/assets/dynamic-background/${name}`, import.meta.url).href
+}
 </script>
 
 <template>
@@ -95,7 +99,7 @@ const groupActiveChange = category => {
             <img
               v-else-if="['dynamic_background'].includes(chartInfo.type)"
               class="item-top-icon"
-              :src="`./dynamic-background/${chartInfo.icon}`"
+              :src="findUrl(chartInfo.icon)"
               alt=""
             />
             <DeDecoration
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index 24a57d557e..107edb3715 100644
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@@ -495,10 +495,10 @@ const list = [
   },
   {
     component: 'DeDecoration',
-    name: t('visualization.dynamic_background'),
-    label: t('visualization.dynamic_background'),
+    name: t('visualization.decoration'),
+    label: t('visualization.decoration'),
     propValue: '&nbsp;',
-    icon: 'dv_dynamic_background',
+    icon: 'dv_decoration',
     style: {
       width: 400,
       height: 300,
diff --git a/core/core-frontend/src/custom-component/dynamic_background/Component.vue b/core/core-frontend/src/custom-component/dynamic_background/Component.vue
index 00c18ededb..7d7d013d16 100644
--- a/core/core-frontend/src/custom-component/dynamic_background/Component.vue
+++ b/core/core-frontend/src/custom-component/dynamic_background/Component.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="circle-shape">
-    <img class="dynamic-shape" :src="`./dynamic-background/${element.innerType}`" alt="" />
+    <img class="dynamic-shape" :src="findUrl(element.innerType)" alt="" />
   </div>
 </template>
 
@@ -15,6 +15,10 @@ defineProps({
     }
   }
 })
+
+const findUrl = name => {
+  return new URL(`/src/assets/dynamic-background/${name}`, import.meta.url).href
+}
 </script>
 
 <style lang="less" scoped>