diff --git a/bower.json b/bower.json
index 9b0d77b..278bf9a 100644
--- a/bower.json
+++ b/bower.json
@@ -42,7 +42,8 @@
     "leaflet": "~0.7.5",
     "moment": "~2.10.6",
     "slimScroll": "jquery-slimscroll#~1.3.6",
-    "angular-progress-button-styles": "~0.1.0"
+    "angular-progress-button-styles": "~0.1.0",
+    "angular-chart.js": "~0.8.8"
   },
   "overrides": {
     "amcharts": {
diff --git a/src/app/app.js b/src/app/app.js
index 165026e..7bdaaec 100644
--- a/src/app/app.js
+++ b/src/app/app.js
@@ -9,7 +9,8 @@ var blurAdminApp = angular.module('BlurAdmin', [
   'BlurAdmin.mail',
   'BlurAdmin.buttonsPage',
   'BlurAdmin.gridPage',
-  'BlurAdmin.chartsPage',
+  'BlurAdmin.amChartsPage',
+  'BlurAdmin.chartJsPage',
   'BlurAdmin.alertsPage',
   'BlurAdmin.formInputsPage',
   'BlurAdmin.formLayoutsPage',
diff --git a/src/app/pages/charts/charts.html b/src/app/pages/charts/amCharts/charts.html
similarity index 100%
rename from src/app/pages/charts/charts.html
rename to src/app/pages/charts/amCharts/charts.html
diff --git a/src/app/pages/charts/charts.js b/src/app/pages/charts/amCharts/charts.js
similarity index 57%
rename from src/app/pages/charts/charts.js
rename to src/app/pages/charts/amCharts/charts.js
index 8491d4b..0f3804c 100644
--- a/src/app/pages/charts/charts.js
+++ b/src/app/pages/charts/amCharts/charts.js
@@ -1,10 +1,10 @@
 'use strict';
 
-angular.module('BlurAdmin.chartsPage', ['ngRoute'])
+angular.module('BlurAdmin.amChartsPage', ['ngRoute'])
 
     .config(['$routeProvider', function ($routeProvider) {
-      $routeProvider.when('/charts', {
-        templateUrl: 'app/pages/charts/charts.html',
+      $routeProvider.when('/amCharts', {
+        templateUrl: 'app/pages/charts/amCharts/charts.html',
         controller: 'chartsPageCtrl'
       });
     }])
@@ -15,21 +15,21 @@ angular.module('BlurAdmin.chartsPage', ['ngRoute'])
             [
               {
                 title: 'Bar Chart',
-                url: 'app/pages/charts/widgets/barChart/barChart.html'
+                url: 'app/pages/charts/amCharts/widgets/barChart/barChart.html'
               },
               {
                 title: 'Line Chart',
-                url: 'app/pages/charts/widgets/lineChart/lineChart.html'
+                url: 'app/pages/charts/amCharts/widgets/lineChart/lineChart.html'
               }
             ],
             [
               {
                 title: 'Area Chart',
-                url: 'app/pages/charts/widgets/areaChart/areaChart.html'
+                url: 'app/pages/charts/amCharts/widgets/areaChart/areaChart.html'
               },
               {
                 title: 'Funnel Chart',
-                url: 'app/pages/charts/widgets/funnelChart/funnelChart.html'
+                url: 'app/pages/charts/amCharts/widgets/funnelChart/funnelChart.html'
               }
             ]
           ]
@@ -39,7 +39,7 @@ angular.module('BlurAdmin.chartsPage', ['ngRoute'])
             [
               {
                 title: 'Pie Chart',
-                url: 'app/pages/charts/widgets/pieChart/pieChart.html'
+                url: 'app/pages/charts/amCharts/widgets/pieChart/pieChart.html'
               }
             ]
           ]
diff --git a/src/app/pages/charts/widgets/areaChart/areaChart.html b/src/app/pages/charts/amCharts/widgets/areaChart/areaChart.html
similarity index 100%
rename from src/app/pages/charts/widgets/areaChart/areaChart.html
rename to src/app/pages/charts/amCharts/widgets/areaChart/areaChart.html
diff --git a/src/app/pages/charts/widgets/areaChart/areaChart.js b/src/app/pages/charts/amCharts/widgets/areaChart/areaChart.js
similarity index 100%
rename from src/app/pages/charts/widgets/areaChart/areaChart.js
rename to src/app/pages/charts/amCharts/widgets/areaChart/areaChart.js
diff --git a/src/app/pages/charts/widgets/barChart/barChart.html b/src/app/pages/charts/amCharts/widgets/barChart/barChart.html
similarity index 100%
rename from src/app/pages/charts/widgets/barChart/barChart.html
rename to src/app/pages/charts/amCharts/widgets/barChart/barChart.html
diff --git a/src/app/pages/charts/widgets/barChart/barChart.js b/src/app/pages/charts/amCharts/widgets/barChart/barChart.js
similarity index 100%
rename from src/app/pages/charts/widgets/barChart/barChart.js
rename to src/app/pages/charts/amCharts/widgets/barChart/barChart.js
diff --git a/src/app/pages/charts/widgets/funnelChart/funnelChart.html b/src/app/pages/charts/amCharts/widgets/funnelChart/funnelChart.html
similarity index 100%
rename from src/app/pages/charts/widgets/funnelChart/funnelChart.html
rename to src/app/pages/charts/amCharts/widgets/funnelChart/funnelChart.html
diff --git a/src/app/pages/charts/widgets/funnelChart/funnelChart.js b/src/app/pages/charts/amCharts/widgets/funnelChart/funnelChart.js
similarity index 100%
rename from src/app/pages/charts/widgets/funnelChart/funnelChart.js
rename to src/app/pages/charts/amCharts/widgets/funnelChart/funnelChart.js
diff --git a/src/app/pages/charts/widgets/lineChart/lineChart.html b/src/app/pages/charts/amCharts/widgets/lineChart/lineChart.html
similarity index 100%
rename from src/app/pages/charts/widgets/lineChart/lineChart.html
rename to src/app/pages/charts/amCharts/widgets/lineChart/lineChart.html
diff --git a/src/app/pages/charts/widgets/lineChart/lineChart.js b/src/app/pages/charts/amCharts/widgets/lineChart/lineChart.js
similarity index 100%
rename from src/app/pages/charts/widgets/lineChart/lineChart.js
rename to src/app/pages/charts/amCharts/widgets/lineChart/lineChart.js
diff --git a/src/app/pages/charts/widgets/pieChart/pieChart.html b/src/app/pages/charts/amCharts/widgets/pieChart/pieChart.html
similarity index 100%
rename from src/app/pages/charts/widgets/pieChart/pieChart.html
rename to src/app/pages/charts/amCharts/widgets/pieChart/pieChart.html
diff --git a/src/app/pages/charts/widgets/pieChart/pieChart.js b/src/app/pages/charts/amCharts/widgets/pieChart/pieChart.js
similarity index 100%
rename from src/app/pages/charts/widgets/pieChart/pieChart.js
rename to src/app/pages/charts/amCharts/widgets/pieChart/pieChart.js
diff --git a/src/app/pages/charts/chartJs/chartJs.html b/src/app/pages/charts/chartJs/chartJs.html
new file mode 100644
index 0000000..0bd5efb
--- /dev/null
+++ b/src/app/pages/charts/chartJs/chartJs.html
@@ -0,0 +1,53 @@
+<div class="row">
+
+  <div class="col-md-6" ng-controller="chartJs2DCtrl">
+    <blur-panel title="Line" class-container="with-scroll">
+      <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels"
+              chart-legend="false" chart-series="series" chart-click="changeData"></canvas>
+    </blur-panel>
+  </div>
+
+  <div class="col-md-6" ng-controller="chartJs2DCtrl">
+    <blur-panel title="Bars" class-container="with-scroll">
+      <canvas id="bar" class="chart chart-bar"
+                chart-data="data" chart-labels="labels" chart-series="series" chart-click="changeData">
+      </canvas>
+    </blur-panel>
+  </div>
+
+</div>
+
+<div class="row">
+  <div class="col-md-6" ng-controller="chartJs1DCtrl">
+    <blur-panel title="Pie" class-container="with-scroll">
+      <canvas id="pie" class="chart chart-pie"
+              chart-legend="true" chart-data="data" chart-labels="labels" chart-click="changeData">
+      </canvas>
+    </blur-panel>
+  </div>
+  <div class="col-md-6" ng-controller="chartJs1DCtrl">
+    <blur-panel title="Doughnut" class-container="with-scroll">
+      <canvas id="doughnut" class="chart chart-doughnut"
+              chart-legend="true"  chart-data="data" chart-labels="labels" chart-click="changeData">
+      </canvas>
+    </blur-panel>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-md-6" ng-controller="chartJs1DCtrl">
+    <blur-panel title="Polar" class-container="with-scroll chart-panel">
+      <canvas id="polar-area" class="chart chart-polar-area"
+              chart-data="data" chart-labels="labels" chart-legend="true" chart-click="changeData">
+      </canvas>
+    </blur-panel>
+  </div>
+
+  <div class="col-md-6" ng-controller="chartJs2DCtrl">
+    <blur-panel title="Radar" class-container="with-scroll chart-panel">
+      <canvas id="radar" class="chart chart-radar"
+              chart-data="data" chart-labels="labels" chart-click="changeData">
+      </canvas>
+    </blur-panel>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/charts/chartJs/chartJs1DCtrl.js b/src/app/pages/charts/chartJs/chartJs1DCtrl.js
new file mode 100644
index 0000000..62d3ae5
--- /dev/null
+++ b/src/app/pages/charts/chartJs/chartJs1DCtrl.js
@@ -0,0 +1,27 @@
+/**
+ * @author a.demeshko
+ * created on 12/16/15
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.chartJsPage')
+    .controller('chartJs1DCtrl', chartJs1DCtrl);
+
+  /** @ngInject */
+  function chartJs1DCtrl($scope) {
+
+    $scope.labels =["Sleeping", "Designing", "Coding", "Cycling", "Running"];
+    $scope.data = [20, 40, 5, 35, 10];
+
+    $scope.changeData = function () {
+      $scope.data = shuffle($scope.data);
+    };
+
+    function shuffle(o){
+      for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x){}
+      return o;
+    }
+  }
+
+})();
\ No newline at end of file
diff --git a/src/app/pages/charts/chartJs/chartJs2DCtrl.js b/src/app/pages/charts/chartJs/chartJs2DCtrl.js
new file mode 100644
index 0000000..d4bc884
--- /dev/null
+++ b/src/app/pages/charts/chartJs/chartJs2DCtrl.js
@@ -0,0 +1,32 @@
+/**
+ * @author a.demeshko
+ * created on 12/16/15
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.chartJsPage')
+    .controller('chartJs2DCtrl', chartJs2DCtrl);
+
+  /** @ngInject */
+  function chartJs2DCtrl($scope) {
+    $scope.labels =["May", "June", "Jule", "August", "September", "October", "November"];
+    $scope.data = [
+      [65, 59, 90, 81, 56, 55, 40],
+      [28, 48, 40, 19, 88, 27, 45]
+    ];
+    $scope.series = ['Product A', 'Product B'];
+
+
+    $scope.changeData = function () {
+      $scope.data[0] = shuffle($scope.data[0]);
+      $scope.data[1] = shuffle($scope.data[1]);
+    };
+
+    function shuffle(o){
+      for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x){}
+      return o;
+    }
+  }
+
+})();
\ No newline at end of file
diff --git a/src/app/pages/charts/chartJs/chartJsPage.module.js b/src/app/pages/charts/chartJs/chartJsPage.module.js
new file mode 100644
index 0000000..fa7c3da
--- /dev/null
+++ b/src/app/pages/charts/chartJs/chartJsPage.module.js
@@ -0,0 +1,17 @@
+/**
+ * @author a.demeshko
+ * created on 12/16/15
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.chartJsPage', ['ngRoute']).config(chartJsPageConfig);
+
+  /** @ngInject */
+  function chartJsPageConfig($routeProvider) {
+    $routeProvider.when('/chartJs', {
+      templateUrl: 'app/pages/charts/chartJs/chartJs.html'
+    });
+  }
+
+})();
\ No newline at end of file
diff --git a/src/app/theme/chartJsConfig.js b/src/app/theme/chartJsConfig.js
new file mode 100644
index 0000000..f988615
--- /dev/null
+++ b/src/app/theme/chartJsConfig.js
@@ -0,0 +1,24 @@
+/**
+ * @author a.demeshko
+ * created on 12/16/15
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.theme')
+    .config(chartJsConfig);
+
+  /** @ngInject */
+  function chartJsConfig(ChartJsProvider) {
+    // Configure all charts
+    ChartJsProvider.setOptions({
+      colours: ['#FF5252', '#FF8A80'],
+      responsive: true
+    });
+    // Configure all line charts
+    ChartJsProvider.setOptions('Line', {
+      datasetFill: false
+    });
+  }
+
+})();
\ No newline at end of file
diff --git a/src/app/theme/components/contentTop/contentTop.directive.js b/src/app/theme/components/contentTop/contentTop.directive.js
index ca9b20b..be95333 100644
--- a/src/app/theme/components/contentTop/contentTop.directive.js
+++ b/src/app/theme/components/contentTop/contentTop.directive.js
@@ -19,7 +19,8 @@
           '/page': 'Default Page',
           '/404': 'Page Not Found',
           '/buttons': 'Buttons',
-          '/charts': 'Charts',
+          '/amCharts': 'Charts',
+          '/chartJs': 'Chart.js ',
           '/grid': 'Grid',
           '/alerts': 'Alerts',
           '/progressBars': 'Progress Bars',
diff --git a/src/app/theme/components/sidebar/SidebarCtrl.js b/src/app/theme/components/sidebar/SidebarCtrl.js
index 7c8a989..ea58876 100644
--- a/src/app/theme/components/sidebar/SidebarCtrl.js
+++ b/src/app/theme/components/sidebar/SidebarCtrl.js
@@ -17,9 +17,18 @@
         root: '#/dashboard'
       },
       {
-        title: 'Charts',
         icon: 'ion-stats-bars',
-        root: '#/charts'
+        title: 'Charts',
+        subMenu: [
+          {
+            title: 'amCharts',
+            root: '#/amCharts'
+          },
+          {
+            title: 'Chart.js',
+            root: '#/chartJs'
+          }
+        ]
       },
       {
         title: 'Tables',
diff --git a/src/app/theme/theme.module.js b/src/app/theme/theme.module.js
index ebffa96..20c1b58 100644
--- a/src/app/theme/theme.module.js
+++ b/src/app/theme/theme.module.js
@@ -7,7 +7,7 @@
 
   angular.module('BlurAdmin.theme', [
       'toastr',
-
+      "chart.js",
       'BlurAdmin.theme.components'
   ]);
 
diff --git a/src/sass/app/_chartsPage.scss b/src/sass/app/_chartsPage.scss
index 6a56f5f..321ab6b 100644
--- a/src/sass/app/_chartsPage.scss
+++ b/src/sass/app/_chartsPage.scss
@@ -55,4 +55,8 @@
 
 .pie-chart-panel {
   padding: 0;
+}
+
+.chart-panel{
+  height: 495px;
 }
\ No newline at end of file