diff --git a/misc/theme-cicada/Makefile b/misc/theme-cicada/Makefile
index 41211e348..d1245d117 100644
--- a/misc/theme-cicada/Makefile
+++ b/misc/theme-cicada/Makefile
@@ -1,5 +1,5 @@
 PLUGIN_NAME=		theme-cicada
-PLUGIN_VERSION=		1.35
+PLUGIN_VERSION=		1.36
 PLUGIN_COMMENT=		The cicada theme - dark grey onyx
 PLUGIN_MAINTAINER=	rene@team-rebellion.net
 PLUGIN_NO_ABI=		yes
diff --git a/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/dashboard.scss b/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/dashboard.scss
new file mode 100644
index 000000000..f50c89135
--- /dev/null
+++ b/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/dashboard.scss
@@ -0,0 +1,299 @@
+.fa-spinner {
+  font-size: 2em;
+}
+
+.grid-stack-item-content {
+  text-align: center;
+  border-style: solid;
+  border-color: rgba(25, 25, 25, 0.72);
+  border-width: 2px;
+  background-color: #1c1c1c;
+  border-radius: 0.5em 0.5em 0.5em 0.5em;
+}
+
+.widget-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 1px;
+  cursor: grab;
+}
+
+.widget-header {
+  margin-top: 0.5em;
+  margin-left: 1em;
+  margin-right: 1em;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.widget-spinner {
+  margin-top: 20px;
+}
+
+.fa-stack.small {
+  font-size: 0.5em;
+}
+
+.close-handle {
+  vertical-align: middle;
+  text-align: right;
+  cursor: pointer;
+
+  > i {
+    font-size: 0.7em;
+  }
+}
+
+.panel-divider {
+  width: 100%;
+  text-align: center;
+  height: 8px;
+  margin-bottom: 10px;
+}
+
+table {
+  table-layout: fixed;
+}
+
+td {
+  word-break: break-all;
+}
+
+.line {
+  display: inline-block;
+  height: 1px;
+  width: 70%;
+  background: #d94f00;
+  margin: 5px;
+}
+
+.canvas-container {
+  position: relative;
+}
+
+.cpu-canvas-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.smoothie-container {
+  width: 100%;
+}
+
+.smoothie-chart-tooltip {
+  z-index: 1;
+
+  /* necessary to force to foreground */
+  background: rgba(50, 50, 50, 0.9);
+  padding-left: 15px;
+  padding-right: 15px;
+  color: white;
+  font-size: 13px;
+  border-radius: 0.5em 0.5em 0.5em 0.5em;
+  pointer-events: none;
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
+.gateway-info {
+  margin: 5px;
+  padding: 5px;
+  font-size: 13px;
+}
+
+.gateway-detail-container {
+  display: none;
+  margin: 5px;
+}
+
+.interface-info {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  height: 100%;
+}
+
+.nowrap {
+  flex-wrap: nowrap;
+}
+
+.gateway-graph {
+  display: none;
+}
+
+.flex-container > .gateway-graph {
+  font-size: 13px;
+}
+
+.vertical-center-row {
+  height: 100%;
+  display: inline;
+}
+
+.interfaces-info {
+  margin: 5px;
+  font-size: 13px;
+}
+
+.interface-descr {
+  margin-left: 10px;
+  font-size: 15px;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.interfaces-detail-container {
+  margin: 5px;
+  display: none;
+}
+
+.d-flex {
+  display: flex;
+
+  > {
+    .justify-content-start {
+      justify-content: start;
+    }
+
+    .justify-content-end {
+      justify-content: end;
+    }
+  }
+}
+
+#chartjs-toolip {
+  z-index: 20;
+}
+
+/* CPU widget */
+
+.cpu-type {
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
+/* ----- */
+
+/* Custom flex table */
+
+div {
+  box-sizing: border-box;
+}
+
+.flextable-container {
+  display: block;
+  margin: 2em auto;
+  width: 95%;
+  max-width: 1200px;
+}
+
+.flextable-header {
+  display: flex;
+  flex-flow: row wrap;
+  transition: 0.5s;
+  padding: 0.5em 0.5em;
+  border-top: solid 1px rgba(217, 79, 0, 0.15);
+}
+
+.flextable-row {
+  display: flex;
+  flex-flow: row wrap;
+  transition: 0.5s;
+  padding: 0.5em 0.5em;
+  border-top: solid 1px rgba(255, 255, 255, 0.06);
+  align-items: center;
+}
+
+.flextable-header .flex-cell {
+  font-weight: bold;
+}
+
+.flextable-row:hover {
+  background: #242424;
+  transition: 500ms;
+}
+
+.flex-cell {
+  text-align: left;
+  word-break: break-word;
+}
+
+.column {
+  display: flex;
+  flex-flow: column wrap;
+  width: 50%;
+  padding: 0;
+
+  .flex-cell {
+    display: flex;
+    flex-flow: row wrap;
+    width: 100%;
+    padding: 0;
+    border: 0;
+    border-top: rgb(59, 59, 59);
+
+    &:hover {
+      background: none !important;
+      transition: 500ms;
+    }
+  }
+}
+
+.flex-subcell {
+  width: 100%;
+  text-align: left;
+}
+
+.column .flex-cell:not(:last-child) {
+  border-bottom: none !important;
+}
+
+/* ----- */
+
+/* CSS grid responsive table */
+
+.grid-header-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+}
+
+.grid-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  background-color: #f7e2d6;
+
+  /* fade-in color, transitions to transparent */
+  border-top: 1px solid #f7e2d6;
+  transition: 0.5s;
+  opacity: 0.4;
+
+  &:hover {
+    background: #F5F5F5 !important;
+    transition: 500ms;
+  }
+}
+
+.grid-header {
+  border-top: 1px solid #f7e2d6;
+  font-weight: bold;
+}
+
+.grid-item {
+  border: 1 px solid #ccc;
+  padding: 4px;
+  text-align: center;
+}
+
+/* ----- */
+
+:root {
+  --chart-js-background-color:#bac3ca;
+  --chart-js-border-color:#bac3ca;
+  --chart-js-font-color:#bac3ca;
+}
diff --git a/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/dns-overview.scss b/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/dns-overview.scss
new file mode 100644
index 000000000..9399ac7be
--- /dev/null
+++ b/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/dns-overview.scss
@@ -0,0 +1,173 @@
+.tab-content {
+  padding: 10px;
+  border-top: 1px solid #191919;
+}
+
+.banner {
+  width: 25%;
+}
+
+.stats-element {
+  height: 5em;
+  background: #202020;
+  overflow: hidden;
+  display: flex;
+  justify-content: flex-start;
+  border-radius: .3em;
+  margin: auto;
+  border: 1px solid rgb(24, 24, 24);
+}
+
+.stats-icon {
+  height: auto;
+  width: 50%;
+  object-fit: cover;
+  background: #242424;
+  border-radius: 0 2em 2em 0 / 0 3em 3em 0;
+  box-shadow: 3px 5px 1px 3px rgb(28, 16, 9);
+}
+
+.large-icon {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 2em;
+}
+
+.stats-text {
+  height: 5em;
+  width: 15em;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.stats-counter-text, .stats-inner-text {
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  font-size: 15px;
+}
+
+#bannersub {
+  text-align: center;
+  margin: 5px;
+}
+
+.list-group-wrapper {
+  margin: 0px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.list-item-domain {
+  height: 2.5em;
+}
+
+.list-group-item-border {
+  border: 1px solid #191919;
+
+  &:first-child {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border-bottom: 2px solid #1c1c1c;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+}
+
+.btn.pull-right {
+  margin-left: 3px;
+}
+
+.odd-bg {
+  background: #f7f7f7;
+}
+
+.top-item {
+  display: flex;
+  white-space: nowrap;
+}
+
+.group-p {
+  overflow: hidden;
+  height: 20px;
+  margin-right: 5px;
+  text-overflow: ellipsis;
+}
+
+.counter {
+  position: relative;
+  top: -3px;
+  color: #888;
+  font-size: 14px;
+  line-height: 1.4;
+  flex: 1;
+  text-align: right;
+}
+
+.vertical-center {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+#maintabs > li > a {
+  border: 1px solid #191919;
+}
+
+.query-success {
+  background-color: rgba(5, 142, 73, 0.3);
+}
+
+.query-info {
+  background-color: rgba(255, 227, 0, 0.3);
+}
+
+.query-danger {
+  background-color: rgba(235, 9, 9, 0.3);
+}
+
+.query-warning {
+  background-color: rgba(255, 131, 0, 0.3);
+}
+
+.query-error {
+  background-color: #402751;
+}
+
+#searchFilter {
+  display: inline-block;
+  margin: 0 20px 0 0;
+  vertical-align: middle;
+}
+
+.tag {
+  font-size: 14px;
+  padding: .3em .4em .4em;
+  margin: 0 .1em;
+
+  a {
+    color: #bbb;
+    cursor: pointer;
+    opacity: 0.9;
+    margin: 0 0 0 .3em;
+
+    fa-times {
+      color: #fff;
+      margin-bottom: 2px;
+    }
+  }
+}
+
+.tooltip-inner {
+  max-width: 1000px !important;
+}
diff --git a/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/main.scss b/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/main.scss
index a95348ce0..a7e374d6b 100644
--- a/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/main.scss
+++ b/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/main.scss
@@ -10,12 +10,12 @@
   min-height: 25px !important;
 
   .btn-group .btn {
-    color: #FFFFFF !important;
+    color: #bac3ca !important;
     background: none;
     border: 0px;
 
     .glyphicon {
-      color: #FFFFFF !important;
+      color: #bac3ca !important;
     }
   }
 
@@ -245,8 +245,8 @@ optgroup {
 
 table {
   border-spacing: 0;
-  background-color: #373737;
-  color: #FFF;
+  background-color: #1c1c1c;
+  color: #bac3ca;
   width: 100%;
 }
 
@@ -823,12 +823,12 @@ td, th {
 
 .glyphicon-chevron-up:before {
   content: "\e113";
-  color: #FFFFFF !important;
+  color: #bac3ca !important;
 }
 
 .glyphicon-chevron-down:before {
   content: "\e114";
-  color: #FFFFFF !important;
+  color: #bac3ca !important;
 }
 
 .glyphicon-retweet:before {
@@ -1190,7 +1190,7 @@ body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 1.428571429;
-  color: #FFFFFF;
+  color: #bac3ca;
   background-color: none;
 }
 
@@ -1825,7 +1825,7 @@ pre {
   line-height: 1.428571429;
   word-break: break-all;
   word-wrap: break-word;
-  color: #FFFFFF;
+  color: #bac3ca;
   background-color: inherit;
   border: inherit;
   border-radius: 3px;
@@ -2757,7 +2757,7 @@ th {
         padding: 10px 0px 10px 20px;
         line-height: 1.428571429;
         vertical-align: top;
-        border-top: 1px solid #2d2d2d;
+        border-top: 1px solid #222;
       }
     }
 
@@ -2766,7 +2766,7 @@ th {
         padding: 10px 0px 10px 20px;
         line-height: 1.428571429;
         vertical-align: top;
-        border-top: 1px solid #2d2d2d;
+        border-top: 1px solid #222;
       }
     }
 
@@ -2775,7 +2775,7 @@ th {
         padding: 10px 0px 10px 20px;
         line-height: 1.428571429;
         vertical-align: top;
-        border-top: 1px solid #2d2d2d;
+        border-top: 1px solid #222;
       }
     }
 
@@ -2788,8 +2788,8 @@ th {
         border-top: 0;
         font-family: 'SourceSansProSemibold';
         font-weight: normal;
-        color: #FFF;
-        background-color: #292929;
+        color: #bac3ca;
+        background-color: #202020;
       }
     }
 
@@ -2798,8 +2798,8 @@ th {
         border-top: 0;
         font-family: 'SourceSansProSemibold';
         font-weight: normal;
-        color: #FFF;
-        background-color: #292929;
+        color: #bac3ca;
+        background-color: #202020;
       }
     }
 
@@ -2808,8 +2808,8 @@ th {
         border-top: 0;
         font-family: 'SourceSansProSemibold';
         font-weight: normal;
-        color: #FFF;
-        background-color: #292929;
+        color: #bac3ca;
+        background-color: #202020;
       }
     }
 
@@ -2875,13 +2875,13 @@ th {
 
 .table-striped > tbody > tr:nth-child(odd) > {
   td, th {
-    background-color: #333;
+    background-color: #1c1c1c;
   }
 }
 
 .table-hover > tbody > tr:hover > {
   td, th {
-    background-color: #464646;
+    background-color: #222;
   }
 }
 
@@ -3340,7 +3340,7 @@ output {
   padding-top: 7px;
   font-size: 14px;
   line-height: 1.428571429;
-  color: #FFFFFF;
+  color: #bac3ca;
 }
 
 input {
@@ -3348,7 +3348,7 @@ input {
     background-color: #262626 !important;
     border: 1px solid #5a5a5a !important;
     background-image: none !important;
-    color: #FFFFFF !important;
+    color: #bac3ca !important;
   }
 }
 
@@ -3357,7 +3357,7 @@ textarea {
     background-color: #262626 !important;
     border: 1px solid #5a5a5a !important;
     background-image: none !important;
-    color: #FFFFFF !important;
+    color: #bac3ca !important;
   }
 }
 
@@ -3366,7 +3366,7 @@ select {
     background-color: #262626 !important;
     border: 1px solid #5a5a5a !important;
     background-image: none !important;
-    color: #FFFFFF !important;
+    color: #bac3ca !important;
   }
 
   display: block;
@@ -3375,8 +3375,8 @@ select {
   padding: 6px 12px;
   font-size: 14px;
   line-height: 1.428571429;
-  color: #FFF;
-  background-color: #2d2d2d;
+  color: #bac3ca;
+  background-color: #222;
   background-image: none;
   border: 1px solid #191919;
   border-radius: 3px;
@@ -3394,8 +3394,8 @@ textarea {
   padding: 6px 12px;
   font-size: 14px;
   line-height: 1.428571429;
-  color: #FFF;
-  background-color: #2d2d2d;
+  color: #bac3ca;
+  background-color: #222;
   background-image: none;
   border: 1px solid #191919;
   border-radius: 3px;
@@ -3414,8 +3414,8 @@ input {
     padding: 6px 12px;
     font-size: 14px;
     line-height: 1.428571429;
-    color: #FFF;
-    background-color: #2d2d2d;
+    color: #bac3ca;
+    background-color: #222;
     background-image: none;
     border: 1px solid #191919;
     border-radius: 3px;
@@ -3429,7 +3429,7 @@ input {
 
 select:hover, textarea:hover {
   color: #FFF;
-  background-color: #292929;
+  background-color: #151515;
   border: 1px solid #dd630d;
   outline: 0;
 }
@@ -3437,7 +3437,7 @@ select:hover, textarea:hover {
 input {
   &[type="text"]:hover, &[type="password"]:hover, &[type="datetime"]:hover, &[type="datetime-local"]:hover, &[type="date"]:hover, &[type="month"]:hover, &[type="time"]:hover, &[type="week"]:hover, &[type="number"]:hover, &[type="email"]:hover, &[type="url"]:hover, &[type="search"]:hover, &[type="tel"]:hover, &[type="color"]:hover {
     color: #FFF;
-    background-color: #292929;
+    background-color: #151515;
     border: 1px solid #dd630d;
     outline: 0;
   }
@@ -3446,7 +3446,7 @@ input {
 select:focus, textarea:focus {
   color: #FFF;
   border: 1px solid #dd630d;
-  background-color: #232323;
+  background-color: #151515;
   outline: 0;
 }
 
@@ -3454,7 +3454,7 @@ input {
   &[type="text"]:focus, &[type="password"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="date"]:focus, &[type="month"]:focus, &[type="time"]:focus, &[type="week"]:focus, &[type="number"]:focus, &[type="email"]:focus, &[type="url"]:focus, &[type="search"]:focus, &[type="tel"]:focus, &[type="color"]:focus {
     color: #FFF;
     border: 1px solid #dd630d;
-    background-color: #232323;
+    background-color: #151515;
     outline: 0;
   }
 }
@@ -4667,14 +4667,14 @@ select[multiple].input-lg, .form-horizontal .form-group-lg select[multiple].form
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  color: #FFFFFF;
-  background-color: #292929;
+  color: #bac3ca;
+  background-color: #222;
   border: 1px solid #191919;
   outline: 0;
 }
 
 .open > .btn.dropdown-toggle {
-  color: #ffffff;
+  color: #bac3ca;
 }
 
 .btn {
@@ -4744,7 +4744,7 @@ fieldset[disabled] .btn {
 
 .btn {
   .badge {
-    color: #FFFFFF;
+    color: #bac3ca;
     background-color: #3a3a3a;
   }
 
@@ -4807,24 +4807,24 @@ fieldset[disabled] .btn {
 
 .btn-default {
   &.disabled {
-    background-color: #FFFFFF;
+    background-color: #bac3ca;
     border-color: 1px solid #1d1d1d;
     outline: 0;
 
     &:hover, &:focus, &:active, &.active {
-      background-color: #FFFFFF;
+      background-color: #bac3ca;
       border-color: 1px solid #1d1d1d;
       outline: 0;
     }
   }
 
   &[disabled] {
-    background-color: #FFFFFF;
+    background-color: #bac3ca;
     border-color: 1px solid #1d1d1d;
     outline: 0;
 
     &:hover, &:focus, &:active, &.active {
-      background-color: #FFFFFF;
+      background-color: #bac3ca;
       border-color: 1px solid #1d1d1d;
       outline: 0;
     }
@@ -4832,19 +4832,19 @@ fieldset[disabled] .btn {
 }
 
 fieldset[disabled] .btn-default {
-  background-color: #FFFFFF;
+  background-color: #bac3ca;
   border-color: 1px solid #1d1d1d;
   outline: 0;
 
   &:hover, &:focus, &:active, &.active {
-    background-color: #FFFFFF;
+    background-color: #bac3ca;
     border-color: 1px solid #1d1d1d;
     outline: 0;
   }
 }
 
 .btn-default .badge {
-  color: #FFFFFF;
+  color: #bac3ca;
   background-color: #3a3a3a;
   outline: 0;
 }
@@ -5380,13 +5380,13 @@ tbody.collapse.in {
       clear: both;
       font-weight: normal;
       line-height: 1.428571429;
-      color: #FFFFFF;
+      color: #bac3ca;
       white-space: nowrap;
       outline: 0;
 
       &:hover, &:focus {
         text-decoration: none;
-        color: #FFFFFF;
+        color: #bac3ca;
         background-color: #dd630d;
       }
     }
@@ -5615,7 +5615,7 @@ tbody.collapse.in {
   .dropdown-toggle {
     &:active, &:hover {
       outline: 0;
-      color: #FFFFFF;
+      color: #bac3ca;
       background-color: #dd630d;
       border: 1px solid #191919;
     }
@@ -5623,7 +5623,7 @@ tbody.collapse.in {
 
   &.open .dropdown-toggle {
     outline: 0;
-    color: #FFFFFF;
+    color: #bac3ca;
     background-color: #dd630d;
     border: 1px solid #191919;
   }
@@ -5981,8 +5981,8 @@ tbody.collapse.in {
       position: relative;
       display: block;
       padding: 10px 15px;
-      background-color: #3a3a3a;
-      color: #fff;
+      background-color: #222;
+      color: #bac3ca;
       border-left: 1px solid #191919;
       border-right: 1px solid #191919;
       border-top: 1px solid #191919;
@@ -5995,8 +5995,8 @@ tbody.collapse.in {
   position: relative;
   display: block;
   padding: 10px 15px;
-  background-color: #3a3a3a;
-  color: #fff;
+  background-color: #222;
+  color: #bac3ca;
   border-left: 1px solid #191919;
   border-right: 1px solid #191919;
   border-top: 1px solid #191919;
@@ -6022,7 +6022,7 @@ tbody.collapse.in {
   > a {
     &:hover, &:focus {
       text-decoration: none;
-      background-color: #2d2d2d;
+      background-color: #1c1c1c;
       color: #dd630d;
     }
   }
@@ -6045,11 +6045,11 @@ a:focus {
   }
 
   .open > a {
-    background-color: #333;
+    background-color: #1c1c1c;
     cursor: pointer;
 
     &:hover, &:focus {
-      background-color: #333;
+      background-color: #1c1c1c;
       cursor: pointer;
     }
   }
@@ -6586,7 +6586,7 @@ a:focus {
 
 .navbar-default {
   .navbar-brand {
-    color: #F7F7F7;
+    color: #bac3ca;
 
     &:hover, &:focus {
       color: #dedede;
@@ -6595,12 +6595,12 @@ a:focus {
   }
 
   .navbar-text {
-    color: #F7F7F7;
+    color: #bac3ca;
   }
 
   .navbar-nav > {
     li > a {
-      color: #F7F7F7;
+      color: #bac3ca;
 
       &:hover, &:focus {
         color: #515151;
@@ -6652,7 +6652,7 @@ a:focus {
   }
 
   .navbar-link {
-    color: #F7F7F7;
+    color: #bac3ca;
 
     &:hover {
       color: #515151;
@@ -6660,7 +6660,7 @@ a:focus {
   }
 
   .btn-link {
-    color: #F7F7F7;
+    color: #bac3ca;
 
     &:hover, &:focus {
       color: #515151;
@@ -6677,7 +6677,7 @@ a:focus {
 @media (max-width: 767px) {
   .navbar-default .navbar-nav .open .dropdown-menu > {
     li > a {
-      color: #F7F7F7;
+      color: #bac3ca;
 
       &:hover, &:focus {
         color: #515151;
@@ -6900,7 +6900,7 @@ fieldset[disabled] .navbar-inverse .btn-link {
           padding: 6px 12px;
           line-height: 1.428571429;
           text-decoration: none;
-          color: #FFFFFF;
+          color: #bac3ca;
           background-color: #505050;
           border: 1px solid #191919;
           margin-left: -1px;
@@ -6926,7 +6926,7 @@ fieldset[disabled] .navbar-inverse .btn-link {
       > {
         a {
           &:hover, &:focus {
-            color: #FFFFFF;
+            color: #bac3ca;
             background-color: #dd630d;
             border-color: #303030;
           }
@@ -6934,7 +6934,7 @@ fieldset[disabled] .navbar-inverse .btn-link {
 
         span {
           &:hover, &:focus {
-            color: #FFFFFF;
+            color: #bac3ca;
             background-color: #dd630d;
             border-color: #303030;
           }
@@ -6945,14 +6945,14 @@ fieldset[disabled] .navbar-inverse .btn-link {
     .active > {
       a {
         z-index: 2;
-        color: #FFFFFF;
+        color: #bac3ca;
         background-color: #dd630d;
         border: 1px solid #191919;
         cursor: default;
 
         &:hover, &:focus {
           z-index: 2;
-          color: #FFFFFF;
+          color: #bac3ca;
           background-color: #dd630d;
           border: 1px solid #191919;
           cursor: default;
@@ -6961,14 +6961,14 @@ fieldset[disabled] .navbar-inverse .btn-link {
 
       span {
         z-index: 2;
-        color: #FFFFFF;
+        color: #bac3ca;
         background-color: #dd630d;
         border: 1px solid #191919;
         cursor: default;
 
         &:hover, &:focus {
           z-index: 2;
-          color: #FFFFFF;
+          color: #bac3ca;
           background-color: #dd630d;
           border: 1px solid #191919;
           cursor: default;
@@ -7395,7 +7395,7 @@ a.thumbnail {
 .alert-success {
   background-color: #424242;
   border-color: #515151;
-  color: #ffffff;
+  color: #bac3ca;
 
   hr {
     border-top-color: #8dcc62;
@@ -7407,9 +7407,9 @@ a.thumbnail {
 }
 
 .alert-info {
-  background-color: #2f2f2f;
+  background-color: #202020;
   border-color: #191919;
-  color: #ffffff;
+  color: #bac3ca;
   -webkit-box-shadow: 5px 5px 5px rgba(17, 17, 17, 0.8);
   box-shadow: 5px 5px 5px rgba(17, 17, 17, 0.8);
 
@@ -7439,7 +7439,7 @@ a.thumbnail {
 .alert-danger {
   background-color: #202020;
   border-color: #B13116;
-  color: #FFFFFF !important;
+  color: #bac3ca !important;
 
   hr {
     border-top-color: #B13116;
@@ -7555,7 +7555,7 @@ a.thumbnail {
 
 .progress-bar-warning {
   background-color: #CCB717;
-  color: #FFFFFF !important;
+  color: #bac3ca !important;
 }
 
 .progress-striped .progress-bar-warning {
@@ -7624,7 +7624,7 @@ a.thumbnail {
   display: block;
   padding: 6px 8px;
   margin-bottom: -1px;
-  background-color: #2f2f2f;
+  background-color: #202020;
 
   &:last-child {
     margin-bottom: 0;
@@ -7640,7 +7640,7 @@ a.thumbnail {
 }
 
 a.list-group-item {
-  color: #FFFFFF;
+  color: #bac3ca;
   border-radius: 0;
   outline: 0;
 
@@ -7651,11 +7651,11 @@ a.list-group-item {
   &:hover, &:focus {
     text-decoration: none;
     color: #dd630d;
-    background-color: #242424;
+    background-color: #151515;
   }
 
   &:hover:before, &:focus:before {
-    background: #FFFFFF;
+    background: #bac3ca;
     content: "";
     height: 42px;
     left: 0;
@@ -8468,7 +8468,7 @@ a.list-group-item-danger {
   font-size: 21px;
   font-weight: bold;
   line-height: 1;
-  color: #FFFFFF;
+  color: #bac3ca;
   text-shadow: 0 1px 0 #000;
   opacity: 1;
   filter: alpha(opacity = 100);
@@ -8599,7 +8599,7 @@ button.close {
 .modal-footer {
   padding: 5px;
   text-align: right;
-  background-color: #383838;
+  background-color: #242424;
   border-top: 1px solid inherit;
 
   &:before {
@@ -9161,7 +9161,7 @@ button.close {
 
 .show {
   display: block !important;
-  color: #22C400;
+  color: #FFF;
 }
 
 .invisible {
@@ -9422,7 +9422,7 @@ html {
   font-family: 'SourceSansProRegular';
   scrollbar-width: thin;
   scrollbar-color: #424242 #323232;
-  background-color: #242424;
+  background-color: #151515;
 }
 
 body {
@@ -9430,7 +9430,7 @@ body {
   font-family: 'SourceSansProRegular';
   scrollbar-width: thin;
   scrollbar-color: #424242 #323232;
-  background-color: #242424;
+  background-color: #151515;
   touch-action: manipulation;
   min-width: 320px;
 }
@@ -9464,7 +9464,7 @@ body {
 
 .page-content-head {
   .container-fluid {
-    background-color: #2f2f2f;
+    background-color: #1c1c1c;
     margin-left: 20px;
     margin-right: 20px;
     border-top: 1px solid #191919;
@@ -9474,6 +9474,7 @@ body {
     padding: 7px 14px 5px 14px;
     -webkit-box-shadow: 0 3px 4px rgb(23, 23, 23);
     box-shadow: 0 3px 4px rgb(23, 23, 23);
+    border-radius: 0.5em 0.5em 0.5em 0.5em;
   }
 
   padding-bottom: 2px;
@@ -9512,7 +9513,7 @@ body {
 }
 
 .page-side-nav--active {
-  background: #F7F7F7;
+  background: #bac3ca;
   border-left: 3px solid #515151;
 }
 
@@ -9531,7 +9532,7 @@ body {
 .content-box {
   padding: 0px 0px;
   margin: 0px 0px;
-  background-color: #2d2d2d;
+  background-color: #1c1c1c;
   border: 1px solid #191919;
   -webkit-box-shadow: 0 3px 3px rgba(17, 17, 17, 0.8);
   box-shadow: 5px 5px 5px rgba(17, 17, 17, 0.8);
@@ -9735,7 +9736,7 @@ main.page-content.col-lg-12 {
         padding-left: 0px;
         padding-right: 0px;
         padding-top: 15px;
-        border-bottom: 2px solid #202020;
+        border-bottom: 2px solid #262626;
       }
 
       div {
@@ -9757,22 +9758,22 @@ main.page-content.col-lg-12 {
       }
 
       a.list-group-item.active-menu-title {
-        color: #FFF !important;
-        background-color: #242424 !important;
+        color: #bac3ca !important;
+        background-color: #151515 !important;
       }
     }
   }
 }
 
 a.list-group-item.active-menu-title.collapsed {
-  color: #FFF !important;
-  background-color: #242424 !important;
+  color: #dd630d !important;
+  background-color: #151515 !important;
 }
 
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > {
   a.list-group-item[aria-expanded="true"] {
     color: #dd630d !important;
-    background-color: #242424 !important;
+    background-color: #151515 !important;
   }
 
   div {
@@ -9780,18 +9781,18 @@ a.list-group-item.active-menu-title.collapsed {
       &.in {
         > a.list-group-item[aria-expanded="true"] {
           color: #dd630d !important;
-          background-color: #242424 !important;
+          background-color: #151515 !important;
         }
 
         > div.collapse.in > a.list-group-item {
           padding-left: 10px !important;
           font-size: 14px !important;
-          background-color: #2f2f2f !important;
+          background-color: #151515  !important;
           opacity: 0.98;
 
           &.menu-level-3-item.active {
             color: #dd630d !important;
-            background-color: #242424 !important;
+            background-color: #151515 !important;
           }
         }
       }
@@ -9799,7 +9800,7 @@ a.list-group-item.active-menu-title.collapsed {
       > a.list-group-item {
         padding-left: 10px !important;
         font-size: 14px !important;
-        background-color: #2f2f2f !important;
+        background-color: #151515  !important;
         opacity: 0.98;
       }
 
@@ -9824,7 +9825,7 @@ a.list-group-item.active-menu-title.collapsed {
       &.in > div.collapse.in > a.list-group-item:hover {
         text-decoration: none !important;
         color: #dd630d !important;
-        background-color: #262626 !important;
+        background-color: #151515 !important;
       }
     }
   }
@@ -9833,32 +9834,32 @@ a.list-group-item.active-menu-title.collapsed {
 a.list-group-item:focus {
   text-decoration: none !important;
   color: #dd630d !important;
-  background-color: #262626 !important;
+  background-color: #151515 !important;
 }
 
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item {
   &.active-menu-title, &:hover {
     color: #dd630d !important;
-    background-color: #262626 !important;
+    background-color: #151515 !important;
   }
 }
 
 a.list-group-item:focus {
   color: #dd630d !important;
-  background-color: #262626 !important;
+  background-color: #151515 !important;
 }
 
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div {
   &.collapse.in > a.list-group-item {
     &.collapsed:focus, &:focus {
       color: #dd630d !important;
-      background-color: #262626 !important;
+      background-color: #151515 !important;
     }
   }
 
   &.active-menu.collapse.in > a.list-group-item.active {
     color: #dd630d !important;
-    background-color: #262626 !important;
+    background-color: #151515 !important;
   }
 
   &.collapse.in {
@@ -9939,7 +9940,7 @@ button.toggle-sidebar {
     }
 
     &.active > a {
-      background: #2d2d2d !important;
+      background: #1c1c1c !important;
       outline: 0;
       border-right: 1px solid #191919;
       border-top: 1px solid #191919;
@@ -9978,7 +9979,7 @@ button.toggle-sidebar {
       background: #818180;
 
       > a {
-        color: #FFFFFF;
+        color: #bac3ca;
         font-family: 'SourceSansProSemibold';
       }
     }
@@ -10106,7 +10107,7 @@ button.toggle-sidebar {
 .active-menu-title, .active-menu a {
   text-decoration: none;
   position: relative;
-  background-color: #242424;
+  background-color: #1c1c1c;
 }
 
 .active-menu-title:before, .active-menu a:before {
@@ -10114,18 +10115,18 @@ button.toggle-sidebar {
 }
 
 .list-group-item.active-menu-title, .active-menu-title.active {
-  background-color: #242424;
+  background-color: #151515;
   color: #dd630d;
 }
 
 .active-menu a {
   &.active {
-    background-color: #242424;
+    background-color: #151515;
     color: #dd630d;
   }
 
   &:before {
-    background: #dd630d;
+    background-color: #151515;
   }
 }
 
@@ -10180,7 +10181,7 @@ button.toggle-sidebar {
 
 ::-webkit-scrollbar-thumb {
   background: #424242;
-  border: thin solid #333;
+  border: thin solid #1c1c1c;
   border-radius: 0px;
 
   &:hover {
@@ -10284,7 +10285,7 @@ label > input {
 
 #ipsec {
   #ipsec-mobile, #ipsec-tunnel, #ipsec-overview {
-    background-color: #333 !important;
+    background-color: #1c1c1c !important;
   }
 
   .ipsec-tab {
@@ -10321,14 +10322,14 @@ label > input {
 
 textarea#update_status {
   color: inherit !important;
-  background-color: #3a3a3a;
+  background-color: #222;
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
   border: none !important;
 
   &:hover {
     color: inherit !important;
-    background-color: #3a3a3a;
+    background-color: #222;
     -webkit-box-shadow: none !important;
     box-shadow: none !important;
     border: none !important;
@@ -10370,23 +10371,23 @@ textarea#update_status {
 
 div.container-fluid > {
   .fa-search::before, .fa-refresh::before {
-    color: #FFFFFF !important;
+    color: #bac3ca !important;
   }
 }
 
 .panel-heading h3:hover {
-  color: #FFFFFF;
+  color: #bac3ca;
   text-decoration: none;
 }
 
 h3 {
   &:focus {
-    color: #FFFFFF;
+    color: #bac3ca;
     text-decoration: none;
   }
 
   &:link {
-    color: #FFFFFF;
+    color: #bac3ca;
     text-decoration: underline;
   }
 
@@ -10413,7 +10414,7 @@ h3 {
 .btn-group.bootstrap-select {
   &.open, &:hover {
     border-color: #323232 !important;
-    color: #FFFFFF !important;
+    color: #bac3ca !important;
     background-color: #2d2d2d !important;
   }
 }
@@ -10524,11 +10525,11 @@ input[type="checkbox"] {
 
     &.active {
       background-color: #ac5314 !important;
-      color: #ffffff !important;
+      color: #bac3ca !important;
 
       &:hover {
         background-color: #ac5314 !important;
-        color: #ffffff !important;
+        color: #bac3ca !important;
       }
     }
 
@@ -10549,7 +10550,6 @@ input[type="checkbox"] {
     background-color: #ac5314;
   }
 
-.modal-side {
   background-color: #3a3a3a !important;
 }
 
@@ -10573,7 +10573,7 @@ h2 {
 }
 
 .alert.alert-primary.alert-output.m-t-15.m-b-0 {
-  background-color: #333 !important;
+  background-color: #1c1c1c !important;
   color: #FFF !important;
   border-color: #191919 !important;
 }
@@ -10629,7 +10629,7 @@ ul.jqtree-tree {
 }
 
 .modal-side-settings {
-  background-color: #2f2f2f !important;
+  background-color: #202020  !important;
 }
 
 [role="listbox"] {
diff --git a/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/dashboard.css b/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/dashboard.css
new file mode 100644
index 000000000..26539606f
--- /dev/null
+++ b/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/dashboard.css
@@ -0,0 +1,284 @@
+.fa-spinner {
+    font-size: 2em;
+}
+
+.grid-stack-item-content {
+  text-align: center;
+  border-style: solid;
+  border-color: rgba(25, 25, 25, 0.72);
+  border-width: 2px;
+  background-color: #1c1c1c;
+  border-radius: 0.5em 0.5em 0.5em 0.5em;
+}
+
+.widget-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 1px;
+    cursor: grab;
+}
+
+.widget-header {
+    margin-top: 0.5em;
+    margin-left: 1em;
+    margin-right: 1em;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.widget-spinner {
+    margin-top: 20px;
+}
+
+.fa-stack.small {
+    font-size: 0.5em;
+}
+
+.close-handle {
+    vertical-align: middle;
+    text-align: right;
+    cursor: pointer;
+}
+
+.close-handle > i {
+    font-size: 0.7em;
+}
+
+.panel-divider {
+    width: 100%;
+    text-align: center;
+    height: 8px;
+    margin-bottom: 10px;
+}
+
+table {
+    table-layout: fixed;
+}
+
+td {
+    word-break: break-all;
+}
+
+.line {
+    display: inline-block;
+    height: 1px;
+    width: 70%;
+    background: #d94f00;
+    margin: 5px;
+}
+
+.canvas-container {
+    position: relative;
+}
+
+.cpu-canvas-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.smoothie-container {
+    width: 100%;
+}
+
+.smoothie-chart-tooltip {
+  z-index: 1; /* necessary to force to foreground */
+  background: rgba(50, 50, 50, 0.9);
+  padding-left: 15px;
+  padding-right: 15px;
+  color: white;
+  font-size: 13px;
+  border-radius: 0.5em 0.5em 0.5em 0.5em;
+  pointer-events: none;
+}
+
+.flex-container {
+    display: flex;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+}
+
+.gateway-info {
+  margin: 5px;
+  padding: 5px;
+  font-size: 13px;
+}
+
+.gateway-detail-container {
+    display: none;
+    margin: 5px;
+}
+
+.interface-info {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    height: 100%;
+}
+
+.nowrap {
+    flex-wrap: nowrap;
+}
+
+.gateway-graph {
+    display: none;
+}
+
+.flex-container > .gateway-graph {
+    font-size: 13px;
+}
+
+.vertical-center-row {
+    height: 100%;
+    display: inline;
+}
+
+.interfaces-info {
+  margin: 5px;
+  font-size: 13px;
+}
+
+.interface-descr {
+    margin-left: 10px;
+    font-size: 15px;
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+.interfaces-detail-container {
+    margin: 5px;
+    display: none;
+}
+
+.d-flex {
+    display: flex;
+}
+
+.d-flex > .justify-content-start {
+    justify-content: start;
+}
+
+.d-flex > .justify-content-end {
+    justify-content: end;
+}
+
+#chartjs-toolip {
+    z-index: 20;
+}
+
+/* CPU widget */
+.cpu-type {
+    margin-bottom: 10px;
+    margin-top: 10px;
+}
+/* ----- */
+
+/* Custom flex table */
+div {
+    box-sizing: border-box;
+}
+
+.flextable-container {
+    display: block;
+    margin: 2em auto;
+    width: 95%;
+    max-width: 1200px;
+}
+
+.flextable-header {
+    display: flex;
+    flex-flow: row wrap;
+    transition: 0.5s;
+    padding: 0.5em 0.5em;
+    border-top: solid 1px rgba(217, 79, 0, 0.15);
+}
+
+.flextable-row {
+    display: flex;
+    flex-flow: row wrap;
+    transition: 0.5s;
+    padding: 0.5em 0.5em;
+    border-top: solid 1px rgba(255, 255, 255, 0.06);
+    align-items: center;
+}
+
+.flextable-header .flex-cell {
+    font-weight: bold;
+}
+
+.flextable-row:hover {
+    background: #242424;
+    transition: 500ms;
+}
+
+.flex-cell {
+    text-align: left;
+    word-break: break-word;
+}
+
+.column {
+    display: flex;
+    flex-flow: column wrap;
+    width: 50%;
+    padding: 0;
+}
+.column .flex-cell {
+    display: flex;
+    flex-flow: row wrap;
+    width: 100%;
+    padding: 0;
+    border: 0;
+    border-top: rgb(59, 59, 59);
+}
+.column .flex-cell:hover {
+    background: none !important;
+    transition: 500ms;
+}
+.flex-subcell {
+    width: 100%;
+    text-align: left;
+}
+
+.column .flex-cell:not(:last-child) {
+    border-bottom: none !important;
+}
+/* ----- */
+
+/* CSS grid responsive table */
+.grid-header-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+}
+
+.grid-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    background-color: #f7e2d6; /* fade-in color, transitions to transparent */
+    border-top: 1px solid #f7e2d6;
+    transition: 0.5s;
+    opacity: 0.4;
+}
+
+.grid-row:hover {
+    background: #F5F5F5 !important;
+    transition: 500ms;
+}
+
+.grid-header {
+    border-top: 1px solid #f7e2d6;
+    font-weight: bold;
+}
+
+.grid-item {
+    border: 1 px solid #ccc;
+    padding: 4px;
+    text-align: center;
+}
+/* ----- */
+
+:root {
+    --chart-js-background-color: #bac3ca;
+    --chart-js-border-color: #bac3ca;
+    --chart-js-font-color: #bac3ca;
+}
diff --git a/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/dns-overview.css b/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/dns-overview.css
index 0598d665f..299430999 100644
--- a/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/dns-overview.css
+++ b/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/dns-overview.css
@@ -81,7 +81,7 @@
 .list-group-item-border:first-child {
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
-    border-bottom: 2px solid black;
+    border-bottom: 2px solid #1c1c1c;
 }
 
 .list-group-item-border:last-child {
diff --git a/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/main.css b/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/main.css
index de7b81b29..031ea2e7d 100644
--- a/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/main.css
+++ b/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/main.css
@@ -9,11 +9,11 @@
   min-height: 25px !important; }
 
   .widgetdiv .content-box-head .btn-group .btn {
-    color: #FFFFFF !important;
+    color: #bac3ca !important;
     background: none;
     border: 0px; }
     .widgetdiv .content-box-head .btn-group .btn .glyphicon {
-      color: #FFFFFF !important; }
+      color: #bac3ca !important; }
   .widgetdiv .content-box-head .list-inline li > h3 {
     padding-top: 4px; }
 
@@ -207,8 +207,8 @@ optgroup {
 
 table {
   border-spacing: 0;
-  background-color: #373737;
-  color: #FFF;
+  background-color: #1c1c1c;
+  color: #bac3ca;
   width:100%; }
 
 td,
@@ -646,11 +646,11 @@ th {
 
 .glyphicon-chevron-up:before {
   content: "\e113";
-  color:#FFFFFF !important; }
+  color:#bac3ca !important; }
 
 .glyphicon-chevron-down:before {
   content: "\e114";
-  color:#FFFFFF !important; }
+  color:#bac3ca !important; }
 
 .glyphicon-retweet:before {
   content: "\e115"; }
@@ -925,7 +925,7 @@ body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 1.428571429;
-  color: #FFFFFF;
+  color: #bac3ca;
   background-color: none; }
 
 input,
@@ -1333,7 +1333,7 @@ pre {
   line-height: 1.428571429;
   word-break: break-all;
   word-wrap: break-word;
-  color: #FFFFFF;
+  color: #bac3ca;
   background-color: inherit;
   border: inherit;
   border-radius: 3px; }
@@ -2036,7 +2036,7 @@ th {
     padding: 10px 0px 10px 20px;
     line-height: 1.428571429;
     vertical-align: top;
-    border-top: 1px solid #2d2d2d; }
+    border-top: 1px solid #222; }
   .table > thead > tr > th {
     vertical-align: bottom;  }
   .table > caption + thead > tr:first-child > th,
@@ -2048,8 +2048,8 @@ th {
     border-top: 0;
     font-family: 'SourceSansProSemibold';
     font-weight: normal;
-    color: #FFF;
-    background-color: #292929;
+    color: #bac3ca;
+    background-color: #202020;
   }
   .table > tbody + tbody {
     border-top: 2px solid #eee; }
@@ -2079,11 +2079,11 @@ th {
 
 .table-striped > tbody > tr:nth-child(odd) > td,
 .table-striped > tbody > tr:nth-child(odd) > th {
-  background-color: #333; }
+  background-color: #1c1c1c; }
 
 .table-hover > tbody > tr:hover > td,
 .table-hover > tbody > tr:hover > th {
-  background-color:#464646; }
+  background-color:#222; }
 
 table col[class*="col-"] {
   position: static;
@@ -2274,7 +2274,7 @@ output {
   padding-top: 7px;
   font-size: 14px;
   line-height: 1.428571429;
-  color: #FFFFFF; }
+  color: #bac3ca; }
 
 input:-internal-autofill-previewed,
 input:-internal-autofill-selected,
@@ -2285,7 +2285,7 @@ select:-internal-autofill-selected {
     background-color: #262626 !important;
     border: 1px solid #5a5a5a !important;
     background-image: none !important;
-    color: #FFFFFF !important; }
+    color: #bac3ca !important; }
 
 select,
 textarea,
@@ -2310,8 +2310,8 @@ input[type="color"]
   padding: 6px 12px;
   font-size: 14px;
   line-height: 1.428571429;
-  color: #FFF;
-  background-color: #2d2d2d;
+  color: #bac3ca;
+  background-color: #222;
   background-image: none;
   border: 1px solid #191919;
   border-radius: 3px;
@@ -2339,7 +2339,7 @@ input[type="color"]
   input[type="color"]:hover
    {
 	color: #FFF;
-	background-color: #292929;
+	background-color: #151515;
   border: 1px solid #dd630d;
 	outline: 0; }
 
@@ -2362,7 +2362,7 @@ input[type="color"]
   {
   color: #FFF;
 	border: 1px solid #dd630d;
-	background-color: #232323;
+	background-color: #151515;
 	outline: 0; }
 
   select::-moz-placeholder,
@@ -2901,12 +2901,12 @@ select[multiple].input-lg,
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  color: #FFFFFF;
-  background-color: #292929;
+  color: #bac3ca;
+  background-color: #222;
   border: 1px solid #191919;
   outline:0; }
   .open > .btn.dropdown-toggle {
-  color: #ffffff;
+  color: #bac3ca;
   }
   .btn:active, .btn.active {
   color: #dd630d;
@@ -2929,7 +2929,7 @@ select[multiple].input-lg,
 	outline:0; }
 
   .btn .badge {
-    color: #FFFFFF;
+    color: #bac3ca;
     background-color: #3a3a3a; }
   .btn:focus, .btn:active:focus, .btn.active:focus {
     outline: thin dotted;
@@ -2961,11 +2961,11 @@ select[multiple].input-lg,
 	outline:0; }
 
   .btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled]:active, .btn-default[disabled].active, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active {
-    background-color: #FFFFFF;
+    background-color: #bac3ca;
     border-color: 1px solid #1d1d1d;
 	outline:0; }
   .btn-default .badge {
-    color: #FFFFFF;
+    color: #bac3ca;
     background-color: #3a3a3a;
 	outline:0; }
 
@@ -3205,13 +3205,13 @@ tbody.collapse.in {
     clear: both;
     font-weight: normal;
     line-height: 1.428571429;
-    color: #FFFFFF;
+    color: #bac3ca;
     white-space: nowrap;
 	outline:0;}
 
 .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
   text-decoration: none;
-  color: #FFFFFF;
+  color: #bac3ca;
   background-color: #dd630d; }
 
 .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
@@ -3356,7 +3356,7 @@ tbody.collapse.in {
 
 .btn-group .dropdown-toggle:active, .btn-group .dropdown-toggle:hover, .btn-group.open .dropdown-toggle {
   outline: 0;
-  color: #FFFFFF;
+  color: #bac3ca;
   background-color: #dd630d;
   border: 1px solid #191919; }
 
@@ -3562,8 +3562,8 @@ tbody.collapse.in {
       position: relative;
       display: block;
       padding: 10px 15px;
-	  background-color: #3a3a3a;
-	  color:#fff;
+	  background-color: #222;
+	  color:#bac3ca;
 	  border-left: 1px solid #191919;
 	  border-right: 1px solid #191919;
 	  border-top: 1px solid #191919;
@@ -3577,7 +3577,7 @@ tbody.collapse.in {
 	  border:none; }
       .nav > li > a:hover, .nav > li > a:focus {
         text-decoration: none;
-        background-color: #2d2d2d;
+        background-color: #1c1c1c;
 		color:#dd630d;
 		 }
 		.nav > li#menu_messages > a:hover, a:focus {
@@ -3592,7 +3592,7 @@ tbody.collapse.in {
         cursor: not-allowed; }
 
   .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
-    background-color: #333;
+    background-color: #1c1c1c;
 	cursor:pointer; }
 
   .nav .nav-divider {
@@ -3939,14 +3939,14 @@ tbody.collapse.in {
         margin-right: 0; } }
 
 .navbar-default .navbar-brand {
-    color: #F7F7F7; }
+    color: #bac3ca; }
     .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
       color: #dedede;
       background-color: transparent; }
   .navbar-default .navbar-text {
-    color: #F7F7F7; }
+    color: #bac3ca; }
   .navbar-default .navbar-nav > li > a {
-    color: #F7F7F7; }
+    color: #bac3ca; }
     .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
       color: #515151;
       background-color: transparent; }
@@ -3968,7 +3968,7 @@ tbody.collapse.in {
     color: #555; }
   @media (max-width: 767px) {
     .navbar-default .navbar-nav .open .dropdown-menu > li > a {
-      color: #F7F7F7; }
+      color: #bac3ca; }
       .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
         color: #515151;
         background-color: transparent; }
@@ -3980,11 +3980,11 @@ tbody.collapse.in {
       color: #ccc;
       background-color: transparent; } }
   .navbar-default .navbar-link {
-    color: #F7F7F7; }
+    color: #bac3ca; }
     .navbar-default .navbar-link:hover {
       color: #515151; }
   .navbar-default .btn-link {
-    color: #F7F7F7; }
+    color: #bac3ca; }
     .navbar-default .btn-link:hover, .navbar-default .btn-link:focus {
       color: #515151; }
     .navbar-default .btn-link[disabled]:hover, .navbar-default .btn-link[disabled]:focus, fieldset[disabled] .navbar-default .btn-link:hover, fieldset[disabled] .navbar-default .btn-link:focus {
@@ -4086,7 +4086,7 @@ tbody.collapse.in {
       padding: 6px 12px;
       line-height: 1.428571429;
       text-decoration: none;
-      color: #FFFFFF;
+      color: #bac3ca;
       background-color: #505050;
       border: 1px solid #191919;
       margin-left: -1px;
@@ -4104,7 +4104,7 @@ tbody.collapse.in {
   .pagination > li > a:hover, .pagination > li > a:focus,
   .pagination > li > span:hover,
   .pagination > li > span:focus {
-    color: #FFFFFF;
+    color: #bac3ca;
     background-color: #dd630d;
     border-color: #303030; }
 
@@ -4113,7 +4113,7 @@ tbody.collapse.in {
   .pagination > .active > span:hover,
   .pagination > .active > span:focus {
     z-index: 2;
-    color: #FFFFFF;
+    color: #bac3ca;
     background-color: #dd630d;
     border: 1px solid #191919;
     cursor: default; }
@@ -4381,7 +4381,7 @@ a.thumbnail.active {
 .alert-success {
 	background-color: #424242;
 	border-color: #515151;
-  color: #ffffff; }
+  color: #bac3ca; }
 
   .alert-success hr {
     border-top-color: #8dcc62; }
@@ -4389,9 +4389,9 @@ a.thumbnail.active {
     color: #72bd3e; }
 
 .alert-info {
-  background-color: #2f2f2f;
+  background-color: #202020 ;
   border-color: #191919;
-  color: #ffffff;
+  color: #bac3ca;
   -webkit-box-shadow: 5px 5px 5px rgba(17, 17, 17, 0.8);
   box-shadow: 5px 5px 5px rgba(17, 17, 17, 0.8); }
   .alert-info hr {
@@ -4411,7 +4411,7 @@ a.thumbnail.active {
 .alert-danger {
   background-color: #202020;
   border-color: #B13116;
-  color: #FFFFFF !important;}
+  color: #bac3ca !important;}
   .alert-danger hr {
     border-top-color: #B13116; }
   .alert-danger .alert-link {
@@ -4494,7 +4494,7 @@ a.thumbnail.active {
 
 .progress-bar-warning {
   background-color: #CCB717;
-  color: #FFFFFF !important; }
+  color: #bac3ca !important; }
   .progress-striped .progress-bar-warning {
     background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
     background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@@ -4543,7 +4543,7 @@ a.thumbnail.active {
   display: block;
   padding: 6px 8px;
   margin-bottom: -1px;
-  background-color: #2f2f2f; }
+  background-color: #202020 ; }
   .list-group-item:last-child {
     margin-bottom: 0; }
   .list-group-item > .badge {
@@ -4552,7 +4552,7 @@ a.thumbnail.active {
     margin-right: 5px; }
 
 a.list-group-item {
-  color: #FFFFFF;
+  color: #bac3ca;
   border-radius: 0;
   outline:0; }
 
@@ -4561,10 +4561,10 @@ a.list-group-item {
   a.list-group-item:hover, a.list-group-item:focus {
     text-decoration: none;
     color: #dd630d;
-    background-color: #242424; }
+    background-color: #151515; }
 
     a.list-group-item:hover:before, a.list-group-item:focus:before {
-      background: #FFFFFF;
+      background: #bac3ca;
       content: "";
       height: 42px;
       left: 0;
@@ -4987,7 +4987,7 @@ a.list-group-item-danger {
   font-size: 21px;
   font-weight: bold;
   line-height: 1;
-  color: #FFFFFF;
+  color: #bac3ca;
   text-shadow: 0 1px 0 #000;
   opacity: 1;
   filter: alpha(opacity=100); }
@@ -5093,7 +5093,7 @@ button.close {
 .modal-footer {
   padding: 5px;
   text-align: right;
-  background-color: #383838;
+  background-color: #242424;
   border-top: 1px solid inherit; }
   .modal-footer:before, .modal-footer:after {
     content: " ";
@@ -5510,7 +5510,7 @@ button.close {
 
 .show {
   display: block !important;
-  color: #22C400; }
+  color: #FFF; }
 
 .invisible {
   visibility: hidden; }
@@ -5712,7 +5712,7 @@ html, body {
   font-family: 'SourceSansProRegular';
   scrollbar-width: thin;
   scrollbar-color: #424242 #323232;
-  background-color: #242424;
+  background-color: #151515;
 }
 
 body {
@@ -5741,7 +5741,7 @@ body {
   .page-content > .row {
     height: 100%; }
 .page-content-head .container-fluid {
-  background-color: #2f2f2f;
+  background-color: #1c1c1c;
   margin-left: 20px;
   margin-right: 20px;
   border-top: 1px solid #191919;
@@ -5750,7 +5750,8 @@ body {
   height: auto;
   padding: 7px 14px 5px 14px;
   -webkit-box-shadow: 0 3px 4px rgb(23, 23, 23);
-  box-shadow: 0 3px 4px rgb(23, 23, 23); }
+  box-shadow: 0 3px 4px rgb(23, 23, 23); 
+  border-radius: 0.5em 0.5em 0.5em 0.5em; }
 .page-content-head, .content-box-head {
   padding-bottom: 2px;
   padding-top: 10px; }
@@ -5776,7 +5777,7 @@ body {
   z-index: 3; }
 
 .page-side-nav--active {
-  background: #F7F7F7;
+  background: #bac3ca;
   border-left: 3px solid #515151; }
 
 .page-foot {
@@ -5794,7 +5795,7 @@ body {
 .content-box {
   padding: 0px 0px;
   margin: 0px 0px;
-  background-color: #2d2d2d;
+  background-color: #1c1c1c;
   border: 1px solid #191919;
   -webkit-box-shadow: 0 3px 3px rgba(17, 17, 17, 0.8);
   box-shadow: 5px 5px 5px rgba(17, 17, 17, 0.8)  }
@@ -5946,7 +5947,7 @@ main.page-content.col-lg-12 {
   padding-left: 0px;
   padding-right: 0px;
   padding-top:15px;
-  border-bottom:2px solid #202020;
+  border-bottom:2px solid #262626;
 }
 
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapsing > a.list-group-item {
@@ -5966,27 +5967,27 @@ main.page-content.col-lg-12 {
 }
 
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > a.list-group-item.active-menu-title, a.list-group-item.active-menu-title.collapsed {
-  color: #FFF !important;
-  background-color: #242424 !important;
+  color: #dd630d !important;
+  background-color: #151515 !important;
 }
 
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > a.list-group-item[aria-expanded="true"],
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item[aria-expanded="true"] {
   color: #dd630d !important;
-  background-color: #242424 !important;
+  background-color: #151515 !important;
 }
 
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse > a.list-group-item,
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapse.in > a.list-group-item {
   padding-left: 10px !important;
   font-size: 14px !important;
-  background-color: #2f2f2f !important;
+  background-color: #151515  !important;
   opacity: 0.98;
 }
 
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapse.in > a.list-group-item.menu-level-3-item.active {
   color: #dd630d !important;
-  background-color: #242424 !important;
+  background-color: #151515 !important;
 }
 
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse > div.collapse > a.list-group-item,
@@ -6003,7 +6004,7 @@ main.page-content.col-lg-12 {
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapse.in > a.list-group-item:hover, a.list-group-item:focus {
   text-decoration: none !important;
   color: #dd630d !important;
-  background-color: #262626 !important;
+  background-color: #151515 !important;
 }
 
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item.active-menu-title,
@@ -6012,7 +6013,7 @@ main.page-content.col-lg-12 {
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item:focus,
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.active-menu.collapse.in >a.list-group-item.active {
   color: #dd630d !important;
-  background-color: #262626 !important;
+  background-color: #151515 !important;
 }
 
 /* Sub Level One */
@@ -6087,7 +6088,7 @@ button.toggle-sidebar {
   outline:0; }
 
 .nav-tabs > li.active > a {
-  background: #2d2d2d !important;
+  background: #1c1c1c !important;
   outline:0; }
 
 .nav-tabs > li.active > a,
@@ -6116,7 +6117,7 @@ button.toggle-sidebar {
     border-radius: 0px;
     background: #818180; }
     .nav-tabs.nav-justified > li > a {
-      color: #FFFFFF;
+      color: #bac3ca;
       font-family: 'SourceSansProSemibold'; }
       @media (min-width: 768px) {
         .nav-tabs.nav-justified > li > a {
@@ -6203,15 +6204,15 @@ button.toggle-sidebar {
 .active-menu-title, .active-menu a {
   text-decoration: none;
   position: relative;
-  background-color: #242424; }
+  background-color: #1c1c1c; }
   .active-menu-title:before, .active-menu a:before {
     width: 3px; }
   .list-group-item.active-menu-title, .active-menu-title.active, .active-menu a.active {
-    background-color: #242424;
+    background-color: #151515;
     color: #dd630d; }
 
 .active-menu a:before {
-  background: #dd630d; }
+  background-color: #151515; }
 
 .alert.alert-danger {
   color: #FFF !important; }
@@ -6255,7 +6256,7 @@ button.toggle-sidebar {
 
 ::-webkit-scrollbar-thumb {
   background: #424242;
-  border: thin solid #333;
+  border: thin solid #1c1c1c;
   border-radius: 0px; }
 
 ::-webkit-scrollbar-thumb:hover {
@@ -6327,7 +6328,7 @@ label > input[type="radio"] {
 }
 
 #ipsec #ipsec-mobile, #ipsec #ipsec-tunnel, #ipsec #ipsec-overview {
-	background-color: #333 !important;
+	background-color: #1c1c1c !important;
 }
 
 #ipsec .ipsec-tab {
@@ -6362,7 +6363,7 @@ label > input[type="radio"] {
 
 textarea#update_status, textarea#update_status:hover {
   color:inherit !important;
-  background-color: #3a3a3a;
+  background-color: #222;
   -webkit-box-shadow:none !important;
   box-shadow:none !important;
   border:none !important;
@@ -6403,16 +6404,16 @@ textarea#update_status, textarea#update_status:hover {
 }
 
 div.container-fluid > .fa-search::before, div.container-fluid  > .fa-refresh::before {
-  color: #FFFFFF !important;
+  color: #bac3ca !important;
 }
 
 .panel-heading h3:hover, h3:focus {
-  color: #FFFFFF;
+  color: #bac3ca;
   text-decoration: none;
 }
 
 h3:link {
-  color:#FFFFFF;
+  color:#bac3ca;
   text-decoration: underline;
 }
 
@@ -6443,7 +6444,7 @@ h3:hover, h3:focus {
 
 .btn-group.bootstrap-select.open, .btn-group.bootstrap-select:hover {
   border-color: #323232 !important;
-  color:#FFFFFF !important;
+  color:#bac3ca !important;
   background-color: #2d2d2d !important;
 }
 
@@ -6511,7 +6512,7 @@ input[type="checkbox"].checkbox-switch:checked + i::before, input[type="checkbox
 
 .bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover {
     background-color: #ac5314 !important;
-    color: #ffffff !important;
+    color: #bac3ca !important;
 }
 
 .bootstrap-datetimepicker-widget table td span:hover {
@@ -6550,7 +6551,7 @@ h2.text-center ,h2.text-primary {
 }
 
 .alert.alert-primary.alert-output.m-t-15.m-b-0 {
-  background-color: #333 !important;
+  background-color: #1c1c1c !important;
   color: #FFF !important;
   border-color: #191919 !important;
 }
@@ -6604,7 +6605,7 @@ ul.jqtree-tree .jqtree-title {
 }
 
 .modal-side-settings {
-  background-color: #2f2f2f !important;
+  background-color: #202020  !important;
 }
 
 [role="listbox"] {
diff --git a/misc/theme-vicuna/Makefile b/misc/theme-vicuna/Makefile
index 967d22e13..ff3fc9687 100644
--- a/misc/theme-vicuna/Makefile
+++ b/misc/theme-vicuna/Makefile
@@ -1,5 +1,5 @@
 PLUGIN_NAME=		theme-vicuna
-PLUGIN_VERSION=		1.45
+PLUGIN_VERSION=		1.46
 PLUGIN_REVISION=	1
 PLUGIN_COMMENT=		The vicuna theme - blue sapphire
 PLUGIN_MAINTAINER=	rene@team-rebellion.net
diff --git a/misc/theme-vicuna/src/opnsense/www/themes/vicuna/assets/stylesheets/dashboard.scss b/misc/theme-vicuna/src/opnsense/www/themes/vicuna/assets/stylesheets/dashboard.scss
new file mode 100644
index 000000000..d5e45c9bc
--- /dev/null
+++ b/misc/theme-vicuna/src/opnsense/www/themes/vicuna/assets/stylesheets/dashboard.scss
@@ -0,0 +1,299 @@
+.fa-spinner {
+  font-size: 2em;
+}
+
+.grid-stack-item-content {
+  text-align: center;
+  border-style: solid;
+  border-color: rgba(25, 25, 25, 0.72);
+  border-width: 2px;
+  background-color: #1a262d;
+  border-radius: 0.5em 0.5em 0.5em 0.5em;
+}
+
+.widget-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 1px;
+  cursor: grab;
+}
+
+.widget-header {
+  margin-top: 0.5em;
+  margin-left: 1em;
+  margin-right: 1em;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.widget-spinner {
+  margin-top: 20px;
+}
+
+.fa-stack.small {
+  font-size: 0.5em;
+}
+
+.close-handle {
+  vertical-align: middle;
+  text-align: right;
+  cursor: pointer;
+
+  > i {
+    font-size: 0.7em;
+  }
+}
+
+.panel-divider {
+  width: 100%;
+  text-align: center;
+  height: 8px;
+  margin-bottom: 10px;
+}
+
+table {
+  table-layout: fixed;
+}
+
+td {
+  word-break: break-all;
+}
+
+.line {
+  display: inline-block;
+  height: 1px;
+  width: 70%;
+  background: #d94f00;
+  margin: 5px;
+}
+
+.canvas-container {
+  position: relative;
+}
+
+.cpu-canvas-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.smoothie-container {
+  width: 100%;
+}
+
+.smoothie-chart-tooltip {
+  z-index: 1;
+
+  /* necessary to force to foreground */
+  background: rgba(50, 50, 50, 0.9);
+  padding-left: 15px;
+  padding-right: 15px;
+  color: white;
+  font-size: 13px;
+  border-radius: 0.5em 0.5em 0.5em 0.5em;
+  pointer-events: none;
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
+.gateway-info {
+  margin: 5px;
+  padding: 5px;
+  font-size: 13px;
+}
+
+.gateway-detail-container {
+  display: none;
+  margin: 5px;
+}
+
+.interface-info {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  height: 100%;
+}
+
+.nowrap {
+  flex-wrap: nowrap;
+}
+
+.gateway-graph {
+  display: none;
+}
+
+.flex-container > .gateway-graph {
+  font-size: 13px;
+}
+
+.vertical-center-row {
+  height: 100%;
+  display: inline;
+}
+
+.interfaces-info {
+  margin: 5px;
+  font-size: 13px;
+}
+
+.interface-descr {
+  margin-left: 10px;
+  font-size: 15px;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.interfaces-detail-container {
+  margin: 5px;
+  display: none;
+}
+
+.d-flex {
+  display: flex;
+
+  > {
+    .justify-content-start {
+      justify-content: start;
+    }
+
+    .justify-content-end {
+      justify-content: end;
+    }
+  }
+}
+
+#chartjs-toolip {
+  z-index: 20;
+}
+
+/* CPU widget */
+
+.cpu-type {
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
+/* ----- */
+
+/* Custom flex table */
+
+div {
+  box-sizing: border-box;
+}
+
+.flextable-container {
+  display: block;
+  margin: 2em auto;
+  width: 95%;
+  max-width: 1200px;
+}
+
+.flextable-header {
+  display: flex;
+  flex-flow: row wrap;
+  transition: 0.5s;
+  padding: 0.5em 0.5em;
+  border-top: solid 1px rgba(217, 79, 0, 0.15);
+}
+
+.flextable-row {
+  display: flex;
+  flex-flow: row wrap;
+  transition: 0.5s;
+  padding: 0.5em 0.5em;
+  border-top: solid 1px rgba(255, 255, 255, 0.06);
+  align-items: center;
+}
+
+.flextable-header .flex-cell {
+  font-weight: bold;
+}
+
+.flextable-row:hover {
+  background: #131c22;
+  transition: 500ms;
+}
+
+.flex-cell {
+  text-align: left;
+  word-break: break-word;
+}
+
+.column {
+  display: flex;
+  flex-flow: column wrap;
+  width: 50%;
+  padding: 0;
+
+  .flex-cell {
+    display: flex;
+    flex-flow: row wrap;
+    width: 100%;
+    padding: 0;
+    border: 0;
+    border-top: rgb(59, 59, 59);
+
+    &:hover {
+      background: none !important;
+      transition: 500ms;
+    }
+  }
+}
+
+.flex-subcell {
+  width: 100%;
+  text-align: left;
+}
+
+.column .flex-cell:not(:last-child) {
+  border-bottom: none !important;
+}
+
+/* ----- */
+
+/* CSS grid responsive table */
+
+.grid-header-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+}
+
+.grid-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  background-color: #f7e2d6;
+
+  /* fade-in color, transitions to transparent */
+  border-top: 1px solid #f7e2d6;
+  transition: 0.5s;
+  opacity: 0.4;
+
+  &:hover {
+    background: #F5F5F5 !important;
+    transition: 500ms;
+  }
+}
+
+.grid-header {
+  border-top: 1px solid #f7e2d6;
+  font-weight: bold;
+}
+
+.grid-item {
+  border: 1 px solid #ccc;
+  padding: 4px;
+  text-align: center;
+}
+
+/* ----- */
+
+:root {
+  --chart-js-background-color:#bac3ca;
+  --chart-js-border-color:#bac3ca;
+  --chart-js-font-color:#bac3ca;
+}
diff --git a/misc/theme-vicuna/src/opnsense/www/themes/vicuna/assets/stylesheets/dns-overview.scss b/misc/theme-vicuna/src/opnsense/www/themes/vicuna/assets/stylesheets/dns-overview.scss
new file mode 100644
index 000000000..486bcac04
--- /dev/null
+++ b/misc/theme-vicuna/src/opnsense/www/themes/vicuna/assets/stylesheets/dns-overview.scss
@@ -0,0 +1,173 @@
+.tab-content {
+  padding: 10px;
+  border-top: 1px solid #191919;
+}
+
+.banner {
+  width: 25%;
+}
+
+.stats-element {
+  height: 5em;
+  background: #172229;
+  overflow: hidden;
+  display: flex;
+  justify-content: flex-start;
+  border-radius: .3em;
+  margin: auto;
+  border: 1px solid rgb(19, 19, 19);
+}
+
+.stats-icon {
+  height: auto;
+  width: 50%;
+  object-fit: cover;
+  background: #131c22;
+  border-radius: 0 2em 2em 0 / 0 3em 3em 0;
+  box-shadow: 3px 5px 1px 3px rgb(15, 24, 30);
+}
+
+.large-icon {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 2em;
+}
+
+.stats-text {
+  height: 5em;
+  width: 15em;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.stats-counter-text, .stats-inner-text {
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  font-size: 15px;
+}
+
+#bannersub {
+  text-align: center;
+  margin: 5px;
+}
+
+.list-group-wrapper {
+  margin: 0px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.list-item-domain {
+  height: 2.5em;
+}
+
+.list-group-item-border {
+  border: 1px solid #191919;
+
+  &:first-child {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border-bottom: 2px solid black;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+}
+
+.btn.pull-right {
+  margin-left: 3px;
+}
+
+.odd-bg {
+  background: #f7f7f7;
+}
+
+.top-item {
+  display: flex;
+  white-space: nowrap;
+}
+
+.group-p {
+  overflow: hidden;
+  height: 20px;
+  margin-right: 5px;
+  text-overflow: ellipsis;
+}
+
+.counter {
+  position: relative;
+  top: -3px;
+  color: #888;
+  font-size: 14px;
+  line-height: 1.4;
+  flex: 1;
+  text-align: right;
+}
+
+.vertical-center {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+#maintabs > li > a {
+  border: 1px solid #191919;
+}
+
+.query-success {
+  background-color: rgba(5, 142, 73, 0.3);
+}
+
+.query-info {
+  background-color: rgba(255, 227, 0, 0.3);
+}
+
+.query-danger {
+  background-color: rgba(235, 9, 9, 0.3);
+}
+
+.query-warning {
+  background-color: rgba(255, 131, 0, 0.3);
+}
+
+.query-error {
+  background-color: #502e62;
+}
+
+#searchFilter {
+  display: inline-block;
+  margin: 0 20px 0 0;
+  vertical-align: middle;
+}
+
+.tag {
+  font-size: 14px;
+  padding: .3em .4em .4em;
+  margin: 0 .1em;
+
+  a {
+    color: #bbb;
+    cursor: pointer;
+    opacity: 0.9;
+    margin: 0 0 0 .3em;
+
+    fa-times {
+      color: #fff;
+      margin-bottom: 2px;
+    }
+  }
+}
+
+.tooltip-inner {
+  max-width: 1000px !important;
+}
diff --git a/misc/theme-vicuna/src/opnsense/www/themes/vicuna/assets/stylesheets/main.scss b/misc/theme-vicuna/src/opnsense/www/themes/vicuna/assets/stylesheets/main.scss
index d8ca6cd05..8d0bb9bf8 100644
--- a/misc/theme-vicuna/src/opnsense/www/themes/vicuna/assets/stylesheets/main.scss
+++ b/misc/theme-vicuna/src/opnsense/www/themes/vicuna/assets/stylesheets/main.scss
@@ -10,12 +10,12 @@
   min-height: 25px !important;
 
   .btn-group .btn {
-    color: #FFFFFF !important;
+    color: #bac3ca !important;
     background: none;
     border: 0px;
 
     .glyphicon {
-      color: #FFFFFF !important;
+      color: #bac3ca !important;
     }
   }
 
@@ -70,7 +70,7 @@ audio:not([controls]) {
 }
 
 a {
-  color: #D77610;
+  color: #d77610;
   text-decoration: none;
   background: transparent;
   outline: 0;
@@ -80,7 +80,7 @@ a {
   }
 
   &:hover, &:focus {
-    color: #D77610;
+    color: #bac3ca;
     text-decoration: underline;
   }
 }
@@ -246,8 +246,8 @@ optgroup {
 table {
   border-collapse: none;
   border-spacing: 0;
-  color: #FFF;
-  background-color: #1a262d;
+  color: #bac3ca;
+  background-color: #162026;
   width: 100%;
 }
 
@@ -313,7 +313,7 @@ td, th {
   }
 
   select {
-    background: #fff !important;
+    background: #bac3ca !important;
   }
 
   .navbar {
@@ -322,7 +322,7 @@ td, th {
 
   .table {
     td, th {
-      background-color: #fff !important;
+      background-color: #bac3ca !important;
     }
   }
 
@@ -401,7 +401,7 @@ td, th {
 
 .icon.glyphicon.input-group-addon.glyphicon-search:before, .glyphicon-search:before {
   content: "\e003";
-  color: #FFF !important;
+  color: #bac3ca !important;
 }
 
 .glyphicon-heart:before {
@@ -1190,7 +1190,7 @@ body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 1.428571429;
-  color: #FFF;
+  color: #bac3ca;
 }
 
 input, button, select, textarea {
@@ -1221,7 +1221,7 @@ img {
 .img-thumbnail {
   padding: 4px;
   line-height: 1.428571429;
-  background-color: #fff;
+  background-color: #bac3ca;
   border: 1px solid #ddd;
   border-radius: 3px;
   -webkit-transition: all 0.2s ease-in-out;
@@ -1584,7 +1584,7 @@ a.text-danger:hover {
 }
 
 .bg-primary {
-  color: #fff;
+  color: #bac3ca;
   background-color: #D77610;
 }
 
@@ -1805,7 +1805,7 @@ code {
 kbd {
   padding: 2px 4px;
   font-size: 90%;
-  color: #fff;
+  color: #bac3ca;
   background-color: #191919;
   border-radius: 3px;
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
@@ -1825,7 +1825,7 @@ pre {
   line-height: 1.428571429;
   word-break: break-all;
   word-wrap: break-word;
-  color: #FFF;
+  color: #bac3ca;
   background-color: inherit;
   border: inherit;
   border-radius: 3px;
@@ -2757,7 +2757,7 @@ th {
         padding: 10px 0px 10px 20px;
         line-height: 1.428571429;
         vertical-align: top;
-        border-top: 1px solid #191919;
+        border-top: 1px solid #1a262d;
       }
     }
 
@@ -2766,7 +2766,7 @@ th {
         padding: 10px 0px 10px 20px;
         line-height: 1.428571429;
         vertical-align: top;
-        border-top: 1px solid #191919;
+        border-top: 1px solid #1a262d;
       }
     }
 
@@ -2775,7 +2775,7 @@ th {
         padding: 10px 0px 10px 20px;
         line-height: 1.428571429;
         vertical-align: top;
-        border-top: 1px solid #191919;
+        border-top: 1px solid #1a262d;
       }
     }
 
@@ -2789,7 +2789,7 @@ th {
         font-family: 'SourceSansProSemibold';
         font-weight: normal;
         border-bottom: 1px solid #191919;
-        background-color: #202f3a;
+        background-color: #172229;
       }
     }
 
@@ -2799,7 +2799,7 @@ th {
         font-family: 'SourceSansProSemibold';
         font-weight: normal;
         border-bottom: 1px solid #191919;
-        background-color: #202f3a;
+        background-color: #172229;
       }
     }
 
@@ -2809,7 +2809,7 @@ th {
         font-family: 'SourceSansProSemibold';
         font-weight: normal;
         border-bottom: 1px solid #191919;
-        background-color: #202f3a;
+        background-color: #172229;
       }
     }
 
@@ -2875,13 +2875,13 @@ th {
 
 .table-striped > tbody > tr:nth-child(odd) > {
   td, th {
-    background-color: #1c2931;
+    background-color: #162026;
   }
 }
 
 .table-hover > tbody > tr:hover > {
   td, th {
-    background-color: #283b48;
+    background-color: #19262d;
   }
 }
 
@@ -3350,8 +3350,8 @@ select, textarea {
   padding: 6px 12px;
   font-size: 14px;
   line-height: 1.428571429;
-  color: #FFF;
-  background-color: #21303a;
+  color: #bac3ca;
+  background-color: #1b272f;
   border: 1px solid #191919;
   border-radius: 3px;
   text-overflow: ellipsis;
@@ -3369,8 +3369,8 @@ input {
     padding: 6px 12px;
     font-size: 14px;
     line-height: 1.428571429;
-    color: #FFF;
-    background-color: #21303a;
+    color: #bac3ca;
+    background-color: #1b272f;
     border: 1px solid #191919;
     border-radius: 3px;
     text-overflow: ellipsis;
@@ -3382,32 +3382,32 @@ input {
 }
 
 select:hover, textarea:hover {
-  color: #FFF;
-  background-color: #172229;
+  color: #bac3ca;
+  background-color: #0f181e;
   border-color: #D77610;
   outline: 0;
 }
 
 input {
   &[type="text"]:hover, &[type="password"]:hover, &[type="datetime"]:hover, &[type="datetime-local"]:hover, &[type="date"]:hover, &[type="month"]:hover, &[type="time"]:hover, &[type="week"]:hover, &[type="number"]:hover, &[type="email"]:hover, &[type="url"]:hover, &[type="search"]:hover, &[type="tel"]:hover, &[type="color"]:hover {
-    color: #FFF;
-    background-color: #172229;
+    color: #bac3ca;
+    background-color: #0f181e;
     border-color: #D77610;
     outline: 0;
   }
 }
 
 select:focus, textarea:focus {
-  color: #FFF;
-  background-color: #172229;
+  color: #bac3ca;
+  background-color: #0f181e;
   border-color: #D77610;
   outline: 0;
 }
 
 input {
   &[type="text"]:focus, &[type="password"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="date"]:focus, &[type="month"]:focus, &[type="time"]:focus, &[type="week"]:focus, &[type="number"]:focus, &[type="email"]:focus, &[type="url"]:focus, &[type="search"]:focus, &[type="tel"]:focus, &[type="color"]:focus {
-    color: #FFF;
-    background-color: #172229;
+    color: #bac3ca;
+    background-color: #0f181e;
     border-color: #D77610;
     outline: 0;
   }
@@ -4779,13 +4779,13 @@ select[multiple].input-lg, .form-horizontal .form-group-lg select[multiple].form
   border-radius: 3px;
   -ms-user-select: none;
   user-select: none;
-  color: #FFFFFF;
-  background-color: #21303a;
+  color: #bac3ca;
+  background-color: #1b272f;
   border: 1px solid #191919;
   outline: 0;
 
   &:active, &.active {
-    color: #FFF;
+    color: #bac3ca;
     background-color: #21303a;
     outline: 0;
     border-color: #191919;
@@ -4794,7 +4794,7 @@ select[multiple].input-lg, .form-horizontal .form-group-lg select[multiple].form
 }
 
 .open > .btn.dropdown-toggle {
-  color: #FFF;
+  color: #bac3ca;
   background-color: #21303a;
   outline: 0;
   border-color: #191919;
@@ -4804,7 +4804,7 @@ select[multiple].input-lg, .form-horizontal .form-group-lg select[multiple].form
 .btn {
   &:hover, &:focus {
     background-color: #d77610;
-    color: #FFF;
+    color: #bac3ca;
     border-radius: 3px;
     border: 1px solid #191919;
     text-decoration: none;
@@ -4861,7 +4861,7 @@ fieldset[disabled] .btn {
 
 .btn {
   .badge {
-    color: #FFFFFF;
+    color: #bac3ca;
     background-color: #3e3e3e;
   }
 
@@ -4897,7 +4897,7 @@ fieldset[disabled] .btn {
 
 .act_flush {
   &:hover, &:focus {
-    color: #FFF;
+    color: #bac3ca;
     background-color: #d77610;
     border-color: 1px solid #191919;
     outline: 0;
@@ -4918,24 +4918,24 @@ fieldset[disabled] .btn {
 
 .btn-default {
   &.disabled {
-    background-color: #FFFFFF;
+    background-color: #bac3ca;
     border-color: 1px solid #191919;
     outline: 0;
 
     &:hover, &:focus, &:active, &.active {
-      background-color: #FFFFFF;
+      background-color: #bac3ca;
       border-color: 1px solid #191919;
       outline: 0;
     }
   }
 
   &[disabled] {
-    background-color: #FFFFFF;
+    background-color: #bac3ca;
     border-color: 1px solid #191919;
     outline: 0;
 
     &:hover, &:focus, &:active, &.active {
-      background-color: #FFFFFF;
+      background-color: #bac3ca;
       border-color: 1px solid #191919;
       outline: 0;
     }
@@ -4943,19 +4943,19 @@ fieldset[disabled] .btn {
 }
 
 fieldset[disabled] .btn-default {
-  background-color: #FFFFFF;
+  background-color: #bac3ca;
   border-color: 1px solid #191919;
   outline: 0;
 
   &:hover, &:focus, &:active, &.active {
-    background-color: #FFFFFF;
+    background-color: #bac3ca;
     border-color: 1px solid #191919;
     outline: 0;
   }
 }
 
 .btn-default .badge {
-  color: #FFFFFF;
+  color: #bac3ca;
   background-color: #3e3e3e;
   outline: 0;
 }
@@ -4967,7 +4967,7 @@ fieldset[disabled] .btn-default {
   outline: 0;
 
   &:hover, &:focus, &:active, &.active {
-    color: #fff;
+    color: #bac3ca;
     background-color: #bf690e;
     border-color: 1px solid #191919;
     outline: 0;
@@ -4975,7 +4975,7 @@ fieldset[disabled] .btn-default {
 }
 
 .open > .btn-primary.dropdown-toggle {
-  color: #fff;
+  color: #bac3ca;
   background-color: #bf690e;
   border-color: 1px solid #191919;
   outline: 0;
@@ -5031,16 +5031,16 @@ fieldset[disabled] .btn-primary {
 
 .btn-primary .badge {
   color: #D77610;
-  background-color: #fff;
+  background-color: #bac3ca;
 }
 
 .btn-success {
-  color: #fff;
+  color: #bac3ca;
   background-color: #85ce53;
   border-color: #191919;
 
   &:hover, &:focus, &:active, &.active {
-    color: #fff;
+    color: #bac3ca;
     background-color: #7fc54f;
     border-color: #191919;
     outline: 0;
@@ -5048,7 +5048,7 @@ fieldset[disabled] .btn-primary {
 }
 
 .open > .btn-success.dropdown-toggle {
-  color: #fff;
+  color: #bac3ca;
   background-color: #7fc54f;
   border-color: #191919;
   outline: 0;
@@ -5104,23 +5104,23 @@ fieldset[disabled] .btn-success {
 
 .btn-success .badge {
   color: #9BD275;
-  background-color: #fff;
+  background-color: #bac3ca;
 }
 
 .btn-info {
-  color: #fff;
+  color: #bac3ca;
   background-color: #226808;
   border-color: #191919;
 
   &:hover, &:focus, &:active, &.active {
-    color: #fff;
+    color: #bac3ca;
     background-color: #dd630d;
     border-color: #191919;
   }
 }
 
 .open > .btn-info.dropdown-toggle {
-  color: #fff;
+  color: #bac3ca;
   background-color: #dd630d;
   border-color: #191919;
 }
@@ -5169,23 +5169,23 @@ fieldset[disabled] .btn-info {
 
 .btn-info .badge {
   color: #B0CDDB;
-  background-color: #fff;
+  background-color: #bac3ca;
 }
 
 .btn-warning {
-  color: #fff;
+  color: #bac3ca;
   background-color: #d77610;
   border-color: #191919;
 
   &:hover, &:focus, &:active, &.active {
-    color: #fff;
+    color: #bac3ca;
     background-color: #EC7726;
     border-color: #191919;
   }
 }
 
 .open > .btn-warning.dropdown-toggle {
-  color: #fff;
+  color: #bac3ca;
   background-color: #EC7726;
   border-color: #191919;
 }
@@ -5234,23 +5234,23 @@ fieldset[disabled] .btn-warning {
 
 .btn-warning .badge {
   color: #f0ad4e;
-  background-color: #fff;
+  background-color: #bac3ca;
 }
 
 .btn-danger {
-  color: #fff;
+  color: #bac3ca;
   background-color: #CB4326;
   border-color: #1B4257;
 
   &:hover, &:focus, &:active, &.active {
-    color: #fff;
+    color: #bac3ca;
     background-color: #B63B21;
     border-color: #1B4257;
   }
 }
 
 .open > .btn-danger.dropdown-toggle {
-  color: #fff;
+  color: #bac3ca;
   background-color: #B63B21;
   border-color: #1B4257;
 }
@@ -5299,7 +5299,7 @@ fieldset[disabled] .btn-danger {
 
 .btn-danger .badge {
   color: #F05050;
-  background-color: #fff;
+  background-color: #bac3ca;
 }
 
 .btn-link {
@@ -5457,8 +5457,8 @@ tbody.collapse.in {
   list-style: none;
   font-size: 14px;
   text-align: left;
-  background-color: #21303a;
-  color: #fff;
+  background-color: #172229;
+  color: #bac3ca;
   border-left: 1px solid #191919;
   border-right: 1px solid #191919;
   border-bottom: 1px solid #191919;
@@ -5491,25 +5491,25 @@ tbody.collapse.in {
       clear: both;
       font-weight: normal;
       line-height: 1.428571429;
-      color: #fff;
+      color: #bac3ca;
       white-space: nowrap;
       outline: 0;
 
       &:hover, &:focus {
         text-decoration: none;
-        color: #FFFFFF;
+        color: #bac3ca;
         background-color: #d77610;
       }
     }
 
     .active > a {
-      color: #fff;
+      color: #bac3ca;
       text-decoration: none;
       outline: 0;
       background-color: #d77610;
 
       &:hover, &:focus {
-        color: #fff;
+        color: #bac3ca;
         text-decoration: none;
         outline: 0;
         background-color: #d77610;
@@ -5726,7 +5726,7 @@ tbody.collapse.in {
   .dropdown-toggle {
     &:active, &:hover {
       outline: 0;
-      color: #FFFFFF;
+      color: #bac3ca;
       background-color: none;
       border-color: #000;
     }
@@ -5734,7 +5734,7 @@ tbody.collapse.in {
 
   &.open .dropdown-toggle {
     outline: 0;
-    color: #FFFFFF;
+    color: #bac3ca;
     background-color: none;
     border-color: #000;
   }
@@ -5942,7 +5942,7 @@ tbody.collapse.in {
   font-size: 14px;
   font-weight: normal;
   line-height: 1;
-  color: #FFF;
+  color: #bac3ca;
   text-align: center;
   background-color: #eeeeee;
   border: 1px solid #ccc;
@@ -6093,7 +6093,7 @@ tbody.collapse.in {
       position: relative;
       display: block;
       padding: 10px 15px;
-      color: #FFF;
+      color: #bac3ca;
       border-radius: 0px;
       border-top-right-radius: 10px;
       margin-right: 0px;
@@ -6108,7 +6108,7 @@ tbody.collapse.in {
   position: relative;
   display: block;
   padding: 10px 15px;
-  color: #FFF;
+  color: #bac3ca;
   border-radius: 0px;
   border-top-right-radius: 10px;
   margin-right: 0px;
@@ -6139,7 +6139,7 @@ tbody.collapse.in {
     &:hover, &:focus {
       text-decoration: none;
       background-color: #202f3a;
-      color: #FFF;
+      color: #bac3ca;
       opacity: 0.8;
     }
   }
@@ -6151,10 +6151,10 @@ a:focus {
 
 .nav {
   > li.disabled > a {
-    color: #fff;
+    color: #bac3ca;
 
     &:hover, &:focus {
-      color: #fff;
+      color: #bac3ca;
       text-decoration: none;
       background-color: #839caa;
       opacity: 0.9;
@@ -6229,12 +6229,12 @@ a:focus {
   }
 
   &.active > a {
-    color: #fff;
+    color: #bac3ca;
     background-color: #191919;
     opacity: 1.0;
 
     &:hover, &:focus {
-      color: #fff;
+      color: #bac3ca;
       background-color: #191919;
       opacity: 1.0;
     }
@@ -6742,14 +6742,14 @@ a:focus {
   }
 
   .navbar-toggle {
-    border-color: #FFF;
+    border-color: #bac3ca;
 
     &:hover, &:focus {
       background-color: #555;
     }
 
     .icon-bar {
-      background-color: #FFF;
+      background-color: #bac3ca;
     }
   }
 
@@ -6833,7 +6833,7 @@ fieldset[disabled] .navbar-default .btn-link {
     color: #777777;
 
     &:hover, &:focus {
-      color: #fff;
+      color: #bac3ca;
       background-color: transparent;
     }
   }
@@ -6847,17 +6847,17 @@ fieldset[disabled] .navbar-default .btn-link {
       color: #777777;
 
       &:hover, &:focus {
-        color: #fff;
+        color: #bac3ca;
         background-color: transparent;
       }
     }
 
     .active > a {
-      color: #fff;
+      color: #bac3ca;
       background-color: #090909;
 
       &:hover, &:focus {
-        color: #fff;
+        color: #bac3ca;
         background-color: #090909;
       }
     }
@@ -6881,7 +6881,7 @@ fieldset[disabled] .navbar-default .btn-link {
     }
 
     .icon-bar {
-      background-color: #fff;
+      background-color: #bac3ca;
     }
   }
 
@@ -6891,11 +6891,11 @@ fieldset[disabled] .navbar-default .btn-link {
 
   .navbar-nav > .open > a {
     background-color: #090909;
-    color: #fff;
+    color: #bac3ca;
 
     &:hover, &:focus {
       background-color: #090909;
-      color: #fff;
+      color: #bac3ca;
     }
   }
 
@@ -6903,7 +6903,7 @@ fieldset[disabled] .navbar-default .btn-link {
     color: #777777;
 
     &:hover {
-      color: #fff;
+      color: #bac3ca;
     }
   }
 
@@ -6911,7 +6911,7 @@ fieldset[disabled] .navbar-default .btn-link {
     color: #777777;
 
     &:hover, &:focus {
-      color: #fff;
+      color: #bac3ca;
     }
 
     &[disabled] {
@@ -6937,17 +6937,17 @@ fieldset[disabled] .navbar-default .btn-link {
         color: #777777;
 
         &:hover, &:focus {
-          color: #fff;
+          color: #bac3ca;
           background-color: transparent;
         }
       }
 
       .active > a {
-        color: #fff;
+        color: #bac3ca;
         background-color: #090909;
 
         &:hover, &:focus {
-          color: #fff;
+          color: #bac3ca;
           background-color: #090909;
         }
       }
@@ -7012,7 +7012,7 @@ fieldset[disabled] .navbar-inverse .btn-link {
           padding: 6px 12px;
           line-height: 1.428571429;
           text-decoration: none;
-          color: #FFFFFF;
+          color: #bac3ca;
           background-color: #273946;
           border: 1px solid #191919;
           margin-left: -1px;
@@ -7038,14 +7038,14 @@ fieldset[disabled] .navbar-inverse .btn-link {
       > {
         a {
           &:hover, &:focus {
-            color: #FFFFFF;
+            color: #bac3ca;
             background-color: #d77610;
           }
         }
 
         span {
           &:hover, &:focus {
-            color: #FFFFFF;
+            color: #bac3ca;
             background-color: #d77610;
           }
         }
@@ -7055,13 +7055,13 @@ fieldset[disabled] .navbar-inverse .btn-link {
     .active > {
       a {
         z-index: 2;
-        color: #FFFFFF;
+        color: #bac3ca;
         background-color: #d77610;
         cursor: default;
 
         &:hover, &:focus {
           z-index: 2;
-          color: #FFFFFF;
+          color: #bac3ca;
           background-color: #d77610;
           cursor: default;
         }
@@ -7069,13 +7069,13 @@ fieldset[disabled] .navbar-inverse .btn-link {
 
       span {
         z-index: 2;
-        color: #FFFFFF;
+        color: #bac3ca;
         background-color: #d77610;
         cursor: default;
 
         &:hover, &:focus {
           z-index: 2;
-          color: #FFFFFF;
+          color: #bac3ca;
           background-color: #d77610;
           cursor: default;
         }
@@ -7084,24 +7084,24 @@ fieldset[disabled] .navbar-inverse .btn-link {
 
     .disabled > {
       span {
-        color: #FFF;
+        color: #bac3ca;
         background-color: #273946;
         cursor: not-allowed;
 
         &:hover, &:focus {
-          color: #FFF;
+          color: #bac3ca;
           background-color: #273946;
           cursor: not-allowed;
         }
       }
 
       a {
-        color: #FFF;
+        color: #bac3ca;
         background-color: #273946;
         cursor: not-allowed;
 
         &:hover, &:focus {
-          color: #FFF;
+          color: #bac3ca;
           background-color: #273946;
           cursor: not-allowed;
         }
@@ -7180,7 +7180,7 @@ fieldset[disabled] .navbar-inverse .btn-link {
       a, span {
         display: inline-block;
         padding: 5px 14px;
-        background-color: #fff;
+        background-color: #bac3ca;
         border: 1px solid #ddd;
         border-radius: 15px;
       }
@@ -7209,19 +7209,19 @@ fieldset[disabled] .navbar-inverse .btn-link {
   .disabled > {
     a {
       color: #777777;
-      background-color: #fff;
+      background-color: #bac3ca;
       cursor: not-allowed;
 
       &:hover, &:focus {
         color: #777777;
-        background-color: #fff;
+        background-color: #bac3ca;
         cursor: not-allowed;
       }
     }
 
     span {
       color: #777777;
-      background-color: #fff;
+      background-color: #bac3ca;
       cursor: not-allowed;
     }
   }
@@ -7233,7 +7233,7 @@ fieldset[disabled] .navbar-inverse .btn-link {
   font-size: 75%;
   font-weight: bold;
   line-height: 1;
-  color: #fff;
+  color: #bac3ca;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
@@ -7251,7 +7251,7 @@ fieldset[disabled] .navbar-inverse .btn-link {
 
 a.label {
   &:hover, &:focus {
-    color: #fff;
+    color: #bac3ca;
     text-decoration: none;
     cursor: pointer;
   }
@@ -7330,7 +7330,7 @@ a.label {
   padding: 3px 7px;
   font-size: 12px;
   font-weight: bold;
-  color: #fff;
+  color: #bac3ca;
   line-height: 1;
   vertical-align: baseline;
   white-space: nowrap;
@@ -7355,13 +7355,13 @@ a.label {
 
 a.list-group-item.active > .badge {
   color: #D77610;
-  background-color: #fff;
+  background-color: #bac3ca;
 }
 
 .nav-pills > {
   .active > a > .badge {
     color: #D77610;
-    background-color: #fff;
+    background-color: #bac3ca;
   }
 
   li > a > .badge {
@@ -7371,7 +7371,7 @@ a.list-group-item.active > .badge {
 
 a.badge {
   &:hover, &:focus {
-    color: #fff;
+    color: #bac3ca;
     text-decoration: none;
     cursor: pointer;
   }
@@ -7429,7 +7429,7 @@ a.badge {
   padding: 4px;
   margin-bottom: 20px;
   line-height: 1.428571429;
-  background-color: #fff;
+  background-color: #bac3ca;
   border: 1px solid #ddd;
   border-radius: 3px;
   -webkit-transition: all 0.2s ease-in-out;
@@ -7511,7 +7511,7 @@ a.thumbnail {
 .alert-info {
   background-color: #25323a;
   border: 1px solid #191919;
-  color: #FFF;
+  color: #bac3ca;
 
   hr {
     border-top-color: #DA4829;
@@ -7525,7 +7525,7 @@ a.thumbnail {
 .alert-warning {
   background-color: #1c2931;
   border: 1px solid #b92515;
-  color: #fff;
+  color: #bac3ca;
 
   hr {
     border-top-color: #f7e1b5;
@@ -7571,7 +7571,7 @@ a.thumbnail {
 
 .progress {
   margin-bottom: 3px;
-  color: #FFF;
+  color: #bac3ca;
   overflow: hidden;
   height: 20px;
   background-color: #162026;
@@ -7587,7 +7587,7 @@ a.thumbnail {
   height: 100%;
   font-size: 12px;
   line-height: 20px;
-  color: #fff;
+  color: #bac3ca;
   text-align: center;
   background-color: #d77610;
   position: relative;
@@ -7655,7 +7655,7 @@ a.thumbnail {
 
 .progress-bar-warning {
   background-color: #CCB60F;
-  color: #FFFFFF !important;
+  color: #bac3ca !important;
 }
 
 .progress-striped .progress-bar-warning {
@@ -7724,7 +7724,7 @@ a.thumbnail {
   display: block;
   padding: 6px 8px;
   margin-bottom: -1px;
-  background-color: #1c2931;
+  background-color: #162026;
 
   &:last-child {
     margin-bottom: 0;
@@ -7740,7 +7740,7 @@ a.thumbnail {
 }
 
 a.list-group-item {
-  color: #FFF;
+  color: #bac3ca;
   border-radius: 0;
   outline: 0;
 
@@ -7750,8 +7750,8 @@ a.list-group-item {
 
   &:hover, &:focus {
     text-decoration: none;
-    color: #FFF;
-    background-color: #131C22;
+    color: #bac3ca;
+    background-color: #0e181e;
   }
 
   &:hover:before, &:focus:before {
@@ -7865,12 +7865,12 @@ a.list-group-item-success {
   }
 
   &.active {
-    color: #fff;
+    color: #bac3ca;
     background-color: #9BD275;
     border-color: #9BD275;
 
     &:hover, &:focus {
-      color: #fff;
+      color: #bac3ca;
       background-color: #9BD275;
       border-color: #9BD275;
     }
@@ -7895,12 +7895,12 @@ a.list-group-item-info {
   }
 
   &.active {
-    color: #fff;
+    color: #bac3ca;
     background-color: #31708f;
     border-color: #31708f;
 
     &:hover, &:focus {
-      color: #fff;
+      color: #bac3ca;
       background-color: #31708f;
       border-color: #31708f;
     }
@@ -7925,12 +7925,12 @@ a.list-group-item-warning {
   }
 
   &.active {
-    color: #fff;
+    color: #bac3ca;
     background-color: #f0ad4e;
     border-color: #f0ad4e;
 
     &:hover, &:focus {
-      color: #fff;
+      color: #bac3ca;
       background-color: #f0ad4e;
       border-color: #f0ad4e;
     }
@@ -7955,12 +7955,12 @@ a.list-group-item-danger {
   }
 
   &.active {
-    color: #fff;
+    color: #bac3ca;
     background-color: #F05050;
     border-color: #F05050;
 
     &:hover, &:focus {
-      color: #fff;
+      color: #bac3ca;
       background-color: #F05050;
       border-color: #F05050;
     }
@@ -8370,7 +8370,7 @@ a.list-group-item-danger {
 
   > {
     .panel-heading {
-      color: #fff;
+      color: #bac3ca;
       border-color: #191919;
 
       + .panel-collapse > .panel-body {
@@ -8395,7 +8395,7 @@ a.list-group-item-danger {
 
   > {
     .panel-heading {
-      color: #FFF;
+      color: #bac3ca;
       border-color: #191919;
 
       + .panel-collapse > .panel-body {
@@ -8404,7 +8404,7 @@ a.list-group-item-danger {
 
       .badge {
         color: #D77610;
-        background-color: #fff;
+        background-color: #bac3ca;
       }
     }
 
@@ -8569,7 +8569,7 @@ a.list-group-item-danger {
   font-size: 21px;
   font-weight: bold;
   line-height: 1;
-  color: #FFFFFF;
+  color: #bac3ca;
   text-shadow: 0 1px 0 #000;
   opacity: 1;
   filter: alpha(opacity = 100);
@@ -8673,7 +8673,7 @@ button.close {
   border-bottom: 1px solid #191919;
   min-height: 16.42857px;
   background-color: #d77610;
-  color: #FFF;
+  color: #bac3ca;
 
   .close {
     margin-top: -2px;
@@ -8688,12 +8688,12 @@ button.close {
 .modal-body {
   position: relative;
   padding: 5px;
-  background-color: #131c22;
+  background-color: #0e181e;
 
   .table-hover > tbody > tr:hover > {
     td, th {
       background-color: #263640;
-      color: #FFF;
+      color: #bac3ca;
     }
   }
 }
@@ -8701,7 +8701,7 @@ button.close {
 .modal-footer {
   padding: 5px;
   text-align: right;
-  background-color: #131c22;
+  background-color: #0e181e;
   border-top: 1px solid inherit;
 
   &:before {
@@ -8798,7 +8798,7 @@ button.close {
 .tooltip-inner {
   max-width: 200px;
   padding: 3px 8px;
-  color: #fff;
+  color: #bac3ca;
   text-align: center;
   text-decoration: none;
   background-color: #000;
@@ -8884,7 +8884,7 @@ button.close {
   max-width: 276px;
   padding: 1px;
   text-align: left;
-  background-color: #fff;
+  background-color: #bac3ca;
   background-clip: padding-box;
   border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, 0.3);
@@ -8965,7 +8965,7 @@ button.close {
       bottom: 1px;
       margin-left: -10px;
       border-bottom-width: 0;
-      border-top-color: #fff;
+      border-top-color: #bac3ca;
     }
   }
 
@@ -8982,7 +8982,7 @@ button.close {
       left: 1px;
       bottom: -10px;
       border-left-width: 0;
-      border-right-color: #fff;
+      border-right-color: #bac3ca;
     }
   }
 
@@ -8999,7 +8999,7 @@ button.close {
       top: 1px;
       margin-left: -10px;
       border-top-width: 0;
-      border-bottom-color: #fff;
+      border-bottom-color: #bac3ca;
     }
   }
 
@@ -9015,7 +9015,7 @@ button.close {
       content: " ";
       right: 1px;
       border-right-width: 0;
-      border-left-color: #fff;
+      border-left-color: #bac3ca;
       bottom: -10px;
     }
   }
@@ -9096,7 +9096,7 @@ button.close {
   opacity: 0.5;
   filter: alpha(opacity = 50);
   font-size: 20px;
-  color: #fff;
+  color: #bac3ca;
   text-align: center;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
 
@@ -9120,7 +9120,7 @@ button.close {
 
   &:hover, &:focus {
     outline: 0;
-    color: #fff;
+    color: #bac3ca;
     text-decoration: none;
     opacity: 0.9;
     filter: alpha(opacity = 90);
@@ -9176,7 +9176,7 @@ button.close {
     height: 10px;
     margin: 1px;
     text-indent: -999px;
-    border: 1px solid #fff;
+    border: 1px solid #bac3ca;
     border-radius: 10px;
     cursor: pointer;
     background-color: #000 \9;
@@ -9187,7 +9187,7 @@ button.close {
     margin: 0;
     width: 12px;
     height: 12px;
-    background-color: #fff;
+    background-color: #bac3ca;
   }
 }
 
@@ -9199,7 +9199,7 @@ button.close {
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
-  color: #fff;
+  color: #bac3ca;
   text-align: center;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
 
@@ -9268,7 +9268,7 @@ button.close {
 
 .show {
   display: block !important;
-  color: #22C400;
+  color: #bac3ca;
 }
 
 .invisible {
@@ -9528,16 +9528,16 @@ html {
   height: 100%;
   font-family: 'SourceSansProRegular';
   scrollbar-width: thin;
-  scrollbar-color: #1c2931 #131c22;
-  background-color: #131c22;
+  scrollbar-color: #1c2931 #0e181e;
+  background-color: #0e181e;
 }
 
 body {
   height: 100%;
   font-family: 'SourceSansProRegular';
   scrollbar-width: thin;
-  scrollbar-color: #1c2931 #131c22;
-  background-color: #131c22;
+  scrollbar-color: #1c2931 #0e181e;
+  background-color: #0e181e;
   touch-action: manipulation;
   min-width: 320px;
 }
@@ -9571,8 +9571,8 @@ body {
 
 .page-content-head {
   .container-fluid {
-    color: #FFF;
-    background-color: #1a262d;
+    color: #bac3ca;
+    background-color: #172229;
     margin-left: 20px;
     margin-right: 20px;
     border-top: 1px solid #191919;
@@ -9582,16 +9582,17 @@ body {
     padding: 7px 14px 5px 14px;
     -webkit-box-shadow: 0 3px 4px rgb(23, 23, 23);
     box-shadow: 0 3px 4px rgb(23, 23, 23);
+    border-radius: 0.5em 0.5em 0.5em 0.5em;
   }
 
   padding-bottom: 2px;
-  padding-top: 8px;
+  padding-top: 10px;
   color: #000;
 }
 
 .content-box-head {
   padding-bottom: 2px;
-  padding-top: 8px;
+  padding-top: 10px;
   color: #000;
 }
 
@@ -9606,7 +9607,7 @@ body {
 
 .page-content-main {
   min-height: calc(100% - 64px);
-  padding: 10px 0px 21px 0px;
+  padding: 7px 0px 21px 0px;
 }
 
 .page-side {
@@ -9636,14 +9637,14 @@ body {
   position: fixed;
   height: 20px;
   background-color: #172229;
-  color: #FFF;
+  color: #bac3ca;
   border-top: 1px solid #191919;
 }
 
 .content-box {
   padding: 0px 0px;
   margin: 0px 0px;
-  background-color: none;
+  background-color: #162026 !important;
   border: 1px solid #111;
   -webkit-box-shadow: 0px 3px 3px rgba(17, 17, 17, 0.8);
   box-shadow: 0px 3px 3px rgba(17, 17, 17, 0.8);
@@ -9714,7 +9715,7 @@ body {
 }
 
 .page-login {
-  background: #131c22;
+  background: #121c22;
 
   .container {
     min-height: 100%;
@@ -9726,7 +9727,7 @@ body {
   }
 
   .login-foot {
-    color: #FFF;
+    color: #bac3ca;
   }
 }
 
@@ -9874,7 +9875,7 @@ main.page-content.col-lg-12 {
 
       a.list-group-item.active-menu-title {
         color: #d77610 !important;
-        background-color: #131C22 !important;
+        background-color: #0e181e !important;
       }
     }
   }
@@ -9882,13 +9883,13 @@ main.page-content.col-lg-12 {
 
 a.list-group-item.active-menu-title.collapsed {
   color: #d77610 !important;
-  background-color: #131C22 !important;
+  background-color: #0e181e !important;
 }
 
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > {
   a.list-group-item[aria-expanded="true"] {
     color: #d77610 !important;
-    background-color: #131C22 !important;
+    background-color: #0e181e !important;
   }
 
   div {
@@ -9897,14 +9898,14 @@ a.list-group-item.active-menu-title.collapsed {
         > {
           a.list-group-item[aria-expanded="true"], div.collapse.in > a.list-group-item.menu-level-3-item.active {
             color: #d77610 !important;
-            background-color: #131C22 !important;
+            background-color: #0e181e !important;
           }
         }
 
         > div.collapse.in > a.list-group-item {
           padding-left: 10px !important;
           font-size: 14px !important;
-          background-color: #1c2931 !important;
+          background-color: #162026 !important;
           opacity: 0.98;
         }
       }
@@ -9912,7 +9913,7 @@ a.list-group-item.active-menu-title.collapsed {
       > a.list-group-item {
         padding-left: 10px !important;
         font-size: 14px !important;
-        background-color: #1c2931 !important;
+        background-color: #162026 !important;
         opacity: 0.98;
       }
 
@@ -9937,7 +9938,7 @@ a.list-group-item.active-menu-title.collapsed {
       &.in > div.collapse.in > a.list-group-item:hover {
         text-decoration: none !important;
         color: #D77610 !important;
-        background-color: #131C22 !important;
+        background-color: #0e181e !important;
       }
     }
   }
@@ -9946,32 +9947,32 @@ a.list-group-item.active-menu-title.collapsed {
 a.list-group-item:focus {
   text-decoration: none !important;
   color: #D77610 !important;
-  background-color: #131C22 !important;
+  background-color: #0e181e !important;
 }
 
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item {
   &.active-menu-title, &:hover {
     color: #D77610 !important;
-    background-color: #131C22 !important;
+    background-color: #0e181e !important;
   }
 }
 
 a.list-group-item:focus {
   color: #D77610 !important;
-  background-color: #131C22 !important;
+  background-color: #0e181e !important;
 }
 
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div {
   &.collapse.in > a.list-group-item {
     &.collapsed:focus, &:focus {
       color: #D77610 !important;
-      background-color: #131C22 !important;
+      background-color: #0e181e !important;
     }
   }
 
   &.active-menu.collapse.in > a.list-group-item.active {
     color: #D77610 !important;
-    background-color: #131C22 !important;
+    background-color: #0e181e !important;
   }
 
   &.collapse.in {
@@ -10014,7 +10015,7 @@ a.list-group-item:focus {
 }
 
 button.toggle-sidebar {
-  color: #FFF;
+  color: #bac3ca;
   background-color: transparent;
   font-size: 14px;
   border: none;
@@ -10076,7 +10077,7 @@ button.toggle-sidebar {
       }
 
       &.active > a {
-        background: #202f3a !important;
+        background: #162026 !important;
         outline: 0;
       }
 
@@ -10107,7 +10108,7 @@ button.toggle-sidebar {
       background: #818180;
 
       > a {
-        color: #FFFFFF;
+        color: #bac3ca;
         font-family: 'SourceSansProSemibold';
       }
     }
@@ -10235,7 +10236,7 @@ button.toggle-sidebar {
 .active-menu-title, .active-menu a {
   text-decoration: none;
   position: relative;
-  background-color: #131C22;
+  background-color: #0e181e;
 }
 
 .active-menu-title:before, .active-menu a:before {
@@ -10243,13 +10244,13 @@ button.toggle-sidebar {
 }
 
 .active-menu-title.active {
-  background-color: #131C22;
+  background-color: #0e181e;
   color: #d77610;
 }
 
 .active-menu a {
   &.active {
-    background-color: #131C22;
+    background-color: #0e181e;
     color: #d77610;
   }
 
@@ -10259,7 +10260,7 @@ button.toggle-sidebar {
 }
 
 .alert.alert-danger {
-  color: #FFF !important;
+  color: #bac3ca !important;
 }
 
 .nav-tabs-justified > li > a, .nav-tabs.nav-justified > li > a {
@@ -10326,7 +10327,7 @@ select {
   overflow: hidden;
   border: 1px solid #191919;
   background-color: #21303a;
-  color: #FFF;
+  color: #bac3ca;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -10339,7 +10340,7 @@ select {
     overflow: hidden;
     border: 1px solid #191919;
     background-color: #21303a;
-    color: #FFF;
+    color: #bac3ca;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
@@ -10440,7 +10441,7 @@ label > input {
 
   .ipsec-tab {
     background-color: #202f3a !important;
-    color: #FFF !important;
+    color: #bac3ca !important;
     opacity: 0.5;
 
     &.activetab {
@@ -10453,17 +10454,17 @@ label > input {
 
 .fw_pass {
   background-color: #203a23 !important;
-  color: #FFF;
+  color: #bac3ca;
 }
 
 .fw_block {
   background-color: #551e1e !important;
-  color: #FFF;
+  color: #bac3ca;
 }
 
 .fw_nat {
   background-color: #7B681D !important;
-  color: #FFF;
+  color: #bac3ca;
 }
 
 /*additional extensions for theme-vicuna*/
@@ -10477,14 +10478,14 @@ textarea#update_status {
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
   border: none !important;
-  background-color: #25323a;
+  background-color: #162026;
 
   &:hover {
     color: inherit !important;
     -webkit-box-shadow: none !important;
     box-shadow: none !important;
     border: none !important;
-    background-color: #25323a;
+    background-color: #162026;
   }
 }
 
@@ -10527,23 +10528,23 @@ textarea#update_status {
 
 div.container-fluid > {
   .fa-search::before, .fa-refresh::before {
-    color: #FFFFFF !important;
+    color: #bac3ca !important;
   }
 }
 
 .panel-heading h3:hover {
-  color: #FFFFFF;
+  color: #bac3ca;
   text-decoration: none;
 }
 
 h3 {
   &:focus {
-    color: #FFFFFF;
+    color: #bac3ca;
     text-decoration: none;
   }
 
   &:link {
-    color: #FFFFFF;
+    color: #bac3ca;
     text-decoration: underline;
   }
 
@@ -10563,7 +10564,7 @@ h3 {
 .btn-group.bootstrap-select {
   &.open, &:hover {
     border-color: #191919 !important;
-    color: #FFFFFF !important;
+    color: #bac3ca !important;
   }
 }
 
@@ -10601,6 +10602,10 @@ h3 {
   &.fa-play.text-muted::before {
     color: #d7af10 !important;
   }
+
+  &.fa-info-circle {
+    color: #D77610;
+  }
 }
 
 #system_log-widgets.content-box {
@@ -10621,7 +10626,7 @@ h3 {
 }
 
 .no-data {
-  color: #FFF !important;
+  color: #bac3ca !important;
   background-color: #1a262d !important;
 }
 
@@ -10672,17 +10677,17 @@ input[type="checkbox"] {
 
     &.active {
       background-color: #d77610 !important;
-      color: #ffffff !important;
+      color: #bac3ca !important;
 
       &:hover {
         background-color: #d77610 !important;
-        color: #ffffff !important;
+        color: #bac3ca !important;
       }
     }
 
     span:hover {
       background: #d77610 !important;
-      color: #ffffff !important;
+      color: #bac3ca !important;
     }
   }
 }
@@ -10696,15 +10701,14 @@ input[type="checkbox"] {
     border-bottom: 1px solid #4a4a4a;
     min-height: 16.42857px;
     background-color: #243139;
-    color: #FFF;
+    color: #bac3ca;
   }
 
-.modal-side {
   background-color: #1a262d !important;
 }
 
 .panel-report-tools:hover {
-  color: #fff !important;
+  color: #bac3ca !important;
 }
 
 .alert-primary {
@@ -10713,11 +10717,11 @@ input[type="checkbox"] {
 }
 
 label.btn.au-target {
-  color: #FFF !important;
+  color: #bac3ca !important;
 }
 
 .preloader-wrapper {
-  background-color: #131c22 !important;
+  background-color: #121c22 !important;
 }
 
 .border-bottom {
@@ -10742,7 +10746,7 @@ ul.jqtree-tree {
       color: #dd630d !important;
     }
 
-    color: #fff !important;
+    color: #bac3ca !important;
   }
 
   .jqtree-title {
@@ -10765,7 +10769,7 @@ ul.jqtree-tree {
 
 .interface-table-tr td {
   background-color: #d77610 !important;
-  color: #FFF !important;
+  color: #bac3ca !important;
 }
 
 .table.border {
@@ -10789,7 +10793,7 @@ ul.jqtree-tree {
 router-view {
   .text-success.m-r-5 {
     font-weight: bold;
-    color: #fff;
+    color: #bac3ca;
   }
 
   .text-danger.m-r-5 {
@@ -10807,5 +10811,5 @@ router-view {
 }
 
 #introduction a.btn-info {
-  color: #FFF !important;
+  color: #bac3ca !important;
 }
diff --git a/misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/dashboard.css b/misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/dashboard.css
new file mode 100644
index 000000000..1f305478d
--- /dev/null
+++ b/misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/dashboard.css
@@ -0,0 +1,284 @@
+.fa-spinner {
+    font-size: 2em;
+}
+
+.grid-stack-item-content {
+  text-align: center;
+  border-style: solid;
+  border-color: rgba(25, 25, 25, 0.72);
+  border-width: 2px;
+  background-color: #1a262d;
+  border-radius: 0.5em 0.5em 0.5em 0.5em;
+}
+
+.widget-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 1px;
+    cursor: grab;
+}
+
+.widget-header {
+    margin-top: 0.5em;
+    margin-left: 1em;
+    margin-right: 1em;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.widget-spinner {
+    margin-top: 20px;
+}
+
+.fa-stack.small {
+    font-size: 0.5em;
+}
+
+.close-handle {
+    vertical-align: middle;
+    text-align: right;
+    cursor: pointer;
+}
+
+.close-handle > i {
+    font-size: 0.7em;
+}
+
+.panel-divider {
+    width: 100%;
+    text-align: center;
+    height: 8px;
+    margin-bottom: 10px;
+}
+
+table {
+    table-layout: fixed;
+}
+
+td {
+    word-break: break-all;
+}
+
+.line {
+    display: inline-block;
+    height: 1px;
+    width: 70%;
+    background: #d94f00;
+    margin: 5px;
+}
+
+.canvas-container {
+    position: relative;
+}
+
+.cpu-canvas-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.smoothie-container {
+    width: 100%;
+}
+
+.smoothie-chart-tooltip {
+  z-index: 1; /* necessary to force to foreground */
+  background: rgba(50, 50, 50, 0.9);
+  padding-left: 15px;
+  padding-right: 15px;
+  color: white;
+  font-size: 13px;
+  border-radius: 0.5em 0.5em 0.5em 0.5em;
+  pointer-events: none;
+}
+
+.flex-container {
+    display: flex;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+}
+
+.gateway-info {
+  margin: 5px;
+  padding: 5px;
+  font-size: 13px;
+}
+
+.gateway-detail-container {
+    display: none;
+    margin: 5px;
+}
+
+.interface-info {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    height: 100%;
+}
+
+.nowrap {
+    flex-wrap: nowrap;
+}
+
+.gateway-graph {
+    display: none;
+}
+
+.flex-container > .gateway-graph {
+    font-size: 13px;
+}
+
+.vertical-center-row {
+    height: 100%;
+    display: inline;
+}
+
+.interfaces-info {
+  margin: 5px;
+  font-size: 13px;
+}
+
+.interface-descr {
+    margin-left: 10px;
+    font-size: 15px;
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+.interfaces-detail-container {
+    margin: 5px;
+    display: none;
+}
+
+.d-flex {
+    display: flex;
+}
+
+.d-flex > .justify-content-start {
+    justify-content: start;
+}
+
+.d-flex > .justify-content-end {
+    justify-content: end;
+}
+
+#chartjs-toolip {
+    z-index: 20;
+}
+
+/* CPU widget */
+.cpu-type {
+    margin-bottom: 10px;
+    margin-top: 10px;
+}
+/* ----- */
+
+/* Custom flex table */
+div {
+    box-sizing: border-box;
+}
+
+.flextable-container {
+    display: block;
+    margin: 2em auto;
+    width: 95%;
+    max-width: 1200px;
+}
+
+.flextable-header {
+    display: flex;
+    flex-flow: row wrap;
+    transition: 0.5s;
+    padding: 0.5em 0.5em;
+    border-top: solid 1px rgba(217, 79, 0, 0.15);
+}
+
+.flextable-row {
+    display: flex;
+    flex-flow: row wrap;
+    transition: 0.5s;
+    padding: 0.5em 0.5em;
+    border-top: solid 1px rgba(255, 255, 255, 0.06);
+    align-items: center;
+}
+
+.flextable-header .flex-cell {
+    font-weight: bold;
+}
+
+.flextable-row:hover {
+    background: #131c22;
+    transition: 500ms;
+}
+
+.flex-cell {
+    text-align: left;
+    word-break: break-word;
+}
+
+.column {
+    display: flex;
+    flex-flow: column wrap;
+    width: 50%;
+    padding: 0;
+}
+.column .flex-cell {
+    display: flex;
+    flex-flow: row wrap;
+    width: 100%;
+    padding: 0;
+    border: 0;
+    border-top: rgb(59, 59, 59);
+}
+.column .flex-cell:hover {
+    background: none !important;
+    transition: 500ms;
+}
+.flex-subcell {
+    width: 100%;
+    text-align: left;
+}
+
+.column .flex-cell:not(:last-child) {
+    border-bottom: none !important;
+}
+/* ----- */
+
+/* CSS grid responsive table */
+.grid-header-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+}
+
+.grid-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    background-color: #f7e2d6; /* fade-in color, transitions to transparent */
+    border-top: 1px solid #f7e2d6;
+    transition: 0.5s;
+    opacity: 0.4;
+}
+
+.grid-row:hover {
+    background: #F5F5F5 !important;
+    transition: 500ms;
+}
+
+.grid-header {
+    border-top: 1px solid #f7e2d6;
+    font-weight: bold;
+}
+
+.grid-item {
+    border: 1 px solid #ccc;
+    padding: 4px;
+    text-align: center;
+}
+/* ----- */
+
+:root {
+    --chart-js-background-color: #bac3ca;
+    --chart-js-border-color: #bac3ca;
+    --chart-js-font-color: #bac3ca;
+}
diff --git a/misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/dns-overview.css b/misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/dns-overview.css
index 1d1a9108e..430bf70c1 100644
--- a/misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/dns-overview.css
+++ b/misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/dns-overview.css
@@ -9,7 +9,7 @@
 
 .stats-element {
     height: 5em;
-    background: #1b2b35;
+    background: #172229;
     overflow: hidden;
     display: flex;
     justify-content: flex-start;
@@ -22,7 +22,7 @@
     height: auto;
     width: 50%;
     object-fit:cover;
-    background: #1a262d;
+    background: #131c22;
     border-radius: 0 2em 2em 0 / 0 3em 3em 0;
     box-shadow: 3px 5px 1px 3px rgb(15, 24, 30);
 }
diff --git a/misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/main.css b/misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/main.css
index ef2def6ff..3b43e7ea9 100644
--- a/misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/main.css
+++ b/misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/main.css
@@ -9,11 +9,11 @@
   min-height: 25px !important; }
 
   .widgetdiv .content-box-head .btn-group .btn {
-    color: #FFFFFF !important;
+    color: #bac3ca !important;
     background: none;
     border: 0px; }
     .widgetdiv .content-box-head .btn-group .btn .glyphicon {
-      color: #FFFFFF !important; }
+      color: #bac3ca !important; }
   .widgetdiv .content-box-head .list-inline li > h3 {
     padding-top: 4px; }
 
@@ -66,7 +66,7 @@ template {
   display: none; }
 
 a {
-  color: #D77610;
+  color: #d77610;
   text-decoration: none;
   background: transparent;
   outline: 0;  }
@@ -75,7 +75,7 @@ a {
 	outline: 0; }
 
   a:hover, a:focus {
-    color: #D77610;
+    color: #bac3ca;
     text-decoration: underline; }
 
 abbr[title] {
@@ -208,8 +208,8 @@ optgroup {
 table {
   border-collapse: none;
   border-spacing: 0;
-  color: #FFF;
-  background-color: #1a262d;
+  color: #bac3ca;
+  background-color: #162026;
   width: 100%; }
 
 td,
@@ -263,14 +263,14 @@ th {
     page-break-after: avoid; }
 
   select {
-    background: #fff !important; }
+    background: #bac3ca !important; }
 
   .navbar {
     display: none; }
 
   .table td,
   .table th {
-    background-color: #fff !important; }
+    background-color: #bac3ca !important; }
 
   .btn > .caret,
   .dropup > .btn > .caret {
@@ -329,7 +329,7 @@ th {
 
 .icon.glyphicon.input-group-addon.glyphicon-search:before, .glyphicon-search:before {
   content: "\e003";
-  color: #FFF !important; }
+  color: #bac3ca !important; }
 
 .glyphicon-heart:before {
   content: "\e005"; }
@@ -925,7 +925,7 @@ body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 1.428571429;
-  color: #FFF;
+  color: #bac3ca;
 }
 
 input,
@@ -954,7 +954,7 @@ img {
 .img-thumbnail {
   padding: 4px;
   line-height: 1.428571429;
-  background-color: #fff;
+  background-color: #bac3ca;
   border: 1px solid #ddd;
   border-radius: 3px;
   -webkit-transition: all 0.2s ease-in-out;
@@ -1151,7 +1151,7 @@ a.text-danger:hover {
   color: #D8482A; }
 
 .bg-primary {
-  color: #fff; }
+  color: #bac3ca; }
 
 .bg-primary {
   background-color: #D77610; }
@@ -1317,7 +1317,7 @@ code {
 kbd {
   padding: 2px 4px;
   font-size: 90%;
-  color: #fff;
+  color: #bac3ca;
   background-color: #191919;
   border-radius: 3px;
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); }
@@ -1334,7 +1334,7 @@ pre {
   line-height: 1.428571429;
   word-break: break-all;
   word-wrap: break-word;
-  color: #FFF;
+  color: #bac3ca;
   background-color: inherit;
   border: inherit;
   border-radius: 3px; }
@@ -2037,7 +2037,7 @@ th {
     padding: 10px 0px 10px 20px;
     line-height: 1.428571429;
     vertical-align: top;
-    border-top: 1px solid #191919; }
+    border-top: 1px solid #1a262d; }
   .table > thead > tr > th {
     vertical-align: bottom;  }
   .table > caption + thead > tr:first-child > th,
@@ -2050,7 +2050,7 @@ th {
     font-family: 'SourceSansProSemibold';
     font-weight: normal;
     border-bottom: 1px solid #191919;
-    background-color: #202f3a;}
+    background-color: #172229;}
   .table > tbody + tbody {
     border-top: 2px solid #eee; }
   .table .table {
@@ -2079,11 +2079,11 @@ th {
 
 .table-striped > tbody > tr:nth-child(odd) > td,
 .table-striped > tbody > tr:nth-child(odd) > th {
-  background-color: #1c2931; }
+  background-color: #162026; }
 
 .table-hover > tbody > tr:hover > td,
 .table-hover > tbody > tr:hover > th {
-  background-color: #283b48; }
+  background-color: #19262d; }
 
 table col[class*="col-"] {
   position: static;
@@ -2299,8 +2299,8 @@ input[type="color"]
   padding: 6px 12px;
   font-size: 14px;
   line-height: 1.428571429;
-  color: #FFF;
-  background-color: #21303a;
+  color: #bac3ca;
+  background-color: #1b272f;
   border: 1px solid #191919;
   border-radius: 3px;
   text-overflow: ellipsis;
@@ -2326,8 +2326,8 @@ input[type="color"]
   input[type="tel"]:hover,
   input[type="color"]:hover
    {
-	color: #FFF;
-	background-color: #172229;
+	color: #bac3ca;
+	background-color: #0f181e;
   border-color: #D77610;
 	outline: 0; }
 
@@ -2349,8 +2349,8 @@ input[type="color"]
   input[type="color"]:focus
 
    {
-	color: #FFF;
-	background-color: #172229;
+	color: #bac3ca;
+	background-color: #0f181e;
   border-color: #D77610;
 	outline: 0; }
 
@@ -2892,12 +2892,12 @@ select[multiple].input-lg,
   border-radius: 3px;
   -ms-user-select: none;
   user-select: none;
-  color: #FFFFFF;
-  background-color: #21303a;
+  color: #bac3ca;
+  background-color: #1b272f;
   border: 1px solid #191919;
   outline:0; }
 .btn:active, .btn.active, .open > .btn.dropdown-toggle {
-  color: #FFF;
+  color: #bac3ca;
   background-color: #21303a;
   outline:0;
   border-color: #191919;
@@ -2905,7 +2905,7 @@ select[multiple].input-lg,
 
 .btn:hover, .btn:focus {
 	background-color: #d77610;
-	color: #FFF;
+	color: #bac3ca;
 	border-radius: 3px;
 	border: 1px solid #191919;
 	text-decoration: none;}
@@ -2919,7 +2919,7 @@ select[multiple].input-lg,
 	outline:0; }
 
   .btn .badge {
-    color: #FFFFFF;
+    color: #bac3ca;
     background-color: #3e3e3e; }
   .btn:focus, .btn:active:focus, .btn.active:focus {
     outline: thin dotted;
@@ -2938,7 +2938,7 @@ select[multiple].input-lg,
     box-shadow: none; }
 
 .act_flush:hover, .act_flush:focus {
-  color: #FFF;
+  color: #bac3ca;
   background-color: #d77610;
   border-color: 1px solid #191919;
   outline:0; }
@@ -2947,11 +2947,11 @@ select[multiple].input-lg,
     background-color: #d77610;
     outline:0; }
   .btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled]:active, .btn-default[disabled].active, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active {
-    background-color: #FFFFFF;
+    background-color: #bac3ca;
     border-color: 1px solid #191919;
     outline:0; }
   .btn-default .badge {
-    color: #FFFFFF;
+    color: #bac3ca;
     background-color: #3e3e3e;
     outline:0; }
 
@@ -2961,7 +2961,7 @@ select[multiple].input-lg,
   border: 1px solid #191919;
   outline:0;   }
   .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle {
-    color: #fff;
+    color: #bac3ca;
     background-color: #bf690e;
     border-color: 1px solid #191919;
     outline:0; }
@@ -2975,14 +2975,14 @@ select[multiple].input-lg,
 
   .btn-primary .badge {
     color: #D77610;
-    background-color: #fff; }
+    background-color: #bac3ca; }
 
 .btn-success {
-  color: #fff;
+  color: #bac3ca;
   background-color: #85ce53;
   border-color: #191919; }
   .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle {
-    color: #fff;
+    color: #bac3ca;
     background-color: #7fc54f;
     border-color: #191919;
 	outline:0; }
@@ -2995,14 +2995,14 @@ select[multiple].input-lg,
 
   .btn-success .badge {
     color: #9BD275;
-    background-color: #fff; }
+    background-color: #bac3ca; }
 
 .btn-info {
-  color: #fff;
+  color: #bac3ca;
   background-color: #226808;
   border-color: #191919; }
   .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open > .btn-info.dropdown-toggle {
-    color: #fff;
+    color: #bac3ca;
     background-color: #dd630d;
     border-color: #191919; }
 
@@ -3014,14 +3014,14 @@ select[multiple].input-lg,
 
   .btn-info .badge {
     color: #B0CDDB;
-    background-color: #fff; }
+    background-color: #bac3ca; }
 
 .btn-warning {
-  color: #fff;
+  color: #bac3ca;
   background-color: #d77610;
   border-color: #191919; }
   .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open > .btn-warning.dropdown-toggle {
-    color: #fff;
+    color: #bac3ca;
     background-color: #EC7726;
     border-color: #191919; }
 
@@ -3033,14 +3033,14 @@ select[multiple].input-lg,
 
   .btn-warning .badge {
     color: #f0ad4e;
-    background-color: #fff; }
+    background-color: #bac3ca; }
 
 .btn-danger {
-  color: #fff;
+  color: #bac3ca;
   background-color: #CB4326;
   border-color: #1B4257; }
   .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .btn-danger.dropdown-toggle {
-    color: #fff;
+    color: #bac3ca;
     background-color: #B63B21;
     border-color: #1B4257; }
   .btn-danger:active, .btn-danger.active, .open > .btn-danger.dropdown-toggle {
@@ -3050,7 +3050,7 @@ select[multiple].input-lg,
     border-color: #ee3939; }
   .btn-danger .badge {
     color: #F05050;
-    background-color: #fff; }
+    background-color: #bac3ca; }
 
 .btn-link {
   color: #D77610;
@@ -3161,8 +3161,8 @@ tbody.collapse.in {
   list-style: none;
   font-size: 14px;
   text-align: left;
-  background-color: #21303a;
-  color: #fff;
+  background-color: #172229;
+  color: #bac3ca;
   border-left: 1px solid #191919;
   border-right: 1px solid #191919;
   border-bottom: 1px solid #191919;
@@ -3191,17 +3191,17 @@ tbody.collapse.in {
     clear: both;
     font-weight: normal;
     line-height: 1.428571429;
-    color: #fff;
+    color: #bac3ca;
     white-space: nowrap;
 	outline:0;}
 
 .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
   text-decoration: none;
-  color: #FFFFFF;
+  color: #bac3ca;
   background-color: #d77610; }
 
 .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
-  color: #fff;
+  color: #bac3ca;
   text-decoration: none;
   outline: 0;
   background-color: #d77610; }
@@ -3342,7 +3342,7 @@ tbody.collapse.in {
 
 .btn-group .dropdown-toggle:active, .btn-group .dropdown-toggle:hover, .btn-group.open .dropdown-toggle {
   outline: 0;
-  color: #FFFFFF;
+  color: #bac3ca;
   background-color: none;
   border-color: #000; }
 
@@ -3470,7 +3470,7 @@ tbody.collapse.in {
   font-size: 14px;
   font-weight: normal;
   line-height: 1;
-  color: #FFF;
+  color: #bac3ca;
   text-align: center;
   background-color: #eeeeee;
   border: 1px solid #ccc;
@@ -3550,7 +3550,7 @@ tbody.collapse.in {
 		position: relative;
 		display: block;
 		padding: 10px 15px;
-		color: #FFF;
+		color: #bac3ca;
 		border-radius: 0px;
 		border-top-right-radius: 10px;
 		margin-right: 0px;
@@ -3569,15 +3569,15 @@ tbody.collapse.in {
       .nav > li > a:hover, .nav > li > a:focus {
         text-decoration: none;
         background-color: #202f3a;
-		color: #FFF;
+		color: #bac3ca;
 		opacity: 0.8; }
 		.nav > li#menu_messages > a:hover, a:focus {
 		text-decoration: underline; }
 
     .nav > li.disabled > a {
-		color: #fff; }
+		color: #bac3ca; }
       .nav > li.disabled > a:hover, .nav > li.disabled > a:focus {
-		  color: #fff;
+		  color: #bac3ca;
 		  text-decoration: none;
 		  background-color: #839caa;
 		  opacity:0.9;
@@ -3617,7 +3617,7 @@ tbody.collapse.in {
   .nav-pills > li > a {
     border-radius: 0; }
   .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
-    color: #fff;
+    color: #bac3ca;
     background-color: #191919;
 	opacity: 1.0; }
 
@@ -3941,11 +3941,11 @@ tbody.collapse.in {
     color: #ccc;
     background-color: transparent; }
   .navbar-default .navbar-toggle {
-    border-color: #FFF; }
+    border-color: #bac3ca; }
     .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
       background-color: #555; }
     .navbar-default .navbar-toggle .icon-bar {
-      background-color: #FFF; }
+      background-color: #bac3ca; }
 	.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
     background-color: #2b2b2b;
     color: #555; }
@@ -3978,7 +3978,7 @@ tbody.collapse.in {
   .navbar-inverse .navbar-brand {
     color: #777777; }
     .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus {
-      color: #fff;
+      color: #bac3ca;
       background-color: transparent; }
 
   .navbar-inverse .navbar-text {
@@ -3986,10 +3986,10 @@ tbody.collapse.in {
   .navbar-inverse .navbar-nav > li > a {
     color: #777777; }
     .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
-      color: #fff;
+      color: #bac3ca;
       background-color: transparent; }
   .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
-    color: #fff;
+    color: #bac3ca;
     background-color: #090909; }
   .navbar-inverse .navbar-nav > .disabled > a, .navbar-inverse .navbar-nav > .disabled > a:hover, .navbar-inverse .navbar-nav > .disabled > a:focus {
     color: #3e3e3e;
@@ -4000,13 +4000,13 @@ tbody.collapse.in {
       background-color: #191919; }
 
     .navbar-inverse .navbar-toggle .icon-bar {
-      background-color: #fff; }
+      background-color: #bac3ca; }
   .navbar-inverse .navbar-collapse,
   .navbar-inverse .navbar-form {
     border-color: #101010; }
   .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
     background-color: #090909;
-    color: #fff; }
+    color: #bac3ca; }
   @media (max-width: 767px) {
     .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
       border-color: #090909; }
@@ -4015,11 +4015,11 @@ tbody.collapse.in {
     .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
       color: #777777; }
       .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
-        color: #fff;
+        color: #bac3ca;
         background-color: transparent; }
 
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
-      color: #fff;
+      color: #bac3ca;
       background-color: #090909; }
 
     .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
@@ -4029,11 +4029,11 @@ tbody.collapse.in {
   .navbar-inverse .navbar-link {
     color: #777777; }
     .navbar-inverse .navbar-link:hover {
-      color: #fff; }
+      color: #bac3ca; }
   .navbar-inverse .btn-link {
     color: #777777; }
     .navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:focus {
-      color: #fff; }
+      color: #bac3ca; }
 
     .navbar-inverse .btn-link[disabled]:hover, .navbar-inverse .btn-link[disabled]:focus, fieldset[disabled] .navbar-inverse .btn-link:hover, fieldset[disabled] .navbar-inverse .btn-link:focus {
       color: #3e3e3e; }
@@ -4067,7 +4067,7 @@ tbody.collapse.in {
       padding: 6px 12px;
       line-height: 1.428571429;
       text-decoration: none;
-      color: #FFFFFF;
+      color: #bac3ca;
       background-color: #273946;
       border: 1px solid #191919;
       margin-left: -1px;
@@ -4084,7 +4084,7 @@ tbody.collapse.in {
   .pagination > li > a:hover, .pagination > li > a:focus,
   .pagination > li > span:hover,
   .pagination > li > span:focus {
-    color: #FFFFFF;
+    color: #bac3ca;
     background-color: #d77610; }
 
   .pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus,
@@ -4092,7 +4092,7 @@ tbody.collapse.in {
   .pagination > .active > span:hover,
   .pagination > .active > span:focus {
     z-index: 2;
-    color: #FFFFFF;
+    color: #bac3ca;
     background-color: #d77610;
     cursor: default; }
 
@@ -4102,7 +4102,7 @@ tbody.collapse.in {
   .pagination > .disabled > a,
   .pagination > .disabled > a:hover,
   .pagination > .disabled > a:focus {
-    color: #FFF;
+    color: #bac3ca;
     background-color: #273946;
     cursor: not-allowed; }
 
@@ -4149,7 +4149,7 @@ tbody.collapse.in {
     .pager li > span {
       display: inline-block;
       padding: 5px 14px;
-      background-color: #fff;
+      background-color: #bac3ca;
       border: 1px solid #ddd;
       border-radius: 15px; }
     .pager li > a:hover,
@@ -4168,7 +4168,7 @@ tbody.collapse.in {
   .pager .disabled > a:focus,
   .pager .disabled > span {
     color: #777777;
-    background-color: #fff;
+    background-color: #bac3ca;
     cursor: not-allowed; }
 
 
@@ -4178,7 +4178,7 @@ tbody.collapse.in {
   font-size: 75%;
   font-weight: bold;
   line-height: 1;
-  color: #fff;
+  color: #bac3ca;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
@@ -4190,7 +4190,7 @@ tbody.collapse.in {
     top: -1px; }
 
 a.label:hover, a.label:focus {
-  color: #fff;
+  color: #bac3ca;
   text-decoration: none;
   cursor: pointer; }
 
@@ -4244,7 +4244,7 @@ a.label:hover, a.label:focus {
   padding: 3px 7px;
   font-size: 12px;
   font-weight: bold;
-  color: #fff;
+  color: #bac3ca;
   line-height: 1;
   vertical-align: baseline;
   white-space: nowrap;
@@ -4261,12 +4261,12 @@ a.label:hover, a.label:focus {
     padding: 1px 5px; }
   a.list-group-item.active > .badge, .nav-pills > .active > a > .badge {
     color: #D77610;
-    background-color: #fff; }
+    background-color: #bac3ca; }
   .nav-pills > li > a > .badge {
     margin-left: 3px; }
 
 a.badge:hover, a.badge:focus {
-  color: #fff;
+  color: #bac3ca;
   text-decoration: none;
   cursor: pointer; }
 
@@ -4305,7 +4305,7 @@ a.badge:hover, a.badge:focus {
   padding: 4px;
   margin-bottom: 20px;
   line-height: 1.428571429;
-  background-color: #fff;
+  background-color: #bac3ca;
   border: 1px solid #ddd;
   border-radius: 3px;
   -webkit-transition: all 0.2s ease-in-out;
@@ -4367,7 +4367,7 @@ a.thumbnail.active {
 .alert-info {
   background-color: #25323a;
   border: 1px solid #191919;
-	color: #FFF;}
+	color: #bac3ca;}
   .alert-info hr {
     border-top-color: #DA4829; }
   .alert-info .alert-link {
@@ -4376,7 +4376,7 @@ a.thumbnail.active {
 .alert-warning {
   background-color:#1c2931;
   border: 1px solid #b92515;
-  color: #fff; }
+  color: #bac3ca; }
   .alert-warning hr {
     border-top-color: #f7e1b5; }
   .alert-warning .alert-link {
@@ -4402,7 +4402,7 @@ a.thumbnail.active {
     background-position: 0 0; } }
 .progress {
   margin-bottom: 3px;
-  color: #FFF;
+  color: #bac3ca;
   overflow: hidden;
   height: 20px;
   background-color: #162026;
@@ -4417,7 +4417,7 @@ a.thumbnail.active {
   height: 100%;
   font-size: 12px;
   line-height: 20px;
-  color: #fff;
+  color: #bac3ca;
   text-align: center;
   background-color: #d77610;
   position: relative;
@@ -4468,7 +4468,7 @@ a.thumbnail.active {
 
 .progress-bar-warning {
   background-color: #CCB60F;
-  color: #FFFFFF !important; }
+  color: #bac3ca !important; }
   .progress-striped .progress-bar-warning {
     background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
     background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@@ -4517,7 +4517,7 @@ a.thumbnail.active {
   display: block;
   padding: 6px 8px;
   margin-bottom: -1px;
-  background-color: #1c2931; }
+  background-color: #162026; }
   .list-group-item:last-child {
     margin-bottom: 0; }
   .list-group-item > .badge {
@@ -4526,7 +4526,7 @@ a.thumbnail.active {
     margin-right: 5px; }
 
 a.list-group-item {
-  color: #FFF;
+  color: #bac3ca;
   border-radius: 0;
   outline:0; }
 
@@ -4534,8 +4534,8 @@ a.list-group-item {
     color: #191919; }
   a.list-group-item:hover, a.list-group-item:focus {
     text-decoration: none;
-    color: #FFF;
-    background-color: #131C22; }
+    color: #bac3ca;
+    background-color: #0e181e; }
 
     a.list-group-item:hover:before, a.list-group-item:focus:before {
       background-color: #12222B;
@@ -4598,7 +4598,7 @@ a.list-group-item-success {
     color: #9BD275;
     background-color: #8dcc62; }
   a.list-group-item-success.active, a.list-group-item-success.active:hover, a.list-group-item-success.active:focus {
-    color: #fff;
+    color: #bac3ca;
     background-color: #9BD275;
     border-color: #9BD275; }
 
@@ -4614,7 +4614,7 @@ a.list-group-item-info {
     color: #31708f;
     background-color: #c4e3f3; }
   a.list-group-item-info.active, a.list-group-item-info.active:hover, a.list-group-item-info.active:focus {
-    color: #fff;
+    color: #bac3ca;
     background-color: #31708f;
     border-color: #31708f; }
 
@@ -4630,7 +4630,7 @@ a.list-group-item-warning {
     color: #f0ad4e;
     background-color: #faf2cc; }
   a.list-group-item-warning.active, a.list-group-item-warning.active:hover, a.list-group-item-warning.active:focus {
-    color: #fff;
+    color: #bac3ca;
     background-color: #f0ad4e;
     border-color: #f0ad4e; }
 
@@ -4646,7 +4646,7 @@ a.list-group-item-danger {
     color: #F05050;
     background-color: #ee3939; }
   a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-group-item-danger.active:focus {
-    color: #fff;
+    color: #bac3ca;
     background-color: #F05050;
     border-color: #F05050; }
 
@@ -4836,7 +4836,7 @@ a.list-group-item-danger {
 	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.30);
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.30); }
   .panel-default > .panel-heading {
-	color: #fff;
+	color: #bac3ca;
 	border-color: #191919; }
     .panel-default > .panel-heading + .panel-collapse > .panel-body {
       border-top-color: #191919; }
@@ -4849,13 +4849,13 @@ a.list-group-item-danger {
 	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.30);
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.30); }
   .panel-primary > .panel-heading {
-    color: #FFF;
+    color: #bac3ca;
     border-color: #191919; }
     .panel-primary > .panel-heading + .panel-collapse > .panel-body {
       border-top-color: #D77610; }
     .panel-primary > .panel-heading .badge {
       color: #D77610;
-      background-color: #fff; }
+      background-color: #bac3ca; }
   .panel-primary > .panel-footer + .panel-collapse > .panel-body {
     border-bottom-color: #D77610; }
 
@@ -4961,7 +4961,7 @@ a.list-group-item-danger {
   font-size: 21px;
   font-weight: bold;
   line-height: 1;
-  color: #FFFFFF;
+  color: #bac3ca;
   text-shadow: 0 1px 0 #000;
   opacity: 1;
   filter: alpha(opacity=100); }
@@ -5047,7 +5047,7 @@ button.close {
   border-bottom: 1px solid #191919;
   min-height: 16.42857px;
   background-color: #d77610;
-  color: #FFF; }
+  color: #bac3ca; }
 
 .modal-header .close {
   margin-top: -2px; }
@@ -5059,16 +5059,16 @@ button.close {
 .modal-body {
   position: relative;
   padding: 5px;
-  background-color: #131c22;}
+  background-color: #0e181e;}
 .modal-body .table-hover > tbody > tr:hover > td,
 .modal-body .table-hover > tbody > tr:hover > th {
   background-color: #263640;
-  color: #FFF; }
+  color: #bac3ca; }
 
 .modal-footer {
   padding: 5px;
   text-align: right;
-  background-color: #131c22;
+  background-color: #0e181e;
   border-top: 1px solid inherit; }
   .modal-footer:before, .modal-footer:after {
     content: " ";
@@ -5132,7 +5132,7 @@ button.close {
 .tooltip-inner {
   max-width: 200px;
   padding: 3px 8px;
-  color: #fff;
+  color: #bac3ca;
   text-align: center;
   text-decoration: none;
   background-color: #000;
@@ -5199,7 +5199,7 @@ button.close {
   max-width: 276px;
   padding: 1px;
   text-align: left;
-  background-color: #fff;
+  background-color: #bac3ca;
   background-clip: padding-box;
   border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, 0.30);
@@ -5259,7 +5259,7 @@ button.close {
     bottom: 1px;
     margin-left: -10px;
     border-bottom-width: 0;
-    border-top-color: #fff; }
+    border-top-color: #bac3ca; }
 .popover.right > .arrow {
   top: 50%;
   left: -11px;
@@ -5272,7 +5272,7 @@ button.close {
     left: 1px;
     bottom: -10px;
     border-left-width: 0;
-    border-right-color: #fff; }
+    border-right-color: #bac3ca; }
 .popover.bottom > .arrow {
   left: 50%;
   margin-left: -11px;
@@ -5285,7 +5285,7 @@ button.close {
     top: 1px;
     margin-left: -10px;
     border-top-width: 0;
-    border-bottom-color: #fff; }
+    border-bottom-color: #bac3ca; }
 .popover.left > .arrow {
   top: 50%;
   right: -11px;
@@ -5297,7 +5297,7 @@ button.close {
     content: " ";
     right: 1px;
     border-right-width: 0;
-    border-left-color: #fff;
+    border-left-color: #bac3ca;
     bottom: -10px; }
 
 .carousel {
@@ -5352,7 +5352,7 @@ button.close {
   opacity: 0.5;
   filter: alpha(opacity=50);
   font-size: 20px;
-  color: #fff;
+  color: #bac3ca;
   text-align: center;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
   .carousel-control.left {
@@ -5371,7 +5371,7 @@ button.close {
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); }
   .carousel-control:hover, .carousel-control:focus {
     outline: 0;
-    color: #fff;
+    color: #bac3ca;
     text-decoration: none;
     opacity: 0.9;
     filter: alpha(opacity=90); }
@@ -5418,7 +5418,7 @@ button.close {
     height: 10px;
     margin: 1px;
     text-indent: -999px;
-    border: 1px solid #fff;
+    border: 1px solid #bac3ca;
     border-radius: 10px;
     cursor: pointer;
     background-color: #000 \9;
@@ -5427,7 +5427,7 @@ button.close {
     margin: 0;
     width: 12px;
     height: 12px;
-    background-color: #fff; }
+    background-color: #bac3ca; }
 
 .carousel-caption {
   position: absolute;
@@ -5437,7 +5437,7 @@ button.close {
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
-  color: #fff;
+  color: #bac3ca;
   text-align: center;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
   .carousel-caption .btn {
@@ -5490,7 +5490,7 @@ button.close {
 
 .show {
   display: block !important;
-  color: #22C400; }
+  color: #bac3ca; }
 
 .invisible {
   visibility: hidden; }
@@ -5691,8 +5691,8 @@ html, body {
   height: 100%;
   font-family: 'SourceSansProRegular';
   scrollbar-width: thin;
-  scrollbar-color: #1c2931 #131c22;
-  background-color: #131c22;
+  scrollbar-color: #1c2931 #0e181e;
+  background-color: #0e181e;
 }
 
 body {
@@ -5723,8 +5723,8 @@ body {
   .page-content > .row {
     height: 100%; }
 .page-content-head .container-fluid {
-  color:#FFF;
-  background-color: #1a262d;
+  color:#bac3ca;
+  background-color: #172229;
   margin-left: 20px;
   margin-right: 20px;
   border-top: 1px solid #191919;
@@ -5733,11 +5733,12 @@ body {
   height:auto;
   padding: 7px 14px 5px 14px;
   -webkit-box-shadow: 0 3px 4px rgb(23, 23, 23);
-  box-shadow: 0 3px 4px rgb(23, 23, 23); }
+  box-shadow: 0 3px 4px rgb(23, 23, 23);
+  border-radius: 0.5em 0.5em 0.5em 0.5em; }
 
 .page-content-head, .content-box-head {
   padding-bottom: 2px;
-  padding-top: 8px;
+  padding-top: 10px;
   color:#000;}
   .page-content-head .navbar-nav, .content-box-head .navbar-nav {
     width: 100%; }
@@ -5747,7 +5748,7 @@ body {
 
 .page-content-main {
   min-height: calc(100% - 64px);
-  padding: 10px 0px 21px 0px; }
+  padding: 7px 0px 21px 0px; }
 
 .page-side {
   background: #172229;
@@ -5774,14 +5775,14 @@ body {
   position: fixed;
   height: 20px;
   background-color: #172229;
-  color:#FFF;
+  color:#bac3ca;
   border-top: 1px solid #191919;
 }
 
 .content-box {
   padding: 0px 0px;
   margin: 0px 0px;
-  background-color: none;
+  background-color: #162026 !important;
   border: 1px solid #111;
   -webkit-box-shadow: 0px 3px 3px rgba(17, 17, 17, 0.8);
   box-shadow: 0px 3px 3px rgba(17, 17, 17, 0.8); }
@@ -5826,13 +5827,13 @@ body {
     padding-top: 0 !important; } }
 
 .page-login {
-  background: #131c22; }
+  background: #121c22; }
   .page-login .container {
     min-height: 100%;
     margin-bottom: -60px; }
     .page-login .container:after {
       height: 60px; }
-.page-login .login-foot {color:#FFF;}
+.page-login .login-foot {color:#bac3ca;}
 
 .login-foot {
   font-size: 12px; }
@@ -5957,14 +5958,14 @@ main.page-content.col-lg-12 {
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item[aria-expanded="true"],
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapse.in > a.list-group-item.menu-level-3-item.active {
   color: #d77610 !important;
-  background-color: #131C22 !important;
+  background-color: #0e181e !important;
 }
 
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse > a.list-group-item,
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapse.in > a.list-group-item {
   padding-left: 10px !important;
   font-size: 14px !important;
-  background-color: #1c2931 !important;
+  background-color: #162026 !important;
   opacity: 0.98;
 }
 
@@ -5982,7 +5983,7 @@ main.page-content.col-lg-12 {
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapse.in > a.list-group-item:hover, a.list-group-item:focus {
   text-decoration: none !important;
   color: #D77610 !important;
-  background-color: #131C22 !important;
+  background-color: #0e181e !important;
 }
 
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item.active-menu-title,
@@ -5991,7 +5992,7 @@ main.page-content.col-lg-12 {
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item:focus,
 #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.active-menu.collapse.in >a.list-group-item.active {
   color: #D77610 !important;
-  background-color: #131C22 !important;
+  background-color: #0e181e !important;
 }
 
 /* Sub Level One */
@@ -6030,7 +6031,7 @@ main.page-content.col-lg-12 {
   color: #D77610 !important; }
 
 button.toggle-sidebar {
-  color:#FFF;
+  color:#bac3ca;
   background-color:transparent;
   font-size:14px;
   border:none;
@@ -6081,7 +6082,7 @@ button.toggle-sidebar {
  outline:0; }
 
 .nav-tabs > li.active > a {
-  background: #202f3a !important;
+  background: #162026 !important;
   outline:0; }
 
 .nav-tabs > li > a.visible-lg-inline-block:not(.pull-right) {
@@ -6103,7 +6104,7 @@ button.toggle-sidebar {
     border-radius: 0px;
     background: #818180; }
     .nav-tabs.nav-justified > li > a {
-      color: #FFFFFF;
+      color: #bac3ca;
       font-family: 'SourceSansProSemibold'; }
       @media (min-width: 768px) {
         .nav-tabs.nav-justified > li > a {
@@ -6190,18 +6191,18 @@ button.toggle-sidebar {
 .active-menu-title, .active-menu a {
   text-decoration: none;
   position: relative;
-  background-color: #131C22; }
+  background-color: #0e181e; }
   .active-menu-title:before, .active-menu a:before {
     width: 3px; }
   .active-menu-title.active, .active-menu a.active {
-	background-color: #131C22;
+	background-color: #0e181e;
   color: #d77610; }
 
 .active-menu a:before {
   background: #D77610; }
 
 .alert.alert-danger {
-  color: #FFF !important; }
+  color: #bac3ca !important; }
 
 .nav-tabs-justified > li > a, .nav-tabs.nav-justified > li > a, .nav-tabs.nav-justified > li > a {
   border-radius: 0 !important; }
@@ -6256,7 +6257,7 @@ select {
   overflow: hidden;
   border: 1px solid #191919;
   background-color: #21303a;
-  color: #FFF;
+  color: #bac3ca;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -6269,7 +6270,7 @@ select:hover, select:active, select:focus {
   overflow: hidden;
   border: 1px solid #191919;
   background-color: #21303a;
-  color: #FFF;
+  color: #bac3ca;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -6338,7 +6339,7 @@ label > input[type="radio"] {
 
 #ipsec .ipsec-tab {
 	background-color: #202f3a !important;
-	color: #FFF !important;
+	color: #bac3ca !important;
   opacity: 0.5;
 }
 
@@ -6349,15 +6350,15 @@ label > input[type="radio"] {
 }
 .fw_pass {
   background-color: #203a23 !important;
-  color:#FFF;
+  color:#bac3ca;
 }
 .fw_block {
   background-color: #551e1e !important;
-  color:#FFF;
+  color:#bac3ca;
 }
 .fw_nat {
   background-color: #7B681D !important;
-  color:#FFF;
+  color:#bac3ca;
 }
   /*additional extensions for theme-vicuna*/
 
@@ -6370,7 +6371,7 @@ textarea#update_status, textarea#update_status:hover {
   -webkit-box-shadow:none !important;
   box-shadow:none !important;
   border:none !important;
-  background-color: #25323a;
+  background-color: #162026;
 }
 
 .fa-toggle-off::before {
@@ -6409,15 +6410,15 @@ textarea#update_status, textarea#update_status:hover {
 }
 
 div.container-fluid >.fa-search::before, div.container-fluid >.fa-refresh::before {
-  color: #FFFFFF !important; }
+  color: #bac3ca !important; }
 
 .panel-heading h3:hover, h3:focus {
-  color: #FFFFFF;
+  color: #bac3ca;
   text-decoration: none;
 }
 
 h3:link {
-  color:#FFFFFF;text-decoration: underline;
+  color:#bac3ca;text-decoration: underline;
 }
 
 h3:hover, h3:focus {
@@ -6438,13 +6439,17 @@ h3:hover, h3:focus {
 
 .btn-group.bootstrap-select.open, .btn-group.bootstrap-select:hover {
   border-color: #191919 !important;
-  color:#FFFFFF !important;
+  color:#bac3ca !important;
 }
 
 .glyphicon.glyphicon-play.text-muted, .glyphicon.glyphicon-remove.text-muted, .glyphicon.glyphicon-remove-sign.text-muted, .glyphicon.glyphicon-info-sign.text-muted,.fa.fa-exclamation.fa-fw.text-muted,.fa.fa-arrows-h.fa-fw.text-muted,.fa.fa-long-arrow-left,.fa.fa-long-arrow-left::before,.fa.fa-info-circle.text-muted,.fa.fa-times-circle.text-muted,.fa.fa-times-circle.text-muted::before,.fa.fa-times.text-muted,.fa.fa-times.text-muted::before,.fa.fa-play.text-muted::before {
   color: #d7af10 !important;
 }
 
+.fa.fa-info-circle {
+  color: #D77610;
+}
+
 #system_log-widgets.content-box {
   border:none; box-shadow: none;
 }
@@ -6462,7 +6467,7 @@ h3:hover, h3:focus {
 }
 
 .no-data {
-  color: #FFF !important;
+  color: #bac3ca !important;
   background-color: #1a262d !important;
 }
 
@@ -6497,12 +6502,12 @@ input[type="checkbox"].checkbox-switch:checked + i::before, input[type="checkbox
 
 .bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover {
     background-color: #d77610 !important;
-    color: #ffffff !important;
+    color: #bac3ca !important;
 }
 
 .bootstrap-datetimepicker-widget table td span:hover {
     background: #d77610 !important;
-    color: #ffffff !important;
+    color: #bac3ca !important;
 }
 
 .modal-side > .p-15 {
@@ -6513,7 +6518,7 @@ input[type="checkbox"].checkbox-switch:checked + i::before, input[type="checkbox
   border-bottom: 1px solid #4a4a4a;
   min-height: 16.42857px;
   background-color: #243139;
-  color: #FFF;
+  color: #bac3ca;
 }
 
 .modal-side {
@@ -6521,7 +6526,7 @@ input[type="checkbox"].checkbox-switch:checked + i::before, input[type="checkbox
 }
 
 .panel-report-tools:hover {
-  color: #fff !important;
+  color: #bac3ca !important;
 }
 
 .alert-primary {
@@ -6530,11 +6535,11 @@ input[type="checkbox"].checkbox-switch:checked + i::before, input[type="checkbox
 }
 
 label.btn.au-target {
-  color: #FFF !important;
+  color: #bac3ca !important;
 }
 
 .preloader-wrapper {
-  background-color:#131c22 !important;
+  background-color:#121c22 !important;
 }
 
 .border-bottom {
@@ -6558,7 +6563,7 @@ ul.jqtree-tree .jqtree-toggler:hover {
 }
 
 ul.jqtree-tree .jqtree-toggler {
-  color:#fff !important;
+  color:#bac3ca !important;
 }
 
 ul.jqtree-tree .jqtree-title {
@@ -6580,7 +6585,7 @@ ul.jqtree-tree .jqtree-title {
 
 .interface-table-tr td {
   background-color: #d77610 !important;
-  color: #FFF !important;
+  color: #bac3ca !important;
 }
 
 .table.border {
@@ -6601,7 +6606,7 @@ ul.jqtree-tree .jqtree-title {
 
 router-view .text-success.m-r-5 {
   font-weight: bold;
-  color: #fff;
+  color: #bac3ca;
 }
 
 router-view .text-danger.m-r-5 {
@@ -6618,5 +6623,5 @@ border: 1px solid #191919 !important;
 }
 
 #introduction a.btn-info {
-  color: #FFF !important;
+  color: #bac3ca !important;
 }