diff --git a/src/app/pages/dashboard/calendar/calendar.scss b/src/app/pages/dashboard/calendar/calendar.scss
index 5860cff9..105989f6 100644
--- a/src/app/pages/dashboard/calendar/calendar.scss
+++ b/src/app/pages/dashboard/calendar/calendar.scss
@@ -1,9 +1,8 @@
 @import '../../../theme/sass/conf/conf';
 
-div.blurCalendar {
+div.blurCalendar{
   font-size: 12px;
 }
-
 .fc {
   direction: ltr;
   text-align: left;
@@ -58,7 +57,7 @@ div.blurCalendar {
   }
 
   th, td {
-    border: 1px solid;
+    border: 1px solid rgba(255,255,255,0.3);
     padding: 0;
     vertical-align: top;
   }
@@ -97,11 +96,11 @@ div.blurCalendar {
 
 .fc-unthemed {
   th, td, hr, thead, tbody, .fc-row, .fc-popover {
-    border-color: $border;
+    border-color: rgba($border, 0.3);
   }
 
   .fc-popover {
-    background-color: #ffffff;
+    background-color: $default;
     border: 1px solid;
 
     .fc-header {
@@ -120,12 +119,12 @@ div.blurCalendar {
   }
 
   .fc-today {
-    background: rgba(255, 255, 255, 0.15);
+    background: rgba(255,255,255,0.15);
   }
 }
 
 .fc-highlight {
-  background: rgba(255, 255, 255, 0.25);
+  background: rgba(255,255,255,0.25);
   opacity: .3;
 }
 
@@ -333,7 +332,7 @@ div.blurCalendar {
 .fc-event,
 .fc-event:hover,
 .ui-widget .fc-event {
-  color: #ffffff;
+  color: $label-text;
   text-decoration: none;
 }
 
@@ -666,7 +665,7 @@ a.fc-more {
 
   .fc-bg {
     z-index: 1;
-    background: #fff;
+    background: $default;
     opacity: .25;
     filter: alpha(opacity=25);
   }
@@ -720,55 +719,48 @@ a.fc-more {
   }
 }
 
-.fc-day-grid-container.fc-scroller {
-  height: auto !important;
+.fc-day-grid-container.fc-scroller  {
+  height: auto!important;
 }
 
-body.badmin-transparent {
+.calendar-panel.panel .panel-body{
+  padding: 0;
+}
 
-  .calendar-panel.card .card-body {
-    padding: 0;
-  }
+.fc-body > tr > .fc-widget-content{
+  border: none;
+}
 
-  .fc-body > tr > .fc-widget-content {
-    border: none;
+.fc-head{
+  color: $label-text;
+  background-color: $primary;
+  td, th{
+    border:none;
   }
-
-  .fc-head {
-    color: $default;
-    background-color: $primary;
-    td, th {
-      border: none;
-    }
-    div.fc-widget-header {
-      padding: 5px 0;
-    }
-  }
-
-  .fc td {
-    border-color: rgba(255, 255, 255, 0.1);
-  }
-
-  .fc-today-button, .fc-month-button, .fc-agendaWeek-button, .fc-agendaDay-button {
-    display: none;
-  }
-  .blurCalendar {
-    margin-top: 15px;
-  }
-  .fc-prev-button, .fc-next-button {
-    position: absolute;
-    background: transparent;
-    box-shadow: none;
-    border: none;
-    color: $default;
-  }
-  .fc-next-button {
-    left: 30px;
-  }
-  .fc-prev-button {
-  }
-  .fc-day-number {
-    color: $default;
-    opacity: 0.9;
+  div.fc-widget-header{
+    padding: 5px 0;
   }
 }
+
+.fc-today-button, .fc-month-button, .fc-agendaWeek-button, .fc-agendaDay-button  {
+  display: none;
+}
+.blurCalendar{
+  margin-top: 15px;
+}
+.fc-prev-button, .fc-next-button{
+  position: absolute;
+  background: transparent;
+  box-shadow: none;
+  border: none;
+  color: $default-text;
+}
+.fc-next-button {
+  left: 30px;
+}
+.fc-prev-button {
+}
+.fc-day-number{
+  color: $default-text;
+  opacity: 0.9;
+}
diff --git a/src/app/pages/dashboard/feed/feed.scss b/src/app/pages/dashboard/feed/feed.scss
index bb036726..9c62a112 100644
--- a/src/app/pages/dashboard/feed/feed.scss
+++ b/src/app/pages/dashboard/feed/feed.scss
@@ -1,25 +1,21 @@
 @import '../../../theme/sass/conf/conf';
 
-.feed-panel .card-body {
+.feed-panel .panel-body{
   padding: 10px 0;
 }
 
 .feed-message {
-  $text-message-color: $default;
+  $text-message-color: $default-text;
   $video-message-color: $danger;
   $image-message-color: $success;
   $geo-message-color: $primary;
-  padding: 10px 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+  padding: 10px 0 ;
+  border-bottom: 1px solid rgba(0,0,0,0.12);
+  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12);
   &:first-child {
     padding-top: 0;
   }
 
-  .hidden {
-    display: none!important;
-  }
-
   .message-icon {
     cursor: pointer;
     width: 60px;
@@ -86,7 +82,7 @@
     border-radius: 5px;
     margin: 0 0 0 80px;
     padding: 5px 20px;
-    color: #fff;
+    color: $default-text;
     width: 280px;
     height: 70px;
 
@@ -142,7 +138,7 @@
       padding-top: 10px;
       width: 100%;
       height: auto;
-      float: none !important;
+      float: none!important;
     }
   }
 
@@ -162,58 +158,65 @@
   }
 }
 
-.line-clamp {
-  display: block;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  position: relative;
 
-  line-height: 1.2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 0 !important;
+
+.line-clamp
+{
+  display            : block;
+  display            : -webkit-box;
+  -webkit-box-orient : vertical;
+  position           : relative;
+
+  line-height        : 1.2;
+  overflow           : hidden;
+  text-overflow      : ellipsis;
+  padding            : 0 !important;
 }
 
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  .line-clamp:after {
-    content: '...';
-    text-align: right;
-    bottom: 0;
-    right: 0;
-    width: 25%;
-    display: block;
-    position: absolute;
-    height: calc(1em * 1.2);
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  .line-clamp:after
+  {
+    content    : '...';
+    text-align : right;
+    bottom     : 0;
+    right      : 0;
+    width      : 25%;
+    display    : block;
+    position   : absolute;
+    height     : calc(1em * 1.2);
   }
 }
 
-@supports (-webkit-line-clamp: 1) {
-  .line-clamp:after {
-    display: none !important;
+
+@supports (-webkit-line-clamp: 1)
+{
+  .line-clamp:after
+  {
+    display : none !important;
   }
 }
-
-.line-clamp-1 {
-  -webkit-line-clamp: 1;
-  height: calc(1em * 1.2 * 1);
+.line-clamp-1
+{
+  -webkit-line-clamp : 1;
+  height             : calc(1em * 1.2 * 1);
 }
-
-.line-clamp-2 {
-  -webkit-line-clamp: 2;
-  height: calc(1em * 1.2 * 2);
+.line-clamp-2
+{
+  -webkit-line-clamp : 2;
+  height             : calc(1em * 1.2 * 2);
 }
-
-.line-clamp-3 {
-  -webkit-line-clamp: 3;
-  height: calc(1em * 1.2 * 3);
+.line-clamp-3
+{
+  -webkit-line-clamp : 3;
+  height             : calc(1em * 1.2 * 3);
 }
-
-.line-clamp-4 {
-  -webkit-line-clamp: 4;
-  height: calc(1em * 1.2 * 4);
+.line-clamp-4
+{
+  -webkit-line-clamp : 4;
+  height             : calc(1em * 1.2 * 4);
 }
-
-.line-clamp-5 {
-  -webkit-line-clamp: 5;
-  height: calc(1em * 1.2 * 5);
+.line-clamp-5
+{
+  -webkit-line-clamp : 5;
+  height             : calc(1em * 1.2 * 5);
 }
diff --git a/src/app/pages/dashboard/popularApp/popularApp.scss b/src/app/pages/dashboard/popularApp/popularApp.scss
index 9c5e2c2e..241870ff 100644
--- a/src/app/pages/dashboard/popularApp/popularApp.scss
+++ b/src/app/pages/dashboard/popularApp/popularApp.scss
@@ -1,30 +1,36 @@
 @import "../../../theme/sass/conf/conf";
 
-.card.popular-app {
-  &>.card-body {
+.panel.popular-app {
+  &>.panel-body {
     padding: 0;
   }
 
-  .popular-app-img {
+  .popular-app-img-container {
     position: relative;
-    background: rgba(0, 0, 0, 0.5);
     padding: 30px 0;
     height: 260px;
     border-top-right-radius: 5px;
     border-top-left-radius: 5px;
-    img {
-      max-width: 60%;
-      max-height: 70%;
+    .popular-app-img {
+      width: 260px;
       position: absolute;
       transform: translateY(-50%) translate(-50%);
       top: 50%;
       left: 50%;
+
+      .logo-text {
+        display: inline-block;
+        margin: 10px;
+        font-size: 26px;
+        color: $default-text;
+      }
     }
   }
   .popular-app-cost {
     font-size: 20px;
     padding: 20px 22px;
-    border-bottom: 1px solid $border;
+    border-bottom: 1px solid $border-light;
+    border-top: 1px solid $border-light;
   }
   .popular-app-info {
     padding: 20px 22px;
@@ -42,13 +48,6 @@
   }
 }
 
-body.badmin-transparent {
-  .popular-app-img {
-    border-top-right-radius: 5px;
-    border-top-left-radius: 5px;
-  }
-  .popular-app-cost {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
-  }
-}
\ No newline at end of file
+.blur-theme .panel.popular-app .popular-app-img-container {
+  background: rgba(0, 0, 0, 0.5);
+}
diff --git a/src/app/pages/dashboard/todo/todo.scss b/src/app/pages/dashboard/todo/todo.scss
index 299da290..52b9d2b5 100644
--- a/src/app/pages/dashboard/todo/todo.scss
+++ b/src/app/pages/dashboard/todo/todo.scss
@@ -1,6 +1,5 @@
 @import '../../../theme/sass/conf/conf';
 
-
 input.task-todo {
   margin-bottom: 8px;
 }
@@ -25,11 +24,11 @@ ul.todo-list {
       right: 12px;
       font-size: 32px;
       transition: color 0.2s;
-      color: $input-border;
+      color: rgba($input-border, 0.5);
       visibility: hidden;
       line-height: 42px;
       &:hover {
-        color: $danger-dark;
+        color: $input-border;
       }
     }
     &:hover {
@@ -40,34 +39,13 @@ ul.todo-list {
 
     &.checked {
       .todo-text {
-        color: #BFBFBF;
+        color: $default-text;
       }
       &:before {
         background: $input-border !important;
       }
     }
 
-    @mixin mark($color) {
-      i.mark {
-        background: $color;
-      }
-    }
-    &.primary {
-      @include mark($primary);
-    }
-    &.danger {
-      @include mark($danger);
-    }
-    &.success {
-      @include mark($success);
-    }
-    &.info {
-      @include mark($info);
-    }
-    &.warning {
-      @include mark($warning);
-    }
-
     i.mark {
       display: block;
       position: absolute;
@@ -102,9 +80,6 @@ ul.todo-list {
 }
 
 label.todo-checkbox {
-  padding-left: 0;
-  margin-bottom: 0;
-
   width: 100%;
   padding-right: 25px;
   min-height: 16px;
@@ -124,8 +99,8 @@ label.todo-checkbox {
   display: none;
 }
 
-body.badmin-transparent {
-  .todo-panel.card {
+.task-todo-container.transparent {
+  .todo-panel.panel {
     color: white;
     opacity: 0.9;
   }
@@ -175,11 +150,6 @@ body.badmin-transparent {
           -webkit-filter: blur(3px);
         }
       }
-      &.primary, &.danger,&.success, &.info, &.warning {
-        i.mark {
-          background-color: transparent;
-        }
-      }
       i.remove-todo {
         color: white;
         opacity: 0.4;
@@ -190,12 +160,12 @@ body.badmin-transparent {
       }
       i.mark {
         min-width: 40px;
-        background-color: transparent;
+        display: none;
       }
       label.todo-checkbox > span {
         &:before {
           position: absolute;
-          color: white;
+          color: $default-text;
           content: '\f10c';
           float: none;
           margin-right: 6px;
@@ -205,11 +175,7 @@ body.badmin-transparent {
       &.checked {
         label.todo-checkbox > span {
           &:before {
-            margin-right: 0;
-            position: absolute;
-            content: '';
-            background-size: contain;
-            background: url($images-root + "app/todo/check-icon.png") no-repeat;
+            content: '\f00c';
           }
         }
       }
diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.scss b/src/app/pages/dashboard/trafficChart/trafficChart.scss
index 42ae5a47..9ec65f4a 100644
--- a/src/app/pages/dashboard/trafficChart/trafficChart.scss
+++ b/src/app/pages/dashboard/trafficChart/trafficChart.scss
@@ -1,22 +1,34 @@
 @import '../../../theme/sass/conf/conf';
 
-.chart-area {
-  width: 300px;
-  height: 300px;
-}
-
 .channels-block {
   width: 100%;
   position: relative;
 }
 
+.channels-block.transparent {
+  .traffic-chart canvas{
+    border: 10px solid rgba(0,0,0,0.35);
+    box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset;
+    border-radius: 150px;
+  }
+
+  .chart-bg{
+    position: absolute;
+    width: 180px;
+    height: 180px;
+    left: 60px;
+    top: 60px;
+    background-color: rgba(0,0,0,0.35);
+    border-radius: 100px;
+  }
+}
+
 .channels-info {
   display: inline-block;
   width: calc(100% - 370px);
   margin-left: 70px;
   margin-top: -20px;
 }
-
 .small-container {
   .channels-info {
     display: none;
@@ -29,7 +41,7 @@
     font-size: 18px;
     opacity: 0.9;
   }
-  .channel-number {
+  .channel-number{
     display: inline-block;
     float: right;
   }
@@ -44,7 +56,7 @@
 
 .traffic-legend {
   display: inline-block;
-  padding: 70px 0 0 0;
+  padding: 70px 0 0 0px;
   width: 160px;
 }
 
@@ -75,10 +87,6 @@
   height: 300px;
   position: relative;
   float: left;
-  //canvas{
-  //  border: 10px solid rgba(0, 0, 0, 0.34902);
-  //  border-radius: 180px;
-  //}
 }
 
 .traffic-text {
@@ -109,79 +117,67 @@
   border-radius: 0;
   width: 100%;
   margin-bottom: 0;
-  background-color: rgba(0, 0, 0, 0.25);
-  .progress-bar {
+  background-color: $progress-background;
+  box-shadow: none;
+  .progress-bar{
     height: 4px;
-    background-color: white;
+    background-color: $progress-default;
+    box-shadow: none;
   }
 }
 
-.legend-color {
+.legend-color{
   width: 30px;
   height: 30px;
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
+  box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.25);
   position: relative;
   top: 27px;
   border-radius: 15px;
   left: -45px;
 }
 
-.traffic-chart canvas {
-  border: 10px solid rgba(0, 0, 0, 0.0);
-  border-radius: 150px;
-}
-
-.chart-bg {
-  background-color: rgba(0, 0, 0, 0.35);
-  position: absolute;
-  border-radius: 100px;
-  width: 180px;
-  height: 180px;
-  left: 60px;
-  top: 60px;
-}
-
 @media (max-width: $resM) {
-  div.channels-info {
+  div.channels-info{
     display: block;
     width: calc(100% - 88px);
     margin-top: -65px;
     margin-bottom: 10px;
   }
-  .card.medium-card.traffic-panel {
+  .panel.medium-panel.traffic-panel{
     height: auto;
   }
-  .traffic-chart {
+  .traffic-chart{
     position: inherit;
     float: none;
     margin: 0 auto;
   }
-  .chart-bg {
+  .chart-bg{
     left: calc(50% - 90px);
   }
 }
 
-@media (max-width: 1465px) and (min-width: 1199px) {
-  .channels-info {
+@media (max-width: 1465px) and (min-width: 1199px){
+  .channels-info{
     display: none;
   }
-  .traffic-chart {
+  .traffic-chart{
     position: inherit;
     float: none;
     margin: 0 auto;
   }
-  .chart-bg {
+  .chart-bg{
     left: calc(50% - 90px);
   }
 }
 
-@media (max-width: 380px) {
 
-  .traffic-chart {
+@media (max-width: 380px){
+
+  .traffic-chart{
     width: 240px;
   }
 
-  .canvas-holder {
+  .canvas-holder{
     width: 240px;
     height: 240px;
   }
@@ -190,8 +186,7 @@
     top: 30px;
   }
 }
-
-@media (max-width: 320px) {
+@media (max-width: 320px){
   .chart-bg {
     left: 50px;
     top: 50px;
@@ -199,11 +194,3 @@
     height: 142px;
   }
 }
-
-body.badmin-transparent {
-  .traffic-chart canvas {
-    border: 10px solid rgba(0, 0, 0, 0.35);
-    box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset;
-    border-radius: 150px;
-  }
-}
diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.service.ts b/src/app/pages/dashboard/trafficChart/trafficChart.service.ts
index 8472188a..b30e1cf3 100644
--- a/src/app/pages/dashboard/trafficChart/trafficChart.service.ts
+++ b/src/app/pages/dashboard/trafficChart/trafficChart.service.ts
@@ -7,22 +7,34 @@ export class TrafficChartService {
   private _palette = layoutColors.bgColorPalette;
   private _data = [
     {
-      value: 2000,
-      color: this._palette.white,
-      highlight: this._palette.whiteDark,
-      label: 'Ad Campaigns',
-      percentage: 87,
-      order: 0,
-    },
-    {
-      value: 400,
+      value: 1000,
       color: this._palette.gossip,
       highlight: this._palette.gossipDark,
-      label: 'Other',
+      label: 'Ad Campaigns',
       percentage: 17,
+      order: 0,
+    },{
+      value: 1400,
+      color: this._palette.white,
+      highlight: this._palette.whiteDark,
+      label: 'Other',
+      percentage: 87,
       order: 1,
-    },
-    {
+    }, {
+      value: 1500,
+      color: this._palette.blueStone,
+      highlight: this._palette.blueStoneDark,
+      label: 'Search engines',
+      percentage: 22,
+      order: 4,
+    }, {
+      value: 1000,
+      color: this._palette.surfieGreen,
+      highlight: this._palette.surfieGreenDark,
+      label: 'Referral Traffic',
+      percentage: 70,
+      order: 3,
+    }, {
       value: 1200,
       color: this._palette.silverTree,
       highlight: this._palette.silverTreeDark,
@@ -30,22 +42,6 @@ export class TrafficChartService {
       percentage: 38,
       order: 2,
     },
-    {
-      value: 1000,
-      color: this._palette.surfieGreen,
-      highlight: this._palette.surfieGreenDark,
-      label: 'Referral Traffic',
-      percentage: 70,
-      order: 3,
-    },
-    {
-      value: 1500,
-      color: this._palette.blueStone,
-      highlight: this._palette.blueStoneDark,
-      label: 'Search engines',
-      percentage: 22,
-      order: 4,
-    }
   ];
 
   getData() {
diff --git a/src/app/pages/maps/components/leafletMaps/leafletMaps.scss b/src/app/pages/maps/components/leafletMaps/leafletMaps.scss
index 76cb10f1..adaa6a3a 100644
--- a/src/app/pages/maps/components/leafletMaps/leafletMaps.scss
+++ b/src/app/pages/maps/components/leafletMaps/leafletMaps.scss
@@ -1,10 +1,5 @@
 @import '../../../../theme/sass/conf/conf';
 
-.leaflet-maps {
-  width: 100%;
-  height: calc(100vh - 283px);
-}
-
 #leaflet-map {
   height: calc(100vh - 283px);
 }
@@ -250,7 +245,7 @@
     text-align: center;
     text-decoration: none;
     opacity: 0.8;
-    color: #fff;
+    color: $default-text;
     font-size: 17px;
     width: 20px;
     height: 20px;
@@ -280,7 +275,7 @@
 .leaflet-bar .leaflet-control-zoom-in,
 .leaflet-bar .leaflet-control-zoom-out {
   line-height: 18px;
-  &:hover {
+  &:hover{
     width: 20px;
     height: 20px;
   }
@@ -302,7 +297,7 @@
 
 .leaflet-control-layers {
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
-  background: #fff;
+  background: $default;
 }
 
 .leaflet-control-layers-toggle {
@@ -334,7 +329,7 @@
 .leaflet-control-layers-expanded {
   padding: 6px 10px 6px 6px;
   color: #333;
-  background: #fff;
+  background: $default;
 }
 
 .leaflet-control-layers-selector {
@@ -356,7 +351,7 @@
 /* attribution and scale controls */
 
 .leaflet-container .leaflet-control-attribution {
-  background: #fff;
+  background: $default;
   background: rgba(255, 255, 255, 0.7);
   margin: 0;
 }
@@ -399,7 +394,7 @@
   -moz-box-sizing: content-box;
   box-sizing: content-box;
 
-  background: #fff;
+  background: $default;
   background: rgba(255, 255, 255, 0.5);
 }
 
@@ -440,7 +435,7 @@
 .leaflet-popup-content {
   margin: 13px 19px;
   line-height: 1.4;
-  color: $default-text;
+  color: $dropdown-text;
 }
 
 .leaflet-popup-content p {
@@ -520,6 +515,6 @@
 /* div icon */
 
 .leaflet-div-icon {
-  background: #fff;
+  background: $default;
   border: 1px solid #666;
 }
diff --git a/src/app/pages/ui/components/grid/grid.scss b/src/app/pages/ui/components/grid/grid.scss
index 7de12949..bd7bee5c 100644
--- a/src/app/pages/ui/components/grid/grid.scss
+++ b/src/app/pages/ui/components/grid/grid.scss
@@ -7,24 +7,15 @@
     color: $default-text;
     text-align: center;
     font-size: 18px;
-    background-color: $border-light;
+    background-color: rgba($default-text, 0.3);
     padding: 12px 5px;
   }
 }
 
 .grid-h{
-  margin-top: 10px;
+  margin-top: 40px;
   margin-bottom: 0;
   &:first-child{
     margin-top: 0;
   }
 }
-
-body.badmin-transparent {
-  .show-grid div[class^=col-]{
-    div {
-      color: $default;
-      background-color: rgba(255, 255, 255, 0.3);
-    }
-  }
-}
diff --git a/src/app/theme/components/contentTop/contentTop.scss b/src/app/theme/components/contentTop/contentTop.scss
index 7fd45ffb..84a53854 100644
--- a/src/app/theme/components/contentTop/contentTop.scss
+++ b/src/app/theme/components/contentTop/contentTop.scss
@@ -7,7 +7,7 @@
 
 h1.al-title {
   font-weight: $font-bold;
-  color: #ffffff;
+  color: $default-text;
   float: left;
   width: auto;
   margin: 0;
@@ -19,14 +19,14 @@ h1.al-title {
 
 .al-breadcrumb {
   background: none;
-  color: #ffffff;
+  color: $default-text;
   padding: 0;
   margin: 0;
   float: right;
   padding-top: 11px;
   li {
     font-size: 18px;
-    font-weight: $font-light;
+    font-weight: $font-normal;
   }
 }
 
diff --git a/src/app/theme/components/msgCenter/msgCenter.scss b/src/app/theme/components/msgCenter/msgCenter.scss
index 692aaaaa..cf5824a2 100644
--- a/src/app/theme/components/msgCenter/msgCenter.scss
+++ b/src/app/theme/components/msgCenter/msgCenter.scss
@@ -29,7 +29,7 @@
       margin-left: 0;
     }
     & > a {
-      color: #ffffff;
+      color: $sidebar-text;
       text-decoration: none;
       font-size: 13px;
       position: relative;
@@ -37,7 +37,7 @@
         display: inline-block;
         min-width: 10px;
         padding: 2px 4px 2px 4px;
-        color: #ffffff;
+        color: $sidebar-text;
         vertical-align: baseline;
         white-space: nowrap;
         text-align: center;
@@ -113,20 +113,21 @@
   left: auto;
   right: -47px;
   top: 26px;
-  @include scrollbars(.4em, rgba(0, 0, 0, 0.5), #fff);
+  @include scrollbars(.4em, rgba(0,0,0,0.5), #fff);
   .header {
     padding: 10px 12px;
-    border-bottom: 1px solid $border-light;
+    border-bottom: 1px solid $default;
     font-size: 12px;
     strong {
       float: left;
+      color: $dropdown-text;
     }
     & > a {
       float: right;
       margin-left: 12px;
       text-decoration: none;
       &:hover {
-        color: $default-text;
+        color: $dropdown-text;
       }
     }
   }
@@ -135,11 +136,11 @@
     overflow: scroll;
     overflow-x: hidden;
     & > a {
-      border-top: 1px solid $border-light;
+      border-top: 1px solid $default;
       padding: 10px 12px;
       display: block;
       text-decoration: none;
-      color: $default-text;
+      color: $dropdown-text;
       font-size: 12px;
       &:first-child {
         border-top: none;
@@ -150,7 +151,7 @@
         img {
           width: 36px;
           height: 36px;
-          &.photo-msg-item {
+          &.photo-msg-item{
             border-radius: 18px;
           }
         }
@@ -193,14 +194,14 @@
     }
   }
   & > a {
-    border-top: 1px solid $border-light;
+    border-top: 1px solid $default;
     display: block;
     text-align: center;
     padding: 10px;
     font-size: 12px;
     text-decoration: none;
     &:hover {
-      color: $default-text;
+      color: $dropdown-text;
     }
   }
 
@@ -212,10 +213,10 @@
       text-align: left;
       border: none;
       text-decoration: none;
-      color: $default-text;
+      color: $dropdown-text;
       padding: 4px 16px 4px 20px;
       &.signout {
-        border-top: 1px solid $border-light;
+        border-top: 1px solid $default;
       }
       i {
         margin-right: 10px;
@@ -248,7 +249,7 @@
       width: 0;
       height: 0;
       border: 10px solid transparent;
-      border-bottom-color: #ffffff;
+      border-bottom-color: $default;
     }
   }
 }
diff --git a/src/app/theme/components/pageTop/pageTop.scss b/src/app/theme/components/pageTop/pageTop.scss
index 69bf5c6d..8098b2d3 100644
--- a/src/app/theme/components/pageTop/pageTop.scss
+++ b/src/app/theme/components/pageTop/pageTop.scss
@@ -2,7 +2,7 @@
 @import '../../components/msgCenter/msgCenter';
 
 .page-top {
-  @include bg-translucent-dark(0.5);
+  background-color: $sidebar;
   position: fixed;
   z-index: 904;
   box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.5);
@@ -12,16 +12,12 @@
   padding: 0 32px 0 40px;
 
   &.scrolled {
-    @include bg-translucent-dark(0.85);
-  }
-
-  .dropdown-toggle::after {
-    display: none;
+    background-color: rgba(black, 0.85)
   }
 }
 
 a.al-logo {
-  color: #ffffff;
+  color: $sidebar-text;
   display: block;
   font-size: 24px;
   font-family: $font-family;
@@ -29,11 +25,6 @@ a.al-logo {
   float: left;
   outline: none !important;
   line-height: 60px;
-  text-decoration: none;
-
-  &:hover {
-    color: $hoverlink;
-  }
 
   span {
     color: $primary;
@@ -67,7 +58,7 @@ a.al-logo {
 }
 
 a.refresh-data {
-  color: #ffffff;
+  color: $sidebar-text;
   font-size: 13px;
   text-decoration: none;
   font-weight: $font-normal;
@@ -86,7 +77,7 @@ a.collapse-menu-link {
   display: block;
   text-decoration: none;
   line-height: 42px;
-  color: #fff;
+  color: $sidebar-text;
   padding: 0;
   float: left;
   margin: 11px 0 0 25px;
@@ -119,7 +110,7 @@ a.collapse-menu-link {
 
 .search {
   text-shadow: none;
-  color: #fff;
+  color: $sidebar-text;
   font-size: 13px;
   line-height: 25px;
   transition: all 0.5s ease;
@@ -164,7 +155,7 @@ a.collapse-menu-link {
 }
 
 @media (max-width: $resXXS) {
-  .user-profile {
+  .user-profile{
     min-width: 136px;
   }
   a.refresh-data {
@@ -179,6 +170,7 @@ a.collapse-menu-link {
   }
 }
 
-.profile-toggle-link {
+.profile-toggle-link{
   cursor: pointer;
 }
+
diff --git a/src/app/theme/components/sidebar/sidebar.scss b/src/app/theme/components/sidebar/sidebar.scss
index 64fb6178..9b0d8ba0 100644
--- a/src/app/theme/components/sidebar/sidebar.scss
+++ b/src/app/theme/components/sidebar/sidebar.scss
@@ -11,7 +11,7 @@ $angle-right: "\f101";
   z-index: 904;
   display: block;
   min-height: 100%;
-  @include bg-translucent-dark(0.5);
+  background-color: $sidebar;
   height: 100%;
   position: fixed;
 }
@@ -40,14 +40,28 @@ $angle-right: "\f101";
   &.selected:not(.with-sub-menu) {
     background-color: $primary;
     a.al-sidebar-list-link {
-      color: $default;
+      color: $sidebar-text;
       b {
-        color: $default;
+        color: $sidebar-text;
       }
     }
   }
 }
 
+.al-sidebar-list-item, .ba-sidebar-sublist-item {
+  &.ba-sidebar-item-expanded {
+    > .al-sidebar-list-link {
+      b {
+        transform: rotate(180deg);
+      }
+    }
+
+    > .al-sidebar-sublist {
+      display: block;
+    }
+  }
+}
+
 a.al-sidebar-list-link {
   display: block;
   height: 42px;
@@ -55,7 +69,7 @@ a.al-sidebar-list-link {
   text-shadow: none;
   font-size: 13px;
   text-decoration: none;
-  color: #ffffff;
+  color: $sidebar-text;
   line-height: 42px;
   white-space: nowrap;
   overflow: hidden;
@@ -84,7 +98,8 @@ a.al-sidebar-list-link {
     top: 12px;
     padding: 0;
     text-align: center;
-    color: #cccccc;
+    color: $sidebar-text;
+    transition: transform 0.2s linear;
   }
 }
 
@@ -123,7 +138,7 @@ a.al-sidebar-list-link {
       text-shadow: none;
       font-size: 13px;
       text-decoration: none;
-      color: #ffffff;
+      color: $sidebar-text;
       padding-left: 52px;
       height: auto;
       line-height: 29px;
@@ -135,7 +150,7 @@ a.al-sidebar-list-link {
       border: none;
       background-color: $primary;
       &:hover {
-        color: $default;
+        color: $sidebar-text;
       }
     }
 
@@ -146,7 +161,7 @@ a.al-sidebar-list-link {
   @include default-sublist();
 }
 
-.sidebar-hover-elem {
+.sidebar-hover-elem{
   width: 4px;
   background: $primary;
   position: absolute;
diff --git a/src/app/theme/sass/_buttons.scss b/src/app/theme/sass/_buttons.scss
index 495adb41..cf0350d6 100644
--- a/src/app/theme/sass/_buttons.scss
+++ b/src/app/theme/sass/_buttons.scss
@@ -7,8 +7,6 @@ $hover: 24;
 .btn {
   border-radius: 5px;
   transition: all 0.1s ease;
-  padding: 0.344rem 1rem;
-  font-size: 0.9rem;
 }
 
 .btn:hover {
@@ -39,46 +37,27 @@ $hover: 24;
   }
 }
 
+@mixin openDropdownButton($color, $dark-color) {
+  @include styleButton($color, $color - $hover);
+  background-color: $dark-color;
+  border-color: $dark-color;
+}
+
 .open > .btn.dropdown-toggle {
   &.btn.btn-primary {
-    @include styleButton($primary, $primary - $hover);
-    background-color: $primary-dark;
-    border-color: $primary-dark;
-  }
-  &.btn-default {
-    @include styleButton(transparent, $default);
-    &:focus, &:active:hover, &.active:hover, &:hover {
-      background-color: rgba(0, 0, 0, 0.2);
-      color: $default;
-    }
+    @include openDropdownButton($primary, $primary-dark)
   }
   &.btn-success {
-    @include styleButton($success, $success - $hover);
+    @include openDropdownButton($success, $success-dark)
   }
   &.btn-info {
-    @include styleButton($info, $info - $hover);
+    @include openDropdownButton($info, $info-dark)
   }
   &.btn-warning {
-    @include styleButton($warning, $warning - $hover);
+    @include openDropdownButton($warning, $warning-dark)
   }
   &.btn-danger {
-    @include styleButton($danger, $danger - $hover);
-  }
-}
-
-.dropdown button.btn.btn-default.dropdown-toggle {
-  color: #fff;
-}
-
-.bootstrap-select {
-  .dropdown-toggle:focus {
-    outline: none !important;
-  }
-  button.btn-default:focus {
-    color: $default;
-  }
-  .btn {
-    transition: none;
+    @include openDropdownButton($danger, $danger-dark)
   }
 }
 
@@ -91,10 +70,11 @@ button.btn.btn-primary {
 
 button.btn.btn-default {
   border-width: 1px;
-  @include buttonColor(transparent, $default);
+  color: $default-text;
+  @include buttonColor(transparent, $border);
   &:active, &:target {
     background-color: rgba(0, 0, 0, 0.2);
-    color: $default;
+    color: $default-text;
   }
 }
 
@@ -126,12 +106,13 @@ button.btn.btn-danger {
   }
 }
 
+
 button.btn.btn-inverse {
   @include buttonColor($help-text, $help-text);
-  color: $default;
+  color: $label-text;
   &:active, &:target, &:hover {
     background-color: $help-text;
-    color: $default;
+    color: $label-text;
   }
 }
 
@@ -158,9 +139,6 @@ button.btn.btn-inverse {
   button.btn.btn-primary {
     @include buttonGroupColor($primary);
   }
-  button.btn.btn-default {
-    @include buttonGroupColor($default);
-  }
   button.btn.btn-danger {
     @include buttonGroupColor($danger);
   }
@@ -277,22 +255,23 @@ button.progress-button {
   font-size: 16px;
 }
 
-.btn-group-xs>.btn, .btn-xs {
-  padding: 1px 5px;
-  font-size: 12px;
-  line-height: 1.5;
+.dropdown button.btn.btn-default.dropdown-toggle {
+  color: $default-text;
+  border: 1px solid $border;
+  background-color: transparent;
+  &:focus, &:active {
+    background-color: $default;
+  }
 }
 
-.btn-group-sm>.btn, .btn-sm {
-  padding: 5px 10px;
-  font-size: 12px;
-  line-height: 1.5;
-  border-radius: 3px;
-}
-
-.btn-group-lg>.btn, .btn-lg {
-  padding: 10px 16px;
-  font-size: 18px;
-  line-height: 1.3333333;
-  border-radius: 6px;
+.bootstrap-select {
+  .dropdown-toggle:focus {
+    outline: none !important;
+  }
+  button.btn-default:focus {
+    color: $default;
+  }
+  .btn {
+    transition: none;
+  }
 }
diff --git a/src/app/theme/sass/_form.scss b/src/app/theme/sass/_form.scss
index 92573203..0ff4447c 100644
--- a/src/app/theme/sass/_form.scss
+++ b/src/app/theme/sass/_form.scss
@@ -40,14 +40,16 @@
 }
 
 .form-control {
-  border-radius: 0;
-  background: transparent;
+  color: $default-text;
+  @include placeholderStyle($default-text, 0.7);
+  border: 1px solid $input-border;
+  border-radius: 5px;
+  background-color: $input-background;
   box-shadow: none;
-  border: none;
   &:focus {
     box-shadow: none;
     border-color: $primary-bg;
-    background: #ffffff;
+    background: $input-background;
   }
 }
 
@@ -59,10 +61,6 @@ textarea.form-control {
   height: 96px;
 }
 
-.modal-form-btn {
-  text-align: center;
-}
-
 .form-inline {
   .form-group {
     input {
@@ -84,17 +82,6 @@ textarea.form-control {
   }
 }
 
-.modal-content {
-  border-radius: 5px;
-  border: none;
-  color: $default-text;
-  .modal-header {
-    color: $default;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-  }
-}
-
 @mixin setSwitchBorder($color) {
   .bootstrap-switch.bootstrap-switch-on {
     border-color: $color;
@@ -103,9 +90,6 @@ textarea.form-control {
 
 .switch-container {
   display: inline-block;
-  & {
-    @include setSwitchBorder($default);
-  }
   &.primary {
     @include setSwitchBorder($primary);
   }
@@ -131,12 +115,12 @@ textarea.form-control {
     outline: none;
   }
   &.bootstrap-switch-off {
-    border-color: $input-border;
+    border-color: $border;
   }
   &.bootstrap-switch-focused {
     box-shadow: none;
     &.bootstrap-switch-off {
-      border-color: $input-border;
+      border-color: $border;
     }
   }
   .bootstrap-switch-container {
@@ -239,10 +223,10 @@ label.custom-checkbox {
       font-family: fontAwesome;
       font-weight: $font-light;
       font-size: 12px;
-      color: $default;
+      color: $default-text;
       content: "\a0";
       background-color: transparent;
-      border: 1px solid $default;
+      border: 1px solid $border;
       border-radius: 0;
       display: inline-block;
       text-align: center;
@@ -333,7 +317,7 @@ label.custom-input-danger {
 
 @mixin validationState($color, $focusColor) {
   .control-label {
-    color: $color;
+    color: $default-text;
   }
   .form-control {
     border: 1px solid $color;
@@ -361,46 +345,25 @@ label.custom-input-danger {
   }
   .input-group-addon {
     background-color: $color;
-    color: #ffffff;
+    color: $label-text;
   }
 }
 
-.form-control-feedback {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 2;
-  display: block;
-  width: 34px;
-  height: 34px;
-  line-height: 34px;
-  text-align: center;
-  pointer-events: none;
-}
-
 .has-success {
   @include validationState($success-bg, $success);
-  position: relative;
 }
 
 .has-warning {
   @include validationState($warning-bg, $warning);
-  position: relative;
 }
 
 .has-error {
   @include validationState($danger-bg, $danger);
-  position: relative;
 }
 
-.has-feedback {
-  .form-control {
-    padding-right: 42.5px;
-  }
-  label ~ .form-control-feedback {
-    top: 21px;
-    font-size: 18px;
-  }
+.has-feedback label ~ .form-control-feedback {
+  top: 21px;
+  font-size: 18px;
 }
 
 .bootstrap-select {
@@ -412,10 +375,10 @@ label.custom-input-danger {
 }
 
 .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
-  background: transparent;
+  background-color: $input-background;
   color: $disabled;
   border-color: $disabled-bg;
-  @include placeholderStyle($disabled, 1);
+  @include placeholderStyle($default-text, 0.5);
 }
 
 .form-control-rounded {
@@ -435,7 +398,7 @@ label.custom-input-danger {
 
 @mixin groupAddon($color) {
   background: $color;
-  color: #ffffff;
+  color: $label-text;
   border-color: $color;
 }
 
@@ -463,68 +426,55 @@ label.custom-input-danger {
   border-radius: 5px;
 }
 
-.bootstrap-select {
-  .btn-default {
+.bootstrap-select.btn-group {
+  button.btn.btn-default {
     background: transparent;
-    color: $default;
-    &:focus {
-      background: #ffffff;
+    color: $default-text;
+    &:hover {
+      background: $default;
       box-shadow: none;
       outline: 0 !important;
     }
     &:active {
-      border-color: $default;
+      background: $default;
       box-shadow: none;
-      background: #ffffff;
     }
   }
   &.open {
-    .btn-default.dropdown-toggle {
+    > .btn.btn-default.dropdown-toggle {
+      background: $default;
       box-shadow: none;
-      background-color: #ffffff;
-      border-color: $default;
-      color: $default;
+      border-color: $border;
     }
-    .dropdown-menu {
-      border-left: 1px solid $default;
-      border-right: 1px solid $default;
-      border-bottom-color: $default;
-      border-radius: 0 0 5px 5px;
+    > .btn{
+      border-radius: 5px 5px 0 0;
     }
-    > .btn.dropdown-toggle {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      border-color: transparent;
-      box-shadow: none;
-    }
-    .dropdown-menu {
+    .dropdown-menu.open {
+      border: 1px solid $border-light;
       border-top: none;
-    }
-  }
-  &.with-search.open {
-    .btn-default.btn {
-      background-color: rgba(0, 0, 0, 0.2);
-      border-color: 1px solid $default;
+      border-radius: 0 0 5px 5px;
     }
   }
   &.with-search.open .btn-default + .dropdown-menu {
     .bs-searchbox .form-control {
-      background-color: rgba(0, 0, 0, 0.35);
+      background-color: $default;
+      border: 1px solid $input-border;
     }
     .no-results {
-      color: $default-text;
+      color: $dropdown-text;
     }
   }
   .notify {
-    color: $default-text;
+    color: $dropdown-text;
   }
 }
 
 .bootstrap-tagsinput {
-  background-color: transparent;
+  color: $default-text;
+  background-color: $input-background;
   border: 1px solid $input-border;
+  border-radius: 5px;
   box-shadow: none;
-  color: #555555;
   max-width: 100%;
   font-size: 14px;
   line-height: 26px;
@@ -543,12 +493,20 @@ label.custom-input-danger {
     }
   }
   input {
+    background-color: $input-background;
+    border: 1px solid $input-border;
+    border-radius: 5px;
+    @include placeholderStyle($default-text, 0.8);
     line-height: 22px;
     font-size: 11px;
     min-width: 53px;
   }
 }
 
+.progress {
+  background: $progress-background;
+}
+
 .progress-bar-primary {
   background-color: $primary;
 }
@@ -579,6 +537,19 @@ label.custom-input-danger {
   border-bottom-right-radius: 5px;
 }
 
-.sub-little-text {
+.with-primary-addon:focus{
+  border-color: $primary;
+}
+.with-warning-addon:focus{
+  border-color: $warning;
+}
+.with-success-addon:focus{
+  border-color: $success;
+}
+.with-danger-addon:focus{
+  border-color: $danger;
+}
+
+.sub-little-text{
   font-size: 12px;
 }
diff --git a/src/app/theme/sass/_layout.scss b/src/app/theme/sass/_layout.scss
index 7c6beec5..c48b0cf9 100644
--- a/src/app/theme/sass/_layout.scss
+++ b/src/app/theme/sass/_layout.scss
@@ -1,6 +1,6 @@
 $left-space: 180px;
 
-@include scrollbars(.5em, #d9d9d9, rgba(0, 0, 0, 0));
+@include scrollbars(.5em, #d9d9d9, rgba(0,0,0,0));
 
 html {
   position: relative;
@@ -14,16 +14,37 @@ html, body {
 
 body {
   font: 14px/16px $font-family;
-  color: white;
-  @include main-background();
+  color: $default-text;
+  background-color: $body-bg;
+  &.blur-theme {
+    @include main-background();
+  }
 }
 
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  html {
+body.mobile{
+  background: none;
+  .body-bg{
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-attachment: inherit;
+    background-color: $body-bg;
+  }
+  &.blur-theme {
+    @include main-background();
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
+{
+  html{
     overflow: hidden;
     height: 100%;
   }
-  body {
+  body{
     overflow: auto;
     height: 100%;
   }
@@ -34,10 +55,9 @@ a {
   outline: 0 !important;
 }
 
-.body-bg {
+.body-bg{
   display: none;
 }
-
 .al-header {
   display: block;
   height: 49px;
@@ -62,7 +82,7 @@ a {
   display: block;
   bottom: 0;
   font-size: 13px;
-  color: #ffffff;
+  color: $default-text;
   transition: padding-left 0.5s ease;
 }
 
@@ -80,14 +100,14 @@ a {
   margin-right: 12px;
   i {
     margin: 0 4px;
-    color: $warning;
+    color: $danger;
     font-size: 12px;
   }
   a {
     margin-left: 4px;
-    color: #ffffff;
+    color: $default-text;
     &:hover {
-      color: $warning;
+      color: $danger;
     }
   }
 }
@@ -104,7 +124,7 @@ a {
     i {
       cursor: pointer;
       transition: all 0.1s ease;
-      color: #ffffff;
+      color: white;
       padding: 6px;
       box-sizing: content-box;
       font-size: 16px;
@@ -193,20 +213,12 @@ a {
 }
 
 .full-invisible {
-  visibility: hidden !important;
+  visibility: hidden!important;
   * {
-    visibility: hidden !important;
+    visibility: hidden!important;
   }
 }
 
-.text-right {
-  text-align: right;
+.irs-grid-text {
+  color: $default-text;
 }
-
-.text-left {
-  text-align: left;
-}
-
-.text-center {
-  text-align: center;
-}
\ No newline at end of file
diff --git a/src/app/theme/sass/_table.scss b/src/app/theme/sass/_table.scss
index e8fbbafa..910fc2ad 100644
--- a/src/app/theme/sass/_table.scss
+++ b/src/app/theme/sass/_table.scss
@@ -3,7 +3,7 @@
   & > thead {
     & > tr {
       & > th {
-        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        border-bottom: 1px solid $border-light;
         white-space: nowrap;
         &:first-child {
           text-align: center;
@@ -22,7 +22,7 @@
       & > td {
         padding: 0px 8px;
         line-height: 35px;
-        border-top: 1px solid rgba(255, 255, 255, 0.1);
+        border-top: 1px solid $border-light;
         &:first-child {
           text-align: center;
         }
@@ -32,12 +32,6 @@
       }
     }
   }
-  &.table-bordered {
-    border-color: rgba(255, 255, 255, 0.2) !important;
-    th, td {
-      border-color: rgba(255, 255, 255, 0.2) !important;
-    }
-  }
 }
 
 .table-id {
@@ -148,7 +142,7 @@ tr.editable-row {
 }
 
 a.email-link {
-  color: $default;
+  color: $default-text;
   &:hover {
     color: $danger;
   }
@@ -209,65 +203,78 @@ input.search-input {
   margin-left: 0;
 }
 
-body.badmin-transparent {
-  .table {
-    & > thead {
-      & > tr {
-        & > th {
-          border-bottom: none;
-          border-top: none;
-          padding: 8px;
-        }
-      }
-    }
-    & > tbody {
-      & > tr.no-top-border {
-        &:first-child > td {
-          border-top: none;
-        }
+.table {
+  & > thead {
+    & > tr {
+      & > th {
+        border-bottom: none;
       }
     }
   }
-
-  .black-muted-bg {
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-
-  .table-hover {
-    tr:hover {
-      background-color: rgba(0, 0, 0, 0.1);
+  & > tbody {
+    & > tr.no-top-border {
+      &:first-child > td {
+        border-top: none;
+      }
     }
   }
+}
 
-  .table-striped > tbody > tr:nth-of-type(odd) {
+.black-muted-bg {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.table-hover {
+  > tbody > tr:hover {
     background-color: rgba(0, 0, 0, 0.1);
   }
-  .table > tbody > tr.primary > td {
-    background-color: rgba($primary, 0.7);
-    border: none;
-  }
-  .table > tbody > tr.success > td {
-    background-color: rgba($success, 0.7);
-    border: none;
-  }
-  .table > tbody > tr.warning > td {
-    background-color: rgba($warning, 0.7);
-    border: none;
-  }
-  .table > tbody > tr.danger > td {
-    background-color: rgba($danger, 0.7);
-    border: none;
-  }
-  .table > tbody > tr.info > td {
-    background-color: rgba($info, 0.7);
-    border: none;
-  }
+}
 
-  .editable-click, a.editable-click {
-    color: $default;
-    border-bottom: dashed 1px $default;
+.table-bordered,
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td{
+  border: 1px solid $border-light;
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+@mixin color-row($color) {
+  background-color: rgba($color, 0.7);
+  color: $label-text;
+  border: none;
+  a.email-link {
+    color: $label-text;
+    &:hover {
+      color: $danger;
+    }
   }
 }
+.table > tbody > tr.primary > td {
+  @include color-row($primary);
+}
+.table > tbody > tr.success > td {
+  @include color-row($success);
+}
+.table > tbody > tr.warning > td {
+  @include color-row($warning);
+}
+.table > tbody > tr.danger > td {
+  @include color-row($danger);
+}
+.table > tbody > tr.info > td {
+  @include color-row($info);
+}
+
+.editable-click, a.editable-click {
+  color: $default-text;
+  border-bottom: dashed 1px $border;
+}
 
 th {
   font-weight: $font-normal;
@@ -284,21 +291,21 @@ th {
 .table-striped > tbody > tr > td {
   border: none;
 }
-
 .pagination > li > a,
-.pagination > li > span {
-  color: $default;
-  border-color: $default;
+.pagination > li > span{
+  color: $default-text;
+  border-color: $border;
 }
 
+
 .pagination > li:first-of-type > a,
-.pagination > li:first-of-type > span {
+.pagination > li:first-of-type > span{
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
 }
 
 .pagination > li:last-of-type > a,
-.pagination > li:last-of-type > span {
+.pagination > li:last-of-type > span{
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
 }
@@ -310,17 +317,21 @@ th {
 .pagination > .active > a:focus,
 .pagination > .active > span:focus {
   background-color: $primary;
-  border-color: $default;
+  border-color: $border;
 }
 
 .pagination > li > a:hover,
 .pagination > li > span:hover,
 .pagination > li > a:focus,
-.pagination > li > span:focus {
-  background-color: rgba(0, 0, 0, .2);
-  color: $default;
+.pagination > li > span:focus{
+  background-color: rgba(0,0,0,.2);
+  color: $default-text;
 }
 
 .editable-buttons .btn-with-icon i {
   margin-right: 0;
 }
+
+.table-responsive {
+  margin-top: 10px;
+}
diff --git a/src/app/theme/sass/_typography.scss b/src/app/theme/sass/_typography.scss
index 479052f0..92767190 100644
--- a/src/app/theme/sass/_typography.scss
+++ b/src/app/theme/sass/_typography.scss
@@ -40,6 +40,7 @@ h5 {
 
 .typography-document-samples {
 
+
   p {
     margin: 0;
   }
@@ -138,11 +139,11 @@ h5 {
   }
 
   .yellow-text p {
-    color: $warning-bg;
+    color: $warning;
   }
 
   .red-text p {
-    color: $danger-bg;
+    color: $danger;
   }
 
   .links {
@@ -214,7 +215,7 @@ h5 {
       line-height: 14px;
       position: relative;
       span {
-        color: $default;
+        color: $default-text;
         display: block;
       }
       ol {
@@ -263,7 +264,7 @@ h5 {
 }
 
 .columns-section {
-  background-color: white;
+  background-color: $default;
 }
 
 p {
@@ -349,16 +350,15 @@ a.learn-more {
   padding: 85px 90px 60px;
   display: inline-block;
   margin: 67px auto;
-  background: #fff;
+  background: $default;
   min-width: 432px;
   overflow: hidden;
   background: rgba(0, 0, 0, 0.75);
-  color: #ffffff;
 
   h1 {
     font-weight: $font-bold;
     width: 100%;
-    color: #ffffff;
+    color: $label-text;
     margin-bottom: 10px;
   }
   p {
@@ -430,6 +430,7 @@ a.learn-more {
   }
 }
 
+
 @media screen and (min-width: 1620px) {
   .col-xlg-1 {
     width: 8.33333333%;
diff --git a/src/app/theme/sass/bootstrap-overrides/_card.scss b/src/app/theme/sass/bootstrap-overrides/_card.scss
index ab4f716a..8adfdc8d 100644
--- a/src/app/theme/sass/bootstrap-overrides/_card.scss
+++ b/src/app/theme/sass/bootstrap-overrides/_card.scss
@@ -2,16 +2,14 @@ $card-title-height: 44px;
 $card-header-font-size: 16px;
 
 .card {
-  border: none;
-  background-color: $default;
+  @include scrollbars(.4em, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.7));
   color: $default-text;
+  background-color: $default;
+  border: none;
+  border-radius: 5px;
   position: relative;
-  //transition: all 0.2s ease;
   margin-bottom: 24px;
-  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
-  /*&:hover {
-    background: $card-bg-hover;
-  }*/
+  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
   &.animated {
     animation-duration: 0.5s;
   }
@@ -42,46 +40,46 @@ $card-header-font-size: 16px;
   }
 }
 
-.card > .card-body {
-  padding: 15px 22px;
-  height: 100%;
+.card.card-blur {
+  $blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
+  background: url($blurredBgUrl);
+  transition: none;
+  background-attachment: fixed;
+}
+
+.card {
+  > .card-body {
+    padding: 15px 22px;
+    height: 100%;
+  }
+  > .card-header {
+    color: $default-text;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  > .card-footer {
+    color: $default-text;
+  }
 }
 
 .card-header, .card-footer {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12);
   height: $card-title-height;
   font-size: $card-header-font-size;
-
   $vertical-padding: ($card-title-height - $card-header-font-size) / 2;
   padding: $vertical-padding 22px;
-
 }
 
 .card-title {
   font-weight: $font-normal;
   text-transform: uppercase;
   opacity: 0.9;
-  font-size: $card-header-font-size;
-  //text-transform: uppercase;
 }
 
-.card-white, .card-blur {
-  background-size: cover;
-  > .card-header {
-    background-color: transparent;
-    border: none;
-    color: $default-text;
-  }
-}
-
-.card-blur {
-  $blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
-  background: url($blurredBgUrl);
-  transition: none;
-}
 
 .card-primary {
   > .card-header {
-    color: $primary;
     background-color: $primary-bg;
     border-color: $primary-bg;
   }
@@ -89,7 +87,6 @@ $card-header-font-size: 16px;
 
 .card-success {
   > .card-header {
-    color: $success;
     background-color: $success-bg;
     border-color: $success-bg;
   }
@@ -97,7 +94,6 @@ $card-header-font-size: 16px;
 
 .card-info {
   > .card-header {
-    color: $info;
     background-color: $info-bg;
     border-color: $info-bg;
   }
@@ -105,7 +101,6 @@ $card-header-font-size: 16px;
 
 .card-warning {
   > .card-header {
-    color: $warning;
     background-color: $warning-bg;
     border-color: $warning-bg;
   }
@@ -113,27 +108,19 @@ $card-header-font-size: 16px;
 
 .card-danger {
   > .card-header {
-    color: $danger;
     background-color: $danger-bg;
     border-color: $danger-bg;
   }
 }
 
-.card-primary, .card-success, .card-info, .card-warning, .card-danger {
-  .card-header {
-    color: rgba(255, 255, 255, 0.8);
-  }
-}
+//.bootstrap-card {
+//  background-color: $bootstrap-card-bg;
+//  .card-body{
+//    color: $bootstrap-card-text;
+//  }
+//}
 
-.card.bootstrap-card {
-  .card-body, .card-header {
-    p, div, span {
-      color: $default-text;
-    }
-  }
-}
-
-.accordion-card.card.bootstrap-card {
+.accordion-card.card {
   &.card-primary,
   &.card-success,
   &.card-info,
@@ -174,8 +161,3 @@ $card-header-font-size: 16px;
 .light-text {
   font-weight: $font-light;
 }
-
-/*
-.card-group .card {
-  border-radius: 0;
-}*/
diff --git a/src/app/theme/sass/bootstrap-overrides/_tabs.scss b/src/app/theme/sass/bootstrap-overrides/_tabs.scss
index 3c249f0b..738a1e60 100644
--- a/src/app/theme/sass/bootstrap-overrides/_tabs.scss
+++ b/src/app/theme/sass/bootstrap-overrides/_tabs.scss
@@ -86,8 +86,6 @@
   border-top-left-radius: 0;
   border-bottom-right-radius: 5px;
   > li > a {
-    margin-left: -1px;
-
     &:hover, &:focus {
     }
   }
@@ -119,21 +117,21 @@
 .tab-content {
   padding: 15px 15px 5px 15px;
   background: transparent;
-  color: $default;
+  color: $default-text;
   .tab-pane p {
-    color: $default;
+    color: $default-text;
   }
 }
 
 .nav.nav-tabs {
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
-  border-bottom: 1px solid rgba(0, 0, 0, .01);
-  background-color: rgba(0, 0, 0, .2);
+  border-bottom: 1px solid transparent;
+  background-color: $primary-light;
   a {
-    color: $default;
+    color: $label-text;
     &:hover {
-      color: $default;
+      color: $label-text;
     }
   }
   & > li > a {
@@ -141,22 +139,42 @@
     margin-bottom: 0;
     border-radius: 0;
     border: none;
-    color: $default;
     &:hover {
       border: none;
-      color: $default;
-      background-color: rgba(0, 0, 0, .1);
+      background-color: $primary-light;
     }
   }
   & > li.active > a {
-    color: $default;
-    background-color: rgba(0, 0, 0, .25);
+    color: $label-text;
+    background-color: $primary;
   }
   > li:first-of-type a {
     border-top-left-radius: 5px;
   }
   .dropdown-menu > li > a {
-    color: $default-text;
+    color: $dropdown-text;
+    &:hover {
+      color: $dropdown-text;
+    }
+  }
+}
+
+.blur-theme {
+  .nav.nav-tabs {
+    background-color: rgba(0, 0, 0, 0.2);
+    a {
+      color: $default-text;
+      &:hover {
+        color: $default-text;
+      }
+    }
+    & > li > a:hover {
+      background-color: rgba(0, 0, 0, 0.2);
+    }
+    & > li.active > a {
+      color: $default-text;
+      background-color: rgba(0, 0, 0, 0.25);
+    }
   }
 }
 
@@ -168,26 +186,26 @@
   border: none;
 }
 
-.card-primary, .card-info, .card-success, .card-warning, .card-danger {
-  .card-header {
-    border-radius: 4px;
+.accordion-panel  {
+  .panel-heading {
+    border-radius: 3px;
   }
 
-  &.card-open .card-header {
+  &.panel-open .panel-heading {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  &:not(.card-open) .card-header {
+  &:not(.panel-open) .panel-heading {
     transition-delay: .3s;
   }
 
-  > .card-header + .card-collapse > .card-body {
+  > .panel-heading + .panel-collapse > .panel-body {
     border-top: none;
   }
 }
 
-.accordion-card .card-header {
+.accordion-panel .panel-heading {
   padding: 0;
   .accordion-toggle {
     display: inline-block;
@@ -195,4 +213,3 @@
     padding: 14px 22px;
   }
 }
-
diff --git a/src/app/theme/sass/conf/_mixins.scss b/src/app/theme/sass/conf/_mixins.scss
index f68a68de..560b74ea 100644
--- a/src/app/theme/sass/conf/_mixins.scss
+++ b/src/app/theme/sass/conf/_mixins.scss
@@ -41,7 +41,6 @@
 @mixin bg-nr($relativeUrl) {
   background: url($images-root + $relativeUrl) no-repeat 0 0;
 }
-
 @mixin bg($relativeUrl) {
   background: url($images-root + $relativeUrl);
 }
@@ -94,37 +93,25 @@
 
 @mixin overrideColors($color) {
   p,
-  h1, h2, h3, h4, h5, h6,
+  h1,h2,h3,h4,h5,h6,
   .pie-chart-item,
-  .card-header > .dropdown .dropdown-toggle,
-  .card-title,
+  .panel-heading>.dropdown .dropdown-toggle,
+  .panel-title,
   ol.blur span,
   ul.blur,
   .popular-app-cost,
   .popular-app-info,
-  .card-title > .small,
-  .card-title > .small > a,
-  .card-title > a,
-  .card-title > small,
-  .card-title > small > a,
+  .panel-title>.small,
+  .panel-title>.small>a,
+  .panel-title>a,
+  .panel-title>small,
+  .panel-title>small>a,
   .traffic-text span,
   .form-group label,
-  .help-block {
+  .help-block{
     color: $color;
   }
   .feed-message .message-time, .text-muted {
     color: darken($color, 20);
   }
 }
-
-@mixin overrideCardBg($color, $borderColor, $dropdownColor) {
-  .card.card-blur, .card.card-blur:hover {
-    border: none;
-    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
-    background-color: $color;
-  }
-
-  .progress {
-    background: $color;
-  }
-}
diff --git a/src/app/theme/sass/skins/_02_transparent.scss b/src/app/theme/sass/skins/_02_transparent.scss
index f315f9af..c052397f 100644
--- a/src/app/theme/sass/skins/_02_transparent.scss
+++ b/src/app/theme/sass/skins/_02_transparent.scss
@@ -1,52 +1,39 @@
-body.badmin-transparent {
-  &.mobile{
-    background: none;
-    .body-bg{
-      display: block;
-      position: fixed;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      @include main-background();
-      background-attachment: inherit;
-    }
-    .panel-blur {
-      background: transparent;
-    }
-  }
-  @include overrideColors(#fff);
-  @include overrideCardBg(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
-  .default-color {
-    color: $default-text !important;;
-  }
-  .card.card-blur {
-    background-attachment: fixed;
-    @include scrollbars(.4em, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.8));
-    border-radius: 5px;
-    color: $default;
-    .card-header {
-      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-      box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
-      transform: translate3d(0,0,0);
-    }
-    .card-body {
-      transform: translate3d(0,0,0);
-    }
-  }
-  .btn-default {
-    color: $default;
-  }
-  .form-control, .bootstrap-tagsinput input {
-    @include placeholderStyle($default, 0.7);
-    background-color: rgba(0, 0, 0, .15);
-    border-radius: 5px;
-    color: $default;
-  }
-  .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
-    @include placeholderStyle($default, 0.5);
-  }
-  .irs-grid-text {
-    color: $default;
+&.mobile{
+  background: none;
+  .body-bg{
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    @include main-background();
+    background-attachment: inherit;
   }
 }
+.panel.panel-blur {
+  @include scrollbars(.4em, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.8));
+  border-radius: 5px;
+  color: $default-text;
+  .panel-heading {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+  }
+  .panel-body {
+  }
+}
+.btn-default {
+  color: $default;
+}
+.form-control, .bootstrap-tagsinput input {
+  @include placeholderStyle($default-text, 0.7);
+  border: 1px solid $border;
+  border-radius: 5px;
+  color: $default-text;
+}
+.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+  @include placeholderStyle($default-text, 0.5);
+}
+.irs-grid-text {
+  color: $default-text;
+}
diff --git a/src/app/theme/theme.constants.ts b/src/app/theme/theme.constants.ts
index 5895e8df..9b7497ff 100644
--- a/src/app/theme/theme.constants.ts
+++ b/src/app/theme/theme.constants.ts
@@ -60,7 +60,7 @@ export const bgColorPalette = {
   surfieGreen: '#0e8174',
   silverTree: '#6eba8c',
   gossip: '#b9f2a1',
-  white: '#ffffff',
+  white: '#10c4b5',
 };
 
 export const layoutColors = {
@@ -89,7 +89,8 @@ export const layoutColors = {
   dangerBg: tint(colorScheme.danger, 20),
 
   default: '#ffffff',
-  defaultText: '#ffffff',
+  defaultText: '#666666',
+  border: '#dddddd',
 
   bgColorPalette: {
     blueStone: bgColorPalette.blueStone,
diff --git a/src/assets/img/app/my-app-logo.png b/src/assets/img/app/my-app-logo.png
index 1330932d..fa9b4151 100644
Binary files a/src/assets/img/app/my-app-logo.png and b/src/assets/img/app/my-app-logo.png differ