diff --git a/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss b/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
index 1e28f7097..6c39c5352 100644
--- a/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
+++ b/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
@@ -107,6 +107,18 @@
   color: $--color-text-label;
 }
 
-.blues{
-  color: $--color-text-link;
+.blue-bg{
+  background-color: $--color-text-link;
+}
+.id-alertMessage{
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 5px;
+}
+.id-alert{
+  display: flex;
+  align-items: center;
 }
diff --git a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
index 0cb165399..06db55aab 100644
--- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
@@ -90,7 +90,7 @@
               {{$t(stateOptions.find(state=>state.value == scope.row['state']).label)}}
             </span>
           </span>
-          <span v-else-if="item.prop === 'id'"><i :style="{'font-size':'12px','margin-right':'5px'}" class="nz-icon nz-icon-circle" :class="scope.row.ack == 1 ? 'blues' : 'gray'"></i>{{scope.row[item.prop]}}</span>
+          <span v-else-if="item.prop === 'id'" class="id-alert"><span :style="{'font-size':'12px','margin-right':'5px'}" class="id-alertMessage" :class="{'gray-bg': scope.row.ack == 0, 'blue-bg': scope.row.ack == 1}"></span>{{scope.row[item.prop]}}</span>
           <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
           <template v-else>-</template>
         </template>