diff --git a/core/core-frontend/src/assets/svg/dv-screen-spine.svg b/core/core-frontend/src/assets/svg/dv-screen-spine.svg
index d4f97fb4bb..5da41060dd 100644
--- a/core/core-frontend/src/assets/svg/dv-screen-spine.svg
+++ b/core/core-frontend/src/assets/svg/dv-screen-spine.svg
@@ -1,4 +1,4 @@
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 3C0 1.34315 1.59845 0 3.57025 0H14.4298C16.4015 0 18 1.34315 18 3V15C18 16.6569 16.4015 18 14.4298 18H3.57025C1.59845 18 0 16.6569 0 15V3Z" fill="#3370FF"/>
+<path d="M0 3C0 1.34315 1.59845 0 3.57025 0H14.4298C16.4015 0 18 1.34315 18 3V15C18 16.6569 16.4015 18 14.4298 18H3.57025C1.59845 18 0 16.6569 0 15V3Z" fill="#00d6b9"/>
 <path d="M13.25 4.5C13.3826 4.5 13.5098 4.55268 13.6036 4.64645C13.6973 4.74021 13.75 4.86739 13.75 5V11C13.75 11.1326 13.6973 11.2598 13.6036 11.3536C13.5098 11.4473 13.3826 11.5 13.25 11.5H10.0337L11.5822 12.8762L10.9177 13.6237L9 11.9187L7.08225 13.6237L6.41775 12.8762L7.966 11.5H4.75C4.61739 11.5 4.49021 11.4473 4.39645 11.3536C4.30268 11.2598 4.25 11.1326 4.25 11V5C4.25 4.86739 4.30268 4.74021 4.39645 4.64645C4.49021 4.55268 4.61739 4.5 4.75 4.5H13.25ZM12.75 5.5H5.25V10.5H12.75V5.5ZM10.7192 6.3965L11.4262 7.1035L9.05875 9.471L7.90425 8.31675L7.1035 9.11775L6.3965 8.4105L7.90425 6.90275L9.0585 8.057L10.7192 6.3965Z" fill="white"/>
 </svg>
diff --git a/core/core-frontend/src/assets/svg/icon_dataset.svg b/core/core-frontend/src/assets/svg/icon_dataset.svg
index 46eb69f566..da26700117 100644
--- a/core/core-frontend/src/assets/svg/icon_dataset.svg
+++ b/core/core-frontend/src/assets/svg/icon_dataset.svg
@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_181_24877)">
-<path d="M0 4C0 1.79086 2.13127 0 4.76033 0H19.2397C21.8687 0 24 1.79086 24 4V20C24 22.2091 21.8687 24 19.2397 24H4.76033C2.13127 24 0 22.2091 0 20V4Z" fill="#3370FF"/>
+<path d="M0 4C0 1.79086 2.13127 0 4.76033 0H19.2397C21.8687 0 24 1.79086 24 4V20C24 22.2091 21.8687 24 19.2397 24H4.76033C2.13127 24 0 22.2091 0 20V4Z" fill="#16c0ff"/>
 <path d="M4.66669 9.09589C4.66669 8.83447 4.81949 8.59716 5.05749 8.48898L11.7242 5.45868C11.8994 5.37901 12.1006 5.37901 12.2759 5.45868L18.9426 8.48898C19.1806 8.59716 19.3334 8.83447 19.3334 9.0959V15.5879C19.3334 15.8404 19.1907 16.0713 18.9648 16.1842L12.2982 19.5175C12.1105 19.6114 11.8896 19.6114 11.7019 19.5175L5.03521 16.1842C4.80936 16.0713 4.66669 15.8404 4.66669 15.5879V9.09589ZM16.8119 8.98512L12 6.7979L7.16215 8.99693L11.9733 11.0694L16.8119 8.98512ZM12.6667 12.2225V17.8426L18 15.1759V9.9251L12.6667 12.2225ZM6.00002 9.9481V15.1759L11.3334 17.8426V12.2455L6.00002 9.9481Z" fill="white"/>
 </g>
 <defs>
diff --git a/core/core-frontend/src/style/index.less b/core/core-frontend/src/style/index.less
index 8d453f723d..24289e7378 100644
--- a/core/core-frontend/src/style/index.less
+++ b/core/core-frontend/src/style/index.less
@@ -367,3 +367,27 @@ em {
   width: 16px !important;
   height: 12px !important;
 }
+
+.color-panel {
+  background: #3370ff;
+}
+
+.color-dashboard {
+  background: #3370ff;
+}
+
+.color-screen {
+  background: rgb(0, 214, 185);
+}
+
+.color-dataV {
+  background: rgb(0, 214, 185);
+}
+
+.color-dataset {
+  background: rgb(22, 192, 255);
+}
+
+.color-datasource {
+  background: rgb(127, 59, 246);
+}
diff --git a/core/core-frontend/src/views/common/DeResourceTree.vue b/core/core-frontend/src/views/common/DeResourceTree.vue
index b0c1ca951d..1fcb464f42 100644
--- a/core/core-frontend/src/views/common/DeResourceTree.vue
+++ b/core/core-frontend/src/views/common/DeResourceTree.vue
@@ -357,7 +357,7 @@ defineExpose({
               <template #dropdown>
                 <el-dropdown-menu>
                   <el-dropdown-item @click="addOperation('newLeaf', null, 'leaf', true)">
-                    <el-icon class="handle-icon">
+                    <el-icon :class="`handle-icon color-${curCanvasType}`">
                       <Icon :name="dvSvgType"></Icon>
                     </el-icon>
                     空白新建
@@ -410,7 +410,7 @@ defineExpose({
             <el-icon style="font-size: 18px" v-else-if="curCanvasType === 'dashboard'">
               <Icon name="dv-dashboard-spine"></Icon>
             </el-icon>
-            <el-icon class="icon-screen-new" style="font-size: 18px" v-else>
+            <el-icon class="icon-screen-new color-dataV" style="font-size: 18px" v-else>
               <Icon name="icon_operation-analysis_outlined"></Icon>
             </el-icon>
             <span :title="node.label" class="label-tooltip">{{ node.label }}</span>
@@ -568,7 +568,6 @@ defineExpose({
   }
 
   .icon-screen-new {
-    background: #3370ff;
     border-radius: 4px;
     color: #fff;
     padding: 3px;
diff --git a/core/core-frontend/src/views/workbranch/ShortcutTable.vue b/core/core-frontend/src/views/workbranch/ShortcutTable.vue
index 09e1b66b25..c2bb696b26 100644
--- a/core/core-frontend/src/views/workbranch/ShortcutTable.vue
+++ b/core/core-frontend/src/views/workbranch/ShortcutTable.vue
@@ -251,7 +251,9 @@ const getEmptyDesc = (): string => {
         <el-table-column key="name" width="280" prop="name" :label="t('common.name')">
           <template v-slot:default="scope">
             <div class="name-content">
-              <el-icon class="main-color"> <Icon :name="iconMap[scope.row.type]" /> </el-icon>
+              <el-icon :class="`main-color color-${scope.row.type}`">
+                <Icon :name="iconMap[scope.row.type]" />
+              </el-icon>
               <el-tooltip placement="top">
                 <template #content>{{ scope.row.name }}</template>
                 <span class="ellipsis" style="max-width: 250px">{{ scope.row.name }}</span>
@@ -392,7 +394,6 @@ const getEmptyDesc = (): string => {
       margin-right: 12px;
       border-radius: 4px;
       color: #fff;
-      background: #3370ff;
     }
     .name-star {
       font-size: 15px;