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;