diff --git a/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.test.tsx b/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.test.tsx
new file mode 100644
index 0000000000..23f2db94d6
--- /dev/null
+++ b/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.test.tsx
@@ -0,0 +1,22 @@
+import { render } from 'utils/testRenderer';
+import { Route, Routes } from 'react-router-dom';
+import BreadcrumbNav from './BreadcrumbNav';
+import { screen } from '@testing-library/react';
+
+test('decode URI encoded path in breadcrumbs nav', async () => {
+    render(
+        <Routes>
+            <Route
+                path={'/applications/:name/:instance'}
+                element={<BreadcrumbNav />}
+            />
+        </Routes>,
+        {
+            route: '/applications/my%20app/my%20instance',
+        },
+    );
+
+    await screen.findByText('applications');
+    await screen.findByText('my app');
+    await screen.findByText('my instance');
+});
diff --git a/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx b/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
index e05ab60cdb..f936c9f3bd 100644
--- a/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
+++ b/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
@@ -49,7 +49,8 @@ const BreadcrumbNav = () => {
                 item !== 'create-toggle' &&
                 item !== 'settings' &&
                 item !== 'profile',
-        );
+        )
+        .map(decodeURI);
 
     return (
         <StyledBreadcrumbContainer>