diff --git a/src/dialogs/more-info/controls/more-info-alarm_control_panel.js b/src/dialogs/more-info/controls/more-info-alarm_control_panel.js
index c233807645..bd82b3112a 100644
--- a/src/dialogs/more-info/controls/more-info-alarm_control_panel.js
+++ b/src/dialogs/more-info/controls/more-info-alarm_control_panel.js
@@ -5,53 +5,87 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import EventsMixin from '../../../mixins/events-mixin.js';
+import LocalizeMixin from '../../../mixins/localize-mixin.js';
 
-class MoreInfoAlarmControlPanel extends EventsMixin(PolymerElement) {
+class MoreInfoAlarmControlPanel extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
-      <style is="custom-style" include="iron-flex"></style>
+      <style include="iron-flex"></style>
       <style>
+        paper-input {
+          margin: auto;
+          max-width: 200px;
+        }
         .pad {
           display: flex;
           justify-content: center;
-          margin-bottom: 10%;
+          margin-bottom: 24px;
         }
         .pad div {
           display: flex;
           flex-direction: column;
         }
+        .pad paper-button {
+          width: 80px;
+        }
+        .actions paper-button {
+          min-width: 160px;
+          margin-bottom: 16px;
+          color: var(--primary-color);
+        }
+        paper-button.disarm {
+          color: var(--google-red-500);
+        }
       </style>
 
-      <div class='layout horizontal center-justified'>
-        <paper-input label="code" value="{{enteredCode}}" pattern="[[codeFormat]]" type="password" hidden\$="[[!codeFormat]]" disabled="[[!codeInputEnabled]]"></paper-input>
-      </div>
+      <template is="dom-if" if="[[_codeFormat]]">
+        <paper-input
+          label="[[localize('ui.card.alarm_control_panel.code')]]"
+          value="{{_enteredCode}}"
+          pattern="[[_codeFormat]]"
+          type="password"
+          disabled="[[!_inputEnabled]]"
+        ></paper-input>
 
-      <template is="dom-if" if="[[numericPin]]">
-        <div class="pad">
-          <div>
-            <paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="1" raised>1</paper-button>
-            <paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="4" raised>4</paper-button>
-            <paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="7" raised>7</paper-button>
+        <template is="dom-if" if="[[_isNumber(_codeFormat)]]">
+          <div class="pad">
+            <div>
+              <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="1" raised>1</paper-button>
+              <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="4" raised>4</paper-button>
+              <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="7" raised>7</paper-button>
+            </div>
+            <div>
+              <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="2" raised>2</paper-button>
+              <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="5" raised>5</paper-button>
+              <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="8" raised>8</paper-button>
+              <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="0" raised>0</paper-button>
+            </div>
+            <div>
+              <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="3" raised>3</paper-button>
+              <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="6" raised>6</paper-button>
+              <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="9" raised>9</paper-button>
+              <paper-button on-click='_clearEnteredCode' disabled='[[!_inputEnabled]]' raised>
+                [[localize('ui.card.alarm_control_panel.clear_code')]]
+              </paper-button>
+            </div>
           </div>
-          <div>
-            <paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="2" raised>2</paper-button>
-            <paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="5" raised>5</paper-button>
-            <paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="8" raised>8</paper-button>
-            <paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="0" raised>0</paper-button>
-          </div>
-          <div>
-            <paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="3" raised>3</paper-button>
-            <paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="6" raised>6</paper-button>
-            <paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="9" raised>9</paper-button>
-            <paper-button on-click='clearCode' disabled='[[!codeInputEnabled]]' raised>Clear</paper-button>
-          </div>
-        </div>
+        </template>
       </template>
 
-      <div class="layout horizontal">
-        <paper-button on-click="handleDisarmTap" hidden\$="[[!disarmButtonVisible]]" disabled="[[!codeValid]]">Disarm</paper-button>
-        <paper-button on-click="handleHomeTap" hidden\$="[[!armHomeButtonVisible]]" disabled="[[!codeValid]]">Arm Home</paper-button>
-        <paper-button on-click="handleAwayTap" hidden\$="[[!armAwayButtonVisible]]" disabled="[[!codeValid]]">Arm Away</paper-button>
+      <div class="layout horizontal center-justified actions">
+        <template is="dom-if" if="[[_disarmVisible]]">
+          <paper-button raised class="disarm" on-click="_callService" data-service="alarm_disarm" disabled="[[!_codeValid]]">
+            [[localize('ui.card.alarm_control_panel.disarm')]]
+          </paper-button>
+        </template>
+        <template is="dom-if" if="[[_armVisible]]">
+          <paper-button raised on-click="_callService" data-service="alarm_arm_home" disabled="[[!_codeValid]]">
+            [[localize('ui.card.alarm_control_panel.arm_home')]]
+          </paper-button>
+          <paper-button raised on-click="_callService" data-service="alarm_arm_away" disabled="[[!_codeValid]]">
+            [[localize('ui.card.alarm_control_panel.arm_away')]]
+          </paper-button>
+        </template>
       </div>
     `;
   }
@@ -61,67 +95,50 @@ class MoreInfoAlarmControlPanel extends EventsMixin(PolymerElement) {
       hass: Object,
       stateObj: {
         type: Object,
-        observer: 'stateObjChanged',
+        observer: '_stateObjChanged'
       },
-      enteredCode: {
+      _enteredCode: {
         type: String,
-        value: '',
+        value: ''
       },
-      numericPin: {
-        type: Boolean,
-        value: false,
-      },
-      disarmButtonVisible: {
-        type: Boolean,
-        value: false,
-      },
-      armHomeButtonVisible: {
-        type: Boolean,
-        value: false,
-      },
-      armAwayButtonVisible: {
-        type: Boolean,
-        value: false,
-      },
-      codeInputEnabled: {
-        type: Boolean,
-        value: false,
-      },
-      codeFormat: {
+      _codeFormat: {
         type: String,
-        value: '',
+        value: ''
       },
-      codeValid: {
+      _codeValid: {
         type: Boolean,
-        computed: 'validateCode(enteredCode, codeFormat)',
+        computed: '_validateCode(_enteredCode, _codeFormat)'
       },
+      _disarmVisible: {
+        type: Boolean,
+        value: false
+      },
+      _armVisible: {
+        type: Boolean,
+        value: false
+      },
+      _inputEnabled: {
+        type: Boolean,
+        value: false
+      }
     };
   }
 
-  validateCode(code, format) {
-    var re = new RegExp(format);
-    if (format === null) {
-      return true;
-    }
-    return re.test(code);
+  constructor() {
+    super();
+    this._armedStates = ['armed_home', 'armed_away', 'armed_night', 'armed_custom_bypass'];
   }
 
-  stateObjChanged(newVal, oldVal) {
+  _stateObjChanged(newVal, oldVal) {
     if (newVal) {
+      const state = newVal.state;
       const props = {
-        codeFormat: newVal.attributes.code_format,
-        numericPin: newVal.attributes.code_format === '^\\d+$',
-        armHomeButtonVisible: newVal.state === 'disarmed',
-        armAwayButtonVisible: newVal.state === 'disarmed',
+        _codeFormat: newVal.attributes.code_format,
+        _armVisible: state === 'disarmed',
+        _disarmVisible: this._armedStates.includes(state) ||
+          state === 'pending' || state === 'triggered'
       };
-      props.disarmButtonVisible = (
-        newVal.state === 'armed_home' ||
-        newVal.state === 'armed_away' ||
-        newVal.state === 'armed_night' ||
-        newVal.state === 'armed_custom_bypass' ||
-        newVal.state === 'pending' ||
-        newVal.state === 'triggered');
-      props.codeInputEnabled = props.disarmButtonVisible || newVal.state === 'disarmed';
+      props._inputEnabled = props._disarmVisible || props._armVisible;
       this.setProperties(props);
     }
     if (oldVal) {
@@ -131,34 +148,32 @@ class MoreInfoAlarmControlPanel extends EventsMixin(PolymerElement) {
     }
   }
 
-  numberPadClicked(ev) {
-    this.enteredCode += ev.target.getAttribute('data-digit');
+  _isNumber(format) {
+    return format === 'Number';
   }
 
-  clearCode() {
-    this.enteredCode = '';
+  _validateCode(code, format) {
+    return !format || code.length > 0;
   }
 
-  handleDisarmTap() {
-    this.callService('alarm_disarm', { code: this.enteredCode });
+  _digitClicked(ev) {
+    this._enteredCode += ev.target.getAttribute('data-digit');
   }
 
-  handleHomeTap() {
-    this.callService('alarm_arm_home', { code: this.enteredCode });
+  _clearEnteredCode() {
+    this._enteredCode = '';
   }
 
-  handleAwayTap() {
-    this.callService('alarm_arm_away', { code: this.enteredCode });
-  }
-
-  callService(service, data) {
-    var serviceData = data || {};
-    serviceData.entity_id = this.stateObj.entity_id;
-    this.hass.callService('alarm_control_panel', service, serviceData)
-      .then(function () {
-        this.enteredCode = '';
-      }.bind(this));
+  _callService(ev) {
+    const service = ev.target.getAttribute('data-service');
+    const data = {
+      entity_id: this.stateObj.entity_id,
+      code: this._enteredCode
+    };
+    this.hass.callService('alarm_control_panel', service, data)
+      .then(() => {
+        this._enteredCode = '';
+      });
   }
 }
-
 customElements.define('more-info-alarm_control_panel', MoreInfoAlarmControlPanel);
diff --git a/src/translations/en.json b/src/translations/en.json
index f5a0191c15..d1c2f24826 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -315,6 +315,13 @@
   },
   "ui": {
     "card": {
+      "alarm_control_panel": {
+        "code": "Code",
+        "clear_code": "Clear",
+        "disarm": "Disarm",
+        "arm_home": "Arm home",
+        "arm_away": "Arm away"
+      },
       "camera": {
         "not_available": "Image not available"
       },