diff --git a/src/data/automation.ts b/src/data/automation.ts
index 02032b06c4..ab1cb44cbb 100644
--- a/src/data/automation.ts
+++ b/src/data/automation.ts
@@ -6,6 +6,7 @@ import {
 export interface AutomationEntity extends HassEntityBase {
   attributes: HassEntityAttributeBase & {
     id?: string;
+    last_triggered: string;
   };
 }
 
diff --git a/src/panels/config/automation/ha-automation-picker.js b/src/panels/config/automation/ha-automation-picker.js
deleted file mode 100644
index ea9eb0c156..0000000000
--- a/src/panels/config/automation/ha-automation-picker.js
+++ /dev/null
@@ -1,184 +0,0 @@
-import "@polymer/app-layout/app-header/app-header";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-fab/paper-fab";
-import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-item/paper-item";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../components/ha-card";
-import "../../../components/ha-paper-icon-button-arrow-prev";
-import "../../../layouts/ha-app-layout";
-
-import "../ha-config-section";
-
-import "../../../components/ha-icon-next";
-
-import NavigateMixin from "../../../mixins/navigate-mixin";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-import computeStateName from "../../../common/entity/compute_state_name";
-import { computeRTL } from "../../../common/util/compute_rtl";
-
-/*
- * @appliesMixin LocalizeMixin
- * @appliesMixin NavigateMixin
- */
-class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
-  static get template() {
-    return html`
-      <style include="ha-style">
-        :host {
-          display: block;
-        }
-
-        ha-card {
-          overflow: hidden;
-        }
-
-        paper-item {
-          cursor: pointer;
-        }
-
-        paper-fab {
-          position: fixed;
-          bottom: 16px;
-          right: 16px;
-          z-index: 1;
-        }
-
-        paper-fab[is-wide] {
-          bottom: 24px;
-          right: 24px;
-        }
-
-        paper-fab[rtl] {
-          right: auto;
-          left: 16px;
-        }
-
-        paper-fab[rtl][is-wide] {
-          bottom: 24px;
-          right: auto;
-          left: 24px;
-        }
-
-        a {
-          color: var(--primary-color);
-        }
-      </style>
-
-      <ha-app-layout has-scrolling-region="">
-        <app-header slot="header" fixed="">
-          <app-toolbar>
-            <ha-paper-icon-button-arrow-prev on-click="_backTapped">
-            </ha-paper-icon-button-arrow-prev>
-            <div main-title="">
-              [[localize('ui.panel.config.automation.caption')]]
-            </div>
-          </app-toolbar>
-        </app-header>
-
-        <ha-config-section is-wide="[[isWide]]">
-          <div slot="header">
-            [[localize('ui.panel.config.automation.picker.header')]]
-          </div>
-          <div slot="introduction">
-            [[localize('ui.panel.config.automation.picker.introduction')]]
-            <p>
-              <a
-                href="https://home-assistant.io/docs/automation/editor/"
-                target="_blank"
-              >
-                [[localize('ui.panel.config.automation.picker.learn_more')]]
-              </a>
-            </p>
-          </div>
-
-          <ha-card
-            heading="[[localize('ui.panel.config.automation.picker.pick_automation')]]"
-          >
-            <template is="dom-if" if="[[!automations.length]]">
-              <div class="card-content">
-                <p>
-                  [[localize('ui.panel.config.automation.picker.no_automations')]]
-                </p>
-              </div>
-            </template>
-            <template is="dom-repeat" items="[[automations]]" as="automation">
-              <paper-item>
-                <paper-item-body two-line="" on-click="automationTapped">
-                  <div>[[computeName(automation)]]</div>
-                  <div secondary="">[[computeDescription(automation)]]</div>
-                </paper-item-body>
-                <ha-icon-next></ha-icon-next>
-              </paper-item>
-            </template>
-          </ha-card>
-        </ha-config-section>
-
-        <paper-fab
-          slot="fab"
-          is-wide$="[[isWide]]"
-          icon="hass:plus"
-          title="[[localize('ui.panel.config.automation.picker.add_automation')]]"
-          on-click="addAutomation"
-          rtl$="[[rtl]]"
-        ></paper-fab>
-      </ha-app-layout>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-      },
-
-      automations: {
-        type: Array,
-      },
-
-      isWide: {
-        type: Boolean,
-      },
-
-      rtl: {
-        type: Boolean,
-        reflectToAttribute: true,
-        computed: "_computeRTL(hass)",
-      },
-    };
-  }
-
-  automationTapped(ev) {
-    this.navigate(
-      "/config/automation/edit/" +
-        this.automations[ev.model.index].attributes.id
-    );
-  }
-
-  addAutomation() {
-    this.navigate("/config/automation/new");
-  }
-
-  computeName(automation) {
-    return computeStateName(automation);
-  }
-
-  // Still thinking of something to add here.
-  // eslint-disable-next-line
-  computeDescription(automation) {
-    return "";
-  }
-
-  _backTapped() {
-    history.back();
-  }
-
-  _computeRTL(hass) {
-    return computeRTL(hass);
-  }
-}
-
-customElements.define("ha-automation-picker", HaAutomationPicker);
diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts
new file mode 100644
index 0000000000..d8c6259bfb
--- /dev/null
+++ b/src/panels/config/automation/ha-automation-picker.ts
@@ -0,0 +1,224 @@
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  CSSResultArray,
+  css,
+  property,
+  customElement,
+} from "lit-element";
+import { ifDefined } from "lit-html/directives/if-defined";
+import "@polymer/paper-fab/paper-fab";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-item/paper-item-body";
+import "@polymer/paper-tooltip/paper-tooltip";
+import "../../../layouts/hass-subpage";
+
+import "../../../components/ha-card";
+import "../../../components/entity/ha-entity-toggle";
+
+import "../ha-config-section";
+
+import computeStateName from "../../../common/entity/compute_state_name";
+import { computeRTL } from "../../../common/util/compute_rtl";
+import { haStyle } from "../../../resources/styles";
+import { HomeAssistant } from "../../../types";
+import { AutomationEntity } from "../../../data/automation";
+import format_date_time from "../../../common/datetime/format_date_time";
+import { fireEvent } from "../../../common/dom/fire_event";
+
+@customElement("ha-automation-picker")
+class HaAutomationPicker extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public isWide!: boolean;
+  @property() public automations!: AutomationEntity[];
+
+  protected render(): TemplateResult | void {
+    return html`
+      <hass-subpage
+        .header=${this.hass.localize("ui.panel.config.automation.caption")}
+      >
+        <ha-config-section .isWide=${this.isWide}>
+          <div slot="header">
+            ${this.hass.localize("ui.panel.config.automation.picker.header")}
+          </div>
+          <div slot="introduction">
+            ${this.hass.localize(
+              "ui.panel.config.automation.picker.introduction"
+            )}
+            <p>
+              <a
+                href="https://home-assistant.io/docs/automation/editor/"
+                target="_blank"
+              >
+                ${this.hass.localize(
+                  "ui.panel.config.automation.picker.learn_more"
+                )}
+              </a>
+            </p>
+          </div>
+
+          <ha-card
+            .heading=${this.hass.localize(
+              "ui.panel.config.automation.picker.pick_automation"
+            )}
+          >
+            ${this.automations.length === 0
+              ? html`
+                  <div class="card-content">
+                    <p>
+                      ${this.hass.localize(
+                        "ui.panel.config.automation.picker.no_automations"
+                      )}
+                    </p>
+                  </div>
+                `
+              : this.automations.map(
+                  (automation) => html`
+
+                      <div class='automation'>
+                        <ha-entity-toggle
+                          .hass=${this.hass}
+                          .stateObj=${automation}
+                        ></ha-entity-toggle>
+
+                        <paper-item-body two-line>
+                          <div>${computeStateName(automation)}</div>
+                          <div secondary>
+                            Last triggered: ${
+                              automation.attributes.last_triggered
+                                ? format_date_time(
+                                    new Date(
+                                      automation.attributes.last_triggered
+                                    ),
+                                    this.hass.language
+                                  )
+                                : "never"
+                            }
+                          </div>
+                        </paper-item-body>
+                        <div class='actions'>
+                          <paper-icon-button
+                            .automation=${automation}
+                            @click=${this._showInfo}
+                            icon="hass:information-outline"
+                          ></paper-icon-button>
+                          <a
+                            href=${ifDefined(
+                              automation.attributes.id
+                                ? `/config/automation/edit/${
+                                    automation.attributes.id
+                                  }`
+                                : undefined
+                            )}
+                          >
+                            <paper-icon-button
+                              icon="hass:pencil"
+                              .disabled=${!automation.attributes.id}
+                            ></paper-icon-button>
+                            ${
+                              !automation.attributes.id
+                                ? html`
+                                    <paper-tooltip position="left">
+                                      Only automations defined in
+                                      automations.yaml are editable.
+                                    </paper-tooltip>
+                                  `
+                                : ""
+                            }
+                          </a>
+                        </div>
+                      </div>
+                    </a>
+                  `
+                )}
+          </ha-card>
+        </ha-config-section>
+
+        <a href="/config/automation/new">
+          <paper-fab
+            slot="fab"
+            ?is-wide=${this.isWide}
+            icon="hass:plus"
+            title=${this.hass.localize(
+              "ui.panel.config.automation.picker.add_automation"
+            )}
+            ?rtl=${computeRTL(this.hass)}
+          ></paper-fab
+        ></a>
+      </hass-subpage>
+    `;
+  }
+
+  private _showInfo(ev) {
+    const entityId = ev.currentTarget.automation.entity_id;
+    fireEvent(this, "hass-more-info", { entityId });
+  }
+
+  static get styles(): CSSResultArray {
+    return [
+      haStyle,
+      css`
+        :host {
+          display: block;
+        }
+
+        ha-card {
+          margin-bottom: 56px;
+        }
+
+        .automation {
+          display: flex;
+          flex-direction: horizontal;
+          align-items: center;
+          padding: 0 8px 0 16px;
+        }
+
+        .automation a[href] {
+          color: var(--primary-text-color);
+        }
+
+        ha-entity-toggle {
+          margin-right: 16px;
+        }
+
+        .actions {
+          display: flex;
+        }
+
+        paper-fab {
+          position: fixed;
+          bottom: 16px;
+          right: 16px;
+          z-index: 1;
+        }
+
+        paper-fab[is-wide] {
+          bottom: 24px;
+          right: 24px;
+        }
+
+        paper-fab[rtl] {
+          right: auto;
+          left: 16px;
+        }
+
+        paper-fab[rtl][is-wide] {
+          bottom: 24px;
+          right: auto;
+          left: 24px;
+        }
+
+        a {
+          color: var(--primary-color);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-picker": HaAutomationPicker;
+  }
+}
diff --git a/src/panels/config/automation/ha-config-automation.js b/src/panels/config/automation/ha-config-automation.js
index f0f4defdeb..418d954562 100644
--- a/src/panels/config/automation/ha-config-automation.js
+++ b/src/panels/config/automation/ha-config-automation.js
@@ -93,10 +93,7 @@ class HaConfigAutomation extends PolymerElement {
     Object.keys(hass.states).forEach(function(key) {
       var entity = hass.states[key];
 
-      if (
-        computeStateDomain(entity) === "automation" &&
-        "id" in entity.attributes
-      ) {
+      if (computeStateDomain(entity) === "automation") {
         automations.push(entity);
       }
     });