diff --git a/web/src/RouteDefinitions.ts b/web/src/RouteDefinitions.ts
index 4e43c5927..c0ea8f453 100644
--- a/web/src/RouteDefinitions.ts
+++ b/web/src/RouteDefinitions.ts
@@ -18,7 +18,7 @@ export interface CODEQueryProps {
 }
 
 export const pathProps: Readonly<Omit<Required<CODEProps>, 'repoPath' | 'branch' | 'tags'>> = {
-  space: ':space',
+  space: ':space*',
   repoName: ':repoName',
   gitRef: ':gitRef*',
   resourcePath: ':resourcePath*',
diff --git a/web/src/RouteDestinations.tsx b/web/src/RouteDestinations.tsx
index fe63f2aac..2ccf6b31a 100644
--- a/web/src/RouteDestinations.tsx
+++ b/web/src/RouteDestinations.tsx
@@ -66,6 +66,30 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
           </LayoutWithSideNav>
         </Route>
 
+        <Route path={[routes.toCODEHome()]} exact>
+          <LayoutWithSideNav title={getString('pageTitle.home')}>
+            <Home />
+          </LayoutWithSideNav>
+        </Route>
+
+        <Route path={routes.toCODEUsers()}>
+          <LayoutWithSideNav title={getString('pageTitle.users')}>
+            <UsersListing />
+          </LayoutWithSideNav>
+        </Route>
+
+        <Route path={routes.toCODEUserProfile()} exact>
+          <LayoutWithSideNav title={getString('pageTitle.userProfile')}>
+            <UserProfile />
+          </LayoutWithSideNav>
+        </Route>
+
+        <Route path={routes.toCODEUserChangePassword()} exact>
+          <LayoutWithSideNav title={getString('pageTitle.changePassword')}>
+            <ChangePassword />
+          </LayoutWithSideNav>
+        </Route>
+
         <Route
           path={[
             routes.toCODEPullRequest({
@@ -192,30 +216,6 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
             <Repository />
           </LayoutWithSideNav>
         </Route>
-
-        <Route path={[routes.toCODEHome()]} exact>
-          <LayoutWithSideNav title={getString('pageTitle.home')}>
-            <Home />
-          </LayoutWithSideNav>
-        </Route>
-
-        <Route path={routes.toCODEUsers()}>
-          <LayoutWithSideNav title={getString('pageTitle.users')}>
-            <UsersListing />
-          </LayoutWithSideNav>
-        </Route>
-
-        <Route path={routes.toCODEUserProfile()} exact>
-          <LayoutWithSideNav title={getString('pageTitle.userProfile')}>
-            <UserProfile />
-          </LayoutWithSideNav>
-        </Route>
-
-        <Route path={routes.toCODEUserChangePassword()} exact>
-          <LayoutWithSideNav title={getString('pageTitle.changePassword')}>
-            <ChangePassword />
-          </LayoutWithSideNav>
-        </Route>
       </Switch>
     </BrowserRouter>
   )
diff --git a/web/src/components/SpaceSelector/SpaceSelector.tsx b/web/src/components/SpaceSelector/SpaceSelector.tsx
index a8f7971ce..9f7fcc8a5 100644
--- a/web/src/components/SpaceSelector/SpaceSelector.tsx
+++ b/web/src/components/SpaceSelector/SpaceSelector.tsx
@@ -18,7 +18,7 @@ export const SpaceSelector: React.FC<SpaceSelectorProps> = ({ onSelect }) => {
   const [selectedSpace, setSelectedSpace] = useState<TypesSpace | undefined>()
   const { space } = useGetRepositoryMetadata()
   const [opened, setOpened] = React.useState(false)
-  const { data, error } = useGetSpace({ space_ref: space, lazy: !space })
+  const { data, error } = useGetSpace({ space_ref: encodeURIComponent(space), lazy: !space })
   const selectSpace = useCallback(
     (_space: TypesSpace, isUserAction: boolean) => {
       setSelectedSpace(_space)
@@ -82,6 +82,12 @@ export const SpaceSelector: React.FC<SpaceSelectorProps> = ({ onSelect }) => {
               onClick={() => selectSpace({ uid: 'root', path: 'root' }, true)}>
               Root Space
             </Text>
+            <Text
+              className={Classes.POPOVER_DISMISS}
+              {...ButtonRoleProps}
+              onClick={() => selectSpace({ uid: 'rootChild1', path: 'root/rootChild1' }, true)}>
+              Root Child 1 Space
+            </Text>
             <Text
               className={Classes.POPOVER_DISMISS}
               {...ButtonRoleProps}
diff --git a/web/src/layouts/menu/DefaultMenu.tsx b/web/src/layouts/menu/DefaultMenu.tsx
index 797303cf2..1f84273ce 100644
--- a/web/src/layouts/menu/DefaultMenu.tsx
+++ b/web/src/layouts/menu/DefaultMenu.tsx
@@ -20,7 +20,7 @@ export const DefaultMenu: React.FC = () => {
   const repoPath = useMemo(() => repoMetadata?.path || '', [repoMetadata])
   const routeMatch = useRouteMatch()
   const isFilesSelected = useMemo(
-    () => routeMatch.path === '/:space/:repoName' || routeMatch.path.startsWith('/:space/:repoName/edit'),
+    () => routeMatch.path === '/:space*/:repoName' || routeMatch.path.startsWith('/:space*/:repoName/edit'),
     [routeMatch]
   )
 
@@ -52,7 +52,7 @@ export const DefaultMenu: React.FC = () => {
               }
             }}
             label={getString('repositories')}
-            to={routes.toCODERepositories({ space: selectedSpace?.uid as string })}
+            to={routes.toCODERepositories({ space: selectedSpace?.path as string })}
             isDeselected={!!repoMetadata}
             isHighlighted={!!repoMetadata}
           />
@@ -139,13 +139,13 @@ export const DefaultMenu: React.FC = () => {
           <NavMenuItem
             icon="nav-project"
             label={getString('accessControl')}
-            to={routes.toCODESpaceAccessControl({ space: selectedSpace?.uid as string })}
+            to={routes.toCODESpaceAccessControl({ space: selectedSpace?.path as string })}
           />
 
           <NavMenuItem
             icon="code-settings"
             label={getString('settings')}
-            to={routes.toCODESpaceSettings({ space: selectedSpace?.uid as string })}
+            to={routes.toCODESpaceSettings({ space: selectedSpace?.path as string })}
           />
         </Render>
       </Layout.Vertical>