diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d70a7082..c7e4546a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -35,7 +35,7 @@ const PageLayout = () => {
 const SyncContext: React.FC = () => {
   const { context } = useParams();
   if (context) {
-    apiService.setCluster(context);
+    apiService.setCluster(decodeURIComponent(context));
   }
 
   return <Outlet />;
diff --git a/frontend/src/pages/Installed.tsx b/frontend/src/pages/Installed.tsx
index 35090414..c536076d 100644
--- a/frontend/src/pages/Installed.tsx
+++ b/frontend/src/pages/Installed.tsx
@@ -21,7 +21,7 @@ function Installed() {
 
   const handleClusterChange = (clusterName: string) => {
     navigate({
-      pathname: `/${clusterName}/installed`,
+      pathname: `/${encodeURIComponent(clusterName)}/installed`,
     });
   };