diff --git a/src/app/AppLayout/AppLayout.tsx b/src/app/AppLayout/AppLayout.tsx
index 519768188..a40a39458 100644
--- a/src/app/AppLayout/AppLayout.tsx
+++ b/src/app/AppLayout/AppLayout.tsx
@@ -39,9 +39,9 @@ import * as React from 'react';
 import * as _ from 'lodash';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { NotificationCenter } from '@app/Notifications/NotificationCenter';
-import { IAppRoute, routes } from '@app/routes';
+import { IAppRoute, navGroups, routes } from '@app/routes';
 import { Alert, AlertGroup, AlertVariant, AlertActionCloseButton,
-  Brand, Button, Nav, NavItem, NavList, NotificationBadge, Page, PageHeader,
+  Brand, Button, Nav, NavItem, NavGroup, NavList, NotificationBadge, Page, PageHeader,
   PageHeaderTools, PageHeaderToolsGroup, PageHeaderToolsItem, PageSidebar,
   SkipToContent
 } from '@patternfly/react-core';
@@ -205,11 +205,21 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
   const Navigation = (
     <Nav id="nav-primary-simple" theme="dark" variant="default" onSelect={mobileOnSelect}>
       <NavList id="nav-list-simple">
-        {routes.map((route, idx) => route.label && (
-            <NavItem key={`${route.label}-${idx}`} id={`${route.label}-${idx}`} isActive={isActiveRoute(route)}>
-              <NavLink exact to={route.path} activeClassName="pf-m-current">{route.label}</NavLink>
-            </NavItem>
-          ))}
+        {navGroups.map((title) => {
+          return (
+          <NavGroup title={title}>
+            {routes.filter(route => route.navGroup === title)
+              .map((route, idx) => {
+                return (
+                route.label && (
+                <NavItem key={`${route.label}-${idx}`} id={`${route.label}-${idx}`} isActive={isActiveRoute(route)}>
+                  <NavLink exact to={route.path} activeClassName="pf-m-current">{route.label}</NavLink>
+                </NavItem>
+                ));
+              })}
+          </NavGroup>
+          );
+        })}
       </NavList>
     </Nav>
   );
diff --git a/src/app/routes.tsx b/src/app/routes.tsx
index 7ecaa0906..c8e69d525 100644
--- a/src/app/routes.tsx
+++ b/src/app/routes.tsx
@@ -52,6 +52,12 @@ import { LastLocationProvider, useLastLocation } from 'react-router-last-locatio
 import { About } from './About/About';
 
 let routeFocusTimer: number;
+const OVERVIEW = 'Overview';
+const CONSOLE = 'Console';
+const navGroups = [
+  OVERVIEW,
+  CONSOLE,
+];
 
 export interface IAppRoute {
   label?: string;
@@ -62,6 +68,7 @@ export interface IAppRoute {
   path: string;
   title: string;
   isAsync?: boolean;
+  navGroup?: string;
   children?: IAppRoute[];
 }
 
@@ -72,6 +79,15 @@ const routes: IAppRoute[] = [
     label: 'Dashboard',
     path: '/',
     title: 'Dashboard',
+    navGroup: OVERVIEW,
+  },
+  {
+    component: About,
+    exact: true,
+    label: 'About',
+    path: '/about',
+    title: 'About',
+    navGroup: OVERVIEW,
   },
   {
     component: Recordings,
@@ -79,6 +95,7 @@ const routes: IAppRoute[] = [
     label: 'Recordings',
     path: '/recordings',
     title: 'Recordings',
+    navGroup: CONSOLE,
     children: [
       {
         component: CreateRecording,
@@ -94,6 +111,7 @@ const routes: IAppRoute[] = [
     label: 'Events',
     path: '/events',
     title: 'Events',
+    navGroup: CONSOLE,
   },
   {
     component: SecurityPanel,
@@ -101,6 +119,7 @@ const routes: IAppRoute[] = [
     label: 'Security',
     path: '/security',
     title: 'Security',
+    navGroup: CONSOLE,
   },
   {
     component: Settings,
@@ -108,13 +127,6 @@ const routes: IAppRoute[] = [
     path: '/settings',
     title: 'Settings',
   },
-  {
-    component: About,
-    exact: true,
-    label: 'About',
-    path: '/about',
-    title: 'About',
-  },
 ];
 
 const flatten = (routes: IAppRoute[]): IAppRoute[] => {
@@ -191,4 +203,4 @@ const AppRoutes = () => {
   );
 };
 
-export { AppRoutes, routes };
+export { AppRoutes, routes, navGroups };