diff --git a/build-scripts/gulp/app.js b/build-scripts/gulp/app.js
new file mode 100644
index 0000000000..0536b14a30
--- /dev/null
+++ b/build-scripts/gulp/app.js
@@ -0,0 +1,51 @@
+// Run HA develop mode
+const gulp = require("gulp");
+
+require("./clean.js");
+require("./translations.js");
+require("./gen-icons.js");
+require("./gather-static.js");
+require("./webpack.js");
+require("./service-worker.js");
+require("./entry-html.js");
+
+gulp.task(
+  "develop-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean",
+    gulp.parallel(
+      "gen-service-worker-dev",
+      "gen-icons",
+      "gen-pages-dev",
+      "gen-index-html-dev",
+      "build-translations"
+    ),
+    "copy-static",
+    "webpack-watch-app"
+  )
+);
+
+gulp.task(
+  "build-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean",
+    gulp.parallel("gen-icons", "build-translations"),
+    "copy-static",
+    gulp.parallel(
+      "webpack-prod-app",
+      // Do not compress static files in CI, it's SLOW.
+      ...(process.env.CI === "true" ? [] : ["compress-static"])
+    ),
+    gulp.parallel(
+      "gen-pages-prod",
+      "gen-index-html-prod",
+      "gen-service-worker-prod"
+    )
+  )
+);
diff --git a/build-scripts/gulp/clean.js b/build-scripts/gulp/clean.js
index d3eaed526a..d1226c198e 100644
--- a/build-scripts/gulp/clean.js
+++ b/build-scripts/gulp/clean.js
@@ -3,3 +3,4 @@ const gulp = require("gulp");
 const config = require("../paths");
 
 gulp.task("clean", () => del([config.root, config.build_dir]));
+gulp.task("clean-demo", () => del([config.demo_root, config.build_dir]));
diff --git a/build-scripts/gulp/demo.js b/build-scripts/gulp/demo.js
new file mode 100644
index 0000000000..cbe23e326c
--- /dev/null
+++ b/build-scripts/gulp/demo.js
@@ -0,0 +1,36 @@
+// Run HA develop mode
+const gulp = require("gulp");
+
+require("./clean.js");
+require("./translations.js");
+require("./gen-icons.js");
+require("./gather-static.js");
+require("./webpack.js");
+require("./service-worker.js");
+require("./entry-html.js");
+
+gulp.task(
+  "develop-demo",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-demo",
+    gulp.parallel("gen-icons", "gen-icons-demo", "build-translations"),
+    "copy-static-demo",
+    "webpack-dev-server-demo"
+  )
+);
+
+gulp.task(
+  "build-demo",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-demo",
+    gulp.parallel("gen-icons", "gen-icons-demo", "build-translations"),
+    "copy-static-demo",
+    "webpack-prod-demo"
+  )
+);
diff --git a/build-scripts/gulp/develop.js b/build-scripts/gulp/develop.js
deleted file mode 100644
index 2dbcbaac45..0000000000
--- a/build-scripts/gulp/develop.js
+++ /dev/null
@@ -1,29 +0,0 @@
-// Run HA develop mode
-const gulp = require("gulp");
-
-require("./clean.js");
-require("./translations.js");
-require("./gen-icons.js");
-require("./gather-static.js");
-require("./webpack.js");
-require("./service-worker.js");
-require("./entry-html.js");
-
-gulp.task(
-  "develop",
-  gulp.series(
-    async function setEnv() {
-      process.env.NODE_ENV = "development";
-    },
-    "clean",
-    gulp.parallel(
-      "copy-static",
-      "gen-service-worker-dev",
-      "gen-icons",
-      "gen-pages-dev",
-      "gen-index-html-dev",
-      gulp.series("build-translations", "copy-translations")
-    ),
-    "webpack-watch"
-  )
-);
diff --git a/build-scripts/gulp/gather-static.js b/build-scripts/gulp/gather-static.js
index 733c0e876c..9008b63f58 100644
--- a/build-scripts/gulp/gather-static.js
+++ b/build-scripts/gulp/gather-static.js
@@ -5,17 +5,21 @@ const path = require("path");
 const fs = require("fs-extra");
 const zopfli = require("gulp-zopfli-green");
 const merge = require("merge-stream");
-const config = require("../paths");
+const paths = require("../paths");
 
 const npmPath = (...parts) =>
-  path.resolve(config.polymer_dir, "node_modules", ...parts);
-const polyPath = (...parts) => path.resolve(config.polymer_dir, ...parts);
-const staticPath = (...parts) => path.resolve(config.root, "static", ...parts);
+  path.resolve(paths.polymer_dir, "node_modules", ...parts);
+const polyPath = (...parts) => path.resolve(paths.polymer_dir, ...parts);
 
 const copyFileDir = (fromFile, toDir) =>
   fs.copySync(fromFile, path.join(toDir, path.basename(fromFile)));
 
-function copyTranslations() {
+const genStaticPath = (staticDir) => (...parts) =>
+  path.resolve(staticDir, ...parts);
+
+function copyTranslations(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+
   // Translation output
   fs.copySync(
     polyPath("build-translations/output"),
@@ -23,9 +27,8 @@ function copyTranslations() {
   );
 }
 
-function copyStatic() {
-  // Basic static files
-  fs.copySync(polyPath("public"), config.root);
+function copyPolyfills(staticDir) {
+  const staticPath = genStaticPath(staticDir);
 
   // Web Component polyfills and adapters
   copyFileDir(
@@ -40,31 +43,16 @@ function copyStatic() {
     npmPath("@webcomponents/webcomponentsjs/webcomponents-bundle.js.map"),
     staticPath("polyfills/")
   );
-
-  // Local fonts
-  fs.copySync(npmPath("@polymer/font-roboto-local/fonts"), staticPath("fonts"));
-
-  // External dependency assets
-  copyFileDir(
-    npmPath("react-big-calendar/lib/css/react-big-calendar.css"),
-    staticPath("panels/calendar/")
-  );
-  copyFileDir(
-    npmPath("leaflet/dist/leaflet.css"),
-    staticPath("images/leaflet/")
-  );
-  fs.copySync(
-    npmPath("leaflet/dist/images"),
-    staticPath("images/leaflet/images/")
-  );
 }
 
-gulp.task("copy-static", (done) => {
-  copyStatic();
-  done();
-});
+function copyFonts(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+  // Local fonts
+  fs.copySync(npmPath("@polymer/font-roboto-local/fonts"), staticPath("fonts"));
+}
 
-gulp.task("compress-static", () => {
+function compressStatic(staticDir) {
+  const staticPath = genStaticPath(staticDir);
   const fonts = gulp
     .src(staticPath("fonts/**/*.ttf"))
     .pipe(zopfli())
@@ -79,9 +67,44 @@ gulp.task("compress-static", () => {
     .pipe(gulp.dest(staticPath("translations")));
 
   return merge(fonts, polyfills, translations);
-});
+}
 
-gulp.task("copy-translations", (done) => {
-  copyTranslations();
+gulp.task("copy-static", (done) => {
+  const staticDir = paths.static;
+  const staticPath = genStaticPath(paths.static);
+  // Basic static files
+  fs.copySync(polyPath("public"), paths.root);
+
+  copyPolyfills(staticDir);
+  copyFonts(staticDir);
+  copyTranslations(staticDir);
+
+  // Panel assets
+  copyFileDir(
+    npmPath("react-big-calendar/lib/css/react-big-calendar.css"),
+    staticPath("panels/calendar/")
+  );
+  copyFileDir(
+    npmPath("leaflet/dist/leaflet.css"),
+    staticPath("images/leaflet/")
+  );
+  fs.copySync(
+    npmPath("leaflet/dist/images"),
+    staticPath("images/leaflet/images/")
+  );
+  done();
+});
+
+gulp.task("compress-static", () => compressStatic(paths.static));
+
+gulp.task("copy-static-demo", (done) => {
+  // Copy app static files
+  fs.copySync(polyPath("public"), paths.demo_root);
+  // Copy demo static files
+  fs.copySync(path.resolve(paths.demo_dir, "public"), paths.demo_root);
+
+  copyPolyfills(paths.demo_static);
+  copyFonts(paths.demo_static);
+  copyTranslations(paths.demo_static);
   done();
 });
diff --git a/build-scripts/gulp/gen-icons.js b/build-scripts/gulp/gen-icons.js
index 6563b9a8f1..bfa7d7cc77 100644
--- a/build-scripts/gulp/gen-icons.js
+++ b/build-scripts/gulp/gen-icons.js
@@ -1,6 +1,7 @@
 const gulp = require("gulp");
 const path = require("path");
 const fs = require("fs");
+const paths = require("../paths");
 
 const ICON_PACKAGE_PATH = path.resolve(
   __dirname,
@@ -118,6 +119,15 @@ gulp.task("gen-icons-hass", (done) => {
 });
 gulp.task("gen-icons", gulp.series("gen-icons-hass", "gen-icons-mdi"));
 
+gulp.task("gen-icons-demo", (done) => {
+  const iconNames = findIcons(path.resolve(paths.demo_dir, "./src"), "hademo");
+  fs.writeFileSync(
+    path.resolve(paths.demo_dir, "hademo-icons.html"),
+    generateIconset("hademo", iconNames)
+  );
+  done();
+});
+
 module.exports = {
   findIcons,
   generateIconset,
diff --git a/build-scripts/gulp/release.js b/build-scripts/gulp/release.js
deleted file mode 100644
index f7e26b45ca..0000000000
--- a/build-scripts/gulp/release.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// Run HA develop mode
-const gulp = require("gulp");
-
-require("./clean.js");
-require("./translations.js");
-require("./gen-icons.js");
-require("./gather-static.js");
-require("./webpack.js");
-require("./service-worker.js");
-require("./entry-html.js");
-
-gulp.task(
-  "build-release",
-  gulp.series(
-    async function setEnv() {
-      process.env.NODE_ENV = "production";
-    },
-    "clean",
-    gulp.parallel(
-      "copy-static",
-      "gen-icons",
-      gulp.series("build-translations", "copy-translations")
-    ),
-    gulp.parallel("webpack-prod", "compress-static"),
-    gulp.parallel(
-      "gen-pages-prod",
-      "gen-index-html-prod",
-      "gen-service-worker-prod"
-    )
-  )
-);
diff --git a/build-scripts/gulp/webpack.js b/build-scripts/gulp/webpack.js
index 6ba6fa1e4a..2a21a14011 100644
--- a/build-scripts/gulp/webpack.js
+++ b/build-scripts/gulp/webpack.js
@@ -1,7 +1,11 @@
 // Tasks to run webpack.
 const gulp = require("gulp");
+const path = require("path");
 const webpack = require("webpack");
-const { createAppConfig } = require("../webpack");
+const WebpackDevServer = require("webpack-dev-server");
+const log = require("fancy-log");
+const paths = require("../paths");
+const { createAppConfig, createDemoConfig } = require("../webpack");
 
 const handler = (done) => (err, stats) => {
   if (err) {
@@ -12,7 +16,7 @@ const handler = (done) => (err, stats) => {
     return;
   }
 
-  console.log(`Build done @ ${new Date().toLocaleTimeString()}`);
+  log(`Build done @ ${new Date().toLocaleTimeString()}`);
 
   if (stats.hasErrors() || stats.hasWarnings()) {
     console.log(stats.toString("minimal"));
@@ -23,7 +27,7 @@ const handler = (done) => (err, stats) => {
   }
 };
 
-gulp.task("webpack-watch", () => {
+gulp.task("webpack-watch-app", () => {
   const compiler = webpack([
     createAppConfig({
       isProdBuild: false,
@@ -41,7 +45,7 @@ gulp.task("webpack-watch", () => {
 });
 
 gulp.task(
-  "webpack-prod",
+  "webpack-prod-app",
   () =>
     new Promise((resolve) =>
       webpack(
@@ -61,3 +65,52 @@ gulp.task(
       )
     )
 );
+
+gulp.task("webpack-dev-server-demo", () => {
+  const compiler = webpack([
+    createDemoConfig({
+      isProdBuild: false,
+      latestBuild: false,
+      isStatsBuild: false,
+    }),
+    createDemoConfig({
+      isProdBuild: false,
+      latestBuild: true,
+      isStatsBuild: false,
+    }),
+  ]);
+
+  new WebpackDevServer(compiler, {
+    open: true,
+    watchContentBase: true,
+    contentBase: path.resolve(paths.demo_dir, "dist"),
+  }).listen(8080, "localhost", function(err) {
+    if (err) {
+      throw err;
+    }
+    // Server listening
+    log("[webpack-dev-server]", "http://localhost:8080");
+  });
+});
+
+gulp.task(
+  "webpack-prod-demo",
+  () =>
+    new Promise((resolve) =>
+      webpack(
+        [
+          createDemoConfig({
+            isProdBuild: true,
+            latestBuild: false,
+            isStatsBuild: false,
+          }),
+          createDemoConfig({
+            isProdBuild: true,
+            latestBuild: true,
+            isStatsBuild: false,
+          }),
+        ],
+        handler(resolve)
+      )
+    )
+);
diff --git a/build-scripts/paths.js b/build-scripts/paths.js
index 28d553717b..f078c80da9 100644
--- a/build-scripts/paths.js
+++ b/build-scripts/paths.js
@@ -2,9 +2,16 @@ var path = require("path");
 
 module.exports = {
   polymer_dir: path.resolve(__dirname, ".."),
+
   build_dir: path.resolve(__dirname, "../build"),
   root: path.resolve(__dirname, "../hass_frontend"),
   static: path.resolve(__dirname, "../hass_frontend/static"),
   output: path.resolve(__dirname, "../hass_frontend/frontend_latest"),
   output_es5: path.resolve(__dirname, "../hass_frontend/frontend_es5"),
+
+  demo_dir: path.resolve(__dirname, "../demo"),
+  demo_root: path.resolve(__dirname, "../demo/dist"),
+  demo_static: path.resolve(__dirname, "../demo/dist/static"),
+  demo_output: path.resolve(__dirname, "../demo/dist/frontend_latest"),
+  demo_output_es5: path.resolve(__dirname, "../demo/frontend_es5"),
 };
diff --git a/build-scripts/webpack.js b/build-scripts/webpack.js
index 1a48454661..a29e6ec85a 100644
--- a/build-scripts/webpack.js
+++ b/build-scripts/webpack.js
@@ -17,6 +17,12 @@ if (!version) {
 }
 version = version[0];
 
+const genMode = (isProdBuild) => (isProdBuild ? "production" : "development");
+const genDevTool = (isProdBuild) =>
+  isProdBuild ? "cheap-source-map" : "inline-cheap-module-source-map";
+const genChunkFilename = (isProdBuild, isStatsBuild) =>
+  isProdBuild && !isStatsBuild ? "chunk.[chunkhash].js" : "[name].chunk.js";
+
 const resolve = {
   extensions: [".ts", ".js", ".json", ".tsx"],
   alias: {
@@ -29,6 +35,20 @@ const resolve = {
   },
 };
 
+const cssLoader = {
+  test: /\.css$/,
+  use: "raw-loader",
+};
+const htmlLoader = {
+  test: /\.(html)$/,
+  use: {
+    loader: "html-loader",
+    options: {
+      exportAsEs6Default: true,
+    },
+  },
+};
+
 const plugins = [
   // Ignore moment.js locales
   new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
@@ -75,8 +95,6 @@ const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
     ] = `build-translations/output/${key}.json`;
   });
 
-  const publicPath = latestBuild ? "/frontend_latest/" : "/frontend_es5/";
-
   const entry = {
     app: "./src/entrypoints/app.ts",
     authorize: "./src/entrypoints/authorize.ts",
@@ -88,28 +106,11 @@ const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
   };
 
   return {
-    mode: isProdBuild ? "production" : "development",
-    devtool: isProdBuild
-      ? "cheap-source-map "
-      : "inline-cheap-module-source-map",
+    mode: genMode(isProdBuild),
+    devtool: genDevTool(isProdBuild),
     entry,
     module: {
-      rules: [
-        babelLoaderConfig({ latestBuild }),
-        {
-          test: /\.css$/,
-          use: "raw-loader",
-        },
-        {
-          test: /\.(html)$/,
-          use: {
-            loader: "html-loader",
-            options: {
-              exportAsEs6Default: true,
-            },
-          },
-        },
-      ],
+      rules: [babelLoaderConfig({ latestBuild }), cssLoader, htmlLoader],
     },
     optimization: optimization(latestBuild),
     plugins: [
@@ -165,20 +166,56 @@ const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
         if (!isProdBuild || dontHash.has(chunk.name)) return `${chunk.name}.js`;
         return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`;
       },
-      chunkFilename:
-        isProdBuild && !isStatsBuild
-          ? "chunk.[chunkhash].js"
-          : "[name].chunk.js",
+      chunkFilename: genChunkFilename(isProdBuild, isStatsBuild),
       path: latestBuild ? paths.output : paths.output_es5,
-      publicPath,
+      publicPath: latestBuild ? "/frontend_latest/" : "/frontend_es5/",
     },
     resolve,
   };
 };
 
+const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
+  return {
+    mode: genMode(isProdBuild),
+    devtool: genDevTool(isProdBuild),
+    entry: {
+      main: "./demo/src/entrypoint.ts",
+      compatibility: "./src/entrypoints/compatibility.ts",
+    },
+    module: {
+      rules: [babelLoaderConfig({ latestBuild }), cssLoader, htmlLoader],
+    },
+    optimization: optimization(latestBuild),
+    plugins: [
+      new webpack.DefinePlugin({
+        __DEV__: !isProdBuild,
+        __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
+        __VERSION__: JSON.stringify("DEMO"),
+        __DEMO__: true,
+        __STATIC_PATH__: "/static/",
+        "process.env.NODE_ENV": JSON.stringify(
+          isProdBuild ? "production" : "development"
+        ),
+      }),
+      ...plugins,
+    ].filter(Boolean),
+    resolve,
+    output: {
+      filename: "[name].js",
+      chunkFilename: genChunkFilename(isProdBuild, isStatsBuild),
+      path: path.resolve(
+        paths.demo_root,
+        latestBuild ? "frontend_latest" : "frontend_es5"
+      ),
+      publicPath: latestBuild ? "/frontend_latest/" : "/frontend_es5/",
+    },
+  };
+};
+
 module.exports = {
   resolve,
   plugins,
   optimization,
   createAppConfig,
+  createDemoConfig,
 };
diff --git a/demo/public/index.html b/demo/public/index.html
index 5a9e3e49a7..4878fe8d43 100644
--- a/demo/public/index.html
+++ b/demo/public/index.html
@@ -74,9 +74,6 @@
       content="https://www.home-assistant.io/images/default-social.png"
     />
     <title>Home Assistant Demo</title>
-    <script src="./custom-elements-es5-adapter.js"></script>
-    <script src="./compatibility.js"></script>
-    <script src="./main.js" async></script>
     <style>
       body {
         font-family: Roboto, Noto, sans-serif;
@@ -98,6 +95,47 @@
   <body>
     <div id="ha-init-skeleton"></div>
     <ha-demo></ha-demo>
+    <script>
+      function _ls(src) {
+        var doc = document.documentElement;
+        var script = doc.insertBefore(
+          document.createElement("script"),
+          doc.lastChild
+        );
+        script.type = "text/javascript";
+        script.src = src;
+      }
+      window.Polymer = {
+        lazyRegister: true,
+        useNativeCSSProperties: true,
+        dom: "shadow",
+        suppressTemplateNotifications: true,
+        suppressBindingNotifications: true,
+      };
+      var webComponentsSupported =
+        "customElements" in window &&
+        "content" in document.createElement("template");
+      if (!webComponentsSupported) {
+        _ls("/static/polyfills/webcomponents-bundle.js");
+      }
+      var isS101 = /\s+Version\/10\.1(?:\.\d+)?\s+Safari\//.test(
+        navigator.userAgent
+      );
+    </script>
+
+    <script type="module" src="./frontend_latest/main.js"></script>
+
+    <script nomodule>
+      (function() {
+        // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
+        if (!isS101) {
+          _ls("./static/polyfills/custom-elements-es5-adapter.js");
+          _ls("./frontend_es5/compatibility.js");
+          _ls("./frontend_es5/main.js");
+        }
+      })();
+    </script>
+
     <script>
       var _gaq = [["_setAccount", "UA-57927901-5"], ["_trackPageview"]];
       (function(d, t) {
diff --git a/demo/public/service_worker.js b/demo/public/service_worker.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/demo/script/build_demo b/demo/script/build_demo
index ba5c1475d3..3810298f09 100755
--- a/demo/script/build_demo
+++ b/demo/script/build_demo
@@ -4,16 +4,6 @@
 # Stop on errors
 set -e
 
-cd "$(dirname "$0")/.."
+cd "$(dirname "$0")/../.."
 
-OUTPUT_DIR=dist
-
-rm -rf $OUTPUT_DIR
-mkdir $OUTPUT_DIR
-node script/gen-icons.js
-
-cd ..
-DEMO=1 ./node_modules/.bin/gulp build-translations gen-icons
-cd demo
-
-NODE_ENV=production ../node_modules/.bin/webpack -p --config webpack.config.js
+./node_modules/.bin/gulp build-demo
diff --git a/demo/script/develop_demo b/demo/script/develop_demo
index f7fd754df2..64492e9c5b 100755
--- a/demo/script/develop_demo
+++ b/demo/script/develop_demo
@@ -4,12 +4,6 @@
 # Stop on errors
 set -e
 
-cd "$(dirname "$0")/.."
+cd "$(dirname "$0")/../.."
 
-node script/gen-icons.js
-
-cd ..
-DEMO=1 ./node_modules/.bin/gulp build-translations gen-icons
-cd demo
-
-../node_modules/.bin/webpack-dev-server
+./node_modules/.bin/gulp develop-demo
diff --git a/demo/src/ha-demo.ts b/demo/src/ha-demo.ts
index 0066940028..2a14459de0 100644
--- a/demo/src/ha-demo.ts
+++ b/demo/src/ha-demo.ts
@@ -1,4 +1,4 @@
-import { HomeAssistantAppEl } from "../../src/layouts/app/home-assistant";
+import { HomeAssistantAppEl } from "../../src/layouts/home-assistant";
 import {
   provideHass,
   MockHomeAssistant,
@@ -18,7 +18,7 @@ import { HomeAssistant } from "../../src/types";
 import { mockFrontend } from "./stubs/frontend";
 
 class HaDemo extends HomeAssistantAppEl {
-  protected async _handleConnProm() {
+  protected async _initialize() {
     const initial: Partial<MockHomeAssistant> = {
       panelUrl: (this as any).panelUrl,
       // Override updateHass so that the correct hass lifecycle methods are called
@@ -26,7 +26,7 @@ class HaDemo extends HomeAssistantAppEl {
         this._updateHass(hassUpdate),
     };
 
-    const hass = provideHass(this, initial);
+    const hass = (this.hass = provideHass(this, initial));
     mockLovelace(hass);
     mockAuth(hass);
     mockTranslations(hass);
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
index a58d562e52..266523cdbe 100644
--- a/demo/webpack.config.js
+++ b/demo/webpack.config.js
@@ -1,90 +1,13 @@
-const path = require("path");
-const webpack = require("webpack");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
-const WorkboxPlugin = require("workbox-webpack-plugin");
-const { babelLoaderConfig } = require("../build-scripts/babel.js");
-const webpackBase = require("../build-scripts/webpack.js");
+const { createDemoConfig } = require("../build-scripts/webpack.js");
 
-const isProd = process.env.NODE_ENV === "production";
+// This file exists because we haven't migrated the stats script yet
+
+const isProdBuild = process.env.NODE_ENV === "production";
 const isStatsBuild = process.env.STATS === "1";
-const chunkFilename =
-  isProd && !isStatsBuild ? "chunk.[chunkhash].js" : "[name].chunk.js";
-const buildPath = path.resolve(__dirname, "dist");
-const publicPath = "/";
-
 const latestBuild = false;
 
-module.exports = {
-  mode: isProd ? "production" : "development",
-  devtool: isProd ? "cheap-source-map" : "inline-source-map",
-  entry: {
-    main: "./src/entrypoint.ts",
-    compatibility: "../src/entrypoints/compatibility.ts",
-  },
-  module: {
-    rules: [
-      babelLoaderConfig({ latestBuild }),
-      {
-        test: /\.css$/,
-        use: "raw-loader",
-      },
-      {
-        test: /\.(html)$/,
-        use: {
-          loader: "html-loader",
-          options: {
-            exportAsEs6Default: true,
-          },
-        },
-      },
-    ],
-  },
-  optimization: webpackBase.optimization(latestBuild),
-  plugins: [
-    new webpack.DefinePlugin({
-      __DEV__: false,
-      __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
-      __VERSION__: JSON.stringify("DEMO"),
-      __DEMO__: true,
-      __STATIC_PATH__: "/static/",
-      "process.env.NODE_ENV": JSON.stringify(
-        isProd ? "production" : "development"
-      ),
-    }),
-    new CopyWebpackPlugin([
-      "public",
-      "../node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
-      { from: "../public", to: "static" },
-      { from: "../build-translations/output", to: "static/translations" },
-      {
-        from: "../node_modules/leaflet/dist/leaflet.css",
-        to: "static/images/leaflet/",
-      },
-      {
-        from: "../node_modules/@polymer/font-roboto-local/fonts",
-        to: "static/fonts",
-      },
-      {
-        from: "../node_modules/leaflet/dist/images",
-        to: "static/images/leaflet/",
-      },
-    ]),
-    ...webpackBase.plugins,
-    isProd &&
-      new WorkboxPlugin.GenerateSW({
-        swDest: "service_worker.js",
-        importWorkboxFrom: "local",
-        include: [],
-      }),
-  ].filter(Boolean),
-  resolve: webpackBase.resolve,
-  output: {
-    filename: "[name].js",
-    chunkFilename: chunkFilename,
-    path: buildPath,
-    publicPath,
-  },
-  devServer: {
-    contentBase: "./public",
-  },
-};
+module.exports = createDemoConfig({
+  isProdBuild,
+  isStatsBuild,
+  latestBuild,
+});
diff --git a/hassio/src/addon-view/hassio-addon-audio.js b/hassio/src/addon-view/hassio-addon-audio.js
index d1a4011dda..96275cd107 100644
--- a/hassio/src/addon-view/hassio-addon-audio.js
+++ b/hassio/src/addon-view/hassio-addon-audio.js
@@ -9,7 +9,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../src/resources/ha-style";
-import EventsMixin from "../../../src/mixins/events-mixin";
+import { EventsMixin } from "../../../src/mixins/events-mixin";
 
 class HassioAddonAudio extends EventsMixin(PolymerElement) {
   static get template() {
diff --git a/hassio/src/addon-view/hassio-addon-info.js b/hassio/src/addon-view/hassio-addon-info.js
index 6e9e8c9636..ca3dba785f 100644
--- a/hassio/src/addon-view/hassio-addon-info.js
+++ b/hassio/src/addon-view/hassio-addon-info.js
@@ -10,7 +10,7 @@ import "../../../src/components/ha-label-badge";
 import "../../../src/components/ha-markdown";
 import "../../../src/components/buttons/ha-call-api-button";
 import "../../../src/resources/ha-style";
-import EventsMixin from "../../../src/mixins/events-mixin";
+import { EventsMixin } from "../../../src/mixins/events-mixin";
 import { navigate } from "../../../src/common/navigate";
 
 import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
diff --git a/hassio/src/addon-view/hassio-addon-network.js b/hassio/src/addon-view/hassio-addon-network.js
index 3c5b768188..fcb80ce0e5 100644
--- a/hassio/src/addon-view/hassio-addon-network.js
+++ b/hassio/src/addon-view/hassio-addon-network.js
@@ -5,7 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../src/components/buttons/ha-call-api-button";
 import "../../../src/resources/ha-style";
-import EventsMixin from "../../../src/mixins/events-mixin";
+import { EventsMixin } from "../../../src/mixins/events-mixin";
 
 class HassioAddonNetwork extends EventsMixin(PolymerElement) {
   static get template() {
diff --git a/hassio/src/system/hassio-host-info.js b/hassio/src/system/hassio-host-info.js
index 12ddb7b621..73d22c1c1c 100644
--- a/hassio/src/system/hassio-host-info.js
+++ b/hassio/src/system/hassio-host-info.js
@@ -4,7 +4,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../src/components/buttons/ha-call-api-button";
-import EventsMixin from "../../../src/mixins/events-mixin";
+import { EventsMixin } from "../../../src/mixins/events-mixin";
 
 import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
 
diff --git a/hassio/src/system/hassio-supervisor-info.js b/hassio/src/system/hassio-supervisor-info.js
index 621080cb60..b2a87b3dd4 100644
--- a/hassio/src/system/hassio-supervisor-info.js
+++ b/hassio/src/system/hassio-supervisor-info.js
@@ -4,7 +4,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../src/components/buttons/ha-call-api-button";
-import EventsMixin from "../../../src/mixins/events-mixin";
+import { EventsMixin } from "../../../src/mixins/events-mixin";
 
 class HassioSupervisorInfo extends EventsMixin(PolymerElement) {
   static get template() {
diff --git a/package.json b/package.json
index 5b3213a8a7..3cf476e4b9 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "es6-object-assign": "^1.1.0",
     "fecha": "^3.0.2",
     "hls.js": "^0.12.4",
-    "home-assistant-js-websocket": "^3.4.0",
+    "home-assistant-js-websocket": "^4.1.1",
     "intl-messageformat": "^2.2.0",
     "jquery": "^3.3.1",
     "js-yaml": "^3.13.0",
diff --git a/script/build_frontend b/script/build_frontend
index eddb895a53..257a1ba5a4 100755
--- a/script/build_frontend
+++ b/script/build_frontend
@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/.."
 
-./node_modules/.bin/gulp build-release
+./node_modules/.bin/gulp build-app
diff --git a/script/develop b/script/develop
index f0be37820c..a695a1015a 100755
--- a/script/develop
+++ b/script/develop
@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/.."
 
-./node_modules/.bin/gulp develop
+./node_modules/.bin/gulp develop-app
diff --git a/setup.py b/setup.py
index d2d90d398b..ccee72852d 100644
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20190502.0",
+    version="20190507.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",
diff --git a/src/auth/ha-pick-auth-provider.js b/src/auth/ha-pick-auth-provider.js
index e7469b0637..d1c6fd00f8 100644
--- a/src/auth/ha-pick-auth-provider.js
+++ b/src/auth/ha-pick-auth-provider.js
@@ -3,7 +3,7 @@ import "@polymer/paper-item/paper-item-body";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../mixins/events-mixin";
+import { EventsMixin } from "../mixins/events-mixin";
 import { localizeLiteMixin } from "../mixins/localize-lite-mixin";
 import "../components/ha-icon-next";
 
diff --git a/src/cards/ha-camera-card.js b/src/cards/ha-camera-card.js
index c59f847429..feaa500075 100644
--- a/src/cards/ha-camera-card.js
+++ b/src/cards/ha-camera-card.js
@@ -3,7 +3,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import computeStateName from "../common/entity/compute_state_name";
-import EventsMixin from "../mixins/events-mixin";
+import { EventsMixin } from "../mixins/events-mixin";
 import LocalizeMixin from "../mixins/localize-mixin";
 import { fetchThumbnailUrlWithCache } from "../data/camera";
 
diff --git a/src/cards/ha-entities-card.js b/src/cards/ha-entities-card.js
index 30e3cac114..d8215c29d2 100644
--- a/src/cards/ha-entities-card.js
+++ b/src/cards/ha-entities-card.js
@@ -10,7 +10,7 @@ import computeStateDomain from "../common/entity/compute_state_domain";
 import computeStateName from "../common/entity/compute_state_name";
 import stateMoreInfoType from "../common/entity/state_more_info_type";
 import canToggleState from "../common/entity/can_toggle_state";
-import EventsMixin from "../mixins/events-mixin";
+import { EventsMixin } from "../mixins/events-mixin";
 import LocalizeMixin from "../mixins/localize-mixin";
 
 class HaEntitiesCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
diff --git a/src/cards/ha-history_graph-card.js b/src/cards/ha-history_graph-card.js
index bef1e9e70b..db594d5617 100644
--- a/src/cards/ha-history_graph-card.js
+++ b/src/cards/ha-history_graph-card.js
@@ -6,7 +6,7 @@ import "../components/state-history-charts";
 import "../data/ha-state-history-data";
 
 import computeStateName from "../common/entity/compute_state_name";
-import EventsMixin from "../mixins/events-mixin";
+import { EventsMixin } from "../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/cards/ha-media_player-card.js b/src/cards/ha-media_player-card.js
index 6a08bb01c9..af250d1f2e 100644
--- a/src/cards/ha-media_player-card.js
+++ b/src/cards/ha-media_player-card.js
@@ -9,7 +9,7 @@ import HassMediaPlayerEntity from "../util/hass-media-player-model";
 import { fetchMediaPlayerThumbnailWithCache } from "../data/media-player";
 
 import computeStateName from "../common/entity/compute_state_name";
-import EventsMixin from "../mixins/events-mixin";
+import { EventsMixin } from "../mixins/events-mixin";
 import LocalizeMixin from "../mixins/localize-mixin";
 
 /*
diff --git a/src/cards/ha-plant-card.js b/src/cards/ha-plant-card.js
index 8334bf39cd..e1e6a7b2ba 100644
--- a/src/cards/ha-plant-card.js
+++ b/src/cards/ha-plant-card.js
@@ -5,7 +5,7 @@ import "../components/ha-card";
 import "../components/ha-icon";
 
 import computeStateName from "../common/entity/compute_state_name";
-import EventsMixin from "../mixins/events-mixin";
+import { EventsMixin } from "../mixins/events-mixin";
 
 class HaPlantCard extends EventsMixin(PolymerElement) {
   static get template() {
diff --git a/src/cards/ha-weather-card.js b/src/cards/ha-weather-card.js
index 00388857a5..0f5c568989 100644
--- a/src/cards/ha-weather-card.js
+++ b/src/cards/ha-weather-card.js
@@ -6,7 +6,7 @@ import computeStateName from "../common/entity/compute_state_name";
 import "../components/ha-card";
 import "../components/ha-icon";
 
-import EventsMixin from "../mixins/events-mixin";
+import { EventsMixin } from "../mixins/events-mixin";
 import LocalizeMixin from "../mixins/localize-mixin";
 import { computeRTL } from "../common/util/compute_rtl";
 
diff --git a/src/common/string/compare.ts b/src/common/string/compare.ts
index 4a505ea10a..4a8b5dc8c2 100644
--- a/src/common/string/compare.ts
+++ b/src/common/string/compare.ts
@@ -1,4 +1,4 @@
-export default (a, b) => {
+export const compare = (a: string, b: string) => {
   if (a < b) {
     return -1;
   }
@@ -8,3 +8,6 @@ export default (a, b) => {
 
   return 0;
 };
+
+export const caseInsensitiveCompare = (a: string, b: string) =>
+  compare(a.toLowerCase(), b.toLowerCase());
diff --git a/src/common/util/debounce.ts b/src/common/util/debounce.ts
index dd2eac8968..4164edb75a 100644
--- a/src/common/util/debounce.ts
+++ b/src/common/util/debounce.ts
@@ -4,8 +4,14 @@
 // be triggered. The function will be called after it stops being called for
 // N milliseconds. If `immediate` is passed, trigger the function on the
 // leading edge, instead of the trailing.
-export default function debounce(func, wait, immediate) {
+// tslint:disable-next-line: ban-types
+export const debounce = <T extends Function>(
+  func: T,
+  wait,
+  immediate = false
+): T => {
   let timeout;
+  // @ts-ignore
   return function(...args) {
     // tslint:disable:no-this-assignment
     // @ts-ignore
@@ -23,4 +29,4 @@ export default function debounce(func, wait, immediate) {
       func.apply(context, args);
     }
   };
-}
+};
diff --git a/src/components/buttons/ha-call-service-button.js b/src/components/buttons/ha-call-service-button.js
index ce05a5340b..ab61dc0444 100644
--- a/src/components/buttons/ha-call-service-button.js
+++ b/src/components/buttons/ha-call-service-button.js
@@ -2,7 +2,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "./ha-progress-button";
-import EventsMixin from "../../mixins/events-mixin";
+import { EventsMixin } from "../../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/components/entity/ha-entity-toggle.ts b/src/components/entity/ha-entity-toggle.ts
index 2818cb5ac0..d6b1aea809 100644
--- a/src/components/entity/ha-entity-toggle.ts
+++ b/src/components/entity/ha-entity-toggle.ts
@@ -14,7 +14,7 @@ import {
 } from "lit-element";
 import { HomeAssistant } from "../../types";
 import { HassEntity } from "home-assistant-js-websocket";
-import { forwardHaptic } from "../../util/haptics";
+import { forwardHaptic } from "../../data/haptics";
 
 const isOn = (stateObj?: HassEntity) =>
   stateObj !== undefined && !STATES_OFF.includes(stateObj.state);
@@ -90,7 +90,7 @@ class HaEntityToggle extends LitElement {
     if (!this.hass || !this.stateObj) {
       return;
     }
-    forwardHaptic(this, "light");
+    forwardHaptic("light");
     const stateDomain = computeStateDomain(this.stateObj);
     let serviceDomain;
     let service;
diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts
index 471905673f..ace68a84f3 100644
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@@ -27,9 +27,11 @@ class HaCard extends LitElement {
         color: var(--primary-text-color);
         display: block;
         transition: all 0.3s ease-out;
+        position: relative;
       }
-      .header:not(:empty),
-      .header::slotted(*) {
+
+      .card-header,
+      :host ::slotted(.card-header) {
         color: var(--ha-card-header-color, --primary-text-color);
         font-family: var(--ha-card-header-font-family, inherit);
         font-size: var(--ha-card-header-font-size, 24px);
@@ -38,12 +40,31 @@ class HaCard extends LitElement {
         padding: 24px 16px 16px;
         display: block;
       }
+
+      :host ::slotted(.card-content:not(:first-child)),
+      slot:not(:first-child)::slotted(.card-content) {
+        padding-top: 0px;
+        margin-top: -8px;
+      }
+
+      :host ::slotted(.card-content) {
+        padding: 16px;
+      }
+
+      :host ::slotted(.card-actions) {
+        border-top: 1px solid #e8e8e8;
+        padding: 5px 16px;
+      }
     `;
   }
 
   protected render(): TemplateResult {
     return html`
-      <slot class="header" name="header">${this.header}</slot>
+      ${this.header
+        ? html`
+            <div class="card-header">${this.header}</div>
+          `
+        : html``}
       <slot></slot>
     `;
   }
diff --git a/src/components/ha-climate-control.js b/src/components/ha-climate-control.js
index 2a1218ca0f..abe9b7bf5a 100644
--- a/src/components/ha-climate-control.js
+++ b/src/components/ha-climate-control.js
@@ -3,7 +3,7 @@ import "@polymer/paper-icon-button/paper-icon-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../mixins/events-mixin";
+import { EventsMixin } from "../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/components/ha-color-picker.js b/src/components/ha-color-picker.js
index 0fd47626f8..8ab66513be 100644
--- a/src/components/ha-color-picker.js
+++ b/src/components/ha-color-picker.js
@@ -1,7 +1,7 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../mixins/events-mixin";
+import { EventsMixin } from "../mixins/events-mixin";
 
 /**
  * Color-picker custom element
diff --git a/src/components/ha-combo-box.js b/src/components/ha-combo-box.js
index d1cd03b155..8c554c470e 100644
--- a/src/components/ha-combo-box.js
+++ b/src/components/ha-combo-box.js
@@ -5,7 +5,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "@vaadin/vaadin-combo-box/vaadin-combo-box-light";
 
-import EventsMixin from "../mixins/events-mixin";
+import { EventsMixin } from "../mixins/events-mixin";
 
 class HaComboBox extends EventsMixin(PolymerElement) {
   static get template() {
diff --git a/src/components/ha-date-input.ts b/src/components/ha-date-input.ts
index 4157d70af9..6f42cd8159 100644
--- a/src/components/ha-date-input.ts
+++ b/src/components/ha-date-input.ts
@@ -31,7 +31,9 @@ export class HaDateInput extends LitElement {
       paper-input {
         width: 30px;
         text-align: center;
+        --paper-input-container-shared-input-style_-_-webkit-appearance: textfield;
         --paper-input-container-input_-_-moz-appearance: textfield;
+        --paper-input-container-shared-input-style_-_appearance: textfield;
         --paper-input-container-input-webkit-spinner_-_-webkit-appearance: none;
         --paper-input-container-input-webkit-spinner_-_margin: 0;
         --paper-input-container-input-webkit-spinner_-_display: none;
diff --git a/src/components/ha-form.js b/src/components/ha-form.js
index a8339c0ea0..c1b71cff9d 100644
--- a/src/components/ha-form.js
+++ b/src/components/ha-form.js
@@ -8,7 +8,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "./ha-paper-slider";
-import EventsMixin from "../mixins/events-mixin";
+import { EventsMixin } from "../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/components/ha-markdown.js b/src/components/ha-markdown.js
index ed15dac150..14b345d2e2 100644
--- a/src/components/ha-markdown.js
+++ b/src/components/ha-markdown.js
@@ -1,5 +1,5 @@
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import EventsMixin from "../mixins/events-mixin";
+import { EventsMixin } from "../mixins/events-mixin";
 
 let loaded = null;
 
diff --git a/src/components/ha-push-notifications-toggle.js b/src/components/ha-push-notifications-toggle.js
index 85175947df..c5b0e5b7b5 100644
--- a/src/components/ha-push-notifications-toggle.js
+++ b/src/components/ha-push-notifications-toggle.js
@@ -4,7 +4,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import { getAppKey } from "../data/notify_html5";
 
-import EventsMixin from "../mixins/events-mixin";
+import { EventsMixin } from "../mixins/events-mixin";
 
 export const pushSupported =
   "serviceWorker" in navigator &&
diff --git a/src/components/ha-start-voice-button.js b/src/components/ha-start-voice-button.js
index 0b31b83030..d03348a0d1 100644
--- a/src/components/ha-start-voice-button.js
+++ b/src/components/ha-start-voice-button.js
@@ -2,7 +2,7 @@ import "@polymer/paper-icon-button/paper-icon-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../mixins/events-mixin";
+import { EventsMixin } from "../mixins/events-mixin";
 
 import isComponentLoaded from "../common/config/is_component_loaded";
 import { fireEvent } from "../common/dom/fire_event";
diff --git a/src/components/ha-water_heater-control.js b/src/components/ha-water_heater-control.js
index ea34077d77..7fd7e55a2f 100644
--- a/src/components/ha-water_heater-control.js
+++ b/src/components/ha-water_heater-control.js
@@ -3,7 +3,7 @@ import "@polymer/paper-icon-button/paper-icon-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../mixins/events-mixin";
+import { EventsMixin } from "../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/components/paper-time-input.js b/src/components/paper-time-input.js
index 3fec74281a..2a2d5bb52b 100644
--- a/src/components/paper-time-input.js
+++ b/src/components/paper-time-input.js
@@ -48,6 +48,7 @@ export class PaperTimeInput extends PolymerElement {
             margin: 0;
             display: none;
           }
+          --paper-input-container-shared-input-style_-_-webkit-appearance: textfield;
         }
 
         paper-dropdown-menu {
diff --git a/src/components/user/ha-user-picker.ts b/src/components/user/ha-user-picker.ts
index d98186cea0..d162842cfb 100644
--- a/src/components/user/ha-user-picker.ts
+++ b/src/components/user/ha-user-picker.ts
@@ -16,7 +16,7 @@ import {
 import { HomeAssistant } from "../../types";
 import { fireEvent } from "../../common/dom/fire_event";
 import { User, fetchUsers } from "../../data/user";
-import compare from "../../common/string/compare";
+import { compare } from "../../common/string/compare";
 
 class HaEntityPicker extends LitElement {
   public hass?: HomeAssistant;
diff --git a/src/data/area_registry.ts b/src/data/area_registry.ts
index cf312bda3f..3347232028 100644
--- a/src/data/area_registry.ts
+++ b/src/data/area_registry.ts
@@ -1,4 +1,7 @@
+import { createCollection } from "home-assistant-js-websocket";
 import { HomeAssistant } from "../types";
+import { compare } from "../common/string/compare";
+import { debounce } from "../common/util/debounce";
 
 export interface AreaRegistryEntry {
   area_id: string;
@@ -9,9 +12,6 @@ export interface AreaRegistryEntryMutableParams {
   name: string;
 }
 
-export const fetchAreaRegistry = (hass: HomeAssistant) =>
-  hass.callWS<AreaRegistryEntry[]>({ type: "config/area_registry/list" });
-
 export const createAreaRegistryEntry = (
   hass: HomeAssistant,
   values: AreaRegistryEntryMutableParams
@@ -37,3 +37,33 @@ export const deleteAreaRegistryEntry = (hass: HomeAssistant, areaId: string) =>
     type: "config/area_registry/delete",
     area_id: areaId,
   });
+
+const fetchAreaRegistry = (conn) =>
+  conn
+    .sendMessagePromise({
+      type: "config/area_registry/list",
+    })
+    .then((areas) => areas.sort((ent1, ent2) => compare(ent1.name, ent2.name)));
+
+const subscribeAreaRegistryUpdates = (conn, store) =>
+  conn.subscribeEvents(
+    debounce(
+      () =>
+        fetchAreaRegistry(conn).then((areas) => store.setState(areas, true)),
+      500,
+      true
+    ),
+    "area_registry_updated"
+  );
+
+export const subscribeAreaRegistry = (
+  hass: HomeAssistant,
+  onChange: (areas: AreaRegistryEntry[]) => void
+) =>
+  createCollection<AreaRegistryEntry[]>(
+    "_areaRegistry",
+    fetchAreaRegistry,
+    subscribeAreaRegistryUpdates,
+    hass.connection,
+    onChange
+  );
diff --git a/src/data/auth.ts b/src/data/auth.ts
index 77c7b40d17..c768b95f41 100644
--- a/src/data/auth.ts
+++ b/src/data/auth.ts
@@ -14,6 +14,8 @@ export interface SignedPath {
   path: string;
 }
 
+export const hassUrl = `${location.protocol}//${location.host}`;
+
 export const getSignedPath = (
   hass: HomeAssistant,
   path: string
diff --git a/src/data/config_entries.ts b/src/data/config_entries.ts
index 3741fea239..f54a84d6da 100644
--- a/src/data/config_entries.ts
+++ b/src/data/config_entries.ts
@@ -1,4 +1,17 @@
 import { HomeAssistant } from "../types";
+import { createCollection } from "home-assistant-js-websocket";
+import { debounce } from "../common/util/debounce";
+import { LocalizeFunc } from "../common/translations/localize";
+
+export interface ConfigEntry {
+  entry_id: string;
+  domain: string;
+  title: string;
+  source: string;
+  state: string;
+  connection_class: string;
+  supports_options: boolean;
+}
 
 export interface FieldSchema {
   name: string;
@@ -9,7 +22,10 @@ export interface FieldSchema {
 export interface ConfigFlowProgress {
   flow_id: string;
   handler: string;
-  context: { [key: string]: any };
+  context: {
+    title_placeholders: { [key: string]: string };
+    [key: string]: any;
+  };
 }
 
 export interface ConfigFlowStepForm {
@@ -74,3 +90,53 @@ export const getConfigFlowsInProgress = (hass: HomeAssistant) =>
 
 export const getConfigFlowHandlers = (hass: HomeAssistant) =>
   hass.callApi<string[]>("GET", "config/config_entries/flow_handlers");
+
+const fetchConfigFlowInProgress = (conn) =>
+  conn.sendMessagePromise({
+    type: "config/entity_registry/list",
+  });
+
+const subscribeConfigFlowInProgressUpdates = (conn, store) =>
+  debounce(
+    conn.subscribeEvents(
+      () =>
+        fetchConfigFlowInProgress(conn).then((flows) =>
+          store.setState(flows, true)
+        ),
+      500,
+      true
+    ),
+    "config_entry_discovered"
+  );
+
+export const subscribeConfigFlowInProgress = (
+  hass: HomeAssistant,
+  onChange: (flows: ConfigFlowProgress[]) => void
+) =>
+  createCollection<ConfigFlowProgress[]>(
+    "_configFlowProgress",
+    fetchConfigFlowInProgress,
+    subscribeConfigFlowInProgressUpdates,
+    hass.connection,
+    onChange
+  );
+
+export const getConfigEntries = (hass: HomeAssistant) =>
+  hass.callApi<ConfigEntry[]>("GET", "config/config_entries/entry");
+
+export const localizeConfigFlowTitle = (
+  localize: LocalizeFunc,
+  flow: ConfigFlowProgress
+) => {
+  const placeholders = flow.context.title_placeholders || {};
+  const placeholderKeys = Object.keys(placeholders);
+  if (placeholderKeys.length === 0) {
+    return localize(`component.${flow.handler}.config.title`);
+  }
+  const args: string[] = [];
+  placeholderKeys.forEach((key) => {
+    args.push(key);
+    args.push(placeholders[key]);
+  });
+  return localize(`component.${flow.handler}.config.flow_title`, ...args);
+};
diff --git a/src/data/connection-status.ts b/src/data/connection-status.ts
new file mode 100644
index 0000000000..c801ad4208
--- /dev/null
+++ b/src/data/connection-status.ts
@@ -0,0 +1,22 @@
+/**
+ * Broadcast connection status updates
+ */
+
+import { fireEvent, HASSDomEvent } from "../common/dom/fire_event";
+
+export type ConnectionStatus = "connected" | "auth-invalid" | "disconnected";
+
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "connection-status": ConnectionStatus;
+  }
+
+  interface GlobalEventHandlersEventMap {
+    "connection-status": HASSDomEvent<ConnectionStatus>;
+  }
+}
+
+export const broadcastConnectionStatus = (status: ConnectionStatus) => {
+  fireEvent(window, "connection-status", status);
+};
diff --git a/src/data/device_registry.ts b/src/data/device_registry.ts
index 348f85f8cb..51084a802b 100644
--- a/src/data/device_registry.ts
+++ b/src/data/device_registry.ts
@@ -1,4 +1,6 @@
 import { HomeAssistant } from "../types";
+import { createCollection } from "home-assistant-js-websocket";
+import { debounce } from "../common/util/debounce";
 
 export interface DeviceRegistryEntry {
   id: string;
@@ -18,9 +20,6 @@ export interface DeviceRegistryEntryMutableParams {
   name_by_user?: string;
 }
 
-export const fetchDeviceRegistry = (hass: HomeAssistant) =>
-  hass.callWS<DeviceRegistryEntry[]>({ type: "config/device_registry/list" });
-
 export const updateDeviceRegistryEntry = (
   hass: HomeAssistant,
   deviceId: string,
@@ -31,3 +30,33 @@ export const updateDeviceRegistryEntry = (
     device_id: deviceId,
     ...updates,
   });
+
+const fetchDeviceRegistry = (conn) =>
+  conn.sendMessagePromise({
+    type: "config/device_registry/list",
+  });
+
+const subscribeDeviceRegistryUpdates = (conn, store) =>
+  conn.subscribeEvents(
+    debounce(
+      () =>
+        fetchDeviceRegistry(conn).then((devices) =>
+          store.setState(devices, true)
+        ),
+      500,
+      true
+    ),
+    "device_registry_updated"
+  );
+
+export const subscribeDeviceRegistry = (
+  hass: HomeAssistant,
+  onChange: (devices: DeviceRegistryEntry[]) => void
+) =>
+  createCollection<DeviceRegistryEntry[]>(
+    "_dr",
+    fetchDeviceRegistry,
+    subscribeDeviceRegistryUpdates,
+    hass.connection,
+    onChange
+  );
diff --git a/src/data/entity_registry.ts b/src/data/entity_registry.ts
index c11d8ec371..4ca2c76d23 100644
--- a/src/data/entity_registry.ts
+++ b/src/data/entity_registry.ts
@@ -1,5 +1,7 @@
+import { createCollection } from "home-assistant-js-websocket";
 import { HomeAssistant } from "../types";
 import computeStateName from "../common/entity/compute_state_name";
+import { debounce } from "../common/util/debounce";
 
 export interface EntityRegistryEntry {
   entity_id: string;
@@ -26,11 +28,6 @@ export const computeEntityRegistryName = (
   return state ? computeStateName(state) : null;
 };
 
-export const fetchEntityRegistry = (
-  hass: HomeAssistant
-): Promise<EntityRegistryEntry[]> =>
-  hass.callWS<EntityRegistryEntry[]>({ type: "config/entity_registry/list" });
-
 export const updateEntityRegistryEntry = (
   hass: HomeAssistant,
   entityId: string,
@@ -50,3 +47,33 @@ export const removeEntityRegistryEntry = (
     type: "config/entity_registry/remove",
     entity_id: entityId,
   });
+
+const fetchEntityRegistry = (conn) =>
+  conn.sendMessagePromise({
+    type: "config/entity_registry/list",
+  });
+
+const subscribeEntityRegistryUpdates = (conn, store) =>
+  conn.subscribeEvents(
+    debounce(
+      () =>
+        fetchEntityRegistry(conn).then((entities) =>
+          store.setState(entities, true)
+        ),
+      500,
+      true
+    ),
+    "entity_registry_updated"
+  );
+
+export const subscribeEntityRegistry = (
+  hass: HomeAssistant,
+  onChange: (entities: EntityRegistryEntry[]) => void
+) =>
+  createCollection<EntityRegistryEntry[]>(
+    "_entityRegistry",
+    fetchEntityRegistry,
+    subscribeEntityRegistryUpdates,
+    hass.connection,
+    onChange
+  );
diff --git a/src/util/haptics.ts b/src/data/haptics.ts
similarity index 79%
rename from src/util/haptics.ts
rename to src/data/haptics.ts
index 2cd6cf000c..d492fb5b3a 100644
--- a/src/util/haptics.ts
+++ b/src/data/haptics.ts
@@ -1,5 +1,5 @@
 /**
- * Utility function that enables haptic feedback
+ * Broadcast haptic feedback requests
  */
 
 import { fireEvent, HASSDomEvent } from "../common/dom/fire_event";
@@ -27,6 +27,6 @@ declare global {
   }
 }
 
-export const forwardHaptic = (el: HTMLElement, hapticType: HapticType) => {
-  fireEvent(el, "haptic", hapticType);
+export const forwardHaptic = (hapticType: HapticType) => {
+  fireEvent(window, "haptic", hapticType);
 };
diff --git a/src/data/onboarding.ts b/src/data/onboarding.ts
index 83002acd6b..80e6dce995 100644
--- a/src/data/onboarding.ts
+++ b/src/data/onboarding.ts
@@ -1,14 +1,26 @@
 import { handleFetchPromise } from "../util/hass-call-api";
+import { HomeAssistant } from "../types";
 
-export interface OnboardingStep {
-  step: string;
-  done: boolean;
+export interface OnboardingUserStepResponse {
+  auth_code: string;
 }
 
-interface UserStepResponse {
+export interface OnboardingIntegrationStepResponse {
   auth_code: string;
 }
 
+export interface OnboardingResponses {
+  user: OnboardingUserStepResponse;
+  integration: OnboardingIntegrationStepResponse;
+}
+
+export type ValidOnboardingStep = keyof OnboardingResponses;
+
+export interface OnboardingStep {
+  step: ValidOnboardingStep;
+  done: boolean;
+}
+
 export const fetchOnboardingOverview = () =>
   fetch("/api/onboarding", { credentials: "same-origin" });
 
@@ -17,11 +29,22 @@ export const onboardUserStep = (params: {
   name: string;
   username: string;
   password: string;
+  language: string;
 }) =>
-  handleFetchPromise<UserStepResponse>(
+  handleFetchPromise<OnboardingUserStepResponse>(
     fetch("/api/onboarding/users", {
       method: "POST",
       credentials: "same-origin",
       body: JSON.stringify(params),
     })
   );
+
+export const onboardIntegrationStep = (
+  hass: HomeAssistant,
+  params: { client_id: string }
+) =>
+  hass.callApi<OnboardingIntegrationStepResponse>(
+    "POST",
+    "onboarding/integration",
+    params
+  );
diff --git a/src/dialogs/config-flow/dialog-config-flow.ts b/src/dialogs/config-flow/dialog-config-flow.ts
index 3b495419d8..35930183e1 100644
--- a/src/dialogs/config-flow/dialog-config-flow.ts
+++ b/src/dialogs/config-flow/dialog-config-flow.ts
@@ -12,6 +12,7 @@ import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-tooltip/paper-tooltip";
 import "@polymer/paper-spinner/paper-spinner";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
 
 import "../../components/ha-form";
 import "../../components/ha-markdown";
@@ -37,10 +38,14 @@ import "./step-flow-abort";
 import "./step-flow-create-entry";
 import {
   DeviceRegistryEntry,
-  fetchDeviceRegistry,
+  subscribeDeviceRegistry,
 } from "../../data/device_registry";
-import { AreaRegistryEntry, fetchAreaRegistry } from "../../data/area_registry";
+import {
+  AreaRegistryEntry,
+  subscribeAreaRegistry,
+} from "../../data/area_registry";
 import { HomeAssistant } from "../../types";
+import { caseInsensitiveCompare } from "../../common/string/compare";
 
 let instance = 0;
 
@@ -57,30 +62,19 @@ declare global {
 @customElement("dialog-config-flow")
 class ConfigFlowDialog extends LitElement {
   public hass!: HomeAssistant;
-
-  @property()
-  private _params?: HaConfigFlowParams;
-
-  @property()
-  private _loading = true;
-
+  @property() private _params?: HaConfigFlowParams;
+  @property() private _loading = true;
   private _instance = instance;
-
-  @property()
-  private _step:
+  @property() private _step:
     | ConfigFlowStep
     | undefined
     // Null means we need to pick a config flow
     | null;
-
-  @property()
-  private _devices?: DeviceRegistryEntry[];
-
-  @property()
-  private _areas?: AreaRegistryEntry[];
-
-  @property()
-  private _handlers?: string[];
+  @property() private _devices?: DeviceRegistryEntry[];
+  @property() private _areas?: AreaRegistryEntry[];
+  @property() private _handlers?: string[];
+  private _unsubAreas?: UnsubscribeFunc;
+  private _unsubDevices?: UnsubscribeFunc;
 
   public async showDialog(params: HaConfigFlowParams): Promise<void> {
     this._params = params;
@@ -95,7 +89,13 @@ class ConfigFlowDialog extends LitElement {
         this._loading = true;
         this.updateComplete.then(() => this._scheduleCenterDialog());
         try {
-          this._handlers = await getConfigFlowHandlers(this.hass);
+          this._handlers = (await getConfigFlowHandlers(this.hass)).sort(
+            (handlerA, handlerB) =>
+              caseInsensitiveCompare(
+                this.hass.localize(`component.${handlerA}.config.title`),
+                this.hass.localize(`component.${handlerB}.config.title`)
+              )
+          );
         } finally {
           this._loading = false;
         }
@@ -196,6 +196,10 @@ class ConfigFlowDialog extends LitElement {
       this._fetchDevices(this._step.result);
       this._fetchAreas();
     }
+
+    if (changedProps.has("_devices") && this._dialog) {
+      this._scheduleCenterDialog();
+    }
   }
 
   private _scheduleCenterDialog() {
@@ -207,16 +211,17 @@ class ConfigFlowDialog extends LitElement {
   }
 
   private async _fetchDevices(configEntryId) {
-    // Wait 5 seconds to give integrations time to find devices
-    await new Promise((resolve) => setTimeout(resolve, 5000));
-    const devices = await fetchDeviceRegistry(this.hass);
-    this._devices = devices.filter((device) =>
-      device.config_entries.includes(configEntryId)
-    );
+    this._unsubDevices = subscribeDeviceRegistry(this.hass, (devices) => {
+      this._devices = devices.filter((device) =>
+        device.config_entries.includes(configEntryId)
+      );
+    });
   }
 
   private async _fetchAreas() {
-    this._areas = await fetchAreaRegistry(this.hass);
+    this._unsubAreas = subscribeAreaRegistry(this.hass, (areas) => {
+      this._areas = areas;
+    });
   }
 
   private async _processStep(
@@ -261,6 +266,14 @@ class ConfigFlowDialog extends LitElement {
     this._step = undefined;
     this._params = undefined;
     this._devices = undefined;
+    if (this._unsubAreas) {
+      this._unsubAreas();
+      this._unsubAreas = undefined;
+    }
+    if (this._unsubDevices) {
+      this._unsubDevices();
+      this._unsubDevices = undefined;
+    }
   }
 
   private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
diff --git a/src/dialogs/config-flow/step-flow-create-entry.ts b/src/dialogs/config-flow/step-flow-create-entry.ts
index be4b268389..ac38ba95ed 100644
--- a/src/dialogs/config-flow/step-flow-create-entry.ts
+++ b/src/dialogs/config-flow/step-flow-create-entry.ts
@@ -169,6 +169,18 @@ class StepFlowCreateEntry extends LitElement {
         .buttons > *:last-child {
           margin-left: auto;
         }
+        paper-dropdown-menu-light {
+          cursor: pointer;
+        }
+        paper-item {
+          cursor: pointer;
+          white-space: nowrap;
+        }
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          .device {
+            width: auto;
+          }
+        }
       `,
     ];
   }
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 900b1dc1d4..6f985d36d2 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
@@ -4,7 +4,7 @@ import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../../../mixins/events-mixin";
+import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 
 class MoreInfoAlarmControlPanel extends LocalizeMixin(
diff --git a/src/dialogs/more-info/controls/more-info-climate.js b/src/dialogs/more-info/controls/more-info-climate.js
index 3fb90fed61..2bd0c4b648 100644
--- a/src/dialogs/more-info/controls/more-info-climate.js
+++ b/src/dialogs/more-info/controls/more-info-climate.js
@@ -15,7 +15,7 @@ import attributeClassNames from "../../../common/entity/attribute_class_names";
 import featureClassNames from "../../../common/entity/feature_class_names";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 
-import EventsMixin from "../../../mixins/events-mixin";
+import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 
diff --git a/src/dialogs/more-info/controls/more-info-fan.js b/src/dialogs/more-info/controls/more-info-fan.js
index 63837ea052..4df080e319 100644
--- a/src/dialogs/more-info/controls/more-info-fan.js
+++ b/src/dialogs/more-info/controls/more-info-fan.js
@@ -10,7 +10,7 @@ import "../../../components/ha-attributes";
 import "../../../components/ha-paper-dropdown-menu";
 
 import attributeClassNames from "../../../common/entity/attribute_class_names";
-import EventsMixin from "../../../mixins/events-mixin";
+import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 
 /*
diff --git a/src/dialogs/more-info/controls/more-info-light.js b/src/dialogs/more-info/controls/more-info-light.js
index 682f2e1e2c..c40fd37497 100644
--- a/src/dialogs/more-info/controls/more-info-light.js
+++ b/src/dialogs/more-info/controls/more-info-light.js
@@ -10,7 +10,7 @@ import "../../../components/ha-labeled-slider";
 import "../../../components/ha-paper-dropdown-menu";
 
 import featureClassNames from "../../../common/entity/feature_class_names";
-import EventsMixin from "../../../mixins/events-mixin";
+import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 
 const FEATURE_CLASS_NAMES = {
@@ -182,12 +182,17 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
             dynamic-align=""
             label="[[localize('ui.card.light.effect')]]"
           >
-            <paper-listbox slot="dropdown-content" selected="{{effectIndex}}">
+            <paper-listbox
+              slot="dropdown-content"
+              selected="[[stateObj.attributes.effect]]"
+              on-selected-changed="effectChanged"
+              attr-for-selected="item-name"
+            >
               <template
                 is="dom-repeat"
                 items="[[stateObj.attributes.effect_list]]"
               >
-                <paper-item>[[item]]</paper-item>
+                <paper-item item-name$="[[item]]">[[item]]</paper-item>
               </template>
             </paper-listbox>
           </ha-paper-dropdown-menu>
@@ -212,12 +217,6 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
         observer: "stateObjChanged",
       },
 
-      effectIndex: {
-        type: Number,
-        value: -1,
-        observer: "effectChanged",
-      },
-
       brightnessSliderValue: {
         type: Number,
         value: 0,
@@ -264,13 +263,6 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
           s: newVal.attributes.hs_color[1] / 100,
         };
       }
-      if (newVal.attributes.effect_list) {
-        props.effectIndex = newVal.attributes.effect_list.indexOf(
-          newVal.attributes.effect
-        );
-      } else {
-        props.effectIndex = -1;
-      }
     }
 
     this.setProperties(props);
@@ -293,17 +285,15 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
     return classes.join(" ");
   }
 
-  effectChanged(effectIndex) {
-    var effectInput;
-    // Selected Option will transition to '' before transitioning to new value
-    if (effectIndex === "" || effectIndex === -1) return;
+  effectChanged(ev) {
+    var oldVal = this.stateObj.attributes.effect;
+    var newVal = ev.detail.value;
 
-    effectInput = this.stateObj.attributes.effect_list[effectIndex];
-    if (effectInput === this.stateObj.attributes.effect) return;
+    if (!newVal || oldVal === newVal) return;
 
     this.hass.callService("light", "turn_on", {
       entity_id: this.stateObj.entity_id,
-      effect: effectInput,
+      effect: newVal,
     });
   }
 
diff --git a/src/dialogs/more-info/controls/more-info-media_player.js b/src/dialogs/more-info/controls/more-info-media_player.js
index 495cb33fbd..6f3541d3fe 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.js
+++ b/src/dialogs/more-info/controls/more-info-media_player.js
@@ -12,7 +12,7 @@ import HassMediaPlayerEntity from "../../../util/hass-media-player-model";
 
 import attributeClassNames from "../../../common/entity/attribute_class_names";
 import isComponentLoaded from "../../../common/config/is_component_loaded";
-import EventsMixin from "../../../mixins/events-mixin";
+import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 
diff --git a/src/dialogs/more-info/controls/more-info-vacuum.js b/src/dialogs/more-info/controls/more-info-vacuum.js
index b1c196b88d..d712467163 100644
--- a/src/dialogs/more-info/controls/more-info-vacuum.js
+++ b/src/dialogs/more-info/controls/more-info-vacuum.js
@@ -109,12 +109,17 @@ class MoreInfoVacuum extends PolymerElement {
             dynamic-align=""
             label="Fan speed"
           >
-            <paper-listbox slot="dropdown-content" selected="{{fanSpeedIndex}}">
+            <paper-listbox
+              slot="dropdown-content"
+              selected="[[stateObj.attributes.fan_speed]]"
+              on-selected-changed="fanSpeedChanged"
+              attr-for-selected="item-name"
+            >
               <template
                 is="dom-repeat"
                 items="[[stateObj.attributes.fan_speed_list]]"
               >
-                <paper-item>[[item]]</paper-item>
+                <paper-item item-name$="[[item]]">[[item]]</paper-item>
               </template>
             </paper-listbox>
           </ha-paper-dropdown-menu>
@@ -150,12 +155,6 @@ class MoreInfoVacuum extends PolymerElement {
       stateObj: {
         type: Object,
       },
-
-      fanSpeedIndex: {
-        type: Number,
-        value: -1,
-        observer: "fanSpeedChanged",
-      },
     };
   }
 
@@ -206,17 +205,15 @@ class MoreInfoVacuum extends PolymerElement {
     );
   }
 
-  fanSpeedChanged(fanSpeedIndex) {
-    var fanSpeedInput;
-    // Selected Option will transition to '' before transitioning to new value
-    if (fanSpeedIndex === "" || fanSpeedIndex === -1) return;
+  fanSpeedChanged(ev) {
+    var oldVal = this.stateObj.attributes.fan_speed;
+    var newVal = ev.detail.value;
 
-    fanSpeedInput = this.stateObj.attributes.fan_speed_list[fanSpeedIndex];
-    if (fanSpeedInput === this.stateObj.attributes.fan_speed) return;
+    if (!newVal || oldVal === newVal) return;
 
     this.hass.callService("vacuum", "set_fan_speed", {
       entity_id: this.stateObj.entity_id,
-      fan_speed: fanSpeedInput,
+      fan_speed: newVal,
     });
   }
 
diff --git a/src/dialogs/more-info/controls/more-info-water_heater.js b/src/dialogs/more-info/controls/more-info-water_heater.js
index 91f59f1a5f..dafdd423c2 100644
--- a/src/dialogs/more-info/controls/more-info-water_heater.js
+++ b/src/dialogs/more-info/controls/more-info-water_heater.js
@@ -14,7 +14,7 @@ import "../../../components/ha-paper-dropdown-menu";
 import featureClassNames from "../../../common/entity/feature_class_names";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 
-import EventsMixin from "../../../mixins/events-mixin";
+import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 
 /*
diff --git a/src/dialogs/more-info/more-info-controls.js b/src/dialogs/more-info/more-info-controls.js
index e608b5e9dd..0410fa6107 100644
--- a/src/dialogs/more-info/more-info-controls.js
+++ b/src/dialogs/more-info/more-info-controls.js
@@ -15,7 +15,7 @@ import computeStateName from "../../common/entity/compute_state_name";
 import computeStateDomain from "../../common/entity/compute_state_domain";
 import isComponentLoaded from "../../common/config/is_component_loaded";
 import { DOMAINS_MORE_INFO_NO_HISTORY } from "../../common/const";
-import EventsMixin from "../../mixins/events-mixin";
+import { EventsMixin } from "../../mixins/events-mixin";
 import { computeRTL } from "../../common/util/compute_rtl";
 
 const DOMAINS_NO_INFO = ["camera", "configurator", "history_graph"];
diff --git a/src/dialogs/more-info/more-info-settings.js b/src/dialogs/more-info/more-info-settings.js
index b43298f6af..a2350a3ae6 100644
--- a/src/dialogs/more-info/more-info-settings.js
+++ b/src/dialogs/more-info/more-info-settings.js
@@ -5,7 +5,7 @@ import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../../mixins/events-mixin";
+import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
 
 import computeStateName from "../../common/entity/compute_state_name";
diff --git a/src/entrypoints/app.ts b/src/entrypoints/app.ts
index b53f611074..c73fc24187 100644
--- a/src/entrypoints/app.ts
+++ b/src/entrypoints/app.ts
@@ -11,7 +11,7 @@ import "../resources/roboto";
 // properly into iron-meta, which is used to transfer iconsets to iron-icon.
 import "../components/ha-iconset-svg";
 
-import "../layouts/app/home-assistant";
+import "../layouts/home-assistant";
 
 setPassiveTouchGestures(true);
 /* LastPass createElement workaround. See #428 */
diff --git a/src/entrypoints/core.ts b/src/entrypoints/core.ts
index 1de10ea11f..17f2794167 100644
--- a/src/entrypoints/core.ts
+++ b/src/entrypoints/core.ts
@@ -14,6 +14,7 @@ import { subscribePanels } from "../data/ws-panels";
 import { subscribeThemes } from "../data/ws-themes";
 import { subscribeUser } from "../data/ws-user";
 import { HomeAssistant } from "../types";
+import { hassUrl } from "../data/auth";
 
 declare global {
   interface Window {
@@ -21,7 +22,6 @@ declare global {
   }
 }
 
-const hassUrl = `${location.protocol}//${location.host}`;
 const isExternal = location.search.includes("external_auth=1");
 
 const authProm = isExternal
diff --git a/src/entrypoints/service-worker-hass.js b/src/entrypoints/service-worker-hass.js
index 9e0aab0e70..dc0afcf39a 100644
--- a/src/entrypoints/service-worker-hass.js
+++ b/src/entrypoints/service-worker-hass.js
@@ -15,7 +15,7 @@ function initRouting() {
 
   // Get api from network.
   workbox.routing.registerRoute(
-    new RegExp(`${location.host}/api/.*`),
+    new RegExp(`${location.host}/(api|auth)/.*`),
     new workbox.strategies.NetworkOnly()
   );
 
diff --git a/src/external_app/external_events_forwarder.ts b/src/external_app/external_events_forwarder.ts
index 9f146cfebc..4ac2258105 100644
--- a/src/external_app/external_events_forwarder.ts
+++ b/src/external_app/external_events_forwarder.ts
@@ -1,7 +1,7 @@
 import { ExternalMessaging } from "./external_messaging";
 
 export const externalForwardConnectionEvents = (bus: ExternalMessaging) => {
-  document.addEventListener("connection-status", (ev) =>
+  window.addEventListener("connection-status", (ev) =>
     bus.fireMessage({
       type: "connection-status",
       payload: { event: ev.detail },
@@ -10,6 +10,6 @@ export const externalForwardConnectionEvents = (bus: ExternalMessaging) => {
 };
 
 export const externalForwardHaptics = (bus: ExternalMessaging) =>
-  document.addEventListener("haptic", (ev) =>
+  window.addEventListener("haptic", (ev) =>
     bus.fireMessage({ type: "haptic", payload: { hapticType: ev.detail } })
   );
diff --git a/src/html/onboarding.html.template b/src/html/onboarding.html.template
index 3febae22e3..80b3f2a39f 100644
--- a/src/html/onboarding.html.template
+++ b/src/html/onboarding.html.template
@@ -44,7 +44,7 @@
         Home Assistant
       </div>
 
-      <ha-onboarding>Initializing</ha-onboarding>
+      <ha-onboarding></ha-onboarding>
     </div>
 
     <%= renderTemplate('_js_base') %>
diff --git a/src/layouts/app/connection-mixin.js b/src/layouts/app/connection-mixin.js
deleted file mode 100644
index a3f5fbe993..0000000000
--- a/src/layouts/app/connection-mixin.js
+++ /dev/null
@@ -1,161 +0,0 @@
-import {
-  ERR_INVALID_AUTH,
-  subscribeEntities,
-  subscribeConfig,
-  subscribeServices,
-  callService,
-} from "home-assistant-js-websocket";
-
-import { translationMetadata } from "../../resources/translations-metadata";
-
-import LocalizeMixin from "../../mixins/localize-mixin";
-import EventsMixin from "../../mixins/events-mixin";
-
-import { getState } from "../../util/ha-pref-storage";
-import { getLocalLanguage } from "../../util/hass-translation";
-import { fetchWithAuth } from "../../util/fetch-with-auth";
-import hassCallApi from "../../util/hass-call-api";
-import { subscribePanels } from "../../data/ws-panels";
-import { forwardHaptic } from "../../util/haptics";
-import { fireEvent } from "../../common/dom/fire_event";
-
-export default (superClass) =>
-  class extends EventsMixin(LocalizeMixin(superClass)) {
-    firstUpdated(changedProps) {
-      super.firstUpdated(changedProps);
-      this._handleConnProm();
-    }
-
-    async _handleConnProm() {
-      let auth;
-      let conn;
-      try {
-        const result = await window.hassConnection;
-        auth = result.auth;
-        conn = result.conn;
-      } catch (err) {
-        this._error = true;
-        return;
-      }
-
-      this.hass = Object.assign(
-        {
-          auth,
-          connection: conn,
-          connected: true,
-          states: null,
-          config: null,
-          themes: null,
-          panels: null,
-          services: null,
-          user: null,
-          panelUrl: this._panelUrl,
-
-          language: getLocalLanguage(),
-          // If resources are already loaded, don't discard them
-          resources: (this.hass && this.hass.resources) || null,
-          localize: () => "",
-
-          translationMetadata: translationMetadata,
-          dockedSidebar: false,
-          moreInfoEntityId: null,
-          callService: async (domain, service, serviceData = {}) => {
-            if (__DEV__) {
-              // eslint-disable-next-line
-              console.log("Calling service", domain, service, serviceData);
-            }
-            try {
-              await callService(conn, domain, service, serviceData);
-            } catch (err) {
-              if (__DEV__) {
-                // eslint-disable-next-line
-                console.error(
-                  "Error calling service",
-                  domain,
-                  service,
-                  serviceData,
-                  err
-                );
-              }
-              forwardHaptic(this, "error");
-              const message =
-                this.hass.localize(
-                  "ui.notification_toast.service_call_failed",
-                  "service",
-                  `${domain}/${service}`
-                ) + ` ${err.message}`;
-              this.fire("hass-notification", { message });
-              throw err;
-            }
-          },
-          callApi: async (method, path, parameters) =>
-            hassCallApi(auth, method, path, parameters),
-          fetchWithAuth: (path, init) =>
-            fetchWithAuth(auth, `${auth.data.hassUrl}${path}`, init),
-          // For messages that do not get a response
-          sendWS: (msg) => {
-            if (__DEV__) {
-              // eslint-disable-next-line
-              console.log("Sending", msg);
-            }
-            conn.sendMessage(msg);
-          },
-          // For messages that expect a response
-          callWS: (msg) => {
-            if (__DEV__) {
-              /* eslint-disable no-console */
-              console.log("Sending", msg);
-            }
-
-            const resp = conn.sendMessagePromise(msg);
-
-            if (__DEV__) {
-              resp.then(
-                (result) => console.log("Received", result),
-                (err) => console.error("Error", err)
-              );
-            }
-            return resp;
-          },
-        },
-        getState()
-      );
-
-      this.hassConnected();
-    }
-
-    hassConnected() {
-      super.hassConnected();
-
-      const conn = this.hass.connection;
-
-      fireEvent(document, "connection-status", "connected");
-
-      conn.addEventListener("ready", () => this.hassReconnected());
-      conn.addEventListener("disconnected", () => this.hassDisconnected());
-      // If we reconnect after losing connection and auth is no longer valid.
-      conn.addEventListener("reconnect-error", (_conn, err) => {
-        if (err === ERR_INVALID_AUTH) {
-          fireEvent(document, "connection-status", "auth-invalid");
-          location.reload();
-        }
-      });
-
-      subscribeEntities(conn, (states) => this._updateHass({ states }));
-      subscribeConfig(conn, (config) => this._updateHass({ config }));
-      subscribeServices(conn, (services) => this._updateHass({ services }));
-      subscribePanels(conn, (panels) => this._updateHass({ panels }));
-    }
-
-    hassReconnected() {
-      super.hassReconnected();
-      this._updateHass({ connected: true });
-      fireEvent(document, "connection-status", "connected");
-    }
-
-    hassDisconnected() {
-      super.hassDisconnected();
-      this._updateHass({ connected: false });
-      fireEvent(document, "connection-status", "disconnected");
-    }
-  };
diff --git a/src/layouts/app/home-assistant.ts b/src/layouts/home-assistant.ts
similarity index 64%
rename from src/layouts/app/home-assistant.ts
rename to src/layouts/home-assistant.ts
index fe7307f8d9..894a90f107 100644
--- a/src/layouts/app/home-assistant.ts
+++ b/src/layouts/home-assistant.ts
@@ -1,45 +1,20 @@
 import "@polymer/app-route/app-location";
 import { html, LitElement, PropertyValues, css, property } from "lit-element";
 
-import "../home-assistant-main";
-import "../ha-init-page";
-import "../../resources/ha-style";
-import { registerServiceWorker } from "../../util/register-service-worker";
-import { DEFAULT_PANEL } from "../../common/const";
+import "./home-assistant-main";
+import "./ha-init-page";
+import "../resources/ha-style";
+import { registerServiceWorker } from "../util/register-service-worker";
+import { DEFAULT_PANEL } from "../common/const";
 
-import HassBaseMixin from "./hass-base-mixin";
-import AuthMixin from "./auth-mixin";
-import TranslationsMixin from "./translations-mixin";
-import ThemesMixin from "./themes-mixin";
-import MoreInfoMixin from "./more-info-mixin";
-import SidebarMixin from "./sidebar-mixin";
-import { dialogManagerMixin } from "./dialog-manager-mixin";
-import ConnectionMixin from "./connection-mixin";
-import NotificationMixin from "./notification-mixin";
-import DisconnectToastMixin from "./disconnect-toast-mixin";
-import { urlSyncMixin } from "./url-sync-mixin";
-
-import { Route, HomeAssistant } from "../../types";
-import { navigate } from "../../common/navigate";
+import { Route, HomeAssistant } from "../types";
+import { navigate } from "../common/navigate";
+import { HassElement } from "../state/hass-element";
 
 (LitElement.prototype as any).html = html;
 (LitElement.prototype as any).css = css;
 
-const ext = <T>(baseClass: T, mixins): T =>
-  mixins.reduceRight((base, mixin) => mixin(base), baseClass);
-
-export class HomeAssistantAppEl extends ext(HassBaseMixin(LitElement), [
-  AuthMixin,
-  ThemesMixin,
-  TranslationsMixin,
-  MoreInfoMixin,
-  SidebarMixin,
-  DisconnectToastMixin,
-  ConnectionMixin,
-  NotificationMixin,
-  dialogManagerMixin,
-  urlSyncMixin,
-]) {
+export class HomeAssistantAppEl extends HassElement {
   @property() private _route?: Route;
   @property() private _error?: boolean;
   @property() private _panelUrl?: string;
@@ -69,6 +44,7 @@ export class HomeAssistantAppEl extends ext(HassBaseMixin(LitElement), [
 
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
+    this._initialize();
     setTimeout(registerServiceWorker, 1000);
     /* polyfill for paper-dropdown */
     import(/* webpackChunkName: "polyfill-web-animations-next" */ "web-animations-js/web-animations-next-lite.min");
@@ -86,6 +62,16 @@ export class HomeAssistantAppEl extends ext(HassBaseMixin(LitElement), [
     }
   }
 
+  protected async _initialize() {
+    try {
+      const { auth, conn } = await window.hassConnection;
+      this.initializeHass(auth, conn);
+    } catch (err) {
+      this._error = true;
+      return;
+    }
+  }
+
   private _routeChanged(ev) {
     const route = ev.detail.value as Route;
     // If it's the first route that we process,
diff --git a/src/mixins/dialog-mixin.js b/src/mixins/dialog-mixin.js
index 61e6da06de..9d54050f56 100644
--- a/src/mixins/dialog-mixin.js
+++ b/src/mixins/dialog-mixin.js
@@ -1,7 +1,7 @@
 import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin";
 import { PaperDialogBehavior } from "@polymer/paper-dialog-behavior/paper-dialog-behavior";
 import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
-import EventsMixin from "./events-mixin";
+import { EventsMixin } from "./events-mixin";
 /**
  * @polymerMixin
  * @appliesMixin EventsMixin
diff --git a/src/mixins/events-mixin.js b/src/mixins/events-mixin.js
index 80b5d33e7d..d9f1c28fe3 100644
--- a/src/mixins/events-mixin.js
+++ b/src/mixins/events-mixin.js
@@ -33,7 +33,7 @@ import { fireEvent } from "../common/dom/fire_event";
 // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 /* @polymerMixin */
-export default dedupingMixin(
+export const EventsMixin = dedupingMixin(
   (superClass) =>
     class extends superClass {
       /**
diff --git a/src/mixins/localize-lite-base-mixin.ts b/src/mixins/localize-lite-base-mixin.ts
index 91a81ef5b6..a4c9791c28 100644
--- a/src/mixins/localize-lite-base-mixin.ts
+++ b/src/mixins/localize-lite-base-mixin.ts
@@ -31,10 +31,10 @@ export const localizeLiteBaseMixin = (superClass) =>
         return;
       }
 
-      this._updateResources();
+      this._downloadResources();
     }
 
-    private async _updateResources() {
+    private async _downloadResources() {
       const { language, data } = await getTranslation(
         this.translationFragment,
         this.language
diff --git a/src/onboarding/ha-onboarding.ts b/src/onboarding/ha-onboarding.ts
index e377ac250d..b37040bd45 100644
--- a/src/onboarding/ha-onboarding.ts
+++ b/src/onboarding/ha-onboarding.ts
@@ -1,146 +1,95 @@
-import "@polymer/paper-input/paper-input";
-import "@material/mwc-button";
 import {
-  LitElement,
-  CSSResult,
-  css,
   html,
   PropertyValues,
-  property,
   customElement,
   TemplateResult,
+  property,
 } from "lit-element";
-import { genClientId } from "home-assistant-js-websocket";
+import {
+  getAuth,
+  createConnection,
+  genClientId,
+  Auth,
+} from "home-assistant-js-websocket";
 import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
-import { OnboardingStep, onboardUserStep } from "../data/onboarding";
-import { PolymerChangedEvent } from "../polymer-types";
+import {
+  OnboardingStep,
+  ValidOnboardingStep,
+  OnboardingResponses,
+  fetchOnboardingOverview,
+} from "../data/onboarding";
 import { registerServiceWorker } from "../util/register-service-worker";
+import { HASSDomEvent } from "../common/dom/fire_event";
+import "./onboarding-create-user";
+import "./onboarding-loading";
+import { hassUrl } from "../data/auth";
+import { HassElement } from "../state/hass-element";
+
+interface OnboardingEvent<T extends ValidOnboardingStep> {
+  type: T;
+  result: OnboardingResponses[T];
+}
+
+declare global {
+  interface HASSDomEvents {
+    "onboarding-step": OnboardingEvent<ValidOnboardingStep>;
+  }
+
+  interface GlobalEventHandlersEventMap {
+    "onboarding-step": HASSDomEvent<OnboardingEvent<ValidOnboardingStep>>;
+  }
+}
 
 @customElement("ha-onboarding")
-class HaOnboarding extends litLocalizeLiteMixin(LitElement) {
+class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
   public translationFragment = "page-onboarding";
 
-  @property() private _name = "";
-  @property() private _username = "";
-  @property() private _password = "";
-  @property() private _passwordConfirm = "";
   @property() private _loading = false;
-  @property() private _errorMsg?: string = undefined;
+  @property() private _steps?: OnboardingStep[];
 
   protected render(): TemplateResult | void {
-    return html`
-    <p>
-      ${this.localize("ui.panel.page-onboarding.intro")}
-    </p>
+    const step = this._curStep()!;
 
-    <p>
-      ${this.localize("ui.panel.page-onboarding.user.intro")}
-    </p>
-
-    ${
-      this._errorMsg
-        ? html`
-            <p class="error">
-              ${this.localize(
-                `ui.panel.page-onboarding.user.error.${this._errorMsg}`
-              ) || this._errorMsg}
-            </p>
-          `
-        : ""
+    if (this._loading || !step) {
+      return html`
+        <onboarding-loading></onboarding-loading>
+      `;
+    } else if (step.step === "user") {
+      return html`
+        <onboarding-create-user
+          .localize=${this.localize}
+          .language=${this.language}
+        ></onboarding-create-user>
+      `;
+    } else if (step.step === "integration") {
+      return html`
+        <onboarding-integrations
+          .hass=${this.hass}
+          .onboardingLocalize=${this.localize}
+        ></onboarding-integrations>
+      `;
     }
-
-
-    <form>
-      <paper-input
-        autofocus
-        name="name"
-        label="${this.localize("ui.panel.page-onboarding.user.data.name")}"
-        .value=${this._name}
-        @value-changed=${this._handleValueChanged}
-        required
-        auto-validate
-        autocapitalize='on'
-        .errorMessage="${this.localize(
-          "ui.panel.page-onboarding.user.required_field"
-        )}"
-        @blur=${this._maybePopulateUsername}
-      ></paper-input>
-
-      <paper-input
-        name="username"
-        label="${this.localize("ui.panel.page-onboarding.user.data.username")}"
-        value=${this._username}
-        @value-changed=${this._handleValueChanged}
-        required
-        auto-validate
-        autocapitalize='none'
-        .errorMessage="${this.localize(
-          "ui.panel.page-onboarding.user.required_field"
-        )}"
-      ></paper-input>
-
-      <paper-input
-        name="password"
-        label="${this.localize("ui.panel.page-onboarding.user.data.password")}"
-        value=${this._password}
-        @value-changed=${this._handleValueChanged}
-        required
-        type='password'
-        auto-validate
-        .errorMessage="${this.localize(
-          "ui.panel.page-onboarding.user.required_field"
-        )}"
-      ></paper-input>
-
-      <paper-input
-        name="passwordConfirm"
-        label="${this.localize(
-          "ui.panel.page-onboarding.user.data.password_confirm"
-        )}"
-        value=${this._passwordConfirm}
-        @value-changed=${this._handleValueChanged}
-        required
-        type='password'
-        .invalid=${this._password !== "" &&
-          this._passwordConfirm !== "" &&
-          this._passwordConfirm !== this._password}
-        .errorMessage="${this.localize(
-          "ui.panel.page-onboarding.user.error.password_not_match"
-        )}"
-      ></paper-input>
-
-      <p class="action">
-        <mwc-button
-          raised
-          @click=${this._submitForm}
-          .disabled=${this._loading}
-        >
-          ${this.localize("ui.panel.page-onboarding.user.create_account")}
-        </mwc-button>
-      </p>
-    </div>
-  </form>
-`;
   }
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
-    this.addEventListener("keypress", (ev) => {
-      if (ev.keyCode === 13) {
-        this._submitForm();
-      }
-    });
     this._fetchOnboardingSteps();
+    import("./onboarding-integrations");
     registerServiceWorker(false);
+    this.addEventListener("onboarding-step", (ev) => this._handleStepDone(ev));
+  }
+
+  private _curStep() {
+    return this._steps ? this._steps.find((stp) => !stp.done) : undefined;
   }
 
   private async _fetchOnboardingSteps() {
     try {
-      const response = await window.stepsPromise;
+      const response = await (window.stepsPromise || fetchOnboardingOverview());
 
       if (response.status === 404) {
         // We don't load the component when onboarding is done
-        document.location.href = "/";
+        document.location.assign("/");
         return;
       }
 
@@ -148,83 +97,73 @@ class HaOnboarding extends litLocalizeLiteMixin(LitElement) {
 
       if (steps.every((step) => step.done)) {
         // Onboarding is done!
-        document.location.href = "/";
+        document.location.assign("/");
+        return;
       }
+
+      if (steps[0].done) {
+        // First step is already done, so we need to get auth somewhere else.
+        const auth = await getAuth({
+          hassUrl,
+        });
+        await this._connectHass(auth);
+      }
+
+      this._steps = steps;
     } catch (err) {
       alert("Something went wrong loading loading onboarding, try refreshing");
     }
   }
 
-  private _handleValueChanged(ev: PolymerChangedEvent<string>): void {
-    const name = (ev.target as any).name;
-    this[`_${name}`] = ev.detail.value;
-  }
+  private async _handleStepDone(
+    ev: HASSDomEvent<OnboardingEvent<ValidOnboardingStep>>
+  ) {
+    const stepResult = ev.detail;
+    this._steps = this._steps!.map((step) =>
+      step.step === stepResult.type ? { ...step, done: true } : step
+    );
 
-  private _maybePopulateUsername(): void {
-    if (this._username) {
-      return;
-    }
+    if (stepResult.type === "user") {
+      const result = stepResult.result as OnboardingResponses["user"];
+      this._loading = true;
+      try {
+        const auth = await getAuth({
+          hassUrl,
+          authCode: result.auth_code,
+        });
+        await this._connectHass(auth);
+      } catch (err) {
+        alert("Ah snap, something went wrong!");
+        location.reload();
+      } finally {
+        this._loading = false;
+      }
+    } else if (stepResult.type === "integration") {
+      const result = stepResult.result as OnboardingResponses["integration"];
+      this._loading = true;
 
-    const parts = this._name.split(" ");
-
-    if (parts.length) {
-      this._username = parts[0].toLowerCase();
-    }
-  }
-
-  private async _submitForm(): Promise<void> {
-    if (!this._name || !this._username || !this._password) {
-      this._errorMsg = "required_fields";
-      return;
-    }
-
-    if (this._password !== this._passwordConfirm) {
-      this._errorMsg = "password_not_match";
-      return;
-    }
-
-    this._loading = true;
-    this._errorMsg = "";
-
-    try {
-      const clientId = genClientId();
-
-      const { auth_code } = await onboardUserStep({
-        client_id: clientId,
-        name: this._name,
-        username: this._username,
-        password: this._password,
-      });
+      // Revoke current auth token.
+      await this.hass!.auth.revoke();
 
       const state = btoa(
         JSON.stringify({
           hassUrl: `${location.protocol}//${location.host}`,
-          clientId,
+          clientId: genClientId(),
         })
       );
-
-      document.location.href = `/?auth_callback=1&code=${encodeURIComponent(
-        auth_code
-      )}&state=${state}`;
-    } catch (err) {
-      // tslint:disable-next-line
-      console.error(err);
-      this._loading = false;
-      this._errorMsg = err.message;
+      document.location.assign(
+        `/?auth_callback=1&code=${encodeURIComponent(
+          result.auth_code
+        )}&state=${state}`
+      );
     }
   }
 
-  static get styles(): CSSResult {
-    return css`
-      .error {
-        color: red;
-      }
-
-      .action {
-        margin: 32px 0;
-        text-align: center;
-      }
-    `;
+  private async _connectHass(auth: Auth) {
+    const conn = await createConnection({ auth });
+    this.initializeHass(auth, conn);
+    // Load config strings for integrations
+    (this as any)._loadFragmentTranslations(this.hass!.language, "config");
   }
 }
 
diff --git a/src/onboarding/integration-badge.ts b/src/onboarding/integration-badge.ts
new file mode 100644
index 0000000000..3035c8b893
--- /dev/null
+++ b/src/onboarding/integration-badge.ts
@@ -0,0 +1,86 @@
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  customElement,
+  property,
+  CSSResult,
+  css,
+} from "lit-element";
+import "../components/ha-icon";
+
+@customElement("integration-badge")
+class IntegrationBadge extends LitElement {
+  @property() public icon!: string;
+  @property() public title!: string;
+  @property() public badgeIcon?: string;
+  @property({ type: Boolean, reflect: true }) public clickable = false;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <div class="icon">
+        <iron-icon .icon=${this.icon}></iron-icon>
+        ${this.badgeIcon
+          ? html`
+              <ha-icon class="badge" .icon=${this.badgeIcon}></ha-icon>
+            `
+          : ""}
+      </div>
+      <div class="title">${this.title}</div>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: inline-flex;
+        flex-direction: column;
+        text-align: center;
+        color: var(--primary-text-color);
+      }
+
+      :host([clickable]) {
+        color: var(--primary-text-color);
+      }
+
+      .icon {
+        position: relative;
+        margin: 0 auto 8px;
+        height: 40px;
+        width: 40px;
+        border-radius: 50%;
+        border: 1px solid var(--secondary-text-color);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      :host([clickable]) .icon {
+        border-color: var(--primary-color);
+        border-width: 2px;
+      }
+
+      .badge {
+        position: absolute;
+        color: var(--primary-color);
+        bottom: -5px;
+        right: -5px;
+        background-color: white;
+        border-radius: 50%;
+        width: 18px;
+        display: block;
+        height: 18px;
+      }
+
+      .title {
+        min-height: 2.3em;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "integration-badge": IntegrationBadge;
+  }
+}
diff --git a/src/onboarding/onboarding-create-user.ts b/src/onboarding/onboarding-create-user.ts
new file mode 100644
index 0000000000..837bba1b7d
--- /dev/null
+++ b/src/onboarding/onboarding-create-user.ts
@@ -0,0 +1,210 @@
+import "@polymer/paper-input/paper-input";
+import "@material/mwc-button";
+import {
+  LitElement,
+  CSSResult,
+  css,
+  html,
+  PropertyValues,
+  property,
+  customElement,
+  TemplateResult,
+} from "lit-element";
+import { genClientId } from "home-assistant-js-websocket";
+import { onboardUserStep } from "../data/onboarding";
+import { PolymerChangedEvent } from "../polymer-types";
+import { LocalizeFunc } from "../common/translations/localize";
+import { fireEvent } from "../common/dom/fire_event";
+
+@customElement("onboarding-create-user")
+class OnboardingCreateUser extends LitElement {
+  @property() public localize!: LocalizeFunc;
+  @property() public language!: string;
+
+  @property() private _name = "";
+  @property() private _username = "";
+  @property() private _password = "";
+  @property() private _passwordConfirm = "";
+  @property() private _loading = false;
+  @property() private _errorMsg?: string = undefined;
+
+  protected render(): TemplateResult | void {
+    return html`
+    <p>
+      ${this.localize("ui.panel.page-onboarding.intro")}
+    </p>
+
+    <p>
+      ${this.localize("ui.panel.page-onboarding.user.intro")}
+    </p>
+
+    ${
+      this._errorMsg
+        ? html`
+            <p class="error">
+              ${this.localize(
+                `ui.panel.page-onboarding.user.error.${this._errorMsg}`
+              ) || this._errorMsg}
+            </p>
+          `
+        : ""
+    }
+
+    <form>
+      <paper-input
+        name="name"
+        label="${this.localize("ui.panel.page-onboarding.user.data.name")}"
+        .value=${this._name}
+        @value-changed=${this._handleValueChanged}
+        required
+        auto-validate
+        autocapitalize='on'
+        .errorMessage="${this.localize(
+          "ui.panel.page-onboarding.user.required_field"
+        )}"
+        @blur=${this._maybePopulateUsername}
+      ></paper-input>
+
+      <paper-input
+        name="username"
+        label="${this.localize("ui.panel.page-onboarding.user.data.username")}"
+        value=${this._username}
+        @value-changed=${this._handleValueChanged}
+        required
+        auto-validate
+        autocapitalize='none'
+        .errorMessage="${this.localize(
+          "ui.panel.page-onboarding.user.required_field"
+        )}"
+      ></paper-input>
+
+      <paper-input
+        name="password"
+        label="${this.localize("ui.panel.page-onboarding.user.data.password")}"
+        value=${this._password}
+        @value-changed=${this._handleValueChanged}
+        required
+        type='password'
+        auto-validate
+        .errorMessage="${this.localize(
+          "ui.panel.page-onboarding.user.required_field"
+        )}"
+      ></paper-input>
+
+      <paper-input
+        name="passwordConfirm"
+        label="${this.localize(
+          "ui.panel.page-onboarding.user.data.password_confirm"
+        )}"
+        value=${this._passwordConfirm}
+        @value-changed=${this._handleValueChanged}
+        required
+        type='password'
+        .invalid=${this._password !== "" &&
+          this._passwordConfirm !== "" &&
+          this._passwordConfirm !== this._password}
+        .errorMessage="${this.localize(
+          "ui.panel.page-onboarding.user.error.password_not_match"
+        )}"
+      ></paper-input>
+
+      <p class="action">
+        <mwc-button
+          raised
+          @click=${this._submitForm}
+          .disabled=${this._loading}
+        >
+          ${this.localize("ui.panel.page-onboarding.user.create_account")}
+        </mwc-button>
+      </p>
+    </div>
+  </form>
+`;
+  }
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    setTimeout(
+      () => this.shadowRoot!.querySelector("paper-input")!.focus(),
+      100
+    );
+    this.addEventListener("keypress", (ev) => {
+      if (ev.keyCode === 13) {
+        this._submitForm();
+      }
+    });
+  }
+
+  private _handleValueChanged(ev: PolymerChangedEvent<string>): void {
+    const name = (ev.target as any).name;
+    this[`_${name}`] = ev.detail.value;
+  }
+
+  private _maybePopulateUsername(): void {
+    if (this._username) {
+      return;
+    }
+
+    const parts = this._name.split(" ");
+
+    if (parts.length) {
+      this._username = parts[0].toLowerCase();
+    }
+  }
+
+  private async _submitForm(): Promise<void> {
+    if (!this._name || !this._username || !this._password) {
+      this._errorMsg = "required_fields";
+      return;
+    }
+
+    if (this._password !== this._passwordConfirm) {
+      this._errorMsg = "password_not_match";
+      return;
+    }
+
+    this._loading = true;
+    this._errorMsg = "";
+
+    try {
+      const clientId = genClientId();
+
+      const result = await onboardUserStep({
+        client_id: clientId,
+        name: this._name,
+        username: this._username,
+        password: this._password,
+        language: this.language,
+      });
+
+      fireEvent(this, "onboarding-step", {
+        type: "user",
+        result,
+      });
+    } catch (err) {
+      // tslint:disable-next-line
+      console.error(err);
+      this._loading = false;
+      this._errorMsg = err.body.message;
+    }
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .error {
+        color: red;
+      }
+
+      .action {
+        margin: 32px 0;
+        text-align: center;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "onboarding-create-user": OnboardingCreateUser;
+  }
+}
diff --git a/src/onboarding/onboarding-integrations.ts b/src/onboarding/onboarding-integrations.ts
new file mode 100644
index 0000000000..bdbfc9c969
--- /dev/null
+++ b/src/onboarding/onboarding-integrations.ts
@@ -0,0 +1,196 @@
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  customElement,
+  PropertyValues,
+  property,
+  CSSResult,
+  css,
+} from "lit-element";
+import "@material/mwc-button/mwc-button";
+import {
+  loadConfigFlowDialog,
+  showConfigFlowDialog,
+} from "../dialogs/config-flow/show-dialog-config-flow";
+import { HomeAssistant } from "../types";
+import {
+  getConfigFlowsInProgress,
+  getConfigEntries,
+  ConfigEntry,
+  ConfigFlowProgress,
+  localizeConfigFlowTitle,
+} from "../data/config_entries";
+import { compare } from "../common/string/compare";
+import "./integration-badge";
+import { LocalizeFunc } from "../common/translations/localize";
+import { debounce } from "../common/util/debounce";
+import { fireEvent } from "../common/dom/fire_event";
+import { onboardIntegrationStep } from "../data/onboarding";
+import { genClientId } from "home-assistant-js-websocket";
+
+@customElement("onboarding-integrations")
+class OnboardingIntegrations extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public onboardingLocalize!: LocalizeFunc;
+  @property() private _entries?: ConfigEntry[];
+  @property() private _discovered?: ConfigFlowProgress[];
+  private _unsubEvents?: () => void;
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this.hass.connection
+      .subscribeEvents(
+        debounce(() => this._loadData(), 500),
+        "config_entry_discovered"
+      )
+      .then((unsub) => {
+        this._unsubEvents = unsub;
+      });
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._unsubEvents) {
+      this._unsubEvents();
+    }
+  }
+
+  protected render(): TemplateResult | void {
+    if (!this._entries || !this._discovered) {
+      return html``;
+    }
+    // Render discovered and existing entries together sorted by localized title.
+    const entries: Array<[string, TemplateResult]> = this._entries.map(
+      (entry) => {
+        const title = this.hass.localize(
+          `component.${entry.domain}.config.title`
+        );
+        return [
+          title,
+          html`
+            <integration-badge
+              .title=${title}
+              icon="hass:check"
+            ></integration-badge>
+          `,
+        ];
+      }
+    );
+    const discovered: Array<[string, TemplateResult]> = this._discovered.map(
+      (flow) => {
+        const title = localizeConfigFlowTitle(this.hass.localize, flow);
+        return [
+          title,
+          html`
+            <button .flowId=${flow.flow_id} @click=${this._continueFlow}>
+              <integration-badge
+                clickable
+                .title=${title}
+                icon="hass:plus"
+              ></integration-badge>
+            </button>
+          `,
+        ];
+      }
+    );
+    const content = [...entries, ...discovered]
+      .sort((a, b) => compare(a[0], b[0]))
+      .map((item) => item[1]);
+
+    return html`
+      <p>
+        ${this.onboardingLocalize("ui.panel.page-onboarding.integration.intro")}
+      </p>
+      <div class="badges">
+        ${content}
+        <button @click=${this._createFlow}>
+          <integration-badge
+            clickable
+            title=${this.onboardingLocalize(
+              "ui.panel.page-onboarding.integration.more_integrations"
+            )}
+            icon="hass:dots-horizontal"
+          ></integration-badge>
+        </button>
+      </div>
+      <div class="footer">
+        <mwc-button @click=${this._finish}>
+          ${this.onboardingLocalize(
+            "ui.panel.page-onboarding.integration.finish"
+          )}
+        </mwc-button>
+      </div>
+    `;
+  }
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    loadConfigFlowDialog();
+    this._loadData();
+    /* polyfill for paper-dropdown */
+    import(/* webpackChunkName: "polyfill-web-animations-next" */ "web-animations-js/web-animations-next-lite.min");
+  }
+
+  private _createFlow() {
+    showConfigFlowDialog(this, {
+      dialogClosedCallback: () => this._loadData(),
+    });
+  }
+
+  private _continueFlow(ev) {
+    showConfigFlowDialog(this, {
+      continueFlowId: ev.currentTarget.flowId,
+      dialogClosedCallback: () => this._loadData(),
+    });
+  }
+
+  private async _loadData() {
+    const [discovered, entries] = await Promise.all([
+      getConfigFlowsInProgress(this.hass!),
+      getConfigEntries(this.hass!),
+    ]);
+    this._discovered = discovered;
+    this._entries = entries;
+  }
+
+  private async _finish() {
+    const result = await onboardIntegrationStep(this.hass, {
+      client_id: genClientId(),
+    });
+    fireEvent(this, "onboarding-step", {
+      type: "integration",
+      result,
+    });
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .badges {
+        margin-top: 24px;
+      }
+      .badges > * {
+        width: 24%;
+        min-width: 90px;
+        margin-bottom: 24px;
+      }
+      button {
+        display: inline-block;
+        cursor: pointer;
+        padding: 0;
+        border: 0;
+        background: 0;
+        font: inherit;
+      }
+      .footer {
+        text-align: right;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "onboarding-integrations": OnboardingIntegrations;
+  }
+}
diff --git a/src/onboarding/onboarding-loading.ts b/src/onboarding/onboarding-loading.ts
new file mode 100644
index 0000000000..96964350fe
--- /dev/null
+++ b/src/onboarding/onboarding-loading.ts
@@ -0,0 +1,70 @@
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  customElement,
+  CSSResult,
+  css,
+} from "lit-element";
+
+@customElement("onboarding-loading")
+class OnboardingLoading extends LitElement {
+  protected render(): TemplateResult | void {
+    return html`
+      <div class="loader"></div>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      /* MIT License (MIT). Copyright (c) 2014 Luke Haas */
+      .loader,
+      .loader:after {
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+      }
+      .loader {
+        margin: 60px auto;
+        font-size: 4px;
+        position: relative;
+        text-indent: -9999em;
+        border-top: 1.1em solid rgba(3, 169, 244, 0.2);
+        border-right: 1.1em solid rgba(3, 169, 244, 0.2);
+        border-bottom: 1.1em solid rgba(3, 169, 244, 0.2);
+        border-left: 1.1em solid rgb(3, 168, 244);
+        -webkit-transform: translateZ(0);
+        -ms-transform: translateZ(0);
+        transform: translateZ(0);
+        -webkit-animation: load8 1.4s infinite linear;
+        animation: load8 1.4s infinite linear;
+      }
+      @-webkit-keyframes load8 {
+        0% {
+          -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+        100% {
+          -webkit-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+      @keyframes load8 {
+        0% {
+          -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+        100% {
+          -webkit-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "onboarding-loading": OnboardingLoading;
+  }
+}
diff --git a/src/panels/calendar/ha-big-calendar.js b/src/panels/calendar/ha-big-calendar.js
index d414c87ed1..65e13eb23f 100644
--- a/src/panels/calendar/ha-big-calendar.js
+++ b/src/panels/calendar/ha-big-calendar.js
@@ -7,7 +7,7 @@ import React from "react";
 /* eslint-enable */
 import BigCalendar from "react-big-calendar";
 import moment from "moment";
-import EventsMixin from "../../mixins/events-mixin";
+import { EventsMixin } from "../../mixins/events-mixin";
 
 import "../../resources/ha-style";
 
diff --git a/src/panels/config/area_registry/ha-config-area-registry.ts b/src/panels/config/area_registry/ha-config-area-registry.ts
index e34c92272c..598b884cde 100644
--- a/src/panels/config/area_registry/ha-config-area-registry.ts
+++ b/src/panels/config/area_registry/ha-config-area-registry.ts
@@ -4,24 +4,23 @@ import {
   html,
   css,
   CSSResult,
-  PropertyDeclarations,
+  property,
 } from "lit-element";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-fab/paper-fab";
 
 import { HomeAssistant } from "../../../types";
 import {
   AreaRegistryEntry,
-  fetchAreaRegistry,
   updateAreaRegistryEntry,
   deleteAreaRegistryEntry,
   createAreaRegistryEntry,
+  subscribeAreaRegistry,
 } from "../../../data/area_registry";
+import "../../../components/ha-card";
 import "../../../layouts/hass-subpage";
 import "../../../layouts/hass-loading-screen";
-import compare from "../../../common/string/compare";
 import "../ha-config-section";
 import {
   showAreaRegistryDetailDialog,
@@ -29,22 +28,23 @@ import {
 } from "./show-dialog-area-registry-detail";
 import { classMap } from "lit-html/directives/class-map";
 import { computeRTL } from "../../../common/util/compute_rtl";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
 
 class HaConfigAreaRegistry extends LitElement {
-  public hass?: HomeAssistant;
-  public isWide?: boolean;
-  private _items?: AreaRegistryEntry[];
+  @property() public hass!: HomeAssistant;
+  @property() public isWide?: boolean;
+  @property() private _areas?: AreaRegistryEntry[];
+  private _unsubAreas?: UnsubscribeFunc;
 
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      isWide: {},
-      _items: {},
-    };
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._unsubAreas) {
+      this._unsubAreas();
+    }
   }
 
   protected render(): TemplateResult | void {
-    if (!this.hass || this._items === undefined) {
+    if (!this.hass || this._areas === undefined) {
       return html`
         <hass-loading-screen></hass-loading-screen>
       `;
@@ -72,8 +72,8 @@ class HaConfigAreaRegistry extends LitElement {
               )}
             </a>
           </span>
-          <paper-card>
-            ${this._items.map((entry) => {
+          <ha-card>
+            ${this._areas.map((entry) => {
               return html`
                 <paper-item @click=${this._openEditEntry} .entry=${entry}>
                   <paper-item-body>
@@ -82,7 +82,7 @@ class HaConfigAreaRegistry extends LitElement {
                 </paper-item>
               `;
             })}
-            ${this._items.length === 0
+            ${this._areas.length === 0
               ? html`
                   <div class="empty">
                     ${this.hass.localize(
@@ -96,7 +96,7 @@ class HaConfigAreaRegistry extends LitElement {
                   </div>
                 `
               : html``}
-          </paper-card>
+          </ha-card>
         </ha-config-section>
       </hass-subpage>
 
@@ -116,14 +116,16 @@ class HaConfigAreaRegistry extends LitElement {
 
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
-    this._fetchData();
     loadAreaRegistryDetailDialog();
   }
 
-  private async _fetchData() {
-    this._items = (await fetchAreaRegistry(this.hass!)).sort((ent1, ent2) =>
-      compare(ent1.name, ent2.name)
-    );
+  protected updated(changedProps) {
+    super.updated(changedProps);
+    if (!this._unsubAreas) {
+      this._unsubAreas = subscribeAreaRegistry(this.hass, (areas) => {
+        this._areas = areas;
+      });
+    }
   }
 
   private _createArea() {
@@ -137,22 +139,10 @@ class HaConfigAreaRegistry extends LitElement {
   private _openDialog(entry?: AreaRegistryEntry) {
     showAreaRegistryDetailDialog(this, {
       entry,
-      createEntry: async (values) => {
-        const created = await createAreaRegistryEntry(this.hass!, values);
-        this._items = this._items!.concat(created).sort((ent1, ent2) =>
-          compare(ent1.name, ent2.name)
-        );
-      },
-      updateEntry: async (values) => {
-        const updated = await updateAreaRegistryEntry(
-          this.hass!,
-          entry!.area_id,
-          values
-        );
-        this._items = this._items!.map((ent) =>
-          ent === entry ? updated : ent
-        );
-      },
+      createEntry: async (values) =>
+        createAreaRegistryEntry(this.hass!, values),
+      updateEntry: async (values) =>
+        updateAreaRegistryEntry(this.hass!, entry!.area_id, values),
       removeEntry: async () => {
         if (
           !confirm(`Are you sure you want to delete this area?
@@ -164,7 +154,6 @@ All devices in this area will become unassigned.`)
 
         try {
           await deleteAreaRegistryEntry(this.hass!, entry!.area_id);
-          this._items = this._items!.filter((ent) => ent !== entry);
           return true;
         } catch (err) {
           return false;
@@ -178,10 +167,10 @@ All devices in this area will become unassigned.`)
       a {
         color: var(--primary-color);
       }
-      paper-card {
-        display: block;
+      ha-card {
         max-width: 600px;
         margin: 16px auto;
+        overflow: hidden;
       }
       .empty {
         text-align: center;
diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts
index 06003edcb2..dfc7b8d632 100644
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@@ -226,6 +226,9 @@ class HaAutomationEditor extends LitElement {
     return [
       haStyle,
       css`
+        ha-card {
+          overflow: hidden;
+        }
         .errors {
           padding: 20px;
           font-weight: bold;
@@ -234,15 +237,12 @@ class HaAutomationEditor extends LitElement {
         .content {
           padding-bottom: 20px;
         }
-        paper-card {
-          display: block;
-        }
         .triggers,
         .script {
           margin-top: -16px;
         }
-        .triggers paper-card,
-        .script paper-card {
+        .triggers ha-card,
+        .script ha-card {
           margin-top: 16px;
         }
         .add-card mwc-button {
diff --git a/src/panels/config/automation/ha-automation-picker.js b/src/panels/config/automation/ha-automation-picker.js
index 9d0ecbc92a..ea9eb0c156 100644
--- a/src/panels/config/automation/ha-automation-picker.js
+++ b/src/panels/config/automation/ha-automation-picker.js
@@ -1,6 +1,5 @@
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-fab/paper-fab";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item-body";
@@ -8,6 +7,7 @@ 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";
 
@@ -32,6 +32,10 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
           display: block;
         }
 
+        ha-card {
+          overflow: hidden;
+        }
+
         paper-item {
           cursor: pointer;
         }
@@ -82,13 +86,16 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
           <div slot="introduction">
             [[localize('ui.panel.config.automation.picker.introduction')]]
             <p>
-              <a href="https://home-assistant.io/docs/automation/editor/">
+              <a
+                href="https://home-assistant.io/docs/automation/editor/"
+                target="_blank"
+              >
                 [[localize('ui.panel.config.automation.picker.learn_more')]]
               </a>
             </p>
           </div>
 
-          <paper-card
+          <ha-card
             heading="[[localize('ui.panel.config.automation.picker.pick_automation')]]"
           >
             <template is="dom-if" if="[[!automations.length]]">
@@ -107,7 +114,7 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
                 <ha-icon-next></ha-icon-next>
               </paper-item>
             </template>
-          </paper-card>
+          </ha-card>
         </ha-config-section>
 
         <paper-fab
diff --git a/src/panels/config/cloud/cloud-alexa-pref.ts b/src/panels/config/cloud/cloud-alexa-pref.ts
index 5bb49a9c3a..1f99bdafb9 100644
--- a/src/panels/config/cloud/cloud-alexa-pref.ts
+++ b/src/panels/config/cloud/cloud-alexa-pref.ts
@@ -7,11 +7,12 @@ import {
   css,
 } from "lit-element";
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 // tslint:disable-next-line
 import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
 
+import "../../../components/ha-card";
+
 import { fireEvent } from "../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../types";
 import "./cloud-exposed-entities";
@@ -36,7 +37,7 @@ export class CloudAlexaPref extends LitElement {
     const enabled = this.cloudStatus!.prefs.alexa_enabled;
 
     return html`
-      <paper-card heading="Alexa">
+      <ha-card header="Alexa">
         <paper-toggle-button
           .checked="${enabled}"
           @change="${this._toggleChanged}"
@@ -73,7 +74,7 @@ export class CloudAlexaPref extends LitElement {
               `
             : ""}
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 
@@ -92,10 +93,11 @@ export class CloudAlexaPref extends LitElement {
       a {
         color: var(--primary-color);
       }
-      paper-card > paper-toggle-button {
+      ha-card > paper-toggle-button {
+        margin: -4px 0;
         position: absolute;
         right: 8px;
-        top: 16px;
+        top: 32px;
       }
     `;
   }
diff --git a/src/panels/config/cloud/cloud-google-pref.ts b/src/panels/config/cloud/cloud-google-pref.ts
index 18753a83f6..52be2cb5a4 100644
--- a/src/panels/config/cloud/cloud-google-pref.ts
+++ b/src/panels/config/cloud/cloud-google-pref.ts
@@ -7,12 +7,13 @@ import {
   css,
 } from "lit-element";
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 // tslint:disable-next-line
 import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
 import "../../../components/buttons/ha-call-api-button";
 
+import "../../../components/ha-card";
+
 import { fireEvent } from "../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../types";
 import "./cloud-exposed-entities";
@@ -41,7 +42,7 @@ export class CloudGooglePref extends LitElement {
     } = this.cloudStatus.prefs;
 
     return html`
-      <paper-card heading="Google Assistant">
+      <ha-card header="Google Assistant">
         <paper-toggle-button
           id="google_enabled"
           .checked="${google_enabled}"
@@ -105,7 +106,7 @@ export class CloudGooglePref extends LitElement {
             >Sync devices</ha-call-api-button
           >
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 
@@ -137,10 +138,11 @@ export class CloudGooglePref extends LitElement {
       a {
         color: var(--primary-color);
       }
-      paper-card > paper-toggle-button {
+      ha-card > paper-toggle-button {
+        margin: -4px 0;
         position: absolute;
         right: 8px;
-        top: 16px;
+        top: 32px;
       }
       ha-call-api-button {
         color: var(--primary-color);
diff --git a/src/panels/config/cloud/cloud-remote-pref.ts b/src/panels/config/cloud/cloud-remote-pref.ts
index bf0fdebce6..140be2c388 100644
--- a/src/panels/config/cloud/cloud-remote-pref.ts
+++ b/src/panels/config/cloud/cloud-remote-pref.ts
@@ -8,12 +8,13 @@ import {
   css,
 } from "lit-element";
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 import "@polymer/paper-item/paper-item-body";
 // tslint:disable-next-line
 import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
 
+import "../../../components/ha-card";
+
 import { fireEvent } from "../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../types";
 import {
@@ -48,16 +49,16 @@ export class CloudRemotePref extends LitElement {
 
     if (!remote_certificate) {
       return html`
-        <paper-card heading="Remote Control">
+        <ha-card header="Remote Control">
           <div class="preparing">
             Remote access is being prepared. We will notify you when it's ready.
           </div>
-        </paper-card>
+        </ha-card>
       `;
     }
 
     return html`
-      <paper-card heading="Remote Control">
+      <ha-card header="Remote Control">
         <paper-toggle-button
           .checked="${remote_connected}"
           @change="${this._toggleChanged}"
@@ -83,7 +84,7 @@ export class CloudRemotePref extends LitElement {
               `
             : ""}
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 
@@ -111,19 +112,17 @@ export class CloudRemotePref extends LitElement {
 
   static get styles(): CSSResult {
     return css`
-      paper-card {
-        display: block;
-      }
       .preparing {
         padding: 0 16px 16px;
       }
       a {
         color: var(--primary-color);
       }
-      paper-card > paper-toggle-button {
+      ha-card > paper-toggle-button {
+        margin: -4px 0;
         position: absolute;
         right: 8px;
-        top: 16px;
+        top: 32px;
       }
       .card-actions {
         display: flex;
diff --git a/src/panels/config/cloud/cloud-webhooks.ts b/src/panels/config/cloud/cloud-webhooks.ts
index 88ae355426..0074ac122e 100644
--- a/src/panels/config/cloud/cloud-webhooks.ts
+++ b/src/panels/config/cloud/cloud-webhooks.ts
@@ -51,19 +51,17 @@ export class CloudWebhooks extends LitElement {
     return html`
       ${this.renderStyle()}
       <ha-card header="Webhooks">
-        <div class="body">
+        <div class="card-content">
           Anything that is configured to be triggered by a webhook can be given
           a publicly accessible URL to allow you to send data back to Home
           Assistant from anywhere, without exposing your instance to the
-          internet.
-        </div>
+          internet. ${this._renderBody()}
 
-        ${this._renderBody()}
-
-        <div class="footer">
-          <a href="https://www.nabucasa.com/config/webhooks" target="_blank">
-            Learn more about creating webhook-powered automations.
-          </a>
+          <div class="footer">
+            <a href="https://www.nabucasa.com/config/webhooks" target="_blank">
+              Learn more about creating webhook-powered automations.
+            </a>
+          </div>
         </div>
       </ha-card>
     `;
@@ -194,15 +192,12 @@ export class CloudWebhooks extends LitElement {
   private renderStyle() {
     return html`
       <style>
-        .body {
-          padding: 0 16px 8px;
-        }
         .body-text {
-          padding: 0 16px;
+          padding: 8px 0;
         }
         .webhook {
           display: flex;
-          padding: 4px 16px;
+          padding: 4px 0;
         }
         .progress {
           margin-right: 16px;
@@ -211,7 +206,7 @@ export class CloudWebhooks extends LitElement {
           justify-content: center;
         }
         .footer {
-          padding: 16px;
+          padding-top: 16px;
         }
         .body-text a,
         .footer a {
diff --git a/src/panels/config/cloud/ha-config-cloud-account.js b/src/panels/config/cloud/ha-config-cloud-account.js
index d6c004a1b3..0b530c8d61 100644
--- a/src/panels/config/cloud/ha-config-cloud-account.js
+++ b/src/panels/config/cloud/ha-config-cloud-account.js
@@ -1,10 +1,10 @@
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../../components/ha-card";
 import "../../../components/buttons/ha-call-api-button";
 import "../../../layouts/hass-subpage";
 import "../../../resources/ha-style";
@@ -13,7 +13,7 @@ import "../ha-config-section";
 import "./cloud-webhooks";
 
 import formatDateTime from "../../../common/datetime/format_date_time";
-import EventsMixin from "../../../mixins/events-mixin";
+import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { fetchCloudSubscriptionInfo } from "../../../data/cloud";
@@ -41,9 +41,6 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
           padding-bottom: 24px;
           direction: ltr;
         }
-        paper-card {
-          display: block;
-        }
         .account-row {
           display: flex;
           padding: 0 16px;
@@ -82,7 +79,7 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
               </p>
             </div>
 
-            <paper-card heading="Nabu Casa Account">
+            <ha-card header="Nabu Casa Account">
               <div class="account-row">
                 <paper-item-body two-line="">
                   [[cloudStatus.email]]
@@ -105,7 +102,7 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
                   >Sign out</mwc-button
                 >
               </div>
-            </paper-card>
+            </ha-card>
           </ha-config-section>
 
           <ha-config-section is-wide="[[isWide]]">
diff --git a/src/panels/config/cloud/ha-config-cloud-forgot-password.js b/src/panels/config/cloud/ha-config-cloud-forgot-password.js
index 1e8668c756..0663a7a8f2 100644
--- a/src/panels/config/cloud/ha-config-cloud-forgot-password.js
+++ b/src/panels/config/cloud/ha-config-cloud-forgot-password.js
@@ -1,12 +1,12 @@
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../../components/ha-card";
 import "../../../components/buttons/ha-progress-button";
 import "../../../layouts/hass-subpage";
 import "../../../resources/ha-style";
-import EventsMixin from "../../../mixins/events-mixin";
+import { EventsMixin } from "../../../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
@@ -20,8 +20,7 @@ class HaConfigCloudForgotPassword extends EventsMixin(PolymerElement) {
           direction: ltr;
         }
 
-        paper-card {
-          display: block;
+        ha-card {
           max-width: 600px;
           margin: 0 auto;
           margin-top: 24px;
@@ -47,9 +46,8 @@ class HaConfigCloudForgotPassword extends EventsMixin(PolymerElement) {
       </style>
       <hass-subpage header="Forgot Password">
         <div class="content">
-          <paper-card>
+          <ha-card header="Forgot your password">
             <div class="card-content">
-              <h1>Forgot your password?</h1>
               <p>
                 Enter your email address and we will send you a link to reset
                 your password.
@@ -72,7 +70,7 @@ class HaConfigCloudForgotPassword extends EventsMixin(PolymerElement) {
                 >Send reset email</ha-progress-button
               >
             </div>
-          </paper-card>
+          </ha-card>
         </div>
       </hass-subpage>
     `;
diff --git a/src/panels/config/cloud/ha-config-cloud-login.js b/src/panels/config/cloud/ha-config-cloud-login.js
index 7445a2769b..51687e5b9b 100644
--- a/src/panels/config/cloud/ha-config-cloud-login.js
+++ b/src/panels/config/cloud/ha-config-cloud-login.js
@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item-body";
@@ -8,12 +7,13 @@ import "@polymer/paper-ripple/paper-ripple";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../../components/ha-card";
 import "../../../components/buttons/ha-progress-button";
 import "../../../layouts/hass-subpage";
 import "../../../resources/ha-style";
 
 import "../ha-config-section";
-import EventsMixin from "../../../mixins/events-mixin";
+import { EventsMixin } from "../../../mixins/events-mixin";
 import NavigateMixin from "../../../mixins/navigate-mixin";
 import "../../../components/ha-icon-next";
 /*
@@ -34,14 +34,14 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
         [slot="introduction"] a {
           color: var(--primary-color);
         }
-        paper-card {
-          display: block;
-        }
         paper-item {
           cursor: pointer;
         }
-        paper-card:last-child {
-          margin-top: 24px;
+        ha-card {
+          overflow: hidden;
+        }
+        ha-card .card-header {
+          margin-bottom: -8px;
         }
         h1 {
           @apply --paper-font-headline;
@@ -97,7 +97,7 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
               </p>
             </div>
 
-            <paper-card hidden$="[[!flashMessage]]">
+            <ha-card hidden$="[[!flashMessage]]">
               <div class="card-content flash-msg">
                 [[flashMessage]]
                 <paper-icon-button icon="hass:close" on-click="_dismissFlash"
@@ -105,11 +105,10 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
                 >
                 <paper-ripple id="flashRipple" noink=""></paper-ripple>
               </div>
-            </paper-card>
+            </ha-card>
 
-            <paper-card>
+            <ha-card header="Sign in">
               <div class="card-content">
-                <h1>Sign In</h1>
                 <div class="error" hidden$="[[!_error]]">[[_error]]</div>
                 <paper-input
                   label="Email"
@@ -142,9 +141,9 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
                   forgot password?
                 </button>
               </div>
-            </paper-card>
+            </ha-card>
 
-            <paper-card>
+            <ha-card>
               <paper-item on-click="_handleRegister">
                 <paper-item-body two-line="">
                   Start your free 1 month trial
@@ -152,7 +151,7 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
                 </paper-item-body>
                 <ha-icon-next></ha-icon-next>
               </paper-item>
-            </paper-card>
+            </ha-card>
           </ha-config-section>
         </div>
       </hass-subpage>
diff --git a/src/panels/config/cloud/ha-config-cloud-register.js b/src/panels/config/cloud/ha-config-cloud-register.js
index b387e18d01..9b9c1fc31c 100644
--- a/src/panels/config/cloud/ha-config-cloud-register.js
+++ b/src/panels/config/cloud/ha-config-cloud-register.js
@@ -1,13 +1,13 @@
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../../components/ha-card";
 import "../../../components/buttons/ha-progress-button";
 import "../../../layouts/hass-subpage";
 import "../../../resources/ha-style";
 import "../ha-config-section";
-import EventsMixin from "../../../mixins/events-mixin";
+import { EventsMixin } from "../../../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
@@ -29,15 +29,9 @@ class HaConfigCloudRegister extends EventsMixin(PolymerElement) {
       a {
         color: var(--primary-color);
       }
-      paper-card {
-        display: block;
-      }
       paper-item {
         cursor: pointer;
       }
-      paper-card:last-child {
-        margin-top: 24px;
-      }
       h1 {
         @apply --paper-font-headline;
         margin: 0;
@@ -84,10 +78,9 @@ class HaConfigCloudRegister extends EventsMixin(PolymerElement) {
             </p>
           </div>
 
-          <paper-card>
+          <ha-card header="Create Account">
             <div class="card-content">
               <div class="header">
-                <h1>Create Account</h1>
                 <div class="error" hidden$="[[!_error]]">[[_error]]</div>
               </div>
               <paper-input autofocus="" id="email" label="Email address" type="email" value="{{email}}" on-keydown="_keyDown" error-message="Invalid email"></paper-input>
@@ -97,7 +90,7 @@ class HaConfigCloudRegister extends EventsMixin(PolymerElement) {
               <ha-progress-button on-click="_handleRegister" progress="[[_requestInProgress]]">Start trial</ha-progress-button>
               <button class="link" hidden="[[_requestInProgress]]" on-click="_handleResendVerifyEmail">Resend confirmation email</button>
             </div>
-          </paper-card>
+          </ha-card>
         </ha-config-section>
       </div>
     </hass-subpage>
diff --git a/src/panels/config/core/ha-config-section-core.js b/src/panels/config/core/ha-config-section-core.js
index ee9c3547d0..4824b74fc5 100644
--- a/src/panels/config/core/ha-config-section-core.js
+++ b/src/panels/config/core/ha-config-section-core.js
@@ -1,9 +1,9 @@
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../../components/ha-card";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../resources/ha-style";
 
@@ -57,8 +57,8 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
           >[[localize('ui.panel.config.core.section.core.introduction')]]</span
         >
 
-        <paper-card
-          heading="[[localize('ui.panel.config.core.section.core.validation.heading')]]"
+        <ha-card
+          header="[[localize('ui.panel.config.core.section.core.validation.heading')]]"
         >
           <div class="card-content">
             [[localize('ui.panel.config.core.section.core.validation.introduction')]]
@@ -91,10 +91,10 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
               <div id="configLog" class="validate-log">[[validateLog]]</div>
             </template>
           </div>
-        </paper-card>
+        </ha-card>
 
-        <paper-card
-          heading="[[localize('ui.panel.config.core.section.core.reloading.heading')]]"
+        <ha-card
+          header="[[localize('ui.panel.config.core.section.core.reloading.heading')]]"
         >
           <div class="card-content">
             [[localize('ui.panel.config.core.section.core.reloading.introduction')]]
@@ -128,10 +128,10 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
               >[[localize('ui.panel.config.core.section.core.reloading.script')]]
             </ha-call-service-button>
           </div>
-        </paper-card>
+        </ha-card>
 
-        <paper-card
-          heading="[[localize('ui.panel.config.core.section.core.server_management.heading')]]"
+        <ha-card
+          header="[[localize('ui.panel.config.core.section.core.server_management.heading')]]"
         >
           <div class="card-content">
             [[localize('ui.panel.config.core.section.core.server_management.introduction')]]
@@ -152,7 +152,7 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
               >[[localize('ui.panel.config.core.section.core.server_management.stop')]]
             </ha-call-service-button>
           </div>
-        </paper-card>
+        </ha-card>
       </ha-config-section>
     `;
   }
diff --git a/src/panels/config/customize/types/ha-customize-array.js b/src/panels/config/customize/types/ha-customize-array.js
index 2991a9edc6..c300a8ed91 100644
--- a/src/panels/config/customize/types/ha-customize-array.js
+++ b/src/panels/config/customize/types/ha-customize-array.js
@@ -4,7 +4,7 @@ import "@polymer/paper-listbox/paper-listbox";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../../../../mixins/events-mixin";
+import { EventsMixin } from "../../../../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/panels/config/dashboard/ha-config-dashboard.js b/src/panels/config/dashboard/ha-config-dashboard.js
index 41d6226f71..8c4a40a721 100644
--- a/src/panels/config/dashboard/ha-config-dashboard.js
+++ b/src/panels/config/dashboard/ha-config-dashboard.js
@@ -2,12 +2,12 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-card/paper-card";
 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-menu-button";
 import "../../../components/ha-icon-next";
 
@@ -25,12 +25,12 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
   static get template() {
     return html`
     <style include="iron-flex ha-style">
+      ha-card {
+        overflow: hidden;
+      }
       .content {
         padding-bottom: 32px;
       }
-      paper-card {
-        display: block;
-      }
       a {
         text-decoration: none;
         color: var(--primary-text-color);
@@ -51,7 +51,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
           <span slot="introduction">[[localize('ui.panel.config.introduction')]]</span>
 
           <template is="dom-if" if="[[computeIsLoaded(hass, 'cloud')]]">
-            <paper-card>
+            <ha-card>
               <a href='/config/cloud' tabindex="-1">
                 <paper-item>
                   <paper-item-body two-line="">
@@ -69,11 +69,11 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
                   </paper-item-body>
                   <ha-icon-next></ha-icon-next>
                 </paper-item>
-              </paper-card>
+              </ha-card>
             </a>
           </template>
 
-          <paper-card>
+          <ha-card>
             <a href='/config/integrations/dashboard' tabindex="-1">
               <paper-item>
                 <paper-item-body two-line>
@@ -97,7 +97,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
                 <ha-icon-next></ha-icon-next>
               </paper-item>
             </a>
-          </paper-card>
+          </ha-card>
 
           <ha-config-navigation hass="[[hass]]"></ha-config-navigation>
         </ha-config-section>
diff --git a/src/panels/config/dashboard/ha-config-navigation.js b/src/panels/config/dashboard/ha-config-navigation.js
index 083e4e0487..be00ec1e3e 100644
--- a/src/panels/config/dashboard/ha-config-navigation.js
+++ b/src/panels/config/dashboard/ha-config-navigation.js
@@ -1,5 +1,4 @@
 import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-item/paper-item";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -10,6 +9,7 @@ import LocalizeMixin from "../../../mixins/localize-mixin";
 
 import isComponentLoaded from "../../../common/config/is_component_loaded";
 
+import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
 
 const CORE_PAGES = ["core", "customize", "entity_registry", "area_registry"];
@@ -21,14 +21,14 @@ class HaConfigNavigation extends LocalizeMixin(NavigateMixin(PolymerElement)) {
   static get template() {
     return html`
       <style include="iron-flex">
-        paper-card {
-          display: block;
+        ha-card {
+          overflow: hidden;
         }
         paper-item {
           cursor: pointer;
         }
       </style>
-      <paper-card>
+      <ha-card>
         <template is="dom-repeat" items="[[pages]]">
           <template is="dom-if" if="[[_computeLoaded(hass, item)]]">
             <paper-item on-click="_navigate">
@@ -40,7 +40,7 @@ class HaConfigNavigation extends LocalizeMixin(NavigateMixin(PolymerElement)) {
             </paper-item>
           </template>
         </template>
-      </paper-card>
+      </ha-card>
     `;
   }
 
diff --git a/src/panels/config/entity_registry/ha-config-entity-registry.ts b/src/panels/config/entity_registry/ha-config-entity-registry.ts
index 8e5bd8b375..86f4dd1e78 100644
--- a/src/panels/config/entity_registry/ha-config-entity-registry.ts
+++ b/src/panels/config/entity_registry/ha-config-entity-registry.ts
@@ -4,24 +4,23 @@ import {
   html,
   css,
   CSSResult,
-  PropertyDeclarations,
+  property,
 } from "lit-element";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-card/paper-card";
 
 import { HomeAssistant } from "../../../types";
 import {
   EntityRegistryEntry,
-  fetchEntityRegistry,
   computeEntityRegistryName,
   updateEntityRegistryEntry,
   removeEntityRegistryEntry,
+  subscribeEntityRegistry,
 } from "../../../data/entity_registry";
 import "../../../layouts/hass-subpage";
 import "../../../layouts/hass-loading-screen";
+import "../../../components/ha-card";
 import "../../../components/ha-icon";
-import compare from "../../../common/string/compare";
 import domainIcon from "../../../common/entity/domain_icon";
 import stateIcon from "../../../common/entity/state_icon";
 import computeDomain from "../../../common/entity/compute_domain";
@@ -30,22 +29,24 @@ import {
   showEntityRegistryDetailDialog,
   loadEntityRegistryDetailDialog,
 } from "./show-dialog-entity-registry-detail";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { compare } from "../../../common/string/compare";
 
 class HaConfigEntityRegistry extends LitElement {
-  public hass?: HomeAssistant;
-  public isWide?: boolean;
-  private _items?: EntityRegistryEntry[];
+  @property() public hass!: HomeAssistant;
+  @property() public isWide?: boolean;
+  @property() private _entities?: EntityRegistryEntry[];
+  private _unsubEntities?: UnsubscribeFunc;
 
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      isWide: {},
-      _items: {},
-    };
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._unsubEntities) {
+      this._unsubEntities();
+    }
   }
 
   protected render(): TemplateResult | void {
-    if (!this.hass || this._items === undefined) {
+    if (!this.hass || this._entities === undefined) {
       return html`
         <hass-loading-screen></hass-loading-screen>
       `;
@@ -77,8 +78,8 @@ class HaConfigEntityRegistry extends LitElement {
               )}
             </a>
           </span>
-          <paper-card>
-            ${this._items.map((entry) => {
+          <ha-card>
+            ${this._entities.map((entry) => {
               const state = this.hass!.states[entry.entity_id];
               return html`
                 <paper-icon-item @click=${this._openEditEntry} .entry=${entry}>
@@ -103,7 +104,7 @@ class HaConfigEntityRegistry extends LitElement {
                 </paper-icon-item>
               `;
             })}
-          </paper-card>
+          </ha-card>
         </ha-config-section>
       </hass-subpage>
     `;
@@ -111,14 +112,18 @@ class HaConfigEntityRegistry extends LitElement {
 
   protected firstUpdated(changedProps): void {
     super.firstUpdated(changedProps);
-    this._fetchData();
     loadEntityRegistryDetailDialog();
   }
 
-  private async _fetchData(): Promise<void> {
-    this._items = (await fetchEntityRegistry(this.hass!)).sort((ent1, ent2) =>
-      compare(ent1.entity_id, ent2.entity_id)
-    );
+  protected updated(changedProps) {
+    super.updated(changedProps);
+    if (!this._unsubEntities) {
+      this._unsubEntities = subscribeEntityRegistry(this.hass, (entities) => {
+        this._entities = entities.sort((ent1, ent2) =>
+          compare(ent1.entity_id, ent2.entity_id)
+        );
+      });
+    }
   }
 
   private _openEditEntry(ev: MouseEvent): void {
@@ -131,7 +136,7 @@ class HaConfigEntityRegistry extends LitElement {
           entry.entity_id,
           updates
         );
-        this._items = this._items!.map((ent) =>
+        this._entities = this._entities!.map((ent) =>
           ent === entry ? updated : ent
         );
       },
@@ -148,7 +153,7 @@ Deleting an entry will not remove the entity from Home Assistant. To do this, yo
 
         try {
           await removeEntityRegistryEntry(this.hass!, entry.entity_id);
-          this._items = this._items!.filter((ent) => ent !== entry);
+          this._entities = this._entities!.filter((ent) => ent !== entry);
           return true;
         } catch (err) {
           return false;
@@ -162,9 +167,9 @@ Deleting an entry will not remove the entity from Home Assistant. To do this, yo
       a {
         color: var(--primary-color);
       }
-      paper-card {
-        display: block;
+      ha-card {
         direction: ltr;
+        overflow: hidden;
       }
       paper-icon-item {
         cursor: pointer;
diff --git a/src/panels/config/ha-entity-config.js b/src/panels/config/ha-entity-config.js
index f2e0386871..15661b5c62 100644
--- a/src/panels/config/ha-entity-config.js
+++ b/src/panels/config/ha-entity-config.js
@@ -1,11 +1,11 @@
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "../../components/ha-card";
 
 import computeStateName from "../../common/entity/compute_state_name";
 
@@ -13,8 +13,7 @@ class HaEntityConfig extends PolymerElement {
   static get template() {
     return html`
       <style include="iron-flex ha-style">
-        paper-card {
-          display: block;
+        ha-card {
           direction: ltr;
         }
 
@@ -38,7 +37,7 @@ class HaEntityConfig extends PolymerElement {
           @apply --layout-justified;
         }
       </style>
-      <paper-card>
+      <ha-card>
         <div class="card-content">
           <div class="device-picker">
             <paper-dropdown-menu
@@ -89,7 +88,7 @@ class HaEntityConfig extends PolymerElement {
             >
           </template>
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 
diff --git a/src/panels/config/integrations/ha-ce-entities-card.js b/src/panels/config/integrations/ha-ce-entities-card.js
index c06a75d525..49b9ea3454 100644
--- a/src/panels/config/integrations/ha-ce-entities-card.js
+++ b/src/panels/config/integrations/ha-ce-entities-card.js
@@ -1,12 +1,12 @@
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../../components/ha-card";
 import "../../../layouts/hass-subpage";
 
-import EventsMixin from "../../../mixins/events-mixin";
+import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixIn from "../../../mixins/localize-mixin";
 import "../../../components/entity/state-badge";
 import { computeEntityRegistryName } from "../../../data/entity_registry";
@@ -19,7 +19,7 @@ class HaCeEntitiesCard extends LocalizeMixIn(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
       <style>
-        paper-card {
+        ha-card {
           flex: 1 0 100%;
           padding-bottom: 8px;
         }
@@ -29,7 +29,7 @@ class HaCeEntitiesCard extends LocalizeMixIn(EventsMixin(PolymerElement)) {
           padding-bottom: 4px;
         }
       </style>
-      <paper-card heading="[[heading]]">
+      <ha-card header="[[heading]]">
         <template is="dom-repeat" items="[[entities]]" as="entity">
           <paper-icon-item on-click="_openMoreInfo">
             <state-badge
@@ -42,7 +42,7 @@ class HaCeEntitiesCard extends LocalizeMixIn(EventsMixin(PolymerElement)) {
             </paper-item-body>
           </paper-icon-item>
         </template>
-      </paper-card>
+      </ha-card>
     `;
   }
 
diff --git a/src/panels/config/integrations/ha-config-entries-dashboard.js b/src/panels/config/integrations/ha-config-entries-dashboard.js
index e7582b6c91..937fcc21f8 100644
--- a/src/panels/config/integrations/ha-config-entries-dashboard.js
+++ b/src/panels/config/integrations/ha-config-entries-dashboard.js
@@ -2,13 +2,13 @@ import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import "@polymer/paper-tooltip/paper-tooltip";
 import "@material/mwc-button";
 import "@polymer/paper-fab/paper-fab";
-import "@polymer/paper-card/paper-card";
 import "@polymer/iron-icon/iron-icon";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../../components/ha-card";
 import "../../../components/entity/ha-state-icon";
 import "../../../layouts/hass-subpage";
 import "../../../resources/ha-style";
@@ -16,13 +16,14 @@ import "../../../components/ha-icon-next";
 
 import { computeRTL } from "../../../common/util/compute_rtl";
 import "../ha-config-section";
-import EventsMixin from "../../../mixins/events-mixin";
+import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 import computeStateName from "../../../common/entity/compute_state_name";
 import {
   loadConfigFlowDialog,
   showConfigFlowDialog,
 } from "../../../dialogs/config-flow/show-dialog-config-flow";
+import { localizeConfigFlowTitle } from "../../../data/config_entries";
 
 /*
  * @appliesMixin LocalizeMixin
@@ -34,13 +35,13 @@ class HaConfigManagerDashboard extends LocalizeMixin(
   static get template() {
     return html`
       <style include="iron-flex ha-style">
+        ha-card {
+          overflow: hidden;
+        }
         mwc-button {
           top: 3px;
           margin-right: -0.57em;
         }
-        paper-card:last-child {
-          margin-top: 12px;
-        }
         .config-entry-row {
           display: flex;
           padding: 0 16px;
@@ -84,7 +85,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
             <span slot="header"
               >[[localize('ui.panel.config.integrations.discovered')]]</span
             >
-            <paper-card>
+            <ha-card>
               <template is="dom-repeat" items="[[progress]]">
                 <div class="config-entry-row">
                   <paper-item-body>
@@ -95,7 +96,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
                   >
                 </div>
               </template>
-            </paper-card>
+            </ha-card>
           </ha-config-section>
         </template>
 
@@ -103,7 +104,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
           <span slot="header"
             >[[localize('ui.panel.config.integrations.configured')]]</span
           >
-          <paper-card>
+          <ha-card>
             <template is="dom-if" if="[[!entries.length]]">
               <div class="config-entry-row">
                 <paper-item-body two-line>
@@ -140,7 +141,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
                 </paper-item>
               </a>
             </template>
-          </paper-card>
+          </ha-card>
         </ha-config-section>
 
         <paper-fab
@@ -207,21 +208,8 @@ class HaConfigManagerDashboard extends LocalizeMixin(
     return localize(`component.${integration}.config.title`);
   }
 
-  _computeActiveFlowTitle(localize, integration) {
-    const placeholders = integration.context.title_placeholders || {};
-    const placeholderKeys = Object.keys(placeholders);
-    if (placeholderKeys.length === 0) {
-      return localize(`component.${integration.handler}.config.title`);
-    }
-    const args = [];
-    placeholderKeys.forEach((key) => {
-      args.push(key);
-      args.push(placeholders[key]);
-    });
-    return localize(
-      `component.${integration.handler}.config.flow_title`,
-      ...args
-    );
+  _computeActiveFlowTitle(localize, flow) {
+    return localizeConfigFlowTitle(localize, flow);
   }
 
   _computeConfigEntryEntities(hass, configEntry, entities) {
diff --git a/src/panels/config/integrations/ha-config-entry-page.js b/src/panels/config/integrations/ha-config-entry-page.js
index c00da73c9d..687bde65a5 100644
--- a/src/panels/config/integrations/ha-config-entry-page.js
+++ b/src/panels/config/integrations/ha-config-entry-page.js
@@ -1,15 +1,14 @@
-import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../layouts/hass-subpage";
 
 import "../../../components/entity/state-badge";
-import compare from "../../../common/string/compare";
+import { compare } from "../../../common/string/compare";
 
 import "./ha-device-card";
 import "./ha-ce-entities-card";
-import EventsMixin from "../../../mixins/events-mixin";
+import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 import NavigateMixin from "../../../mixins/navigate-mixin";
 
diff --git a/src/panels/config/integrations/ha-config-integrations.js b/src/panels/config/integrations/ha-config-integrations.js
index b24a600bb0..bd759f4ded 100644
--- a/src/panels/config/integrations/ha-config-integrations.js
+++ b/src/panels/config/integrations/ha-config-integrations.js
@@ -7,8 +7,8 @@ import { timeOut } from "@polymer/polymer/lib/utils/async";
 import "./ha-config-entries-dashboard";
 import "./ha-config-entry-page";
 import NavigateMixin from "../../../mixins/navigate-mixin";
-import compare from "../../../common/string/compare";
-import { fetchAreaRegistry } from "../../../data/area_registry";
+import { compare } from "../../../common/string/compare";
+import { subscribeAreaRegistry } from "../../../data/area_registry";
 
 class HaConfigIntegrations extends NavigateMixin(PolymerElement) {
   static get template() {
@@ -96,6 +96,9 @@ class HaConfigIntegrations extends NavigateMixin(PolymerElement) {
   connectedCallback() {
     super.connectedCallback();
     this._loadData();
+    this._unsubAreas = subscribeAreaRegistry(this.hass, (areas) => {
+      this._areas = areas;
+    });
 
     this.hass.connection
       .subscribeEvents(() => {
@@ -113,6 +116,7 @@ class HaConfigIntegrations extends NavigateMixin(PolymerElement) {
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this._unsubEvents) this._unsubEvents();
+    if (this._unsubAreas) this._unsubAreas();
   }
 
   _loadData() {
@@ -143,10 +147,6 @@ class HaConfigIntegrations extends NavigateMixin(PolymerElement) {
       .then((devices) => {
         this._devices = devices;
       });
-
-    fetchAreaRegistry(this.hass).then((areas) => {
-      this._areas = areas.sort((a, b) => compare(a.name, b.name));
-    });
   }
 
   _computeConfigEntry(routeData, entries) {
diff --git a/src/panels/config/integrations/ha-device-card.js b/src/panels/config/integrations/ha-device-card.js
index 0bc4265621..b886334707 100644
--- a/src/panels/config/integrations/ha-device-card.js
+++ b/src/panels/config/integrations/ha-device-card.js
@@ -1,19 +1,19 @@
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../../components/ha-card";
 import "../../../layouts/hass-subpage";
 
-import EventsMixin from "../../../mixins/events-mixin";
+import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 import computeStateName from "../../../common/entity/compute_state_name";
 import "../../../components/entity/state-badge";
-import compare from "../../../common/string/compare";
+import { compare } from "../../../common/string/compare";
 import { updateDeviceRegistryEntry } from "../../../data/device_registry";
 
 function computeEntityName(hass, entity) {
@@ -33,7 +33,7 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
           max-height: 225px;
           overflow: auto;
         }
-        paper-card {
+        ha-card {
           flex: 1 0 100%;
           padding-bottom: 10px;
           min-width: 0;
@@ -61,7 +61,7 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
           color: var(--secondary-text-color);
         }
       </style>
-      <paper-card heading="[[device.name]]">
+      <ha-card header="[[device.name]]">
         <div class="card-content">
           <!--
             <h1>[[configEntry.title]] ([[_computeIntegrationTitle(localize, configEntry.domain)]])</h1>
@@ -125,7 +125,7 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
             </paper-icon-item>
           </template>
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 
diff --git a/src/panels/config/js/automation.js b/src/panels/config/js/automation.js
index 4f90040444..26cf2bb782 100644
--- a/src/panels/config/js/automation.js
+++ b/src/panels/config/js/automation.js
@@ -1,8 +1,8 @@
 import { h, Component } from "preact";
 
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import "../ha-config-section";
+import "../../../components/ha-card";
 
 import Trigger from "./trigger/index";
 import Condition from "./condition/index";
@@ -50,7 +50,7 @@ export default class Automation extends Component {
           <span slot="introduction">
             {localize("ui.panel.config.automation.editor.introduction")}
           </span>
-          <paper-card>
+          <ha-card>
             <div class="card-content">
               <paper-input
                 label={localize("ui.panel.config.automation.editor.alias")}
@@ -59,7 +59,7 @@ export default class Automation extends Component {
                 onvalue-changed={this.onChange}
               />
             </div>
-          </paper-card>
+          </ha-card>
         </ha-config-section>
 
         <ha-config-section is-wide={isWide}>
@@ -72,7 +72,10 @@ export default class Automation extends Component {
                 "ui.panel.config.automation.editor.triggers.introduction"
               )}
             </p>
-            <a href="https://home-assistant.io/docs/automation/trigger/">
+            <a
+              href="https://home-assistant.io/docs/automation/trigger/"
+              target="_blank"
+            >
               {localize(
                 "ui.panel.config.automation.editor.triggers.learn_more"
               )}
@@ -96,7 +99,10 @@ export default class Automation extends Component {
                 "ui.panel.config.automation.editor.conditions.introduction"
               )}
             </p>
-            <a href="https://home-assistant.io/docs/scripts/conditions/">
+            <a
+              href="https://home-assistant.io/docs/scripts/conditions/"
+              target="_blank"
+            >
               {localize(
                 "ui.panel.config.automation.editor.conditions.learn_more"
               )}
@@ -120,7 +126,10 @@ export default class Automation extends Component {
                 "ui.panel.config.automation.editor.actions.introduction"
               )}
             </p>
-            <a href="https://home-assistant.io/docs/automation/action/">
+            <a
+              href="https://home-assistant.io/docs/automation/action/"
+              target="_blank"
+            >
               {localize("ui.panel.config.automation.editor.actions.learn_more")}
             </a>
           </span>
diff --git a/src/panels/config/js/condition/condition_row.js b/src/panels/config/js/condition/condition_row.js
index b518af93bc..34f51af6fa 100644
--- a/src/panels/config/js/condition/condition_row.js
+++ b/src/panels/config/js/condition/condition_row.js
@@ -1,9 +1,9 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-menu-button/paper-menu-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-item/paper-item";
+import "../../../../components/ha-card";
 
 import ConditionEdit from "./condition_edit";
 
@@ -29,36 +29,36 @@ export default class ConditionRow extends Component {
 
   render(props) {
     return (
-      <paper-card>
-        <div class="card-menu">
-          <paper-menu-button
-            no-animations
-            horizontal-align="right"
-            horizontal-offset="-5"
-            vertical-offset="-5"
-          >
-            <paper-icon-button
-              icon="hass:dots-vertical"
-              slot="dropdown-trigger"
-            />
-            <paper-listbox slot="dropdown-content">
-              <paper-item disabled>
-                {props.localize(
-                  "ui.panel.config.automation.editor.conditions.duplicate"
-                )}
-              </paper-item>
-              <paper-item onTap={this.onDelete}>
-                {props.localize(
-                  "ui.panel.config.automation.editor.conditions.delete"
-                )}
-              </paper-item>
-            </paper-listbox>
-          </paper-menu-button>
-        </div>
+      <ha-card>
         <div class="card-content">
+          <div class="card-menu">
+            <paper-menu-button
+              no-animations
+              horizontal-align="right"
+              horizontal-offset="-5"
+              vertical-offset="-5"
+            >
+              <paper-icon-button
+                icon="hass:dots-vertical"
+                slot="dropdown-trigger"
+              />
+              <paper-listbox slot="dropdown-content">
+                <paper-item disabled>
+                  {props.localize(
+                    "ui.panel.config.automation.editor.conditions.duplicate"
+                  )}
+                </paper-item>
+                <paper-item onTap={this.onDelete}>
+                  {props.localize(
+                    "ui.panel.config.automation.editor.conditions.delete"
+                  )}
+                </paper-item>
+              </paper-listbox>
+            </paper-menu-button>
+          </div>
           <ConditionEdit {...props} />
         </div>
-      </paper-card>
+      </ha-card>
     );
   }
 }
diff --git a/src/panels/config/js/condition/index.js b/src/panels/config/js/condition/index.js
index 0bd419b52d..8fae56e179 100644
--- a/src/panels/config/js/condition/index.js
+++ b/src/panels/config/js/condition/index.js
@@ -1,6 +1,6 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card";
 import "@material/mwc-button";
+import "../../../../components/ha-card";
 
 import ConditionRow from "./condition_row";
 
@@ -44,13 +44,13 @@ export default class Condition extends Component {
             localize={localize}
           />
         ))}
-        <paper-card>
+        <ha-card>
           <div class="card-actions add-card">
             <mwc-button onTap={this.addCondition}>
               {localize("ui.panel.config.automation.editor.conditions.add")}
             </mwc-button>
           </div>
-        </paper-card>
+        </ha-card>
       </div>
     );
   }
diff --git a/src/panels/config/js/script.js b/src/panels/config/js/script.js
index cca985573a..867cc5d4a4 100644
--- a/src/panels/config/js/script.js
+++ b/src/panels/config/js/script.js
@@ -1,8 +1,8 @@
 import { h, Component } from "preact";
 
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import "../ha-config-section";
+import "../../../components/ha-card";
 
 import Script from "./script/index";
 
@@ -36,7 +36,7 @@ export default class ScriptEditor extends Component {
           <span slot="introduction">
             Use scripts to execute a sequence of actions.
           </span>
-          <paper-card>
+          <ha-card>
             <div class="card-content">
               <paper-input
                 label="Name"
@@ -45,7 +45,7 @@ export default class ScriptEditor extends Component {
                 onvalue-changed={this.onChange}
               />
             </div>
-          </paper-card>
+          </ha-card>
         </ha-config-section>
 
         <ha-config-section is-wide={isWide}>
diff --git a/src/panels/config/js/script/action_row.js b/src/panels/config/js/script/action_row.js
index a83bbaa9cc..a8f0da3838 100644
--- a/src/panels/config/js/script/action_row.js
+++ b/src/panels/config/js/script/action_row.js
@@ -1,9 +1,9 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-menu-button/paper-menu-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
+import "../../../../components/ha-card";
 
 import ActionEdit from "./action_edit";
 
@@ -29,36 +29,36 @@ export default class Action extends Component {
 
   render(props) {
     return (
-      <paper-card>
-        <div class="card-menu">
-          <paper-menu-button
-            no-animations
-            horizontal-align="right"
-            horizontal-offset="-5"
-            vertical-offset="-5"
-          >
-            <paper-icon-button
-              icon="hass:dots-vertical"
-              slot="dropdown-trigger"
-            />
-            <paper-listbox slot="dropdown-content">
-              <paper-item disabled>
-                {props.localize(
-                  "ui.panel.config.automation.editor.actions.duplicate"
-                )}
-              </paper-item>
-              <paper-item onTap={this.onDelete}>
-                {props.localize(
-                  "ui.panel.config.automation.editor.actions.delete"
-                )}
-              </paper-item>
-            </paper-listbox>
-          </paper-menu-button>
-        </div>
+      <ha-card>
         <div class="card-content">
+          <div class="card-menu">
+            <paper-menu-button
+              no-animations
+              horizontal-align="right"
+              horizontal-offset="-5"
+              vertical-offset="-5"
+            >
+              <paper-icon-button
+                icon="hass:dots-vertical"
+                slot="dropdown-trigger"
+              />
+              <paper-listbox slot="dropdown-content">
+                <paper-item disabled>
+                  {props.localize(
+                    "ui.panel.config.automation.editor.actions.duplicate"
+                  )}
+                </paper-item>
+                <paper-item onTap={this.onDelete}>
+                  {props.localize(
+                    "ui.panel.config.automation.editor.actions.delete"
+                  )}
+                </paper-item>
+              </paper-listbox>
+            </paper-menu-button>
+          </div>
           <ActionEdit {...props} />
         </div>
-      </paper-card>
+      </ha-card>
     );
   }
 }
diff --git a/src/panels/config/js/script/index.js b/src/panels/config/js/script/index.js
index e04addcf52..a5343cdd5e 100644
--- a/src/panels/config/js/script/index.js
+++ b/src/panels/config/js/script/index.js
@@ -1,6 +1,6 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card";
 import "@material/mwc-button";
+import "../../../../components/ha-card";
 
 import ActionRow from "./action_row";
 
@@ -44,13 +44,13 @@ export default class Script extends Component {
             localize={localize}
           />
         ))}
-        <paper-card>
+        <ha-card>
           <div class="card-actions add-card">
             <mwc-button onTap={this.addAction}>
               {localize("ui.panel.config.automation.editor.actions.add")}
             </mwc-button>
           </div>
-        </paper-card>
+        </ha-card>
       </div>
     );
   }
diff --git a/src/panels/config/js/trigger/index.js b/src/panels/config/js/trigger/index.js
index fc4b8290de..63c51c1733 100644
--- a/src/panels/config/js/trigger/index.js
+++ b/src/panels/config/js/trigger/index.js
@@ -1,6 +1,6 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card";
 import "@material/mwc-button";
+import "../../../../components/ha-card";
 
 import TriggerRow from "./trigger_row";
 import StateTrigger from "./state";
@@ -45,13 +45,13 @@ export default class Trigger extends Component {
             localize={localize}
           />
         ))}
-        <paper-card>
+        <ha-card>
           <div class="card-actions add-card">
             <mwc-button onTap={this.addTrigger}>
               {localize("ui.panel.config.automation.editor.triggers.add")}
             </mwc-button>
           </div>
-        </paper-card>
+        </ha-card>
       </div>
     );
   }
diff --git a/src/panels/config/js/trigger/trigger_row.js b/src/panels/config/js/trigger/trigger_row.js
index 13f3a542de..3cb123402f 100644
--- a/src/panels/config/js/trigger/trigger_row.js
+++ b/src/panels/config/js/trigger/trigger_row.js
@@ -1,9 +1,9 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-menu-button/paper-menu-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
+import "../../../../components/ha-card";
 
 import TriggerEdit from "./trigger_edit";
 
@@ -29,36 +29,36 @@ export default class TriggerRow extends Component {
 
   render(props) {
     return (
-      <paper-card>
-        <div class="card-menu">
-          <paper-menu-button
-            no-animations
-            horizontal-align="right"
-            horizontal-offset="-5"
-            vertical-offset="-5"
-          >
-            <paper-icon-button
-              icon="hass:dots-vertical"
-              slot="dropdown-trigger"
-            />
-            <paper-listbox slot="dropdown-content">
-              <paper-item disabled>
-                {props.localize(
-                  "ui.panel.config.automation.editor.triggers.duplicate"
-                )}
-              </paper-item>
-              <paper-item onTap={this.onDelete}>
-                {props.localize(
-                  "ui.panel.config.automation.editor.triggers.delete"
-                )}
-              </paper-item>
-            </paper-listbox>
-          </paper-menu-button>
-        </div>
+      <ha-card>
         <div class="card-content">
+          <div class="card-menu">
+            <paper-menu-button
+              no-animations
+              horizontal-align="right"
+              horizontal-offset="-5"
+              vertical-offset="-5"
+            >
+              <paper-icon-button
+                icon="hass:dots-vertical"
+                slot="dropdown-trigger"
+              />
+              <paper-listbox slot="dropdown-content">
+                <paper-item disabled>
+                  {props.localize(
+                    "ui.panel.config.automation.editor.triggers.duplicate"
+                  )}
+                </paper-item>
+                <paper-item onTap={this.onDelete}>
+                  {props.localize(
+                    "ui.panel.config.automation.editor.triggers.delete"
+                  )}
+                </paper-item>
+              </paper-listbox>
+            </paper-menu-button>
+          </div>
           <TriggerEdit {...props} />
         </div>
-      </paper-card>
+      </ha-card>
     );
   }
 }
diff --git a/src/panels/config/person/ha-config-person.ts b/src/panels/config/person/ha-config-person.ts
index 470e9de8b5..402aa2f29d 100644
--- a/src/panels/config/person/ha-config-person.ts
+++ b/src/panels/config/person/ha-config-person.ts
@@ -8,7 +8,6 @@ import {
 } from "lit-element";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-fab/paper-fab";
 
 import { HomeAssistant } from "../../../types";
@@ -19,9 +18,10 @@ import {
   deletePerson,
   createPerson,
 } from "../../../data/person";
+import "../../../components/ha-card";
 import "../../../layouts/hass-subpage";
 import "../../../layouts/hass-loading-screen";
-import compare from "../../../common/string/compare";
+import { compare } from "../../../common/string/compare";
 import "../ha-config-section";
 import {
   showPersonDetailDialog,
@@ -70,7 +70,7 @@ class HaConfigPerson extends LitElement {
                 `
               : ""}
           </span>
-          <paper-card class="storage">
+          <ha-card class="storage">
             ${this._storageItems.map((entry) => {
               return html`
                 <paper-item @click=${this._openEditEntry} .entry=${entry}>
@@ -90,10 +90,10 @@ class HaConfigPerson extends LitElement {
                   </div>
                 `
               : html``}
-          </paper-card>
+          </ha-card>
           ${this._configItems.length > 0
             ? html`
-                <paper-card heading="Configuration.yaml persons">
+                <ha-card header="Configuration.yaml persons">
                   ${this._configItems.map((entry) => {
                     return html`
                       <paper-item>
@@ -103,7 +103,7 @@ class HaConfigPerson extends LitElement {
                       </paper-item>
                     `;
                   })}
-                </paper-card>
+                </ha-card>
               `
             : ""}
         </ha-config-section>
@@ -205,10 +205,10 @@ All devices belonging to this person will become unassigned.`)
       a {
         color: var(--primary-color);
       }
-      paper-card {
-        display: block;
+      ha-card {
         max-width: 600px;
         margin: 16px auto;
+        overflow: hidden;
       }
       .empty {
         text-align: center;
@@ -218,7 +218,7 @@ All devices belonging to this person will become unassigned.`)
         padding-top: 4px;
         padding-bottom: 4px;
       }
-      paper-card.storage paper-item {
+      ha-card.storage paper-item {
         cursor: pointer;
       }
       paper-fab {
diff --git a/src/panels/config/script/ha-script-editor.js b/src/panels/config/script/ha-script-editor.js
index e0a9794971..bf1d016f9f 100644
--- a/src/panels/config/script/ha-script-editor.js
+++ b/src/panels/config/script/ha-script-editor.js
@@ -39,15 +39,12 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
         .content {
           padding-bottom: 20px;
         }
-        paper-card {
-          display: block;
-        }
         .triggers,
         .script {
           margin-top: -16px;
         }
-        .triggers paper-card,
-        .script paper-card {
+        .triggers ha-card,
+        .script ha-card {
           margin-top: 16px;
         }
         .add-card mwc-button {
diff --git a/src/panels/config/script/ha-script-picker.js b/src/panels/config/script/ha-script-picker.js
index 6f4b52820d..71d3b09358 100644
--- a/src/panels/config/script/ha-script-picker.js
+++ b/src/panels/config/script/ha-script-picker.js
@@ -1,6 +1,5 @@
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-fab/paper-fab";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item-body";
@@ -11,6 +10,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { computeRTL } from "../../../common/util/compute_rtl";
 
 import "../../../layouts/ha-app-layout";
+import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-paper-icon-button-arrow-prev";
 
@@ -32,6 +32,10 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
           display: block;
         }
 
+        ha-card {
+          overflow: hidden;
+        }
+
         paper-item {
           cursor: pointer;
         }
@@ -88,7 +92,7 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
             to make sure that you have configured Home Assistant correctly.
           </div>
 
-          <paper-card heading="Pick script to edit">
+          <ha-card header="Pick script to edit">
             <template is="dom-if" if="[[!scripts.length]]">
               <div class="card-content">
                 <p>We couldn't find any editable scripts.</p>
@@ -103,7 +107,7 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
                 <ha-icon-next></ha-icon-next>
               </paper-item>
             </template>
-          </paper-card>
+          </ha-card>
         </ha-config-section>
 
         <paper-fab
diff --git a/src/panels/config/users/ha-config-user-picker.js b/src/panels/config/users/ha-config-user-picker.js
index 356ad9169f..ffaaa47327 100644
--- a/src/panels/config/users/ha-config-user-picker.js
+++ b/src/panels/config/users/ha-config-user-picker.js
@@ -1,16 +1,16 @@
 import "@polymer/paper-fab/paper-fab";
 import "@polymer/paper-item/paper-item";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item-body";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../layouts/hass-subpage";
 import "../../../components/ha-icon-next";
+import "../../../components/ha-card";
 
 import LocalizeMixin from "../../../mixins/localize-mixin";
 import NavigateMixin from "../../../mixins/navigate-mixin";
-import EventsMixin from "../../../mixins/events-mixin";
+import { EventsMixin } from "../../../mixins/events-mixin";
 
 import { computeRTL } from "../../../common/util/compute_rtl";
 
@@ -47,10 +47,10 @@ class HaUserPicker extends EventsMixin(
           left: 24px;
         }
 
-        paper-card {
-          display: block;
+        ha-card {
           max-width: 600px;
           margin: 16px auto;
+          overflow: hidden;
         }
         a {
           text-decoration: none;
@@ -59,7 +59,7 @@ class HaUserPicker extends EventsMixin(
       </style>
 
       <hass-subpage header="[[localize('ui.panel.config.users.picker.title')]]">
-        <paper-card>
+        <ha-card>
           <template is="dom-repeat" items="[[users]]" as="user">
             <a href="[[_computeUrl(user)]]">
               <paper-item>
@@ -76,7 +76,7 @@ class HaUserPicker extends EventsMixin(
               </paper-item>
             </a>
           </template>
-        </paper-card>
+        </ha-card>
 
         <paper-fab
           is-wide$="[[isWide]]"
diff --git a/src/panels/config/users/ha-user-editor.ts b/src/panels/config/users/ha-user-editor.ts
index 245902d84f..eb4686f31e 100644
--- a/src/panels/config/users/ha-user-editor.ts
+++ b/src/panels/config/users/ha-user-editor.ts
@@ -176,23 +176,15 @@ class HaUserEditor extends LitElement {
     return [
       haStyle,
       css`
+        .card-actions {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
         ha-card {
-          display: block;
           max-width: 600px;
           margin: 0 auto 16px;
         }
-        ha-card:first-child {
-          margin-top: 16px;
-        }
-        ha-card:last-child {
-          margin-bottom: 16px;
-        }
-        .card-content {
-          padding: 0 16px 16px;
-        }
-        .card-actions {
-          padding: 0 8px;
-        }
         hass-subpage ha-card:first-of-type {
           direction: ltr;
         }
diff --git a/src/panels/config/zha/zha-device-card.ts b/src/panels/config/zha/zha-device-card.ts
index 51f8f41480..791234564e 100644
--- a/src/panels/config/zha/zha-device-card.ts
+++ b/src/panels/config/zha/zha-device-card.ts
@@ -22,10 +22,9 @@ import {
 } from "lit-element";
 
 import { fireEvent } from "../../../common/dom/fire_event";
-import compare from "../../../common/string/compare";
 import {
   AreaRegistryEntry,
-  fetchAreaRegistry,
+  subscribeAreaRegistry,
 } from "../../../data/area_registry";
 import {
   DeviceRegistryEntryMutableParams,
@@ -36,6 +35,7 @@ import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { ItemSelectedEvent, NodeServiceData } from "./types";
 import { navigate } from "../../../common/navigate";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
 
 declare global {
   // for fire event
@@ -48,7 +48,7 @@ declare global {
 
 @customElement("zha-device-card")
 class ZHADeviceCard extends LitElement {
-  @property() public hass?: HomeAssistant;
+  @property() public hass!: HomeAssistant;
   @property() public narrow?: boolean;
   @property() public device?: ZHADevice;
   @property() public showHelp: boolean = false;
@@ -58,8 +58,16 @@ class ZHADeviceCard extends LitElement {
   @property() private _areas: AreaRegistryEntry[] = [];
   @property() private _selectedAreaIndex: number = -1;
   @property() private _userGivenName?: string;
+  private _unsubAreas?: UnsubscribeFunc;
 
-  public firstUpdated(changedProperties: PropertyValues): void {
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._unsubAreas) {
+      this._unsubAreas();
+    }
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues): void {
     super.firstUpdated(changedProperties);
     this.addEventListener("hass-service-called", (ev) =>
       this.serviceCalled(ev)
@@ -67,9 +75,6 @@ class ZHADeviceCard extends LitElement {
     this._serviceData = {
       ieee_address: this.device!.ieee,
     };
-    fetchAreaRegistry(this.hass!).then((areas) => {
-      this._areas = areas.sort((a, b) => compare(a.name, b.name));
-    });
   }
 
   protected updated(changedProperties: PropertyValues): void {
@@ -84,6 +89,11 @@ class ZHADeviceCard extends LitElement {
       }
       this._userGivenName = this.device!.user_given_name;
     }
+    if (!this._unsubAreas) {
+      this._unsubAreas = subscribeAreaRegistry(this.hass, (areas) => {
+        this._areas = areas;
+      });
+    }
     super.update(changedProperties);
   }
 
diff --git a/src/panels/config/zwave/ha-config-zwave.js b/src/panels/config/zwave/ha-config-zwave.js
index 81f536dfb4..ed2a6c41fa 100644
--- a/src/panels/config/zwave/ha-config-zwave.js
+++ b/src/panels/config/zwave/ha-config-zwave.js
@@ -29,7 +29,7 @@ import "./zwave-node-protection";
 import sortByName from "../../../common/entity/states_sort_by_name";
 import computeStateName from "../../../common/entity/compute_state_name";
 import computeStateDomain from "../../../common/entity/compute_state_domain";
-import EventsMixin from "../../../mixins/events-mixin";
+import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 
 /*
diff --git a/src/panels/config/zwave/zwave-log-dialog.js b/src/panels/config/zwave/zwave-log-dialog.js
index f99925e367..c85617702e 100644
--- a/src/panels/config/zwave/zwave-log-dialog.js
+++ b/src/panels/config/zwave/zwave-log-dialog.js
@@ -5,7 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../components/dialog/ha-paper-dialog";
 import "../../../resources/ha-style";
 
-import EventsMixin from "../../../mixins/events-mixin";
+import { EventsMixin } from "../../../mixins/events-mixin";
 
 class ZwaveLogDialog extends EventsMixin(PolymerElement) {
   static get template() {
diff --git a/src/panels/config/zwave/zwave-log.js b/src/panels/config/zwave/zwave-log.js
index 716d962812..0eb0cb54b8 100644
--- a/src/panels/config/zwave/zwave-log.js
+++ b/src/panels/config/zwave/zwave-log.js
@@ -4,7 +4,7 @@ import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import EventsMixin from "../../../mixins/events-mixin";
+import { EventsMixin } from "../../../mixins/events-mixin";
 import isPwa from "../../../common/config/is_pwa";
 
 import "../ha-config-section";
diff --git a/src/panels/dev-event/events-list.js b/src/panels/dev-event/events-list.js
index fa1b17d767..f27d9bd929 100644
--- a/src/panels/dev-event/events-list.js
+++ b/src/panels/dev-event/events-list.js
@@ -1,7 +1,7 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../../mixins/events-mixin";
+import { EventsMixin } from "../../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/panels/dev-event/ha-panel-dev-event.js b/src/panels/dev-event/ha-panel-dev-event.js
index dfaa8cbb76..d5cc9d9551 100644
--- a/src/panels/dev-event/ha-panel-dev-event.js
+++ b/src/panels/dev-event/ha-panel-dev-event.js
@@ -12,7 +12,7 @@ import "../../components/ha-menu-button";
 import "../../resources/ha-style";
 import "./events-list";
 import "./event-subscribe-card";
-import EventsMixin from "../../mixins/events-mixin";
+import { EventsMixin } from "../../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/panels/dev-info/ha-panel-dev-info.ts b/src/panels/dev-info/ha-panel-dev-info.ts
index 798b72d93b..54348807f1 100644
--- a/src/panels/dev-info/ha-panel-dev-info.ts
+++ b/src/panels/dev-info/ha-panel-dev-info.ts
@@ -64,7 +64,7 @@ class HaPanelDevInfo extends LitElement {
         <div class="content">
           <div class="about">
             <p class="version">
-              <a href="https://www.home-assistant.io"
+              <a href="https://www.home-assistant.io" target="_blank"
                 ><img src="/static/icons/favicon-192x192.png" height="192"/></a
               ><br />
               Home Assistant<br />
diff --git a/src/panels/dev-state/ha-panel-dev-state.js b/src/panels/dev-state/ha-panel-dev-state.js
index 559081448f..fc328a4f9b 100644
--- a/src/panels/dev-state/ha-panel-dev-state.js
+++ b/src/panels/dev-state/ha-panel-dev-state.js
@@ -11,7 +11,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../components/entity/ha-entity-picker";
 import "../../components/ha-menu-button";
 import "../../resources/ha-style";
-import EventsMixin from "../../mixins/events-mixin";
+import { EventsMixin } from "../../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/panels/logbook/ha-logbook.js b/src/panels/logbook/ha-logbook.js
index 1c30cfe6b1..4322140249 100644
--- a/src/panels/logbook/ha-logbook.js
+++ b/src/panels/logbook/ha-logbook.js
@@ -5,7 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import formatTime from "../../common/datetime/format_time";
 import formatDate from "../../common/datetime/format_date";
-import EventsMixin from "../../mixins/events-mixin";
+import { EventsMixin } from "../../mixins/events-mixin";
 import domainIcon from "../../common/entity/domain_icon";
 import { computeRTL } from "../../common/util/compute_rtl";
 
diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts
index 0e7ca75f1b..c1d4825e20 100644
--- a/src/panels/lovelace/cards/hui-entities-card.ts
+++ b/src/panels/lovelace/cards/hui-entities-card.ts
@@ -89,7 +89,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
         ${!title && !show_header_toggle
           ? html``
           : html`
-              <div class="header" slot="header">
+              <div class="card-header">
                 <div class="name">${title}</div>
                 ${show_header_toggle === false
                   ? html``
@@ -103,7 +103,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
                     `}
               </div>
             `}
-        <div id="states">
+        <div id="states" class="card-content">
           ${this._configEntities!.map((entityConf) =>
             this.renderEntity(entityConf)
           )}
@@ -114,8 +114,19 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
 
   static get styles(): CSSResult {
     return css`
-      #states {
-        padding: 12px 16px;
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .card-header .name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .card-header hui-entities-toggle {
+        margin: -4px 0;
       }
 
       #states > * {
@@ -126,19 +137,6 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
         overflow: hidden;
       }
 
-      .header {
-        margin-bottom: -8px;
-        padding-bottom: 0px;
-        display: flex;
-        justify-content: space-between;
-      }
-
-      .header .name {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
       .state-card-dialog {
         cursor: pointer;
       }
diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts
index 227304da45..cc6db16db0 100644
--- a/src/panels/lovelace/cards/hui-map-card.ts
+++ b/src/panels/lovelace/cards/hui-map-card.ts
@@ -19,7 +19,7 @@ import {
 } from "../../../common/dom/setup-leaflet-map";
 import computeStateDomain from "../../../common/entity/compute_state_domain";
 import computeStateName from "../../../common/entity/compute_state_name";
-import debounce from "../../../common/util/debounce";
+import { debounce } from "../../../common/util/debounce";
 import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
 import computeDomain from "../../../common/entity/compute_domain";
 
diff --git a/src/panels/lovelace/components/hui-entities-toggle.ts b/src/panels/lovelace/components/hui-entities-toggle.ts
index 88927f1535..b135cd854e 100644
--- a/src/panels/lovelace/components/hui-entities-toggle.ts
+++ b/src/panels/lovelace/components/hui-entities-toggle.ts
@@ -13,7 +13,7 @@ import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-tog
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { turnOnOffEntities } from "../common/entity/turn-on-off-entities";
 import { HomeAssistant } from "../../../types";
-import { forwardHaptic } from "../../../util/haptics";
+import { forwardHaptic } from "../../../data/haptics";
 
 @customElement("hui-entities-toggle")
 class HuiEntitiesToggle extends LitElement {
@@ -66,7 +66,7 @@ class HuiEntitiesToggle extends LitElement {
   }
 
   private _callService(ev: MouseEvent): void {
-    forwardHaptic(this, "light");
+    forwardHaptic("light");
     const turnOn = (ev.target as PaperToggleButtonElement).checked;
     turnOnOffEntities(this.hass!, this._toggleEntities!, turnOn!);
   }
diff --git a/src/panels/lovelace/components/notifications/hui-notification-drawer.js b/src/panels/lovelace/components/notifications/hui-notification-drawer.js
index 4cb33646f4..a77d6c4165 100644
--- a/src/panels/lovelace/components/notifications/hui-notification-drawer.js
+++ b/src/panels/lovelace/components/notifications/hui-notification-drawer.js
@@ -8,7 +8,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "./hui-notification-item";
 import "../../../../components/ha-paper-icon-button-next";
 
-import EventsMixin from "../../../../mixins/events-mixin";
+import { EventsMixin } from "../../../../mixins/events-mixin";
 import LocalizeMixin from "../../../../mixins/localize-mixin";
 import { computeRTL } from "../../../../common/util/compute_rtl";
 
diff --git a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
index 3568196454..ef4ac3f22c 100644
--- a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
@@ -21,7 +21,7 @@ import { HomeAssistant, InputSelectEntity } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 import { setInputSelectOption } from "../../../data/input-select";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
-import { forwardHaptic } from "../../../util/haptics";
+import { forwardHaptic } from "../../../data/haptics";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 
 @customElement("hui-input-select-entity-row")
@@ -128,7 +128,7 @@ class HuiInputSelectEntityRow extends LitElement implements EntityRow {
       return;
     }
 
-    forwardHaptic(this, "light");
+    forwardHaptic("light");
 
     setInputSelectOption(
       this.hass!,
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 60a32a1297..4dfbad5940 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -31,7 +31,7 @@ import "../../components/ha-paper-icon-button-arrow-prev";
 import "../../components/ha-icon";
 import { loadModule, loadCSS, loadJS } from "../../common/dom/load_resource";
 import { subscribeNotifications } from "../../data/ws-notifications";
-import debounce from "../../common/util/debounce";
+import { debounce } from "../../common/util/debounce";
 import { HomeAssistant } from "../../types";
 import { LovelaceConfig } from "../../data/lovelace";
 import { navigate } from "../../common/navigate";
diff --git a/src/panels/mailbox/ha-panel-mailbox.js b/src/panels/mailbox/ha-panel-mailbox.js
index 456270de21..d2f4310b04 100644
--- a/src/panels/mailbox/ha-panel-mailbox.js
+++ b/src/panels/mailbox/ha-panel-mailbox.js
@@ -16,7 +16,7 @@ import "../../resources/ha-style";
 
 import formatDateTime from "../../common/datetime/format_date_time";
 import LocalizeMixin from "../../mixins/localize-mixin";
-import EventsMixin from "../../mixins/events-mixin";
+import { EventsMixin } from "../../mixins/events-mixin";
 
 let registeredDialog = false;
 
diff --git a/src/panels/map/ha-entity-marker.js b/src/panels/map/ha-entity-marker.js
index 18f853d4b6..7d888519e5 100644
--- a/src/panels/map/ha-entity-marker.js
+++ b/src/panels/map/ha-entity-marker.js
@@ -2,7 +2,7 @@ import "@polymer/iron-image/iron-image";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../../mixins/events-mixin";
+import { EventsMixin } from "../../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/panels/profile/ha-long-lived-access-tokens-card.js b/src/panels/profile/ha-long-lived-access-tokens-card.js
index 3a582d993f..4a1a7215c0 100644
--- a/src/panels/profile/ha-long-lived-access-tokens-card.js
+++ b/src/panels/profile/ha-long-lived-access-tokens-card.js
@@ -2,7 +2,7 @@ import "@material/mwc-button";
 
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import EventsMixin from "../../mixins/events-mixin";
+import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
 import formatDateTime from "../../common/datetime/format_date_time";
 
diff --git a/src/panels/profile/ha-mfa-module-setup-flow.js b/src/panels/profile/ha-mfa-module-setup-flow.js
index cee65656a5..8f9081fcca 100644
--- a/src/panels/profile/ha-mfa-module-setup-flow.js
+++ b/src/panels/profile/ha-mfa-module-setup-flow.js
@@ -9,7 +9,7 @@ import "../../components/ha-form";
 import "../../components/ha-markdown";
 import "../../resources/ha-style";
 
-import EventsMixin from "../../mixins/events-mixin";
+import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
 
 let instance = 0;
diff --git a/src/panels/profile/ha-mfa-modules-card.js b/src/panels/profile/ha-mfa-modules-card.js
index f791f200ef..8527e19d54 100644
--- a/src/panels/profile/ha-mfa-modules-card.js
+++ b/src/panels/profile/ha-mfa-modules-card.js
@@ -7,7 +7,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../resources/ha-style";
 
-import EventsMixin from "../../mixins/events-mixin";
+import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
 
 let registeredDialog = false;
diff --git a/src/panels/profile/ha-panel-profile.js b/src/panels/profile/ha-panel-profile.js
index 8e8c159054..1157b9346b 100644
--- a/src/panels/profile/ha-panel-profile.js
+++ b/src/panels/profile/ha-panel-profile.js
@@ -11,7 +11,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../components/ha-menu-button";
 import "../../resources/ha-style";
 
-import EventsMixin from "../../mixins/events-mixin";
+import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
 
 import "./ha-change-password-card";
diff --git a/src/panels/profile/ha-pick-language-row.js b/src/panels/profile/ha-pick-language-row.js
index e0c678383c..7206732f4e 100644
--- a/src/panels/profile/ha-pick-language-row.js
+++ b/src/panels/profile/ha-pick-language-row.js
@@ -6,7 +6,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../components/ha-paper-dropdown-menu";
 
-import EventsMixin from "../../mixins/events-mixin";
+import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
 
 import "./ha-settings-row";
diff --git a/src/panels/profile/ha-pick-theme-row.js b/src/panels/profile/ha-pick-theme-row.js
index 1aaa45a863..8657a0915b 100644
--- a/src/panels/profile/ha-pick-theme-row.js
+++ b/src/panels/profile/ha-pick-theme-row.js
@@ -6,7 +6,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../components/ha-paper-dropdown-menu";
 
-import EventsMixin from "../../mixins/events-mixin";
+import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
 
 /*
diff --git a/src/panels/profile/ha-refresh-tokens-card.js b/src/panels/profile/ha-refresh-tokens-card.js
index 48a9b5e34e..74af8c560f 100644
--- a/src/panels/profile/ha-refresh-tokens-card.js
+++ b/src/panels/profile/ha-refresh-tokens-card.js
@@ -3,7 +3,7 @@ import "@polymer/paper-tooltip/paper-tooltip";
 
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import EventsMixin from "../../mixins/events-mixin";
+import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
 import formatDateTime from "../../common/datetime/format_date_time";
 
diff --git a/src/panels/states/ha-panel-states.js b/src/panels/states/ha-panel-states.js
index 301ab0abe4..a4ee98091f 100644
--- a/src/panels/states/ha-panel-states.js
+++ b/src/panels/states/ha-panel-states.js
@@ -22,7 +22,7 @@ import computeStateName from "../../common/entity/compute_state_name";
 import computeStateDomain from "../../common/entity/compute_state_domain";
 import computeLocationName from "../../common/config/location_name";
 import NavigateMixin from "../../mixins/navigate-mixin";
-import EventsMixin from "../../mixins/events-mixin";
+import { EventsMixin } from "../../mixins/events-mixin";
 
 const DEFAULT_VIEW_ENTITY_ID = "group.default_view";
 const ALWAYS_SHOW_DOMAIN = ["persistent_notification", "configurator"];
diff --git a/src/resources/translations-metadata.ts b/src/resources/translations-metadata.ts
index 31cb0c157f..0957a46cbc 100644
--- a/src/resources/translations-metadata.ts
+++ b/src/resources/translations-metadata.ts
@@ -1,16 +1,5 @@
 import * as translationMetadata_ from "../../build-translations/translationMetadata.json";
-
-interface TranslationMetadata {
-  fragments: string[];
-  translations: {
-    [language: string]: {
-      nativeName: string;
-      fingerprints: {
-        [filename: string]: string;
-      };
-    };
-  };
-}
+import { TranslationMetadata } from "../types.js";
 
 export const translationMetadata = (translationMetadata_ as any)
   .default as TranslationMetadata;
diff --git a/src/layouts/app/auth-mixin.ts b/src/state/auth-mixin.ts
similarity index 86%
rename from src/layouts/app/auth-mixin.ts
rename to src/state/auth-mixin.ts
index 2fa5d3bf1f..c97730ac3f 100644
--- a/src/layouts/app/auth-mixin.ts
+++ b/src/state/auth-mixin.ts
@@ -1,6 +1,6 @@
-import { clearState } from "../../util/ha-pref-storage";
-import { askWrite } from "../../common/auth/token_storage";
-import { subscribeUser, userCollection } from "../../data/ws-user";
+import { clearState } from "../util/ha-pref-storage";
+import { askWrite } from "../common/auth/token_storage";
+import { subscribeUser, userCollection } from "../data/ws-user";
 import { Constructor, LitElement } from "lit-element";
 import { HassBaseEl } from "./hass-base-mixin";
 
@@ -30,7 +30,7 @@ export default (superClass: Constructor<LitElement & HassBaseEl>) =>
       if (askWrite()) {
         this.updateComplete
           .then(() =>
-            import(/* webpackChunkName: "ha-store-auth-card" */ "../../dialogs/ha-store-auth-card")
+            import(/* webpackChunkName: "ha-store-auth-card" */ "../dialogs/ha-store-auth-card")
           )
           .then(() => {
             const el = document.createElement("ha-store-auth-card");
diff --git a/src/state/connection-mixin.ts b/src/state/connection-mixin.ts
new file mode 100644
index 0000000000..dcf34e1aab
--- /dev/null
+++ b/src/state/connection-mixin.ts
@@ -0,0 +1,150 @@
+import {
+  ERR_INVALID_AUTH,
+  subscribeEntities,
+  subscribeConfig,
+  subscribeServices,
+  callService,
+  Auth,
+  Connection,
+} from "home-assistant-js-websocket";
+
+import { translationMetadata } from "../resources/translations-metadata";
+
+import { getState } from "../util/ha-pref-storage";
+import { getLocalLanguage } from "../util/hass-translation";
+import { fetchWithAuth } from "../util/fetch-with-auth";
+import hassCallApi from "../util/hass-call-api";
+import { subscribePanels } from "../data/ws-panels";
+import { forwardHaptic } from "../data/haptics";
+import { fireEvent } from "../common/dom/fire_event";
+import { Constructor, LitElement } from "lit-element";
+import { HassBaseEl } from "./hass-base-mixin";
+import { broadcastConnectionStatus } from "../data/connection-status";
+
+export const connectionMixin = (
+  superClass: Constructor<LitElement & HassBaseEl>
+) =>
+  class extends superClass {
+    protected initializeHass(auth: Auth, conn: Connection) {
+      this.hass = {
+        auth,
+        connection: conn,
+        connected: true,
+        states: null as any,
+        config: null as any,
+        themes: null as any,
+        panels: null as any,
+        services: null as any,
+        user: null as any,
+        panelUrl: (this as any)._panelUrl,
+
+        language: getLocalLanguage(),
+        selectedLanguage: null,
+        resources: null as any,
+        localize: () => "",
+
+        translationMetadata,
+        dockedSidebar: false,
+        moreInfoEntityId: null,
+        callService: async (domain, service, serviceData = {}) => {
+          if (__DEV__) {
+            // tslint:disable-next-line: no-console
+            console.log("Calling service", domain, service, serviceData);
+          }
+          try {
+            await callService(conn, domain, service, serviceData);
+          } catch (err) {
+            if (__DEV__) {
+              // tslint:disable-next-line: no-console
+              console.error(
+                "Error calling service",
+                domain,
+                service,
+                serviceData,
+                err
+              );
+            }
+            forwardHaptic("failure");
+            const message =
+              (this as any).hass.localize(
+                "ui.notification_toast.service_call_failed",
+                "service",
+                `${domain}/${service}`
+              ) + ` ${err.message}`;
+            fireEvent(this as any, "hass-notification", { message });
+            throw err;
+          }
+        },
+        callApi: async (method, path, parameters) =>
+          hassCallApi(auth, method, path, parameters),
+        fetchWithAuth: (path, init) =>
+          fetchWithAuth(auth, `${auth.data.hassUrl}${path}`, init),
+        // For messages that do not get a response
+        sendWS: (msg) => {
+          if (__DEV__) {
+            // tslint:disable-next-line: no-console
+            console.log("Sending", msg);
+          }
+          conn.sendMessage(msg);
+        },
+        // For messages that expect a response
+        callWS: <T>(msg) => {
+          if (__DEV__) {
+            // tslint:disable-next-line: no-console
+            console.log("Sending", msg);
+          }
+
+          const resp = conn.sendMessagePromise<T>(msg);
+
+          if (__DEV__) {
+            resp.then(
+              // tslint:disable-next-line: no-console
+              (result) => console.log("Received", result),
+              // tslint:disable-next-line: no-console
+              (err) => console.error("Error", err)
+            );
+          }
+          return resp;
+        },
+        ...getState(),
+        ...this._pendingHass,
+      };
+
+      this.hassConnected();
+    }
+
+    protected hassConnected() {
+      super.hassConnected();
+
+      const conn = this.hass!.connection;
+
+      broadcastConnectionStatus("connected");
+
+      conn.addEventListener("ready", () => this.hassReconnected());
+      conn.addEventListener("disconnected", () => this.hassDisconnected());
+      // If we reconnect after losing connection and auth is no longer valid.
+      conn.addEventListener("reconnect-error", (_conn, err) => {
+        if (err === ERR_INVALID_AUTH) {
+          broadcastConnectionStatus("auth-invalid");
+          location.reload();
+        }
+      });
+
+      subscribeEntities(conn, (states) => this._updateHass({ states }));
+      subscribeConfig(conn, (config) => this._updateHass({ config }));
+      subscribeServices(conn, (services) => this._updateHass({ services }));
+      subscribePanels(conn, (panels) => this._updateHass({ panels }));
+    }
+
+    protected hassReconnected() {
+      super.hassReconnected();
+      this._updateHass({ connected: true });
+      broadcastConnectionStatus("connected");
+    }
+
+    protected hassDisconnected() {
+      super.hassDisconnected();
+      this._updateHass({ connected: false });
+      broadcastConnectionStatus("disconnected");
+    }
+  };
diff --git a/src/layouts/app/dialog-manager-mixin.ts b/src/state/dialog-manager-mixin.ts
similarity index 89%
rename from src/layouts/app/dialog-manager-mixin.ts
rename to src/state/dialog-manager-mixin.ts
index b260703d89..5fcae876a3 100644
--- a/src/layouts/app/dialog-manager-mixin.ts
+++ b/src/state/dialog-manager-mixin.ts
@@ -1,10 +1,7 @@
 import { Constructor, LitElement } from "lit-element";
-import { HASSDomEvent } from "../../common/dom/fire_event";
+import { HASSDomEvent } from "../common/dom/fire_event";
 import { HassBaseEl } from "./hass-base-mixin";
-import {
-  makeDialogManager,
-  showDialog,
-} from "../../dialogs/make-dialog-manager";
+import { makeDialogManager, showDialog } from "../dialogs/make-dialog-manager";
 
 interface RegisterDialogParams {
   dialogShowEvent: keyof HASSDomEvents;
diff --git a/src/layouts/app/disconnect-toast-mixin.ts b/src/state/disconnect-toast-mixin.ts
similarity index 84%
rename from src/layouts/app/disconnect-toast-mixin.ts
rename to src/state/disconnect-toast-mixin.ts
index 2905ed40f6..853fa3f392 100644
--- a/src/layouts/app/disconnect-toast-mixin.ts
+++ b/src/state/disconnect-toast-mixin.ts
@@ -1,7 +1,7 @@
 import { Constructor, LitElement } from "lit-element";
 import { HassBaseEl } from "./hass-base-mixin";
-import { HaToast } from "../../components/ha-toast";
-import { computeRTL } from "../../common/util/compute_rtl";
+import { HaToast } from "../components/ha-toast";
+import { computeRTL } from "../common/util/compute_rtl";
 
 export default (superClass: Constructor<LitElement & HassBaseEl>) =>
   class extends superClass {
@@ -10,7 +10,7 @@ export default (superClass: Constructor<LitElement & HassBaseEl>) =>
     protected firstUpdated(changedProps) {
       super.firstUpdated(changedProps);
       // Need to load in advance because when disconnected, can't dynamically load code.
-      import(/* webpackChunkName: "ha-toast" */ "../../components/ha-toast");
+      import(/* webpackChunkName: "ha-toast" */ "../components/ha-toast");
     }
 
     protected hassReconnected() {
diff --git a/src/layouts/app/hass-base-mixin.ts b/src/state/hass-base-mixin.ts
similarity index 75%
rename from src/layouts/app/hass-base-mixin.ts
rename to src/state/hass-base-mixin.ts
index 9ef1d7034d..f41d6752d2 100644
--- a/src/layouts/app/hass-base-mixin.ts
+++ b/src/state/hass-base-mixin.ts
@@ -3,12 +3,15 @@ import {
   // @ts-ignore
   property,
 } from "lit-element";
-import { HomeAssistant } from "../../types";
+import { Auth, Connection } from "home-assistant-js-websocket";
+import { HomeAssistant } from "../types";
 
 /* tslint:disable */
 
 export class HassBaseEl {
   protected hass?: HomeAssistant;
+  protected _pendingHass: Partial<HomeAssistant> = {};
+  protected initializeHass(_auth: Auth, _conn: Connection) {}
   protected hassConnected() {}
   protected hassReconnected() {}
   protected hassDisconnected() {}
@@ -21,6 +24,7 @@ export class HassBaseEl {
 export default <T>(superClass: Constructor<T>): Constructor<T & HassBaseEl> =>
   // @ts-ignore
   class extends superClass {
+    protected _pendingHass: Partial<HomeAssistant> = {};
     private __provideHass: HTMLElement[] = [];
     // @ts-ignore
     @property() protected hass: HomeAssistant;
@@ -53,7 +57,11 @@ export default <T>(superClass: Constructor<T>): Constructor<T & HassBaseEl> =>
       el.hass = this.hass;
     }
 
-    protected async _updateHass(obj) {
+    protected async _updateHass(obj: Partial<HomeAssistant>) {
+      if (!this.hass) {
+        this._pendingHass = { ...this._pendingHass, ...obj };
+        return;
+      }
       this.hass = { ...this.hass, ...obj };
     }
   };
diff --git a/src/state/hass-element.ts b/src/state/hass-element.ts
new file mode 100644
index 0000000000..c837aafecf
--- /dev/null
+++ b/src/state/hass-element.ts
@@ -0,0 +1,28 @@
+import HassBaseMixin from "./hass-base-mixin";
+import AuthMixin from "./auth-mixin";
+import TranslationsMixin from "./translations-mixin";
+import ThemesMixin from "./themes-mixin";
+import MoreInfoMixin from "./more-info-mixin";
+import SidebarMixin from "./sidebar-mixin";
+import { dialogManagerMixin } from "./dialog-manager-mixin";
+import { connectionMixin } from "./connection-mixin";
+import NotificationMixin from "./notification-mixin";
+import DisconnectToastMixin from "./disconnect-toast-mixin";
+import { urlSyncMixin } from "./url-sync-mixin";
+import { LitElement } from "lit-element";
+
+const ext = <T>(baseClass: T, mixins): T =>
+  mixins.reduceRight((base, mixin) => mixin(base), baseClass);
+
+export class HassElement extends ext(HassBaseMixin(LitElement), [
+  AuthMixin,
+  ThemesMixin,
+  TranslationsMixin,
+  MoreInfoMixin,
+  SidebarMixin,
+  DisconnectToastMixin,
+  connectionMixin,
+  NotificationMixin,
+  dialogManagerMixin,
+  urlSyncMixin,
+]) {}
diff --git a/src/layouts/app/more-info-mixin.ts b/src/state/more-info-mixin.ts
similarity index 90%
rename from src/layouts/app/more-info-mixin.ts
rename to src/state/more-info-mixin.ts
index 66c442cf90..9cd8a12939 100644
--- a/src/layouts/app/more-info-mixin.ts
+++ b/src/state/more-info-mixin.ts
@@ -20,7 +20,7 @@ export default (superClass: Constructor<LitElement & HassBaseEl>) =>
       this.addEventListener("hass-more-info", (e) => this._handleMoreInfo(e));
 
       // Load it once we are having the initial rendering done.
-      import(/* webpackChunkName: "more-info-dialog" */ "../../dialogs/ha-more-info-dialog");
+      import(/* webpackChunkName: "more-info-dialog" */ "../dialogs/ha-more-info-dialog");
     }
 
     private async _handleMoreInfo(ev) {
diff --git a/src/layouts/app/notification-mixin.js b/src/state/notification-mixin.js
similarity index 90%
rename from src/layouts/app/notification-mixin.js
rename to src/state/notification-mixin.js
index 43cf2461c3..bf722741d2 100644
--- a/src/layouts/app/notification-mixin.js
+++ b/src/state/notification-mixin.js
@@ -6,7 +6,7 @@ export default (superClass) =>
         dialogShowEvent: "hass-notification",
         dialogTag: "notification-manager",
         dialogImport: () =>
-          import(/* webpackChunkName: "notification-manager" */ "../../managers/notification-manager"),
+          import(/* webpackChunkName: "notification-manager" */ "../managers/notification-manager"),
       });
     }
   };
diff --git a/src/layouts/app/sidebar-mixin.ts b/src/state/sidebar-mixin.ts
similarity index 86%
rename from src/layouts/app/sidebar-mixin.ts
rename to src/state/sidebar-mixin.ts
index b38efb3792..507e22c3bf 100644
--- a/src/layouts/app/sidebar-mixin.ts
+++ b/src/state/sidebar-mixin.ts
@@ -1,7 +1,7 @@
-import { storeState } from "../../util/ha-pref-storage";
+import { storeState } from "../util/ha-pref-storage";
 import { Constructor, LitElement } from "lit-element";
 import { HassBaseEl } from "./hass-base-mixin";
-import { HASSDomEvent } from "../../common/dom/fire_event";
+import { HASSDomEvent } from "../common/dom/fire_event";
 
 interface DockSidebarParams {
   dock: boolean;
diff --git a/src/layouts/app/themes-mixin.ts b/src/state/themes-mixin.ts
similarity index 79%
rename from src/layouts/app/themes-mixin.ts
rename to src/state/themes-mixin.ts
index af6685ba97..b97419237e 100644
--- a/src/layouts/app/themes-mixin.ts
+++ b/src/state/themes-mixin.ts
@@ -1,9 +1,9 @@
-import applyThemesOnElement from "../../common/dom/apply_themes_on_element";
-import { storeState } from "../../util/ha-pref-storage";
-import { subscribeThemes } from "../../data/ws-themes";
+import applyThemesOnElement from "../common/dom/apply_themes_on_element";
+import { storeState } from "../util/ha-pref-storage";
+import { subscribeThemes } from "../data/ws-themes";
 import { Constructor, LitElement } from "lit-element";
 import { HassBaseEl } from "./hass-base-mixin";
-import { HASSDomEvent } from "../../common/dom/fire_event";
+import { HASSDomEvent } from "../common/dom/fire_event";
 
 declare global {
   // for add event listener
diff --git a/src/layouts/app/translations-mixin.ts b/src/state/translations-mixin.ts
similarity index 87%
rename from src/layouts/app/translations-mixin.ts
rename to src/state/translations-mixin.ts
index 5914f7c38f..bbe3dde4c9 100644
--- a/src/layouts/app/translations-mixin.ts
+++ b/src/state/translations-mixin.ts
@@ -1,17 +1,17 @@
-import { translationMetadata } from "../../resources/translations-metadata";
+import { translationMetadata } from "../resources/translations-metadata";
 import {
   getTranslation,
   getLocalLanguage,
   getUserLanguage,
-} from "../../util/hass-translation";
+} from "../util/hass-translation";
 import { Constructor, LitElement } from "lit-element";
 import { HassBaseEl } from "./hass-base-mixin";
-import { computeLocalize } from "../../common/translations/localize";
-import { computeRTL } from "../../common/util/compute_rtl";
-import { HomeAssistant } from "../../types";
-import { saveFrontendUserData } from "../../data/frontend";
-import { storeState } from "../../util/ha-pref-storage";
-import { getHassTranslations } from "../../data/translation";
+import { computeLocalize } from "../common/translations/localize";
+import { computeRTL } from "../common/util/compute_rtl";
+import { HomeAssistant } from "../types";
+import { saveFrontendUserData } from "../data/frontend";
+import { storeState } from "../util/ha-pref-storage";
+import { getHassTranslations } from "../data/translation";
 
 /*
  * superClass needs to contain `this.hass` and `this._updateHass`.
@@ -115,7 +115,7 @@ export default (superClass: Constructor<LitElement & HassBaseEl>) =>
         },
       };
       const changes: Partial<HomeAssistant> = { resources };
-      if (language === this.hass!.language) {
+      if (this.hass && language === this.hass.language) {
         changes.localize = computeLocalize(this, language, resources);
       }
       this._updateHass(changes);
diff --git a/src/layouts/app/url-sync-mixin.ts b/src/state/url-sync-mixin.ts
similarity index 97%
rename from src/layouts/app/url-sync-mixin.ts
rename to src/state/url-sync-mixin.ts
index c6817760a6..920066bd85 100644
--- a/src/layouts/app/url-sync-mixin.ts
+++ b/src/state/url-sync-mixin.ts
@@ -1,6 +1,6 @@
 import { Constructor, LitElement } from "lit-element";
 import { HassBaseEl } from "./hass-base-mixin";
-import { fireEvent } from "../../common/dom/fire_event";
+import { fireEvent } from "../common/dom/fire_event";
 
 /* tslint:disable:no-console */
 const DEBUG = false;
diff --git a/src/translations/en.json b/src/translations/en.json
index 43c310c22b..a232b91784 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -1172,6 +1172,11 @@
             "required_fields": "Fill in all required fields",
             "password_not_match": "Passwords don't match"
           }
+        },
+        "integration": {
+          "intro": "Devices and services are represented in Home Assistant as integrations. You can set them up now, or do it later from the configuration screen.",
+          "more_integrations": "More",
+          "finish": "Finish"
         }
       }
     }
diff --git a/src/types.ts b/src/types.ts
index 9a5a731a3b..b0d4aee814 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -10,7 +10,6 @@ import {
 } from "home-assistant-js-websocket";
 import { LocalizeFunc } from "./common/translations/localize";
 import { ExternalMessaging } from "./external_app/external_messaging";
-import { HASSDomEvent } from "./common/dom/fire_event";
 
 declare global {
   var __DEV__: boolean;
@@ -38,16 +37,9 @@ declare global {
       value: unknown;
     };
     change: undefined;
-    "connection-status": ConnectionStatus;
-  }
-
-  interface GlobalEventHandlersEventMap {
-    "connection-status": HASSDomEvent<ConnectionStatus>;
   }
 }
 
-type ConnectionStatus = "connected" | "auth-invalid" | "disconnected";
-
 export interface WebhookError {
   code: number;
   message: string;
@@ -103,6 +95,13 @@ export interface Translation {
   fingerprints: { [fragment: string]: string };
 }
 
+export interface TranslationMetadata {
+  fragments: string[];
+  translations: {
+    [lang: string]: Translation;
+  };
+}
+
 export interface Notification {
   notification_id: string;
   message: string;
@@ -135,18 +134,13 @@ export interface HomeAssistant {
   //   - english (en)
   language: string;
   // local stored language, keep that name for backward compability
-  selectedLanguage: string;
+  selectedLanguage: string | null;
   resources: Resources;
   localize: LocalizeFunc;
-  translationMetadata: {
-    fragments: string[];
-    translations: {
-      [lang: string]: Translation;
-    };
-  };
+  translationMetadata: TranslationMetadata;
 
   dockedSidebar: boolean;
-  moreInfoEntityId: string;
+  moreInfoEntityId: string | null;
   user?: CurrentUser;
   callService: (
     domain: string,
@@ -162,7 +156,7 @@ export interface HomeAssistant {
     path: string,
     init?: { [key: string]: any }
   ) => Promise<Response>;
-  sendWS: (msg: MessageBase) => Promise<void>;
+  sendWS: (msg: MessageBase) => void;
   callWS: <T>(msg: MessageBase) => Promise<T>;
 }
 
diff --git a/translations/af.json b/translations/af.json
index fd412c0aad..86da9dff58 100644
--- a/translations/af.json
+++ b/translations/af.json
@@ -874,7 +874,7 @@
                         "tap": "Tik:",
                         "navigate_to": "Navigeer na {location}",
                         "toggle": "Wissel {name}",
-                        "call_service": "Call diens {name}",
+                        "call_service": "Oproep diens {name}",
                         "more_info": "Wys meer inligting: {name}"
                     }
                 },
@@ -933,7 +933,8 @@
         },
         "sidebar": {
             "log_out": "Meld af",
-            "developer_tools": "Ontwikkelaar gereedskap"
+            "developer_tools": "Ontwikkelaar gereedskap",
+            "external_app_configuration": "App Konfigurasie"
         },
         "common": {
             "loading": "Laai tans",
diff --git a/translations/ca.json b/translations/ca.json
index 52f7dc57a8..47f1cd6692 100644
--- a/translations/ca.json
+++ b/translations/ca.json
@@ -386,7 +386,7 @@
                         "alias": "Nom",
                         "triggers": {
                             "header": "Activadors",
-                            "introduction": "Els activadors són les regles que fan que es dispari un automatisme. Pots definir més d'un activador per a cada automatisme. Una vegada s'iniciï un activador, el Home Assistant validarà les condicions (si n'hi ha) i finalment cridarà l'acció.\n\n[Més informació sobre activadors](https:\/\/home-assistant.io\/docs\/automation\/trigger\/)",
+                            "introduction": "Els activadors són les regles que fan que es dispari un automatisme. Pots definir més d'un activador per a cada automatisme. Una vegada s'iniciï un activador, el Home Assistant validarà les condicions (si n'hi ha) i finalment cridarà l'acció.",
                             "add": "Afegir activador",
                             "duplicate": "Duplicar",
                             "delete": "Elimina",
@@ -468,7 +468,7 @@
                         },
                         "conditions": {
                             "header": "Condicions",
-                            "introduction": "Les condicions són una part opcional d'un automatisme i es poden utilitzar per permetre o evitar que es produeixi l'acció quan s'activa l'automatisme. Les condicions són similars als activadors però funcionen de forma diferent: un activador analitza els esdeveniments que ocorren en el sistema mentre que una condició només observa com està el sistema en un moment determinat, per exemple, un activador se n'adonarà de quan s'està activant un interruptor mentre que una condició només pot veure si un interruptor està activat o desactivat.\n\n[Més informació sobre les condicions](https:\/\/home-assistant.io\/docs\/scripts\/conditions\/).",
+                            "introduction": "Les condicions són una part opcional d'un automatisme i es poden utilitzar per permetre o evitar que es produeixi l'acció quan s'activa l'automatisme. Les condicions són similars als activadors però funcionen de forma diferent: un activador analitza els esdeveniments que ocorren en el sistema mentre que una condició només observa com està el sistema en un moment determinat, per exemple, un activador se n'adonarà de quan s'està activant un interruptor mentre que una condició només pot veure si un interruptor està activat o desactivat.",
                             "add": "Afegir condició",
                             "duplicate": "Duplicar",
                             "delete": "Elimina",
@@ -514,7 +514,7 @@
                         },
                         "actions": {
                             "header": "Accions",
-                            "introduction": "Les accions són allò que farà Home Assistant quan s'activi l'automatisme i es compleixin totes les condicions (si n'hi ha).\n\n[Més informació sobre les accions](https:\/\/home-assistant.io\/docs\/automation\/action\/).",
+                            "introduction": "Les accions són allò que farà Home Assistant quan s'activi l'automatisme i es compleixin totes les condicions (si n'hi ha).",
                             "add": "Afegir acció",
                             "duplicate": "Duplicar",
                             "delete": "Elimina",
@@ -933,7 +933,8 @@
         },
         "sidebar": {
             "log_out": "Desconnectar",
-            "developer_tools": "Eines per a desenvolupadors"
+            "developer_tools": "Eines per a desenvolupadors",
+            "external_app_configuration": "Configuració de l’aplicació"
         },
         "common": {
             "loading": "Carregant",
@@ -1096,7 +1097,7 @@
         "dialogs": {
             "more_info_settings": {
                 "save": "Desar",
-                "name": "Nom",
+                "name": "Substitució de Nom",
                 "entity_id": "ID de l'entitat"
             },
             "more_info_control": {
@@ -1105,8 +1106,8 @@
                 },
                 "sun": {
                     "elevation": "Elevació",
-                    "rising": "Sortida",
-                    "setting": "Posta"
+                    "rising": "Sortint",
+                    "setting": "Ponent-se"
                 },
                 "updater": {
                     "title": "Instruccions d'actualització"
diff --git a/translations/de.json b/translations/de.json
index 7f0fe0cf35..a418a81078 100644
--- a/translations/de.json
+++ b/translations/de.json
@@ -933,7 +933,8 @@
         },
         "sidebar": {
             "log_out": "Abmelden",
-            "developer_tools": "Entwicklerwerkzeuge"
+            "developer_tools": "Entwicklerwerkzeuge",
+            "external_app_configuration": "App-Konfiguration"
         },
         "common": {
             "loading": "Laden",
diff --git a/translations/en.json b/translations/en.json
index 423d6ed8f7..8d71eeef3c 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -855,6 +855,11 @@
                         "required_fields": "Fill in all required fields",
                         "password_not_match": "Passwords don't match"
                     }
+                },
+                "integration": {
+                    "intro": "Devices and services are represented in Home Assistant as integrations. You can set them up now, or do it later from the configuration screen.",
+                    "more_integrations": "More",
+                    "finish": "Finish"
                 }
             },
             "lovelace": {
diff --git a/translations/es-419.json b/translations/es-419.json
index bc3baeb79a..c1103af869 100644
--- a/translations/es-419.json
+++ b/translations/es-419.json
@@ -868,6 +868,11 @@
                         "title": "Bienvenido a casa",
                         "no_devices": "Esta página le permite controlar sus dispositivos, sin embargo, parece que aún no tiene dispositivos configurados. Dirígete a la página de integraciones para empezar.",
                         "go_to_integrations_page": "Ir a la página de integraciones."
+                    },
+                    "picture-elements": {
+                        "navigate_to": "Navegue a {location}",
+                        "call_service": "Servicio de llamadas {name}",
+                        "more_info": "Mostrar más información: {nombre}"
                     }
                 },
                 "editor": {
@@ -925,7 +930,8 @@
         },
         "sidebar": {
             "log_out": "Cerrar sesión",
-            "developer_tools": "Herramientas para desarrolladores"
+            "developer_tools": "Herramientas para desarrolladores",
+            "external_app_configuration": "Configuración de la aplicación"
         },
         "common": {
             "loading": "Cargando",
diff --git a/translations/hu.json b/translations/hu.json
index aa07c77221..392f8361bc 100644
--- a/translations/hu.json
+++ b/translations/hu.json
@@ -594,7 +594,7 @@
                     "none": "Még semmi sincs beállítva",
                     "config_entry": {
                         "no_devices": "Ez az integráció nem rendelkezik eszközökkel.",
-                        "no_device": "Entitások eszközök nélkül",
+                        "no_device": "Eszköz nélküli entitások",
                         "delete_confirm": "Biztosan törölni szeretnéd ezt az integrációt?",
                         "restart_confirm": "Indítsd újra a Home Assistant-ot az integráció törlésének befejezéséhez",
                         "manuf": "{manufacturer} által",
diff --git a/translations/is.json b/translations/is.json
index 9b10258be2..ad22fc29dc 100644
--- a/translations/is.json
+++ b/translations/is.json
@@ -22,7 +22,15 @@
             "unknown": "Óþekkt",
             "unavailable": "Ekki tiltækt"
         },
+        "automation": {
+            "off": "Óvirk",
+            "on": "Virk"
+        },
         "binary_sensor": {
+            "default": {
+                "off": "Slökkt",
+                "on": "Kveikt"
+            },
             "moisture": {
                 "off": "Þurrt",
                 "on": "Blautt"
@@ -84,6 +92,10 @@
                 "on": "Aflæst"
             }
         },
+        "calendar": {
+            "off": "Óvirkt",
+            "on": "Virkt"
+        },
         "camera": {
             "recording": "Í upptöku",
             "streaming": "Streymi",
@@ -111,6 +123,10 @@
             "home": "Heima",
             "not_home": "Fjarverandi"
         },
+        "fan": {
+            "off": "Slökkt",
+            "on": "Í gangi"
+        },
         "group": {
             "off": "Óvirkur",
             "on": "Virkur",
@@ -150,6 +166,14 @@
             "ok": "Í lagi",
             "problem": "Vandamál"
         },
+        "remote": {
+            "off": "Óvirk",
+            "on": "Virk"
+        },
+        "script": {
+            "off": "Óvirkt",
+            "on": "Virkt"
+        },
         "sensor": {
             "off": "Af",
             "on": "Á"
@@ -175,10 +199,13 @@
             }
         },
         "weather": {
+            "clear-night": "Heiðskýrt, nótt",
             "cloudy": "Skýjað",
             "fog": "Þoka",
             "hail": "Haglél",
             "lightning": "Eldingar",
+            "lightning-rainy": "Eldingar, rigning",
+            "partlycloudy": "Að hluta til skýjað",
             "pouring": "Úrhelli",
             "rainy": "Rigning",
             "snowy": "Snjókoma",
@@ -251,12 +278,14 @@
                             "introduction": "Að breyta stillingum getur verið þreytandi ferli og við vitum það. Þetta svæði mun reyna að létta þér lífið hvað það varðar.",
                             "validation": {
                                 "heading": "Staðfesta stillingar",
+                                "introduction": "Staðfestu stillingarnar þínar ef þú hefur gert breytingar á stillingum og vilt ganga úr skugga um að þær séu í lagi",
                                 "check_config": "Athuga stillingar",
                                 "valid": "Stillingar í lagi!",
                                 "invalid": "Stillingar ógildar"
                             },
                             "reloading": {
                                 "heading": "Endurhleðsla stillinga",
+                                "introduction": "Sumir hlutar af Home Assistant er hægt að hlaða inn að nýju án þess að það krefjist endurræsingar. Með því að velja að endurhlaða þá mun sú aðgerð hlaða inn nýjum stillingum.",
                                 "core": "Endurhlaða inn kjarna",
                                 "group": "Endurhlaða inn hópum",
                                 "automation": "Endurhlaða inn sjálfvirkni",
@@ -282,6 +311,7 @@
                     "caption": "Sjálfvirkni",
                     "description": "Stofna og breyta sjálfvirkni",
                     "picker": {
+                        "header": "Sjálfvirkniritill",
                         "pick_automation": "Veldu sjálfvirkni sem á að breyta",
                         "no_automations": "Við fundum ekki neinar sjálfvirkni-skilgreiningar sem hægt er að breyta",
                         "add_automation": "Bæta við sjálfvirkni",
@@ -334,6 +364,7 @@
                                     "at": "Þann"
                                 },
                                 "zone": {
+                                    "label": "Öryggissvæði",
                                     "entity": "Eining með staðsetningu",
                                     "event": "Viðburður:",
                                     "enter": "Koma",
@@ -350,6 +381,7 @@
                                     "seconds": "Sekúndur"
                                 },
                                 "geo_location": {
+                                    "label": "Staðsetning",
                                     "source": "Uppruni",
                                     "zone": "Öryggissvæði",
                                     "event": "Viðburður:",
@@ -388,7 +420,9 @@
                                     "before": "Fyrir"
                                 },
                                 "zone": {
-                                    "entity": "Eining með staðsetningu"
+                                    "label": "Öryggissvæði",
+                                    "entity": "Eining með staðsetningu",
+                                    "zone": "Öryggissvæði"
                                 }
                             },
                             "learn_more": "Læra meira um skilyrði"
@@ -412,7 +446,8 @@
                                     "delay": "Töf"
                                 },
                                 "wait_template": {
-                                    "label": "Bið"
+                                    "label": "Bið",
+                                    "timeout": "Tímamörk (valfrjálst)"
                                 },
                                 "condition": {
                                     "label": "Skilyrði"
@@ -425,6 +460,10 @@
                         }
                     }
                 },
+                "script": {
+                    "caption": "Skrifta",
+                    "description": "Búa til og breyta skriftum"
+                },
                 "zwave": {
                     "caption": "Z-Wave",
                     "description": "Stjórnaðu Z-Wave netinu þínu"
@@ -499,6 +538,14 @@
                 "area_registry": {
                     "caption": "Svæðaskrá",
                     "description": "Yfirlit yfir öll svæði á heimilinu þínu.",
+                    "picker": {
+                        "header": "Svæðaskrá",
+                        "introduction": "Svæði eru notuð til að skipuleggja hvar tæki eru staðsett. Þessar upplýsingar verða notaðar innan Home Assistant til að hjálpa þér að skipuleggja viðmótið, réttindi og samþættingar við önnur kerfi.",
+                        "introduction2": "Til að staðsetja tæki inn á tilteknu svæði þá skal notast við hlekkinn hér fyrir neðan til að vafra yfir á samþættingarsíðu og þar smella á stillta samþættingu til að fá upp spjaldið fyrir tækið.",
+                        "integrations_page": "Samþættingar síða",
+                        "no_areas": "Það virðist sem að þú hafir engin svæði ennþá!",
+                        "create_area": "BÚA TIL SVÆÐI"
+                    },
                     "no_areas": "Það virðist sem að þú hafir engin svæði ennþá!",
                     "create_area": "BÚA TIL SVÆÐI",
                     "editor": {
@@ -506,11 +553,6 @@
                         "delete": "EYÐA",
                         "update": "UPPFÆRA",
                         "create": "STOFNA"
-                    },
-                    "picker": {
-                        "integrations_page": "Samþættingar síða",
-                        "no_areas": "Það virðist sem að þú hafir engin svæði ennþá!",
-                        "create_area": "BÚA TIL SVÆÐI"
                     }
                 },
                 "entity_registry": {
@@ -519,6 +561,7 @@
                     "picker": {
                         "header": "Einingarskrá",
                         "unavailable": "(ekki tiltækt)",
+                        "introduction": "Home Assistant heldur bókhald utanum allar einingar sem verið greindar. Hver þessara eininga hafa einingar-auðkenni (ID) sem er frátekið bara fyrir þessa tilteknu einingu.",
                         "integrations_page": "Samþættingar síða"
                     },
                     "editor": {
@@ -541,6 +584,7 @@
             },
             "profile": {
                 "push_notifications": {
+                    "header": "Ýta út tilkynningum",
                     "description": "Senda tilkynningar í þetta tæki.",
                     "error_load_platform": "Stilla notify.html5.",
                     "error_use_https": "Krefst þess að SSL sé virkt á vef.",
@@ -560,13 +604,22 @@
                 },
                 "refresh_tokens": {
                     "created_at": "Búið til þann {date}",
+                    "delete_failed": "Ekki tókst að eyða endurnýjunartókanum.",
                     "last_used": "Síðast notaður þann {date} frá {location}",
                     "not_used": "Hefur aldrei verið notaður"
                 },
                 "long_lived_access_tokens": {
+                    "header": "Langlífir aðgangstókar",
+                    "description": "Stofna langlífa aðgangstóka sem leyfa skriftum að eiga samskipti við Home Assitant uppsetninguna. Hver tóki er gildur í 10 ár frá stofnun. Eftirfarandi langlífu tókar eru virkir.",
                     "learn_auth_requests": "Lærðu hvernig á að útbúa auðkenndar beiðnir.",
                     "created_at": "Búið til þann {date}",
+                    "confirm_delete": "Ertu viss um að þú viljir eyða aðgangstóka fyrir {name}?",
+                    "delete_failed": "Ekki tókst að eyða aðgangstókanum.",
+                    "create": "Búa til tóka",
+                    "create_failed": "Ekki tókst að stofna aðganstóka.",
                     "prompt_name": "Nafn?",
+                    "prompt_copy_token": "Afritaðu aðgangstókann þinn en hann verður ekki birtur aftur.",
+                    "empty_state": "Þú ert ekki með neina langlífa aðgangstóka sem stendur.",
                     "last_used": "Síðast notaður þann {date} frá {location}",
                     "not_used": "Hefur aldrei verið notaður"
                 },
@@ -615,7 +668,8 @@
                                 "mfa": {
                                     "data": {
                                         "code": "Tvíþættur auðkenningarkóði"
-                                    }
+                                    },
+                                    "description": "Opnaðu **{mfa_module_name}** á tækinu þínu til að skoða tvíþátta auðkenningarkóðann þinn upp á að staðfesta auðkenni þitt:"
                                 }
                             },
                             "error": {
@@ -642,6 +696,9 @@
                             "error": {
                                 "invalid_auth": "Ógilt API lykilorð",
                                 "invalid_code": "Ógildur auðkenningarkóði"
+                            },
+                            "abort": {
+                                "login_expired": "Seta útrunnin, vinsamlegast skráðu þig inn að nýju."
                             }
                         },
                         "trusted_networks": {
@@ -709,7 +766,16 @@
                     },
                     "empty_state": {
                         "title": "Velkomin(n) heim",
+                        "no_devices": "Þessi síða leyfir þér að stjórna tækjunum þínum, hinsvegar lýtur út fyrir að þú sért ekki með nein tæki uppsett sem stendur. Farðu yfir á samþættingarsíðu til að byrja.",
                         "go_to_integrations_page": "Fara á samþættingar síðu."
+                    },
+                    "picture-elements": {
+                        "hold": "Halda inni:",
+                        "tap": "Ýta á:",
+                        "navigate_to": "Fara yfir á {location}",
+                        "toggle": "Víxla {name}",
+                        "call_service": "Kalla í þjónustu {name}",
+                        "more_info": "Sýna frekari upplýsingar: {name}"
                     }
                 },
                 "editor": {
@@ -724,7 +790,8 @@
                         "move": "Færa"
                     },
                     "migrate": {
-                        "header": "Ósamhæfðar stillingar"
+                        "header": "Ósamhæfðar stillingar",
+                        "migrate": "Uppfæra stillingar"
                     },
                     "header": "Breyta notendaviðmóti",
                     "edit_view": {
@@ -735,10 +802,14 @@
                     },
                     "save_config": {
                         "header": "Taka yfir stjórn á Lovelace viðmótinu",
+                        "para": "Home Assistant mun sjálfgefið halda utan um notendaviðmótið og uppfæra það þegar nýjar einingar eða Lovlace íhlutir verða aðgengilegir. Ef þú tekur yfir stjórn á viðmótinu þá mun þetta ekki gerast sjálfkrafa fyrir þig.",
                         "para_sure": "Ertu viss um að þú viljir taka yfir stjórn á notendaviðmótinu þínu?",
                         "cancel": "Gleymdu þessu",
                         "save": "Taka stjórnina"
                     },
+                    "menu": {
+                        "raw_editor": "Ritill fyrir hráar stillingar"
+                    },
                     "raw_editor": {
                         "header": "Breyta stillingum",
                         "save": "Vista",
@@ -758,7 +829,9 @@
             }
         },
         "sidebar": {
-            "log_out": "Skrá út"
+            "log_out": "Skrá út",
+            "developer_tools": "Þróunarverkfæri",
+            "external_app_configuration": "Stillingar forrits"
         },
         "common": {
             "loading": "Hleð",
@@ -832,7 +905,8 @@
             "light": {
                 "brightness": "Birtustig",
                 "color_temperature": "Litastig",
-                "white_value": "Hvítt gildi"
+                "white_value": "Hvítt gildi",
+                "effect": "Áhrif"
             },
             "media_player": {
                 "text_to_speak": "Texti yfir í tal",
@@ -902,7 +976,8 @@
         "dialogs": {
             "more_info_settings": {
                 "save": "Vista",
-                "name": "Yfirskrifa nafn"
+                "name": "Yfirskrifa nafn",
+                "entity_id": "Kenni eingar"
             },
             "more_info_control": {
                 "script": {
@@ -937,7 +1012,9 @@
         "configurator": "Stillingarálfur",
         "conversation": "Samtal",
         "cover": "Gluggatjöld",
+        "device_tracker": "Rekja tæki",
         "fan": "Vifta",
+        "history_graph": "Sögulínurit",
         "group": "Hópur",
         "input_datetime": "Innsláttar dagsetning\/tími",
         "input_select": "Innsláttarval",
@@ -950,11 +1027,13 @@
         "notify": "Tilkynna",
         "plant": "Planta",
         "proximity": "Nálægð",
+        "remote": "Fjarstýring",
         "scene": "Sena",
         "script": "Skrifta",
         "sensor": "Skynjari",
         "sun": "Sól",
         "switch": "Rofi",
+        "updater": "Uppfærsluálfur",
         "weblink": "Vefslóð",
         "zwave": "Z-Wave",
         "zha": "ZHA",
diff --git a/translations/ko.json b/translations/ko.json
index 9070af6231..49c6e1e40e 100644
--- a/translations/ko.json
+++ b/translations/ko.json
@@ -872,7 +872,7 @@
                     "picture-elements": {
                         "hold": "누르고 있기:",
                         "tap": "탭:",
-                        "navigate_to": "{location} 으로 이동",
+                        "navigate_to": "{location} 로(으로) 이동",
                         "toggle": "{name} 토글",
                         "call_service": "{name} 서비스 호출",
                         "more_info": "추가 정보 표시: {name}"
@@ -933,7 +933,8 @@
         },
         "sidebar": {
             "log_out": "로그아웃",
-            "developer_tools": "개발자도구"
+            "developer_tools": "개발자도구",
+            "external_app_configuration": "앱 구성"
         },
         "common": {
             "loading": "읽는중",
diff --git a/translations/lb.json b/translations/lb.json
index 0600a76e42..a560d2c504 100644
--- a/translations/lb.json
+++ b/translations/lb.json
@@ -933,7 +933,8 @@
         },
         "sidebar": {
             "log_out": "Ausloggen",
-            "developer_tools": "Entwécklungsgeschir"
+            "developer_tools": "Entwécklungsgeschir",
+            "external_app_configuration": "App Konfiguratioun"
         },
         "common": {
             "loading": "Lued",
diff --git a/translations/pl.json b/translations/pl.json
index d13a26c2ad..44c33733a9 100644
--- a/translations/pl.json
+++ b/translations/pl.json
@@ -1,6 +1,6 @@
 {
     "panel": {
-        "config": "Ustawienia",
+        "config": "Konfiguracja",
         "states": "Przegląd",
         "map": "Mapa",
         "logbook": "Dziennik",
@@ -933,7 +933,8 @@
         },
         "sidebar": {
             "log_out": "Wyloguj",
-            "developer_tools": "Narzędzia deweloperskie"
+            "developer_tools": "Narzędzia deweloperskie",
+            "external_app_configuration": "Konfiguracja aplikacji"
         },
         "common": {
             "loading": "Ładowanie",
diff --git a/translations/ru.json b/translations/ru.json
index 3202f2a9dd..7ce553ec9e 100644
--- a/translations/ru.json
+++ b/translations/ru.json
@@ -69,7 +69,7 @@
                 "on": "Обнаружено"
             },
             "vibration": {
-                "off": "Не обнаружено",
+                "off": "Не обнаружена",
                 "on": "Обнаружена"
             },
             "opening": {
@@ -160,7 +160,7 @@
         },
         "device_tracker": {
             "home": "Дома",
-            "not_home": "Отсутствует"
+            "not_home": "Не дома"
         },
         "fan": {
             "off": "Выкл",
@@ -170,7 +170,7 @@
             "off": "Выкл",
             "on": "Вкл",
             "home": "Дома",
-            "not_home": "Отсутствует",
+            "not_home": "Не дома",
             "open": "Открыто",
             "opening": "Открывается",
             "closed": "Закрыто",
@@ -933,7 +933,8 @@
         },
         "sidebar": {
             "log_out": "Выход",
-            "developer_tools": "Инструменты разработчика"
+            "developer_tools": "Инструменты разработчика",
+            "external_app_configuration": "Настройки приложения"
         },
         "common": {
             "loading": "Загрузка",
diff --git a/translations/zh-Hant.json b/translations/zh-Hant.json
index 9d88035deb..60b4b00cdf 100644
--- a/translations/zh-Hant.json
+++ b/translations/zh-Hant.json
@@ -933,7 +933,8 @@
         },
         "sidebar": {
             "log_out": "登出",
-            "developer_tools": "開發工具"
+            "developer_tools": "開發工具",
+            "external_app_configuration": "App 設定"
         },
         "common": {
             "loading": "讀取中",
diff --git a/webpack.config.js b/webpack.config.js
index 86d088bce0..49df18dfec 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,5 +1,7 @@
 const { createAppConfig } = require("./build-scripts/webpack.js");
 
+// This file exists because we haven't migrated the stats script yet
+
 const isProdBuild = process.env.NODE_ENV === "production";
 const isStatsBuild = process.env.STATS === "1";
 
diff --git a/yarn.lock b/yarn.lock
index 3302efc068..593634e982 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7237,10 +7237,10 @@ hoek@6.x.x:
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-6.1.3.tgz#73b7d33952e01fe27a38b0457294b79dd8da242c"
   integrity sha512-YXXAAhmF9zpQbC7LEcREFtXfGq5K1fmd+4PHkBq8NUqmzW3G+Dq10bI/i0KucLRwss3YYFQ0fSfoxBZYiGUqtQ==
 
-home-assistant-js-websocket@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/home-assistant-js-websocket/-/home-assistant-js-websocket-3.4.0.tgz#3ba47cc8f8b7620619a675e7488d6108e8733a70"
-  integrity sha512-Uq5/KIAh4kF13MKzMyd0efBDoU+pNF0O1CfdGpSmT3La3tpt5h+ykpUYlq/vEBj6WwzU6iv3Czt4UK1o0IJHcA==
+home-assistant-js-websocket@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/home-assistant-js-websocket/-/home-assistant-js-websocket-4.1.1.tgz#b85152c223a20bfe8827b817b927fd97cc021157"
+  integrity sha512-hNk8bj9JObd3NpgQ1+KtQCbSoz/TWockC8T/L8KvsPrDtkl1oQddajirumaMDgrJg/su4QsxFNUcDPGJyJ05UA==
 
 homedir-polyfill@^1.0.0, homedir-polyfill@^1.0.1:
   version "1.0.3"