diff --git a/src/App.jsx b/src/App.jsx
index 07e7021ddf..c64bbb022e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,10 +2,8 @@ import React, { Fragment } from 'react';
 import { ConfigContext } from './context';
 
 import {
-  HashRouter as Router,
   Redirect,
   Switch,
-  withRouter,
   Route,
 } from 'react-router-dom';
 import {
@@ -19,30 +17,16 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import { global_breakpoint_md as breakpointMd } from '@patternfly/react-tokens';
-import { I18nProvider, I18n } from '@lingui/react';
-import { t } from '@lingui/macro';
 
 import api from './api';
 import { API_LOGOUT, API_CONFIG } from './endpoints';
 
-import ja from '../build/locales/ja/messages';
-import en from '../build/locales/en/messages';
 import Login from './pages/Login';
-import Background from './components/Background';
 import HelpDropdown from './components/HelpDropdown';
 import LogoutButton from './components/LogoutButton';
 import TowerLogo from './components/TowerLogo';
 import NavExpandableGroup from './components/NavExpandableGroup';
 
-const catalogs = { en, ja };
-// Derive the language and the region from global user agent data. Example: es-US
-// https://developer.mozilla.org/en-US/docs/Web/API/Navigator
-const language = (navigator.languages && navigator.languages[0])
-  || navigator.language
-  || navigator.userLanguage;
-const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
-
-
 class App extends React.Component {
   constructor(props) {
     super(props);
@@ -83,94 +67,80 @@ class App extends React.Component {
 
   render () {
     const { config, isNavOpen } = this.state;
-    // extract a flattened array of all routes from the provided route config
-    const { logo, loginInfo, routeGroups = [] } = this.props;
+    const { logo, loginInfo, navLabel, routeGroups = [] } = this.props;
 
     return (
-      <Router>
-        <I18nProvider
-          language={languageWithoutRegionCode}
-          catalogs={catalogs}
-        >
-          <I18n>
-            {({ i18n }) => (
-              api.isAuthenticated () ? (
-                <ConfigContext.Provider value={config}>
-                  <Switch>
-                    <Route path="/login" render={() => <Redirect to='/home' />} />
-                    <Route exact path="/" render={() => <Redirect to='/home' />} />
-                    <Route render={() => (
-                      <Background>
-                        <Page
-                          usecondensed="True"
-                          header={(
-                            <PageHeader
-                              showNavToggle
-                              onNavToggle={() => this.onNavToggle()}
-                              logo={(
-                                <TowerLogo
-                                  onClick={this.onLogoClick}
-                                />
-                              )}
-                              toolbar={(
-                                <Toolbar>
-                                  <ToolbarGroup>
-                                    <ToolbarItem>
-                                      <HelpDropdown />
-                                    </ToolbarItem>
-                                    <ToolbarItem>
-                                      <LogoutButton
-                                        onDevLogout={() => this.onDevLogout()}
-                                      />
-                                    </ToolbarItem>
-                                  </ToolbarGroup>
-                                </Toolbar>
-                              )}
+      api.isAuthenticated () ? (
+        <Switch>
+          <Route path="/login" render={() => <Redirect to='/home' />} />
+          <Route exact path="/" render={() => <Redirect to='/home' />} />
+          <Route render={() => (
+            <ConfigContext.Provider value={config}>
+              <Page
+                usecondensed="True"
+                header={(
+                  <PageHeader
+                    showNavToggle
+                    onNavToggle={() => this.onNavToggle()}
+                    logo={(
+                      <TowerLogo
+                        onClick={this.onLogoClick}
+                      />
+                    )}
+                    toolbar={(
+                      <Toolbar>
+                        <ToolbarGroup>
+                          <ToolbarItem>
+                            <HelpDropdown />
+                          </ToolbarItem>
+                          <ToolbarItem>
+                            <LogoutButton
+                              onDevLogout={() => this.onDevLogout()}
                             />
-                          )}
-                          sidebar={(
-                            <PageSidebar
-                              isNavOpen={isNavOpen}
-                              nav={(
-                                <Nav aria-label={i18n._("Primary Navigation")}>
-                                  <NavList>
-                                  {
-                                    routeGroups.map(params => <NavExpandableGroup key={params.groupId} {...params} />)
-                                  }
-                                  </NavList>
-                                </Nav>
-                              )}
-                            />
-                          )}
-                        >
+                          </ToolbarItem>
+                        </ToolbarGroup>
+                      </Toolbar>
+                    )}
+                  />
+                )}
+                sidebar={(
+                  <PageSidebar
+                    isNavOpen={isNavOpen}
+                    nav={(
+                      <Nav aria-label={navLabel}>
+                        <NavList>
                         {
-                          //
-                          // Extract a flattened array of all route params from the provided route groups
-                          // and use it to create the route components.
-                          //
-                          // [{ routes }, { routes }] -> [route, route, route] -> (<Route/><Route/><Route/>)
-                          //
-                          routeGroups
-                            .reduce((allRoutes, { routes }) => allRoutes.concat(routes), [])
-                            .map(({ component: Component, path }) => (
-                              <Route key={path} path={path} render={params => <Component {...params } />} />
-                            ))
+                          routeGroups.map(params => <NavExpandableGroup key={params.groupId} {...params} />)
                         }
-                        </Page>
-                      </Background>
-                    )} />
-                  </Switch>
-                </ConfigContext.Provider>
-              ) : (
-                <Switch>
-                  <Route path="/login" render={() => <Login logo={logo} loginInfo={loginInfo} />} />
-                  <Redirect to="/login" />
-                </Switch>
-              )
-            )}
-          </I18n>
-        </I18nProvider>
-      </Router>
+                        </NavList>
+                      </Nav>
+                    )}
+                  />
+                )}
+              >
+              {
+                //
+                // Extract a flattened array of all route params from the provided route config
+                // and use it to render route components.
+                //
+                // [{ routes }, { routes }] -> [route, route, route] -> (<Route/><Route/><Route/>)
+                //
+                routeGroups
+                  .reduce((allRoutes, { routes }) => allRoutes.concat(routes), [])
+                  .map(({ component: Component, path }) => (
+                    <Route key={path} path={path} render={params => <Component {...params } />} />
+                  ))
+              }
+              </Page>
+            </ConfigContext.Provider>
+          )} />
+        </Switch>
+      ) : (
+        <Switch>
+          <Route path="/login" render={() => <Login logo={logo} loginInfo={loginInfo} />} />
+          <Redirect to="/login" />
+        </Switch>
+      )
     );
   }
 }
diff --git a/src/index.jsx b/src/index.jsx
index 03a4264183..ed95e8b74e 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,16 +1,24 @@
 import React from 'react';
 import { render } from 'react-dom';
-
-import App from './App';
-import api from './api';
+import {
+  HashRouter as Router,
+  Switch,
+} from 'react-router-dom';
+import {
+  I18n,
+  I18nProvider,
+} from '@lingui/react';
+import { t } from '@lingui/macro';
 
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/patternfly-next/patternfly.css';
-
 import './app.scss';
 import './components/Pagination/styles.scss';
 import './components/DataListToolbar/styles.scss';
 
+import api from './api';
+import App from './App';
+import Background from './components/Background';
 import Applications from './pages/Applications';
 import Credentials from './pages/Credentials';
 import CredentialTypes from './pages/CredentialTypes';
@@ -34,150 +42,16 @@ import License from './pages/License';
 import Teams from './pages/Teams';
 import Templates from './pages/Templates';
 import Users from './pages/Users';
+import ja from '../build/locales/ja/messages';
+import en from '../build/locales/en/messages';
 
-const routeGroups = [
-  {
-    groupId: 'views_group',
-    title: 'Views',
-    routes: [
-      {
-        path: '/home',
-        title: 'Dashboard',
-        component: Dashboard
-      },
-      {
-        path: '/jobs',
-        title: 'Jobs',
-        component: Jobs
-      },
-      {
-        path: '/schedules',
-        title: 'Schedules',
-        component: Schedules
-      },
-      {
-        path: '/portal',
-        title: 'Portal Mode',
-        component: Portal
-      },
-    ],
-  },
-  {
-    groupId: 'resources_group',
-    title: "Resources",
-    routes: [
-      {
-        path: '/templates',
-        title: 'Templates',
-        component: Templates
-      },
-      {
-        path: '/credentials',
-        title: 'Credentials',
-        component: Credentials
-      },
-      {
-        path: '/projects',
-        title: 'Projects',
-        component: Projects
-      },
-      {
-        path: '/inventories',
-        title: 'Inventories',
-        component: Inventories
-      },
-      {
-        path: '/inventory_scripts',
-        title: 'Inventory Scripts',
-        component: InventoryScripts
-      },
-    ],
-  },
-  {
-    groupId: 'access_group',
-    title: 'Access',
-    routes: [
-      {
-        path: '/organizations',
-        title: 'Organizations',
-        component: Organizations
-      },
-      {
-        path: '/users',
-        title: 'Users',
-        component: Users
-      },
-      {
-        path: '/teams',
-        title: 'Teams',
-        component: Teams
-      },
-    ],
-  },
-  {
-    groupId: 'administration_group',
-    title: 'Administration',
-    routes: [
-      {
-        path: '/credential_types',
-        title: 'Credential Types',
-        component: CredentialTypes
-      },
-      {
-        path: '/notification_templates',
-        title: 'Notifications',
-        component: NotificationTemplates
-      },
-      {
-        path: '/management_jobs',
-        title: 'Management Jobs',
-        component: ManagementJobs
-      },
-      {
-        path: '/instance_groups',
-        title: 'Instance Groups',
-        component: InstanceGroups
-      },
-      {
-        path: '/applications',
-        title: 'Integrations',
-        component: Applications
-      },
-    ],
-  },
-  {
-    groupId: 'settings_group',
-    title: 'Settings',
-    routes: [
-      {
-        path: '/auth_settings',
-        title: 'Authentication',
-        component: AuthSettings
-      },
-      {
-        path: '/jobs_settings',
-        title: 'Jobs',
-        component: JobsSettings
-      },
-      {
-        path: '/system_settings',
-        title: 'System',
-        component: SystemSettings
-      },
-      {
-        path: '/ui_settings',
-        title: 'User Interface',
-        component: UISettings
-      },
-      {
-        path: '/license',
-        title: 'License',
-        component: License
-      },
-    ],
-  },
-];
-
+const catalogs = { en, ja };
+// Derive the language and region from global user agent data. Example: es-US
+// https://developer.mozilla.org/en-US/docs/Web/API/Navigator
+const language = (navigator.languages && navigator.languages[0])
+  || navigator.language
+  || navigator.userLanguage;
+const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
 
 export async function main () {
   const el = document.getElementById('app');
@@ -186,11 +60,166 @@ export async function main () {
   const { custom_logo, custom_login_info } = data;
 
   render(
-    <App
-      logo={custom_logo}
-      loginInfo={custom_login_info}
-      routeGroups={routeGroups}
-    />, el);
+    <Router>
+      <I18nProvider
+        language={languageWithoutRegionCode}
+        catalogs={catalogs}
+      >
+        <I18n>
+          {({ i18n }) => (
+            <Background>
+              <App
+                logo={custom_logo}
+                loginInfo={custom_login_info}
+                navLabel={i18n._(t`Primary Navigation`)}
+                routeGroups={[
+                  {
+                    title: i18n._(t`Views`),
+                    groupId: 'views_group',
+                    routes: [
+                      {
+                        title: i18n._(t`Dashboard`),
+                        path: '/home',
+                        component: Dashboard
+                      },
+                      {
+                        title: i18n._(t`Jobs`),
+                        path: '/jobs',
+                        component: Jobs
+                      },
+                      {
+                        title: i18n._(t`Schedules`),
+                        path: '/schedules',
+                        component: Schedules
+                      },
+                      {
+                        title: i18n._(t`Portal Mode`),
+                        path: '/portal',
+                        component: Portal
+                      },
+                    ],
+                  },
+                  {
+                    title: i18n._(t`Resources`),
+                    groupId: 'resources_group',
+                    routes: [
+                      {
+                        title: i18n._(t`Templates`),
+                        path: '/templates',
+                        component: Templates
+                      },
+                      {
+                        title: i18n._(t`Credentials`),
+                        path: '/credentials',
+                        component: Credentials
+                      },
+                      {
+                        title: i18n._(t`Projects`),
+                        path: '/projects',
+                        component: Projects
+                      },
+                      {
+                        title: i18n._(t`Inventories`),
+                        path: '/inventories',
+                        component: Inventories
+                      },
+                      {
+                        title: i18n._(t`Inventory Scripts`),
+                        path: '/inventory_scripts',
+                        component: InventoryScripts
+                      },
+                    ],
+                  },
+                  {
+                    title: i18n._(t`Access`),
+                    groupId: 'access_group',
+                    routes: [
+                      {
+                        title: i18n._(t`Organizations`),
+                        path: '/organizations',
+                        component: Organizations
+                      },
+                      {
+                        title: i18n._(t`Users`),
+                        path: '/users',
+                        component: Users
+                      },
+                      {
+                        title: i18n._(t`Teams`),
+                        path: '/teams',
+                        component: Teams
+                      },
+                    ],
+                  },
+                  {
+                    title: i18n._(t`Administration`),
+                    groupId: 'administration_group',
+                    routes: [
+                      {
+                        title: i18n._(t`Credential Types`),
+                        path: '/credential_types',
+                        component: CredentialTypes
+                      },
+                      {
+                        title: i18n._(t`Notifications`),
+                        path: '/notification_templates',
+                        component: NotificationTemplates
+                      },
+                      {
+                        title: i18n._(t`Management Jobs`),
+                        path: '/management_jobs',
+                        component: ManagementJobs
+                      },
+                      {
+                        title: i18n._(t`Instance Groups`),
+                        path: '/instance_groups',
+                        component: InstanceGroups
+                      },
+                      {
+                        title: i18n._(t`Integrations`),
+                        path: '/applications',
+                        component: Applications
+                      },
+                    ],
+                  },
+                  {
+                    title: i18n._(t`Settings`),
+                    groupId: 'settings_group',
+                    routes: [
+                      {
+                        title: i18n._(t`Authentication`),
+                        path: '/auth_settings',
+                        component: AuthSettings
+                      },
+                      {
+                        title: i18n._(t`Jobs`),
+                        path: '/jobs_settings',
+                        component: JobsSettings
+                      },
+                      {
+                        title: i18n._(t`System`),
+                        path: '/system_settings',
+                        component: SystemSettings
+                      },
+                      {
+                        title: i18n._(t`User Interface`),
+                        path: '/ui_settings',
+                        component: UISettings
+                      },
+                      {
+                        title: i18n._(t`License`),
+                        path: '/license',
+                        component: License
+                      },
+                    ],
+                  },
+                ]}
+              />
+            </Background>
+          )}
+        </I18n>
+      </I18nProvider>
+    </Router>, el);
 };
 
 export default main();
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index ba7917f9a3..20690940b2 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -10,8 +10,6 @@ import {
 import towerLogo from '../../images/tower-logo-header.svg';
 import api from '../api';
 
-import Background from '../components/Background';
-
 class AtLogin extends Component {
   constructor (props) {
     super(props);
@@ -66,25 +64,23 @@ class AtLogin extends Component {
     return (
       <I18n>
         {({ i18n }) => (
-          <Background>
-            <LoginPage
-              brandImgSrc={logoSrc}
-              brandImgAlt={alt || 'Ansible Tower'}
-              loginTitle={i18n._(t`Welcome to Ansible Tower! Please Sign In.`)}
-            >
-              <LoginForm
-                usernameLabel={i18n._(t`Username`)}
-                usernameValue={username}
-                onChangeUsername={this.handleUsernameChange}
-                passwordLabel={i18n._(t`Password`)}
-                passwordValue={password}
-                onChangePassword={this.handlePasswordChange}
-                isValidPassword={isValidPassword}
-                passwordHelperTextInvalid={i18n._(t`Invalid username or password. Please try again.`)}
-                onLoginButtonClick={this.handleSubmit}
-              />
-            </LoginPage>
-          </Background>
+          <LoginPage
+            brandImgSrc={logoSrc}
+            brandImgAlt={alt || 'Ansible Tower'}
+            loginTitle={i18n._(t`Welcome to Ansible Tower! Please Sign In.`)}
+          >
+            <LoginForm
+              usernameLabel={i18n._(t`Username`)}
+              usernameValue={username}
+              onChangeUsername={this.handleUsernameChange}
+              passwordLabel={i18n._(t`Password`)}
+              passwordValue={password}
+              onChangePassword={this.handlePasswordChange}
+              isValidPassword={isValidPassword}
+              passwordHelperTextInvalid={i18n._(t`Invalid username or password. Please try again.`)}
+              onLoginButtonClick={this.handleSubmit}
+            />
+          </LoginPage>
         )}
       </I18n>
     );