diff --git a/.env.ibm b/.env.ibm
index 2d47ae9..b781328 100644
--- a/.env.ibm
+++ b/.env.ibm
@@ -1,4 +1,5 @@
 NODE_ENV=production
 VUE_APP_ENV_NAME=ibm
 VUE_APP_COMPANY_NAME="IBM"
-CUSTOM_STYLES=true
\ No newline at end of file
+CUSTOM_STYLES=true
+CUSTOM_APP_NAV=true
\ No newline at end of file
diff --git a/src/env/components/AppNavigation/ibm.js b/src/env/components/AppNavigation/ibm.js
new file mode 100644
index 0000000..014edd6
--- /dev/null
+++ b/src/env/components/AppNavigation/ibm.js
@@ -0,0 +1,139 @@
+import IconAnalytics from '@carbon/icons-vue/es/analytics/16';
+import IconDataCheck from '@carbon/icons-vue/es/data--check/16';
+import IconSettingsAdjust from '@carbon/icons-vue/es/settings--adjust/16';
+import IconSettings from '@carbon/icons-vue/es/settings/16';
+import IconPassword from '@carbon/icons-vue/es/password/16';
+import IconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+
+const AppNavigationMixin = {
+  components: {
+    iconOverview: IconAnalytics,
+    iconHealth: IconDataCheck,
+    iconControl: IconSettingsAdjust,
+    iconConfiguration: IconSettings,
+    iconAccessControl: IconPassword,
+    iconExpand: IconChevronUp
+  },
+  data() {
+    return {
+      navigationItems: [
+        {
+          id: 'overview',
+          label: this.$t('appNavigation.overview'),
+          route: '/',
+          icon: 'iconOverview'
+        },
+        {
+          id: 'health',
+          label: this.$t('appNavigation.health'),
+          icon: 'iconHealth',
+          children: [
+            {
+              id: 'event-logs',
+              label: this.$t('appNavigation.eventLogs'),
+              route: '/health/event-logs'
+            },
+            {
+              id: 'hardware-status',
+              label: this.$t('appNavigation.hardwareStatus'),
+              route: '/health/hardware-status'
+            },
+            {
+              id: 'sensors',
+              label: this.$t('appNavigation.sensors'),
+              route: '/health/sensors'
+            }
+          ]
+        },
+        {
+          id: 'control',
+          label: this.$t('appNavigation.control'),
+          icon: 'iconControl',
+          children: [
+            {
+              id: 'manage-power-usage',
+              label: this.$t('appNavigation.managePowerUsage'),
+              route: '/control/manage-power-usage'
+            },
+            {
+              id: 'reboot-bmc',
+              label: this.$t('appNavigation.rebootBmc'),
+              route: '/control/reboot-bmc'
+            },
+            {
+              id: 'serial-over-lan',
+              label: this.$t('appNavigation.serialOverLan'),
+              route: '/control/serial-over-lan'
+            },
+            {
+              id: 'server-led',
+              label: this.$t('appNavigation.serverLed'),
+              route: '/control/server-led'
+            },
+            {
+              id: 'server-power-operations',
+              label: this.$t('appNavigation.serverPowerOperations'),
+              route: '/control/server-power-operations'
+            },
+            {
+              id: 'virtual-media',
+              label: this.$t('appNavigation.virtualMedia'),
+              route: '/control/virtual-media'
+            }
+          ]
+        },
+        {
+          id: 'configuration',
+          label: this.$t('appNavigation.configuration'),
+          icon: 'iconConfiguration',
+          children: [
+            {
+              id: 'date-time-settings',
+              label: this.$t('appNavigation.dateTimeSettings'),
+              route: '/configuration/date-time-settings'
+            },
+            {
+              id: 'firmware',
+              label: this.$t('appNavigation.firmware'),
+              route: '/configuration/firmware'
+            },
+            {
+              id: 'network-settings',
+              label: this.$t('appNavigation.networkSettings'),
+              route: '/configuration/network-settings'
+            },
+            {
+              id: 'snmp-settings',
+              label: this.$t('appNavigation.snmpSettings'),
+              route: ''
+            }
+          ]
+        },
+        {
+          id: 'access-control',
+          label: this.$t('appNavigation.configuration'),
+          icon: 'iconAccessControl',
+          children: [
+            {
+              id: 'ldap',
+              label: this.$t('appNavigation.ldap'),
+              route: '/access-control/ldap'
+            },
+            {
+              id: 'local-user-management',
+              label: this.$t('appNavigation.localUserManagement'),
+              route: '/access-control/local-user-management'
+            },
+            {
+              id: 'ssl-certificates',
+              label: this.$t('appNavigation.sslCertificates'),
+              route: '/access-control/ssl-certificates'
+            }
+          ]
+        }
+      ]
+    };
+  }
+};
+
+export default AppNavigationMixin;
diff --git a/src/env/env.md b/src/env/env.md
index 191cd04..8d53b02 100644
--- a/src/env/env.md
+++ b/src/env/env.md
@@ -5,6 +5,7 @@
 - [Setup](#setup)
 - [Store](#store)
 - [Router](#router)
+- [App Navigation](#app-navigation)
 - [Theming](#theming)
 - [Local development](#local-development)
 - [Production build](#production-build)
@@ -81,6 +82,18 @@
 export default router;
 ```
 
+## App navigation
+
+The Vue Router definition is closely tied to the app navigation but should be configured separately.
+The Vue Router is responsible for defining the application routes which is not always the same as what is visible in the app navigation.
+This configuration will make customizations to the rendered markup in src/components/AppNavigation/AppNavigation.vue.
+
+1. If making customizations to the app navigation, add `CUSTOM_APP_NAV=true` key value pair to the new .env file.
+2. Create a `<ENV_NAME>.js` file in `src/env/components/AppNavigation`
+    >The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The AppNavigationMixin import in `src/components/AppNavigation/AppNavigation.vue` will resolve to this new file.
+3. Your custom mixin should follow a very similar structure to the default AppNavigationMixin.js file. It should include a data property named `navigationItems` that should be an array of of navigation objects. Each navigation object should have an `id` and `label` property defined. Optionally it can include `icon`, `route`, or `children` properties.
+4. Add default export
+
 ## Theming
 
 >[Bootstrap theming](https://getbootstrap.com/docs/4.5/getting-started/theming/) allows for easy visual customizations.
diff --git a/vue.config.js b/vue.config.js
index 1e17def..53dc614 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -55,6 +55,8 @@
     const envName = process.env.VUE_APP_ENV_NAME;
     const hasCustomStore = process.env.CUSTOM_STORE === 'true' ? true : false;
     const hasCustomRouter = process.env.CUSTOM_ROUTER === 'true' ? true : false;
+    const hasCustomAppNav =
+      process.env.CUSTOM_APP_NAV === 'true' ? true : false;
 
     if (process.env.NODE_ENV === 'production') {
       config.plugins.push(
@@ -73,6 +75,12 @@
         // If env has custom router, resolve router module in src/main.js
         config.resolve.alias['./router$'] = `./env/router/${envName}.js`;
       }
+      if (hasCustomAppNav) {
+        // If env has custom AppNavigation, resolve AppNavigationMixin module in src/components/AppNavigation/AppNavigation.vue
+        config.resolve.alias[
+          './AppNavigationMixin$'
+        ] = `@/env/components/AppNavigation/${envName}.js`;
+      }
     }
   },
   chainWebpack: config => {