diff --git a/frontend/src/components/dir-view-mode/dir-views/index.css b/frontend/src/components/dir-view-mode/dir-views/index.css
index e69de29bb2..2ebb4ec5df 100644
--- a/frontend/src/components/dir-view-mode/dir-views/index.css
+++ b/frontend/src/components/dir-view-mode/dir-views/index.css
@@ -0,0 +1,7 @@
+.dir-content-nav .tree-section:first-child {
+  margin-top: 12px;
+}
+
+.dir-content-nav .tree-section:last-child {
+  margin-bottom: 28px;
+}
diff --git a/frontend/src/components/dir-view-mode/dir-views/index.js b/frontend/src/components/dir-view-mode/dir-views/index.js
index 970a4a4e82..2ae577e2e0 100644
--- a/frontend/src/components/dir-view-mode/dir-views/index.js
+++ b/frontend/src/components/dir-view-mode/dir-views/index.js
@@ -8,6 +8,8 @@ import metadataManagerAPI from '../../metadata-manage/api';
 import toaster from '../../toast';
 import MetadataViews from '../../metadata-manage/metadata-views';
 
+import './index.css';
+
 const DirViews = ({ userPerm, repoID }) => {
   const enableMetadataManagement = useMemo(() => {
     return window.app.pageOptions.enableMetadataManagement;
diff --git a/frontend/src/components/metadata-manage/metadata-views/index.css b/frontend/src/components/metadata-manage/metadata-views/index.css
index 21d4f03e62..59d2817313 100644
--- a/frontend/src/components/metadata-manage/metadata-views/index.css
+++ b/frontend/src/components/metadata-manage/metadata-views/index.css
@@ -1,5 +1,10 @@
+.metadata-tree-view .tree-node-inner {
+  height: 28px;
+  padding: 2px 0;
+}
+
 .metadata-tree-view .tree-node-inner .left-icon {
-  top: 8px;
+  top: 6px;
   padding-left: 8px;
 }
 
diff --git a/frontend/src/components/tree-section/index.css b/frontend/src/components/tree-section/index.css
index 844d5e6aab..e52b2e0e6f 100644
--- a/frontend/src/components/tree-section/index.css
+++ b/frontend/src/components/tree-section/index.css
@@ -12,7 +12,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 8px;
-  height: 32px;
+  height: 28px;
   width: 100%;
   border-radius: 3px;
 }
diff --git a/frontend/src/css/lib-content-view.css b/frontend/src/css/lib-content-view.css
index 31129657ea..e23721b567 100644
--- a/frontend/src/css/lib-content-view.css
+++ b/frontend/src/css/lib-content-view.css
@@ -71,8 +71,8 @@
 
 .tree-node-inner {
   position: relative;
-  height: 32px;
-  padding: 4px 0;
+  height: 28px;
+  padding: 2px;
   cursor: pointer;
   line-height: 1.625;
 }
@@ -96,7 +96,7 @@
   position: absolute;
   display:flex;
   align-items:center;
-  top: 4px;
+  top: 2px;
   left: 0;
   padding-left: 1.5rem;
 }
@@ -125,7 +125,7 @@
 
 .tree-node-inner .right-icon {
   position: absolute;
-  top: 4px;
+  top: 2px;
   right: 0.5rem;
   bottom: 0;
   width: 1rem;
diff --git a/frontend/src/css/side-panel.css b/frontend/src/css/side-panel.css
index a05c196147..d1396c1ecb 100644
--- a/frontend/src/css/side-panel.css
+++ b/frontend/src/css/side-panel.css
@@ -98,8 +98,8 @@
 
 .tree-node-inner {
   position: relative;
-  height: 32px;
-  padding: 4px 0;
+  height: 28px;
+  padding: 2px 0;
   cursor: pointer;
   line-height: 1.625;
 }
@@ -124,7 +124,7 @@
   display:flex;
   justify-content:center;
   align-items:center;
-  top: 4px;
+  top: 2px;
   left: 0;
   padding-left: 1.5rem;
 }
@@ -149,7 +149,7 @@
 
 .tree-node-inner .right-icon {
   position: absolute;
-  top: 4px;
+  top: 2px;
   right: 1rem;
   bottom: 0;
   width: 1.5rem;