diff --git a/web/service/_tools_util.spec.ts b/web/service/_tools_util.spec.ts
new file mode 100644
index 0000000000..f06e5a1e34
--- /dev/null
+++ b/web/service/_tools_util.spec.ts
@@ -0,0 +1,16 @@
+import { buildProviderQuery } from './_tools_util'
+
+describe('makeProviderQuery', () => {
+  test('collectionName without special chars', () => {
+    expect(buildProviderQuery('ABC')).toBe('provider=ABC')
+  })
+  test('should escape &', () => {
+    expect(buildProviderQuery('ABC&DEF')).toBe('provider=ABC%26DEF')
+  })
+  test('should escape /', () => {
+    expect(buildProviderQuery('ABC/DEF')).toBe('provider=ABC%2FDEF')
+  })
+  test('should escape ?', () => {
+    expect(buildProviderQuery('ABC?DEF')).toBe('provider=ABC%3FDEF')
+  })
+})
diff --git a/web/service/_tools_util.ts b/web/service/_tools_util.ts
new file mode 100644
index 0000000000..89dede8163
--- /dev/null
+++ b/web/service/_tools_util.ts
@@ -0,0 +1,5 @@
+export const buildProviderQuery = (collectionName: string): string => {
+  const query = new URLSearchParams()
+  query.set('provider', collectionName)
+  return query.toString()
+}
diff --git a/web/service/tools.ts b/web/service/tools.ts
index d6b2f2034b..38dcf382e6 100644
--- a/web/service/tools.ts
+++ b/web/service/tools.ts
@@ -10,6 +10,7 @@ import type {
 } from '@/app/components/tools/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import type { Label } from '@/app/components/tools/labels/constant'
+import { buildProviderQuery } from './_tools_util'
 
 export const fetchCollectionList = () => {
   return get<Collection[]>('/workspaces/current/tool-providers')
@@ -24,11 +25,13 @@ export const fetchBuiltInToolList = (collectionName: string) => {
 }
 
 export const fetchCustomToolList = (collectionName: string) => {
-  return get<Tool[]>(`/workspaces/current/tool-provider/api/tools?provider=${collectionName}`)
+  const query = buildProviderQuery(collectionName)
+  return get<Tool[]>(`/workspaces/current/tool-provider/api/tools?${query}`)
 }
 
 export const fetchModelToolList = (collectionName: string) => {
-  return get<Tool[]>(`/workspaces/current/tool-provider/model/tools?provider=${collectionName}`)
+  const query = buildProviderQuery(collectionName)
+  return get<Tool[]>(`/workspaces/current/tool-provider/model/tools?${query}`)
 }
 
 export const fetchWorkflowToolList = (appID: string) => {
@@ -65,7 +68,8 @@ export const parseParamsSchema = (schema: string) => {
 }
 
 export const fetchCustomCollection = (collectionName: string) => {
-  return get<CustomCollectionBackend>(`/workspaces/current/tool-provider/api/get?provider=${collectionName}`)
+  const query = buildProviderQuery(collectionName)
+  return get<CustomCollectionBackend>(`/workspaces/current/tool-provider/api/get?${query}`)
 }
 
 export const createCustomCollection = (collection: CustomCollectionBackend) => {