diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/backupMasterListCtrl.js b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/backupMasterListCtrl.js
new file mode 100644
index 0000000..d7cdc45
--- /dev/null
+++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/backupMasterListCtrl.js
@@ -0,0 +1,33 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function () {
+	/**
+	 * `register` without params will load the module which using require
+	 */
+	register(function (hadoopMetricApp) {
+
+		hadoopMetricApp.controller("backupMasterListCtrl", function ($wrapState, $scope, PageConfig, METRIC) {
+
+			// Initialization
+			PageConfig.title = "HBASE BackupMasters";
+			$scope.site = $wrapState.param.siteId;
+			$scope.backupMasterList = METRIC.hbaseMaster($scope.site, "standby", 1000);
+		});
+	});
+})();
diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/overview.js b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/overview.js
index 4cf3e97..1efd47b 100644
--- a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/overview.js
+++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/overview.js
@@ -24,7 +24,7 @@
 		hadoopMetricApp.controller("overviewCtrl", function ($q, $wrapState, $scope, PageConfig, METRIC, Time) {
 			var cache = {};
 			$scope.site = $wrapState.param.siteId;
-			var activeMasterInfo = METRIC.hbaseActiveMaster($scope.site);
+			var activeMasterInfo = METRIC.hbaseMaster($scope.site, "active", 1);
 
 			PageConfig.title = 'HBase';
 			var storageOption = {
@@ -132,34 +132,66 @@
 					});
 				});
 
+				METRIC.regionserverStatus($scope.hostname, $scope.site)._promise.then(function (res) {
+					$scope.regionstatus = res;
+				});
+
 				hbaseservers._promise.then(function (res) {
-					var regionhealtynum = 0;
-					var regiontotal = 0;
-					var hmasteractive;
-					var hmasterstandby;
+					var regionserverhealtynum = 0;
+					var regionservertotal = 0;
+					var hmasterstandbynum = 0;
+					var hmasteractivenum = 0;
+					var regionsnum = 0;
+					var regionArray = [];
 					$.each(res, function (i, server) {
 						var role = server.tags.role;
 						var status = server.status;
 						if (role === "regionserver") {
-							regiontotal++;
+							regionservertotal++;
 							if (status === "live") {
-								regionhealtynum++;
+								regionserverhealtynum++;
 							}
+							regionArray.push(METRIC.regionserverStatus(server.tags.hostname, $scope.site)._promise.then(function (res) {
+								return res[0].numRegions;
+							}));
 						}
 						else if (role === "hmaster") {
 							if (status === "active") {
-								hmasteractive = server;
+								hmasteractivenum++;
 							} else {
-								hmasterstandby = server;
+								hmasterstandbynum++;
 							}
 
 						}
 					});
-					$scope.regionhealtynum = regionhealtynum;
-					$scope.regiontotal = regiontotal;
-					$scope.hmasteractive = hmasteractive;
-					$scope.hmasterstandby = hmasterstandby;
-				})
+
+					$q.all(regionArray).then(function (res) {
+
+						for(var i=0; i<regionArray.length; i++) {
+							regionsnum+=res[i];
+						}
+						$scope.regionsnum = regionsnum;
+					});
+
+					$scope.regionserverhealtynum = regionserverhealtynum;
+					$scope.regionservertotal = regionservertotal;
+					$scope.hmasterstandbynum = hmasterstandbynum;
+					$scope.hmasteractivenum = hmasteractivenum;
+				});
+
+				activeMasterInfo._promise.then(function (res) {
+					var hostname = cache[hostname] = cache[hostname] || res[0].tags.hostname;
+					$scope.defaultHostname = $wrapState.param.hostname || hostname;
+					var jobCond = {
+						site: $scope.site,
+						component: "hbasemaster",
+						host: $scope.defaultHostname
+					};
+					METRIC.hbaseMomentMetric(jobCond,"hadoop.hbase.master.server.averageload", 1).then(function (res) {
+						$scope.hmasteraverageload = res.data.obj[0].value[0];
+					});
+				});
+
 			};
 
 
diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/index.js b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/index.js
index d76428f..f0b6e13 100644
--- a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/index.js
+++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/index.js
@@ -45,6 +45,11 @@
 		site: true,
 		templateUrl: "partials/region/regionList.html",
 		controller: "regionListCtrl"
+	}).route("backupMasterList", {
+		url: "/hadoopMetric/backupMasterList",
+		site: true,
+		templateUrl: "partials/backupMasterList.html",
+		controller: "backupMasterListCtrl"
 	}).route("masterDetail", {
 		url: "/hadoopMetric/:hostname?startTime&endTime",
 		site: true,
@@ -168,6 +173,17 @@
 			return wrapList(METRIC.get(metrics_url));
 		};
 
+		METRIC.hbaseMomentMetric = function (condition, metric, limit) {
+			var config = {
+				condition: METRIC.condition(condition),
+				metric: metric,
+				limit: limit || 10000
+			};
+
+			var metrics_url = common.template(getQuery("HBASE_METRICS"), config);
+			return METRIC.get(metrics_url);
+		};
+
 		METRIC.hbaseMetricsAggregation = function (condition, metric, groups, field, intervalMin, startTime, endTime, top, limit) {
 			var fields = field.split(/\s*,\s*/);
 			var orderId = -1;
@@ -251,13 +267,13 @@
 			return wrapList(METRIC.get(metrics_url));
 		};
 
-		METRIC.hbaseActiveMaster = function (siteId) {
+		METRIC.hbaseMaster = function (siteId, status, limit) {
 			var condition = {
 				site: siteId,
 				role: "hmaster",
-				status: "active"
+				status: status
 			};
-			return METRIC.hbasehostStatus(condition, 1);
+			return METRIC.hbasehostStatus(condition, limit);
 		};
 
 		METRIC.regionserverStatus = function (hostname, siteid) {
@@ -297,4 +313,5 @@
 	hadoopMetricApp.require("ctrls/hdfs.js");
 	hadoopMetricApp.require("ctrls/regionDetailCtrl.js");
 	hadoopMetricApp.require("ctrls/regionListCtrl.js");
+	hadoopMetricApp.require("ctrls/backupMasterListCtrl.js");
 })();
diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/backupMasterList.html b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/backupMasterList.html
new file mode 100644
index 0000000..960a33c
--- /dev/null
+++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/backupMasterList.html
@@ -0,0 +1,52 @@
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  The ASF licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  -->
+<div class="box box-primary">
+	<div class="box-header with-border">
+		<h3 class="box-title">
+			<span ng-show="!regionserverList._done || isSorting" class="fa fa-refresh fa-spin no-animate"></span>
+		</h3>
+	</div>
+	<div class="box-body">
+		<div id="backupMasterList" sort-table="backupMasterList" is-sorting="isSorting"
+			 search-path-list="searchPathList"
+			 scope="tableScope">
+			<table class="table table-bordered">
+				<thead>
+				<tr>
+					<th sortpath="tags.hostname">Master</th>
+					<th sortpath="tags.rack">Rack</th>
+					<th sortpath="tags.site">SiteId</th>
+					<th sortpath="status">Status</th>
+				</tr>
+				</thead>
+				<tbody>
+				<tr ng-repeat="item in backupMasterList">
+					<td>
+						<a ui-sref="masterDetail({siteId: site, hostname: item.tags.hostname})" target="_blank">{{item.tags.hostname}}</a>
+					</td>
+					<td>{{item.tags.rack}}</td>
+					<td>{{item.tags.site}}</td>
+					<td>
+						<span>{{item.status}}</span>
+					</td>
+				</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
+</div>
diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/overview.html b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/overview.html
index 13caebf..f58ab21 100644
--- a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/overview.html
+++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/overview.html
@@ -20,36 +20,33 @@
 	<div class="box-header with-border">
 		<span class="fa fa-television"></span>
 		<h3 class="box-title">
-			Service Summary Information
+			HBase Service Summary Information
 		</h3>
 	</div>
 	<div class="box-body">
-
-		<table class="table table-striped">
-			<tbody>
-			<tr ng-if="regiontotal > 0">
-				<th>RegionServer Status</th>
-				<td class="text-break">
-					<a ui-sref="regionList({siteId: site})" target="_blank">{{regiontotal}} RegionServers</a>
-					<span class="label label-success">{{regionhealtynum}} Healthy</span>
-					<span class="label label-danger">{{regiontotal - regionhealtynum}} UnHealthy</span>
-				</td>
+		<table class="table table-striped hadoopMetric-table">
+			<tr>
+				<td width="5%">{{hmasteractivenum}}</td>
+				<th width="45%">Active HBase Master</th>
+				<td width="5%">{{regionsnum}}</td>
+				<th width="45%">Regions
+				</th>
 			</tr>
-			<tr ng-if="hmasteractive">
-				<th>Active Hmaster Status</th>
-				<td class="text-break">
-					<span ng-if="defaultHostname !== hmasteractive.tags.hostname" class="label label-success">(<a class="hadoopMetric-summary-a" ui-sref="masterDetail({siteId: site, hostname: hmasteractive.tags.hostname})">{{hmasteractive.tags.hostname}}</a>) Healthy</span>
-					<span ng-if="defaultHostname === hmasteractive.tags.hostname" class="label label-success">({{hmasteractive.tags.hostname}}) Healthy</span>
-				</td>
+			<tr>
+				<td><a ui-sref="backupMasterList({siteId: site})" target="_blank">{{hmasterstandbynum}}</a></td>
+				<th>Backup HBase Master</th>
+				<td>{{hmasteraverageload}}</td>
+				<th>Average Load</th>
 			</tr>
-			<tr ng-if="hmasterstandby">
-				<th>Standby Hmaster Status</th>
-				<td class="text-break">
-					<span ng-if="defaultHostname !== hmasterstandby.tags.hostname" class="label label-success">(<a class="hadoopMetric-summary-a" ui-sref="masterDetail({siteId: site, hostname: hmasterstandby.tags.hostname})">{{hmasterstandby.tags.hostname}}</a>) Healthy</span>
-					<span ng-if="defaultHostname === hmasterstandby.tags.hostname" class="label label-success">({{hmasterstandby.tags.hostname}}) Healthy</span>
-				</td>
+			<tr>
+				<td><a ui-sref="regionList({siteId: site})">{{regionservertotal}}</a></td>
+				<th>RegionServers: <a ui-sref="regionList({siteId: site})">{{regionserverhealtynum}}</a> <span
+					class="label label-success">Good Health</span> / <a ui-sref="regionList({siteId: site})">{{regionservertotal-regionserverhealtynum}}</a>
+					<span class="label label-danger">Bad Health</span>
+				</th>
+				<td></td>
+				<th></th>
 			</tr>
-			</tbody>
 		</table>
 	</div>
 </div>
diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/style/index.css b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/style/index.css
index 6ae1ea1..4f2298c 100644
--- a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/style/index.css
+++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/style/index.css
@@ -64,3 +64,17 @@
 	color: #fff;
 }
 
+.small-box.hadoopMetric-widget {
+	margin: 0;
+	height: 100%;
+	min-height: 110px;
+}
+
+.hadoopMetric-widget-detail {
+	margin-left: 12px;
+	margin-top: 10px;
+}
+
+.hadoopMetric-table {
+	text-align: right;
+}
diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/widgets/availabilityChart.js b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/widgets/availabilityChart.js
index 75e6835..48a139a 100644
--- a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/widgets/availabilityChart.js
+++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/widgets/availabilityChart.js
@@ -27,61 +27,100 @@
 			Yarn: 'green',
 		};
 
-		var widgetChartOption = {
-			color: ['#FFFFFF'],
-			grid: {
-				top: 0,
-				right: 0,
-				bottom: 0,
-				left: 0,
-				containLabel: false,
-			},
-			xAxis: {
-				axisLine: {show: false},
-				axisLabel: {show: false},
-			},
-			yAxis: [{
-				axisLine: {show: false},
-				axisLabel: {show: false},
-				axisTick: {show: false},
-				splitLine: {show: false},
-			}],
-		};
-
 		hadoopMetricApp.directive("hadoopMetricWidget", function () {
 			return {
 				restrict: 'AE',
-				controller: function($scope, $attrs) {
+				controller: function ($scope, $attrs, METRIC, Application, $interval, Site, $wrapState) {
 					// Get site
 					var site = $scope.site;
+					var refreshInterval;
 
+					if(!site) {
+						$scope.list = $.map(Application.find("HADOOP_METRIC_MONITOR"), function (app) {
+							return {
+								siteId: app.site.siteId,
+								siteName: app.site.siteName || app.site.siteId,
+								count: -1
+							};
+						});
+					} else {
+						$scope.list = [{
+							siteId: site.siteId,
+							siteName: site.siteName || site.siteId,
+							count: -1
+						}];
+					}
 					// Get type
 					$scope.type = $attrs.type;
 
 					// Customize chart color
 					$scope.bgColor = COLOR_MAPPING[$scope.type];
 
-					$scope.chartOption = widgetChartOption;
-
-					// Mock fetch data
-					var now = +new Date();
-					var data = [];
-					for(var j = 0 ; j < 30 ; j += 1) {
-						data.push({x: now + j * 1000 * 60, y: Math.random() * 100});
-					}
-					$scope.series = [{
-						name: '',
-						type: 'line',
-						data: data,
-						showSymbol: false,
-					}];
 
 					// Ref: jpm widget if need keep refresh the widget
+
+					function refresh() {
+						$.each($scope.list, function (i, site) {
+							var hbaseservers = METRIC.hbasehostStatus({site: site.siteName});
+							hbaseservers._promise.then(function (res) {
+								var hmasternum = 0;
+								var hmasteractivenum = 0;
+								var regionserverHealthynum = 0;
+								var regionservertotal = 0;
+								$.each(res, function (i, server) {
+									var role = server.tags.role;
+									var status = server.status;
+									if (role === "hmaster") {
+										hmasternum++;
+										if (status === "active") {
+											hmasteractivenum++;
+										}
+									} else if (role === "regionserver") {
+										regionservertotal++;
+										if (status === "live") {
+											regionserverHealthynum++;
+										}
+									}
+								});
+								$scope.hbaseinfo = {
+									hmasternum: hmasternum,
+									hmasteractivenum: hmasteractivenum,
+									regionserverHealthynum: regionserverHealthynum,
+									regionservertotal: regionservertotal
+								};
+							});
+						});
+					}
+
+					refresh();
+					refreshInterval = $interval(refresh, 30 * 1000);
+
+					$scope.$on('$destroy', function () {
+						$interval.cancel(refreshInterval);
+					});
 				},
 				template:
-				'<div class="hadoopMetric-widget bg-{{bgColor}}">' +
-					'<h3>{{type}}</h3>' +
-					'<div chart class="hadoopMetric-chart-container" series="series" option="chartOption"></div>' +
+				'<div class="small-box hadoopMetric-widget bg-{{bgColor}}">' +
+				    '<div class="inner">' +
+				        '<h3>{{type}}</h3>' +
+				        '<div class="hadoopMetric-widget-detail">' +
+					        '<a ui-sref="HadoopMetric({siteId: site.siteName})">' +
+				            '<span>{{hbaseinfo.hmasternum}}</span> Masters (' +
+				            '<span>{{hbaseinfo.hmasteractivenum}}</span> Active / ' +
+				            '<span>{{hbaseinfo.hmasternum - hbaseinfo.hmasteractivenum}}</span> Standby)' +
+					        '</a>' +
+				        '</div>' +
+				        '<div class="hadoopMetric-widget-detail">' +
+				            '<a ui-sref="regionList({siteId: site.siteName})">' +
+				            '<span>{{hbaseinfo.regionservertotal}}</span> RegionServers (' +
+				            '<span>{{hbaseinfo.regionserverHealthynum}}</span> Healthy / ' +
+				            '<span>{{hbaseinfo.regionservertotal - hbaseinfo.regionserverHealthynum}}</span> Unhealthy)' +
+				            '</a>' +
+				        '</div>' +
+				    '</div>' +
+				    '<div class="icon">' +
+				        '<i class="fa fa-taxi"></i>' +
+				    '</div>' +
 				'</div>',
 				replace: true
 			};
@@ -99,9 +138,7 @@
 				);
 			};
 		}
-
-		hadoopMetricApp.widget("availabilityHDFSChart", withType('HDFS'), true);
 		hadoopMetricApp.widget("availabilityHBaseChart", withType('HBase'), true);
-		hadoopMetricApp.widget("availabilityYarnChart", withType('Yarn'), true);
 	});
 })();
+//# sourceURL=availabilityChart.js