diff --git a/core/core-frontend/src/store/modules/appearance.ts b/core/core-frontend/src/store/modules/appearance.ts
index eecf692e0f..c40ef4aa8c 100644
--- a/core/core-frontend/src/store/modules/appearance.ts
+++ b/core/core-frontend/src/store/modules/appearance.ts
@@ -300,6 +300,12 @@ export const useAppearanceStore = defineStore('appearanceStore', {
             .mix(new colorTree('ffffff'), new colorTree(this.customColor.substr(1)), { value: 15 })
             .toRGB()
         )
+        document.documentElement.style.setProperty(
+          '--ed-color-primary-dark-20',
+          colorFunctions
+            .mix(new colorTree('000000'), new colorTree(this.customColor.substr(1)), { value: 20 })
+            .toRGB()
+        )
         document.documentElement.style.setProperty('--ed-color-primary-1a', `${this.customColor}1a`)
         document.documentElement.style.setProperty('--ed-color-primary-33', `${this.customColor}33`)
         document.documentElement.style.setProperty('--ed-color-primary-99', `${this.customColor}99`)
@@ -317,6 +323,7 @@ export const useAppearanceStore = defineStore('appearanceStore', {
         document.documentElement.style.removeProperty('--ed-color-primary-33')
         document.documentElement.style.removeProperty('--ed-color-primary-99')
         document.documentElement.style.removeProperty('--ed-color-primary-dark-2')
+        document.documentElement.style.removeProperty('--ed-color-primary-dark-20')
       }
       this.bg = data.bg
       this.login = data.login
diff --git a/core/core-frontend/src/style/index.less b/core/core-frontend/src/style/index.less
index b2e9398017..ffdb3d3662 100644
--- a/core/core-frontend/src/style/index.less
+++ b/core/core-frontend/src/style/index.less
@@ -725,3 +725,36 @@ strong {
 .ed-menu--vertical.ed-menu--light .ed-menu-item.is-active.is-active.is-active {
   background-color: var(--ed-color-primary-1a, #3370ff1a) !important;
 }
+
+.utree-popover {
+  padding-bottom: 0 !important;
+  .pagination-count {
+    height: auto !important;
+  }
+  .ed-pager li.number {
+    &:hover {
+      background-color: #1f23291a;
+    }
+
+    &:active {
+      background-color: #1f232933;
+    }
+  }
+  .btn-quicknext,
+  .btn-quickprev {
+    svg {
+      path[fill='#245BDB'],
+      path[fill='currentColor'] {
+        fill: var(--ed-color-primary, #3370ff);
+      }
+    }
+
+    &:active {
+      svg {
+        path {
+          fill: var(--ed-color-primary-dark-20, #245bdb);
+        }
+      }
+    }
+  }
+}
diff --git a/core/core-frontend/src/views/common/DeResourceCreateOptV2.vue b/core/core-frontend/src/views/common/DeResourceCreateOptV2.vue
index 73945aefd6..27d9e415a6 100644
--- a/core/core-frontend/src/views/common/DeResourceCreateOptV2.vue
+++ b/core/core-frontend/src/views/common/DeResourceCreateOptV2.vue
@@ -37,6 +37,7 @@ defineExpose({
 <style lang="less">
 .market-create-dialog {
   border-radius: 4px !important;
+  padding: 0;
 
   overflow: hidden;
   .ed-dialog__body {
diff --git a/core/core-frontend/src/views/common/DeResourceTree.vue b/core/core-frontend/src/views/common/DeResourceTree.vue
index 818a89c68d..199d067ac5 100644
--- a/core/core-frontend/src/views/common/DeResourceTree.vue
+++ b/core/core-frontend/src/views/common/DeResourceTree.vue
@@ -684,7 +684,14 @@ defineExpose({
       <div class="icon-methods" v-show="showPosition === 'preview'">
         <span class="title"> {{ resourceLabel }} </span>
         <div v-if="rootManage" class="flex-align-center">
-          <el-tooltip :content="t('work_branch.new_folder')" placement="top" effect="dark">
+          <el-tooltip
+            offset="14"
+            :content="t('work_branch.new_folder')"
+            placement="top"
+            popper-class="new-folder_tip"
+            effect="dark"
+            arrow-offset="10"
+          >
             <el-icon
               class="custom-icon btn"
               style="margin-right: 20px"
@@ -694,31 +701,27 @@ defineExpose({
             </el-icon>
           </el-tooltip>
 
-          <el-tooltip :content="newResourceLabel" placement="top" effect="dark">
-            <el-dropdown popper-class="menu-outer-dv_popper" trigger="hover">
-              <el-icon class="custom-icon btn" @click="addOperation('newLeaf', null, 'leaf', true)">
-                <Icon name="icon_file-add_outlined"
-                  ><icon_fileAdd_outlined class="svg-icon"
-                /></Icon>
-              </el-icon>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item @click="addOperation('newLeaf', null, 'leaf', true)">
-                    <el-icon :class="`handle-icon color-${curCanvasType}`">
-                      <Icon><component class="svg-icon" :is="dvSvgType"></component></Icon>
-                    </el-icon>
-                    {{ t('work_branch.new_empty') }}
-                  </el-dropdown-item>
-                  <el-dropdown-item @click="addOperation('newFromTemplate', null, 'leaf', true)">
-                    <el-icon class="handle-icon">
-                      <Icon name="dv-use-template"><dvUseTemplate class="svg-icon" /></Icon>
-                    </el-icon>
-                    {{ t('work_branch.new_using_template') }}
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-          </el-tooltip>
+          <el-dropdown placement="bottom-start" popper-class="menu-outer-dv_popper" trigger="hover">
+            <el-icon class="custom-icon btn" @click="addOperation('newLeaf', null, 'leaf', true)">
+              <Icon name="icon_file-add_outlined"><icon_fileAdd_outlined class="svg-icon" /></Icon>
+            </el-icon>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item @click="addOperation('newLeaf', null, 'leaf', true)">
+                  <el-icon :class="`handle-icon color-${curCanvasType}`">
+                    <Icon><component class="svg-icon" :is="dvSvgType"></component></Icon>
+                  </el-icon>
+                  {{ t('work_branch.new_empty') }}
+                </el-dropdown-item>
+                <el-dropdown-item @click="addOperation('newFromTemplate', null, 'leaf', true)">
+                  <el-icon class="handle-icon">
+                    <Icon name="dv-use-template"><dvUseTemplate class="svg-icon" /></Icon>
+                  </el-icon>
+                  {{ t('work_branch.new_using_template') }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
         </div>
       </div>
       <el-input
@@ -915,11 +918,24 @@ defineExpose({
     }
     .custom-icon {
       font-size: 20px;
+      position: relative;
+      outline: none;
       &.btn {
         color: var(--ed-color-primary);
       }
       &:hover {
         cursor: pointer;
+        &::after {
+          content: '';
+          background-color: var(--ed-color-primary-1a, #3370ff1a);
+          width: 28px;
+          height: 28px;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          border-radius: 4px;
+          transform: translate(-50%, -50%);
+        }
       }
     }
   }
@@ -1004,13 +1020,19 @@ defineExpose({
 <style lang="less">
 .menu-outer-dv_popper {
   min-width: 140px;
-  margin-top: -2px !important;
+  margin-top: 6px !important;
 
   .ed-icon {
     border-radius: 4px;
   }
 }
 
+.new-folder_tip {
+  .ed-popper__arrow {
+    transform: translate(46px, 0px) !important;
+  }
+}
+
 .sort-type-normal {
   i {
     display: none;
diff --git a/core/core-frontend/src/views/template-market/index.vue b/core/core-frontend/src/views/template-market/index.vue
index ebee71d829..58f1969b50 100644
--- a/core/core-frontend/src/views/template-market/index.vue
+++ b/core/core-frontend/src/views/template-market/index.vue
@@ -13,7 +13,7 @@
       @templateApply="templateApply"
     />
     <el-row v-if="previewModel === 'createPreview'" class="main-container">
-      <el-row class="market-head" style="padding: 0 0 12px">
+      <el-row class="market-head">
         <el-icon class="custom-back-icon hover-icon" @click="previewModel = 'full'"
           ><ArrowLeft
         /></el-icon>
@@ -96,25 +96,28 @@
         </el-row>
       </el-row>
       <el-row class="template-area">
-        <div class="template-left">
-          <el-tree
-            v-if="state.treeShow"
-            menu
-            class="custom-market-tree"
-            v-model="state.marketActiveTab"
-            :data="categoriesComputed"
-            :props="state.treeProps"
-            node-key="label"
-            default-expand-all
-            highlight-current
-            :current-node-key="state.marketActiveTab"
-            @node-click="nodeClick"
-          >
-            <template #default="{ data }">
-              <span :title="data.label" class="ed-tree-node__label">{{ data.label }}</span>
-            </template>
-          </el-tree>
-        </div>
+        <el-scrollbar>
+          <div class="template-left">
+            <el-tree
+              v-if="state.treeShow"
+              menu
+              class="custom-market-tree"
+              v-model="state.marketActiveTab"
+              :data="categoriesComputed"
+              :props="state.treeProps"
+              node-key="label"
+              default-expand-all
+              highlight-current
+              :current-node-key="state.marketActiveTab"
+              @node-click="nodeClick"
+            >
+              <template #default="{ data }">
+                <span :title="data.label" class="ed-tree-node__label">{{ data.label }}</span>
+              </template>
+            </el-tree>
+          </div>
+        </el-scrollbar>
+
         <div
           v-show="state.networkStatus && state.hasResult"
           id="template-show-area"
@@ -645,10 +648,6 @@ defineExpose({
       padding: 12px 24px;
       border-bottom: 1px solid rgba(31, 35, 41, 0.15);
 
-      &.create-preview {
-        padding: 0;
-        padding-bottom: 12px;
-      }
       span {
         font-size: 16px;
         color: #1f2329;
@@ -670,10 +669,8 @@ defineExpose({
       height: calc(100vh - 135px);
       .template-left {
         padding: 8px;
-        padding-left: 0;
         width: 204px;
         height: 100%;
-        overflow-y: auto;
         background: #ffffff;
       }
       .template-right {
@@ -799,5 +796,6 @@ defineExpose({
   background: rgba(31, 35, 41, 0.15);
   border: 0;
   height: 1px;
+  margin-left: 24px;
 }
 </style>