diff --git a/src/app/pages/charts/amCharts/areaChart/AreaChartCtrl.js b/src/app/pages/charts/amCharts/areaChart/AreaChartCtrl.js
index 6254dbee4..3a05a93e7 100644
--- a/src/app/pages/charts/amCharts/areaChart/AreaChartCtrl.js
+++ b/src/app/pages/charts/amCharts/areaChart/AreaChartCtrl.js
@@ -14,6 +14,7 @@
     var areaChart = AmCharts.makeChart(id, {
       type: 'serial',
       theme: 'blur',
+      color: layoutColors.defaultText,
       dataProvider: [
         {
           lineColor: layoutColors.info,
@@ -79,7 +80,7 @@
             hh: 'h ',
             mm: 'min'
           },
-          axisAlpha: 0
+          gridColor: layoutColors.defaultText,
         }
       ],
       graphs: [
@@ -124,9 +125,9 @@
         ],
         parseDates: true,
         autoGridCount: false,
-        axisColor: '#555555',
-        gridAlpha: 0,
-        gridCount: 50
+        gridCount: 50,
+        gridAlpha: 0.5,
+        gridColor: layoutColors.border,
       },
       export: {
         enabled: true
@@ -134,7 +135,7 @@
       pathToImages: layoutPaths.images.amChart
     });
 
-    tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, areaChart);
+    //tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, areaChart);
 
     areaChart.addListener('dataUpdated', zoomAreaChart);
 
diff --git a/src/app/pages/charts/amCharts/barChart/BarChartCtrl.js b/src/app/pages/charts/amCharts/barChart/BarChartCtrl.js
index e8f03a764..9e89720f5 100644
--- a/src/app/pages/charts/amCharts/barChart/BarChartCtrl.js
+++ b/src/app/pages/charts/amCharts/barChart/BarChartCtrl.js
@@ -14,6 +14,7 @@
     var barChart = AmCharts.makeChart(id, {
       type: 'serial',
       theme: 'blur',
+      color: layoutColors.defaultText,
       dataProvider: [
         {
           country: 'USA',
@@ -44,14 +45,16 @@
         {
           country: 'France',
           visits: 1114,
-          color: layoutColors.default
+          color: layoutColors.primaryLight
         }
       ],
       valueAxes: [
         {
           axisAlpha: 0,
           position: 'left',
-          title: 'Visitors from country'
+          title: 'Visitors from country',
+          gridAlpha: 0.5,
+          gridColor: layoutColors.border,
         }
       ],
       startDuration: 1,
@@ -73,7 +76,9 @@
       categoryField: 'country',
       categoryAxis: {
         gridPosition: 'start',
-        labelRotation: 45
+        labelRotation: 45,
+        gridAlpha: 0.5,
+        gridColor: layoutColors.border,
       },
       export: {
         enabled: true
@@ -82,7 +87,6 @@
       pathToImages: layoutPaths.images.amChart
     });
 
-    tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, barChart);
+    //tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, barChart);
   }
-
 })();
diff --git a/src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js b/src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js
index 31c79667f..ab201dcee 100644
--- a/src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js
+++ b/src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js
@@ -107,16 +107,18 @@
         "graph": "g1",
         "oppositeAxis": false,
         "offset": 30,
-        "scrollbarHeight": 50,
-        "backgroundAlpha": 0,
-        "selectedBackgroundAlpha": 0.1,
-        "selectedBackgroundColor": "#888888",
-        "graphFillAlpha": 0,
-        "graphLineAlpha": 0.5,
-        "selectedGraphFillAlpha": 0,
-        "selectedGraphLineAlpha": 1,
-        "autoGridCount": true,
-        "color": "#AAAAAA"
+        gridAlpha: 0,
+        color: layoutColors.defaultText,
+        scrollbarHeight: 50,
+        backgroundAlpha: 0,
+        selectedBackgroundAlpha: 0.05,
+        selectedBackgroundColor: layoutColors.defaultText,
+        graphFillAlpha: 0,
+        autoGridCount: true,
+        selectedGraphFillAlpha: 0,
+        graphLineAlpha: 0.2,
+        selectedGraphLineColor: layoutColors.defaultText,
+        selectedGraphLineAlpha: 1
       },
       "chartCursor": {
         "pan": true,
diff --git a/src/app/pages/charts/amCharts/funnelChart/FunnelChartCtrl.js b/src/app/pages/charts/amCharts/funnelChart/FunnelChartCtrl.js
index 992ff9c3b..dbe7a51f8 100644
--- a/src/app/pages/charts/amCharts/funnelChart/FunnelChartCtrl.js
+++ b/src/app/pages/charts/amCharts/funnelChart/FunnelChartCtrl.js
@@ -9,11 +9,13 @@
       .controller('FunnelChartCtrl', FunnelChartCtrl);
 
   /** @ngInject */
-  function FunnelChartCtrl($scope, $element, tplSkinChartWatcherHelper, layoutPaths) {
+  function FunnelChartCtrl($scope, $element, tplSkinChartWatcherHelper, layoutPaths, layoutColors) {
     var id = $element[0].getAttribute('id');
     var funnelChart = AmCharts.makeChart(id, {
       type: 'funnel',
       theme: 'blur',
+      color: layoutColors.defaultText,
+      labelTickColor: layoutColors.borderDark,
       dataProvider: [
         {
           title: 'Website visits',
@@ -64,7 +66,7 @@
       pathToImages: layoutPaths
     });
 
-    tplSkinChartWatcherHelper.watchFunnelChanges($scope, funnelChart);
+    //tplSkinChartWatcherHelper.watchFunnelChanges($scope, funnelChart);
   }
 
 })();
diff --git a/src/app/pages/charts/amCharts/lineChart/LineChartCtrl.js b/src/app/pages/charts/amCharts/lineChart/LineChartCtrl.js
index c6f1ee154..79e79cc8a 100644
--- a/src/app/pages/charts/amCharts/lineChart/LineChartCtrl.js
+++ b/src/app/pages/charts/amCharts/lineChart/LineChartCtrl.js
@@ -14,6 +14,7 @@
     var lineChart = AmCharts.makeChart(id, {
       type: 'serial',
       theme: 'blur',
+      color: layoutColors.defaultText,
       marginTop: 0,
       marginRight: 15,
       dataProvider: [
@@ -85,7 +86,9 @@
       valueAxes: [
         {
           axisAlpha: 0,
-          position: 'left'
+          position: 'left',
+          gridAlpha: 0.5,
+          gridColor: layoutColors.border,
         }
       ],
       graphs: [
@@ -104,17 +107,16 @@
       chartScrollbar: {
         graph: 'g1',
         gridAlpha: 0,
-        color: '#888888',
+        color: layoutColors.defaultText,
         scrollbarHeight: 55,
         backgroundAlpha: 0,
-        selectedBackgroundAlpha: 0.1,
-        selectedBackgroundColor: '#888888',
+        selectedBackgroundAlpha: 0.05,
+        selectedBackgroundColor: layoutColors.defaultText,
         graphFillAlpha: 0,
         autoGridCount: true,
         selectedGraphFillAlpha: 0,
         graphLineAlpha: 0.2,
-        graphLineColor: '#c2c2c2',
-        selectedGraphLineColor: '#888888',
+        selectedGraphLineColor: layoutColors.defaultText,
         selectedGraphLineAlpha: 1
       },
       chartCursor: {
@@ -131,7 +133,9 @@
         minPeriod: 'YYYY',
         parseDates: true,
         minorGridAlpha: 0.1,
-        minorGridEnabled: true
+        minorGridEnabled: true,
+        gridAlpha: 0.5,
+        gridColor: layoutColors.border,
       },
       export: {
         enabled: true
@@ -140,7 +144,7 @@
       pathToImages: layoutPaths.images.amChart
     });
 
-    tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, lineChart);
+    //tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, lineChart);
 
     lineChart.addListener('rendered', zoomChart);
     if (lineChart.zoomChart) {
diff --git a/src/app/pages/charts/amCharts/pieChart/PieChartCtrl.js b/src/app/pages/charts/amCharts/pieChart/PieChartCtrl.js
index db5059345..770b7e775 100644
--- a/src/app/pages/charts/amCharts/pieChart/PieChartCtrl.js
+++ b/src/app/pages/charts/amCharts/pieChart/PieChartCtrl.js
@@ -9,17 +9,19 @@
       .controller('PieChartCtrl', PieChartCtrl);
 
   /** @ngInject */
-  function PieChartCtrl($scope, $element, tplSkinChartWatcherHelper, layoutPaths) {
+  function PieChartCtrl($scope, $element, tplSkinChartWatcherHelper, layoutPaths, layoutColors) {
     var id = $element[0].getAttribute('id');
     var pieChart = AmCharts.makeChart(id, {
       type: 'pie',
       startDuration: 0,
       theme: 'blur',
       addClassNames: true,
+      color: layoutColors.defaultText,
+      labelTickColor: layoutColors.borderDark,
       legend: {
         position: 'right',
         marginRight: 100,
-        autoMargins: false
+        autoMargins: false,
       },
       innerRadius: '40%',
       defs: {
@@ -126,7 +128,7 @@
       }
     });
 
-    tplSkinChartWatcherHelper.watchDonutChanges($scope, pieChart);
+    //tplSkinChartWatcherHelper.watchDonutChanges($scope, pieChart);
 
     pieChart.addListener('init', handleInit);
 
diff --git a/src/app/pages/charts/chartist/chartist.html b/src/app/pages/charts/chartist/chartist.html
index 76a23c627..e36c71e51 100644
--- a/src/app/pages/charts/chartist/chartist.html
+++ b/src/app/pages/charts/chartist/chartist.html
@@ -1,4 +1,4 @@
-<section ng-controller="chartistCtrl">
+<section ng-controller="chartistCtrl" class="chartist">
   <div class="row">
     <div class="col-md-6 ">
       <div ba-panel ba-panel-title="Lines" ba-panel-class="with-scroll ">
diff --git a/src/app/pages/charts/chartist/chartistCtrl.js b/src/app/pages/charts/chartist/chartistCtrl.js
index 21a2adb6d..de0a818ac 100644
--- a/src/app/pages/charts/chartist/chartistCtrl.js
+++ b/src/app/pages/charts/chartist/chartistCtrl.js
@@ -9,9 +9,10 @@
     .controller('chartistCtrl', chartistCtrl);
 
   /** @ngInject */
-  function chartistCtrl($scope, $timeout) {
+  function chartistCtrl($scope, $timeout, layoutColors) {
 
     $scope.simpleLineOptions = {
+      color: layoutColors.defaultText,
       fullWidth: true,
       height: "300px",
       chartPadding: {
diff --git a/src/app/pages/charts/morris/morris.module.js b/src/app/pages/charts/morris/morris.module.js
index 4d7ee2773..c2e192a68 100644
--- a/src/app/pages/charts/morris/morris.module.js
+++ b/src/app/pages/charts/morris/morris.module.js
@@ -6,11 +6,11 @@
   'use strict';
 
   angular.module('BlurAdmin.pages.charts.morris', [])
-    .config(routeConfig).config(function(){
+    .config(routeConfig).config(function(layoutColors){
       Morris.Donut.prototype.defaults.backgroundColor = 'transparent';
-      Morris.Donut.prototype.defaults.labelColor = 'rgba(255,255,255,0.8)';
-      Morris.Grid.prototype.gridDefaults.gridLineColor = 'rgba(255,255,255,0.8)';
-      Morris.Grid.prototype.gridDefaults.gridTextColor = 'rgba(255,255,255,0.8)';
+      Morris.Donut.prototype.defaults.labelColor = layoutColors.defaultText;
+      Morris.Grid.prototype.gridDefaults.gridLineColor = layoutColors.borderDark;
+      Morris.Grid.prototype.gridDefaults.gridTextColor = layoutColors.defaultText;
     });
 
   /** @ngInject */
diff --git a/src/app/pages/charts/morris/morrisCtrl.js b/src/app/pages/charts/morris/morrisCtrl.js
index de3c697d0..e0e0c0204 100644
--- a/src/app/pages/charts/morris/morrisCtrl.js
+++ b/src/app/pages/charts/morris/morrisCtrl.js
@@ -10,7 +10,7 @@
 
   /** @ngInject */
   function morrisCtrl($scope, $window, layoutColors) {
-    $scope.colors = [layoutColors.primary, layoutColors.warning, layoutColors.danger, layoutColors.info, layoutColors.success, layoutColors.default, layoutColors.primaryDark];
+    $scope.colors = [layoutColors.primary, layoutColors.warning, layoutColors.danger, layoutColors.info, layoutColors.success, layoutColors.primaryDark];
     $scope.lineData = [
       {y: "2006", a: 100, b: 90},
       {y: "2007", a: 75, b: 65},
diff --git a/src/app/pages/components/mail/mail.html b/src/app/pages/components/mail/mail.html
index 7c53d0e10..95b56611d 100644
--- a/src/app/pages/components/mail/mail.html
+++ b/src/app/pages/components/mail/mail.html
@@ -1,43 +1,41 @@
 <div class="row mail-row">
   <div class="col-md-12">
     <div ba-panel ba-panel-class="xmedium-panel mail-panel">
-      <div class="mail-container">
-        <div class="letter-layout">
-          <div class="mail-navigation-container" ng-class="{'expanded' : !tabCtrl.navigationCollapsed}">
-            <div class="compose-button">
-              <button type="button" class="btn compose-button" ng-click="tabCtrl.showCompose('','','')">
-                Compose
-              </button>
-            </div>
-            <div ng-repeat="t in tabCtrl.tabs" ui-sref-active="active" class="mail-navigation"
-                 ui-sref="components.mail.label({label: t.label})" ng-click="selectTab(t.label)">
-              {{t.name}}<span class="new-mails" ng-show="t.newMails">{{t.newMails}}</span>
-            </div>
-            <div class="labels">
-              <div class="labels-title">
+      <div class="letter-layout">
+        <div class="mail-navigation-container" ng-class="{'expanded' : !tabCtrl.navigationCollapsed}">
+          <div class="compose-button">
+            <button type="button" class="btn compose-button" ng-click="tabCtrl.showCompose('','','')">
+              Compose
+            </button>
+          </div>
+          <div ng-repeat="t in tabCtrl.tabs" ui-sref-active="active" class="mail-navigation"
+               ui-sref="components.mail.label({label: t.label})" ng-click="selectTab(t.label)">
+            {{t.name}}<span class="new-mails" ng-show="t.newMails">{{t.newMails}}</span>
+          </div>
+          <div class="labels">
+            <div class="labels-title">
 
+            </div>
+            <div class="labels-container">
+              <div class="label-item">
+                <span class="tag label work">Work</span>
               </div>
-              <div class="labels-container">
-                <div class="label-item">
-                  <span class="tag label work">Work</span>
-                </div>
-                <div class="label-item">
-                  <span class="tag label family">Family</span>
-                </div>
-                <div class="label-item">
-                  <span class="tag label friend">Friend</span>
-                </div>
-                <div class="label-item">
-                  <span class="tag label study">Study</span>
-                </div>
+              <div class="label-item">
+                <span class="tag label family">Family</span>
+              </div>
+              <div class="label-item">
+                <span class="tag label friend">Friend</span>
+              </div>
+              <div class="label-item">
+                <span class="tag label study">Study</span>
               </div>
             </div>
-            <div class="add-label-container">
-              <i class="ion-plus-round"></i><span class="label-input-stub">Add new label</span>
-            </div>
           </div>
-          <ui-view></ui-view>
+          <div class="add-label-container">
+            <i class="ion-plus-round"></i><span class="label-input-stub">Add new label</span>
+          </div>
         </div>
+        <ui-view></ui-view>
       </div>
     </div>
   </div>
diff --git a/src/app/pages/components/timeline/timeline.html b/src/app/pages/components/timeline/timeline.html
index 16319b3a6..cafb8e158 100644
--- a/src/app/pages/components/timeline/timeline.html
+++ b/src/app/pages/components/timeline/timeline.html
@@ -6,7 +6,7 @@
         <div class="kameleon-icon with-round-bg warning"><img ng-src="{{::( 'Euro-Coin' | kameleonImg )}}"></div>
       </div>
 
-      <div class="cd-timeline-content cd-timeline-content-yellow">
+      <div class="cd-timeline-content warning">
         <h5>Title of section 1</h5>
 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi
@@ -20,7 +20,7 @@ <h5>Title of section 1</h5>
         <div class="kameleon-icon with-round-bg danger"><img ng-src="{{::( 'Laptop-Signal' | kameleonImg )}}"></div>
       </div>
 
-      <div class="cd-timeline-content cd-timeline-content-red">
+      <div class="cd-timeline-content danger">
         <h5>Title of section 2</h5>
 
         <p>Donec dapibus at leo eget volutpat. Praesent dolor tellus, ultricies venenatis molestie eu, luctus eget nibh.
@@ -34,7 +34,7 @@ <h5>Title of section 2</h5>
         <div class="kameleon-icon with-round-bg primary"><img ng-src="{{::( 'Checklist' | kameleonImg )}}"></div>
       </div>
 
-      <div class="cd-timeline-content cd-timeline-content-blue">
+      <div class="cd-timeline-content primary">
         <h5>Title of section 3</h5>
 
         <p>Phasellus auctor tellus eget lacinia condimentum. Cum sociis natoque penatibus et magnis dis parturient
@@ -48,7 +48,7 @@ <h5>Title of section 3</h5>
         <div class="kameleon-icon with-round-bg warning"><img ng-src="{{::( 'Boss-3' | kameleonImg )}}"></div>
       </div>
 
-      <div class="cd-timeline-content cd-timeline-content-yellow">
+      <div class="cd-timeline-content warning">
         <h5>Title of section 4</h5>
 
         <p>Morbi fringilla in massa ac posuere. Fusce non sagittis massa, id accumsan odio. Nullam eget tempor est.
@@ -62,7 +62,7 @@ <h5>Title of section 4</h5>
         <div class="kameleon-icon with-round-bg danger"><img ng-src="{{::( 'Online-Shopping' | kameleonImg )}}"></div>
       </div>
 
-      <div class="cd-timeline-content cd-timeline-content-red">
+      <div class="cd-timeline-content danger">
         <h5>Title of section 5</h5>
 
         <p> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur eget mattis
@@ -76,7 +76,7 @@ <h5>Title of section 5</h5>
         <div class="kameleon-icon with-round-bg primary"><img ng-src="{{::( 'Money-Increase' | kameleonImg )}}"></div>
       </div>
 
-      <div class="cd-timeline-content cd-timeline-content-blue">
+      <div class="cd-timeline-content primary">
         <h5>Title of section 6</h5>
 
         <p>Praesent bibendum ante mattis augue consectetur, ut commodo turpis consequat. Donec ligula eros, porta in
@@ -89,7 +89,7 @@ <h5>Title of section 6</h5>
         <div class="kameleon-icon with-round-bg warning"><img ng-src="{{::( 'Vector' | kameleonImg )}}"></div>
       </div>
 
-      <div class="cd-timeline-content cd-timeline-content-yellow">
+      <div class="cd-timeline-content warning">
         <h5>Title of section 7</h5>
 
         <p>Vivamus ut laoreet erat, vitae eleifend eros. Sed varius id tellus non lobortis. Sed dolor ante, cursus non
diff --git a/src/app/pages/dashboard/dashboardLineChart/DashboardLineChartCtrl.js b/src/app/pages/dashboard/dashboardLineChart/DashboardLineChartCtrl.js
index 89b45a015..62d4c2e9e 100644
--- a/src/app/pages/dashboard/dashboardLineChart/DashboardLineChartCtrl.js
+++ b/src/app/pages/dashboard/dashboardLineChart/DashboardLineChartCtrl.js
@@ -71,24 +71,24 @@
           id: 'g0',
           bullet: 'none',
           useLineColorForBulletBorder: true,
-          lineColor: 'rgba(0,0,0,0.15)',
+          lineColor: layoutColors.primary,
           lineThickness: 1,
           negativeLineColor: layoutColors.danger,
           type: 'smoothedLine',
           valueField: 'value0',
-          fillAlphas: 1,
+          fillAlphas: 0.5,
           fillColorsField: 'lineColor'
         },
         {
           id: 'g1',
           bullet: 'none',
           useLineColorForBulletBorder: true,
-          lineColor: 'rgba(0,0,0,0.2)',
+          lineColor: layoutColors.primary,
           lineThickness: 1,
           negativeLineColor: layoutColors.danger,
           type: 'smoothedLine',
           valueField: 'value',
-          fillAlphas: 1,
+          fillAlphas: 0.3,
           fillColorsField: 'lineColor'
         }
       ],
diff --git a/src/app/theme/amChartConfig.js b/src/app/theme/amChartConfig.js
index 028cc5d57..6994f3ea6 100644
--- a/src/app/theme/amChartConfig.js
+++ b/src/app/theme/amChartConfig.js
@@ -20,15 +20,15 @@
       },
 
       AmCoordinateChart: {
-        colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg]
+        colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg, layoutColors.warningDark]
       },
 
       AmStockChart: {
-        colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg]
+        colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg, layoutColors.warningDark]
       },
 
       AmSlicedChart: {
-        colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg],
+        colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg, layoutColors.warningDark],
         labelTickColor: "#FFFFFF",
         labelTickAlpha: 0.3
       },
@@ -128,7 +128,7 @@
 
       ZoomControl: {
         buttonFillAlpha: 0.8,
-        buttonIconColor: layoutColors.default,
+        buttonIconColor: layoutColors.defaultText,
         buttonRollOverColor: layoutColors.danger,
         buttonFillColor: layoutColors.primaryDark,
         buttonBorderColor: layoutColors.primaryDark,
diff --git a/src/app/theme/chartJsConfig.js b/src/app/theme/chartJsConfig.js
index de5f0b4e4..2dcae043e 100644
--- a/src/app/theme/chartJsConfig.js
+++ b/src/app/theme/chartJsConfig.js
@@ -14,9 +14,9 @@
     ChartJsProvider.setOptions({
       colours: [ layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg],
       responsive: true,
-      scaleFontColor: "rgba(255,255,255,.7)",
-      scaleLineColor: "rgba(255,255,255,.7)",
-      pointLabelFontColor: "rgba(255,255,255,.7)"
+      scaleFontColor: layoutColors.defaultText,
+      scaleLineColor: layoutColors.border,
+      pointLabelFontColor: layoutColors.defaultText
     });
     // Configure all line charts
     ChartJsProvider.setOptions('Line', {
diff --git a/src/app/theme/theme.constants.js b/src/app/theme/theme.constants.js
index 6e055986d..9c63fd92b 100644
--- a/src/app/theme/theme.constants.js
+++ b/src/app/theme/theme.constants.js
@@ -54,6 +54,7 @@
       default: '#ffffff',
       defaultText: '#666666',
       border: '#dddddd',
+      borderDark: '#aaaaaa',
 
       bgColorPalette: {
         blueStone: bgColorPalette.blueStone,
diff --git a/src/sass/app/_chartsPage.scss b/src/sass/app/_chartsPage.scss
index eba600818..b04fa685e 100644
--- a/src/sass/app/_chartsPage.scss
+++ b/src/sass/app/_chartsPage.scss
@@ -107,7 +107,7 @@ body.badmin-transparent{
     fill-opacity: .5;
   }
   .ct-label{
-    color: $default;
+    color: $default-text;
     opacity: 0.9;
     fill: rgba(255,255,255,.9);
   }
@@ -158,4 +158,8 @@ body.badmin-transparent{
 
 .amcharts-cursor-fill {
   filter: url(#shadow);
+}
+
+.chartist h5 {
+  font-weight: $font-normal;
 }
\ No newline at end of file
diff --git a/src/sass/app/_email.scss b/src/sass/app/_email.scss
index 0d26ada60..d2b06b26b 100644
--- a/src/sass/app/_email.scss
+++ b/src/sass/app/_email.scss
@@ -4,12 +4,9 @@
 }
 
 .mail-panel {
-  .panel-body{
+  &.panel>.panel-body{
     padding-left: 0;
   }
-  .panel-content {
-    padding: 15px 22px 0 0;
-  }
 }
 
 .mail-navigation-container {
@@ -59,12 +56,13 @@
   }
 }
 
-.labels, .add-label-container {
-  margin-top: 16px;
+.labels {
+  margin-top: 14px;
   margin-left: 22px;
 }
 
 .labels-container {
+  margin-top: 16px;
   text-align: center;
   padding-right: 28px;
   padding-left: 20px;
@@ -767,7 +765,7 @@ body.badmin-transparent {
         background-color: transparent;
       }
       &.active {
-        background: rgba(255, 255, 255, 0.2);
+        background: rgba(black, 0.2);
         color: white;
         transition: background-color .5s ease;
         .new-mails {
@@ -775,11 +773,11 @@ body.badmin-transparent {
           color: $default;
         }
         &:hover {
-          background-color: rgba(255, 255, 255, 0.3);
+          background-color: rgba(black, 0.3);
         }
       }
       &:hover {
-        background-color: rgba(0, 0, 0, 0.1);
+        background-color: rgba(black, 0.1);
       }
     }
   }
@@ -826,7 +824,7 @@ body.badmin-transparent {
   }
 
   .side-message-navigation .side-message-navigation-item {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+    border-bottom: 1px solid $border;
     &.work, &.study, &.family, &.friend {
       border-left: none;
     }
@@ -1017,12 +1015,5 @@ body.badmin-transparent {
       font-size: 13px;
       font-weight: $font-light;
     }
-
   }
-
 }
-
-
-
-
-
diff --git a/src/sass/theme/dashboard/_popularApp.scss b/src/sass/theme/dashboard/_popularApp.scss
index 1aa5fb5b9..f1ea6e617 100644
--- a/src/sass/theme/dashboard/_popularApp.scss
+++ b/src/sass/theme/dashboard/_popularApp.scss
@@ -11,8 +11,7 @@
     border-top-left-radius: 5px;
     border-bottom: 1px solid $border;
     img {
-      max-width: 60%;
-      max-height: 70%;
+      max-width: 85%;
       position: absolute;
       transform: translateY(-50%) translate(-50%);
       top: 50%;
diff --git a/src/sass/theme/dashboard/_timeline.scss b/src/sass/theme/dashboard/_timeline.scss
index a05315020..3c36cfe0b 100644
--- a/src/sass/theme/dashboard/_timeline.scss
+++ b/src/sass/theme/dashboard/_timeline.scss
@@ -132,25 +132,19 @@
 
 @mixin cd-timeline-color($color) {
   background: $color;
-  &:before {
-    border-right-color: $color;
-  }
 }
-
-.cd-timeline-content-yellow {
-  @include cd-timeline-color(rgba(0,0,0,.2));
+.cd-timeline-content.warning {
+  @include cd-timeline-color(rgba($warning, 0.2));
 }
-
-.cd-timeline-content-red {
-  @include cd-timeline-color(rgba(0,0,0,.2));
+.cd-timeline-content.danger {
+  @include cd-timeline-color(rgba($danger, 0.2));
 }
-
-.cd-timeline-content-blue {
-  @include cd-timeline-color(rgba(0,0,0,.2));
+.cd-timeline-content.primary {
+  @include cd-timeline-color(rgba($primary, 0.2));
 }
 
 .no-touch .cd-timeline-content .cd-read-more:hover {
-  background-color: #bac4cb;
+  background-color: $border;
 }
 
 @mixin cd-timeline-left-color($color) {
@@ -159,6 +153,12 @@
   }
 }
 
+@mixin cd-timeline-right-color($color) {
+  &::before {
+    border-right-color: $color;
+  }
+}
+
 @media only screen and (min-width: $resXL) {
 
   #cd-timeline::before {
@@ -199,16 +199,14 @@
     }
   }
 
-  .cd-timeline-content-yellow {
-    @include cd-timeline-left-color(rgba(0,0,0,.2));
+  .cd-timeline-content.warning {
+    @include cd-timeline-left-color(rgba($warning, 0.2));
   }
-
-  .cd-timeline-content-red {
-    @include cd-timeline-left-color(rgba(0,0,0,.2));
+  .cd-timeline-content.danger {
+    @include cd-timeline-left-color(rgba($danger, 0.2));
   }
-
-  .cd-timeline-content-blue {
-    @include cd-timeline-left-color(rgba(0,0,0,.2));
+  .cd-timeline-content.primary {
+    @include cd-timeline-left-color(rgba($primary, 0.2));
   }
 
   .cd-timeline-block:nth-child(even) .cd-timeline-content {
@@ -225,19 +223,14 @@
         border-right-color: white;
       }
 
-      @mixin cd-timeline-right-color($color) {
-        &::before {
-          border-right-color: $color;
-        }
-      }
-      &.cd-timeline-content-yellow {
-        @include cd-timeline-right-color(rgba(0,0,0,.2));
+      &.cd-timeline-content.warning {
+        @include cd-timeline-right-color(rgba($warning, 0.2));
       }
-      &.cd-timeline-content-red {
-        @include cd-timeline-right-color(rgba(0,0,0,.2));
+      &.cd-timeline-content.danger {
+        @include cd-timeline-right-color(rgba($danger, 0.2));
       }
-      &.cd-timeline-content-blue {
-        @include cd-timeline-right-color(rgba(0,0,0,.2));
+      &.cd-timeline-content.primary {
+        @include cd-timeline-right-color(rgba($primary, 0.2));
       }
     }
   }