diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 0ae18be..bdaca01 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -5,11 +5,7 @@
         {{ $t('appHeader.skipToContent') }}
       </a>
 
-      <b-navbar
-        variant="dark"
-        type="dark"
-        :aria-label="$t('appHeader.applicationHeader')"
-      >
+      <b-navbar type="dark" :aria-label="$t('appHeader.applicationHeader')">
         <!-- Left aligned nav items -->
         <b-button
           id="app-header-trigger"
@@ -210,6 +206,7 @@
 
   .navbar {
     padding: 0;
+    background-color: $navbar-color;
     @include media-breakpoint-up($responsive-layout-bp) {
       height: $header-height;
     }
diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue
index 8f7b785..7490baa 100644
--- a/src/components/Global/LoadingBar.vue
+++ b/src/components/Global/LoadingBar.vue
@@ -85,4 +85,7 @@
     opacity: 0;
   }
 }
+.progress-bar {
+  background-color: $loading-color;
+}
 </style>