diff --git a/frontend/src/component/common/index.jsx b/frontend/src/component/common/index.jsx
index 900a0231de..4b95d29890 100644
--- a/frontend/src/component/common/index.jsx
+++ b/frontend/src/component/common/index.jsx
@@ -38,7 +38,9 @@ export const AppsLinkList = ({ apps }) => (
                     <ListItemText
                         primary={
                             <Link
-                                to={`/applications/${appName}`}
+                                to={`/applications/${encodeURIComponent(
+                                    appName
+                                )}`}
                                 className={[
                                     styles.listLink,
                                     styles.truncate,
diff --git a/frontend/src/hooks/api/actions/useApplicationsApi/useApplicationsApi.ts b/frontend/src/hooks/api/actions/useApplicationsApi/useApplicationsApi.ts
index 6bf8d6e03b..ba254798e4 100644
--- a/frontend/src/hooks/api/actions/useApplicationsApi/useApplicationsApi.ts
+++ b/frontend/src/hooks/api/actions/useApplicationsApi/useApplicationsApi.ts
@@ -28,7 +28,7 @@ const useApplicationsApi = () => {
     };
 
     const deleteApplication = async (appName: string) => {
-        const path = `${URI}/${appName}`;
+        const path = `${URI}/${encodeURIComponent(appName)}`;
         const req = createRequest(path, { method: 'DELETE' });
 
         try {