diff --git a/frontend/app/index.html b/frontend/app/index.html
index dc172a5f24..5460192e47 100644
--- a/frontend/app/index.html
+++ b/frontend/app/index.html
@@ -133,11 +133,13 @@
     <script src="scripts/components/alert/AlertObservableListCmp.js"></script>
     <script src="scripts/components/alert/AlertSimilarCaseListCmp.js"></script>
     <script src="scripts/components/app-container.component.js"></script>
+    <script src="scripts/components/charts/donut-chart.component.js"></script>
     <script src="scripts/components/common/custom-field-input.component.js"></script>
     <script src="scripts/components/common/custom-field-labels.component.js"></script>
     <script src="scripts/components/common/observable-flags.component.js"></script>
     <script src="scripts/components/control-sidebar.component.js"></script>
     <script src="scripts/components/header.component.js"></script>
+    <script src="scripts/components/list/stats-item.component.js"></script>
     <script src="scripts/components/main-sidebar.component.js"></script>
     <script src="scripts/components/organisation/OrgCaseTemplateListCmp.js"></script>
     <script src="scripts/components/organisation/OrgConfigListCmp.js"></script>
diff --git a/frontend/app/scripts/components/charts/donut-chart.component.js b/frontend/app/scripts/components/charts/donut-chart.component.js
new file mode 100644
index 0000000000..909d394faa
--- /dev/null
+++ b/frontend/app/scripts/components/charts/donut-chart.component.js
@@ -0,0 +1,56 @@
+(function() {
+    'use strict';
+
+    angular.module('theHiveComponents')
+        .component('donutChart', {
+            controller: function($scope) {
+                var self = this;
+
+                this.$onInit = function() {
+                    $scope.$watch('$cmp.data', function (data) {
+                        self.updateChart(data);
+                    });
+                };
+
+                this.updateChart = function(rawData) {
+                    this.error = false;
+
+                    var data = _.map(rawData, function(item) {
+                        return [item.key, item.count];
+                    });
+
+                    this.chart = {
+                        data: {
+                            columns: data,
+                            names: self.labels || undefined,
+                            type: 'donut',
+                            onclick: function(d) {
+                                if(self.onItemClicked) {
+                                    self.onItemClicked({
+                                        value: d.id
+                                    });
+                                }
+                            }
+                        },
+                        donut: {
+                            label: {
+                                show: false
+                            }
+                        },
+                        legend: {
+                            position: 'right'
+                        }
+                    };
+                };
+            },
+            controllerAs: '$cmp',
+            template: '<c3 chart="$cmp.chart" error="$cmp.error" height="150" hide-actions="true"></c3>',
+            bindings: {
+                data: '<',
+                labels: '<',
+                title: '@',
+                field: '@',
+                onItemClicked: '&'
+            }
+        });
+})();
diff --git a/frontend/app/scripts/components/list/stats-item.component.js b/frontend/app/scripts/components/list/stats-item.component.js
new file mode 100644
index 0000000000..1e7dedb8f9
--- /dev/null
+++ b/frontend/app/scripts/components/list/stats-item.component.js
@@ -0,0 +1,28 @@
+(function() {
+    'use strict';
+    angular.module('theHiveComponents')
+        .component('statsItem', {
+            controller: function() {
+                var self = this;
+
+                this.onClick = function(value) {
+                    self.onItemClicked({
+                        field: self.field,
+                        value: self.values ? self.values[value] : value
+                    });
+                };
+            },
+            controllerAs: '$cmp',
+            templateUrl: 'views/components/list/stats-item.component.html',
+            replace: true,
+            bindings: {
+                field: '@',
+                title: '@',
+                data: '<',
+                mode: '<',
+                labels: '<',
+                values: '<',
+                onItemClicked: '&'
+            }
+        });
+})();
diff --git a/frontend/app/scripts/controllers/alert/AlertStatsCtrl.js b/frontend/app/scripts/controllers/alert/AlertStatsCtrl.js
index 4883fb8ff1..a05d92b580 100644
--- a/frontend/app/scripts/controllers/alert/AlertStatsCtrl.js
+++ b/frontend/app/scripts/controllers/alert/AlertStatsCtrl.js
@@ -14,6 +14,16 @@
             this.byStatus = {};
             this.byTags = {};
 
+            this.readAlerts = {
+                'true': 'Read',
+                'false': 'Unread'
+            };
+
+            this.readValues = {
+                'true': true,
+                'false': false
+            };
+
             self.$onInit = function() {
 
                 // Get stats by tags
diff --git a/frontend/app/scripts/controllers/case/ObservablesStatsCtrl.js b/frontend/app/scripts/controllers/case/ObservablesStatsCtrl.js
index 59a22251af..e48194916b 100644
--- a/frontend/app/scripts/controllers/case/ObservablesStatsCtrl.js
+++ b/frontend/app/scripts/controllers/case/ObservablesStatsCtrl.js
@@ -12,6 +12,16 @@
             this.byIoc = {};
             this.byTags = {};
 
+            this.iocLabels = {
+                'true': 'IOC',
+                'false': 'Not IOC'
+            };
+
+            this.iocValues = {
+                'true': true,
+                'false': false
+            };
+
             self.$onInit = function() {
                 var caseId = $stateParams.caseId;
 
diff --git a/frontend/app/scripts/directives/charts/c3Chart.js b/frontend/app/scripts/directives/charts/c3Chart.js
index 92c296b7b2..467ef621c4 100644
--- a/frontend/app/scripts/directives/charts/c3Chart.js
+++ b/frontend/app/scripts/directives/charts/c3Chart.js
@@ -8,6 +8,8 @@
                 chart: '=',
                 resizeOn: '@',
                 error: '=',
+                height: '<?',
+                hideActions: '<?',
                 onSaveCsv: '&?'
             },
             templateUrl: 'views/directives/charts/c3.html',
@@ -21,7 +23,7 @@
                             pattern: DashboardSrv.colorsPattern
                         };
                         scope.chart.size = {
-                            height: 300
+                            height: scope.height || 300
                         };
                         scope.c3 = c3.generate(scope.chart);
                     }
@@ -42,7 +44,7 @@
                         if(scope.c3) {
                             scope.c3.resize();
                         }
-                    })
+                    });
                 }
             }
         };
diff --git a/frontend/app/styles/filters.css b/frontend/app/styles/filters.css
index 070a52dcb2..58a8443f42 100644
--- a/frontend/app/styles/filters.css
+++ b/frontend/app/styles/filters.css
@@ -40,6 +40,21 @@
     color: #ccc;
     text-align: center;
 }
+
+.stats-panel {
+    /* padding: 10px;
+    background-color: #f5f5f5; */
+}
+
+.stats-panel .stats-item-wrapper {
+    padding: 5px;    
+    background-color: #f5f5f5;
+}
+
+.stats-panel .box {
+    margin-bottom: 0;
+}
+
 /*
 .filter-panel hr.filter-separator:after {
     content: "OR";
diff --git a/frontend/app/views/components/list/stats-item.component.html b/frontend/app/views/components/list/stats-item.component.html
new file mode 100644
index 0000000000..d2882f129e
--- /dev/null
+++ b/frontend/app/views/components/list/stats-item.component.html
@@ -0,0 +1,23 @@
+<div class="box box-primary">
+    <div class="box-header with-border">
+        <h3 class="box-title">{{$cmp.title}}</h3>
+        <div class="box-tools pull-right">
+            <div class="btn-group">
+                <label class="btn btn-sm btn-default" ng-model="$cmp.mode" uib-btn-radio="'table'"><i class="fa fa-table"></i></label>
+                <label class="btn btn-sm btn-default" ng-model="$cmp.mode" uib-btn-radio="'chart'"><i class="fa fa-pie-chart"></i></label>
+            </div>
+        </div>
+    </div>
+    <div class="box-body">
+        <table ng-if="$cmp.mode === 'table'" class="table table-condensed">
+            <tr ng-repeat="item in $cmp.data">
+                <td class="active">{{$cmp.labels[item.key] || item.key}}</td>
+                <td>
+                    <a href ng-click="$cmp.onClick(item.key)">{{item.count}}</a>
+                </td>
+            </tr>
+        </table>
+        <donut-Chart ng-if="$cmp.mode === 'chart'" labels="$cmp.labels" data="$cmp.data" title="Cases by Status"
+            on-item-clicked="$cmp.onClick(value)"></donut-chart>
+    </div>
+</div>
diff --git a/frontend/app/views/directives/charts/c3.html b/frontend/app/views/directives/charts/c3.html
index e66667cc10..109179d500 100644
--- a/frontend/app/views/directives/charts/c3.html
+++ b/frontend/app/views/directives/charts/c3.html
@@ -7,7 +7,7 @@ <h4 class="text-danger">
             </h4>
         </div>
     </div>
-    <div class="clearfix" ng-show="!error && chart">
+    <div class="clearfix" ng-show="!error && chart && !hideActions">
         <a class="pull-right ml-xxs" href ng-csv="onSaveCsv"><i class="fa fa-file-text-o mr-xxxs"></i>CSV</a>
         <a class="pull-right ml-xxs" href ng-click="save()"><i class="fa fa-file-image-o mr-xxxs"></i>Image</a>
         <strong class="text-primary pull-right">Save as</strong>
diff --git a/frontend/app/views/partials/alert/list.html b/frontend/app/views/partials/alert/list.html
index 6fbbf1fe8d..b87e43732c 100644
--- a/frontend/app/views/partials/alert/list.html
+++ b/frontend/app/views/partials/alert/list.html
@@ -7,12 +7,12 @@ <h3 class="box-title">List of alerts ({{$vm.list.total || 0}} of {{$vm.alertList
             <div class="box-body">
                 <div ng-include="'views/partials/alert/list/toolbar.html'"></div>
 
-                <div class="mv-s filter-panel" ng-include="'views/partials/alert/list/mini-stats.html'" ng-if="$vm.filtering.context.showStats"></div>
+                <div class="mt-xs stats-panel" ng-include="'views/partials/alert/list/mini-stats.html'" ng-if="$vm.filtering.context.showStats"></div>
 
-                <div class="mt-s filter-panel" ng-include="'views/partials/alert/list/filters.html'" ng-show="$vm.filtering.context.showFilters"></div>
+                <div class="mt-xs filter-panel" ng-include="'views/partials/alert/list/filters.html'" ng-show="$vm.filtering.context.showFilters"></div>
 
                 <!-- Filters preview  -->
-                <div class="row mt-s">
+                <div class="row mt-xs">
                     <div class="col-md-12 clearfix">
                         <filters-preview filters="$vm.filtering.context.filters"
                             on-clear-item="$vm.removeFilter(field)"
@@ -21,7 +21,7 @@ <h3 class="box-title">List of alerts ({{$vm.list.total || 0}} of {{$vm.alertList
                 </div>
 
                 <!-- Datalist  -->
-                <div class="row mt-s">
+                <div class="row mt-xs">
                     <div class="col-md-12 mv-s" ng-show="$vm.list.total === 0">
                         <div class="empty-message">No records</div>
                     </div>
diff --git a/frontend/app/views/partials/alert/list/mini-stats.html b/frontend/app/views/partials/alert/list/mini-stats.html
index 183fb1725f..6db30f8742 100644
--- a/frontend/app/views/partials/alert/list/mini-stats.html
+++ b/frontend/app/views/partials/alert/list/mini-stats.html
@@ -1,52 +1,23 @@
 <div class="row" ng-controller="AlertStatsCtrl as statsCtrl">
-    <div class="col-md-12">
-        <h4>Statistics</h4>
-    </div>
     <div class="col-md-4">
-        <div class="panel panel-default">
-            <div class="panel-heading">Alerts by Status</div>
-            <div class="panel-body">
-                <table class="table table-condensed">
-                    <tr ng-repeat="item in statsCtrl.byStatus.details">
-                        <td class="active">{{item.key === 'true' ? 'Read' : 'Unread'}}</td>
-                        <td>
-                            <a href ng-click="$vm.addFilterValue('read', item.key === 'true')">{{item.count}}</a>
-                        </td>
-                    </tr>
-                </table>
-            </div>
+        <div class="stats-item-wrapper">
+            <stats-item title="Alerts by Status" mode="'chart'" field="read" data="statsCtrl.byStatus.details" labels="statsCtrl.readAlerts" values="statsCtrl.readValues" on-item-clicked="$vm.addFilterValue(field, value)">
+            </stats-item>
+
         </div>
     </div>
 
     <div class="col-md-4">
-        <div class="panel panel-default">
-            <div class="panel-heading">Top 5 Types</div>
-            <div class="panel-body">
-                <table class="table table-condensed">
-                    <tr ng-repeat="item in statsCtrl.byType.details">
-                        <td class="active">{{item.key}}</td>
-                        <td>
-                            <a href ng-click="$vm.addFilterValue('type', item.key)">{{item.count}}</a>
-                        </td>
-                    </tr>
-                </table>
-            </div>
+        <div class="stats-item-wrapper">
+            <stats-item title="Top 5 Types" mode="'chart'" field="type" data="statsCtrl.byType.details" on-item-clicked="$vm.addFilterValue(field, value)">
+            </stats-item>
         </div>
     </div>
 
     <div class="col-md-4">
-        <div class="panel panel-default">
-            <div class="panel-heading">Top 5 tags</div>
-            <div class="panel-body">
-                <table class="table table-condensed">
-                    <tr ng-repeat="item in statsCtrl.byTags.details">
-                        <td class="active">{{item.key}}</td>
-                        <td>
-                            <a href ng-click="$vm.addFilterValue('tags', item.key)">{{item.count}}</a>
-                        </td>
-                    </tr>
-                </table>
-            </div>
+        <div class="stats-item-wrapper">
+            <stats-item title="Top 5 tags" mode="'chart'" field="tags" data="statsCtrl.byTags.details" on-item-clicked="$vm.addFilterValue(field, value)">
+            </stats-item>
         </div>
     </div>
 </div>
diff --git a/frontend/app/views/partials/case/case.list.html b/frontend/app/views/partials/case/case.list.html
index e86b33b0fc..36e3c63db6 100644
--- a/frontend/app/views/partials/case/case.list.html
+++ b/frontend/app/views/partials/case/case.list.html
@@ -14,11 +14,11 @@ <h3 class="box-title">List of cases ({{$vm.list.total || 0}} of {{$vm.caseCount}
             <div class="box-body">
                 <div ng-include="'views/partials/case/list/toolbar.html'"></div>
 
-                <div class="mv-s filter-panel" ng-include="'views/partials/case/list/mini-stats.html'" ng-if="$vm.filtering.context.showStats"></div>
+                <div class="mt-xs stats-panel" ng-include="'views/partials/case/list/mini-stats.html'" ng-if="$vm.filtering.context.showStats"></div>
 
-                <div class="mt-s filter-panel" ng-include="'views/partials/case/list/filters.html'" ng-show="$vm.filtering.context.showFilters"></div>
+                <div class="mt-xs filter-panel" ng-include="'views/partials/case/list/filters.html'" ng-show="$vm.filtering.context.showFilters"></div>
 
-                <div class="row mt-s">
+                <div class="row mt-xs">
                     <div class="col-md-12 clearfix">
 
                         <filters-preview filters="$vm.filtering.context.filters"
diff --git a/frontend/app/views/partials/case/case.observables.html b/frontend/app/views/partials/case/case.observables.html
index 2ef1efbaa3..71b2ab20e2 100644
--- a/frontend/app/views/partials/case/case.observables.html
+++ b/frontend/app/views/partials/case/case.observables.html
@@ -57,16 +57,12 @@
     </div>
 </div>
 
-<br>
+<div class="mt-xs stats-panel" ng-include="'views/partials/observables/list/mini-stats.html'" ng-if="filtering.context.showStats"></div>
 
-<div class="filter-panel" ng-include="'views/partials/observables/list/mini-stats.html'" ng-if="filtering.context.showStats"></div>
-<br>
+<div class="mt-xs filter-panel" ng-include="'views/partials/observables/list/filters.html'" ng-show="filtering.context.showFilters"></div>
 
-<div class="filter-panel" ng-include="'views/partials/observables/list/filters.html'" ng-show="filtering.context.showFilters"></div>
-
-<br>
 <!-- Main page : Table + Text/CSV -->
-<div class="row">
+<div class="mt-xs row">
     <div class="selection" ng-if="showExportPanel">
         <div ng-include="'views/partials/observables/list/export.html'"></div>
     </div>
diff --git a/frontend/app/views/partials/case/list/mini-stats.html b/frontend/app/views/partials/case/list/mini-stats.html
index 7cc02b8da2..af698a4948 100644
--- a/frontend/app/views/partials/case/list/mini-stats.html
+++ b/frontend/app/views/partials/case/list/mini-stats.html
@@ -1,61 +1,22 @@
 <div class="row" ng-controller="CaseStatsCtrl as statsCtrl">
-    <div class="col-md-12">
-        <h4>Statistics</h4>
-    </div>
     <div class="col-md-4">
-        <div class="panel panel-default">
-            <div class="panel-heading">Cases by Status</div>
-            <div class="panel-body">
-                <table class="table table-condensed">
-                    <tr ng-repeat="item in statsCtrl.byStatus.details">
-                        <td class="active">{{item.key}}</td>
-                        <td>
-                            <a href ng-click="$vm.addFilterValue('status', item.key)">{{item.count}}</a>
-                        </td>
-                    </tr>
-                </table>
-            </div>
+        <div class="stats-item-wrapper">
+            <stats-item title="Case by Status" mode="'chart'" field="status" data="statsCtrl.byStatus.details" on-item-clicked="$vm.addFilterValue(field, value)">
+            </stats-item>
         </div>
     </div>
 
     <div class="col-md-4">
-        <div class="panel panel-default">
-            <div class="panel-heading">Case by Resolution</div>
-            <div class="panel-body">
-                <table class="table table-condensed">
-                    <tr ng-repeat="item in statsCtrl.byResolution.details">
-                        <td class="active">{{item.key}}</td>
-                        <td>
-                            <a href ng-click="$vm.addFilterValue('resolutionStatus', item.key)">{{item.count}}</a>
-                        </td>
-                    </tr>
-                </table>
-            </div>
+        <div class="stats-item-wrapper">
+            <stats-item title="Case by Resolution" mode="'chart'" field="resolutionStatus" data="statsCtrl.byResolution.details" on-item-clicked="$vm.addFilterValue(field, value)">
+            </stats-item>
         </div>
     </div>
 
     <div class="col-md-4">
-        <div class="panel panel-default">
-            <div class="panel-heading">Top 5 tags</div>
-            <div class="panel-body">
-                <table class="table table-condensed">
-                    <tr ng-repeat="item in statsCtrl.byTags.details">
-                        <td class="active">{{item.key}}</td>
-                        <td>
-                            <a href ng-click="$vm.addFilterValue('tags', item.key)">{{item.count}}</a>
-                        </td>
-                    </tr>
-                </table>
-            </div>
+        <div class="stats-item-wrapper">
+            <stats-item title="Top 5 tags" mode="'chart'" field="tags" data="statsCtrl.byTags.details" on-item-clicked="$vm.addFilterValue(field, value)">
+            </stats-item>
         </div>
     </div>
 </div>
-<!-- <div class="col-md-4">
-    <chart type="donut" options="observableByType" refresh-on="refresh-charts" autoload="false"></chart>
-</div>
-<div class="col-md-4 p-xxs">
-    <chart type="donut" options="observableByIoc" refresh-on="refresh-charts" autoload="false"></chart>
-</div>
-<div class="col-md-4 p-xxs">
-    <chart type="donut" options="observableByTags" refresh-on="refresh-charts" autoload="false"></chart>
-</div> -->
diff --git a/frontend/app/views/partials/observables/list/mini-stats.html b/frontend/app/views/partials/observables/list/mini-stats.html
index ca1b0c66fa..4e2b789c52 100644
--- a/frontend/app/views/partials/observables/list/mini-stats.html
+++ b/frontend/app/views/partials/observables/list/mini-stats.html
@@ -1,61 +1,22 @@
 <div class="row" ng-controller="ObservablesStatsCtrl as statsCtrl">
-    <div class="col-md-12">
-        <h4>Statistics</h4>
-    </div>
     <div class="col-md-4">
-        <div class="panel panel-default">
-            <div class="panel-heading">Observables by type</div>
-            <div class="panel-body">
-                <table class="table table-condensed">
-                    <tr ng-repeat="item in statsCtrl.byType.details">
-                        <td class="active">{{item.key}}</td>
-                        <td>
-                            <a href ng-click="addFilterValue('dataType', item.key)">{{item.count}}</a>
-                        </td>
-                    </tr>
-                </table>
-            </div>
+        <div class="stats-item-wrapper">
+            <stats-item title="Observables by type" mode="'chart'" field="dataType" data="statsCtrl.byType.details" on-item-clicked="addFilterValue(field, value)">
+            </stats-item>
         </div>
     </div>
 
     <div class="col-md-4">
-        <div class="panel panel-default">
-            <div class="panel-heading">Observables as IOC</div>
-            <div class="panel-body">
-                <table class="table table-condensed">
-                    <tr ng-repeat="item in statsCtrl.byIoc.details">
-                        <td class="active">{{(item.key === 'false') ? 'Not IOC' : 'IOC' }}</td>
-                        <td>
-                            <a href ng-click="addFilterValue('ioc', item.key === 'false' ? false : true)">{{item.count}}</a>
-                        </td>
-                    </tr>
-                </table>
-            </div>
+        <div class="stats-item-wrapper">
+            <stats-item title="Observables as IOC" mode="'chart'" field="ioc" data="statsCtrl.byIoc.details" labels="statsCtrl.iocLabels" values="statsCtrl.iocValues" on-item-clicked="addFilterValue(field, value)">
+            </stats-item>
         </div>
     </div>
 
     <div class="col-md-4">
-        <div class="panel panel-default">
-            <div class="panel-heading">Top 10 tags</div>
-            <div class="panel-body">
-                <table class="table table-condensed">
-                    <tr ng-repeat="item in statsCtrl.byTags.details">
-                        <td class="active">{{item.key}}</td>
-                        <td>
-                            <a href ng-click="addFilterValue('tags', item.key)">{{item.count}}</a>
-                        </td>
-                    </tr>
-                </table>
-            </div>
+        <div class="stats-item-wrapper">
+            <stats-item title="Top 5 tags" mode="'chart'" field="tags" data="statsCtrl.byTags.details" on-item-clicked="addFilterValue(field, value)">
+            </stats-item>
         </div>
     </div>
 </div>
-<!-- <div class="col-md-4">
-    <chart type="donut" options="observableByType" refresh-on="refresh-charts" autoload="false"></chart>
-</div>
-<div class="col-md-4 p-xxs">
-    <chart type="donut" options="observableByIoc" refresh-on="refresh-charts" autoload="false"></chart>
-</div>
-<div class="col-md-4 p-xxs">
-    <chart type="donut" options="observableByTags" refresh-on="refresh-charts" autoload="false"></chart>
-</div> -->