diff --git a/src/data/automation.ts b/src/data/automation.ts
index cdb751040a..35b5d2b2e2 100644
--- a/src/data/automation.ts
+++ b/src/data/automation.ts
@@ -189,7 +189,7 @@ export const showAutomationEditor = (
   data?: Partial<AutomationConfig>
 ) => {
   inititialAutomationEditorData = data;
-  navigate(el, "/config/automation/new");
+  navigate(el, "/config/automation/edit/new");
 };
 
 export const getAutomationEditorInitData = () => {
diff --git a/src/panels/config/automation/ha-config-automation.js b/src/panels/config/automation/ha-config-automation.js
deleted file mode 100644
index d1ed22cc7d..0000000000
--- a/src/panels/config/automation/ha-config-automation.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import "@polymer/app-route/app-route";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "./ha-automation-editor";
-import "./ha-automation-picker";
-
-import { computeStateDomain } from "../../../common/entity/compute_state_domain";
-
-class HaConfigAutomation extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        ha-automation-picker,
-        ha-automation-editor {
-          height: 100%;
-        }
-      </style>
-      <app-route
-        route="[[route]]"
-        pattern="/edit/:automation"
-        data="{{_routeData}}"
-        active="{{_edittingAutomation}}"
-      ></app-route>
-      <app-route
-        route="[[route]]"
-        pattern="/new"
-        active="{{_creatingNew}}"
-      ></app-route>
-
-      <template is="dom-if" if="[[!showEditor]]">
-        <ha-automation-picker
-          hass="[[hass]]"
-          automations="[[automations]]"
-          is-wide="[[isWide]]"
-          narrow="[[narrow]]"
-          route="[[route]]"
-        ></ha-automation-picker>
-      </template>
-
-      <template is="dom-if" if="[[showEditor]]" restamp="">
-        <ha-automation-editor
-          hass="[[hass]]"
-          automation="[[automation]]"
-          is-wide="[[isWide]]"
-          narrow="[[narrow]]"
-          route="[[route]]"
-          creating-new="[[_creatingNew]]"
-        ></ha-automation-editor>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      route: Object,
-      isWide: Boolean,
-      narrow: Boolean,
-      _routeData: Object,
-      _routeMatches: Boolean,
-      _creatingNew: Boolean,
-      _edittingAutomation: Boolean,
-
-      automations: {
-        type: Array,
-        computed: "computeAutomations(hass)",
-      },
-
-      automation: {
-        type: Object,
-        computed:
-          "computeAutomation(automations, _edittingAutomation, _routeData)",
-      },
-
-      showEditor: {
-        type: Boolean,
-        computed: "computeShowEditor(_edittingAutomation, _creatingNew)",
-      },
-    };
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.route = { path: "", prefix: "" };
-  }
-
-  computeAutomation(automations, edittingAddon, routeData) {
-    if (!automations || !edittingAddon) {
-      return null;
-    }
-    for (var i = 0; i < automations.length; i++) {
-      if (automations[i].attributes.id === routeData.automation) {
-        return automations[i];
-      }
-    }
-    return null;
-  }
-
-  computeAutomations(hass) {
-    var automations = [];
-
-    Object.keys(hass.states).forEach(function(key) {
-      var entity = hass.states[key];
-
-      if (computeStateDomain(entity) === "automation") {
-        automations.push(entity);
-      }
-    });
-
-    return automations;
-  }
-
-  computeShowEditor(_edittingAutomation, _creatingNew) {
-    return _creatingNew || _edittingAutomation;
-  }
-}
-
-customElements.define("ha-config-automation", HaConfigAutomation);
diff --git a/src/panels/config/automation/ha-config-automation.ts b/src/panels/config/automation/ha-config-automation.ts
new file mode 100644
index 0000000000..e2bb568521
--- /dev/null
+++ b/src/panels/config/automation/ha-config-automation.ts
@@ -0,0 +1,82 @@
+import { HassEntities } from "home-assistant-js-websocket";
+import { customElement, property, PropertyValues } from "lit-element";
+import memoizeOne from "memoize-one";
+import { computeStateDomain } from "../../../common/entity/compute_state_domain";
+import { AutomationEntity } from "../../../data/automation";
+import {
+  HassRouterPage,
+  RouterOptions,
+} from "../../../layouts/hass-router-page";
+import { HomeAssistant } from "../../../types";
+import "./ha-automation-editor";
+import "./ha-automation-picker";
+
+@customElement("ha-config-automation")
+class HaConfigAutomation extends HassRouterPage {
+  @property() public hass!: HomeAssistant;
+  @property() public narrow!: boolean;
+  @property() public isWide!: boolean;
+  @property() public showAdvanced!: boolean;
+  @property() public automations: AutomationEntity[] = [];
+
+  protected routerOptions: RouterOptions = {
+    defaultPage: "dashboard",
+    routes: {
+      dashboard: {
+        tag: "ha-automation-picker",
+        cache: true,
+      },
+      edit: {
+        tag: "ha-automation-editor",
+      },
+    },
+  };
+
+  private _computeAutomations = memoizeOne((states: HassEntities) => {
+    const automations: AutomationEntity[] = [];
+    Object.values(states).forEach((state) => {
+      if (
+        computeStateDomain(state) === "automation" &&
+        !state.attributes.hidden
+      ) {
+        automations.push(state as AutomationEntity);
+      }
+    });
+
+    return automations;
+  });
+
+  protected updatePageEl(pageEl, changedProps: PropertyValues) {
+    pageEl.hass = this.hass;
+    pageEl.narrow = this.narrow;
+    pageEl.isWide = this.isWide;
+    pageEl.route = this.routeTail;
+    pageEl.showAdvanced = this.showAdvanced;
+
+    if (this.hass) {
+      pageEl.automations = this._computeAutomations(this.hass.states);
+    }
+
+    if (
+      (!changedProps || changedProps.has("route")) &&
+      this._currentPage === "edit"
+    ) {
+      pageEl.creatingNew = undefined;
+      const automationId = this.routeTail.path.substr(1);
+      pageEl.creatingNew = automationId === "new" ? true : false;
+      pageEl.automation =
+        automationId === "new"
+          ? undefined
+          : pageEl.automations.find(
+              (entity: AutomationEntity) =>
+                entity.attributes.id === automationId
+            );
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-automation": HaConfigAutomation;
+  }
+}