diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 5f05406..6a3989d 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -26,13 +26,13 @@
           />
         </b-button>
         <b-navbar-nav>
-          <b-nav-item to="/" data-test-id="appHeader-container-overview">
+          <b-navbar-brand to="/" data-test-id="appHeader-container-overview">
             <img
               class="header-logo"
               src="@/assets/images/logo-header.svg"
               :alt="altLogo"
             />
-          </b-nav-item>
+          </b-navbar-brand>
         </b-navbar-nav>
         <!-- Right aligned nav items -->
         <b-navbar-nav class="ml-auto helper-menu">
@@ -214,12 +214,21 @@
       transition-timing-function: $entrance-easing--expressive;
     }
   }
-  .navbar-dark {
-    .navbar-text,
-    .nav-link,
-    .btn-link {
-      color: theme-color('light') !important;
-      fill: currentColor;
+  .navbar-text,
+  .nav-link,
+  .btn-link {
+    color: color('white') !important;
+    fill: currentColor;
+    padding: 0.68rem 1rem !important;
+
+    &:hover {
+      background-color: theme-color-level(light, 10);
+    }
+    &:active {
+      background-color: theme-color-level(light, 9);
+    }
+    &:focus {
+      box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white');
     }
   }
 
@@ -234,14 +243,8 @@
       height: $header-height;
     }
 
-    .btn-link {
-      padding: $spacer / 2;
-    }
-
-    .header-logo {
-      width: auto;
-      height: $header-height;
-      padding: $spacer/2 0;
+    &:focus {
+      outline: 0;
     }
 
     .helper-menu {
@@ -266,6 +269,15 @@
 
   .navbar-nav {
     padding: 0 $spacer;
+    align-items: center;
+
+    .navbar-brand,
+    .nav-link {
+      transition: $focus-transition;
+    }
+    &:focus {
+      outline: 0;
+    }
   }
 
   .nav-trigger {
@@ -273,6 +285,9 @@
     width: $header-height;
     height: $header-height;
     transition: none;
+    display: inline-flex;
+    flex: 0 0 20px;
+    align-items: center;
 
     svg {
       margin: 0;
@@ -280,7 +295,7 @@
 
     &:hover {
       fill: theme-color('light');
-      background-color: theme-color('dark');
+      background-color: theme-color-level(light, 10);
     }
 
     &.open {
@@ -292,12 +307,11 @@
     }
   }
 
-  .dropdown {
-    .dropdown-menu {
-      margin-top: 0;
-      @include media-breakpoint-up(md) {
-        margin-top: 7px;
-      }
+  .dropdown-menu {
+    margin-top: 0;
+
+    @include media-breakpoint-only(md) {
+      margin-top: 4px;
     }
   }
 
@@ -307,4 +321,14 @@
     }
   }
 }
+
+.navbar-brand {
+  padding: $spacer/2;
+  height: $header-height;
+  line-height: 1;
+  &:focus {
+    box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white');
+    outline: 0;
+  }
+}
 </style>