diff --git a/package.json b/package.json
index b211892de9..22d7485684 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "@angular/platform-server": "5.2.1",
     "@angular/router": "5.2.1",
     "@angularclass/bootloader": "1.0.1",
-    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.9",
+    "@ng-bootstrap/ng-bootstrap": "^1.0.0",
     "@ngrx/effects": "4.1.1",
     "@ngrx/router-store": "4.1.1",
     "@ngrx/store": "4.1.1",
@@ -88,7 +88,7 @@
     "@ngx-translate/http-loader": "2.0.1",
     "angular-idle-preload": "2.0.4",
     "body-parser": "1.18.2",
-    "bootstrap": "4.0.0-beta",
+    "bootstrap": "^4.0.0",
     "cerialize": "0.1.18",
     "compression": "1.7.1",
     "cookie-parser": "1.4.3",
@@ -162,7 +162,7 @@
     "karma-webdriver-launcher": "1.0.5",
     "karma-webpack": "2.0.9",
     "ngrx-store-freeze": "0.2.0",
-    "node-sass": "4.7.2",
+    "node-sass": "^4.7.2",
     "nodemon": "1.14.11",
     "npm-run-all": "4.1.2",
     "postcss": "6.0.16",
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 0cdb443b8a..953d1ba922 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,5 +1,5 @@
 <header>
-  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
+  <nav class="navbar navbar-dark bg-primary navbar-expand-md">
     <div [ngClass]="{'clearfix': !(isNavBarCollapsed | async)}">
       <a class="navbar-brand" routerLink="/home">{{ 'title' | translate }}</a>
     </div>
diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss
index f3d13120cc..a57d2deddf 100644
--- a/src/styles/_bootstrap_variables.scss
+++ b/src/styles/_bootstrap_variables.scss
@@ -29,3 +29,8 @@ $theme-colors: (
 /* Fonts */
 $link-color: map-get($theme-colors, info) !default;
 
+$navbar-dark-color:                rgba(white, .5) !default;
+$navbar-light-color:                rgba(black, .5) !default;
+$navbar-dark-toggler-icon-bg: url("data%3Aimage%2Fsvg+xml%3Bcharset%3Dutf8%2C%3Csvg+viewBox%3D%270+0+30+30%27+xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath+stroke%3D%27#{$navbar-dark-color}%27+stroke-width%3D%272%27+stroke-linecap%3D%27round%27+stroke-miterlimit%3D%2710%27+d%3D%27M4+7h22M4+15h22M4+23h22%27%2F%3E%3C%2Fsvg%3E");
+$navbar-light-toggler-icon-bg: url("data%3Aimage%2Fsvg+xml%3Bcharset%3Dutf8%2C%3Csvg+viewBox%3D%270+0+30+30%27+xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath+stroke%3D%27#{$navbar-light-color}%27+stroke-width%3D%272%27+stroke-linecap%3D%27round%27+stroke-miterlimit%3D%2710%27+d%3D%27M4+7h22M4+15h22M4+23h22%27%2F%3E%3C%2Fsvg%3E");
+
diff --git a/yarn.lock b/yarn.lock
index 39ba0f596f..c256338af1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -77,9 +77,9 @@
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@angularclass/bootloader/-/bootloader-1.0.1.tgz#75de7cf3901b445900a419c2aeca44181d465060"
 
-"@ng-bootstrap/ng-bootstrap@1.0.0-beta.9":
-  version "1.0.0-beta.9"
-  resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-1.0.0-beta.9.tgz#08d4119a3d72689b2bef8f1d30aaf6c8aabffd72"
+"@ng-bootstrap/ng-bootstrap@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-1.0.0.tgz#8f2ae70db2fe1dcbf5e0acb49dc2b1bbba2be8d2"
 
 "@ngrx/effects@4.1.1":
   version "4.1.1"
@@ -987,9 +987,9 @@ boom@5.x.x:
   dependencies:
     hoek "4.x.x"
 
-bootstrap@4.0.0-beta:
-  version "4.0.0-beta"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0-beta.tgz#dc5928175d2e71310bc668cf9e05a907211b72a6"
+bootstrap@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0.tgz#ceb03842c145fcc1b9b4e15da2a05656ba68469a"
 
 boxen@^1.2.1:
   version "1.3.0"
@@ -5554,7 +5554,7 @@ node-pre-gyp@^0.6.36:
     tar "^2.2.1"
     tar-pack "^3.4.0"
 
-node-sass@4.7.2:
+node-sass@^4.7.2:
   version "4.7.2"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.7.2.tgz#9366778ba1469eb01438a9e8592f4262bcb6794e"
   dependencies: