diff --git a/web-admin/src/views/m/crm/product/categories.vue b/web-admin/src/views/m/crm/product/categories.vue
index c199078e8..cfd26dcc7 100644
--- a/web-admin/src/views/m/crm/product/categories.vue
+++ b/web-admin/src/views/m/crm/product/categories.vue
@@ -465,42 +465,65 @@
     position: relative;
   }
 
-  .mp-cat-header-add {
+  .mp-cat-header-tools {
     position: absolute;
     top: calc(8px + env(safe-area-inset-top, 0px));
-    right: 16px;
+    right: 12px;
     z-index: 60;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .mp-cat-header-btn {
     height: 32px;
-    padding: 0 12px;
-    font-size: 13px;
+    padding: 0 10px;
+    font-size: 12px;
     font-weight: 600;
     color: #fff;
     cursor: pointer;
     background: rgb(255 255 255 / 15%);
     border: 1px solid rgb(255 255 255 / 75%);
     border-radius: 8px;
+    white-space: nowrap;
   }
 
-  .mp-cat-header-add:active {
+  .mp-cat-header-btn:active {
     opacity: 0.8;
   }
 
-  .mp-cat-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding: 12px 10px 24px;
+  .mp-cat-tree {
+    margin: 12px 10px 24px;
+    overflow: hidden;
+    background: #fff;
+    border: 1px solid #dcebe4;
+    border-radius: 16px;
   }
 
   .mp-cat-row {
     display: flex;
     gap: 6px;
     align-items: center;
-    min-height: 52px;
-    padding: 8px 10px 8px 0;
+    min-height: 54px;
+    padding: 10px 10px 10px 0;
     background: #fff;
-    border: 1px solid #dcebe4;
-    border-radius: 12px;
+    border-bottom: 1px solid #edf5f1;
+  }
+
+  .mp-cat-row:last-child {
+    border-bottom: none;
+  }
+
+  .mp-cat-row.is-l2 {
+    background: #fbfdff;
+  }
+
+  .mp-cat-row.is-l3 {
+    background: #fafcfb;
+  }
+
+  .mp-cat-row:active {
+    background: #f7fbf9;
   }
 
   .mp-cat-row__toggle {
@@ -515,6 +538,11 @@
     cursor: pointer;
     background: transparent;
     border: none;
+    transition: transform 0.15s ease;
+  }
+
+  .mp-cat-row__toggle.is-open {
+    transform: rotate(90deg);
   }
 
   .mp-cat-row__toggle.is-leaf {
@@ -536,9 +564,16 @@
   }
 
   .mp-cat-row__meta {
-    margin-top: 4px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+    margin-top: 3px;
+    font-size: 11px;
+    color: #6b7b74;
   }
 
+  .mp-cat-row__add,
   .mp-cat-row__more {
     flex-shrink: 0;
     width: 36px;
@@ -552,11 +587,18 @@
     border-radius: 8px;
   }
 
+  .mp-cat-row__add {
+    width: 32px;
+    height: 32px;
+    font-size: 16px;
+    font-weight: 700;
+  }
+
   .status-tag {
     display: inline-flex;
     align-items: center;
-    min-height: 22px;
-    padding: 2px 8px;
+    min-height: 20px;
+    padding: 1px 7px;
     font-size: 11px;
     font-weight: 600;
     border: 1px solid transparent;