diff --git a/public/css/build/all.css b/public/css/build/all.css
index f7dd369632..b092ac1be0 100644
Binary files a/public/css/build/all.css and b/public/css/build/all.css differ
diff --git a/public/css/dist/all.css b/public/css/dist/all.css
index f7dd369632..b092ac1be0 100644
Binary files a/public/css/dist/all.css and b/public/css/dist/all.css differ
diff --git a/public/css/overrides.css b/public/css/overrides.css
index 0ed23e792e..a8bf80d10a 100644
Binary files a/public/css/overrides.css and b/public/css/overrides.css differ
diff --git a/public/css/skins/skin-black-dark.css b/public/css/skins/skin-black-dark.css
new file mode 100644
index 0000000000..271118e1a7
Binary files /dev/null and b/public/css/skins/skin-black-dark.css differ
diff --git a/public/css/skins/skin-blue-dark.css b/public/css/skins/skin-blue-dark.css
new file mode 100644
index 0000000000..2a364256ca
Binary files /dev/null and b/public/css/skins/skin-blue-dark.css differ
diff --git a/public/css/skins/skin-green-dark.css b/public/css/skins/skin-green-dark.css
new file mode 100644
index 0000000000..7653c73f23
Binary files /dev/null and b/public/css/skins/skin-green-dark.css differ
diff --git a/public/css/skins/skin-orange-dark.css b/public/css/skins/skin-orange-dark.css
new file mode 100644
index 0000000000..afc4349fea
Binary files /dev/null and b/public/css/skins/skin-orange-dark.css differ
diff --git a/public/css/skins/skin-purple-dark.css b/public/css/skins/skin-purple-dark.css
new file mode 100644
index 0000000000..0967d500ea
Binary files /dev/null and b/public/css/skins/skin-purple-dark.css differ
diff --git a/public/css/skins/skin-red-dark.css b/public/css/skins/skin-red-dark.css
new file mode 100644
index 0000000000..50aa65f22c
Binary files /dev/null and b/public/css/skins/skin-red-dark.css differ
diff --git a/public/css/skins/skin-yellow-dark.css b/public/css/skins/skin-yellow-dark.css
new file mode 100644
index 0000000000..9c1b5021e0
Binary files /dev/null and b/public/css/skins/skin-yellow-dark.css differ
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index c4232a0758..d20bda1b38 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,23 +1,23 @@
 {
     "/css/AdminLTE.css": "/css/AdminLTE.css?id=c9e775e094748486ca7f",
     "/css/app.css": "/css/app.css?id=c3b4e5ea2063d7f76241",
-    "/css/overrides.css": "/css/overrides.css?id=3dbd553dfa981e846eb1",
+    "/css/overrides.css": "/css/overrides.css?id=46cd11d0d594605d6cb3",
     "/css/skins/skin-blue.css": "/css/skins/skin-blue.css?id=f6abab482516a91a89e7",
     "/css/skins/skin-red.css": "/css/skins/skin-red.css?id=0867fa7d84bc0a7f7494",
     "/css/skins/skin-contrast.css": "/css/skins/skin-contrast.css?id=198241cc1caeea5fd84c",
     "/css/skins/skin-green.css": "/css/skins/skin-green.css?id=b6cf886414d55a2c4593",
-    "/css/skins/skin-green-light.css": "/css/skins/skin-green-light.css?id=4538c530d3deb40030f8",
+    "/css/skins/skin-green-dark.css": "/css/skins/skin-green-dark.css?id=7422ce0a47eab9235ccc",
     "/css/skins/skin-black.css": "/css/skins/skin-black.css?id=35602987835e5d50d162",
-    "/css/skins/skin-black-light.css": "/css/skins/skin-black-light.css?id=14301c0094c92bd4f3d3",
-    "/css/skins/skin-red-light.css": "/css/skins/skin-red-light.css?id=8861c2779109f53aa9d5",
+    "/css/skins/skin-black-dark.css": "/css/skins/skin-black-dark.css?id=51db9e64f221d94b1f59",
+    "/css/skins/skin-red-dark.css": "/css/skins/skin-red-dark.css?id=6b57ccc21211b9c5bee0",
     "/css/skins/skin-purple.css": "/css/skins/skin-purple.css?id=a4944e6f318c5d73101b",
-    "/css/skins/skin-purple-light.css": "/css/skins/skin-purple-light.css?id=71a5adafc28dc36336c8",
+    "/css/skins/skin-purple-dark.css": "/css/skins/skin-purple-dark.css?id=177d233eef8861582402",
     "/css/skins/skin-yellow.css": "/css/skins/skin-yellow.css?id=29f2ee479da32c47179a",
-    "/css/skins/skin-yellow-light.css": "/css/skins/skin-yellow-light.css?id=88d378573f5198c68ce8",
-    "/css/skins/skin-blue-light.css": "/css/skins/skin-blue-light.css?id=3cf6131691282e45ef5f",
-    "/css/skins/skin-orange-light.css": "/css/skins/skin-orange-light.css?id=73b0166bcb5453eda6c2",
+    "/css/skins/skin-yellow-dark.css": "/css/skins/skin-yellow-dark.css?id=6344ab37404783bc2571",
+    "/css/skins/skin-blue-dark.css": "/css/skins/skin-blue-dark.css?id=64b2bc1211160858d597",
+    "/css/skins/skin-orange-dark.css": "/css/skins/skin-orange-dark.css?id=e4536d051e0e8c5e297c",
     "/css/skins/skin-orange.css": "/css/skins/skin-orange.css?id=74a1642e18e6fb7643b6",
-    "/css/dist/all.css": "/css/dist/all.css?id=0546cfd78457abc87935",
-    "/css/build/all.css": "/css/build/all.css?id=0546cfd78457abc87935",
+    "/css/dist/all.css": "/css/dist/all.css?id=d273313a815e0853368e",
+    "/css/build/all.css": "/css/build/all.css?id=d273313a815e0853368e",
     "/js/build/all.js": "/js/build/all.js?id=1b74d50ebd61899b4345"
 }
\ No newline at end of file
diff --git a/resources/assets/less/overrides.less b/resources/assets/less/overrides.less
index 7deb621cb7..13ec8bff20 100644
--- a/resources/assets/less/overrides.less
+++ b/resources/assets/less/overrides.less
@@ -1,4 +1,20 @@
-.skin-blue .main-header .logo {
+.skin-red
+.skin-purple
+.skin-blue
+.skin-black
+.skin-orange
+.skin-yellow
+.skin-green
+.skin-red-dark
+.skin-purple-dark
+.skin-blue-dark
+.skin-black-dark
+.skin-orange-dark
+.skin-yellow-dark
+.skin-green-dark
+.skin-contrast
+.main-header
+.logo {
   background-color: inherit;
 }
 .main-header .logo {
@@ -102,7 +118,24 @@ a.accordion-header {
   padding-top: 10px;
 }
 
-.skin-blue .main-header .navbar .dropdown-menu li a {
+.skin-red
+.skin-purple
+.skin-blue
+.skin-black
+.skin-orange
+.skin-yellow
+.skin-green
+.skin-red-dark
+.skin-purple-dark
+.skin-blue-dark
+.skin-black-dark
+.skin-orange-dark
+.skin-yellow-dark
+.skin-green-dark
+.skin-contrast
+.main-header
+.navbar
+.dropdown-menu li a {
   //color: inherit;
 }
 
@@ -262,7 +295,7 @@ a.accordion-header {
  .bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }
  /*END Form Wizard*/
 
-.left-navblock{
+.left-navblock {
   display: inline-block;
   float: left;
   text-align: left;
@@ -271,7 +304,24 @@ a.accordion-header {
   /* adjust based on your layout */
 
 }
-.skin-blue .main-header .navbar .dropdown-menu li a {
+.skin-red
+.skin-purple
+.skin-blue
+.skin-black
+.skin-orange
+.skin-yellow
+.skin-green
+.skin-red-dark
+.skin-purple-dark
+.skin-blue-dark
+.skin-black-dark
+.skin-orange-dark
+.skin-yellow-dark
+.skin-green-dark
+.skin-contrast
+.main-header
+.navbar
+.dropdown-menu li a {
   color: #333;
 }
 
diff --git a/resources/assets/less/skins/skin-black-dark.less b/resources/assets/less/skins/skin-black-dark.less
new file mode 100644
index 0000000000..64cb0177fc
--- /dev/null
+++ b/resources/assets/less/skins/skin-black-dark.less
@@ -0,0 +1,307 @@
+/*
+ * Skin: black
+ * ----------
+ */
+@import "../bootstrap-less/mixins.less";
+@import "../bootstrap-less/variables.less";
+@import "../variables.less";
+@import "../mixins.less";
+
+.skin-black-dark {
+  //Navbar
+  .main-header {
+    .navbar {
+      .navbar-variant(@black; #fff);
+      .sidebar-toggle {
+        color: #fff;
+        &:hover {
+          background-color: darken(@black, 5%);
+        }
+      }
+      @media (max-width: @screen-header-collapse) {
+        .dropdown-menu {
+          li {
+            &.divider {
+              background-color: rgba(255, 255, 255, 0.1);
+            }
+            a {
+              color: #fff;
+              &:hover {
+                background: darken(@black, 5%);
+              }
+            }
+          }
+        }
+      }
+    }
+    //Logo
+
+    li.user-header {
+      background-color: @black;
+    }
+  }
+
+  //Content Header
+  .content-header {
+    background: transparent;
+  }
+
+  //Create the sidebar skin
+  .skin-dark-sidebar(@black);
+}
+
+.skin-black-dark.layout-top-nav .main-header > .logo {
+  .logo-variant {
+    background-color: none;
+  }
+}
+
+
+
+.btn, .btn:hover {
+
+
+  &.btn-primary, .btn-primary:link {
+    background-color: darken(@black, 10%);
+    border-color: darken(@black, 20%);
+    color: #fff;
+  }
+
+
+  &a.btn-primary:hover {
+    background-color: darken(@black, 20%);
+    border-color: darken(@black, 20%);
+    color: #fff;
+  }
+
+  &.btn-white:link {
+    background-color: darken(@black, 10%);
+    color: #fff;
+  }
+
+  &.btn-white:hover {
+    background-color: darken(@black, 30%);
+    color: #fff;
+  }
+}
+
+
+a {
+  color: @black;
+  &:hover {
+    color: darken(@black, 20%);
+  }
+  &:visited {
+    color: @black;
+  }
+}
+
+.text-primary {
+  color: darken(@black, 20%);
+}
+
+
+
+
+:root {
+  --background: #222;
+  --back-main: #333;
+  --back-sub: #444;
+  --header: @black; /* Use same as Header picker */
+  --text-main: #FFF;
+  --text-sub: #BBB;
+  --link: lighten(@black, 10%); /* Use same as Header picker */
+  --nav-link: #FFF; /* Use same as Header picker */
+  --light-link: lighten(@black, 30%); /* Use same as Header picker */
+}
+
+.main-header .navbar, .main-header .logo {
+  background-color: var(--header);
+  background: -webkit-linear-gradient(top,  var(--header) 0%,var(--header) 100%);
+  background: linear-gradient(to bottom, var(--header) 0%,var(--header) 100%);
+  border-color: var(--header);
+}
+
+.navbar-nav>li>a:link {
+  color: var(--nav-link);
+}
+
+.modal-content {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+
+a, a:link, a:visited, .btn-primary.hover {
+  color: var(--header);
+}
+#accessoriesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#assetsListingTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#assetsListingTable>tbody>tr.selected>td {
+  background-color: var(--back-main);
+}
+body {
+  color: var(--text-main);
+}
+.box, .box.box-default {
+  border-top: 3px solid var(--header);
+  border-top-color: var(--header);
+}
+.box-body, .box-footer, .box-header {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.btn-default{
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.btn-default:active, .btn-default:focus, .btn-default:hover, .btn-default.active {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.btn-primary, .btn-primary.hover, .btn-primary:active, .text-blue {
+  color: var(--text-main)!important;
+}
+.btn-primary:hover {
+  background-color: var(--back-main);
+  color: var(--header)!important;
+}
+#componentsTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#consumablesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+.content-wrapper {
+  background-color: var(--background);
+}
+#create-form>div>div>div>span>i.fa {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover, .datepicker table tr td.day.focused, .datepicker table tr td.day:hover {
+  background-color: var(--header);
+}
+.datepicker.dropdown-menu {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+#details>div>div>div>table {
+  background-color: transparent;
+}
+.dropdown-menu, .dropdown-menu>li>a {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.dropdown-menu>li>a:hover {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.form-control {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+h1, h2, h3, h4, h5, h6, p {
+  color: var(--text-main);
+}
+.help-block {
+  color: var(--text-sub);
+}
+input[type=text], input[type=search] {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.input-group, .input-group-addon {
+  background-color: var(--back-sub)!important;
+  color: var(--text-main);
+}
+#licensesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+.main-footer {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.nav-tabs-custom>.nav-tabs>li>a, .nav-tabs-custom>.nav-tabs>li.active>a {
+  color: var(--text-main);
+}
+.nav-tabs-custom>.nav-tabs>li.active {
+  border-top-color: var(--header);
+}
+.nav-tabs-custom>.nav-tabs>li.active>a {
+  background-color: var(--back-main);
+}
+.nav-tabs-custom>.nav-tabs>li.active>a:hover {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.nav-tabs-custom, .nav-tabs-custom>.tab-content {
+  background-color: var(--back-main);
+}
+.navbar-nav>.tasks-menu>.dropdown-menu>li.header {
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.open>.dropdown-toggle.btn-default {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.panel {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.panel-default>.panel-heading {
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+  background-color: var(--header);
+  color: var(--back-main);
+}
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+  color: var(--text-main);
+}
+.select2-selection--single {
+  background-color: var(--back-sub)!important;
+  color: var(--text-main)!important;
+}
+.select2-dropdown {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.skin-blue-dark .main-header .navbar .dropdown-menu li a {
+  color: var(--header);
+}
+.skin-blue-dark .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li:hover>a, .sidebar-toggle:hover {
+  background-color: var(--header)!important;
+}
+.tab-content, .tab-pane {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.table-striped>tbody>tr:nth-of-type(odd) {
+  background-color: var(--back-sub);
+}
+#webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa {
+  color: var(--text-main);
+}
+
+a {
+  color: var(--link);
+  &:link {
+    color: var(--link);
+  }
+  &:hover {
+    color: var(--light-link);
+  }
+  &:visited {
+    color: var(--link);
+  }
+}
\ No newline at end of file
diff --git a/resources/assets/less/skins/skin-blue-dark.less b/resources/assets/less/skins/skin-blue-dark.less
new file mode 100644
index 0000000000..cccf9976cc
--- /dev/null
+++ b/resources/assets/less/skins/skin-blue-dark.less
@@ -0,0 +1,307 @@
+/*
+ * Skin: Purple
+ * ----------
+ */
+@import "../bootstrap-less/mixins.less";
+@import "../bootstrap-less/variables.less";
+@import "../variables.less";
+@import "../mixins.less";
+
+.skin-blue-dark {
+  //Navbar
+  .main-header {
+    .navbar {
+      .navbar-variant(@purple; #fff);
+      .sidebar-toggle {
+        color: #fff;
+        &:hover {
+          background-color: darken(@purple, 5%);
+        }
+      }
+      @media (max-width: @screen-header-collapse) {
+        .dropdown-menu {
+          li {
+            &.divider {
+              background-color: rgba(255, 255, 255, 0.1);
+            }
+            a {
+              color: #fff;
+              &:hover {
+                background: darken(@purple, 5%);
+              }
+            }
+          }
+        }
+      }
+    }
+    //Logo
+
+    li.user-header {
+      background-color: @purple;
+    }
+  }
+
+  //Content Header
+  .content-header {
+    background: transparent;
+  }
+
+  //Create the sidebar skin
+  .skin-dark-sidebar(@purple);
+}
+
+.skin-blue-dark.layout-top-nav .main-header > .logo {
+  .logo-variant {
+    background-color: none;
+  }
+}
+
+
+
+.btn, .btn:hover {
+
+
+  &.btn-primary, .btn-primary:link {
+    background-color: darken(@purple, 10%);
+    border-color: darken(@purple, 20%);
+    color: #fff;
+  }
+
+
+  &a.btn-primary:hover {
+    background-color: darken(@purple, 20%);
+    border-color: darken(@purple, 20%);
+    color: #fff;
+  }
+
+  &.btn-white:link {
+    background-color: darken(@purple, 10%);
+    color: #fff;
+  }
+
+  &.btn-white:hover {
+    background-color: darken(@purple, 30%);
+    color: #fff;
+  }
+}
+
+
+a {
+  color: @purple;
+  &:hover {
+    color: darken(@purple, 20%);
+  }
+  &:visited {
+    color: @purple;
+  }
+}
+
+.text-primary {
+  color: darken(@purple, 20%);
+}
+
+
+
+
+:root {
+  --background: #222;
+  --back-main: #333;
+  --back-sub: #444;
+  --header: @purple; /* Use same as Header picker */
+  --text-main: #FFF;
+  --text-sub: #BBB;
+  --link: lighten(@purple, 10%); /* Use same as Header picker */
+  --nav-link: #FFF; /* Use same as Header picker */
+  --light-link: lighten(@purple, 30%); /* Use same as Header picker */
+}
+
+.main-header .navbar, .main-header .logo {
+  background-color: var(--header);
+  background: -webkit-linear-gradient(top,  var(--header) 0%,var(--header) 100%);
+  background: linear-gradient(to bottom, var(--header) 0%,var(--header) 100%);
+  border-color: var(--header);
+}
+
+.navbar-nav>li>a:link {
+  color: var(--nav-link);
+}
+
+.modal-content {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+
+a, a:link, a:visited, .btn-primary.hover {
+  color: var(--header);
+}
+#accessoriesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#assetsListingTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#assetsListingTable>tbody>tr.selected>td {
+  background-color: var(--back-main);
+}
+body {
+  color: var(--text-main);
+}
+.box, .box.box-default {
+  border-top: 3px solid var(--header);
+  border-top-color: var(--header);
+}
+.box-body, .box-footer, .box-header {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.btn-default{
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.btn-default:active, .btn-default:focus, .btn-default:hover, .btn-default.active {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.btn-primary, .btn-primary.hover, .btn-primary:active, .text-blue {
+  color: var(--text-main)!important;
+}
+.btn-primary:hover {
+  background-color: var(--back-main);
+  color: var(--header)!important;
+}
+#componentsTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#consumablesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+.content-wrapper {
+  background-color: var(--background);
+}
+#create-form>div>div>div>span>i.fa {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover, .datepicker table tr td.day.focused, .datepicker table tr td.day:hover {
+  background-color: var(--header);
+}
+.datepicker.dropdown-menu {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+#details>div>div>div>table {
+  background-color: transparent;
+}
+.dropdown-menu, .dropdown-menu>li>a {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.dropdown-menu>li>a:hover {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.form-control {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+h1, h2, h3, h4, h5, h6, p {
+  color: var(--text-main);
+}
+.help-block {
+  color: var(--text-sub);
+}
+input[type=text], input[type=search] {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.input-group, .input-group-addon {
+  background-color: var(--back-sub)!important;
+  color: var(--text-main);
+}
+#licensesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+.main-footer {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.nav-tabs-custom>.nav-tabs>li>a, .nav-tabs-custom>.nav-tabs>li.active>a {
+  color: var(--text-main);
+}
+.nav-tabs-custom>.nav-tabs>li.active {
+  border-top-color: var(--header);
+}
+.nav-tabs-custom>.nav-tabs>li.active>a {
+  background-color: var(--back-main);
+}
+.nav-tabs-custom>.nav-tabs>li.active>a:hover {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.nav-tabs-custom, .nav-tabs-custom>.tab-content {
+  background-color: var(--back-main);
+}
+.navbar-nav>.tasks-menu>.dropdown-menu>li.header {
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.open>.dropdown-toggle.btn-default {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.panel {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.panel-default>.panel-heading {
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+  background-color: var(--header);
+  color: var(--back-main);
+}
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+  color: var(--text-main);
+}
+.select2-selection--single {
+  background-color: var(--back-sub)!important;
+  color: var(--text-main)!important;
+}
+.select2-dropdown {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.skin-blue-dark .main-header .navbar .dropdown-menu li a {
+  color: var(--header);
+}
+.skin-blue-dark .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li:hover>a, .sidebar-toggle:hover {
+  background-color: var(--header)!important;
+}
+.tab-content, .tab-pane {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.table-striped>tbody>tr:nth-of-type(odd) {
+  background-color: var(--back-sub);
+}
+#webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa {
+  color: var(--text-main);
+}
+
+a {
+  color: var(--link);
+  &:link {
+    color: var(--link);
+  }
+  &:hover {
+    color: var(--light-link);
+  }
+  &:visited {
+    color: var(--link);
+  }
+}
\ No newline at end of file
diff --git a/resources/assets/less/skins/skin-green-dark.less b/resources/assets/less/skins/skin-green-dark.less
new file mode 100644
index 0000000000..036bfeff78
--- /dev/null
+++ b/resources/assets/less/skins/skin-green-dark.less
@@ -0,0 +1,307 @@
+/*
+ * Skin: green
+ * ----------
+ */
+@import "../bootstrap-less/mixins.less";
+@import "../bootstrap-less/variables.less";
+@import "../variables.less";
+@import "../mixins.less";
+
+.skin-green-dark {
+  //Navbar
+  .main-header {
+    .navbar {
+      .navbar-variant(@green; #fff);
+      .sidebar-toggle {
+        color: #fff;
+        &:hover {
+          background-color: darken(@green, 5%);
+        }
+      }
+      @media (max-width: @screen-header-collapse) {
+        .dropdown-menu {
+          li {
+            &.divider {
+              background-color: rgba(255, 255, 255, 0.1);
+            }
+            a {
+              color: #fff;
+              &:hover {
+                background: darken(@green, 5%);
+              }
+            }
+          }
+        }
+      }
+    }
+    //Logo
+
+    li.user-header {
+      background-color: @green;
+    }
+  }
+
+  //Content Header
+  .content-header {
+    background: transparent;
+  }
+
+  //Create the sidebar skin
+  .skin-dark-sidebar(@green);
+}
+
+.skin-green-dark.layout-top-nav .main-header > .logo {
+  .logo-variant {
+    background-color: none;
+  }
+}
+
+
+
+.btn, .btn:hover {
+
+
+  &.btn-primary, .btn-primary:link {
+    background-color: darken(@green, 10%);
+    border-color: darken(@green, 20%);
+    color: #fff;
+  }
+
+
+  &a.btn-primary:hover {
+    background-color: darken(@green, 20%);
+    border-color: darken(@green, 20%);
+    color: #fff;
+  }
+
+  &.btn-white:link {
+    background-color: darken(@green, 10%);
+    color: #fff;
+  }
+
+  &.btn-white:hover {
+    background-color: darken(@green, 30%);
+    color: #fff;
+  }
+}
+
+
+a {
+  color: @green;
+  &:hover {
+    color: darken(@green, 20%);
+  }
+  &:visited {
+    color: @green;
+  }
+}
+
+.text-primary {
+  color: darken(@green, 20%);
+}
+
+
+
+
+:root {
+  --background: #222;
+  --back-main: #333;
+  --back-sub: #444;
+  --header: @green; /* Use same as Header picker */
+  --text-main: #FFF;
+  --text-sub: #BBB;
+  --link: lighten(@green, 10%); /* Use same as Header picker */
+  --nav-link: #FFF; /* Use same as Header picker */
+  --light-link: lighten(@green, 30%); /* Use same as Header picker */
+}
+
+.main-header .navbar, .main-header .logo {
+  background-color: var(--header);
+  background: -webkit-linear-gradient(top,  var(--header) 0%,var(--header) 100%);
+  background: linear-gradient(to bottom, var(--header) 0%,var(--header) 100%);
+  border-color: var(--header);
+}
+
+.navbar-nav>li>a:link {
+  color: var(--nav-link);
+}
+
+.modal-content {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+
+a, a:link, a:visited, .btn-primary.hover {
+  color: var(--header);
+}
+#accessoriesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#assetsListingTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#assetsListingTable>tbody>tr.selected>td {
+  background-color: var(--back-main);
+}
+body {
+  color: var(--text-main);
+}
+.box, .box.box-default {
+  border-top: 3px solid var(--header);
+  border-top-color: var(--header);
+}
+.box-body, .box-footer, .box-header {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.btn-default{
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.btn-default:active, .btn-default:focus, .btn-default:hover, .btn-default.active {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.btn-primary, .btn-primary.hover, .btn-primary:active, .text-blue {
+  color: var(--text-main)!important;
+}
+.btn-primary:hover {
+  background-color: var(--back-main);
+  color: var(--header)!important;
+}
+#componentsTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#consumablesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+.content-wrapper {
+  background-color: var(--background);
+}
+#create-form>div>div>div>span>i.fa {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover, .datepicker table tr td.day.focused, .datepicker table tr td.day:hover {
+  background-color: var(--header);
+}
+.datepicker.dropdown-menu {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+#details>div>div>div>table {
+  background-color: transparent;
+}
+.dropdown-menu, .dropdown-menu>li>a {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.dropdown-menu>li>a:hover {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.form-control {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+h1, h2, h3, h4, h5, h6, p {
+  color: var(--text-main);
+}
+.help-block {
+  color: var(--text-sub);
+}
+input[type=text], input[type=search] {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.input-group, .input-group-addon {
+  background-color: var(--back-sub)!important;
+  color: var(--text-main);
+}
+#licensesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+.main-footer {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.nav-tabs-custom>.nav-tabs>li>a, .nav-tabs-custom>.nav-tabs>li.active>a {
+  color: var(--text-main);
+}
+.nav-tabs-custom>.nav-tabs>li.active {
+  border-top-color: var(--header);
+}
+.nav-tabs-custom>.nav-tabs>li.active>a {
+  background-color: var(--back-main);
+}
+.nav-tabs-custom>.nav-tabs>li.active>a:hover {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.nav-tabs-custom, .nav-tabs-custom>.tab-content {
+  background-color: var(--back-main);
+}
+.navbar-nav>.tasks-menu>.dropdown-menu>li.header {
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.open>.dropdown-toggle.btn-default {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.panel {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.panel-default>.panel-heading {
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+  background-color: var(--header);
+  color: var(--back-main);
+}
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+  color: var(--text-main);
+}
+.select2-selection--single {
+  background-color: var(--back-sub)!important;
+  color: var(--text-main)!important;
+}
+.select2-dropdown {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.skin-blue-dark .main-header .navbar .dropdown-menu li a {
+  color: var(--header);
+}
+.skin-blue-dark .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li:hover>a, .sidebar-toggle:hover {
+  background-color: var(--header)!important;
+}
+.tab-content, .tab-pane {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.table-striped>tbody>tr:nth-of-type(odd) {
+  background-color: var(--back-sub);
+}
+#webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa {
+  color: var(--text-main);
+}
+
+a {
+  color: var(--link);
+  &:link {
+    color: var(--link);
+  }
+  &:hover {
+    color: var(--light-link);
+  }
+  &:visited {
+    color: var(--link);
+  }
+}
\ No newline at end of file
diff --git a/resources/assets/less/skins/skin-orange-dark.less b/resources/assets/less/skins/skin-orange-dark.less
new file mode 100644
index 0000000000..50d0a4257e
--- /dev/null
+++ b/resources/assets/less/skins/skin-orange-dark.less
@@ -0,0 +1,307 @@
+/*
+ * Skin: orange
+ * ----------
+ */
+@import "../bootstrap-less/mixins.less";
+@import "../bootstrap-less/variables.less";
+@import "../variables.less";
+@import "../mixins.less";
+
+.skin-orange-dark {
+  //Navbar
+  .main-header {
+    .navbar {
+      .navbar-variant(@orange; #fff);
+      .sidebar-toggle {
+        color: #fff;
+        &:hover {
+          background-color: darken(@orange, 5%);
+        }
+      }
+      @media (max-width: @screen-header-collapse) {
+        .dropdown-menu {
+          li {
+            &.divider {
+              background-color: rgba(255, 255, 255, 0.1);
+            }
+            a {
+              color: #fff;
+              &:hover {
+                background: darken(@orange, 5%);
+              }
+            }
+          }
+        }
+      }
+    }
+    //Logo
+
+    li.user-header {
+      background-color: @orange;
+    }
+  }
+
+  //Content Header
+  .content-header {
+    background: transparent;
+  }
+
+  //Create the sidebar skin
+  .skin-dark-sidebar(@orange);
+}
+
+.skin-orange-dark.layout-top-nav .main-header > .logo {
+  .logo-variant {
+    background-color: none;
+  }
+}
+
+
+
+.btn, .btn:hover {
+
+
+  &.btn-primary, .btn-primary:link {
+    background-color: darken(@orange, 10%);
+    border-color: darken(@orange, 20%);
+    color: #fff;
+  }
+
+
+  &a.btn-primary:hover {
+    background-color: darken(@orange, 20%);
+    border-color: darken(@orange, 20%);
+    color: #fff;
+  }
+
+  &.btn-white:link {
+    background-color: darken(@orange, 10%);
+    color: #fff;
+  }
+
+  &.btn-white:hover {
+    background-color: darken(@orange, 30%);
+    color: #fff;
+  }
+}
+
+
+a {
+  color: @orange;
+  &:hover {
+    color: darken(@orange, 20%);
+  }
+  &:visited {
+    color: @orange;
+  }
+}
+
+.text-primary {
+  color: darken(@orange, 20%);
+}
+
+
+
+
+:root {
+  --background: #222;
+  --back-main: #333;
+  --back-sub: #444;
+  --header: @orange; /* Use same as Header picker */
+  --text-main: #FFF;
+  --text-sub: #BBB;
+  --link: lighten(@orange, 10%); /* Use same as Header picker */
+  --nav-link: #FFF; /* Use same as Header picker */
+  --light-link: lighten(@orange, 30%); /* Use same as Header picker */
+}
+
+.main-header .navbar, .main-header .logo {
+  background-color: var(--header);
+  background: -webkit-linear-gradient(top,  var(--header) 0%,var(--header) 100%);
+  background: linear-gradient(to bottom, var(--header) 0%,var(--header) 100%);
+  border-color: var(--header);
+}
+
+.navbar-nav>li>a:link {
+  color: var(--nav-link);
+}
+
+.modal-content {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+
+a, a:link, a:visited, .btn-primary.hover {
+  color: var(--header);
+}
+#accessoriesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#assetsListingTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#assetsListingTable>tbody>tr.selected>td {
+  background-color: var(--back-main);
+}
+body {
+  color: var(--text-main);
+}
+.box, .box.box-default {
+  border-top: 3px solid var(--header);
+  border-top-color: var(--header);
+}
+.box-body, .box-footer, .box-header {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.btn-default{
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.btn-default:active, .btn-default:focus, .btn-default:hover, .btn-default.active {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.btn-primary, .btn-primary.hover, .btn-primary:active, .text-blue {
+  color: var(--text-main)!important;
+}
+.btn-primary:hover {
+  background-color: var(--back-main);
+  color: var(--header)!important;
+}
+#componentsTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#consumablesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+.content-wrapper {
+  background-color: var(--background);
+}
+#create-form>div>div>div>span>i.fa {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover, .datepicker table tr td.day.focused, .datepicker table tr td.day:hover {
+  background-color: var(--header);
+}
+.datepicker.dropdown-menu {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+#details>div>div>div>table {
+  background-color: transparent;
+}
+.dropdown-menu, .dropdown-menu>li>a {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.dropdown-menu>li>a:hover {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.form-control {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+h1, h2, h3, h4, h5, h6, p {
+  color: var(--text-main);
+}
+.help-block {
+  color: var(--text-sub);
+}
+input[type=text], input[type=search] {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.input-group, .input-group-addon {
+  background-color: var(--back-sub)!important;
+  color: var(--text-main);
+}
+#licensesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+.main-footer {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.nav-tabs-custom>.nav-tabs>li>a, .nav-tabs-custom>.nav-tabs>li.active>a {
+  color: var(--text-main);
+}
+.nav-tabs-custom>.nav-tabs>li.active {
+  border-top-color: var(--header);
+}
+.nav-tabs-custom>.nav-tabs>li.active>a {
+  background-color: var(--back-main);
+}
+.nav-tabs-custom>.nav-tabs>li.active>a:hover {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.nav-tabs-custom, .nav-tabs-custom>.tab-content {
+  background-color: var(--back-main);
+}
+.navbar-nav>.tasks-menu>.dropdown-menu>li.header {
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.open>.dropdown-toggle.btn-default {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.panel {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.panel-default>.panel-heading {
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+  background-color: var(--header);
+  color: var(--back-main);
+}
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+  color: var(--text-main);
+}
+.select2-selection--single {
+  background-color: var(--back-sub)!important;
+  color: var(--text-main)!important;
+}
+.select2-dropdown {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.skin-blue-dark .main-header .navbar .dropdown-menu li a {
+  color: var(--header);
+}
+.skin-blue-dark .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li:hover>a, .sidebar-toggle:hover {
+  background-color: var(--header)!important;
+}
+.tab-content, .tab-pane {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.table-striped>tbody>tr:nth-of-type(odd) {
+  background-color: var(--back-sub);
+}
+#webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa {
+  color: var(--text-main);
+}
+
+a {
+  color: var(--link);
+  &:link {
+    color: var(--link);
+  }
+  &:hover {
+    color: var(--light-link);
+  }
+  &:visited {
+    color: var(--link);
+  }
+}
\ No newline at end of file
diff --git a/resources/assets/less/skins/skin-purple-dark.less b/resources/assets/less/skins/skin-purple-dark.less
new file mode 100644
index 0000000000..9060fbe892
--- /dev/null
+++ b/resources/assets/less/skins/skin-purple-dark.less
@@ -0,0 +1,307 @@
+/*
+ * Skin: Purple
+ * ----------
+ */
+@import "../bootstrap-less/mixins.less";
+@import "../bootstrap-less/variables.less";
+@import "../variables.less";
+@import "../mixins.less";
+
+.skin-purple-dark {
+  //Navbar
+  .main-header {
+    .navbar {
+      .navbar-variant(@purple; #fff);
+      .sidebar-toggle {
+        color: #fff;
+        &:hover {
+          background-color: darken(@purple, 5%);
+        }
+      }
+      @media (max-width: @screen-header-collapse) {
+        .dropdown-menu {
+          li {
+            &.divider {
+              background-color: rgba(255, 255, 255, 0.1);
+            }
+            a {
+              color: #fff;
+              &:hover {
+                background: darken(@purple, 5%);
+              }
+            }
+          }
+        }
+      }
+    }
+    //Logo
+
+    li.user-header {
+      background-color: @purple;
+    }
+  }
+
+  //Content Header
+  .content-header {
+    background: transparent;
+  }
+
+  //Create the sidebar skin
+  .skin-dark-sidebar(@purple);
+}
+
+.skin-purple-dark.layout-top-nav .main-header > .logo {
+  .logo-variant {
+    background-color: none;
+  }
+}
+
+
+
+.btn, .btn:hover {
+
+
+  &.btn-primary, .btn-primary:link {
+    background-color: darken(@purple, 10%);
+    border-color: darken(@purple, 20%);
+    color: #fff;
+  }
+
+
+  &a.btn-primary:hover {
+    background-color: darken(@purple, 20%);
+    border-color: darken(@purple, 20%);
+    color: #fff;
+  }
+
+  &.btn-white:link {
+    background-color: darken(@purple, 10%);
+    color: #fff;
+  }
+
+  &.btn-white:hover {
+    background-color: darken(@purple, 30%);
+    color: #fff;
+  }
+}
+
+
+a {
+  color: @purple;
+  &:hover {
+    color: darken(@purple, 20%);
+  }
+  &:visited {
+    color: @purple;
+  }
+}
+
+.text-primary {
+  color: darken(@purple, 20%);
+}
+
+
+
+
+:root {
+  --background: #222;
+  --back-main: #333;
+  --back-sub: #444;
+  --header: @purple; /* Use same as Header picker */
+  --text-main: #FFF;
+  --text-sub: #BBB;
+  --link: lighten(@purple, 10%); /* Use same as Header picker */
+  --nav-link: #FFF; /* Use same as Header picker */
+  --light-link: lighten(@purple, 30%); /* Use same as Header picker */
+}
+
+.main-header .navbar, .main-header .logo {
+  background-color: var(--header);
+  background: -webkit-linear-gradient(top,  var(--header) 0%,var(--header) 100%);
+  background: linear-gradient(to bottom, var(--header) 0%,var(--header) 100%);
+  border-color: var(--header);
+}
+
+.navbar-nav>li>a:link {
+  color: var(--nav-link);
+}
+
+.modal-content {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+
+a, a:link, a:visited, .btn-primary.hover {
+  color: var(--header);
+}
+#accessoriesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#assetsListingTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#assetsListingTable>tbody>tr.selected>td {
+  background-color: var(--back-main);
+}
+body {
+  color: var(--text-main);
+}
+.box, .box.box-default {
+  border-top: 3px solid var(--header);
+  border-top-color: var(--header);
+}
+.box-body, .box-footer, .box-header {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.btn-default{
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.btn-default:active, .btn-default:focus, .btn-default:hover, .btn-default.active {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.btn-primary, .btn-primary.hover, .btn-primary:active, .text-blue {
+  color: var(--text-main)!important;
+}
+.btn-primary:hover {
+  background-color: var(--back-main);
+  color: var(--header)!important;
+}
+#componentsTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#consumablesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+.content-wrapper {
+  background-color: var(--background);
+}
+#create-form>div>div>div>span>i.fa {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover, .datepicker table tr td.day.focused, .datepicker table tr td.day:hover {
+  background-color: var(--header);
+}
+.datepicker.dropdown-menu {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+#details>div>div>div>table {
+  background-color: transparent;
+}
+.dropdown-menu, .dropdown-menu>li>a {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.dropdown-menu>li>a:hover {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.form-control {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+h1, h2, h3, h4, h5, h6, p {
+  color: var(--text-main);
+}
+.help-block {
+  color: var(--text-sub);
+}
+input[type=text], input[type=search] {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.input-group, .input-group-addon {
+  background-color: var(--back-sub)!important;
+  color: var(--text-main);
+}
+#licensesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+.main-footer {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.nav-tabs-custom>.nav-tabs>li>a, .nav-tabs-custom>.nav-tabs>li.active>a {
+  color: var(--text-main);
+}
+.nav-tabs-custom>.nav-tabs>li.active {
+  border-top-color: var(--header);
+}
+.nav-tabs-custom>.nav-tabs>li.active>a {
+  background-color: var(--back-main);
+}
+.nav-tabs-custom>.nav-tabs>li.active>a:hover {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.nav-tabs-custom, .nav-tabs-custom>.tab-content {
+  background-color: var(--back-main);
+}
+.navbar-nav>.tasks-menu>.dropdown-menu>li.header {
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.open>.dropdown-toggle.btn-default {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.panel {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.panel-default>.panel-heading {
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+  background-color: var(--header);
+  color: var(--back-main);
+}
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+  color: var(--text-main);
+}
+.select2-selection--single {
+  background-color: var(--back-sub)!important;
+  color: var(--text-main)!important;
+}
+.select2-dropdown {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.skin-blue-dark .main-header .navbar .dropdown-menu li a {
+  color: var(--header);
+}
+.skin-blue-dark .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li:hover>a, .sidebar-toggle:hover {
+  background-color: var(--header)!important;
+}
+.tab-content, .tab-pane {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.table-striped>tbody>tr:nth-of-type(odd) {
+  background-color: var(--back-sub);
+}
+#webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa {
+  color: var(--text-main);
+}
+
+a {
+  color: var(--link);
+  &:link {
+    color: var(--link);
+  }
+  &:hover {
+    color: var(--light-link);
+  }
+  &:visited {
+    color: var(--link);
+  }
+}
\ No newline at end of file
diff --git a/resources/assets/less/skins/skin-red-dark.less b/resources/assets/less/skins/skin-red-dark.less
new file mode 100644
index 0000000000..a0ffe2d8af
--- /dev/null
+++ b/resources/assets/less/skins/skin-red-dark.less
@@ -0,0 +1,307 @@
+/*
+ * Skin: red
+ * ----------
+ */
+@import "../bootstrap-less/mixins.less";
+@import "../bootstrap-less/variables.less";
+@import "../variables.less";
+@import "../mixins.less";
+
+.skin-red-dark {
+  //Navbar
+  .main-header {
+    .navbar {
+      .navbar-variant(@red; #fff);
+      .sidebar-toggle {
+        color: #fff;
+        &:hover {
+          background-color: darken(@red, 5%);
+        }
+      }
+      @media (max-width: @screen-header-collapse) {
+        .dropdown-menu {
+          li {
+            &.divider {
+              background-color: rgba(255, 255, 255, 0.1);
+            }
+            a {
+              color: #fff;
+              &:hover {
+                background: darken(@red, 5%);
+              }
+            }
+          }
+        }
+      }
+    }
+    //Logo
+
+    li.user-header {
+      background-color: @red;
+    }
+  }
+
+  //Content Header
+  .content-header {
+    background: transparent;
+  }
+
+  //Create the sidebar skin
+  .skin-dark-sidebar(@red);
+}
+
+.skin-red-dark.layout-top-nav .main-header > .logo {
+  .logo-variant {
+    background-color: none;
+  }
+}
+
+
+
+.btn, .btn:hover {
+
+
+  &.btn-primary, .btn-primary:link {
+    background-color: darken(@red, 10%);
+    border-color: darken(@red, 20%);
+    color: #fff;
+  }
+
+
+  &a.btn-primary:hover {
+    background-color: darken(@red, 20%);
+    border-color: darken(@red, 20%);
+    color: #fff;
+  }
+
+  &.btn-white:link {
+    background-color: darken(@red, 10%);
+    color: #fff;
+  }
+
+  &.btn-white:hover {
+    background-color: darken(@red, 30%);
+    color: #fff;
+  }
+}
+
+
+a {
+  color: @red;
+  &:hover {
+    color: darken(@red, 20%);
+  }
+  &:visited {
+    color: @red;
+  }
+}
+
+.text-primary {
+  color: darken(@red, 20%);
+}
+
+
+
+
+:root {
+  --background: #222;
+  --back-main: #333;
+  --back-sub: #444;
+  --header: @red; /* Use same as Header picker */
+  --text-main: #FFF;
+  --text-sub: #BBB;
+  --link: lighten(@red, 10%); /* Use same as Header picker */
+  --nav-link: #FFF; /* Use same as Header picker */
+  --light-link: lighten(@red, 30%); /* Use same as Header picker */
+}
+
+.main-header .navbar, .main-header .logo {
+  background-color: var(--header);
+  background: -webkit-linear-gradient(top,  var(--header) 0%,var(--header) 100%);
+  background: linear-gradient(to bottom, var(--header) 0%,var(--header) 100%);
+  border-color: var(--header);
+}
+
+.navbar-nav>li>a:link {
+  color: var(--nav-link);
+}
+
+.modal-content {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+
+a, a:link, a:visited, .btn-primary.hover {
+  color: var(--header);
+}
+#accessoriesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#assetsListingTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#assetsListingTable>tbody>tr.selected>td {
+  background-color: var(--back-main);
+}
+body {
+  color: var(--text-main);
+}
+.box, .box.box-default {
+  border-top: 3px solid var(--header);
+  border-top-color: var(--header);
+}
+.box-body, .box-footer, .box-header {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.btn-default{
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.btn-default:active, .btn-default:focus, .btn-default:hover, .btn-default.active {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.btn-primary, .btn-primary.hover, .btn-primary:active, .text-blue {
+  color: var(--text-main)!important;
+}
+.btn-primary:hover {
+  background-color: var(--back-main);
+  color: var(--header)!important;
+}
+#componentsTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#consumablesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+.content-wrapper {
+  background-color: var(--background);
+}
+#create-form>div>div>div>span>i.fa {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover, .datepicker table tr td.day.focused, .datepicker table tr td.day:hover {
+  background-color: var(--header);
+}
+.datepicker.dropdown-menu {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+#details>div>div>div>table {
+  background-color: transparent;
+}
+.dropdown-menu, .dropdown-menu>li>a {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.dropdown-menu>li>a:hover {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.form-control {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+h1, h2, h3, h4, h5, h6, p {
+  color: var(--text-main);
+}
+.help-block {
+  color: var(--text-sub);
+}
+input[type=text], input[type=search] {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.input-group, .input-group-addon {
+  background-color: var(--back-sub)!important;
+  color: var(--text-main);
+}
+#licensesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+.main-footer {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.nav-tabs-custom>.nav-tabs>li>a, .nav-tabs-custom>.nav-tabs>li.active>a {
+  color: var(--text-main);
+}
+.nav-tabs-custom>.nav-tabs>li.active {
+  border-top-color: var(--header);
+}
+.nav-tabs-custom>.nav-tabs>li.active>a {
+  background-color: var(--back-main);
+}
+.nav-tabs-custom>.nav-tabs>li.active>a:hover {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.nav-tabs-custom, .nav-tabs-custom>.tab-content {
+  background-color: var(--back-main);
+}
+.navbar-nav>.tasks-menu>.dropdown-menu>li.header {
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.open>.dropdown-toggle.btn-default {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.panel {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.panel-default>.panel-heading {
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+  background-color: var(--header);
+  color: var(--back-main);
+}
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+  color: var(--text-main);
+}
+.select2-selection--single {
+  background-color: var(--back-sub)!important;
+  color: var(--text-main)!important;
+}
+.select2-dropdown {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.skin-blue-dark .main-header .navbar .dropdown-menu li a {
+  color: var(--header);
+}
+.skin-blue-dark .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li:hover>a, .sidebar-toggle:hover {
+  background-color: var(--header)!important;
+}
+.tab-content, .tab-pane {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.table-striped>tbody>tr:nth-of-type(odd) {
+  background-color: var(--back-sub);
+}
+#webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa {
+  color: var(--text-main);
+}
+
+a {
+  color: var(--link);
+  &:link {
+    color: var(--link);
+  }
+  &:hover {
+    color: var(--light-link);
+  }
+  &:visited {
+    color: var(--link);
+  }
+}
\ No newline at end of file
diff --git a/resources/assets/less/skins/skin-yellow-dark.less b/resources/assets/less/skins/skin-yellow-dark.less
new file mode 100644
index 0000000000..63c4672380
--- /dev/null
+++ b/resources/assets/less/skins/skin-yellow-dark.less
@@ -0,0 +1,307 @@
+/*
+ * Skin: yellow
+ * ----------
+ */
+@import "../bootstrap-less/mixins.less";
+@import "../bootstrap-less/variables.less";
+@import "../variables.less";
+@import "../mixins.less";
+
+.skin-yellow-dark {
+  //Navbar
+  .main-header {
+    .navbar {
+      .navbar-variant(@yellow; #fff);
+      .sidebar-toggle {
+        color: #fff;
+        &:hover {
+          background-color: darken(@yellow, 5%);
+        }
+      }
+      @media (max-width: @screen-header-collapse) {
+        .dropdown-menu {
+          li {
+            &.divider {
+              background-color: rgba(255, 255, 255, 0.1);
+            }
+            a {
+              color: #fff;
+              &:hover {
+                background: darken(@yellow, 5%);
+              }
+            }
+          }
+        }
+      }
+    }
+    //Logo
+
+    li.user-header {
+      background-color: @yellow;
+    }
+  }
+
+  //Content Header
+  .content-header {
+    background: transparent;
+  }
+
+  //Create the sidebar skin
+  .skin-dark-sidebar(@yellow);
+}
+
+.skin-yellow-dark.layout-top-nav .main-header > .logo {
+  .logo-variant {
+    background-color: none;
+  }
+}
+
+
+
+.btn, .btn:hover {
+
+
+  &.btn-primary, .btn-primary:link {
+    background-color: darken(@yellow, 10%);
+    border-color: darken(@yellow, 20%);
+    color: #fff;
+  }
+
+
+  &a.btn-primary:hover {
+    background-color: darken(@yellow, 20%);
+    border-color: darken(@yellow, 20%);
+    color: #fff;
+  }
+
+  &.btn-white:link {
+    background-color: darken(@yellow, 10%);
+    color: #fff;
+  }
+
+  &.btn-white:hover {
+    background-color: darken(@yellow, 30%);
+    color: #fff;
+  }
+}
+
+
+a {
+  color: @yellow;
+  &:hover {
+    color: darken(@yellow, 20%);
+  }
+  &:visited {
+    color: @yellow;
+  }
+}
+
+.text-primary {
+  color: darken(@yellow, 20%);
+}
+
+
+
+
+:root {
+  --background: #222;
+  --back-main: #333;
+  --back-sub: #444;
+  --header: @yellow; /* Use same as Header picker */
+  --text-main: #FFF;
+  --text-sub: #BBB;
+  --link: lighten(@yellow, 10%); /* Use same as Header picker */
+  --nav-link: #FFF; /* Use same as Header picker */
+  --light-link: lighten(@yellow, 30%); /* Use same as Header picker */
+}
+
+.main-header .navbar, .main-header .logo {
+  background-color: var(--header);
+  background: -webkit-linear-gradient(top,  var(--header) 0%,var(--header) 100%);
+  background: linear-gradient(to bottom, var(--header) 0%,var(--header) 100%);
+  border-color: var(--header);
+}
+
+.navbar-nav>li>a:link {
+  color: var(--nav-link);
+}
+
+.modal-content {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+
+a, a:link, a:visited, .btn-primary.hover {
+  color: var(--header);
+}
+#accessoriesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#assetsListingTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#assetsListingTable>tbody>tr.selected>td {
+  background-color: var(--back-main);
+}
+body {
+  color: var(--text-main);
+}
+.box, .box.box-default {
+  border-top: 3px solid var(--header);
+  border-top-color: var(--header);
+}
+.box-body, .box-footer, .box-header {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.btn-default{
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.btn-default:active, .btn-default:focus, .btn-default:hover, .btn-default.active {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.btn-primary, .btn-primary.hover, .btn-primary:active, .text-blue {
+  color: var(--text-main)!important;
+}
+.btn-primary:hover {
+  background-color: var(--back-main);
+  color: var(--header)!important;
+}
+#componentsTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+#consumablesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+.content-wrapper {
+  background-color: var(--background);
+}
+#create-form>div>div>div>span>i.fa {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover, .datepicker table tr td.day.focused, .datepicker table tr td.day:hover {
+  background-color: var(--header);
+}
+.datepicker.dropdown-menu {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+#details>div>div>div>table {
+  background-color: transparent;
+}
+.dropdown-menu, .dropdown-menu>li>a {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.dropdown-menu>li>a:hover {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.form-control {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+h1, h2, h3, h4, h5, h6, p {
+  color: var(--text-main);
+}
+.help-block {
+  color: var(--text-sub);
+}
+input[type=text], input[type=search] {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.input-group, .input-group-addon {
+  background-color: var(--back-sub)!important;
+  color: var(--text-main);
+}
+#licensesTable>tbody>tr>td>nobr>a>i.fa {
+  color: var(--text-main);
+}
+.main-footer {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.nav-tabs-custom>.nav-tabs>li>a, .nav-tabs-custom>.nav-tabs>li.active>a {
+  color: var(--text-main);
+}
+.nav-tabs-custom>.nav-tabs>li.active {
+  border-top-color: var(--header);
+}
+.nav-tabs-custom>.nav-tabs>li.active>a {
+  background-color: var(--back-main);
+}
+.nav-tabs-custom>.nav-tabs>li.active>a:hover {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.nav-tabs-custom, .nav-tabs-custom>.tab-content {
+  background-color: var(--back-main);
+}
+.navbar-nav>.tasks-menu>.dropdown-menu>li.header {
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.open>.dropdown-toggle.btn-default {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.panel {
+  background-color: var(--back-sub);
+  color: var(--text-main);
+}
+.panel-default>.panel-heading {
+  background-color: var(--back-main);
+  color: var(--header);
+}
+.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover {
+  background-color: var(--back-sub);
+  color: var(--header);
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+  background-color: var(--header);
+  color: var(--back-main);
+}
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+  color: var(--text-main);
+}
+.select2-selection--single {
+  background-color: var(--back-sub)!important;
+  color: var(--text-main)!important;
+}
+.select2-dropdown {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.skin-blue-dark .main-header .navbar .dropdown-menu li a {
+  color: var(--header);
+}
+.skin-blue-dark .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li:hover>a, .sidebar-toggle:hover {
+  background-color: var(--header)!important;
+}
+.tab-content, .tab-pane {
+  background-color: var(--back-main);
+  color: var(--text-main);
+}
+.table-striped>tbody>tr:nth-of-type(odd) {
+  background-color: var(--back-sub);
+}
+#webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa {
+  color: var(--text-main);
+}
+
+a {
+  color: var(--link);
+  &:link {
+    color: var(--link);
+  }
+  &:hover {
+    color: var(--light-link);
+  }
+  &:visited {
+    color: var(--link);
+  }
+}
\ No newline at end of file
diff --git a/resources/macros/macros.php b/resources/macros/macros.php
index f96f1c9835..706f53af98 100644
--- a/resources/macros/macros.php
+++ b/resources/macros/macros.php
@@ -530,20 +530,20 @@ Form::macro('customfield_elements', function ($name = "customfield_elements", $s
 Form::macro('skin', function ($name = "skin", $selected = null, $class = null) {
 
     $formats = array(
-        'blue' => 'Default Blue Dark',
-        'blue-light' => 'Blue Light',
+        'blue' => 'Default Blue',
+        'blue-dark' => 'Blue (Dark Mode)',
         'green' => 'Green Dark',
-        'green-light' => 'Green Light',
+        'green-dark' => 'Green (Dark Mode)',
         'red' => 'Red Dark',
-        'red-light' => 'Red Light',
+        'red-dark' => 'Red (Dark Mode)',
         'orange' => 'Orange Dark',
-        'orange-light' => 'Orange Light',
+        'orange-dark' => 'Orange (Dark Mode)',
         'black' => 'Black',
-        'black-light' => 'Black Light',
+        'black-dark' => 'Black (Dark Mode)',
         'purple' => 'Purple',
-        'purple-light' => 'Purple Light',
+        'purple-dark' => 'Purple (Dark Mode)',
         'yellow' => 'Yellow',
-        'yellow-light' => 'Yellow Light',
+        'yellow-dark' => 'Yellow (Dark Mode)',
         'contrast' => 'High Contrast',
     );