diff --git a/src-ts/config/constants.ts b/src-ts/config/constants.ts
index c1d0368a6..b14a25064 100644
--- a/src-ts/config/constants.ts
+++ b/src-ts/config/constants.ts
@@ -2,8 +2,9 @@ export enum ToolTitle {
     dev = 'Dev Center',
     game = 'Gamification Admin',
     settings = 'Account Settings',
+    support = 'Support',
     tca = 'Topcoder Academy',
-    work = 'Self-Service',
+    work = 'Self-Service Challenges',
 }
 
 export const PageSubheaderPortalId: string = 'page-subheader-portal-el'
diff --git a/src-ts/lib/functions/authentication-functions/authentication.functions.ts b/src-ts/lib/functions/authentication-functions/authentication.functions.ts
index e887b6c5c..3f16fb6e2 100644
--- a/src-ts/lib/functions/authentication-functions/authentication.functions.ts
+++ b/src-ts/lib/functions/authentication-functions/authentication.functions.ts
@@ -26,7 +26,7 @@ export function getRegistrationSource(
     activeTool: PlatformRoute | undefined,
 ): AuthenticationRegistrationSource | undefined {
 
-    switch (activeTool?.title) {
+    switch (activeTool?.id) {
 
         // currently, there is no reg source for members
         case ToolTitle.tca:
diff --git a/src-ts/lib/page-footer/PageFooter.tsx b/src-ts/lib/page-footer/PageFooter.tsx
index 845593322..631a242b3 100644
--- a/src-ts/lib/page-footer/PageFooter.tsx
+++ b/src-ts/lib/page-footer/PageFooter.tsx
@@ -1,93 +1,21 @@
-import { Dispatch, FC, MouseEvent, SetStateAction, useState } from 'react'
+import { FC } from 'react'
 
-import { ContactSupportModal, OrderContractModal, PrivacyPolicyModal, TermsModal } from '../modals'
-import { ProfileProvider } from '../profile-provider'
-import { Facebook, Instagram, LinkedIn, Twitter, Youtube } from '../social-links'
-
-import styles from './PageFooter.module.scss'
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare let tcUniNav: any
 
 const PageFooter: FC<{}> = () => {
 
-    const [isContactSupportModalOpen, setIsContactSupportModalOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
-    const [isOrderContractModalOpen, setIsOrderContractModalOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
-    const [isPrivacyModalOpen, setIsPrivacyModalOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
-    const [isTermsModalOpen, setIsTermsModalOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
-
-    function handleClick(event: MouseEvent<HTMLAnchorElement>, setter: Dispatch<SetStateAction<boolean>>): void {
-        event.preventDefault()
-        setter(true)
-    }
-
-    return (
-        <div className={styles['footer-wrap']}>
-
-            <ProfileProvider>
-                <ContactSupportModal
-                    isOpen={isContactSupportModalOpen}
-                    onClose={() => setIsContactSupportModalOpen(false)}
-                />
-            </ProfileProvider>
+    const navElementId: string = 'footer-nav-el'
 
-            <OrderContractModal
-                isOpen={isOrderContractModalOpen}
-                onClose={() => setIsOrderContractModalOpen(false)}
-            />
-
-            <PrivacyPolicyModal
-                isOpen={isPrivacyModalOpen}
-                onClose={() => setIsPrivacyModalOpen(false)}
-            />
-
-            <TermsModal
-                isOpen={isTermsModalOpen}
-                onClose={() => setIsTermsModalOpen(false)}
-            />
-
-            <div className={styles['footer-inner']}>
-                <div className={styles.utils}>
-                    <div>
-                        <span>
-                            ©
-                            {(new Date())
-                                .getFullYear()}
-                            {' '}
-                            Topcoder
-                        </span>
-                        <a
-                            href={window.location.href}
-                            onClick={e => handleClick(e, setIsContactSupportModalOpen)}
-                        >
-                            Support
-                        </a>
-                        {/* TODO: add Report a bug functionality to send to zendesk
-                        https://topcoder.atlassian.net/browse/PROD-1864
-                        <a href='#'>See a Bug?</a> */}
-                    </div>
-                    <div>
-                        <a
-                            href={window.location.href}
-                            onClick={e => handleClick(e, setIsTermsModalOpen)}
-                        >
-                            Terms
-                        </a>
-                        <a
-                            href={window.location.href}
-                            onClick={e => handleClick(e, setIsPrivacyModalOpen)}
-                        >
-                            Privacy Policy
-                        </a>
-                    </div>
-                </div>
-                <div className={styles.social}>
-                    <Facebook />
-                    <Youtube />
-                    <LinkedIn />
-                    <Twitter />
-                    <Instagram />
-                </div>
-            </div>
-        </div>
+    tcUniNav(
+        'init',
+        navElementId,
+        {
+            type: 'footer',
+        },
     )
+
+    return <div id={navElementId} />
 }
 
 export default PageFooter
diff --git a/src-ts/lib/route-provider/platform-route.model.ts b/src-ts/lib/route-provider/platform-route.model.ts
index 558ddf185..3662fa71c 100644
--- a/src-ts/lib/route-provider/platform-route.model.ts
+++ b/src-ts/lib/route-provider/platform-route.model.ts
@@ -2,11 +2,10 @@ export interface PlatformRoute {
     alternativePaths?: Array<string>
     authRequired?: boolean
     children?: Array<PlatformRoute>
-    customerOnly?: boolean
     disabled?: boolean
     element: JSX.Element
     hidden?: boolean
-    memberOnly?: boolean
+    id?: string
     rolesRequired?: Array<string>
     route: string
     title?: string
diff --git a/src-ts/lib/route-provider/route-context-data.model.ts b/src-ts/lib/route-provider/route-context-data.model.ts
index 98585ecf8..094478d1d 100644
--- a/src-ts/lib/route-provider/route-context-data.model.ts
+++ b/src-ts/lib/route-provider/route-context-data.model.ts
@@ -8,7 +8,6 @@ export interface RouteContextData {
     allRoutes: Array<PlatformRoute>
     getChildren: (parent: string) => Array<PlatformRoute>
     getChildRoutes: (parent: string) => Array<ReactElement>
-    getPath: (routeTitle: string) => string
     getPathFromRoute: (route: PlatformRoute) => string
     getRouteElement: (route: PlatformRoute) => JSX.Element
     getSignupUrl: (currentLocation: string, toolRoutes: Array<PlatformRoute>, returnUrl?: string) => string
@@ -17,6 +16,5 @@ export interface RouteContextData {
     rootLoggedInRoute: string
     rootLoggedOutFC: FC<{}>
     toolsRoutes: Array<PlatformRoute>
-    toolsRoutesForNav: Array<PlatformRoute>
     utilsRoutes: Array<PlatformRoute>
 }
diff --git a/src-ts/lib/route-provider/route-functions/index.ts b/src-ts/lib/route-provider/route-functions/index.ts
index 110edc832..f341363d0 100644
--- a/src-ts/lib/route-provider/route-functions/index.ts
+++ b/src-ts/lib/route-provider/route-functions/index.ts
@@ -1,4 +1,4 @@
 export {
+    getActive as routeGetActive,
     getSignupUrl as routeGetSignupUrl,
-    isActiveTool as routeIsActiveTool,
 } from './route.functions'
diff --git a/src-ts/lib/route-provider/route-functions/route.functions.ts b/src-ts/lib/route-provider/route-functions/route.functions.ts
index efcab33f4..785d515c4 100644
--- a/src-ts/lib/route-provider/route-functions/route.functions.ts
+++ b/src-ts/lib/route-provider/route-functions/route.functions.ts
@@ -5,6 +5,10 @@ import {
 } from '../../functions'
 import { PlatformRoute } from '../platform-route.model'
 
+export function getActive(currentLocation: string, toolRoutes: Array<PlatformRoute>): PlatformRoute | undefined {
+    return toolRoutes.find(tool => isActiveTool(currentLocation, tool))
+}
+
 // NOTE: this function ties together routes and auth,
 // so one could make an argument that it should be
 // part of the auth functions and be provided by the
@@ -18,14 +22,14 @@ export function getSignupUrl(
 ): string {
 
     // figure out the current tool so we can assign the correct reg source
-    const activeTool: PlatformRoute | undefined = toolRoutes.find(tool => isActiveTool(currentLocation, tool))
+    const activeTool: PlatformRoute | undefined = getActive(currentLocation, toolRoutes)
     const regSource: AuthenticationRegistrationSource | undefined
         = authGetRegistrationSource(activeTool)
 
     return authUrlSignup(returnUrl, regSource)
 }
 
-export function isActiveTool(activePath: string, toolRoute: PlatformRoute): boolean {
+function isActiveTool(activePath: string, toolRoute: PlatformRoute): boolean {
     return !!activePath.startsWith(toolRoute.route)
         || !!toolRoute.alternativePaths?.some(path => activePath.startsWith(path))
 }
diff --git a/src-ts/lib/route-provider/route.context.tsx b/src-ts/lib/route-provider/route.context.tsx
index 4177bf259..a151cee67 100644
--- a/src-ts/lib/route-provider/route.context.tsx
+++ b/src-ts/lib/route-provider/route.context.tsx
@@ -4,9 +4,8 @@ import { RouteContextData } from './route-context-data.model'
 
 export const defaultRouteContextData: RouteContextData = {
     allRoutes: [],
-    getChildRoutes: () => [],
     getChildren: () => [],
-    getPath: () => '',
+    getChildRoutes: () => [],
     getPathFromRoute: () => '',
     getRouteElement: () => <></>,
     getSignupUrl: () => '',
@@ -15,7 +14,6 @@ export const defaultRouteContextData: RouteContextData = {
     rootLoggedInRoute: '',
     rootLoggedOutFC: () => <></>,
     toolsRoutes: [],
-    toolsRoutesForNav: [],
     utilsRoutes: [],
 }
 
diff --git a/src-ts/lib/route-provider/route.provider.tsx b/src-ts/lib/route-provider/route.provider.tsx
index f871d7551..cdec5be87 100644
--- a/src-ts/lib/route-provider/route.provider.tsx
+++ b/src-ts/lib/route-provider/route.provider.tsx
@@ -18,7 +18,7 @@ import { profileContext, ProfileContextData } from '../profile-provider'
 import { PlatformRoute } from './platform-route.model'
 import { RequireAuthProvider } from './require-auth-provider'
 import { RouteContextData } from './route-context-data.model'
-import { routeGetSignupUrl, routeIsActiveTool } from './route-functions'
+import { routeGetActive, routeGetSignupUrl } from './route-functions'
 import { default as routeContext, defaultRouteContextData } from './route.context'
 
 interface RouteProviderProps {
@@ -47,39 +47,14 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
         // TODO: try to make these prop names configurable instead of hard-codded
         const toolsRoutes: Array<PlatformRoute> = props.toolsRoutes.filter(route => !route.disabled)
 
-        // display a tool in the nav if the following conditions are met:
-        // 1. the tool has a title
-        // 2. the tool isn't hidden (if the tool is hidden, it should never appear in the nav)
-        // AND
-        // 3. the tool is one of the following:
-        //    a. for customers and the user is a customer
-        //    b. for members and the user is a member
-        //    c. the active tool in the app (in case someone deep-links to it)
-        let activeRoute: PlatformRoute | undefined
-        const toolsRoutesForNav: Array<PlatformRoute> = toolsRoutes
-            .filter(route => {
-
-                const isActive: boolean = routeIsActiveTool(location.pathname, route)
-                if (isActive) {
-                    activeRoute = route
-                }
-
-                return !!route.title
-                    && !route.hidden
-                    && (
-                        (
-                            (!route.customerOnly || !!profile?.isCustomer)
-                            && (!route.memberOnly || !!profile?.isMember)
-                        )
-                        || isActive
-                    )
-            })
-
         const utilsRoutes: Array<PlatformRoute> = props.utilsRoutes.filter(route => !route.disabled)
         allRoutes = [
             ...toolsRoutes,
             ...utilsRoutes,
         ]
+
+        const activeRoute: PlatformRoute | undefined = routeGetActive(location.pathname, allRoutes)
+
         // TODO: support additional roles and landing pages
         const loggedInRoot: string = !profile
             ? ''
@@ -88,12 +63,11 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
                 : props.rootMember
 
         const contextData: RouteContextData = {
-            activeToolName: activeRoute?.title,
+            activeToolName: activeRoute?.title || activeRoute?.id,
             activeToolRoute: !!activeRoute ? `https://${window.location.hostname}${activeRoute.route}` : undefined,
             allRoutes,
             getChildren,
             getChildRoutes,
-            getPath,
             getPathFromRoute,
             getRouteElement,
             getSignupUrl: routeGetSignupUrl,
@@ -102,7 +76,6 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
             rootLoggedInRoute: loggedInRoot,
             rootLoggedOutFC: props.rootLoggedOutFC,
             toolsRoutes,
-            toolsRoutesForNav,
             utilsRoutes,
         }
         setRouteContextData(contextData)
@@ -110,7 +83,7 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
 
     function getChildren(parent: string): Array<PlatformRoute> {
         return allRoutes
-            .find(route => route.title === parent)
+            .find(route => route.id === parent)
             ?.children
             || []
     }
@@ -120,12 +93,6 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
             .map(route => getRouteElement(route))
     }
 
-    function getPath(routeTitle: string): string {
-        const platformRoute: PlatformRoute = allRoutes.find(route => route.title === routeTitle) as PlatformRoute
-        // if the path has a trailing asterisk, remove it
-        return getPathFromRoute(platformRoute)
-    }
-
     function getPathFromRoute(route: PlatformRoute): string {
         return route.route.replace('/*', '')
     }
diff --git a/src-ts/lib/social-links/facebook/Facebook.tsx b/src-ts/lib/social-links/facebook/Facebook.tsx
deleted file mode 100644
index 90c923da4..000000000
--- a/src-ts/lib/social-links/facebook/Facebook.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { FC } from 'react'
-
-import { SocialIconFacebook } from '../../svgs'
-import { SocialLink } from '../social-link'
-
-const Facebook: FC<{}> = () => (
-    <SocialLink
-        icon={SocialIconFacebook}
-        url='https://www.facebook.com/topcoder'
-    />
-)
-
-export default Facebook
diff --git a/src-ts/lib/social-links/facebook/index.ts b/src-ts/lib/social-links/facebook/index.ts
deleted file mode 100644
index 30a4b2461..000000000
--- a/src-ts/lib/social-links/facebook/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Facebook } from './Facebook'
diff --git a/src-ts/lib/social-links/index.ts b/src-ts/lib/social-links/index.ts
deleted file mode 100644
index 175f6f5bf..000000000
--- a/src-ts/lib/social-links/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './facebook'
-export * from './instagram'
-export * from './linked-in'
-export * from './twitter'
-export * from './youtube'
diff --git a/src-ts/lib/social-links/instagram/Instagram.tsx b/src-ts/lib/social-links/instagram/Instagram.tsx
deleted file mode 100644
index d9d2b2dbd..000000000
--- a/src-ts/lib/social-links/instagram/Instagram.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { FC } from 'react'
-
-import { SocialIconInstagram } from '../../svgs'
-import { SocialLink } from '../social-link'
-
-const Instagram: FC<{}> = () => (
-    <SocialLink
-        icon={SocialIconInstagram}
-        url='https://www.instagram.com/topcoder'
-    />
-)
-
-export default Instagram
diff --git a/src-ts/lib/social-links/instagram/index.ts b/src-ts/lib/social-links/instagram/index.ts
deleted file mode 100644
index 96f094097..000000000
--- a/src-ts/lib/social-links/instagram/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Instagram } from './Instagram'
diff --git a/src-ts/lib/social-links/linked-in/LinkedIn.tsx b/src-ts/lib/social-links/linked-in/LinkedIn.tsx
deleted file mode 100644
index 8ea3bf9ab..000000000
--- a/src-ts/lib/social-links/linked-in/LinkedIn.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { FC } from 'react'
-
-import { SocialIconLinkedIn } from '../../svgs'
-import { SocialLink } from '../social-link'
-
-const LinkedIn: FC<{}> = () => (
-    <SocialLink
-        icon={SocialIconLinkedIn}
-        url='https://www.linkedin.com/company/topcoder'
-    />
-)
-
-export default LinkedIn
diff --git a/src-ts/lib/social-links/linked-in/index.ts b/src-ts/lib/social-links/linked-in/index.ts
deleted file mode 100644
index 1f5a43bd2..000000000
--- a/src-ts/lib/social-links/linked-in/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as LinkedIn } from './LinkedIn'
diff --git a/src-ts/lib/social-links/social-link/SocialLink.tsx b/src-ts/lib/social-links/social-link/SocialLink.tsx
deleted file mode 100644
index ec9fabecc..000000000
--- a/src-ts/lib/social-links/social-link/SocialLink.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { FC, SVGProps } from 'react'
-
-interface SocialLinkProps {
-    readonly icon: FC<SVGProps<SVGSVGElement>>
-    url: string
-}
-
-const SocialLink: FC<SocialLinkProps> = (props: SocialLinkProps) => {
-
-    const Icon: FC<SVGProps<SVGSVGElement>> | undefined = props.icon
-
-    if (!Icon) {
-        return <></>
-    }
-
-    return (
-        <a href={props.url} target='_blank' rel='noreferrer'>
-            <Icon />
-        </a>
-    )
-}
-
-export default SocialLink
diff --git a/src-ts/lib/social-links/social-link/index.ts b/src-ts/lib/social-links/social-link/index.ts
deleted file mode 100644
index 626e2cf31..000000000
--- a/src-ts/lib/social-links/social-link/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as SocialLink } from './SocialLink'
diff --git a/src-ts/lib/social-links/twitter/Twitter.tsx b/src-ts/lib/social-links/twitter/Twitter.tsx
deleted file mode 100644
index 8211bc610..000000000
--- a/src-ts/lib/social-links/twitter/Twitter.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { FC } from 'react'
-
-import { SocialIconTwitter } from '../../svgs'
-import { SocialLink } from '../social-link'
-
-const Twitter: FC<{}> = () => (
-    <SocialLink
-        icon={SocialIconTwitter}
-        url='https://twitter.com/topcoder'
-    />
-)
-
-export default Twitter
diff --git a/src-ts/lib/social-links/twitter/index.ts b/src-ts/lib/social-links/twitter/index.ts
deleted file mode 100644
index 31f555b61..000000000
--- a/src-ts/lib/social-links/twitter/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Twitter } from './Twitter'
diff --git a/src-ts/lib/social-links/youtube/Youtube.tsx b/src-ts/lib/social-links/youtube/Youtube.tsx
deleted file mode 100644
index edb5f9698..000000000
--- a/src-ts/lib/social-links/youtube/Youtube.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { FC } from 'react'
-
-import { SocialIconYoutube } from '../../svgs'
-import { SocialLink } from '../social-link'
-
-const Youtube: FC<{}> = () => (
-    <SocialLink
-        icon={SocialIconYoutube}
-        url='https://www.youtube.com/channel/UCFv29ANLT2FQmtvS9DRixNA'
-    />
-)
-
-export default Youtube
diff --git a/src-ts/lib/social-links/youtube/index.ts b/src-ts/lib/social-links/youtube/index.ts
deleted file mode 100644
index d60a90f89..000000000
--- a/src-ts/lib/social-links/youtube/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Youtube } from './Youtube'
diff --git a/src-ts/tools/dev-center/dev-center.routes.tsx b/src-ts/tools/dev-center/dev-center.routes.tsx
index 6fd7d4fb4..32edc419a 100644
--- a/src-ts/tools/dev-center/dev-center.routes.tsx
+++ b/src-ts/tools/dev-center/dev-center.routes.tsx
@@ -11,7 +11,7 @@ const DevCenter: LazyLoadedComponent = lazyLoad(() => import('./DevCenter'))
 
 export const toolTitle: string = ToolTitle.dev
 
-export const devCenterRoutes: Array<PlatformRoute> = [
+export const devCenterRoutes: ReadonlyArray<PlatformRoute> = [
     {
         children: [
             {
@@ -24,8 +24,7 @@ export const devCenterRoutes: Array<PlatformRoute> = [
             },
         ],
         element: <DevCenter />,
-        memberOnly: true,
+        id: toolTitle,
         route: '/dev-center',
-        title: toolTitle,
     },
 ]
diff --git a/src-ts/tools/gamification-admin/gamification-admin.routes.tsx b/src-ts/tools/gamification-admin/gamification-admin.routes.tsx
index f59885886..5576f7cf6 100644
--- a/src-ts/tools/gamification-admin/gamification-admin.routes.tsx
+++ b/src-ts/tools/gamification-admin/gamification-admin.routes.tsx
@@ -18,7 +18,7 @@ export function badgeDetailPath(badgeId: string, view?: 'edit' | 'award'): strin
 
 export const createBadgeRoute: string = `${basePath}${createBadgePath}`
 
-export const gamificationAdminRoutes: Array<PlatformRoute> = [
+export const gamificationAdminRoutes: ReadonlyArray<PlatformRoute> = [
     {
         authRequired: true,
         children: [
@@ -37,10 +37,10 @@ export const gamificationAdminRoutes: Array<PlatformRoute> = [
         ],
         element: <GamificationAdmin />,
         hidden: true,
+        id: toolTitle,
         rolesRequired: [
             UserRole.gamificationAdmin,
         ],
         route: basePath,
-        title: toolTitle,
     },
 ]
diff --git a/src-ts/tools/learn/learn.routes.tsx b/src-ts/tools/learn/learn.routes.tsx
index e0627a75e..e7272e050 100644
--- a/src-ts/tools/learn/learn.routes.tsx
+++ b/src-ts/tools/learn/learn.routes.tsx
@@ -82,55 +82,54 @@ export function getViewStyleParamKey(): string {
     return Object.keys(LearnConfig.CERT_ALT_PARAMS)[0]
 }
 
-export const learnRoutes: Array<PlatformRoute> = [
+export const learnRoutes: ReadonlyArray<PlatformRoute> = [
     {
         children: [
             {
                 children: [],
                 element: <WelcomePage />,
+                id: 'Welcome to Topcoder Academy',
                 route: '',
-                title: 'Welcome to Topcoder Academy',
             },
             {
                 children: [],
                 element: <CourseDetailsPage />,
+                id: 'Course Details',
                 route: ':provider/:certification',
-                title: 'Course Details',
             },
             {
                 children: [],
                 element: <CourseCompletedPage />,
+                id: 'Course Completed',
                 route: ':provider/:certification/completed',
-                title: 'Course Completed',
             },
             {
                 children: [],
                 element: <MyCertificate />,
+                id: 'My Certificate',
                 route: ':provider/:certification/certificate',
-                title: 'My Certificate',
             },
             {
                 children: [],
                 element: <UserCertificate />,
+                id: 'User Certificate',
                 route: ':provider/:certification/:memberHandle/certificate',
-                title: 'User Certificate',
             },
             {
                 children: [],
                 element: <FreeCodeCamp />,
+                id: 'FxreeCodeCamp',
                 route: ':provider/:certification/:module/:lesson',
-                title: 'FreeCodeCamp',
             },
             {
                 children: [],
                 element: <MyLearning />,
+                id: 'My Learning',
                 route: 'my-learning',
-                title: 'My Learning',
             },
         ],
         element: <LandingLearn />,
-        memberOnly: true,
+        id: toolTitle,
         route: rootRoute,
-        title: toolTitle,
     },
 ]
diff --git a/src-ts/tools/tools.routes.ts b/src-ts/tools/tools.routes.ts
index ac46044f5..40e14309c 100644
--- a/src-ts/tools/tools.routes.ts
+++ b/src-ts/tools/tools.routes.ts
@@ -5,9 +5,10 @@ import { gamificationAdminRoutes } from './gamification-admin'
 import { learnRoutes } from './learn'
 import { workRoutes } from './work'
 
-const toolRoutes: Array<PlatformRoute> = [
-    // NOTE: these will be displayed in the order they are defined in this array
-    // TODO: support ordering
+const toolRoutes: ReadonlyArray<PlatformRoute> = [
+    // NOTE: Order matters here bc the active tool
+    // is determined by finding the first route
+    // that matches the current path
     ...workRoutes,
     ...devCenterRoutes,
     ...learnRoutes,
diff --git a/src-ts/tools/work/Work.tsx b/src-ts/tools/work/Work.tsx
index 038600717..28566b0aa 100644
--- a/src-ts/tools/work/Work.tsx
+++ b/src-ts/tools/work/Work.tsx
@@ -1,6 +1,7 @@
-import { Dispatch, FC, useContext } from 'react'
+import { Dispatch, FC, useCallback, useContext } from 'react'
 import { useDispatch } from 'react-redux'
 import { Navigate, NavigateFunction, Outlet, Routes, useNavigate } from 'react-router-dom'
+import { AnyAction } from 'redux'
 
 // TODO: move this from the legacy to the nextgen app
 import { resetIntakeForm } from '../../../src/actions/form'
@@ -23,15 +24,26 @@ import { WorkProvider } from './work-lib'
 import { selfServiceRootRoute, selfServiceStartRoute } from './work.routes'
 
 export const toolTitle: string = ToolTitle.work
-export const dashboardTitle: string = `${toolTitle} Dashboard`
+export const dashboardRouteId: string = `${toolTitle} Dashboard`
+export const intakeFormsRouteId: string = `${toolTitle} Intake Forms`
 
 const Work: FC<{}> = () => {
 
     const { getChildRoutes }: RouteContextData = useContext(routeContext)
     const { profile, initialized }: ProfileContextData = useContext(profileContext)
-    const dispatch: Dispatch<any> = useDispatch()
+    const dispatch: Dispatch<AnyAction> = useDispatch()
     const navigate: NavigateFunction = useNavigate()
 
+    const startWork: () => void = useCallback(() => {
+        clearCachedChallengeId()
+        clearAutoSavedForm()
+        dispatch(resetIntakeForm(true))
+        navigate(selfServiceStartRoute)
+    }, [
+        dispatch,
+        navigate,
+    ])
+
     // if a user arrives here who is not logged in, don't let them get to the page
     if (!profile) {
 
@@ -44,13 +56,6 @@ const Work: FC<{}> = () => {
         return <Navigate to={selfServiceRootRoute} />
     }
 
-    function startWork(): void {
-        clearCachedChallengeId()
-        clearAutoSavedForm()
-        dispatch(resetIntakeForm(true))
-        navigate(selfServiceStartRoute)
-    }
-
     const buttonConfig: ButtonProps = {
         label: 'Start work',
         onClick: startWork,
@@ -64,7 +69,7 @@ const Work: FC<{}> = () => {
             <WorkProvider>
                 <Outlet />
                 <Routes>
-                    {getChildRoutes(dashboardTitle)}
+                    {getChildRoutes(dashboardRouteId)}
                 </Routes>
             </WorkProvider>
         </ContentLayout>
diff --git a/src-ts/tools/work/work-self-service/intake-forms/IntakeForms.tsx b/src-ts/tools/work/work-self-service/intake-forms/IntakeForms.tsx
index 71ef0cceb..e426b9a0e 100644
--- a/src-ts/tools/work/work-self-service/intake-forms/IntakeForms.tsx
+++ b/src-ts/tools/work/work-self-service/intake-forms/IntakeForms.tsx
@@ -6,8 +6,7 @@ import {
     routeContext,
     RouteContextData,
 } from '../../../../lib'
-
-export const intakeFormsTitle: string = 'Work Intake Forms'
+import { intakeFormsRouteId } from '../../Work'
 
 const IntakeForms: FC<{}> = () => {
 
@@ -17,7 +16,7 @@ const IntakeForms: FC<{}> = () => {
         <ContentLayout>
             <Outlet />
             <Routes>
-                {getChildRoutes(intakeFormsTitle)}
+                {getChildRoutes(intakeFormsRouteId)}
             </Routes>
         </ContentLayout>
     )
diff --git a/src-ts/tools/work/work-self-service/intake-forms/index.ts b/src-ts/tools/work/work-self-service/intake-forms/index.ts
index eac9405f8..4f2e1e55d 100644
--- a/src-ts/tools/work/work-self-service/intake-forms/index.ts
+++ b/src-ts/tools/work/work-self-service/intake-forms/index.ts
@@ -1,3 +1,3 @@
-export { default as IntakeForms, intakeFormsTitle } from './IntakeForms'
+export { default as IntakeForms } from './IntakeForms'
 export * from './bug-hunt'
 export * from './review'
diff --git a/src-ts/tools/work/work.routes.tsx b/src-ts/tools/work/work.routes.tsx
index f4b3e62e5..9b4e74e93 100644
--- a/src-ts/tools/work/work.routes.tsx
+++ b/src-ts/tools/work/work.routes.tsx
@@ -2,10 +2,9 @@ import { Navigate } from 'react-router-dom'
 
 import { contactSupportPath, lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib'
 
-import { dashboardTitle, toolTitle } from './Work'
+import { dashboardRouteId, intakeFormsRouteId, toolTitle } from './Work'
 import { Work, WorkIntakeFormRoutes, WorkStatus, WorkType } from './work-lib'
 import { WorkLoginPrompt } from './work-login-prompt'
-import { intakeFormsTitle } from './work-self-service'
 
 const WorkComponent: LazyLoadedComponent = lazyLoad(() => import('./Work'))
 const WorkNotLoggedIn: LazyLoadedComponent = lazyLoad(() => import('./work-not-logged-in'), 'WorkNotLoggedIn')
@@ -49,12 +48,11 @@ export function workDetailRoute(workId: string, tab?: 'solutions' | 'messages'):
     return `${selfServiceRootRoute}/work-items/${workId}${!!tab ? `?tab=${tab}` : ''}`
 }
 
-export const workRoutes: Array<PlatformRoute> = [
+export const workRoutes: ReadonlyArray<PlatformRoute> = [
     {
-        customerOnly: true,
         element: <WorkNotLoggedIn />,
+        id: toolTitle,
         route: rootRoute,
-        title: toolTitle,
     },
     {
         alternativePaths: [
@@ -76,8 +74,9 @@ export const workRoutes: Array<PlatformRoute> = [
         ],
         element: <WorkComponent />,
         hidden: true,
+        id: dashboardRouteId,
         route: dashboardRoute,
-        title: dashboardTitle,
+        title: toolTitle,
     },
     {
         children: [
@@ -114,8 +113,9 @@ export const workRoutes: Array<PlatformRoute> = [
         ],
         element: <IntakeForms />,
         hidden: true,
-        route: `/${selfServiceRootRoute}${rootRoute}/new`,
-        title: intakeFormsTitle,
+        id: intakeFormsRouteId,
+        route: `${selfServiceRootRoute}${rootRoute}/new`,
+        title: toolTitle,
     },
     {
         element: <Navigate to={rootRoute} />,
@@ -128,6 +128,6 @@ export const workRoutes: Array<PlatformRoute> = [
     {
         children: [],
         element: <Navigate to={contactSupportPath} />,
-        route: `${rootRoute}/${contactSupportPath}`,
+        route: `${rootRoute}${contactSupportPath}`,
     },
 ]
diff --git a/src-ts/utils/contact-support/ContactSupport.tsx b/src-ts/utils/contact-support/ContactSupport.tsx
index 65938aae6..c2aa7eb5d 100644
--- a/src-ts/utils/contact-support/ContactSupport.tsx
+++ b/src-ts/utils/contact-support/ContactSupport.tsx
@@ -1,5 +1,6 @@
 import { Dispatch, FC, SetStateAction, useCallback, useState } from 'react'
 
+import { ToolTitle } from '../../config'
 import {
     ContactSupportForm,
     contactSupportFormDef,
@@ -9,21 +10,19 @@ import {
     formOnReset,
 } from '../../lib'
 
-import { toolTitle } from './contact-support.routes'
-
 const ContactSupport: FC<{}> = () => {
 
     const [formDef, setFormDef]: [FormDefinition, Dispatch<SetStateAction<FormDefinition>>]
         = useState<FormDefinition>({ ...contactSupportFormDef })
 
-    const onSave = useCallback((): void => {
+    const onSave: () => void = useCallback((): void => {
         const updatedForm: FormDefinition = { ...formDef }
         formOnReset(formGetInputFields(updatedForm.groups || []))
         setFormDef(updatedForm)
     }, [formDef])
 
     return (
-        <ContentLayout title={toolTitle}>
+        <ContentLayout title={ToolTitle.support}>
             <ContactSupportForm
                 formDef={formDef}
                 onSave={onSave}
diff --git a/src-ts/utils/contact-support/contact-support.routes.tsx b/src-ts/utils/contact-support/contact-support.routes.tsx
index 87e61c6b4..5888ef50f 100644
--- a/src-ts/utils/contact-support/contact-support.routes.tsx
+++ b/src-ts/utils/contact-support/contact-support.routes.tsx
@@ -1,14 +1,13 @@
+import { ToolTitle } from '../../config'
 import { contactSupportPath, lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib'
 
-export const toolTitle: string = 'Contact Support'
-
 const ContactSupport: LazyLoadedComponent = lazyLoad(() => import('./ContactSupport'))
 
-export const contactSupportRoutes: Array<PlatformRoute> = [
+export const contactSupportRoutes: ReadonlyArray<PlatformRoute> = [
     {
         children: [],
         element: <ContactSupport />,
+        id: ToolTitle.support,
         route: contactSupportPath,
-        title: toolTitle,
     },
 ]
diff --git a/src-ts/utils/home/home.routes.tsx b/src-ts/utils/home/home.routes.tsx
index 6f8da4b1a..0a820d647 100644
--- a/src-ts/utils/home/home.routes.tsx
+++ b/src-ts/utils/home/home.routes.tsx
@@ -4,11 +4,11 @@ const Home: LazyLoadedComponent = lazyLoad(() => import('./Home'))
 
 export const homeRoute: string = ''
 
-export const homeRoutes: Array<PlatformRoute> = [
+export const homeRoutes: ReadonlyArray<PlatformRoute> = [
     {
         element: <Home />,
         hidden: true,
+        id: 'Home page',
         route: homeRoute,
-        title: 'Home page',
     },
 ]
diff --git a/src-ts/utils/settings/settings.routes.tsx b/src-ts/utils/settings/settings.routes.tsx
index 7c158be7c..728a06002 100644
--- a/src-ts/utils/settings/settings.routes.tsx
+++ b/src-ts/utils/settings/settings.routes.tsx
@@ -4,7 +4,7 @@ import { lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib'
 const Account: LazyLoadedComponent = lazyLoad(() => import('./account'), 'Account')
 const Settings: LazyLoadedComponent = lazyLoad(() => import('./Settings'))
 
-export const settingsRoutes: Array<PlatformRoute> = [
+export const settingsRoutes: ReadonlyArray<PlatformRoute> = [
     {
         authRequired: true,
         children: [
@@ -16,7 +16,7 @@ export const settingsRoutes: Array<PlatformRoute> = [
             },
         ],
         element: <Settings />,
+        id: ToolTitle.settings,
         route: '/account',
-        title: ToolTitle.settings,
     },
 ]
diff --git a/src-ts/utils/utils.routes.tsx b/src-ts/utils/utils.routes.tsx
index a14b17758..fb575fd00 100644
--- a/src-ts/utils/utils.routes.tsx
+++ b/src-ts/utils/utils.routes.tsx
@@ -4,10 +4,14 @@ import { contactSupportRoutes } from './contact-support'
 import { homeRoutes } from './home'
 import { settingsRoutes } from './settings'
 
-const utilsRoutes: Array<PlatformRoute> = [
+const utilsRoutes: ReadonlyArray<PlatformRoute> = [
+    // NOTE: Order matters here bc the active tool
+    // is determined by finding the first route
+    // that matches the current path
     ...contactSupportRoutes,
-    ...homeRoutes,
     ...settingsRoutes,
+    // home routes need to be last bc they match all other routes
+    ...homeRoutes,
 ]
 
 export default utilsRoutes