diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss
index b09b00c42..367cd5fea 100644
--- a/app/src/assets/scss/base.scss
+++ b/app/src/assets/scss/base.scss
@@ -378,7 +378,7 @@ html {
   margin-left: 4px;
   line-height: 22px;
   padding: 0 8px;
-  color: var(--b3-theme-on-surface);
+  color: var(--b3-theme-on-surface-light);
   border-radius: 2px;
   font-size: 12px;
   user-select: none;
diff --git a/app/src/assets/scss/component/_list.scss b/app/src/assets/scss/component/_list.scss
index 75a17a36a..2dd6ba90d 100644
--- a/app/src/assets/scss/component/_list.scss
+++ b/app/src/assets/scss/component/_list.scss
@@ -98,9 +98,8 @@
     &__toggle {
       display: flex;
       align-items: center;
-      height: 22px;
       padding: 0 4px;
-      color: var(--b3-theme-on-surface);
+      color: var(--b3-theme-on-surface-light);
       transition: var(--b3-transition);
 
       &--hl:hover {
@@ -124,7 +123,6 @@
       font-size: 16px;
       margin-right: 4px;
       line-height: 22px;
-      height: 22px;
       transition: var(--b3-transition);
       padding: 0 4px;
       flex-shrink: 0;
@@ -214,7 +212,7 @@
     &__action {
       flex-shrink: 0;
       align-items: center;
-      color: var(--b3-theme-on-surface);
+      color: var(--b3-theme-on-surface-light);
       height: 22px;
       padding: 0 4px;
       margin-left: 4px;
diff --git a/app/src/assets/scss/mobile.scss b/app/src/assets/scss/mobile.scss
index 3250a9233..659db33bd 100644
--- a/app/src/assets/scss/mobile.scss
+++ b/app/src/assets/scss/mobile.scss
@@ -31,53 +31,42 @@
 
 .b3-list--mobile {
 
-  .counter {
-    line-height: 36px;
-    height: 36px;
-    font-size: 16px;
-    border-radius: 4px;
-  }
-
   & > .fn__flex-column {
     height: 100%;
   }
 
   .b3-list-item {
     font-size: 18px;
-    line-height: 36px;
-    padding: 4px;
+    line-height: 40px;
 
     &__icon {
       font-size: 18px;
-      line-height: 36px;
-      height: auto;
+      line-height: 40px;
     }
 
     &__graphic {
-      width: 20px;
-      height: 20px;
-      padding: 8px 4px;
-      line-height: 20px;
-      font-size: 20px;
+      width: 18px;
+      height: 40px;
+      line-height: 40px;
+      font-size: 18px;
     }
 
     &__toggle {
-      padding: 11px;
-      height: auto;
+      padding: 14px;
     }
 
     &__arrow {
-      height: 14px;
-      width: 14px;
+      height: 12px;
+      width: 12px;
     }
 
     &__action {
-      padding: 8px;
-      height: 20px;
+      padding: 12px;
+      height: 16px;
 
       svg {
-        width: 20px;
-        height: 20px;
+        width: 16px;
+        height: 16px;
       }
     }
   }
@@ -91,14 +80,14 @@
 
 .counter {
   margin-left: 4px;
-  line-height: 22px;
   padding: 0 8px;
-  color: var(--b3-theme-on-surface);
-  border-radius: 2px;
-  font-size: 12px;
+  color: var(--b3-theme-on-surface-light);
+  border-radius: 4px;
   user-select: none;
-  height: 22px;
   background-color: var(--b3-theme-background-light);
+  line-height: 24px;
+  height: 24px;
+  font-size: 16px;
 }
 
 .toolbar {
@@ -116,9 +105,9 @@
   }
 
   &__icon {
-    height: 20px;
-    width: 20px;
-    padding: 8px;
+    height: 16px;
+    width: 16px;
+    padding: 10px;
     flex-shrink: 0;
     margin: 6px 4px;
     color: var(--b3-theme-on-surface);
diff --git a/app/src/mobile/util/MobileFiles.ts b/app/src/mobile/util/MobileFiles.ts
index d7fc2466a..5f11abecd 100644
--- a/app/src/mobile/util/MobileFiles.ts
+++ b/app/src/mobile/util/MobileFiles.ts
@@ -605,7 +605,7 @@ export class MobileFiles extends Model {
         }
         return `<li data-node-id="${item.id}" data-name="${Lute.EscapeHTMLStr(item.name)}" data-type="navigation-file" 
 class="b3-list-item" data-path="${item.path}">
-    <span style="padding-left: ${(item.path.split("/").length - 2) * 29 + 40}px" class="b3-list-item__toggle${item.subFileCount === 0 ? " fn__hidden" : ""}">
+    <span style="padding-left: ${(item.path.split("/").length - 2) * 30 + 44}px" class="b3-list-item__toggle${item.subFileCount === 0 ? " fn__hidden" : ""}">
         <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
     </span>
     <span class="b3-list-item__icon">${unicode2Emoji(item.icon || (item.subFileCount === 0 ? Constants.SIYUAN_IMAGE_FILE : Constants.SIYUAN_IMAGE_FOLDER))}</span>
diff --git a/app/src/util/Tree.ts b/app/src/util/Tree.ts
index 270fc48aa..47aacb7b1 100644
--- a/app/src/util/Tree.ts
+++ b/app/src/util/Tree.ts
@@ -77,7 +77,7 @@ export class Tree {
             let style = "";
             if (isMobile()) {
                 if (item.depth > 0) {
-                    style = `padding-left: ${(item.depth - 1) * 29 + 40}px`;
+                    style = `padding-left: ${(item.depth - 1) * 30 + 44}px`;
                 }
             } else {
                 style = `padding-left: ${(item.depth - 1) * 18 + 22}px;margin-right: 2px`;
@@ -130,7 +130,7 @@ ${item.label ? "data-label='" + item.label + "'" : ""}>
             let style = "";
             if (isMobile()) {
                 if (item.depth > 0) {
-                    style = `padding-left: ${(item.depth - 1) * 29 + 40}px`;
+                    style = `padding-left: ${(item.depth - 1) * 30 + 44}px`;
                 }
             } else {
                 style = `padding-left: ${(item.depth - 1) * 18 + 22}px;margin-right: 2px`;