diff --git a/frontend/src/component/application/Application.tsx b/frontend/src/component/application/Application.tsx
index 2d9c24d63c..f531b74a1f 100644
--- a/frontend/src/component/application/Application.tsx
+++ b/frontend/src/component/application/Application.tsx
@@ -78,7 +78,7 @@ export const Application = () => {
     const { setToastData, setToastApiError } = useToast();
     const { pathname } = useLocation();
 
-    const basePath = `/applications/${name}`;
+    const basePath = `/applications/${encodeURIComponent(name)}`;
 
     const [showDialog, setShowDialog] = useState(false);
 
diff --git a/frontend/src/component/application/ApplicationList/PaginatedApplicationList.tsx b/frontend/src/component/application/ApplicationList/PaginatedApplicationList.tsx
index 3cad383249..51bf588448 100644
--- a/frontend/src/component/application/ApplicationList/PaginatedApplicationList.tsx
+++ b/frontend/src/component/application/ApplicationList/PaginatedApplicationList.tsx
@@ -109,7 +109,7 @@ export const PaginatedApplicationList = () => {
                 }: any) => (
                     <LinkCell
                         title={appName}
-                        to={`/applications/${appName}`}
+                        to={`/applications/${encodeURIComponent(appName)}`}
                         subtitle={description}
                     />
                 ),
diff --git a/frontend/src/component/project/ProjectApplications/ProjectApplications.tsx b/frontend/src/component/project/ProjectApplications/ProjectApplications.tsx
index ec880e82cf..b2b12025c8 100644
--- a/frontend/src/component/project/ProjectApplications/ProjectApplications.tsx
+++ b/frontend/src/component/project/ProjectApplications/ProjectApplications.tsx
@@ -99,7 +99,9 @@ export const ProjectApplications = () => {
                         title={row.original.name}
                         onClick={() => {
                             trackProjectApplicationClick();
-                            navigate(`/applications/${row.original.name}`);
+                            navigate(
+                                `/applications/${encodeURIComponent(row.original.name)}`,
+                            );
                         }}
                     />
                 ),
diff --git a/frontend/src/hooks/api/getters/useApplication/useApplication.ts b/frontend/src/hooks/api/getters/useApplication/useApplication.ts
index 17e52ec7ae..c819a05675 100644
--- a/frontend/src/hooks/api/getters/useApplication/useApplication.ts
+++ b/frontend/src/hooks/api/getters/useApplication/useApplication.ts
@@ -16,7 +16,8 @@ const useApplication = (
     name: string,
     options: SWRConfiguration = {},
 ): IUseApplicationOutput => {
-    const path = formatApiPath(`api/admin/metrics/applications/${name}`);
+    const encodedName = encodeURIComponent(name);
+    const path = formatApiPath(`api/admin/metrics/applications/${encodedName}`);
 
     const fetcher = async () => {
         return fetch(path, {
@@ -26,7 +27,7 @@ const useApplication = (
             .then((res) => res.json());
     };
 
-    const APPLICATION_CACHE_KEY = `api/admin/metrics/applications/${name}`;
+    const APPLICATION_CACHE_KEY = `api/admin/metrics/applications/${encodedName}`;
 
     const { data, error } = useSWR(APPLICATION_CACHE_KEY, fetcher, {
         ...options,
@@ -44,7 +45,7 @@ const useApplication = (
 
     return {
         application: data || {
-            appName: name,
+            appName: encodedName,
             color: '',
             createdAt: '2022-02-02T21:04:00.268Z',
             description: '',
diff --git a/frontend/src/hooks/api/getters/useApplicationOverview/useApplicationOverview.ts b/frontend/src/hooks/api/getters/useApplicationOverview/useApplicationOverview.ts
index 98a9b50ca5..d876f8a880 100644
--- a/frontend/src/hooks/api/getters/useApplicationOverview/useApplicationOverview.ts
+++ b/frontend/src/hooks/api/getters/useApplicationOverview/useApplicationOverview.ts
@@ -15,8 +15,9 @@ export const useApplicationOverview = (
     application: string,
     options: SWRConfiguration = {},
 ) => {
+    const encodedApplication = encodeURIComponent(application);
     const path = formatApiPath(
-        `api/admin/metrics/applications/${application}/overview`,
+        `api/admin/metrics/applications/${encodedApplication}/overview`,
     );
     const { data, error } = useSWR<ApplicationOverviewSchema>(
         path,
diff --git a/frontend/src/hooks/api/getters/useConnectedInstances/useConnectedInstances.ts b/frontend/src/hooks/api/getters/useConnectedInstances/useConnectedInstances.ts
index 5c91c1fdd8..c3793e2a4a 100644
--- a/frontend/src/hooks/api/getters/useConnectedInstances/useConnectedInstances.ts
+++ b/frontend/src/hooks/api/getters/useConnectedInstances/useConnectedInstances.ts
@@ -17,8 +17,9 @@ export const useConnectedInstances = (
     environment?: string,
     options: SWRConfiguration = {},
 ) => {
+    const encodedApplication = encodeURIComponent(application);
     const path = formatApiPath(
-        `api/admin/metrics/instances/${application}/environment/${environment}`,
+        `api/admin/metrics/instances/${encodedApplication}/environment/${environment}`,
     );
     const { data, error } = useConditionalSWR<ConnectedInstancesSchema>(
         Boolean(environment),