diff --git a/ui/src/views/tool/toolStore/ToolCard.vue b/ui/src/views/tool/toolStore/ToolCard.vue
index 7d3efce1a..5b5cc98a1 100644
--- a/ui/src/views/tool/toolStore/ToolCard.vue
+++ b/ui/src/views/tool/toolStore/ToolCard.vue
@@ -18,20 +18,28 @@
       />
     </template>
     <template #title>
-      <div>
-        {{ props.tool?.name }}
+      <div class="flex align-center">
+        <span :title="props.tool?.name" class="ellipsis"> {{ props.tool?.name }}</span>
         <el-tag v-if="props.tool?.version" class="ml-4" type="info" effect="plain">
           {{ props.tool?.version }}
         </el-tag>
       </div>
     </template>
+    <template #tag>
+      <el-tag type="info" v-if="props.tool?.label === 'data_source'" class="info-tag">
+        {{ $t('views.tool.dataSource.title') }}
+      </el-tag>
+      <el-tag type="info" class="info-tag">
+        {{ $t('views.tool.title') }}
+      </el-tag>
+    </template>
     <template #subTitle>
       <el-text class="color-secondary" size="small">
         {{ getSubTitle(props.tool) }}
       </el-text>
     </template>
     <template #footer>
-      <span class="card-footer-left color-secondary" v-if="props.tool?.downloads!= undefined">
+      <span class="card-footer-left color-secondary" v-if="props.tool?.downloads != undefined">
         {{ `${$t('views.document.upload.download')}: ${numberFormat(props.tool.downloads || 0)} ` }}
       </span>
       <div class="card-footer-operation mb-8" @click.stop>
diff --git a/ui/src/views/tool/toolStore/ToolStoreDialog.vue b/ui/src/views/tool/toolStore/ToolStoreDialog.vue
index 940d9a174..7c78f3ac7 100644
--- a/ui/src/views/tool/toolStore/ToolStoreDialog.vue
+++ b/ui/src/views/tool/toolStore/ToolStoreDialog.vue
@@ -28,7 +28,7 @@
       </div>
     </template>
 
-    <LayoutContainer v-loading="loading"  :minLeftWidth="204">
+    <LayoutContainer v-loading="loading" :minLeftWidth="204">
       <template #left>
         <el-anchor
           direction="vertical"
@@ -63,7 +63,8 @@
                   :get-sub-title="getSubTitle"
                   @handleAdd="handleOpenAdd(tool)"
                   @handleDetail="handleDetail(tool)"
-                />
+                >
+                </ToolCard>
               </el-col>
             </el-row>
           </div>
@@ -151,17 +152,14 @@ function open(id: string) {
 
 async function getList() {
   filterList.value = null
-  const [v1, v2] = await Promise.all([
-    getInternalToolList(),
-    getStoreToolList()
-  ])
+  const [v1, v2] = await Promise.all([getInternalToolList(), getStoreToolList()])
 
   const merged = [...v1, ...v2].reduce((acc, category) => {
     const existing = acc.find((item: any) => item.id === category.id)
     if (existing) {
       existing.tools = [...existing.tools, ...category.tools]
     } else {
-      acc.push({...category})
+      acc.push({ ...category })
     }
     return acc
   }, [] as ToolCategory[])
@@ -174,7 +172,7 @@ async function getInternalToolList() {
     const categories = defaultCategories.value
     const res = await ToolStoreApi.getInternalToolList({ name: searchValue.value }, loading)
     if (searchValue.value.length) {
-      filterList.value = [...res.data, ...filterList.value || []]
+      filterList.value = [...res.data, ...(filterList.value || [])]
     } else {
       filterList.value = null
       categories.forEach((category) => {
@@ -203,7 +201,7 @@ async function getStoreToolList() {
       tool.desc = tool.description
     })
     if (searchValue.value.length) {
-      filterList.value = [...res.data.apps, ...filterList.value || []]
+      filterList.value = [...res.data.apps, ...(filterList.value || [])]
     } else {
       filterList.value = null
       categories = tags.map((tag: any) => ({