diff --git a/lib/settings.js b/lib/settings.js
index 4c35a80..79b282f 100644
--- a/lib/settings.js
+++ b/lib/settings.js
@@ -90,8 +90,8 @@ exports.display = {
   "richlist": true,
   "movement": true,
   "network": true,
-  "navbar_dark": false,
-  "navbar_light": false,
+  "page_header_bgcolor": "",
+  "page_footer_bgcolor": "",
   "networkpnl": 1,
   "difficultypnl": 2,
   "masternodespnl": 3,
diff --git a/settings.json.template b/settings.json.template
index 9dcc360..bba836e 100644
--- a/settings.json.template
+++ b/settings.json.template
@@ -111,8 +111,13 @@
     "search": true,
     "movement": true,
     "network": true,
-    "navbar_dark": false,
-    "navbar_light": false,
+
+    // page_header_bgcolor: change the background color of the page header
+    // page_footer_bgcolor: change the background color of the page footer
+    // valid options: light, dark, primary, secondary, success, info, warning, danger or leave blank ( "" ) for default colors
+    "page_header_bgcolor": "",
+    "page_footer_bgcolor": "",
+    
     "networkpnl": 1,
     "difficultypnl": 2,
     "masternodespnl": 3,
diff --git a/views/layout.pug b/views/layout.pug
index a41c918..6b38dfc 100644
--- a/views/layout.pug
+++ b/views/layout.pug
@@ -233,19 +233,18 @@ html(lang='en')
       - navbarClasses.push('fixed-top');
     if settings.sticky_footer == true
       - footerClasses.push('fixed-bottom');
-    if settings.display.navbar_dark == true
-      - navbarClasses.push('bg-dark');
-      - navbarClasses.push('navbar-dark');
-      - footerClasses.push('bg-dark');
-      - footerClasses.push('navbar-dark');
-    else if settings.display.navbar_light == true
-      - navbarClasses.push('bg-light');
-      - navbarClasses.push('navbar-light');
-      - footerClasses.push('bg-light');
-      - footerClasses.push('navbar-light');
+    if settings.display.page_header_bgcolor != null && settings.display.page_header_bgcolor != ''
+      - navbarClasses.push('bg-' + settings.display.page_header_bgcolor);
+      if settings.display.page_header_bgcolor.toString().toLowerCase() == 'dark' || settings.display.page_header_bgcolor.toString().toLowerCase() == 'light'
+        - navbarClasses.push('navbar-' + settings.display.page_header_bgcolor);
     else
       - navbarClasses.push('bg-primary');
       - navbarClasses.push('navbar-dark');
+    if settings.display.page_footer_bgcolor != null && settings.display.page_footer_bgcolor != ''
+      - footerClasses.push('bg-' + settings.display.page_footer_bgcolor);
+      if settings.display.page_footer_bgcolor.toString().toLowerCase() == 'dark' || settings.display.page_footer_bgcolor.toString().toLowerCase() == 'light'
+        - footerClasses.push('navbar-' + settings.display.page_footer_bgcolor);
+    else
       - footerClasses.push('bg-primary');
       - footerClasses.push('navbar-dark');
     div(class=navbarClasses, role='navigation', style=settings.homelink == 'logo' ? 'padding-left:0;' : '')