diff --git a/frontend/src/components/Status/StatusLegend.vue b/frontend/src/components/Status/StatusLegend.vue
new file mode 100644
index 00000000..7a4e443f
--- /dev/null
+++ b/frontend/src/components/Status/StatusLegend.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="legend">
+    <el-tag type="primary" size="small">
+      <i class="el-icon-loading"></i>
+      {{$t('Pending')}}
+    </el-tag>
+    <el-tag type="warning" size="small">
+      <i class="el-icon-loading"></i>
+      {{$t('Running')}}
+    </el-tag>
+    <el-tag type="success" size="small">
+      <i class="el-icon-check"></i>
+      {{$t('Finished')}}
+    </el-tag>
+    <el-tag type="danger" size="small">
+      <i class="el-icon-error"></i>
+      {{$t('Error')}}
+    </el-tag>
+    <el-tag type="info" size="small">
+      <i class="el-icon-video-pause"></i>
+      {{$t('Cancelled')}}
+    </el-tag>
+    <el-tag type="danger" size="small">
+      <i class="el-icon-warning"></i>
+      {{$t('Abnormal')}}
+    </el-tag>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StatusLegend'
+}
+</script>
+
+<style scoped>
+  .legend .el-tag {
+    margin-right: 5px;
+  }
+</style>
diff --git a/frontend/src/views/spider/SpiderList.vue b/frontend/src/views/spider/SpiderList.vue
index 2ddd2369..45c04f7f 100644
--- a/frontend/src/views/spider/SpiderList.vue
+++ b/frontend/src/views/spider/SpiderList.vue
@@ -170,7 +170,6 @@
             <el-table
               :data="getTasksByNode(scope.row)"
               class="table"
-              :header-cell-style="{background:'rgb(48, 65, 86)',color:'white'}"
               border
               style="margin: 5px 10px"
               max-height="240px"
@@ -339,32 +338,7 @@
       <!--./tabs-->
 
       <!--legend-->
-      <div class="legend">
-        <el-tag type="primary" size="small">
-          <i class="el-icon-loading"></i>
-          {{$t('Pending')}}
-        </el-tag>
-        <el-tag type="warning" size="small">
-          <i class="el-icon-loading"></i>
-          {{$t('Running')}}
-        </el-tag>
-        <el-tag type="success" size="small">
-          <i class="el-icon-check"></i>
-          {{$t('Finished')}}
-        </el-tag>
-        <el-tag type="danger" size="small">
-          <i class="el-icon-error"></i>
-          {{$t('Error')}}
-        </el-tag>
-        <el-tag type="info" size="small">
-          <i class="el-icon-video-pause"></i>
-          {{$t('Cancelled')}}
-        </el-tag>
-        <el-tag type="danger" size="small">
-          <i class="el-icon-warning"></i>
-          {{$t('Abnormal')}}
-        </el-tag>
-      </div>
+      <status-legend/>
       <!--./legend-->
 
       <!--table list-->
@@ -578,10 +552,12 @@ import {
 import dayjs from 'dayjs'
 import CrawlConfirmDialog from '../../components/Common/CrawlConfirmDialog'
 import StatusTag from '../../components/Status/StatusTag'
+import StatusLegend from '../../components/Status/StatusLegend'
 
 export default {
   name: 'SpiderList',
   components: {
+    StatusLegend,
     CrawlConfirmDialog,
     StatusTag
   },
@@ -1201,8 +1177,4 @@ export default {
   .el-table >>> .latest-tasks .el-tag {
     margin: 3px 3px 0 0;
   }
-
-  .legend .el-tag {
-    margin-right: 5px;
-  }
 </style>
diff --git a/frontend/src/views/task/TaskList.vue b/frontend/src/views/task/TaskList.vue
index 1eb5d484..906cd291 100644
--- a/frontend/src/views/task/TaskList.vue
+++ b/frontend/src/views/task/TaskList.vue
@@ -45,6 +45,10 @@
       </div>
       <!--./filter-->
 
+      <!--legend-->
+      <status-legend/>
+      <!--./legend-->
+
       <!--table list-->
       <el-table :data="filteredTableData"
                 ref="table"
@@ -169,10 +173,11 @@ import {
 } from 'vuex'
 import dayjs from 'dayjs'
 import StatusTag from '../../components/Status/StatusTag'
+import StatusLegend from '../../components/Status/StatusLegend'
 
 export default {
   name: 'TaskList',
-  components: { StatusTag },
+  components: { StatusLegend, StatusTag },
   data () {
     return {
       // setInterval handle