diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/data_quality.png b/dolphinscheduler-ui-next/src/assets/images/task-icons/data_quality.png
new file mode 100644
index 0000000000..bf2f83e206
Binary files /dev/null and b/dolphinscheduler-ui-next/src/assets/images/task-icons/data_quality.png differ
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/data_quality_hover.png b/dolphinscheduler-ui-next/src/assets/images/task-icons/data_quality_hover.png
new file mode 100644
index 0000000000..e6affd6ff1
Binary files /dev/null and b/dolphinscheduler-ui-next/src/assets/images/task-icons/data_quality_hover.png differ
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-sidebar.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-sidebar.tsx
index 4dfe8c78e4..0dedf45cae 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-sidebar.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-sidebar.tsx
@@ -20,7 +20,7 @@ import {
   TaskType,
   TASK_TYPES_MAP
 } from '@/views/projects/task/constants/task-type'
-import Styles from './dag.module.scss'
+import styles from './dag.module.scss'
 
 export default defineComponent({
   name: 'workflow-dag-sidebar',
@@ -32,10 +32,10 @@ export default defineComponent({
     }))
 
     return () => (
-      <div class={Styles.sidebar}>
+      <div class={styles.sidebar}>
         {allTaskTypes.map((task) => (
           <div
-            class={Styles.draggable}
+            class={styles.draggable}
             draggable='true'
             onDragstart={(e) => {
               context.emit('dragStart', e, task.type as TaskType)
@@ -43,10 +43,10 @@ export default defineComponent({
           >
             <em
               class={[
-                Styles['sidebar-icon'],
-                Styles['icon-' + task.type.toLocaleLowerCase()]
+                styles['sidebar-icon'],
+                styles['icon-' + task.type.toLocaleLowerCase()]
               ]}
-            ></em>
+            />
             <span>{task.alias}</span>
           </div>
         ))}
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag.module.scss b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag.module.scss
index a7a6eff10d..c019be98ee 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag.module.scss
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag.module.scss
@@ -107,6 +107,9 @@ $bgLight: #ffffff;
     &.icon-sub_process {
       background-image: url('@/assets/images/task-icons/sub_process.png');
     }
+    &.icon-data_quality {
+      background-image: url('@/assets/images/task-icons/data_quality.png');
+    }
     &.icon-procedure {
       background-image: url('@/assets/images/task-icons/procedure.png');
     }
@@ -162,6 +165,9 @@ $bgLight: #ffffff;
       &.icon-sub_process {
         background-image: url('@/assets/images/task-icons/sub_process_hover.png');
       }
+      &.icon-data_quality {
+        background-image: url('@/assets/images/task-icons/data_quality_hover.png');
+      }
       &.icon-procedure {
         background-image: url('@/assets/images/task-icons/procedure_hover.png');
       }