diff --git a/frontend/src/assets/svg/icons/chevronDown.svg b/frontend/src/assets/svg/icons/chevronDown.svg
new file mode 100644
index 0000000000..ad2686500a
--- /dev/null
+++ b/frontend/src/assets/svg/icons/chevronDown.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="1715338961374" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13184" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M226.56 413.44l58.88-58.88L512 581.12l226.56-226.56 58.88 58.88L512 698.88 226.56 413.44z" p-id="13185" fill="#959598"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/svg/icons/chevronDownActive.svg b/frontend/src/assets/svg/icons/chevronDownActive.svg
new file mode 100644
index 0000000000..8c04ef19b8
--- /dev/null
+++ b/frontend/src/assets/svg/icons/chevronDownActive.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="1715338961374" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13184" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M226.56 413.44l58.88-58.88L512 581.12l226.56-226.56 58.88 58.88L512 698.88 226.56 413.44z" p-id="13185" fill="#9441B1"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/svg/icons/chevronUp.svg b/frontend/src/assets/svg/icons/chevronUp.svg
new file mode 100644
index 0000000000..fd68c2c0c6
--- /dev/null
+++ b/frontend/src/assets/svg/icons/chevronUp.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="1715339116611" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13393" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M797.44 610.56l-58.88 58.88L512 442.88l-226.56 226.56-58.88-58.88L512 325.248l285.44 285.44z" p-id="13394" fill="#959598"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/svg/icons/chevronUpActive.svg b/frontend/src/assets/svg/icons/chevronUpActive.svg
new file mode 100644
index 0000000000..fa014db93d
--- /dev/null
+++ b/frontend/src/assets/svg/icons/chevronUpActive.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="1715339116611" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13393" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M797.44 610.56l-58.88 58.88L512 442.88l-226.56 226.56-58.88-58.88L512 325.248l285.44 285.44z" p-id="13394" fill="#9441B1"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/components/pure/ms-table/base-table.vue b/frontend/src/components/pure/ms-table/base-table.vue
index 144ba3569e..d8afa92e10 100644
--- a/frontend/src/components/pure/ms-table/base-table.vue
+++ b/frontend/src/components/pure/ms-table/base-table.vue
@@ -82,15 +82,9 @@
           <template #title>
             <div :class="{ 'flex w-full flex-row flex-nowrap items-center gap-[4px]': !item.align }">
               <slot :name="item.titleSlotName" :column-config="item">
-                <div
-                  v-if="item.title"
-                  :class="`${
-                    item.filterConfig && isHighlightFilterBackground
-                      ? 'text-[rgb(var(--primary-5))]'
-                      : 'text-[var(--color-text-3)]'
-                  } pl-1`"
-                  >{{ t(item.title as string) }}</div
-                >
+                <div v-if="item.title" class="title-name pl-1 text-[var(--color-text-3)]">{{
+                  t(item.title as string)
+                }}</div>
               </slot>
               <columnSelectorIcon
                 v-if="
@@ -812,23 +806,57 @@
     &:hover {
       @apply bg-white;
     }
-    .arco-table-sorter-icon:not(.arco-table-sorter-icon-active) {
-      .arco-icon-caret-up {
-        color: var(--color-neutral-5);
+    .arco-table-sorter {
+      padding: 3px 4px 3px 0;
+      .arco-table-sorter-icon {
+        &::before {
+          content: '';
+          position: absolute;
+          z-index: 10;
+          width: 14px;
+          height: 8px;
+        }
+        &:nth-of-type(1) {
+          &::before {
+            background: url('@/assets/svg/icons/chevronUp.svg') center/cover;
+          }
+          &.arco-table-sorter-icon-active::before {
+            background: url('@/assets/svg/icons/chevronUpActive.svg') center/cover;
+          }
+        }
+        &:nth-of-type(2) {
+          &::before {
+            background: url('@/assets/svg/icons/chevronDown.svg') center/cover;
+          }
+          &.arco-table-sorter-icon-active::before {
+            background: url('@/assets/svg/icons/chevronDownActive.svg') center/cover;
+          }
+        }
+        svg {
+          display: none;
+        }
       }
     }
   }
+  :deep(.arco-table-col-sorted) .arco-table-cell-with-sorter {
+    width: fit-content;
+    background: rgb(var(--primary-1)) content-box;
+    .arco-table-th-title .title-name {
+      color: rgb(var(--primary-5));
+    }
+  }
   :deep(.header-cell-filter) {
     .arco-table-cell-with-filter {
       float: left;
-      border-radius: 4px;
       .arco-table-th-title {
         border-radius: 4px;
-        color: rgb(var(--primary-5));
         background: rgb(var(--primary-1)) content-box;
         .filter-icon {
           color: rgb(var(--primary-5)) !important;
         }
+        .title-name {
+          color: rgb(var(--primary-5));
+        }
       }
     }
   }
diff --git a/frontend/src/views/test-plan/testPlan/components/planTable.vue b/frontend/src/views/test-plan/testPlan/components/planTable.vue
index c27060dad4..6bdfa9c9d2 100644
--- a/frontend/src/views/test-plan/testPlan/components/planTable.vue
+++ b/frontend/src/views/test-plan/testPlan/components/planTable.vue
@@ -97,7 +97,7 @@
       >
     </template>
     <template #[FilterSlotNameEnum.TEST_PLAN_STATUS_FILTER]="{ filterContent }">
-      <statusTag :status="filterContent.value" />
+      <MsStatusTag :status="filterContent.value" />
     </template>
     <template #status="{ record }">
       <MsStatusTag :status="record.status" />