diff --git a/src/assets/styles/_colors.scss b/src/assets/styles/_colors.scss
index 4a8b62c..e27984b 100644
--- a/src/assets/styles/_colors.scss
+++ b/src/assets/styles/_colors.scss
@@ -1,14 +1,16 @@
 // Custom Color system
-$white: #fff;
-$gray-100: #fafbfc; // gray-10
-$gray-200: #f0f2f5; // gray-20
-$gray-300: #dcdee0; // gray-30
-$gray-400: #cccccc; // gray-40
-$gray-600: #999999; // gray-60
-$gray-700: #495057; // gray-70
-$gray-800: #666666; // gray-80
-$gray-900: #333333; // gray-100
 $black: #000;
+$white: #fff;
+
+$gray-100: #fafafa;
+$gray-200: #f4f4f4;
+$gray-300: #dcdee0;
+$gray-400: #cccccc;
+$gray-500: #B3B3B3;
+$gray-600: #999999;
+$gray-700: #666666;
+$gray-800: #333333;
+$gray-900: #161616;
 
 $blue-10: #eff2fb;
 $blue-20: #ccd7f4;
@@ -86,12 +88,14 @@
 
 $primary: $blue;
 $secondary: $gray-600;
+$secondary-dark: $gray-800;
+$secondary-light: $gray-200;
 $success: $green;
 $info: $teal;
 $warning: $yellow;
 $danger: $red;
 $light: $gray-100;
-$dark: $black;
+$dark: $gray-900;
 
 // Bootstrap will generate CSS variables for
 // all of the colors in this map.
@@ -101,9 +105,11 @@
   "primary-dark": $blue-100,
   "primary-light": $blue-10,
   "secondary": $secondary,
-  "secondary-dark": $gray-800,
-  "secondary-light": $gray-200,
+  "secondary-dark": $secondary-dark,
+  "secondary-light": $secondary-light,
   "danger": $danger,
   "warning": $warning,
-  "info": $info
+  "info": $info,
+  "dark": $dark,
+  "light": $light
 );
diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss
index 7328bb0..0924070 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.scss
@@ -1,27 +1,10 @@
-$enable-rounded: false;
-$enable-validation-icons: false;
-$responsive-layout-bp: lg;
-$header-height: 56px;
-$navigation-width: 300px;
-
-// Required
+@import "./variables";
 @import "~bootstrap/scss/functions";
 @import "./functions";
-@import "./colors";
-@import "./motion";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
+@import "./motion";
 
-// Removing colors we do not have maps for or need for
-// the OpenBMC theme. There are some that are required by
-// Bootstrap keys that cannot be removed from theme colors
-// are primary, success, and danger.
-// https://getbootstrap.com/docs/4.0/getting-started/theming/#required-keys
-$grays: map-remove($grays, "500");
-$colors: map-remove($colors, "indigo", "purple", "pink", "orange", "cyan");
-$colors: map-remove($theme-colors, "light", "dark");
-
-// Optional
 @import "~bootstrap/scss/root";
 @import "~bootstrap/scss/reboot";
 @import "~bootstrap/scss/alert";
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
new file mode 100644
index 0000000..f59cfc1
--- /dev/null
+++ b/src/assets/styles/_variables.scss
@@ -0,0 +1,12 @@
+@import "./colors";
+
+// Override Bootstrap Variables - node_modules/Bootstrap/scss/_variables.scss
+$enable-rounded: false;
+$enable-validation-icons: false;
+
+// OpenBMC Custom Variables
+$responsive-layout-bp: lg;
+$header-height: 56px;
+$navigation-width: 300px;
+$container-bgd: $gray-200;
+$primary-nav-hover: $gray-300;
\ No newline at end of file
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index cc024c8..62ffe98 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -142,7 +142,9 @@
 
 <style scoped lang="scss">
 svg {
-  fill: $gray-900;
+  fill: currentColor;
+  height: 1.2rem;
+  width: 1.2rem;
   margin-left: 0 !important; //!important overriding button specificity
   vertical-align: text-bottom;
   &:not(.icon-expand) {
@@ -192,20 +194,26 @@
   font-weight: $headings-font-weight;
   padding-left: $spacer; // defining consistent padding for links and buttons
   padding-right: $spacer;
-  color: $gray-900 !important; //using important to avoid styling states
+  color: $secondary-dark;
 
   &:hover {
-    background-color: $gray-300;
+    background-color: $primary-nav-hover;
+    color: $secondary-dark;
   }
 
   &:focus {
     box-shadow: $btn-focus-box-shadow;
+    color: $secondary-dark;
   }
 }
 
-.nav-link--current {
+.nav-link--current,
+.nav-link--current:hover,
+.nav-link--current:focus {
   font-weight: $headings-font-weight;
-  background-color: $gray-300;
+  background-color: $secondary-dark;
+  color: $secondary-light;
+  cursor: default;
 
   &::before {
     content: '';
@@ -226,7 +234,7 @@
   left: 0;
   z-index: $zindex-fixed;
   overflow-y: auto;
-  background-color: $gray-200;
+  background-color: $container-bgd;
   transform: translateX(-$navigation-width);
   transition: transform $exit-easing--productive $duration--moderate-02;