diff --git a/.gitignore b/.gitignore
index f9a704e5d9..743889ba4e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,7 +4,6 @@ node_modules/*
 npm-debug.log
 .DS_Store
 hass_frontend/*
-hass_frontend_es5/*
 .reify-cache
 demo/hademo-icons.html
 
diff --git a/.nvmrc b/.nvmrc
index 2f76972966..40e6bd96a6 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-8.11.1
+12.1
diff --git a/gulp/.eslintrc b/build-scripts/.eslintrc
similarity index 100%
rename from gulp/.eslintrc
rename to build-scripts/.eslintrc
diff --git a/config/.eslintrc.json b/build-scripts/.eslintrc.json
similarity index 100%
rename from config/.eslintrc.json
rename to build-scripts/.eslintrc.json
diff --git a/config/babel.js b/build-scripts/babel.js
similarity index 100%
rename from config/babel.js
rename to build-scripts/babel.js
diff --git a/build-scripts/gulp/clean.js b/build-scripts/gulp/clean.js
new file mode 100644
index 0000000000..d3eaed526a
--- /dev/null
+++ b/build-scripts/gulp/clean.js
@@ -0,0 +1,5 @@
+const del = require("del");
+const gulp = require("gulp");
+const config = require("../paths");
+
+gulp.task("clean", () => del([config.root, config.build_dir]));
diff --git a/build-scripts/gulp/develop.js b/build-scripts/gulp/develop.js
new file mode 100644
index 0000000000..2dbcbaac45
--- /dev/null
+++ b/build-scripts/gulp/develop.js
@@ -0,0 +1,29 @@
+// 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/entry-html.js b/build-scripts/gulp/entry-html.js
new file mode 100644
index 0000000000..235a7336d5
--- /dev/null
+++ b/build-scripts/gulp/entry-html.js
@@ -0,0 +1,108 @@
+// Tasks to generate entry HTML
+/* eslint-disable import/no-dynamic-require */
+/* eslint-disable global-require */
+const gulp = require("gulp");
+const fs = require("fs-extra");
+const path = require("path");
+const template = require("lodash.template");
+const minify = require("html-minifier").minify;
+const config = require("../paths.js");
+
+const templatePath = (tpl) =>
+  path.resolve(config.polymer_dir, "src/html/", `${tpl}.html.template`);
+
+const readFile = (pth) => fs.readFileSync(pth).toString();
+
+const renderTemplate = (pth, data = {}) => {
+  const compiled = template(readFile(templatePath(pth)));
+  return compiled({ ...data, renderTemplate });
+};
+
+const minifyHtml = (content) =>
+  minify(content, {
+    collapseWhitespace: true,
+    minifyJS: true,
+    minifyCSS: true,
+    removeComments: true,
+  });
+
+const PAGES = ["onboarding", "authorize"];
+
+gulp.task("gen-pages-dev", (done) => {
+  for (const page of PAGES) {
+    const content = renderTemplate(page, {
+      latestPageJS: `/frontend_latest/${page}.js`,
+      latestHassIconsJS: "/frontend_latest/hass-icons.js",
+
+      es5Compatibility: "/frontend_es5/compatibility.js",
+      es5PageJS: `/frontend_es5/${page}.js`,
+      es5HassIconsJS: "/frontend_es5/hass-icons.js",
+    });
+
+    fs.outputFileSync(path.resolve(config.root, `${page}.html`), content);
+  }
+  done();
+});
+
+gulp.task("gen-pages-prod", (done) => {
+  const latestManifest = require(path.resolve(config.output, "manifest.json"));
+  const es5Manifest = require(path.resolve(config.output_es5, "manifest.json"));
+
+  for (const page of PAGES) {
+    const content = renderTemplate(page, {
+      latestPageJS: latestManifest[`${page}.js`],
+      latestHassIconsJS: latestManifest["hass-icons.js"],
+
+      es5Compatibility: es5Manifest["compatibility.js"],
+      es5PageJS: es5Manifest[`${page}.js`],
+      es5HassIconsJS: es5Manifest["hass-icons.js"],
+    });
+
+    fs.outputFileSync(
+      path.resolve(config.root, `${page}.html`),
+      minifyHtml(content)
+    );
+  }
+  done();
+});
+
+gulp.task("gen-index-html-dev", (done) => {
+  // In dev mode we don't mangle names, so we hardcode urls. That way we can
+  // run webpack as last in watch mode, which blocks output.
+  const content = renderTemplate("index", {
+    latestAppJS: "/frontend_latest/app.js",
+    latestCoreJS: "/frontend_latest/core.js",
+    latestCustomPanelJS: "/frontend_latest/custom-panel.js",
+    latestHassIconsJS: "/frontend_latest/hass-icons.js",
+
+    es5Compatibility: "/frontend_es5/compatibility.js",
+    es5AppJS: "/frontend_es5/app.js",
+    es5CoreJS: "/frontend_es5/core.js",
+    es5CustomPanelJS: "/frontend_es5/custom-panel.js",
+    es5HassIconsJS: "/frontend_es5/hass-icons.js",
+  });
+
+  fs.outputFileSync(path.resolve(config.root, "index.html"), content);
+  done();
+});
+
+gulp.task("gen-index-html-prod", (done) => {
+  const latestManifest = require(path.resolve(config.output, "manifest.json"));
+  const es5Manifest = require(path.resolve(config.output_es5, "manifest.json"));
+  const content = renderTemplate("index", {
+    latestAppJS: latestManifest["app.js"],
+    latestCoreJS: latestManifest["core.js"],
+    latestCustomPanelJS: latestManifest["custom-panel.js"],
+    latestHassIconsJS: latestManifest["hass-icons.js"],
+
+    es5Compatibility: es5Manifest["compatibility.js"],
+    es5AppJS: es5Manifest["app.js"],
+    es5CoreJS: es5Manifest["core.js"],
+    es5CustomPanelJS: es5Manifest["custom-panel.js"],
+    es5HassIconsJS: es5Manifest["hass-icons.js"],
+  });
+  const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");
+
+  fs.outputFileSync(path.resolve(config.root, "index.html"), minified);
+  done();
+});
diff --git a/build-scripts/gulp/gather-static.js b/build-scripts/gulp/gather-static.js
new file mode 100644
index 0000000000..733c0e876c
--- /dev/null
+++ b/build-scripts/gulp/gather-static.js
@@ -0,0 +1,87 @@
+// Gulp task to gather all static files.
+
+const gulp = require("gulp");
+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 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);
+
+const copyFileDir = (fromFile, toDir) =>
+  fs.copySync(fromFile, path.join(toDir, path.basename(fromFile)));
+
+function copyTranslations() {
+  // Translation output
+  fs.copySync(
+    polyPath("build-translations/output"),
+    staticPath("translations")
+  );
+}
+
+function copyStatic() {
+  // Basic static files
+  fs.copySync(polyPath("public"), config.root);
+
+  // Web Component polyfills and adapters
+  copyFileDir(
+    npmPath("@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"),
+    staticPath("polyfills/")
+  );
+  copyFileDir(
+    npmPath("@webcomponents/webcomponentsjs/webcomponents-bundle.js"),
+    staticPath("polyfills/")
+  );
+  copyFileDir(
+    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();
+});
+
+gulp.task("compress-static", () => {
+  const fonts = gulp
+    .src(staticPath("fonts/**/*.ttf"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(staticPath("fonts")));
+  const polyfills = gulp
+    .src(staticPath("polyfills/*.js"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(staticPath("polyfills")));
+  const translations = gulp
+    .src(staticPath("translations/*.json"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(staticPath("translations")));
+
+  return merge(fonts, polyfills, translations);
+});
+
+gulp.task("copy-translations", (done) => {
+  copyTranslations();
+  done();
+});
diff --git a/gulp/tasks/gen-icons.js b/build-scripts/gulp/gen-icons.js
similarity index 88%
rename from gulp/tasks/gen-icons.js
rename to build-scripts/gulp/gen-icons.js
index c47b42f360..6563b9a8f1 100644
--- a/gulp/tasks/gen-icons.js
+++ b/build-scripts/gulp/gen-icons.js
@@ -1,7 +1,6 @@
 const gulp = require("gulp");
 const path = require("path");
 const fs = require("fs");
-const config = require("../config");
 
 const ICON_PACKAGE_PATH = path.resolve(
   __dirname,
@@ -38,12 +37,12 @@ function loadIcon(name) {
 function transformXMLtoPolymer(name, xml) {
   const start = xml.indexOf("><path") + 1;
   const end = xml.length - start - 6;
-  const path = xml.substr(start, end);
-  return `<g id="${name}">${path}</g>`;
+  const pth = xml.substr(start, end);
+  return `<g id="${name}">${pth}</g>`;
 }
 
 // Given an iconset name and icon names, generate a polymer iconset
-function generateIconset(name, iconNames) {
+function generateIconset(iconsetName, iconNames) {
   const iconDefs = Array.from(iconNames)
     .map((name) => {
       const iconDef = loadIcon(name);
@@ -53,7 +52,7 @@ function generateIconset(name, iconNames) {
       return transformXMLtoPolymer(name, iconDef);
     })
     .join("");
-  return `<ha-iconset-svg name="${name}" size="24"><svg><defs>${iconDefs}</defs></svg></ha-iconset-svg>`;
+  return `<ha-iconset-svg name="${iconsetName}" size="24"><svg><defs>${iconDefs}</defs></svg></ha-iconset-svg>`;
 }
 
 // Generate the full MDI iconset
@@ -62,7 +61,9 @@ function genMDIIcons() {
     fs.readFileSync(path.resolve(ICON_PACKAGE_PATH, META_PATH), "UTF-8")
   );
   const iconNames = meta.map((iconInfo) => iconInfo.name);
-  fs.existsSync(OUTPUT_DIR) || fs.mkdirSync(OUTPUT_DIR);
+  if (!fs.existsSync(OUTPUT_DIR)) {
+    fs.mkdirSync(OUTPUT_DIR);
+  }
   fs.writeFileSync(MDI_OUTPUT_PATH, generateIconset("mdi", iconNames));
 }
 
@@ -81,7 +82,7 @@ function mapFiles(startPath, filter, mapFunc) {
 }
 
 // Find all icons used by the project.
-function findIcons(path, iconsetName) {
+function findIcons(searchPath, iconsetName) {
   const iconRegex = new RegExp(`${iconsetName}:[\\w-]+`, "g");
   const icons = new Set();
   function processFile(filename) {
@@ -93,8 +94,8 @@ function findIcons(path, iconsetName) {
       icons.add(match[0].substr(iconsetName.length + 1));
     }
   }
-  mapFiles(path, ".js", processFile);
-  mapFiles(path, ".ts", processFile);
+  mapFiles(searchPath, ".js", processFile);
+  mapFiles(searchPath, ".ts", processFile);
   return icons;
 }
 
diff --git a/build-scripts/gulp/release.js b/build-scripts/gulp/release.js
new file mode 100644
index 0000000000..f7e26b45ca
--- /dev/null
+++ b/build-scripts/gulp/release.js
@@ -0,0 +1,31 @@
+// 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/service-worker.js b/build-scripts/gulp/service-worker.js
new file mode 100644
index 0000000000..1303983790
--- /dev/null
+++ b/build-scripts/gulp/service-worker.js
@@ -0,0 +1,29 @@
+// Generate service worker.
+// Based on manifest, create a file with the content as service_worker.js
+/* eslint-disable import/no-dynamic-require */
+/* eslint-disable global-require */
+const gulp = require("gulp");
+const path = require("path");
+const fs = require("fs-extra");
+const config = require("../paths.js");
+
+const swPath = path.resolve(config.root, "service_worker.js");
+
+const writeSW = (content) => fs.outputFileSync(swPath, content.trim() + "\n");
+
+gulp.task("gen-service-worker-dev", (done) => {
+  writeSW(
+    `
+console.debug('Service worker disabled in development');
+  `
+  );
+  done();
+});
+
+gulp.task("gen-service-worker-prod", (done) => {
+  fs.copySync(
+    path.resolve(config.output, "service_worker.js"),
+    path.resolve(config.root, "service_worker.js")
+  );
+  done();
+});
diff --git a/gulp/tasks/translations.js b/build-scripts/gulp/translations.js
similarity index 100%
rename from gulp/tasks/translations.js
rename to build-scripts/gulp/translations.js
diff --git a/build-scripts/gulp/webpack.js b/build-scripts/gulp/webpack.js
new file mode 100644
index 0000000000..6ba6fa1e4a
--- /dev/null
+++ b/build-scripts/gulp/webpack.js
@@ -0,0 +1,63 @@
+// Tasks to run webpack.
+const gulp = require("gulp");
+const webpack = require("webpack");
+const { createAppConfig } = require("../webpack");
+
+const handler = (done) => (err, stats) => {
+  if (err) {
+    console.log(err.stack || err);
+    if (err.details) {
+      console.log(err.details);
+    }
+    return;
+  }
+
+  console.log(`Build done @ ${new Date().toLocaleTimeString()}`);
+
+  if (stats.hasErrors() || stats.hasWarnings()) {
+    console.log(stats.toString("minimal"));
+  }
+
+  if (done) {
+    done();
+  }
+};
+
+gulp.task("webpack-watch", () => {
+  const compiler = webpack([
+    createAppConfig({
+      isProdBuild: false,
+      latestBuild: true,
+      isStatsBuild: false,
+    }),
+    createAppConfig({
+      isProdBuild: false,
+      latestBuild: false,
+      isStatsBuild: false,
+    }),
+  ]);
+  compiler.watch({}, handler());
+  // we are not calling done, so this command will run forever
+});
+
+gulp.task(
+  "webpack-prod",
+  () =>
+    new Promise((resolve) =>
+      webpack(
+        [
+          createAppConfig({
+            isProdBuild: true,
+            latestBuild: true,
+            isStatsBuild: false,
+          }),
+          createAppConfig({
+            isProdBuild: true,
+            latestBuild: false,
+            isStatsBuild: false,
+          }),
+        ],
+        handler(resolve)
+      )
+    )
+);
diff --git a/build-scripts/paths.js b/build-scripts/paths.js
new file mode 100644
index 0000000000..28d553717b
--- /dev/null
+++ b/build-scripts/paths.js
@@ -0,0 +1,10 @@
+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"),
+};
diff --git a/build-scripts/webpack.js b/build-scripts/webpack.js
new file mode 100644
index 0000000000..1a48454661
--- /dev/null
+++ b/build-scripts/webpack.js
@@ -0,0 +1,184 @@
+const webpack = require("webpack");
+const fs = require("fs");
+const path = require("path");
+const TerserPlugin = require("terser-webpack-plugin");
+const WorkboxPlugin = require("workbox-webpack-plugin");
+const CompressionPlugin = require("compression-webpack-plugin");
+const zopfli = require("@gfx/zopfli");
+const ManifestPlugin = require("webpack-manifest-plugin");
+const paths = require("./paths.js");
+const { babelLoaderConfig } = require("./babel.js");
+
+let version = fs
+  .readFileSync(path.resolve(paths.polymer_dir, "setup.py"), "utf8")
+  .match(/\d{8}\.\d+/);
+if (!version) {
+  throw Error("Version not found");
+}
+version = version[0];
+
+const resolve = {
+  extensions: [".ts", ".js", ".json", ".tsx"],
+  alias: {
+    react: "preact-compat",
+    "react-dom": "preact-compat",
+    // Not necessary unless you consume a module using `createClass`
+    "create-react-class": "preact-compat/lib/create-react-class",
+    // Not necessary unless you consume a module requiring `react-dom-factories`
+    "react-dom-factories": "preact-compat/lib/react-dom-factories",
+  },
+};
+
+const plugins = [
+  // Ignore moment.js locales
+  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+  // Color.js is bloated, it contains all color definitions for all material color sets.
+  new webpack.NormalModuleReplacementPlugin(
+    /@polymer\/paper-styles\/color\.js$/,
+    path.resolve(paths.polymer_dir, "src/util/empty.js")
+  ),
+  // Ignore roboto pointing at CDN. We use local font-roboto-local.
+  new webpack.NormalModuleReplacementPlugin(
+    /@polymer\/font-roboto\/roboto\.js$/,
+    path.resolve(paths.polymer_dir, "src/util/empty.js")
+  ),
+  // Ignore mwc icons pointing at CDN.
+  new webpack.NormalModuleReplacementPlugin(
+    /@material\/mwc-icon\/mwc-icon-font\.js$/,
+    path.resolve(paths.polymer_dir, "src/util/empty.js")
+  ),
+];
+
+const optimization = (latestBuild) => ({
+  minimizer: [
+    new TerserPlugin({
+      cache: true,
+      parallel: true,
+      extractComments: true,
+      terserOptions: {
+        ecma: latestBuild ? undefined : 5,
+      },
+    }),
+  ],
+});
+
+const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
+  const isCI = process.env.CI === "true";
+
+  // Create an object mapping browser urls to their paths during build
+  const translationMetadata = require("../build-translations/translationMetadata.json");
+  const workBoxTranslationsTemplatedURLs = {};
+  const englishFP = translationMetadata["translations"]["en"]["fingerprints"];
+  Object.keys(englishFP).forEach((key) => {
+    workBoxTranslationsTemplatedURLs[
+      `/static/translations/${englishFP[key]}`
+    ] = `build-translations/output/${key}.json`;
+  });
+
+  const publicPath = latestBuild ? "/frontend_latest/" : "/frontend_es5/";
+
+  const entry = {
+    app: "./src/entrypoints/app.ts",
+    authorize: "./src/entrypoints/authorize.ts",
+    onboarding: "./src/entrypoints/onboarding.ts",
+    core: "./src/entrypoints/core.ts",
+    compatibility: "./src/entrypoints/compatibility.ts",
+    "custom-panel": "./src/entrypoints/custom-panel.ts",
+    "hass-icons": "./src/entrypoints/hass-icons.ts",
+  };
+
+  return {
+    mode: isProdBuild ? "production" : "development",
+    devtool: isProdBuild
+      ? "cheap-source-map "
+      : "inline-cheap-module-source-map",
+    entry,
+    module: {
+      rules: [
+        babelLoaderConfig({ latestBuild }),
+        {
+          test: /\.css$/,
+          use: "raw-loader",
+        },
+        {
+          test: /\.(html)$/,
+          use: {
+            loader: "html-loader",
+            options: {
+              exportAsEs6Default: true,
+            },
+          },
+        },
+      ],
+    },
+    optimization: optimization(latestBuild),
+    plugins: [
+      new ManifestPlugin(),
+      new webpack.DefinePlugin({
+        __DEV__: JSON.stringify(!isProdBuild),
+        __DEMO__: false,
+        __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
+        __VERSION__: JSON.stringify(version),
+        __STATIC_PATH__: "/static/",
+        "process.env.NODE_ENV": JSON.stringify(
+          isProdBuild ? "production" : "development"
+        ),
+      }),
+      ...plugins,
+      isProdBuild &&
+        !isCI &&
+        !isStatsBuild &&
+        new CompressionPlugin({
+          cache: true,
+          exclude: [/\.js\.map$/, /\.LICENSE$/, /\.py$/, /\.txt$/],
+          algorithm(input, compressionOptions, callback) {
+            return zopfli.gzip(input, compressionOptions, callback);
+          },
+        }),
+      latestBuild &&
+        new WorkboxPlugin.InjectManifest({
+          swSrc: "./src/entrypoints/service-worker-hass.js",
+          swDest: "service_worker.js",
+          importWorkboxFrom: "local",
+          include: [/\.js$/],
+          templatedURLs: {
+            ...workBoxTranslationsTemplatedURLs,
+            "/static/icons/favicon-192x192.png":
+              "public/icons/favicon-192x192.png",
+            "/static/fonts/roboto/Roboto-Light.ttf":
+              "node_modules/@polymer/font-roboto-local/fonts/roboto/Roboto-Light.ttf",
+            "/static/fonts/roboto/Roboto-Medium.ttf":
+              "node_modules/@polymer/font-roboto-local/fonts/roboto/Roboto-Medium.ttf",
+            "/static/fonts/roboto/Roboto-Regular.ttf":
+              "node_modules/@polymer/font-roboto-local/fonts/roboto/Roboto-Regular.ttf",
+            "/static/fonts/roboto/Roboto-Bold.ttf":
+              "node_modules/@polymer/font-roboto-local/fonts/roboto/Roboto-Bold.ttf",
+          },
+        }),
+    ].filter(Boolean),
+    output: {
+      filename: ({ chunk }) => {
+        const dontHash = new Set([
+          // Files who'se names should not be hashed.
+          // We currently have none.
+        ]);
+        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",
+      path: latestBuild ? paths.output : paths.output_es5,
+      publicPath,
+    },
+    resolve,
+  };
+};
+
+module.exports = {
+  resolve,
+  plugins,
+  optimization,
+  createAppConfig,
+};
diff --git a/config/webpack.js b/config/webpack.js
deleted file mode 100644
index 9c61f7fb84..0000000000
--- a/config/webpack.js
+++ /dev/null
@@ -1,48 +0,0 @@
-const webpack = require("webpack");
-const path = require("path");
-const TerserPlugin = require("terser-webpack-plugin");
-
-module.exports.resolve = {
-  extensions: [".ts", ".js", ".json", ".tsx"],
-  alias: {
-    react: "preact-compat",
-    "react-dom": "preact-compat",
-    // Not necessary unless you consume a module using `createClass`
-    "create-react-class": "preact-compat/lib/create-react-class",
-    // Not necessary unless you consume a module requiring `react-dom-factories`
-    "react-dom-factories": "preact-compat/lib/react-dom-factories",
-  },
-};
-
-module.exports.plugins = [
-  // Ignore moment.js locales
-  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-  // Color.js is bloated, it contains all color definitions for all material color sets.
-  new webpack.NormalModuleReplacementPlugin(
-    /@polymer\/paper-styles\/color\.js$/,
-    path.resolve(__dirname, "../src/util/empty.js")
-  ),
-  // Ignore roboto pointing at CDN. We use local font-roboto-local.
-  new webpack.NormalModuleReplacementPlugin(
-    /@polymer\/font-roboto\/roboto\.js$/,
-    path.resolve(__dirname, "../src/util/empty.js")
-  ),
-  // Ignore mwc icons pointing at CDN.
-  new webpack.NormalModuleReplacementPlugin(
-    /@material\/mwc-icon\/mwc-icon-font\.js$/,
-    path.resolve(__dirname, "../src/util/empty.js")
-  ),
-];
-
-module.exports.optimization = (latestBuild) => ({
-  minimizer: [
-    new TerserPlugin({
-      cache: true,
-      parallel: true,
-      extractComments: true,
-      terserOptions: {
-        ecma: latestBuild ? undefined : 5,
-      },
-    }),
-  ],
-});
diff --git a/demo/script/gen-icons.js b/demo/script/gen-icons.js
index 40a0f15a0d..b3c20a842a 100755
--- a/demo/script/gen-icons.js
+++ b/demo/script/gen-icons.js
@@ -4,7 +4,7 @@ const {
   findIcons,
   generateIconset,
   genMDIIcons,
-} = require("../../gulp/tasks/gen-icons.js");
+} = require("../../build-scripts/gulp/gen-icons.js");
 
 function genHademoIcons() {
   const iconNames = findIcons("./src", "hademo");
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
index 35c1ccdc93..a58d562e52 100644
--- a/demo/webpack.config.js
+++ b/demo/webpack.config.js
@@ -2,8 +2,8 @@ const path = require("path");
 const webpack = require("webpack");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const WorkboxPlugin = require("workbox-webpack-plugin");
-const { babelLoaderConfig } = require("../config/babel.js");
-const webpackBase = require("../config/webpack.js");
+const { babelLoaderConfig } = require("../build-scripts/babel.js");
+const webpackBase = require("../build-scripts/webpack.js");
 
 const isProd = process.env.NODE_ENV === "production";
 const isStatsBuild = process.env.STATS === "1";
@@ -72,7 +72,7 @@ module.exports = {
     ...webpackBase.plugins,
     isProd &&
       new WorkboxPlugin.GenerateSW({
-        swDest: "service_worker_es5.js",
+        swDest: "service_worker.js",
         importWorkboxFrom: "local",
         include: [],
       }),
diff --git a/gallery/webpack.config.js b/gallery/webpack.config.js
index 0db9c2f935..b252c03551 100644
--- a/gallery/webpack.config.js
+++ b/gallery/webpack.config.js
@@ -1,7 +1,7 @@
 const path = require("path");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
-const { babelLoaderConfig } = require("../config/babel.js");
-const webpackBase = require("../config/webpack.js");
+const { babelLoaderConfig } = require("../build-scripts/babel.js");
+const webpackBase = require("../build-scripts/webpack.js");
 
 const isProd = process.env.NODE_ENV === "production";
 const chunkFilename = isProd ? "chunk.[chunkhash].js" : "[name].chunk.js";
diff --git a/gulp/config.js b/gulp/config.js
deleted file mode 100644
index b011a04cf3..0000000000
--- a/gulp/config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-var path = require("path");
-
-module.exports = {
-  polymer_dir: path.resolve(__dirname, ".."),
-  build_dir: path.resolve(__dirname, "../build"),
-  output: path.resolve(__dirname, "../hass_frontend"),
-  output_es5: path.resolve(__dirname, "../hass_frontend_es5"),
-};
diff --git a/gulpfile.js b/gulpfile.js
index f3cb47a7e6..78578bad7b 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,3 +1,3 @@
-var requireDir = require('require-dir');
+var requireDir = require("require-dir");
 
-requireDir('./gulp/tasks/');
+requireDir("./build-scripts/gulp/");
diff --git a/hassio/script/gen-icons.js b/hassio/script/gen-icons.js
index 61fc39e212..b355ef752b 100755
--- a/hassio/script/gen-icons.js
+++ b/hassio/script/gen-icons.js
@@ -4,7 +4,7 @@ const {
   findIcons,
   generateIconset,
   genMDIIcons,
-} = require("../../gulp/tasks/gen-icons.js");
+} = require("../../build-scripts/gulp/gen-icons.js");
 
 function genHassioIcons() {
   const iconNames = findIcons("./src", "hassio");
diff --git a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
index 6ced46ca76..3d1cc54cdd 100644
--- a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
+++ b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
@@ -6,7 +6,7 @@ import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { getSignedPath } from "../../../../src/auth/data";
+import { getSignedPath } from "../../../../src/data/auth";
 
 import "../../../../src/resources/ha-style";
 import "../../../../src/components/dialog/ha-paper-dialog";
diff --git a/hassio/webpack.config.js b/hassio/webpack.config.js
index 022bbb563c..e58d2df301 100644
--- a/hassio/webpack.config.js
+++ b/hassio/webpack.config.js
@@ -3,8 +3,8 @@ const CompressionPlugin = require("compression-webpack-plugin");
 const zopfli = require("@gfx/zopfli");
 
 const config = require("./config.js");
-const { babelLoaderConfig } = require("../config/babel.js");
-const webpackBase = require("../config/webpack.js");
+const { babelLoaderConfig } = require("../build-scripts/babel.js");
+const webpackBase = require("../build-scripts/webpack.js");
 
 const isProdBuild = process.env.NODE_ENV === "production";
 const isCI = process.env.CI === "true";
diff --git a/package.json b/package.json
index fc793d7e09..5b3213a8a7 100644
--- a/package.json
+++ b/package.json
@@ -125,6 +125,7 @@
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.12.4",
+    "fs-extra": "^7.0.1",
     "gulp": "^4.0.0",
     "gulp-foreach": "^0.1.0",
     "gulp-hash": "^4.2.2",
@@ -134,10 +135,12 @@
     "gulp-jsonminify": "^1.1.0",
     "gulp-merge-json": "^1.3.1",
     "gulp-rename": "^1.4.0",
+    "gulp-zopfli-green": "^3.0.1",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^1.3.1",
     "lint-staged": "^8.1.5",
+    "lodash.template": "^4.4.0",
     "merge-stream": "^1.0.1",
     "mocha": "^6.0.2",
     "parse5": "^5.1.0",
@@ -160,6 +163,7 @@
     "webpack": "^4.29.6",
     "webpack-cli": "^3.3.0",
     "webpack-dev-server": "^3.2.1",
+    "webpack-manifest-plugin": "^2.0.4",
     "workbox-webpack-plugin": "^4.1.1"
   },
   "resolutions": {
diff --git a/public/__init__.py b/public/__init__.py
index 50b6b4a508..1debde5485 100644
--- a/public/__init__.py
+++ b/public/__init__.py
@@ -1,30 +1,7 @@
 """Frontend for Home Assistant."""
-import os
-from user_agents import parse
-
-FAMILY_MIN_VERSION = {
-    'Chrome': 55,          # Async/await
-    'Chrome Mobile': 55,
-    'Firefox': 52,         # Async/await
-    'Firefox Mobile': 52,
-    'Opera': 42,           # Async/await
-    'Edge': 15,            # Async/await
-    'Safari': 10.1,        # Async/await
-}
+from pathlib import Path
 
 
 def where():
     """Return path to the frontend."""
-    return os.path.dirname(__file__)
-
-
-def version(useragent):
-    """Get the version for given user agent."""
-    useragent = parse(useragent)
-
-    # on iOS every browser uses the Safari engine
-    if useragent.os.family == 'iOS':
-        return useragent.os.version[0] >= FAMILY_MIN_VERSION['Safari']
-
-    version = FAMILY_MIN_VERSION.get(useragent.browser.family)
-    return version and useragent.browser.version[0] >= version
+    return Path(__file__).parent
diff --git a/public/icons/favicon-1024x1024.png b/public/static/icons/favicon-1024x1024.png
similarity index 100%
rename from public/icons/favicon-1024x1024.png
rename to public/static/icons/favicon-1024x1024.png
diff --git a/public/icons/favicon-192x192.png b/public/static/icons/favicon-192x192.png
similarity index 100%
rename from public/icons/favicon-192x192.png
rename to public/static/icons/favicon-192x192.png
diff --git a/public/icons/favicon-384x384.png b/public/static/icons/favicon-384x384.png
similarity index 100%
rename from public/icons/favicon-384x384.png
rename to public/static/icons/favicon-384x384.png
diff --git a/public/icons/favicon-512x512.png b/public/static/icons/favicon-512x512.png
similarity index 100%
rename from public/icons/favicon-512x512.png
rename to public/static/icons/favicon-512x512.png
diff --git a/public/icons/favicon-apple-180x180.png b/public/static/icons/favicon-apple-180x180.png
similarity index 100%
rename from public/icons/favicon-apple-180x180.png
rename to public/static/icons/favicon-apple-180x180.png
diff --git a/public/icons/favicon.ico b/public/static/icons/favicon.ico
similarity index 100%
rename from public/icons/favicon.ico
rename to public/static/icons/favicon.ico
diff --git a/public/icons/mask-icon.svg b/public/static/icons/mask-icon.svg
similarity index 100%
rename from public/icons/mask-icon.svg
rename to public/static/icons/mask-icon.svg
diff --git a/public/icons/tile-win-150x150.png b/public/static/icons/tile-win-150x150.png
similarity index 100%
rename from public/icons/tile-win-150x150.png
rename to public/static/icons/tile-win-150x150.png
diff --git a/public/icons/tile-win-310x150.png b/public/static/icons/tile-win-310x150.png
similarity index 100%
rename from public/icons/tile-win-310x150.png
rename to public/static/icons/tile-win-310x150.png
diff --git a/public/icons/tile-win-310x310.png b/public/static/icons/tile-win-310x310.png
similarity index 100%
rename from public/icons/tile-win-310x310.png
rename to public/static/icons/tile-win-310x310.png
diff --git a/public/icons/tile-win-70x70.png b/public/static/icons/tile-win-70x70.png
similarity index 100%
rename from public/icons/tile-win-70x70.png
rename to public/static/icons/tile-win-70x70.png
diff --git a/public/images/card_media_player_bg.png b/public/static/images/card_media_player_bg.png
similarity index 100%
rename from public/images/card_media_player_bg.png
rename to public/static/images/card_media_player_bg.png
diff --git a/public/images/config_ecobee_thermostat.png b/public/static/images/config_ecobee_thermostat.png
similarity index 100%
rename from public/images/config_ecobee_thermostat.png
rename to public/static/images/config_ecobee_thermostat.png
diff --git a/public/images/config_fitbit_app.png b/public/static/images/config_fitbit_app.png
similarity index 100%
rename from public/images/config_fitbit_app.png
rename to public/static/images/config_fitbit_app.png
diff --git a/public/images/config_flows/config_homematicip_cloud.png b/public/static/images/config_flows/config_homematicip_cloud.png
similarity index 100%
rename from public/images/config_flows/config_homematicip_cloud.png
rename to public/static/images/config_flows/config_homematicip_cloud.png
diff --git a/public/images/config_icloud.png b/public/static/images/config_icloud.png
similarity index 100%
rename from public/images/config_icloud.png
rename to public/static/images/config_icloud.png
diff --git a/public/images/config_insteon.png b/public/static/images/config_insteon.png
similarity index 100%
rename from public/images/config_insteon.png
rename to public/static/images/config_insteon.png
diff --git a/public/images/config_philips_hue.jpg b/public/static/images/config_philips_hue.jpg
similarity index 100%
rename from public/images/config_philips_hue.jpg
rename to public/static/images/config_philips_hue.jpg
diff --git a/public/images/config_webos.png b/public/static/images/config_webos.png
similarity index 100%
rename from public/images/config_webos.png
rename to public/static/images/config_webos.png
diff --git a/public/images/config_wink.png b/public/static/images/config_wink.png
similarity index 100%
rename from public/images/config_wink.png
rename to public/static/images/config_wink.png
diff --git a/public/images/darksky/weather-cloudy.svg b/public/static/images/darksky/weather-cloudy.svg
similarity index 100%
rename from public/images/darksky/weather-cloudy.svg
rename to public/static/images/darksky/weather-cloudy.svg
diff --git a/public/images/darksky/weather-fog.svg b/public/static/images/darksky/weather-fog.svg
similarity index 100%
rename from public/images/darksky/weather-fog.svg
rename to public/static/images/darksky/weather-fog.svg
diff --git a/public/images/darksky/weather-hail.svg b/public/static/images/darksky/weather-hail.svg
similarity index 100%
rename from public/images/darksky/weather-hail.svg
rename to public/static/images/darksky/weather-hail.svg
diff --git a/public/images/darksky/weather-night.svg b/public/static/images/darksky/weather-night.svg
similarity index 100%
rename from public/images/darksky/weather-night.svg
rename to public/static/images/darksky/weather-night.svg
diff --git a/public/images/darksky/weather-partlycloudy.svg b/public/static/images/darksky/weather-partlycloudy.svg
similarity index 100%
rename from public/images/darksky/weather-partlycloudy.svg
rename to public/static/images/darksky/weather-partlycloudy.svg
diff --git a/public/images/darksky/weather-pouring.svg b/public/static/images/darksky/weather-pouring.svg
similarity index 100%
rename from public/images/darksky/weather-pouring.svg
rename to public/static/images/darksky/weather-pouring.svg
diff --git a/public/images/darksky/weather-rainy.svg b/public/static/images/darksky/weather-rainy.svg
similarity index 100%
rename from public/images/darksky/weather-rainy.svg
rename to public/static/images/darksky/weather-rainy.svg
diff --git a/public/images/darksky/weather-snowy.svg b/public/static/images/darksky/weather-snowy.svg
similarity index 100%
rename from public/images/darksky/weather-snowy.svg
rename to public/static/images/darksky/weather-snowy.svg
diff --git a/public/images/darksky/weather-sunny.svg b/public/static/images/darksky/weather-sunny.svg
similarity index 100%
rename from public/images/darksky/weather-sunny.svg
rename to public/static/images/darksky/weather-sunny.svg
diff --git a/public/images/darksky/weather-windy.svg b/public/static/images/darksky/weather-windy.svg
similarity index 100%
rename from public/images/darksky/weather-windy.svg
rename to public/static/images/darksky/weather-windy.svg
diff --git a/public/images/image-broken.svg b/public/static/images/image-broken.svg
similarity index 100%
rename from public/images/image-broken.svg
rename to public/static/images/image-broken.svg
diff --git a/public/images/logo_automatic.png b/public/static/images/logo_automatic.png
similarity index 100%
rename from public/images/logo_automatic.png
rename to public/static/images/logo_automatic.png
diff --git a/public/images/logo_axis.png b/public/static/images/logo_axis.png
similarity index 100%
rename from public/images/logo_axis.png
rename to public/static/images/logo_axis.png
diff --git a/public/images/logo_deconz.jpeg b/public/static/images/logo_deconz.jpeg
similarity index 100%
rename from public/images/logo_deconz.jpeg
rename to public/static/images/logo_deconz.jpeg
diff --git a/public/images/logo_philips_hue.png b/public/static/images/logo_philips_hue.png
similarity index 100%
rename from public/images/logo_philips_hue.png
rename to public/static/images/logo_philips_hue.png
diff --git a/public/images/logo_plex_mediaserver.png b/public/static/images/logo_plex_mediaserver.png
similarity index 100%
rename from public/images/logo_plex_mediaserver.png
rename to public/static/images/logo_plex_mediaserver.png
diff --git a/public/images/notification-badge.png b/public/static/images/notification-badge.png
similarity index 100%
rename from public/images/notification-badge.png
rename to public/static/images/notification-badge.png
diff --git a/public/images/smart-tv.png b/public/static/images/smart-tv.png
similarity index 100%
rename from public/images/smart-tv.png
rename to public/static/images/smart-tv.png
diff --git a/script/build_frontend b/script/build_frontend
index 81b4986f3b..eddb895a53 100755
--- a/script/build_frontend
+++ b/script/build_frontend
@@ -6,19 +6,4 @@ set -e
 
 cd "$(dirname "$0")/.."
 
-BUILD_DIR=build
-BUILD_TRANSLATIONS_DIR=build-translations
-OUTPUT_DIR=hass_frontend
-OUTPUT_DIR_ES5=hass_frontend_es5
-
-rm -rf $OUTPUT_DIR $OUTPUT_DIR_ES5 $BUILD_DIR $BUILD_TRANSLATIONS_DIR
-
-# Build frontend
-./node_modules/.bin/gulp build-translations gen-icons
-NODE_ENV=production ./node_modules/.bin/webpack
-
-# Generate the __init__ file
-echo "VERSION = '`git rev-parse HEAD`'" >> $OUTPUT_DIR/__init__.py
-echo "CREATED_AT = `date +%s`" >> $OUTPUT_DIR/__init__.py
-echo "VERSION = '`git rev-parse HEAD`'" >> $OUTPUT_DIR_ES5/__init__.py
-echo "CREATED_AT = `date +%s`" >> $OUTPUT_DIR_ES5/__init__.py
+./node_modules/.bin/gulp build-release
diff --git a/script/develop b/script/develop
index 24c1253dc0..f0be37820c 100755
--- a/script/develop
+++ b/script/develop
@@ -6,14 +6,4 @@ set -e
 
 cd "$(dirname "$0")/.."
 
-BUILD_DIR=build
-OUTPUT_DIR=hass_frontend
-OUTPUT_DIR_ES5=hass_frontend_es5
-
-rm -rf $OUTPUT_DIR $OUTPUT_DIR_ES5 $BUILD_DIR
-mkdir $OUTPUT_DIR $OUTPUT_DIR_ES5
-# Needed in case frontend repo installed with pip3 install -e
-cp -r public/__init__.py $OUTPUT_DIR_ES5/
-
-./node_modules/.bin/gulp build-translations gen-icons
-./node_modules/.bin/webpack --watch --progress
+./node_modules/.bin/gulp develop
diff --git a/script/size_stats b/script/size_stats
index 4b6601a480..f6c95545eb 100755
--- a/script/size_stats
+++ b/script/size_stats
@@ -7,5 +7,5 @@ set -e
 cd "$(dirname "$0")/.."
 
 STATS=1 NODE_ENV=production webpack --profile --json > compilation-stats.json
-npx webpack-bundle-analyzer compilation-stats.json hass_frontend
+npx webpack-bundle-analyzer compilation-stats.json hass_frontend/frontend_latest
 rm compilation-stats.json
diff --git a/setup.py b/setup.py
index 0e754b6250..d2d90d398b 100644
--- a/setup.py
+++ b/setup.py
@@ -2,21 +2,13 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20190427.0",
+    version="20190502.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",
     author_email="hello@home-assistant.io",
     license="Apache License 2.0",
-    packages=find_packages(
-        include=[
-            "hass_frontend",
-            "hass_frontend_es5",
-            "hass_frontend.*",
-            "hass_frontend_es5.*",
-        ]
-    ),
-    install_requires=["user-agents==2.0.0"],
+    packages=find_packages(include=["hass_frontend", "hass_frontend.*"]),
     include_package_data=True,
     zip_safe=False,
 )
diff --git a/src/auth/data.ts b/src/auth/data.ts
deleted file mode 100644
index f970e90d52..0000000000
--- a/src/auth/data.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { HomeAssistant } from "../types";
-import { SignedPath } from "./types";
-
-export const getSignedPath = (
-  hass: HomeAssistant,
-  path: string
-): Promise<SignedPath> => hass.callWS({ type: "auth/sign_path", path });
diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts
index 10a190cca8..4935fac9dd 100644
--- a/src/auth/ha-authorize.ts
+++ b/src/auth/ha-authorize.ts
@@ -8,7 +8,7 @@ import {
   css,
 } from "lit-element";
 import "./ha-auth-flow";
-import { AuthProvider } from "../data/auth";
+import { AuthProvider, fetchAuthProviders } from "../data/auth";
 import { registerServiceWorker } from "../util/register-service-worker";
 
 import(/* webpackChunkName: "pick-auth-provider" */ "../auth/ha-pick-auth-provider");
@@ -135,7 +135,9 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
   private async _fetchAuthProviders() {
     // Fetch auth providers
     try {
-      const response = await (window as any).providersPromise;
+      // We prefetch this data on page load in authorize.html.template for modern builds
+      const response = await ((window as any).providersPromise ||
+        fetchAuthProviders());
       const authProviders = await response.json();
 
       // Forward to main screen which will redirect to right onboarding page.
diff --git a/src/auth/types.ts b/src/auth/types.ts
deleted file mode 100644
index bb1b00180a..0000000000
--- a/src/auth/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface SignedPath {
-  path: string;
-}
diff --git a/src/cards/ha-camera-card.js b/src/cards/ha-camera-card.js
index c26b60b72c..c59f847429 100644
--- a/src/cards/ha-camera-card.js
+++ b/src/cards/ha-camera-card.js
@@ -5,6 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import computeStateName from "../common/entity/compute_state_name";
 import EventsMixin from "../mixins/events-mixin";
 import LocalizeMixin from "../mixins/localize-mixin";
+import { fetchThumbnailUrlWithCache } from "../data/camera";
 
 const UPDATE_INTERVAL = 10000; // ms
 /*
@@ -54,6 +55,8 @@ class HaCameraCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           src="[[cameraFeedSrc]]"
           class="camera-feed"
           alt="[[_computeStateName(stateObj)]]"
+          on-load="_imageLoaded"
+          on-error="_imageError"
         />
       </template>
       <div class="caption">
@@ -98,23 +101,23 @@ class HaCameraCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
     clearInterval(this.timer);
   }
 
+  _imageLoaded() {
+    this.imageLoaded = true;
+  }
+
+  _imageError() {
+    this.imageLoaded = false;
+  }
+
   cardTapped() {
     this.fire("hass-more-info", { entityId: this.stateObj.entity_id });
   }
 
   async updateCameraFeedSrc() {
-    try {
-      const { content_type: contentType, content } = await this.hass.callWS({
-        type: "camera_thumbnail",
-        entity_id: this.stateObj.entity_id,
-      });
-      this.setProperties({
-        imageLoaded: true,
-        cameraFeedSrc: `data:${contentType};base64, ${content}`,
-      });
-    } catch (err) {
-      this.imageLoaded = false;
-    }
+    this.cameraFeedSrc = await fetchThumbnailUrlWithCache(
+      this.hass,
+      this.stateObj.entity_id
+    );
   }
 
   _computeStateName(stateObj) {
diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts
index 3cc329a87f..471905673f 100644
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@@ -28,19 +28,22 @@ class HaCard extends LitElement {
         display: block;
         transition: all 0.3s ease-out;
       }
-      .header:not(:empty) {
-        font-size: 24px;
+      .header:not(:empty),
+      .header::slotted(*) {
+        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);
         letter-spacing: -0.012em;
         line-height: 32px;
-        opacity: 0.87;
         padding: 24px 16px 16px;
+        display: block;
       }
     `;
   }
 
   protected render(): TemplateResult {
     return html`
-      <div class="header">${this.header}</div>
+      <slot class="header" name="header">${this.header}</slot>
       <slot></slot>
     `;
   }
diff --git a/src/data/auth.ts b/src/data/auth.ts
index 92a44130e2..77c7b40d17 100644
--- a/src/data/auth.ts
+++ b/src/data/auth.ts
@@ -1,3 +1,5 @@
+import { HomeAssistant } from "../types";
+
 export interface AuthProvider {
   name: string;
   id: string;
@@ -7,3 +9,17 @@ export interface AuthProvider {
 export interface Credential {
   type: string;
 }
+
+export interface SignedPath {
+  path: string;
+}
+
+export const getSignedPath = (
+  hass: HomeAssistant,
+  path: string
+): Promise<SignedPath> => hass.callWS({ type: "auth/sign_path", path });
+
+export const fetchAuthProviders = () =>
+  fetch("/auth/providers", {
+    credentials: "same-origin",
+  });
diff --git a/src/data/camera.ts b/src/data/camera.ts
index 62ff707130..ab40da3dd8 100644
--- a/src/data/camera.ts
+++ b/src/data/camera.ts
@@ -1,5 +1,6 @@
 import { HomeAssistant, CameraEntity } from "../types";
 import { timeCachePromiseFunc } from "../common/util/time-cache-function-promise";
+import { getSignedPath } from "./auth";
 
 export const CAMERA_SUPPORT_ON_OFF = 1;
 export const CAMERA_SUPPORT_STREAM = 2;
@@ -22,16 +23,29 @@ export const computeMJPEGStreamUrl = (entity: CameraEntity) =>
     entity.attributes.access_token
   }`;
 
-export const fetchThumbnailWithCache = (
+export const fetchThumbnailUrlWithCache = (
   hass: HomeAssistant,
   entityId: string
-) => timeCachePromiseFunc("_cameraTmb", 9000, fetchThumbnail, hass, entityId);
+) =>
+  timeCachePromiseFunc(
+    "_cameraTmbUrl",
+    9000,
+    fetchThumbnailUrl,
+    hass,
+    entityId
+  );
 
-export const fetchThumbnail = (hass: HomeAssistant, entityId: string) =>
-  hass.callWS<CameraThumbnail>({
+export const fetchThumbnailUrl = (hass: HomeAssistant, entityId: string) =>
+  getSignedPath(hass, `/api/camera_proxy/${entityId}`).then(({ path }) => path);
+
+export const fetchThumbnail = (hass: HomeAssistant, entityId: string) => {
+  // tslint:disable-next-line: no-console
+  console.warn("This method has been deprecated.");
+  return hass.callWS<CameraThumbnail>({
     type: "camera_thumbnail",
     entity_id: entityId,
   });
+};
 
 export const fetchStreamUrl = (
   hass: HomeAssistant,
diff --git a/src/data/onboarding.ts b/src/data/onboarding.ts
index 05a54be1a0..83002acd6b 100644
--- a/src/data/onboarding.ts
+++ b/src/data/onboarding.ts
@@ -9,7 +9,10 @@ interface UserStepResponse {
   auth_code: string;
 }
 
-export const onboardUserStep = async (params: {
+export const fetchOnboardingOverview = () =>
+  fetch("/api/onboarding", { credentials: "same-origin" });
+
+export const onboardUserStep = (params: {
   client_id: string;
   name: string;
   username: string;
diff --git a/src/dialogs/more-info/controls/more-info-climate.js b/src/dialogs/more-info/controls/more-info-climate.js
index d0c4d419af..3fb90fed61 100644
--- a/src/dialogs/more-info/controls/more-info-climate.js
+++ b/src/dialogs/more-info/controls/more-info-climate.js
@@ -200,14 +200,15 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
               >
                 <paper-listbox
                   slot="dropdown-content"
-                  selected="{{operationIndex}}"
+                  selected="[[stateObj.attributes.operation_mode]]"
+                  attr-for-selected="item-name"
+                  on-selected-changed="handleOperationmodeChanged"
                 >
                   <template
                     is="dom-repeat"
                     items="[[stateObj.attributes.operation_list]]"
-                    on-dom-change="handleOperationListUpdate"
                   >
-                    <paper-item
+                    <paper-item item-name$="[[item]]"
                       >[[_localizeOperationMode(localize, item)]]</paper-item
                     >
                   </template>
@@ -224,13 +225,19 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
               dynamic-align=""
               label="[[localize('ui.card.climate.fan_mode')]]"
             >
-              <paper-listbox slot="dropdown-content" selected="{{fanIndex}}">
+              <paper-listbox
+                slot="dropdown-content"
+                selected="[[stateObj.attributes.fan_mode]]"
+                attr-for-selected="item-name"
+                on-selected-changed="handleFanmodeChanged"
+              >
                 <template
                   is="dom-repeat"
                   items="[[stateObj.attributes.fan_list]]"
-                  on-dom-change="handleFanListUpdate"
                 >
-                  <paper-item>[[_localizeFanMode(localize, item)]]</paper-item>
+                  <paper-item item-name$="[[item]]"
+                    >[[_localizeFanMode(localize, item)]]
+                  </paper-item>
                 </template>
               </paper-listbox>
             </ha-paper-dropdown-menu>
@@ -244,13 +251,17 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
               dynamic-align=""
               label="[[localize('ui.card.climate.swing_mode')]]"
             >
-              <paper-listbox slot="dropdown-content" selected="{{swingIndex}}">
+              <paper-listbox
+                slot="dropdown-content"
+                selected="[[stateObj.attributes.swing_mode]]"
+                attr-for-selected="item-name"
+                on-selected-changed="handleSwingmodeChanged"
+              >
                 <template
                   is="dom-repeat"
                   items="[[stateObj.attributes.swing_list]]"
-                  on-dom-change="handleSwingListUpdate"
                 >
-                  <paper-item>[[item]]</paper-item>
+                  <paper-item item-name$="[[item]]">[[item]]</paper-item>
                 </template>
               </paper-listbox>
             </ha-paper-dropdown-menu>
@@ -297,23 +308,6 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
         observer: "stateObjChanged",
       },
 
-      operationIndex: {
-        type: Number,
-        value: -1,
-        observer: "handleOperationmodeChanged",
-      },
-
-      fanIndex: {
-        type: Number,
-        value: -1,
-        observer: "handleFanmodeChanged",
-      },
-
-      swingIndex: {
-        type: Number,
-        value: -1,
-        observer: "handleSwingmodeChanged",
-      },
       awayToggleChecked: Boolean,
       auxToggleChecked: Boolean,
       onToggleChecked: Boolean,
@@ -346,36 +340,6 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
     }
   }
 
-  handleOperationListUpdate() {
-    // force polymer to recognize selected item change (to update actual label)
-    this.operationIndex = -1;
-    if (this.stateObj.attributes.operation_list) {
-      this.operationIndex = this.stateObj.attributes.operation_list.indexOf(
-        this.stateObj.attributes.operation_mode
-      );
-    }
-  }
-
-  handleSwingListUpdate() {
-    // force polymer to recognize selected item change (to update actual label)
-    this.swingIndex = -1;
-    if (this.stateObj.attributes.swing_list) {
-      this.swingIndex = this.stateObj.attributes.swing_list.indexOf(
-        this.stateObj.attributes.swing_mode
-      );
-    }
-  }
-
-  handleFanListUpdate() {
-    // force polymer to recognize selected item change (to update actual label)
-    this.fanIndex = -1;
-    if (this.stateObj.attributes.fan_list) {
-      this.fanIndex = this.stateObj.attributes.fan_list.indexOf(
-        this.stateObj.attributes.fan_mode
-      );
-    }
-  }
-
   computeTemperatureStepSize(hass, stateObj) {
     if (stateObj.attributes.target_temp_step) {
       return stateObj.attributes.target_temp_step;
@@ -517,33 +481,27 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
     this.callServiceHelper(newVal ? "turn_on" : "turn_off", {});
   }
 
-  handleFanmodeChanged(fanIndex) {
-    // Selected Option will transition to '' before transitioning to new value
-    if (fanIndex === "" || fanIndex === -1) return;
-    const fanInput = this.stateObj.attributes.fan_list[fanIndex];
-    if (fanInput === this.stateObj.attributes.fan_mode) return;
-    this.callServiceHelper("set_fan_mode", { fan_mode: fanInput });
+  handleFanmodeChanged(ev) {
+    const oldVal = this.stateObj.attributes.fan_mode;
+    const newVal = ev.detail.value;
+    if (!newVal || oldVal === newVal) return;
+    this.callServiceHelper("set_fan_mode", { fan_mode: newVal });
   }
 
-  handleOperationmodeChanged(operationIndex) {
-    // Selected Option will transition to '' before transitioning to new value
-    if (operationIndex === "" || operationIndex === -1) return;
-    const operationInput = this.stateObj.attributes.operation_list[
-      operationIndex
-    ];
-    if (operationInput === this.stateObj.attributes.operation_mode) return;
-
+  handleOperationmodeChanged(ev) {
+    const oldVal = this.stateObj.attributes.operation_mode;
+    const newVal = ev.detail.value;
+    if (!newVal || oldVal === newVal) return;
     this.callServiceHelper("set_operation_mode", {
-      operation_mode: operationInput,
+      operation_mode: newVal,
     });
   }
 
-  handleSwingmodeChanged(swingIndex) {
-    // Selected Option will transition to '' before transitioning to new value
-    if (swingIndex === "" || swingIndex === -1) return;
-    const swingInput = this.stateObj.attributes.swing_list[swingIndex];
-    if (swingInput === this.stateObj.attributes.swing_mode) return;
-    this.callServiceHelper("set_swing_mode", { swing_mode: swingInput });
+  handleSwingmodeChanged(ev) {
+    const oldVal = this.stateObj.attributes.swing_mode;
+    const newVal = ev.detail.value;
+    if (!newVal || oldVal === newVal) return;
+    this.callServiceHelper("set_swing_mode", { swing_mode: newVal });
   }
 
   callServiceHelper(service, data) {
diff --git a/src/dialogs/more-info/controls/more-info-fan.js b/src/dialogs/more-info/controls/more-info-fan.js
index a57b702f9f..63837ea052 100644
--- a/src/dialogs/more-info/controls/more-info-fan.js
+++ b/src/dialogs/more-info/controls/more-info-fan.js
@@ -49,12 +49,17 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
             dynamic-align=""
             label="[[localize('ui.card.fan.speed')]]"
           >
-            <paper-listbox slot="dropdown-content" selected="{{speedIndex}}">
+            <paper-listbox
+              slot="dropdown-content"
+              selected="[[stateObj.attributes.speed]]"
+              on-selected-changed="speedChanged"
+              attr-for-selected="item-name"
+            >
               <template
                 is="dom-repeat"
                 items="[[stateObj.attributes.speed_list]]"
               >
-                <paper-item>[[item]]</paper-item>
+                <paper-item item-name$="[[item]]">[[item]]</paper-item>
               </template>
             </paper-listbox>
           </ha-paper-dropdown-menu>
@@ -108,12 +113,6 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
         observer: "stateObjChanged",
       },
 
-      speedIndex: {
-        type: Number,
-        value: -1,
-        observer: "speedChanged",
-      },
-
       oscillationToggleChecked: {
         type: Boolean,
       },
@@ -124,9 +123,6 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
     if (newVal) {
       this.setProperties({
         oscillationToggleChecked: newVal.attributes.oscillating,
-        speedIndex: newVal.attributes.speed_list
-          ? newVal.attributes.speed_list.indexOf(newVal.attributes.speed)
-          : -1,
       });
     }
 
@@ -144,17 +140,15 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
     );
   }
 
-  speedChanged(speedIndex) {
-    var speedInput;
-    // Selected Option will transition to '' before transitioning to new value
-    if (speedIndex === "" || speedIndex === -1) return;
+  speedChanged(ev) {
+    var oldVal = this.stateObj.attributes.speed;
+    var newVal = ev.detail.value;
 
-    speedInput = this.stateObj.attributes.speed_list[speedIndex];
-    if (speedInput === this.stateObj.attributes.speed) return;
+    if (!newVal || oldVal === newVal) return;
 
     this.hass.callService("fan", "turn_on", {
       entity_id: this.stateObj.entity_id,
-      speed: speedInput,
+      speed: 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 0251f67f07..495cb33fbd 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.js
+++ b/src/dialogs/more-info/controls/more-info-media_player.js
@@ -154,9 +154,14 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
             label-float=""
             label="[[localize('ui.card.media_player.source')]]"
           >
-            <paper-listbox slot="dropdown-content" selected="{{sourceIndex}}">
+            <paper-listbox
+              slot="dropdown-content"
+              attr-for-selected="item-name"
+              selected="[[playerObj.source]]"
+              on-selected-changed="handleSourceChanged"
+            >
               <template is="dom-repeat" items="[[playerObj.sourceList]]">
-                <paper-item>[[item]]</paper-item>
+                <paper-item item-name$="[[item]]">[[item]]</paper-item>
               </template>
             </paper-listbox>
           </ha-paper-dropdown-menu>
@@ -174,7 +179,8 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
               <paper-listbox
                 slot="dropdown-content"
                 attr-for-selected="item-name"
-                selected="{{SoundModeInput}}"
+                selected="[[playerObj.soundMode]]"
+                on-selected-changed="handleSoundModeChanged"
               >
                 <template is="dom-repeat" items="[[playerObj.soundModeList]]">
                   <paper-item item-name$="[[item]]">[[item]]</paper-item>
@@ -214,18 +220,6 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
         observer: "playerObjChanged",
       },
 
-      sourceIndex: {
-        type: Number,
-        value: 0,
-        observer: "handleSourceChanged",
-      },
-
-      SoundModeInput: {
-        type: String,
-        value: "",
-        observer: "handleSoundModeChanged",
-      },
-
       ttsLoaded: {
         type: Boolean,
         computed: "computeTTSLoaded(hass)",
@@ -248,14 +242,6 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
   }
 
   playerObjChanged(newVal, oldVal) {
-    if (newVal && newVal.sourceList !== undefined) {
-      this.sourceIndex = newVal.sourceList.indexOf(newVal.source);
-    }
-
-    if (newVal && newVal.soundModeList !== undefined) {
-      this.SoundModeInput = newVal.soundMode;
-    }
-
     if (oldVal) {
       setTimeout(() => {
         this.fire("iron-resize");
@@ -342,36 +328,26 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
     this.playerObj.nextTrack();
   }
 
-  handleSourceChanged(sourceIndex, sourceIndexOld) {
-    // Selected Option will transition to '' before transitioning to new value
-    if (
-      !this.playerObj ||
-      !this.playerObj.supportsSelectSource ||
-      this.playerObj.sourceList === undefined ||
-      sourceIndex < 0 ||
-      sourceIndex >= this.playerObj.sourceList ||
-      sourceIndexOld === undefined
-    ) {
-      return;
-    }
+  handleSourceChanged(ev) {
+    if (!this.playerObj) return;
 
-    const sourceInput = this.playerObj.sourceList[sourceIndex];
+    var oldVal = this.playerObj.source;
+    var newVal = ev.detail.value;
 
-    if (sourceInput === this.playerObj.source) {
-      return;
-    }
+    if (!newVal || oldVal === newVal) return;
 
-    this.playerObj.selectSource(sourceInput);
+    this.playerObj.selectSource(newVal);
   }
 
-  handleSoundModeChanged(newVal, oldVal) {
-    if (
-      oldVal &&
-      newVal !== this.playerObj.soundMode &&
-      this.playerObj.supportsSelectSoundMode
-    ) {
-      this.playerObj.selectSoundMode(newVal);
-    }
+  handleSoundModeChanged(ev) {
+    if (!this.playerObj) return;
+
+    var oldVal = this.playerObj.soundMode;
+    var newVal = ev.detail.value;
+
+    if (!newVal || oldVal === newVal) return;
+
+    this.playerObj.selectSoundMode(newVal);
   }
 
   handleVolumeTap() {
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 4f3a7af179..91f59f1a5f 100644
--- a/src/dialogs/more-info/controls/more-info-water_heater.js
+++ b/src/dialogs/more-info/controls/more-info-water_heater.js
@@ -100,14 +100,15 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
               >
                 <paper-listbox
                   slot="dropdown-content"
-                  selected="{{operationIndex}}"
+                  selected="[[stateObj.attributes.operation_mode]]"
+                  attr-for-selected="item-name"
+                  on-selected-changed="handleOperationmodeChanged"
                 >
                   <template
                     is="dom-repeat"
                     items="[[stateObj.attributes.operation_list]]"
-                    on-dom-change="handleOperationListUpdate"
                   >
-                    <paper-item
+                    <paper-item item-name$="[[item]]"
                       >[[_localizeOperationMode(localize, item)]]</paper-item
                     >
                   </template>
@@ -146,11 +147,6 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
         observer: "stateObjChanged",
       },
 
-      operationIndex: {
-        type: Number,
-        value: -1,
-        observer: "handleOperationmodeChanged",
-      },
       awayToggleChecked: Boolean,
     };
   }
@@ -173,16 +169,6 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
     }
   }
 
-  handleOperationListUpdate() {
-    // force polymer to recognize selected item change (to update actual label)
-    this.operationIndex = -1;
-    if (this.stateObj.attributes.operation_list) {
-      this.operationIndex = this.stateObj.attributes.operation_list.indexOf(
-        this.stateObj.attributes.operation_mode
-      );
-    }
-  }
-
   computeTemperatureStepSize(hass, stateObj) {
     if (stateObj.attributes.target_temp_step) {
       return stateObj.attributes.target_temp_step;
@@ -239,16 +225,12 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
     this.callServiceHelper("set_away_mode", { away_mode: newVal });
   }
 
-  handleOperationmodeChanged(operationIndex) {
-    // Selected Option will transition to '' before transitioning to new value
-    if (operationIndex === "" || operationIndex === -1) return;
-    const operationInput = this.stateObj.attributes.operation_list[
-      operationIndex
-    ];
-    if (operationInput === this.stateObj.attributes.operation_mode) return;
-
+  handleOperationmodeChanged(ev) {
+    const oldVal = this.stateObj.attributes.operation_mode;
+    const newVal = ev.detail.value;
+    if (!newVal || oldVal === newVal) return;
     this.callServiceHelper("set_operation_mode", {
-      operation_mode: operationInput,
+      operation_mode: newVal,
     });
   }
 
diff --git a/src/entrypoints/service-worker-bootstrap.js b/src/entrypoints/service-worker-bootstrap.js
deleted file mode 100644
index e296139be7..0000000000
--- a/src/entrypoints/service-worker-bootstrap.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/* global importScripts */
-importScripts("/static/service-worker-hass.js");
diff --git a/src/entrypoints/service-worker-hass.js b/src/entrypoints/service-worker-hass.js
index 80eea35497..9e0aab0e70 100644
--- a/src/entrypoints/service-worker-hass.js
+++ b/src/entrypoints/service-worker-hass.js
@@ -1,3 +1,7 @@
+/*
+  This file is not run through webpack, but instead is directly manipulated
+  by Workbox Webpack plugin. So we cannot use __DEV__ or other constants.
+*/
 /* global workbox clients */
 
 function initRouting() {
@@ -17,9 +21,7 @@ function initRouting() {
 
   // Get manifest and service worker from network.
   workbox.routing.registerRoute(
-    new RegExp(
-      `${location.host}/(service_worker.js|service_worker_es5.js|manifest.json)`
-    ),
+    new RegExp(`${location.host}/(service_worker.js|manifest.json)`),
     new workbox.strategies.NetworkOnly()
   );
 
@@ -161,11 +163,8 @@ self.addEventListener("message", (message) => {
 });
 
 workbox.setConfig({
-  debug: __DEV__,
+  debug: false,
 });
 
-if (!__DEV__) {
-  initRouting();
-}
-
+initRouting();
 initPushNotifications();
diff --git a/src/html/_js_base.html.template b/src/html/_js_base.html.template
new file mode 100644
index 0000000000..f9fac27261
--- /dev/null
+++ b/src/html/_js_base.html.template
@@ -0,0 +1,25 @@
+    <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>
diff --git a/src/html/authorize.html.template b/src/html/authorize.html.template
index a8feb6560b..7adeebd2cc 100644
--- a/src/html/authorize.html.template
+++ b/src/html/authorize.html.template
@@ -1,10 +1,21 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <title>Home Assistant</title>
-    <link rel='preload' href='/static/fonts/roboto/Roboto-Light.ttf' as='font' crossorigin />
-    <link rel='preload' href='/static/fonts/roboto/Roboto-Regular.ttf' as='font' crossorigin />
-    <%= require('raw-loader!./_header.html.template').default %>
+    <link rel="preload" href="<%= latestPageJS %>" as="script" crossorigin />
+    <link
+      rel="preload"
+      href="/static/fonts/roboto/Roboto-Light.ttf"
+      as="font"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="/static/fonts/roboto/Roboto-Regular.ttf"
+      as="font"
+      crossorigin
+    />
+    <%= renderTemplate('_header') %>
     <style>
       .content {
         padding: 20px 16px;
@@ -27,29 +38,33 @@
   </head>
   <body>
     <div class="content">
-      <div class='header'>
-        <img src="/static/icons/favicon-192x192.png" height="52">
+      <div class="header">
+        <img src="/static/icons/favicon-192x192.png" height="52" />
         Home Assistant
       </div>
       <ha-authorize><p>Initializing</p></ha-authorize>
     </div>
-    <% if (!latestBuild) { %>
-      <script src="/static/custom-elements-es5-adapter.js"></script>
-      <script src="<%= compatibility %>"></script>
-    <% } %>
-    <script>
-    window.providersPromise = fetch('/auth/providers', { credentials: 'same-origin' });
 
-    var webComponentsSupported = (
-      'customElements' in window &&
-      'content' in document.createElement('template'));
-    if (!webComponentsSupported) {
-      var e = document.createElement('script');
-      e.src = '/static/webcomponents-bundle.js';
-      document.write(e.outerHTML);
-    }
+    <%= renderTemplate('_js_base') %>
+
+    <script type="module">
+      import "<%= latestPageJS %>";
+      import "<%= latestHassIconsJS %>";
+      window.providersPromise = fetch("/auth/providers", {
+        credentials: "same-origin",
+      });
+    </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("<%= es5Compatibility %>");
+          _ls("<%= es5PageJS %>");
+          _ls("<%= es5HassIconsJS %>");
+        }
+      })();
     </script>
-    <script src="<%= entrypoint %>"></script>
-    <script src='<%= hassIconsJS %>' async></script>
   </body>
 </html>
diff --git a/src/html/index.html.template b/src/html/index.html.template
index 6113419f01..2a49775a4e 100644
--- a/src/html/index.html.template
+++ b/src/html/index.html.template
@@ -1,70 +1,87 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    <link rel='preload' href='<%= coreJS %>' as='script'/>
-    <link rel='preload' href='/static/fonts/roboto/Roboto-Regular.ttf' as='font' crossorigin />
-    <link rel='preload' href='/static/fonts/roboto/Roboto-Medium.ttf' as='font' crossorigin />
-    <%= require('raw-loader!./_header.html.template').default %>
+    <link rel="preload" href="<%= latestCoreJS %>" as="script" crossorigin />
+    <link
+      rel="preload"
+      href="/static/fonts/roboto/Roboto-Regular.ttf"
+      as="font"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="/static/fonts/roboto/Roboto-Medium.ttf"
+      as="font"
+      crossorigin
+    />
+    <%= renderTemplate('_header') %>
     <title>Home Assistant</title>
-    <link rel='apple-touch-icon' sizes='180x180'
-          href='/static/icons/favicon-apple-180x180.png'>
-    <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4">
-    <meta name="apple-itunes-app" content="app-id=1099568401">
-    <meta name='apple-mobile-web-app-capable' content='yes'>
-    <meta name="msapplication-square70x70logo" content="/static/icons/tile-win-70x70.png"/>
-    <meta name="msapplication-square150x150logo" content="/static/icons/tile-win-150x150.png"/>
-    <meta name="msapplication-wide310x150logo" content="/static/icons/tile-win-310x150.png"/>
-    <meta name="msapplication-square310x310logo" content="/static/icons/tile-win-310x310.png"/>
-    <meta name="msapplication-TileColor" content="#03a9f4ff"/>
-    <meta name='mobile-web-app-capable' content='yes'>
-    <meta name='referrer' content='same-origin'>
-    <meta name='theme-color' content='{{ theme_color }}'>
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/static/icons/favicon-apple-180x180.png"
+    />
+    <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4" />
+    <meta name="apple-itunes-app" content="app-id=1099568401" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta
+      name="msapplication-square70x70logo"
+      content="/static/icons/tile-win-70x70.png"
+    />
+    <meta
+      name="msapplication-square150x150logo"
+      content="/static/icons/tile-win-150x150.png"
+    />
+    <meta
+      name="msapplication-wide310x150logo"
+      content="/static/icons/tile-win-310x150.png"
+    />
+    <meta
+      name="msapplication-square310x310logo"
+      content="/static/icons/tile-win-310x310.png"
+    />
+    <meta name="msapplication-TileColor" content="#03a9f4ff" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="referrer" content="same-origin" />
+    <meta name="theme-color" content="#THEMEC" />
     <style>
       #ha-init-skeleton::before {
         display: block;
         content: "";
         height: 112px;
-        background-color: {{ theme_color }};
+        background-color: #THEMEC;
       }
     </style>
-    <script>
-      window.customPanelJS = '<%= customPanelJS %>';
-      window.noAuth = '{{ no_auth }}';
-      window.useOAuth = '{{ use_oauth }}'
-      window.Polymer = {
-        lazyRegister: true,
-        useNativeCSSProperties: true,
-        dom: 'shadow',
-        suppressTemplateNotifications: true,
-        suppressBindingNotifications: true,
-      };
-    </script>
   </head>
   <body>
-    <div id='ha-init-skeleton'></div>
-    <home-assistant>
-    </home-assistant>
-    <% if (!latestBuild) { %>
-      <script src="/static/custom-elements-es5-adapter.js"></script>
-      <script src="<%= compatibility %>"></script>
-    <% } %>
-    <script>
-      var webComponentsSupported = (
-        'customElements' in window &&
-        'content' in document.createElement('template'));
-      if (!webComponentsSupported) {
-        (function() {
-          var e = document.createElement('script');
-          e.src = '/static/webcomponents-bundle.js';
-          document.write(e.outerHTML);
-        }());
-      }
+    <div id="ha-init-skeleton"></div>
+    <home-assistant> </home-assistant>
+
+    <%= renderTemplate('_js_base') %>
+
+    <script type="module">
+      import "<%= latestCoreJS %>";
+      import "<%= latestAppJS %>";
+      import "<%= latestHassIconsJS %>";
+      window.customPanelJS = "<%= latestCustomPanelJS %>";
     </script>
-    <script src='<%= coreJS %>'></script>
-    <script src='<%= appJS %>'></script>
-    <script src='<%= hassIconsJS %>' async></script>
+
+    <script nomodule>
+      (function() {
+        // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
+        if (!isS101) {
+          window.customPanelJS = "<%= es5CustomPanelJS %>";
+          _ls("/static/polyfills/custom-elements-es5-adapter.js");
+          _ls("<%= es5Compatibility %>");
+          _ls("<%= es5CoreJS %>");
+          _ls("<%= es5AppJS %>");
+          _ls("<%= es5HassIconsJS %>");
+        }
+      })();
+    </script>
+
     {% for extra_url in extra_urls -%}
-      <link rel='import' href='{{ extra_url }}' async>
+    <link rel="import" href="{{ extra_url }}" async />
     {% endfor -%}
   </body>
 </html>
diff --git a/src/html/onboarding.html.template b/src/html/onboarding.html.template
index 50d1e52ec1..3febae22e3 100644
--- a/src/html/onboarding.html.template
+++ b/src/html/onboarding.html.template
@@ -1,10 +1,21 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <title>Home Assistant</title>
-    <link rel='preload' href='/static/fonts/roboto/Roboto-Light.ttf' as='font' crossorigin />
-    <link rel='preload' href='/static/fonts/roboto/Roboto-Regular.ttf' as='font' crossorigin />
-    <%= require('raw-loader!./_header.html.template').default %>
+    <link rel="preload" href="<%= latestPageJS %>" as="script" crossorigin />
+    <link
+      rel="preload"
+      href="/static/fonts/roboto/Roboto-Light.ttf"
+      as="font"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="/static/fonts/roboto/Roboto-Regular.ttf"
+      as="font"
+      crossorigin
+    />
+    <%= renderTemplate('_header') %>
     <style>
       .content {
         padding: 20px 16px;
@@ -28,30 +39,34 @@
   </head>
   <body>
     <div class="content">
-      <div class='header'>
-        <img src="/static/icons/favicon-192x192.png" height="52">
+      <div class="header">
+        <img src="/static/icons/favicon-192x192.png" height="52" />
         Home Assistant
       </div>
 
       <ha-onboarding>Initializing</ha-onboarding>
     </div>
-    <% if (!latestBuild) { %>
-      <script src="/static/custom-elements-es5-adapter.js"></script>
-      <script src="<%= compatibility %>"></script>
-    <% } %>
-    <script>
-    window.stepsPromise = fetch('/api/onboarding', { credentials: 'same-origin' });
 
-    var webComponentsSupported = (
-      'customElements' in window &&
-      'content' in document.createElement('template'));
-    if (!webComponentsSupported) {
-      var e = document.createElement('script');
-      e.src = '/static/webcomponents-bundle.js';
-      document.write(e.outerHTML);
-    }
+    <%= renderTemplate('_js_base') %>
+
+    <script type="module">
+      import "<%= latestPageJS %>";
+      import "<%= latestHassIconsJS %>";
+      window.stepsPromise = fetch("/api/onboarding", {
+        credentials: "same-origin",
+      });
+    </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("<%= es5Compatibility %>");
+          _ls("<%= es5PageJS %>");
+          _ls("<%= es5HassIconsJS %>");
+        }
+      })();
     </script>
-    <script src="<%= entrypoint %>"></script>
-    <script src='<%= hassIconsJS %>' async></script>
   </body>
 </html>
diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts
index 3ff8951ece..0e7ca75f1b 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">
+              <div class="header" slot="header">
                 <div class="name">${title}</div>
                 ${show_header_toggle === false
                   ? html``
@@ -114,12 +114,8 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
 
   static get styles(): CSSResult {
     return css`
-      ha-card {
-        padding: 16px;
-      }
-
       #states {
-        margin: -4px 0;
+        padding: 12px 16px;
       }
 
       #states > * {
@@ -131,28 +127,16 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
       }
 
       .header {
-        /* start paper-font-headline style */
-        font-family: "Roboto", "Noto", sans-serif;
-        -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
-        text-rendering: optimizeLegibility;
-        font-size: 24px;
-        font-weight: 400;
-        letter-spacing: -0.012em;
-        /* end paper-font-headline style */
-
-        line-height: 40px;
-        color: var(--primary-text-color);
-        padding: 4px 0 12px;
+        margin-bottom: -8px;
+        padding-bottom: 0px;
         display: flex;
         justify-content: space-between;
       }
 
       .header .name {
-        /* start paper-font-common-nowrap style */
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        /* end paper-font-common-nowrap */
       }
 
       .state-card-dialog {
diff --git a/src/panels/lovelace/common/generate-lovelace-config.ts b/src/panels/lovelace/common/generate-lovelace-config.ts
index 3e771733a2..c0b115e523 100644
--- a/src/panels/lovelace/common/generate-lovelace-config.ts
+++ b/src/panels/lovelace/common/generate-lovelace-config.ts
@@ -287,7 +287,7 @@ export const generateLovelaceConfig = (
 
   // User has no entities
   if (views.length === 1 && views[0].cards!.length === 0) {
-    import("../cards/hui-empty-state-card");
+    import(/* webpackChunkName: "hui-empty-state-card" */ "../cards/hui-empty-state-card");
     views[0].cards!.push({
       type: "custom:hui-empty-state-card",
     });
diff --git a/src/panels/lovelace/components/hui-image.ts b/src/panels/lovelace/components/hui-image.ts
index 0d5ad799d7..870ff7b51c 100644
--- a/src/panels/lovelace/components/hui-image.ts
+++ b/src/panels/lovelace/components/hui-image.ts
@@ -17,8 +17,7 @@ import {
 import { HomeAssistant, CameraEntity } from "../../../types";
 import { styleMap } from "lit-html/directives/style-map";
 import { classMap } from "lit-html/directives/class-map";
-import { b64toBlob } from "../../../common/file/b64-to-blob";
-import { fetchThumbnailWithCache } from "../../../data/camera";
+import { fetchThumbnailUrlWithCache } from "../../../data/camera";
 
 const UPDATE_INTERVAL = 10000;
 const DEFAULT_FILTER = "grayscale(100%)";
@@ -197,21 +196,20 @@ export class HuiImage extends LitElement {
     if (!this.hass || !this.cameraImage) {
       return;
     }
-    try {
-      const {
-        content_type: contentType,
-        content,
-      } = await fetchThumbnailWithCache(this.hass, this.cameraImage);
-      if (this._cameraImageSrc) {
-        URL.revokeObjectURL(this._cameraImageSrc);
-      }
-      this._cameraImageSrc = URL.createObjectURL(
-        b64toBlob(content, contentType)
-      );
-      this._onImageLoad();
-    } catch (err) {
+
+    const cameraState = this.hass.states[this.cameraImage] as
+      | CameraEntity
+      | undefined;
+
+    if (!cameraState) {
       this._onImageError();
+      return;
     }
+
+    this._cameraImageSrc = await fetchThumbnailUrlWithCache(
+      this.hass,
+      this.cameraImage
+    );
   }
 
   static get styles(): CSSResult {
diff --git a/src/panels/lovelace/elements/hui-state-badge-element.ts b/src/panels/lovelace/elements/hui-state-badge-element.ts
index 9ac63484cf..bb6a36b455 100644
--- a/src/panels/lovelace/elements/hui-state-badge-element.ts
+++ b/src/panels/lovelace/elements/hui-state-badge-element.ts
@@ -56,7 +56,11 @@ export class HuiStateBadgeElement extends LitElement
       <ha-state-label-badge
         .hass="${this.hass}"
         .state="${stateObj}"
-        .title="${computeStateName(stateObj)}"
+        .title="${this._config.title === undefined
+          ? computeStateName(stateObj)
+          : this._config.title === null
+          ? ""
+          : this._config.title}"
       ></ha-state-label-badge>
     `;
   }
diff --git a/src/panels/lovelace/elements/types.ts b/src/panels/lovelace/elements/types.ts
index bfc6ccdd2a..b5457e2a04 100644
--- a/src/panels/lovelace/elements/types.ts
+++ b/src/panels/lovelace/elements/types.ts
@@ -45,6 +45,7 @@ export interface ServiceButtonElementConfig extends LovelaceElementConfig {
 
 export interface StateBadgeElementConfig extends LovelaceElementConfig {
   entity: string;
+  title?: string;
 }
 
 export interface StateIconElementConfig extends LovelaceElementConfig {
diff --git a/src/translations/en.json b/src/translations/en.json
index fe58a46fdc..43c310c22b 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -549,6 +549,7 @@
     },
     "sidebar": {
       "developer_tools": "Developer tools",
+      "external_app_configuration": "App Configuration",
       "log_out": "Log out"
     },
     "panel": {
diff --git a/src/util/register-service-worker.ts b/src/util/register-service-worker.ts
index 9dfcf4b23a..e48c2dc437 100644
--- a/src/util/register-service-worker.ts
+++ b/src/util/register-service-worker.ts
@@ -1,6 +1,3 @@
-const serviceWorkerUrl =
-  __BUILD__ === "latest" ? "/service_worker.js" : "/service_worker_es5.js";
-
 export const registerServiceWorker = (notifyUpdate = true) => {
   if (
     !("serviceWorker" in navigator) ||
@@ -9,7 +6,7 @@ export const registerServiceWorker = (notifyUpdate = true) => {
     return;
   }
 
-  navigator.serviceWorker.register(serviceWorkerUrl).then((reg) => {
+  navigator.serviceWorker.register("/service_worker.js").then((reg) => {
     reg.addEventListener("updatefound", () => {
       const installingWorker = reg.installing;
       if (!installingWorker || !notifyUpdate) {
diff --git a/test-mocha/common/datetime/format_date.ts b/test-mocha/common/datetime/format_date.ts
index 9431d919ea..2ef3162799 100644
--- a/test-mocha/common/datetime/format_date.ts
+++ b/test-mocha/common/datetime/format_date.ts
@@ -8,10 +8,4 @@ describe("formatDate", () => {
   it("Formats English dates", () => {
     assert.strictEqual(formatDate(dateObj, "en"), "November 18, 2017");
   });
-
-  // Node only contains intl support for english formats. This test at least ensures
-  // the fallback to a different locale
-  it("Formats other dates", () => {
-    assert.strictEqual(formatDate(dateObj, "fr"), "2017 M11 18");
-  });
 });
diff --git a/test-mocha/common/datetime/format_date_time.ts b/test-mocha/common/datetime/format_date_time.ts
index 74a91d8c53..d909839b92 100644
--- a/test-mocha/common/datetime/format_date_time.ts
+++ b/test-mocha/common/datetime/format_date_time.ts
@@ -11,10 +11,4 @@ describe("formatDateTime", () => {
       "November 18, 2017, 11:12 AM"
     );
   });
-
-  // Node only contains intl support for english formats. This test at least ensures
-  // the fallback to a different locale
-  it("Formats other date times", () => {
-    assert.strictEqual(formatDateTime(dateObj, "fr"), "2017 M11 18 11:12");
-  });
 });
diff --git a/test-mocha/common/datetime/format_time.ts b/test-mocha/common/datetime/format_time.ts
index 84620e783a..4926e55663 100644
--- a/test-mocha/common/datetime/format_time.ts
+++ b/test-mocha/common/datetime/format_time.ts
@@ -8,10 +8,4 @@ describe("formatTime", () => {
   it("Formats English times", () => {
     assert.strictEqual(formatTime(dateObj, "en"), "11:12 AM");
   });
-
-  // Node only contains intl support for english formats. This test at least ensures
-  // the fallback to a different locale
-  it("Formats other times", () => {
-    assert.strictEqual(formatTime(dateObj, "fr"), "11:12");
-  });
 });
diff --git a/translations/af.json b/translations/af.json
index 205d9a085e..fd412c0aad 100644
--- a/translations/af.json
+++ b/translations/af.json
@@ -769,7 +769,7 @@
                                 }
                             },
                             "error": {
-                                "invalid_auth": "Ongeldige Gebruikersnaam of wagwoord",
+                                "invalid_auth": "Ongeldige gebruikersnaam of wagwoord",
                                 "invalid_code": "Ongeldige verifikasiekode"
                             },
                             "abort": {
@@ -868,6 +868,14 @@
                         "title": "Welkom tuis",
                         "no_devices": "Hierdie bladsy laat u toe om u toestelle te beheer, maar dit lyk asof u nog nie toestelle opgestel het nie. Gaan na die integrasies bladsy om te begin.",
                         "go_to_integrations_page": "Gaan na die integrasies bladsy."
+                    },
+                    "picture-elements": {
+                        "hold": "Hou:",
+                        "tap": "Tik:",
+                        "navigate_to": "Navigeer na {location}",
+                        "toggle": "Wissel {name}",
+                        "call_service": "Call diens {name}",
+                        "more_info": "Wys meer inligting: {name}"
                     }
                 },
                 "editor": {
@@ -884,7 +892,7 @@
                     "migrate": {
                         "header": "Opstellings Onversoenbaar",
                         "para_no_id": "Hierdie element het nie 'n ID nie. Voeg asseblief 'n ID by vir hierdie element in 'ui-lovelace.yaml'.",
-                        "para_migrate": "Druk die 'Migreer opstellings' knoppie as u wil hê Home Assistant moet vir u ID's by al u kaarte en aansigte outomaties byvoeg.",
+                        "para_migrate": "Druk die 'Migreer konfigurasie' knoppie as u wil hê Home Assistant moet vir u ID's by al u kaarte en aansigte outomaties byvoeg.",
                         "migrate": "Migreer opstellings"
                     },
                     "header": "Wysig gebruikerskoppelvlak",
diff --git a/translations/ca.json b/translations/ca.json
index 81147887e2..52f7dc57a8 100644
--- a/translations/ca.json
+++ b/translations/ca.json
@@ -868,6 +868,14 @@
                         "title": "Benvingut\/da a casa",
                         "no_devices": "Aquesta pàgina et permet controlar els teus dispositius, però sembla que encara no en tens cap configurat. Vés a la pàgina d'integracions per a començar.",
                         "go_to_integrations_page": "Vés a la pàgina d'integracions."
+                    },
+                    "picture-elements": {
+                        "hold": "Manté:",
+                        "tap": "Tocar:",
+                        "navigate_to": "Navega a {location}",
+                        "toggle": "Commuta {name}",
+                        "call_service": "Cridar servei {name}",
+                        "more_info": "Mostra més informació: {name}"
                     }
                 },
                 "editor": {
diff --git a/translations/de.json b/translations/de.json
index 05d87d90dd..7f0fe0cf35 100644
--- a/translations/de.json
+++ b/translations/de.json
@@ -868,6 +868,14 @@
                         "title": "Willkommen zu Hause",
                         "no_devices": "Auf dieser Seite kannst du deine Geräte steuern, es sieht jedoch so aus, als hättest du noch keine eingerichtet. Gehe zur Integrationsseite, um damit zu beginnen.",
                         "go_to_integrations_page": "Gehe zur Integrationsseite."
+                    },
+                    "picture-elements": {
+                        "hold": "Halten:",
+                        "tap": "Tippe auf:",
+                        "navigate_to": "Navigiere zu {location}",
+                        "toggle": "{name} umschalten",
+                        "call_service": "Dienst  {name} ausführen",
+                        "more_info": "Zeige weitere Informationen: {name}"
                     }
                 },
                 "editor": {
diff --git a/translations/en.json b/translations/en.json
index afd3e713df..423d6ed8f7 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -868,6 +868,14 @@
                         "title": "Welcome Home",
                         "no_devices": "This page allows you to control your devices, however it looks like you have no devices set up yet. Head to the integrations page to get started.",
                         "go_to_integrations_page": "Go to the integrations page."
+                    },
+                    "picture-elements": {
+                        "hold": "Hold:",
+                        "tap": "Tap:",
+                        "navigate_to": "Navigate to {location}",
+                        "toggle": "Toggle {name}",
+                        "call_service": "Call service {name}",
+                        "more_info": "Show more-info: {name}"
                     }
                 },
                 "editor": {
@@ -925,7 +933,8 @@
         },
         "sidebar": {
             "log_out": "Log out",
-            "developer_tools": "Developer tools"
+            "developer_tools": "Developer tools",
+            "external_app_configuration": "App Configuration"
         },
         "common": {
             "loading": "Loading",
diff --git a/translations/hu.json b/translations/hu.json
index 343e2b24cb..aa07c77221 100644
--- a/translations/hu.json
+++ b/translations/hu.json
@@ -868,6 +868,14 @@
                         "title": "Üdv Itthon",
                         "no_devices": "Ez az oldal lehetővé teszi az eszközeid vezérlését, de úgy tűnik, hogy még nincs beállítva egy sem. A kezdéshez lépj át az integrációs oldalra.",
                         "go_to_integrations_page": "Ugrás az 'integrációk' oldalra."
+                    },
+                    "picture-elements": {
+                        "hold": "Tartás:",
+                        "tap": "Koppintás:",
+                        "navigate_to": "Ugrás {location}",
+                        "toggle": "Váltás {name}",
+                        "call_service": "Szolgáltatás meghívása {name}",
+                        "more_info": "További információ megjelenítése: {name}"
                     }
                 },
                 "editor": {
diff --git a/translations/ko.json b/translations/ko.json
index 96bb97dc02..9070af6231 100644
--- a/translations/ko.json
+++ b/translations/ko.json
@@ -868,6 +868,14 @@
                         "title": "집에 오신 것을 환영합니다",
                         "no_devices": "이 페이지에서 기기를 제어 할 수 있지만, 기기가 아직 설정되지 않은 것 같습니다. 시작하려면 통합 페이지로 이동해주세요.",
                         "go_to_integrations_page": "통합 페이지로 이동하기."
+                    },
+                    "picture-elements": {
+                        "hold": "누르고 있기:",
+                        "tap": "탭:",
+                        "navigate_to": "{location} 으로 이동",
+                        "toggle": "{name} 토글",
+                        "call_service": "{name} 서비스 호출",
+                        "more_info": "추가 정보 표시: {name}"
                     }
                 },
                 "editor": {
diff --git a/translations/lb.json b/translations/lb.json
index 01380577ea..0600a76e42 100644
--- a/translations/lb.json
+++ b/translations/lb.json
@@ -868,6 +868,14 @@
                         "title": "Wëllkomm Doheem",
                         "no_devices": "Dës Säit erlaabt et iech är Apparater ze kontrolléiere, awer wéi et schéngt sinn nach keng Apparater ageriicht. Gitt op d'Integratioun's Säit fir unzefänken.",
                         "go_to_integrations_page": "Zur Integratiouns Säit goen"
+                    },
+                    "picture-elements": {
+                        "hold": "Gedréckt halen:",
+                        "tap": "Tippen:",
+                        "navigate_to": "Navigéieren zu {location}",
+                        "toggle": "{name} ëmschalten",
+                        "call_service": "Service {name} opruffen",
+                        "more_info": "méi Informatiounen: {name}"
                     }
                 },
                 "editor": {
diff --git a/translations/nb.json b/translations/nb.json
index 512b7d89d4..7901bad924 100644
--- a/translations/nb.json
+++ b/translations/nb.json
@@ -868,6 +868,12 @@
                         "title": "Velkommen hjem",
                         "no_devices": "Denne siden lar deg styre enhetene dine, men det ser ut til at du ikke har konfigurert noen enheter ennå. Gå til integrasjonssiden for å komme i gang.",
                         "go_to_integrations_page": "Gå til integrasjonssiden."
+                    },
+                    "picture-elements": {
+                        "hold": "Hold:",
+                        "tap": "Trykk:",
+                        "navigate_to": "Naviger til {location}",
+                        "more_info": "Vis mer info: {name}"
                     }
                 },
                 "editor": {
diff --git a/translations/nl.json b/translations/nl.json
index e5ed070a37..ea3a8b4063 100644
--- a/translations/nl.json
+++ b/translations/nl.json
@@ -868,6 +868,11 @@
                         "title": "Welkom thuis",
                         "no_devices": "Op deze pagina kun je je apparaten bedienen, maar het lijkt er op dat je nog geen apparaten hebt ingesteld. Ga naar de integraties pagina om te beginnen.",
                         "go_to_integrations_page": "Ga naar de integraties pagina."
+                    },
+                    "picture-elements": {
+                        "navigate_to": "Navigeer naar {location}",
+                        "toggle": "Omschakelen {name}",
+                        "more_info": "Meer informatie weergeven: {name}"
                     }
                 },
                 "editor": {
@@ -1132,7 +1137,7 @@
         "group": "Groep",
         "image_processing": "Beeldverwerking",
         "input_boolean": "Boolean invoer",
-        "input_datetime": "Invoer datum en tijd",
+        "input_datetime": "Voer datum en tijd in",
         "input_select": "Invoer selectie",
         "input_number": "Numerieke invoer",
         "input_text": "Tekstinvoer",
diff --git a/translations/pl.json b/translations/pl.json
index 2185e0df49..d13a26c2ad 100644
--- a/translations/pl.json
+++ b/translations/pl.json
@@ -582,7 +582,7 @@
                     "caption": "Chmura Home Assistant",
                     "description_login": "Zalogowany jako {email}",
                     "description_not_login": "Nie zalogowany",
-                    "description_features": "Sterowanie z spoza domu, integracja z Alexą i Google Assistant."
+                    "description_features": "Sterowanie spoza domu, integracja z Alexą i Google Assistant."
                 },
                 "integrations": {
                     "caption": "Integracje",
@@ -602,7 +602,7 @@
                         "firmware": "Oprogramowanie: {version}",
                         "device_unavailable": "urządzenie niedostępne",
                         "entity_unavailable": "encja niedostępna",
-                        "no_area": "Brak obszaru"
+                        "no_area": "brak"
                     }
                 },
                 "zha": {
@@ -868,6 +868,14 @@
                         "title": "Witaj w domu",
                         "no_devices": "Ta strona pozwala kontrolować urządzenia, ale wygląda na to, że nie masz jeszcze żadnych skonfigurowanych. Przejdź na stronę integracji, aby rozpocząć.",
                         "go_to_integrations_page": "Przejdź do strony integracji."
+                    },
+                    "picture-elements": {
+                        "hold": "Przytrzymanie:",
+                        "tap": "Dotknięcie:",
+                        "navigate_to": "Przejdź do {location}",
+                        "toggle": "Przełącz {nazwa}",
+                        "call_service": "Wywołaj usługę {nazwa}",
+                        "more_info": "Pokaż więcej informacji: {nazwa}"
                     }
                 },
                 "editor": {
diff --git a/translations/ru.json b/translations/ru.json
index 8e39355912..3202f2a9dd 100644
--- a/translations/ru.json
+++ b/translations/ru.json
@@ -868,6 +868,14 @@
                         "title": "Добро пожаловать домой",
                         "no_devices": "На этой странице можно управлять Вашими устройствами, однако похоже, что ни одно устройство еще не добавлено. Для начала перейдите на страницу интеграций.",
                         "go_to_integrations_page": "Перейти на страницу интеграций"
+                    },
+                    "picture-elements": {
+                        "hold": "Удержание:",
+                        "tap": "Нажатие:",
+                        "navigate_to": "Перейти к {location}",
+                        "toggle": "Переключить {name}",
+                        "call_service": "Вызвать службу {name}",
+                        "more_info": "Показать больше информации: {name}"
                     }
                 },
                 "editor": {
diff --git a/translations/zh-Hant.json b/translations/zh-Hant.json
index 0f4404891b..9d88035deb 100644
--- a/translations/zh-Hant.json
+++ b/translations/zh-Hant.json
@@ -868,6 +868,14 @@
                         "title": "歡迎回家",
                         "no_devices": "此頁面允許進行控制所擁有的裝置。看起來您尚未設定任何裝置，從設定中的整合頁面開始吧。",
                         "go_to_integrations_page": "轉至整合頁面。"
+                    },
+                    "picture-elements": {
+                        "hold": "按住：",
+                        "tap": "點擊：",
+                        "navigate_to": "導航至 {location}",
+                        "toggle": "切換 {name}",
+                        "call_service": "執行服務 {name}",
+                        "more_info": "顯示更多資訊：{name}"
                     }
                 },
                 "editor": {
diff --git a/webpack.config.js b/webpack.config.js
index 43305047c5..86d088bce0 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,207 +1,24 @@
-const fs = require("fs");
-const path = require("path");
-const webpack = require("webpack");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
-const WorkboxPlugin = require("workbox-webpack-plugin");
-const CompressionPlugin = require("compression-webpack-plugin");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const zopfli = require("@gfx/zopfli");
-const translationMetadata = require("./build-translations/translationMetadata.json");
-const { babelLoaderConfig } = require("./config/babel.js");
-const webpackBase = require("./config/webpack.js");
-
-const version = fs.readFileSync("setup.py", "utf8").match(/\d{8}\.\d+/);
-if (!version) {
-  throw Error("Version not found");
-}
-const VERSION = version[0];
-const isCI = process.env.CI === "true";
-const isStatsBuild = process.env.STATS === "1";
-
-const generateJSPage = (entrypoint, latestBuild) => {
-  return new HtmlWebpackPlugin({
-    inject: false,
-    template: `./src/html/${entrypoint}.html.template`,
-    // Default templateParameterGenerator code
-    // https://github.com/jantimon/html-webpack-plugin/blob/master/index.js#L719
-    templateParameters: (compilation, assets, option) => ({
-      latestBuild,
-      compatibility: assets.chunks.compatibility.entry,
-      entrypoint: assets.chunks[entrypoint].entry,
-      hassIconsJS: assets.chunks["hass-icons"].entry,
-    }),
-    filename: `${entrypoint}.html`,
-  });
-};
-
-// Create an object mapping browser urls to their paths during build
-const workBoxTranslationsTemplatedURLs = {};
-const englishFP = translationMetadata["translations"]["en"]["fingerprints"];
-Object.keys(englishFP).forEach((key) => {
-  workBoxTranslationsTemplatedURLs[
-    `/static/translations/${englishFP[key]}`
-  ] = `build-translations/output/${key}.json`;
-});
-
-function createConfig(isProdBuild, latestBuild) {
-  const buildPath = latestBuild ? "hass_frontend/" : "hass_frontend_es5/";
-  const publicPath = latestBuild ? "/frontend_latest/" : "/frontend_es5/";
-
-  const entry = {
-    app: "./src/entrypoints/app.ts",
-    authorize: "./src/entrypoints/authorize.ts",
-    onboarding: "./src/entrypoints/onboarding.ts",
-    core: "./src/entrypoints/core.ts",
-    compatibility: "./src/entrypoints/compatibility.ts",
-    "custom-panel": "./src/entrypoints/custom-panel.ts",
-    "hass-icons": "./src/entrypoints/hass-icons.ts",
-  };
-
-  if (latestBuild) {
-    entry["service-worker-hass"] = "./src/entrypoints/service-worker-hass.js";
-  }
-
-  return {
-    mode: isProdBuild ? "production" : "development",
-    devtool: isProdBuild
-      ? "cheap-source-map "
-      : "inline-cheap-module-source-map",
-    entry,
-    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__: JSON.stringify(!isProdBuild),
-        __DEMO__: false,
-        __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
-        __VERSION__: JSON.stringify(VERSION),
-        __STATIC_PATH__: "/static/",
-        "process.env.NODE_ENV": JSON.stringify(
-          isProdBuild ? "production" : "development"
-        ),
-      }),
-      new CopyWebpackPlugin(
-        [
-          latestBuild &&
-            "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
-          latestBuild && { from: "public", to: "." },
-          latestBuild && {
-            from: "build-translations/output",
-            to: `translations`,
-          },
-          latestBuild && {
-            from: "node_modules/@polymer/font-roboto-local/fonts",
-            to: "fonts",
-          },
-          latestBuild &&
-            "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
-          latestBuild &&
-            "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js.map",
-          latestBuild && {
-            from:
-              "node_modules/react-big-calendar/lib/css/react-big-calendar.css",
-            to: "panels/calendar/",
-          },
-          latestBuild && {
-            from: "node_modules/leaflet/dist/leaflet.css",
-            to: `images/leaflet/`,
-          },
-          latestBuild && {
-            from: "node_modules/leaflet/dist/images",
-            to: `images/leaflet/`,
-          },
-          !latestBuild && "public/__init__.py",
-        ].filter(Boolean)
-      ),
-      ...webpackBase.plugins,
-      isProdBuild &&
-        !isCI &&
-        !isStatsBuild &&
-        new CompressionPlugin({
-          cache: true,
-          exclude: [/\.js\.map$/, /\.LICENSE$/, /\.py$/, /\.txt$/],
-          algorithm(input, compressionOptions, callback) {
-            return zopfli.gzip(input, compressionOptions, callback);
-          },
-        }),
-      new HtmlWebpackPlugin({
-        inject: false,
-        template: "./src/html/index.html.template",
-        // Default templateParameterGenerator code
-        // https://github.com/jantimon/html-webpack-plugin/blob/master/index.js#L719
-        templateParameters: (compilation, assets, option) => ({
-          latestBuild,
-          compatibility: assets.chunks.compatibility.entry,
-          appJS: assets.chunks.app.entry,
-          coreJS: assets.chunks.core.entry,
-          customPanelJS: assets.chunks["custom-panel"].entry,
-          hassIconsJS: assets.chunks["hass-icons"].entry,
-        }),
-        filename: `index.html`,
-      }),
-      generateJSPage("onboarding", latestBuild),
-      generateJSPage("authorize", latestBuild),
-      new WorkboxPlugin.InjectManifest({
-        swSrc: "./src/entrypoints/service-worker-bootstrap.js",
-        swDest: "service_worker.js",
-        importWorkboxFrom: "local",
-        include: [/\.js$/],
-        templatedURLs: {
-          ...workBoxTranslationsTemplatedURLs,
-          "/static/icons/favicon-192x192.png":
-            "public/icons/favicon-192x192.png",
-          "/static/fonts/roboto/Roboto-Light.ttf":
-            "node_modules/@polymer/font-roboto-local/fonts/roboto/Roboto-Light.ttf",
-          "/static/fonts/roboto/Roboto-Medium.ttf":
-            "node_modules/@polymer/font-roboto-local/fonts/roboto/Roboto-Medium.ttf",
-          "/static/fonts/roboto/Roboto-Regular.ttf":
-            "node_modules/@polymer/font-roboto-local/fonts/roboto/Roboto-Regular.ttf",
-          "/static/fonts/roboto/Roboto-Bold.ttf":
-            "node_modules/@polymer/font-roboto-local/fonts/roboto/Roboto-Bold.ttf",
-        },
-      }),
-    ].filter(Boolean),
-    output: {
-      filename: ({ chunk }) => {
-        const dontHash = new Set([
-          // This is loaded from service-worker-bootstrap.js
-          // which is processed by Workbox, not Webpack
-          "service-worker-hass",
-        ]);
-        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",
-      path: path.resolve(__dirname, buildPath),
-      publicPath,
-    },
-    resolve: webpackBase.resolve,
-  };
-}
+const { createAppConfig } = require("./build-scripts/webpack.js");
 
 const isProdBuild = process.env.NODE_ENV === "production";
-const configs = [createConfig(isProdBuild, /* latestBuild */ true)];
+const isStatsBuild = process.env.STATS === "1";
+
+const configs = [
+  createAppConfig({
+    isProdBuild,
+    isStatsBuild,
+    latestBuild: true,
+  }),
+];
+// const configs = [createConfig(isProdBuild, /* latestBuild */ true)];
 if (isProdBuild && !isStatsBuild) {
-  configs.push(createConfig(isProdBuild, /* latestBuild */ false));
+  configs.push(
+    createAppConfig({
+      isProdBuild,
+      isStatsBuild,
+      latestBuild: false,
+    })
+  );
 }
+
 module.exports = configs;
diff --git a/yarn.lock b/yarn.lock
index a0ae7e1bc2..3302efc068 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -719,7 +719,7 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
-"@gfx/zopfli@^1.0.11":
+"@gfx/zopfli@^1.0.11", "@gfx/zopfli@^1.0.9":
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/@gfx/zopfli/-/zopfli-1.0.11.tgz#6ced06b4566a5feb0036fe6a1e0262ce6cb1d6c5"
   integrity sha512-wW+hi+bqdYCpBIvL8g7RYub9YXf5crhZK9SNk/VZmbF177Em1VwFv488qyh8iBpCo6GptcP1Zam0bJfY3VmMbg==
@@ -2599,7 +2599,7 @@ any-observable@^0.3.0:
   resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.3.0.tgz#af933475e5806a67d0d7df090dd5e8bef65d119b"
   integrity sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==
 
-any-promise@^1.0.0:
+any-promise@^1.0.0, any-promise@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
   integrity sha1-q8av7tzqUugJzcA3au0845Y10X8=
@@ -3749,6 +3749,11 @@ bytes@3.0.0:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
   integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
 
+bytes@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
+  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
+
 cacache@^11.0.2, cacache@^11.2.0, cacache@^11.3.1:
   version "11.3.2"
   resolved "https://registry.yarnpkg.com/cacache/-/cacache-11.3.2.tgz#2d81e308e3d258ca38125b676b98b2ac9ce69bfa"
@@ -4157,7 +4162,7 @@ clone-stats@^1.0.0:
   resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-1.0.0.tgz#b3782dff8bb5474e18b9b6bf0fdfe782f8777680"
   integrity sha1-s3gt/4u1R04Yuba/D9/ngvh3doA=
 
-clone@^1.0.0:
+clone@^1.0.0, clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
@@ -4901,6 +4906,13 @@ default-resolution@^2.0.0:
   resolved "https://registry.yarnpkg.com/default-resolution/-/default-resolution-2.0.0.tgz#bcb82baa72ad79b426a76732f1a81ad6df26d684"
   integrity sha1-vLgrqnKtebQmp2cy8aga1t8m1oQ=
 
+defaults@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
+  integrity sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=
+  dependencies:
+    clone "^1.0.2"
+
 define-properties@^1.1.2, define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -6393,7 +6405,7 @@ fresh@0.5.2:
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
   integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
 
-from2@^2.1.0:
+from2@^2.1.0, from2@^2.1.1:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
   integrity sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=
@@ -6420,6 +6432,15 @@ fs-extra@^4.0.2:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
+fs-extra@^7.0.0, fs-extra@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
+  integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
 fs-minipass@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d"
@@ -6451,12 +6472,12 @@ fs.realpath@^1.0.0:
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
 fsevents@^1.0.0, fsevents@^1.2.7:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.7.tgz#4851b664a3783e52003b3c66eb0eee1074933aa4"
-  integrity sha512-Pxm6sI2MeBD7RdD12RYsqaP0nMiwx8eZBXCa6z2L+mRHm2DYrOYwihmhjpkdjUHwQhslWQjRpEgNq4XvBmaAuw==
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.9.tgz#3f5ed66583ccd6f400b5a00db6f7e861363e388f"
+  integrity sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==
   dependencies:
-    nan "^2.9.2"
-    node-pre-gyp "^0.10.0"
+    nan "^2.12.1"
+    node-pre-gyp "^0.12.0"
 
 function-bind@^1.1.1:
   version "1.1.1"
@@ -7001,6 +7022,20 @@ gulp-util@~2.2.14:
     through2 "^0.5.0"
     vinyl "^0.2.1"
 
+gulp-zopfli-green@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/gulp-zopfli-green/-/gulp-zopfli-green-3.0.1.tgz#5a7dc7b2eb5e33eacaf7fb5a0e5434f15e893d9b"
+  integrity sha512-/ZLtK7VXe8sRpMiVMpu1VtGK/tUEA/B7QPUC0/6leMgsijfMaNelcmcerXTex0+F9SozVPUt+kjK/hU88QtvXA==
+  dependencies:
+    "@gfx/zopfli" "^1.0.9"
+    bytes "^3.0.0"
+    defaults "^1.0.2"
+    fancy-log "^1.3.2"
+    into-stream "^4.0.0"
+    plugin-error "^1.0.1"
+    stream-to-array "^2.0.2"
+    through2 "^3.0.0"
+
 gulp@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/gulp/-/gulp-4.0.0.tgz#95766c601dade4a77ed3e7b2b6dc03881b596366"
@@ -7566,6 +7601,14 @@ intl-messageformat@^2.2.0:
   dependencies:
     intl-messageformat-parser "1.4.0"
 
+into-stream@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/into-stream/-/into-stream-4.0.0.tgz#ef10ee2ffb6f78af34c93194bbdc36c35f7d8a9d"
+  integrity sha512-i29KNyE5r0Y/UQzcQ0IbZO1MYJ53Jn0EcFRZPj5FzWKYH17kDFEOwuA+3jroymOI06SW1dEDnly9A1CAreC5dg==
+  dependencies:
+    from2 "^2.1.1"
+    p-is-promise "^2.0.0"
+
 invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -8885,7 +8928,7 @@ lodash.values@~2.4.1:
   dependencies:
     lodash.keys "~2.4.1"
 
-lodash@4.17.11, lodash@^4.11.1, lodash@^4.16.6, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.8.0:
+lodash@4.17.11, "lodash@>=3.5 <5", lodash@^4.11.1, lodash@^4.16.6, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.8.0:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
@@ -9560,7 +9603,7 @@ mz@^2.4.0, mz@^2.6.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nan@^2.9.2:
+nan@^2.12.1:
   version "2.13.2"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.13.2.tgz#f51dc7ae66ba7d5d55e1e6d4d8092e802c9aefe7"
   integrity sha512-TghvYc72wlMGMVMluVo9WRJc0mB8KxxF/gZ4YYFy7V2ZQX9l7rgbPg7vjS9mt6U5HXODVFVI2bOduCzwOMv/lw==
@@ -9685,10 +9728,10 @@ node-forge@0.7.5:
     util "^0.11.0"
     vm-browserify "0.0.4"
 
-node-pre-gyp@^0.10.0:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.10.3.tgz#3070040716afdc778747b61b6887bf78880b80fc"
-  integrity sha512-d1xFs+C/IPS8Id0qPTZ4bUT8wWryfR/OzzAFxweG+uLN85oPzyo2Iw6bVlLQ/JOdgNonXLCoRyqDzDWq4iw72A==
+node-pre-gyp@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz#39ba4bb1439da030295f899e3b520b7785766149"
+  integrity sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==
   dependencies:
     detect-libc "^1.0.2"
     mkdirp "^0.5.1"
@@ -12389,6 +12432,13 @@ stream-shift@^1.0.0:
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
   integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=
 
+stream-to-array@^2.0.2:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/stream-to-array/-/stream-to-array-2.3.0.tgz#bbf6b39f5f43ec30bc71babcb37557acecf34353"
+  integrity sha1-u/azn19D7DC8cbq8s3VXrOzzQ1M=
+  dependencies:
+    any-promise "^1.1.0"
+
 stream@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/stream/-/stream-0.0.2.tgz#7f5363f057f6592c5595f00bc80a27f5cec1f0ef"
@@ -13908,6 +13958,15 @@ webpack-log@^2.0.0:
     ansi-colors "^3.0.0"
     uuid "^3.3.2"
 
+webpack-manifest-plugin@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.0.4.tgz#e4ca2999b09557716b8ba4475fb79fab5986f0cd"
+  integrity sha512-nejhOHexXDBKQOj/5v5IZSfCeTO3x1Dt1RZEcGfBSul891X/eLIcIVH31gwxPDdsi2Z8LKKFGpM4w9+oTBOSCg==
+  dependencies:
+    fs-extra "^7.0.0"
+    lodash ">=3.5 <5"
+    tapable "^1.0.0"
+
 webpack-sources@^1.0.1, webpack-sources@^1.1.0, webpack-sources@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"