diff --git a/ui/App/components/Header.jsx b/ui/App/components/Header.jsx
index 670466f..a40ad61 100644
--- a/ui/App/components/Header.jsx
+++ b/ui/App/components/Header.jsx
@@ -43,7 +43,7 @@ class Header extends React.Component {
                 </ul>
         }
         return(
-            <nav className="main-header navbar navbar-expand bg-white navbar-light border-bottom">
+            <nav className="main-header navbar navbar-expand navbar-light border-bottom">
                 <ul className="navbar-nav">
                     <li className="nav-item">
                         <a className="nav-link" data-widget="pushmenu" href="#">
diff --git a/ui/index.scss b/ui/index.scss
index 39ed15e..167b676 100644
--- a/ui/index.scss
+++ b/ui/index.scss
@@ -5,6 +5,7 @@
  */
 @import "../node_modules/bootstrap/scss/bootstrap";
 @import "../node_modules/admin-lte/build/scss/AdminLTE-raw";
+@import "scss/customizations/adminLTE3-skin-blue";
 @import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
 @import "../node_modules/@fortawesome/fontawesome-free/scss/solid";
 @import "../node_modules/@fortawesome/fontawesome-free/scss/regular";
diff --git a/ui/scss/customizations/adminLTE3-skin-blue.scss b/ui/scss/customizations/adminLTE3-skin-blue.scss
new file mode 100644
index 0000000..78f8d2d
--- /dev/null
+++ b/ui/scss/customizations/adminLTE3-skin-blue.scss
@@ -0,0 +1,171 @@
+/*
+ * Skin: Blue
+ * ----------
+ */
+
+.skin-blue {
+    .main-header {
+        &.navbar {
+            background-color: #3c8dbc;
+
+            .navbar-nav {
+                > li > a {
+                    color: #ffffff;
+
+                    &:hover, &:active, &:focus {
+                        background: rgba(0, 0, 0, 0.1);
+                        color: #f6f6f6;
+                    }
+                }
+
+                .open > a {
+                    background: rgba(0, 0, 0, 0.1);
+                    color: #f6f6f6;
+                    &:hover, &:focus {
+                        background: rgba(0, 0, 0, 0.1);
+                        color: #f6f6f6;
+                    }
+                }
+
+                > .active > a {
+                    background: rgba(0, 0, 0, 0.1);
+                    color: #f6f6f6;
+                }
+            }
+
+            .sidebar-toggle {
+                color: #ffffff;
+
+                &:hover {
+                    color: #f6f6f6;
+                    background: #367fa9;
+                }
+            }
+        }
+
+        .logo {
+            background-color: #367fa9;
+            color: #ffffff;
+            border-bottom: 0 solid transparent;
+
+            &:hover {
+                background-color: #357ca5;
+            }
+        }
+
+        li.user-header {
+            background-color: #3c8dbc;
+        }
+    }
+
+    .content-header {
+        background: transparent;
+    }
+
+    .wrapper, .main-sidebar, .left-side {
+        background-color: #222d32;
+    }
+
+    .sidebar {
+        padding: 0;
+
+        .user-panel > .info {
+            color: #fff;
+
+            > a {
+                color: #fff;
+                font-size: 12px;
+
+                > i {
+                    margin-right: 5px;
+                }
+            }
+        }
+
+        .nav-sidebar {
+            .nav-header {
+                color: #4b646f;
+                background: #1a2226;
+            }
+
+            > .nav-item {
+                &:hover > .nav-link {
+                    color: #ffffff;
+                    background: #1e282c;
+                    border-left-color: #3c8dbc;
+                }
+
+                > .nav-link {
+                    border-radius: 0;
+                    border-left: 3px solid transparent;
+
+                    &.active {
+                        color: #ffffff;
+                        background: #1e282c;
+                        border-left-color: #3c8dbc;
+                    }
+                }
+            }
+        }
+    }
+
+    .sidebar-form {
+        border-radius: 3px;
+        border: 1px solid #374850;
+        margin: 10px 10px;
+
+        input[type="text"], .btn {
+            box-shadow: none;
+            background-color: #374850;
+            border: 1px solid transparent;
+            height: 35px;
+        }
+
+        input[type="text"] {
+            color: #666;
+            border-radius: 2px 0 0 2px;
+
+            &:focus {
+                background-color: #fff;
+                color: #666;
+
+                + .input-group-btn .btn {
+                    background-color: #fff;
+                    color: #666;
+                    border-left-color: #fff;
+                }
+            }
+        }
+
+        .btn {
+            color: #999;
+            border-radius: 0 2px 2px 0;
+        }
+    }
+
+    &.layout-top-nav .main-header > .logo {
+        background-color: #3c8dbc;
+        color: #ffffff;
+        border-bottom: 0 solid transparent;
+
+        &:hover {
+            background-color: #3b8ab8;
+        }
+    }
+}
+
+@media (max-width: 767px) {
+    .skin-blue .main-header .navbar .dropdown-menu li {
+        &.divider {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+
+        a {
+            color: #fff;
+
+            &:hover {
+                background: #367fa9;
+            }
+        }
+    }
+}
\ No newline at end of file