diff --git a/src/components/entity/ha-state-label-badge.js b/src/components/entity/ha-state-label-badge.js
index acaa4703d6..6dcf8193fe 100644
--- a/src/components/entity/ha-state-label-badge.js
+++ b/src/components/entity/ha-state-label-badge.js
@@ -66,6 +66,7 @@ export default new Polymer({
     case 'sun':
     case 'scene':
     case 'script':
+    case 'alarm_control_panel':
       return undefined;
     case 'sensor':
       return state.attributes.unit_of_measurement && state.state;
@@ -76,6 +77,9 @@ export default new Polymer({
 
   computeIcon(state) {
     switch (state.domain) {
+    case 'alarm_control_panel':
+      return state.state === 'disarmed' ?
+        'icons:lock-open' : 'icons:lock';
     case 'device_tracker':
       return !state.attributes.entity_picture && domainIcon(state.domain);
     case 'scene':
@@ -109,6 +113,8 @@ export default new Polymer({
       return state.attributes.unit_of_measurement || state.state;
     case 'device_tracker':
       return state.state === 'not_home' ? 'Away' : state.state;
+    case 'alarm_control_panel':
+      return state.state;
     default:
       return state.attributes.unit_of_measurement;
     }
diff --git a/src/components/ha-zone-cards.js b/src/components/ha-zone-cards.js
index 8c6430f15c..720c1e237e 100644
--- a/src/components/ha-zone-cards.js
+++ b/src/components/ha-zone-cards.js
@@ -12,9 +12,10 @@ const PRIORITY = {
   a: -1,
   sun: 0,
   device_tracker: 1,
-  sensor: 2,
-  scene: 3,
-  script: 4,
+  alarm_control_panel: 2,
+  sensor: 3,
+  scene: 4,
+  script: 5,
   thermostat: 40,
   media_player: 50,
   camera: 60,
diff --git a/src/more-infos/more-info-alarm_control_panel.html b/src/more-infos/more-info-alarm_control_panel.html
new file mode 100644
index 0000000000..512b529b6f
--- /dev/null
+++ b/src/more-infos/more-info-alarm_control_panel.html
@@ -0,0 +1,17 @@
+<link rel='import' href='../../bower_components/polymer/polymer.html'>
+
+<link rel='import' href='../../bower_components/paper-button/paper-button.html'>
+<link rel='import' href='../../bower_components/paper-input/paper-input.html'>
+
+<dom-module id='more-info-alarm_control_panel'>
+  <template>
+      <div class='layout horizontal'>
+          <paper-input label='code' value='[[entered_code]]' pattern='[0-9]*' type='password' on-change='enteredCodeChanged'></paper-input>
+      </div>
+      <div class='layout horizontal'>
+        <paper-button on-tap='handleDisarmTap'>Disarm</paper-button>
+        <paper-button on-tap='handleHomeTap'>Arm Home</paper-button>
+        <paper-button on-tap='handleAwayTap'>Arm Away</paper-button>
+      </div>
+  </template>
+</dom-module>
diff --git a/src/more-infos/more-info-alarm_control_panel.js b/src/more-infos/more-info-alarm_control_panel.js
new file mode 100644
index 0000000000..f183e4b2a0
--- /dev/null
+++ b/src/more-infos/more-info-alarm_control_panel.js
@@ -0,0 +1,33 @@
+import { serviceActions } from '../util/home-assistant-js-instance';
+
+import Polymer from '../polymer';
+import attributeClassNames from '../util/attribute-class-names';
+
+const ATTRIBUTE_CLASSES = [];
+
+export default new Polymer({
+  is: 'more-info-alarm_control_panel',
+  handleDisarmTap(number) {
+    this.callService('alarm_disarm', {code: this.entered_code});
+  },
+  handleHomeTap(number) {
+    this.callService('alarm_arm_home', {code: this.entered_code});
+  },
+  handleAwayTap(number) {
+    this.callService('alarm_arm_away', {code: this.entered_code});
+  },
+  properties: {
+    entered_code: {
+      type: String,
+      value: '',
+    },
+  },
+  enteredCodeChanged(ev) {
+    this.entered_code = ev.target.value;
+  },
+  callService(service, data) {
+    const serviceData = data || {};
+    serviceData.entity_id = this.stateObj.entityId;
+    serviceActions.callService('alarm_control_panel', service, serviceData);
+  },
+});
diff --git a/src/more-infos/more-info-content.html b/src/more-infos/more-info-content.html
index 1e7a028c72..f7b59075b1 100644
--- a/src/more-infos/more-info-content.html
+++ b/src/more-infos/more-info-content.html
@@ -10,6 +10,7 @@
 <link rel='import' href='more-info-media_player.html'>
 <link rel='import' href='more-info-camera.html'>
 <link rel='import' href='more-info-updater.html'>
+<link rel='import' href='more-info-alarm_control_panel.html'>
 
 <dom-module id='more-info-content'>
   <style>
diff --git a/src/more-infos/more-info-content.js b/src/more-infos/more-info-content.js
index d28bde1592..131fc1557f 100644
--- a/src/more-infos/more-info-content.js
+++ b/src/more-infos/more-info-content.js
@@ -11,6 +11,7 @@ require('./more-info-light');
 require('./more-info-media_player');
 require('./more-info-camera');
 require('./more-info-updater');
+require('./more-info-alarm_control_panel');
 
 export default new Polymer({
   is: 'more-info-content',
diff --git a/src/util/domain-icon.js b/src/util/domain-icon.js
index 0857f54df4..920a3d0fe4 100644
--- a/src/util/domain-icon.js
+++ b/src/util/domain-icon.js
@@ -11,10 +11,16 @@ export default function domainIcon(domain, state) {
 
   case 'switch':
     return 'image:flash-on';
+    
+  case 'alarm_control_panel':
+    if (state && state === 'disarmed'){
+      return 'icons:lock-open';
+    }else{
+      return 'icons:lock';
+    }
 
   case 'media_player':
     let icon = 'hardware:cast';
-
     if (state && state !== 'off' && state !== 'idle') {
       icon += '-connected';
     }
diff --git a/src/util/state-more-info-type.js b/src/util/state-more-info-type.js
index 1d3892e942..2cd99a323d 100644
--- a/src/util/state-more-info-type.js
+++ b/src/util/state-more-info-type.js
@@ -1,6 +1,6 @@
 const DOMAINS_WITH_MORE_INFO = [
   'light', 'group', 'sun', 'configurator', 'thermostat', 'script',
-  'media_player', 'camera', 'updater',
+  'media_player', 'camera', 'updater', 'alarm_control_panel'
 ];
 
 export default function stateMoreInfoType(state) {