diff --git a/frontend/src/lib/hooks/useAppParams.tsx b/frontend/src/lib/hooks/useAppParams.tsx
index 8cd1ebfff..773b6ccb6 100644
--- a/frontend/src/lib/hooks/useAppParams.tsx
+++ b/frontend/src/lib/hooks/useAppParams.tsx
@@ -1,7 +1,19 @@
 import { Params, useParams } from 'react-router-dom';
+import { ClusterNameRoute } from 'lib/paths';
 
 export default function useAppParams<
   T extends { [K in keyof Params]?: string }
 >() {
-  return useParams<T>() as T;
+  const params = useParams<T>() as T;
+
+  const hasClusterName = (
+    checkingParams: T
+  ): checkingParams is T & ClusterNameRoute =>
+    typeof checkingParams.clusterName !== 'undefined';
+
+  if (hasClusterName(params)) {
+    params.clusterName = decodeURIComponent(params.clusterName);
+  }
+
+  return params;
 }
diff --git a/frontend/src/lib/paths.ts b/frontend/src/lib/paths.ts
index 9cee7ca28..62b19568c 100644
--- a/frontend/src/lib/paths.ts
+++ b/frontend/src/lib/paths.ts
@@ -24,7 +24,12 @@ export const accessErrorPage = '/403';
 
 export const clusterPath = (
   clusterName: ClusterName = RouteParams.clusterName
-) => `/ui/clusters/${clusterName}`;
+) =>
+  `/ui/clusters/${
+    clusterName === RouteParams.clusterName
+      ? clusterName
+      : encodeURIComponent(clusterName)
+  }`;
 
 export type ClusterNameRoute = { clusterName: ClusterName };