diff --git a/public/app/features/alerts/alert_log_ctrl.ts b/public/app/features/alerts/alert_log_ctrl.ts
index 4b6490ffa83..61f25d3d24d 100644
--- a/public/app/features/alerts/alert_log_ctrl.ts
+++ b/public/app/features/alerts/alert_log_ctrl.ts
@@ -23,11 +23,10 @@ export class AlertLogCtrl {
 
   loadAlertLogs() {
     this.backendSrv.get('/api/alerts/events/' + this.alertId).then(result => {
-      this.alertLogs = result;
-
-      _.each(this.alertLogs, log => {
+      this.alertLogs = _.map(result, log => {
         log.iconCss = alertDef.getCssForState(log.newState);
         log.humanTime = moment(log.created).format("YYYY-MM-DD HH:mm:ss");
+        return log;
       });
     });
 
diff --git a/public/app/features/alerts/alerts_ctrl.ts b/public/app/features/alerts/alerts_ctrl.ts
index 404017c4954..dc89746f370 100644
--- a/public/app/features/alerts/alerts_ctrl.ts
+++ b/public/app/features/alerts/alerts_ctrl.ts
@@ -4,6 +4,7 @@ import angular from 'angular';
 import _ from 'lodash';
 import coreModule from '../../core/core_module';
 import config from 'app/core/config';
+import alertDef from './alert_def';
 
 export class AlertPageCtrl {
 
@@ -16,7 +17,10 @@ export class AlertPageCtrl {
 
   loadAlerts() {
     this.backendSrv.get('/api/alerts').then(result => {
-      this.alerts = result;
+      this.alerts = _.map(result, alert => {
+        alert.iconCss = alertDef.getCssForState(alert.state);
+        return alert;
+      });
     });
   }
 }
diff --git a/public/app/features/alerts/partials/alerts_page.html b/public/app/features/alerts/partials/alerts_page.html
index baf4c1b9221..f0c41aeb5db 100644
--- a/public/app/features/alerts/partials/alerts_page.html
+++ b/public/app/features/alerts/partials/alerts_page.html
@@ -9,8 +9,8 @@
   <table class="filter-table">
     <thead>
       <th><strong>Name</strong></th>
-      <th style="width: 68px"></th>
-      <th style="width: 68px"></th>
+      <th style="width: 68px">State</th>
+      <th style="width: 122px"></th>
       <th style="width: 28px"></th>
     </thead>
     <tr ng-repeat="alert in ctrl.alerts">
@@ -18,8 +18,8 @@
 				{{alert.title}}
       </td>
       <td>
-				<a href="/alerts/events/{{alert.id}}" class="btn btn-inverse btn-small">
-          {{alert.state}}
+				<a href="/alerts/events/{{alert.id}}">
+          <i class="icon-gf {{alert.iconCss}}"></i>
         </a>
       </td>
       <td class="text-center">