diff --git a/web/src/store/requests/columnlineage.ts b/web/src/store/requests/columnlineage.ts
index 415c12e4b2..2c13c10c08 100644
--- a/web/src/store/requests/columnlineage.ts
+++ b/web/src/store/requests/columnlineage.ts
@@ -15,8 +15,9 @@ export const getColumnLineage = async (
   name: string,
   depth: number
 ) => {
-  const nodeId = generateNodeId(nodeType, namespace, name)
-  // Node ID cannot be URL encoded
+  const encodedNamespace = encodeURIComponent(namespace)
+  const encodedName = encodeURIComponent(name)
+  const nodeId = generateNodeId(nodeType, encodedNamespace, encodedName)
   const url = `${API_URL}/column-lineage?nodeId=${nodeId}&depth=${depth}&withDownstream=true`
   return genericFetchWrapper(url, { method: 'GET' }, 'fetchColumnLineage')
 }
diff --git a/web/src/store/requests/lineage.ts b/web/src/store/requests/lineage.ts
index 55bde43f90..f7c19f20f7 100644
--- a/web/src/store/requests/lineage.ts
+++ b/web/src/store/requests/lineage.ts
@@ -12,8 +12,9 @@ export const getLineage = async (
   name: string,
   depth: number
 ) => {
-  const nodeId = generateNodeId(nodeType, namespace, name)
-  // Node ID cannot be URL encoded
+  const encodedNamespace = encodeURIComponent(namespace)
+  const encodedName = encodeURIComponent(name)
+  const nodeId = generateNodeId(nodeType, encodedNamespace, encodedName)
   const url = `${API_URL}/lineage?nodeId=${nodeId}&depth=${depth}`
   return genericFetchWrapper(url, { method: 'GET' }, 'fetchLineage')
 }