diff --git a/ui/src/api/folder.ts b/ui/src/api/folder.ts
index 0613f5823..51f2d7d24 100644
--- a/ui/src/api/folder.ts
+++ b/ui/src/api/folder.ts
@@ -8,8 +8,7 @@ const prefix = '/workspace'
  * 获得知识库文件夹列表
  * @params 参数
  *  source : APPLICATION, KNOWLEDGE, TOOL
- * {
- * name: string}
+ * {name: string}
  */
 const getFolder: (
   wordspace_id: string,
diff --git a/ui/src/components/folder-tree/index.vue b/ui/src/components/folder-tree/index.vue
index 5a7a265ee..2ce03b8d4 100644
--- a/ui/src/components/folder-tree/index.vue
+++ b/ui/src/components/folder-tree/index.vue
@@ -9,8 +9,14 @@
 
 <script lang="ts" setup>
 defineOptions({ name: 'FolderTree' })
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+})
 interface Tree {
-  label: string
+  name: string
   children?: Tree[]
 }
 
@@ -18,66 +24,8 @@ const handleNodeClick = (data: Tree) => {
   console.log(data)
 }
 
-const data: Tree[] = [
-  {
-    label: 'Level one 1',
-    children: [
-      {
-        label: 'Level two 1-1',
-        children: [
-          {
-            label: 'Level three 1-1-1',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: 'Level one 2',
-    children: [
-      {
-        label: 'Level two 2-1',
-        children: [
-          {
-            label: 'Level three 2-1-1',
-          },
-        ],
-      },
-      {
-        label: 'Level two 2-2',
-        children: [
-          {
-            label: 'Level three 2-2-1',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: 'Level one 3',
-    children: [
-      {
-        label: 'Level two 3-1',
-        children: [
-          {
-            label: 'Level three 3-1-1',
-          },
-        ],
-      },
-      {
-        label: 'Level two 3-2',
-        children: [
-          {
-            label: 'Level three 3-2-1',
-          },
-        ],
-      },
-    ],
-  },
-]
-
 const defaultProps = {
   children: 'children',
-  label: 'label',
+  label: 'name',
 }
 </script>
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index a7d622bd9..c3a78cdf8 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -20,3 +20,7 @@
 .el-card {
   --el-card-padding: calc(var(--app-base-px) * 2);
 }
+
+.el-tree {
+  background: none;
+}
diff --git a/ui/src/views/tool/index.vue b/ui/src/views/tool/index.vue
index f99756ce7..941db5b93 100644
--- a/ui/src/views/tool/index.vue
+++ b/ui/src/views/tool/index.vue
@@ -2,7 +2,7 @@
   <LayoutContainer class="tool-manage">
     <template #left>
       <h4>{{ $t('views.tool.title') }}</h4>
-      <folder-tree />
+      <folder-tree :data="folderList" />
     </template>
     <ContentContainer>
       <div class="flex-between mb-16">
@@ -68,6 +68,7 @@ const paginationConfig = reactive({
   total: 0,
 })
 
+const folderList = ref<any[]>([])
 const toolList = ref<any[]>([])
 const folderId = ref<string>('root')
 
@@ -84,9 +85,8 @@ function getList() {
 
 function getFolder() {
   const params = {}
-  folder.asynGetFolder('default', 'TOOL', params, loading).then((res) => {
-    // paginationConfig.total = res.data.total
-    // datasetList.value = [...datasetList.value, ...res.data.records]
+  folder.asynGetFolder('default', 'TOOL', params, loading).then((res: any) => {
+    folderList.value = res.data
   })
 }